/* ─────────────────────────────────────────────────────────────
   LUMINOIRE — header + hero only.
   Scoped under .lum-page so it never leaks into Atelier styles.
   Reuses Atelier's existing palette and type tokens.
───────────────────────────────────────────────────────────── */

:root {
  --lum-white:    #FFFFFF;
  --lum-ivory:    #F8F5F0;
  --lum-warm-bg:  #FAF8F5;
  --lum-charcoal: #1A1A1A;
  --lum-muted:    #736D62;   /* darkened from #8A8278 to clear WCAG AA (4.5:1) on the warm bg */
  --lum-border:   #E8E3DC;

  --lum-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --lum-font-sans:  'Jost', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif;

  --lum-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Deep-olive accent — the single restrained brand note. Hex first,
     then OKLCH for browsers that support it (most do). */
  --lum-accent:      #6C6E49;
  --lum-accent:      oklch(0.55 0.055 118);
  --lum-accent-deep: #565839;
  --lum-accent-deep: oklch(0.47 0.05 118);
  --lum-accent-soft: rgba(108, 110, 73, 0.16);
  --lum-accent-soft: oklch(0.55 0.055 118 / 0.16);
}

/* Accent focus ring for keyboard users — brand-tinted, page-wide. */
.lum-page a:focus-visible,
.lum-page button:focus-visible,
.lum-page input:focus-visible,
.lum-page select:focus-visible {
  outline: 2px solid var(--lum-accent);
  outline-offset: 3px;
}

.lum-page {
  margin: 0;
  padding: 0;
  font-family: var(--lum-font-sans);
  color: var(--lum-charcoal);
  background: #2a241f;            /* warm fallback if hero image is slow */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.lum-page *,
.lum-page *::before,
.lum-page *::after { box-sizing: border-box; }

/* Smooth anchor scrolling for the nav links + hero scroll cue.
   This stylesheet only loads on the Luminoire page, so the bare
   html selector can't leak into Atelier. */
html { scroll-behavior: smooth; }

/* Lenis smooth-scroll: when active it owns the scrolling, so disable
   the native smooth behaviour to avoid double-easing. Inert without JS. */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }


/* ─── Hero ─────────────────────────────────────────────────── */

.lum-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;                 /* avoid jump under mobile chrome */
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
  /* Still coastal fallback beneath the montage — shows until a clip
     plays, or permanently if autoplay is unavailable. */
  background:
    #1a1714
    url("https://images.unsplash.com/photo-1602002418082-a4443e081dd1?auto=format&fit=crop&w=1600&q=70")
    center / cover no-repeat;
}

/* Montage — two stacked video layers that cross-fade, 1s each. */
.lum-hero__montage {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.lum-hero__clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.4s var(--lum-ease);
  will-change: opacity;
}
.lum-hero__clip.is-active { opacity: 1; }

/* Legibility wash over the (varied) footage: a soft centre vignette
   behind the logo plus a stronger bottom weight for the scroll cue. */
.lum-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, rgba(10, 8, 6, 0.42) 0%, rgba(10, 8, 6, 0.12) 55%, rgba(10, 8, 6, 0) 78%),
    linear-gradient(to top, rgba(10, 8, 6, 0.52) 0%, rgba(10, 8, 6, 0.10) 40%, rgba(10, 8, 6, 0) 70%);
  pointer-events: none;
}

@keyframes lum-hero-fade {
  to { opacity: 1; }
}

/* Hero logo lockup — centred, fades and rises in on arrival. */
.lum-hero__content {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 28px;
  pointer-events: none;        /* never blocks the header controls */
}

.lum-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--lum-ivory);
  opacity: 0;
  transform: translateY(16px);
  animation: lum-hero-rise 1.6s var(--lum-ease) forwards 0.8s;
  will-change: opacity, transform;
}
.lum-logo__mark {
  width: clamp(56px, 6vw, 78px);
  height: auto;
  color: var(--lum-ivory);
  filter: drop-shadow(0 2px 14px rgba(10, 8, 6, 0.4));
  margin-bottom: 22px;
}
.lum-logo__word {
  margin: 0;
  font-family: var(--lum-font-serif);
  font-weight: 500;
  font-size: clamp(32px, 6.2vw, 76px);
  line-height: 1;
  letter-spacing: 0.2em;
  padding-left: 0.2em;            /* balance the trailing tracking */
  color: var(--lum-ivory);
  text-shadow: 0 2px 26px rgba(10, 8, 6, 0.34);
}
.lum-logo__rule {
  display: block;
  width: 64px;
  height: 1px;
  margin: 26px 0 20px;
  background: var(--lum-ivory);
  opacity: 0.55;
}
.lum-logo__sub {
  font-family: var(--lum-font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(14px, 1.7vw, 19px);
  letter-spacing: 0.02em;
  color: rgba(248, 245, 240, 0.92);
  text-shadow: 0 1px 14px rgba(10, 8, 6, 0.34);
}
.lum-logo__sub em { font-style: italic; }

@keyframes lum-hero-rise {
  to { opacity: 1; transform: none; }
}

/* Scroll cue — hairline track with a lit segment travelling down. */
.lum-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  color: var(--lum-ivory);
  text-decoration: none;
  opacity: 0;
  animation: lum-hero-fade 1.2s var(--lum-ease) forwards 1.5s;
  transition: opacity 0.4s var(--lum-ease);
}
.lum-hero__scroll:hover { opacity: 0.7; }

.lum-hero__scroll-label {
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0.82;
  padding-left: 0.34em;
}

.lum-hero__scroll-line {
  position: relative;
  width: 1px;
  height: 46px;
  background: rgba(248, 245, 240, 0.26);
  overflow: hidden;
}
.lum-hero__scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 42%;
  background: var(--lum-ivory);
  transform: translateY(-100%);
  animation: lum-scroll-travel 2.6s var(--lum-ease) infinite;
}
@keyframes lum-scroll-travel {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(240%); }
  100% { transform: translateY(240%); }
}



/* ─── Header ───────────────────────────────────────────────── */

.lum-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  padding: 26px 44px;
  color: var(--lum-white);
  border-bottom: 1px solid transparent;
  opacity: 0;
  animation: lum-header-fade 1.1s var(--lum-ease) forwards 0.7s;
  transition:
    transform        0.55s var(--lum-ease),
    background-color 0.4s  var(--lum-ease),
    color            0.4s  var(--lum-ease),
    padding          0.4s  var(--lum-ease),
    border-color     0.4s  var(--lum-ease);
}

/* Solid state — once scrolled off the very top into the content. */
.lum-header--solid {
  background: rgba(250, 248, 245, 0.88);   /* warm ivory, lightly frosted */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--lum-charcoal);
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom-color: var(--lum-border);
}
/* Solid-state link hover picks up the olive accent. */
.lum-header--solid .lum-header__link:hover { color: var(--lum-accent); opacity: 1; }

/* Tucked away while scrolling down; slides back on scroll-up. */
.lum-header--hidden { transform: translateY(-100%); }

/* Over the hero the full logo lockup carries the brand, so the small
   header wordmark stays hidden until the header solidifies on scroll. */
