/* ============================================================
   DHULEVA ONE50 — "A Reflection of You"
   Stylesheet — variables, reset, base, layout, components
   Palette: Imperial Signet Maroon (#390007) + White ONLY
   Typeface: Futura LT BT (single family, all weights faked
   via size / spacing / opacity per brand restraint)
   ============================================================ */

/* ---------- Font face ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');
@font-face {
  font-family: 'Futura LT BT';
  src: url('../fonts/FuturaLtBT-Light.woff2') format('woff2'),
       url('../fonts/FuturaLtBT-Light.woff') format('woff');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Cormorant Garamond', serif;
}
/* ---------- Root variables ---------- */
:root{
  /* brand colors — maroon + white only */
  --c-primary:        #390007;
  --c-primary-60:     rgba(57,0,7,.6);
  --c-primary-80:     rgba(57,0,7,.82);
  --c-primary-40:     rgba(57,0,7,.4);
  --c-primary-15:     rgba(57,0,7,.15);
  --c-white:           #ffffff;
  --c-white-85:        rgba(255,255,255,.85);
  --c-white-65:        rgba(255,255,255,.65);
  --c-white-40:        rgba(255,255,255,.4);
  --c-white-20:        rgba(255,255,255,.2);
  --c-white-12:        rgba(255,255,255,.12);
  --c-white-08:        rgba(255,255,255,.08);
  /* video scrim is tinted WITH the brand maroon (not neutral black) so the
     primary color reads through every media section instead of the video
     just going flat black */
  --c-scrim:            rgba(35,0,4,.42);
  --c-scrim-strong:     rgba(35,0,4,.62);
  --c-scrim-soft:        rgba(57,0,7,.22);
  --c-text-shadow:      0 2px 24px rgba(0,0,0,.45);
  /* ink tones — for the white-background split sections between story
     chapters; kept warm-neutral (not flat black) so copy still reads as
     part of the maroon/white brand rather than a generic dark grey */
  --c-ink:              #201013;
  --c-ink-70:           rgba(32,16,19,.7);
  --c-ink-45:           rgba(32,16,19,.45);
  --c-hairline:         rgba(32,16,19,.12);

  /* type */
  /* only the font file provided — no 'Futura'/'Century Gothic' named
     fallbacks, since either could exist as a different, unrelated font
     already installed on someone's system and silently render instead;
     the generic sans-serif keyword is kept only because a completely
     empty fallback isn't possible in CSS (something must render if the
     file itself fails to fetch), not because it's an intended font */
  --font-base: 'Futura LT BT', sans-serif;
  --font-sec: 'Cormorant Garamond', serif;
  --fs-h1: clamp(2.4rem, 5.4vw, 5rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 2.125rem);
  --fs-h3: clamp(1.5rem, 2.6vw, 2.1rem);
  --fs-num: clamp(2.75rem, 4.2vw, 4rem);
  --fs-eyebrow: 1.0625rem;
  --fs-body: 1rem;
  --fs-lead: clamp(0.75rem, 1.3vw, 0.875rem);
  --ls-wide: .28em;
  --ls-mid: .12em;
  --ls-tight: .01em;
  --lh-tight: 1.16;
  --lh-body: 1.75;

  /* layout */
  --container-w: 1360px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section-pad-y: clamp(5rem, 12vw, 9rem);
  --radius-sm: 2px;
  --radius-md: 4px;

  /* motion */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.65,0,.35,1);
  --dur-fast: .4s;
  --dur-med: .8s;
  --dur-slow: 1.4s;

  /* z-index scale — nav sits above the menu overlay on purpose: the
     hamburger/close toggle lives in .site-header, and it was getting
     completely covered (unreachable) by the full-screen menu overlay
     once open, since the overlay used to sit above the header */
  --z-bg: 1;
  --z-content: 5;
  --z-menu: 200;
  --z-nav: 210;
  --z-loader: 300;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote{ margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--c-primary);
  color: var(--c-white);
  font-family: var(--font-base);
  font-weight: 300;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x: hidden alone makes the CSS spec auto-flip overflow-y to
     "auto" on body, turning it into its own scroll container — that
     silently breaks native #anchor scrolling (the browser scrolls the
     wrong box, so clicking "Discover Amenities" etc. changed the URL
     hash but never actually moved the page). overflow-x: clip gives the
     same no-horizontal-scroll safety net without that side effect. */
  overflow-x: clip;
}
body.lock-scroll{ overflow: hidden; height: 100vh; }
img, video{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
button, input, textarea, select{ font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; outline: none; }
button{ cursor: pointer; }
::selection{ background: var(--c-white); color: var(--c-primary); }

/* scrollbar */
::-webkit-scrollbar{ width: 9px; }
::-webkit-scrollbar-track{ background: var(--c-primary); }
::-webkit-scrollbar-thumb{ background: var(--c-white-40); border-radius: 10px; }

/* ---------- Utility classes ---------- */
.container{
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .75em;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-white-65);
}
.eyebrow::before{
  content: '';
  width: 28px; height: 1px;
  background: var(--c-white-40);
}
.section-heading{
  font-family: var(--font-sec);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: .01em;
}
.section-heading em{
  font-style: italic;
  font-weight: 300;
  opacity: .8;
}
.section-lead{
  font-size: var(--fs-lead);
  color: var(--c-white-85);
  font-weight: 300;
  max-width: 46ch;
}
.hair-rule{
  width: 44px; height: 1px;
  background: var(--c-white-40);
  margin-block: 1.6rem;
}
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* buttons */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: 1.05rem 2.4rem;
  font-size: .82rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border: 1px solid var(--c-white-40);
  border-radius: var(--radius-sm);
  color: var(--c-white);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  isolation: isolate;
}
.btn::before{
  content: '';
  position: absolute; inset: 0;
  background: var(--c-white);
  transform: translateX(-101%);
  transition: transform var(--dur-med) var(--ease-soft);
  z-index: -1;
}
.btn:hover, .btn:focus-visible{
  color: var(--c-primary);
  border-color: var(--c-white);
}
.btn:hover::before, .btn:focus-visible::before{ transform: translateX(0); }
.btn--solid{
  background: var(--c-white);
  color: var(--c-primary);
  border-color: var(--c-white);
}
.btn--solid::before{ background: transparent; }
.btn--solid:hover{ color: var(--c-primary); opacity: .88; }
.btn .btn-arrow{ transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn-arrow{ transform: translateX(5px); }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position: fixed; inset: 0;
  z-index: var(--z-loader);
  background: var(--c-primary);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.6rem;
}
.preloader__mark{
  width: min(220px, 46vw);
  opacity: 0;
  animation: fadeIn 1s var(--ease-out) .15s forwards;
}
.preloader__bar{
  width: min(220px, 46vw);
  height: 1px;
  background: var(--c-white-20);
  position: relative;
  overflow: hidden;
}
.preloader__bar::after{
  content: '';
  position: absolute; inset: 0;
  width: 30%;
  background: var(--c-white);
  animation: loaderSlide 1.2s ease-in-out infinite;
}
.preloader__pct{
  font-size: .72rem;
  letter-spacing: var(--ls-wide);
  color: var(--c-white-65);
}
@keyframes fadeIn{ to{ opacity: 1; } }
@keyframes loaderSlide{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(430%); }
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem var(--gutter);
  transition: padding var(--dur-fast) var(--ease-out);
  border-bottom: 1px solid transparent;
}
/* header stays transparent on scroll on purpose — no background fill or
   border line should appear as the page scrolls, only the compact
   padding still tightens slightly */
