/* Public site styles. Colours, font, logo and pattern are the Brand Guide's
   (Settings → Brand Guide): includes/header.php writes them over these
   defaults, so nothing here is one brand's. */

:root {
  --brand-primary: #6a1011;
  --brand-primary-dark: #77151a;
  --brand-accent: #b2a37c;
  --brand-accent-dark: #998862;
  --brand-light: #f7f6f2;
  --brand-white: #ffffff;
  --brand-grey: #424242;
  --brand-grey-mid: #636363;
  --brand-grey-light: #848484;
  --brand-dark: #10100f;
  --brand-black: #000000;
  --brand-font: 'Montserrat', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --brand-font-body: var(--brand-font);   /* Brand Guide → Body text (2026-10-14); the main font until one is chosen */
  /* The full logo and the pattern as MASKS: any colour paints through their
     shapes, so one file serves every background. */
  --brand-logo: url('../img/brand/logo-white.svg');
  --brand-pattern: url('../img/brand/pattern-white.svg');
  --bsr-container: 1500px;
  --bsr-ease: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --bsr-radius: 10px; /* shared corner radius for photo cards — change once here to update all of them */
  /* The page's ground and what stands out from it (Andre, 2026-10-13): the page on the light
     colour, so the listing cards and boxes on it can be white and stand out. A band or card
     that was light on the old white page is white now; a section that painted itself white
     shows the page. A theme sets its own (theme-gaggi.css). */
  --bsr-page: var(--brand-light);
  --bsr-band: var(--brand-white);
  /* Shadows and dimmed pages: the dark slot, and black in dark mode (below). */
  --bsr-shade: var(--brand-dark);
  /* The light-mode colours, taken here on <html> before dark mode changes them on <body> (below). */
  --L-primary: var(--brand-primary); --L-primary-dark: var(--brand-primary-dark);
  --L-accent: var(--brand-accent); --L-accent-dark: var(--brand-accent-dark);
  --L-light: var(--brand-light); --L-white: var(--brand-white); --L-dark: var(--brand-dark);
  --L-grey: var(--brand-grey); --L-grey-mid: var(--brand-grey-mid); --L-grey-light: var(--brand-grey-light);
  --L-tint: var(--brand-tint); --L-page: var(--bsr-page); --L-band: var(--bsr-band);
}

/* ---------- Light and dark (2026-10-15) ----------
   <html data-theme="dark"> is set before the page draws (includes/header.php) and by the switch (site.js).
   The page's light parts go dark: the Brand Guide's slots take dark values on <body>, so text, grounds,
   cards, lines and panels follow without a rule each (Andre's palettes: black, Candle Wax and gold here; a
   theme sets its own, theme-gaggi.css; the Brand Guide's Dark mode colours, written by ag_brand_css(),
   override both). What was designed to sit on photos or dark bands keeps the light-mode colours: the header
   (it measures what is behind it, site.js), card photos, the listing's photo, maps with their pins (Google's
   light map in both modes, Andre 2026-10-15), the footer, the side menu and the photo viewer. Their menus are cards on the page again. The homepage theme (body.gg-page) is dark by
   design and the dashboard's frame keeps the dashboard's. */
html[data-theme="dark"] body:not(.gg-page, .is-staff-frame),
html[data-theme="dark"] :is(.bsr-acct-menu, .bsr-nav-dropdown-menu-inner, .bsr-dl-contact .bsr-inquiry-card),
html:not([data-theme="dark"]) [data-bsr-dark], html[data-theme="dark"] body.gg-page [data-bsr-dark] {
  --brand-primary: #b2a37c; --brand-primary-dark: #c4b68f;   /* gold takes the merlot's jobs: merlot is 1.5:1 on black */
  --brand-accent: #b2a37c; --brand-accent-dark: #c9bc96;
  --brand-light: #121110; --brand-white: #1c1b18; --brand-dark: #f7f6f2;
  --brand-grey: #bdb8ad; --brand-grey-mid: #a39e94; --brand-grey-light: #8d887e;
  --brand-tint: var(--brand-grey-light);
  --bsr-page: var(--brand-light); --bsr-band: var(--brand-white); --bsr-shade: #000;
  color-scheme: dark;
}
:is(html[data-theme="dark"], [data-bsr-dark]) :is(.bsr-header, .bsr-listing-card .photo, .bsr-prop-hero, .leaflet-container, .bsr-footer, .bsr-offcanvas, .bsr-lb,
  .bsr-hero, .bsr-hood-hero, .bsr-dev-hero, .bsr-dl-hero, .bsr-stats-banner, .bsr-work, .bsr-testimonials, .bsr-hv, .bsr-hood, .bsr-team-card .photo,
  .bsr-dl-strip-sec, .bsr-dl-film-box, .bsr-dl-contact),
html[data-theme="dark"] body:not(.gg-page, .is-staff-frame) [data-bsr-dark] {
  --brand-primary: var(--L-primary); --brand-primary-dark: var(--L-primary-dark);
  --brand-accent: var(--L-accent); --brand-accent-dark: var(--L-accent-dark);
  --brand-light: var(--L-light); --brand-white: var(--L-white); --brand-dark: var(--L-dark);
  --brand-grey: var(--L-grey); --brand-grey-mid: var(--L-grey-mid); --brand-grey-light: var(--L-grey-light);
  --brand-tint: var(--L-tint); --bsr-page: var(--L-page); --bsr-band: var(--L-band); --bsr-shade: var(--L-dark);
  /* worked out on a parent from the dark values: again from these */
  --card-ink: color-mix(in srgb, var(--brand-dark) 88%, var(--brand-white));
  --ps-line: color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent)));
  color-scheme: light;
}
/* A dark section (the editor's Dark section switch, includes/sections.php, Andre 2026-10-17): data-bsr-dark on a
   section's wrapper. On the light page it takes the dark values above, so its words, cards, lines and buttons
   follow, and what keeps its light colours in dark mode keeps them in it too (card photos, maps). When a visitor
   picks dark mode it turns light, so it still stands out (the keep-scope above). The Gaggi homepage has no dark
   mode: there it stays dark. Its ground is the page colour it now has; a section's own background wins (:where). */
:where([data-bsr-dark]) { background-color: var(--bsr-page); color: var(--brand-dark); }
/* The switch (in the menus only, Andre 2026-10-15): a moon in light mode, a sun in dark. */
[data-bsr-mode] .is-sun, html[data-theme="dark"] [data-bsr-mode] .is-moon { display: none; }
html[data-theme="dark"] [data-bsr-mode] .is-sun { display: revert; }
/* In the side menu, under the social links, in its small capitals (the Gaggi menu has its own, sections.php). */
.bsr-offcanvas-mode {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-white);
  transition: color var(--bsr-ease);
}
.bsr-offcanvas-mode:hover { color: var(--brand-accent); }
.bsr-offcanvas-mode svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Gold buttons keep dark words: gold is light enough for them on either ground. */
html[data-theme="dark"] .bsr-btn.accent-solid { color: var(--brand-light); }
/* Headshots on the dark mode's card colour (Andre, 2026-10-15; gold tried and dropped): an agent's photo, the
   team's cards, More From Our Team. --D-band is taken on <body>, so the team's cards, which keep their light
   colours for the hover over the photo, still get the dark one. */
html[data-theme="dark"] body, html:not([data-theme="dark"]) [data-bsr-dark] { --D-band: var(--bsr-band); }
:is(html[data-theme="dark"], [data-bsr-dark]) :is(.bsr-agent-photo, .bsr-agent-row-card .photo, .bsr-team-card .photo) { background-color: var(--D-band); }
html[data-theme="dark"] body:not(.gg-page) [data-bsr-dark] :is(.bsr-agent-photo, .bsr-agent-row-card .photo, .bsr-team-card .photo) { background-color: var(--bsr-band); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--brand-font);
  color: var(--brand-dark);
  background: var(--bsr-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* full-bleed decorative elements (e.g. .bsr-agent-mono) intentionally extend past the viewport edge */
}
/* Inside the dashboard's MLS Search (bsr_staff_frame(), body.is-staff-frame, 2026-10-13): no
   ground of its own, so the search sits on the dashboard's. Over a theme's page ground too. */
html body.is-staff-frame { background: transparent; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.bsr-container { max-width: var(--bsr-container); margin: 0 auto; padding: 0 32px; }
@media (max-width: 768.98px) { .bsr-container { padding: 0 40px; } }

.bsr-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-accent-dark);
  margin: 0 0 12px;
}
.bsr-heading {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--brand-dark);
}
.bsr-heading.on-dark { color: var(--brand-white); }
.bsr-rule {
  width: 56px;
  height: 3px;
  background: var(--brand-accent);
  margin: 18px 0 24px;
  border: none;
}
.bsr-rule.center { margin-left: auto; margin-right: auto; }
.bsr-body { font-size: 16px; color: var(--brand-grey); max-width: 640px; }
/* The text people read in the body font (Brand Guide → Body text; Andre, 2026-10-14: Montserrat is for headlines,
   not for reading): paragraphs, quotes, a section's text, descriptions and blog posts, their lists too. Headings,
   buttons, menus, labels, prices and the facts tables keep the main font, inside that text as well. */
p, blockquote, figcaption, .bsr-body, .bsr-article-body, .bsr-tl-body { font-family: var(--brand-font-body); }
:is(p, blockquote, .bsr-body, .bsr-article-body, .bsr-tl-body) :is(h1, h2, h3, h4, h5, h6, button, .bsr-btn, .bsr-heading) { font-family: var(--brand-font); }
.bsr-body.on-dark { color: rgba(255,255,255,.82); }
.bsr-body.center { margin-left: auto; margin-right: auto; }
/* "Larger" from the dashboard's rich boxes: a fifth bigger than the words around it. */
.bsr-lg { font-size: 1.2em; }

.bsr-btn {
  display: inline-block;
  padding: 15px 34px;
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--bsr-radius);   /* rounded corners on every button (Andre, 2026-10-16; the Gaggi theme keeps its 5px) */
  transition: background var(--bsr-ease), color var(--bsr-ease), border-color var(--bsr-ease);
}
.bsr-btn:hover { background: var(--brand-primary); color: var(--brand-white); }
.bsr-btn.solid { background: var(--brand-primary); color: var(--brand-white); }
.bsr-btn.solid:hover { background: var(--brand-primary-dark); }
.bsr-btn.on-dark { border-color: var(--brand-white); color: var(--brand-white); }
.bsr-btn.on-dark:hover { background: var(--brand-white); color: var(--brand-dark); }
.bsr-btn.accent { border-color: var(--brand-accent); color: var(--brand-accent); }
.bsr-btn.accent:hover { background: var(--brand-accent); color: var(--brand-dark); }
.bsr-btn.accent-border { border-color: var(--brand-accent); }

/* ---------- Header / Nav ---------- */
.bsr-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: 183px; /* 65px top offset + 118px monogram height, matches the fixed-position logo/menu anchors below */
  transition: background var(--bsr-ease), box-shadow var(--bsr-ease);
  /* The header box itself is empty everywhere except the logo and the nav
     cluster — without this, its full-width 183px band blocks clicks/hovers
     on whatever sits behind it (hero video/image edit chip, back-links,
     etc.) even where there's visibly nothing here. Only its two real
     interactive children opt back in below. */
  pointer-events: none;
}
.bsr-logo, .bsr-header-right { pointer-events: auto; }
.bsr-header.scrolled { }
.bsr-logo { position: absolute; top: 35px; left: 65px; width: 100px; display: block; }
.bsr-logo img { width: 100%; height: auto; display: block; }
.bsr-logo .logo-dark { display: none; }
.bsr-header.scrolled .logo-light { display: none; }
.bsr-header.scrolled .logo-dark { display: block; }
.bsr-header-right { position: absolute; top: 65px; right: 65px; display: flex; align-items: center; gap: 30px; }
@media (max-width: 768.98px) {
  /* Match .bsr-container's 20px mobile padding so the logo/menu icon line
     up with the page content below instead of sitting further out at 65px.
     Logo drops from 100px to 80px on phones. */
  .bsr-logo { left: 20px; width: 80px; }
  .bsr-header-right { right: 20px; }
}
/* The property search runs the window's width (28px sides, 16px under 981px): the header's logo and menu sit on the
   same edges there (Andre, 2026-10-16: they stopped short of it). The menu button's bars are 4px inside it. */
body:has(.bsr-ps-app) .bsr-logo { left: 28px; }
body:has(.bsr-ps-app) .bsr-header-right { right: 24px; }
@media (max-width: 980.98px) {
  body:has(.bsr-ps-app) .bsr-logo { left: 16px; }
  body:has(.bsr-ps-app) .bsr-header-right { right: 12px; }
}
/* The whole logo instead of the monogram (Websites → Brokerage Site → Settings,
   2026-10-09): wider and shorter, its middle on the menu's line. */
.bsr-logo.is-full { top: 50px; width: 220px; }
@media (max-width: 768.98px) { .bsr-logo.is-full { top: 64px; width: 160px; } }   /* the phones' 44px menu button centres at 87px */
.bsr-header-links { display: flex; align-items: center; gap: 0; }
.bsr-header-links > *:not(:first-child) { margin-left: 14px; }
.bsr-header-links > *:not(:first-child)::before {
  content: '/'; margin-right: 14px; font-weight: 400; opacity: 0.5;
}
.bsr-header-links a {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1; color: var(--brand-white); transition: color var(--bsr-ease);
}
.bsr-header.scrolled .bsr-header-links a { color: var(--brand-dark); }
.bsr-header-links a:hover { color: var(--brand-accent); }
/* Hover on every header (Andre, 2026-10-16: none showed on light pages, where the dark-words rules outranked it):
   gold over a dark top, merlot over a light one (gold is too faint on Candle Wax). Links, drop-downs, Sign in, the
   account icon. */
.bsr-header :is(.bsr-header-links a, .bsr-nav-dropdown-trigger, .bsr-acct-in, .bsr-acct-btn):is(:hover, :focus-visible),
.bsr-header :is(.bsr-nav-dropdown.open .bsr-nav-dropdown-trigger, .bsr-acct.open .bsr-acct-btn) { color: var(--brand-accent); }
.bsr-header:is(.scrolled, .on-light) :is(.bsr-header-links a, .bsr-nav-dropdown-trigger, .bsr-acct-in, .bsr-acct-btn):is(:hover, :focus-visible),
.bsr-header:is(.scrolled, .on-light) :is(.bsr-nav-dropdown.open .bsr-nav-dropdown-trigger, .bsr-acct.open .bsr-acct-btn) { color: var(--brand-primary); }
@media (max-width: 900.98px) { .bsr-header-links { display: none; } }
.bsr-header-links.is-squeezed { display: none; }   /* too long for the window beside the logo (site.js fitNav) */
/* A slash after the last link too, before Sign in or the account circle (Andre, 2026-10-16), as between the links:
   14px either side (the row's 30px gap less 16). Drawn on the account, so it takes its colour on every header, and
   gone whenever the links are. */
@media (min-width: 901px) {
  .bsr-header-links:not(.is-squeezed) + .bsr-acct { display: flex; align-items: center; }
  .bsr-header-links:not(.is-squeezed) + :is(.bsr-acct, .bsr-acct-in)::before {
    content: '/'; margin: 0 14px 0 -16px; font-size: 16px; font-weight: 400; letter-spacing: 0; opacity: .5;
  }
  .bsr-header-links:not(.is-squeezed) + .bsr-acct-in::before { margin-right: 6px; }   /* its own 8px gap makes 14 */
}

.bsr-nav-dropdown { position: relative; color: var(--brand-white); transition: color var(--bsr-ease); }
.bsr-header.scrolled .bsr-nav-dropdown { color: var(--brand-dark); }
.bsr-nav-dropdown-trigger {
  /* inline-flex, not flex — a plain "flex" makes the button a block-level
     box with no declared width, which collapses/wraps its own content
     instead of sizing to it. inline-flex sizes to content like a normal
     inline element while still letting the icon align with align-items. */
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none; margin: 0; padding: 0;
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1; color: var(--brand-white); cursor: pointer; transition: color var(--bsr-ease);
}
.bsr-header.scrolled .bsr-nav-dropdown-trigger { color: var(--brand-dark); }
.bsr-nav-dropdown-trigger:hover { color: var(--brand-accent); }
.bsr-nav-dropdown-trigger svg { transition: transform var(--bsr-ease); }
.bsr-nav-dropdown.open .bsr-nav-dropdown-trigger svg { transform: rotate(180deg); }
.bsr-nav-dropdown-menu {
  /* Flush against the trigger (no gap) — an absolutely-positioned menu
     doesn't extend the parent's hoverable box, so any gap here becomes a
     dead zone that drops :hover before the mouse reaches the menu. */
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 20px; margin-top: -1px;
  opacity: 0; pointer-events: none; transition: opacity var(--bsr-ease);
  z-index: 10;
}
/* Round corners, a very faint line between the links, more room in each (Andre: GG 2026-10-15, Best Sellers 2026-10-16). */
.bsr-nav-dropdown-menu-inner {
  overflow: hidden; background: var(--brand-white); min-width: 220px; padding: 6px 0; border-radius: 16px;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--bsr-shade) 16%, transparent);
}
.bsr-nav-dropdown.open .bsr-nav-dropdown-menu,
.bsr-nav-dropdown:hover .bsr-nav-dropdown-menu { opacity: 1; pointer-events: auto; }
.bsr-nav-dropdown-menu-inner a {
  display: block; padding: 14px 24px; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--brand-dark);
}
.bsr-nav-dropdown-menu-inner a:hover { background: var(--brand-light); color: var(--brand-primary); }
.bsr-nav-dropdown-menu-inner a + a { border-top: 1px solid color-mix(in srgb, var(--brand-dark) 8%, transparent); }

.bsr-menu-btn {
  display: flex; align-items: center;
  background: none; border: none; color: var(--brand-white); padding: 4px;
}
.bsr-header.scrolled .bsr-menu-btn { color: var(--brand-dark); }
.bsr-menu-btn .bars { width: 34px; height: 26px; position: relative; }
.bsr-menu-btn .bars span {
  position: absolute; left: 0; right: 0; height: 4px; background: currentColor;
  transition: transform var(--bsr-ease), opacity var(--bsr-ease);
}
/* ---------- Header over a LIGHT hero photo ----------
   .scrolled already flips the header dark once a solid background slides in.
   .on-light is the same treatment triggered by a different cause: the photo
   sitting behind the header is bright enough that white furniture vanishes
   into it. Set by the sampler in site.js. */
.bsr-header.on-light .bsr-header-links a,
.bsr-header.on-light .bsr-nav-dropdown,
.bsr-header.on-light .bsr-nav-dropdown-trigger,
.bsr-header.on-light .bsr-menu-btn { color: var(--brand-dark); }
.bsr-header.on-light .logo-light { display: none; }
.bsr-header.on-light .logo-dark  { display: block; }

/* The visitor's account (includes/account.php, 2026-10-11): "Sign in", or their
   initial with a small menu. In the header's colour, as the links and the menu button. */
.bsr-acct-in {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  color: var(--brand-white); transition: color var(--bsr-ease);
}
.bsr-acct-in:hover { color: var(--brand-accent); }
.bsr-acct { position: relative; color: var(--brand-white); transition: color var(--bsr-ease); }
/* The account: the person icon alone, no circle (Andre, 2026-10-16; includes/account.php): a fine line signed out,
   with a tick signed in; gold on hover and while the card is open (no solid one: Andre did not like it). */
.bsr-acct-btn {
  display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0;
  background: none; border: 0; color: inherit; cursor: pointer;
}
.bsr-acct-btn:hover, .bsr-acct.open .bsr-acct-btn { color: var(--brand-accent); }
.bsr-acct-i { display: block; flex: none; }
/* Sized with the menu button beside it (Andre, 2026-10-16: tiny next to the bars). The Gaggi homepage's bars are much
   bigger (gg_header), so its icon is too; beside "Sign in" a little smaller than alone. */
.bsr-header .bsr-acct-btn .bsr-acct-i { width: 28px; height: 28px; }
.bsr-header .bsr-acct-in .bsr-acct-i { width: 22px; height: 22px; }
.gg-header .bsr-acct-btn { width: 48px; height: 48px; }
.gg-header .bsr-acct-btn .bsr-acct-i { width: 38px; height: 38px; stroke-width: 2; }   /* a heavier line, as the bars are */
.bsr-header .bsr-acct-btn .bsr-acct-i { stroke-width: 1.8; }
.gg-header .bsr-acct-in .bsr-acct-i { width: 26px; height: 26px; }
.bsr-header.scrolled .bsr-acct-in, .bsr-header.on-light .bsr-acct-in,
.bsr-header.scrolled .bsr-acct, .bsr-header.on-light .bsr-acct { color: var(--brand-dark); }
/* The menu as a card (Andre, 2026-10-14): the visitor's initial, name and address at the top; Saved homes and
   Saved searches with their counts, My account; Sign out under a line. Rounded, the cards' shadow. */
.bsr-acct-menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 20; width: 280px; padding: 8px;
  border-radius: 14px; background: var(--brand-white); color: var(--brand-dark); text-align: left;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--bsr-shade) 20%, transparent);
  font-size: 14px; letter-spacing: 0; text-transform: none;
}
.bsr-acct-who { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; margin-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 80%, var(--brand-tint, var(--brand-accent))); }
.bsr-acct-av {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-primary); color: var(--brand-white); font-size: 16px; font-weight: 700; line-height: 1;
}
.bsr-acct-id { display: grid; gap: 2px; min-width: 0; }
.bsr-acct-id b { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.bsr-acct-id span { font-size: 12.5px; color: var(--brand-grey); overflow-wrap: anywhere; }
.bsr-acct-links { display: grid; }
.bsr-acct-link, .bsr-acct-out {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--brand-dark); text-align: left;
}
.bsr-acct-link > span, .bsr-acct-out > span { flex: 1; }
.bsr-acct-link:hover, .bsr-acct-out:hover, .bsr-acct-link:focus-visible, .bsr-acct-out:focus-visible { background: var(--brand-light); color: var(--brand-dark); }
.bsr-acct-out { position: relative; margin-top: 13px; color: var(--brand-grey); font-weight: 500; }
.bsr-acct-out::before {   /* the line between the pages and Sign out */
  content: ''; position: absolute; left: 10px; right: 10px; top: -7px; height: 1px;
  background: color-mix(in srgb, var(--brand-light) 80%, var(--brand-tint, var(--brand-accent)));
}
.bsr-acct-ico { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bsr-acct-n {
  flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-grid; place-items: center;
  background: var(--brand-light); color: var(--brand-dark); font-size: 12px; font-style: normal; font-weight: 700; line-height: 1;
}
.bsr-acct-n[hidden] { display: none; }
.bsr-acct-link:hover .bsr-acct-n { background: var(--brand-white); }

/* My Account's pages (saved-homes.php, saved-searches.php, account.php, 2026-10-14): tabs under the title, then
   the page's own. */
.bsr-acct-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 30px; }
.bsr-acct-tabs a {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px; border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--brand-light) 60%, var(--brand-grey-light, var(--brand-grey))); color: var(--brand-dark);
  font-size: 14px; font-weight: 600; transition: background var(--bsr-ease), border-color var(--bsr-ease);
}
.bsr-acct-tabs a:hover { border-color: var(--brand-dark); }
.bsr-acct-tabs a.is-on { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-white); }
.bsr-acct-tabs a.is-on .bsr-acct-n { background: color-mix(in srgb, var(--brand-white) 18%, transparent); color: var(--brand-white); }
@media (max-width: 560px) {
  .bsr-acct-tabs { gap: 6px; }
  .bsr-acct-tabs a { height: 40px; padding: 0 12px; gap: 6px; font-size: 13px; }
  .bsr-acct-tabs .bsr-acct-ico { display: none; }
}
.bsr-acct-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .bsr-acct-grid { grid-template-columns: 1fr; } }
.bsr-acct-card {
  padding: 28px 30px; border-radius: 16px; background: var(--brand-white);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--bsr-shade) 7%, transparent);
}
.bsr-acct-card .bsr-field { margin-bottom: 22px; }
.bsr-acct-card .bsr-field input[readonly] { color: var(--brand-grey); }
.bsr-acct-h { margin: 0 0 22px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-grey); }
.bsr-acct-note { margin: -12px 0 0; font-size: 13px; color: var(--brand-grey); }
.bsr-acct-go { margin-top: 24px; }
.bsr-acct-card .bsr-body { max-width: none; }
/* Saved searches: a card each, what it finds on the left, its controls on the right. */
.bsr-ss-list { display: grid; gap: 16px; margin-top: 30px; }
.bsr-ss {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 30px; align-items: center; padding: 22px 26px;
  border-radius: 16px; background: var(--brand-white); box-shadow: 0 10px 28px color-mix(in srgb, var(--bsr-shade) 7%, transparent);
  transition: opacity .4s ease;
}
.bsr-ss.is-busy { opacity: .6; }
.bsr-ss.is-gone { opacity: .35; pointer-events: none; }
.bsr-ss-name { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.3; }
.bsr-ss-what { margin: 0 0 6px; font-size: 14px; color: var(--brand-dark); }
.bsr-ss-state { margin: 0; font-size: 13px; color: var(--brand-grey); }
.bsr-ss.is-paused .bsr-ss-state, .bsr-ss.is-pending .bsr-ss-state { color: var(--brand-primary); font-weight: 600; }
.bsr-ss-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.bsr-ss-freq { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--brand-grey); }
.bsr-ss-freq select, .bsr-ss-btn {
  height: 40px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--brand-light) 60%, var(--brand-grey)); border-radius: 8px;
  background: var(--brand-white); font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--brand-dark); cursor: pointer;
}
.bsr-ss-btn:hover, .bsr-ss-freq select:hover { border-color: var(--brand-dark); }
.bsr-ss-btn.is-del { color: var(--brand-primary); }
.bsr-ss-btn.is-view { display: inline-flex; align-items: center; background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-white); text-decoration: none; }   /* the row's height, not a page button (Andre, 2026-10-14) */
.bsr-ss-btn.is-view:hover { background: color-mix(in srgb, var(--brand-dark) 82%, var(--brand-white)); }
.bsr-ss .bsr-form-msg { grid-column: 1 / -1; margin: 0; }
@media (max-width: 860px) {
  .bsr-ss { grid-template-columns: 1fr; }
  .bsr-ss-side { justify-content: flex-start; }
}
.bsr-saved-page .bsr-saved-grid { margin-top: 36px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }   /* Saved homes (saved-homes.php) */
@media (max-width: 1280px) { .bsr-saved-page .bsr-saved-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980.98px) { .bsr-saved-page .bsr-saved-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .bsr-saved-page .bsr-saved-grid { grid-template-columns: 1fr; } }
.bsr-saved-go { margin-top: 24px; }
@media (max-width: 900.98px) { .bsr-acct-in span { display: none; } }   /* phones: the person icon alone, beside the menu button */

.bsr-menu-btn .bars span:nth-child(1) { top: 0; }
.bsr-menu-btn .bars span:nth-child(2) { top: 10.5px; }
.bsr-menu-btn .bars span:nth-child(3) { top: 22px; }

.bsr-offcanvas {
  position: fixed; inset: 0; z-index: 700;
  background: var(--brand-dark);
  opacity: 0; pointer-events: none;
  overflow-y: auto;
  transition: opacity var(--bsr-ease);
}
.bsr-offcanvas.dark-pattern::before {
  content: ''; position: absolute; inset: 0;
  background-color: var(--brand-accent);
  -webkit-mask: var(--brand-pattern) center / cover no-repeat;
  mask: var(--brand-pattern) center / cover no-repeat; opacity: 0.07;
}
/* phones render the pattern smaller/denser (cover on a narrow screen), which
   washes it out — lift the opacity so the texture stays visible */
@media (max-width: 768.98px) {
  .bsr-offcanvas.dark-pattern::before { opacity: 0.10; }
}
body.bsr-nav-open .bsr-offcanvas { opacity: 1; pointer-events: auto; }
.bsr-offcanvas-close {
  position: fixed; top: 22px; right: 24px; z-index: 710;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: var(--brand-white);
}
.bsr-offcanvas-close svg { width: 30px; height: 30px; }
.bsr-offcanvas-close:hover { color: var(--brand-accent); }
.bsr-offcanvas-inner {
  position: relative; z-index: 1; text-align: left;
  min-height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 100px 24px 60px;
}
/* The columns, then the social row under them, left edges aligned. */
.bsr-offcanvas-body { display: flex; flex-direction: column; align-items: flex-start; }
/* Under the rule: the social links, and light / dark at the far right of their line (2026-10-15). */
.bsr-offcanvas-foot { display: flex; align-items: center; gap: 20px; width: 100%;
                      margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.14); }
.bsr-offcanvas-social { display: flex; flex-wrap: wrap; gap: 20px; }
.bsr-offcanvas-nav { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.bsr-offcanvas-col { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; width: 100%; }
@media (min-width: 901px) {
  .bsr-offcanvas-nav { flex-direction: row; gap: 100px; align-items: flex-start; }
  .bsr-offcanvas-col { width: auto; min-width: 280px; }
}
.bsr-offcanvas-group { width: 100%; }
.bsr-offcanvas-col > a,
.bsr-offcanvas-group-label {
  font-size: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--brand-white); background: none; border: none;
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  width: 100%; transition: color var(--bsr-ease);
}
.bsr-offcanvas-col > a:hover { color: var(--brand-accent); }
.bsr-offcanvas-sub {
  /* Always expanded — no click-to-toggle. */
  display: block; margin-top: 12px;
}
.bsr-offcanvas-sub > div { display: flex; flex-direction: column; gap: 12px; }
.bsr-offcanvas-sub a {
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-accent);
}
.bsr-offcanvas-sub a:hover { color: var(--brand-white); }
@media (max-width: 640px) {
  .bsr-offcanvas-col > a, .bsr-offcanvas-group-label { font-size: 18px; }
}

/* ---------- Hero ---------- */
.bsr-hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: flex-start;
  text-align: left;
  background-size: cover;
  background-position: center;
  color: var(--brand-white);
}
.bsr-hero::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bsr-shade) 35%, transparent) 0%, color-mix(in srgb, var(--bsr-shade) 60%, transparent) 100%);
}
/* A background color chosen via the page editor doesn't need the dark scrim
   meant for photo readability — it was muddying any solid color picked
   (e.g. yellow rendering as dark brown). */
