/* ==========================================================================
   HOTEL SHUBHAM GRAND
   ========================================================================== */

/* Tokens lifted from the group system (assets/css/sh-group-home-release.css
   on shubhamhotel.com), so the property site is visibly the same family:
   the deeper #000f22 navy, the warm brown-grey muted tone, the ivory
   gradient ground with its gold glow, and Cinzel over Satoshi.

   Deliberately NOT carried over: the Playfair Display / Poppins tokens that
   also sit in that stylesheet. They fight the documented Cinzel/Satoshi
   identity, and design_system.txt names Cinzel and Satoshi as the system. */
:root {
  --navy:        #000f22;
  --navy-soft:   #031428;
  --navy-deep:   #000a17;
  --gold:        #c5a059;
  --gold-bright: #d8bb78;
  --gold-mid:    #b8873e;          /* the group's eyebrow gold */
  --gold-ink:    #8a6a29;          /* gold dark enough for body text on ivory */
  --gold-soft:   rgba(197, 160, 89, 0.16);
  --cream:       #fdfbf7;
  --cream-deep:  #f4ecdf;
  --paper:       #fffefa;
  --ink:         #141414;
  --muted:       #5d574e;
  --faint:       #81786b;
  --line:        rgba(10, 25, 47, 0.13);
  --line-soft:   rgba(10, 25, 47, 0.07);
  --line-gold:   rgba(197, 160, 89, 0.36);
  --line-dark:   rgba(255, 255, 255, 0.14);
  --on-navy:     #f4efe5;
  --on-navy-mut: #a9b4c6;

  --ok:    #2f6b4a;
  --warn:  #8a6314;
  --error: #a3372a;

  /* The mockup uses a true-lowercase high-contrast serif, not Cinzel —
     Cinzel renders lowercase as small capitals, which reads as shouting at
     H1 size. Playfair Display is the face the mockup shows, and it is
     already in the group token set as --sh-font-display, so this stays
     inside the family rather than inventing a third typeface. */
  --display: "Playfair Display", Georgia, "Times New Roman", serif;

  --body:    "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* The group's type scale — considerably larger than a default hotel site.
     This is most of why that homepage feels composed rather than generic. */
  --text-eyebrow:    0.875rem;
  --text-body:       1.125rem;
  --text-body-large: 1.25rem;
  --text-small:      0.9375rem;
  --text-h1:    clamp(2.9rem, 4.85vw, 4.6rem);
  --text-h2-xl: clamp(2.6rem, 4.55vw, 4.2rem);
  --text-h2:    clamp(2.2rem, 3.95vw, 3.6rem);
  --text-h3:    clamp(1.55rem, 2vw, 2.1rem);
  --text-h4:    clamp(1.15rem, 1.35vw, 1.45rem);

  --wrap: 74rem;
  --r:    3px;
  --shadow:    0 1px 3px rgba(10, 25, 47, .07), 0 8px 28px rgba(10, 25, 47, .06);
  --shadow-lg: 0 2px 6px rgba(10, 25, 47, .09), 0 18px 48px rgba(10, 25, 47, .11);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* The group ground: a warm ivory gradient with a gold glow off the top-left,
   rather than flat cream. Subtle, but it is what stops the page reading as
   a white template. */
body {
  margin: 0;
  background:
    radial-gradient(circle at 14% 0%, rgba(197, 160, 89, 0.11), transparent 28rem),
    linear-gradient(180deg, #fffdf8 0%, var(--cream) 36%, #f8f0e4 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.72;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: .002em; }
p { margin: 0 0 1.05rem; }
ul, ol { margin: 0 0 1.05rem; padding-left: 1.25rem; }

a { color: var(--gold-ink); text-underline-offset: 2px; }
a:hover { color: var(--navy); }

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

.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 {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--navy); color: var(--on-navy); padding: .75rem 1.25rem;
}
.skip:focus { left: 0; }

/* -------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.wrap--narrow { max-width: 48rem; }
.center { text-align: center; }
.center .cta-row { justify-content: center; }

.section { padding: clamp(3rem, 6vw, 5.25rem) 0; }
.section-tint { background: var(--cream-deep); }
.section-dark { background: var(--navy); color: var(--on-navy); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--on-navy); }
.section-dark p, .section-dark li { color: var(--on-navy-mut); }
.section-dark .eyebrow { color: var(--gold-bright); }
.section-dark .sec-lead { color: var(--on-navy-mut); }
.section-dark a { color: var(--gold-bright); }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 68rem) {
  .grid-5, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.split--wide { grid-template-columns: 1.6fr 1fr; align-items: start; }
@media (max-width: 56rem) { .split, .split--wide { grid-template-columns: 1fr; } }

.split-media img, .split-media .photo-todo { width: 100%; border-radius: var(--r); box-shadow: var(--shadow); }

/* ----------------------------------------------------------- typography */

/* Group eyebrow: 12px, .23em tracking, flanked by 44px hairlines and a small
   gold lotus. On the group site this device opens nearly every section, and
   it is the strongest single carrier of the brand's identity. */
.eyebrow {
  display: flex; align-items: center; gap: 15px;
  font-family: var(--body); font-size: 12px; font-weight: 600;
  letter-spacing: .23em; text-transform: uppercase; color: var(--gold-mid);
  line-height: 1; margin: 0 0 1rem;
}
.eyebrow::before {
  content: ""; flex: 0 0 auto; width: 44px; height: 1px;
  background: var(--line-gold);
}
.center .eyebrow { justify-content: center; }
.center .eyebrow::after {
  content: ""; flex: 0 0 auto; width: 44px; height: 1px;
  background: var(--line-gold);
}
.section-dark .eyebrow { color: var(--gold-bright); }
.section-dark .eyebrow::before, .section-dark .eyebrow::after { background: rgba(216,187,120,.4); }

/* Lotus mark, as used on the group section heads. */
.eyebrow--lotus::before {
  width: 22px; height: 22px; background: none;
  background-image: url("../img/motif/hero-eyebrow-lotus-supplied.png");
  background-size: contain; background-repeat: no-repeat; background-position: center;
}

.sec-head { margin-bottom: 2.5rem; max-width: 46rem; }
.center .sec-head { margin-left: auto; margin-right: auto; }
.sec-title { font-size: var(--text-h2); margin: 0 0 .7rem; line-height: 1.08; }

/* Gold rule under a section title — the group's heading divider. */
.sec-title + .sec-divider,
.sec-head .sec-divider {
  display: block; width: 120px; height: 12px; margin: 0 0 1rem;
  background-image: url("../img/motif/experience-heading-divider.png");
  background-size: contain; background-repeat: no-repeat; background-position: left center;
}
.center .sec-divider { margin-inline: auto; background-position: center; }
.sub-title { font-family: var(--display); font-size: 1.4rem; margin: 2rem 0 .75rem; }
.sec-lead { color: var(--muted); font-size: 1.05rem; margin: 0; max-width: 44rem; }
.center .sec-lead { margin-left: auto; margin-right: auto; }

.lede { font-size: 1.1rem; color: var(--muted); max-width: 44rem; margin-bottom: 1.75rem; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

.note-line {
  font-size: .875rem; color: var(--muted); font-style: italic;
  border-left: 2px solid var(--gold); padding-left: 1rem; margin-top: 2rem; max-width: 46rem;
}
.section-dark .note-line { color: var(--on-navy-mut); }

.compliance { font-size: .82rem; color: var(--muted); margin-top: 1rem; }
.compliance--center { text-align: center; max-width: 42rem; margin-inline: auto; }

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--body); font-size: .875rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  padding: .95rem 1.6rem; border: 1.5px solid transparent; border-radius: var(--r);
  cursor: pointer; transition: all .25s var(--ease); text-align: center;
}
.btn-primary { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--navy); }

