/* ═══════════════════════════════════════════════════════════
   RIMAL RESIDENCES — style
   Palette : white / pale sand / bronze / charcoal text
   Type    : Montserrat (200–600) · Tajawal for Arabic
   ═══════════════════════════════════════════════════════════ */

:root {
  --white:      #ffffff;
  --off-white:  #fdfcfa;
  --sand-pale:  #faf7f1;
  --sand:       #f3ede2;
  --stone:      #ddd2c0;
  --bronze:     #bb9c79;
  --bronze-dk:  #9d8060;
  --charcoal:   #211d18;
  --ink:        #3c362e;

  --font: "Montserrat", "Helvetica Neue", sans-serif;

  --pad: clamp(1.5rem, 6vw, 7rem);
  --ease: cubic-bezier(.22, .8, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html.js { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-weight: 300;
  color: var(--ink);
  background: var(--white);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

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

/* icon sprite container — kept out of the flow rather than display:none,
   which stops <use> resolving in some browsers */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2, h3 { font-family: var(--font); color: var(--charcoal); }

h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); font-weight: 200; letter-spacing: .06em; line-height: 1.25; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 400; letter-spacing: .04em; }

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

section { padding: clamp(5rem, 10vw, 9rem) var(--pad); background: var(--white); }

.lead { font-size: .98rem; font-weight: 300; max-width: 36em; margin: 1.6rem 0 1.2rem; color: #5a5347; }

.eyebrow {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .46em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.eyebrow::before { content: ""; width: 2.6rem; height: 1px; background: var(--bronze); }
.eyebrow--light { color: var(--bronze); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-line {
  display: inline-block;
  margin-top: 1.6rem;
  padding: .85rem 0 .55rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--charcoal);
  border-bottom: 1px solid var(--bronze);
  transition: letter-spacing .5s var(--ease), color .3s;
}
.btn-line:hover { letter-spacing: .44em; color: var(--bronze-dk); }
.btn-line--light { color: var(--charcoal); }
.btn-line--light:hover { color: var(--bronze-dk); }

.btn-solid {
  padding: 1.05rem 2.8rem;
  font-family: var(--font);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: transparent;
  border: 1px solid var(--bronze);
  cursor: pointer;
  transition: background .4s, color .4s;
}
.btn-solid:hover { background: var(--bronze); color: var(--white); }

/* ── Reveal on scroll ────────────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(2.2rem); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ── Placeholders (auto-replaced when images exist) ──────── */
.ph {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, #faf6ef 0%, transparent 55%),
    radial-gradient(130% 100% at 85% 90%, #e8dfce 0%, transparent 60%),
    linear-gradient(160deg, #f5efe4 0%, #ede4d3 55%, #e2d6bf 100%);
  aspect-ratio: 4 / 3;
}
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.ph:hover img { transform: scale(1.04); }

.ph.is-empty img { display: none; }
.ph.is-empty::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../assets/rimal-mark.png") center 42% / 78px no-repeat;
  opacity: .22;
}
.ph.is-empty::after {
  content: attr(data-label);
  position: absolute;
  left: 50%; top: 60%;
  transform: translateX(-50%);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #a08c6f;
  white-space: nowrap;
}
.ph--tall { aspect-ratio: 3 / 3.6; }
.ph--map  { aspect-ratio: 4 / 3.2; }

/* ══════════ Language gate ══════════ */
.gate {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  padding: 2rem;
  transition: opacity .8s var(--ease), visibility .8s;
}
html.has-lang .gate { display: none; }
.gate.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.gate__inner { text-align: center; max-width: 880px; }
.gate__logo { width: clamp(150px, 20vw, 230px); margin: 0 auto; }

.gate__prompt {
  margin: 2.6rem 0 2.4rem;
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #8d8271;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: .1rem 1rem;
}
.gate__prompt span { color: var(--bronze); }

.gate__langs {
  list-style: none;
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: .9rem 1.2rem;
}
.gate__lang {
  font-family: var(--font);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: transparent;
  border: 1px solid var(--stone);
  padding: 1rem 1.6rem;
  min-width: 9.4rem;
  cursor: pointer;
  transition: background .45s var(--ease), color .45s, border-color .45s, letter-spacing .45s var(--ease);
}
.gate__lang:hover, .gate__lang:focus-visible {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--white);
  letter-spacing: .32em;
  outline: none;
}
.gate__lang[lang="ar"] { font-family: "Tajawal", var(--font); letter-spacing: normal; font-size: .95rem; }
.gate__lang[lang="ar"]:hover { letter-spacing: normal; }

/* ── Preloader ───────────────────────────────────────────── */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  transition: opacity .9s ease .2s, visibility .9s ease .2s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__inner { text-align: center; }
.preloader__logo { width: clamp(130px, 16vw, 180px); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* ══════════ Navigation ══════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.15rem var(--pad);
  color: var(--white);
  transition: color .5s;
}
/* The blurred bar lives on a pseudo-element: putting backdrop-filter on .nav
   itself would make it the containing block for the fixed mobile menu. */
.nav::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(33, 29, 24, .07);
  opacity: 0;
  transition: opacity .5s;
}
.nav.is-solid::before { opacity: 1; }
.nav.is-solid { color: var(--charcoal); }

/* Five columns:  LANG | links-left | LOGO | links-right | ENQUIRE
   The two utilities stay pinned to the outer edges. The link groups hug the
   centre column, so when the logo slot collapses over the hero they close in
   to form one centred row — and part symmetrically when the logo rises. */
.nav__bar {
  display: grid;
  /* Columns 1 and 5 share one width so the middle three are perfectly centred
     on the page — which puts the logo exactly on the page axis. */
  grid-template-columns: var(--util-w) 1fr auto 1fr var(--util-w);
  align-items: center;
  gap: clamp(.5rem, 1.1vw, 1.2rem);
}
.nav__menu { display: contents; }

/* grid-row: 1 on every item is required — the brand sits after .nav__cta in
   the DOM but needs column 3, and sparse auto-placement never moves the cursor
   backwards, so without it the logo is pushed onto a second row. */
.lang              { grid-row: 1; grid-column: 1; justify-self: start; }
.nav__group--left  { grid-row: 1; grid-column: 2; justify-self: end; }
.nav__brand        { grid-row: 1; grid-column: 3; justify-self: center; }
.nav__group--right { grid-row: 1; grid-column: 4; justify-self: start; }
.nav__cta          { grid-row: 1; grid-column: 5; justify-self: end; }

.nav__group { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.4rem); }

.nav__group a {
  font-size: .68rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  padding-bottom: .3rem; position: relative; white-space: nowrap;
}
.nav__group a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__group a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  font-size: .68rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid currentColor; padding: .55rem 1.3rem .45rem;
  transition: background .4s, border-color .4s, color .4s;
}
.nav__cta:hover { background: var(--bronze); border-color: var(--bronze); color: var(--white); }

