/* ============================================================
   Value Homes — shared stylesheet
   ============================================================ */

:root{
  /* palette taken from the VH logo and the launch page (valuee/index.html):
     near-black neutrals, the logo orange as the one accent */
  --bg:#050505;
  --bg-warm:#0a0a0a;
  --surface:#0f0f0f;
  --surface-2:#151515;
  --ink:#f7f7f5;
  --paper:#d6d6d2;
  --muted:#a9a9a4;
  --rust:#e5823b;       /* accent = the logo orange */
  --rust-deep:#b64116;  /* ember, the deep end of the orange */
  --brand:#e5823b;
  --logo:#e5823b;
  --gold:#f6ad5a;       /* light amber highlight */
  --line:rgba(229,130,59,.32);
  --line-soft:rgba(255,255,255,.08);
  --shadow:0 20px 44px -18px rgba(0,0,0,.8);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  position:relative;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ list-style:none; margin:0; padding:0; }

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 6vw;
}

/* ---- shared typography ---- */
.eyebrow{
  font-family:'Inter',sans-serif;
  font-weight:600;
  letter-spacing:.32em;
  font-size:clamp(.66rem,1.4vw,.76rem);
  text-transform:uppercase;
  color:var(--rust);
  margin:0 0 .9em;
}
.section-title{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:clamp(1.8rem,3.8vw,2.7rem);
  line-height:1.18;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  color:var(--ink);
}
.section-lede{
  font-size:clamp(.96rem,1.6vw,1.05rem);
  line-height:1.7;
  color:var(--paper);
  max-width:56ch;
}
.section-lede.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head{ text-align:center; padding:0 0 3em; }
.section-head .section-lede{ margin-left:auto; margin-right:auto; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.95em 1.7em;
  border-radius:999px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:.88rem;
  letter-spacing:.02em;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.btn-primary{
  background:var(--rust);
  color:#0a0a0a;
}
.btn-primary:hover{ background:var(--gold); transform:translateY(-2px); }
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:rgba(255,255,255,.25);
}
.btn-ghost:hover{ border-color:var(--rust); color:var(--rust); transform:translateY(-2px); }
.btn:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }

/* ============================================================
   Header / nav
   ============================================================ */
/* the bar floats over the top photo of every page */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
}
/* the bar is fully transparent; once the page scrolls it only blurs what
   passes underneath (no tint), so the links stay readable */
.navbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.1em 6vw;
  background:transparent;
  transition:padding .45s cubic-bezier(.2,.7,.2,1), backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease;
}
.navbar.is-scrolled{
  padding:.8em 6vw;
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
}
.nav-logo{ display:inline-flex; }

/* ============================================================
   Brand mark (matches the coming-soon page)
   ============================================================ */
.vh-mark{
  display:block;
  width:auto;
  overflow:visible;
}
/* each half of the VH monogram traces its outline, then floods with colour */
.vh-mark .logo-shape{
  fill:var(--logo);
  fill-opacity:0;
  stroke:var(--logo);
  stroke-width:4;
  stroke-linejoin:miter;
  stroke-dasharray:100;
  stroke-dashoffset:100;
}
.vh-mark .logo-word{
  fill:#fff;
  opacity:0;
}

/* nav mark — draws itself on page load */
.vh-mark--nav{
  height:clamp(34px,3.3vw,42px);
  transition:height .3s ease;
}
.navbar.is-scrolled .vh-mark--nav{ height:clamp(30px,2.9vw,36px); }
.vh-mark--nav .logo-shape{ animation:logo-draw 1.2s cubic-bezier(.62,.02,.34,1) .15s forwards, logo-fill .6s ease 1.15s forwards; }
.vh-mark--nav .logo-shape.s2{ animation-delay:.4s, 1.4s; }
.vh-mark--nav .logo-word.l1{ animation:logo-word .7s ease 1s forwards; }
.vh-mark--nav .logo-word.l2{ animation:logo-word .7s ease 1.15s forwards; }

/* footer mark — draws itself when scrolled into view */
.vh-mark--footer{ width:200px; margin-bottom:1.1em; }
.footer-brand.in-view .vh-mark--footer .logo-shape{ animation:logo-draw 1.4s cubic-bezier(.62,.02,.34,1) .1s forwards, logo-fill .6s ease 1.2s forwards; }
.footer-brand.in-view .vh-mark--footer .logo-shape.s2{ animation-delay:.35s, 1.45s; }
.footer-brand.in-view .vh-mark--footer .logo-word.l1{ animation:logo-word .8s ease 1s forwards; }
.footer-brand.in-view .vh-mark--footer .logo-word.l2{ animation:logo-word .8s ease 1.2s forwards; }

@keyframes logo-draw{
  to{ stroke-dashoffset:0; }
}
@keyframes logo-fill{
  to{ fill-opacity:1; }
}
@keyframes logo-word{
  from{ opacity:0; }
  to{ opacity:1; }
}
.nav-links{
  display:flex;
  gap:clamp(1.1em,2.4vw,2.1em);
}
.nav-links a{
  font-size:.86rem;
  font-weight:600;
  text-decoration:none;
  color:var(--paper);
  position:relative;
  padding:.2em 0;
  transition:color .2s ease;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:-2px;
  height:1px;
  background:var(--rust);
  transition:right .25s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after,
.nav-links a.is-active::after{ right:0; }
.nav-links a.is-active{ color:var(--ink); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px;
  height:40px;
  background:transparent;
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  margin:0 auto;
  background:var(--ink);
  border-radius:2px;
  transition:transform .35s ease, opacity .25s ease;
}
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed;
  inset:0;
  z-index:99;
  background:var(--bg-warm);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.mobile-menu.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .35s ease, transform .35s ease, visibility 0s linear 0s;
}
.mobile-menu ul{
  text-align:center;
}
.mobile-menu li{ margin:0 0 1.4em; }
.mobile-menu a{
  font-family:'Inter',sans-serif;
  font-size:clamp(1.5rem,6vw,2rem);
  text-decoration:none;
  color:var(--paper);
  opacity:0;
  transform:translateY(14px);
  display:inline-block;
  transition:color .2s ease;
}
.mobile-menu.is-open a{
  animation:menuItemIn .5s ease forwards;
}
.mobile-menu.is-open li:nth-child(1) a{ animation-delay:.08s; }
.mobile-menu.is-open li:nth-child(2) a{ animation-delay:.14s; }
.mobile-menu.is-open li:nth-child(3) a{ animation-delay:.20s; }
.mobile-menu.is-open li:nth-child(4) a{ animation-delay:.26s; }
.mobile-menu.is-open li:nth-child(5) a{ animation-delay:.32s; }
.mobile-menu.is-open li:nth-child(6) a{ animation-delay:.38s; }
.mobile-menu.is-open li:nth-child(7) a{ animation-delay:.44s; }
.mobile-menu a:hover{ color:var(--rust); }
@keyframes menuItemIn{
  to{ opacity:1; transform:translateY(0); }
}

/* ============================================================
   News ticker (Arabic)
   ============================================================ */
.news-ticker{
  background:var(--bg-warm);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  white-space:nowrap;
  padding:.55em 0;
}
.news-ticker:hover .ticker-track{
  animation-play-state:paused;
}
.ticker-track{
  display:inline-flex;
  align-items:center;
  animation:tickerScroll 38s linear infinite;
  will-change:transform;
}
.ticker-item{
  direction:rtl;
  font-family:'Cairo',sans-serif;
  font-size:.82rem;
  font-weight:500;
  color:var(--paper);
  padding:0 2.2em;
}
.ticker-dot{
  color:var(--rust);
  font-size:.6rem;
}
@keyframes tickerScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ============================================================
   Trust bar
   ============================================================ */
.trust-bar{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:clamp(1em,3vw,2.6em);
  padding:.75em 6vw;
  background:var(--bg);
  border-bottom:1px solid var(--line-soft);
}
.trust-item{
  display:flex;
  align-items:center;
  gap:.5em;
  font-size:.74rem;
  letter-spacing:.02em;
  color:var(--muted);
  white-space:nowrap;
}
.trust-item svg{ width:14px; height:14px; flex-shrink:0; color:var(--rust); }
.trust-item strong{ color:var(--paper); font-weight:600; }

/* ============================================================
   Hero (home)
   ============================================================ */