.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--on-navy); }
.section-dark .btn-ghost { color: var(--on-navy); border-color: rgba(242,237,227,.45); }
.section-dark .btn-ghost:hover { background: var(--on-navy); color: var(--navy); border-color: var(--on-navy); }

.btn-link {
  background: none; border: none; padding: .95rem .4rem; color: var(--gold-ink);
  text-decoration: underline; text-underline-offset: 4px;
}
.section-dark .btn-link { color: var(--gold-bright); }
.btn-link:hover { color: var(--navy); }
.section-dark .btn-link:hover { color: var(--on-navy); }

.btn-sm { padding: .7rem 1.1rem; font-size: .78rem; }
.btn-lg { padding: 1.05rem 2rem; }
.btn-block { display: flex; width: 100%; }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.5rem; }
.cta-row--center { justify-content: center; }
.cta-row--wrap { max-width: 46rem; margin-inline: auto; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-ink); text-decoration: none;
}
.link-arrow::after { content: "\2192"; transition: transform .25s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------- utility bar */

.utility { background: var(--navy-deep); color: var(--on-navy-mut); font-size: .78rem; }
.utility-in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 1.5rem; }
.utility a { color: var(--gold-bright); text-decoration: none; }
.utility a:hover { text-decoration: underline; }
.utility i { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); margin: 0 .55rem; vertical-align: middle; }
@media (max-width: 56rem) { .utility-left { display: none; } .utility-in { justify-content: center; } }

/* -------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--cream); border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled { background: rgba(253,251,247,.97); backdrop-filter: blur(8px); box-shadow: var(--shadow); }

.header-in { display: flex; align-items: center; gap: 1.5rem; padding-block: .85rem; }

.brand { text-decoration: none; color: var(--navy); flex-shrink: 0; line-height: 1.1; }
.brand-name { display: block; font-family: var(--display); font-size: 1.28rem; font-weight: 700; letter-spacing: .01em; }
.brand-sub { display: block; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); margin-top: .15rem; }

.desk-nav { display: flex; gap: 1.35rem; margin-left: auto; }
.desk-nav a {
  font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--ink);
  text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.desk-nav a:hover, .desk-nav a[aria-current="page"] { color: var(--gold-ink); border-bottom-color: var(--gold); }

.header-cta { display: flex; gap: .5rem; margin-left: auto; }
.desk-nav + .header-cta { margin-left: 0; }

.burger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; padding: .6rem; cursor: pointer; }
.burger span[aria-hidden] { display: block; width: 22px; height: 2px; background: var(--navy); }

@media (max-width: 78rem) { .desk-nav { display: none; } .burger { display: flex; } }
@media (max-width: 30rem) { .hide-sm { display: none; } }

/* --------------------------------------------------------- mobile nav */

