/* ==================================================================
   Hotel Yashoda — design system
   Ink + brass palette, Cormorant Garamond display / Jost UI.
   ================================================================== */

:root {
  /* Surfaces */
  --ink:        #12100E;
  --ink-2:      #1B1815;
  --ink-3:      #262119;
  --bone:       #FBF8F3;
  --bone-2:     #F3EDE3;
  --bone-3:     #E8DFD1;
  --white:      #FFFFFF;

  /* Brass */
  --gold:       #C8A25E;
  --gold-soft:  #DFC28C;
  --gold-deep:  #9C7635;

  /* Type */
  --text:       #241F1A;
  --text-2:     #5C544A;
  --text-3:     #8A8074;
  --on-ink:     #EFE9DF;
  --on-ink-2:   #A79E90;

  --line:       rgba(36, 31, 26, .12);
  --line-2:     rgba(36, 31, 26, .07);
  --line-ink:   rgba(239, 233, 223, .14);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --shell:  1240px;
  --gut:    clamp(1.15rem, 4vw, 2.75rem);
  --sect:   clamp(4.5rem, 9vw, 8rem);
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;

  --shadow-sm: 0 1px 2px rgba(18,16,14,.05), 0 4px 14px rgba(18,16,14,.06);
  --shadow-md: 0 2px 6px rgba(18,16,14,.07), 0 18px 44px rgba(18,16,14,.11);
  --shadow-lg: 0 6px 18px rgba(18,16,14,.10), 0 36px 80px rgba(18,16,14,.20);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --hdr: 76px;

  /* Three things can't just be a re-tinted neutral when the ground flips, so
     they get their own tokens rather than a pile of per-theme overrides. */
  --solid-bg: var(--ink);      /* filled "ink" buttons and pressed chips */
  --solid-fg: var(--bone);
  --field-bg: var(--bone);     /* form control interiors */
  --field-bg-on: var(--white);

  /* Ink for surfaces that are dark in BOTH modes — the hero, page banners, the
     header, ink sections, the CTA, the lightbox. Never redefined below, so it
     can't follow the ground the way --bone does. Using --bone here was a bug:
     in Night it flipped dark and the headlines vanished into the photograph. */
  --on-dark:    #FBF8F3;
}

/* ------------------------------ Night ---------------------------- */
/* Same design, darker ground. Only tokens change; components are untouched. */

:root[data-mode="night"] {
  color-scheme: dark;

  --bone:       #14110E;
  --bone-2:     #1A1713;
  --bone-3:     #272119;
  --white:      #201C17;

  /* Kept a shade under the page ground so "ink" sections still read apart. */
  --ink:        #0B0A08;
  --ink-2:      #171410;
  --ink-3:      #241F18;

  --text:       #EFE9DF;
  --text-2:     #ABA294;
  --text-3:     #7E7568;

  --line:       rgba(239, 233, 223, .14);
  --line-2:     rgba(239, 233, 223, .08);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  --shadow-md: 0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.45);
  --shadow-lg: 0 6px 18px rgba(0,0,0,.5), 0 36px 80px rgba(0,0,0,.6);

  --solid-bg:   #2E2820;
  --solid-fg:   #F4EFE6;
  --field-bg:   #1B1713;
  --field-bg-on: #241F19;
}

/* ------------------------------ Reset ---------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr) + 16px);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: .008em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem); }
h2 { font-size: clamp(2.05rem, 1.4rem + 2.8vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 1.2rem + .9vw, 1.85rem); }
h4 { font-size: clamp(1.1rem, 1.03rem + .35vw, 1.3rem); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

::selection { background: var(--gold); color: var(--ink); }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  padding: .7rem 1.2rem; background: var(--ink); color: var(--on-ink);
  border-radius: var(--r-sm); transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------------------------- Layout ----------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.shell--wide { max-width: 1520px; }
.shell--narrow { max-width: 830px; }

.section { padding-block: var(--sect); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--ink h2, .section--ink h3 { color: var(--on-dark); }
.section--bone { background: var(--bone-2); }

/* --------------------------- Typography -------------------------- */

.eyebrow {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.eyebrow::after {
  content: "";
  flex: 0 0 46px;
  height: 1px;
  background: currentColor;
  opacity: .45;
}
.eyebrow--gold { color: var(--gold-deep); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before {
  content: "";
  flex: 0 0 46px; height: 1px; background: currentColor; opacity: .45;
}
.section--ink .eyebrow, .eyebrow--onink { color: var(--gold); }

.lead {
  font-size: clamp(1.08rem, 1rem + .38vw, 1.28rem);
  color: var(--text-2);
  line-height: 1.68;
}
.section--ink .lead { color: var(--on-ink-2); }

.head {
  max-width: 640px;
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
.head--center { margin-inline: auto; text-align: center; }

.rule {
  width: 54px; height: 2px; border: 0; margin: 0 0 1.6rem;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.head--center .rule { margin-inline: auto; background: var(--gold); }

/* ---------------------------- Buttons ---------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .92rem 1.7rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .28s var(--ease), border-color .28s var(--ease),
              background-color .28s var(--ease), transform .28s var(--ease);
}
.btn .icon { width: 17px; height: 17px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold  { --btn-bg: var(--gold); --btn-fg: var(--ink); --btn-bd: var(--gold); }
.btn--gold:hover { --btn-bg: var(--gold-soft); --btn-bd: var(--gold-soft); }

.btn--ink   { --btn-bg: var(--solid-bg); --btn-fg: var(--solid-fg); --btn-bd: var(--solid-bg); }
.btn--ink:hover { --btn-bg: var(--ink-3); --btn-bd: var(--ink-3); }
:root[data-mode="night"] .btn--ink:hover { --btn-bg: #3C342A; --btn-bd: #3C342A; }

.btn--outline { --btn-bd: var(--line); --btn-fg: var(--text); }
.btn--outline:hover { --btn-bd: var(--gold); --btn-fg: var(--gold-deep); }

.btn--ghost { --btn-bd: transparent; padding-inline: .8rem; }
.btn--ghost:hover { --btn-fg: var(--gold); }

/* Every region that is dark in BOTH modes needs the light outline button.
   Missing .cta here is what made the CTA phone number invisible in Day mode. */
.section--ink .btn--outline,
.hero .btn--outline,
.banner .btn--outline,
.cta .btn--outline,
.dockbar .btn--outline,
.foot .btn--outline { --btn-bd: rgba(239,233,223,.4); --btn-fg: var(--on-dark); }

.section--ink .btn--outline:hover,
.hero .btn--outline:hover,
.banner .btn--outline:hover,
.cta .btn--outline:hover,
.dockbar .btn--outline:hover,
.foot .btn--outline:hover { --btn-bd: var(--gold); --btn-fg: var(--gold); }

.btn--wide { flex: 1 1 200px; }
.btn--sm { padding: .68rem 1.15rem; font-size: .72rem; }

.tlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-deep);
  padding-bottom: .3rem;
  border-bottom: 1px solid rgba(156,118,53,.35);
  transition: gap .28s var(--ease), border-color .28s var(--ease);
}
.tlink .icon { width: 16px; height: 16px; }
.tlink:hover { gap: .9rem; border-color: var(--gold); }
.section--ink .tlink { color: var(--gold); border-color: rgba(200,162,94,.4); }

/* ---------------------------- Topbar ----------------------------- */

.topbar {
  background: var(--ink);
  color: var(--on-ink-2);
  font-size: .78rem;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--line-ink);
}
.topbar__inner {
  display: flex; align-items: center; gap: 1.8rem;
  min-height: 42px; flex-wrap: wrap;
}
.topbar__item {
  display: inline-flex; align-items: center; gap: .5rem;
  transition: color .25s var(--ease);
}
.topbar__item:hover { color: var(--gold); }
.topbar__item .icon { width: 15px; height: 15px; color: var(--gold); }
.topbar__spacer { flex: 1; }
.topbar__social { color: var(--on-ink-2); transition: color .25s var(--ease); }
.topbar__social:hover { color: var(--gold); }
.topbar__social .icon { width: 17px; height: 17px; }

@media (max-width: 900px) { .topbar { display: none; } }

/* ---------------------------- Header ----------------------------- */

.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(18, 16, 14, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-ink);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.header.is-stuck { background: rgba(18,16,14,.985); box-shadow: 0 12px 40px rgba(0,0,0,.32); }

.header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--hdr);
}

