/* ═══════════════════════════════════════════════════════════════════
   The Heritage — theheritagehospitality.com
   Shared site styles.

   PALETTE — the maroon + gold house identity as it is printed today:
   the Oct-26 → Mar-27 rate cards (B2B + Kutch Packages), the Kutch
   Magazine 2026 page and the CRM's booking voucher all share one build —
   maroon #6B0F1A, gold #BEA75B, cream #FBF8F2. (The site's first maroon,
   #7B111F / #C9B062, was sampled from the earlier BLTM vinyls; this is
   the same identity, re-matched to the current print.)

   NOTE: an older forest-green/brass palette exists in earlier material.
   It is a rejected direction — do not reintroduce it here.

   Signature devices carried over from print:
     · gold double-rule frame with corner diamonds
     · Kutchi lattice (fine diagonal crosshatch on maroon)
     · arched photo window with gold keyline + keystone diamond
     · gold hairline rules under section headings

   Fonts: Cormorant Garamond (display serif) + Jost (body sans).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Maroon — #6B0F1A is the print build (≈ C30 M100 Y88 K38) */
  --maroon-deep: #4E0A12;
  --maroon: #6B0F1A;
  --maroon-soft: #821A27;
  --maroon-wash: #F2E4E3;

  /* Gold — #BEA75B, with the rate cards' highlight and shadow golds */
  --gold: #BEA75B;
  --gold-bright: #D9C98A;
  --gold-mid: #A19551;
  --gold-ink: #766838;   /* accessible gold-toned text on cream (5.2:1) */

  /* Cream / neutrals — the rate cards' cream, warm ink and mute */
  --cream: #FBF8F2;
  --cream-warm: #F3E9DA;
  --cream-dim: #ECE1CF;
  --ink: #2B1A1C;
  --ink-soft: #7A6A6B;
  --ink-faint: #9C8E8E;

  /* Lines */
  --line: rgba(107, 15, 26, 0.14);
  --line-gold: rgba(190, 167, 91, 0.45);
  --line-gold-soft: rgba(190, 167, 91, 0.22);

  /* Kutchi lattice — fine diagonal crosshatch for maroon panels */
  --lattice:
    repeating-linear-gradient(45deg, transparent 0 21px, rgba(190,167,91,0.055) 21px 22px),
    repeating-linear-gradient(-45deg, transparent 0 21px, rgba(190,167,91,0.055) 21px 22px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--cream);
  font-family: Jost, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-ink); text-decoration: none; transition: color 0.25s; }
a:hover { color: var(--maroon); }
input, select, button, textarea { font-family: Jost, sans-serif; }
img { max-width: 100%; }

h1, h2, h3, .serif {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}

@keyframes heroIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Scroll-reveal (js/site.js drives this).
   Gated on html.js so the content is always visible without JavaScript —
   a reveal that never fires must never leave the page blank. */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.85s ease, transform 0.85s ease; }
.js [data-reveal].shown { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Shared devices ─────────────────────────────────────────────── */

/* Maroon panel with Kutchi lattice */
.maroon-panel { background-color: var(--maroon); background-image: var(--lattice); color: var(--cream); }
.maroon-panel-deep { background-color: var(--maroon-deep); background-image: var(--lattice); color: var(--cream); }

/* Gold double-rule frame with corner diamonds */
.gold-frame { position: relative; }
.gold-frame::before,
.gold-frame::after {
  content: ""; position: absolute; pointer-events: none; border: 1px solid var(--line-gold);
}
.gold-frame::before { inset: 18px; }
.gold-frame::after { inset: 24px; border-color: var(--line-gold-soft); }

.diamond {
  width: 7px; height: 7px; background: var(--gold);
  transform: rotate(45deg); display: inline-block;
}

/* Section heading block */
.kicker { font-size: 11.5px; letter-spacing: 0.3em; color: var(--gold-ink); font-weight: 500; text-transform: uppercase; }
.maroon-panel .kicker, .maroon-panel-deep .kicker, .on-maroon .kicker,
.page-hero .kicker, .hotels-hero .kicker, .band .kicker { color: var(--gold); }

.sec-head { text-align: center; margin-bottom: 52px; }
.sec-head h2 { font-size: clamp(32px, 3.6vw, 48px); color: var(--maroon); margin: 10px 0 0; }
.maroon-panel .sec-head h2, .maroon-panel-deep .sec-head h2 { color: var(--cream); }
.sec-head p { color: var(--ink-soft); font-weight: 300; max-width: 540px; margin: 14px auto 0; line-height: 1.75; }
.maroon-panel .sec-head p, .maroon-panel-deep .sec-head p { color: rgba(251, 248, 242, 0.78); }

/* Gold hairline rule with centre diamond */
.rule-diamond { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px auto 0; max-width: 260px; }
.rule-diamond::before, .rule-diamond::after {
  content: ""; flex: 1; height: 1px; background: var(--line-gold);
}

/* Buttons */
.btn-gold {
  display: inline-block; background: var(--gold); color: var(--maroon-deep) !important;
  padding: 13px 32px; font-size: 12px; letter-spacing: 0.22em; font-weight: 600;
  border: none; cursor: pointer; transition: background 0.25s;
}
.btn-gold:hover { background: var(--gold-bright); color: var(--maroon-deep) !important; }
.btn-gold:disabled { background: #9c8d6a; cursor: not-allowed; }

.btn-outline {
  display: inline-block; border: 1px solid var(--gold); color: var(--gold-ink) !important;
  padding: 12px 30px; font-size: 11.5px; letter-spacing: 0.22em; transition: all 0.25s; background: none; cursor: pointer;
}
.btn-outline:hover { background: var(--gold); color: var(--maroon-deep) !important; }
.on-maroon .btn-outline { color: var(--gold) !important; }
.on-maroon .btn-outline:hover { color: var(--maroon-deep) !important; }

.btn-maroon {
  display: inline-block; background: var(--maroon); color: var(--cream) !important;
  padding: 14px 36px; font-size: 12px; letter-spacing: 0.22em; border: none; cursor: pointer; transition: background 0.25s;
}
.btn-maroon:hover { background: var(--maroon-soft); }

/* ── Header ─────────────────────────────────────────────────────
   Fixed and transparent over the hero, so the photography starts at the
   very top of the page. js/site.js adds .scrolled past 40px, which fades
   the maroon in. A soft scrim keeps the gold legible over pale photos. */

.site-header-wrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
}
.site-header-wrap::before {
  /* Extends past the header so it fades out gradually instead of ending
     in a hard line, and stays dark enough at nav height to carry the
     gold and cream over a pale photograph. */
  content: ""; position: absolute; inset: 0 0 -46px 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(38, 5, 10, 0.80) 0%,
    rgba(38, 5, 10, 0.62) 45%,
    rgba(38, 5, 10, 0.28) 72%,
    rgba(38, 5, 10, 0) 100%);
  opacity: 1; transition: opacity 0.35s ease;
}
.site-header-wrap.scrolled::before { opacity: 0; }

