/* ==========================================================================
   PLANNED REAL ESTATE  ·  بلاند العقارية
   Design system — editorial luxury, adapted from the reference film.
   Bone cream + charcoal ink + brand gold (sampled from Media/Logo.png #A88848)
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Surface */
  --bone:        #F6F2E9;   /* sampled from the reference frames */
  --bone-raised: #FBF9F4;
  --bone-sunk:   #EFE9DC;
  --paper:       #FFFFFF;

  /* Ink */
  --ink:         #14120E;
  --ink-soft:    #3A342A;
  --ink-mute:    #6E6658;
  --espresso:    #23201A;   /* dark band, deepened from reference #423C30 */

  /* Brand gold — sampled from the logo */
  --gold:        #A88848;
  --gold-light:  #C9A961;
  --gold-deep:   #7E6430;
  --gold-wash:   rgba(168,136,72,.10);

  /* Lines */
  --line:        rgba(20,18,14,.13);
  --line-soft:   rgba(20,18,14,.07);
  --line-dark:   rgba(246,242,233,.16);

  /* Type */
  --serif: "Playfair Display", "Amiri", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --radius: 22px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --dur: .45s;

  --maxw: 1440px;
}

/* Arabic swaps the display face for a Naskh serif of similar colour */
html[lang="ar"]{
  --serif: "Amiri", "Playfair Display", Georgia, serif;
  --sans:  "Tajawal", "Inter", sans-serif;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
.dark-band :focus-visible{ outline-color:var(--gold-light); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; inset-inline-start:1rem; top:-4rem; z-index:200;
  background:var(--ink); color:var(--bone);
  padding:.75rem 1.25rem; border-radius:var(--radius-pill);
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:1rem; }

/* ---------- 3. Typography ------------------------------------------------ */
.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.d1{ font-size:clamp(2.75rem, 7.2vw, 6.25rem); }
.d2{ font-size:clamp(2.1rem, 4.6vw, 4rem); }
.d3{ font-size:clamp(1.6rem, 2.9vw, 2.6rem); }
.d4{ font-size:clamp(1.25rem, 1.9vw, 1.6rem); line-height:1.18; }
html[lang="ar"] .display{ line-height:1.3; letter-spacing:0; }

.eyebrow{
  font-family:var(--sans);
  font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute);
}
html[lang="ar"] .eyebrow{ letter-spacing:0; font-size:.8rem; }
.eyebrow--gold{ color:var(--gold-deep); }
.dark-band .eyebrow{ color:rgba(246,242,233,.6); }

.lede{
  font-size:clamp(.95rem, 1.05vw, 1.0625rem);
  line-height:1.75; color:var(--ink-soft); max-width:52ch;
}
.dark-band .lede{ color:rgba(246,242,233,.75); }

.gold-rule{
  width:52px; height:2px; border:0; margin:0;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));
}

/* ---------- 4. Layout shells --------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }

/* The reference's signature: a cream card floating inside the page */
.panel{
  background:var(--bone-raised);
  border-radius:var(--radius);
  padding:clamp(1.75rem, 4.5vw, 4.5rem);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 24px 60px -40px rgba(20,18,14,.28);
}
.panel--sunk{ background:var(--bone-sunk); }

.dark-band{ background:var(--espresso); color:var(--bone); }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.85rem 1.4rem;
  border-radius:var(--radius-pill);
  font-size:.8125rem; font-weight:500; letter-spacing:.02em;
  min-height:44px; white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform .25s var(--ease);
  cursor:pointer;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn__arrow{
  display:grid; place-items:center;
  width:26px; height:26px; flex:none;
  border-radius:50%; background:currentColor;
  transition:transform var(--dur) var(--ease);
}
.btn__arrow svg{ width:12px; height:12px; }
.btn:hover .btn__arrow{ transform:translateX(3px); }
[dir="rtl"] .btn__arrow svg{ transform:scaleX(-1); }
[dir="rtl"] .btn:hover .btn__arrow{ transform:translateX(-3px); }

.btn--dark{ background:var(--ink); color:var(--bone); }
.btn--dark .btn__arrow svg{ color:var(--ink); }
.btn--dark:hover{ background:var(--gold-deep); }

.btn--gold{ background:var(--gold); color:#1B1508; }
.btn--gold .btn__arrow svg{ color:var(--gold); }
.btn--gold:hover{ background:var(--gold-light); }

.btn--light{ background:var(--bone); color:var(--ink); }
.btn--light .btn__arrow svg{ color:var(--bone); }
.btn--light:hover{ background:var(--paper); }

.btn--ghost{ border:1px solid var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); background:var(--ink); color:var(--bone); }
/* The arrow disc is filled with currentColor, so the glyph must be the inverse */
.btn--ghost .btn__arrow svg{ color:var(--bone); }
.btn--ghost:hover .btn__arrow svg{ color:var(--ink); }
.dark-band .btn--ghost{ border-color:var(--line-dark); color:var(--bone); }
.dark-band .btn--ghost:hover{ background:var(--bone); color:var(--ink); }
.dark-band .btn--ghost .btn__arrow svg{ color:var(--espresso); }
.dark-band .btn--ghost:hover .btn__arrow svg{ color:var(--bone); }

