/* Inner pages shared */
body { background: #fff; }

/* ===== Property archive header + Grid/Map view toggle ===== */
/* Shared by the grid archive and the /projects/map/ view (both load
   inner.css), so the toggle stays styled on both. Map-only styles
   (.props-map*, .rh-mappop*) live in map.css. */
.props-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.props-head__intro { flex: 1 1 420px; min-width: 0; }

.props-viewtoggle {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 4px;
  gap: 2px;
  margin-top: 6px;
}
.props-viewtoggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  color: var(--muted);
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.props-viewtoggle__btn svg { display: block; opacity: 0.8; }
.props-viewtoggle__btn:hover { color: var(--ink); }
.props-viewtoggle__btn.is-active { background: var(--forest); color: var(--bone); }
.props-viewtoggle__btn.is-active svg { opacity: 1; }
/* Client-side toggles (Communities index + detail) render the buttons as
   <button>; reset native chrome so they match the projects archive's <a>. */
button.props-viewtoggle__btn { -webkit-appearance: none; appearance: none; background: none; border: 0; cursor: pointer; }
@media (max-width: 768px) {
  .props-head { gap: 16px; }
  .props-viewtoggle { margin-top: 0; }
}

/* ===== Property archive tab strip ===== */
/* Segments by sales state. Tab change clears dropdown filters; filter change
   keeps the active tab (asymmetric reset). Counts are static per segment,
   not affected by dropdown filters. */
.archive-tabs {
  display: flex;
  gap: 36px;
  align-items: baseline;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 28px;
}
.archive-tab {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: -0.005em;
  padding: 4px 0 16px;
  transition: color 0.25s ease;
}
.archive-tab:hover { color: var(--ink); }
.archive-tab.is-active { color: var(--ink); }
.archive-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -15px;
  height: 1px;
  background: var(--gold-emaar);
}
.archive-tab-count {
  font-family: var(--font-mono);
  font-size: 0.6em;
  color: var(--muted);
  margin-left: 6px;
  font-weight: 400;
  letter-spacing: 0.08em;
  vertical-align: 0.15em;
}
.archive-tab.is-active .archive-tab-count { color: var(--gold-emaar); }
@media (max-width: 720px) {
  .archive-tabs {
    gap: 22px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* allow horizontal scroll without breaking edge-to-edge container padding */
    margin-left: calc(var(--pad-x) * -1);
    margin-right: calc(var(--pad-x) * -1);
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }
  .archive-tabs::-webkit-scrollbar { display: none; }
  .archive-tab { white-space: nowrap; flex-shrink: 0; }
}

/* Secondary line on property cards: shown on the All tab beneath the sale
   price ("Lease enquiries by request"), and as the only line on the Rent tab. */
.prop-price-lease {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 4px;
}

/* Commercial-space badge, surfaced on cards for buildings that include
   shops / offices / mixed-use. Lives inside .prop-tags but reads as a
   separate signal: gold accent + slimmer weight than the bedroom pills. */
.prop-tag-commercial {
  border-color: var(--gold-emaar) !important;
  color: var(--gold-emaar);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
}

.nav { background: rgba(10,10,10,0.68); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); border-bottom-color: rgba(255,255,255,0.10); padding: 12px var(--pad-x); padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
/* The iPhone status-bar strip above this always-dark nav is covered by the
   dark canvas background (`html { background: var(--ink) }` in tokens.css) —
   see the note above the admin-bar rules in components.css. */

.page-head {
  padding: 180px var(--pad-x) 50px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.page-crumbs { color: var(--muted); margin-bottom: 50px; display: flex; gap: 10px; }
.page-crumbs a { transition: color 0.3s; }
.page-crumbs a:hover { color: var(--ink); }
.page-title {
  font-size: clamp(56px, 9vw, 144px);
  letter-spacing: -0.035em;
  line-height: 0.94;
  margin-bottom: 36px;
}
.page-title em { font-style: normal; color: var(--gold-emaar); opacity: 1; }
.page-lede { max-width: 640px; }

/* Fallback template (page.php) — legal/utility pages. Quieter title than the
   marquee inner pages; body column shares the head's left edge (no centering). */
.page-title-compact { font-size: clamp(40px, 5.5vw, 76px); }
.page-body { padding-bottom: 120px; }
.page-body-text { max-width: 860px; }
.page-body-text h2 { font-size: 24px; margin: 40px 0 14px; }
.page-body-text h3 { font-size: 19px; margin: 32px 0 12px; }
.page-body-text p + p { margin-top: 14px; }
.page-body-text ul, .page-body-text ol { margin: 14px 0 14px 22px; }

/* Filters */
.filters-bar {
  padding-top: 30px;
  padding-bottom: 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 30px;
}
.filters-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 30px;
  align-items: end;
}
.filter-group { display: flex; flex-direction: column; gap: 8px; }
.filter-group label { color: var(--muted); font-size: 10px; }
.filter-group select, .filter-group input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230F0F0F' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 20px;
}
.filter-group input { background-image: none; padding-right: 0; }
.filter-search input::placeholder { color: var(--muted); }
.filter-count { color: var(--muted); font-size: 11px; padding-bottom: 8px; white-space: nowrap; }
.filter-count span { color: var(--ink); font-weight: 500; }

@media (max-width: 900px) {
  .filters-row { grid-template-columns: 1fr 1fr; }
  .filter-count { grid-column: span 2; }
  .page-head { padding-top: 130px; }
}

/* Property detail */
.pd-hero {
  position: relative;
  min-height: 92vh;
  background: var(--ink);
  color: var(--bone);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px var(--pad-x) 60px;
  overflow: hidden;
}
.pd-hero-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.7;
  transform: scale(1.04);
  animation: heroZoom 30s ease-out forwards;
  will-change: transform;
}
/* Slow Ken Burns push-in for the hero image — the layer that shows whenever
   there's no per-property background video (and on mobile / slow networks,
   where the video is hidden or hasn't started). One-shot, then holds; mirrors
   the homepage kbCycle easing. Disabled under reduced-motion below. */
@keyframes heroZoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}
/* Optional per-property background video — mirrors .hero-video on the homepage.
   Painted above .pd-hero-img and below .pd-hero-veil so the existing veil + content
   stack continues to work unchanged. JS adds .is-playing once the `playing` event
   fires; the hero image remains visible until then (and stays put on mobile and
   under reduced-motion, where the video is hidden). */
.pd-hero-video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.92) contrast(1.06) saturate(0.92) sepia(0.04);
  opacity: 0;
  transition: opacity 600ms var(--ease-out, ease-out);
}
.pd-hero-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pd-hero-video { display: none !important; }
  .pd-hero-img { animation: none; }
}
.pd-hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.85) 100%); z-index: 2; }
.pd-hero-content { position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto; width: 100%; }
.pd-hero-meta { display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; margin-bottom: 32px; font-weight: 400; }
.pd-hero-meta span { display: flex; align-items: center; gap: 10px; }
.pd-hero-meta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); padding: 0; flex-shrink: 0; }
.pd-hero h1, .pd-hero-title { font-size: clamp(48px, 8vw, 120px); letter-spacing: -0.03em; line-height: 0.98; margin-bottom: 32px; }
.pd-hero-tags { display: flex; gap: 40px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid rgba(244,241,236,0.25); max-width: 1000px; }
.pd-hero-tags > div { display: flex; flex-direction: column; gap: 6px; }
.pd-hero-tags .mono { opacity: 0.7; font-size: 11px; letter-spacing: 0.12em; }
.pd-hero-tags .val { font-family: var(--font-display); font-size: 26px; line-height: 1.1; }