.site-header {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; column-gap: 20px; row-gap: 2px;
  padding: 10px 3vw; min-height: 88px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.site-header-wrap.scrolled .site-header {
  background: rgba(78, 10, 18, 0.97);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line-gold-soft);
}

.site-header .brand { display: flex; align-items: center; gap: 13px; }
.site-header .brand img.tree { height: 48px; width: 48px; object-fit: contain; }
.site-header .brand img.wordmark { height: 30px; object-fit: contain; }
.site-header nav {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
  row-gap: 4px; column-gap: clamp(14px, 1.9vw, 28px); white-space: nowrap;
}
.site-header nav a {
  color: var(--cream); font-size: 14px; letter-spacing: 0.15em;
  text-shadow: 0 1px 10px rgba(38, 5, 10, 0.85), 0 1px 3px rgba(38, 5, 10, 0.7);
}
.site-header-wrap.scrolled .site-header nav a { text-shadow: none; }
.site-header nav a:hover { color: var(--gold-bright); }
.site-header nav a.active { color: var(--gold); }
.btn-book {
  background: var(--gold); color: var(--maroon-deep) !important;
  padding: 12px 27px; font-size: 13.5px; letter-spacing: 0.18em; font-weight: 600;
  white-space: nowrap; transition: background 0.25s; border: none; cursor: pointer;
}
.btn-book:hover { background: var(--gold-bright); color: var(--maroon-deep) !important; }

/* ── Homepage: photo mosaic hero ────────────────────────────────
   Full-bleed grid of properties, photographs untinted — maroon appears
   only as the hairline gaps and in the header above. The printed panels
   never wash a photo in maroon; neither does this. */

/* The hero area is one viewport tall: the mosaic takes whatever is left
   after the search band and the figures strip, so "21 properties / 2000+
   rooms / est. 1992" always lands on the fold rather than half-cut. */
.hero-stack { min-height: 100vh; display: flex; flex-direction: column; }
.home-hero { flex: 1 1 auto; display: flex; min-height: 0; background: var(--cream); }

.hero-mosaic {
  flex: 1; display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(250px, 1fr));
  gap: 2px; background: var(--line-gold);
}
.hero-tile {
  position: relative; overflow: hidden; display: block;
  background: var(--cream-dim); color: inherit; min-height: 0;
}
.hero-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.hero-tile:hover img { transform: scale(1.055); }
.hero-tile .cap {
  position: absolute; inset: auto 0 0 0; padding: 56px 22px 18px;
  background: linear-gradient(180deg, transparent, rgba(78, 10, 18, 0.9));
  pointer-events: none;
}
.hero-tile .cap .n {
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 21px;
  color: var(--cream); line-height: 1.2;
}
.hero-tile .cap .p {
  display: block; font-size: 10px; letter-spacing: 0.22em;
  color: var(--gold); margin-top: 5px; transition: color 0.25s;
}
.hero-tile:hover .cap .p { color: var(--gold-bright); }

/* Keeps a real <h1> for search engines and screen readers without
   putting a block of copy back over the photography. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Search band — its own strip under the hero, always in flow */
.search-band { background: var(--cream-warm); border-bottom: 1px solid var(--line); }
.search-inner {
  max-width: 1360px; margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 0.9fr auto; align-items: stretch;
}
.search-inner label, .search-inner .field {
  display: flex; flex-direction: column; gap: 5px; padding: 18px 22px;
  border-right: 1px solid var(--line);
}
.search-inner .lbl { font-size: 10.5px; letter-spacing: 0.24em; color: var(--gold-ink); font-weight: 500; }
.search-inner select, .search-inner input {
  border: none; background: transparent; font-size: 15px; color: var(--ink); outline: none; width: 100%;
}
.search-inner select { font-family: "Cormorant Garamond", Georgia, serif; font-size: 17px; cursor: pointer; }
.search-inner button.go {
  background: var(--maroon); color: var(--cream); border: none; padding: 0 46px;
  font-size: 12.5px; letter-spacing: 0.24em; cursor: pointer; transition: background 0.25s;
}
.search-inner button.go:hover { background: var(--maroon-soft); }

/* Stat strip */
.stat-strip {
  background-color: var(--maroon-deep); background-image: var(--lattice);
  color: var(--gold-bright); display: flex; justify-content: center;
  gap: min(7vw, 110px); padding: 30px 6vw; flex-wrap: wrap;
}
.stat-strip .stat { text-align: center; }
.stat-strip .n { font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; color: var(--gold); line-height: 1.1; }
.stat-strip .l { font-size: 11px; letter-spacing: 0.26em; color: rgba(251,248,242,0.72); margin-top: 4px; }

/* ── Generic page hero (interior pages) ─────────────────────────── */

.page-hero {
  background-color: var(--maroon); background-image: var(--lattice);
  padding: 150px 6vw 80px; text-align: center; position: relative;
  min-height: 52vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.page-hero > .inner { animation: heroIn 0.9s ease both; position: relative; z-index: 2; }
.page-hero img.mark { height: 54px; opacity: 0.95; }
.page-hero h1 { font-size: clamp(36px, 4.4vw, 58px); color: var(--cream); margin: 12px 0 0; }
.page-hero p { max-width: 580px; margin: 16px auto 0; color: rgba(251,248,242,0.8); font-weight: 300; font-size: 16px; line-height: 1.75; }

/* Photo-backed page hero */
.page-hero.with-photo { overflow: hidden; background-color: var(--maroon-deep); min-height: 64vh; }
.page-hero.with-photo .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-hero.with-photo .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(24, 7, 11, 0.52), rgba(24, 7, 11, 0.68));
}

/* ── Destination / feature cards ────────────────────────────────── */

