@charset "UTF-8";
/**
 * cire-luxury.css — CIRECaribbean.com luxury redesign layer
 * ===========================================================================
 * REBUILD (round two). The first draft was rejected on mobile. This file is
 * written against the ACTUAL rendered DOM of the live site, not against
 * assumptions, and every rule below is mobile-first.
 *
 * WHY THE FIRST DRAFT FAILED — both causes confirmed from the real markup
 * and the theme's own JavaScript:
 *
 *   1. BREAKPOINT MISMATCH. The mockups use 729px/1024px. This theme's
 *      Foundation build actually breaks at 45.5625em (729px) and 85.375em
 *      (1366px), and its JS uses two more: mrt-prop-details.js toggles
 *      .property-detail-mobile-footer at 1024px and auto-expands the spec
 *      accordions at 768px. Writing tablet rules at 1024px meant that from
 *      1025-1365px the DOM was still in its mobile configuration while the
 *      CSS applied desktop grid rules.
 *
 *   2. ACCORDIONS FORCED OPEN ON PHONES. The draft set
 *      .accordion__content { display:block !important } at every width. The
 *      theme only auto-expands those panels at >=768px and deliberately
 *      leaves them collapsed and tappable below that, so on a phone every
 *      spec table was blown open into an enormous wall of content.
 *      This file never forces them open; the theme's own JS governs them.
 *
 * A third, content-level error is also corrected here: the draft styled
 * .property-detail-highlights__list as the mockup's hairline facts row. It is
 * not — it is the "Property Highlights" feature list (Beachfront, Pool,
 * Waterfront). The real facts row is .property-detail-sidebar__unit-spec,
 * whose children are __unit-spec-figure and __unit-spec-label.
 *
 * SCOPE OF THIS FILE (deliberately narrow):
 *   Tokens + the property-detail page, scoped to the body class
 *   .property-detail-a-2col so nothing can leak to other templates.
 *   The homepage, search, agents, island and content-page rules from the
 *   draft are intentionally REMOVED until each is rebuilt against its own
 *   rendered DOM the same way. Shipping unverified CSS for five more page
 *   types is what caused the rejection.
 *
 * Loaded after css/app.css via a 'neutrino_styles' dependency (see
 * includes/enqueue.php). app.css is compiled and must never be hand-edited.
 *
 * BREAKPOINTS USED HERE — the mockup's 729/1024, which also line up with
 * real behaviour in this theme:
 *   base            phones, < 729px  (Foundation small; type tuned for 375px)
 *   >= 729px        Foundation small/medium boundary (45.5625em)
 *   >= 1024px       theme JS stops showing the sticky mobile footer
 *
 * Two other thresholds exist in the theme and are respected rather than
 * fought: its JS auto-expands the spec accordions at >=768px (so this file
 * never sets display on them), and Foundation's own "large" is 1366px (so
 * between 1024 and 1365 the masthead is still in mobile configuration).
 */

/* ==========================================================================
   01 TOKENS
   ========================================================================== */
:root {
  --cire-white: #ffffff;
  --cire-panel: #f6f7f7;
  --cire-black: #000000;
  --cire-charcoal: #384249;
  --cire-gray-med: #76787b;
  --cire-gray-light: #a3aaad;
  --cire-gold: #c9ac77;
  --cire-gold-dark: #bfa066;
  --cire-hairline: #e3e5e6;

  /* Playfair is already loaded by header.php via Google Fonts — no new
     network request. Georgia carries the fallback during the swap. */
  --cire-serif: "Playfair Display", "Playfair", Georgia, "Times New Roman", serif;
  --cire-sans: "Proxima Nova", "Proxima Nova W01", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   02 PROPERTY DETAIL — everything below is scoped to this page
   Type scale is clamp()-based throughout. Every minimum is chosen to be
   comfortable at 375px, and no value is a bare px font-size.
   ========================================================================== */

/* ---- address ----------------------------------------------------------- */
.property-detail-a-2col .property-detail-header__address {
  font-family: var(--cire-serif);
  font-weight: 500;
  /* 375px -> 1.5rem/24px. Only reaches 2.5rem on a wide desktop. */
  font-size: clamp(1.5rem, 4.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--cire-black);
  letter-spacing: 0.01em;
  text-transform: none;
  text-wrap: balance;
}

/* ---- price ------------------------------------------------------------- */
.property-detail-a-2col .property-detail-price__price,
.property-detail-a-2col .property-detail-price__price.fuelidx_price {
  font-family: var(--cire-sans);
  font-weight: 400;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  color: var(--cire-charcoal);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
/* price reduction: informative, never shouting. Christie's red stays unused. */
.property-detail-a-2col .property-detail-price__change {
  font-size: clamp(0.66rem, 1.8vw, 0.72rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
  margin-top: 4px;
}

/* ---- status line ------------------------------------------------------- */
.property-detail-a-2col .property-detail-header__details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
  font-size: clamp(0.66rem, 1.9vw, 0.72rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
  line-height: 1.6;
}
.property-detail-a-2col .property-detail-header__detail,
.property-detail-a-2col .property-detail-header__detail a {
  color: var(--cire-gray-med);
  text-decoration: none;
}
.property-detail-a-2col .property-detail-header__detail a:hover {
  color: var(--cire-gold);
}
.property-detail-a-2col .property-detail-header__detail--availability.active {
  color: var(--cire-charcoal);
  background: none;
  border: none;
  padding: 0;
}
/* separators, suppressed when the row wraps onto its own line on a phone */
@media (min-width: 480px) {
  .property-detail-a-2col
    .property-detail-header__detail
    + .property-detail-header__detail::before {
    content: "·";
    margin: 0 0.6em;
    color: var(--cire-gray-light);
  }
}

/* ---- facts row --------------------------------------------------------
   The REAL facts row: beds / baths / sqft. Hairline rules above and below,
   per the mockup. (.property-detail-highlights__list is a different thing
   and is handled further down.)
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-sidebar__unit-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 20px 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--cire-hairline);
  border-bottom: 1px solid var(--cire-hairline);
}
.property-detail-a-2col .property-detail-sidebar__unit-spec {
  flex: 1 1 33%;
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  min-width: 0;
}
.property-detail-a-2col .property-detail-sidebar__unit-spec-figure {
  font-size: clamp(0.95rem, 2.6vw, 1.05rem);
  color: var(--cire-black);
  font-variant-numeric: tabular-nums;
}
.property-detail-a-2col .property-detail-sidebar__unit-spec-label {
  font-size: clamp(0.78rem, 2.2vw, 0.9rem);
  color: var(--cire-gray-med);
  text-transform: none;
}

/* ---- action buttons ---------------------------------------------------- */
.property-detail-a-2col .property-detail-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.property-detail-a-2col .property-detail-header__actions > li {
  margin: 0;
  list-style: none;
}
.property-detail-a-2col .property-detail-header__action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background: var(--cire-white);
  /* 44px minimum touch target */
  min-height: 44px;
  padding: 10px 18px;
  font-size: clamp(0.76rem, 2.1vw, 0.82rem);
  letter-spacing: 0.08em;
  color: var(--cire-charcoal);
  text-decoration: none;
  cursor: pointer;
}
.property-detail-a-2col .property-detail-header__action-button:hover {
  border-color: var(--cire-gold);
  color: var(--cire-charcoal);
}
.property-detail-a-2col .property-detail-header__action-button:focus-visible {
  outline: 2px solid var(--cire-gold);
  outline-offset: 2px;
}
/* Request Info — the single solid-gold call to action on the page */
.property-detail-a-2col .property-detail-header__schedule,
.property-detail-a-2col a.button.property-detail-header__schedule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--cire-gold);
  border: none;
  border-radius: 0;
  color: #2c3338;
  font-size: clamp(0.76rem, 2.1vw, 0.82rem);
  letter-spacing: 0.1em;
  padding: 12px 24px;
  text-decoration: none;
}
.property-detail-a-2col .property-detail-header__schedule:hover,
.property-detail-a-2col a.button.property-detail-header__schedule:hover {
  background: var(--cire-gold-dark);
  color: #2c3338;
}

/* ---- gallery -----------------------------------------------------------
   The slider is left functionally intact: it carries the Matterport and
   video embeds, the magnific-popup lightbox (rrrOpenLightbox triggers a
   click on .slick-current a) and its own counter wiring. Chrome only.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-slider__container {
  position: relative;
  background: var(--cire-white);
}
.property-detail-a-2col .property-detail-slider__image {
  background-size: cover;
  background-position: center;
  border-radius: 0;
}
/* photo counter -> white pill, top right */
.property-detail-a-2col .property-detail-slider__count {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  bottom: auto;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: clamp(0.66rem, 1.9vw, 0.72rem);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  border: none;
  box-shadow: none;
}
/* status chips over the hero. :empty guard matters — this container renders
   with no children on listings that carry no tags. */
