/* Nav */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px var(--pad-x);
  /* Fill the iPhone status-bar / notch region: with viewport-fit=cover the bar's
     box reaches the true top edge, so its background covers that strip; the inset
     keeps the logo + links clear of the Dynamic Island. 0px fallback off-iOS. */
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.5s var(--ease-out), padding 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
  color: white;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(10, 10, 10, 0.68);
  padding: 12px var(--pad-x);
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-bottom-color: rgba(255,255,255,0.10);
}
/* NOTE on the iPhone Safari "strip above the header": iOS paints the
   status-bar strip (between the physical top edge and the web viewport) with
   the CANVAS background — the root element's background. The fix lives in
   tokens.css (`html { background: var(--ink) }`), not here: no fixed element
   can reach that strip (top:0 is below it; negative offsets are not
   composited; env(safe-area-inset-top) is 0 in browser-mode Safari).
   Verified on the iOS 18.6 simulator. Do not re-add a "notch fill" layer. */

/* WP admin-bar offsets — ONLY applied when body.admin-bar is present (a
   logged-in user). A logged-out visitor never gets these rules, so the fixed
   nav always sits flush at top:0 for them.

   Desktop (>782px): the admin bar is position:fixed at 32px, so the nav sits
   just below it. */
.admin-bar .nav { top: 32px; }

/* Tablet band (601–782px): admin bar is still position:fixed but 46px tall.
   Offset while at rest; pin flush once the nav goes sticky. */
@media screen and (min-width: 601px) and (max-width: 782px) {
  .admin-bar .nav { top: 46px; }
  .admin-bar .nav.scrolled { top: 0; }
}

/* Phones (≤600px): WordPress makes the admin bar position:absolute, so it
   scrolls away WITH the page. Offsetting the fixed nav by it leaves a gap at
   the very top — the moment you scroll, the admin bar slides off but the nav
   stays pushed down, exposing page content above the dark header. So never
   offset here: keep the nav flush to the viewport top in every state. The
   admin bar (z-index 99999) simply overlays the transparent hero nav while
   you're at the top, then scrolls away to reveal the flush sticky header. */
@media screen and (max-width: 600px) {
  .admin-bar .nav,
  .admin-bar .nav.scrolled { top: 0; }
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
  text-decoration: none;
  color: inherit;
}
.nav-logo-mark {
  height: 38px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.nav-logo-text {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
}
.nav-logo-word {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: white;
}
.nav-logo-word .thin {
  font-weight: 300;
  color: var(--gold-emaar);
  letter-spacing: 0.12em;
}
.nav-logo-sub {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}


.nav-links {
  display: flex;
  gap: clamp(22px, 2.6vw, 42px);
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-links li {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  list-style: none;
}
.nav-links a {
  font-size: 15px;
  letter-spacing: 0.01em;
  font-weight: 400;
  position: relative;
  padding: 4px 0;
  transition: opacity 0.3s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 1px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width 0.45s var(--ease-out);
}
.nav-links a:hover::after { width: 100%; }
.nav-links a.active::after,
.nav-links .current-menu-item > a::after,
.nav-links .current-menu-parent > a::after,
.nav-links .current-menu-ancestor > a::after { width: 100%; }

/* Current page reads clearly as selected: full-strength text + persistent rule. */
.nav-links a.active,
.nav-links .current-menu-item > a,
.nav-links .current-menu-parent > a,
.nav-links .current-menu-ancestor > a { font-weight: 500; opacity: 1; }

/* Desktop dropdown — items with children */
.nav-links .menu-item-has-children { position: relative; }
.nav-links .menu-item-has-children > a { padding-right: 14px; }
.nav-links .menu-item-has-children > a::before {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s var(--ease-out);
}
.nav-links .menu-item-has-children:hover > a::before,
.nav-links .menu-item-has-children:focus-within > a::before {
  transform: translateY(-30%) rotate(225deg);
}
.nav-links .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  min-width: 220px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  background: rgba(15, 15, 15, 0.94);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0.3s;
  z-index: 110;
}
.nav-links .menu-item-has-children:hover > .sub-menu,
.nav-links .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-links .sub-menu li { margin: 0; }
.nav-links .sub-menu a {
  display: block;
  padding: 11px 22px;
  font-size: 14px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: rgba(255,255,255,0.78);
  transition: background 0.25s, color 0.25s, padding-left 0.25s;
}
.nav-links .sub-menu a::after { display: none; } /* no underline animation in dropdown */
.nav-links .sub-menu a:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding-left: 26px;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-phone {
  font-size: 14px;
  letter-spacing: 0.01em;
  opacity: 0.9;
  font-weight: 500;
}
.nav-btn {
  padding: 11px 22px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.4);
  color: white;
  transition: all 0.3s var(--ease-out);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-btn::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-emaar);
  flex-shrink: 0;
}
.nav-btn:hover {
  background: var(--gold-emaar);
  border-color: var(--gold-emaar);
  color: white;
}
.nav-btn:hover::before { background: white; }