.bsr-hero.bg-color-only::before { background: color-mix(in srgb, var(--bsr-shade) 15%, transparent); }
/* YouTube background video — scaled to fully cover the hero. Sits above the
   fallback background image, below the gradient overlay and the text. */
.bsr-hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bsr-hero-video iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;          /* 16:9 relative to width */
  min-width: 177.78vh; min-height: 100vh; /* 16:9 relative to height */
  /* Scaled past the edges on purpose: YouTube draws its title bar along the
     top of the player and its controls along the bottom, and neither can be
     switched off in the embed. Cropping about 13% off each edge keeps them
     outside the hero, at the cost of a slightly tighter framing. */
  transform: translate(-50%, -50%) scale(1.35);
  border: 0; pointer-events: none;
}
/* On phones, skip the YouTube embed specifically (iframe autoplay is
   unreliable there) and show the poster image instead. */
@media (max-width: 768.98px) { .bsr-hero-video { display: none; } }

/* Self-hosted <video> background — muted+playsinline autoplay is reliable on
   phones, so this plays on every screen size (falls back to poster otherwise). */
.bsr-hero-video-native {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.bsr-hero-inner { position: relative; z-index: 2; max-width: 700px; margin: 0 65px; }
@media (max-width: 768.98px) { .bsr-hero-inner { margin: 0 24px; } }
.bsr-hero h1 { font-size: clamp(34px, 6.5vw, 85px); margin: 0 0 12px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; white-space: normal; }
@media (max-width: 640px) { .bsr-hero h1 { white-space: normal; } }
.bsr-hero p { font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 34px; color: rgba(255,255,255,.88); }
/* The property search in the hero (Andre, 2026-10-16; sections/hero.php): a white bar with the box and its button,
   rounded like the site's buttons. The hero keeps light colours in dark mode, so the light values (--L-*). */
.bsr-hero-search {
  display: flex; align-items: center; gap: 8px; width: min(640px, calc(100vw - 48px)); margin: 0 0 26px;   /* the hero text box sizes to its content: cap by the window (24px sides on phones) */
  padding: 8px; box-sizing: border-box;
  border-radius: calc(var(--bsr-radius) + 6px); background: var(--L-white, #fff); box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.bsr-hs-box { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 8px 0 14px; color: var(--L-primary); cursor: text; }
.bsr-hs-box input {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; background: none;
  font-family: var(--brand-font-body, inherit); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--L-dark);
}
.bsr-hs-box input::placeholder { color: #7a7c80; }
.bsr-hs-box input::-webkit-search-cancel-button { display: none; }
.bsr-hero-search:focus-within { box-shadow: 0 24px 60px rgba(0, 0, 0, .28), 0 0 0 3px color-mix(in srgb, var(--L-accent) 70%, transparent); }
.bsr-hs-go {
  flex: none; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border: 0; border-radius: var(--bsr-radius);
  background: var(--L-primary); color: #fff; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transition: background .2s;
}
.bsr-hs-go:hover, .bsr-hs-go:focus-visible { background: var(--L-primary-dark); outline: 0; }
.bsr-hero-inner[style*="text-align:center"] .bsr-hero-search { margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  .bsr-hero-search { padding: 6px; gap: 6px; }
  .bsr-hs-box { height: 48px; padding: 0 4px 0 10px; gap: 8px; }
  .bsr-hs-go { height: 48px; padding: 0 16px; }
  .bsr-hs-go svg { display: none; }
}

/* ---------- Sections generic ---------- */
.bsr-section { padding: 200px 0; }
.bsr-section.tight { padding: 40px 0; }
/* A page that ends on a tight section still ends 200px above the footer (Andre, 2026-10-13); phones keep their 100px below. */
/* The last block, not only the last <section> (re-check 2 D6): a pattern band or the Gaggi header (divs) after it
   takes the gap's place, and a photo split ends on its photo, not on 200px of its colour. */
@media (min-width: 769px) { .bsr-section.tight:last-of-type:not(.bsr-split):not(:has(~ div.gg-sec)) { padding-bottom: 200px; } }
@media (max-width: 768.98px) { .bsr-section { padding: 200px 0; } .bsr-section.tight { padding: 0 0 100px; } }

/* Trust intro */
.bsr-trust-head { text-align: center; max-width: 760px; margin: 0 auto }

/* Know us split — the section itself is the grid (no .bsr-container wrapper)
   so the photo column bleeds all the way to the viewport edge; only the
   text column keeps the usual container-style side padding. */
.bsr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
/* Anchored at the top (Andre, 2026-10-13: a tall cut-out of a person lost his head when the box was
   wide and short): what the box cannot hold comes off the bottom. */
.bsr-split .photo { width: 100%; height: 100%; background-size: cover; background-position: center top; }
.bsr-split .copy { display: flex; flex-direction: column; justify-content: center; padding: 200px 32px; max-width: 640px; }
.bsr-split .copy p { white-space: pre-line; }
/* Photo on the right (photo_text, 2026-10-09): the text sits against the photo,
   96px from it, mirroring the photo-left layout, instead of at the window's edge. */
.bsr-split.is-photo-right .copy { justify-self: end; width: 100%; }
@media (max-width: 900.98px) {
  .bsr-split { grid-template-columns: 1fr; gap: 32px; }
  .bsr-split .photo { aspect-ratio: 4/5; }
  .bsr-split .copy { padding: 50px 40px 100px; max-width: none; } /* sides match .bsr-container mobile */
}

/* Stats banner */
.bsr-stats-banner {
  position: relative; background-size: cover; background-position: center;
  padding: 300px 0; text-align: center; color: var(--brand-white);
}
@media (max-width: 768.98px) { .bsr-stats-banner { padding: 200px 0; } }
.bsr-stats-banner::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--bsr-shade) 62%, transparent); }
.bsr-stats-banner.bg-color-only::before { background: color-mix(in srgb, var(--bsr-shade) 15%, transparent); }
.bsr-stats-banner .inner { position: relative; z-index: 1; }
/* Full horizontal logo closing out the stats band */
.bsr-stats-banner .inner::after {
  content: ''; display: block; height: 90px; margin-top: 170px;
  /* the logo SVG is used as a MASK — the background-color paints through
     its shape, so recoloring is just changing this one color */
  background-color: var(--brand-light); /* light on desktop */
  -webkit-mask: var(--brand-logo) center / contain no-repeat;
  mask: var(--brand-logo) center / contain no-repeat;
  opacity: .92;
}
/* desktop rhythm: heading→stats 170px, stats→logo 170px */
@media (max-width: 640px) {
  .bsr-stats-banner .inner::after { height: 69px; margin-top: 92px; background-color: var(--brand-accent); }
}
.bsr-stats-grid { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 0; margin-top: 170px; }
.bsr-stats-grid > * {
  /* column-reverse puts the label on top; flex-end packs from the TOP in a
     reversed column, so labels stay level while a figure counts at a smaller size. */
  flex: 1 1 100px; display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: center; gap: 10px;
  padding: 0 36px; position: relative;
  opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease;
}
.bsr-stats-grid.in-view > * { opacity: 1; transform: translateY(0); }
.bsr-stats-grid.in-view > *:nth-child(1) { transition-delay: 0s; }
.bsr-stats-grid.in-view > *:nth-child(2) { transition-delay: .15s; }
.bsr-stats-grid.in-view > *:nth-child(3) { transition-delay: .3s; }
.bsr-stats-grid.in-view > *:nth-child(4) { transition-delay: .45s; }
.bsr-stats-grid > *:not(:last-child)::after {
  content: ''; position: absolute; right: 0; top: 8%; bottom: 8%; width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand-accent) 50%, transparent), transparent);
}
.bsr-stat-value { font-size: 34px; font-weight: 600; color: var(--brand-accent); font-variant-numeric: tabular-nums; }
.bsr-stat-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 6px; color: rgba(255,255,255,.85); }
/* Fixed box at the full figure size, content centred in it: a figure counting
   at the smaller size, the stars and a settled figure all share one centre line. */
.bsr-stats-grid .bsr-stat-value { font-size: clamp(40px, 5vw, 55px); line-height: 1; height: clamp(40px, 5vw, 55px); display: flex; align-items: center; justify-content: center; white-space: nowrap; margin-top: 0; transition: font-size .25s ease; }
/* While a B/M/K stat streams its expanded digits ($612,480,193…), drop to
   smaller "working" type so the long figure fits its column — it pops back
   to full size when it settles on the compact label ($1B+). */
.bsr-stats-grid .bsr-stat-value.bsr-stat-counting { font-size: clamp(18px, 2.1vw, 34px); }
.bsr-stats-grid .bsr-stat-label { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; margin-top: 0; color: rgba(255,255,255,.65); }
/* Star rating: same line box as the figures so the columns stay level, smaller
   glyphs spaced apart, each popping in after the column has faded up. */
.bsr-stats-grid .bsr-stat-stars { gap: .3em; }
.bsr-star { display: inline-block; font-size: .6em; line-height: 1; opacity: 0; transform: scale(.2); }
.bsr-stats-grid.in-view .bsr-star { animation: bsr-star-pop .5s cubic-bezier(.34, 1.56, .64, 1) forwards; animation-delay: calc(.55s + var(--i) * .12s); }
@keyframes bsr-star-pop { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bsr-star { opacity: 1; transform: none; } .bsr-stats-grid.in-view .bsr-star { animation: none; } }
.bsr-stat-value[data-typewriter] { max-width: 100%; text-align: center; white-space: nowrap; } /* min-width set by site.js to the widest word */
.bsr-stat-value[data-typewriter]::after {
  content: '|'; margin-left: 3px; color: var(--brand-accent); animation: bsr-blink 1s step-end infinite;
}
@keyframes bsr-blink { 50% { opacity: 0; } }
@media (max-width: 640px) {
  /* heading→stats and stats→logo kept equal */
  .bsr-stats-grid { flex-direction: column; gap: 34px; margin-top: 92px; }
  .bsr-stats-grid > * { padding: 0; }
  .bsr-stats-grid > *:not(:last-child)::after { display: none; }
}

/* Testimonials */
.bsr-testimonials {
  position: relative; background-size: cover; background-position: center;
  padding: 200px 0; text-align: center; color: var(--brand-white); min-height: 950px;
  display: flex; align-items: center; justify-content: center;
}
.bsr-testimonials::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); }
.bsr-testimonials.bg-color-only::before { background: transparent; }
.bsr-testimonials .inner { position: relative; z-index: 1; max-width: 1050px; margin: 0 auto; }
.bsr-testimonials .mono { width: 95px; height: 95px; margin: 0 auto 28px; opacity: .3; }
.bsr-testimonials .mono img { width: 100%; }
.bsr-t-quote { font-size: 23px; line-height: 1.7; font-style: italic; min-height: 100px; }   /* 23px (Andre, 2026-10-16; was 33) */
@media (max-width: 768.98px) { .bsr-t-quote { font-size: 21px; } }
.bsr-t-author { margin: 22px 0 0; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-accent); }
.bsr-t-arrows { display: flex; justify-content: center; gap: 22px; margin-top: 32px; }
.bsr-t-arrows button { background: none; border: 1px solid rgba(255,255,255,.4); color: var(--brand-white); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.bsr-t-arrows button:hover { background: var(--brand-white); color: var(--brand-dark); }
.bsr-t-more { margin-top: 40px; text-align: center; }   /* Read more testimonials, under the arrows (2026-10-19) */
/* As a link, in the words of the homepage's Search button with its small arrow (Andre, 2026-10-19). */
.bsr-t-more-link {
  display: inline-flex; align-items: center; gap: 10px; color: var(--brand-white); text-decoration: none;
  font-family: var(--brand-font); font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; transition: color .2s;
}
.bsr-t-more-link:hover, .bsr-t-more-link:focus-visible { color: var(--brand-accent); }
.bsr-t-more-link svg { flex: none; transition: transform .2s; }
.bsr-t-more-link:hover svg { transform: translateX(3px); }
.bsr-t-empty { opacity: .7; font-style: italic; }

/* Buy/Sell split promo — mirrored photo+copy rows, photo bleeds toward and
   overlaps under the text column (copy sits on top, higher z-index). */
.bsr-buysell { padding: 300px 0; background-color: var(--bsr-band); }   /* the band that stands out from the page (re-check 2 D4, 2026-10-14) */
.bsr-buysell .bsr-container { display: flex; flex-direction: column; gap: 300px; }
.bsr-buysell-row { display: grid; grid-template-columns: 1fr 1.3fr; align-items: center; }
.bsr-buysell-row.reverse { grid-template-columns: 1.3fr 1fr; }
.bsr-buysell-row.reverse .bsr-buysell-copy { order: 2; padding: 40px; text-align: right; }
.bsr-buysell-row.reverse .bsr-buysell-buttons { justify-content: flex-end; }
.bsr-buysell-row.reverse .bsr-buysell-media { order: 1; margin-left: 0; margin-right: -100px; }
.bsr-buysell-copy {
  position: relative; z-index: 2; padding: 40px;
  /* Opaque so it fully covers whatever's in the photo behind it — the
     overlap should always look clean regardless of what that photo is,
     not depend on the edge of a specific image happening to be plain. */
}
/* The photo reaches 100px into the copy column (margin -100px below), so the
   copy keeps that strip clear on the photo side: text wraps before the photo
   instead of running under it at narrower widths. */
.bsr-buysell-row:not(.reverse) .bsr-buysell-copy { padding-right: 140px; }
.bsr-buysell-row.reverse .bsr-buysell-copy { padding-left: 140px; }
.bsr-buysell-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-accent-dark); margin: 10px 0 26px; }
/* A sentence or two under the line (2026-10-19), close under it and clear of the button. */
.bsr-buysell-text { max-width: 46ch; margin: -12px 0 32px; font-family: var(--brand-font-body); font-size: 16px; line-height: 1.7; color: var(--brand-grey); }
.bsr-buysell-text p { margin: 0 0 .6em; }
.bsr-buysell-text p:last-child { margin-bottom: 0; }
.bsr-buysell-row.reverse .bsr-buysell-text { margin-left: auto; }
.bsr-buysell-buttons { display: flex; gap: 24px; flex-wrap: wrap; }
.bsr-buysell-media { position: relative; z-index: 1; margin-left: -100px; }
.bsr-buysell-photo {
  height: 560px;
  background-color: var(--brand-light); background-size: cover; background-position: center;
  border-radius: var(--bsr-radius);
}
.bsr-buysell-pattern {
  position: relative; height: 64px; margin-top: 10px;   /* on the band's own colour */
}
.bsr-buysell-pattern::before {
  content: ''; position: absolute; inset: 0; background-color: var(--brand-accent);
  -webkit-mask: var(--brand-pattern) center / cover no-repeat;
  mask: var(--brand-pattern) center / cover no-repeat;
}
/* A theme's band (buy_sell.php, gaggigroup.com, Andre 2026-10-10): three whole rows of the
   monogram tile repeated across, in the dark, with room above and below so no motif is cut.
   --bsr-band-mask: its own name (re-check 2 D12; it was --bsr-band, the page's band colour). */
.bsr-buysell-pattern[style*="--bsr-band-mask"] { height: 88.5px; }
.bsr-buysell-pattern[style*="--bsr-band-mask"]::before {
  inset: 10px 0; background-color: var(--brand-dark); opacity: .2;   /* .2 (Andre, 2026-10-16) */
  -webkit-mask: var(--bsr-band-mask) 0 50% / auto 100% repeat-x;
  mask: var(--bsr-band-mask) 0 50% / auto 100% repeat-x;
  /* Whole tiles across, so the strip ends on a half monogram as it starts (Andre, 2026-10-15): site.js sets the size. */
  -webkit-mask-size: var(--bsr-band-tile, auto 100%);
  mask-size: var(--bsr-band-tile, auto 100%);
}
/* The default pattern's strip (buy_sell.php, Andre 2026-10-19: "similar idea to gg pattern"): three whole rows of
   the motif, staggered, in the accent, every motif whole; site.js sizes the tile and moves it a quarter tile in. */
.bsr-buysell-pattern[style*="--bsr-strip-mask"]::before {
  -webkit-mask: var(--bsr-strip-mask) var(--bsr-strip-x, 0) 50% / var(--bsr-strip-tile, auto 100%) repeat-x;
  mask: var(--bsr-strip-mask) var(--bsr-strip-x, 0) 50% / var(--bsr-strip-tile, auto 100%) repeat-x;
}
/* Selling and buying's titles at 50px, 32px on phones (Andre, 2026-10-19: as the Gaggi homepage had them). */
.bsr-buysell .bsr-heading { font-size: 50px; }
@media (max-width: 767.98px) { .bsr-buysell .bsr-heading { font-size: 32px; } }
/* Side by side, the photo and its strip 82.5% of their size (560px tall was too big), on the page's outer edge
   (Andre, 2026-10-19; the Gaggi homepage had it first). The width is 82.5% of its column plus the 100px it used to
   reach into the words. */
@media (min-width: 901px) {
  .bsr-buysell-row .bsr-buysell-media, .bsr-buysell-row.reverse .bsr-buysell-media { width: calc((100% + 100px) * .825); margin: 0; justify-self: end; }
  .bsr-buysell-row.reverse .bsr-buysell-media { justify-self: start; }
  .bsr-buysell-photo { height: 462px; }
  .bsr-buysell-pattern { height: 52.8px; margin-top: 8.25px; }
  .bsr-buysell-pattern[style*="--bsr-band-mask"] { height: 73px; }
  .bsr-buysell-pattern[style*="--bsr-band-mask"]::before { inset: 8.25px 0; }
}
.bsr-btn.accent-solid { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-dark); }
.bsr-btn.accent-solid:hover { background: var(--brand-accent-dark); border-color: var(--brand-accent-dark); }
/* Gold keeps dark words in a dark section (as dark mode does, top of this file) and in a dark section that dark
   mode turned light. A theme's own button colours outweigh both (theme-gaggi.css). */
:where(html:not([data-theme="dark"]) [data-bsr-dark]) .bsr-btn.accent-solid { color: var(--brand-light); }
html[data-theme="dark"] :where(body:not(.gg-page) [data-bsr-dark]) .bsr-btn.accent-solid { color: var(--brand-dark); }
@media (max-width: 900.98px) {
  .bsr-buysell { padding: 64px 0; }
  .bsr-buysell .bsr-container { gap: 130px; } /* clear pause between the Selling and Buying rows */
  .bsr-buysell-row, .bsr-buysell-row.reverse { grid-template-columns: 1fr; gap: 28px; }
  .bsr-buysell-row.reverse .bsr-buysell-copy { order: 0; padding: 0; text-align: center; }
  .bsr-buysell-row.reverse .bsr-buysell-media { order: 0; margin: 0; }
  .bsr-buysell-copy, .bsr-buysell-row:not(.reverse) .bsr-buysell-copy, .bsr-buysell-row.reverse .bsr-buysell-copy { padding: 0; text-align: center; }
  .bsr-buysell-buttons, .bsr-buysell-row.reverse .bsr-buysell-buttons { justify-content: center; }
  .bsr-buysell-text, .bsr-buysell-row.reverse .bsr-buysell-text { margin-left: auto; margin-right: auto; }
  .bsr-buysell-media { margin: 0; }
  .bsr-buysell-photo { height: 320px; }
  /* pattern strip: "cover" on a narrow column shrinks the monograms into
     ~6 tiny rows — pin the rendered scale to a desktop column's width so
     the logos stay the same size and show the same ~3 rows as desktop.
     The .bsr-px-layer variant matters once site.js lifts the pattern onto
     its parallax layer (the layer, not the strip, then carries the image). */
  .bsr-buysell-pattern,
  .bsr-buysell-pattern .bsr-px-layer { background-size: 900px auto; background-position: center top; }
}

/* Valuation CTA */
.bsr-valuation { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; }
.bsr-valuation img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.bsr-valuation .copy { padding: 70px; }
@media (max-width: 900.98px) {
  .bsr-valuation { grid-template-columns: 1fr; }
  .bsr-valuation .copy { padding: 48px 40px; text-align: center; } /* sides match .bsr-container mobile */
  .bsr-valuation .copy .bsr-rule { margin-left: auto; margin-right: auto; }
}

/* Neighbourhoods */
.bsr-hood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.bsr-hood { position: relative; aspect-ratio: 5/4; overflow: hidden; border-radius: var(--bsr-radius); }
.bsr-hood img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bsr-hood:hover img { transform: scale(1.06); }
.bsr-hood::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bsr-shade) 0%, transparent) 45%, color-mix(in srgb, var(--bsr-shade) 70%, transparent) 100%); pointer-events: none; }
.bsr-hood .label {
  position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 1;
  color: var(--brand-white); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: 0.04em;
}
.bsr-hood .go { position: absolute; bottom: 20px; right: 20px; z-index: 1; color: var(--brand-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
@media (max-width: 900.98px) { .bsr-hood-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bsr-hood-grid { grid-template-columns: 1fr; } }
/* Fewer cards than a full row: centre them instead of leaving a hole where the
   third would go. Added for agent pages, which show only the areas that agent
   serves and so are often one or two.

   Flex rather than grid, because 1fr tracks always fill the container — there
   is nothing left over for justify-content to distribute, which is why the two
   cards sat hard left. The basis repeats the grid's own arithmetic (three
   tracks, two 30px gaps) so a centred card is exactly the width it would have
   had in a full row; the cards do not grow to fill the space, they just move.
   The breakpoints mirror the grid's, or a phone would show two-thirds-width
   cards where the grid gives full-width ones. */
.bsr-hood-grid.is-centered { display: flex; flex-wrap: wrap; justify-content: center; }
.bsr-hood-grid.is-centered .bsr-hood { flex: 0 1 calc((100% - 60px) / 3); }
@media (max-width: 900.98px) { .bsr-hood-grid.is-centered .bsr-hood { flex-basis: calc((100% - 30px) / 2); } }
@media (max-width: 560px) { .bsr-hood-grid.is-centered .bsr-hood { flex-basis: 100%; } }

/* Newsletter */
.bsr-newsletter { background: var(--bsr-band); padding: 300px 0; }
@media (max-width: 768.98px) { .bsr-newsletter { padding: 200px 0; } }
.bsr-form-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; margin-top: 26px; }
.bsr-field { flex: 1 1 220px; }
.bsr-field label { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-grey-light); margin-bottom: 8px; }
/* 16px, and not a pixel less.

   iOS Safari ZOOMS THE PAGE when a form field under 16px is focused, and it
   does not zoom back out afterwards — so tapping Name on a phone left the
   visitor stranded at 1.3x with the rest of the form off-screen for the whole
   session. 15px was doing that on every form on the site.

   min-height 44px is the touch-target floor: the fields measured 36px, which
   is comfortably missable with a thumb. */
.bsr-field input, .bsr-field textarea {
  width: 100%; border: none; border-bottom: 1px solid var(--brand-grey-light);
  background: transparent; padding: 11px 2px; font-family: var(--brand-font-body); font-size: 16px;   /* what people type, in the body font (2026-10-14) */
  min-height: 44px; box-sizing: border-box; color: var(--brand-dark);
}
.bsr-field select { font-family: var(--brand-font-body); }
/* A textarea sizes from rows; the 44px floor would squash a tall one. */
.bsr-field textarea { min-height: 88px; }
.bsr-field input:focus, .bsr-field textarea:focus { outline: none; border-bottom-color: var(--brand-primary); }
/* The browser's autofill (Andre, 2026-10-16: a filled-in field turned light blue with its words against the edge):
   our fields are lines, not boxes, so they keep their own look. The browser's fill colour can't be overridden, only
   delayed (the long transition); its forced text colour is undone with -webkit-text-fill-color; Firefox tints with
   a filter. */
.bsr-field :is(input, textarea, select):is(:-webkit-autofill, :autofill) {
  -webkit-text-fill-color: var(--brand-dark); caret-color: var(--brand-dark); filter: none;
  transition: background-color 600000s 0s, color 600000s 0s;
}
.bsr-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-family: var(--brand-font-body); font-size: 12px; color: var(--brand-grey); max-width: 760px; }
/* 20px, from the browser default 13. The <label> wraps both, so the sentence
   is tappable too — but the box is what people aim at. flex-shrink:0 stops the
   long CASL sentence squeezing it. */
.bsr-consent input { margin-top: 2px; width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--brand-primary); }
.bsr-consent a { text-decoration: underline; }
.bsr-form-msg { margin-top: 16px; font-size: 14px; font-weight: 600; }
.bsr-form-msg.ok { color: #2c6e31; }
.bsr-form-msg.err { color: var(--brand-primary); }
.bsr-honey { position: absolute; left: -9999px; opacity: 0; }

/* ---------- Contact page ---------- */
.bsr-contact-layout { display: grid; grid-template-columns: 320px 1fr; gap: 70px; align-items: start; }
@media (max-width: 900.98px) { .bsr-contact-layout { grid-template-columns: 1fr; gap: 40px; } }
/* The map 100px under the form (Andre, 2026-10-17; was 40): the form's section ends in 40px on desktop, 100px on
   phones (.bsr-section.tight), so the map's own section adds the rest on desktop only. */
.bsr-section.tight.bsr-contact-map-sec { padding-top: 0; }
@media (min-width: 769px) { .bsr-section.tight.bsr-contact-map-sec { padding-top: 60px; } }
.bsr-contact-info { display: flex; flex-direction: column; gap: 28px; }
.bsr-contact-item { padding-bottom: 20px; }
.bsr-contact-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-grey-light); margin-bottom: 8px; }
.bsr-contact-value { display: block; font-size: 16px; font-weight: 600; color: var(--brand-dark); }
a.bsr-contact-value:hover { color: var(--brand-primary); }
.bsr-contact-form .bsr-field textarea { resize: vertical; }

/* Work with us */
.bsr-work { position: relative; background-size: cover; background-position: center; padding: 200px 0; text-align: center; color: var(--brand-white); }
.bsr-work::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--bsr-shade) 60%, transparent); }
.bsr-work.bg-color-only::before { background: color-mix(in srgb, var(--bsr-shade) 15%, transparent); }
.bsr-work .inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }

/* Popup / lead modal. Two columns since 2026-10-04 (Andre: wider, more
   prominent, a photo on the right): copy left-aligned under the accent rule,
   the photo filling the right, a darker blurred backdrop and a deep shadow,
   easing in. Without a photo it is the copy alone at 520px. On a phone the
   photo is hidden so the form fits; the overlay scrolls if it still doesn't. */
.bsr-popup-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: color-mix(in srgb, var(--bsr-shade) 72%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 20px; overflow-y: auto;
}
.bsr-popup-overlay.show { display: flex; }
.bsr-popup { position: relative; width: 100%; max-width: 520px; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr);
             background: var(--brand-light); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.bsr-popup.has-photo { max-width: 920px; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.bsr-popup-copy { padding: 64px 56px 52px; }
.bsr-popup-heading { font-size: 32px; margin: 0; }
.bsr-popup-body { margin: 0 0 22px; }
.bsr-popup-submit { margin-top: 24px; }
.bsr-popup-photo { min-height: 540px; background: var(--brand-dark) center / cover no-repeat; }
.bsr-popup-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border: none; border-radius: 50%;
                   display: flex; align-items: center; justify-content: center; cursor: pointer;
                   background: var(--brand-light); color: var(--brand-dark); box-shadow: 0 2px 10px rgba(0,0,0,.22); }
.bsr-popup h3 em { color: var(--brand-primary); font-style: normal; }
.bsr-popup-overlay.show .bsr-popup { animation: bsr-popup-in .35s ease-out both; }
@keyframes bsr-popup-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bsr-popup-overlay.show .bsr-popup { animation: none; } }
@media (max-width: 760px) {
  .bsr-popup.has-photo { max-width: 520px; grid-template-columns: minmax(0, 1fr); }
  .bsr-popup-photo { display: none; }
  .bsr-popup-copy { padding: 56px 28px 40px; }
  .bsr-popup-heading { font-size: 26px; }
}

/* Footer */
/* Footer — dark, minimal: brand / menu / mark, then a thin legal bar */
.bsr-footer { background: var(--brand-dark); color: var(--brand-white); padding: 200px 0 100px; }
/* Under a themed homepage (body.gg-page sets its own font, size and line height) the footer stays the site's (2026-10-09). */
body.gg-page .bsr-footer { font-family: var(--brand-font); font-size: 16px; line-height: 1.6; text-align: left; }
.bsr-footer-top { display: grid; grid-template-columns: 1fr 2fr auto; gap: 40px; align-items: start; padding-bottom: 100px; }
.bsr-footer-brand { text-align: left; }
/* the brand heading carries .bsr-heading.on-dark, whose text-align:center
   targets the h2 directly and outranks inherited alignment — this heavier
   selector wins it back */
.bsr-footer .bsr-footer-brand h2.bsr-heading { text-align: left; }
.bsr-footer-brand h2 { font-size: clamp(24px, 2.6vw, 32px); max-width: 280px; margin: 0; }
.bsr-footer-menu-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-grey-light); margin-bottom: 16px; }
.bsr-footer-menu-cols { display: grid; grid-template-columns: repeat(var(--bsr-fcols, 3), auto); gap: 10px 56px; justify-content: start; }   /* --bsr-fcols: a saved footer menu's column count */
.bsr-footer-menu-cols a { display: block; font-size: 14px; font-weight: 600; padding: 6px 0; color: var(--brand-white); transition: color var(--bsr-ease); }
.bsr-footer-menu-cols a:hover { color: var(--brand-accent); }
.bsr-footer-mono { width: 96px; align-self: start; justify-self: end; }
.bsr-footer-mono-m { display: none; } /* mobile-only twin, shown ≤900px beside Resources */
/* The links between two faint vertical lines, nudged in from the brokerage's block (Andre's mockup, 2026-10-16): 52px
   from each line, the group as wide as its columns, the lines reaching 24px past the row. Where the three sit in a row. */
@media (min-width: 901px) {
  .bsr-footer-menu-cols {
    justify-self: start; align-self: stretch; margin: -24px 0 -24px 52px; padding: 24px 52px;
    border-left: 1px solid rgba(255, 255, 255, .09); border-right: 1px solid rgba(255, 255, 255, .09);
  }
}
/* The brokerage's registered name under the site's name, above the address (footer.php, 2026-10-09). */
.bsr-footer-legal-name { margin: 10px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-accent); }
.bsr-footer-contact { margin-top: 22px; font-size: 14px; line-height: 1.9; color: var(--brand-grey-light); }
.bsr-footer-contact a { display: block; color: var(--brand-white); transition: color var(--bsr-ease); }
.bsr-footer-contact a:hover { color: var(--brand-accent); }
/* The social icons: solid glyphs alone, no circle or outline (Andre, 2026-10-14); the link a 36px-tall strip
   for the finger, its first icon flush with the words above. */