/* Stacked brand, centred in the bar. Over the hero the slot is collapsed to
   zero width — the large logo lives on the film instead. On scroll it widens
   and the logo rises into place. */
.nav__brand {
  position: relative; display: block; line-height: 0;
  width: var(--brand-w); overflow: hidden;
  margin-inline: var(--brand-gap);
  transition: width .65s var(--ease), margin-inline .65s var(--ease),
              opacity .5s var(--ease), transform .65s var(--ease);
}
:root {
  --brand-w: clamp(64px, 6.6vw, 92px);
  --brand-gap: clamp(1.1rem, 2.8vw, 2.8rem);   /* breathing room each side of the logo */
  --util-w: clamp(6.5rem, 9vw, 9rem);
}
/* over the hero the slot collapses completely — margin included — so the two
   link groups close up into one continuous centred row */
.nav:not(.is-solid):not(.is-open) .nav__brand {
  width: 0; margin-inline: 0; opacity: 0; transform: translateY(60%); pointer-events: none;
}
.nav__logo { height: var(--brand-w); width: var(--brand-w); object-fit: contain; transition: opacity .5s; }
.nav__logo--dark { position: absolute; left: 0; top: 0; opacity: 0; }
.nav.is-solid .nav__logo--light, .nav.is-open .nav__logo--light { opacity: 0; }
.nav.is-solid .nav__logo--dark,  .nav.is-open .nav__logo--dark  { opacity: 1; }

