/* =========================================================================
   Mahfil-e-Motijheel — shared stylesheet
   Direction: Navy & Gold. A cooler, more formal register than the palace
   colors it replaces — deep navy, antique gold, cream. Restrained rather
   than ornamental: a plain hairline frame on every photograph, no corner
   ornament, no dividers. Quietly upscale.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Palette — deep navy, antique gold, cream; burgundy as a rare accent */
  --ink:        #16273D;   /* navy — dark section surfaces */
  --ink-deep:   #0F1B2E;   /* near-black navy — nav, footer, hero */
  --ink-soft:   #1F3552;   /* raised surface on dark */
  --gold:       #D4AF37;   /* gold — the brand accent */
  --gold-lit:   #F0D9A0;   /* highlight gold */
  --gold-dim:   #9C7F2A;   /* deeper gold — hairlines, borders */
  --cream:      #F5F0E6;   /* cream */
  --cream-deep: #EAE1CE;   /* cream, one step down */
  --maroon:     #6B1424;   /* burgundy — used only as a rare accent */

  --on-dark:      #F5F0E6;
  --on-dark-mute: #A9B4C4;
  --on-light:     #16273D;
  --on-light-mute:#5B6B7D;

  --line-dark:  rgba(212, 175, 55, .32);
  --line-light: rgba(22, 39, 61, .14);

  /* Type — Playfair Display for headlines, Inter for labels and reading text. */
  --display: 'Playfair Display', Georgia, serif;
  --caps:    'Inter', Arial, sans-serif;
  --body:    'Inter', Arial, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 78rem;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* Flat corners, no ornament. */
  --arch: 0;
  --arch-soft: 0;

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

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* No `scroll-behavior: smooth` — GSAP's ScrollTrigger (hero parallax,
     stat count-up, the margin rail) samples window.scrollY every frame,
     and CSS smooth-scroll eases that value asynchronously against what
     ScrollTrigger expects, which is exactly what produced the "scrolls
     down, then snaps back" fight. Anchor-link jumps (nav, room/facility
     sections) are instant now rather than eased — a fair trade for a
     scroll position that's actually trustworthy everywhere else. */
  /* a scrollbar in the brand's own colours, and — deliberately — a narrow
     one, so it never fights the margin rail for the same sliver of gutter */
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) var(--cream-deep);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cream-deep); }
::-webkit-scrollbar-thumb {
  background-color: var(--gold-dim);
  border: 2px solid var(--cream-deep);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--gold); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--on-light);
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(1.05rem, 1rem + .25vw, 1.15rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 500; line-height: 1.12; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--gold); color: var(--ink-deep);
  padding: .7rem 1.2rem; font-family: var(--caps); text-transform: uppercase; letter-spacing: .08em;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

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

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 96rem; }
.wrap--narrow { max-width: 56rem; }

.section { padding-block: var(--section-y); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--deep { background: var(--ink-deep); color: var(--on-dark); }
.section--paper { background: var(--cream-deep); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--caps); text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .22em;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: ''; width: 2.4rem; height: 1px;
  background: currentColor; opacity: .55; flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: ''; width: 2.4rem; height: 1px;
  background: currentColor; opacity: .55; flex: none;
}

.h1 { font-size: clamp(2.6rem, 7vw, 5.25rem); letter-spacing: -.015em; }
.h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -.01em; }
.h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.h4 { font-size: 1.1rem; }

.lede {
  font-size: clamp(1.075rem, 1rem + .45vw, 1.3rem);
  line-height: 1.65;
  color: var(--on-light-mute);
}
.section--dark .lede, .section--deep .lede { color: var(--on-dark-mute); }

.prose p + p { margin-top: 1.15rem; }
.prose { color: var(--on-light-mute); }
.section--dark .prose, .section--deep .prose { color: var(--on-dark-mute); }

.gold { color: var(--gold); }
.rupee { font-family: var(--body); font-weight: 400; }