.bsr-footer-social { display: flex; gap: 20px; margin-top: 16px; }
.bsr-footer-social a, .bsr-offcanvas-social a { display: inline-flex; align-items: center; height: 36px; color: var(--brand-white); transition: color var(--bsr-ease); }
.bsr-footer-social a:hover, .bsr-offcanvas-social a:hover { color: var(--brand-accent); }
.bsr-footer-social svg, .bsr-offcanvas-social svg { width: 20px; height: 20px; }
.bsr-footer-rule { border: none; border-top: 1px solid rgba(255,255,255,.12); margin: 0; }
.bsr-footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 20px; font-size: 12.5px; color: var(--brand-grey-light); flex-wrap: wrap; gap: 10px 22px;
}
.bsr-footer-bottom a { color: var(--brand-grey-light); transition: color var(--bsr-ease); }
.bsr-footer-bottom a:hover { color: var(--brand-accent); }
.bsr-footer-legal-links { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
/* Light / dark at the end of the footer's links, in their size and colour, its moon or sun before it (2026-10-15). */
.bsr-footer-mode {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--brand-grey-light); transition: color var(--bsr-ease);
}
.bsr-footer-mode:hover { color: var(--brand-accent); }
.bsr-footer-mode svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The MLS board's notices under the legal line, on a page that showed a feed listing (includes/listings.php).
   The wrapper takes the legal line's 20px sides, so the two start at the same edge (2026-10-09). */
.bsr-footer-notice { padding: 0 20px 24px; }
.bsr-idx-notice.is-footer { margin: 0; padding: 0; font-size: 12px; line-height: 1.6; color: var(--brand-grey-light); opacity: .8; }
@media (max-width: 900.98px) { .bsr-idx-notice.is-footer { text-align: center; } }
@media (max-width: 900.98px) {
  .bsr-footer-top { grid-template-columns: 1fr; gap: 28px; }
  /* two-up: Explore | Properties share the first row; Resources below with
     the monogram filling the cell beside it */
  .bsr-footer-menu-cols { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 30px 24px; }
  .bsr-footer-mono { display: none; }
  .bsr-footer-mono-m { display: block; width: 84px; align-self: center; justify-self: start; }
  .bsr-footer-mono { justify-self: start; }
}
@media (max-width: 640px) {
  .bsr-footer-bottom { flex-direction: column; justify-content: center; text-align: center; }
  .bsr-footer-legal-links { justify-content: center; }
}

/* Simple content page shell (Terms, Privacy) */
.bsr-legal-page { max-width: 820px; }
.bsr-legal-page h2 { font-size: 20px; margin: 34px 0 12px; }
.bsr-legal-page p { color: var(--brand-grey); line-height: 1.8; margin: 0 0 16px; }
.bsr-legal-placeholder {
  border: 1px dashed var(--brand-accent); background: color-mix(in srgb, var(--brand-accent) 8%, transparent);
  padding: 18px 20px; border-radius: 6px; font-size: 13.5px; color: var(--brand-grey); margin: 20px 0;
}
.bsr-legal-placeholder strong { color: var(--brand-primary); }

.bsr-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ---------- The Signature: the monogram over an Intro's title (sections/intro.php, Andre 2026-10-16) ----------
   A new take on the page loader's drawing, brand colours only: the S is signed in merlot, then filled; the gold B and
   R rise into place from below the mark's edge, one after the other; a Candle Wax gleam crosses the finished mark (and
   again on hover). site.js adds .is-ready (hidden, waiting) only where it will play it, then .is-play in view, so
   without script or with reduced motion the mark simply stands there. */
.bsr-intro-mark { position: relative; width: 120px; margin: 0 auto 32px; }
.bsr-intro-mark svg { display: block; width: 100%; height: auto; overflow: hidden; }
.bsr-im-sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--L-light) 90%, transparent) 50%, transparent 62%) 0 0 / 300% 100% no-repeat;
  background-position: 100% 0;
}
.bsr-intro-mark.is-ready .bsr-part-ink { opacity: 0; transform-box: fill-box; transform: translateY(70%); }
.bsr-intro-mark.is-ready .bsr-part-swoosh {
  fill-opacity: 0; stroke: var(--brand-swoosh, var(--brand-primary)); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400);
}
.bsr-intro-mark.is-play .bsr-part-swoosh { animation: bsr-im-sign 1.1s cubic-bezier(.65, 0, .35, 1) forwards, bsr-im-fill .55s ease .95s forwards; }
.bsr-intro-mark.is-play .bsr-part-ink { animation: bsr-im-rise .95s cubic-bezier(.16, 1, .3, 1) var(--d, .4s) forwards; }
.bsr-intro-mark.is-play .bsr-im-sheen { animation: bsr-im-gleam 1s ease-in-out 1.65s forwards; }
.bsr-intro-mark.is-done:hover .bsr-im-sheen { animation: bsr-im-gleam-again 1s ease-in-out forwards; }
@keyframes bsr-im-sign { to { stroke-dashoffset: 0; } }
@keyframes bsr-im-fill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes bsr-im-rise { from { opacity: 0; transform: translateY(70%); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes bsr-im-gleam { 0% { opacity: 1; background-position: 100% 0; } 100% { opacity: 1; background-position: 0% 0; } }
/* A mark of one colour (the Gaggi monogram): every outline traced into place at once, then filled (site.js splits a
   compound path so the letters draw together; Andre, 2026-10-16). */
.bsr-intro-mark.is-ready.is-trace .bsr-part-ink {
  opacity: 1; transform: none; fill-opacity: 0; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300);
}
.bsr-intro-mark.is-play.is-trace .bsr-part-ink { animation: bsr-im-sign 1.3s cubic-bezier(.65, 0, .35, 1) forwards, bsr-im-fill .6s ease 1.1s forwards; }
@keyframes bsr-im-gleam-again { 0% { opacity: 1; background-position: 100% 0; } 100% { opacity: 1; background-position: 0% 0; } }
@media (max-width: 640px) { .bsr-intro-mark { width: 88px; margin-bottom: 24px; } }

/* Step-by-step guide pages (Buyer's Guide, Seller's Guide) */
.bsr-guide-intro { max-width: 720px; }
.bsr-step-list { display: flex; flex-direction: column; gap: 0; margin-top: 20px; }
.bsr-step { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: 30px 0; border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 89.5%, var(--brand-accent)); }
.bsr-step:last-child { border-bottom: none; }
.bsr-step-num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--brand-primary); color: var(--brand-white);
  display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800;
}
.bsr-step-title { font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; margin: 4px 0 8px; color: var(--brand-dark); }
.bsr-step-text { color: var(--brand-grey); line-height: 1.8; margin: 0; max-width: 700px; }
@media (max-width: 640px) {
  .bsr-step { grid-template-columns: 40px 1fr; gap: 16px; }
  .bsr-step-num { width: 36px; height: 36px; font-size: 14px; }
}
.bsr-guide-closing { text-align: center; max-width: 640px; margin: 0 auto; }
.bsr-guide-closing h2 { font-size: clamp(26px,3vw,36px); }

/* ---------- One-page guides: Buyer's Guide, Seller's Guide (includes/guide.php bsr_guide_single(), 2026-10-15) ----------
   The Gaggi guides' layout (theme-gaggi.css "A guide's pages") in the site's own brand (Andre: "similar layout and
   design"): a split banner with the steps as an "In this guide" card, the steps as numbered cards beside a sticky
   panel that marks the step being read (site.js), the other guide and Contact under them, the closing as a dark
   panel. Plenty of room between everything. Under 1101px the panel goes (the banner's card lists the steps). */
.bsr-page-hero.bsr-gd-hero { padding: 250px 0 150px; }   /* .bsr-page-hero comes later in this file */
.bsr-gd-hero .bsr-heading { margin: 0; font-size: clamp(40px, 5.2vw, 76px); line-height: 1.02; letter-spacing: -.01em; }
.bsr-gd-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(64px, 8vw, 140px); align-items: center; }
.bsr-gd-crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 44px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-grey); }
.bsr-gd-crumbs a { color: inherit; text-decoration: none; transition: color .25s; }
.bsr-gd-crumbs a:hover, .bsr-gd-crumbs a:focus-visible { color: var(--brand-primary); }
.bsr-gd-crumbs [aria-hidden] { opacity: .45; }
.bsr-gd-lead { max-width: 60ch; margin: 44px 0 0; font-size: 18px; line-height: 1.85; color: var(--brand-grey); }
.bsr-gd-acts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 60px; }
.bsr-gd-art { position: relative; }
.bsr-gd-photo { aspect-ratio: 4 / 5; max-height: 760px; overflow: hidden; border-radius: 28px; background: var(--brand-light) center / cover no-repeat; }
.bsr-gd-card { padding: 40px 32px 32px; border-radius: 22px; background: var(--brand-white); box-shadow: 0 30px 70px color-mix(in srgb, var(--bsr-shade) 10%, transparent); }
.bsr-gd-hero:not(.has-photo) .bsr-gd-card { max-width: 480px; margin-left: auto; }
.bsr-gd-hero.has-photo .bsr-gd-card { position: absolute; left: -72px; bottom: 30px; width: min(360px, 86%); }   /* 30px up from the photo's foot (Andre, 2026-10-16) */
.bsr-gd-card .bsr-gd-list a { padding: 8px 14px; font-size: 14.5px; }
.bsr-gd-h { margin: 0 0 20px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-grey); }
.bsr-gd-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bsr-gd-list a {
  display: flex; align-items: baseline; gap: 16px; padding: 11px 16px; border-radius: 12px; text-decoration: none;
  font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--brand-dark); transition: background .25s, color .25s;
}
.bsr-gd-n { flex: none; min-width: 22px; font-size: 13px; font-weight: 800; color: var(--brand-dark); font-variant-numeric: tabular-nums; transition: color .25s; }
.bsr-gd-list a:hover, .bsr-gd-list a:focus-visible { background: var(--bsr-page); }
.bsr-gd-list a:hover .bsr-gd-n, .bsr-gd-list a:focus-visible .bsr-gd-n { color: var(--brand-primary); }
.bsr-gd-list a[aria-current] { background: var(--brand-dark); color: var(--brand-white); }
.bsr-gd-list a[aria-current] .bsr-gd-n { color: var(--brand-accent); }
/* The steps beside the panel. */
.bsr-gd { padding: 0 0 170px; }
.bsr-gd-in { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(64px, 7vw, 128px); align-items: start; }
.bsr-gd-rail { position: sticky; top: 40px; }
.bsr-gd-rail-in { padding: 34px 20px 24px; border-radius: 22px; background: var(--brand-white); }
.bsr-gd-rail .bsr-gd-h { padding: 0 16px; }
.bsr-gd-main { display: flex; flex-direction: column; gap: 100px; min-width: 0; }
.bsr-gd-main > section { padding: 0 !important; background: none !important; }
.bsr-gd-main .bsr-container { max-width: none !important; padding: 0 !important; }
.bsr-gd-main .bsr-step-list { gap: 28px; margin-top: 0; }
.bsr-gd-main .bsr-step { grid-template-columns: 130px minmax(0, 1fr); gap: 40px; padding: 60px 56px; border: 0; border-radius: 22px; background: var(--brand-white); scroll-margin-top: 40px; }
.bsr-gd-main .bsr-step-num { display: block; width: auto; height: auto; border-radius: 0; background: none; font-size: 0; line-height: 1; }
.bsr-gd-main .bsr-step-num::before { content: attr(data-n); font-size: 76px; font-weight: 800; letter-spacing: -.04em; color: var(--brand-dark); transition: color .3s; }
.bsr-gd-main .bsr-step:hover .bsr-step-num::before { color: var(--brand-primary); }
.bsr-gd-main .bsr-step-title { margin: 6px 0 18px; font-size: 22px; line-height: 1.3; }
.bsr-gd-main .bsr-step-text { max-width: none; font-size: 16.5px; line-height: 1.85; }
/* The other guide and Contact under the steps. */
.bsr-gd-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bsr-gd-pager a {
  display: grid; align-content: start; gap: 16px; padding: 44px 42px; border: 1.5px solid color-mix(in srgb, var(--brand-dark) 14%, transparent);
  border-radius: 22px; text-decoration: none; transition: border-color .3s, background .3s;
}
.bsr-gd-pager a:hover, .bsr-gd-pager a:focus-visible { border-color: transparent; background: var(--brand-white); }
.bsr-gd-pager a + a { justify-items: end; text-align: right; }
.bsr-gd-pk { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-grey); transition: color .3s; }
.bsr-gd-pager a:is(:hover, :focus-visible) .bsr-gd-pk { color: var(--brand-primary); }
.bsr-gd-pk svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bsr-gd-pt { font-size: 20px; font-weight: 800; line-height: 1.3; text-transform: uppercase; color: var(--brand-dark); }
/* The closing as a dark panel inside the page: light values (--L-*) so it stays dark in dark mode, where it takes
   the dark card colour, a step up from the page. */
.bsr-gd-close { padding: 0 0 170px; }
.bsr-gd-close > section {
  width: calc(100% - 64px); max-width: calc(var(--bsr-container) - 64px); margin: 0 auto;
  padding: clamp(72px, 8vw, 120px) clamp(36px, 7vw, 104px) !important; border-radius: 28px; background: var(--L-dark);
}
html[data-theme="dark"] .bsr-gd-close > section { background: var(--D-band, #1c1b18); }
.bsr-gd-close .bsr-guide-closing { max-width: 720px; padding: 0; }
.bsr-gd-close .bsr-heading { margin: 0 0 18px; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.08; color: var(--L-light); }
.bsr-gd-close .bsr-body { max-width: 52ch; margin: 0 auto; font-size: 17px; line-height: 1.8; color: color-mix(in srgb, var(--L-light) 72%, transparent); }
.bsr-gd-close .bsr-btn.solid { background: var(--L-accent); border-color: var(--L-accent); color: var(--L-dark); }
.bsr-gd-close .bsr-btn.solid:hover { background: var(--L-light); border-color: var(--L-light); color: var(--L-dark); }
@media (max-width: 1100.98px) {
  .bsr-gd-hero-in, .bsr-gd-in { grid-template-columns: minmax(0, 1fr); }
  .bsr-gd-art { max-width: 640px; }
  .bsr-gd-hero:not(.has-photo) .bsr-gd-card { margin-left: 0; }
  .bsr-gd-hero.has-photo .bsr-gd-card { left: 28px; bottom: 28px; }
  .bsr-gd-rail { display: none; }
}
@media (max-width: 767.98px) {
  .bsr-page-hero.bsr-gd-hero { padding: 160px 0 90px; }
  .bsr-gd-hero-in { gap: 48px; }
  .bsr-gd-crumbs { margin-bottom: 28px; }
  .bsr-gd-lead { margin-top: 28px; font-size: 16.5px; }
  .bsr-gd-acts { margin-top: 40px; }
  .bsr-gd-card { padding: 30px 18px 22px; }
  .bsr-gd-hero:not(.has-photo) .bsr-gd-card { max-width: none; }
  .bsr-gd-hero.has-photo .bsr-gd-card { position: relative; inset: auto; z-index: 2; width: auto; margin: -48px 16px 0; }
  .bsr-gd-h { padding: 0 16px; }
  .bsr-gd { padding-bottom: 110px; }
  .bsr-gd-main { gap: 70px; }
  .bsr-gd-main .bsr-step { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 40px 28px; }
  .bsr-gd-main .bsr-step-num::before { font-size: 54px; }
  .bsr-gd-pager { grid-template-columns: minmax(0, 1fr); }
  .bsr-gd-pager a { padding: 32px 28px; }
  .bsr-gd-pager a + a { justify-items: start; text-align: left; }
  .bsr-gd-close { padding-bottom: 110px; }
  .bsr-gd-close > section { width: calc(100% - 32px); border-radius: 22px; }
}

/* ---------- Interior page hero ---------- */
.bsr-page-hero { padding: 250px 0 40px; }
@media (max-width: 768.98px) { .bsr-page-hero { padding: 160px 0 28px; } }
/* A page that is ONLY its hero (Unsubscribe, saved-search confirmation;
   Andre, 2026-10-04) ends on the section spacing, not 40px above the footer. */
.bsr-page-hero.is-solo { padding-bottom: 200px; }
@media (max-width: 768.98px) { .bsr-page-hero.is-solo { padding-bottom: 100px; } }

/* ---------- The plain look (Andre, 2026-10-16, the Gaggi About Us and Market Conditions pages, "more minimal"):
   a large page title under its path (page_hero look large), plain and numbered rows split by thin lines
   (photo_text look row / numbered), and a closing line (cta look line). Plain type, no cards, lots of room. ---------- */
.bsr-page-hero.is-large { padding: 230px 0 110px; }
.bsr-page-hero.is-large .bsr-heading { margin: 0 0 30px; font-size: clamp(46px, 6.4vw, 96px); line-height: .98; }
.bsr-page-hero.is-large .bsr-body { max-width: 600px !important; margin: 0; font-size: 17px; line-height: 1.7; }
.bsr-page-hero.is-large .bsr-body + .bsr-body { margin-top: 1em; }
.bsr-crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-grey); }
.bsr-crumbs a { color: inherit; text-decoration: none; transition: color .25s; }
.bsr-crumbs a:hover, .bsr-crumbs a:focus-visible { color: var(--brand-accent); }

.bsr-row, .bsr-cta-line { --row-line: color-mix(in srgb, var(--brand-dark) 13%, transparent); padding: 0; background: var(--bsr-page); }
.bsr-row-in { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px 96px; padding: 80px 0; border-top: 1px solid var(--row-line); }
.bsr-row-photo { aspect-ratio: 4 / 5; border-radius: var(--bsr-radius); overflow: hidden; background: color-mix(in srgb, var(--brand-dark) 6%, var(--bsr-page)); }
.bsr-row-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.bsr-row-num { display: block; margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--brand-grey); }
.bsr-row .bsr-row-h { margin: 0 0 8px; font-size: clamp(22px, 2.3vw, 30px) !important; line-height: 1.15; }
.bsr-row-sub { margin: 0 0 26px; font-size: 14px; font-weight: 600; color: var(--brand-grey); }
.bsr-row-contact { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: -12px 0 28px; font-size: 14px; font-weight: 600; }
.bsr-row-contact a, .bsr-row-contact span { color: var(--brand-dark); text-decoration: none; transition: color .25s; }
.bsr-row-contact a:hover, .bsr-row-contact a:focus-visible { color: var(--brand-accent); }
.bsr-row-h + .bsr-row-contact { margin-top: 14px; }
.bsr-rule + .bsr-row-contact { margin-top: 0; }
.bsr-row.is-numbered .bsr-row-copy { padding-top: 30px; }   /* level with the heading under its number */
.bsr-row-copy { max-width: 740px; }
.bsr-row-copy > .bsr-row-h:last-child, .bsr-row-copy .bsr-body > :last-child { margin-bottom: 0; }
/* A bullet list in a row reads as numbered points split by thin lines. */
.bsr-row .bsr-body ul { list-style: none; margin: 26px 0; padding: 0; counter-reset: bsr-row; }
.bsr-row .bsr-body ul > li { position: relative; counter-increment: bsr-row; margin: 0; padding: 16px 0 16px 52px; border-top: 1px solid var(--row-line); }
.bsr-row .bsr-body ul > li::before { content: counter(bsr-row, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-weight: 700; color: var(--brand-dark); }
.bsr-row .bsr-body strong { color: var(--brand-dark); }

.bsr-cta-line { padding-bottom: 150px; }
.bsr-cta-line-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-top: 44px; border-top: 1px solid var(--row-line); }
.bsr-cta-line .bsr-heading { margin: 0; font-size: clamp(22px, 2.4vw, 30px) !important; line-height: 1.15; }
.bsr-cta-line .bsr-body { margin: 8px 0 0; }
.bsr-cta-link { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-accent); text-decoration: none; white-space: nowrap; }
.bsr-cta-link span[aria-hidden] { display: inline-block; margin-left: 6px; transition: transform .25s; }
.bsr-cta-link:hover span[aria-hidden], .bsr-cta-link:focus-visible span[aria-hidden] { transform: translateX(5px); }
@media (max-width: 860px) {
  .bsr-page-hero.is-large { padding: 160px 0 64px; }
  .bsr-row-in { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 56px 0; }
  .bsr-row-photo { max-width: 280px; }
  .bsr-row.is-numbered .bsr-row-in { gap: 18px; }
  .bsr-row.is-numbered .bsr-row-copy { padding-top: 0; }
  .bsr-cta-line { padding-bottom: 100px; }
}

/* ---------- Home Valuation — full-screen widget over a darkened photo ---------- */
.bsr-valuation-hero {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-color: var(--brand-dark); /* fallback while the photo loads */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Generous top padding clears the absolutely-positioned header so the
     widget never tucks under the logo on shorter viewports; the section
     grows past 100vh and scrolls if the widget itself is taller. */
  padding: 200px 20px 80px;
}
.bsr-valuation-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.bsr-valuation-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
}
@media (max-width: 768.98px) { .bsr-valuation-hero { padding: 140px 16px 60px; } }

/* ---------- Agent home valuation (home-valuation.php?agent=) ----------
   A request form on the same darkened photo as the brokerage's ValEquity
   page: white type, underline fields, three step dots. .is-js hides step 2
   until Continue; without JS both steps show and Continue is hidden. */
.bsr-hv-inner { max-width: 720px; text-align: center; color: var(--brand-white); }
.bsr-hv-steps { display: flex; justify-content: center; gap: 44px; list-style: none; padding: 0; margin: 0 0 34px; }
.bsr-hv-steps li {
  position: relative; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7); color: var(--brand-white);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}
.bsr-hv-steps li + li::before { content: ''; position: absolute; right: calc(100% + 7px); top: 50%; width: 30px; border-top: 1px solid rgba(255,255,255,.4); }
.bsr-hv-steps li.is-on { background: var(--brand-white); border-color: var(--brand-white); color: var(--brand-dark); }
.bsr-hv-title { margin: 0; font-size: clamp(28px, 4.2vw, 46px); font-weight: 800; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; color: var(--brand-white); }
.bsr-hv-sub { max-width: 520px; margin: 16px auto 0; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.85); }
.bsr-hv-form { margin-top: 40px; text-align: left; }
.bsr-hv-step1 { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; }
.bsr-hv-step1 .bsr-field { flex: 1 1 320px; }
.bsr-hv-step2-title { margin: 44px 0 0; text-align: center; font-size: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-white); }
.bsr-hv .bsr-field label { color: rgba(255,255,255,.75); }
.bsr-hv .bsr-field input,
.bsr-hv .bsr-field select {
  width: 100%; min-height: 44px; padding: 11px 2px; box-sizing: border-box;
  background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.6);
  font-family: inherit; font-size: 16px; color: var(--brand-white);
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
.bsr-hv .bsr-field select option { color: var(--brand-dark); }
.bsr-hv .bsr-field :is(input, select):is(:-webkit-autofill, :autofill) { -webkit-text-fill-color: var(--brand-white); caret-color: var(--brand-white); }   /* autofilled: white on the photo too */
.bsr-hv .bsr-field input:focus,
.bsr-hv .bsr-field select:focus { outline: none; border-bottom-color: var(--brand-accent); }
.bsr-hv .bsr-consent { max-width: none; color: rgba(255,255,255,.75); }
.bsr-hv .bsr-consent a { color: var(--brand-white); }
.bsr-hv .bsr-form-msg.err { color: #ffb8b8; }
.bsr-hv-submit { margin-top: 28px; text-align: center; }
.bsr-hv-done { margin-top: 30px; }
.bsr-hv-form.is-js .bsr-hv-step2 { display: none; }
.bsr-hv-form.is-js.is-step2 .bsr-hv-step2 { display: block; }
.bsr-hv-form:not(.is-js) [data-hv-next],
.bsr-hv-form.is-step2 [data-hv-next] { display: none; }

/* ---------- Agent sites (bsr_agent_site()) ----------
   The agent's name beside the monogram, following the logo's own colour
   switches: white over a dark hero, dark once the header turns light. */
.bsr-logo-agent {
  position: absolute; left: calc(100% + 20px); top: 50%; transform: translateY(-50%);
  padding-left: 20px; border-left: 1px solid currentColor;
  font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap; color: var(--brand-white);
}
.bsr-header.scrolled .bsr-logo-agent,
.bsr-header.on-light .bsr-logo-agent { color: var(--brand-dark); }
@media (max-width: 768.98px) {
  /* Room left between the 80px logo and the menu button, so a long name wraps instead of running under it. */
  .bsr-logo-agent { left: calc(100% + 14px); padding-left: 14px; font-size: 11px; letter-spacing: .14em; white-space: normal; width: max-content; max-width: calc(100vw - 230px); }
}
.bsr-footer-agent-line { margin: 4px 0 18px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-accent); }
.bsr-contact-agent { display: flex; gap: 16px; align-items: center; margin-bottom: 30px; }
.bsr-contact-agent img { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.bsr-contact-agent-name { font-size: 18px; font-weight: 700; color: var(--brand-dark); }
.bsr-contact-agent-title { margin-top: 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-grey-light); }

/* ---------- Property search ---------- */
.bsr-filter-bar { padding: 32px 30px; margin-bottom: 26px; }

.bsr-search-input-wrap { position: relative; }
.bsr-search-input-wrap svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--brand-grey-light); pointer-events: none; }
/* 16px: the listings search box is the first thing a visitor taps on that
   page, and at 15px iOS zoomed the whole filter bar off-screen on focus. */
.bsr-search-input {
  width: 100%; padding: 16px 20px 16px 48px; border: 1px solid color-mix(in srgb, var(--brand-light) 66%, var(--brand-tint, var(--brand-accent))); border-radius: 999px;
  background: var(--brand-white); font-family: inherit; font-size: 16px; color: var(--brand-dark);
}
.bsr-search-input::placeholder { color: var(--brand-grey-light); }
.bsr-search-input:focus { outline: none; border-color: var(--brand-primary); }

.bsr-filter-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; }
.bsr-modern-select-wrap { position: relative; flex: 1 1 220px; min-width: 180px; }
/* 13px -> 16px. A <select> triggers the same iOS zoom as a text field, and
   there are four of them in a row here (type, beds, baths, sort) — tapping any
   one left the visitor zoomed into the middle of the filter bar. The padding
   drops to 12px so the taller type does not make the pills grow. */
.bsr-modern-select {
  width: 100%; appearance: none; -webkit-appearance: none;
  padding: 12px 40px 12px 18px; border: 1px solid color-mix(in srgb, var(--brand-light) 66%, var(--brand-tint, var(--brand-accent))); border-radius: 999px;
  background: var(--brand-white); font-family: inherit; font-size: 16px; color: var(--brand-grey);
}
.bsr-modern-select:focus { outline: none; border-color: var(--brand-primary); }
.bsr-modern-select-wrap .chev { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--brand-grey-light); pointer-events: none; }

.bsr-range-group { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 30px; }
@media (max-width: 640px) { .bsr-range-group { grid-template-columns: 1fr; gap: 26px; } }
.bsr-range-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-dark); margin-bottom: 16px; }
.bsr-range-slider { position: relative; height: 24px; display: flex; align-items: center; }
.bsr-range-track { position: absolute; left: 0; right: 0; height: 2px; background: color-mix(in srgb, var(--brand-light) 66%, var(--brand-tint, var(--brand-accent))); }
.bsr-range-fill { position: absolute; height: 2px; background: var(--brand-primary); }
.bsr-range-input {
  position: absolute; left: 0; width: 100%; margin: 0; height: 24px;
  background: transparent; appearance: none; -webkit-appearance: none; pointer-events: none;
}
.bsr-range-input::-webkit-slider-runnable-track { background: transparent; height: 2px; }
.bsr-range-input::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; pointer-events: auto; cursor: pointer;
  width: 18px; height: 18px; margin-top: -8px; border-radius: 50%;
  background: var(--brand-white); border: 2px solid var(--brand-primary);
}
.bsr-range-input::-moz-range-track { background: transparent; height: 2px; border: none; }
.bsr-range-input::-moz-range-thumb {
  pointer-events: auto; cursor: pointer; width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand-white); border: 2px solid var(--brand-primary);
}
.bsr-range-values { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--brand-dark); }

.bsr-results-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; }
.bsr-results-count { font-size: 13px; color: var(--brand-grey-light); margin: 0; letter-spacing: 0.06em; text-transform: uppercase; }
.bsr-sort-select { min-width: 200px; }
/* Pushed right so it groups with the sort control rather than floating in the
   middle of the row, which is what space-between would otherwise do to it. */
.bsr-save-search-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--brand-grey-light); border-radius: 999px;
  background: transparent; padding: 9px 18px; cursor: pointer;
  font-family: inherit; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-dark); transition: border-color .2s, color .2s;
}
.bsr-save-search-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.bsr-save-search-btn svg { flex: 0 0 auto; }
/* Phones (Andre, 2026-10-07). The filter bar drops its side padding, so the
   fields line up with the heading above them; Bathrooms and Bedrooms share a
   row under the property type; the count takes its own line and Newest and
   Save this search share the next, at the same width as the two selects
   above. 50% bases rather than flex:1 1 0, which left the button 22px wider
   (its padding and border sit outside a zero basis). The bookmark icon goes
   so the label fits on one line. */
