@charset "utf-8";
/* ==========================================================================
   NOVA · Fox Hills C04 · Lusail, Qatar
   Presented by RIO Real Estate
   ---------------------------------------------------------------------------
   Editorial Restraint. Four navy page-turns, gold as hairline only,
   prose never centred. Logical properties throughout so RTL mirrors itself.
   ========================================================================== */

/* ==========================================================================
   01 · TOKENS
   ========================================================================== */

:root {
  /* --- Ground ---------------------------------------------------------- */
  --navy-deep: #0B1422;   /* Hero · Handover · Colophon                     */
  --navy:      #101B2D;   /* Nav condensed over navy                        */
  --navy-soft: #0F1828;   /* Terms ground                                   */
  --cream:     #F5F0E6;   /* Residences · Amenities ground; text on navy    */
  --cream-hi:  #FBF7EE;   /* Default page ground                            */

  /* --- Accent ---------------------------------------------------------- */
  --gold:      #C6A15B;   /* hairlines, numerals on navy, focus ring        */
  --gold-lt:   #D5B067;   /* hover of gold text only                        */
  --gold-pale: #E9D3A0;   /* badge text + display numerals on navy          */

  /* --- Ink ------------------------------------------------------------- */
  --ink:       #2E2C26;   /* body on cream — 12.1:1                         */
  --muted:     #846937;   /* kickers, captions, index — 4.8/4.6:1 on creams */
  --focus:     #846937;   /* focus ring — 4.8:1 on cream, 3.3:1 on navy     */
  --error:     #8A2E2E;

  /* --- Derived alphas (gold is NEVER a fill) --------------------------- */
  --hair:        rgba(198, 161, 91, .40);
  --hair-soft:   rgba(198, 161, 91, .22);
  --hair-ink:    rgba(46, 44, 38, .22);
  --hair-cream:  rgba(245, 240, 230, .26);
  --scrim-navy:  rgba(11, 20, 34, .55);

  /* --- Type families (swapped wholesale for Arabic) -------------------- */
  --font-display: 'Cormorant Garamond', 'Hoefler Text', Garamond, 'Times New Roman', Times, serif;
  --font-sans:    'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-num:     'Playfair Display', Georgia, 'Times New Roman', Times, serif;
  --font-arabic:  'Tajawal', system-ui, 'Segoe UI', Tahoma, 'Geeza Pro', sans-serif;

  /* --- Type scale ------------------------------------------------------ */
  --fs-h1:        clamp(42px, 6.2vw, 104px);
  --fs-handover:  clamp(34px, 5.4vw, 82px);
  --fs-h2:        clamp(32px, 4vw, 64px);
  --fs-h3:        clamp(20px, 1.6vw, 26px);
  --fs-kicker:    clamp(10px, .8vw, 11px);
  --fs-body:      clamp(16px, 1.1vw, 17px);
  --fs-caption:   clamp(11px, .85vw, 12px);
  --fs-stat:      clamp(48px, 6vw, 92px);
  --fs-term:      clamp(56px, 6.6vw, 104px);
  --fs-index:     11px;

  /* --- Tracking (zeroed for Arabic) ------------------------------------ */
  --tr-h1:      .12em;
  --tr-handover:.14em;
  --tr-h2:      .10em;
  --tr-h3:      .06em;
  --tr-kicker:  3.5px;
  --tr-caption: 1.4px;
  --tr-index:   .3em;
  --tr-btn:     2.4px;

  /* --- Leading --------------------------------------------------------- */
  --lh-body: 1.75;
  --lh-h1:   1.02;
  --lh-h2:   1.15;
  --lh-h3:   1.30;

  /* Arabic display sizes ride at 0.94x; 1 in Latin. */
  --ar-scale: 1;
  /* Arabic text-transform / letter-spacing kill-switch, see §02b */
  --ar-case: uppercase;

  /* --- Spacing · 8px baseline ------------------------------------------ */
  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  40px;
  --s-6:  48px;
  --s-8:  64px;
  --s-10: 80px;
  --s-12: 96px;
  --s-16: 128px;
  --s-20: 160px;
  --s-25: 200px;

  --gutter:      24px;
  --pad-section: 88px;
  --max-outer:   1560px;
  --max-content: 1180px;
  --measure:     62ch;
  --nav-h:       96px;
  --nav-h-min:   64px;

  /* --- Motion ---------------------------------------------------------- */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-count: cubic-bezier(.22, 1, .36, 1);
  --t-reveal:   900ms;
  --t-rule:     1100ms;
  --t-nav:      400ms;
  --t-hover:    240ms;

  /* Directional origin — the one thing logical properties cannot express. */
  --origin-x: left;

  /* Set by JS. Kept here so the page is sane before/without script. */
  --parallax: 0px;
  --progress: 0;

  color-scheme: light;
}

html[dir="rtl"] { --origin-x: right; }

/* ==========================================================================
   02 · RESET
   ========================================================================== */

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

/* The hidden attribute must always win, even over an authored display. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--nav-h-min) + var(--s-3));
}

body {
  margin: 0;
  background: var(--cream-hi);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: start;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul, fieldset, legend {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

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

img { height: auto; border-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}

button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }

fieldset { border: 0; min-inline-size: 0; }

legend { padding: 0; }

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

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   02b · ARABIC — swap the stack, kill the tracking, kill the casing
   ========================================================================== */

html[lang="ar"] {
  --font-display: var(--font-arabic);
  --font-sans:    var(--font-arabic);
  /* --font-num stays Playfair: numerals are Western in both languages. */
  --lh-body: 1.9;
  --ar-scale: .94;
  --ar-case: none;

  --tr-h1: 0;
  --tr-handover: 0;
  --tr-h2: 0;
  --tr-h3: 0;
  --tr-kicker: 0;
  --tr-caption: 0;
  --tr-index: .18em;   /* index digits are ASCII; a little air is fine */
  --tr-btn: 0;
}

/* Belt and braces: nothing Arabic is ever tracked or upper-cased. */
html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] p, html[lang="ar"] li, html[lang="ar"] a,
html[lang="ar"] th, html[lang="ar"] td, html[lang="ar"] dt, html[lang="ar"] dd,
html[lang="ar"] label, html[lang="ar"] input, html[lang="ar"] button,
html[lang="ar"] .kicker, html[lang="ar"] .caption, html[lang="ar"] .btn {
  letter-spacing: 0;
  text-transform: none;
}
html[lang="ar"] { font-weight: 400; }
html[lang="ar"] .kicker,
html[lang="ar"] .sec-index,
html[lang="ar"] .btn { font-weight: 500; }

