/* ==========================================================================
   Magical Rajasthan — editorial, light/dark, quiet 3D
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Type */
  --font-display: 'Lora', 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-caption: 13px;
  --text-body-sm: 15px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-heading: clamp(2rem, 4.4vw, 3.2rem);
  --text-heading-lg: clamp(2.4rem, 5.6vw, 4rem);
  --text-display: clamp(3rem, 7.4vw, 5.4rem);

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* Shape */
  --radius-button: 4px;
  --radius-card: 12px;
  --radius-elevated: 16px;
  --radius-hero: 24px;
  --radius-nav: 50px;

  /* Layout */
  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);
  --section-gap: clamp(72px, 11vw, 140px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);

  /* Z-stack */
  --z-content: 1;
  --z-toggle: 60;
  --z-nav: 80;
  --z-backdrop: 90;
  --z-modal: 100;
  --z-toast: 110;
}

/* ---------- Light theme (default, matches the editorial reference) ---------- */
:root,
[data-theme="light"] {
  --color-canvas: #fbf6ec;   /* warm cream, Rajasthan dust */
  --color-linen:  #f4ecd8;   /* alternating band */
  --color-paper:  #ffffff;   /* elevated cards */
  --color-ink:    #1a1410;   /* warm near-black */
  --color-carbon: #2c2620;
  --color-iron:   #4a423a;
  --color-steel:  #6b6056;
  --color-fog:    #b8ab97;
  --color-sage:   #e7dfcc;   /* hairline border */
  --color-mist:   #d4c9b1;

  --color-pill:   #1c1612;   /* nav pill fill */
  --color-pill-ink: #fbf6ec;

  /* The single chromatic accent: heritage madder (terracotta-red) */
  --color-accent: #b04432;
  --color-accent-deep: #8a3324;
  --color-accent-soft: #d6896f;

  /* Tiniest gold mark — only for the emblem and 1-2 micro-labels */
  --color-gold: #b58b3c;

  --shadow-nav: rgba(20, 14, 10, 0.18) 0 8px 24px -4px, rgba(20, 14, 10, 0.10) 0 2px 6px;
  --shadow-pill: rgba(0,0,0,0.15) 0 2px 6px 0;
  --shadow-hero-card:
    rgba(0, 0, 0, 0.10) 0 1px 1px,
    rgba(0, 0, 0, 0.08) 0 8px 24px -4px,
    rgba(255, 255, 255, 0.40) 0 0 0 1px inset;
  --shadow-card-rest:
    rgba(0, 0, 0, 0.04) 0 1px 1px,
    rgba(0, 0, 0, 0.06) 0 6px 14px -8px;
  --shadow-card-lift:
    rgba(0, 0, 0, 0.06) 0 2px 2px,
    rgba(0, 0, 0, 0.10) 0 28px 48px -16px,
    rgba(0, 0, 0, 0.06) 0 12px 24px -10px;
  --shadow-outline: rgb(231, 223, 204) 0 0 0 1px;
  --shadow-btn: rgba(0,0,0,0.05) 0 1px 8px 0;

  --frost-tint: rgba(255, 252, 244, 0.18);
  --frost-border: rgba(255, 252, 244, 0.35);
  --frost-blur: blur(18px) saturate(140%);

  color-scheme: light;
}

/* ---------- Dark theme (warm-ink mode for evening reading) ---------- */
[data-theme="dark"] {
  --color-canvas: #0e0b08;
  --color-linen:  #15110d;
  --color-paper:  #1a1611;
  --color-ink:    #f5ede0;
  --color-carbon: #ebe3d4;
  --color-iron:   #b8ad99;
  --color-steel:  #8c8174;
  --color-fog:    #5a5045;
  --color-sage:   #2b251e;
  --color-mist:   #3a3128;

  --color-pill:   #f4ecd8;
  --color-pill-ink: #1a1410;

  --color-accent: #d27563;
  --color-accent-deep: #b04432;
  --color-accent-soft: #874030;

  --color-gold: #d9b16a;

  --shadow-nav: rgba(0,0,0,0.5) 0 8px 24px -4px, rgba(0,0,0,0.4) 0 2px 6px;
  --shadow-pill: rgba(0,0,0,0.4) 0 2px 6px 0;
  --shadow-hero-card:
    rgba(0, 0, 0, 0.30) 0 1px 1px,
    rgba(0, 0, 0, 0.40) 0 12px 36px -8px,
    rgba(255, 252, 244, 0.06) 0 0 0 1px inset;
  --shadow-card-rest:
    rgba(0, 0, 0, 0.30) 0 1px 1px,
    rgba(0, 0, 0, 0.40) 0 6px 14px -8px;
  --shadow-card-lift:
    rgba(0, 0, 0, 0.40) 0 2px 2px,
    rgba(0, 0, 0, 0.55) 0 28px 48px -16px,
    rgba(0, 0, 0, 0.35) 0 12px 24px -10px;
  --shadow-outline: rgb(43, 37, 30) 0 0 0 1px;
  --shadow-btn: rgba(0,0,0,0.4) 0 1px 8px 0;

  --frost-tint: rgba(20, 14, 10, 0.22);
  --frost-border: rgba(245, 237, 224, 0.18);
  --frost-blur: blur(18px) saturate(120%);

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  letter-spacing: -0.01em;
  background: var(--color-canvas);
  color: var(--color-iron);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

.shell { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-iron);
}
.eyebrow .mark {
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--color-iron);
  vertical-align: middle;
  margin-right: 8px;
  transform: translateY(-2px);
}