.section { padding: 100px 6vw; max-width: 1360px; margin: 0 auto; }
.section.tight { padding: 84px 6vw; }
.section-alt { background: var(--cream-warm); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }

.dest-card {
  position: relative; display: block; height: 340px; overflow: hidden;
  background: var(--cream-dim); color: inherit;
}
.dest-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s ease; }
.dest-card:hover img { transform: scale(1.05); }
.dest-card .cap {
  position: absolute; inset: auto 0 0 0; padding: 70px 22px 18px;
  background: linear-gradient(180deg, transparent, rgba(78,10,18,0.92)); pointer-events: none;
}
.dest-card .cap .n { font-family: "Cormorant Garamond", Georgia, serif; font-size: 25px; color: var(--cream); }
.dest-card .cap .b { font-size: 13px; color: rgba(251,248,242,0.82); font-weight: 300; margin-top: 3px; }
.dest-card .cap .c { font-size: 11px; letter-spacing: 0.22em; color: var(--gold); margin-top: 9px; }

/* Feature / value card */
.feature-card {
  background: var(--cream); border: 1px solid var(--line); padding: 32px 28px;
  border-top: 2px solid var(--gold);
}
.feature-card .n { font-family: "Cormorant Garamond", Georgia, serif; font-size: 23px; color: var(--maroon); }
.feature-card p { color: var(--ink-soft); font-weight: 300; font-size: 14.5px; line-height: 1.75; margin: 10px 0 0; }

/* ── Story split (arched photo window) ──────────────────────────── */

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 70px; align-items: center; max-width: 1200px; margin: 0 auto; }
.split h2 { font-size: clamp(30px, 3.4vw, 44px); margin: 12px 0 0; line-height: 1.25; color: var(--maroon); }
.on-maroon .split h2 { color: var(--cream); }
.split p { color: var(--ink-soft); font-weight: 300; line-height: 1.9; font-size: 15.5px; margin: 20px 0 0; }
.on-maroon .split p { color: rgba(251,248,242,0.82); }

.arch-photo { position: relative; height: 520px; }
.arch-photo .frame {
  position: absolute; inset: 0; border: 1px solid var(--line-gold);
  transform: translate(16px, 16px); pointer-events: none;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;
}
.arch-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;
}
.arch-photo .keystone {
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px; background: var(--gold);
}

/* Watermark tree on maroon sections */
.watermark {
  position: absolute; right: -110px; top: 50%; transform: translateY(-50%);
  height: 560px; opacity: 0.07; pointer-events: none;
}

/* ── Hotel cards ────────────────────────────────────────────────── */

.hotel-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px; padding: 56px 6vw 100px; max-width: 1360px; margin: 0 auto;
}
.hotel-grid.flush { padding: 0; }

.hotel-card {
  background: var(--cream); border: 1px solid var(--line); display: flex; flex-direction: column;
  color: inherit; transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.hotel-card:hover { box-shadow: 0 14px 42px rgba(78, 10, 18, 0.18); transform: translateY(-4px); color: inherit; }
.hotel-card .hc-img { height: 210px; background: var(--cream-dim); overflow: hidden; position: relative; }
.hotel-card .hc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.hotel-card:hover .hc-img img { transform: scale(1.04); }
.hotel-card .hc-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.hotel-card .hc-place { font-size: 10.5px; letter-spacing: 0.22em; color: var(--gold-ink); font-weight: 500; }
.hotel-card .hc-name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; color: var(--maroon); }
.hotel-card .hc-blurb { font-size: 13.5px; color: var(--ink-soft); font-weight: 300; line-height: 1.65; flex: 1; }
.hotel-card .hc-foot {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); padding-top: 13px; margin-top: 6px; gap: 10px;
}
.hotel-card .hc-rate { font-size: 12px; color: var(--gold-ink); }
.hotel-card .hc-rate b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 19px; color: var(--maroon); font-weight: 500; }
.hotel-card .hc-rate small { color: var(--ink-faint); }
.hotel-card .hc-cta {
  border: 1px solid var(--gold); color: var(--gold-ink); padding: 8px 18px;
  font-size: 11px; letter-spacing: 0.18em; white-space: nowrap;
}
.hotel-card:hover .hc-cta { background: var(--gold); color: var(--maroon-deep); }
.badge-upcoming {
  position: absolute; top: 12px; left: 12px; background: rgba(78,10,18,0.9);
  color: var(--gold-bright); font-size: 10px; letter-spacing: 0.2em; padding: 5px 10px;
}

/* Category tabs */
.cat-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-tabs button {
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  padding: 10px 18px; font-size: 11.5px; letter-spacing: 0.16em; cursor: pointer; transition: all 0.25s;
}
.cat-tabs button:hover { border-color: var(--gold); color: var(--gold-ink); }
.cat-tabs button.active { background: var(--maroon); color: var(--cream); border-color: var(--maroon); }

/* Opening soon chips */
.soon-list { display: flex; flex-wrap: wrap; gap: 14px; }
.soon-chip {
  border: 1px dashed rgba(190, 167, 91, 0.7); background: rgba(251, 248, 242, 0.7);
  padding: 14px 20px; display: flex; flex-direction: column; gap: 3px;
}
.soon-chip .n { font-family: "Cormorant Garamond", Georgia, serif; font-size: 18px; color: var(--maroon); }
.soon-chip .p { font-size: 11px; letter-spacing: 0.2em; color: var(--gold-ink); }

/* ── Offer cards ────────────────────────────────────────────────── */

.offer-card { border: 1px solid var(--line); background: var(--cream); display: flex; flex-direction: column; transition: box-shadow 0.3s; }
.offer-card:hover { box-shadow: 0 14px 42px rgba(78, 10, 18, 0.16); }
.offer-card .oc-img { height: 200px; position: relative; background: var(--cream-dim); overflow: hidden; }
.offer-card .oc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer-card .tag {
  position: absolute; top: 14px; left: 14px; background: var(--maroon);
  color: var(--gold-bright); font-size: 11px; letter-spacing: 0.2em; padding: 6px 12px;
}
.offer-card .oc-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.offer-card .oc-name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 24px; color: var(--maroon); }
.offer-card .oc-desc { font-size: 14px; color: var(--ink-soft); font-weight: 300; line-height: 1.7; flex: 1; }
.offer-card .oc-valid { font-size: 12.5px; color: var(--gold-ink); font-weight: 300; }

/* ── Weddings CTA band ──────────────────────────────────────────── */