.nav-menu-btn {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
}
.nav-menu-btn span {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  position: relative;
}
.nav-menu-btn span::before, .nav-menu-btn span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; height: 1px;
  background: currentColor;
}
.nav-menu-btn span::before { top: -7px; }
.nav-menu-btn span::after { top: 7px; }

@media (max-width: 1100px) {
  .nav-phone { display: none; }
}
@media (max-width: 880px) {
  .nav-links, .nav-phone { display: none; }
  .nav-menu-btn { display: flex; }
  .nav-btn { display: none; }
}

/* Mobile drawer */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: var(--bone);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.6s var(--ease-out);
  display: flex;
  flex-direction: column;
  /* viewport-fit=cover extends this full-screen drawer to the physical edges —
     inset the content so the head clears the notch and the foot clears the home bar. */
  padding: calc(30px + env(safe-area-inset-top, 0px)) var(--pad-x) calc(40px + env(safe-area-inset-bottom, 0px));
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 60px;
}
.mobile-menu-head .nav-logo { color: var(--bone); }
.mobile-close { width: 40px; height: 40px; font-size: 28px; color: var(--bone); }
.mobile-links { list-style: none; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mobile-links a {
  font-family: var(--font-display);
  font-size: clamp(24px, 6vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid rgba(244,241,236,0.08);
  transition: color 0.3s, padding-left 0.3s;
}
.mobile-links a:hover { color: var(--gold); padding-left: 14px; }
/* Parent items: link sits in a row beside a chevron toggle (injected by site.js).
   The row owns the divider so the underline still spans the full width. */
.mobile-links .mobile-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(244,241,236,0.08);
}
.mobile-links .mobile-link-row > a { flex: 1; border-bottom: none; }
.mobile-links .submenu-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  background: none;
  border: none;
  color: var(--bone);
  cursor: pointer;
  transition: transform 0.35s var(--ease-out), color 0.3s;
}
.mobile-links .menu-item-has-children.open > .mobile-link-row .submenu-toggle {
  transform: rotate(180deg);
  color: var(--gold);
}
/* Child list collapsed by default; expands when the parent gets .open. */
.mobile-links .sub-menu {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 1px solid rgba(244,241,236,0.12);
  transition: max-height 0.4s var(--ease-out), margin 0.35s var(--ease-out);
}
.mobile-links .menu-item-has-children.open > .sub-menu {
  max-height: 60vh;
  margin: 4px 0 12px;
}
.mobile-links .sub-menu a {
  font-family: var(--font-sans);
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 400;
  padding: 8px 0;
  border-bottom: none;
  color: rgba(244,241,236,0.7);
}
.mobile-links .sub-menu a:hover { color: var(--gold); padding-left: 8px; }
.mobile-foot {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; opacity: 0.7;
  margin-top: 40px;
}

/* Footer */
.foot {
  /* Identical treatment to the scrolled top nav (.nav.scrolled) so the footer
     reads as the same smoky charcoal you see in the header when scrolling. The
     rgba is translucent: over the cream --bone body it composites to ~#545350.
     Matched by using the same declaration rather than eyeballing a hex.
     Forest-green + gold stay as accents; text/dividers are light for contrast. */
  background: rgba(10, 10, 10, 0.68);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  color: var(--bone);
  padding: 100px var(--pad-x) 40px;
}
.foot-inner { max-width: var(--max-w); margin: 0 auto; }
.foot-top {
  /* Two stacked bands: brand + contact on top, the two nav menus below. Both
     bands share the same two-column rhythm so the contact block and Quick Links
     line up under each other. */
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-bottom: 80px;
  border-bottom: 1px solid rgba(244,241,236,0.12);
}
.foot-band {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
}
.foot-brand .nav-logo { margin-bottom: 24px; display: inline-flex; }
.foot-brand .nav-logo-mark { height: 44px; }
.foot-brand .nav-logo-word { color: var(--bone); font-size: 19px; }
.foot-brand .nav-logo-sub { color: rgba(244,241,236,0.5); }
.foot-brand p { font-size: 14px; opacity: 0.65; max-width: 320px; line-height: 1.7; }
.foot-col h4 {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.55;
  margin-bottom: 24px;
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.foot-col a { font-size: 14px; opacity: 0.85; transition: opacity 0.3s, padding-left 0.3s; }
.foot-col a:hover { opacity: 1; padding-left: 6px; }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 36px;
  font-size: 12px;
  flex-wrap: wrap;
  gap: 12px;
}
.foot-bottom > span { opacity: 0.55; }
.foot-social { display: flex; gap: 16px; align-items: center; }
.foot-social a { display: inline-flex; color: inherit; opacity: 0.7; transition: opacity 0.3s, color 0.3s; }
.foot-social a:hover { opacity: 1; color: var(--gold-emaar); }
.foot-social svg { width: 20px; height: 20px; display: block; fill: currentColor; }