.link-underline{
  position:relative; font-size:.8125rem; font-weight:500;
  padding-block:.35rem; min-height:44px;
  display:inline-flex; align-items:center;
}
.link-underline::after{
  content:""; position:absolute; inset-inline:0; bottom:.15rem;
  height:1px; background:currentColor; opacity:.5;
  transform-origin:var(--uo, left);
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
[dir="rtl"] .link-underline{ --uo:right; }
.link-underline:hover::after{ opacity:1; transform:scaleX(1.06); }

/* ---------- 6. Header ---------------------------------------------------- */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem var(--gutter);
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .4s var(--ease);
}
/* Scrim so the transparent header stays legible over bright hero photography */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(10,8,5,.6), rgba(10,8,5,0));
  transition:opacity .5s var(--ease);
}
.site-header--solid::before{ opacity:0; }
.site-header--solid{
  background:rgba(246,242,233,.88);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--line-soft);
  padding-block:.7rem;
}
.header-logo img{ height:clamp(46px,5.4vw,64px); width:auto; }
.header-logo .logo-dark{ display:none; }
.site-header--solid .logo-light{ display:none; }
.site-header--solid .logo-dark{ display:block; }

.header-side{ display:flex; align-items:center; gap:1rem; flex:1; }
.header-side--end{ justify-content:flex-end; gap:.5rem; }

/* ---- Standard desktop navigation ---------------------------------------
   Below 1024px this is hidden and the hamburger overlay takes over. */
.main-nav{ display:none; }
@media (min-width:1024px){
  .main-nav{
    display:flex; align-items:center;
    gap:clamp(1rem,2.2vw,2rem);
    flex:0 1 auto;
  }
  .main-nav a{
    position:relative;
    font-size:.82rem; font-weight:500; letter-spacing:.01em;
    color:var(--bone);
    padding-block:.4rem;
    white-space:nowrap;
    transition:color .3s var(--ease);
  }
  .main-nav a::after{
    content:""; position:absolute; inset-inline:0; bottom:0;
    height:1.5px; background:currentColor;
    transform:scaleX(0); transform-origin:var(--uo,left);
    transition:transform .35s var(--ease);
  }
  [dir="rtl"] .main-nav a{ --uo:right; }
  .main-nav a:hover::after,
  .main-nav a[aria-current="page"]::after{ transform:scaleX(1); }
  .main-nav a[aria-current="page"]{ color:var(--gold-light); }
  .site-header--solid .main-nav a{ color:var(--ink); }
  .site-header--solid .main-nav a[aria-current="page"]{ color:var(--gold-deep); }

  /* The hamburger is only for small screens. Scoped to .site-header so this
     outranks the base .menu-btn rule, which appears later in this file. */
  .site-header .menu-btn{ display:none; }
  .header-side{ flex:0 0 auto; }
  .header-side--end{ flex:0 0 auto; }
}

/* Flag in the language switch */
.flag{
  width:20px; height:auto; flex:none;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
}
html[lang="ar"] .flag{ box-shadow:0 0 0 1px rgba(0,0,0,.18); }

.menu-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.78rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  min-height:44px; padding-inline:.4rem; color:var(--bone);
}
html[lang="ar"] .menu-btn{ letter-spacing:0; }
.site-header--solid .menu-btn,
.site-header--solid .lang-btn{ color:var(--ink); }
.menu-btn__bars{ display:grid; gap:4px; width:20px; }
.menu-btn__bars span{
  height:1.5px; background:currentColor; border-radius:2px;
  transition:width .4s var(--ease);
}
.menu-btn__bars span:last-child{ width:13px; }
.menu-btn:hover .menu-btn__bars span:last-child{ width:20px; }

.lang-btn{
  min-height:44px;
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.78rem; font-weight:600; letter-spacing:.06em;
  color:var(--bone);
  border-radius:var(--radius-pill);
  padding-inline:.7rem;
  border:1px solid rgba(246,242,233,.3);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.lang-btn:hover .flag{ box-shadow:0 0 0 1px rgba(0,0,0,.3); }
.site-header--solid .lang-btn{ border-color:var(--line); }
.lang-btn:hover{ background:var(--gold); color:#1B1508; border-color:var(--gold); }

/* Phone header: keep everything on one row. The Menu label and the Contact
   arrow disc are dropped before the contact CTA itself. */
@media (max-width:600px){
  .site-header{ padding-inline:1rem; gap:.5rem; }
  .menu-btn > span:not(.menu-btn__bars){ display:none; }
  .menu-btn{ min-width:44px; justify-content:center; }
  .header-logo img{ height:40px; }
  .site-header .btn{ padding:.7rem 1rem; font-size:.75rem; }
  .site-header .btn__arrow{ display:none; }
  .lang-btn{ padding-inline:.65rem; }
}

/* Fullscreen nav overlay */
.nav-overlay{
  position:fixed; inset:0; z-index:100;
  background:var(--espresso); color:var(--bone);
  display:grid; grid-template-rows:auto 1fr auto;
  padding:1.1rem var(--gutter) var(--gutter);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease-out-expo);
  visibility:hidden;
  overflow-y:auto;
}
.nav-overlay[data-open="true"]{ clip-path:inset(0 0 0 0); visibility:visible; }
.nav-overlay__top{ display:flex; justify-content:space-between; align-items:center; }
.nav-overlay__close{
  min-height:44px; min-width:44px;
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
}
html[lang="ar"] .nav-overlay__close{ letter-spacing:0; }
.nav-list{
  align-self:center;
  display:grid; gap:clamp(.15rem,1vw,.5rem);
  padding-block:clamp(2rem,6vh,4rem);
}
.nav-list a{
  font-family:var(--serif);
  font-size:clamp(1.75rem,5.6vw,4.25rem);
  line-height:1.14;
  color:rgba(246,242,233,.55);
  display:inline-flex; align-items:baseline; gap:1rem;
  transition:color .4s var(--ease), transform .5s var(--ease);
  width:fit-content;
}
.nav-list a:hover,
.nav-list a[aria-current="page"]{ color:var(--bone); transform:translateX(14px); }
[dir="rtl"] .nav-list a:hover,
[dir="rtl"] .nav-list a[aria-current="page"]{ transform:translateX(-14px); }
.nav-list .num{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.14em;
  color:var(--gold-light); opacity:.85;
}
.nav-overlay__foot{
  display:flex; flex-wrap:wrap; gap:1rem 2.5rem; justify-content:space-between;
  padding-top:1.5rem; border-top:1px solid var(--line-dark);
  font-size:.8125rem; color:rgba(246,242,233,.65);
}
.nav-overlay__foot a:hover{ color:var(--gold-light); }

/* ---------- 7. Hero ------------------------------------------------------ */
/* The hero holds the headline AND the search fields, so the whole search
   sits above the fold rather than overlapping the section below. */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  overflow:hidden; color:var(--bone);
}
.hero__media{ position:absolute; inset:0; }

