/* Fonts are now loaded via <link rel="preconnect"> + <link rel="stylesheet">
   in includes/header.php — that's parallel with style.css instead of
   chained after it (which is what the old @import forced). */

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  --primary:        #0f1f3d;
  --primary-light:  #162b52;
  --accent:         #b8893a;
  --accent-light:   #d4a85a;
  --gold-grad:      linear-gradient(135deg, #c9963f 0%, #a07228 100%);
  --navy-grad:      linear-gradient(135deg, #162b52 0%, #0a1628 100%);
  --ivory:          #faf8f4;
  --ivory-mid:      #f4f0e8;
  --beige:          #ede8de;
  --card-bg:        #ffffff;
  --foreground:     #101828;
  --muted:          #6b7280;
  --border:         #e8e2d8;
  --shadow-soft:    0 4px 24px -6px rgba(15,31,61,.08);
  --shadow-elegant: 0 20px 60px -20px rgba(15,31,61,.18);
  --shadow-gold:    0 12px 40px -10px rgba(184,137,58,.35);
  --shadow-card:    0 2px 8px -2px rgba(15,31,61,.06), 0 12px 32px -12px rgba(15,31,61,.12);
  --radius-card:    1rem;
  --radius-pill:    999px;
}

/* ── Base ──────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--ivory);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
h1,h2,h3,h4,h5 { font-family: 'Cormorant Garamond', serif; letter-spacing: -.02em; }
img { max-width: 100%; }
a { text-decoration: none; }

/* ── Utilities ─────────────────────────────────────────── */
.text-accent   { color: var(--accent) !important; }
.bg-ivory      { background: var(--ivory); }
.bg-ivory-mid  { background: var(--ivory-mid); }
.bg-beige      { background: var(--beige); }
.bg-navy-grad  { background: var(--navy-grad); }

.container-luxe {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.section-py  { padding-top: 6rem; padding-bottom: 6rem; }
.section-pt  { padding-top: 6rem; }
.section-pb  { padding-bottom: 6rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--accent);
  font-family: 'Inter', sans-serif;
}

.luxe-card {
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow .5s, transform .5s;
}
.luxe-card:hover {
  box-shadow: var(--shadow-elegant);
  transform: translateY(-4px);
}

.glass-panel {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--shadow-elegant);
}

.img-zoom { transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.img-zoom-wrap { overflow: hidden; }
.img-zoom-wrap:hover .img-zoom { transform: scale(1.08); }

.gold-underline {
  text-decoration: underline;
  text-decoration-color: rgba(184,137,58,.45);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

.bg-dotted {
  background-image: radial-gradient(rgba(15,31,61,.07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.bg-grid {
  background-image:
    linear-gradient(rgba(15,31,61,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,31,61,.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Buttons */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--gold-grad);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-gold);
  transition: opacity .25s, transform .25s;
  text-decoration: none;
}
.btn-gold:hover { opacity: .9; transform: scale(1.02); color: #fff; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--ivory);
  font-weight: 600;
  font-size: .9rem;
  border: none;
  cursor: pointer;
  transition: background .2s, color .2s;
  text-decoration: none;
}
.btn-primary:hover { background: var(--accent); color: var(--primary); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--primary);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .2s;
  text-decoration: none;
}
.btn-outline:hover { border-color: var(--accent); }

/* ── Reveal ────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ── Float ─────────────────────────────────────────────── */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-float-delay { animation: float 4s ease-in-out 1.5s infinite; }

/* ── Marquee ───────────────────────────────────────────── */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; gap: 3rem; width: max-content; animation: marquee 24s linear infinite; }
.marquee-wrap  { overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
.marquee-item  { display: flex; align-items: center; gap: .5rem; white-space: nowrap; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); }
.marquee-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; flex-shrink: 0; }
.marquee-sep   { color: var(--accent); font-size: .5rem; }

/* ── Navbar ────────────────────────────────────────────── */
#mainNav {
  position: fixed;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 1050;
  border-radius: 999px;
  background: rgba(250,248,244,.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: var(--shadow-soft);
  transition: all .5s;
}
#mainNav.scrolled {
  background: rgba(250,248,244,.97);
  box-shadow: var(--shadow-elegant);
  border-color: rgba(232,226,216,.7);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .75rem .5rem 1.25rem;
  height: 4rem;
  transition: height .4s;
}
#mainNav.scrolled .nav-inner { height: 3.5rem; }
.nav-brand img { height: 36px; transition: height .4s; }
#mainNav.scrolled .nav-brand img { height: 32px; }

.nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: .25rem;
  align-items: center;
}
.nav-links li a {
  font-size: .81rem;
  font-weight: 500;
  color: rgba(16,24,40,.75);
  padding: .3rem .5rem;
  display: block;
  position: relative;
  transition: color .2s;
}
.nav-links li a::after {
  content: '';
  position: absolute;
  left: .5rem; right: .5rem; bottom: -2px;
  height: 1.5px;
  background: var(--accent);
  width: 0;
  transition: width .3s;
}
.nav-links li a:hover,
.nav-links li a.active { color: var(--primary); }
.nav-links li a:hover::after,
.nav-links li a.active::after { width: calc(100% - 1rem); }