.it { font-style: italic; font-weight: 400; }
.accent-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--color-ink); color: var(--color-canvas);
  padding: 12px 18px; font-weight: 600; font-size: 14px;
  border-radius: 0 0 4px 0;
}
.skip:focus { left: 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--text-body-sm); letter-spacing: -0.005em;
  padding: 10px 18px;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: transform 0.15s var(--ease-out),
              background 0.3s var(--ease-out),
              color 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-ink); color: var(--color-canvas);
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover { background: var(--color-carbon); transform: translateY(-1px); }

.btn-outline {
  background: transparent; color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-iron);
}
.btn-outline:hover { background: var(--color-ink); color: var(--color-canvas); }

.btn-ghost {
  background: var(--color-paper); color: var(--color-ink);
  box-shadow: var(--shadow-outline);
}
.btn-ghost:hover { background: var(--color-linen); }

.btn-arrow::after {
  content: '→'; display: inline-block;
  transition: transform 0.3s var(--ease-out);
}
.btn-arrow:hover::after { transform: translateX(3px); }

/* ==========================================================================
   Theme toggle — vertical pill, right edge
   ========================================================================== */
.theme-toggle {
  position: fixed; right: 18px; top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-toggle);
  display: flex; flex-direction: column;
  padding: 6px;
  border-radius: 999px;
  background: var(--color-paper);
  box-shadow: var(--shadow-pill), var(--shadow-outline);
  backdrop-filter: blur(8px);
}
.theme-toggle button {
  width: 36px; height: 36px;
  border-radius: 999px;
  display: grid; place-items: center;
  color: var(--color-iron);
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.theme-toggle button[aria-pressed="true"] {
  background: var(--color-ink); color: var(--color-canvas);
}
.theme-toggle button svg { width: 18px; height: 18px; }
.theme-toggle .tt-divider {
  height: 1px; margin: 2px 6px;
  background: var(--color-sage);
}

/* ==========================================================================
   Floating pill navigation
   ========================================================================== */
.nav-wrap {
  position: fixed; inset: 18px 0 auto 0;
  z-index: var(--z-nav);
  display: flex; justify-content: center;
  padding-inline: var(--gut);
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 16px;
  background: var(--color-pill);
  color: var(--color-pill-ink);
  border-radius: var(--radius-nav);
  box-shadow: var(--shadow-nav);
  font-size: var(--text-body-sm);
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 500;
  color: var(--color-pill-ink);
  padding-right: 16px;
  border-right: 1px solid color-mix(in oklab, var(--color-pill-ink) 18%, transparent);
}
.nav-brand .emblem { width: 22px; height: 22px; }
.nav-brand .wordmark {
  display: inline-flex; flex-direction: column;
  justify-content: center; gap: 2px;
  line-height: 1;
}
.nav-brand .wordmark b {
  font-family: var(--font-display);
  font-style: italic; font-weight: 500;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--color-pill-ink);
}
.nav-brand .wordmark small {
  font-family: var(--font-body);
  font-size: 8.5px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-pill-ink);
  opacity: 0.65;
}
/* Inline wordmark variant (Tweak) */
[data-brand="inline"] .nav-brand .wordmark { flex-direction: row; align-items: baseline; gap: 8px; }
[data-brand="inline"] .nav-brand .wordmark small { font-size: 9px; opacity: 0.55; }