.brand { display: flex; align-items: center; gap: .8rem; flex: none; }
.brand__mark { width: 40px; height: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  color: var(--on-dark); letter-spacing: .01em;
}
.brand__sub {
  font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); font-weight: 400;
}

.nav { margin-inline: auto; }
/* The gap is capped low on purpose. The shell's max-width is fixed while its
   gutter grows with the viewport, so the space available to this row does not
   increase on a wide screen — a vw-based gap that keeps growing would push
   Book Now past the edge everything else aligns to, and the wider the screen
   the worse it would look. */
.nav__list { display: flex; align-items: center; gap: clamp(.7rem, 1.05vw, 1rem); }
.nav__list a {
  position: relative;
  display: block;
  padding: .45rem 0;
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-ink);
  transition: color .25s var(--ease);
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav__list a:hover { color: var(--gold); }
.nav__list a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__list a[aria-current="page"] { color: var(--gold); }
.nav__list a[aria-current="page"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: .6rem; flex: none; }

/* There was a Call button here. It only ever rendered above 1320px — exactly
   the widths where the topbar right above already shows the number as a tel:
   link — and its ~90px was what pushed the row wider than the shell, so Book
   Now hung past the edge every other element aligns to. Removing the
   duplicate fixes the alignment instead of squeezing the spacing. */

/* Day / Night switch — shows the mode you'd be switching TO. */
.tswitch {
  position: relative;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-ink);
  border-radius: 50%;
  color: var(--on-ink);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.tswitch:hover { color: var(--gold); border-color: rgba(200,162,94,.55); }
.tswitch .icon {
  position: absolute; width: 18px; height: 18px;
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
/* Shows the mode you are IN, not the one you'd switch to — a sun on a light
   page and a moon on a dark one reads as status and can't be misread. The
   tooltip and aria-label say what clicking will do. */
.tswitch__sun { opacity: 1; transform: none; }
.tswitch__moon { opacity: 0; transform: rotate(90deg) scale(.6); }
:root[data-mode="night"] .tswitch__sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
:root[data-mode="night"] .tswitch__moon { opacity: 1; transform: none; }

.burger {
  display: none; position: relative;
  width: 44px; height: 44px; color: var(--on-dark);
  border: 1px solid var(--line-ink); border-radius: var(--r-sm);
}
.burger .icon {
  position: absolute; inset: 0; margin: auto;
  width: 22px; height: 22px;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.burger__close { opacity: 0; transform: rotate(-45deg); }
.burger[aria-expanded="true"] .burger__open { opacity: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__close { opacity: 1; transform: none; }

/* Brand + eight nav items + switch + Call + Book need ~1300px; below that,
   use the drawer. */
@media (max-width: 1320px) {
  .burger { display: block; }
  /* The nav goes position:fixed just below, which takes it out of the flex
     row — so the auto margin that used to hold the two ends apart goes with
     it, and the switch and burger drift back against the logo. Push them to
     the edge explicitly rather than relying on a sibling that is no longer
     in the flow. */
  .header__actions { margin-left: auto; }
  .nav {
    position: fixed; inset: var(--hdr) 0 auto;
    background: var(--ink); margin: 0;
    border-bottom: 1px solid var(--line-ink);
    max-height: 0; overflow: hidden;
    transition: max-height .42s var(--ease);
  }
  .nav.is-open { max-height: 78vh; overflow-y: auto; }
  .nav__list {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .6rem var(--gut) 1.6rem;
  }
  .nav__list a {
    padding: 1rem 0; font-size: .95rem; letter-spacing: .1em;
    border-bottom: 1px solid var(--line-ink);
  }
  .nav__list a::after { display: none; }
}

@media (max-width: 520px) {
  .brand__sub { display: none; }
  .brand__name { font-size: 1.15rem; }
  .brand__mark { width: 32px; }
  /* The fixed bottom bar already carries Book, so drop it from the header and
     give the room to the Day/Night switch instead. */
  .header__actions .btn--gold { display: none; }
}

/* Small Android widths: the brand + CTA + burger must still fit on one line. */
@media (max-width: 400px) {
  .header__inner { gap: .5rem; }
  .brand { gap: .5rem; }
  .brand__mark { width: 28px; }
  .brand__name { font-size: 1rem; }
  .header__actions { gap: .4rem; }
  .burger { width: 40px; height: 40px; }
  .burger .icon { width: 20px; height: 20px; }
  .tswitch { width: 36px; height: 36px; }
}

@media (max-width: 340px) {
  .brand__name { font-size: .92rem; }
}

/* ------------------------ Opening titles -------------------------- */
/* Timeline: photo washes in → monogram → rule → name → location → lift.
   Every step is CSS, so the panel clears itself even if scripting fails. */

.intro {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  background: var(--ink);
  overflow: hidden;
  animation: introLift .95s var(--ease) 2.35s forwards;
}
:root.no-intro .intro { display: none; }

@keyframes introLift {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.intro__bg {
  position: absolute; inset: 0;
  opacity: 0;
  animation: introWash 2.6s var(--ease) forwards;
}
.intro__bg .pic, .intro__bg img { width: 100%; height: 100%; }
.intro__bg img { object-fit: cover; }

@keyframes introWash {
  0%   { opacity: 0; transform: scale(1.10); }
  55%  { opacity: .30; }
  100% { opacity: .24; transform: scale(1); }
}

/* Vignette so the monogram and name always sit on quiet ground, whatever the
   photograph happens to be doing behind them. */
.intro::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(58% 58% at 50% 46%, rgba(11,10,8,.86) 0%, rgba(11,10,8,.55) 55%, rgba(11,10,8,.2) 100%),
    linear-gradient(180deg, rgba(11,10,8,.55), transparent 30%, transparent 70%, rgba(11,10,8,.75));
  pointer-events: none;
}

.intro__stack {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding-inline: 1.5rem;
}

.intro__mark {
  width: clamp(76px, 12vw, 118px); height: auto;
  opacity: 0;
  animation: introMark 1.1s var(--ease) .12s forwards;
}
@keyframes introMark {
  from { opacity: 0; transform: translateY(10px) scale(.86); }
  to   { opacity: 1; transform: none; }
}

.intro__rule {
  display: block;
  width: 0; height: 1px;
  margin: clamp(1.1rem, 2.4vw, 1.7rem) 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: introRule .8s var(--ease) .78s forwards;
}
@keyframes introRule { to { width: clamp(120px, 22vw, 210px); } }

.intro__name {
  /* Tracking is animated, so both ends live in custom properties — that's the
     only way a media query can retune them without duplicating the keyframes. */
  --ls-from: .52em;
  --ls-to: .2em;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, .55rem + 2.6vw, 3.1rem);
  font-weight: 500;
  color: #FBF8F3;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
  letter-spacing: var(--ls-to);
  text-indent: var(--ls-to);   /* keeps wide tracking optically centred */
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  animation: introName 1.25s var(--ease) .92s forwards;
}
@keyframes introName {
  from { opacity: 0; letter-spacing: var(--ls-from); text-indent: var(--ls-from); }
  to   { opacity: 1; letter-spacing: var(--ls-to);   text-indent: var(--ls-to); }
}

@media (max-width: 560px) {
  .intro__name { --ls-from: .34em; --ls-to: .14em; }
  .intro__sub { font-size: .62rem; letter-spacing: .22em; }
}

.intro__sub {
  margin: clamp(.8rem, 1.6vw, 1.15rem) 0 0;
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  animation: introSub .9s var(--ease) 1.45s forwards;
}
@keyframes introSub {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: .92; transform: none; }
}

/* ----------------------------- Hero ------------------------------ */

.hero {
  position: relative;
  min-height: clamp(560px, 92vh, 960px);
  display: grid;
  align-items: center;
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}

.hero__slides { position: absolute; inset: 0; z-index: -2; will-change: transform; }

/* Optional video hero — sits over the slideshow, which remains the poster. */
.hero__video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.5s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide .pic, .hero__slide img { width: 100%; height: 100%; }
.hero__slide img { object-fit: cover; }
.hero__slide.is-active img { animation: kenburns 11s var(--ease) forwards; }

@keyframes kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.13); }
}