.pd-section { padding: 100px var(--pad-x); max-width: var(--max-w); margin: 0 auto; }
.pd-overview {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
}
.pd-overview h2 { font-size: clamp(36px, 4vw, 60px); margin-bottom: 24px; }
.pd-overview p { margin-bottom: 18px; }
.pd-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 50px;
  margin-top: 50px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.pd-stat-num { font-family: var(--font-display); font-size: 56px; line-height: 1; margin-bottom: 6px; letter-spacing: -0.02em; }
.pd-stat-label { font-size: 11px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; }

/* Gallery — base styles consolidated lower in this file (search "Gallery — count-aware mosaic") */

/* Plans */
.pd-plans { background: var(--bone); color: var(--ink); padding: 100px var(--pad-x); margin-top: 80px; }
.pd-plans-inner { max-width: var(--max-w); margin: 0 auto; }
.pd-plans-title { font-size: clamp(40px, 5vw, 72px); margin-bottom: 60px; }
.pd-videos { padding-top: 40px; max-width: calc(var(--max-w) + 2 * var(--pad-x)); }
.pd-videos-title { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 28px; }
.pd-plans-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.15); }
/* An odd number of unit types leaves an empty cell in the last row of a
   2-column grid — stretch the final card full-width instead. */
.pd-plans-grid .pd-plan:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pd-plan { background: #fff; padding: 36px 30px; transition: background 0.4s; }
.pd-plan:hover { background: var(--paper); }
.pd-plan-name { font-family: var(--font-display); font-size: 28px; margin-bottom: 8px; letter-spacing: -0.01em; line-height: 1.2; }
.pd-plan-price { font-family: var(--font-display); font-size: 24px; margin-top: 20px; }
.pd-plan-note { background: var(--bone-2); padding: 28px 32px; margin-top: 16px; border-radius: 4px; display: flex; flex-direction: column; gap: 10px; }
.pd-plan-note p { font-family: var(--font-display); font-size: 18px; line-height: 1.45; color: var(--ink-soft); margin: 0; }

/* Payment */
.pd-payment { padding: 100px var(--pad-x); max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
.pd-payment h2 { font-size: clamp(36px, 4vw, 56px); margin-bottom: 24px; }
.pd-payment-steps { display: flex; flex-direction: column; gap: 24px; }
.pd-payment-step { display: grid; grid-template-columns: 60px 1fr auto; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.pd-payment-step .num { font-family: var(--font-display); font-size: 36px; color: var(--gold-emaar); }
.pd-payment-step h4 { font-size: 18px; margin-bottom: 4px; font-weight: 500; }
.pd-payment-step p { font-size: 13px; color: var(--muted); }
.pd-payment-step .pct { font-family: var(--font-display); font-size: 32px; }

/* Contact panel for property */
.pd-contact {
  background: var(--bone);
  color: var(--ink);
  padding: 100px var(--pad-x);
  margin-top: 0;
}
.pd-contact-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.pd-contact h2 { font-size: clamp(36px, 5vw, 64px); }

/* About page */
.about-intro { padding: 60px var(--pad-x) 100px; max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; }
.about-intro p { font-size: clamp(22px, 2.4vw, 32px); font-family: var(--font-display); line-height: 1.4; color: var(--ink-soft); }
.about-intro p + p { margin-top: 28px; }

.about-image-block {
  position: relative;
  height: 70vh;
  background-size: cover;
  background-position: center;
  margin: 0;
}

.timeline { padding: 120px var(--pad-x); max-width: var(--max-w); margin: 0 auto; }
.timeline h2 { font-size: clamp(40px, 5vw, 72px); margin-bottom: 60px; max-width: 600px; }
.timeline-list { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.timeline-row { display: grid; grid-template-columns: 120px 1fr 2fr; gap: 60px; padding: 40px 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: padding 0.4s; }
.timeline-row:hover { padding-left: 16px; }
.timeline-year { font-family: var(--font-display); font-size: 36px; color: var(--forest); }
.timeline-title { font-family: var(--font-display); font-size: 24px; }
.timeline-desc { color: var(--muted); font-size: 14px; max-width: 520px; }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 30px; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 30px; }
.team-card { display: flex; flex-direction: column; gap: 18px; }
.team-card-img { aspect-ratio: 4/5; background: linear-gradient(135deg, var(--bone-2), var(--bone)); position: relative; overflow: hidden; }
.team-card-img .placeholder-stripe { position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, transparent 0, transparent 14px, rgba(15,15,15,0.04) 14px, rgba(15,15,15,0.04) 15px); }
.team-card-img .ph-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 64px; color: var(--muted); }
.team-card h4 { font-family: var(--font-display); font-size: 24px; font-weight: 500; }
.team-card .role { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--forest); margin-top: -4px; }
.team-card p { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* About page — location grid (vignette image cards) */
.location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px 28px;
}
.location-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.location-card-img-wrap {
  aspect-ratio: 4/3;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 10px;
}
.location-card-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: saturate(0.92) contrast(1.04);
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}
.location-card:hover .location-card-img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1);
}
.location-card-tagline {
  transition: transform 0.5s var(--ease-out), color 0.5s var(--ease-out);
}
.location-card:hover .location-card-tagline {
  color: var(--ink-soft);
  transform: translateY(-2px);
}
.location-card-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 8px;
}
.location-card-tagline {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
.location-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 64px;
}
@media (max-width: 600px) {
  .location-actions { margin-top: 48px; }
  .location-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* About page — testimonials (uniform card whether video, photo or placeholder) */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px 32px;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
}
.testimonial-media {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  background: var(--bone-2);
  border-radius: 10px;
  margin-bottom: 22px;
}
.testimonial-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.testimonial-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.92) contrast(1.04);
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}
.testimonial-card:hover .testimonial-photo {
  transform: scale(1.04);
  filter: saturate(1) contrast(1);
}
.testimonial-photo-placeholder {
  background: linear-gradient(135deg, var(--bone-2) 0%, var(--bone) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  filter: none;
}
.testimonial-photo-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0, transparent 12px, rgba(15,15,15,0.04) 12px, rgba(15,15,15,0.04) 13px);
}
.testimonial-photo-placeholder svg {
  position: relative;
  opacity: 0.55;
}
.testimonial-quote {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 18px;
  letter-spacing: -0.005em;
}
.testimonial-quote::before { content: '“'; margin-right: 2px; }
.testimonial-quote::after  { content: '”'; }
.testimonial-attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.testimonial-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.testimonial-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Contact page */
.contact-grid {
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
}
.contact-info h3 { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-weight: 500; }
.contact-info-block { padding: 24px 0; border-bottom: 1px solid var(--line); }
.contact-info-block p { font-family: var(--font-display); font-size: 22px; line-height: 1.4; }
.contact-info-block a { transition: color 0.3s; }
.contact-info-block a:hover { color: var(--forest); }

