/* LuxuryBoston.com Supercharged Demo — demo stylesheet. Light theme only, no build step. */

:root {
  /* Palette lifted from luxuryboston.com (deep navy ground, steel-blue accents, gold highlights) and the LRG mark. */
  --navy: #1c2836;
  --navy-deep: #061325;
  --blue: #1d4873;
  --blue-bright: #2c5b8c;
  --blue-soft: rgba(29, 72, 115, 0.1);
  --ink: #1c2836;
  --ink-2: #2a3747;
  --paper: #f4f5f7;
  --card: #ffffff;
  --gold: #b9985a;
  --gold-deep: #8a6f3a;
  --gold-soft: rgba(185, 152, 90, 0.16);
  --text: #1c2836;
  --muted: #5f6874;
  --faint: #6f7884;   /* 4.9:1 on --paper */
  --line: #e1e5e9;
  --line-strong: #cfd5db;
  --green: #3f7d3c;
  --amber: #b0742a;
  --slate: #5b6470;
  --red: #a63d2f;
  --font-ui: 'Montserrat', 'Proxima Nova', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Montserrat', 'Proxima Nova', system-ui, Helvetica, Arial, sans-serif;
  --font-brand: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow: 0 18px 40px -26px rgba(20, 19, 17, 0.5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 14px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.modal-open { overflow: hidden; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
img { display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, dl, dd, ul { margin: 0; }
mark { background: rgba(185, 152, 90, 0.3); color: inherit; border-radius: 2px; padding: 0 1px; }

.wrap { max-width: 1520px; margin: 0 auto; padding: 0 36px; }
@media (max-width: 1100px) { .wrap { padding: 0 24px; } }

/* ---------- header: white brand bar with the LRG mark ---------- */
.hdr { background: #fff; color: var(--text); border-bottom: 1px solid var(--line); }
.hdr__in {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 78px; padding-top: 12px; padding-bottom: 12px;
}
.hdr__brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.hdr__logo { display: block; height: 50px; width: auto; }
.hdr__logo--svg { height: 50px; width: 194px; }
.hdr__divider { width: 1px; height: 34px; background: var(--line-strong); flex: none; }
.hdr__title {
  font: 500 16px/1.2 var(--font-ui); letter-spacing: 0.01em; color: var(--navy);
  white-space: nowrap;
}
.hdr__tools { display: flex; align-items: center; gap: 22px; flex: none; }

.pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper);
  font-size: 12.5px; color: var(--text); white-space: nowrap; cursor: default;
}
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa3ad; flex: none; }
.pill--ok .pill__dot { background: var(--green); box-shadow: 0 0 0 3px rgba(63, 125, 60, 0.18); }
.pill--off .pill__dot { background: #9aa3ad; }
.pill--error .pill__dot { background: #e07a6a; box-shadow: 0 0 0 3px rgba(224, 122, 106, 0.2); }
.pill--checking .pill__dot { animation: blink 1.2s ease-in-out infinite; }

.switch { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.switch__btn {
  position: relative; width: 40px; height: 22px; padding: 0; border-radius: 999px; cursor: pointer;
  background: #d6dbe1; border: 1px solid #c4cbd3;
  transition: background 0.2s, border-color 0.2s;
}
.switch__btn[aria-checked="true"] { background: var(--blue); border-color: var(--blue); }
.switch__knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform 0.2s var(--ease);
}
.switch__btn[aria-checked="true"] .switch__knob { transform: translateX(18px); }
.switch__btn:disabled { cursor: not-allowed; opacity: 0.45; }
.switch--disabled .switch__label { opacity: 0.6; }

/* Short viewports (1152x720 = a 1440 laptop at 125 % zoom, 1024x768): a slimmer header band. */
@media (max-height: 820px) {
  .hdr__in { min-height: 62px; padding-top: 8px; padding-bottom: 8px; }
  .hdr__logo, .hdr__logo--svg { height: 40px; }
  .hdr__logo--svg { width: 155px; }
  .hero { padding-top: 16px; padding-bottom: 14px; }
  .hero__title { display: none; }
}
.switch__btn:focus-visible, .btn:focus-visible, .example:focus-visible, .hint:focus-visible, .facet:focus-visible,
.chip__x:focus-visible, .linkbtn:focus-visible, .card:focus-visible, .modal__close:focus-visible, .carousel__btn:focus-visible {
  outline: 2px solid var(--blue-bright); outline-offset: 2px;
}

/* ---------- hero band: the search lives on the site's navy ground ---------- */
.hero {
  background: linear-gradient(180deg, var(--navy) 0%, #12233a 60%, var(--navy-deep) 100%);
  color: #fff; padding: 26px 0 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.hero__eyebrow { font: 600 11.5px/1.2 var(--font-brand); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.hero__title { margin-top: 8px; font: 300 27px/1.15 var(--font-display); color: #fff; letter-spacing: -0.005em; }
.has-query .hero { padding-top: 14px; padding-bottom: 12px; }
.has-query .hero__eyebrow { display: none; }
.has-query .hero__title { display: none; }

/* ---------- search ---------- */
.search { padding-top: 16px; }
.search__box {
  position: relative; display: flex; align-items: center; background: #fff;
  border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search__box { border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.6); }
.search__box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(185, 152, 90, 0.3), 0 14px 34px -18px rgba(0, 0, 0, 0.6); }
.search__icon { flex: none; width: 22px; height: 22px; margin-left: 20px; color: var(--blue); }
.search__input {
  flex: 1; min-width: 0; height: 66px; padding: 0 60px 0 16px; border: 0; outline: none; background: transparent;
  font: 400 21px/1.2 var(--font-ui); color: var(--text); letter-spacing: -0.005em;
}
.search__input::placeholder { color: #98a1ab; }
.search__clear {
  position: absolute; right: 12px; top: 50%; width: 34px; height: 34px; margin-top: -17px;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.search__clear:hover { background: var(--paper); color: var(--blue); }

.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; opacity: 0; transition: opacity 0.25s; overflow: hidden; }
.progress span {
  position: absolute; top: 0; bottom: 0; left: 0; width: 38%; border-radius: 2px; background: var(--blue-bright);
  transform: translateX(-110%);
}
.search__box.is-busy .progress { opacity: 1; }
.search__box.is-busy .progress span { animation: progress 1.15s var(--ease) infinite; }

.hints {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-height: 30px; margin-top: 8px;
  font-size: 12.5px; color: rgba(255, 255, 255, 0.78);
}
.hints__label { color: rgba(255, 255, 255, 0.62); margin-right: 2px; }
/* The hints sit on the navy hero band, so the place name is white on a translucent pill — it used to inherit
   the dark ink colour from before the band existed, which left dark navy text on dark navy. */
.hint {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28); color: #fff;
  border-radius: 999px; background: rgba(255, 255, 255, 0.1); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  animation: fadeUp 0.2s var(--ease) both;
}
.hint:hover { border-color: var(--gold); background: rgba(255, 255, 255, 0.2); }
.hint__name { font-weight: 600; color: #fff; }
.hint__type { font-size: 11px; color: rgba(255, 255, 255, 0.74); }

.examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.example {
  display: inline-flex; align-items: center; padding: 6px 13px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px;
  background: rgba(255, 255, 255, 0.07); font-size: 13px; color: #e6ebf1; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s; white-space: nowrap;
}
.example:hover { border-color: var(--gold); background: rgba(255, 255, 255, 0.15); color: #fff; }

/* Once a query is active the page gives its vertical space to the results and the map:
   the example pills collapse into one horizontally scrollable row with faded edges,
   and the search / understood-as / status paddings tighten. */
.has-query .search { padding-top: 0; }
.has-query .search__input { height: 58px; font-size: 20px; }
.has-query .hints { min-height: 26px; margin-top: 6px; }
.has-query .examples {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin-top: 2px; padding: 2px 24px 4px; margin-left: -24px; margin-right: -24px;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.has-query .examples::-webkit-scrollbar { display: none; }
.has-query .example { flex: none; padding: 5px 12px; font-size: 12.5px; }
.has-query .understood { margin-top: 14px; padding-top: 0; min-height: 40px; }
.has-query .status { margin-top: 10px; }
.has-query .toolbar { margin-top: 12px; }
.has-query .main { margin-top: 10px; }
@media (max-height: 820px) {
  .has-query .search { padding-top: 14px; }
  .has-query .search__input { height: 54px; font-size: 19px; }
  .has-query .hints { min-height: 24px; margin-top: 4px; }
  .has-query .understood { margin-top: 10px; padding-top: 0; min-height: 36px; }
  .has-query .status { margin-top: 6px; }
  .has-query .count { font-size: 24px; }
  .has-query .toolbar { margin-top: 8px; min-height: 30px; }
  .has-query .main { margin-top: 8px; }
}

/* ---------- understood-as strip ---------- */
.understood {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-height: 46px;
  margin-top: 20px; padding-top: 0; border-top: 0;
}
.understood__label { font: 600 11px/1.2 var(--font-brand); letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); }
.understood__empty { font-size: 13px; color: var(--faint); font-style: italic; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  --kind: var(--gold);
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 11px; background: #fff;
  border: 1px solid var(--line); border-left: 3px solid var(--kind); border-radius: 7px;
  font-size: 13px; line-height: 1.2; color: var(--text); position: relative;
}
.chip--status { --kind: var(--green); }
.chip--transaction { --kind: var(--slate); }
.chip--type { --kind: var(--blue-bright); }
.chip--tag { --kind: var(--gold); }
.chip--location, .chip--near { --kind: var(--blue); }
.chip--price { --kind: var(--navy); }
.chip--beds, .chip--baths, .chip--sqft, .chip--year { --kind: #6b7280; }
.chip--listed_within { --kind: #4f7a5b; }
.chip--building { --kind: #8a5a7a; }
.chip--sort { --kind: var(--faint); }
.chip--residual { --kind: var(--muted); }
.chip--warning { --kind: var(--amber); background: #fbf4e8; border-color: #ead9bd; border-left-color: var(--amber); color: #7a5017; }
.chip__ai {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold-deep);
  border: 1px solid var(--gold); border-radius: 3px; padding: 1px 3px; line-height: 1.1;
}
.chip__label { font-weight: 500; }
.chip__detail { color: var(--faint); font-size: 12px; }
.chip__x {
  width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: var(--faint);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0; transition: background 0.15s, color 0.15s;
}
.chip__x:hover { background: var(--blue-soft); color: var(--red); }
.chip--enter { animation: fadeUp 0.22s var(--ease) both; }
.chip--pulse { animation: chipPulse 0.75s var(--ease) 1; }

/* ---------- status line ---------- */
.status {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-top: 16px;
  color: var(--muted); font-size: 13.5px;
}
.status__count { display: inline-flex; align-items: baseline; gap: 7px; color: var(--text); }
.count {
  font: 600 27px/1 var(--font-display); color: var(--blue);
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.status__sep { color: var(--line-strong); }
.reading {
  font-style: italic;
  background: linear-gradient(90deg, var(--faint) 0%, var(--faint) 38%, var(--gold) 50%, var(--faint) 62%, var(--faint) 100%);
  background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 1.7s linear infinite;
}
.linkbtn {
  margin-left: auto; padding: 0; border: 0; background: none; color: var(--blue);
  font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.linkbtn:hover { color: var(--navy-deep); text-decoration: underline; text-underline-offset: 3px; }
.chev {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.2s var(--ease);
}
.linkbtn[aria-expanded="true"] .chev { transform: rotate(-135deg) translateY(1px); }

.notice {
  margin-top: 12px; padding: 10px 14px; border: 1px solid #ead9bd; border-radius: 8px;
  background: #fbf4e8; color: #7a5017; font-size: 13px; animation: fadeUp 0.2s var(--ease) both;
}
.notice--error { border-color: #e6c9c3; background: #fbeeeb; color: #7a2f25; }

/* ---------- drawer ---------- */
.drawer {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px 28px; margin-top: 14px; padding: 20px 22px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; animation: fadeUp 0.22s var(--ease) both;
}
.drawer__section h4 {
  margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}
.drawer__section + .drawer__section { margin-top: 0; }
.drawer__col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.drawer__wide { grid-column: 1 / -1; }
.drawer pre {
  margin: 0; padding: 12px 14px; background: var(--paper); border-radius: 8px; overflow: auto; max-height: 380px;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #3b372f; white-space: pre;
}
.j-key { color: #8a6a3a; }
.j-str { color: #2f6b4f; }
.j-num { color: #8a4b2a; }
.j-bool { color: #4a5d8a; }
.j-null { color: var(--faint); }
.j-p { color: #a39c8f; }
.drawer ul { padding-left: 18px; font-size: 13px; color: #7a5017; }
.drawer__kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; }
.drawer__kv dt { color: var(--faint); }
.drawer__kv dd { color: var(--text); word-break: break-word; }
.drawer__none { font-size: 13px; color: var(--faint); font-style: italic; }
@media (max-width: 1000px) { .drawer { grid-template-columns: 1fr; } }

/* ---------- toolbar + facets ---------- */
/* The facet row never wraps and never pushes the Map control: one scrollable line with faded edges,
   the button pinned to the right with its text on one line. */
.toolbar { display: flex; align-items: center; gap: 16px; margin-top: 18px; min-height: 34px; }
.toolbar .btn { flex: none; white-space: nowrap; }
.facets {
  display: flex; align-items: center; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 6px 8px; font-size: 12.5px;
  overflow-x: auto; overflow-y: hidden; padding: 3px 16px; margin: -3px -16px; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%);
}
.facets::-webkit-scrollbar { display: none; }
.facets__label { color: var(--faint); margin-right: 4px; flex: none; }
.facets__sep { width: 1px; height: 16px; background: var(--line-strong); margin: 0 8px; flex: none; }
.facet {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; cursor: pointer; color: var(--text); transition: border-color 0.15s, background 0.15s;
  animation: fadeUp 0.2s var(--ease) both; flex: none; white-space: nowrap;
}
.facet:hover { border-color: var(--blue); background: var(--blue-soft); }
.facet__count { color: var(--faint); font-size: 11.5px; }

.btn {
  padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line-strong); background: #fff; color: var(--text);
  font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--blue); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn--ghost { margin-left: auto; background: transparent; border-color: transparent; color: var(--muted); }
.btn--ghost:hover { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.btn--outline { border-color: var(--blue); color: var(--blue); padding: 10px 22px; }
.btn--outline:hover { background: var(--blue); color: #fff; }

/* ---------- main: grid + map ---------- */
.main { display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: 28px; align-items: start; margin-top: 14px; }
.main--no-map { grid-template-columns: minmax(0, 1fr); }
.results { min-width: 0; }
.grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.main--no-map .grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); font: italic 300 17px/1.5 var(--font-display); }
.more { display: flex; justify-content: center; margin-top: 28px; }

/* The panel's height is set by demo.js to the viewport remainder below its top edge (min 420 px),
   so pins and the radius circle sit inside the visible area without scrolling. The CSS value is the fallback. */
.map-panel { position: sticky; top: 16px; height: calc(100vh - 32px); min-height: 420px; }
.map { height: 100%; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #e6eaef; }
@media (max-width: 899px) {
  .main { grid-template-columns: 1fr; }
  .map-panel { position: static; height: 340px !important; min-height: 0; order: -1; }
}

/* Leaflet price markers. A collision pass in demo.js keeps a price label only where it does not overlap
   another (highest price first); the rest become gold dots that reveal their label on hover / card hover. */
.pm-wrap { background: transparent; border: 0; }
.pm {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  padding: 3px 9px; border-radius: 999px; background: #fff; color: var(--navy); border: 1px solid var(--line-strong);
  font: 600 12px/1.2 var(--font-ui); white-space: nowrap; cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 19, 17, 0.18); transition: background 0.15s, color 0.15s, transform 0.15s, border-color 0.15s;
}
.pm--pending { color: var(--amber); }
.pm--sold { color: var(--slate); }
.pm.is-active, .pm:hover { background: var(--blue); color: #fff; border-color: var(--blue); transform: translate(-50%, -50%) scale(1.07); }
.pm--dot:not(:hover):not(.is-active) {
  width: 10px; height: 10px; padding: 0; font-size: 0; line-height: 0;
  background: var(--gold); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(138, 111, 58, 0.55), 0 1px 4px rgba(6, 19, 37, 0.3);
}
.leaflet-container { font-family: var(--font-ui); }
.leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, 0.75); }

/* ---------- cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s;
}
.card:hover, .card.is-hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card.is-flash { animation: flash 1.3s var(--ease) 1; }
.card--enter { animation: cardIn 0.32s var(--ease) both; }
.card__media { position: relative; aspect-ratio: 4 / 3; background: #e9e3d6; overflow: hidden; }
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.card:hover .card__img { transform: scale(1.025); }
.card__placeholder {
  /* Street-name label top-right: clear of the status badge (top-left) and the price tag (bottom-left). */
  position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-end; padding: 44px 18px 18px; text-align: right;
  background: linear-gradient(135deg, #2b2823 0%, #4a4234 55%, #8a7350 100%);
  color: #f3ecdc; font: italic 300 18px/1.2 var(--font-display);
}
.badge {
  position: absolute; top: 12px; left: 12px; padding: 4px 9px; border-radius: 4px; color: #fff;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
}
.badge--active { background: var(--green); }
.badge--pending { background: var(--amber); }
.badge--sold { background: var(--slate); }
.card__price {
  position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.95); color: var(--navy); font: 600 15.5px/1.2 var(--font-display); letter-spacing: -0.01em;
}
.card__body { padding: 14px 16px 16px; }
.card__address { font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.card__city { margin-top: 2px; font-size: 13px; color: var(--muted); }
.card__stats { margin-top: 8px; font-size: 13px; color: var(--text); }
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 22px; }
.tag {
  padding: 3px 8px; border-radius: 999px; background: var(--gold-soft); color: #6e5730;
  font-size: 11.5px; font-weight: 500; line-height: 1.3;
}
.card__snippet {
  margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(20, 19, 17, 0.58); backdrop-filter: blur(3px); animation: fadeIn 0.2s both; }
.modal__dialog {
  position: relative; width: min(1040px, 100%); height: min(88vh, 760px); background: #fff; border-radius: 14px; overflow: hidden;
  display: grid; grid-template-columns: 58fr 42fr; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6); animation: modalIn 0.28s var(--ease) both;
}
.modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
}
.modal__close:hover { background: #fff; }
.modal__media { position: relative; background: #e9e3d6; min-height: 0; }
.modal__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.modal__media .card__placeholder { font-size: 26px; padding: 64px 70px 18px 18px; }
.modal__media .badge { top: 16px; left: 16px; }
.carousel__btn {
  position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0 0 3px; transition: background 0.15s;
}
.carousel__btn:hover { background: #fff; }
.carousel__btn--prev { left: 14px; }
.carousel__btn--next { right: 14px; }
.carousel__count {
  position: absolute; right: 16px; bottom: 14px; padding: 3px 9px; border-radius: 999px;
  background: rgba(20, 19, 17, 0.7); color: #fff; font-size: 11.5px; font-weight: 500;
}
.modal__info { padding: 30px 30px 26px; overflow: auto; min-width: 0; }
.modal__price { font: 600 28px/1.1 var(--font-display); color: var(--navy); }
.modal__address { margin-top: 8px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.modal__city { margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.modal__stats { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.modal__stats div { min-width: 60px; }
.modal__stats dt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.modal__stats dd { margin-top: 2px; font-size: 15px; font-weight: 500; color: var(--ink); }
.modal__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.modal__remarks { margin-top: 18px; font-size: 14.5px; line-height: 1.65; color: #3b372f; }
.modal__meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin-top: 20px; font-size: 13px; }
.modal__meta dt { color: var(--faint); }
.modal__meta dd { color: var(--text); }
.modal__actions { margin-top: 14px; }
.btn--small { padding: 6px 14px; font-size: 12.5px; }
@media (max-width: 899px) {
  .modal__dialog { grid-template-columns: 1fr; grid-template-rows: 44% 1fr; height: min(92vh, 900px); }
}

/* ---------- footer ---------- */
.foot { margin-top: 56px; padding: 26px 0 30px; background: var(--navy); text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.foot__brand { font: 600 11.5px/1.4 var(--font-brand); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.foot__note { margin-top: 8px; }

/* ---------- motion ---------- */
@keyframes progress { 0% { transform: translateX(-110%); } 60% { transform: translateX(290%); } 100% { transform: translateX(290%); } }
@keyframes shimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } }
@keyframes blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes chipPulse { 0% { box-shadow: 0 0 0 0 rgba(176, 141, 87, 0.6); } 100% { box-shadow: 0 0 0 12px rgba(176, 141, 87, 0); } }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(176, 141, 87, 0.7); border-color: var(--gold); } 100% { box-shadow: 0 0 0 14px rgba(176, 141, 87, 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .search__box.is-busy .progress span { transform: none; width: 100%; opacity: 0.6; }
}


/* ---------- seaglass wordmark (text; replace with the client mark when supplied) ---------- */
.hdr__wordmark { display: inline-flex; align-items: baseline; gap: .35rem; text-decoration: none; }
.hdr__wordmark-main { font-family: Georgia, 'Times New Roman', serif; font-size: 1.55rem; letter-spacing: .02em; color: #0b3d5c; font-weight: 700; }
.hdr__wordmark-sub { font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: #3a8fb7; font-weight: 600; }


/* ---------- SeaGlass header: logo + top navigation as on seaglass.com ---------- */
.hdr { background: #fff; border-bottom: 1px solid rgba(0, 60, 105, .12); }
.hdr__in { min-height: 70px; padding-top: 10px; padding-bottom: 10px; gap: 32px; }
.hdr__logo-link { display: block; flex: none; line-height: 0; }
.hdr__logo { display: block; width: 220px; height: 24px; }
.sgnav { display: flex; align-items: center; gap: 34px; flex: 1 1 auto; justify-content: center; min-width: 0; }
.sgnav__link {
  font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;
  color: #003c69; text-decoration: none; white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent;
}
.sgnav__link:hover { border-bottom-color: rgba(0, 60, 105, .35); }
.sgnav__link--current { border-bottom-color: #003c69; }
@media (max-width: 1100px) { .sgnav { gap: 22px; } .sgnav__link { font-size: 11px; letter-spacing: 1px; } }
@media (max-width: 860px) { .sgnav { display: none; } }