/* =========================================================
   HOUSEATOR — Modern Real Estate Software
   ========================================================= */

:root {
  /* Under Budgie palette — royal blue + leafy green from the logo,
     on a clean light-grey/white surface stack with subtle black accents. */
  --bg: #f3f4f6;            /* light grey page bg */
  --surface: #ffffff;       /* white cards */
  --surface-2: #eef0f3;     /* slightly deeper grey */
  --ink: #0a0f1a;           /* near-black ink */
  --ink-soft: #3f4757;
  --muted: #6b7280;
  --line: #e4e7ec;
  --line-strong: #cdd2da;

  --primary: #1e4fb7;       /* logo royal blue */
  --primary-700: #163a8c;   /* deeper blue */
  --primary-50: #e8eefa;    /* tinted blue background */

  --accent: #28a745;        /* logo leafy green */
  --accent-700: #1e8b36;
  --accent-50: #e7f6ec;

  --warn: #f59e0b;
  --danger: #ef4444;

  --black: #0a0f1a;         /* small black accent */
  --grey-50: #f7f8fa;
  --grey-100: #eef0f3;
  --grey-200: #e4e7ec;

  --radius: 14px;
  --radius-lg: 22px;
  --radius-sm: 8px;
  /* Vertical room below the 64px nav that the header's bottom arc sweeps
     into. The hero section pulls itself up by exactly this much (negative
     margin) so the arc reveals the hero's OWN background — no intermediate
     page-bg sliver, no straight seam. Mobile overrides this to a smaller
     value so the curve is less severe. */
  --header-arc-zone: clamp(20px, 3vh, 34px);
  --shadow-sm: 0 1px 2px rgba(10,15,26,.06), 0 1px 3px rgba(10,15,26,.05);
  --shadow: 0 6px 22px rgba(10,15,26,.08);
  --shadow-lg: 0 22px 50px rgba(10,15,26,.14);
  --container: 1240px;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  /* Great Vibes — top-rated free elegant script font from Google Fonts.
     Used for major page headlines (welcome, hero, section titles). */
  --script: 'Great Vibes', 'Allura', 'Brush Script MT', cursive;
  /* JetBrains Mono — distinct numeric face. Used for every numeric display:
     prices, KPIs, dates, percentages, mortgage values, calendar cells, etc. */
  --num: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Metric-matched fallback for Inter — Arial scaled via size-adjust + metric
   overrides so the text shown before Inter finishes loading occupies the
   exact same box. This removes the layout shift (CLS) a plain font-swap
   causes across all body copy, while Inter still loads and displays
   normally afterward. Values are the standard capsize/next-font Inter→Arial
   set. Referenced second in --sans, right after 'Inter'. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0.00%;
  size-adjust: 107.40%;
}

[data-theme="dark"] {
  --bg: #0a132a;
  --surface: #112045;
  --surface-2: #16285a;
  --ink: #f1f5fb;
  --ink-soft: #c7d0e0;
  --muted: #93a1bb;
  --line: #1f3168;
  --line-strong: #2a3f7e;
  --primary-50: #182a5e;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 28px 60px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
/* The full-bleed featured-listing panel is 100vw, which is a hair wider
   than the content area when a vertical scrollbar is present — that
   sliver would trigger a horizontal scrollbar. Clip it on <main> (the
   sticky <header> is a sibling outside <main>, so this can't affect
   sticky positioning). overflow-x:clip avoids creating a scroll
   container; overflow-x:hidden is the fallback for older engines. */
main {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ===================== NUMERIC TYPOGRAPHY (JetBrains Mono) =====================
   Every prominent number on the site renders in --num so dollar amounts,
   KPI counts, percentages, dates, and ratios all share one distinct face.
   Selectors here target ONLY pure numeric content (or numeric-prefix elements
   like badges and date chips) — labels stay on Inter for readability. */
.price-tag,
.price,
.listing-heading .price,
.modal-info .price,
.hero-stats strong,
.kpi-card strong,
.kpi-trend,
.payment-result strong,
.payment-breakdown b,
.rate-card strong,
.rate-trend,
.map-pin span,
.listing-meta b,
.property-content .specs b,
.modal-info .specs-grid b,
.bench-you strong,
.bench-us strong,
.bench-pct,
.bench-arrow,
.todo-date-chip,
.todo-count,
.cmini-cell,
.cal-cell-num,
.cal-mini-head strong,
.count-badge,
.input-row input[type="number"],
.input-row input[type="range"],
.ed-field input[type="number"],
input[type="date"],
input[type="time"],
input[type="tel"],
.property-table td:nth-child(3),
.property-table td:nth-child(4),
.property-table td:nth-child(5),
.property-table td:nth-child(7),
.property-table td:nth-child(8) {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
}

/* The mortgage payment hero number deserves a heavier weight in mono. */
.payment-result strong { font-weight: 700; letter-spacing: -.02em; }
.kpi-card strong       { font-weight: 600; }
.bench-you strong,
.bench-us  strong      { font-weight: 600; letter-spacing: -.01em; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===================== BUTTONS / CHIPS ===================== */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: 44px; padding: 0 20px; border-radius: 8px;
  font-weight: 600; font-size: 14px; border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.button-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(30,79,183,.32); }
.button-primary:hover { background: var(--primary-700); transform: translateY(-1px); }
.button-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.button-secondary:hover { background: var(--surface-2); }
.button-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); height: 38px; padding: 0 14px; font-size: 13px; }
.button-ghost:hover { background: var(--surface-2); }

.cta-button {
  background: var(--primary); color: #fff; padding: 9px 17px; border-radius: 8px;
  font-weight: 600; font-size: 12.5px; transition: background .2s;
}
.cta-button:hover { background: var(--primary-700); }

.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); display: inline-flex;
  align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--surface-2); }

.chip {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
  padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.active { background: var(--black); color: #fff; border-color: var(--black); }

.eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: 12px;
  font-weight: 700; color: var(--primary); margin: 0 0 12px;
}
.muted { color: var(--muted); }
.muted.small { font-size: 13px; }

/* ===================== HEADER ===================== */
.site-header {
  position: sticky; top: 0; z-index: 80;
  /* The white surface + blur + the matching arc live on ::before so the
     header's overflowing brand logo and nav are NOT clipped by the mask
     (the logo intentionally peeks below the bar). The padding-bottom adds
     a dedicated zone below the 64px nav for the arc to sweep into so the
     curve is actually visible (a 6%-of-64px arc was ~4px = invisible). */
  background: transparent;
  border-bottom: 0;
  padding-bottom: var(--header-arc-zone);
}
.dash-body .site-header { padding-bottom: 0; }   /* dashboard unchanged */
/* Bottom edge of the white header carries the SAME arc as the featured
   carousel: top/sides straight, bottom uses the identical cubic (control
   ratios 25/75, depth 6) so the curve's angles match the carousel edge —
   the white sweeps down at the corners and up in the middle, echoing the
   motif. preserveAspectRatio='none' stretches it to the header box. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  --header-arc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V73 C75 100 25 100 0 73 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask: var(--header-arc) center / 100% 100% no-repeat;
          mask: var(--header-arc) center / 100% 100% no-repeat;
}
/* Overlay menu open, or on the dashboard, the arced surface is dropped
   (the dashboard sets its own header surface; the mobile overlay needs a
   clean transparent header). */
.site-header.mobile-open::before,
.dash-body .site-header::before { display: none; }
.nav-bar { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 20px; }
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 19px; letter-spacing: -.01em;
  color: var(--ink);
}
.brand-logo {
  height: 84px; width: auto; display: block;
  object-fit: contain;
  background: transparent;
  /* The logo is taller than the 64px nav-bar. translateY shifts the logo
     down just enough that its top stays inside the header while the
     overflow extends a little below — lifted a few px so it no longer
     hugs the header's bottom border. */
  transform: translateY(2px);
  position: relative;
  z-index: 2;
}
.nav-links { display: flex; gap: 28px; }

/* Mobile hamburger — hidden on desktop, centered on the nav-bar on mobile.
   Dark-grey filled button with white bars so it reads as a clear control
   against the light header. Defensively reset every UA default that can
   collapse the height (mobile Safari/Chrome have specific button quirks). */
.nav-hamburger {
  display: none;          /* shown via media query below */
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  min-width: 42px;        /* guarantee the tap target regardless of flex layout */
  min-height: 42px;
  flex: 0 0 42px;         /* never let flex parents shrink this */
  padding: 10px;
  margin: 0;
  background: #2d3748;
  color: #ffffff;
  border: 1px solid #2d3748;
  border-radius: 8px;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
  z-index: 5;
  font: inherit;
  line-height: 1;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .2s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .2s ease;
}
.nav-hamburger:hover {
  background: #1a202c;    /* darker still on hover */
  transform: scale(1.06);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .25);
}
.nav-hamburger:hover .nav-hamburger-bar {
  animation: navBurgerBarWiggle .55s ease-in-out;
}
.nav-hamburger:hover .nav-hamburger-bar:nth-child(2) { animation-delay: .07s; }
.nav-hamburger:hover .nav-hamburger-bar:nth-child(3) { animation-delay: .14s; }
.nav-hamburger:active { transform: scale(.96); }

@keyframes navBurgerBarWiggle {
  0%, 100% { transform: translateX(0)   scaleX(1); }
  30%      { transform: translateX(-2px) scaleX(.85); }
  60%      { transform: translateX(2px)  scaleX(1.05); }
  85%      { transform: translateX(-1px) scaleX(.95); }
}

.nav-hamburger-bar {
  display: block;
  width: 100%; height: 2.5px;
  background: #ffffff;    /* white bars on dark button */
  border-radius: 2px;
  transform-origin: center;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1),
              opacity .2s ease;
}
.site-header.mobile-open .nav-hamburger-bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.site-header.mobile-open .nav-hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(.3);
}
.site-header.mobile-open .nav-hamburger-bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}
/* When the menu is open, the hover wiggle would compete with the X morph.
   Disable wiggle in the open state so the X stays clean. */
.site-header.mobile-open .nav-hamburger:hover .nav-hamburger-bar {
  animation: none;
}
/* While the overlay menu is open, drop the header's white surface so the
   blue/green gradient reads cleanly behind the hamburger and brand mark. */
.site-header.mobile-open {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* ===================== MOBILE OVERLAY MENU =====================
   Full-viewport dropdown ported from IWS-Claude index-active-c2:
   - ::before gradient masked by (touch-tracked soft hole) XOR (logo cutout)
   - ::after frosted-glass disc that follows the touch/cursor
   - Stagger-in link animation, decorative numeric prefix
   Royal-blue → leafy-green palette; logo silhouette punches through the
   middle of the overlay as a decorative tear, sized to land in the
   natural gap between the link list and the side info block. Mobile-only. */
.mobile-menu {
  position: fixed;
  inset: 0;
  /* Touch/cursor position drives the soft hole + frosted disc.
     --hole-r / --hole-feather size the frosted spotlight (::after).
     --reveal-r / --reveal-feather size the gradient cut-out (::before)
       that lets the background image show through. JS grows the reveal
       vars huge when the cursor enters the center of the menu so the
       full image is revealed; outside the center they stay small for a
       flashlight-style peek. */
  --mx: -9999px;
  --my: -9999px;
  --hole-r: 110px;
  --hole-feather: 240px;
  --reveal-r: 110px;
  --reveal-feather: 240px;
  color: #fff;
  z-index: 70;            /* below .site-header (80) so hamburger stays on top */
  /* Real-estate photograph (route-67.jpg) sits as the deepest background
     layer; the ::before gradient covers it until the cursor reveals it.
     A blue→green overlay multiplies onto the image so its palette
     resolves into the menu's royal-blue / leafy-green colorway instead
     of clashing with the white estate exterior. */
  /* JS randomizes --reveal-img per page load from an optimized pool;
     falls back to the bundled route-67.jpg if JS hasn't set it. */
  background-image:
    linear-gradient(160deg,
      color-mix(in oklab, var(--primary-700) 70%, transparent) 0%,
      color-mix(in oklab, var(--primary) 55%, transparent) 50%,
      color-mix(in oklab, var(--accent-700) 60%, transparent) 100%),
    var(--reveal-img, url("images/route-67.jpg"));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: multiply, normal;
  background-color: var(--primary-700);
  transform: translateY(-100%);
  transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear .7s;
  visibility: hidden;
  overflow: hidden;       /* gradient layer stays viewport-locked */
}
.mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear;
}

/* Scrollable content sits above the painted layers. Pinned to the viewport
   height of the parent so it scrolls independently — the ::before gradient
   and logo cutout stay locked to the viewport instead of drifting offscreen
   with the content. */
.mobile-menu-scroll {
  position: relative;
  z-index: 2;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* Layer 1 (::before) — gradient with a cursor-tracked transparent hole.
   The radial mask is opaque everywhere except a circle at (--mx,--my)
   that grows huge near the menu's center, exposing the photograph
   behind. */
.mobile-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(420px circle at var(--mx) var(--my),
      color-mix(in oklab, var(--accent) 40%, transparent) 0%, transparent 70%),
    radial-gradient(circle at 110% 110%,
      color-mix(in oklab, var(--accent) 55%, transparent) 0%, transparent 55%),
    linear-gradient(135deg,
      var(--primary-700) 0%,
      var(--primary) 45%,
      color-mix(in oklab, var(--primary) 50%, var(--accent)) 75%,
      var(--accent-700) 100%);
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my),
    transparent 0, transparent var(--reveal-r), #000 var(--reveal-feather));
          mask-image: radial-gradient(circle at var(--mx) var(--my),
    transparent 0, transparent var(--reveal-r), #000 var(--reveal-feather));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Layer 2 (::after) — frosted-glass disc that fades in over the cursor/touch
   hole. Tinted with a soft green wash so the spotlight reads as a warm
   accent rather than a hard see-through punch. */
.mobile-menu::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at var(--mx) var(--my),
      rgba(255, 255, 255, 0.06) 0,
      color-mix(in oklab, var(--accent) 18%, transparent) calc(var(--hole-r) * 0.6),
      color-mix(in oklab, var(--accent) 26%, transparent) var(--hole-r),
      transparent var(--hole-feather));
  -webkit-backdrop-filter: blur(5px) saturate(1.15);
          backdrop-filter: blur(5px) saturate(1.15);
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my),
    #000 0, #000 var(--hole-r), transparent var(--hole-feather));
          mask-image: radial-gradient(circle at var(--mx) var(--my),
    #000 0, #000 var(--hole-r), transparent var(--hole-feather));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity: 0;
  transition: opacity .4s ease;
}
.mobile-menu.is-open::after { opacity: 1; }