@media (max-width: 640px) {
  .bsr-filter-bar { padding-left: 0; padding-right: 0; }
  .bsr-filter-row { gap: 16px 12px; }
  .bsr-filter-row .bsr-modern-select-wrap { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .bsr-filter-row .bsr-modern-select-wrap:first-child { flex-basis: 100%; }
  .bsr-filter-row .bsr-modern-select { padding-left: 16px; padding-right: 34px; text-overflow: ellipsis; }
  .bsr-filter-row .bsr-modern-select-wrap .chev { right: 14px; }
  .bsr-results-row { gap: 14px 12px; }
  .bsr-results-count { flex-basis: 100%; }
  .bsr-sort-form, .bsr-save-search-btn { flex: 1 1 calc(50% - 6px); min-width: 0; margin: 0; }
  .bsr-sort-select { min-width: 0; width: 100%; }
  .bsr-save-search-btn { order: 2; align-self: stretch; justify-content: center; padding: 0 10px;
                         font-size: 11px; letter-spacing: .08em; line-height: 1.2; text-align: center; }
  .bsr-save-search-btn svg { display: none; }
}
.bsr-no-results { text-align: center; padding: 60px 0; color: var(--brand-grey); }
.bsr-no-results p { margin-bottom: 20px; }

.bsr-listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 980.98px) { .bsr-listing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .bsr-listing-grid { grid-template-columns: 1fr; } }
/* Section rule between the agent bio and the listings beneath it.

   Hung off the dynamic wrapper rather than a class on the <section>:
   [data-bsr-dynamic="agent-listings"] is the one stable hook the listings
   partial (includes/sections/listings.php) has always carried.

   color-mix(in srgb, var(--brand-light) 89.5%, var(--brand-accent)) and the full-bleed width are the existing section rule, shared with
   .bsr-hood-block, .bsr-step and .bsr-dev-block.

   No orphan line when an agent has no listings: the listings partial
   drops the whole <section> in that case and the border goes with it. */
.bsr-section:has(> .bsr-container > [data-bsr-dynamic="agent-listings"]) {
  border-top: 1px solid color-mix(in srgb, var(--brand-light) 89.5%, var(--brand-accent));
}

/* The listing card (Andre, 2026-10-12, measured off his mockup): white with a soft shadow and
   round corners, the photo inset in it (its corners the card's less the inset), the board's
   status in a white tag, the price in white on a dark fade at the photo's foot; the street in
   its own case on one line; the city, its postal code and the listing brokerage in grey; then
   2 BD | 2 BA | 3000 SQFT, the figures dark, and the board's number at the right. */
.bsr-listing-card {
  --card-ink: color-mix(in srgb, var(--brand-dark) 88%, var(--brand-white));
  display: flex; flex-direction: column; background: var(--brand-white); border-radius: 24px; overflow: hidden; color: var(--card-ink);   /* a column, so the MLS# can sit at the foot (2026-10-14) */
  box-shadow: 0 10px 28px color-mix(in srgb, var(--bsr-shade) 7%, transparent);
  transition: box-shadow var(--bsr-ease), transform var(--bsr-ease);
}
.bsr-listing-card:hover { box-shadow: 0 16px 38px color-mix(in srgb, var(--bsr-shade) 13%, transparent); }
.bsr-listing-card.is-hot { box-shadow: 0 0 0 2px var(--brand-dark), 0 16px 38px color-mix(in srgb, var(--bsr-shade) 13%, transparent); }   /* its pin is hovered on the map */
.bsr-listing-card .photo { position: relative; flex: none; margin: 10px 10px 0; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; }
.bsr-listing-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.bsr-listing-card .photo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--bsr-shade) 82%, transparent), transparent);
}
.bsr-listing-card .price {
  position: absolute; left: 12px; bottom: 11px; z-index: 1;
  color: var(--brand-white); font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: .01em;
}
/* The board's status (New, Price Change…), top left (2026-10-11, includes/listings.php bsr_listing_tag()). */
.bsr-listing-card .tag {
  position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; height: 28px; padding: 0 11px;
  border-radius: 6px; background: var(--brand-white); color: var(--card-ink);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
}
/* Saved homes (Andre, 2026-10-14; site.js, saved-home.php): a heart top right of a card's photo, beside its tag
   and the same white; on the listing page a 66 x 30 box over the address, as in his mockup. Grey; filled in the
   accent once saved. Hidden where nobody can sign in (header.php sets body[data-bsr-save]). */
body:not([data-bsr-save]) .bsr-save-home { display: none; }
.bsr-save-home {
  position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 34px; height: 28px; border-radius: 6px;
  background: var(--brand-white); color: color-mix(in srgb, var(--brand-grey-light) 75%, var(--brand-white)); cursor: pointer;
  transition: color .2s, transform .2s;
}
.bsr-save-home svg { width: 17px; height: 17px; fill: currentColor; }
.bsr-save-home:hover { color: var(--brand-grey); }
.bsr-save-home:active { transform: scale(.92); }
.bsr-save-home.is-saved { color: var(--brand-primary); }   /* Merlot Flame on BSR (Andre, 2026-10-14; it was the accent's gold); GG's red in theme-gaggi.css */
.bsr-save-home:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.bsr-save-home.is-hero { position: relative; top: auto; right: auto; width: 66px; height: 30px; margin: 0 0 16px; }
.bsr-save-home.is-hero svg { width: 23px; height: 23px; }
.bsr-listing-card .body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 16px 18px 22px; }
.bsr-listing-card .addr { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--card-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The card's secondary text in the Brand Guide's Grey, mid (Andre, 2026-10-13; it was Grey, light). The city
   line too (re-check F7, 2026-10-14: it was the address's black, which set the brokerage line under it apart). */
.bsr-listing-card .city { margin-top: 0; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--card-ink); }   /* the address's black, close under it, semi-bold (Andre, 2026-10-14, over re-check F7); the brokerage line stays Grey, mid */
/* The card's text in the body font (Andre, 2026-10-14): the beds, baths and size, the address, the town, the
   brokerage and the MLS number together, so the brokerage stays in the same font as the lines above it; the
   price on the photo keeps the main font. */
.bsr-listing-card :is(.specs, .addr, .city, .courtesy, .mls) { font-family: var(--brand-font-body); }
/* The listing brokerage, as the city line above it: the board wants it in the
   listing's own font and size, not set apart (PropTx IDX 6.3(c), 2026-10-08); its colour too. */
.bsr-listing-card .courtesy { padding: 10px 0; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--brand-grey-mid); }   /* semi-bold, as the town line (Andre, 2026-10-14) */
/* 2 BD | 2 BA | 3000 SQFT above the address (Andre, 2026-10-14); the board's number last, on its own line. */
.bsr-listing-card .specs { display: flex; flex-wrap: wrap; gap: 2px 7px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--brand-grey-light); text-transform: uppercase; }   /* BD, BA, SQFT in Grey, light (Andre, 2026-10-14) */
.bsr-listing-card .specs span { white-space: nowrap; }   /* narrow cards wrap whole items, never "3" over "BD" */
.bsr-listing-card .specs b { font-weight: 600; color: var(--card-ink); }   /* the figures 600, as their labels (Andre, 2026-10-14) */
.bsr-listing-card .specs span + span::before { content: '|'; margin-right: 7px; font-weight: 400; color: var(--brand-grey-light); }
.bsr-listing-card .mls { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--brand-grey-light); white-space: nowrap; }   /* the board's number, on every card, at its foot: level across a row (Andre, 2026-10-14) */
/* Staff in the dashboard's MLS Search (2026-10-16, includes/listings.php bsr_listing_staff_hide_html(), staff-frame.js):
   Hide from site / Show on site at a feed card's foot; a hidden card fades, with "Hidden from site" beside the button. */
.bsr-listing-card .bsr-staff-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; font-family: var(--brand-font-body); font-size: 12px; }
.bsr-listing-card .mls + .bsr-staff-row { margin-top: 0; }
.bsr-staff-note { display: none; font-weight: 600; color: var(--brand-primary); }
.bsr-listing-card.is-off-site .bsr-staff-note { display: inline; }
.bsr-staff-btn { margin-left: auto; padding: 5px 11px; border: 1px solid color-mix(in srgb, var(--brand-grey-light) 45%, transparent); border-radius: 6px; font-weight: 600; color: var(--card-ink); cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s; }
.bsr-staff-btn:hover { background: color-mix(in srgb, var(--brand-grey-light) 14%, transparent); border-color: var(--brand-grey-light); }
.bsr-staff-btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.bsr-staff-btn[aria-busy="true"] { opacity: .5; cursor: progress; }
.bsr-listing-card.is-off-site .photo img { opacity: .4; filter: grayscale(1); }

/* ---------- Property Search (2026-10-09, Andre) ----------
   includes/sections/property_search.php, under the page's own title band.
   The search console on a candle wax band, then the list (42% of the window)
   beside a map that stays in view as the page scrolls. Andre tried the page as
   a full-window app (slim header, no footer) and kept only this part.
   Below 981px the facets fold behind a Filters button and the map hides behind
   a Map / List button at the foot of the screen (assets/js/property-map.js). */
.bsr-ps-app { --ps-line: color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); }
/* Lines in the primary colour instead (Websites → Brokerage Site → Settings → Search page lines, 2026-10-09),
   at 30% (Andre: full strength was too strong), see-through so they read the same on the light band and the
   white page. The console, cards and page numbers draw their own tints, so they follow it here; a focused
   console and a card whose pin is hovered keep their own colours. */
.bsr-ps-app.is-lines-primary { --ps-line: color-mix(in srgb, var(--brand-primary) 30%, transparent); }
.bsr-ps-app.is-lines-primary .bsr-ps-console:not(:focus-within),
.bsr-ps-app.is-lines-primary .bsr-pg { border-color: var(--ps-line); }
/* First on the page, with no title band (properties.php, Andre 2026-10-09): clear of the
   header, which floats over the top of every page (logo bottom at 134px, 114px on phones).
   The same for the "Too many searches" note that takes its place (re-check 2 D2). */
.bsr-offcanvas + .bsr-ps-app, .gg-menu-site + .bsr-ps-app, .bsr-section.tight.bsr-ps-busy:is(.bsr-offcanvas + *, .gg-menu-site + *) { padding-top: 160px; }   /* .gg-menu-site: the Homepage-style menu in its place (header.php) */
@media (max-width: 768.98px) { .bsr-offcanvas + .bsr-ps-app, .gg-menu-site + .bsr-ps-app, .bsr-section.tight.bsr-ps-busy:is(.bsr-offcanvas + *, .gg-menu-site + *) { padding-top: 136px; } }

/* The console: one bordered row, every part a small tracked label over its value. */
.bsr-ps-bar {   /* its layer above the list's cards, so a facet's panel covers their hearts and tags (2026-10-14) */
  position: relative; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 12px 28px; /*background: var(--brand-light); border-top: 1px solid var(--ps-line); border-bottom: 1px solid var(--ps-line);*/
}
.bsr-ps-console {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; height: 54px;
  background: var(--brand-white); border: 1px solid color-mix(in srgb, var(--brand-light) 60%, var(--brand-tint, var(--brand-accent))); border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.bsr-ps-console:focus-within { border-color: var(--brand-accent-dark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 22%, transparent); }
.bsr-ps-k {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.2; color: var(--brand-accent-dark); white-space: nowrap;
}
.bsr-ps-v {
  display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--brand-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A facet in use: its value in the brand colour, a dot after its label. */
.bsr-ps-facet.is-set .bsr-ps-v { color: var(--brand-primary); }
.bsr-ps-facet.is-set .bsr-ps-k::after {
  content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 0 1px 6px; border-radius: 50%;
  background: var(--brand-primary); vertical-align: middle;
}

.bsr-ps-where {
  flex: 1 1 240px; min-width: 150px; display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-content: center; column-gap: 12px; padding: 0 18px; cursor: text;
}
.bsr-ps-where svg { grid-row: 1 / 3; align-self: center; color: var(--brand-accent-dark); }
.bsr-ps-where input {
  width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--brand-dark);
}
.bsr-ps-where input::placeholder { color: var(--brand-grey-light); font-weight: 500; }

/* The Where box's suggestions (assets/js/place-suggest.js, 2026-10-14): under the box, fixed to the window,
   above the map; places then addresses, the typed words in bold, the one the arrows are on shaded. */
.bsr-sug {
  position: fixed; z-index: 1001; max-height: min(60vh, 440px); overflow-y: auto; padding: 6px 0 8px; box-sizing: border-box;
  background: var(--brand-white); border-radius: 12px; box-shadow: 0 18px 44px color-mix(in srgb, var(--bsr-shade) 16%, transparent);
  font-family: var(--brand-font); color: var(--brand-dark); text-align: left;
}
.bsr-sug[hidden] { display: none; }
.bsr-sug-h { padding: 12px 18px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-grey); }
.bsr-sug-o { display: flex; align-items: center; gap: 12px; padding: 9px 18px; cursor: pointer; }
.bsr-sug-o.is-on { background: color-mix(in srgb, var(--brand-light) 70%, var(--brand-white)); }
.bsr-sug-o svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--brand-accent-dark); stroke-width: 1.8; stroke-linejoin: round; }
.bsr-sug-t { flex: 1; min-width: 0; display: grid; }
.bsr-sug-m { font-size: 14px; font-weight: 500; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsr-sug-m b { font-weight: 700; }
.bsr-sug-s { font-size: 12.5px; line-height: 1.35; color: var(--brand-grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsr-sug-img { flex: none; width: 48px; height: 36px; object-fit: cover; border-radius: 6px; background: var(--brand-light); }   /* one listing's photo (2026-10-14) */
.bsr-sug-n { flex: none; font-size: 12.5px; color: var(--brand-grey); }
/* Google's credit under its suggestions (its terms ask for it where its places show without its map). */
.bsr-sug-g { padding: 8px 18px 2px; text-align: right; font-size: 11px; color: var(--brand-grey); }
/* A home address box's list (2026-10-15) also opens in the sign-up questions box: over its layer (900 here, 2000 in theme-gaggi). */
.bsr-sug.is-addr { z-index: 2100; }

/* Fixed widths: the place box takes what the window gives, the facets never squeeze into each other. */
.bsr-ps-facets { display: flex; flex: none; }
.bsr-ps-facet { position: relative; display: flex; flex: none; border-left: 1px solid var(--ps-line); }
.bsr-ps-fbtn {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 10px;
  width: 148px; height: 100%; margin: 0; padding: 0 16px;
  background: none; border: 0; text-align: left; font-family: inherit; color: inherit; cursor: pointer;
  transition: background .2s;
}
.bsr-ps-facet.is-type, .bsr-ps-facet.is-type .bsr-ps-fbtn { width: 184px; }
.bsr-ps-facet.is-price .bsr-ps-fbtn { width: 172px; }   /* a range such as $1.25M–$2.75M */
.bsr-ps-facet:last-child .bsr-ps-fbtn { border-radius: 0 11px 11px 0; }
.bsr-ps-fbtn:hover, .bsr-ps-facet.open .bsr-ps-fbtn { background: color-mix(in srgb, var(--brand-light) 70%, var(--brand-white)); }
.bsr-ps-facet .chev { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--brand-grey-light); transition: transform .2s; }
.bsr-ps-facet.open .chev { transform: rotate(180deg); }

/* Price and Size: a panel under the facet with the range slider (property-search-bar.js).
   Type: the filters panel's tiles; Beds and Baths: its chips (2026-10-11). */
.bsr-ps-pop {
  display: none; position: absolute; top: calc(100% + 10px); left: -1px; z-index: 5; width: 340px;
  padding: 22px 22px 14px; background: var(--brand-white); border: 1px solid var(--ps-line); border-radius: 12px;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--bsr-shade) 16%, transparent); cursor: default;
}
.bsr-ps-facet.is-end .bsr-ps-pop { left: auto; right: -1px; }
.bsr-ps-facet.open .bsr-ps-pop { display: block; }
.bsr-ps-pop .bsr-range-label { margin-bottom: 14px; }
.bsr-ps-pop.is-tiles, .bsr-ps-pop.is-chips { --pf-line: color-mix(in srgb, var(--brand-light) 70%, var(--brand-tint, var(--brand-accent))); }   /* the filters panel's own line, for its tiles and chips */
.bsr-ps-pop.is-tiles { width: 440px; }
.bsr-ps-pop.is-chips { width: 300px; padding: 18px; }
.bsr-ps-pop .bsr-pf-tile span { height: 92px; }
/* Listing (2026-10-12): its kinds are links, the chosen one drawn as a picked chip, all on one line. */
.bsr-ps-facet.is-kind .bsr-ps-pop { width: max-content; }
.bsr-ps-facet.is-kind .bsr-pf-chips { flex-wrap: nowrap; }
/* Beds and Baths (Andre, 2026-10-13): even rows of equal pills, not four and two. Baths in two
   rows of three; Beds with Any and Studio on the first row, half each, and every number on the
   second. A grid of ten columns: a number takes two, Any and Studio five each. */
.bsr-ps-facet.is-baths .bsr-pf-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bsr-ps-facet.is-beds .bsr-pf-chips { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.bsr-ps-facet.is-beds .bsr-pf-chip { grid-column: span 2; }
.bsr-ps-facet.is-beds .bsr-pf-chip:nth-child(-n+2) { grid-column: span 5; }
.bsr-ps-facet:is(.is-beds, .is-baths) .bsr-pf-chip span { width: 100%; justify-content: center; padding: 0 6px; }
a.bsr-pf-chip { color: var(--brand-dark); text-decoration: none; outline: 0; }
a.bsr-pf-chip.is-on span { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-white); }
a.bsr-pf-chip:focus-visible span { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.bsr-ps-pop-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ps-line);
}
.bsr-ps-reset, .bsr-ps-clear {
  padding: 0; background: none; border: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--brand-grey);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; cursor: pointer;
}
.bsr-ps-reset:hover, .bsr-ps-clear:hover { color: var(--brand-primary); }
.bsr-ps-apply, .bsr-ps-save {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  background: var(--brand-primary); color: var(--brand-white); font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: background .2s;
}
.bsr-ps-apply { padding: 10px 22px; border-radius: 999px; }
.bsr-ps-save { flex: none; height: 54px; padding: 0 22px; border-radius: 12px; }
.bsr-ps-apply:hover, .bsr-ps-save:hover { background: var(--brand-primary-dark); }
.bsr-ps-more { display: none; }

/* The Filters button on every screen since the filters panel (2026-10-10): on
   wide screens it closes the console, after the facets. */
@media (min-width: 981px) {
  .bsr-ps-more {
    display: inline-flex; align-items: center; gap: 8px; flex: none; order: 3; margin: 0; padding: 0 20px;
    background: none; border: 0; border-left: 1px solid var(--ps-line); border-radius: 0 11px 11px 0; cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark);
    transition: background .2s;
  }
  .bsr-ps-more:hover { background: color-mix(in srgb, var(--brand-light) 70%, var(--brand-white)); }
  .bsr-ps-more b {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--brand-primary); color: var(--brand-white); font-size: 10px; letter-spacing: 0;
  }
  .bsr-ps-facet:last-child .bsr-ps-fbtn { border-radius: 0; }
}

/* The console on wide screens (Andre's mockup, 2026-10-14): a row of separate white tiles 3px
   apart, round corners and the listing cards' shadow, a deeper one on the tile in use. The facets
   as wide as their words; Filters takes what is left, its label at the right. The place box ends
   at the list's right edge and Listing starts over the map frame's left one, the list's gap to the
   map between them (42cqw: the list's 42% of the same width, .bsr-ps-split below); short of room
   the place box gives way first. */
@media (min-width: 981px) {
  .bsr-ps-app { container-type: inline-size; }
  .bsr-ps-app .bsr-ps-console, .bsr-ps-app.is-lines-primary .bsr-ps-console:not(:focus-within) {
    gap: 3px; background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .bsr-ps-facets { gap: 3px; }
  .bsr-ps-where, .bsr-ps-facet, .bsr-ps-more {
    background: var(--brand-white); border: 0; border-radius: 12px;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--bsr-shade) 7%, transparent); transition: box-shadow .2s, background .2s;
  }
  .bsr-ps-where:focus-within, .bsr-ps-facet.open, .bsr-ps-facet:focus-within, .bsr-ps-more:focus-visible {
    box-shadow: 0 14px 34px color-mix(in srgb, var(--bsr-shade) 14%, transparent);
  }
  /* The keyboard's place, a ring as the old console's edge had (re-check 2 D8): the deeper shadow alone was faint. */
  .bsr-ps-where:has(:focus-visible), .bsr-ps-facet:has(:focus-visible), .bsr-ps-more:focus-visible {
    outline: 2px solid var(--brand-accent-dark); outline-offset: 2px;
  }
  .bsr-ps-where { flex: 0 1 calc(max(540px, 42cqw) - 56px); margin-right: 25px; padding: 0 19px; }
  .bsr-ps-facet.is-type, .bsr-ps-fbtn, .bsr-ps-facet.is-type .bsr-ps-fbtn, .bsr-ps-facet.is-price .bsr-ps-fbtn { width: auto; }
  .bsr-ps-fbtn, .bsr-ps-facet:last-child .bsr-ps-fbtn { padding: 0 16px 0 14px; column-gap: 28px; border-radius: inherit; }
  .bsr-ps-facet .chev { width: 9px; height: 9px; }
  .bsr-ps-v { max-width: 150px; }
  .bsr-ps-more { flex: 1 0 auto; justify-content: flex-end; margin-left: 25px; }   /* as far from the facets as the place box (Andre, 2026-10-15) */
  /* The facets as one bar (Andre, 2026-10-15): the corners between the tiles straight, only the bar's two ends
     round, Listing's left and the last one showing's right (Size; Baths under 1450px, Beds under 1300px, as
     the tiles drop out below). The place box and Filters keep their own. */
  .bsr-ps-facet { border-radius: 0; }
  .bsr-ps-facet:first-child { border-radius: 12px 0 0 12px; }
  .bsr-ps-facet.is-size { border-radius: 0 12px 12px 0; }
}
@media (min-width: 981px) and (max-width: 1449px) { .bsr-ps-facet.is-baths { border-radius: 0 12px 12px 0; } }
@media (min-width: 981px) and (max-width: 1299px) { .bsr-ps-facet.is-beds { border-radius: 0 12px 12px 0; } }

/* ── The filters panel (includes/listing-filters.php, 2026-10-10; Andre: "like LP but our own") ──
   One form over the page: a head, the filters in folding sections, and a foot
   with Reset, Save search and the live count. Our own type: tracked capitals
   for the small labels, as in the console; pills that fill in the dark when
   chosen; property types as tiles; the long lists as checkboxes three across.
   Full screen on phones. assets/js/property-filters.js drives it. */
html.bsr-pf-on { overflow: hidden; }
.bsr-pf-overlay {
  position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in srgb, var(--bsr-shade) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: bsr-pf-in .18s ease-out;
}
.bsr-pf-overlay[hidden] { display: none; }
@keyframes bsr-pf-in { from { opacity: 0; } }
.bsr-pf {
  --pf-line: color-mix(in srgb, var(--brand-light) 70%, var(--brand-tint, var(--brand-accent)));
  position: relative; display: flex; flex-direction: column; width: min(760px, 100%); height: min(900px, calc(100dvh - 48px));
  background: var(--brand-white); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden;
  font-family: var(--brand-font); color: var(--brand-dark); animation: bsr-pf-up .22s ease-out;
}
@keyframes bsr-pf-up { from { transform: translateY(14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bsr-pf-overlay, .bsr-pf { animation: none; } }   /* audit B29 */
.bsr-pf:focus { outline: 0; }
.bsr-pf-head { position: relative; flex: none; display: flex; align-items: center; justify-content: center; height: 62px; border-bottom: 1px solid var(--pf-line); }
.bsr-pf-head h2 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-dark); }
.bsr-pf-x {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px;
  padding: 0; border: 0; border-radius: 50%; background: none; color: var(--brand-dark); cursor: pointer; transition: background .2s;
}
.bsr-pf-x:hover { background: var(--brand-light); }
.bsr-pf-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 30px 6px; }

/* For sale | For rent */
.bsr-pf-trans { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--brand-light); }
.bsr-pf-trans label { position: relative; cursor: pointer; }
.bsr-pf-trans input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bsr-pf-trans span {
  display: block; padding: 12px 0; border-radius: 999px; text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand-grey); transition: background .2s, color .2s;
}
.bsr-pf-trans input:checked + span { background: var(--brand-dark); color: var(--brand-white); }
.bsr-pf-find {
  display: flex; align-items: center; gap: 10px; height: 46px; margin: 16px 0 4px; padding: 0 16px;
  border: 1px solid var(--pf-line); border-radius: 12px; color: var(--brand-grey-light); cursor: text; transition: border-color .2s;
}
.bsr-pf-find:focus-within { border-color: var(--brand-dark); }
.bsr-pf-find input { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--brand-dark); }
.bsr-pf-find input::placeholder { color: var(--brand-grey-light); }

/* Sections fold on their heads; a number shows how many of their filters are in use. */
.bsr-pf-sec { border-bottom: 1px solid var(--pf-line); }
.bsr-pf-sec:last-of-type { border-bottom: 0; }
.bsr-pf-sh, .bsr-pf-subh {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0; padding: 20px 0;
  border: 0; background: none; font: inherit; text-align: left; color: var(--brand-dark); cursor: pointer;
}
.bsr-pf-sh span { font-size: 15px; font-weight: 700; }
.bsr-pf-sh .chev { flex: none; color: var(--brand-grey-light); transform: rotate(-90deg); transition: transform .2s; }
.bsr-pf-sec.is-open > .bsr-pf-sh .chev { transform: none; }
.bsr-pf-sb { display: none; padding: 0 0 22px; }
.bsr-pf-sec.is-open > .bsr-pf-sb { display: block; }
.bsr-pf-n {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px;
  background: var(--brand-primary); color: var(--brand-white); font-size: 11px; font-weight: 700; vertical-align: 1px;
}
.bsr-pf-label { margin: 20px 0 10px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-accent-dark); }
.bsr-pf-sb > .bsr-pf-label:first-child { margin-top: 0; }

/* Pills: one choice (radio) or several (checkbox, with a tick when chosen). */
.bsr-pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bsr-pf-chips.is-toggles { margin-top: 14px; }
.bsr-pf-sb > .bsr-pf-chips.is-toggles:first-child { margin-top: 0; }
.bsr-pf-chip, .bsr-pf-tile, .bsr-pf-check { position: relative; cursor: pointer; }
.bsr-pf-chip input, .bsr-pf-tile input, .bsr-pf-check input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bsr-pf-chip span {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border: 1px solid var(--pf-line); border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap; transition: border-color .15s, background .15s, color .15s;
}
.bsr-pf-chip span svg { display: none; }
.bsr-pf-chip:hover span { border-color: var(--brand-dark); }
.bsr-pf-chip input:checked + span { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-white); }
.bsr-pf-chip input:checked + span svg { display: block; }
.bsr-pf-chip input:focus-visible + span, .bsr-pf-tile input:focus-visible + span,
.bsr-pf-check input:focus-visible + span, .bsr-pf-trans input:focus-visible + span { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

/* Property types as tiles. */
.bsr-pf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.bsr-pf-tile span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 94px; padding: 0 8px;
  border: 1px solid var(--pf-line); border-radius: 12px; font-size: 12.5px; font-weight: 600; text-align: center;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.bsr-pf-tile span svg { color: var(--brand-accent); transition: color .15s; }   /* antique gold (Andre, 2026-10-16; was grey, gold only when ticked) */
.bsr-pf-tile:hover span { border-color: transparent; background: var(--bsr-page); }   /* the page colour, no border: Candle Wax in light, the dark page (#121110) in dark (Andre, 2026-10-16) */
.bsr-pf-tile input:checked + span { border-color: var(--brand-dark); box-shadow: inset 0 0 0 1px var(--brand-dark); background: var(--brand-light); }
.bsr-pf-tile input:checked + span svg { color: var(--brand-accent); }

/* Selects: a pair (living area) or one. */
.bsr-pf-pair { display: flex; align-items: center; gap: 12px; }
.bsr-pf-pair > span { flex: none; font-size: 13px; color: var(--brand-grey); }
.bsr-pf-select {
  flex: 1 1 0; min-width: 0; width: 100%; max-width: 340px; height: 46px; padding: 0 12px;
  border: 1px solid var(--pf-line); border-radius: 12px; background: var(--brand-white);
  font: inherit; font-size: 14px; color: var(--brand-dark); cursor: pointer;
}
.bsr-pf-pair .bsr-pf-select { max-width: none; }
.bsr-pf-select:focus { outline: 0; border-color: var(--brand-dark); }
.bsr-pf .bsr-range-filter { padding: 4px 4px 0; }

/* Advanced: each list folds; checkboxes three across. */
.bsr-pf-sub { border-top: 1px solid var(--pf-line); }
.bsr-pf-sub:first-child { border-top: 0; }
.bsr-pf-subh { padding: 14px 0; }
.bsr-pf-subh span { font-size: 14px; font-weight: 600; }
.bsr-pf-subh .chev { flex: none; color: var(--brand-grey-light); transition: transform .2s; }
.bsr-pf-sub.is-open .bsr-pf-subh .chev { transform: rotate(90deg); }
.bsr-pf-checks { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 18px; padding: 0 0 16px; }
.bsr-pf-sub.is-open .bsr-pf-checks { display: grid; }
.bsr-pf-check span { position: relative; display: block; padding: 7px 0 7px 30px; font-size: 13.5px; line-height: 1.35; }
.bsr-pf-check span::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; box-sizing: border-box;
  border: 1.5px solid var(--brand-grey-light); border-radius: 5px; background: var(--brand-white); transition: background .15s, border-color .15s;
}
.bsr-pf-check:hover span::before { border-color: var(--brand-dark); }
.bsr-pf-check input:checked + span::before { background: var(--brand-dark); border-color: var(--brand-dark); }
.bsr-pf-check input:checked + span::after {
  content: ''; position: absolute; left: 6.5px; top: 10px; width: 5px; height: 9px;
  border: solid var(--brand-white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.bsr-pf-none { margin: 0; padding: 34px 0; text-align: center; font-size: 14px; color: var(--brand-grey); }

/* The foot: Reset on the left, Save search and the count that applies. */
.bsr-pf-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--pf-line); background: var(--brand-white); }
.bsr-pf-reset {
  margin-right: auto; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--brand-grey); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.bsr-pf-reset:hover { color: var(--brand-primary); }
.bsr-pf-save, .bsr-pf-go {
  height: 48px; padding: 0 22px; border-radius: 12px; font: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s, opacity .2s;
}
.bsr-pf-save { border: 1px solid var(--pf-line); background: var(--brand-white); color: var(--brand-dark); }
.bsr-pf-save:hover { border-color: var(--brand-dark); }
.bsr-pf-go { min-width: 200px; border: 0; background: var(--brand-primary); color: var(--brand-white); }
.bsr-pf-go:hover { background: var(--brand-primary-dark); }
.bsr-pf-go.is-busy { opacity: .7; }

