:root {
  --ink: #2b3a39;
  --muted: #667372;
  --deep: #4f6662;
  --paper: #f2f1ee;
  --sand: #ddd6cb;
  --line: rgba(47, 63, 61, 0.22);
  --accent: #a29176;

  /* Brand palette */
  --pearl-white: #f2f2f4;
  --marble-white: #f3eee7;
  --limestone: #e5e2da;
  --quill-grey: #c6cfbf;
  --natural-beige: #a3937b;
  --teakwood: #8d7f6a;
  --palm-green: #69713e;
  --myrtle: #264620;
  --midnight: #151207;
  --black: #000000;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Futura', 'Century Gothic', sans-serif;
  scroll-behavior: smooth;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

.container {
  width: min(1223px, 92vw);
  margin: 0 auto;
}

.fp-register-spacer {
  width: 100%;
  height: 120px;
  background-color: #ffffff;
}

.section,
.section-dark {
  padding: 4rem 0;
}

h2,
h3,
h4,
.brand {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 400;
  margin: 0;
}

.plan-progress {
    margin: -4px 0 0;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--myrtle);
}
h2 {
  font-size: clamp(1.7rem, 2.3vw, 3rem);
}

p {
  margin: 0;
  line-height: 1.7;
}

.muted {
  color: var(--muted);
}

.section-head {
  border-left: 2px solid var(--line);
  padding-left: 0.75rem;
  margin-bottom: 1rem;
}

.site-header {
  position: fixed;
  top: 0;
  z-index: 40;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 2.5vw;
  background: linear-gradient(to bottom, rgba(22, 40, 37, 0.62), rgba(22, 40, 37, 0));
}

.brand-wrap {
  flex-shrink: 0;
  display: block;
  text-decoration: none;
  line-height: 0;
}

/* PSD logo: 124×117px — scale to fit header */
.brand-mark {
  height: 58px;
  width: auto;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.mobile-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(10, 26, 24, 0.22);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  cursor: pointer;
}

.mobile-menu-toggle span {
  width: 18px;
  height: 2px;
  background: #fff;
  display: block;
}

.site-nav a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  opacity: 0.88;
  transition: opacity 0.2s, color 0.2s;
  line-height: 1;
}

.site-nav a img {
  display: block;
  width: auto;
  height: 14px;
}

.site-nav a:hover {
  opacity: 1;
  color: #e0e0e0;
}

/* ENQUIRE NOW — bordered CTA */
.nav-enquire {
  border: 0;
  background: transparent;
  padding: 0;
  opacity: 0.88;
}

/* AR / EN language toggle */
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: transparent;
  padding: 0.42rem 0.75rem;
  cursor: pointer;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.88);
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}

.nav-lang:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.nav-lang-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-right: 0.1rem;
}

.nav-lang-sep {
  opacity: 0.45;
}

.nav-lang-en {
  font-weight: 600;
}

.nav-lang-ar {
  opacity: 0.65;
  font-weight: 400;
}

.btn {
  border: 0;
  background: #535a61;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.58rem;
  padding: 0.55rem 1.05rem;
  cursor: pointer;
}

.btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
}

.hero {
  position: relative;
  overflow: hidden;
  /* PSD canvas ratio: 1920×979 */
  aspect-ratio: 1920 / 979;
  min-height: 62vh;
}

/* PSD layer 221: base building photo */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* PSD layer 223: atmosphere overlay, opacity 207/255 ≈ 0.81 */
.hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.81;
  pointer-events: none;
}

/* PSD layer 225: SAWARI wordmark — x621–1298 / y398–604 (canvas 1920×979) */
.hero-wordmark {
  position: absolute;
  left: 32.34%;
  top: 40.65%;
  width: 35.26%;
  height: auto;
  pointer-events: none;
}

/* PSD layer 224: scroll mouse icon — center x≈50%, bottom 2.45% */
.hero-mouse {
  position: absolute;
  left: 50%;
  bottom: 2.45%;
  transform: translateX(-50%);
  width: 1.61%;
  min-width: 22px;
  height: auto;
  pointer-events: none;
}

.overview {
  background: #ece9e4;
}

.overview.section {
  /* PSD: first content (new 01) y=1055, group top=976 → 79px ÷ 16 = 4.94rem */
  padding-top: 4.94rem;
}

.two-col {
  display: grid;
  /* PSD: left col x=303-864=561px, right col x=972-1605=633px → ratio 561:633 */
  grid-template-columns: 0.886fr 1fr;
  /* PSD: right col x1=972, left col x2=864 → gap=108px ÷ 16 = 6.75rem */
  gap: 6.75rem;
  align-items: center;
}

.overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}

.overview-grid.reveal {
  opacity: 1;
  transform: none;
}

.overview-grid img {
  width: 100%;
  aspect-ratio: 562 / 276;
  object-fit: cover;
}

.overview-grid.reveal img {
  opacity: 0;
  transform: translate3d(-118px, 0, 0);
  transition: opacity 0.95s ease, transform 1.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.overview-grid.reveal.show img {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.overview-grid.reveal.show img:nth-child(2) {
  transition-delay: 0.18s;
}

.overview-grid.reveal.show img:nth-child(3) {
  transition-delay: 0.36s;
}

.overview-copy {
  max-width: 600px;
  font-size: 1rem;
  line-height: 1.6;
  min-width: 0;
}

.overview-copy.reveal-right {
  transform: translate3d(68px, 0, 0);
  transition: opacity 0.84s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.overview-head {
  display: flex;
  align-items: center;
  gap: 2rem;
  /* PSD: vline y2=1394, body text y1=1419 → gap=25px ÷ 16 = 1.5625rem */
  margin-bottom: 1.5625rem;
  min-width: 0;
}

.overview-vline {
  width: 4px;
  max-width: 4px;
  flex: 0 0 auto;
}

.section-vline {
  width: 4px;
  background-color: var(--deep);
  flex-shrink: 0;
  display: block;
}

/* PSD 448×40px */
.overview-title {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  display: block;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 48.75px; font-weight: 100;
  font-weight: 100;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* NEW TEXT OVEVIEW BODY */
.overview-body {
    width: 100%;
    max-width: 630px;
    font-family: 'Futura', 'Century Gothic', sans-serif;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #1a1a1a;
    font-weight: 300;
}

.amenities {
    background: #ffffff;
}

.amenities.section {
  /* PSD: AMENITIES group top=2083, Group 1 top=2146 → 2146-2083=63px */
  padding-top: 3.94rem;
  /* PSD: AMENITIES group bottom=2457, canvas=1920 → section height ≈ 374px */
  padding-bottom: 9.4rem;
}

.amenities .container {
  width: min(1280px, 96vw);
}

.amenities-head {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 71px;
    padding-left: 32px;
}
.amenities-vline {
    width: 4px;
    height: 168px;
    flex-shrink: 0;
    display: block;
    background-color: var(--accent);
}
.amenities-title {
    width: auto;
    max-width: 100%;
    display: block;
    font-family: 'Futura', 'Century Gothic', sans-serif;
    font-size: 48.75px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
}

.amenity-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  margin-top: 0;
}

.amenity-item {
  display: grid;
  gap: 0;
  justify-items: center;
  position: relative;
}

.amenity-pill { width: auto; height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: transform 0.24s ease, filter 0.24s ease;
  outline: none;
}

.amenity-pill::before,
.amenity-pill::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.amenity-pill::before {
  content: '';
  bottom: calc(100% + 7px);
  width: 0.7rem;
  height: 0.7rem;
  background: var(--myrtle);
  transform: translate(-50%, 8px) rotate(45deg);
}

.amenity-pill::after {
  content: attr(data-amenity);
  bottom: calc(100% + 12px);
  transform: translate(-50%, 10px);
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: var(--myrtle);
  color: #ffffff;
  font-family: 'Jost', 'Manrope', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 16px 30px rgba(38, 70, 32, 0.18);
}

.amenity-pill:hover,
.amenity-pill:focus-visible {
  transform: translateY(-4px);
  filter: drop-shadow(0 12px 18px rgba(38, 70, 32, 0.16));
}

.amenity-pill:hover::before,
.amenity-pill:hover::after,
.amenity-pill:focus-visible::before,
.amenity-pill:focus-visible::after {
  opacity: 1;
}

.amenity-pill:hover::before,
.amenity-pill:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

.amenity-pill:hover::after,
.amenity-pill:focus-visible::after {
  transform: translate(-50%, 0);
}

.amenity-pill:focus-visible {
  box-shadow: 0 0 0 3px rgba(38, 70, 32, 0.18);
  border-radius: 999px;
}

.amenity-pill img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.amenity-item img { width: 100%; max-width: 168px; display: block; object-fit: contain; }

.amenity-label {
  display: none;
}

.section-dark {
  color: #eff4f2;
}

.cta-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.94rem;
  position: relative;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.cta-text-left,
.cta-text-right {
    font-family: 'Futura', 'Century Gothic', sans-serif;
    font-size: 33px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    display: block;
}
.cta-text-right strong {
    font-weight: 700;
}

.video-cta {
    position: relative;
    min-height: 939px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.video-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/psd-export/195-new-14-1.png');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    z-index: 0;
}

.video-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('assets/psd-export/196-bg-7.png') center/cover;
    z-index: 1;
}
.play {
  /* PSD Forma 1: x1=898 x2=1034 → 136px square */
  width: 136px;
  height: 136px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

.play img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.video-inline-player {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #000000;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.35s ease;
}

.video-cta.is-playing .video-inline-player {
  opacity: 1;
  pointer-events: auto;
}

.video-cta.is-playing .cta-inner {
  opacity: 0;
  pointer-events: none;
}

.video-inline-frame-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000000;
}

.video-inline-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-inline-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

@media (max-width: 1199px) {
  .video-inline-player {
    padding: 0;
  }

  .video-inline-close {
    top: 1rem;
    right: 1rem;
  }
}

.location {
  background: #ffffff;
}

.location.section {
  padding-top: 9rem;
  padding-bottom: 0;
}

.location .container {
  width: min(1223px, 92vw);
  position: relative;
  z-index: 1;
}

.loc-head {
  display: flex;
  align-items: stretch;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.loc-vline {
  width: 5px;
  min-height: 140px;
  background-color: var(--deep);
  flex-shrink: 0;
  align-self: stretch;
}

.loc-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.5rem 0 0.6rem;
  min-width: 0;
}

.loc-title {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 48.75px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: auto;
  display: block;
}

.loc-subtitle {
  width: 100%;
  max-width: 1187px;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--muted);
  display: block;
  margin-bottom: 0.2rem;
}

.tabs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.8rem;
  margin: 1.8rem 0 0;
  padding-bottom: 0.75rem;
  border-bottom: 5px solid rgba(87, 103, 101, 0.35);
}

.tab {
  border: 0;
  background: transparent;
  padding: 0.3rem 0;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 21.73px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.7;
  transition: opacity 0.2s;
}

.tab.active,
.tab:hover {
  opacity: 1;
}

.tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.97rem;
  height: 5px;
  background: var(--deep);
}

.map-box {
  /* PSD: tab underline y2=3952, map y1=4003 → 51px ÷ 16 = 3.1875rem */
  margin-top: 3.1875rem;
  border: 0;
  background: #c6d0cc;
  width: 100%;
  --focus-x: 59%;
  --focus-y: 65%;
  position: relative;
  overflow: hidden;
}

#mapImage {
  width: 100%;
  max-height: 620px;
  object-fit: cover;
  display: block;
}

.map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.58;
  pointer-events: none;
}

.map-focus {
  position: absolute;
  left: var(--focus-x);
  top: var(--focus-y);
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.map-focus::before,
.map-focus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.map-focus::before {
  width: 14px;
  height: 14px;
  background: #4f6c6b;
  border: 2px solid #e8f0ee;
  box-shadow: 0 0 0 5px rgba(79, 108, 107, 0.25);
}

.map-focus::after {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(79, 108, 107, 0.75);
  animation: mapPulse 1.8s ease-out infinite;
}

.map-focus-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(63, 84, 83, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
  box-shadow: 0 6px 18px rgba(28, 37, 37, 0.2);
}

@keyframes mapPulse {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.3);
  }
}

.loc-plans-strip {
  width: 100%;
  display: block;
  line-height: 0;
  font-size: 0;
  position: relative;
  z-index: 0;
  margin-top: -140px;
}

.plans {
  background: #ffffff;
  padding-top: 4rem;
  padding-bottom: 0 !important;
}

/* HEAD — inside container */
.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 4rem;
}

.plan-head-col {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
}

.plan-head-line {
  width: 4px;
  height: auto;
  flex-shrink: 0;
  display: block;
}

.plan-head-texts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

/* PSD 300×40px — image asset, no text styling needed */
.plans-title {
  width: 300px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* PSD 1016×37px — image asset, no text styling needed */
.plans-subtitle {
  width: 100%;
  max-width: 860px;
  display: block;
}

.plan-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  align-self: flex-start;
}

/* PSD 222×45px */
.plan-cta-bg {
  display: block;
  width: 220px;
  height: auto;
}

.plan-cta-label {
  position: absolute;
  width: 81%;
  height: auto;
  pointer-events: none;
}

