/* ==========================================================================
   India Heritage Trails — Rajasthan landing page
   Custom design system. No CSS framework: every rule below is deliberate,
   which keeps the render-blocking payload small and the visual language
   consistent (see README.md for the reasoning).

   1. Design tokens
   2. Reset & base
   3. Layout primitives
   4. Typography
   5. Buttons & links
   6. Forms
   7. Header & navigation
   8. Hero
   9. Trust strip
   10. Introduction
   11. Why Rajasthan
   12. Tours
   13. Experiences
   14. Destinations
   15. Quick enquiry
   16. Beyond Rajasthan (Madhya Pradesh)
   17. Travel styles
   18. Why us
   19. Testimonials
   20. Journey planner
   21. FAQ
   22. Final CTA
   23. Footer
   24. Sticky CTA
   25. Motion & responsive
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Colour — warm ivory & sandstone, deep royal blue, Rajasthan terracotta,
     restrained gold, warm charcoal. */
  --ivory:        #faf6ef;
  --ivory-soft:   #f5efe4;
  --sand:         #f0e6d6;
  --sandstone:    #e6d8c1;
  --sandstone-dk: #d6c3a5;

  --royal:        #12294f;
  --royal-mid:    #1c3c6e;
  --royal-deep:   #0d1e3c;

  --terracotta:   #cd5321;
  --terracotta-dk:#ac3f13;
  --terracotta-lt:#f0a882;
  --ember:        linear-gradient(135deg, #d55f28 0%, #b8420f 100%);

  --gold:         #b8913f;
  --gold-soft:    #d9bd7e;

  --ink:          #17140f;
  --ink-soft:     #2b261f;
  --charcoal:     #1e1b17;
  --body:         #4a4239;
  --body-light:   rgba(250, 246, 239, .76);

  --line:         rgba(23, 20, 15, .14);
  --line-soft:    rgba(23, 20, 15, .08);
  --line-light:   rgba(250, 246, 239, .18);

  --whatsapp:     #14834b;
  --whatsapp-dk:  #0f6a3b;
  --whatsapp-lt:  #34c77b;

  /* Type */
  --font-display: "Marcellus", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.12rem, 1.5rem + 2.5vw, 3.3rem);
  --fs-h2:      clamp(1.85rem, 1.35rem + 1.9vw, 2.7rem);
  --fs-h3:      clamp(1.15rem, 1.05rem + .38vw, 1.4rem);
  --fs-lede:    clamp(1.03rem, .98rem + .3vw, 1.17rem);
  --fs-body:    1rem;
  --fs-sm:      .9rem;
  --fs-xs:      .78rem;

  /* Space & shape */
  --gutter:     clamp(20px, 5vw, 48px);
  --section:    clamp(58px, 6.6vw, 108px);
  --shell:      1240px;
  --r-sm:       2px;
  --r:          3px;
  --shadow-sm:  0 1px 2px rgba(23, 20, 15, .05), 0 8px 24px -14px rgba(23, 20, 15, .28);
  --shadow-md:  0 2px 6px rgba(23, 20, 15, .06), 0 22px 48px -22px rgba(23, 20, 15, .38);
  --shadow-lg:  0 30px 70px -30px rgba(13, 30, 60, .55);
  --ease:       cubic-bezier(.22, .61, .36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.14; color: var(--ink); font-family: var(--font-display); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; background-color: var(--sand); }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
abbr[title] { text-decoration: none; color: var(--terracotta); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg:not(.brand__mark):not(.sprite) {
  width: 1.25em; height: 1.25em; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; padding: 12px 22px; background: var(--royal); color: var(--ivory);
  font-size: var(--fs-sm); border-radius: 0 0 var(--r) var(--r);
}
.skip-link:focus { transform: translate(-50%, 0); }

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

::selection { background: var(--terracotta); color: var(--ivory); }

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.container { width: min(var(--shell), 100% - (var(--gutter) * 2)); margin-inline: auto; }

section[id], main > section { scroll-margin-top: 92px; }

/* One rhythm for every section heading: eyebrow, title, lede, then a single
   gap before the content. Nothing sets its own margins on top of this. */
.section-head { max-width: 42rem; margin-bottom: clamp(30px, 3.4vw, 48px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head > * + * { margin-top: .85rem; }
.section-head .lede { margin-top: .9rem; max-width: 40rem; }
.section-head--center .lede { margin-inline: auto; }

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */
.eyebrow {
  margin: 0 0 .85rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracotta);
  display: flex;
  align-items: center;
  gap: .8em;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: .55; flex: none;
}
.section-head--center .eyebrow { justify-content: center; }
.eyebrow--light { color: var(--gold-soft); }

.section-title { font-size: var(--fs-h2); letter-spacing: -.005em; text-wrap: balance; }
.section-title--light { color: var(--ivory); }
.section-title em { font-style: normal; color: var(--terracotta); }

.lede { font-size: var(--fs-lede); line-height: 1.62; color: var(--body); }
.section-title + .lede, h2 + .lede { margin-top: .9rem; }
.lede--light { color: var(--body-light); }

.text-link {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--fs-sm); font-weight: 500; color: var(--royal);
  border-bottom: 1px solid rgba(18, 41, 79, .28); padding-bottom: 2px;
  transition: color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);
}
.text-link svg { width: 1em; height: 1em; }
.text-link:hover { color: var(--terracotta); border-color: var(--terracotta); gap: .75em; }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: var(--royal);
  --btn-fg: var(--ivory);
  --btn-bd: var(--royal);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 1.02em 1.75em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-sm);
  font-size: .92rem; font-weight: 500; letter-spacing: .035em; line-height: 1;
  text-align: center; cursor: pointer;
  transition: background-color .28s var(--ease), border-color .28s var(--ease),
              color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }

.btn--primary:hover { --btn-bg: var(--royal-deep); --btn-bd: var(--royal-deep); }
.btn--accent {
  --btn-bg: var(--terracotta); --btn-bd: var(--terracotta);
  background-image: var(--ember);
  box-shadow: 0 10px 26px -14px rgba(172, 63, 19, .9);
  font-weight: 600;
}
.btn--accent:hover {
  --btn-bg: var(--terracotta-dk); --btn-bd: var(--terracotta-dk);
  box-shadow: 0 16px 34px -14px rgba(172, 63, 19, .95);
}
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--outline:hover { --btn-bg: var(--royal); --btn-fg: var(--ivory); --btn-bd: var(--royal); }
.btn--ghost {
  --btn-bg: rgba(250, 246, 239, .07); --btn-fg: var(--ivory); --btn-bd: rgba(250, 246, 239, .45);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { --btn-bg: var(--ivory); --btn-fg: var(--ink); --btn-bd: var(--ivory); }
.btn--whatsapp { --btn-bg: var(--whatsapp); --btn-bd: var(--whatsapp); }
.btn--whatsapp:hover { --btn-bg: var(--whatsapp-dk); --btn-bd: var(--whatsapp-dk); }

/* Card WhatsApp button: solid green so it carries the same weight as the
   enquiry button beside it. */
.btn--wa { --btn-bg: var(--whatsapp); --btn-fg: #fff; --btn-bd: var(--whatsapp); }
.btn--wa:hover {
  --btn-bg: var(--whatsapp-dk); --btn-bd: var(--whatsapp-dk);
  box-shadow: 0 10px 24px -12px rgba(20, 131, 75, .85);
}
.btn--wa svg { width: 1.15em; height: 1.15em; }

/* Call: the third choice on a card, so it stays quiet next to the orange
   quote button and the green WhatsApp one. */
.btn--call { --btn-bg: var(--sand); --btn-fg: var(--ink); --btn-bd: var(--sandstone-dk); }
.btn--call:hover { --btn-bg: var(--ink); --btn-fg: var(--ivory); --btn-bd: var(--ink); }
.btn--call svg { color: var(--terracotta); stroke-width: 1.8; }
.btn--call:hover svg { color: inherit; }

.btn--sm { padding: .82em 1.3em; font-size: .85rem; }
.btn--lg { padding: 1.15em 2.2em; font-size: .98rem; }
.btn--block { display: flex; width: 100%; }

/* ==========================================================================
   6. FORMS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: .42rem; margin-bottom: .95rem; min-width: 0; }
.field label {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  width: 100%; padding: .82rem .9rem;
  font: inherit; font-size: .95rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  appearance: none; -webkit-appearance: none;
}
.field textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a4239' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 11px;
  padding-right: 2.4rem; cursor: pointer;
}
.field input::placeholder, .field textarea::placeholder { color: #9d9488; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--royal-mid); box-shadow: 0 0 0 3px rgba(28, 60, 110, .12);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(192, 86, 47, .12);
}
.field-error { font-size: var(--fs-xs); color: var(--terracotta-dk); font-weight: 500; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .85rem; }
.field-row--three { grid-template-columns: 1fr 1fr 1fr; }

.form-foot { margin: .9rem 0 0; font-size: var(--fs-xs); color: var(--body); text-align: center; }

.form-success { text-align: center; padding: clamp(28px, 4vw, 44px) 0; }
.form-success__mark {
  width: 46px !important; height: 46px !important; margin: 0 auto 1.1rem;
  padding: 11px; color: var(--whatsapp);
  border: 1px solid rgba(28, 122, 85, .35); border-radius: 50%;
}
.form-success h2 { font-size: 1.35rem; margin-bottom: .7rem; line-height: 1.3; }
.form-success p { font-size: var(--fs-sm); margin-bottom: 1.4rem; }
.form-success--lg { max-width: 34rem; margin-inline: auto; }
.form-success--lg h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }

/* ==========================================================================
   7. HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding: 18px 0;
  transition: padding .35s var(--ease), background-color .35s var(--ease),
              box-shadow .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(13, 30, 60, .55), rgba(13, 30, 60, 0));
  transition: opacity .35s var(--ease);
}
.site-header.is-scrolled {
  padding: 10px 0;
  background: rgba(250, 246, 239, .94);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 10px 30px -22px rgba(23, 20, 15, .5);
}
.site-header.is-scrolled::before { opacity: 0; }

.site-header__inner { display: flex; align-items: center; gap: clamp(16px, 3vw, 44px); }

/* The header starts transparent over the hero photograph and turns ivory once
   the page scrolls, so the logo ships in two versions and they cross-fade in
   the same grid cell -- no layout shift, no flash of the wrong one. */
.brand { display: grid; align-items: center; flex: none; }
.brand__logo {
  grid-area: 1 / 1; height: clamp(34px, 3.4vw, 44px); width: auto;
  /* img carries a sand placeholder tint while photos load; the logo is a
     transparent PNG and must not sit on a block of colour. */
  background: none;
  transition: opacity .35s var(--ease);
}
.brand__logo--dark { opacity: 0; }
.site-header.is-scrolled .brand__logo--light { opacity: 0; }
.site-header.is-scrolled .brand__logo--dark { opacity: 1; }

.primary-nav { margin-left: auto; }
.primary-nav ul { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); }
.primary-nav ul { flex-wrap: nowrap; }
.primary-nav a {
  position: relative; white-space: nowrap;
  font-size: .88rem; font-weight: 500; letter-spacing: .015em;
  color: rgba(250, 246, 239, .9); padding: 6px 0;
  transition: color .25s var(--ease);
}
.site-header.is-scrolled .primary-nav a { color: var(--ink-soft); }
.primary-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--terracotta); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.primary-nav a:hover { color: var(--terracotta-lt); }
.site-header.is-scrolled .primary-nav a:hover { color: var(--terracotta); }
.primary-nav a:hover::after { transform: scaleX(1); }