.hero{
  position:relative;
  height:clamp(480px,84vh,800px);
  overflow:hidden;
  box-shadow:inset 0 0 8vw 1vw rgba(0,0,0,.5);
}
.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 62%;
  animation:heroZoom 22s ease-out forwards;
}
@keyframes heroZoom{
  from{ transform:scale(1.12); }
  to{ transform:scale(1); }
}
.hero-scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.6) 38%, rgba(5,5,5,.08) 68%, transparent 82%);
}
.hero-content{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  max-width:760px;
  margin:0 auto;
  padding:0 6vw 3.8em;
  text-align:center;
}
.hero-content > *{
  opacity:0;
  transform:translateY(22px);
  animation:heroIn .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-content .eyebrow{ animation-delay:.15s; }
.hero-content .headline{ animation-delay:.32s; }
.hero-content .lede{ animation-delay:.5s; }
.hero-content .hero-actions{ animation-delay:.68s; }
@keyframes heroIn{
  to{ opacity:1; transform:translateY(0); }
}
.headline{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:clamp(2.3rem,5.8vw,3.9rem);
  line-height:1.16;
  letter-spacing:-.01em;
  margin:0 0 .7em;
  color:var(--ink);
}
.headline em{ font-style:italic; font-weight:500; color:var(--paper); }
.lede{
  font-size:clamp(.98rem,1.8vw,1.08rem);
  line-height:1.7;
  color:var(--paper);
  max-width:52ch;
  margin:0 auto;
}
.hero-actions{
  display:flex;
  gap:1em;
  justify-content:center;
  margin-top:1.6em;
  flex-wrap:wrap;
}

/* ============================================================
   Sky hero (home) — light sky, one big headline, and a building
   that rises from the bottom as you scroll (--p, set by script.js)
   ============================================================ */
.site-header--sky{
  position:fixed;
  left:0; right:0;
}

/* the hero is taller than the screen: the stage stays pinned while
   the page scrolls, and that scroll (--p, 0 → 1) zooms into the building */
.sky-hero{
  --p:0;
  position:relative;
  height:300vh;
}
.sky-stage{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  min-height:600px;
  overflow:hidden;
  background:#111418; /* the photo's sky at its top edge */
  /* toward the end of the zoom the bottom of the scene melts into the
     page background instead of ending on a hard edge */
  -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - var(--p) * 40%), transparent 100%);
          mask-image:linear-gradient(180deg, #000 calc(100% - var(--p) * 40%), transparent 100%);
}
/* the sky and the building are two layers of the same photo, so they
   line up exactly at rest; the sky moves slower than the building */
.sky-clouds,
.sky-building-wrap{
  position:absolute;
  inset:0;
}
.sky-clouds{
  transform:translateY(calc(var(--p) * -5%)) scale(calc(1 + var(--p) * .45));
  transform-origin:66% 45%;
}
.sky-bg,
.sky-building{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:72% 100%;
}
/* the clouds drift slowly on their own */
.sky-bg{ animation:skyDrift 26s ease-in-out infinite alternate; }
@keyframes skyDrift{
  from{ transform:scale(1.05) translateX(-1.6%); }
  to{ transform:scale(1.05) translateX(1.6%); }
}
/* as the zoom finishes the scene dims (never to full black) and its
   bottom edge fades into the page below */
.sky-stage::after{
  content:"";
  position:absolute; inset:0;
  z-index:3;
  background:rgba(5,5,5,.55);
  opacity:clamp(0, (var(--p) - .4) * 2.6, 1);
  pointer-events:none;
}
/* ...and goes out of focus behind the logo */
.sky-clouds,
.sky-building-wrap{
  filter:blur(clamp(0px, (var(--p) - .42) * 44px, 14px));
}
.sky-content{
  position:relative;
  z-index:2;
  padding:clamp(7.5em,24vh,14em) 6vw 0;
  text-align:left;
  transform:translateY(calc(var(--p) * -60%));
  opacity:calc(1 - var(--p) * 3);
}
/* 1. the words arrive */
.sky-content > *{
  opacity:0;
  transform:translateY(28px);
  animation:heroIn .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.sky-content .sky-title{ animation-delay:.1s; }
.sky-content .sky-sub{ animation-delay:.35s; }
.sky-content .sky-btn{ animation-delay:.55s; }
.sky-title{
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:clamp(2.7rem,6.6vw,7rem);
  line-height:.95;
  letter-spacing:-.055em;
  max-width:6.4em; /* "More Than / Real Estate" on two lines */
  margin:0 0 .32em;
  /* solid on the left, softening toward the building */
  background:linear-gradient(90deg, #f7f7f5 55%, rgba(247,247,245,.5) 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}
.sky-sub{
  font-size:clamp(1rem,1.7vw,1.4rem);
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.45;
  margin:0 0 1.6em;
  max-width:24em;
  color:var(--muted);
}
.sky-sub strong{ font-weight:600; color:var(--ink); }
.sky-btn{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding:.95em 1.6em;
  border-radius:999px;
  background:var(--brand);
  color:#0b0b0c;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  transition:background .25s ease, gap .25s ease;
}
.sky-btn svg{ width:18px; height:18px; color:#0b0b0c; }
.sky-btn:hover{ background:var(--amber, #f6ad5a); gap:1em; }
.sky-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
/* 3. scrolling zooms into the building, faster than the sky behind it */
.sky-building-wrap{
  z-index:1;
  transform:scale(calc(1 + var(--p) * 2.6));
  transform-origin:64% 72%;
}
/* 2. then the building rises from below; on wide screens the whole
   photo shows, sitting on the bottom edge */
.sky-building{
  object-fit:contain;
  object-position:100% 100%;
  animation:towerRise 1.5s cubic-bezier(.2,.7,.2,1) .95s both;
}
@keyframes towerRise{
  from{ transform:translateY(60%); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}
/* 4. the VH mark draws itself over the blurred building: a fine
   outline traces the left shape, then the right one, then the whole
   mark fills in */
.sky-logo{
  position:absolute;
  left:50%; top:50%;
  z-index:4;
  width:min(28vw,280px);
  height:auto;
  overflow:visible;
  transform:translate(-50%,-50%) scale(calc(.92 + var(--p) * .08));
  pointer-events:none;
}
.sky-logo .contour{
  fill:none;
  stroke:var(--logo);
  stroke-width:1.5;
  stroke-linejoin:miter;
  stroke-dasharray:100;
  stroke-dashoffset:calc(-100 + clamp(0, (var(--p) - .48) * 714, 100));
}
.sky-logo .contour.second{
  stroke-dashoffset:calc(-100 + clamp(0, (var(--p) - .62) * 714, 100));
}
.sky-logo .finish{
  fill:var(--logo);
  opacity:calc((var(--p) - .78) * 12);
}
@media (max-width:720px){
  .sky-content{ padding-top:clamp(6.5em,16vh,9em); }
  .sky-building-wrap{ top:40%; }
  .sky-bg, .sky-building{ object-fit:cover; object-position:74% 100%; }
  .sky-logo{ width:42vw; }
}
@media (prefers-reduced-motion: reduce){
  .sky-hero{ height:auto; }
  .sky-logo{ display:none; }
  .sky-content > *, .sky-building, .sky-bg{ animation:none; opacity:1; transform:none; }
  .sky-content{ transform:none; opacity:1; }
}

/* ---- inner page banner: just the title on the site background ---- */
.page-banner{
  position:relative;
  padding:clamp(8.5em,20vh,12em) 0 clamp(1.5em,4vh,2.6em);
}
/* the property page's own picture dissolves into the background at the bottom */
.project-hero > img,
.project-hero .hero-scrim{
  -webkit-mask-image:linear-gradient(180deg, #000 50%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 50%, transparent 100%);
}
.page-banner .banner-content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  padding:0 6vw;
  text-align:center;
  max-width:760px;
  margin:0 auto;
}
.page-banner .section-title{ margin-bottom:.2em; }

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ============================================================
   Values strip (reused across pages)
   ============================================================ */
.values{
  display:flex;
  justify-content:center;
  gap:0;
  flex-wrap:wrap;
  padding:4.2em 6vw;
}
.value{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8em;
  padding:0 clamp(1em,3.4vw,2.4em);
  border-right:1px solid rgba(255,255,255,.1);
}
.value:last-child{ border-right:none; }
.value svg{ width:32px; height:32px; }
.value span{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ============================================================
   Flip cards (Apartments / Villas / Buildings)
   ============================================================ */
.flip-section{ padding:5em 0 1em; }
.flip-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2em,2.6vw,2em);
  padding:0 6vw;
}
.flip-card{
  perspective:1600px;
  height:clamp(360px,42vw,440px);
  cursor:pointer;
}
.flip-card-inner{
  position:relative;
  width:100%; height:100%;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
  transform-style:preserve-3d;
  border-radius:18px;
  box-shadow:var(--shadow);
}
.flip-card{ cursor:pointer; }
.flip-card.is-flipped .flip-card-inner{ transform:rotateY(180deg); }
.flip-card:focus-visible{ outline:2px solid var(--rust); outline-offset:4px; border-radius:18px; }
/* small "flip me" badge in the corner of the front face */
.flip-card-front::before{
  content:"";
  position:absolute;
  top:14px; right:14px;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(5,5,5,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5823b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.3-4.9L4 8'/%3E%3Cpath d='M4 3v5h5'/%3E%3Cpath d='M4 13a8 8 0 0 0 14.3 4.9L20 16'/%3E%3Cpath d='M20 21v-5h-5'/%3E%3C/svg%3E") center/18px no-repeat;
  z-index:2;
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), border-color .3s;
}
.flip-card:hover .flip-card-front::before{ transform:rotate(180deg); border-color:rgba(229,130,59,.6); }
html[dir="rtl"] .flip-card-front::before{ right:auto; left:14px; }
.flip-card-front, .flip-card-back{
  position:absolute; inset:0;
  backface-visibility:hidden;
  border-radius:18px;
  overflow:hidden;
}
.flip-card-front img{
  width:100%; height:100%; object-fit:cover;
}
.flip-card-front::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.25) 55%, rgba(5,5,5,.05) 75%);
}
.flip-card-front .flip-label{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:1;
  padding:1.6em;
}
.flip-card-front .flip-label .eyebrow{ margin-bottom:.4em; }
.flip-card-front .flip-label h3{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:clamp(1.3rem,2.4vw,1.6rem);
  margin:0;
  color:var(--ink);
}
.flip-card-back{
  transform:rotateY(180deg);
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:2em;
  text-align:center;
}
.flip-card-back h3{
  font-family:'Inter',sans-serif;
  font-size:1.3rem;
  margin:0 0 .5em;
}
.flip-card-back p{
  color:var(--paper);
  font-size:.92rem;
  line-height:1.6;
  margin:0 0 1em;
}
.flip-stats{
  display:flex;
  justify-content:center;
  gap:1.4em;
  margin:0 0 1.4em;
}
.flip-stats div{
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.flip-stats strong{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:1.1rem;
  color:var(--gold);
  font-style:normal;
}

/* ============================================================
   Services grid
   ============================================================ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.6em;
  padding:0 6vw;
}
.service-card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:16px;
  padding:2.2em 1.8em;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:var(--line);
  box-shadow:var(--shadow);
}
.service-card svg{ width:34px; height:34px; margin-bottom:1em; }
.service-card h3{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:1.2rem;
  margin:0 0 .5em;
  color:var(--ink);
}
.service-card p{
  color:var(--paper);
  font-size:.9rem;
  line-height:1.65;
  margin:0;
}
/* numbered cards (core values, why choose us) */
.service-card .value-num{
  font-family:'Inter',sans-serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--rust);
  margin:0 0 .4em;
}
/* 7 values: the odd last card sits centred under the grid */
.values-grid .service-card:last-child:nth-child(3n+1){ grid-column:2; }
@media (max-width:960px){
  .values-grid .service-card:last-child:nth-child(3n+1){ grid-column:auto; }
}

/* ============================================================
   Listing grid (apartments / villas / buildings pages)
   ============================================================ */
.listing-section{ padding:4.5em 0 5em; }
.listing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.8em;
  padding:0 6vw;
}
.listing-card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:16px;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.listing-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
  border-color:var(--line);
}
.listing-photo{
  position:relative;
  display:block;
  height:230px;
  overflow:hidden;
}
.listing-photo img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease;
}
.listing-card:hover .listing-photo img{ transform:scale(1.06); }
.listing-badge{
  position:absolute;
  top:.9em; left:.9em;
  background:rgba(5,5,5,.78);
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.4em .8em;
  border-radius:999px;
}
.listing-body{ padding:1.5em 1.6em 1.7em; }
.listing-body h3{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:1.15rem;
  margin:0 0 .25em;
  color:var(--ink);
}
.listing-location{
  font-size:.78rem;
  color:var(--muted);
  margin:0 0 1em;
  letter-spacing:.03em;
}
.listing-price{
  font-family:'Inter',sans-serif;
  font-size:1.25rem;
  color:var(--gold);
  margin:0 0 1em;
}
.listing-specs{
  display:flex;
  gap:1.1em;
  margin:0 0 1.4em;
  padding:0;
  border-top:1px solid var(--line-soft);
  padding-top:1.1em;
}
.listing-specs span{
  font-size:.76rem;
  color:var(--paper);
}
.listing-specs strong{ color:var(--ink); }
.listing-cta{
  display:block;
  text-align:center;
  width:100%;
}

