/* ============================================================================
   HOTEL GRAND PARAGON PALACE — style.css
   ----------------------------------------------------------------------------
   Design tokens
     Deodar Ink   #0B1611   ground
     Pine Shadow  #10201A   alternate panels
     Temple Gilt  #C9A24B   primary accent, rendered as a metallic gradient
     Kangra Madder#8E2B34   wedding / celebration accent
     Valley Mist  #E8EAE2   light sections
   Type
     Marcellus                 display — Roman inscriptional, carved feel
     Jost                      body + UI — geometric, grand-hotel signage
     Tiro Devanagari Hindi     venue names in their own script
   Signature
     The cusped arch. SVG clipPath (#archOgee / #archDome), plus a gilt
     hairline arch that draws itself with stroke-dashoffset.

   Colour contract: every section sets --fg / --fg-mute / --line locally, and
   children only ever read those. No element-level colour overrides, so
   section variants never fight each other on specificity.
   ========================================================================= */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
:root{
  color-scheme: light dark;

  --ink:      #0B1611;
  --ink-2:    #10201A;
  --ink-3:    #16291F;
  --gilt:     #C9A24B;
  --gilt-lt:  #F0DCA4;
  --gilt-dk:  #8F6A22;
  --madder:   #8E2B34;
  --madder-lt:#A9394A;
  --mist:     #E8EAE2;
  --mist-2:   #DBDFD2;
  --stone:    #9AA79C;
  --slate:    #55635A;

  --gilt-metal: linear-gradient(104deg,
                  var(--gilt-dk) 0%, var(--gilt) 22%, var(--gilt-lt) 44%,
                  var(--gilt) 62%, var(--gilt-dk) 100%);

  --font-display: "Marcellus", "Times New Roman", serif;
  --font-body:    "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-deva:    "Tiro Devanagari Hindi", "Nirmala UI", serif;

  --shell:  1240px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --pad-y:  clamp(4.5rem, 9vw, 8.5rem);
  --r:      2px;

  --ease:   cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);

  --fg:      var(--mist);
  --fg-mute: var(--stone);
  --line:    rgba(201,162,75,.20);
}

/* ── 2. RESET ────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; }
html:focus-within{ scroll-behavior:smooth; }

body{
  background:var(--ink);
  color:var(--fg);
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(.97rem,.35vw + .88rem,1.06rem);
  line-height:1.72;
  letter-spacing:.006em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }

img,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
table{ border-collapse:collapse; width:100%; }
address{ font-style:normal; }
.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* Author `display` rules outrank the UA sheet's [hidden] styling, so the
   modal, lightbox and form success panels need this to actually stay hidden. */
[hidden]{ display:none !important; }

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

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:.6rem; left:50%; translate:-50% -160%;
  z-index:400; background:var(--gilt); color:#141004;
  padding:.6rem 1.2rem; font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; transition:translate .25s var(--ease);
}
.skip-link:focus{ translate:-50% 0; }

/* ── 3. TYPE ─────────────────────────────────────────────────────────────── */
.h2,.h3,.h4,h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.005em;
  text-wrap:balance;
}
.h2{ font-size:clamp(1.95rem,3.3vw + .6rem,3.5rem); }
.h3{ font-size:clamp(1.4rem,1.4vw + .95rem,2rem); }
.h4{ font-size:clamp(1.12rem,.7vw + .9rem,1.4rem); }
.h2 em{ font-style:normal; color:var(--gilt); }

.eyebrow{
  display:flex; align-items:center; gap:.85rem;
  font-size:.7rem; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gilt);
}
.eyebrow__rule{
  width:clamp(1.8rem,4vw,3.2rem); height:1px; flex:none;
  background:linear-gradient(90deg,transparent,var(--gilt));
}
.sec-head--center .eyebrow,
.reviews__intro .eyebrow{ justify-content:center; }
.reviews__intro .eyebrow{ justify-content:flex-start; }

.gilt-text{
  background:var(--gilt-metal);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.deva{
  font-family:var(--font-deva);
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1; color:var(--gilt); opacity:.85;
  margin-bottom:.5rem;
}
.deva--sm{ font-size:1.5rem; margin-bottom:.15rem; opacity:.7; }

.lede{ font-size:clamp(1.03rem,.5vw + .92rem,1.2rem); color:var(--fg-mute); max-width:46ch; }
.prose p + p{ margin-top:1.05rem; }
.prose{ color:var(--fg-mute); max-width:56ch; }
.muted{ color:var(--fg-mute); }
.fineprint{
  margin-top:2.4rem; font-size:.85rem; color:var(--fg-mute);
  padding-top:1.1rem; border-top:1px solid var(--line);
}
.plain li + li{ margin-top:.4rem; }
.plain a{ border-bottom:1px solid var(--line); transition:border-color .25s, color .25s; }
.plain a:hover{ color:var(--gilt); border-color:var(--gilt); }

/* ── 4. LAYOUT ───────────────────────────────────────────────────────────── */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }

.section{
  --bg:var(--ink);
  --fg:var(--mist);
  --fg-mute:var(--stone);
  --line:rgba(201,162,75,.20);
  position:relative;
  padding-block:var(--pad-y);
  background:var(--bg);
  color:var(--fg);
}
.section--ink2{ --bg:var(--ink-2); }
.section--mist{
  --bg:var(--mist);
  --fg:#152420;
  --fg-mute:var(--slate);
  --line:rgba(21,36,32,.16);
}