.nav__burger {
  grid-column: 3; justify-self: end;
  display: none; background: none; border: 0; cursor: pointer;
  width: 34px; height: 24px; position: relative; color: inherit;
}
.nav__burger span {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform .4s var(--ease), top .4s var(--ease);
}
.nav__burger span:nth-child(1) { top: 6px; }
.nav__burger span:nth-child(2) { top: 16px; }
.nav__burger.is-open span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { top: 11px; transform: rotate(-45deg); }

/* ── Language switcher ───────────────────────────────────── */
.lang { position: relative; }
.lang__current {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--font);
  font-size: .68rem; font-weight: 500; letter-spacing: .2em;
  color: inherit; background: transparent; border: 0;
  padding: .4rem 0; cursor: pointer;
}
.lang__current svg { width: 9px; transition: transform .35s var(--ease); }
.lang.is-open .lang__current svg { transform: rotate(180deg); }

.lang__list {
  position: absolute; top: calc(100% + .7rem); inset-inline-start: 0;
  list-style: none; min-width: 9.5rem;
  background: var(--white);
  border: 1px solid var(--sand);
  box-shadow: 0 10px 30px rgba(33, 29, 24, .09);
  padding: .4rem 0;
  opacity: 0; visibility: hidden; transform: translateY(-.4rem);
  transition: opacity .3s, visibility .3s, transform .3s var(--ease);
}
.lang.is-open .lang__list { opacity: 1; visibility: visible; transform: none; }
.lang__list button {
  display: block; width: 100%; text-align: start;
  font-family: var(--font); font-size: .78rem; font-weight: 300;
  color: var(--ink); background: transparent; border: 0;
  padding: .6rem 1.2rem; cursor: pointer;
  transition: background .25s, color .25s;
}
.lang__list button:hover { background: var(--sand-pale); color: var(--charcoal); }
.lang__list button.is-current { color: var(--bronze-dk); font-weight: 500; }
.lang__list button[lang="ar"] { font-family: "Tajawal", var(--font); font-size: .9rem; }

/* ══════════ Hero ══════════ */
.hero { position: relative; height: 100svh; min-height: 620px; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--charcoal); }
.hero__media, .hero__media > * { position: absolute; inset: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__video.is-hidden { display: none; }

.hero__fallback { overflow: hidden; background: linear-gradient(180deg, #35302a 0%, #59503f 45%, #8d7658 78%, #bb9c79 100%); }
.hero__dunes {
  position: absolute; inset: -10%;
  background:
    radial-gradient(75% 48% at 28% 88%, rgba(250, 247, 241, .32) 0%, transparent 60%),
    radial-gradient(85% 55% at 75% 96%, rgba(237, 228, 211, .25) 0%, transparent 55%),
    radial-gradient(60% 40% at 50% 100%, rgba(187, 156, 121, .5) 0%, transparent 65%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translateX(-2.5%) scale(1.02); } to { transform: translateX(2.5%) scale(1.08); } }
.hero__fallback.is-hidden { display: none; }

.hero__veil { background: linear-gradient(180deg, rgba(33,29,24,.5) 0%, rgba(33,29,24,.12) 35%, rgba(33,29,24,.25) 78%, rgba(33,29,24,.55) 100%); }

.hero__content { position: relative; z-index: 2; text-align: center; color: var(--white); padding: 0 1.5rem; }
.hero__title { margin: 0; }
.hero__logo {
  width: clamp(180px, 20vw, 300px);
  margin: 0 auto;
  opacity: 0; animation: rise 1.6s var(--ease) .7s forwards;
}
.hero__tagline {
  font-style: italic;
  font-weight: 200;
  font-size: clamp(.95rem, 1.7vw, 1.2rem);
  letter-spacing: .08em;
  margin-top: 1.8rem; color: var(--sand);
  opacity: 0; animation: rise 1.4s var(--ease) 1.25s forwards;
}
@keyframes rise { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: none; } }

/* scroll invitation — mouse outline with a travelling dot.
   Centred with auto margins, not translateX: the `rise` animation ends on
   `transform: none`, which would cancel a transform-based centring. */
.hero__scroll {
  position: absolute; left: 0; right: 0; bottom: 4.5vh; z-index: 2;
  width: fit-content; margin: 0 auto;
  display: block; padding: .5rem;
  opacity: 0; animation: rise 1.4s var(--ease) 1.7s forwards;
}
.hero__mouse {
  display: block;
  width: 26px; height: 42px;
  border: 1.5px solid rgba(255, 255, 255, .8);
  border-radius: 14px;
  transition: border-color .4s;
}
.hero__mouse i {
  display: block;
  width: 4px; height: 4px;
  margin: 8px auto 0;
  border-radius: 50%;
  background: var(--white);
  animation: wheel 2.1s var(--ease) infinite;
}
.hero__scroll:hover .hero__mouse { border-color: var(--white); }
@keyframes wheel {
  0%   { transform: translateY(0);    opacity: 0; }
  18%  { opacity: 1; }
  70%  { transform: translateY(15px); opacity: 1; }
  100% { transform: translateY(19px); opacity: 0; }
}

/* ── Manifesto ───────────────────────────────────────────── */
.manifesto { text-align: center; max-width: 1100px; margin: 0 auto; }
.manifesto .eyebrow { justify-content: center; }
.manifesto .eyebrow::after { content: ""; width: 2.6rem; height: 1px; background: var(--bronze); }
.manifesto__text { font-size: clamp(1.35rem, 2.8vw, 2.2rem); font-weight: 200; letter-spacing: .04em; }
.manifesto__text em { font-style: italic; color: var(--bronze-dk); }

/* the key figures sit on their own pale panel, divided by hairlines,
   so they read as a distinct feature rather than a footnote */
.manifesto__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(3.5rem, 6vw, 5rem);
  padding: clamp(2.4rem, 4.5vw, 3.4rem) clamp(.8rem, 2.5vw, 2rem);
  background: var(--sand-pale);
}
.stat { padding-inline: clamp(.6rem, 2vw, 1.6rem); border-inline-start: 1px solid var(--stone); }
.stat:first-child { border-inline-start: none; }
.stat__num {
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 200; color: var(--bronze-dk);
  display: block; line-height: 1;
}
.stat__label {
  font-size: .68rem; font-weight: 500; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ink);
  display: block; margin-top: 1.1rem;
}

