/*
Theme Name: RAHA Elevated Living
Theme URI: https://rahaelevatedliving.com
Author: RAHA Luxury Development
Author URI: https://rahaelevatedliving.com
Description: Ultra-luxury bespoke mountain villa theme for RAHA Elevated Living, Palak / Barrian, Galyat. Cinematic two-stage video hero, scroll-scrubbed residence reel, interactive floor plans and investment schedule. Elementor-compatible. No CDN dependencies.
Version: 2.0.0
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: raha-theme
Tags: luxury, real-estate, resort, elementor, responsive-layout, custom-menu, featured-images, full-width-template
*/

/* ============================================================================
   RAHA — "ALTITUDE"
   Thesis: a mountain address sold by altitude. The page opens as one long
   cinematic descent — dark, warm, unhurried — then lands in stone-and-timber
   light. Everything RISES and SETTLES; nothing bounces, spins or slides,
   except the residence reel, which moves because the reader moves it.

   Signature ....... §2 The Reel — a pinned, scroll-scrubbed filmstrip
   Motion verb ..... rise & settle, cubic-bezier(.16,1,.3,1)
   Ornament ........ 3 devices: reel progress rail, gold eyebrow rule, route line
   Profile ......... A — Editorial (display serif + grotesk, hairlines, numerals)

   CONTRAST NOTE — read before using --r-gold on a light surface.
   #AD9273 on #FAF8F5 measures 2.94:1. That fails even the 3.0 large-text bar.
   Gold TEXT on any light surface must use --r-gold-dk (#7F6850 = 5.25:1).
   --r-gold is for fills, rules and gold-on-dark only (6.45:1 on --r-night).
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */

:root{
  /* colour ------------------------------------------------------ */
  --r-gold:      #AD9273;   /* fills, rules, gold-on-dark        6.45:1 on night */
  --r-gold-lt:   #E6D6C5;
  --r-gold-dk:   #7F6850;   /* the ONLY gold for text on light   5.25:1 on sand */
  --r-gold-ac:   #E7D2AD;   /* gold text on dark                12.86:1 on night */

  --r-ink:       #221E1F;   /* headings on light                 15.6:1 on sand */
  --r-body:      #4A4442;   /* body on light                      9.03:1 on sand */
  --r-body-dk:   #C9C2BC;   /* body on dark                      10.78:1 on night */

  --r-night:     #14110F;   /* dark band base */
  --r-night-2:   #1C1917;   /* raised dark surface */
  --r-night-3:   #2A2522;   /* dark hairline / border */

  --r-sand-50:   #FDFCFA;
  --r-sand-100:  #FAF8F5;   /* page background */
  --r-sand-200:  #F3EFE6;   /* tinted band */
  --r-sand-300:  #E8E1D3;   /* hairline / border on light */

  --r-scrim:     10, 8, 7;  /* rgb triplet for every overlay on this site */
  --r-focus:     #E7D2AD;

  /* type -------------------------------------------------------- */
  --r-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --r-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Floors matter more than ceilings — a clamp moves the AA size THRESHOLD.
     Every floor below is stated in px and checked against 24 / 18.66 / 4.5.   */
  --t-hero:  clamp(3rem,     8.2vw,  8.5rem);  /* floor 48px  — large text  */
  --t-h2:    clamp(2.125rem, 4.6vw,  4rem);    /* floor 34px  — large text  */
  --t-h3:    clamp(1.625rem, 2.4vw,  2.25rem); /* floor 26px  — large text  */
  --t-h4:    clamp(1.25rem,  1.5vw,  1.5rem);  /* floor 20px  — needs 4.5   */
  --t-lede:  clamp(1.0625rem,1.35vw, 1.25rem); /* floor 17px  — needs 4.5   */
  --t-body:  1rem;                             /* 16px        — needs 4.5   */
  --t-sm:    .875rem;                          /* 14px        — needs 4.5   */
  --t-xs:    .8125rem;                         /* 13px        — needs 4.5   */
  --t-eyebrow:.6875rem;                        /* 11px        — needs 4.5   */
  --t-figure:clamp(3.25rem,  7.5vw,  7rem);    /* floor 52px  — large text  */

  /* space ------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10:128px;

  --r-pad:     clamp(72px, 9vw, 148px);   /* section padding block */
  --r-gutter:  clamp(20px, 4.4vw, 56px);  /* page gutter */
  --r-max:     1360px;                    /* container */
  --r-max-narrow: 1120px;

  /* radius / shadow --------------------------------------------- */
  --rad-1: 2px; --rad-2: 6px; --rad-3: 14px; --rad-4: 22px; --rad-pill: 999px;

  --sh-1: 0 1px 2px rgba(var(--r-scrim), .06),
          0 2px 6px rgba(var(--r-scrim), .04);
  --sh-2: 0 2px 4px rgba(var(--r-scrim), .06),
          0 8px 20px rgba(var(--r-scrim), .07);
  --sh-3: 0 4px 8px rgba(var(--r-scrim), .07),
          0 18px 44px rgba(var(--r-scrim), .11);
  --sh-4: 0 8px 16px rgba(var(--r-scrim), .09),
          0 34px 84px rgba(var(--r-scrim), .17);

  /* motion ------------------------------------------------------ */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-std: cubic-bezier(.4, 0, .2, 1);
  --e-in:  cubic-bezier(.4, 0, 1, 1);
  --d-fast:  180ms;
  --d-mid:   320ms;
  --d-enter: 520ms;
  --d-slow:  900ms;

  --nav-h: 74px;

  /* How far the elevation spec plate crosses into the dark band below it.
     Written as the pixels that actually cross, never as a raw offset. */
  --bleed: clamp(40px, 5vw, 80px);
}

