@charset "UTF-8";

/* =============================================================================
   RealBird agent mini-site (board_v2)

   New file. Nothing here is loaded by board.aspx or any existing page, so the
   v1 widget and the single property websites are untouched.

   Theming model, inherited from the luxe single property website (theme 4-1):
   every colour and face is a token on :root. Swapping a palette or a typeface
   therefore means overriding a handful of custom properties - either by adding
   a .rb-theme-* block at the bottom of this file, or per request via the
   rb_c1 / rb_c2 / rb_c3 / rb_bg / rb_fh / rb_fb / rb_fonts query parameters,
   which board_v2.aspx.cs emits as an inline :root override.

   Bootstrap 5 is loaded ahead of this file for its reset, form controls and the
   --bs-* variable surface the luxe palette already speaks. Layout below is hand
   written CSS grid rather than a second framework, to keep the payload small.
   ============================================================================= */

:root {
  /* ===== BRAND IDENTITY (luxe / theme 4-1 defaults) ===== */
  --brand-accent-1: #b4a057;            /* muted antique gold */
  --brand-accent-1-rgb: 180, 160, 87;
  --brand-accent-2: #7a6547;            /* refined espresso brown */
  --brand-accent-2-rgb: 122, 101, 71;
  --brand-accent-3: #1f2a33;            /* deep charcoal slate */
  --brand-accent-3-rgb: 31, 42, 51;
  /* The member-controlled colour: the surface behind the searchbar, the contact section and
     the highlighted typeahead row. When a member sets one, ThemeStyleBlock() in
     board_v2.aspx.cs also emits --brand-off-white-fg and --brand-off-white-fg-muted for the
     text that sits directly on it. Those two are deliberately NOT declared here - every use
     carries its own var() fallback to the colour it had before, so an unbranded page renders
     exactly as it always has. */
  --brand-off-white: #f6f3ee;
  --brand-off-white-rgb: 246, 243, 238;

  /* ===== TYPOGRAPHY ===== */
  --font-headings: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ===== BOOTSTRAP BRIDGE ===== */
  --bs-primary: var(--brand-accent-1);
  --bs-primary-rgb: var(--brand-accent-1-rgb);
  --bs-secondary: var(--brand-accent-2);
  --bs-dark: var(--brand-accent-3);
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
  --bs-body-font-size: 0.9rem;

  /* ===== SEMANTIC ===== */
  --color-text: #1b2228;
  --color-text-muted: #6c757d;
  --color-text-subtle: #9aa0a6;
  --color-border: #e3e6ea;
  --color-border-light: #f1f3f5;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f6f8;

  /* ===== SHAPE ===== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .10);

  /* ===== METRICS ===== */
  --page-max: 1180px;
  --gutter: 20px;
  --header-h: 64px;
  --mobilebar-h: 60px;
  /* Width of the fixed UserWay launcher plus breathing room; see .rb-header__inner. */
  --userway-clearance: 76px;
}

/* =============================================================================
   BASE
   ============================================================================= */

html { scroll-behavior: smooth; }

/* The shared accessibility widget parks its launcher a few pixels past the right
   edge, which would otherwise give the whole mini-site a horizontal scrollbar.
   Every element this page owns already measures exactly the viewport width. */
body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Keeps the sticky mobile bar from covering the end of the page. */
  padding-bottom: 0;
}

h1, h2, h3, .rb-brand__name {
  font-family: var(--font-headings);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--brand-accent-3);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.rb-muted { color: var(--color-text-muted); }

/* Anchor targets must clear the sticky header. */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* =============================================================================
   BUTTONS
   ============================================================================= */

.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}

.rb-btn svg { width: 15px; height: 15px; flex: none; }