.property-detail-a-2col .property-detail-slider__meta {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.property-detail-a-2col .property-detail-slider__meta:empty {
  display: none;
}
.property-detail-a-2col .property-detail-slider__meta-tag {
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-size: clamp(0.56rem, 1.7vw, 0.6rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: none;
  border-radius: 0;
}

/* ---- description ------------------------------------------------------- */
.property-detail-a-2col .property-detail-main__description {
  font-size: clamp(0.95rem, 2.4vw, 1rem);
  line-height: 1.75;
  color: var(--cire-charcoal);
  max-width: 68ch;
}

/* ---- section headings -------------------------------------------------- */
.property-detail-a-2col .property-detail-main__content-header,
.property-detail-a-2col .property-detail-main__accordion-section .accordion__title,
.property-detail-a-2col .property-detail-main__accordion-section .accordion__title a {
  font-family: var(--cire-sans);
  font-size: clamp(0.78rem, 2.2vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-black);
  text-decoration: none;
}
.property-detail-a-2col .property-detail-main__content-header {
  margin: 36px 0 14px;
}

/* ---- Property Highlights (feature tags, NOT the facts row) ------------- */
.property-detail-a-2col .property-detail-highlights__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.property-detail-a-2col .property-detail-highlights__list-item {
  list-style: none;
  border: 1px solid var(--cire-hairline);
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-size: clamp(0.72rem, 2vw, 0.78rem);
  letter-spacing: 0.08em;
  padding: 7px 14px;
}

/* ---- spec tables -------------------------------------------------------
   NOTE: no display/height/visibility rules here on purpose. The theme's JS
   expands these panels at >=768px and leaves them collapsed and tappable
   below that. Forcing them open is what broke the phone layout.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-main__accordion-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.85rem, 2.3vw, 0.92rem);
  background: transparent;
}
.property-detail-a-2col .property-detail-main__accordion-table tr {
  border-bottom: 1px solid var(--cire-hairline);
  background: transparent;
}
.property-detail-a-2col .property-detail-main__accordion-table tr:last-child {
  border-bottom: none;
}
.property-detail-a-2col .property-detail-main__accordion-table td {
  padding: 10px 10px 10px 0;
  border: none;
  background: transparent;
  color: var(--cire-charcoal);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
  word-break: break-word;
}
.property-detail-a-2col .property-detail-main__accordion-table td:first-child {
  color: var(--cire-gray-med);
  font-weight: 400;
  width: 46%;
}
.property-detail-a-2col .property-detail-main__accordion-inner-table-header {
  color: var(--cire-gray-med);
  font-weight: 400;
}

/* ---- sidebar ----------------------------------------------------------- */
.property-detail-a-2col .property-detail-sidebar__form {
  background: var(--cire-panel);
  border: none;
  border-radius: 0;
  padding: 24px 20px;
}
.property-detail-a-2col .property-detail-sidebar__agent-name {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1rem, 2.6vw, 1.1rem);
  color: var(--cire-black);
}
.property-detail-a-2col .property-detail-sidebar__agent-phone-type {
  font-size: clamp(0.6rem, 1.8vw, 0.64rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
}
.property-detail-a-2col .property-detail-sidebar__agent-phone a {
  color: var(--cire-charcoal);
  text-decoration: none;
}
.property-detail-a-2col .property-detail-sidebar__agent-phone a:hover {
  color: var(--cire-gold);
}

/* Gravity Form inside the inquiry panel. Markup, hooks and validation are
   untouched — this only restyles the fields. */
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper input[type="text"],
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper input[type="email"],
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper input[type="tel"],
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper textarea {
  width: 100%;
  border: 1px solid var(--cire-gold);
  border-radius: 0;
  background: var(--cire-white);
  padding: 12px 13px;
  font-family: var(--cire-sans);
  font-size: 1rem; /* >=16px: stops iOS Safari zooming the page on focus */
  color: var(--cire-charcoal);
  box-shadow: none;
}
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper input:focus,
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper textarea:focus {
  outline: 2px solid var(--cire-gold);
  outline-offset: -1px;
}
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper .gform_button,
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper input[type="submit"] {
  width: 100%;
  min-height: 48px;
  background: var(--cire-gold);
  color: #2c3338;
  border: none;
  border-radius: 0;
  font-family: var(--cire-sans);
  font-size: clamp(0.8rem, 2.2vw, 0.85rem);
  letter-spacing: 0.1em;
  padding: 14px 28px;
  cursor: pointer;
}
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper .gform_button:hover,
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper input[type="submit"]:hover {
  background: var(--cire-gold-dark);
}

/* ---- sticky mobile footer ---------------------------------------------
   The theme's JS sets display:flex/none inline on this element at 1024px,
   so its visibility is never touched here — only its skin.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-mobile-footer {
  background: var(--cire-white);
  border-top: 1px solid var(--cire-hairline);
  box-shadow: none;
}
.property-detail-a-2col .property-detail-mobile-footer__action-button {
  min-height: 44px;
  color: var(--cire-charcoal);
  font-size: clamp(0.7rem, 2vw, 0.76rem);
  letter-spacing: 0.06em;
}
.property-detail-a-2col .property-detail-mobile-footer__schedule,
.property-detail-a-2col .button.property-detail-mobile-footer__schedule {
  background: var(--cire-gold);
  border: none;
  border-radius: 0;
  color: #2c3338;
  min-height: 44px;
  font-size: clamp(0.74rem, 2vw, 0.8rem);
  letter-spacing: 0.1em;
}

/* ==========================================================================
   03 TABLET AND UP  (>= 729px, the theme's small/medium boundary)
   ========================================================================== */
@media (min-width: 729px) {
  .property-detail-a-2col .property-detail-header__actions {
    gap: 14px;
  }
  .property-detail-a-2col .property-detail-sidebar__unit-spec {
    flex: 0 1 auto;
    margin-right: 40px;
  }
  .property-detail-a-2col .property-detail-main__accordion-table td {
    padding: 11px 12px 11px 0;
  }
}

/* ==========================================================================
   04 DESKTOP  (>= 1024px — the mockup breakpoint, and the width at which
   this theme's own JS stops showing the sticky mobile footer)

   Only here is the approved left-stacked header anatomy applied. The
   template nests the address and the status line inside
   .property-detail-header__title with .property-detail-price as a sibling;
   display:contents promotes those children to flex items of __content so
   `order` can produce address -> price -> status without moving any PHP.
   It is confined to desktop because .property-detail-header is a js-headroom
   sticky element and a tall stacked header would eat a phone viewport.

   NOTE FOR VERIFICATION: Foundation's "large" breakpoint in this build is
   1366px, not 1024px, so between 1024 and 1365 the masthead is still in its
   mobile configuration while this block applies. That follows the mockup
   spec, but 1024-1365px is the band most worth a look.
   ========================================================================== */
@media (min-width: 1024px) {
  .property-detail-a-2col .property-detail-header__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 0 0;
  }
  .property-detail-a-2col .property-detail-header__title {
    display: contents;
  }
  .property-detail-a-2col .property-detail-header__address {
    order: 1;
    max-width: 20ch;
  }
  .property-detail-a-2col .property-detail-price {
    order: 2;
    display: block;
    margin-top: 10px;
    text-align: left;
  }
  .property-detail-a-2col .property-detail-header__details {
    order: 3;
  }
  .property-detail-a-2col .property-detail-header__actions {
    order: 4;
    margin-top: 24px;
  }
}

/* ==========================================================================
   05 HOMEPAGE  — scoped to the .home body class
   Written against the live rendered DOM of https://cirecaribbean.com/.

   THINGS THE DOM FORCED ME TO GET RIGHT (each broke the earlier draft):

   * Featured listings live in .listing-grid__cards.js-slider-home-featured-below
     which is a SLICK CAROUSEL, and there are three of them (the geo tabs, two
     carrying .hide-mob). Slick owns their track widths and transforms, so this
     file never sets display/grid/width on those containers - only on the card
     internals.
   * Each card's photos are themselves a slick slider
     (.listing-card__slider.js-slider-full-arrows) - likewise untouched.
   * .visual-nav wraps its links in a <ul><li>, so the grid belongs on
     .visual-nav ul, not on .visual-nav. The draft targeted the wrong element.
   * .community-landing__featured-communities carries no js-slider class, so it
     is a genuine grid container and safe to lay out.

   Mobile-first; breakpoints 729/1024 per the mockups. All type is clamp()-based
   with minimums tuned for 375px.
   ========================================================================== */

/* ---- hero -------------------------------------------------------------- */
.home .hp-hero-header__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.home .hp-hero-header__header {
  font-family: var(--cire-serif);
  font-weight: 500;
  /* 375px -> 1.75rem/28px; only reaches 3.4rem on a wide desktop */
  font-size: clamp(1.75rem, 5.6vw, 3.4rem);
  line-height: 1.15;
  color: var(--cire-white);
  letter-spacing: 0.01em;
  text-transform: none;
  text-wrap: balance;
  padding: 0 16px;
}

/* search group: stacked on phones, one white bar from 729px up */
.home .hp-hero-rearch {
  width: min(980px, 92vw);
  margin-top: 22px;
}
.home .hp-hero-rearch .quicksearch {
  display: flex;
  flex-direction: column;
  background: var(--cire-white);
  padding: 0;
}
.home .hp-hero-rearch .quicksearch > * {
  border-bottom: 1px solid var(--cire-hairline);
}
.home .hp-hero-rearch .quicksearch > *:last-child {
  border-bottom: none;
}
.home .hp-hero-rearch .select2-selection {
  border: none !important; /* Select2 sets its own border inline-ish */
  border-radius: 0 !important;
  background: var(--cire-white) !important;
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 16px;
}
.home .hp-hero-rearch .select2-search__field {
  font-family: var(--cire-sans);
  font-size: 1rem; /* >=16px so iOS does not zoom on focus */
  color: var(--cire-charcoal);
}
.home .hp-hero-rearch .property-search-filters-menu-section__header {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 16px;
  color: var(--cire-charcoal);
  text-decoration: none;
  font-size: clamp(0.8rem, 2.2vw, 0.85rem);
  letter-spacing: 0.06em;
}
.home .hp-hero-rearch .property-search-filters-menu-section__title {
  font-weight: 400;
  color: var(--cire-charcoal);
}

/* the one solid-gold control in the hero. The theme ships this blue;
   BRAND.md forbids blue anywhere near the logo. */
.home .hp-hero-rearch .button.button-blue,
.home .hp-hero-rearch button[type="submit"] {
  width: 100%;
  min-height: 52px;
  background: var(--cire-gold);
  border: none;
  border-radius: 0;
  color: #2c3338;
  font-family: var(--cire-sans);
  font-size: clamp(0.8rem, 2.2vw, 0.85rem);
  letter-spacing: 0.1em;
  padding: 14px 30px;
  margin: 0;
  cursor: pointer;
}
.home .hp-hero-rearch .button.button-blue:hover,
.home .hp-hero-rearch button[type="submit"]:hover {
  background: var(--cire-gold-dark);
  color: #2c3338;
}

/* secondary link — outline, never Christie's red */
.home .hp-hero-rearch .button.button-white,
.home .mob-more-btn .button,
.home .mob-more-btn .button--red-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  color: var(--cire-charcoal);
  font-size: clamp(0.72rem, 2vw, 0.78rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 24px;
  text-decoration: none;
}
.home .hp-hero-rearch .button.button-white {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--cire-white);
  margin-top: 16px;
}
.home .hp-hero-rearch .button.button-white:hover,
.home .mob-more-btn .button:hover,
.home .mob-more-btn .button--red-outline:hover {
  border-color: var(--cire-gold);
  color: var(--cire-gold);
  background: transparent;
}
.home .mob-more-btn {
  text-align: center;
  padding: 18px 0;
}

/* ---- section headings -------------------------------------------------- */
.home .page-section-header__title {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  color: var(--cire-black);
  text-transform: none;
  text-wrap: balance;
}
.home .page-section-header__select,
.home .js-page-section-header__select {
  font-family: var(--cire-serif);
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  color: var(--cire-black);
  border: none;
  border-bottom: 1px solid var(--cire-gold);
  border-radius: 0;
  background: transparent;
  padding: 0 24px 2px 0;
}
.home .community__header {
  text-align: center;
  padding: 48px 0 20px;
}
.home .community__header-subtitle {
  font-family: var(--cire-sans);
  font-size: clamp(0.76rem, 2.1vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-black);
}
.home .community__header-title {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  color: var(--cire-black);
  margin-top: 6px;
  text-wrap: balance;
}

/* ---- listing cards -----------------------------------------------------
   Internals only. The carousel that holds them is slick's business.
   ---------------------------------------------------------------------- */