/* Section header block */
.head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head--center { margin-inline: auto; text-align: center; }
.head p { margin-top: 1.1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.9rem;
  font-family: var(--caps); text-transform: uppercase; font-size: .82rem; letter-spacing: .16em;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--gold-dim);
  background: var(--gold); color: var(--ink-deep);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { background: var(--gold-lit); border-color: var(--gold-lit); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
/* On light ground the ghost fills with ink; on dark ground it fills with gold.
   Never `background: currentColor`, which collapses to an invisible button. */
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.section--dark .btn--ghost:hover,
.section--deep .btn--ghost:hover,
.hero .btn--ghost:hover {
  background: var(--gold); border-color: var(--gold); color: var(--ink-deep);
}
.btn--sm { padding: .7rem 1.35rem; font-size: .74rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.25rem; }

/* Text link with a rising arch underline */
.link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--caps); text-transform: uppercase; font-size: .8rem; letter-spacing: .13em;
  color: var(--gold); text-decoration: none;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line-dark);
  transition: border-color .3s var(--ease), gap .3s var(--ease);
}
.link:hover { border-bottom-color: var(--gold); gap: .85rem; }
.link::after { content: '→'; font-family: var(--body); }

/* ---------- Brand mark ---------- */
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; }
.brand .mark { width: 2.35rem; height: auto; color: var(--gold); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--display); font-size: 1.06rem;
  letter-spacing: .05em; white-space: nowrap;
}
.brand-tag {
  font-family: var(--caps); text-transform: uppercase; font-size: .55rem; letter-spacing: .3em;
  color: var(--gold); margin-top: .32rem;
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ink-deep) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
  color: var(--on-dark);
  transition: background .35s var(--ease);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 4.75rem;
  transition: min-height .35s var(--ease);
}
/* a quiet intensify once the hero has scrolled past — the nav reads as a
   fixed instrument rather than a static bar */
.nav--scrolled {
  background: color-mix(in srgb, var(--ink-deep) 97%, transparent);
  box-shadow: 0 16px 32px -20px rgba(0,0,0,.55);
}
.nav--scrolled .nav__inner { min-height: 4.1rem; }
.nav__links { display: flex; align-items: center; gap: clamp(.9rem, 1.9vw, 2rem); }
.nav__link {
  position: relative;
  font-family: var(--caps); text-transform: uppercase; font-size: .76rem; letter-spacing: .13em;
  text-decoration: none; color: var(--on-dark);
  padding: .5rem 0; opacity: .82;
  transition: opacity .25s var(--ease), color .25s var(--ease);
}
.nav__link:hover { opacity: 1; color: var(--gold-lit); }
/* a hairline that opens from the centre, like a ribbon drawn taut */
.nav__link::after {
  content: ''; position: absolute; left: 50%; bottom: -.1rem;
  width: 100%; height: 1px; translate: -50% 0;
  background: var(--gold);
  scale: 0 1; transform-origin: center;
  transition: scale .35s var(--ease);
}
.nav__link:hover::after { scale: .55 1; }
.nav__link[aria-current='page'] { opacity: 1; color: var(--gold); }
.nav__link[aria-current='page']::after { scale: 1 1; }

.nav__actions { display: flex; align-items: center; gap: 1rem; }
.nav__phone {
  font-family: var(--body); font-size: .9rem; letter-spacing: .02em;
  text-decoration: none; color: var(--on-dark); white-space: nowrap;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: color .25s var(--ease);
}
.nav__phone:hover { color: var(--gold-lit); }
.nav__phone svg { width: 1rem; height: 1rem; color: var(--gold); flex: none; }