.rb-btn--primary { background: var(--brand-accent-3); color: #fff; }
.rb-btn--primary:hover { background: var(--brand-accent-2); color: #fff; }

.rb-btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.rb-btn--ghost:hover { border-color: var(--brand-accent-1); color: var(--brand-accent-2); }

.rb-btn--block { width: 100%; }

.rb-btn[disabled] { opacity: .55; cursor: default; }

/* =============================================================================
   HEADER
   ============================================================================= */

.rb-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.rb-header__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  /* Extra right padding reserves the top-right corner for the UserWay launcher, which
     this page loads with data-position 1 (fixed, top right, maximum z-index). Without
     it the launcher sits exactly on the hamburger on phones and on the last nav item on
     desktop, and swallows the tap - the launcher cannot be moved behind them without
     making the accessibility control itself unreachable. */
  padding: 0 calc(var(--gutter) + var(--userway-clearance)) 0 var(--gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 18px;
}

/* The brand block may shrink at every width, so an unusually long agent or brokerage name
   truncates rather than pushing the logo and nav off the right edge. Short names never
   reach the limit, so for them nothing changes. */
.rb-brand { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }

.rb-brand__photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.rb-brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }

.rb-brand__name { font-size: 1.28rem; }

.rb-brand__name,
.rb-brand__company {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-brand__company {
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Brokerage logo, co-branded beside the agent. The slot has a fixed height and the image a
   max-width with object-fit: contain, so any logo shape fits the header's proportions without
   changing its height: an 8:1 wordmark hits the width cap and gets shorter, a square or tall
   mark hits the height. No plate or border of our own - dark logo plates and transparent
   marks both render as designed. flex: none keeps it from being squeezed; the agent's name
   truncates first (see the 1080px rules). Desktop only - mobile shows it in the footer card. */
.rb-brandlogo {
  display: flex;
  align-items: center;
  flex: none;
  height: 44px;
  padding-left: 18px;
  border-left: 1px solid var(--color-border);
}

.rb-brandlogo__img {
  display: block;
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 180px;
  object-fit: contain;
}

/* The footer card's logo when the header already shows it: mobile only, so a screen never
   shows the logo twice. Without the header logo the card shows it at every width. */
.rb-agentcard__logo--mobile { display: none; }

/* The nav keeps its full width (labels never wrap); the brand block gives way. */
.rb-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; flex: none; }
.rb-nav__link { white-space: nowrap; }

.rb-nav__link {
  position: relative;
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  padding: 6px 0;
  transition: color .18s ease;
}

.rb-nav__link:hover { color: var(--brand-accent-3); }

.rb-nav__link.is-active { color: var(--brand-accent-3); font-weight: 500; }

.rb-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand-accent-3);
}

/* Burger is mobile-only; see the media query at the end. */
.rb-burger {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  color: var(--brand-accent-3);
  cursor: pointer;
}

.rb-burger__label { font-size: .72rem; letter-spacing: .05em; }

/* =============================================================================
   MOBILE DRAWER
   ============================================================================= */

.rb-drawer { position: fixed; inset: 0; z-index: 100; }
.rb-drawer[hidden] { display: none; }
.rb-drawer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}

.rb-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(84vw, 320px);
  background: #fff;
  padding: 22px 22px 32px;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
  animation: rb-slide-in .22s ease;
}

@keyframes rb-slide-in { from { transform: translateX(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .rb-drawer__panel { animation: none; }
  html { scroll-behavior: auto; }
}

.rb-drawer__close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: 0;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
}

.rb-drawer__nav { display: flex; flex-direction: column; margin-top: 30px; }

.rb-drawer__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px;
  border-bottom: 1px solid var(--color-border-light);
  font-family: var(--font-headings);
  font-size: 1.15rem;
  color: var(--brand-accent-3);
}

.rb-drawer__count {
  font-family: var(--font-body);
  font-size: .68rem;
  color: var(--color-text-subtle);
  background: var(--color-surface-alt);
  border-radius: 999px;
  padding: 2px 9px;
}

.rb-drawer__contact { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.rb-drawer__contact a { font-size: .82rem; color: var(--brand-accent-2); }

/* =============================================================================
   SEARCH BAR
   ============================================================================= */

.rb-searchbar {
  background: var(--brand-off-white);
  border-bottom: 1px solid var(--color-border);
}

.rb-search {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
}

.rb-search__field { position: relative; flex: none; }
.rb-search__field--grow { flex: 1 1 auto; min-width: 0; }

.rb-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-text-subtle);
  pointer-events: none;
}

