/* ════════════════════════════════════════════════════
   SHAM VIEW — Shared Stylesheet
   ════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────── */
@font-face {
  font-family: 'Thmanyah Sans';
  src: url('../fonts/thmanyahsans-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Sans';
  src: url('../fonts/thmanyahsans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Sans';
  src: url('../fonts/thmanyahsans-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Sans';
  src: url('../fonts/thmanyahsans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Sans';
  src: url('../fonts/thmanyahsans-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Thmanyah Serif Display';
  src: url('../fonts/thmanyahserifdisplay-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Serif Display';
  src: url('../fonts/thmanyahserifdisplay-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Serif Display';
  src: url('../fonts/thmanyahserifdisplay-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Serif Display';
  src: url('../fonts/thmanyahserifdisplay-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Serif Display';
  src: url('../fonts/thmanyahserifdisplay-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Thmanyah Serif Text';
  src: url('../fonts/thmanyahseriftext-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Serif Text';
  src: url('../fonts/thmanyahseriftext-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Serif Text';
  src: url('../fonts/thmanyahseriftext-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Serif Text';
  src: url('../fonts/thmanyahseriftext-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Serif Text';
  src: url('../fonts/thmanyahseriftext-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ── Tokens ────────────────────────────────────────── */
:root {
  --color-saffron-cedar: #593229;
  --color-khobar-sage:   #5D7563;
  --color-desert-blush:  #C8B4A6;
  --color-pure-black:    #000000;
  --color-off-white:     #E8DDD5;
  --color-deep-sage:     #38453B;

  --font-display: 'Thmanyah Serif Display', serif;
  --font-sans:    'Thmanyah Sans', sans-serif;
  --font-text:    'Thmanyah Serif Text', serif;

  --nav-h: 84px;
  --pad-x: clamp(24px, 6vw, 80px);
  --section-pad: 92px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* The hidden attribute must always win — .fform, .fform__done and
   .ccpick__drop set their own display and are toggled via el.hidden */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--color-pure-black);
  color: var(--color-off-white);
  overflow-x: hidden;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--color-pure-black); }
::-webkit-scrollbar-thumb { background: var(--color-desert-blush); border-radius: 2px; }
::selection { background: var(--color-saffron-cedar); color: var(--color-desert-blush); }

/* ── Lenis ─────────────────────────────────────────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── Layout helpers ────────────────────────────────── */
.section {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  position: relative;
}
.wrap { max-width: 1320px; margin: 0 auto; width: 100%; }

/* Eyebrow label */
.eyebrow {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  display: inline-block;
}
[dir="rtl"] .eyebrow { letter-spacing: 0.1em; }

/* Hairline divider */
.rule {
  width: 60px; height: 1px;
  background: var(--color-desert-blush);
  border: 0;
}

/* Section title scale */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  padding-bottom: 0.05em;
}
[dir="rtl"] .section-title { line-height: 1.4; }

/* ── Buttons ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  position: relative; overflow: hidden;
  border: 1px solid var(--color-desert-blush);
  color: var(--color-desert-blush);
  background: transparent;
  padding: 14px 40px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease,
              transform 0.45s var(--ease);
}
/* Light sheen sweeping across on hover (theme-agnostic) */
.btn::after {
  content: ''; position: absolute; top: -25%; bottom: -25%; left: 0; width: 46%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.32) 50%, transparent 100%);
  transform: skewX(-20deg) translateX(-280%);
  pointer-events: none;
}
.btn:hover::after, .btn:focus-visible::after { animation: btn-sheen 0.85s ease; }
@keyframes btn-sheen { to { transform: skewX(-20deg) translateX(360%); } }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn:hover, .btn:focus-visible {
  background: var(--color-desert-blush);
  color: var(--color-saffron-cedar);
}
/* Arabic is a connected script: Latin display tracking pulls the joins
   apart, so letters that must link read as separate glyphs. Blink stretches
   the joining strokes and mostly gets away with it; CoreText on iOS breaks
   them visibly. Every wide-tracked element in this sheet gets an RTL
   override for that reason — .btn covers both Register buttons. */
[dir="rtl"] .btn { letter-spacing: 0.04em; font-size: 14px; }
[dir="rtl"] .fform__label { letter-spacing: 0.05em; font-size: 12.5px; }

:focus-visible { outline: 2px solid var(--color-desert-blush); outline-offset: 3px; }

/* ════════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad-x);
  background: transparent;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, padding 0.4s ease;
}
/* Top scrim — keeps nav text legible over bright video/imagery */
.nav::before {
  content: ''; position: absolute; inset: 0; bottom: auto; height: 220px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none; z-index: -1;
  opacity: 1; transition: opacity 0.4s ease;
}
.nav.scrolled::before { opacity: 0; }
.nav.scrolled {
  background: rgba(89, 50, 41, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-top: 12px; padding-bottom: 12px;
}
.nav__logo { height: 44px; display: block; transition: opacity 0.4s ease; }
.nav__logo--grey { position: absolute; opacity: 0; pointer-events: none; }
.nav__brand { position: relative; display: inline-flex; }
.nav.scrolled .nav__logo--light { opacity: 0; }
.nav.scrolled .nav__logo--grey { opacity: 1; }

.nav__links {
  display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px);
}
.nav__link {
  color: var(--color-desert-blush);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  position: relative;
  padding: 6px 2px;
  transition: color 0.3s ease;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 0; height: 1.5px; background: var(--color-desert-blush);
  transition: width 0.4s var(--ease);
}
.nav__link:hover { color: var(--color-off-white); }
.nav__link:hover::after, .nav__link.active::after { width: 100%; }
[dir="rtl"] .nav__link::after { left: auto; right: 0; }
.nav__link.active { color: #fff; }

.nav__right { display: flex; align-items: center; gap: 16px; }
.lang-toggle {
  border: 1px solid var(--color-desert-blush);
  color: var(--color-desert-blush);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
  transition: background 0.3s ease, color 0.3s ease;
}
.lang-toggle:hover { background: var(--color-desert-blush); color: var(--color-saffron-cedar); }

/* Header CTA — the campaign entry point, always visible (mobile included) */
.nav__cta {
  display: inline-block;
  background: var(--color-desert-blush); color: var(--color-saffron-cedar);
  border-radius: 999px; padding: 9px 22px;
  font-weight: 500; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.3s ease, transform 0.35s var(--ease), box-shadow 0.3s ease;
}
.nav__cta:hover { background: var(--color-off-white); transform: translateY(-1px); }
.nav__cta.active { box-shadow: inset 0 0 0 1.5px var(--color-off-white); }
@media (max-width: 560px) {
  .nav__cta { padding: 8px 14px; font-size: 11px; letter-spacing: 0.06em; }
}

.nav__burger {
  display: none;
  width: 30px; height: 22px; position: relative;
}
.nav__burger span {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: var(--color-desert-blush);
  transition: transform 0.35s var(--ease), opacity 0.2s ease, top 0.35s var(--ease);
}
.nav__burger span:nth-child(1) { top: 2px; }
.nav__burger span:nth-child(2) { top: 10px; }
.nav__burger span:nth-child(3) { top: 18px; }
.nav.open .nav__burger span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.nav.open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.open .nav__burger span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* ════════════════════════════════════════════════════
   REVEAL STATES (JS adds .is-ready once GSAP is wired)
   ════════════════════════════════════════════════════ */
.js .reveal-up, .js .reveal-left, .js .reveal-right { opacity: 0; }
.js .reveal-up { transform: translateY(60px); }
.js .reveal-left { transform: translateX(-60px); }
.js .reveal-right { transform: translateX(60px); }

/* ════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════ */
.footer {
  background: var(--color-saffron-cedar);
  color: var(--color-desert-blush);
  padding: 80px var(--pad-x) 36px;
  text-align: center;
}
.footer__logo { height: 120px; margin: 0 auto 26px; }
.footer__tagline {
  font-weight: 300; font-size: 15px; letter-spacing: 0.04em;
  max-width: 520px; margin: 0 auto 40px; opacity: 0.85;
}
.footer__nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 32px; margin-bottom: 44px;
}
.footer__nav a {
  font-weight: 500; font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.85; transition: opacity 0.3s ease;
}
.footer__nav a:hover { opacity: 1; }
.footer__divider {
  height: 1px; background: var(--color-desert-blush); opacity: 0.3;
  max-width: 1320px; margin: 0 auto 28px;
}
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1320px; margin: 0 auto; gap: 18px;
  flex-wrap: wrap;
}
.footer__copy { font-weight: 300; font-size: 12px; letter-spacing: 0.05em; opacity: 0.75; }
.footer__social { display: flex; gap: 18px; }
.footer__social a {
  width: 34px; height: 34px; border: 1px solid rgba(200,180,166,0.4);
  border-radius: 50%; display: grid; place-items: center;
  transition: background 0.3s ease, color 0.3s ease;
}
.footer__social a:hover { background: var(--color-desert-blush); color: var(--color-saffron-cedar); }
.footer__social svg { width: 15px; height: 15px; }

/* ════════════════════════════════════════════════════
   GENERIC PAGE HERO (interior pages)
   ════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  min-height: 78vh;
  display: flex; align-items: flex-end;
  padding: 0 var(--pad-x) clamp(60px, 9vh, 110px);
  overflow: hidden;
}
.page-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(89,50,41,0.72) 100%);
}
.page-hero__inner { max-width: 1320px; margin: 0 auto; width: 100%; }
.page-hero__eyebrow { color: var(--color-desert-blush); margin-bottom: 18px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 8vw, 104px);
  line-height: 0.98; letter-spacing: -0.02em;
  color: var(--color-off-white);
}
.page-hero__sub {
  font-family: var(--font-text);
  margin-top: 20px; max-width: 540px;
  font-weight: 300; font-size: clamp(16px, 2vw, 19px);
  color: var(--color-desert-blush);
}

/* ════════════════════════════════════════════════════
   HOME — PRELOADER
   ════════════════════════════════════════════════════ */
.preloader {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--color-saffron-cedar);
  display: flex; align-items: center; justify-content: center;
}
.preloader.hidden { display: none; }
#lw { width: 260px; height: 260px; display: flex; align-items: center; justify-content: center; }
#lsvg { width: 200px; height: 200px; overflow: visible; }

/* ════════════════════════════════════════════════════
   HOME — HERO
   ════════════════════════════════════════════════════ */
.hero {
  position: relative; width: 100vw; min-height: 100vh;
  display: flex; align-items: flex-end; overflow: hidden;
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(89,50,41,0.4) 100%);
}
.hero__content { padding: 80px; max-width: 1000px; }
.hero__title { margin-bottom: 26px; }
.hero__title .line {
  font-family: var(--font-display);
  display: block;
  font-weight: 900;
  font-size: clamp(40px, 7.2vw, 72px);
  line-height: 1.14; letter-spacing: -0.02em;
  color: var(--color-off-white);
  clip-path: inset(0 100% 0 0);
  padding-bottom: 0.1em;
}
.hero__sub {
  font-family: var(--font-text);
  font-weight: 300; font-size: 16px;
  color: var(--color-desert-blush); max-width: 480px; margin-bottom: 36px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn--wa {
  border-color: #25D366;
  background: #25D366;
  color: #ffffff;
}
.btn--wa:hover, .btn--wa:focus-visible {
  background: #1DA851;
  border-color: #1DA851;
  color: #ffffff;
}
.btn--wa svg { width: 17px; height: 17px; }
.hero__scroll {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  color: var(--color-desert-blush); display: grid; place-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
}
.hero__scroll svg { width: 18px; height: 28px; animation: bounce 1.8s var(--ease) infinite; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(8px); opacity: 1; }
}
.hero__content { padding-left: var(--pad-x); }

/* ── Brand intro (full-bleed render with overlaid story) ─ */
.intro {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--color-saffron-cedar);
  padding: var(--section-pad) 0;
}
.intro__media { position: absolute; inset: 0; z-index: 0; }
.intro__media img { width: 100%; height: 100%; object-fit: cover; }
.intro::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right,
    rgba(36, 20, 16, 0.86) 0%, rgba(36, 20, 16, 0.55) 38%, rgba(36, 20, 16, 0) 72%);
}
.intro__inner { position: relative; z-index: 2; width: 100%; padding: 0 var(--pad-x); }
.intro__text { max-width: 560px; }
.intro .rule { margin: 0 0 26px; background: var(--color-desert-blush); }
.intro__label { color: var(--color-desert-blush); margin-bottom: 26px; }
.intro__quote {
  font-family: var(--font-display);
  font-weight: 700; font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.28; color: var(--color-off-white); margin-bottom: 28px;
  padding-bottom: 0.05em;
}
.intro__body {
  font-family: var(--font-text);
  font-weight: 400; font-size: 18px; line-height: 1.75;
  color: var(--color-desert-blush);
}
/* Flip the story render in Arabic so the dandelion sits bottom-left */
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
[dir="rtl"] .intro::after {
  background: linear-gradient(to left,
    rgba(36, 20, 16, 0.86) 0%, rgba(36, 20, 16, 0.55) 38%, rgba(36, 20, 16, 0) 72%);
}
[dir="rtl"] .intro__text { margin-left: auto; }

/* ── Residences preview ────────────────────────────── */
.res-prev { background: var(--color-pure-black); }
.res-prev__head { margin-bottom: 56px; max-width: 760px; }
.res-prev__head .eyebrow { color: var(--color-desert-blush); margin-bottom: 18px; }
.res-prev__head .section-title { color: var(--color-off-white); }
.card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.rcard {
  display: flex; flex-direction: column;
  background: rgba(232, 221, 213, 0.02);
  border: 1px solid rgba(200, 180, 166, 0.16);
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.4s ease, background 0.4s ease;
}
.rcard:hover {
  transform: translateY(-8px);
  border-color: rgba(200, 180, 166, 0.5);
  background: rgba(232, 221, 213, 0.05);
}
.rcard__media { position: relative; height: 360px; overflow: hidden; }
.rcard__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.rcard:hover .rcard__img { transform: scale(1.07); }
.rcard__tag {
  position: absolute; top: 16px; left: 16px;
  font-weight: 500; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-off-white);
  background: rgba(36, 20, 16, 0.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding: 7px 12px; border: 1px solid rgba(200, 180, 166, 0.25);
}
[dir="rtl"] .rcard__tag { left: auto; right: 16px; }
.rcard__body {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 26px;
}
.rcard__kicker {
  display: block; font-weight: 300; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--color-desert-blush); opacity: 0.65; margin-bottom: 9px;
}
.rcard__name { font-weight: 700; font-size: 21px; color: var(--color-off-white); line-height: 1.2; }

/* ── Amenities preview ─────────────────────────────── */
.amen-prev { background: var(--color-off-white); }
.amen-prev__head { max-width: 760px; margin-bottom: 60px; }
.amen-prev__head .eyebrow { color: var(--color-khobar-sage); margin-bottom: 18px; }
.amen-prev__head .section-title { color: var(--color-saffron-cedar); }
.amen-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(93,117,99,0.25);
  border: 1px solid rgba(93,117,99,0.25);
}
.amen-item {
  background: var(--color-off-white);
  padding: 44px 30px;
  display: flex; align-items: center; gap: 20px;
  color: var(--color-khobar-sage);
  transition: color 0.35s ease, background 0.35s ease;
}
.amen-item:hover { color: var(--color-saffron-cedar); background: #efe7df; }
.amen-item__icon { width: 38px; height: 38px; flex-shrink: 0; transition: transform 0.45s var(--ease); }
.amen-item:hover .amen-item__icon { transform: scale(1.14) rotate(-4deg); }
.amen-item__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; }
.amen-item__name { font-weight: 500; font-size: 18px; }

/* ════════════════════════════════════════════════════
   STATS + MAP
   ════════════════════════════════════════════════════ */
.statsmap { background: var(--color-saffron-cedar); padding-bottom: 0; }
.stats {
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center; row-gap: 60px;
}
.stat { text-align: center; padding: 0 16px; position: relative; }
.stat:not(:last-child)::after {
  content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 58px; background: var(--color-desert-blush); opacity: 0.22;
}
.stat:nth-child(5n)::after { display: none; }
[dir="rtl"] .stat:not(:last-child)::after { right: auto; left: 0; }
[dir="rtl"] .stat:nth-child(5n)::after { display: none; }
.stat__num {
  font-weight: 900; font-size: clamp(34px, 3.6vw, 52px);
  color: var(--color-desert-blush); line-height: 1; letter-spacing: -0.02em;
}
.stat__label {
  font-weight: 300; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-desert-blush); opacity: 0.6; margin-top: 14px;
}

/* SVG map */
.mapwrap { color: var(--color-desert-blush); }
.mapwrap__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; flex-wrap: wrap; gap: 16px; }
.mapwrap__head .eyebrow { opacity: 0.7; }
.mapwrap__head h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 34px); color: var(--color-desert-blush); }
.map-img {
  width: 100%; height: auto; display: block; border: none;
  /* Reserve the box before the image loads, so the page height is stable
     and scroll-reveal trigger positions don't fire early on slow loads */
  aspect-ratio: 2752 / 1536;
}
.map-reveal { clip-path: inset(0 100% 0 0); }