.band {
  position: relative; min-height: 520px; display: flex; align-items: center;
  background: var(--maroon-deep); overflow: hidden;
}
.band .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.band .scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(24, 7, 11, 0.92) 0%, rgba(24, 7, 11, 0.6) 55%, rgba(24, 7, 11, 0.15) 100%);
}
.band .body { position: relative; z-index: 2; padding: 90px 6vw; max-width: 620px; }
.band h2 { font-size: clamp(30px, 3.4vw, 44px); color: var(--cream); margin: 12px 0 0; line-height: 1.25; }
.band p { color: rgba(251,248,242,0.85); font-weight: 300; line-height: 1.85; font-size: 15.5px; margin: 18px 0 0; }

/* ── Forms ──────────────────────────────────────────────────────── */

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; text-align: left; }
.form-stack { display: flex; flex-direction: column; gap: 14px; }

.field-light input, .field-light textarea, .field-light select {
  border: 1px solid var(--line); background: #fff; padding: 13px 15px;
  font-size: 14.5px; color: var(--ink); width: 100%; outline-color: var(--gold);
}
.field-dark input, .field-dark textarea, .field-dark select {
  border: 1px solid var(--line-gold); background: rgba(251, 248, 242, 0.07);
  color: var(--cream); padding: 13px 15px; font-size: 14.5px; width: 100%;
  outline-color: var(--gold); color-scheme: dark;
}
.field-dark input::placeholder, .field-dark textarea::placeholder { color: rgba(251,248,242,0.5); }
.field-dark select option { color: var(--ink); }

.form-ok {
  display: inline-block; border: 1px solid var(--gold); padding: 18px 34px;
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 18px; animation: fadeIn 0.4s ease both;
}
.on-maroon .form-ok { color: var(--cream); }

/* Contact detail blocks */
.contact-block .h { font-size: 11px; letter-spacing: 0.26em; color: var(--gold-ink); margin-bottom: 10px; font-weight: 500; }
.contact-block .v { font-family: "Cormorant Garamond", Georgia, serif; font-size: 23px; color: var(--maroon); }
.contact-block .s { font-size: 14.5px; color: var(--ink-soft); font-weight: 300; margin-top: 4px; line-height: 1.7; }

/* ── Hotel detail: hero ─────────────────────────────────────────── */

.detail-hero {
  position: relative; min-height: 62vh; display: flex; align-items: flex-end;
  background: var(--maroon-deep); overflow: hidden;
}
.detail-hero .hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.detail-hero .hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(24, 7, 11, 0.28) 0%, rgba(24, 7, 11, 0.55) 55%, rgba(24, 7, 11, 0.9) 100%);
}
.detail-hero .hero-body { position: relative; z-index: 2; padding: 60px 6vw 44px; animation: heroIn 0.8s ease both; pointer-events: none; }
.detail-hero .hero-body a { pointer-events: auto; font-size: 11.5px; letter-spacing: 0.22em; color: rgba(251,248,242,0.75); }
.detail-hero .hero-body a:hover { color: var(--gold); }
.detail-hero .crumb-cat { font-size: 11px; letter-spacing: 0.26em; color: var(--gold); font-weight: 500; margin-top: 14px; }
.detail-hero h1 { font-size: clamp(34px, 4.2vw, 56px); color: var(--cream); margin: 8px 0 0; }
.detail-hero .blurb { max-width: 620px; color: rgba(251,248,242,0.85); font-weight: 300; font-size: 15.5px; line-height: 1.75; margin: 12px 0 0; }

/* ── Hotel detail: gallery ──────────────────────────────────────── */

.gallery-section { padding: 56px 6vw 30px; max-width: 1360px; margin: 0 auto; }
.gallery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 14px; }
.gallery-grid > div { overflow: hidden; background: var(--cream-dim); position: relative; }
.gallery-grid > div:first-child { grid-row: span 2; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.gallery-grid > div:hover img { transform: scale(1.04); }
.gallery-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12px; font-size: 12px; letter-spacing: 0.08em; color: var(--ink-faint);
  background:
    repeating-linear-gradient(45deg, var(--cream-warm), var(--cream-warm) 14px, var(--cream-dim) 14px, var(--cream-dim) 28px);
}

/* ── Hotel detail: content + booking panel ──────────────────────── */

.detail-main { padding: 30px 6vw 100px; max-width: 1360px; margin: 0 auto; }
.detail-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 50px; align-items: start; }

.detail-cols h2 { font-size: clamp(26px, 2.6vw, 34px); color: var(--maroon); margin: 0; }
.rate-context { font-size: 13.5px; color: var(--ink-soft); font-weight: 300; margin-top: 6px; }

.room-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.room-row {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  background: var(--cream-warm); border: 1px solid var(--line); padding: 20px 24px;
  border-left: 2px solid var(--gold);
}
.room-row .r-name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 21px; color: var(--maroon); }
.room-row .r-desc { font-size: 13px; color: var(--ink-soft); margin-top: 3px; font-weight: 300; }
.room-row .r-price { text-align: right; white-space: nowrap; }
.room-row .r-nightly { font-family: "Cormorant Garamond", Georgia, serif; font-size: 23px; color: var(--maroon); }
.room-row .r-per { font-size: 11px; color: var(--ink-faint); }
.room-row .r-total { font-size: 12px; color: var(--gold-ink); margin-top: 4px; }

.amenities-block { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 26px; }
.amenities-block h3 { font-size: 23px; color: var(--maroon); margin: 0; }
.amenity-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.amenity-chips span {
  border: 1px solid rgba(190, 167, 91, 0.55); color: var(--ink-soft);
  font-size: 12.5px; font-weight: 300; padding: 8px 16px; letter-spacing: 0.06em;
}

/* Booking panel */