.lum-wordmark { transition: opacity 0.4s var(--lum-ease); }
.lum-header:not(.lum-header--solid) .lum-wordmark { opacity: 0; visibility: hidden; }

/* Anchored sections clear the fixed header when navigated to. */
.lum-stays,
.lum-suites,
.lum-alchemy,
.lum-gym,
.lum-gastronomy,
.lum-showcase,
.lum-finalcta { scroll-margin-top: 84px; }

@keyframes lum-header-fade {
  to { opacity: 1; }
}

.lum-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Left: hamburger */
.lum-header__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: -10px;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s var(--lum-ease);
}
.lum-header__menu:hover { opacity: 0.7; }
.lum-header__menu svg   { display: block; }

/* Center: wordmark — absolutely centered so asymmetric edge clusters
   (38px hamburger vs ~320px nav+book) never pull it off-axis.
   Swap this anchor to replace with a finalized logo. */
.lum-wordmark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: inherit;
  text-decoration: none;
  font-family: var(--lum-font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}
.lum-wordmark__text {
  letter-spacing: 0.34em;
  padding-left: 0.34em;            /* visually balances the trailing tracking */
}

/* Right cluster */
.lum-header__right {
  display: inline-flex;
  align-items: center;
  gap: 32px;
}

.lum-header__nav {
  display: inline-flex;
  gap: 30px;
}

.lum-header__link {
  color: inherit;
  text-decoration: none;
  font-family: var(--lum-font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.3s var(--lum-ease);
}
.lum-header__link:hover { opacity: 1; }

.lum-header__book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--lum-charcoal);
  color: var(--lum-white);
  text-decoration: none;
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 0.3s var(--lum-ease);
}
.lum-header__book:hover { background: #000; }


/* ─── Drawer (opened by hamburger) ─────────────────────────── */

.lum-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--lum-ivory);
  color: var(--lum-charcoal);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    0.5s var(--lum-ease),
    visibility 0s   linear 0.5s;
}
.lum-drawer[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition:
    opacity    0.5s var(--lum-ease),
    visibility 0s   linear 0s;
}

.lum-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 44px;
  border-bottom: 1px solid var(--lum-border);
}
.lum-drawer__mark {
  font-family: var(--lum-font-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.32em;
  padding-left: 0.32em;
}
.lum-drawer__close {
  width: 38px; height: 38px;
  margin-right: -10px;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s var(--lum-ease);
}
.lum-drawer__close:hover { opacity: 0.6; }
.lum-drawer__close svg   { display: block; margin: 0 auto; }

.lum-drawer__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 36px;
  padding: 48px;
}
.lum-drawer__link {
  font-family: var(--lum-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--lum-charcoal);
  text-decoration: none;
  transition: color 0.35s var(--lum-ease);
}
.lum-drawer__link em { font-style: italic; }
.lum-drawer__link:hover { color: var(--lum-accent); }


/* ─── Stays (Rooms · Suites · Villas) ──────────────────────── */

.lum-stays {
  background: var(--lum-white);
  padding: 114px 48px 110px;
}

/* Section heading — quiet eyebrow over a serif title. */
.lum-stays__head {
  max-width: 1240px;
  margin: 0 auto 66px;
  text-align: center;
}
.lum-stays__eyebrow {
  display: block;
  margin: 0 0 18px;
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lum-accent);
}
.lum-stays__title {
  margin: 0;
  font-family: var(--lum-font-serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: 0.006em;
  color: var(--lum-charcoal);
}

.lum-stays__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: start;
}

/* Aligned row — a clean, polished grid for the rooms showcase. */
.lum-stay-card               { margin-top: 0; }
.lum-stay-card--raised       { margin-top: 0; }
.lum-stay-card--dropped      { margin-top: 0; }

.lum-stay-card__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 22px;
  background: var(--lum-ivory);      /* graceful fallback before image */
  text-decoration: none;
  color: var(--lum-charcoal);        /* avoid default link blue leaking through */
  -webkit-tap-highlight-color: transparent;
}

/* Bottom-only gradient — keeps the price label legible
   without darkening the rest of the image. */
.lum-stay-card__media::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(to top,
              rgba(10, 8, 6, 0.50) 0%,
              rgba(10, 8, 6, 0.18) 45%,
              rgba(10, 8, 6, 0)    100%);
  pointer-events: none;
}

.lum-stay-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s var(--lum-ease);
  will-change: transform;
}
.lum-stay-card__media:hover  .lum-stay-card__img,
.lum-stay-card__media:focus-visible .lum-stay-card__img {
  transform: scale(1.03);
}

.lum-stay-card__price {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(20, 17, 16, 0.48);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--lum-white);
  font-family: var(--lum-font-serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.01em;
}
.lum-stay-card__from {
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.82;
}
.lum-stay-card__per {
  font-family: var(--lum-font-sans);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

.lum-stay-card__title {
  margin: 0 0 7px;
  font-family: var(--lum-font-serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 0.008em;
  color: var(--lum-charcoal);
}

.lum-stay-card__caption {
  margin: 0;
  font-family: var(--lum-font-sans);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lum-muted);
}

/* Specs row + reserve link — the detail that signals a real suite. */
.lum-stay-card__specs {
  margin: 15px 0 18px;
  padding: 16px 0 0;
  border-top: 1px solid var(--lum-border);
  list-style: none;
}
.lum-stay-card__specs li {
  display: inline;
  font-family: var(--lum-font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lum-muted);
}
.lum-stay-card__specs li:not(:last-child)::after {
  content: "·";
  margin: 0 9px;
  color: var(--lum-border);
}
.lum-stay-card__reserve {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--lum-charcoal);
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--lum-charcoal);
  text-decoration: none;
  transition: color 0.3s var(--lum-ease), border-color 0.3s var(--lum-ease);
}
.lum-stay-card__reserve:hover {
  color: var(--lum-accent);
  border-bottom-color: var(--lum-accent);
}

/* Hover affordance — a quiet "Discover" rises in opposite the price. */
.lum-stay-card__explore {
  position: absolute;
  right: 20px;
  bottom: 18px;
  z-index: 1;
  color: var(--lum-white);
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity   0.5s var(--lum-ease),
    transform 0.5s var(--lum-ease);
}
.lum-stay-card__media:hover .lum-stay-card__explore,
.lum-stay-card__media:focus-visible .lum-stay-card__explore {
  opacity: 0.92;
  transform: none;
}

/* Scroll-in: heading fades up, then the three cards stagger in. */
.lum-stays__eyebrow,
.lum-stays__title {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   1s var(--lum-ease),
    transform 1s var(--lum-ease);
}
.lum-stays.is-visible .lum-stays__eyebrow { opacity: 1; transform: none; }
.lum-stays.is-visible .lum-stays__title  { opacity: 1; transform: none; transition-delay: 0.12s; }