.rb-search input[type="search"],
.rb-search select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--color-text);
  padding: 0 12px;
}

.rb-search input[type="search"] { padding-left: 36px; }

.rb-search select { min-width: 118px; cursor: pointer; }

.rb-search input:focus,
.rb-search select:focus {
  outline: none;
  border-color: var(--brand-accent-1);
  box-shadow: 0 0 0 3px rgba(var(--brand-accent-1-rgb), .18);
}

.rb-search__submit { height: 40px; }

/* Typeahead */
.rb-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 70;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 300px;
  overflow-y: auto;
}

.rb-suggest[hidden] { display: none; }

.rb-suggest li {
  padding: 9px 14px;
  font-size: .82rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rb-suggest li:hover,
.rb-suggest li.is-active {
  background: var(--brand-off-white);
  color: var(--brand-off-white-fg, inherit);
}

.rb-suggest .rb-suggest__kind {
  margin-left: auto;
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* On the highlighted row the kind label sits on the brand surface, not on white. */
.rb-suggest li:hover .rb-suggest__kind,
.rb-suggest li.is-active .rb-suggest__kind {
  color: var(--brand-off-white-fg-muted, var(--color-text-subtle));
}

/* The Clear button is transparent, so its text and outline sit on the searchbar surface.
   Scoped to the searchbar - ghost buttons elsewhere sit on white. */
.rb-searchbar .rb-btn--ghost {
  color: var(--brand-off-white-fg-muted, var(--color-text-muted));
  border-color: var(--brand-off-white-fg-muted, var(--color-border));
}
.rb-searchbar .rb-btn--ghost:hover {
  color: var(--brand-off-white-fg, var(--brand-accent-2));
  border-color: var(--brand-off-white-fg, var(--brand-accent-1));
}

/* =============================================================================
   SECTIONS
   ============================================================================= */

.rb-main { min-height: 50vh; }

.rb-view[hidden] { display: none; }

.rb-section {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 40px var(--gutter) 8px;
}

.rb-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.rb-section__title { font-size: 1.85rem; margin: 0; }

.rb-section__sub {
  margin: 4px 0 0;
  font-size: .82rem;
  color: var(--color-text-muted);
}

.rb-section__all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-size: .78rem;
  color: var(--brand-accent-2);
  padding-bottom: 4px;
}

.rb-section__all:hover { color: var(--brand-accent-1); }
.rb-section__all svg { width: 15px; height: 15px; }

.rb-section__foot {
  display: flex;
  justify-content: center;
  padding: 24px 0 8px;
}

.rb-section--prose { min-height: 40vh; }

/* In these two views the title is a direct child of the section rather than sitting inside
   .rb-section__head, so it picks up none of the head's spacing - and .rb-section__title is
   margin:0. Without this the heading butts straight up against the first line of member copy. */
.rb-section--prose .rb-section__title { margin-bottom: 28px; }

/* No measure cap. The section's own --page-max already sets the line length, and a 70ch cap
   on top of it rendered as a half-width column sitting against the full-width card grid the
   other views use. */
.rb-prose { font-size: .9rem; color: var(--color-text-muted); }

/* Typography for member-authored markup. The sanitizer's allowlist is exactly
   h2-h5 / p / ul / ol / li / strong / em / a, and the base sheet styles only h1-h3 -
   without these, h4, h5 and the lists would fall through to Bootstrap defaults and read
   as a different document from the rest of the mini-site. */
.rb-prose h2,
.rb-prose h3,
.rb-prose h4,
.rb-prose h5 {
  font-family: var(--font-headings);
  color: var(--brand-accent-3);
  margin: 1.4em 0 .4em;
  line-height: 1.25;
}

.rb-prose h2 { font-size: 1.5rem; }
.rb-prose h3 { font-size: 1.25rem; }
.rb-prose h4 { font-size: 1.08rem; }
.rb-prose h5 { font-size: .98rem; }
.rb-prose > :first-child { margin-top: 0; }

.rb-prose p { margin: 0 0 .9em; }

.rb-prose ul,
.rb-prose ol { margin: 0 0 .9em; padding-left: 1.35em; }

.rb-prose li { margin-bottom: .3em; }

.rb-prose strong { color: var(--color-text); font-weight: 600; }

.rb-prose a { color: var(--brand-accent-2); text-decoration: underline; }
.rb-prose a:hover { color: var(--brand-accent-1); }

/* Third-party review embed. The iframe sets its own height, so the container only has to
   stop a wide widget from forcing the page sideways on a phone. */
.rb-embed { max-width: 100%; overflow-x: auto; }
.rb-embed iframe { max-width: 100%; border: 0; }

/* Retained for the placeholder state, still used when a section is rendered with no body. */
.rb-prose--placeholder { min-height: 120px; }

.rb-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 40px 0;
}