.book-panel {
  background-color: var(--maroon); background-image: var(--lattice);
  padding: 30px 28px; position: sticky; top: 96px; border-top: 3px solid var(--gold);
}
.book-panel .panel-title { font-size: 11px; letter-spacing: 0.26em; color: var(--gold); font-weight: 500; }
.book-panel .fields { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.book-panel label { display: flex; flex-direction: column; gap: 6px; }
.book-panel label > span { font-size: 10.5px; letter-spacing: 0.22em; color: rgba(251,248,242,0.7); }
.book-panel input[type="date"],
.book-panel input[type="text"],
.book-panel input[type="tel"] {
  border: 1px solid var(--line-gold); background: rgba(251, 248, 242, 0.07);
  color: var(--cream); padding: 12px 14px; font-size: 14.5px;
  outline-color: var(--gold); color-scheme: dark; width: 100%;
}
.book-panel input::placeholder { color: rgba(251,248,242,0.5); }
.guest-stepper { display: flex; align-items: center; gap: 16px; border: 1px solid var(--line-gold); padding: 10px 14px; }
.guest-stepper button {
  width: 24px; height: 24px; border: 1px solid var(--gold-mid); background: none;
  color: var(--gold-bright); cursor: pointer; line-height: 1; font-size: 14px;
}
.guest-stepper .count { font-size: 15px; color: var(--cream); min-width: 16px; text-align: center; }
.total-row {
  border-top: 1px solid var(--line-gold-soft); padding-top: 14px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.total-row .lbl { font-size: 11px; letter-spacing: 0.18em; color: rgba(251,248,242,0.72); }
.total-row .amt { font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; color: var(--gold-bright); }

.btn-quote {
  background: var(--gold); color: var(--maroon-deep); border: none; padding: 14px;
  font-size: 12px; letter-spacing: 0.24em; font-weight: 600; cursor: pointer; transition: background 0.25s;
}
.btn-quote:hover { background: var(--gold-bright); }
.btn-quote:disabled { background: #9c8d6a; cursor: not-allowed; }
.panel-note { font-size: 11.5px; color: rgba(251,248,242,0.7); font-weight: 300; line-height: 1.6; }
.panel-error { font-size: 12.5px; color: #F0C4B4; font-weight: 300; line-height: 1.6; }

.quote-done { border: 1px solid var(--gold); padding: 16px 18px; text-align: center; animation: fadeIn 0.5s ease both; }
.quote-done .qd-title { font-family: "Cormorant Garamond", Georgia, serif; font-size: 19px; color: var(--cream); }
.quote-done .qd-ref { font-size: 12.5px; color: rgba(251,248,242,0.8); margin-top: 6px; }
.quote-done .qd-ref b { color: var(--gold-bright); font-weight: 500; letter-spacing: 0.06em; }
.quote-done .qd-note { font-size: 12px; color: rgba(251,248,242,0.7); font-weight: 300; margin-top: 8px; line-height: 1.6; }

/* ── Hotels index hero ──────────────────────────────────────────── */

.hotels-hero {
  background-color: var(--maroon); background-image: var(--lattice);
  padding: 150px 6vw 70px; text-align: center;
  min-height: 46vh;
  display: flex; flex-direction: column; justify-content: center;
}
.hotels-hero .kicker { color: var(--gold); }
.hotels-hero h1 { color: var(--cream); font-size: clamp(34px, 4.4vw, 54px); margin: 12px 0 0; }
.hotels-hero p { color: rgba(251,248,242,0.8); font-weight: 300; max-width: 580px; margin: 14px auto 0; line-height: 1.75; }

/* ── Footer ─────────────────────────────────────────────────────── */

.site-footer {
  background-color: var(--maroon-deep); background-image: var(--lattice);
  color: rgba(251, 248, 242, 0.75); padding: 80px 6vw 40px;
}
.site-footer .inner { max-width: 1360px; margin: 0 auto; }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 50px; }
.site-footer .f-logo { width: 215px; object-fit: contain; }
.site-footer p { font-size: 13.5px; font-weight: 300; line-height: 1.8; color: rgba(251, 248, 242, 0.7); }
.site-footer .f-head { font-size: 11px; letter-spacing: 0.26em; color: var(--gold); margin-bottom: 16px; }
.site-footer .f-links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; font-weight: 300; }
.site-footer .f-links a, .site-footer .f-links span { color: rgba(251, 248, 242, 0.82); }
.site-footer .f-links a:hover { color: var(--gold); }
.news-box { display: flex; border: 1px solid var(--line-gold); }
.news-box input {
  flex: 1; min-width: 0; border: none; background: transparent; color: var(--cream);
  padding: 12px 16px; font-size: 13.5px; outline: none;
}
.news-box input::placeholder { color: rgba(251,248,242,0.5); }
.news-box button {
  background: var(--gold); border: none; color: var(--maroon-deep); padding: 0 20px;
  font-size: 11px; letter-spacing: 0.2em; font-weight: 600; cursor: pointer;
}
.news-box button:hover { background: var(--gold-bright); }
.footer-base {
  border-top: 1px solid var(--line-gold-soft); margin-top: 56px; padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: rgba(251, 248, 242, 0.55);
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .search-inner { grid-template-columns: 1fr 1fr; }
  .search-inner button.go { grid-column: span 2; padding: 18px; }
}

@media (max-width: 1000px) {
  .hero-stack { min-height: 0; }
  .hero-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, minmax(240px, 1fr)); }
  .page-hero, .hotels-hero { min-height: 0; }
  .page-hero.with-photo { min-height: 420px; }
  .detail-hero { min-height: 440px; }
}

@media (max-width: 980px) {
  .detail-cols { grid-template-columns: 1fr; }
  .book-panel { position: static; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 36px; }
  .split { gap: 44px; }
  .arch-photo { height: 400px; }
  .watermark { display: none; }
}

@media (max-width: 1150px) {
  .site-header { justify-content: center; padding: 10px 4vw; }
  .site-header nav { order: 3; width: 100%; padding-bottom: 8px; column-gap: 18px; }
}

@media (max-width: 760px) {
  /* Header wraps to two rows here and floats over the mosaic, so keep it
     compact and give the first row of tiles enough height to survive it. */
  .site-header { padding: 8px 4vw; min-height: 0; }
  .site-header nav { padding-bottom: 6px; column-gap: 15px; row-gap: 2px; }
  .site-header nav a { font-size: 12.5px; letter-spacing: 0.1em; }
  .site-header .brand img.tree { height: 40px; width: 40px; }
  .site-header .brand img.wordmark { height: 25px; }
  .btn-book { padding: 10px 20px; font-size: 12px; letter-spacing: 0.14em; }
  .section { padding: 70px 5vw; }
  .band .body { padding: 70px 6vw; }
}