.lum-stay-card {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity   1s var(--lum-ease),
    transform 1s var(--lum-ease);
}
.lum-stays.is-visible .lum-stay-card { opacity: 1; transform: none; }
.lum-stays.is-visible .lum-stay-card:nth-child(1) { transition-delay: 0.20s; }
.lum-stays.is-visible .lum-stay-card:nth-child(2) { transition-delay: 0.32s; }
.lum-stays.is-visible .lum-stay-card:nth-child(3) { transition-delay: 0.44s; }


/* ─── Signature Suites (visual grid, price-forward) ────────── */

.lum-suites {
  background: var(--lum-warm-bg);
  padding: 116px 48px 122px;
}
.lum-suites__head {
  max-width: 1100px;
  margin: 0 auto 60px;
  text-align: center;
}
.lum-suites__eyebrow {
  display: block;
  margin: 0 0 18px;
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lum-accent);
}
.lum-suites__title {
  margin: 0;
  font-family: var(--lum-font-serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: 0.006em;
  color: var(--lum-charcoal);
}
.lum-suites__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 54px 48px;
  max-width: 1100px;
  margin: 0 auto;
}
.lum-suites .lum-stay-card__media { aspect-ratio: 3 / 2; }

/* Scroll-in — head, then the reused cards stagger. */
.lum-suites__eyebrow,
.lum-suites__title {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--lum-ease), transform 1s var(--lum-ease);
}
.lum-suites.is-visible .lum-suites__eyebrow { opacity: 1; transform: none; }
.lum-suites.is-visible .lum-suites__title   { opacity: 1; transform: none; transition-delay: 0.12s; }
.lum-suites.is-visible .lum-stay-card { opacity: 1; transform: none; }
.lum-suites.is-visible .lum-stay-card:nth-child(1) { transition-delay: 0.18s; }
.lum-suites.is-visible .lum-stay-card:nth-child(2) { transition-delay: 0.26s; }
.lum-suites.is-visible .lum-stay-card:nth-child(3) { transition-delay: 0.34s; }
.lum-suites.is-visible .lum-stay-card:nth-child(4) { transition-delay: 0.42s; }


/* ─── The Alchemy of Rest (full-width cinematic band) ──────── */

.lum-alchemy {
  position: relative;
  width: 100%;
  height: clamp(560px, 86vh, 760px);
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
  background: #2a2823;             /* warm tone if image is slow */
}

.lum-alchemy__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}

/* Subtle radial glow only behind the centered text —
   the rest of the image stays untouched. */
.lum-alchemy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 45% at 50% 52%,
              rgba(10, 8, 6, 0.34) 0%,
              rgba(10, 8, 6, 0.18) 38%,
              rgba(10, 8, 6, 0)    72%);
  pointer-events: none;
  z-index: 1;
}

.lum-alchemy__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 28px;
  color: var(--lum-ivory);
}

/* Scroll-in: fade + rise. Each element staggers slightly. */
.lum-alchemy__eyebrow,
.lum-alchemy__headline,
.lum-alchemy__cta {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   1.1s var(--lum-ease),
    transform 1.1s var(--lum-ease);
}
.lum-alchemy.is-visible .lum-alchemy__eyebrow  {
  opacity: 0.88;
  transform: none;
  transition-delay: 0s;
}
.lum-alchemy.is-visible .lum-alchemy__headline {
  opacity: 1;
  transform: none;
  transition-delay: 0.14s;
}
.lum-alchemy.is-visible .lum-alchemy__cta {
  opacity: 1;
  transform: none;
  transition-delay: 0.32s;
}

.lum-alchemy__eyebrow {
  margin: 0 0 26px;
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lum-ivory);
}

.lum-alchemy__headline {
  margin: 0 0 40px;
  max-width: 18ch;
  font-family: var(--lum-font-serif);
  font-weight: 400;
  font-size: clamp(40px, 6.5vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--lum-ivory);
  text-shadow: 0 2px 22px rgba(10, 8, 6, 0.28);
}

.lum-alchemy__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 28px;
  border: 1px solid rgba(248, 245, 240, 0.72);
  background: transparent;
  color: var(--lum-ivory);
  text-decoration: none;
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition:
    background-color 0.45s var(--lum-ease),
    color            0.45s var(--lum-ease),
    border-color     0.45s var(--lum-ease);
}
.lum-alchemy__cta:hover,
.lum-alchemy__cta:focus-visible {
  background: var(--lum-ivory);
  color: var(--lum-charcoal);
  border-color: var(--lum-ivory);
}


/* ─── Feature bands — a floating panel over a photo, in motion ──
   A large image with an ivory text card overlapping its inner edge,
   a giant outlined index numeral, and a metadata row. As the band
   scrolls, the photo, numeral and card drift at different depths
   (parallax, defined further down). Gastronomy mirrors the sides. */

.lum-gym,
.lum-gastronomy {
  position: relative;
  overflow: hidden;
  background: var(--lum-warm-bg);
  padding: clamp(78px, 9vh, 128px) clamp(40px, 6vw, 96px);
}

.lum-gym__grid,
.lum-gastronomy__grid {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}

/* ── The photo ── */
.lum-gym__media,
.lum-gastronomy__media {
  position: relative;
  grid-row: 1;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: #0d0c0a;             /* deep neutral fallback */
  border: 1px solid var(--lum-border);
  border-radius: 6px;
  box-shadow:
    0 6px 16px -10px rgba(20, 17, 16, 0.22),
    0 40px 80px -48px rgba(20, 17, 16, 0.45);
  z-index: 1;
}
.lum-gym__media        { grid-column: 1 / 9; }    /* photo to the left  */
.lum-gastronomy__media { grid-column: 5 / 13; }   /* photo to the right */

.lum-gym__img,
.lum-gastronomy__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--lum-ease);
  will-change: transform;
}
.lum-gym__media:hover .lum-gym__img,
.lum-gastronomy__media:hover .lum-gastronomy__img {
  transform: scale(1.05);
}

/* A soft darkening in the numeral's corner so the ivory figure
   always reads, whatever the photo underneath. */
.lum-gym__media::after,
.lum-gastronomy__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.lum-gym__media::after {
  background: linear-gradient(152deg, rgba(13, 12, 10, 0.5) 0%, rgba(13, 12, 10, 0) 44%);
}
.lum-gastronomy__media::after {
  background: linear-gradient(208deg, rgba(13, 12, 10, 0.5) 0%, rgba(13, 12, 10, 0) 44%);
}

