/* ═══════════════════════════════════════════════════════════
   V Capital — nav.css
   Universal navbar styles — included on ALL pages.
   Source of truth: homepage.css (extracted, not modified).
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Nav token aliases — match homepage.css values */
  --gold:          #C9A847;
  --gold-dark:     #9A7E2F;
  --gold-light:    #E2C97E;
  --white:         #F5F2EC;
  --white-dim:     rgba(245,242,236,0.55);
  --white-faint:   rgba(245,242,236,0.12);
  --black:         #080808;
  --black-2:       #111111;
  --black-3:       #181818;
  --border:        rgba(201,168,71,0.18);
  --border-strong: rgba(201,168,71,0.4);
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --font-mono:     'DM Mono', 'Courier New', monospace;
}

/* ── NAVIGATION ── */

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.hamburger span { width: 24px; height: 1px; background: var(--white); transition: all 0.3s; }
@media(max-width:900px){
  
  .hamburger { display: flex; }
  
}


/* NAV */
#main-nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;border-bottom:1px solid transparent;transition:background .35s,border-color .35s}
#main-nav.scrolled{background:rgba(8,8,8,.97);backdrop-filter:blur(16px);border-bottom:1px solid rgba(201,168,71,.15)}
.nav-inner{display:flex;align-items:center;height:68px;gap:0}
.nav-logo{font-family:var(--font-display);font-size:1.2rem;font-weight:300;letter-spacing:.04em;color:var(--white);text-decoration:none;flex-shrink:0;margin-right:6px}
.nav-logo span{color:var(--gold)}
.nav-links{display:flex;align-items:center;list-style:none;margin:0;padding:0;flex:1;gap:0}
.nav-links>li>a,.nav-links>li>button{display:flex;align-items:center;gap:3px;padding:6px 10px;font-family:var(--font-body);font-size:.56rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(245,242,236,.88);text-decoration:none;white-space:nowrap;background:none;border:none;cursor:pointer;transition:color .25s;line-height:1}
.nav-links>li>a:hover,.nav-links>li>button:hover{color:var(--white)}
.nav-links>li.nav-dropdown:hover>a,.nav-links>li.nav-dropdown.open>a{color:var(--gold)}
.nav-cta{flex-shrink:0;margin-left:10px;padding:8px 16px;background:transparent;border:1px solid rgba(201,168,71,.4);color:var(--gold);font-family:var(--font-mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:all .25s}
.nav-cta:hover{background:var(--gold);color:var(--black)}





@media(max-width:1280px){.nav-links>li.nav-hide-md{display:none}.nav-links>li>a,.nav-links>li>button{padding:6px 8px;font-size:.52rem}}
@media(max-width:1024px){.nav-links{display:none !important}.nav-cta{display:none !important}}

/* DROPDOWN */
.nav-dropdown{position:relative}
.nav-dropdown>a::after{content:'▾';font-size:.6rem;opacity:.5;margin-left:2px;display:inline-block;transition:transform .2s}
.nav-dropdown.open>a::after,.nav-dropdown:hover>a::after{transform:rotate(180deg);opacity:1}
.nav-dropdown-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);width:680px;max-width:96vw;background:#0c0c0c;border:1px solid rgba(201,168,71,.2);box-shadow:0 20px 50px rgba(0,0,0,.75);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:500}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-dropdown-label{padding:10px 14px 7px;font-family:var(--font-mono);font-size:.44rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(201,168,71,.5);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-dropdown-menu a{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.08em;color:rgba(245,242,236,.6);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.04);transition:all .2s}
.nav-dropdown-menu a:last-child{border-bottom:none}
.nav-dropdown-menu a:hover{background:rgba(201,168,71,.06);color:var(--gold);padding-left:18px}
.nav-dropdown-menu a .dd-yield{font-family:var(--font-display);font-size:.82rem;color:var(--gold);opacity:.85;flex-shrink:0}

/* MOBILE DRAWER */















