/* ==========================================================================
   SB International Hotel & Banquet, Dhanbad
   Built desktop first. Base rules target a 1440px screen, media queries
   scale down from there.

   Structure follows the pattern shared by Indian hotel sites that work
   (Leela, Oberoi, Trident, Clarks): full bleed photographic hero, centred
   wordmark with split navigation, a booking bar overlapping the hero edge,
   and a warm ivory ground for everything below it.

   Palette : deep emerald, warm ivory, marigold. Marigold is the only accent.
   Radius  : 2px on cards and media, pill on buttons. Nothing else.
   NOTE    : no content ever starts at opacity 0. Animation only ever adds.
   ========================================================================== */

:root {
  --ink:        #1C1A15;
  --ink-soft:   #55524A;
  --ink-faint:  #837F74;

  --emerald:    #0E3B2E;
  --emerald-lt: #17553F;

  --ivory:      #FDFBF6;
  --ivory-deep: #F3EFE5;
  --paper:      #FFFFFF;

  --gold:       #D98324;
  --gold-deep:  #B06712;

  --line:       #E2DCCE;
  --line-soft:  #EDE8DC;

  --r: 2px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Devanagari faces sit second: Cormorant and Jost have no Hindi glyphs, so
     the browser falls through to them letter by letter for Hindi text only. */
  --serif: "Cormorant Garamond", "Tiro Devanagari Hindi", Georgia, serif;
  --sans:  "Jost", "Mukta", system-ui, -apple-system, "Segoe UI", sans-serif;

  --nav-h: 92px;
}

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, iframe { display: block; max-width: 100%; }
img { height: auto; object-fit: cover; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

.wrap { width: min(1280px, 100% - 5rem); margin-inline: auto; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--emerald); color: #fff; padding: .9rem 1.4rem; }
.skip:focus { left: 0; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}

/* ---------------- type ---------------- */
.h2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 3.9vw, 4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.005em;
}
.ital { font-style: italic; display: inline-block; line-height: 1.14; padding-bottom: .1em; }
.lede { margin-top: 1.6rem; max-width: 52ch; color: var(--ink-soft); font-size: 1.05rem; }
.eyebrow {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .28em;
  color: var(--gold); font-weight: 400; margin-bottom: 1.5rem;
}
.shead { margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.shead--center { text-align: center; }
.shead--light .h2, .shead--light .eyebrow ~ .h2 { color: inherit; }

.link {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 2rem;
  font-size: .9rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: var(--gold-deep);
  border-bottom: 1px solid currentColor; padding-bottom: 4px;
  transition: gap .3s var(--ease);
}
.link:hover { gap: 1rem; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  font-family: var(--sans); font-size: .82rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 1.05rem 2.2rem; border: 1px solid transparent; border-radius: 999px;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .2s var(--ease);
}
.btn i { font-size: 1.25em; }
.btn--sm { padding: .72rem 1.5rem; font-size: .74rem; }
.btn--lg { padding: 1.2rem 2.6rem; }
.btn--block { width: 100%; }

/* Gold carries dark text. White on this gold fails contrast, dark passes. */
.btn--gold { background: var(--gold); color: #241503; }
.btn--gold:hover { background: var(--gold-deep); color: #FFF6EA; }

.btn--dark { background: var(--emerald); color: #F6FBF8; }
.btn--dark:hover { background: var(--emerald-lt); }

.btn--line { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--line:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.btn:active { transform: translateY(1px); }

/* ---------------- nav ---------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  background: transparent;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.nav__inner {
  height: var(--nav-h);
  width: min(1400px, 100% - 4rem); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem;
}
.nav__side { display: flex; align-items: center; gap: 2.4rem; }
.nav__side--r { justify-content: flex-end; }
.nav__side a {
  text-decoration: none; font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; position: relative; padding: .4rem 0;
  transition: color .3s var(--ease);
}
.nav__side a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width .35s var(--ease);
}
.nav__side a:not(.btn):hover::after { width: 100%; }
/* `.nav__side a` above zeroes horizontal padding, which pushed the Book Now
   label against the edges of its pill. Buttons get their own padding back. */
.nav__side a.btn { padding: .78rem 1.7rem; }

.wordmark { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: #fff; }
.wordmark__text { display: grid; justify-items: center; gap: .3rem; }
/* The logo is a black tile (SB mark in marigold and white), so it reads the
   same on the hero photo and on the ivory bar once the page scrolls. */
.wordmark__logo { width: 48px; height: 48px; flex: none; border-radius: 8px; }
.wordmark__name {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1;
}
.wordmark__rule { width: 46px; height: 1px; background: var(--gold); }
.wordmark__sub {
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  opacity: .82; line-height: 1;
}

/* Solid state once the hero is behind us.

   This cannot be plain var(--ivory): the body is var(--ivory) too, so the bar
   had no edges and the links read as loose text floating over the page. It is
   now very slightly lifted off the page colour, frosted so content passing
   underneath stays legible, and given a real bottom rule plus a soft shadow. */
.nav.is-solid {
  background: rgba(253, 251, 246, .88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 24px -14px rgba(30, 26, 18, .30);
}

/* Older browsers, and Firefox with backdrop-filter disabled, get an opaque
   bar instead -- a translucent one over scrolling text would be unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-solid { background: var(--paper); }
}

/* Opening the mobile menu at the top of the page would otherwise drop an
   opaque panel below a still-transparent bar, leaving the wordmark stranded
   on the hero photo. Treat an open menu as a scrolled bar. */
.nav:has(.mobilenav.is-open) {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav:has(.mobilenav.is-open) .wordmark,
.nav:has(.mobilenav.is-open) .nav__side a { color: var(--ink); }
.nav:has(.mobilenav.is-open) .nav__toggle span { background: var(--ink); }
.nav.is-solid .nav__side a { color: var(--ink); }
.nav.is-solid .nav__side a.btn { color: #241503; }
.nav.is-solid .nav__side a.btn:hover { color: #FFF6EA; }
.nav.is-solid .wordmark { color: var(--ink); }
.nav.is-solid .nav__toggle span { background: var(--ink); }

.nav__toggle { display: none; }
.mobilenav { display: none; }

/* ---------------- language switch ----------------
   One button that flips the page between English and Hindi. The language on
   screen is shown in gold, the other one in the normal text colour. */
.langsw {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .95rem; border: 1px solid rgba(255,255,255,.45); border-radius: 999px;
  background: transparent; color: #fff; cursor: pointer;
  font-family: var(--sans); font-size: .8rem; font-weight: 400; line-height: 1;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.langsw:hover { border-color: var(--gold); }
.langsw__sep { color: currentColor; }
html:not([lang="hi"]) .langsw [data-l="en"],
html[lang="hi"] .langsw [data-l="hi"] { color: var(--gold); font-weight: 500; }
.nav.is-solid .langsw { color: var(--ink); border-color: var(--line); }
html:not([lang="hi"]) .nav.is-solid .langsw [data-l="en"],
html[lang="hi"] .nav.is-solid .langsw [data-l="hi"] { color: var(--gold-deep); }
.langsw--m { display: none; }
.langsw--foot {
  justify-self: start; margin-top: .6rem;
  color: rgba(220,232,227,.82); border-color: rgba(255,255,255,.22);
}

/* ---------------- fixed action rail ---------------- */
.rail {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 110;
  display: grid; background: var(--emerald);
}
.rail a {
  display: grid; justify-items: center; gap: .3rem; padding: 1rem .85rem;
  color: #EAF3EF; text-decoration: none; font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .3s var(--ease);
}
.rail a + a { border-top: 1px solid rgba(255,255,255,.12); }
.rail a i { font-size: 1.35rem; }
.rail a:hover { background: var(--gold); color: #241503; }

/* ---------------- hero ---------------- */
/* The wrapper is the positioning context, so the booking bar can hang off the
   hero's bottom edge on desktop and simply stack underneath it on phones. */
.herowrap { position: relative; }

/* Slightly under a full viewport, so the booking bar that overlaps the bottom
   edge lands fully on screen instead of half under the fold. The bar is the
   main conversion element on the page and has to be reachable without scroll. */
.hero { position: relative; min-height: calc(100dvh - 58px); display: grid; align-items: center; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(12,20,16,.62) 0%, rgba(12,20,16,.28) 38%, rgba(12,20,16,.72) 100%),
    radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(12,20,16,.4) 100%);
}
.hero__inner {
  width: min(1280px, 100% - 5rem); margin-inline: auto;
  color: #fff; text-align: center;
  padding-top: var(--nav-h); padding-bottom: 8rem;
}
.hero__kicker {
  font-size: .72rem; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(255,255,255,.92); margin-bottom: 2rem;
  /* wide-tracked caps sit on whatever the photograph is doing behind them,
     so they carry their own shadow rather than trusting the scrim */
  text-shadow: 0 1px 12px rgba(0,0,0,.75);
}
.hero__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(3.6rem, 8.2vw, 8rem); line-height: .98; letter-spacing: -.01em;
  text-shadow: 0 2px 40px rgba(0,0,0,.35);
}
.hero__sub {
  margin: 1.6rem auto 0; max-width: 34ch;
  font-size: 1.12rem; color: #fff;
  text-shadow: 0 1px 16px rgba(0,0,0,.8);
}

/* booking bar overlapping the hero edge */
.bookbar {
  /* sits on the hero's bottom edge, weighted so most of it stays above the
     fold on a 900px laptop screen rather than hiding under it */
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 34%);
  width: min(1180px, 100% - 5rem); z-index: 5;
  background: var(--paper); border-radius: var(--r);
  box-shadow: 0 24px 70px rgba(20, 30, 24, .18);
  padding: 1.6rem 1.8rem 1.1rem;
}
.bookbar__form { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 1.4rem; align-items: end; }
.bf { display: grid; gap: .4rem; }
.bf label {
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
}
.bf input, .bf select {
  font-family: var(--sans); font-size: .98rem; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line); background: transparent;
  padding: .45rem 0; width: 100%;
  transition: border-color .3s var(--ease);
}
.bf input:focus, .bf select:focus { border-bottom-color: var(--gold); outline-offset: 6px; }
/* iOS Safari centres the value in a date field and gives it its own height,
   so the dates sat off-line from the Rooms and Guests selects beside them. */
.bf input[type="date"] {
  -webkit-appearance: none; appearance: none;
  min-height: 2.6rem; text-align: left; line-height: 1.4;
}
.bf input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.bookbar__go { align-self: end; }
.bookbar__note { margin-top: 1rem; font-size: .78rem; color: var(--ink-faint); }

/* ---------------- welcome + stats ---------------- */
.welcome { padding: clamp(11rem, 15vw, 15rem) 0 clamp(5rem, 8vw, 8rem); }
.welcome__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(3rem, 7vw, 7rem); align-items: start; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem 2rem; padding-top: .6rem; }
.stats li { display: grid; gap: .5rem; }
.stats__n {
  font-family: var(--serif); font-size: 3.6rem; line-height: 1;
  font-weight: 300; color: var(--emerald);
}
.stats__n .u { font-size: .42em; }
.stats__l { font-size: .86rem; color: var(--ink-faint); line-height: 1.5; }

/* ---------------- generic section ---------------- */
.section { padding: clamp(5rem, 9vw, 9rem) 0; }
.section--tint { background: var(--ivory-deep); }

/* ---------------- rooms ---------------- */
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.room__media { margin: 0 0 1.6rem; overflow: hidden; border-radius: var(--r); }
.room__media img { width: 100%; aspect-ratio: 3 / 2; transition: transform 1.1s var(--ease); }
.room:hover .room__media img { transform: scale(1.05); }
.room__h { font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.room__p { margin-top: .7rem; color: var(--ink-soft); font-size: .96rem; max-width: 36ch; }
.room__meta {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}

.ratecard {
  margin-top: clamp(3rem, 5vw, 4.5rem); padding: clamp(2rem, 3.5vw, 3rem);
  background: var(--ivory-deep); border-radius: var(--r);
  display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: center;
}
.ratecard h3 { font-family: var(--serif); font-size: 1.9rem; font-weight: 400; }
.ratecard p { margin-top: .6rem; color: var(--ink-soft); font-size: .96rem; max-width: 62ch; }

/* ---------------- weddings ---------------- */
.weddings { background: var(--emerald); color: #F4F9F6; padding: clamp(5rem, 9vw, 9rem) 0; }
.weddings .eyebrow { color: var(--gold); }
.weddings .h2 { color: #FCFDFC; }

.halls { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
.hall__media { margin: 0 0 1.8rem; overflow: hidden; border-radius: var(--r); }
.hall__media img { width: 100%; aspect-ratio: 3 / 2; transition: transform 1.1s var(--ease); }
.hall:hover .hall__media img { transform: scale(1.045); }
.hall h3 { font-family: var(--serif); font-size: 2.3rem; font-weight: 400; }
.hall p { margin-top: .8rem; color: rgba(244,249,246,.76); font-size: .98rem; max-width: 44ch; }
.hall__spec {
  margin-top: 1.4rem !important; padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
}
.hall__spec span {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(244,249,246,.6);
}
/* small gold line above each venue name: "Main banquet hall", "Open lawn" */
.hall .hall__kind {
  margin: 0 0 .45rem; font-size: .7rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold);
}
/* the lawn runs the full width under the two halls, as a wide strip */
.hall--wide { grid-column: 1 / -1; }
.hall--wide .hall__media img { aspect-ratio: 21 / 9; }

.weddings__cta {
  margin-top: clamp(3.5rem, 6vw, 6rem);
  display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.weddings__img { margin: 0; overflow: hidden; border-radius: var(--r); }
.weddings__img img { width: 100%; aspect-ratio: 4 / 3; }
.weddings__pitch h3 { font-family: var(--serif); font-size: clamp(1.9rem, 2.8vw, 2.6rem); font-weight: 400; }
.weddings__pitch p { margin-top: 1rem; color: rgba(244,249,246,.78); max-width: 46ch; }
.weddings__pitch .btn { margin-top: 2.2rem; }

/* ---------------- dining ---------------- */
.dining { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: center; }
.dining__media { margin: 0; overflow: hidden; border-radius: var(--r); }
.dining__media img { width: 100%; aspect-ratio: 4 / 5; }

/* The bar shows up as a quiet second photograph tucked over the corner of
   the restaurant one, framed in page colour, rather than a section of its own. */
.dining__pics { position: relative; padding: 0 14% 14% 0; }
.dining__inset {
  position: absolute; right: 0; bottom: 0; width: 42%; margin: 0;
  border: 8px solid var(--ivory); border-radius: var(--r); overflow: hidden;
  box-shadow: 0 22px 50px -24px rgba(20, 30, 24, .45);
}
.dining__inset img { width: 100%; aspect-ratio: 4 / 5; }

.ticks { margin-top: 2.6rem; display: grid; gap: 1.5rem; }
.ticks li { display: flex; gap: 1.1rem; align-items: flex-start; }
.ticks i { color: var(--gold); font-size: 1.6rem; flex: none; line-height: 1.2; }
.ticks strong { display: block; font-weight: 400; font-size: 1rem; }
.ticks span { display: block; font-size: .86rem; color: var(--ink-faint); }

/* ---------------- reception band ---------------- */
.band { padding: 0; }   /* the next section brings its own top padding */
/* A wide cinematic strip rather than a full 3:2 photograph, with its caption
   set on the image over a soft bottom shade. */
.band__fig { margin: 0; position: relative; overflow: hidden; border-radius: var(--r); }
.band__fig img { width: 100%; aspect-ratio: 21 / 9; }
.band__fig::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(12,20,16,.62) 0%, rgba(12,20,16,0) 42%);
}
.band__fig figcaption {
  position: absolute; left: clamp(1.4rem, 3vw, 2.6rem); bottom: clamp(1.2rem, 2.6vw, 2.2rem); z-index: 1;
  display: grid; gap: .35rem; color: #fff;
}
.band__k { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 400; line-height: 1.1; }
.band__t { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); }

/* ---------------- team banner ----------------
   One wide, low band. The photograph fills the right of it and dissolves
   into emerald on the left, and the copy sits on that dissolve. The team
   stand right of centre in the source crop, so the fade never reaches a face. */
.teamband {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--emerald); color: #F4F9F6;
  min-height: clamp(460px, 40vw, 600px); display: grid; align-items: center;
}
.teamband__img {
  position: absolute; top: 0; right: 0; z-index: -2;
  width: 64%; height: 100%; object-fit: cover; object-position: center 8%;
}
.teamband__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--emerald) 0%, var(--emerald) 36%, rgba(14,59,46,.7) 41%, rgba(14,59,46,0) 48%),
    linear-gradient(0deg, rgba(14,59,46,.45) 0%, rgba(14,59,46,0) 30%);
}
.teamband__inner { padding: clamp(4rem, 7vw, 6rem) 0; }
.teamband__copy { max-width: 29rem; }
.teamband .eyebrow { color: var(--gold); }
.teamband .h2 { color: #FCFDFC; }
.teamband__lede { margin-top: 1.4rem; color: rgba(244,249,246,.8); font-size: 1.02rem; }
.teamband__facts { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.teamband__facts li {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .55rem 1.05rem; border: 1px solid rgba(255,255,255,.26); border-radius: 999px;
  color: rgba(244,249,246,.88);
}

/* ---------------- facilities ---------------- */
.facil { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.facil__feature { margin: 0; }
.facil__feature img { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--r); }
.facil__feature figcaption {
  margin-top: .8rem; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.facil__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.fgroup h3 {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.3rem;
}
.fgroup ul { display: grid; gap: 1rem; }
.fgroup li { display: flex; align-items: center; gap: .8rem; font-size: .94rem; }
.fgroup i { color: var(--emerald); font-size: 1.35rem; flex: none; }

/* ---------------- visit ---------------- */
.visit { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
.addr { margin-top: 1.8rem; font-style: normal; font-size: 1.05rem; color: var(--ink-soft); line-height: 1.9; }

.factlist { margin: 2.2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; }
.factlist div { border-top: 1px solid var(--line); padding-top: .8rem; }
.factlist dt { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.factlist dd { margin: .35rem 0 0; font-size: 1.02rem; }
.factlist a { color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid currentColor; }

.map { margin-top: 2.4rem; height: 300px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--ivory-deep); }
.map iframe { width: 100%; height: 100%; border: 0; }

.visit__form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(2rem, 3.2vw, 2.8rem); }
.form__h { font-family: var(--serif); font-size: 2.2rem; font-weight: 400; }
.form__note { margin-top: .7rem; font-size: .88rem; color: var(--ink-faint); }
#enquiryForm { margin-top: 2rem; display: grid; gap: 1.3rem; }
.field { display: grid; gap: .5rem; }
.field--split { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field--split > div { display: grid; gap: .5rem; }
label { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
input, select, textarea {
  font-family: var(--sans); font-size: .98rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: .8rem .95rem; width: 100%;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); opacity: 1; }
input:focus, select:focus, textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 131, 36, .18);
}
textarea { resize: vertical; }
.hint { font-size: .8rem; color: var(--ink-faint); }
.err { font-size: .82rem; color: #A32219; }
input[aria-invalid="true"] { border-color: #A32219; }
.form__status { font-size: .88rem; color: var(--emerald); min-height: 1.3em; }

/* ---------------- footer ---------------- */
.foot { background: var(--emerald); color: #DCE8E3; padding-top: clamp(4rem, 7vw, 6rem); }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; padding-bottom: 4rem; }
.foot__brand { display: grid; justify-items: start; gap: .35rem; color: #fff; }
.foot__logo { width: 64px; height: 64px; border-radius: 10px; margin-bottom: 1rem; }
.foot__addr { margin-top: 1.4rem !important; font-size: .9rem; color: rgba(220,232,227,.72); line-height: 1.8; }
.foot__nav { display: grid; gap: .8rem; align-content: start; }
.foot__nav h4 {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .4rem;
}
.foot__nav a { text-decoration: none; font-size: .92rem; color: rgba(220,232,227,.82); transition: color .25s var(--ease); }
.foot__nav a:hover { color: var(--gold); }
.foot__base {
  border-top: 1px solid rgba(255,255,255,.14); padding: 1.6rem 0;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.foot__base p { font-size: .8rem; color: rgba(220,232,227,.6); }

/* ==========================================================================
   RESPONSIVE, scaling down from the desktop layout above
   ========================================================================== */
@media (max-width: 1180px) {
  .wrap { width: min(1280px, 100% - 3rem); }
  .nav__side { gap: 1.5rem; }
  .nav__side a { font-size: .72rem; letter-spacing: .12em; }
  .facil { grid-template-columns: 1fr; }
  .facil__cols { grid-template-columns: repeat(3, 1fr); }
  .bookbar__form { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .bookbar__go { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  :root { --nav-h: 74px; }
  .rail { display: none; }

  .nav__inner { grid-template-columns: 1fr auto 1fr; width: min(1400px, 100% - 2.5rem); }
  .nav__side { display: none; }
  .wordmark { grid-column: 2; grid-row: 1; }
  .nav__inner { gap: .75rem; }
  /* on phones only the language you can switch TO is shown, to fit beside the wordmark */
  .langsw--m {
    display: inline-flex; grid-column: 1; grid-row: 1; justify-self: start;
    min-height: 40px; padding: .45rem .8rem; font-size: .85rem;
  }
  .langsw--m .langsw__sep,
  html:not([lang="hi"]) .langsw--m [data-l="en"],
  html[lang="hi"] .langsw--m [data-l="hi"] { display: none; }
  .langsw--m .langsw__opt { color: inherit !important; font-weight: 400 !important; }
  .nav:has(.mobilenav.is-open) .langsw { color: var(--ink); border-color: var(--line); }
  .nav__toggle {
    grid-column: 3; grid-row: 1; justify-self: end;
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 0;
  }
  .nav__toggle span { display: block; width: 22px; height: 1.5px; background: #fff; margin-inline: auto;
    transition: transform .35s var(--ease), opacity .2s var(--ease); }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .mobilenav {
    display: grid; gap: 0; background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 14px 28px -18px rgba(30, 26, 18, .40);
    max-height: 0; overflow: hidden; transition: max-height .4s var(--ease);
  }
  .mobilenav.is-open { max-height: 460px; }
  .mobilenav a {
    padding: 1.05rem 1.5rem; text-decoration: none; font-size: .8rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
  }
  .mobilenav .btn { margin: 1.1rem 1.5rem 1.5rem; border-bottom: 0; }

  .welcome__grid { grid-template-columns: 1fr; gap: 3rem; }
  .rooms { grid-template-columns: 1fr 1fr; gap: 3rem 2rem; }
  .room__p { max-width: none; }
  /* team banner stacks: photo on top, copy underneath on emerald */
  .teamband { display: block; min-height: 0; }
  .teamband__img { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .teamband__shade { display: none; }
  .teamband__inner { padding: 2.8rem 0 4rem; }
  .band__fig img { aspect-ratio: 16 / 9; }
  .ratecard { grid-template-columns: 1fr; }
  .halls { grid-template-columns: 1fr; gap: 3rem; }
  .hall--wide .hall__media img { aspect-ratio: 16 / 9; }
  .weddings__cta { grid-template-columns: 1fr; }
  .dining { grid-template-columns: 1fr; }
  .dining__media img { aspect-ratio: 4 / 3; }
  .facil__cols { grid-template-columns: 1fr; gap: 2rem; }
  .visit { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }

  /* The photograph is the whole point of the hero, so on a phone it keeps a
     full viewport to itself and the booking card stacks underneath, lifted
     just enough to overlap the edge and read as attached to it. */
  .hero { min-height: 100dvh; }
  .hero__inner { padding-top: var(--nav-h); padding-bottom: 3rem; }
  /* Must stay positioned with a z-index: the hero is position:relative, and a
     static element is always painted beneath positioned ones, so the photo was
     covering the top of this card (the Check in / Check out labels) on phones. */
  .bookbar {
    position: relative; z-index: 5; left: auto; bottom: auto; transform: none;
    width: min(1280px, 100% - 3rem); margin: -3.5rem auto 0;
    padding: 1.5rem 1.5rem 1.2rem;
    box-shadow: 0 14px 40px rgba(20, 30, 24, .16);
  }
  .welcome { padding-top: clamp(4rem, 8vw, 6rem); }

  /* wordmark has to hold one line at 360px */
  .wordmark__name { font-size: 1.12rem; letter-spacing: .07em; }
  .wordmark__sub { font-size: .5rem; letter-spacing: .2em; }
  .wordmark__rule { width: 34px; }
  .wordmark { gap: .55rem; }
  .wordmark__logo { width: 36px; height: 36px; border-radius: 6px; }

  /* touch targets: 44px minimum, everywhere something is tappable */
  .mobilenav a { min-height: 52px; display: flex; align-items: center; }
  .foot__nav a, .factlist a { min-height: 44px; display: inline-flex; align-items: center; }
  .link { min-height: 44px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { width: min(1280px, 100% - 2rem); }
  .hero__title { font-size: clamp(2.8rem, 13vw, 4rem); }
  .hero__sub { font-size: 1rem; }
  .bookbar { width: min(1280px, 100% - 2rem); padding: 1.4rem 1.3rem 1.1rem; }
  .bookbar__form { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .bookbar__go { grid-column: 1 / -1; width: 100%; margin-top: .3rem; }

  /* iOS zooms the whole page in when a focused field is under 16px.
     Every text field on a phone is therefore pinned to 16px. */
  input, select, textarea, .bf input, .bf select { font-size: 16px; }

  /* At .62rem the field labels are ~10px of pale grey with .2em tracking,
     which on a phone reads as no label at all -- the booking bar looked like
     four unexplained boxes. Bigger, darker, tighter here. */
  .bf label {
    font-size: .72rem; letter-spacing: .12em; color: var(--ink-soft);
    font-weight: 500;
  }

  .h2 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .rooms { grid-template-columns: 1fr; gap: 3rem; }
  .room__h, .hall h3 { font-size: 1.75rem; }
  .hall--wide .hall__media img { aspect-ratio: 3 / 2; }
  .band__fig img { aspect-ratio: 4 / 3; }
  .ratecard .btn, .weddings__pitch .btn { width: 100%; }
  .stats { grid-template-columns: 1fr 1fr; gap: 2rem 1.2rem; }
  .stats__n { font-size: 2.8rem; }
  .factlist { grid-template-columns: 1fr; }
  .field--split { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .foot__base { flex-direction: column; gap: .4rem; }
}

/* ---------------- motion ----------------
   Enhancement only. Every element is fully visible without it; the classes
   below are added by script and animate from a visible state, never from
   opacity 0. Nothing here can hide content. */
.lift { transform: translateY(22px); transition: transform .9s var(--ease); }
.lift.in { transform: none; }

/* photos arrive slightly zoomed and ease back to rest */
.settle img { transform: scale(1.07); transition: transform 1.6s var(--ease); }
.settle.in img { transform: none; }
/* the bar photo floats up into its corner of the restaurant photo. Vertical
   only: it sits flush with the right edge, so any sideways offset pushed it
   past the screen on phones and let the whole page scroll horizontally. */
.float { transform: translateY(30px); transition: transform 1.2s var(--ease) .15s; }
.float.in { transform: none; }

/* hover zoom on the photos that had none (the pool is left out: its caption
   sits right under the image and a zoom would creep over it) */
.band__fig img, .dining__media img, .weddings__img img, .dining__inset img { transition: transform 1.1s var(--ease); }
.band__fig:hover img, .dining__media:hover img, .weddings__img:hover img,
.dining__inset:hover img { transform: scale(1.04); }

/* hero: photo slowly pulls back on load, headline rises into place.
   Transform only, so the text is readable from the very first frame. */
.hero { overflow: hidden; }
.hero__bg { animation: heroPull 9s var(--ease) both; will-change: transform; }
@keyframes heroPull { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero__kicker, .hero__title, .hero__sub { animation: rise 1.3s var(--ease) both; }
.hero__title { animation-delay: .12s; }
.hero__sub   { animation-delay: .26s; }
@keyframes rise { from { transform: translateY(28px); } to { transform: none; } }
.wordmark__rule { animation: rule 1.4s var(--ease) .3s both; }
@keyframes rule { from { width: 0; } }

/* stats keep their width while counting */
.stats__n { font-variant-numeric: tabular-nums; }

/* reading-progress line, above the nav */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 130; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }

/* nav underline stays on the section in view */
.nav__side a.is-active::after { width: 100%; }

/* gold buttons: a soft lift and one light sweep on hover */
.btn--gold { position: relative; overflow: hidden; isolation: isolate; }
.btn--gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn--gold:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); }
.btn--gold:hover, .btn--dark:hover { box-shadow: 0 12px 26px -12px rgba(20, 30, 24, .45); }
.btn:active { transform: translateY(0); }

.rail a i { transition: transform .35s var(--ease); }
.rail a:hover i { transform: translateY(-3px); }
.ticks i, .fgroup i { transition: transform .45s var(--ease), color .3s var(--ease); }
.ticks li:hover i, .fgroup li:hover i { transform: scale(1.18) rotate(-6deg); color: var(--gold-deep); }

/* ---------------- photo viewer ---------------- */
.zoomable { cursor: zoom-in; }
dialog.lb {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: #fff;
}
dialog.lb[open] { display: grid; place-items: center; animation: lbIn .35s var(--ease); }
dialog.lb::backdrop { background: rgba(8, 14, 11, .93); }
html:has(dialog.lb[open]) { overflow: hidden; }
@keyframes lbIn { from { transform: scale(.97); } to { transform: none; } }
.lb__fig { margin: 0; display: grid; justify-items: center; gap: 1rem; padding: 4.5rem 5.5rem 3.5rem; width: 100%; height: 100%; align-content: center; }
.lb__img { max-width: 100%; max-height: calc(100dvh - 12.5rem); width: auto; height: auto; object-fit: contain; border-radius: var(--r); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lb__img.is-new { animation: lbImg .5s var(--ease); }
@keyframes lbImg { from { transform: scale(.985) translateY(8px); } to { transform: none; } }
.lb__cap { max-width: 60ch; text-align: center; font-size: .9rem; color: rgba(255,255,255,.82); }
.lb__count { position: fixed; top: 1.6rem; left: 1.8rem; margin: 0; font-size: .72rem; letter-spacing: .2em; color: rgba(255,255,255,.7); }
.lb__btn {
  position: fixed; display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06);
  color: #fff; font-size: 1.4rem; cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.lb__btn:hover { background: var(--gold); border-color: var(--gold); color: #241503; }
.lb__close { top: 1rem; right: 1rem; }
.lb__prev { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lb__next { right: 1.2rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 620px) {
  .lb__fig { padding: 4.5rem 1rem 6rem; }
  .lb__img { max-height: calc(100dvh - 15rem); }
  .lb__prev, .lb__next { top: auto; bottom: 1.2rem; transform: none; }
  .lb__prev { left: calc(50% - 64px); }
  .lb__next { right: calc(50% - 64px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
  .lift, .settle img, .float { transform: none; }
}

/* ---------------- room photos ----------------
   Each room card quietly offers more: a small "6 photos" tag on its picture
   and a "View photos" link. Both open that room's photos in the viewer. */
.room__media { position: relative; }
/* Cards in a row are the same height, but their descriptions are not (the
   Executive runs to three lines), so the details line and the link used to
   sit at different heights. The details now drop to the bottom of the card. */
.room { display: flex; flex-direction: column; }
.room__p { margin-bottom: 1rem; }
.room__meta { margin-top: auto; }
.room__count {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 1; pointer-events: none;
  padding: .32rem .7rem; border-radius: 999px;
  background: rgba(14, 22, 18, .6); color: #fff; font-size: .72rem; letter-spacing: .03em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.room__more {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .8rem;
  font-size: .84rem; color: var(--gold-deep); text-decoration: none;
  transition: gap .3s var(--ease);
}
.room__more:hover { gap: .8rem; }
.room__more i { font-size: 1rem; }
.lb__note { max-width: 60ch; margin-top: -.55rem; text-align: center; font-size: .8rem; color: rgba(255,255,255,.58); }

/* ==========================================================================
   HINDI
   Devanagari has no capitals and no italics, and its vowel signs reach above
   and below the line. So in Hindi: no wide letter-spacing, no slanted accent
   words, more line height on headings, and the tiny caps labels get bigger.
   Brand names and phone numbers carry lang="en" and keep the English styling.
   ========================================================================== */
:lang(hi) { letter-spacing: 0 !important; }
/* Mukta at 300 is too thin to read comfortably in grey on ivory */
body:lang(hi) { font-weight: 400; }
.ital:lang(hi) { font-style: normal; }
.h2:lang(hi) { font-size: clamp(2.1rem, 3.3vw, 3.3rem); line-height: 1.35; }
/* smaller floor than English: Hindi words run longer, and a lone "में" on a
   phone line looked broken. The   in lang.js keeps it with its word. */
.hero__title:lang(hi) { font-size: clamp(2.2rem, 6vw, 5.6rem); line-height: 1.3; }
.room__h:lang(hi), .hall h3:lang(hi), .ratecard h3:lang(hi), .form__h:lang(hi) { line-height: 1.35; }
.weddings__pitch h3:lang(hi), .band__k:lang(hi) { line-height: 1.35; }
.eyebrow:lang(hi), .hero__kicker:lang(hi) { font-size: .92rem; }
label:lang(hi), .bf label:lang(hi), .factlist dt:lang(hi), .fgroup h3:lang(hi),
.foot__nav h4:lang(hi), .facil__feature figcaption:lang(hi) { font-size: .9rem; }
.band__t:lang(hi), .room__meta:lang(hi), .hall__spec span:lang(hi), .teamband__facts li:lang(hi) { font-size: .88rem; }
.nav__side a:lang(hi) { font-size: .95rem; }
.mobilenav a:lang(hi) { font-size: 1rem; }
.rail a span:lang(hi) { font-size: .7rem; }
.btn:lang(hi) { font-size: .98rem; }
.btn--sm:lang(hi) { font-size: .9rem; }
.link:lang(hi) { font-size: 1rem; }
.room__more:lang(hi) { font-size: .95rem; }
.room__count:lang(hi) { font-size: .8rem; }
.hall__kind:lang(hi) { font-size: .9rem; }
.lb__note:lang(hi) { font-size: .9rem; }