/* ----------------------------------------------------------- 2. BASE RESET */

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

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body{
  margin: 0;
  background: var(--r-sand-100);
  color: var(--r-body);
  font-family: var(--r-sans);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6{
  margin: 0;
  font-weight: 400;
  line-height: 1.06;
  color: var(--r-ink);
  font-family: var(--r-display);
  letter-spacing: -.012em;
  text-wrap: balance;
  /* Cormorant Garamond ships old-style figures by default, which turns
     "10 Marla" into "IO Marla" and "PKR 120,000,000" into "I2O,OOO,OOO".
     Every number on this page is a spec or a price, so lining throughout. */
  font-variant-numeric: lining-nums;
}

p{ margin: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
figure{ margin: 0; }
img, video, svg{ display: block; max-width: 100%; }
img, video{ height: auto; }

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

button{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, select, textarea{ font: inherit; color: inherit; }

::selection{ background: var(--r-gold); color: #fff; }

:focus-visible{
  outline: 2px solid var(--r-focus);
  outline-offset: 3px;
  border-radius: var(--rad-1);
}

::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-track{ background: var(--r-sand-200); }
::-webkit-scrollbar-thumb{ background: var(--r-gold); border-radius: var(--rad-pill); }

.r-sr{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.r-skip{
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--r-night); color: #fff;
  padding: 12px 20px; border-radius: var(--rad-2);
  font-size: var(--t-sm); font-weight: 600;
  transition: top var(--d-fast) var(--e-std);
}
.r-skip:focus{ top: var(--s-4); }

/* ------------------------------------------------------- 3. LAYOUT PRIMITIVES */

.r-wrap{
  width: 100%;
  max-width: calc(var(--r-max) + var(--r-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--r-gutter);
}
.r-wrap--narrow{ max-width: calc(var(--r-max-narrow) + var(--r-gutter) * 2); }

.r-section{ padding-block: var(--r-pad); position: relative; }

.r-band-light { background: var(--r-sand-100); }
.r-band-tint  { background: var(--r-sand-200); }
.r-band-dark  { background: var(--r-night); color: var(--r-body-dk); }
.r-band-dark h1, .r-band-dark h2, .r-band-dark h3, .r-band-dark h4{ color: #fff; }

/* -------------------------------------------------------------- 4. TYPOGRAPHY */

.r-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--r-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--r-gold-dk);
}
.r-band-dark .r-eyebrow{ color: var(--r-gold-ac); }

/* Ornament device 2 of 3 — the eyebrow rule. A 26px hairline with a 3px
   terminal dot. It is the only recurring decorative mark on the page. */
.r-eyebrow::before{
  content: ""; flex: 0 0 auto;
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .7;
}

.r-h1{ font-size: var(--t-hero); font-weight: 300; line-height: .98; letter-spacing: -.02em; }
.r-h2{ font-size: var(--t-h2);   font-weight: 300; line-height: 1.02; }
.r-h3{ font-size: var(--t-h3);   font-weight: 500; }
.r-h4{ font-size: var(--t-h4);   font-weight: 600; font-family: var(--r-sans); letter-spacing: -.01em; line-height: 1.3; }

.r-em{ font-style: italic; color: var(--r-gold-dk); font-weight: inherit; }
.r-band-dark .r-em{ color: var(--r-gold-ac); }

.r-lede{
  font-size: var(--t-lede);
  line-height: 1.62;
  color: var(--r-body);
  max-width: 62ch;              /* on the prose itself — resolves in Inter */
}
.r-band-dark .r-lede{ color: var(--r-body-dk); }

.r-meta{ font-size: var(--t-xs); color: var(--r-body); line-height: 1.55; }
.r-band-dark .r-meta{ color: var(--r-body-dk); }

.r-num{
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1, "onum" 0;
}

/* ----------------------------------------------------------------- 5. BUTTONS */
/* Every button states its own background AND color on the base rule, so no
   host-theme `button:hover{background:#c36}` can win on the class column. */

.r-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
  padding: 13px 28px;
  border-radius: var(--rad-pill);
  font-family: var(--r-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid transparent;
  background: var(--r-gold-dk);
  color: #fff;
  transition: background var(--d-mid) var(--e-std),
              color var(--d-mid) var(--e-std),
              border-color var(--d-mid) var(--e-std),
              transform var(--d-fast) var(--e-std),
              box-shadow var(--d-mid) var(--e-std);
}
.r-btn:hover{ background: var(--r-ink); color: #fff; box-shadow: var(--sh-2); }
.r-btn:active{ transform: translateY(1px) scale(.99); }

.r-btn--light{ background: #fff; color: var(--r-ink); border-color: var(--r-sand-300); }
.r-btn--light:hover{ background: var(--r-gold-dk); color: #fff; border-color: var(--r-gold-dk); }

.r-btn--ghost{ background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.45); }
.r-btn--ghost:hover{ background: rgba(255,255,255,.16); color: #fff; border-color: #fff; }

/* Ink on gold, never white on gold. #fff on #AD9273 measures 2.94:1 — below
   even the 3.0 large-text bar, and these labels are 13px. #221E1F on the same
   fill is 5.60:1, and dark-on-gold is the richer read anyway. */
.r-btn--gold{ background: var(--r-gold); color: var(--r-ink); }
.r-btn--gold:hover{ background: var(--r-gold-lt); color: var(--r-ink); }
.r-btn--gold svg{ color: var(--r-ink); }

.r-btn svg{ width: 16px; height: 16px; flex: 0 0 auto; }
.r-btn--arrow svg{ transition: transform var(--d-fast) var(--e-std); }
.r-btn--arrow:hover svg{ transform: translateX(4px); }

/* text link with a nudging arrow */
.r-link{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;                 /* tap target — the rule itself stays tight */
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--r-gold-dk);
  background: none;
  border: 0;
  box-shadow: inset 0 -1px 0 0 currentColor;
  transition: color var(--d-mid) var(--e-std);
}
.r-band-dark .r-link{ color: var(--r-gold-ac); }
.r-link:hover{ color: var(--r-ink); }
.r-band-dark .r-link:hover{ color: #fff; }
.r-link svg{ width: 14px; height: 14px; transition: transform var(--d-fast) var(--e-std); }
.r-link:hover svg{ transform: translateX(4px); }

/* ------------------------------------------------------ 6. MOTION SYSTEM */
/*  RESOLVE, NEVER SUPPRESS.
    Every start state below is gated on `.raha-js`, a class the script adds as
    its first statement. With JS off, or if the script never runs, the base
    rule IS the finished state and the whole page is visible.                 */

[data-r] > *{ opacity: 1; transform: none; }

.raha-js [data-r] > *{
  opacity: 0;
  transform: translateY(18px);
}
.raha-js [data-r].is-in > *{
  opacity: 1;
  transform: none;
  transition: opacity var(--d-enter) var(--e-out),
              transform var(--d-enter) var(--e-out);
}
.raha-js [data-r].is-in > *:nth-child(2){ transition-delay:  70ms; }
.raha-js [data-r].is-in > *:nth-child(3){ transition-delay: 140ms; }
.raha-js [data-r].is-in > *:nth-child(4){ transition-delay: 210ms; }
.raha-js [data-r].is-in > *:nth-child(5){ transition-delay: 280ms; }
.raha-js [data-r].is-in > *:nth-child(6){ transition-delay: 350ms; }

/* long lists get a shorter, tighter stagger */
.raha-js [data-r="list"].is-in > *{ transition-duration: 360ms; }
.raha-js [data-r="list"].is-in > *:nth-child(2){ transition-delay:  40ms; }
.raha-js [data-r="list"].is-in > *:nth-child(3){ transition-delay:  80ms; }
.raha-js [data-r="list"].is-in > *:nth-child(4){ transition-delay: 120ms; }
.raha-js [data-r="list"].is-in > *:nth-child(5){ transition-delay: 160ms; }
.raha-js [data-r="list"].is-in > *:nth-child(6){ transition-delay: 200ms; }
.raha-js [data-r="list"].is-in > *:nth-child(7){ transition-delay: 240ms; }
.raha-js [data-r="list"].is-in > *:nth-child(8){ transition-delay: 280ms; }

/* the single-element variant, for a figure or a plate */
.raha-js [data-r-solo]{ opacity: 0; transform: translateY(18px); }
.raha-js [data-r-solo].is-in{
  opacity: 1; transform: none;
  transition: opacity var(--d-enter) var(--e-out),
              transform var(--d-enter) var(--e-out);
}

/* photograph settles from 1.08 → 1 inside its own frame. Never the reverse. */
.r-fig{ overflow: hidden; position: relative; background: var(--r-sand-300); }
.r-fig > img{ width: 100%; height: 100%; object-fit: cover; }
.raha-js [data-r-img] > img{ transform: scale(1.08); }
.raha-js [data-r-img].is-in > img{
  transform: none;
  transition: transform var(--d-slow) var(--e-out);
}

/* top-of-page scroll progress. Ornament? No — it is a position indicator. */
.r-progress{
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120;
  background: transparent; pointer-events: none;
}
.r-progress__bar{
  height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--r-gold-dk), var(--r-gold), var(--r-gold-ac));
}

/* ------------------------------------------------------------- 7. NAVIGATION */

.r-nav{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  width: 100%;
  padding-block: 16px;
  padding-inline: 0 !important;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--d-mid) var(--e-std),
              padding var(--d-mid) var(--e-std),
              border-color var(--d-mid) var(--e-std),
              backdrop-filter var(--d-mid) var(--e-std);
}
.r-nav.is-stuck{
  padding-block: 10px;
  background: rgba(var(--r-scrim), .88);
  border-bottom-color: rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.r-nav .r-wrap,
.r-nav__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
}
.r-nav.is-stuck{
  padding-block: 10px;
  background: rgba(var(--r-scrim), .88);
  border-bottom-color: rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.r-nav__logo{ display: inline-flex; align-items: center; min-height: 44px; }
.r-nav__logo img{
  height: 44px; width: auto; max-width: 200px; object-fit: contain;
  filter: none !important;
  transition: opacity var(--d-mid) var(--e-std);
}
.r-nav__logo:hover img{ opacity: .82; }
.r-nav__actions{ display: flex; align-items: center; gap: 10px; }

/* Measured at 320: the two-button cluster ran to 383px against a 320 viewport.
   The floating Enquire button already carries this job on a phone. */
@media (max-width: 640px){ .r-nav__actions .r-btn{ display: none; } }
@media (max-width: 400px){ .r-nav__logo img{ height: 32px; max-width: 128px; } }

.r-menu-btn{
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 18px;
  border-radius: var(--rad-pill);
  background: rgba(var(--r-scrim), .42);
  color: #fff;
  border: 1px solid rgba(255,255,255,.32);
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background var(--d-mid) var(--e-std), border-color var(--d-mid) var(--e-std);
}
.r-menu-btn:hover{ background: rgba(var(--r-scrim), .72); border-color: #fff; }
.r-menu-btn__bars{ display: grid; gap: 4px; width: 18px; }
.r-menu-btn__bars i{ display: block; height: 1.5px; background: var(--r-gold-ac); transition: width var(--d-fast) var(--e-std); }
.r-menu-btn__bars i:nth-child(1){ width: 18px; }
.r-menu-btn__bars i:nth-child(2){ width: 12px; }
.r-menu-btn__bars i:nth-child(3){ width: 18px; }
.r-menu-btn:hover .r-menu-btn__bars i{ width: 18px; }

/* -------- drawer -------- */
.r-drawer{
  position: fixed; inset: 0; z-index: 130;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--s-6);
  padding: clamp(20px, 4vw, 56px) var(--r-gutter);
  background: rgba(var(--r-scrim), .97);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  overflow-y: auto;
  visibility: hidden; opacity: 0;
  transition: opacity var(--d-mid) var(--e-std), visibility 0s linear var(--d-mid);
}
.r-drawer.is-open{ visibility: visible; opacity: 1; transition-delay: 0s; }

.r-drawer__top{
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.r-drawer__top img{ height: 34px; width: auto; max-width: 160px; object-fit: contain; filter: brightness(0) invert(1); }

.r-drawer__grid{
  display: grid; gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding-block: var(--s-6);
}
@media (min-width: 960px){ .r-drawer__grid{ grid-template-columns: 1.6fr .9fr; } }

.r-drawer__nav li + li{ margin-top: clamp(4px, .7vw, 10px); }
.r-drawer__nav a{
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--r-display);
  font-size: clamp(1.75rem, 4.4vw, 3.5rem);
  font-weight: 300; line-height: 1.15;
  color: #fff;
  transition: color var(--d-mid) var(--e-std);
}
.r-drawer__nav a:hover{ color: var(--r-gold-ac); }
.r-drawer__nav .r-drawer__ix{
  font-family: var(--r-sans); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .18em; color: var(--r-gold-ac); flex: 0 0 auto;
}
.r-drawer__nav span:last-child{ transition: transform var(--d-mid) var(--e-out); }
.r-drawer__nav a:hover span:last-child{ transform: translateX(12px); }

.r-drawer__card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--rad-4);
  padding: clamp(22px, 2.6vw, 34px);
  display: grid; gap: var(--s-5);
}
.r-drawer__card dt{
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--r-gold-ac); margin-bottom: 6px;
}
.r-drawer__card dd{ margin: 0; color: var(--r-body-dk); font-size: var(--t-sm); }
.r-drawer__card dd a{ color: #fff; font-weight: 600; font-size: var(--t-body); }
.r-drawer__card dd a:hover{ color: var(--r-gold-ac); }

.r-drawer__foot{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: var(--t-xs); color: rgba(255,255,255,.6);
}

/* -------- floating enquire -------- */
.r-enquire{
  position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px);
  z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 14px 22px;
  border-radius: var(--rad-pill);
  background: var(--r-night);
  color: #fff;
  border: 1px solid var(--r-gold);
  font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  box-shadow: var(--sh-4);
  transition: background var(--d-mid) var(--e-std), transform var(--d-fast) var(--e-std);
}
.r-enquire:hover{ background: var(--r-gold-dk); color: #fff; }
.r-enquire:active{ transform: translateY(1px) scale(.99); }
.r-enquire svg{ width: 16px; height: 16px; color: var(--r-gold-ac); }
.r-enquire:hover svg{ color: #fff; }

/* ================================================================ §1  HERO */
/* Composition: full-bleed video, copy ranged LEFT and anchored to the lower
   third. Deliberately not a centred stack — two reasons. It is the archetype
   nobody else in the roster holds, and it puts the text where the scrim can
   be strongest while the upper-right two thirds of the frame stay clean, so
   the video is actually visible. Centred copy over a bright cloud plate needs
   ~.86 black everywhere to clear 4.5:1, which hides the video it sits on.   */

.r-hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--r-night);
  isolation: isolate;
}
@supports not (min-height: 100svh){ .r-hero{ min-height: 92vh; } }

.r-hero__media{ position: absolute; inset: 0; z-index: 0; }
.r-hero__vid{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1100ms var(--e-std);
  will-change: opacity;
}
.r-hero__vid.is-live{ opacity: 1; }
/* Slide 1 is visible in the BASE rule. If the script never runs, the hero is
   still a playing video with readable copy over it. */
.r-hero__vid[data-slide="0"]{ opacity: 1; }

/* SCRIM — sized from measurement, not taste.
   The bar: small white text needs the composited background at L <= 0.1833,
   which over a PURE WHITE video frame means alpha >= 0.821. That is the real
   constraint, and the first pass missed it: measured at 390 the eyebrow came
   back 1.37:1 and the subline 4.11:1, because the copy stack sits higher in
   the frame on a phone and the horizontal ramp has already faded out by the
   time the line reaches its end.

   So the ramps are per-breakpoint. Desktop keeps a horizontal ramp so the
   upper-right two thirds of the video stay clean; mobile drops it entirely
   and carries everything on a deeper vertical ramp, because at 390 the copy
   spans the full width and a left-anchored ramp cannot help it.             */
.r-hero__scrim{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(var(--r-scrim), .94)  0%,
      rgba(var(--r-scrim), .90) 30%,
      rgba(var(--r-scrim), .84) 48%,
      rgba(var(--r-scrim), .52) 62%,
      rgba(var(--r-scrim), .18) 78%,
      rgba(var(--r-scrim), .06) 90%,
      rgba(var(--r-scrim), .30) 100%),
    linear-gradient(to right,
      rgba(var(--r-scrim), .72)  0%,
      rgba(var(--r-scrim), .34) 34%,
      rgba(var(--r-scrim), 0)   64%);
}

@media (max-width: 860px){
  .r-hero__scrim{
    background: linear-gradient(to top,
      rgba(var(--r-scrim), .95)  0%,
      rgba(var(--r-scrim), .93) 38%,
      rgba(var(--r-scrim), .92) 58%,
      rgba(var(--r-scrim), .84) 70%,
      rgba(var(--r-scrim), .40) 84%,
      rgba(var(--r-scrim), .14) 94%,
      rgba(var(--r-scrim), .34) 100%);
  }
}

.r-hero__inner{
  position: relative; z-index: 2;
  width: 100%;
  padding-block: clamp(96px, 13vh, 168px) clamp(40px, 7vh, 84px);
}

.r-hero__grid{
  display: grid; gap: var(--s-6);
  align-items: end;
}
@media (min-width: 1000px){
  .r-hero__grid{ grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); }
}