/* MOBILE ACCORDION */
.mob-accordion{border-bottom:1px solid rgba(255,255,255,.05)}
.mob-accordion-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 28px;background:none;border:none;cursor:pointer;font-family:var(--font-display);font-size:1rem;font-weight:300;color:rgba(245,242,236,.7);text-align:left;transition:color .25s}
.mob-accordion-trigger:hover,.mob-accordion-trigger.open{color:var(--gold)}
.mob-accordion-icon{font-family:var(--font-mono);font-size:1rem;color:rgba(201,168,71,.5);transition:transform .25s;line-height:1}
.mob-accordion-trigger.open .mob-accordion-icon{transform:rotate(45deg)}
.mob-accordion-body{display:none;background:rgba(0,0,0,.25)}
.mob-accordion-body.open{display:block}
.mob-accordion-body a{display:flex;align-items:center;justify-content:space-between;padding:12px 28px 12px 36px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;color:rgba(245,242,236,.55);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.04);transition:all .2s}
.mob-accordion-body a:last-child{border-bottom:none}
.mob-accordion-body a:hover{color:var(--gold);padding-left:42px}
.mob-accordion-body a .mob-yield{font-family:var(--font-display);font-size:.82rem;color:var(--gold);opacity:.8}

/* Touch device fixes */
.nav-dropdown > a,
.mob-accordion-trigger,

.mob-accordion-trigger {
  -webkit-appearance: none;
  cursor: pointer;
  user-select: none;
}
/* iOS: make clickable areas large enough */
.mob-accordion-trigger {
  min-height: 52px;
}
/* Smooth accordion animation */
.mob-accordion-/* body overflow:hidden removed — breaks position:fixed on iOS Safari */
/* Fix iOS scrolling in mobile drawer */

/* Desktop dropdown: also open on focus (keyboard/assistive) */
.nav-dropdown > a:focus + .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}


.mob-acc-section {
  padding: 7px 24px 4px 28px;
  font-family: var(--font-mono);
  font-size: 0.44rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201,168,71,0.5);
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 4px;
}
.mob-accordion-body .mob-acc-section:first-child { border-top: none; margin-top: 0; }
.mob-yield {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--gold);
  opacity: 0.8;
}


/* Hotspot card image overlay */
.hs-card {
  position: relative;
}
.hs-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(8,8,8,.95) 0%,
    rgba(8,8,8,.65) 50%,
    rgba(8,8,8,.35) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.hs-card > * {
  position: relative;
  z-index: 1;
}









.hero-bg{!important;background-size:cover!important;background-position:center 35%!important}#hero{position:relative;overflow:hiddenbackground-size:cover;background-position:center 35%;background-repeat:no-repeat;}#hero::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(8,8,8,.88) 0%,rgba(8,8,8,.70) 55%,rgba(8,8,8,.45) 100%);z-index:1;pointer-events:none}
/* ── Modal inner containers — always centered ── */

/* ── Prevent any modal from being cut off on small screens ── */

