/* ============================================================
   components.css
   Locked component styles. Single source of truth.

   Loaded by:
     - components.html  (the demo / library page)
     - buy-residential.html, rent-residential.html, etc.
       (every production page that uses any component)

   Depends on design-tokens.css being loaded FIRST (variables).

   Component classes are taken verbatim from PROPWORTHS_FULL_WEBAPP.html
   (.topbar, .pill-cc, .lp-search, .lp-filt, .lp-card etc).
   ============================================================ */

/* ── Body baseline (production pages should also link this) ── */
.pf-page,
body.pf-page {
  font-family: var(--font-body);
  background: var(--color-cream-2);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════
   1. TOPBAR
   ══════════════════════════════════════════════════ */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-3) var(--sp-5);
  background:var(--color-navy);
  border-bottom:1px solid var(--color-line);
  height:var(--topbar-h);
}
.topbar .logo{
  color:var(--color-cream);
  font-family:Georgia,serif;
  font-size:var(--fs-md);
  letter-spacing:1.4px;
  font-weight:var(--fw-normal);
}
.topbar .logo span{color:var(--color-gold);font-weight:var(--fw-medium);margin-left:2px}
.topbar .right{display:flex;align-items:center;gap:var(--sp-3)}

.pill-cc{
  font-size:var(--fs-base);
  padding:5px 11px;
  border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:5px;
  cursor:pointer;font-family:var(--font-body);
  transition:all 0.2s ease;
}
.pill-cc.solid{
  background:rgba(196,164,124,0.16);
  border:1px solid var(--color-gold);
  color:var(--color-cream);
}
.pill-cc.solid:hover{background:rgba(196,164,124,0.24)}
.pill-cc.empty{
  background:transparent;
  border:1px dashed var(--color-gold);
  color:var(--color-gold);
}
.pill-cc .div{color:rgba(196,164,124,0.5);margin:0 2px}
.pill-cc .car{font-size:9px;color:var(--color-gold);margin-left:2px}

.auth-link{
  color:var(--color-cream);
  font-size:var(--fs-base);
  text-decoration:none;
  padding:5px 3px;
  transition:color 0.15s ease;
}
.auth-link:hover{color:var(--color-gold)}
.auth-link.gold{color:var(--color-gold);font-weight:var(--fw-medium)}
.auth-link.gold:hover{color:var(--color-gold-soft)}

.ham{
  background:rgba(245,239,228,0.06);
  border:1px solid var(--color-gold);
  color:var(--color-cream);
  font-size:var(--fs-base);
  padding:5px 11px;
  border-radius:var(--r-sm);
  cursor:pointer;
  font-family:var(--font-body);
  transition:all 0.2s ease;
}
.ham:hover{background:rgba(245,239,228,0.12)}

/* ══════════════════════════════════════════════════
   2. SEARCH BAR (.lp-search)
   ══════════════════════════════════════════════════ */
.lp-search{
  background:var(--color-navy);
  padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--color-line);
}
.lp-search .input{
  background:var(--color-cream);
  border-radius:var(--r-md);
  padding:var(--sp-2) var(--sp-3);
  display:flex;gap:var(--sp-2);align-items:center;
  box-shadow:var(--sh-search);
  max-width:var(--max-w);margin:0 auto;
}
.lp-search .input .icon{
  color:var(--color-gold);
  font-size:var(--fs-md);
  line-height:1;flex-shrink:0;
}
.lp-search .input .placeholder,
.lp-search .input input{
  flex:1;border:0;background:transparent;outline:none;
  font-size:var(--fs-md);
  color:var(--color-navy);
  font-family:var(--font-body);
  font-weight:var(--fw-medium);
}
.lp-search .input .placeholder{color:var(--color-muted-soft);font-weight:var(--fw-normal)}
.lp-search .input input::placeholder{color:var(--color-muted-soft);font-weight:var(--fw-normal)}

/* ══════════════════════════════════════════════════
   3. FILTER CHIPS (.lp-filterbar / .lp-filt / .lp-toggle)
   ══════════════════════════════════════════════════ */