/* -------- the two story stages -------- */
.r-hero__stages{ position: relative; }
.r-hero__stage{
  display: grid; gap: clamp(16px, 2vw, 26px);
  justify-items: start;
}
/* Stage 2 is stacked on stage 1 so the hero never changes height. */
.r-hero__stage[data-slide="1"]{
  position: absolute; inset: 0 0 auto 0;
  width: 100%;
  opacity: 0;
  transform: translateY(22px);
  filter: blur(10px);
  pointer-events: none;
  transition: opacity 900ms var(--e-out), transform 900ms var(--e-out), filter 900ms var(--e-out);
}
.r-hero__stage.is-live{ opacity: 1; transform: none; filter: none; pointer-events: auto; }
.r-hero__stage[data-slide="0"]{
  transition: opacity 900ms var(--e-out), transform 900ms var(--e-out), filter 900ms var(--e-out);
}
.r-hero__stage[data-slide="0"].is-out{
  opacity: 0; transform: translateY(-22px); filter: blur(10px); pointer-events: none;
}

/* White, not gold. Over a worst-case video frame the eyebrow's 11px needs the
   background at L <= 0.1833 for white but L <= 0.1080 for #E7D2AD — gold costs
   ~8 points of scrim alpha for no branding the gold rule does not already
   carry. The rule mark stays gold. */
