/* ============================================================
   CHOWREST PROPERTY — shared design system
   Ultra-premium Koh Samui real estate. Warm-luxury palette:
   espresso ink · champagne gold · cream. Serif display (Fraunces)
   over a quiet grotesque body (Inter). Editorial, generous, calm.
   ============================================================ */

:root{
  /* palette */
  --ink:#17130d;          /* espresso near-black (dark grounds) */
  --graphite:#2a2318;     /* raised dark surface */
  --gold:#c0a15e;         /* refined champagne gold — used sparingly */
  --gold-bright:#d8bd82;  /* hover / on-dark gold */
  --paper:#ffffff;
  --cream:#faf7f1;        /* warm off-white section ground */
  --sand:#efe8db;         /* soft raised warm neutral */
  --line:#e7dfce;         /* hairline borders on light */
  --line-dk:#3a3226;      /* hairline on dark */
  --text:#211d15;         /* body ink on light */
  --muted:#807769;        /* secondary text */
  --muted-dk:#a89f8e;     /* secondary on dark */

  --serif:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --shadow-sm:0 1px 2px rgba(23,19,13,.05),0 8px 24px -14px rgba(23,19,13,.18);
  --shadow-lg:0 30px 60px -28px rgba(23,19,13,.34);
  --r:18px;               /* card radius */
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1240px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--sans);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;font-feature-settings:"kern","liga";
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;line-height:1.08;
  letter-spacing:-.01em;text-wrap:balance;color:var(--ink)}
p{margin:0}
button{font-family:inherit}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.section{padding:clamp(64px,9vw,120px) 0}
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  font-weight:600;color:var(--gold);display:inline-flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);display:inline-block}
.eyebrow.center::after{content:"";width:34px;height:1px;background:var(--gold);display:inline-block}
.lede{color:var(--muted);font-size:clamp(16px,1.4vw,18px);font-weight:300;max-width:60ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:500;font-size:15px;letter-spacing:.01em;padding:16px 30px;border-radius:12px;
  border:1px solid transparent;cursor:pointer;transition:all .35s var(--ease);white-space:nowrap}
.btn-gold{background:var(--gold);color:#241d0f;box-shadow:0 12px 26px -12px rgba(192,161,94,.65)}
.btn-gold:hover{background:var(--gold-bright);transform:translateY(-2px);box-shadow:0 20px 34px -14px rgba(192,161,94,.75)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000;transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn-ghost-light{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-lg{padding:19px 40px;font-size:16px}
.btn-block{width:100%}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:all .4s var(--ease)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,5vw,48px);max-width:1440px;margin:0 auto}
.brand{font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:.06em;color:#fff}
.brand b{color:var(--gold);font-weight:500}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.82);transition:color .25s}
.nav-links a:hover{color:var(--gold-bright)}
.nav.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav.scrolled .brand{color:var(--ink)}
.nav.scrolled .nav-links a{color:var(--text)}
.nav.scrolled .nav-links a:hover{color:var(--gold-dim,#a8863f)}
.nav.scrolled .nav-cta{background:var(--ink);color:#fff;border-color:var(--ink)}
.nav-cta{padding:11px 22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.4);border-radius:10px;color:#fff;transition:all .3s}
.nav-cta:hover{background:var(--gold);border-color:var(--gold);color:#241d0f}
.nav-burger{display:none;background:none;border:0;color:#fff;cursor:pointer}
.nav.scrolled .nav-burger{color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.05);animation:heroZoom 18s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,12,8,.86) 0%,rgba(15,12,8,.55) 42%,rgba(15,12,8,.15) 100%),
             linear-gradient(0deg,rgba(15,12,8,.7) 0%,rgba(15,12,8,0) 45%)}
.hero-content{position:relative;z-index:2;padding-top:80px;max-width:760px}
.hero h1{color:#fff;font-size:clamp(44px,7vw,88px);font-weight:300;line-height:1.02;margin:22px 0 24px}
.hero h1 em{font-style:italic;color:var(--gold-bright)}
.hero-sub{color:rgba(255,255,255,.82);font-size:clamp(16px,1.5vw,20px);font-weight:300;max-width:52ch;margin-bottom:38px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-scroll{position:absolute;bottom:150px;right:clamp(20px,5vw,48px);z-index:2;
  writing-mode:vertical-rl;font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.6);display:flex;align-items:center;gap:14px}
.hero-scroll::after{content:"";width:1px;height:56px;background:linear-gradient(rgba(255,255,255,.5),transparent)}

/* ---------- search widget ---------- */
.search-wrap{max-width:1060px;margin:-66px auto 0;position:relative;z-index:20;padding:0 clamp(20px,5vw,48px)}
.search{background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);border:1px solid var(--line);
  padding:14px;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:6px}
.search-field{padding:14px 20px;border-radius:14px;transition:background .25s}
.search-field:hover{background:var(--cream)}
.search-field + .search-field{border-left:1px solid var(--line)}
.search-field label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:5px}
.search-field select,.search-field input{border:0;background:transparent;font-family:var(--sans);
  font-size:16px;font-weight:500;color:var(--ink);width:100%;padding:0;cursor:pointer}
.search-field select:focus,.search-field input:focus{outline:none}
.search-btn{align-self:stretch}

/* ---------- stat strip ---------- */
/* The homepage band that used to hold four invented statistics. It is kept
   as a separator -- the layout reads the hero, the search card and the
   collection as three beats, and without something between the last two the
   search card floats on white. Sized as a band, not as an empty section:
   the old padding left ~180px of black nothing. */
.band-divider{background:var(--ink);height:clamp(64px,7vw,96px)}
.stats{background:var(--ink);color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dk)}
.stat{background:var(--ink);padding:40px 28px;text-align:center}
.stat .n{font-family:var(--serif);font-size:clamp(34px,4vw,50px);font-weight:300;color:var(--gold-bright);line-height:1}
.stat .l{margin-top:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dk)}