/* iOS touch optimisation */
*{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
input,textarea,select{-webkit-appearance:none;appearance:none;font-size:16px!important}/* prevent iOS zoom */
button,a{touch-action:manipulation}/* remove 300ms delay */
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Safe area — iPhone notch & home bar */
nav{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
footer{padding-bottom:calc(2rem + env(safe-area-inset-bottom))}
#vc-connect{bottom:calc(2rem + env(safe-area-inset-bottom));right:calc(1.5rem + env(safe-area-inset-right))}
/* Smooth momentum scroll on iOS */
.detail-panel,.nav-mob-dr,.rn-mob{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* Prevent double-tap zoom on interactive elements */
.btn-gold,.vc-exit-btn,.vc-exit-skip{touch-action:manipulation}
/* Fix 1px gap on retina */
@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
  
}

/* POPUP — position:fixed on inner = viewport-relative, works on all iOS/Android */
#vc-exit-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,8,8,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  animation: none;
}
#vc-exit-popup.active {
  animation: vcOverlayIn 0.35s ease both;
}
@keyframes vcOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#vc-exit-popup.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/* Inner: position:fixed relative to VIEWPORT (not parent) — no iOS quirks */
.vc-exit-inner {
  position: relative;
  width: 90%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #0f0f0f;
  border: 1px solid rgba(201,168,71,0.25);
  border-radius: 2px;
  flex-shrink: 0;
}
#vc-exit-popup.active .vc-exit-inner {
  animation: vcPopScaleIn 0.35s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes vcPopScaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@media (max-width: 480px) {
  .vc-exit-inner { width: 95%; max-height: 92vh; }
}
.vc-exit-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, #C9A847, transparent);
  pointer-events: none;
}
@keyframes vcFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#vc-exit-popup.active /* animation scoped to #vc-exit-popup.active .vc-exit-inner */
/* Mobile: position from top so form inputs always visible */
@media (max-height: 700px), (max-width: 480px) {
  .vc-exit-inner {
    top: 2rem;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    max-height: calc(100vh - 3rem);
    max-height: calc(100svh - 3rem);
  }
}
/* Popup content */
.vc-exit-hd { padding: 2rem 2rem 1.25rem; text-align: center; }
.vc-exit-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: .5rem; letter-spacing: .2em; text-transform: uppercase;
  color: #C9A847; display: block; margin-bottom: .875rem;
}
.vc-exit-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 300;
  color: #F5F2EC; line-height: 1.15; margin-bottom: .5rem;
}
.vc-exit-title em { font-style: italic; color: #C9A847; }
.vc-exit-sub {
  font-size: .875rem; color: rgba(245,242,236,.5);
  line-height: 1.65; max-width: 340px; margin: 0 auto;
}
.vc-exit-form { padding: 1rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .625rem; }
.vc-exit-field {
  padding: .875rem 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: #F5F2EC;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  width: 100%; outline: none;
  -webkit-appearance: none; border-radius: 0;
  box-sizing: border-box;
  transition: border-color .2s;
}
.vc-exit-field::placeholder { color: rgba(245,242,236,.3); }
.vc-exit-field:focus { border-color: rgba(201,168,71,.5); }
.vc-exit-btn {
  padding: .875rem;
  background: linear-gradient(135deg, #9A7A28, #C9A847);
  color: #080808;
  font-family: 'DM Mono', monospace;
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  border: none; cursor: pointer; width: 100%;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.vc-exit-btn:disabled { opacity: .6; cursor: not-allowed; }
.vc-exit-skip {
  display: block; text-align: center; padding: .75rem;
  font-family: 'DM Mono', monospace;
  font-size: .48rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(245,242,236,.28);
  cursor: pointer; background: none; border: none; width: 100%;
  touch-action: manipulation;
}
.vc-exit-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(245,242,236,0.6);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  z-index: 1;
}
.vc-exit-close:hover {
  border-color: rgba(201,168,71,0.6);
  color: #C9A847;
}
.vc-exit-success { display: none; padding: 2rem; text-align: center; }
.vc-exit-success-icon {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem; color: #C9A847; margin-bottom: 1rem;
}
.vc-exit-success h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: #F5F2EC; margin-bottom: .5rem;
}
.vc-exit-success p { font-size: .875rem; color: rgba(245,242,236,.5); margin: 0; }

/* ══════════════════════════════════════════════════════════════
   V CAPITAL — MOBILE NAV
   Full-width drawer, drops below navbar (68px), slides down
   Works: iPhone SE 375px · iPhone 14 393px · Pixel 412px · iPad 768px
══════════════════════════════════════════════════════════════ */

/* Hamburger — hidden desktop, shown mobile */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  z-index: 1100;
}
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: #FFD700;
  transition: transform 0.28s ease, opacity 0.28s ease, background 0.2s ease;
  pointer-events: none;
}
.nav-hamburger:hover span {
  background: #FFE44D;
}
/* X animation */
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Overlay — covers page behind drawer */
#mobileNavOverlay {
  display: none;
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  background: rgba(8,8,8,0.5);
}
#mobileNavOverlay.open { display: block; }

/* Drawer — full width, slides DOWN from navbar */
#mobileNavDrawer {
  position: fixed;
  top: 0 !important;
  left: 0;
  width: 100%;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 1002;
  background: #080808;
  border-top: 1px solid rgba(201,168,71,0.15);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Slide down animation: hidden above → visible */
  transform: translateX(-100%) !important;
  -webkit-transform: translateX(-100%) !important;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1),
              visibility 0.3s;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.16,1,0.3,1),
                      visibility 0.3s;
  visibility: hidden;
  padding-bottom: env(safe-area-inset-bottom, 20px);
}
/* Open state — slides into view */
#mobileNavDrawer.open {
  transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  visibility: visible;
}

