/* Hand-authored additions on top of the extracted design (not part of the original export). */

/* Sticky nav: hide on scroll down, reveal on scroll up */
.vnav { transition: transform .35s ease; }
.vnav.vnav-hidden { transform: translateY(-100%); }

/* The hamburger button ships with no bars at all (the original site drew them with
   runtime JS this static export doesn't have) — a plain white icon is the simplest
   reliably-visible fix. */
.vnav-burger i { color: #fff; font-size: 19px; }

/* Desktop nav: the source's own sizing is too large for the full link set at common
   laptop widths, so the row wraps to two lines. Tighten it up above the site's own
   mobile breakpoint (991px) only — the mobile stacked menu is untouched. */
@media (min-width: 992px) {
  .vnav-inner { height: 56px; gap: 10px; }
  .vnav-logo strong { font-size: 18px; }
  .vnav-logo small { font-size: 8.5px; letter-spacing: 2.5px; }
  .vnav-links { gap: 0; }
  .vnav-links a { font-size: 12.5px; padding: 6px 10px; white-space: nowrap; }
  .vnav-links a.vnav-sec { font-size: 11px; padding: 6px 8px; }
  .vnav-cta { font-size: 12.5px; padding: 7px 16px; }
}

/* Smooth in-page scrolling should not hide destination sections under the fixed nav */
#phs-projects, #phs-developer, #phs-gallery, #phs-contact { scroll-margin-top: 90px; }

/* Hacienda hero: extra tagline/description/stat-pair above the existing pricing pill */
.phs-hero-tagline {
  margin-top: 18px;
  font-family: "El Messiri", sans-serif;
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 700;
  color: #E4CE9E;
}
.phs-hero-desc {
  max-width: 640px;
  margin: 14px auto 0;
  font-size: clamp(13.5px, 1.8vw, 15.5px);
  font-weight: 300;
  line-height: 1.9;
  color: rgba(246, 243, 236, .85);
}
.phs-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 24px;
}
.phs-hero-stat { display: flex; flex-direction: column; align-items: center; }
.phs-hero-stat-num {
  font-family: "El Messiri", sans-serif;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: #C6A15B;
  direction: ltr;
}
.phs-hero-stat-label { margin-top: 4px; font-size: 12px; color: rgba(246, 243, 236, .75); }
.phs-hero-stat-sep { width: 1px; height: 34px; background: rgba(198, 161, 91, .35); }

/* About-project section: masterplan image + a closing note paragraph, reused on
   both the "about project" and "amenities" sections. */
.phd-map {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 10px;
  border-radius: 18px;
  border: 1px solid rgba(198, 161, 91, .3);
}
.phd-note {
  margin-top: 10px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(246, 243, 236, .7);
}

/* Hero scroll-down arrow (replaces the old hero CTA button) */
.phs-scroll-down {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(198, 161, 91, .16);
  border: 1px solid rgba(198, 161, 91, .55);
  color: #E4CE9E;
  font-size: 18px;
  text-decoration: none;
  animation: phs-bounce 2.2s ease-in-out infinite;
  transition: background .25s ease, color .25s ease;
}
.phs-scroll-down:hover { background: #C6A15B; color: #092A21; }
@keyframes phs-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .phs-scroll-down { animation: none; }
}

/* Informational banner: compact height on small screens so it never blocks content */
@media (max-width: 480px) {
  .vck { padding: 12px 14px; border-radius: 14px; }
  .vck-icon { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }
  .vck-title { font-size: 12.5px; margin-bottom: 2px; }
  .vck-text { font-size: 10.5px; line-height: 1.5; }
  .vck-actions { margin-top: 8px; gap: 8px; }
  .vck-accept { padding: 7px 14px; font-size: 11.5px; }
  .vck-close { width: 20px; height: 20px; font-size: 11px; top: 8px; }
}

/* Project names/captions that start with a digit (e.g. "97 Hills") get bidi-reordered
   to "Hills 97" inside RTL flow unless isolated; unicode-bidi:plaintext auto-detects
   the run's own direction the same way a <bdi> element would. */
.phg-caption, .pba-result-name { unicode-bidi: plaintext; }