.rb-empty h2 { font-size: 1.4rem; margin-bottom: 6px; }

.rb-loading {
  color: var(--color-text-subtle);
  font-size: .8rem;
  margin: 0;
}

/* =============================================================================
   CARD GRID
   ============================================================================= */

.rb-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.rb-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.rb-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--brand-accent-1-rgb), .55);
  transform: translateY(-2px);
}

.rb-card__link { display: block; height: 100%; }

.rb-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--color-surface-alt); }

.rb-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rb-card__photo--empty {
  background:
    repeating-linear-gradient(45deg, var(--color-border-light) 0 10px, #fff 10px 20px);
}

.rb-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .09em;
  color: #fff;
  background: var(--brand-accent-3);
}

.rb-badge--pending { background: var(--brand-accent-2); }
.rb-badge--coming { background: var(--brand-accent-1); }
.rb-badge--sold { background: var(--brand-accent-3); }

/* The &fid= listing gets a quiet gold rule rather than a loud ribbon: it is a
   deep link the visitor followed on purpose, not a promotion. */
.rb-card.is-pinned { border-color: var(--brand-accent-1); }
.rb-card.is-pinned::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand-accent-1);
  z-index: 2;
}

.rb-card__body { padding: 14px 15px 10px; }

.rb-card__pricerow { display: flex; align-items: baseline; justify-content: space-between; }

.rb-card__price {
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--brand-accent-3);
  letter-spacing: -.01em;
}

.rb-card__address {
  margin-top: 6px;
  font-size: .81rem;
  color: var(--color-text);
}

/* No publishable price (common on sold boards in markets that forbid it): the
   address takes over as the card's headline rather than leaving a hole. */
.rb-card__body--nopricetag .rb-card__address {
  margin-top: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-accent-3);
  line-height: 1.3;
}

.rb-card__city { font-size: .78rem; color: var(--color-text-muted); }

.rb-card__facts {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--color-border-light);
}

.rb-fact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  padding: 10px 6px;
  font-size: .74rem;
  color: var(--color-text-muted);
  border-left: 1px solid var(--color-border-light);
  white-space: nowrap;
  min-width: 0;
}

.rb-fact:first-child { border-left: 0; }
.rb-fact svg { width: 14px; height: 14px; flex: none; color: var(--color-text-subtle); }
.rb-fact span { overflow: hidden; text-overflow: ellipsis; }

/* =============================================================================
   CONTACT
   ============================================================================= */

.rb-contact {
  background: var(--brand-off-white);
  border-top: 1px solid var(--color-border);
  margin-top: 46px;
}

.rb-contact__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 44px var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  justify-content: center;
}

.rb-contact__col { min-width: 0; }

.rb-contact__col + .rb-contact__col {
  padding-left: 40px;
  border-left: 1px solid var(--color-border);
}

/* Both sit directly on the brand surface. The fallbacks are the colours they had before:
   the heading inherited --brand-accent-3 from the global h2 rule. */
