/* 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', Georgia, 'Times New Roman', serif;
  --sans: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --ui: 'Inter', '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); }
.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; }
.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; }

/* ---------- 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; }
.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); }
.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; }
  .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; }
  .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; } }