.sec-head{ max-width:62ch; margin-bottom:clamp(2.5rem,4vw,4rem); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head .h2{ margin-top:1rem; }
.sec-head__lede{ margin-top:1.2rem; color:var(--fg-mute); }

/* ── 5. THE ARCH (signature) ─────────────────────────────────────────────── */
.arch{
  position:relative;
  overflow:hidden;
  border-radius:50% 50% 0 0 / 34% 34% 0 0;   /* fallback if clip-path is unsupported */
  background:linear-gradient(160deg,var(--ink-3),var(--ink));
}
.arch--ogee{ clip-path:url(#archOgee); }
.arch--dome{ clip-path:url(#archDome); }
.arch img{ width:100%; height:100%; object-fit:cover; }
/* clip-path eats outer box-shadows, so depth is added from the inside:
   a gilt hairline that follows the arch, plus a soft floor vignette. */
.arch::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(201,162,75,.30),
    inset 0 -90px 110px -70px rgba(6,14,10,.95);
}

.draw-arch{
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  transition:stroke-dashoffset 2.4s var(--ease) .2s;
}
.draw-arch.is-drawn{ stroke-dashoffset:0; }

.kenburns{ animation:kb 26s var(--ease-io) infinite alternate; transform-origin:52% 42%; }
@keyframes kb{ from{ scale:1; } to{ scale:1.11; } }

/* fallback tile used if a stock photo fails to load */
.img-fallback{
  position:absolute; inset:0;
  display:grid; place-content:center; gap:.6rem; text-align:center;
  padding:1.5rem;
  background:
    repeating-linear-gradient(60deg,transparent 0 20px,rgba(201,162,75,.32) 20px 21px),
    repeating-linear-gradient(-60deg,transparent 0 20px,rgba(201,162,75,.32) 20px 21px),
    linear-gradient(160deg,#17301F,#0B1611);
  color:var(--gilt);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
}
.img-fallback svg{ width:34px; margin-inline:auto; opacity:.7; }

/* ── 6. BUTTONS ──────────────────────────────────────────────────────────── */
.btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  padding:1rem 1.9rem;
  font-size:.76rem; font-weight:500; letter-spacing:.19em; text-transform:uppercase;
  border-radius:var(--r); border:1px solid transparent;
  overflow:hidden; cursor:pointer;
  transition:color .35s var(--ease), border-color .35s var(--ease), translate .35s var(--ease);
}
.btn--sm{ padding:.72rem 1.25rem; font-size:.68rem; letter-spacing:.16em; }
.btn--full{ width:100%; }
.btn__arrow{ width:20px; flex:none; transition:translate .35s var(--ease); }
.btn:hover .btn__arrow{ translate:5px 0; }
.btn:active{ translate:0 1px; }

.btn--gilt{ background:var(--gilt-metal); color:#160F02; background-size:220% 100%; background-position:0% 0%;
            transition:background-position .6s var(--ease), translate .35s var(--ease), box-shadow .35s var(--ease); }
.btn--gilt:hover{ background-position:100% 0%; box-shadow:0 10px 30px -12px rgba(201,162,75,.65); }

.btn--madder{ background:var(--madder); color:#F6E9E5; }
.btn--madder:hover{ background:var(--madder-lt); box-shadow:0 10px 30px -14px rgba(142,43,52,.8); }

.btn--outline,.btn--ghost{ border-color:var(--line); color:var(--fg); }
.btn--outline::before,.btn--ghost::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--gilt-metal); scale:1 0; transform-origin:bottom;
  transition:scale .4s var(--ease);
}
.btn--outline:hover,.btn--ghost:hover{ color:#160F02; border-color:transparent; }
.btn--outline:hover::before,.btn--ghost:hover::before{ scale:1 1; }

.linkish{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:0; font-size:.74rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gilt);
  border-bottom:1px solid rgba(201,162,75,.35);
  padding-bottom:.25rem; cursor:pointer;
  transition:border-color .3s, gap .3s var(--ease);
}
.linkish svg{ width:18px; flex:none; }
.linkish:hover{ border-color:var(--gilt); gap:.95rem; }

/* ── 7. PRELOADER + PROGRESS ─────────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:500;
  display:grid; place-items:center;
  background:var(--ink);
  transition:clip-path 1s var(--ease-io), opacity .5s .5s;
  clip-path:inset(0 0 0 0);
}
.loader.is-gone{ clip-path:inset(0 0 100% 0); pointer-events:none; }
.loader__inner{ text-align:center; }
.loader__arch{ width:clamp(74px,9vw,104px); margin:0 auto 1.6rem; }
.loader__path{ stroke-dasharray:640; stroke-dashoffset:640; animation:drawIn 1.5s var(--ease) forwards; }
@keyframes drawIn{ to{ stroke-dashoffset:0; } }

.loader__word{
  font-family:var(--font-display);
  font-size:clamp(1rem,2.2vw,1.5rem);
  letter-spacing:.1em; color:var(--mist);
  opacity:0; animation:trackIn 1.5s var(--ease) .45s forwards;
}
.loader__sub{
  margin-top:.6rem; font-size:.63rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gilt);
  opacity:0; animation:fadeUp .9s var(--ease) 1s forwards;
}
@keyframes trackIn{ from{ opacity:0; letter-spacing:.55em; } to{ opacity:1; letter-spacing:.1em; } }
@keyframes fadeUp{ from{ opacity:0; translate:0 8px; } to{ opacity:.85; translate:0 0; } }

.scroll-progress{
  position:fixed; top:0; left:0; z-index:210;
  height:2px; width:100%;
  background:var(--gilt-metal);
  transform-origin:0 50%; scale:0 1;
}

/* ── 8. HEADER ───────────────────────────────────────────────────────────── */
.site-head{
  position:fixed; inset:0 0 auto; z-index:200;
  translate:0 0;
  transition:background .4s var(--ease), box-shadow .4s var(--ease),
             backdrop-filter .4s, translate .45s var(--ease);
}
.site-head__bar{
  display:flex; align-items:center; gap:clamp(.7rem,2vw,2rem);
  padding-block:clamp(.85rem,1.6vw,1.35rem);
  transition:padding-block .4s var(--ease);
}
.site-head.is-stuck{
  background:rgba(9,19,15,.86);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 var(--line), 0 20px 40px -30px #000;
}
.site-head.is-stuck .site-head__bar{ padding-block:.6rem; }
.site-head.is-hidden{ translate:0 -105%; }
.site-head{ translate:0 0; }

.brand{ display:flex; align-items:center; gap:.75rem; flex:none; }
.brand__mark{ width:26px; color:var(--gilt); flex:none; }
.brand__mark--lg{ width:42px; }
.brand__mark svg{ width:100%; overflow:visible; }
.brand__name{
  display:block; font-family:var(--font-display);
  font-size:clamp(1rem,1vw + .8rem,1.22rem);
  letter-spacing:.05em; line-height:1.05; color:var(--mist);
}
.brand__sub{
  display:block; font-size:.56rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gilt); margin-top:.2rem;
}

.nav{ margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:clamp(.6rem,1.4vw,1.5rem); }
.nav__list > li{ position:relative; }
.nav__list a,.nav__toggle{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.45rem 0; font-size:.75rem; font-weight:400;
  letter-spacing:.1em; color:var(--mist); white-space:nowrap;
  transition:color .28s;
}
.nav__list > li > a::after,.nav__toggle::after{
  content:""; position:absolute; left:0; bottom:.1rem;
  width:100%; height:1px; background:var(--gilt);
  scale:0 1; transform-origin:left; transition:scale .35s var(--ease);
}
.nav__list > li > a:hover::after,
.nav__list > li > a.is-active::after,
.nav__has-sub:hover .nav__toggle::after{ scale:1 1; }
.nav__list a:hover,.nav__toggle:hover,.nav__list a.is-active{ color:var(--gilt); }
.nav__chev{ width:9px; transition:rotate .3s var(--ease); }
.nav__has-sub:hover .nav__chev,.nav__toggle[aria-expanded="true"] .nav__chev{ rotate:180deg; }

.nav__sub{
  position:absolute; top:calc(100% + .8rem); left:-1rem;
  min-width:236px; padding:.6rem;
  background:rgba(11,22,17,.97); backdrop-filter:blur(12px);
  border:1px solid var(--line);
  opacity:0; visibility:hidden; translate:0 -8px;
  transition:opacity .28s var(--ease), translate .28s var(--ease), visibility .28s;
}
.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub,
.nav__sub.is-open{ opacity:1; visibility:visible; translate:0 0; }
.nav__sub a{ display:block; padding:.55rem .8rem; font-size:.78rem; letter-spacing:.04em; }
.nav__sub a::after{ display:none; }
.nav__sub a:hover{ background:rgba(201,162,75,.1); }

.site-head__act{ display:flex; align-items:center; gap:clamp(.5rem,1.2vw,1.1rem); flex:none; }
.link-phone{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.75rem; letter-spacing:.06em; color:var(--stone);
  transition:color .28s;
}
.link-phone svg{ width:14px; color:var(--gilt); }
.link-phone:hover{ color:var(--gilt); }

.burger{ display:none; width:26px; height:20px; position:relative; }
.burger span{
  position:absolute; left:0; height:1.5px; width:100%; background:var(--mist);
  transition:translate .3s var(--ease), rotate .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1){ top:2px; }
.burger span:nth-child(2){ top:9px; }
.burger span:nth-child(3){ top:16px; }
.burger[aria-expanded="true"] span:nth-child(1){ translate:0 7px; rotate:45deg; }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ translate:0 -7px; rotate:-45deg; }

/* ── 9. MOBILE DRAWER ────────────────────────────────────────────────────── */
.drawer{ position:fixed; inset:0; z-index:300; }
.drawer::before{
  content:""; position:absolute; inset:0;
  background:rgba(5,11,9,.6); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .4s;
}
.drawer.is-open::before{ opacity:1; }
.drawer__panel{
  position:absolute; inset:0 0 0 auto;
  width:min(88vw,400px); height:100%;
  padding:clamp(1.5rem,4vw,2.4rem);
  background:var(--ink-2);
  border-left:1px solid var(--line);
  overflow-y:auto;
  display:flex; flex-direction:column;
  translate:100% 0; transition:translate .5s var(--ease-io);
}
.drawer.is-open .drawer__panel{ translate:0 0; }
.drawer__close{ position:absolute; top:1rem; right:1.2rem; font-size:2rem; line-height:1; color:var(--gilt); }
.drawer__eyebrow{
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gilt); margin-bottom:1.8rem; padding-right:2.5rem;
}
.drawer__list{ display:grid; gap:.15rem; }
.drawer__list a{
  display:block; padding:.7rem 0;
  font-family:var(--font-display); font-size:1.28rem;
  border-bottom:1px solid rgba(201,162,75,.1);
  transition:color .25s, padding-left .3s var(--ease);
}
.drawer__list a:hover{ color:var(--gilt); padding-left:.5rem; }
.drawer__foot{ margin-top:auto; padding-top:1.8rem; display:grid; gap:.6rem; }
.drawer__addr{ font-size:.8rem; color:var(--stone); text-align:center; margin-top:.5rem; }