.rb-contact__title {
  font-size: 1.5rem;
  margin: 0 0 14px;
  color: var(--brand-off-white-fg, var(--brand-accent-3));
}

.rb-contact__lead {
  font-size: .82rem;
  color: var(--brand-off-white-fg-muted, var(--color-text-muted));
  margin-bottom: 16px;
}

/* =============================================================================
   AGENT BRANDING CARD

   Mirrors the "Presented by" card on the luxe single property website so an agent's
   mini-site and their listing pages present identically. Sized identically on phones
   too - the photo is deliberately NOT scaled up on small screens.
   ============================================================================= */

.rb-agentcard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 22px 26px 26px;
  text-align: center;
}

.rb-agentcard__eyebrow {
  margin: 0 0 12px;
  font-size: .82rem;
  color: var(--color-text-muted);
}

.rb-agentcard__photo {
  display: block;
  margin: 0 auto 12px;
  max-width: 120px;
  max-height: 120px;
  object-fit: cover;
}

.rb-agentcard__name {
  font-size: 1.5rem;
  margin: 0 0 2px;
}

.rb-agentcard__company {
  margin: 0;
  font-family: var(--font-headings);
  font-size: 1.05rem;
  color: var(--color-text-muted);
}

.rb-agentcard__license {
  margin: 2px 0 0;
  font-size: .78rem;
  color: var(--color-text-muted);
}

.rb-agentcard__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin-top: 10px;
}

.rb-agentcard__links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .88rem;
  color: var(--color-text);
}

.rb-agentcard__links a:hover { color: var(--brand-accent-1); }
.rb-agentcard__links svg { width: 16px; height: 16px; flex: none; }

.rb-agentcard__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.rb-agentcard__social a { display: inline-flex; opacity: .9; transition: opacity .18s ease; }
.rb-agentcard__social a:hover { opacity: 1; }
.rb-agentcard__social svg { width: 26px; height: 26px; display: block; }

.rb-agentcard__logo {
  display: block;
  margin: 18px auto 0;
  max-width: 120px;
  max-height: 80px;
  object-fit: contain;
}

/* Contact form */
#rb-contact-form input,
#rb-contact-form textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-body);
  font-size: .82rem;
  padding: 10px 12px;
  margin-bottom: 10px;
  color: var(--color-text);
}

#rb-contact-form textarea { resize: vertical; min-height: 96px; }

#rb-contact-form input:focus,
#rb-contact-form textarea:focus {
  outline: none;
  border-color: var(--brand-accent-1);
  box-shadow: 0 0 0 3px rgba(var(--brand-accent-1-rgb), .18);
}

.rb-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rb-field-row input { margin-bottom: 10px; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.rb-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cf-turnstile { margin-bottom: 12px; }

.rb-formmsg {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: .8rem;
}

.rb-formmsg[hidden] { display: none; }
.rb-formmsg.is-success { background: #e7f4ec; color: #14603a; }
.rb-formmsg.is-error { background: #fdecec; color: #8a1c1c; }

/* =============================================================================
   FOOTER
   ============================================================================= */

.rb-footer { background: var(--brand-accent-3); color: rgba(255, 255, 255, .72); }

/* Legal strip only: the Powered by RealBird mark and the copyright. Agent name,
   company and contact details live in the branding card above, so the dark bar no
   longer repeats them. */
.rb-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 26px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.rb-footer__poweredby {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: opacity .18s ease;
}

.rb-footer__poweredby:hover { opacity: .8; }

/* Set as type rather than artwork. Both lines share the body face, so the mark is
   legible at any size, needs no asset request, and carries no colour of its own to
   fight the dark bar. */
.rb-footer__poweredby-label {
  color: #fff;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.rb-footer__poweredby-name {
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.1;
}

.rb-footer__legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: .72rem;
  color: rgba(255, 255, 255, .55);
}

.rb-footer__eho { filter: brightness(0) invert(1); opacity: .7; }

/* =============================================================================
   MOBILE STICKY FOOTER
   ============================================================================= */

.rb-mobilebar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: rgba(255, 255, 255, .98);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: saturate(160%) blur(8px);
}

.rb-mobilebar__btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--mobilebar-h);
  font-size: .64rem;
  letter-spacing: .03em;
  color: var(--color-text-muted);
}