@media (max-width: 640px) {
  .hero-mosaic { grid-template-rows: repeat(3, minmax(215px, 1fr)); }
  .hero-tile .cap { padding: 40px 14px 12px; }
  .hero-tile .cap .n { font-size: 17px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 130px 130px; }
  .gallery-grid > div:first-child { grid-row: auto; grid-column: span 2; }
  .room-row { flex-direction: column; align-items: flex-start; }
  .room-row .r-price { text-align: left; }
  .footer-cols { grid-template-columns: 1fr; }
  .search-inner { grid-template-columns: 1fr; }
  .search-inner button.go { grid-column: auto; }
}

/* ── Destination tile without photography (on-brand fallback) ───── */

.dest-card.no-photo {
  background-color: var(--maroon); background-image: var(--lattice);
  display: flex; align-items: center; justify-content: center;
}
.dest-card.no-photo img.mark { height: 120px; opacity: 0.3; width: auto; transition: none; }
.dest-card.no-photo:hover img.mark { transform: none; }
.dest-card.no-photo .cap { background: linear-gradient(180deg, transparent, rgba(78,10,18,0.85)); }

/* ── Corporate client strip ─────────────────────────────────────── */

.client-strip { padding: 66px 6vw; border-top: 1px solid var(--line); text-align: center; }
.client-strip .names {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 14px 34px; margin-top: 26px; max-width: 900px; margin-inline: auto;
}
.client-strip .names span {
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 21px;
  color: var(--maroon); letter-spacing: 0.06em; opacity: 0.85;
}
.client-strip .names span::after { content: "✦"; color: var(--gold); font-size: 11px; margin-left: 34px; vertical-align: middle; }
.client-strip .names span:last-child::after { content: ""; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════
   EDITORIAL SYSTEM — the sections below the hero.

   The earlier build used the same centred-heading + three-equal-cards
   block for every section, which is what reads as templated. These
   patterns are asymmetric, numbered, and borrowed from the group's own
   print: the numbered property ledger, the Gujarat map with diamond pins,
   the trifold's dashed journey line.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Numbered section header, left-aligned ───────────────────────── */
.ed-head {
  display: grid; grid-template-columns: auto 1fr; column-gap: 28px; align-items: start;
  max-width: 1360px; margin: 0 auto 56px;
}
.ed-num {
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 15px; letter-spacing: 0.2em;
  color: var(--gold-ink); padding-top: 8px; position: relative; white-space: nowrap;
}
.ed-num::after { content: ""; display: block; width: 46px; height: 1px; background: var(--gold); margin-top: 10px; }
.on-maroon .ed-num, .maroon-panel .ed-num { color: var(--gold); }
.ed-body h2 {
  font-size: clamp(34px, 3.8vw, 54px); color: var(--maroon); margin: 6px 0 0;
  line-height: 1.08; letter-spacing: -0.005em; max-width: 22ch; text-wrap: balance;
}
.ed-body h2 em { font-style: italic; font-weight: 400; color: var(--gold-ink); }
.maroon-panel .ed-body h2, .on-maroon .ed-body h2 { color: var(--cream); }
.maroon-panel .ed-body h2 em, .on-maroon .ed-body h2 em { color: var(--gold-bright); }
.ed-body p { color: var(--ink-soft); font-weight: 300; max-width: 52ch; margin: 16px 0 0; line-height: 1.8; }
.maroon-panel .ed-body p, .on-maroon .ed-body p { color: rgba(251,248,242,0.8); }
.ed-head .ed-aside { grid-column: 2; margin-top: 18px; }

/* ── 01 · Destinations as a postcard strip ───────────────────────── */
.postcards {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  /* left edge lines up with the section header's "01" */
  padding: 4px 6vw 28px calc(max(0px, (100vw - 1360px) / 2) + 6vw);
  scroll-padding-left: calc(max(0px, (100vw - 1360px) / 2) + 6vw);
  scrollbar-width: thin; scrollbar-color: var(--gold) transparent;
}
.postcards::-webkit-scrollbar { height: 6px; }
.postcards::-webkit-scrollbar-thumb { background: var(--line-gold); }
.postcard {
  flex: 0 0 clamp(300px, 26vw, 380px); scroll-snap-align: start;
  background: var(--cream); border: 1px solid var(--line-gold); color: inherit;
  display: flex; flex-direction: column;
}
.postcard:nth-child(even) { margin-top: 34px; }             /* staggered, like pinned cards */
.postcard .pc-img { height: 250px; overflow: hidden; position: relative; background: var(--cream-dim); }
.postcard .pc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s ease; }
.postcard:hover .pc-img img { transform: scale(1.04); }
.postcard .pc-img.no-photo {
  background-color: var(--maroon); background-image: var(--lattice);
  display: flex; align-items: center; justify-content: center;
}
.postcard .pc-img.no-photo img { width: auto; height: 110px; opacity: 0.32; }
.postcard .pc-cap { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.postcard .pc-coords {
  font-size: 10.5px; letter-spacing: 0.2em; color: var(--gold-ink);
  display: flex; align-items: center; gap: 10px;
}
.postcard .pc-coords::before { content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.postcard .pc-name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 27px; color: var(--maroon); line-height: 1.1; }
.postcard .pc-blurb { font-size: 13.5px; color: var(--ink-soft); font-weight: 300; line-height: 1.65; flex: 1; }
.postcard .pc-count {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 11px; letter-spacing: 0.2em; color: var(--gold-ink);
}
.postcard:hover .pc-count { color: var(--maroon); }

/* ── 02 · The map ────────────────────────────────────────────────── */
.map-section { padding: 110px 4vw 100px; position: relative; overflow: hidden; }
.map-section .gold-frame::before { inset: 22px; }
.map-section .gold-frame::after { inset: 28px; }
.map-grid {
  display: grid; grid-template-columns: minmax(280px, 0.64fr) 1.36fr; gap: 48px; align-items: center;
  max-width: 1440px; margin: 0 auto; position: relative; z-index: 1;
}
.map-svg { width: 100%; height: auto; display: block; overflow: visible; }
.map-svg .land { fill: #7E1E2A; stroke: var(--gold); stroke-width: 1.2; }
.map-svg .pin { cursor: pointer; }
.map-svg .pin polygon { fill: var(--gold); transition: transform 0.25s ease; transform-box: fill-box; transform-origin: center; }
.map-svg .pin.soon polygon { fill: none; stroke: var(--gold); stroke-width: 1.6; }
.map-svg .pin:hover polygon { transform: scale(1.6); }
.map-svg .pin .hit { fill: transparent; }
.map-svg.inset .land { stroke-width: 2; }
.map-svg.inset .pin text { font-size: 15px; }
.map-inset { display: none; margin: 26px 0 0; padding: 14px; border: 1px solid var(--line-gold); position: relative; }
.map-inset figcaption {
  position: absolute; top: -9px; left: 16px; padding: 0 8px; background: var(--maroon);
  font-size: 10.5px; letter-spacing: 0.26em; color: var(--gold); display: flex; align-items: center; gap: 8px;
}
.map-inset .diamond { width: 6px; height: 6px; }
.map-svg .pin .leader { stroke: var(--gold); stroke-width: 0.8; opacity: 0.75; }
.map-svg .pin:hover text { fill: var(--gold-bright); }
.map-svg .pin text {
  font-family: Jost, sans-serif; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  fill: var(--cream); paint-order: stroke; stroke: var(--maroon-deep); stroke-width: 4px; stroke-linejoin: round;
}
.map-svg .pin.soon text { fill: rgba(251,248,242,0.72); }
.map-svg .region {
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; letter-spacing: 0.35em;
  fill: rgba(190,167,91,0.45); text-transform: uppercase;
}
.map-legend { display: flex; gap: 28px; margin-top: 26px; font-size: 11.5px; letter-spacing: 0.22em; color: var(--gold-bright); }
.map-legend span { display: inline-flex; align-items: center; gap: 10px; }
.map-legend i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--gold); }
.map-legend i.hollow { background: none; border: 1.5px solid var(--gold); }
.map-list { margin-top: 34px; display: flex; flex-direction: column; gap: 22px; }
.map-list .h { font-size: 11px; letter-spacing: 0.28em; color: var(--gold); }
.map-list .names { display: flex; flex-wrap: wrap; gap: 8px 0; }
.map-list .names a {
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 20px; color: var(--cream); letter-spacing: 0.04em;
}
.map-list .names a::after { content: "·"; color: var(--gold); margin: 0 12px; }
.map-list .names a:last-child::after { content: none; }
.map-list .names a:hover { color: var(--gold-bright); }
.map-list .names.soon a { font-size: 17px; color: rgba(251,248,242,0.75); }