.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(18,16,14,.72) 0%, rgba(18,16,14,.32) 34%, rgba(18,16,14,.86) 100%),
    linear-gradient(90deg, rgba(18,16,14,.6) 0%, transparent 62%);
}

.hero__inner { padding-block: clamp(6rem, 14vh, 9rem) clamp(9rem, 18vh, 12rem); }

/* Hero copy resolves in line by line — held back until the titles have lifted. */
.hero__copy { max-width: 720px; --intro-offset: 0s; }
:root.intro-on .hero__copy { --intro-offset: 2.6s; }
.hero__copy > * {
  opacity: 0;
  animation: heroIn .9s var(--ease) forwards;
}
.hero__copy > *:nth-child(1) { animation-delay: calc(var(--intro-offset) + .10s); }
.hero__copy > *:nth-child(2) { animation-delay: calc(var(--intro-offset) + .24s); }
.hero__copy > *:nth-child(3) { animation-delay: calc(var(--intro-offset) + .38s); }
.hero__copy > *:nth-child(4) { animation-delay: calc(var(--intro-offset) + .52s); }
.hero__copy > *:nth-child(5) { animation-delay: calc(var(--intro-offset) + .66s); }

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

.hero .eyebrow { color: var(--gold); }
.hero h1 { color: var(--on-dark); margin-bottom: .35em; }
.hero h1 em {
  font-style: italic; font-weight: 400;
  color: var(--gold-soft);
}
.hero__lead {
  font-size: clamp(1.05rem, .98rem + .42vw, 1.3rem);
  color: rgba(239,233,223,.85);
  max-width: 52ch;
  margin-bottom: 2.2rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.1rem 2.4rem;
  margin-top: 2.8rem; padding-top: 1.8rem;
  border-top: 1px solid rgba(239,233,223,.18);
}
.hero__meta div { display: flex; align-items: center; gap: .6rem; font-size: .84rem; letter-spacing: .06em; }
.hero__meta .icon { width: 17px; height: 17px; color: var(--gold); }
.hero__meta strong { font-weight: 500; }

.hero__dots {
  position: absolute; left: 50%; bottom: clamp(6.5rem, 13vh, 9rem);
  transform: translateX(-50%);
  display: flex; gap: .6rem; z-index: 3;
}
.hero__dots button {
  width: 34px; height: 3px; border-radius: 2px;
  background: rgba(239,233,223,.32);
  transition: background-color .3s var(--ease), width .3s var(--ease);
}
.hero__dots button[aria-selected="true"] { background: var(--gold); width: 52px; }

/* Page banner (inner pages) */

.banner {
  position: relative;
  display: grid; align-items: end;
  min-height: clamp(340px, 52vh, 520px);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.banner .pic, .banner .pic img {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
}
.banner .pic img { object-fit: cover; }
/* Banner photos range from night shots to bright daylight skies, and the
   heading sits bottom-left over all of them — so scrim from both directions. */
.banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(18,16,14,.55) 0%, rgba(18,16,14,.28) 32%, rgba(18,16,14,.93) 100%),
    linear-gradient(90deg, rgba(18,16,14,.75) 0%, rgba(18,16,14,.3) 52%, transparent 82%);
}
.banner__inner { padding-block: clamp(3rem, 8vh, 5rem); }
.banner h1 { color: var(--on-dark); margin-bottom: .25em; }
.banner .eyebrow { color: var(--gold); }
.banner__lead { color: rgba(251,248,243,.92); max-width: 56ch; margin: 0; }

.crumbs {
  display: flex; align-items: center; gap: .55rem;
  margin-top: 1.4rem; font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(239,233,223,.62);
}
.crumbs a:hover { color: var(--gold); }
.crumbs .icon { width: 13px; height: 13px; opacity: .6; }

/* ------------------------- Booking widget ------------------------ */

.bookbar {
  position: relative; z-index: 20;
  margin-top: clamp(-5.5rem, -7vw, -4rem);
}
.bookbar__card {
  background: var(--white);
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.4rem, 3vw, 2.1rem);
}
.bookbar__title {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 500; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 1.2rem;
}