/* The section index numerals stay ASCII and Latin-ordered in both languages. */
.sec-index__num,
.stat__num, .term__num, .mixtable__count,
.num, .ltr-lock {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ==========================================================================
   03 · UTILITIES
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Numerals, phone numbers, coordinates, measurements: never enter the bidi
   algorithm unisolated. */
.ltr-lock {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

.bidi-auto { unicode-bidi: isolate; }

.num {
  font-family: var(--font-num);
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Photographs, plans and wordmarks are geography and identity. Never flip.
   (Scoped to .no-mirror only — a blanket `img { transform:none }` would fight
   the ken-burns keyframes.) */
html[dir="rtl"] .no-mirror,
html[dir="rtl"] img { transform: none; }

/* Glyph-only mirroring (arrows, chevrons). */
html[dir="rtl"] .mirror { transform: scaleX(-1); }

.skiplink {
  position: fixed;
  inset-block-start: var(--s-1);
  inset-inline-start: var(--s-1);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--navy-deep);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tr-caption);
  text-transform: var(--ar-case);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hair);
}
.skiplink:focus-visible { transform: translateY(0); }

/* --- No-JS fallback · the page is JS-rendered, so give a readable minimum -- */
.noscript {
  max-inline-size: 40rem;
  margin: 0 auto;
  padding: 18vh var(--gutter) 6vh;
  text-align: center;
  color: var(--ink);
  font-family: var(--font-sans);
}
.noscript__brand {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: .22em;
  color: var(--navy);
}
.noscript__place {
  margin-block-start: var(--s-2);
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .04em;
}
.noscript__body {
  margin-block-start: var(--s-4);
  line-height: 1.7;
}
.noscript__contact {
  margin-block-start: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: center;
}
.noscript__contact a { color: var(--navy); border-block-end: 1px solid var(--hair); }

/* ==========================================================================
   04 · TYPE ROLES
   ========================================================================== */

.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--fs-h2) * var(--ar-scale));
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  text-transform: var(--ar-case);
  color: var(--ink);
  text-wrap: balance;
  margin-block-start: var(--s-2);
}
.h2--invert { color: var(--cream); }

.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(var(--fs-h3) * var(--ar-scale));
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  color: var(--ink);
}
.h3--invert { color: var(--cream); }

.kicker {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-kicker);
  line-height: 1.4;
  letter-spacing: var(--tr-kicker);
  text-transform: var(--ar-case);
  color: var(--muted);
}
.kicker--invert { color: var(--gold); }

.prose {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  max-inline-size: var(--measure);
  text-align: start;   /* body copy is never centred */
  margin-block-start: var(--s-3);
}
.prose--invert { color: var(--cream); }

.caption {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-caption);
  line-height: 1.6;
  letter-spacing: var(--tr-caption);
  color: var(--muted);
  max-inline-size: 48ch;
}
.caption--invert { color: var(--gold); }

/* Gold hairline rule under a heading — draws from the inline start. */
.rule {
  display: block;
  inline-size: 88px;
  block-size: 1px;
  background: var(--gold);
  opacity: .8;
  margin-block-start: var(--s-3);
  transform: scaleX(1);
  transform-origin: var(--origin-x) center;
}
.rule--invert { background: var(--gold); opacity: 1; }

/* Only animate the draw once JS is present to fire it. */
html.js .rule {
  transform: scaleX(0);
  transition: transform var(--t-rule) var(--ease-out) 200ms;
}
html.js .rule.is-visible,
html.js .is-visible > .rule,
html.js .is-visible .rule { transform: scaleX(1); }

/* --- Section index · 01 — THRESHOLD --------------------------------------- */

.sec-index {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-index);
  line-height: 1.4;
  letter-spacing: var(--tr-index);
  text-transform: var(--ar-case);
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  margin-block-end: var(--s-4);
}
.sec-index--invert { color: var(--gold); }

.sec-index__num {
  font-family: var(--font-sans);
  direction: ltr;
  unicode-bidi: isolate;
}
.sec-index__num::after {
  content: "—";
  margin-inline-start: var(--s-1);
  opacity: .7;
}

/* ==========================================================================
   05 · BUTTONS · 1px outline, transparent ground. Gold is never a fill.
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(11px, .85vw, 12px);
  line-height: 1;
  letter-spacing: var(--tr-btn);
  text-transform: var(--ar-case);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: var(--s-2) var(--s-4);
  text-align: center;
  cursor: pointer;
  transition:
    color var(--t-hover) var(--ease-out),
    border-color var(--t-hover) var(--ease-out),
    opacity var(--t-hover) var(--ease-out);
}
.btn:hover,
.btn:focus-visible {
  color: var(--muted);
  border-color: var(--muted);
}
.btn:active { opacity: .78; }

.btn--invert {
  color: var(--cream);
  border-color: var(--cream);
}
.btn--invert:hover,
.btn--invert:focus-visible {
  color: var(--gold-lt);
  border-color: var(--gold-lt);
}

.btn--ghost { border-color: var(--hair-cream); }
.btn--ghost:hover,
.btn--ghost:focus-visible { border-color: var(--gold-lt); }

.btn--submit {
  inline-size: 100%;
  padding-block: var(--s-3);
  margin-block-start: var(--s-5);
}
@media (min-width: 560px) {
  .btn--submit { inline-size: auto; min-inline-size: 260px; }
}
.btn[disabled],
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ==========================================================================
   06 · SCROLL PROGRESS · 1px gold, transform only, frame-driven (no transition)
   ========================================================================== */

.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  z-index: 120;
  pointer-events: none;
  background: transparent;
}
.progress__bar {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  background: var(--gold);
  transform: scaleX(var(--progress, 0));
  transform-origin: var(--origin-x) center;
  will-change: transform;
}

/* ==========================================================================
   07 · NAV
   ========================================================================== */

.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  background: transparent;
  border-block-end: 1px solid transparent;
  /* Only compositor-cheap properties are animated. block-size and
     backdrop-filter used to be in here and each cost a layout/filter pass
     every scroll frame; the bar now snaps its height and blur, and fades
     only its ground and hairline. */
  transition:
    background-color var(--t-nav) var(--ease-out),
    border-color var(--t-nav) var(--ease-out);
}