/* Full-bleed map section — no horizontal padding so the image spans edge-to-edge.
   Top spacing lives in padding (not a child margin) so it can't collapse out and
   expose the black body background between this and the stats section. */
.mapsection { background: var(--color-saffron-cedar); color: var(--color-desert-blush); padding: clamp(60px, 9vw, 96px) 0 var(--section-pad); }
.mapsection__head {
  padding: 0 var(--pad-x); margin: 0 auto clamp(34px, 5vw, 56px);
}

/* ── Lifestyle full bleed ──────────────────────────── */
.lifestyle {
  position: relative; width: 100vw; min-height: 80vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}
.lifestyle__bg {
  position: absolute; inset: -12% 0; width: 100%; height: 124%;
  object-fit: cover; z-index: -2; will-change: transform;
}
.lifestyle::after {
  content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(89,50,41,0.5);
}
.lifestyle__inner { padding: 0 var(--pad-x); max-width: 900px; }
.lifestyle__quote {
  font-family: var(--font-display);
  font-weight: 700; font-size: clamp(28px, 4.6vw, 48px);
  line-height: 1.18; color: var(--color-off-white); margin-bottom: 34px;
}

/* ── Gallery preview ───────────────────────────────── */
.gal-prev { background: var(--color-pure-black); }
.gal-prev__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: 56px; }
.gal-prev__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(56px, 11vw, 150px); color: var(--color-desert-blush); line-height: 1; letter-spacing: -0.03em; padding-bottom: 0.08em; }
[dir="rtl"] .gal-prev__title { line-height: 1.3; }
.masonry {
  columns: 3; column-gap: 18px;
}
.masonry__item {
  position: relative; overflow: hidden; margin-bottom: 18px;
  break-inside: avoid; display: block;
  border: 1px solid rgba(200, 180, 166, 0.12);
  transition: border-color 0.4s ease;
}
.masonry__item:hover { border-color: rgba(200, 180, 166, 0.45); }
.masonry__item img { width: 100%; transition: transform 0.7s var(--ease), filter 0.7s ease; }
.masonry__item:hover img { transform: scale(1.05); filter: brightness(0.85); }
.masonry__item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(36, 20, 16, 0.85) 0%, rgba(36, 20, 16, 0) 55%);
  opacity: 0; transition: opacity 0.5s ease;
}
.masonry__item:hover::after { opacity: 1; }
.masonry__cap {
  position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 22px;
  transform: translateY(14px); opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s ease;
}
.masonry__item:hover .masonry__cap { transform: translateY(0); opacity: 1; }
.masonry__cap span {
  font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-off-white);
}
.masonry__cap i {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; font-style: normal;
  border: 1px solid rgba(200, 180, 166, 0.45); color: var(--color-desert-blush);
  display: grid; place-items: center; font-size: 14px;
}

/* ════════════════════════════════════════════════════
   RESIDENCES PAGE
   ════════════════════════════════════════════════════ */
.split { background: var(--color-pure-black); }
.split__row {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(30px, 6vw, 90px);
  max-width: 1320px; margin: 0 auto;
}
.split__row + .split__row { margin-top: 110px; }
.split__row--rev .split__media { order: 2; }
.split__media { overflow: hidden; }
.split__media img { width: 100%; height: 560px; object-fit: cover; }
.split__num { font-weight: 300; font-size: 13px; letter-spacing: 0.3em; color: var(--color-desert-blush); opacity: 0.6; margin-bottom: 18px; }
.split__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.6vw, 42px); color: var(--color-off-white); margin-bottom: 22px; }
.split__text { font-family: var(--font-text); font-weight: 400; font-size: 17px; line-height: 1.7; color: var(--color-desert-blush); opacity: 0.85; margin-bottom: 28px; }
.split__list { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.split__list li { font-weight: 300; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-desert-blush); display: flex; align-items: center; gap: 10px; }
.split__list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-khobar-sage); }

/* Features grid */
.features { background: var(--color-saffron-cedar); }
.features__head { text-align: center; max-width: 700px; margin: 0 auto 64px; }
.features__head .eyebrow { color: var(--color-desert-blush); opacity: 0.7; margin-bottom: 16px; }
.features__head .section-title { color: var(--color-off-white); }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(200,180,166,0.18); border: 1px solid rgba(200,180,166,0.18); }
.feat {
  background: var(--color-saffron-cedar); padding: 50px 36px;
  transition: background 0.4s ease;
}
.feat:hover { background: #4a2922; }
.feat__icon { width: 40px; height: 40px; margin-bottom: 26px; color: var(--color-desert-blush); }
.feat__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; }
.feat__name { font-weight: 500; font-size: 19px; color: var(--color-off-white); margin-bottom: 10px; }
.feat__desc { font-family: var(--font-text); font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--color-desert-blush); opacity: 0.8; }

/* ════════════════════════════════════════════════════
   AMENITIES PAGE
   ════════════════════════════════════════════════════ */
.amen-page { background: var(--color-pure-black); }
.amen-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 1320px; margin: 0 auto; }
.acard { position: relative; overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; }
.acard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.acard:hover .acard__img { transform: scale(1.05); }
.acard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(89,50,41,0.1) 70%); }
.acard__body { position: relative; z-index: 2; padding: 40px; }
.acard__num { font-weight: 300; font-size: 12px; letter-spacing: 0.3em; color: var(--color-desert-blush); opacity: 0.7; margin-bottom: 14px; }
.acard__title { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--color-off-white); margin-bottom: 14px; }
.acard__desc { font-family: var(--font-text); font-weight: 400; font-size: 15px; line-height: 1.65; color: var(--color-desert-blush); max-width: 460px; }

/* ════════════════════════════════════════════════════
   GALLERY PAGE
   ════════════════════════════════════════════════════ */
.filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 50px; }
.filter {
  border: 1px solid rgba(200,180,166,0.35); color: var(--color-desert-blush);
  padding: 10px 26px; border-radius: 999px; font-weight: 500; font-size: 12px;
  letter-spacing: 0.15em; text-transform: uppercase; transition: all 0.3s ease;
}
.filter:hover { border-color: var(--color-desert-blush); }
.filter.active { background: var(--color-desert-blush); color: var(--color-saffron-cedar); border-color: var(--color-desert-blush); }
.gal-grid { columns: 3; column-gap: 16px; }
.gal-grid__item { break-inside: avoid; margin-bottom: 16px; overflow: hidden; cursor: pointer; position: relative; transition: opacity 0.45s ease, transform 0.45s ease; }
.gal-grid__item img { width: 100%; transition: transform 0.6s var(--ease); }
.gal-grid__item:hover img { transform: scale(1.04); }
.gal-grid__item.hide { display: none; }
.gal-grid__item::after {
  content: '⤢'; position: absolute; bottom: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 50%; background: rgba(89,50,41,0.8);
  color: var(--color-desert-blush); display: grid; place-items: center; font-size: 16px;
  opacity: 0; transform: scale(0.8); transition: all 0.35s ease;
}
.gal-grid__item:hover::after { opacity: 1; transform: scale(1); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.95);
  display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox__img { max-width: 88vw; max-height: 84vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.lightbox__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border: 1px solid rgba(200,180,166,0.4); border-radius: 50%;
  color: var(--color-desert-blush); font-size: 22px; display: grid; place-items: center;
  transition: background 0.3s ease, color 0.3s ease;
}
.lightbox__btn:hover { background: var(--color-desert-blush); color: var(--color-saffron-cedar); }
.lightbox__prev { left: 4vw; }
.lightbox__next { right: 4vw; }
.lightbox__close { top: 4vh; right: 4vw; transform: none; }
.lightbox__count { position: absolute; bottom: 4vh; left: 50%; transform: translateX(-50%); color: var(--color-desert-blush); font-weight: 300; letter-spacing: 0.2em; font-size: 13px; }

/* ════════════════════════════════════════════════════
   ABOUT PAGE
   ════════════════════════════════════════════════════ */
.story { background: var(--color-off-white); }
.story__row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(30px, 6vw, 80px); max-width: 1320px; margin: 0 auto; }
.story__row + .story__row { margin-top: 100px; }
.story__row--rev .story__media { order: 2; }
.story__media img { width: 100%; height: 520px; object-fit: cover; }
.story__eyebrow { color: var(--color-khobar-sage); margin-bottom: 18px; }
.story__quote { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.3; color: var(--color-saffron-cedar); margin-bottom: 22px; padding-bottom: 0.05em; }
.story__text { font-family: var(--font-text); font-weight: 400; font-size: 17px; line-height: 1.75; color: rgba(89,50,41,0.82); }

.vmv { background: var(--color-saffron-cedar); }

.values { background: var(--color-pure-black); text-align: center; }
.values__head { max-width: 600px; margin: 0 auto 56px; }
.values__head .eyebrow { color: var(--color-desert-blush); opacity: 0.7; margin-bottom: 16px; }
.values__head .section-title { color: var(--color-off-white); }
.values__cloud { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(14px, 3vw, 44px); max-width: 1000px; margin: 0 auto; }
.values__word { font-family: var(--font-display); font-weight: 900; color: var(--color-desert-blush); line-height: 1; letter-spacing: -0.01em; transition: color 0.4s ease, opacity 0.4s ease; opacity: 0.85; }
.values__word:hover { color: var(--color-khobar-sage); opacity: 1; }
.values__word:nth-child(1) { font-size: clamp(34px, 6vw, 78px); }
.values__word:nth-child(2) { font-size: clamp(26px, 4vw, 52px); opacity: 0.7; }
.values__word:nth-child(3) { font-size: clamp(40px, 7vw, 92px); }
.values__word:nth-child(4) { font-size: clamp(28px, 4.5vw, 60px); opacity: 0.75; }
.values__word:nth-child(5) { font-size: clamp(32px, 5.5vw, 70px); }
.values__word:nth-child(6) { font-size: clamp(36px, 6.5vw, 84px); opacity: 0.8; }