@media (max-width: 640px) {
  .bsr-pf-overlay { padding: 0; }
  .bsr-pf { width: 100%; height: 100dvh; border-radius: 0; }
  .bsr-pf-body { padding: 18px 18px 6px; }
  .bsr-pf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bsr-pf-tile span { height: 84px; font-size: 11.5px; }
  .bsr-pf-checks { grid-template-columns: 1fr 1fr; }
  .bsr-pf-find input, .bsr-pf-select { font-size: 16px; }   /* 16px: iOS does not zoom */
  .bsr-pf-foot { gap: 8px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .bsr-pf-reset { font-size: 11px; }
  .bsr-pf-save { padding: 0 14px; }
  .bsr-pf-go { flex: 1 1 auto; min-width: 0; padding: 0 14px; }
}

/* For sale | Sold, or For rent | Leased, above the list's title (VOW Batch 3, 2026-10-11): on every search while Sold listings is On, so here, not in vow.css. */
.bsr-ps-kinds { display: flex; gap: 22px; margin: 0 0 12px; }
.bsr-ps-kinds a {
  white-space: nowrap;   /* FOR SALE on one line (audit B27) */
  padding: 0 0 6px; border-bottom: 2px solid transparent; text-decoration: none;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-grey);
  transition: color .2s, border-color .2s;
}
.bsr-ps-kinds a:hover { color: var(--brand-dark); }
.bsr-ps-kinds a.is-on { color: var(--brand-dark); border-bottom-color: var(--brand-primary); }

/* The filters panel's top row with four kinds (Sold listings On). */
.bsr-pf-trans.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bsr-pf-trans.is-four span { letter-spacing: .08em; }

/* The list's head: what is showing, how many, and the order. */
.bsr-ps-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 24px 28px 0; }
.bsr-ps-side { min-width: 0; }
.bsr-ps-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 18px; }   /* the tools under the title when short of room (audit B27) */
.bsr-ps-title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; color: var(--brand-dark); }
.bsr-ps-count { margin: 4px 0 0; font-size: 13px; color: var(--brand-grey-mid); }   /* Grey, mid (Andre, 2026-10-14) */
.bsr-ps-near { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--brand-grey); }   /* an address with no listing (2026-10-14) */
/* Sort (2026-10-12): a button and a small panel of choices, as the search bar's, not the
   browser's own list (property_search.php; property-search-bar.js opens and closes it). */
.bsr-ps-sort { position: relative; }
.bsr-ps-sort-btn {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 0;
  background: none; border: 0; font-family: inherit; color: inherit; cursor: pointer;
}
.bsr-ps-sort-v { font-size: 14px; font-weight: 600; color: var(--brand-dark); white-space: nowrap; }
.bsr-ps-sort .chev { color: var(--brand-grey-light); transition: transform .2s; }
.bsr-ps-sort.open .chev { transform: rotate(180deg); }
.bsr-ps-sort-pop {
  display: none; position: absolute; top: calc(100% + 8px); right: -8px; z-index: 6; min-width: 230px; padding: 8px;
  background: var(--brand-white); border: 1px solid var(--ps-line); border-radius: 12px;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--bsr-shade) 16%, transparent);
}
.bsr-ps-sort.open .bsr-ps-sort-pop { display: block; }
.bsr-ps-sort-pop.is-left { left: 0; right: auto; }   /* property-search-bar.js: it would start off the screen */
.bsr-ps-sort-pop a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--brand-dark); white-space: nowrap; transition: background .15s;
}
.bsr-ps-sort-pop a:hover, .bsr-ps-sort-pop a:focus-visible { background: color-mix(in srgb, var(--brand-light) 70%, var(--brand-white)); outline: 0; }
.bsr-ps-sort-pop a.is-on { font-weight: 700; }
.bsr-ps-sort-pop a.is-on::after {
  content: ''; flex: none; width: 10px; height: 5px; margin-top: -3px;
  border-left: 2px solid var(--brand-primary); border-bottom: 2px solid var(--brand-primary); transform: rotate(-45deg);
}
/* Map or Gallery (2026-10-09): a two-way switch beside Sort. No outline (Andre, 2026-10-13): the
   track a shade darker than the page, with a soft inner shadow, so it looks pressed into it. */
.bsr-ps-tools { display: flex; align-items: center; gap: 24px; }
.bsr-ps-views {
  display: inline-flex; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--brand-dark) 6%, var(--bsr-page));
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--bsr-shade) 16%, transparent);
}
.bsr-ps-views a {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; text-decoration: none;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-grey); transition: background .2s, color .2s;
}
.bsr-ps-views a:hover { color: var(--brand-dark); }
.bsr-ps-views a.is-on { background: var(--brand-primary); color: var(--brand-white); }
.bsr-ps-split .bsr-listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bsr-ps-list { min-width: 0; transition: opacity .2s; }
.bsr-ps-list.is-loading { opacity: .45; pointer-events: none; }
.bsr-ps-list .bsr-paging { margin-top: 30px; }
/* isolation: Leaflet's panes and controls (z-index up to 1000) stay inside the map, under the console's panels. */
.bsr-ps-map { position: sticky; top: 24px; height: calc(100vh - 48px); min-height: 460px; isolation: isolate; border-radius: var(--bsr-radius); overflow: hidden; border: 1px solid var(--ps-line); background: color-mix(in srgb, var(--brand-light) 95.3%, var(--brand-dark)); }
.bsr-ps-map-in { position: relative; height: 100%; overflow: hidden; border-radius: inherit; }   /* clips the map (and its note) inside the frame on desktop */
.bsr-ps-map-canvas { width: 100%; height: 100%; }   /* not absolute: .leaflet-container is position: relative site-wide (below) */
/* Most results have no map position yet (listings.php): said on the map, above Leaflet's panes, below its controls' popups. */
.bsr-ps-map-note {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 900; max-width: calc(100% - 120px);
  background: var(--brand-white); color: var(--brand-dark); border-radius: 999px; padding: 8px 16px;
  font-size: 12.5px; line-height: 1.4; text-align: center; box-shadow: 0 2px 10px color-mix(in srgb, var(--bsr-shade) 18%, transparent);
}
.bsr-ps-toggle { display: none; }

/* Desktop: the list takes 42% of the window (never under 540px), the map the rest.
   The map in the listing cards' frame (Andre's mockup, 2026-10-14): white, 10px round
   it, 24px corners and their shadow, its top level with the list's title and its inner
   right edge with Save search; sticky 28px from the top until the list ends. It runs
   down to 28px above the window's foot: property-map.js sets its height while the page
   is scrolled less than that, the map inside keeps the stuck height (Leaflet never
   resizes), and the frame shows what fits. */
@media (min-width: 981px) {
  .bsr-ps-split { grid-template-columns: minmax(540px, 42%) minmax(0, 1fr); gap: 0; padding: 0; }
  .bsr-ps-side { padding: 39px 28px 40px; }
  .bsr-ps-head { align-items: center; }
  .bsr-ps-map {
    top: 28px; height: calc(100vh - 56px); min-height: 0; margin: 44px 18px 28px 0; padding: 10px; overflow-anchor: none;   /* its height follows the scroll: never the page's scroll anchor */
    border: 0; border-radius: 24px; background: var(--brand-white); box-shadow: 0 10px 28px color-mix(in srgb, var(--bsr-shade) 7%, transparent);
  }
  .bsr-ps-map-in { border-radius: 14px; background: color-mix(in srgb, var(--brand-light) 95.3%, var(--brand-dark)); }
  .bsr-ps-map-canvas { height: max(440px, calc(100vh - 76px)); }
  /* Gallery: no map; the list takes the width, five to a row (four, then three
     on narrower desktops). Compact cards (2026-10-09, Andre): the photo 20px
     shorter than the card's 4:3 at any width (75cqw of the card), the gaps
     and the card's padding a step tighter. */
  .bsr-ps-split.is-gallery { grid-template-columns: minmax(0, 1fr); }
  .bsr-ps-split.is-gallery .bsr-listing-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  .bsr-ps-split.is-gallery .bsr-listing-card { container-type: inline-size; }
  .bsr-ps-split.is-gallery .bsr-listing-card .photo { aspect-ratio: auto; height: calc(75cqw - 35px); }   /* inset 10px a side since 2026-10-12 */
  .bsr-ps-split.is-gallery .bsr-listing-card .body { padding: 16px 16px 18px; }
}
@media (min-width: 981px) and (max-width: 1600px) { .bsr-ps-split.is-gallery .bsr-listing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 981px) and (max-width: 1280px) { .bsr-ps-split.is-gallery .bsr-listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Phones keep their Map / List button; the switch shows only in Gallery, as the way back to the map. */
@media (max-width: 980.98px) { .bsr-ps-split:not(.is-gallery) .bsr-ps-views { display: none; } }
/* Narrower desktops (2026-10-14, measured with every facet on Any): steps that keep the place box
   ending at the list's edge as long as they can, so Listing stays over the map's frame down to
   about 1170px; under that the place box gives way. Save search shrinks to its icon under 1720px,
   the facets close up under 1530px, Size is left to the filters panel under 1450px, Baths under
   1300px. A facet showing a long value, Clear or the Filters count take from the place box. */
@media (min-width: 981px) and (max-width: 1719px) {
  .bsr-ps-save { width: 54px; padding: 0; }
  .bsr-ps-save span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 981px) and (max-width: 1529px) { .bsr-ps-fbtn, .bsr-ps-facet:last-child .bsr-ps-fbtn { column-gap: 20px; } }
@media (min-width: 981px) and (max-width: 1449px) { .bsr-ps-facet.is-size { display: none; } }
@media (min-width: 981px) and (max-width: 1299px) { .bsr-ps-facet.is-baths { display: none; } }

/* Phones and tablets: the page scrolls. The place box and the Filters button make one
   bordered box; under it the facets as a row of pills (Andre, 2026-10-12, as the portals
   do), each opening its panel the width of the row. Price, Beds and Type say their names
   (a value would not fit), Listing its kind. Baths and Size from 600px wide; under 375px
   Type is left to the filters panel. */
@media (max-width: 980.98px) {
  .bsr-ps-app { --ps-box: color-mix(in srgb, var(--brand-light) 60%, var(--brand-tint, var(--brand-accent))); }
  .bsr-ps-app.is-lines-primary { --ps-box: var(--ps-line); }
  .bsr-ps-bar { flex-wrap: wrap; gap: 10px 12px; padding: 12px 16px; }
  .bsr-ps-console { flex: 1 1 100%; flex-wrap: wrap; row-gap: 10px; height: auto; background: none; border: 0; border-radius: 0; }
  .bsr-ps-console:focus-within { box-shadow: none; }
  .bsr-ps-where {
    flex: 1 1 0; height: 52px; padding: 0 14px; background: var(--brand-white);
    border: 1px solid var(--ps-box); border-right: 0; border-radius: 12px 0 0 12px;
  }
  .bsr-ps-where input { font-size: 16px; }
  .bsr-ps-more {
    display: inline-flex; align-items: center; gap: 8px; flex: none; height: 52px; margin: 0; padding: 0 16px;
    background: var(--brand-white); border: 1px solid var(--ps-box); border-left-color: var(--ps-line); border-radius: 0 12px 12px 0; cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark);
  }
  .bsr-ps-where:focus-within, .bsr-ps-console:has(.bsr-ps-where :focus) .bsr-ps-more { border-color: var(--brand-accent-dark); }
  .bsr-ps-console:has(.bsr-ps-where :focus) .bsr-ps-more { border-left-color: var(--ps-line); }
  .bsr-ps-more b {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--brand-primary); color: var(--brand-white); font-size: 10px; letter-spacing: 0;
  }
  .bsr-ps-facets { position: relative; display: flex; gap: 6px; flex: 1 1 100%; }
  /* The row filled edge to edge (Andre, 2026-10-14): each button grows from its own width, its words centred. */
  .bsr-ps-facets .bsr-ps-facet { position: static; flex: 1 1 auto; width: auto; min-width: 0; border: 0; }
  .bsr-ps-facet.is-baths, .bsr-ps-facet.is-size { display: none; }
  .bsr-ps-facets .bsr-ps-facet .bsr-ps-fbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 40px; padding: 0 10px 0 13px;
    background: var(--brand-white); border: 1px solid var(--ps-box); border-radius: 12px !important;   /* the place box's corners, not pills (Andre, 2026-10-14) */
  }
  .bsr-ps-facets .bsr-ps-facet .bsr-ps-fbtn:hover, .bsr-ps-facets .bsr-ps-facet.open .bsr-ps-fbtn { background: color-mix(in srgb, var(--brand-light) 70%, var(--brand-white)); }
  .bsr-ps-facet:not(.is-kind) .bsr-ps-v, .bsr-ps-facet.is-kind .bsr-ps-k { display: none; }
  .bsr-ps-facets .bsr-ps-k, .bsr-ps-facets .bsr-ps-v {
    font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--brand-dark);
  }
  .bsr-ps-facets .bsr-ps-facet .chev { color: var(--brand-dark); }
  .bsr-ps-facets .bsr-ps-facet.is-set .bsr-ps-fbtn { border-color: var(--brand-primary); }
  .bsr-ps-facets .bsr-ps-facet.is-set :is(.bsr-ps-k, .bsr-ps-v) { color: var(--brand-primary); }
  .bsr-ps-facets .bsr-ps-facet.is-set .bsr-ps-k::after { display: none; }
  .bsr-ps-facets .bsr-ps-facet .bsr-ps-pop { top: calc(100% + 8px); left: 0; right: 0; width: auto; }
  .bsr-ps-facet.is-kind .bsr-pf-chips { flex-wrap: wrap; }
  .bsr-ps-save { flex: 1 1 auto; height: 46px; }
  .bsr-ps-split { display: block; padding: 18px 16px 0; }
  .bsr-ps-map { display: none; position: relative; top: 0; height: 72vh; }
  .bsr-ps-split.show-map .bsr-ps-map { display: block; }
  .bsr-ps-split.show-map .bsr-ps-side { display: none; }
  .bsr-ps-toggle {
    display: inline-flex; align-items: center; gap: 8px; position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 450;
    background: var(--brand-primary); color: var(--brand-white); border: 1px solid color-mix(in srgb, var(--brand-light) 35%, transparent); border-radius: 999px; padding: 12px 26px; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 6px 20px color-mix(in srgb, var(--bsr-shade) 30%, transparent);
  }
  .bsr-ps-toggle .to-list, .bsr-ps-split.show-map .bsr-ps-toggle .to-map { display: none; }
  .bsr-ps-split.show-map .bsr-ps-toggle .to-list { display: inline; }
}
@media (min-width: 600px) and (max-width: 980.98px) {
  .bsr-ps-facet.is-baths, .bsr-ps-facet.is-size { display: flex; }
  .bsr-ps-facets .bsr-ps-facet .bsr-ps-pop { right: auto; width: 440px; }   /* not a slider the width of a tablet */
}
@media (max-width: 374px) { .bsr-ps-facet.is-type { display: none; } }
@media (max-width: 620px) {
  .bsr-ps-split .bsr-listing-grid { grid-template-columns: 1fr; }
  /* Sort's panel from the row's left edge (audit B1: it hung from Sort's right, off the screen). */
  .bsr-ps-tools { position: relative; }
  .bsr-ps-sort { position: static; }
  .bsr-ps-sort-pop { left: 0; right: auto; }
  .bsr-ps-head { align-items: flex-start; flex-direction: column; gap: 10px; }
}

/* Markers (2026-10-09): a price tag where one fits, a small dot where it would
   overlap (property-map.js decides), a building's units as one "N units" tag,
   all in the brand colour Websites → Brokerage Site → Settings → Map markers
   picks (--bsr-pin on the map box; the primary by default), white text, the
   brand's dark while hovered. The icon box is 0 x 0 at the point; the tag
   sits above it, the dot on it. A dot shows its price while hovered, or while
   its card is hovered. */
.bsr-pin-wrap { background: none; border: 0; }
/* The address searched for, where no listing is (property-map.js, 2026-10-14): a dark location pin, over the
   listings' tags, so it reads as "here", not as one more listing. */
.bsr-near-pin { background: none; border: 0; }
.bsr-near-pin svg { display: block; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.bsr-near-pin path { fill: var(--brand-dark); stroke: var(--brand-white); stroke-width: 1.5; }
.bsr-near-pin circle { fill: var(--brand-white); }
.leaflet-control-attribution:empty { display: none; }   /* Google and Liberty credit themselves, leaving Leaflet's box blank */
.bsr-pin {
  position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 7px));
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bsr-pin, var(--brand-primary)); color: var(--brand-white); white-space: nowrap; cursor: pointer;
  font: 700 12px/1 var(--brand-font); letter-spacing: 0.02em;
  padding: 6px 8px; border-radius: 4px; box-shadow: 0 2px 6px color-mix(in srgb, var(--bsr-shade) 28%, transparent);
}
.bsr-pin::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--bsr-pin, var(--brand-primary)); }
.bsr-pin svg { flex: none; }
.bsr-pin-wrap:hover .bsr-pin, .bsr-pin-wrap.is-hot .bsr-pin { background: var(--bsr-pin-hover, var(--brand-dark)); }   /* --bsr-pin-hover: set where the markers are the dark already (listings.php) */
.bsr-pin-wrap:hover .bsr-pin::after, .bsr-pin-wrap.is-hot .bsr-pin::after { border-top-color: var(--bsr-pin-hover, var(--brand-dark)); }
.bsr-dot {
  position: absolute; left: 0; top: 0; width: 12px; height: 12px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--bsr-pin, var(--brand-primary)); border: 2px solid var(--brand-white); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s;
}
.bsr-dot.is-units { width: 14px; height: 14px; border-radius: 3px; }
.bsr-dot::after {
  content: attr(data-label); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  display: none; background: var(--brand-dark); color: var(--brand-white); white-space: nowrap;
  font: 700 12px/1 var(--brand-font); padding: 6px 8px; border-radius: 4px; box-shadow: 0 2px 6px color-mix(in srgb, var(--bsr-shade) 28%, transparent);
}
.bsr-pin-wrap:hover .bsr-dot, .bsr-pin-wrap.is-hot .bsr-dot { transform: translate(-50%, -50%) scale(1.25); background: var(--bsr-pin-hover, var(--brand-dark)); }
.bsr-pin-wrap:hover .bsr-dot::after, .bsr-pin-wrap.is-hot .bsr-dot::after { display: block; }

/* A pin's popup: the result card, compact. */
.bsr-ps-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: var(--bsr-radius); overflow: hidden; }
.bsr-ps-popup .leaflet-popup-content { margin: 0; width: 250px !important; }
.bsr-ps-popup .bsr-listing-card { border: 0; border-radius: 0; box-shadow: none; }
.bsr-ps-popup .bsr-listing-card:hover { box-shadow: none; }
.bsr-ps-popup .bsr-listing-card .photo { margin: 8px 8px 0; aspect-ratio: 16/10; border-radius: 10px; }
.bsr-ps-popup .bsr-listing-card .price { font-size: 16px; left: 10px; bottom: 8px; }
.bsr-ps-popup .bsr-listing-card .body { padding: 12px 14px 14px; }
.bsr-ps-popup .bsr-listing-card .addr { font-size: 13px; }
.bsr-ps-popup .bsr-listing-card .specs { margin-bottom: 5px; }
.bsr-ps-popup .bsr-listing-card .specs, .bsr-ps-popup .bsr-listing-card .mls { font-size: 11px; }
.bsr-ps-popup a.leaflet-popup-close-button { color: var(--brand-white); text-shadow: 0 1px 3px rgba(0,0,0,.6); z-index: 2; }
/* Opened below its pin (no room above, property-map.js): the tip moves to the top and points up. */
.bsr-ps-popup.is-below .leaflet-popup-tip-container { top: -19px; transform: rotate(180deg); }
/* A building's popup: its address, then its units as short rows, scrolling
   (2026-10-09; sized from Andre's reference: a 40px photo, five rows in view
   where one card used to fit). A row runs about 83px, not the reference's
   72: most offices' names wrap the courtesy line onto a second line. */
.bsr-ps-popup.is-spot .leaflet-popup-content { width: 280px !important; }
.bsr-ps-popup.is-spot a.leaflet-popup-close-button { color: var(--brand-dark); text-shadow: none; }
.bsr-ps-spot-head { padding: 14px 34px 12px 16px; border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); }
.bsr-ps-spot-head .k { font: 700 11px/1.2 var(--brand-font); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-grey); }
.bsr-ps-spot-head .a { margin-top: 8px; font: 700 14px/1.3 var(--brand-font); letter-spacing: .02em; text-transform: uppercase; color: var(--brand-dark); }
.bsr-ps-spot-head .c { margin-top: 2px; font-size: 13px; line-height: 1.3; color: var(--brand-grey-light); }
.bsr-ps-spot { max-height: 420px; overflow-y: auto; scrollbar-width: thin; padding: 4px 0; }
.bsr-ps-unit { display: flex; align-items: center; gap: 14px; padding: 8px 16px; color: inherit; text-decoration: none; }
.bsr-ps-popup .bsr-ps-unit { color: inherit; }
.bsr-ps-unit:hover { background: color-mix(in srgb, var(--brand-dark) 4%, transparent); }
.bsr-ps-unit img { flex: none; width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.bsr-ps-unit .u-body { display: flex; flex-direction: column; min-width: 0; }
.bsr-ps-unit .u-price { font: 700 15px/1.3 var(--brand-font); color: var(--brand-dark); }
.bsr-ps-unit .u-addr { font-size: 14px; line-height: 1.3; color: var(--brand-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsr-ps-unit .u-specs { font-size: 14px; line-height: 1.3; color: var(--brand-grey); }
.bsr-ps-unit .u-courtesy { font-size: 14px; line-height: 1.3; color: var(--brand-grey-mid); }   /* Grey, mid as on the cards (re-check F7; Grey, light read 3.7:1) */   /* wraps, never cut: the board wants the office named in full, the size of the details beside it (IDX 6.3(c)) */

/* ---------- Neighbourhood profile page ---------- */
.bsr-hood-hero { position: relative; height: 46vh; min-height: 320px; overflow: hidden; }
.bsr-hood-hero::before {
  content: ''; position: absolute; inset: -20px;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--bsr-shade) 15%, transparent) 0%, color-mix(in srgb, var(--bsr-shade) 60%, transparent) 100%), var(--bsr-hero-img);
  background-size: cover; background-position: center;
  filter: blur(3px);
}
.bsr-hood-hero .info { position: absolute; left: 0; right: 0; bottom: 36px; z-index: 1; color: var(--brand-white); }
.bsr-score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 28px 0 8px; }
.bsr-score-card { text-align: center; border: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); padding: 22px 12px; }
.bsr-score-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-grey-light); margin-top: 6px; }
.bsr-score-empty { font-size: 13px; color: var(--brand-grey-light); font-style: italic; }
.bsr-ring { position: relative; width: 120px; height: 120px; margin: 0 auto; }
.bsr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bsr-ring .ring-track { fill: none; stroke: color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); stroke-width: 8; }
.bsr-ring .ring-fill { fill: none; stroke: var(--brand-primary); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 1.2s ease; }
.bsr-ring .ring-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: var(--brand-primary); }
.bsr-biz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.bsr-biz-card { border: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); border-radius: var(--bsr-radius); overflow: hidden; transition: border-color var(--bsr-ease), box-shadow var(--bsr-ease); }
.bsr-biz-card:hover { border-color: var(--brand-accent); box-shadow: 0 8px 22px color-mix(in srgb, var(--bsr-shade) 8%, transparent); }
.bsr-biz-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.bsr-biz-card .body { padding: 16px 18px; }
.bsr-biz-card.no-photo .body { padding: 18px 20px; }
.bsr-biz-card .name { font-weight: 700; font-size: 14px; }
.bsr-biz-card .cat { font-size: 12px; color: var(--brand-grey-light); margin-top: 4px; }
.bsr-biz-card .rating { font-size: 12px; color: var(--brand-accent-dark); font-weight: 700; margin-top: 8px; }
/* ---------- Leaflet containment ----------
   Leaflet stacks its own furniture high: panes up to 700 and .leaflet-top /
   .leaflet-bottom (the zoom buttons and attribution) at 1000. The off-canvas
   nav is z-index 700, so on any page with a map those controls punched
   straight through the open menu.

   Giving the map container its own stacking context traps all of that inside
   it — z-index 1000 then only means "top of the map", not "top of the page".
   Applied to .leaflet-container so it covers every map at once: neighbourhood,
   development, office and contact. position is set explicitly rather than
   relying on Leaflet's own inline style, since z-index does nothing on a
   statically-positioned element. */
.leaflet-container { position: relative; z-index: 0; }
/* What a map's popup says (an office's name and address, a listing's card) in the body font (Andre, 2026-10-15);
   a part with a font of its own (a card's price) keeps it. */
.leaflet-container .leaflet-popup-content { font-family: var(--brand-font-body); }
/* The contact map's pale basemap (2026-09-28): OpenStreetMap tiles greyed out,
   standing in for CARTO's Positron style, which now needs an API key. On the
   tile layer only (Leaflet's className option), so the primary pin stays red. */
.bsr-map-pale { filter: grayscale(1) brightness(1.06) contrast(.88); }

.bsr-hood-map { width: 100%; height: 340px; border: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); }
@media (max-width: 768.98px) {
  .bsr-score-grid { grid-template-columns: 1fr; }
  .bsr-biz-grid { grid-template-columns: 1fr; }
}

.bsr-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 90px; column-gap: 100px; margin-top: 20px; }
.bsr-team-card { text-align: center; }
.bsr-team-card .photo { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--bsr-band); border-radius: var(--bsr-radius); transition: background-color .35s ease; }
.bsr-team-card .photo:hover { background: var(--brand-accent); }
.bsr-team-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.bsr-team-card .photo .info-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 10px;
  /* small bottom-up scrim — just enough contrast for the icon, the photo
     stays clean; whole layer fades in on hover (gradients can't animate) */
  background: linear-gradient(0deg, color-mix(in srgb, var(--bsr-shade) 55%, transparent) 0%, color-mix(in srgb, var(--bsr-shade) 0%, transparent) 30%);
  color: var(--brand-white);
  opacity: 0;
  transition: opacity var(--bsr-ease);
}
.bsr-team-card .photo .info-overlay svg { opacity: 0; transform: scale(.8); transition: opacity var(--bsr-ease), transform var(--bsr-ease); }
.bsr-team-card .photo:hover .info-overlay { opacity: 1; }
.bsr-team-card .photo:hover .info-overlay svg { opacity: 1; transform: scale(1); }
.bsr-team-card .name { font-size: 17px; font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 20px; color: var(--brand-dark); }
.bsr-team-card .title { font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-accent-dark); margin-top: 2px; }
.bsr-team-card .bio { font-size: 14px; color: var(--brand-grey); line-height: 1.8; margin-top: 14px; }
@media (max-width: 900.98px) { .bsr-team-grid { grid-template-columns: repeat(3, 1fr); row-gap: 70px; column-gap: 33px; } }
@media (max-width: 560px) { .bsr-team-grid { grid-template-columns: repeat(2, 1fr); row-gap: 56px; column-gap: 33px; } }

.bsr-agent-photo { aspect-ratio: 1/1; overflow: hidden; background: var(--bsr-band); border-radius: var(--bsr-radius); }
.bsr-agent-photo img { width: 100%; height: 100%; object-fit: cover; }
.bsr-back-link { position: relative; z-index: 501; } /* sit above .bsr-header (z-index:500), which otherwise blocks clicks in its 183px band even where visually empty */
/* An agent's page (Andre, 2026-10-15): "Meet the Team" 15px higher, the photo where it was, so 15px more between
   them; 200px under the profile and its bio, the listings, the form and More From Our Team, so 200px between
   each and before what follows (100px on phones, as before). */
.bsr-agent-hero .bsr-back-link { top: -15px; }
@media (min-width: 769px) { .bsr-section.bsr-agent-sec { padding-bottom: 200px; } }
/* The team's cards 200px clear of what follows them (Andre, 2026-10-15: Work with us sat 40px under the names). */
@media (min-width: 769px) { .bsr-section.bsr-team-sec { padding-bottom: 200px; } }
.bsr-agent-heading { margin-bottom: 24px; }
.bsr-agent-heading .name { font-size: 25px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--brand-dark); }
.bsr-agent-heading .title { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-accent-dark); margin-top: 4px; }
.bsr-agent-details { display: grid; grid-template-columns: auto 1fr; gap: 28px 60px; }
.bsr-agent-details .col { display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 640px) { .bsr-agent-details { grid-template-columns: 1fr; } }

/* Large decorative monogram, bled off the right edge of the viewport,
   sitting behind every element on the agent profile page (negative
   z-index puts it below both the absolutely-positioned header and the
   normal page content, since neither establishes its own stacking context). */
.bsr-agent-mono {
  position: absolute;
  top: -625px;
  right: 50px;
  width: 1456.82px;
  max-width: none;
  z-index: -1;
  pointer-events: none;
}
/* The Brand Guide's monogram, both parts in the accent at 5% (ag_brand_svg() paints them from the two vars). */
.bsr-agent-mono svg { width: 100%; height: auto; display: block; --brand-ink: var(--brand-accent); --brand-swoosh: var(--brand-accent); }
.bsr-agent-mono svg * { fill-opacity: 0.05; }
@media (max-width: 1100px) { .bsr-agent-mono { display: none; } }

/* "More From Our Team" — horizontal scroll-snap row, native touch/trackpad
   drag on top of the arrow buttons (no carousel library needed). */
.bsr-agent-row-wrap { position: relative; margin-top: 30px; }
.bsr-agent-row {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 4px 4px 12px;
  scrollbar-width: none;
}
.bsr-agent-row::-webkit-scrollbar { display: none; }
.bsr-agent-row-card { flex: 0 0 180px; scroll-snap-align: start; text-align: center; }
/* Phones: exactly two full cards per view — no cut-off card; the dots below
   are the scroll cue. Width is computed so 2 cards + the gap fill the row. */
@media (max-width: 640px) {
  /* The row runs to the screen's edges (Andre, 2026-10-15: a strip that scrolls sideways is full width); the two
     cards still fill the text's width, the next one shows at the edge. */
  .bsr-agent-row { gap: 16px; margin-inline: -40px; padding-inline: 40px; scroll-padding-inline: 40px; }
  .bsr-agent-row-card { flex-basis: calc((100% - 16px) / 2); }
}
/* Nav dots under the row — built by site.js, one per scroll "page"; the
   active dot tracks scroll position and tapping a dot scrolls there. */