.nav__inner {
  inline-size: 100%;
  max-inline-size: var(--max-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
  block-size: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

/* Condensed. JS may use either class name. */
.nav.is-condensed,
.nav.is-scrolled {
  background: rgba(251, 247, 238, .94);
  border-block-end-color: var(--hair-soft);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nav.is-condensed .nav__inner,
.nav.is-scrolled .nav__inner { block-size: var(--nav-h-min); }

.nav__brand {
  display: block;
  position: relative;
  flex: 0 0 auto;
  line-height: 0;
}
.nav__mark {
  inline-size: auto;
  block-size: clamp(28px, 3vw, 38px);
  transition: opacity var(--t-nav) var(--ease-out);
}
.nav__mark--gold {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: 0;
}
.nav.is-condensed .nav__mark--cream,
.nav.is-scrolled .nav__mark--cream { opacity: 0; }
.nav.is-condensed .nav__mark--gold,
.nav.is-scrolled .nav__mark--gold { opacity: 1; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-3), 2.2vw, var(--s-6));
}
.nav__list a {
  position: relative;
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: var(--ar-case);
  color: var(--cream);
  padding-block: var(--s-1);
  transition: color var(--t-hover) var(--ease-out);
}
.nav.is-condensed .nav__list a,
.nav.is-scrolled .nav__list a { color: var(--ink); }
.nav__list a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: var(--origin-x) center;
  transition: transform var(--t-hover) var(--ease-out);
}
.nav__list a:hover,
.nav__list a:focus-visible { color: var(--gold-lt); }
.nav.is-condensed .nav__list a:hover,
.nav.is-scrolled .nav__list a:hover { color: var(--muted); }
.nav__list a:hover::after,
.nav__list a:focus-visible::after { transform: scaleX(1); }

.nav__aside {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 0 0 auto;
}

.nav__phone {
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--cream);
  transition: color var(--t-hover) var(--ease-out);
}
.nav.is-condensed .nav__phone,
.nav.is-scrolled .nav__phone { color: var(--ink); }
.nav__phone:hover { color: var(--gold-lt); }

/* --- Language switch ----------------------------------------------------- */

.langswitch {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--hair-cream);
  transition: border-color var(--t-nav) var(--ease-out);
}
.nav.is-condensed .langswitch,
.nav.is-scrolled .langswitch { border-color: var(--hair-ink); }

.langswitch__btn {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: none;
  color: var(--cream);
  opacity: .58;
  padding: 7px 12px;
  transition: opacity var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.langswitch__btn + .langswitch__btn { border-inline-start: 1px solid var(--hair-cream); }
.nav.is-condensed .langswitch__btn,
.nav.is-scrolled .langswitch__btn { color: var(--ink); }
.nav.is-condensed .langswitch__btn + .langswitch__btn,
.nav.is-scrolled .langswitch__btn + .langswitch__btn { border-inline-start-color: var(--hair-ink); }
.langswitch__btn:hover { opacity: .9; }
.langswitch__btn[aria-pressed="true"] { opacity: 1; }
.nav.is-condensed .langswitch__btn[aria-pressed="true"],
.nav.is-scrolled .langswitch__btn[aria-pressed="true"] { color: var(--muted); }
.langswitch__btn[data-lang="ar"] { font-family: var(--font-arabic); font-size: 12px; letter-spacing: 0; }

/* --- Mobile toggle ------------------------------------------------------- */

.nav__toggle {
  display: none;
  inline-size: 40px;
  block-size: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.nav__toggle-bar {
  display: block;
  inline-size: 22px;
  block-size: 1px;
  background: var(--cream);
  transition: transform var(--t-nav) var(--ease-out), opacity var(--t-nav) var(--ease-out);
}
.nav.is-condensed .nav__toggle-bar,
.nav.is-scrolled .nav__toggle-bar { background: var(--ink); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* ==========================================================================
   08 · SECTION SHELL & 12-COLUMN GRID
   ========================================================================== */

.section {
  position: relative;
  padding-block: var(--pad-section);
}
.section--cream    { background: var(--cream); }
.section--cream-hi { background: var(--cream-hi); }

.section__grid {
  inline-size: 100%;
  max-inline-size: var(--max-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-8);
  align-items: start;
}

/* Below 1280 everything is a single column; the index sits inline above. */
.section__grid > * { grid-column: 1 / -1; }

/* ==========================================================================
   09 · 01 · THRESHOLD (hero) — navy
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  min-block-size: 100vh;   /* fallback first … */
  min-block-size: 100svh;  /* … then the small-viewport unit where supported */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--navy-deep);
  overflow: hidden;
  padding-block-start: var(--nav-h);
  padding-block-end: clamp(var(--s-12), 12vh, var(--s-20));
}

.hero__media {
  position: absolute;
  inset: -8% 0 -8% 0;
  z-index: -2;
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}
.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* The one dissolve we keep: hero resolves into the Handover band. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(11, 20, 34, .62) 0%,
      rgba(11, 20, 34, .30) 30%,
      rgba(11, 20, 34, 0)   55%,
      var(--navy-deep)      100%),
    linear-gradient(to bottom, rgba(11, 20, 34, .25), rgba(11, 20, 34, .25));
}

.hero__inner {
  inline-size: 100%;
  max-inline-size: var(--max-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__title { margin: 0; line-height: 0; }

.hero__wordmark {
  inline-size: auto;
  block-size: clamp(64px, 11vw, 156px);
  margin-block: var(--s-3) var(--s-4);
}

.hero__tagline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(clamp(26px, 3vw, 46px) * var(--ar-scale));
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  text-transform: var(--ar-case);
  color: var(--cream);
  max-inline-size: 22ch;
}

.hero__place {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: var(--tr-caption);
  text-transform: var(--ar-case);
  color: var(--gold-pale);
  margin-block-start: var(--s-2);
}

/* THE OFFER. Legible at t=0, never revealed, never animated. */
.hero__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(clamp(15px, 1.5vw, 21px) * var(--ar-scale));
  line-height: 1.2;
  letter-spacing: var(--tr-handover);
  text-transform: var(--ar-case);
  color: var(--gold-pale);
  background: transparent;
  border: 1px solid var(--hair);
  padding: var(--s-2) var(--s-3);
  margin-block-start: var(--s-5);
}

.hero__cues {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-6);
}

.scrollcue {
  position: absolute;
  inset-block-end: var(--s-4);
  inset-inline-end: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  color: var(--gold);
}
.scrollcue__label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: var(--tr-kicker);
  text-transform: var(--ar-case);
  writing-mode: vertical-rl;
}
html[dir="rtl"] .scrollcue__label { writing-mode: vertical-rl; }
.scrollcue__arrow {
  inline-size: 1px;
  block-size: 44px;
  background: linear-gradient(to bottom, var(--gold), rgba(198, 161, 91, 0));
}

@media (max-width: 767px) { .scrollcue { display: none; } }

/* ==========================================================================
   10 · 02 · HANDOVER band — navy. Never animated.
   ========================================================================== */

.handover {
  background: var(--navy-deep);
  border-block: 1px solid var(--hair);
  padding-block: clamp(var(--s-6), 6vw, var(--s-10));
  overflow: hidden;
}