/* VIEWER — full viewport width, NO container */
.plan-viewer {
  width: 100%;
  display: grid;
  grid-template-columns: 45.625fr 54.375fr;
  aspect-ratio: 1920 / 402;
  overflow: hidden;
}

/* LEFT PANEL — PSD 876×402 */
.plan-left {
  position: relative;
  background-image: url('assets/psd-export/167-bg-6.png');
  background-size: 100% 100%;
  overflow: hidden;
}

/* Arrow ←: PSD x1=78, y-center=5215. 78/876=8.9%, (5215-5012)/402=50.5% */
.plan-prev {
  position: absolute;
  left: 8.9%;
  top: 50%;
  transform: translateY(-50%);
  width: 5.25%;           /* 46/876 */
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.plan-prev img {
  width: 100%;
  height: auto;
  display: block;
}

/* Vertical line: PSD x=352, y1=5066. 352/876=40.2%, (5066-5012)/402=13.4% */
.plan-vline {
  position: absolute;
  left: 39%;
  top: 13.4%;
  width: 2px;
  height: 22.9%;          /* 92/402 */
  object-fit: fill;
  pointer-events: none;
}

/* UNIT 1: PSD x=382, y=5097. 382/876=43.6%, (5097-5012)/402=21.1% */
.plan-unit {
  position: absolute;
  left: calc(39% + 2px + 2rem);
  top: 21.1%;
  width: 10.7%;           /* 94/876 */
  height: auto;
}

/* Size label: PSD x=383, y=5152. 34.8% top, 26.4% wide */
.plan-size {
  position: absolute;
  left: calc(39% + 2px + 2rem);
  top: 34.8%;
  width: 26.4%;           /* 231/876 */
  height: auto;
}

/* Download row: PSD x=383, y=5267. 63.4% top */
.plan-dl-row {
  position: absolute;
  left: calc(39% + 2px + 2rem);
  top: 80%;
  width: 34%;
  display: flex;
  align-items: center;
  gap: 6%;
  text-decoration: none;
}

.plan-brochure {
  width: 13%;             /* 44/(44+251) approx, within row */
  height: auto;
  flex-shrink: 0;
}

.plan-dl-text {
  width: 74%;             /* 251/340 approx */
  height: auto;
}

/* RIGHT PANEL — PSD 1044×402 */
.plan-right {
  position: relative;
  background-image: url('assets/psd-export/166-bg-5.png');
  background-size: 100% 100%;
  overflow: hidden;
}

/* Floor plan image fills right panel entirely */
#planImage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.5;
  filter: brightness(1.3) contrast(0.8);
}

/* Zoom icon: center x=(1409.5-876)/1044=51.1%, center y=(5222.5-5012)/402=52.4% */
.plan-zoom {
  position: absolute;
  left: 51.1%;
  top: 52.4%;
  transform: translate(-50%, -50%);
  width: 4.7%;            /* 49/1044 */
  height: auto;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
}