/* ── The floating ivory panel ── */
.lum-gym__content,
.lum-gastronomy__content {
  position: relative;
  grid-row: 1;
  z-index: 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  background: linear-gradient(168deg, #ffffff 0%, #faf8f2 100%);
  padding: clamp(40px, 3.4vw, 56px) clamp(34px, 3vw, 50px);
  border: 1px solid var(--lum-border);
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(20, 17, 16, 0.05),
    0 8px 24px -10px rgba(20, 17, 16, 0.18),
    0 48px 96px -44px rgba(20, 17, 16, 0.5),
    0 18px 44px -24px rgba(86, 88, 57, 0.32);    /* olive glow */
}
.lum-gym__content        { grid-column: 7 / 13; }  /* card right, laps the photo */
.lum-gastronomy__content { grid-column: 1 / 7; }   /* card left,  laps the photo */

/* ── Giant outlined index numeral (its own parallax layer) ── */
.lum-gym__index,
.lum-gastronomy__index {
  position: absolute;
  top: 2%;
  font-family: var(--lum-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(150px, 21vw, 340px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.6px rgba(247, 244, 238, 0.95);
  opacity: 0.78;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.lum-gym__index        { left: 4%; }    /* numeral over the photo's outer edge */
.lum-gastronomy__index { right: 4%; }

/* ── Panel typography ── */
.lum-gym__eyebrow,
.lum-gastronomy__eyebrow {
  align-self: flex-start;
  margin: 0 0 22px;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--lum-accent-soft);
  font-family: var(--lum-font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lum-accent-deep);
}

.lum-gym__headline,
.lum-gastronomy__headline {
  margin: 0 0 22px;
  font-family: var(--lum-font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(42px, 5vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.006em;
  color: var(--lum-charcoal);
}
.lum-gym__headline em,
.lum-gastronomy__headline em { font-style: italic; }

.lum-gym__body,
.lum-gastronomy__body {
  margin: 0 0 26px;
  font-family: var(--lum-font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: 0.015em;
  color: var(--lum-muted);
}

/* ── Metadata row ── */
.lum-gym__meta,
.lum-gastronomy__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 30px;
  padding: 18px 0 0;
  border-top: 1px solid var(--lum-border);
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--lum-charcoal);
}
.lum-gym__meta li,
.lum-gastronomy__meta li { white-space: nowrap; }
.lum-gym__meta li:not(:last-child)::after,
.lum-gastronomy__meta li:not(:last-child)::after {
  content: "·";
  margin: 0 11px;
  color: var(--lum-accent);
}

/* ── CTA ── */
.lum-gym__cta,
.lum-gastronomy__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--lum-accent);
  font-family: var(--lum-font-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lum-ivory);
  text-decoration: none;
  box-shadow: 0 16px 32px -16px rgba(86, 88, 57, 0.7);
  transition:
    background-color 0.4s var(--lum-ease),
    transform        0.4s var(--lum-ease),
    box-shadow       0.4s var(--lum-ease);
}
.lum-gym__cta:hover,
.lum-gastronomy__cta:hover {
  background: var(--lum-accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 22px 42px -18px rgba(86, 88, 57, 0.75);
}

/* ── Entrance: image fades, the card rises, the numeral swells in.
   Transforms on the photo and numeral belong to the parallax layer
   below, so the reveal only touches their opacity. ── */
.lum-gym__media,
.lum-gastronomy__media,
.lum-gym__index,
.lum-gastronomy__index {
  opacity: 0;
  transition: opacity 1.2s var(--lum-ease);
}
.lum-gym__content,
.lum-gastronomy__content {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity   1.05s var(--lum-ease),
    transform 1.05s var(--lum-ease);
}
.lum-gym.is-visible .lum-gym__media,
.lum-gastronomy.is-visible .lum-gastronomy__media { opacity: 1; }
.lum-gym.is-visible .lum-gym__content,
.lum-gastronomy.is-visible .lum-gastronomy__content { opacity: 1; transform: none; transition-delay: 0.12s; }
.lum-gym.is-visible .lum-gym__index,
.lum-gastronomy.is-visible .lum-gastronomy__index { opacity: 0.78; transition-delay: 0.26s; }

/* ── Parallax: the photo and the numeral drift at different depths
   as the band crosses the viewport (CSS scroll-driven where
   supported; perfectly static otherwise). ── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lum-gym__img,
    .lum-gastronomy__img {
      top: -9%;
      height: 118%;
      animation: lum-band-parallax linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    .lum-gym__index,
    .lum-gastronomy__index {
      animation: lum-num-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes lum-num-drift {
  from { transform: translateY(22%); }
  to   { transform: translateY(-22%); }
}


/* ─── Final CTA — cinematic, cursor-reactive invitation ─────────
   A photo under a warm-dark scrim. On pointer devices JS feeds
   --ctax/--ctay (cursor position), which drive the image + copy
   parallax. They default to 0, so with no JS the section is simply
   a still image with centred copy. The button is a pure CSS hover. */

.lum-finalcta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #1A1714;               /* warm near-black base under the image */
  padding: clamp(150px, 21vh, 232px) 24px;
  text-align: center;
}

/* Image layer — oversized and pulled past the edges so the cursor
   parallax never exposes a seam. */
.lum-finalcta__media {
  position: absolute;
  inset: -7%;
  z-index: -2;
  transform: translate3d(calc(var(--ctax, 0) * 22px), calc(var(--ctay, 0) * 16px), 0) scale(1.04);
  transition: transform 0.55s var(--lum-ease);
  will-change: transform;
}
.lum-finalcta__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.lum-finalcta__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(26, 23, 20, 0.58) 0%, rgba(26, 23, 20, 0.42) 48%, rgba(26, 23, 20, 0.72) 100%),
    radial-gradient(120% 120% at 50% 46%, rgba(26, 23, 20, 0) 0%, rgba(26, 23, 20, 0.55) 100%);
}

.lum-finalcta__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  transform: translate3d(calc(var(--ctax, 0) * -9px), calc(var(--ctay, 0) * -7px), 0);
  transition: transform 0.55s var(--lum-ease);
  will-change: transform;
}

.lum-finalcta__eyebrow {
  display: block;
  margin: 0 0 30px;
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(248, 245, 240, 0.66);
}

.lum-finalcta__headline {
  margin: 0 0 48px;
  font-family: var(--lum-font-serif);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 70px);
  line-height: 1.06;
  letter-spacing: -0.006em;
  color: var(--lum-ivory);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}

.lum-finalcta__cta {
  display: flex;
  justify-content: center;
}

/* Pure CSS hover — lifts and brightens. No per-frame JS on the
   button, so it can never jitter. */
.lum-finalcta__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 46px;
  border-radius: 999px;
  background: var(--lum-ivory);
  color: var(--lum-charcoal);
  text-decoration: none;
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transform: translateY(0);
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.75);
  transition:
    transform        0.42s var(--lum-ease),
    background-color 0.4s  var(--lum-ease),
    box-shadow       0.42s var(--lum-ease);
}
.lum-finalcta__button:hover {
  background: var(--lum-white);
  transform: translateY(-3px) scale(1.025);
  box-shadow: 0 32px 78px -26px rgba(0, 0, 0, 0.92);
}
.lum-finalcta__button:active {
  transform: translateY(-1px) scale(1.01);
}
.lum-finalcta__button-label {
  display: inline-block;
}

/* Scroll-in: eyebrow, headline, then the button group rise. */
.lum-finalcta__eyebrow,
.lum-finalcta__headline,
.lum-finalcta__cta {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   1s var(--lum-ease),
    transform 1s var(--lum-ease);
}
.lum-finalcta.is-visible .lum-finalcta__eyebrow  { opacity: 1; transform: none; }
.lum-finalcta.is-visible .lum-finalcta__headline { opacity: 1; transform: none; transition-delay: 0.12s; }
.lum-finalcta.is-visible .lum-finalcta__cta      { opacity: 1; transform: none; transition-delay: 0.24s; }