.nav-backdrop { position: fixed; inset: 0; background: rgba(6,16,32,.55); z-index: 95; }
.mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(22rem, 88vw); z-index: 96;
  background: var(--navy); color: var(--on-navy); padding: 1.5rem;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .35s var(--ease);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.mobile-nav-top .brand-name { color: var(--on-navy); font-size: 1.1rem; }
.nav-close { background: none; border: 0; color: var(--on-navy); font-size: 2rem; line-height: 1; cursor: pointer; padding: 0 .5rem; }
.mobile-links { display: flex; flex-direction: column; }
.mobile-links a {
  color: var(--on-navy); text-decoration: none; font-family: var(--display); font-size: 1.3rem;
  padding: .8rem 0; border-bottom: 1px solid rgba(242,237,227,.12);
}
.mobile-links a[aria-current="page"] { color: var(--gold-bright); }
.mobile-nav-foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .6rem; }

body.nav-open { overflow: hidden; }

/* ------------------------------------------------------------ crumbs */

.crumbs { background: var(--cream-deep); border-bottom: 1px solid var(--line-soft); font-size: .8rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: .7rem 0; }
.crumbs li + li::before { content: "/"; color: var(--faint); margin-right: .5rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-ink); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------- heroes */

.hero, .page-hero--media {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(78vh, 40rem); color: var(--on-navy); overflow: hidden;
  background: var(--navy);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media .photo-todo { width: 100%; height: 100%; object-fit: cover; }
/* Directional scrim.
   A flat top-to-bottom wash darkens the whole frame — including the sky,
   which is the best thing in the photograph. Weight it to the left, where
   the text actually sits, and let the building and sky stay bright. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(6,16,32,.90) 0%,
      rgba(6,16,32,.74) 32%,
      rgba(6,16,32,.34) 62%,
      rgba(6,16,32,.12) 100%),
    linear-gradient(180deg,
      rgba(6,16,32,.20) 0%,
      rgba(6,16,32,0) 30%,
      rgba(6,16,32,.55) 100%);
}
@media (max-width: 48rem) {
  /* Narrow screens put text over the middle of the frame, so go back to a
     vertical gradient — a side-weighted one would leave text unreadable. */
  .hero-scrim {
    background: linear-gradient(180deg, rgba(6,16,32,.45) 0%, rgba(6,16,32,.62) 45%, rgba(6,16,32,.88) 100%);
  }
}

/* ---------------------------------------------------------- trust strip */
.trust-strip { background: var(--navy); border-top: 1px solid rgba(216,187,120,.22); }
.trust-strip-in {
  display: grid; grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr));
  gap: 1px; background: rgba(216,187,120,.18);
}
.trust-item {
  background: var(--navy); padding: 1.15rem 1.25rem;
  display: flex; gap: .8rem; align-items: flex-start;
}
.trust-item svg { flex: 0 0 auto; width: 22px; height: 22px; stroke: var(--gold-bright); fill: none; stroke-width: 1.6; margin-top: .1rem; }
.trust-item b { display: block; color: var(--on-navy); font-size: .93rem; font-weight: 700; line-height: 1.3; margin-bottom: .18rem; }
.trust-item span { color: var(--on-navy-mut); font-size: .82rem; line-height: 1.45; }
@media (max-width: 62rem) { .trust-strip-in { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .trust-strip-in { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ rooms showcase */
/* Rooms are the primary product, so they get the largest media on the page. */
.room-showcase { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 46rem) { .room-showcase { grid-template-columns: 1fr; } }

.room-big { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.room-big-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tint); }
.room-big-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.room-big:hover .room-big-media img { transform: scale(1.04); }
.room-big-body { padding: clamp(1.1rem, 2vw, 1.5rem); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.room-big-body h3 { font-size: 1.28rem; margin: 0; }
.room-big-body h3 a { color: inherit; text-decoration: none; }
.room-big-body h3 a:hover { color: var(--gold-deep); }
.room-big .room-badge { margin: 0; }
.room-big-best { color: var(--muted); font-size: .92rem; margin: 0; }
.room-big-foot { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); }
.room-rate { font-size: .82rem; color: var(--muted); }
.room-rate b { display: block; font-size: 1.05rem; color: var(--ink); font-weight: 700; }
.hero-in { position: relative; z-index: 2; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-bright); margin: 0 0 1rem; }
.hero-title { font-size: clamp(2.1rem, 5.4vw, 3.6rem); margin: 0 0 1rem; max-width: 20ch; }
.hero-lead { font-size: 1.05rem; color: var(--on-navy-mut); max-width: 46rem; margin-bottom: 1.5rem; }
.hero .btn-ghost, .page-hero--media .btn-ghost { color: var(--on-navy); border-color: rgba(242,237,227,.5); }
.hero .btn-ghost:hover, .page-hero--media .btn-ghost:hover { background: var(--on-navy); color: var(--navy); }
.hero .btn-link, .page-hero--media .btn-link { color: var(--gold-bright); }

.page-hero { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.page-hero h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: 1rem; }
.page-hero--split { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ------------------------------------------------------ booking widget */

.booking { background: var(--navy); color: var(--on-navy); padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; }
.booking--compact { padding: 1.5rem 0; }
.booking-head { text-align: center; margin-bottom: 1.5rem; }
.booking-head h2 { font-size: 1.75rem; color: var(--on-navy); }
.booking-head p { color: var(--on-navy-mut); margin: .35rem 0 0; }

.booking-form { display: grid; grid-template-columns: repeat(12, 1fr); gap: .75rem; align-items: end; }
.bf-field { grid-column: span 3; display: flex; flex-direction: column; gap: .3rem; }
.bf-field--sm { grid-column: span 2; }
.bf-field--promo { grid-column: span 2; }
.bf-submit { grid-column: span 12; margin-top: .25rem; }

@media (min-width: 62rem) {
  .bf-field { grid-column: span 2; }
  .bf-field:nth-child(1), .bf-field:nth-child(2) { grid-column: span 2; }
  .bf-submit { grid-column: span 12; }
}
@media (max-width: 62rem) {
  .bf-field, .bf-field--sm, .bf-field--promo { grid-column: span 6; }
}
@media (max-width: 34rem) {
  .bf-field { grid-column: span 12; }
  .bf-field--sm { grid-column: span 4; }
  .bf-field--promo { grid-column: span 12; }
}

.booking-form label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-bright); }
.booking-form input {
  font-family: var(--body); font-size: .95rem; padding: .75rem .8rem;
  border: 1px solid rgba(242,237,227,.22); border-radius: var(--r);
  background: rgba(255,255,255,.06); color: var(--on-navy); width: 100%;
}
.booking-form input::placeholder { color: var(--on-navy-mut); }
.booking-form input:focus { border-color: var(--gold); background: rgba(255,255,255,.1); }
/* Make the native date/time picker icon visible on a dark field */
.booking-form input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); cursor: pointer; }