.site-header__actions { display: flex; align-items: center; gap: 14px; flex: none; }
.header-call {
  display: none; align-items: center; gap: .5em;
  font-size: .85rem; font-weight: 500; color: rgba(250, 246, 239, .88);
  transition: color .25s var(--ease);
}
.site-header.is-scrolled .header-call { color: var(--ink-soft); }
.header-call:hover { color: var(--terracotta-lt); }
.site-header.is-scrolled .header-call:hover { color: var(--terracotta); }

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid rgba(250, 246, 239, .35);
  border-radius: var(--r-sm); cursor: pointer;
}
.site-header.is-scrolled .nav-toggle { border-color: var(--line); }
.nav-toggle__bars { display: grid; gap: 5px; width: 20px; margin-inline: auto; }
.nav-toggle__bars i {
  display: block; height: 1.5px; background: var(--ivory);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.site-header.is-scrolled .nav-toggle__bars i { background: var(--ink); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* With the ivory panel open, the transparent header needs dark ink. */
.nav-open .site-header .brand { color: var(--royal); }
/* Menu open: the header goes ivory, so the dark logo has to come with it. */
.nav-open .site-header .brand__logo--light { opacity: 0; }
.nav-open .site-header .brand__logo--dark { opacity: 1; }
.nav-open .nav-toggle { border-color: var(--line); }
.nav-open .nav-toggle__bars i { background: var(--ink); }

/* Off-canvas ------------------------------------------------------------- */
.mobile-nav { position: fixed; inset: 0; z-index: 99; }
.mobile-nav[hidden] { display: none; }
.mobile-nav::before {
  content: ""; position: absolute; inset: 0; background: rgba(13, 30, 60, .55);
  opacity: 0; transition: opacity .35s var(--ease);
}
.mobile-nav.is-open::before { opacity: 1; }
.mobile-nav__panel {
  position: absolute; inset: 0 0 0 auto; width: min(380px, 86vw);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: 104px var(--gutter) 32px;
  background: var(--ivory); box-shadow: var(--shadow-md);
  transform: translateX(100%); transition: transform .4s var(--ease);
  overflow-y: auto;
}
.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }
.mobile-nav__list li + li { border-top: 1px solid var(--line-soft); }
.mobile-nav__list a {
  display: block; padding: 15px 0;
  font-family: var(--font-display); font-size: 1.32rem; color: var(--ink);
  transition: color .2s var(--ease), padding-left .25s var(--ease);
}
.mobile-nav__list a:hover { color: var(--terracotta); padding-left: 6px; }
.mobile-nav__foot { display: grid; gap: 14px; }
.mobile-nav__link {
  display: flex; align-items: center; gap: .65em;
  font-size: .92rem; font-weight: 500; color: var(--ink-soft);
}
.mobile-nav__link:hover { color: var(--terracotta); }

/* ==========================================================================
   8. HERO
   ========================================================================== */
.heritage-hero {
  position: relative; isolation: isolate;
  display: flex; align-items: center;
  min-height: clamp(660px, 96vh, 920px);
  padding: 140px 0 clamp(72px, 9vh, 104px);
  background: var(--charcoal);
  color: var(--ivory);
}
.heritage-hero__media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  /* Sandstone and a clear sky both flatten slightly on the way through WebP;
     this puts the colour back before anything is laid over it. */
  filter: saturate(1.1) contrast(1.04);
}
/* Three light passes, not one heavy one. Nothing here is dark enough to hide
   the photograph -- the headline gets its contrast from its own panel below,
   so all this has to do is protect the header, lean gently into the copy side
   and settle the bottom edge into the section that follows. */
.heritage-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(18, 11, 7, .5) 0%, rgba(18, 11, 7, .12) 17%,
                    rgba(18, 11, 7, 0) 32%),
    linear-gradient(100deg, rgba(20, 12, 8, .4) 0%, rgba(21, 13, 9, .22) 38%,
                    rgba(24, 16, 11, .05) 68%, rgba(24, 16, 11, 0) 100%),
    linear-gradient(to top, rgba(18, 11, 7, .52) 0%, rgba(18, 11, 7, 0) 36%);
}
/* A warm glow in the open corner, so the banner reads gold rather than grey. */
.heritage-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 104% 8%, rgba(214, 122, 51, .22), transparent 58%);
  mix-blend-mode: screen;
}

.heritage-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: clamp(32px, 4vw, 64px); align-items: center;
}

/* The copy carries its own contrast. Glass rather than a solid block, so the
   fort is still visible through it and the photograph is never boxed out. */
.heritage-hero__copy {
  /* Narrow enough that the fort itself is never hidden behind the panel. */
  max-width: 39rem;
  padding: clamp(26px, 2.6vw, 38px) clamp(24px, 2.6vw, 36px);
  border: 1px solid rgba(250, 246, 239, .15);
  border-radius: var(--r);
  background: rgba(19, 12, 8, .66);
  box-shadow: 0 30px 70px rgba(12, 8, 5, .34);
}
/* Where the browser can blur what is behind it, the panel can be much lighter
   and the picture reads straight through the copy. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .heritage-hero__copy {
    background: rgba(19, 12, 8, .54);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
  }
}
.heritage-hero h1 { text-shadow: 0 2px 18px rgba(18, 11, 7, .5); }
.heritage-hero h1 {
  font-size: var(--fs-display); color: var(--ivory); line-height: 1.06;
  letter-spacing: -.012em; margin-bottom: 1.15rem; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(9, 16, 30, .35);
}
.heritage-hero h1 em {
  font-style: normal; color: var(--gold-soft);
  display: inline-block; position: relative;
}

.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
  margin-bottom: 1.5rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line-light);
}
.hero-trust li {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(250, 246, 239, .82);
  display: flex; align-items: center; gap: 1.1rem;
}
.hero-trust li + li::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold); flex: none;
}

/* Last thing in the panel now that the call-us line has gone. */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }


/* Hero enquiry card ------------------------------------------------------ */
.hero-enquiry {
  padding: clamp(24px, 2.4vw, 32px);
  background: rgba(250, 246, 239, .97);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 145, 63, .32);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  color: var(--body);
}
.hero-enquiry__eyebrow {
  margin: 0 0 .5rem; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--terracotta);
}
.hero-enquiry__title {
  font-size: 1.42rem; line-height: 1.2; margin-bottom: 1.35rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--line-soft);
}
.hero-enquiry .btn { margin-top: .5rem; }
.hero-enquiry__note { margin: .8rem 0 0; font-size: var(--fs-xs); color: #7d746a; text-align: center; }

.heritage-hero__cue {
  position: absolute; left: 50%; bottom: 26px; translate: -50% 0;
  width: 22px; height: 34px; border: 1px solid rgba(250, 246, 239, .4);
  border-radius: 20px; display: grid; place-items: start center; padding-top: 7px;
}
.heritage-hero__cue span {
  width: 2px; height: 7px; border-radius: 2px; background: var(--gold-soft);
  animation: cue 2.1s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(9px); opacity: .2; }
}

/* ==========================================================================
   9. TRUST STRIP
   ========================================================================== */