/* The one message the client wants impossible to miss, set moving. The band is
   bilingual BY DESIGN — both languages ride the same track whichever language
   the page is in — so the strip itself never re-renders on a switch. Geometry
   is forced LTR so the two duplicated halves tile identically under RTL. */
.marquee {
  direction: ltr;
  inline-size: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  inline-size: max-content;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee__seq {
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
}
.marquee__item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 68px);
  line-height: 1.15;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-pale);
  white-space: nowrap;
  padding-inline: clamp(20px, 2.6vw, 44px);
}
.marquee__item--ar {
  font-family: var(--font-arabic);
  letter-spacing: 0;
}
.marquee__star {
  color: var(--gold);
  font-size: clamp(14px, 1.6vw, 24px);
  align-self: center;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.handover__sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-caption);
  text-transform: var(--ar-case);
  color: var(--cream);
  margin-block-start: clamp(var(--s-4), 4vw, var(--s-6));
  margin-inline: auto;
  padding-inline: var(--gutter);
  max-inline-size: 56ch;
  text-align: center;
}

/* ==========================================================================
   11 · 03 · OVERTURE
   ========================================================================== */

.overture__figure img {
  inline-size: 100%;
  aspect-ratio: 1080 / 1240;
  object-fit: cover;
}
.overture__text .caption { margin-block-start: var(--s-4); }

/* ==========================================================================
   12 · 04 · THE REGISTER (counters)
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--s-6) var(--s-4);
  border-block-start: 1px solid var(--hair);
  padding-block-start: var(--s-6);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  border-inline-start: 1px solid var(--hair-soft);
  padding-inline-start: var(--s-3);
}

.stat__num {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--ink);
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums lining-nums;
}
/* Reserve the width so counting never reflows the row. */
.stat__num[data-count-chars="1"] { min-inline-size: 1ch; }
.stat__num[data-count-chars="2"] { min-inline-size: 2ch; }
.stat__num[data-count-chars="3"] { min-inline-size: 3ch; }
.stat__num--static { font-size: calc(var(--fs-stat) * .56); letter-spacing: .02em; }

.stat__label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: 1.5;
  letter-spacing: var(--tr-caption);
  text-transform: var(--ar-case);
  color: var(--muted);
}

/* ==========================================================================
   13 · 05 · RESIDENCES — unit mix as a typographic table
   ========================================================================== */

.mixtable__table caption { text-align: start; }

.mixtable__table thead th {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-kicker);
  letter-spacing: var(--tr-kicker);
  text-transform: var(--ar-case);
  color: var(--muted);
  text-align: start;
  padding-block-end: var(--s-2);
  border-block-end: 1px solid var(--hair);
}
.mixtable__table thead th:last-child { text-align: end; }

.mixtable__table tbody th {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(clamp(19px, 1.5vw, 24px) * var(--ar-scale));
  line-height: 1.4;
  letter-spacing: var(--tr-h3);
  text-transform: var(--ar-case);
  color: var(--ink);
  text-align: start;
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--hair-ink);
}

.mixtable__count {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1;
  color: var(--ink);
  text-align: end;
  padding-block: var(--s-3);
  padding-inline-start: var(--s-3);
  border-block-end: 1px solid var(--hair-ink);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.mixtable .caption { margin-block-start: var(--s-3); }

/* Shared figure treatment. No lift, no scale, no shadow. */
.figure { margin: 0; }
.figure img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: opacity var(--t-hover) var(--ease-out);
}
.figure:hover img { opacity: .88; }
.figure .caption,
.figure figcaption {
  display: block;
  margin-block-start: var(--s-2);
  padding-block-start: var(--s-2);
  border-block-start: 1px solid var(--hair-soft);
}

.residences__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
}

/* ==========================================================================
   14 · 06 · AMENITIES
   ========================================================================== */

.amenities__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 var(--s-6);
  border-block-start: 1px solid var(--hair);
}
.amenities__list li {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: var(--ink);
  padding-block: var(--s-2);
  border-block-end: 1px solid var(--hair-ink);
  padding-inline-start: var(--s-3);
  position: relative;
}
.amenities__list li::before {
  content: "";
  position: absolute;
  inset-block-start: 1.05em;
  inset-inline-start: 0;
  inline-size: 8px;
  block-size: 1px;
  background: var(--gold);
}

.amenities__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
}

@media (min-width: 900px) {
  .amenities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   15 · PLATES — full bleed, no text
   ========================================================================== */

.plate {
  position: relative;
  inline-size: 100%;
  overflow: hidden;
  background: var(--navy-deep);
}
.plate img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.plate--i  { block-size: 68vh; min-block-size: 320px; }
.plate--ii { block-size: 52vh; min-block-size: 260px; }

/* ==========================================================================
   16 · 07 · THE DISTRICT
   ========================================================================== */

.district__map img {
  inline-size: 100%;
  aspect-ratio: 1528 / 1029;
  object-fit: cover;
  border: 1px solid var(--hair);
}
.district__map figcaption {
  display: block;
  margin-block-start: var(--s-2);
}

.landmarks__list {
  margin-block-start: var(--s-4);
  border-block-start: 1px solid var(--hair);
}
.landmark {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: var(--s-2);
  border-block-end: 1px solid var(--hair-ink);
}
.landmark__name {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.5;
  color: var(--ink);
}
.landmark__value {
  font-family: var(--font-num);
  font-size: clamp(13px, 1vw, 15px);
  color: var(--muted);
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

.landmarks .caption { margin-block-start: var(--s-2); }

/* Facts (land area, coordinates, contact rows) */
.facts {
  margin-block-start: var(--s-5);
  display: grid;
  gap: var(--s-3);
}
.fact { display: block; }
.fact__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-kicker);
  letter-spacing: var(--tr-kicker);
  text-transform: var(--ar-case);
  color: var(--muted);
}
.fact__value {
  font-family: var(--font-num);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.5;
  color: var(--ink);
  margin-block-start: 6px;
  font-variant-numeric: tabular-nums lining-nums;
}
.fact__value a { transition: color var(--t-hover) var(--ease-out); }
.fact__value a:hover { color: var(--muted); }

.district__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}
.district__strip img { aspect-ratio: 1 / 1; }

/* ==========================================================================
   17 · 08 · THE TERMS — navy
   ========================================================================== */

.terms {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-soft);
  padding-block: var(--pad-section);
}
.terms__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .14;
  pointer-events: none;
}
.terms__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.terms::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(15, 24, 40, .55), rgba(15, 24, 40, .85));
  pointer-events: none;
}