.nav-actions { display: none; align-items: center; gap: .75rem; }
.nav-phone { font-size: .875rem; color: var(--primary); font-weight: 500; display: flex; align-items: center; gap: .4rem; }

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--primary);
}

/* ── Mobile drawer — full-height slide in from left ── */

/* Overlay behind drawer */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
}
.nav-overlay.show { display: block; }

/* Drawer panel — slides over everything including navbar pill */
.nav-mobile {
  position: fixed;
  top: 0;
  left: -100%;
  bottom: 0;
  width: 78vw;
  max-width: 290px;
  background: #fff;
  z-index: 9999;
  display: flex !important;
  flex-direction: column;
  transition: left .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  box-shadow: 6px 0 40px rgba(0,0,0,.25);
  border-radius: 0;
}
.nav-mobile.open { left: 0 !important; }
body.nav-open #navToggle { opacity: 0; pointer-events: none; }

/* Drawer header */
.nav-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: #fff;
  min-height: 4.5rem;
}
.nav-mobile-close {
  background: none; border: none; cursor: pointer;
  font-size: 1.35rem; color: var(--primary);
  width: 2.2rem; height: 2.2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: .35rem;
  transition: background .15s;
  flex-shrink: 0;
}
.nav-mobile-close:hover { background: var(--beige); }

/* Nav links */
.nav-mobile ul {
  list-style: none; margin: 0; padding: .5rem 0;
  flex: 1;
}
.nav-mobile ul li a {
  display: block;
  padding: .85rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-mobile ul li a:hover,
.nav-mobile ul li a.active { background: var(--beige); color: var(--accent); }

/* Drawer footer actions */
.nav-mobile-footer {
  padding: 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  flex-shrink: 0;
}
.nav-mobile-footer a,
.nav-mobile-footer button {
  display: block;
  width: 100%;
  text-align: center;
  padding: .85rem 1rem;
  border-radius: .5rem;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .04em;
  border: none;
}
.nav-mobile-footer .btn-dash {
  background: var(--primary);
  color: #fff;
}
.nav-mobile-footer .btn-signin {
  background: transparent;
  border: 1.5px solid var(--primary) !important;
  color: var(--primary);
}
.nav-mobile-footer .btn-phone {
  background: var(--beige);
  color: var(--primary);
  font-size: .82rem;
}
.nav-mobile-footer .nav-dash-links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .35rem 0 0;
}
.nav-mobile-footer .nav-dash-links a {
  flex: 1 1 45%;
  padding: .55rem .5rem;
  font-size: .76rem;
  font-weight: 500;
  background: var(--beige);
  border-radius: .4rem;
  color: var(--primary);
  text-align: center;
  text-decoration: none;
  min-width: 0;
}

@media (min-width: 1200px) {
  .nav-links { display: flex; }
  .nav-actions { display: flex; }
  .nav-toggle { display: none; }
}

/* ── Hero ──────────────────────────────────────────────── */
#hero {
  position: relative;
  height: 100svh;
  min-height: 680px;
  max-height: 960px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#hero .hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
#hero .hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,31,61,.55) 0%, rgba(15,31,61,.3) 50%, rgba(15,31,61,.75) 100%);
}
#hero .hero-radial {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(15,31,61,.55) 0%, transparent 60%);
}
.hero-badge {
  position: absolute;
  z-index: 10;
  border-radius: 1rem;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.hero-badge-left  { top: 7rem; left: 1.5rem; }
.hero-badge-right { top: 9rem; right: 1.5rem; }
@media (max-width: 767px) { .hero-badge { display: none !important; } }

.hero-badge .badge-icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: rgba(184,137,58,.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 1rem;
}
.hero-badge .badge-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .22em; color: var(--muted); }
.hero-badge .badge-val   { font-size: .875rem; font-weight: 600; color: var(--primary); line-height: 1.2; }

