:root {
    --lx-white: #ffffff;
    --lx-ink: #111111;
    --lx-muted: #74706c;
    --lx-line: #ece8e2;
    --lx-line-soft: #f7f4ef;
    --lx-surface-soft: #faf8f4;
    --lx-blue: #5b8def;
    --lx-violet: #9b6dff;
    --lx-sage: #6fd79e;
    --lx-aurora-gold: #f2c94c;
    --lx-peach: #f2a26b;
    --lx-blush: #f6a9c9;
    --lx-aurora: linear-gradient(100deg, var(--lx-blue) 0%, var(--lx-violet) 20%, var(--lx-sage) 40%, var(--lx-aurora-gold) 60%, var(--lx-peach) 78%, var(--lx-blush) 100%);
    --lx-aurora-conic: conic-gradient(from var(--lx-card-angle, 0deg), var(--lx-blue), var(--lx-violet), var(--lx-sage), var(--lx-aurora-gold), var(--lx-peach), var(--lx-blush), var(--lx-blue));
    --lx-aurora-conic-static: conic-gradient(from 0deg, var(--lx-blue), var(--lx-violet), var(--lx-sage), var(--lx-aurora-gold), var(--lx-peach), var(--lx-blush), var(--lx-blue));
    --lx-display: "Playfair Display", Georgia, serif;
    --lx-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --lx-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --nav-h: 68px;
    --toolbar-h: 68px;
    --seo-h: 0px;
  }
  * { box-sizing: border-box; }
  html, body { min-height: 100%; }
  body {
    margin: 0;
    background: var(--lx-white);
    color: var(--lx-ink);
    font-family: var(--lx-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  body.search-lock { height: 100vh; overflow: hidden; }
  body.has-search-seo { --seo-h: 92px; }
  /* Embed (iframe) mode: site chrome belongs to the host page. Search tools,
     listings, and the compliance footer stay; only the nav goes. */
  body.embed-mode { --nav-h: 0px; }
  body.embed-mode header.nav { display: none; }
  /* Embed preset lock (e.g. ?preset=rent): the status/intent toggle is fixed
     server-side, so its UI goes; price/beds/type filters stay. */
  body.embed-preset-locked #statusPill, body.embed-preset-locked #statusPopover { display: none; }
  a { color: inherit; text-decoration: none; }
  button, input, select { font: inherit; }
  button { cursor: pointer; }
  .nav {
    height: var(--nav-h);
    border-bottom: 1px solid var(--lx-line);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(180%) blur(12px);
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .nav-inner {
    height: 100%;
    padding: 0 clamp(18px, 3vw, 42px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }
  .brand {
    font-family: var(--lx-display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .nav-actions { display: flex; align-items: center; gap: 18px; }
  .nav-link {
    color: var(--lx-muted);
    font-size: 14px;
    font-weight: 650;
  }
  .phone {
    border: 1px solid var(--lx-ink);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
  }
  .search-seo-summary {
    min-height: var(--seo-h);
    border-bottom: 1px solid var(--lx-line);
    background: var(--lx-white);
    padding: 14px clamp(18px, 3vw, 42px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }
  .search-seo-summary h1 {
    margin: 0;
    font-family: var(--lx-display);
    font-size: 26px;
    line-height: 1.08;
    font-weight: 650;
    letter-spacing: 0;
  }
  .search-seo-summary h2 {
    margin: 6px 0 0;
    color: var(--lx-muted);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 750;
  }
  .search-seo-summary p {
    margin: 0;
    max-width: 560px;
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.45;
    text-align: right;
  }
  .toolbar {
    min-height: var(--toolbar-h);
    border-bottom: 1px solid var(--lx-line);
    background: var(--lx-white);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px clamp(14px, 2vw, 28px);
    position: sticky;
    top: var(--nav-h);
    /* Above the map + its overlays (z 40–70) so the autocomplete dropdown,
       which lives in this sticky stacking context, isn't hidden behind the map. */
    z-index: 90;
  }
  /* Field wrapper carries the flex sizing + positioning so the suggestions dropdown
     (a child of .searchbox-field, sibling of .searchbox) is NOT clipped by
     .searchbox's overflow:hidden (which exists to clip the rotating aurora border). */
  .searchbox-field { position: relative; flex: 1 1 420px; max-width: 560px; }
  .searchbox-field > .searchbox { flex: none; max-width: none; width: 100%; }
  .searchbox {
    position: relative;
    flex: 1 1 420px;
    max-width: 560px;
    border-radius: 10px;
    padding: 1.5px;
    overflow: hidden;
    isolation: isolate;
    background: var(--lx-white);
  }
  /* Aurora border that CIRCLES the box: a conic SQUARE rotated via transform
     (works on every browser incl. Safari/iOS — animating an @property angle
     silently does not). overflow:hidden clips it to the 1.5px frame; the white
     inner sits on top so only the border shows the rotating aurora. */
  .searchbox::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 250%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: var(--lx-aurora-conic-static);
    animation: lx-aurora-rotate 6s linear infinite;
    pointer-events: none;
  }
  .searchbox-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    border-radius: 8px;
    background: var(--lx-white);
    padding: 0 13px;
  }
  .searchbox input {
    width: 100%;
    min-width: 120px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--lx-ink);
    font-size: 14.5px;
  }
  .search-icon { color: var(--lx-muted); }
  .mode-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    border: 1px solid var(--lx-line);
    border-radius: 999px;
    padding: 2px;
    background: var(--lx-line-soft);
  }
  .mode-toggle button {
    min-height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--lx-muted);
    padding: 0 9px;
    font-size: 11.5px;
    font-weight: 800;
  }
  .mode-toggle button[aria-pressed="true"] {
    background: var(--lx-ink);
    color: var(--lx-white);
  }
  .suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 70;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--lx-line);
    border-radius: 8px;
    background: var(--lx-white);
    box-shadow: 0 16px 42px rgba(17, 17, 17, 0.14);
  }
  .suggestions[hidden] { display: none; }
  .suggestion {
    width: 100%;
    min-height: 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 0;
    border-bottom: 1px solid var(--lx-line);
    border-radius: 0;
    background: var(--lx-white);
    color: var(--lx-ink);
    padding: 9px 12px;
    text-align: left;
  }
  .suggestion:last-child { border-bottom: 0; }
  .suggestion:hover,
  .suggestion:focus {
    background: var(--lx-surface-soft);
    outline: none;
  }
  .suggestion strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .suggestion span {
    color: var(--lx-muted);
    font-size: 13px;
    font-weight: 600;
  }
  .suggestion em {
    color: var(--lx-muted);
    font-style: normal;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
  }
  .pill-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .pill {
    min-height: 42px;
    border: 1px solid var(--lx-line);
    border-radius: 999px;
    background: var(--lx-white);
    color: var(--lx-ink);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color 0.18s var(--lx-ease), background 0.18s var(--lx-ease);
  }
  .pill:hover, .pill.is-active { border-color: var(--lx-ink); }
  .pill-badge {
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--lx-ink);
    color: var(--lx-white);
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
    font-size: 11px;
  }
  .pill-badge[hidden] { display: none; }
  .toolbar-spacer { flex: 1 1 auto; }
  .layout-toggle {
    display: inline-flex;
    border: 1px solid var(--lx-line);
    border-radius: 999px;
    padding: 3px;
    background: var(--lx-line-soft);
  }
  .layout-toggle button {
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--lx-muted);
    padding: 0 11px;
    font-size: 12.5px;
    font-weight: 750;
  }
  .layout-toggle button.is-on {
    background: var(--lx-white);
    color: var(--lx-ink);
    box-shadow: 0 1px 4px rgba(17, 17, 17, 0.12);
  }
  .sort-select {
    min-height: 42px;
    border: 1px solid var(--lx-line);
    border-radius: 999px;
    background: var(--lx-white);
    color: var(--lx-ink);
    padding: 0 34px 0 13px;
    font-size: 13.5px;
    font-weight: 700;
  }
  .pop {
    position: fixed;
    top: calc(var(--nav-h) + var(--toolbar-h) + 8px);
    left: 20px;
    width: min(360px, calc(100vw - 28px));
    max-height: calc(100vh - var(--nav-h) - var(--toolbar-h) - 28px);
    overflow: auto;
    display: none;
    border: 1px solid var(--lx-line);
    border-radius: 12px;
    background: var(--lx-white);
    box-shadow: 0 18px 54px rgba(17, 17, 17, 0.14);
    padding: 16px;
    z-index: 100; /* above the sticky toolbar (z-index 90) — was 60, rendered behind it */
  }
  .pop.is-open { display: block; }
  .pop-title {
    margin: 0 0 12px;
    color: var(--lx-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .check-row {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 650;
  }
  .check-row input { width: 16px; height: 16px; accent-color: var(--lx-ink); }
  .sub-group {
    display: grid;
    gap: 5px;
    margin: -2px 0 8px 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--lx-line-soft);
  }
  .field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  .input {
    min-height: 42px;
    width: 100%;
    border: 1px solid var(--lx-line);
    border-radius: 8px;
    background: var(--lx-white);
    color: var(--lx-ink);
    padding: 0 11px;
    outline: 0;
  }
  .input:focus { border-color: var(--lx-ink); }
  .chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip {
    min-height: 36px;
    border: 1px solid var(--lx-line);
    border-radius: 8px;
    background: var(--lx-white);
    color: var(--lx-ink);
    padding: 0 12px;
    font-size: 13px;
    font-weight: 750;
  }
  .chip.is-on {
    border-color: var(--lx-ink);
    background: var(--lx-ink);
    color: var(--lx-white);
  }
  .pop-actions { display: flex; gap: 8px; margin-top: 14px; }
  /* Mobile filter sheet + floating map controls. Desktop = transparent passthrough
     (popovers are position:fixed and keep anchoring to their pills as before). */
  .filter-sheet { display: contents; }
  .sheet-head, .sheet-foot { display: none; }
  .map-fabs, .layers-menu { display: none; }
  .action {
    min-height: 40px;
    border: 1px solid var(--lx-ink);
    border-radius: 8px;
    background: var(--lx-ink);
    color: var(--lx-white);
    padding: 0 13px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .action.secondary {
    background: var(--lx-white);
    color: var(--lx-ink);
  }
  .split {
    position: relative; /* anchors the mobile .map-fabs (moved out of .map-panel) */
    height: calc(100vh - var(--nav-h) - var(--toolbar-h) - var(--seo-h));
    display: grid;
    grid-template-columns: minmax(460px, 1.15fr) minmax(420px, 0.85fr);
  }
  .split[data-layout="list"] { grid-template-columns: 1fr; }
  .split[data-layout="list"] .map-panel { display: none; }
  .split[data-layout="map"] { grid-template-columns: 1fr; }
  .split[data-layout="map"] .results-panel { display: none; }
  .map-panel {
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--lx-line);
    background:
      radial-gradient(100% 70% at 12% 8%, rgba(91, 141, 239, 0.18), transparent 58%),
      radial-gradient(90% 70% at 92% 88%, rgba(246, 169, 201, 0.22), transparent 62%),
      linear-gradient(180deg, #f4f6f2 0%, #eef2ef 100%);
  }
  .map-lines {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(17, 17, 17, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(17, 17, 17, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
  }
  .map-tiles {
    position: absolute;
    inset: 0;
    display: none;
    background: #e8ecef;
  }
  .google-map-canvas {
    position: absolute;
    inset: 0;
    display: none;
  }
  .map-tile {
    position: absolute;
    width: 256px;
    height: 256px;
    user-select: none;
    pointer-events: none;
  }
  .map-panel.is-real-map {
    background: #e8ecef;
  }
  .map-panel.is-real-map .map-tiles {
    display: block;
  }
  .map-panel.is-google-map {
    background: #e8ecef;
  }
  .map-panel.is-google-map .google-map-canvas {
    display: block;
  }
  .map-panel.is-google-map .map-tiles,
  .map-panel.is-google-map #pins {
    display: none;
  }
  .map-panel.is-real-map .map-lines,
  .map-panel.is-real-map .map-road,
  .map-panel.is-real-map .map-water,
  .map-panel.is-real-map .map-label,
  .map-panel.is-google-map .map-lines,
  .map-panel.is-google-map .map-road,
  .map-panel.is-google-map .map-water,
  .map-panel.is-google-map .map-label {
    display: none;
  }
  .map-road {
    position: absolute;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.04);
  }
  .map-road.h { left: -8%; right: -8%; height: 11px; border-radius: 999px; }
  .map-road.v { top: -8%; bottom: -8%; width: 11px; border-radius: 999px; }
  .map-road.d { width: 150%; height: 10px; left: -25%; top: 49%; transform: rotate(-18deg); border-radius: 999px; }
  .map-water {
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: -13%;
    height: 32%;
    background: linear-gradient(180deg, #dfeaf4, #cfe0ef);
    border-radius: 48% 48% 0 0 / 22% 22% 0 0;
    opacity: 0.86;
  }
  .map-label {
    position: absolute;
    color: #9aa3a0;
    font-family: var(--lx-display);
    font-size: 15px;
    font-style: italic;
  }
  .map-disclaimer {
    position: absolute;
    left: 16px;
    bottom: 14px;
    max-width: min(420px, calc(100% - 32px));
    z-index: 7;
    border: 1px solid var(--lx-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--lx-muted);
    padding: 7px 11px;
    font-size: 11.5px;
    line-height: 1.45;
  }
  .map-disclaimer[hidden] { display: none; }
  .pin {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -100%);
  }
  .pin button {
    min-height: 30px;
    border: 1.5px solid var(--lx-white);
    border-radius: 999px;
    background: var(--lx-ink);
    color: var(--lx-white);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(17, 17, 17, 0.24);
    transition: transform 0.18s var(--lx-ease), box-shadow 0.18s var(--lx-ease);
  }
  .pin::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 9px;
    height: 9px;
    background: var(--lx-ink);
    transform: translateX(-50%) rotate(45deg);
  }
  .pin.is-sold button {
    border-color: var(--lx-violet);
    background: var(--lx-violet);
    color: var(--lx-white);
  }
  .pin.is-sold::after {
    background: var(--lx-violet);
    box-shadow: 1px 1px 0 var(--lx-violet);
  }
  .pin.is-hot { z-index: 8; }
  .pin.is-hot button {
    transform: scale(1.11);
    box-shadow: 0 0 0 4px rgba(91, 141, 239, 0.22), 0 8px 20px rgba(17, 17, 17, 0.3);
  }
  .pin.is-cluster button {
    min-width: 42px;
    border-color: var(--lx-ink);
    background: var(--lx-white);
    color: var(--lx-ink);
  }
  .pin.is-cluster::after {
    background: var(--lx-white);
    box-shadow: 1px 1px 0 var(--lx-ink);
  }
  .results-panel {
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--lx-white);
    padding: 20px clamp(18px, 3vw, 34px) 34px;
  }
  .results-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
  }
  .results-title {
    margin: 0;
    font-family: var(--lx-display);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.1;
  }
  .results-sub {
    margin-top: 4px;
    color: var(--lx-muted);
    font-size: 13px;
  }
  .save-search {
    border-color: var(--lx-ink);
  }
  .lead-modal[hidden] { display: none; }
  .lead-modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(17, 17, 17, 0.44);
  }
  .lead-dialog {
    width: min(100%, 430px);
    border: 1px solid var(--lx-line);
    border-radius: 8px;
    background: var(--lx-white);
    box-shadow: 0 24px 80px rgba(17, 17, 17, 0.24);
    padding: 22px;
  }
  .lead-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
  }
  .lead-head h2 {
    margin: 0;
    font-family: var(--lx-display);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0;
  }
  .lead-head p {
    margin: 5px 0 0;
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.45;
  }
  .lead-close {
    border: 1px solid var(--lx-line);
    border-radius: 999px;
    width: 34px;
    height: 34px;
    background: var(--lx-white);
    color: var(--lx-ink);
    cursor: pointer;
  }
  .lead-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .lead-fields .input { width: 100%; }
  .lead-fields .span-2 { grid-column: 1 / -1; }
  .lead-alt { font-size: 12px; color: var(--lx-muted); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lx-line); }
  .lead-alt button { border: 0; background: none; color: var(--lx-ink); text-decoration: underline; font-size: 12px; cursor: pointer; font-family: inherit; padding: 0; }
  .share-menu[hidden] { display: none; }
  .share-menu {
    position: fixed;
    z-index: 60;
    width: min(242px, calc(100vw - 32px));
    border: 1px solid var(--lx-line);
    border-radius: 8px;
    background: var(--lx-white);
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.22);
    padding: 8px;
  }
  .share-menu-title {
    padding: 6px 8px 8px;
    color: var(--lx-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .share-menu button,
  .share-menu a {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--lx-ink);
    padding: 10px;
    font-size: 14px;
    text-align: left;
  }
  .share-menu button:hover,
  .share-menu a:hover { background: var(--lx-surface-soft); }
  .share-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 70;
    transform: translate(-50%, 10px);
    border-radius: 999px;
    background: var(--lx-ink);
    color: var(--lx-white);
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s var(--lx-ease), transform 0.18s var(--lx-ease);
  }
  .share-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .lead-consent {
    display: grid;
    gap: 9px;
    margin-top: 14px;
    color: var(--lx-muted);
    font-size: 12px;
    line-height: 1.45;
  }
  .lead-status {
    min-height: 18px;
    margin-top: 12px;
    color: var(--lx-muted);
    font-size: 12.5px;
  }
  .lead-actions {
    display: flex;
    justify-content: end;
    gap: 10px;
    margin-top: 16px;
  }
  .cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .ssr-listing-cards { display: contents; }
  .split[data-layout="list"] .cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .card {
    display: block;
    color: inherit;
    cursor: pointer;
    /* Opaque white card so the aurora glow halos the OUTSIDE only and never
       bleeds through the price/address text. */
    background: var(--lx-white);
    border-radius: 10px;
    transition: transform 0.22s var(--lx-ease);
    /* Fill the grid-stretched .card-wrap so short cards (e.g. Land, no bd/ba/sqft)
       don't leave an aurora strip below the content. */
    height: 100%;
  }
  .card-wrap {
    position: relative;
    min-width: 0;
    border-radius: 12px;
    padding: 2px;
    overflow: hidden;
    isolation: isolate;
    background: var(--lx-white);
    scroll-snap-align: start;
    transition: transform 0.22s var(--lx-ease);
  }
  .card-wrap > * { position: relative; z-index: 1; }
  /* Aurora frame that CIRCLES the card: a conic SQUARE rotated via transform
     (Safari/iOS-safe — animating an @property angle silently does not).
     overflow:hidden on .card-wrap clips it to the 2px frame; the opaque white
     .card sits on top (z-index:1) so it can never bleed over the price/address
     text. Revealed on hover/focus/featured. */
  .card-wrap::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 260%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: var(--lx-aurora-conic-static);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--lx-ease);
  }
  .card-wrap:hover::before,
  .card-wrap:focus-within::before,
  .card-wrap.is-hot::before {
    opacity: 1;
    animation: lx-aurora-rotate 4.5s linear infinite;
  }
  /* Lift the WHOLE framed card (not the inner card) on hover, so the aurora
     border stays even all the way around. Lifting only the inner .card slid it
     up inside the fixed frame, making the border thicker on the bottom. */
  .card-wrap:hover, .card-wrap:focus-within {
    transform: translateY(-3px);
  }
  .card-actions {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 4;
    display: flex;
    gap: 8px;
  }
  .card-action {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--lx-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--lx-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(17, 17, 17, 0.16);
    transition: color 0.15s var(--lx-ease), transform 0.15s var(--lx-ease);
  }
  .card-action:hover { color: var(--lx-ink); transform: scale(1.06); }
  .save-home.is-saved { color: #e0245e; }
  /* ===== Visitor identity (matches the detail page) ===== */
  .signin-pill[hidden], .nav-id[hidden], .id-menu[hidden], body.has-idx-visitor #signinBtn, body:not(.has-idx-visitor) #navId { display: none !important; }
  .signin-pill { font-size: 13px; border: 1px solid var(--lx-line); border-radius: 999px; background: var(--lx-white); color: var(--lx-ink); padding: 8px 16px; cursor: pointer; font-family: inherit; }
  .signin-pill:hover { border-color: var(--lx-ink); }
  .nav-id { position: relative; }
  /* The account menu lives inside .nav's stacking context (z 40), which sits
     below the sticky toolbar (z 90) — so the menu's lower half gets painted
     over. Lift the nav only while the menu is open; a permanent lift would put
     the header above the full-screen lead modal (z 40). */
  .nav.id-menu-open { z-index: 95; }
  .avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--lx-line); background: var(--lx-ink); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .5px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .avatar:hover { opacity: .85; }
  .id-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--lx-white); border: 1px solid var(--lx-line); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.12); padding: 12px; min-width: 200px; z-index: 80; }
  .id-menu .who { font-size: 13px; font-weight: 600; margin-bottom: 2px; word-break: break-all; }
  .id-menu .sub { font-size: 12px; color: var(--lx-muted); margin-bottom: 10px; }
  .id-menu .menu-link { display: block; font-size: 12.5px; border: 1px solid var(--lx-line); border-radius: 8px; padding: 8px 10px; text-align: center; margin-bottom: 8px; }
  .id-menu .menu-link:hover { border-color: var(--lx-ink); }
  .id-menu button { width: 100%; font-size: 12.5px; border: 1px solid var(--lx-line); border-radius: 8px; background: var(--lx-white); padding: 8px 10px; cursor: pointer; font-family: inherit; }
  .id-menu button:hover { border-color: var(--lx-ink); }
  .card-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    background: var(--lx-surface-soft);
    touch-action: pan-y;
  }
  .card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s var(--lx-ease);
  }
  .card-photo[hidden] { display: none; }
  .card:hover .card-media img, .card.is-hot .card-media img { transform: scale(1.045); }
  .card-carousel {
    /* Overlay the photo box exactly (.card-media is the first child of .card,
       full width inside .card-wrap's 2px padding, aspect-ratio 4/3), so the
       prev/next arrows vertical-center on the PHOTO, not the whole card.
       Keep the aspect-ratio in sync with .card-media. */
    position: absolute;
    left: 2px;
    right: 2px;
    top: 2px;
    aspect-ratio: 4 / 3;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    pointer-events: none;
  }
  .card-carousel button {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.72);
    color: var(--lx-white);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    pointer-events: auto;
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.22);
  }
  .status-badge {
    position: absolute;
    left: 11px;
    top: 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--lx-ink);
    padding: 5px 10px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .status-badge.is-sold {
    background: var(--lx-violet);
    color: var(--lx-white);
  }
  .card-body { padding: 12px 2px 4px; }
  .price {
    font-family: var(--lx-display);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.08;
  }
  .address {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 650;
  }
  .facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    color: var(--lx-muted);
    font-size: 13px;
  }
  .facts b { color: var(--lx-ink); }
  .card-foot {
    margin-top: 8px;
    color: var(--lx-muted);
    font-size: 12.5px;
  }
  .detail-line {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    color: var(--lx-muted);
    font-size: 12px;
  }
  .results-foot { padding: 0 clamp(14px, 2vw, 28px) 40px; }
  /* IDX compliance attribution: ≥ average page typeface (15px), ink color, always
     in the visible results panel so desktop never hides the brokerage/agent/DRE. */
  .results-identity { font-size: 15px; line-height: 1.55; color: var(--lx-ink); border-top: 1px solid var(--lx-line); margin-top: 10px; padding-top: 16px; }
  .results-identity b { font-weight: 600; }
  .disclaimer {
    grid-column: 1 / -1;
    border-top: 1px solid var(--lx-line);
    color: var(--lx-muted);
    margin-top: 10px;
    padding-top: 16px;
    font-size: 11.5px;
    line-height: 1.6;
    white-space: pre-line;
  }
  .pagination-note {
    grid-column: 1 / -1;
    border: 1px solid var(--lx-line);
    border-radius: 8px;
    background: var(--lx-surface-soft);
    color: var(--lx-muted);
    padding: 10px 12px;
    font-size: 12.5px;
    font-weight: 650;
  }
  .pagination {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid var(--lx-line);
  }
  .pagination-summary {
    color: var(--lx-muted);
    font-size: 12.5px;
    font-weight: 650;
  }
  .pagination-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .page-nums { display: flex; align-items: center; gap: 4px; }
  .page-step,
  .page-num {
    min-height: 36px;
    min-width: 36px;
    border: 1px solid var(--lx-line);
    border-radius: 8px;
    background: var(--lx-white);
    color: var(--lx-ink);
    padding: 0 12px;
    font-size: 13px;
    font-weight: 700;
    transition: border-color 0.15s var(--lx-ease), background 0.15s var(--lx-ease), color 0.15s var(--lx-ease);
  }
  .page-num { padding: 0; }
  .page-step:hover:not([disabled]),
  .page-num:hover:not(.is-current) {
    border-color: var(--lx-ink);
  }
  .page-num.is-current {
    background: var(--lx-ink);
    color: var(--lx-white);
    border-color: var(--lx-ink);
    cursor: default;
  }
  .page-step[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .page-gap {
    color: var(--lx-muted);
    padding: 0 4px;
    font-weight: 700;
    user-select: none;
  }
  .empty, .loading {
    grid-column: 1 / -1;
    border: 1px solid var(--lx-line);
    border-radius: 8px;
    background: var(--lx-white);
    padding: 30px;
    color: var(--lx-muted);
  }
  .empty h2, .loading h2 {
    margin: 0 0 8px;
    color: var(--lx-ink);
    font-family: var(--lx-display);
    font-weight: 500;
    letter-spacing: 0;
  }
  @media (max-width: 1180px) {
    /* One compact, adaptive row (Zillow-style): search left, filter pills
       scroll in the middle, controls right — no stacking into tall rows. */
    .toolbar { flex-wrap: nowrap; align-items: center; height: auto; position: static; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
    .searchbox { flex: 0 1 320px; min-width: 200px; max-width: 380px; }
    .mode-toggle { display: none; } /* hide Area/Address/MLS# toggle on narrow (clutter + overlap); search defaults to Area */
    .toolbar-spacer { display: none; }
    .pill-row { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
    .pill-row .pill, .save-search, .layout-toggle, .sort-select { flex: 0 0 auto; }
    body.search-lock { height: auto; overflow: auto; }
    .split { height: auto; min-height: calc(100vh - var(--nav-h) - var(--seo-h)); grid-template-columns: 1fr; }
    .results-panel { overflow: visible; overscroll-behavior: auto; }
    /* Split view: cap the map so listings are visible without scrolling past it. */
    .map-panel { min-height: 0; height: 40vh; border-right: 0; border-bottom: 1px solid var(--lx-line); }
    .split[data-layout="map"] .map-panel { min-height: calc(100vh - var(--nav-h) - 112px); height: auto; }
  }
  @media (max-width: 720px) {
    body.has-search-seo { --seo-h: 124px; }
    .search-seo-summary {
      align-items: flex-start;
      flex-direction: column;
      gap: 6px;
      padding: 12px 16px;
    }
    .search-seo-summary h1 { font-size: 21px; }
    .search-seo-summary h2 { font-size: 13px; }
    .search-seo-summary p {
      max-width: none;
      font-size: 12.5px;
      text-align: left;
    }
    .nav-actions .nav-link { display: none; }
    .phone { padding: 8px 12px; font-size: 12px; }
    /* Mobile: search on its own row; filters scroll; controls share a row. */
    .toolbar { flex-wrap: wrap; gap: 8px; padding: 8px 14px; }
    .searchbox { flex: 1 1 100%; min-width: 0; max-width: none; }
    .searchbox-inner { padding: 0 13px; }
    .searchbox input { flex: 1 1 auto; }
    .pill-row { flex: 1 1 100%; width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 3px; }
    .pill { min-height: 38px; padding: 0 12px; }
    .save-search { flex: 1 1 auto; }
    .layout-toggle { flex: 1 1 auto; justify-content: center; }
    .sort-select { flex: 1 1 140px; min-width: 0; }
    .card-wrap:active::before { opacity: 1; animation: lx-aurora-rotate 4.5s linear infinite; }  /* aurora frame circles on tap */
    /* Mobile: filters move into a sheet behind a floating button; toolbar = search (+ sort). */
    .pill-row, .save-search { display: none; }
    .sort-select { flex: 1 1 100%; }
    .map-fabs { display: flex; flex-direction: column; gap: 10px; position: absolute; top: 12px; right: 12px; z-index: 30; }
    /* List layout has no map: float Filters/Save fixed at bottom-right (reachable
       while scrolling, clear of the results header) and drop the map-only Layers FAB. */
    .split[data-layout="list"] .map-fabs { position: fixed; top: auto; bottom: 18px; right: 16px; }
    .split[data-layout="list"] #mobileLayersFab { display: none; }
    .map-fab { width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--lx-line); background: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 18px rgba(17, 17, 17, 0.18); display: grid; place-items: center; font-size: 18px; color: var(--lx-ink); cursor: pointer; padding: 0; }
    .map-fab.is-on { background: var(--lx-ink); color: var(--lx-white); }
    .layers-menu { position: absolute; top: 60px; right: 68px; z-index: 31; background: var(--lx-white); border: 1px solid var(--lx-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(17, 17, 17, 0.2); padding: 8px; min-width: 156px; flex-direction: column; gap: 2px; }
    .layers-menu.open { display: flex; }
    .layers-menu button { text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 650; color: var(--lx-ink); cursor: pointer; }
    .layers-menu button.is-on { background: var(--lx-ink); color: var(--lx-white); }
    .layers-traffic { display: flex; align-items: center; gap: 9px; padding: 9px 12px; font-size: 14px; border-top: 1px solid var(--lx-line-soft); margin-top: 4px; }
    .filter-sheet.open { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 130; background: var(--lx-white); overflow-y: auto; }
    .filter-sheet.open .sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--lx-line); position: sticky; top: 0; background: var(--lx-white); z-index: 2; }
    .filter-sheet.open .sheet-title { font-family: var(--lx-display); font-size: 21px; font-weight: 600; }
    .filter-sheet.open .sheet-x { border: 0; background: none; font-size: 28px; line-height: 1; color: var(--lx-muted); padding: 0 4px; cursor: pointer; }
    .filter-sheet.open .pop { position: static; display: block; width: auto; max-width: none; max-height: none; overflow: visible; border: 0; border-bottom: 1px solid var(--lx-line-soft); border-radius: 0; box-shadow: none; padding: 18px; }
    .filter-sheet.open .pop-actions { display: none; }
    .filter-sheet.open .sheet-foot { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--lx-line); position: sticky; bottom: 0; background: var(--lx-white); }
    .filter-sheet .btn-apply { flex: 1 1 auto; background: var(--lx-ink); color: var(--lx-white); border: 0; border-radius: 10px; padding: 14px; font-size: 15px; font-weight: 700; cursor: pointer; }
    .filter-sheet .btn-reset { flex: 0 0 auto; background: var(--lx-white); color: var(--lx-ink); border: 1px solid var(--lx-line); border-radius: 10px; padding: 14px 18px; font-size: 14px; font-weight: 700; cursor: pointer; }
    .results-panel { padding-left: 14px; padding-right: 14px; }
    /* Mobile: stack cards in a single full-width column that scrolls DOWN
       (was a horizontal scroll-snap strip). Map stays capped at the top. */
    .cards {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding-bottom: 6px;
    }
    .card-wrap,
    .empty,
    .loading,
    .pagination-note,
    .pagination,
    .disclaimer {
      flex: 0 0 auto;
      width: 100%;
    }
    .pagination { justify-content: center; }
    .results-head { display: grid; }
    .lead-fields { grid-template-columns: 1fr; }
  }
  @keyframes lx-aurora-rotate {
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .card-wrap::before,
    .searchbox::before { animation: none; }
  }

  /* Site identity + IDX disclosure footer — MLS-agnostic; data injected per client. */
  .site-id { border-top: 1px solid var(--lx-line); background: var(--lx-white); }
  .site-id-inner { max-width: var(--max, 1180px); margin: 0 auto; padding: 24px var(--gutter, 24px) 40px; display: flex; flex-direction: column; gap: 12px; }
  .site-id-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .site-id-logo { height: 34px; width: auto; object-fit: contain; }
  .site-id-logo.team { height: 34px; width: auto; }
  .site-id-name { font-size: 14px; line-height: 1.55; color: var(--lx-ink); }
  .site-id-name b { font-weight: 600; }
  .site-id-disclosure { font-size: 12px; line-height: 1.6; color: var(--lx-muted); max-width: 92ch; }
  .site-id-disclosure p { margin: 0 0 8px; }
  .site-id-disclosure p:last-child { margin-bottom: 0; }