@charset "UTF-8";
/**
 * cire-offices.css — CIRECaribbean.com office landing rebuild
 * ===========================================================================
 * Owns exactly one page type: templates/template-office-landing.php, which
 * renders BOTH /locations/ and /team-landing/ (and therefore /offices/, which
 * 301s to /team-landing/).
 *
 * WHY THIS IS A STANDALONE FILE AND NOT A RESKIN
 * ----------------------------------------------
 * The old markup could not be restyled into this composition. Its card put the
 * office name *inside* the photograph, under a 90%-opacity navy gradient, on a
 * #003364 ground forced with !important from the theme's hand-written
 * style.css. Every fix would have been a specificity fight against three
 * stylesheets. So the template emits NEW markup under NEW class names
 * (.cire-offices / .cire-office), and no legacy office-landing-* rule can
 * reach it. Nothing in here needs !important as a result.
 *
 * ENQUEUE ORDER — THE SILENT KILLER
 * ---------------------------------
 * The fuelidx plugin enqueues css/app.css from fuelidx_wp_head, i.e. AFTER
 * wp_enqueue_scripts. A stylesheet without a 'neutrino_styles' dependency
 * prints BEFORE app.css and loses every tie. This file is registered with
 * [ 'neutrino_styles' ] inside the template's own
 * mrtheme_office_landing_scripts() — see template-office-landing.php.
 *
 * SCOPING
 * -------
 * Every rule below is prefixed .cire-offices. The wrapper is emitted by the
 * template, so this file is inert on every other page even though it is only
 * enqueued on one.
 *
 * BREAKPOINTS — the theme's real ones, not invented ones:
 *   base      phones, < 729px   (type tuned at 375px)
 *   >= 729px  Foundation small/medium boundary (45.5625em)
 *   >= 1024px theme JS desktop threshold
 *   >= 1366px Foundation "large"
 *
 * BRAND (BRAND.md): white ground dominant, charcoal #384249 type, gold #c9ac77
 * as small accents only. Red #ed1c24 is used ZERO times on this page — the old
 * page used it ~45 times. Legacy #B5121B and Ruhl navy #003364 / #1b2e41 do
 * not appear. Nick's contrast law is trivially satisfied here because this
 * page has no dark band at all: there is no text on any dark ground, and no
 * text sits on a photograph.
 *
 * Radius 0 everywhere. No shadows. One hairline (#e3e5e6). Every flex row
 * declares align-items explicitly (ALIGNMENT-SPEC D3) — none rely on the
 * default.
 */

/* ==========================================================================
   01  TOKENS — declared on the scope, not :root, so they cannot leak
   ========================================================================== */
.cire-offices {
  --o-white: #ffffff;
  --o-panel: #f6f7f7;
  --o-black: #000000;
  --o-charcoal: #384249;
  --o-gray-med: #76787b;
  --o-gray-light: #a3aaad;
  --o-gold: #c9ac77;
  --o-gold-dark: #bfa066;
  --o-hairline: #e3e5e6;

  /* Playfair Display is already loaded by header.php via Google Fonts.
     No new network request is made by this file. */
  --o-serif: "Playfair Display", "Playfair", Georgia, "Times New Roman", serif;
  --o-sans: "Proxima Nova", "Proxima Nova W01", "Helvetica Neue", Helvetica,
    Arial, sans-serif;

  /* 8px scale + a 4px half-step for optical nudges (ALIGNMENT-SPEC D2) */
  --o-s1: 4px;
  --o-s2: 8px;
  --o-s3: 16px;
  --o-s4: 24px;
  --o-s5: 32px;
  --o-s6: 40px;
  --o-s7: 64px;
  --o-s8: 104px;

  background: var(--o-white);
  color: var(--o-charcoal);
  font-family: var(--o-sans);
}

.cire-offices *,
.cire-offices *::before,
.cire-offices *::after {
  box-sizing: border-box;
}

/* ==========================================================================
   02  CONTAINER — one container, per ALIGNMENT-SPEC D1
   Every band on this page routes through it, so every left edge on the page
   agrees at every width. Full-bleed backgrounds go on the band, never here.
   ========================================================================== */
.cire-offices__container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--o-s3);
}

@media (min-width: 729px) {
  .cire-offices__container {
    padding-inline: var(--o-s4);
  }
}

@media (min-width: 1024px) {
  .cire-offices__container {
    padding-inline: var(--o-s6);
  }
}

@media (min-width: 1366px) {
  .cire-offices__container {
    padding-inline: var(--o-s7);
  }
}

/* ==========================================================================
   03  BREADCRUMB
   ========================================================================== */
.cire-offices__crumbs {
  border-bottom: 1px solid var(--o-hairline);
}