.terms__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(clamp(14px, 1.3vw, 18px) * var(--ar-scale));
  letter-spacing: var(--tr-handover);
  text-transform: var(--ar-case);
  color: var(--gold-pale);
  border: 1px solid var(--hair);
  padding: 10px var(--s-3);
  margin-block-start: var(--s-4);
}

.terms__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-6) var(--s-4);
  border-block-start: 1px solid var(--hair);
  padding-block-start: var(--s-6);
}
.term {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  border-inline-start: 1px solid var(--hair-soft);
  padding-inline-start: var(--s-3);
}
.term__num {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: var(--fs-term);
  line-height: 1;
  color: var(--gold-pale);
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums lining-nums;
}
.term__label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: 1.6;
  letter-spacing: var(--tr-caption);
  text-transform: var(--ar-case);
  color: var(--cream);
  max-inline-size: 30ch;
}

.terms__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}
.terms__foot .prose { margin-block-start: 0; }

/* ==========================================================================
   18 · 09 · REGISTER INTEREST + FORM
   ========================================================================== */

.register__plate {
  padding: var(--s-2);
  border: 1px solid var(--hair);
}
.register__plate img {
  inline-size: 100%;
  aspect-ratio: 1671 / 941;
  object-fit: cover;
}

.register__badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-kicker);
  letter-spacing: var(--tr-kicker);
  text-transform: var(--ar-case);
  color: var(--muted);
  border: 1px solid var(--hair);
  padding: 10px var(--s-2);
  margin-block-start: var(--s-4);
}

.form { margin-block-start: var(--s-6); }
.form__set { display: grid; gap: var(--s-5); }

.field { display: block; }

.field__label {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-kicker);
  letter-spacing: var(--tr-kicker);
  text-transform: var(--ar-case);
  color: var(--muted);
  margin-block-end: var(--s-2);
}
.field__req { color: var(--error); font-size: 1em; }

.field__hint {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--muted);
  margin-block-end: var(--s-2);
}

.field__input {
  inline-size: 100%;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--hair-ink);
  border-inline-start: 1px solid transparent;
  border-radius: 0;
  padding: var(--s-2) 0;
  appearance: none;
  transition:
    border-color var(--t-hover) var(--ease-out),
    padding-inline-start var(--t-hover) var(--ease-out);
}
.field__input::placeholder { color: rgba(46, 44, 38, .38); }
.field__input:hover { border-block-end-color: var(--muted); }
.field__input:focus { outline: none; border-block-end-color: var(--gold); }
.field__input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* +974 prefix sits with the field, sharing one hairline. */
.field__group {
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
  border-block-end: 1px solid var(--hair-ink);
  transition: border-color var(--t-hover) var(--ease-out);
}
.field__group:hover { border-block-end-color: var(--muted); }
.field__group:focus-within { border-block-end-color: var(--gold); }
.field__prefix {
  display: flex;
  align-items: center;
  font-family: var(--font-num);
  font-size: clamp(15px, 1.05vw, 17px);
  color: var(--muted);
  padding-inline-end: var(--s-2);
  border-inline-end: 1px solid var(--hair-ink);
  white-space: nowrap;
  user-select: none;
}
.field__group .field__input { border-block-end: 0; }
.field__input--tel {
  direction: ltr;
  text-align: start;
  font-family: var(--font-num);
  letter-spacing: .04em;
}

/* --- Error state · never colour alone (border + text + icon-glyph) -------- */
.field__input[aria-invalid="true"] {
  border-block-end-color: var(--error);
  border-inline-start: 1px solid var(--error);
  padding-inline-start: var(--s-2);
}
/* Kept in its own rule: an unsupported :has() invalidates the whole selector
   list, which would take the rule above down with it. */
.field__group:has(.field__input[aria-invalid="true"]) {
  border-block-end-color: var(--error);
}

.field__err {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--error);
  border-inline-start: 1px solid var(--error);
  padding-inline-start: var(--s-2);
  margin-block-start: var(--s-2);
}
.field__err[hidden] { display: none; }
/* Never colour alone: the border and this glyph carry the error too. */
.field__err::before {
  content: "!";
  font-weight: 500;
  margin-inline-end: 6px;
}

.form__privacy { margin-block-start: var(--s-3); max-inline-size: 52ch; }

.form__status {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--muted);
  margin-block-start: var(--s-3);
}
.form__status:empty { margin-block-start: 0; }