/* ============================================================
   Stats strip (about page)
   ============================================================ */
.stats-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.4em;
  padding:0 6vw;
}
.stat{
  text-align:center;
  padding:2em 1em;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:14px;
}
.stat strong{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:clamp(1.8rem,3.4vw,2.3rem);
  color:var(--gold);
  margin-bottom:.2em;
}
.stat span{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ============================================================
   Story / two-column blocks (about page)
   ============================================================ */
.story{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2em,5vw,4em);
  align-items:center;
  padding:5em 6vw;
}
.story img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:18px;
  box-shadow:var(--shadow);
}
.story .btn{ margin-top:.4em; }
.story-sub{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rust);
  margin:1.4em 0 .5em;
}
.story .section-lede{ margin-bottom:1.2em; }
.story.reverse{ direction:rtl; }
.story.reverse > *{ direction:ltr; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{
  position:relative;
  padding:5em 6vw;
  text-align:center;
  background:linear-gradient(180deg, transparent 0%, rgba(5,5,5,.35) 30%, rgba(5,5,5,.35) 70%, transparent 100%);
}
.cta-band .section-title{ margin-bottom:.4em; }
.cta-band .section-lede{ margin:0 auto 1.8em; }

/* ============================================================
   Footer
   ============================================================ */
footer{
  background:linear-gradient(180deg, transparent 0%, rgba(5,5,5,.7) 35%, rgba(5,5,5,.9) 100%);
  border-top:1px solid;
  border-image:linear-gradient(90deg, transparent, var(--rust-deep) 30%, var(--rust-deep) 70%, transparent) 1;
  padding:4em 6vw 2.4em;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2em;
  padding-bottom:2.6em;
  border-bottom:1px solid var(--line-soft);
}
.footer-brand img{ width:170px; margin-bottom:1em; }
.footer-brand .vh-mark--footer{ margin-bottom:1.1em; }
.footer-brand p{
  color:var(--muted);
  font-size:.86rem;
  line-height:1.6;
  max-width:34ch;
}
.footer-col h4{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rust);
  margin:0 0 1.1em;
}
.footer-col ul li{ margin-bottom:.7em; }
.footer-col a{
  color:var(--paper);
  text-decoration:none;
  font-size:.88rem;
  transition:color .2s ease;
}
.footer-col a:hover{ color:var(--rust); }
.sign{
  margin:2em 0 0;
  font-size:.68rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#5c574f;
  text-align:center;
}

/* ============================================================
   Chatbot widget (WhatsApp launcher + FAQ panel)
   ============================================================ */
