/* PXP project site. Skin measured from the Nad Al Sheba Figma design (1440 frame):
   Spectral headings, Lato body, Inter buttons, #FEFEFE ground, #F8F7F3 bands,
   #D1D0D0 hairlines. Accent is per developer: each project sets it in content.mjs
   (the page head overrides the default below). */
:root {
  --accent: #242F49;
  --accent-2: #2F3C5C;
  --ink: #0F1A26;
  --muted: #6D6E70;
  --ground: #FEFEFE;
  --band: #F8F7F3;
  --line: #D1D0D0;
  --green: #00A854;
  /* Action buttons in PXP brand red (brand book: Red #B51A2B), tried by Akra 29 Sept 2026. */
  --cta: #B51A2B;
  --cta-2: #961522;
  --serif: 'Spectral', 'Noto Naskh Arabic', Georgia, 'Times New Roman', serif;
  --sans: 'Lato', 'Noto Sans Arabic', 'Helvetica Neue', Arial, sans-serif;
  --ui: 'Inter', 'Noto Sans Arabic', 'Helvetica Neue', Arial, sans-serif;
  --wrap: 1240px;
  --gutter: 100px;
  --radius: 5px;
  --shadow: 0 4px 24px rgba(15, 26, 38, 0.06);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 18px/1.4 var(--sans); overflow-x: hidden; }