/* ════════════════════════════════════════════════════
   CONTACT PAGE
   ════════════════════════════════════════════════════ */
.contact-info { background: var(--color-pure-black); }
.cinfo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 5vw, 60px); max-width: 1100px; margin: 0 auto; text-align: center; }
.cinfo { color: var(--color-desert-blush); }
.cinfo__icon { width: 44px; height: 44px; margin: 0 auto 24px; color: var(--color-desert-blush); }
.cinfo__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.3; }
.cinfo__label { font-weight: 300; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; opacity: 0.6; margin-bottom: 14px; }
.cinfo__value { font-weight: 500; font-size: 19px; line-height: 1.5; }
.cinfo__value a { transition: color 0.3s ease; }
.cinfo__value a:hover { color: #fff; }

.contact-map { padding-top: var(--section-pad); }

/* ════════════════════════════════════════════════════
   RTL
   ════════════════════════════════════════════════════ */
[dir="rtl"] body { line-height: 1.7; }
/* The nav is a plain flex row: with dir="rtl" it mirrors automatically
   (logo → right, links flow from the right, controls → far left). */
[dir="rtl"] .hero__content,
[dir="rtl"] .page-hero__inner,
[dir="rtl"] .res-prev__head,
[dir="rtl"] .amen-prev__head,
[dir="rtl"] .split__body,
[dir="rtl"] .acard__body { text-align: right; }
[dir="rtl"] .split__row--rev .split__media { order: 0; }
[dir="rtl"] .split__row:not(.split__row--rev) .split__media { order: 2; }
[dir="rtl"] .story__row--rev .story__media { order: 0; }
[dir="rtl"] .story__row:not(.story__row--rev) .story__media { order: 2; }
[dir="rtl"] .hero__title .line,
[dir="rtl"] .map-reveal { clip-path: inset(0 0 0 100%); }

[dir="rtl"] .hero__title .line { letter-spacing: 0; }

/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .card-grid, .amen-grid, .feat-grid, .cinfo-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 40px 18px; }
  .stat:not(:last-child)::after { display: none; }
  .masonry, .gal-grid { columns: 2; }
  .amen-cards { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --section-pad: 64px; }
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav.open .nav__links {
    display: flex; flex-direction: column; align-items: center;
    position: fixed; inset: 0; padding-top: 120px; gap: 26px;
    background: rgba(89,50,41,0.98); backdrop-filter: blur(12px);
  }
  .nav.open .nav__link { font-size: 22px; }

  .hero__content { padding: 0 var(--pad-x) 90px; }
  .card-grid, .amen-grid, .feat-grid, .cinfo-grid,
  .split__row, .story__row { grid-template-columns: 1fr; }
  .split__row + .split__row, .story__row + .story__row { margin-top: 56px; }
  .split__row--rev .split__media,
  .story__row--rev .story__media { order: 0; }
  .split__media img, .story__media img { height: 360px; }
  /* Intro: stronger full scrim so overlaid text stays legible on narrow screens */
  .intro { min-height: 78vh; }
  .intro::after,
  [dir="rtl"] .intro::after {
    background: linear-gradient(to top, rgba(36,20,16,0.9) 0%, rgba(36,20,16,0.55) 70%, rgba(36,20,16,0.35) 100%);
  }
  .stats { grid-template-columns: 1fr; gap: 34px; }
  .masonry, .gal-grid { columns: 1; }
  .lightbox__prev { left: 12px; }
  .lightbox__next { right: 12px; }
  .lightbox__btn { width: 46px; height: 46px; }
  .footer__bottom { flex-direction: column; text-align: center; }
}

/* ── Page-transition dissolve: fixed snapshot of the outgoing view ── */
.pt-old {
  position: fixed; inset: 0; z-index: 800; /* beneath the fixed nav */
  overflow: hidden;
  background: var(--color-pure-black); /* match the body ground */
  pointer-events: none;
  will-change: transform, opacity, filter;
}

/* ── FLIP transition: the clicked image travelling to its hero ── */
.flip-clone {
  position: fixed; z-index: 900; /* beneath the fixed nav, above the pages */
  object-fit: cover;
  pointer-events: none;
  will-change: top, left, width, height;
}

/* ── Reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .js .reveal-up, .js .reveal-left, .js .reveal-right { opacity: 1 !important; transform: none !important; }
  .hero__title .line { clip-path: none !important; }
  .map-reveal { clip-path: none !important; }
}

/* ════════════════════════════════════════════════════
   THEME SWITCHER (demo) — brand palettes + sidebar control
   Default (:root) = "Midnight". Each theme below only
   overrides the brand tokens; everything else cascades.
   ════════════════════════════════════════════════════ */

/* Smooth band/text recolour when switching themes */
body, section, .footer, .preloader,
.theme-switch__toggle, .theme-switch__panel {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}

/* ── SAGE — deep-green family (light text on dark) ──── */
[data-theme="sage"] {
  --color-pure-black: #38453B;   /* page background  */
  --color-saffron-cedar: #5D7563;/* feature bands + render seam */
}
/* keep the chrome on-brand for the green palette */
[data-theme="sage"] .nav.scrolled { background: rgba(56, 69, 59, 0.95); }
@media (max-width: 768px) {
  [data-theme="sage"] .nav.open .nav__links { background: rgba(56, 69, 59, 0.98); }
}

/* ── DESERT — light family ──────────────────────────
   Feature bands (intro, map, footer, hero scrims…) stay
   brown and keep their light text untouched. Only the
   page-background sections invert to dark-on-sand.       */