.cire-offices__crumbs .cire-offices__container {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* D3 */
  gap: var(--o-s2);
  padding-block: var(--o-s3);
}

.cire-offices__crumb {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--o-gray-med);
  text-decoration: none;
  line-height: 1.4;
}

.cire-offices__crumb[aria-current="page"] {
  color: var(--o-charcoal);
}

a.cire-offices__crumb:hover,
a.cire-offices__crumb:focus-visible {
  color: var(--o-charcoal);
}

/* ==========================================================================
   04  MASTHEAD — white ground, editorial, no photograph
   The old header set the words "Christie's International Real Estate" in
   #b3b3b3 directly over a surf photograph. BRAND.md prefers the logo NOT be
   placed on photography at all, so the photograph is gone rather than
   scrimmed: the wordmark now sits on white at full contrast, and the 22
   office photographs below supply all the imagery this page needs.
   ========================================================================== */
.cire-offices__masthead {
  padding-block: clamp(40px, 6vw, 88px) clamp(32px, 4.5vw, 56px);
}

.cire-offices__masthead-inner {
  max-width: 68ch; /* a text measure, not a layout width (D1 permits this) */
}

.cire-offices__eyebrow {
  margin: 0;
  font-size: clamp(0.62rem, 1.9vw, 0.7rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--o-charcoal);
  line-height: 1.5;
}

.cire-offices__title {
  margin: var(--o-s3) 0 0;
  font-family: var(--o-serif);
  font-weight: 500;
  /* 375px -> 2rem/32px. Only reaches 3.1rem on a wide desktop. */
  font-size: clamp(2rem, 5.2vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: 0.005em;
  color: var(--o-black);
  text-wrap: balance;
}

.cire-offices__standfirst {
  margin: var(--o-s4) 0 0;
  font-size: clamp(1rem, 2.6vw, 1.14rem);
  line-height: 1.65;
  color: var(--o-gray-med);
  max-width: 62ch;
}

/* the one gold rule on the page, and it is an accent, never a divider (D4) */
.cire-offices__rule {
  width: 64px;
  height: 1px;
  border: 0;
  background: var(--o-gold);
  margin: var(--o-s5) 0 0;
}

.cire-offices__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* D3 */
  gap: var(--o-s2) var(--o-s4);
  margin: var(--o-s4) 0 0;
  padding: 0;
  list-style: none;
}

.cire-offices__stat {
  display: flex;
  align-items: baseline; /* same-size same-family pair only — permitted (D3.1) */
  gap: 0.4em;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-gray-med);
  line-height: 1.4;
}

.cire-offices__stat-figure {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--o-charcoal);
  font-variant-numeric: tabular-nums;
}

/* ---- jump-to-office control --------------------------------------------
   The old control was a select2 clone (js-ruhl-dropdown), i.e. runtime DOM —
   the exact class of element that cost four failed attempts on the filter bar.
   The template no longer applies that class, so this is a real, native
   <select>: no runtime dependency, an OS picker on phones, and stylable here.
   ------------------------------------------------------------------------ */
.cire-offices__jump {
  margin: var(--o-s5) 0 0;
  max-width: 26rem;
}

.cire-offices__jump-label {
  display: block;
  margin: 0 0 var(--o-s2);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--o-gray-med);
}

.cire-offices__select {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 14px 44px 14px 16px;
  border: 1px solid var(--o-gray-light);
  border-radius: 0;
  background-color: var(--o-white);
  /* charcoal chevron, inline so it costs no request */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23384249' stroke-width='1.5' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 9px;
  box-shadow: none;
  font-family: var(--o-sans);
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--o-charcoal);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 160ms ease;
}

.cire-offices__select:hover {
  border-color: var(--o-charcoal);
}

.cire-offices__select:focus,
.cire-offices__select:focus-visible {
  outline: 2px solid var(--o-gold);
  outline-offset: -1px;
  border-color: var(--o-gold);
}

/* ==========================================================================
   05  TERRITORY GROUPS
   22 offices in one undifferentiated stack was ~5,000px of identical cards on
   a phone. Grouping by territory is drawn entirely from the data (the ION
   `label`, e.g. "Bahamas, Eleuthera"), and it also fixes the ordering defect:
   the API sorts by `name`, so the six name-less records sorted FIRST and the
   page opened on the broken ones.
   ========================================================================== */
.cire-offices__groups {
  padding-block: 0 clamp(48px, 7vw, 104px);
}

.cire-offices__group + .cire-offices__group {
  margin-top: clamp(40px, 6vw, 72px);
}