.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 30px; }
.contact-form .full { grid-column: span 2; }
.contact-field { display: flex; flex-direction: column; gap: 8px; }
.contact-field label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.contact-field input, .contact-field select, .contact-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  padding: 10px 0;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  font-weight: 400;
  appearance: none;
}
.contact-field textarea { resize: vertical; min-height: 100px; line-height: 1.55; }
.contact-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230F0F0F' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; padding-right: 20px; }
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { border-bottom-color: var(--forest); }
.contact-field.error input, .contact-field.error select, .contact-field.error textarea { border-bottom-color: #B83E3E; }
.contact-submit { grid-column: span 2; display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.contact-success { background: var(--forest); color: var(--bone); padding: 32px; display: none; grid-column: span 2; }
.contact-success.show { display: block; }
.contact-success h4 { font-family: var(--font-display); font-size: 32px; margin-bottom: 12px; }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid #000; }
.faq-item:first-of-type { border-top: 1px solid #000; }
.faq-q {
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: 24px 0; font-family: var(--font-display); font-size: clamp(18px,2vw,24px);
  cursor: pointer; gap: 20px;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: '+'; font-family: var(--font-sans); font-size: 22px; font-weight: 300; flex-shrink: 0; transition: transform 0.3s; }
details[open] .faq-q::after { transform: rotate(45deg); }
.faq-a { padding: 0 0 24px; max-width: 680px; }
.faq-a p { font-size: 15px; color: var(--muted); line-height: 1.7; }

/* About page stats sidebar */
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 0; padding-bottom: 40px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.about-stat .num { font-family: var(--font-display); font-size: 64px; line-height: 1; letter-spacing: -0.025em; }
.about-stat .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

/* Progress report */
.progress-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #000; border: 1px solid #000; margin-top: 60px; }
.progress-card { background: #fff; padding: 36px 30px; transition: background 0.4s; }
.progress-card:hover { background: #f7f7f7; }
.progress-badge { display: inline-block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 12px; margin-bottom: 24px; }
.progress-badge-completed { background: var(--forest); color: var(--bone); }
.progress-badge-finishing { background: var(--gold); color: var(--bone); }
.progress-badge-construction { background: var(--ink-2); color: var(--bone); }
.progress-card h3 { font-family: var(--font-display); font-size: 28px; margin-bottom: 6px; }
.progress-card .loc { font-size: 12px; color: var(--muted); margin-bottom: 24px; }
.progress-meta { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.progress-meta-row { display: flex; justify-content: space-between; font-size: 12px; }
.progress-meta-row .k { color: var(--muted); }
.progress-meta-row .v { font-weight: 500; }
.progress-bar { height: 2px; background: var(--line); margin-top: 24px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--forest); width: 0; transition: width 1.6s var(--ease-out); }
.progress-bar-fill.in { width: var(--pct, 0%); }

/* Virtual tours */
.tours-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px; }
.tour-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.tour-thumb { aspect-ratio: 16/9; background-size: cover; background-position: center; position: relative; overflow: hidden; }
.tour-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,15,15,0.55) 0%, transparent 60%); }
.tour-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; }
.tour-play { width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid rgba(244,241,236,0.55); display: flex; align-items: center; justify-content: center; color: var(--bone); transition: transform 0.3s var(--ease-out), background 0.3s; background: rgba(15,15,15,0.2); backdrop-filter: blur(8px); }
.tour-card:hover .tour-play { transform: scale(1.1); background: rgba(15,15,15,0.5); }
.tour-no-url { opacity: 0.45; pointer-events: none; cursor: default; }
.tour-body { padding: 20px 0 0; }
.tour-body h3 { font-family: var(--font-display); font-size: 24px; margin-bottom: 6px; }
.tour-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 12px; color: var(--forest); transition: gap 0.3s; }
.tour-card:hover .tour-cta { gap: 14px; }

/* Media / News grid */
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; }
.media-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.media-img { aspect-ratio: 16/9; overflow: hidden; }
.media-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); display: block; }
.media-card:hover .media-img img { transform: scale(1.04); }
.media-body { padding: 20px 0 0; border-top: 1px solid #000; margin-top: 16px; }
.media-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.media-body h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.15; margin-bottom: 10px; }
.media-body p { font-size: 13px; color: var(--muted); line-height: 1.65; }
.media-body .media-img-placeholder { background: var(--bone-2); display: flex; align-items: center; justify-content: center; }
.media-placeholder-stripe { position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, transparent 0, transparent 14px, rgba(15,15,15,0.04) 14px, rgba(15,15,15,0.04) 15px); }
.media-read { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 14px; transition: color 0.3s, gap 0.3s; }
.media-card:hover .media-read { color: var(--forest); gap: 12px; }

/* ===== Video archive (rh_video CPT) ===== */
.video-filter-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.video-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.video-chip:hover { border-color: var(--ink); }
.video-chip.is-active { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 28px;
}
.video-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.video-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bone-2);
  /* slight radius — deliberate exception to the site's square-corner default, media thumbs only (user request) */
  border-radius: 4px;
}
.video-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.video-card-thumb-placeholder {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0, transparent 14px, rgba(15,15,15,0.04) 14px, rgba(15,15,15,0.04) 15px);
}
.video-card:hover .video-card-thumb img { transform: scale(1.04); }
.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bone);
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.20) 100%);
  transition: background 0.25s;
}
.video-play-overlay::before {
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(15,15,15,0.55);
  border: 1px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
  transition: background 0.25s, transform 0.25s;
}
.video-play-overlay svg { position: relative; z-index: 1; transform: translateX(2px); }
.video-card:hover .video-play-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.32) 100%); }
.video-card:hover .video-play-overlay::before { background: var(--gold-emaar); transform: scale(1.06); }
.video-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 4px 8px;
  font-size: 10px;
  background: rgba(15,15,15,0.78);
  color: var(--bone);
  letter-spacing: 0.08em;
}
.video-card-body { display: flex; flex-direction: column; gap: 6px; }
.video-card-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold-emaar);
  text-transform: uppercase;
}
.video-card-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--ink);
}
.video-card-property { font-size: 14px; color: var(--muted); }