/* ── 10. HERO ────────────────────────────────────────────────────────────── */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding-top:clamp(8rem,15vh,11.5rem);
  padding-bottom:clamp(3rem,5vw,4.5rem);
  background:
    radial-gradient(120% 90% at 78% 8%, #1B3428 0%, transparent 58%),
    radial-gradient(90% 70% at 12% 96%, #14261D 0%, transparent 60%),
    var(--ink);
}
.hero__jaali{
  position:absolute; inset:0; z-index:-2; pointer-events:none; opacity:.075;
  background-image:
    repeating-linear-gradient(60deg,transparent 0 26px,var(--gilt) 26px 27px),
    repeating-linear-gradient(-60deg,transparent 0 26px,var(--gilt) 26px 27px),
    repeating-linear-gradient(0deg,transparent 0 45px,rgba(201,162,75,.6) 45px 46px);
  mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
}
.hero__mist{
  position:absolute; inset:auto -10% -20% -10%; height:60%; z-index:-1;
  pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%, rgba(232,234,226,.11), transparent 70%);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{ from{ translate:-3% 0; scale:1; } to{ translate:3% -4%; scale:1.08; } }

.hero__grid{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1.06fr .94fr; align-items:center;
}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(2.8rem,7.4vw,5.9rem);
  line-height:.99; letter-spacing:-.018em;
  margin:1.3rem 0 1.5rem;
}
.hero__title span{ display:block; }
.hero__lede{ max-width:47ch; color:var(--stone); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.1rem; }

.hero__stats{
  display:flex; flex-wrap:wrap; gap:clamp(1.4rem,3vw,2.8rem);
  margin-top:clamp(2.2rem,4vw,3.2rem);
  padding-top:1.6rem; border-top:1px solid var(--line);
}
.hero__stats dt{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gilt); margin-bottom:.3rem;
}
.hero__stats dd{ font-family:var(--font-display); font-size:1.55rem; line-height:1; }
.hero__stats small{ font-size:.62rem; letter-spacing:.1em; color:var(--stone); font-family:var(--font-body); }

.hero__stage{ position:relative; }
.hero__outline{
  position:absolute; inset:-4% -5% -6% -5%; width:110%; height:110%;
  pointer-events:none; z-index:2;
}
.hero__arch{ aspect-ratio:41/56; }
.hero__badge{
  position:absolute; z-index:3; left:-6%; bottom:8%;
  padding:1rem 1.35rem;
  background:rgba(9,19,15,.9); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-left:2px solid var(--gilt);
  display:grid; gap:.1rem; max-width:210px;
}
.hero__badge-deva{ font-family:var(--font-deva); font-size:1.3rem; color:var(--gilt); line-height:1.1; }
.hero__badge strong{ font-family:var(--font-display); font-weight:400; font-size:1rem; }
.hero__badge span:last-child{ font-size:.7rem; letter-spacing:.06em; color:var(--stone); }

/* availability bar */
.bookbar{
  position:relative; margin-top:clamp(2.5rem,5vw,4rem);
  display:grid; gap:1px;
  grid-template-columns:repeat(4,1fr) auto;
  background:var(--line);
  border:1px solid var(--line);
  box-shadow:0 30px 70px -50px #000;
}
.bookbar__field{ background:rgba(15,30,24,.94); padding:.9rem 1.15rem; display:grid; gap:.2rem; }
.bookbar__field label{
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gilt);
}
.bookbar__field input,.bookbar__field select{
  border:0; background:none; padding:0; width:100%;
  font-size:.92rem; letter-spacing:.02em; color:var(--mist);
  cursor:pointer;
}
.bookbar__field select{ appearance:none; }
.bookbar__field input::-webkit-calendar-picker-indicator{ filter:invert(1) sepia(1) saturate(4) hue-rotate(5deg); cursor:pointer; }
.bookbar__submit{ background:rgba(15,30,24,.94); display:grid; padding:0; }
.bookbar__submit .btn{ height:100%; border-radius:0; }
.bookbar__note{
  grid-column:1/-1; background:rgba(15,30,24,.94);
  padding:.7rem 1.15rem; font-size:.73rem; color:var(--stone);
}
.bookbar__note.is-warn{ color:#E9B7B7; }

/* ── 11. RIBBON MARQUEE ──────────────────────────────────────────────────── */
.ribbon{
  overflow:hidden; padding-block:.95rem;
  background:var(--gilt-metal); color:#160F02;
  border-block:1px solid rgba(0,0,0,.12);
}
.ribbon__track{
  display:flex; align-items:center; gap:2.2rem; width:max-content;
  animation:slide 46s linear infinite;
}
.ribbon:hover .ribbon__track{ animation-play-state:paused; }
.ribbon__track span{
  font-size:.7rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  white-space:nowrap;
}
.ribbon__track i{ font-size:.6rem; opacity:.55; }
@keyframes slide{ to{ translate:-50% 0; } }

/* ── 12. ABOUT ───────────────────────────────────────────────────────────── */
.about{
  display:grid; gap:clamp(2.5rem,5vw,5rem);
  grid-template-columns:.88fr 1.12fr; align-items:center;
}
.about__media{ position:relative; }
.about__media .arch{ aspect-ratio:3/4; }
.about__inset{
  position:absolute; right:-8%; bottom:-8%; width:52%;
  aspect-ratio:1; overflow:hidden;
  border:6px solid var(--mist);
  box-shadow:0 30px 60px -35px rgba(11,22,17,.6);
}
.about__inset img{ width:100%; height:100%; object-fit:cover; }
.about__copy .h2{ margin:1rem 0 1.6rem; }

.counters{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.6rem clamp(1rem,2vw,2rem);
  margin-top:clamp(2.2rem,4vw,3rem);
  padding-top:1.8rem; border-top:1px solid var(--line);
}
.counters__n{
  display:block; font-family:var(--font-display);
  font-size:clamp(1.6rem,2.2vw + .5rem,2.3rem); line-height:1;
  color:var(--gilt);
  font-variant-numeric:tabular-nums;
}
.counters__l{
  display:block; margin-top:.4rem;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-mute);
}