.nav__toggle {
  display: none; background: none; border: 1px solid var(--line-dark);
  width: 2.9rem; height: 2.9rem; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ''; display: block; width: 18px; height: 1.5px;
  background: var(--gold); transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__toggle span::before { position: absolute; translate: 0 -6px; }
.nav__toggle span::after { position: absolute; translate: 0 6px; }
.nav__toggle[aria-expanded='true'] span { background: transparent; }
.nav__toggle[aria-expanded='true'] span::before { translate: 0 0; rotate: 45deg; }
.nav__toggle[aria-expanded='true'] span::after { translate: 0 0; rotate: -45deg; }

@media (max-width: 1080px) {
  .nav__phone { display: none; }
  .nav__links { gap: 1rem; }
  .nav__link { font-size: .7rem; letter-spacing: .1em; }
}
@media (max-width: 900px) {
  .nav__toggle { display: flex; position: relative; }
  .nav__links {
    position: fixed; inset: 4.75rem 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-deep); border-bottom: 1px solid var(--line-dark);
    padding: 1rem var(--gutter) 2rem;
    clip-path: inset(0 0 100% 0); pointer-events: none;
    transition: clip-path .4s var(--ease);
  }
  .nav__links[data-open='true'] { clip-path: inset(0 0 0 0); pointer-events: auto; }
  .nav__link { font-size: .95rem; padding: .95rem 0; border-bottom: 1px solid var(--line-dark); }
  .nav__link::after { display: none; }
  .nav__link[aria-current='page'] { color: var(--gold); }
  .nav__actions .btn { padding: .8rem 1.2rem; font-size: .72rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(92svh, 54rem);
  display: grid; align-items: end;
  background: var(--ink-deep); color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
  /* a single gold line closing the frame at the bottom edge, like the base
     of a portrait frame */
  box-shadow: inset 0 -3px 0 0 var(--gold);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(15,27,46,.94) 0%, rgba(15,27,46,.55) 42%, rgba(15,27,46,.35) 100%),
    linear-gradient(to right, rgba(15,27,46,.6), transparent 60%);
}
.hero__inner { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(6rem, 12vw, 10rem); }
.hero__title { max-width: 18ch; text-wrap: balance; }
.hero__sub { margin-top: 1.6rem; max-width: 46ch; color: #D8DEDA; }

/* short page heroes for interior pages */
.hero--page { min-height: min(62svh, 34rem); }
.hero--page .hero__inner { padding-block: clamp(4rem, 10vw, 7rem) clamp(3rem, 6vw, 5rem); }
.hero--page .hero__title { font-size: clamp(2.4rem, 5.6vw, 4.25rem); }

.breadcrumb {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  font-family: var(--caps); text-transform: uppercase; font-size: .72rem; letter-spacing: .16em;
  color: var(--on-dark-mute); margin-top: 2rem;
}
.breadcrumb a { text-decoration: none; opacity: .8; }
.breadcrumb a:hover { opacity: 1; color: var(--gold); }
.breadcrumb span { color: var(--gold); }

/* ---------- Explore strip ---------- */
/* Four framed photographs overlapping the hero's lower edge — a gallery
   of doorways into the site, each bearing the same gold-cornered frame
   as every other photograph on the site. */
.arcade {
  position: relative;
  margin-top: clamp(-5rem, -7vw, -3.5rem);
  z-index: 5;
}
.arcade__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.75rem, 1.6vw, 1.5rem);
}
.arcade__bay {
  position: relative;
  display: block; text-decoration: none; color: var(--on-dark);
  aspect-ratio: 3 / 4.4;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--gold-dim);
  background: var(--ink);
  isolation: isolate;
}
.arcade__bay img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: scale .9s var(--ease), filter .6s var(--ease);
  filter: saturate(.92);
}
.arcade__bay::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,27,46,.92) 8%, rgba(15,27,46,.15) 62%);
}
.arcade__bay:hover img, .arcade__bay:focus-visible img { scale: 1.07; filter: saturate(1.05); }
.arcade__label {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(1rem, 2vw, 1.6rem);
  text-align: center;
}
.arcade__label .n {
  display: block; font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1.15;
}
.arcade__label .d {
  display: block; margin-top: .45rem;
  font-family: var(--caps); text-transform: uppercase; font-size: .66rem; letter-spacing: .17em;
  color: var(--gold);
}
@media (max-width: 780px) {
  .arcade { margin-top: -2.5rem; }
  .arcade__grid { grid-template-columns: repeat(2, 1fr); }
  .arcade__bay { aspect-ratio: 3 / 4; }
}

/* ---------- Framed figure (reusable) ----------
   Every photograph gets the same quiet treatment: a plain single hairline,
   no corner ornament, no double rule. */
.arched {
  position: relative; overflow: hidden;
  border-radius: 0;
  border: 1px solid var(--gold-dim);
  background: var(--ink-soft);
}
.arched--soft { border-radius: 0; }
.arched img { width: 100%; height: 100%; object-fit: cover; }
.arched--tall { aspect-ratio: 3 / 4.2; }
.arched--portrait { aspect-ratio: 4 / 5; }