/* Lightbox modal */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  background: rgba(15,15,15,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.video-lightbox.is-open { display: flex; }
.video-lightbox-close {
  position: absolute;
  top: 24px;
  right: 30px;
  font-size: 36px;
  line-height: 1;
  color: var(--bone);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
}
.video-lightbox-close:hover { color: var(--gold-emaar); }
.video-lightbox-frame {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.video-lightbox-iframe-wrap {
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  background: #000;
}
.video-lightbox-iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-lightbox-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--bone);
  text-align: center;
}
.video-lightbox-desc {
  margin: 10px auto 0;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(244, 241, 236, 0.75);
  text-align: center;
}
.video-lightbox-desc:empty,
.video-lightbox-props:empty {
  display: none;
}
.video-lightbox-props {
  margin: 12px 0 0;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.video-lightbox-prop {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--bone);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Pagination — scoped to .pagination wrapper so it doesn't collide with the main nav */
.pagination, .wp-pagenavi { display: flex; gap: 8px; justify-content: center; margin-top: 60px; padding-top: 40px; border-top: 1px solid #000; flex-wrap: wrap; }
.pagination a, .pagination span, .wp-pagenavi a, .wp-pagenavi span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-family: var(--font-mono); font-size: 11px; border: 1px solid #000; transition: all 0.3s; }
/* Prev/Next carry a text label + arrow — let them size to content so the arrow stays inline */
.pagination .prev, .pagination .next, .wp-pagenavi .prev, .wp-pagenavi .next { width: auto; padding: 0 14px; gap: 6px; white-space: nowrap; }
.pagination .current, .wp-pagenavi .current { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.pagination a:hover, .wp-pagenavi a:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* Single post body — styles raw the_content() output to match site typography */
.post-content { color: var(--ink-soft); font-size: 18px; line-height: 1.75; }
.post-content > * + * { margin-top: 1.2em; }
.post-content p { margin: 0; font-size: 18px; line-height: 1.75; color: var(--ink-soft); }
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 1em 0 0.4em;
}
.post-content h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; margin-top: 0; }
.post-content h2 { font-size: clamp(24px, 2.4vw, 32px); }
.post-content h3 { font-size: clamp(20px, 1.8vw, 24px); }
.post-content h4 { font-size: 19px; }
.post-content h5 { font-size: 18px; font-family: var(--font-sans); font-weight: 500; letter-spacing: 0; }
.post-content h6 { font-size: 11px; font-family: var(--font-sans); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); }
.post-content a { color: var(--forest); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.2s var(--ease-out); }
.post-content a:hover { color: var(--forest-deep); }
.post-content strong, .post-content b { font-weight: 600; color: var(--ink); }
.post-content em, .post-content i { font-style: italic; }
.post-content ul, .post-content ol { padding-left: 1.4em; }
.post-content ul li, .post-content ol li { margin: 0.4em 0; line-height: 1.7; color: var(--ink-soft); }
.post-content ul { list-style: disc; }
.post-content ul li::marker { color: var(--gold); }
.post-content ol { list-style: decimal; }
.post-content ol li::marker { font-family: var(--font-mono); font-size: 0.9em; color: var(--muted); }
.post-content ul ul, .post-content ol ol, .post-content ul ol, .post-content ol ul { margin-top: 0.4em; }
.post-content blockquote {
  border-left: 2px solid var(--gold);
  padding: 8px 0 8px 28px;
  margin: 2em 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.35;
  color: var(--ink);
  font-style: normal;
}
.post-content blockquote p { font-size: inherit; line-height: inherit; color: inherit; }
.post-content blockquote cite { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-style: normal; }
.post-content img, .post-content figure, .post-content video, .post-content iframe { display: block; max-width: 100%; height: auto; margin: 2em auto; }
.post-content figure img { margin: 0; }
.post-content figcaption { margin-top: 12px; font-size: 12px; letter-spacing: 0.04em; color: var(--muted); text-align: center; }
.post-content hr { border: 0; border-top: 1px solid var(--line); margin: 3em 0; }
.post-content code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bone-2); padding: 2px 6px; border-radius: 2px; }
.post-content pre { font-family: var(--font-mono); font-size: 13px; background: var(--ink); color: var(--bone); padding: 24px; overflow-x: auto; line-height: 1.55; }
.post-content pre code { background: transparent; padding: 0; color: inherit; }
.post-content table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: 15px; }
.post-content th, .post-content td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.post-content th { font-family: var(--font-sans); font-weight: 500; color: var(--ink); }
.post-content .wp-block-pullquote, .post-content .wp-block-quote { border-left: 2px solid var(--gold); padding-left: 28px; }
.post-content .alignleft { float: left; margin: 0.5em 2em 1em 0; }
.post-content .alignright { float: right; margin: 0.5em 0 1em 2em; }
.post-content .aligncenter { margin-left: auto; margin-right: auto; }

@media (max-width: 1100px) {
  .pd-overview, .pd-payment, .contact-grid, .about-intro, .pd-contact-inner, .team-head { grid-template-columns: 1fr; gap: 36px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .pd-section, .pd-plans, .pd-contact, .pd-payment, .timeline, .team-section, .about-intro { padding: 60px var(--pad-x); }
  .timeline-row { grid-template-columns: 80px 1fr; }
  .timeline-desc { grid-column: span 2; padding-left: 140px; }
  .contact-form, .contact-form .full, .contact-submit, .contact-success { grid-template-columns: 1fr; grid-column: span 1; }
  .tours-grid, .media-grid { grid-template-columns: repeat(2, 1fr); }
  .progress-grid { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .team-grid { grid-template-columns: 1fr; }
  .timeline-row { grid-template-columns: 70px 1fr; gap: 24px; }
  .timeline-desc { padding-left: 94px; }
  .pd-hero h1 { font-size: clamp(40px, 10vw, 56px); }
  .pd-hero { padding: 100px var(--pad-x) 36px; }
  .page-head { padding-top: 100px; padding-bottom: 24px; }
  .pd-section, .pd-plans, .pd-contact, .pd-payment, .timeline, .team-section, .about-intro { padding: 48px var(--pad-x); }
  .filters-row { grid-template-columns: 1fr; gap: 18px; }
  .filter-count { grid-column: auto; }
  .tours-grid, .media-grid, .progress-grid { grid-template-columns: 1fr; }
  .pd-plans-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .video-lightbox-close { top: 12px; right: 12px; font-size: 28px; }
}

/* ===== Property gallery lightbox =====
 * Revert: delete this entire block. Also delete the .pd-image-lightbox markup
 * in single-rh_property.php and the matching JS block in site.js.
 *
 * (The .pd-gal-img base + hover/focus styles previously here moved into the
 * "Gallery — count-aware mosaic" block lower in this file.)
 */
.pd-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  background: rgba(15,15,15,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pd-image-lightbox.is-open { display: flex; }
.pd-image-lightbox-close {
  position: absolute;
  top: 24px;
  right: 30px;
  font-size: 36px;
  line-height: 1;
  color: var(--bone);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  z-index: 2;
}
.pd-image-lightbox-close:hover { color: var(--gold-emaar); }
.pd-image-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(15,15,15,0.55);
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--bone);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, transform 0.25s;
  backdrop-filter: blur(4px);
  z-index: 2;
}
.pd-image-lightbox-nav:hover { background: var(--gold-emaar); transform: translateY(-50%) scale(1.06); }
.pd-image-lightbox-prev { left: 24px; }
.pd-image-lightbox-next { right: 24px; }
.pd-image-lightbox-nav[hidden] { display: none; }
.pd-image-lightbox-frame {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  max-height: 100%;
}
.pd-image-lightbox-frame img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.pd-image-lightbox-counter {
  color: var(--bone);
  opacity: 0.8;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .pd-image-lightbox-nav { width: 44px; height: 44px; font-size: 26px; }
  .pd-image-lightbox-prev { left: 10px; }
  .pd-image-lightbox-next { right: 10px; }
  .pd-image-lightbox-close { top: 12px; right: 12px; font-size: 28px; }
  .pd-image-lightbox-frame img { max-width: 96vw; max-height: 78vh; }
}
/* ===== /Property gallery lightbox ===== */

/* ===== Property detail v2 (Rodol Heights design) =====
 * Full redesign of single-rh_property.php — hero, overview, gallery mosaic,
 * amenity icon grid, dark payment timeline, location, split booking, sticky bar.
 *
 * Mapping to the original design's tokens (left = design / right = site):
 *   green-800/900 → forest / forest-deep
 *   cream-50/100  → paper / bone
 *   cream-200     → bone-2
 *   gold-500      → gold-emaar
 *   gold-600      → gold
 *
 * Revert: delete this entire block (everything between the open and close
 * markers). The earlier .pd-* rules above still hold the original v1 styles,
 * so removing this block restores the previous look.
 */

/* Hero — full-bleed photo + scrim + breadcrumb-on-top + chips + big title */
.pd-hero {
  min-height: min(78vh, 720px);
  padding: 120px var(--pad-x) 56px;
  display: flex;
  align-items: flex-end;
  position: relative;
}
.pd-hero .pd-hero-img { filter: brightness(0.78); }
.pd-hero .pd-hero-veil {
  background: linear-gradient(180deg, rgba(14,44,32,0.55) 0%, rgba(14,44,32,0.20) 30%, rgba(14,44,32,0.85) 100%);
}
.pd-hero-content { color: var(--bone); width: 100%; }
.pd-hero__breadcrumb {
  position: absolute;
  top: 28px;
  left: var(--pad-x);
  right: var(--pad-x);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(244,241,236,0.7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  z-index: 3;
}
.pd-hero__breadcrumb a { color: inherit; transition: color 0.15s; }
.pd-hero__breadcrumb a:hover { color: var(--gold-emaar); }
.pd-hero__breadcrumb .sep { margin: 0 10px; color: rgba(244,241,236,0.4); }
.pd-hero__breadcrumb .current { color: var(--gold-emaar); }

.pd-hero__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.pd-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}
.pd-chip--success {
  background: rgba(193,162,109,0.18);
  color: var(--gold-emaar);
  border: 1px solid rgba(193,162,109,0.4);
}
.pd-chip--success::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-emaar);
  box-shadow: 0 0 0 3px rgba(193,162,109,0.25);
}
.pd-chip--status {
  background: rgba(255,255,255,0.08);
  color: var(--bone);
  border: 1px solid rgba(255,255,255,0.18);
}
.pd-chip--sold {
  background: var(--gold-emaar);
  color: var(--ink);
  border: 1px solid var(--gold-emaar);
  font-weight: 700;
  box-shadow: 0 4px 14px -4px rgba(193, 162, 109, 0.7);
}
/* Actionable "Enquire about availability" chip — links to the on-page contact
   form, so it gets a CTA affordance (arrow + hover) the static chips don't. */