.r-hero .r-eyebrow{ color: #fff; }
.r-hero .r-eyebrow::before{ background: var(--r-gold-ac); opacity: 1; }
.r-hero__h1{
  color: #fff;
  font-size: var(--t-hero);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.024em;
  max-width: min(100%, 980px);   /* px, not ch — a ch cap here resolves in Inter */
  text-wrap: balance;
}
.r-hero__h1 em{ font-style: italic; color: var(--r-gold-ac); }
.r-hero__sub{
  color: rgba(255,255,255,.94);
  font-size: var(--t-lede);
  line-height: 1.6;
  max-width: 54ch;               /* on the prose itself — Inter */
  font-weight: 300;
}
.r-hero__cta{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
/* Measured at 390: the four hero actions computed 256/204/239/225px, so the
   stack read ragged. Full-width below 560 gives one clean column. */
@media (max-width: 560px){
  .r-hero__cta{ width: min(100%, 340px); }
  .r-hero__cta > *{ width: 100%; }
}

/* -------- slide rail (also the pause control) -------- */
.r-rail{ display: grid; gap: 18px; align-content: end; }
@media (max-width: 999px){
  .r-rail{ grid-auto-flow: column; justify-content: start; align-items: center; gap: 14px; }
}
.r-rail__item{
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;
  color: rgba(255,255,255,.62);
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  text-align: left;
  transition: color var(--d-mid) var(--e-std);
}
.r-rail__item:hover, .r-rail__item[aria-current="true"]{ color: #fff; }
.r-rail__track{
  position: relative; flex: 0 0 auto;
  width: 46px; height: 2px;
  background: rgba(255,255,255,.28);
  overflow: hidden;
}
.r-rail__fill{
  position: absolute; inset: 0;
  background: var(--r-gold-ac);
  transform: scaleX(0); transform-origin: 0 50%;
}
.r-rail__item[aria-current="true"] .r-rail__fill{ transform: scaleX(1); }
.r-rail__label{ white-space: nowrap; }
@media (max-width: 620px){ .r-rail__label{ position: absolute; width:1px; height:1px; overflow:hidden; clip: rect(0 0 0 0); } }

.r-rail__pause{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 4px;
  color: rgba(255,255,255,.62);
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  transition: color var(--d-mid) var(--e-std);
}
.r-rail__pause:hover{ color: #fff; }
.r-rail__pause svg{ width: 13px; height: 13px; }

/* -------- scroll cue -------- */
.r-cue{
  position: absolute; z-index: 2;
  left: var(--r-gutter); bottom: 18px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.r-cue__line{ display: block; width: 1px; height: 34px; background: linear-gradient(to bottom, var(--r-gold-ac), transparent); }
@media (max-width: 999px){ .r-cue{ display: none; } }

/* ============================================== §2  THE REEL  (signature) */
/* A pinned filmstrip. Vertical scroll drives horizontal travel; each frame's
   caption unmasks as it crosses centre. With JS off, or below 900px, or under
   reduced motion, the SAME markup is a native scroll-snap swipe rail — the
   fallback is a real, usable gallery, never a broken pin.                    */

.r-reel{ position: relative; background: var(--r-night); color: var(--r-body-dk); }

.r-reel__stage{
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(12px, 1.8vw, 24px);
  padding-block: var(--r-pad);
}

.r-reel__head{ display: grid; gap: 14px; }
@media (min-width: 900px){
  .r-reel__head{ grid-template-columns: 1fr auto; align-items: end; gap: var(--s-6); }
}
.r-reel__head .r-lede{ max-width: 46ch; }

.r-reel__viewport{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  /* Full-bleed, but the first frame still lines up with .r-wrap's text edge.
     A negative margin here would make the element wider than the page and
     cost a horizontal scrollbar at every width — measured, 16px at 320 up to
     56px at 1440. `100%` (not `100vw`) so the scrollbar is not counted. */
  padding-inline: max(var(--r-gutter), calc((100% - var(--r-max)) / 2));
}
.r-reel__track{
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 34px);
  width: max-content;
  padding-bottom: 6px;
}

.r-frame{
  scroll-snap-align: center;
  display: grid;
  gap: 10px;
  flex: 0 0 auto;
  align-content: start;
}
.r-frame__fig{
  position: relative; overflow: hidden;
  height: clamp(260px, 40svh, 450px);
  border-radius: var(--rad-3);
  background: var(--r-night-2);
  border: 1px solid var(--r-night-3);
}
.r-frame__fig > img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  transition: transform 1200ms var(--e-out), filter 900ms var(--e-std);
  filter: saturate(.9) brightness(.86);
}
.r-frame.is-focus .r-frame__fig > img{ transform: none; filter: saturate(1.04) brightness(1); }

.r-frame__fig,
.r-frame--lg .r-frame__fig,
.r-frame--md .r-frame__fig,
.r-frame--sq .r-frame__fig{ aspect-ratio: 16 / 9 !important; }

/* On a phone the rail is sized by WIDTH, not height. Measured at 390: a
   height-driven --lg frame computes 780px wide against a 350px content box,
   so scroll-snap centres on something twice the screen and the reader never
   sees a whole frame. One card plus a peek of the next is the target. */
@media (max-width: 899px){
  .r-frame__fig{ height: auto; width: min(84vw, 560px); }
  .r-frame--lg .r-frame__fig,
  .r-frame--md .r-frame__fig,
  .r-frame--sq .r-frame__fig{ aspect-ratio: 16 / 9 !important; }
  .r-frame__cap{ max-width: min(84vw, 560px); }
}

.r-frame__cap{
  display: grid; gap: 4px;
  max-width: 44ch;
  opacity: .42;
  transform: translateY(8px);
  transition: opacity var(--d-enter) var(--e-out), transform var(--d-enter) var(--e-out);
}
.r-frame.is-focus .r-frame__cap{ opacity: 1; transform: none; }
.r-frame__ix{
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .2em; color: var(--r-gold-ac);
}
.r-frame__title{ color: #fff; font-family: var(--r-display); font-size: var(--t-h4); font-weight: 500; line-height: 1.2; }
.r-frame__spec{ display: none !important; }

/* Ornament device 1 of 3 — the reel's own progress rail + frame counter. */
.r-reel__foot{
  display: flex; align-items: center; gap: var(--s-4);
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .2em;
  color: var(--r-gold-ac);
}
.r-reel__bar{ position: relative; flex: 1 1 auto; height: 2px; background: var(--r-night-3); overflow: hidden; }
.r-reel__bar i{
  position: absolute; inset: 0;
  background: var(--r-gold);
  transform: scaleX(0); transform-origin: 0 50%;
}
.r-reel__count{ flex: 0 0 auto; }
.r-reel__hint{ flex: 0 0 auto; color: rgba(255,255,255,.42); font-weight: 500; letter-spacing: .14em; }
@media (max-width: 680px){ .r-reel__hint{ display: none; } }

/* pinned mode — added by JS only at ≥900px with motion allowed */
.r-reel.is-pinned .r-reel__stage{
  position: sticky; top: 0;
  height: 100svh;
  padding-block: clamp(70px, 8.5vh, 96px) clamp(20px, 3vh, 32px);
  align-content: center;
}
.r-reel.is-pinned .r-reel__viewport{
  overflow: hidden;
  scroll-snap-type: none;
}
.r-reel.is-pinned .r-reel__track{ will-change: transform; }

/* ==================================================== §3  THE ADDRESS */

.r-address__grid{ display: grid; gap: clamp(32px, 5vw, 76px); }
@media (min-width: 900px){
  .r-address__grid{ grid-template-columns: 1.02fr 1fr; align-items: start; }
}
.r-address__copy{ display: grid; gap: var(--s-5); align-content: start; }
/* Measured at 1440: copy 359px against a 573px list. Sticking the copy keeps
   the 214px difference from reading as a hole under the paragraph. */
@media (min-width: 900px){
  .r-address__copy{ position: sticky; top: calc(var(--nav-h) + 40px); }
}

.r-tenets{ display: grid; }
.r-tenets li{ border-top: 1px solid var(--r-sand-300); }
.r-tenets li:last-child{ border-bottom: 1px solid var(--r-sand-300); }
.r-tenet{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px var(--s-5);
  padding-block: clamp(18px, 2.1vw, 26px);
  transition: background var(--d-mid) var(--e-std);
}
.r-tenet__ix{
  grid-row: 1 / span 2;
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .16em;
  color: var(--r-gold-dk);
  padding-top: 6px;
}
.r-tenet__t{ font-family: var(--r-display); font-size: var(--t-h3); font-weight: 500; color: var(--r-ink); line-height: 1.15; }
.r-tenet__d{ font-size: var(--t-sm); color: var(--r-body); max-width: 46ch; }

/* ==================================================== §4  ELEVATION */

.r-elev__head{ display: grid; gap: var(--s-4); max-width: 720px; margin-bottom: clamp(28px, 4vw, 56px); }

.r-elev__plate{ position: relative; }
.r-elev__fig{
  aspect-ratio: 16 / 9;
  border-radius: var(--rad-4);
  box-shadow: var(--sh-4);
}
@media (max-width: 700px){ .r-elev__fig{ aspect-ratio: 4 / 3; } }

/* THE BLEED MOMENT — this plate crosses out of the light band and lands on the
   dark one below. Overshoot is written as (this section's own padding + the
   pixels that actually cross), so `--bleed` IS the number of pixels over the
   line. Measured before: the plate ended 347px ABOVE the boundary, because the
   pillars row sat below it — a pull-up that lands inside its own section is
   invisible as a bug. The pillars now sit above the photograph.              */
#elevation{ z-index: 2; }               /* paint above the band it crosses into */
.r-elev__spec{
  position: relative;
  z-index: 2;
  margin-inline: auto;
  margin-top: clamp(-120px, -9vw, -56px);
  margin-bottom: calc(-1 * (var(--r-pad) + var(--bleed)));
  width: min(100%, 1020px);
  background: var(--r-sand-50);
  border: 1px solid var(--r-sand-300);
  border-radius: var(--rad-4);
  box-shadow: var(--sh-3);
  padding: clamp(22px, 3vw, 40px);
  display: grid; gap: var(--s-5);
}
@media (min-width: 820px){
  .r-elev__spec{ grid-template-columns: 1.25fr 1fr; align-items: center; gap: var(--s-7); }
}
.r-elev__specrows{ display: grid; gap: 0; }
.r-elev__specrows div{
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding-block: 11px;
  border-bottom: 1px solid var(--r-sand-300);
  font-size: var(--t-sm);
}
.r-elev__specrows div:last-child{ border-bottom: 0; }
.r-elev__specrows dt{ color: var(--r-body); }
.r-elev__specrows dd{ margin: 0; color: var(--r-ink); font-weight: 600; }

.r-pillars{ display: grid; gap: 0; margin-block: clamp(32px, 4vw, 52px) clamp(44px, 6vw, 76px); }
@media (min-width: 860px){ .r-pillars{ grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }
.r-pillar{
  display: grid; gap: 10px; align-content: start;
  padding-block: var(--s-5);
  border-top: 1px solid var(--r-sand-300);
}
.r-pillar__ico{ color: var(--r-gold-dk); }
.r-pillar__ico svg{ width: 26px; height: 26px; }
.r-pillar h3{ font-family: var(--r-display); font-size: var(--t-h3); font-weight: 500; }
.r-pillar p{ font-size: var(--t-sm); color: var(--r-body); }

/* ==================================================== §5  THE FIGURES */
/* The page's oversized-type moment. One dark band, four numbers, nothing else. */

/* Extra head-room so the plate bleeding down from §4 lands on the band
   rather than on this section's own heading. */
.r-figures{ position: relative; overflow: hidden; padding-top: calc(var(--r-pad) + var(--bleed)); }
.r-figures__bg{ position: absolute; inset: 0; z-index: 0; }
.r-figures__bg img{ width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.r-figures__bg::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--r-night) 0%, rgba(var(--r-scrim), .72) 45%, var(--r-night) 100%);
}
.r-figures .r-wrap{ position: relative; z-index: 1; }
.r-figures__head{ display: grid; gap: var(--s-4); max-width: 640px; margin-bottom: clamp(40px, 6vw, 82px); }

.r-figgrid{ display: grid; gap: 0; }
@media (min-width: 700px){ .r-figgrid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px){ .r-figgrid{ grid-template-columns: repeat(4, 1fr); } }
.r-figcell{
  display: grid; gap: 6px; align-content: start;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--r-night-3);
}
@media (min-width: 700px){
  .r-figcell{ padding-inline: clamp(16px, 2vw, 30px); }
  .r-figcell:first-child{ padding-left: 0; }
}
@media (min-width: 1080px){
  .r-figcell + .r-figcell{ border-left: 1px solid var(--r-night-3); }
}
.r-figcell__n{
  font-family: var(--r-display);
  font-size: var(--t-figure);
  font-weight: 300;
  line-height: .92;
  letter-spacing: -.03em;
  color: #fff;
  /* Cormorant defaults to old-style figures, which renders "100%" as "IOO%".
     Charming in prose, unreadable on a spec number. */
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "onum" 0;
}
.r-figcell__n sup{ font-size: .34em; vertical-align: super; color: var(--r-gold-ac); letter-spacing: 0; }
.r-figcell__u{ font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--r-gold-ac); }
.r-figcell__d{ font-size: var(--t-xs); color: var(--r-body-dk); max-width: 30ch; margin-top: 4px; }

/* ==================================================== §6  BLUEPRINTS */

.r-bp__head{ display: grid; gap: var(--s-4); max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }

.r-tabs{
  display: inline-flex; flex-wrap: wrap; gap: 6px;
  padding: 6px;
  background: var(--r-sand-200);
  border: 1px solid var(--r-sand-300);
  border-radius: var(--rad-pill);
}
@media (max-width: 560px){ .r-tabs{ width: 100%; border-radius: var(--rad-3); } }
.r-tab{
  min-height: 44px; padding: 10px 22px;
  border-radius: var(--rad-pill);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: transparent;
  color: var(--r-body);
  transition: background var(--d-mid) var(--e-std), color var(--d-mid) var(--e-std);
}
@media (max-width: 560px){ .r-tab{ flex: 1 1 100%; border-radius: var(--rad-2); } }
.r-tab:hover{ background: rgba(var(--r-scrim), .05); color: var(--r-ink); }
.r-tab[aria-selected="true"]{ background: var(--r-ink); color: #fff; }

.r-bp__panel{
  margin-top: var(--s-6);
  display: grid; gap: clamp(24px, 3.4vw, 48px);
  background: #fff;
  border: 1px solid var(--r-sand-300);
  border-radius: var(--rad-4);
  padding: clamp(18px, 2.6vw, 40px);
  box-shadow: var(--sh-2);
}
@media (min-width: 980px){ .r-bp__panel{ grid-template-columns: 1.55fr 1fr; align-items: start; } }

.r-bp__plan{
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  min-height: 480px;
}
.r-bp__plan [data-plan]{
  width: 100%;
  max-width: 520px;
  aspect-ratio: 980 / 1600 !important;
  margin: 0 auto;
}
/* NEVER put a max-height on this image. Measured: the sheet wrapper is sized
   by aspect-ratio (520x849 at 1440) and the pins are positioned as a % of THAT
   box. A `max-height:560px` clamps the image to 520x560 inside an 849-tall
   wrapper, so every pin lands ~290px below the drawing it points at. Cap the
   wrapper's width instead; the aspect-ratio does the rest. */
.r-bp__plan img{ object-fit: contain; border-radius: var(--rad-2); }
.r-bp__plan img[hidden]{ display: none; }

/* 44px hit area, 34px visible disc. The button itself is transparent so the
   target can meet the minimum without the mark growing. */
.r-pin{
  position: absolute;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent;
  color: #fff;
  font-size: var(--t-xs); font-weight: 700;
}
.r-pin > span[aria-hidden]{
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--r-gold-dk);
  box-shadow: 0 0 0 4px rgba(173,146,115,.28);
  transition: transform var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-std);
}
.r-pin:hover > span[aria-hidden],
.r-pin[aria-current="true"] > span[aria-hidden]{
  transform: scale(1.16);
  box-shadow: 0 0 0 7px rgba(173,146,115,.32);
}
.r-pin[hidden]{ display: none; }