/* ---------- section head ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:52px}
.sec-head h2{font-size:clamp(32px,4.4vw,52px);font-weight:300;margin-top:16px}
.sec-head.center{flex-direction:column;align-items:center;text-align:center}
.sec-head .link{font-size:14px;font-weight:600;letter-spacing:.02em;border-bottom:1.5px solid var(--ink);
  padding-bottom:3px;transition:all .25s;white-space:nowrap}
.sec-head .link:hover{color:var(--gold-dim,#a8863f);border-color:var(--gold)}

/* ---------- listing cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.card{background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:transform .5s var(--ease),box-shadow .5s var(--ease);display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(135deg,var(--sand),#e2d9c6)}
/* Cover photographs are phone photographs. Of the seven measured on
   2026-10-18, six were portrait and one was 1536x2752 -- taller than 1:2.
   object-fit:cover in this 4:3 box keeps only the middle 42% of a frame that
   shape, which is why a villa arrived on the card looking like a close-up of
   a wall, and why "it is zoomed in" was the first thing anyone said about it.

   contain shows the whole photograph. The ::before behind it is the same
   photograph blurred and overscaled, so the box is still filled and a row of
   cards still reads as equal tiles instead of letterboxed thumbnails. It
   reuses the URL the <img> has already requested -- same src, same width --
   so the backdrop costs no second download. --cover is set per card by
   cardHTML(); a card with no photo never sets it, the declaration is invalid
   at computed-value time, and the sand gradient underneath shows through. */
.card-media::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--cover,none);background-size:cover;background-position:center;
  filter:blur(22px) saturate(1.3) brightness(.9);transform:scale(1.25);
  transition:transform .9s var(--ease)}
.card-media img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain}
/* Shown in place of the photo when a listing has none. The card-media box
   already carries the sand gradient, so this only adds the mark and the line
   -- the point is that it reads as deliberate rather than as an image that
   failed to load. Muted enough that a row of these never competes with the
   cards that do have photography. */
.card-nophoto{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;color:var(--muted);opacity:.62}
.card-nophoto svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
.card-nophoto span{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase}
/* The hover zoom used to scale the photograph itself. Against object-fit:
   contain that would crop it again on hover -- undoing the point of the
   change above for as long as the pointer is over the card. The motion moves
   to the blurred backdrop, which is already overscaled and clipped, so the
   card still answers the pointer and the photograph never moves. */