.lp-filterbar{
  padding:var(--sp-2) var(--sp-5);
  background:var(--color-cream-2);
  border-bottom:1px solid var(--color-line);
}
.lp-filterbar-inner{
  max-width:var(--max-w);margin:0 auto;
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
}
.lp-filt{
  background:#fff;
  border:1px solid rgba(20,27,43,0.14);
  font-size:var(--fs-base);
  padding:5px 10px;
  border-radius:var(--r-sm);
  color:var(--color-navy);
  display:inline-flex;align-items:center;gap:4px;
  cursor:pointer;font-weight:var(--fw-medium);
  font-family:var(--font-body);
  transition:all 0.15s ease;user-select:none;
}
.lp-filt:hover{
  border-color:var(--color-gold);
  background:rgba(196,164,124,0.06);
}
.lp-filt.on{
  background:var(--color-navy);
  border-color:var(--color-navy);
  color:var(--color-cream);
}
.lp-filt.on:hover{background:var(--color-navy-soft)}
.lp-filt .car{font-size:8px;color:var(--color-muted)}
.lp-filt.on .car{color:var(--color-gold)}

.lp-toggle{
  margin-left:auto;display:flex;
  border:1px solid rgba(20,27,43,0.14);
  border-radius:var(--r-sm);overflow:hidden;
  background:#fff;
}
.lp-toggle .seg{
  padding:5px 12px;
  background:transparent;color:var(--color-navy);
  font-size:var(--fs-base);font-weight:var(--fw-medium);
  cursor:pointer;border:0;
  font-family:var(--font-body);
  transition:all 0.15s ease;
}
.lp-toggle .seg:hover{background:rgba(20,27,43,0.04)}
.lp-toggle .seg.on{
  background:var(--color-navy);
  color:var(--color-cream);
}

/* ══════════════════════════════════════════════════
   4. RESULTS BAR (.lp-results)
   ══════════════════════════════════════════════════ */
.lp-results{
  padding:var(--sp-3) var(--sp-5);
  background:var(--color-cream-2);
  border-bottom:1px solid var(--color-line);
}
.lp-results-inner{
  max-width:var(--max-w);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--sp-3);
  font-size:var(--fs-base);color:var(--color-muted);
}
.lp-results b{
  color:var(--color-navy);font-weight:var(--fw-bold);font-size:var(--fs-md);
}
.lp-sort{
  font-size:var(--fs-base);color:var(--color-navy);
  display:inline-flex;align-items:center;gap:6px;
  font-weight:var(--fw-medium);
}
.lp-sort select{
  appearance:none;background:transparent;border:0;
  font-size:var(--fs-base);color:var(--color-navy);
  font-family:var(--font-body);font-weight:var(--fw-medium);
  cursor:pointer;padding:2px 18px 2px 4px;outline:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%235F5E5A' stroke-width='2'><path d='M2 4l3 3 3-3'/></svg>");
  background-repeat:no-repeat;background-position:right 0 center;
}

/* ══════════════════════════════════════════════════
   5. LISTING CARD (.lp-card)
   ══════════════════════════════════════════════════ */
.lp-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-4);
  padding:var(--sp-5);
  max-width:var(--max-w);margin:0 auto;
}
.lp-cards.grid-4{grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
@media(max-width:880px){
  .lp-cards{grid-template-columns:1fr;gap:var(--sp-3);padding:var(--sp-3)}
  .lp-cards.grid-4{grid-template-columns:1fr 1fr}
}

.lp-card{
  background:#fff;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--color-line-soft);
  cursor:pointer;
  transition:all 0.25s ease;
  display:flex;flex-direction:column;
  box-shadow:var(--sh-card);
}
.lp-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--sh-card-hover);
  border-color:var(--color-gold);
}