.trust-strip {
  background: var(--ivory);
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(26px, 3vw, 34px) 0;
}
.trust-strip__grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 2vw, 28px);
}
.trust-strip__item {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-soft); line-height: 1.35;
}
.trust-strip__item + .trust-strip__item { padding-left: clamp(12px, 2vw, 28px); border-left: 1px solid var(--line-soft); }
.trust-strip__item svg { width: 24px; height: 24px; flex: none; color: var(--terracotta); stroke-width: 1.3; }

/* ==========================================================================
   10. INTRODUCTION
   ========================================================================== */
.intro { padding: var(--section) 0; }
.intro__grid {
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}

.intro__media { position: relative; padding-bottom: 56px; }
.intro__figure { overflow: hidden; border-radius: var(--r); }
.intro__figure img { width: 100%; height: 100%; object-fit: cover; }
.intro__figure--tall { aspect-ratio: 4 / 5.2; box-shadow: var(--shadow-md); }
.intro__figure--inset {
  position: absolute; right: -6%; bottom: 0; width: 52%; aspect-ratio: 1;
  border: 7px solid var(--ivory); box-shadow: var(--shadow-md);
}
.intro__caption {
  position: absolute; left: 0; bottom: 6px; margin: 0; max-width: 44%;
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: #8b8175;
}
.intro__caption span { color: var(--terracotta); font-weight: 600; }

.intro__copy .lede { margin-bottom: 1.2rem; }
.intro__points { margin: 1.6rem 0 1.9rem; display: grid; gap: .7rem; }
.intro__points li {
  display: flex; gap: .75rem; align-items: flex-start;
  font-size: .95rem; color: var(--ink-soft);
}
.intro__points svg {
  width: 18px; height: 18px; flex: none; margin-top: 3px;
  color: var(--terracotta); stroke-width: 2;
}

/* ==========================================================================
   11. WHY RAJASTHAN
   ========================================================================== */
.why-rajasthan {
  position: relative; padding: var(--section) 0;
  background: var(--royal); color: var(--body-light);
  background-image:
    radial-gradient(900px 480px at 8% 0%, rgba(28, 60, 110, .85), transparent 70%),
    radial-gradient(700px 500px at 100% 100%, rgba(163, 68, 31, .3), transparent 66%);
}
.why-rajasthan__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(40px, 5.5vw, 88px);
}
.why-rajasthan__intro .lede { margin-bottom: clamp(26px, 3vw, 40px); }

.why-rajasthan__media { position: relative; padding-right: 14%; }
.why-rajasthan__media figure { overflow: hidden; border-radius: var(--r); }
.why-rajasthan__media img { width: 100%; height: 100%; object-fit: cover; }
.why-rajasthan__media > figure:first-child { aspect-ratio: 16 / 8.4; box-shadow: var(--shadow-lg); }
.why-rajasthan__media-inset {
  position: absolute; right: 0; bottom: -32%; width: 42%; aspect-ratio: 1.22;
  border: 6px solid var(--royal); box-shadow: var(--shadow-lg);
}

.why-rajasthan__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  margin-top: clamp(74px, 8vw, 108px);
}
.why-rajasthan__cta p {
  margin: 0; max-width: 17rem; font-size: var(--fs-sm); color: rgba(250, 246, 239, .58);
}

.why-list { display: grid; gap: clamp(20px, 2.4vw, 30px); }
.why-list__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem;
  padding-bottom: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line-light);
}
.why-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.why-list__num {
  font-size: .82rem; font-weight: 600; color: var(--gold-soft);
  letter-spacing: .14em; padding-top: .45rem;
}
.why-list h3 {
  font-size: var(--fs-h3); color: var(--ivory); margin-bottom: .45rem;
}
.why-list p { font-size: .95rem; color: var(--body-light); margin: 0; }

/* ==========================================================================
   12. TOURS
   ========================================================================== */
.tours { padding: var(--section) 0; background: var(--sand); }

.tour-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(18px, 2vw, 28px);
}

.tour-card {
  position: relative; display: flex; flex-direction: column;
  grid-column: span 4;
  background: #fffdfa; border: 1px solid var(--line-soft); border-radius: var(--r);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.tour-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(184, 145, 63, .4); }

.tour-card__media { position: relative; overflow: hidden; aspect-ratio: 10 / 7; background: var(--sandstone); }
.tour-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tour-card:hover .tour-card__media img { transform: scale(1.055); }

.tour-card__flag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: .5em .85em; background: var(--terracotta); color: var(--ivory);
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border-radius: var(--r-sm);
}

.tour-card__body {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(20px, 2vw, 30px);
}
.tour-card__route {
  margin: 0 0 .7rem;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: .045em;
  color: var(--terracotta); text-transform: uppercase;
}
.tour-card__route svg { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: .45em; }
.tour-card__title { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.6rem); margin-bottom: .6rem; }
.tour-card__text { font-size: .93rem; margin-bottom: 1.2rem; }

.tour-card__meta {
  display: flex; flex-wrap: wrap; gap: .3rem 1.8rem; margin: auto 0 1.35rem;
  padding-top: 1.1rem; border-top: 1px solid var(--line-soft);
}
.tour-card__meta div { display: flex; flex-direction: column; gap: 2px; }
.tour-card__meta dt {
  font-size: .68rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: #8b8175;
}
.tour-card__meta dd { margin: 0; font-size: .9rem; font-weight: 500; color: var(--ink); }

/* Two equal calls to action per card: enquiry first, WhatsApp beside it. */
.tour-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tour-card__actions .btn { padding-inline: .9em; letter-spacing: .02em; }
.tour-card__actions .btn--accent svg {
  width: 1em; height: 1em; opacity: .85;
  transition: transform .3s var(--ease);
}
.tour-card__actions .btn--accent:hover svg { transform: translateX(3px); }

/* Feature card — horizontal, full width */
.tour-card--feature { grid-column: span 12; flex-direction: row; }
.tour-card--feature .tour-card__media { flex: 0 0 52%; aspect-ratio: auto; }
.tour-card--feature .tour-card__body { padding: clamp(26px, 3vw, 46px); justify-content: center; }
.tour-card--feature .tour-card__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem); }
.tour-card--feature .tour-card__text { font-size: 1rem; max-width: 34rem; }
.tour-card--feature .tour-card__meta { margin-top: 0; }

/* Wide luxury card */
.tour-card--wide { grid-column: span 8; flex-direction: row; }
.tour-card--wide .tour-card__media { flex: 0 0 44%; aspect-ratio: auto; }
.tour-card--wide .tour-card__body { padding: clamp(22px, 2.4vw, 36px); justify-content: center; }

/* Tailor-made card — deliberately different */
.tour-card--tailor {
  grid-column: span 4; background: var(--royal-deep); border-color: var(--royal-deep);
}
.tour-card--tailor .tour-card__media { aspect-ratio: 16 / 9; }
.tour-card--tailor .tour-card__media img { opacity: .62; transition: opacity .6s var(--ease), transform .8s var(--ease); }
.tour-card--tailor:hover .tour-card__media img { opacity: .78; }
.tour-card--tailor .tour-card__title { color: var(--ivory); }
.tour-card--tailor .tour-card__text { color: var(--body-light); }
.tour-card--tailor .tour-card__body { justify-content: center; }
.tour-card--tailor .tour-card__actions { margin-top: 1.2rem; }
.tour-card--tailor .btn--wa { --btn-bg: #179454; --btn-bd: #179454; }
.tour-card--tailor .btn--wa:hover { --btn-bg: var(--whatsapp-lt); --btn-fg: var(--royal-deep); --btn-bd: var(--whatsapp-lt); }

.tours__foot {
  margin: clamp(24px, 2.6vw, 34px) 0 0; text-align: center;
  font-size: var(--fs-sm); color: var(--body);
}
.tours__foot a { color: var(--royal); font-weight: 500; border-bottom: 1px solid rgba(18, 41, 79, .3); }
.tours__foot a:hover { color: var(--terracotta); border-color: var(--terracotta); }

/* ==========================================================================
   13. EXPERIENCES
   ========================================================================== */
.experiences { padding: var(--section) 0; background: var(--charcoal); }
.experiences .section-head { max-width: 44rem; }

/* A fixed mosaic rather than dense auto-placement: nine tiles tile the
   four-column grid exactly, so there are never stray holes.
     row 1  A A B C      row 3  E F F G
     row 2  A A D D      row 4  E H H I                                   */
.experience-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 15.4vw, 226px);
  gap: clamp(10px, 1.1vw, 16px);
}

.experience-tile {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: #2a2621;
}
.experience-tile--hero { grid-column: span 2; grid-row: span 2; }
.experience-tile--tall { grid-row: span 2; }
.experience-tile--wide { grid-column: span 2; }

.experience-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease), opacity .5s var(--ease);
  opacity: .92;
}
.experience-tile:hover img { transform: scale(1.06); opacity: 1; }

.experience-tile figcaption {
  position: absolute; inset: auto 0 0; z-index: 2;
  padding: clamp(14px, 1.5vw, 22px);
  background: linear-gradient(to top, rgba(17, 15, 12, .88) 12%, rgba(17, 15, 12, .35) 58%, transparent);
  transition: transform .5s var(--ease);
}
.experience-tile__label {
  display: inline-block; margin-bottom: .35rem;
  font-size: .64rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-soft);
}
.experience-tile h3 {
  font-size: clamp(1rem, .93rem + .35vw, 1.22rem); color: var(--ivory); line-height: 1.22;
}
.experience-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border: 1px solid transparent; border-radius: var(--r);
  transition: border-color .4s var(--ease);
}
.experience-tile:hover::after { border-color: rgba(217, 189, 126, .45); }