/* ── 13. ROOMS ───────────────────────────────────────────────────────────── */
.rooms{ display:grid; gap:clamp(1.6rem,3vw,2.6rem); grid-template-columns:repeat(3,1fr); }
.room{ display:flex; flex-direction:column; }
.room__fig{ aspect-ratio:4/5; margin-bottom:1.5rem; }
.room__fig img{ transition:scale 1.1s var(--ease); }
.room:hover .room__fig img{ scale:1.06; }
.room__kind{
  display:flex; align-items:center; gap:.7rem;
  font-size:.63rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gilt);
}
.room__flag{
  padding:.2rem .55rem; background:rgba(142,43,52,.9); color:#F7E9E7;
  font-size:.55rem; letter-spacing:.16em;
}
.room__body{ display:flex; flex-direction:column; flex:1; }
.room__body .h3{ margin:.6rem 0 .8rem; }
.room__body > p{ color:var(--fg-mute); font-size:.95rem; }
.room__body .linkish{ margin-top:auto; align-self:flex-start; }
/* the signature room gets a brighter gilt ring rather than a clipped shadow */
.room--feature .room__fig::after{
  box-shadow:
    inset 0 0 0 1px rgba(201,162,75,.65),
    inset 0 -90px 110px -70px rgba(6,14,10,.95);
}

.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1.2rem 0 1.6rem; }
.tags li{
  padding:.32rem .7rem; font-size:.66rem; letter-spacing:.1em;
  border:1px solid var(--line); color:var(--fg-mute);
}
.tags--gilt li{ border-color:rgba(201,162,75,.4); color:var(--gilt); }

.rates-note{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem;
  margin-top:clamp(2.5rem,4vw,3.5rem); padding-top:1.5rem;
  border-top:1px solid var(--line); font-size:.92rem; color:var(--fg-mute);
}

/* ── 14. DINING ──────────────────────────────────────────────────────────── */
.dine{ display:grid; gap:clamp(1.6rem,3vw,2.4rem); grid-template-columns:1.35fr .65fr; }
.dine__main{ display:flex; flex-direction:column; border:1px solid var(--line); }
.dine__fig{ overflow:hidden; aspect-ratio:16/9; }
.dine__fig img{ width:100%; height:100%; object-fit:cover; transition:scale 1.2s var(--ease); }
.dine__main:hover .dine__fig img{ scale:1.05; }
.dine__body{ padding:clamp(1.4rem,2.5vw,2.2rem); }
.dine__body .h3{ margin-bottom:.9rem; }
.dine__body p{ color:var(--fg-mute); }
.dine__side{ display:grid; gap:clamp(1rem,2vw,1.4rem); align-content:start; }

.minicard{
  padding:clamp(1.2rem,2vw,1.6rem);
  border:1px solid var(--line);
  background:rgba(201,162,75,.025);
  transition:border-color .35s, background .35s, translate .35s var(--ease);
}
.minicard:hover{ border-color:rgba(201,162,75,.45); background:rgba(201,162,75,.05); translate:0 -3px; }
.minicard__ico{ display:block; width:26px; color:var(--gilt); margin-bottom:.9rem; }
.minicard h4{ font-family:var(--font-display); font-size:1.1rem; margin-bottom:.4rem; }
.minicard p{ font-size:.87rem; color:var(--fg-mute); }
.minicard a{ color:var(--gilt); border-bottom:1px solid var(--line); }

/* ── 15. JANNAT ──────────────────────────────────────────────────────────── */
.jannat{ position:relative; isolation:isolate; overflow:hidden; --line:rgba(201,162,75,.28); }
.jannat__bg{ position:absolute; inset:-12% 0 -12%; z-index:-2; }
.jannat__bg img{ width:100%; height:100%; object-fit:cover; }
.jannat__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg,rgba(8,17,13,.96) 0%,rgba(8,17,13,.82) 45%,rgba(8,17,13,.45) 100%),
    linear-gradient(0deg,var(--ink),transparent 30%);
}
.jannat__grid{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1.05fr .95fr; align-items:center;
}
.jannat__copy .h2{ margin:1rem 0 1.5rem; }
.jannat__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; }
.jannat__arch{ aspect-ratio:4/5; }

.specs{
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,3vw,3rem);
  margin-top:2.3rem; padding-top:1.7rem; border-top:1px solid var(--line);
}
.specs strong{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.7rem,2.5vw,2.4rem); line-height:1; color:var(--gilt);
}
.specs span{
  display:block; margin-top:.35rem;
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-mute);
}
.specs--dark{ margin-top:2rem; }

/* ── 16. WEDDINGS ────────────────────────────────────────────────────────── */
.wed{ display:grid; gap:clamp(1.5rem,3vw,2.2rem); grid-template-columns:repeat(3,1fr); }
.wed__card{
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.42);
  border:1px solid var(--line);
  overflow:hidden;
  transition:translate .4s var(--ease), box-shadow .4s var(--ease);
}
.wed__card:hover{ translate:0 -6px; box-shadow:0 30px 60px -40px rgba(21,36,32,.55); }
.wed__card figure{ overflow:hidden; aspect-ratio:16/11; }
.wed__card img{ width:100%; height:100%; object-fit:cover; transition:scale 1.1s var(--ease); }
.wed__card:hover img{ scale:1.06; }
.wed__body{ padding:clamp(1.3rem,2.2vw,1.8rem); display:flex; flex-direction:column; flex:1; }
.wed__body .h3{ margin-bottom:.7rem; }
.wed__body > p{ font-size:.92rem; color:var(--fg-mute); }
.wed__cap{
  margin:1.1rem 0 1.3rem; padding:.7rem .9rem;
  background:rgba(142,43,52,.07); border-left:2px solid var(--madder);
  font-size:.82rem; letter-spacing:.04em;
}
.wed__cap strong{ font-family:var(--font-display); font-weight:400; font-size:1.15rem; color:var(--madder); }
.wed__body .linkish{ margin-top:auto; align-self:flex-start; color:var(--madder); border-color:rgba(142,43,52,.3); }
.wed__body .linkish:hover{ border-color:var(--madder); }

.wed__services{
  margin-top:clamp(2.5rem,4vw,3.5rem); padding-top:clamp(2rem,3vw,2.6rem);
  border-top:1px solid var(--line); text-align:center;
}
.pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; margin:1.4rem 0 2rem; }
.pills li{
  padding:.42rem .95rem; border:1px solid var(--line); border-radius:100px;
  font-size:.75rem; letter-spacing:.05em; color:var(--fg-mute);
  transition:border-color .3s, color .3s;
}
.pills li:hover{ border-color:var(--madder); color:var(--madder); }