/* Pricing/units disclaimer under the project cards */
.phs-disclaimer {
  max-width: 1160px;
  margin: 26px auto 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 11.5px;
  line-height: 1.9;
  color: rgba(34, 39, 31, .55);
}
.phs-disclaimer i { color: var(--phs-gold, #C6A15B); margin-top: 3px; flex-shrink: 0; }

/* Unit types shown as separate labels instead of one run-on sentence */
.phs-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.phs-type-badge {
  display: inline-block;
  background: rgba(14,59,46,.06);
  color: var(--phs-emerald, #0E3B2E);
  border: 1px solid rgba(14,59,46,.16);
  border-radius: 100px;
  padding: 4px 12px;
  font-family: "Almarai", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
}
.phs-type-note {
  margin: -8px 0 14px;
  font-size: 11.5px;
  color: rgba(34,39,31,.55);
}

/* ---- Home page project cards (vab-projects): the only nav path into the project
   pages from the home page, since About Us / Privacy carry no nav bar at all. ---- */
.vab-projects { padding: 70px 0; }
.vab-projects .vab-wrap { text-align: center; }
.vab-projects-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  text-align: right;
}
.vab-project-card {
  display: block;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(14, 59, 46, .09);
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.vab-project-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(14, 59, 46, .16); }
.vab-project-media { aspect-ratio: 16/10; overflow: hidden; }
.vab-project-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.vab-project-card:hover .vab-project-media img { transform: scale(1.06); }
.vab-project-body { padding: 20px 22px 24px; }
.vab-project-body h3 {
  font-family: "El Messiri", sans-serif;
  font-size: 18.5px;
  font-weight: 700;
  color: var(--vab-emerald);
  margin-bottom: 8px;
}
.vab-project-body p { font-size: 13px; font-weight: 300; line-height: 1.8; color: var(--vab-muted); margin-bottom: 14px; }
.vab-project-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--vab-gold); }
.vab-project-card:hover .vab-project-cta { color: var(--vab-emerald); }

/* ---- Budget assistant (pba-*): replaces the old lead-capture form ---- */
.pba-section {
  --pba-emerald: #0E3B2E;
  --pba-emerald-deep: #092A21;
  --pba-gold: #C6A15B;
  --pba-gold-soft: #E4CE9E;
  --pba-ivory: #F6F3EC;
  direction: rtl;
  background: var(--pba-ivory);
  padding: 70px 20px;
}
.pba-wrap { max-width: 760px; margin: 0 auto; }
.pba-header { text-align: center; margin-bottom: 34px; }
.pba-eyebrow {
  display: inline-block;
  font-family: "Almarai", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--pba-gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pba-title {
  font-family: "Almarai", sans-serif;
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 800;
  color: var(--pba-emerald);
  margin: 0 0 10px;
}
.pba-subtitle { color: rgba(34,39,31,.65); font-size: 14.5px; margin: 0; }
.pba-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 18px 46px rgba(14,59,46,.1);
  padding: 30px;
}
.pba-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.pba-field { display: flex; flex-direction: column; gap: 8px; }
.pba-field label {
  font-family: "Almarai", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--pba-emerald);
}
.pba-field input {
  border: 1px solid rgba(14,59,46,.2);
  border-radius: 12px;
  padding: 13px 14px;
  font-family: "Almarai", sans-serif;
  font-size: 14px;
  color: var(--pba-emerald-deep);
  background: var(--pba-ivory);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pba-field input:focus {
  outline: none;
  border-color: var(--pba-gold);
  box-shadow: 0 0 0 3px rgba(198,161,91,.2);
}
.pba-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--pba-emerald);
  color: var(--pba-gold-soft);
  font-family: "Almarai", sans-serif;
  font-weight: 800;
  font-size: 15px;
  padding: 15px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background .25s ease, transform .2s ease;
}
.pba-btn:hover { background: var(--pba-emerald-deep); transform: translateY(-2px); }
.pba-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.pba-btn:disabled:hover { background: var(--pba-emerald); transform: none; }
.pba-result {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px dashed rgba(14,59,46,.18);
  text-align: center;
}
.pba-result-label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--pba-gold);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.pba-result-name {
  font-family: "Almarai", sans-serif;
  font-size: 21px;
  font-weight: 800;
  color: var(--pba-emerald);
  margin-bottom: 4px;
}
.pba-result-meta { color: rgba(34,39,31,.65); font-size: 13.5px; margin-bottom: 16px; }
.pba-result-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pba-gold);
  color: var(--pba-emerald-deep);
  font-family: "Almarai", sans-serif;
  font-weight: 800;
  font-size: 14px;
  padding: 12px 26px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform .2s ease;
}
.pba-result-wa:hover { transform: translateY(-2px); }
.pba-another {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  color: var(--pba-emerald);
  font-family: "Almarai", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}
.pba-another:hover { color: var(--pba-gold); }

@media (max-width: 700px) {
  .pba-fields { grid-template-columns: 1fr; }
  .pba-card { padding: 22px; }
}