/* ---------- Split (text + image) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split--wide-text { grid-template-columns: 1.15fr 1fr; }
/* A paired media column needs more than half the row, or two side-by-side
   photographs just read as one photograph cut in half. */
.split--wide-media { grid-template-columns: 1.6fr 1fr; }
.split__media { position: relative; }
/* Two photographs side by side rather than stacked — for pairs that would
   otherwise run far taller than the text column beside them. */
.split__media--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* A quiet caption below a photograph — what it's a picture of, not another
   heading. */
.figcap { margin-top: .85rem; font-size: .82rem; color: var(--on-light-mute); text-align: center; }
.section--dark .figcap, .section--deep .figcap { color: var(--on-dark-mute); }

/* A larger reading size for a prose block that needs to carry more visual
   weight against a shorter media column beside it. */
.prose--lg { font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); line-height: 1.7; }
@media (max-width: 860px) {
  .split, .split--wide-text, .split--wide-media { grid-template-columns: 1fr; }
  .split--flip .split__media { order: -1; }
}

/* ---------- Stat band ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border-block: 1px solid var(--line-dark);
}
.stat { background: var(--ink); padding: clamp(1.75rem, 3.5vw, 2.75rem) 1rem; text-align: center; }
.stat__n {
  font-family: var(--display); color: var(--gold);
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1;
}
.stat__l {
  margin-left: .5rem; font-family: var(--caps); text-transform: uppercase;
  font-size: .68rem; letter-spacing: .16em; color: var(--on-dark-mute);
}
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .stats { grid-template-columns: 1fr; } }

/* ---------- Cards ---------- */
.grid { display: grid; gap: clamp(1.25rem, 2.6vw, 2.25rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column;
  background: transparent;
}
.card__media {
  position: relative; overflow: hidden;
  border-radius: 0;
  border: 1px solid var(--gold-dim);
  aspect-ratio: 4 / 4.6;
  background: var(--ink-soft);
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: scale .9s var(--ease);
}
.card:hover .card__media img { scale: 1.06; }
.card__tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 4;
  background: var(--maroon); color: var(--gold-lit);
  font-family: var(--caps); text-transform: uppercase; font-size: .64rem; letter-spacing: .15em;
  padding: .45rem .85rem;
}
.card__body { padding-top: 1.35rem; }
.card__title { font-size: clamp(1.25rem, 1.9vw, 1.55rem); }
.card__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  margin-top: .8rem;
  font-family: var(--caps); text-transform: uppercase; font-size: .68rem; letter-spacing: .12em;
  color: var(--on-light-mute);
}
.section--dark .card__meta, .section--deep .card__meta { color: var(--on-dark-mute); }
.card__meta li { display: flex; align-items: center; gap: .4rem; }
.card__meta svg { width: .95rem; height: .95rem; color: var(--gold); flex: none; }
.card__text { margin-top: 1rem; font-size: .95rem; color: var(--on-light-mute); }
.section--dark .card__text, .section--deep .card__text { color: var(--on-dark-mute); }
.card__foot {
  margin-top: 1.35rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line-light);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.section--dark .card__foot, .section--deep .card__foot { border-top-color: var(--line-dark); }
.price { font-family: var(--display); font-size: 1.5rem; color: var(--gold); line-height: 1; }
.price small {
  display: block; font-family: var(--caps); text-transform: uppercase; font-size: .6rem;
  letter-spacing: .14em; color: var(--on-light-mute); margin-top: .4rem;
}
.section--dark .price small, .section--deep .price small { color: var(--on-dark-mute); }