.bform__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}

.bfield { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.bfield label {
  font-size: .7rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3);
}
.bfield__opt { letter-spacing: .02em; text-transform: none; font-weight: 400; opacity: .8; }
.bfield__ctrl {
  display: flex; align-items: center; gap: .6rem;
  padding: .1rem .9rem;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.bfield__ctrl:focus-within { border-color: var(--gold); background: var(--field-bg-on); }
.bfield__ctrl .icon { width: 17px; height: 17px; color: var(--gold-deep); flex: none; }
.bfield input, .bfield select, .bfield textarea {
  flex: 1; min-width: 0;
  padding: .78rem 0;
  background: none; border: 0;
  font-size: .93rem; font-weight: 400;
  color: var(--text);
}
.bfield input:focus, .bfield select:focus, .bfield textarea:focus { outline: none; }
.bfield select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8074' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 16px;
  padding-right: 1.6rem;
  text-overflow: ellipsis;
  cursor: pointer;
}
.bfield input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
.bfield textarea { resize: vertical; min-height: 96px; padding-block: .8rem; line-height: 1.6; }
.bfield--full { grid-column: 1 / -1; }
.bfield__ctrl--area { align-items: flex-start; padding-block: .2rem; }
.bfield__ctrl--area .icon { margin-top: .95rem; }