/* ── Project ─────────────────────────────────────────────── */
.project { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; background: var(--sand-pale); }
.project__text h2 { margin-bottom: .4rem; }
/* the global reset zeroes margins, so body paragraphs need their own rhythm */
.project__text p { max-width: 36em; }
.project__text p + p { margin-top: 1.2rem; }

/* ── Villas ──────────────────────────────────────────────── */
.villas__head { max-width: 640px; margin-bottom: 4rem; }
/* two per row — wider cards, so the image turns landscape and the
   specifications sit in a 2 × 2 block */
.villas__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.6rem, 3.2vw, 3rem); }
.villa { background: var(--white); border: 1px solid var(--sand); display: flex; flex-direction: column; }
.villa .ph { aspect-ratio: 4 / 3; }
.villa__body { padding: clamp(1.6rem, 2.6vw, 2.4rem) clamp(1.6rem, 2.6vw, 2.4rem) clamp(1.8rem, 3vw, 2.6rem); display: flex; flex-direction: column; flex: 1; }
.villa__index { font-style: italic; font-weight: 300; color: var(--bronze); font-size: .9rem; letter-spacing: .24em; }
.villa__body h3 { margin: .4rem 0 1.4rem; }

.villa__specs {
  list-style: none; font-size: .82rem; color: #675f50; flex: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(1rem, 2vw, 2rem);
}
.villa__specs li {
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--sand);
}
.villa__specs li:nth-child(-n+2) { border-top: 1px solid var(--sand); }
/* seven specifications: the odd one out runs the full width */
.villa__specs li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.villa__icon {
  flex: none; width: 20px; height: 20px;
  fill: none; stroke: var(--bronze); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Apartments ──────────────────────────────────────────── */
.apartments {
  display: grid; grid-template-columns: .95fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
  background: var(--sand-pale); color: var(--ink);
}
.apartments h2 { color: var(--charcoal); }
.apartments__list { list-style: none; margin-top: 1.4rem; font-size: .84rem; }
.apartments__list li { padding: .6rem 0; border-bottom: 1px solid var(--sand); }
.apartments__list li:first-child { border-top: 1px solid var(--sand); }

/* ── Amenities ───────────────────────────────────────────── */
.amenities { background: var(--white); }
.amenities__head { text-align: center; max-width: 640px; margin: 0 auto 4.5rem; }
.amenities__head .eyebrow { justify-content: center; }
.amenities__head .eyebrow::after { content: ""; width: 2.6rem; height: 1px; background: var(--bronze); }
.amenities__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem) clamp(2rem, 4vw, 5rem); max-width: 1200px; margin: 0 auto; }
.amenity { border-top: 1px solid var(--stone); padding-top: 1.6rem; }
.amenity__num { font-style: italic; font-weight: 300; color: var(--bronze); letter-spacing: .18em; font-size: .85rem; }
.amenity h3 { font-size: 1.05rem; margin: .5rem 0 .6rem; }
.amenity p { font-size: .86rem; color: #6b6353; }

/* ── Gallery ─────────────────────────────────────────────── */
.gallery { background: var(--white); }
.gallery__head { text-align: center; margin-bottom: 4rem; }
.gallery__head .eyebrow { justify-content: center; }
.gallery__head .eyebrow::after { content: ""; width: 2.6rem; height: 1px; background: var(--bronze); }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(140px, 17vw, 260px);
  gap: clamp(.8rem, 1.6vw, 1.4rem);
}
.gallery__grid .ph { aspect-ratio: auto; height: 100%; }
.g1 { grid-column: span 2; grid-row: span 2; }
.g2 { grid-column: span 2; }
.g6 { grid-column: span 3; }