/* ---------- Facility / amenity grid ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
}
.section--dark .tiles, .section--deep .tiles { background: var(--line-dark); border-color: var(--line-dark); }
.tile {
  background: var(--cream);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: .9rem;
  transition: background .35s var(--ease);
}
.section--paper .tile { background: var(--cream-deep); }
.section--dark .tile { background: var(--ink); }
.section--deep .tile { background: var(--ink-deep); }
.tile:hover { background: var(--cream-deep); }
.section--dark .tile:hover { background: var(--ink-soft); }
.section--deep .tile:hover { background: var(--ink); }
.tile svg { width: 2rem; height: 2rem; color: var(--gold); flex: none; }
.tile h3 { font-size: 1.1rem; }
.tile p { font-size: .9rem; color: var(--on-light-mute); }
.section--dark .tile p, .section--deep .tile p { color: var(--on-dark-mute); }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tiles { grid-template-columns: 1fr; } }

/* ---------- Amenity chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line-light);
  padding: .5rem .95rem;
  font-family: var(--caps); text-transform: uppercase; font-size: .68rem; letter-spacing: .12em;
}
.section--dark .chip, .section--deep .chip { border-color: var(--line-dark); }
.chip svg { width: .95rem; height: .95rem; color: var(--gold); flex: none; }

/* ---------- Rail (horizontal scroller) ---------- */
.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 22rem);
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.25rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 3px; }
.rail::-webkit-scrollbar-track { background: var(--line-light); }
.section--dark .rail::-webkit-scrollbar-track { background: var(--line-dark); }
.rail::-webkit-scrollbar-thumb { background: var(--gold); }

/* ---------- Attraction card ---------- */
.spot { display: flex; flex-direction: column; height: 100%; }
.spot__media {
  position: relative; overflow: hidden; border-radius: 0;
  border: 1px solid var(--gold-dim);
  aspect-ratio: 4 / 4.4; background: var(--ink-soft);
}
.spot__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease); }
.spot:hover .spot__media img { scale: 1.06; }
.spot__dist {
  position: absolute; bottom: 1rem; left: 50%; translate: -50% 0; z-index: 4;
  background: var(--maroon); color: var(--gold-lit);
  font-family: var(--caps); text-transform: uppercase; font-size: .64rem; letter-spacing: .14em;
  padding: .4rem .9rem; white-space: nowrap;
}
.spot__body { padding-top: 1.2rem; }
.spot__body h3 { font-size: 1.25rem; }
.spot__body p { margin-top: .7rem; font-size: .92rem; color: var(--on-light-mute); }
.section--dark .spot__body p, .section--deep .spot__body p { color: var(--on-dark-mute); }
.spot__facts {
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line-light);
  display: grid; gap: .4rem;
  font-size: .82rem; color: var(--on-light-mute);
}
.section--dark .spot__facts, .section--deep .spot__facts { border-top-color: var(--line-dark); color: var(--on-dark-mute); }
.spot__facts div { display: flex; justify-content: space-between; gap: 1rem; }
.spot__facts dt { font-family: var(--caps); text-transform: uppercase; font-size: .66rem; letter-spacing: .12em; }
.spot__facts dd { margin: 0; text-align: right; }

/* ---------- Gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.filter {
  background: none; border: 1px solid var(--line-light); cursor: pointer;
  padding: .6rem 1.25rem;
  font-family: var(--caps); text-transform: uppercase; font-size: .72rem; letter-spacing: .13em;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.filter:hover { border-color: var(--gold); color: var(--gold); }
.filter[aria-pressed='true'] { background: var(--ink); color: var(--gold); border-color: var(--ink); }

.mosaic { columns: 3; column-gap: clamp(.75rem, 1.6vw, 1.25rem); }
@media (max-width: 900px) { .mosaic { columns: 2; } }
@media (max-width: 520px) { .mosaic { columns: 1; } }
.shot {
  display: block; width: 100%; padding: 0; cursor: zoom-in;
  border: 1px solid var(--gold-dim);
  background: var(--ink-soft);
  margin-bottom: clamp(.75rem, 1.6vw, 1.25rem);
  break-inside: avoid;
  overflow: hidden; position: relative;
}
.shot img { width: 100%; transition: scale .8s var(--ease), opacity .3s var(--ease); }
.shot:hover img { scale: 1.05; opacity: .88; }
.shot[hidden] { display: none; }
.shot__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem .9rem .9rem; text-align: left;
  font-family: var(--caps); text-transform: uppercase; font-size: .68rem; letter-spacing: .13em;
  color: var(--cream);
  background: linear-gradient(to top, rgba(15,27,46,.88), transparent);
  opacity: 0; transition: opacity .3s var(--ease);
}
.shot:hover .shot__cap, .shot:focus-visible .shot__cap { opacity: 1; }

/* Lightbox */
/* Only style the open state — a bare `display: grid` would defeat the UA's
   `dialog:not([open]) { display: none }` and leave the lightbox always visible. */