.booking-micro { font-size: .8rem; color: var(--on-navy-mut); text-align: center; margin: 1rem 0 0; }
.booking-micro a { color: var(--gold-bright); }

.booking-results:not(:empty) { margin-top: 1.5rem; }
.avail-msg { background: rgba(255,255,255,.07); border-left: 3px solid var(--gold); padding: 1rem 1.25rem; border-radius: var(--r); }
.avail-msg.is-error { border-left-color: #e08b7c; }
.avail-list { display: grid; gap: .6rem; margin-top: 1rem; }
.avail-row {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.07); padding: .9rem 1.1rem; border-radius: var(--r);
}
.avail-row strong { font-family: var(--display); font-size: 1.15rem; }
.avail-rate { font-weight: 700; color: var(--gold-bright); }

/* ---------------------------------------------------------- route cards */

.route-card {
  display: flex; flex-direction: column; gap: .4rem; text-decoration: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem 1.35rem; color: var(--ink);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.route-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold); color: var(--ink); }
.route-tag { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); margin: 0; }
.route-card h3 { font-size: 1.25rem; }
.route-card p { font-size: .9rem; color: var(--muted); margin: 0; flex-grow: 1; }
.route-cta { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); margin-top: .6rem; }
.route-cta::after { content: " \2192"; }

/* ----------------------------------------------------------- room cards */

.room-card {
  display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.room-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.room-card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-deep); }
.room-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.room-card:hover .room-card-media img { transform: scale(1.05); }
.room-card-body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .5rem; flex-grow: 1; }
.room-badge { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin: 0; }
.room-card h3 { font-size: 1.3rem; margin: 0; }
.room-card h3 a { color: var(--ink); text-decoration: none; }
.room-card h3 a:hover { color: var(--gold-ink); }
.room-best { font-size: .875rem; color: var(--muted); margin: 0; }
.room-best-label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: .35rem 0 0; }
.room-card-foot { margin-top: auto; padding-top: .75rem; display: grid; gap: .6rem; justify-items: center; }

.room-specs { display: grid; gap: .25rem; margin: .35rem 0; font-size: .82rem; }
.room-specs div { display: flex; gap: .5rem; }
.room-specs dt { color: var(--faint); min-width: 4.5rem; }
.room-specs dd { margin: 0; font-weight: 600; }

.amenity-mini { list-style: none; padding: 0; margin: .25rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.amenity-mini li { font-size: .72rem; color: var(--muted); background: var(--cream-deep); padding: .18rem .5rem; border-radius: 2px; }

/* --------------------------------------------------------------- chips */

.chip-list { list-style: none; padding: 0; margin: .5rem 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-list li { font-size: .8rem; background: var(--cream-deep); border: 1px solid var(--line-soft); padding: .3rem .75rem; border-radius: 100px; color: var(--muted); }
.chip-list--lg li { font-size: .875rem; padding: .45rem 1rem; }
.chip-list--center { justify-content: center; }
.section-dark .chip-list li { background: rgba(255,255,255,.07); border-color: rgba(242,237,227,.15); color: var(--on-navy-mut); }

/* ---------------------------------------------------------- tick lists */

.tick-list { list-style: none; padding: 0; margin: .75rem 0; }
.tick-list li { position: relative; padding-left: 1.5rem; margin-bottom: .45rem; font-size: .92rem; }
.tick-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--gold-ink); font-weight: 700; font-size: .85rem;
}
.section-dark .tick-list li::before { color: var(--gold-bright); }
.tick-list--cols { columns: 2; column-gap: 2rem; }
.tick-list--cols li { break-inside: avoid; }
.tick-list--lg li { font-size: 1rem; margin-bottom: .65rem; }
@media (max-width: 40rem) { .tick-list--cols { columns: 1; } }