/* Arrow →: PSD x=1796, (1796-876)/1044=88.1% */
.plan-next {
  position: absolute;
  left: 88.1%;
  top: 50%;
  transform: translateY(-50%);  
  width: 4.4%;            /* 46/1044 */
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.plan-next img {
  width: 100%;
  height: auto;
  display: block;
}

/* STATS — inside container */
.stats {
  /* PSD: plan-viewer y2=5414, stats y1=5524 → 110px ÷ 16 = 6.875rem */
  margin-top: -1rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}

.stats div {
  padding: 6.6rem 0.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.stats strong {
  display: block;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 1;
  color: #264620;
}

.stat-label {
  display: block;
  margin: 0.2rem auto 0;
  max-width: 90%;
}

html[dir="rtl"] .stat-label {
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #8a8a8a;
  letter-spacing: 0;
  text-transform: none;
}

.gallery {
  background: #ffffff;
  overflow-x: clip;
}

.gallery.section {
  /* PSD: PHOTO GALLERY group y1=5713, title y1=5796 → 83px ÷ 16 = 5.1875rem */
  padding-top: 5.1875rem;
  /* PSD: last content y2=6997, group y2=7063 → 66px ÷ 16 = 4.125rem */
  padding-bottom: 4.125rem;
  padding-left: 0;
  padding-right: 0;
}

.gallery .container {
  width: min(1833px, calc((100vw - 4rem) / var(--page-zoom, 1)));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 0;
}

.gallery-head {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 0;
  background: #e5e2da;
  width: 100%;
  /* Align left edge with standard container (min(1223px,92vw) centered) */
  padding: 3.5rem 4vw 0 calc((100% - min(1223px, 92vw)) / 2);
}

.gallery-vline {
  width: 4px;
  height: auto;
  min-height: 92px;
  flex-shrink: 0;
  display: block;
  object-fit: fill;
}

.gallery-head-texts {
  display: flex;
  flex-direction: column;
  /* PSD: subtitle y1=5859, title y2=5835 → 24px gap ÷ 16 = 1.5rem */
  gap: 0.7rem;
  padding-top: 2rem;
  min-width: 0;
}

/* PSD 361×39px */
.gallery-title {
  width: 361px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* PSD 220×37px */
.gallery-subtitle {
  width: 220px;
  max-width: 100%;
  height: auto;
  display: block;
}

.gallery-filter {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin-bottom: 1.55rem;
  padding-bottom: 3.5rem;
  justify-content: flex-start;
  margin-top: 0;
  background: #e5e2da;
  width: 100%;
  padding-top: 1.5rem;
  padding-left: max(735px, 9.3vw);
  padding-right: 4vw;
  position: relative;
  min-height: 4rem;
}

.gallery-filter::after {
  content: "";
  position: absolute;
  left: calc(max(735px, 9.3vw) + 1rem);
  right: 40vw;
  bottom: 3.2rem;
  height: 3px;
  background: rgba(87, 103, 101, 0.18);
}

.gallery-filter button {
  border: 0;
  background: transparent;
  padding: 0 0.55rem;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  margin-bottom: 1.4rem;
  align-self: flex-start;
}

.gallery-filter button img {
  height: 14px;
  width: auto;
  opacity: 0.55;
  transition: opacity 0.2s;
}

.gallery-filter button.active img,
.gallery-filter button:hover img {
  opacity: 1;
}

.gallery-filter button.active::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: -1.6rem;
  height: 3px;
  background: rgba(87, 103, 101, 0.6);
}

.gallery-grid {
  display: grid;
  width: 100%;
  margin: 2rem auto 0;
  grid-template-columns: 29.84% 36.88% 28.91%;
  gap: 2.18%;
  align-items: start;
  background: #ffffff;
  position: relative;
}

.gallery-grid > img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.gallery-grid > img:first-child {
  aspect-ratio: 547 / 684;
  margin-top: clamp(4.1rem, 5.8vw, 5.9rem);
}

.gallery-grid > img:last-child {
  aspect-ratio: 530 / 684;
  margin-top: clamp(4.1rem, 5.8vw, 5.9rem);
}

.overlay-card {
  position: relative;
  aspect-ratio: 676 / 844;
  background: url("assets/psd-export/149-1-5.png") center/cover;
  display: grid;
  place-items: center;
}

.gallery-open {
  cursor: zoom-in;
}

.gallery-progress,
.gallery-lightbox-progress {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.gallery-progress {
  width: min(860px, 63.5vw);
  margin: 2.6rem auto 0;
}

.gallery-progress button,
.gallery-lightbox-progress button {
  flex: 1;
  height: 4px;
  border: 0;
  padding: 0;
  background: rgba(87, 103, 101, 0.18);
  cursor: pointer;
}

.gallery-progress button.active,
.gallery-lightbox-progress button.active {
  background: rgba(87, 103, 101, 0.42);
}

.gallery-lightbox-open {
  overflow: hidden;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(13, 11, 8, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.gallery-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.gallery-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.gallery-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.gallery-lightbox-nav.prev {
  left: 1rem;
}

.gallery-lightbox-nav.next {
  right: 1rem;
}

.gallery-lightbox-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden; /* Prevent scrolling */
  padding: clamp(2rem, 4vw, 3rem) clamp(4.5rem, 7vw, 6rem) 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox-viewport img {
  max-width: min(1600px, 92vw);
  max-height: calc(100vh - 10rem); /* Keep it within view taking padding into account */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.gallery-lightbox-progress {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: min(560px, 65vw);
}

.overlay-panel {
  width: 73.67%;
  height: 81.04%;
  background: rgba(160, 143, 116, 0.72);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.8rem;
}

/* PSD 153: zoom icon 49×49px */
.overlay-zoom {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  display: block;
}

/* PSD 154: ENTRANCE LOBBY text */
.overlay-label {
  width: 100px !important;
  max-width: 100px !important;
  height: auto;
  display: block;
}

.overlay-label-text {
  max-width: 72%;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  white-space: pre-line;
  color: #ffffff;
}

.tour {
  background: #f5f4f2;
}

.tour.section {
  /* PSD: VIRTUAL TOUR group y1=7198, title y1=7232 → 34px ÷ 16 = 2.125rem */
  padding-top: 2.125rem;
}

.tour .container {
  width: min(1223px, 92vw);
}

.tour-head {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.4rem;
}

.tour-vline {
  width: 4px;
  height: auto;
  flex-shrink: 0;
  display: block;
}

.tour-head-texts {
  display: flex;
  flex-direction: column;
  /* PSD: subtitle y1=7295, title y2=7272 → 23px gap ÷ 16 = 1.4375rem */
  gap: 1.4375rem;
  min-width: 0;
}

/* PSD 309×40px */
.tour-title {
  width: 309px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* PSD 1000×37px */
.tour-subtitle {
  width: 1000px;
  max-width: 100%;
  height: auto;
  display: block;
}

.tour-main {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.tour-stage {
  /* PSD: subtitle y2=7332, main image y1=7428 → 96px ÷ 16 = 6rem */
  margin-top: 6rem;
  width: 100%;
}

.tour-main-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1218 / 758;
  overflow: hidden;
}

.tour-main-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: auto;
  transition: transform 0.2s ease;
}

.tour-main-icon-btn {
  position: absolute;
  right: 2.6%;
  left: auto;
  top: 90.5%;
  width: min(4.76%, 58px);
  height: auto;
  transform: translateY(-50%);
  z-index: 2;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.tour-main-icon-btn:hover .tour-main-icon {
  transform: scale(1.1);
}

.tour-main-icon-btn:focus {
  outline: 2px solid #a29176;
  outline-offset: 2px;
}

.tour-main-icon-secondary {
  position: absolute;
  left: 4.19%;
  top: 94.06%;
  width: min(4.6%, 56px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: auto;
}

.tour-main-icon-secondary-btn {
  position: absolute;
  left: 2.6%;
  top: 90.5%;
  width: min(4.6%, 56px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease;
}

.tour-main-icon-secondary-btn:hover {
  transform: translateY(-50%) scale(1.1);
}

.tour-main-icon-secondary-btn:focus {
  outline: 2px solid #a29176;
  outline-offset: 2px;
}

.tour-main-icon-secondary-btn .tour-main-icon-secondary {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: 100%;
  transform: none;
}

.tour-main-icon-secondary-bg,
.tour-main-icon-secondary-dot {
  position: absolute;
  display: block;
  height: auto;
}

.tour-main-icon-secondary-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  height: auto;
  transform: translate(-50%, -50%);
  display: block;
  z-index: 3;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.28));
}

.tour-main-icon-secondary-bg {
  inset: 0;
  width: 100%;
}

.tour-main-icon-secondary-dot {
  left: 50%;
  width: 19.64%;
  transform: translateX(-50%);
}

.tour-main-icon-secondary-dot-1 {
  top: 12.5%;
}

.tour-main-icon-secondary-dot-2 {
  top: 41.07%;
}

.tour-main-icon-secondary-dot-3 {
  top: 67.86%;
}

.tour-headbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1218 / 95;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('assets/psd-export/130-bg-copy-3-1.png') center / cover no-repeat;
  z-index: 1;
  padding: 0;
}

.tour-headbar img {
  width: min(29.06%, 354px);
  height: auto;
  display: block;
}

.tour-rail {
  margin-top: 0.85rem;
  position: relative;
  width: 100%;
}

.thumb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: #b9c8b5;
  color: #f3f5f1;
  font-size: 1rem;
  z-index: 2;
}

.tour-rail .thumb-arrow:first-child {
  left: -0.95rem;
}

.tour-rail .thumb-arrow:last-child {
  right: -0.95rem;
}

.tour-thumbs {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
}

.tour-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.95;
  border: 2px solid transparent;
}

.tour-thumbs img.active {
  opacity: 1;
  border-color: #a29176;
}

/* Tour Modal Placeholder Styles */
.tour-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.tour-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tour-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.tour-modal-content {
  position: relative;
  z-index: 2;
  background: white;
  border-radius: 8px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.tour-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 3;
  transition: transform 0.2s ease;
}

.tour-modal-close:hover {
  transform: scale(1.1);
}

.tour-modal-close:focus {
  outline: 2px solid #a29176;
  outline-offset: 2px;
  border-radius: 4px;
}

.tour-modal-close svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

.tour-modal-body {
  text-align: center;
}

.tour-modal-body h2 {
  font-family: Futura, 'Futura PT', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 0.5rem 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tour-modal-subtitle {
  font-size: 1rem;
  color: #666;
  margin: 0 0 2rem 0;
  font-family: Manrope, sans-serif;
  font-weight: 400;
}

.tour-modal-message {
  padding: 1.5rem;
  background: #f5f5f5;
  border-radius: 6px;
  border-left: 4px solid #a29176;
}

.tour-modal-message p {
  margin: 0.5rem 0;
  color: #555;
  font-family: Manrope, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
}

.tour-modal-message p:first-child {
  margin-top: 0;
  font-weight: 600;
  color: #333;
}

.tour-modal-hint {
  font-size: 0.85rem;
  color: #888;
  margin-top: 1rem !important;
  font-style: italic;
}

/* Responsive adjustments for tour modal */
@media (max-width: 768px) {
  .tour-modal-content {
    padding: 1.5rem;
    max-width: 90%;
  }

  .tour-modal-body h2 {
    font-size: 1.5rem;
  }

  .tour-modal-subtitle {
    font-size: 0.95rem;
  }

  .tour-modal-message {
    padding: 1rem;
  }

  .tour-modal-message p {
    font-size: 0.9rem;
  }
}

.philosophy {
  background: url("assets/psd-export/087-vector-smart-object-1.png") center/cover;
  overflow: hidden;
}

.philosophy.section-dark {
  padding: 0;
  color: #eff4f2;
}

.philosophy-stage {
  position: relative;
  width: min(1540px, 100vw);
  margin: 0 auto;
  /* PSD canvas ratio: 1920 × 1201 */
  aspect-ratio: 1920 / 1201;
  /* Extra bottom room for the lowest label (~96% top + label height) */
  padding-bottom: 3%;
}

.phil-el {
  position: absolute;
  display: block;
  height: auto;
}

/* Wheel rings diagram: PSD x459–1459 / y102–1103 (rel) */
.phil-wheel {
  left: 23.90%;
  top: 7.69%;
  width: 52.08%;
  transform-origin: 50% 50%;
  animation: philWheelSpin 34s linear infinite;
  will-change: transform;
}

.phil-wheel-inner {
  transform: scale(0.86);
  opacity: 0.46;
  animation: philWheelSpinReverse 26s linear infinite;
}

/* Title: PSD x849–1081 / y38–58 (rel) */
.phil-title {
  left: 44.22%;
  top: 2.7%;
  width: 12.08%;
}

/* Center text: PSD x591–1332 / y504–699 (rel) */
.phil-center {
  left: 30.78%;
  top: 41.17%;
  width: 38.59%;
  aspect-ratio: 741 / 195;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2.25rem;
  overflow: hidden;
  text-align: center;
  font-family: 'Jost', 'Manrope', sans-serif;
  font-size: clamp(0.72rem, 1vw, 1.28rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  pointer-events: none;
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1), transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.philosophy-stage.show .phil-center {
  opacity: 1;
  transform: translateY(0);
}

.phil-center.is-rising {
  animation: philCenterRise 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes philCenterRise {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.phil-node {
  cursor: pointer;
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.phil-node.is-active {
  filter: brightness(1.2);
  transform: scale(1.03);
}

.philosophy-stage:not(.show) .phil-wheel {
  animation-play-state: paused;
}

@keyframes philWheelSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes philWheelSpinReverse {
  from {
    transform: scale(0.86) rotate(0deg);
  }

  to {
    transform: scale(0.86) rotate(-360deg);
  }
}

/* === Per-element positions derived from PSD bbox (canvas: 1920×1201) === */

/* Top dot — no label */
.phil-top-o  { left: 48.54%; top:  6.28%; width: 2.92%; }
.phil-top-i  { left: 49.22%; top:  7.36%; width: 1.56%; }

/* ICONIC URBAN IDENTITY — left middle */
.phil-iconic-dot-o { left: 22.50%; top: 47.16%; width: 2.92%; }
.phil-iconic-dot-i { left: 23.18%; top: 48.24%; width: 1.56%; }
.phil-iconic-lbl   { left:  6.61%; top: 48.58%; width: 14.22%; }

/* CENTRAL POINT DISTRICT — upper left */
.phil-central-dot-o { left: 26.61%; top: 24.51%; width: 2.92%; }
.phil-central-dot-i { left: 27.29%; top: 25.59%; width: 1.56%; }
.phil-central-lbl   { left: 11.15%; top: 26.01%; width: 14.22%; }

/* PREMIUM MATERIALS — upper right */
.phil-premium-dot-o { left: 69.06%; top: 23.68%; width: 2.92%; }
.phil-premium-dot-i { left: 69.74%; top: 24.76%; width: 1.56%; }
.phil-premium-lbl   { left: 73.91%; top: 25.51%; width: 11.72%; }

/* HUMAN-CENTERED MOBILITY — right middle */
.phil-human-dot-o { left: 74.53%; top: 47.16%; width: 2.92%; }
.phil-human-dot-i { left: 75.21%; top: 48.24%; width: 1.56%; }
.phil-human-lbl   { left: 78.80%; top: 48.41%; width: 16.82%; }

/* LIFESTYLE INTEGRATION — lower right */
.phil-lifestyle-dot-o { left: 66.88%; top: 72.81%; width: 2.92%; }
.phil-lifestyle-dot-i { left: 67.55%; top: 73.89%; width: 1.56%; }
.phil-lifestyle-lbl   { left: 72.08%; top: 74.39%; width: 13.13%; }

/* COMMUNITY-CENTRIC LIVING — lower left */
.phil-community-dot-o { left: 29.48%; top: 72.81%; width: 2.92%; }
.phil-community-dot-i { left: 30.16%; top: 73.89%; width: 1.56%; }
.phil-community-lbl   { left:  9.69%; top: 74.39%; width: 17.34%; }

/* LUXURY WITH SUSTAINABILITY — bottom */
.phil-luxury-dot-o { left: 48.54%; top: 88.79%; width: 2.92%; }
.phil-luxury-dot-i { left: 49.22%; top: 89.87%; width: 1.56%; }
.phil-luxury-lbl   { left: 41.72%; top: 95.7%; width: 16.67%; }

/* RTL: left-side labels — anchor by right edge so text grows away from the dot.
   right: X% means the label's right edge sits at (100-X)% from the stage left,
   keeping a consistent gap matching the right-side labels. */
html[dir="rtl"] .phil-iconic-lbl    { left: unset; right: 79.5%; }
html[dir="rtl"] .phil-central-lbl   { left: unset; right: 75%; }
html[dir="rtl"] .phil-community-lbl { left: unset; right: 72%; }
html[dir="rtl"] .phil-luxury-lbl    { left: 50%; transform: translateX(-50%); top: 94.0%; }
html[dir="rtl"] .phil-title         { left: 50%; transform: translateX(-50%); top: 1.6%; }

.faq {
  background: #f5f4f1;
  --faq-list-offset: calc(4px + 2rem);
}

.faq.section {
  /* PSD: FAQ group y1=9912, title y1=9967 → 55px ÷ 16 = 3.4375rem */
  padding-top: 3.4375rem;
}

.faq-head {
  display: flex;
  align-items: center;
  gap: 2rem;
  /* Reduced margin to pull the FAQ list closer to the title */
  margin-bottom: 2.5rem;
}

.faq-head-line {
  width: 4px;
  height: auto;
  flex-shrink: 0;
}

.faq-head-title {
  width: auto;
  display: block;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 48.75px; font-weight: 100;
  font-weight: 100;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.faq-list {
  border-top: 1px solid var(--line);
  margin-left: var(--faq-list-offset);
  width: calc(100% - var(--faq-list-offset));
}

.faq-item {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 0.9rem 0;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}

.faq-q-img {
  display: block;
  width: auto;
  max-width: calc(100% - 36px);
  height: 14px; /* Scaled down to be perceived as a smaller font size */
  object-fit: contain;
  object-position: left;
}

.faq-toggle-icon {
  display: block;
  margin-left: auto;
  width: 23px;
  height: 23px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
}

.faq-answer {
  display: none;
  margin-top: 0;
  padding: 0.2rem 0 1rem;
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--muted);
}

.faq-answer.open {
  display: block;
  padding-top: 0;
}

.faq-answer-img {
  width: min(100%, 520px);
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 0;
}

.newsletter {
  background: var(--sand);
  /* PSD NEWS LETTER group: reduced height to match original */
  padding: 3.5rem 0;
}

.newsletter-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  position: relative;
}

.newsletter-left {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.newsletter-vline {
  /* PSD: line copy 13 [349,10800,351,10892] → 2px wide vertical bar */
  width: 2px;
  height: auto;
  flex-shrink: 0;
}

.newsletter-inner p,
.newsletter-title {
  display: block;
  width: auto;
  /* PSD: newsletter title x1=379, x2=663 → 284px */
  max-width: 284px;
}

.newsletter-title {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 48.75px; font-weight: 100;
  font-weight: 100;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.newsletter form {
  display: flex;
  align-items: center;
  /* PSD: input right x=1272, button left x=1429 → gap 157px but scaled to container */
  gap: 2rem;
}

.newsletter .btn {
  /* PSD: subscribe button [1429,10828,1569,10867] → 140×39px */
  width: 140px;
  height: 39px;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.newsletter input {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 0.56rem 0;
  /* PSD: email input [911,10838,1272,10870] → 361px wide */
  min-width: 361px;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.newsletter input::placeholder {
  letter-spacing: 0.05em;
  color: #888;
  font-size: 1rem;
}

.register-form input {
  border: 1px solid var(--line);
  background: #f9f9f8;
  padding: 0.56rem 0.65rem;
  min-width: 230px;
  font-size: 0.68rem;
}

.form-status {
  margin: 0.4rem 0 0;
  min-height: 1rem;
  font-size: 0.68rem;
}

.form-status.success { color: #316148; }
.form-status.error { color: #8b3434; }

.contact-strip {
  background: #f8f7f4;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  /* Increased padding to match original design height */
  padding: 6.5rem 0;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 1.2rem;
}

.contact-vbar {
  /* PSD: vertical lines [475,11047,476,11139] → 1px thin bar */
  width: 1px;
  height: 95px;
  object-fit: fill;
  flex-shrink: 0;
  margin-inline: 1.5rem;
  opacity: 1;
}

.contact-icon {
  /* PSD Forma 1 icons: ~39×39px */
  width: 39px;
  height: 39px;
  object-fit: contain;
  flex: 0 0 auto;
}

.contact-text {
  display: grid;
  gap: 0.16rem;
}

.contact-label {
  height: 15px;
  width: auto;
  object-fit: contain;
  transform-origin: left;
}

.contact-value {
  height: 15px;
  width: auto;
  object-fit: contain;
  transform-origin: left;
}

.contact-phone {
  height: 17px; /* Optically adjust numbers to look the same size as uppercase letters */
}

.register {
  background: #efece6;
  /* padding moved to form column so image fills full height */
  padding: 0;
}

.register .container {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.register-grid {
  display: grid;
  /* PSD: left image width=959px, right area=861px */
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}

.register-grid > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 400px;
}

.register-form {
  background: #d9d3c6;
  /* PSD: form area [959,11211,1920,11876] */
  padding: 7.875rem 3.75rem 3rem;
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.register-title {
  width: auto;
  max-width: 360px;
  /* PSD: title [1091,11337,1451,11363] */
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 3.25rem;
  color: var(--myrtle);
}

.field-wrap {
  display: grid;
  gap: 0.35rem;
  /* PSD: field spacing from coordinates */
  margin-bottom: 1.125rem;
}

.field-label {
  height: 13px;
  width: auto;
  object-fit: contain;
}

.register-form input,
.register-form textarea {
  border: 0;
  border-bottom: 1px solid rgba(74, 89, 83, 0.4);
  background: transparent;
  min-width: 0;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: #2f3e3a;
  font-family: 'Manrope', sans-serif;
}

.register-form textarea {
  resize: none;
  min-height: 2.2rem;
}

.register-submit {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* PSD: submit button [1061,11734,1201,11773] → 140×39px */
  min-width: 140px;
  min-height: 39px;
  border: 1px solid rgba(74, 89, 83, 0.5);
  background: transparent;
  cursor: pointer;
  margin-top: 2rem;
  
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--myrtle);
}

.feature-strip {
  background: #f6f4f0;
  padding: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  width: 100%;
  max-width: 100%;
  padding: 0 16vw;
}

.doc-item {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 0.4rem;
  padding: 5rem 0.4rem;
}

.doc-icon {
  /* PSD: brochure2 copy [393,11953,437,12000] → 44×47px */
  width: 44px;
  height: 47px;
  object-fit: contain;
}

.doc-label {
  /* PSD: BROCHURE label [360,12019,468,12036] → 17px tall */
  height: 17px;
  width: auto;
  object-fit: contain;
}

.doc-label-text {
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #3a3a3a;
  text-transform: none;
  text-align: center;
  text-decoration: none;
}

.doc-item {
  text-decoration: none;
}

.site-footer {
  background: #e5e2da;
  border-top: 1px solid var(--line);
  /* PSD: footer top=12109, top divider line y=12226 → 117px ÷ 16 = 7.3125rem */
  padding: 7rem 0 14rem;
}

.footer-grid {
  display: grid;
  /* PSD: vline-1 at x=860, vline-2 at x=1250 on 1920px canvas → 1fr≈303px, privacy col=1.75fr≈530px */
  grid-template-columns: 1.25fr 1fr 1.5rem 1fr 1.5rem 1.75fr;
  gap: 2rem;
  align-items: start;
  padding: 0 5vw 0 9.1vw;
}

.footer-vline-1,
.footer-vline-2,
.footer-vline-3 {
  /* CSS divider — stretches to full row height, centered in 1.5rem column */
  width: 1px;
  background: var(--line);
  justify-self: center;
  align-self: stretch;
  margin: 0;
}

.footer-vline-2 {
  margin: 0;
}

.footer-vline-3 {
  margin: 0;
}

/* register / FAQ column */
.footer-grid > div:nth-child(4) {
  margin-left: 3rem;
}

/* privacy column */
.footer-grid > div:nth-child(6) {
  margin-left: 1rem;
}

.brand {
  font-size: 2rem;
  line-height: 0.9;
  margin-bottom: 0.45rem;
}

.footer-grid > div:not(.footer-brand-col) {
  margin-top: -1rem;
}

.footer-logo {
  /* PSD: Sawari logo [130,12226,359,12296] → 70px tall */
  height: 70px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 0.55rem;
}

.footer-address {
  font-size: 0.63rem;
  letter-spacing: 0.04em;
  color: #5f6f6d;
  margin: 0 0 0.75rem;
}

.footer-stay {
  margin: 0 0 0.45rem;
}

.footer-stay img {
  height: 11px;
  width: auto;
}

.footer-socials {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}

.footer-socials a {
  display: block;
}

.footer-socials img {
  /* PSD: social icons [141,12423,183,12465] → 42×42px */
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.footer-grid h4,
.footer-col-heading {
  font-size: 1.25rem;
  margin-bottom: 0.8rem;
  letter-spacing: 0.08em;
  color: #5f6f6d;
}

.footer-grid a {
  display: block;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  margin: 0.4rem 0;
  color: #5f6f6d;
  text-decoration: none;
}

.footer-grid a:hover {
  color: var(--ink);
}

.footer-grid p {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin: 0.3rem 0;
  color: #5f6f6d;
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 72px, 0);
  transition: opacity 0.8s ease, transform 1.06s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-left {
  transform: translate3d(-96px, 0, 0);
}

.reveal-right {
  transform: translate3d(96px, 0, 0);
}

.stagger.reveal {
  opacity: 1;
  transform: none;
}

.stagger > * {
  opacity: 0;
  transform: translate3d(0, 72px, 0);
  transition: opacity 0.8s ease, transform 1.06s cubic-bezier(0.22, 1, 0.36, 1);
}

.stagger.show > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.stagger.show > *:nth-child(2) {
  transition-delay: 0.12s;
}

.stagger.show > *:nth-child(3) {
  transition-delay: 0.24s;
}

.stagger.show > *:nth-child(4) {
  transition-delay: 0.36s;
}

.stagger.show > *:nth-child(5) {
  transition-delay: 0.48s;
}

.stagger.show > *:nth-child(6) {
  transition-delay: 0.6s;
}

.stagger.show > *:nth-child(7) {
  transition-delay: 0.72s;
}

.reveal.show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .overview-grid.reveal img,
  .stagger > *,
  .amenity-pill,
  .amenity-pill::before,
  .amenity-pill::after {
    transition: none;
  }

  .phil-wheel,
  .phil-wheel-inner {
    animation: none;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .overview-grid.reveal img,
  .stagger > * {
    transform: none;
  }

  .reveal,
  .overview-grid.reveal img,
  .stagger > * {
    opacity: 1;
  }
}

@media (max-width: 1199px) {
  .faq {
    --faq-list-offset: calc(4px + 1.25rem);
  }

  .site-header {
    padding: 1rem 1.5rem;
  }

  .site-nav {
    gap: 1rem;
  }

  .two-col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }

  .video-cta {
    min-height: clamp(620px, 70vw, 820px);
  }

  .location.section {
    padding-top: 6rem;
  }

  .loc-plans-strip {
    margin-top: -72px;
  }

  .plan-head {
    align-items: flex-start;
  }

  .stats div {
    padding-top: 4rem;
  }

  .gallery .container {
    width: calc(100% - 2rem);
    margin-left: auto;
    margin-right: auto;
    transform: none;
  }

  .gallery-head {
    padding: 3rem 2rem 0 max(2rem, calc((100% - min(1223px, 92vw)) / 2));
  }

  .gallery-filter {
    flex-wrap: wrap;
    row-gap: 0.75rem;
    padding-left: max(2rem, calc((100% - min(1223px, 92vw)) / 2 + 6rem));
    padding-right: 2rem;
  }

  .gallery-filter::after {
    left: max(2rem, calc((100% - min(1223px, 92vw)) / 2 + 7rem));
    right: 2rem;
  }

  .newsletter-vline {
    margin-right: 0;
  }

  .feature-grid {
    padding: 0 6vw;
  }

  .footer-grid {
    gap: 1.5rem;
    padding: 0 4vw 0 6vw;
  }
}

@media (max-width: 1024px) {
  .overview-head,
  .amenities-head,
  .loc-head,
  .plan-head-col,
  .gallery-head,
  .tour-head,
  .faq-head,
  .newsletter-inner {
    width: 100%;
    max-width: 100%;
  }

  .loc-head-text,
  .plan-head-texts,
  .gallery-head-texts,
  .tour-head-texts,
  .overview-copy {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .site-header {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    padding: 1rem;
    background: linear-gradient(to bottom, rgba(22, 40, 37, 0.88), rgba(22, 40, 37, 0.3));
  }

  .brand-mark {
    height: 50px;
  }

  .site-nav {
    width: 100%;
    justify-content: center;
    gap: 0.85rem 1rem;
    flex-wrap: wrap;
  }

  .site-nav a img {
    display: block;
    width: auto;
    height: 11px;
  }

  .nav-enquire {
    padding: 0;
  }

  .hero {
    min-height: 70vh;
  }

  .hero-wordmark {
    left: 50%;
    top: 45%;
    width: min(60vw, 470px);
    transform: translateX(-50%);
  }

  .hero-mouse {
    bottom: 1rem;
    width: 22px;
  }

  .two-col,
  .register-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .overview.section,
  .amenities.section,
  .location.section,
  .tour.section,
  .faq.section {
    padding-top: clamp(3.5rem, 8vw, 5rem);
  }

  .overview.section {
    padding-bottom: 4rem;
  }

  .overview-copy {
    max-width: none;
  }

  .overview-head,
  .amenities-head,
  .loc-head,
  .plan-head-col,
  .gallery-head,
  .tour-head,
  .faq-head,
  .newsletter-inner {
    gap: 1.25rem;
    align-items: flex-start;
  }

  .two-col {
    gap: 2rem;
  }

  .amenity-row {
    justify-content: center;
    gap: 1rem 1.25rem;
  }

  .amenity-item img {
    max-width: 140px;
  }

  .cta-inner {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .cta-text-left,
  .cta-text-right {
    font-size: clamp(22px, 3vw, 30px);
  }

  .play {
    width: 112px;
    height: 112px;
  }

  .tabs {
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
  }

  .tab.active::after {
    bottom: -0.82rem;
  }

  .map-box {
    margin-top: 2rem;
  }

  #mapImage {
    max-height: 460px;
  }

  .loc-plans-strip {
    margin-top: -48px;
  }

  .plan-head {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 2.5rem;
  }

  .plan-cta {
    align-self: flex-start;
  }

  .plan-viewer {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }

  .plan-left {
    min-height: 280px;
  }

  .plan-right {
    min-height: 360px;
  }

  .plan-prev,
  .plan-next {
    width: 32px;
  }

  /* Keep arrows inside the panel on tablet */
  .plan-prev {
    position: absolute;
    left: 4vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }

  .plan-next {
    position: absolute;
    left: auto;
    right: 4vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }

  .plan-zoom {
    width: 36px;
  }

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

  .stats div {
    padding: 2.5rem 0.5rem 1.5rem;
  }

  .gallery-head {
    padding: 2.5rem 1.5rem 0;
  }

  .gallery-filter {
    padding: 1.25rem 1.5rem 2.5rem;
    gap: 0.75rem 1rem;
  }

  .gallery-filter::after {
    left: 1.5rem;
    right: 1.5rem;
    bottom: 2.2rem;
  }

  .gallery-filter button {
    margin-bottom: 1rem;
    padding: 0 0.25rem;
  }

  .gallery-filter button.active::after {
    left: 0;
    right: 0;
    bottom: -1rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 1rem;
  }

  .gallery-grid > img:first-child,
  .gallery-grid > img:last-child {
    margin-top: 2.5rem;
  }

  .gallery-progress {
    width: min(520px, 80vw);
  }

  .tour-stage {
    margin-top: 3rem;
  }

  .tour-rail {
    grid-template-columns: 1fr;
  }

  .thumb-arrow {
    display: none;
  }

  .tour-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .philosophy-stage {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    aspect-ratio: 1920 / 1201;
  }

  .faq-head {
    margin-bottom: 1.5rem;
  }

  .newsletter {
    padding: 3rem 0;
  }

  .newsletter-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .newsletter-vline {
    display: none;
  }

  .newsletter form {
    width: 100%;
    justify-content: space-between;
  }

  .newsletter input {
    min-width: 0;
    width: 100%;
  }

  .contact-grid {
    padding: 2.5rem 0;
  }

  .contact-item {
    justify-content: flex-start;
  }

  .contact-vbar {
    display: none;
  }

  .register-form {
    padding: 4rem 1.75rem 2.5rem;
  }

  .register-grid > img {
    max-height: 460px;
    min-height: 300px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 3vw;
  }

  .doc-item {
    padding: 3rem 0.5rem;
  }

  .site-footer {
    padding: 4rem 0 5rem;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 1.5rem;
  }

  .footer-vline-1,
  .footer-vline-2,
  .footer-vline-3 {
    display: none;
  }

  .footer-grid > div:nth-child(4),
  .footer-grid > div:nth-child(6),
  .footer-grid > div:not(.footer-brand-col) {
    margin-left: 0;
    margin-top: 0;
  }

  .footer-brand-col {
    grid-column: 1 / -1;
    margin-bottom: 1rem;
  }

  .footer-grid a,
  .footer-col-heading {
    font-size: 1rem;
  }
}

@media (max-width: 767px) {
  .faq {
    --faq-list-offset: calc(4px + 1rem);
  }
}

/* Arabic baseline RTL support */
html[dir="rtl"] body {
  text-align: right;
  font-family: 'Cairo', 'Futura', 'Tahoma', sans-serif;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] p,
html[dir="rtl"] span,
html[dir="rtl"] a,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] label,
html[dir="rtl"] .loc-subtitle,
html[dir="rtl"] .plan-stats,
html[dir="rtl"] .faq-answer,
html[dir="rtl"] .faq-q-text,
html[dir="rtl"] .gallery-filter-label,
html[dir="rtl"] .contact-label-text,
html[dir="rtl"] .contact-value-text {
  font-family: 'Cairo', 'Futura', 'Tahoma', sans-serif;
}

html[dir="rtl"] .site-header {
  direction: rtl;
}

html[dir="rtl"] .site-nav {
  flex-direction: row-reverse;
}

html[dir="rtl"] .site-nav .nav-main-link {
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  font-weight: 500;
}

html[dir="rtl"] .site-nav .nav-enquire {
  font-size: 0.98rem;
  font-weight: 600;
}

html[dir="rtl"] .overview-title-text {
  font-size: clamp(1.7rem, 2.1vw, 2.4rem);
  color: var(--myrtle);
  margin: 0;
}

html[dir="rtl"] .overview-body-text {
  margin: 0.85rem 0 0;
  color: #556a67;
  font-size: clamp(1rem, 1.15vw, 1.28rem);
  line-height: 1.75;
}

html[dir="rtl"] .nav-lang-icon {
  margin-right: 0;
  margin-left: 0.1rem;
}

html[dir="rtl"] .overview-head,
html[dir="rtl"] .amenities-head,
html[dir="rtl"] .loc-head,
html[dir="rtl"] .faq-head,
html[dir="rtl"] .plan-head-col {
  direction: rtl;
}

html[dir="rtl"] .newsletter-inner,
html[dir="rtl"] .contact-item {
  direction: rtl;
}

html[dir="rtl"] .newsletter-vline {
  margin-inline-end: 0;
  margin-inline-start: 1.5rem;
}

html[dir="rtl"] .footer-vline-1,
html[dir="rtl"] .footer-vline-2,
html[dir="rtl"] .footer-vline-3 {
  margin: 0;
}

html[dir="rtl"] .plan-text-container {
  left: auto;
  right: calc(34% + 5.25rem);
  text-align: right;
}

html[dir="rtl"] #planTextContainer.plan-text-container {
  left: auto;
  right: 1rem;
}

html[dir="rtl"] .footer-grid {
  direction: rtl;
}

html[dir="rtl"] .footer-grid a,
html[dir="rtl"] .footer-grid p {
  text-align: right;
}

html[dir="rtl"] .gallery-head {
  width: 100%;
  margin: 0;
  background: #e5e2da;
  padding: 3.5rem calc((100% - min(1223px, 92vw)) / 2) 0 4vw;
  justify-content: flex-end;
}

html[dir="rtl"] .gallery-filter {
  width: 100%;
  margin: 0 0 1.55rem;
  justify-content: flex-end;
  background: #e5e2da;
  padding: 1.5rem 4vw 3.5rem max(735px, 9.3vw);
  gap: 1.35rem;
}

html[dir="rtl"] .gallery-filter::after {
  right: calc(max(735px, 9.3vw) + 1rem);
  left: 26vw;
  bottom: 3.2rem;
}

html[dir="rtl"] .gallery-grid {
  direction: ltr;
}

html[dir="rtl"] .gallery .container {
  width: min(1833px, calc((100vw - 4rem) / var(--page-zoom, 1)));
  max-width: none;
  margin-right: 50%;
  margin-left: 0;
  transform: translateX(50%);
  padding: 0;
}

html[dir="rtl"] .gallery-progress {
  margin-right: auto;
  margin-left: auto;
}

html[dir="rtl"] .gallery-head-texts {
  align-items: flex-end;
  text-align: right;
  gap: 0.7rem;
  padding-top: 2rem;
}

html[dir="rtl"] .plans-title-text,
html[dir="rtl"] .gallery-title-text,
html[dir="rtl"] .tour-title-text,
html[dir="rtl"] .faq-head-title-text,
html[dir="rtl"] .newsletter-title-text {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  color: var(--myrtle);
  margin: 0;
}

html[dir="rtl"] .plans-title-text {
  font-size: clamp(1.9rem, 2.2vw, 2.5rem);
}

html[dir="rtl"] .plans-subtitle-text,
html[dir="rtl"] .gallery-subtitle-text,
html[dir="rtl"] .tour-subtitle-text {
  margin: 0;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  color: #516360;
  line-height: 1.4;
}

html[dir="rtl"] .plans-subtitle-text {
  font-size: clamp(1rem, 1.15vw, 1.4rem);
}

html[dir="rtl"] .plan-cta-label-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.94rem;
  color: var(--deep);
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
  line-height: 1.2;
  padding-inline: 0.4rem;
  direction: rtl;
  unicode-bidi: embed;
}

html[dir="rtl"] .plan-cta {
  align-self: center;
  min-width: 220px;
}

html[dir="rtl"] .gallery-title-text,
html[dir="rtl"] .tour-title-text,
html[dir="rtl"] .faq-head-title-text,
html[dir="rtl"] .newsletter-title-text {
  font-size: clamp(1.7rem, 2vw, 2.3rem);
}

html[dir="rtl"] .gallery-filter-label {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 0.78rem;
  color: #4a5e5b;
  white-space: nowrap;
}

html[dir="rtl"] .gallery-filter button {
  margin-bottom: 1.65rem;
}

html[dir="rtl"] .gallery-filter button.active::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: -1.6rem;
  height: 3px;
  background: rgba(87, 103, 101, 0.6);
}

html[dir="rtl"] .gallery-title-text {
  font-size: clamp(2rem, 2.2vw, 2.45rem) !important;
}

html[dir="rtl"] .gallery-subtitle-text {
  font-size: clamp(1.15rem, 1.2vw, 1.45rem) !important;
}

html[dir="rtl"] .overlay-label-text {
  font-size: 1.08rem;
  line-height: 1.42;
}

html[dir="rtl"] .gallery-filter button.active .gallery-filter-label,
html[dir="rtl"] .gallery-filter button:hover .gallery-filter-label {
  color: #2f4340;
}

html[dir="rtl"] .tour-subtitle-text {
  font-size: clamp(0.95rem, 1.05vw, 1.28rem);
  max-width: 1000px;
}

html[dir="rtl"] .faq-q-text {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 1.05rem;
  color: #3f514f;
  text-align: right;
}

/* RTL FAQ: offset on right side, toggle on left, icon smaller */
html[dir="rtl"] .faq-list {
  margin-left: 0;
  margin-right: var(--faq-list-offset);
  width: calc(100% - var(--faq-list-offset));
}

html[dir="rtl"] .faq-item {
  position: relative;
  padding-left: 1.75rem;
  padding-right: 0;
}

html[dir="rtl"] .faq-toggle-icon {
  position: absolute;
  left: 0;
  margin-left: 0;
  width: 16px;
  height: 16px;
}

html[dir="rtl"] .newsletter-title-text {
  color: #5d615f;
}

html[dir="rtl"] .contact-label-text {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 1rem;
  color: #8f8f8f;
  margin: 0 0 0.25rem;
}

html[dir="rtl"] .contact-value-text {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 0.95rem;
  color: #f1f1f1;
  margin: 0;
}

html[dir="rtl"] .contact-phone-text {
  letter-spacing: 0.02em;
}

html[dir="rtl"] .phil-title-text {
  width: auto;
  padding: 0.2rem 0.5rem;
  color: #d9d9d9;
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  font-family: 'Futura', 'Century Gothic', sans-serif;
  text-transform: uppercase;
}

html[dir="rtl"] .phil-label-text {
  width: max-content;
  max-width: 210px;
  padding: 0.14rem 0.35rem;
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: center;
  color: #e4e4e4;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  html[dir="rtl"] .site-nav {
    flex-direction: column;
    align-items: flex-end;
  }

  html[dir="rtl"] #planTextContainer.plan-text-container {
    right: 1rem;
    left: 1rem;
  }

  html[dir="rtl"] .gallery-head {
    width: calc(100% - 2rem);
    padding: 2rem 0 0;
  }

  html[dir="rtl"] .gallery-filter {
    width: calc(100% - 2rem);
    justify-content: flex-start;
    padding: 0.5rem 0;
    gap: 0.5rem;
  }

  html[dir="rtl"] .gallery-filter::after {
    left: 0;
    right: 0;
  }

  html[dir="rtl"] .gallery .container {
    width: calc(100% - 2rem);
  }

  html[dir="rtl"] .site-nav .nav-main-link,
  html[dir="rtl"] .site-nav .nav-enquire {
    font-size: 1rem;
  }

  html[dir="rtl"] .overview-title-text {
    font-size: 1.45rem;
  }

  html[dir="rtl"] .overview-body-text {
    font-size: 0.98rem;
    line-height: 1.65;
  }

  html[dir="rtl"] .phil-title-text {
    max-width: 138px;
    font-size: 0.52rem !important;
    line-height: 1.2;
    padding: 0.1rem 0.3rem;
    font-family: 'Cairo', 'Tahoma', sans-serif !important;
  }

  html[dir="rtl"] .plan-cta-label-text {
    font-size: 0.82rem;
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
  }

  html[dir="rtl"] .phil-label-text {
    max-width: 138px;
    font-size: 0.52rem !important;
    font-family: 'Cairo', 'Tahoma', sans-serif !important;
  }

  html[dir="rtl"] .phil-center {
    font-size: 0.6rem !important;
    font-family: 'Cairo', 'Tahoma', sans-serif !important;
    text-transform: none !important;
  }
}

@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden;
  }

  main,
  .site-header,
  .hero,
  .overview,
  .amenities,
  .video-cta,
  .location,
  .plans,
  .gallery,
  .tour,
  .philosophy,
  .faq,
  .newsletter,
  .contact-strip,
  .register,
  .feature-strip,
  .site-footer {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .section,
  .section-dark {
    padding: 3rem 0;
  }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 0.85rem;
    gap: 0.5rem;
    background: linear-gradient(to bottom, rgba(22, 40, 37, 0.94), rgba(22, 40, 37, 0.72));
  }

  .brand-mark {
    height: 42px;
  }

  .mobile-menu-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 6px);
    left: 0.85rem;
    right: 0.85rem;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(20, 36, 33, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
    padding: 0.25rem 0;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 80;
  }

  .site-header.menu-open .site-nav {
    display: flex;
  }

  .site-nav a {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 0.72rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .site-nav a img {
    height: 11px;
  }

  .site-nav .nav-enquire {
    margin: 0.3rem auto 0.5rem;
    border-bottom: 0;
  }

  .site-nav .nav-lang {
    margin: 0 auto 0.3rem;
  }

  .nav-enquire {
    padding: 0;
  }

  .hero {
    min-height: 68vh;
    aspect-ratio: auto;
  }

  .hero-wordmark {
    width: 70vw;
    top: 46%;
  }

  .two-col {
    gap: 1.5rem;
  }

  .overview-head {
    gap: 0.85rem;
    align-items: center;
    justify-content: center;
  }

  .overview-vline {
    display: none;
  }

  .overview-title {
    max-width: 220px;
    width: 220px;
    display: block;
    margin: 0 auto;
  }

  .overview.section {
    padding-top: 3.5rem;
  }

  .overview-head,
  .amenities-head,
  .loc-head,
  .gallery-head,
  .tour-head,
  .faq-head {
    gap: 1rem;
  }

  .amenities-head {
    padding-left: 0;
    margin-bottom: 2rem;
    align-items: center;
  }

  .amenities-vline,
  .loc-vline,
  .plan-head-line,
  .gallery-vline,
  .tour-vline,
  .faq-head-line {
    min-height: 72px;
    height: 72px;
  }

  .amenities-title,
  .loc-title,
  .faq-head-title {
    font-size: clamp(26px, 8.5vw, 40px);
  }

  .amenity-row {
    gap: 1.5rem 0.5rem;
    justify-content: center;
  }

  /* Row 1: 3 icons */
  .amenity-item:nth-child(-n+3) {
    width: calc(33.333% - 0.75rem);
  }

  /* Row 2: 2 icons */
  .amenity-item:nth-child(4),
  .amenity-item:nth-child(5) {
    width: calc(40% - 0.75rem);
  }

  /* Row 3: remaining */
  .amenity-item:nth-child(n+6) {
    width: calc(40% - 0.75rem);
  }

  .amenity-item img {
    max-width: 85px;
  }

  .video-cta {
    min-height: 60vh;
    padding: 3.5rem 0;
  }

  .cta-text-left,
  .cta-text-right {
    font-size: clamp(18px, 5vw, 24px);
    text-align: center;
  }

  .play {
    width: 86px;
    height: 86px;
  }

  .video-inline-close {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.6rem;
  }

  .location.section {
    padding-top: 4rem;
  }

  .loc-head-text {
    padding-top: 0.5rem;
  }

  .loc-subtitle {
    font-size: clamp(18px, 4vw, 22px);
  }

  .tabs {
    gap: 0.75rem;
    border-bottom-width: 3px;
    padding-bottom: 0.5rem;
  }

  .tab {
    width: calc(50% - 0.375rem);
    justify-content: flex-start;
  }

  .tab.active {
    font-weight: 600;
  }

  .tab.active::after {
    bottom: -0.68rem;
    height: 3px;
  }

  .map-box {
    margin-top: 1.5rem;
  }

  #mapImage {
    max-height: 320px;
  }

  .map-focus-label {
    font-size: 11px;
    padding: 0.2rem 0.5rem;
    left: 12px;
  }

  .loc-plans-strip {
    margin-top: -24px;
  }

  .plans {
    padding-top: 2.5rem;
  }

  .plan-head-col {
    gap: 1rem;
  }

  .plans-title {
    width: min(240px, 65vw);
  }

  .plan-cta-bg {
    width: 180px;
  }

  .plan-left {
    min-height: 240px;
  }

  #planTextContainer.plan-text-container {
    left: 1rem;
    right: 1rem;
    top: 1rem;
    width: auto;
  }

  .plan-text-container h3 {
    font-size: clamp(13px, 3.4vw, 15px);
    margin-bottom: 0.55rem;
    line-height: 1.06;
  }

  #planTextContainer .plan-subtitle {
    font-size: 12px;
    margin-bottom: 0.6rem;
  }

  #planTextContainer .plan-stats {
    font-size: 12px;
    line-height: 1.08;
  }

  #planTextContainer .plan-stats p {
    margin-bottom: 2px;
  }

  .plan-right {
    min-height: 280px;
  }

  .plan-prev,
  .plan-next {
    width: 26px;
  }

  /* Hide plan-prev in plan-left on mobile to prevent flash before JS moves it */
  .plan-left .plan-prev {
    display: none;
  }

  .plan-vline {
    display: none;
  }

  .plan-prev {
    position: absolute;
    left: 4vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }

  .plan-next {
    left: auto;
    right: 4vw;
  }

  .plan-unit,
  .plan-size,
  .plan-dl-row {
    left: calc(34% + 1.25rem);
  }

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

  .stats strong {
    font-size: 44px;
  }

  .gallery.section {
    padding-top: 3.5rem;
    padding-bottom: 3rem;
  }

  .gallery-head {
    padding: 2rem 1rem 0;
  }

  .gallery-head-texts {
    padding-top: 0.5rem;
  }

  .gallery-filter {
    padding: 1rem 1rem 2rem;
    gap: 0.6rem 0.9rem;
  }

  .gallery-filter::after {
    left: 1rem;
    right: 1rem;
    bottom: 1.6rem;
  }

  .gallery-filter button {
    margin-bottom: 0.7rem;
  }

  .gallery-filter button img {
    height: 14px;
  }

  .gallery-filter button.active::after {
    bottom: -0.72rem;
  }

  .gallery .container {
    width: calc(100% - 1rem);
    margin-left: auto;
    margin-right: auto;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-top: 1.5rem;
  }

  .gallery-grid > img:first-child,
  .gallery-grid > img:last-child {
    display: none;
  }

  .gallery-grid > img,
  .overlay-card {
    min-height: 220px;
    aspect-ratio: 4 / 5;
  }

  .overlay-panel {
    width: 72%;
    height: 72%;
  }

  .gallery-progress,
  .gallery-lightbox-progress {
    width: min(320px, 78vw);
  }

  .gallery-lightbox-viewport {
    padding: 4rem 0.75rem 5rem;
  }

  .gallery-lightbox-nav {
    top: auto;
    bottom: 1rem;
    transform: none;
    width: 2.5rem;
    height: 2.5rem;
  }

  .gallery-lightbox-nav.prev {
    left: 1rem;
  }

  .gallery-lightbox-nav.next {
    right: 1rem;
  }

  .tour.section {
    padding-top: 3.5rem;
  }

  .tour-headbar img {
    width: min(60%, 260px);
  }

  .tour-main-wrap {
    min-height: 260px;
  }

  .tour-main {
    object-fit: cover;
  }

  .tour-main-icon {
    left: 50%;
    top: 50%;
    width: clamp(34px, 9vw, 52px);
  }

  .tour-main-icon-btn {
    right: 4%;
    left: auto;
    top: 87%;
    width: clamp(34px, 9vw, 52px);
    transform: translateY(-50%);
  }

  .tour-main-icon-secondary {
    left: 50%;
    top: 50%;
    width: clamp(34px, 9vw, 52px);
  }

  .tour-main-icon-secondary-btn {
    left: 4%;
    top: 87%;
    width: clamp(34px, 9vw, 52px);
    transform: translateY(-50%);
  }

  .tour-stage {
    margin-top: 2rem;
  }

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

  .philosophy-stage {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .faq.section {
    padding-top: 3.5rem;
  }

  .faq-head {
    margin-bottom: 1rem;
  }

  .faq-item {
    align-items: flex-start;
    padding: 1rem 0;
  }

  .faq-toggle-icon {
    margin-top: 0.15rem;
  }

  .faq-answer {
    font-size: 1.05rem;
    line-height: 1.6;
  }

  .newsletter-inner {
    align-items: stretch;
  }

  .newsletter-title {
    max-width: 260px;
  }

  .newsletter form {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .newsletter .btn {
    width: 100%;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    padding: 2rem 0;
  }

  .contact-item {
    padding: 0.85rem 0;
  }

  .contact-icon {
    width: 32px;
    height: 32px;
  }

  .contact-label,
  .contact-value {
    height: auto;
    max-width: 100%;
  }

  .register-grid > img {
    max-height: 320px;
  }

  .register-form {
    padding: 3rem 1rem 2rem;
  }

  .register-title {
    margin-bottom: 2rem;
  }

  .register-submit {
    justify-self: stretch;
    width: 100%;
  }

  .feature-grid {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .doc-item {
    padding: 2rem 1rem;
  }

  .site-footer {
    padding: 3rem 0 3.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .footer-brand-col {
    margin-bottom: 0;
  }

  .footer-grid a,
  .footer-col-heading {
    font-size: 0.95rem;
  }

  .footer-grid p {
    font-size: 0.8rem;
  }
}

@media (max-width: 479px) {
  .container {
    width: calc(100% - 1.25rem);
  }

  .site-nav {
    gap: 0.65rem;
  }

  .site-nav a img {
    height: 10px;
  }

  .hero-wordmark {
    width: 78vw;
  }

  .amenity-item {
    width: 100%;
  }

  .plan-head-texts {
    gap: 0.35rem;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .stats div {
    padding: 2rem 0 0.75rem;
    gap: 0.5rem;
  }

  .tab {
    width: 100%;
  }

  .gallery .container {
    width: calc(100% - 0.75rem);
  }

  .gallery-grid > img,
  .overlay-card {
    min-height: 200px;
  }

  .phil-center {
    flex-direction: column;
    pointer-events: auto;
  }
  .phil-text-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .phil-text-content.is-expanded {
    -webkit-line-clamp: unset;
  }
  .phil-read-more {
    display: inline-block;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-transform: lowercase;
    font-size: 11px;
    font-weight: 400;
    margin-top: 0.25rem;
    cursor: pointer;
    text-decoration: underline;
    pointer-events: auto;
  }
  .phil-read-more::after {
    content: "";
  }
  .phil-read-more.is-hidden {
    display: none;
  }

  .phil-mobile-modal {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(27, 53, 50, 0.97);
    padding: 1rem;
  }

  .phil-mobile-modal.is-open {
    display: flex;
  }

  .phil-mobile-modal-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
  }

  .phil-mobile-modal-stage {
    position: relative;
    width: min(94vw, 580px);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
  }

  .phil-mobile-wheel {
    position: absolute;
    width: 96%;
    height: auto;
    opacity: 0.95;
  }

  .phil-mobile-wheel-inner {
    transform: scale(0.86);
    opacity: 0.4;
  }

  .phil-mobile-modal-text {
    position: relative;
    width: 62%;
    text-align: center;
    color: #fff;
    font-family: 'Jost', 'Manrope', sans-serif;
    font-size: clamp(13px, 3.7vw, 18px);
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .philosophy-stage {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .footer-socials img {
    width: 36px;
    height: 36px;
  }
}


/* ==================================
   FLOOR PLANS PAGE
   ================================== */
/* Floor Plans Intro */
.fp-header {
  padding: 4.5rem 0 7rem;
  display: flex;
  align-items: center;
}

.fp-title-wrap {
  position: relative;
  padding-left: 2rem;
  margin-left: max(284px, 7.45vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.fp-title-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  transform: translateY(1.25rem);
}

.fp-title-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.55rem;
  bottom: -3.05rem;
  width: 3px;
  background-color: var(--natural-beige);
}

.fp-title {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 48.75px;
  color: var(--myrtle);
  font-weight: 400;
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
}

.fp-subtitle {
  font-family: 'Manrope', sans-serif;
  font-size: 24px;
  color: #333;
  margin: 0;
  line-height: 1.2;
}

/* List Structure */
.fp-list {
  display: flex;
  flex-direction: column;
}

.fp-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch; /* So columns are equal height */
}

/* Make sure container handles equal widths */
.fp-info, .fp-image {
  padding: 6rem max(10vw, 100px);
  display: flex;
}

/* 
 * Apply background colors explicitly to the halves 
 */
.fp-info {
  background-color: #E2DFD3;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 5.5rem;
  padding-bottom: 6.5rem;
  gap: 3.25rem;
}

.fp-image {
  background-color: #929F94; /* The exact teal/green background from ref */
  position: relative;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0 !important; /* Force override */
  overflow: hidden; /* Prevent zoomed image from leaking */
}

/* Zebra crossing layout */
.fp-item:nth-child(even) .fp-info {
  grid-column: 2;
  grid-row: 1;
}

.fp-item:nth-child(even) .fp-image {
  grid-column: 1;
  grid-row: 1;
}

/* Typography for inner info */
.fp-info h2 {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 33px; /* From c-h.md */
  line-height: 1.08;
  color: #4B524A;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fp-subtitle-type {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 21.71px; /* From c-h.md */
  letter-spacing: 1px;
  color: #7A8177;
  margin-top: -1.5rem;
  text-transform: uppercase;
}

.fp-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .fp-keyplan {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

.fp-stats p {
    font-family: 'Futura', 'Century Gothic', sans-serif;
    font-size: 18px;
    line-height: 22px;
  margin: 0;
  color: #7A8177;
}

.fp-keyplan h3 {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 21.71px; /* From c-h.md */
  font-weight: 600;
  color: #4B524A;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.fp-keyplan p {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 18px; /* From c-h.md */
  margin: 0;
  color: #7A8177;
}

.fp-download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  text-decoration: none;
  border-bottom: 1px solid #4B524A;
  padding-bottom: 0.2rem;
  width: max-content;
}

.fp-download img {
  width: 24px;
}

.fp-download span {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 18px; /* Match c-h.md standard */
  font-weight: 600;
  color: #4B524A;
}

/* Image settings */
.fp-image img:not(.fp-zoom-icon) {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain;
  transform: scale(2.2); /* Zoom past the empty white margins of the raw image */
  opacity: 0.85;
   /* Applies ONLY to the floor plan image*/
  mix-blend-mode: multiply;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.fp-image:hover > img:not(.fp-zoom-icon) {
  opacity: 0.7;
  filter: brightness(0.8);
}

/* Zoom icon */
.fp-image .fp-zoom-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  z-index: 2;
  pointer-events: none;
  filter: none;
  opacity: 1;
}



.fp-header-block {
  position: relative;
  padding-left: 2rem;
  padding-top: 1rem; /* Push description text down */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-left: 9.2rem;
}

.fp-header-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: clamp(65px, 6.5vw, 98px); /* Hardware lock the bar height so padding cannot shrink or stretch it */
  width: 3px;
  background-color: var(--natural-beige);
  transform: translateY(-0.5rem);
}

/* The bar size is strictly locked for all elements, so no override is needed based on subtitles */

.fp-keyplan {
  margin-left: 9.2rem;
  padding-left: 2rem;
  margin-top: 1.5rem;
}

.fp-info > .fp-download {
  margin-left: calc(9.2rem + 2rem);
}

/* Arabic floor-plans page: place heading bars on the right side of text */
html[dir="rtl"] .page-floor-plans .fp-title-wrap {
  padding-left: 0;
  padding-right: 2rem;
  margin-left: 0;
  margin-right: max(284px, 7.45vw);
}

html[dir="rtl"] .page-floor-plans .fp-title-wrap::before {
  left: auto;
  right: 0;
}

html[dir="rtl"] .page-floor-plans .fp-title-copy,
html[dir="rtl"] .page-floor-plans .fp-info,
html[dir="rtl"] .page-floor-plans .fp-header-block,
html[dir="rtl"] .page-floor-plans .fp-keyplan {
  text-align: right;
}

html[dir="rtl"] .page-floor-plans .fp-header-block {
  padding-left: 0;
  padding-right: 2rem;
  margin-left: 0;
  margin-right: 9.2rem;
}

html[dir="rtl"] .page-floor-plans .fp-header-block::before {
  left: auto;
  right: 0;
}

html[dir="rtl"] .page-floor-plans .fp-keyplan {
  margin-left: 0;
  padding-left: 0;
  margin-right: 9.2rem;
  padding-right: 2rem;
}

html[dir="rtl"] .page-floor-plans .fp-info > .fp-download {
  margin-left: 0;
  margin-right: calc(9.2rem + 2rem);
}




/* Home Page Floor Plans Text */
.plan-text-container {
    position: absolute;
    left: calc(34% + 5.25rem);
    top: 20%;
  color: var(--myrtle);
  font-family: 'Futura', 'Century Gothic', sans-serif;
  width: 50%;
}
.plan-text-container h3 {
  font-size: 32px;
  margin: 0 0 1rem 0;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
}

#planTextContainer .plan-subtitle,
#planTextContainer .plan-stats,
#planTextContainer .plan-progress {
  margin-left: 0;
  width: 100%;
}

.plan-subtitle {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  color: #333;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}
.plan-stats {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    line-height: 18px;
  }
.plan-stats p {
    margin: 0 0 4px 0;
  }
  .plan-stats p:last-child {
    margin-bottom: 0;
  }

@media (min-width: 768px) and (max-width: 900px) {
  .plan-text-container {
    left: 2rem;
    top: 5rem;
    width: 80%;
  }
}

/* Home Page Floor Plans Lightbox */
.fp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(10, 12, 10, 0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}
.fp-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}
.fp-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
}
.fp-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}
/* Side-by-side layout: image left, info right */
.fp-lightbox-content.home-lb-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}
.fp-lightbox-image-wrap {
  flex: 1 1 65%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 1rem 1rem 2rem;
  background: transparent;
  overflow: hidden;
  height: 100%;
}
.fp-lightbox-image-wrap img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform: none;
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
  border-radius: 4px;
}
.fp-lightbox.active .fp-lightbox-image-wrap img {
  animation: fadeIn 0.35s ease-out;
}
/* Info sidebar */
.fp-lightbox-info {
  flex: 0 0 300px;
  background: rgba(255,255,255,0.04);
  border-left: 1px solid rgba(255,255,255,0.08);
  padding: 5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  color: #e8e4dc;
  overflow-y: auto;
  overflow-x: hidden;
}
.fp-lightbox-copy {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 1.25rem;
}
.fp-lightbox-info h2 {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.4rem;
}
#lbPlanSubtitle {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(232,228,220,0.55);
}
.fp-lightbox-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
#homeFpLightboxInfo .fp-stats,
#homeFpLightboxInfo .fp-keyplan,
#homeFpLightboxInfo #lbPlanKeyplan,
#fpLightboxInfo .fp-stats,
#fpLightboxInfo .fp-keyplan,
#fpLightboxInfo #fpLbKeyplan {
  display: block;
  width: 100%;
  margin-left: 0;
  padding-left: 0;
}
#homeFpLightboxInfo .fp-stats p,
#fpLightboxInfo .fp-stats p {
  color: #e8e4dc;
  margin: 0 0 4px;
  line-height: 18px;
  font-size: 14px;
}
#homeFpLightboxInfo .fp-keyplan h3,
#fpLightboxInfo .fp-keyplan h3 {
  color: rgba(232,228,220,0.5);
  font-size: 11px;
  letter-spacing: 2px;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}