/* Slides crossfade in place; the active one sits on top */
.hero__slide{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s var(--ease);
  will-change:opacity;
}
.hero__slide[data-active="true"]{ opacity:1; }

/* This footage and photography run bright, so the scrim has to work hard */
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,8,5,.95) 0%, rgba(10,8,5,.72) 30%,
                            rgba(10,8,5,.46) 58%, rgba(10,8,5,.40) 100%),
    radial-gradient(120% 90% at 50% 40%, rgba(10,8,5,0) 30%, rgba(10,8,5,.45) 100%);
}

.hero__body{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-rows:1fr auto auto;
  padding:clamp(5.5rem,11vh,8rem) var(--gutter) clamp(1.25rem,3.5vh,2.5rem);
}

/* All slide panels stack in one grid cell so the hero never jumps height */
.hero__stage{
  align-self:end;
  display:grid;
  padding-bottom:clamp(1rem,2.5vh,2rem);
}
.hero__stage > .hero__inner{ grid-area:1 / 1; }

/* The outgoing panel leaves quickly and the incoming one waits a moment, so
   two headlines are never legible on top of each other during the crossfade. */
.hero__inner{
  text-align:center;
  justify-items:center;
  display:grid; gap:.35rem;
  opacity:0; visibility:hidden;
  transform:translateY(14px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  pointer-events:none;
}
.hero__inner[data-active="true"]{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .55s var(--ease) .22s,
             transform .55s var(--ease) .22s,
             visibility 0s;
}

.hero__eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(246,242,233,.8);
}
html[lang="ar"] .hero__eyebrow{ letter-spacing:0; font-size:.8rem; }
.hero__dot{ width:4px; height:4px; border-radius:50%; background:var(--gold); flex:none; }

.hero__price{
  font-family:var(--serif); font-size:clamp(1.1rem,1.8vw,1.5rem);
  color:var(--gold-light); margin-top:.15rem;
}

.hero__title{ max-width:20ch; margin-bottom:.35rem; }
/* The gradient must repeat on the split word spans — background-clip:text only
   paints an element's own text, and the animation wraps each word in a span. */