/* card photo block */
.lp-card .photo{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--color-navy);
  display:flex;align-items:center;justify-content:center;
}
.lp-card .photo .photo-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform 0.4s ease;
}
.lp-card:hover .photo .photo-img{transform:scale(1.04)}
.lp-card .photo::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.40),transparent 40%,transparent 65%,rgba(0,0,0,0.18));
  pointer-events:none;z-index:1;
}
/* photo label overlay — italic Georgia, mixed case (NOT uppercase) */
.lp-card .photo .lab{
  position:relative;z-index:2;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(8px);
  color:var(--color-cream);
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--fs-md);
  padding:5px 12px;
  border-radius:var(--r-sm);
  border:1px solid rgba(196,164,124,0.4);
  letter-spacing:0.3px;
  text-align:center;
  max-width:80%;
}
.lp-card .photo .badge{
  position:absolute;top:9px;left:9px;
  background:var(--color-gold);
  color:var(--color-navy);
  font-size:var(--fs-xs);
  padding:3px 9px;
  border-radius:var(--r-xs);
  font-weight:var(--fw-bold);
  letter-spacing:0.5px;
  z-index:3;text-transform:uppercase;
  box-shadow:var(--sh-on-photo);
  font-family:var(--font-body);
}
.lp-card .photo .badge.danger,
.lp-card .photo .badge.live{background:var(--color-danger);color:#fff}
.lp-card .photo .badge.live{animation:lp-pulse 1.6s ease-in-out infinite}
@keyframes lp-pulse{0%,100%{opacity:1}50%{opacity:0.65}}
.lp-card .photo .heart{
  position:absolute;top:9px;right:9px;
  background:rgba(255,255,255,0.95);
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--color-navy);
  font-size:14px;
  z-index:3;
  box-shadow:var(--sh-on-photo);
  cursor:pointer;line-height:1;
  transition:all 0.2s ease;
}
.lp-card .photo .heart:hover{background:var(--color-gold);color:#fff;transform:scale(1.05)}
.lp-card .photo .heart.active{background:var(--color-gold);color:#fff}
.lp-card .photo .photo-count{
  position:absolute;bottom:7px;right:7px;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(4px);
  color:#fff;font-size:var(--fs-xs);
  padding:3px 8px;border-radius:var(--r-xs);
  z-index:3;font-weight:var(--fw-medium);letter-spacing:0.3px;
  font-family:var(--font-body);
}

/* card body block */
.lp-card .body{
  padding:var(--sp-3) var(--sp-3) var(--sp-3);
  display:flex;flex-direction:column;gap:4px;flex:1;
}
.lp-card .price{
  font-size:var(--fs-xl);
  color:var(--color-navy);
  font-weight:var(--fw-semi);
  line-height:1.1;
  letter-spacing:0.2px;
}
.lp-card .price .old{
  font-size:var(--fs-sm);
  color:var(--color-danger);
  text-decoration:line-through;
  font-weight:var(--fw-normal);
  margin-left:var(--sp-2);
}
.lp-card .title{
  font-size:var(--fs-md);
  color:var(--color-navy);
  line-height:1.35;
  font-weight:var(--fw-medium);
  margin-top:1px;
}
.lp-card .specs{
  font-size:var(--fs-sm);
  color:var(--color-muted);
  display:flex;gap:var(--sp-3);flex-wrap:wrap;
  margin-top:5px;
}
.lp-card .specs span{display:inline-flex;gap:3px;align-items:center;font-weight:var(--fw-medium)}
.lp-card .agent{
  margin-top:auto;
  font-size:var(--fs-xs);
  color:var(--color-muted);
  display:flex;align-items:center;gap:5px;
  padding-top:var(--sp-2);
  border-top:1px solid rgba(20,27,43,0.07);
}
.lp-card .agent .av{
  width:16px;height:16px;border-radius:50%;
  background:var(--color-gold);flex-shrink:0;
}

/* ══════════════════════════════════════════════════
   6. PAGINATION (.lp-pagination)
   ══════════════════════════════════════════════════ */
.lp-pagination{
  padding:var(--sp-5);text-align:center;
  background:var(--color-cream-2);
  border-top:1px solid var(--color-line);
  font-size:var(--fs-base);color:var(--color-navy);
}
.lp-pagination .page{
  display:inline-block;padding:4px 11px;margin:0 2px;
  border-radius:var(--r-sm);cursor:pointer;
  color:var(--color-muted);font-weight:var(--fw-medium);
  user-select:none;transition:all 0.15s ease;
}
.lp-pagination .page:hover{color:var(--color-gold)}
.lp-pagination .page.gold{color:var(--color-gold);font-weight:var(--fw-bold)}
.lp-pagination .page.active{
  background:var(--color-navy);color:var(--color-cream);
  font-weight:var(--fw-bold);
}

/* ══════════════════════════════════════════════════
   7. EMPTY STATE
   ══════════════════════════════════════════════════ */
.empty-state{
  padding:var(--sp-12) var(--sp-6);text-align:center;
  background:#fff;
  border:1px solid var(--color-line);
  border-radius:var(--r-lg);
  max-width:600px;margin:0 auto;
}
.empty-state .ico{font-size:48px;display:block;margin-bottom:var(--sp-3);opacity:0.5}
.empty-state h3{
  font-family:var(--font-display);font-style:italic;
  font-size:var(--fs-2xl);color:var(--color-navy);
  margin-bottom:var(--sp-2);
}
.empty-state p{color:var(--color-muted);font-size:var(--fs-md)}

/* ══════════════════════════════════════════════════
   8. CTA BUTTONS
   ══════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-sm);
  font-size:var(--fs-base);font-weight:var(--fw-semi);
  font-family:var(--font-body);cursor:pointer;
  border:1px solid transparent;
  transition:all 0.15s ease;text-decoration:none;
}
.btn.primary{background:var(--color-gold);color:var(--color-navy)}
.btn.primary:hover{background:var(--color-gold-soft)}
.btn.secondary{background:transparent;color:var(--color-navy);border-color:var(--color-line)}
.btn.secondary:hover{border-color:var(--color-gold);color:var(--color-gold)}
.btn.dark{background:var(--color-navy);color:var(--color-cream)}
.btn.dark:hover{background:var(--color-navy-soft)}

/* ══════════════════════════════════════════════════
   9. LISTING DETAIL (F11) — single property page
   Structure (verbatim from spec-frames/f11.lite.html):
     .ld
       .ld-gallery     hero photo + nav + badges + actions + photo-count
         .gal-photo .lab .photo-img
         .gal-badge-row .gal-badge.status / .info / .warn / .danger
         .actions .action          heart + share
         .nav.prev / .nav.next
         .gal-photo-count
       .ld-thumbs .t.on .t-img .t-lbl
       .ld-head        price + title + addr + specs + badges/.lbadge
       .ld-tabs .tab.on
       .ld-section h4 + (.ld-desc | .ld-grid .row .k/.v | .ld-feat .f .ico)
       .ld-mort .est .lbl/.v/.sub + .input .field .k/.v
       .ld-map .pin
       .ld-agent .row1 .av/.name/.agency + .ctas .b.fill/.b.out
   ══════════════════════════════════════════════════ */
.ld{
  background:var(--color-cream);
  font-family:var(--font-body);
  max-width:var(--max-w);
  margin:0 auto;
}
.ld-breadcrumb{
  background:var(--color-cream-2);
  padding:7px 14px;
  font-size:var(--fs-sm);
  color:var(--color-muted);
  font-family:var(--font-body);
  max-width:var(--max-w);margin:0 auto;
}
.ld-breadcrumb a{color:var(--color-gold);font-weight:var(--fw-medium)}

/* Hero gallery */
.ld-gallery{
  height:480px;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#3a4759,#1f2d3d);
}
.ld-gallery .gal-photo{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:rgba(245,239,228,0.9);
  font-family:var(--font-display);font-style:italic;
  font-size:var(--fs-lg);
  letter-spacing:0.5px;
  text-shadow:0 2px 8px rgba(0,0,0,0.55);
}
.ld-gallery .gal-photo .photo-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;z-index:0;
}
.ld-gallery .gal-photo::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(0,0,0,0.25) 0%,transparent 30%,transparent 60%,rgba(0,0,0,0.35) 100%);
  pointer-events:none;
}
.ld-gallery .gal-photo .lab{
  position:absolute;z-index:2;
  bottom:14px;left:14px;
  background:rgba(0,0,0,0.55);
  color:var(--color-cream);
  font-family:var(--font-display);font-style:italic;
  font-size:var(--fs-base);
  letter-spacing:0.3px;
  padding:5px 11px;border-radius:4px;
  backdrop-filter:blur(6px);
  border:1px solid rgba(196,164,124,0.3);
}
.ld-gallery .gal-badge-row{
  position:absolute;left:14px;top:14px;
  display:flex;gap:6px;flex-wrap:wrap;z-index:3;
}
.ld-gallery .gal-badge{
  padding:5px 12px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:0.04em;text-transform:uppercase;
  backdrop-filter:blur(8px);color:#fff;
  font-family:var(--font-body);
}
.ld-gallery .gal-badge.status{background:rgba(196,164,124,0.92);color:var(--color-navy)}
.ld-gallery .gal-badge.warn{background:rgba(245,158,11,0.88)}
.ld-gallery .gal-badge.danger{background:rgba(220,38,38,0.88)}
.ld-gallery .gal-badge.info{
  background:rgba(255,255,255,0.92);color:var(--color-navy);
  border:1px solid rgba(0,0,0,0.08);
}
.ld-gallery .actions{
  position:absolute;top:14px;right:14px;
  display:flex;gap:6px;z-index:3;
}
.ld-gallery .action{
  background:rgba(255,255,255,0.95);
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--color-navy);
  font-size:var(--fs-md);
  cursor:pointer;
  box-shadow:var(--sh-on-photo);
  transition:all 0.2s ease;
}
.ld-gallery .action:hover{background:var(--color-gold);color:#fff;transform:scale(1.05)}
.ld-gallery .nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.3);
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:var(--fs-2xl);
  backdrop-filter:blur(8px);
  cursor:pointer;z-index:3;
  transition:all 0.2s ease;
}
.ld-gallery .nav:hover{background:rgba(0,0,0,0.65)}
.ld-gallery .nav.prev{left:14px}
.ld-gallery .nav.next{right:14px}
.ld-gallery .gal-photo-count{
  position:absolute;bottom:14px;right:14px;
  padding:6px 14px;border-radius:var(--r-sm);
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(8px);
  color:#fff;font-size:var(--fs-base);
  font-family:var(--font-body);font-weight:var(--fw-medium);
  z-index:3;
}