.home .listing-card {
  background: var(--cire-white);
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--cire-charcoal);
}
.home .listing-card__content {
  padding: 14px 2px 18px;
  border-bottom: 1px solid var(--cire-hairline);
  background: var(--cire-white);
}
.home .listing-card__price,
.home .fuelidx_propsum_price {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  color: var(--cire-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}
.home .listing-card:hover .listing-card__price,
.home .listing-card:hover .fuelidx_propsum_price {
  color: var(--cire-gold);
}
.home .listing-card__address,
.home .fuelidx_propsum_address {
  margin-top: 3px;
  font-family: var(--cire-sans);
  font-size: clamp(0.85rem, 2.3vw, 0.93rem);
  color: var(--cire-charcoal);
  text-transform: none;
  letter-spacing: 0.01em;
}
.home .listing-card__specs,
.home .listing-card__meta {
  font-size: clamp(0.7rem, 2vw, 0.76rem);
  color: var(--cire-gray-med);
  letter-spacing: 0.05em;
}
.home .listing-card__spec-figure {
  color: var(--cire-charcoal);
  font-variant-numeric: tabular-nums;
}
.home .listing-card__meta-tag {
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-size: clamp(0.56rem, 1.7vw, 0.6rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: none;
  border-radius: 0;
}

/* ---- islands grid ------------------------------------------------------ */
.home .community-landing__featured-communities {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 8px 0 10px;
}
/* neutralise Foundation column widths/floats for the direct children only */
.home .community-landing__featured-communities > * {
  width: auto;
  max-width: none;
  min-width: 0;
  float: none;
  margin-left: 0;
  margin-right: 0;
}
.home .community-card--landing {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border: none;
  border-radius: 0;
  overflow: hidden;
}
.home .community-card__content {
  position: relative;
  width: 100%;
  padding: 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
}
.home .community-card__name {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 3.2vw, 1.35rem);
  color: var(--cire-white);
  margin: 0;
}
.home .community-card__location {
  font-size: clamp(0.6rem, 1.8vw, 0.64rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #d9cfae;
}
.home .community-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.home .community-card__actions .button,
.home .community-card__actions .button--white-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 0;
  color: var(--cire-white);
  font-size: clamp(0.66rem, 1.9vw, 0.72rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 16px;
  text-decoration: none;
}
.home .community-card__actions .button:hover,
.home .community-card__actions .button--white-outline:hover {
  border-color: var(--cire-gold) !important;
  color: var(--cire-gold);
  background: transparent;
}

/* ---- sell band / text blocks ------------------------------------------- */
.home .text-block {
  padding: 48px 0;
}
.home .text-block-content {
  max-width: 60ch;
}
.home .text-block-content h2 {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 4.2vw, 2.1rem);
  color: var(--cire-black);
  text-wrap: balance;
  margin-bottom: 12px;
}
.home .text-block-content p {
  font-size: clamp(0.95rem, 2.4vw, 1rem);
  line-height: 1.75;
  color: var(--cire-charcoal);
}
.home .text-block-content p + p {
  margin-top: 1em;
}
.home .text-block-img img {
  width: 100%;
  height: auto;
  display: block;
}
.home .text-block .button,
.home .banner-btn .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--cire-gold);
  border: none;
  border-radius: 0;
  color: #2c3338;
  font-size: clamp(0.78rem, 2.1vw, 0.85rem);
  letter-spacing: 0.1em;
  padding: 14px 30px;
  margin-top: 20px;
  text-decoration: none;
}
.home .text-block .button:hover,
.home .banner-btn .button:hover {
  background: var(--cire-gold-dark);
  color: #2c3338;
}

/* ---- visual nav (List with Us / Contact tiles) -------------------------
   Grid goes on the <ul>: .visual-nav > ul > li > a > img + strong.title
   ---------------------------------------------------------------------- */
.home .visual-nav ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home .visual-nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.home .visual-nav a {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  text-decoration: none;
  background: linear-gradient(170deg, #46525a, #2c363d);
}
.home .visual-nav a img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home .visual-nav a .title {
  position: relative;
  width: 100%;
  padding: 16px;
  color: var(--cire-white);
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}
.home .visual-nav a:hover .title {
  color: var(--cire-gold);
}

/* ==========================================================================
   06 HOMEPAGE — 729px and up
   ========================================================================== */
@media (min-width: 729px) {
  .home .hp-hero-rearch {
    margin-top: 30px;
  }
  .home .hp-hero-rearch .quicksearch {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .home .hp-hero-rearch .quicksearch > * {
    border-bottom: none;
    border-right: 1px solid var(--cire-hairline);
  }
  .home .hp-hero-rearch .quicksearch > *:last-child {
    border-right: none;
  }
  .home .hp-hero-rearch .property-search-filters-menu-section__search {
    flex: 1 1 240px;
    min-width: 0;
  }
  .home .hp-hero-rearch .button.button-blue,
  .home .hp-hero-rearch button[type="submit"] {
    width: auto;
    padding: 14px 34px;
  }
  .home .community-landing__featured-communities {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .home .visual-nav ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .home .community__header {
    padding: 64px 0 24px;
  }
  .home .text-block {
    padding: 64px 0;
  }
}

/* ==========================================================================
   07 HOMEPAGE — 1024px and up
   ========================================================================== */
@media (min-width: 1024px) {
  .home .community-landing__featured-communities {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .home .visual-nav ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .home .community__header {
    padding: 74px 0 26px;
  }
  .home .text-block {
    padding: 74px 0;
  }
}

/* ==========================================================================
   08 SEARCH RESULTS  — scoped to the search-results page template body class
   This template powers the ~20 island pages, so it is the highest-traffic
   layout in the redesign.

   WHAT THE RENDERED DOM CORRECTED (all three broke the rejected draft):

   * The result cards DO NOT EXIST in the initial HTML. The page ships an
     empty gallery behind #mrt-loading-cover ("Searching...") and the cards
     are injected by AJAX as .property-search-gallery-card wrappers around
     components/listings/gallery-card.php. Nothing here may depend on
     first-paint state.
   * .property-search-gallery is NOT a card container. Its direct children
     are the top pager (.property-search-gallery-filters), the cards, and the
     footer pager. The draft put display:grid on it with three equal columns,
     which would have laid the PAGERS out as grid cells beside the cards.
     Handled here by making every direct child span the full row by default
     and letting only .property-search-gallery-card occupy a column.
   * .property-search-filters-menu is an off-canvas FILTER DRAWER opened by
     .js-property-search-filters-menu-toggle, with its own mobile header,
     accordion sections and apply/reset buttons - not the mockup's horizontal
     filter bar. It is restyled as a drawer; its open/close JS is untouched.

   Each card's photo strip (.listing-card__slider.js-slider-full-arrows) is a
   slick slider and is never laid out here.

   Mobile-first; breakpoints 729/1024; clamp() type with 375px minimums.
   ========================================================================== */

/* ---- page head --------------------------------------------------------- */
.page-template-template-property-search-results .page-section-header__title {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 4.4vw, 2.4rem);
  color: var(--cire-black);
  text-transform: none;
  text-wrap: balance;
}
.page-template-template-property-search-results .page-section-header__subtitle {
  font-family: var(--cire-sans);
  font-size: clamp(0.7rem, 2vw, 0.78rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
}
.page-template-template-property-search-results .page-section-header__description {
  max-width: 70ch;
  font-size: clamp(0.9rem, 2.3vw, 0.95rem);
  color: var(--cire-gray-med);
}

/* ---- results count + sort row ------------------------------------------ */
.page-template-template-property-search-results .search-result-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--cire-hairline);
  border-bottom: 1px solid var(--cire-hairline);
}
.page-template-template-property-search-results .search-result-option-results {
  font-size: clamp(0.7rem, 2vw, 0.78rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
}
.page-template-template-property-search-results .search-result-option__header {
  font-size: clamp(0.7rem, 2vw, 0.76rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
  margin-right: 8px;
}
.page-template-template-property-search-results .mrt-prop-sort,
.page-template-template-property-search-results .search-result-option-sort select {
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-family: var(--cire-sans);
  font-size: 1rem; /* >=16px: no iOS zoom on focus */
  letter-spacing: 0.04em;
  min-height: 44px;
  padding: 10px 14px;
  box-shadow: none;
}
.page-template-template-property-search-results .mrt-prop-sort:hover,
.page-template-template-property-search-results .search-result-option-sort select:hover {
  border-color: var(--cire-gold);
}

/* ---- results grid ------------------------------------------------------
   Default: every direct child spans the full row (pagers, no-results, any
   future sibling). Only the injected cards take a column.
   ---------------------------------------------------------------------- */
.page-template-template-property-search-results .property-search-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 20px 0 8px;
}
.page-template-template-property-search-results .property-search-gallery > * {
  grid-column: 1 / -1;
  min-width: 0;
}
.page-template-template-property-search-results
  .property-search-gallery
  > .property-search-gallery-card {
  grid-column: auto;
  width: auto;
  max-width: none;
  float: none;
  margin: 0;
}

/* ---- result card ------------------------------------------------------- */
.page-template-template-property-search-results .listing-card,
.page-template-template-property-search-results .listing-card--gallery {
  background: var(--cire-white);
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--cire-charcoal);
  height: 100%;
}
.page-template-template-property-search-results .listing-card__content {
  padding: 14px 2px 18px;
  border-bottom: 1px solid var(--cire-hairline);
  background: var(--cire-white);
}
.page-template-template-property-search-results .listing-card__price,
.page-template-template-property-search-results .fuelidx_propsum_price {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 3vw, 1.25rem);
  color: var(--cire-black);
  font-variant-numeric: tabular-nums;
  transition: color 0.15s;
}
.page-template-template-property-search-results
  .listing-card:hover
  .listing-card__price {
  color: var(--cire-gold);
}
.page-template-template-property-search-results .listing-card__address,
.page-template-template-property-search-results .fuelidx_propsum_address {
  margin-top: 3px;
  font-family: var(--cire-sans);
  font-size: clamp(0.85rem, 2.3vw, 0.93rem);
  color: var(--cire-charcoal);
  text-transform: none;
}
.page-template-template-property-search-results .listing-card__spec,
.page-template-template-property-search-results .listing-card__meta,
.page-template-template-property-search-results .listing-card__additional-content {
  font-size: clamp(0.7rem, 2vw, 0.76rem);
  color: var(--cire-gray-med);
  letter-spacing: 0.05em;
}
.page-template-template-property-search-results .listing-card__additional-content-value {
  color: var(--cire-charcoal);
  font-variant-numeric: tabular-nums;
}
/* price decrease: quiet, never Christie's red */
.page-template-template-property-search-results .listing-card__price-decrease {
  font-size: clamp(0.66rem, 1.9vw, 0.72rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
}
/* status flag: white chip, gold stays an accent */
.page-template-template-property-search-results .listing-card__meta-tag {
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-size: clamp(0.56rem, 1.7vw, 0.6rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: none;
  border-radius: 0;
}
/* save heart: circular, 44px touch target */
.page-template-template-property-search-results .listing-card__actions.save-property a,
.page-template-template-property-search-results .listing-card__actions .save-listing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cire-white);
  color: var(--cire-charcoal);
}
.page-template-template-property-search-results .listing-card__actions .save-listing:hover {
  color: var(--cire-gold);
}

/* exclusive / presented-by card variant */
.page-template-template-property-search-results .list-card-exclusive {
  background: var(--cire-panel);
  border: none;
  border-radius: 0;
}
.page-template-template-property-search-results .list-card-exclusive__title {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1rem, 2.8vw, 1.15rem);
  color: var(--cire-black);
}
.page-template-template-property-search-results .list-card-exclusive__pressented,
.page-template-template-property-search-results .list-card-exclusive-agent__name {
  font-size: clamp(0.66rem, 1.9vw, 0.72rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
}

/* ---- no results -------------------------------------------------------- */
.page-template-template-property-search-results .property-search-no-results {
  padding: 40px 0;
  text-align: center;
}
.page-template-template-property-search-results .property-search-no-results h4 {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 3.6vw, 1.7rem);
  color: var(--cire-black);
}

/* ---- filter drawer -----------------------------------------------------
   Off-canvas panel. Only the skin changes; the toggle/open/close JS and the
   accordion sections keep their own behaviour.
   ---------------------------------------------------------------------- */