.experiences__foot {
  margin: clamp(26px, 3vw, 38px) 0 0; max-width: 52rem;
  font-size: var(--fs-sm); color: var(--body-light);
}
.experiences__foot a { color: var(--gold-soft); border-bottom: 1px solid rgba(217, 189, 126, .4); }
.experiences__foot a:hover { color: var(--ivory); border-color: var(--ivory); }

/* Gallery trigger: covers the whole tile, with a badge for discoverability. */
.experience-tile__open {
  position: absolute; inset: 0; z-index: 3;
  display: block; padding: 0; margin: 0;
  background: transparent; border: 0; cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.experience-tile__zoom {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center; width: 36px; height: 36px;
  color: var(--ivory);
  background: rgba(17, 15, 12, .5); backdrop-filter: blur(4px);
  border: 1px solid rgba(250, 246, 239, .3); border-radius: var(--r-sm);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease);
}
.experience-tile__zoom svg { width: 17px; height: 17px; }
.experience-tile:hover .experience-tile__zoom,
.experience-tile__open:focus-visible .experience-tile__zoom { opacity: 1; transform: none; }
.experience-tile__open:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
@media (hover: none) {
  .experience-tile__zoom { opacity: .9; transform: none; }
}

/* ==========================================================================
   14. DESTINATIONS
   ========================================================================== */
.destinations { padding: var(--section) 0; background: var(--ivory); }

.destination-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(230px, 21vw, 280px);
  gap: clamp(12px, 1.4vw, 20px);
}

.destination-card {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: var(--sandstone); isolation: isolate;
}
.destination-card--lead { grid-column: span 2; grid-row: span 2; }
.destination-card:last-child { grid-column: span 4; }

.destination-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.destination-card:hover img { transform: scale(1.055); }
.destination-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(11, 17, 30, .9) 6%, rgba(11, 17, 30, .32) 48%, rgba(11, 17, 30, .04) 78%);
  transition: background .5s var(--ease);
}
.destination-card:hover::after {
  background: linear-gradient(to top, rgba(11, 17, 30, .94) 6%, rgba(11, 17, 30, .5) 52%, rgba(11, 17, 30, .12) 82%);
}

.destination-card__body {
  position: absolute; inset: auto 0 0; z-index: 2;
  padding: clamp(18px, 2vw, 30px); color: var(--ivory);
}
.destination-card h3 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); color: var(--ivory); line-height: 1.1;
}
.destination-card__tag {
  margin: .3rem 0 0; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold-soft);
}
.destination-card__text {
  margin: .7rem 0 0; max-width: 27rem;
  font-size: .9rem; color: rgba(250, 246, 239, .82);
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .45s var(--ease), max-height .45s var(--ease), margin .45s var(--ease);
}
.destination-card:hover .destination-card__text,
.destination-card:focus-within .destination-card__text { opacity: 1; max-height: 8rem; }
.destination-card--lead .destination-card__text { opacity: 1; max-height: 8rem; }

/* ==========================================================================
   15. QUICK ENQUIRY
   ========================================================================== */
.quick-enquiry {
  padding: var(--section) 0;
  background: linear-gradient(150deg, var(--sandstone) 0%, var(--sand) 55%, var(--ivory-soft) 100%);
  border-block: 1px solid rgba(184, 145, 63, .22);
}
.quick-enquiry__grid {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px); align-items: center;
}
.quick-enquiry__copy .lede { margin-bottom: 1.6rem; }
.quick-enquiry__assurances { display: grid; gap: .6rem; margin-bottom: 1.6rem; }
.quick-enquiry__assurances li {
  display: flex; align-items: center; gap: .65rem;
  font-size: .93rem; font-weight: 500; color: var(--ink-soft);
}
.quick-enquiry__assurances svg { width: 17px; height: 17px; color: var(--terracotta); stroke-width: 2; flex: none; }
.quick-enquiry__aside { font-size: var(--fs-sm); color: var(--body); }
.quick-enquiry__aside a { color: var(--royal); font-weight: 500; border-bottom: 1px solid rgba(18, 41, 79, .3); }
.quick-enquiry__aside a:hover { color: var(--terracotta); border-color: var(--terracotta); }

.quick-enquiry__panel {
  padding: clamp(24px, 3vw, 40px);
  background: #fffdfa; border: 1px solid rgba(184, 145, 63, .28);
  border-radius: var(--r); box-shadow: var(--shadow-md);
}

/* ==========================================================================
   16. BEYOND RAJASTHAN — secondary, intentionally lighter in weight
   ========================================================================== */
.beyond {
  padding: clamp(48px, 6vw, 78px) 0;
  background: var(--ivory);
  border-top: 1px solid var(--line-soft);
}
.beyond__inner {
  /* Sits on .container, so it has to keep the shell gutter or the copy
     and the photographs run flush to the screen edge on phones. */
  width: min(1060px, 100% - (var(--gutter) * 2)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.beyond__title {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); margin-bottom: .8rem;
}
.beyond__copy p { font-size: .95rem; margin-bottom: 1.1rem; }
.beyond__places {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.5rem;
}
.beyond__places li {
  padding: .4em .8em; font-size: var(--fs-xs); font-weight: 500; letter-spacing: .04em;
  color: var(--ink-soft); background: var(--sand); border-radius: var(--r-sm);
}
.beyond__media { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.beyond__media figure { position: relative; overflow: hidden; border-radius: var(--r); }
.beyond__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s var(--ease); }
.beyond__media figure:hover img { transform: scale(1.05); }
.beyond__media figcaption {
  position: absolute; inset: auto 0 0; padding: 22px 12px 9px;
  background: linear-gradient(to top, rgba(17, 15, 12, .8), transparent);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ivory);
}

/* ==========================================================================
   17. TRAVEL STYLES
   ========================================================================== */
.travel-styles { padding: var(--section) 0; background: var(--sand); }
.style-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.style-tile {
  padding: clamp(20px, 2vw, 28px);
  background: #fffdfa; border: 1px solid var(--line-soft); border-radius: var(--r);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.style-tile:hover { transform: translateY(-3px); border-color: rgba(184, 145, 63, .45); box-shadow: var(--shadow-sm); }
.style-tile svg {
  width: 26px; height: 26px; margin-bottom: 1rem;
  color: var(--terracotta); stroke-width: 1.3;
}
.style-tile h3 { font-size: 1.14rem; margin-bottom: .35rem; }
.style-tile p { font-size: .875rem; margin: 0; }
.travel-styles__cta { margin-top: clamp(30px, 3.4vw, 44px); text-align: center; }

/* ==========================================================================
   18. WHY US
   ========================================================================== */
.why-us { padding: var(--section) 0; background: var(--ivory); }
.why-us__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.4vw, 52px) clamp(28px, 3.4vw, 56px);
}
.why-us__item { padding-top: 1.3rem; border-top: 1px solid var(--line); }
.why-us__num {
  display: block; margin-bottom: .8rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; color: var(--gold);
}
.why-us__item h3 { font-size: var(--fs-h3); margin-bottom: .5rem; }
.why-us__item p { font-size: .93rem; margin: 0; }

/* ==========================================================================
   18b. CLIENT GALLERY -- the owner's own photographs of their guests
   ========================================================================== */
.clients {
  padding: var(--section) 0;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(205, 83, 33, .07), transparent 65%),
    radial-gradient(760px 400px at 92% 100%, rgba(28, 60, 110, .08), transparent 68%),
    var(--ivory);
  border-top: 1px solid var(--line-soft);
}
.clients .section-head { max-width: 44rem; }

.client-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.3vw, 20px);
}
.client-tile {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: var(--r);
  background: var(--sandstone);
  box-shadow: 0 12px 26px -18px rgba(23, 20, 15, .6);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.client-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -18px rgba(23, 20, 15, .55); }
.client-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.client-tile:hover img { transform: scale(1.06); }

/* Every second tile is nudged down a little, so eight portraits read as a
   gallery wall rather than a spreadsheet. */
.client-grid > :nth-child(even) { transform: translateY(clamp(10px, 1.6vw, 26px)); }
.client-grid > :nth-child(even):hover { transform: translateY(calc(clamp(10px, 1.6vw, 26px) - 4px)); }

.client-tile figcaption {
  position: absolute; inset: auto 0 0; z-index: 2;
  padding: clamp(26px, 3vw, 34px) clamp(12px, 1.2vw, 16px) clamp(11px, 1.1vw, 14px);
  background: linear-gradient(to top, rgba(17, 15, 12, .88) 10%, rgba(17, 15, 12, .3) 60%, transparent);
  font-size: .78rem; font-weight: 500; letter-spacing: .015em; color: var(--ivory);
}
.client-tile__open {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: start end; padding: 10px;
  background: transparent; border: 0; cursor: pointer;
}
.client-tile__zoom {
  display: grid; place-items: center; width: 32px; height: 32px;
  background: rgba(250, 246, 239, .9); color: var(--ink); border-radius: 50%;
  opacity: 0; transform: scale(.85);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.client-tile:hover .client-tile__zoom,
.client-tile__open:focus-visible .client-tile__zoom { opacity: 1; transform: scale(1); }
.client-tile__zoom svg { width: 16px; height: 16px; }

.clients__foot {
  display: flex; align-items: flex-start; gap: .7em;
  max-width: 46rem; margin: clamp(34px, 3.4vw, 48px) auto 0;
  font-size: var(--fs-sm); color: var(--body); text-align: left;
}
.clients__foot svg { width: 18px; height: 18px; flex: none; margin-top: .2em; color: var(--terracotta); }
.clients__foot a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   19. REVIEWS -- shaped like a review platform's own panel
   ========================================================================== */
.reviews { padding: var(--section) 0; background: var(--ivory-soft); }

/* Rating summary ---------------------------------------------------------- */
.reviews__summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(18px, 3vw, 46px);
  max-width: 46rem; margin: 0 auto clamp(28px, 3vw, 42px);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 34px);
  background: #fffdfa; border: 1px solid var(--line-soft); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.reviews__score { display: grid; justify-items: center; gap: 2px; }