/* ── 03 · The property ledger ────────────────────────────────────── */
.ledger { max-width: 1360px; margin: 0 auto; columns: 2; column-gap: 64px; }
.ledger-row {
  break-inside: avoid; display: grid; grid-template-columns: 34px 1fr auto; column-gap: 16px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
}
.ledger-row:hover .lg-name { color: var(--gold-ink); }
.ledger-row.quiet { cursor: default; }
.ledger-row.quiet:hover .lg-name { color: var(--maroon); }
.ledger-row.quiet .lg-place { color: var(--ink-faint); }
.lg-end { display: flex; align-items: center; gap: 16px; align-self: center; }
.lg-cta { font-size: 10.5px; letter-spacing: 0.2em; color: var(--gold-ink); white-space: nowrap; transition: color 0.2s; }
.ledger-row:hover .lg-cta { color: var(--maroon); }
.lg-req { font-size: 10px; letter-spacing: 0.2em; color: var(--ink-faint); white-space: nowrap; }
.lg-num { font-family: "Cormorant Garamond", Georgia, serif; font-size: 14px; letter-spacing: 0.15em; color: var(--gold-ink); }
.lg-name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; color: var(--maroon); line-height: 1.15; transition: color 0.2s; }
.lg-place { display: block; font-size: 10.5px; letter-spacing: 0.2em; color: var(--ink-faint); margin-top: 3px; }
.lg-mark { width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold); align-self: center; }
.lg-mark.soon { background: none; border: 1.5px solid var(--gold); }
.ledger-foot { max-width: 1360px; margin: 36px auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; align-items: center; }
.ledger-foot .legend { font-size: 11px; letter-spacing: 0.22em; color: var(--ink-faint); display: flex; gap: 22px; }
.ledger-foot .legend i { display: inline-block; width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold); margin-right: 9px; vertical-align: middle; }
.ledger-foot .legend i.hollow { background: none; border: 1.5px solid var(--gold); }
.ledger-note { max-width: 1360px; margin: 26px auto 0; font-size: 13.5px; font-weight: 300; line-height: 1.75; color: var(--ink-soft); }
.ledger-note a { white-space: nowrap; }

/* Our Hotels — the family ledger below the bookable grid */
.family { padding-top: 40px; border-top: 1px solid var(--line); }
.family .ed-head { margin-bottom: 44px; }

/* ── 04 · Story spread + journey line ────────────────────────────── */
.story { background: var(--cream-warm); padding: 120px 6vw 110px; }
.story-grid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 70px; align-items: start; }
.pull {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.22; color: var(--maroon); margin: 0;
}
.pull::before { content: "“"; color: var(--gold); margin-right: 4px; }
.pull::after { content: "”"; color: var(--gold); margin-left: 4px; }
.story-body { color: var(--ink-soft); font-weight: 300; font-size: 15.5px; line-height: 1.9; margin: 28px 0 0; max-width: 56ch; }
.story-body + .story-body { margin-top: 14px; }
.devnagri {
  margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line-gold);
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
.devnagri .gu { font-size: 26px; color: var(--maroon); letter-spacing: 0.02em; }
.devnagri .en { font-size: 12px; letter-spacing: 0.2em; color: var(--gold-ink); }
.story .arch-photo { height: 560px; margin-top: 10px; }
.arch-fig { margin: 0; }
.arch-cap {
  margin-top: 22px; padding-left: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-size: 10.5px; letter-spacing: 0.2em; color: var(--gold-ink); text-transform: uppercase; position: relative;
}
.arch-cap::before { content: ""; position: absolute; left: 0; top: 4px; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }

.timeline { max-width: 1360px; margin: 90px auto 0; position: relative; padding-top: 40px; }
.timeline::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0;
  border-top: 1.5px dashed var(--gold);
}
.tl-items { display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px; }
.tl-item { position: relative; }
.tl-item::before {
  content: ""; position: absolute; left: 0; top: -45px; width: 9px; height: 9px;
  transform: rotate(45deg); background: var(--gold);
}
.tl-when { font-family: "Cormorant Garamond", Georgia, serif; font-size: 24px; color: var(--maroon); letter-spacing: 0.06em; min-height: 30px; }
.tl-title { font-size: 12px; letter-spacing: 0.2em; color: var(--gold-ink); text-transform: uppercase; margin-top: 8px; }
.tl-note { font-size: 13.5px; color: var(--ink-soft); font-weight: 300; line-height: 1.65; margin-top: 8px; }