/* Nav links inside drawer */
.mob-link {
  display: block;
  padding: 18px 24px;
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(245,242,236,0.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.mob-link:active { color: #C9A847; background: rgba(201,168,71,0.04); }

.mob-section-label {
  padding: 14px 24px 6px;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 0.42rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201,168,71,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mob-sub-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px 12px 36px;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: rgba(245,242,236,0.55);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.mob-sub-link:active { color: #C9A847; }

.mob-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 20px 20px 0;
  padding: 15px;
  background: #25D366;
  color: #fff;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Show/hide at breakpoints */
@media (max-width: 1024px) {
  .nav-hamburger { display: flex; }
  .nav-links     { display: none !important; }
  .nav-cta       { display: none !important; }
}
@media (min-width: 1025px) {
  .nav-hamburger    { display: none !important; }
  #mobileNavDrawer  { display: none !important; }
  #mobileNavOverlay { display: none !important; }
}

/* User-specified selector alias */
#vcNav-drawer {
  height: 100vh !important;
  top: 0 !important;
}
#vcNav-drawer.is-open {
  transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
}

/* Task 1 — Nav menu text: DM Sans only (does not affect body/headings) */
.nav-links > li > a,
.nav-links > li > button {
  font-family: 'DM Sans', 'DM Sans', sans-serif !important;
}

/* ── Emaar 200B Featured Card — addition only, no existing styles modified ── */
.fc-wrap {
  margin-bottom: 2.5rem;
}
.fc-card {
  background: #09090c;
  border: 1px solid rgba(201,168,71,.18);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .25s;
  display: block;
  text-decoration: none;
  color: inherit;
}
.fc-card:hover { border-color: rgba(201,168,71,.45); }
.fc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7A5C1E, #C9A847, #E8D48B, #C9A847, #7A5C1E);
}
.fc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(201,168,71,.04) 0%, transparent 60%);
  pointer-events: none;
}
.fc-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 340px;
}
.fc-left {
  padding: 2.5rem 2.75rem;
  border-right: 1px solid rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.fc-right {
  padding: 2.5rem 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.fc-eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.fc-badge {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: .4rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(201,168,71,.12);
  border: 1px solid rgba(201,168,71,.25);
  color: #C9A847;
}
.fc-live {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: .38rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245,242,236,.3);
}
.fc-live::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #4CAF50;
  animation: fc-pulse 2s ease-in-out infinite;
}
@keyframes fc-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: .3; }
}
.fc-title {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
  color: #F5F2EC;
  line-height: 1.18;
  margin-bottom: 1rem;
  letter-spacing: .01em;
}
.fc-title strong {
  color: #C9A847;
  font-weight: 400;
}
.fc-sub {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: .55rem;
  letter-spacing: .06em;
  color: rgba(245,242,236,.38);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.fc-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.fc-chip {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: .44rem;
  letter-spacing: .08em;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(245,242,236,.45);
  white-space: nowrap;
}
.fc-chip.gold {
  border-color: rgba(201,168,71,.2);
  color: rgba(201,168,71,.8);
}
.fc-section-label {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: .4rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(201,168,71,.5);
  margin-bottom: .875rem;
}
.fc-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255,255,255,.06);
}
.fc-kpi {
  padding: 1rem 1.125rem;
  background: rgba(255,255,255,.02);
}
.fc-kpi-val {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.5rem;
  font-weight: 300;
  color: #C9A847;
  line-height: 1;
  margin-bottom: .25rem;
}
.fc-kpi-label {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: .4rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(245,242,236,.28);
}
.fc-takeaways {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.fc-takeaway {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: .52rem;
  letter-spacing: .04em;
  color: rgba(245,242,236,.5);
  line-height: 1.5;
}
.fc-takeaway::before {
  content: '✓';
  color: #C9A847;
  flex-shrink: 0;
  margin-top: .05rem;
}
.fc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2.75rem;
  border-top: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.01);
}
.fc-sources {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: .38rem;
  letter-spacing: .07em;
  color: rgba(245,242,236,.18);
}
.fc-cta {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: .44rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #C9A847;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap .18s;
}
.fc-card:hover .fc-cta { gap: 10px; }
/* Skyline visual — pure CSS/SVG illustration */
.fc-skyline {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  opacity: .06;
  pointer-events: none;
}
@media (max-width: 900px) {
  .fc-inner { grid-template-columns: 1fr; }
  .fc-left  { border-right: none; border-bottom: 1px solid rgba(255,255,255,.05); }
}