.chatbot{
  position:fixed;
  right:clamp(16px,4vw,28px);
  bottom:clamp(16px,4vw,28px);
  z-index:70;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
.chatbot-launcher{
  display:flex;
  align-items:center;
  gap:.6em;
  padding:.8em 1.25em .8em 1em;
  background:#171310;
  border:1px solid var(--rust-deep);
  border-radius:999px;
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:.85rem;
  font-weight:500;
  cursor:pointer;
  box-shadow:0 14px 32px -10px rgba(0,0,0,.6);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.chatbot-launcher:hover{
  transform:translateY(-2px);
  background:var(--rust-deep);
  border-color:var(--rust);
}
.chatbot-launcher:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }
.chatbot-launcher svg{ width:20px; height:20px; flex-shrink:0; }
.chatbot-launcher .close-icon{ display:none; }
.chatbot.is-open .chatbot-launcher .chat-icon{ display:none; }
.chatbot.is-open .chatbot-launcher .close-icon{ display:block; }

.chatbot-panel{
  position:absolute;
  bottom:calc(100% + 14px);
  right:0;
  width:min(360px, 88vw);
  max-height:min(72vh, 560px);
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  opacity:0;
  transform:translateY(16px) scale(.97);
  transform-origin:bottom right;
  pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
  overflow:hidden;
}
.chatbot.is-open .chatbot-panel{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.chatbot-header{
  display:flex;
  align-items:center;
  gap:.8em;
  padding:1em 1.2em;
  background:var(--bg-warm);
  border-bottom:1px solid var(--line-soft);
  flex-shrink:0;
}
.chatbot-avatar{
  width:36px; height:36px;
  border-radius:50%;
  background:var(--rust);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.chatbot-avatar svg{ width:18px; height:18px; }
.chatbot-header h4{
  margin:0;
  font-family:'Inter',sans-serif;
  font-size:1rem;
  color:var(--ink);
}
.chatbot-header p{
  margin:0;
  font-size:.72rem;
  color:var(--muted);
}
.chatbot-messages{
  padding:1.1em 1.2em;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:.7em;
  flex-grow:1;
}
.msg{
  max-width:88%;
  padding:.7em .95em;
  border-radius:14px;
  font-size:.85rem;
  line-height:1.55;
  opacity:0;
  transform:translateY(8px);
  animation:msgIn .35s ease forwards;
}
@keyframes msgIn{ to{ opacity:1; transform:translateY(0); } }
.msg-bot{
  align-self:flex-start;
  background:var(--surface-2);
  color:var(--paper);
  border-bottom-left-radius:4px;
}
.msg-user{
  align-self:flex-end;
  background:var(--rust);
  color:#fff;
  border-bottom-right-radius:4px;
}
.chatbot-quick{
  padding:0 1.2em 1em;
  display:flex;
  flex-direction:column;
  gap:.5em;
  flex-shrink:0;
}
.quick-reply{
  text-align:left;
  background:transparent;
  border:1px solid var(--line-soft);
  color:var(--paper);
  border-radius:10px;
  padding:.6em .85em;
  font-size:.8rem;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.quick-reply:hover{
  border-color:var(--rust);
  color:var(--ink);
  background:rgba(229,130,59,.1);
}
.chatbot-footer{
  padding:.9em 1.2em;
  border-top:1px solid var(--line-soft);
  flex-shrink:0;
}
.whatsapp-handoff{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  width:100%;
  padding:.75em 1em;
  background:#25D366;
  color:#050505;
  border-radius:10px;
  text-decoration:none;
  font-size:.85rem;
  font-weight:600;
  transition:transform .2s ease, filter .2s ease;
}
.whatsapp-handoff:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.whatsapp-handoff svg{ width:18px; height:18px; }

/* ============================================================
   Contact page
   ============================================================ */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2em,5vw,4em);
  padding:5em 6vw;
  align-items:start;
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:1.1em;
}
.form-row{
  display:flex;
  flex-direction:column;
  gap:.5em;
}
.form-row label{
  font-size:.76rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.form-row input, .form-row textarea{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:10px;
  padding:.9em 1em;
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:.95rem;
  resize:vertical;
  transition:border-color .2s ease;
}
.form-row input:focus, .form-row textarea:focus{
  outline:none;
  border-color:var(--rust);
}
.contact-info{
  display:flex;
  flex-direction:column;
  gap:1.6em;
  /* stays in view on the right while the form on the left scrolls past */
  position:sticky;
  top:100px;
}
@media (max-width:960px){
  .contact-info{ position:static; }
}
.contact-info-card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:1.6em 1.8em;
}
.contact-info-card h4{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rust);
  margin:0 0 .6em;
}
.contact-info-card p, .contact-info-card a{
  color:var(--paper);
  font-size:.95rem;
  text-decoration:none;
  line-height:1.6;
  margin:0;
}
.contact-info-card a:hover{ color:var(--rust); }

/* ============================================================
   "Coming soon" modal (Apartments / Villas / Buildings)
   ============================================================ */
.cs-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  padding:clamp(1.2rem,5vw,3rem);
  background:rgba(5,5,5,.6);
  -webkit-backdrop-filter:blur(14px) saturate(.85);
  backdrop-filter:blur(14px) saturate(.85);
  opacity:0;
  visibility:hidden;
  transition:opacity .32s ease, visibility 0s linear .32s;
}
.cs-modal.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity .32s ease, visibility 0s linear 0s;
}
.cs-panel{
  position:relative;
  width:min(100%,32rem);
  padding:clamp(2.1rem,5vw,2.9rem);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  text-align:center;
  transform:translateY(16px) scale(.97);
  transition:transform .38s cubic-bezier(.2,.8,.25,1);
}
.cs-modal.is-open .cs-panel{ transform:none; }
.cs-close{
  position:absolute;
  top:.85rem;
  right:.85rem;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  background:transparent;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  color:var(--paper);
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.cs-close:hover{ border-color:var(--rust); color:var(--rust); transform:rotate(90deg); }
.cs-close:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }
.cs-close svg{ width:15px; height:15px; }
.cs-mark{ width:210px; margin:0 auto 1.6em; }
.cs-panel .eyebrow{ margin-bottom:.7em; }
.cs-title{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:clamp(1.7rem,4.2vw,2.2rem);
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 .55em;
  color:var(--ink);
}
.cs-text{
  color:var(--paper);
  font-size:.98rem;
  line-height:1.7;
  margin:0 auto 1.9em;
  max-width:34ch;
}
.cs-actions{
  display:flex;
  gap:.7em;
  justify-content:center;
  flex-wrap:wrap;
}

/* the mark draws itself each time the modal opens */
.cs-modal.is-open .cs-mark .logo-shape{ animation:logo-draw 1s cubic-bezier(.62,.02,.34,1) .1s forwards, logo-fill .5s ease .95s forwards; }
.cs-modal.is-open .cs-mark .logo-shape.s2{ animation-delay:.3s, 1.15s; }
.cs-modal.is-open .cs-mark .logo-word.l1{ animation:logo-word .6s ease .8s forwards; }
.cs-modal.is-open .cs-mark .logo-word.l2{ animation:logo-word .6s ease .95s forwards; }

@media (max-width:420px){
  .cs-actions .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   Filter bar (property pages)
   ============================================================ */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:.9em clamp(.8em,1.6vw,1.3em);
  margin:0 6vw 1.1em;
  padding:1.2em clamp(1em,2vw,1.5em);
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:16px;
}
.filter-field{ display:flex; flex-direction:column; gap:.45em; min-width:9.5rem; flex:1 1 9.5rem; }
.filter-field label{
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.filter-field select{
  appearance:none;
  width:100%;
  padding:.7em 2.2em .7em .9em;
  background:var(--surface-2);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  color:var(--ink);
  font:inherit;
  font-size:.88rem;
  cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 1.1em) 55%, calc(100% - .75em) 55%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  transition:border-color .2s ease;
}
.filter-field select:hover{ border-color:var(--rust); }
.filter-field select:focus-visible{ outline:2px solid var(--rust); outline-offset:2px; }
.filter-reset{
  padding:.7em 1.2em;
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:var(--paper);
  font:inherit;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.filter-reset:hover{ border-color:var(--rust); color:var(--rust); }
.filter-count{
  margin:0 6vw 1.6em;
  color:var(--muted);
  font-size:.82rem;
  letter-spacing:.02em;
}

/* ============================================================
   Area pages
   ============================================================ */
.area-index-map{ margin:0 6vw 1.8em; min-height:360px; }
.area-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4em;
  padding:0 6vw;
}
.area-card{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  color:var(--ink);
  transition:transform .25s ease, border-color .25s ease;
}
.area-card:hover{ transform:translateY(-4px); border-color:var(--rust); }
.area-card-photo{ display:block; aspect-ratio:16/10; overflow:hidden; }
.area-card-photo img{ width:100%; height:100%; object-fit:cover; }
.area-card-body{ padding:1.1em 1.25em 1.3em; }
.area-card-name{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:1.15rem;
  font-weight:600;
  margin-bottom:.25em;
}
.area-card-meta{ display:block; color:var(--muted); font-size:.8rem; }
.area-detail-layout{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:clamp(1.2em,2.6vw,2em);
  margin:0 6vw 2.2em;
  align-items:stretch;
}
.area-detail-layout .map-frame{ min-height:340px; }
.area-summary{ display:flex; flex-direction:column; gap:.7em; }
.area-stat{
  display:flex;
  align-items:baseline;
  gap:.6em;
  padding:1em 1.2em;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:14px;
  text-decoration:none;
  color:var(--ink);
  transition:border-color .2s ease, background .2s ease;
}
.area-stat:hover{ border-color:var(--rust); background:var(--surface-2); }
.area-stat strong{ font-family:'Inter',sans-serif; font-size:1.5rem; color:var(--rust); }
.area-stat span{ font-size:.86rem; color:var(--paper); }

/* ============================================================
   Project page
   ============================================================ */