/* ── 17. BANQUETS ────────────────────────────────────────────────────────── */
.tabs__list{
  display:flex; flex-wrap:wrap; gap:.4rem;
  border-bottom:1px solid var(--line); margin-bottom:2rem;
}
.tabs__btn{
  position:relative; padding:.85rem 1.3rem;
  font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-mute); transition:color .3s;
}
.tabs__btn::after{
  content:""; position:absolute; left:0; bottom:-1px; width:100%; height:2px;
  background:var(--gilt-metal); scale:0 1; transform-origin:left;
  transition:scale .4s var(--ease);
}
.tabs__btn:hover{ color:var(--gilt); }
.tabs__btn.is-on{ color:var(--gilt); }
.tabs__btn.is-on::after{ scale:1 1; }
.tabs__panel{ animation:panelIn .5s var(--ease); }
@keyframes panelIn{ from{ opacity:0; translate:0 10px; } to{ opacity:1; translate:0 0; } }

.table-wrap{ overflow-x:auto; border:1px solid var(--line); }
.cap-table caption{
  padding:1rem 1.2rem; text-align:left;
  font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gilt); border-bottom:1px solid var(--line);
}
.cap-table th,.cap-table td{
  padding:.95rem 1.2rem; text-align:left; font-size:.92rem;
  border-bottom:1px solid rgba(201,162,75,.1);
}
.cap-table thead th{
  font-family:var(--font-body); font-weight:500;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-mute);
}
.cap-table tbody th{ font-weight:400; color:var(--fg); }
.cap-table tbody td{
  font-family:var(--font-display); font-size:1.1rem; color:var(--gilt);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.cap-table tbody tr{ transition:background .25s; }
.cap-table tbody tr:hover{ background:rgba(201,162,75,.05); }
.cap-table tbody tr:last-child th,.cap-table tbody tr:last-child td{ border-bottom:0; }

.quote-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.6rem; margin-top:clamp(2.5rem,4vw,3.5rem);
  padding:clamp(1.6rem,3vw,2.4rem);
  border:1px solid var(--line);
  background:linear-gradient(100deg,rgba(201,162,75,.07),transparent 70%);
}
.quote-strip p{ margin-top:.6rem; color:var(--fg-mute); max-width:52ch; font-size:.93rem; }

/* ── 18. EXPERIENCES ─────────────────────────────────────────────────────── */
.exp__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.7rem,1.5vw,1.1rem); }
.exp__tile{ position:relative; overflow:hidden; aspect-ratio:3/4; }
.exp__tile img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.75) brightness(.72);
  transition:scale 1.2s var(--ease), filter .6s var(--ease);
}
.exp__tile:hover img{ scale:1.08; filter:saturate(1) brightness(.88); }
.exp__tile figcaption{
  position:absolute; inset:auto 0 0; padding:1.2rem;
  background:linear-gradient(0deg,rgba(8,17,13,.9),transparent);
}
.exp__tile figcaption span{
  font-family:var(--font-display); font-size:1.06rem; color:var(--mist);
  display:block; transition:translate .4s var(--ease);
}
.exp__tile:hover figcaption span{ translate:0 -3px; color:var(--gilt); }

/* ── 19. AMENITIES ───────────────────────────────────────────────────────── */
.amen{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.amen li{
  display:flex; align-items:center; gap:.9rem;
  padding:1.3rem 1.4rem; background:var(--bg);
  font-size:.87rem; letter-spacing:.03em;
  transition:background .3s, color .3s;
}
.amen li:hover{ background:rgba(201,162,75,.06); color:var(--gilt); }
.amen__ico{ width:22px; flex:none; color:var(--gilt); }
.amen__ico svg{ width:100%; }

.notes{
  margin-top:clamp(2rem,3.5vw,3rem); padding:clamp(1.4rem,2.5vw,2rem);
  border-left:2px solid var(--gilt); background:rgba(201,162,75,.04);
}
.notes p + p{ margin-top:.6rem; font-size:.85rem; }
.notes strong{ color:var(--gilt); font-weight:500; }

/* ── 20. EXPLORE SOLAN ───────────────────────────────────────────────────── */
.near{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.near li{
  display:flex; gap:1.2rem; padding:clamp(1.3rem,2.4vw,1.9rem);
  background:var(--bg);
  transition:background .35s;
}
.near li:hover{ background:rgba(201,162,75,.07); }
.near__dist{
  flex:none; width:5.2rem;
  font-family:var(--font-display); font-size:1.24rem; line-height:1.1; color:var(--gilt);
}
.near__dist span{
  display:block; font-family:var(--font-body);
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-mute); margin-top:.25rem;
}
.near__body h3{ font-size:1.06rem; margin-bottom:.4rem; }
.near__body p{ font-size:.87rem; color:var(--fg-mute); }

/* ── 21. REVIEWS ─────────────────────────────────────────────────────────── */
.reviews__head{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(2rem,4vw,4rem); align-items:center;
  margin-bottom:clamp(2.5rem,4vw,3.5rem);
}
.reviews__score{
  display:grid; justify-items:center; gap:.45rem;
  padding:clamp(1.6rem,3vw,2.3rem) clamp(1.8rem,3.5vw,2.8rem);
  border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(201,162,75,.1),transparent);
  text-align:center;
}
.reviews__num{ font-family:var(--font-display); font-size:clamp(3rem,5vw,4.4rem); line-height:.9; color:var(--gilt); }
.stars{ font-size:.95rem; letter-spacing:.22em; color:var(--gilt); }
.stars__dim{ opacity:.28; }
.reviews__meta{ font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-mute); }
.reviews__score .linkish{ margin-top:.6rem; }
.reviews__intro .h2{ margin:1rem 0 .9rem; }

.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2rem); }
.quote{
  position:relative; padding:clamp(1.6rem,2.6vw,2.2rem);
  border:1px solid var(--line); background:rgba(201,162,75,.03);
}
.quote::before{
  content:"\201C"; position:absolute; top:.2rem; left:1rem;
  font-family:var(--font-display); font-size:4.5rem; line-height:1;
  color:var(--gilt); opacity:.22;
}
/* Jost ships without a true italic here, so the quote leans on the gilt
   quotation mark and a wider measure instead of a synthesised oblique. */
.quote p{ position:relative; font-size:1.02rem; color:var(--fg); letter-spacing:.012em; }
.quote cite{
  display:block; margin-top:1.2rem;
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  font-style:normal; color:var(--gilt);
}