.nav-links { display: flex; gap: 2px; padding: 0 6px; }
.nav-links a {
  padding: 8px 12px; border-radius: 999px;
  color: var(--color-pill-ink);
  opacity: 0.78;
  transition: opacity 0.2s, background 0.2s;
}
.nav-links a:hover { opacity: 1; background: color-mix(in oklab, var(--color-pill-ink) 8%, transparent); }
.nav-links a.active { opacity: 1; background: color-mix(in oklab, var(--color-pill-ink) 12%, transparent); }

.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--color-pill-ink);
  color: var(--color-pill);
  border-radius: var(--radius-button);
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.2s var(--ease-out);
}
.nav-cta:hover { transform: translateY(-1px); }

.nav-meta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px 0 8px;
  color: var(--color-pill-ink);
  opacity: 0.6;
  font-size: 13px;
  border-left: 1px solid color-mix(in oklab, var(--color-pill-ink) 18%, transparent);
}
.nav-meta svg { width: 12px; height: 12px; }

.burger {
  display: none;
  width: 38px; height: 38px;
  border-radius: 999px;
  color: var(--color-pill-ink);
}

/* mobile menu */
.mm {
  position: fixed; inset: 0; z-index: 95;
  background: var(--color-canvas);
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease-io);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--gut);
  visibility: hidden;
}
.mm.open { transform: translateY(0); visibility: visible; }
.mm a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3rem);
  color: var(--color-ink);
  padding: 0.18em 0;
  border-bottom: 1px solid var(--color-sage);
}
.mm .btn { margin-top: 28px; align-self: flex-start; }

/* ==========================================================================
   Hero — full-bleed painted scene + frosted card (light editorial)
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  perspective: 1400px;
}

/* layered painted scene — works without any image */
.hero-scene {
  position: absolute; inset: 0; z-index: 0;
  background: var(--color-canvas);
}
.hero-layer {
  position: absolute; inset: 0;
  will-change: transform;
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
}
/* sky / sun glow */
.hero-layer.sky {
  background:
    radial-gradient(ellipse 90% 60% at 50% 22%, #f3c98a 0%, #e9a76a 22%, #c66b4a 45%, #6b2536 68%, #2b1322 100%);
}
[data-theme="dark"] .hero-layer.sky {
  background:
    radial-gradient(ellipse 90% 60% at 50% 22%, #d99359 0%, #a14b3a 25%, #4a1c2a 50%, #1a0a13 75%, #060206 100%);
}
.hero-layer.sky::after {
  /* stars/dust */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,250,235,0.7), transparent 60%),
    radial-gradient(1px 1px at 28% 9%, rgba(255,250,235,0.5), transparent 60%),
    radial-gradient(1px 1px at 62% 14%, rgba(255,250,235,0.8), transparent 60%),
    radial-gradient(1px 1px at 88% 22%, rgba(255,250,235,0.4), transparent 60%);
  mix-blend-mode: screen;
}
/* user-supplied photo layered on top of the painted scene */
.hero-photo {
  position: absolute; inset: 0;
  background: center/cover no-repeat;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}
.hero-photo.loaded { opacity: 1; }

/* distant fort silhouette */
.hero-layer.far {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600' preserveAspectRatio='none'><path fill='%23000' fill-opacity='0.32' d='M0 600 V440 L60 430 L70 410 L80 430 L130 432 V410 L150 410 V395 L165 395 V410 L190 412 V430 L240 430 L260 415 L280 430 L340 432 V412 L355 412 V395 L370 395 V412 L390 414 V430 L460 432 V420 L478 420 V404 L495 404 V420 L520 422 V432 L600 434 V412 L620 412 V395 L640 395 V412 L668 414 V434 L740 436 V418 L760 418 V404 L780 404 V418 L810 420 V436 L900 438 V420 L920 420 V404 L942 404 V420 L968 422 V438 L1060 440 V422 L1080 422 V406 L1100 406 V422 L1130 424 V440 L1220 442 V424 L1240 424 V408 L1260 408 V424 L1290 426 V442 L1380 444 V424 L1400 424 V408 L1420 408 V424 L1450 426 V444 L1540 446 V428 L1560 428 V412 L1580 412 V428 L1600 430 V600 Z'/></svg>") center bottom/cover no-repeat;
}
/* mid jharokha silhouette */
.hero-layer.mid {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600' preserveAspectRatio='none'><path fill='%23000' fill-opacity='0.55' d='M0 600 V480 Q40 470 60 470 L80 460 L100 470 L160 470 Q180 470 180 450 L185 450 Q185 420 220 420 Q255 420 255 450 L260 450 Q260 470 280 470 L380 470 L390 462 L400 470 L450 472 Q470 472 470 452 L475 452 Q475 422 510 422 Q545 422 545 452 L550 452 Q550 472 570 472 L660 474 L672 466 L684 474 L750 476 Q770 476 770 456 L775 456 Q775 426 810 426 Q845 426 845 456 L850 456 Q850 476 870 476 L960 478 L970 470 L980 478 L1060 480 Q1080 480 1080 460 L1085 460 Q1085 430 1120 430 Q1155 430 1155 460 L1160 460 Q1160 480 1180 480 L1280 482 L1292 474 L1304 482 L1380 484 Q1400 484 1400 464 L1405 464 Q1405 434 1440 434 Q1475 434 1475 464 L1480 464 Q1480 484 1500 484 L1580 486 L1590 478 L1600 486 V600 Z'/></svg>") center bottom/cover no-repeat;
}
/* near foreground */
.hero-layer.near {
  background:
    linear-gradient(to top, rgba(20,14,10,0.92) 0%, rgba(20,14,10,0.5) 35%, transparent 70%);
}