.hero__title em,
.hero__title em span{
  font-style:italic;
  background:linear-gradient(100deg,var(--gold-light),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{
  color:rgba(246,242,233,.85); max-width:46ch;
  margin-inline:auto;
  margin-bottom:clamp(.5rem,1.5vh,1rem);
}
.hero__actions{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1rem 1.75rem; margin-top:clamp(.5rem,1.5vh,1rem);
}

/* ---- slider controls ---- */
.hero__controls{
  display:flex; justify-content:center; align-items:center; gap:.5rem;
  padding-block:clamp(.75rem,2vh,1.25rem);
}
.hero__controls button{
  box-sizing:content-box;
  width:26px; height:2px; padding:12px 3px;
  background:rgba(246,242,233,.35); background-clip:content-box;
  transition:background-color .35s var(--ease), width .35s var(--ease);
}
.hero__controls button[aria-current="true"]{
  width:46px; background-color:var(--gold);
}
.hero__controls button:hover{ background-color:rgba(246,242,233,.7); }

.hero__arrow{
  position:absolute; top:46%; z-index:3;
  width:48px; height:48px; border-radius:50%;
  display:none; place-items:center;
  color:var(--bone);
  border:1px solid rgba(246,242,233,.3);
  background:rgba(10,8,5,.25);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
@media (min-width:900px){ .hero__arrow{ display:grid; } }
.hero__arrow:hover{ background:var(--gold); border-color:var(--gold); color:#1B1508; }
.hero__arrow svg{ width:16px; }
[dir="rtl"] .hero__arrow svg{ transform:scaleX(-1); }
.hero__arrow--prev{ inset-inline-start:clamp(.75rem,2vw,1.75rem); }
.hero__arrow--next{ inset-inline-end:clamp(.75rem,2vw,1.75rem); }

@media (prefers-reduced-motion: reduce){
  .hero__slide, .hero__inner{ transition-duration:.001ms !important; }
}

/* ---------- 8. Search bar (lives inside the hero) ------------------------ */
.search-bar__inner{
  background:rgba(251,249,244,.94);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border-radius:var(--radius);
  box-shadow:0 30px 70px -40px rgba(10,8,5,.75);
  padding:clamp(.85rem,1.8vw,1.4rem);
  color:var(--ink);
  display:grid; gap:.55rem;
  grid-template-columns:repeat(2,minmax(0,1fr));   /* two-up on phones so it stays short */
}
.search-bar__inner .btn{ grid-column:1 / -1; justify-content:center; }
@media (min-width:1000px){
  .search-bar__inner{ grid-template-columns:repeat(4,minmax(0,1fr)) auto; align-items:end; }
  .search-bar__inner .btn{ grid-column:auto; }
}
/* Phones: the dot row must not push the search fields below the fold */
@media (max-width:760px){
  .hero__controls{ padding-block:.35rem; }
  .hero__controls button{ padding:9px 3px; width:20px; }
  .hero__controls button[aria-current="true"]{ width:34px; }
  .hero__stage{ padding-bottom:.75rem; }
  .hero__eyebrow{ font-size:.62rem; letter-spacing:.12em; }
  .hero__price{ font-size:1.05rem; }
}

/* Short viewports (small phones, landscape, small laptop windows): compress the
   headline block so the search fields still clear the fold. */
@media (max-height:700px){
  .hero__controls{ padding-block:.25rem; }
  .hero__controls button{ padding:8px 3px; }
  .hero__stage{ padding-bottom:.5rem; }
  .hero__body{ padding-block:4.75rem 1rem; }
  .hero__inner{ padding-bottom:.85rem; }
  .hero__title{ font-size:clamp(1.9rem,5.2vw,2.5rem); margin-bottom:.6rem; }
  .hero__sub{ font-size:.85rem; line-height:1.6; margin-bottom:.9rem; }
  .hero__actions{ gap:.6rem 1.1rem; }
  .search-bar__inner{ padding:.7rem; gap:.4rem; }
  .field > label{ font-size:.62rem; }
  .field select{ min-height:42px; }
}
/* Small phones: reclaim the last few pixels so the Search button clears */
@media (max-height:660px) and (max-width:420px){
  .hero__controls{ padding-block:.15rem; }
  .hero__stage{ padding-bottom:.3rem; }
  .hero__price{ font-size:.95rem; }
  .hero__actions{ margin-top:.35rem; }
  .hero__body{ padding-bottom:.85rem; }
}

/* Shorter still (landscape phones): drop the supporting paragraph, the eyebrow
   and the dot row. Arrows and swipe still move between slides. */
@media (max-height:560px){
  .hero__sub{ display:none; }
  .hero__body{ padding-top:4.25rem; }
  .hero__controls{ display:none; }
  .hero__eyebrow{ display:none; }
  .hero__stage{ padding-bottom:.3rem; }
  .hero__title{ font-size:clamp(1.4rem,3.8vw,1.9rem); }
  .hero__price{ font-size:.95rem; margin-top:0; }
  .hero__actions{ margin-top:.4rem; }
}
/* Landscape phones are wide but very short — one row of fields is the only
   arrangement that leaves room for the headline above them. */
@media (max-height:560px) and (min-width:600px){
  .search-bar__inner{ grid-template-columns:repeat(4,minmax(0,1fr)) auto; align-items:end; }
  .search-bar__inner .btn{ grid-column:auto; }
}
.field{ display:grid; gap:.35rem; min-width:0; }
.field > label{
  font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute);
}
html[lang="ar"] .field > label{ letter-spacing:0; font-size:.78rem; }
.field select, .field input, .field textarea{
  width:100%; min-height:46px;
  padding:.6rem .85rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:.9rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{ min-height:120px; resize:vertical; }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236E6658' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:11px;
  background-position:right .9rem center;
  padding-inline-end:2.2rem;
}
[dir="rtl"] .field select{
  background-position:left .9rem center;
  padding-inline-end:.85rem; padding-inline-start:2.2rem;
}
.field :is(select,input,textarea):focus{
  border-color:var(--gold); outline:none;
  box-shadow:0 0 0 3px var(--gold-wash);
}
.search-bar .btn{ justify-content:center; min-height:46px; }

/* ---------- 9. Stats ----------------------------------------------------- */
.stats{
  display:grid; gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);
  overflow:hidden;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:860px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:var(--bone-raised); padding:clamp(1.1rem,2vw,1.75rem); }
.stat__num{
  font-family:var(--serif); font-size:clamp(1.9rem,3.4vw,3rem);
  line-height:1; display:flex; align-items:baseline; gap:.3rem;
}
.stat__suffix{ font-family:var(--sans); font-size:.9rem; color:var(--gold-deep); font-weight:500; }
.stat__label{ margin-top:.75rem; font-size:.78rem; color:var(--ink-mute); line-height:1.45; }

/* ---------- 10. Showcase (glass card floating over a photo) -------------- */
.showcase{ position:relative; border-radius:var(--radius); overflow:hidden; }
.showcase__stage{ position:relative; aspect-ratio:16/10; background:var(--ink); }
@media (max-width:640px){ .showcase__stage{ aspect-ratio:4/5; } }
.showcase__slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s var(--ease); }
.showcase__slide[data-active="true"]{ opacity:1; }
.showcase__slide img{ width:100%; height:100%; object-fit:cover; }

.glass-card{
  position:absolute;
  inset-inline-start:clamp(.75rem,2.5vw,2.25rem);
  bottom:clamp(.75rem,2.5vw,2.25rem);
  width:min(360px, calc(100% - clamp(1.5rem,5vw,4.5rem)));
  background:rgba(251,249,244,.85);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--radius-sm);
  padding:1.1rem 1.25rem;
  box-shadow:0 24px 50px -30px rgba(20,18,14,.6);
}
.glass-card__loc{
  display:flex; align-items:center; gap:.4rem;
  font-size:.74rem; color:var(--ink-mute); margin-top:.3rem;
}
.glass-card__loc svg{ width:12px; flex:none; color:var(--gold-deep); }
.glass-card__desc{ font-size:.82rem; color:var(--ink-soft); line-height:1.6; margin-top:.7rem; }
.glass-card__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line-soft);
}
.glass-card__price{ font-family:var(--serif); font-size:1.15rem; }
.dots{ display:flex; align-items:center; gap:.6rem; }
.dots__nav{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; flex:none;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.dots__nav svg{ width:13px; }
[dir="rtl"] .dots__nav svg{ transform:scaleX(-1); }
.dots__nav:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.dots__pips{ display:flex; align-items:center; }
/* The pip reads as a 6px dot but carries a full 44px touch target:
   content-box sizing lets the padding extend the hit area, and
   background-clip keeps the paint on the dot itself. */
.dots__pips button{
  box-sizing:content-box;
  width:6px; height:6px;
  padding:19px 6px;
  border-radius:50%;
  background:var(--line);
  background-clip:content-box;
  transition:width .35s var(--ease), background-color .35s var(--ease);
}
.dots__pips button[aria-current="true"]{
  width:18px; border-radius:3px; background-color:var(--gold); background-clip:content-box;
}

/* Picture-in-picture thumb, top corner (reference move) */
.pip{
  position:absolute;
  inset-inline-end:clamp(.75rem,2.5vw,2.25rem);
  top:clamp(.75rem,2.5vw,2.25rem);
  width:min(170px,34vw);
  background:rgba(251,249,244,.85);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--radius-sm); padding:.5rem;
  box-shadow:0 20px 44px -28px rgba(20,18,14,.6);
}
.pip__label{ font-size:.68rem; padding:.15rem .2rem .45rem; color:var(--ink-soft); }
.pip img{ border-radius:8px; aspect-ratio:4/3; object-fit:cover; width:100%; }
@media (max-width:640px){ .pip{ display:none; } }