/* ── 22. GALLERY ─────────────────────────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; margin-bottom:clamp(1.8rem,3vw,2.6rem); }
.chip{
  padding:.5rem 1.1rem; border:1px solid var(--line);
  font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-mute); transition:color .3s, border-color .3s, background .3s;
}
.chip:hover{ color:var(--gilt); border-color:rgba(201,162,75,.5); }
.chip.is-on{ background:var(--gilt-metal); color:#160F02; border-color:transparent; }

.grid-gal{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(120px,15vw,190px); gap:clamp(.55rem,1.2vw,.9rem);
}
.tile{
  position:relative; overflow:hidden; padding:0; display:block;
  transition:opacity .45s var(--ease), scale .45s var(--ease);
}
.tile--tall{ grid-row:span 2; }
.tile--wide{ grid-column:span 2; }
.tile img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.82) saturate(.85);
  transition:scale 1.1s var(--ease), filter .5s;
}
.tile:hover img{ scale:1.07; filter:brightness(1) saturate(1); }
.tile__cap{
  position:absolute; inset:auto 0 0; padding:1rem .9rem .8rem;
  background:linear-gradient(0deg,rgba(8,17,13,.9),transparent);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mist);
  text-align:left;
  opacity:0; translate:0 8px;
  transition:opacity .4s var(--ease), translate .4s var(--ease);
}
.tile:hover .tile__cap,.tile:focus-visible .tile__cap{ opacity:1; translate:0 0; }
.tile.is-hidden{ display:none; }

/* ── 23. CONTACT ─────────────────────────────────────────────────────────── */
.contact{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.5rem,5vw,5rem); align-items:start; }
.contact__info .h2{ margin:1rem 0 2.2rem; }
.contact__block{ padding-bottom:1.5rem; margin-bottom:1.5rem; border-bottom:1px solid var(--line); }
.contact__block:last-child{ border-bottom:0; margin-bottom:0; }
.contact__lbl{
  font-family:var(--font-body); font-weight:500;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gilt); margin-bottom:.7rem;
}
.contact__block address{ line-height:1.85; margin-bottom:.8rem; }
.contact__block p{ color:var(--fg-mute); font-size:.92rem; }
.contact__block strong{ color:var(--fg); font-weight:400; }
.contact__block .muted{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }

.contact__form-wrap{
  padding:clamp(1.5rem,3vw,2.6rem);
  border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(201,162,75,.07),transparent 60%);
}
.form{ position:relative; }
.form .h4{ margin-bottom:.6rem; }
.form__hint{ font-size:.88rem; color:var(--fg-mute); margin-bottom:1.6rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ margin-bottom:1rem; }
.field label{
  display:block; margin-bottom:.4rem;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gilt);
}
.field input,.field select,.field textarea{
  width:100%; padding:.8rem .95rem;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line); border-radius:var(--r);
  font-size:.95rem; color:var(--fg);
  transition:border-color .3s, background .3s;
}
.field textarea{ resize:vertical; min-height:96px; }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gilt) 50%),linear-gradient(135deg,var(--gilt) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gilt); background:rgba(201,162,75,.05); outline:none;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--fg-mute); opacity:.65; }
.field input[type="date"]::-webkit-calendar-picker-indicator{ cursor:pointer; }
.field.is-bad input,.field.is-bad select{ border-color:#C25B5B; }
.field__err{
  min-height:0; font-size:.72rem; color:#C25B5B; letter-spacing:.04em;
  margin-top:.3rem;
}
.form button[type="submit"]{ margin-top:.6rem; }
.form__legal{ margin-top:1rem; font-size:.75rem; color:var(--fg-mute); }
.form__legal a{ color:var(--gilt); border-bottom:1px solid var(--line); }

.form__done{
  position:absolute; inset:0; z-index:5;
  display:grid; place-content:center; justify-items:center; gap:.7rem;
  padding:1.5rem; text-align:center;
  background:var(--bg);
  animation:panelIn .45s var(--ease);
}
.form__tick{ width:44px; color:var(--gilt); }
.form__tick svg{ width:100%; }
.form__done h4{ font-family:var(--font-display); font-size:1.35rem; }
.form__done p{ font-size:.9rem; color:var(--fg-mute); max-width:38ch; }
.form__done-act{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:.6rem; }

.map{ margin-top:clamp(2.5rem,5vw,4.5rem); border-top:1px solid var(--line); filter:grayscale(1) invert(.9) hue-rotate(170deg) brightness(.92); }
.map iframe{ width:100%; height:clamp(280px,38vw,430px); border:0; }

/* ── 24. FOOTER ──────────────────────────────────────────────────────────── */
.foot{
  --fg:var(--mist); --fg-mute:var(--stone); --line:rgba(201,162,75,.16);
  background:#081310; color:var(--fg);
  padding-top:clamp(3.5rem,6vw,5.5rem);
  border-top:1px solid var(--line);
}
.foot__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:clamp(2.5rem,4vw,3.5rem);
}
.foot__brand .brand__mark{ margin-bottom:1.1rem; }
.foot__name{ font-family:var(--font-display); font-size:1.28rem; margin-bottom:.6rem; }
.foot__tag{ font-size:.82rem; color:var(--fg-mute); line-height:1.8; }
.socials{ display:flex; gap:.5rem; margin-top:1.4rem; }
.socials a{
  display:grid; place-items:center; width:38px; height:38px;
  border:1px solid var(--line); color:var(--gilt);
  transition:background .3s, translate .3s var(--ease);
}
.socials svg{ width:17px; }
.socials a:hover{ background:rgba(201,162,75,.12); translate:0 -3px; }

.foot__col h3{
  font-family:var(--font-body); font-weight:500;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gilt); margin-bottom:1.1rem;
}
.foot__col ul{ display:grid; gap:.6rem; }
.foot__col a{ font-size:.87rem; color:var(--fg-mute); transition:color .25s, padding-left .3s var(--ease); }
.foot__col a:hover{ color:var(--gilt); padding-left:.3rem; }
.foot__col .muted{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; }
.foot__times{ margin-top:1.2rem; font-size:.78rem; color:var(--gilt); letter-spacing:.06em; }

.foot__policy{ padding-block:clamp(1.8rem,3vw,2.4rem); border-top:1px solid var(--line); }
.foot__policy h3{
  font-family:var(--font-body); font-weight:500;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gilt); margin-bottom:.9rem;
}
.foot__policy p{ font-size:.82rem; color:var(--fg-mute); max-width:98ch; line-height:1.9; }

.foot__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem;
  padding-block:1.4rem; border-top:1px solid var(--line);
  font-size:.76rem; color:var(--fg-mute);
}