.reviews__number {
  margin: 0; font-family: var(--font-display); font-size: 2.5rem; line-height: 1; color: var(--ink);
}
.reviews__stars, .review-card__stars { display: inline-flex; gap: 2px; margin: 0; }
.reviews__stars svg, .review-card__stars svg {
  width: 16px; height: 16px; color: #f2a935; fill: currentColor; stroke: none;
}
.reviews__stars svg { width: 18px; height: 18px; }
.reviews__count { margin: .2rem 0 0; font-size: var(--fs-xs); color: #7d746a; }

.reviews__platforms {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.reviews__platform {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .5em .85em; background: var(--ivory);
  border: 1px solid var(--line-soft); border-radius: 999px;
  font-size: var(--fs-xs); color: var(--body); white-space: nowrap;
}
.reviews__platform svg { width: 16px; height: 16px; fill: none; stroke: none; flex: none; }
.reviews__platform b { color: var(--ink); font-weight: 600; }

/* Review cards ------------------------------------------------------------ */
/* Carousel. The track scrolls horizontally with snap points; the arrows and
   the autoplay only ever call scrollBy, so the whole thing still works with
   JavaScript off -- it is simply a scrollable row. */
.reviews__carousel { position: relative; }
.reviews__grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--rev-gap)) / 4);
  --rev-gap: clamp(16px, 1.8vw, 24px);
  gap: var(--rev-gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.reviews__grid::-webkit-scrollbar { display: none; }
.reviews__grid > * { scroll-snap-align: start; }

.reviews__arrow {
  position: absolute; top: 50%; z-index: 3;
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-top: -21px;
  background: #fffdfa; color: var(--ink);
  border: 1px solid var(--line); border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: background .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
}
.reviews__arrow:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.reviews__arrow[disabled] { opacity: .35; pointer-events: none; }
.reviews__arrow svg { width: 18px; height: 18px; }
.reviews__arrow--prev { left: clamp(-21px, -1.4vw, -8px); }
.reviews__arrow--next { right: clamp(-21px, -1.4vw, -8px); }

.reviews__dots {
  display: flex; justify-content: center; gap: 7px;
  margin: clamp(16px, 1.8vw, 22px) 0 0; padding: 0; list-style: none;
}
.reviews__dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(23, 20, 15, .2); transition: background .25s var(--ease), width .25s var(--ease);
}
.reviews__dot[aria-current="true"] { width: 20px; border-radius: 999px; background: var(--terracotta); }

/* On a phone a slide fills the width, so floating arrows would sit on top of
   the review text. Below 700px they drop into a control row with the dots. */
@media (max-width: 700px) {
  .reviews__carousel {
    display: grid; row-gap: 16px;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "track track track" "prev dots next";
  }
  .reviews__grid { grid-area: track; }
  .reviews__arrow { position: static; margin: 0; width: 40px; height: 40px; }
  .reviews__arrow--prev { grid-area: prev; }
  .reviews__arrow--next { grid-area: next; }
  .reviews__dots { grid-area: dots; align-self: center; margin: 0; }
}
.review-card {
  display: flex; flex-direction: column; gap: .85rem; height: 100%;
  padding: clamp(20px, 2vw, 26px);
  background: #fffdfa; border: 1px solid var(--line-soft); border-radius: var(--r);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }

.review-card__head { display: flex; align-items: center; gap: .7rem; }
.review-card__avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover;
  background: var(--sand);
}
.review-card__who { min-width: 0; flex: 1; }
.review-card__name {
  margin: 0; font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.25;
}
.review-card__meta {
  margin: 1px 0 0; font-size: .74rem; letter-spacing: .02em; color: #8b8175;
}
/* The platform mark carries its own colours, so it opts out of the page's
   currentColor stroke. */
.review-card__source { flex: none; line-height: 0; }
.review-card__source svg { width: 20px; height: 20px; fill: none; stroke: none; }

.review-card__rating { display: flex; align-items: center; gap: .6em; margin: 0; }
.review-card__date { font-size: .74rem; color: #9a9086; }

.review-card__text {
  margin: 0; font-size: .93rem; line-height: 1.62; color: #443c33;
}
.review-card__trip {
  display: flex; align-items: center; gap: .45em;
  margin: auto 0 0; padding-top: .85rem; border-top: 1px solid var(--line-soft);
  font-size: .76rem; letter-spacing: .02em; color: #7d746a;
}
.review-card__trip svg { width: 15px; height: 15px; flex: none; color: var(--terracotta); }

.review-card__photos {
  display: flex; gap: 6px; margin: 0; padding: 0; list-style: none;
}
.review-card__photos img {
  width: 62px; height: 62px; object-fit: cover; border-radius: 8px; display: block;
}

.reviews__note {
  margin: clamp(24px, 2.6vw, 34px) auto 0; max-width: 46rem; text-align: center;
  padding: .9rem 1.2rem; font-size: var(--fs-xs); color: #7d746a;
  background: rgba(184, 145, 63, .09); border: 1px dashed rgba(184, 145, 63, .4); border-radius: var(--r-sm);
}
.reviews__note strong { color: var(--ink-soft); }

/* ==========================================================================
   19b. EXPLORE OUR OTHER TOURS -- the same card, outside Rajasthan
   ========================================================================== */
.other-tours { padding: var(--section) 0; background: var(--ivory); border-top: 1px solid var(--line-soft); }
.other-tours .section-head { max-width: 46rem; }
.other-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
}

/* ==========================================================================
   20. JOURNEY PLANNER
   ========================================================================== */
.journey-planner {
  padding: var(--section) 0;
  background: var(--royal-deep);
  background-image:
    radial-gradient(820px 460px at 82% 4%, rgba(28, 60, 110, .9), transparent 68%),
    radial-gradient(700px 420px at 0% 100%, rgba(163, 68, 31, .28), transparent 70%);
}
.journey-planner .section-head { max-width: 46rem; }
.journey-planner__panel {
  width: min(980px, 100%); margin-inline: auto;
  padding: clamp(24px, 3.4vw, 52px);
  background: var(--ivory); border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}

.planner-form__block {
  border: 0; border-top: 1px solid var(--line-soft);
  padding: clamp(20px, 2.2vw, 28px) 0 0; margin: 0 0 clamp(24px, 2.6vw, 34px);
}
.planner-form__block legend {
  display: flex; align-items: center; gap: .7rem; padding: 0; margin-bottom: 1.2rem;
  font-family: var(--font-display); font-size: 1.2rem; color: var(--ink);
}
.planner-form__step {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  background: var(--royal); color: var(--ivory);
  font-family: var(--font-body); font-size: .74rem; font-weight: 600; border-radius: 50%;
}

.choice-grid { display: flex; flex-wrap: wrap; gap: .55rem; }
.choice-grid input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-grid label {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .62em 1.05em; cursor: pointer;
  font-size: .88rem; font-weight: 500; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--line); border-radius: 100px;
  transition: background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.choice-grid label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: transparent; border: 1px solid var(--line); transition: inherit;
}
.choice-grid label:hover { border-color: var(--terracotta-lt); }
.choice-grid input:checked + label {
  background: var(--royal); border-color: var(--royal); color: var(--ivory);
}
.choice-grid input:checked + label::before { background: var(--gold-soft); border-color: var(--gold-soft); }
.choice-grid input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }

.planner-form__submit { text-align: center; padding-top: .5rem; }
.planner-form__submit .btn { min-width: 260px; }

/* ==========================================================================
   21. FAQ
   ========================================================================== */
.faq { padding: var(--section) 0; background: var(--ivory); }
.faq__grid {
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 84px); align-items: start;
}
.faq__intro { position: sticky; top: 112px; }
.faq__intro .lede { margin-bottom: 1.7rem; }

.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-item:first-child { border-top: 1px solid var(--line-soft); }
.faq-item summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  transition: color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 {
  font-size: 1.06rem; font-family: var(--font-body); font-weight: 500;
  line-height: 1.45; color: var(--ink); margin: 0; flex: 1;
  transition: color .25s var(--ease);
}
.faq-item summary::after {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px;
  background:
    linear-gradient(var(--terracotta), var(--terracotta)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--terracotta), var(--terracotta)) center / 1.5px 100% no-repeat;
  transition: transform .35s var(--ease), opacity .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(180deg); background-size: 100% 1.5px, 0 100%; }