/* ---------- 11. Services accordion (sticky split) ------------------------ */
.split{ display:grid; gap:clamp(2rem,4vw,4rem); }
@media (min-width:1000px){ .split{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }
.split__sticky{ align-self:start; }
@media (min-width:1000px){ .split__sticky{ position:sticky; top:7rem; } }

.svc-nav{ display:grid; gap:.1rem; margin-top:2.5rem; }
.svc-nav button{
  text-align:start;
  font-family:var(--serif); font-size:clamp(1.05rem,1.5vw,1.35rem);
  color:var(--ink-mute); opacity:.6;
  padding:.5rem 0; min-height:44px;
  transition:color .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
.svc-nav button:hover{ opacity:.9; }
.svc-nav button[aria-selected="true"]{ color:var(--ink); opacity:1; transform:translateX(6px); }
[dir="rtl"] .svc-nav button[aria-selected="true"]{ transform:translateX(-6px); }

.acc{ display:grid; }
.acc__item{ border-top:1px solid var(--line); }
.acc__item:last-child{ border-bottom:1px solid var(--line); }
.acc__head{
  width:100%; display:flex; align-items:center; gap:1rem;
  padding:1.15rem 0; min-height:44px; text-align:start;
}
.acc__num{ font-size:.7rem; color:var(--gold-deep); letter-spacing:.1em; flex:none; width:1.6rem; }
.acc__title{ font-family:var(--serif); font-size:clamp(1rem,1.35vw,1.2rem); flex:1; }
.acc__sign{ flex:none; width:16px; height:16px; position:relative; }
.acc__sign::before,.acc__sign::after{
  content:""; position:absolute; inset-inline:0; top:50%;
  height:1.5px; background:var(--ink-mute);
  transition:transform .45s var(--ease);
}
.acc__sign::after{ transform:rotate(90deg); }
.acc__item[data-open="true"] .acc__sign::after{ transform:rotate(0deg); }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease-out-expo); }
.acc__item[data-open="true"] .acc__panel{ grid-template-rows:1fr; }
.acc__panel > div{ overflow:hidden; }
.acc__body{ padding-bottom:1.5rem; display:grid; gap:1rem; }
.acc__body img{
  border-radius:var(--radius-sm); aspect-ratio:16/9; object-fit:cover;
  width:100%; max-height:280px;
}
.acc__body p{ font-size:.85rem; color:var(--ink-soft); line-height:1.7; max-width:56ch; }

/* ---------- 12. Property cards ------------------------------------------- */
.card{ display:block; }
.card__media{
  position:relative; overflow:hidden;
  border-radius:var(--radius-sm);
  background:var(--bone-sunk);
}
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out-expo);
}
.card:hover .card__media img{ transform:scale(1.06); }
.card__tag{
  position:absolute; inset-inline-start:.75rem; top:.75rem;
  background:rgba(251,249,244,.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:var(--radius-pill);
  padding:.3rem .7rem;
  font-size:.66rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
}
html[lang="ar"] .card__tag{ letter-spacing:0; }
.card__tag--gold{ background:var(--gold); color:#1B1508; }
/* Name and price sit on one line when there is room; the price drops to its
   own line on narrow cards instead of squeezing the title into a column. */
.card__body{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.2rem 1rem;
  margin-top:.9rem;
}
.card__name{
  flex:1 1 auto; min-width:14ch;
  font-family:var(--serif); font-size:clamp(1rem,1.25vw,1.15rem);
  line-height:1.25; transition:color .35s var(--ease);
  text-wrap:balance;
}
.card__price{
  flex:0 0 auto;
  font-family:var(--serif); font-size:clamp(.95rem,1.15vw,1.05rem);
  white-space:nowrap; color:var(--gold-deep);
}
.card__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:.35rem .9rem;
  margin-top:.4rem; font-size:.75rem; color:var(--ink-mute);
}
.card__meta span{ display:inline-flex; align-items:center; gap:.3rem; }
.card__meta svg{ width:12px; flex:none; color:var(--gold-deep); }
.card:hover .card__name{ color:var(--gold-deep); }

/* Staggered editorial grid (the reference's asymmetric listing rhythm) */
.grid-listings{ display:grid; gap:clamp(1.5rem,3vw,3rem); }
@media (min-width:820px){
  .grid-listings{ grid-template-columns:repeat(12,1fr); align-items:start; }
  .grid-listings > *:nth-child(6n+1){ grid-column:span 5; }
  .grid-listings > *:nth-child(6n+2){ grid-column:span 4; grid-column-start:8; margin-top:5rem; }
  .grid-listings > *:nth-child(6n+3){ grid-column:2 / span 7; }
  .grid-listings > *:nth-child(6n+4){ grid-column:span 4; }
  .grid-listings > *:nth-child(6n+5){ grid-column:span 5; grid-column-start:7; margin-top:3rem; }
  .grid-listings > *:nth-child(6n+6){ grid-column:3 / span 6; }
  .grid-listings > *:nth-child(6n+1) .card__media{ aspect-ratio:4/3; }
  .grid-listings > *:nth-child(6n+2) .card__media{ aspect-ratio:1/1; }
  .grid-listings > *:nth-child(6n+3) .card__media{ aspect-ratio:16/9; }
  .grid-listings > *:nth-child(6n+4) .card__media{ aspect-ratio:3/4; }
  .grid-listings > *:nth-child(6n+5) .card__media{ aspect-ratio:4/3; }
  .grid-listings > *:nth-child(6n+6) .card__media{ aspect-ratio:16/10; }
}
@media (max-width:819px){ .grid-listings .card__media{ aspect-ratio:4/3; } }

/* Plain even grid, used on the Properties page */
.grid-even{
  display:grid; gap:clamp(1.5rem,2.5vw,2.5rem);
  grid-template-columns:repeat(auto-fill, minmax(min(100%,290px), 1fr));
}
.grid-even .card__media{ aspect-ratio:4/3; }

/* ---------- 13. Area tiles ----------------------------------------------- */
.grid-areas{
  display:grid; gap:clamp(.85rem,1.5vw,1.25rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,230px), 1fr));
}
.area{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--radius-sm);
  aspect-ratio:3/4; color:var(--bone); isolation:isolate;
}
@media (min-width:900px){ .area:nth-child(3n+2){ aspect-ratio:3/4.5; } }
.area img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease-out-expo); z-index:-2;
}
.area::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(12,10,7,.88), rgba(12,10,7,.15) 60%);
  transition:background .5s var(--ease);
}
.area:hover img{ transform:scale(1.07); }
.area:hover::after{ background:linear-gradient(to top, rgba(126,100,48,.92), rgba(12,10,7,.2) 65%); }
.area__body{ position:absolute; inset-inline:0; bottom:0; padding:1.1rem 1.15rem; }
.area__name{ font-family:var(--serif); font-size:1.2rem; }
.area__count{ font-size:.72rem; color:rgba(246,242,233,.8); margin-top:.2rem; }