/* ─── Footer ───────────────────────────────────────────────── */

/* Inline modifier on the shared .lum-wordmark — resets the
   header's absolute centering so the same component sits
   naturally in the footer flow. The .lum-wordmark__text span
   stays identical, so swapping it once replaces the logo in
   both places. */
.lum-wordmark--inline {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  display: inline-block;
}

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

.lum-footer {
  background: var(--lum-ivory);
  color: var(--lum-charcoal);
  font-family: var(--lum-font-sans);
  padding: 104px 48px 32px;
}

.lum-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.lum-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 88px;
}

/* Brand column */
.lum-footer__brand .lum-wordmark--inline {
  color: var(--lum-charcoal);
  font-size: 18px;
  margin-bottom: 28px;
}

.lum-footer__subscribe-text {
  margin: 0 0 22px;
  max-width: 280px;
  font-family: var(--lum-font-sans);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--lum-muted);
}

.lum-footer__form {
  display: flex;
  align-items: center;
  max-width: 300px;
  border-bottom: 1px solid var(--lum-charcoal);
  transition: border-color 0.3s var(--lum-ease);
}
.lum-footer__form:focus-within { border-bottom-color: var(--lum-accent); }

.lum-footer__input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--lum-font-sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--lum-charcoal);
}
.lum-footer__input::placeholder {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--lum-muted);
  opacity: 1;
}

.lum-footer__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 8px 14px;
  background: transparent;
  border: 0;
  color: var(--lum-charcoal);
  cursor: pointer;
  transition: opacity 0.3s var(--lum-ease);
  -webkit-tap-highlight-color: transparent;
}
.lum-footer__submit:hover { opacity: 0.6; }
.lum-footer__submit svg   { display: block; }

/* Link columns */
.lum-footer__col-head {
  margin: 0 0 22px;
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lum-charcoal);
}

.lum-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lum-footer__links li { margin-bottom: 12px; }
.lum-footer__links li:last-child { margin-bottom: 0; }

.lum-footer__link {
  font-family: var(--lum-font-sans);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0.008em;
  line-height: 1.55;
  color: var(--lum-muted);
  text-decoration: none;
  transition: color 0.3s var(--lum-ease);
}
.lum-footer__link:hover { color: var(--lum-accent); }

/* Bottom row */
.lum-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid var(--lum-border);
}

.lum-footer__copy {
  margin: 0;
  font-family: var(--lum-font-sans);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lum-muted);
}

.lum-footer__social {
  display: flex;
  gap: 28px;
}

.lum-footer__social-link {
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lum-muted);
  text-decoration: none;
  transition: color 0.3s var(--lum-ease);
}
.lum-footer__social-link:hover { color: var(--lum-accent); }


/* ─── Reservation modal ────────────────────────────────────── */

.lum-book {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--lum-ease), visibility 0s linear 0.4s;
}
.lum-book[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--lum-ease), visibility 0s linear 0s;
}

.lum-book__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 16, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.lum-book__panel {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 880px;
  max-height: calc(100svh - 48px);
  overflow: hidden;
  background: var(--lum-warm-bg);
  box-shadow:
    0 50px 110px -36px rgba(20, 17, 16, 0.55),
    0 12px 30px -16px rgba(20, 17, 16, 0.32);
  transform: translateY(18px) scale(0.985);
  transition: transform 0.5s var(--lum-ease);
}

/* Image panel — the suite, beside the form. */
.lum-book__media {
  position: relative;
  flex: 0 0 38%;
  background: #16130f;
}
.lum-book__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.lum-book__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    rgba(22, 19, 15, 0.20) 0%,
    rgba(22, 19, 15, 0) 40%,
    rgba(250, 248, 245, 0.12) 100%);
  pointer-events: none;
}

/* Form panel — scrolls within itself only if a short viewport demands it. */
.lum-book__content {
  flex: 1 1 auto;
  min-width: 0;
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  padding: 46px 46px 42px;
}
.lum-book[data-open="true"] .lum-book__panel { transform: none; }

.lum-book__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(250, 248, 245, 0.78);
  border: 0;
  border-radius: 50%;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px -4px rgba(20, 17, 16, 0.4);
  color: var(--lum-charcoal);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s var(--lum-ease), background-color 0.3s var(--lum-ease);
}
.lum-book__close:hover { background: var(--lum-ivory); }
.lum-book__close svg { display: block; }

.lum-book__eyebrow {
  display: block;
  margin: 0 0 14px;
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lum-accent);
}
.lum-book__title {
  margin: 0 0 14px;
  font-family: var(--lum-font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.12;
  letter-spacing: 0.004em;
  color: var(--lum-charcoal);
}
.lum-book__intro {
  margin: 0 0 24px;
  max-width: 44ch;
  font-family: var(--lum-font-sans);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--lum-muted);
}

.lum-book__form { display: flex; flex-direction: column; gap: 18px; }
.lum-book__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.lum-book__field { display: flex; flex-direction: column; gap: 7px; }
.lum-book__field label {
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lum-muted);
  transition: color 0.3s var(--lum-ease);
}
.lum-book__field input,
.lum-book__field select {
  width: 100%;
  min-height: 40px;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lum-border);
  border-radius: 0;
  font-family: var(--lum-font-sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--lum-charcoal);
  transition: border-color 0.3s var(--lum-ease);
  -webkit-appearance: none;
  appearance: none;
}
.lum-book__field select {
  padding-right: 20px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpolyline points='1,1 5,5 9,1' fill='none' stroke='%23736D62' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1px center;
  background-size: 10px 7px;
}
/* Tame the native date control so it reads like the other fields. */
.lum-book__field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.3s var(--lum-ease);
}
.lum-book__field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.lum-book__field input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: 0.8; }
.lum-book__field input:hover,
.lum-book__field select:hover { border-bottom-color: var(--lum-muted); }
.lum-book__field input:focus,
.lum-book__field select:focus {
  outline: none;
  border-bottom-color: var(--lum-accent);
}
/* Active field lifts its label to the brand accent. */
.lum-book__field:focus-within label { color: var(--lum-accent); }