#homeFpLightboxInfo .fp-keyplan p,
#fpLightboxInfo .fp-keyplan p {
  color: #e8e4dc;
  margin: 0 0 0.2rem;
  font-size: 13px;
  line-height: 1.4;
}
.lb-separator {
  display: none;
}
/* Progress counter */
.gallery-lightbox-progress#homeFpLightboxProgress,
.gallery-lightbox-progress#fpLightboxProgress {
  color: rgba(232,228,220,0.5);
  font-family: 'Futura', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  bottom: 1.25rem;
  text-align: center;
  display: block;
}
/* Nav arrows */
.fp-lightbox .gallery-lightbox-nav {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.fp-lightbox .gallery-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.25);
}

.gallery-lightbox-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .fp-lightbox-content.home-lb-layout {
    flex-direction: column;
    overflow-y: auto;
    height: 100dvh;
  }
  .fp-lightbox-image-wrap {
    flex: 0 0 auto;
    min-height: 50vw;
    height: 55vw;
    padding: 4.5rem 1rem 1rem;
  }
  .fp-lightbox-info {
    flex: 0 0 auto;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 1.5rem 1.5rem 4rem;
    justify-content: flex-start;
  }
}

/* ==================================
   REGISTER INTEREST POPUP
   ================================== */
.reg-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 15, 14, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  padding: 1rem;
}