/* ---------- 14. Team ----------------------------------------------------- */
.grid-team{
  display:grid; gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,220px), 1fr));
}
.agent__media{
  border-radius:var(--radius-sm); overflow:hidden;
  aspect-ratio:4/5; background:var(--bone-sunk);
  display:grid; place-items:center;
}
.agent__media img{ width:100%; height:100%; object-fit:cover; }
.agent__initials{
  font-family:var(--serif); font-size:2.5rem; color:var(--gold-deep);
  background:linear-gradient(150deg,var(--bone-sunk),var(--bone-raised));
  width:100%; height:100%; display:grid; place-items:center;
}
.agent__name{ font-family:var(--serif); font-size:1.1rem; margin-top:.9rem; }
.agent__role{ font-size:.76rem; color:var(--gold-deep); margin-top:.15rem; }
.agent__langs{ font-size:.75rem; color:var(--ink-mute); margin-top:.5rem; }
.agent__links{ display:flex; gap:.5rem; margin-top:.85rem; }
.agent__links a{
  width:44px; height:44px; min-width:44px; border-radius:50%;
  border:1px solid var(--line); display:grid; place-items:center;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.agent__links a:hover{ background:var(--gold); border-color:var(--gold); color:#1B1508; }
.agent__links svg{ width:15px; }

/* ---------- 15. Testimonials --------------------------------------------- */
.quote{
  display:none;
  font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,2.15rem);
  line-height:1.35; text-wrap:balance;
}
.quote[data-active="true"]{ display:block; animation:fadeUp .7s var(--ease) both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.quote__by{ font-family:var(--sans); font-size:.82rem; color:var(--ink-mute); margin-top:1.5rem; line-height:1.5; }
.quote__by strong{ color:var(--ink); font-weight:500; display:block; }
.stars{ display:flex; gap:.2rem; color:var(--gold); margin-bottom:1.5rem; }
.stars svg{ width:15px; }

/* ---------- 16. Insights cards ------------------------------------------- */
.grid-insights{ display:grid; gap:clamp(1.25rem,2.5vw,2rem); }
@media (min-width:900px){ .grid-insights{ grid-template-columns:1.4fr 1fr 1fr; align-items:start; } }
.post__media{ border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:16/10; }
.post__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out-expo); }
.post:hover .post__media img{ transform:scale(1.05); }
.post__title{ font-family:var(--serif); font-size:1.1rem; line-height:1.3; margin-top:1rem; }
.post__excerpt{ font-size:.82rem; color:var(--ink-soft); line-height:1.65; margin-top:.6rem; }
.post__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:1rem; padding-top:.75rem; border-top:1px solid var(--line-soft);
  font-size:.72rem; color:var(--ink-mute);
}
.post__cat{ color:var(--gold-deep); }

/* ---------- 17. Footer --------------------------------------------------- */
.footer-cta{
  display:grid; gap:2rem;
  padding-block:clamp(3rem,6vw,5rem);
  border-bottom:1px solid var(--line-dark);
}
@media (min-width:900px){ .footer-cta{ grid-template-columns:1fr auto; align-items:center; } }
.avatars{ display:flex; }
.avatars span{
  width:34px; height:34px; border-radius:50%;
  border:2px solid var(--espresso);
  margin-inline-start:-10px;
  display:grid; place-items:center;
  font-size:.62rem; font-weight:600; color:#1B1508;
  background:linear-gradient(140deg,var(--gold-light),var(--gold-deep));
}
.avatars span:first-child{ margin-inline-start:0; }