.lum-book__error {
  margin: -6px 0 0;
  font-family: var(--lum-font-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: #A8472E;
}

.lum-book__submit {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 34px;
  background: var(--lum-accent);
  color: var(--lum-white);
  border: 0;
  cursor: pointer;
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: background-color 0.35s var(--lum-ease);
  -webkit-tap-highlight-color: transparent;
}
.lum-book__submit:hover { background: var(--lum-accent-deep); }
.lum-book__submit--ghost {
  background: transparent;
  color: var(--lum-charcoal);
  border: 1px solid var(--lum-border);
}
.lum-book__submit--ghost:hover { background: var(--lum-ivory); }

.lum-book__success { text-align: center; padding: 14px 0 4px; }
.lum-book__check { display: inline-flex; margin-bottom: 20px; color: var(--lum-accent); }
.lum-book__success .lum-book__intro { margin-left: auto; margin-right: auto; }
.lum-book__success .lum-book__submit { margin-top: 26px; }

/* ── Custom booking controls (replace native date/select popups) ──
   The native input/select stay in the DOM (hidden) as the data store
   and no-JS fallback; these branded controls sit on top. */
.lum-book__field { position: relative; }   /* anchor for popovers */
.lum-book__daterow { position: relative; }

/* Trigger button — mirrors the underline field look. */
.lum-book__pick {
  width: 100%;
  min-height: 40px;
  padding: 10px 22px 10px 0;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lum-border);
  border-radius: 0;
  font-family: var(--lum-font-sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--lum-charcoal);
  cursor: pointer;
  transition: border-color 0.3s var(--lum-ease);
  background-repeat: no-repeat;
  background-position: right 1px center;
}
.lum-book__pick:hover { border-bottom-color: var(--lum-muted); }
.lum-book__pick[aria-expanded="true"] { border-bottom-color: var(--lum-accent); }
.lum-book__pick--select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpolyline points='1,1 5,5 9,1' fill='none' stroke='%23736D62' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 10px 7px;
}
.lum-book__pick--select[aria-expanded="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpolyline points='1,6 5,2 9,6' fill='none' stroke='%236C6E49' stroke-width='1.3'/%3E%3C/svg%3E");
}
.lum-book__pick--date {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Crect x='0.5' y='1.5' width='13' height='11.5' rx='1' fill='none' stroke='%23736D62' stroke-width='1'/%3E%3Cline x1='0.5' y1='4.5' x2='13.5' y2='4.5' stroke='%23736D62' stroke-width='1'/%3E%3Cline x1='4' y1='0' x2='4' y2='3' stroke='%23736D62' stroke-width='1'/%3E%3Cline x1='10' y1='0' x2='10' y2='3' stroke='%23736D62' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 13px 13px;
}
.lum-book__field:focus-within label { color: var(--lum-accent); }

/* Select dropdown panel */
.lum-book__options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 8;
  margin: 7px 0 0;
  padding: 6px;
  list-style: none;
  background: var(--lum-white);
  border: 1px solid var(--lum-border);
  box-shadow: 0 22px 48px -22px rgba(20, 17, 16, 0.42);
  max-height: 230px;
  overflow-y: auto;
}
.lum-book__option {
  padding: 9px 12px;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--lum-charcoal);
  cursor: pointer;
  transition: background-color 0.2s var(--lum-ease);
}
.lum-book__option:hover { background: var(--lum-ivory); }
.lum-book__option[aria-selected="true"] { color: var(--lum-accent); font-weight: 500; }

/* Calendar popover */
.lum-cal {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9;
  width: 300px;
  max-width: 100%;
  margin-top: 10px;
  padding: 16px 16px 12px;
  background: var(--lum-white);
  border: 1px solid var(--lum-border);
  box-shadow: 0 26px 54px -24px rgba(20, 17, 16, 0.46);
}
.lum-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.lum-cal__month {
  font-family: var(--lum-font-serif);
  font-weight: 400;
  font-size: 15.5px;
  letter-spacing: 0.01em;
  color: var(--lum-charcoal);
}
.lum-cal__nav {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  color: var(--lum-charcoal);
  cursor: pointer;
  transition: background-color 0.2s var(--lum-ease);
}
.lum-cal__nav:hover { background: var(--lum-ivory); }
.lum-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.lum-cal__wd {
  text-align: center;
  padding: 4px 0 8px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lum-muted);
}
.lum-cal__day {
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-family: var(--lum-font-sans);
  font-size: 12.5px;
  color: var(--lum-charcoal);
  cursor: pointer;
  transition: background-color 0.2s var(--lum-ease), color 0.2s var(--lum-ease);
}
.lum-cal__day:hover:not(:disabled):not(.is-start):not(.is-end):not(.is-range):not(.is-preview) { background: var(--lum-ivory); }
.lum-cal__day.is-past { color: #CFC9BF; cursor: default; }
.lum-cal__day.is-range,
.lum-cal__day.is-preview { background: var(--lum-accent-soft); border-radius: 0; }
.lum-cal__day.is-start,
.lum-cal__day.is-end { background: var(--lum-accent); color: var(--lum-white); }
.lum-cal__day.is-start { border-radius: 50% 0 0 50%; }
.lum-cal__day.is-end { border-radius: 0 50% 50% 0; }
.lum-cal__hint {
  margin: 10px 2px 0;
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--lum-muted);
}


/* ─── Gym / Movement ────────────────────────────────────────────
   Styled by the shared “feature bands” component above
   (.lum-gym + .lum-gastronomy). Mirror sides are set there. */


/* ─── Showcase — a fanned "hand" of the property's rooms ────────
   A bold headline over an overlapping arc of cards; the centre is
   raised and largest, edges rotate out and sit lower. Cards fade
   in; hovering one straightens and lifts it above the rest.
   Each card carries its angle / lift / scale / depth on inline
   custom props (--r / --y / --s / --d). */

.lum-showcase {
  position: relative;
  overflow: hidden;
  background: var(--lum-warm-bg);
  padding: clamp(96px, 13vh, 150px) 24px clamp(80px, 11vh, 130px);
  text-align: center;
}
.lum-showcase__head { max-width: 1000px; margin: 0 auto; }
.lum-showcase__title {
  margin: 0;
  font-family: var(--lum-font-serif);
  font-weight: 400;
  font-size: clamp(42px, 6.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  color: var(--lum-charcoal);
}

.lum-showcase__fan {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: clamp(44px, 6vh, 80px) auto clamp(30px, 4vh, 48px);
  padding-top: 34px;                 /* room for the raised centre + hover lift */
}
.lum-showcase__card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(116px, 12.5vw, 188px);
  aspect-ratio: 3 / 4;
  margin: 0 -2.4vw;                  /* the overlap */
  border-radius: 14px;
  overflow: hidden;
  background: #0d0c0a;
  box-shadow: 0 28px 56px -26px rgba(20, 17, 16, 0.5);
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)) scale(var(--s, 1));
  transform-origin: center bottom;
  z-index: calc(10 - var(--d, 0));
  opacity: 0;
  transition:
    opacity    0.7s  var(--lum-ease),
    transform  0.55s var(--lum-ease),
    box-shadow 0.55s var(--lum-ease);
  transition-delay: calc(var(--i, 0) * 0.06s);
}
.lum-showcase.is-visible .lum-showcase__card { opacity: 1; }
.lum-showcase__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lum-showcase__card:hover {
  transform: rotate(0deg) translateY(-20px) scale(1.08);
  z-index: 30;
  box-shadow: 0 46px 84px -28px rgba(20, 17, 16, 0.62);
}

/* Floating labels — the reference's chat tags, made elegant. */
.lum-showcase__tag {
  position: absolute;
  z-index: 28;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--lum-charcoal);
  color: var(--lum-ivory);
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  box-shadow: 0 14px 30px -14px rgba(20, 17, 16, 0.6);
}
.lum-showcase__tag::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 22px;
  width: 10px;
  height: 10px;
  background: inherit;
  border-radius: 0 0 3px 0;
  transform: rotate(45deg);
}
.lum-showcase__tag--left  { left: 15%; top: 7%; }
.lum-showcase__tag--right { right: 12%; top: -2%; background: var(--lum-accent); }
.lum-showcase__tag--right::after { background: var(--lum-accent); }