.faq-item summary:hover h3 { color: var(--terracotta); }
.faq-item__body { padding: 0 2.6rem 1.4rem 0; }
.faq-item__body p { font-size: .95rem; margin: 0; }
.faq-item[open] .faq-item__body { animation: faqIn .4s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   22. FINAL CTA
   ========================================================================== */
.final-cta {
  position: relative; isolation: isolate;
  display: grid; place-items: center; text-align: center;
  min-height: clamp(440px, 62vh, 620px);
  padding: clamp(72px, 9vw, 120px) 0;
  background: var(--royal-deep);
}
.final-cta__media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.final-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(9, 16, 30, .86) 0%, rgba(9, 16, 30, .42) 58%, rgba(9, 16, 30, .5) 100%);
}
.final-cta__inner { max-width: 46rem; }
.final-cta__copy h2 {
  font-size: clamp(2.05rem, 1.4rem + 2.6vw, 3.4rem);
  color: var(--ivory); line-height: 1.05; margin-bottom: 1.2rem;
}
.final-cta__copy > p {
  font-size: var(--fs-lede); color: rgba(250, 246, 239, .84);
  max-width: 38rem; margin-bottom: 2.1rem;
}
.final-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ==========================================================================
   23. FOOTER
   ========================================================================== */
.site-footer { background: var(--charcoal); color: rgba(250, 246, 239, .68); padding-top: clamp(52px, 6vw, 80px); }
.site-footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, .8fr)) minmax(0, 1.1fr);
  gap: clamp(28px, 3.2vw, 52px);
  padding-bottom: clamp(40px, 4.5vw, 60px);
}
.brand--footer { margin-bottom: 1.2rem; }
.brand--footer .brand__logo { height: 46px; opacity: 1; }
.site-footer__about { font-size: .88rem; line-height: 1.7; max-width: 32rem; margin-bottom: 1.5rem; }

.social { display: flex; gap: 10px; }
.social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line-light); border-radius: 50%; color: rgba(250, 246, 239, .78);
  transition: background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.social svg { width: 17px; height: 17px; }
.social a:hover { background: var(--terracotta); border-color: var(--terracotta); color: var(--ivory); }

.site-footer__col h2 {
  font-family: var(--font-body); font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft);
  margin-bottom: 1.1rem;
}
.site-footer__col ul { display: grid; gap: .62rem; }
.site-footer__col a, .site-footer__contact span {
  display: flex; align-items: center; gap: .6em;
  font-size: .89rem; color: rgba(250, 246, 239, .68);
  transition: color .22s var(--ease);
}
.site-footer__col a:hover { color: var(--ivory); }
.site-footer__contact svg { width: 15px; height: 15px; flex: none; color: var(--gold-soft); }
.site-footer__contact li { line-height: 1.5; }

.site-footer__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 20px 0; border-top: 1px solid var(--line-light);
  font-size: var(--fs-xs); color: rgba(250, 246, 239, .48);
}
.site-footer__bar p { margin: 0; }
.site-footer__legal a { color: rgba(250, 246, 239, .58); }
.site-footer__legal a:hover { color: var(--ivory); }

/* Section 24 (the first sticky bar) was superseded by section 33 below; its
   leftover rules kept leaking into the new bar, so they are gone.
   The sticky bar is defined in exactly one place now. */

/* ==========================================================================
   24b. GALLERY LIGHTBOX
   ========================================================================== */
.lightbox { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; }
.lightbox[hidden] { display: none; }

.lightbox__scrim {
  position: absolute; inset: 0; cursor: zoom-out;
  background: rgba(8, 11, 18, .96);
  opacity: 0; transition: opacity .3s var(--ease);
}
.lightbox.is-open .lightbox__scrim { opacity: 1; }

.lightbox__frame {
  position: relative; z-index: 1;
  /* Sized by the image so the controls sit against its edges, not against
     an arbitrary column width. */
  width: fit-content; max-width: min(1180px, calc(100% - 36px));
  max-height: calc(100vh - 32px);
  display: grid; place-items: center;
  opacity: 0; transform: scale(.985);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.lightbox.is-open .lightbox__frame { opacity: 1; transform: none; }

.lightbox__stage { display: grid; justify-items: center; gap: 0; }
.lightbox__image {
  width: auto; max-width: 100%; max-height: min(72vh, 780px);
  object-fit: contain; border-radius: var(--r);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
  background: #14110d;
}
.lightbox__caption {
  width: 100%; max-width: 620px; margin-inline: auto;
  padding: 18px 8px 0; text-align: center;
}
.lightbox__label {
  display: block; margin-bottom: .3rem;
  font-size: .66rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-soft);
}
.lightbox__title { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); color: var(--ivory); }
.lightbox__count {
  margin: .45rem 0 0; font-size: var(--fs-xs);
  letter-spacing: .1em; color: rgba(250, 246, 239, .5);
}

.lightbox__btn {
  position: absolute; z-index: 2;
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  color: var(--ivory); cursor: pointer;
  background: rgba(250, 246, 239, .1); backdrop-filter: blur(8px);
  border: 1px solid rgba(250, 246, 239, .26); border-radius: 50%;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.lightbox__btn svg { width: 20px; height: 20px; stroke-width: 1.7; }
.lightbox__btn:hover {
  background: var(--ivory); color: var(--ink); border-color: var(--ivory);
}
.lightbox__btn--close { top: -18px; right: -18px; }
.lightbox__btn--close:hover { background: var(--terracotta); color: var(--ivory); border-color: var(--terracotta); }
.lightbox__btn--prev { left: -22px; top: 38%; transform: translateY(-50%); }
.lightbox__btn--next { right: -22px; top: 38%; transform: translateY(-50%); }
.lightbox__btn--prev:hover { translate: -3px 0; }
.lightbox__btn--next:hover { translate: 3px 0; }

@media (max-width: 900px) {
  .lightbox__frame { width: calc(100% - 20px); }
  .lightbox__btn { width: 42px; height: 42px; }
  .lightbox__btn--close { top: -14px; right: -8px; }
  /* On a phone the arrows sit over the photograph itself — there is no room
     to hang them outside the frame. */
  .lightbox__btn--prev { left: 8px; top: 30%; }
  .lightbox__btn--next { right: 8px; top: 30%; }
  .lightbox__image { max-height: 58vh; }
}

/* ==========================================================================
   25. MOTION
   ========================================================================== */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; }

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

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 1100px) {
  .header-call { display: flex; }
}

@media (max-width: 1180px) {
  .heritage-hero__grid { grid-template-columns: minmax(0, 1fr) 370px; }
  .primary-nav ul { gap: 18px; }
  .primary-nav a { font-size: .84rem; }
}

@media (max-width: 1020px) {
  /* Navigation collapses to off-canvas */
  .primary-nav { display: none; }
  .nav-toggle { display: block; }
  .site-header__actions { margin-left: auto; }

  .heritage-hero { min-height: 0; padding-top: 120px; }
  .heritage-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .heritage-hero__copy { max-width: 38rem; }
  .heritage-hero__cue { display: none; }
  .hero-enquiry { max-width: 520px; width: 100%; }

  .trust-strip__grid { grid-template-columns: repeat(3, 1fr); gap: 18px 0; }
  .trust-strip__item { padding: 6px 14px; }
  .trust-strip__item + .trust-strip__item { border-left: 1px solid var(--line-soft); }
  .trust-strip__item:nth-child(4) { border-left: 0; }

  .intro__grid, .why-rajasthan__grid, .quick-enquiry__grid, .faq__grid, .beyond__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .client-grid { grid-template-columns: repeat(3, 1fr); }
  .intro__media { max-width: 520px; }
  .why-rajasthan__media { padding-right: 0; max-width: 560px; margin-bottom: 60px; }
  .why-rajasthan__media-inset { right: -4%; bottom: -18%; width: 40%; }
  .faq__intro { position: static; }

  .tour-card--feature { flex-direction: column; }
  .tour-card--feature .tour-card__media { flex: none; aspect-ratio: 16 / 8; }
  .tour-card--wide { grid-column: span 12; flex-direction: column; }
  .tour-card--wide .tour-card__media { flex: none; aspect-ratio: 16 / 8; }
  .tour-card--tailor { grid-column: span 12; }
  .tour-card--tailor .tour-card__media { aspect-ratio: 16 / 6; }
  .tour-card { grid-column: span 6; }

  .why-us__grid { grid-template-columns: repeat(2, 1fr); }
  .reviews__grid { grid-auto-columns: calc((100% - var(--rev-gap)) / 2); }
  .style-grid { grid-template-columns: repeat(3, 1fr); }

  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: span 2; }
}