/* ── Location ────────────────────────────────────────────── */
.location { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; background: var(--sand-pale); }
.location__list { list-style: none; margin-top: 1.6rem; max-width: 26rem; }
.location__list li {
  display: flex; align-items: baseline; gap: 1.4rem;
  padding: .7rem 0; font-size: .86rem;
  border-bottom: 1px solid var(--sand);
}
.location__list li:first-child { border-top: 1px solid var(--sand); }
.location__list span { font-style: italic; font-weight: 300; color: var(--bronze-dk); font-size: .92rem; min-width: 4.6rem; }
.location__list em { font-style: normal; }

/* ── Contact ─────────────────────────────────────────────── */
.contact { background: var(--white); border-top: 1px solid var(--sand); }
.contact__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 7vw, 7rem); max-width: 1250px; margin: 0 auto; }
.contact__details { margin-top: 2.4rem; display: grid; gap: 1.1rem; font-size: .88rem; }
.contact__details span { display: block; font-size: .6rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--bronze); margin-bottom: .2rem; }
.contact__details em { font-style: normal; }
.contact__details a:hover { color: var(--bronze-dk); }

.contact__form { display: grid; gap: 1.5rem; align-content: start; background: var(--sand-pale); padding: clamp(1.6rem, 3vw, 2.8rem); }
.field { display: grid; gap: .45rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field label { font-size: .6rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--bronze-dk); }
.field input, .field select, .field textarea {
  background: transparent;
  border: 0; border-bottom: 1px solid var(--stone);
  padding: .6rem 0;
  font-family: var(--font); font-weight: 300; font-size: .95rem;
  color: var(--charcoal);
  border-radius: 0;
  transition: border-color .4s;
}
.field select { appearance: none; cursor: pointer; }
.field select option { color: var(--charcoal); }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--bronze); }
.form-note { font-size: .82rem; color: var(--bronze-dk); min-height: 1.4em; }