/* the editorial hero text card — frosted */
.hero-stage {
  position: relative; z-index: 2;
  width: 100%;
  padding-bottom: clamp(56px, 10vh, 130px);
  padding-top: 160px;
}
.hero-card {
  max-width: 620px;
  padding: 28px 32px 30px;
  border-radius: var(--radius-hero);
  background: var(--frost-tint);
  backdrop-filter: var(--frost-blur);
  -webkit-backdrop-filter: var(--frost-blur);
  box-shadow: var(--shadow-hero-card);
  color: #fbf6ec;
  transform-style: preserve-3d;
}
.hero-card .eyebrow {
  color: rgba(251, 246, 236, 0.78);
}
.hero-card .eyebrow .mark { background: rgba(251, 246, 236, 0.7); }
.hero-card h1 {
  color: #fbf6ec;
  font-size: var(--text-display);
  margin: 18px 0 14px;
  font-weight: 400;
}
.hero-card h1 .it { color: #f3c98a; font-weight: 400; }
.hero-card p {
  color: rgba(251, 246, 236, 0.86);
  max-width: 50ch;
  font-size: var(--text-body);
}
.hero-card .hero-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  color: #fbf6ec;
  font-weight: 500;
  font-size: var(--text-body-sm);
  border-bottom: 1px solid rgba(251,246,236,0.6);
  padding-bottom: 3px;
  transition: gap 0.2s var(--ease-out);
}
.hero-card .hero-link:hover { gap: 12px; }

.hero-acts {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 26px;
}
.hero-acts .btn-primary {
  background: #fbf6ec; color: #1a1410;
}
.hero-acts .btn-primary:hover { background: #fff; }
.hero-acts .btn-outline {
  color: #fbf6ec; box-shadow: inset 0 0 0 1px rgba(251,246,236,0.5);
}
.hero-acts .btn-outline:hover {
  background: rgba(251,246,236,0.12);
  color: #fbf6ec;
}

.scroll-hint {
  position: absolute; bottom: 24px; left: 50%;
  transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(251,246,236,0.7);
}
.scroll-hint .ln {
  width: 1px; height: 32px;
  background: linear-gradient(rgba(251,246,236,0.7), transparent);
  animation: drip 2.4s var(--ease-io) infinite;
}
@keyframes drip {
  0% { transform: scaleY(0); transform-origin: top; }
  40% { transform: scaleY(1); transform-origin: top; }
  60% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ==========================================================================
   Offers strip — quiet, editorial
   ========================================================================== */
.offers {
  background: var(--color-paper);
  border-block: 1px solid var(--color-sage);
  overflow: hidden;
  position: relative;
}
.marquee {
  display: flex; gap: 56px;
  padding: 14px 0;
  white-space: nowrap; width: max-content;
  animation: slide 42s linear infinite;
}
.offers:hover .marquee { animation-play-state: paused; }
.marquee .it {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--color-steel);
  letter-spacing: -0.005em;
}
.marquee .it b {
  font-family: var(--font-display); font-style: italic;
  font-weight: 400; color: var(--color-ink); font-size: 16px;
}
.marquee .dot {
  width: 4px; height: 4px; border-radius: 999px;
  background: var(--color-accent); flex: none;
}
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; flex-wrap: wrap; white-space: normal; width: auto; justify-content: center; }
  .marquee .dup { display: none; }
}