/* --- Success panel · honest copy, hairline frame -------------------------- */
.success {
  margin-block-start: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--hair);
  background: rgba(198, 161, 91, .05);
}
.success[hidden] { display: none; }
.success .prose { max-inline-size: 56ch; }
.success__contacts {
  margin-block-start: var(--s-5);
  display: grid;
  gap: var(--s-3);
}
@media (min-width: 640px) {
  .success__contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.success__contacts a { border-block-end: 1px solid var(--hair); }
.success__contacts a:hover { color: var(--muted); border-block-end-color: var(--muted); }
.success .btn { margin-block-start: var(--s-5); }

/* ==========================================================================
   19 · 10 · COLOPHON — navy
   ========================================================================== */

.colophon {
  background: var(--navy-deep);
  color: var(--cream);
  padding-block: clamp(var(--s-10), 9vw, var(--s-16));
  border-block-start: 1px solid var(--hair);
}
.colophon .section__grid { row-gap: var(--s-8); }

/* The sign-off is a colophon, not a section display: it must sit inside its
   three grid columns, not sprawl across the neighbouring nav. */
.colophon__brand .h2 {
  font-size: calc(clamp(24px, 2vw, 34px) * var(--ar-scale));
  line-height: 1.25;
}

.colophon__mark {
  inline-size: auto;
  block-size: 44px;
  margin-block-end: var(--s-3);
}
.colophon__brand .caption { margin-block-start: var(--s-2); }

.colophon__nav ul { margin-block-start: var(--s-3); display: grid; gap: 10px; }
.colophon__nav a {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: var(--ar-case);
  color: var(--cream);
  transition: color var(--t-hover) var(--ease-out);
}
.colophon__nav a:hover,
.colophon__nav a:focus-visible { color: var(--gold-lt); }

.colophon__contact .facts,
.colophon__meta .facts { margin-block-start: var(--s-3); }
.colophon .fact__label { color: var(--gold); }
.colophon .fact__value { color: var(--cream); }
.colophon .fact__value a:hover { color: var(--gold-lt); }

.colophon__presented { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.colophon__rio { inline-size: auto; block-size: 52px; }

.colophon__legal { border-block-start: 1px solid var(--hair-soft); padding-block-start: var(--s-4); }
.colophon__legal-h { margin-block-end: var(--s-2); }
.colophon__legal .caption { max-inline-size: 78ch; }
.colophon__legal .caption + .caption { margin-block-start: var(--s-2); }

.colophon__top {
  justify-self: start;
  align-self: end;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: var(--tr-kicker);
  text-transform: var(--ar-case);
  color: var(--gold);
  border-block-end: 1px solid var(--hair);
  padding-block-end: 6px;
  transition: color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.colophon__top:hover { color: var(--gold-lt); border-block-end-color: var(--gold-lt); }

/* ==========================================================================
   20 · MOTION · transform / opacity / filter only
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
}
html.js .reveal {
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
}
.reveal.is-visible,
.reveal.is-in {
  opacity: 1;
  transform: none;
}
/* If script never runs, nothing is hidden. */
html:not(.js) .reveal { opacity: 1; transform: none; }

/* 90ms stagger, expressed declaratively so JS need not touch style. */
.reveal[data-reveal-delay="90"]  { transition-delay:  90ms; }
.reveal[data-reveal-delay="180"] { transition-delay: 180ms; }
.reveal[data-reveal-delay="270"] { transition-delay: 270ms; }
.reveal[data-reveal-delay="360"] { transition-delay: 360ms; }
.reveal[data-reveal-delay="450"] { transition-delay: 450ms; }

@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.kenburns {
  animation: kenburns 20s linear infinite alternate;
  transform-origin: center center;
}

/* ==========================================================================
   20b · NAV CTA · the brochure, one gold pill in the bar
   ========================================================================== */

.nav__list .nav__cta {
  border: 1px solid var(--gold);
  padding: 7px 14px;
  color: var(--gold-pale);
}
.nav__list .nav__cta::after { content: none; }
.nav.is-condensed .nav__list .nav__cta,
.nav.is-scrolled  .nav__list .nav__cta { color: var(--muted); border-color: var(--muted); }
.nav__list .nav__cta:hover,
.nav__list .nav__cta:focus-visible { color: var(--gold-lt); border-color: var(--gold-lt); }

/* ==========================================================================
   20c · SPLIT HEADINGS · words rise out of their own line-box
   --------------------------------------------------------------------------
   JS wraps each word of a [data-split] heading in .sw > .swi. Until the
   parent earns .is-visible the inner span waits below its clip; then the
   words rise in sequence (delays inline, set by JS). Reduced motion and
   scriptless pages never hide a word.
   ========================================================================== */

.sw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-block-end: .08em;      /* descenders survive the clip */
  margin-block-end: -.08em;
}
.swi {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 820ms var(--ease-out);
  transition-delay: var(--sw-delay, 0ms);
}
.is-visible .swi { transform: translateY(0); }

/* ==========================================================================
   20d · CLIP REVEALS · images unveil, not fade
   ========================================================================== */

html.js .figure--clip { clip-path: inset(12% 6% 12% 6%); }
html.js .figure--clip img { transform: scale(1.1); }
.figure--clip,
.figure--clip img {
  transition:
    clip-path 1100ms var(--ease-out),
    transform 1400ms var(--ease-out),
    opacity   var(--t-hover) var(--ease-out);
}
html.js .figure--clip.is-visible { clip-path: inset(0 0 0 0); }
html.js .figure--clip.is-visible img { transform: scale(1); }

/* ==========================================================================
   20e · 06 · THE PLANS · the architect's sheets, made touchable
   ========================================================================== */

.plans__head .prose { max-inline-size: var(--measure); }

/* --- floor tabs --- */
.plans__tabs {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  border-block-end: 1px solid var(--hair-soft);
  padding-block-end: 0;
}
.plan-tab {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-kicker);
  letter-spacing: var(--tr-kicker);
  text-transform: var(--ar-case);
  color: var(--ink);
  opacity: .55;
  transition: opacity var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.plan-tab .plan-tab__ar {
  display: block;
  font-family: var(--font-arabic);
  font-weight: 400;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--muted);
  margin-block-start: 3px;
}
.plan-tab::after {
  content: "";
  position: absolute;
  inset-inline: var(--s-3);
  inset-block-end: -1px;
  block-size: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: var(--origin-x);
  transition: transform var(--t-hover) var(--ease-out);
}
.plan-tab:hover { opacity: .85; }
.plan-tab[aria-selected="true"] { opacity: 1; color: var(--navy); }
.plan-tab[aria-selected="true"]::after { transform: scaleX(1); }

/* --- the stage: sheet + dossier --- */
.plans__stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: stretch;
}

.plans__canvas {
  position: relative;
  background: linear-gradient(158deg, #17253D 0%, #0D1626 100%);
  border: 1px solid var(--hair);
  box-shadow: 0 18px 50px rgba(11, 20, 34, .18);
  padding: clamp(16px, 2.4vw, 36px);
  display: flex;
  align-items: center;      /* the sheet floats centred, not pinned to the top */
}
.plans__canvas .plan-svg { flex: 1; min-inline-size: 0; }
.plan-svg { display: block; inline-size: 100%; block-size: auto; direction: ltr; }

/* the drawing itself */
.plan-svg .plan-shell {
  fill: rgba(245, 240, 230, .045);
  stroke: rgba(245, 240, 230, .55);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.plan-svg .plan-core {
  fill: rgba(245, 240, 230, .05);
  stroke: rgba(245, 240, 230, .22);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.plan-svg .plan-unit {
  fill: rgba(245, 240, 230, .09);
  stroke: rgba(198, 161, 91, .5);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill 260ms var(--ease-out), stroke 260ms var(--ease-out);
}
.plan-svg .plan-unit:hover,
.plan-svg .plan-unit:focus-visible {
  fill: rgba(198, 161, 91, .34);
  stroke: var(--gold);
  outline: none;
}
.plan-svg .plan-unit.is-active {
  fill: rgba(198, 161, 91, .52);
  stroke: var(--gold-lt);
}
.plan-svg .plan-num {
  font-family: var(--font-sans);
  font-size: 22px;                /* viewBox units — vw is 1000 */
  letter-spacing: 2px;
  fill: rgba(245, 240, 230, .8);
  pointer-events: none;
  text-anchor: middle;
}
.plan-svg .plan-unit.is-active + .plan-num,
.plan-svg g:hover > .plan-num { fill: var(--gold-pale); }
.plan-svg .plan-road {
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: 4px;
  fill: #B08D45;
  text-anchor: middle;
}

/* floor-change choreography: the shell draws itself, the homes settle in */
.plan-svg .plan-shell[pathLength] { stroke-dasharray: 1; }
.plan-svg.is-entering .plan-shell { stroke-dashoffset: 1; }
.plan-svg .plan-shell { stroke-dashoffset: 0; transition: stroke-dashoffset 1300ms var(--ease-out); }
.plan-svg.is-entering .plan-unit,
.plan-svg.is-entering .plan-num,
.plan-svg.is-entering .plan-road { opacity: 0; }
.plan-svg .plan-unit,
.plan-svg .plan-num,
.plan-svg .plan-road {
  opacity: 1;
  transition-property: opacity, fill, stroke;
  transition-duration: 500ms, 260ms, 260ms;
  transition-timing-function: var(--ease-out);
  transition-delay: var(--pu-delay, 0ms), 0ms, 0ms;
}

/* --- the dossier --- */
.plans__detail {
  background: var(--cream);
  border: 1px solid var(--hair);
  padding: clamp(20px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-block-size: 100%;
}
.plans__detail .kicker { margin: 0; }

.pd-floor {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--fs-h3) * var(--ar-scale));
  letter-spacing: .06em;
  text-transform: var(--ar-case);
  color: var(--navy);
}
.pd-unit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  border-block-end: 1px solid var(--hair-soft);
  padding-block-end: var(--s-3);
}
.pd-unit__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 3.4vw, 54px);
  line-height: 1;
  color: var(--navy);
}
.pd-unit__type { text-align: end; }
.pd-unit__type-en {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-kicker);
  letter-spacing: var(--tr-kicker);
  text-transform: var(--ar-case);
  color: var(--muted);
}
.pd-unit__type-ar {
  display: block;
  font-family: var(--font-arabic);
  font-size: 13px;
  color: var(--ink);
  margin-block-start: 4px;
}