.r-bp__side{ display: grid; gap: var(--s-5); align-content: start; }
.r-inspect{
  background: var(--r-sand-100);
  border: 1px solid var(--r-sand-300);
  border-radius: var(--rad-3);
  padding: clamp(16px, 2vw, 24px);
  display: grid; gap: 12px;
}
.r-inspect__fig{ aspect-ratio: 16 / 10; border-radius: var(--rad-2); }
.r-inspect__fig img{ transition: opacity var(--d-mid) var(--e-std); }
.r-inspect h3{ font-family: var(--r-display); font-size: var(--t-h3); font-weight: 500; }
.r-inspect p{ font-size: var(--t-sm); color: var(--r-body); }

.r-keyfacts{ display: grid; gap: 0; }
.r-keyfacts div{
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding-block: 11px; border-bottom: 1px solid var(--r-sand-300);
  font-size: var(--t-sm);
}
.r-keyfacts div:last-child{ border-bottom: 0; }
.r-keyfacts dt{ color: var(--r-body); }
.r-keyfacts dd{ margin: 0; font-weight: 600; color: var(--r-ink); }
.r-keyfacts dd.is-hero{ color: var(--r-gold-dk); }

/* ==================================================== §7  INVESTMENT */

.r-inv__head{ display: grid; gap: var(--s-4); max-width: 760px; margin-bottom: clamp(32px, 4.6vw, 64px); }
.r-inv__grid{ display: grid; gap: clamp(20px, 2.6vw, 34px); }
@media (min-width: 940px){ .r-inv__grid{ grid-template-columns: repeat(2, 1fr); } }