.site-header.is-scrolled{
  padding-block: 1rem;
}
.site-header__logo{ display: block; height: clamp(26px, 3.4vw, 50px); }
.site-header__logo img{ height: 100%; width: auto; }

.site-nav{ display: flex; align-items: center; }
.header-actions{ display: flex; align-items: center; gap: 1.1rem; }
.icon-btn{
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--c-white-20);
  border-radius: 50%;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.icon-btn:hover{ background: var(--c-white-08); border-color: var(--c-white-40); }
.icon-btn svg{ width: 16px; height: 16px; fill: none; stroke: var(--c-white); stroke-width: 1.4; }

.menu-toggle{
  /* no circle/border chrome — just the three bars, icon-only */
  display: flex; flex-direction: column; gap: 6px;
  width: 42px; height: 42px; align-items: center; justify-content: center;
  border: none; background: none;
}
.menu-toggle span{ width: 16px; height: 1px; background: var(--c-white); transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }
.menu-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2){ opacity: 0; }
.menu-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* slide-in menu — right-hand panel + blurred/dimmed backdrop, so the
   hero video stays visible (dimmed, not hidden) behind it */
.site-menu{
  position: fixed; inset: 0;
  z-index: var(--z-menu);
  display: flex;
  justify-content: flex-end;
  visibility: hidden;
  pointer-events: none;
}
.site-menu.is-open{
  visibility: visible;
  pointer-events: auto;
}
.site-menu__backdrop{
  position: absolute; inset: 0;
  /* lighter tint + less blur than before, on purpose — the hero video
     needs to stay visibly readable behind the open menu, just dimmed,
     not washed out to a near-solid maroon panel */
  background: rgba(10,0,2,.38);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-soft);
}
.site-menu.is-open .site-menu__backdrop{ opacity: 1; }
.site-menu__panel{
  position: relative;
  /* stays under half the viewport on tablet/desktop (46vw), but never
     shrinks past a usable 280px floor on small phones — a pure min(46vw)
     dropped to ~172px on a 375px phone, too narrow for the nav text
     even at its smallest clamp size */
  width: clamp(280px, 46vw, 420px);
  height: 100%;
  /* translucent maroon, not solid — the playing hero video stays visible
     through the panel, but the tint is deep enough that the panel still
     reads as "maroon surface with video behind it," not a washed-out
     see-through rectangle. Frosted-glass blur keeps the nav text legible. */
  background: rgba(57, 0, 7, .3);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 6rem clamp(1.5rem, 5vw, 3.5rem);
  box-shadow: -40px 0 90px rgba(0,0,0,.4);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-soft);
  overflow-y: auto;
}
.site-menu.is-open .site-menu__panel{ transform: translateX(0); }
.site-menu__list{ display: flex; flex-direction: column; gap: .3rem; }
.site-menu__list a{
  display: inline-block;
  /* sized to fit "02 — An Address Apart" (the longest link) on one line
     within the panel's own max width (420px) — the previous clamp
     topped out at 2.1rem, which was wide enough to force every
     multi-word link onto two lines even on a full-size desktop panel */
  font-size: clamp(1rem, 1.7vw, 1.45rem);
  font-weight: 300;
  letter-spacing: .01em;
  padding-block: .3rem;
  color: var(--c-white-65);
  white-space: nowrap;
  /* panel background is translucent now (video shows through), so the
     text needs its own contrast anchor independent of what's playing
     behind it */
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.site-menu__list a:hover{ color: var(--c-white); transform: translateX(10px); }
.site-menu__meta{
  margin-top: 3rem;
  display: flex; flex-direction: column; gap: .9rem;
  color: var(--c-white-65); font-size: .85rem;
}
.site-menu__meta a{ color: var(--c-white); width: fit-content; border-bottom: 1px solid var(--c-white-40); }

/* ============================================================
   MEDIA SECTION (shared base for hero + numbered sections)
   ============================================================ */
.media-section{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.media-section__bg{
  position: absolute; inset: 0;
  z-index: var(--z-bg);
  width: 100%; height: 100%;
  overflow: hidden;
}
.media-section__bg video,
.media-section__bg img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  filter: saturate(.92) brightness(.9);
}
/* maroon duotone wash — multiplies the brand color into the footage so the
   primary color is felt everywhere, not just in flat UI chrome */
.media-section__bg::after{
  content: '';
  position: absolute; inset: 0;
  background: var(--c-primary);
  mix-blend-mode: multiply;
  opacity: .55;
  z-index: 1;
}
.media-section__scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--c-scrim) 0%, var(--c-scrim-soft) 30%, var(--c-scrim-soft) 58%, var(--c-scrim-strong) 100%);
  z-index: 2;
}
.media-section__scrim.hero-banner{
  background:inherit;
}
.hero .media-section__bg::after{
  background:inherit;
}
.media-section__content{
  position: relative; z-index: var(--z-content);
  width: 100%;
}
.media-section__content .story__index,
.media-section__content .story__kicker,
.media-section__content .story__title,
.media-section__content .story__text,
.media-section__content .story__foot{
  text-shadow: var(--c-text-shadow);
}