.lightbox[open] {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
}
.lightbox {
  width: 100%; max-width: 100%; max-height: 100%;
  background: rgba(15,27,46,.96);
  color: var(--on-dark);
  padding: clamp(1rem, 4vw, 3rem);
  border: 0;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(15,27,46,.9); }
.lightbox img { max-width: 100%; max-height: 82svh; object-fit: contain; }
.lightbox__cap {
  margin-top: 1.25rem; text-align: center;
  font-family: var(--caps); text-transform: uppercase; font-size: .78rem; letter-spacing: .14em;
  color: var(--gold);
}
.lightbox__close, .lightbox__nav {
  position: absolute; background: none; border: 1px solid var(--line-dark);
  color: var(--cream); cursor: pointer;
  width: 3rem; height: 3rem; display: grid; place-items: center;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--gold); color: var(--ink-deep); }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__nav { top: 50%; translate: 0 -50%; }
.lightbox__nav--prev { left: 1.25rem; }
.lightbox__nav--next { right: 1.25rem; }
.lightbox svg { width: 1.1rem; height: 1.1rem; }

/* ---------- Feature band (Moti Mahal etc.) ---------- */
.band { position: relative; overflow: hidden; isolation: isolate; }
.band__bg { position: absolute; inset: 0; z-index: -2; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(15,27,46,.96) 30%, rgba(15,27,46,.72) 62%, rgba(15,27,46,.5));
}
.rating {
  display: inline-flex; align-items: center; gap: .7rem;
  border: 1px solid var(--line-dark); padding: .65rem 1.1rem; margin-top: 1.75rem;
}
.rating strong { font-family: var(--body); font-weight: 700; font-size: 1.2rem; color: var(--gold); line-height: 1; }
.rating span { font-family: var(--caps); text-transform: uppercase; font-size: .68rem; letter-spacing: .13em; color: var(--on-dark-mute); }
.rating svg { width: .95rem; height: .95rem; color: var(--gold); }

/* ---------- Package / offer ---------- */
.offer {
  border: 1px solid var(--line-dark);
  border-top: 3px solid var(--maroon);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--ink-soft);
}
.offer__price { font-family: var(--display); font-size: clamp(2.25rem, 5vw, 3.25rem); color: var(--gold); line-height: 1; }
.offer__price small { font-family: var(--caps); text-transform: uppercase; font-size: .68rem; letter-spacing: .14em; color: var(--on-dark-mute); display: block; margin-top: .6rem; }
.offer__list { margin-top: 1.75rem; display: grid; gap: .9rem; }
.offer__list li { display: flex; gap: .85rem; align-items: flex-start; font-size: .95rem; color: var(--on-dark-mute); }
.offer__list svg { width: 1.05rem; height: 1.05rem; color: var(--gold); flex: none; margin-top: .35rem; }
.offer__list strong { color: var(--on-dark); font-weight: 400; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.detail { display: grid; gap: 1.75rem; }
.detail__row { display: flex; gap: 1.1rem; align-items: flex-start; }
.detail__row svg { width: 1.35rem; height: 1.35rem; color: var(--gold); flex: none; margin-top: .3rem; }
.detail__row h3 { font-family: var(--caps); text-transform: uppercase; font-size: .72rem; letter-spacing: .16em; color: var(--gold); }
.detail__row a, .detail__row p { display: block; margin-top: .5rem; text-decoration: none; line-height: 1.6; }
.detail__row a:hover { color: var(--gold); }

.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .55rem; }
.field label {
  font-family: var(--caps); text-transform: uppercase; font-size: .7rem; letter-spacing: .15em; color: var(--on-light-mute);
}
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 1rem; font-weight: 300;
  color: var(--on-light);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line-light);
  padding: .7rem 0;
  border-radius: 0;
  transition: border-color .3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--gold);
}
.field textarea { resize: vertical; min-height: 6rem; }
.field select { appearance: none; cursor: pointer; }
.field--select { position: relative; }
.field--select::after {
  content: ''; position: absolute; right: .2rem; bottom: 1.4rem;
  width: .5rem; height: .5rem; border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold); rotate: 45deg; pointer-events: none;
}
.form__note { font-size: .82rem; color: var(--on-light-mute); }