/* ── 25. FLOATING ACTIONS ────────────────────────────────────────────────── */
.fab{
  position:fixed; right:clamp(.9rem,2vw,1.6rem); bottom:clamp(.9rem,2vw,1.6rem);
  z-index:180; display:grid; gap:.5rem;
}
.fab__btn{
  display:grid; place-items:center; width:46px; height:46px;
  border:1px solid rgba(201,162,75,.4);
  background:rgba(9,19,15,.9); backdrop-filter:blur(8px);
  color:var(--gilt);
  transition:background .3s, translate .3s var(--ease), opacity .35s, visibility .35s;
}
.fab__btn svg{ width:18px; }
.fab__btn:hover{ background:var(--gilt); color:#160F02; translate:0 -3px; }
.fab__btn--top{ opacity:0; visibility:hidden; }
.fab__btn--top.is-on{ opacity:1; visibility:visible; }

/* ── 26. MODAL ───────────────────────────────────────────────────────────── */
.modal{ position:fixed; inset:0; z-index:350; display:grid; place-items:center; padding:1rem; }
.modal__scrim{
  position:absolute; inset:0; background:rgba(4,9,7,.78); backdrop-filter:blur(5px);
  opacity:0; transition:opacity .4s;
}
.modal.is-open .modal__scrim{ opacity:1; }
.modal__box{
  --bg:var(--ink-2); --fg:var(--mist); --fg-mute:var(--stone); --line:rgba(201,162,75,.22);
  position:relative; width:min(100%,580px); max-height:92vh; overflow-y:auto;
  padding:clamp(1.6rem,3.5vw,2.6rem);
  background:var(--bg); color:var(--fg);
  border:1px solid var(--line); border-top:2px solid var(--gilt);
  box-shadow:0 50px 100px -40px #000;
  opacity:0; translate:0 24px; scale:.98;
  transition:opacity .45s var(--ease), translate .45s var(--ease), scale .45s var(--ease);
}
.modal.is-open .modal__box{ opacity:1; translate:0 0; scale:1; }
.modal__x{ position:absolute; top:.5rem; right:1rem; font-size:2rem; line-height:1; color:var(--gilt); }
.modal__box .h3{ margin:.9rem 0 .7rem; }
.modal__lede{ font-size:.9rem; color:var(--fg-mute); margin-bottom:1.6rem; }
.modal__nights{
  margin:-.2rem 0 1rem; padding:.55rem .8rem;
  background:rgba(201,162,75,.09); border-left:2px solid var(--gilt);
  font-size:.8rem; letter-spacing:.06em; color:var(--gilt);
}
.form--modal .form__done{ background:var(--ink-2); }

/* ── 27. LIGHTBOX ────────────────────────────────────────────────────────── */
.lightbox{ position:fixed; inset:0; z-index:360; display:grid; place-items:center; }
.lightbox__scrim{ position:absolute; inset:0; background:rgba(4,9,7,.94); opacity:0; transition:opacity .4s; }
.lightbox.is-open .lightbox__scrim{ opacity:1; }
.lightbox__inner{
  position:relative; display:flex; align-items:center; gap:clamp(.4rem,2vw,1.5rem);
  width:min(96vw,1100px); padding:clamp(2.5rem,5vw,3.5rem) 0;
  opacity:0; scale:.97; transition:opacity .4s var(--ease), scale .4s var(--ease);
}
.lightbox.is-open .lightbox__inner{ opacity:1; scale:1; }
.lightbox__fig{ flex:1; min-width:0; }
.lightbox__fig img{
  width:100%; max-height:74vh; object-fit:contain; margin-inline:auto;
  border:1px solid rgba(201,162,75,.25);
}
.lightbox__fig figcaption{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem;
  margin-top:1rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--stone);
}
.lightbox__count{ color:var(--gilt); }
.lightbox__nav{
  flex:none; width:46px; height:46px; display:grid; place-items:center;
  font-size:1.8rem; line-height:1; color:var(--gilt);
  border:1px solid rgba(201,162,75,.3);
  transition:background .3s, color .3s;
}
.lightbox__nav:hover{ background:var(--gilt); color:#160F02; }
.lightbox__x{ position:absolute; top:.4rem; right:0; font-size:2.2rem; line-height:1; color:var(--gilt); z-index:2; }

/* ── 28. REVEAL ──────────────────────────────────────────────────────────── */
.reveal{
  opacity:0; translate:0 26px;
  transition:opacity .85s var(--ease), translate .85s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal.is-in{ opacity:1; translate:0 0; }

/* ── 29. RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width:1140px){
  .nav__list{ gap:.9rem; }
  .nav__list a,.nav__toggle{ font-size:.7rem; letter-spacing:.06em; }
  .link-phone span{ display:none; }
  .exp__grid,.amen{ grid-template-columns:repeat(2,1fr); }
  .near{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:1000px){
  .nav,.link-phone{ display:none; }
  .burger{ display:block; }
  .site-head__act{ margin-left:auto; }
  .hero__grid,.about,.jannat__grid,.contact,.dine{ grid-template-columns:1fr; }
  .hero__stage{ order:-1; max-width:440px; margin-inline:auto; width:100%; }
  .hero{ padding-top:clamp(6.5rem,14vh,9rem); }
  .hero__badge{ left:auto; right:-2%; bottom:5%; }
  .about__media{ max-width:430px; }
  .about__inset{ right:0; }
  .bookbar{ grid-template-columns:1fr 1fr; }
  .bookbar__submit{ grid-column:1/-1; padding:0; }
  .bookbar__submit .btn{ padding-block:1rem; }
  .rooms,.wed,.quotes{ grid-template-columns:1fr 1fr; }
  .room--feature,.wed__card:last-child{ grid-column:1/-1; }
  .room--feature .room__fig{ aspect-ratio:16/9; }
  .grid-gal{ grid-template-columns:repeat(3,1fr); }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .reviews__head{ grid-template-columns:1fr; justify-items:start; }
  .reviews__score{ width:100%; }
}

@media (max-width:640px){
  :root{ --pad-y:clamp(3.4rem,10vw,4.6rem); }
  .hero__title{ font-size:clamp(2.5rem,11vw,3.4rem); }
  .hero__stats{ gap:1.2rem 1.8rem; }
  .hero__stats dd{ font-size:1.3rem; }
  .hero__badge{ position:static; margin-top:1rem; max-width:none; }
  .bookbar{ grid-template-columns:1fr; }
  .rooms,.wed,.quotes,.exp__grid,.amen,.near,.form__row,.foot__grid{ grid-template-columns:1fr; }
  .room--feature .room__fig{ aspect-ratio:4/5; }
  .grid-gal{ grid-template-columns:repeat(2,1fr); grid-auto-rows:132px; }
  .tile--wide{ grid-column:span 2; }
  .about__inset{ position:static; width:100%; margin-top:.8rem; border-width:0; aspect-ratio:16/9; }
  .about__media{ max-width:none; }
  .quote-strip,.wed__services{ text-align:left; }
  .pills{ justify-content:flex-start; }
  .lightbox__nav{ position:absolute; bottom:0; z-index:2; }
  .lightbox__nav--prev{ left:0; }
  .lightbox__nav--next{ right:0; }
  .lightbox__fig figcaption{ justify-content:center; padding-inline:3.5rem; }
  .fab__btn{ width:52px; height:52px; }
  .near__dist{ width:4.4rem; font-size:1.1rem; }
}

@media (max-width:420px){
  .brand__sub{ display:none; }
  .site-head__act .btn{ padding:.6rem .85rem; font-size:.6rem; }
}

/* ── 30. REAL PHOTOGRAPHY: BLUR-UP, GRAIN & GILT EDGE ────────────────────── */
/* Every photo carries a 22px-wide blur of itself as an inline background token
   (--lq-*), so the moment layout happens you see that photo's real colours
   instead of an empty box. script.js adds .lq only when the file has not
   already arrived, then removes it on load — so with JS off, images are simply
   sharp and nothing is left permanently blurred. */
img[style*="--lq-"]{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
img.lq{
  filter:blur(16px) saturate(1.15);
  transition:filter .85s var(--ease);
}
img.lq.is-ready{ filter:none; }

/* A whisper of grain over photography. Real hotel photos are lit warm and
   noisy; a shared grain layer makes them sit together as one set rather than
   sixteen separate uploads. Kept at z-index 1 so captions stay above it. */
.arch::before,
.tile::before,
.exp__tile::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  opacity:.38;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.tile__cap,
.exp__tile figcaption{ z-index:3; }

/* Gilt hairline that traces the foot of each gallery tile on hover — the arch
   motif echoed at small scale, instead of the usual lift-and-shadow. The
   resting dimming set in section 22 is left alone; only the scale is calmed,
   and :focus-visible now gets the same treatment as :hover. */
.tile:hover img,
.tile:focus-visible img{ scale:1.045; filter:brightness(1.02) saturate(1); }

.tile::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:2px; z-index:4;
  background:var(--gilt-metal);
  scale:0 1; transform-origin:left center;
  transition:scale .55s var(--ease);
}
.tile:hover::after,
.tile:focus-visible::after{ scale:1 1; }

/* ── 31. TERRACE REEL ────────────────────────────────────────────────────── */
.reelband{ overflow:hidden; }
.reelband__grid{
  display:grid;
  grid-template-columns:1fr minmax(260px,340px);
  gap:clamp(2rem,6vw,5.5rem);
  align-items:center;
}
.reelband__copy{ max-width:46ch; }
.reelband__meta{
  display:flex; align-items:center; gap:.6rem;
  margin-top:2rem;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-mute);
}
.reelband__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--gilt);
  box-shadow:0 0 0 0 rgba(201,162,75,.6);
  animation:reelPulse 2.4s var(--ease-io) infinite;
}
.reelband.is-paused .reelband__dot{ animation:none; opacity:.45; }
@keyframes reelPulse{
  0%  { box-shadow:0 0 0 0 rgba(201,162,75,.55); }
  70% { box-shadow:0 0 0 9px rgba(201,162,75,0); }
  100%{ box-shadow:0 0 0 0 rgba(201,162,75,0); }
}

