/* Fonts are loaded from the page <head> (see render_theme_head() in
     app/Helpers/theme.php) instead of @import here, so the fonts actually
     picked in Settings → Theme are the ones that load — a plain @import
     here would always load the defaults regardless of that setting. */

  :root {
    /* Primary (--maroon-800) and Accent (--gold) are the only two colors an
       admin needs to set (Settings → Theme) — every other shade below is
       computed from those two with color-mix(), so the whole palette stays
       consistent automatically instead of needing six separate overrides. */
    --maroon-800: #451018;
    --gold: #c69a52;
    --maroon-900: color-mix(in srgb, var(--maroon-800) 82%, black);
    --maroon-700: color-mix(in srgb, var(--maroon-800) 84%, white);
    --maroon-600: color-mix(in srgb, var(--maroon-800) 66%, white);
    --gold-soft: color-mix(in srgb, var(--gold) 55%, white);
    --cream: #faf6ee;
    --cream-dim: #f0e6d2;
    --ink: #221512;
    --ink-soft: #4a3934;
    --line: rgba(102, 28, 40, 0.16);
    --surface: #ffffff;
    --bg: var(--cream);
    --text: var(--ink);
    --text-soft: var(--ink-soft);
    color-scheme: light;
  }

  * { box-sizing: border-box; }

  :root { font-size: 19px; }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body, 'Jost'), 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-heading, 'Fraunces'), Georgia, serif;
    font-weight: 600;
    color: var(--maroon-800);
    text-wrap: balance;
    margin: 0;
    letter-spacing: -0.01em;
  }

  p { margin: 0; }

  a { color: inherit; text-decoration: none; }

  img { max-width: 100%; }

  .wrap {
    width: min(1120px, 100%);
    margin-inline: auto;
    padding-inline: 24px;
  }

  .eyebrow {
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
  }

  .rule {
    width: 56px;
    height: 2px;
    background: var(--gold);
    margin-block: 18px 20px;
    transform-origin: left center;
  }

  /* ---------- Nav ---------- */
  header.site {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 50;
    background: rgba(42, 10, 16, 0.94);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(198, 154, 82, 0.25);
  }

  /* So a smooth-scrolled nav click (#listings, #about, etc.) doesn't land
     with the sticky header covering the section's heading — offsets the
     landing point by roughly the header's own height. */
  #listings, #about, #values, #why, #process, #portfolio, #network, #contact {
    scroll-margin-top: 88px;
  }

  .nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 16px;
    gap: 12px;
    flex-wrap: nowrap;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }

  /* Was 30px — at that size the thin curved "neck" joining the two circles
     in the mark almost disappears, so it read as two unconnected dots
     instead of one shape. Sized up so the shape actually reads. */
  .brand-mark { width: 38px; height: auto; flex-shrink: 0; display: block; }

  .brand-name {
    font-family: var(--font-heading, 'Fraunces'), serif;
    color: #fff;
    font-size: 1.05rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  nav.links {
    display: flex;
    gap: 32px;
  }

  #mobileNav { display: none; }
  #mobileNav:not([hidden]) { display: flex; }

  nav.links a {
    position: relative;
    color: var(--cream-dim);
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    transition: color 0.2s ease;
    padding-bottom: 3px;
  }

  nav.links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s ease;
  }

  nav.links a:hover, nav.links a:focus-visible { color: var(--gold-soft); }
  nav.links a:hover::after, nav.links a:focus-visible::after { transform: scaleX(1); }

  .nav-cta {
    border: 1px solid var(--gold);
    color: var(--gold-soft) !important;
    padding: 9px 20px;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    border-radius: 2px;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }

  .nav-cta:hover { background: var(--gold); color: var(--maroon-900) !important; transform: translateY(-1px); }

  /* A2A nav link: same shape as the Enquire button, but deliberately
     lower-emphasis (plain cream outline, no gold) so Enquire stays the
     one clear call to action and A2A reads as a secondary, specialist
     link for agents rather than competing with it. */
  .nav-cta-outline {
    border-color: rgba(250,246,238,0.35);
    color: rgba(250,246,238,0.75) !important;
  }
  .nav-cta-outline:hover { background: rgba(250,246,238,0.1); color: var(--cream) !important; }

  @media (prefers-reduced-motion: no-preference) {
    @keyframes mark-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }
    .brand-mark { animation: mark-pulse 3.2s ease-in-out infinite; }
  }

  .menu-toggle {
    display: none;
    background: none;
    border: 1px solid rgba(198,154,82,0.5);
    color: var(--gold-soft);
    padding: 8px 12px;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    border-radius: 2px;
  }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    background: var(--maroon-900);
    overflow: hidden;
    padding-block: 96px 64px;
  }

  .hero::before,
  .hero::after {
    content: '';
    position: absolute;
    top: -10%;
    height: 130%;
    width: 46%;
    background: linear-gradient(180deg, var(--maroon-700), var(--maroon-800));
    transform: skewX(-12deg);
    opacity: 0.5;
  }
  .hero::before { right: -6%; }
  .hero::after {
    right: 6%;
    width: 12%;
    background: rgba(250,246,238,0.06);
  }

  /* Soft warm glow behind the headline block for a bit of depth/richness,
     instead of text sitting flat on a single solid tone. Very subtle by
     design — it should read as atmosphere, not a visible shape. */
  .hero-inner::before {
    content: '';
    position: absolute;
    left: -60px;
    right: -60px;
    top: -60px;
    bottom: -60px;
    background: radial-gradient(ellipse at 25% 20%, rgba(198,154,82,0.14), transparent 62%);
    z-index: -1;
    pointer-events: none;
  }

  .hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 0.62;
    box-shadow: inset 0 0 0 1px rgba(198,154,82,0.35);
    /* Fades the image (and its thin gold border above) out before it
       reaches the bottom of .hero, instead of cutting off sharply — since
       .hero is shorter now (the search bar and stats row moved into their
       own sections below it), that hard edge used to land in the middle of
       visible content and read as an unwanted dividing line. Fading it into
       the section's own solid background lets the dark hero, stats row and
       search bar all read as one continuous dark area, as intended. */
    mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  }

  .hero-inner {
    position: relative;
    z-index: 2;
    /* Wide enough that the title's own 2 manual line breaks (from
       hero_title_markup()) are each what actually ends a line — a
       narrower box here was letting the browser wrap each of those two
       lines again on its own, turning "2 lines" into 4 on wide screens. */
    max-width: 820px;
  }

  /* Small gold dash before the eyebrow label — a simple anchor point that
     gives the text block a deliberate starting edge instead of it just
     floating on the background. */
  .hero-eyebrow { display: flex; align-items: center; gap: 12px; color: #fff; }
  .eyebrow-dash { width: 28px; height: 2px; background: var(--gold); flex-shrink: 0; }

  .hero h1 {
    color: #fff;
    font-size: clamp(2.6rem, 5.6vw, 4rem);
    line-height: 1.22;
    font-weight: 500;
    letter-spacing: -0.015em;
    margin-top: 22px;
  }

  .hero h1 em {
    font-style: italic;
    color: var(--gold-soft);
  }

  /* Gold italic highlight on the last word of the headline (e.g. "more."). */
  .hero h1 .accent { color: var(--gold-soft); font-style: italic; }

  .hero p.lede {
    color: var(--cream-dim);
    font-size: 1.12rem;
    margin-top: 26px;
    max-width: 480px;
    font-weight: 400;
    line-height: 1.7;
  }

  .hero-actions {
    display: flex;
    gap: 16px;
    margin-top: 38px;
    flex-wrap: wrap;
  }

  /* ---------- Search + filter section ----------
     Its own section, separate from .hero above it, so an open filter
     dropdown never has a positioned sibling (like the stats row) nearby to
     conflict with — the dropdown just paints above normal page content,
     which is how stacking works by default. */
  .search-section {
    position: relative;
    background: var(--maroon-900);
    padding-block: 8px 72px;
  }

  .hero-search {
    position: relative;
    z-index: 5;
    max-width: 760px;
  }

  .search-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    background: rgba(250,246,238,0.96);
    border-radius: 999px;
    padding: 5px;
    gap: 2px;
    box-shadow: 0 14px 30px -14px rgba(0,0,0,0.45);
  }

  .search-tabs .tab {
    border: none;
    background: none;
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.86rem;
    padding: 10px 18px;
    border-radius: 999px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
  }

  .search-tabs .tab.active {
    background: var(--maroon-800);
    color: #fff;
    font-weight: 500;
  }
  .search-tabs .tab:hover:not(.active) { color: var(--maroon-800); }

  .search-box {
    margin-top: 14px;
    background: var(--surface);
    border-radius: 20px;
    padding: 18px 20px 20px;
    box-shadow: 0 26px 54px -18px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.5);
  }

  /* Thin rule that separates the search input from the filter pills now
     that both live inside the same white card. */
  .search-divider {
    height: 1px;
    background: var(--line);
    margin: 18px 0 16px;
  }

  .search-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--cream-dim);
    border-radius: 999px;
    padding: 6px 6px 6px 20px;
  }

  .search-input-row .icon { color: var(--ink-soft); flex-shrink: 0; display: flex; }

  .search-input-row input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.98rem;
    color: var(--ink);
    padding: 11px 0;
    outline: none;
  }
  .search-input-row input::placeholder { color: var(--ink-soft); opacity: 0.85; }

  .search-go {
    border: none;
    background: var(--maroon-800);
    color: #fff;
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.86rem;
    letter-spacing: 0.03em;
    padding: 12px 26px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .search-go:hover { background: var(--maroon-700); transform: translateY(-1px); }

  /* ---------- Filter pills (Property type / Beds & Baths / Price / Amenities) ----------
     These now sit inside the white .search-box card (below .search-divider),
     not floating on the dark background, so their colors are tuned for a
     light card instead of the dark hero. */
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    position: relative;
  }

  .filter-dd { position: relative; }

  .filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    background: var(--cream-dim);
    color: var(--ink);
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  .filter-toggle:hover { border-color: var(--maroon-700); color: var(--maroon-800); background: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(69,16,24,0.35); }
  .filter-toggle.active { background: var(--maroon-800); border-color: var(--maroon-800); color: #fff; }
  .filter-toggle.active:hover { background: var(--maroon-700); transform: translateY(-1px); }
  .filter-toggle .chev { flex-shrink: 0; color: var(--gold); transition: transform 0.2s ease; }
  .filter-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .filter-toggle.active .chev { color: var(--gold-soft); }


  .filter-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 10;
    display: none;
    flex-direction: column;
    gap: 4px;
    width: max-content;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 48px));
    max-height: min(360px, calc(100vh - 200px));
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 24px 48px -18px rgba(0,0,0,0.45);
  }
  .filter-panel.open { display: flex; }
  /* display is deliberately NOT set here — .filter-panel-wide only adds width/
     grid-column layout. Setting "display: grid" unconditionally on this class
     used to override .filter-panel's "display: none" (both are single-class
     selectors, so the later rule in the file wins), which made the Amenities
     panel — the only one with this class — visible on page load with no click,
     and unable to close afterwards, since it always won over the .open toggle. */
  .filter-panel-wide { min-width: min(360px, calc(100vw - 48px)); max-width: min(440px, calc(100vw - 48px)); grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 2px 12px; }
  .filter-panel-wide .filter-option { white-space: nowrap; }
  .filter-panel-wide.open { display: grid; }

  /* The right-most dropdown (Amenities) sits closest to the edge of the hero,
     so its panel opens leftward from the button instead of rightward —
     otherwise on many screens it runs off the right edge. A small JS check
     also flips any panel that would overflow, as a safety net. */
  .filter-dd-last .filter-panel { left: auto; right: 0; }
  .filter-panel.anchor-right { left: auto; right: 0; }

  .filter-group-label {
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 8px 2px 6px;
  }
  .filter-group-label:first-child { margin-top: 2px; }

  .filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--ink);
    cursor: pointer;
  }
  .filter-option:hover { background: var(--cream-dim); }
  .filter-option input[type="radio"],
  .filter-option input[type="checkbox"] { accent-color: var(--maroon-800); width: 16px; height: 16px; flex-shrink: 0; }

  .pill-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 2px 4px; }
  .pill {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 4px;
    min-width: 42px;
    text-align: center;
    font-size: 0.84rem;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  }
  .pill input { position: absolute; opacity: 0; pointer-events: none; }
  .pill:has(input:checked), .pill.is-checked { background: var(--maroon-800); border-color: var(--maroon-800); color: #fff; }

  .price-row { display: flex; align-items: center; gap: 10px; padding: 0 2px 4px; }
  .price-row input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--surface);
    outline: none;
  }
  .price-row input:focus { border-color: var(--maroon-800); }
  .price-row span { color: var(--ink-soft); flex-shrink: 0; }

  .filter-apply {
    margin-top: 8px;
    border: none;
    background: var(--maroon-800);
    color: #fff;
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.82rem;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .filter-apply:hover { background: var(--maroon-700); }

  .filter-clear {
    align-self: center;
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.8rem;
    color: rgba(250,246,238,0.9);
    text-decoration: underline;
    padding: 8px 4px;
    white-space: nowrap;
  }
  .filter-clear:hover { color: #fff; }

  /* The filter pills (and this "Clear filters" link) now sit inside the
     white .search-box card, not on the dark background, so this variant
     swaps the light cream text for a dark maroon that reads on white. Comes
     after .filter-clear above so it actually wins the cascade. */
  .filter-clear-dark { color: var(--maroon-700); }
  .filter-clear-dark:hover { color: var(--maroon-900); }

  @media (max-width: 560px) {
    .filter-bar { gap: 8px; }
    .filter-toggle { font-size: 0.78rem; padding: 9px 12px; }
    .filter-panel, .filter-panel-wide { min-width: 0; width: calc(100vw - 48px); max-width: calc(100vw - 48px); }
  }

  .search-filters {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
  }

  .filter-pill {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.82rem;
    padding: 9px 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
  }
  .filter-pill:hover { border-color: var(--maroon-700); color: var(--maroon-800); }
  .filter-pill .chev { font-size: 0.65rem; color: var(--gold); transition: transform 0.2s ease; }
  .filter-pill[aria-expanded="true"] { border-color: var(--maroon-800); color: var(--maroon-800); }
  .filter-pill[aria-expanded="true"] .chev { transform: rotate(180deg); }

  .filter-type { position: relative; }

  .type-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 16px 34px -16px rgba(0,0,0,0.4);
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 170px;
    z-index: 5;
  }

  .type-dropdown:not([hidden]) { display: flex; }
  .amenities-list:not([hidden]) { display: grid; }

  .type-dropdown label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--ink);
    cursor: pointer;
  }
  .type-dropdown label:hover { background: var(--cream-dim); }
  .type-dropdown input[type="radio"] { accent-color: var(--maroon-800); width: 16px; height: 16px; }
  .type-dropdown input[type="checkbox"] { accent-color: var(--maroon-800); width: 16px; height: 16px; flex-shrink: 0; }

  #propTypeDropdown {
    left: 0;
    right: auto;
    min-width: 240px;
    max-height: 280px;
    overflow-y: auto;
  }

  .dropdown-wide { min-width: 300px; }

  .dd-label {
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 10px 4px 8px;
  }
  .dd-label:first-child { margin-top: 4px; }

  .chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px; }

  .chip {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.84rem;
    min-width: 40px;
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  }
  .chip:hover { border-color: var(--maroon-700); }
  .chip.active {
    background: var(--maroon-800);
    border-color: var(--maroon-800);
    color: #fff;
  }

  .price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px;
  }

  .price-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--surface);
    outline: none;
  }
  .price-input:focus { border-color: var(--maroon-800); }
  .price-sep { color: var(--ink-soft); flex-shrink: 0; }

  .amenities-list {
    min-width: 300px;
    max-width: 560px;
    max-height: 320px;
    overflow-y: auto;
    grid-template-columns: 1fr 1fr;
    gap: 0 8px;
  }
  .amenities-list .dropdown-actions { grid-column: 1 / -1; }

  @media (max-width: 620px) {
    .amenities-list { grid-template-columns: 1fr; min-width: 240px; }
  }

  .dropdown-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }

  .dropdown-clear {
    border: none;
    background: none;
    color: var(--ink-soft);
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 6px 4px;
    text-decoration: underline;
  }
  .dropdown-clear:hover { color: var(--maroon-800); }

  .dropdown-apply {
    border: none;
    background: var(--maroon-800);
    color: #fff;
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.82rem;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .dropdown-apply:hover { background: var(--maroon-700); }

  @media (max-width: 560px) {
    .search-input-row { flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; }
    .search-input-row input { width: 100%; order: 1; }
    .search-go { order: 2; width: 100%; text-align: center; }
    .type-dropdown { right: auto; left: 0; }
  }

  .btn {
    display: inline-block;
    padding: 14px 28px;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 2px;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  }

  .btn-primary {
    background: var(--gold);
    color: var(--maroon-900);
    font-weight: 500;
  }
  .btn-primary:hover { background: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(198,154,82,0.55); }

  .btn-ghost {
    border: 1px solid rgba(250,246,238,0.4);
    color: var(--cream);
  }
  .btn-ghost:hover { border-color: var(--gold); color: var(--gold-soft); transform: translateY(-2px); }

  .stats-section {
    background: var(--maroon-900);
    padding-block: 0 40px;
  }

  .hero-stats {
    /* No position/z-index needed here on purpose — it now lives in its own
       section ABOVE the search bar, not below/beside it, so an open filter
       dropdown (which only ever opens downward) can never reach it again. */
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
  }

  .hero-stats div strong {
    display: block;
    font-family: var(--font-heading, 'Fraunces'), serif;
    color: var(--gold-soft);
    font-size: 1.8rem;
    font-weight: 500;
  }

  .hero-stats div span {
    color: var(--cream-dim);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
  }


  /* ---------- Section shells ---------- */
  section { padding-block: 88px; }

  .section-head { max-width: 640px; }

  .light-band { background: var(--surface); }
  .dim-band { background: var(--cream-dim); }
  .dark-band {
    background: var(--maroon-800);
    color: var(--cream-dim);
  }
  .dark-band h2, .dark-band h3 { color: #fff; }

  .purpose-band {
    position: relative;
    background:
      linear-gradient(180deg, rgba(42,10,16,0.92), rgba(69,16,24,0.94)),
      url('../img/team-laptop.jpg') center 25% / cover no-repeat;
  }

  /* ---------- About / split ---------- */
  .split {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 64px;
    /* The photo is taller than the text column next to it (portrait
       aspect-ratio vs a few lines of copy) — centering the row instead of
       top-aligning it means the shorter text column sits centered against
       the photo's full height, rather than the photo just hanging past
       the bottom of the text. */
    align-items: center;
  }

  .about-figure {
    position: relative;
    /* Nudged slightly below dead-center against the text column — a pure
       center (see .split above) read as a touch too high. */
    top: 16px;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 4/5;
    border: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
    background:
      linear-gradient(160deg, var(--maroon-700) 0%, var(--maroon-900) 62%),
      repeating-linear-gradient(90deg, rgba(198,154,82,0.10) 0 2px, transparent 2px 34px);
  }

  .figure-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .about-figure::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(42,10,16,0.75) 0%, rgba(42,10,16,0) 42%);
    z-index: 1;
  }

  .about-figure figcaption {
    position: absolute;
    left: 24px;
    bottom: 22px;
    color: var(--gold-soft);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 2;
  }

  .about-body p { color: var(--text-soft); margin-top: 18px; max-width: 54ch; }

  .kicker-list {
    margin-top: 34px;
    display: grid;
    gap: 16px;
  }

  .kicker-list li {
    display: flex;
    gap: 14px;
    align-items: center;
    list-style: none;
    font-size: 0.95rem;
    color: var(--text);
  }

  .kicker-list li::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
  }

  /* ---------- Mission / Vision ---------- */
  .mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 44px;
  }

  .mv-cell {
    background: var(--maroon-900);
    padding: 40px 44px;
  }

  .mv-cell .eyebrow { color: var(--gold-soft); }
  .mv-cell p { margin-top: 16px; color: var(--cream-dim); max-width: 42ch; }

  /* ---------- Core values: zig-zag scroll timeline ---------- */
  .values-grid {
    margin-top: 56px;
    margin-inline: auto;
    position: relative;
    max-width: 880px;
  }

  .values-line {
    position: absolute;
    left: 50%;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-soft) 100%);
    transform: translateX(-50%) scaleY(var(--p, 1));
    transform-origin: top center;
  }

  .value-card {
    width: calc(50% - 40px);
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px 0;
    position: relative;
  }

  .value-card + .value-card { margin-top: 4px; }

  .value-card.side-left { margin-right: auto; flex-direction: row-reverse; text-align: right; }
  .value-card.side-right { margin-left: auto; flex-direction: row; text-align: left; }

  /* Each value now sits in its own visible card (background, border, shadow)
     instead of bare text on the page background — every card gets the same
     treatment, not just the first one. */
  .value-card .value-body {
    background: var(--surface);
    /* Was --line at 16% opacity — nearly invisible against the card's own
       near-white surface, so the cards read as edgeless. A visible gold
       outline instead, matching the icon circle each card sits next to. */
    border: 1px solid var(--gold);
    border-radius: 16px;
    padding: 22px 26px;
    box-shadow: 0 18px 40px -22px rgba(42,10,16,0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .value-card:hover .value-body { transform: translateY(-3px); box-shadow: 0 22px 46px -20px rgba(42,10,16,0.42); border-color: var(--maroon-700); }
  /* will-change keeps the browser from redrawing a blurry/boxy edge around
     the card mid-scroll while its opacity and position are animating. */
  .value-card.reveal { will-change: opacity, transform; }

  .value-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 22px -14px rgba(42,10,16,0.4);
    transition: transform 0.28s ease, border-color 0.28s ease;
    position: relative;
    z-index: 1;
  }

  .value-card:hover .value-icon { transform: scale(1.08); border-color: var(--maroon-700); }

  .value-icon svg { width: 30px; height: 30px; overflow: visible; }

  .value-body { padding-top: 4px; }

  .value-card .num {
    font-family: var(--font-heading, 'Fraunces'), serif;
    color: var(--gold);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    display: block;
    margin-bottom: 4px;
  }

  .value-card h3 { font-size: 1.2rem; }
  .value-card p { color: var(--text-soft); font-size: 0.95rem; margin-top: 6px; }

  @media (max-width: 720px) {
    .values-line { display: none; }
    .value-card, .value-card.side-left, .value-card.side-right {
      width: 100%;
      margin: 0;
      flex-direction: row;
      text-align: left;
      padding: 8px 0;
    }
    /* The card itself (.value-body) now carries its own border/shadow, so
       mobile no longer needs separate divider lines between rows — they'd
       just double up with the card edges. */
    .value-card .value-body { padding: 18px 20px; }
    .value-card + .value-card { margin-top: 14px; }
  }

  /* ---------- Why choose ---------- */
  .why-wrap {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: center;
  }

  .why-figure {
    aspect-ratio: 3/4;
    border-radius: 6px;
    border: 1px solid rgba(198,154,82,0.45);
    background:
      radial-gradient(120% 90% at 20% 0%, rgba(198,154,82,0.35), transparent 55%),
      linear-gradient(200deg, var(--maroon-700), var(--maroon-900));
    position: relative;
    overflow: hidden;
  }

  /* ---------- Live listings (Property Finder-style, API-ready) ---------- */
  .listing-grid {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
  }

  .listing-card {
    background: var(--surface);
    border: 1px solid rgba(69,16,24,0.32);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 16px -12px rgba(42,10,16,0.3);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  }
  .listing-card:hover { transform: translateY(-5px); border-color: rgba(69,16,24,0.45); box-shadow: 0 20px 36px -20px rgba(42,10,16,0.35); }

  .listing-figure {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--maroon-900);
  }
  .listing-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }
  .listing-card:hover .listing-figure img { transform: scale(1.06); }

  .listing-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    color: #fff;
  }
  .listing-tag.sale { background: var(--maroon-800); }
  .listing-tag.rent { background: var(--gold); color: var(--maroon-900); }

  .listing-save {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--maroon-800);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
  }
  .listing-save:hover { background: #fff; transform: scale(1.08); }
  .listing-save.saved { color: var(--gold); }
  .listing-save svg { width: 16px; height: 16px; }

  .listing-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
  }

  /* ---------- Property detail page layout (photos/details + enquiry sidebar) ----------
     Was previously an inline style on the page with no mobile version, so on
     a phone it never stacked and squeezed the whole enquiry form into a
     half-width column. Now a real class with a mobile stacking rule below. */
  .property-detail {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: start;
  }

  .listing-price {
    font-family: var(--font-heading, 'Fraunces'), serif;
    color: var(--maroon-800);
    font-size: 1.3rem;
    font-weight: 600;
  }
  .listing-price .period {
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.72rem;
    color: var(--ink-soft);
    font-weight: 400;
    margin-left: 4px;
  }

  .listing-title { font-size: 1rem; font-weight: 500; color: var(--ink); }

  .listing-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    color: var(--text-soft);
  }
  .listing-location svg { flex-shrink: 0; color: var(--gold); }

  .listing-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 0.84rem;
    color: var(--ink-soft);
  }
  .listing-specs span { display: flex; align-items: center; gap: 6px; }
  .listing-specs svg { color: var(--gold); flex-shrink: 0; }

  .listing-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
  }
  .listing-agent-logo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--cream-dim);
    padding: 3px;
    flex-shrink: 0;
  }
  .listing-footer span {
    font-size: 0.8rem;
    color: var(--ink-soft);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .listing-contact-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--maroon-800);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .listing-contact-btn svg { width: 15px; height: 15px; }
  .listing-contact-btn:hover { background: var(--maroon-800); color: #fff; border-color: var(--maroon-800); }
  .listing-contact-btn.whatsapp { color: #25D366; border-color: rgba(37,211,102,0.4); }
  .listing-contact-btn.whatsapp:hover { background: #25D366; color: #fff; border-color: #25D366; }

  .listing-view-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 12px;
    border: 1px solid var(--maroon-800);
    background: none;
    color: var(--maroon-800);
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    padding: 9px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
    text-decoration: none;
  }
  .listing-view-btn:hover { background: var(--maroon-800); color: #fff; }

  .listing-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 0;
    color: var(--text-soft);
  }

  /* ---------- Featured collections gallery ---------- */
  .gallery-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  .gallery-card { display: flex; flex-direction: column; }

  .gallery-figure {
    aspect-ratio: 4/5;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: var(--maroon-900);
    border: 1px solid var(--line);
  }

  .gallery-figure img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .gallery-card:hover .gallery-figure img { transform: scale(1.06); }

  .gallery-figure .tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(42,10,16,0.65);
    color: var(--gold-soft);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 2px;
    z-index: 2;
  }

  .gallery-card h4 {
    margin-top: 18px;
    font-size: 1.1rem;
    color: var(--maroon-800);
  }

  .gallery-card p {
    margin-top: 6px;
    font-size: 0.88rem;
    color: var(--text-soft);
  }

  /* ---------- Our Process (step-by-step workflow) ---------- */
  .process-track {
    position: relative;
    margin-top: 64px;
  }

  .process-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 100%);
    transform-origin: left center;
    transform: scaleX(var(--p, 1));
  }

  .process-steps {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }

  .step-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }

  .step-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 12px 26px -16px rgba(42,10,16,0.5);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  }

  .step-card:hover .step-icon {
    transform: translateY(-4px) scale(1.05);
    border-color: var(--maroon-700);
    box-shadow: 0 16px 30px -14px rgba(42,10,16,0.45);
  }

  .step-icon svg { width: 40px; height: 40px; overflow: visible; }

  .icon-path {
    fill: none;
    stroke: var(--maroon-800);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  @media (prefers-reduced-motion: no-preference) {
    .icon-path {
      stroke-dasharray: 100;
      stroke-dashoffset: calc(100 - (var(--p, 1) * 100));
    }
  }

  .step-num {
    font-family: var(--font-heading, 'Fraunces'), serif;
    color: var(--gold);
    font-size: 0.82rem;
    letter-spacing: 0.12em;
  }

  .step-card h4 { font-size: 1.08rem; }

  .step-card p {
    color: var(--text-soft);
    font-size: 0.92rem;
    max-width: 22ch;
  }

  @media (max-width: 880px) {
    .process-steps { grid-template-columns: 1fr; gap: 40px; }
    .process-line { display: none; }
  }

  .why-list { margin-top: 32px; display: grid; gap: 22px; }

  .why-item { display: flex; gap: 18px; align-items: flex-start; }

  .why-item .mark {
    font-family: var(--font-heading, 'Fraunces'), serif;
    color: var(--gold);
    font-size: 1.1rem;
    border: 1px solid var(--gold);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 500;
  }

  .why-item p { padding-top: 5px; }
  .why-item strong { display: block; color: var(--maroon-800); font-size: 1.02rem; font-family: var(--font-heading, 'Fraunces'), serif; font-weight: 500; margin-bottom: 3px;}

  /* ---------- Market expertise band ---------- */
  .expertise-grid {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .expertise-grid--2col { grid-template-columns: repeat(2, 1fr); }

  .expertise-tile {
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 26px 22px;
    background: var(--surface);
  }

  .expertise-tile h4 {
    font-size: 1rem;
    color: var(--maroon-800);
  }
  .expertise-tile p {
    margin-top: 10px;
    font-size: 0.86rem;
    color: var(--text-soft);
  }

  /* ---------- Network ---------- */
  .network-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
  }

  .network-tile {
    border: 1px solid rgba(250,246,238,0.18);
    background: rgba(250,246,238,0.05);
    border-radius: 8px;
    padding: 26px 20px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .network-tile .mono {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--cream);
    border: 3px solid rgba(250,246,238,0.9);
    box-shadow: 0 6px 18px -6px rgba(0,0,0,0.4);
    flex-shrink: 0;
    padding: 20px;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
  }

  .network-tile .mono img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }

  .network-tile:hover .mono { transform: scale(1.05); box-shadow: 0 10px 22px -8px rgba(0,0,0,0.4); }

  .network-tile span {
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: var(--cream);
    line-height: 1.3;
  }

  /* ---------- Contact / footer ---------- */
  .contact-band {
    background: var(--maroon-900);
    color: var(--cream-dim);
    padding-block: 80px 40px;
  }

  .contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
  }

  .contact-grid h2 { color: #fff; }
  .contact-grid p.lede { margin-top: 16px; max-width: 46ch; color: var(--cream-dim); }

  .contact-list { margin-top: 36px; display: grid; gap: 18px; }

  .contact-list li {
    list-style: none;
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 0.95rem;
  }

  .contact-list .ico {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(198,154,82,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--gold-soft);
    font-size: 0.95rem;
  }

  .contact-form {
    background: rgba(250,246,238,0.04);
    border: 1px solid rgba(250,246,238,0.14);
    border-radius: 4px;
    padding: 34px;
  }

  .contact-form h3 { color: #fff; font-size: 1.15rem; margin-bottom: 20px; }

  .field { margin-bottom: 16px; }
  .field label {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-bottom: 7px;
  }
  .field input, .field textarea, .field select {
    width: 100%;
    background: rgba(250,246,238,0.06);
    border: 1px solid rgba(250,246,238,0.2);
    border-radius: 2px;
    padding: 11px 13px;
    color: var(--cream);
    font-family: var(--font-body, 'Jost'), sans-serif;
    font-size: 0.9rem;
  }
  /* Dropdowns (browser chrome renders their arrow itself, but not the
     background) need an explicit dark option background here, or a
     visited/native combobox can flash white-on-white while open. */
  .field select { color-scheme: dark; }
  .field input::placeholder, .field textarea::placeholder { color: rgba(250,246,238,0.35); }
  .field input:focus, .field textarea:focus, .field select:focus {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
  }
  .field textarea { resize: vertical; min-height: 84px; }

  /* The enquiry form on the property detail page reuses .field but sits on a
     light card (.listing-body), not the dark contact band — override back
     to dark-on-light so the inputs are actually visible there. */
  .listing-body .field label { color: var(--ink-soft); }
  .listing-body .field input,
  .listing-body .field textarea,
  .listing-body .field select {
    background: var(--cream-dim);
    border: 1px solid var(--line);
    color: var(--ink);
  }
  .listing-body .field select { color-scheme: light; }
  .listing-body .field input::placeholder,
  .listing-body .field textarea::placeholder { color: var(--ink-soft); opacity: 0.75; }
  .listing-body .field input:focus,
  .listing-body .field textarea:focus,
  .listing-body .field select:focus { outline: 2px solid var(--maroon-700); outline-offset: 1px; }

  /* ---------- Enquiry widget (property page sidebar) ----------
     Scoped to .enquiry-widget only, so this more compact sizing and the
     icon-plus-text button layout don't change .field/.btn anywhere else
     on the site. */
  .enquiry-widget .field { margin-bottom: 12px; }
  .enquiry-widget .field label { font-size: 0.72rem; margin-bottom: 5px; }
  .enquiry-widget .field input,
  .enquiry-widget .field textarea,
  .enquiry-widget .field select { padding: 9px 11px; font-size: 0.85rem; border-radius: 8px; }
  .enquiry-widget .field textarea { min-height: 68px; }
  /* Preferred date/time used to be native <input type="date"/"time">
     pickers, which render very differently (and sometimes badly) across
     phones and browsers. They're now plain dropdowns instead, styled the
     same as every other field above — nothing browser-native left to
     account for here. */

  .enquiry-widget .btn.enquiry-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    font-size: 0.74rem;
    border-radius: 8px;
    text-align: center;
  }
  .enquiry-widget .btn.enquiry-btn svg { flex-shrink: 0; }
  .enquiry-widget .enquiry-btn-whatsapp:hover { background: rgba(37,211,102,0.08); }

  /* The A2A form (public/a2a.php) sits on the page's light cream
     background, not the dark maroon contact band — .contact-form's white
     text was invisible there. This is the light-theme equivalent: dark
     ink text and a bordered white card, matching how .listing-body
     already overrides .field for the property page's (also light)
     enquiry widget. */
  .a2a-form {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 34px;
  }
  .a2a-form h3 { color: #000; font-size: 1.05rem; margin: 0 0 16px; }
  .a2a-form .field label { color: #000; }
  .a2a-form .field input,
  .a2a-form .field textarea,
  .a2a-form .field select {
    background: var(--cream-dim);
    border: 1px solid var(--line);
    color: #000;
  }
  .a2a-form .field select { color-scheme: light; }
  .a2a-form .field input::placeholder,
  .a2a-form .field textarea::placeholder { color: var(--ink-soft); opacity: 0.75; }
  .a2a-form .field input:focus,
  .a2a-form .field textarea:focus,
  .a2a-form .field select:focus { outline: 2px solid var(--maroon-700); outline-offset: 1px; }

  /* Preferred-date pop-up calendar (assets/datepicker.js). Deliberately
     plain black-on-white on every background — the dark contact band and
     the light property-page card both host it, so a fixed neutral
     palette here is simpler and more legible than trying to theme it
     maroon/gold like the rest of the form. */
  .cal-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 90;
    width: 264px;
    max-width: calc(100vw - 32px);
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    box-shadow: 0 16px 34px -14px rgba(0,0,0,0.35);
    padding: 12px;
  }
  .cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .cal-month-label { font-size: 0.85rem; font-weight: 600; color: #1a1a1a; }
  .cal-nav {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #d8d8d8;
    background: #fff;
    color: #1a1a1a;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
  }
  .cal-nav:hover:not(:disabled) { background: #f2f2f2; }
  .cal-nav:disabled { opacity: 0.3; cursor: default; }
  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }
  .cal-dow {
    text-align: center;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    color: #8a8a8a;
    padding-bottom: 4px;
  }
  .cal-pad { visibility: hidden; }
  .cal-day {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: #1a1a1a;
    font-size: 0.8rem;
    cursor: pointer;
  }
  .cal-day:hover:not(:disabled) { background: #f2f2f2; }
  .cal-day-today { border-color: #1a1a1a; }
  .cal-day-selected { background: #1a1a1a; color: #fff; }
  .cal-day-disabled { color: #c9c9c9; cursor: default; }
  .js-cal-input { cursor: pointer; }

  @media (max-width: 420px) {
    .enquiry-widget .field input,
    .enquiry-widget .field textarea { font-size: 0.9rem; } /* keeps iOS from auto-zooming on focus */
  }

  .form-note {
    font-size: 0.84rem;
    color: rgba(250,246,238,0.55);
    margin-top: 4px;
  }

  /* ---------- Footer tagline + social icons (Admin → Settings → Footer & Social) ----------
     Only appears in the markup at all when an admin has set a tagline or at
     least one social link, so an unconfigured site's footer is unchanged. */
  .foot-social {
    margin-top: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .foot-social p {
    font-size: 0.92rem;
    color: rgba(250,246,238,0.65);
    max-width: 44ch;
  }
  .foot-social-icons { display: flex; gap: 12px; flex-shrink: 0; }
  .foot-social-icons a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(198,154,82,0.4);
    color: var(--gold-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .foot-social-icons a:hover { background: rgba(198,154,82,0.12); transform: translateY(-2px); }

  .foot-bottom {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(250,246,238,0.14);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.84rem;
    color: rgba(250,246,238,0.5);
  }

  .foot-bottom .brand-name { font-size: 0.82rem; letter-spacing: 0.18em; color: var(--gold-soft); }

  /* ---------- Responsive ---------- */
  @media (max-width: 880px) {
    nav.links:not(#mobileNav) { display: none; }
    .menu-toggle { display: inline-block; }
    .split, .why-wrap, .contact-grid, .property-detail { grid-template-columns: 1fr; }
    .about-figure, .why-figure { aspect-ratio: 16/9; }
    .mv-grid { grid-template-columns: 1fr; }
    .expertise-grid, .expertise-grid--2col { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-stats { gap: 32px; }
    .why-wrap .why-figure { order: -1; }
  }

  @media (max-width: 640px) {
    .nav-row { gap: 10px; }
    .brand-name { font-size: 0.86rem; letter-spacing: 0.12em; }
    .nav-cta { padding: 8px 14px; font-size: 0.74rem; }
    .wrap { padding-inline: 18px; }
    section { padding-block: 60px; }
    .hero { padding-block: 72px 40px; }
    .stats-section { padding-block: 0 24px; }
    .search-section { padding-block: 0 56px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { text-align: center; }
    .hero-stats { gap: 24px 36px; margin-top: 36px; }
    .contact-form { padding: 24px; }
    .search-tabs { padding: 4px; gap: 0; }
    .search-tabs .tab { padding: 8px 12px; font-size: 0.78rem; }
    .search-box { padding: 12px; }
  }

  @media (max-width: 520px) {
    .expertise-grid, .expertise-grid--2col, .gallery-grid { grid-template-columns: 1fr; }
    .network-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
    .value-card { gap: 18px; padding: 24px 4px; }
    .value-icon { width: 56px; height: 56px; }
    .value-icon svg { width: 24px; height: 24px; }
    section { padding-block: 64px; }
  }

  @media (max-width: 400px) {
    :root { font-size: 16px; }
    .wrap { padding-inline: 16px; }
    .brand-name { display: none; }
    .step-icon { width: 72px; height: 72px; }
    .step-icon svg { width: 32px; height: 32px; }
    .network-tile .mono { width: 104px; height: 104px; padding: 14px; }
  }

  /* ---------- Hover motion on repeated elements ---------- */
  .value-card, .expertise-tile, .network-tile, .why-item, .mv-cell {
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
  }
  .value-card:hover, .expertise-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 32px -20px rgba(42,10,16,0.35);
  }
  .network-tile:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    background: rgba(198,154,82,0.1);
  }
  .mv-cell:hover { background: var(--maroon-800); }
  .why-item .mark { transition: transform 0.28s ease, background 0.28s ease, color 0.28s ease; }
  .why-item:hover .mark { transform: scale(1.12); background: var(--gold); color: var(--maroon-900); }
  .kicker-list li::before { transition: transform 0.25s ease; }
  .kicker-list li:hover::before { transform: scale(1.5); }

  /* ---------- Scroll-scrubbed reveal ----------
     Progress is written by JS as a 0→1 custom property, driven straight off scroll
     position every frame (with a light lerp for smoothness) — so text and cards reveal
     and un-reveal continuously as you scroll, not as a one-shot trigger.
     The --p custom property defaults to 1 (fully shown) so content stays visible
     whenever the script hasn't run (no JS, or unsupported browser). */
  .reveal, .reveal-text {
    --p: 1;
  }
  @media (prefers-reduced-motion: no-preference) {
    .js-scrub .reveal {
      opacity: var(--p);
      transform: translateY(calc((1 - var(--p)) * 30px));
    }
    .js-scrub .hero-canvas { opacity: calc(var(--p) * 0.55); }
    .js-scrub .process-line { opacity: 1; transform: scaleX(var(--p)); }
    .js-scrub .values-line { opacity: 1; transform: translateX(-50%) scaleY(var(--p)); }
    .js-scrub .reveal-text {
      opacity: var(--p);
      transform: translateY(calc((1 - var(--p)) * 24px));
      clip-path: inset(0 0 calc((1 - var(--p)) * 62%) 0);
    }
    .js-scrub .rule.reveal-text {
      opacity: 1;
      transform: scaleX(var(--p));
      clip-path: none;
    }
  }

  /* ---------- Hero entrance animation ----------
     The hero text sits in the first screenful the visitor sees, so it can't
     use the scroll-position "reveal" effect above (nothing to scroll to
     trigger it) — that was the fading-on-load bug. Instead this is a simple
     one-time fade-up that plays automatically on page load, staggered so the
     eyebrow, title and tagline arrive one after another. It always finishes
     and leaves the text fully visible, regardless of scroll. */
  @keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes navFadeDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Eyebrow words cascade in one at a time instead of fading up as a single
     block — each <span class="word"> (from word_reveal_markup() in
     functions.php) carries its own --wd stagger offset, read as this
     animation's delay below. A smaller lift than heroFadeUp (10px vs 22px)
     since these are small caps letters, not a headline. */
  @keyframes wordFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: no-preference) {
    /* Logo/nav bar fades gently down into place on page load too, so the
       whole top of the page arrives together rather than just the hero. */
    .nav-row { animation: navFadeDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .hero-inner h1, .hero-inner p.lede, .hero-stats {
      animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .hero-inner h1 { animation-delay: 0.32s; }
    .hero-inner p.lede { animation-delay: 0.46s; }
    .hero-stats    { animation-delay: 0.6s; }
    .hero-eyebrow .word {
      display: inline-block;
      animation: wordFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
      /* --wd is the per-word offset written inline by word_reveal_markup();
         0.05s is this line's own head-start before the title starts. */
      animation-delay: calc(0.05s + var(--wd, 0s));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    /* No entrance animation at all here, but the words are still separate
       inline-block spans — make sure that never reflows the text (an extra
       space, a line-break mid-phrase) for someone who turned motion off. */
    .hero-eyebrow .word { display: inline-block; }
  }

  /* ---------- Guided lead-capture chat widget (chatbot.js) ----------
     A scripted quick-questions widget, not an AI chat — see chatbot.js for
     why. Floating launcher bottom-right; panel slides up from the same
     corner. Kept visually consistent with the rest of the site (maroon +
     gold), and namespaced with a cb- prefix so it can't collide with any
     other component's classes. */
  .cb-launcher {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 80;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--maroon-800);
    color: var(--gold-soft);
    border: 1px solid rgba(198,154,82,0.5);
    box-shadow: 0 14px 30px -10px rgba(42,10,16,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s;
  }
  .cb-launcher:hover { transform: translateY(-3px) scale(1.04); animation-play-state: paused; }
  .cb-launcher-hidden { opacity: 0; visibility: hidden; transform: scale(0.85); pointer-events: none; }

  /* Gentle "notice me" motion on the closed launcher — a soft glowing ring
     that breathes outward, plus a very small periodic bounce. Both loop
     slowly and subtly (not a constant jiggle) so it draws the eye without
     being annoying. Stops automatically once the chat panel is open, since
     that's exactly when .cb-launcher-hidden is applied by chatbot.js, and
     respects prefers-reduced-motion like every other animation on the site. */
  @keyframes cbLauncherPulse {
    0%, 100% { box-shadow: 0 14px 30px -10px rgba(42,10,16,0.55), 0 0 0 0 rgba(198,154,82,0.5); }
    50% { box-shadow: 0 14px 30px -10px rgba(42,10,16,0.55), 0 0 0 9px rgba(198,154,82,0); }
  }
  @keyframes cbLauncherBounce {
    0%, 88%, 100% { transform: translateY(0); }
    94% { transform: translateY(-6px); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .cb-launcher:not(.cb-launcher-hidden) {
      animation: cbLauncherPulse 2.6s ease-in-out infinite, cbLauncherBounce 6s ease-in-out infinite;
    }
  }

  .cb-panel {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 81;
    width: min(360px, calc(100vw - 32px));
    height: min(520px, calc(100vh - 100px));
    background: var(--cream);
    border-radius: 18px;
    box-shadow: 0 28px 60px -18px rgba(20,4,8,0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.98);
    transform-origin: bottom right;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }
  .cb-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

  .cb-header {
    background: var(--maroon-800);
    color: #fff;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }
  .cb-header-title { display: flex; align-items: center; gap: 10px; font-size: 0.94rem; font-weight: 500; letter-spacing: 0.01em; }
  .cb-header-dot { width: 9px; height: 9px; border-radius: 50%; background: #3ecf6e; box-shadow: 0 0 0 3px rgba(62,207,110,0.25); flex-shrink: 0; }
  .cb-close { background: none; border: none; color: rgba(255,255,255,0.75); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 2px; }
  .cb-close:hover { color: #fff; }

  .cb-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--cream);
  }

  .cb-row { display: flex; }
  .cb-row-bot { justify-content: flex-start; }
  .cb-row-user { justify-content: flex-end; }

  .cb-bubble {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.5;
  }
  .cb-bubble-bot {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    border-bottom-left-radius: 4px;
  }
  .cb-bubble-user {
    background: var(--maroon-800);
    color: #fff;
    border-bottom-right-radius: 4px;
  }

  .cb-typing { display: flex; gap: 4px; padding: 13px 14px; }
  .cb-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ink-soft);
    opacity: 0.4;
    animation: cbTypingPulse 1.1s ease-in-out infinite;
  }
  .cb-typing span:nth-child(2) { animation-delay: 0.15s; }
  .cb-typing span:nth-child(3) { animation-delay: 0.3s; }
  @keyframes cbTypingPulse { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 0.9; transform: translateY(-2px); } }

  .cb-input-area {
    flex-shrink: 0;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--line);
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .cb-choice {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--maroon-800);
    background: #fff;
    color: var(--maroon-800);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .cb-choice:hover { background: var(--maroon-800); color: #fff; }

  .cb-input-area-text { flex-direction: column; align-items: stretch; }
  .cb-text-form { display: flex; gap: 8px; }
  .cb-text-input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--ink);
    background: var(--cream-dim);
  }
  .cb-text-input:focus { outline: 2px solid var(--maroon-700); outline-offset: 1px; }
  .cb-send {
    width: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    border: none;
    background: var(--maroon-800);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .cb-send:hover { background: var(--maroon-700); }
  .cb-skip {
    align-self: flex-end;
    background: none;
    border: none;
    color: var(--ink-soft);
    font-size: 0.78rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 2px 0;
  }

  @media (max-width: 480px) {
    .cb-launcher { right: 16px; bottom: 16px; }
    .cb-panel { right: 16px; left: 16px; bottom: 16px; width: auto; }
  }

  /* ---------- Discover: Buy / Invest / Live scroll story ----------
     A pinned, scroll-driven mini-story between the hero and the rest of
     the homepage: an about line that reveals word-by-word, three
     full-height panels (Buy/Invest/Live) that swap in as you scroll past
     them, then a grid of the areas we work in. Every class here is
     "dsc-" prefixed (or reuses .wrap/.eyebrow, the site's own shared
     utility classes) specifically so nothing here can ever collide with
     the .reveal/.panel/.grid/etc. classes used by the rest of the site —
     this block is entirely self-contained (see script.js: it only reads
     normal page scroll position, it never changes how scrolling itself
     behaves anywhere on the site). */
  .dsc-reveal { height: 320vh; position: relative; padding-block: 0; }
  .dsc-reveal .dsc-stick { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
  .dsc-reveal p { font-family: var(--font-heading, 'Fraunces'), serif; font-weight: 400; font-size: clamp(24px, 3.4vw, 46px); line-height: 1.3;
    max-width: 20em; margin: 18px 0 0; color: var(--cream-dim); text-wrap: pretty; }
  .dsc-w { opacity: 0.16; }

  .dsc-pin { height: 520vh; position: relative; padding-block: 0; }
  .dsc-pin .dsc-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; contain: layout paint; }
  .dsc-panel { position: absolute; inset: 0; display: flex; align-items: center;
    opacity: 0; visibility: hidden; will-change: opacity, transform; backface-visibility: hidden; }
  .dsc-panel .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 5vw, 80px); }
  .dsc-num { color: var(--gold-soft); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; font-family: var(--font-body, 'Jost'), sans-serif; }
  .dsc-panel h2 { font-family: var(--font-heading, 'Fraunces'), serif; font-weight: 400; font-style: italic; font-size: clamp(56px, 11vw, 150px); line-height: 0.95;
    margin: 0; letter-spacing: -0.01em; color: #fff; }
  .dsc-panel p { margin: 24px 0 0; max-width: 34ch; font-size: 0.95rem; line-height: 1.65; color: var(--cream-dim); font-family: var(--font-body, 'Jost'), sans-serif; }
  .dsc-panel a { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--gold-soft); text-decoration: none; font-size: 0.85rem;
    padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.24); font-family: var(--font-body, 'Jost'), sans-serif; }
  .dsc-panel a span { transition: transform 0.25s; }
  .dsc-panel a:hover span { transform: translateX(4px); }

  .dsc-obj { width: clamp(160px, 24vw, 320px); aspect-ratio: 1; position: relative; will-change: transform; pointer-events: none; }
  .dsc-glow { position: absolute; inset: -20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(198,154,82,0.28), transparent); }
  .dsc-shape { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 0.4s;
    -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center; }
  .dsc-shape.ready { opacity: 1; }
  .dsc-shape::before { content: ""; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; margin: -75% 0 0 -75%;
    background: conic-gradient(var(--gold), var(--maroon-900), var(--maroon-800), var(--gold-soft), var(--cream), var(--gold));
    animation: dsc-spin 12s linear infinite; will-change: transform; }
  .dsc-panel:not(.on) .dsc-shape::before { animation-play-state: paused; }
  @keyframes dsc-spin { to { transform: rotate(360deg); } }

  .dsc-tabs { position: absolute; left: 0; right: 0; bottom: 6vh; z-index: 3; }
  .dsc-tabs .wrap { display: flex; gap: 28px; }
  .dsc-tabs span { font-size: 0.78rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.24);
    min-width: 64px; transition: color 0.4s, border-color 0.4s; font-family: var(--font-body, 'Jost'), sans-serif; }
  .dsc-tabs span.on { color: #fff; border-color: var(--gold); }

  .dsc-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 11; opacity: 0;
    transform-origin: 0 50%; transform: scaleX(0); will-change: transform, opacity; transition: opacity 0.3s;
    background: linear-gradient(90deg, var(--gold), var(--maroon-700)); pointer-events: none; }

  @media (max-width: 640px) {
    .dsc-panel .wrap { grid-template-columns: 1fr; gap: 12px; }
    .dsc-obj { width: 130px; order: -1; margin-bottom: 16px; }
    .dsc-panel p { margin-top: 16px; }
    .dsc-tabs .wrap { gap: 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dsc-shape::before { animation: none; }
    .dsc-w { opacity: 1 !important; }
  }

  /* ---------- Listings: 4 per row (homepage shows 8, /properties shows all) ---------- */
  .wrap-wide { width: min(1280px, 100%); }
  .listing-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .listing-grid-4 .listing-body { padding: 16px 16px 20px; }
  .listing-grid-4 .listing-title { font-size: 0.95rem; }
  @media (max-width: 1100px) { .listing-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 820px)  { .listing-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
  @media (max-width: 560px)  { .listing-grid-4 { grid-template-columns: 1fr; } }
  .listings-more { text-align: center; margin-top: 40px; }
  .listings-more .btn { display: inline-block; border: none; }

  /* All Properties: one dark band (like the homepage hero) holding the heading and the search */
  .listings-hero {
    position: relative;
    z-index: 3; /* filter drop-downs open over the listings below */
    background:
      radial-gradient(90% 120% at 85% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 60%),
      linear-gradient(180deg, var(--maroon-800), var(--maroon-900));
    color: var(--cream);
    padding: 34px 0 34px;
  }
  .listings-hero .back-link { display: inline-block; font-size: 0.85rem; color: color-mix(in srgb, var(--cream) 70%, transparent); margin-bottom: 10px; text-decoration: none; transition: color .2s ease; }
  .listings-hero .back-link:hover { color: var(--gold); }
  .listings-hero .eyebrow { color: var(--gold); margin: 0; }
  .listings-hero h1 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: #fff; margin: 4px 0 2px; line-height: 1.15; }
  .listings-hero .listings-count { color: color-mix(in srgb, var(--cream) 72%, transparent); margin: 0 0 18px; font-size: 0.92rem; }
  .listings-hero .hero-search { max-width: 860px; margin: 0; }
  @media (max-width: 760px) { .listings-hero { padding: 24px 0 26px; } }
  .listings-page-body { padding-top: 36px; }
  .listings-page-body .listing-grid { margin-top: 0; }

  .site-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 44px; }
  .site-pager a, .site-pager span {
    min-width: 42px; height: 42px; padding: 0 14px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.9rem; text-decoration: none; color: var(--maroon-800);
  }
  .site-pager a { border: 1px solid rgba(69,16,24,0.28); background: var(--surface); transition: background .2s ease, color .2s ease, border-color .2s ease; }
  .site-pager a:hover { border-color: var(--maroon-800); }
  .site-pager a.active { background: var(--maroon-800); border-color: var(--maroon-800); color: #fff; }
  .site-pager .pager-gap { color: var(--text-soft); }

/* ---------- Property photo gallery + full-screen viewer ---------- */
.pd-main { display: block; width: 100%; padding: 0; border: 0; background: var(--maroon-900); border-radius: 12px; overflow: hidden; position: relative; aspect-ratio: 4/3; cursor: zoom-in; }
.pd-main-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .25s ease, transform .6s ease; }
.pd-main:hover .pd-main-img { transform: scale(1.02); }
.pd-zoom { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(20, 6, 9, .62); color: #fff; font-size: .8rem; letter-spacing: .04em; backdrop-filter: blur(4px); }
.pd-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pd-thumb { width: 96px; height: 74px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; opacity: .72; transition: opacity .2s, border-color .2s, transform .2s; }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb:hover { opacity: 1; transform: translateY(-2px); }
.pd-thumb.active { opacity: 1; border-color: var(--gold); }
.pd-thumb:focus-visible, .pd-main:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.pd-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(12, 3, 5, .94); }
.pd-lightbox.open { display: flex; }
.pd-lb-img { max-width: calc(100vw - 160px); max-height: calc(100vh - 140px); object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); user-select: none; }
.pd-lb-btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(198,154,82,.55); background: rgba(69,16,24,.55); color: #fff; cursor: pointer; transition: background .2s; }
.pd-lb-btn:hover { background: var(--maroon-800); border-color: var(--gold); }
.pd-lb-prev { left: 28px; top: 50%; transform: translateY(-50%); }
.pd-lb-next { right: 28px; top: 50%; transform: translateY(-50%); }
.pd-lb-close { top: 22px; right: 28px; width: 46px; height: 46px; }
.pd-lb-count { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: var(--gold-soft); font-size: .9rem; letter-spacing: .12em; }
body.pd-lb-lock { overflow: hidden; }
@media (max-width: 720px) {
  .pd-thumb { width: 72px; height: 56px; }
  .pd-lb-img { max-width: 100vw; max-height: calc(100vh - 120px); border-radius: 0; }
  .pd-lb-prev { left: 10px; } .pd-lb-next { right: 10px; }
  .pd-lb-btn { width: 42px; height: 42px; }
  .pd-lb-close { top: 14px; right: 14px; }
}

/* ======================================================================
   Arabic website (/ar/…): right-to-left layout and Arabic fonts.
   Flex and grid layouts mirror by themselves; these rules flip the few
   things that are positioned to one side on purpose.
   ====================================================================== */
html[dir="rtl"] {
  --font-heading: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', sans-serif;
}
html[dir="rtl"] body { font-family: var(--font-body); }
/* Arabic has no capitals and must not be letter-spaced (it breaks the joined letters). */
html[dir="rtl"] body *:not(svg):not(path) { letter-spacing: 0 !important; }
html[dir="rtl"] .eyebrow, html[dir="rtl"] .listing-tag, html[dir="rtl"] .gallery-figure .tag { text-transform: none; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { line-height: 1.45; }
html[dir="rtl"] .mv-cell p[style*="Fraunces"] { font-family: var(--font-heading) !important; }
html[dir="rtl"] .brand-name { font-family: var(--font-heading, 'Fraunces'), serif; }
html[dir="rtl"] .brand a, html[dir="rtl"] .brand-name { direction: ltr; }
/* Latin-only bits keep reading left-to-right inside Arabic text */
html[dir="rtl"] input[type="email"], html[dir="rtl"] input[name="phone"], html[dir="rtl"] input[name="whatsapp"],
html[dir="rtl"] .contact-list li, html[dir="rtl"] input[type="number"] { direction: ltr; text-align: right; }
html[dir="rtl"] input::placeholder, html[dir="rtl"] textarea::placeholder { text-align: right; }

/* Language switch in the header */
.lang-switch { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; margin-inline-start: 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; color: #fff; font-size: .9rem; white-space: nowrap; transition: border-color .2s, color .2s; }
.lang-switch:hover { border-color: var(--gold); color: var(--gold-soft); }
.lang-switch[lang="ar"] { font-family: 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', sans-serif; font-size: .95rem; }
.lang-switch[lang="en"] { font-family: var(--font-body, 'Jost'), sans-serif; }
#mobileNav .lang-switch { align-self: flex-start; margin-inline-start: 0; }
@media (max-width: 1100px) { .nav-row > .lang-switch { margin-inline-start: auto; } }

/* Things placed on one side */
html[dir="rtl"] nav.links a::after { left: auto; right: 0; }
html[dir="rtl"] .filter-panel { left: auto; right: 0; }
html[dir="rtl"] .filter-dd-last .filter-panel, html[dir="rtl"] .filter-panel.anchor-right { right: auto; left: 0; }
html[dir="rtl"] .type-dropdown { right: auto; left: 0; }
html[dir="rtl"] .about-figure figcaption { left: auto; right: 24px; }
html[dir="rtl"] .value-card.side-left { margin-right: 0; margin-left: auto; text-align: left; }
html[dir="rtl"] .value-card.side-right { margin-left: 0; margin-right: auto; text-align: right; }
html[dir="rtl"] .listing-tag, html[dir="rtl"] .gallery-figure .tag { left: auto; right: 14px; }
html[dir="rtl"] .listing-save { right: auto; left: 12px; }
html[dir="rtl"] .listing-price .period { margin-left: 0; margin-right: 4px; }
html[dir="rtl"] .cal-popup { left: auto; right: 0; }
html[dir="rtl"] .cb-launcher, html[dir="rtl"] .cb-panel { right: auto; left: 22px; }
html[dir="rtl"] .pd-zoom { right: auto; left: 14px; }
html[dir="rtl"] .pd-lb-prev { left: auto; right: 28px; }
html[dir="rtl"] .pd-lb-next { right: auto; left: 28px; }
html[dir="rtl"] .pd-lb-prev svg, html[dir="rtl"] .pd-lb-next svg { transform: scaleX(-1); }
html[dir="rtl"] .pd-lb-close { right: auto; left: 28px; }
html[dir="rtl"] .enquiry-btn svg, html[dir="rtl"] .cb-send svg { transform: scaleX(-1); }
html[dir="rtl"] .alert { text-align: right; }
@media (max-width: 720px) {
  html[dir="rtl"] .pd-lb-prev { right: 10px; left: auto; }
  html[dir="rtl"] .pd-lb-next { left: 10px; right: auto; }
  html[dir="rtl"] .pd-lb-close { left: 14px; right: auto; }
}
@media (max-width: 600px) {
  html[dir="rtl"] .cb-launcher { left: 16px; right: auto; }
  html[dir="rtl"] .cb-panel { left: 16px; right: 16px; }
}
html[dir="rtl"] nav.links a { white-space: nowrap; }
html[dir="rtl"] .nav-row nav.links { gap: 24px; }
@media (max-width: 1280px) { html[dir="rtl"] .nav-row nav.links { gap: 18px; } }
nav.links a { white-space: nowrap; }
@media (max-width: 1480px) { .nav-row nav.links { gap: 24px; } }
@media (max-width: 1280px) { .nav-row nav.links { gap: 18px; } }
@media (max-width: 720px) {
  .nav-row > .lang-switch { min-height: 36px; padding: 0 10px; font-size: .8rem; margin-inline-start: 4px; }
  .nav-row > .lang-switch[lang="ar"] { font-size: .88rem; }
  .hero-eyebrow { flex-wrap: wrap; }
}
html[dir="rtl"] input[placeholder^="+"], html[dir="rtl"] input[type="date"] { direction: ltr; text-align: right; }

/* ---------- A2A page: download the form (details first) ---------- */
.a2a-download { margin-top: 26px; padding: 26px 28px; background: var(--surface, #fff); border: 1px solid var(--line, #e3d6c4); border-radius: 12px; box-shadow: 0 12px 30px -24px rgba(42,10,16,.45); }
.a2a-download-head { display: flex; gap: 14px; align-items: flex-start; color: var(--maroon-800); }
.a2a-download-head svg { flex: 0 0 auto; margin-top: 3px; color: var(--gold); }
.a2a-download-head h2 { font-size: 1.25rem; margin: 0 0 4px; color: var(--maroon-800); }
.a2a-download-head p { margin: 0; font-size: .92rem; color: var(--ink-soft, #5a4a45); }
.a2a-download-note { margin: 18px 0 10px; font-size: .88rem; color: var(--ink-soft, #5a4a45); }
.a2a-download-choice { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.a2a-download-choice label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--line, #e3d6c4); border-radius: 999px; cursor: pointer; font-size: .92rem; text-transform: none; letter-spacing: 0; font-weight: 500; }
.a2a-download-choice input { width: auto; accent-color: var(--maroon-800); margin: 0; }
.a2a-download-choice label:has(input:checked) { border-color: var(--maroon-800); background: rgba(69,16,24,.06); }
.a2a-download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.a2a-download-form .captcha-field { max-width: 50%; }
.a2a-download-errors { margin-top: 16px; background: rgba(200,60,60,.08); border: 1px solid rgba(200,60,60,.35); border-radius: 8px; padding: 10px 14px; color: #7a1f1f; font-size: .9rem; }
.a2a-download-ok { margin: 16px 0 4px; color: #1f6a3a; font-weight: 600; }
.a2a-download-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.btn-outline { background: transparent; color: var(--maroon-800); border: 1px solid var(--maroon-800); }
.btn-outline:hover { background: var(--maroon-800); color: #fff; }
@media (max-width: 640px) {
  .a2a-download { padding: 20px 18px; }
  .a2a-download-grid { grid-template-columns: 1fr; }
  .a2a-download-form .captcha-field { max-width: none; }
}
.a2a-download .field label { color: #000; }
.a2a-download .field input { background: var(--cream-dim); border: 1px solid var(--line); color: #000; }
.a2a-download .field input::placeholder { color: var(--ink-soft); opacity: .75; }
.a2a-download .field input:focus { outline: 2px solid var(--maroon-700); outline-offset: 1px; }