/* ---------- HERO ---------- */
.hero{
  align-items: center;
  text-align: center;
}
/* .hero .media-section__scrim{
  background: linear-gradient(180deg, rgba(35,0,4,.4) 0%, rgba(57,0,7,.2) 45%, rgba(35,0,4,.58) 100%);
} */
/* ---------- NUMBERED STORY SECTIONS ----------
   A single video layer is pinned for the full height of .story-stack (all
   five chapters combined) — it never releases and re-pins per chapter.
   .story-stack__pin sits out of normal flow (position:absolute) so it
   contributes no height of its own; .story-stack__track's five chapters,
   each one viewport tall, are what give .story-stack its scroll length and
   scroll normally on top of the still-pinned video, crossfading the active
   .story-video as each chapter takes its turn. */
.story-stack{
  position: relative;
  isolation: isolate;
}
.story-stack__pin{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: var(--z-bg);
}
.story-video{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s var(--ease-soft);
}
.story-video.is-active{ opacity: 1; }
.story-stack__track{
  position: relative;
  z-index: var(--z-content);
}
.story-chapter{
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.story__grid{
  display: grid;
  /* grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter); */
  align-items: center;
  padding-block: clamp(3rem, 8vw, 5rem);
  justify-content: start;
}
.story__index{
  grid-column: 1 / 4;
  font-size: var(--fs-num);
  font-weight: 100;
  line-height: 1;
  color: var(--c-white);
  letter-spacing: 0;
  transform-origin: left center;
}
.story__body{
  grid-column: 4 / 12;
  max-width: 640px;
}
.story__kicker{
  display: block;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.2rem;
  font-weight: 400;
}
.story__title{
  font-size: var(--fs-h2);
  font-family: var(--font-sec);
  font-style: italic;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin-bottom: 1.5rem;
  font-weight: 300;
}
.story__title strong{
  display: block;
}
.story__text{
  font-size: var(--fs-lead);
  font-weight: 300;
  color: var(--c-white-85);
  max-width: 52ch;
}
.story__foot{
  grid-column: 4 / 12;
  display: flex; align-items: center; gap: 1rem;
  margin-top: 2.4rem;
  color: var(--c-white);
  font-size: 12px;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
}
.story__foot .counter{ color: var(--c-white); font-weight: 400; }

/* GSAP ScrollTrigger injects a pin-spacer wrapper around each pinned
   .media-section — make sure it never clips or misaligns the pin */
.pin-spacer{ overflow: visible !important; }

/* ============================================================
   FEATURE SPLIT — white beat dropped between each numbered story
   chapter (image one side, copy the other), alternating sides
   chapter-to-chapter so the sequence reads as a zigzag down the page.
   Lives as a normal-flow sibling of .story-chapter inside
   .story-stack__track, so it simply scrolls up over the still-pinned
   video (z-index: var(--z-content)) and screens it off with an opaque
   background — no change needed to the pin/crossfade logic above.
   ============================================================ */
.feature-split{
  position: relative;
  background: var(--c-white);
  color: var(--c-ink);
  padding-block: clamp(4.5rem, 11vw, 8rem);
}
.feature-split__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  text-align: center;
  justify-content: center;
}
.feature-split__grid.end{
  align-items:self-end;
  grid-template-columns:2fr 1fr;
}
.feature-split__grid.end .feature-split__body{
  text-align: left;
}
.feature-split--flip .feature-split__media{ order: 2; }
.feature-split--flip .feature-split__body{ order: 1; }
.feature-split__media{
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-primary-15);
}
.feature-split__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ---------- pure background video beat — no text, no scrim, the
   footage itself is the whole moment (marina/yacht clip) ---------- */