.pd-chip--link {
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.pd-chip--link::after {
  content: "\2192";
  font-size: 12px;
  transition: transform 0.3s var(--ease-out);
}
.pd-chip--link:hover {
  background: rgba(193,162,109,0.18);
  border-color: rgba(193,162,109,0.5);
  color: var(--gold-emaar);
}
.pd-chip--link:hover::after { transform: translateX(3px); }
.pd-hero__location {
  font-size: 16px;
  color: rgba(244,241,236,0.82);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pd-hero__location svg { flex: none; opacity: 0.85; width: 16px; height: 16px; }
.pd-hero h1.pd-hero-title,
.pd-hero .pd-hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0;
}
.pd-hero-title .accent { color: var(--gold-emaar); font-style: normal; }
.pd-hero__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 400;
  color: rgba(244,241,236,0.85);
  margin: 14px 0 0;
  max-width: 680px;
  line-height: 1.3;
}
.pd-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(244,241,236,0.18);
}
.pd-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 24px;
  padding-left: 24px;
  border-right: 1px solid rgba(244,241,236,0.12);
}
.pd-hero__stat:first-child { padding-left: 0; }
.pd-hero__stat:last-child { border-right: 0; }
.pd-hero__stat-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244,241,236,0.58);
}
.pd-hero__stat-value {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--bone);
}
.pd-hero__stat-hint {
  font-size: 12px;
  color: rgba(244,241,236,0.6);
  margin-top: 2px;
}
.pd-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
@media (max-width: 840px) {
  .pd-hero { min-height: auto; padding: 100px var(--pad-x) 40px; }
  .pd-hero__stats { grid-template-columns: repeat(2,1fr); gap: 24px; padding-top: 20px; }
  .pd-hero__stat { border-right: 0; padding-right: 0; }
  .pd-hero__stat-value { font-size: 28px; }
}

/* Overview — 2-col with facts panel on the right */
.pd-overview {
  display: block;
  grid-template-columns: none;
  gap: 0;
  background: #fff;
  padding: clamp(56px, 8vw, 120px) var(--pad-x);
}
.pd-overview-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}
.pd-overview__lede h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}
.pd-overview__lede .pd-eyebrow { display: block; margin-bottom: 18px; }
.pd-overview__lede p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 0 18px;
}
.pd-overview__lede .entry-content p,
.pd-overview__lede .entry-content { color: var(--ink-soft); }
.pd-overview__lede-cta { display: flex; gap: 10px; margin-top: 36px; max-width: 460px; flex-wrap: wrap; }
.pd-overview__lede-cta .btn { flex: 1 1 200px; justify-content: center; }

/* Per-property promo video (rh_promo_video_id) — inline 16:9 embed under the heading */
.pd-promo-video { margin: 4px 0 28px; }
.pd-promo-video__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.pd-promo-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.pd-facts {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 32px;
  border-radius: 4px;
  max-width: 480px;
  width: 100%;
  justify-self: end;
}
.pd-facts__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.pd-facts__row:first-child { padding-top: 4px; }
.pd-facts__row:last-child { border-bottom: 0; padding-bottom: 4px; }
.pd-facts__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.pd-facts__value {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
  text-align: right;
}
.pd-facts__value small {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.pd-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
@media (max-width: 840px) {
  .pd-overview-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Gallery — count-aware mosaic
 *
 * The grid layout adapts to the actual number of rendered tiles via
 * .pd-gallery[data-tile-count="N"]. With a single fixed mosaic the layout left
 * voids whenever a property had fewer than 5 images (e.g. N=2 → giant
 * feature image on the left, small tile top-right, empty bottom-right).
 *
 * Layouts (desktop ≥841px):
 *   N=1 → one full-width tile, 420px
 *   N=2 → two equal tiles side-by-side, 360px each (clean split)
 *   N=3 → asymmetric: feature 2×2 + 2 stacked 1×1 on the right (180px rows)
 *   N=4 → 2×2 equal grid, 260px rows
 *   N=5 → original mosaic: feature 2×2 + four 1×1 tiles (180px rows)
 *
 * Breakpoints collapse to 2 columns then 1 column. Hover adds a subtle
 * scale + gradient overlay; both are skipped under prefers-reduced-motion.
 */
/* Padding sits on the section, not the inner — matches the pattern used by
 * .pd-plans / .pd-amenities / .pd-payment / .pd-location / .pd-contact so
 * the gallery's content area lands at the same width as the rest of the page. */
.pd-gallery-section { padding: clamp(32px, 4vw, 56px) var(--pad-x) clamp(40px, 6vw, 80px); }
.pd-gallery-inner { max-width: var(--max-w); margin: 0 auto; }
.pd-gallery-head { margin-bottom: clamp(24px, 3vw, 40px); }
.pd-gallery-head .pd-eyebrow { display: block; margin-bottom: 10px; }
.pd-gallery-head h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.pd-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 10px;
}
.pd-gallery .pd-gal-img {
  background-size: cover;
  background-position: center;
  background-color: var(--bone-2);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform 0.4s var(--ease-out), filter 0.4s var(--ease-out);
}
.pd-gallery .pd-gal-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
  pointer-events: none;
}
.pd-gallery .pd-gal-img:hover::after,
.pd-gallery .pd-gal-img:focus-visible::after { opacity: 1; }
.pd-gallery .pd-gal-img:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gold-emaar);
}
@media (prefers-reduced-motion: no-preference) {
  .pd-gallery .pd-gal-img:hover,
  .pd-gallery .pd-gal-img:focus-visible { transform: scale(1.015); }
}