.card:hover .card-media::before{transform:scale(1.34)}
.card-badges{position:absolute;top:16px;left:16px;display:flex;gap:8px;flex-wrap:wrap;z-index:2}
.badge{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 13px;border-radius:30px;backdrop-filter:blur(6px)}
.badge-gold{background:var(--gold);color:#241d0f}
.badge-ink{background:rgba(23,19,13,.82);color:#fff}
.badge-glass{background:rgba(255,255,255,.9);color:var(--ink)}
.fav{position:absolute;top:14px;right:14px;z-index:2;width:42px;height:42px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;transition:all .3s;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.fav:hover{transform:scale(1.1);background:#fff}
.fav svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.7;transition:all .25s}
.fav.on{background:var(--gold)}
.fav.on svg{stroke:#241d0f;fill:#241d0f}
.card-media .price-tab{position:absolute;z-index:2;bottom:0;left:0;background:linear-gradient(0deg,rgba(15,12,8,.85),transparent);
  color:#fff;padding:34px 18px 14px;width:100%;font-family:var(--serif);font-size:24px;font-weight:400}
.card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:22px;font-weight:400;margin-bottom:6px}
.card-loc{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:18px}
.card-loc svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:1.6}
.specs{display:flex;gap:20px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:20px}
.spec{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text);font-weight:500}
.spec svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.5}
.card .btn{margin-top:auto}

/* ---------- split / location ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.map-frame{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);
  aspect-ratio:4/3;background:var(--sand)}
.map-frame iframe{width:100%;height:100%;border:0;filter:saturate(.9)}
.proximity{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:2px}
.proximity li{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.proximity li:last-child{border-bottom:0}
.prox-ic{width:44px;height:44px;border-radius:12px;background:var(--sand);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
.prox-ic svg{width:22px;height:22px;stroke:var(--gold-dim,#a8863f);fill:none;stroke-width:1.5}
.prox-t{font-weight:600;font-size:15px}
.prox-d{font-size:13px;color:var(--muted)}
.prox-time{margin-left:auto;font-family:var(--serif);font-size:19px;color:var(--ink)}

/* ---------- value props ---------- */
.props{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.prop{padding:36px 30px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);transition:all .4s var(--ease)}
.prop:hover{background:var(--cream);transform:translateY(-4px)}
.prop-ic{width:56px;height:56px;border-radius:14px;background:var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.prop-ic svg{width:26px;height:26px;stroke:var(--gold-bright);fill:none;stroke-width:1.4}
.prop h3{font-size:23px;font-weight:400;margin-bottom:10px}
.prop p{color:var(--muted);font-size:15px;font-weight:300}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.quote{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:34px 30px;display:flex;flex-direction:column}
.stars{color:var(--gold);letter-spacing:3px;font-size:15px;margin-bottom:18px}
.quote p{font-family:var(--serif);font-size:19px;font-weight:300;line-height:1.5;color:var(--ink);font-style:italic;flex:1}
.quote-who{display:flex;align-items:center;gap:14px;margin-top:24px}
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover}
.quote-who b{display:block;font-family:var(--sans);font-size:15px;font-weight:600}
.quote-who span{font-size:13px;color:var(--muted)}

/* ---------- ultimate CTA ---------- */
.cta{position:relative;background:var(--ink);color:#fff;overflow:hidden;text-align:center}
.cta-img{position:absolute;inset:0;opacity:.22}
.cta-img img{width:100%;height:100%;object-fit:cover}
.cta-inner{position:relative;z-index:2;max-width:720px;margin:0 auto;padding:clamp(72px,10vw,130px) 24px}
.cta h2{color:#fff;font-size:clamp(38px,6vw,66px);font-weight:300;margin-bottom:22px}
.cta h2 em{font-style:italic;color:var(--gold-bright)}
.cta p{color:rgba(255,255,255,.8);font-size:19px;font-weight:300;margin-bottom:40px}
.cta-note{margin-top:22px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dk)}

/* ---------- footer ---------- */
.footer{background:#0f0c08;color:rgba(255,255,255,.72);padding:72px 0 32px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line-dk)}
.footer .brand{color:#fff;margin-bottom:16px;display:inline-block}
.footer p{font-size:14px;font-weight:300;max-width:34ch;color:var(--muted-dk)}
.footer h4{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.footer ul li{font-size:14px;color:var(--muted-dk)}
.footer ul a{font-size:14px;color:var(--muted-dk);transition:color .25s}
.footer ul a:hover{color:var(--gold-bright)}
/* .footer ul a wins over .btn-gold on specificity, which left the footer
   CTA with muted grey text on a gold ground. Restore the button colours. */
.footer ul a.btn-gold{color:#241d0f;font-size:15px}
.footer ul a.btn-gold:hover{color:#241d0f;background:var(--gold-bright)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding-top:26px;font-size:13px;color:var(--muted-dk)}

/* ============================================================
   PROPERTY DETAIL PAGE
   ============================================================ */
.pd-top{padding-top:96px;background:var(--cream)}
.crumb{font-size:13px;color:var(--muted);padding:22px 0 0}
.crumb a:hover{color:var(--gold-dim,#a8863f)}
.pd-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:18px 0 26px;flex-wrap:wrap}
.pd-head h1{font-size:clamp(30px,4.4vw,52px);font-weight:300}
.pd-head .pd-loc{color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:7px;font-size:15px}
.pd-head .pd-loc svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.6}
.pd-price{text-align:right}
.pd-price .p{font-family:var(--serif);font-size:clamp(30px,4vw,46px);font-weight:400;color:var(--ink);line-height:1}
.pd-price .u{font-size:13px;color:var(--muted);letter-spacing:.06em}

/* gallery */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;
  height:clamp(340px,52vw,560px)}
.gallery .g-main{grid-row:1/3}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:14px;background:var(--sand)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gallery figure:hover img{transform:scale(1.06)}
.g-more{position:absolute;inset:0;background:rgba(15,12,8,.5);color:#fff;display:flex;
  align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:500;letter-spacing:.05em}

/* sticky summary bar */
.pd-sticky{position:fixed;left:0;right:0;top:69px;z-index:55;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);
  opacity:0;transform:translateY(-10px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.pd-sticky.show{opacity:1;transform:translateY(0);pointer-events:auto}
.pd-sticky-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.pd-sticky .s-name{font-family:var(--serif);font-size:20px;font-weight:500}
.pd-sticky .s-meta{display:flex;gap:18px;align-items:center;font-size:13.5px;color:var(--muted)}
.pd-sticky .s-price{font-family:var(--serif);font-size:22px;color:var(--ink)}
.pd-sticky .s-right{display:flex;align-items:center;gap:20px}

/* detail body */
.pd-body{display:grid;grid-template-columns:1fr 380px;gap:56px;align-items:start;padding:clamp(48px,6vw,80px) 0}
.pd-main{min-width:0}
.pd-block{padding-bottom:44px;margin-bottom:44px;border-bottom:1px solid var(--line)}
.pd-block:last-child{border-bottom:0;margin-bottom:0}
.pd-block h2{font-size:clamp(26px,3vw,34px);font-weight:300;margin-bottom:20px}
.pd-block p{color:var(--muted);font-size:16.5px;font-weight:300;line-height:1.75;margin-bottom:16px}
.fact-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.fact{flex:1;min-width:120px;background:var(--cream);border-radius:14px;padding:20px}
.fact .k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fact .v{font-family:var(--serif);font-size:26px;color:var(--ink);margin-top:6px}

.amen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.amen-item{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;transition:all .3s}
.amen-item:hover{border-color:var(--gold);background:var(--cream)}
.amen-item svg{width:24px;height:24px;stroke:var(--gold-dim,#a8863f);fill:none;stroke-width:1.4;flex:0 0 auto}
.amen-item span{font-size:14.5px;font-weight:500}
/* Metered utilities under the amenity grid. The [hidden] rule is not optional:
   if this element ever gets a display from its class, the bare `hidden`
   attribute loses to it -- exactly what happened to .invest-row[hidden]. */
.amen-note{margin-top:18px;font-size:14px;color:var(--muted,#6b6b6b)}
.amen-note[hidden]{display:none}

/* sidebar contact card */
.pd-side{position:sticky;top:96px}
.agent-card{display:none;background:var(--ink);color:#fff;border-radius:20px;padding:34px 30px;box-shadow:var(--shadow-lg)}  /* advisor card hidden per request — remove display:none to restore */
.agent-card .who{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.agent-card .who img{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.agent-card .who b{font-family:var(--serif);font-size:20px;font-weight:500;display:block}
.agent-card .who span{font-size:13px;color:var(--muted-dk)}
.agent-card .a-note{font-size:14px;color:var(--muted-dk);font-weight:300;margin-bottom:24px;line-height:1.6}
.agent-card .trust{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:18px;
  font-size:12px;color:var(--muted-dk);letter-spacing:.04em}
.invest-card{margin-top:20px;background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:28px 26px}
.invest-card h4{font-family:var(--serif);font-size:21px;font-weight:400;margin-bottom:6px;color:var(--ink)}
.invest-card p{font-size:14px;color:var(--muted);font-weight:300;margin-bottom:18px}
.invest-row{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
/* The `hidden` attribute is only display:none in the UA sheet, so the rule
   above beat it and a hidden row still rendered -- #pd-tenure-row showed a bare
   "Tenure" label with no value on every listing whose tenure is unknown. */
.invest-row[hidden]{display:none}
.invest-row b{font-family:var(--serif);font-size:17px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .cards,.props,.quotes,.amen{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .pd-body{grid-template-columns:1fr}
  .pd-side{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .nav-links{display:none}
  .nav-burger{display:block}
  .search{grid-template-columns:1fr}
  .search-field + .search-field{border-left:0;border-top:1px solid var(--line)}
  .cards,.props,.quotes,.amen,.stats-grid,.footer-grid{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start}
  .gallery{grid-template-columns:1fr 1fr;height:auto}
  .gallery .g-main{grid-row:auto;grid-column:1/3;aspect-ratio:16/10}
  .gallery figure:not(.g-main){aspect-ratio:1}
  .pd-sticky .s-meta{display:none}
  .pd-head{flex-direction:column;align-items:flex-start}
  .pd-price{text-align:left}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ============================================================
   LEAD ENQUIRY MODAL (Supabase-connected)
   ============================================================ */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,12,8,.62);backdrop-filter:blur(4px);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.modal-backdrop.open{opacity:1;pointer-events:auto}
.modal{background:#fff;border-radius:20px;max-width:470px;width:100%;box-shadow:var(--shadow-lg);
  transform:translateY(18px) scale(.985);transition:transform .3s var(--ease);max-height:92vh;overflow:auto;position:relative}
.modal-backdrop.open .modal{transform:none}
.modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:#fff;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;transition:all .2s;z-index:2}
.modal-close:hover{border-color:var(--ink);color:var(--ink)}
.modal-hd{padding:30px 30px 0}
.modal-hd .eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600}
.modal-hd h3{font-family:var(--serif);font-size:28px;font-weight:400;margin:10px 0 0}
.prop-ctx{margin-top:14px;display:inline-flex;align-items:center;gap:8px;background:var(--cream);border:1px solid var(--line);
  border-radius:10px;padding:9px 14px;font-size:13px;color:var(--muted)}
.prop-ctx b{color:var(--ink);font-family:var(--serif);font-weight:500}
.modal-body{padding:20px 30px 30px;display:flex;flex-direction:column;gap:14px}
.mf{display:flex;flex-direction:column;gap:6px}
.mf label{font-size:12.5px;font-weight:600}
.mf input,.mf select,.mf textarea{font-family:var(--sans);font-size:15px;color:var(--ink);border:1px solid var(--line);
  border-radius:11px;padding:12px 14px;background:var(--cream);transition:border-color .2s,box-shadow .2s;width:100%}
.mf textarea{resize:vertical;min-height:84px;line-height:1.6}
.mf select{cursor:pointer;-webkit-appearance:none;appearance:none}
.mf input:focus,.mf select:focus,.mf textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px #c0a15e22;background:#fff}
.mf-row{display:flex;gap:12px}
.mf-row .mf{flex:1;min-width:0}
.modal-note{font-size:12px;color:var(--muted);text-align:center;letter-spacing:.02em}
.modal-err{font-size:13px;color:#bd4a34;background:#bd4a341a;border-radius:8px;padding:10px 12px;display:none}
.modal-success{padding:44px 30px 48px;text-align:center;display:none}
.modal-success .tick{width:62px;height:62px;border-radius:50%;background:#1f8a5f;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 18px}
.modal-success h3{font-family:var(--serif);font-size:26px;font-weight:400;margin-bottom:8px}
.modal-success p{color:var(--muted);font-size:15px}
body.modal-open{overflow:hidden}

/* skeleton shimmer while listings load */
.card.skeleton{pointer-events:none}
.card.skeleton .card-media{background:linear-gradient(100deg,var(--sand) 30%,#f3ede1 50%,var(--sand) 70%);
  background-size:200% 100%;animation:shimmer 1.3s infinite}
.card.skeleton .card-body *{background:var(--sand);color:transparent;border-radius:4px}
/* The block above was written for this and then never wired to any markup, so
   the lines had no height of their own. index.html now ships six of these
   while the real listings load. */
.card.skeleton .sk-line{height:13px;margin-bottom:10px}
.card.skeleton .sk-line-lg{height:20px;width:78%;margin-bottom:14px}
.card.skeleton .sk-line-sm{width:45%;margin-bottom:0}
@keyframes shimmer{to{background-position:-200% 0}}
/* Shown instead of the skeletons when there is nothing to show, or when the
   query failed. Never a listing, real or invented. */
.cards-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:48px 0;font-size:15px}