/* ==========================================================================
   Section frame
   ========================================================================== */
section.band {
  padding-block: var(--section-gap);
  position: relative;
}
.band.alt { background: var(--color-linen); }
.band.paper { background: var(--color-paper); }

.sec-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 72px); }
.sec-head .eyebrow { margin-bottom: 18px; display: inline-block; }
.sec-head h2 {
  font-size: var(--text-heading-lg);
  margin-bottom: 14px;
}
.sec-head p {
  color: var(--color-steel);
  font-size: var(--text-subheading);
  max-width: 56ch;
}

/* ==========================================================================
   Destinations — 3-up rows, 3D tilt on hover
   ========================================================================== */
.dest-wrap { perspective: 1600px; }
.dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}
.dest {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-elevated);
  overflow: hidden;
  background: var(--color-linen);
  box-shadow: var(--shadow-card-rest), var(--shadow-outline);
  transform-style: preserve-3d;
  transition: box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  will-change: transform;
}
.dest:hover { box-shadow: var(--shadow-card-lift), var(--shadow-outline); }

/* photo + signature gradient placeholder (one per city) */
.dest .photo {
  position: absolute; inset: 0;
  background-image: var(--placeholder, none);
  background-size: cover; background-position: center;
}
.dest .photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out), transform 1s var(--ease-out);
}
.dest .photo img.loaded { opacity: 1; }
.dest:hover .photo img.loaded { transform: scale(1.05); }
.dest .grad {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,10,6,0.85) 0%, rgba(16,10,6,0.15) 50%, rgba(16,10,6,0.35) 100%);
}
.dest .cap {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px;
  color: #fbf6ec;
  transform: translateZ(20px);
}
.dest .meta {
  font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(251,246,236,0.85);
  font-weight: 600;
}
.dest .place {
  font-family: var(--font-display);
  font-size: 32px; line-height: 1;
  margin: 6px 0 0;
  color: #fbf6ec;
}
.dest .desc {
  font-size: 14px; color: rgba(251,246,236,0.82);
  margin-top: 10px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.5s var(--ease-out), opacity 0.4s, margin-top 0.4s;
}
.dest:hover .desc { max-height: 90px; opacity: 1; }