/* ── 05 · When to go ─────────────────────────────────────────────── */
.seasons { padding: 110px 6vw; }
.season-chart { max-width: 1360px; margin: 0 auto; border: 1px solid var(--line-gold); background: var(--cream); }
.season-months {
  display: grid; grid-template-columns: 240px repeat(12, 1fr); border-bottom: 1px solid var(--line);
  font-size: 10.5px; letter-spacing: 0.24em; color: var(--gold-ink);
}
.season-months > span { padding: 14px 0; text-align: center; border-left: 1px solid var(--line); }
.season-months > span:first-child { border-left: none; text-align: left; padding-left: 22px; }
.season-row { display: grid; grid-template-columns: 240px repeat(12, 1fr); border-bottom: 1px solid var(--line); min-height: 58px; align-items: center; }
.season-row:last-child { border-bottom: none; }
.season-row .sr-name { padding: 12px 22px; }
.season-row .sr-name b { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 19px; color: var(--maroon); }
.season-row .sr-name small { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 300; margin-top: 2px; }
.season-row .cell { height: 100%; min-height: 58px; border-left: 1px solid var(--line); position: relative; }
.season-row .cell.on::after {
  content: ""; position: absolute; inset: 21px 0; background: var(--maroon);
}
.season-row .cell.on.first::after { left: 6px; border-radius: 3px 0 0 3px; }
.season-row .cell.on.last::after  { right: 6px; border-radius: 0 3px 3px 0; }
.season-row.gold .cell.on::after { background: var(--gold); }
.season-note { max-width: 1360px; margin: 16px auto 0; font-size: 12.5px; color: var(--ink-faint); font-weight: 300; }

/* ── 06 · One offer, properly ────────────────────────────────────── */
.feature-offer { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 0; border: 1px solid var(--line-gold); background: var(--cream); }
.feature-offer .fo-img { position: relative; min-height: 440px; overflow: hidden; }
.feature-offer .fo-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-offer .fo-img .tag { position: absolute; top: 22px; left: 22px; background: var(--maroon); color: var(--gold-bright); font-size: 11px; letter-spacing: 0.22em; padding: 7px 14px; }
.feature-offer .fo-body { padding: 48px 46px; display: flex; flex-direction: column; justify-content: center; }
.feature-offer .fo-body .kicker { color: var(--gold-ink); }
.feature-offer .fo-body h3 { font-size: clamp(28px, 2.8vw, 38px); color: var(--maroon); margin: 12px 0 0; line-height: 1.12; }
.feature-offer .fo-body p { color: var(--ink-soft); font-weight: 300; line-height: 1.8; margin: 18px 0 0; }
.feature-offer .fo-valid { font-size: 12px; letter-spacing: 0.18em; color: var(--gold-ink); margin-top: 18px; }
.offer-lines { max-width: 1360px; margin: 26px auto 0; }
.offer-line {
  display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line); color: inherit;
}
.offer-line:first-child { border-top: 1px solid var(--line); }
.offer-line .ol-name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; color: var(--maroon); }
.offer-line .ol-name small { font-family: Jost, sans-serif; font-size: 13px; color: var(--ink-soft); font-weight: 300; margin-left: 12px; }
.offer-line .ol-valid { font-size: 11px; letter-spacing: 0.18em; color: var(--ink-faint); }
.offer-line .ol-cta { font-size: 11px; letter-spacing: 0.2em; color: var(--gold-ink); }
.offer-line:hover .ol-cta { color: var(--maroon); }

/* ── Cards: stop the hover-lift; a gold frame is enough ──────────── */
.hotel-card, .offer-card, .dest-card, .feature-card { transition: border-color 0.25s; }
.hotel-card:hover, .offer-card:hover { box-shadow: none; transform: none; border-color: var(--gold); }
.feature-card { border-top-width: 1px; border-left: 2px solid var(--gold); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .map-svg.full .pin.dense text, .map-svg.full .pin.dense .leader { display: none; }
  .map-svg.full .pin polygon { transform: scale(1.7); }
  .map-svg.full .pin text { font-size: 19px; }
  .map-svg.full .region { font-size: 30px; }
  .map-inset { display: block; }
  .map-svg.inset .pin text { font-size: 18px; }
  /* each milestone carries its own dashed segment once the row wraps */
  .timeline::before { display: none; }
  .tl-item { padding-top: 18px; border-top: 1.5px dashed var(--gold); }
  .tl-item::before { top: -5px; }
  .map-grid { grid-template-columns: 1fr; gap: 40px; }
  .story-grid { grid-template-columns: 1fr; gap: 44px; }
  .story .arch-photo { height: 420px; }
  .tl-items { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
  .feature-offer { grid-template-columns: 1fr; }
  .feature-offer .fo-img { min-height: 300px; }
  .season-months, .season-row { grid-template-columns: 170px repeat(12, 1fr); }
}
@media (max-width: 700px) {
  .ed-head { grid-template-columns: 1fr; row-gap: 10px; margin-bottom: 40px; }
  .ed-head .ed-aside { grid-column: 1; }
  .ledger { columns: 1; }
  .ledger-row { grid-template-columns: 30px 1fr auto; column-gap: 12px; }
  .lg-end { gap: 10px; }
  .lg-cta, .lg-req { font-size: 9.5px; letter-spacing: 0.14em; }
  .tl-items { grid-template-columns: repeat(2, 1fr); }
  .season-chart { overflow-x: auto; }
  .season-months, .season-row { min-width: 720px; }
  .season-note::before { content: "Swipe the chart sideways for the full year. "; color: var(--gold-ink); }
  .postcard { flex-basis: 78vw; }
  .postcard:nth-child(even) { margin-top: 0; }
  /* phone: the full state keeps its seven spaced labels; the cluster lives in the inset */
  .map-svg.full .pin.dense text, .map-svg.full .pin.dense .leader { display: none; }
  .map-svg.full .pin polygon { transform: scale(1.7); }
  .map-svg.full .pin text { font-size: 19px; }
  .map-svg.full .region { font-size: 30px; }
  .map-inset { display: block; }
  .map-svg.inset .pin text { font-size: 18px; }
  .offer-line { grid-template-columns: 1fr; gap: 6px; }
}