.reelband__stage{ position:relative; }
.reelframe{
  aspect-ratio:9/16;
  margin:0;
  background:#070d0a;
}
.reelframe__v{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* Gilt ring + floor vignette, inset because clip-path discards outer shadow. */
.reelframe::after{
  box-shadow:
    inset 0 0 0 1px rgba(201,162,75,.42),
    inset 0 -70px 90px -60px rgba(6,14,10,.9);
}

.reelframe__btn{
  position:absolute; z-index:4;
  right:-14px; bottom:26px;
  display:grid; place-items:center;
  width:52px; height:52px;
  border:1px solid rgba(201,162,75,.5);
  border-radius:50%;
  background:rgba(11,22,17,.82);
  backdrop-filter:blur(6px);
  color:var(--gilt-lt);
  cursor:pointer;
  transition:background .35s var(--ease), scale .35s var(--ease), border-color .35s var(--ease);
}
.reelframe__btn:hover{ background:rgba(11,22,17,.95); border-color:var(--gilt); scale:1.07; }
.reelframe__btn svg{ width:15px; height:15px; fill:currentColor; grid-area:1/1;
                     transition:opacity .2s var(--ease), scale .2s var(--ease); }
.reelframe__btn-label{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
/* aria-pressed is the single source of truth for which glyph shows. */
.reelframe__btn[aria-pressed="true"]  .reelframe__ico--play { opacity:0; scale:.7; }
.reelframe__btn[aria-pressed="false"] .reelframe__ico--pause{ opacity:0; scale:.7; }

@media (max-width:860px){
  .reelband__grid{ grid-template-columns:1fr; justify-items:center; }
  .reelband__copy{ text-align:center; }
  .reelband__meta{ justify-content:center; }
  .reelband__stage{ width:min(300px,80vw); }
  .reelframe__btn{ right:-10px; }
}

/* ── 32. PREMIUM POLISH ──────────────────────────────────────────────────── */

/* A single slow specular sweep across the hero photograph — the light a real
   gilt frame throws. It lives inside .hero__arch, so the arch's clip-path
   trims it to the ogee silhouette for free. One pass every 13s: enough to
   feel alive, rare enough that it never reads as a loading shimmer. */
.sheen{
  position:absolute; inset:-10% -30%; z-index:2;
  pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(104deg,
    transparent 40%,
    rgba(255,255,255,.045) 46%,
    rgba(240,220,164,.34) 50%,
    rgba(255,255,255,.045) 54%,
    transparent 60%);
  translate:-100% 0;
  animation:sheen 13s var(--ease-io) 1.9s infinite;
}
@keyframes sheen{
  0%,4%   { translate:-100% 0; }
  26%,100%{ translate:100% 0; }
}

/* Gallery: the grid assembles tile by tile instead of arriving as one slab.
   Longhands, not the `transition` shorthand — the shorthand would reset the
   transition-delay that .reveal uses for the --i stagger. */
.grid-gal .tile.reveal{
  translate:0 20px; scale:.965;
  transition-property:opacity,translate,scale;
  transition-duration:.7s;
  transition-timing-function:var(--ease);
}
.grid-gal .tile.reveal.is-in{ translate:0 0; scale:1; }

/* The two filter phases driven by script.js §9. `is-arm` is the pre-arrival
   pose, painted for a single frame with transitions switched off; dropping it
   is what starts the motion. The id selector is deliberate — these have to
   outrank `.grid-gal .tile.reveal.is-in`, which pins translate and scale. */
#galleryGrid .tile.is-leaving{
  opacity:0; scale:.94;
  transition-duration:.22s; transition-delay:0s;
}
#galleryGrid .tile.is-arm{
  opacity:0; scale:.94; translate:0 16px;
  transition:none;
}
#galleryGrid .tile.is-arriving{
  transition-property:opacity,translate,scale;
  transition-duration:.5s;
  transition-timing-function:var(--ease);
  transition-delay:var(--d,0ms);
}

/* Photographs settle as their card reveals: held slightly over-scaled, then
   released to true size. Only on figures that aren't already running the
   ken-burns drift, and only while un-revealed, so hover keeps its own scale. */
.room.reveal:not(.is-in) .room__fig img,
.wed__card.reveal:not(.is-in) img,
.exp__tile.reveal:not(.is-in) img{ scale:1.06; }

/* Hero parks itself as it slides off the top of the screen — scroll-driven, so
   it tracks the scrollbar exactly instead of guessing with a timer, and tied
   to the element's own exit rather than fixed offsets, so it stays correct at
   any viewport height. Progressive: browsers without scroll-driven animations
   simply scroll past a static hero. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:901px){
    .hero__copy,.hero__stage{
      animation:heroPark linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 82%;
    }
  }
}
@keyframes heroPark{ to{ opacity:.1; translate:0 -3vh; scale:.985; } }

/* Text selection in the house gilt rather than browser blue. */
::selection{ background:rgba(201,162,75,.34); color:#FFF7E4; }

/* Lightbox cross-fade (see script.js §10) — the outgoing photograph fades,
   the incoming one is only swapped in once it has decoded. */
.lightbox__fig img{ transition:opacity .22s var(--ease), scale .22s var(--ease); }
.lightbox__fig img.is-swapping{ opacity:0; scale:.995; }

/* ── 33. MOTION & PRINT ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html:focus-within{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; translate:none; }
  .draw-arch{ stroke-dashoffset:0; }
  .ribbon__track{ animation:none; }
  .kenburns{ animation:none; }
  .hero__mist{ animation:none; }
  img.lq{ filter:none; }
  .reelband__dot{ animation:none; }
  .sheen{ display:none; }
  .grid-gal .tile.reveal{ translate:none; scale:1; }
  .room.reveal:not(.is-in) .room__fig img,
  .wed__card.reveal:not(.is-in) img,
  .exp__tile.reveal:not(.is-in) img{ scale:1; }
}

@media print{
  .site-head,.fab,.loader,.modal,.lightbox,.drawer,.map,.scroll-progress,.ribbon{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ --bg:#fff; --fg:#000; --fg-mute:#333; padding-block:1.5rem; }
  .reveal{ opacity:1; translate:none; }
  .reelband,.reelframe__btn{ display:none !important; }
  .sheen{ display:none !important; }
  img.lq{ filter:none; }
  .grid-gal .tile.reveal{ translate:none; scale:1; }
  .arch::before,.tile::before,.exp__tile::before{ display:none; }
}