/* Per-count desktop layouts (≥841px handled implicitly; @media query below
   collapses to 2-col then 1-col). */
.pd-gallery[data-tile-count="1"] { grid-template-columns: 1fr; grid-auto-rows: 420px; }
.pd-gallery[data-tile-count="2"] { grid-template-columns: 1fr 1fr; grid-auto-rows: 360px; }
.pd-gallery[data-tile-count="3"] { grid-template-columns: 2fr 1fr; grid-auto-rows: 180px; }
.pd-gallery[data-tile-count="3"] .pd-gal-img:nth-child(1) { grid-column: 1; grid-row: span 2; }
.pd-gallery[data-tile-count="4"] { grid-template-columns: 1fr 1fr; grid-auto-rows: 260px; }
.pd-gallery[data-tile-count="5"] .pd-gal-img:nth-child(1) { grid-column: span 2; grid-row: span 2; }

@media (max-width: 840px) {
  .pd-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .pd-gallery[data-tile-count="1"] { grid-template-columns: 1fr; grid-auto-rows: 320px; }
  .pd-gallery[data-tile-count="2"] { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
  .pd-gallery[data-tile-count="3"] { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .pd-gallery[data-tile-count="3"] .pd-gal-img:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .pd-gallery[data-tile-count="4"] { grid-auto-rows: 180px; }
  .pd-gallery[data-tile-count="5"] .pd-gal-img:nth-child(1) { grid-column: span 2; grid-row: span 1; }
}
/* Mobile gallery — hero + "View all photos" CTA (≤640px).
 *
 * Tiles 2..N stay in the DOM (so the lightbox cells[] array still contains
 * them — see assets/js/site.js) but are visually hidden. The page presents
 * one bold hero image with a CTA that opens the existing fullscreen
 * lightbox at index 0; users swipe through inside it. This matches the
 * Airbnb / Booking / Sotheby's mobile pattern and keeps the gallery to one
 * screen instead of stacking 4–5 hero-sized images vertically. */
@media (max-width: 640px) {
  .pd-gallery,
  .pd-gallery[data-tile-count="1"],
  .pd-gallery[data-tile-count="2"],
  .pd-gallery[data-tile-count="3"],
  .pd-gallery[data-tile-count="4"],
  .pd-gallery[data-tile-count="5"] {
    display: block;
    grid-template-columns: none;
    grid-auto-rows: auto;
    position: relative;
  }
  .pd-gallery .pd-gal-img { display: none; }
  .pd-gallery .pd-gal-img:first-child {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* "View all N photos" CTA — hidden by default, revealed only on the mobile
 * breakpoint above. Keeping the base rule outside any media query means the
 * desktop mosaic never accidentally shows the button. */
.pd-gallery-view-all { display: none; }
@media (max-width: 640px) {
  .pd-gallery-view-all {
    position: absolute;
    bottom: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 18px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 15, 15, 0.82);
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
  }
  .pd-gallery-view-all:hover,
  .pd-gallery-view-all:focus-visible {
    background: var(--gold-emaar);
    color: var(--forest-deep);
    outline: none;
  }
  .pd-gallery-view-all .arrow {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1;
  }
}

/* Layouts (bedroom plans) — restyle existing pd-plans to match */
.pd-plans { background: var(--bone); padding: clamp(56px, 8vw, 120px) var(--pad-x); margin-top: 0; }
.pd-plans-title { font-size: clamp(36px, 5vw, 56px); margin-bottom: 36px; }

/* Amenities — icon grid, nested inside the combined Layouts & Amenities block */
.pd-amenities-block { margin-top: clamp(48px, 7vw, 96px); }
.pd-amenities-head { margin-bottom: 32px; max-width: 680px; }
.pd-amenities-head h2 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); line-height: 1.05; margin: 0 0 18px; }
.pd-amenities-head h3 { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; margin: 0 0 14px; color: var(--ink); }
.pd-amenities-head p { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0; }
.pd-amenity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.pd-amenity {
  background: #fff;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 0.2s;
}
.pd-amenity:hover { background: var(--paper); }
.pd-amenity__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bone);
  color: var(--forest);
  display: grid;
  place-items: center;
  flex: none;
}
.pd-amenity__icon svg { width: 18px; height: 18px; }
.pd-amenity__title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.25;
  color: var(--ink);
}
@media (max-width: 840px) { .pd-amenity-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pd-amenity-grid { grid-template-columns: 1fr; } }

/* Payment — light, three-step cards + discount note */
.pd-payment {
  background: var(--bone);
  color: var(--ink);
  padding: clamp(56px, 8vw, 120px) var(--pad-x);
  display: block;
  margin: 0;
  max-width: none;
}
.pd-payment-inner { max-width: var(--max-w); margin: 0 auto; }
.pd-payment .pd-eyebrow { color: var(--gold); }
.pd-payment h2 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  margin: 12px 0 18px;
}
.pd-payment .pd-payment-lede {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
  max-width: 620px;
  margin: 0 0 clamp(36px, 5vw, 56px);
}
.pd-pay-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
}
.pd-step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(24px, 2.4vw, 36px);
  display: flex;
  flex-direction: column;
}
.pd-step__head { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(24px, 3vw, 40px); }
.pd-step__num {
  width: 30px;
  height: 30px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1;
  color: var(--gold);
  flex: none;
}
.pd-step__eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.pd-step__figure {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: 1;
  color: var(--ink);
  margin-bottom: 8px;
}
.pd-step__figure .pct {
  font-size: 0.45em;
  vertical-align: super;
  color: var(--gold);
  margin-left: 2px;
}
.pd-step__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.pd-step__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.pd-pay-note {
  margin-top: clamp(10px, 1.2vw, 16px);
}
.pd-pay-note p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 840px) {
  .pd-pay-steps { grid-template-columns: 1fr; }
}

/* Location section */
.pd-location {
  background: #fff;
  padding: clamp(56px, 8vw, 120px) var(--pad-x);
}
.pd-location-inner { max-width: var(--max-w); margin: 0 auto; }
.pd-location-head {
  margin-bottom: 36px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.pd-location-head__text { max-width: 680px; }
.pd-location-head h2 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); line-height: 1.05; margin: 12px 0 18px; }
.pd-location-head p { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0; }
/* Property → community internal link (SEO + UX): sits under the location lede. */
.pd-location-arealink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--forest);
  text-decoration: none;
  transition: gap 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.pd-location-arealink:hover { gap: 12px; color: var(--forest-deep); }
.pd-location-mapbtn { flex: none; margin-top: clamp(8px, 2.4vw, 34px); }
.pd-location-map {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  line-height: 0;
}
.pd-location-map iframe {
  display: block;
  width: 100%;
  height: clamp(300px, 42vw, 460px);
  border: 0;
}
/* Click-to-activate veil: a transparent layer over the map iframe so the page
   scrolls through (the iframe no longer traps the wheel). Clicking it removes
   the veil (JS adds .is-map-active); the pointer leaving the map re-arms it. */