.bsr-row-dots { display: flex; justify-content: center; gap: 9px; margin-top: 20px; }
.bsr-row-dots:empty { display: none; }
.bsr-row-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: color-mix(in srgb, var(--brand-dark) 18%, transparent); transition: background .25s ease, transform .25s ease;
}
.bsr-row-dots button.active { background: var(--brand-accent-dark); transform: scale(1.3); }
.bsr-agent-row-card .photo { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--bsr-band); border-radius: var(--bsr-radius); }
.bsr-agent-row-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bsr-agent-row-card:hover .photo img { transform: scale(1.06); }
.bsr-agent-row-card .name { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 12px; color: var(--brand-dark); }
.bsr-agent-row-card .title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-accent-dark); margin-top: 2px; }
.bsr-row-nav {
  position: absolute; top: 78px; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-white); border: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); color: var(--brand-dark);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--bsr-shade) 12%, transparent);
  transition: background var(--bsr-ease), color var(--bsr-ease), border-color var(--bsr-ease);
}
.bsr-row-nav:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-white); }
.bsr-row-nav.prev { left: 0; transform: translateX(-50%); }
.bsr-row-nav.next { right: 0; transform: translateX(50%); }
@media (max-width: 640px) { .bsr-row-nav { display: none; } }

/* Each neighbourhood-page section as its own clearly separated block */
.bsr-hood-block { padding: 200px 0; border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 89.5%, var(--brand-accent)); }
.bsr-hood-block:last-of-type { border-bottom: none; }
.bsr-hood-block .block-title { font-size: 20px; margin: 0 0 4px; }
@media (max-width: 900.98px) { .bsr-hood-block { padding: 90px 0; } }

/* At A Glance stat cards with icons */
.bsr-glance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.bsr-glance-card { text-align: center; border: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); padding: 30px 16px; }
.bsr-glance-card .icon { width: 34px; height: 34px; margin: 0 auto 14px; color: var(--brand-primary); }
.bsr-glance-card .icon svg { width: 100%; height: 100%; }
@media (max-width: 640px) { .bsr-glance-grid { grid-template-columns: 1fr; } }

/* At A Glance map + stats split (map left, 2x3 stat grid right) */
.bsr-glance-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.bsr-glance-split.no-map { grid-template-columns: 1fr; }
.bsr-glance-split .bsr-glance-grid.cols-2 { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.bsr-glance-split.no-map .bsr-glance-grid.cols-2 { grid-template-columns: repeat(3, 1fr); }
.bsr-glance-map { display: flex; flex-direction: column; }
.bsr-glance-map .bsr-hood-map { flex: 1; height: auto; min-height: 340px; }
@media (max-width: 900.98px) {
  .bsr-glance-split { grid-template-columns: 1fr; }
  .bsr-glance-map .bsr-hood-map { height: 320px; }
}
@media (max-width: 640px) { .bsr-glance-split .bsr-glance-grid.cols-2 { grid-template-columns: 1fr; } }

/* Demographics tabs (Population / Households / Employment) */
.bsr-demo-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 34px; }
.bsr-demo-tab {
  border: 1px solid var(--brand-primary); color: var(--brand-primary); background: transparent;
  padding: 10px 22px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 999px; cursor: pointer; transition: background var(--bsr-ease), color var(--bsr-ease);
}
.bsr-demo-tab.active { background: var(--brand-primary); color: var(--brand-white); }
.bsr-demo-panel { display: none; }
.bsr-demo-panel.active { display: block; }

/* Schools table + level tabs */
.bsr-school-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 8px; }
.bsr-school-table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.bsr-school-table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-grey-light); padding: 10px 12px; border-bottom: 2px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent)));
}
.bsr-school-table td { padding: 14px 12px; border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 89.5%, var(--brand-accent)); font-size: 14px; vertical-align: top; }
.bsr-school-table .s-name { font-weight: 700; }
.bsr-school-table .s-addr { color: var(--brand-grey-light); font-size: 12.5px; margin-top: 2px; }

/* Simple horizontal bar visualizations (age groups, education, marital status, occupation) */
.bsr-bar-list { display: flex; flex-direction: column; gap: 14px; }
.bsr-bar-row { display: grid; grid-template-columns: 160px 1fr 130px; align-items: center; gap: 14px; }
.bsr-bar-row .bar-label { font-size: 13px; color: var(--brand-grey); }
.bsr-bar-row .bar-track { height: 8px; background: color-mix(in srgb, var(--brand-light) 89.5%, var(--brand-accent)); border-radius: 999px; overflow: hidden; }
.bsr-bar-row .bar-fill { display: block; height: 100%; width: 0; background: var(--brand-primary); border-radius: 999px; transition: width 1s cubic-bezier(.16,1,.3,1); }
.bsr-bar-row .bar-value { font-size: 12.5px; color: var(--brand-grey-light); text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
  .bsr-bar-row { grid-template-columns: 1fr; gap: 4px; }
  .bsr-bar-row .bar-value { text-align: left; }
}
.bsr-school-empty { font-size: 13px; color: var(--brand-grey-light); font-style: italic; margin-top: 18px; }

.bsr-paging { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.bsr-pg {
  min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--brand-light) 66%, var(--brand-tint, var(--brand-accent))); color: var(--brand-dark); font-size: 13px; font-weight: 600; padding: 0 10px;
}
.bsr-pg:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.bsr-pg.active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-white); }

/* ---------- Property detail ---------- */
.bsr-prop-hero { position: relative; min-height: max(340px, 39vh); display: flex; align-items: flex-end; }   /* 39% of the window: 391px at 996 tall (Andre's mockup, 2026-10-14) */
/* A dark fade behind the header at the top of the photo, so the menu reads on any photo (Andre, 2026-10-14:
   the Gaggi Group theme's, theme-gaggi.css, in the brand's dark). Over the photo, under the words. */
.bsr-prop-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 180px; pointer-events: none;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--bsr-shade) 88%, transparent) 0%, color-mix(in srgb, var(--bsr-shade) 0%, transparent) 100%);
}
.is-staff-frame .bsr-prop-hero::before { display: none; }   /* the dashboard's MLS Search frame has no header to set off (re-check 2 D12) */
.bsr-prop-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bsr-prop-hero .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bsr-shade) 25%, transparent) 0%, color-mix(in srgb, var(--bsr-shade) 75%, transparent) 100%); }
/* The photo's foot (Andre's mockup, 2026-10-14): the heart at the left; the tour and Photos at the right of the
   photo's left half, 22px clear of the photo cards, 16px over the photo's edge: white buttons, dark words. The
   top padding keeps them under the header on a short window. */
.bsr-prop-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; width: 100%; padding-top: 130px; padding-bottom: 16px; }
.bsr-prop-bar .bsr-save-home.is-hero { margin: 0; }
.bsr-prop-acts { display: flex; gap: 10px; margin-left: auto; }
@media (min-width: 981px) { .bsr-prop-hero.has-cards .bsr-prop-acts { margin-right: calc(50% - 8px + 22px); } }
.bsr-prop-act {
  display: inline-flex; align-items: center; height: 30px; padding: 0 22px; border-radius: 4px;
  background: var(--brand-white); color: var(--brand-dark);
  font-size: 13px; font-weight: 700; letter-spacing: .04em; line-height: 1; text-transform: uppercase; white-space: nowrap;
}
.bsr-prop-act:hover { background: color-mix(in srgb, var(--brand-white) 86%, var(--brand-dark)); }
@media (max-width: 640px) { .bsr-prop-act { height: 28px; padding: 0 14px; font-size: 12px; } }
/* View N photos: its words as View all N photos below (.bsr-btn; Andre, 2026-10-15); GG's in theme-gaggi.css. */
.bsr-prop-act.is-photos { font-size: 12px; font-weight: 700; letter-spacing: .16em; }

/* Under the photo, first in the main column (Andre's mockup, 2026-10-14, measured at 1883px): the price 44px with
   the estimated payment beside it, the type over the board's number at the row's right end; then the street
   (the page's heading) 22px, its town and the listing brokerage in grey. The card beside starts level. */
.bsr-prop-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 18px; margin: 22px 0 56px; }
.bsr-prop-pricerow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; min-width: 0; }
.bsr-prop-price { margin: 0; font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; line-height: 1.1; color: var(--brand-dark); }
.bsr-prop-kind { margin: 2px 0 0; text-align: right; font-family: var(--brand-font-body); font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--brand-dark); }
.bsr-prop-kind span { display: block; font-weight: 400; color: var(--brand-grey-mid); }
.bsr-prop-where { grid-column: 1 / -1; }
.bsr-prop-addr { margin: 0; font-family: var(--brand-font-body); font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--brand-dark); }
.bsr-prop-loc { margin: 2px 0 0; font-family: var(--brand-font-body); font-size: 17px; line-height: 1.4; color: var(--brand-grey-mid); }
.bsr-prop-loc.is-by { margin-top: 6px; font-size: 15px; }
@media (max-width: 640px) {
  .bsr-prop-title { grid-template-columns: minmax(0, 1fr); row-gap: 14px; margin-top: 8px; }
  .bsr-prop-kind { text-align: left; }
  .bsr-prop-addr { font-size: 20px; }
}

/* The estimated monthly payment beside the price (Andre's mockups, 2026-10-14; property.php, property-pay.js): a
   dark pill; it opens a card with the breakdown and the visitor's own figures. */
.bsr-pay { position: relative; }
.bsr-pay-pill {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; height: 27px; padding: 0 10px; cursor: pointer;
  border: 0; border-radius: 5px; background: var(--brand-dark);
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; color: var(--brand-white); transition: background var(--bsr-ease);
}
.bsr-pay-pill b { font-weight: 700; }
.bsr-pay-pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.bsr-pay-pill:hover, .bsr-pay.is-open .bsr-pay-pill { background: color-mix(in srgb, var(--brand-dark) 82%, var(--brand-white)); }
/* The card in the middle of the window (Andre, 2026-10-15: under the pill it ran off the bottom), the page dimmed
   behind it; a short window scrolls the card, not the page. Above the header (500) and side menu (700), under the
   sign-up, save-search and other boxes (900 up); theme-gaggi.css lifts it over the GG header. */
.bsr-pay-pop {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 850;
  width: min(370px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 20px 22px 18px;
  border-radius: 14px; background: var(--brand-white); color: var(--brand-dark); text-align: left;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--bsr-shade) 24%, transparent);
}
.bsr-pay-dim { position: fixed; inset: 0; z-index: 849; background: color-mix(in srgb, var(--bsr-shade) 45%, transparent); }
.bsr-pay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bsr-pay-head strong { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-grey); }
.bsr-pay-x { display: grid; place-items: center; width: 30px; height: 30px; margin: -6px -8px -6px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--brand-grey); cursor: pointer; }
.bsr-pay-x:hover { background: var(--brand-light); color: var(--brand-dark); }
.bsr-pay-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bsr-pay-total { margin: 8px 0 12px; font-size: 15px; color: var(--brand-grey); }
.bsr-pay-total span { font-size: 30px; font-weight: 800; color: var(--brand-dark); }
.bsr-pay-lines { margin: 0; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--brand-light) 80%, var(--brand-tint, var(--brand-accent))); border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 80%, var(--brand-tint, var(--brand-accent))); }
.bsr-pay-lines div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.bsr-pay-lines dt { color: var(--brand-grey); }
.bsr-pay-lines dd { margin: 0; font-weight: 700; }
/* The figures (2026-10-14): a small label over each box; the down payment's dollars and percent side by
   side on their own row, rate and years beside each other under them. Each box a field with its unit in it. */
.bsr-pay-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; margin: 16px 0 4px; }
.bsr-pay-f { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.bsr-pay-f.is-wide { grid-column: 1 / -1; }
.bsr-pay-lab { font-size: 12px; font-weight: 600; color: var(--brand-grey); }
.bsr-pay-pair { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 10px; }
.bsr-pay-box {
  display: flex; align-items: center; gap: 4px; height: 42px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--brand-light) 60%, var(--brand-grey)); border-radius: 8px; background: var(--brand-white);
  color: var(--brand-dark); font-size: 15px;
}
.bsr-pay-box:focus-within { border-color: var(--brand-dark); box-shadow: 0 0 0 1px var(--brand-dark); }
.bsr-pay-box input, .bsr-pay-box select {
  flex: 1 1 0; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: none;   /* width 0: a text box's own 20-character width pushed the box past its column */
  font: inherit; font-weight: 600; color: inherit;
}
.bsr-pay-box select { cursor: pointer; }
.bsr-pay-box.is-select { padding-right: 8px; }
.bsr-pay-u { flex: none; color: var(--brand-grey); font-weight: 500; }
.bsr-pay-ins, .bsr-pay-min { margin: 10px 0 0; font-size: 12.5px; color: var(--brand-dark); }
.bsr-pay-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--brand-grey); }

.bsr-prop-layout { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; }
@media (max-width: 980.98px) { .bsr-prop-layout { grid-template-columns: 1fr; } }
/* The enquiry form and Back to Search follow the page together (2026-10-09).
   The sidebar runs the page's height so they have room to travel. Together
   they are about 750px tall: a window too short to hold them at top: 100px
   (most laptops) keeps them in place, or their foot would be out of reach. */
.bsr-prop-layout > .side { align-self: stretch; }
.bsr-prop-stick .bsr-inquiry-card { position: static; }
/* Back to Search under the form (Andre, 2026-10-14): the brand's dark with its light words, as wide as Send Request
   (the card's sides; theme-gaggi.css has the Gaggi theme's). */
.bsr-prop-stick .bsr-prop-back { display: block; width: auto; margin: 16px 24px 0; text-align: center; background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-light); }
.bsr-prop-stick .bsr-prop-back:hover { background: color-mix(in srgb, var(--brand-dark) 82%, var(--brand-light)); border-color: color-mix(in srgb, var(--brand-dark) 82%, var(--brand-light)); color: var(--brand-light); }
.bsr-prop-stick .bsr-prop-back:first-child { margin-top: 0; }   /* the dashboard's MLS Search: no form above it */
@media (min-width: 981px) and (min-height: 880px) { .bsr-prop-stick { position: sticky; top: 100px; } }

/* The strip under the photo (Andre, 2026-10-13): a line icon over each figure, lines only between
   them, no box around. Each item as wide as its words plus an equal share, so a type stays on one
   line while there is room; when they don't all fit, the row wraps rather than break a figure (re-check
   D1, 2026-10-14: "76 / 0" from 981 to 1090px, and a sold listing's seven pushed the page sideways).
   Each item draws a line on its left and top; the strip clips the ones on its outer edge, so only the
   lines between them show, on one row or two. */
.bsr-prop-specs { --spec-line: color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); display: flex; flex-wrap: wrap; overflow: hidden; margin-bottom: 36px; }
.bsr-prop-specs > div { flex: 1 1 auto; text-align: center; padding: 18px 10px; box-shadow: -1px 0 0 var(--spec-line), 0 -1px 0 var(--spec-line); }
.bsr-prop-specs .ico {
  display: block; width: 26px; height: 26px; margin: 0 auto 10px;
  fill: none; stroke: var(--brand-primary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.bsr-prop-specs strong { display: block; font-family: var(--brand-font-body); font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--brand-primary); overflow-wrap: break-word; }
.bsr-prop-specs span { font-family: var(--brand-font-body); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-grey-light); }
/* Phones: three to a row; the lines as above. */
@media (max-width: 640px) {
  .bsr-prop-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bsr-prop-specs > div { padding: 16px 4px; }
  .bsr-prop-specs strong { font-size: 14px; }
}

/* Under the listing photo (Andre's mockup, 2026-10-14, measured at 1903px): the strip, and at the right the
   next two photos in a frame of the page's colour, 28px corners, the cards' shadow, rising into the photo to
   end 20px above the strip's foot (Andre, 2026-10-14); "Photos" on the second. Wide screens: the strip's items as wide as
   their words plus 42px a side (24px under 1281px), the strip starting that far left of the text above so the
   first item's words line up with it, short lines between them; the hero's text kept off the photos (its
   height: 44vh at least, above). Narrower: the photos as a pair under the strip. */
.bsr-prop-under { position: relative; }
/* No frame since 2026-10-15 (Andre's screenshot): the photo fills the card, its 28px corners and shadow. */
.bsr-prop-pcard {
  position: relative; display: block; border-radius: 28px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--bsr-shade) 7%, transparent);
}
.bsr-prop-pcard img { display: block; width: 100%; aspect-ratio: 11 / 8; object-fit: cover; border-radius: inherit; }
.bsr-prop-pwrap { position: relative; }
.bsr-prop-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 36px; }
@media (max-width: 640px) {   /* the pair at half a phone's width: smaller corners */
  .bsr-prop-pcard { border-radius: 18px; }
}
.bsr-prop-about { margin: 0 0 45px; }   /* where the short rule under it ended (it has none, Andre's mockup) */
/* A line down the right of the title and the About row (Andre's screenshot, 2026-10-15, measured): 2px wide, 10px
   into the gap before the card, from the type's top to the status line's foot; #e4e4e5, #2f3134 in dark mode.
   Two columns only. */
.bsr-prop-top { position: relative; --prop-vline: #e4e4e5; }
html[data-theme="dark"] .bsr-prop-top { --prop-vline: #2f3134; }
@media (min-width: 981px) {
  .bsr-prop-top::after { content: ''; position: absolute; top: 2px; bottom: 0; right: -12px; width: 2px; background: var(--prop-vline); pointer-events: none; }
}
/* "New | Listed Oct 14, 2026 | Updated 5h ago" on the heading's line at the column's right, the baselines level
   (Andre's screenshot, 2026-10-15, measured: about 15px, dark, light dividers 10px a side). Too long for the line,
   it drops under the heading at the left; with no heading, it stands alone at the right. */
.bsr-prop-abouthd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 0 0 45px; }
.bsr-prop-abouthd .bsr-prop-about { margin: 0; }
.bsr-prop-abouthd.is-alone { justify-content: flex-end; margin-bottom: 30px; }
/* Every part has its divider before it and the line starts 21px left of the box, which clips it: the first
   part's, and on a phone the one that starts the second row. */
.bsr-prop-meta {
  margin: 0; overflow: hidden;
  font-family: var(--brand-font-body); font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--brand-dark);
}
.bsr-prop-meta-in { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; margin-left: -21px; }
.bsr-prop-meta-in > span { white-space: nowrap; }
.bsr-prop-meta-in > span::before {
  content: ''; display: inline-block; width: 1px; height: 13px; margin: 0 10px; vertical-align: -1px; background: var(--brand-grey-light);
}
@media (max-width: 640px) {
  .bsr-prop-abouthd.is-alone, .bsr-prop-meta-in { justify-content: flex-start; }
  .bsr-prop-meta { font-size: 14px; }
}
/* A long description cut short (Andre's screenshot, 2026-10-15, measured): seven and a half lines, fading from the
   fourth line to nothing at the cut (Andre: "more gradiented"; it was the sixth to a fifth), "read more" under it
   in the heart's colour (GG red in theme-gaggi.css), its arrow dark.
   site.js adds .is-cut only past nine lines; .is-open shows it all. */
.bsr-prop-desc { --desc-l: 1.6em; }
@supports (height: 1lh) { .bsr-prop-desc { --desc-l: 1lh; } }
.bsr-prop-desc.is-cut:not(.is-open) {
  max-height: calc(var(--desc-l) * 7.5); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--desc-l) * 3.5), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(var(--desc-l) * 3.5), transparent 100%);
}
.bsr-prop-more {
  display: inline-flex; align-items: center; gap: 4px; margin: 18px 0 0; padding: 0; border: 0; background: none;
  font-family: var(--brand-font); font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--brand-primary); cursor: pointer;
}
.bsr-prop-more[hidden] { display: none; }
.bsr-prop-more:hover span { text-decoration: underline; text-underline-offset: 3px; }
.bsr-prop-more svg { width: 14px; height: 14px; fill: none; stroke: var(--brand-dark); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--bsr-ease); }
.bsr-prop-more[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (min-width: 981px) {
  .bsr-prop-under { --spec-pad: 42px; min-height: 120px; margin-bottom: 0; }
  .bsr-prop-under .bsr-prop-specs { margin: 0 0 0 calc(-1 * var(--spec-pad)); }
  .bsr-prop-under.has-cards .bsr-prop-specs { max-width: calc(50% - 12px + var(--spec-pad)); }
  .bsr-prop-under .bsr-prop-specs > div { position: relative; flex: none; padding: 21px var(--spec-pad) 18px; box-shadow: none; }
  /* Beside the photo cards the items after the first share the strip's width out to its end (Andre, 2026-10-15:
     no empty space at its right); the first keeps to its words, so they stay in line with the text above. Without
     the cards the strip has no end of its own and its items keep to their words. */
  .bsr-prop-under.has-cards .bsr-prop-specs > div:not(:first-child) { flex: 1 1 auto; }
  .bsr-prop-under .bsr-prop-specs > div::before { content: ''; position: absolute; left: -1px; top: 24px; bottom: 21px; width: 1px; background: var(--spec-line); }
  .bsr-prop-cards { position: absolute; right: 0; top: 62px; z-index: 2; width: calc(50% - 8px); gap: 20px; margin: 0; transform: translateY(-100%); }   /* their foot 62px under the photo (mockup) */
  .bsr-prop-cards.is-one .bsr-prop-pwrap { grid-column: 2; }
  .bsr-section.tight.bsr-prop-body { padding-top: 0; }   /* the columns start at the strip's foot, the card beside the price */
}
@media (min-width: 981px) and (max-width: 1280px) { .bsr-prop-under { --spec-pad: 24px; } }
/* The headings down the page: 100px apart (Andre, 2026-10-13), 60px on phones. */
.bsr-prop-h { margin-top: 100px; }
@media (max-width: 768.98px) { .bsr-prop-h { margin-top: 60px; } }

.bsr-prop-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }   /* 4 across (Andre, 2026-10-11) */
.bsr-prop-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--bsr-radius); }
@media (max-width: 1100px) { .bsr-prop-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .bsr-prop-gallery { grid-template-columns: repeat(2, 1fr); } }

/* A listing's details under the gallery (2026-10-11, property.php): label and value, two to a row. */
.bsr-prop-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; margin: 0; }
.bsr-prop-dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); }
.bsr-prop-dl dt { font-family: var(--brand-font-body); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-grey); }
.bsr-prop-dl dd { margin: 0; font-family: var(--brand-font-body); font-size: 15px; line-height: 1.5; color: var(--brand-dark); }   /* values in the body font, their capital labels in the main (2026-10-14) */
@media (max-width: 760px) { .bsr-prop-dl { grid-template-columns: 1fr; } }
.bsr-prop-similar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (min-width: 1280px) {   /* four across, the search's Gallery cards (photo cut to the card's width) */
  .bsr-prop-similar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .bsr-prop-similar .bsr-listing-card { container-type: inline-size; }
  .bsr-prop-similar .bsr-listing-card .photo { aspect-ratio: auto; height: calc(75cqw - 35px); }
  .bsr-prop-similar .bsr-listing-card .body { padding: 14px 14px 16px; }
  .bsr-prop-similar .bsr-listing-card .addr { font-size: 13px; }
  .bsr-prop-similar .bsr-listing-card .courtesy { font-size: 12px; }   /* as the city line above it (IDX 6.3(c)) */
  .bsr-prop-similar .bsr-listing-card .city, .bsr-prop-similar .bsr-listing-card .mls { font-size: 12px; }
}
@media (max-width: 620px) { .bsr-prop-similar { grid-template-columns: 1fr; } }
/* Location: one pin in the brand colour (property-location.js). isolation keeps Leaflet's panes under the sticky form. */
.bsr-prop-map { height: 380px; isolation: isolate; border-radius: var(--bsr-radius); overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); background: color-mix(in srgb, var(--brand-light) 95.3%, var(--brand-dark)); }
.bsr-loc-pin { background: var(--brand-primary); border: 4px solid var(--brand-white); border-radius: 50%; box-shadow: 0 2px 8px color-mix(in srgb, var(--bsr-shade) 35%, transparent); }

/* The MLS board's notices (PropTx IDX 6.3(i), (k)): under the results, and at
   the foot of a feed listing's page where its courtesy line used to be (that
   moved into the hero, 2026-10-08). */
.bsr-idx-notice { font-size: 11.5px; line-height: 1.6; color: var(--brand-grey-light); margin: 28px 0 0; }
.bsr-idx-notice.is-page { margin-top: 30px; border-top: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); padding-top: 14px; }
/* The listing brokerage at the listing's foot, over the notice (property.php, 2026-10-14). */
.bsr-prop-by { margin: 30px 0 0; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); font-family: var(--brand-font-body); font-size: 14px; line-height: 1.5; color: var(--brand-grey-mid); }
.bsr-prop-by + .bsr-idx-notice.is-page { margin-top: 6px; padding-top: 0; border-top: 0; }
.bsr-ps-cap { font-size: 13px; color: var(--brand-grey); text-align: center; margin: 18px 0 0; }

.bsr-inquiry-card { padding: 26px 24px; border: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); position: sticky; top: 100px; background: var(--bsr-band); }   /* white on the light page (2026-10-13) */
.bsr-inquiry-card .bsr-field { margin-top: 14px; }

/* ---------- Parallax ----------
   Desktop + motion-safe only (gated in site.js). site.js lifts each parallax
   section's photo into an oversized .bsr-px-layer it can translate freely, so
   the effect works regardless of body{overflow-x} (which breaks
   background-attachment:fixed) and never exposes an edge. The layer is 130%
   tall (15% of slack top and bottom); JS moves it up to ±15% of the section
   height — a large, obvious drift that still stays gap-free. */
.bsr-px { position: relative; overflow: hidden; }
.bsr-px-layer {
  position: absolute; left: 0; top: -25%; width: 100%; height: 150%;
  background-size: cover; background-position: center;
  z-index: 0; will-change: transform;
}
/* Horizontal variant: oversize the layer wide instead of tall so it can drift
   left<->right without exposing an edge. */
.bsr-px-x .bsr-px-layer { top: 0; left: -25%; width: 150%; height: 100%; }
/* Monogram strips get a boosted travel in site.js (_pxBoost) — oversize their
   layer to match (±80% slack) so the stronger drift never shows an edge. */
.bsr-buysell-pattern .bsr-px-layer { top: -80%; height: 260%; }
/* Keep the section's dark overlay above the drifting photo, content above that. */
.bsr-px::before { z-index: 1; }
.bsr-px > *:not(.bsr-px-layer) { position: relative; z-index: 2; }

/* Property hero: real <img> is used directly as the drift layer (oversized). */
.bsr-px-img { overflow: hidden; }
.bsr-px-img img {
  top: -25% !important; bottom: auto !important; height: 150% !important;
  will-change: transform;
}

/* Neighbourhood hero: photo lives in the blurred ::before; give it room to move
   and translate via the JS-set offset. */
.bsr-hood-hero.bsr-px-before { overflow: hidden; }
.bsr-hood-hero.bsr-px-before::before {
  inset: -170px;
  transform: translate3d(0, var(--bsr-parallax, 0px), 0);
  will-change: transform;
}

/* ── Section scroll-reveal ─────────────────────────────────
   .bsr-reveal is added ONLY by site.js (and only when IntersectionObserver
   exists, motion is allowed, and we're not inside the builder canvas) — so
   nothing here can ever hide content on its own. Sections fade-and-rise on
   first entry; neighbourhood tiles cascade in behind their section. */
.bsr-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.bsr-reveal.in-view { opacity: 1; transform: none; }
.bsr-reveal .bsr-hood { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.bsr-reveal.in-view .bsr-hood { opacity: 1; transform: none; }
.bsr-reveal.in-view .bsr-hood:nth-child(2) { transition-delay: .08s; }
.bsr-reveal.in-view .bsr-hood:nth-child(3) { transition-delay: .16s; }
.bsr-reveal.in-view .bsr-hood:nth-child(4) { transition-delay: .24s; }
.bsr-reveal.in-view .bsr-hood:nth-child(5) { transition-delay: .32s; }
.bsr-reveal.in-view .bsr-hood:nth-child(6) { transition-delay: .40s; }

/* ── Button micro-interactions ─────────────────────────────
   Slight lift + soft shadow on hover, press-down on tap/click. */
.bsr-btn {
  transition: transform .22s ease, box-shadow .22s ease,
              background .2s ease, color .2s ease, border-color .2s ease;
}
.bsr-btn:hover { box-shadow: 0 10px 24px color-mix(in srgb, var(--bsr-shade) 16%, transparent); }
.bsr-btn:active { transform: translateY(0) scale(.98); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .bsr-reveal, .bsr-reveal .bsr-hood { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bsr-btn:hover, .bsr-btn:active { transform: none; }
}

/* ── True full-screen hero on mobile ───────────────────────
   100vh ignores mobile browsers' collapsing URL bar; dvh tracks the real
   visible height, so the hero (and its cover video) always fills the first
   screen exactly on every device. Older browsers keep the 100vh fallback. */
@supports (min-height: 100dvh) {
  .bsr-hero { min-height: 100dvh; }
}

/* ── Agent profile: social icons + video ───────────────────
   Populated from the dashboard's Edit Agent page; both render only when
   filled in. Icon style mirrors the footer's circular social buttons,
   adapted for the light background. */
/* 4px, not the 26px this carried when it sat under the CTA button: it now
   follows the Brokerage block, whose .bsr-contact-item already contributes
   20px of padding-bottom. 4 + 20 keeps the same rhythm as the gap between
   two contact items above it. */
.bsr-agent-social { display: flex; gap: 20px; margin-top: 4px; flex-wrap: wrap; }
.bsr-agent-social a {   /* solid icons alone, as the footer's (2026-10-14) */
  display: inline-flex; align-items: center; height: 40px;
  color: var(--brand-dark); transition: color var(--bsr-ease);
}
.bsr-agent-social a:hover { color: var(--brand-accent-dark); }
.bsr-agent-social svg { width: 20px; height: 20px; }
.bsr-agent-video {
  max-width: 820px; margin-top: 40px; aspect-ratio: 16/9;
  border-radius: var(--bsr-radius); overflow: hidden; background: var(--brand-dark);
}
.bsr-agent-video iframe, .bsr-agent-video video { width: 100%; height: 100%; border: 0; display: block; }

/* agent profile: license line under the title */
.bsr-agent-license { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--brand-grey-light); margin-top: 6px; }

/* ── Testimonials page ─────────────────────────────────────
   Two columns of left-aligned quotes, in rows, so opening one never moves the others
   (Andre, 2026-10-12: "fit better and easier to read for when they are longer"):
   the accent quote mark, the quote, the author in caps. A short quote large and
   italic; a long one (.is-long, includes/testimonial-item.php) smaller and upright,
   in full (its Read more toggle removed, Andre 2026-10-21). */
.bsr-testi-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 80px; max-width: 1180px; margin: 0 auto; }
.bsr-testi-item {
  padding: 44px 0; text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent)));
}
.bsr-testi-mark {
  font-size: 64px; line-height: .6; height: 30px; color: var(--brand-accent);
  font-weight: 700; user-select: none;
}
.bsr-testi-quote {
  margin: 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.65;
  font-style: italic; color: var(--brand-dark);
}
.bsr-testi-item.is-long .bsr-testi-quote { font-size: 16px; line-height: 1.75; font-style: normal; }
.bsr-testi-author {
  margin-top: 22px; font-weight: 700; font-size: 15px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-dark);
}
@media (max-width: 900.98px) {
  .bsr-testi-list { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .bsr-testi-item { padding: 36px 0; }
}

/* Testimonial author role ("Buyer" / "Seller" / "Agent") — the agent-title
   treatment, smaller, under the name. On the dark homepage band accent-dark has
   too little contrast against primary, so it lightens there. */
.bsr-t-role {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand-grey-light); margin-top: 5px;
}
.bsr-testimonials .bsr-t-role { color: rgba(255,255,255,.6); }