/* ------------------------------------------------------- capacity cards */

.cap-card { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--r); padding: 1.75rem 1.5rem; }
.cap-number { font-family: var(--display); font-size: 3.4rem; line-height: 1; font-weight: 700; color: var(--navy); margin: 0; }
.cap-unit { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin: .35rem 0 .9rem; }
.cap-card h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.cap-card p { font-size: .9rem; color: var(--muted); margin: 0; }
.cap-card--facilities { border-top-color: var(--navy); }
.cap-card--facilities h3 { margin-bottom: .75rem; }

.stat-row { list-style: none; padding: 0; margin: 1.25rem 0; display: flex; flex-wrap: wrap; gap: 2rem; }
.stat-row li { display: flex; flex-direction: column; }
.stat-row strong { font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--navy); }
.stat-row span { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }

/* ------------------------------------------------------- package cards */

.pkg-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; }
.section-dark .pkg-card { background: var(--navy-soft); border-color: rgba(242,237,227,.14); }
.pkg-card--featured { border-color: var(--gold); border-width: 2px; }
.pkg-flag { font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 .4rem; }
.section-dark .pkg-flag { color: var(--gold-bright); }
.pkg-card h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.pkg-price { display: flex; flex-direction: column; margin: 0 0 .9rem; }
.pkg-from { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.pkg-price strong { font-family: var(--display); font-size: 2.1rem; line-height: 1.1; color: var(--gold-ink); }
.section-dark .pkg-price strong { color: var(--gold-bright); }
.pkg-gst { font-size: .78rem; color: var(--muted); }
.pkg-ideal { font-size: .88rem; color: var(--muted); margin-bottom: .75rem; }
.pkg-card .tick-list { flex-grow: 1; }
.pkg-card .btn { margin-top: 1rem; }

.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
.plate-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.35rem 1.15rem; text-align: center; }
.plate-card--veg { border-top: 3px solid #4a7c3f; }
.plate-card--non-veg { border-top: 3px solid #9b4a2f; }
.plate-diet { font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 .35rem; }
.plate-card h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.plate-price { display: flex; flex-direction: column; margin: 0 0 .9rem; }
.plate-price strong { font-family: var(--display); font-size: 1.9rem; line-height: 1.1; color: var(--navy); }
.plate-price span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

/* ----------------------------------------------------------- F&B cards */

.fb-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.fb-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream-deep); }
.fb-media img { width: 100%; height: 100%; object-fit: cover; }
.fb-body { padding: 1.5rem; }
.fb-body h3 { font-size: 1.5rem; margin-bottom: .3rem; }
.fb-meta { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: .75rem; }

/* ------------------------------------------------- mini / use / dept cards */

.mini-card, .use-card, .dept-card, .landmark-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.35rem 1.25rem; text-decoration: none; color: var(--ink); display: block;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.mini-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); color: var(--ink); }
.mini-card h3, .use-card h3, .dept-card h3, .landmark-card h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.mini-card p, .use-card p, .dept-card p { font-size: .875rem; color: var(--muted); margin: 0; }
.use-card--sm { text-align: center; padding: 1.1rem .9rem; }
.use-card--sm h3 { font-size: .98rem; margin: 0; }
.dept-card { display: flex; flex-direction: column; gap: .3rem; }
.dept-contact { font-size: .95rem !important; font-weight: 700; margin-top: .35rem !important; }
.dept-card .cta-row { margin-top: auto; padding-top: .75rem; }
.landmark-card { border-left: 3px solid var(--gold); }
.landmark-dist { font-size: .82rem; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------- step lists */

.step-list { list-style: none; counter-reset: step; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 56rem) { .step-list { grid-template-columns: 1fr; } }
.step-list li { counter-increment: step; position: relative; padding-top: 2.75rem; }
.step-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--gold);
}
.step-list h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.step-list p { font-size: .9rem; color: var(--muted); margin: 0; }

/* ------------------------------------------------------------- sidebar */

.side-card { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--r); padding: 1.6rem 1.4rem; position: sticky; top: 6rem; display: grid; gap: .7rem; }
.side-card h3 { font-size: 1.25rem; }
.side-card p { font-size: .88rem; color: var(--muted); margin: 0; }
.side-card hr { border: 0; border-top: 1px solid var(--line-soft); margin: .5rem 0; }
.side-note { font-size: .85rem !important; }

.spec-table { display: grid; gap: 0; margin: 1rem 0; }
.spec-table div { display: flex; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line-soft); }
.spec-table dt { color: var(--muted); min-width: 11rem; font-size: .875rem; }
.spec-table dd { margin: 0; font-weight: 600; font-size: .92rem; }

.address-block { font-style: normal; line-height: 1.8; margin-bottom: 1rem; }

/* --------------------------------------------------------------- forms */

.form-section { background: var(--cream-deep); }
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.5rem, 3.5vw, 2.75rem); box-shadow: var(--shadow); }
.form-head { margin-bottom: 1.75rem; }

.fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.25rem; }
@media (max-width: 44rem) { .fields { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--full { grid-column: 1 / -1; }
@media (max-width: 44rem) { .field--half { grid-column: 1 / -1; } }

.field label, .radio-set legend {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0;
}
.req { color: var(--error); }

.field input, .field select, .field textarea {
  font-family: var(--body); font-size: .95rem; padding: .8rem .85rem; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--cream); color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197,160,89,.18); outline: none;
}
.field textarea { resize: vertical; min-height: 6rem; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--error); }
.field-error { font-size: .78rem; color: var(--error); margin: 0; }