.page-template-template-property-search-results .property-search-filters-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-family: var(--cire-sans);
  font-size: clamp(0.76rem, 2.1vw, 0.82rem);
  letter-spacing: 0.1em;
  padding: 11px 20px;
  cursor: pointer;
}
.page-template-template-property-search-results .property-search-filters-menu-toggle:hover {
  border-color: var(--cire-gold);
}
.page-template-template-property-search-results .property-search-filters-menu {
  background: var(--cire-white);
  border-right: 1px solid var(--cire-hairline);
}
.page-template-template-property-search-results .property-search-filters-menu-mobile-header {
  border-bottom: 1px solid var(--cire-hairline);
  padding: 14px 16px;
}
.page-template-template-property-search-results .property-search-filters-menu-mobile-header__title {
  font-family: var(--cire-sans);
  font-size: clamp(0.78rem, 2.2vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-black);
}
.page-template-template-property-search-results .property-search-filters-menu-section {
  border-bottom: 1px solid var(--cire-hairline);
}
.page-template-template-property-search-results .property-search-filters-menu-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 10px 16px;
  color: var(--cire-charcoal);
  text-decoration: none;
}
.page-template-template-property-search-results .property-search-filters-menu-section__title {
  font-family: var(--cire-sans);
  font-size: clamp(0.76rem, 2.1vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cire-black);
}
.page-template-template-property-search-results .property-search-filters-menu-section__current-selection {
  font-size: clamp(0.72rem, 2vw, 0.78rem);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--cire-gray-med);
}
/* apply = the one gold control in the drawer; reset stays a quiet link */
.page-template-template-property-search-results .property-search-filters-menu-submit__apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--cire-gold);
  border: none;
  border-radius: 0;
  color: #2c3338;
  font-family: var(--cire-sans);
  font-size: clamp(0.76rem, 2.1vw, 0.82rem);
  letter-spacing: 0.1em;
  padding: 12px 24px;
  cursor: pointer;
}
.page-template-template-property-search-results .property-search-filters-menu-submit__apply:hover {
  background: var(--cire-gold-dark);
  color: #2c3338;
}
.page-template-template-property-search-results .property-search-filters-menu-submit__reset {
  background: none;
  border: none;
  color: var(--cire-charcoal);
  font-size: clamp(0.72rem, 2vw, 0.78rem);
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
  cursor: pointer;
}
.page-template-template-property-search-results .property-search-filters-menu-submit__reset:hover {
  color: var(--cire-gold);
}
/* filter inputs sized so iOS does not zoom */
.page-template-template-property-search-results .property-search-filters-menu input[type="text"],
.page-template-template-property-search-results .property-search-filters-menu select {
  font-size: 1rem;
  border-radius: 0;
}

/* ---- pagination -------------------------------------------------------- */
.page-template-template-property-search-results .search-result-option-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 26px 0;
}
.page-template-template-property-search-results .search-result-option-pagination a,
.page-template-template-property-search-results .search-result-option-pagination span {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.78rem, 2.1vw, 0.85rem);
  color: var(--cire-charcoal);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.page-template-template-property-search-results .search-result-option-pagination a:hover {
  border-color: var(--cire-gold);
}
.page-template-template-property-search-results .search-result-option-pagination .current,
.page-template-template-property-search-results .search-result-option-pagination .active {
  border-color: var(--cire-black);
  color: var(--cire-black);
}

/* ==========================================================================
   09 SEARCH — 729px and up
   ========================================================================== */
@media (min-width: 729px) {
  .page-template-template-property-search-results .property-search-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .page-template-template-property-search-results .search-result-options {
    gap: 16px;
  }
}

/* ==========================================================================
   10 SEARCH — 1024px and up
   ========================================================================== */
@media (min-width: 1024px) {
  .page-template-template-property-search-results .property-search-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding: 30px 0 8px;
  }
}

/* ==========================================================================
   11 PROPERTY DETAIL — GALLERY HERO + THUMBNAIL GRID
   The approved anatomy, built around the existing slick slider rather than
   replacing it.

   Structure produced by the template patch:
     .cire-gallery                       (grid wrapper)
       .property-detail-slider__container  (the untouched slick hero)
       .cire-gallery__thumbs               (new thumbnail rail)
         a.cire-gallery__thumb  x N
         button.cire-gallery__all

   MOBILE FIRST. On phones the thumbnails would only steal height from the
   hero, so the rail becomes a single horizontally-scrollable strip beneath
   it. The mockup's 2-column thumb grid beside the hero appears at 1024px,
   which is also where the theme stops showing its sticky mobile footer.

   Slick caches slide widths at init, and the hero now lives in a grid cell,
   so js/cire-gallery.js calls slick's public setPosition after layout and on
   resize. Nothing here sets width/display on .property-detail-slider itself.
   ========================================================================== */

/* ---- mobile: hero, then a scrollable thumb strip ----------------------- */
.property-detail-a-2col .cire-gallery {
  display: block;
  position: relative;
}
.property-detail-a-2col .cire-gallery__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-bottom: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.property-detail-a-2col .cire-gallery__thumb {
  flex: 0 0 34vw;
  height: 22vw;
  min-height: 74px;
  display: block;
  background-color: #384249;
  background-size: cover;
  background-position: center;
  border: none;
  outline-offset: -2px;
  text-decoration: none;
  cursor: pointer;
}
.property-detail-a-2col .cire-gallery__thumb.is-active {
  outline: 2px solid var(--cire-gold);
}
.property-detail-a-2col .cire-gallery__thumb:focus-visible {
  outline: 2px solid var(--cire-gold);
}
.property-detail-a-2col .cire-gallery__all {
  flex: 0 0 auto;
  min-height: 44px;
  align-self: stretch;
  padding: 10px 18px;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-family: var(--cire-sans);
  font-size: clamp(0.72rem, 2vw, 0.78rem);
  letter-spacing: 0.1em;
  white-space: nowrap;
  cursor: pointer;
}
.property-detail-a-2col .cire-gallery__all:hover {
  border-color: var(--cire-gold);
}
.property-detail-a-2col .cire-gallery__all:focus-visible {
  outline: 2px solid var(--cire-gold);
  outline-offset: 2px;
}

/* ---- 729px: slightly larger thumbs, still a strip ---------------------- */
@media (min-width: 729px) {
  .property-detail-a-2col .cire-gallery__thumb {
    flex: 0 0 20vw;
    height: 13vw;
  }
}

/* ---- 1024px: the approved hero + 2-column thumb grid ------------------- */
@media (min-width: 1024px) {
  .property-detail-a-2col .cire-gallery {
    display: grid;
    grid-template-columns: 2.15fr 1fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 10px;
    height: min(58vh, 540px);
  }
  /* the slick hero occupies the tall left cell */
  .property-detail-a-2col .cire-gallery > .property-detail-slider__container {
    grid-row: 1 / 4;
    grid-column: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }
  /* the rail becomes the 2x3 grid of thumbs in the right-hand columns */
  .property-detail-a-2col .cire-gallery__thumbs {
    display: grid;
    grid-column: 2 / 4;
    grid-row: 1 / 4;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
    padding-bottom: 0;
    overflow: visible;
    min-width: 0;
    min-height: 0;
  }
  .property-detail-a-2col .cire-gallery__thumb {
    flex: none;
    width: auto;
    height: auto;
    min-height: 0;
  }
  /* the "view all" control sits over the last thumb rather than taking a cell */
  .property-detail-a-2col .cire-gallery__all {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 4;
    align-self: auto;
    background: var(--cire-white);
    border: none;
    border-radius: 999px;
    padding: 9px 18px;
  }
  /* the slick track must fill the hero cell */
  .property-detail-a-2col .cire-gallery .property-detail-slider,
  .property-detail-a-2col .cire-gallery .property-detail-slider .slick-list,
  .property-detail-a-2col .cire-gallery .property-detail-slider .slick-track {
    height: 100%;
  }
  .property-detail-a-2col .cire-gallery .property-detail-slide,
  .property-detail-a-2col .cire-gallery .property-detail-slider__image {
    height: 100%;
  }
}

/* ==========================================================================
   12 STICKY HEADER + ACTION BUTTONS  (review redline)
   Studied against the live DOM of
   /for-sale/homes/bb-st.-james-holetown-31250-303/

   WHY THE BUTTONS LOOKED MISMATCHED — the theme builds the three controls
   inconsistently:
     Save   <a><span class="icon icon--heart-outline"></span>
                <span class="text">Save</span></a>
     Share  <a><div  class="icon icon--share"></div>  Share</a>   <- bare text
     Tools  <a><span class="icon icon--ellipsis"></span> Tools</a> <- bare text
   One icon is a <div> (block) and two are <span> (inline), and two labels are
   bare text nodes with no element to hook. That mix is what made them sit at
   different heights and optical sizes. This section normalises every .icon to
   one inline-flex box at one size, and uses font-size:0 on the button with the
   size restored on the .icon - the only way to suppress a bare text node in
   CSS.

   Save and Share become the mockup's circular icon buttons. Tools stays a
   hairline ghost pill (it opens a dropdown, so it needs its label). Request
   Info is the single solid-gold CTA.

   Sticky bar: solid white ground, one crisp hairline bottom rule, no shadow,
   generous vertical rhythm, and a compact single-line variant on phones so it
   cannot eat the viewport.
   ========================================================================== */

/* ---- the sticky bar itself --------------------------------------------- */
.property-detail-a-2col .property-detail-header {
  background: var(--cire-white); /* solid: never translucent */
  border-bottom: 1px solid var(--cire-hairline);
  box-shadow: none;
}
.property-detail-a-2col .property-detail-header.headroom--not-top,
.property-detail-a-2col .property-detail-header.headroom--pinned {
  background: var(--cire-white);
  /* at most an extremely subtle lift once it detaches from the top */
  box-shadow: 0 1px 0 rgba(56, 66, 73, 0.06);
}

/* ---- icon normalisation (the root of the mismatch) --------------------- */
.property-detail-a-2col .property-detail-header__action-button .icon,
.property-detail-a-2col .property-detail-mobile-footer__action-button .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
  color: inherit;
}

/* ---- Save + Share: circular icon buttons ------------------------------- */
.property-detail-a-2col .property-detail-header__action-button--save,
.property-detail-a-2col .property-detail-header__action-button.a2a_dd,
.property-detail-a-2col .property-detail-mobile-footer__action-button--save,
.property-detail-a-2col .property-detail-mobile-footer__action-button.a2a_dd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  gap: 0;
  border: 1px solid var(--cire-gray-light);
  border-radius: 50%;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  /* suppresses the label, including Share's bare text node.
     The text stays in the DOM for assistive tech. */
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.property-detail-a-2col .property-detail-header__action-button--save .icon,
.property-detail-a-2col .property-detail-header__action-button.a2a_dd .icon,
.property-detail-a-2col .property-detail-mobile-footer__action-button--save .icon,
.property-detail-a-2col .property-detail-mobile-footer__action-button.a2a_dd .icon {
  font-size: 1.05rem;
  line-height: 1;
}
.property-detail-a-2col .property-detail-header__action-button--save:hover,
.property-detail-a-2col .property-detail-header__action-button.a2a_dd:hover {
  border-color: var(--cire-gold);
  color: var(--cire-charcoal);
  background: var(--cire-white);
}
.property-detail-a-2col .property-detail-header__action-button--save:focus-visible,
.property-detail-a-2col .property-detail-header__action-button.a2a_dd:focus-visible {
  outline: 2px solid var(--cire-gold);
  outline-offset: 2px;
}
/* saved state reads in gold rather than the theme's red */
.property-detail-a-2col .save-listing.is-saved,
.property-detail-a-2col .save-listing.saved {
  border-color: var(--cire-gold);
  color: var(--cire-gold);
}