/* ── Listings signup gate + save-search modal ──────────────
   The gate is a hard gate: no close button — the page unlocks by signing up
   or logging in, and site.js adds .show past the free-view allowance.

   The save-search modal is the opposite (dismissable, opened on demand) but
   is the same object visually, so it shares these rules rather than
   duplicating them. Only its own dismissable affordances are separate. */
.bsr-gate-overlay,
.bsr-save-overlay {
  position: fixed; inset: 0; z-index: 900;
  display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bsr-shade) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 20px;
}
.bsr-gate-overlay.show,
.bsr-save-overlay.show { display: flex; }
.bsr-gate,
.bsr-save-modal {
  background: var(--brand-white); border-radius: 14px;
  width: 100%; max-width: 440px; max-height: calc(100dvh - 40px);
  overflow-y: auto; padding: 34px 30px 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.bsr-gate .bsr-field,
.bsr-save-modal .bsr-field { margin-top: 12px; }
/* 16px here too — a modal that zooms on focus is worse than a page that does,
   because the modal is the thing you are trying to read. */
.bsr-gate .bsr-field input,
.bsr-save-modal .bsr-field input,
.bsr-save-modal .bsr-field select {
  width: 100%; padding: 13px 15px; font-size: 16px;
  min-height: 44px; box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--brand-light) 60%, var(--brand-tint, var(--brand-accent))); border-radius: 9px; background: var(--brand-white);
}
.bsr-gate .bsr-field input:focus,
.bsr-save-modal .bsr-field input:focus,
.bsr-save-modal .bsr-field select:focus { outline: none; border-color: var(--brand-dark); }
.bsr-gate .bsr-consent,
.bsr-save-modal .bsr-consent { margin-top: 14px; font-size: 11.5px; line-height: 1.6; }
.bsr-gate-switch { margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--brand-grey-light); }
.bsr-gate-switch a { font-weight: 700; color: var(--brand-dark); text-decoration: underline; }
/* The line above the email / code fields in the sign-in steps. Same size and
   colour as the switch line beneath, so the modal reads as one voice. */
.bsr-gate-note { margin: 0 0 14px; text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--brand-grey-light); }

/* Save-search modal only. */
.bsr-save-modal { position: relative; max-width: 460px; }
.bsr-save-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border: none; background: none; cursor: pointer; color: var(--brand-grey-light);
  display: flex; align-items: center; justify-content: center; border-radius: 8px;
}
.bsr-save-close:hover { background: color-mix(in srgb, var(--brand-light) 93%, var(--brand-tint, var(--brand-accent))); color: var(--brand-dark); }
.bsr-save-close[hidden] { display: none; }
.bsr-gate { position: relative; }   /* its close, when the header's Sign in opened it (2026-10-11) */
.bsr-gate:focus { outline: 0; }   /* the box takes the focus as it locks (site.js, re-check 2 K2); its fields show theirs */
/* The questions after sign-up (includes/account.php, 2026-10-14): the box, and My Account's card. The answers are
   the filters panel's pills; each question a line of them under its own words, read left to right. */
.bsr-ans { --pf-line: color-mix(in srgb, var(--brand-light) 70%, var(--brand-tint, var(--brand-accent))); text-align: left; }
.bsr-save-modal.bsr-ans { max-width: 560px; padding: 34px 32px 24px; }   /* the five timeline pills on one line */
.bsr-save-modal.bsr-ans:focus { outline: 0; }
.bsr-ans h3.bsr-heading { margin: 0 32px 6px 0; font-size: 22px; line-height: 1.25; text-align: left; }
.bsr-ans .bsr-gate-note { margin: 0 0 22px; text-align: left; }
.bsr-ans-q { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.bsr-ans-q legend, .bsr-ans .bsr-ans-home label {
  display: block; margin: 0 0 10px; padding: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--brand-dark);
}
.bsr-ans .bsr-pf-chip span { height: 36px; padding: 0 13px; }
.bsr-ans .bsr-ans-home { margin: 0; }
.bsr-ans-go { margin-top: 22px; }
.bsr-ans-go .bsr-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 10px 18px; box-sizing: border-box;
  border: 1px solid var(--brand-dark); border-radius: 9px; background: var(--brand-dark); color: var(--brand-white); cursor: pointer;
  font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.2; text-transform: none;
}
.bsr-ans-go .bsr-btn:hover { background: color-mix(in srgb, var(--brand-dark) 82%, var(--brand-white)); }
.bsr-ans-go .bsr-btn:disabled { opacity: .6; cursor: default; }
.bsr-ans .bsr-gate-switch { margin-top: 14px; }
/* What is actually being saved, spelled out — the search bar holds criteria
   the alert filters can't express, and those are dropped server-side. Showing
   the surviving set here means that happens in front of the visitor. */
.bsr-save-crit {
  background: color-mix(in srgb, var(--brand-light) 93%, var(--brand-tint, var(--brand-accent))); border-radius: 10px; padding: 14px 16px; margin-top: 4px;
  font-size: 13px; line-height: 1.65; color: var(--brand-grey);
}
.bsr-save-crit b { color: var(--brand-dark); font-weight: 700; }
.bsr-save-crit .dropped { display: block; margin-top: 8px; font-size: 11.5px; color: var(--brand-grey-light); }

/* ── Careers page: value cards stacked left, application form right ── */
.bsr-careers-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: 70px; align-items: start; }
.bsr-careers-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; }
.bsr-careers-card { background: var(--bsr-band); border-radius: var(--bsr-radius); padding: 38px 32px; }
.bsr-careers-card .bsr-rule { margin: 14px 0 18px; }
@media (max-width: 900.98px) {
  .bsr-careers-layout { grid-template-columns: minmax(0,1fr); gap: 60px; }
  .bsr-careers-grid { gap: 18px; }
}

/* ── Cards (section type 'cards', 2026-10-09): the careers card, in a grid ── */
.bsr-cards-sec.is-light { background: var(--bsr-band); }
.bsr-cards-head { margin-bottom: 64px; }
.bsr-cards { display: grid; gap: 22px; }
.bsr-cards.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 1240px; margin: 0 auto; }
.bsr-cards.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 1000px; margin: 0 auto; }
.bsr-cards.cols-1 { grid-template-columns: minmax(0,1fr); max-width: 820px; margin: 0 auto; }
.bsr-card { background: var(--bsr-band); border-radius: var(--bsr-radius); padding: 38px 32px; }
.bsr-cards-sec.is-light .bsr-card { background: var(--bsr-page); }
.bsr-card-title { font-size: 19px; }
.bsr-card .bsr-rule { margin: 14px 0 18px; }
.bsr-card .bsr-body { max-width: none; }
.bsr-card .bsr-body > :first-child { margin-top: 0; }
.bsr-card .bsr-body > :last-child { margin-bottom: 0; }
.bsr-cards-outro { margin-top: 64px; text-align: center; }
/* Cards as a Checklist (2026-10-15, cards.php): stages down a line, each a card whose bullet points are tick boxes
   (site.js [data-bsr-ck] counts what is left and keeps the ticks in the browser). A stage all ticked fills its dot. */
.bsr-ck { position: relative; display: grid; gap: 32px; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.bsr-ck::before { content: ''; position: absolute; left: 31px; top: 32px; bottom: 32px; width: 2px; background: color-mix(in srgb, var(--brand-dark) 12%, transparent); }
.bsr-ck-stage { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 36px; align-items: start; }
.bsr-ck-dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--brand-white); border: 2px solid color-mix(in srgb, var(--brand-dark) 14%, transparent);
  font-size: 15px; font-weight: 800; color: var(--brand-dark); font-variant-numeric: tabular-nums; transition: background .3s, border-color .3s, color .3s;
}
.bsr-ck-card { padding: 44px 48px; border-radius: var(--bsr-radius); background: var(--brand-white); }
.bsr-cards-sec.is-light :is(.bsr-ck-card, .bsr-ck-dot) { background: var(--bsr-page); }
.bsr-ck .bsr-ck-stage.is-done .bsr-ck-dot { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.bsr-ck-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 22px; }
.bsr-ck-title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; color: var(--brand-dark); }
.bsr-ck-count { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-grey); font-variant-numeric: tabular-nums; }
.bsr-ck-note { max-width: none; margin: 0 0 14px; }
.bsr-ck-note > :last-child { margin-bottom: 0; }
.bsr-ck-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bsr-ck-list label {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 16px; margin: 0 -14px; padding: 12px 14px; border-radius: 10px;
  font-size: 15.5px; line-height: 1.65; color: var(--brand-grey); cursor: pointer; transition: background .2s;
}
.bsr-ck-list label:hover { background: color-mix(in srgb, var(--brand-dark) 4%, transparent); }
.bsr-ck-list input {
  -webkit-appearance: none; appearance: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 2px 0 0;
  border: 2px solid color-mix(in srgb, var(--brand-dark) 30%, transparent); border-radius: 6px; background: transparent; cursor: pointer;
}
.bsr-ck-list input:checked { background: var(--brand-accent); border-color: var(--brand-accent); }
.bsr-ck-list input:checked::after { content: ''; width: 10px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.bsr-ck-list input:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.bsr-ck-list input:checked + span { opacity: .5; text-decoration: line-through; }
@media (max-width: 767.98px) {
  /* Phones: each stage a band the screen's full width, square, its number inside over its title at the title's size,
     no line down the side (Andre, 2026-10-20: more words to a line; it was a card under a numbered dot). Only the
     checklist: other cards stay cards. */
  .bsr-ck { gap: 28px; margin-inline: calc(50% - 50vw); }
  .bsr-ck::before { display: none; }
  .bsr-ck-stage { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 30px 24px; background: var(--brand-white); }
  .bsr-cards-sec.is-light .bsr-ck-stage { background: var(--bsr-page); }
  .bsr-ck-dot, .bsr-cards-sec.is-light .bsr-ck-dot { display: block; width: auto; height: auto; border: 0; border-radius: 0; background: none; font-size: 19px; line-height: 1.3; }
  .bsr-ck .bsr-ck-stage.is-done .bsr-ck-dot { background: none; color: var(--brand-accent); }
  .bsr-ck-card, .bsr-cards-sec.is-light .bsr-ck-card { padding: 0; border-radius: 0; background: none; }
  .bsr-ck-top { flex-direction: column; align-items: flex-start; gap: 8px; }   /* "4 to do" always under the title (Andre, 2026-10-20) */
}
/* A card with a link (2026-10-15, cards.php): Read more at its foot, the whole card opens it and lifts on hover.
   Not in the editor's preview, where a click on the card's words edits them. */
.bsr-card.is-link { position: relative; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.bsr-card-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; align-self: flex-start;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; text-decoration: none; color: var(--brand-dark);
}
.bsr-card-go svg { width: 16px; height: 16px; fill: none; stroke: var(--brand-accent-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.bsr-card .bsr-rule + .bsr-card-go { padding-top: 4px; }   /* a title-only card: Read more right under the rule */
body:not([data-bsr-preview]) .bsr-card-go::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.bsr-card.is-link:hover { transform: translateY(-3px); box-shadow: 0 14px 34px color-mix(in srgb, var(--bsr-shade) 10%, transparent); }
.bsr-card.is-link:hover .bsr-card-go svg, .bsr-card-go:focus-visible svg { transform: translateX(4px); }
@media (max-width: 1024.98px) { .bsr-cards.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px) {
  .bsr-cards.cols-3, .bsr-cards.cols-2 { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .bsr-card { padding: 30px 24px; }
  .bsr-cards-head { margin-bottom: 44px; }
}

/* Cards as a Timeline (cards.php, Andre 2026-10-12: "a linear scrollable timeline instead of
   the stacking"): numbered steps on one line, no boxes, scrolled across with the arrows
   (site.js [data-bsr-tl]) or swiped; the edge fades while there is more to see. */
/* The whole window's width, inside the page's side margins (Andre's screenshot, 2026-10-14, measured at
   1913px: 32px each side, steps still 360px); the heading and intro keep their own centred widths. */
.bsr-cards-sec.is-tl > .bsr-container { max-width: none; }
.bsr-tl { margin: 0; }
.bsr-tl-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 30px; }
.bsr-tl-count { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-grey); }
.bsr-tl-count b { color: var(--brand-dark); }
.bsr-tl-nav { display: flex; gap: 10px; }
.bsr-tl-nav button {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--brand-dark) 18%, transparent); background: transparent; color: var(--brand-dark);
  transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.bsr-tl-nav button:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-white); }
.bsr-tl-nav button:disabled { opacity: .3; cursor: default; }
.bsr-tl-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(360px, 80%); margin: 0; padding: 0 0 8px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; outline: 0;
}
.bsr-tl-track::-webkit-scrollbar { display: none; }
.bsr-tl.has-more .bsr-tl-track { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 90px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 90px), transparent); }
.bsr-tl-track:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 6px; }
.bsr-tl-step { position: relative; padding: 0 34px 0 0; scroll-snap-align: start; }
/* The line on to the next step, from this node's edge to the next one's. */
.bsr-tl-step::before { content: ''; position: absolute; top: 27px; left: 70px; right: 14px; height: 2px; background: color-mix(in srgb, var(--brand-dark) 12%, transparent); }
.bsr-tl-step:last-child::before { display: none; }
.bsr-tl-node {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--brand-dark); color: var(--brand-white); font-size: 15px; font-weight: 800; letter-spacing: .04em;
}
.bsr-tl-step:last-child .bsr-tl-node { background: var(--brand-accent); }
.bsr-tl-title { margin: 26px 0 8px; font-size: 21px; font-weight: 800; line-height: 1.25; color: var(--brand-dark); }
.bsr-tl-body { max-width: none; font-size: 14px; }
.bsr-tl-body > :first-child { margin-top: 0; }
.bsr-tl-body > :last-child { margin-bottom: 0; }
.bsr-tl-body em { color: var(--brand-grey); }
/* The bullets as ticks in the accent (.bsr-tl first: over .bsr-body's own list style further down). */
.bsr-tl .bsr-tl-body ul { display: grid; gap: 11px; margin: 14px 0 0; padding: 0; list-style: none; }
.bsr-tl .bsr-tl-body li { position: relative; margin: 0; padding-left: 28px; line-height: 1.55; }
.bsr-tl .bsr-tl-body li::before { content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--brand-accent); box-sizing: border-box; }
.bsr-tl .bsr-tl-body li::after { content: ''; position: absolute; left: 5px; top: 7.5px; width: 6px; height: 3px; border-left: 1.5px solid var(--brand-accent); border-bottom: 1.5px solid var(--brand-accent); transform: rotate(-45deg); }
.bsr-tl-prog { height: 2px; margin-top: 36px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--brand-dark) 10%, transparent); }
.bsr-tl-prog i { display: block; width: 0; height: 100%; background: var(--brand-dark); transition: width .2s; }
.bsr-tl.is-still .bsr-tl-bar, .bsr-tl.is-still .bsr-tl-prog { display: none; }   /* every step in view: nothing to step through (audit B22) */
/* A page of steps at a time (Andre, 2026-10-14: "only 3 per page slide, make them fit better and wider"): three
   on a wide screen, two on a tablet, each its share of the width, so no step sits half in view and the edge
   needs no fade; the arrows turn a page (site.js). Wider gaps and a touch larger text keep the lines readable. */
@media (min-width: 681px) {
  .bsr-tl-track { grid-auto-columns: calc(100% / 2); }
  .bsr-tl.has-more .bsr-tl-track { -webkit-mask: none; mask: none; }
  .bsr-tl-step { padding-right: 56px; }
  .bsr-tl-body { font-size: 15px; }
}
@media (min-width: 1100px) {
  .bsr-tl-track { grid-auto-columns: calc(100% / 3); }
  .bsr-tl-step { padding-right: 72px; }
}
/* Phones (Andre, 2026-10-12: "for mobile just stack them"): one under the other, the line
   running down the left from node to node; no arrows, count or progress line. */
@media (max-width: 680px) {
  .bsr-tl-bar, .bsr-tl-prog { display: none; }
  .bsr-tl-track, .bsr-tl.has-more .bsr-tl-track { display: block; overflow: visible; padding: 0; -webkit-mask: none; mask: none; }
  .bsr-tl-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 0 0 34px; }
  .bsr-tl-step:last-child { padding-bottom: 0; }
  .bsr-tl-step::before { top: 52px; bottom: 8px; left: 21px; right: auto; width: 2px; height: auto; }
  .bsr-tl-node { grid-row: 1 / span 2; width: 44px; height: 44px; font-size: 13px; }
  .bsr-tl-title { grid-column: 2; margin: 10px 0 8px; font-size: 19px; }
  .bsr-tl-body { grid-column: 2; }
}

/* Bullet lists from the editor's text boxes (2026-10-09). */
.bsr-body ul { margin: 0 0 1em; padding-left: 1.25em; text-align: left; }
.bsr-body li { margin: .45em 0; padding-left: .2em; }
.bsr-body li::marker { color: var(--brand-accent); }
.bsr-body.center ul { display: inline-block; max-width: 100%; }

/* ── Blog ──────────────────────────────────────────────────
   Index cards + article typography for the Markdown-rendered body. */
.bsr-blog-filters { display: flex; gap: 26px; margin-bottom: 44px; }
.bsr-blog-filters a {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-grey-light); padding-bottom: 6px; border-bottom: 2px solid transparent;
}
.bsr-blog-filters a.active { color: var(--brand-dark); border-bottom-color: var(--brand-accent); }
.bsr-blog-filters a:hover { color: var(--brand-dark); }

.bsr-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px 30px; }
@media (max-width: 900.98px) { .bsr-blog-grid { grid-template-columns: minmax(0,1fr); gap: 44px; } }
.bsr-blog-card { display: block; }
.bsr-blog-card .cover {
  aspect-ratio: 16/10; border-radius: var(--bsr-radius); background-color: var(--bsr-band);
  background-size: cover; background-position: center; margin-bottom: 18px;
  transition: transform .5s ease; overflow: hidden;
}
/* The cover used to lift on hover; the card now responds without moving. */
.bsr-blog-card .meta {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-accent-dark); margin-bottom: 8px;
}
.bsr-blog-card h2 {
  font-size: 19px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
  line-height: 1.3; color: var(--brand-dark); margin: 0 0 10px;
}
.bsr-blog-card .excerpt { font-size: 14px; line-height: 1.7; color: var(--brand-grey-light); margin: 0 0 12px; }
.bsr-blog-card .more {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-accent-dark);
}
.bsr-blog-card:hover .more { color: var(--brand-primary); }

.bsr-blog-pager { display: flex; justify-content: center; gap: 10px; margin-top: 70px; }
.bsr-blog-pager a {
  min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--brand-light) 74%, var(--brand-tint, var(--brand-accent))); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--brand-dark);
}
.bsr-blog-pager a.active { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-white); }

.bsr-article { max-width: 860px; }
.bsr-article-draftnote {
  background: color-mix(in srgb, var(--brand-accent) 14%, transparent); border: 1px dashed var(--brand-accent);
  padding: 10px 16px; border-radius: 8px; font-size: 13px; color: var(--brand-accent-dark); margin-bottom: 26px;
}
.bsr-article-meta {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-accent-dark); margin-bottom: 12px;
}
.bsr-article-title { font-size: clamp(26px, 3.6vw, 42px); }
.bsr-article-cover { width: 100%; border-radius: var(--bsr-radius); margin: 10px 0 34px; }
.bsr-article-body { font-size: 16.5px; line-height: 1.9; color: var(--brand-dark); }
.bsr-article-body p { margin: 0 0 22px; }
.bsr-article-body h2 {
  font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; text-transform: uppercase;
  letter-spacing: .01em; margin: 44px 0 16px; color: var(--brand-dark);
}
.bsr-article-body h3 { font-size: 18px; font-weight: 700; margin: 34px 0 12px; color: var(--brand-dark); }
.bsr-article-body a { color: var(--brand-primary); text-decoration: underline; }
.bsr-article-body ul, .bsr-article-body ol { margin: 0 0 22px; padding-left: 26px; }
.bsr-article-body li { margin-bottom: 8px; }
.bsr-article-body blockquote {
  margin: 30px 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--brand-accent);
  font-style: italic; color: var(--brand-grey-light);
}
.bsr-article-body img { max-width: 100%; border-radius: var(--bsr-radius); margin: 10px 0; }

/* ---------- Developments (index cards + profile page) ---------- */

/* Draft banner — only ever rendered for a logged-in dashboard admin
   previewing an unpublished development. */
.bsr-dev-draft { background: var(--brand-accent); color: var(--brand-dark); padding: 9px 0; font-size: 13px; }
.bsr-dev-draft strong { font-weight: 800; }
/* Banner carries the action itself — telling an admin where the control lives
   is one step worse than just giving them the control. */
.bsr-dev-draft .bsr-container { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bsr-dev-draft .act { margin-left: auto; }
.bsr-dev-draft .act button {
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--brand-dark); color: var(--brand-white);
  border: none; padding: 7px 16px; border-radius: 999px;
}
.bsr-dev-draft .act button:hover { background: var(--brand-primary); }
.bsr-dev-draft .act-link { color: var(--brand-dark); text-decoration: underline; font-weight: 600; }
@media (max-width: 560px) {
  .bsr-dev-draft .act { margin-left: 0; }
}

/* Index grid */
.bsr-dev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.bsr-dev-card {
  border: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); border-radius: var(--bsr-radius); overflow: hidden;
  background: var(--brand-white); transition: border-color var(--bsr-ease), box-shadow var(--bsr-ease);
}
.bsr-dev-card:hover { border-color: var(--brand-accent); box-shadow: 0 8px 22px color-mix(in srgb, var(--bsr-shade) 8%, transparent); }
.bsr-dev-card .img { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.bsr-dev-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bsr-dev-card:hover .img img { transform: scale(1.06); }
.bsr-dev-card .badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--brand-primary); color: var(--brand-white);
  padding: 4px 10px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.bsr-dev-card .badge.draft { top: auto; bottom: 12px; background: var(--brand-accent); color: var(--brand-dark); }
.bsr-dev-card .body { padding: 18px 18px 20px; }
.bsr-dev-card .name { font-weight: 700; font-size: 15px; color: var(--brand-dark); text-transform: uppercase; letter-spacing: .02em; }
.bsr-dev-card .meta { font-size: 13px; color: var(--brand-grey-light); margin-top: 4px; }
.bsr-dev-card .from { font-size: 13px; font-weight: 700; color: var(--brand-primary); margin-top: 10px; }
@media (max-width: 900.98px) { .bsr-dev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bsr-dev-grid { grid-template-columns: 1fr; } }

/* Profile hero — same treatment as .bsr-hood-hero */
.bsr-dev-hero { position: relative; height: 52vh; min-height: 360px; overflow: hidden; }
.bsr-dev-hero::before {
  content: ''; position: absolute; inset: -20px;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--bsr-shade) 20%, transparent) 0%, color-mix(in srgb, var(--bsr-shade) 72%, transparent) 100%), var(--bsr-hero-img);
  background-size: cover; background-position: center;
  filter: blur(3px);
}
.bsr-dev-hero .info { position: absolute; left: 0; right: 0; bottom: 36px; z-index: 1; color: var(--brand-white); }
.bsr-dev-status {
  display: inline-block; margin-bottom: 14px; padding: 5px 12px;
  background: var(--brand-accent); color: var(--brand-dark);
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.bsr-dev-hero-loc { margin-top: 10px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.bsr-dev-hero-avail { margin-top: 6px; font-size: 14px; color: var(--brand-accent); font-weight: 600; }

/* Fact bar directly under the hero */
.bsr-dev-factbar { background: var(--bsr-band); border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 89.5%, var(--brand-accent)); }
.bsr-dev-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 18px; padding: 34px 0; }
.bsr-dev-fact { text-align: center; }
.bsr-dev-fact .v { font-size: 26px; font-weight: 800; color: var(--brand-primary); }
.bsr-dev-fact .l { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-grey-light); margin-top: 6px; }
@media (max-width: 640px) { .bsr-dev-facts { grid-template-columns: repeat(2, 1fr); } }

/* Content blocks — tighter rhythm than .bsr-hood-block (200px), because a
   development page stacks far more sections than a neighbourhood profile. */
.bsr-dev-block { padding: 110px 0; border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 89.5%, var(--brand-accent)); }
.bsr-dev-block:last-of-type { border-bottom: none; }
.bsr-dev-block .block-title { font-size: 20px; margin: 0 0 4px; }
@media (max-width: 900.98px) { .bsr-dev-block { padding: 64px 0; } }

.bsr-dev-lede { max-width: 760px; font-size: 17px; }
.bsr-dev-prose { max-width: 760px; margin-top: 26px; }

/* Suite mix table */
.bsr-dev-mix { margin-top: 26px; max-width: 620px; }
.bsr-dev-mix-row { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 89.5%, var(--brand-accent)); }
.bsr-dev-mix-row .l { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-grey-light); }
.bsr-dev-mix-row .v { font-weight: 700; color: var(--brand-dark); text-align: right; }
.bsr-dev-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bsr-dev-chip {
  border: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); border-radius: 999px; padding: 6px 14px;
  font-size: 12px; color: var(--brand-grey); background: var(--brand-white);
}

/* Gallery — an even grid, every tile the same size (no lead shot, by Andre's call 2026-09-09) */
.bsr-dev-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.bsr-dev-shot { margin: 0; overflow: hidden; border-radius: var(--bsr-radius); }
.bsr-dev-shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; transition: transform .6s ease; }
.bsr-dev-shot:hover img { transform: scale(1.04); }
@media (max-width: 1100px) { .bsr-dev-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900.98px) { .bsr-dev-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bsr-dev-gallery { grid-template-columns: 1fr; } }

/* ---------- Lightbox (site.js, data-bsr-lightbox) ----------
   One overlay for every photo gallery. Dark backdrop, the photo letterboxed
   to the viewport, accent on hover for the controls — the same furniture as the
   off-canvas nav. */
[data-bsr-lightbox] img { cursor: zoom-in; }
.bsr-lb {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bsr-shade) 94%, transparent);
  opacity: 0; pointer-events: none; transition: opacity var(--bsr-ease);
}
.bsr-lb.open { opacity: 1; pointer-events: auto; }
body.bsr-lb-open { overflow: hidden; }
.bsr-lb-stage { margin: 0; max-width: min(1400px, 92vw); max-height: 88vh; display: flex; align-items: center; justify-content: center; }
.bsr-lb-stage img {
  max-width: 100%; max-height: 84vh; object-fit: contain; display: block;
  border-radius: var(--bsr-radius); box-shadow: 0 30px 80px rgba(0,0,0,.55);
  opacity: 0; transform: scale(.985); transition: opacity .25s ease, transform .25s ease;
}
.bsr-lb-stage img.is-in { opacity: 1; transform: none; }
.bsr-lb-count { position: absolute; top: 26px; left: 32px; color: rgba(255,255,255,.7); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.bsr-lb-close, .bsr-lb-prev, .bsr-lb-next {
  position: absolute; z-index: 1;
  background: none; border: none; padding: 10px; cursor: pointer;
  color: var(--brand-white); opacity: .85; transition: opacity var(--bsr-ease), color var(--bsr-ease);
}
.bsr-lb-close:hover, .bsr-lb-prev:hover, .bsr-lb-next:hover { opacity: 1; color: var(--brand-accent); }
.bsr-lb-close:focus-visible, .bsr-lb-prev:focus-visible, .bsr-lb-next:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; border-radius: 6px; }
.bsr-lb-close { top: 16px; right: 22px; }
.bsr-lb-prev  { left: 16px;  top: 50%; transform: translateY(-50%); }
.bsr-lb-next  { right: 16px; top: 50%; transform: translateY(-50%); }
.bsr-lb-close svg { width: 30px; height: 30px; display: block; }
.bsr-lb-prev svg, .bsr-lb-next svg { width: 40px; height: 40px; display: block; }
.bsr-lb.single .bsr-lb-prev, .bsr-lb.single .bsr-lb-next { display: none; }
/* Thumbnails across the foot (Andre, 2026-10-14: "gallery view with thumbnails across the bottom"): every photo of
   the set, the one showing lit and kept in view; a click shows it. Centred while they fit, scrolled when not. The
   photo above makes room for them. */