.bfield.is-invalid .bfield__ctrl { border-color: #B4462F; background: #FDF4F1; }
.bfield__err { font-size: .76rem; color: #B4462F; letter-spacing: .01em; }

.bform__nights {
  margin-top: 1rem;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1rem;
  background: rgba(200,162,94,.12);
  border: 1px solid rgba(200,162,94,.35);
  border-radius: 100px;
  font-size: .84rem; color: var(--gold-deep); font-weight: 400;
}

.bform__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
/* Form buttons can carry long labels ("No rooms free for these dates",
   "Continue to pay ₹12,400"): wrap them onto two lines on a narrow screen
   rather than cutting the words off. */
.bform .btn, .bkdone .btn, .bkpay .btn { white-space: normal; line-height: 1.35; text-align: center; padding-inline: 1.1rem; }
.bform__note {
  margin: 1rem 0 0; font-size: .82rem; color: var(--text-3); line-height: 1.6;
}
.bform__note a { color: var(--gold-deep); border-bottom: 1px solid rgba(156,118,53,.4); }

.bform--bar .bform__actions .btn { flex: 0 1 auto; }

.bform__note--warn { color: #B4462F; }
.bform__note--warn a { color: inherit; }
[data-bk-roomfield][hidden], [data-bk-actions][hidden] { display: none; }

/* --------------------- Live booking (book.js) --------------------- */

.bkrooms { margin-top: 1.4rem; display: grid; gap: .6rem; }
.bkrooms[hidden] { display: none; }
.bkrooms.is-locked { pointer-events: none; opacity: .6; }
.bkrooms__title {
  margin: 0 0 .2rem; font-size: .7rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3);
}
.bkrooms__wait, .bkrooms__none { margin: 0; font-size: .9rem; color: var(--text-2); }
.bkrooms__none {
  padding: 1rem 1.1rem; border: 1px dashed var(--line); border-radius: var(--r-sm);
}

.bkroom {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: .25rem 1rem; width: 100%; text-align: left;
  padding: .9rem 1.1rem;
  background: var(--field-bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; font: inherit;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.bkroom:hover:not(:disabled) { border-color: var(--gold); }
.bkroom:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bkroom.is-on {
  border-color: var(--gold); background: var(--field-bg-on);
  box-shadow: inset 3px 0 0 var(--gold);
}
.bkroom.is-off { cursor: not-allowed; opacity: .55; }
.bkroom__name { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.bkroom__tag {
  justify-self: end; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}
.bkroom__tag.is-ok { color: #3F7A4A; }
.bkroom__tag.is-low { color: #B4462F; }
.bkroom__price { font-size: 1rem; font-weight: 500; }
.bkroom__price small { font-size: .78rem; font-weight: 400; color: var(--text-3); }
.bkroom__total { justify-self: end; font-size: .82rem; color: var(--text-2); }

.bform__guest { margin-top: 1.4rem; }
.bform__guest[hidden] { display: none; }

.bkrooms__soldout { margin: .3rem 0 0; font-size: .84rem; color: var(--text-2); }
.bkrooms__link { border: 0; background: none; padding: 0; font: inherit; color: var(--gold-deep);
  border-bottom: 1px solid rgba(156,118,53,.4); cursor: pointer; }
.bkrooms__none .bform__actions { margin-top: .9rem; }
.bkwait .bform__fields { margin-top: .4rem; }

.bkparty { margin-top: 1.4rem; display: grid; gap: .5rem; }
.bkparty[hidden] { display: none; }
.bkparty .bkrooms__title span { text-transform: none; letter-spacing: 0; color: var(--text-3); font-weight: 400; }
.bkparty__note { margin: 0 0 .2rem; font-size: .82rem; color: var(--text-3); line-height: 1.55; }
.bkparty__row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 84px; gap: .5rem; align-items: center; }
.bkparty__who { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.bkparty__me { padding: .7rem .9rem; font-size: .93rem; color: var(--text-2); border: 1px dashed var(--line); border-radius: var(--r-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkparty__row input {
  width: 100%; min-width: 0; padding: .7rem .8rem; font: inherit; font-size: .93rem; color: var(--text);
  background: var(--field-bg); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.bkparty__row input:focus { outline: none; border-color: var(--gold); background: var(--field-bg-on); }
@media (max-width: 420px) { .bkparty__row { grid-template-columns: minmax(0, 1fr) 74px; } .bkparty__who { grid-column: 1 / -1; } }

.bkpay {
  margin-top: 1.4rem; padding: 1.2rem 1.25rem;
  border: 1px solid rgba(200,162,94,.45); border-radius: var(--r-md);
  background: rgba(200,162,94,.08);
}
.bkpay[hidden] { display: none; }
.bkpay p { margin: 0 0 .5rem; }
.bkpay__tag {
  font-size: .7rem !important; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-deep);
}
.bkpay__tag--warn { color: #B4462F; }
.bkpay__sum { padding: .2rem 0 .6rem; border-bottom: 1px solid var(--line-2); margin-bottom: .8rem; }
.bkpay__amt { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1.1; margin-top: .3rem !important; }
.bkpay__amt small { font-family: var(--sans); font-size: .8rem; font-weight: 400; color: var(--text-3); }
.bkpay__demo { font-size: .88rem; color: var(--text-2); }
.bkpay__clock { margin: .9rem 0 0 !important; font-size: .82rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bkpay .bform__actions { margin-top: .8rem; }

.bkdone { text-align: center; padding: .6rem 0; outline: none; }
.bkdone p { margin: 0 0 .35rem; color: var(--text-2); }
.bkdone__mark {
  display: inline-grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--gold); color: var(--ink);
  font-size: 1.6rem; margin-bottom: .8rem;
}
.bkdone__title { font-size: 1.8rem; margin: 0 0 .4rem; }
.bkdone__ref { font-size: 1.05rem; color: var(--text) !important; }
.bkdone__ref strong { font-family: var(--serif); font-size: 1.5rem; letter-spacing: .04em; color: var(--gold-deep); }
.bkdone__small { font-size: .82rem; color: var(--text-3) !important; margin-top: .8rem !important; }
.bkdone .bform__actions { justify-content: center; }
.bkdone__more { margin-top: 1rem !important; font-size: .86rem; }
.bkdone__more a { color: var(--gold-deep); border-bottom: 1px solid rgba(156,118,53,.4); }

/* ---------------------- Manage booking (manage.js) ----------------- */

.bform__actions[hidden], .mg[hidden], .mg__change[hidden] { display: none; }
.mg__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mg__head .bkdone__ref { margin: 0; }
.mg__facts {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .55rem 1.2rem;
  margin: 1.1rem 0 .4rem; padding: 1rem 0; border-block: 1px solid var(--line-2);
}
.mg__facts dt { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); padding-top: .2rem; }
.mg__facts dd { margin: 0; color: var(--text); }
.mg__facts small { color: var(--text-3); }
.mg__done { margin-bottom: 1.2rem; padding: 1rem; border: 1px solid rgba(200,162,94,.45); border-radius: var(--r-md); background: rgba(200,162,94,.08); }
.mg__done .bkdone__title { font-size: 1.5rem; }
.mg__change > .bkrooms__title { margin-bottom: .8rem; }
.bkroom__total.is-up { color: var(--gold-deep); font-weight: 500; }

@media (min-width: 1100px) {
  .bform--bar .bform__fields { grid-template-columns: repeat(4, 1fr); }
}

/* Two-up in the dialog: four fields in a tidy 2×2 rather than 3 + 1 orphan */
@media (min-width: 520px) {
  .bform--modal .bform__fields { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------ Sticky book bar ------------------------- */
/* Docks under the header once the hero's booking card scrolls away, so
   "check availability" is never more than one click off-screen. */

.dockbar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 85;
  transform: translateY(-100%);
  transition: transform .4s var(--ease);
  background: rgba(18, 16, 14, .97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(200, 162, 94, .35);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .3);
}
.dockbar.is-on { transform: translateY(var(--hdr)); }
.dockbar__inner {
  display: flex; align-items: center; gap: 1rem;
  padding-block: .7rem;
}
.dockbar__label {
  display: flex; align-items: center; gap: .55rem;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap;
}
.dockbar__label .icon { width: 16px; height: 16px; }
.dockbar__fields { display: flex; align-items: center; gap: .55rem; flex: 1; min-width: 0; }
.dockbar__field {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem;
  min-width: 0;
  background: rgba(239, 233, 223, .07);
  border: 1px solid var(--line-ink);
  border-radius: var(--r-sm);
  color: var(--on-ink);
  font-size: .84rem;
  cursor: pointer;
  transition: border-color .25s var(--ease);
}
.dockbar__field:hover { border-color: rgba(200, 162, 94, .6); }
.dockbar__field .icon { width: 15px; height: 15px; color: var(--gold); flex: none; }
.dockbar__field span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dockbar__sep { color: var(--on-ink-2); flex: none; }

@media (max-width: 900px) { .dockbar { display: none; } }

/* --------------------------- Parallax ---------------------------- */
/* The moving layer is taller than the section that clips it, so drifting it
   never exposes an edge. Scaling the <img> instead would not work: .pic clips
   its own overflow, so the extra pixels would be thrown away. */

.px { will-change: transform; }
.banner .px,
.cta .px,
.hero__slides[data-px] { top: -12%; height: 124%; }

@media (prefers-reduced-motion: reduce) {
  .px, .hero__slides[data-px] { transform: none !important; top: 0; height: 100%; }
}

/* -------------------------- Date picker -------------------------- */

.cal {
  /* Anchored to the field it belongs to, not left at its static position. */
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 120;
  width: min(320px, calc(100vw - 2rem));
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.cal[hidden] { display: none; }

.cal__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .85rem;
}
.cal__title {
  font-family: var(--serif); font-size: 1.12rem; font-weight: 600;
  color: var(--text); margin: 0;
}
.cal__nav {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--text-2);
  transition: all .25s var(--ease);
}
.cal__nav:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-deep); }
.cal__nav:disabled { opacity: .3; cursor: not-allowed; }
.cal__nav .icon { width: 15px; height: 15px; }
.cal__nav--prev .icon { transform: rotate(180deg); }

.cal__dow, .cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.cal__dow {
  margin-bottom: .35rem;
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); text-align: center;
}
.cal__day {
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.cal__day:hover:not(:disabled):not(.is-empty) { background: var(--bone-2); }
.cal__day:disabled { color: var(--text-3); opacity: .38; cursor: not-allowed; }
.cal__day.is-empty { pointer-events: none; }
.cal__day.is-today { box-shadow: inset 0 0 0 1px var(--gold); }
.cal__day.is-in-range { background: rgba(200, 162, 94, .16); border-radius: 0; }
.cal__day.is-start, .cal__day.is-end {
  background: var(--gold); color: var(--ink); font-weight: 500;
}
.cal__day.is-start { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.cal__day.is-end { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.cal__day.is-start.is-end { border-radius: var(--r-sm); }

.cal__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; margin-top: .85rem; padding-top: .8rem;
  border-top: 1px solid var(--line-2);
  font-size: .8rem; color: var(--text-2);
}
.cal__hint { margin: 0; }
.cal__done {
  padding: .45rem 1rem;
  background: var(--ink); color: var(--on-ink);
  border-radius: var(--r-sm);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
}
:root[data-mode="night"] .cal__done { background: var(--solid-bg); color: var(--solid-fg); }

/* The native control stays as the accessible source of truth; we just hide
   its picker chrome once ours is wired up. */
.js .bfield__ctrl--cal input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}
.bfield__ctrl--cal { position: relative; }

/* DD/MM/YYYY face standing in for the browser's locale-formatted date field.
   The real input keeps the ISO value and stays focusable behind it. */
.bfield__ctrl--faced { position: relative; }
.bfield__face {
  flex: 1;
  padding: .78rem 0;
  text-align: left;
  font-size: .93rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  cursor: pointer;
}
.bfield__face.is-empty { color: var(--text-3); }
.js .bfield__ctrl--faced input[type="date"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: 0;
  opacity: 0;
  pointer-events: none;
}
.bfield__ctrl--faced:focus-within { border-color: var(--gold); }

/* ---------------------------- Cards ------------------------------ */

.grid { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* Blur-up: the wrapper carries a 20px version of the photo, so the space fills
   with the right colours immediately and the full image fades in over it. */
.pic {
  display: block;
  overflow: hidden;
  background-color: var(--bone-3);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pic img { width: 100%; height: 100%; object-fit: cover; }

/* Only fade when scripting is available to mark images loaded — otherwise the
   photo must stay visible. */
.js .pic img { opacity: 0; transition: opacity .55s var(--ease); }
.js .pic img.is-loaded, .js .pic.is-loaded img { opacity: 1; }

/* Room card */

.rcard {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.rcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.rcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.rcard__media .pic { width: 100%; height: 100%; }
.rcard__media img { transition: transform .8s var(--ease); }
.rcard:hover .rcard__media img { transform: scale(1.06); }

.rcard__tag {
  position: absolute; top: 1rem; left: 1rem;
  padding: .4rem .85rem;
  background: rgba(18,16,14,.82);
  backdrop-filter: blur(6px);
  color: var(--gold);
  font-size: .66rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 100px;
}

.rcard__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.4rem, 3vw, 1.85rem); }
/* Reserve two lines so the spec row lines up across cards of differing title length */
.rcard__body h3 { margin-bottom: .5rem; min-height: 2.2em; }
@media (max-width: 620px) { .rcard__body h3 { min-height: 0; } }
.rcard__specs {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  margin-bottom: 1rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-2);
  font-size: .8rem; color: var(--text-3); letter-spacing: .04em;
}
.rcard__specs li { display: flex; align-items: center; gap: .4rem; }
.rcard__specs .icon { width: 15px; height: 15px; color: var(--gold-deep); }
.rcard__text { color: var(--text-2); font-size: .95rem; margin-bottom: 1.3rem; }
.rcard__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.rcard__price { margin-right: auto; }
.rcard__price span {
  display: block; font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3);
}
.rcard__price strong {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--text);
}

/* Place card (Nearby) — the drive time is the thing people scan for, so it
   carries the visual weight instead of a photograph. */

.place {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.place:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.place__drive {
  margin: 0 0 .35rem;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3);
}
.place__drive span {
  font-family: var(--serif);
  font-size: 1.6rem; font-weight: 600; letter-spacing: normal;
  text-transform: none; color: var(--gold-deep);
  margin-right: .35rem;
}
:root[data-mode="night"] .place__drive span { color: var(--gold); }

.place__name { font-size: 1.35rem; margin: 0 0 .45rem; }
.place__kind {
  display: flex; align-items: center; gap: .4rem;
  margin: 0 0 .9rem; padding-bottom: .9rem;
  border-bottom: 1px solid var(--line-2);
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3);
}
.place__kind .icon { width: 14px; height: 14px; color: var(--gold-deep); }
.place__text { font-size: .94rem; color: var(--text-2); margin: 0 0 1.2rem; }
.place__link { margin-top: auto; align-self: flex-start; }

/* Amenity card */

.acard {
  padding: clamp(1.6rem, 3vw, 2.1rem);
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.acard:hover {
  transform: translateY(-5px);
  border-color: rgba(200,162,94,.5);
  box-shadow: var(--shadow-md);
}
.acard__icon {
  display: grid; place-items: center;
  width: 54px; height: 54px; margin-bottom: 1.15rem;
  background: rgba(200,162,94,.13);
  border-radius: 50%;
  color: var(--gold-deep);
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.acard__icon .icon { width: 25px; height: 25px; }
.acard:hover .acard__icon { background: var(--gold); color: var(--ink); }
.acard h3 { font-size: 1.22rem; margin-bottom: .4rem; }
.acard p { font-size: .92rem; color: var(--text-2); line-height: 1.65; }

.section--ink .acard {
  background: var(--ink-2);
  border-color: var(--line-ink);
}
.section--ink .acard p { color: var(--on-ink-2); }
.section--ink .acard__icon { background: rgba(200,162,94,.16); color: var(--gold); }

/* Split feature */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--flip .split__media { order: 2; }
@media (max-width: 860px) { .split--flip .split__media { order: 0; } }

.split__media { position: relative; }
.split__media .pic { border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.split__media > .pic:first-child { aspect-ratio: 4 / 3.1; }

.split__inset {
  position: absolute; right: -1.5rem; bottom: -2.5rem;
  width: 46%; aspect-ratio: 1;
  border: 8px solid var(--bone);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.section--bone .split__inset { border-color: var(--bone-2); }
.split__inset .pic { height: 100%; }
.split__inset img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 620px) { .split__inset { display: none; } }

.split__badge {
  position: absolute; left: -1.2rem; top: -1.2rem;
  display: grid; place-items: center; text-align: center;
  width: 118px; height: 118px;
  background: var(--gold); color: var(--ink);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  line-height: 1.1;
}
.split__badge strong { display: block; font-family: var(--serif); font-size: 2.2rem; font-weight: 600; }
.split__badge span { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
@media (max-width: 620px) { .split__badge { width: 90px; height: 90px; left: -.5rem; top: -.5rem; } }
@media (max-width: 620px) { .split__badge strong { font-size: 1.6rem; } }

.checks { display: grid; gap: .7rem; margin: 1.6rem 0 2rem; }
.checks li { display: flex; align-items: flex-start; gap: .7rem; font-size: .95rem; }
.checks .icon {
  width: 18px; height: 18px; flex: none; margin-top: .28rem;
  color: var(--gold-deep); stroke-width: 2;
}
.section--ink .checks .icon { color: var(--gold); }

/* Stats */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line-ink);
  border: 1px solid var(--line-ink);
  border-radius: var(--r-md);
  overflow: hidden;
}
.stats li { background: var(--ink); padding: clamp(1.5rem, 3vw, 2.2rem) 1.2rem; text-align: center; }
.stats strong {
  display: block; font-family: var(--serif);
  font-size: clamp(2.3rem, 1.8rem + 1.8vw, 3.2rem);
  font-weight: 600; color: var(--gold); line-height: 1;
}
.stats span {
  display: block; margin-top: .55rem;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-ink-2);
}

/* --------------------------- Gallery ----------------------------- */

.gfilters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.gfilters button {
  padding: .65rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .74rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-2);
  transition: all .3s var(--ease);
}
.gfilters button:hover { border-color: var(--gold); color: var(--gold-deep); }
.gfilters button[aria-pressed="true"] {
  background: var(--solid-bg); border-color: var(--solid-bg); color: var(--gold);
}

.gmasonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  grid-auto-rows: 220px;
  grid-auto-flow: dense; /* let short tiles backfill the gaps tall ones leave */
  gap: clamp(.7rem, 1.4vw, 1.1rem);
}
.gitem {
  position: relative;
  grid-row: span 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--bone-3);
}
.gitem--tall { grid-row: span 2; }
.gitem .pic, .gitem img { width: 100%; height: 100%; }
.gitem img { object-fit: cover; transition: transform .7s var(--ease); }
.gitem::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(18,16,14,.7));
  opacity: 0; transition: opacity .4s var(--ease);
}
.gitem:hover img { transform: scale(1.07); }
.gitem:hover::after { opacity: 1; }
.gitem__cap {
  position: absolute; left: 1rem; right: 1rem; bottom: .9rem; z-index: 2;
  color: var(--on-dark); font-size: .82rem; line-height: 1.4;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.gitem:hover .gitem__cap { opacity: 1; transform: none; }
.gitem[hidden] { display: none; }

/* Lightbox */

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: rgba(10, 9, 8, .96);
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

/* The header is a compositing layer (backdrop-filter), so it can still ghost
   through the viewer's scrim. Take it out of the way while the viewer is up. */
body.is-viewing .header,
body.is-viewing .topbar,
body.is-viewing .wafloat,
body.is-viewing .totop { opacity: 0; pointer-events: none; }
.lightbox img {
  max-width: min(100%, 1400px);
  max-height: 82vh;
  width: auto; object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
}
.lightbox__cap {
  margin-top: 1.1rem; text-align: center;
  color: rgba(239,233,223,.72); font-size: .88rem;
}
.lightbox__count { display: block; margin-top: .3rem; font-size: .74rem; letter-spacing: .2em; color: var(--gold); }
.lightbox__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 52px; height: 52px;
  background: rgba(239,233,223,.08);
  border: 1px solid rgba(239,233,223,.2);
  border-radius: 50%; color: var(--on-dark);
  transition: background-color .25s var(--ease);
}
.lightbox__btn:hover { background: rgba(200,162,94,.3); }
.lightbox__btn .icon { width: 22px; height: 22px; }
.lightbox__prev { left: clamp(.6rem, 2.5vw, 2rem); }
.lightbox__prev .icon { transform: rotate(180deg); }
.lightbox__next { right: clamp(.6rem, 2.5vw, 2rem); }
.lightbox__x {
  position: absolute; top: clamp(.8rem, 2.5vw, 1.8rem); right: clamp(.8rem, 2.5vw, 1.8rem);
  width: 46px; height: 46px; display: grid; place-items: center;
  color: var(--on-dark); border: 1px solid rgba(239,233,223,.2); border-radius: 50%;
}
.lightbox__x:hover { background: rgba(239,233,223,.1); }