/* ---- Tools: hairline ghost pill, keeps its label ----------------------- */
.property-detail-a-2col .property-detail-header__action-button--tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-size: clamp(0.76rem, 2.1vw, 0.82rem);
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
}
.property-detail-a-2col .property-detail-header__action-button--tools:hover {
  border-color: var(--cire-gold);
}

/* ---- Request Info: the one solid-gold CTA ------------------------------ */
.property-detail-a-2col .property-detail-header__schedule,
.property-detail-a-2col a.button.property-detail-header__schedule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  min-height: 46px;
  padding: 0 28px;
  background: var(--cire-gold);
  border: none;
  border-radius: 0;
  color: #2c3338;
  font-size: clamp(0.76rem, 2.1vw, 0.82rem);
  letter-spacing: 0.1em;
  line-height: 1;
}

/* ---- spacing: keep the controls off the address block ------------------ */
.property-detail-a-2col .property-detail-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}

/* ---- phones: compact single-line bar ----------------------------------- */
@media (max-width: 728px) {
  .property-detail-a-2col .property-detail-header__content {
    padding: 14px 0 12px;
  }
  .property-detail-a-2col .property-detail-header__address {
    font-size: clamp(1.15rem, 4.6vw, 1.45rem);
    line-height: 1.25;
  }
  .property-detail-a-2col .property-detail-header__actions {
    margin-top: 14px;
    gap: 10px;
  }
  .property-detail-a-2col .property-detail-header__action-button--save,
  .property-detail-a-2col .property-detail-header__action-button.a2a_dd {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .property-detail-a-2col .property-detail-header__action-button--tools,
  .property-detail-a-2col .property-detail-header__schedule,
  .property-detail-a-2col a.button.property-detail-header__schedule {
    height: 44px;
    min-height: 44px;
    padding: 0 16px;
  }
}

/* ==========================================================================
   13 STICKY HEADER — desktop layout (>= 1024px)
   Replaces the fully stacked arrangement from section 04 with the reviewed
   one: address and status on the left, price right-aligned in the serif,
   controls on their own row beneath. display:contents is deliberately NOT
   used here - the address and status must stay grouped as one left-hand
   block for the two-column balance to work.
   ========================================================================== */
@media (min-width: 1024px) {
  .property-detail-a-2col .property-detail-header__content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 40px;
    row-gap: 0;
    padding: 30px 0 26px;
  }
  /* undo section 04's promotion so the left block stays a group */
  .property-detail-a-2col .property-detail-header__title {
    display: block;
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }
  .property-detail-a-2col .property-detail-header__address {
    /* controlled size: authoritative without crowding the price */
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    max-width: 26ch;
  }
  .property-detail-a-2col .property-detail-header__details {
    order: 2;
    margin-top: 8px;
  }
  .property-detail-a-2col .property-detail-price {
    order: 3;
    flex: 0 0 auto;
    display: block;
    margin-top: 4px;
    text-align: right;
  }
  .property-detail-a-2col .property-detail-price__price,
  .property-detail-a-2col .property-detail-price__price.fuelidx_price {
    font-family: var(--cire-serif);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    color: var(--cire-black);
    line-height: 1.2;
  }
  .property-detail-a-2col .property-detail-price__change {
    text-align: right;
  }
  /* controls take their own full-width row under both columns */
  .property-detail-a-2col .property-detail-header__actions {
    order: 4;
    flex: 0 0 100%;
    margin-top: 26px;
  }
}

/* ==========================================================================
   14 LEGACY CARD CHROME REMOVAL  (review redline)
   The "black line/border" on result photos is legacy chrome in app.css that
   my earlier layers did not fully override:

     .listing-card            { border: 1px solid #000; color: #fff }
     .listing-card:focus      { border-color: #000000 }
     .listing-card--exclusive { border-color: #000000; background: #f7f6f4 }
     .listing-card__image::before {
         content:""; position:absolute; inset:0; z-index:3;
         background-image: linear-gradient(to top, rgba(0,0,0,.7), transparent 65%) }

   So every card carried a literal 1px black frame, a beige ground, white body
   text, and a heavy black gradient scrim washed across the bottom of the
   photograph. The scrim existed because the legacy card printed white text
   OVER the image; in the approved design the text sits BELOW the photo on
   white, so the scrim earns nothing and is the single most dated element on
   the card.

   The same card partial renders on the homepage carousels, so this is applied
   in both scopes rather than only on search.

   Specificity note: each override is two classes deep (0,2,0) against
   app.css's single class (0,1,0), so these win on cascade order AND weight -
   no !important needed, and the AJAX-injected markup carries the same classes
   so injection timing is irrelevant.

   Photo flush, no frame; the only rule on the card is the hairline under the
   body, per the mockup.
   ========================================================================== */

/* ---- kill the frame, the beige ground and the inherited white text ------ */
.home .listing-card,
.home .listing-card--gallery,
.home .listing-card--exclusive,
.page-template-template-property-search-results .listing-card,
.page-template-template-property-search-results .listing-card--gallery,
.page-template-template-property-search-results .listing-card--exclusive {
  border: none;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  box-shadow: none;
  transition: none;
}
.home .listing-card:focus,
.home .listing-card:hover,
.page-template-template-property-search-results .listing-card:focus,
.page-template-template-property-search-results .listing-card:hover {
  border: none;
  border-color: transparent;
}

/* ---- remove the black gradient scrim from the photograph --------------- */
.home .listing-card__image::before,
.page-template-template-property-search-results .listing-card__image::before {
  display: none;
  content: none;
  background-image: none;
}

/* ---- photo sits flush -------------------------------------------------- */
.home .listing-card__image,
.page-template-template-property-search-results .listing-card__image {
  border: none;
  border-radius: 0;
  outline: none;
}
.home .listing-card__slider,
.page-template-template-property-search-results .listing-card__slider {
  border: none;
  border-radius: 0;
}

/* ---- the card's only rule: a hairline beneath the body ----------------- */
.home .listing-card__content,
.page-template-template-property-search-results .listing-card__content {
  background: var(--cire-white);
  border: none;
  border-bottom: 1px solid var(--cire-hairline);
}

/* ---- legacy hover "extension" panel: no dark frame, no lift ------------ */
.home .listing-card__extension,
.page-template-template-property-search-results .listing-card__extension {
  border-color: var(--cire-hairline);
  box-shadow: none;
}
.home .listing-card--gallery.listing-card--exclusive:hover .listing-card__extension,
.page-template-template-property-search-results
  .listing-card--gallery.listing-card--exclusive:hover
  .listing-card__extension {
  box-shadow: none;
}

/* ---- save control over the photo now needs its own ground -------------- */
.home .listing-card__actions.save-property,
.page-template-template-property-search-results .listing-card__actions.save-property {
  z-index: 4;
}

/* ==========================================================================
   15 DESKTOP REVIEW NITS  (Barbados "Derricks" screenshot)
   ========================================================================== */

/* ---- NIT 2: doubled separator dots -------------------------------------
   This one was mine. app.css already draws a separator after every item:

     .property-detail-header__detail:after            { content:"•"; margin:0 .3125rem }
     .property-detail-header__detail:last-of-type:after { content:"" }

   Section 02 of this file then added a SECOND separator as a ::before on
   adjacent siblings, producing "ST. JAMES, BB · · SINGLE FAMILY ...".
   The fix is to retire my separator and restyle the theme's existing one,
   rather than hide a glyph and leave two mechanisms fighting.
   ---------------------------------------------------------------------- */
.property-detail-a-2col
  .property-detail-header__detail
  + .property-detail-header__detail::before {
  content: none;
  margin: 0;
}

/* the theme's own separator, restyled to the brand hairline tone */
.property-detail-a-2col .property-detail-header__detail::after {
  color: var(--cire-gray-light);
  margin: 0 0.6em;
  display: inline-block;
}
.property-detail-a-2col .property-detail-header__detail:last-of-type::after {
  content: "";
  margin: 0;
}
/* Guard against an empty field rendering a stray separator: an item with no
   text should not contribute a dot. :empty only matches elements with no
   child nodes at all, which is exactly the "field returned nothing" case. */
.property-detail-a-2col .property-detail-header__detail:empty {
  display: none;
}
.property-detail-a-2col .property-detail-header__detail:empty::after {
  content: "";
  margin: 0;
}

/* ---- NIT 1: price rendered twice ---------------------------------------
   The header price is canonical. The sidebar repeats it under the map.
   Hidden rather than removed from markup: .property-detail-sidebar carries
   js-headroom and the sticky logic measures this subtree, so a CSS hide is
   the lower-risk change. The mobile-highlights price is a DIFFERENT element
   and is deliberately untouched, so phones keep their in-flow price.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-sidebar__info .property-detail-price {
  display: none;
}

/* ---- NIT 3: sidebar section order --------------------------------------
   Markup order is __map -> __info (price + unit-specs) -> __form.
   Reviewed order is facts first, then the mini map.

   Done with flex order rather than a markup move: the map is initialised by
   initPropSidebarMap() against the #map_sidebar id and Leaflet caches its
   container geometry, so relocating the node is the riskier option. Reordering
   paints it elsewhere without touching the element the JS holds.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-sidebar {
  display: flex;
  flex-direction: column;
}
/* facts first, then the agent, then the mini map, then the inquiry form */
.property-detail-a-2col .property-detail-sidebar__info {
  order: 1;
}
.property-detail-a-2col .property-detail-sidebar__agent {
  order: 2;
}
.property-detail-a-2col .property-detail-sidebar__map {
  order: 3;
  margin-top: 22px;
}
.property-detail-a-2col .property-detail-sidebar__form {
  order: 4;
}

/* facts in the sidebar read as the hairline row, not a price block */
.property-detail-a-2col .property-detail-sidebar__info .property-detail-sidebar__unit-specs {
  margin-top: 0;
}

/* ==========================================================================
   16 MID-SCROLL CAPTURE BUGS  (post-2.0c4 review)
   All three are legacy app.css chrome that my layer had not overridden.
   ========================================================================== */