.project-hero{
  position:relative;
  min-height:clamp(340px,52vh,520px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.project-hero > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.project-hero .banner-content{ position:relative; z-index:1; padding:0 6vw 3em; }
.project-hero .listing-badge{ position:static; display:inline-block; margin-bottom:.8em; }
.project-area{ color:var(--paper); margin:.2em 0 .1em; font-size:1rem; }
.project-price{
  font-family:'Inter',sans-serif;
  font-size:clamp(1.5rem,3.4vw,2rem);
  color:var(--gold);
  margin:.2em 0 0;
}
.project-section{ padding:3.6em 0 5em; }
.project-layout{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:clamp(1.4em,3vw,2.6em);
  padding:0 6vw;
  align-items:start;
}
.project-h2{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:clamp(1.25rem,2.4vw,1.6rem);
  margin:0 0 .8em;
  color:var(--ink);
}
.project-main .project-h2:not(:first-child){ margin-top:2.2em; }
.project-main .section-lede{ margin-bottom:1.2em; }
.project-main .section-lede a{ color:var(--rust); text-decoration:none; font-weight:600; }
.project-main .section-lede a:hover{ text-decoration:underline; }
.spec-table{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:14px;
  overflow:hidden;
}
.spec-cell{
  display:flex;
  flex-direction:column;
  gap:.2em;
  padding:1.1em 1.2em;
  background:var(--surface);
}
.spec-cell strong{ font-family:'Inter',sans-serif; font-size:1.35rem; color:var(--ink); }
/* not uppercased: "m²" must keep its lowercase m */
.spec-cell span{ font-size:.74rem; letter-spacing:.1em; color:var(--muted); }
.project-map{ min-height:300px; }
.project-side{ position:sticky; top:7em; }
.calc-card{
  padding:clamp(1.4em,3vw,1.9em);
  background:linear-gradient(165deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.calc-title{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:1.25rem;
  margin:0 0 1.2em;
  color:var(--ink);
}
.calc-row{ display:flex; align-items:center; justify-content:space-between; gap:1em; margin-bottom:.8em; }
.calc-row label{ font-size:.86rem; color:var(--paper); }
.calc-row select{
  appearance:none;
  padding:.55em 2em .55em .8em;
  background:var(--bg-warm);
  border:1px solid rgba(255,255,255,.16);
  border-radius:9px;
  color:var(--ink);
  font:inherit;
  font-size:.85rem;
  cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - .95em) 55%, calc(100% - .62em) 55%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.calc-out{ margin:1.4em 0 0; padding:1.1em 0 0; border-top:1px solid var(--line-soft); }
.calc-out div{ display:flex; justify-content:space-between; gap:1em; padding:.35em 0; }
.calc-out dt{ color:var(--muted); font-size:.84rem; }
.calc-out dd{ margin:0; font-size:.9rem; font-weight:600; }
.calc-out .calc-total{ margin-top:.5em; padding-top:.7em; border-top:1px solid var(--line-soft); }
.calc-out .calc-total dt{ color:var(--paper); }
.calc-out .calc-total dd{ font-family:'Inter',sans-serif; font-size:1.3rem; color:var(--rust); font-weight:600; }
.calc-note{ margin:1em 0 1.3em; color:var(--muted); font-size:.72rem; line-height:1.6; }
.calc-cta{ width:100%; justify-content:center; }
#projRelatedBlock{ margin-top:3.4em; padding:0 6vw; }
#projRelatedBlock .listing-grid{ padding:0; }

@media (max-width:960px){
  .area-grid{ grid-template-columns:repeat(2,1fr); }
  .project-layout{ grid-template-columns:1fr; }
  .project-side{ position:static; }
  .area-detail-layout{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .area-grid{ grid-template-columns:1fr; }
  .filter-field{ flex:1 1 100%; }
  .filter-reset{ width:100%; }
}

/* ============================================================
   Locations map
   ============================================================ */
.locations-section{ padding:4.5em 0 5em; }
.locations-layout{
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:clamp(1.2em,2.6vw,2em);
  padding:0 6vw;
  align-items:stretch;
}
.map-frame{
  position:relative;
  min-height:420px;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow);
}
/* every map container fills its frame (home, area and project maps) */
.map-frame > div{ position:absolute; inset:0; }
.map-fallback{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  margin:0;
  padding:2em;
  text-align:center;
  color:var(--muted);
  font-size:.9rem;
}
/* the map hides its own fallback once it is running */
.map-frame.is-ready .map-fallback{ display:none; }
/* pull the light OSM tiles into the site's dark palette */
.map-frame .leaflet-tile-pane{ filter:invert(1) hue-rotate(180deg) saturate(.45) brightness(.78) contrast(1.05); }
/* the home map is satellite imagery: keep its real colours, just a touch darker to sit in the page */
.map-frame--satellite .leaflet-tile-pane{ filter:brightness(.85) saturate(.9); }
.map-frame .leaflet-container{ background:#0f1113; font-family:'Inter',sans-serif; }
/* OpenStreetMap's licence requires this credit to stay visible */
.map-frame .leaflet-control-attribution{
  background:rgba(5,5,5,.82);
  color:var(--paper);
  font-size:.68rem;
  padding:.25em .6em;
}
.map-frame .leaflet-control-attribution a{ color:var(--paper); }
.map-frame .leaflet-control-zoom a{
  background:var(--surface-2);
  color:var(--ink);
  border-color:rgba(255,255,255,.12);
}
.map-frame .leaflet-control-zoom a:hover{ background:var(--rust-deep); color:#fff; }
.map-frame .leaflet-popup-content-wrapper,
.map-frame .leaflet-popup-tip{
  background:var(--surface-2);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.map-frame .leaflet-popup-content{ margin:.9em 1.1em; font-size:.86rem; line-height:1.6; }
.map-frame .leaflet-popup-content strong{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:1.05rem;
  font-weight:600;
  margin-bottom:.2em;
}
.map-popup-meta{ color:var(--muted); font-size:.78rem; }
.map-popup-links{ display:flex; flex-wrap:wrap; gap:.5em .9em; margin-top:.6em; }
/* .map-frame prefix so this beats Leaflet's own link colour */
.map-frame .map-popup-links a{
  color:var(--rust);
  font-weight:600;
  font-size:.78rem;
  text-decoration:none;
}
.map-frame .map-popup-links a:hover{ color:var(--ink); text-decoration:underline; }
.map-pin{
  display:block;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--brand);
  border:2px solid #fff;
  box-shadow:0 0 0 6px rgba(229,130,59,.22);
}
.location-list{
  display:flex;
  flex-direction:column;
  gap:.6em;
  max-height:520px;
  overflow-y:auto;
}
.location-item{
  display:block;
  width:100%;
  padding:1em 1.15em;
  text-align:start;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:14px;
  color:var(--ink);
  font:inherit;
  cursor:pointer;
  transition:border-color .22s ease, background .22s ease, transform .22s ease;
}
.location-item:hover{ border-color:var(--rust); background:var(--surface-2); transform:translateY(-2px); }
.location-item.is-active{ border-color:var(--rust); background:var(--surface-2); }
.location-item:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }
.location-name{
  display:block;
  font-weight:600;
  font-size:.98rem;
  margin-bottom:.25em;
}
.location-meta{
  display:block;
  color:var(--muted);
  font-size:.78rem;
}

@media (max-width:860px){
  .locations-layout{ grid-template-columns:1fr; }
  .map-frame{ min-height:340px; }
  .location-list{ max-height:none; }
}

/* ============================================================
   Language button (EN / AR)
   ============================================================ */
.nav-links{ margin-inline-start:auto; }
.lang-btn{
  display:inline-flex;
  align-items:center;
  margin-inline-start:clamp(1em,2.2vw,1.8em);
  padding:.5em 1.05em;
  background:transparent;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:var(--paper);
  font-family:'Cairo','Inter',sans-serif;
  font-size:.78rem;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.lang-btn:hover{ border-color:var(--rust); color:var(--ink); background:rgba(229,130,59,.12); }
.lang-btn:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }

/* ============================================================
   Arabic layout (RTL)
   ============================================================ */
html[dir="rtl"] body{ font-family:'Cairo','Inter',sans-serif; }
html[dir="rtl"] .headline,
html[dir="rtl"] .section-title,
html[dir="rtl"] .cs-title,
html[dir="rtl"] .stay,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4{
  font-family:'Cairo',sans-serif;
  font-weight:600;
  letter-spacing:0;
}
/* Latin display face has no Arabic equivalent */
html[dir="rtl"] .headline em{ font-style:normal; }
/* Arabic is cursive — letter-spacing breaks the joins between letters */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .btn,
html[dir="rtl"] .nav-links a,
html[dir="rtl"] .mobile-menu a,
html[dir="rtl"] .value span,
html[dir="rtl"] .flip-label,
html[dir="rtl"] .listing-badge,
html[dir="rtl"] .listing-specs,
html[dir="rtl"] .footer-col h4,
html[dir="rtl"] .sign,
html[dir="rtl"] .trust-item,
html[dir="rtl"] .stat span,
html[dir="rtl"] .quick-reply,
html[dir="rtl"] .lang-btn{ letter-spacing:0; }
/* Arabic needs a little more leading to stay readable */
html[dir="rtl"] p,
html[dir="rtl"] .lede,
html[dir="rtl"] .section-lede,
html[dir="rtl"] .cs-text{ line-height:1.9; }
/* the wordmark stays Latin and left-to-right */
html[dir="rtl"] .vh-mark{ direction:ltr; }
/* let each of these pick its own direction from its first strong character,
   so phone numbers, prices and emails don't get re-ordered by bidi */
html[dir="rtl"] .contact-info-card a,
html[dir="rtl"] .contact-info-card p,
html[dir="rtl"] .listing-price,
html[dir="rtl"] .listing-specs,
html[dir="rtl"] .listing-location,
html[dir="rtl"] .trust-item,
html[dir="rtl"] .flip-stats,
html[dir="rtl"] .stat{ unicode-bidi:plaintext; }
/* mirror the pinned elements */
html[dir="rtl"] .chatbot{
  right:auto;
  left:clamp(16px,4vw,28px);
  align-items:flex-start;
}
html[dir="rtl"] .chatbot-panel{ right:auto; left:0; }
html[dir="rtl"] .cs-close{ right:auto; left:.85rem; }
/* the nav underline should grow from the right */
html[dir="rtl"] .nav-links a::after{
  right:0;
  left:100%;
  transition:left .25s ease;
}
html[dir="rtl"] .nav-links a:hover::after,
html[dir="rtl"] .nav-links a.is-active::after{ left:0; }
/* the two-column story blocks keep their visual order, text turns RTL */
html[dir="rtl"] .story.reverse{ direction:ltr; }
html[dir="rtl"] .story.reverse > *{ direction:rtl; }
/* map: the controls stay where Leaflet puts them, the text turns RTL */
html[dir="rtl"] .map-frame .leaflet-popup-content{ direction:rtl; text-align:right; }
html[dir="rtl"] .location-meta{ unicode-bidi:plaintext; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  /* show the finished brand mark instead of its starting frame */
  .vh-mark .logo-shape{ stroke-dashoffset:0; fill-opacity:1; }
  .vh-mark .logo-word{ opacity:1; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:960px){
  .flip-grid, .services-grid, .listing-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid, .story{ grid-template-columns:1fr; }
  .story.reverse{ direction:ltr; }
  .story img{ order:-1; }
  .stats-strip{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:720px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .lang-btn{ margin-inline-start:auto; margin-inline-end:.7em; padding:.45em .85em; }
  .trust-bar{ gap:.7em 1.2em; padding:.65em 5vw; }
  .trust-item{ font-size:.68rem; }
  .values{ gap:0; }
  .value{ padding:0 .8em; border-right:none; margin-bottom:1.6em; width:44%; }
  .chatbot-launcher span{ display:none; }
  .chatbot-launcher{ padding:.8em; }
  .flip-grid, .services-grid, .listing-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; text-align:center; }
  .footer-brand{ display:flex; flex-direction:column; align-items:center; }
}

/* ============================================================
   Launch-page alignment
   The display face is now heavy Inter with tight tracking,
   matching the launch page's headline voice. Palette unchanged.
   ============================================================ */
.headline,
.cs-title{
  font-weight:800;
  letter-spacing:-.05em;
  line-height:.99;
}

.section-title,
.project-h2,
.calc-title{
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.08;
}

/* The hero's emphasised clause used a serif italic. Inter has no
   real italic loaded, so the contrast is carried by weight instead
   — heavy line against light line. */
.headline em{
  font-style:normal;
  font-weight:400;
  letter-spacing:-.04em;
  color:var(--paper);
}

.flip-card-front .flip-label h3,
.flip-card-back h3,
.service-card h3,
.listing-body h3,
.area-card-name,
.chatbot-header h4,
.mobile-menu a{
  font-weight:700;
  letter-spacing:-.02em;
}

.flip-stats strong,
.stat strong,
.area-stat strong,
.spec-cell strong,
.listing-price,
.project-price,
.calc-out .calc-total dd,
.map-frame .leaflet-popup-content strong{
  font-weight:800;
  letter-spacing:-.03em;
}



/* ============================================================
   Developers wall (home page)
   A tilted "keyboard" of developer wordmarks: the rows drift in
   opposite directions, a key lights up now and then, and the
   plane leans toward the cursor. Tiles are built by script.js
   from VH_DATA.developers.
   ============================================================ */
.dev-section{
  --dev-bg:transparent;
  --kw:150px; --kh:64px; --kgap:64px;
  display:grid;
  grid-template-columns:1fr;
  background:var(--dev-bg);
  overflow:hidden;
}
.dev-copy{
  padding:4.5em 6vw 1.5em;
  text-align:center;
  position:relative;
  z-index:2;
}
.dev-title{
  font-family:'Inter',sans-serif;
  font-weight:300;
  font-size:clamp(2rem,3.5vw,3.5rem);
  line-height:1;
  letter-spacing:.03em;
  white-space:nowrap;
  text-transform:uppercase;
  margin:0 0 .45em;
  /* white fading to grey, with a light sweep passing over it */
  background:
    linear-gradient(110deg, transparent 42%, rgba(255,255,255,.95) 50%, transparent 58%),
    linear-gradient(90deg, #f7f7f5 30%, #6e6e73 100%);
  background-size:260% 100%, 100% 100%;
  background-position:120% 0, 0 0;
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  animation:devShimmer 6.5s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes devShimmer{
  0%, 45%{ background-position:120% 0, 0 0; }
  100%{ background-position:-20% 0, 0 0; }
}
.dev-lede{
  color:var(--paper);
  font-size:1.02rem;
  line-height:1.7;
  max-width:36em;
  margin:0 auto 1.8em;
}
.dev-stats{
  display:flex;
  justify-content:center;
  gap:2.6em;
  margin:0 0 2em;
}
.dev-stats strong{
  display:block;
  font-size:clamp(2rem,3.4vw,2.6rem);
  font-weight:600;
  line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.dev-stats strong{ border-left:2px solid var(--brand); padding-left:.35em; }
html[dir="rtl"] .dev-stats strong{ border-left:0; border-right:2px solid var(--brand); padding-left:0; padding-right:.35em; }
.dev-stats span{
  display:block;
  margin-top:.5em;
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.dev-hint{
  margin:1.3em 0 0;
  font-size:.82rem;
  color:var(--muted);
}

/* ---- the stage: one straight row of logos, moved by script.js ---- */
.dev-stage{
  position:relative;
  min-height:clamp(160px,14vw,200px);
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
.dev-stage.is-dragging{ cursor:grabbing; }
.dev-plane{
  position:absolute;
  left:0; top:50%;
  display:flex;
  flex-direction:column;
  gap:clamp(2.6em,5vw,4.2em);
  transform:translateY(-50%);
}
.dev-row{
  display:flex;
  align-items:center;
  gap:var(--kgap);
  /* trailing pad = one gap, so wrapping by half the width is seamless */
  padding-right:var(--kgap);
  width:max-content;
  will-change:transform;
}

/* ---- a logo: no card, just the mark ---- */
.dev-key{
  flex:0 0 auto;
  width:var(--kw);
  height:var(--kh);
  display:grid;
  place-items:center;
  text-decoration:none;
  color:#f7f7f5;
  font-size:13px;
  -webkit-user-drag:none;
}
.dev-key:focus-visible{ outline:2px solid var(--brand); outline-offset:6px; border-radius:6px; }

/* ---- logos: each brand in its own colours ---- */
.dev-logo{
  max-width:var(--kw);
  max-height:var(--kh);
  width:auto;
  height:auto;
  -webkit-user-drag:none;
  object-fit:contain;
  pointer-events:none;
}

/* ---- wordmarks ---- */
.dev-mark{
  position:relative;
  font-family:'Inter',sans-serif;
  text-align:center;
  line-height:1;
  pointer-events:none;
}
.dev-mark span{ display:block; }
.dev-tag{
  font-size:.32em;
  font-weight:700;
  letter-spacing:.16em;
  vertical-align:top;
  margin-left:.25em;
  color:var(--brand);
}
.wm-heavy{ font-size:2.35em; font-weight:800; font-style:italic; letter-spacing:-.045em; text-transform:uppercase; }
.wm-serif{ font-family:'Cormorant Garamond',Georgia,serif; font-size:1.6em; font-weight:600; letter-spacing:.09em; line-height:.98; text-transform:uppercase; }
.wm-round{ font-size:1.95em; font-weight:600; letter-spacing:-.02em; text-transform:lowercase; }
.wm-geo{ font-size:2.05em; font-weight:500; letter-spacing:.34em; padding-left:.34em; text-transform:uppercase; }
.wm-light{ font-size:1.55em; font-weight:300; letter-spacing:.2em; text-transform:uppercase; }
.wm-stack{ font-size:1.5em; font-weight:800; letter-spacing:.02em; line-height:.92; text-transform:uppercase; }

/* ---- Arabic ---- */
html[dir="rtl"] .dev-title{ letter-spacing:0; line-height:1.3; }
html[dir="rtl"] .dev-stats span{ letter-spacing:0; font-size:.85rem; }

/* ---- small screens: copy on top, wall underneath ---- */
@media (max-width:860px){
  .dev-section{ grid-template-columns:1fr; --kw:116px; --kh:50px; --kgap:44px; }
  .dev-copy{ padding:3.6em 6vw 1em; }
  .dev-stage{ min-height:140px; }
  .dev-key{ font-size:10.5px; }
  .dev-stats{ gap:2em; }
}

@media (prefers-reduced-motion: reduce){
  .dev-title{ background-position:120% 0, 0 0; }
}

/* ============================================================
   Liquid glass cards
   Every card is a pane of smoked glass: a faint white sheen from
   the top-left, a warm logo-orange caustic in the far corner, a
   bright rim along the top edge, and a highlight that follows the
   cursor (--gx/--gy, set by script.js). The fixed glow on <body>
   gives the blur something to bend.
   ============================================================ */
body{
  background:
    radial-gradient(900px 700px at 88% 8%, rgba(229,130,59,.07), transparent 60%),
    radial-gradient(800px 700px at 6% 92%, rgba(182,65,22,.06), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
/* the site background: the glow from the hero's last frame, drawn as
   gradients so it stays smooth at any size (orange light falling
   diagonally from the left, warm grey light on the right, darker toward
   the bottom) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(5,5,5,0) 40%, rgba(5,5,5,.55) 78%, rgba(5,5,5,.8) 100%),
    radial-gradient(55% 60% at 90% 18%, rgba(112,103,96,.5) 0%, rgba(84,78,73,.28) 40%, rgba(60,56,53,.1) 62%, transparent 80%),
    linear-gradient(128deg, transparent 10%, rgba(96,44,16,.22) 24%, rgba(122,54,18,.42) 36%, rgba(84,36,12,.26) 48%, rgba(40,18,6,.08) 58%, transparent 66%),
    radial-gradient(42% 46% at 30% 28%, rgba(150,66,22,.3) 0%, rgba(110,48,16,.14) 45%, transparent 75%),
    radial-gradient(40% 40% at 8% 12%, rgba(30,32,36,.6) 0%, transparent 70%),
    #0b0b0c;
  pointer-events:none;
}
/* a very fine grain on top, so the gradients never show steps */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.06;
  mix-blend-mode:overlay;
  pointer-events:none;
}

.flip-card-back, .service-card, .listing-card, .stat, .chatbot-panel,
.contact-info-card, .cs-panel, .filter-bar, .area-card, .area-stat,
.spec-cell, .calc-card, .location-item, .chatbot-launcher{
  --glass-sheen:rgba(255,255,255,.065);
  --glass-bg:
    radial-gradient(380px circle at var(--gx,18%) var(--gy,-10%), rgba(255,255,255,.09), transparent 46%),
    radial-gradient(520px circle at 105% 115%, rgba(229,130,59,.09), transparent 55%),
    linear-gradient(150deg, var(--glass-sheen) 0%, rgba(255,255,255,.015) 48%, rgba(255,255,255,.035) 100%),
    rgba(12,12,12,.55);
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
          backdrop-filter:blur(18px) saturate(1.5);
  border-color:rgba(255,255,255,.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(255,255,255,.03),
    inset 0 0 24px rgba(255,255,255,.025),
    0 26px 50px -28px rgba(0,0,0,.95);
}
/* the flip card's back face is a 3D-rotated layer: blur there is
   unreliable across browsers, so it keeps the sheen without it */
.flip-card-back{ -webkit-backdrop-filter:none; backdrop-filter:none; background-color:#0c0c0c; }

.service-card:hover, .listing-card:hover, .contact-info-card:hover,
.area-card:hover, .area-stat:hover, .location-item:hover,
.location-item.is-active, .chatbot-launcher:hover{
  --glass-sheen:rgba(255,255,255,.1);
  background:var(--glass-bg);
  border-color:rgba(229,130,59,.5);
}
.chatbot-launcher{ border-color:rgba(229,130,59,.45); }

/* inputs inside glass stay a touch darker so they read as fields */
.filter-field select, .calc-row select, .form-row input, .form-row textarea{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
}


/* ============================================================
   Map page (map.html) — satellite map, filters, results, detail
   ============================================================ */
.map-page{
  position:relative;
  height:100vh;
  height:100svh;
  min-height:560px;
  overflow:hidden;
}
#bigMap{
  position:absolute;
  inset:0;
  z-index:0; /* keeps Leaflet's own layers below the filters and panel */
  background:#0b0b0c;
}
/* a dark wash under the transparent menu bar so its links stay readable */
.map-page::before{
  content:"";
  position:absolute; inset:0 0 auto;
  height:150px;
  z-index:1;
  background:linear-gradient(180deg, rgba(5,5,5,.8), transparent);
  pointer-events:none;
}

/* ---- filter bar ---- */
.map-filters{
  position:absolute;
  z-index:2;
  top:86px; left:16px; right:calc(380px + 32px);
  display:flex;
  gap:10px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:2px;
}
.map-filters::-webkit-scrollbar{ display:none; }
.mf-search,
.map-filters select{
  flex:0 0 auto;
  height:46px;
  border-radius:999px;
  background:rgba(12,12,14,.66);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
          backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);
  color:var(--ink);
  font:500 .9rem 'Inter',sans-serif;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.7);
}
.mf-search{
  display:flex;
  align-items:center;
  gap:.6em;
  padding:0 1.1em;
  min-width:260px;
  flex:1 1 260px;
}
.mf-search svg{ width:18px; height:18px; color:var(--muted); flex-shrink:0; }
.mf-search input{
  flex:1;
  min-width:0;
  background:none;
  border:0;
  outline:none;
  color:inherit;
  font:inherit;
}
.mf-search input::placeholder{ color:var(--muted); }
.map-filters select{
  -webkit-appearance:none;
          appearance:none;
  padding:0 2.6em 0 1.2em;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5823b' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1em center;
  background-size:14px;
}
.map-filters select option{ background:#141416; color:#f7f7f5; }
.mf-search:focus-within,
.map-filters select:focus-visible{ border-color:var(--brand); outline:none; }
html[dir="rtl"] .map-filters select{ padding:0 1.2em 0 2.6em; background-position:left 1em center; }

/* ---- results / detail panel ---- */
.map-panel{
  position:absolute;
  z-index:2;
  top:86px; right:16px; bottom:16px;
  width:380px;
  border-radius:22px;
  background:rgba(10,10,12,.78);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
          backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.9);
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* the detail view is only as tall as its content */
.map-panel.is-detail{ bottom:auto; max-height:calc(100% - 102px); }
html[dir="rtl"] .map-panel{ right:auto; left:16px; }
html[dir="rtl"] .map-filters{ left:calc(380px + 32px); right:16px; }
.mp-detail-view{ display:none; position:relative; }
.map-panel.is-detail .mp-list-view{ display:none; }
.map-panel.is-detail .mp-detail-view{ display:block; }

.mp-list-view{ padding:18px; }
.mp-count{
  margin:0 0 14px;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.mp-list{ display:grid; gap:12px; }
.mp-empty{ color:var(--muted); font-size:.9rem; text-align:center; padding:2em 0; }
.mp-card{
  display:grid;
  grid-template-columns:118px 1fr;
  width:100%;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  color:inherit;
  font:inherit;
  text-align:start;
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.mp-card:hover,
.mp-card:focus-visible{ border-color:rgba(229,130,59,.6); background:rgba(255,255,255,.07); transform:translateY(-2px); outline:none; }
.mp-card-photo{ position:relative; min-height:118px; }
.mp-card-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mp-card-badge{
  position:absolute;
  left:8px; bottom:8px;
  width:30px; height:30px;
  border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:#0b0b0c;
}
.mp-card-badge svg{ width:16px; height:16px; }
.mp-card-body{ display:flex; flex-direction:column; padding:12px 14px; min-width:0; }
.mp-card-name{ font-weight:600; font-size:1rem; color:var(--ink); line-height:1.25; }
.mp-card-area{ font-size:.8rem; color:var(--muted); margin-top:3px; }
.mp-card-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:auto; padding-top:10px; }
.mp-card-foot small{ display:block; font-size:.68rem; color:var(--brand); }
.mp-card-foot strong{ font-size:.92rem; color:var(--ink); }
.mp-card-cta{
  flex-shrink:0;
  padding:.45em .9em;
  border-radius:999px;
  background:var(--brand);
  color:#0b0b0c;
  font-size:.78rem;
  font-weight:600;
}

/* detail */
.mp-close{
  position:absolute;
  z-index:2;
  top:26px; right:26px;
  width:38px; height:38px;
  border-radius:50%;
  display:grid; place-items:center;
  background:rgba(10,10,12,.55);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  cursor:pointer;
}
html[dir="rtl"] .mp-close{ right:auto; left:26px; }
.mp-close svg{ width:16px; height:16px; }
#mpDetail{ padding:16px 16px 0; }
.mp-hero{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:16/10; }
.mp-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.mp-chip{
  position:absolute;
  left:12px; bottom:12px;
  display:inline-flex; align-items:center; gap:.4em;
  padding:.45em .9em;
  border-radius:999px;
  background:rgba(10,10,12,.55);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.25);
  font-size:.8rem;
  color:#fff;
}
.mp-chip svg{ width:14px; height:14px; color:var(--brand); }
.mp-title-row{ display:flex; align-items:center; gap:10px; margin:16px 0 14px; }
.mp-logo{
  flex-shrink:0;
  width:46px; height:46px;
  border-radius:14px;
  display:grid; place-items:center;
  background:#fff; color:#0b0b0c;
}
.mp-logo svg{ width:22px; height:22px; }
.mp-title{ flex:1; min-width:0; }
.mp-title small{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); }
.mp-title h2{ margin:2px 0 0; font-size:1.25rem; line-height:1.2; color:var(--ink); }
.mp-icon-btn{
  flex-shrink:0;
  width:40px; height:40px;
  border-radius:12px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  cursor:pointer;
}
.mp-icon-btn svg{ width:18px; height:18px; }
.mp-icon-btn--solid{ background:var(--brand); border-color:var(--brand); color:#0b0b0c; }
.mp-price{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
}
.mp-price small{ display:block; font-size:.78rem; color:var(--muted); margin-bottom:4px; }
.mp-price strong{ font-size:1.3rem; color:var(--ink); }
.mp-section-head{ display:flex; align-items:baseline; justify-content:space-between; margin:20px 0 10px; }
.mp-section-head h3{ margin:0; font-size:1rem; color:var(--ink); }
.mp-section-head a{ font-size:.85rem; font-weight:600; color:var(--brand); text-decoration:none; }
.mp-specs{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mp-specs div{ padding:12px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.mp-specs strong{ display:block; font-size:1.1rem; color:var(--ink); }
.mp-specs span{ font-size:.75rem; color:var(--muted); }
.mp-toast{ margin:12px 0 0; font-size:.82rem; color:var(--brand); text-align:center; }
.mp-actions{
  position:sticky;
  bottom:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:20px -16px 0;
  padding:14px 16px 16px;
  background:linear-gradient(180deg, rgba(10,10,12,0), rgba(10,10,12,.95) 30%);
}
.mp-call, .mp-wa{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  height:50px;
  border-radius:14px;
  font-weight:600;
  text-decoration:none;
}
.mp-call{ border:1.5px solid var(--brand); color:var(--brand); }
.mp-wa{ background:#25d366; color:#06210f; }
.mp-call svg, .mp-wa svg{ width:20px; height:20px; }

/* ---- pins, name tags, area labels, clusters ---- */
.vm-pin{
  position:relative;
  display:block;
  width:44px; height:54px;
  transform-origin:50% 96%;
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
  cursor:pointer;
}
.vm-pin::before{
  content:"";
  position:absolute;
  left:2px; top:3px;
  width:40px; height:40px;
  background:var(--brand);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:0 8px 16px -4px rgba(0,0,0,.6);
}
.vm-pin-face{
  position:absolute;
  left:8px; top:9px;
  width:28px; height:28px;
  border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:#0b0b0c;
}
.vm-pin-face svg{ width:16px; height:16px; }
.is-hover .vm-pin, .is-active .vm-pin{ transform:scale(1.2); }
.is-active .vm-pin::before{ background:#fff; }
.is-active .vm-pin-face{ background:var(--brand); }

.leaflet-tooltip.vm-tag{
  padding:.5em 1em;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#0b0b0c;
  font:600 .82rem 'Inter',sans-serif;
  white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.7);
  opacity:0 !important;
  transition:opacity .25s ease;
}
.leaflet-tooltip.vm-tag::before{ display:none; }
#bigMap.show-tags .leaflet-tooltip.vm-tag{ opacity:1 !important; }

.vm-area{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  transform:translate(-50%,-50%);
  padding:.55em 1.15em;
  border-radius:999px;
  background:var(--brand);
  color:#0b0b0c;
  white-space:nowrap;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.8);
  cursor:pointer;
  transition:transform .2s ease;
}
.vm-area:hover{ transform:translate(-50%,-50%) scale(1.06); }
.vm-area b{ font:700 .92rem 'Inter',sans-serif; }
.vm-area small{ font-size:.7rem; opacity:.75; }
.vm-cluster{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--brand);
  color:#0b0b0c;
  font:700 1rem 'Inter',sans-serif;
  box-shadow:0 0 0 7px rgba(229,130,59,.28), 0 10px 20px -6px rgba(0,0,0,.7);
}
.vm-dot{
  display:block;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 5px rgba(229,130,59,.3);
}
#bigMap .leaflet-control-zoom a{ background:rgba(10,10,12,.8); color:#fff; border-color:rgba(255,255,255,.12); }
#bigMap .leaflet-control-attribution{ background:rgba(10,10,12,.6); color:#bbb; }
#bigMap .leaflet-control-attribution a{ color:#ddd; }

/* ---- phones: map on top, results as a sheet at the bottom ---- */
@media (max-width:860px){
  .map-filters, html[dir="rtl"] .map-filters{ top:76px; left:12px; right:12px; }
  .mf-search{ min-width:220px; }
  .map-panel, html[dir="rtl"] .map-panel{
    top:auto; left:0; right:0; bottom:0;
    width:auto;
    max-height:46%;
    border-radius:22px 22px 0 0;
  }
  .map-panel.is-detail{ top:auto; bottom:0; max-height:72%; }
  #bigMap .leaflet-bottom.leaflet-left{ bottom:calc(46% + 4px); }
}

/* ============================================================
   Home: announcement for the map page
   ============================================================ */
.map-teaser{ padding:2em 6vw 5em; }
.map-teaser-card{
  position:relative;
  isolation:isolate;
  min-height:clamp(380px,40vw,480px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
}
.map-teaser-map{
  position:absolute;
  inset:0;
  z-index:0;
  background:#0b0b0c;
  filter:brightness(.8) saturate(.95);
  pointer-events:none;
}
.map-teaser-card::after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  /* dark in the middle behind the text, the satellite view showing around it */
  background:radial-gradient(60% 75% at 50% 50%, rgba(5,5,5,.88) 0%, rgba(5,5,5,.6) 55%, rgba(5,5,5,.15) 100%);
  pointer-events:none;
}
.map-teaser-copy{
  position:relative;
  z-index:2;
  max-width:34em;
  padding:clamp(2em,5vw,3.6em);
}
.map-teaser-copy .section-lede{ margin:0 auto 1.8em; }
@media (max-width:720px){
  .map-teaser-card{ min-height:460px; }
  .map-teaser-card::after{
    background:radial-gradient(90% 70% at 50% 50%, rgba(5,5,5,.9) 0%, rgba(5,5,5,.65) 60%, rgba(5,5,5,.2) 100%);
  }
}


/* ---- map page "coming soon" mode: map blurred but still draggable,
   no results panel, a message in the middle ---- */
.map-page.is-coming-soon .map-panel{ display:none; }
.map-page.is-coming-soon #bigMap .leaflet-map-pane{ filter:blur(7px) brightness(.8); }
.map-page.is-coming-soon #bigMap{ cursor:grab; }
.map-page.is-coming-soon #bigMap.leaflet-drag-target,
.map-page.is-coming-soon #bigMap:active{ cursor:grabbing; }
.map-page.is-coming-soon .map-filters{ right:16px; }
.map-soon{ display:none; }
.map-page.is-coming-soon .map-soon{
  display:block;
  position:absolute;
  z-index:2;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(88vw,520px);
  padding:2.4em 2em;
  text-align:center;
  border-radius:24px;
  background:rgba(10,10,12,.55);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
          backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
  pointer-events:none; /* the map underneath keeps moving with the mouse */
}
.map-soon-title{
  margin:.15em 0 .3em;
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:clamp(2.4rem,6vw,4rem);
  letter-spacing:-.045em;
  line-height:1;
  color:var(--ink);
}
.map-soon-text{ margin:0; color:var(--paper); font-size:1rem; line-height:1.6; }

/* ---- "coming soon" popup: same glass card as the map page ---- */
.cs-modal .cs-panel{
  background:rgba(10,10,12,.6);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
          backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
  border-radius:24px;
}
.cs-modal .cs-title{
  font-weight:800;
  font-size:clamp(2.4rem,6vw,3.6rem);
  letter-spacing:-.045em;
  line-height:1;
}
.cs-types{
  margin:.9em 0 .4em;
  font-size:.86rem;
  font-weight:600;
  line-height:1.7;
  color:var(--brand);
}

/* ---- section pages (Residential / Commercial / Administrative) ---- */
.category-section{ padding:1em 6vw 6em; }
.category-types{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:820px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.8em;
}
.category-types li{
  padding:.75em 1.4em;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  font-weight:500;
}

/* contact form button: WhatsApp icon beside the label */
.btn-wa{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; }
.btn-wa svg{ width:18px; height:18px; flex-shrink:0; }