.radio-set { border: 0; padding: 0; margin: 0; }
.radio-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.radio { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; background: var(--cream); border: 1px solid var(--line); border-radius: 100px; padding: .45rem .9rem; cursor: pointer; }
.radio:hover { border-color: var(--gold); }
.radio input { width: auto; margin: 0; accent-color: var(--gold-ink); }
.radio:has(input:checked) { border-color: var(--gold); background: rgba(197,160,89,.12); font-weight: 600; }

.help { font-size: .78rem; color: var(--faint); margin: .1rem 0 0; }

.is-conditional { display: none; }
.is-conditional.is-shown { display: flex; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: .82rem; color: var(--muted); font-style: italic; margin-top: 1.25rem; }
.form-actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-privacy { font-size: .78rem; color: var(--faint); margin: 0; }

.form-status:not(:empty) { margin-top: 1.25rem; padding: .9rem 1.1rem; border-radius: var(--r); font-size: .9rem; }
.form-status.is-error { background: rgba(163,55,42,.09); border-left: 3px solid var(--error); color: var(--error); }
.form-status.is-ok { background: rgba(47,107,74,.09); border-left: 3px solid var(--ok); color: var(--ok); }

button[disabled] { opacity: .6; cursor: progress; }

/* ----------------------------------------------------------------- FAQ */

.faq-block { background: var(--cream-deep); }
.faq-list { display: grid; gap: .6rem; max-width: 52rem; }
.faq { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 3rem 1.05rem 1.25rem;
  font-family: var(--display); font-size: 1.12rem; font-weight: 600; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-mark { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; }
.faq-mark::before, .faq-mark::after { content: ""; position: absolute; background: var(--gold-ink); transition: transform .25s var(--ease); }
.faq-mark::before { top: 5px; left: 0; width: 12px; height: 2px; }
.faq-mark::after  { top: 0; left: 5px; width: 2px; height: 12px; }
.faq[open] .faq-mark::after { transform: rotate(90deg); opacity: 0; }
.faq-a { padding: 0 1.25rem 1.15rem; }
.faq-a p { font-size: .95rem; color: var(--muted); margin: 0; max-width: 44rem; }

/* ------------------------------------------------------------- filters */

.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filter-chip {
  font-family: var(--body); font-size: .78rem; font-weight: 600; letter-spacing: .05em;
  padding: .5rem 1.1rem; border: 1px solid var(--line); border-radius: 100px;
  background: var(--paper); color: var(--muted); cursor: pointer; transition: all .2s var(--ease);
}
.filter-chip:hover { border-color: var(--gold); color: var(--gold-ink); }
.filter-chip.is-active { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }

.offer-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.offer-centre { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); margin: 0; }
.offer-name { font-size: 1.3rem; margin: 0; }
.offer-blurb { font-size: .9rem; color: var(--muted); margin: 0; flex-grow: 1; }
.offer-window { font-size: .78rem; color: var(--faint); margin: 0; }
.offer-card .btn { margin-top: .75rem; }
[data-hidden] { display: none !important; }

/* ------------------------------------------------------------- gallery */

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.gallery-item { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.gallery-item img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.gallery-item figcaption { font-size: .8rem; color: var(--muted); padding: .7rem .85rem; }
.gallery-cta-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-top: 2.5rem; text-align: left; }

.empty-state { background: var(--paper); border: 1px dashed var(--line); border-radius: var(--r); padding: 2.5rem 2rem; }
.empty-state h2 { font-size: 1.5rem; margin-bottom: .6rem; }
.empty-state p { color: var(--muted); max-width: 40rem; margin-inline: auto; }

.map-frame { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; line-height: 0; }
.map-frame iframe { display: block; }

/* ---------------------------------------------------------- thank you */

.thankyou { padding-top: clamp(3rem, 8vw, 6rem); }
.ty-mark {
  width: 4rem; height: 4rem; margin: 0 auto 1.5rem; border-radius: 50%;
  background: var(--gold); color: var(--navy);
  display: flex; align-items: center; justify-content: center; font-size: 1.9rem;
}
.ty-ref { font-size: 1.05rem; margin-bottom: 1.25rem; }
.ty-ref strong { font-family: var(--display); font-size: 1.35rem; letter-spacing: .04em; color: var(--gold-ink); }
.ty-rule { border: 0; border-top: 1px solid var(--line); margin: 3rem 0 2rem; }

/* ---------------------------------------------------- photo placeholder */

.photo-todo {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 4 / 3; width: 100%;
  background: repeating-linear-gradient(45deg, var(--cream-deep), var(--cream-deep) 10px, var(--cream) 10px, var(--cream) 20px);
  border: 1px dashed var(--line); color: var(--faint);
  font-size: .78rem; letter-spacing: .04em; padding: 1rem;
}
.photo-todo span { max-width: 20ch; }

/* -------------------------------------------------------------- footer */

.site-footer { background: var(--navy-deep); color: var(--on-navy-mut); padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem; font-size: .875rem; }
.footer-top { display: grid; grid-template-columns: 18rem 1fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(242,237,227,.12); }
@media (max-width: 62rem) { .footer-top { grid-template-columns: 1fr; } }