/* ------------------------- Testimonials -------------------------- */

.tslider { position: relative; overflow: hidden; }
.ttrack {
  display: flex;
  transition: transform .65s var(--ease);
}
.tslide { flex: 0 0 100%; padding-inline: .5rem; }
@media (min-width: 900px) { .tslide { flex-basis: 33.3333%; } }

.tcard {
  height: 100%;
  padding: clamp(1.5rem, 2.4vw, 1.9rem);
  background: var(--ink-2);
  border: 1px solid var(--line-ink);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
}
.tcard__quote { color: var(--gold); opacity: .5; margin-bottom: .7rem; }
.tcard__quote .icon { width: 28px; height: 28px; }
.tcard blockquote { margin: 0; }
.tcard p {
  font-family: var(--serif);
  font-size: clamp(1.06rem, 1.02rem + .22vw, 1.2rem);
  font-style: italic; line-height: 1.5;
  color: var(--on-dark); margin-bottom: 1.4rem;
}
.tcard__stars { display: flex; gap: .22rem; margin-bottom: .9rem; color: var(--gold); }
.tcard__stars .icon { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.tcard__by { margin-top: auto; display: flex; align-items: center; gap: .8rem; min-width: 0; }
.tcard__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.tcard__av {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(200,162,94,.16); color: var(--gold);
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600;
  flex: none;
}
.tcard__name { display: block; font-size: .93rem; color: var(--on-dark); font-weight: 400; }
.tcard__src {
  display: block; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-ink-2);
}