.map {
  width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line-light);
  filter: grayscale(1) contrast(1.05);
  transition: filter .5s var(--ease);
}
.map:hover { filter: grayscale(0); }

/* ---------- Footer ---------- */
.footer { background: var(--ink-deep); color: var(--on-dark); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h3 {
  font-family: var(--caps); text-transform: uppercase; font-size: .72rem; letter-spacing: .18em;
  color: var(--gold); margin-bottom: 1.35rem;
}
.footer__list { display: grid; gap: .75rem; font-size: .92rem; }
.footer__list a { text-decoration: none; color: var(--on-dark-mute); transition: color .25s var(--ease); }
.footer__list a:hover { color: var(--gold); }
.footer__blurb { margin-top: 1.5rem; font-size: .92rem; color: var(--on-dark-mute); max-width: 34ch; }
.social { display: flex; gap: .6rem; margin-top: 1.75rem; }
.social a {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border: 1px solid var(--line-dark); color: var(--on-dark-mute);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink-deep); }
.social svg { width: 1.05rem; height: 1.05rem; }
.footer__base {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.75rem;
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .82rem; color: var(--on-dark-mute);
}
.footer__base a { text-decoration: none; }
.footer__base a:hover { color: var(--gold); }

/* ---------- Floating WhatsApp ---------- */
.wa {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: #1FA855; color: #fff;
  box-shadow: 0 8px 28px rgba(15,27,46,.35);
  transition: scale .3s var(--ease);
}
.wa:hover { scale: 1.08; }
.wa svg { width: 1.6rem; height: 1.6rem; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; translate: 0 1.75rem; transition: opacity .8s var(--ease), translate .8s var(--ease); }
.reveal.is-in { opacity: 1; translate: 0 0; }
.reveal[data-delay='1'] { transition-delay: .1s; }
.reveal[data-delay='2'] { transition-delay: .2s; }
.reveal[data-delay='3'] { transition-delay: .3s; }

/* Hero load sequence: the arch of light opens, then the words arrive */
@keyframes riseIn { from { opacity: 0; translate: 0 1.5rem; } to { opacity: 1; translate: 0 0; } }
.hero__inner > * { animation: riseIn .9s var(--ease) both; }
.hero__inner > *:nth-child(1) { animation-delay: .15s; }
.hero__inner > *:nth-child(2) { animation-delay: .3s; }
.hero__inner > *:nth-child(3) { animation-delay: .45s; }
.hero__inner > *:nth-child(4) { animation-delay: .6s; }

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

/* ---------- Heritage catalogue (Experiences) ----------
   The brochure presents these as a numbered top-ten, so the numbering here
   carries real information — it is the guide's own running order. */
.catalogue { display: grid; grid-template-columns: 1fr 1.75fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .catalogue { grid-template-columns: 1fr; } }
.catalogue__aside { position: sticky; top: 7rem; }
@media (max-width: 900px) { .catalogue__aside { position: static; } }

.entry {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-light);
}
.section--dark .entry, .section--deep .entry { border-top-color: var(--line-dark); }
.entry:first-child { border-top: 0; padding-top: 0; }
.entry__n {
  font-family: var(--display); color: var(--gold); line-height: 1;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  min-width: 2.5ch;
}
.entry__body h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.entry__body p { margin-top: .85rem; color: var(--on-light-mute); }
.section--dark .entry__body p, .section--deep .entry__body p { color: var(--on-dark-mute); }
.entry__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .85rem 1.5rem; margin-top: 1.35rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line-light);
}
.section--dark .entry__facts, .section--deep .entry__facts { border-top-color: var(--line-dark); }
.entry__facts dt { font-family: var(--caps); text-transform: uppercase; font-size: .62rem; letter-spacing: .15em; color: var(--gold); }
.entry__facts dd { margin: .3rem 0 0; font-size: .88rem; color: var(--on-light-mute); }
.section--dark .entry__facts dd, .section--deep .entry__facts dd { color: var(--on-dark-mute); }
.entry__media { margin-top: 1.5rem; }