/* Desktop only: put all four blocks on one row — logo, Company, Quick Links,
   Contact. The two band wrappers go display:contents so their children become
   direct flex items of .foot-top; order then sets the left-to-right sequence
   (brand, the two nav menus, then contact). Mobile keeps the stacked bands. */
@media (min-width: 901px) {
  .foot-top { flex-direction: row; align-items: flex-start; gap: 48px; }
  .foot-band { display: contents; }
  .foot-brand { order: 1; flex: 1.4 1 0; }
  .foot-band--nav .foot-col:nth-child(1) { order: 2; }
  .foot-band--nav .foot-col:nth-child(2) { order: 3; }
  .foot-col--contact { order: 4; }
  .foot-band--nav .foot-col,
  .foot-col--contact { flex: 1 1 0; }
}
@media (max-width: 900px) {
  .foot-top { gap: 44px; padding-bottom: 50px; }
  .foot-band { grid-template-columns: 1fr 1fr; gap: 40px; }
  .foot { padding-top: 60px; }
}
@media (max-width: 560px) {
  /* Stay two-up on phones rather than stacking to a single column. */
  .foot-band { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}

/* Tweaks panel */
.tweak-panel {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 1000;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  width: 320px;
  font-family: var(--font-sans);
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s var(--ease-out);
}
.tweak-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.tweak-head {
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
}
.tweak-head button { font-size: 22px; line-height: 1; opacity: 0.5; }
.tweak-head button:hover { opacity: 1; }
.tweak-body { padding: 18px; }
.tweak-section { display: flex; flex-direction: column; gap: 12px; }
.tweak-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; }
.tweak-options { display: flex; flex-direction: column; gap: 6px; }
.tweak-options button {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  background: transparent;
  text-align: left;
  transition: all 0.25s;
}
.tweak-options button:hover { border-color: var(--ink); }
.tweak-options button.active { border-color: var(--forest); background: rgba(27,67,50,0.04); }
.tweak-opt-label { font-size: 12px; }

/* Trust-badge pill — shared: home + inner accreditation sections */
.trust-badges-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 10px 14px;
}
.trust-badges-list li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; font-family: var(--font-sans);
  border: 1px solid rgba(244,241,236,0.25); color: var(--bone);
}
.trust-badges-list svg { color: var(--gold-emaar); flex-shrink: 0; }

/* Breadcrumbs — eyebrow-style trail. Rendered:
 *   - inside <main> (above the H1) on property archive and blog single
 *   - between the hero and overview sections on property single
 * Skipped on the homepage and landing pages.
 */
.breadcrumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 24px;
}
.breadcrumbs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.breadcrumbs-item {
  display: inline-flex;
  align-items: center;
}
.breadcrumbs-item a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.breadcrumbs-item a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.breadcrumbs-item.is-current { color: var(--ink); }
.breadcrumbs-sep {
  margin: 0 10px;
  opacity: 0.5;
}
/* Property single sits between hero and overview — needs top breathing room
 * since it's no longer up against a fixed nav. */
.pd-hero + .breadcrumbs {
  padding: 32px 0 8px;
}

/* Properties archive — persona-card visual treatment.
 *
 * The shared .prop rules in home.css render the homepage "Selected residences"
 * grid (4:5 aspect images, text below the image with no surrounding panel,
 * 10px radius). On the /projects/ archive and the rh_location / rh_type
 * taxonomy archives we want the homepage "Find your fit" look instead — paper-
 * backed card, square corners, chip top-left, larger serif title, descriptive
 * sentence, small uppercase attribute chips, bottom-aligned CTA with arrow.
 *
 * Everything below is scoped to the archive body classes so the homepage cards
 * stay untouched. Source order matters: this block lives AFTER home.css in the
 * enqueue order (components.css enqueues after home.css? — verify in functions.php
 * if rules don't apply).
 */