/* city signature gradients (used until images load) */
.dest.jaipur     { --placeholder: linear-gradient(160deg, #f4a78e 0%, #d65a4e 35%, #7d2a3c 75%, #2a0e1a 100%); }
.dest.udaipur    { --placeholder: linear-gradient(165deg, #cfd8e0 0%, #8aa2b8 30%, #485a72 65%, #1a2436 100%); }
.dest.jodhpur    { --placeholder: linear-gradient(170deg, #87a4c8 0%, #436596 40%, #1c2f56 75%, #0a1226 100%); }
.dest.jaisalmer  { --placeholder: linear-gradient(155deg, #f0c97a 0%, #d6993a 35%, #8a5520 70%, #2a1808 100%); }
.dest.pushkar    { --placeholder: linear-gradient(160deg, #e2d2b8 0%, #b89570 35%, #6b4a30 70%, #251608 100%); }
.dest.ranthambore{ --placeholder: linear-gradient(165deg, #a9bf86 0%, #5f7a48 40%, #2c3a22 75%, #0e1408 100%); }

/* tiny silhouette overlay to feel painterly */
.dest .photo::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'><path fill='%23000' fill-opacity='0.35' d='M0 200 V160 Q20 150 30 150 L40 142 L50 150 L80 152 Q90 152 90 142 L92 142 Q92 128 110 128 Q128 128 128 142 L130 142 Q130 152 140 152 L180 154 L185 148 L190 154 L220 156 Q230 156 230 146 L232 146 Q232 132 250 132 Q268 132 268 146 L270 146 Q270 156 280 156 L320 158 L326 152 L332 158 L370 160 Q380 160 380 150 L382 150 Q382 138 400 138 V200 Z'/></svg>") bottom/100% auto no-repeat;
  z-index: 1;
  opacity: 0.7;
}

/* ==========================================================================
   Packages — paper cards with editorial detail, stacked-paper depth
   ========================================================================== */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
.pkg {
  position: relative;
  background: var(--color-paper);
  border-radius: var(--radius-elevated);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card-rest), var(--shadow-outline);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  transform: translateZ(0);
}
.pkg::before {
  /* the 'paper stack' depth — a second sheet peeking behind */
  content: '';
  position: absolute; inset: 4px 4px -4px 4px;
  background: var(--color-paper);
  border-radius: var(--radius-elevated);
  box-shadow: var(--shadow-outline);
  z-index: -1;
  opacity: 0; transition: opacity 0.4s var(--ease-out), inset 0.4s var(--ease-out);
}
.pkg:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-lift), var(--shadow-outline);
}
.pkg:hover::before {
  inset: 6px 6px -10px 6px; opacity: 1;
}
.pkg .photo {
  aspect-ratio: 16/10;
  position: relative;
  background: var(--color-linen);
  background-image: var(--placeholder, linear-gradient(165deg, #e9b075, #8a3d24));
  background-size: cover; background-position: center;
  overflow: hidden;
}
.pkg .photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.6s, transform 0.9s var(--ease-out);
}
.pkg .photo img.loaded { opacity: 1; }
.pkg:hover .photo img.loaded { transform: scale(1.04); }

.pkg.royal    { --placeholder: linear-gradient(155deg, #c79b5d 0%, #8a5a32 40%, #3a2014 80%, #150906 100%); }
.pkg.pinkcity { --placeholder: linear-gradient(160deg, #efa090 0%, #c45a55 40%, #6a2235 78%, #1c0712 100%); }
.pkg.luxe     { --placeholder: linear-gradient(160deg, #d1c4a8 0%, #7a8a6a 40%, #2c3d3a 78%, #0a1212 100%); }

.pkg .tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: #1a1410;
  background: #fbf6ec;
  padding: 5px 10px;
  border-radius: 2px;
  box-shadow: var(--shadow-btn);
}
.pkg .info {
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; flex: 1;
}
.pkg .route {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-steel); font-weight: 600;
}
.pkg .info h3 {
  font-size: 26px; line-height: 1.1;
  margin: 10px 0 8px;
  color: var(--color-ink);
}
.pkg .info p {
  font-size: 15px; color: var(--color-steel);
  line-height: 1.5;
}
.pkg .row2 {
  display: flex; align-items: baseline; gap: 14px;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--color-sage);
  font-size: 13px; color: var(--color-steel);
}
.pkg .price { margin-left: auto; text-align: right; }
.pkg .price b {
  display: block;
  font-family: var(--font-display);
  font-size: 22px; color: var(--color-ink);
  line-height: 1;
}
.pkg .price small { font-size: 11px; color: var(--color-fog); }
.pkg .info .btn { margin-top: 18px; width: 100%; justify-content: center; }

.below-grid {
  text-align: center; margin-top: 44px;
}

/* ==========================================================================
   Experience — split editorial
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.split .copy h2 {
  font-size: var(--text-heading);
  margin: 14px 0 0;
}
.split .reasons {
  list-style: none;
  display: grid; gap: 22px;
  margin-top: 32px;
}
.split .reasons li {
  display: flex; gap: 16px; align-items: flex-start;
}
.split .reasons .ico {
  width: 36px; height: 36px; flex: none;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--color-paper);
  color: var(--color-accent);
  box-shadow: var(--shadow-outline);
}
.split .reasons h4 {
  font-family: var(--font-body);
  font-size: 16px; font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.split .reasons p {
  font-size: 15px; color: var(--color-steel); margin: 0;
}
.split .frame {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-elevated);
  overflow: hidden;
  background: linear-gradient(165deg, #ffd698 0%, #d6724a 30%, #6b2535 65%, #1c0716 100%);
  box-shadow: var(--shadow-card-lift), var(--shadow-outline);
}
.split .frame::after {
  /* candle / lantern motes */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(3px 3px at 24% 62%, rgba(255,210,140,0.9), transparent 60%),
    radial-gradient(2px 2px at 38% 70%, rgba(255,210,140,0.7), transparent 60%),
    radial-gradient(4px 4px at 56% 58%, rgba(255,220,160,0.9), transparent 65%),
    radial-gradient(2px 2px at 72% 64%, rgba(255,210,140,0.7), transparent 60%),
    radial-gradient(3px 3px at 84% 60%, rgba(255,210,140,0.85), transparent 60%);
}
.split .frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity 0.6s var(--ease-out);
}
.split .frame img.loaded { opacity: 1; }

/* ==========================================================================
   Testimonials — quiet, paper-like
   ========================================================================== */
.tst-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 16px;
}
.tst {
  padding: 28px;
  background: var(--color-paper);
  border-radius: var(--radius-elevated);
  box-shadow: var(--shadow-card-rest), var(--shadow-outline);
}
.tst .stars {
  color: var(--color-accent);
  letter-spacing: 3px; font-size: 14px;
}
.tst blockquote {
  font-family: var(--font-display);
  font-size: 18px; line-height: 1.45;
  color: var(--color-ink);
  margin: 14px 0 18px;
  font-weight: 400;
  font-style: italic;
}
.tst .who { font-size: 13px; color: var(--color-steel); }
.tst .who b {
  display: block;
  font-family: var(--font-body);
  font-weight: 600; color: var(--color-ink);
  font-style: normal;
  margin-bottom: 2px;
}

/* ==========================================================================
   Journal — editorial three-up
   ========================================================================== */
.blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.post {
  display: flex; flex-direction: column;
}
.post .photo {
  aspect-ratio: 16/10;
  border-radius: var(--radius-elevated);
  overflow: hidden;
  background: var(--color-linen);
  background-image: var(--placeholder, none);
  background-size: cover; background-position: center;
  position: relative;
  box-shadow: var(--shadow-card-rest), var(--shadow-outline);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.post:hover .photo { transform: translateY(-3px); box-shadow: var(--shadow-card-lift), var(--shadow-outline); }
.post .photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.6s, transform 0.9s var(--ease-out);
}
.post .photo img.loaded { opacity: 1; }
.post:hover .photo img.loaded { transform: scale(1.05); }

.post.one { --placeholder: linear-gradient(160deg, #f3c98a 0%, #c66b4a 40%, #6b2535 78%, #1c0716 100%); }
.post.two { --placeholder: linear-gradient(165deg, #d8b88e 0%, #95643e 40%, #432a1a 80%, #150906 100%); }
.post.three { --placeholder: linear-gradient(160deg, #c44832 0%, #7a2a22 40%, #2c1010 80%, #100404 100%); }

.post .k {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-accent); font-weight: 600;
  margin-top: 18px;
}
.post h3 {
  font-size: 22px; margin: 8px 0 6px;
  color: var(--color-ink);
}
.post p { font-size: 15px; color: var(--color-steel); }
.post .date {
  font-size: 12px; color: var(--color-fog);
  margin-top: 14px;
}

/* ==========================================================================
   Newsletter — frame card
   ========================================================================== */
.news {
  border-radius: var(--radius-elevated);
  padding: clamp(40px, 6vw, 76px);
  text-align: center;
  position: relative; overflow: hidden;
  background: var(--color-paper);
  box-shadow: var(--shadow-card-rest), var(--shadow-outline);
}
.news::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 130% at 80% -10%, color-mix(in oklab, var(--color-accent) 14%, transparent), transparent 55%);
  pointer-events: none;
}
.news .eyebrow { display: inline-block; margin-bottom: 12px; }
.news h2 {
  font-size: var(--text-heading);
  margin-bottom: 14px;
}
.news p {
  color: var(--color-steel);
  max-width: 50ch; margin: 0 auto 32px;
  font-size: var(--text-subheading);
}
.news form {
  display: flex; gap: 10px; max-width: 520px; margin: 0 auto;
  flex-wrap: wrap; justify-content: center;
}
.news input {
  flex: 1; min-width: 220px;
  padding: 12px 16px;
  border-radius: var(--radius-button);
  border: 1px solid var(--color-sage);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 15px;
}
.news input::placeholder { color: var(--color-fog); }
.news .ok {
  margin-top: 18px;
  color: var(--color-accent);
  font-weight: 500;
  min-height: 1.2em;
  font-size: 14px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  background: var(--color-paper);
  border-top: 1px solid var(--color-sage);
  padding-top: clamp(56px, 8vw, 96px);
  color: var(--color-steel);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 40px;
}
.foot-brand b {
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: 22px; color: var(--color-ink);
  display: block; line-height: 1;
}
.foot-brand .sub {
  font-size: 10px; letter-spacing: 0.4em;
  text-transform: uppercase; font-weight: 600;
  color: var(--color-iron); display: block;
  margin-top: 6px;
}
.foot-brand p {
  color: var(--color-steel); font-size: 14px;
  margin: 16px 0 22px; max-width: 34ch;
}
.socials {
  display: flex; gap: 10px;
}
.socials a {
  width: 38px; height: 38px;
  border-radius: 999px;
  display: grid; place-items: center;
  box-shadow: var(--shadow-outline);
  color: var(--color-iron);
  transition: background 0.2s, color 0.2s, transform 0.2s var(--ease-out);
}
.socials a:hover {
  background: var(--color-ink); color: var(--color-canvas);
  transform: translateY(-3px);
}
.socials svg { width: 16px; height: 16px; }
.foot-col h5 {
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-iron);
  margin-bottom: 18px; font-weight: 600;
  font-family: var(--font-body);
}
.foot-col a {
  display: block; padding: 5px 0;
  color: var(--color-steel); font-size: 14px;
  transition: color 0.2s, padding-left 0.2s var(--ease-out);
}
.foot-col a:hover { color: var(--color-ink); padding-left: 4px; }
.foot-bottom {
  border-top: 1px solid var(--color-sage);
  margin-top: clamp(40px, 6vw, 72px);
  padding: 22px 0;
  display: flex; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;
  font-size: 13px; color: var(--color-fog);
}

/* ==========================================================================
   Modal
   ========================================================================== */
.backdrop {
  position: fixed; inset: 0;
  z-index: var(--z-backdrop);
  background: color-mix(in oklab, var(--color-ink) 60%, transparent);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.backdrop.open { opacity: 1; visibility: visible; }
.modal {
  position: fixed; z-index: var(--z-modal);
  top: 50%; left: 50%;
  width: min(540px, calc(100vw - 32px));
  max-height: 90vh; overflow: auto;
  transform: translate(-50%, -46%) scale(0.97);
  opacity: 0; visibility: hidden;
  background: var(--color-paper);
  border-radius: var(--radius-elevated);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--shadow-card-lift);
  transition: transform 0.35s var(--ease-out), opacity 0.3s, visibility 0.3s;
}
.modal.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1; visibility: visible;
}
.modal .x {
  position: absolute; top: 14px; right: 16px;
  width: 36px; height: 36px;
  font-size: 22px; line-height: 1;
  color: var(--color-iron);
  border-radius: 999px;
  transition: background 0.2s;
}
.modal .x:hover { background: var(--color-linen); }
.modal h3 { font-size: 28px; margin: 8px 0 4px; }
.modal p.h {
  color: var(--color-steel);
  font-size: 14px; margin-bottom: 22px;
}
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-iron);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--color-sage);
  border-radius: var(--radius-button);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body); font-size: 14px;
}
.field textarea { resize: vertical; min-height: 80px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.submit-row {
  display: flex; gap: 14px; flex-wrap: wrap;
  align-items: center; margin-top: 8px;
}
.wa {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--color-accent);
  font-weight: 500;
}
.thanks { text-align: center; padding: 20px 0; }
.thanks .em { width: 56px; height: 56px; margin: 0 auto 18px; color: var(--color-accent); }

/* ==========================================================================
   Reveal on scroll — content is visible by default. The entrance is just a
   gentle slide-up; no opacity animation, so if a render environment freezes
   animations the content still reads.
   ========================================================================== */
@keyframes mr-reveal {
  from { transform: translateY(18px); }
  to   { transform: none; }
}
.js .reveal.in {
  animation: mr-reveal 0.7s var(--ease-out) both;
}
.js .reveal.in[data-d="1"] { animation-delay: 0.06s; }
.js .reveal.in[data-d="2"] { animation-delay: 0.14s; }
.js .reveal.in[data-d="3"] { animation-delay: 0.22s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal.in { animation: none; }
}

/* ==========================================================================
   Toast
   ========================================================================== */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translate(-50%, 16px);
  background: var(--color-ink); color: var(--color-canvas);
  padding: 12px 22px;
  border-radius: var(--radius-button);
  font-size: 14px;
  z-index: var(--z-toast);
  opacity: 0; pointer-events: none;
  transition: all 0.3s var(--ease-out);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .dest-grid { grid-template-columns: repeat(2, 1fr); }
  .pkg-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .tst-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split .frame { aspect-ratio: 16/11; order: -1; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
  .nav-meta { display: none; }
}
@media (max-width: 920px) {
  .nav-links { display: none; }
}
@media (max-width: 760px) {
  .nav-cta { display: none; }
  .burger { display: inline-grid; place-items: center; }
  .theme-toggle { right: 12px; }
}
@media (max-width: 600px) {
  .dest-grid { grid-template-columns: 1fr; }
  .pkg-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .tst-grid { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
}