.cire-offices__group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline; /* explicit; serif title + small label, see note */
  justify-content: space-between;
  gap: var(--o-s2) var(--o-s4);
  padding-bottom: var(--o-s3);
  border-bottom: 1px solid var(--o-hairline);
}

/* D3.1 forbids baseline for mixed-size pairs, so the count is aligned to the
   title's baseline only because it is set on its own line at narrow widths.
   From 729px the pair is centred instead, which is the doctrine default. */
@media (min-width: 729px) {
  .cire-offices__group-head {
    align-items: center;
  }
}

.cire-offices__group-title {
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--o-black);
  text-wrap: balance;
}

.cire-offices__group-count {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o-gray-med);
  line-height: 1.4;
  white-space: nowrap;
}

/* ==========================================================================
   06  THE GRID
   ========================================================================== */
.cire-offices__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch; /* explicit: cards share a row height so their
                           hairlines land on one line (D3.2) */
  gap: var(--o-s6) var(--o-s4);
  margin: var(--o-s5) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 729px) {
  .cire-offices__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--o-s6) var(--o-s5);
  }
}

@media (min-width: 1024px) {
  .cire-offices__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(40px, 4vw, 56px) var(--o-s6);
  }
}

/* ==========================================================================
   07  THE OFFICE CARD
   Bare, per ALIGNMENT-SPEC D4: no border, no radius, no shadow. A card is its
   photograph, the white ground and the space around it. The single permitted
   rule is one hairline under the text block.

   The office name is NOT on the photograph. That kills the navy gradient, the
   #003364 ground and the text-on-image contrast gamble in one move.
   ========================================================================== */
.cire-office {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* explicit (D3) */
  min-width: 0;
}

.cire-office__media {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  background-color: var(--o-panel); /* neutral while the photo loads — never navy */
  overflow: hidden;
}

.cire-office__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border: 0;
  transition: opacity 220ms ease;
}

a.cire-office__media:hover .cire-office__img,
a.cire-office__media:focus-visible .cire-office__img {
  opacity: 0.88;
}

a.cire-office__media:focus-visible {
  outline: 2px solid var(--o-gold);
  outline-offset: 2px;
}

/* ---- text block --------------------------------------------------------- */
.cire-office__body {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* explicit (D3) */
  flex: 1 1 auto; /* equal heights in a row => hairlines align */
  padding: var(--o-s4) 0;
  border-bottom: 1px solid var(--o-hairline); /* the one permitted card rule */
}

.cire-office__place {
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(1.08rem, 2.8vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--o-black);
  text-wrap: balance;
}

.cire-office__place a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}

.cire-office__place a:hover,
.cire-office__place a:focus-visible {
  border-bottom-color: var(--o-gold);
}

.cire-office__firm {
  margin: var(--o-s2) 0 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o-gray-med);
  line-height: 1.6;
}

.cire-office__address {
  margin: var(--o-s3) 0 0;
  font-style: normal; /* <address> defaults to italic */
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--o-gray-med);
}

/* ---- contact row -------------------------------------------------------- */
.cire-office__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* D3 default */
  gap: var(--o-s2) var(--o-s4);
  margin-top: auto; /* pins the row to the bottom so rows agree across a grid row */
  padding-top: var(--o-s4);
}

.cire-office__phone {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--o-charcoal);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}

.cire-office__phone:hover,
.cire-office__phone:focus-visible {
  border-bottom-color: var(--o-gold);
}

/* Replaces the red map-pin glyph. No icon font, no red, just a word. */
.cire-office__directions {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o-gray-med);
  text-decoration: none;
  line-height: 1.6;
  border-bottom: 1px solid var(--o-hairline);
  transition: color 160ms ease, border-color 160ms ease;
}

.cire-office__directions:hover,
.cire-office__directions:focus-visible {
  color: var(--o-charcoal);
  border-bottom-color: var(--o-gold);
}

/* ---- incomplete records -------------------------------------------------
   Six offices have no name, address or phone in the ION database (see
   FINDINGS-offices.md). Nothing is invented and nothing is faked: the card
   renders the office's real place label and its real photograph and simply
   STOPS. What it must never do is what the old page did — emit ", " with no
   address after it, a bare "O." with no number, a tel: link to nowhere and an
   href of /offices// . Those are the visible symptoms of the data gap.

   This modifier exists only so the card reads as a deliberate directory tile
   rather than a broken one. The moment the ION fields are filled, the template
   emits the full card with no CSS or template change.
   ------------------------------------------------------------------------ */
.cire-office--brief .cire-office__body {
  padding-bottom: var(--o-s4);
}

/* ==========================================================================
   08  REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cire-offices *,
  .cire-offices *::before,
  .cire-offices *::after {
    transition-duration: 0.01ms !important;
  }
}