/* Thumbnail strip */
.ld-thumbs{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;padding:10px;
  background:var(--color-cream-2);
  border-top:1px solid var(--color-line-soft);
  max-width:var(--max-w);margin:0 auto;
}
@media(max-width:600px){.ld-thumbs{grid-template-columns:repeat(4,1fr)}}
.ld-thumbs .t{
  aspect-ratio:16/10;
  border-radius:var(--r-sm);
  border:2px solid transparent;
  background:linear-gradient(135deg,#4a5868,#2a3950);
  position:relative;overflow:hidden;
  opacity:0.6;cursor:pointer;
  transition:all 0.2s ease;
}
.ld-thumbs .t:hover{opacity:0.85}
.ld-thumbs .t.on{
  opacity:1;border-color:var(--color-gold);
  box-shadow:0 0 0 1px rgba(196,164,124,0.3);
}
.ld-thumbs .t .t-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.ld-thumbs .t .t-lbl{
  position:absolute;bottom:4px;left:4px;right:4px;
  font-size:var(--fs-xs);color:#fff;
  background:rgba(0,0,0,0.55);
  padding:2px 5px;border-radius:3px;
  text-align:center;
  font-style:italic;font-family:var(--font-display);
  z-index:2;
}

/* Head block — price + title + addr + specs + lbadges */
.ld-head{
  padding:18px 22px;background:#fff;
  border-bottom:1px solid var(--color-line-soft);
  max-width:var(--max-w);margin:0 auto;
}
.ld-head .price{
  font-size:var(--fs-3xl);
  color:var(--color-navy);
  font-weight:var(--fw-bold);
  letter-spacing:0.2px;
}
.ld-head .price .ccy{
  color:var(--color-muted);
  font-weight:var(--fw-normal);
  font-size:var(--fs-md);
  margin-left:10px;
}
.ld-head .title{
  font-size:var(--fs-xl);
  color:var(--color-navy);
  font-family:var(--font-display);
  font-style:italic;
  margin:5px 0 6px;
  font-weight:var(--fw-normal);
}
.ld-head .addr{
  font-size:var(--fs-md);
  color:var(--color-muted);
}
.ld-head .specs{
  display:flex;gap:24px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(20,27,43,0.06);
}
.ld-head .specs .spec{
  font-size:var(--fs-sm);
  color:var(--color-muted);
}
.ld-head .specs .spec b{
  color:var(--color-navy);
  font-size:var(--fs-xl);
  font-weight:var(--fw-semi);
  display:block;
  margin-bottom:1px;
}
.ld-head .badges{
  display:flex;gap:6px;flex-wrap:wrap;
  margin-top:12px;
}
.ld-head .lbadge{
  background:rgba(196,164,124,0.18);
  border:1px solid var(--color-gold);
  color:var(--color-navy);
  font-size:var(--fs-sm);
  padding:4px 11px;border-radius:var(--r-xs);
  font-weight:var(--fw-medium);
}

/* Tab nav */
.ld-tabs{
  display:flex;background:#fff;
  border-bottom:1px solid var(--color-line-soft);
  padding:0 22px;overflow-x:auto;
  max-width:var(--max-w);margin:0 auto;
}
.ld-tabs .tab{
  padding:13px 18px;
  font-size:var(--fs-md);
  color:var(--color-muted);
  border-bottom:2px solid transparent;
  white-space:nowrap;cursor:pointer;
  font-weight:var(--fw-medium);
  font-family:var(--font-body);
  transition:all 0.15s ease;
}
.ld-tabs .tab:hover{color:var(--color-navy)}
.ld-tabs .tab.on{
  color:var(--color-navy);
  border-bottom-color:var(--color-gold);
  font-weight:var(--fw-semi);
}

/* Section blocks */
.ld-section{
  padding:18px 22px;background:#fff;
  border-bottom:1px solid var(--color-line-soft);
  max-width:var(--max-w);margin:0 auto;
}
.ld-section h4{
  margin:0 0 10px;
  font-size:var(--fs-xl);
  color:var(--color-navy);
  font-weight:var(--fw-semi);
  font-family:var(--font-display);
}
.ld-desc{
  font-size:var(--fs-md);
  color:var(--color-muted);
  line-height:1.7;
}
.ld-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 24px;
  font-size:var(--fs-base);
}
@media(max-width:600px){.ld-grid{grid-template-columns:1fr}}
.ld-grid .row{
  display:flex;justify-content:space-between;
  padding:6px 0;
  border-bottom:1px solid rgba(20,27,43,0.05);
}
.ld-grid .row .k{color:var(--color-muted)}
.ld-grid .row .v{color:var(--color-navy);font-weight:var(--fw-medium)}