body.is-locked { overflow: hidden; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.wrap { width: min(var(--wrap), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.ic { flex: none; }
[hidden] { display: none !important; }

/* ---------- type --------------------------------------------------------- */
.eyebrow { font: 700 16px/1.2 var(--serif); letter-spacing: 0.01em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.h2 { font: 500 34px/1.2 var(--serif); letter-spacing: -0.01em; text-transform: uppercase; color: var(--accent); }
.h3 { font: 500 26px/1.2 var(--serif); letter-spacing: -0.01em; color: var(--accent); }
.h4 { font: 500 22px/1.2 var(--sans); color: var(--accent); }
.body { font: 400 18px/1.4 var(--sans); color: var(--ink); }
.fine { font: 400 16px/1.2 var(--sans); color: var(--ink); opacity: 0.8; }
.tag { font: 400 16px/1.2 var(--sans); color: var(--accent); margin-bottom: 8px; }

/* ---------- buttons ------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 47px; padding: 14px 24px; border-radius: 3px; font: 500 16px/1.2 var(--ui); text-decoration: none; transition: background .2s, color .2s, border-color .2s, transform .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--cta); color: #fff; }
.btn--solid:hover { background: var(--cta-2); }
.btn--line { background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 13px 24px; }
.btn--line:hover { background: var(--accent); color: #fff; }
.btn--white { background: #fff; color: var(--accent); }
.btn--white:hover { background: var(--band); }
.btn--glass { background: var(--cta); color: #fff; border: 1px solid var(--cta); padding: 13px 24px; }
.btn--glass:hover { background: var(--cta-2); border-color: var(--cta-2); }
.btn--wide { width: 100%; }
.btn--big { min-height: 70px; font: 600 18px/1.2 var(--sans); }

/* ---------- header ------------------------------------------------------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 40; height: 70px; background: rgba(254, 254, 254, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background .2s, box-shadow .2s; }
.hdr.is-solid { background: rgba(254, 254, 254, 0.96); box-shadow: 0 1px 0 var(--line); }
/* The header slides away while the visitor scrolls down and comes back as soon as they scroll up, so it never takes screen space from what is being read (Akra, 30 Sept 2026; every PXP site). */
.hdr { transition: background .2s, box-shadow .2s, transform .3s ease; }
.hdr.is-away { transform: translateY(-100%); box-shadow: none; }
.hdr__in { height: 70px; display: flex; align-items: center; gap: 30px; }
.hdr__logo img { width: 138px; height: auto; }
.hdr__nav { display: flex; gap: 28px; margin-inline: auto; }
.hdr__nav a { font: 400 18px/1.4 var(--sans); color: var(--accent); text-decoration: none; }
.hdr__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hdr__right { display: flex; align-items: center; gap: 20px; margin-inline-start: auto; }
.hdr__wa { color: var(--green); display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; }
.hdr__wa svg { width: 28px; height: 28px; }
.hdr__call { min-height: 40px; padding: 9px 20px; border-radius: 5px; }
.lang { position: relative; }
.hdr__lang { display: inline-flex; align-items: center; gap: 4px; font: 400 18px/1.4 var(--sans); color: var(--accent); text-decoration: none; }
.hdr__lang svg { transition: transform .2s; }
.lang.is-open .hdr__lang svg { transform: rotate(180deg); }
.lang__menu { position: absolute; top: calc(100% + 8px); right: 0; width: max-content; background: #fff; border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow); padding: 6px; }
.lang__menu a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font: 400 18px/1.4 var(--sans); color: var(--accent); text-decoration: none; white-space: nowrap; }
.lang__menu a:hover { background: var(--band); border-radius: 3px; }
.lang__menu:not([hidden]) { display: flex; flex-direction: column; }
.hdr__lang svg { width: 16px; height: 16px; }
.flag { width: 24px; height: 18px; border-radius: 2px; display: inline-block; }
.hdr__burger { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 6px; align-items: center; }
.hdr__burger span { width: 24px; height: 2px; background: var(--accent); display: block; transition: transform .25s, opacity .2s; }
.hdr__burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hdr__burger.is-open span:nth-child(2) { opacity: 0; }
.hdr__burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.hdr.is-menu { background: var(--ground); box-shadow: 0 1px 0 var(--line); }
/* The header's backdrop-filter makes it the containing block, so the menu is
   positioned against the header, not the viewport. */
.mnav { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 70px); height: calc(100dvh - 70px); overflow: auto; background: var(--ground); padding: 30px var(--gutter); display: flex; flex-direction: column; gap: 22px; z-index: 39; box-shadow: 0 1px 0 var(--line) inset; }
.mnav a { font: 400 22px/1.2 var(--sans); color: var(--accent); text-decoration: none; }
/* The other language in the phone menu: a button with its flag, like the one in the header. */
.mnav__langs { display: flex; flex-wrap: wrap; gap: 12px; }
.mnav a.mnav__lang { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 90px; font-size: 18px; }

/* ---------- hero --------------------------------------------------------- */
.hero { position: relative; min-height: 840px; display: flex; align-items: flex-end; color: #fff; background: #00040D; padding-top: 70px; }
.hero__bg, .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 0, 16, 0.05) 0%, rgba(4, 0, 16, 0.12) 45%, rgba(4, 0, 20, 0.55) 100%); pointer-events: none; }
.hero__in { position: relative; z-index: 1; padding-bottom: 96px; display: flex; flex-direction: column; gap: 20px; }
.hero__dev { width: 300px; height: auto; }
.hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.hero__text { max-width: 802px; display: flex; flex-direction: column; gap: 15px; }
.hero__title { font: 400 74px/1 var(--serif); letter-spacing: -0.03em; color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25); }
.hero__sub { font: 500 22px/1.2 var(--sans); max-width: 740px; text-wrap: balance; text-shadow: 0 1px 20px rgba(0, 0, 0, 0.35); }
.hero__btns { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 15px; }
.hero__btns .btn { min-width: 250px; min-height: 50px; }
.hero__cards { display: flex; flex: none; }
.hcard { width: 205px; min-height: 221px; padding: 20px; display: flex; flex-direction: column; gap: 6px; color: #F8F7F3; }
.hcard b { font: 500 30px/1.2 var(--serif); letter-spacing: -0.02em; white-space: nowrap; }
[data-lang="ru"] .hcard b { font-size: 26px; }
.hcard span { font: 400 16px/1.2 var(--sans); }
.hcard small { font: 400 16px/1.2 var(--sans); margin-top: auto; padding-top: 40px; }
.hcard--glass { background: rgba(34, 34, 34, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 10px 0 0 10px; }
.hcard--solid { background: var(--accent); border-radius: 0 10px 10px 0; }

/* ---------- about -------------------------------------------------------- */
.about { display: flex; gap: 50px; padding: 100px 0; align-items: flex-start; }
.about__img { flex: none; width: 455px; display: block; cursor: zoom-in; }
.about__img img { width: 455px; height: 255px; object-fit: cover; }
.about__text { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.about__text .h2 { margin-top: -20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font: 400 15px/1.2 var(--sans); color: var(--accent); border: 1px solid var(--line); border-radius: 90px; padding: 7px 14px; }

/* ---------- video -------------------------------------------------------- */
.video { position: relative; height: 800px; background: #0b0b0b; overflow: hidden; }
.video__el { width: 100%; height: 100%; object-fit: cover; }
.video__play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: #fff; background: rgba(4, 0, 16, 0.25); transition: background .3s; }
.video__play:hover { background: rgba(4, 0, 16, 0.4); }
.video__play span { font: 500 22px/1.2 var(--sans); letter-spacing: 0.02em; }
.video.is-playing .video__play { display: none; }

/* ---------- amenities ---------------------------------------------------- */
.amen { background: var(--ground); padding: 100px 0; }
.amen__grid { margin-top: 50px; display: flex; flex-direction: column; }
.amen__item { display: grid; grid-template-columns: 1fr 1fr; min-height: 460px; }
.amen__item--flip .amen__text { order: 2; }
.amen__text { background: var(--band); padding: 40px 80px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 30px; }
.amen__text .h2 { margin-top: -22px; }
.amen__text .body { max-width: 360px; }
.amen__img { display: block; cursor: zoom-in; }
.amen__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 620 / 460; }

/* ---------- gallery ------------------------------------------------------ */
.gallery { background: var(--band); padding-top: 100px; padding-bottom: 0; }
.gallery__head { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: 50px; flex-wrap: wrap; }
.gallery__head .h2 { color: var(--ink); }
.tabs { display: flex; gap: 16px; flex-wrap: wrap; }
.tab { font: 400 18px/1.4 var(--sans); color: var(--accent); border: 1px solid var(--line); border-radius: 90px; padding: 10px 20px; transition: background .2s, color .2s; }
.tab.is-on, .tab:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.gallery__stage { position: relative; height: 720px; background: #ddd; }
.gallery__main { width: 100%; height: 100%; object-fit: cover; }
.gallery__zoom { position: absolute; inset: 0; cursor: zoom-in; }
.gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: var(--shadow); }
.gallery__nav--prev { left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.gallery__nav--next { right: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.gallery__thumbs { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumbs button { flex: none; width: 197px; height: 140px; opacity: 0.85; transition: opacity .2s; }
.gallery__thumbs button.is-on, .gallery__thumbs button:hover { opacity: 1; outline: 2px solid var(--accent); outline-offset: -2px; }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery__mpnote { margin-bottom: 20px; }
/* Masterplans carry the developer's colour key, so they are shown whole, never cropped. */
.gallery.is-mp .gallery__stage { background: var(--band); }
.gallery.is-mp .gallery__main { object-fit: contain; padding: 0 max(var(--gutter), calc((100% - var(--wrap)) / 2)); }

/* ---------- layouts ------------------------------------------------------ */
.layouts { padding: 100px 0 50px; }
.units { margin-top: 50px; display: flex; flex-direction: column; gap: 20px; }
.units__head { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 40px; gap: 30px; padding: 0 30px 20px; border-bottom: 1px solid var(--accent); }
.units__head span { font: 500 26px/1.2 var(--serif); letter-spacing: -0.01em; color: var(--accent); }
.unit { display: flex; flex-direction: column; gap: 20px; }
.unit__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 40px; gap: 30px; align-items: center; width: 100%; text-align: left; padding: 20px 30px; min-height: 103px; border-radius: var(--radius); background: var(--band); color: var(--ink); transition: background .2s, color .2s; }
.unit__name { font: 500 24px/1.2 var(--serif); letter-spacing: -0.01em; color: var(--accent); }
.unit__cell { display: flex; flex-direction: column; gap: 8px; }
.unit__cell b { font: 600 20px/1.4 var(--sans); }
.unit__cell small { font: 400 18px/1.4 var(--sans); }
.unit__arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--accent); display: flex; align-items: center; justify-content: center; color: var(--accent); transition: transform .25s; }
.unit.is-open .unit__row { background: var(--accent); color: #fff; }
.unit.is-open .unit__name, .unit.is-open .unit__arrow { color: #fff; border-color: #fff; }
.unit.is-open .unit__arrow { transform: rotate(180deg); }
.unit__panel { display: grid; grid-template-columns: 740px 1fr; gap: 100px; align-items: start; }
.plans { background: var(--band); min-height: 460px; padding: 30px; display: flex; gap: 30px; justify-content: center; align-items: flex-start; }
.plans figure { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.plans figure a { display: block; cursor: zoom-in; }
.plans img { height: 400px; width: auto; max-width: 100%; object-fit: contain; }
.plans figcaption { font: 400 11px/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.plans--plot { flex-wrap: wrap; }
.plans--plot figure { flex: 1 1 300px; }
.plans--plot img { height: auto; width: 100%; border-radius: 3px; }
.plans__note { flex-basis: 100%; font: 400 15px/1.3 var(--sans); color: var(--muted); }
.plans figure.is-gated { position: relative; overflow: hidden; max-height: 460px; }
.plans--gated figure.is-gated img { height: 560px; }
.plans figure.is-gated::after { content: ''; position: absolute; inset: 45% 0 0 0; background: linear-gradient(180deg, rgba(248, 247, 243, 0) 0%, rgba(248, 247, 243, 0.92) 45%, var(--band) 100%); pointer-events: none; }
.plans figure.is-gated figcaption { order: -1; padding-bottom: 4px; }
.gate { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 20px; text-align: center; }
.gate p { font: 400 16px/1.3 var(--sans); color: var(--ink); max-width: 360px; }
.plans--plot figure.is-gated img { height: auto; width: 100%; }
.plans--plot figure.is-gated { max-height: 340px; }
.plans--plot figure.is-gated::after { inset: 30% 0 0 0; }
.plans--plot figcaption { align-self: center; }
.unit__side { display: flex; flex-direction: column; gap: 16px; }
.facts { background: var(--band); padding: 20px; display: flex; flex-direction: column; }
.facts div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font: 400 16px/1.4 var(--sans); }
.facts dt { white-space: nowrap; }
.facts div:last-child { border-bottom: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0 0 0 auto; color: var(--accent); text-align: right; }

/* ---------- location ----------------------------------------------------- */
.loc { padding: 50px 0 100px; }
.loc__grid { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.loc__card { background: var(--band); border-radius: var(--radius); padding: 40px 40px 40px 30px; display: flex; flex-direction: column; gap: 30px; }
.drive { display: flex; flex-direction: column; gap: 20px; counter-reset: d; }
.drive li { display: flex; align-items: center; gap: 14px; font: 400 18px/1.4 var(--sans); }
.drive li b { font-weight: 400; }
.drive__n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 400 16px/1 var(--sans); }
.drive__n::before { counter-increment: d; content: counter(d); }
.loc__map { display: block; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; }
.loc__map img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- payment ------------------------------------------------------ */
.pay { background: var(--band); padding: 100px 0; }
.pay__head { text-align: center; max-width: 820px; margin: 0 auto 50px; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.pay__head .h2 { color: var(--ink); }
.plan { display: flex; flex-direction: column; gap: 30px; margin-bottom: 40px; }
.plan .h3 { color: var(--ink); }
.plan__sub { display: inline; }
.plan__sub::before { content: '\00a0·\00a0'; }
.plan__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pcard { background: #fff; border-radius: 3px; box-shadow: var(--shadow); min-height: 137px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 24px 24px 20px; text-align: center; }
.pcard b { font: 500 46px/1.2 var(--serif); letter-spacing: -0.01em; color: var(--accent); }
.pcard span { font: 400 18px/1.4 var(--sans); color: var(--accent); }
.sched summary { cursor: pointer; font: 400 16px/1.2 var(--sans); color: var(--accent); text-decoration: underline; text-underline-offset: 4px; list-style: none; }
.sched summary::-webkit-details-marker { display: none; }
.sched ol { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 30px; }
.sched li { display: flex; gap: 14px; align-items: baseline; font: 400 16px/1.4 var(--sans); }
.sched li b { font: 500 22px/1.2 var(--serif); color: var(--accent); min-width: 56px; }
.pay__promo { background: #fff; border-radius: 3px; box-shadow: var(--shadow); padding: 30px 40px; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.pay__promo > div { display: flex; flex-direction: column; gap: 16px; }

/* ---------- investment --------------------------------------------------- */
.invest { padding: 100px 0; }
.chart { margin-top: 50px; display: flex; flex-direction: column; }
.chart__text { max-width: 610px; display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.chart__nums { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 40px; }
.chart__from, .chart__to { display: flex; flex-direction: column; gap: 6px; }
.chart__to { text-align: right; align-items: flex-end; }
.chart__nums b { font: 500 26px/1.2 var(--serif); color: var(--ink); }
.chart__nums span { font: 400 16px/1.3 var(--sans); color: rgba(15, 26, 38, 0.75); }
.chart__growth { display: inline-flex; align-items: center; gap: 6px; font: 500 20px/1.2 var(--sans) !important; color: var(--green) !important; }
.chart__fig { position: relative; height: 300px; margin-top: 12px; }
.chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart__note { margin-top: 20px; color: var(--muted); opacity: 1; }
.icards { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 20px; }
.icard { border-top: 1px solid var(--accent); padding: 24px 24px 0; display: flex; flex-direction: column; gap: 16px; }

/* ---------- form --------------------------------------------------------- */
.enquire { background: var(--band); padding: 100px 0; }
.enquire__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.enquire__form { background: #fff; border-radius: var(--radius); padding: 50px 110px; box-shadow: var(--shadow); }
.enquire__form .h2 { margin-bottom: 12px; }
.enquire__img { display: block; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; }
.enquire__img img { width: 100%; height: 100%; object-fit: cover; min-height: 660px; }
/* Several pictures beside the form (formImages in content.mjs): one large and two small on a desktop, a row swiped sideways on a phone. All of them open in the lightbox. */
.enquire__imgs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 20px; }
.enquire__imgs .enquire__img:first-child { grid-column: 1 / -1; }
.enquire__imgs .enquire__img img { min-height: 0; }
.enquire__imgs .enquire__img:first-child img { min-height: 380px; }
.enquire__imgs .enquire__img:nth-child(n+2) img { aspect-ratio: 4 / 3; }
.enquire__imgs .enquire__img:nth-child(n+4) { display: none; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form__title { font: 500 34px/1.2 var(--serif); letter-spacing: -0.01em; text-transform: uppercase; color: var(--accent); }
.form__text { font: 400 16px/1.2 var(--sans); }
.field { display: flex; flex-direction: column; gap: 8px; font: 400 16px/1.2 var(--sans); }
.field input, .field textarea { font: 400 16px/1.2 var(--sans); color: var(--ink); border: 1px solid rgba(34, 34, 34, 0.5); border-radius: 3px; padding: 15px 20px; background: #fff; width: 100%; }
.field input::placeholder, .field textarea::placeholder { color: rgba(34, 34, 34, 0.5); }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 50px; }
.field.is-bad input { border-color: #B51A2B; }
.tel { display: flex; align-items: center; border: 1px solid rgba(34, 34, 34, 0.5); border-radius: 3px; background: #fff; }
.tel:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.tel__flag { display: inline-flex; align-items: center; justify-content: center; width: 24px; flex: none; margin-left: 14px; color: var(--muted); }
.tel input { border: 0 !important; outline: none !important; padding-left: 10px; }
.field__hint { font: 400 13px/1.3 var(--sans); color: var(--muted); }
.field.is-bad .tel { border-color: #B51A2B; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form__or { text-align: center; font: 400 16px/1.2 var(--sans); }
/* Shown only when a lead did not reach anyone: the WhatsApp line becomes the way out. */
.form__error { margin: 0; padding: 10px 12px; border-radius: 9px; background: #FBE9EB; color: var(--cta); font: 400 15px/1.35 var(--sans); text-align: center; }
.form__or.is-urgent .wa-link { background: var(--green); color: #fff; padding: 8px 14px; border-radius: 10px; }
.wa-link { color: var(--green); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; vertical-align: middle; }
.form__or .wa-link svg { width: 18px; height: 18px; }
.nowrap { white-space: nowrap; }
.form__privacy { display: flex; align-items: center; gap: 8px; justify-content: center; font: 400 16px/1.2 var(--sans); color: var(--ink); text-align: left; padding: 0 20px; }
.form__privacy svg { flex: none; color: var(--ink); }
.form__consent { font: 400 13px/1.3 var(--sans); color: var(--muted); text-align: center; }
.form__consent a { color: var(--accent); }
.form.is-sending button[type=submit] { opacity: 0.6; pointer-events: none; }

/* ---------- faq ---------------------------------------------------------- */
.faq { padding: 100px 0; }
.faq__list { margin-top: 50px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 30px 20px; font: 500 22px/1.2 var(--sans); color: var(--accent); cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg { flex: none; transition: transform .25s; }
.faq__item[open] summary svg { transform: rotate(45deg); }
.faq__item .body { padding: 0 20px 30px; max-width: 900px; }

/* ---------- footer ------------------------------------------------------- */
.ftr { position: relative; background: var(--accent); color: #fff; padding: 100px 0 130px; text-align: center; }
.ftr__in { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.ftr__logo { width: 183px; height: auto; }
.ftr__contacts { display: flex; align-items: center; gap: 20px; font: 400 18px/1.4 var(--sans); }
.ftr__contacts a { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.ftr__contacts .wa-link { font-size: 18px; font-weight: 400; }
.ftr__sep { width: 1px; height: 25px; background: #fff; }
.ftr__legal { font: 400 16px/1.2 var(--sans); max-width: 408px; }
.ftr__social { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
.ftr__social a { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; transition: background 0.2s, color 0.2s; }
.ftr__social a:hover, .ftr__social a:focus-visible { background: #fff; color: var(--accent); }
.ftr__legal a { text-decoration: underline; }
.ftr__licence { font: 500 14px/1.4 var(--sans); letter-spacing: 0.02em; }
.ftr__broker { font: 400 13px/1.4 var(--sans); opacity: 0.7; max-width: 720px; }
.totop { position: fixed; right: 30px; bottom: calc(110px + var(--cookie-h, 0px)); z-index: 31; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; }
.totop svg { width: 28px; height: 28px; }

/* ---------- sticky bar + mobile bar --------------------------------------- */
.sticky { position: fixed; inset: auto 0 0 0; z-index: 30; bottom: var(--cookie-h, 0px); background: var(--ground); box-shadow: 0 -4px 24px rgba(15, 26, 38, 0.1); padding: 20px 0; }
.sticky__in { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.sticky__item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.sticky__item b { font: 500 22px/1.2 var(--sans); color: var(--accent); white-space: nowrap; }
.sticky__item span { font: 400 16px/1.2 var(--sans); }
.mobar { display: none; }

/* ---------- modals + lightbox -------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal__back { position: absolute; inset: 0; background: rgba(4, 0, 16, 0.6); }
.modal__box { position: relative; background: #fff; border-radius: var(--radius); width: min(480px, 100%); padding: 40px; max-height: calc(100vh - 40px); overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.modal__x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.modal__x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.modal__box .form__title { font-size: 26px; padding-right: 40px; }
.modal__main { display: flex; flex-direction: column; gap: 12px; }
.modal__box--split { width: min(900px, 100%); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.modal__box--split .modal__main { padding: 40px; }
/* The close button sits above the plan preview, on a white disc so it shows on any picture. */
.modal__box--split .modal__x { z-index: 3; background: #fff; box-shadow: 0 2px 10px rgba(4, 0, 16, 0.18); }
.modal__preview { position: relative; margin: 0; background: var(--band); overflow: hidden; min-height: 100%; }
.modal__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.modal__preview::after { content: ''; position: absolute; inset: 35% 0 0 0; background: linear-gradient(180deg, rgba(248, 247, 243, 0) 0%, rgba(248, 247, 243, 0.92) 45%, var(--band) 100%); }
.modal__preview figcaption { position: absolute; left: 0; right: 0; bottom: 32px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 28px; text-align: center; font: 400 16px/1.3 var(--sans); color: var(--ink); }
.modal__preview figcaption svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--accent); color: #fff; }
.lightbox { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lightbox .modal__back { background: rgba(4, 0, 16, 0.75); }
.lightbox__box { position: relative; z-index: 1; width: min(1120px, 100%); min-width: 0; height: min(640px, calc(100vh - 40px)); height: min(640px, calc(100dvh - 40px)); max-height: calc(100vh - 40px); display: grid; grid-template-columns: minmax(0, 1fr) 360px; background: #fff; border-radius: var(--radius); overflow: hidden; }
.lightbox__stage { position: relative; background: #0b0f16; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.lightbox__stage > img { width: 100%; max-width: 100%; height: 100%; min-height: 0; flex: 1; object-fit: contain; }
/* Photos fill the frame; plans, maps and masterplans are shown whole on a light ground. */
.lightbox[data-fit="cover"] .lightbox__stage > img { object-fit: cover; }
.lightbox[data-fit="contain"] .lightbox__stage > img { background: var(--band); padding: 16px; }
.lightbox__cap { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; color: #fff; font: 400 14px/1.2 var(--sans); background: rgba(0, 0, 0, 0.35); }
.lightbox__thumbs { display: flex; gap: 6px; padding: 8px; background: #0b0f16; overflow-x: auto; scrollbar-width: none; }
.lightbox__thumbs::-webkit-scrollbar { display: none; }
.lightbox__thumbs:empty { display: none; }
.lightbox__thumbs button { flex: none; width: 72px; height: 50px; opacity: 0.6; }
.lightbox__thumbs button.is-on, .lightbox__thumbs button:hover { opacity: 1; outline: 2px solid #fff; outline-offset: -2px; }
.lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__form { padding: 36px 28px 24px; overflow: auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.lightbox__form .form__title { font-size: 24px; }
.lightbox__x { color: var(--accent); top: 8px; right: 8px; z-index: 3; }
.lightbox__nav { z-index: 2; }
.lightbox__nav.gallery__nav--prev { left: 16px; }
.lightbox__nav.gallery__nav--next { right: 16px; }
.lightbox__stage .gallery__nav { top: 45%; }

/* Shine: a highlight sweeps across the sticky buttons every five seconds. */
.btn--shine { position: relative; overflow: hidden; }
.btn--shine::after { content: ''; position: absolute; top: -50%; bottom: -50%; left: -40%; width: 30%; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-20deg); animation: shine 5s ease-in-out infinite; pointer-events: none; }
@keyframes shine { 0% { left: -40%; } 14% { left: 130%; } 100% { left: 130%; } }

.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 32; background: #fff; box-shadow: 0 -4px 24px rgba(15, 26, 38, 0.16); padding: 12px var(--gutter); display: flex; align-items: center; justify-content: center; gap: 20px; font: 400 15px/1.35 var(--sans); }
.cookie p { max-width: 720px; }
.cookie > div { display: flex; gap: 10px; flex: none; }
.cookie .btn { min-height: 38px; padding: 8px 16px; }

.simple__main { padding: 120px 0 80px; display: flex; flex-direction: column; gap: 20px; max-width: 800px; }
.simple .h3 { margin-top: 10px; }

/* ---------- tablet + phone ----------------------------------------------- */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }
  .hdr__nav { display: none; }
  .hero__title { font-size: 60px; }
  .amen__text { padding: 40px; }
  .unit__panel { grid-template-columns: 1fr 360px; gap: 40px; }
  .units__head span { font-size: 20px; }
  .unit__name { font-size: 21px; }
  .unit__cell b { font-size: 18px; }
  .unit__cell small { font-size: 15px; }
  .units__head, .unit__row { gap: 20px; padding-inline: 20px; }
  .plans img { height: 380px; }
  .enquire__form { padding: 40px; }
  .totop { display: none !important; }
  .sticky__in { gap: 16px; }
  .sticky__item b { font-size: 18px; }
  .sticky__item span { font-size: 13px; }
  .sticky__item--wide span { display: none; }
  .sticky .btn { padding-inline: 16px; }
}
@media (max-width: 900px) {
  :root { --gutter: 20px; }
  body { font-size: 17px; }
  .h2 { font-size: 28px; }
  .h3 { font-size: 22px; }
  .hdr__call, .hdr__lang span, .hdr__lang svg { display: none; }
  .hdr__burger { display: flex; }
  .hero { min-height: 100svh; padding-top: 90px; }
  /* The phone picture is a busy aerial view; darken behind the text so it reads. */
  .hero::after { background: linear-gradient(180deg, rgba(4, 0, 16, 0.05) 0%, rgba(4, 0, 16, 0.2) 25%, rgba(4, 0, 16, 0.62) 45%, rgba(4, 0, 16, 0.72) 100%); }
  .hero__in { padding-bottom: 40px; gap: 16px; }
  .hero__dev { width: 220px; }
  .hero__row { flex-direction: column; align-items: stretch; gap: 24px; }
  .hero__title { font-size: 46px; }
  .hero__sub { font-size: 18px; }
  .hero__btns { gap: 12px; }
  .hero__btns .btn { flex: 1 1 100%; min-width: 0; }
  .hero__cards { width: 100%; }
  .hcard { flex: 1; width: auto; min-height: 150px; }
  .hcard b { font-size: 28px; }
  .hcard small { padding-top: 16px; font-size: 14px; }
  .about { flex-direction: column; gap: 30px; padding: 60px 0; }
  .about__img, .about__img img { width: 100%; height: auto; aspect-ratio: 455 / 255; }
  .about__text .h2 { margin-top: 0; }
  .about__text .btn { width: 100%; }
  .video { height: 56vw; min-height: 260px; }
  .video__play svg { width: 60px; height: 60px; }
  .video__play span { font-size: 17px; }
  .amen { padding: 60px 0; }
  .amen__grid { margin-top: 30px; gap: 20px; }
  .amen__item { grid-template-columns: 1fr; min-height: 0; }
  .amen__item--flip .amen__text { order: 0; }
  .amen__img { order: -1; }
  .amen__text { padding: 30px 24px; gap: 20px; }
  .amen__text .body { max-width: none; }
  .amen__text .h2 { margin-top: -12px; }
  /* A project can show the amenity cards as a row swiped sideways on a phone (amenSwipe in content.mjs). The next card shows its edge, so the row reads as swipeable. */
  .amen--swipe .amen__grid { flex-direction: row; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
  .amen--swipe .amen__grid::-webkit-scrollbar { display: none; }
  .amen--swipe .amen__item { flex: 0 0 86%; scroll-snap-align: start; grid-template-rows: auto 1fr; }
  /* One card fits one phone screen: a wider picture, a smaller heading and text. The button sits at the bottom of every card, whatever the length of its text. */
  .amen--swipe .amen__img img { aspect-ratio: 16 / 9; }
  .amen--swipe .amen__text { justify-content: flex-start; padding: 22px 20px 20px; gap: 14px; }
  .amen--swipe .amen__text .h2 { margin-top: -6px; font-size: 21px; line-height: 1.2; }
  .amen--swipe .amen__text .body { font-size: 16px; line-height: 1.45; }
  .amen--swipe .amen__text .btn { margin-top: auto; }
  .gallery { padding-top: 60px; }
  .gallery__head { margin-bottom: 24px; gap: 16px; }
  .tabs { gap: 8px; }
  .tab { font-size: 15px; padding: 8px 14px; }
  .gallery__stage { height: 62vw; min-height: 240px; }
  .gallery__nav { width: 36px; height: 36px; }
  .gallery__nav--prev { left: 12px; }
  .gallery__nav--next { right: 12px; }
  .gallery__thumbs button { width: 120px; height: 84px; }
  .layouts { padding: 60px 0 30px; }
  .units { margin-top: 24px; gap: 12px; }
  .units__head { display: none; }
  .unit__row { grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 18px 20px 18px; }
  .unit__name { grid-column: 1 / -1; font-size: 22px; padding-right: 48px; }
  .unit__cell b { font-size: 17px; }
  .unit__cell small { font-size: 14px; }
  .unit__cell:nth-of-type(4) { grid-column: 1 / -1; }
  .unit__arrow { position: absolute; top: 18px; right: 20px; width: 32px; height: 32px; }
  .unit__row { position: relative; }
  .unit__panel { grid-template-columns: 1fr; gap: 16px; }
  .plans { min-height: 0; padding: 20px; gap: 16px; flex-wrap: wrap; }
  .plans figure { flex: 1 1 40%; }
  .plans--plot figure { flex: 1 1 100%; }
  .plans--plot figure.is-gated { max-height: 400px; }
  .plans--plot figure.is-gated::after { inset: 40% 0 0 0; }
  .plans img { height: auto; width: 100%; max-height: 420px; object-fit: contain; }
  .btn--big { min-height: 56px; font-size: 16px; }
  .loc { padding: 30px 0 60px; }
  .loc__grid { grid-template-columns: 1fr; margin-top: 24px; }
  .loc__card { padding: 24px 20px; gap: 20px; }
  .drive { gap: 12px; }
  .drive li { font-size: 16px; }
  .loc__map { aspect-ratio: 610 / 615; }
  .pay { padding: 60px 0; }
  .pay__head { margin-bottom: 30px; }
  .plan { gap: 16px; margin-bottom: 30px; }
  .plan__cards { grid-template-columns: 1fr; gap: 12px; }
  .plan__sub { display: block; font: 400 16px/1.3 var(--sans); color: var(--muted); margin-top: 4px; }
  .plan__sub::before { content: none; }
  .pcard { min-height: 0; padding: 18px; }
  .pcard b { font-size: 36px; }
  .pay__promo { flex-direction: column; align-items: stretch; padding: 24px 20px; gap: 20px; }
  .pay__promo .btn { width: 100%; }
  .invest { padding: 60px 0; }
  .chart { margin-top: 24px; }
  .chart__text .btn { width: 100%; }
  .chart__nums { margin-top: 24px; align-items: flex-start; }
  .chart__nums b { font-size: 20px; }
  .chart__nums span { font-size: 13px; }
  .chart__growth { font-size: 16px !important; }
  .chart__fig { height: 180px; }
  .icards { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
  .icard { padding: 16px 0 0; }
  .enquire { padding: 60px 0; }
  .enquire__grid { grid-template-columns: 1fr; }
  .enquire__form { padding: 30px 20px; }
  .enquire__img img { min-height: 0; aspect-ratio: 4 / 3; }
  .enquire__imgs { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
  .enquire__imgs::-webkit-scrollbar { display: none; }
  .enquire__imgs .enquire__img, .enquire__imgs .enquire__img:nth-child(n+4) { display: block; flex: 0 0 86%; scroll-snap-align: start; }
  .enquire__imgs .enquire__img:first-child img { min-height: 0; }
  .faq { padding: 60px 0; }
  .faq__list { margin-top: 24px; }
  .faq__item summary { padding: 20px 4px; font-size: 18px; }
  .faq__item summary svg { width: 22px; height: 22px; }
  .faq__item .body { padding: 0 4px 20px; }
  .ftr { padding: 60px 0 120px; }
  .ftr__contacts { flex-direction: column; gap: 12px; }
  .ftr__sep { display: none; }
  .totop { right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .sticky { display: none !important; }
  .mobar { display: flex; position: fixed; inset: auto 0 0 0; z-index: 30; background: var(--ground); box-shadow: 0 -4px 24px rgba(15, 26, 38, 0.12); padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .mobar .btn { flex: 1; min-height: 46px; }
  .mobar__wa { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid var(--green); border-radius: 3px; color: var(--green); font: 500 15px/1 var(--ui); text-decoration: none; }
  .cookie { bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); flex-direction: column; align-items: stretch; gap: 8px; font-size: 13px; text-align: left; }
  .cookie > div { justify-content: flex-end; }
  .cookie .btn { min-height: 34px; padding: 6px 12px; font-size: 14px; }
  body.has-cookie .mobar { display: none; }
  .lightbox { padding: 0; align-items: stretch; }
  .lightbox__box { grid-template-columns: 1fr; max-height: none; height: 100%; border-radius: 0; overflow: auto; }
  .lightbox__stage { flex: none; }
  .lightbox__stage > img { height: 52vh; }
  .lightbox__form { padding: 20px 16px 30px; }
  .lightbox__x { color: #fff; }
  .plans figure.is-gated { max-height: 360px; }
  .plans--gated figure.is-gated img { height: 420px; width: auto; max-width: 100%; margin: 0 auto; }
  .gate { bottom: 16px; }
  .modal { padding: 12px; align-items: flex-end; }
  .modal__box { padding: 28px 20px; max-height: calc(100vh - 24px); }
  .modal__box--split { grid-template-columns: 1fr; padding: 0; }
  .modal__box--split .modal__main { padding: 24px 20px 28px; }
  .modal__preview { min-height: 170px; }
  .modal__preview figcaption { bottom: 14px; font-size: 14px; }
  .modal__preview figcaption svg { width: 36px; height: 36px; padding: 8px; }
}
@media (max-width: 400px) {
  .hero__title { font-size: 40px; }
  .hcard { padding: 14px; }
  .hcard b { font-size: 24px; }
  .unit__row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ---------- right-to-left pages (Arabic) ------------------------------------
   dir="rtl" on <html> mirrors the flex and grid layouts by itself. What follows is what it
   cannot mirror: rules written with left and right, and type set for Latin letters. */
[dir="rtl"] * { letter-spacing: 0 !important; }  /* spacing between letters breaks joined Arabic script */
[dir="rtl"] .h2, [dir="rtl"] .h3, [dir="rtl"] .form__title, [dir="rtl"] .unit__name, [dir="rtl"] .units__head span { line-height: 1.45; }
[dir="rtl"] .hero__sub, [dir="rtl"] .body { line-height: 1.7; }
[dir="rtl"] .lang__menu { right: auto; left: 0; }
[dir="rtl"] .hcard--glass { border-radius: 0 10px 10px 0; }
[dir="rtl"] .hcard--solid { border-radius: 10px 0 0 10px; }
[dir="rtl"] .unit__row { text-align: right; }
[dir="rtl"] .facts dd { margin: 0 auto 0 0; text-align: left; }
[dir="rtl"] .chart__to { text-align: left; }
[dir="rtl"] .chart__svg { transform: scaleX(-1); }
[dir="rtl"] .tel__flag { margin-left: 0; margin-right: 14px; }
[dir="rtl"] .tel input { padding-left: 0; padding-right: 10px; direction: ltr; text-align: right; }
[dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }
[dir="rtl"] .hp { left: auto; right: -9999px; }
[dir="rtl"] .form__privacy { text-align: right; }
[dir="rtl"] .totop { right: auto; left: 30px; }
[dir="rtl"] .modal__x { right: auto; left: 12px; }
[dir="rtl"] .modal__box .form__title { padding-right: 0; padding-left: 40px; }
[dir="rtl"] .lightbox__x { right: auto; left: 8px; }
[dir="rtl"] .btn .ic:not(.ic-wa) { transform: scaleX(-1); }  /* the arrow points the way the text runs */
/* The gallery and the lightbox keep their left-to-right order, so the arrows and the script agree. */
[dir="rtl"] .gallery__stage, [dir="rtl"] .gallery__thumbs, [dir="rtl"] .lightbox__stage { direction: ltr; }
@media (max-width: 900px) {
  [dir="rtl"] .unit__name { padding-right: 0; padding-left: 48px; }
  [dir="rtl"] .unit__arrow { right: auto; left: 20px; }
  [dir="rtl"] .totop { left: 16px; }
  [dir="rtl"] .cookie { text-align: right; }
}