.pd-location-map__veil {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.pd-location-map.is-map-active .pd-location-map__veil { display: none; }
.pd-location-map__hint {
  margin-bottom: 16px;
  padding: 8px 16px;
  background: rgba(15, 15, 15, 0.74);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.pd-location-map:hover .pd-location-map__hint { opacity: 1; }
@media (hover: none) {
  .pd-location-map__hint { opacity: 1; }
}
/* Map + Nearby split: one bordered card, map on the left, nearby panel on the
   right. Map keeps the click-to-activate veil. Panel always shows the address;
   the Nearby list renders only when rh_nearby has entries. */
.pd-location-split {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.pd-location-split--nomap { grid-template-columns: 1fr; }
/* No nearby list -> the aside is omitted and the map spans the full width. */
.pd-location-split--nonear { grid-template-columns: 1fr; }
.pd-location-split .pd-location-map { height: 100%; }
.pd-location-split .pd-location-map iframe { height: 100%; min-height: clamp(320px, 40vw, 460px); }
.pd-location-near {
  padding: clamp(24px, 2.4vw, 36px);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.pd-location-split--nomap .pd-location-near { border-left: 0; }
.pd-location-near__addr {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--ink);
}
.pd-location-near__sub { font-size: 14px; color: var(--muted); margin: 0; }
.pd-location-near__list { margin-top: clamp(20px, 2.4vw, 30px); }
.pd-location-near__list .pd-eyebrow {
  display: block;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.pd-location-near__list ul { list-style: none; margin: 0; padding: 0; }
.pd-location-near__list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px dotted var(--line);
}
.pd-location-near__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.pd-near__marker { color: var(--gold); display: inline-flex; }
.pd-near__name { font-size: 15px; color: var(--ink); }
.pd-near__dist {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}
@media (max-width: 840px) {
  .pd-location-head { flex-direction: column; gap: 14px; margin-bottom: 28px; }
  .pd-location-split { grid-template-columns: 1fr; }
  .pd-location-near { border-left: 0; border-top: 1px solid var(--line); }
  .pd-location-split .pd-location-map iframe { min-height: clamp(280px, 60vw, 380px); }
}

/* Booking / contact — split layout on a card */
.pd-contact {
  background: #fff;
  padding: clamp(56px, 8vw, 120px) var(--pad-x);
}
.pd-contact-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.pd-contact h2 { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 52px); line-height: 1.05; margin: 12px 0 18px; }
.pd-contact .pd-eyebrow { color: var(--gold); }
.pd-contact .pd-contact-lede {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 28px;
  max-width: 460px;
}
.pd-contact-details { display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: var(--ink-soft); }
.pd-contact-details div { display: flex; align-items: center; gap: 14px; }
.pd-contact-details svg { color: var(--gold); flex: none; }
.pd-contact__cta { display: flex; flex-direction: column; gap: 12px; }
.pd-contact__cta .btn { justify-content: center; }
@media (max-width: 840px) {
  .pd-contact-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* Film & stories — merged videos + homeowner testimonials */
.pd-videos .pd-eyebrow { display: block; margin-bottom: 12px; }

/* Story card: a testimonial wearing the video-card anatomy */
.pd-story-card { margin: 0; }
.pd-story-card--static { cursor: default; }
.pd-story-card--static:hover .video-card-thumb img { transform: none; }
.pd-story-card--text { background: #fff; padding: 26px 24px; gap: 10px; }
.pd-story-card__quote {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pd-story-card__quote::before { content: '\201C'; }
.pd-story-card__quote::after  { content: '\201D'; }
.pd-story-card--text .pd-story-card__quote { -webkit-line-clamp: 8; }
.pd-story-card__name { font-size: 13px; font-weight: 500; color: var(--ink); margin-top: 4px; }
.pd-story-card__role { font-size: 13px; color: var(--muted); }

/* Sticky bottom bar */
.pd-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  /* Smoky charcoal — same family as the footer / scrolled nav
     (rgba(10,10,10,.68)), a touch lighter (.6). Text + buttons go light. */
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  color: var(--bone);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  transform: translateY(110%);
  transition: transform 0.3s ease;
  box-shadow: 0 -8px 30px rgba(15,15,15,0.18);
}
.pd-stickybar.is-visible { transform: translateY(0); }
.pd-stickybar__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px var(--pad-x);
}
.pd-stickybar__title { flex: 1; min-width: 0; }
.pd-stickybar__name {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  color: var(--bone);
}
.pd-stickybar__meta {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.6);
  margin-top: 4px;
}
.pd-stickybar__cta { display: flex; gap: 8px; flex: none; }
.pd-stickybar__cta .btn-ghost-light {
  background: transparent;
  color: var(--bone);
  border: 1px solid rgba(255, 255, 255, 0.4);
  gap: 8px;
  padding: 10px 16px;
  font-size: 11px;
}
.pd-stickybar__cta .btn-ghost-light:hover {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}
.pd-stickybar__cta .btn-primary {
  background: var(--gold-emaar);
  color: var(--forest-deep);
  border: 0;
  padding: 10px 16px;
  font-size: 11px;
}
.pd-stickybar__cta .btn-primary:hover { background: var(--gold); color: var(--bone); }
@media (max-width: 640px) {
  .pd-stickybar__cta .btn-ghost-light { display: none; }
  .pd-stickybar__name { font-size: 16px; }
  .pd-stickybar__meta { display: none; }
}

/* Body padding so the sticky bar doesn't cover the contact section */
body.has-pd-stickybar { padding-bottom: 80px; }
@media (max-width: 640px) { body.has-pd-stickybar { padding-bottom: 64px; } }

/* ===== /Property detail v2 ===== */

/* Content-width parity with the about page.
 *
 * Every property-page section (.pd-overview-grid, .pd-gallery-inner,
 * .pd-plans-inner, .pd-payment-inner, .pd-location-inner,
 * .pd-contact-inner) reads max-width from var(--max-w). Overriding the custom
 * property on the template root collapses the "stage" width on large monitors
 * without touching individual rules.
 *
 * Hero is excluded — it keeps the original 1680px stage so the title /
 * stats band don't crowd against the residence imagery. */
body.single-rh_property { --max-w: 1280px; }
body.single-rh_property .pd-hero-content { max-width: 1680px; }

/* ===== Property detail v3 — narrative enhancements =====
 *
 * Builds on the v2 block above. Adds the 0% plan chip + compact payment stat,
 * the welcome quick-facts strip, grouped amenities, the "Why this residence"
 * cards, gallery lifestyle captions, the click-to-load map placeholder and the
 * bottom summary strip. Uses only existing design tokens and reuses v2
 * component styles where possible.
 *
 * Revert: delete this block. The hero/welcome/amenities markup falls back to
 * unstyled-but-functional; pair with reverting single-rh_property.php. */

/* Hero — 0% plan chip + compact payment-plan stat value */
.pd-chip--plan {
  background: rgba(244,241,236,0.08);
  color: var(--bone);
  border: 1px solid rgba(244,241,236,0.3);
}
.pd-hero__stat-value--sm { font-size: clamp(20px, 2vw, 26px); }

/* Welcome & quick-facts strip */
.pd-welcome { background: #fff; padding: clamp(56px, 8vw, 120px) var(--pad-x) clamp(32px, 4vw, 56px); }
.pd-welcome-inner { max-width: var(--max-w); margin: 0 auto; }
.pd-welcome__intro { max-width: none; }
.pd-welcome__intro .pd-eyebrow { display: block; margin-bottom: 18px; }
.pd-welcome__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 24px;
}
.pd-welcome__body { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.pd-welcome__body p { margin: 0 0 18px; }
.pd-welcome__body p:last-child { margin-bottom: 0; }
.pd-welcome__body iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.pd-welcome__body figure, .pd-welcome__body .wp-block-embed { margin: 24px 0; }
/* Promo video now follows the intro copy — give it room above, drop the default top gap. */
.pd-welcome__intro .pd-promo-video { margin: clamp(28px, 3vw, 40px) 0 0; }

/* Quick-facts strip — minimalist row of cards on desktop, stacked on mobile.
   Cards carry their own borders with transparent gaps, so a wrapped final row
   never leaves a blank grey filler cell. */
.pd-quickfacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: clamp(16px, 2vw, 28px) 0 0;
}
.pd-qf {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(18px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-qf__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.pd-qf__value {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.pd-qf__value-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(15,15,15,0.3);
}
.pd-qf__value-link:hover { color: var(--forest); text-decoration-color: currentColor; }
@media (max-width: 600px) {
  .pd-quickfacts { grid-template-columns: 1fr 1fr; }
  /* Payment (0% plan) and Viewing (by appointment) duplicate the hero stat strip
     and the payment/contact sections — drop them from the strip on phones. */
  .pd-qf--hide-mobile { display: none; }
}
@media (max-width: 380px) { .pd-quickfacts { grid-template-columns: 1fr; } }

/* Gallery — subtle lifestyle captions */
.pd-gal-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 30px 16px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  pointer-events: none;
}
.pd-gallery .pd-gal-img:hover .pd-gal-caption,
.pd-gallery .pd-gal-img:focus-visible .pd-gal-caption,
.pd-gallery .pd-gal-img:first-child .pd-gal-caption { opacity: 1; transform: none; }
@media (hover: none) { .pd-gal-caption { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pd-gal-caption { transition: none; } }

/* Unit types — per-type context line + CTA */
.pd-plans .pd-plan-name { margin-top: 0; }
.pd-plan__desc { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
.pd-plan-price { margin-top: 18px; }
.pd-plan-media { margin-top: 20px; }
.pd-plan-gallery-btn { display: flex; align-items: center; gap: 14px; padding: 0; text-align: left; background: none; border: none; }
/* slight radius — deliberate exception to the site's square-corner default, media thumbs only (user request) */
.pd-plan-gallery-thumb { width: 64px; height: 64px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; display: block; }
.pd-plan-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s var(--ease-out); }
.pd-plan-gallery-btn:hover .pd-plan-gallery-thumb img { transform: scale(1.05); }
.pd-plan-gallery-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; }
.pd-plan-gallery-btn:hover .pd-plan-gallery-label { color: var(--forest); border-color: currentColor; }
.pd-plan-gallery-btn:focus-visible, .pd-plan-video-btn:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.pd-plan-video-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0; margin-top: 0; background: none; border: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.3s; }
.pd-plan-gallery-wrap + .pd-plan-video-btn { margin-top: 14px; }
.pd-plan-video-btn:hover { color: var(--forest); }
.pd-plans-cta { margin-top: clamp(28px, 3vw, 40px); }
.pd-plans-cta .btn { justify-content: center; }

/* Amenities — standalone section, grouped by category */
.pd-amenities { background: #fff; padding: clamp(56px, 8vw, 120px) var(--pad-x); }
.pd-amenities-inner { max-width: var(--max-w); margin: 0 auto; }
.pd-amenities .pd-amenities-head .pd-eyebrow { display: block; margin-bottom: 12px; }
.pd-amenity-group { margin-top: clamp(36px, 5vw, 56px); }
.pd-amenity-group:first-of-type { margin-top: clamp(24px, 3vw, 40px); }
.pd-amenity-group__label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
/* Let amenity cards size to content with their own borders + transparent gaps,
   so a category with fewer items than the column count never leaves blank grey
   filler cells (the old seamless 1px-line grid did). */
.pd-amenities .pd-amenity-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
/* Compact, scannable amenity rows: icon beside the label, tighter padding —
   the stacked cards read as unnecessarily large for a single short label. */
.pd-amenities .pd-amenity {
  border: 1px solid var(--line);
  border-radius: 4px;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.pd-amenities .pd-amenity__icon { width: 36px; height: 36px; }
.pd-amenities .pd-amenity__icon svg { width: 16px; height: 16px; }
.pd-amenities .pd-amenity__title { font-size: 15px; line-height: 1.25; }
@media (max-width: 520px) { .pd-amenities .pd-amenity-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 360px) { .pd-amenities .pd-amenity-grid { grid-template-columns: 1fr; } }

/* Why this residence — four premium selling-point cards */
.pd-why { background: var(--bone); padding: clamp(56px, 8vw, 120px) var(--pad-x); }
.pd-why-inner { max-width: var(--max-w); margin: 0 auto; }
.pd-why-head { margin-bottom: clamp(36px, 5vw, 56px); max-width: 760px; }
.pd-why-head .pd-eyebrow { display: block; margin-bottom: 14px; }
.pd-why-head h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
.pd-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.6vw, 24px); }
.pd-why-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(28px, 2.6vw, 40px);
  display: flex;
  flex-direction: column;
  position: relative;
}
.pd-why-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 2px;
  background: var(--gold-emaar);
}
.pd-why-card__num { font-family: var(--font-display); font-size: 20px; color: var(--gold); margin-bottom: 18px; }
.pd-why-card__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 12px;
}
.pd-why-card__body { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
@media (max-width: 980px) { .pd-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pd-why-grid { grid-template-columns: 1fr; } }

/* Location — full street address line */
.pd-location-address {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px;
}

/* Phone refinements — scale (not just layout) for the sections that kept their
 * desktop proportions when they stacked. Placed at the end of the cascade so it
 * overrides the base sizing above; desktop/tablet are untouched. */
/* Explore-projects button: show the area-named label by default, swap to the
   short version on phones (see @media below) so the text doesn't overflow. */
.pd-explore-short { display: none; }

@media (max-width: 600px) {
  /* The full "Explore Other Projects in <Area>" label overflows the button on
     phones — use the short label instead. */
  .pd-explore-full { display: none; }
  .pd-explore-short { display: inline; }

  /* Payment steps stacked full-width but kept the 40px display figure, 24px
     header gap and 24px padding, so the section ran several screens. Shrink the
     figure, header gap, caption gap and card padding. Structure is unchanged. */
  .pd-pay-steps { gap: 14px; }
  .pd-step { padding: 22px 20px; }
  .pd-step__head { margin-bottom: 14px; }
  .pd-step__figure { font-size: 30px; }
  .pd-step__caption { margin-bottom: 10px; }

  /* Hero chips: drop the status/stage chips (e.g. For Sale / Under Construction)
     on phones — they wrap to a third row and duplicate the stat strip and
     quick-facts. Lifecycle, % sold and the 0% plan badge stay. */
  .pd-hero__chips .pd-chip--status { display: none; }
  /* ...but the enquire-availability CTA stays — it's an action, not just status. */
  .pd-hero__chips .pd-chip--link { display: inline-flex; }

  /* Unit-type cards carried a lot of empty vertical space stacked full-width. */
  .pd-plan { padding: 24px 22px; }
}
/* ===== /Property detail v3 ===== */