.ld-feat{
  display:flex;flex-wrap:wrap;gap:7px;
  font-size:var(--fs-base);
}
.ld-feat .f{
  background:var(--color-cream-2);
  border:1px solid rgba(196,164,124,0.4);
  padding:5px 12px;border-radius:var(--r-xs);
  color:var(--color-navy);
  display:inline-flex;align-items:center;gap:6px;
  font-weight:var(--fw-medium);
}
.ld-feat .f .ico{color:#0F6E56;font-size:var(--fs-base);font-weight:var(--fw-bold)}

/* Mortgage estimator */
.ld-mort{
  padding:18px 22px;background:#fff;
  border-bottom:1px solid var(--color-line-soft);
  max-width:var(--max-w);margin:0 auto;
}
.ld-mort h4{
  margin:0 0 12px;
  font-size:var(--fs-xl);
  color:var(--color-navy);
  font-family:var(--font-display);
  font-weight:var(--fw-semi);
}
.ld-mort .est{
  background:var(--color-cream-2);
  border-radius:var(--r-sm);
  padding:14px 18px;
}
.ld-mort .est .lbl{
  font-size:var(--fs-sm);
  color:var(--color-muted);
  margin-bottom:4px;
}
.ld-mort .est .v{
  font-size:var(--fs-2xl);
  color:var(--color-navy);
  font-weight:var(--fw-bold);
  font-family:var(--font-display);
}
.ld-mort .est .sub{
  font-size:var(--fs-sm);
  color:var(--color-muted);
  margin-top:4px;
}
.ld-mort .input{
  display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;
}
.ld-mort .input .field{
  flex:1;min-width:90px;
  background:var(--color-cream-2);
  border-radius:var(--r-xs);
  padding:8px 12px;
  font-family:var(--font-body);
}
.ld-mort .input .field .k{
  font-size:var(--fs-xs);
  color:var(--color-muted);
  margin-bottom:2px;
}
.ld-mort .input .field .v{
  font-size:var(--fs-base);
  color:var(--color-navy);
  font-weight:var(--fw-medium);
}
.ld-mort .full-link{
  display:block;text-align:center;
  font-size:var(--fs-sm);
  color:var(--color-gold);
  margin-top:10px;font-weight:var(--fw-semi);
}

/* Map placeholder */
.ld-map{
  height:240px;
  background:#d9d4c5;
  background-image:linear-gradient(45deg,rgba(196,164,124,0.18) 25%,transparent 25%),linear-gradient(-45deg,rgba(196,164,124,0.18) 25%,transparent 25%);
  background-size:24px 24px;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  color:var(--color-muted);font-size:var(--fs-base);
}
.ld-map .pin{
  background:var(--color-danger);color:#fff;
  width:32px;height:32px;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-md);
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.ld-map .pin span{transform:rotate(45deg)}
.ld-map iframe{
  width:100%;height:100%;border:0;display:block;
}

/* Agent contact card */
.ld-agent{
  padding:22px;
  background:var(--color-cream-2);
  border-top:1px solid var(--color-gold);
  max-width:var(--max-w);margin:0 auto;
}
.ld-agent .row1{display:flex;align-items:center;gap:12px}
.ld-agent .av{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--color-gold),var(--color-gold-dark));
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--color-navy);
  font-size:var(--fs-xl);font-weight:var(--fw-semi);
  flex-shrink:0;
}
.ld-agent .name{
  font-size:var(--fs-xl);color:var(--color-navy);
  font-weight:var(--fw-semi);margin-bottom:2px;
}
.ld-agent .agency{font-size:var(--fs-md);color:var(--color-muted)}
.ld-agent .reviews{
  font-size:var(--fs-sm);color:var(--color-muted);
  margin-top:8px;
}
.ld-agent .ctas{
  display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;
}
.ld-agent .ctas .b{
  flex:1;min-width:130px;
  font-size:var(--fs-md);
  padding:11px 16px;
  border-radius:var(--r-sm);
  text-align:center;cursor:pointer;
  font-family:var(--font-body);
  font-weight:var(--fw-semi);
  transition:all 0.15s ease;
  border:1px solid transparent;
}
.ld-agent .ctas .b.fill{
  background:var(--color-navy);
  color:var(--color-cream);
}
.ld-agent .ctas .b.fill:hover{background:var(--color-navy-soft)}
.ld-agent .ctas .b.out{
  background:#fff;color:var(--color-navy);
  border-color:var(--color-navy);
}
.ld-agent .ctas .b.out:hover{
  background:var(--color-navy);color:var(--color-cream);
}