.media-beat{ position: relative; height: 100vh; overflow: hidden; background: var(--c-primary); }
.media-beat__bg{ position: absolute; inset: 0; }
.media-beat__bg video,
.media-beat__bg img{ width: 100%; height: 100%; object-fit: cover; }
/* no dark scrim — these captions sit on the naturally light sky part of
   the photo and read in dark ink directly, matching the reference */
.media-beat__caption{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  padding: clamp(6rem, 12vw, 9rem) var(--gutter) 0;
}
.media-beat__caption h2{
  font-family: var(--font-sec);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: #4b060f;
}
.media-beat__caption--bottom{
  top: auto;
  bottom: 0;
  padding: 0 var(--gutter) clamp(3.5rem, 9vw, 6rem);
}
.media-beat__caption p{
  font-size: var(--fs-lead);
  font-weight: 300;
  color: #49494a;
  max-width: 46ch;
  margin-top: 1rem;
}

/* ---------- 360° virtual tour panel (Wellness beat) — full width,
   no split column: the tour is the whole beat, not an illustration
   beside text ---------- */
.tour-full{ position: relative; background: var(--c-primary); }
.tour-full .feature-split__media--tour{
  aspect-ratio: auto;
  width: 100%;
  height: 100vh;
  background: var(--c-primary-15);
}
.tour-full__scrim{
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(0deg, var(--c-scrim-strong) 0%, transparent 40%);
  pointer-events: none;
}
/* a quiet section label — so landing here from the "05 — Wellness" menu
   link is visually confirmed, not just an anchor jump with no on-screen
   proof this is the right beat */