/* ---- BUG 1: stray bullets beside the highlight chips -------------------
   app.css draws them as absolutely-positioned pseudo-element content, which
   list-style:none cannot touch:

     .property-detail-highlights__list-item {
         position:relative; font-weight:700; margin-bottom:.5rem;
         padding-left:.9375rem }
     .property-detail-highlights__list-item:before {
         content:"• "; position:absolute; top:-.0625rem; left:0 }

   The bullet sat at left:0 while my chip padding started further in, so it
   rendered outside the box. Killed at the source.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-highlights__list-item::before {
  content: none;
  display: none;
}
.property-detail-a-2col .property-detail-highlights__list-item {
  position: static;
  padding-left: 14px;
  margin-bottom: 0;
  font-weight: 400;
  list-style: none;
}
.property-detail-a-2col .property-detail-highlights__list-item::marker {
  content: "";
}

/* ---- BUG 2: the mostly-empty gray band ---------------------------------
   Two causes stacked. The band carried a heavy beige ground and 35px/30px
   padding:

     .property-detail-highlights { padding:2.1875rem 1.875rem; background:#f7f6f4 }

   and the list was still a multi-column layout:

     .property-detail-highlights__list { column-count:2 }
     .property-detail-highlights__list { column-count:3 }

   column-count reserves all three columns whether or not there is content,
   so two chips left two empty columns of dead space. Dropping the columns
   lets the chips flow inline, and the band loses its ground so it reads as
   part of the white page rather than a filled panel.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-highlights {
  background: transparent;
  color: var(--cire-charcoal);
  padding: 0;
  margin-bottom: 8px;
}
.property-detail-a-2col .property-detail-highlights__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  /* kill the reserved empty columns */
  column-count: auto;
  columns: auto;
  -webkit-columns: auto;
  -moz-columns: auto;
}
/* the section header sits tight above the chips, not floating in a void */
.property-detail-a-2col .property-detail-highlights .property-detail-main__content-header {
  margin: 0 0 12px;
}

/* ---- BUG 3: harsh black header bar on the inquiry form -----------------
   Three separate pieces of legacy chrome:

     .property-detail-sidebar__form:after {
         content:""; position:absolute; top:0; width:100%; height:25px;
         background:#000000 }                         <- the black bar
     .property-detail-sidebar__close-button {
         position:absolute; bottom:0; height:1.25rem; background:#000000 }
     .property-detail-sidebar__form.is-open {
         border:1px solid #ececec;
         background:#ececec linear-gradient(#dadada,#ececec) }

   plus a .property-detail-sidebar__close anchor (white X, left:50%) sitting
   on that black bar, and an empty <div class="after-bar"> in the markup.

   The X is a real collapse toggle: the form is height:0 by default and only
   .is-open gives it height. Collapsing it would leave a visitor with no way
   to reopen the inquiry form, so the control is hidden rather than restyled
   - the form stays permanently open, which is what the approved design wants.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-sidebar__form::after,
.property-detail-a-2col .property-detail-sidebar__form.is-open::after {
  content: none;
  display: none;
  background: transparent;
}
.property-detail-a-2col .property-detail-sidebar__form::before,
.property-detail-a-2col .property-detail-sidebar__form.is-open::before {
  content: none;
  display: none;
}
.property-detail-a-2col .property-detail-sidebar__close-button,
.property-detail-a-2col .property-detail-sidebar__form.is-open .property-detail-sidebar__close-button {
  display: none;
}
.property-detail-a-2col .property-detail-sidebar__close,
.property-detail-a-2col .property-detail-sidebar__form.is-open .property-detail-sidebar__close {
  display: none;
}
.property-detail-a-2col .property-detail-sidebar__form .after-bar {
  display: none;
}

/* the panel itself, per the design system */
.property-detail-a-2col .property-detail-sidebar__form,
.property-detail-a-2col .property-detail-sidebar__form.is-open {
  position: relative;
  height: auto;
  background: var(--cire-panel);
  background-image: none;
  border: 1px solid var(--cire-hairline);
  border-radius: 0;
  padding: 24px 20px;
  box-shadow: none;
}

/* ==========================================================================
   17 LISTING CARD FACTS ROW — carousel overflow  (homepage capture)
   The Beds|Baths|Sqft row overflowed its slick slide and collided with the
   neighbouring card. Two causes in app.css:

     .listing-card__spec { padding: 0 1vw }

   1vw is VIEWPORT-relative, so inside a slick slide (whose width slick
   computes in px) the padding does not shrink with the slide - on a wide
   desktop that is ~19px per side per cell that the slide never accounted for.

     .listing-card__specs { display:flex; justify-content:flex-end; overflow:hidden }
     .listing-card__cell  { width:40%/48%/59% }

   and the flex children carried no min-width:0, so they refused to shrink
   below their content width and pushed out of the slide box regardless of
   overflow:hidden on the parent.

   Fixed by containing the row rather than by guessing slide widths, so it
   holds at ANY width slick computes: min-width:0 on every flex ancestor,
   max-width:100%, wrap allowed, and container-proportional padding.

   Applied to the homepage carousels AND the search results grid, because
   both render components/listings/gallery-card.php.
   ========================================================================== */