body.post-type-archive-rh_property .prop,
body.tax-rh_location .prop,
body.tax-rh_type .prop {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  gap: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
body.post-type-archive-rh_property .prop:hover,
body.tax-rh_location .prop:hover,
body.tax-rh_type .prop:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -25px rgba(15, 15, 15, 0.22);
}
body.post-type-archive-rh_property .prop-img,
body.tax-rh_location .prop-img,
body.tax-rh_type .prop-img {
  border-radius: 0;
  /* Top-anchored frame so the whole building reads rather than a cropped
     middle slice (matches the Communities grid treatment). */
  aspect-ratio: 4 / 3;
}
body.post-type-archive-rh_property .prop-img img,
body.tax-rh_location .prop-img img,
body.tax-rh_type .prop-img img {
  object-position: center top;
}
/* Dim gradient at the foot of the image so the chip stays legible regardless
 * of photo composition. */
body.post-type-archive-rh_property .prop-img::after,
body.tax-rh_location .prop-img::after,
body.tax-rh_type .prop-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,15,15,0) 40%, rgba(15,15,15,0.55) 100%);
  pointer-events: none;
}
/* Status chip — top-left, bone background, ink text. Inherits the
 * uppercase/letter-spacing treatment from the existing home.css .prop-status
 * rule; we only override position + look. */
body.post-type-archive-rh_property .prop-status,
body.tax-rh_location .prop-status,
body.tax-rh_type .prop-status {
  top: 16px;
  left: 16px;
  right: auto;
  z-index: 2;
  background: var(--bone);
  color: var(--ink);
  padding: 7px 14px;
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 500;
}
/* "% Sold" badge — top-right, gold, sized up from the status chip so it reads
   as proof-of-momentum at a glance, not just another label. */