.tour-eyebrow{
  position: absolute;
  top: 1.4rem; left: 1.4rem;
  z-index: 3;
  padding: .5rem 1rem;
  font-size: .7rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-white);
  background: var(--c-primary-80);
  backdrop-filter: blur(4px);
  border: 1px solid var(--c-white-20);
  transition: opacity .4s var(--ease-out);
}
.feature-split__media--tour.is-tour-active .tour-eyebrow{
  opacity: 0;
  pointer-events: none;
}
.tour-full__caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: clamp(2rem, 6vw, 4rem) var(--gutter);
}
.tour-full__caption .feature-split__eyebrow{ color: var(--c-white-85); }
.tour-full__caption .feature-split__title{ color: var(--c-white); text-shadow: var(--c-text-shadow); }
.tour-full__caption .feature-split__rule{ background: var(--c-white); }
.tour-full__cta{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.6rem;
  padding: .9rem 1.6rem;
  border: 1px solid var(--c-white-40);
  color: var(--c-white);
  font-size: .78rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.tour-full__cta:hover{ background: var(--c-white); color: var(--c-primary); border-color: var(--c-white); }
.tour-full__cta svg{ transition: transform var(--dur-fast) var(--ease-out); }
.tour-full__cta:hover svg{ transform: translateX(3px); }
.feature-split__media--tour img{ transition: opacity .5s var(--ease-out); }

/* a slow, self-evident ticker along the top edge — the one element on
   the whole page that moves on its own without being scrolled or
   hovered, so it reads immediately as "this one is different, this one
   is interactive" before a visitor even reaches the button */
.tour-marquee{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  overflow: hidden;
  padding-block: .85rem;
  background: var(--c-primary-80);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--c-white-20);
  white-space: nowrap;
}
.tour-marquee__track{
  display: inline-flex;
  align-items: center;
  animation: tourMarquee 22s linear infinite;
  will-change: transform;
}
.tour-marquee__group{
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding-right: .9rem;
  flex-shrink: 0;
}
.tour-marquee__group span{
  font-size: .74rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-white-85);
}
.tour-marquee__dot{ color: var(--c-white-40); font-size: .65rem; }
@keyframes tourMarquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
.tour-launch{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  height: 100%;
  background: var(--c-scrim-soft);
  transition: opacity .4s var(--ease-out), background .3s;
}
.tour-launch:hover{ background: var(--c-scrim); }
.tour-launch__ring{
  position: relative;
  width: 76px; height: 76px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--c-white-40);
  background: var(--c-primary-80);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.tour-launch:hover .tour-launch__ring{ transform: scale(1.08); border-color: var(--c-white); }
.tour-launch__ring svg{ width: 30px; height: 30px; stroke: var(--c-white); position: relative; z-index: 1; }
.tour-launch__pulse{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--c-white-40);
  animation: tourPulse 2.6s var(--ease-out) infinite;
}
@keyframes tourPulse{
  0%{ transform: scale(1); opacity: .8; }
  100%{ transform: scale(1.6); opacity: 0; }
}
/* a small marker orbits the ring like a compass needle sweeping a
   panorama — a literal hint (rotation) at the 360° gesture itself,
   rather than a generic play icon */
.tour-launch__orbit{
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  border: 1px dashed var(--c-white-40);
  animation: tourOrbitSpin 9s linear infinite;
}
.tour-launch__orbit-dot{
  position: absolute;
  top: -3px; left: 50%;
  width: 6px; height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 0 8px 1px var(--c-white-40);
}
@keyframes tourOrbitSpin{ to{ transform: rotate(360deg); } }
.tour-launch__label{
  font-size: .78rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-white);
  text-shadow: var(--c-text-shadow);
}
.feature-split__media--tour.is-tour-active .tour-launch,
.feature-split__media--tour.is-tour-active .tour-marquee,
.feature-split__media--tour.is-tour-active .tour-full__caption,
.feature-split__media--tour.is-tour-active .tour-full__scrim,
.feature-split__media--tour.is-tour-active img{
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-out);
}
.tour-close{
  position: absolute;
  top: 1.4rem; right: 1.4rem;
  z-index: 5;
  isolation: isolate;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--c-white-40);
  background: var(--c-primary-80);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transform: scale(.8);
  transition: opacity .35s var(--ease-out) .15s, transform .35s var(--ease-out) .15s, border-color var(--dur-fast), background var(--dur-fast);
}
.tour-close svg{ width: 16px; height: 16px; stroke: var(--c-white); }
.tour-close:hover{ border-color: var(--c-white); background: var(--c-primary); }
.feature-split__media--tour.is-tour-active .tour-close{
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.feature-split__media--tour iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity .6s var(--ease-out);
}
.feature-split__media--tour.is-tour-active iframe{ opacity: 1; }