.mobile-menu-main {
  /* 80px top clears the 64px sticky header. */
  padding: 80px 28px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-menu-main a {
  font-family: var(--sans);
  font-size: clamp(1.15rem, 5.2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.78);
  padding: 5px 0;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition: color .25s ease;
}
.mobile-menu.is-open .mobile-menu-main a {
  animation: ubMenuLinkIn .7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mobile-menu.is-open .mobile-menu-main a:nth-child(1) { animation-delay: .20s; }
.mobile-menu.is-open .mobile-menu-main a:nth-child(2) { animation-delay: .26s; }
.mobile-menu.is-open .mobile-menu-main a:nth-child(3) { animation-delay: .32s; }
.mobile-menu.is-open .mobile-menu-main a:nth-child(4) { animation-delay: .38s; }
.mobile-menu.is-open .mobile-menu-main a:nth-child(5) { animation-delay: .44s; }
.mobile-menu.is-open .mobile-menu-main a:nth-child(6) { animation-delay: .50s; }
.mobile-menu.is-open .mobile-menu-main a:nth-child(7) { animation-delay: .56s; }
@keyframes ubMenuLinkIn {
  to { opacity: 1; transform: translateY(0); }
}
.mobile-menu-main a span {
  display: inline-block;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1), color .25s ease;
}
.mobile-menu-main a:hover span,
.mobile-menu-main a:active span {
  transform: translateX(1.25rem);
}

/* Hint nudging the user to move/scroll a finger into the menu so the
   pointer-tracked cut-out reveals the property photo behind the overlay.
   Light grey so it reads as a soft aside, not a menu item. Arrows point
   up (toward the links) and across (the swipe direction). */
.mobile-menu-reveal-hint {
  margin: 68px 28px 0;   /* 18px base + 50px nudge down */
  padding: 0;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: #9e9e9e;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-menu-reveal-hint .rh-arrows {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  color: #9e9e9e;
}
.mobile-menu-reveal-hint .rh-up,
.mobile-menu-reveal-hint .rh-across {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.mobile-menu-reveal-hint .rh-up {
  font-size: 1rem;
  animation: rhBobUp 1.6s ease-in-out infinite;
}
.mobile-menu-reveal-hint .rh-across {
  /* ↔ renders shorter/lighter than ↑ at the same em — bump it up so the
     two arrows read as the same visual size. */
  font-size: 1.35rem;
  animation: rhBobAcross 1.6s ease-in-out infinite;
}
@keyframes rhBobUp {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes rhBobAcross {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-reveal-hint .rh-up,
  .mobile-menu-reveal-hint .rh-across { animation: none; }
}

.mobile-menu-side {
  margin-top: auto;
  padding: 1.5rem 28px 2rem;
  background: rgba(10, 15, 26, 0.18);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.mobile-menu-side h4 {
  font-family: var(--sans);
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  margin: 0 0 .4rem;
}
.mobile-menu-side p {
  color: #fff;
  line-height: 1.55;
  font-size: .9rem;
  margin: 0;
}
.mobile-menu-side .contact a {
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
}

/* While the overlay is open, flip the multi-colored Under Budgie logo in the
   header to pure white so it reads against the blue/green gradient. */
.site-header.mobile-open .brand-logo {
  filter: brightness(0) invert(1);
  transition: filter .35s ease;
}
/* While the overlay is open, lift the brand mark out of the nav-bar's
   flex flow and pin it dead-center above the menu. The hamburger keeps
   its space-between slot on the right; the brand sits visually centered
   over the gradient. .nav-bar is already position: relative on mobile
   (see the max-width: 820px block), so absolute positioning anchors
   correctly. */
.site-header.mobile-open .brand {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;   /* let taps fall through to the hamburger area */
}

/* Mobile-only — never render on desktop. */
@media (min-width: 821px) {
  .mobile-menu { display: none; }
}

/* ===================== MAP-SECTION FILTER CHIPS =====================
   Mirrors the listings-grid category filter so users can narrow the map
   markers without scrolling back up to the listings section. */
.map-chip-group {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

/* Mobile-only inline mirror of the colored overlay filters. The floating
   .map-overlay panel is hidden on mobile, so these chips give touch users
   the same selection options. Hidden on desktop — the floating panel
   serves there. */
/* Specificity must beat `.chip-group { display:flex }` (same single-class
   weight, defined later in source) — otherwise these inline mobile chips
   leak onto the desktop canvas. The mobile show-rule below matches this
   compound selector so it can still override within the media query. */
.chip-group.map-legend-chips { display: none; }

/* ===================== BACK-TO-TOP BUTTON =====================
   Fixed bottom-right pill with a house icon and "Top" label. Hidden until
   the user scrolls past ~300px, then fades + slides into view. Available
   on every page (public site, login, dashboard). */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px;
  background: var(--primary);
  color: #fff;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(30, 79, 183, .35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(.92);
  transition: opacity .3s ease,
              transform .35s cubic-bezier(.34, 1.56, .64, 1),
              background .15s ease,
              box-shadow .2s ease;
  z-index: 1200;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.back-to-top:hover {
  background: var(--primary-700, #163b8b);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 32px rgba(30, 79, 183, .45);
}
.back-to-top:active { transform: translateY(0) scale(.97); }
.back-to-top svg {
  display: block;
  width: 22px; height: 22px;
}
.back-to-top span {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}

@media (max-width: 820px) {
  /* Softer header arc on mobile — smaller sweep zone and a shallower
     curve (corners ride higher at y=86 vs 73, gentler shoulders) so the
     edge reads as a subtle wave rather than a deep scoop on narrow
     screens. The hero's negative margin tracks --header-arc-zone, so
     shrinking the zone keeps the seamless join intact. */
  :root { --header-arc-zone: clamp(10px, 2vh, 16px); }
  .site-header::before {
    --header-arc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V86 C70 100 30 100 0 86 Z' fill='%23fff'/%3E%3C/svg%3E");
  }
  /* Section top arc — same shallower curve as the mobile header so the
     motif stays gentle on narrow screens; shorter band too. */
  .arc-top::before {
    height: clamp(22px, 4vh, 34px);
    --arc-top-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V86 C70 100 30 100 0 86 Z' fill='%23fff'/%3E%3C/svg%3E");
    /* No outer glow on mobile — drop the shadow that traces the curve. */
    filter: none;
  }
  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }
  .back-to-top svg { width: 18px; height: 18px; }
  .back-to-top span { font-size: 9px; }
}
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
  position: relative; padding: 6px 0;
}
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 10px; }

/* ===================== HERO ===================== */
.hero-section {
  /* Slide up under the header's arc zone so the arc reveals THIS section's
     background directly (seamless curve, no straight page-bg seam). The
     top padding absorbs the negative margin so content sits where it did,
     plus a little extra so nothing tucks under the curving white. */
  margin-top: calc(-1 * var(--header-arc-zone));
  padding: calc(64px + var(--header-arc-zone)) 0 84px;
  background:
    radial-gradient(60% 60% at 12% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%),
    radial-gradient(40% 40% at 90% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--bg);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero-copy h1 {
  font-family: var(--script);
  font-weight: 400; font-size: clamp(54px, 6.4vw, 88px);
  /* Tighter than the previous 1.2 — the .accent padding + h1 padding-bottom
     still preserve descender room, so we can pull the two lines closer. */
  line-height: 1.08;
  margin: 0 0 18px;
  letter-spacing: 0;
  padding-bottom: .08em;
  overflow: visible;
}
.hero-copy h1 .accent {
  background: linear-gradient(120deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* Script font glyphs lean past their inline-block bounding box on every
     side (italic "f" leans left, terminal "e" swoops right, ascenders
     rise, descenders drop). Padding gives the gradient paint area enough
     room to contain those overflowing strokes; negative margin pulls the
     box back so surrounding word spacing stays correct. */
  padding: .12em .25em .18em;
  margin: 0 -.25em;
  display: inline-block;
  line-height: inherit;
  /* When the line wraps, repeat the padding on each fragment so neither
     side is clipped on either line. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero-text { font-size: 17px; color: var(--ink-soft); max-width: 540px; margin: 0 0 28px; }

.hero-search {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 8px 8px 8px; box-shadow: var(--shadow-sm);
  margin-bottom: 28px; max-width: 660px;
}
.search-field { padding: 6px 18px; border-right: 1px solid var(--line); }
.search-field:last-of-type { border-right: 0; }
.search-field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 2px; }
.search-field input, .search-field select {
  border: 0; background: transparent; padding: 0; font-size: 14px; color: var(--ink); width: 100%; outline: none;
}
.hero-search .button { height: 44px; }

/* Hero quick-filter chips — surfaces the four map-legend categories
   above the fold so they're visible without scrolling. */
.hero-filters {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
  margin: 0 0 24px;
}
.hero-filters-label {
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
  margin-right: 4px;
}
.hero-filter-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.hero-filter-btn:hover {
  border-color: var(--primary);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.hero-filter-btn .legend-ico {
  width: 24px; height: 24px;
}
.hero-filter-btn .legend-ico svg {
  width: 13px; height: 13px;
}
.hero-filter-btn[data-jump-filter="walkability"] .legend-ico { background: var(--accent); }
.hero-filter-btn[data-jump-filter="schools"]     .legend-ico { background: var(--primary); }
.hero-filter-btn[data-jump-filter="commute"]     .legend-ico { background: var(--warn); }
.hero-filter-btn[data-jump-filter="crime"]       .legend-ico { background: #5a2e91; }
.hero-filter-btn[data-jump-filter="parks"]       .legend-ico { background: #8b5a2b; }

.hero-stats { display: flex; gap: 32px; }
.hero-stats > div { display: flex; flex-direction: column; }
.hero-stats strong { font-size: 22px; font-family: var(--serif); }
.hero-stats span { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

/* HERO PANEL — featured listing */
.hero-panel { position: relative; }
.hero-listing-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}

/* The intro copy above the full-screen carousel fills two columns:
   headline on the left, search + quick-filters + stats on the right. */
.hero-copy {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 32px 56px;
  align-items: start;
}
.hero-copy-lead { display: flex; flex-direction: column; }
.hero-copy-actions { display: flex; flex-direction: column; gap: 28px; }

/* ===== FEATURED LISTING — FULL-SCREEN MODE =====
   The hero stacks (copy first), then the featured listing breaks out of
   the container to a full-bleed, viewport-tall cinematic panel: the
   carousel fills the screen and the listing details sit on a bottom
   gradient scrim. Self-contained — remove this block to restore the
   original right-column card. */
.hero-grid { display: block; }
.hero-panel {
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* full-bleed out of .container */
  margin-top: 44px;
}
.hero-listing-card {
  position: relative;
  height: 100vh;
  min-height: 560px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  /* Shape the top & bottom edges so they aren't straight lines: an SVG
     mask (stretched to fill via preserveAspectRatio='none') gives both
     edges a gentle arch — corners cut in ~6%, midpoints reaching full
     height. The cut-away area is transparent, so the photo genuinely
     appears trimmed into the curved shape and the page shows through.
     Depth is a % of height, so it scales with the viewport. The listing
     text sits within its bottom padding, well clear of the shallow cut. */
  --edge-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C25 0 75 0 100 6 L100 94 C75 100 25 100 0 94 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask: var(--edge-shape) center / 100% 100% no-repeat;
          mask: var(--edge-shape) center / 100% 100% no-repeat;
}
.hero-listing-card .image-carousel {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.hero-listing-card .listing-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  padding: 96px clamp(20px, 6vw, 110px) clamp(28px, 6vh, 72px);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(8, 12, 24, .35) 38%,
    rgba(8, 12, 24, .88) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 16px;
  pointer-events: none;   /* keep carousel controls behind it clickable */
}
.hero-listing-card .listing-heading { align-items: flex-end; }
.hero-listing-card .listing-heading h3 {
  color: #fff;
  /* Same cursive face as the hero h1 above (Great Vibes). It renders
     smaller per-em than the serif, so size up and loosen leading. */
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 78px);
  line-height: 1.05;
  letter-spacing: 0;
  margin: 0 0 4px;
}
/* "Handwritten" reveal — each letter inks in (blur+rise+settle) on a
   staggered delay set per-span by JS, so the cursive title appears to be
   written left-to-right when the card scrolls into view. The .tw-go class
   (added/re-added by the observer) starts/replays the cascade; before it
   is added every letter stays hidden. */
.hero-listing-card .listing-heading h3 .tw-char {
  display: inline-block;
  opacity: 0;
  will-change: opacity, transform, filter;
}
.hero-listing-card .listing-heading h3.tw-go .tw-char {
  animation: twWrite .5s cubic-bezier(.22, .68, .25, 1) both;
}
@keyframes twWrite {
  0%   { opacity: 0; transform: translateY(.16em) rotate(2.5deg) scale(.96); filter: blur(4px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-listing-card .listing-heading h3 .tw-char,
  .hero-listing-card .listing-heading h3.tw-go .tw-char {
    opacity: 1; transform: none; filter: none; animation: none;
  }
}
.hero-listing-card .listing-heading .muted { color: rgba(255, 255, 255, .82); }
.hero-listing-card .listing-heading .price {
  color: #fff;
  font-size: clamp(24px, 3.2vw, 42px);
  white-space: nowrap;
}
.hero-listing-card .listing-meta {
  color: rgba(255, 255, 255, .9);
  border-top-color: rgba(255, 255, 255, .2);
  border-bottom-color: rgba(255, 255, 255, .2);
}
.hero-listing-card .listing-meta b { color: #fff; }
.hero-listing-card .listing-tags .tag {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border-color: rgba(255, 255, 255, .25);
  pointer-events: auto;
}
.hero-listing-card .carousel-btn,
.hero-listing-card .carousel-dots,
.hero-listing-card .featured-badge,
.hero-listing-card .fav-btn { z-index: 5; }
/* Pushed below the shaped top edge (corners cut ~6% of height) so the
   curve never clips these controls. The "Featured" badge is the full-bleed
   arched ribbon (defined below) and hugs the top edge at every width. */
.hero-listing-card .fav-btn { top: clamp(52px, 8.5vh, 102px); right: 24px; }

/* ===================== CAROUSEL ===================== */
.image-carousel {
  position: relative; aspect-ratio: 4/3; overflow: hidden; background: #000;
}
.carousel-track {
  display: flex; height: 100%; width: 100%;
  transition: transform .5s cubic-bezier(.4,.05,.2,1);
}
.carousel-track img {
  width: 100%; height: 100%; flex: 0 0 100%; object-fit: cover;
}
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 0; color: var(--ink);
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  box-shadow: var(--shadow-sm); transition: background .2s;
}
.carousel-btn:hover { background: #fff; }
.carousel-btn.prev { left: 12px; }
.carousel-btn.next { right: 12px; }
.carousel-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.carousel-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255,255,255,.5); transition: background .2s, width .2s;
}
.carousel-dots button.active { background: #fff; width: 22px; border-radius: 4px; }

/* "Featured" title is a full-bleed dual-layered arched ribbon hugging the
   carousel's top edge — at EVERY width (formerly a mobile-only treatment;
   the old small dark pill has been removed). The card's --edge-shape mask
   supplies the top arch automatically; two pseudo-element layers carry the
   royal-blue → leafy-green fill (the back layer is slightly taller with a
   deeper bottom arc at 50% opacity, a soft echo beneath the front arc), and
   a giant ghost copy of the word drifts slowly behind the crisp main word.
   The badge itself just hosts the text and the stacking context. */
.hero-listing-card .badge.featured-badge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(58px, 9vh, 96px);
  padding: 8px 14px 0;
  border-radius: 0;
  background: transparent;
  -webkit-mask: none;
          mask: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Bigger, bolder, white — same Inter family as the eyebrow, uppercase
     and tracked, but heavyweight and at headline scale so it dominates
     the ribbon. */
  font-family: var(--sans);
  font-size: clamp(22px, 5.5vw, 30px);
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #fff;
  /* Contain the negative-z-index layer pseudos so they don't escape
     behind sibling elements in the card. */
  isolation: isolate;
  overflow: visible;
}
/* Main word — explicit positioning + z-index so it stacks above the
   absolutely-positioned ghost. */
.hero-listing-card .badge.featured-badge .feat-main {
  position: relative;
  z-index: 1;
}
/* Echo / ghost layer — same word at ~2× scale, almost transparent,
   drifting slowly through an irregular scale pattern so the motion reads
   as ambient rather than a metronome. Sits above the arc pseudos and
   below the crisp main word: ribbon → faint giant word → crisp small word. */
.hero-listing-card .badge.featured-badge .feat-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: clamp(52px, 14vw, 96px);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(255, 255, 255, .30);
  white-space: nowrap;
  pointer-events: none;
  transform-origin: 50% 50%;
  /* Two independent infinite loops with coprime durations (23s / 31s) —
     scale and opacity drift on their own timelines, so the combined
     pattern doesn't repeat for ~12 minutes. */
  animation:
    featGhostScale   23s linear infinite,
    featGhostOpacity 31s linear infinite;
  will-change: transform, opacity;
}
.hero-listing-card .badge.featured-badge::before,
.hero-listing-card .badge.featured-badge::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    color-mix(in oklab, var(--primary) 92%, transparent) 0%,
    color-mix(in oklab, var(--primary) 80%, var(--accent)) 55%,
    color-mix(in oklab, var(--accent) 85%, transparent) 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-position: center;
          mask-position: center;
}
/* Back layer — extends 14px below the front arc with a deeper bottom
   curve; 50% opacity so it reads as a halo / echo behind the front. */
.hero-listing-card .badge.featured-badge::before {
  height: calc(100% + 14px);
  opacity: .5;
  z-index: -2;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L100 0 L100 100 C75 70 25 70 0 100 Z' fill='%23fff'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L100 0 L100 100 C75 70 25 70 0 100 Z' fill='%23fff'/%3E%3C/svg%3E");
}
/* Front layer — original arc at full opacity. */
.hero-listing-card .badge.featured-badge::after {
  height: 100%;
  z-index: -1;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L100 0 L100 100 C75 78 25 78 0 100 Z' fill='%23fff'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L100 0 L100 100 C75 78 25 78 0 100 Z' fill='%23fff'/%3E%3C/svg%3E");
}
.fav-btn {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 0; color: var(--ink);
  font-size: 18px;
}
.fav-btn.active { color: var(--danger); background: #fff; }

.listing-body { padding: 22px; }
.listing-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.listing-heading h3 { font-family: var(--serif); font-size: 22px; margin: 0 0 4px; }
.listing-heading .price { font-size: 22px; font-family: var(--serif); color: var(--ink); }
.listing-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--ink-soft); font-size: 14px; padding: 12px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.listing-meta b { color: var(--ink); font-weight: 700; }
.listing-tags { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tag { padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); }
.tag-tour { background: var(--primary-50); color: var(--primary); border-color: transparent; }
.tag-new  { background: var(--accent-50); color: var(--accent-700); border-color: transparent; }

/* ===================== TRUST BAR ===================== */
.trust-bar { padding: 28px 0; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-bar .container { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.trust-bar p { margin: 0; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-weight: 400; }
/* Trust-bar names slowly carousel left in a continuous loop. The track
   contains TWO identical sets back-to-back; animating the track to
   translateX(-50%) ends with the second set occupying the first's
   original position, so the loop is seamless. A horizontal mask fades
   the names in at the left edge and out at the right edge. */
.trust-logos {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.trust-track {
  display: flex;
  gap: 36px;
  /* Force the track wider than its overflow:hidden parent — both width
     and min-width set max-content so iOS Safari can't collapse it back
     to 100% when the trust-bar becomes a column on mobile. */
  width: max-content;
  min-width: max-content;
  flex-shrink: 0;
  will-change: transform;
  animation: trustScroll 60s linear infinite;
}
.trust-track span { flex-shrink: 0; }
.trust-track span {
  font-weight: 800; letter-spacing: .12em; font-size: 14px;
  color: var(--ink-soft); opacity: .7;
  white-space: nowrap;
  cursor: default;
  transform-origin: center;
  transition: color .25s ease, transform .25s ease, opacity .25s ease;
}
.trust-track span:hover {
  color: var(--accent);
  opacity: 1;
  transform: scale(1.08);
}
@keyframes trustScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-track { animation: none; }
}
/* Mobile: stack the title above the carousel and centre the whole bar. */
@media (max-width: 820px) {
  .trust-bar .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .trust-bar p { width: 100%; }
  .trust-logos { width: 100%; flex: 0 0 auto; }
}

/* ===================== SECTIONS ===================== */
.section-block { padding: 96px 0; scroll-margin-top: 80px; }
.section-header { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: end; margin-bottom: 40px; }
.section-header h2 { font-family: var(--script); font-weight: 400; font-size: clamp(40px, 4.4vw, 60px); margin: 0; line-height: 1.05; letter-spacing: 0; }
.section-description { color: var(--ink-soft); margin: 0; font-size: 16px; max-width: 520px; }
.section-header.light .eyebrow { color: color-mix(in srgb, var(--accent) 40%, #fff); }
.section-header.light h2, .section-header.light .section-description { color: #fff; }
.section-header.light .section-description { color: #b6c4dc; }

/* ===== Section top arc — repeats the header's curved-edge motif on the
   TOP of selected sections. Works exactly like the header: a band filled
   with the PREVIOUS section's colour sits at this section's top and is
   masked with the header's identical cubic (solid across the top, dipping
   down in the middle, 25/75 control ratios) so the previous colour spills
   DOWN into this section in an arc. Contrast is guaranteed (two different
   surface colours), and the band lives entirely inside this section's
   empty top padding, so it never covers content and needs no overlap into
   the section above. --arc-prev-bg is the colour that spills in. */
.arc-top { position: relative; }
.arc-top::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: clamp(36px, 5vh, 52px);
  /* Top of the band is EXACTLY the neighbouring section's colour, so there
     is still no straight seam where the band begins (the original hard
     requirement). It then fades into a clearly visible brand-blue tint
     toward the curved bottom edge — so the arc reads as an on-brand
     coloured swoop instead of an invisible grey-on-white step. */
  background: linear-gradient(
    to bottom,
    var(--arc-prev-bg, var(--bg)) 0%,
    var(--arc-prev-bg, var(--bg)) 32%,
    color-mix(in srgb, var(--primary) 18%, var(--arc-prev-bg, var(--bg))) 100%
  );
  z-index: 1;
  pointer-events: none;
  --arc-top-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V73 C75 100 25 100 0 73 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask: var(--arc-top-mask) center / 100% 100% no-repeat;
          mask: var(--arc-top-mask) center / 100% 100% no-repeat;
  /* The spill colour is intentionally identical to the section above (so
     no new straight seam appears where the band starts) — but page-grey
     on white is only a ~6-value difference and reads as invisible. A soft
     drop-shadow follows the masked (curved) alpha, tracing the arc's
     bottom edge so the curve is defined regardless of how close the two
     surfaces are — the same way the header arc reads via its blur/edge. */
  filter: drop-shadow(0 5px 6px rgba(10, 15, 26, .13));
}
/* Each section's "previous section" colour (what spills down):
   • #calculator follows #compare  → page grey
   • #map        follows #calculator (white surface)
   • testimonials follows #tools    → page grey */
#calculator.arc-top      { --arc-prev-bg: var(--bg); }
#map.arc-top             { --arc-prev-bg: var(--surface); }
.arc-top.testimonials    { --arc-prev-bg: var(--bg); }
/* The arc replaces the straight 1px top rule on the surface sections.
   The calculator's bottom border is dropped too: its white matches the
   arc that spills into #map, so that 1px line would otherwise show as a
   straight cut across the curve. */
.arc-top.split-section, .arc-top.testimonials { border-top: 0; }
.arc-top.split-section { border-bottom: 0; }

/* ===================== LISTINGS ===================== */
.listings-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; margin-bottom: 28px; flex-wrap: wrap;
}
.chip-group { display: flex; gap: 8px; flex-wrap: wrap; }
.sort-control { display: flex; align-items: center; gap: 10px; }
.sort-control label { font-size: 13px; color: var(--muted); }
.sort-control select {
  background: var(--surface); border: 1px solid var(--line-strong);
  padding: 9px 14px; border-radius: 8px; font-size: 13px; color: var(--ink); cursor: pointer;
}

.property-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.property-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer; display: flex; flex-direction: column;
}
.property-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ===== LISTINGS-GRID STAT RAIL — all viewports =====
   Colored category toggles on every .property-card (desktop + mobile).
   Self-contained (doesn't depend on the mobile-only .map-result-iconrail
   rules) so it works at any width. The higher-specificity selectors here
   override the global `.map-result-iconrail { display:none }` base rule.
   Click handling lives in script.js (renderCardStats / iconRailHtml),
   so the same toggle + per-property metric data drives both views. */
.property-card { position: relative; }
.property-card .map-result-iconrail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 3;
  padding: 7px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.property-card .mr-ico {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--c) 40%, var(--line));
  color: color-mix(in srgb, var(--c) 55%, var(--muted));
  transition: background .15s ease, color .15s ease,
              border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.property-card .mr-ico svg { width: 15px; height: 15px; display: block; }
.property-card .mr-ico:hover {
  border-color: var(--c);
  color: var(--c);
}
.property-card .mr-ico:active { transform: scale(.9); }
.property-card .mr-ico.active {
  background: var(--c);
  border-color: var(--c);
  color: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 28%, transparent),
              0 1px 4px color-mix(in srgb, var(--c) 35%, transparent);
}
/* Keep card text clear of the floating rail. */
.property-card .property-content { padding-right: 54px; }
.property-stats {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 12px;
}
.property-stats:empty { display: none; }
.property-stats .metric-row {
  font-size: 12px;
  padding: 3px 9px 3px 6px;
}
.property-stats .metric-row-ico { width: 16px; height: 16px; }
.property-stats .metric-row-ico svg { width: 10px; height: 10px; }

.media-block { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #ddd; }
.media-block .image-carousel { aspect-ratio: 4/3; }
.price-tag {
  position: absolute; bottom: 12px; left: 12px;
  background: rgba(15,23,42,.85); color: #fff; padding: 6px 14px;
  border-radius: 999px; font-weight: 700; font-size: 14px;
  backdrop-filter: blur(6px);
}
.status-badge {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.status-badge.available { background: var(--accent); color: #fff; }
.status-badge.pending { background: var(--warn); color: #fff; }
.status-badge.sold { background: var(--danger); color: #fff; }
.property-content { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.property-content h3 { font-family: var(--serif); font-size: 19px; margin: 0 0 4px; }
.property-content .addr { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; }
.property-content .specs { display: flex; gap: 12px; font-size: 13.5px; color: var(--ink-soft); padding: 12px 0; border-top: 1px solid var(--line); margin-top: auto; }
.property-content .specs b { color: var(--ink); }
.property-features { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ===================== MORTGAGE CALCULATOR (condensed) ===================== */
.split-section {
  background: var(--surface);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 56px 0;          /* override default 96px section padding */
}
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

.calculator-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow-sm); margin-top: 14px;
}
.input-row { margin-bottom: 7px; }
.input-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.input-row label {
  display: block; font-size: 10px; font-weight: 600;
  color: var(--muted); margin-bottom: 2px;
  text-transform: uppercase; letter-spacing: .06em;
}
.input-row input[type="number"], .input-row select {
  width: 100%; height: 30px; padding: 0 9px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink);
  font-size: 12.5px; font-weight: 600; outline: none;
  transition: border .15s, box-shadow .15s;
}
.input-row input[type="number"]:focus, .input-row select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50);
}
.input-row input[type="range"] {
  width: 100%; margin-top: 4px; accent-color: var(--primary);
  height: 14px;
}
.hint { font-size: 10px; color: var(--muted); }
#calculateButton { width: 100%; margin-top: 4px; height: 32px; font-size: 12.5px; }

.payment-result {
  margin-top: 10px; padding: 10px 12px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-700) 65%, var(--accent-700) 130%);
  border-radius: var(--radius-sm); color: #fff;
}
.payment-result > div:first-child { margin-bottom: 6px; }
.payment-result p {
  margin: 0 0 1px; font-size: 10px; opacity: .85;
  text-transform: uppercase; letter-spacing: .08em;
}
.payment-result strong { font-size: 20px; font-family: var(--serif); line-height: 1; }
.payment-breakdown {
  display: grid; gap: 3px; padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.25);
}
.payment-breakdown > div { display: flex; justify-content: space-between; font-size: 11.5px; }
.payment-breakdown .total {
  padding-top: 4px; margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,.2); font-weight: 700;
}

/* Right column — tighter list + smaller rate card */
.calculator-benefits h3 {
  font-family: var(--script); font-weight: 400;
  font-size: 32px; margin: 0 0 10px; line-height: 1;
}
.feature-list {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: grid; gap: 6px;
}
.feature-list li {
  padding: 8px 12px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.35;
}
.feature-list b { color: var(--ink); }

.rate-card {
  background: var(--black); color: #fff; border-radius: var(--radius-sm);
  padding: 12px 14px; display: grid; gap: 2px;
  border: 1px solid var(--black);
}
.rate-card p { margin: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: #d8dde6; opacity: 1; }
.rate-card strong { font-family: var(--serif); font-size: 24px; line-height: 1.1; }
.rate-trend { font-size: 11px; }
.rate-trend.down { color: #6ee7b7; }
.rate-trend.up { color: #fca5a5; }

/* ===================== MAP MOCK ===================== */
.map-mock {
  position: relative; height: 520px; border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow);
  background: var(--surface-2);
}
.leaflet-host {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
/* Subtle saturate so brand-coloured overlays/pins read on top of OSM tiles */
.leaflet-host .leaflet-tile-pane { filter: saturate(.92) contrast(1.02); }
/* Make sure the legend overlay and results panel sit above Leaflet's panes */
.map-overlay,
.map-results { z-index: 1000; }
/* Click-to-engage scroll-zoom hint */
.map-scroll-hint {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  background: rgba(10, 15, 26, .82);
  color: #fff;
  font-size: 11.5px; font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  pointer-events: none;
  letter-spacing: .02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .25s ease;
}
.leaflet-host.scroll-zoom-active .map-scroll-hint { opacity: 0; }
/* Override Leaflet's default attribution to match site styling */
.leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255,255,255,.85) !important;
  border-radius: 0 0 0 var(--radius-sm) !important;
}
.map-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(15,23,42,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.map-pin {
  position: absolute; padding: 7px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-strong);
  font-weight: 700; font-size: 13px; box-shadow: var(--shadow);
  cursor: pointer; transition: transform .2s, background .2s, color .2s;
}
.map-pin::after {
  content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--surface);
}
.map-pin:hover { background: var(--primary); color: #fff; transform: translateY(-3px); }
.pin-1 { top: 30%; left: 18%; }
.pin-2 { top: 22%; left: 48%; }
.pin-3 { top: 58%; left: 30%; }
.pin-4 { top: 38%; left: 70%; }
.pin-5 { top: 70%; left: 60%; }
.pin-6 { top: 12%; left: 78%; }
.map-overlay {
  position: fixed;
  bottom: 32px; left: 24px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 14px 16px 14px;
  box-shadow: var(--shadow-lg);
  min-width: 240px;
  overflow: visible;   /* allow the corner logo to extend past the edges */
  z-index: 1500;
  transition: box-shadow .2s ease;
}
.map-overlay.is-dragging {
  box-shadow: 0 28px 60px rgba(10,15,26,.4), 0 0 0 1px var(--primary);
  cursor: grabbing;
}
.map-overlay.is-dragging .map-legend-grip { cursor: grabbing; }

/* ===================== PANEL-IN-SECTION BEHAVIOR =====================
   Both floating panels (legend overlay + results sidebar) "live" inside
   the Map section. When the user scrolls past that section, the panels
   jiggle nervously, then dart upward/downward back toward the section.
   When the section returns, the panels bounce back in with overshoot. */

/* While the map section is in view, panel transforms ease so dragging
   feels normal. We disable transitions during the flee/return animations
   so the keyframes drive movement exclusively. */
.map-overlay,
.map-results {
  will-change: transform;
}

/* Z-order — legend (left) sits on top of the results panel (right) so the
   results visually slips UNDER the legend during the joint exit. */
.map-overlay { z-index: 1600; }
.map-results { z-index: 1500; }

/* ---- LEFT panel (legend overlay) — leads the exit ---- */
/* Shortened from 1.05s → 0.55s so the panel reacts immediately when the
   user scrolls out of the section. Wiggle is compressed into the first
   ~30% of the timeline before the launch. */
.map-overlay.panel-out-above {
  animation: panelFleeUp 0.55s cubic-bezier(.55, 0, .85, 0) forwards;
  pointer-events: none;
}
.map-overlay.panel-out-below {
  animation: panelFleeDown 0.55s cubic-bezier(.55, 0, .85, 0) forwards;
  pointer-events: none;
}
@keyframes panelFleeUp {
  0%   { transform: translateY(0)    rotate(0deg)  scale(1); }
  10%  { transform: translateY(1px)  rotate(-6deg) scale(1); }
  20%  { transform: translateY(-1px) rotate(6deg)  scale(1); }
  30%  { transform: translateY(4px)  rotate(0deg)  scale(.96); }   /* crouch */
  100% { transform: translateY(-140vh) rotate(-22deg) scale(.6); }
}
@keyframes panelFleeDown {
  0%   { transform: translateY(0)    rotate(0deg)  scale(1); }
  10%  { transform: translateY(-1px) rotate(6deg)  scale(1); }
  20%  { transform: translateY(1px)  rotate(-6deg) scale(1); }
  30%  { transform: translateY(-4px) rotate(0deg)  scale(.96); }
  100% { transform: translateY(140vh) rotate(22deg) scale(.6); }
}

/* ---- RIGHT panel (results) — follows the legend with a beat of delay,
   fades opacity earlier and tilts less so it visibly trails AND slips
   under the legend. Same general movement, distinctly different feel. */
.map-results.panel-out-above {
  animation: panelFleeUpFade 0.55s cubic-bezier(.55, 0, .85, 0) 0.12s forwards;
  pointer-events: none;
}
.map-results.panel-out-below {
  animation: panelFleeDownFade 0.55s cubic-bezier(.55, 0, .85, 0) 0.12s forwards;
  pointer-events: none;
}
@keyframes panelFleeUpFade {
  0%   { transform: translateY(0)    rotate(0deg)  scale(1);   opacity: 1; }
  10%  { transform: translateY(2px)  rotate(-3deg) scale(.99); opacity: .95; }
  25%  { transform: translateY(-1px) rotate(3deg)  scale(.97); opacity: .8; }
  40%  { transform: translateY(6px)  rotate(0deg)  scale(.93); opacity: .55; }
  100% { transform: translateY(-115vh) rotate(-12deg) scale(.55); opacity: 0; }
}
@keyframes panelFleeDownFade {
  0%   { transform: translateY(0)    rotate(0deg)  scale(1);   opacity: 1; }
  10%  { transform: translateY(-2px) rotate(3deg)  scale(.99); opacity: .95; }
  25%  { transform: translateY(1px)  rotate(-3deg) scale(.97); opacity: .8; }
  40%  { transform: translateY(-6px) rotate(0deg)  scale(.93); opacity: .55; }
  100% { transform: translateY(115vh) rotate(12deg) scale(.55); opacity: 0; }
}

/* Bouncy returns — direction-aware so the panel comes back from where
   it fled. Multiple overshoots give the "excited to be home" feel. */
.map-overlay.panel-returning-above {
  animation: panelReturnFromAbove 1.05s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.map-results.panel-returning-above {
  animation: panelReturnFromAbove 1.05s cubic-bezier(.34, 1.56, .64, 1) 0.14s forwards;
}
@keyframes panelReturnFromAbove {
  0%   { transform: translateY(-140vh) rotate(-22deg) scale(.6); opacity: 0; }
  35%  { transform: translateY(0) rotate(0deg) scale(1.06); opacity: 1; }
  55%  { transform: translateY(14px) rotate(4deg)  scale(.97); }
  72%  { transform: translateY(-7px) rotate(-3deg) scale(1.02); }
  86%  { transform: translateY(3px)  rotate(1deg)  scale(.99); }
  100% { transform: translateY(0)    rotate(0deg)  scale(1); }
}
.map-overlay.panel-returning-below {
  animation: panelReturnFromBelow 1.05s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.map-results.panel-returning-below {
  animation: panelReturnFromBelow 1.05s cubic-bezier(.34, 1.56, .64, 1) 0.14s forwards;
}
@keyframes panelReturnFromBelow {
  0%   { transform: translateY(140vh) rotate(22deg) scale(.6); opacity: 0; }
  35%  { transform: translateY(0)  rotate(0deg) scale(1.06); opacity: 1; }
  55%  { transform: translateY(-14px) rotate(-4deg) scale(.97); }
  72%  { transform: translateY(7px)   rotate(3deg)  scale(1.02); }
  86%  { transform: translateY(-3px)  rotate(-1deg) scale(.99); }
  100% { transform: translateY(0)     rotate(0deg)  scale(1); }
}

/* First-paint snap: if the map section starts off-screen on initial load
   we don't want the flee animation to play. This class disables animations
   for one frame so the panel jumps directly to its hidden position. */
.panel-no-anim,
.panel-no-anim.panel-out-above,
.panel-no-anim.panel-out-below {
  animation: none !important;
  transition: none !important;
}
.panel-no-anim.panel-out-above { transform: translateY(-140vh); opacity: 0; pointer-events: none; }
.panel-no-anim.panel-out-below { transform: translateY(140vh);  opacity: 0; pointer-events: none; }

/* Reduced-motion users get a plain fade instead of the bouncy show */
@media (prefers-reduced-motion: reduce) {
  .map-overlay.panel-out-above,  .map-results.panel-out-above,
  .map-overlay.panel-out-below,  .map-results.panel-out-below {
    animation: panelFadeOut .3s ease forwards;
  }
  .map-overlay.panel-returning-above, .map-results.panel-returning-above,
  .map-overlay.panel-returning-below, .map-results.panel-returning-below {
    animation: panelFadeIn .3s ease forwards;
  }
  @keyframes panelFadeOut { to { opacity: 0; pointer-events: none; } }
  @keyframes panelFadeIn  { from { opacity: 0; } to { opacity: 1; } }
}

/* Drag handle area at the very top of the legend panel */
.map-legend-grip {
  display: flex; align-items: center; gap: 8px;
  margin: 0 -14px 8px;
  padding: 8px 14px 6px;
  border-bottom: 1px solid var(--line);
  cursor: grab;
  user-select: none;
}
.map-legend-grip:hover { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.map-legend-grip svg {
  width: 12px; height: 14px;
  color: var(--muted);
  flex-shrink: 0;
}
.map-legend-grip-label {
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}

/* Logo peeking out of the bottom-right corner of the legend panel.
   Multiple stacked drop-shadows simulate a 2px white outline around
   the transparent-PNG artwork. */
.map-overlay-logo {
  position: absolute;
  bottom: -18px;
  right: -22px;
  width: 90px;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  filter:
    drop-shadow( 2px  0   0 #fff)
    drop-shadow(-2px  0   0 #fff)
    drop-shadow( 0    2px 0 #fff)
    drop-shadow( 0   -2px 0 #fff)
    drop-shadow( 1.5px 1.5px 0 #fff)
    drop-shadow(-1.5px -1.5px 0 #fff)
    drop-shadow( 1.5px -1.5px 0 #fff)
    drop-shadow(-1.5px  1.5px 0 #fff)
    drop-shadow( 0     3px   4px rgba(10,15,26,.25));
  transform: rotate(-4deg);
  transition: transform .25s ease;
}
.map-overlay:hover .map-overlay-logo {
  transform: rotate(0deg) scale(1.04);
}
.map-legend h4 {
  margin: 0 0 10px; font-size: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.map-legend h4 .muted { font-weight: 500; font-size: 11px; text-transform: none; letter-spacing: 0; }
.map-legend { display: grid; gap: 2px; }

.legend-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 6px 10px;
  font-size: 13px; font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.legend-row:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
}
.legend-row:active { transform: scale(.97); }
.legend-row.active {
  background: var(--primary-50);
  color: var(--primary);
  border-color: var(--primary);
}
.legend-row.active .dot { box-shadow: 0 0 0 2px var(--surface); }

/* Coloured icon circle in each legend row — replaces the plain dot */
.legend-ico {
  width: 24px; height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  color: #fff;
  background: var(--ink-soft);
  box-shadow: 0 1px 3px rgba(10,15,26,.2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.legend-ico svg {
  width: 14px; height: 14px;
  display: block;
}
.legend-row[data-map-filter="walkability"] .legend-ico { background: var(--accent); }
.legend-row[data-map-filter="schools"]     .legend-ico { background: var(--primary); }
.legend-row[data-map-filter="commute"]     .legend-ico { background: var(--warn); }
.legend-row[data-map-filter="crime"]       .legend-ico { background: #5a2e91; }
.legend-row[data-map-filter="parks"]       .legend-ico { background: #8b5a2b; }
.legend-row:hover .legend-ico {
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(10,15,26,.28);
}
.legend-row.active .legend-ico {
  box-shadow: 0 0 0 3px var(--surface), 0 1px 3px rgba(10,15,26,.25);
}
/* Subtle checkmark on active rows so multi-select reads as on/off */
.legend-row::after {
  content: "";
  margin-left: auto;
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--line);
  background: transparent;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.legend-row.active::after {
  background: var(--primary);
  border-color: var(--primary);
  background-image: linear-gradient(45deg, transparent 45%, #fff 46%, #fff 56%, transparent 57%),
                    linear-gradient(-45deg, transparent 45%, #fff 46%, #fff 56%, transparent 57%);
  background-size: 9px 9px, 9px 9px;
  background-position: 3px 5px, 7px 5px;
  background-repeat: no-repeat;
}

/* Quick All / None controls beneath the legend heading */
.legend-controls {
  display: flex; gap: 6px;
  margin: 0 0 8px;
  padding: 0 2px;
}
.legend-ctrl {
  flex: 1;
  padding: 4px 8px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.legend-ctrl:hover {
  background: var(--primary-50);
  color: var(--primary);
  border-color: var(--primary);
}

/* ===================== FLOATING RESULTS PANEL =====================
   Position: fixed (viewport-relative). The header is a drag handle, so
   the user can move the panel anywhere on the page. Position persists
   to localStorage so it sticks across reloads. */
.map-results {
  position: fixed;
  top: 240px; right: 24px;
  width: 340px;
  max-height: 70vh;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 1500;
  opacity: 1;
  transition: opacity .25s ease, box-shadow .2s ease;
}
.map-results[hidden] {
  display: flex !important;
  opacity: 0;
  pointer-events: none;
}
/* Visual emphasis while user is dragging */
.map-results.is-dragging {
  box-shadow: 0 28px 60px rgba(10,15,26,.4), 0 0 0 1px var(--primary);
  transition: none;
  user-select: none;
  z-index: 2000;
}
.map-results-head {
  display: flex; align-items: center;
  gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  cursor: move;            /* dragging affordance */
  user-select: none;
}
.map-results-titles { flex: 1; min-width: 0; }
.map-results-titles .eyebrow { margin: 0 0 2px; }
.map-results-titles .muted { margin: 0; }
.map-results-grip {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  padding: 2px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color .15s ease, background .15s ease;
}
.map-results-head:hover .map-results-grip {
  color: var(--primary);
  background: var(--primary-50);
}
.map-results-head .eyebrow { margin: 0 0 2px; }
.map-results-head .muted { margin: 0; }
.map-results-close {
  background: transparent; border: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 18px; line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}
.map-results-close:hover { background: var(--surface-2); color: var(--ink); }

.map-results-list {
  flex: 1; overflow-y: auto;
  padding: 8px;
  display: grid; gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.map-results-list::-webkit-scrollbar { width: 6px; }
.map-results-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

.map-result {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.map-result:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.map-result img {
  width: 60px; height: 60px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface-2);
}
.map-result-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.map-result-body strong {
  font-size: 13px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-result-body .muted { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-result-foot {
  display: flex; justify-content: space-between; gap: 6px;
  margin-top: 2px;
}
.map-result-price {
  font-size: 12.5px; font-weight: 700; color: var(--primary);
  font-family: var(--num); font-variant-numeric: tabular-nums;
}
.map-result-region {
  font-size: 10.5px; font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface-2);
  padding: 1px 8px; border-radius: 999px;
  white-space: nowrap;
  text-transform: uppercase; letter-spacing: .04em;
}

/* Numbered rank badge on the result card to match its pin on the map */
.map-result {
  position: relative;        /* anchor for .map-result-rank */
}
.map-result-rank {
  position: absolute;
  top: 4px; left: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--num); font-size: 11px; font-weight: 700;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  z-index: 2;
}
.map-result-rank.filter-walkability { background: var(--accent); }
.map-result-rank.filter-schools     { background: var(--primary); }
.map-result-rank.filter-commute     { background: var(--warn); }
.map-result-rank.filter-crime       { background: #5a2e91; }
.map-result-rank.filter-parks       { background: #8b5a2b; }

/* Brief flash when the user clicks a map pin */
.map-result.flash {
  animation: cardFlash .8s ease;
}
@keyframes cardFlash {
  0%   { box-shadow: 0 0 0 0 var(--primary); }
  30%  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 35%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ===================== LEAFLET MARKER STYLES =====================
   Markers are <div class="cm-pin-leaflet"> containing an inline <svg>.
   The hover/highlight effect uses `filter` (not transform) so it
   composes with Leaflet's positioning transform translate3d(). */
.cm-pin-leaflet {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  transition: filter .2s ease;
  /* Make sure the marker div itself doesn't add extra space around the SVG */
  width: auto !important;
  height: auto !important;
  line-height: 0;
}
.cm-pin-leaflet > svg {
  display: block;
  width: 46px;
  height: 46px;
  overflow: visible;
}
.cm-pin-leaflet:hover,
.cm-pin-leaflet.marker-highlighted {
  filter: drop-shadow(0 0 10px rgba(30,79,183,.7))
          drop-shadow(0 4px 10px rgba(10,15,26,.5))
          brightness(1.08);
  z-index: 1000 !important;
}

/* Pulse animation triggered when a sidebar address is clicked. */
@keyframes mapPinZoomPulse {
  0%, 100% { filter: none; }
  30%      { filter: drop-shadow(0 0 14px rgba(30,79,183,.95))
                     drop-shadow(0 0 4px rgba(30,79,183,1))
                     brightness(1.18); }
  60%      { filter: drop-shadow(0 0 6px rgba(30,79,183,.5))
                     brightness(1.08); }
}
.cm-pin-leaflet.zoom-pulse {
  animation: mapPinZoomPulse 1.0s ease-in-out 3;
  z-index: 1000 !important;
}

/* Address as a clickable affordance inside each result card.
   Slightly inset, with a visible hover state so users see it's interactive. */
.map-result-address {
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 4px 8px 4px 6px;
  margin: 2px 0 4px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-align: left;
  border-radius: 6px;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .12s ease;
  line-height: 1.35;
  max-width: 100%;
  pointer-events: auto;
}
.map-result-address:hover {
  color: var(--primary);
  background: var(--primary-50);
  border-color: var(--primary);
  transform: translateY(-1px);
}
.map-result-address:active { transform: translateY(0); }
.map-result-address svg {
  color: var(--primary);
  flex-shrink: 0;
}

/* Category-driven metric line — colour cue depends on the active filter
   so the card visually echoes which lens the user clicked in the legend. */
.map-result-metric {
  font-size: 11.5px; font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 2px; margin-bottom: 4px;
  align-self: flex-start;
  font-variant-numeric: tabular-nums;
}
.map-result-metric[data-filter="walkability"] { background: var(--accent-50);  color: var(--accent-700); }
.map-result-metric[data-filter="schools"]     { background: var(--primary-50); color: var(--primary); }
.map-result-metric[data-filter="commute"]     { background: #fff5d9;           color: #8a6300; }
.map-result-metric[data-filter="crime"]       { background: #f3edff;           color: #5a2e91; }
.map-result-metric[data-filter="parks"]       { background: #f1e5d4;           color: #6b3f17; }

/* Stacked metric rows — one row per active overlay filter. Each row's
   own --c CSS var (set inline) carries the filter colour for the icon
   chip + the row's left rail, so the eye can match a row back to the
   pin's matching segment without reading labels. */
.map-result-metrics {
  display: flex; flex-direction: column;
  gap: 4px;
  margin-top: 2px; margin-bottom: 4px;
}
.metric-row {
  display: flex; align-items: center;
  gap: 6px;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 8px 3px 6px;
  background: color-mix(in srgb, var(--c, var(--primary)) 10%, var(--surface));
  color: color-mix(in srgb, var(--c, var(--primary)) 75%, var(--ink));
  border-left: 3px solid var(--c, var(--primary));
  border-radius: 0 6px 6px 0;
  font-variant-numeric: tabular-nums;
  align-self: stretch;
}
.metric-row-ico {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c, var(--primary));
  color: #fff;
  display: inline-grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(10,15,26,.18);
}
.metric-row-ico svg {
  width: 10px; height: 10px;
  display: block;
}
.metric-row-val { line-height: 1.25; }
.metric-row-val .metric-info {
  display: inline-grid; place-items: center;
  width: 12px; height: 12px;
  margin-left: 4px;
  font-size: 9px;
  background: var(--c, var(--primary));
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* Per-card icon rail + the stats it populates are a MOBILE-ONLY feature.
   On desktop the result card keeps using .map-result-metrics (the rows
   driven by the global legend filter), so hide the rail + per-card stats
   here; the mobile media block below flips this. */
.map-result-iconrail,
.map-result-stats { display: none; }

/* Multi-overlay rank chip — outer ring is a conic gradient of every
   active filter's colour, inner disc stays neutral so the number reads.
   Slightly larger than the single-filter chip so the segments are visible. */
.map-result-rank.multi {
  width: 22px; height: 22px;
  border: 0;
  display: grid; place-items: center;
  position: absolute;
  padding: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.map-result-rank.multi .map-result-rank-num {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  background: #fff;
  color: var(--ink);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--num); font-size: 10px; font-weight: 800;
}
.map-result-rank:not(.multi) .map-result-rank-num {
  /* Single-filter mode keeps the original look — text floats on the colored bg */
  color: inherit;
  font-family: var(--num); font-weight: 700;
}

/* Tiny "i" info button on the safety metric */
.metric-info {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px;
  margin-left: 4px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 9px; font-weight: 700; font-style: italic;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  opacity: .7;
  transition: opacity .15s, background .15s, color .15s;
}
.metric-info:hover {
  opacity: 1;
  background: #5a2e91;
  border-color: #5a2e91;
  color: #f3edff;
}

/* Popover — small floating tooltip explaining the Safety Rating */
.metric-popover {
  position: fixed;
  z-index: 250;
  width: 260px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px 10px;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transition:
    opacity   .2s ease,
    transform .26s cubic-bezier(.18, .9, .32, 1.16);
  pointer-events: none;
}
.metric-popover.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.metric-popover h5 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em;
  color: #5a2e91;
  font-weight: 800;
}
.metric-popover p {
  margin: 0 0 8px;
  font-size: 12px; line-height: 1.45;
  color: var(--ink-soft);
}
.metric-popover .popover-scale {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: grid; gap: 3px;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}
.metric-popover .popover-scale li {
  display: grid; grid-template-columns: 56px 1fr;
  gap: 8px; font-size: 11.5px; color: var(--ink-soft);
}
.metric-popover .popover-scale b {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.metric-popover .popover-source {
  margin: 0;
  border-top: 1px dashed var(--line);
  padding-top: 6px;
  font-size: 10.5px;
}
/* Arrow — anchored to the icon's horizontal centre via CSS variable */
.metric-popover::before,
.metric-popover::after {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  width: 0; height: 0;
  border: 7px solid transparent;
  transform: translateX(-50%);
}
.metric-popover[data-placement="above"]::after  { top: 100%;  border-top-color: var(--surface); }
.metric-popover[data-placement="above"]::before { top: calc(100% + 1px); border-top-color: var(--line); }
.metric-popover[data-placement="below"]::after  { bottom: 100%; border-bottom-color: var(--surface); }
.metric-popover[data-placement="below"]::before { bottom: calc(100% + 1px); border-bottom-color: var(--line); }

/* Compact variant — used for the per-filter score popover shown when a
   user hovers a mobile chip's colored icon. Drops the description block
   and reformats the rows as a tight region → score (· distance) table. */
.metric-popover.metric-popover-compact {
  width: 200px;
  padding: 9px 12px 8px;
}
.metric-popover-compact h5 {
  margin: 0 0 6px;
}
.metric-popover-compact .popover-scale {
  margin: 0;
  border-top: 1px dashed var(--line);
  padding-top: 6px;
  gap: 3px;
}
.metric-popover-compact .popover-scale li {
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
}
.metric-popover-compact .popover-scale span {
  color: var(--ink-soft);
}
.metric-popover-compact .popover-scale b {
  justify-self: end;
  text-align: right;
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 820px) {
  .map-results {
    /* On small screens dock at the bottom of the viewport as a sheet */
    top: auto; bottom: 14px; right: 14px; left: 14px;
    width: auto; max-height: 58%;
  }
  .map-results[hidden] {
    transform: translateY(calc(100% + 20px));
  }
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-green { background: var(--accent); }
.dot-blue  { background: var(--primary); }
.dot-orange{ background: var(--warn); }
.dot-purple{ background: var(--black); }

/* ===================== TOOLS GRID ===================== */
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tool-card {
  padding: 26px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); transition: transform .2s, border-color .2s;
}
.tool-card:hover { transform: translateY(-3px); border-color: var(--primary); }
.tool-icon { font-size: 26px; margin-bottom: 10px; }
.tool-card h3 { margin: 0 0 6px; font-size: 17px; font-family: var(--serif); }
.tool-card p { margin: 0; color: var(--ink-soft); font-size: 14px; }

/* ===================== DARK SECTION (SELLER BACKEND) ===================== */
.dark-section {
  background: linear-gradient(180deg, #0c1c4a, #0a1640);
  color: #e7ecf7;
}
.dark-section .eyebrow { color: #7aa6ff; }
.dark-section h2 { color: #fff; }

.dashboard-grid { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }

/* LOGIN CARD */
.login-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg); padding: 26px;
  backdrop-filter: blur(10px);
  position: sticky; top: 92px;
}
.login-card h3 { font-family: var(--serif); font-size: 22px; margin: 0 0 4px; }
.login-card p { color: #b6c4dc; font-size: 13.5px; margin: 0 0 18px; }
.login-form { display: grid; gap: 6px; }
.login-form label { font-size: 12px; color: #93a1bb; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-top: 8px; }
.login-form input {
  height: 44px; padding: 0 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-sm); color: #fff; font-size: 14px; outline: none;
  transition: border .15s, background .15s;
}
.login-form input:focus { border-color: var(--accent); background: rgba(255,255,255,.1); }
.login-form button { margin-top: 14px; }
.login-error { color: #fca5a5; font-size: 13px; margin: 8px 0 0; }
.login-features { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 6px; font-size: 13px; color: #c7d0e0; }
.login-features p { margin: 0; }

/* BACKEND PANEL */
.backend-panel {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg); padding: 28px;
  display: grid; gap: 24px;
}
.backend-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.backend-header h3 { font-family: var(--serif); font-size: 26px; margin: 0; color: #fff; }
.backend-header p { margin: 4px 0 0; color: #93a1bb; font-size: 13px; }
.backend-header .button-ghost { color: #fff; border-color: rgba(255,255,255,.2); }
.backend-header .button-ghost:hover { background: rgba(255,255,255,.08); }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.kpi-card {
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 4px;
}
.kpi-label { font-size: 11.5px; color: #93a1bb; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.kpi-card strong { font-size: 26px; font-family: var(--serif); color: #fff; line-height: 1.1; }
.kpi-trend { font-size: 12px; color: #93a1bb; }
.kpi-trend.up { color: #6ee7b7; }
.kpi-trend.down { color: #fca5a5; }

/* Tabs */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid rgba(255,255,255,.1); }
.tab {
  background: transparent; border: 0; color: #93a1bb;
  padding: 12px 16px; font-size: 14px; font-weight: 600;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.tab:hover { color: #fff; }
.tab.active { color: #fff; border-bottom-color: var(--accent); }

/* Filter grid */
.filter-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.filter-item label { font-size: 11.5px; color: #93a1bb; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; display: block; margin-bottom: 6px; }
.filter-item select, .filter-item input {
  width: 100%; height: 40px; padding: 0 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-sm); color: #fff; font-size: 13.5px; outline: none;
}
.filter-item select option { color: var(--ink); }
.filter-item.search { grid-column: span 2; }

/* Property table */
.table-scroll { overflow-x: auto; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); }
.property-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 920px; }
.property-table th, .property-table td {
  padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.07);
  white-space: nowrap;
}
.property-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #93a1bb; font-weight: 600; cursor: pointer; user-select: none; }
.property-table th:hover { color: #fff; }
.property-table tbody tr:hover { background: rgba(255,255,255,.04); }
.status { font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; display: inline-block; text-transform: uppercase; letter-spacing: .04em; }
.status.available { background: rgba(22,163,74,.18); color: #6ee7b7; }
.status.pending   { background: rgba(245,158,11,.18); color: #fcd34d; }
.status.sold      { background: rgba(239,68,68,.18); color: #fca5a5; }
.action-btn {
  background: transparent; color: color-mix(in srgb, var(--accent) 60%, #fff); border: 0; font-size: 13px;
  font-weight: 600; padding: 4px 8px; border-radius: 6px;
  white-space: nowrap;
}
.action-btn:hover { background: rgba(40,167,69,.16); color: #fff; }

/* Allow the actions cell to wrap so every button stays visible even when
   the column is narrow — prevents the 4-button row from hiding any of the
   options off-screen behind a horizontal scroll. */
.property-table td.actions-cell { white-space: normal; min-width: 220px; }
.actions-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* Sold rows fade slightly so the active inventory carries more visual
   weight; the row stays fully interactive. */
.dash-body .property-table tbody tr.status-row-sold td { opacity: .62; }
.dash-body .property-table tbody tr.status-row-sold:hover td { opacity: 1; }

/* Activity */
.activity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.activity-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 18px;
}
.activity-card h4 { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: #fff; }
.lead-list, .task-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lead-list li { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 8px; transition: background .2s; }
.lead-list li:hover { background: rgba(255,255,255,.04); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; font-weight: 700; font-size: 13px;
  display: grid; place-items: center;
}
.lead-list b { color: #fff; font-size: 14px; }
.lead-list p { margin: 0; font-size: 12.5px; color: #93a1bb; }
.lead-score {
  font-size: 11px; padding: 4px 8px; border-radius: 999px;
  background: rgba(255,255,255,.1); color: #c7d0e0; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.lead-score.hot  { background: rgba(239,68,68,.2); color: #fca5a5; }
.lead-score.warm { background: rgba(245,158,11,.2); color: #fcd34d; }
.task-list li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: #c7d0e0; padding: 6px 0; }
.task-list input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }

/* ===================== TESTIMONIALS ===================== */
.testimonials { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Marquee viewport — clips the scrolling track horizontally and fades both
   edges via a mask so cards seem to drift on/off-screen rather than pop in.
   Vertical overflow stays visible so cards scaled up on hover don't get
   clipped at the top/bottom of the strip. */
.testimonial-marquee {
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  /* Two-stop fade: solid centre, transparent ~90px on each edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
  padding: 32px 0;   /* breathing room above/below for the scale-up state */
}

/* Sliding track — width fits all 16 cards (8 unique + 8 cloned) so the
   loop wraps seamlessly when we translate by exactly -50% (one full set).
   Steady single rate (no hover-time speed change) so the loop point can
   never tear from animation-duration being re-set mid-flight. */
.testimonial-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: testimonialDrift 90s linear infinite;
}
@keyframes testimonialDrift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Cards — fixed width, no resting border or shadow. KEY: we use the
   individual transform properties (translate / rotate / scale) instead of
   composing everything inside the `transform` shorthand. That way the
   dance animation owns translate+rotate while the hover transition owns
   scale alone — they never overwrite each other, so no jump on
   mouseleave and no compose-related jitter. */
.testimonial-track blockquote {
  position: relative;
  flex: 0 0 320px;
  margin: 0;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 24px;
  cursor: default;
  scale: 1;
  overflow: hidden;        /* clip the watermark logo to the panel */
  transform-origin: center;
  transition:
    scale .4s ease-out,
    background-color .4s ease,
    color .4s ease,
    border-color .35s ease;
  will-change: translate, rotate, scale;
  animation: testimonialDanceLean 5.2s ease-in-out infinite;
}

/* Watermark logo that fades into the bottom-right corner on hover.
   `filter: brightness(0) invert(1)` recolors any source PNG to pure
   white, then opacity carries the "transparent white" appearance. */
.testimonial-track blockquote::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 8px;
  width: 86px;
  height: 86px;
  background: url("images/under-budgie-logo-transparent.png") no-repeat right bottom / contain;
  filter: brightness(0) invert(1);
  opacity: 0;
  translate: 14px 14px;
  rotate: -10deg;
  transition:
    opacity .55s ease .05s,
    translate .55s cubic-bezier(.34, 1.5, .64, 1) .05s,
    rotate   .55s cubic-bezier(.34, 1.5, .64, 1) .05s;
  pointer-events: none;
}

/* Pair-by-index choreography:
   - Odd cards (1, 3, 5, 7…) lean to the RIGHT during their reach beat
   - Even cards (2, 4, 6, 8…) lean LEFT
   When a pair shares timing, they reach toward each other on the same beat
   and visually "tap." Cards in different pairs run different durations so
   the strip overall reads as offset / asynchronous. */
.testimonial-track blockquote:nth-child(even) { animation-name: testimonialDanceLeanMirror; }

/* Pair timing groups — pairs (1,2) (3,4) (5,6) etc. share duration+delay so
   each pair taps in sync, but pairs are out of phase with each other. */
.testimonial-track blockquote:nth-child(4n+1),
.testimonial-track blockquote:nth-child(4n+2) { animation-duration: 5.2s; animation-delay: 0s; }
.testimonial-track blockquote:nth-child(4n+3),
.testimonial-track blockquote:nth-child(4n+4) { animation-duration: 6.4s; animation-delay: -1.9s; }
.testimonial-track blockquote:nth-child(8n+5),
.testimonial-track blockquote:nth-child(8n+6) { animation-duration: 5.7s; animation-delay: -3.1s; }
.testimonial-track blockquote:nth-child(8n+7),
.testimonial-track blockquote:nth-child(8n+8) { animation-duration: 6.1s; animation-delay: -0.6s; }

/* Dance keyframes — only touch `translate` and `rotate` so they cannot
   conflict with the hover `scale` transition. Bob + sway + reach-right
   beat at 42% (for the "tap" on the right-hand neighbour). */
@keyframes testimonialDanceLean {
  0%   { translate: 0 0;     rotate: 0deg; }
  15%  { translate: 0 -5px;  rotate: .6deg; }
  30%  { translate: 3px -2px; rotate: 1.4deg; }
  42%  { translate: 6px 0;   rotate: 2deg; }   /* reach right */
  54%  { translate: 3px -2px; rotate: 1.2deg; }
  68%  { translate: -2px -4px; rotate: -.7deg; }
  82%  { translate: -1px 4px; rotate: -1.1deg; }
  100% { translate: 0 0;     rotate: 0deg; }
}
@keyframes testimonialDanceLeanMirror {
  0%   { translate: 0 0;     rotate: 0deg; }
  15%  { translate: 0 -5px;  rotate: -.6deg; }
  30%  { translate: -3px -2px; rotate: -1.4deg; }
  42%  { translate: -6px 0;  rotate: -2deg; }  /* reach left */
  54%  { translate: -3px -2px; rotate: -1.2deg; }
  68%  { translate: 2px -4px; rotate: .7deg; }
  82%  { translate: 1px 4px; rotate: 1.1deg; }
  100% { translate: 0 0;     rotate: 0deg; }
}

.testimonial-track p {
  font-family: var(--serif); font-size: 17px; line-height: 1.45; margin: 0 0 14px;
  transition: color .4s ease;
  position: relative;       /* stack above the watermark */
  z-index: 1;
}
.testimonial-track footer {
  color: var(--muted); font-size: 13px;
  transition: color .4s ease;
  position: relative;
  z-index: 1;
}

/* Hover — smaller pop than before (1.38 → 1.18) and ONLY scale. The dance
   keeps running underneath so the card stays alive while highlighted.
   Background flips to brand green (logo accent), text reads white, agency
   line softens to light grey, watermark logo fades into the bottom-right. */
.testimonial-track blockquote:hover {
  scale: 1.18;
  z-index: 3;
  background-color: var(--accent);
  border-color: transparent;
}
.testimonial-track blockquote:hover p {
  color: #fff;
}
.testimonial-track blockquote:hover footer {
  color: rgba(255, 255, 255, .78);
}
.testimonial-track blockquote:hover::after {
  opacity: .26;
  translate: 0 0;
  rotate: 0deg;
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-track,
  .testimonial-track blockquote { animation: none; translate: 0 0; rotate: 0; }
  .testimonial-track blockquote { transition: none; scale: 1; }
  .testimonial-track blockquote:hover { scale: 1.04; }
}

/* Mobile (≤820px) — shrink the "What agencies say" carousel panels and
   their text by ~10% so the strip reads less dominant on narrow screens. */
@media (max-width: 820px) {
  .testimonial-track blockquote {
    flex-basis: 288px;       /* 320 × 0.9 */
    padding: 22px;           /* 24 × 0.9 */
  }
  .testimonial-track blockquote::after {
    width: 77px;             /* 86 × 0.9 */
    height: 77px;
  }
  .testimonial-track p {
    font-size: 15px;         /* 17 × 0.9 */
    margin-bottom: 13px;     /* 14 × 0.9 */
  }
  .testimonial-track footer {
    font-size: 12px;         /* 13 × 0.9 */
  }
}

/* ===================== CTA ===================== */
.cta-section {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-700) 60%, var(--accent-700) 130%);
  color: #fff; padding: 64px 0;
}
.cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-inner h2 { font-family: var(--script); font-weight: 400; font-size: 48px; margin: 0 0 6px; line-height: 1; }
.cta-inner p { margin: 0; opacity: .9; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-section .button-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.cta-section .button-secondary:hover { background: rgba(255,255,255,.1); }

/* ===================== FOOTER ===================== */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 56px 0 24px; }
/* Footer brand mark is rendered as a flat light-grey version of the
   colour logo (global, every page with a footer). brightness(0) collapses
   it to a solid silhouette while preserving the PNG's transparency, then
   invert() lifts that silhouette to light grey. */
.site-footer .brand-logo {
  filter: brightness(0) invert(0.6);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.footer-grid h5 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; color: var(--ink); }
.footer-grid a { display: block; padding: 4px 0; font-size: 14px; color: var(--ink-soft); }
.footer-grid a:hover { color: var(--primary); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--muted); }
.footer-links { display: flex; gap: 22px; }
.footer-links a { font-size: 13px; color: var(--muted); }
.footer-links a:hover { color: var(--ink); }

/* ===================== MODAL — dreamy zoom-jiggle ============================
   Open: ~850ms multi-stage spring (overshoot → undershoot → small rebound →
   settle) with a faint rotation + Y drift for an organic floaty feel.
   Close: smooth slow fade + scale-down (~480ms), no jiggle.
   Same effect powers every modal (property, listing editor, calendar, task,
   comments, lead) — driven entirely by toggling `modal.hidden`. */

.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid !important;        /* keep grid layout even while hidden */
  place-items: center;
  padding: 24px;
  /* Backdrop fades; visibility flip happens AFTER the fade-out completes. */
  opacity: 1;
  visibility: visible;
  transition:
    opacity    .42s ease,
    visibility 0s linear 0s;
}
.modal[hidden] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity    .42s ease,
    visibility 0s linear .42s;
}

/* Card — base / exit state. Slight scale-down + tiny float-up = exit. */
.modal-card {
  opacity: 1;
  transform: scale(1) translateY(0) rotate(0);
  transform-origin: 50% 42%;
  /* Exit transition (no jiggle on close — just a soft float-out) */
  transition:
    transform .48s cubic-bezier(.4, .0, .25, 1),
    opacity   .38s ease;
  will-change: transform, opacity, filter;
}
.modal[hidden] .modal-card {
  opacity: 0;
  transform: scale(.94) translateY(-4px) rotate(.2deg);
  filter: blur(2px);
}

/* Open animation — runs every time modal becomes visible. The keyframes
   handle all motion; transitions above handle the close. */
.modal:not([hidden]) .modal-card {
  animation: cardDreamyJiggle .86s ease-out both;
}

@keyframes cardDreamyJiggle {
  0%   { opacity: 0;   transform: scale(.84) translateY(16px) rotate(-.7deg); filter: blur(6px); }
  18%  { opacity: .9;  transform: scale(.995) translateY(-2px) rotate(.45deg); filter: blur(1px); }
  32%  { opacity: 1;   transform: scale(1.045) translateY(-3px) rotate(-.28deg); filter: blur(0); }
  48%  { opacity: 1;   transform: scale(.984) translateY(2.5px) rotate(.18deg); }
  62%  { opacity: 1;   transform: scale(1.022) translateY(-1.4px) rotate(-.10deg); }
  76%  { opacity: 1;   transform: scale(.996) translateY(.7px) rotate(.05deg); }
  88%  { opacity: 1;   transform: scale(1.006) translateY(-.3px) rotate(-.02deg); }
  100% { opacity: 1;   transform: scale(1) translateY(0) rotate(0); }
}

.modal-backdrop {
  transition: background .42s ease, backdrop-filter .42s ease;
}

/* Respect reduced-motion preferences — show without the jiggle */
@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal-card,
  .modal-backdrop { transition-duration: .15s !important; }
  .modal:not([hidden]) .modal-card { animation: none !important; }
}

/* ===================== AUTH PAGE (login.html) ===================== */
.auth-body {
  min-height: 100vh;
  background:
    radial-gradient(60% 60% at 0% 0%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 60%),
    radial-gradient(50% 50% at 100% 100%, color-mix(in srgb, #7c3aed 22%, transparent), transparent 60%),
    var(--bg);
  display: flex; flex-direction: column;
}
.auth-main {
  flex: 1;
  display: grid; place-items: center;
  padding: 56px 24px;
}
.auth-shell { width: 100%; max-width: 460px; }
.auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px 28px;
  box-shadow: var(--shadow-lg);
}
.auth-head { text-align: center; margin-bottom: 24px; }
.auth-logo {
  display: block; height: 180px; width: auto; margin: 0 auto 16px;
  object-fit: contain;
  background: transparent;
}
.auth-head h1 {
  font-family: var(--script); font-weight: 400;
  font-size: 44px; margin: 0 0 6px; letter-spacing: 0; line-height: 1;
}
.auth-head p { margin: 0; font-size: 14px; }
.auth-form { display: grid; gap: 6px; }
.auth-form label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; margin-top: 10px;
}
.auth-form input[type="text"],
.auth-form input[type="password"] {
  height: 46px; padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink);
  font-size: 15px; font-weight: 500; outline: none;
  transition: border .15s, box-shadow .15s;
}
.auth-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.pass-wrap { position: relative; }
.pass-wrap input { width: 100%; padding-right: 44px; }
.pass-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-soft); font-size: 16px;
}
.pass-toggle:hover { background: var(--surface-2); }

.auth-submit {
  margin-top: 18px; width: 100%; height: 48px;
}
.auth-submit:disabled {
  background: var(--line-strong); box-shadow: none;
  cursor: not-allowed; transform: none;
}
.login-error {
  color: var(--danger); font-size: 13px;
  margin: 12px 0 0; text-align: center; font-weight: 600;
}
.login-hint {
  color: var(--muted); font-size: 12.5px; margin: 8px 0 0; text-align: center;
}

.auth-meta {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px dashed var(--line);
  display: flex; justify-content: center; gap: 16px;
  flex-wrap: wrap;
}
.auth-meta-row {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
}
.auth-meta-row .dot { width: 8px; height: 8px; }

/* ===================== SLIDE-TO-VERIFY ===================== */
.slide-verify {
  margin-top: 16px;
  user-select: none;
  -webkit-user-select: none;
}
.slide-verify-track {
  position: relative;
  height: 38px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.slide-verify-text {
  font-size: 12.5px; font-weight: 600;
  color: var(--muted);
  letter-spacing: .04em;
  pointer-events: none;
  transition: color .2s;
}
.slide-verify-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: 0;
  display: grid; place-items: center;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(47,109,246,.4);
  touch-action: none;
}
.slide-verify-thumb:active { cursor: grabbing; }
.slide-verify-thumb:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.slide-verify[data-state="dragging"] .slide-verify-track {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--primary) 35%, var(--surface-2)),
    var(--surface-2));
}
.slide-verify[data-state="verified"] .slide-verify-track {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  border-color: var(--accent);
}
.slide-verify[data-state="verified"] .slide-verify-thumb {
  background: var(--accent);
  box-shadow: 0 2px 8px rgba(22,163,74,.45);
  cursor: default;
}
.slide-verify[data-state="verified"] .slide-verify-text {
  color: var(--accent); font-weight: 700;
}

/* ===================== DASHBOARD PAGE (dashboard.html) — LIGHT THEME ===================== */
.dash-body {
  min-height: 100vh;
  background:
    radial-gradient(60% 60% at 0% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 60%),
    radial-gradient(50% 50% at 100% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--bg);
  color: var(--ink);
}

/* Header on light dashboard */
.dash-body .site-header {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom: 1px solid var(--line);
}
/* Sign-out shows its text label by default; the door icon is hidden until
   the mobile rules swap them (icon-only on mobile to save header width). */
.logout-icon { display: none; }
.dash-body .nav-links a { color: var(--ink-soft); position: relative; padding: 8px 0; }
.dash-body .nav-links a:hover { color: var(--ink); }
.dash-body .nav-links a.active { color: var(--primary); font-weight: 600; }
.dash-body .nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
}
.dash-body .icon-btn {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.dash-body .icon-btn:hover { background: var(--surface-2); }
.dash-body .cta-button {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
}
.dash-body .cta-button:hover { background: var(--primary-700); border-color: var(--primary-700); }

.dash-section { padding: 56px 0; background: transparent !important; }
.dash-section + .dash-section { padding-top: 0; }
.dash-section .eyebrow { color: var(--primary); }

.muted-on-dark { color: var(--muted); font-size: 13.5px; }

.backend-header.inline {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px; margin-bottom: 20px;
}
.dash-body .backend-header h2 {
  font-family: var(--script); font-weight: 400; font-size: 52px;
  margin: 4px 0; color: var(--ink); line-height: 1; letter-spacing: 0;
}
.dash-body .backend-header h2 #agentName { color: var(--primary); }
.dash-body .backend-header h3 {
  font-family: var(--serif); font-size: 20px;
  margin: 0; color: var(--ink);
}

/* KPI cards — white tiles with logo-color accents */
.dash-body .kpi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
}
.dash-body .kpi-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}
.dash-body .kpi-label { color: var(--muted); }
.dash-body .kpi-card strong { color: var(--ink); }
.dash-body .kpi-trend { color: var(--muted); }
.dash-body .kpi-trend.up   { color: var(--accent-700); }
.dash-body .kpi-trend.down { color: var(--danger); }

/* Inventory panel */
.dash-body .backend-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  display: grid; gap: 22px;
}

/* Tabs */
.dash-body .tabs { border-bottom: 1px solid var(--line); }
.dash-body .tab { color: var(--muted); }
.dash-body .tab:hover { color: var(--ink); }
.dash-body .tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Filters (light) */
.dash-body .filter-item label { color: var(--muted); }
.dash-body .filter-item select,
.dash-body .filter-item input {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.dash-body .filter-item select:focus,
.dash-body .filter-item input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.dash-body .filter-item select option { color: var(--ink); }

/* Property table (light) */
.dash-body .table-scroll {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.dash-body .property-table { color: var(--ink); }
.dash-body .property-table th {
  background: var(--grey-50);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.dash-body .property-table th:hover { color: var(--primary); }
.dash-body .property-table td { border-bottom: 1px solid var(--line); }
.dash-body .property-table tbody tr:last-child td { border-bottom: 0; }
/* Zebra striping — slight grey on every 2nd row for visual contrast. */
.dash-body .property-table tbody tr:nth-child(even) { background: var(--grey-50); }
.dash-body .property-table tbody tr:hover,
.dash-body .property-table tbody tr:nth-child(even):hover { background: var(--surface-2); }
.dash-body .property-table .row-stack { display: flex; flex-direction: column; }
.dash-body .property-table .row-title { color: var(--ink); font-weight: 700; }
.dash-body .property-table .row-sub   { color: var(--muted); font-size: 12.5px; }
.dash-body .property-table .empty     { color: var(--muted); text-align: center; padding: 32px; }

/* Status pills on light */
.dash-body .status.available { background: var(--accent-50); color: var(--accent-700); }
.dash-body .status.pending   { background: #fef3c7; color: #92660a; }
.dash-body .status.sold      { background: #fee2e2; color: #991b1b; }

/* Action buttons (light) */
.dash-body .action-btn { color: var(--primary); }
.dash-body .action-btn:hover { background: var(--primary-50); color: var(--primary-700); }

/* Activity cards */
.dash-body .activity-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.dash-body .activity-card h4 { color: var(--ink); }
.dash-body .lead-list b { color: var(--ink); }
.dash-body .lead-list li:hover { background: var(--surface-2); }
.dash-body .lead-score      { background: var(--surface-2); color: var(--ink-soft); }
.dash-body .lead-score.hot  { background: #fee2e2; color: #991b1b; }
.dash-body .lead-score.warm { background: #fef3c7; color: #92660a; }
.dash-body .task-list li { color: var(--ink-soft); }
.dash-body .task-list input[type="checkbox"] { accent-color: var(--primary); }

/* Compact footer */
.site-footer.compact { padding: 24px 0; }
.site-footer.compact .footer-bottom { padding-top: 0; }
.dash-body .site-footer.compact {
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.dash-body .site-footer.compact p,
.dash-body .site-footer.compact a { color: var(--muted); }
.dash-body .site-footer.compact a:hover { color: var(--primary); }

/* Responsive auth */
@media (max-width: 520px) {
  .auth-card { padding: 28px 22px 22px; }
  .auth-head h1 { font-size: 22px; }
}

/* ===================== INVENTORY ACTIONS BAR ===================== */
.inv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-actions .button { height: 38px; padding: 0 14px; font-size: 13px; }

/* ===================== LISTING EDITOR MODAL ===================== */
.editor-card {
  max-width: 760px; width: 100%;
  max-height: 92vh;
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.editor-head {
  padding: 22px 26px 0;
  border-bottom: 1px solid var(--line);
}
.editor-head h3 {
  font-family: var(--serif);
  font-size: 22px; margin: 0 0 12px;
  color: var(--ink);
}
.editor-tabs { display: flex; gap: 2px; }
.ed-tab {
  background: transparent; border: 0;
  padding: 10px 14px;
  font-size: 14px; font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  cursor: pointer; transition: color .15s;
}
.ed-tab:hover { color: var(--ink); }
.ed-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.count-badge {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 18px; padding: 0 6px;
  background: var(--surface-2); color: var(--ink-soft);
  border-radius: 999px; font-size: 11px; font-weight: 700;
  margin-left: 4px;
}
.ed-tab.active .count-badge { background: var(--primary-50); color: var(--primary); }

.editor-body {
  flex: 1; overflow-y: auto;
  padding: 22px 26px;
}
.editor-pane[hidden] { display: none; }
.ed-help { margin: 0 0 14px; }

.editor-foot {
  display: flex; gap: 8px; align-items: center;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.ed-spacer { flex: 1; }
.button-danger {
  background: #fee2e2; color: #991b1b;
  border: 1px solid #fecaca;
  height: 38px; padding: 0 14px; font-size: 13px;
}
.button-danger:hover { background: #fecaca; }

/* Form grid */
.ed-form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ed-form-grid > .full { grid-column: 1 / -1; }
.ed-form-grid > .ed-field:not(.full) { grid-column: span 2; }
.ed-form-grid .ed-field:nth-child(n+5):not(.full) { grid-column: span 1; }

.ed-field label {
  display: block;
  font-size: 11.5px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 4px;
}
.ed-field label .hint {
  text-transform: none; letter-spacing: 0;
  color: var(--muted); font-weight: 400; margin-left: 6px;
}
.ed-field input,
.ed-field select,
.ed-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  outline: none;
  transition: border .15s, box-shadow .15s;
}
.ed-field input:focus,
.ed-field select:focus,
.ed-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.ed-field textarea { resize: vertical; min-height: 88px; font-family: inherit; }

/* Status segmented toggle — Sold / Pending / Active inside the listing editor */
.status-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--surface-2);
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  width: fit-content;
}
.status-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.status-toggle-btn:hover { color: var(--ink); }
.status-toggle-btn.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.status-toggle-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: transform .15s ease;
}
.status-dot.status-active  { background: var(--accent); }
.status-dot.status-pending { background: var(--warn); }
.status-dot.status-sold    { background: var(--danger); }
.status-toggle-btn:not(.active) .status-dot { opacity: 0.55; }
.status-toggle-btn.active .status-dot { transform: scale(1.15); }

/* ===================== CUSTOM DROPDOWN (lead "Interested in") ===================== */
.custom-select {
  position: relative;
  width: 100%;
}
.cs-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-weight: 500;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cs-trigger:hover { border-color: var(--primary); }
.cs-trigger.open,
.cs-trigger:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.cs-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.cs-arrow {
  color: var(--muted);
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform .2s ease;
}
.cs-trigger.open .cs-arrow { transform: rotate(180deg); }

.cs-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
}
.cs-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
  transition: background .12s ease, color .12s ease;
}
.cs-option:hover,
.cs-option:focus {
  background: var(--primary-50);
  color: var(--primary);
  outline: none;
}
.cs-opt-title {
  display: block;
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  margin-bottom: 1px;
}
.cs-opt-addr {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.cs-opt-addr strong {
  font-weight: 700;
  color: var(--ink);     /* bolded city pops against grey address */
}
.cs-option:hover .cs-opt-title,
.cs-option:hover .cs-opt-addr,
.cs-option:hover .cs-opt-addr strong {
  color: var(--primary);
}
.cs-option-archived .cs-opt-title { color: var(--muted); font-weight: 500; }
.cs-option-archived em { font-style: italic; opacity: .8; }

/* Image manager */
.ed-empty { color: var(--muted); font-size: 13.5px; padding: 12px 0; margin: 0; }
.ed-image-list { display: grid; gap: 8px; margin-bottom: 16px; }
.ed-image-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.ed-image-row img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
}
.ed-image-row .ed-image-url {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  background: var(--surface);
  color: var(--ink-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ed-image-actions { display: flex; gap: 4px; }
.ed-image-actions .action-btn {
  padding: 6px 10px; font-size: 13px; line-height: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 6px;
}
.ed-image-actions .action-btn:hover { background: var(--surface-2); color: var(--ink); }
.ed-image-actions .action-btn.danger { color: var(--danger); }
.ed-image-actions .action-btn.danger:hover { background: #fee2e2; border-color: #fecaca; }
.ed-image-actions .action-btn:disabled { opacity: .35; cursor: not-allowed; }

.ed-image-add {
  display: flex; gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  flex-wrap: wrap;
  align-items: center;
}
.ed-image-add input[type="url"] {
  flex: 1; min-width: 200px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  outline: none;
}
.ed-image-add input[type="url"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.file-button { cursor: pointer; }

/* Comments */
.ed-comments-list { display: grid; gap: 10px; margin-bottom: 16px; }
.ed-comment {
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
}
.ed-comment-head {
  display: grid; grid-template-columns: 32px 1fr auto;
  gap: 10px; align-items: center; margin-bottom: 6px;
}
.ed-comment-head .avatar { width: 32px; height: 32px; font-size: 11px; }
.ed-comment-head b { font-size: 13.5px; color: var(--ink); }
.ed-comment-head p { margin: 0; font-size: 11.5px; color: var(--muted); }
.ed-comment-body { margin: 0; font-size: 13.5px; color: var(--ink-soft); white-space: pre-wrap; line-height: 1.45; }

.ed-comments-add {
  display: grid; gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.ed-comments-add textarea {
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13.5px;
  resize: vertical;
  outline: none;
  background: var(--surface);
  color: var(--ink);
}
.ed-comments-add textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.ed-comments-add button { justify-self: end; height: 40px; padding: 0 18px; }

@media (max-width: 720px) {
  .ed-form-grid { grid-template-columns: 1fr 1fr; }
  .ed-form-grid > .ed-field:not(.full) { grid-column: span 1; }
  .editor-body { padding: 18px; }
  .editor-foot { padding: 12px 16px; }
}

/* ===================== TO-DO + CALENDAR (dashboard) ===================== */
.todo-shell {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 22px;
  align-items: start;
}
.todo-main { min-width: 0; }
.todo-side { position: sticky; top: 92px; }

.todo-toolbar {
  /* Brand-green header band. Top corners squared (flush with the page band
     above), bottom corners rounded so it reads as a "header chip" sitting
     on top of the kanban board. */
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(40, 167, 69, .22);
}
.todo-toolbar-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
/* Eyebrow + title both read white on green — keep the eyebrow slightly
   softer so the title carries more emphasis. */
.todo-toolbar .eyebrow { color: rgba(255, 255, 255, .82); }
.todo-toolbar .todo-title {
  font-family: var(--script); font-weight: 400; font-size: 44px;
  margin: 4px 0 0; color: #fff; line-height: 1; letter-spacing: 0;
}

/* Add Task button inverts — white background with accent-green text so it
   pops against the green band but stays on-brand. */
.todo-toolbar .button-primary {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 6px 16px rgba(10, 15, 26, .18);
}
.todo-toolbar .button-primary:hover {
  background: #f1fbf4;
  color: var(--accent-700, #1e8538);
  transform: translateY(-1px);
}

.todo-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, .35);
}

/* Filter chips re-skinned for the green header — translucent white pills
   with white text. Active chip flips to solid white with accent text. */
.todo-toolbar .chip {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
}
.todo-toolbar .chip:hover {
  background: rgba(255, 255, 255, .24);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.todo-toolbar .chip.active {
  background: #fff;
  color: var(--accent);
  border-color: #fff;
}

.todo-search {
  flex: 1; min-width: 180px; max-width: 280px;
  margin-left: auto;
  height: 34px; padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 8px;
  font-size: 13px; outline: none;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
}
.todo-search::placeholder { color: var(--muted); }
.todo-search:focus {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

/* 3-column board — fixed-height columns with vertical scroll inside.
   Headers stay always visible; items beyond ~4 scroll inside the column. */
.todo-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
}
.todo-col {
  background: var(--grey-100);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  display: flex; flex-direction: column;
}
.col-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px; align-items: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.col-head h4 {
  margin: 0; font-size: 13px;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft);
}
.todo-col[data-col="todo"]  .col-head h4 { color: var(--primary); }
.todo-col[data-col="doing"] .col-head h4 { color: var(--warn); }
.todo-col[data-col="done"]  .col-head h4 { color: var(--accent-700); }
.todo-count {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}

/* Small grey scroll arrows in each column header (up + down) */
.col-scroll-arrows { display: flex; gap: 2px; }
.col-scroll {
  width: 22px; height: 22px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.col-scroll:hover {
  background: var(--surface-2);
  color: var(--primary);
  border-color: var(--primary);
}
.col-scroll:active { transform: scale(.92); }
.col-scroll:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.col-scroll svg { display: block; }

/* Items wrapper — fixed height fits ~4 cards safely; scrolls when overflowing.
   Items keep their order ("locked in place") — only the viewport scrolls. */
.todo-items {
  display: grid;
  gap: 8px;
  /* (4 cards × ~110px) + (3 gaps × 8px) ≈ 464px — pick a safe ceiling */
  max-height: 472px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.todo-items::-webkit-scrollbar { width: 6px; }
.todo-items::-webkit-scrollbar-track { background: transparent; }
.todo-items::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px;
}
.todo-items::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.todo-empty {
  margin: 0; color: var(--muted); font-size: 12.5px;
  padding: 12px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
}

/* Task card */
.todo-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 12px 8px;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, transform .15s, opacity .15s;
  cursor: pointer;
}
.todo-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.todo-card.greyed { opacity: .45; filter: grayscale(.6); }
.todo-card.greyed:hover { opacity: .65; }
.todo-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; margin-bottom: 4px;
}
.todo-card-title {
  font-size: 13.5px; color: var(--ink); line-height: 1.35; font-weight: 600;
}
.todo-date-chip {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 700;
  background: var(--primary-50); color: var(--primary);
  padding: 2px 8px; border-radius: 999px;
  white-space: nowrap;
}
.todo-card-desc {
  margin: 4px 0 6px; font-size: 12.5px; color: var(--ink-soft);
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.todo-card-meta { margin: 0 0 6px; font-size: 11px; color: var(--muted); }
.todo-card-attach {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 6px;
}
.todo-card-actions {
  display: flex; justify-content: space-between;
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed var(--line);
}
.todo-act {
  border: 0; background: transparent;
  width: 26px; height: 26px;
  border-radius: 6px;
  color: var(--ink-soft); font-size: 14px;
  display: grid; place-items: center;
  cursor: pointer; transition: background .15s, color .15s;
}
.todo-act:hover { background: var(--primary-50); color: var(--primary); }
.todo-act.danger:hover { background: #fee2e2; color: var(--danger); }

/* Inline date picker (appears on a card after clicking +Calendar) */
.todo-date-picker-active {
  display: block; width: 100%;
  margin-top: 8px; padding: 6px 10px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600;
  background: var(--primary-50); color: var(--primary);
  outline: none;
}
.todo-date-picker-active:focus {
  box-shadow: 0 0 0 3px var(--primary-50);
}

/* Attachment chips */
.td-attach-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2);
  color: var(--ink-soft);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  border: 1px solid var(--line);
  text-decoration: none;
  max-width: 160px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.td-attach-chip:hover { background: var(--primary-50); color: var(--primary); border-color: var(--primary); }

.td-attach-list {
  display: grid; gap: 6px;
  margin-bottom: 8px;
}
.td-attach-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 8px; align-items: center;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

/* ===================== MINI CALENDAR ===================== */
.cal-mini {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.cal-mini-head {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 4px; align-items: center;
  margin-bottom: 10px;
}
.cal-mini-head strong {
  text-align: center;
  font-size: 13px; color: var(--ink);
  font-family: var(--serif); font-weight: 700;
  letter-spacing: -.005em;
}
.cal-mini-btn, .cal-mini-expand {
  background: transparent; border: 0;
  width: 24px; height: 24px;
  border-radius: 6px;
  color: var(--ink-soft); font-size: 14px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
}
.cal-mini-btn:hover, .cal-mini-expand:hover { background: var(--surface-2); color: var(--primary); }
.cal-mini-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; margin-bottom: 4px;
}
.cal-mini-weekdays span {
  text-align: center; font-size: 10px;
  color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.cal-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cmini-cell {
  position: relative;
  aspect-ratio: 1;
  border: 0; background: transparent;
  border-radius: 6px;
  font-size: 11.5px; font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cmini-cell:hover:not([disabled]) { background: var(--primary-50); color: var(--primary); }
.cmini-cell.empty { cursor: default; }
.cmini-cell.today {
  background: var(--warn);
  color: #fff;
}
.cmini-cell.hasTasks::after { content: ""; }
.cmini-dot {
  position: absolute; bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--primary);
}
.cmini-cell.today .cmini-dot { background: #fff; }
.cal-mini-foot {
  display: flex; justify-content: space-between;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.cal-legend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--muted);
}
.cal-legend .dot { width: 6px; height: 6px; }

/* ===================== FULL CALENDAR MODAL ===================== */
.calendar-card {
  max-width: 1080px;
  width: 100%;
  max-height: 92vh;
  overflow: auto;
  padding: 22px 26px 26px;
  background: var(--surface);
}
.calendar-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px; margin-bottom: 18px;
}
.calendar-head h3 {
  font-family: var(--script); font-weight: 400; font-size: 44px; margin: 0; color: var(--ink); line-height: 1;
}
.calendar-nav { display: flex; gap: 6px; }
.calendar-nav .button { height: 38px; padding: 0 14px; font-size: 13px; }
.calendar-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.calendar-weekdays span {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 6px 8px;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(96px, auto);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--line);
  gap: 1px;
}
.cal-cell {
  background: var(--surface);
  padding: 6px 6px 8px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  transition: background .15s;
}
.cal-cell:hover { background: var(--grey-50); }
.cal-cell.out { background: var(--grey-50); cursor: default; }
.cal-cell.out:hover { background: var(--grey-50); }
.cal-cell.today { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.cal-cell.today .cal-cell-num {
  background: var(--primary); color: #fff;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px;
}
.cal-cell-num {
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
  padding: 2px 4px;
}
.cal-cell-tasks { display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.cal-task-chip {
  border: 0; text-align: left;
  background: var(--primary-50); color: var(--primary);
  padding: 3px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid var(--primary);
  transition: background .15s;
}
.cal-task-chip:hover { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.cal-task-chip.status-doing { background: #fef3c7; color: #92660a; border-left-color: var(--warn); }
.cal-task-chip.status-done  { background: var(--accent-50); color: var(--accent-700); border-left-color: var(--accent); text-decoration: line-through; }
.cal-task-chip.greyed { opacity: .45; filter: grayscale(.6); }
.cal-more { font-size: 10.5px; color: var(--muted); padding: 0 4px; }

.todo-editor-card { max-width: 600px; }

/* Responsive */
@media (max-width: 1080px) {
  .todo-shell { grid-template-columns: 1fr; }
  .todo-side { position: static; }
  .cal-mini { max-width: 320px; }
  .todo-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .todo-board { grid-template-columns: 1fr; }
  .calendar-grid { grid-auto-rows: minmax(72px, auto); }
  .cal-task-chip { font-size: 10px; }
}
.modal-backdrop { position: absolute; inset: 0; background: rgba(7,12,28,.6); backdrop-filter: blur(4px); }
.modal-card {
  position: relative; background: var(--surface); border-radius: var(--radius-lg);
  max-width: 920px; width: 100%; max-height: 86vh; overflow: auto; box-shadow: var(--shadow-lg);
}
.modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92);
  font-size: 22px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm);
}
.modal-body { padding: 0; }
.modal-detail-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; }
.modal-detail-grid .image-carousel { aspect-ratio: 4/3.2; border-radius: 0; }
.modal-info { padding: 26px; }
.modal-info h3 { font-family: var(--script); font-weight: 400; font-size: 42px; margin: 0 0 4px; line-height: 1; }
.modal-info .price { font-size: 26px; color: var(--primary); font-family: var(--serif); display: block; margin: 8px 0 14px; }
.modal-info .specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.modal-info .specs-grid > div { font-size: 14px; color: var(--ink-soft); }
.modal-info .specs-grid b { color: var(--ink); }
.modal-info p.desc { color: var(--ink-soft); font-size: 14.5px; margin: 16px 0; }
.modal-info .cta-row { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
/* Console owner-action row (Edit / Sold / Remove): equal-width buttons at a
   uniform height (button-danger is otherwise shorter than the others). */
.modal-info .console-cta-row .button { flex: 1 1 0; min-width: 90px; height: 42px; padding: 0 14px; font-size: 14px; }
.modal-info .console-cta-row .button[disabled] { opacity: .5; cursor: default; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1080px) {
  .property-grid, .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .filter-grid { grid-template-columns: repeat(3, 1fr); }
  .filter-item.search { grid-column: span 3; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .login-card { position: static; }
  .modal-detail-grid { grid-template-columns: 1fr; }
}
/* ===================== MOBILE OVERRIDES FOR FLOATING PANELS =====================
   The map legend overlay is fixed-position and covered the viewport on
   mobile, so it stays hidden — the .map-legend-chips inline group gives
   touch users the same filters. The results panel, however, is brought
   back on mobile (docked bottom via the max-width:720px rule) in a
   condensed form with a per-card icon rail. */
@media (max-width: 820px) {
  .map-overlay { display: none !important; }

  /* Reveal the inline mobile legend chips and lay them out as a wrapping
     row of compact pills. .legend-row is normally a full-width block list
     item inside the floating panel — override that here so the rows read
     as chips. */
  .chip-group.map-legend-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
  }
  .map-legend-chips .legend-row {
    width: auto;
    padding: 4px 10px 4px 5px;
    font-size: 12px;
    gap: 6px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    border-radius: 999px;
  }
  /* The desktop checkbox indicator on the right of each row reads as
     visual noise in a compact chip — drop it on mobile, the colored
     active highlight below signals selection on its own. */
  .map-legend-chips .legend-row::after { display: none; }
  .map-legend-chips .legend-ico {
    width: 18px; height: 18px;
  }
  .map-legend-chips .legend-ico svg {
    width: 11px; height: 11px;
  }

  /* When a filter is on the map, light the chip up in the filter's own
     color (matching the colored icon) so the user can tell at a glance
     which overlays are active. The neutral active state inherited from
     the desktop legend (primary-blue) doesn't distinguish between
     filters; this per-chip color makes the connection explicit. */
  .map-legend-chips .legend-row[data-map-filter="walkability"] { --chip-color: var(--accent); }
  .map-legend-chips .legend-row[data-map-filter="schools"]     { --chip-color: var(--primary); }
  .map-legend-chips .legend-row[data-map-filter="commute"]     { --chip-color: var(--warn); }
  .map-legend-chips .legend-row[data-map-filter="crime"]       { --chip-color: #5a2e91; }
  .map-legend-chips .legend-row[data-map-filter="parks"]       { --chip-color: #8b5a2b; }
  .map-legend-chips .legend-row.active {
    background: color-mix(in srgb, var(--chip-color) 14%, var(--surface));
    border-color: var(--chip-color);
    color: var(--chip-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--chip-color) 28%, transparent),
                0 2px 6px color-mix(in srgb, var(--chip-color) 25%, transparent);
  }
  .map-legend-chips .legend-row.active .legend-ico {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px var(--surface), 0 1px 3px rgba(10,15,26,.25);
  }

  /* Small caption that explains the toggle behavior. Sits at the end of
     the wrapping chip row — wraps to its own line on narrow screens. */
  .map-legend-hint {
    font-size: 11px;
    color: var(--muted);
    font-style: italic;
    align-self: center;
    padding-left: 2px;
  }

  /* Slim the property-type chips so they fit alongside the new legend
     chips without taking two stacked rows. */
  .map-chip-group { gap: 6px; margin: 0 0 10px; }
  .map-chip-group .chip {
    padding: 5px 11px;
    font-size: 12px;
    border-radius: 999px;
  }

  /* Stats tooltip below the map — populated on marker hover. Empty
     state collapses; populated state fades + slides in. */
  .map-hover-stats {
    margin-top: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
  }
  .map-hover-stats:empty { display: none; }
  .map-hover-stats.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .map-hover-stats .stats-title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    margin: 0 0 2px;
    line-height: 1.2;
  }
  .map-hover-stats .stats-address {
    color: var(--muted);
    font-size: 11px;
    margin: 0 0 8px;
  }
  .map-hover-stats .stats-specs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 6px 0;
    border-top: 1px dashed var(--line);
    border-bottom: 1px dashed var(--line);
  }
  .map-hover-stats .stats-price {
    font-family: var(--serif);
    color: var(--primary);
    font-weight: 700;
    font-size: 15px;
  }
  .map-hover-stats .stats-specs span:not(.stats-price) {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }
  .map-hover-stats .stats-region {
    color: var(--muted);
    font-size: 11px;
    margin-left: auto;
  }
  .map-hover-stats .stats-scores {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding-top: 8px;
  }
  .map-hover-stats .stats-scores > div {
    text-align: center;
    padding: 4px 2px;
    border-radius: 6px;
    background: var(--surface-2);
  }
  .map-hover-stats .stats-scores b {
    display: block;
    font-family: var(--num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.1;
  }
  .map-hover-stats .stats-scores .sc-unit {
    font-family: var(--sans);
    font-size: 8.5px;
    font-weight: 500;
    margin-left: 2px;
  }
  .map-hover-stats .stats-scores small {
    display: block;
    color: var(--muted);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 1px;
  }
  /* Color the dot per category, matching the legend chips */
  .map-hover-stats .stats-scores .sc-walk b   { color: var(--accent); }
  .map-hover-stats .stats-scores .sc-school b { color: var(--primary); }
  .map-hover-stats .stats-scores .sc-commute b{ color: var(--warn); }
  .map-hover-stats .stats-scores .sc-crime b  { color: #5a2e91; }
  .map-hover-stats .stats-scores .sc-parks b  { color: #8b5a2b; }

  /* ---- Condensed result card + per-card icon rail (mobile) ---- */
  /* Desktop's global-filter metric rows are hidden here; each card gets
     its own rail of 5 colored toggles instead. */
  .map-result-metrics { display: none; }

  .map-result {
    grid-template-columns: 46px 1fr auto;
    gap: 9px;
    padding: 7px;
    align-items: center;
  }
  .map-result img { width: 46px; height: 46px; }
  .map-result-body { gap: 1px; }
  .map-result-body strong { font-size: 12.5px; }
  .map-result-address { font-size: 10.5px; padding: 2px 0; }
  .map-result-foot { margin-top: 3px; }
  .map-result-price { font-size: 12px; }
  .map-result-region { font-size: 9.5px; padding: 1px 7px; }
  /* Rank badge slightly smaller so the condensed card stays tidy */
  .map-result-rank { transform: scale(.88); transform-origin: top left; }

  /* The per-card stats stack — only the rows whose rail icon is lit. */
  .map-result-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 3px 0 1px;
  }
  .map-result-stats:empty { display: none; }
  .map-result-stats .metric-row {
    font-size: 11px;
    padding: 2px 7px 2px 5px;
  }
  .map-result-stats .metric-row-ico { width: 14px; height: 14px; }
  .map-result-stats .metric-row-ico svg { width: 9px; height: 9px; }

  /* Vertical rail of 5 small colored category toggles down the card's
     right edge. Inactive = hollow outline in the category color; active
     = filled, so selection state reads at a glance. */
  .map-result-iconrail {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-self: center;
    flex-shrink: 0;
  }
  .map-result-iconrail .mr-ico {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: var(--surface);
    border: 1.5px solid color-mix(in srgb, var(--c) 40%, var(--line));
    color: color-mix(in srgb, var(--c) 55%, var(--muted));
    transition: background .15s ease, color .15s ease,
                border-color .15s ease, box-shadow .15s ease, transform .1s ease;
  }
  .map-result-iconrail .mr-ico svg {
    width: 13px;
    height: 13px;
    display: block;
  }
  .map-result-iconrail .mr-ico:active { transform: scale(.9); }
  .map-result-iconrail .mr-ico.active {
    background: var(--c);
    border-color: var(--c);
    color: #fff;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 28%, transparent),
                0 1px 4px color-mix(in srgb, var(--c) 35%, transparent);
  }

  /* ---- Main listings grid: same rail, vertical-card variant ----
     .property-card is a vertical flex column (image over content). The
     rail is its 3rd child; float it as a pill on the card's right edge,
     vertically centered, with a translucent backing so it reads over
     either the photo or the content. Content gets right padding so text
     never slides under the rail. */
  .property-card { position: relative; }
  .property-card .map-result-iconrail {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 3;
    gap: 6px;
    padding: 6px 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
  }
  .property-card .property-content { padding-right: 50px; }

  /* Per-card stats stack in the listings grid — collapses when no icon
     is lit so the card stays condensed by default. */
  .property-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
  }
  .property-stats:empty { display: none; }
  .property-stats .metric-row {
    font-size: 11.5px;
    padding: 3px 8px 3px 6px;
  }
  .property-stats .metric-row-ico { width: 15px; height: 15px; }
  .property-stats .metric-row-ico svg { width: 10px; height: 10px; }

  /* Condense the listing card itself on mobile for quicker scanning. */
  .property-card .media-block { aspect-ratio: 16/10; }
  .property-content { padding: 14px 16px 16px; }
  .property-content h3 { font-size: 17px; }
  .property-card .property-features { gap: 5px; }

  /* ---- Property modal: same colored selectors, inline row ----
     The modal-info is a vertical column, so lay the rail out as a
     horizontal wrapping row of toggles between the specs grid and the
     description. Reuses .mr-ico styling; just resets the vertical /
     absolute layout the panel + grid variants set. */
  .modal-stat-selectors {
    margin: 16px 0 4px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .modal-stat-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .modal-info .map-result-iconrail {
    position: static;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-self: flex-start;
    gap: 8px;
    padding: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .modal-info .map-result-iconrail .mr-ico {
    width: 30px;
    height: 30px;
  }
  .modal-info .map-result-iconrail .mr-ico svg {
    width: 15px;
    height: 15px;
  }
  .modal-info .property-stats { margin-top: 10px; }
}

/* Hide the hover-stats panel + the modal's mobile stat selectors on
   desktop — the floating overlay + leaflet tooltips cover that surface
   there, and the modal's rail is a mobile convenience only. */
@media (min-width: 821px) {
  .map-hover-stats { display: none !important; }
  .modal-stat-selectors { display: none !important; }
}

@media (max-width: 820px) {
  /* Hamburger appears; original inline nav-links hide — replaced by the
     full-viewport .mobile-menu overlay rendered after the header. */
  .nav-hamburger { display: inline-flex; }
  .nav-bar { position: relative; }
  .nav-links { display: none; }
  /* Hide the desktop "SE Login" CTA on mobile — it lives in the overlay. */
  .nav-actions { display: none; }
  body.mobile-menu-open { overflow: hidden; }

  /* --- Dashboard ("Console") mobile nav --------------------------------
     No hamburger here (it's removed from the Console markup). The nav sits to
     the RIGHT of the logo: the logo is a fixed column on the left, the links
     are a horizontal block beside it that WRAPS onto ~two lines so all of
     them stay visible (no sideways scrolling), and Sign out is pinned to the
     right. Scoped to .dash-body so the public site's hamburger + overlay are
     untouched. */
  /* Two rows: the logo (and the Sign-out door icon) sit on the top row; the
     links drop to the row BELOW the logo, full width. */
  .dash-body .nav-bar {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;   /* logo left, Sign-out right (row 1) */
    height: auto;
    row-gap: 10px;
    column-gap: 10px;
    padding-top: 10px;
    padding-bottom: 12px;
  }
  .dash-body .nav-bar .brand   { flex: 0 0 auto; order: 1; }
  .dash-body .nav-bar .brand-logo { height: 46px; }
  .dash-body .nav-actions      { order: 2; flex: 0 0 auto; align-items: center; display: flex; }
  /* Sign out collapses to a compact door icon on the top row. */
  .dash-body .logout-text { display: none; }
  .dash-body .logout-icon { display: block; }
  .dash-body .nav-actions .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
  }

  /* Links: dropped to their own full-width row below the logo, wrapping onto
     ~two lines as alternating blue/green pill buttons (white text on both).
     Overrides the global mobile `.nav-links { display:none }`, .dash-body only. */
  .dash-body .nav-links {
    order: 3;
    flex-basis: 100%;            /* forces the links onto the next row */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
  }
  .dash-body .nav-links a {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 8px 14px;
    /* Match the site's standard button radius (--radius-sm) rather than a
       full pill, so the Console nav reads as buttons like the rest of the UI. */
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
  }
  /* Alternate the pill colours: odd = royal blue, even = leafy green. */
  .dash-body .nav-links a:nth-child(odd)  { background: var(--primary); }
  .dash-body .nav-links a:nth-child(even) { background: var(--accent); }
  .dash-body .nav-links a:hover { color: #fff; filter: brightness(.93); }
  /* Active screen: invert to a white fill with a grey stroke and dark-grey
     text so it reads as the selected button (overrides the blue/green fill
     set by the nth-child rules above). Drop the desktop underline. */
  .dash-body .nav-links a.active {
    background: var(--surface);
    color: var(--ink-soft);
    box-shadow: inset 0 0 0 2px var(--line-strong);
  }
  .dash-body .nav-links a.active:hover { color: var(--ink); filter: none; }
  .dash-body .nav-links a.active::after { display: none; }
  .split-grid, .section-header { grid-template-columns: 1fr; gap: 32px; }
  /* Mobile hero: collapse the desktop two-column split to a single column,
     and slot the full-bleed featured carousel BETWEEN the headline and the
     search form so the photo lands above the fold and the search/stats sit
     below the carousel. Flatten .hero-copy with display:contents so its
     two children become direct flex items of .hero-grid alongside
     .hero-panel — that lets a single `order` pass reshuffle all three. */
  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .hero-copy { display: contents; }
  .hero-copy-lead    { order: 1; }
  .hero-panel        { order: 2; margin-top: 0; }
  .hero-copy-actions { order: 3; gap: 22px; }
  .hero-copy h1 {
    margin-bottom: 4px;
    font-size: clamp(42px, 11.5vw, 56px);
    line-height: 1.0;
    letter-spacing: -.01em;
  }
  .hero-search { grid-template-columns: 1fr; border-radius: var(--radius); padding: 12px; }
  .search-field { border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 14px; }
  .search-field:last-of-type { border-bottom: 0; }
  .property-grid, .tools-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-item.search { grid-column: span 2; }
  .activity-grid { grid-template-columns: 1fr; }
  /* Two-column mobile grid lays out as [Logo | Platform] / [Agency | Company].
     Row 1 is centered so the logo lines up with the Platform section; row 2
     (Agency / Company) is top-aligned so the AGENCY and COMPANY headings line
     up rather than Agency sinking to the middle of the taller Company block. */
  .footer-grid { grid-template-columns: 1fr 1fr; text-align: center; align-items: center; }
  .footer-grid > :nth-child(3),
  .footer-grid > :nth-child(4) { align-self: start; }
  /* Center the column links/headings and the brand description on mobile. */
  .footer-grid a { text-align: center; }
  /* Center the brand logo above the description (it's inline-flex, so it
     follows the parent's centered text-align once forced to a flex center). */
  .site-footer .footer-grid .brand { display: flex; justify-content: center; }
  /* Stack and center the bottom bar (copyright + links) on mobile rather
     than pushing them to opposite edges with space-between. */
  .footer-bottom { flex-direction: column; justify-content: center; text-align: center; }
  .footer-bottom .footer-links { justify-content: center; }
  .section-block { padding: 64px 0; }
  /* Featured listing card: the top/bottom arc is shallower on mobile.
     With preserveAspectRatio='none' the 0–100 viewBox stretches to the
     full-height mobile card, so the desktop depth of 6 became an
     exaggerated scoop — halve it to ~3 so the cut reads as a subtle
     shaping rather than a drastic curve on tall narrow screens. */
  .hero-listing-card {
    --edge-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 3 C25 0 75 0 100 3 L100 97 C75 100 25 100 0 97 Z' fill='%23fff'/%3E%3C/svg%3E");
  }
  /* The "Featured" ribbon itself is now defined once in the base styles and
     applies at every width — see `.hero-listing-card .badge.featured-badge`
     above. Mobile keeps only the shallower card --edge-shape arch (above). */
}

/* Featured ghost echo — slow, irregular scale + opacity drift. Keyframe
   percentages are deliberately uneven (11, 23, 37, 52, 64, 79, 91) so
   the pulse never returns to the same scale at the same beat, and the
   long 22s cycle keeps it ambient — barely noticeable peripheral motion
   rather than a heartbeat. */
/* Gentle scale range (.94 → 1.14) — narrower swing than before so the
   change of direction at each keyframe boundary is barely perceptible
   on a 23s cycle. */
@keyframes featGhostScale {
  0%   { transform: scale(1.00); }
  13%  { transform: scale(1.10); }
  27%  { transform: scale(0.96); }
  41%  { transform: scale(1.06); }
  56%  { transform: scale(0.98); }
  72%  { transform: scale(1.14); }
  87%  { transform: scale(0.94); }
  100% { transform: scale(1.00); }
}
/* Opacity floor of .25 — the ghost is visible at all times. The slight
   drift between .25 and .42 provides ambient variation without ever
   dropping to "faded out". (User rule: copy stays visible at all times,
   any fade-down moment must last ≤ 2s.) */
@keyframes featGhostOpacity {
  0%   { opacity: .32; }
  16%  { opacity: .25; }
  31%  { opacity: .42; }
  47%  { opacity: .28; }
  63%  { opacity: .36; }
  78%  { opacity: .26; }
  92%  { opacity: .40; }
  100% { opacity: .32; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-listing-card .badge.featured-badge .feat-ghost { animation: none; }
}

/* ===================== COMMENTS MODAL (shared inventory + leads) ===================== */
.comments-card {
  max-width: 600px; width: 100%;
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--surface);
}
.comments-head {
  padding: 22px 26px 14px;
  border-bottom: 1px solid var(--line);
}
.comments-head h3 {
  font-family: var(--script); font-weight: 400;
  font-size: 36px; line-height: 1; margin: 4px 0; color: var(--ink);
}
.comments-head .eyebrow { margin-bottom: 4px; }
.comments-body {
  flex: 1; overflow-y: auto;
  padding: 16px 22px;
  background: var(--grey-50);
}
.comments-list { display: grid; gap: 10px; }
.cm-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: opacity .15s, filter .15s;
}
.cm-card.greyed { opacity: .45; filter: grayscale(.6); }
.cm-card.greyed:hover { opacity: .7; }
.cm-head {
  display: grid; grid-template-columns: 32px 1fr;
  gap: 10px; align-items: center; margin-bottom: 6px;
}
.cm-head .avatar { width: 32px; height: 32px; font-size: 11px; }
.cm-head b { color: var(--ink); font-size: 13.5px; }
.cm-head p { margin: 0; font-size: 11.5px; color: var(--muted); }
.cm-body {
  margin: 0 0 8px; font-size: 13.5px; color: var(--ink-soft);
  white-space: pre-wrap; line-height: 1.45;
}
.cm-actions {
  display: flex; justify-content: flex-end; gap: 4px;
  border-top: 1px dashed var(--line); padding-top: 6px;
}
.cm-btn {
  background: transparent; border: 0;
  padding: 4px 10px; border-radius: 6px;
  color: var(--ink-soft); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s;
}
.cm-btn:hover { background: var(--primary-50); color: var(--primary); }
.cm-btn.danger { color: var(--ink-soft); }
.cm-btn.danger:hover { background: #fee2e2; color: var(--danger); }

.comments-add {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px; align-items: end;
}
.comments-add textarea {
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13.5px; resize: vertical;
  background: var(--surface); color: var(--ink); outline: none;
}
.comments-add textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.comments-add button { height: 42px; padding: 0 18px; }

/* ===================== LEADS PAGE ===================== */
.leads-toolbar {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 18px; flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.leads-title {
  font-family: var(--script); font-weight: 400;
  font-size: 44px; line-height: 1; margin: 4px 0;
  color: var(--ink);
}
.leads-toolbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.lead-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.lead-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, border-color .15s, box-shadow .15s;
  position: relative;
  overflow: hidden;
}
.lead-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: var(--shadow);
}
.lead-card.greyed {
  opacity: .5;
  filter: grayscale(.6);
  transition: opacity .15s ease, filter .15s ease;
}
.lead-card.greyed:hover { opacity: .75; }

/* ===================== LEAD VIEW TOGGLE ===================== */
.view-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  padding: 3px;
  border-radius: 8px;
}
.view-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.view-toggle-btn:hover { color: var(--ink); }
.view-toggle-btn.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.view-toggle-btn svg { flex-shrink: 0; }

/* ===================== LEAD LIST VIEW ===================== */
.lead-cards.view-list {
  display: block;
  grid-template-columns: none;
}
.lead-row,
.lead-list-head {
  display: grid;
  grid-template-columns: 36px minmax(180px, 1.5fr) auto minmax(140px, 1fr) minmax(160px, 1.4fr) minmax(100px, .8fr) auto;
  align-items: center;
  gap: 14px;
}
.lead-row {
  padding: 10px 16px 10px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, transform .12s ease, opacity .15s ease, filter .15s ease;
}
/* Sortable column-header strip */
.lead-list-head {
  padding: 4px 16px 6px 20px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.lead-sort-btn {
  background: transparent;
  border: 0;
  padding: 6px 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 4px;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.lead-sort-btn:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.lead-sort-btn.active { color: var(--primary); }
.lead-sort-btn::after {
  content: "";
  font-size: 8px;
  width: 0;
  opacity: .55;
  transition: opacity .15s;
}
.lead-sort-btn[data-dir="asc"]::after  { content: "▲"; width: auto; opacity: 1; }
.lead-sort-btn[data-dir="desc"]::after { content: "▼"; width: auto; opacity: 1; }
.lead-sort-btn:hover::after { opacity: 1; }
.lead-row:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.lead-row.greyed {
  opacity: .5;
  filter: grayscale(.6);
}
.lead-row.greyed:hover { opacity: .75; }
/* Coloured stripe per hot/warm/cold */
.lead-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.lead-row.status-hot::before  { background: var(--danger); }
.lead-row.status-warm::before { background: var(--warn); }
.lead-row.status-cold::before { background: var(--line-strong); }

/* Contact-row stripe colors — Buyers in brand-green per request, Sellers
   stay primary-blue, vendor roles amber, anything else neutral grey. */
.lead-row.contact-row.role-buyer::before           { background: var(--accent); }
.lead-row.contact-row.role-seller::before          { background: var(--primary); }
.lead-row.contact-row.role-inspector::before,
.lead-row.contact-row.role-title-officer::before,
.lead-row.contact-row.role-mortgage-lender::before,
.lead-row.contact-row.role-photographer::before,
.lead-row.contact-row.role-pest-control::before,
.lead-row.contact-row.role-contractor::before,
.lead-row.contact-row.role-vendor::before          { background: var(--warn); }
.lead-row.contact-row.role-other::before           { background: var(--line-strong); }

/* Inline links inside the contact row (phone / email) should match the row
   text color until hovered. */
.lead-row.contact-row .lead-row-phone a,
.lead-row.contact-row .lead-row-email a {
  color: inherit;
  text-decoration: none;
}
.lead-row.contact-row .lead-row-phone a:hover,
.lead-row.contact-row .lead-row-email a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* ============================================================
   BUYER toggle in the lead editor
   Plus green highlighting on buyer leads + buyer contacts
   ============================================================ */
.buyer-toggle {
  display: flex; align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  user-select: none;
}
.buyer-toggle:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.buyer-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.buyer-toggle-check {
  width: 22px; height: 22px;
  border: 2px solid var(--line-strong);
  border-radius: 6px;
  display: inline-grid; place-items: center;
  background: var(--surface);
  color: transparent;
  flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.buyer-toggle input:checked ~ .buyer-toggle-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.05);
}
.buyer-toggle input:focus-visible ~ .buyer-toggle-check {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.buyer-toggle-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.buyer-toggle input:checked ~ .buyer-toggle-label { color: var(--accent); }
.buyer-toggle-hint {
  margin-left: auto;
  font-size: 11.5px;
}

/* Lead row/card "is-buyer" — green tint, green left stripe, no longer
   coloured by hot/warm/cold (the buyer state overrides). */
.lead-row.is-buyer,
.lead-card.is-buyer {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.lead-row.is-buyer::before { background: var(--accent) !important; }
.lead-card.is-buyer { box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }

/* Replace the hot/warm/cold pill text with a green Buyer pill in list view */
.lead-status-pill.is-buyer,
.lead-buyer-badge {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
}
.lead-buyer-badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  text-transform: uppercase;
}

/* Contact card "role-buyer" — green highlight matching the leads */
.contact-card.role-buyer {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.contact-card.role-buyer .contact-role-badge.role-buyer,
.lead-row.contact-row.role-buyer .contact-role-badge.role-buyer {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Contact-row "is-buyer" green tint to match the card */
.lead-row.contact-row.role-buyer {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

/* ============================================================
   FEATURE PICKER (dashboard) + ★ Feature row state
   ============================================================ */
.action-btn.action-feature-on {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent-700, #1e8538);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  font-weight: 700;
}
.action-btn.action-feature-on:hover {
  background: color-mix(in srgb, var(--accent) 26%, var(--surface));
}
tr.is-feature-row { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
tr.is-feature-row:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.row-feature-badge {
  display: inline-block;
  margin-left: 6px;
  color: var(--accent-700, #1e8538);
  font-size: 13px;
}

/* Picker modal — uses the shared .modal scaffolding */
.feature-picker-card {
  max-width: 560px;
  width: 100%;
}
.feature-pick-list {
  display: flex; flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}
.feature-pick-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.feature-pick-row:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-color: var(--accent);
}
.feature-pick-row:active { transform: scale(.99); }
.feature-pick-row img {
  width: 72px; height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.feature-pick-info {
  display: flex; flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.feature-pick-info strong {
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feature-pick-info .muted { font-size: 11.5px; }
.feature-pick-meta {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 3px;
}
.feature-pick-cta {
  background: var(--accent);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ============================================================
   SALES section — table-style list with filter bar + KPI strip
   ============================================================ */
.sales-kpis {
  display: flex; align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}
.sales-kpis .button { align-self: center; }
.sales-kpi {
  display: flex; flex-direction: column;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 8px;
  min-width: 110px;
}
.sales-kpi strong {
  font-family: var(--num);
  font-size: 20px;
  color: var(--accent-700, #1e8538);
  line-height: 1.05;
  margin-top: 2px;
}

/* Filter bar — grid that wraps. Each filter sits in its own card-ish slot. */
.sales-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 18px 0;
  box-shadow: var(--shadow-sm);
}
.sales-filters .filter-item label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 4px;
}
.sales-filters select,
.sales-filters input[type="search"] {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  outline: none;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.sales-filters select:focus,
.sales-filters input[type="search"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50, color-mix(in srgb, var(--primary) 12%, var(--surface)));
}
.sales-filters .filter-clear button { width: 100%; height: 36px; padding: 0 10px; }

/* Table-style sales rows. CSS Grid keeps the head + rows aligned. */
.sales-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.sales-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 1fr .6fr .8fr 1fr 1fr .9fr;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background .12s ease;
}
.sales-row:last-child { border-bottom: 0; }
.sales-row:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.sales-row-head {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent-700, #1e8538);
  cursor: default;
}
.sales-row-head:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.sales-buyer {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
}
.sales-avatar {
  width: 28px; height: 28px;
  font-size: 11px;
  flex-shrink: 0;
}
.sales-buyer-name {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sales-property {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sales-num,
.sales-price,
.sales-date {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
}
.sales-price { font-weight: 700; color: var(--accent-700, #1e8538); }
.sales-source-cell {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 1080px) {
  .sales-row {
    grid-template-columns: 1.4fr 1.4fr 1fr .8fr 1fr;
    gap: 10px;
  }
  /* Hide the less-critical columns on smaller widths */
  .sales-row > span:nth-child(4),    /* Beds (head) */
  .sales-row > span:nth-child(5),    /* Type (head) */
  .sales-row > span:nth-child(8) {   /* Source (head) */
    display: none;
  }
}
@media (max-width: 820px) {
  .sales-kpis { width: 100%; }
  .sales-kpi { flex: 1; min-width: 0; }
}

.lead-row-avatar {
  width: 36px; height: 36px; font-size: 12px;
}
.lead-row-name {
  display: flex; flex-direction: column; min-width: 0;
}
.lead-row-name b {
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lead-row-name span {
  font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lead-row-phone {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.lead-row-email {
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.lead-row-source {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.lead-row-actions {
  display: flex; gap: 2px;
  flex-shrink: 0;
}
.lead-row-actions .action-btn {
  background: transparent;
  border: 0;
  width: 32px; height: 32px;
  padding: 0;
  border-radius: 6px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.lead-row-actions .action-btn:hover { background: var(--primary-50); color: var(--primary); }
.lead-row-actions .action-btn.danger:hover { background: #fee2e2; color: var(--danger); }

/* Responsive: collapse extra columns at narrower widths */
@media (max-width: 1100px) {
  .lead-row,
  .lead-list-head {
    grid-template-columns: 36px minmax(180px, 1.5fr) auto minmax(140px, 1fr) auto;
  }
  .lead-row-email,
  .lead-row-source,
  .lead-sort-btn[data-sort="email"],
  .lead-sort-btn[data-sort="source"] { display: none; }
}
@media (max-width: 720px) {
  .lead-row,
  .lead-list-head {
    grid-template-columns: 36px 1fr auto;
    row-gap: 6px;
  }
  .lead-row-phone { grid-column: 2 / span 2; }
  .lead-sort-btn[data-sort="status"],
  .lead-sort-btn[data-sort="phone"] { display: none; }
}
.lead-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.lead-card.status-hot::before  { background: var(--danger); }
.lead-card.status-warm::before { background: var(--warn); }
.lead-card.status-cold::before { background: var(--line-strong); }

.lead-card-head {
  display: grid; grid-template-columns: 40px 1fr auto;
  gap: 12px; align-items: center; margin-bottom: 10px;
}
.lead-card-head .avatar { width: 40px; height: 40px; font-size: 13px; }
.lead-name b { color: var(--ink); font-size: 15px; }
.lead-name p { margin: 2px 0 0; }

.lead-status-pill {
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .06em;
}
.lead-status-pill.status-hot  { background: #fee2e2; color: #991b1b; }
.lead-status-pill.status-warm { background: #fef3c7; color: #92660a; }
.lead-status-pill.status-cold { background: var(--surface-2); color: var(--ink-soft); }

.lead-card-meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: 12.5px; color: var(--ink-soft);
  padding: 8px 0;
  border-top: 1px dashed var(--line);
  margin-bottom: 8px;
}
.lead-card-meta .lead-source {
  margin-left: auto;
  font-size: 11px; color: var(--muted);
  background: var(--surface-2);
  padding: 2px 8px; border-radius: 999px;
  font-style: italic;
}

.lead-card-actions {
  display: flex; gap: 4px;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}
.lead-card .action-btn {
  background: transparent; border: 0;
  padding: 5px 10px; border-radius: 6px;
  color: var(--ink-soft); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s;
}
.lead-card .action-btn:hover { background: var(--primary-50); color: var(--primary); }
.lead-card .action-btn.danger { margin-left: auto; }
.lead-card .action-btn.danger:hover { background: #fee2e2; color: var(--danger); }

/* ===================== CONTACTS PAGE ===================== */
.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease, filter .15s ease;
  position: relative;
  overflow: hidden;
}
.contact-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: var(--shadow);
}
.contact-card.greyed {
  opacity: .5;
  filter: grayscale(.6);
}
.contact-card.greyed:hover { opacity: .75; }

/* Coloured left stripe per role family */
.contact-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.contact-card.role-buyer::before          { background: var(--accent); }
.contact-card.role-seller::before         { background: var(--primary); }
.contact-card.role-inspector::before,
.contact-card.role-title-officer::before,
.contact-card.role-mortgage-lender::before,
.contact-card.role-photographer::before,
.contact-card.role-pest-control::before,
.contact-card.role-contractor::before,
.contact-card.role-vendor::before,
.contact-card.role-other::before          { background: #5a2e91; }

/* Phone row — prominent so phone numbers are obvious */
.contact-phone-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px;
  padding: 10px 0;
  margin: 4px 0 8px;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.contact-phone {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  padding: 4px 10px 4px 6px;
  border-radius: 6px;
  background: var(--primary-50);
  transition: background .15s ease, transform .12s ease;
}
.contact-phone:hover {
  background: color-mix(in srgb, var(--primary) 18%, #fff);
  transform: translateY(-1px);
}
.contact-phone svg { color: var(--primary); }
.contact-email {
  font-size: 12.5px;
  color: var(--ink-soft);
  text-decoration: none;
}
.contact-email:hover { color: var(--primary); text-decoration: underline; }

/* Role badge */
.contact-role-badge {
  font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--ink-soft);
}
.contact-role-badge.role-buyer  { background: var(--accent-50); color: var(--accent-700); }
.contact-role-badge.role-seller { background: var(--primary-50); color: var(--primary); }
.contact-role-badge.role-inspector,
.contact-role-badge.role-title-officer,
.contact-role-badge.role-mortgage-lender,
.contact-role-badge.role-photographer,
.contact-role-badge.role-pest-control,
.contact-role-badge.role-contractor,
.contact-role-badge.role-vendor,
.contact-role-badge.role-other       { background: #f3edff; color: #5a2e91; }

.contact-card .lead-card-actions { border-top: 0; padding-top: 0; margin-top: 4px; }
.contact-card .action-btn {
  background: transparent; border: 0;
  padding: 5px 10px; border-radius: 6px;
  color: var(--ink-soft); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s;
}
.contact-card .action-btn:hover { background: var(--primary-50); color: var(--primary); }
.contact-card .action-btn.danger { margin-left: auto; }
.contact-card .action-btn.danger:hover { background: #fee2e2; color: var(--danger); }

@media (max-width: 600px) {
  .leads-toolbar { flex-direction: column; align-items: flex-start; }
  .lead-cards { grid-template-columns: 1fr; }
}

/* ===================== US REALTOR BENCHMARKS PANEL ===================== */
.benchmarks {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 26px 20px;
  margin-top: 22px;
  box-shadow: var(--shadow-sm);
}
.benchmarks-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.benchmarks-head h3 {
  font-family: var(--script); font-weight: 400;
  font-size: 38px; line-height: 1;
  margin: 4px 0;
  color: var(--ink);
  letter-spacing: 0;
}
.bench-toggle {
  display: inline-flex; gap: 2px;
  background: var(--grey-100);
  border: 1px solid var(--line);
  padding: 3px;
  border-radius: 10px;
}
.bench-tab {
  background: transparent; border: 0;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.bench-tab:hover { color: var(--ink); }
.bench-tab.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.bench-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.bench-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 12px 18px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.bench-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.bench-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.bench-card.sentiment-positive::before { background: var(--accent); }
.bench-card.sentiment-negative::before { background: var(--danger); }
.bench-card.sentiment-neutral::before  { background: var(--line-strong); }

.bench-card h5 {
  margin: 0 0 10px;
  font-size: 11.5px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}

.bench-values {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 6px; align-items: center;
  margin-bottom: 10px;
}
.bench-you, .bench-us { display: flex; flex-direction: column; gap: 2px; }
.bench-vlabel {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.bench-you strong {
  font-family: var(--serif); font-size: 19px;
  color: var(--primary); line-height: 1;
}
.bench-us strong {
  font-family: var(--serif); font-size: 17px;
  color: var(--ink-soft); line-height: 1;
}
.bench-vs {
  font-size: 9.5px; letter-spacing: .12em;
  color: var(--muted); text-transform: uppercase; text-align: center;
}

.bench-delta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.bench-arrow { font-size: 11px; line-height: 1; }
.bench-pct   { font-weight: 700; }
.bench-adj   {
  margin-left: auto; text-align: right;
  font-size: 11px; color: var(--muted);
  font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 1; min-width: 0;
}
.sentiment-positive .bench-arrow,
.sentiment-positive .bench-pct { color: var(--accent-700); }
.sentiment-negative .bench-arrow,
.sentiment-negative .bench-pct { color: var(--danger); }
.sentiment-neutral  .bench-arrow,
.sentiment-neutral  .bench-pct { color: var(--muted); }

/* View modes — hide one column when toggled */
.benchmarks[data-bench-view="you"] .bench-vs,
.benchmarks[data-bench-view="you"] .bench-us { display: none; }
.benchmarks[data-bench-view="us"]  .bench-vs,
.benchmarks[data-bench-view="us"]  .bench-you { display: none; }
.benchmarks[data-bench-view="you"] .bench-values,
.benchmarks[data-bench-view="us"]  .bench-values { grid-template-columns: 1fr; }
.benchmarks[data-bench-view="you"] .bench-you strong,
.benchmarks[data-bench-view="us"]  .bench-us  strong { font-size: 22px; }
.benchmarks[data-bench-view="you"] .bench-delta,
.benchmarks[data-bench-view="us"]  .bench-delta { display: none; }

.bench-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-style: italic;
}

@media (max-width: 1080px) {
  .bench-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .bench-grid { grid-template-columns: 1fr; }
  .benchmarks-head { flex-direction: column; align-items: flex-start; }
}

/* ===================== SCREEN TRANSITION OVERLAY ===================== */
.screen-transition {
  position: fixed; inset: 0; z-index: 220;
  background: var(--bg);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.screen-transition::before {
  /* Soft logo-color glow behind the mark for a touch of brand colour */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 40% at 50% 50%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%),
    radial-gradient(40% 30% at 50% 60%, color-mix(in srgb, var(--accent)  12%, transparent), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.screen-transition img {
  width: 380px;
  max-width: 70vw;
  height: auto;
  display: block;
  position: relative;
  transform: scale(.78) translateY(8px);
  opacity: 0;
  transition:
    transform .42s cubic-bezier(.18, .9, .32, 1.18),
    opacity   .28s ease;
}
.screen-transition.active {
  opacity: 1;
  pointer-events: auto;
}
.screen-transition.active::before { opacity: 1; }
.screen-transition.active img {
  transform: scale(1) translateY(0);
  opacity: 1;
  animation: budgieBreathe 1.2s ease-in-out infinite;
}
@keyframes budgieBreathe {
  0%, 100% { filter: drop-shadow(0 6px 18px rgba(30,79,183,.15)); }
  50%      { filter: drop-shadow(0 12px 28px rgba(40,167,69,.22)); }
}

/* Hide non-active dashboard screens reliably */
[data-screen][hidden] { display: none !important; }

/* ===================== COMPARE PROPERTIES ===================== */
.compare-controls {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 8px;
}
.profile-selector { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.profile-selector-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.profile-toggle {
  display: inline-flex; gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  padding: 3px; border-radius: 8px;
}
.profile-btn {
  background: transparent; border: 0;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.profile-btn:hover { color: var(--ink); }
.profile-btn.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.compare-profile-blurb {
  margin: 0 0 16px;
  font-style: italic;
}

.compare-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.compare-table {
  display: flex;
  min-width: 100%;
  background: var(--line);
  gap: 1px;
}
.compare-table > * {
  background: var(--surface);
  min-width: 0;
}
.compare-headcol,
.compare-add-col { flex: 0 0 160px; }
.compare-col { flex: 1 1 220px; min-width: 220px; }

/* Fixed cell heights so every row aligns horizontally across columns. */
.cc-cell {
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  height: 48px;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Numeric cells share the JetBrains Mono number face used elsewhere on the
   site, so Price / Beds / Sq Ft / Year / Monthly / Score all visually match. */
.cc-cell[data-row="price"],
.cc-cell[data-row="beds"],
.cc-cell[data-row="baths"],
.cc-cell[data-row="sqft"],
.cc-cell[data-row="ppsqft"],
.cc-cell[data-row="year"],
.cc-cell[data-row="monthly"] {
  font-family: var(--num);
}
.cc-cell:last-child { border-bottom: 0; }
.compare-headcol .cc-cell {
  background: var(--grey-50);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.compare-headcol .cc-title-cell { font-size: 11.5px; }

/* Image cell — exactly the same height on every column for visual parity */
.cc-img-cell {
  padding: 0 !important;
  height: 220px !important;
  position: relative;
  overflow: hidden;
}
.compare-headcol .cc-img-cell {
  background: var(--grey-50);
  padding: 10px 14px !important;
  align-items: flex-end;
}
.cc-empty-label { font-size: 11px; }
.cc-image {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
}
.cc-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: transform .25s ease;
}

/* Top-right remove button on each property card image */
.cc-remove-top {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 6;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  border: 0;
  color: var(--danger);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s, transform .12s;
  box-shadow: var(--shadow-sm);
}
.compare-col:hover .cc-remove-top { opacity: 1; }
.cc-remove-top:hover { background: var(--danger); color: #fff; transform: scale(1.08); }
.cc-image:hover img { transform: scale(1.04); }
.cc-img-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 0;
  color: var(--ink);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity .15s, background .15s;
  box-shadow: var(--shadow-sm);
}
.cc-image:hover .cc-img-nav { opacity: 1; }
.cc-img-nav:hover { background: #fff; }
.cc-img-nav.prev { left: 8px; }
.cc-img-nav.next { right: 8px; }
.cc-img-dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px;
}
.cc-img-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  transition: background .15s, width .15s;
}
.cc-img-dot.active {
  background: #fff;
  width: 18px; border-radius: 3px;
}

/* Title cell — taller to fit two lines without breaking alignment */
.cc-title-cell {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 10px 14px;
  height: 68px !important;
  white-space: normal;
  overflow: hidden;
}
.cc-title-cell strong {
  font-size: 14px; color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}
.cc-title-cell .muted {
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Winner highlight */
.cc-cell.winner {
  background: var(--accent-50);
  color: var(--accent-700);
  font-weight: 700;
  position: relative;
}
.cc-cell.winner::after {
  content: "✓";
  position: absolute;
  right: 10px;
  font-size: 11px;
  opacity: .8;
}

/* =================== ROW EMPHASIS (click label to highlight a row) =================== */
.cc-cell.cc-row-toggle {
  cursor: pointer;
  position: relative;
  transition: background .15s ease, color .15s ease;
  user-select: none;
}
.cc-cell.cc-row-toggle:hover {
  background: color-mix(in srgb, var(--primary) 12%, var(--grey-50));
  color: var(--primary);
}
.cc-cell.cc-row-toggle::after {
  content: "📌";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) scale(.7);
  font-size: 11px;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.cc-cell.cc-row-toggle:hover::after { opacity: .45; transform: translateY(-50%) scale(.85); }
.cc-cell.cc-row-toggle.row-emphasized::after { opacity: 1; transform: translateY(-50%) scale(1); }

/* Steady emphasized state — gentle animated gradient + inset rails */
.cc-cell.row-emphasized {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--primary) 12%, var(--surface)) 0%,
    color-mix(in srgb, var(--accent)  10%, var(--surface)) 50%,
    color-mix(in srgb, var(--primary) 12%, var(--surface)) 100%);
  background-size: 200% 100%;
  animation: rowGradientShift 8s ease-in-out infinite;
  color: var(--ink);
  font-weight: 700;
  box-shadow:
    inset 0  1px 0 color-mix(in srgb, var(--primary) 35%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--primary) 35%, transparent),
    inset 3px 0 0 var(--primary);
  position: relative;
  z-index: 2;
}
.compare-headcol .cc-cell.row-emphasized {
  color: var(--primary);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--primary) 16%, var(--grey-50)) 0%,
    color-mix(in srgb, var(--primary) 22%, var(--grey-50)) 100%);
  background-size: 100% 100%;
  animation: none;
}
@keyframes rowGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* One-shot shimmer when row is first emphasized */
.cc-cell.just-emphasized {
  position: relative;
}
.cc-cell.just-emphasized::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--primary) 50%, transparent) 40%,
    rgba(255,255,255,.55) 50%,
    color-mix(in srgb, var(--accent)  50%, transparent) 60%,
    transparent 100%);
  transform: translateX(-110%);
  animation: rowShimmer .9s cubic-bezier(.4, 0, .2, 1) forwards;
  pointer-events: none;
  mix-blend-mode: overlay;
}
@keyframes rowShimmer {
  to { transform: translateX(110%); }
}

/* Winner inside an emphasized row reads as a richer green */
.cc-cell.winner.row-emphasized {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 18%, var(--surface)),
      color-mix(in srgb, var(--accent) 25%, var(--surface)));
  background-size: 200% 100%;
  color: var(--accent-700);
}

/* ===================== ROW DRAG-TO-REORDER ===================== */
.cc-cell.cc-row-drag {
  cursor: grab;
  touch-action: none;     /* prevent the browser from scrolling on drag */
}
.cc-cell.cc-row-drag:active { cursor: grabbing; }

/* Cells being dragged lift off the table and follow the cursor smoothly */
.cc-cell.row-dragging {
  z-index: 50;
  opacity: .96;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(10,15,26,.28);
  transition: none !important;   /* live drag = no easing */
  cursor: grabbing;
  position: relative;
}

/* Row currently underneath the dragged cell shows where the drop will land */
.cc-cell.drop-target {
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface)) !important;
  animation: dropTargetPulse 1.2s ease-in-out infinite;
}
@keyframes dropTargetPulse {
  0%, 100% { outline-color: var(--primary); }
  50%      { outline-color: color-mix(in srgb, var(--primary) 50%, var(--accent)); }
}

/* When NOT being dragged or just-emphasized, allow transforms to ease so
   resting cells settle smoothly back to baseline after a drop. */
.cc-cell {
  transition: transform .35s cubic-bezier(.4, 0, .2, 1),
              background .15s ease, color .15s ease;
}

/* Lock-in bounce — plays once on the row that just landed */
@keyframes lockInBounce {
  0%   { transform: scale(.985) translateY(-3px); box-shadow: 0 0 0 0 rgba(30,79,183,0); }
  35%  { transform: scale(1.025) translateY(2px); box-shadow: 0 8px 20px rgba(30,79,183,.35); }
  65%  { transform: scale(.995) translateY(0);   box-shadow: 0 4px 10px rgba(30,79,183,.18); }
  100% { transform: scale(1)     translateY(0);   box-shadow: 0 0 0 0 rgba(30,79,183,0); }
}
.cc-cell.row-locked-in {
  animation: lockInBounce .65s cubic-bezier(.34, 1.56, .64, 1) both;
  z-index: 10;
  position: relative;
}

/* Smart Match score row — slightly taller for the bar to breathe */
.cc-score-cell { padding: 8px 14px; height: 56px !important; }
.cc-score {
  position: relative;
  width: 100%;
  height: 24px;
  /* Dark track so the white score number reads at any fill level */
  background: var(--ink);
  border-radius: 999px;
  overflow: hidden;
  display: flex; align-items: center;
}
.cc-score-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 999px;
  transition: width .55s cubic-bezier(.4, 0, .2, 1);
}
.cc-score-num {
  position: relative;
  margin-left: auto; margin-right: 10px;
  font-family: var(--num);
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  z-index: 1;
}

/* Monthly */
.cc-monthly {
  font-family: var(--num);
  font-weight: 700;
  color: var(--primary);
}

/* Remove button row at the bottom */
.cc-actions-cell { justify-content: center; height: 52px !important; }
.cc-remove {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 11.5px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.cc-remove:hover {
  background: #fee2e2;
  color: var(--danger);
  border-color: #fecaca;
}

/* Best Match column emphasis */
.compare-col.is-best-match {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  box-shadow: inset 0 0 0 2px var(--accent);
  position: relative;
}
.best-match-ribbon {
  position: absolute;
  top: 10px; left: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-700));
  color: #fff;
  font-size: 10.5px; font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase; letter-spacing: .06em;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(40,167,69,.4);
  animation: bestMatchBob 2s ease-in-out infinite;
}
@keyframes bestMatchBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* Add property column */
.compare-add-col {
  display: flex; align-items: stretch; justify-content: center;
}
.compare-add-btn {
  width: 100%;
  border: 2px dashed var(--line-strong);
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-sm);
  margin: 12px;
  padding: 24px 12px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  transition: border-color .15s, color .15s, background .15s;
}
.compare-add-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-50);
}
.compare-add-plus {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

/* Empty state */
.compare-empty {
  padding: 60px 20px;
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius);
}
.compare-empty p {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 14px;
}

/* Picker modal */
.compare-picker-card {
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.compare-picker-list {
  flex: 1; overflow-y: auto;
  padding: 6px;
}
.compare-picker-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.compare-picker-row:hover:not(.added) {
  background: var(--primary-50);
  border-color: var(--primary);
}
.compare-picker-row.added {
  opacity: .55;
  cursor: not-allowed;
}
.compare-picker-row img {
  width: 64px; height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.compare-picker-info {
  display: flex; flex-direction: column; min-width: 0;
  gap: 1px;
}
.compare-picker-info strong {
  font-size: 13.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.compare-picker-info .muted {
  font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.compare-picker-meta {
  font-size: 11.5px;
  color: var(--ink-soft);
  font-family: var(--num);
}
.compare-picker-plus {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid; place-items: center;
  font-size: 18px;
  font-weight: 300;
}
.compare-picker-added {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-700);
}

/* Sold rows — faded red tint, non-interactive (disabled at the markup
   level too). Hover/cursor cues are suppressed so they look clearly
   unselectable. */
.compare-picker-row.is-sold {
  background: color-mix(in srgb, #e11d48 9%, var(--surface));
  border-color: color-mix(in srgb, #e11d48 22%, transparent);
  opacity: .55;
  cursor: not-allowed;
  filter: saturate(.6);
}
.compare-picker-row.is-sold:hover {
  /* Override the generic hover; sold rows must stay flat. */
  background: color-mix(in srgb, #e11d48 9%, var(--surface));
  border-color: color-mix(in srgb, #e11d48 22%, transparent);
}
.compare-picker-row.is-sold img { filter: grayscale(.5); }
.compare-picker-row.is-sold .compare-picker-info strong { color: #b91c34; }
.compare-picker-sold {
  background: color-mix(in srgb, #e11d48 20%, var(--surface));
  color: #b91c34;
  border: 1px solid color-mix(in srgb, #e11d48 35%, transparent);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Responsive: scale image cell uniformly so all columns shrink together */
@media (max-width: 1100px) {
  .cc-img-cell { height: 180px !important; }
}
@media (max-width: 820px) {
  .cc-img-cell { height: 150px !important; }
  .cc-title-cell { height: 60px !important; }

  /* Narrow the row-label column on phones so the actual property columns
     get more of the limited width (labels are short — "Price", "Beds"…). */
  .compare-headcol { flex: 0 0 104px; }

  /* The compare table is a horizontal flex row inside an overflow-x:auto
     wrap. On a phone, even ONE selected property already overflows the
     viewport, so the Add column sat off the right edge and looked like it
     was gone (it needed a horizontal scroll the user never sees). Pin it
     to the right of the scroll viewport so it's always visible and
     tappable, slim it down, drop the "/4 selected" sub-label, and add a
     left divider shadow so it reads as a floating rail over the columns
     scrolling beneath it. */
  .compare-add-col {
    position: sticky;
    right: 0;
    z-index: 4;
    flex: 0 0 92px;
    box-shadow: -10px 0 14px -6px rgba(10, 15, 26, .14);
  }
  .compare-add-btn {
    margin: 8px;
    padding: 16px 6px;
    font-size: 11.5px;
    line-height: 1.2;
  }
  .compare-add-btn .muted.small { display: none; }
  .compare-add-plus { font-size: 24px; }
}

/* ============================================================
   ADD-A-NOTE CARD (Overview, dashboard)
   ============================================================ */
.add-note-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  margin-top: 28px;
  box-shadow: var(--shadow-sm);
}
.add-note-head {
  margin-bottom: 14px;
}
.add-note-head h3 {
  margin: 2px 0 2px;
  font-family: var(--script);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.05;
  color: var(--ink);
}
.add-note-form { display: grid; gap: 12px; }
.add-note-row input[type="text"],
.add-note-row textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.add-note-row input[type="text"]:focus,
.add-note-row textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.add-note-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
}
.add-note-field {
  display: flex; flex-direction: column;
  gap: 4px;
}
.add-note-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
}
.add-note-field input[type="date"] {
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink);
  font-family: var(--num);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.add-note-field input[type="date"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.add-note-field input[type="file"] {
  font-size: 12px;
  color: var(--ink-soft);
  padding: 6px 0;
}
.add-note-file-name {
  font-size: 11px;
}

/* Marker chips — radio buttons styled as pills */
.add-note-markers {
  display: flex; flex-wrap: wrap;
  gap: 8px;
}
.marker-chip {
  display: inline-flex; align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;     /* matches the site-wide .button radius */
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  user-select: none;
}
.marker-chip:hover { background: var(--surface-2); color: var(--ink); }
.marker-chip input { position: absolute; opacity: 0; pointer-events: none; }
.marker-chip.selected {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
  border-color: var(--primary);
}
.marker-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--surface);
}
.marker-dot.priority { background: #e11d48; }
.marker-dot.general  { background: var(--primary); }
.marker-dot.remind   { background: var(--warn); }

.add-note-actions {
  display: flex; justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* ============================================================
   REMINDERS PANEL — always-visible, side-docked on the right
   ============================================================ */
.reminders-panel {
  position: fixed;
  top: 120px;
  right: 0;
  width: 320px;
  max-height: calc(100vh - 160px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: -10px 12px 28px rgba(10, 15, 26, .14);
  z-index: 90;
  display: flex; flex-direction: column;
  transform: translateX(0);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
/* Collapsed — slide most of the panel off-screen, leaving the toggle visible
   as a vertical tab. */
.reminders-panel.is-collapsed {
  transform: translateX(calc(100% - 38px));
}
.reminders-panel.is-collapsed .reminders-head,
.reminders-panel.is-collapsed .reminders-body {
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.reminders-toggle {
  position: absolute;
  top: 50%;
  left: -1px;     /* sit flush against the panel's left edge */
  transform: translate(-100%, -50%);
  background: var(--primary);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 12px 8px;
  cursor: pointer;
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  box-shadow: -4px 4px 12px rgba(10, 15, 26, .18);
  display: flex; align-items: center;
  gap: 6px;
  writing-mode: vertical-rl;
  transform-origin: center;
  transition: background .15s ease, padding .25s ease;
}
.reminders-toggle:hover { background: var(--primary-700, var(--primary)); }

/* When today has reminders, the tab flips to red. The vibration animation
   ONLY runs on first render (page reload) via the `.vibrate-once` class
   added briefly by the JS, then removed. */
.reminders-panel.has-reminders .reminders-toggle {
  background: #e11d48;
}
.reminders-panel.has-reminders .reminders-toggle:hover { background: #be123c; }

/* Vibration — fast tiny horizontal shake, plays once. Translate values are
   small so it reads as a phone-like buzz rather than a wobble. The toggle
   is positioned with `transform: translate(-100%, -50%)`, so each keyframe
   re-includes that base translate plus a small translateX nudge. */
.reminders-panel.vibrate-once .reminders-toggle {
  animation: remindersTabVibrate .9s linear 1;
}
@keyframes remindersTabVibrate {
  0%, 100% { transform: translate(-100%, -50%) translateX(0); }
  6%       { transform: translate(-100%, -50%) translateX(-2.5px); }
  12%      { transform: translate(-100%, -50%) translateX(2.5px); }
  18%      { transform: translate(-100%, -50%) translateX(-2.25px); }
  24%      { transform: translate(-100%, -50%) translateX(2.25px); }
  30%      { transform: translate(-100%, -50%) translateX(-2px); }
  36%      { transform: translate(-100%, -50%) translateX(2px); }
  42%      { transform: translate(-100%, -50%) translateX(-1.75px); }
  48%      { transform: translate(-100%, -50%) translateX(1.5px); }
  56%      { transform: translate(-100%, -50%) translateX(-1.25px); }
  64%      { transform: translate(-100%, -50%) translateX(1px); }
  72%      { transform: translate(-100%, -50%) translateX(-.75px); }
  80%      { transform: translate(-100%, -50%) translateX(.5px); }
  88%      { transform: translate(-100%, -50%) translateX(-.25px); }
}

@media (prefers-reduced-motion: reduce) {
  .reminders-panel.vibrate-once .reminders-toggle { animation: none; }
}
.reminders-toggle-icon {
  font-size: 14px;
  writing-mode: horizontal-tb;
  transform: rotate(180deg);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  line-height: 1;
}
.reminders-panel.is-collapsed .reminders-toggle-icon { transform: rotate(0deg); }
.reminders-toggle-label { white-space: nowrap; }
.reminders-toggle-count {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  font-family: var(--num);
  writing-mode: horizontal-tb;
  font-size: 10.5px;
}

.reminders-head {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--line);
  transition: opacity .2s ease .1s;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.reminders-head h4 {
  margin: 2px 0 0;
  font-size: 16px;
  display: flex; align-items: center; gap: 8px;
  color: var(--ink);
}

/* Small "+ Add Note" shortcut in the header — jumps to the Add Note card */
.reminders-add-btn {
  flex-shrink: 0;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.reminders-add-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.reminders-add-btn:active { transform: scale(.96); }

/* Brief landing pulse on the Add-Note card when navigated to from the panel */
.add-note-card.add-note-flash {
  animation: addNoteFlash 1.1s ease;
}
@keyframes addNoteFlash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); }
  25%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 32%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); }
}
.reminders-count {
  font-family: var(--num);
  font-size: 12px;
  padding: 1px 8px;
  background: var(--primary-50, color-mix(in srgb, var(--primary) 10%, var(--surface)));
  color: var(--primary);
  border-radius: 999px;
}

.reminders-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 14px;
  display: flex; flex-direction: column;
  gap: 8px;
  transition: opacity .2s ease .1s;
}
.reminders-empty {
  text-align: center;
  padding: 24px 16px;
}

.reminder-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.reminder-item:hover {
  transform: translateX(-2px);
  box-shadow: -2px 4px 10px rgba(10, 15, 26, .08);
}
.reminder-item.marker-priority    { border-left-color: #e11d48; }
.reminder-item.marker-general     { border-left-color: var(--primary); }
.reminder-item.marker-remind-month{ border-left-color: var(--warn); }
.reminder-marker {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 6px;
}
.marker-priority .reminder-marker     { background: #e11d48; }
.marker-general .reminder-marker      { background: var(--primary); }
.marker-remind-month .reminder-marker { background: var(--warn); }
.reminder-content {
  min-width: 0;
}
.reminder-content strong {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
}
.reminder-content p {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.35;
}
.reminder-attach {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: 999px;
}
.reminder-done {
  width: 26px; height: 26px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 14px; line-height: 1;
  display: inline-grid; place-items: center;
  transition: background .15s, color .15s, border-color .15s;
}
.reminder-done:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* On smaller screens the reminders panel becomes a thinner, always-collapsed
   side dock so it doesn't dominate the viewport. The user can still tap the
   side tab to expand it briefly, but at rest only the slim tab is visible. */
@media (max-width: 820px) {
  .reminders-panel { top: 80px; width: 88vw; max-width: 280px; }
  .reminders-panel:not(.is-collapsed) { transform: translateX(0); }
  /* Default to collapsed on small screens so the page reads naturally */
  .reminders-panel { transform: translateX(calc(100% - 38px)); }
  .reminders-panel:not(.is-collapsed) .reminders-head,
  .reminders-panel:not(.is-collapsed) .reminders-body { opacity: 1; pointer-events: auto; }
  .add-note-grid   { grid-template-columns: 1fr; }
}