@media (max-width: 860px) {
  .destination-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 260px; }
  .destination-card--lead { grid-column: span 2; grid-row: span 1; }
  .destination-card:last-child { grid-column: span 2; }
  .destination-card__text { opacity: 1; max-height: 8rem; }

  /* Two columns: every tile becomes a single cell so the mosaic cannot
     leave holes; the last one runs full width to close the grid. */
  .experience-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 26vw, 210px); }
  .experience-tile, .experience-tile--hero, .experience-tile--tall, .experience-tile--wide {
    grid-column: span 1; grid-row: span 1;
  }
  .experience-tile:last-child { grid-column: span 2; }

  .beyond__media { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 700px) {
  section[id], main > section { scroll-margin-top: 74px; }

  /* On a phone the hero column is far taller than the photograph's aspect
     ratio, so covering the whole section would smear it. Instead the image
     leads the top of the screen and dissolves into solid ink behind the form. */
  /* The panel is nearly the full width of a phone, so the only way the
     photograph gets seen is to start the copy below the fort. */
  .heritage-hero { padding-top: 190px; padding-bottom: 52px; background: var(--charcoal); }
  /* The phone column is far taller than the photograph, so the image leads the
     screen and dissolves into ink behind the form rather than being smeared to
     fill the whole section. The panel means it no longer has to fade early. */
  .heritage-hero__media { height: min(86%, 900px); object-position: center 40%; }
  .heritage-hero::after {
    background:
      linear-gradient(to bottom, rgba(18, 11, 7, .58) 0%, rgba(18, 11, 7, .2) 13%,
                      rgba(18, 11, 7, .1) 34%, rgba(20, 13, 9, .5) 62%,
                      rgba(20, 13, 9, .88) 74%, var(--charcoal) 84%);
  }
  .heritage-hero::before { display: none; }
  /* Bright sandstone sits directly behind the panel on a phone, where the
     desktop glass is not quite enough to carry the dimmer lines. */
  .heritage-hero__copy { padding: 22px 20px; background: rgba(17, 11, 7, .76); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .heritage-hero__copy { background: rgba(17, 11, 7, .64); }
  }
  /* The ribbon and trust strip repeat these three points immediately below,
     so on a phone the space is better spent pulling the form up the screen. */
  .hero-trust { display: none; }
  .hero-trust { gap: .35rem 1.1rem; padding-bottom: 1.3rem; text-shadow: 0 1px 12px rgba(9, 16, 30, .6); }
  .hero-trust li { font-size: .68rem; gap: 0; }
  .hero-trust li + li::before { display: none; }
  .hero-actions .btn { flex: 1 1 100%; }

  /* Keep the hero enquiry compact: paired fields stay side by side. */
  .hero-enquiry .field-row { grid-template-columns: 1fr 1fr; }
  .hero-enquiry .field label { font-size: .68rem; letter-spacing: .06em; }

  .trust-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .trust-strip__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .trust-strip__item:nth-child(4) { border-left: 1px solid var(--line-soft); }
  .trust-strip__item:last-child { border-left: 0; padding-left: 0; }
  .trust-strip__item svg { width: 21px; height: 21px; }

  .intro__media { padding-bottom: 0; }
  .intro__figure--inset {
    position: relative; right: auto; bottom: auto;
    width: 48%; margin: -20% 0 0 auto; border-width: 5px;
  }
  .intro__caption { position: static; max-width: none; margin-top: 14px; }
  .tour-card, .tour-card--feature { grid-column: span 12; }
  .tour-card__actions { grid-template-columns: 1fr; }
  .client-grid { grid-template-columns: repeat(2, 1fr); }
  .why-us__grid, .style-grid { grid-template-columns: 1fr; }
  .reviews__grid { grid-auto-columns: 100%; }
  .field-row, .field-row--three { grid-template-columns: 1fr; }

  .faq-item__body { padding-right: 0; }
  .final-cta__actions .btn { flex: 1 1 100%; }

  .sticky-cta { display: flex; }
  body { padding-bottom: 0; }
  .site-footer { padding-bottom: 92px; }

  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .site-footer__brand, .site-footer__contact { grid-column: span 2; }
  .site-footer__bar { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .destination-grid { grid-template-columns: 1fr; grid-auto-rows: 300px; }
  .destination-card--lead, .destination-card:last-child { grid-column: span 1; }

  .experience-grid { grid-auto-rows: clamp(140px, 38vw, 180px); gap: 8px; }

  .beyond__media { grid-template-columns: repeat(2, 1fr); }
  .style-grid { grid-template-columns: repeat(2, 1fr); }
  .style-tile p { font-size: .82rem; }

  .journey-planner__panel { padding: 22px 18px; }
  .planner-form__submit .btn { min-width: 0; width: 100%; }
  .hero-enquiry { padding: 22px 18px; }
}

@media (max-width: 560px) {
  /* The header CTA would squeeze the menu button off-screen; the sticky bar
     and the hero form carry the call to action on small phones. */
  .site-header__actions > .btn { display: none; }
  .hero-enquiry .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .style-grid { grid-template-columns: 1fr; }
  .brand__logo { height: 30px; }
}


/* ==========================================================================
   26. USP RIBBON
   ========================================================================== */
.usp-ribbon {
  overflow: hidden; padding: 13px 0;
  background: var(--ember);
  color: #fff;
  border-block: 1px solid rgba(0, 0, 0, .12);
}
.usp-ribbon__track { display: flex; width: max-content; animation: ribbon 34s linear infinite; }
.usp-ribbon__set { display: flex; align-items: center; }
.usp-ribbon__set > span {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 0 clamp(22px, 3.4vw, 46px);
  font-size: clamp(.72rem, .68rem + .16vw, .84rem); font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; white-space: nowrap;
}
.usp-ribbon__set > span::after {
  content: ""; position: absolute; right: 0;
}
.usp-ribbon__set > span + span { border-left: 1px solid rgba(255, 255, 255, .3); }
.usp-ribbon svg { width: 18px; height: 18px; stroke-width: 1.6; opacity: .95; }
@keyframes ribbon { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.usp-ribbon:hover .usp-ribbon__track { animation-play-state: paused; }

/* ==========================================================================
   27. HOW IT WORKS
   ========================================================================== */
.how { padding: clamp(52px, 6vw, 88px) 0; background: var(--ivory); }
.how-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 34px); counter-reset: step;
}
.how-step {
  position: relative; padding: clamp(24px, 2.6vw, 34px);
  background: #fffdfa; border: 1px solid var(--line-soft); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.how-step + .how-step::before {
  content: ""; position: absolute; left: -18px; top: 50%; width: 12px; height: 1px;
  background: rgba(205, 83, 33, .5);
}
.how-step__num {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 1.1rem;
  font-size: 1rem; font-weight: 600; color: #fff;
  background: var(--ember); border-radius: 50%;
  box-shadow: 0 8px 20px -10px rgba(172, 63, 19, .9);
}
.how-step h3 { font-size: var(--fs-h3); margin-bottom: .5rem; }
.how-step p { font-size: .93rem; margin: 0; }
.how__cta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin-top: clamp(26px, 3vw, 40px);
}

/* ==========================================================================
   28. PACKAGES
   ========================================================================== */
.packages { padding: var(--section) 0; background: var(--sand); }
.packages .section-head { max-width: 48rem; }

.package-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
}

.package-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fffdfa; border: 1px solid var(--line-soft); border-radius: var(--r);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.package-card:hover {
  transform: translateY(-5px); box-shadow: var(--shadow-md);
  border-color: rgba(205, 83, 33, .38);
}
/* The two headline routes keep their prominence through the flag and a gold
   rule rather than a different size, so every row shares one baseline. */
.package-card--highlight { border-color: rgba(184, 145, 63, .5); box-shadow: var(--shadow-sm); }

.package-card__media { position: relative; overflow: hidden; aspect-ratio: 10 / 7; background: var(--sandstone); }
.package-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.package-card:hover .package-card__media img { transform: scale(1.06); }
.package-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12, 16, 26, .78) 0%, rgba(12, 16, 26, .1) 42%, transparent 70%);
}

.package-card__days {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: .5em .85em; border-radius: var(--r-sm);
  background: rgba(250, 246, 239, .95); color: var(--ink);
  font-size: .72rem; font-weight: 500; letter-spacing: .04em;
}
.package-card__days strong { font-weight: 600; }
.package-card__days span { color: var(--terracotta); }

.package-card__flag {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: .5em .8em; border-radius: var(--r-sm);
  background: var(--ember); color: #fff;
  font-size: .66rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}

.package-card__usp {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .74rem; font-weight: 600; letter-spacing: .05em; color: var(--ivory);
}
.package-card__usp svg { width: 17px; height: 17px; color: var(--gold-soft); }

/* Body: fixed rhythm top to bottom, with the two variable blocks given a
   minimum height so dividers and buttons line up right across a row. */
.package-card__body {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(20px, 1.7vw, 26px);
}
.package-card__title { font-size: clamp(1.18rem, 1.06rem + .4vw, 1.38rem); margin: 0 0 .65rem; }

.package-card__route {
  display: flex; flex-wrap: wrap; align-items: center; gap: .28rem .1rem;
  min-height: 2.9em; margin: 0 0 .8rem;
}
.package-card__route li {
  display: inline-flex; align-items: center;
  font-size: .78rem; font-weight: 500; letter-spacing: .02em; color: var(--royal-mid);
}
.package-card__route li + li::before {
  content: ""; width: 12px; height: 6px; margin: 0 .4em; flex: none;
  background: currentColor; opacity: .45;
  clip-path: polygon(0 42%, 62% 42%, 62% 0, 100% 50%, 62% 100%, 62% 58%, 0 58%);
}

.package-card__text {
  font-size: .91rem; line-height: 1.6; min-height: 4.8em; margin: 0 0 1.1rem;
}

.package-card__includes {
  display: grid; gap: .42rem; margin: auto 0 1.15rem;
  padding-top: 1rem; border-top: 1px solid var(--line-soft);
}
.package-card__includes li {
  display: flex; align-items: center; gap: .55em;
  font-size: .84rem; color: var(--ink-soft);
}
.package-card__includes svg { width: 15px; height: 15px; flex: none; color: var(--whatsapp); stroke-width: 2.2; }

/* Three actions: the quote button takes the full width, WhatsApp and Call
   share the row below it, so the primary CTA keeps its weight. */
.package-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.package-card__actions .btn { padding-inline: .8em; }
.package-card__actions .btn--accent { grid-column: 1 / -1; }
.package-card__actions .btn--accent svg { width: 1em; height: 1em; transition: transform .3s var(--ease); }
.package-card__actions .btn--accent:hover svg { transform: translateX(3px); }