.footer-name { font-family: var(--display); font-size: 1.4rem; color: var(--on-navy); margin: 0 0 .6rem; }
.footer-addr, .footer-contact, .footer-group { margin: 0 0 .8rem; line-height: 1.7; }
.site-footer a { color: var(--on-navy-mut); text-decoration: none; }
.site-footer a:hover { color: var(--gold-bright); text-decoration: underline; }
.footer-group a { color: var(--gold-bright); }

.footer-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.75rem; }
@media (max-width: 62rem) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 40rem) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
.footer-col h3 { font-family: var(--body); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: .8rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .45rem; }

.footer-hours { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding: 1.75rem 0; border-bottom: 1px solid rgba(242,237,227,.12); }
@media (max-width: 62rem) { .footer-hours { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .footer-hours { grid-template-columns: 1fr; } }
.footer-hours strong { display: block; color: var(--on-navy); font-family: var(--display); font-size: 1.05rem; }
.footer-hours span { font-size: .82rem; }

.footer-bottom { padding-top: 1.5rem; font-size: .78rem; }
.footer-bottom p { margin: 0 0 .5rem; }
.footer-legal { color: var(--faint); max-width: 52rem; }

/* --------------------------------------------------------- sticky bar */

.sticky-bar { display: none; }
@media (max-width: 56rem) {
  .sticky-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
    display: grid; grid-template-columns: 1.3fr 1fr 1fr;
    background: var(--navy); border-top: 1px solid rgba(242,237,227,.14);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sticky-btn {
    padding: .95rem .5rem; text-align: center; text-decoration: none;
    font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--on-navy); border-right: 1px solid rgba(242,237,227,.14);
  }
  .sticky-btn:last-child { border-right: 0; }
  .sticky-btn--primary { background: var(--gold); color: var(--navy); }
  .sticky-btn--wa { color: var(--gold-bright); }
  body { padding-bottom: 3.5rem; }
}

/* -------------------------------------------------- final CTA alt links */
.final-alt {
  margin: 1.6rem 0 0;
  font-size: .9rem;
  color: var(--on-navy-mut);
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  align-items: center; justify-content: center;
}
.final-alt a {
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(216,187,120,.35);
  padding-bottom: 1px;
}
.final-alt a:hover { border-bottom-color: var(--gold-bright); }

/* ==========================================================================
   HERO — Hotel Shubham Grand
   Built to the supplied mockup: copy left, photograph right, deep navy
   field, chakra and temple line art behind, stat bar across the bottom.
   ========================================================================== */

.hero-grand {
  position: relative;
  background:
    radial-gradient(ellipse at 78% 34%, rgba(197,160,89,.16), transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, #04182f 55%, #000d1d 100%);
  color: var(--on-navy);
  overflow: clip;
  padding-block: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 4vw, 3rem);
}

/* Line-art ornament, low opacity so it reads as texture not decoration. */
.hero-art { position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: contain; }
/* Sits at the top-right corner, starting just below the header rule —
   the header is 95px and the hero is pulled up underneath it. */
.hero-art--chakra {
  top: 95px; right: -6rem; left: auto;
  width: min(34rem, 42vw); aspect-ratio: 1;
  background-image: url("../img/motif/hero-top-right-chakra-gold.png");
  background-position: top right; opacity: .13;
}
/* Runs from below the header down to the base of the hero, hugging the left
   edge, and fades out to the right so it never competes with the copy.

   Note: with both `top` and `bottom` set, the height is resolved by those two
   and `aspect-ratio` is ignored — kept below so the ratio is still declared if
   either offset is later removed. */