/* Fix 1: Hero stats — equal column widths so AED 82.3M+, 9.2%, 57+, 7+ align evenly */
.hero-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
}
.hero-stats > div {
  padding-right: 2rem;
  border-right: 1px solid rgba(255,255,255,.06);
  padding-left: 2rem;
}
.hero-stats > div:first-child { padding-left: 0; }
.hero-stats > div:last-child  { border-right: none; }

/* Fix 2: Emaar card chips match article-card-cat font metrics */
.fc-chip {
  font-size: 0.6rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* Mobile: hero stats 2×2 */
@media (max-width: 600px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem 0 !important;
  }
  .hero-stats > div:nth-child(2) { border-right: none; }
  .hero-stats > div:nth-child(even) { border-right: none; }
  .hero-stats > div { padding-right: 1rem; padding-left: 1rem; }
  .hero-stats > div:nth-child(odd) { padding-left: 0; }
}

@media(max-width:768px){
  #vc-sticky-mobile{
    position:fixed;bottom:0;left:0;right:0;z-index:9999;
    display:flex;gap:1px;background:rgba(201,168,71,.2);
    transform:translateY(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  }
  #vc-sticky-mobile.visible{transform:translateY(0)}
  .vc-sticky-btn{
    flex:1;padding:.875rem .5rem;text-align:center;text-decoration:none;
    font-family:'DM Sans',sans-serif;font-size:.65rem;letter-spacing:.1em;
    text-transform:uppercase;display:flex;flex-direction:column;
    align-items:center;gap:3px;
  }
  .vc-sticky-wa{background:#C9A847;color:#080808}
  .vc-sticky-call{background:#0a0a0a;color:#C9A847;border-top:1px solid rgba(201,168,71,.2)}
  .vc-sticky-ico{font-size:1rem;line-height:1}
}
@media(min-width:769px){#vc-sticky-mobile{display:none!important}}

@media(max-width:900px){
      #about .about-grid{grid-template-columns:1fr!important;gap:48px!important}
      #about .about-philosophy{grid-template-columns:1fr!important}
      #about > .container > div:last-child{grid-template-columns:1fr!important;gap:40px!important}
    }

/* ═══════════════════════════════════════════════════════════
   LAYOUT REPAIR — floating .wa-btn + mobile-only classes
   ═══════════════════════════════════════════════════════════ */

/* 1. Floating WhatsApp button — position:fixed bottom-right */
.wa-btn {
  position: fixed;
  bottom: 88px;           /* above sticky-cta bar on mobile */
  right: 24px;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 4px 16px rgba(37,211,102,.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}
.wa-btn svg {
  width: 26px;
  height: 26px;
  fill: #fff;
  flex-shrink: 0;
}
.wa-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(37,211,102,.5);
}

/* 2. Hide mobile-nav classes on desktop (≥1025px)
      These only make visual sense inside #mobileNavDrawer */
@media (min-width: 1025px) {
  .mob-sub-link,
  .mob-section-label,
  .mob-wa-btn,
  .mob-nav-label,
  .mob-nav-wa,
  .mob-link,
  .mob-nav-hd,
  .mob-nav-close {
    display: none !important;
  }
}

/* 3. Inside #mobileNavDrawer — restore display for mobile elements */
#mobileNavDrawer .mob-sub-link {
  display: flex;
  align-items: center;
  padding: 10px 24px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.875rem;
  color: rgba(245,242,236,0.6);
  text-decoration: none;
  transition: color 0.15s ease;
}
#mobileNavDrawer .mob-sub-link:hover {
  color: var(--gold, #C9A847);
}
#mobileNavDrawer .mob-section-label,
#mobileNavDrawer .mob-nav-label {
  display: block;
  padding: 14px 24px 6px;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201,168,71,0.55);
}
#mobileNavDrawer .mob-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 20px 24px 0;
  padding: 14px 20px;
  background: #25D366;
  color: #fff;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: opacity 0.2s;
}
#mobileNavDrawer .mob-wa-btn:hover {
  opacity: 0.88;
}
#mobileNavDrawer .mob-link {
  display: flex;
  align-items: center;
  padding: 13px 24px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 1rem;
  font-weight: 400;
  color: rgba(245,242,236,0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.15s ease;
}
#mobileNavDrawer .mob-link:hover {
  color: var(--gold, #C9A847);
}