.bsr-lb-thumbs {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 14px 24px 18px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.bsr-lb-thumbs::-webkit-scrollbar { display: none; }
.bsr-lb-thumb {
  flex: none; width: 84px; height: 60px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden;
  background: none; cursor: pointer; opacity: .5; transition: opacity .2s, border-color .2s;
}
.bsr-lb-thumb:first-child { margin-left: auto; }
.bsr-lb-thumb:last-child { margin-right: auto; }
.bsr-lb-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bsr-lb-thumb:hover { opacity: .85; }
.bsr-lb-thumb.is-on { opacity: 1; border-color: var(--brand-white); }
.bsr-lb-thumb:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.bsr-lb.single .bsr-lb-thumbs { display: none; }
.bsr-lb:not(.single) { padding-bottom: 92px; box-sizing: border-box; }   /* the photo centred above the strip */
.bsr-lb:not(.single) .bsr-lb-stage { max-height: calc(100vh - 150px); }
.bsr-lb:not(.single) .bsr-lb-stage img { max-height: calc(100vh - 160px); }
@media (max-width: 640px) {
  .bsr-lb-stage { max-width: 100vw; }
  .bsr-lb-stage img { max-height: 72vh; border-radius: 0; }
  .bsr-lb-prev, .bsr-lb-next { top: auto; bottom: 22px; transform: none; }
  .bsr-lb-prev { left: 22px; } .bsr-lb-next { right: 22px; }
  .bsr-lb-thumb { width: 64px; height: 46px; }
  .bsr-lb:not(.single) { padding-bottom: 140px; }
  .bsr-lb:not(.single) .bsr-lb-stage img { max-height: calc(100vh - 220px); }
  .bsr-lb:not(.single) :is(.bsr-lb-prev, .bsr-lb-next) { bottom: 88px; }   /* over the strip */
}
/* The listing page's Gallery (Andre, 2026-10-14): four photos, then the button that opens them all. */
.bsr-prop-gallery img[hidden] { display: none; }
.bsr-prop-allph { margin-top: 20px; background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-light); }   /* the brand's dark, light words (Andre, 2026-10-15) */
.bsr-prop-allph:hover { background: color-mix(in srgb, var(--brand-dark) 82%, var(--brand-light)); border-color: color-mix(in srgb, var(--brand-dark) 82%, var(--brand-light)); color: var(--brand-light); }

/* Features & amenities */
.bsr-dev-amen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 30px; margin-top: 26px; }
.bsr-dev-amen-item { display: flex; gap: 11px; align-items: flex-start; }
.bsr-dev-amen-item svg { flex: 0 0 auto; margin-top: 3px; color: var(--brand-accent); }
.bsr-dev-amen-item .n { font-weight: 700; font-size: 14px; color: var(--brand-dark); }
.bsr-dev-amen-item .d { font-size: 13px; color: var(--brand-grey-light); margin-top: 3px; line-height: 1.6; }
@media (max-width: 900.98px) { .bsr-dev-amen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bsr-dev-amen { grid-template-columns: 1fr; } }

/* Developer / architect / designer */
.bsr-dev-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 26px; }
.bsr-dev-team-item { border-left: 2px solid var(--brand-accent); padding-left: 16px; }
.bsr-dev-team-item .l { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-grey-light); }
.bsr-dev-team-item .v { font-weight: 700; color: var(--brand-dark); margin-top: 5px; }
@media (max-width: 700px) { .bsr-dev-team { grid-template-columns: 1fr; } }

.bsr-dev-map { height: 380px; border-radius: var(--bsr-radius); margin-top: 22px; z-index: 0; }

/* Developer logo — above the developer/architect grid in "Behind the Development" */
.bsr-dev-logo { display: block; width: auto; max-width: 260px; max-height: 72px; margin-top: 26px; }

/* Floor plans & documents — the agent-roster card, one row per file */
.bsr-dev-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.bsr-dev-file {
  display: flex; gap: 14px; align-items: center; padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); border-radius: var(--bsr-radius); color: var(--brand-dark);
  transition: border-color var(--bsr-ease), box-shadow var(--bsr-ease);
}
.bsr-dev-file:hover { border-color: var(--brand-accent); box-shadow: 0 8px 22px color-mix(in srgb, var(--bsr-shade) 8%, transparent); }
.bsr-dev-file > svg:first-child { flex: 0 0 auto; color: var(--brand-accent); }
.bsr-dev-file > div { flex: 1 1 auto; min-width: 0; }
.bsr-dev-file .n { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsr-dev-file .m { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-grey-light); margin-top: 3px; }
.bsr-dev-file .dl { flex: 0 0 auto; color: var(--brand-grey-light); transition: color var(--bsr-ease); }
.bsr-dev-file:hover .dl { color: var(--brand-primary); }
@media (max-width: 640px) { .bsr-dev-files { grid-template-columns: 1fr; } }

/* Linked agents */
.bsr-dev-agents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 26px; }
.bsr-dev-agent {
  display: flex; gap: 14px; align-items: center; padding: 14px;
  border: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); border-radius: var(--bsr-radius);
  transition: border-color var(--bsr-ease), box-shadow var(--bsr-ease);
}
.bsr-dev-agent:hover { border-color: var(--brand-accent); box-shadow: 0 8px 22px color-mix(in srgb, var(--bsr-shade) 8%, transparent); }
.bsr-dev-agent img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--bsr-band); flex: 0 0 auto; }
.bsr-dev-agent .n { font-weight: 700; color: var(--brand-dark); }
.bsr-dev-agent .t { font-size: 12.5px; color: var(--brand-grey-light); margin-top: 2px; }
@media (max-width: 900.98px) { .bsr-dev-agents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bsr-dev-agents { grid-template-columns: 1fr; } }

/* ---------- Development landing (development.php, Andre 2026-10-07) ----------
   A full-screen hero with the key facts along its foot, the story in a wide
   column beside a card that stays in view, then full-width bands: the gallery
   as a strip of tall panels, one big number with the building showing through
   it, the film, the people behind it, the map edge to edge, and a dark close
   with the team's details beside the VIP form. The section words set large in
   the background and the panel strip follow the references Andre sent.
   Prefixed .bsr-dl-: the older .bsr-dev-* rules above still dress the office
   pages, and the cards, chips and document rows this page reuses. */
.bsr-dl-hero { position: relative; display: flex; flex-direction: column; height: 100vh; height: 100svh;
               min-height: 640px; max-height: 1100px; overflow: hidden; background: var(--brand-dark); color: var(--brand-white); }
.bsr-dl-slides, .bsr-dl-slide { position: absolute; inset: 0; }
.bsr-dl-slide { background-size: cover; background-position: center; opacity: 0; transform: scale(1.08);
                transition: opacity 1.4s ease, transform 7s ease-out; }
.bsr-dl-slide.is-on { opacity: 1; transform: scale(1); }
.bsr-dl-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bsr-shade) 64%, transparent) 0%,
    color-mix(in srgb, var(--bsr-shade) 22%, transparent) 36%,
    color-mix(in srgb, var(--bsr-shade) 30%, transparent) 62%,
    color-mix(in srgb, var(--bsr-shade) 88%, transparent) 100%); }
.bsr-dl-hero-in { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center;
                  justify-content: center; text-align: center; padding: 160px 24px 36px; }
.bsr-dl-kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
                 color: color-mix(in srgb, var(--brand-white) 86%, transparent); }
.bsr-dl-title { margin: 22px 0 0; max-width: 18ch; font-family: var(--brand-serif, Georgia, serif); font-weight: 400;
                font-size: clamp(40px, 6.2vw, 94px); line-height: 1.04; letter-spacing: .03em; text-transform: uppercase;
                text-wrap: balance; color: var(--brand-white); }
.bsr-dl-line { display: block; width: 90px; height: 1px; margin: 30px auto 24px; background: var(--brand-accent); }
.bsr-dl-tag { margin: 0; max-width: 560px; font-size: 17px; letter-spacing: .02em; color: color-mix(in srgb, var(--brand-white) 90%, transparent); }
.bsr-dl-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
.bsr-btn.bsr-dl-btn { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-dark); }
.bsr-btn.bsr-dl-btn:hover { background: var(--brand-white); border-color: var(--brand-white); color: var(--brand-dark); }

/* the photo counter, down the left edge */
.bsr-dl-count { position: absolute; z-index: 2; left: 44px; top: 50%; transform: translateY(-50%);
                display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bsr-dl-count .now { font-family: var(--brand-serif, Georgia, serif); font-size: 46px; line-height: 1; color: var(--brand-accent); }
.bsr-dl-count .of { font-size: 11px; letter-spacing: .24em; color: color-mix(in srgb, var(--brand-white) 70%, transparent); margin-bottom: 8px; }
.bsr-dl-count .nav { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 50%;
                     border: 1px solid color-mix(in srgb, var(--brand-white) 40%, transparent); background: transparent;
                     color: var(--brand-white); transition: border-color var(--bsr-ease), color var(--bsr-ease); }
.bsr-dl-count .nav:hover { border-color: var(--brand-accent); color: var(--brand-accent); }

/* the facts along the hero's foot, thin rules between them */
.bsr-dl-facts { position: relative; z-index: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
                width: calc(100% - 64px); max-width: 980px; margin: 0 auto 46px; padding-top: 26px;
                border-top: 1px solid color-mix(in srgb, var(--brand-white) 22%, transparent); }
.bsr-dl-fact { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 16px; text-align: center; }
.bsr-dl-fact + .bsr-dl-fact { border-left: 1px solid color-mix(in srgb, var(--brand-white) 22%, transparent); }
.bsr-dl-fact svg { margin-bottom: 4px; color: var(--brand-accent); }
.bsr-dl-fact .v { font-family: var(--brand-serif, Georgia, serif); font-size: 26px; line-height: 1.1; color: var(--brand-white); }
.bsr-dl-fact .l { font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--brand-white) 72%, transparent); }

/* the body: the story beside the card */
.bsr-dl-body { padding: 140px 0 130px; background: var(--bsr-page); }
.bsr-dl-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 96px; align-items: start; }
.bsr-dl-main { min-width: 0; }
.bsr-dl-sec { position: relative; margin: 0 0 96px; padding: 0 0 96px;
              border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); }
.bsr-dl-sec:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.bsr-dl-sec > *, .bsr-dl-team .bsr-container > *, .bsr-dl-contact-in > *, .bsr-dl-strip-head > * { position: relative; z-index: 1; }
/* the section's word, set large and faint behind its opening lines */
.bsr-dl-ghost { position: absolute !important; z-index: 0 !important; top: -.46em; left: -.05em; pointer-events: none; user-select: none;
                font-family: var(--brand-serif, Georgia, serif); font-size: clamp(88px, 11vw, 176px); line-height: 1; white-space: nowrap;
                color: color-mix(in srgb, var(--brand-dark) 5%, transparent); }
.bsr-dl-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; font-size: 12px; font-weight: 700;
                  letter-spacing: .3em; text-transform: uppercase; color: var(--brand-accent-dark); }
/* no line before it (Andre, 2026-10-16) */
.bsr-dl-lede { margin: 0; max-width: 30em; font-family: var(--brand-serif, Georgia, serif); font-size: clamp(22px, 2.1vw, 30px);
               line-height: 1.45; color: var(--brand-dark); }
.bsr-dl-prose { max-width: 760px; margin-top: 36px; }
/* the document rows: as many across as fit, never wider than the column (a long file name stays on one line) */
.bsr-dl-sec .bsr-dev-files { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.bsr-dl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                border-top: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent)));
                border-left: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); }
.bsr-dl-tile { display: flex; flex-direction: column; gap: 8px; padding: 28px 24px;
               border-right: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent)));
               border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); }
.bsr-dl-tile .v { font-family: var(--brand-serif, Georgia, serif); font-size: 24px; line-height: 1.2; color: var(--brand-primary); }
.bsr-dl-tile .l { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-grey-light); }

.bsr-dl-amen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.bsr-dl-amen-item { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); }
.bsr-dl-amen-item .ico { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
                         border: 1px solid var(--brand-accent); color: var(--brand-accent-dark); }
.bsr-dl-amen-item .n { font-size: 15px; font-weight: 700; color: var(--brand-dark); }
.bsr-dl-amen-item .d { margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--brand-grey-light); }

/* the card that stays in view */
.bsr-dl-aside { position: sticky; top: 130px; }
/* a shorter screen: stick nearer the top so Register stays in view; too short for the whole card, it scrolls with the page */
@media (max-height: 880px) { .bsr-dl-aside { top: 24px; } }
@media (max-height: 760px) { .bsr-dl-aside { position: static; } }
.bsr-dl-card { padding: 34px 30px 30px; background: var(--brand-white);
               border: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); border-top: 3px solid var(--brand-accent);
               box-shadow: 0 24px 60px color-mix(in srgb, var(--bsr-shade) 9%, transparent); }
.bsr-dl-card-l { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--brand-grey-light); }
.bsr-dl-card-price { margin: 8px 0 22px; font-family: var(--brand-serif, Georgia, serif); font-size: 38px; line-height: 1.1; color: var(--brand-primary); }
.bsr-dl-rows { margin: 0 0 24px; }
.bsr-dl-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; font-size: 13.5px;
                   border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); }
.bsr-dl-rows dt { color: var(--brand-grey-light); }
.bsr-dl-rows dd { margin: 0; font-weight: 700; text-align: right; color: var(--brand-dark); }
.bsr-dl-card-agents { display: flex; flex-direction: column; gap: 12px; margin: 0 0 26px; }
.bsr-dl-mini { display: flex; align-items: center; gap: 12px; }
.bsr-dl-mini img { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--bsr-band); }
.bsr-dl-mini .n { display: block; font-size: 14px; font-weight: 700; color: var(--brand-dark); transition: color var(--bsr-ease); }
.bsr-dl-mini .t { display: block; font-size: 12px; color: var(--brand-grey-light); }
.bsr-dl-mini:hover .n { color: var(--brand-primary); }
.bsr-btn.bsr-dl-card-btn { display: block; width: 100%; text-align: center; }

/* the gallery: tall panels side by side; the one under the pointer opens out */
.bsr-dl-strip-sec { position: relative; overflow: hidden; padding: 120px 0 0; background: var(--brand-dark); color: var(--brand-white); }
.bsr-dl-strip-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 46px; }
.bsr-dl-strip-head .bsr-dl-eyebrow { margin: 0; color: var(--brand-accent); }
.bsr-dl-strip-sec .bsr-dl-ghost { color: color-mix(in srgb, var(--brand-white) 6%, transparent); }
.bsr-dl-contact .bsr-dl-ghost { color: color-mix(in srgb, var(--brand-white) 8%, transparent); }
.bsr-dl-strip-n { margin: 0; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: color-mix(in srgb, var(--brand-white) 60%, transparent); }
.bsr-dl-strip { display: flex; height: min(68vh, 640px); }
.bsr-dl-panel { position: relative; flex: 1 1 0; min-width: 0; margin: 0; overflow: hidden; cursor: zoom-in;
                border-right: 1px solid color-mix(in srgb, var(--brand-white) 12%, transparent);
                transition: flex-grow .8s cubic-bezier(.2, .8, .2, 1); }
.bsr-dl-panel:last-child { border-right: 0; }
.bsr-dl-panel.is-more { display: none; }   /* kept in the page for the lightbox's set */
.bsr-dl-panel img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.74) saturate(.85);
                    transition: filter .8s ease, transform 1.4s ease; }
.bsr-dl-panel:hover { flex-grow: 2.2; }
.bsr-dl-panel:hover img { filter: none; transform: scale(1.03); }
.bsr-dl-panel figcaption { position: absolute; left: 22px; bottom: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
                           pointer-events: none; color: var(--brand-white); }
.bsr-dl-panel .i { font-family: var(--brand-serif, Georgia, serif); font-size: 30px; line-height: 1; }
.bsr-dl-panel .v { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; opacity: .8; }

/* one number, the building showing through it */
.bsr-dl-big { overflow: hidden; padding: 130px 0; background: var(--bsr-band); }
.bsr-dl-big-in { display: flex; flex-wrap: wrap; align-items: center; gap: 30px 70px; }
.bsr-dl-num { font-family: var(--brand-serif, Georgia, serif); font-weight: 700; font-size: clamp(140px, 22vw, 340px); line-height: .85;
              letter-spacing: -.02em; background-color: var(--brand-primary); background-size: cover; background-position: center;
              -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .bsr-dl-num { background: none; -webkit-text-fill-color: currentColor; color: var(--brand-primary); }
}
.bsr-dl-big-txt { flex: 1 1 280px; max-width: 470px; }
.bsr-dl-big-line { margin: 0; font-family: var(--brand-serif, Georgia, serif); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.35; color: var(--brand-dark); }
.bsr-dl-big-loc { margin: 20px 0 0; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--brand-grey-light); }

.bsr-dl-film { padding: 130px 0; background: var(--bsr-band); }
.bsr-dl-big + .bsr-dl-film { padding-top: 0; }
.bsr-dl-film-box { position: relative; aspect-ratio: 16 / 9; background: var(--brand-dark);
                   box-shadow: 0 30px 70px color-mix(in srgb, var(--bsr-shade) 18%, transparent); }
.bsr-dl-film-box iframe, .bsr-dl-film-box video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* the people behind it */
.bsr-dl-team { position: relative; overflow: hidden; padding: 130px 0; background: var(--bsr-page); }
.bsr-dl-team .bsr-container { position: relative; }
.bsr-dl-team-row { display: flex; flex-wrap: wrap; align-items: stretch;
                   border-top: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent)));
                   border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); }
.bsr-dl-logo { align-self: center; width: auto; max-width: 220px; max-height: 110px; padding: 28px 48px 28px 0; }
.bsr-dl-partner { flex: 1 1 200px; padding: 34px 32px; border-left: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); }
.bsr-dl-team-row > .bsr-dl-partner:first-child { border-left: 0; padding-left: 0; }
.bsr-dl-partner .l { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--brand-grey-light); }
.bsr-dl-partner .v { display: block; margin-top: 10px; font-family: var(--brand-serif, Georgia, serif); font-size: 22px; line-height: 1.3; color: var(--brand-dark); }
.bsr-btn.bsr-dl-site { margin-top: 38px; }

/* the map, edge to edge, the address on a card over it */
.bsr-dl-map-sec { position: relative; }
.bsr-dl-map { position: relative; z-index: 0; height: 580px; }
.bsr-dl-map-over { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; pointer-events: none; }
.bsr-dl-map-card { max-width: 340px; padding: 34px 32px; pointer-events: auto; background: var(--brand-white);
                   border-top: 3px solid var(--brand-accent); box-shadow: 0 24px 60px color-mix(in srgb, var(--bsr-shade) 16%, transparent); }
.bsr-dl-map-card .a { margin: 0 0 20px; font-family: var(--brand-serif, Georgia, serif); font-size: 22px; line-height: 1.4; color: var(--brand-dark); }
.bsr-dl-map-card a { padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 12px; font-weight: 700;
                     letter-spacing: .16em; text-transform: uppercase; color: var(--brand-primary); }

/* the close: the team's details beside the VIP form, on the brand's main colour so it
   stands apart from the gallery band above and the footer below */
.bsr-dl-contact { position: relative; overflow: hidden; padding: 140px 0; background: var(--brand-primary); color: var(--brand-white); }
.bsr-dl-contact-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 96px; align-items: start; }
.bsr-dl-contact .bsr-dl-ghost { left: auto; right: -.04em; top: -.62em; }
.bsr-dl-contact .bsr-dl-eyebrow { color: var(--brand-accent); }
.bsr-dl-h2 { margin: 0 0 40px; font-family: var(--brand-serif, Georgia, serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 52px);
             line-height: 1.1; color: var(--brand-white); }
.bsr-dl-person { display: flex; align-items: center; gap: 18px; padding: 20px 0; border-top: 1px solid color-mix(in srgb, var(--brand-white) 16%, transparent); }
.bsr-dl-person img { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--brand-primary-dark); }
.bsr-dl-person .n { display: block; font-size: 16px; font-weight: 700; color: var(--brand-white); transition: color var(--bsr-ease); }
.bsr-dl-person .n:hover { color: var(--brand-accent); }
.bsr-dl-person .t { display: block; margin: 2px 0 6px; font-size: 12.5px; color: color-mix(in srgb, var(--brand-white) 70%, transparent); }
.bsr-dl-person .c { display: inline-block; margin-right: 18px; font-size: 13.5px; color: var(--brand-accent); transition: color var(--bsr-ease); }
.bsr-dl-person .c:hover { color: var(--brand-white); }
.bsr-dl-office { display: flex; flex-direction: column; gap: 4px; margin-top: 30px; padding-top: 24px; font-size: 13.5px;
                 border-top: 1px solid color-mix(in srgb, var(--brand-white) 12%, transparent); color: color-mix(in srgb, var(--brand-white) 70%, transparent); }
.bsr-dl-office .n { font-weight: 700; letter-spacing: .04em; color: var(--brand-white); }
.bsr-dl-office a { color: var(--brand-accent); }
.bsr-dl-contact .bsr-inquiry-card { position: static; padding: 40px 38px; }

/* phones: Register one tap away (shown past the hero, by the page's script) */
.bsr-dl-sticky { display: none; }

/* sections rise into place the first time they come into view (the page adds the class, so no-JS sees everything) */
.bsr-dl-rv { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.bsr-dl-rv.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .bsr-dl-slide { transition: none; transform: none; }
  .bsr-dl-rv { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1180px) {
  .bsr-dl-cols { grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; }
}
@media (max-width: 900.98px) {
  .bsr-dl-hero-in { padding-top: 140px; }
  .bsr-dl-count { display: none; }
  .bsr-dl-facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; width: calc(100% - 48px); margin-bottom: 36px; }
  .bsr-dl-fact:nth-child(odd) { border-left: 0; }
  .bsr-dl-body { padding: 90px 0 80px; }
  .bsr-dl-cols { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .bsr-dl-aside { position: static; }
  .bsr-dl-sec { margin-bottom: 64px; padding-bottom: 64px; }
  .bsr-dl-amen { grid-template-columns: minmax(0, 1fr); }
  .bsr-dl-strip-sec { padding-top: 90px; }
  .bsr-dl-strip { height: 440px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .bsr-dl-strip::-webkit-scrollbar { display: none; }
  .bsr-dl-panel, .bsr-dl-panel.is-more { display: block; flex: 0 0 78%; scroll-snap-align: start; }
  .bsr-dl-panel:hover { flex-grow: 0; }
  .bsr-dl-big, .bsr-dl-team, .bsr-dl-film { padding: 90px 0; }
  .bsr-dl-big + .bsr-dl-film { padding-top: 0; }
  .bsr-dl-team-row { flex-direction: column; }
  .bsr-dl-partner { flex: none; }
  .bsr-dl-partner, .bsr-dl-team-row > .bsr-dl-partner:first-child { padding: 22px 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--brand-light) 85%, var(--brand-tint, var(--brand-accent))); }
  .bsr-dl-team-row > :first-child { border-top: 0; }
  .bsr-dl-logo { padding: 26px 0; }
  .bsr-dl-map { height: 380px; }
  .bsr-dl-map-over { position: static; display: block; padding: 0; pointer-events: auto; }
  .bsr-dl-map-card { max-width: none; box-shadow: none; }
  .bsr-dl-contact { padding: 100px 0 120px; }
  .bsr-dl-contact-in { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .bsr-dl-contact .bsr-inquiry-card { padding: 30px 24px; }
  .bsr-dl-sticky { display: block; position: fixed; z-index: 450; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
                   padding: 16px; text-align: center; border-radius: 999px; background: var(--brand-primary); color: var(--brand-white);
                   font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
                   box-shadow: 0 12px 30px color-mix(in srgb, var(--bsr-shade) 30%, transparent);
                   transform: translateY(170%); transition: transform .35s ease; }
  .bsr-dl-sticky.is-on { transform: none; }
}
@media (max-width: 560px) {
  .bsr-dl-tiles { grid-template-columns: minmax(0, 1fr); }
  .bsr-dl-tile { padding: 22px 20px; }
  .bsr-dl-card { padding: 28px 22px 24px; }
}

/* ---------- Offices ----------
   Index cards, hero, gallery, map and agent roster all reuse the .bsr-dev-*
   classes above; only the contact/hours block below is office-specific. */
.bsr-office-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 860px) { .bsr-office-split { grid-template-columns: 1fr; gap: 48px; } }

.bsr-office-line { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: 15px; color: var(--brand-grey); line-height: 1.6; }
.bsr-office-line svg { flex: 0 0 auto; margin-top: 3px; color: var(--brand-accent); }
.bsr-office-line a { color: var(--brand-primary); text-decoration: underline; }
.bsr-office-line a:hover { color: var(--brand-dark); }
.bsr-office-licence { margin-top: 18px; font-size: 12px; color: var(--brand-grey-light); letter-spacing: .04em; }

.bsr-office-hour { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--brand-light) 89.5%, var(--brand-accent)); }
.bsr-office-hour:last-child { border-bottom: none; }
.bsr-office-hour .d { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-grey-light); }
.bsr-office-hour .t { font-weight: 700; color: var(--brand-dark); text-align: right; }
.bsr-office-hour.closed .t { font-weight: 600; color: var(--brand-grey-light); }

/* ---------- 404 ----------
   A short list of routes rather than a search box: someone here followed a
   stale link or mistyped, and the useful next step is the handful of pages
   people actually want. Sized to stay one column on a phone. */
.bsr-404-links { display: grid; gap: 12px; max-width: 620px; }
.bsr-404-link  { display: block; padding: 16px 18px; text-decoration: none;
                 border: 1px solid color-mix(in srgb, var(--brand-dark) 12%, transparent); border-radius: 8px;
                 background: var(--brand-white); transition: border-color .15s ease, box-shadow .15s ease; }
.bsr-404-link:hover { border-color: var(--brand-primary); box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.bsr-404-link-label { display: block; font-family: var(--brand-font); font-weight: 700;
                      font-size: 15px; color: var(--brand-primary); }
.bsr-404-link-note  { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5;
                      color: color-mix(in srgb, var(--brand-grey) 86.5%, var(--brand-light)); }

/* ---------- Agent detail page ----------
   One measure for the whole page — the contact block, the bio and the
   listings row all sit on 1060px, so their left and right edges line up
   instead of the bio being narrower than the block above it. */
/* margin-right:auto with margin-left left at 0 — the block is 1060px wide and
   FLUSH LEFT inside a full-width container, so the contact block, the bio, the
   listings row and the form all start on one edge. Applied to inner divs only:
   on .bsr-container itself this would narrow and re-centre the container and
   push everything right instead. */
.bsr-agent-measure, .bsr-agent-bio { max-width: 1060px; margin-right: auto; }
/* Justified, as asked. text-wrap:pretty keeps the last line from stranding a
   single word, which justification makes more obvious, and hyphens stop the
   long words in a bio opening rivers of white space between them. */
.bsr-agent-bio { margin-top: 44px; }
/* max-width:none is the point of this line. .bsr-body carries its own 640px cap
   — a sensible default for body copy in a narrow column — and it was winning
   over the 1060px wrapper, so the bio measured 640 no matter what the parent
   said. The cap is lifted only inside the agent bio. */
.bsr-agent-bio .bsr-body { max-width: none; text-align: justify; text-wrap: pretty; hyphens: auto; }
/* Bottom LEFT of the bio: flush with the copy above it. */
.bsr-agent-bio-cta { margin-top: 26px; display: flex; justify-content: flex-start; }

/* ---------- Lead form: the contact-page layout, opt-in ----------
   $lf_layout = 'split' adds .bsr-contact-form, so the fields pick up the
   underline styling the contact page already defines and there is no second
   set of form rules to keep in step. Only the width and alignment are set
   here — everything visual comes from the shared class. */
/* No card, no ground, no border, no padding — the form is just content on the
   page, starting at the same left edge as the bio and the button above it. */
.bsr-lead-plain { background: none; border: 0; padding: 0; }
.bsr-lead-plain::before { content: none; }
.bsr-lead-form.is-split { max-width: none; }

/* ---------- Touch targets ----------
   Only where the pointer is COARSE — a finger — so the desktop layout is
   untouched. A 44px floor on a mouse-driven page would push inline links
   apart for no reason. */
@media (pointer: coarse) {
  .bsr-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .bsr-field select { min-height: 44px; font-size: 16px; }
  .bsr-row-nav, .bsr-menu-btn, .bsr-offcanvas-close { min-width: 44px; min-height: 44px; }
  .bsr-agent-social a { min-height: 44px; }
}

/* A PORTRAIT in the split panel — an agent headshot where the brokerage page
   has a wide landscape shot.

   height:auto is the load-bearing part: the base rule is height:100%, which
   stretches the panel to match the copy column (200px of vertical padding, so
   ~700px tall) and scales a headshot to fill it. Constrained to 4:5 and
   centred, it reads as a photograph of a person rather than a mural. */
.bsr-split .photo.is-portrait {
  align-self: center; justify-self: center;
  width: min(100%, 420px); height: auto; aspect-ratio: 4 / 5;
  margin: 64px 0; border-radius: var(--bsr-radius);
  /* Light BEHIND the photo. Headshots are shot on white and often cut out, so
     on the white section ground the subject floated with no edge to sit
     against. background-color and background-image are separate properties, so
     this fills the box without disturbing the inline url() the template sets. */
  background-color: var(--brand-light);
  background-size: cover; background-position: center top;
}
@media (max-width: 900.98px) {
  /* The stacked layout already gives .photo a 4/5 box; only the inset differs. */
  .bsr-split .photo.is-portrait { margin: 40px auto 0; width: min(78%, 340px); }
}

/* The agent variant of the split section gets a WIDER COPY COLUMN.

   The base rule splits 1fr/1fr and caps the copy at 640px, which suits a
   full-bleed landscape photo. Once the photo is a contained 420px portrait,
   half the row is mostly empty ground while the bio wraps every eight or nine
   words. Giving the copy the larger share puts the two back in proportion.

   :has() rather than a class on the section, because the section markup comes
   from the brokerage heredoc and this is the only thing that would need to
   change there. A browser without :has() simply renders the base rule — the
   layout as it is today, not a broken one. */
.bsr-split:has(.photo.is-portrait) {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); gap: 48px;
}
.bsr-split:has(.photo.is-portrait) .copy {
  max-width: 820px; padding: 140px 32px;
}
@media (max-width: 900.98px) {
  .bsr-split:has(.photo.is-portrait) { grid-template-columns: 1fr; gap: 32px; }
  .bsr-split:has(.photo.is-portrait) .copy { max-width: none; padding: 40px 40px 90px; }
}

/* No headshot on file: the brand monogram, scaled down and centred in the same
   light frame. NOT "cover" — that would crop a logo to fill a 4:5 box. */
.bsr-split .photo.is-portrait.is-empty {
  background-size: 42%; background-position: center; background-repeat: no-repeat;
}