.pd-areas { display: flex; flex-direction: column; gap: var(--s-2); }
.pd-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
}
.pd-row__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-kicker);
  letter-spacing: var(--tr-kicker);
  text-transform: var(--ar-case);
  color: var(--muted);
}
.pd-row__value {
  font-family: var(--font-num);
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--ink);
  white-space: nowrap;
}
.pd-row--total {
  border-block-start: 1px solid var(--hair-soft);
  padding-block-start: var(--s-2);
}
.pd-row--total .pd-row__value {
  font-size: clamp(19px, 1.5vw, 24px);
  color: var(--navy);
}

.pd-faces { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.pd-face {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: var(--ar-case);
  color: var(--muted);
  border: 1px solid var(--hair);
  padding: 5px 10px;
}

/* The selected home's own drawing, cut from the architect's floor sheet the
   exact way the brochure cuts it: the sheet scaled until THIS unit fills the
   window, the neighbours clipped away by the unit's measured outline, the
   linework knocked to warm grey and washed with the brand gold. */
.pd-crop { margin: 0; }
.pd-crop__win {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #F5F0E6;
  border: 1px solid rgba(198, 161, 91, .45);
  direction: ltr;              /* sheet geometry is drawn LTR in both languages */
}
.pd-crop__img {
  position: absolute;
  max-inline-size: none;
  display: block;
  filter: grayscale(1) brightness(1.22) contrast(2.05);
}
.pd-crop__tint {
  position: absolute;
  background: var(--gold);
  opacity: .3;
  mix-blend-mode: multiply;
  z-index: 2;
}
.pd-crop__roads { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.pd-crop__road {
  position: absolute;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1px;
  color: #9A7B2F;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(245, 240, 230, .95), 0 0 2px rgba(245, 240, 230, .9);
}
.pd-crop__road--t { inset-block-start: 4px; left: 50%; transform: translateX(-50%); }
.pd-crop__road--b { inset-block-end: 4px; left: 50%; transform: translateX(-50%); }
.pd-crop__road--l { left: 4px;  top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }
.pd-crop__road--r { right: 4px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }

.pd-cta { margin-block-start: auto; }
.pd-cta .btn { inline-size: 100%; text-align: center; }

.pd-empty { display: flex; flex-direction: column; gap: var(--s-3); }
.pd-empty .prose { font-size: var(--fs-caption); line-height: 1.8; }
.pd-legend { display: flex; flex-direction: column; gap: var(--s-1); }
.pd-legend__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--ink);
  border-block-end: 1px solid var(--hair-soft);
  padding-block: var(--s-1);
}
.pd-legend__count { font-family: var(--font-num); color: var(--muted); }

.plans__note { max-inline-size: var(--measure); }

/* ==========================================================================
   20f · THE BROCHURE · lead magnet + unlocked download
   ========================================================================== */

.magnet .prose { max-inline-size: 46ch; }
.magnet__list {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.magnet__list li {
  position: relative;
  padding-inline-start: 26px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  color: var(--ink);
}
.magnet__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .52em;
  inline-size: 12px;
  block-size: 1px;
  background: var(--gold);
}
.magnet__note { margin-block-start: var(--s-4); }

.btn--gold {
  border-color: var(--gold);
  color: var(--navy);
  background: linear-gradient(120deg, rgba(198, 161, 91, .16), rgba(198, 161, 91, .05));
}
.btn--gold:hover,
.btn--gold:focus-visible { border-color: var(--muted); color: var(--muted); }

.download {
  border: 1px solid var(--hair);
  background: var(--cream);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: flex-start;
}
.download__title {
  font-family: var(--font-display);
  font-size: calc(var(--fs-h3) * var(--ar-scale));
  color: var(--navy);
}