/* 4. Safety net: any .mob-* class that leaks outside the drawer
      or overlay is hidden at all times at desktop widths */
body > .mob-sub-link,
body > .mob-section-label,
body > .mob-wa-btn,
body > .mob-nav-label,
body > .mob-nav-wa {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   VC-CONNECT EMBEDDED wa-btn — override floating styles
   wa-btn is now inside #vc-connect-menu, not floating fixed.
   ═══════════════════════════════════════════════════════════ */

/* Reset any previous position:fixed rules for .wa-btn
   when it sits inside the #vc-connect-menu flex column */
#vc-connect-menu .wa-btn,
#vc-connect-menu a.wa-btn {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;

  /* Match existing menu-item style */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.7);
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

/* WhatsApp green for the icon, match 16px siblings */
#vc-connect-menu .wa-btn svg {
  width: 16px !important;
  height: 16px !important;
  fill: #25D366;
  flex-shrink: 0;
}

#vc-connect-menu .wa-btn:hover {
  color: var(--gold, #C9A847);
  padding-left: 16px;
}

/* ── Desktop: hide mobile-only elements ──────────────────── */
/* Consolidated rule — covers all mob-* classes at ≥1025px   */
@media (min-width: 1025px) {
  .mob-sub-link,
  .mob-section-label,
  .mob-wa-btn,
  .mob-nav-label,
  .mob-nav-wa,
  .mob-link,
  .mob-nav-hd,
  .mob-nav-close,
  #mobileNavDrawer,
  #mobileNavOverlay {
    display: none !important;
  }
}

/* ── Mobile: restore inside the drawer ───────────────────── */
/* These rules fire at <1025px and undo the none above        */
@media (max-width: 1024px) {
  #mobileNavDrawer {
    display: flex;
    flex-direction: column;
  }
  #mobileNavDrawer .mob-sub-link {
    display: flex;
    align-items: center;
    padding: 10px 24px;
    font-size: 0.875rem;
    color: rgba(245, 242, 236, 0.6);
    text-decoration: none;
    transition: color 0.15s;
  }
  #mobileNavDrawer .mob-sub-link:hover {
    color: var(--gold, #C9A847);
  }
  #mobileNavDrawer .mob-section-label,
  #mobileNavDrawer .mob-nav-label {
    display: block;
    padding: 14px 24px 6px;
    font-size: 0.5rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(201, 168, 71, 0.55);
    font-family: var(--font-mono, 'DM Mono', monospace);
  }
  #mobileNavDrawer .mob-wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 24px;
    padding: 14px 20px;
    background: #25D366;
    color: #fff;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s;
  }
  #mobileNavDrawer .mob-wa-btn:hover {
    opacity: 0.88;
  }
  #mobileNavDrawer .mob-link {
    display: flex;
    align-items: center;
    padding: 13px 24px;
    font-size: 1rem;
    color: rgba(245, 242, 236, 0.85);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: color 0.15s;
  }
  #mobileNavDrawer .mob-link:hover {
    color: var(--gold, #C9A847);
  }
}

/* ── Safety net: any mob-* leaking outside drawer or overlay  */
body > .mob-sub-link,
body > .mob-section-label,
body > .mob-wa-btn,
body > .mob-nav-label,
body > .mob-nav-wa {
  display: none !important;
}