.hero-content {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.5rem 1.5rem;
}
.hero-title {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  line-height: .98;
  color: #fff;
  text-shadow: 0 2px 24px rgba(10,18,40,.55), 0 1px 2px rgba(10,18,40,.4);
  margin: .75rem 0;
}
.hero-title .accent-span {
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(90deg, #d4a75a, #f0cc82, #d4a75a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-subtitle { color: rgba(255,255,255,.85); max-width: 40rem; font-size: 1.05rem; line-height: 1.7; margin: 0 0 1.5rem; }
.hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-bottom: 0; }
.hb-regions, .hb-tools { gap: .6rem; }
.hb-tools { margin-top: .75rem; }
.hero-glass-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-weight: 600; font-size: .9rem;
  text-decoration: none;
  transition: background .2s;
}
.hero-glass-btn:hover, .hero-glass-btn:focus-visible { background: rgba(255,255,255,.22); color: #fff; }
.hb-short { display: none; }   /* short button labels: tablets and phones */
/* Below 900px the four full labels of the top row no longer fit on one line. */
@media (max-width: 900px) {
  .hb-long  { display: none; }
  .hb-short { display: inline; }
}

/* Inside .hero-content, under the headline and above the quick-link buttons. */
.hero-search-wrap {
  width: 100%;
  margin: 0 0 1.5rem;
  text-align: left;   /* .hero-content centres its text; inputs and the placeholder start left */
}
.hero-search {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 1.25rem;
  padding: .6rem;
  box-shadow: var(--shadow-elegant);
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.hero-search .hs-input-wrap {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.72);
  border-radius: .75rem;
  padding: .25rem .75rem;
}
.hero-search input,
.hero-search select {
  background: transparent;
  border: none;
  padding: .6rem .5rem;
  font-size: .875rem;
  color: var(--foreground);
  flex: 1;
  min-width: 0;
}
.hero-search input:focus,
.hero-search select:focus { outline: none; }
.hero-search .hs-select {
  flex: 0 0 auto;
  background: rgba(255,255,255,.72);
  border-radius: .75rem;
  padding: .75rem 1rem;
  border: none;
  font-size: .875rem;
  color: var(--foreground);
  min-width: 7rem;
}
.hero-search .hs-btn {
  flex: 0 0 auto;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: .85rem;
  padding: .75rem 1.5rem;
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: background .2s;
  white-space: nowrap;
}
.hero-search .hs-btn:hover { background: var(--accent); }

/* Phones: the hero grows with its content instead of clipping it at one
   screen tall (that hid the Search button), the six buttons become two
   tidy grids, and the search becomes input / 3 selects / button. */
@media (max-width: 640px) {
  #hero { height: auto; min-height: 100svh; max-height: none; }
  #hero .hero-overlay { background: linear-gradient(180deg, rgba(15,31,61,.7) 0%, rgba(15,31,61,.5) 45%, rgba(15,31,61,.85) 100%); }
  .hero-content { padding: 6rem 1rem 1.25rem; }
  .hero-content .eyebrow { font-size: .6rem; letter-spacing: .16em; line-height: 1.6; text-shadow: 0 1px 8px rgba(10,18,40,.7); }
  .hero-content .eyebrow i { display: none; }
  .hero-title { font-size: 2.35rem; line-height: 1.04; margin: .6rem 0 .75rem; }
  .hero-subtitle { font-size: .95rem; line-height: 1.6; margin-bottom: 1.25rem; }
  .hero-btns { display: grid; width: 100%; max-width: 24rem; }
  .hb-regions, .hb-tools { gap: .5rem; }
  .hb-regions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hb-tools { grid-template-columns: 1fr 1fr; margin-top: .5rem; }
  .hb-regions .btn-gold { grid-column: 1 / -1; }   /* Browse Listings: full width under the three areas */
  .hero-btns a { justify-content: center; gap: .3rem; padding: .7rem .4rem; font-size: .8rem; white-space: nowrap; }
  .hero-search-wrap { margin-bottom: 1rem; }
  .hero-search { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-search .hs-input-wrap, .hero-search .hs-btn { grid-column: 1 / -1; }
  .hero-search .hs-select { min-width: 0; padding: .7rem .5rem; }
  .hero-search .hs-btn { justify-content: center; }
  /* 16px: iPhones zoom the whole page into any field smaller than that */
  .hero-search input, .hero-search select { font-size: 16px; }
}

/* ── Page Hero ─────────────────────────────────────────── */
.page-hero {
  position: relative;
  padding: 8rem 1.5rem 5rem;
  overflow: hidden;
  text-align: center;
}
.page-hero .ph-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(250,248,244,.7) 0%, rgba(250,248,244,.4) 50%, var(--ivory) 100%);
  z-index: 1;
}
.page-hero .ph-body {
  position: relative;
  z-index: 2;
  max-width: 48rem;
  margin: 0 auto;
}
.page-hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.05; color: var(--primary); }
.page-hero p  { font-size: 1.1rem; color: rgba(16,24,40,.7); line-height: 1.7; margin-top: 1rem; }
/* Listing pages (properties.php, includes/category-page.php): a short hero and less room above the
   filters, so the filters and the first listings are on screen together. Here and not with the
   filter CSS, which loads further down the page and would make it jump. */
.page-hero.ph-compact    { padding: 7.25rem 1.5rem 1.75rem; }
.page-hero.ph-compact h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.page-hero.ph-compact p  { font-size: 1rem; margin-top: .5rem; }
.sf-wide.section-py      { padding-top: 1.75rem; }