.form__interest {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-caption);
  text-transform: var(--ar-case);
  color: var(--muted);
  border: 1px solid var(--hair);
  padding: var(--s-2) var(--s-3);
  margin-block-end: var(--s-4);
}
.form__interest-unit { color: var(--navy); font-weight: 500; }
.form__interest-x {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  margin-inline-start: auto;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: var(--ar-case);
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form__interest-x:hover { color: var(--ink); }

/* ==========================================================================
   21 · RESPONSIVE · 360 → 2560
   ========================================================================== */

/* --- ≥ 600px -------------------------------------------------------------- */
@media (min-width: 600px) {
  :root { --pad-section: 104px; }
}

/* --- ≥ 768px · tablet ----------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --pad-section: 120px;
  }

  .residences__gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .district__strip     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats               { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .terms__steps        { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .terms__foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
  }
}

/* --- ≥ 1024px ------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root { --pad-section: 160px; }

  .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .section__grid { row-gap: var(--s-10); }

  /* Two-up editorial pairings */
  .overture__text   { grid-column: 1 / 7; }
  .overture__figure { grid-column: 7 / 13; }

  .district__head  { grid-column: 1 / 7; }
  .district__map   { grid-column: 7 / 13; }
  .landmarks       { grid-column: 1 / 7; }
  .district__strip { grid-column: 1 / 13; }

  .register__plate { grid-column: 1 / 13; }
  .magnet          { grid-column: 1 / 6; }
  .register__body  { grid-column: 6 / 13; }

  .plans__head  { grid-column: 1 / 8; }
  .plans__tabs  { grid-column: 1 / 13; }
  .plans__stage { grid-column: 1 / 13; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .plans__note  { grid-column: 1 / 13; }

  .mixtable { grid-column: 1 / 7; }

  .colophon__brand    { grid-column: 1 / 5; }
  .colophon__nav      { grid-column: 5 / 8; }
  .colophon__contact  { grid-column: 8 / 13; }
  .colophon__meta     { grid-column: 1 / 5; }
  .colophon__presented{ grid-column: 5 / 8; }
  .colophon__legal    { grid-column: 1 / 11; }
  .colophon__top      { grid-column: 11 / 13; }
}

/* --- ≥ 1280px · the section-index rail ------------------------------------ */
@media (min-width: 1280px) {
  /* The start rail. Pinned to row 1 only — deliberately NOT `span 99`, which
     would materialise 98 implicit rows and multiply row-gap into dead space. */
  .section__grid > .sec-index {
    grid-column: 1 / 3;
    grid-row: 1;
    position: sticky;
    inset-block-start: 120px;
    margin-block-end: 0;
    display: block;
    align-self: start;
  }
  .section__grid > .sec-index .sec-index__num { display: block; }
  .section__grid > .sec-index .sec-index__label {
    display: block;
    margin-block-start: var(--s-1);
  }
  .sec-index__num::after { content: none; }

  /* Content clears the rail. */
  .overture__text   { grid-column: 3 / 8; }
  .overture__figure { grid-column: 8 / 13; }

  .figures__head    { grid-column: 3 / 10; }
  .stats            { grid-column: 3 / 13; }

  .residences__head    { grid-column: 3 / 10; }
  .mixtable            { grid-column: 3 / 8; }
  .residences__gallery { grid-column: 3 / 13; }

  .amenities__head { grid-column: 3 / 10; }
  .amenities__list { grid-column: 3 / 13; }
  .amenities__grid { grid-column: 3 / 13; }

  .district__head  { grid-column: 3 / 8; }
  .district__map   { grid-column: 8 / 13; }
  .landmarks       { grid-column: 3 / 8; }
  .district__strip { grid-column: 3 / 13; }

  .terms__head  { grid-column: 3 / 10; }
  .terms__steps { grid-column: 3 / 13; }
  .terms__foot  { grid-column: 3 / 11; }

  .register__plate { grid-column: 3 / 13; }
  .magnet          { grid-column: 3 / 8; }
  .register__body  { grid-column: 8 / 13; }

  .plans__head  { grid-column: 3 / 9; }
  .plans__tabs  { grid-column: 3 / 13; }
  .plans__stage { grid-column: 3 / 13; }
  .plans__note  { grid-column: 3 / 13; }

  .colophon__brand     { grid-column: 3 / 6; }
  .colophon__nav       { grid-column: 6 / 8; }
  .colophon__contact   { grid-column: 8 / 13; }
  .colophon__meta      { grid-column: 3 / 6; }
  .colophon__presented { grid-column: 6 / 8; }
  .colophon__legal     { grid-column: 8 / 13; }
  .colophon__top       { grid-column: 3 / 6; }

  /* Hero and Handover keep their own inner shells; pad past the rail. */
  .hero__inner,
  .handover__inner { padding-inline: calc(var(--gutter) + 6%); }
}

/* --- ≥ 1440px ------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root { --pad-section: 200px; }
}

/* --- ≥ 1921px · the ground grows, the content does not -------------------- */
@media (min-width: 1921px) {
  :root { --gutter: 40px; }
  .hero { min-block-size: 92vh; }
}

/* --- ≤ 1023px · nav collapses -------------------------------------------- */
@media (max-width: 1023px) {
  .nav__toggle { display: flex; }

  .nav__links {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    background: rgba(251, 247, 238, .98);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--hair-soft);
    padding: var(--s-4) var(--gutter) var(--s-6);
    display: none;
  }
  .nav.is-open .nav__links { display: block; }

  .nav__list { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .nav__list a { color: var(--ink); font-size: 13px; }

  .nav__phone { display: none; }
}

/* --- ≤ 767px · phone ------------------------------------------------------ */
@media (max-width: 767px) {
  .hero { min-block-size: 88vh; min-block-size: 88svh; }
  .hero__cues { flex-direction: column; align-items: stretch; }
  .hero__cues .btn { inline-size: 100%; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .district__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .landmark { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .landmark__value { text-align: start; }

  .success { padding: var(--s-4); }
}

/* --- ≤ 400px · smallest supported ---------------------------------------- */
@media (max-width: 400px) {
  :root { --gutter: 20px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .nav__mark { block-size: 26px; }
}

/* ==========================================================================
   22 · PERFORMANCE
   ========================================================================== */

/* Deliberately excludes .register: it holds the live form, the polite status
   region and a panel that swaps at runtime — skipped rendering and
   aria-live announcements are a bad pairing. */
.residences,
.amenities,
.district,
.terms {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.plate {
  content-visibility: auto;
  contain-intrinsic-size: auto 60vh;
}

/* ==========================================================================
   23 · REDUCED MOTION · effects are removed, not slowed
   ========================================================================== */

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

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal.is-visible,
  .reveal.is-in,
  html.js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .rule,
  html.js .rule { transform: scaleX(1) !important; }

  .kenburns { animation: none !important; transform: none !important; }

  /* Moving type stands still; hidden-until-revealed must simply be there. */
  .marquee__track { animation: none !important; }
  .swi { transform: none !important; }
  html.js .figure--clip { clip-path: none !important; }
  html.js .figure--clip img { transform: none !important; }
  .plan-svg.is-entering .plan-unit,
  .plan-svg.is-entering .plan-num,
  .plan-svg.is-entering .plan-road { opacity: 1 !important; }
  .plan-svg.is-entering .plan-shell { stroke-dashoffset: 0 !important; }

  /* Parallax ceases to exist. */
  .hero__media {
    transform: none !important;
    will-change: auto;
    inset: 0;
  }

  /* The progress bar survives: it is an indicator, not decoration. */
  .progress__bar { transform: scaleX(var(--progress, 0)); }
}

/* ==========================================================================
   24 · FORCED COLORS
   ========================================================================== */

@media (forced-colors: active) {
  .btn, .langswitch, .field__input, .field__group, .success { border-color: currentColor; }
  .rule, .progress__bar { forced-color-adjust: none; background: Highlight; }
  .field__err { color: LinkText; }
}