.footer-cols{
  display:grid; gap:2.25rem;
  padding-block:clamp(2.5rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,180px), 1fr));
}
.footer-col h3{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(246,242,233,.55); margin-bottom:1.1rem; font-weight:500;
}
html[lang="ar"] .footer-col h3{ letter-spacing:0; font-size:.8rem; }
.footer-col li + li{ margin-top:.6rem; }
.footer-col a, .footer-col p{ font-size:.85rem; color:rgba(246,242,233,.78); line-height:1.65; }
.footer-col a{
  transition:color .3s var(--ease);
  display:inline-flex; align-items:center; min-height:36px;
}
.footer-col a:hover{ color:var(--gold-light); }
.social a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--line-dark); min-height:44px;
}
.social svg{ width:12px; opacity:.6; transition:transform .35s var(--ease), opacity .35s var(--ease); }
.social a:hover svg{ transform:translate(3px,-3px); opacity:1; }
[dir="rtl"] .social a:hover svg{ transform:translate(-3px,-3px); }

.footer-legal{
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
  padding-block:1.25rem; border-top:1px solid var(--line-dark);
  font-size:.75rem; color:rgba(246,242,233,.55);
}

/* Oversized wordmark with scattered photos — the reference's closing move */
.wordmark{ position:relative; padding-block:clamp(1rem,3vw,2.5rem) clamp(1.5rem,3vw,2rem); overflow:hidden; }
.wordmark__text{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(3rem, 15.5vw, 14rem);
  line-height:.85; letter-spacing:-.02em;
  text-align:center; color:var(--bone);
  white-space:nowrap; user-select:none;
}
html[lang="ar"] .wordmark__text{ font-size:clamp(3rem,15vw,13rem); line-height:1.25; }
.wordmark__scatter{ position:absolute; inset:0; pointer-events:none; }
.wordmark__scatter img{
  position:absolute; width:clamp(70px,9vw,130px);
  aspect-ratio:4/3; object-fit:cover;
  border-radius:8px; box-shadow:0 18px 40px -20px rgba(0,0,0,.7);
  opacity:0;
}

/* ---------- 18. WhatsApp float ------------------------------------------- */
.wa-float{
  position:fixed; inset-inline-end:1.15rem; bottom:1.15rem; z-index:80;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 14px 32px -12px rgba(37,211,102,.7);
  transition:transform .3s var(--ease);
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:27px; }

/* ---------- 19. Interior page header ------------------------------------- */
.page-head{ padding-top:clamp(8rem,14vw,11rem); padding-bottom:clamp(2.5rem,5vw,4rem); }
.crumbs{ font-size:.75rem; color:var(--ink-mute); margin-bottom:1.25rem; }
.crumbs a:hover{ color:var(--gold-deep); }
.crumbs span{ margin-inline:.45rem; opacity:.5; }

/* ---------- 20. Forms & misc --------------------------------------------- */
.form-grid{ display:grid; gap:1rem; }
@media (min-width:680px){ .form-grid--2{ grid-template-columns:1fr 1fr; } }
.form-grid .span-2{ grid-column:1 / -1; }
.dark-band .field > label{ color:rgba(246,242,233,.65); }
/* background-color, NOT the `background` shorthand — the shorthand would reset
   the chevron's repeat/size/position and tile it across the field. */
.dark-band .field :is(input,select,textarea){
  background-color:rgba(246,242,233,.07);
  border-color:var(--line-dark);
  color:var(--bone);
}
.dark-band .field :is(input,select,textarea)::placeholder{ color:rgba(246,242,233,.45); }
.dark-band .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23C9A961' stroke-width='1.5'/%3E%3C/svg%3E");
}
.form-note{ font-size:.75rem; color:var(--ink-mute); }
.dark-band .form-note{ color:rgba(246,242,233,.55); }
.form-status{ font-size:.85rem; margin-top:.5rem; min-height:1.2em; color:var(--gold-deep); }
.dark-band .form-status{ color:var(--gold-light); }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.6rem 1.1rem; font-size:.78rem; min-height:44px;
  display:inline-flex; align-items:center; white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.chip:hover{ border-color:var(--ink); }

.job{ display:grid; gap:.6rem 1.5rem; align-items:center; padding:1.4rem 0; border-bottom:1px solid var(--line); }
@media (min-width:820px){ .job{ grid-template-columns:1.6fr 1fr 1fr auto; } }
.job__title{ font-family:var(--serif); font-size:1.15rem; }
.job__meta{ font-size:.78rem; color:var(--ink-mute); }

.tick{ display:flex; gap:.85rem; align-items:flex-start; }
.tick svg{ width:17px; flex:none; color:var(--gold); margin-top:.25rem; }
.tick h4{ font-family:var(--serif); font-size:1.05rem; margin:0 0 .3rem; font-weight:500; }
.tick p{ font-size:.83rem; color:var(--ink-soft); line-height:1.65; }
.dark-band .tick p{ color:rgba(246,242,233,.72); }

.grid-3{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); grid-template-columns:repeat(auto-fit, minmax(min(100%,260px), 1fr)); }

.empty{ padding:4rem 1rem; text-align:center; color:var(--ink-mute); border:1px dashed var(--line); border-radius:var(--radius-sm); }

/* Google Maps embed — the iframe is always LTR, so it is not mirrored in RTL */
.map-embed{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bone-sunk);
  box-shadow:0 24px 60px -45px rgba(20,18,14,.5);
  aspect-ratio:21/9;
  min-height:320px;
}
@media (max-width:760px){ .map-embed{ aspect-ratio:4/3; min-height:300px; } }
.map-embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
  display:block;
}
#cPhones a{ display:inline-block; transition:color .3s var(--ease); }
#cPhones a:hover{ color:var(--gold-deep); }