.reg-popup-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.reg-popup {
  position: relative;
  background: #fff;
  max-width: 1060px;
  width: 95%;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
  animation: popupSlideIn 0.4s ease both;
}

@keyframes popupSlideIn {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ==================================
   FINAL ARABIC RTL STABILIZATION
   ================================== */
html[dir="rtl"] body,
html[dir="rtl"] body * {
  font-family: 'Cairo', 'Tahoma', sans-serif !important;
}

html[dir="rtl"] .site-nav .nav-main-link,
html[dir="rtl"] .site-nav .nav-enquire {
  font-size: 1rem !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

html[dir="rtl"] .overview-title-text {
  font-size: 48.75px !important;
  line-height: 1.2 !important;
}

html[dir="rtl"] .overview-body-text {
  font-size: clamp(1.02rem, 1.15vw, 1.34rem) !important;
  line-height: 1.8 !important;
}

html[dir="rtl"] .gallery .container {
  /* Mirror English: 1833px container centred via RTL-flip of the same trick */
  width: min(1833px, calc((100vw - 4rem) / var(--page-zoom, 1))) !important;
  max-width: none !important;
  margin-right: 50% !important;
  margin-left: 0 !important;
  transform: translateX(50%) !important;
  padding: 0 !important;
}

html[dir="rtl"] .gallery-head,
html[dir="rtl"] .gallery-filter {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[dir="rtl"] .gallery-head {
  /* Mirror English head: padding-left=(100%-1223px)/2 → padding-right for RTL (standard container alignment) */
  padding: 3.5rem calc((100% - min(1223px, 92vw)) / 2) 0 4vw !important;
  background: #e5e2da !important;
  justify-content: flex-start !important;   /* RTL flex-start = items anchored to the RIGHT side */
}

html[dir="rtl"] .gallery-filter {
  direction: ltr !important;
  flex-direction: row-reverse !important; /* RTL button order */
  justify-content: flex-end !important;   /* anchors reversed items at x=735px left edge */
  padding: 1.5rem 4vw 3.5rem max(735px, 9.3vw) !important;
  background: #e5e2da !important;
  gap: 1.35rem !important;
}

html[dir="rtl"] .gallery-filter button {
  direction: rtl !important;
  line-height: 1 !important;
  padding: 0 0.55rem !important;
  align-self: flex-start !important;
  margin-bottom: 1.4rem !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  background: transparent !important;
}

html[dir="rtl"] .gallery-filter::after {
  left: calc(max(735px, 9.3vw) + 1rem) !important;
  right: 40vw !important;  /* ends at right edge of الردهة */
  bottom: 3.2rem !important;
}

html[dir="rtl"] .gallery-filter button.active::after,
html[dir="rtl"] .gallery-filter button::after {
  left: 0.6rem !important;
  right: 0.6rem !important;
  bottom: -1.6rem !important;
}

html[dir="rtl"] .gallery-filter-label {
  font-size: 20px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  font-family: 'Cairo', 'Futura', 'Century Gothic', sans-serif !important;
  color: #4a5e5b !important;
  letter-spacing: 0 !important;
  direction: rtl !important;
}

html[dir="rtl"] .gallery-filter button.active .gallery-filter-label,
html[dir="rtl"] .gallery-filter button:hover .gallery-filter-label {
  color: #2f4340 !important;
}

html[dir="rtl"] .plan-head {
  align-items: flex-start !important;
  gap: 1.1rem !important;
  justify-content: space-between !important;
  direction: rtl !important;
}

html[dir="rtl"] .plan-cta {
  position: relative !important;
  display: inline-block !important;
  min-width: 228px !important;
  align-self: flex-start !important;
  flex-shrink: 0 !important;
}

html[dir="rtl"] .plan-cta-bg {
  width: 220px !important;
  display: block !important;
}

html[dir="rtl"] .plan-cta-label-text {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 0.9rem !important;
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
  color: var(--deep) !important;
  white-space: normal !important;
  line-height: 1.25 !important;
  padding: 0 0.4rem !important;
  direction: rtl !important;
  unicode-bidi: embed !important;
}

html[dir="rtl"] .plan-left .plan-prev {
  left: auto !important;
  right: 6% !important;
}

html[dir="rtl"] .plan-right .plan-next {
  left: 6% !important;
  right: auto !important;
}

html[dir="rtl"] .plan-right .plan-next img {
  transform: scaleX(-1) !important;
}

html[dir="rtl"] .plan-left .plan-prev img {
  transform: scaleX(-1) !important;
}

html[dir="rtl"] .plan-vline {
  left: auto !important;
  right: 39% !important;
  top: 14.5% !important;
  height: 25.5% !important;
}

html[dir="rtl"] .plans #planTextContainer.plan-text-container {
  top: 18% !important;
  left: auto !important;
  right: calc(39% + 1.35rem) !important;
  width: 52% !important;
}

html[dir="rtl"] .plan-dl-row {
  left: auto !important;
  right: calc(39% + 2px + 2rem) !important;
  flex-direction: row-reverse;
}

html:not([dir="rtl"]) .plans .plan-vline {
  left: 39% !important;
  top: 14.5% !important;
  height: 25.5% !important;
}

html:not([dir="rtl"]) .plans #planTextContainer.plan-text-container {
  top: 18% !important;
  left: calc(39% + 1.35rem) !important;
  right: auto !important;
  width: 52% !important;
}

html[dir="rtl"] .gallery-grid {
  width: 100% !important;
  margin: 1.6rem auto 0 !important;
}

html[dir="rtl"] .plans-title-text,
html[dir="rtl"] .gallery-title-text,
html[dir="rtl"] .tour-title-text,
html[dir="rtl"] .faq-head-title-text,
html[dir="rtl"] .newsletter-title-text {
  font-size: 48.75px !important;
  line-height: 1.2 !important;
}

html[dir="rtl"] .plans-subtitle-text,
html[dir="rtl"] .gallery-subtitle-text,
html[dir="rtl"] .tour-subtitle-text {
  font-size: 26px !important;
}

html[dir="rtl"] .plans-subtitle-text,
html[dir="rtl"] .gallery-subtitle-text,
html[dir="rtl"] .tour-subtitle-text,
html[dir="rtl"] .faq-q-text,
html[dir="rtl"] .faq-answer,
html[dir="rtl"] .loc-subtitle,
html[dir="rtl"] .plan-stats,
html[dir="rtl"] .contact-label-text,
html[dir="rtl"] .contact-value-text {
  line-height: 1.7 !important;
}

html[dir="rtl"] .phil-title-text,
html[dir="rtl"] .phil-label-text {
  text-transform: none !important;
  font-size: 1.1rem !important;
}

@media (max-width: 767px) {
  html[dir="rtl"] .phil-title-text {
    font-size: 0.52rem !important;
    font-family: 'Cairo', 'Tahoma', sans-serif !important;
    max-width: 138px;
    line-height: 1.2;
  }

  html[dir="rtl"] .phil-label-text {
    font-size: 0.52rem !important;
    font-family: 'Cairo', 'Tahoma', sans-serif !important;
    max-width: 138px;
  }

  html[dir="rtl"] .phil-center {
    font-size: 0.44rem !important;
    font-family: 'Cairo', 'Tahoma', sans-serif !important;
    text-transform: none !important;
  }
}

html[dir="rtl"] .field-label-text {
  display: block;
  font-family: 'Cairo', 'Tahoma', sans-serif !important;
  font-size: 0.72rem !important;
  color: var(--muted) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1 !important;
}

/* === Arabic typography: colours & sizes match English design === */
html[dir="rtl"] .overview-title-text {
  color: var(--myrtle) !important;
}
html[dir="rtl"] .overview-body-text {
  color: #556a67 !important;
}
html[dir="rtl"] .amenities-title {
  color: var(--accent) !important;     /* matches English .amenities-title: var(--accent) gold */
}
html[dir="rtl"] .loc-title {
  color: var(--ink) !important;        /* matches English .loc-title: inherits --ink */
}
html[dir="rtl"] .loc-subtitle {
  color: var(--muted) !important;      /* matches English .loc-subtitle: var(--muted) */
}
html[dir="rtl"] .plans-title-text,
html[dir="rtl"] .gallery-title-text,
html[dir="rtl"] .tour-title-text,
html[dir="rtl"] .faq-head-title-text {
  color: var(--myrtle) !important;     /* dark forest green — matches English section-title images */
}
html[dir="rtl"] .newsletter-title-text {
  color: var(--myrtle) !important;     /* was #5d615f (muted) — align with other section titles */
}
html[dir="rtl"] .plans-subtitle-text,
html[dir="rtl"] .gallery-subtitle-text,
html[dir="rtl"] .tour-subtitle-text {
  color: var(--muted) !important;      /* matches English section subtitle muted colour */
}
html[dir="rtl"] .faq-q-text {
  color: var(--ink) !important;
  font-size: 1.05rem !important;
}

html[dir="rtl"] .faq-item.is-open .faq-q-text {
  font-size: 1.2rem !important;
}

html[dir="rtl"] .faq-toggle-icon {
  width: 16px !important;
  height: 16px !important;
}

html[dir="rtl"] .faq-answer {
  color: var(--muted) !important;     /* matches English .faq-answer: var(--muted) */
  font-size: 1.15rem !important;
  line-height: 1.65 !important;
}

html[dir="rtl"] .faq-answer.open {
  font-size: 1.25rem !important;
}
html[dir="rtl"] .contact-label-text {
  color: var(--muted) !important;     /* muted grey — readable on light #f8f7f4 strip bg */
  font-size: 0.85rem !important;
}
html[dir="rtl"] .contact-value-text {
  color: var(--ink) !important;       /* was #f1f1f1 (near-white) — INVISIBLE on light bg fix */
  font-size: 1rem !important;
  font-weight: 500 !important;
}

@media (max-width: 767px) {
  html[dir="rtl"] .gallery .container,
  html[dir="rtl"] .gallery-head,
  html[dir="rtl"] .gallery-filter {
    width: 100% !important;
  }

  html[dir="rtl"] .gallery-head {
    padding: 2rem 1rem 0 !important;
  }

  html[dir="rtl"] .gallery-filter {
    padding: 1rem 1rem 2rem !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
  }

  html[dir="rtl"] .gallery-filter::after {
    right: 1rem !important;
    left: 1rem !important;
    bottom: 1.75rem !important;
  }

  html[dir="rtl"] .gallery .container {
    width: calc(100% - 2rem) !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  html[dir="rtl"] .plan-cta {
    min-width: 190px !important;
  }

  html[dir="rtl"] .plan-cta-bg {
    width: 190px !important;
  }

  html[dir="rtl"] .plan-cta-label-text {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.76rem !important;
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
    color: var(--deep) !important;
    padding: 0 0.4rem !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    direction: rtl !important;
    unicode-bidi: embed !important;
  }

  html[dir="rtl"] .plan-left .plan-prev {
    right: 4vw !important;
  }

  html[dir="rtl"] .plan-right .plan-next {
    left: auto !important;
    right: 4vw !important;
  }

  html[dir="rtl"] .plan-right .plan-next img {
    transform: scaleX(1) !important;
  }

  html[dir="rtl"] .site-nav .nav-main-link,
  html[dir="rtl"] .site-nav .nav-enquire {
    font-size: 0.98rem !important;
  }

  html[dir="rtl"] .gallery-filter-label {
    font-size: 0.8rem !important;
  }

  html[dir="rtl"] .gallery-filter button {
    padding: 0.25rem 0.45rem !important;
  }

  html[dir="rtl"] .overview-title-text,
  html[dir="rtl"] .plans-title-text,
  html[dir="rtl"] .gallery-title-text,
  html[dir="rtl"] .tour-title-text,
  html[dir="rtl"] .faq-head-title-text,
  html[dir="rtl"] .newsletter-title-text {
    font-size: clamp(26px, 8.5vw, 40px) !important;
  }

  html[dir="rtl"] .plans-subtitle-text,
  html[dir="rtl"] .gallery-subtitle-text,
  html[dir="rtl"] .tour-subtitle-text,
  html[dir="rtl"] .overview-body-text {
    font-size: clamp(0.95rem, 4vw, 1.2rem) !important;
  }
}

/* Keep the decorative section bars on the right side of heading text in Arabic pages — desktop only */
html[dir="rtl"] .overview-head,
html[dir="rtl"] .amenities-head,
html[dir="rtl"] .loc-head,
html[dir="rtl"] .plan-head-col,
html[dir="rtl"] .tour-head,
html[dir="rtl"] .faq-head {
  flex-direction: row;
  direction: rtl;
}

html[dir="rtl"] .gallery-head {
  flex-direction: row;
  direction: rtl;
  justify-content: flex-start;
  align-items: flex-start;
}

html[dir="rtl"] .loc-head-text,
html[dir="rtl"] .plan-head-texts,
html[dir="rtl"] .gallery-head-texts,
html[dir="rtl"] .tour-head-texts {
  flex: 1 1 auto;
  direction: rtl;
  text-align: right;
  align-items: flex-start;
}

html[dir="rtl"] .faq-head-title-text,
html[dir="rtl"] .amenities-title,
html[dir="rtl"] .overview-title-text {
  flex: 1 1 auto;
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .newsletter-title-text {
  flex: 1 1 auto;
  text-align: right;
  direction: rtl;
  max-width: 360px;
}

html[dir="rtl"] .newsletter-inner {
  flex-direction: row;
  direction: rtl;
  justify-content: flex-start;
  align-items: center;
}

html[dir="rtl"] .newsletter-inner form {
  margin-right: auto;
}

.reg-popup-close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 10;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1.5px solid #c0c0c0;
  background: transparent;
  color: #555;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.reg-popup-close:hover {
  background: #f5f5f5;
  color: #222;
}

.reg-popup-inner {
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: 600px;
}

/* Left: photo — zoom into building portion of POP-UP design, hiding form half */
.reg-popup-photo {
  background-image: url('assets/POP-UP.jpg');
  background-size: 210% auto;
  background-position: left center;
  background-repeat: no-repeat;
  min-height: 600px;
}

/* Right: form side */
.reg-popup-form-side {
  padding: 3.5rem 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.reg-popup-eyebrow {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #C4983A;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.reg-popup-heading {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.reg-popup-sub {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  color: #888;
  margin: 0 0 2rem;
}

#regPopupForm {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
}

.reg-popup-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.6rem;
}

.reg-popup-label {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}

.reg-popup-input {
  border: none;
  border-bottom: 1.5px solid #C4983A;
  background: transparent;
  padding: 0.45rem 0;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  color: #333;
  outline: none;
  transition: border-color 0.2s;
}

.reg-popup-input::placeholder {
  color: #bbb;
  font-size: 13px;
}

.reg-popup-input:focus {
  border-bottom-color: #a07020;
}

.reg-popup-status {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  color: var(--myrtle);
  margin: 0 0 0.5rem;
  min-height: 1.2em;
}

.reg-popup-submit {
  width: 100%;
  background: #C4983A;
  color: #1a1a1a;
  border: none;
  padding: 1rem;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: auto;
  transition: background 0.2s;
}

.reg-popup-submit:hover {
  background: #b08530;
}

.reg-popup-privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  color: #aaa;
  margin: 1rem 0 0;
  line-height: 1.5;
}