.lum-showcase__sub {
  max-width: 46ch;
  margin: 0 auto clamp(30px, 4vh, 44px);
  font-family: var(--lum-font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.012em;
  color: var(--lum-muted);
}
.lum-showcase__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.lum-showcase__cta {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 34px;
  border-radius: 999px;
  background: var(--lum-charcoal);
  color: var(--lum-ivory);
  text-decoration: none;
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: transform 0.4s var(--lum-ease), background-color 0.4s var(--lum-ease);
}
.lum-showcase__cta:hover { background: #000; transform: translateY(-2px); }
.lum-showcase__link {
  font-family: var(--lum-font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lum-charcoal);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--lum-border);
  transition: border-color 0.4s var(--lum-ease), color 0.4s var(--lum-ease);
}
.lum-showcase__link:hover { color: var(--lum-accent); border-bottom-color: var(--lum-accent); }


/* ─── Unified button system ──────────────────────────────────
   One pill for every CTA; the role is carried by colour, not shape:
     charcoal / ivory → Book / Reserve (the conversion funnel)
     olive            → Explore a section on light (Studio, Dining)
     ghost outline    → Explore on the dark Spa image
   Tertiary actions stay as underline links. */
.lum-header__book,
.lum-alchemy__cta,
.lum-gym__cta,
.lum-gastronomy__cta,
.lum-showcase__cta,
.lum-finalcta__button,
.lum-book__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 32px;
  border: 0;
  border-radius: 999px;
  font-family: var(--lum-font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.4s  var(--lum-ease),
    color            0.4s  var(--lum-ease),
    transform        0.45s var(--lum-ease),
    box-shadow       0.45s var(--lum-ease),
    opacity          0.6s  var(--lum-ease);
}

/* olive — explore (on light cards) */
.lum-gym__cta,
.lum-gastronomy__cta {
  background: var(--lum-accent);
  color: var(--lum-ivory);
  box-shadow: 0 16px 32px -18px rgba(86, 88, 57, 0.7);
}
.lum-gym__cta:hover,
.lum-gastronomy__cta:hover {
  background: var(--lum-accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 24px 44px -18px rgba(86, 88, 57, 0.78);
}

/* ghost — explore on the dark Spa image (outline, now a pill) */
.lum-alchemy__cta {
  background: transparent;
  color: var(--lum-ivory);
  border: 1px solid rgba(248, 245, 240, 0.72);
}
.lum-alchemy__cta:hover,
.lum-alchemy__cta:focus-visible {
  background: var(--lum-ivory);
  color: var(--lum-charcoal);
  border-color: var(--lum-ivory);
  transform: translateY(-2px);
}

/* charcoal — Book / Reserve (on light) */
.lum-showcase__cta,
.lum-book__submit {
  background: var(--lum-charcoal);
  color: var(--lum-ivory);
  box-shadow: 0 16px 34px -20px rgba(20, 17, 16, 0.55);
}
.lum-showcase__cta:hover,
.lum-book__submit:hover {
  background: #000;
  transform: translateY(-2px);
  box-shadow: 0 24px 46px -20px rgba(20, 17, 16, 0.62);
}

/* ivory — Book / Reserve (on the dark final image) */
.lum-finalcta__button {
  background: var(--lum-ivory);
  color: var(--lum-charcoal);
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.8);
}
.lum-finalcta__button:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 28px 58px -24px rgba(0, 0, 0, 0.85);
}

/* shared pressed state */
.lum-gym__cta:active,
.lum-gastronomy__cta:active,
.lum-alchemy__cta:active,
.lum-showcase__cta:active,
.lum-finalcta__button:active,
.lum-book__submit:active { transform: translateY(0); }

/* header — compact and flat (it rides over content) */
.lum-header__book {
  height: 36px;
  padding: 0 22px;
  font-size: 10.5px;
  background: var(--lum-charcoal);
  color: var(--lum-ivory);
}
.lum-header__book:hover { background: #000; transform: none; }

/* success-view ghost keeps its outline */
.lum-book__submit--ghost {
  background: transparent;
  color: var(--lum-charcoal);
  border: 1px solid var(--lum-border);
  box-shadow: none;
}
.lum-book__submit--ghost:hover {
  background: var(--lum-ivory);
  color: var(--lum-charcoal);
  border-color: var(--lum-charcoal);
  box-shadow: none;
}

/* Entrance: framing copy + the whole fan rise; cards then fade in. */
.lum-showcase__title,
.lum-showcase__fan,
.lum-showcase__sub,
.lum-showcase__actions {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--lum-ease), transform 1s var(--lum-ease);
}
.lum-showcase.is-visible .lum-showcase__title  { opacity: 1; transform: none; }
.lum-showcase.is-visible .lum-showcase__fan     { opacity: 1; transform: none; transition-delay: 0.1s; }
.lum-showcase.is-visible .lum-showcase__sub     { opacity: 1; transform: none; transition-delay: 0.2s; }
.lum-showcase.is-visible .lum-showcase__actions { opacity: 1; transform: none; transition-delay: 0.28s; }


/* ─── Responsive ───────────────────────────────────────────── */

@media (max-width: 900px) {
  .lum-header { padding: 22px 28px; }
  .lum-header__right { gap: 20px; }
  .lum-header__nav   { gap: 22px; }
  .lum-header__link  { font-size: 10.5px; letter-spacing: 0.18em; }
  .lum-drawer__head  { padding: 22px 28px; }
  .lum-hero__content { padding: 0 32px; }

  /* Stays: collapse to single editorial column,
     drop the raised/dropped offset entirely. */
  .lum-stays { padding: 92px 32px 88px; }
  .lum-stays__head { margin-bottom: 48px; }
  .lum-stays__grid {
    grid-template-columns: 1fr;
    gap: 56px;
    max-width: 520px;
  }
  .lum-stay-card--dropped { margin-top: 0; }

  .lum-suites       { padding: 96px 32px 100px; }
  .lum-suites__grid { gap: 44px 36px; max-width: 760px; }

  /* Feature bands → stack: full-width photo, the card floats up over it. */
  .lum-gym, .lum-gastronomy { padding: 0; }
  .lum-gym__grid, .lum-gastronomy__grid {
    display: block;
    grid-template-columns: none;
    max-width: none;
  }
  .lum-gym__media, .lum-gastronomy__media { aspect-ratio: 16 / 11; }
  .lum-gym__content, .lum-gastronomy__content {
    margin: -76px 24px clamp(60px, 9vw, 84px);
    padding: clamp(38px, 6vw, 52px) clamp(30px, 6vw, 46px);
  }
  .lum-gym__index, .lum-gastronomy__index { display: none; }

  .lum-film { height: clamp(480px, 80vh, 680px); }

  .lum-showcase { padding: 88px 22px 96px; }

  .lum-finalcta { padding: 132px 24px 140px; }

  /* Footer: brand spans full width, 3 link columns below. */
  .lum-footer        { padding: 80px 32px 28px; }
  .lum-footer__top   {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 32px;
    padding-bottom: 72px;
  }
  .lum-footer__brand { grid-column: 1 / -1; max-width: 360px; }
}