/* ---------- Manuscript rail ----------
   The gutters either side of the 96rem content column, on very wide desktop
   glass only. Left: running wayfinding text that travels as the page
   scrolls, like a companion to the thumb on the right. Right: it *is* the
   scrollbar — the native one is hidden at this breakpoint (see html.rail-
   scrollbar in the reset) and this hairline-with-ticks replaces it,
   draggable and click-to-jump (wired in site.js).
   Namespaced `.margin-rail` rather than `.rail` — the latter already names
   the horizontal-scroller component above and would silently collide with
   it. Both flush to the true edge: the right used to sit under the native
   scrollbar and get clipped by it, but now there's nothing there to clip
   against, so both sides read as one deliberate frame again. */
.margin-rail { display: none; }

@media (min-width: 1900px) {
  html.rail-scrollbar { scrollbar-width: none; }
  html.rail-scrollbar::-webkit-scrollbar { display: none; }

  .margin-rail {
    display: block; position: fixed; top: 0; bottom: 0; width: 3.5rem;
    z-index: 40; pointer-events: none;
  }
  .margin-rail--left { left: 0; }
  .margin-rail--right {
    right: 0; pointer-events: auto; cursor: pointer; touch-action: none;
  }

  /* A plain CSS marquee — no scroll-position math to get wrong across
     browsers. The text content is the phrase duplicated back-to-back
     (see the HTML), so translating by exactly -50% of its own height
     loops seamlessly: the point it snaps back from is pixel-identical to
     the point it snaps back to. Runs continuously, independent of scroll;
     `prefers-reduced-motion` already forces it to a single, near-instant
     pass via the global rule below. */
  .margin-rail__text {
    position: absolute; left: 50%; top: 3rem;
    translate: -50% -50%;
    writing-mode: vertical-rl; text-orientation: mixed;
    font-family: var(--caps); text-transform: uppercase;
    font-size: .64rem; letter-spacing: .32em;
    color: var(--gold-dim); opacity: .55; white-space: nowrap;
    animation: railMarquee 7s linear infinite;
  }
  @keyframes railMarquee {
    from { translate: -50% -50%; }
    to   { translate: -50% 0%; }
  }

  .margin-rail__track {
    position: absolute; left: 50%; top: 3rem; bottom: 3rem; width: 2px;
    background: var(--line-light); translate: -50% 0;
    transition: background .25s var(--ease);
  }
  .margin-rail--right:hover .margin-rail__track,
  .margin-rail--right:active .margin-rail__track { background: var(--gold-dim); }
  .margin-rail__fill {
    position: absolute; left: 50%; top: 3rem; width: 2px; height: 0;
    background: var(--gold); translate: -50% 0;
  }
  /* Each tick is a zero-size anchor point (its `top` set inline by JS as a
     % of this track) — the dot and label are positioned off that point
     independently, so the dot always sits exactly on the hairline no
     matter how wide its label is. */
  .margin-rail__ticks { position: absolute; left: 50%; top: 3rem; bottom: 3rem; }
  .margin-rail__tick { position: absolute; left: 0; top: 0; width: 0; height: 0; }
  .margin-rail__tick::before {
    content: ''; position: absolute; left: 0; top: 0; translate: -50% -50%;
    width: .4rem; height: .4rem; border-radius: 50%;
    background: var(--cream); border: 1px solid var(--line-light);
    transition: background .3s var(--ease), border-color .3s var(--ease), scale .3s var(--ease);
  }
  .margin-rail__tick-label {
    position: absolute; left: .7rem; top: 0; translate: 0 -50%;
    max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--caps); text-transform: uppercase; font-size: .6rem; letter-spacing: .1em;
    color: var(--on-light-mute); white-space: nowrap;
    opacity: 0; transition: opacity .3s var(--ease), color .3s var(--ease);
  }
  .margin-rail--right .margin-rail__tick-label { left: auto; right: .7rem; text-align: right; }
  .margin-rail__tick.is-active::before { background: var(--gold); border-color: var(--gold); scale: 1.5; }
  .margin-rail__tick.is-active .margin-rail__tick-label { color: var(--gold-dim); opacity: 1; }
}

/* short viewports (laptop lids, browser zoomed out) — the rail crowds a
   page that doesn't have the vertical room to spare */
@media (min-width: 1900px) and (max-height: 620px) { .margin-rail { display: none; } }

/* ---------- Print ---------- */
@media print {
  .nav, .wa, .hero__media, .footer { display: none; }
  body { background: #fff; color: #000; }
}