/* ── Footer ──────────────────────────────────────────────── */
.footer { text-align: center; padding: 4.5rem var(--pad) 3rem; background: var(--white); border-top: 1px solid var(--sand); color: #857c6c; }
.footer__logo { width: clamp(120px, 13vw, 155px); margin: 0 auto; }
.footer__links { display: flex; justify-content: center; gap: 2.2rem; margin: 2.2rem 0 2.6rem; flex-wrap: wrap; }
.footer__links a { font-size: .64rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.footer__links a:hover { color: var(--bronze-dk); }
.footer__legal { font-size: .7rem; letter-spacing: .06em; }

/* ══════════ Responsive ══════════ */
@media (max-width: 1240px) {
  .nav__group { gap: 1rem; }
  .nav__group a { font-size: .62rem; letter-spacing: .18em; }
}

@media (max-width: 1100px) {
  .nav__menu {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    height: 100svh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2.4rem;
    background: var(--white); color: var(--charcoal);
    overflow: hidden;
    visibility: hidden;
    transform: translateY(-100%);
    transition: transform .6s var(--ease), visibility .6s;
  }
  .nav.is-open .nav__menu { transform: none; visibility: visible; }
  .nav__group { flex-direction: column; gap: 1.7rem; }
  .nav__group a { font-size: .85rem; letter-spacing: .24em; }
  .nav.is-open { color: var(--charcoal); }

  /* bar reduces to: brand centred, burger right */
  .nav__bar { grid-template-columns: 1fr auto 1fr; }
  .nav__brand { grid-row: 1; grid-column: 2; }
  .nav__burger { display: block; grid-row: 1; grid-column: 3; }
  /* on mobile the logo stays in the bar at all times */
  .nav:not(.is-solid):not(.is-open) .nav__brand { width: var(--brand-w); opacity: 1; transform: none; pointer-events: auto; }

  /* overlay children: order and centre them */
  .lang, .nav__group--left, .nav__group--right, .nav__cta { justify-self: center; }
  .nav__group--left  { order: 1; }
  .nav__group--right { order: 2; }
  .nav__cta { order: 3; }
  .lang { order: 4; }
  .lang__list { inset-inline-start: auto; left: 50%; transform: translateX(-50%) translateY(-.4rem); }
  .lang.is-open .lang__list { transform: translateX(-50%); }
}

@media (max-width: 1024px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .g1, .g2, .g6 { grid-column: span 1; grid-row: span 1; }
  .g1, .g6 { grid-column: span 2; }
}

@media (max-width: 880px) {
  .project, .apartments, .location, .contact__inner { grid-template-columns: 1fr; }
  .apartments__media { order: -1; }

  /* two columns: reset the vertical rules and rule off the second row instead */
  .manifesto__stats { grid-template-columns: repeat(2, 1fr); row-gap: clamp(1.8rem, 4vw, 2.6rem); }
  .stat:nth-child(odd) { border-inline-start: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--stone); padding-top: clamp(1.8rem, 4vw, 2.6rem); }
}

@media (max-width: 760px) {
  .villas__grid { grid-template-columns: 1fr; }
  .villa .ph { aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
  .gate__lang { min-width: 100%; }
}

@media (max-width: 460px) {
  /* single column of specs once two would be too cramped */
  .villa__specs { grid-template-columns: 1fr; }
  .villa__specs li:nth-child(-n+2) { border-top: none; }
  .villa__specs li:first-child { border-top: 1px solid var(--sand); }
}

/* capture mode (?static in URL): no animations, compact hero */
html.static .hero { height: 760px; min-height: 0; }
html.static .preloader, html.static .gate { display: none; }
html.static .nav__brand { transition: none; }
html.static .hero__logo, html.static .hero__tagline,
html.static .hero__scroll { animation: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.js { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ══════════ Arabic / RTL ══════════
   Placed last so these win over the Latin defaults. */
html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .btn-solid,
html[lang="ar"] .field input, html[lang="ar"] .field select, html[lang="ar"] .field textarea {
  font-family: "Tajawal", var(--font);
}
/* Letter-spacing breaks the joins between Arabic letters. */
html[lang="ar"] * { letter-spacing: normal; }
html[lang="ar"] .btn-line:hover { letter-spacing: normal; }
html[lang="ar"] .gate__lang:hover { letter-spacing: normal; }
html[lang="ar"] .eyebrow,
html[lang="ar"] .stat__label,
html[lang="ar"] .field label,
html[lang="ar"] .contact__details span,
html[lang="ar"] .footer__links a,
html[lang="ar"] .nav__group a,
html[lang="ar"] .ph.is-empty::after { text-transform: none; font-size: .8rem; }
html[lang="ar"] .btn-line, html[lang="ar"] .btn-solid { text-transform: none; font-size: .85rem; }
html[lang="ar"] .hero__tagline,
html[lang="ar"] .manifesto__text em,
html[lang="ar"] .villa__index,
html[lang="ar"] .amenity__num,
html[lang="ar"] .location__list span { font-style: normal; }
html[dir="rtl"] .ph.is-empty::after { transform: translateX(50%); left: auto; right: 50%; }