.feature-split__body{ max-width: 34rem; }
.feature-split--flip .feature-split__body{ margin-left: auto; }
.feature-split__rule{
  display: block;
  width: 3.2rem;
  height: 2px;
  background: var(--c-primary);
  margin-bottom: 1.6rem;
  transform-origin: left center;
}
.feature-split__eyebrow{
  display: block;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 1.1rem;
}
.feature-split__title{
  font-family: var(--font-sec);
  font-size: 24px;
  font-style: italic;
  font-weight: 300;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: #4b060f;
  margin-bottom: 1.4rem;
  
}
.feature-split__title strong{ display: block; font-weight: 700; }
.feature-split__title-inner{ display: inline-block; }
.feature-split__text{
  font-family: var(--font-sec);
  font-size: 16px;
  font-weight: 300;
  color:#414141;
}
.feature-split__btn{
  display: inline-block;
  margin-top: 1.8rem;
  padding: 1.05rem 2.4rem;
  background: var(--c-primary);
  color: var(--c-white);
  font-size: .8rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out);
}
.feature-split__btn:hover{ background: #4b060f; }

/* animation targets (JS toggles via GSAP, base state hidden) — text
   rises smoothly from below as you scroll, matching the reference */
.reveal{ opacity: 0; transform: translateY(48px); }
.reveal-fade{ opacity: 0; }

/* ============================================================
   COLLECTION / GALLERY
   ============================================================ */
.collection{
  position: relative;
  background: var(--c-primary);
  padding-block: var(--section-pad-y);
}
.collection__head{
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.collection__nav{ display: flex; gap: .8rem; }
.collection__nav button{
  width: 46px; height: 46px;
  border: 1px solid var(--c-white-20);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.collection__nav button:hover{ background: var(--c-white-08); border-color: var(--c-white-40); }
.collection__nav svg{ width: 16px; height: 16px; stroke: var(--c-white); fill: none; stroke-width: 1.4; }

.collection__track{
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: none;
}
.collection__track::-webkit-scrollbar{ display: none; }
.collection__card{
  flex: 0 0 clamp(260px, 34vw, 420px);
  scroll-snap-align: start;
}
.collection__frame{
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.collection__frame img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-soft);
}
.collection__card:hover .collection__frame img{ transform: scale(1.06); }
.collection__frame::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(35,0,4,.8) 100%);
}
.collection__meta{ padding-top: 1.1rem; }
.collection__eyebrow{
  display: block;
  font-size: .7rem; letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--c-white-65); margin-bottom: .4rem;
}
.collection__title{ font-size: 1.05rem; font-weight: 300; }

/* ============================================================
   TITLE CARD — wordmark reveal beat between hero and chapter 01
   (mirrors the reference site's black "Mercedes-Benz Places /
   Binghatti" card that appears right after the opening video)
   ============================================================ */