.home .listing-card__content,
.home .listing-card__cell,
.home .listing-card__specs,
.home .listing-card__spec,
.page-template-template-property-search-results .listing-card__content,
.page-template-template-property-search-results .listing-card__cell,
.page-template-template-property-search-results .listing-card__specs,
.page-template-template-property-search-results .listing-card__spec {
  min-width: 0;
  max-width: 100%;
}
.home .listing-card__specs,
.page-template-template-property-search-results .listing-card__specs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 0;
  row-gap: 4px;
  overflow: hidden;
  text-align: left;
}
/* container-proportional padding replaces the viewport-relative 1vw */
.home .listing-card__spec,
.page-template-template-property-search-results .listing-card__spec {
  padding: 0 10px;
  flex: 0 1 auto;
}
.home .listing-card__spec:first-child,
.page-template-template-property-search-results .listing-card__spec:first-child {
  padding-left: 0;
}
.home .listing-card__spec:last-child,
.page-template-template-property-search-results .listing-card__spec:last-child {
  padding-right: 0;
}
/* the divider was a solid black 31px bar; make it a true hairline */
.home .listing-card__spec::before,
.page-template-template-property-search-results .listing-card__spec::before {
  background: var(--cire-hairline);
  height: 60%;
  top: 20%;
}
.home .listing-card__spec-figure,
.page-template-template-property-search-results .listing-card__spec-figure {
  font-size: clamp(0.85rem, 2.4vw, 1rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--cire-charcoal);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.home .listing-card__spec-label,
.page-template-template-property-search-results .listing-card__spec-label {
  font-size: clamp(0.6rem, 1.7vw, 0.68rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
  white-space: nowrap;
}

/* belt-and-braces: never let a card paint outside its slick slide */
.home .slick-slide,
.home .slick-slide > div,
.page-template-template-property-search-results .slick-slide,
.page-template-template-property-search-results .slick-slide > div {
  min-width: 0;
  max-width: 100%;
}

/* a fact cell whose value came back empty contributes nothing */
.home .listing-card__spec-figure:empty,
.page-template-template-property-search-results .listing-card__spec-figure:empty {
  display: none;
}

/* ==========================================================================
   18 THE 1024-1365 BAND  (iPad landscape, now a first-class target)
   Foundation's "large" in this build starts at 1366px, so this band runs the
   MOBILE chrome with desktop-width content. Everything here is written for
   that gap specifically.
   ========================================================================== */

/* ---- BUG: two Filters controls rendering at once -----------------------
   This one was mine. app.css gives BOTH toggles a base display:none and
   reveals exactly one per breakpoint:

     .property-search-filters-menu-toggle--desktop { display:none }
     .property-search-filters-menu-toggle--mobile  { display:none }
     @media (max-width:767px) { ...--desktop { display:none } }
     @media (min-width:768px) { ...--mobile  { display:none } }

   Section 08 then styled the SHARED base class with display:inline-flex,
   which outranks those single-class rules (0,2,0 vs 0,1,0) and un-hid both.
   Fixed by never setting display on the shared class and instead driving each
   variant explicitly, so exactly one control exists at every width.
   ---------------------------------------------------------------------- */
.page-template-template-property-search-results .property-search-filters-menu-toggle {
  /* deliberately NO display here */
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-family: var(--cire-sans);
  font-size: clamp(0.76rem, 1.6vw, 0.82rem);
  letter-spacing: 0.1em;
  padding: 11px 20px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  cursor: pointer;
}
.page-template-template-property-search-results .property-search-filters-menu-toggle--desktop,
.page-template-template-property-search-results .property-search-filters-menu-toggle--mobile {
  display: none;
}
@media (min-width: 768px) {
  .page-template-template-property-search-results .property-search-filters-menu-toggle--desktop {
    display: inline-flex;
  }
  .page-template-template-property-search-results .property-search-filters-menu-toggle--mobile {
    display: none;
  }
}
@media (max-width: 767px) {
  .page-template-template-property-search-results .property-search-filters-menu-toggle--mobile {
    display: inline-flex;
  }
  .page-template-template-property-search-results .property-search-filters-menu-toggle--desktop {
    display: none;
  }
}

/* ---- off-brand red glyphs and carets ------------------------------------
   BRAND.md reserves Christie's red for sparing accent use; it must never be
   the default colour of an icon or a dropdown caret. Forced to charcoal
   across the filter chrome. Gold is reserved for the Apply action alone.
   ---------------------------------------------------------------------- */
.page-template-template-property-search-results .property-search-filters-menu .icon,
.page-template-template-property-search-results .property-search-filters-menu .icon::before,
.page-template-template-property-search-results .property-search-filters-menu-toggle .icon,
.page-template-template-property-search-results .property-search-filters-menu-toggle .icon::before,
.page-template-template-property-search-results .property-search-filters-menu-toggle::before,
.page-template-template-property-search-results .property-search-filters-menu-toggle::after,
.page-template-template-property-search-results .ruhl-dropdown .icon,
.page-template-template-property-search-results .ruhl-dropdown .icon::before,
.page-template-template-property-search-results .ruhl-dropdown::after,
.page-template-template-property-search-results .js-ruhl-dropdown .icon::before,
.page-template-template-property-search-results .property-search-filters-menu-section__header .icon,
.page-template-template-property-search-results .property-search-filters-menu-section__header .icon::before,
.page-template-template-property-search-results .search-result-option-sort .icon::before {
  color: var(--cire-charcoal);
}

/* uniform field heights across search box, dropdowns and buttons */
.page-template-template-property-search-results .property-search-filters-menu .ruhl-dropdown,
.page-template-template-property-search-results .property-search-filters-menu .js-ruhl-dropdown,
.page-template-template-property-search-results .property-search-filters-menu-section__range-selection,
.page-template-template-property-search-results .property-search-filters-menu input[type="text"],
.page-template-template-property-search-results .property-search-filters-menu select {
  min-height: 44px;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background-color: var(--cire-white);
  color: var(--cire-charcoal);
  font-size: 1rem;
  box-shadow: none;
}

/* Reset and Apply: full-strength, not washed out */
.page-template-template-property-search-results .property-search-filters-menu-submit__apply,
.page-template-template-property-search-results .property-search-filters-menu-submit__apply.button {
  opacity: 1;
  filter: none;
  background: var(--cire-gold);
  border: none;
  color: #2c3338;
  min-height: 44px;
}
.page-template-template-property-search-results .property-search-filters-menu-submit__reset {
  opacity: 1;
  filter: none;
  color: var(--cire-charcoal);
  min-height: 44px;
}

/* ---- map/grid toggle: a consistent pair --------------------------------
   app.css draws it as a hard black pair:
     .property-search-action-icon        { border: solid 1px #000000 }
     .property-search-action-icon:before { color: #000000 }
     .property-search-action-icon.active { background: #000000 }
   Reworked so the two boxes read as one control: identical hairline box,
   inactive = white ground + charcoal glyph, active = charcoal ground + white
   glyph.
   ---------------------------------------------------------------------- */
.page-template-template-property-search-results .property-search-action-icon {
  height: 44px;
  width: 44px;
  margin-left: 8px;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background: var(--cire-white);
}
.page-template-template-property-search-results .property-search-action-icon::before {
  color: var(--cire-charcoal);
  font-size: 1.1rem;
}
.page-template-template-property-search-results .property-search-action-icon:hover {
  border-color: var(--cire-gold);
}
.page-template-template-property-search-results .property-search-action-icon.active {
  background: var(--cire-charcoal);
  border-color: var(--cire-charcoal);
}
.page-template-template-property-search-results .property-search-action-icon.active::before {
  color: var(--cire-white);
}

/* ---- results grid: clipped leftmost card, uneven gutters ---------------
   The gallery sits inside Foundation .row/.columns, which carry negative
   side margins and gutter padding. Combined with the CSS grid from section
   08 that pulled the first column past the container edge in this band.
   Neutralised on the gallery's own ancestors only.
   ---------------------------------------------------------------------- */
.page-template-template-property-search-results .property-search-gallery-container {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  overflow-x: clip; /* nothing may paint past the container edge */
}
.page-template-template-property-search-results .property-search-gallery {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.page-template-template-property-search-results .property-search-gallery > .property-search-gallery-card {
  margin: 0;
  padding: 0;
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 1024px) and (max-width: 1365px) {
  /* the band Nick is reviewing: verified column maths, even gutters */
  .page-template-template-property-search-results .property-search-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 28px;
    padding-left: 0;
    padding-right: 0;
  }
  .page-template-template-property-search-results .property-search-gallery-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ==========================================================================
   19 HEADER UTILITY ICONS  (CSS only - no header markup, logo or hamburger
   mechanics touched, per the standing logo rule)
   The search and account controls render as heavy solid-black boxes. Restyled
   to borderless charcoal glyphs on a consistent 44px touch target.
   ========================================================================== */
.navbar .navbar__search-submit,
.navbar .navbar__link-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--cire-charcoal);
  font-family: var(--cire-sans);
  font-size: clamp(0.76rem, 1.6vw, 0.82rem);
  letter-spacing: 0.08em;
  text-decoration: none;
}
.navbar .navbar__search-submit .icon,
.navbar .navbar__search-submit .icon::before,
.navbar .navbar__link-login .icon,
.navbar .navbar__link-login .icon::before {
  color: var(--cire-charcoal);
  background: transparent;
  font-size: 1.05rem;
  line-height: 1;
}
.navbar .navbar__search-submit:hover,
.navbar .navbar__link-login:hover,
.navbar .navbar__search-submit:hover .icon::before,
.navbar .navbar__link-login:hover .icon::before {
  color: var(--cire-gold);
  background: transparent;
}
.navbar .navbar__search-submit:focus-visible,
.navbar .navbar__link-login:focus-visible {
  outline: 2px solid var(--cire-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   20 HOMEPAGE REDLINES (screenshots #4-5)
   ========================================================================== */

/* ---- 1. hero headline rendered in the SANS -----------------------------
   Diagnosed, not guessed. app.css carries:

     .home-hero-slider-words .hp-hero-header__content .hp-hero-header__header
       { font-family: inherit; font-size:3rem; line-height:1.2; text-align:center }

   That is specificity 0,3,0 and beats the 0,2,0 rule in section 05, and
   `inherit` pulls the sans straight off body - so the serif never applied.
   Matched at 0,4,0 here so the cascade lands our way.

   Font availability: header.php loads the Google family "Playfair" (NOT
   "Playfair Display" - different families). The token stack lists
   "Playfair Display" first, which simply is not loaded, then "Playfair",
   which is. app.css itself uses font-family:"Playfair",sans-serif for the
   section-header dropdown, confirming that is the available face.
   ---------------------------------------------------------------------- */
.home .home-hero-slider-words .hp-hero-header__content .hp-hero-header__header {
  font-family: "Playfair", "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(1.75rem, 5.4vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--cire-white);
  text-align: center;
  text-transform: none;
  text-wrap: balance;
}

/* ---- 2. hero carousel prev/next arrows: gone --------------------------- */
.home .home-hero-slider .slick-arrow,
.home .js-slider-home-featured > .slick-arrow,
.home .home-hero-slider-wrapper .slick-prev,
.home .home-hero-slider-wrapper .slick-next,
.home .home-hero-slider__content .js-slider-home-featured .slick-arrow.slick-prev,
.home .home-hero-slider__content .js-slider-home-featured .slick-arrow.slick-next {
  display: none;
}

/* ---- 4. "Featured in [the Caribbean]" section header -------------------
   One coherent serif display line. app.css sizes the select2 rendered text at
   2.25rem/47px against a 1.4-2.1rem heading, which is what read as a mistake.
   Any red underline is overridden to a gold hairline; carets go charcoal.
   ---------------------------------------------------------------------- */
.home .page-section-header__title-dropdown {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.25em;
  font-family: "Playfair", "Playfair Display", Georgia, serif;
}
.home .page-section-header__title-dropdown .page-section-header__title {
  font-family: "Playfair", "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height: 1.2;
  color: var(--cire-black);
}
.home .page-section-header__title-dropdown .select2-container .select2-selection {
  height: auto;
  min-height: 0;
  font-family: "Playfair", "Playfair Display", Georgia, serif;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--cire-gold);
  border-radius: 0;
}
.home .page-section-header__title-dropdown .select2-container .select2-selection .select2-selection__rendered {
  font-family: "Playfair", "Playfair Display", Georgia, serif;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--cire-black);
  padding-left: 0;
  padding-right: 26px;
}
.home .page-section-header__title-dropdown .select2-container .select2-selection .select2-selection__arrow b {
  font-size: 18px;
  color: var(--cire-charcoal);
  margin-left: -18px;
  border-color: var(--cire-charcoal) transparent transparent transparent;
}
/* no red anywhere in the section header */
.home .page-section-header,
.home .page-section-header a,
.home .page-section-header .icon,
.home .page-section-header .icon::before,
.home .page-section-header__title-dropdown *,
.home .page-section-header__select {
  border-bottom-color: var(--cire-gold);
  text-decoration-color: currentColor;
}

/* ---- 5. "View all N" black boxes -> letterspaced gold-underlined link --- */
.home .page-section-header .button,
.home .page-section-header a.button,
.home .listing-grid .button--view-all,
.home .page-section-header__view-all,
.home .listing-grid__view-all,
.home .listing-grid a.button {
  display: inline-block;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--cire-gold);
  border-radius: 0;
  padding: 0 0 3px;
  min-height: 0;
  color: var(--cire-charcoal);
  font-family: var(--cire-sans);
  font-size: clamp(0.72rem, 1.8vw, 0.78rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}
.home .page-section-header .button:hover,
.home .listing-grid a.button:hover,
.home .page-section-header__view-all:hover {
  background: transparent;
  color: var(--cire-gold);
  border-bottom-color: var(--cire-gold);
}

/* ---- 6. consistent section header pattern ------------------------------
   eyebrow + serif display on the left, view-all on the right, on one line.
   ---------------------------------------------------------------------- */
.home .page-section-header,
.home .page-section-header--alt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 20px;
  text-align: left;
  padding: 0 0 18px;
}
.home .page-section-header .col-title,
.home .page-section-header__title-dropdown {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  justify-content: flex-start;
}
.home .page-section-header__subtitle {
  display: block;
  width: 100%;
  font-family: var(--cire-sans);
  font-size: clamp(0.76rem, 1.9vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-black);
  margin-bottom: 4px;
}

/* ==========================================================================
   21 STICKY HEADER — STUCK STATE  (Nick's spec)
   One compact row: identity left, actions right, NO price and NO meta line.
   Those exist at the top of the page; the stuck bar is identity + actions.

   headroom.js toggles .headroom--not-top / .headroom--pinned on the element,
   so the stuck state is addressed through .headroom--not-top rather than any
   new markup or JS.
   ========================================================================== */
.property-detail-a-2col .property-detail-header.headroom--not-top {
  background: var(--cire-white);
  border-bottom: 1px solid var(--cire-hairline);
  box-shadow: none;
}
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 20px;
  row-gap: 0;
  min-height: 56px;
  padding: 8px 0;
}
/* identity: serif, single line, ellipsis when long */
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__title {
  display: block;
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__address {
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  line-height: 1.25;
  margin: 0;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* price and meta line are not part of the stuck state */
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-price,
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__details {
  display: none;
}
/* actions ride on the right of the same row */
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__actions {
  order: 2;
  flex: 0 0 auto;
  margin: 0;
  gap: 10px;
  flex-wrap: nowrap;
}
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button--save,
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button.a2a_dd {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button--tools,
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__schedule,
.property-detail-a-2col .property-detail-header.headroom--not-top a.button.property-detail-header__schedule {
  height: 40px;
  min-height: 40px;
  padding: 0 18px;
}
@media (min-width: 1024px) {
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__content {
    min-height: 68px;
    padding: 10px 0;
  }
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button--save,
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button.a2a_dd {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button--tools,
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__schedule,
  .property-detail-a-2col .property-detail-header.headroom--not-top a.button.property-detail-header__schedule {
    height: 44px;
    min-height: 44px;
  }
}
/* phones: Tools is the first thing to go if the row runs out of room */
@media (max-width: 728px) {
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button--tools {
    display: none;
  }
}

/* ==========================================================================
   22 PRE-FOOTER CONTACT BAR -> CHARCOAL  (sitewide)
   The full-width red band above the footer. Christie's red is a sparing
   accent per BRAND.md and must not be a full-bleed ground. Charcoal, so it
   and the charcoal footer read as one composed dark page-ending, separated
   by a single hairline.
   ========================================================================== */
.footer-callout {
  background: var(--cire-charcoal);
  color: var(--cire-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 34px 0;
  text-align: center;
}
.footer-callout__title {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 3vw, 1.7rem);
  line-height: 1.3;
  color: var(--cire-white);
  text-wrap: balance;
  margin: 0;
}
.footer-callout a:not(.footer-callout__button) {
  color: var(--cire-white);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.footer-callout a:not(.footer-callout__button):hover {
  color: var(--cire-gold);
}
/* white hairline ghost button, gold on hover */
.footer-callout__button,
.footer-callout .button,
.footer-callout .button--white-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 18px;
  padding: 12px 30px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 0;
  color: var(--cire-white);
  font-family: var(--cire-sans);
  font-size: clamp(0.74rem, 1.9vw, 0.8rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.footer-callout__button:hover,
.footer-callout .button:hover,
.footer-callout .button--white-outline:hover {
  background: transparent;
  border-color: var(--cire-gold);
  color: var(--cire-gold);
}
/* the footer picks up straight after it, as one dark ending */
.footer {
  background: var(--cire-charcoal);
  color: #c3c9cc;
}

/* ==========================================================================
   23 HEADER FIXTURES  (sitewide, CSS-only and fully reversible)
   ========================================================================== */

/* ---- 1. remove the top-right search control ----------------------------
   IMPORTANT: hide the FORM, not .navbar__search-wrapper. header.php nests
   BOTH controls inside that wrapper:

     <div class="navbar__search-wrapper">
       <form class="js-navbar__search navbar__search"> ... </form>
       ...href-login  ->  a.navbar__link-login
     </div>

   so display:none on the wrapper would take the account icon with it.

   Nothing orphans. The mobile drawer (.mobile-nav) carries only
   .mobile-nav__login and menu links - it has no search form of its own - and
   the nav "Search" link is untouched. The inline script at the foot of
   header.php binds document.querySelector("form"), which still resolves to
   this form because display:none keeps it in the DOM, so no listener is left
   dangling and no JS error is introduced.
   ---------------------------------------------------------------------- */
.navbar .navbar__search,
.navbar form.js-navbar__search,
.navbar .navbar__search-submit,
.navbar .navbar__search-input {
  display: none;
}
.navbar .navbar__search-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

/* ---- 2. account fixture: bare glyph, no box ---------------------------- */
.navbar .navbar__link-login,
.navbar a.navbar__link-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px tap target built from padding, not from a box */
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  background: transparent;
  background-image: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--cire-charcoal);
  text-decoration: none;
}
.navbar .navbar__link-login .icon,
.navbar .navbar__link-login .icon::before,
.navbar .navbar__link-login span {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--cire-charcoal);
  font-size: 1.1rem;
  line-height: 1;
}
.navbar .navbar__link-login:hover,
.navbar .navbar__link-login:hover .icon::before,
.navbar .navbar__link-login:hover span {
  color: var(--cire-gold);
  background: transparent;
}
.navbar .navbar__link-login:focus-visible {
  outline: 2px solid var(--cire-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   24 HOMEPAGE CAROUSEL ARROWS - BARE CHEVRONS
   Hero arrows stay hidden (section 20); these are the section carousels.
   ========================================================================== */
.home .slick-arrow,
.home .js-slider-home-featured-below .slick-arrow,
.home .listing-grid__cards .slick-arrow,
.home .js-slider-full-arrows .slick-arrow {
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  background-image: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
}
.home .slick-arrow::before,
.home .js-slider-home-featured-below .slick-arrow::before,
.home .listing-grid__cards .slick-arrow::before,
.home .js-slider-full-arrows .slick-arrow::before {
  font-size: 1.75rem;
  line-height: 1;
  color: var(--cire-charcoal);
  opacity: 1;
  text-shadow: none;
}
.home .slick-arrow:hover::before,
.home .js-slider-home-featured-below .slick-arrow:hover::before,
.home .listing-grid__cards .slick-arrow:hover::before {
  color: var(--cire-gold);
}
.home .slick-arrow:focus-visible {
  outline: 2px solid var(--cire-gold);
  outline-offset: 2px;
}
/* hero arrows remain suppressed */
.home .home-hero-slider .slick-arrow,
.home .home-hero-slider-wrapper .slick-arrow {
  display: none;
}

/* ==========================================================================
   25 HOMEPAGE TYPE SCALE - RESTRAINT PASS
   "Still looks bulky and not luxury." Luxury reads as restraint: display
   sizes come down ~20-25%, small caps get lighter weight and wider tracking,
   and the space AROUND the smaller type goes up.

   Legibility floors held deliberately: no body-copy value resolves below
   0.9375rem (15px). Uppercase micro-labels are allowed below that, as labels
   rather than body copy.
   ========================================================================== */

/* --- display headings: ~2.1rem -> ~1.65rem upper bound ------------------ */
.home .community__header-title,
.home .page-section-header__title,
.home .page-section-header__title-dropdown .page-section-header__title,
.home .text-block-content h2 {
  font-size: clamp(1.2rem, 2.6vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: 0.005em;
  font-weight: 500;
}
.home .page-section-header__title-dropdown .select2-container .select2-selection,
.home .page-section-header__title-dropdown .select2-container .select2-selection .select2-selection__rendered {
  font-size: clamp(1.2rem, 2.6vw, 1.65rem);
  line-height: 1.3;
}
.home .page-section-header__title-dropdown .select2-container .select2-selection .select2-selection__arrow b {
  font-size: 15px;
  margin-left: -15px;
}

/* --- hero headline: size stands, line-height tightens ------------------- */
.home .home-hero-slider-words .hp-hero-header__content .hp-hero-header__header {
  line-height: 1.08;
  letter-spacing: 0.005em;
}

/* --- small caps labels: lighter, wider, quieter ------------------------- */
.home .community__header-subtitle,
.home .page-section-header__subtitle {
  font-size: clamp(0.68rem, 1.5vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--cire-gray-med);
  margin-bottom: 10px;
}

/* --- view-all: smaller, wider tracking ---------------------------------- */
.home .page-section-header .button,
.home .listing-grid a.button,
.home .page-section-header__view-all,
.home .listing-grid__view-all {
  font-size: clamp(0.66rem, 1.5vw, 0.7rem);
  letter-spacing: 0.22em;
  padding-bottom: 4px;
}

/* --- cards: price down a step, address holds the 15px floor ------------- */
.home .listing-card__price,
.home .fuelidx_propsum_price {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  letter-spacing: 0.005em;
}
.home .listing-card__address,
.home .fuelidx_propsum_address {
  /* 0.9375rem = 15px: the body floor, held */
  font-size: clamp(0.9375rem, 2vw, 0.95rem);
  line-height: 1.5;
  margin-top: 6px;
}
.home .listing-card__specs,
.home .listing-card__meta {
  font-size: clamp(0.66rem, 1.6vw, 0.7rem);
  letter-spacing: 0.14em;
}
.home .listing-card__spec-figure {
  font-size: clamp(0.85rem, 2vw, 0.92rem);
}
.home .listing-card__spec-label {
  font-size: clamp(0.6rem, 1.5vw, 0.64rem);
  letter-spacing: 0.16em;
}
.home .listing-card__content {
  padding: 16px 2px 22px;
}

/* --- body copy in the text bands: floor held, measure tightened --------- */
.home .text-block-content p {
  font-size: clamp(0.9375rem, 2vw, 0.98rem);
  line-height: 1.8;
  color: var(--cire-gray-med);
}
.home .text-block-content {
  max-width: 54ch;
}

/* --- more air around the smaller type ----------------------------------- */
.home .community__header {
  padding: 64px 0 30px;
}
.home .page-section-header,
.home .page-section-header--alt {
  padding: 0 0 26px;
}
.home .text-block {
  padding: 64px 0;
}
@media (min-width: 729px) {
  .home .community__header {
    padding: 84px 0 36px;
  }
  .home .text-block {
    padding: 84px 0;
  }
}
@media (min-width: 1024px) {
  .home .community__header {
    padding: 104px 0 40px;
  }
  .home .text-block {
    padding: 104px 0;
  }
  .home .page-section-header,
  .home .page-section-header--alt {
    padding: 0 0 32px;
  }
}

/* ==========================================================================
   26 HERO ARROWS - CORRECTION
   They survived the previous pass. The boxes come from:

     .home-hero-slider-wrapper .slick-arrow { border:1px solid #f7f6f4;
                                              width:73px; height:73px }
     .home-hero-slider-wrapper .slick-arrow::before { font-size:2.1875rem;
                                                      color:#f7f6f4 }
     .home-hero-slider__content .js-slider-home-featured
       .slick-arrow.slick-prev { left:3rem }   /* and .slick-next right:3rem */

   Slick INJECTS these buttons at runtime, so they never appear in the served
   HTML and cannot be confirmed by grepping the page source - only the CSS
   contract above tells us where they land. Because the earlier attempt missed
   and the exact injection parent is not verifiable from static markup, this
   rule covers every container the theme's own selectors imply AND uses
   !important. That is a deliberate exception, not a habit: it is the one way
   to be certain without runtime access.

   Scoped so it cannot touch the section carousels: .js-slider-home-featured
   and .js-slider-home-featured-below are distinct class tokens, so the
   selectors below match the hero only.
   ========================================================================== */
.home .home-hero-slider-wrapper .slick-arrow,
.home .home-hero-slider-wrapper .slick-prev,
.home .home-hero-slider-wrapper .slick-next,
.home .home-hero-slider-wrapper button[class*="slick-arrow"],
.home .home-hero-slider .slick-arrow,
.home .home-hero-slider .slick-prev,
.home .home-hero-slider .slick-next,
.home .home-hero-slider__content .slick-arrow,
.home .home-hero-slider__content .js-slider-home-featured .slick-arrow,
.home .home-hero-slider__content .js-slider-home-featured .slick-arrow.slick-prev,
.home .home-hero-slider__content .js-slider-home-featured .slick-arrow.slick-next,
.home .js-slider-home-featured > .slick-arrow,
.home .js-slider-home-featured > .slick-prev,
.home .js-slider-home-featured > .slick-next {
  display: none !important;
}

/* ==========================================================================
   27 LEGACY RED SWEEP
   The theme's legacy red is #ED1C24 - the Christie's red - and app.css uses
   it 111 times. BRAND.md reserves it as a SPARING accent, so it must never be
   the default colour of a caret, glyph, underline or border in a front-end
   component.

   Swept here across the components that render it as chrome. Deliberately NOT
   a blanket * override: a global rule would also strip the colour from any
   genuinely intended accent, and from admin/editor surfaces.
   ========================================================================== */

/* --- select2 carets sitewide (hero quicksearch, filters, sort) ---------- */
.select2-container--default .select2-selection__arrow b,
.select2-container--default .select2-selection__arrow b::before,
.select2-selection__arrow b,
.select2-selection__arrow b::before,
.select2-container .select2-selection__arrow b::before {
  color: var(--cire-charcoal);
  border-top-color: var(--cire-charcoal);
}

/* --- hero quicksearch band: Island / Type / Price ----------------------- */
.home .hp-hero-rearch .select2-selection__arrow b,
.home .hp-hero-rearch .select2-selection__arrow b::before,
.home .hp-hero-rearch .icon,
.home .hp-hero-rearch .icon::before,
.home .hp-hero-rearch .property-search-filters-menu-section__header .icon::before,
.home .hp-hero-rearch .js-ruhl-dropdown .icon::before,
.home .hp-hero-rearch .ruhl-dropdown .icon::before,
.home .hp-hero-rearch .property-search-filters-menu-section__title,
.home .hp-hero-rearch .property-search-filters-menu-section__current-selection {
  color: var(--cire-charcoal);
  border-top-color: var(--cire-charcoal);
}

/* --- dropdown panels opened from the hero and the filter drawer --------- */
.ruhl-dropdown .icon,
.ruhl-dropdown .icon::before,
.js-ruhl-dropdown .icon,
.js-ruhl-dropdown .icon::before,
.ruhl-dropdown__toggle .icon::before {
  color: var(--cire-charcoal);
}

/* --- accordion / filter section chevrons -------------------------------- */
.property-search-filters-menu-section__header .icon,
.property-search-filters-menu-section__header .icon::before,
.js-filter-item-accordion-toggle .icon,
.js-filter-item-accordion-toggle .icon::before {
  color: var(--cire-charcoal);
}

/* --- navbar and mobile drawer glyphs ------------------------------------ */
.navbar .icon::before,
.mobile-nav .icon::before,
.navbar__mobile-menu-bars,
.mobile-nav__close .icon::before {
  color: var(--cire-charcoal);
}

/* --- red-flavoured buttons that are chrome, not accents ----------------- */
.button--red,
.button--red-outline,
.rental-app-button,
.button.button--red {
  background: transparent;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  color: var(--cire-charcoal);
}
.button--red:hover,
.button--red-outline:hover,
.rental-app-button:hover {
  border-color: var(--cire-gold);
  color: var(--cire-gold);
  background: transparent;
}