@media (max-width: 640px) {
  .lum-header { padding: 18px 22px; }
  .lum-header__nav  { display: none; }
  .lum-wordmark     { font-size: 15px; }
  .lum-wordmark__text { letter-spacing: 0.26em; padding-left: 0.26em; }
  .lum-header__book {
    height: 32px;
    padding: 0 16px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .lum-drawer__head  { padding: 18px 22px; }
  .lum-drawer__nav   { gap: 28px; }
  .lum-drawer__link  { font-size: 30px; }

  /* Hero: centred logo lockup; the scroll cue returns now the lower
     area is clear. */
  .lum-hero__content { padding: 0 22px; }
  .lum-logo__word    { font-size: clamp(30px, 9vw, 48px); letter-spacing: 0.16em; padding-left: 0.16em; }
  .lum-logo__rule    { width: 52px; margin: 22px 0 18px; }
  .lum-logo__sub     { font-size: 13px; }
  .lum-logo__mark    { margin-bottom: 18px; }
  .lum-hero__scroll  { bottom: 22px; }

  .lum-stays           { padding: 72px 22px 72px; }
  .lum-stays__head     { margin-bottom: 40px; }
  .lum-stays__grid     { gap: 48px; }
  .lum-stay-card__title { font-size: 23px; }

  .lum-suites       { padding: 80px 22px 88px; }
  .lum-suites__head { margin-bottom: 40px; }
  .lum-suites__grid { grid-template-columns: 1fr; gap: 44px; max-width: 520px; }

  .lum-alchemy           { height: clamp(440px, 80vh, 560px); }
  .lum-alchemy__content  { padding: 60px 22px; }
  .lum-alchemy__eyebrow  { margin-bottom: 20px; letter-spacing: 0.28em; }
  .lum-alchemy__headline { margin-bottom: 32px; max-width: 14ch; }

  .lum-gastronomy__media    { aspect-ratio: 4 / 3; }
  .lum-gastronomy__content  { margin: -60px 16px clamp(52px, 11vw, 72px); padding: 34px 26px; }
  .lum-gastronomy__headline { font-size: clamp(34px, 9vw, 48px); margin-bottom: 18px; }
  .lum-gastronomy__body     { font-size: 13px; line-height: 1.8; margin-bottom: 24px; }

  .lum-film            { height: clamp(420px, 74vh, 560px); }
  .lum-film__content   { padding: 60px 22px; }
  .lum-film__eyebrow   { margin-bottom: 20px; letter-spacing: 0.28em; }
  .lum-film__headline  { font-size: clamp(34px, 9vw, 52px); margin-bottom: 18px; }
  .lum-film__sub       { font-size: 13px; }

  .lum-gym__media    { aspect-ratio: 4 / 3; }
  .lum-gym__content  { margin: -60px 16px clamp(52px, 11vw, 72px); padding: 34px 26px; }
  .lum-gym__headline { font-size: clamp(34px, 9vw, 48px); margin-bottom: 18px; }
  .lum-gym__body     { font-size: 13px; line-height: 1.8; margin-bottom: 24px; }

  .lum-showcase             { padding: 76px 18px 84px; }
  .lum-showcase__title      { font-size: clamp(34px, 9.5vw, 54px); }
  .lum-showcase__card       { width: clamp(86px, 21vw, 132px); margin: 0 -4.6vw; }
  .lum-showcase__card:first-child,
  .lum-showcase__card:nth-child(7) { display: none; }
  .lum-showcase__tag        { font-size: 10px; padding: 6px 12px; }
  .lum-showcase__tag--left  { left: 4%; }
  .lum-showcase__tag--right { right: 2%; }
  .lum-showcase__sub        { font-size: 14px; }
  .lum-showcase__actions    { flex-direction: column; gap: 18px; }

  .lum-finalcta           { padding: 104px 22px 112px; }
  .lum-finalcta__eyebrow  { margin-bottom: 24px; letter-spacing: 0.28em; }
  .lum-finalcta__headline { margin-bottom: 38px; }

  .lum-footer           { padding: 64px 22px 24px; }
  .lum-footer__top      {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-bottom: 56px;
  }
  .lum-footer__brand    { grid-column: auto; max-width: 100%; }
  .lum-footer__form     { max-width: 100%; }
  .lum-footer__bottom   {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 24px;
  }
  .lum-footer__social   { gap: 22px; }

  /* Reservation modal: stack the image over a single-column form. */
  .lum-book__panel   { flex-direction: column; max-width: 560px; overflow-y: auto; }
  .lum-book__media   { flex: 0 0 150px; }
  .lum-book__content { max-height: none; overflow: visible; padding: 38px 26px 34px; }
  .lum-book__grid    { grid-template-columns: 1fr; gap: 16px; }
}


/* ─── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .lum-header,
  .lum-logo,
  .lum-hero__scroll { animation: none; opacity: 1; transform: none; }
  .lum-hero__scroll { transform: translateX(-50%); }   /* keep it centered */
  .lum-hero__scroll-line::after { animation: none; }
  .lum-hero__clip { transition: none; }
  .lum-drawer { transition: opacity 0.01s, visibility 0.01s; }
  .lum-book__panel { transition: none; transform: none; }
  .lum-header { transition: none; }
  .lum-header--hidden { transform: none; }   /* never slide out of view */

  .lum-stays__eyebrow,
  .lum-stays__title,
  .lum-stay-card,
  .lum-suites__eyebrow,
  .lum-suites__title,
  .lum-alchemy__eyebrow,
  .lum-alchemy__headline,
  .lum-alchemy__cta,
  .lum-gastronomy__media,
  .lum-gastronomy__content,
  .lum-gym__media,
  .lum-gym__content,
  .lum-showcase__title,
  .lum-showcase__fan,
  .lum-showcase__sub,
  .lum-showcase__actions,
  .lum-finalcta__eyebrow,
  .lum-finalcta__headline,
  .lum-finalcta__cta,
  .lum-finalcta__media,
  .lum-finalcta__inner,
  .lum-finalcta__button,
  .lum-finalcta__button-label {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* numerals keep their resting outline opacity; cards keep their fan */
  .lum-gym__index,
  .lum-gastronomy__index {
    opacity: 0.75 !important;
    transform: none !important;
    transition: none !important;
  }
  .lum-showcase__card {
    opacity: 1 !important;
    transition: none !important;
  }
}


/* ─── Parallax on the image bands (progressive enhancement) ───
   CSS scroll-driven animations where supported; otherwise the
   images stay static. Confined to no-preference motion. The
   images are oversized so the drift never reveals a gap. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Alchemy band — image drifts as the section crosses the viewport. */
    .lum-alchemy__img {
      top: -16%;
      bottom: auto;
      height: 132%;
      will-change: transform;
      animation: lum-band-parallax linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

  }
}

@keyframes lum-band-parallax {
  from { transform: translateY(-7%); }
  to   { transform: translateY(7%); }
}