@font-face { font-family: 'Halcom'; src: url('/assets/Halcom-Light.0f3a28fc664f.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Halcom'; src: url('/assets/Halcom-Regular.1d80e8533881.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Halcom'; src: url('/assets/Halcom-Medium.e965c8fb85f4.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Univers Next Arabic'; src: url('/assets/UniversNextArabic-Regular.b76a3af52ec8.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
/* Retal Rise — Colour System
   ==================================================================
   OFFICIAL PALETTE — from the Retal Rise Logo Guideline v0.1 (2021),
   section 3.1. Six authorized colours; tints in 20% steps (§3.2).
     Twilight Purple  Pantone 2735 C  #241E40   (primary)
     Beige            Pantone 663 C   #EAE5DE
     Linen Beige      Pantone 5245 C  #C8BCBA
     Slate Gray       Pantone 5275 C  #393544
     Radiant Orchid   Pantone 265 C   #785084
     Aurora Pink      (#B77E9E — sampled from the guideline swatch;
                       the printed values on that page are a misprint)
     + Logo copper    #E97929 — the colour-logo artwork only, never UI.
   Values are kept in step with the Retal Rise Design System project
   (claude.ai/design, updated 2026-07-20).
   Shades outside the six are 20%-step tints/shades of an authorized
   colour, per the guideline's tint system.
   ================================================================== */
:root {
  /* --- Twilight Purple (signature brand ground) --- */
  --twilight-950: #16122A;   /* deep shade for footers/vignettes */
  --twilight-900: #1B1730;
  --twilight-800: #241E40;   /* OFFICIAL Twilight Purple */
  --twilight-700: #2E2B7A;   /* brochure indigo — kept as a Twilight tone */
  --twilight-600: #504B66;   /* 80% tint step */
  --twilight-500: #7C788C;   /* 60% tint */
  --slate-700:    #393544;   /* OFFICIAL Slate Gray */

  /* --- Linen Beige (hairlines + metallic details on dark) --- */
  --linen-600: #776C6E;
  --linen-500: #948687;
  --linen-400: #B0A2A0;
  --linen-300: #C8BCBA;      /* OFFICIAL Linen Beige */
  --linen-200: #DAD1CF;

  /* --- Aurora Pink (warm accent + CTAs) --- */
  --aurora-700: #7E5069;
  --aurora-600: #9A6784;     /* 20% darker — hover per tint rule */
  --aurora-500: #B77E9E;     /* OFFICIAL Aurora Pink (sampled) */
  --aurora-400: #C598B1;
  --aurora-300: #D4B2C5;

  /* --- Radiant Orchid (vivid accent — links, focus, highlights) --- */
  --orchid-600: #604066;
  --orchid-500: #785084;     /* OFFICIAL Radiant Orchid */
  --orchid-400: #937399;

  /* --- Beige neutrals (light surfaces) --- */
  --white:     #FDFCFA;      /* marble white */
  --beige-50:  #F4F1EC;      /* page ground — linen tint of Beige */
  --beige-100: #EAE5DE;      /* OFFICIAL Beige — sunken surfaces */
  --beige-200: #DCD4CC;

  /* --- Ink (text on light — official darks) --- */
  --ink-900:   #241E40;      /* Twilight Purple as text */
  --ink-700:   #393544;      /* Slate Gray */
  --ink-500:   #555062;
  --ink-400:   #837D8F;
  --ink-300:   #ACA7B2;

  /* --- Copper (the colour-logo artwork ONLY — never UI fills) --- */
  --copper-500: #E97929;
  --copper-600: #C96317;

  /* ---------------- Legacy aliases (keep components working) -------- */
  --indigo-950: var(--twilight-950);
  --indigo-900: var(--twilight-900);
  --indigo-800: var(--twilight-800);
  --indigo-700: var(--twilight-700);
  --indigo-600: var(--twilight-600);
  --indigo-500: var(--twilight-500);
  --mauve-600: var(--linen-600);
  --mauve-500: var(--linen-500);
  --mauve-400: var(--linen-400);
  --mauve-300: var(--linen-300);
  --mauve-200: var(--linen-200);
  --rose-700: var(--aurora-700);
  --rose-600: var(--aurora-600);
  --rose-500: var(--aurora-500);
  --rose-400: var(--aurora-400);
  --rose-300: var(--aurora-300);
  --sand-50:  var(--beige-50);
  --sand-100: var(--beige-100);
  --sand-200: var(--beige-200);
  --taupe-300: var(--linen-300);
  --taupe-400: var(--linen-400);

  /* ---------------- Semantic aliases ----------------
     The site leads with the three PRIMARY colours (Twilight, Beige,
     Linen). Aurora/Orchid stay defined but are reserved for rare,
     small accents only. */
  --brand:               var(--twilight-800);
  --accent:              var(--twilight-800);
  --accent-strong:       var(--twilight-900);
  --accent-soft:         var(--linen-300);
  --metal:               var(--linen-400);
  --gold:                var(--linen-400);

  --surface-page:        var(--beige-50);
  --surface-card:        var(--white);
  --surface-raised:      #FFFFFF;
  --surface-sunken:      var(--beige-100);
  --surface-dark:        var(--twilight-800);
  --surface-dark-2:      var(--twilight-900);
  --surface-dark-3:      var(--twilight-700);

  --text-primary:        var(--ink-900);
  --text-secondary:      var(--ink-500);
  --text-muted:          var(--ink-400);
  --text-on-dark:        var(--beige-100);
  --text-on-dark-muted:  rgba(234, 229, 222, 0.78);
  --text-accent:         var(--ink-700);

  --line:                rgba(36, 30, 64, 0.12);
  --line-strong:         rgba(36, 30, 64, 0.24);
  --line-on-dark:        rgba(218, 209, 207, 0.16);
  --line-mauve:          rgba(200, 188, 186, 0.50);
  --line-gold:           rgba(200, 188, 186, 0.50);

  --focus-ring:          rgba(120, 80, 132, 0.45);
}

/* Retal Rise — Typography
   ==================================================================
   OFFICIAL (Logo Guideline §6):
   Display : Ambroise Std — headlines, CAPITALS ONLY. Substituted with
             Bodoni Moda until licensed files are supplied; all display
             headlines must be set uppercase (--display-case).
   Text/UI : Halcom (REAL, local) — body text in Light (300); Medium
             (500) for eyebrows/labels/buttons.
   Arabic  : Univers Next Arabic (REAL, local) — Medium headlines,
             Regular body.
   ================================================================== */
:root {
  --font-display: 'Bodoni Moda', 'Times New Roman', Georgia, serif;
  --font-sans:    'Halcom', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic:  'Univers Next Arabic', system-ui, sans-serif;

  /* Headline casing per guideline: Ambroise is only used in capitals.
     Bodoni Moda is a variable font with an optical-size axis; left on
     auto it picks its razor-hairline poster cut at display sizes. The
     guideline's Ambroise has sturdy thins, so we pin a low optical
     size (its text cut) to match that clarity. */
  --display-case: uppercase;      /* @kind other */
  --display-track: 0.05em;        /* airy caps tracking, per brochure */
  --display-weight: 500;          /* @kind other */
  --display-optical: 'opsz' 12;   /* @kind other — sturdy Ambroise-like thins */

  /* Type scale */
  --text-eyebrow: 0.72rem;
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.375rem;
  --text-2xl:     1.75rem;
  --text-3xl:     2.25rem;
  --text-4xl:     3rem;
  --text-5xl:     4rem;
  --text-6xl:     5.5rem;
  --text-7xl:     7rem;

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Tracking */
  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.18em;   /* eyebrows */
  --tracking-wider:  0.30em;   /* fine labels */

  /* Leading */
  --leading-tight: 1.04;
  --leading-snug:  1.18;
  --leading-body:  1.6;
}

/* ----------------------- Utility classes ----------------------- */
.rr-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
.rr-display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-optical);
  line-height: var(--leading-tight);
  letter-spacing: var(--display-track);
  text-transform: var(--display-case);
  color: var(--text-primary);
}
.rr-serif { font-family: var(--font-display); font-weight: var(--weight-light); }
.rr-h1 { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.rr-h2 { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-4xl); line-height: var(--leading-tight); }
.rr-h3 { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-2xl); line-height: var(--leading-snug); }
.rr-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}
.rr-label {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.rr-arabic, [dir="rtl"] { font-family: var(--font-arabic); }

/* Retal Rise — Spacing & Layout
   ==================================================================
   Generous, architectural rhythm. Base unit 4px; sections breathe.
   ================================================================== */
:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* Layout */
  --container-max: 1280px;
  --container-wide: 1440px;
  --gutter:        clamp(20px, 5vw, 64px);
  --section-y:     clamp(64px, 9vw, 144px);

  /* Fixed UI */
  --nav-height: 76px;
}

/* Retal Rise — Radii, Shadows & Effects
   ==================================================================
   Crisp and architectural: small radii, hairline borders, soft warm
   shadows. Nothing bubbly. Photography sits flush; cards are quiet.
   ================================================================== */
:root {
  /* Corner radii — restrained */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   14px;
  --radius-pill: 999px;

  /* Borders */
  --border-hairline: 1px solid var(--line);
  --border-gold:     1px solid var(--line-gold);
  --border-on-dark:  1px solid var(--line-on-dark);

  /* Shadows — warm, soft, low */
  --shadow-xs:   0 1px 2px rgba(26, 27, 24, 0.05);
  --shadow-sm:   0 2px 8px -3px rgba(26, 27, 24, 0.10);
  --shadow-card: 0 4px 24px -14px rgba(26, 27, 24, 0.30);
  --shadow-md:   0 14px 40px -18px rgba(26, 27, 24, 0.26);
  --shadow-lg:   0 36px 70px -30px rgba(21, 16, 42, 0.40);

  /* Motion */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  180ms;
  --dur-base:  320ms;
  --dur-slow:  600ms;

  /* Image protection overlay (text over photos) — twilight-purple base */
  --scrim-bottom: linear-gradient(to top, rgba(19, 16, 34, 0.78) 0%, rgba(19, 16, 34, 0.30) 38%, rgba(19, 16, 34, 0) 70%);
  --scrim-full:   linear-gradient(180deg, rgba(19, 16, 34, 0.42) 0%, rgba(19, 16, 34, 0.20) 45%, rgba(19, 16, 34, 0.66) 100%);
}


  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  html, body { overflow-x: clip; }
  section[id] { scroll-margin-top: 76px; }
  body { margin: 0; background: var(--surface-page); color: var(--text-primary); -webkit-font-smoothing: antialiased; }
  img { display: block; }
  ::selection { background: var(--twilight-800); color: var(--beige-50); }
  @media (max-width: 1000px) {
    .rr-col-5, .rr-col-6, .rr-col-7 { grid-column: 1 / -1 !important; }
    .rr-towers-grid { grid-template-columns: 1fr !important; }
    .rr-form { grid-template-columns: 1fr !important; }
    .rr-inset-img { display: none !important; }
  }
  @media (max-width: 760px) { .rr-navlinks, .rr-nav-cta { display: none !important; } }
  @media (max-width: 760px) {
    .rr-v2logo { height: 44px !important; }
    .rr-cobrand { gap: 10px !important; }
    .rr-cb-retal { height: 34px !important; }
    .rr-cb-rise { height: 32px !important; }
    .rr-v2cta { font-size: 10px !important; padding: 9px 13px !important; letter-spacing: 0.1em !important; white-space: normal !important; text-align: center; }
    .rr-thumbs { -webkit-overflow-scrolling: touch; }
    .rr-explorer-frame { aspect-ratio: 4 / 5 !important; min-height: 0 !important; }
  }
  .rr-wa:hover { transform: scale(1.06); }
  .rr-wa { transition: transform var(--dur-fast) var(--ease-soft); }
  @media (max-width: 1000px) {
    .rr-typelist { flex-direction: row !important; overflow-x: auto; gap: 8px !important; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .rr-typelist::-webkit-scrollbar { display: none; }
    .rr-typelist > button { flex: none; min-width: 210px; border-inline-start-width: 0 !important; border: var(--border-hairline) !important; }
    .rr-typelist > button[aria-pressed="true"] { border-color: var(--twilight-800) !important; }
  }
  /* Gallery masonry: three aspect-balanced flex columns on desktop (bottoms
     align); on narrow screens the wrappers dissolve (display: contents) and
     CSS multicol takes over with two flowing columns. */
  .rr-masonry { display: flex; gap: 16px; }
  .rr-mcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  .rr-masonry figure { break-inside: avoid; -webkit-column-break-inside: avoid; }
  .rr-masonry figure:hover img { transform: scale(1.04); }
  .rr-gal-head h2 { white-space: nowrap; font-size: clamp(1.48rem, 3.4vw, 2.9rem) !important; }
  @media (max-width: 1000px) {
    .rr-masonry { display: block; columns: 2; column-gap: 16px; }
    .rr-mcol { display: contents; }
    .rr-masonry figure { margin: 0 0 16px !important; }
  }
  @media (max-width: 520px) {
    .rr-masonry { column-gap: 10px; }
    .rr-masonry figure { margin-bottom: 10px !important; }
    .rr-masonry-cap { font-size: 10px !important; letter-spacing: 0.06em !important; padding: 28px 10px 9px !important; }
  }
  /* Floor-plan type list: sideways-scroll affordance on narrow screens */
  .rr-typelist-more { display: none; }
  @media (max-width: 1000px) {
    .rr-typelist-wrap::after { content: ''; position: absolute; top: 34px; bottom: 6px; inset-inline-end: 0; width: 64px; pointer-events: none; background: linear-gradient(to right, rgba(234,229,222,0), var(--surface-sunken)); transition: opacity 0.3s; }
    html[dir="rtl"] .rr-typelist-wrap::after { background: linear-gradient(to left, rgba(234,229,222,0), var(--surface-sunken)); }
    .rr-typelist-more { display: flex; position: absolute; top: 50%; inset-inline-end: 8px; transform: translateY(calc(-50% + 14px)); width: 34px; height: 34px; border-radius: 50%; background: var(--twilight-800); color: var(--beige-50); align-items: center; justify-content: center; font-size: 18px; pointer-events: none; z-index: 2; transition: opacity 0.3s; box-shadow: var(--shadow-sm); }
    .rr-typelist-wrap.at-end::after, .rr-typelist-wrap.at-end .rr-typelist-more { opacity: 0; }
  }
  @media (max-width: 760px) {
    .rr-res-grid { grid-template-columns: 1fr !important; }
    .rr-sold-strip { align-items: flex-start !important; flex-direction: column; gap: 14px !important; }
  }
  @media (max-width: 520px) {
    .rr-phone-row { grid-template-columns: 132px 1fr !important; }
  }
  @media (max-width: 520px) {
    .rr-cta-lg { white-space: normal !important; max-width: 100%; text-align: center; font-size: 12px !important; padding: 14px 20px !important; letter-spacing: 0.16em !important; }
  }
  /* Nav: links + phone + EN/AR toggle + CTA need ~1350px in English. Step
     down gracefully: icon-only phone, tighter gaps, then no phone (the number
     repeats in the hero button, the viewing section and the footer). */
  @media (max-width: 1500px) { html:not([dir="rtl"]) .rr-nav-phone-num { display: none !important; } }
  @media (max-width: 1400px) { html:not([dir="rtl"]) .rr-v2nav { gap: 18px !important; } html:not([dir="rtl"]) .rr-navlinks { gap: 18px !important; } }
  @media (max-width: 1300px) { html:not([dir="rtl"]) .rr-nav-phone { display: none !important; } }
  @media (max-width: 760px) {
    .rr-v2nav { gap: 12px !important; }
    .rr-lang-toggle button, .rr-lang-toggle a { min-width: 38px !important; padding-left: 9px !important; padding-right: 9px !important; }
  }

  /* ---- Arabic (RTL) ----------------------------------------------------
     Driven by <html dir="rtl" lang="ar">, which i18n.jsx sets when the
     visitor picks عربي. Layout mirrors on its own (flex/grid + logical
     inline-start/end properties in the components); these rules handle
     what CSS direction cannot: typeface, tracking, leading and sizes. */
  html[dir="rtl"] {
    --font-display: var(--font-arabic);
    --font-sans: var(--font-arabic);
    --display-case: none;      /* no capitals in Arabic */
    --display-weight: 400;     /* Univers Next Arabic ships in Regular only */
    --display-track: 0;
    --tracking-wide: 0; --tracking-wider: 0; --tracking-tight: 0;
    --text-eyebrow: 0.82rem;
  }
  /* Arabic is a connected script: letter-spacing breaks the letterforms.
     Inline styles carry Latin tracking throughout, so this must outrank them. */
  html[dir="rtl"] *:not(.rr-latin) { letter-spacing: 0 !important; }
  /* Arabic wants more leading than the Latin settings give it. */
  html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { line-height: 1.4 !important; }
  html[dir="rtl"] p { line-height: 1.85 !important; }
  html[dir="rtl"] .rr-btn { line-height: 1.3 !important; }
  /* Fine labels set at 10–11px are too small for Arabic glyphs. */
  html[dir="rtl"] [style*="font-size: 10px"]:not(.rr-btn) { font-size: 11.5px !important; }
  html[dir="rtl"] [style*="font-size: 11px"]:not(.rr-btn):not(.rr-latin) { font-size: 12px !important; }
  html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] button { font-family: inherit; }
  html[dir="rtl"] [dir="ltr"] { unicode-bidi: isolate; }

.rr-lang-toggle a { text-decoration: none; text-align: center; display: inline-block; }