.step__num{ font-family:var(--serif); font-size:2.5rem; color:var(--gold); line-height:1; }
.step h4{ font-family:var(--serif); font-size:1.15rem; font-weight:500; margin:.85rem 0 .45rem; }
.step p{ font-size:.83rem; color:var(--ink-soft); line-height:1.65; }
.dark-band .step p{ color:rgba(246,242,233,.72); }

/* ---------- 20b. Property detail page ------------------------------------ */
.pd-head{ padding-top:clamp(7rem,12vw,9.5rem); padding-bottom:clamp(1.5rem,3vw,2.25rem); }
.pd-title-row{
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:flex-end; justify-content:space-between;
}
.pd-price{
  font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--gold-deep); white-space:nowrap;
}
.pd-loc{ display:flex; align-items:center; gap:.45rem; color:var(--ink-mute); font-size:.9rem; margin-top:.6rem; }
.pd-loc svg{ width:14px; flex:none; color:var(--gold-deep); }

/* Gallery: big stage + thumbnail strip */
.gal{ display:grid; gap:.75rem; }
.gal__stage{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--bone-sunk); aspect-ratio:16/10;
}
@media (max-width:640px){ .gal__stage{ aspect-ratio:4/3; } }
.gal__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s var(--ease);
}
.gal__img[data-active="true"]{ opacity:1; }
.gal__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(251,249,244,.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; place-items:center; color:var(--ink);
  box-shadow:0 10px 26px -14px rgba(10,8,5,.7);
  transition:background .25s var(--ease);
}
.gal__nav:hover{ background:var(--paper); }
.gal__nav svg{ width:15px; }
[dir="rtl"] .gal__nav svg{ transform:scaleX(-1); }
.gal__nav--prev{ inset-inline-start:.9rem; }
.gal__nav--next{ inset-inline-end:.9rem; }
.gal__count{
  position:absolute; inset-inline-end:.9rem; bottom:.9rem;
  background:rgba(10,8,5,.62); color:var(--bone);
  padding:.35rem .75rem; border-radius:var(--radius-pill);
  font-size:.72rem; letter-spacing:.04em;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.gal__tag{
  position:absolute; inset-inline-start:.9rem; top:.9rem;
  border-radius:var(--radius-pill); padding:.35rem .8rem;
  font-size:.68rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  background:var(--gold); color:#1B1508;
}
html[lang="ar"] .gal__tag{ letter-spacing:0; }
.gal__thumbs{
  display:flex; gap:.55rem; overflow-x:auto; padding-bottom:.35rem;
  scrollbar-width:thin;
}
.gal__thumbs button{
  flex:0 0 auto; width:104px; aspect-ratio:4/3;
  border-radius:10px; overflow:hidden; padding:0;
  border:2px solid transparent; opacity:.62;
  transition:opacity .25s var(--ease), border-color .25s var(--ease);
}
.gal__thumbs button[aria-current="true"]{ opacity:1; border-color:var(--gold); }
.gal__thumbs button:hover{ opacity:1; }
.gal__thumbs img{ width:100%; height:100%; object-fit:cover; }

/* Key facts strip */
.pd-facts{
  display:grid; gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:var(--radius-sm); overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));
}
.pd-fact{ background:var(--bone-raised); padding:1rem 1.1rem; }
.pd-fact__k{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); }
html[lang="ar"] .pd-fact__k{ letter-spacing:0; font-size:.75rem; }
.pd-fact__v{ font-family:var(--serif); font-size:1.3rem; margin-top:.35rem; }

/* Two-column body */
.pd-body{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
@media (min-width:1000px){ .pd-body{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); } }
.pd-section + .pd-section{ margin-top:clamp(2rem,4vw,3rem); }
.pd-section h2{ font-family:var(--serif); font-size:clamp(1.3rem,2vw,1.7rem); font-weight:500; margin-bottom:1rem; }
.pd-desc{ font-size:.95rem; line-height:1.85; color:var(--ink-soft); }

/* Amenity chips */
.amenities{
  display:grid; gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
}
.amenity{
  display:flex; align-items:center; gap:.65rem;
  background:var(--bone-raised); border:1px solid var(--line-soft);
  border-radius:var(--radius-pill); padding:.65rem 1rem;
  font-size:.83rem;
}
.amenity svg{ width:16px; flex:none; color:var(--gold-deep); }

/* Sticky enquiry card */
.pd-cta{ position:sticky; top:6.5rem; }
.pd-cta__inner{
  background:var(--bone-raised); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:clamp(1.25rem,2.5vw,1.75rem);
  box-shadow:0 24px 60px -45px rgba(20,18,14,.35);
  display:grid; gap:.75rem;
}
.pd-cta__inner .btn{ justify-content:center; width:100%; }
.pd-cta__price{ font-family:var(--serif); font-size:1.8rem; }
.pd-cta__ref{ font-size:.72rem; color:var(--ink-mute); letter-spacing:.08em; }
.pd-wa{ background:#25D366; color:#fff; }
/* This button holds a bare <svg>, not a .btn__arrow, so it needs its own size */
.pd-wa > svg{ width:18px; height:18px; flex:none; }
.pd-wa .btn__arrow{ display:none; }
.pd-wa:hover{ background:#1FBA59; }

/* ---------- 21. Scroll reveal base state --------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(26px); }
/* Safety class: forces every animated element to its finished state.
   GSAP writes the independent `translate`/`rotate`/`scale` properties as well
   as `transform`, so all four must be cleared or the element stays offset. */
.no-motion [data-reveal],
.no-motion [data-hero-fade],
.no-motion [data-split],
.no-motion [data-split] span,
.no-motion .wordmark__text{
  opacity:1 !important;
  transform:none !important;
  translate:none !important;
  rotate:none !important;
  scale:none !important;
  filter:none !important;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .wordmark__scatter{ display:none; }
}