/* ── Category Cards ────────────────────────────────────── */
.cat-card {
  position: relative;
  height: 480px;
  border-radius: 1.5rem;
  overflow: hidden;
  display: block;
  box-shadow: var(--shadow-card);
  transition: box-shadow .4s, transform .4s;
}
.cat-card:hover { box-shadow: var(--shadow-elegant); transform: translateY(-3px); }
.cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.cat-card:hover img { transform: scale(1.08); }
.cat-card .cat-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,31,61,.95) 0%, rgba(15,31,61,.55) 60%, rgba(15,31,61,.15) 100%); }
.cat-card .cat-body { position: absolute; inset: 0; padding: 1.75rem; display: flex; flex-direction: column; }
.cat-card .cat-icon { width: 3rem; height: 3rem; border-radius: 1rem; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.25rem; transition: transform .5s; }
.cat-card:hover .cat-icon { transform: scale(1.1) rotate(6deg); }
.cat-card .cat-count { font-size: .68rem; text-transform: uppercase; letter-spacing: .24em; color: var(--accent); font-weight: 700; margin-bottom: .75rem; margin-top: auto; }
.cat-card h3 { font-size: 2.5rem; line-height: .95; color: #fff; font-weight: 500; margin: 0 0 .75rem; }
.cat-card p  { font-size: .875rem; color: rgba(255,255,255,.85); line-height: 1.6; margin: 0 0 1.5rem; }
.cat-card .cat-cta { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 700; color: #fff; border-bottom: 2px solid var(--accent); padding-bottom: .25rem; transition: gap .3s; }
.cat-card:hover .cat-cta { gap: .75rem; }
.cat-card.featured { outline: 2px solid rgba(184,137,58,.7); outline-offset: 2px; }
.featured-badge { position: absolute; top: 1rem; right: 1rem; z-index: 10; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; background: var(--gold-grad); color: #fff; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; box-shadow: var(--shadow-gold); }
/* Phones: two 480px-tall columns clipped the titles ("Commerc",
   "Agricultu") — one card per row, shorter. */
@media (max-width: 575px) {
  .grid-4.cat-grid { grid-template-columns: 1fr; }
  .cat-card { height: 22rem; }
  .cat-card .cat-body { padding: 1.5rem; }
  .cat-card p { margin-bottom: 1.25rem; }
}
/* Narrow four-column range: 2.5rem titles overflow the card below 1200px. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .cat-card h3 { font-size: 2rem; }
}

/* ── Stats ─────────────────────────────────────────────── */
.stat-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
@media (min-width: 992px) { .stat-wrap { grid-template-columns: repeat(4, 1fr); } }
.stat-item { text-align: center; padding: 2.5rem 1rem; border-left: 1px solid var(--border); }
.stat-item:first-child { border-left: none; }
@media (max-width: 991px) {
  .stat-item:nth-child(1),
  .stat-item:nth-child(2) { border-bottom: 1px solid var(--border); }
  .stat-item:nth-child(odd) { border-left: none; }
}
.stat-counter { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 600; color: var(--primary); line-height: 1; }
.stat-label   { font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); margin-top: .5rem; }

/* ── Founder section ───────────────────────────────────── */
.founder-portrait { position: relative; aspect-ratio: 4/5; max-width: 28rem; margin: 0 auto; }
.founder-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 1.5rem; box-shadow: var(--shadow-elegant); }
.founder-badge { position: absolute; border-radius: 1rem; padding: .75rem 1rem; }
.founder-badge-top { top: -1.25rem; right: -.75rem; }
.founder-badge-bot { bottom: -1.25rem; left: -.75rem; }

/* ── Property Card ─────────────────────────────────────── */
.prop-card { border-radius: var(--radius-card); overflow: hidden; background: var(--card-bg); box-shadow: var(--shadow-card); transition: box-shadow .4s, transform .4s; display: block; color: inherit; }
.prop-card:hover { box-shadow: var(--shadow-elegant); transform: translateY(-4px); }
.prop-img-wrap { position: relative; height: 220px; overflow: hidden; }
.prop-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.prop-card:hover .prop-img-wrap img { transform: scale(1.08); }
.prop-status { position: absolute; top: .75rem; left: .75rem; padding: .25rem .75rem; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.status-new  { background: var(--gold-grad); color: #fff; }
.status-sale { background: var(--primary); color: #fff; }
.status-open { background: #16a34a; color: #fff; }
.status-sold { background: #6b7280; color: #fff; }
.status-lease { background: #0f766e; color: #fff; }   /* a lease, not a sale: its own colour in mixed search results */
.prop-body { padding: 1.25rem; }
.prop-price { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; color: var(--primary); }
.prop-title { font-size: .975rem; font-weight: 600; color: var(--primary); margin: .25rem 0 .1rem; line-height: 1.3; }
.prop-address { font-size: .8rem; color: var(--muted); }
.prop-meta { display: flex; gap: 1rem; font-size: .78rem; color: var(--muted); margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.prop-meta span { display: flex; align-items: center; gap: .3rem; }

/* ── Community Card ────────────────────────────────────── */
.community-card { position: relative; height: 20rem; border-radius: var(--radius-card); overflow: hidden; display: block; box-shadow: var(--shadow-card); }
.community-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.community-card:hover img { transform: scale(1.08); }
.community-card .comm-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.2) 60%, transparent 100%); }
.community-card .comm-body { position: absolute; inset: 0; padding: 1.75rem; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.community-card .comm-prov { font-size: .68rem; text-transform: uppercase; letter-spacing: .22em; color: var(--accent); }
.community-card h4 { font-size: 2rem; margin: .25rem 0 .5rem; }
.community-card p  { font-size: .8rem; color: rgba(255,255,255,.85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.community-card .comm-cta { margin-top: 1rem; font-size: .8rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; }

/* ── Lifestyle cards ───────────────────────────────────── */
.lifestyle-card { background: var(--card-bg); border-radius: var(--radius-card); padding: 1.75rem; box-shadow: var(--shadow-card); transition: box-shadow .5s, transform .5s; display: block; color: inherit; overflow: hidden; }
.lifestyle-card:hover { box-shadow: var(--shadow-elegant); transform: translateY(-4px); }
.lifestyle-card .lc-icon { font-size: 2rem; color: var(--accent); margin-bottom: 1.5rem; transition: transform .3s; display: block; }
.lifestyle-card:hover .lc-icon { transform: scale(1.1); }
.lifestyle-card h5 { font-size: 1.25rem; color: var(--primary); margin: 0; }
.lifestyle-card .lc-explore { font-size: .8rem; color: var(--muted); opacity: 0; transition: opacity .3s; display: flex; align-items: center; gap: .3rem; margin-top: .5rem; }
.lifestyle-card:hover .lc-explore { opacity: 1; }

/* ── Tool cards ────────────────────────────────────────── */
.tool-card { position: relative; height: 18rem; border-radius: var(--radius-card); overflow: hidden; display: block; box-shadow: var(--shadow-card); transition: box-shadow .4s; }
.tool-card:hover { box-shadow: var(--shadow-elegant); }
.tool-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.tool-card:hover img { transform: scale(1.08); }
.tool-card .tool-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,31,61,.9) 0%, rgba(15,31,61,.4) 60%, transparent 100%); }
.tool-card .tool-body { position: absolute; inset: 0; padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.tool-card h5  { font-size: 1.5rem; color: #fff; margin: 0 0 .3rem; }
.tool-card p   { font-size: .8rem; color: rgba(255,255,255,.8); margin: 0 0 1rem; }
.tool-card .tool-cta { font-size: .8rem; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: .35rem; }
/* Phones: in two narrow columns the titles wrapped up into the light,
   un-shaded top of the photo. One card per row + a darker overlay. */
@media (max-width: 575px) {
  .grid-4.tool-grid { grid-template-columns: 1fr; }
  .tool-card { height: 15rem; }
  .tool-card .tool-overlay { background: linear-gradient(to top, rgba(15,31,61,.92) 0%, rgba(15,31,61,.65) 55%, rgba(15,31,61,.3) 100%); }
  .tool-card p { font-size: .85rem; margin-bottom: .85rem; }
}

/* ── BS Card ───────────────────────────────────────────── */
.bs-card { position: relative; border-radius: 1.5rem; overflow: hidden; min-height: 26rem; display: block; box-shadow: var(--shadow-card); transition: box-shadow .4s; }
.bs-card:hover { box-shadow: var(--shadow-elegant); }
.bs-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.bs-card:hover img { transform: scale(1.08); }
.bs-card .bs-overlay { position: absolute; inset: 0; background: linear-gradient(to top right, rgba(15,31,61,.9) 0%, rgba(15,31,61,.5) 55%, rgba(15,31,61,.1) 100%); }
.bs-card .bs-body { position: relative; z-index: 2; padding: 2.5rem; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; height: 100%; min-height: 26rem; }
.bs-card h3 { font-size: clamp(2rem, 4vw, 2.8rem); color: #fff; margin: 0 0 .75rem; }
.bs-card p  { max-width: 28rem; color: rgba(255,255,255,.85); line-height: 1.7; margin: 0 0 1.5rem; }
.bs-card .bs-cta { font-size: .875rem; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: .4rem; }

/* ── Market Intelligence ───────────────────────────────── */
.mi-card { padding: 1.75rem; }
.mi-card .mi-icon { font-size: 1.5rem; color: var(--accent); }
.mi-card .mi-val  { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 600; color: var(--primary); margin: 1.25rem 0 .25rem; }
.mi-card .mi-sub  { font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
.mi-card .mi-title { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: .875rem; color: var(--foreground); }
.mi-card .mi-sparkline { stroke: var(--accent); fill: none; stroke-width: 1.5; }

/* ── Live-search dropdown (bound via data-livesearch) ────── */
/* Panels are portaled into <body> to escape any ancestor's
   `overflow: hidden` — see livesearch.js `makePanel()`. Positioning
   is JS-driven off the input's getBoundingClientRect, which gives
   viewport coords — so we `position: absolute` off document body
   using the passed top/left/width. Keeping the same class name on
   the non-portaled fallback path so the styling still applies. */
.ls-wrap  { position: relative; }
.ls-panel {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0; right: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: .6rem;
    box-shadow: 0 22px 44px -18px rgba(15,31,61,.28);
    overflow: hidden;
    max-height: 26rem;
    overflow-y: auto;
}
.ls-panel.ls-panel-fixed {
    /* Portaled panels use JS-supplied coords (window scroll + input
       rect). Absolute-positioned off the body element so they can't
       be clipped by any hero/section overflow. */
    position: absolute;
    right: auto;
    /* top/left/width set inline by JS */
}
.ls-item {
    display: grid;
    grid-template-columns: 3.75rem 1fr;
    gap: .85rem;
    padding: .625rem .85rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(15,31,61,.06);
    transition: background .12s;
}
.ls-item:hover, .ls-item.ls-active { background: rgba(184,137,58,.08); }
.ls-item:last-child { border-bottom: none; }
.ls-thumb { width: 3.75rem; height: 2.75rem; border-radius: .3rem; overflow: hidden; background: var(--beige); flex-shrink: 0; }
.ls-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-img-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.ls-meta { min-width: 0; }
.ls-title { font-size: .875rem; font-weight: 600; color: var(--primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-sub   { font-size: .74rem; color: var(--muted); margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-info  { font-size: .74rem; color: var(--accent); margin-top: .12rem; font-weight: 600; }
.ls-item-more {
    display: block;
    grid-template-columns: none;
    padding: .7rem .85rem;
    text-align: center;
    font-size: .82rem;
    font-weight: 600;
    background: rgba(15,31,61,.04);
    color: var(--primary);
    border-top: 1px solid var(--border);
}
.ls-empty { padding: 1rem; text-align: center; color: var(--muted); font-size: .84rem; }

/* ── Agent card ────────────────────────────────────────── */
/* Four cards side-by-side need to read as one designed row even
   though each source photo was shot against a different backdrop
   (studio white, dark studio, natural light, etc.). The refinements
   below normalise that variance in CSS so the four sit cohesively. */
.agent-card { display: block; color: inherit; overflow: hidden; position: relative; }
/* Stretched link — makes the whole card clickable to the realtor
   profile without wrapping the card in an <a>. That matters because
   the card also holds a tel: link, and an <a> inside an <a> is invalid
   HTML: the parser closes the outer anchor early and the card body
   escapes into its own grid cell. */
.ag-stretch { position: absolute; inset: 0; z-index: 1; }
/* The phone link has to sit above the stretched overlay to stay
   independently clickable. */
.ag-phone {
    position: relative; z-index: 2;
    color: inherit; text-decoration: none;
    display: inline-flex; align-items: center; gap: .5rem;
}
.ag-phone span { font-size: .86rem; font-weight: 600; color: var(--primary); }
.ag-phone:hover span { color: var(--accent); }
.ag-img {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    /* Warm ivory ground — matches the site's ivory-mid section, so
       any photo with edge letterboxing blends in rather than clashing. */
    background: linear-gradient(180deg, #f5f0e6 0%, #ede5d3 100%);
}
.ag-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Force the face to sit in the upper third of the crop across all
       four cards regardless of the source photo's composition. */
    object-position: center 20%;
    transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}
/* Subtle vignette softens whatever the source backdrop is at the
   edges — dark corners on a light photo, light corners on a dark one
   — so adjacent cards don't fight visually. */
.ag-img::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(15,31,61,.10) 100%);
}
.agent-card:hover .ag-img img { transform: scale(1.08); }
.ag-body {
    padding: 1.5rem;
    /* Ensure the card body block occupies the same vertical space per
       card no matter how much (or little) title text lives inside. */
    min-height: 8.5rem;
    display: flex; flex-direction: column;
}
.ag-name  { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; color: var(--primary); }
.ag-title { font-size: .8rem; color: var(--accent); font-weight: 500; margin-top: .25rem; }
/* Registered brokerage — required by RAE/RECA advertising rules to sit
   with the member's name. Muted so it reads as attribution, not a
   second title. */
.ag-brokerage {
    font-size: .72rem;
    color: var(--muted);
    margin-top: .3rem;
    letter-spacing: .02em;
}
.ag-icons { margin-top: auto; padding-top: 1rem; display: flex; gap: .75rem; color: var(--muted); font-size: 1rem; }

/* ── Lead capture form ─────────────────────────────────── */
.lead-form-card { background: rgba(255,255,255,.06); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); border-radius: 1.25rem; padding: 1.75rem; }
.lead-form-card input,
.lead-form-card select {
  display: block;
  width: 100%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: .85rem;
  padding: .75rem 1rem;
  color: #fff;
  font-size: .875rem;
  margin-bottom: .75rem;
  transition: border-color .2s;
}
.lead-form-card input::placeholder { color: rgba(255,255,255,.5); }
.lead-form-card input:focus,
.lead-form-card select:focus { outline: none; border-color: var(--accent); }
.lead-form-card select option { color: var(--foreground); background: #fff; }

/* ── Testimonials ──────────────────────────────────────── */
.test-card { padding: 2rem; }
.test-card .stars { color: var(--accent); }
.test-card blockquote { font-style: italic; color: rgba(16,24,40,.85); line-height: 1.75; margin: 1.25rem 0 0; padding: 0; border: none; }
.test-card .test-footer { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.test-card .test-name { font-family: 'Cormorant Garamond', serif; font-size: 1.125rem; color: var(--primary); }
.test-card .test-city { font-size: .8rem; color: var(--muted); }

/* ── FAQ ───────────────────────────────────────────────── */
.faq-item { background: var(--card-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.5rem; cursor: pointer; margin-bottom: .75rem; border: none; width: 100%; text-align: left; transition: box-shadow .3s; }
.faq-item:hover { box-shadow: var(--shadow-elegant); }
.faq-hd   { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq-q    { font-family: 'Cormorant Garamond', serif; font-size: 1.125rem; color: var(--primary); }
.faq-icon { color: var(--accent); font-size: 1.25rem; flex-shrink: 0; transition: transform .3s; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .5s cubic-bezier(.22,1,.36,1), opacity .4s, margin-top .3s; font-size: .9rem; color: rgba(16,24,40,.75); line-height: 1.75; }
.faq-item.open .faq-answer { max-height: 200px; opacity: 1; margin-top: .75rem; }

/* ── Lead form in pages ────────────────────────────────── */
.form-input {
  display: block;
  width: 100%;
  background: var(--ivory);
  border: 1.5px solid var(--border);
  border-radius: .85rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  color: var(--foreground);
  transition: border-color .2s;
  font-family: 'Inter', sans-serif;
  margin-bottom: .75rem;
}
.form-input:focus { outline: none; border-color: var(--accent); }
.form-input-dark {
  display: block;
  width: 100%;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: .85rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  color: #fff;
  transition: border-color .2s;
  font-family: 'Inter', sans-serif;
  margin-bottom: .75rem;
}
.form-input-dark::placeholder { color: rgba(255,255,255,.5); }
.form-input-dark:focus { outline: none; border-color: var(--accent); }
.form-input-dark option { color: var(--foreground); background: #fff; }

/* ── Final CTA section ─────────────────────────────────── */
.final-cta-wrap { position: relative; border-radius: 1.5rem; overflow: hidden; padding: 5rem 2rem; text-align: center; }
.final-cta-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.final-cta-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250,248,244,.85) 0%, rgba(250,248,244,.7) 50%, rgba(250,248,244,.95) 100%); }
.final-cta-body { position: relative; z-index: 2; }

/* ── Footer ────────────────────────────────────────────── */
#site-footer { background: var(--navy-grad); color: rgba(255,255,255,.9); margin-top: 6rem; }
#site-footer .footer-logo { background: #fff; display: inline-block; border-radius: .75rem; padding: .75rem 1rem; }
#site-footer .footer-logo img { height: 48px; }
#site-footer p { color: rgba(255,255,255,.7); font-size: .9rem; line-height: 1.75; }
.footer-title { font-size: .68rem; text-transform: uppercase; letter-spacing: .22em; color: var(--accent); font-weight: 600; font-family: 'Inter', sans-serif; margin-bottom: 1rem; }
.footer-link  { display: block; color: rgba(255,255,255,.75); font-size: .875rem; text-decoration: none; margin-bottom: .625rem; transition: color .2s; }
.footer-link:hover { color: var(--accent); }
.social-btn { width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.8); text-decoration: none; transition: background .2s, border-color .2s, color .2s; font-size: .95rem; margin-right: .4rem; }
.social-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.footer-email-input { flex: 1; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: .7rem 1.25rem; color: #fff; font-size: .85rem; min-width: 0; }
.footer-email-input::placeholder { color: rgba(255,255,255,.5); }
.footer-email-input:focus { outline: none; border-color: var(--accent); }
.footer-sub-btn { background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: .7rem 1.25rem; font-size: .85rem; font-weight: 600; cursor: pointer; transition: opacity .2s; flex-shrink: 0; }
.footer-sub-btn:hover { opacity: .9; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1.5rem 0; font-size: .75rem; color: rgba(255,255,255,.55); }

/* ── Grids ─────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.grid-2cols { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .grid-2cols { grid-template-columns: repeat(2, 1fr); } }
.grid-5 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (min-width: 768px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid-5 { grid-template-columns: repeat(5, 1fr); } }

/* ── Resources / Blog ──────────────────────────────────── */
.blog-featured { display: grid; gap: 0; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow .4s, transform .4s; }
.blog-featured:hover { box-shadow: var(--shadow-elegant); transform: translateY(-3px); }
@media (min-width: 768px) { .blog-featured { grid-template-columns: repeat(2, 1fr); } }
.blog-feat-img { aspect-ratio: 4/3; overflow: hidden; }
@media (min-width: 768px) { .blog-feat-img { aspect-ratio: auto; min-height: 320px; } }
.blog-feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.blog-featured:hover .blog-feat-img img { transform: scale(1.08); }
.blog-feat-body { background: var(--card-bg); padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.blog-card { border-radius: var(--radius-card); overflow: hidden; background: var(--card-bg); box-shadow: var(--shadow-card); display: block; transition: box-shadow .4s, transform .4s; }
.blog-card:hover { box-shadow: var(--shadow-elegant); transform: translateY(-4px); }
.blog-card-img { aspect-ratio: 4/3; overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.blog-card:hover .blog-card-img img { transform: scale(1.08); }
.blog-card-body { padding: 1.5rem; }

/* ── Filter pills ──────────────────────────────────────── */
.filter-pill { display: inline-block; padding: .5rem 1.25rem; border-radius: 999px; border: 1.5px solid var(--border); font-size: .875rem; font-weight: 500; cursor: pointer; transition: background .2s, color .2s, border-color .2s; background: transparent; color: var(--foreground); margin: .25rem; }
.filter-pill:hover, .filter-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Trust badges in about ─────────────────────────────── */
.why-card { padding: 1.75rem; }
.why-card .why-icon { font-size: 1.5rem; color: var(--accent); margin-bottom: 1rem; display: block; }
.why-card h4 { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; color: var(--primary); margin: 0; }

/* ── Properties page filter bar ───────────────────────── */
.filter-bar { border-radius: 1.25rem; padding: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.filter-bar input,
.filter-bar select { background: rgba(255,255,255,.85); border: 1.5px solid var(--border); border-radius: .75rem; padding: .65rem 1rem; font-size: .875rem; color: var(--foreground); flex: 1 1 160px; min-width: 0; }
.filter-bar input:focus,
.filter-bar select:focus { outline: none; border-color: var(--accent); }
.filter-bar .fb-btn { background: var(--primary); color: #fff; border: none; border-radius: .75rem; padding: .7rem 1.5rem; font-weight: 600; font-size: .875rem; cursor: pointer; display: flex; align-items: center; gap: .5rem; white-space: nowrap; transition: background .2s; flex: 0 0 auto; }
.filter-bar .fb-btn:hover { background: var(--accent); }

/* ── Rating badge ──────────────────────────────────────── */
.rating-badge { position: absolute; bottom: -2rem; right: -2.5rem; z-index: 10; padding: 1rem 1.25rem; border-radius: 1rem; max-width: 15rem; }
/* Below the two-column layout the badge covered the photo and hung off
   the right edge — sit it under the photo instead. */
@media (max-width: 1023px) {
  .rating-badge { position: static; max-width: none; margin-top: 1rem; animation: none; }
}

/* Utility */
.text-balance { text-wrap: balance; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.gap-sm { gap: .75rem; }
.gap-md { gap: 1.5rem; }
.flex-wrap { flex-wrap: wrap; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }
.mt-auto { margin-top: auto; }
.mx-auto { margin-inline: auto; }
.w-100 { width: 100%; }
.position-relative { position: relative; }
.overflow-hidden { overflow: hidden; }

@media (max-width: 575px) {
  .section-py { padding-top: 4rem; padding-bottom: 4rem; }
}

/* ── Lead Capture Section (matched to screenshot) ─────────── */
.lead-capture-wrap {
  background: var(--navy-grad);
  border-radius: 1.5rem;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 900px) {
  .lead-capture-wrap {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

/* Copy side */
.lc-copy {}
.lc-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.12;
  color: #ffffff;
  margin: 0 0 1.25rem;
  letter-spacing: -.01em;
}
.lc-sub {
  color: rgba(255,255,255,.65);
  font-size: .95rem;
  line-height: 1.75;
  margin: 0;
}

/* Form card — dark inset card matching screenshot */
.lc-form-card {
  background: rgba(15, 26, 50, 0.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1.25rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* Inputs & select — dark rounded fields like screenshot */
.lc-input {
  display: block;
  width: 100%;
  background: rgba(40, 58, 90, 0.70);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .75rem;
  padding: .95rem 1.25rem;
  font-size: .9rem;
  font-family: 'Inter', sans-serif;
  color: rgba(255,255,255,.9);
  transition: border-color .2s, background .2s;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.lc-input::placeholder {
  color: rgba(255,255,255,.4);
}
.lc-input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(40, 58, 90, 0.90);
}
.lc-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.lc-select option {
  background: #1a2a45;
  color: #fff;
}

/* Gold CTA button — full width, matches screenshot */
.lc-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--gold-grad);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
  padding: 1rem 1.5rem;
  border-radius: .75rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 28px -6px rgba(184,137,58,.45);
  transition: opacity .2s, transform .2s;
  text-decoration: none;
  margin-top: .25rem;
}
.lc-btn:hover {
  opacity: .92;
  transform: translateY(-1px);
  color: #ffffff;
}

/* ── Hero video (same coverage as the background img) ──────── */
#hero video.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}