.r-plan{
  display: grid; align-content: start; gap: var(--s-5);
  background: #fff;
  border: 1px solid var(--r-sand-300);
  border-radius: var(--rad-4);
  padding: clamp(24px, 3vw, 44px);
  transition: border-color var(--d-mid) var(--e-std), box-shadow var(--d-mid) var(--e-std), transform var(--d-mid) var(--e-out);
}
.r-plan:hover, .r-plan:focus-within{ border-color: var(--r-gold); box-shadow: var(--sh-3); transform: translateY(-4px); }
.r-plan--flag{ border-color: rgba(173,146,115,.55); box-shadow: var(--sh-2); }

.r-plan__top{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.r-plan__chip{
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--r-gold-dk);
  background: var(--r-sand-200);
  border: 1px solid var(--r-sand-300);
  border-radius: var(--rad-pill);
  padding: 6px 14px;
}
.r-plan h3{ font-family: var(--r-display); font-size: var(--t-h3); font-weight: 500; }
.r-plan__sub{ font-size: var(--t-xs); color: var(--r-body); }

.r-plan__price{
  background: var(--r-sand-100);
  border: 1px solid var(--r-sand-300);
  border-radius: var(--rad-3);
  padding: clamp(18px, 2.2vw, 28px);
  display: grid; gap: 4px;
}
.r-plan__price b{
  font-family: var(--r-display); font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 400; line-height: 1; color: var(--r-ink); letter-spacing: -.02em;
}
.r-plan__price span:first-child{ font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--r-body); }
.r-plan__price span:last-child{ font-size: var(--t-xs); color: var(--r-gold-dk); font-weight: 600; }

.r-plan__rows{ display: grid; gap: 0; }
.r-plan__rows div{
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding-block: 11px; border-bottom: 1px solid var(--r-sand-300);
  font-size: var(--t-sm);
}
.r-plan__rows div:last-child{ border-bottom: 0; }
.r-plan__rows dt{ color: var(--r-body); }
.r-plan__rows dd{ margin: 0; font-weight: 600; color: var(--r-ink); text-align: right; }
.r-plan__rows dd.is-hero{ color: var(--r-gold-dk); }
.r-plan .r-btn{ width: 100%; }

.r-inv__note{
  margin-top: var(--s-6);
  font-size: var(--t-xs);
  color: var(--r-body);
  max-width: 80ch;
}

/* ==================================================== §8  ARRIVAL */

.r-arrive__grid{ display: grid; gap: clamp(32px, 5vw, 76px); align-items: center; }
@media (min-width: 940px){ .r-arrive__grid{ grid-template-columns: 1fr 1.05fr; } }
.r-arrive__copy{ display: grid; gap: var(--s-5); align-content: start; }

/* Ornament device 3 of 3 — the route line. Drawn state is the BASE state;
   the dash animation is the enhancement and cannot hide anything.
   Defaults are the LIGHT treatment, because that is where this component now
   lives; the dark variant is an override, so the component can be reused on
   either ground without a colour ever being hard-coded to one of them.      */
.r-route{ display: grid; gap: 0; position: relative; }
.r-route li{
  position: relative;
  display: grid; gap: 3px;
  padding: 14px 0 14px 34px;
}
.r-route li::before{
  content: ""; position: absolute; left: 5px; top: 22px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--r-gold-dk);
  box-shadow: 0 0 0 4px rgba(173,146,115,.20);
}
.r-route li:not(:last-child)::after{
  content: ""; position: absolute; left: 9px; top: 34px; bottom: -4px;
  width: 1px; background: linear-gradient(to bottom, var(--r-gold), rgba(173,146,115,.25));
}
.r-route li:last-child::before{ background: var(--r-ink); box-shadow: 0 0 0 5px rgba(173,146,115,.30); }
.r-route__t{ color: var(--r-ink); font-weight: 600; font-size: var(--t-body); }
.r-route__d{ font-size: var(--t-xs); color: var(--r-body); }

.r-band-dark .r-route li::before{ background: var(--r-gold-ac); box-shadow: 0 0 0 4px rgba(173,146,115,.22); }
.r-band-dark .r-route li:not(:last-child)::after{ background: linear-gradient(to bottom, var(--r-gold), rgba(173,146,115,.18)); }
.r-band-dark .r-route li:last-child::before{ background: #fff; box-shadow: 0 0 0 5px rgba(231,210,173,.28); }
.r-band-dark .r-route__t{ color: #fff; }
.r-band-dark .r-route__d{ color: var(--r-body-dk); }

.r-arrive__contact{ display: flex; flex-wrap: wrap; gap: 12px; }

/* Locator: the map is the section's answer, the arrival render is its mood.
   Both capped at 520px so a 600x770 phone-map crop cannot become the largest
   thing on the page — it is the weakest asset here and must not dominate.
   Measured at 1440: right column 667+223+caption ~= 944 against a ~700 copy
   column, a 26% difference, which `align-items:center` absorbs cleanly. */
.r-locator{
  display: grid; gap: 14px;
  width: min(100%, 520px);
  margin-inline: auto;
}
.r-locator .r-fig{ background: var(--r-sand-200); border: 1px solid var(--r-sand-300); width: 100%; }
.r-band-dark .r-locator .r-fig{ background: var(--r-night-2); border-color: var(--r-night-3); }
.r-locator__map{ aspect-ratio: 600 / 770; border-radius: var(--rad-4); box-shadow: var(--sh-4); }
.r-locator__strip{ aspect-ratio: 21 / 9; border-radius: var(--rad-3); }
.r-locator__cap{
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 4px 18px;
  margin-top: 2px;
}
@media (max-width: 520px){
  .r-locator__map{ aspect-ratio: 4 / 5; }   /* less vertical on a phone */
}

/* ==================================================== §9  CLOSING */

.r-close{ position: relative; overflow: hidden; background: var(--r-night); }
.r-close__bg{ position: absolute; inset: 0; z-index: 0; }
.r-close__bg img{ width: 100%; height: 100%; object-fit: cover; }
/* .86 at the top, not .82: the eyebrow sits there at 11px, and against a
   worst-case bright patch of the render .82 leaves white at 4.49:1 — a pass
   by 0.2% on a photograph, which this file's rules count as a fail. */
.r-close__bg::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(var(--r-scrim), .86) 0%,
    rgba(var(--r-scrim), .78) 46%,
    rgba(var(--r-scrim), .92) 100%);
}
.r-close .r-wrap{ position: relative; z-index: 1; }
/* Same rule as the hero: an eyebrow over a photograph is white, and the gold
   lives in the rule mark. Gold at 11px needs ~8 more points of scrim alpha. */