body.post-type-archive-rh_property .prop-sold,
body.tax-rh_location .prop-sold,
body.tax-rh_type .prop-sold {
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto;
  z-index: 2;
  background: var(--gold-emaar);
  color: var(--ink);
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 4px 14px -4px rgba(193, 162, 109, 0.65);
}
body.post-type-archive-rh_property .prop-info,
body.tax-rh_location .prop-info,
body.tax-rh_type .prop-info {
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
body.post-type-archive-rh_property .prop-info h3,
body.tax-rh_location .prop-info h3,
body.tax-rh_type .prop-info h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(22px, 1.6vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
body.post-type-archive-rh_property .prop-desc,
body.tax-rh_location .prop-desc,
body.tax-rh_type .prop-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
body.post-type-archive-rh_property .prop-tags,
body.tax-rh_location .prop-tags,
body.tax-rh_type .prop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* Auto bottom-margin absorbs the free space so the tags sit directly under the
     description (aligned across cards) while price/CTA stay anchored to the
     bottom — independent of whether a card has a price line. */
  margin-bottom: auto;
  padding-bottom: 16px;
}
body.post-type-archive-rh_property .prop-tags span,
body.tax-rh_location .prop-tags span,
body.tax-rh_type .prop-tags span {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  padding: 6px 10px;
  border: 1px solid var(--line);
  color: var(--muted);
  text-transform: uppercase;
  font-family: var(--font-sans);
}
/* Price line stays as the data anchor but is visually quiet — no top border,
 * smaller text, sits above the CTA. */
body.post-type-archive-rh_property .prop-price,
body.tax-rh_location .prop-price,
body.tax-rh_type .prop-price {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
body.post-type-archive-rh_property .prop-price-lease,
body.tax-rh_location .prop-price-lease,
body.tax-rh_type .prop-price-lease {
  margin-top: 4px;
}
body.post-type-archive-rh_property .prop-cta,
body.tax-rh_location .prop-cta,
body.tax-rh_type .prop-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  align-self: flex-start;
  transition: gap 0.3s var(--ease-out), border-color 0.3s, color 0.3s;
}
body.post-type-archive-rh_property .prop:hover .prop-cta,
body.tax-rh_location .prop:hover .prop-cta,
body.tax-rh_type .prop:hover .prop-cta {
  gap: 16px;
  border-color: var(--gold-emaar);
  color: var(--gold-emaar);
}
body.post-type-archive-rh_property .prop-cta .arrow,
body.tax-rh_location .prop-cta .arrow,
body.tax-rh_type .prop-cta .arrow {
  transition: transform 0.3s;
}
body.post-type-archive-rh_property .prop:hover .prop-cta .arrow,
body.tax-rh_location .prop:hover .prop-cta .arrow,
body.tax-rh_type .prop:hover .prop-cta .arrow {
  transform: translateX(2px);
}
/* The shared rule in home.css fades the h3 on hover. On the archive cards we
 * use a lift+shadow + CTA color shift instead — disable the h3 fade so the
 * title stays legible while the card animates. */
body.post-type-archive-rh_property .prop:hover h3,
body.tax-rh_location .prop:hover h3,
body.tax-rh_type .prop:hover h3 {
  opacity: 1;
}
/* The shared rule scales the image on hover. Keep that effect but contain it
 * since the card itself is also lifting — gentler scale reads as polished
 * rather than busy. */
body.post-type-archive-rh_property .prop:hover .prop-img img,
body.tax-rh_location .prop:hover .prop-img img,
body.tax-rh_type .prop:hover .prop-img img {
  transform: scale(1.03);
}

/* Popup Maker viewing-popup skin lives in inc/rh-forms.php (emitted in
 * wp_head with the live #pum-{id} selector so it outranks PUM's per-popup
 * inline styles, which we cannot beat from a static stylesheet). */

/* Fluent Forms' flatpickr calendar (Preferred Date in the viewing popup) —
 * the theme's serif typography inherits into the calendar and inflates the
 * 7-column day grid past the phone viewport, clipping Sunday. Cap the
 * calendar to the viewport and force the calendar's own font so the cells
 * stay compact. Pure font/size normalisation — no structural override. */
.flatpickr-calendar {
  max-width: calc(100vw - 24px);
  font-family: var(--font-sans);
}
.flatpickr-calendar .flatpickr-day { font-size: 13px; }
.flatpickr-calendar .flatpickr-weekday { font-size: 11px; }
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-current-month input.cur-year { font-size: 15px; }

/* ===== IMG SPLASH ===== */
/* Reusable: add `img-splash` to any <img> or background-image box (e.g.
 * .momentum-media) to clip it to an organic ink-splash silhouette. Pure CSS
 * mask — no asset, no JS. Works on replaced elements and background boxes
 * alike. Add `img-splash--b` for a second shape so repeated use varies.
 * drop-shadow (not box-shadow) traces the splash alpha, so the cut-out reads
 * as floating on the page. Degrades to a plain rectangle where mask is
 * unsupported. */
.img-splash {
  --splash: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20220%20200'%3E%3Cpath%20fill='%23000'%20d='M30,70C20,40,50,15,80,25C95,30,105,10,125,15C150,22,145,45,165,50C195,57,205,85,185,105C175,116,200,130,185,150C170,168,140,160,130,175C120,190,95,188,90,170C86,156,60,170,45,155C28,138,45,120,30,110C16,100,18,82,30,70Z'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--splash);
  mask-image: var(--splash);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 108% 108%;
  mask-size: 108% 108%;
  filter: drop-shadow(0 18px 38px rgba(15, 15, 15, 0.12));
}
.img-splash--b {
  --splash: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20220%20200'%3E%3Cpath%20fill='%23000'%20d='M40,60C30,35,65,20,95,30C110,35,120,18,140,28C160,38,150,58,175,62C200,66,200,95,180,108C168,116,188,140,168,156C150,170,125,150,110,168C98,182,70,180,68,160C66,145,40,158,32,135C25,115,45,108,38,92C32,78,32,72,40,60Z'/%3E%3C/svg%3E");
}
/* Real paint-splatter mask (PNG with radiating droplets, à la CodeInstinct
 * tutorial). Use alongside .img-splash: `img-splash img-splash--splatter`.
 * Pair with a box whose aspect-ratio matches the PNG (1375x760) so the
 * splatter is undistorted — see .momentum-media override in home.css. */
.img-splash--splatter {
  --splash: url("../img/splatter-mask.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  filter: none;
}

/* ===== Global content-image hover zoom =====
 * Card images lift ~4% on hover/focus for a tactile, premium feel — the same
 * behaviour the property cards already use, applied to the rest of the content
 * cards. Background-image frames are scaled directly (their captions sit in
 * sibling elements, so the text stays put) and clipped by the card's overflow.
 * The hero and the momentum splatter render are intentionally excluded. */
.district-card,
.journal-card,
.fit .persona-card { overflow: hidden; }
.district-img,
.journal-img,
.fit .persona-img { transition: transform 0.9s var(--ease-out); will-change: transform; }
.district-card:hover .district-img,
.district-card:focus-visible .district-img,
.journal-card:hover .journal-img,
.journal-card:focus-visible .journal-img,
.fit .persona-card:hover .persona-img,
.fit .persona-card:focus-visible .persona-img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .district-img,
  .journal-img,
  .fit .persona-img { transition: none; }
  .district-card:hover .district-img,
  .journal-card:hover .journal-img,
  .fit .persona-card:hover .persona-img { transform: none; }
}