.reg-popup-privacy svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: #aaa;
}

/* Tablet */
@media (max-width: 860px) {
  .reg-popup {
    width: 98%;
  }

  .reg-popup-inner {
    grid-template-columns: 42% 58%;
  }

  .reg-popup-photo {
    min-height: 500px;
  }

  .reg-popup-form-side {
    padding: 2.5rem 2rem 2rem;
  }

  .reg-popup-heading {
    font-size: 28px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .reg-popup-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .reg-popup {
    width: 100%;
    max-height: 92dvh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
  }

  .reg-popup-inner {
    grid-template-columns: 1fr;
  }

  /* Hide photo on mobile to keep form fully visible */
  .reg-popup-photo {
    display: none;
  }

  .reg-popup-form-side {
    padding: 2.5rem 1.4rem 2rem;
  }

  .reg-popup-heading {
    font-size: 26px;
  }

  .reg-popup-field {
    margin-bottom: 1.2rem;
  }

  .reg-popup-close {
    top: 0.8rem;
    right: 0.8rem;
  }
}

/* RTL popup overrides */
html[dir="rtl"] .reg-popup-close {
  right: auto;
  left: 1.1rem;
}

html[dir="rtl"] .reg-popup-form-side {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .reg-popup-eyebrow,
html[dir="rtl"] .reg-popup-heading,
html[dir="rtl"] .reg-popup-sub,
html[dir="rtl"] .reg-popup-label,
html[dir="rtl"] .reg-popup-privacy {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] .reg-popup-eyebrow {
  font-size: 12px;
}

html[dir="rtl"] .reg-popup-heading {
  font-size: 32px;
}

html[dir="rtl"] .reg-popup-input {
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', sans-serif;
}

html[dir="rtl"] .reg-popup-input::placeholder {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .reg-popup-submit {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 15px;
}

html[dir="rtl"] .reg-popup-privacy {
  flex-direction: row-reverse;
  font-size: 11px;
}

@media (max-width: 600px) {
  html[dir="rtl"] .reg-popup-close {
    right: auto;
    left: 0.8rem;
  }
}

/* == ADDED MOBILE OVERRIDES == */
@media (max-width: 1024px) {
  .fp-item { grid-template-columns: 1fr; }
  .fp-item:nth-child(even) .fp-info, .fp-item:nth-child(odd) .fp-info { grid-column: 1; grid-row: 2; }
  .fp-item:nth-child(even) .fp-image, .fp-item:nth-child(odd) .fp-image { grid-column: 1; grid-row: 1; }
  .fp-header { flex-direction: column; align-items: flex-start; padding: 4rem 1.5rem; }
  .fp-header-block::before { top: 0; min-height: 100%; transform: none; bottom: 0; }
  .fp-title-wrap { margin-left: 0; padding-left: 1.5rem; margin-bottom: 2rem; }
  .fp-header-block { margin-left: 0; padding-left: 1.5rem; margin-top: 1.5rem; }
  .fp-keyplan { margin-left: 0; padding-left: 1.5rem; margin-top: 1.5rem; }
  .fp-info > .fp-download { margin-left: 1.5rem; }
  .fp-info, .fp-image { padding: 4rem 1.5rem !important; }
  .fp-image { min-height: 50vh; }

  html[dir="rtl"] .page-floor-plans .fp-header { align-items: flex-end; }
  html[dir="rtl"] .page-floor-plans .fp-title-wrap { margin-right: 0; padding-right: 1.5rem; margin-bottom: 2rem; }
  html[dir="rtl"] .page-floor-plans .fp-header-block { margin-right: 0; padding-right: 1.5rem; margin-top: 1.5rem; }
  html[dir="rtl"] .page-floor-plans .fp-keyplan { margin-right: 0; padding-right: 1.5rem; margin-top: 1.5rem; }
  html[dir="rtl"] .page-floor-plans .fp-info > .fp-download { margin-right: 1.5rem; }
  
  /* Make sure philosophy stage scales safely */
  .philosophy-stage {
    min-height: 50vw;
  }
}
@media (max-width: 767px) {
  .fp-info > .fp-download { margin-top: 2rem; }
  .fp-info, .fp-image { padding: 3rem 1.5rem !important; }
  .fp-image { min-height: 40vh; }
  .fp-info h2 { font-size: 26px; }
  .fp-subtitle-type, .fp-keyplan h3 { font-size: 18px; }
  .fp-keyplan p, .fp-download span { font-size: 16px; }
  .fp-header { padding: 3rem 1.5rem; }
  .fp-title { font-size: 38px; }
  .fp-subtitle { font-size: 20px; }
  #planTextContainer.plan-text-container h3 {
    font-size: 13px !important;
    line-height: 1.15;
  }
  
  }

/* DEFINITIVE Arabic mobile heading fix – bars right, titles right
   KEY: all text containers use align-items:stretch so title/subtitle
   fill the full width, then text-align:right positions text at right edge. */
@media (max-width: 1024px) {

  /* ---- LOCATION ---- */
  html[dir="rtl"] #location .loc-head {
    display: flex !important;
    flex-direction: row !important;
    direction: rtl !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  html[dir="rtl"] #location .loc-vline {
    order: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  html[dir="rtl"] #location .loc-head-text {
    order: 1 !important;
    flex: 1 1 auto !important;
    align-items: stretch !important;
    min-width: 0 !important;
  }
  html[dir="rtl"] #location .loc-title,
  html[dir="rtl"] #location .loc-subtitle {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    direction: rtl !important;
    margin: 0 !important;
  }

  /* ---- FLOOR PLANS ---- */
  html[dir="rtl"] #plans .plan-head-col {
    display: flex !important;
    flex-direction: row !important;
    direction: rtl !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  html[dir="rtl"] #plans .plan-head-line {
    order: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  html[dir="rtl"] #plans .plan-head-texts {
    order: 1 !important;
    flex: 1 1 auto !important;
    align-items: stretch !important;
    min-width: 0 !important;
  }
  html[dir="rtl"] #plans .plans-title-text,
  html[dir="rtl"] #plans .plans-subtitle-text {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    direction: rtl !important;
    margin: 0 !important;
  }

  /* ---- GALLERY ---- */
  html[dir="rtl"] #gallery .gallery-head {
    display: flex !important;
    flex-direction: row !important;
    direction: rtl !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 2rem 1rem !important;
  }
  html[dir="rtl"] #gallery .gallery-vline {
    order: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  html[dir="rtl"] #gallery .gallery-head-texts {
    order: 1 !important;
    flex: 1 1 auto !important;
    align-items: stretch !important;
    min-width: 0 !important;
    padding-top: 0 !important;
  }
  html[dir="rtl"] #gallery .gallery-title-text,
  html[dir="rtl"] #gallery .gallery-subtitle-text {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    direction: rtl !important;
    margin: 0 !important;
  }

  /* ---- VISUAL TOUR ---- */
  html[dir="rtl"] .tour.section .tour-head {
    display: flex !important;
    flex-direction: row !important;
    direction: rtl !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  html[dir="rtl"] .tour.section .tour-vline {
    order: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  html[dir="rtl"] .tour.section .tour-head-texts {
    order: 1 !important;
    flex: 1 1 auto !important;
    align-items: stretch !important;
    min-width: 0 !important;
  }
  html[dir="rtl"] .tour.section .tour-title-text,
  html[dir="rtl"] .tour.section .tour-subtitle-text {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    direction: rtl !important;
    margin: 0 !important;
  }

  /* ---- Overview, Amenities, FAQ ---- */
  html[dir="rtl"] body:not(.page-floor-plans) .overview-head,
  html[dir="rtl"] body:not(.page-floor-plans) .amenities-head,
  html[dir="rtl"] body:not(.page-floor-plans) .faq-head {
    display: flex !important;
    flex-direction: row !important;
    direction: rtl !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  html[dir="rtl"] body:not(.page-floor-plans) .overview-copy,
  html[dir="rtl"] body:not(.page-floor-plans) .faq-head-title {
    flex: 1 1 auto !important;
    align-items: stretch !important;
    min-width: 0 !important;
  }
  html[dir="rtl"] body:not(.page-floor-plans) .overview-title-text,
  html[dir="rtl"] body:not(.page-floor-plans) .overview-body-text,
  html[dir="rtl"] body:not(.page-floor-plans) .faq-head-title-text {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    direction: rtl !important;
    margin: 0 !important;
  }

  /* ---- vlines always auto-sized ---- */
  html[dir="rtl"] body:not(.page-floor-plans) .overview-vline,
  html[dir="rtl"] body:not(.page-floor-plans) .amenities-vline,
  html[dir="rtl"] body:not(.page-floor-plans) .loc-vline,
  html[dir="rtl"] body:not(.page-floor-plans) .gallery-vline,
  html[dir="rtl"] body:not(.page-floor-plans) .tour-vline,
  html[dir="rtl"] body:not(.page-floor-plans) .faq-head-line {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* ---- Plan viewer unit description – right-aligned and pushed up ---- */
  html[dir="rtl"] .plans #planTextContainer.plan-text-container {
    left: 30% !important;
    right: 2rem !important;
    top: 3rem !important;
    width: auto !important;
    text-align: right !important;
    direction: rtl !important;
  }
  html[dir="rtl"] #planTextContainer.plan-text-container h3,
  html[dir="rtl"] #planTextContainer .plan-subtitle,
  html[dir="rtl"] #planTextContainer .plan-stats,
  html[dir="rtl"] #planTextContainer .plan-stats p,
  html[dir="rtl"] #planTextContainer .plan-progress {
    text-align: right !important;
    direction: rtl !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}