.hero-art--temple {
  bottom: 0;
  top: 8rem;
  left: -6px;
  width: 26rem;
  aspect-ratio: 525 / 900;
  background-image: url("../img/motif/hero-left-background-temple-gold.png");
  background-position: bottom left;
  opacity: .2;
  -webkit-mask-image: linear-gradient(
    90deg, #000 0%, rgba(0, 0, 0, .68) 22%, rgba(0, 0, 0, .32) 46%, transparent 78%);
  mask-image: linear-gradient(
    90deg, #000 0%, rgba(0, 0, 0, .68) 22%, rgba(0, 0, 0, .32) 46%, transparent 78%);
}
@media (max-width: 60rem) { .hero-art--chakra, .hero-art--temple { display: none; } }

.hero-grand-in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
@media (max-width: 62rem) { .hero-grand-in { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- copy */

.hero-welcome {
  font-size: 13px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-bright); margin: 0 0 .55rem;
}
.hero-welcome-rule {
  display: block; width: 108px; height: 11px; margin-bottom: 1.5rem;
  background: url("../img/motif/hero-eyebrow-divider-gold.png") left center / contain no-repeat;
  opacity: .95;
}

.hero-h1 {
  font-size: var(--text-h1); line-height: 1.08; color: #fff;
  margin: 0 0 1.1rem; max-width: 17ch; font-weight: 500;
  letter-spacing: -0.02em;   /* the group tracks its display type tight */
}

.hero-kicker {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.05vw, 1.85rem); line-height: 1.34;
  color: var(--gold-bright); margin: 0 0 1.1rem; font-weight: 400;
}

.hero-rule { display: block; width: 58px; height: 2px; background: var(--gold); margin-bottom: 1.35rem; }

.hero-intro {
  font-size: 1.02rem; line-height: 1.72; color: rgba(233,238,246,.80);
  max-width: 34rem; margin: 0 0 1.9rem;
}

/* ------------------------------------------------------- proof points */

/* Grid, not flex-wrap. Three equal columns guarantee a single row at
   desktop — with flex the third item dropped to its own line as soon
   as the labels got long. min-width:0 lets them compress instead. */
.hero-points {
  list-style: none; margin: 0 0 2rem; padding: 0;
  /* Content-sized columns, not equal thirds. Equal thirds forced the
     longest label ("Trusted Hospitality") to wrap inside its cell;
     auto lets each item take the width its text actually needs, which
     is also how the mockup spaces them. */
  display: grid; grid-template-columns: repeat(3, auto);
  justify-content: start; align-items: center;
}
.hero-points li {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
  padding: 0 .8rem; border-left: 1px solid rgba(216,187,120,.28);
}
.hero-points li:first-child { padding-left: 0; border-left: 0; }
.hero-points span { min-width: 0; }
.hero-points img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.hero-points b {
  display: block; font-size: .82rem; font-weight: 600; color: #fff;
  line-height: 1.25; letter-spacing: -.005em; white-space: nowrap;
}
.hero-points em {
  display: block; font-style: normal; font-size: .73rem; line-height: 1.3;
  color: rgba(233,238,246,.62); white-space: nowrap;
}
@media (max-width: 74rem) and (min-width: 46.01rem) {
  .hero-points b  { white-space: normal; }
  .hero-points em { white-space: normal; }
}
@media (max-width: 46rem) {
  .hero-points { grid-template-columns: 1fr; gap: .9rem; justify-content: stretch; }
  .hero-points li { padding: 0; border-left: 0; }
  .hero-points b, .hero-points em { white-space: normal; }
}

.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn-ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Gold outline button, as the mockup's "Explore Rooms". */
.btn-outline-gold { background: transparent; color: var(--gold-bright); border-color: rgba(216,187,120,.62); }
.btn-outline-gold:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }

/* -------------------------------------------------------------- photo */

.hero-shot { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: 0 26px 70px rgba(0,0,0,.45); }
.hero-shot-img, .hero-shot .photo-todo {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
}
@media (max-width: 62rem) { .hero-shot-img, .hero-shot .photo-todo { aspect-ratio: 16 / 9; } }

/* ----------------------------------------------------------- stat bar */

.hero-stats {
  position: relative; z-index: 2;
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr));
  border: 1px solid rgba(216,187,120,.30); border-radius: var(--r);
  background: rgba(255,255,255,.028);
}
.hero-stats li {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: 1.3rem 1rem; text-align: center;
  border-left: 1px solid rgba(216,187,120,.22);
}
.hero-stats li:first-child { border-left: 0; }
.hero-stats img { width: 34px; height: 34px; object-fit: contain; margin-bottom: .15rem; }
.hero-stat-label { font-size: .8rem; color: rgba(233,238,246,.72); line-height: 1.35; }
.hero-stat-value {
  font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600; color: var(--gold-bright); line-height: 1.1;
}
@media (max-width: 52rem) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats li:nth-child(odd) { border-left: 0; }
  .hero-stats li:nth-child(n+3) { border-top: 1px solid rgba(216,187,120,.22); }
}

/* ==========================================================================
   HOME: header sits ON the hero
   The mockup runs the navy hero full-bleed behind a transparent header, so
   the page opens as one dark field rather than a cream bar above a photo.
   Only on the homepage — inner pages keep the solid header.
   ========================================================================== */
.page-home .site-header {
  background: transparent;
  border-bottom-color: rgba(216,187,120,.18);
}
.page-home .site-header .brand-name { color: #fff; }
.page-home .site-header .brand-sub  { color: var(--gold-bright); }
.page-home .site-header .desk-nav a { color: rgba(244,239,229,.88); }
.page-home .site-header .desk-nav a:hover,
.page-home .site-header .desk-nav a[aria-current="page"] { color: var(--gold-bright); }
.page-home .utility, .page-home .utility a { color: rgba(244,239,229,.80); }
.page-home .utility a:hover { color: var(--gold-bright); }
.page-home .site-header .btn-ghost  { color: #fff; border-color: rgba(244,239,229,.42); }
.page-home .site-header .btn-ghost:hover { background: #fff; color: var(--navy); }
.page-home .site-header .burger span { background: #fff; }

/* Once scrolled it becomes solid, so it stays legible over cream sections. */
.page-home .site-header.is-scrolled {
  background: var(--navy);
  border-bottom-color: rgba(216,187,120,.24);
}

/* The utility bar above it goes dark to match. */
.page-home .utility { background: var(--navy-deep); border-bottom-color: rgba(216,187,120,.14); }

/* Pull the hero up so it paints behind the transparent header, then add
   the same amount back as padding so the copy is not hidden under it.
   The header is sticky and 95px tall; the utility bar above it stays
   in flow and is darkened separately. */
.page-home .hero-grand {
  margin-top: -95px;
  padding-top: calc(95px + clamp(2rem, 4vw, 3.25rem));
}
@media (max-width: 62rem) {
  .page-home .hero-grand { margin-top: -76px; padding-top: calc(76px + 2rem); }
}