.tnav { display: flex; justify-content: center; gap: .8rem; margin-top: 2.2rem; }
.tnav button {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line-ink); border-radius: 50%;
  color: var(--on-ink);
  transition: all .3s var(--ease);
}
.tnav button:hover { border-color: var(--gold); color: var(--gold); }
.tnav .icon { width: 18px; height: 18px; }
.tnav__prev .icon { transform: rotate(180deg); }

/* ---------------------------- Contact ---------------------------- */

.ccard {
  display: flex; align-items: flex-start; gap: 1.1rem;
  padding: clamp(1.4rem, 3vw, 1.9rem);
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ccard:hover { border-color: rgba(200,162,94,.5); box-shadow: var(--shadow-sm); }
.ccard__icon {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(200,162,94,.13); color: var(--gold-deep);
}
.ccard__icon .icon { width: 21px; height: 21px; }
.ccard h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.ccard a, .ccard p { display: block; font-size: .94rem; color: var(--text-2); margin: 0 0 .2rem; }
.ccard a:hover { color: var(--gold-deep); }
.ccard__label { font-size: .72rem !important; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3) !important; }

.mapwrap {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
  background: var(--bone-3);
}
.mapwrap iframe { display: block; width: 100%; height: clamp(320px, 46vh, 460px); border: 0; }

.bankcard {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-md);
}
.bankcard h3 { color: var(--on-dark); font-size: 1.25rem; }
.bankcard dl { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.4rem; margin: 1.2rem 0 0; font-size: .92rem; }
.bankcard dt { color: var(--on-ink-2); font-size: .8rem; letter-spacing: .08em; }
.bankcard dd { margin: 0; color: var(--on-dark); font-variant-numeric: tabular-nums; }

/* ------------------------ Policy / prose ------------------------- */

.prose { max-width: 76ch; }
.prose h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); margin-top: 2.6rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.25rem; margin-top: 1.8rem; }
.prose ul { display: grid; gap: .6rem; margin: 0 0 1.4rem; }
.prose ul li { display: flex; gap: .7rem; color: var(--text-2); }
.prose ul li::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-top: .68rem;
  background: var(--gold); border-radius: 50%;
}
.prose p { color: var(--text-2); }
.prose strong { color: var(--text); font-weight: 500; }
.prose a { color: var(--gold-deep); border-bottom: 1px solid rgba(156,118,53,.35); }

.notice {
  padding: clamp(1.3rem, 3vw, 1.8rem);
  background: var(--bone-2);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin: 2rem 0;
}
.notice h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.notice p { margin: 0; font-size: .94rem; }

.toc {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-bottom: 2.6rem; padding-bottom: 2rem;
  border-bottom: 1px solid var(--line-2);
}
.toc a {
  padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 100px;
  font-size: .78rem; color: var(--text-2);
  transition: all .3s var(--ease);
}
.toc a:hover { border-color: var(--gold); color: var(--gold-deep); }

/* ----------------------------- CTA ------------------------------- */