.rb-mobilebar__btn svg { width: 19px; height: 19px; }
.rb-mobilebar__btn.is-active { color: var(--brand-accent-1); }

/* =============================================================================
   MAP VIEW (board_v2_map.js)

   Desktop (>1080px): list left, map right, the map sticky under the header while the list
   scrolls - the .has-map class is set per view, only when the view has pins.
   Smaller screens: never split. A floating Map button opens a full-screen map with a List
   button to go back (body.rb-map-open), the pattern Zillow, Redfin and Airbnb all use.
   ============================================================================= */

.rb-split__map { display: none; position: relative; background: var(--color-surface-alt); }
.rb-split__map[hidden] { display: none !important; }
.rb-map__canvas { position: absolute; inset: 0; }

/* Price pins: one HTML overlay for all of them (see PinLayer in board_v2_map.js). */
.rb-pin {
  position: absolute;
  transform: translate(-50%, calc(-100% - 6px));
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--brand-accent-3);
  color: #fff;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
  cursor: pointer;
  border: 0;
  transition: transform .12s ease, background-color .12s ease;
}

.rb-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  margin-left: -5px;
  border: 5px solid transparent;
  border-bottom: 0;
  border-top-color: var(--rb-pin-bg, var(--brand-accent-3));
}

.rb-pin--coming { --rb-pin-bg: var(--brand-accent-1); background: var(--brand-accent-1); }
.rb-pin--pending { --rb-pin-bg: var(--brand-accent-2); background: var(--brand-accent-2); }
.rb-pin--sold { --rb-pin-bg: #ffffff; background: #fff; color: var(--color-text); }

.rb-pin.is-hot,
.rb-pin.is-selected {
  --rb-pin-bg: var(--brand-accent-1);
  background: var(--brand-accent-1);
  color: #fff;
  transform: translate(-50%, calc(-100% - 6px)) scale(1.12);
  z-index: 2;
}

/* Dense view: pins shrink to dots, and a dot grows back into its pill on hover or select. */
.rb-pins.is-dense .rb-pin:not(.is-hot):not(.is-selected) {
  width: 12px;
  height: 12px;
  padding: 0;
  font-size: 0;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
}
.rb-pins.is-dense .rb-pin:not(.is-hot):not(.is-selected)::after { display: none; }

/* The listing card for a selected pin: bottom of the map on every size. */
.rb-map__card {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 16px;
  z-index: 3;
  max-width: 380px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.rb-map__card[hidden] { display: none; }

.rb-mapcard { display: flex; color: var(--color-text); }
.rb-mapcard__photo { flex: none; width: 112px; min-height: 96px; object-fit: cover; background: var(--color-surface-alt); }
.rb-mapcard__body { flex: 1 1 auto; min-width: 0; padding: 10px 34px 10px 12px; }
.rb-mapcard__status {
  font-size: .62rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.rb-mapcard__price { font-size: 1rem; font-weight: 600; margin-top: 2px; }
.rb-mapcard__addr,
.rb-mapcard__city {
  font-size: .78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-mapcard__city { color: var(--color-text-muted); }
.rb-mapcard__close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
}

/* A list card whose pin is hovered or selected. */
.rb-card.is-map-hot { border-color: var(--brand-accent-1); box-shadow: var(--shadow-md); }

/* Map / List toggle pill (smaller screens only). Centred, so it stays clear of the UserWay
   launcher in the top-right corner and of the mobile bar below. */
.rb-maptoggle {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 85;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-accent-3);
  color: #fff;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  cursor: pointer;
}
.rb-maptoggle svg { width: 17px; height: 17px; }
.rb-maptoggle[hidden] { display: none; }

/* The List button lives inside the map, top centre, so it never sits on the listing card at
   the bottom. Only shown while the mobile map is open. The id selector keeps the Map button's
   bottom offsets (below) from ever applying to it - top and bottom together would stretch it
   to the full height of the map. */
#rb-map-close.rb-maptoggle--list {
  position: absolute;
  top: 14px;
  bottom: auto;
  z-index: 4;
}

@media (min-width: 1081px) {
  .rb-maptoggle { display: none !important; }

  /* With a map on screen the search bar sticks under the header (the Zillow / Redfin
     layout), and the map fills exactly the space below both - so its bottom edge, the
     listing card and Google's controls are always inside the viewport, scrolled or not.
     --rb-searchbar-h is measured by board_v2_map.js. */
  body.rb-has-map .rb-searchbar {
    position: sticky;
    top: var(--header-h);
    z-index: 55;
  }

  .rb-split.has-map {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(42vw, 680px);
    align-items: start;
  }
  .rb-split.has-map .rb-split__map {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--rb-searchbar-h, 0px));
    height: calc(100vh - var(--header-h) - var(--rb-searchbar-h, 0px));
    border-left: 1px solid var(--color-border);
  }
  .rb-split.has-map .rb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1700px) {
  .rb-split.has-map .rb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  /* Full-screen map between the header and (on phones) the bottom bar, both of which stay
     usable: any menu item, Contact or Search there closes the map first (board_v2_map.js). */
  body.rb-map-open { overflow: hidden; }
  body.rb-map-open .rb-split__map {
    display: block;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 75;
  }
  body.rb-map-open .rb-maptoggle--list { display: inline-flex; }
  body.rb-map-open #rb-map-open { display: none; }
}