.intro-card{
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #4b060f;
}
.intro-card__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
  padding-inline: var(--gutter);
}
.intro-card__logo{ width: min(420px, 72vw); }
.intro-card__line{
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-white-65);
}
.intro-card__cta{ margin-top: .6rem; }
.intro-card--full{ min-height: 100vh; }
.intro-card--bg{ position: relative; overflow: hidden; background: var(--c-primary); }
.intro-card__bg{ position: absolute; inset: 0; z-index: var(--z-bg); }
.intro-card__bg img{ width: 100%; height: 100%; object-fit: cover; }
.intro-card__scrim{
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  background: radial-gradient(120% 100% at 50% 40%, var(--c-primary) 0%, #1c0004 100%);
}
.intro-card--bg .intro-card__inner{
  position: relative;
  z-index: var(--z-content);
}

/* ============================================================
   CONTACT / EXPRESS INTEREST
   ============================================================ */
.enquiry{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}
.enquiry__bg{ position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.enquiry__bg img{ width: 100%; height: 100%; object-fit: cover; transform-origin: center; will-change: transform; }
/* large ambient watermark that rises up over the image as the section
   enters — confirmed against the reference's "Connect With The Brand"
   footer treatment (bottom:0, translateY(100%)→(-50vh), fade in then
   settle to a faint ghost) that moves on/fades away as the user keeps
   scrolling, before the two panels below arrive. */
.enquiry__ghost{
  position: absolute;
  left: 50%; bottom: 0;
  z-index: 1;
  font-size: clamp(4.5rem, 15vw, 12rem);
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--c-white);
  white-space: nowrap;
  pointer-events: none;
}
/* left info + right form panels — full section height, half the section
   width each (so together they cover the section edge to edge), solid
   brand backgrounds so each panel is completely invisible (off-canvas)
   until it slides fully into place. The right panel stays translucent so
   the background image still reads faintly behind the form, the left
   panel stays solid. Matches the reference's opaque, full-height
   footer-details / footer-form panels. */
.enquiry__col--left,
.enquiry__col--right{
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  z-index: 2;
  padding: clamp(2rem, 4vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  will-change: transform;
}
.enquiry__col--left{ left: 0; background: var(--c-primary); }
.enquiry__col--right{
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem 1.6rem;
  align-content: center;
  background: var(--c-primary-80);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.enquiry__nav{ margin-top: 2.2rem; display: flex; flex-direction: column; gap: 1rem; }
.enquiry__nav a{
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .85rem; letter-spacing: var(--ls-mid); text-transform: uppercase;
  color: var(--c-white-85);
  width: fit-content;
  transition: color var(--dur-fast);
}
.enquiry__nav a svg{ transition: transform var(--dur-fast) var(--ease-out); }
.enquiry__nav a:hover{ color: var(--c-white); }
.enquiry__nav a:hover svg{ transform: translateX(4px); }
.enquiry__social{ margin-top: 2.2rem; display: flex; gap: .8rem; }

.field{ position: relative; grid-column: span 2; }
.field label{
  display: block;
  font-size: .72rem; letter-spacing: var(--ls-mid); text-transform: uppercase;
  color: var(--c-white-65); margin-bottom: .6rem;
}
.field input, .field select, .field textarea{
  width: 100%;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--c-white-40);
  font-size: 1rem;
  color: var(--c-white);
  transition: border-color var(--dur-fast);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--c-white-40); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--c-white); }
.phone-field{ display: grid; grid-template-columns: 88px 1fr; gap: .8rem; position: relative; }
/* custom country-code dropdown — replaces a native <select> so its open
   list can actually be styled (native option popups are OS-rendered and
   ignore @font-face on most platforms) */
.code-select{ position: relative; }
.code-select__trigger{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: .4rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--c-white-40);
  font-size: 1rem;
  color: var(--c-white);
  cursor: pointer;
  transition: border-color var(--dur-fast);
}
.code-select__trigger:hover,
.code-select__trigger:focus-visible{ border-color: var(--c-white); }
.code-select__chevron{ width: 14px; height: 14px; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); }
.code-select.is-open .code-select__chevron{ transform: rotate(180deg); }
.code-select__list{
  position: absolute;
  top: calc(100% + .6rem);
  left: 0;
  min-width: 11rem;
  z-index: 5;
  background: var(--c-primary);
  border: 1px solid var(--c-white-20);
  box-shadow: 0 20px 45px rgba(0,0,0,.4);
  padding: .4rem;
}
.code-select__list[hidden]{ display: none; }
.code-select__list li{
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .7rem;
  font-size: .92rem;
  color: var(--c-white-85);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.code-select__list li:hover,
.code-select__list li[aria-selected="true"]{ background: var(--c-white-08); color: var(--c-white); }
.code-select__country{ font-size: .78rem; color: var(--c-white-65); }
.form-note{
  grid-column: span 2;
  font-size: .78rem; color: var(--c-white-65);
}
.form-note a{ text-decoration: underline; text-underline-offset: 3px; }
.form-submit{ grid-column: span 2; margin-top: .6rem; }
.form-status{
  grid-column: span 2;
  font-size: .85rem; color: var(--c-white-85);
  min-height: 1.2em;
}
/* invalid-field + error-message states — kept to the maroon/white
   palette (weight and underline do the signalling, not a new colour) */
.field--invalid input,
.field--invalid textarea{ border-color: var(--c-white); border-width: 2px; }
.field--invalid label{ color: var(--c-white); }
.form-status--error{ color: var(--c-white); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  padding-block: clamp(3rem, 7vw, 5rem) 2rem;
  border-top: 1px solid var(--c-white-12);
}
/* footer runs edge-to-edge — the shared .container's 1360px cap made the
   footer content stop short of the viewport edges on wide screens; the
   footer keeps its own side gutter instead, but no max-width ceiling */
.site-footer > .container{
  max-width: none;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr .8fr;
  gap: 2.5rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer-brand img{ height: 30px; width: auto; margin-bottom: 1.2rem; }
.footer-brand p{ color: var(--c-white-65); font-size: .88rem; max-width: 32ch; }
.footer-social{ display: flex; gap: .9rem; margin-top: 1.6rem; }
.footer-col h4{
  font-size: .74rem; letter-spacing: var(--ls-mid); text-transform: uppercase;
  color: var(--c-white-65); margin-bottom: 1.2rem;
}
.footer-col ul{ display: flex; flex-direction: column; gap: .75rem; }
.footer-col a{ font-size: .92rem; color: var(--c-white-85); }
.footer-col a:hover{ color: var(--c-white); }
.footer-rera{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--c-white-12);
  border-radius: var(--radius-md);
  background: var(--c-white-08);
  width: fit-content;
}
.footer-rera__qr{
  flex: none;
  display: block;
  width: 64px; height: 64px;
  padding: 5px;
  background: var(--c-white);
  border-radius: var(--radius-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}
.footer-rera__qr:hover{ transform: scale(1.05); }
.footer-rera__qr img{ display: block; width: 100%; height: 100%; object-fit: contain; }
.footer-rera__info{ display: flex; flex-direction: column; gap: .3rem; }
.footer-rera__label{
  font-size: .68rem;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--c-white-65);
}
.footer-rera__id{
  font-size: .95rem;
  color: var(--c-white);
  letter-spacing: .02em;
}
.footer-rera__info a{
  font-size: .8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-white-20);
}
.footer-bottom{
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--c-white-12);
  font-size: .76rem; color: var(--c-white-40);
  letter-spacing: .04em;
}
.footer-bottom a{ color: var(--c-white-40); }
.footer-bottom a:hover{ color: var(--c-white-85); }