.cta {
  position: relative; isolation: isolate;
  color: var(--on-dark);
  text-align: center;
  overflow: hidden;
}
.cta .pic, .cta .pic img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.cta .pic img { object-fit: cover; }
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(18,16,14,.78);
}
.cta h2 { color: var(--on-dark); }
.cta .lead { color: rgba(239,233,223,.82); margin-inline: auto; max-width: 56ch; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; margin-top: 2.2rem; }

/* ---------------------------- Footer ----------------------------- */

.foot { background: var(--ink); color: var(--on-ink-2); padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(2rem, 4vw, 3.2rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.foot__col--brand { grid-column: span 1; max-width: 340px; }
@media (min-width: 1000px) { .foot__col--brand { grid-column: span 1; } }

.foot__logo { width: 148px; height: auto; margin-bottom: 1.3rem; }
.foot__blurb { font-size: .92rem; line-height: 1.7; margin-bottom: 1.5rem; }
.foot__social { display: flex; gap: .6rem; }
.foot__social a {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-ink); border-radius: 50%;
  color: var(--on-ink-2);
  transition: all .3s var(--ease);
}
.foot__social a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }
.foot__social .icon { width: 18px; height: 18px; }

.foot__title {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 1.3rem;
}
.foot__links { display: grid; gap: .75rem; font-size: .92rem; }
.foot__links a { transition: color .25s var(--ease), padding-left .25s var(--ease); }
.foot__links a:hover { color: var(--gold); padding-left: .35rem; }
.foot__phlabel {
  /* --text-3 is tuned for light surfaces; on the dark footer it only reaches
     ~4.4:1. --on-ink-2 is the dark-surface muted tone. */
  display: block; font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--on-ink-2); margin-bottom: .1rem;
}
.foot__links--phones a { font-variant-numeric: tabular-nums; color: var(--on-ink); }
.foot__addr { font-style: normal; font-size: .92rem; margin-top: 1.2rem; line-height: 1.7; }

.foot__facts { display: grid; gap: .6rem; margin-bottom: 1.6rem; font-size: .9rem; }
.foot__facts li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line-ink); }
.foot__facts strong { color: var(--gold); font-weight: 500; }
.foot__links--policy { font-size: .86rem; }

.foot__bar { border-top: 1px solid var(--line-ink); }
.foot__bar-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem;
  padding-block: 1.5rem;
  font-size: .82rem;
}
.foot__bar p { margin: 0; }
.foot__credit { color: var(--on-ink-2); }

/* --------------------- Mobile bar & floaters --------------------- */

.mobar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none;
  background: rgba(18,16,14,.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-ink);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobar__btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: .22rem;
  padding: .7rem .4rem;
  color: var(--on-ink);
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
}
.mobar__btn .icon { width: 20px; height: 20px; }
.mobar__btn--gold { background: var(--gold); color: var(--ink); }

@media (max-width: 760px) {
  .mobar { display: flex; }
  body { padding-bottom: 66px; }
  .wafloat { bottom: 82px; }
  .totop { bottom: 82px; }
}

.wafloat {
  position: fixed; right: 1.1rem; bottom: 1.6rem; z-index: 70;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  background: #1FA855; color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 26px rgba(31,168,85,.4);
  transition: transform .3s var(--ease);
}
.wafloat:hover { transform: scale(1.08); }
.wafloat .icon { width: 28px; height: 28px; }
@media (max-width: 760px) { .wafloat { display: none; } }

.totop {
  position: fixed; right: 1.1rem; bottom: 5.6rem; z-index: 70;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: var(--ink); color: var(--gold);
  border: 1px solid var(--line-ink);
  border-radius: 50%;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease), transform .3s var(--ease);
}
.totop.is-on { opacity: 1; visibility: visible; }
.totop:hover { transform: translateY(-3px); }
.totop .icon { width: 20px; height: 20px; transform: rotate(-90deg); }
@media (max-width: 760px) { .totop { right: 1.1rem; bottom: 78px; } }

/* ----------------------------- Modal ----------------------------- */

.modal {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
}
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(10,9,8,.7); backdrop-filter: blur(4px); }
.modal__panel {
  position: relative;
  width: min(100%, 720px);
  max-height: 90vh; overflow-y: auto;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  background: var(--bone);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  animation: modalIn .35s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.modal__x {
  position: absolute; top: 1rem; right: 1rem;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--text-2);
  transition: all .25s var(--ease);
}
.modal__x:hover { border-color: var(--gold); color: var(--gold-deep); }
.modal__title { margin-bottom: .4rem; }
.modal__lead { color: var(--text-2); font-size: .96rem; margin-bottom: 1.6rem; }

/* --------------------------- Utilities --------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .09s; }
.reveal--d2 { transition-delay: .18s; }
.reveal--d3 { transition-delay: .27s; }
.reveal--d4 { transition-delay: .36s; }

/* Gold rule under a heading draws itself in as its block arrives. */
.reveal .rule, .reveal.rule { width: 0; transition: width .9s var(--ease) .35s; }
.reveal.is-in .rule, .reveal.is-in.rule { width: 54px; }

/* Large photos open from the centre and settle, rather than just fading. */
.split__media.reveal > .pic:first-child {
  clip-path: inset(7% 7% 7% 7% round var(--r-md));
  transition: clip-path 1.2s var(--ease);
}
.split__media.reveal > .pic:first-child img { transform: scale(1.12); transition: transform 1.6s var(--ease), opacity .55s var(--ease); }
.split__media.reveal.is-in > .pic:first-child { clip-path: inset(0 0 0 0 round var(--r-md)); }
.split__media.reveal.is-in > .pic:first-child img { transform: none; }

/* Page to page: the next page fades up while the header stays put.
   Browsers without cross-page view transitions just navigate as before. */
@view-transition { navigation: auto; }
.header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(root) { animation: vtOut .25s var(--ease) both; }
::view-transition-new(root) { animation: vtIn .5s var(--ease) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); } }

.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;
}

.center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .reveal .rule, .reveal.rule { width: 54px; }
  .split__media.reveal > .pic:first-child { clip-path: none; }
  .split__media.reveal > .pic:first-child img { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .hero__slide.is-active img { animation: none; }
  /* No staged entrance, and never a delay that leaves the hero blank. */
  .hero__copy > * { opacity: 1; transform: none; animation-delay: 0s !important; }
  .intro { display: none; }
}

@media print {
  .topbar, .header, .mobar, .wafloat, .totop, .modal, .cta, .bookbar { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .foot { background: #fff; color: #000; }
}

/* "hidden" always wins. A component's own display (buttons are
   inline-flex, boxes are grid) otherwise overrides the [hidden] attribute,
   and a thing meant to be hidden shows up anyway — an empty chart tooltip
   on Reports, a stray Cancel button under Rooms & Rates. */
[hidden] { display: none !important; }