.package-card--custom {
  grid-column: span 3; background: var(--royal-deep); border-color: var(--royal-deep);
  background-image: radial-gradient(700px 240px at 90% 0%, rgba(205, 83, 33, .35), transparent 70%);
}
.package-card--custom .package-card__body {
  align-items: center; text-align: center; padding: clamp(30px, 3vw, 46px);
}
.package-card--custom .eyebrow { justify-content: center; margin-bottom: .8rem; }
.package-card--custom .package-card__title { color: var(--ivory); margin-bottom: .8rem; }
.package-card--custom .package-card__text {
  color: var(--body-light); max-width: 46rem; min-height: 0; margin-bottom: 1.6rem;
}
.package-card--custom .package-card__actions {
  grid-template-columns: repeat(3, auto); justify-content: center;
}
.package-card--custom .package-card__actions .btn--accent { grid-column: auto; }
.package-card--custom .btn--call {
  --btn-bg: rgba(250, 246, 239, .08); --btn-fg: var(--ivory); --btn-bd: rgba(250, 246, 239, .4);
}
.package-card--custom .btn--call svg { color: var(--terracotta-lt); }
.package-card--custom .btn--call:hover svg { color: inherit; }
.package-card--custom .btn--call:hover { --btn-bg: var(--ivory); --btn-fg: var(--ink); --btn-bd: var(--ivory); }

.packages__foot {
  display: flex; align-items: flex-start; gap: .7em;
  max-width: 52rem; margin: clamp(24px, 2.6vw, 34px) auto 0;
  font-size: var(--fs-sm); color: var(--body); text-align: left;
}
.packages__foot svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--whatsapp); }

/* ==========================================================================
   29. HERO BADGE + QUOTE FORM
   ========================================================================== */
.hero-badge {
  display: inline-flex; align-items: center; gap: .6em;
  margin: 0 0 1.25rem; padding: .55em 1em;
  background: rgba(205, 83, 33, .92);
  color: #fff; border-radius: 100px;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .8);
}
.hero-badge svg { width: 18px; height: 18px; stroke-width: 1.7; }

.hero-enquiry__eyebrow { display: flex; align-items: center; gap: .45em; }
.hero-enquiry__eyebrow svg { width: 15px; height: 15px; }

.quote-form .field { margin-bottom: .8rem; }
.quote-form .field input, .quote-form .field select { padding: .92rem .9rem; font-size: 1rem; }

.form-foot { display: flex; align-items: center; justify-content: center; gap: .5em; }
.form-foot svg { width: 15px; height: 15px; color: var(--whatsapp); flex: none; }

/* ==========================================================================
   30. FINAL CTA — copy beside the quote form
   ========================================================================== */
.final-cta__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(32px, 5vw, 72px); align-items: center;
  max-width: var(--shell); text-align: left;
}
.final-cta__copy { text-align: left; }
.final-cta__copy .hero-badge { margin-bottom: 1.2rem; }
.final-cta__actions { justify-content: flex-start; }
.final-cta__panel {
  padding: clamp(22px, 2.4vw, 32px);
  background: rgba(250, 246, 239, .97); backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 145, 63, .32); border-radius: var(--r);
  box-shadow: var(--shadow-lg); color: var(--body);
}
.final-cta__panel .field label, .final-cta__panel .form-foot,
.final-cta__panel p, .final-cta__panel h2 { color: var(--body); }
.final-cta__panel .field label { color: var(--ink-soft); }
.final-cta__panel .form-success h2 { color: var(--ink); }
.final-cta__panel-title {
  margin: 0 0 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display); font-size: 1.3rem; color: var(--ink);
}

/* ==========================================================================
   31. RESPONSIVE — new components
   ========================================================================== */
@media (max-width: 1020px) {
  .how-steps { grid-template-columns: 1fr; }
  .how-step + .how-step::before { display: none; }

  .package-grid { grid-template-columns: repeat(2, 1fr); }
  .other-grid { grid-template-columns: repeat(2, 1fr); }
  .package-card--feature { grid-column: span 2; flex-direction: column; }
  .package-card--wide { grid-column: span 2; flex-direction: column; }
  .package-card--wide .package-card__media { flex: none; aspect-ratio: 16 / 8; }
  .package-card--feature .package-card__media { flex: none; aspect-ratio: 16 / 8; }
  .package-card--feature .package-card__includes { grid-template-columns: repeat(2, auto); }
  .package-card--wide { grid-column: span 2; flex-direction: row; }
.package-card--wide .package-card__media { flex: 0 0 42%; aspect-ratio: auto; }
.package-card--wide .package-card__body { padding: clamp(22px, 2.4vw, 34px); justify-content: center; }
.package-card--wide .package-card__title { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); }
.package-card--wide .package-card__includes { margin-top: 1rem; }

.package-card--custom { grid-column: span 2; }

  .final-cta__inner { grid-template-columns: minmax(0, 1fr); }
  .final-cta__panel { max-width: 520px; }
}

@media (max-width: 700px) {
  .package-grid, .other-grid { grid-template-columns: 1fr; }
  .package-card--feature, .package-card--wide { grid-column: span 2; flex-direction: row; }
.package-card--wide .package-card__media { flex: 0 0 42%; aspect-ratio: auto; }
.package-card--wide .package-card__body { padding: clamp(22px, 2.4vw, 34px); justify-content: center; }
.package-card--wide .package-card__title { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); }
.package-card--wide .package-card__includes { margin-top: 1rem; }

.package-card--custom { grid-column: span 1; }
  .package-card--custom .package-card__actions {
    grid-template-columns: 1fr 1fr; justify-content: stretch;
  }
  .package-card--custom .package-card__actions .btn--accent { grid-column: 1 / -1; }
  .package-card--feature .package-card__includes { grid-template-columns: 1fr; }
  .packages__foot { text-align: left; }
  .how__cta .btn { flex: 1 1 100%; }
  .usp-ribbon__set > span { padding: 0 18px; letter-spacing: .12em; }
  .hero-badge { font-size: .66rem; letter-spacing: .1em; padding: .5em .85em; }
  .final-cta__panel { padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .usp-ribbon__track { animation: none; }
  .usp-ribbon { display: flex; justify-content: center; }
  .usp-ribbon__set:last-child { display: none; }
}


/* ==========================================================================
   32. FORM: WHATSAPP ALTERNATIVE
   ========================================================================== */
.quote-form .btn--wa { font-weight: 600; }

/* ==========================================================================
   33. STICKY BAR — a floating bar rather than a full-width slab
   ========================================================================== */
.sticky-cta {
  position: fixed; inset: auto 10px calc(10px + env(safe-area-inset-bottom)); z-index: 90;
  display: none; align-items: stretch; gap: 6px;
  padding: 6px;
  background: rgba(250, 246, 239, .96); backdrop-filter: blur(12px);
  border: 1px solid rgba(23, 20, 15, .1); border-radius: 14px;
  box-shadow: 0 12px 30px -12px rgba(23, 20, 15, .45);
  transform: translateY(150%);
  transition: transform .4s var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
/* Two choices only, sharing the bar equally: chat now, or send the form. */
.sticky-cta__item {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: .45em;
  padding: 11px 8px; border-radius: 10px;
  color: #fff; white-space: nowrap;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
}
.sticky-cta__item svg { width: 17px; height: 17px; flex: none; }
.sticky-cta__item--wa {
  background: var(--whatsapp);
  box-shadow: 0 8px 18px -10px rgba(15, 106, 59, .9);
}
.sticky-cta__item--primary {
  background: var(--ember);
  box-shadow: 0 8px 18px -10px rgba(172, 63, 19, .9);
}
/* This block redefines .sticky-cta after the responsive section above, so the
   phone-only display has to be restated here. */
@media (max-width: 700px) { .sticky-cta { display: flex; } }

/* ==========================================================================
   34. BUTTON SCALE ON SMALL SCREENS
   ========================================================================== */
@media (max-width: 700px) {
  /* One compact scale everywhere: full-width blocks were reading as slabs. */
  .btn { padding: .8em 1.15em; font-size: .84rem; }
  .btn--lg { padding: .88em 1.25em; font-size: .87rem; }
  .btn--sm { padding: .72em .9em; font-size: .79rem; }

  .hero-actions { gap: 10px; }
  .hero-actions .btn { flex: 1 1 100%; }

  /* Card CTAs stay side by side — the labels are short enough and it halves
     the height of every card. */
  .package-card__actions { gap: 8px; }
  .package-card__actions .btn { padding-inline: .5em; font-size: .76rem; }
  .package-card__actions .btn--accent svg { display: none; }

  /* Two-up would clip these labels at 390px, so the wide CTAs stay stacked;
     only the short card labels sit side by side. */
  .how__cta { gap: 10px; }
  .how__cta .btn { flex: 1 1 100%; }

  .final-cta__actions { gap: 10px; }
  .final-cta__actions .btn { flex: 1 1 100%; }
  .hero-badge { white-space: nowrap; }

  .form-foot { font-size: .7rem; }
  .hero-enquiry__note { font-size: .7rem; }
}

@media (max-width: 380px) {
  .package-card__actions .btn { font-size: .73rem; padding-inline: .35em; }
  .sticky-cta { gap: 5px; padding: 5px; }
  /* Both halves stay equal — only the type and the arrow give ground. */
  .sticky-cta__item { font-size: .76rem; padding: 10px 4px; gap: .35em; }
  .sticky-cta__item svg { width: 16px; height: 16px; }
  .sticky-cta__item--primary svg { display: none; }
}