/* ============================================================
   STICKY WHATSAPP / CONTACT RAIL (mirrors reference site)
   ============================================================ */
.contact-rail{
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-nav);
  display: flex; flex-direction: column; gap: .8rem;
}
.contact-rail a{
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-white);
  color: var(--c-primary);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform var(--dur-fast) var(--ease-out);
}
.contact-rail a:hover{ transform: translateY(-3px); }
.contact-rail svg{ width: 20px; height: 20px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  /* below this width the side-by-side half-width panels get too cramped
     for the form fields — stack them full-width instead */
  .enquiry{ min-height: 0; }
  .enquiry__col--left,
  .enquiry__col--right{ position: relative; width: 100%; height: auto; top: auto; left: auto; right: auto; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px){
  .story__grid{ grid-template-columns: 1fr; }
  .story__index{ grid-column: 1; }
  .story__body{ grid-column: 1; max-width: none; }
  .story__foot{ grid-column: 1; }

  /* stack image-over-copy on every beat, image always first regardless
     of the desktop zigzag side, so the alternating layout never forces
     an odd reading order once it collapses to one column */
  .feature-split__grid{ grid-template-columns: 1fr; gap: 2rem; }
  .feature-split--flip .feature-split__media,
  .feature-split--flip .feature-split__body,
  .feature-split__media,
  .feature-split__body{ order: initial; margin-left: 0; }
  .feature-split__body{ max-width: none; }
  .feature-split__text{ max-width: none; }
  .feature-split__media{ aspect-ratio: 16 / 11; }
}

@media (max-width: 640px){
  .header-actions .icon-btn{ display: none; }
  .enquiry__col--right{ grid-template-columns: 1fr; }
  .field, .form-note, .form-submit, .form-status{ grid-column: span 1; }
  .phone-field{ grid-template-columns: 76px 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 2rem 1.2rem; }
  .collection__card{ flex-basis: 78vw; }
  .contact-rail a{ width: 44px; height: 44px; }
  /* the drawer still stays under half the viewport (min() already
     guarantees that), just with tighter padding/gaps/type so seven menu
     links + contact meta comfortably fit a short phone screen */
  .site-menu__panel{ padding-block: 3.5rem; }
  .site-menu__list{ gap: 0; }
  .site-menu__meta{ margin-top: 1.8rem; gap: .6rem; }
}

@media (max-width: 420px){
  .footer-grid{ grid-template-columns: 1fr; }
  .feature-split{ padding-block: 3.2rem; }
  .feature-split__media{ aspect-ratio: 4 / 3; }
  .feature-split__rule{ margin-bottom: 1.2rem; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html{ scroll-behavior: auto; }
}