.r-close .r-eyebrow{ color: #fff; }
.r-close .r-eyebrow::before{ background: var(--r-gold-ac); opacity: 1; }
.r-close__inner{ display: grid; gap: var(--s-5); justify-items: center; text-align: center; max-width: 860px; margin-inline: auto; }
.r-close h2{ color: #fff; }
.r-close .r-lede{ color: rgba(255,255,255,.92); }
.r-close__cta{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }
.r-close__tel{
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-variant-numeric: lining-nums;   /* it is a phone number, not prose */
  font-family: var(--r-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  color: var(--r-gold-ac);
  letter-spacing: .01em;
}
.r-close__tel:hover{ color: #fff; }

/* ---------------------------------------------------------------- 10. FOOTER */

.r-foot{
  background: var(--r-ink);
  color: var(--r-body-dk);
  padding-block: clamp(56px, 7vw, 92px) var(--s-6);
  padding-inline: 0 !important;
}
.r-foot .r-wrap{
  width: 100%;
  max-width: calc(var(--r-max) + var(--r-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--r-gutter);
}
.r-foot__grid{ display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 860px){ .r-foot__grid{ grid-template-columns: 2.2fr 1fr 1.2fr; } }
.r-foot__brand{ display: grid; gap: var(--s-4); align-content: start; justify-items: start; }
.r-foot__brand > a{ display: inline-flex; align-items: center; min-height: 44px; }
.r-foot__brand img{
  height: 44px; width: auto; max-width: 200px; object-fit: contain;
  filter: none !important;
}
.r-foot__brand p{ font-size: var(--t-sm); color: var(--r-body-dk); max-width: 46ch; }
.r-foot h2{ font-family: var(--r-sans); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--r-gold-ac); margin-bottom: var(--s-4); }
.r-foot__list{ display: grid; font-size: var(--t-sm); }
.r-foot__list li{ display: flex; align-items: center; min-height: 34px; }
/* Measured: these were 17px tall. Gap traded for padding so the targets
   reach 44px without the column growing much. */
.r-foot__list a{
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--r-body-dk);
  transition: color var(--d-mid) var(--e-std);
}
.r-foot__list a:hover{ color: var(--r-gold-ac); }
.r-foot__bottom{
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3);
  margin-top: clamp(40px, 5vw, 64px); padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: var(--t-xs); color: rgba(255,255,255,.55);
}

/* ----------------------------------------------------------------- 11. MODAL */

.r-modal{
  position: fixed; inset: 0; z-index: 140;
  display: grid; place-items: center;
  padding: var(--s-4);
  background: rgba(var(--r-scrim), .88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  overflow-y: auto;
  visibility: hidden; opacity: 0;
  transition: opacity var(--d-mid) var(--e-std), visibility 0s linear var(--d-mid);
}
.r-modal.is-open{ visibility: visible; opacity: 1; transition-delay: 0s; }
.r-modal__card{
  position: relative;
  width: min(100%, 560px);
  margin-block: auto;
  background: var(--r-sand-50);
  border: 1px solid var(--r-sand-300);
  border-radius: var(--rad-4);
  box-shadow: var(--sh-4);
  padding: clamp(24px, 3vw, 40px);
  display: grid; gap: var(--s-5);
}
.r-modal__close{
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: transparent; color: var(--r-body);
  transition: background var(--d-mid) var(--e-std), color var(--d-mid) var(--e-std);
}
.r-modal__close:hover{ background: var(--r-sand-200); color: var(--r-ink); }
.r-modal__close svg{ width: 20px; height: 20px; }
.r-modal__head{ display: grid; gap: 6px; text-align: center; }
.r-modal__head h2{ font-family: var(--r-display); font-size: var(--t-h3); font-weight: 500; }
.r-modal__head p{ font-size: var(--t-xs); color: var(--r-body); }

.r-field{ display: grid; gap: 6px; }
.r-field > span{
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--r-body);
}
.r-field input, .r-field select{
  min-height: 48px;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--r-sand-300);
  border-radius: var(--rad-2);
  color: var(--r-ink);
  font-size: var(--t-sm);
  transition: border-color var(--d-mid) var(--e-std), box-shadow var(--d-mid) var(--e-std);
}
.r-field input:focus, .r-field select:focus{
  outline: none;
  border-color: var(--r-gold);
  box-shadow: 0 0 0 3px rgba(173,146,115,.22);
}
.r-form{ display: grid; gap: var(--s-4); }
.r-form__row{ display: grid; gap: var(--s-4); }
@media (min-width: 460px){ .r-form__row{ grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------- 12. REDUCED MOTION */
/* Kill animation and transition, then RESOLVE every animated element by name.
   Never `transform:none` on a wildcard — several transforms here are layout
   (the hero's stacked stage, the reel track, the progress bars).             */

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

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

  /* reveals resolve to their finished state */
  .raha-js [data-r] > *,
  .raha-js [data-r-solo]{ opacity: 1 !important; transform: none !important; }
  .raha-js [data-r-img] > img{ transform: none !important; }

  /* the reel is never pinned; it is the swipe rail, fully readable */
  .r-reel.is-pinned .r-reel__stage{ position: static; height: auto; }
  .r-reel.is-pinned .r-reel__viewport{ overflow-x: auto; scroll-snap-type: x mandatory; }
  .r-reel.is-pinned .r-reel__track{ transform: none !important; }
  .r-frame__cap{ opacity: 1 !important; transform: none !important; }
  .r-frame__fig > img{ transform: none !important; filter: none !important; }

  /* the hero stops rotating; stage 1 stands */
  .r-hero__vid[data-slide="1"]{ opacity: 0 !important; }
  .r-hero__vid[data-slide="0"]{ opacity: 1 !important; }
  .r-hero__stage[data-slide="0"]{ opacity: 1 !important; transform: none !important; filter: none !important; }
  .r-hero__stage[data-slide="1"]{ opacity: 0 !important; }

  /* progress bars keep their scaleX transform — it is their value, not motion */
}

/* ------------------------------------------------------------ 13. PRINT-ISH */

@media (max-width: 340px){
  :root{ --r-gutter: 16px; }
}




/* ==========================================================================
   RAHA MASTER SUITE: PRECISE HERO PLACEMENT, SCROLL-SHRINKING LOGO & MOTION
   ========================================================================== */
:root {
  --r-gold:       #c4a567 !important;
  --r-gold-dk:    #a88944 !important;
  --r-gold-lt:    #f3e8d2 !important;
  --r-gold-ac:    #e2cb8f !important;
  --r-gold-hover: #b39352 !important;
}

/* All Sections Fully Visible & Beautiful */
[data-r] > *, [data-r-solo], [data-r], .r-section, .r-bp, .r-inv, .r-close, .r-figures, .r-reel, .r-frame {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* ==========================================================================
   HEADER NAVIGATION: STICKY GLASSMORPHISM & SMOOTH LOGO SHRINK ON SCROLL
   ========================================================================== */
.r-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
  background: transparent !important;
  padding: 24px 0 !important;
  transition: background 0.35s ease, padding 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease !important;
  overflow: visible !important;
}

.r-nav.is-stuck {
  background: rgba(20, 17, 15, 0.90) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  padding: 10px 0 !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
}

.r-nav__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.r-nav__logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-left: -12px !important;
  padding: 0 !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform-origin: left center !important;
}

.r-nav__logo img {
  max-width: 220px !important;
  width: auto !important;
  height: auto !important;
  max-height: 80px !important;
  filter: none !important;
  display: block !important;
  transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform-origin: left center !important;
}

/* SCROLL DOWN STATE: Logo shrinks and sits compactly on top-left */
.r-nav.is-stuck .r-nav__logo img {
  max-width: 135px !important;
  max-height: 48px !important;
  transform: scale(0.92) !important;
}

@media (max-width: 768px) {
  .r-nav {
    padding: 16px 0 !important;
  }
  .r-nav.is-stuck {
    padding: 8px 0 !important;
  }
  .r-nav__logo {
    margin-left: 0 !important;
  }
  .r-nav__logo img {
    max-width: 155px !important;
    max-height: 55px !important;
  }
  .r-nav.is-stuck .r-nav__logo img {
    max-width: 115px !important;
    max-height: 40px !important;
  }
}

/* HERO SECTION: Pixel-locked identical placement for Slide 1 and Slide 2 */
.r-hero {
  position: relative !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden !important;
  background: var(--r-night, #14110F) !important;
}

.r-hero__inner {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  padding-block: clamp(96px, 13vh, 168px) clamp(40px, 7vh, 84px) !important;
}

.r-hero__grid {
  display: grid !important;
  gap: var(--s-6, 28px) !important;
  align-items: end !important;
}

@media (min-width: 1000px) {
  .r-hero__grid {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: var(--s-8, 48px) !important;
  }
}

.r-hero__stages {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  align-items: end !important;
  min-height: 480px !important;
  width: 100% !important;
}

.r-hero__stage {
  grid-area: 1 / 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 65ch !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: opacity 700ms ease, transform 700ms ease !important;
}

.r-hero__stage:not(.is-live) {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(12px) !important;
  visibility: hidden !important;
}

.r-hero__stage.is-live {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}

.r-hero__stage .r-eyebrow {
  margin: 0 0 16px 0 !important;
  height: 24px !important;
  line-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  color: #ffffff !important;
  font-size: var(--t-eyebrow, 0.72rem) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

.r-hero__stage .r-eyebrow::before {
  content: "" !important;
  display: inline-block !important;
  width: 24px !important;
  height: 1px !important;
  background: var(--r-gold) !important;
  margin-right: 12px !important;
}

.r-hero__stage .r-hero__h1 {
  margin: 0 0 20px 0 !important;
  color: #ffffff !important;
  font-family: var(--r-display, 'Cormorant Garamond', serif) !important;
  font-size: clamp(2.8rem, 6.5vw, 5.2rem) !important;
  font-weight: 300 !important;
  line-height: 0.96 !important;
  letter-spacing: -0.025em !important;
  min-height: 2.05em !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.r-hero__stage .r-hero__h1 em {
  font-style: italic !important;
  color: var(--r-gold-ac) !important;
}

.r-hero__stage .r-hero__sub {
  margin: 0 0 28px 0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: clamp(1rem, 1.3vw, 1.15rem) !important;
  line-height: 1.6 !important;
  font-weight: 300 !important;
  min-height: 76px !important;
  max-width: 54ch !important;
}

.r-hero__stage .r-hero__cta {
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 52px !important;
}

/* Gold Buttons */
.r-btn--gold, .elementor-button, button.r-btn, a.r-btn, .r-plan .r-btn {
  background-color: var(--r-gold) !important;
  border-color: var(--r-gold) !important;
  color: #14110F !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}

.r-btn--gold:hover, .elementor-button:hover, button.r-btn:hover, a.r-btn:hover, .r-plan .r-btn:hover {
  background-color: var(--r-gold-hover) !important;
  border-color: var(--r-gold-hover) !important;
  color: #ffffff !important;
}

/* RESIDENCE REEL PINNED SCROLL-TRIGGER */
.r-reel {
  position: relative !important;
  background: var(--r-night, #14110F) !important;
  color: var(--r-body-dk, #C9C2BC) !important;
}

.r-reel.is-pinned .r-reel__stage {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: clamp(36px, 5vh, 64px) 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.r-reel.is-pinned .r-reel__viewport {
  overflow: hidden !important;
  scroll-snap-type: none !important;
  width: 100% !important;
  padding-inline: max(var(--r-gutter, 24px), calc((100% - var(--r-max, 1360px)) / 2)) !important;
}

.r-reel.is-pinned .r-reel__track {
  display: flex !important;
  align-items: flex-start !important;
  gap: clamp(20px, 2.5vw, 36px) !important;
  width: max-content !important;
  will-change: transform !important;
  transition: transform 0.05s linear !important;
}

.r-reel .r-frame {
  flex: 0 0 auto !important;
  width: clamp(380px, 42vw, 620px) !important;
  max-width: 85vw !important;
  display: grid !important;
  gap: 12px !important;
}

.r-reel .r-frame__fig {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  border-radius: var(--rad-3, 8px) !important;
  overflow: hidden !important;
  background: var(--r-night-2, #1C1917) !important;
  border: 1px solid var(--r-night-3, #2A2522) !important;
}

.r-reel .r-frame__fig img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.03) !important;
  transition: transform 0.8s ease, filter 0.8s ease !important;
  filter: brightness(0.88) saturate(0.9) !important;
}

.r-reel .r-frame.is-focus .r-frame__fig img {
  transform: scale(1) !important;
  filter: brightness(1) saturate(1.05) !important;
}

.r-reel .r-frame__cap {
  opacity: 0.45 !important;
  transform: translateY(6px) !important;
  transition: opacity 0.5s ease, transform 0.5s ease !important;
}

.r-reel .r-frame.is-focus .r-frame__cap {
  opacity: 1 !important;
  transform: none !important;
}

.r-reel__foot {
  display: flex !important;
  align-items: center !important;
  gap: var(--s-4, 18px) !important;
}

.r-reel__bar {
  position: relative !important;
  flex: 1 1 auto !important;
  height: 2px !important;
  background: var(--r-night-3, #2A2522) !important;
  overflow: hidden !important;
}

.r-reel__bar i {
  position: absolute !important;
  inset: 0 !important;
  background: var(--r-gold) !important;
  transform: scaleX(0) !important;
  transform-origin: 0 50% !important;
  transition: transform 0.05s linear !important;
}

/* INTERACTIVE BLUEPRINTS: Pixel-locked identical placement for Ground and Lower Ground floors */
.r-bp__panel {
  display: grid !important;
  gap: clamp(24px, 3.5vw, 48px) !important;
  align-items: start !important;
}

@media (min-width: 900px) {
  .r-bp__panel {
    grid-template-columns: 1.15fr 0.85fr !important;
  }
}

.r-bp__plan {
  position: relative !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  align-items: start !important;
  justify-items: center !important;
}

.r-bp__plan [data-plan] {
  grid-area: 1 / 1 !important;
  width: 100% !important;
  max-width: 520px !important;
  aspect-ratio: 1000 / 1600 !important;
  margin: 0 auto !important;
  position: relative !important;
  transition: opacity 0.35s ease, visibility 0.35s ease !important;
}

.r-bp__plan [data-plan][hidden] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.r-bp__plan [data-plan]:not([hidden]) {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.r-bp__plan img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* FOOTER BRAND LOGO & VERTICAL ALIGNMENT */
.r-foot__brand {
  display: grid !important;
  justify-items: start !important;
  align-content: start !important;
}

.r-foot__brand > a,
footer .r-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-left: -12px !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.r-foot__brand img,
footer .r-logo img,
.r-footer-logo img {
  max-width: 235px !important;
  width: auto !important;
  height: auto !important;
  filter: none !important;
  display: block !important;
  margin-left: 0 !important;
}

@media (max-width: 991px) {
  .r-foot__brand > a {
    margin-left: 0 !important;
  }
  .r-foot__brand img {
    max-width: 180px !important;
  }
}