@media (max-width: 860px) {
  /* The Map button floats above the sticky bottom bar; the open map stops at its top edge. */
  #rb-map-open { bottom: calc(var(--mobilebar-h) + 16px + env(safe-area-inset-bottom)); }
  body.rb-map-open .rb-split__map { bottom: calc(var(--mobilebar-h) + env(safe-area-inset-bottom)); }
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1080px) {
  .rb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rb-nav { gap: 16px; }

  /* Tighter header: the logo shrinks so the nav keeps its room, and the agent's name
     truncates before either the logo or the nav is squeezed. */
  .rb-brandlogo { height: 36px; padding-left: 14px; }
  .rb-brandlogo__img { max-width: 120px; }
}

@media (max-width: 860px) {
  /* Mobile: the logo moves to the footer branding card. */
  .rb-brandlogo { display: none; }
  .rb-agentcard__logo--mobile { display: block; }

  .rb-nav { display: none; }
  .rb-burger { display: inline-flex; flex: none; }
  .rb-mobilebar { display: flex; }

  /* The brand block must be allowed to shrink, otherwise it holds the header wider than
     its content box and pushes the burger out under the UserWay launcher. A long agent
     or brokerage name truncates instead. */
  .rb-brand { flex: 0 1 auto; min-width: 0; }
  .rb-brand__text { min-width: 0; }
  .rb-brand__name,
  .rb-brand__company {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body { padding-bottom: calc(var(--mobilebar-h) + env(safe-area-inset-bottom)); }

  .rb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

  .rb-section { padding-top: 28px; }
  .rb-section__title { font-size: 1.5rem; }
  .rb-section--prose .rb-section__title { margin-bottom: 18px; }
  .rb-section__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rb-section__all { order: -1; display: none; }

  /* Filters collapse to a two-up grid so the text field keeps a usable width. */
  .rb-search { flex-wrap: wrap; padding: 10px var(--gutter); gap: 8px; }
  .rb-search__field--grow { flex: 1 0 100%; }
  .rb-search__field { flex: 1 1 calc(50% - 4px); }
  .rb-search select { min-width: 0; }
  .rb-search__submit { flex: 1 1 100%; }

  .rb-contact__inner { grid-template-columns: 1fr; gap: 30px; padding: 32px var(--gutter); }
  .rb-contact__col + .rb-contact__col {
    padding-left: 0;
    padding-top: 30px;
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }

  .rb-footer__legal { flex-wrap: wrap; }
}

/* No offset is applied to the UserWay launcher: this page loads it with
   data-position 1, which anchors it top-right, so it no longer collides with the
   sticky mobile bar. Setting `bottom` on it would stretch its fixed wrapper into a
   tall invisible column down the right edge that swallows taps on the cards. */

@media (max-width: 520px) {
  .rb-grid { grid-template-columns: 1fr; }
  .rb-brand__photo { width: 34px; height: 34px; }
  .rb-brand__name { font-size: 1.1rem; }
  .rb-burger__label { display: none; }
  .rb-field-row { grid-template-columns: 1fr; }

  /* The branding card is identical on phones. In particular the agent photo keeps its
     120px cap - stretching a headshot to full width is exactly what the single
     property website avoids, and this card is meant to match it. */
  .rb-agentcard { padding: 20px 18px 22px; }
}

/* =============================================================================
   ALTERNATE THEMES

   Applied as a body class via ?rb_theme=<name>. Each one only restates tokens,
   never layout, so a new palette is additive and cannot regress the default.
   ============================================================================= */

/* Cool, contemporary: navy and a clear blue, geometric sans throughout. */
.rb-theme-modern {
  --brand-accent-1: #2f6fed;
  --brand-accent-1-rgb: 47, 111, 237;
  --brand-accent-2: #17408b;
  --brand-accent-2-rgb: 23, 64, 139;
  --brand-accent-3: #0f1b2d;
  --brand-accent-3-rgb: 15, 27, 45;
  --brand-off-white: #f5f7fa;
  --font-headings: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
}

/* Warm and organic: terracotta over a sand ground. */
.rb-theme-warm {
  --brand-accent-1: #c2703d;
  --brand-accent-1-rgb: 194, 112, 61;
  --brand-accent-2: #8a4b2a;
  --brand-accent-2-rgb: 138, 75, 42;
  --brand-accent-3: #2b2420;
  --brand-accent-3-rgb: 43, 36, 32;
  --brand-off-white: #faf5ef;
}

/* Monochrome: no accent hue at all, maximum restraint. */
.rb-theme-mono {
  --brand-accent-1: #6b7280;
  --brand-accent-1-rgb: 107, 114, 128;
  --brand-accent-2: #374151;
  --brand-accent-2-rgb: 55, 65, 81;
  --brand-accent-3: #111418;
  --brand-accent-3-rgb: 17, 20, 24;
  --brand-off-white: #f6f7f8;
}

/* =============================================================================
   CUSTOM LINKS (Link-in-Bio)
   Square photo cards, above the listings on the overview and in full under #links.
   ============================================================================= */

.rb-linkcard__media { position: relative; aspect-ratio: 1 / 1; background: var(--color-surface-alt); }
.rb-linkcard__media .rb-card__photo { position: absolute; inset: 0; }

/* A muted photo glyph for links without a photo. */
.rb-linkcard__placeholder {
  position: absolute;
  inset: 0;
  background-color: var(--color-surface-alt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4acb8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 8h.01'/%3E%3Cpath d='M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z'/%3E%3Cpath d='M3 16l5-5c.928-.893 2.072-.893 3 0l5 5'/%3E%3Cpath d='M14 14l1-1c.928-.893 2.072-.893 3 0l3 3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34%;
}

.rb-linkcard__headline {
  margin: 0 0 6px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.rb-linkcard__host {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: .78rem;
  color: var(--color-text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rb-linkcard__host svg { flex: 0 0 auto; width: 13px; height: 13px; }

.rb-searchbar[hidden],
.rb-mobilebar__btn[hidden] { display: none !important; }

/* Link cards are small squares; two to a row still reads well on a phone. */
@media (max-width: 520px) {
  .rb-grid--links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rb-grid--links .rb-card__body { padding: 10px 11px 8px; }
  .rb-linkcard__headline { font-size: .9rem; }
}