[data-theme="desert"] {
  --color-pure-black: #E4DAD1;   /* light sand page background */
}
[data-theme="desert"] body { color: #2A1813; }

/* Residences preview (home) */
[data-theme="desert"] .res-prev__head .eyebrow,
[data-theme="desert"] .rcard__kicker { color: #6E4E40; }
[data-theme="desert"] .res-prev__head .section-title,
[data-theme="desert"] .rcard__name { color: #2A1813; }
[data-theme="desert"] .rcard {
  background: rgba(89, 50, 41, 0.04);
  border-color: rgba(89, 50, 41, 0.18);
}
[data-theme="desert"] .rcard:hover {
  background: rgba(89, 50, 41, 0.06);
  border-color: rgba(89, 50, 41, 0.4);
}

/* Gallery preview (home) */
[data-theme="desert"] .gal-prev__title { color: #593229; }

/* Residences page — splits */
[data-theme="desert"] .split__num,
[data-theme="desert"] .split__text,
[data-theme="desert"] .split__list li { color: #6E4E40; }
[data-theme="desert"] .split__title { color: #2A1813; }

/* About page — values cloud */
[data-theme="desert"] .values__head .eyebrow { color: #6E4E40; }
[data-theme="desert"] .values__head .section-title,
[data-theme="desert"] .values__word { color: #2A1813; }

/* Contact page — info column */
[data-theme="desert"] .cinfo,
[data-theme="desert"] .cinfo__icon,
[data-theme="desert"] .cinfo__label { color: #6E4E40; }
[data-theme="desert"] .cinfo__value { color: #2A1813; }
[data-theme="desert"] .cinfo__value a:hover { color: #593229; }

/* Gallery page — filter chips on the light page */
[data-theme="desert"] .filter { border-color: rgba(89, 50, 41, 0.35); color: #593229; }
[data-theme="desert"] .filter:hover { border-color: #593229; }
[data-theme="desert"] .filter.active { background: #593229; color: #E8DDD5; border-color: #593229; }

/* Outlined buttons that sit on the light page sections */
[data-theme="desert"] .gal-prev .btn,
[data-theme="desert"] .split .btn { border-color: #593229; color: #593229; }
[data-theme="desert"] .gal-prev .btn:hover,
[data-theme="desert"] .split .btn:hover { background: #593229; color: #E8DDD5; }

/* ════════════════════════════════════════════════════
   THEME SWITCHER — floating sidebar control
   ════════════════════════════════════════════════════ */
.theme-switch {
  position: fixed; z-index: 1500;
  right: 0; top: 50%; transform: translateY(-50%);
}
[dir="rtl"] .theme-switch { right: auto; left: 0; }
.theme-switch__toggle {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--color-saffron-cedar); color: var(--color-desert-blush);
  border-radius: 12px 0 0 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
}
[dir="rtl"] .theme-switch__toggle { border-radius: 0 12px 12px 0; }
.theme-switch__toggle svg { width: 21px; height: 21px; }
.theme-switch__toggle:hover { color: var(--color-off-white); }

.theme-switch__panel {
  position: absolute; top: 50%; right: 56px;
  transform: translateY(-50%) scale(0.96);
  transform-origin: right center;
  background: var(--color-saffron-cedar);
  padding: 14px; border-radius: 14px; min-width: 168px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.32);
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s var(--ease);
}
[dir="rtl"] .theme-switch__panel { right: auto; left: 56px; transform-origin: left center; }
.theme-switch.open .theme-switch__panel {
  opacity: 1; visibility: visible; transform: translateY(-50%) scale(1);
}
.theme-switch__title {
  font-weight: 300; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--color-desert-blush); opacity: 0.7; padding: 2px 6px 6px;
}
.theme-swatch {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px; border-radius: 9px;
  color: var(--color-off-white);
  font-weight: 500; font-size: 13px; letter-spacing: 0.06em;
  transition: background 0.25s ease;
}
.theme-swatch:hover { background: rgba(255, 255, 255, 0.08); }
.theme-swatch.active { background: rgba(255, 255, 255, 0.12); }
.theme-swatch__disc {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: conic-gradient(var(--c1) 0 33.33%, var(--c2) 0 66.66%, var(--c3) 0);
}
.theme-swatch.active .theme-swatch__disc { box-shadow: 0 0 0 2px var(--color-desert-blush); }

@media (max-width: 768px) {
  .theme-switch__toggle { width: 42px; height: 42px; }
}

/* ════════════════════════════════════════════════════
   v1.3 — SOLID BUTTON + SHARED HELPERS
   ════════════════════════════════════════════════════ */
.btn--solid {
  background: var(--color-desert-blush);
  color: var(--color-saffron-cedar);
  border-color: var(--color-desert-blush);
}
.btn--solid:hover, .btn--solid:focus-visible {
  background: var(--color-off-white);
  border-color: var(--color-off-white);
  color: var(--color-saffron-cedar);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.glance__cta {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  margin-top: clamp(48px, 7vw, 80px);
}
.glance .values__head { text-align: center; margin-bottom: clamp(48px, 7vw, 80px); }

/* ════════════════════════════════════════════════════
   v1.3 — UNIT MODELS PAGE
   ════════════════════════════════════════════════════ */
.ufilter { display: flex; gap: 12px; flex-wrap: wrap; }
.ufilter__chip {
  border: 1px solid rgba(200, 180, 166, 0.35);
  color: var(--color-desert-blush);
  padding: 10px 22px;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.ufilter__chip:hover { border-color: var(--color-desert-blush); }
.ufilter__chip.active {
  background: var(--color-desert-blush);
  color: var(--color-saffron-cedar);
  border-color: var(--color-desert-blush);
}
.units__note {
  margin-top: 18px; font-size: 13px; color: rgba(200, 180, 166, 0.65);
  font-family: var(--font-text); font-weight: 300;
}
.ugrid {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
.ucard {
  display: flex; flex-direction: column;
  background: rgba(232, 221, 213, 0.02);
  border: 1px solid rgba(200, 180, 166, 0.16);
  transition: transform 0.5s var(--ease), border-color 0.4s ease;
}
.ucard:hover { transform: translateY(-6px); border-color: rgba(200, 180, 166, 0.45); }
.ucard__plan {
  position: relative;
  padding: clamp(20px, 2.5vw, 30px);
  border-bottom: 1px solid rgba(200, 180, 166, 0.14);
  color: var(--color-desert-blush);
}
.ucard__plan .uplan { width: 100%; height: auto; display: block; }
.ucard__tag {
  position: absolute; top: 14px; inset-inline-end: 14px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 15px; color: rgba(200, 180, 166, 0.5);
  letter-spacing: 0.06em;
}
.ucard__body { padding: clamp(20px, 2.5vw, 28px); display: flex; flex-direction: column; flex: 1; }
.ucard__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 2vw, 23px); line-height: 1.2;
  color: var(--color-off-white); margin: 8px 0 18px;
}
.ucard__specs {
  display: flex; gap: 26px;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(200, 180, 166, 0.14);
}
.ucard__spec { display: flex; flex-direction: column; gap: 2px; }
.ucard__spec-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 21px; color: var(--color-desert-blush);
}
.ucard__spec-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(232, 221, 213, 0.55);
}
.ucard__feats { margin-bottom: 24px; }
.ucard__cta { margin-top: auto; justify-content: center; padding: 13px 24px; }
@media (max-width: 1024px) { .ugrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ugrid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════
   v1.3 — 3D MASTERPLAN
   ════════════════════════════════════════════════════ */
.masterplan { background: var(--color-pure-black); }
.mp-toolbar { display: flex; align-items: center; gap: 12px; }
.mp-select {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: 1px solid rgba(200, 180, 166, 0.35);
  color: var(--color-desert-blush);
  font-family: var(--font-sans);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 40px 10px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23C8B4A6' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
[dir="rtl"] .mp-select { padding: 10px 18px 10px 40px; background-position: left 16px center; }
.mp-select:hover, .mp-select:focus-visible { border-color: var(--color-desert-blush); }
.mp-select option { background: #1A1712; color: var(--color-off-white); }

.mp-stage {
  position: relative;
  margin-top: clamp(30px, 4vw, 48px);
  height: clamp(400px, 62vh, 580px);
  background: #1e2542;
  border: 1px solid rgba(200, 180, 166, 0.2);
  overflow: hidden;
}
.mp-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.mp-canvas.is-dragging { cursor: grabbing; }
.mp-fallback { width: 100%; height: 100%; object-fit: cover; }

.mp-controls {
  position: absolute; bottom: 18px; inset-inline-start: 18px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.mp-btn {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(200, 180, 166, 0.35);
  color: var(--color-desert-blush);
  font-size: 17px; font-family: var(--font-sans);
  backdrop-filter: blur(4px);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.mp-btn--text { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.mp-btn:hover, .mp-btn:focus-visible { border-color: var(--color-desert-blush); color: var(--color-off-white); }
.mp-btn.active { background: var(--color-desert-blush); color: var(--color-saffron-cedar); border-color: var(--color-desert-blush); }

.mp-card {
  position: absolute; top: 18px; inset-inline-end: 18px;
  width: min(310px, calc(100% - 36px));
  background: rgba(10, 8, 6, 0.88);
  border: 1px solid rgba(200, 180, 166, 0.35);
  padding: 22px 24px;
  backdrop-filter: blur(6px);
}
.mp-card__close {
  position: absolute; top: 8px; inset-inline-end: 10px;
  font-size: 22px; line-height: 1; color: rgba(232, 221, 213, 0.6); padding: 4px;
}
.mp-card__close:hover { color: var(--color-off-white); }
.mp-card__kicker {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-desert-blush); margin-bottom: 6px;
}
.mp-card__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: 21px; color: var(--color-off-white); margin-bottom: 10px;
}
.mp-card__desc { font-size: 14px; line-height: 1.6; color: rgba(232, 221, 213, 0.75); margin-bottom: 14px; }
.mp-card__link {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-desert-blush);
  border-bottom: 1px solid rgba(200, 180, 166, 0.4); padding-bottom: 3px;
}
.mp-card__link:hover { color: var(--color-off-white); border-color: var(--color-off-white); }

.mp-legend {
  display: flex; gap: 22px; flex-wrap: wrap;
  margin-top: 22px;
}
.mp-legend__item { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: 0.08em; color: rgba(232, 221, 213, 0.75); }
.mp-chip { width: 12px; height: 12px; background: var(--chip); display: inline-block; }
.mp-hint { margin-top: 14px; font-size: 12.5px; color: rgba(200, 180, 166, 0.6); }
.mp-disclaimer { margin-top: 6px; font-size: 12px; font-family: var(--font-text); font-weight: 300; font-style: italic; color: rgba(200, 180, 166, 0.5); }

@media (max-width: 768px) {
  .mp-stage { height: clamp(320px, 55vh, 460px); }
  .mp-card { top: auto; bottom: 70px; }
  .mp-controls { bottom: 14px; inset-inline-start: 14px; }
}

/* ════════════════════════════════════════════════════
   LEAD FORMS (register & contact pages) + WA float
   ════════════════════════════════════════════════════ */
/* Split editorial card: a dark image rail (pitch + reassurances)
   beside the form body. The rail stays dark in EVERY theme — the
   themed part is the body, so contrast is guaranteed. */
.formcard {
  max-width: 1020px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  background: #14100D;
  border: 1px solid rgba(200, 180, 166, 0.28);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38);
  /* no overflow:hidden — the country-code dropdown must be free to
     overflow the card; nothing inside needs clipping */
}

/* ── Rail ── */
.formcard__aside {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  padding: clamp(28px, 4vw, 46px);
  border-inline-end: 1px solid rgba(200, 180, 166, 0.28);
}
.formcard__aside-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.formcard__aside::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* Heavy through the lower two-thirds so lit facade bands in the
     render never read as lines behind the pitch text */
  background: linear-gradient(to top, rgba(12, 7, 5, 0.97) 0%, rgba(14, 9, 6, 0.9) 46%, rgba(18, 11, 8, 0.32) 100%);
}
.formcard__aside-content { width: 100%; }
.formcard__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.18;
  color: var(--color-off-white);
  margin: 10px 0 10px;
}
.formcard__sub { font-size: 14px; line-height: 1.65; color: rgba(232, 221, 213, 0.72); margin-bottom: 8px; }

/* Reassurance list at the foot of the rail */
.formcard__perks { list-style: none; margin-top: 18px; }
.formcard__perk {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(232, 221, 213, 0.16);
  font-size: 13.5px; line-height: 1.5; color: rgba(232, 221, 213, 0.82);
}
.formcard__perk svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--color-desert-blush); }

/* ── Body ── */
.formcard__body { padding: clamp(28px, 4vw, 48px); }
.formcard__body > .eyebrow { display: block; margin-bottom: 22px; }

.fform { display: flex; flex-direction: column; gap: 18px; }
.fform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.fform__field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.fform__label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-desert-blush);
}
.fform__input {
  width: 100%;
  background-color: rgba(232, 221, 213, 0.04);
  border: 1px solid rgba(200, 180, 166, 0.28);
  color: var(--color-off-white);
  font-family: var(--font-sans); font-size: 15px;
  padding: 13px 15px; border-radius: 6px;
  caret-color: var(--color-desert-blush);
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.fform__input::placeholder { color: rgba(232, 221, 213, 0.3); }
.fform__input:hover { border-color: rgba(200, 180, 166, 0.5); }
.fform__input:focus {
  outline: none; border-color: var(--color-desert-blush);
  background-color: rgba(232, 221, 213, 0.07);
  box-shadow: 0 0 0 3px rgba(200, 180, 166, 0.16);
}
/* Live validation states (set from initPageForms) */
.fform__input.is-bad { border-color: #D98E7A; }
.fform__input.is-good { border-color: #8FBF9A; }
/* Required-field asterisk — CSS so the bilingual label swap can't wipe it */
.fform__label--req::after { content: ' *'; color: #D98E7A; }
/* Helper line under the phone box; recolors with validity */
.fform__hint {
  font-size: 12px; line-height: 1.5; margin: 0;
  color: rgba(232, 221, 213, 0.45);
  transition: color 0.3s ease;
}
.fform__hint--err { color: #D98E7A; }
.fform__hint--ok { color: #8FBF9A; }
.fform__privacy {
  font-size: 12px; line-height: 1.5; margin: -4px 0 0;
  text-align: center; color: rgba(232, 221, 213, 0.45);
}
.fform__select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  /* Custom chevron (phone row is forced LTR, so right side is safe) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8B4A6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 13px;
  padding-right: 30px;
}
.fform__select option { background: #14100D; color: var(--color-off-white); }
/* Full-width property select: chevron sits at the reading end —
   right in LTR, left in RTL (the phone-row select stays LTR) */
.fform__prop { padding-right: 34px; background-position: right 12px center; }
[dir="rtl"] .fform__prop { padding-right: 15px; padding-left: 34px; background-position: left 12px center; }
.fform__textarea { resize: vertical; min-height: 120px; }

/* Phone: ONE unified box — flag button, hairline divider, then the
   national number. The whole box glows on :focus-within and recolors
   with validity (via :has). Numbers always read LTR, so the row stays
   LTR in Arabic too (the divider uses a logical property). */
.fform__phone {
  display: flex; direction: ltr;
  background-color: rgba(232, 221, 213, 0.04);
  border: 1px solid rgba(200, 180, 166, 0.28);
  border-radius: 6px;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.fform__phone:hover { border-color: rgba(200, 180, 166, 0.5); }
.fform__phone:focus-within {
  border-color: var(--color-desert-blush);
  background-color: rgba(232, 221, 213, 0.07);
  box-shadow: 0 0 0 3px rgba(200, 180, 166, 0.16);
}
.fform__phone:has(.is-bad) { border-color: #D98E7A; }
.fform__phone:has(.is-good) { border-color: #8FBF9A; }
/* The number input lives borderless inside the box */
.fform__tel {
  flex: 1 1 auto; min-width: 0;
  border: 0; border-radius: 0; background-color: transparent;
}
.fform__tel:focus { background-color: transparent; box-shadow: none; }

/* Flag country-code picker (replaces the native select). Closed state
   is flag + chevron only; the dial code lives on the list rows. */
.ccpick {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: stretch;
  border-inline-end: 1px solid rgba(200, 180, 166, 0.2);
}
.ccpick__btn {
  display: flex; align-items: center; gap: 8px;
  height: 100%; padding: 13px 14px;
  background: transparent; border: 0;
  color: var(--color-off-white);
  font-family: var(--font-sans); font-size: 15px;
  cursor: pointer;
}
.ccpick__btn:focus-visible { outline: none; }
.ccpick__flag { width: 22px; height: 16px; object-fit: cover; flex: 0 0 auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.ccpick__chev { width: 12px; height: 12px; opacity: 0.65; flex: 0 0 auto; transition: transform 0.25s ease; }
.ccpick__btn[aria-expanded="true"] .ccpick__chev { transform: rotate(180deg); }
.ccpick__drop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: min(300px, 82vw);
  display: flex; flex-direction: column;
  background: #1A1512;
  border: 1px solid rgba(200, 180, 166, 0.35);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden; /* clips the search field to the rounded top */
}
.ccpick__drop--up { top: auto; bottom: calc(100% + 6px); }
.ccpick__search {
  border: 0; border-bottom: 1px solid rgba(200, 180, 166, 0.2);
  border-radius: 0; background-color: transparent;
}
.ccpick__list {
  list-style: none; margin: 0; padding: 4px;
  max-height: 230px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ccpick__opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; cursor: pointer; border-radius: 5px;
  font-size: 14px; color: var(--color-off-white);
  transition: background 0.15s ease;
}
.ccpick__opt:hover, .ccpick__opt.is-active { background: rgba(232, 221, 213, 0.07); }
.ccpick__opt .ccpick__code { margin-left: auto; color: var(--color-desert-blush); font-size: 13px; }
/* The dropdown lives inside the LTR phone row — content order stays
   flag → name → code in both site languages; only the name switches */
[data-theme="desert"] .ccpick__drop { background: #F3EDE6; border-color: rgba(89, 50, 41, 0.35); box-shadow: 0 18px 50px rgba(89, 50, 41, 0.25); }
[data-theme="desert"] .ccpick__search { color: #2A1813; border-bottom-color: rgba(89, 50, 41, 0.2); }
[data-theme="desert"] .ccpick__opt { color: #2A1813; }
[data-theme="desert"] .ccpick__opt:hover { background: rgba(89, 50, 41, 0.07); }
[data-theme="desert"] .ccpick__opt .ccpick__code { color: #593229; }

/* "Interested In" as a visible option list (radio pills) */
.fform__types { display: flex; flex-wrap: wrap; gap: 8px; }
.fform__type { position: relative; }
.fform__type input { position: absolute; opacity: 0; pointer-events: none; }
.fform__type span {
  display: inline-block; padding: 10px 18px; cursor: pointer;
  border: 1px solid rgba(200, 180, 166, 0.28);
  background: rgba(232, 221, 213, 0.04);
  color: rgba(232, 221, 213, 0.78);
  font-size: 13px; letter-spacing: 0.06em;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.fform__type span:hover { border-color: var(--color-desert-blush); }
.fform__type input:checked + span {
  background: var(--color-desert-blush);
  border-color: var(--color-desert-blush);
  color: var(--color-saffron-cedar);
  font-weight: 500;
}
.fform__type input:focus-visible + span {
  outline: 2px solid var(--color-desert-blush); outline-offset: 2px;
}

.fform__error {
  font-size: 13px; color: #D98E7A; margin: 0;
  padding-inline-start: 12px;
  border-inline-start: 2px solid #D98E7A;
}
.fform__done { text-align: center; padding: clamp(30px, 4vw, 56px) 0; }
.fform__done-icon {
  width: 56px; height: 56px; margin: 0 auto 18px;
  display: grid; place-items: center;
  border: 1px solid rgba(200, 180, 166, 0.4); border-radius: 50%;
  color: var(--color-desert-blush);
}
.fform__done-icon svg { width: 24px; height: 24px; }
.fform__done-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; color: var(--color-off-white); margin-bottom: 10px;
}
.fform__done-sub { font-size: 14px; line-height: 1.65; color: rgba(232, 221, 213, 0.7); }

@media (max-width: 900px) {
  .formcard { grid-template-columns: 1fr; max-width: 640px; }
  .formcard__aside {
    min-height: 300px;
    border-inline-end: 0;
    border-bottom: 1px solid rgba(200, 180, 166, 0.28);
  }
}
@media (max-width: 560px) {
  .fform__row { grid-template-columns: 1fr; }
}

/* ── Floating WhatsApp button — minimal, glowing ── */
.wa-float {
  position: fixed; z-index: 1500;
  inset-inline-end: 22px; bottom: 22px;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  animation: wa-glow 2.8s ease-out infinite;
  transition: transform 0.35s var(--ease);
}
.wa-float svg { width: 28px; height: 28px; }
.wa-float:hover { transform: translateY(-3px) scale(1.06); }
@keyframes wa-glow {
  0%   { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(37, 211, 102, 0.45); }
  70%  { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (max-width: 640px) {
  .wa-float { inset-inline-end: 16px; bottom: 16px; width: 50px; height: 50px; }
}

/* ── v1.3 theme adjustments ───────────────────────── */
[data-theme="sage"] .masterplan { background: var(--color-deep-sage); }
[data-theme="sage"] .formcard { background: #232C25; }
[data-theme="sage"] .fform__select option, [data-theme="sage"] .mp-select option { background: #232C25; }

[data-theme="desert"] .masterplan { background: #EFE8E1; }
[data-theme="desert"] .masterplan .eyebrow { color: #6E4E40; }
[data-theme="desert"] .masterplan h3 { color: #2A1813; }
[data-theme="desert"] .mp-legend__item, [data-theme="desert"] .mp-hint { color: rgba(42, 24, 19, 0.65); }
[data-theme="desert"] .mp-disclaimer { color: rgba(42, 24, 19, 0.5); }
[data-theme="desert"] .mp-select { color: #593229; border-color: rgba(89, 50, 41, 0.4); }
[data-theme="desert"] .mp-select option { background: #EFE8E1; color: #2A1813; }
/* The rail (aside) is image-backed and dark in every theme — only the
   form body below gets themed. */
[data-theme="desert"] .formcard { background: #F3EDE6; border-color: rgba(89, 50, 41, 0.25); box-shadow: 0 34px 90px rgba(89, 50, 41, 0.18); }
[data-theme="desert"] .fform__done-title { color: #2A1813; }
[data-theme="desert"] .fform__done-sub { color: rgba(42, 24, 19, 0.7); }
[data-theme="desert"] .formcard__body .eyebrow, [data-theme="desert"] .fform__label { color: #6E4E40; }
[data-theme="desert"] .fform__input {
  background-color: rgba(89, 50, 41, 0.05);
  border-color: rgba(89, 50, 41, 0.3);
  color: #2A1813;
}
[data-theme="desert"] .fform__input::placeholder { color: rgba(42, 24, 19, 0.35); }
[data-theme="desert"] .fform__input:hover { border-color: rgba(89, 50, 41, 0.5); }
[data-theme="desert"] .fform__input:focus { border-color: #593229; background-color: rgba(89, 50, 41, 0.08); box-shadow: 0 0 0 3px rgba(89, 50, 41, 0.14); }
[data-theme="desert"] .fform__input.is-bad { border-color: #B3402E; }
[data-theme="desert"] .fform__input.is-good { border-color: #3E7C4F; }
/* Unified phone box — desert values mirror the inputs above */
[data-theme="desert"] .fform__phone { background-color: rgba(89, 50, 41, 0.05); border-color: rgba(89, 50, 41, 0.3); }
[data-theme="desert"] .fform__phone:hover { border-color: rgba(89, 50, 41, 0.5); }
[data-theme="desert"] .fform__phone:focus-within { border-color: #593229; background-color: rgba(89, 50, 41, 0.08); box-shadow: 0 0 0 3px rgba(89, 50, 41, 0.14); }
[data-theme="desert"] .fform__phone:has(.is-bad) { border-color: #B3402E; }
[data-theme="desert"] .fform__phone:has(.is-good) { border-color: #3E7C4F; }
[data-theme="desert"] .fform__tel, [data-theme="desert"] .fform__tel:focus { background-color: transparent; box-shadow: none; }
[data-theme="desert"] .ccpick { border-inline-end-color: rgba(89, 50, 41, 0.2); }
[data-theme="desert"] .ccpick__btn { color: #2A1813; }
[data-theme="desert"] .fform__hint, [data-theme="desert"] .fform__privacy { color: rgba(42, 24, 19, 0.45); }
[data-theme="desert"] .fform__hint--err { color: #B3402E; }
[data-theme="desert"] .fform__hint--ok { color: #3E7C4F; }
[data-theme="desert"] .fform__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23593229' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="desert"] .fform__select option { background: #F3EDE6; color: #2A1813; }
[data-theme="desert"] .fform__type span {
  background: rgba(89, 50, 41, 0.05);
  border-color: rgba(89, 50, 41, 0.3);
  color: rgba(42, 24, 19, 0.75);
}
[data-theme="desert"] .fform__type span:hover { border-color: #593229; }
[data-theme="desert"] .fform__type input:checked + span {
  background: #593229; border-color: #593229; color: #E8DDD5;
}
[data-theme="desert"] .ucard { background: rgba(89, 50, 41, 0.04); border-color: rgba(89, 50, 41, 0.18); }
[data-theme="desert"] .ucard__name { color: #2A1813; }
[data-theme="desert"] .ucard__plan { color: #6E4E40; border-color: rgba(89, 50, 41, 0.18); }
[data-theme="desert"] .ucard__tag { color: rgba(89, 50, 41, 0.45); }
[data-theme="desert"] .ucard__spec-num { color: #593229; }
[data-theme="desert"] .ucard__spec-label, [data-theme="desert"] .ucard__specs { color: rgba(42, 24, 19, 0.6); border-color: rgba(89, 50, 41, 0.18); }
[data-theme="desert"] .units__note { color: rgba(89, 50, 41, 0.6); }
[data-theme="desert"] .ufilter__chip { color: #593229; border-color: rgba(89, 50, 41, 0.35); }
[data-theme="desert"] .ufilter__chip.active { background: #593229; color: var(--color-desert-blush); border-color: #593229; }

@media (prefers-reduced-motion: reduce) {
  .wa-float { animation: none; }
}

/* ════════════════════════════════════════════════════
   v1.4 — RESIDENCES EXPANDING PANELS (home)
   ════════════════════════════════════════════════════ */
.xpanels {
  display: flex; gap: 12px;
  height: clamp(420px, 58vh, 560px);
}
.xpanel {
  position: relative; overflow: hidden;
  flex: 1; min-width: 0;
  transition: flex 0.7s var(--ease);
  outline-offset: -2px;
}
.xpanel.is-open { flex: 2.6; }
.xpanel__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05);
  transition: transform 1.2s var(--ease);
}
.xpanel.is-open .xpanel__img { transform: scale(1); }
.xpanel__shade {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  transition: background 0.5s ease;
}
.xpanel.is-open .xpanel__shade { background: rgba(0, 0, 0, 0.18); }
.xpanel__body {
  position: absolute; inset-inline: 22px; bottom: 20px;
  color: var(--color-off-white);
}
.xpanel__num {
  display: block; font-size: 11px; letter-spacing: 0.24em;
  color: var(--color-desert-blush); margin-bottom: 6px;
}
.xpanel__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(18px, 1.8vw, 24px); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xpanel__more {
  font-size: 13px; color: var(--color-desert-blush);
  margin-top: 8px;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 0.5s ease 0.2s, max-height 0.5s ease;
}
.xpanel.is-open .xpanel__more { opacity: 1; max-height: 60px; }

@media (max-width: 768px) {
  .xpanels { flex-direction: column; height: auto; }
  .xpanel { flex: none; height: 92px; transition: height 0.6s var(--ease); }
  .xpanel.is-open { flex: none; height: 320px; }
  .xpanel__name { white-space: normal; }
}

/* ════════════════════════════════════════════════════
   v1.4 — VISION / MISSION / VALUES DELUXE CARDS
   ════════════════════════════════════════════════════ */
.vmvx__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 28px);
  max-width: 1320px; margin: 0 auto;
  perspective: 1000px;
}
.vmvx__card {
  position: relative; overflow: hidden;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(200, 180, 166, 0.22);
  padding: clamp(24px, 3vw, 34px) clamp(20px, 2.5vw, 28px) clamp(26px, 3vw, 36px);
  transform-style: preserve-3d;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  opacity: 0;
  will-change: transform;
}
.vmvx__card.entered { animation: vmvxin 0.9s var(--ease) forwards; }
.vmvx__card.entered.no-anim { animation: none; opacity: 1; }
@keyframes vmvxin {
  from { opacity: 0; transform: translateY(34px) rotateX(8deg); }
  to   { opacity: 1; transform: translateY(0) rotateX(0); }
}
.vmvx__card:hover, .vmvx__card.touring {
  border-color: rgba(200, 180, 166, 0.7);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
.vmvx__inner { position: relative; transform-style: preserve-3d; }
.vmvx__glow {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  background: rgba(232, 221, 213, 0.09);
  filter: blur(26px);
  top: -75px; left: -75px; opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.vmvx__card:hover .vmvx__glow, .vmvx__card.touring .vmvx__glow { opacity: 1; }
.vmvx__sheen {
  position: absolute; top: -60%; left: 0; width: 38%; height: 220%;
  background: rgba(232, 221, 213, 0.08);
  transform: rotate(20deg) translateX(-220%);
  filter: blur(7px); pointer-events: none;
}
[dir="rtl"] .vmvx__sheen { transform: rotate(-20deg) translateX(220%); }
.vmvx__card.touring .vmvx__sheen, .vmvx__card:hover .vmvx__sheen {
  animation: vmvxsheen 1.15s ease forwards;
}
@keyframes vmvxsheen { to { transform: rotate(20deg) translateX(480%); } }
[dir="rtl"] .vmvx__card.touring .vmvx__sheen,
[dir="rtl"] .vmvx__card:hover .vmvx__sheen { animation-name: vmvxsheen-rtl; }
@keyframes vmvxsheen-rtl { to { transform: rotate(-20deg) translateX(-480%); } }
.vmvx__ghost {
  position: absolute; bottom: -30px; inset-inline-end: -8px;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(90px, 9vw, 130px); line-height: 1;
  color: rgba(200, 180, 166, 0.06);
  user-select: none; pointer-events: none;
  transition: color 0.5s ease, transform 0.5s ease;
}
.vmvx__card:hover .vmvx__ghost, .vmvx__card.touring .vmvx__ghost {
  color: rgba(200, 180, 166, 0.13);
  transform: translateY(-6px);
}
.vmvx__corner { position: absolute; width: 24px; height: 24px; pointer-events: none; }
.vmvx__corner--a {
  top: 9px; inset-inline-start: 9px;
  border-top: 1px solid var(--color-desert-blush);
  border-inline-start: 1px solid var(--color-desert-blush);
  transform: scale(0); transform-origin: top left;
  transition: transform 0.5s var(--ease);
}
[dir="rtl"] .vmvx__corner--a { transform-origin: top right; }
.vmvx__corner--b {
  bottom: 9px; inset-inline-end: 9px;
  border-bottom: 1px solid var(--color-desert-blush);
  border-inline-end: 1px solid var(--color-desert-blush);
  transform: scale(0); transform-origin: bottom right;
  transition: transform 0.5s var(--ease);
}
[dir="rtl"] .vmvx__corner--b { transform-origin: bottom left; }
.vmvx__card:hover .vmvx__corner, .vmvx__card.touring .vmvx__corner { transform: scale(1); }
.vmvx__num {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 3.5vw, 48px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(200, 180, 166, 0.55);
  margin-bottom: 14px;
  transition: color 0.45s ease;
  transform: translateZ(34px);
}
.vmvx__card:hover .vmvx__num, .vmvx__card.touring .vmvx__num { color: var(--color-desert-blush); }
.vmvx__title {
  color: var(--color-off-white);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(20px, 2vw, 25px);
  margin: 0 0 10px;
  transform: translateZ(26px);
}
.vmvx__text {
  color: rgba(200, 180, 166, 0.88);
  font-size: clamp(13.5px, 1.2vw, 15px); line-height: 1.7;
  margin: 0 0 18px;
  transform: translateZ(14px);
}
.vmvx__rule {
  height: 1px; background: var(--color-desert-blush);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.65s var(--ease);
}
[dir="rtl"] .vmvx__rule { transform-origin: right; }
.vmvx__card:hover .vmvx__rule, .vmvx__card.touring .vmvx__rule { transform: scaleX(1); }

@media (max-width: 1024px) { .vmvx__grid { grid-template-columns: 1fr; gap: 20px; } }

@media (prefers-reduced-motion: reduce) {
  .xpanel, .xpanel__img, .xpanel__more, .xpanel__shade { transition: none; }
  .vmvx__card { animation: none !important; opacity: 1; }
  .vmvx__sheen, .vmvx__glow { display: none; }
}

/* ════════════════════════════════════════════════════
   v1.5.2 — HERO CTA (Option 3: cream / ghost / glass WA)
   ════════════════════════════════════════════════════ */
.hero__cta .btn { padding: 12px 28px; }

/* Primary — luxury off-white, pops over the dark video */
.hero__cta .btn--solid {
  background: var(--color-off-white);
  border-color: var(--color-off-white);
  color: #2A1813;
  font-weight: 500;
}
.hero__cta .btn--solid:hover,
.hero__cta .btn--solid:focus-visible {
  background: var(--color-desert-blush);
  border-color: var(--color-desert-blush);
  color: var(--color-saffron-cedar);
}

/* Secondary — quiet neutral ghost */
.hero__cta .btn--ghost {
  background: transparent;
  border-color: rgba(232, 221, 213, 0.45);
  color: var(--color-off-white);
}
.hero__cta .btn--ghost:hover,
.hero__cta .btn--ghost:focus-visible {
  border-color: var(--color-off-white);
  background: rgba(232, 221, 213, 0.08);
  color: var(--color-off-white);
}

/* WhatsApp — official green, instantly recognizable */
.hero__cta .btn--wa svg { width: 19px; height: 19px; }
/* ════════════════════════════════════════════════════
   v1.6 — LIGHT-FIRST + CONSOLIDATED HOMEPAGE
   ════════════════════════════════════════════════════ */

/* Form submit inherits WhatsApp identity */
.fform__submit {
  justify-content: center; gap: 10px;
  width: 100%; margin-top: 8px;
  background: #25D366; border-color: #25D366; color: #ffffff;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.22);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.fform__submit svg { width: 19px; height: 19px; flex: 0 0 auto; }
.fform__submit:hover, .fform__submit:focus-visible {
  background: #1DA851; border-color: #1DA851; color: #ffffff;
  box-shadow: 0 14px 36px rgba(37, 211, 102, 0.32);
  transform: translateY(-2px);
}

/* Slim single-row stats strip */
.statsmap { padding-top: clamp(44px, 6vw, 64px); padding-bottom: clamp(44px, 6vw, 64px); }
.stats--slim { grid-template-columns: repeat(5, 1fr); row-gap: 28px; }
@media (max-width: 900px) { .stats--slim { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stats--slim { grid-template-columns: repeat(2, 1fr); } }

/* Location / 3D view toggle */
.mp-views { display: inline-flex; border: 1px solid rgba(200, 180, 166, 0.4); }
.mp-view {
  padding: 10px 18px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-desert-blush);
  background: transparent;
  transition: background 0.3s ease, color 0.3s ease;
}
.mp-view.active {
  background: var(--color-desert-blush);
  color: var(--color-saffron-cedar);
}
[data-theme="desert"] .mp-view { color: #593229; }
[data-theme="desert"] .mp-views { border-color: rgba(89, 50, 41, 0.4); }
[data-theme="desert"] .mp-view.active { background: #593229; color: var(--color-desert-blush); }

/* 2D location view inside the merged section */
.mp-2d { margin-top: clamp(30px, 4vw, 48px); }
.mp-2d .map-img { width: 100%; display: block; }

/* Gallery preview → compact horizontal strip */
.gal-prev .masonry {
  columns: unset;
  display: flex; gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.gal-prev .masonry__item {
  flex: 0 0 clamp(220px, 26vw, 320px);
  height: clamp(260px, 32vw, 340px);
  scroll-snap-align: start;
  margin: 0;
}
.gal-prev .masonry__item img { width: 100%; height: 100%; object-fit: cover; }

/* ════════════════════════════════════════════════════
   v1.7 — "NEW" SKIN (light editorial, over desert base)
   ════════════════════════════════════════════════════ */

/* second stats row exists only in the New skin */
.stat--extra { display: none; }

/* ── Residences: full-bleed triptych, top scrim for headings ── */
[data-skin="new"] .res-prev { background: #ffffff; padding-bottom: 0; }
[data-skin="new"] .res-prev .wrap { max-width: none; padding-inline: 0; }
[data-skin="new"] .res-prev__head { padding-inline: var(--pad-x); }
[data-skin="new"] .res-prev .section-title { color: #1A1A1A; }
[data-skin="new"] .xpanels { gap: 0; height: clamp(480px, 74vh, 660px); }
[data-skin="new"] .xpanel__shade { background: rgba(0, 0, 0, 0.14); }
[data-skin="new"] .xpanel.is-open .xpanel__shade { background: rgba(0, 0, 0, 0.05); }
[data-skin="new"] .xpanel__body {
  top: 0; bottom: auto; inset-inline: 0;
  padding: 22px 26px 52px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.26) 58%, rgba(0, 0, 0, 0) 100%);
}
[data-skin="new"] .xpanel__name { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
[data-skin="new"] .xpanel__more { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
@media (max-width: 768px) {
  [data-skin="new"] .xpanels { height: auto; }
}

/* ── One seamless white section: heading + counters + map ── */
[data-skin="new"] .statsmap {
  background: #ffffff;
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: 0;
}
[data-skin="new"] .statsmap .stat__num { color: #593229; }
[data-skin="new"] .statsmap .stat__label { color: #6E5F53; }
[data-skin="new"] .stat--extra { display: block; }
[data-skin="new"] .stats--slim { row-gap: 48px; }
[data-skin="new"] .masterplan {
  background: #ffffff;
  padding-top: clamp(36px, 4.5vw, 56px);
}
[data-skin="new"] .mp-stage {
  background: #F3E4CB;
  border-color: rgba(89, 50, 41, 0.25);
}
[data-skin="new"] .mp-2d .map-img { background: #ffffff; }

/* ── Gallery: white, smaller title, larger auto-scrolling images ── */
.gal-track { display: flex; gap: 14px; }
.gal-clone { display: none; }
[data-skin="new"] .gal-prev { background: #ffffff; }
[data-skin="new"] .gal-prev__title {
  font-size: clamp(26px, 3.4vw, 42px);
  color: #1A1A1A;
}
[data-skin="new"] .gal-prev .masonry {
  overflow: hidden;
  scroll-snap-type: none;
}
[data-skin="new"] .gal-prev .masonry__item {
  flex: 0 0 clamp(300px, 34vw, 470px);
  height: clamp(340px, 44vw, 500px);
  scroll-snap-align: unset;
}
[data-skin="new"] .gal-clone { display: block; }
[data-skin="new"] .gal-track {
  width: max-content;
  animation: galmarq 48s linear infinite;
  /* Hold the marquee until the strip's images have loaded (JS adds
     .gal-ready) — otherwise empty boxes scroll by on slow connections */
  animation-play-state: paused;
}
[data-skin="new"] .gal-track.gal-ready { animation-play-state: running; }
[data-skin="new"] .gal-prev .masonry:hover .gal-track { animation-play-state: paused; }
@keyframes galmarq { to { transform: translateX(calc(-50% - 7px)); } }
[dir="rtl"] [data-skin="new"] .gal-track { animation-direction: reverse; }

@media (prefers-reduced-motion: reduce) {
  [data-skin="new"] .gal-track { animation: none; }
}

/* ════════════════════════════════════════════════════
   v1.7.2 — NEW SKIN refinements
   ════════════════════════════════════════════════════ */

/* Residences: kept as v1.7 — white band + heading + full-bleed panels */

/* "The Community" section hidden in the New skin.
   ── To bring it back for the client: delete the rule below. ── */
[data-skin="new"] .amen-prev { display: none; }

/* Location & Masterplan views break out to full-bleed */
[data-skin="new"] .mp-2d,
[data-skin="new"] .mp-stage {
  width: 100vw;
  margin-inline-start: calc(50% - 50vw);
}
[data-skin="new"] .mp-stage { border-inline: none; }

/* ════════════════════════════════════════════════════
   PRE-LAUNCH TEASER (launch.html) — .tz-*
   ────────────────────────────────────────────────────
   A standalone campaign page. It deliberately does NOT
   follow the demo theme palettes: the teaser is always
   ink-dark and cinematic, so every color below comes
   from its own local tokens (brand hues, fixed).
   Signature motif: the "view line" — a 1px horizon that
   every image opens from, like an aperture widening.
   ════════════════════════════════════════════════════ */
body.tz-body {
  --tz-ink:    #0B0908;
  --tz-paper:  #E8DDD5;
  --tz-blush:  #C8B4A6;
  --tz-cedar:  #593229;
  background: var(--tz-ink);
  color: var(--tz-paper);
}
.tz-wrap { max-width: 1320px; margin-inline: auto; width: 100%; }

/* ── Type roles ── */
.tz-kicker {
  font-family: var(--font-sans);
  font-weight: 300; font-size: 11px;
  letter-spacing: 0.45em; text-transform: uppercase;
  color: var(--tz-blush);
}
[dir="rtl"] .tz-kicker { letter-spacing: 0.12em; }
.tz-copy {
  font-family: var(--font-text);
  font-weight: 300; font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.85; color: rgba(232, 221, 213, 0.72);
  max-width: 46ch;
}
.tz-state { font-family: var(--font-display); font-weight: 700; color: var(--tz-paper); letter-spacing: -0.015em; }
.tz-state .tz-line {
  display: block; line-height: 1.06; padding-bottom: 0.08em;
  font-size: clamp(34px, 5.4vw, 74px);
}
.tz-state--lg .tz-line { font-size: clamp(40px, 7vw, 96px); font-weight: 900; }
.tz-state--sm .tz-line { font-size: clamp(28px, 3.4vw, 44px); }
[dir="rtl"] .tz-state .tz-line { line-height: 1.4; letter-spacing: 0; }

/* ── CTA (shared by hero, header target and submit) ── */
.tz-cta {
  display: inline-flex; align-items: center; gap: 0.9em;
  padding: 17px 46px;
  border: 1px solid var(--tz-blush);
  background: transparent; color: var(--tz-blush);
  font-family: var(--font-sans); font-weight: 500;
  font-size: 12.5px; letter-spacing: 0.24em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.45s ease, color 0.45s ease, transform 0.45s var(--ease);
}
.tz-cta svg { width: 17px; height: 17px; flex: 0 0 auto; transition: transform 0.45s var(--ease); }
.tz-cta:hover, .tz-cta:focus-visible {
  background: var(--tz-blush); color: var(--tz-cedar); transform: translateY(-2px);
}
.tz-cta:hover svg { transform: translateX(4px); }
[dir="rtl"] .tz-cta { letter-spacing: 0.1em; }
[dir="rtl"] .tz-cta:hover svg { transform: translateX(-4px) scaleX(-1); }

/* ── Entrance cover ── */
.tz-cover {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--tz-ink);
  display: flex; align-items: center; justify-content: center;
}
.tz-cover__mark { width: clamp(120px, 16vw, 190px); opacity: 0; }
html:not(.js) .tz-cover, html.tz-ready .tz-cover { display: none; }

/* ── Minimal header ── */
.tz-top {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--pad-x);
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}
.tz-top::before {
  content: ''; position: absolute; inset: 0; bottom: auto; height: 180px;
  background: linear-gradient(to bottom, rgba(11, 9, 8, 0.6) 0%, rgba(11, 9, 8, 0) 100%);
  pointer-events: none; z-index: -1;
  transition: opacity 0.4s ease;
}
.tz-top.tz-top--solid { background: rgba(11, 9, 8, 0.82); backdrop-filter: blur(10px); }
.tz-top.tz-top--solid::before { opacity: 0; }
.tz-top__brand img { height: 40px; display: block; }
.tz-top__right { display: flex; align-items: center; gap: 16px; }
.tz-top__cta {
  padding: 11px 24px;
  border: 1px solid rgba(200, 180, 166, 0.55);
  color: var(--tz-blush);
  font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.tz-top__cta:hover, .tz-top__cta:focus-visible {
  background: var(--tz-blush); border-color: var(--tz-blush); color: var(--tz-cedar);
}
[dir="rtl"] .tz-top__cta { letter-spacing: 0.08em; }

/* ── 01 · Hero ── */
.tz-hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end; overflow: hidden;
}
.tz-hero__frame { position: absolute; inset: 0; z-index: 0; }
.tz-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tz-hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(11, 9, 8, 0.82) 0%, rgba(11, 9, 8, 0.28) 42%, rgba(11, 9, 8, 0.42) 100%);
}
.tz-hero__content {
  position: relative; z-index: 2;
  padding: 0 var(--pad-x) clamp(100px, 15vh, 160px);
  max-width: 1020px;
}
.tz-hero__kicker { margin-bottom: 26px; }
.tz-hero__title .tz-line {
  display: block;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(38px, 6.8vw, 92px);
  line-height: 1.04; letter-spacing: -0.02em;
  color: var(--tz-paper);
  padding-bottom: 0.07em;
}
[dir="rtl"] .tz-hero__title .tz-line { line-height: 1.32; letter-spacing: 0; }
.tz-hero__sub {
  font-family: var(--font-text); font-weight: 300;
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--tz-blush);
  margin-top: 22px;
}
.tz-hero__cta { margin-top: 42px; }
.tz-hero__meta {
  position: absolute; z-index: 2;
  bottom: 40px; inset-inline-end: var(--pad-x);
  font-weight: 300; font-size: 10.5px; letter-spacing: 0.35em; text-transform: uppercase;
  color: rgba(200, 180, 166, 0.9);
  white-space: nowrap;
}
[dir="rtl"] .tz-hero__meta { letter-spacing: 0.12em; }
.tz-hero__meta i {
  display: inline-block; width: 26px; height: 1px;
  background: rgba(200, 180, 166, 0.6);
  margin: 0 14px; vertical-align: middle;
}
.tz-hero__scroll {
  position: absolute; z-index: 2; bottom: 0; left: 50%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 12px;
  font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(200, 180, 166, 0.85);
}
[dir="rtl"] .tz-hero__scroll { letter-spacing: 0.12em; }
.tz-hero__scroll i {
  position: relative; display: block; width: 1px; height: 58px;
  background: rgba(200, 180, 166, 0.22); overflow: hidden;
}
.tz-hero__scroll i::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: var(--tz-blush);
  transform: translateY(-100%);
  animation: tz-scroll-line 2.6s var(--ease) infinite;
}
@keyframes tz-scroll-line {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ── Aperture: the "view line" image reveal ── */
.tz-aperture { position: relative; overflow: hidden; }
.tz-aperture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tz-aperture__line {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px; z-index: 3;
  background: var(--tz-blush);
  transform-origin: center;
  pointer-events: none;
}

/* Pre-JS initial states (belt-and-braces against a flash before
   js/teaser.js sets its inline states; without JS nothing is hidden) */
html.js:not(.tz-ready) .tz-line { clip-path: inset(0 101% 0 0); }
html.js:not(.tz-ready)[dir="rtl"] .tz-line { clip-path: inset(0 0 0 101%); }
html.js:not(.tz-ready) .tz-hero__frame,
html.js:not(.tz-ready) .tz-aperture { clip-path: inset(50.2% 0 50.2% 0); }
html.js:not(.tz-ready) .tz-aperture__line,
html.js:not(.tz-ready) .tz-duo__line { transform: scaleX(0); }
html.js:not(.tz-ready) .tz-top,
html.js:not(.tz-ready) .tz-hero__kicker,
html.js:not(.tz-ready) .tz-hero__sub,
html.js:not(.tz-ready) .tz-hero__cta,
html.js:not(.tz-ready) .tz-hero__meta,
html.js:not(.tz-ready) .tz-hero__scroll { opacity: 0; }

/* ── Section rhythm ── */
.tz-sec {
  padding: clamp(110px, 16vh, 190px) var(--pad-x);
  position: relative;
}

/* ── 02 · Teaser ── */
.tz-teaser__row {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: clamp(44px, 8vw, 130px);
  align-items: start;
  margin-top: clamp(56px, 8vw, 110px);
}
.tz-teaser__row .tz-copy { margin-top: clamp(10px, 4vw, 56px); }
.tz-teaser__media {
  justify-self: end;
  width: min(560px, 100%);
  height: clamp(420px, 72vh, 680px);
}

/* ── 03 · Concept — City / Horizon ── */
.tz-concept { padding-inline: 0; }
.tz-duo {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1vw, 14px);
}
.tz-duo__half { height: clamp(420px, 80vh, 720px); }
.tz-duo__half img { filter: brightness(0.92); }
.tz-duo__line {
  position: absolute; left: 0; right: 0; top: 58%; height: 1px; z-index: 4;
  background: rgba(200, 180, 166, 0.85);
  transform-origin: center;
  pointer-events: none;
}
.tz-duo__word {
  position: absolute; z-index: 5;
  bottom: 6%; inset-inline-start: 5%;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4.4vw, 62px);
  letter-spacing: -0.01em; color: var(--tz-paper);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.tz-duo__word--end { inset-inline-start: auto; inset-inline-end: 5%; }
[dir="rtl"] .tz-duo__word { letter-spacing: 0; }
.tz-duo__note {
  font-family: var(--font-text); font-weight: 300;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.85;
  color: rgba(200, 180, 166, 0.75);
  text-align: center; max-width: 52ch;
  margin: clamp(44px, 7vw, 80px) auto 0;
  padding-inline: var(--pad-x);
}

/* ── 04 · Reveal ── */
.tz-reveal { padding-inline: 0; }
.tz-reveal__media {
  height: clamp(300px, 54vh, 540px);
}
.tz-reveal__media img { filter: brightness(0.8); }
.tz-reveal .tz-wrap {
  padding-inline: var(--pad-x);
  margin-top: clamp(64px, 10vw, 130px);
}

/* ── 05 · Registration ── */
.tz-register__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(52px, 8vw, 130px);
  align-items: start;
}
.tz-register__intro { position: sticky; top: 130px; }
.tz-register__intro .tz-kicker { display: block; margin-bottom: 22px; }
.tz-register__intro .tz-copy { margin-top: 26px; }

/* The shared form engine (.fform), restyled for the teaser:
   underline fields, generous air, no card chrome. Every color is
   declared here so the demo themes (incl. desert) can't restyle it. */
.tz-register .fform { gap: 36px; }
.tz-register .fform__label {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(200, 180, 166, 0.8);
}
[dir="rtl"] .tz-register .fform__label { letter-spacing: 0.1em; }
.tz-register .fform__input {
  border: 0; border-bottom: 1px solid rgba(200, 180, 166, 0.3);
  border-radius: 0; background: transparent;
  padding: 12px 2px 14px;
  font-size: 18px; color: var(--tz-paper);
  box-shadow: none;
  transition: border-color 0.35s ease;
}
.tz-register .fform__input::placeholder { color: rgba(232, 221, 213, 0.28); }
.tz-register .fform__input:hover { border-color: rgba(200, 180, 166, 0.55); background: transparent; }
.tz-register .fform__input:focus {
  border-color: var(--tz-paper); background: transparent; box-shadow: none;
}
.tz-register .fform__input.is-bad { border-color: #D98E7A; }
.tz-register .fform__input.is-good { border-color: #8FBF9A; }

.tz-register .fform__phone {
  border: 0; border-bottom: 1px solid rgba(200, 180, 166, 0.3);
  border-radius: 0; background: transparent;
  transition: border-color 0.35s ease;
}
.tz-register .fform__phone:hover { border-color: rgba(200, 180, 166, 0.55); }
.tz-register .fform__phone:focus-within { border-color: var(--tz-paper); box-shadow: none; background: transparent; }
.tz-register .fform__phone:has(.is-bad) { border-color: #D98E7A; }
.tz-register .fform__phone:has(.is-good) { border-color: #8FBF9A; }
.tz-register .fform__phone .fform__input { border: 0; }
.tz-register .ccpick { border-inline-end: 1px solid rgba(200, 180, 166, 0.25); }
.tz-register .ccpick__btn { color: var(--tz-paper); }
.tz-register .ccpick__drop {
  background: #14100D;
  border-color: rgba(200, 180, 166, 0.3);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.tz-register .ccpick__search { color: var(--tz-paper); border-bottom-color: rgba(200, 180, 166, 0.2); }
.tz-register .ccpick__opt { color: var(--tz-paper); }
.tz-register .ccpick__opt:hover, .tz-register .ccpick__opt.is-active { background: rgba(232, 221, 213, 0.07); }
.tz-register .ccpick__opt .ccpick__code { color: var(--tz-blush); }

.tz-register .fform__type span {
  background: transparent;
  border: 1px solid rgba(200, 180, 166, 0.35);
  color: rgba(232, 221, 213, 0.8);
  padding: 12px 28px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
[dir="rtl"] .tz-register .fform__type span { letter-spacing: 0.05em; }
.tz-register .fform__type span:hover { border-color: var(--tz-blush); }
.tz-register .fform__type input:checked + span {
  background: var(--tz-blush); border-color: var(--tz-blush); color: var(--tz-cedar);
}
.tz-register .fform__types { gap: 10px; }

.tz-register .fform__hint { color: rgba(200, 180, 166, 0.55); }
.tz-register .fform__hint--err { color: #D98E7A; }
.tz-register .fform__hint--ok { color: #8FBF9A; }
.tz-fform__submit { justify-content: center; margin-top: 6px; }
.tz-register .fform__privacy { color: rgba(232, 221, 213, 0.45); }
.tz-register .fform__done { text-align: start; padding: clamp(24px, 3vw, 40px) 0; }
.tz-register .fform__done-icon { margin: 0 0 22px; border-color: rgba(200, 180, 166, 0.45); color: var(--tz-blush); }
.tz-register .fform__done-title {
  font-size: clamp(28px, 3vw, 38px); color: var(--tz-paper);
}
.tz-register .fform__done-sub {
  font-family: var(--font-text); font-weight: 300;
  font-size: 16px; line-height: 1.8; color: rgba(232, 221, 213, 0.72);
  max-width: 40ch;
}

/* ── Minimal footer ── */
.tz-foot {
  padding: clamp(70px, 10vh, 110px) var(--pad-x) 60px;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center;
  border-top: 1px solid rgba(200, 180, 166, 0.14);
}
.tz-foot__logo { height: 88px; }
.tz-foot__copy { font-weight: 300; font-size: 12px; letter-spacing: 0.06em; color: rgba(200, 180, 166, 0.6); }
.tz-foot__link {
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(200, 180, 166, 0.75);
  border-bottom: 1px solid rgba(200, 180, 166, 0.35);
  padding-bottom: 4px;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.tz-foot__link:hover { color: var(--tz-paper); border-color: var(--tz-paper); }
[dir="rtl"] .tz-foot__link { letter-spacing: 0.08em; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .tz-teaser__row { grid-template-columns: 1fr; gap: 48px; }
  .tz-teaser__row .tz-copy { margin-top: 0; }
  .tz-teaser__media { justify-self: stretch; width: 100%; height: clamp(340px, 58vh, 520px); }
  .tz-duo { grid-template-columns: 1fr; }
  .tz-duo__half { height: clamp(300px, 52vh, 440px); }
  .tz-duo__line { display: none; }
  .tz-register__grid { grid-template-columns: 1fr; gap: 56px; }
  .tz-register__intro { position: static; }
}
@media (max-width: 640px) {
  .tz-hero__content { padding-bottom: 140px; }
  .tz-hero__meta { bottom: 30px; font-size: 9.5px; }
  .tz-top { padding: 16px var(--pad-x); }
  .tz-top__brand img { height: 32px; }
  .tz-top__cta { padding: 9px 14px; font-size: 10px; letter-spacing: 0.16em; white-space: nowrap; }
  .tz-hero__scroll { display: none; } /* the meta line keeps the bottom edge calm */
  .tz-cta { padding: 15px 34px; }
  .tz-fform__submit { width: 100%; }
  .tz-foot__logo { height: 70px; }
}

/* ── Reduced motion: everything visible, nothing moves ── */
@media (prefers-reduced-motion: reduce) {
  .tz-cover { display: none; }
  .tz-line, .tz-aperture, .tz-hero__frame { clip-path: none !important; }
  .tz-aperture__line, .tz-duo__line { transform: none !important; }
  .tz-top, .tz-hero__kicker, .tz-hero__sub, .tz-hero__cta,
  .tz-hero__meta, .tz-hero__scroll { opacity: 1 !important; }
  .tz-hero__scroll i::after { animation: none; transform: none; }
}

/* ════════════════════════════════════════════════════
   LAUNCH TEASER (launch.html) — standalone campaign page
   Single cinematic viewport — render, veil, grain, glass lead form.
   Colors are driven by --soon-* custom properties so the standard
   theme switch works here too: midnight/sage stay dark and cinematic,
   desert/"new" flip to the site's light branding (day render included).
   ════════════════════════════════════════════════════ */
.soon {
  --soon-bg: #0B0705;
  --soon-text: #E8DDD5;
  --soon-muted: rgba(232, 221, 213, 0.78);
  --soon-faint: rgba(232, 221, 213, 0.55);
  --soon-accent: #C8B4A6;
  --soon-on-accent: #2A1813;
  --soon-line: rgba(200, 180, 166, 0.26);
  --soon-card-bg: rgba(18, 13, 10, 0.58);
  --soon-card-line: rgba(200, 180, 166, 0.3);
  --soon-input-bg: rgba(232, 221, 213, 0.06);
  --soon-shadow: rgba(0, 0, 0, 0.5);
  --soon-veil:
    radial-gradient(120% 85% at 50% 18%, rgba(11, 7, 5, 0.2) 0%, rgba(11, 7, 5, 0.66) 58%, rgba(8, 5, 3, 0.92) 100%),
    linear-gradient(to bottom, rgba(8, 5, 3, 0.55) 0%, rgba(8, 5, 3, 0.3) 38%, rgba(8, 5, 3, 0.88) 100%);

  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(48px, 7vh, 84px) var(--pad-x) 120px; /* bottom clears the marquee */
  background: var(--soon-bg);
  overflow: hidden;
}
.soon__bgwrap { position: absolute; inset: 0; z-index: -3; }
.soon__bg {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: soonDrift 48s ease-in-out infinite alternate;
}
.soon__bg--day { display: none; }
@keyframes soonDrift {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.09) translateY(-1.5%); }
}
.soon__veil {
  position: absolute; inset: 0; z-index: -2;
  /* Keeps the render cinematic but guarantees legibility everywhere */
  background: var(--soon-veil);
}
.soon__grain {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Language switch — both languages shown, per the content document's
   "AR | EN". Showing the pair rather than a lone glyph tells the visitor
   what they are switching to, and it drops the single-glyph centring
   problem: an Arabic ع and a Latin EN have different vertical metrics and
   side bearings, so neither optically centres in the same circle.
   The hairline divider is the same device the countdown uses between its
   cells. direction: ltr pins the order so the pair does not reverse when
   the page flips to RTL. */
.soon__lang {
  /* Physical sides, not inset-inline-end: direction:ltr below applies to
     this element, so a logical inset would resolve against the button's own
     direction and pin it to the right even on an RTL page. */
  position: absolute; top: 20px; right: 22px; z-index: 5;
  direction: ltr;
  display: inline-flex; align-items: center;
  width: auto; height: auto;
  padding: 9px 4px;         /* the options carry their own inline padding */
  border-radius: 999px;
  letter-spacing: 0;        /* the options set their own tracking */
  line-height: 1;
  background: var(--soon-card-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--soon-line);
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}
[dir="rtl"] .soon__lang { right: auto; left: 22px; }
.soon__lang-opt {
  padding-inline: 10px;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  line-height: 1;
  color: var(--soon-faint);
  transition: color 0.3s ease;
}
.soon__lang-sep {
  width: 1px; align-self: stretch;
  background: var(--soon-line);
}
/* Active language reads at full strength */
.soon__lang[data-active="ar"] [data-lang-opt="ar"],
.soon__lang[data-active="en"] [data-lang-opt="en"] { color: var(--soon-text); }
/* Hover previews the target: the language you would switch TO warms to the
   accent. The pill itself never inverts, so the active/inactive contrast
   survives every theme. */
.soon__lang:hover { border-color: var(--soon-accent); }
.soon__lang[data-active="ar"]:hover [data-lang-opt="en"],
.soon__lang[data-active="en"]:hover [data-lang-opt="ar"] { color: var(--soon-accent); }

.soon__inner {
  position: relative; width: 100%; max-width: 580px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.soon__logo { width: clamp(132px, 14vw, 190px); height: auto; margin-bottom: clamp(22px, 3.4vh, 34px); }
.soon__eyebrow { color: var(--soon-accent); letter-spacing: 0.32em; margin-bottom: 18px; }
.soon__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(42px, 7.2vw, 78px); line-height: 1.04;
  letter-spacing: -0.015em; text-wrap: balance;
  color: var(--soon-text);
  margin-bottom: 18px;
}
.soon__sub {
  font-size: clamp(14px, 1.35vw, 16.5px); line-height: 1.75;
  color: var(--soon-muted);
  max-width: 48ch; margin-bottom: clamp(26px, 4vh, 38px);
  text-wrap: pretty;
}

/* Glass lead card */
.soon__card {
  width: 100%;
  background: var(--soon-card-bg);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--soon-card-line);
  border-radius: 16px;
  box-shadow: 0 30px 80px var(--soon-shadow);
  padding: clamp(22px, 3vw, 32px);
  text-align: start;
}
.soon__card-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; color: var(--soon-text);
  text-align: center; margin-bottom: 20px;
}
/* Inputs sit on the glass card — lift them slightly off it */
.soon__card .fform__input,
.soon__card .fform__phone { background-color: var(--soon-input-bg); }

/* Pre-launch the lead form posts to the CRM only — there is no WhatsApp
   handoff — so the shared .fform__submit (WhatsApp green, green glow) is
   repainted in the teaser palette. Scoped to the card so the rest of the
   site's forms keep the green button when the full site returns. */
/* background-color, not the background shorthand: a shorthand carrying a
   var() is a pending-substitution value and does not reliably re-resolve
   when the theme swaps --soon-* underneath it. */
.soon__card .fform__submit {
  background-color: var(--soon-accent);
  background-image: none;
  border-color: var(--soon-accent);
  color: var(--soon-on-accent);
  box-shadow: 0 10px 28px var(--soon-shadow);
}
.soon__card .fform__submit:hover,
.soon__card .fform__submit:focus-visible {
  background-color: var(--soon-text);
  border-color: var(--soon-text);
  color: var(--soon-bg);
  box-shadow: 0 14px 36px var(--soon-shadow);
}
/* In flight to the CRM: the button waits for the response before the
   confirmation replaces the form */
.soon__card .fform__submit:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* Teaser CTA (pre-launch home) — the form lives on /register, so the home
   page carries a single button in place of the card. Bound to the --soon-*
   palette rather than the global button vars so it stays legible on all
   five themes, dark and light. */
.soon__cta {
  background-color: var(--soon-accent);
  background-image: none;
  border-color: var(--soon-accent);
  color: var(--soon-on-accent);
  padding-inline: clamp(34px, 5vw, 52px);
  box-shadow: 0 18px 44px var(--soon-shadow);
}
.soon__cta:hover, .soon__cta:focus-visible {
  background-color: var(--soon-text);
  border-color: var(--soon-text);
  color: var(--soon-bg);
}
.soon__cta svg { width: 17px; height: 17px; flex: 0 0 auto; }
[dir="rtl"] .soon__cta svg { transform: scaleX(-1); }

/* Back to the teaser (pre-launch /register) */
.soon__back { margin-top: clamp(20px, 3vh, 28px); }
.soon__back a {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--soon-faint); text-decoration: none;
  transition: color 0.3s ease;
}
.soon__back a:hover { color: var(--soon-accent); }
.soon__back svg { width: 15px; height: 15px; flex: 0 0 auto; }
[dir="rtl"] .soon__back svg { transform: scaleX(-1); }
[dir="rtl"] .soon__back a { letter-spacing: 0.06em; font-size: 12.5px; }

/* Countdown — hairline-divided units, serif numerals, micro labels.
   Numbers always read LTR (direction set on the strip); only the unit
   labels follow the site language. */
.soon__count {
  display: flex; align-items: stretch; justify-content: center;
  direction: ltr;
  margin-bottom: clamp(26px, 4vh, 38px);
  border-top: 1px solid var(--soon-line);
  border-bottom: 1px solid var(--soon-line);
}
.soon__count-cell {
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(12px, 1.8vh, 20px) clamp(18px, 3vw, 34px);
}
.soon__count-cell + .soon__count-cell { border-inline-start: 1px solid var(--soon-line); }
.soon__count-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1;
  color: var(--soon-text);
  font-variant-numeric: tabular-nums; /* no jitter as seconds tick */
}
.soon__count-unit {
  margin-top: 8px;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--soon-accent); opacity: 0.85;
}
[dir="rtl"] .soon__count-unit { letter-spacing: 0.08em; font-size: 11.5px; }

/* Social row below the form */
.soon__follow {
  margin-top: clamp(22px, 3vh, 30px);
  font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--soon-faint);
}
[dir="rtl"] .soon__follow { letter-spacing: 0.08em; font-size: 12px; }
.soon__social { display: flex; gap: 12px; margin-top: 14px; }
.soon__social a {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--soon-line);
  color: var(--soon-accent);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.soon__social a svg { width: 17px; height: 17px; }
.soon__social a:hover {
  background: var(--soon-accent); border-color: var(--soon-accent);
  color: var(--soon-on-accent); transform: translateY(-2px);
}

.soon__direct {
  margin-top: 22px;
  font-size: 13px; color: var(--soon-faint);
}
.soon__direct a {
  color: var(--soon-accent); text-decoration: none;
  border-bottom: 1px solid var(--soon-line);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.soon__direct a:hover { color: var(--soon-text); border-color: var(--soon-text); }

/* Bottom marquee — quiet, premium motion */
.soon__marquee {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-top: 1px solid var(--soon-line);
  padding: 15px 0;
  overflow: hidden; direction: ltr;
}
.soon__marquee-track {
  display: flex; width: max-content; white-space: nowrap;
  animation: soonMarquee 38s linear infinite;
}
.soon__marquee-track span {
  font-size: 11.5px; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--soon-faint);
  padding-inline: 1.4em;
}
.soon__marquee-track span::after { content: '·'; padding-inline-start: 2.8em; opacity: 0.5; }
@keyframes soonMarquee { to { transform: translateX(-50%); } }

/* ── Sage: same cinematic dark structure, green-cast ── */
[data-theme="sage"] .soon {
  --soon-bg: #10160F;
  --soon-card-bg: rgba(17, 24, 17, 0.6);
  --soon-veil:
    radial-gradient(120% 85% at 50% 18%, rgba(9, 13, 9, 0.2) 0%, rgba(9, 13, 9, 0.66) 58%, rgba(7, 10, 7, 0.92) 100%),
    linear-gradient(to bottom, rgba(7, 10, 7, 0.55) 0%, rgba(7, 10, 7, 0.3) 38%, rgba(7, 10, 7, 0.88) 100%);
}

/* ── Desert + "new": the site's light branding. Day render under a
     warm ivory veil; the tan logo is deepened to brand bronze ── */
[data-theme="desert"] .soon {
  --soon-bg: #F3EDE6;
  --soon-text: #593229;
  --soon-muted: rgba(42, 24, 19, 0.78);
  --soon-faint: rgba(42, 24, 19, 0.6);
  --soon-accent: #593229;
  --soon-on-accent: #F3EDE6;
  --soon-line: rgba(89, 50, 41, 0.36);
  --soon-card-bg: rgba(255, 253, 251, 0.92);
  --soon-card-line: rgba(89, 50, 41, 0.36);
  --soon-input-bg: rgba(89, 50, 41, 0.045);
  --soon-shadow: rgba(89, 50, 41, 0.22);
  --soon-veil:
    radial-gradient(120% 85% at 50% 18%, rgba(243, 237, 230, 0.18) 0%, rgba(243, 237, 230, 0.55) 58%, rgba(239, 232, 225, 0.85) 100%),
    linear-gradient(to bottom, rgba(243, 237, 230, 0.42) 0%, rgba(243, 237, 230, 0.28) 38%, rgba(243, 237, 230, 0.78) 100%);
}
[data-theme="desert"] .soon__bg--night { display: none; }
[data-theme="desert"] .soon__bg--day { display: block; filter: brightness(0.88) saturate(0.95); }
[data-theme="desert"] .soon__logo { filter: brightness(0.4) saturate(1.35); }
[data-theme="desert"] .soon__grain { opacity: 0.04; }

/* "new" skin: crisper, whiter plate over the desert base */
[data-skin="new"] .soon {
  --soon-bg: #FAF8F5;
  --soon-text: #593229;
  --soon-card-bg: rgba(255, 255, 255, 0.94);
  --soon-veil:
    radial-gradient(120% 85% at 50% 18%, rgba(250, 248, 245, 0.2) 0%, rgba(250, 248, 245, 0.58) 58%, rgba(250, 248, 245, 0.86) 100%),
    linear-gradient(to bottom, rgba(250, 248, 245, 0.44) 0%, rgba(250, 248, 245, 0.3) 38%, rgba(250, 248, 245, 0.8) 100%);
}

/* ── Luxe: the launch boulevard render with NO scrim. The card becomes
     a solid white plate on a deep soft shadow (elevated, floating over
     the scene); type gets a faint light halo instead of a veil.
     Runs on the desert base (data-theme="desert" + skin), so all light
     form styles apply unchanged. ── */
[data-skin="luxe"] .soon {
  --soon-bg: #E7DFD2; /* matches the render's plaza tone while it loads */
  --soon-text: #593229;
  --soon-muted: rgba(42, 24, 19, 0.86);
  --soon-faint: rgba(42, 24, 19, 0.64);
  --soon-line: rgba(89, 50, 41, 0.42);
  --soon-veil: none;
}
[data-skin="luxe"] .soon__bg--night, [data-skin="luxe"] .soon__bg--day { display: none; }
[data-skin="luxe"] .soon__bg--luxe { display: block; }
[data-skin="luxe"] .soon__grain { opacity: 0.03; }
[data-skin="luxe"] .soon__card {
  background: #ffffff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: rgba(89, 50, 41, 0.12);
  box-shadow:
    0 60px 120px rgba(26, 16, 10, 0.32),
    0 12px 30px rgba(26, 16, 10, 0.16);
}
/* Localised scrim: instead of veiling the whole render, a soft ellipse of
   light sits behind the text column only and fades out before it reaches
   the edges, so the boulevard stays uncovered but the copy holds up over
   the bright plaza. isolation keeps the negative z-index predictable
   against .soon's own background layers. */
[data-skin="luxe"] .soon__inner { isolation: isolate; }
[data-skin="luxe"] .soon__inner::before {
  content: '';
  position: absolute;
  inset: -7% -16% -9%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    68% 60% at 50% 50%,
    rgba(250, 248, 245, 0.80) 0%,
    rgba(250, 248, 245, 0.68) 46%,
    rgba(250, 248, 245, 0.38) 74%,
    rgba(250, 248, 245, 0) 100%);
  filter: blur(24px);
}
/* /register puts the opaque form card inside the same column, roughly
   doubling its height — so a centred ellipse lands behind the card, where
   it does nothing, and leaves the copy above it in the weak upper edge.
   There, the scrim covers the text region only and stops at the card. */
[data-skin="luxe"] .soon__inner:has(.soon__card)::before {
  inset: -8% -16% auto -16%;
  height: 58%;
  background: radial-gradient(
    74% 62% at 50% 44%,
    rgba(250, 248, 245, 0.82) 0%,
    rgba(250, 248, 245, 0.68) 48%,
    rgba(250, 248, 245, 0.34) 76%,
    rgba(250, 248, 245, 0) 100%);
}

/* A trace of the old halo stays on the lightest, thinnest type — the
   micro-labels sit outside the densest part of the ellipse. */
[data-skin="luxe"] .soon__count-unit,
[data-skin="luxe"] .soon__follow,
[data-skin="luxe"] .soon__back,
[data-skin="luxe"] .soon__direct {
  text-shadow: 0 0 10px rgba(250, 248, 245, 0.85);
}
[data-skin="luxe"] .soon__count { background: rgba(250, 248, 245, 0.28); }
[data-skin="luxe"] .soon__lang { background: rgba(255, 255, 255, 0.6); }
[data-skin="luxe"] .soon__social a { background: rgba(255, 255, 255, 0.55); }
[data-skin="luxe"] .soon__social a:hover { background: var(--soon-accent); }
[data-skin="luxe"] .soon__marquee { background: rgba(250, 248, 245, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

@media (prefers-reduced-motion: reduce) {
  .soon__bg, .soon__marquee-track { animation: none; }
}
@media (max-width: 640px) {
  .soon { padding-bottom: 100px; }
  .soon__lang { top: 14px; right: 14px; padding: 8px 3px; }
  [dir="rtl"] .soon__lang { right: auto; left: 14px; }
  .soon__lang-opt { padding-inline: 9px; font-size: 10px; }
}
/* Short laptop viewports: tighten the vertical rhythm so the pitch +
   full form (incl. submit) fit without scrolling */
@media (min-width: 641px) and (max-height: 1050px) {
  .soon { padding-top: 34px; padding-bottom: 92px; }
  .soon__logo { width: 100px; margin-bottom: 14px; }
  .soon__eyebrow { margin-bottom: 12px; }
  .soon__title { font-size: clamp(36px, 6.2vh, 56px); margin-bottom: 12px; }
  .soon__sub { font-size: 14px; margin-bottom: 20px; }
  .soon__count { margin-bottom: 18px; }
  .soon__count-cell { padding: 10px 22px; }
  .soon__count-num { font-size: 28px; }
  .soon__card { padding: 20px 24px; }
  .soon__card-title { margin-bottom: 14px; }
  .soon__card .fform { gap: 13px; }
  .soon__follow { margin-top: 16px; }
  .soon__social { margin-top: 10px; }
  .soon__social a { width: 38px; height: 38px; }
  .soon__direct { margin-top: 14px; }
}