/* Self-hosted Manrope (variable, latin). Drop Manrope[wght].woff2 into /public/fonts — see README. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("/fonts/Manrope-variable.woff2") format("woff2-variations"),url("/fonts/Manrope-variable.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 900;font-display:swap;src:url("/fonts/Fraunces-variable.woff2") format("woff2-variations"),url("/fonts/Fraunces-variable.woff2") format("woff2")}
/* WadalaRentals.com — tokens: Harbour navy, Marigold CTA, WhatsApp green reserved for WhatsApp only. */
:root{--navy:#211A17;--navy-deep:#211A17;--ink:#171717;--mute:#68635D;--line:#DDD7CE;--mist:#EBE5DB;--paper:#FFFFFF;--marigold:#D6B98C;--marigold-deep:#7E6035;--wa:#25D366;--wa-deep:#1DA851;--ok:#3F7055;--err:#A4493D;
 --espresso:#211A17;--espresso-dark:#352A25;--ivory:#F5F2EC;--sand:#EBE5DB;--stone:#DDD7CE;--field-line:#8F836E;--champagne:#D6B98C;--accent-text:#7E6035;--on-dark:#F8F5EF;--bar-divider:#403630;--font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-display:"Fraunces",Georgia,"Times New Roman",serif;--r:6px;--r-lg:12px;--r-xl:18px;--max:1180px;--bottom-nav:64px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:80px;--s10:96px}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}  /* a class that sets display: beat the plain [hidden] attribute, leaving the mobile menu, photo lightbox and cookie banner permanently on screen */html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font:16px/1.5 var(--font);color:var(--ink);background:var(--paper);padding-bottom:calc(var(--bottom-nav) + env(safe-area-inset-bottom))}
a{color:var(--navy)}img{max-width:100%;height:auto;display:block}h1,h2,h3{line-height:1.15;margin:0 0 .5em;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(1.7rem,4.5vw,2.6rem)}h2{font-size:clamp(1.25rem,3vw,1.6rem)}h3{font-size:1.05rem}
main{max-width:var(--max);margin:0 auto;padding:0 16px}section{padding:32px 0}
main>section.band,section.band{background:var(--mist);margin:0 -16px;padding:32px 16px}@media(min-width:1212px){section.band{margin:0 calc((100vw - var(--max))/-2);padding-left:calc((100vw - var(--max))/2);padding-right:calc((100vw - var(--max))/2)}}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.fineprint{font-size:.8rem;color:var(--mute)}.intro{color:var(--mute);max-width:70ch}.prose{max-width:72ch;padding-top:24px}.prose p{line-height:1.65}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--r);border:2px solid transparent;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--marigold);color:var(--navy-deep);border-color:var(--marigold)}.btn-primary:hover{background:var(--marigold-deep);border-color:var(--marigold-deep)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}.btn-outline:hover{background:var(--mist)}
.btn-ghost{color:var(--navy);border-color:transparent}.btn-ghost:hover{background:var(--mist)}
.btn-wa{background:var(--wa);color:#fff;border-color:var(--wa)}.btn-wa:hover{background:var(--wa-deep);border-color:var(--wa-deep)}
.btn-block{width:100%}.link{background:none;border:0;color:var(--navy);text-decoration:underline;font:inherit;cursor:pointer;padding:0}.link:disabled{color:var(--mute);text-decoration:none}

/* Header */
.site-header{display:flex;align-items:center;gap:16px;padding:12px 16px;max-width:var(--max);margin:0 auto;border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:1.25rem;text-decoration:none;color:var(--navy-deep);letter-spacing:-.02em}.brand span{color:var(--marigold-deep)}
.site-nav{display:none;gap:18px;margin-left:auto}.site-nav a{text-decoration:none;font-weight:600;color:var(--ink);font-size:.95rem}.site-nav a:hover{color:var(--navy)}
.header-cta{display:none;gap:8px}.header-cta .btn-wa{padding:10px 12px}
.menu-toggle{margin-left:auto;background:none;border:0;font:inherit;font-weight:700;color:var(--navy);cursor:pointer}
.mobile-menu{display:flex;flex-direction:column;border-bottom:1px solid var(--line)}.mobile-menu[hidden]{display:none}.mobile-menu a{padding:14px 16px;text-decoration:none;font-weight:600;color:var(--ink);border-top:1px solid var(--line)}
@media(min-width:1000px){.site-nav,.header-cta{display:flex}.menu-toggle,.mobile-menu{display:none!important}.header-cta{margin-left:16px}}

/* Hero + search */
.hero{padding:28px 0 8px}.hero-copy p{color:var(--mute);max-width:56ch;font-size:1.05rem}
.search-box{display:grid;gap:10px;background:var(--navy);padding:16px;border-radius:var(--r-lg);margin-top:8px}
.search-box label{display:flex;flex-direction:column;gap:4px;color:#CFDCE4;font-size:.8rem;font-weight:600}
.search-box .btn{align-self:end;min-height:48px}
@media(min-width:800px){.search-box{grid-template-columns:repeat(6,1fr) auto;align-items:end}}
input,select,textarea{font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);padding:10px 12px;min-height:44px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--navy);outline:0;box-shadow:0 0 0 3px rgba(20,52,74,.15)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.chips a,.links-row a{display:inline-block;padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;text-decoration:none;font-weight:600;font-size:.9rem;color:var(--navy);background:var(--paper)}
.chips a:hover,.links-row a:hover{border-color:var(--navy)}.links-row{display:flex;gap:8px;flex-wrap:wrap}

/* Cards — rent leads */
.grid{display:grid;gap:16px}@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);display:flex;flex-direction:column}
.card-media{position:relative;display:block;aspect-ratio:3/2;background:var(--mist)}.card-media img{width:100%;height:100%;object-fit:cover}
.card-placeholder{display:grid;place-items:center;height:100%;color:var(--navy);font-weight:800;font-size:1.4rem;background:repeating-linear-gradient(135deg,var(--mist) 0 12px,#E4EBEF 12px 24px)}
.badge{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:4px}.badge-verified{background:var(--ok);color:#fff}
.card-media .badge{position:absolute;top:10px;left:10px}
.save{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.92);font-size:1.2rem;cursor:pointer;color:var(--navy)}.save[aria-pressed=true]{color:var(--err)}
.card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.rent{font-size:1.5rem;font-weight:800;color:var(--navy-deep);margin:0;letter-spacing:-.02em}.rent small{font-size:.85rem;font-weight:600;color:var(--mute);margin-left:4px}
.card h3{margin:0;font-size:1rem}.card h3 a{text-decoration:none;color:var(--ink)}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 10px;margin:0;font-size:.85rem}.specs dt{color:var(--mute);font-size:.72rem}.specs dd{margin:0;font-weight:600}
.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}

/* Tiles, trust, insights */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.tiles-wide{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}@media(min-width:640px){.tiles{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}
.tile{display:flex;flex-direction:column;padding:16px;border:1.5px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:var(--mute);font-size:.85rem;background:var(--paper)}.tile span{font-weight:800;font-size:1.1rem;color:var(--navy-deep)}.tile:hover{border-color:var(--navy)}
.trust{list-style:none;padding:0;margin:0;display:grid;gap:14px}@media(min-width:700px){.trust{grid-template-columns:repeat(3,1fr)}}.trust li{padding:14px;border-left:4px solid var(--marigold);background:var(--mist);border-radius:0 var(--r) var(--r) 0}.trust strong{display:block;margin-bottom:4px}
.owner-cta{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:32px 20px;text-align:left}.owner-cta h2{color:#fff}.owner-cta p{color:#CFDCE4}
.insights{width:100%;border-collapse:collapse}.insights th,.insights td{text-align:left;padding:10px;border-bottom:1px solid var(--line)}.insights th{font-size:.8rem;color:var(--mute)}

/* Search page */
.crumbs{font-size:.85rem;color:var(--mute);padding:14px 0 6px}.crumbs a{color:var(--mute)}
.search-layout{display:grid;gap:20px}@media(min-width:900px){.search-layout{grid-template-columns:280px 1fr}}
.filters{display:none}.filters.open{display:block;position:fixed;inset:0;background:var(--paper);z-index:60;overflow:auto;padding:16px}@media(min-width:900px){.filters{display:block;position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px);overflow:auto}}
.filters form{display:grid;gap:12px}.filters label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600}.filters fieldset{border:0;padding:0;margin:0}.filters legend{font-size:.85rem;font-weight:600;margin-bottom:6px}
.seg{display:flex;gap:6px}.seg label,.chip{flex-direction:row!important;align-items:center;gap:6px;padding:8px 12px;border:1.5px solid var(--line);border-radius:999px;font-weight:600;cursor:pointer;display:inline-flex;margin:0 6px 6px 0}
.seg label:has(:checked),.chip:has(:checked){border-color:var(--navy);background:var(--mist)}.seg input,.chip input{width:auto;min-height:0;margin:0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.results-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}.results-bar .count{margin:0;font-weight:700}.sort{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600}.sort select{width:auto;min-height:38px;padding:6px 10px}
@media(min-width:900px){.filters-toggle{display:none}}
.empty{padding:24px;background:var(--mist);border-radius:var(--r-lg);color:var(--mute)}#load-more{margin-top:16px}
.search-wa{text-align:center;background:var(--mist);border-radius:var(--r-lg)}.search-wa p{font-weight:700;margin:0 0 10px}

/* Property page */
.gallery{padding:0 0 12px}.gallery-main{display:block;aspect-ratio:3/2;border-radius:var(--r-lg);overflow:hidden;background:var(--mist)}.gallery-main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto}.thumbs a{flex:0 0 96px;border-radius:var(--r);overflow:hidden}.thumbs img{aspect-ratio:3/2;object-fit:cover}
@media(min-width:1000px){.gallery{display:grid;grid-template-columns:2fr 1fr;gap:8px}.thumbs{display:grid;grid-template-columns:1fr 1fr;margin:0;overflow:visible}.thumbs a{flex:auto}}
.property-layout{display:grid;gap:24px}@media(min-width:1000px){.property-layout{grid-template-columns:1fr 380px}.sidebar{position:sticky;top:12px;align-self:start}}
.prop-head .rent{font-size:2rem}.prop-head h1{font-size:clamp(1.3rem,3vw,1.8rem);margin:4px 0}.meta{color:var(--mute);margin:0 0 16px}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px;margin:0 0 24px;padding:16px;background:var(--mist);border-radius:var(--r-lg)}@media(min-width:640px){.facts{grid-template-columns:repeat(3,1fr)}}
.facts dt{font-size:.75rem;color:var(--mute)}.facts dd{margin:0;font-weight:700}.desc{line-height:1.65;max-width:70ch}
.amenities{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 24px}.amenities li{padding:6px 12px;border:1.5px solid var(--line);border-radius:999px;font-size:.9rem}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.sticky-cta{position:fixed;left:0;right:0;bottom:calc(var(--bottom-nav) + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;padding:8px 12px;background:var(--paper);border-top:1px solid var(--line);z-index:40}
@media(min-width:1000px){.sticky-cta{display:none}}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:100;display:grid;place-items:center}.lightbox[hidden]{display:none}.lightbox img{max-width:96vw;max-height:90vh;object-fit:contain}
.lightbox button{position:absolute;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer;padding:16px}.lb-close{top:8px;right:8px}.lb-prev{left:0;top:50%}.lb-next{right:0;top:50%}

/* Lead form */
.lead-form{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:18px;background:var(--paper);scroll-margin-top:20px}
.lead-form .step{display:grid;gap:10px}.lead-form label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600}.lead-form label small{font-weight:400;color:var(--mute)}
.mobile-row{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r)}.mobile-row span{padding:0 10px;color:var(--mute);font-weight:600}.mobile-row input{border:0;border-radius:0 var(--r) var(--r) 0}
.form-error{color:var(--err);font-weight:600;margin:10px 0 0}.form-note{font-size:.78rem;color:var(--mute);margin:10px 0 0}
.verified{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-weight:800}.verified::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ok);color:#fff;font-size:.8rem}
.owner-page .lead-form{max-width:640px}

/* Footer, floating WA, bottom nav */
.site-footer{background:var(--navy-deep);color:#CFDCE4;padding:32px 16px calc(24px + var(--bottom-nav));margin-top:32px}
.footer-grid{display:grid;gap:24px;max-width:var(--max);margin:0 auto}@media(min-width:800px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.site-footer .brand{color:#fff}.site-footer h4{margin:0 0 8px;color:#fff}.site-footer a{color:#CFDCE4;display:block;text-decoration:none;padding:3px 0}.site-footer .brand{display:inline-block}.site-footer .fineprint{color:#8FA5B3;max-width:var(--max);margin:24px auto 0}
.wa-float{position:fixed;right:16px;bottom:calc(var(--bottom-nav) + 12px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:8px;background:var(--wa);color:#fff;padding:12px 16px;border-radius:999px;font-weight:700;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:50}
.wa-float span{display:none}@media(min-width:1000px){.wa-float{bottom:24px}.wa-float span{display:inline}}
body[data-page-type=property] .wa-float{display:none}@media(min-width:1000px){body[data-page-type=property] .wa-float{display:inline-flex}}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;height:calc(var(--bottom-nav) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,1fr);background:var(--paper);border-top:1px solid var(--line);z-index:45}
.bottom-nav a,.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.7rem;font-weight:600;text-decoration:none;color:var(--mute);background:none;border:0;font-family:inherit;cursor:pointer}
.bottom-nav [aria-current]{color:var(--navy)}.bottom-nav .bottom-wa{color:var(--wa-deep)}.bottom-nav .bottom-wa svg{background:var(--wa);color:#fff;border-radius:50%;padding:7px;width:36px;height:36px;margin-top:-18px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
@media(min-width:1000px){.bottom-nav{display:none}body{padding-bottom:0}.site-footer{padding-bottom:24px}}

/* Admin */
.admin{display:grid;grid-template-columns:220px 1fr;min-height:100vh}.admin-side{background:var(--navy-deep);color:#fff;padding:16px}.admin-side a{display:block;color:#CFDCE4;text-decoration:none;padding:8px 10px;border-radius:var(--r)}.admin-side a.active,.admin-side a:hover{background:rgba(255,255,255,.1);color:#fff}
.admin-main{padding:20px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:20px}.stat{padding:14px;border:1px solid var(--line);border-radius:var(--r-lg)}.stat b{display:block;font-size:1.6rem;color:var(--navy-deep)}.stat span{font-size:.8rem;color:var(--mute)}
.table{width:100%;border-collapse:collapse;font-size:.9rem}.table th,.table td{padding:8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.table th{font-size:.75rem;color:var(--mute)}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.72rem;font-weight:700;background:var(--mist)}.pill.hot{background:#FDE2E1;color:var(--err)}.pill.warm{background:#FFF1D6;color:var(--marigold-deep)}
.bars{display:grid;gap:6px}.bar{display:grid;grid-template-columns:140px 1fr 40px;align-items:center;gap:8px;font-size:.8rem}.bar i{display:block;height:10px;background:var(--navy);border-radius:4px}
.timeline{list-style:none;padding:0;margin:0}.timeline li{padding:8px 0 8px 16px;border-left:2px solid var(--line);font-size:.9rem}.timeline time{display:block;color:var(--mute);font-size:.75rem}
.login{max-width:380px;margin:80px auto;padding:24px;border:1px solid var(--line);border-radius:var(--r-lg)}
@media(max-width:800px){.admin{grid-template-columns:1fr}.admin-side{display:flex;gap:4px;overflow-x:auto}}

.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:12px}.img-grid figure{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--mist)}.img-grid img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}.img-grid figcaption{padding:6px 8px;font-size:.75rem}
.cmp{position:absolute;top:10px;right:52px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.9);font-size:1rem;cursor:pointer}.cmp[aria-pressed=true]{background:var(--navy);color:#fff}
.cmp-bar{position:fixed;left:12px;right:12px;bottom:calc(var(--bottom-nav) + 12px + env(safe-area-inset-bottom));max-width:420px;margin:0 auto;display:flex;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 16px;box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:45}@media(min-width:1000px){.cmp-bar{bottom:24px;left:24px;right:auto}}
.table-wrap{overflow-x:auto}.compare th:first-child{text-align:left;white-space:nowrap}

/* ===== v1.1 — home search pill, listing filter bar, row cards, listing detail page ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero{padding:28px 0 12px;text-align:center}.hero-copy p{margin:6px auto 0}
.hero-tabs{display:flex;justify-content:center;gap:22px;margin:18px 0 12px;flex-wrap:wrap}
.hero-tabs a{font-weight:700;color:var(--ink);padding:6px 2px;border-bottom:3px solid transparent;text-decoration:none}
.hero-tabs a.active{color:var(--marigold-deep);border-color:var(--marigold)}.hero-tabs a:hover{color:var(--navy)}
.search-pill{display:grid;grid-template-columns:1fr;gap:8px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:0 8px 28px rgba(20,52,74,.12);text-align:left;max-width:980px;margin:0 auto}
.sp-field{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--mute);position:relative}
.sp-field select{border:0;background:transparent;font-weight:600;color:var(--ink);padding:10px 4px;width:100%;min-height:44px;cursor:pointer}
.sp-field select:focus{outline:2px solid var(--marigold);border-radius:6px}
.sp-rupee{font-weight:800;font-size:1.05rem;color:var(--marigold-deep);width:18px;text-align:center}
.sp-btn{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;min-height:52px;font-size:1.05rem;padding:0 28px}
@media(min-width:800px){.search-pill{grid-template-columns:1.4fr 1fr 1fr auto;border-radius:999px;padding:6px 6px 6px 14px;align-items:center}.sp-field+.sp-field{border-left:1px solid var(--line)}}
.search-box{display:none}
/* listing page: top filter bar */
.search-page{padding-top:0}
.filter-bar{background:var(--navy);border-radius:var(--r-lg);margin:0 0 14px;padding:10px 12px;position:sticky;top:8px;z-index:20}
.filter-bar form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fb-tag{background:#fff;color:var(--navy);font-weight:800;padding:9px 16px;border-radius:999px;white-space:nowrap}
.fb-pill{appearance:none;-webkit-appearance:none;background:#fff;border:1px solid #fff;border-radius:999px;padding:9px 34px 9px 14px;font-weight:600;color:var(--ink);font-size:.9rem;white-space:nowrap;cursor:pointer;min-height:40px;line-height:1.2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2A33' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px}
select.fb-pill{width:auto}
.fb-dd{position:relative}.fb-dd summary{list-style:none;display:inline-block}.fb-dd summary::-webkit-details-marker{display:none}
.fb-dd summary.on,.fb-pill.on{background:var(--marigold);border-color:var(--marigold);color:var(--navy-deep)}
.fb-menu{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);display:flex;flex-wrap:wrap;gap:8px;min-width:240px;z-index:30}
.fb-menu-wide{min-width:300px;flex-direction:column;align-items:stretch}.fb-menu-wide label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600}
.fb-prefs{display:flex;flex-wrap:wrap;gap:8px}.fb-more .fb-menu{left:auto;right:0}
.results-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 12px}
.results-head h1{font-size:1.35rem;margin:0}.results-head h1 span{color:var(--navy)}
.results-head .sort{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--mute)}.results-head .sort select{padding:8px 10px}
/* row cards (MagicBricks-style) */
.rows{display:grid;gap:14px}
.row-card{display:grid;grid-template-columns:1fr;padding:12px;gap:12px;box-shadow:0 2px 10px rgba(20,52,74,.06)}
.row-media{position:relative;display:block;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--mist)}
.row-media img,.row-media .card-placeholder{width:100%;height:100%;object-fit:cover}
.row-photos,.row-posted{position:absolute;left:8px;background:rgba(0,0,0,.65);color:#fff;font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:4px}.row-photos{top:8px}.row-posted{bottom:8px}
.row-body h3{margin:0 0 4px;font-size:1.05rem;line-height:1.3}.row-body h3 a{color:var(--ink);text-decoration:none}.row-body h3 a:hover{color:var(--navy)}
.row-project{font-size:.85rem;color:var(--navy);display:inline-block;margin-bottom:8px}
.row-facts{list-style:none;margin:0 0 8px;padding:8px 12px;background:var(--mist);border-radius:var(--r);display:flex;flex-wrap:wrap;gap:6px 20px}
.row-facts li{font-weight:700;font-size:.9rem}.row-facts small{display:block;font-weight:600;color:var(--mute);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase}
.row-tag{font-size:.82rem;color:var(--ok);font-weight:600;margin:4px 0}.row-tag::before{content:"✓ ";}
.row-desc{color:var(--mute);font-size:.88rem;margin:4px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-agent{font-size:.78rem;color:var(--mute);margin:6px 0 0}
.row-side{display:grid;gap:8px;align-content:start}.row-side .rent{font-size:1.35rem;font-weight:800;margin:0}
.row-deposit{font-size:.8rem;color:var(--mute);margin:-4px 0 4px;text-decoration:underline dotted}
.row-side .btn{justify-content:center;border-radius:999px}
.row-tools{display:flex;gap:8px}.row-tools .save,.row-tools .cmp{position:static;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:1.05rem;cursor:pointer}
.row-tools [aria-pressed="true"]{background:var(--marigold);border-color:var(--marigold)}
@media(min-width:800px){.row-card{grid-template-columns:260px 1fr 190px;padding:16px}.row-side{border-left:1px solid var(--line);padding-left:16px}}
/* listing detail page */
.listing .lst-head{margin-bottom:12px}.listing .lst-head .rent{font-size:1.7rem;margin:0}.lst-charges{font-size:.85rem;font-weight:600;color:var(--mute);margin-left:8px}
.listing .lst-head h1{font-size:1.25rem;margin:6px 0}.listing .meta{color:var(--mute);margin:0}.lst-map{font-weight:700}
.lst-top{display:grid;gap:16px;margin-bottom:12px}
.lst-top .gallery{margin:0}.gallery-main{position:relative;display:block}.gallery-main .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6);pointer-events:none}
.thumb-more{display:flex;align-items:center;justify-content:center;background:var(--mist);border-radius:var(--r);font-weight:700;color:var(--navy);text-decoration:none;aspect-ratio:3/2}
.quick{list-style:none;margin:0 0 12px;padding:12px 14px;background:var(--mist);border-radius:var(--r-lg);display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:700}
.lst-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 16px;margin:0}
.lst-grid dt{font-size:.78rem;color:var(--mute)}.lst-grid dd{margin:0;font-weight:700}.lst-grid dd small{display:block;font-weight:500;color:var(--mute);font-size:.75rem}
@media(min-width:1000px){.lst-top{grid-template-columns:1fr 1fr}.lst-grid{grid-template-columns:repeat(3,1fr)}}
.listing .cta-row{margin:14px 0 20px}.listing .cta-row .btn{border-radius:999px;min-width:180px;justify-content:center}
.lst-landmarks,.lst-more,.about-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin:0 0 18px;background:#fff}
.lst-landmarks h2,.lst-more h2,.about-card h2{margin:0 0 14px;font-size:1.2rem}
.lm-grid{display:grid;grid-template-columns:1fr;gap:12px}@media(min-width:800px){.lm-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}
.lm-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}.lm-card h3{margin:0 0 8px;font-size:1rem}
.lm-card ul{list-style:none;margin:0;padding:0}.lm-card li{font-size:.9rem;color:var(--mute);margin:4px 0}.lm-card li::before{content:"✓ ";color:var(--ok);font-weight:800}.lm-card li b{color:var(--ink)}
.kv{margin:0}.kv div{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--mist)}
.kv dt{color:var(--mute)}.kv dd{margin:0;font-weight:700}.kv dd small{font-weight:500;color:var(--mute)}
.lst-more .desc{margin-top:14px;color:var(--mute)}.lst-more .desc b{color:var(--ink)}
.about-project{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-bottom:10px}.about-project h3{margin:0;font-size:1.05rem}
.about-project small{display:block;color:var(--mute);font-size:.78rem}.about-project b{font-size:1rem}
.about-ico{width:64px;height:64px;border-radius:var(--r);background:var(--mist);display:flex;align-items:center;justify-content:center;font-size:1.8rem}
.about-links a{margin-right:22px;font-weight:700}.about-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.about-head h2{margin:0}.about-head a{font-weight:700;white-space:nowrap}
.contact-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;background:#fff;position:sticky;top:12px}
.contact-card h3{margin:0 0 8px}.rera{display:inline-block;border:1px solid var(--ok);color:var(--ok);font-size:.7rem;font-weight:800;padding:2px 8px;border-radius:4px;margin-bottom:6px}
.agent-name{font-weight:800;font-size:1.05rem;margin:4px 0 0}.agent-phone{margin:2px 0 12px;color:var(--mute)}
.contact-btns{display:grid;gap:8px}.contact-btns .btn{justify-content:center;border-radius:999px}
#contact-form{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}#contact-form .lead-form{border:0;padding:0;box-shadow:none}
.sticky-cta .btn{border-radius:999px}
.hero .chips{justify-content:center}
.lst-top .gallery{display:block}.lst-top .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px;overflow:visible}.lst-top .thumbs img{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.sticky-cta{grid-template-columns:1fr 1fr}

/* Cookie notice: compact, light, both buttons clearly visible */
.cookie{position:fixed;left:8px;right:8px;bottom:calc(var(--bottom-nav) + 8px + env(safe-area-inset-bottom));background:#fff;color:var(--ink);border:1px solid var(--line);padding:8px 34px 8px 12px;border-radius:var(--r-lg);box-shadow:0 6px 24px rgba(20,52,74,.18);z-index:60;font-size:.8rem;display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap}
.cookie[hidden]{display:none}  /* .cookie sets display:flex, which beat the [hidden] attribute — the banner stayed on screen and kept swallowing taps after it was dismissed */
.cookie p{margin:0;flex:1 1 200px;line-height:1.35}.cookie a{color:var(--navy);font-weight:600}
.cookie-btns{display:flex;gap:8px}.cookie .btn{padding:7px 14px;font-size:.8rem;min-height:34px;border-radius:999px}
.cookie-essential{background:#fff;color:var(--navy);border:2px solid var(--navy)}.cookie-essential:hover{background:var(--mist)}
.cookie-close{position:absolute;top:4px;right:6px;border:0;background:transparent;font-size:1.3rem;line-height:1;color:var(--mute);cursor:pointer;padding:4px 6px}.cookie-close:hover{color:var(--ink)}
@media(min-width:1000px){.cookie{left:auto;right:20px;bottom:20px;max-width:420px}}
.btn-sm{min-height:38px;padding:7px 14px;font-size:.85rem}
/* Hide the read-only user's action controls in the CRM */
body.read-only .admin-main button[data-toggle],body.read-only .admin-main form button{opacity:.45;pointer-events:none}
.admin-main .table textarea{min-height:0;font-size:.82rem}

/* ===========================================================================
   Brand v4 — Espresso + Warm Ivory, Champagne as accent only.
   Ratio held at roughly 60 ivory/white · 30 espresso · 10 champagne.

   Measured, and the three places the spec needed a nudge:
     menu #F8F5EF on espresso 15.76 · champagne on espresso 9.13
     espresso on champagne 9.13 · text #171717 on ivory 16.05
     warm grey #6D6862 on Soft Sand 4.40  -> secondary text darkened to
       #68635D (white 5.95 / ivory 5.32 / sand 4.75) so it clears AA on
       every surface it actually lands on.
     Soft Stone #DDD7CE is 1.43 on white — right for dividers and card
       edges, but a form field's border IS the control, so fields use
       #8F836E (3.72 on white, 3.33 on ivory).
     Champagne is 1.88 on white, so it is never text on a light surface.
       Where a gold-toned label is wanted, --accent-text #7E6035 is used.

   One rule keeps CTAs coherent: on LIGHT surfaces the primary CTA is
   Espresso; on DARK surfaces it is Champagne. Never two CTA colours at once.
   =========================================================================== */
body{background:var(--ivory);color:var(--ink)}
main{background:transparent}

/* -- Type ------------------------------------------------------------------ */
h1,h2,.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;line-height:1.1;color:var(--ink)}
h3,h4{font-family:var(--font);font-weight:800;letter-spacing:-.01em}
.hero-copy h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.06}
.hero-copy p,.intro{font-family:var(--font);font-weight:500;color:var(--mute);
  font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.6}
.eyebrow{font-family:var(--font);font-size:.76rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-text);margin:0 0 var(--s3)}
a{color:var(--espresso)}
.rent,.price,.specs dd,.row-deposit,.stat b{font-variant-numeric:tabular-nums lining-nums}
.rent{font-family:var(--font);font-weight:800;letter-spacing:-.025em;color:var(--ink)}

/* -- Buttons: espresso on light, champagne on dark ------------------------- */
.btn{border-radius:999px;font-family:var(--font);font-weight:700;letter-spacing:-.005em;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.btn-primary{background:var(--espresso);border-color:var(--espresso);color:var(--on-dark)}
.btn-primary:hover{background:var(--espresso-dark);border-color:var(--espresso-dark);color:var(--on-dark)}
.btn-outline{background:transparent;color:var(--espresso);border-color:var(--espresso)}
.btn-outline:hover{background:var(--espresso);border-color:var(--espresso);color:var(--on-dark)}
.btn-ghost{color:var(--espresso)}
.btn-ghost:hover{background:var(--sand)}
.link{color:var(--espresso)}
/* on any espresso surface the CTA flips to champagne */
.site-header .btn-primary,.owner-cta .btn-primary{background:var(--champagne);border-color:var(--champagne);color:var(--espresso)}
.site-header .btn-primary:hover,.owner-cta .btn-primary:hover{background:#C9A87A;border-color:#C9A87A;color:var(--espresso)}

/* -- Top bar --------------------------------------------------------------- */
.site-header{max-width:none;background:var(--espresso);border-bottom:1px solid var(--bar-divider);
  gap:12px;padding:10px max(16px,calc((100% - var(--max))/2))}
.site-header .brand{color:var(--on-dark);font-family:var(--font);letter-spacing:-.025em}
.site-header .brand span{color:var(--champagne)}
.site-nav{gap:13px;font-size:.88rem;min-width:0}
.site-nav a{color:var(--on-dark);white-space:nowrap}
.site-nav a:hover,.site-nav a:focus-visible,.site-nav a[aria-current]{color:var(--champagne)}
.header-cta{gap:8px}
.header-cta .btn{padding:9px 16px;min-height:40px;white-space:nowrap}
.header-cta .btn-ghost{color:var(--on-dark);border-color:transparent}
.header-cta .btn-ghost:hover{background:rgba(255,255,255,.10);color:var(--champagne)}
.menu-toggle{color:var(--on-dark);min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.site-header :focus-visible{outline:3px solid var(--champagne);outline-offset:2px}
.mobile-menu{border-top:0;border-bottom:1px solid var(--stone);background:var(--paper)}
.mobile-menu a{color:var(--ink);border-top-color:var(--stone)}
.mobile-menu a:hover{background:var(--sand)}
@media(min-width:1000px){
  /* No-JavaScript fallback only: app.js adds .js-nav and then measures what
     actually fits, which is exact instead of these guessed breakpoints. */
  .site-nav:not(.js-nav) a:nth-child(n+7){display:none}
  @media(max-width:1319px){.site-nav:not(.js-nav) a:nth-child(n+6){display:none}}
  @media(max-width:1179px){.site-nav:not(.js-nav) a:nth-child(n+5){display:none}}
  .site-nav.js-nav > a[hidden]{display:none}
  /* "List Your Property" now stays: it is the owner-side call to action and the
     nav's measured overflow absorbs the space instead. */
}

/* -- Surfaces: white cards on warm ivory, sand for light sections ---------- */
.card,.contact-card,.search-pill,.filter-bar,.cmp-bar{background:var(--paper);border-radius:var(--r-xl)}
.card{border:1px solid var(--stone)}
.card:hover{border-color:var(--champagne);box-shadow:0 14px 34px rgba(33,26,23,.10)}
.band,.mist{background:var(--sand)}
.tile{background:var(--paper);border:1px solid var(--stone);border-radius:var(--r-lg)}
.tile:hover{border-color:var(--champagne)}
.tile span{color:var(--ink)}
.chips a,.links-row a{background:var(--paper);border-color:var(--stone);color:var(--espresso);
  min-height:44px;display:inline-flex;align-items:center}
.chips a:hover,.links-row a:hover{border-color:var(--champagne);background:var(--sand)}
.specs{border-color:var(--stone)}

/* -- Form fields: the border is the control, so it is darker than a divider - */
input,select,textarea{background:var(--paper);border:1.5px solid var(--field-line);color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--espresso);box-shadow:0 0 0 3px rgba(33,26,23,.14)}

/* -- Hero tabs + search ---------------------------------------------------- */
.hero-tabs a{color:var(--mute)}
.hero-tabs a.active{color:var(--ink);border-color:var(--champagne)}
.hero-tabs a:hover{color:var(--ink)}
.search-pill{border:1px solid var(--stone);box-shadow:0 12px 36px rgba(33,26,23,.09)}
.search-pill .sp-field select{border:0;background:transparent}
.sp-field svg,.sp-rupee{color:var(--espresso)}
.sp-field select:focus{outline:2px solid var(--espresso);box-shadow:none}
.sp-btn{box-shadow:0 6px 18px rgba(33,26,23,.20)}

/* -- Listing filters -------------------------------------------------------- */
.filter-bar{border:1px solid var(--stone);box-shadow:0 2px 12px rgba(33,26,23,.05)}
.fb-tag{background:var(--espresso);color:var(--on-dark)}
.fb-pill{background:var(--paper);border:1.5px solid var(--stone);color:var(--ink)}
.fb-pill:hover{border-color:var(--champagne)}
.fb-dd summary.on,.fb-pill.on{background:var(--espresso);border-color:var(--espresso);color:var(--on-dark);font-weight:700}
@media(max-width:999px){
  .filter-bar{position:static;padding:var(--s2) 0;background:transparent;border:0;box-shadow:none;margin-bottom:var(--s4)}
  .filter-bar form{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:var(--s2);
    padding:2px var(--s4) var(--s2);margin:0 calc(var(--s4) * -1);scrollbar-width:none}
  .filter-bar form::-webkit-scrollbar{display:none}
  .filter-bar form > *{flex:0 0 auto}
  .fb-pill,.fb-dd summary,.fb-tag{white-space:nowrap}
}

/* -- Owner strip: espresso block, champagne CTA ---------------------------- */
.owner-cta{background:var(--espresso);border:0;color:var(--on-dark);
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding:26px 22px;border-radius:var(--r-xl)}
.owner-cta h2{color:var(--on-dark);margin:0}
.owner-cta p{color:#CFC7BE;margin:0;max-width:56ch}
.owner-cta .eyebrow{color:var(--champagne)}
@media(min-width:800px){
  .owner-cta{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px}
  .owner-cta div{flex:1}
}

/* -- Status ---------------------------------------------------------------- */
.badge-verified{background:var(--ok);color:#fff}
.rera{border-color:var(--ok);color:var(--ok)}
.form-error,.pill.hot{color:var(--err)}
.trust li{border-left:4px solid var(--champagne);background:var(--sand)}

/* -- Sticky property actions ----------------------------------------------- */
.sticky-cta{background:var(--paper);border-top:1px solid var(--stone);
  grid-template-columns:auto 1fr 1.3fr;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s4);box-shadow:0 -4px 20px rgba(33,26,23,.10)}
.sc-price{margin:0;line-height:1.1;white-space:nowrap}
.sc-price b{display:block;font-size:1.05rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums}
.sc-price span{font-size:.7rem;color:var(--mute)}
@media(max-width:400px){.sticky-cta{grid-template-columns:auto 1fr}.sticky-cta .js-wa{display:none}}

/* -- Empty state ------------------------------------------------------------ */
.empty{text-align:center;padding:var(--s8) var(--s4);background:var(--sand);
  border-radius:var(--r-xl);margin:var(--s5) 0}
.empty h2{margin:0 0 var(--s2)}
.empty p{color:var(--mute);margin:0 auto var(--s5);max-width:46ch}
.empty-actions{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center}
.js-clear:empty{display:none}
@media(max-width:999px){.empty{padding-bottom:calc(var(--s8) + 56px)}}

/* -- WhatsApp: brand green kept, label darkened (white was 1.98:1) --------- */
.btn-wa,.wa-float,.bottom-nav .bottom-wa{color:var(--espresso)}
.btn-wa:hover,.wa-float:hover{color:var(--espresso)}
.btn-wa svg,.wa-float svg{color:#fff}
.bottom-nav .bottom-wa svg{background:var(--wa);color:#fff}

/* -- Bottom nav, tools, focus ---------------------------------------------- */
.bottom-nav{background:var(--paper);border-top-color:var(--stone)}
.bottom-nav [aria-current]{color:var(--espresso)}
.bottom-nav a,.bottom-nav button{min-height:44px}
.save,.cmp{width:40px;height:40px}
.row-tools .save,.row-tools .cmp{width:44px;height:44px;border-color:var(--stone)}
.row-tools [aria-pressed="true"],.cmp[aria-pressed=true]{background:var(--espresso);border-color:var(--espresso);color:#fff}
.card-placeholder{color:var(--espresso);text-decoration:none;
  background:repeating-linear-gradient(135deg,var(--sand) 0 12px,#E3DCD0 12px 24px)}
.card-media,.card-media *,.row-media,.row-media *{text-decoration:none}
.row-deposit{text-decoration:none}
:focus-visible{outline:3px solid var(--espresso);outline-offset:2px}
.cookie{background:var(--paper);border-color:var(--stone)}
.cookie-essential{color:var(--espresso);border-color:var(--espresso)}
.cookie-essential:hover{background:var(--sand)}
.site-footer{background:var(--espresso);color:var(--on-dark)}
.site-footer a{color:#DCD5CB}
.site-footer a:hover{color:var(--champagne)}

@media(max-width:560px){
  .hero-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:18px;scrollbar-width:none;padding-bottom:2px}
  .hero-tabs::-webkit-scrollbar{display:none}
  .hero-tabs a{white-space:nowrap}
}
@media(max-width:999px){
  body{padding-bottom:calc(var(--bottom-nav) + 84px + env(safe-area-inset-bottom))}
  body[data-page-type=property]{padding-bottom:calc(var(--bottom-nav) + 150px + env(safe-area-inset-bottom))}
}
/* Footer sits on espresso, so the wordmark accent must be Champagne (9.13:1),
   not the light-surface accent #7E6035 which is only 2.95:1 there. */
.site-footer .brand{color:var(--on-dark)}
.site-footer .brand span{color:var(--champagne)}
.js-clear{min-height:44px;display:inline-flex;align-items:center}

/* -- Brand logo ------------------------------------------------------------ */
/* One SVG lockup in the palette's on-dark ivory; the header and footer are both
   Espresso, so a single file covers them. width/height on the <img> keep the
   intrinsic ratio so nothing shifts while the SVG loads. */
.brand{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0}
.brand img{display:block;width:auto;height:28px}
.site-header .brand img{height:28px}
.site-footer .brand img{height:30px;margin-bottom:10px}
@media(max-width:1199px){.site-header .brand img{height:26px}}
@media(max-width:999px){.site-header .brand img{height:25px}}
@media(max-width:359px){.site-header .brand img{height:21px}}
@media print{.brand img{filter:invert(1)}}

/* -- Top bar layout -------------------------------------------------------- */
/* Three fixed roles: the logo and the buttons never shrink, the nav takes what is
   left and is clipped rather than allowed to run under the buttons. app.js then
   measures what actually fits and moves the rest into the "More" menu, so the
   links are never both clipped AND unreachable. */
.site-header{align-items:center}
.site-header .brand{flex:0 0 auto;margin-right:4px}
.site-nav{flex:1 1 auto;min-width:0;overflow:hidden;margin-left:auto;
  gap:14px;letter-spacing:.005em;align-items:center}
/* Once app.js has measured, the links hug the right so they sit next to "More"
   and the logo keeps the open space to itself. Only with .js-nav: without it the
   fallback could clip from the left instead of the right. */
.site-nav.js-nav{justify-content:flex-end}
.site-nav > a{display:inline-flex;align-items:center;min-height:40px;padding:0;font-weight:600;font-size:.82rem}
.site-header .header-cta{flex:0 0 auto;margin-left:14px;align-items:center}
.site-header .nav-more{flex:0 0 auto;margin-left:2px}   /* 2px + the header's own 12px gap = the same 14px rhythm as the nav links */

/* "List Your Property" is the owner-side call to action: champagne outline so it
   reads as an action against the ivory nav links, one step below the solid
   champagne "Find a Rental". Champagne on Espresso is 9.13:1. */
.site-header .header-cta .btn-ghost{color:var(--champagne);border:1px solid var(--champagne);background:transparent}
.site-header .header-cta .btn-ghost:hover,
.site-header .header-cta .btn-ghost:focus-visible{background:var(--champagne);color:var(--espresso);border-color:var(--champagne)}
.site-header .header-cta .btn{min-height:40px;padding:9px 16px;font-size:.84rem;white-space:nowrap}
.site-header .header-cta .btn-wa{padding:9px 11px}

/* -- "More" overflow for the desktop nav ----------------------------------- */
/* Sits outside .site-nav so the dropdown is not clipped by the nav's overflow.
   Without JavaScript it never appears and the nth-child rules above are the
   fallback, so nothing can overlap either way. */
.nav-more{position:relative;display:flex;align-items:center}
.nav-more[hidden]{display:none}
.nav-more-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:0 2px;
  font:inherit;font-weight:600;font-size:.8rem;color:var(--on-dark);cursor:pointer;min-height:40px;white-space:nowrap}
.nav-more-btn:hover,.nav-more-btn[aria-expanded=true]{color:var(--champagne)}
.nav-more-btn svg{transition:transform .15s ease}
.nav-more-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.nav-more-list{position:absolute;top:calc(100% + 12px);right:0;z-index:60;min-width:210px;padding:6px;
  background:var(--paper);border:1px solid var(--stone);border-radius:var(--r-lg);
  box-shadow:0 14px 36px rgba(33,26,23,.22);display:flex;flex-direction:column}
.nav-more-list[hidden]{display:none}
.nav-more-list a{display:block;padding:11px 12px;border-radius:var(--r);
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem;white-space:nowrap}
.nav-more-list a:hover,.nav-more-list a:focus-visible{background:var(--sand);color:var(--espresso)}

/* -- Sticky top bar -------------------------------------------------------- */
/* --hdr is the bar's real height; anything else that sticks (the search filter
   bar, the desktop filter rail) offsets by it so it never hides underneath. */
:root{--hdr:65px}
@media(max-width:359px){:root{--hdr:61px}}
.site-bar{position:sticky;top:0;z-index:55;background:var(--espresso)}
/* Above the floating WhatsApp/chat launchers (50), below the cookie notice (60),
   the chat panel (70) and the photo lightbox (100), all of which are overlays
   that should cover the bar. */
@supports not (position:sticky){.site-bar{position:static}}
.filter-bar{top:calc(var(--hdr) + 8px)}
@media(min-width:900px){.filters{top:calc(var(--hdr) + 12px);max-height:calc(100vh - var(--hdr) - 24px)}}
/* In-page anchors must not land under the bar. */
:target{scroll-margin-top:calc(var(--hdr) + 12px)}
h2[id],h3[id],section[id]{scroll-margin-top:calc(var(--hdr) + 12px)}

/* -- Home: mobile ordering ------------------------------------------------- */
/* The quick-filter chip row repeats the Flat type dropdown that sits directly
   above it, so on a phone it is pure duplication — hidden there, kept on
   desktop where the row reads as a shortcut rather than a repeat. */
@media(max-width:999px){
  .hero .chips{display:none}
  /* "Popular searches" is SEO/browse filler, not the first thing a phone visitor
     wants under the search box. Moved to the end visually; the DOM order (and so
     the crawled order) is unchanged. */
  /* Scoped to the home page: turning <main> into a flex container elsewhere
     would give .filter-bar a shrink-to-fit parent and silently kill its
     position:sticky on the search results page. */
  body[data-page-type=home] main{display:flex;flex-direction:column}
  body[data-page-type=home] main > *{order:1}
  body[data-page-type=home] main > .owner-cta{order:90}
  body[data-page-type=home] main > .popular-searches{order:91}
}

/* ===========================================================================
   Brand v5 — Signature Yellow + Near Black + Warm Off-White
   ---------------------------------------------------------------------------
   Ratio target: yellow 10–15%, near-black 15–20%, white/off-white 65–75%.
   Yellow is a SIGNATURE, not a surface: it owns the top bar, one accent button
   and the chat launcher, and nothing else. It is never used for text — #FFCC00
   on white is 1.51:1, so any yellow type would be unreadable.

   Two values differ from the brief, both for legibility:
   · Form-field borders use #8E8880, not #E5E2DC. A field's edge is a control
     boundary and needs 3:1; #E5E2DC on #F7F6F2 is 1.20:1. #E5E2DC is kept for
     decorative rules and card edges, where it is correct.
   · Small "accent" type (eyebrows, in-card labels) uses #7A6608, a dark gold,
     because the signature yellow cannot carry text.
   =========================================================================== */
:root{
  --yellow:#FFCC00; --yellow-deep:#E6B800;
  --navy:#181818; --navy-deep:#111111;
  --ink:#181818; --mute:#68645E; --line:#E5E2DC; --mist:#F0EEE8; --paper:#FFFFFF;
  --marigold:#FFCC00; --marigold-deep:#E6B800;
  --espresso:#181818; --espresso-dark:#111111;
  --ivory:#F7F6F2; --sand:#F0EEE8; --stone:#E5E2DC;
  --field-line:#8E8880; --champagne:#FFCC00; --accent-text:#7A6608;
  --on-dark:#FFFFFF; --bar-divider:rgba(0,0,0,.16);
}
body{background:var(--ivory);color:var(--ink)}
a{color:var(--ink)}

/* -- Top bar: yellow signature, black type ---------------------------------- */
.site-bar{background:var(--yellow)}
.site-header{background:var(--yellow);border-bottom:1px solid var(--bar-divider)}
.site-header .brand{color:var(--ink)}
.site-nav > a{color:var(--ink);position:relative}
/* Hover does not repaint the whole item — a black underline reads cleaner on
   yellow and keeps the bar calm. */
.site-nav > a::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:2px;
  background:var(--navy-deep);transform:scaleX(0);transform-origin:left;transition:transform .16s ease}
.site-nav > a:hover{color:#34302A}
.site-nav > a:hover::after,.site-nav > a:focus-visible::after{transform:scaleX(1)}
.site-nav > a[aria-current]{color:var(--navy-deep);font-weight:700}
.site-nav > a[aria-current]::after{transform:scaleX(1)}
.site-header :focus-visible{outline:3px solid var(--navy-deep);outline-offset:2px}
.nav-more-btn{color:var(--ink)}
.nav-more-btn:hover,.nav-more-btn[aria-expanded=true]{color:var(--navy-deep)}
.menu-toggle{color:var(--ink)}

/* CTA: solid near-black on yellow, per the brief. "Find a Rental" takes the
   outline so the bar has one filled button, not two competing ones. */
.site-header .header-cta .btn-ghost{background:var(--navy);color:#FFFFFF;border:1px solid var(--navy)}
.site-header .header-cta .btn-ghost:hover,
.site-header .header-cta .btn-ghost:focus-visible{background:var(--navy-deep);color:#FFFFFF;border-color:var(--navy-deep)}
.site-header .btn-primary{background:transparent;color:var(--ink);border:1.5px solid var(--navy)}
.site-header .btn-primary:hover{background:var(--navy);color:#FFFFFF;border-color:var(--navy)}
.site-header .btn-wa{background:var(--wa);color:#fff}

/* -- Buttons and surfaces --------------------------------------------------- */
.btn-primary{background:var(--navy);border-color:var(--navy);color:#FFFFFF}
.btn-primary:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:#FFFFFF}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#FFFFFF}
.btn-ghost{color:var(--ink)}
.card,.contact-card,.search-pill,.filter-bar,.cmp-bar{background:var(--paper)}
.card{border:1px solid var(--line)}
.band{background:var(--mist)}

/* The one big yellow moment below the fold: the owner call to action. */
.owner-cta{background:var(--navy)}
.owner-cta .eyebrow{color:var(--yellow)}
.owner-cta .btn-primary{background:var(--yellow);border-color:var(--yellow);color:var(--navy-deep)}
.owner-cta .btn-primary:hover{background:var(--yellow-deep);border-color:var(--yellow-deep);color:var(--navy-deep)}

/* -- Footer ----------------------------------------------------------------- */
.site-footer{background:var(--navy);color:#FFFFFF}
.site-footer a{color:#E8E6E2}
.site-footer a:hover{color:var(--yellow)}
.site-footer h4,.site-footer .brand{color:#FFFFFF}
.site-footer .fineprint{color:#B9B5AF}

/* -- Forms ------------------------------------------------------------------ */
input,select,textarea{border-color:var(--field-line)}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

/* -- v5.1: premium white ----------------------------------------------------
   The page itself is pure white; the warm tone is kept for the things that sit
   ON it — button interiors, chips, and barely-there section bands that give the
   page rhythm without tinting the whole canvas. Cards stay white and are
   separated by their border rather than by a background difference. */
:root{
  --ivory:#FFFFFF;      /* page background */
  --mist:#FAF9F7;       /* section bands — near-white, just enough to read as a block */
  --sand:#F4F2ED;       /* ivory: button interiors, chips, hover fills */
}
body{background:#FFFFFF}
.band{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.card{background:var(--paper);border:1px solid var(--line)}

/* Ivory inside the secondary buttons, so they read as surfaces rather than
   outlines on white. The filled near-black CTA is unchanged. */
.btn-outline,.site-header .btn-primary{background:var(--sand)}
.btn-outline:hover{background:var(--navy);color:#FFFFFF;border-color:var(--navy)}
.site-header .btn-primary:hover{background:var(--navy);color:#FFFFFF;border-color:var(--navy)}
.chips a,.tile,.links-row a{background:var(--sand)}
.chips a:hover,.links-row a:hover{background:var(--mist);border-color:var(--navy)}

/* ===========================================================================
   CRM v15 — inventory table, forms, import wizard, team, modals.
   Desktop puts the inventory table first; below 900px the same screens turn into
   stacked cards with the actions a person needs while standing in a flat.
   =========================================================================== */
.admin-top{display:none}
.brand-line{font:700 1.05rem/1 var(--sans,inherit);color:#fff;margin:0 0 14px}
.brand-line span{color:var(--yellow)}
.brand-line small{font-weight:500;opacity:.75;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.admin-side{position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto}
.admin-side .menu-group{margin:14px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
.admin-side .menu-group h6{margin:0 0 4px;padding:0 10px;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.admin-side a[hidden]{display:none}

.page-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.page-head h1{margin:0;font-size:1.35rem}
.page-actions{display:flex;flex-wrap:wrap;gap:8px}
.cards-tight{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;margin-bottom:14px}
.cards-tight .stat{padding:9px 11px;text-decoration:none;color:inherit;display:block;background:#fff}
.cards-tight .stat b{font-size:1.25rem}
.cards-tight a.stat:hover{border-color:var(--navy-deep)}
.cards-tight a.stat.on{border-color:var(--navy-deep);box-shadow:inset 0 -3px 0 var(--yellow)}

.subnav{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:12px;-webkit-overflow-scrolling:touch}
.subnav a{flex:0 0 auto;padding:8px 12px;font-size:.85rem;color:var(--mute);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--ink)}
.subnav a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--navy-deep)}

.filter-panel{border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:12px;background:#fff}
.filter-panel>summary{cursor:pointer;padding:10px 14px;font-weight:600;font-size:.9rem}
.filter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;padding:0 14px 14px}
.filter-grid label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--mute)}
.filter-grid label.chip{flex-direction:row;align-items:center;gap:6px;font-size:.8rem;color:var(--ink);align-self:end}
.filter-grid input,.filter-grid select{font-size:.88rem;padding:7px 9px;border:1px solid var(--field-line);border-radius:var(--r)}
.filter-actions{grid-column:1/-1;display:flex;gap:8px;align-items:center}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.table-wrap .table{margin:0}
.table-listings{font-size:.83rem;min-width:1050px}
.table-listings td{vertical-align:top}
.table td.num,.table th.num{text-align:right;white-space:nowrap}
.table small{color:var(--mute)}
.row-actions{white-space:normal;min-width:190px;font-size:.78rem;line-height:1.7}
.row-trash{background:#FBF7F4}
tr .empty,td.empty{text-align:center;padding:26px;color:var(--mute)}
button.sortable{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
button.sortable.on{text-decoration:underline}
.hdot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle}
.hdot-green{background:#1E8E3E}.hdot-amber{background:#E6B800}.hdot-red{background:#B3261E}
.bad{color:#B3261E}.warn{color:#8A6D00}.ok{color:#1E6B34}
.pill.ok{background:#E6F4EA;color:#1E6B34}.pill.warn{background:#FFF6D6;color:#7A6608}.pill.bad{background:#FDECEA;color:#B3261E}

.bulkbar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--navy-deep);color:#fff;padding:9px 12px;border-radius:var(--r);margin-bottom:8px}
.bulkbar select{padding:6px 8px;border-radius:var(--r);border:0;font-size:.85rem}
.btn-sm{padding:6px 11px;font-size:.82rem}
.btn-danger{background:#B3261E;color:#fff;border:1px solid #B3261E}
.btn-danger:hover{background:#8F1E17}

.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:12px 2px;font-size:.85rem;color:var(--mute)}
.pager a{padding:5px 10px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);background:#fff}
.pager a.on{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep)}

/* --- forms ---------------------------------------------------------------- */
.form-group{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;margin:0 0 14px;background:#fff}
.form-group>legend{font-weight:700;font-size:.9rem;padding:0 6px}
.form-group-internal{background:#FBF9F4;border-style:dashed}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.form-grid>label,.field{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--mute)}
.field>label{font-size:.8rem;color:var(--mute)}
.field>label i{color:#B3261E;font-style:normal}
.field-wide{grid-column:1/-1}
.field input,.field select,.field textarea,.form-grid input,.form-grid select,.form-grid textarea{font-size:.92rem;padding:8px 10px;border:1px solid var(--field-line);border-radius:var(--r);background:#fff;color:var(--ink);width:100%}
.field .muted{font-size:.73rem;line-height:1.45}
.checkset{display:flex;flex-wrap:wrap;gap:6px}
.checkset .chip{font-size:.8rem}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0}
.problem-list,.rowmsgs{margin:0;padding-left:18px;font-size:.8rem}
.rowmsgs li{margin:2px 0}
.notice{border:1px solid var(--line);border-left:4px solid var(--navy-deep);border-radius:var(--r);padding:11px 14px;margin:0 0 14px;background:#fff;font-size:.88rem}
.notice-warn{border-left-color:#E6B800;background:#FFFBEF}
.notice-ok{border-left-color:#1E8E3E;background:#F3FAF5}
.notice ul{margin:6px 0 0;padding-left:18px}
.panel{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;margin:0 0 18px;background:#fff}
.panel h2{margin:0 0 8px;font-size:1.05rem}
.steps{margin:0 0 18px;padding-left:20px;font-size:.9rem;line-height:1.6}
.steps li{margin:4px 0}

/* --- quality board + roles ----------------------------------------------- */
.quality-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.quality-card{display:block;padding:14px;border:1px solid var(--line);border-left-width:4px;border-radius:var(--r-lg);text-decoration:none;color:inherit;background:#fff}
.quality-card b{display:block;font-size:1.7rem;line-height:1.1}
.quality-card span{display:block;font-weight:600;font-size:.88rem;margin:2px 0 4px}
.quality-card small{color:var(--mute);font-size:.76rem;line-height:1.4;display:block}
.quality-card.ok{border-left-color:#1E8E3E}.quality-card.warn{border-left-color:#E6B800}.quality-card.bad{border-left-color:#B3261E}
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:10px}
.role-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;background:#fff}
.role-card h3{margin:0 0 4px;font-size:.95rem;text-transform:capitalize}
.role-card p{margin:0;font-size:.82rem;color:var(--mute)}

/* --- modal + toast ------------------------------------------------------- */
.modal-back{position:fixed;inset:0;background:rgba(24,24,24,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:200}
.modal{background:#fff;border-radius:var(--r-lg);max-width:520px;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.modal-wide{max-width:900px}
.modal>header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.modal>header h2{margin:0;font-size:1.02rem}
.modal-x{background:none;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--mute)}
.modal-body{padding:16px;overflow-y:auto}
.modal-body label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--mute);margin-bottom:10px}
.modal-body input,.modal-body select,.modal-body textarea{font-size:.92rem;padding:8px 10px;border:1px solid var(--field-line);border-radius:var(--r)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
#wr-toast{position:fixed;right:14px;bottom:14px;z-index:300;display:flex;flex-direction:column;gap:8px;max-width:min(380px,92vw)}
.toast{background:var(--navy-deep);color:#fff;padding:10px 14px;border-radius:var(--r);font-size:.87rem;box-shadow:0 8px 24px rgba(0,0,0,.2);transition:opacity .35s,transform .35s}
.toast-error{background:#B3261E}.toast-warn{background:#8A6D00}
.toast.out{opacity:0;transform:translateY(8px)}

/* --- invitation page ----------------------------------------------------- */
.auth-page{max-width:460px;margin:40px auto;padding:0 16px}
.auth-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:#fff}
.auth-card .brand-line{color:var(--ink)}
.auth-card h1{font-size:1.25rem;margin:0 0 12px}
.auth-card label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--mute);margin-bottom:12px}
.auth-card input{font-size:1rem;padding:10px 12px;border:1px solid var(--field-line);border-radius:var(--r)}
.invite-who{font-size:.9rem;background:var(--mist,#FAF9F7);border-radius:var(--r);padding:10px 12px}
.pw-rules{list-style:none;margin:-4px 0 12px;padding:0;font-size:.78rem;color:var(--mute);display:flex;flex-wrap:wrap;gap:4px 12px}
.pw-rules li::before{content:'○ ';color:var(--mute)}
.pw-rules li.met{color:#1E6B34}.pw-rules li.met::before{content:'● ';color:#1E8E3E}

.img-grid figure.dragging{opacity:.4}
.img-grid figure{cursor:grab}

/* --- mobile -------------------------------------------------------------- */
@media(max-width:900px){
  .admin-top{display:flex;align-items:center;gap:10px;background:var(--navy-deep);padding:9px 12px;position:sticky;top:0;z-index:60}
  .admin-top .brand-line{margin:0;flex:1}
  .admin-burger{background:none;border:0;color:#fff;padding:4px;display:grid;place-items:center}
  .admin-quick{background:var(--yellow);color:#181818;text-decoration:none;font-weight:700;font-size:.82rem;padding:7px 11px;border-radius:var(--r)}
  .admin{grid-template-columns:1fr}
  .admin-side{display:none;position:sticky;top:44px;max-height:none}
  .admin-side.open{display:block}
  .admin-side.open{flex-direction:column}
  .side-brand{display:none}
  .admin-main{padding:14px 12px 80px}
  .page-head h1{font-size:1.15rem}
  .cards-tight{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .form-grid{grid-template-columns:1fr}
  /* The inventory table becomes one card per property: every cell keeps its label. */
  .table-listings{min-width:0;border:0}
  .table-listings thead{display:none}
  .table-listings,.table-listings tbody,.table-listings tr,.table-listings td{display:block;width:auto}
  .table-listings tr{border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:10px;padding:10px 12px;background:#fff}
  .table-listings td{border:0;padding:3px 0;text-align:left!important}
  .table-listings td.row-actions{border-top:1px solid var(--line);margin-top:8px;padding-top:8px;min-width:0}
  .bulkbar{position:fixed;left:8px;right:8px;bottom:8px;top:auto;z-index:70}
  .modal{max-height:94vh}
  #wr-toast{left:10px;right:10px;bottom:10px;max-width:none}
}
@media(min-width:901px){.admin-side{display:block!important}}

/* A grid track defaults to min-width:auto, so one wide table was stretching the whole
   page instead of scrolling inside its own container. Both the track and the panes it
   holds are told they may shrink; .table-wrap then does the scrolling, as intended. */
.admin{grid-template-columns:220px minmax(0,1fr)}
.admin-main{min-width:0;max-width:100%}
.admin-main .table-wrap{max-width:100%}
.admin-main>*{max-width:100%}
/* Any table not already wrapped still scrolls rather than widening the page. */
.admin-main table{display:table;width:100%}
.admin-main .table:not(.table-listings){display:block;overflow-x:auto;white-space:normal}
@media(max-width:900px){.admin{grid-template-columns:minmax(0,1fr)}}

/* Below 900px each row is a card and each cell is its own line, so every cell says
   what it is — "Available soon" on its own means nothing without "Availability". */
@media(max-width:900px){
  .table-listings td[data-label]::before{content:attr(data-label) ": ";color:var(--mute);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
  .table-listings td.num{text-align:left}
  .table-listings tr{position:relative;padding-left:40px}
  .table-listings td.selcell{position:absolute;left:10px;top:12px;padding:0}
  .table-listings td.selcell input{width:20px;height:20px}
  .table-listings td.idcell{font-size:1rem;margin-bottom:2px}
  .table-listings td.row-actions a,.table-listings td.row-actions button{display:inline-block;padding:3px 0}
}

/* Owner picker on the listing form (CRM-only block) */
.owner-results{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.owner-hit{text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:7px 10px;font-size:.85rem;cursor:pointer}
.owner-hit:hover{border-color:var(--navy-deep)}
.owner-hit small{display:block;color:var(--mute);font-size:.72rem}
.owner-current{margin:0;font-size:.9rem;font-weight:600}

/* ===========================================================================
   v6 — PREMIUM PASS (public pages: home, search, property)
   ---------------------------------------------------------------------------
   Premium here means fewer things, larger, with more air between them — not more
   decoration. Four changes carry most of the effect:

   1. WhatsApp stops shouting. Six saturated green blocks per screen were the
      loudest element on a yellow/black/white brand, and green is not in that
      brand. It becomes a quiet bordered button with the green glyph kept, so it
      is still instantly recognisable; the floating action button stays fully
      green because that is a convention people look for.
   2. Cards stop being spreadsheets. Price, what, where, three facts, one action.
   3. Sections get a rhythm — a heading row, generous vertical space, and a
      deliberate alternation instead of ten identical bands.
   4. Type gets a real scale, and the small grey text gets bigger and darker.
   =========================================================================== */
:root{
  --max:1200px;
  --ink:#141414;              /* headings and primary text */
  --body:#33302B;             /* body copy — softer than headings, still 10:1 */
  --mute:#5A554E;             /* secondary text: 6.6:1 on white, was 4.9:1 */
  --line:#E7E3DC;
  --hair:#F0EDE7;
  --surface:#FBFAF8;          /* barely-there warm panel */
  --band:#F6F4EF;
  --shadow-sm:0 1px 2px rgba(20,20,20,.05), 0 2px 8px rgba(20,20,20,.04);
  --shadow-md:0 2px 6px rgba(20,20,20,.06), 0 12px 28px rgba(20,20,20,.09);
  --r:8px; --r-lg:14px; --r-xl:20px;
}

/* --- typography ----------------------------------------------------------- */
body{color:var(--body);font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
main h1,main h2,.owner-cta h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;color:var(--ink)}
main h1{font-size:clamp(2rem,1.25rem + 2.6vw,3.15rem);line-height:1.08;margin:0 0 .35em}
main h2{font-size:clamp(1.4rem,1.1rem + 1.1vw,1.95rem);line-height:1.15;margin:0}
main h3{font-family:var(--font);font-weight:700;font-size:1.06rem;letter-spacing:-.01em;color:var(--ink)}
.fineprint{font-size:.83rem;color:var(--mute);line-height:1.55}
.intro{font-size:1.02rem;color:var(--mute);max-width:66ch}

/* --- section rhythm ------------------------------------------------------- */
main{max-width:var(--max)}
.sec{padding:56px 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 26px}
.sec-link{font-size:.9rem;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap;border-bottom:2px solid var(--yellow);padding-bottom:2px}
.sec-link:hover{border-bottom-color:var(--ink)}
.sec.band,section.band{background:var(--band);border-block:1px solid var(--hair)}

/* --- buttons -------------------------------------------------------------- */
.btn{border-radius:var(--r);font-weight:700;letter-spacing:-.01em;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.btn-primary{background:var(--yellow);color:#181818;border-color:var(--yellow);box-shadow:0 1px 2px rgba(20,20,20,.08)}
.btn-primary:hover{background:#F0BE00;border-color:#F0BE00}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:#000;border-color:#000}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--ink);background:#fff}
/* WhatsApp, quietened: the glyph stays green so it is still recognisable at a glance,
   but it no longer competes with the page's own call to action. */
.btn-wa,.btn-wa-quiet{background:#fff;color:var(--ink);border:1.5px solid #CFE9D8}
.btn-wa:hover,.btn-wa-quiet:hover{border-color:var(--wa-deep);background:#F4FBF6}
.btn-wa svg,.btn-wa-quiet svg{color:var(--wa-deep)}
.wa-float{background:var(--wa);color:#fff}           /* the floating button keeps the convention */

/* --- hero ----------------------------------------------------------------- */
.hero{position:relative;padding:0;margin:0 -16px;isolation:isolate}
.hero-inner{max-width:var(--max);margin:0 auto;padding:54px 16px 40px;text-align:center}
.hero-eyebrow{margin:0 0 10px;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.hero-sub{margin:0 auto 26px;max-width:56ch;font-size:1.06rem;color:var(--mute)}
.hero-dark{color:#fff}
.hero-photo .hero-bg{position:absolute;inset:0;z-index:-2;display:block}
.hero-photo .hero-bg img{width:100%;height:100%;object-fit:cover}
/* The scrim is what makes white text legible over any photograph — without it the
   contrast depends on whichever flat happens to be newest. */
.hero-photo::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,14,12,.82) 0%,rgba(15,14,12,.74) 45%,rgba(15,14,12,.88) 100%)}
.hero-dark h1{color:#fff}
.hero-dark .hero-sub{color:rgba(255,255,255,.88)}
.hero-dark .hero-eyebrow{color:var(--yellow)}
.hero-dark .hero-tabs a{color:rgba(255,255,255,.78)}
.hero-dark .hero-tabs a.active,.hero-dark .hero-tabs a:hover{color:#fff}
.hero-dark .hero-tabs a.active{border-bottom-color:var(--yellow)}
.hero-dark .chips a{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26);color:#fff}
.hero-dark .chips a:hover{background:rgba(255,255,255,.2);border-color:#fff}
.hero-tabs{justify-content:center;gap:26px;margin-bottom:18px;border:0}
.hero-tabs a{font-size:1rem;padding-bottom:8px}
.search-pill{box-shadow:var(--shadow-md);border:0;max-width:940px;margin:0 auto;border-radius:var(--r-xl)}
.chips{justify-content:center;margin-top:20px}
.chips a{border-radius:999px;padding:8px 15px;font-size:.87rem;font-weight:600}

/* --- proof strip ---------------------------------------------------------- */
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:34px 0 0;padding:0}
.proof>div{background:#fff;padding:18px 16px;text-align:center}
.proof b{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--ink);line-height:1.1}
.proof span{display:block;margin-top:4px;font-size:.82rem;color:var(--mute);line-height:1.4}
@media(min-width:760px){.proof{grid-template-columns:repeat(4,1fr)}}

/* --- property card -------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px}
.card{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .18s,transform .18s,border-color .18s}
.card:hover{box-shadow:var(--shadow-md);border-color:#D8D2C8;transform:translateY(-2px)}
.card-media{display:block;aspect-ratio:4/3;background:var(--band);overflow:hidden;position:relative}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.035)}
.card-placeholder{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#F2EFE8,#E6E1D7);color:#9A9287;font-weight:700;font-size:.95rem}
.card-count{position:absolute;left:12px;bottom:12px;background:rgba(15,14,12,.72);color:#fff;font-size:.72rem;font-weight:600;padding:4px 9px;border-radius:999px;backdrop-filter:blur(4px)}
.card .badge-verified{position:absolute;top:12px;left:12px;background:var(--ink);color:#fff;font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:999px;z-index:2}
.card-tools{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:2}
.card-tools button{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.16);padding:0}
.card-tools button:hover{background:#fff}
.card-tools button[aria-pressed=true]{background:var(--ink);color:var(--yellow)}
.card-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:0}
.card-price{margin:0;font-size:1.32rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.2;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}
.card-price small{font-size:.8rem;font-weight:600;color:var(--mute)}
.card-dep{margin-left:auto;font-size:.78rem;font-weight:600;color:var(--mute);letter-spacing:0}
.card h3{margin:8px 0 3px;font-size:1.04rem;line-height:1.3}
.card h3 a{color:var(--ink);text-decoration:none}
.card:hover h3 a{text-decoration:underline;text-underline-offset:3px}
.card-loc{display:flex;align-items:center;gap:5px;margin:0;font-size:.87rem;color:var(--mute)}
.card-loc svg{flex:0 0 auto;opacity:.8}
.card-specs{display:flex;flex-wrap:wrap;list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--hair);gap:6px 10px;font-size:.84rem;color:var(--body)}
.card-specs li{display:flex;align-items:center}
.card-specs li+li::before{content:'';width:3px;height:3px;border-radius:50%;background:#C9C3B8;margin-right:10px}
.card-actions{display:flex;gap:8px;margin-top:16px}
.card-actions .btn{min-height:42px;font-size:.92rem}
.card-actions .btn-wa-quiet{flex:0 0 46px;padding:0}

/* --- tiles, trust, insights ---------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.tile{padding:18px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;font-size:.84rem;color:var(--mute);box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
.tile span{font-family:var(--font-display);font-weight:600;font-size:1.22rem;color:var(--ink);margin-bottom:2px}
.tile:hover{border-color:var(--ink);box-shadow:var(--shadow-md)}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:2px;list-style:none;margin:0;padding:0;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.trust li{background:#fff;padding:20px 18px;font-size:.92rem;color:var(--mute);line-height:1.55}
.trust strong{display:block;margin-bottom:5px;font-size:1rem;color:var(--ink)}
.insights{width:100%;border-collapse:collapse;font-size:.94rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.insights th{text-align:left;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:700;padding:13px 16px;background:var(--band);border-bottom:1px solid var(--line)}
.insights td{padding:14px 16px;border-bottom:1px solid var(--hair);color:var(--ink);font-weight:600}
.insights tr:last-child td{border-bottom:0}
.owner-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:40px 34px;margin:12px 0}
.owner-cta h2{color:#fff;margin:6px 0 8px}
.owner-cta p{color:rgba(255,255,255,.78);margin:0;max-width:52ch}
.owner-cta .eyebrow{color:var(--yellow);font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0}
.links-row{display:flex;flex-wrap:wrap;gap:8px}
.links-row a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:.85rem;color:var(--body);text-decoration:none}
.links-row a:hover{border-color:var(--ink);color:var(--ink)}

/* --- search page ---------------------------------------------------------- */
.filter-bar{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);border-radius:var(--r-lg);padding:11px 12px}
.fb-tag{background:var(--ink);color:#fff;border-radius:999px;padding:7px 13px;font-size:.82rem;font-weight:700}
.fb-pill{background:#fff;border:1.5px solid var(--line);color:var(--ink);font-size:.88rem}
.fb-pill:hover{border-color:var(--ink)}
.results-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 18px}
.results-head h1{font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem);margin:0}
.results-head #count{color:var(--accent-text)}
.crumbs{font-size:.82rem;color:var(--mute);padding:16px 0 0}
.crumbs a{color:var(--mute);text-decoration:none}.crumbs a:hover{color:var(--ink);text-decoration:underline}
.empty{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 24px;text-align:center;box-shadow:var(--shadow-sm)}
.empty h2{margin-bottom:8px}
.empty-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.search-wa{background:var(--band);border:1px solid var(--hair);border-radius:var(--r-lg);padding:26px}

/* --- property page -------------------------------------------------------- */
/* The photograph is the product. It was rendering at about a quarter of the page
   width next to a cramped specification grid; here the gallery leads and the
   contact card follows it down the page. */
.property-layout{display:grid;gap:32px;align-items:start}
@media(min-width:1000px){.property-layout{grid-template-columns:minmax(0,1.62fr) minmax(300px,.85fr)}}
.lst-head{margin:14px 0 20px}
.lst-head .rent{font-family:var(--font-display);font-size:clamp(1.8rem,1.3rem + 1.6vw,2.5rem);font-weight:600;color:var(--ink);margin:0 0 6px;letter-spacing:-.02em}
.lst-head .rent small{font-family:var(--font);font-size:.92rem;font-weight:600;color:var(--mute)}
.lst-charges{font-family:var(--font);font-size:.85rem;font-weight:600;color:var(--mute)}
.lst-head h1{font-size:clamp(1.35rem,1.1rem + 1vw,1.95rem);margin:0 0 8px}
.lst-head .meta{font-size:.95rem;color:var(--mute);margin:0}
.lst-top{display:block}
.gallery{padding:0}
.gallery-main{aspect-ratio:3/2;border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.thumbs a{display:block;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--band)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumb-more{display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:700;font-size:.85rem;text-decoration:none}
.quick{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:22px 0 0;padding:0;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;font-weight:600;list-style:none}
.quick li{display:flex;align-items:center;gap:9px;background:#fff;padding:15px 16px;font-size:.93rem;color:var(--ink)}
.quick svg{flex:0 0 auto;color:var(--mute)}
@media(min-width:620px){.quick{grid-template-columns:repeat(4,1fr)}}
.lst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:22px 0 0}
.lst-grid>div{background:#fff;padding:14px 16px}
.lst-grid dt{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:3px}
.lst-grid dd{margin:0;font-weight:700;color:var(--ink);font-size:.97rem}
.lst-grid dd small{display:block;font-weight:600;color:var(--mute);font-size:.8rem;margin-top:1px}
.lst-aside{position:sticky;top:88px}
.contact-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:#fff;box-shadow:var(--shadow-md)}
.contact-card h2{font-size:1.15rem;margin:0 0 4px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}
.lst-more,.lst-landmarks{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:#fff;margin-top:26px}
.lst-more h2,.lst-landmarks h2{font-size:1.25rem;margin:0 0 16px}
.kv>div{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--hair)}
.kv>div:last-child{border-bottom:0}
.kv dt{color:var(--mute);font-size:.9rem}
.kv dd{margin:0;font-weight:600;color:var(--ink);font-size:.95rem}
.lm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.lm-card{border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;background:var(--surface)}
.lm-card h3{font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}
.lm-card ul{margin:0;padding:0;list-style:none;font-size:.9rem;line-height:1.85}
.row-tag{display:inline-block;font-size:.83rem;font-weight:600;color:var(--accent-text);background:#FFF8DC;border:1px solid #F2E4A8;border-radius:999px;padding:5px 12px;margin:18px 0 0}

/* --- mobile --------------------------------------------------------------- */
@media(max-width:760px){
  .sec{padding:38px 0}
  .sec-head{margin-bottom:18px}
  .hero-inner{padding:38px 16px 30px}
  .hero-tabs{gap:18px}
  .proof{margin-top:26px}
  .grid{grid-template-columns:1fr;gap:18px}
  .owner-cta{padding:28px 22px;border-radius:var(--r-lg)}
  .property-layout{gap:24px}
  .thumbs{grid-template-columns:repeat(4,1fr);gap:7px}
  .kv>div{grid-template-columns:1fr;gap:2px;padding:10px 0}
  .lst-more,.lst-landmarks{padding:18px}
  .card-actions .btn{font-size:.9rem}
}
/* The home page keeps its SEO link block last on every width now that the markup
   itself puts it there — the old mobile-only reordering is no longer needed. */
@media(max-width:760px){
  body[data-page-type=home] main{display:block}
  body[data-page-type=home] main>*{order:initial}
}

/* --- v6.1: hero presence, grid balance ------------------------------------ */
/* The hero was inset inside the 1200px container and scrimmed so heavily that the
   photograph behind it was doing no work. Full-bleed, taller, and the scrim pulled
   back to the point where the image reads while the white text still clears 7:1. */
.hero{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
.hero-inner{padding:76px 24px 60px;min-height:420px;display:flex;flex-direction:column;justify-content:center}
.hero-photo::after{background:linear-gradient(180deg,rgba(14,13,11,.58) 0%,rgba(14,13,11,.52) 40%,rgba(14,13,11,.86) 100%)}
.hero-photo .hero-bg img{filter:saturate(.92)}
.hero-photo h1{text-shadow:0 1px 24px rgba(0,0,0,.35)}
.hero-sub{font-size:1.12rem}
.hero + .proof{margin-top:-38px;position:relative;z-index:2;background:#fff;box-shadow:var(--shadow-md);border-color:transparent}
/* Six equal claims read better as two rows of three than as a row of four with two
   empty cells hanging off the end. */
@media(min-width:900px){.trust{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  .hero-inner{padding:48px 18px 40px;min-height:0}
  .hero-sub{font-size:1rem}
  .hero + .proof{margin-top:-24px}
}

/* --- v6.2: search rows, similar-rentals rail ------------------------------ */
/* The row photograph was a small rectangle floating in a tall card; it now fills the
   row, which is what makes a results page feel like a portal rather than a list. */
.row-card{overflow:hidden;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:1px solid var(--line);transition:box-shadow .18s,border-color .18s}
.row-card:hover{box-shadow:var(--shadow-md);border-color:#D8D2C8}
.row-media{position:relative;align-self:stretch;min-height:200px;border-radius:0;overflow:hidden;background:var(--band)}
.row-media img{width:100%;height:100%;object-fit:cover}
.row-facts{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r)}
.row-side{border-left:1px solid var(--hair)}
.row-side .rent{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em}
@media(max-width:760px){.row-media{min-height:200px}}

.similar-card{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:20px;margin-top:20px;box-shadow:var(--shadow-sm)}
.similar-card h2{font-size:1.05rem;margin:0 0 14px}
.similar-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:2px}
.similar-list a{display:flex;gap:12px;align-items:center;padding:10px 0;text-decoration:none;color:inherit;border-bottom:1px solid var(--hair)}
.similar-list li:last-child a{border-bottom:0}
.similar-list a:hover .sim-title{text-decoration:underline;text-underline-offset:2px}
.sim-media{flex:0 0 84px;height:64px;border-radius:var(--r);overflow:hidden;background:var(--band);display:block}
.sim-media img{width:100%;height:100%;object-fit:cover}
.sim-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.sim-body b{font-size:1rem;color:var(--ink);letter-spacing:-.01em}
.sim-body b small{font-size:.74rem;font-weight:600;color:var(--mute)}
.sim-title{font-size:.88rem;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sim-meta{font-size:.78rem;color:var(--mute)}

/* --- v6.3: QA fixes ------------------------------------------------------- */
/* 1. The insights table is four columns of numbers; below 640px it became 446px wide
      inside a 390px screen and took the whole page sideways with it. Each row becomes
      its own small block instead, with the column name carried on the cell. */
@media(max-width:640px){
  .insights,.insights tbody,.insights tr,.insights td{display:block;width:auto}
  .insights thead{display:none}
  .insights tr{border-bottom:1px solid var(--line);padding:12px 14px}
  .insights tr:last-child{border-bottom:0}
  .insights td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:16px;font-weight:600}
  .insights td::before{content:attr(data-th);color:var(--mute);font-weight:600}
  .insights td:first-child{font-family:var(--font-display);font-size:1.05rem;padding-bottom:6px}
  .insights td:first-child::before{content:none}
}
/* 2. The filter pills ran off the side of the screen, and the dropdowns they open ran
      further. They wrap now, and a menu can never be wider than the screen. */
@media(max-width:900px){
  .filter-bar form{flex-wrap:wrap}
  .fb-menu{max-width:calc(100vw - 40px)}
  .fb-menu-wide{min-width:0;width:calc(100vw - 40px)}
  .fb-dd[open] .fb-menu{left:auto;right:0}
}
/* 3. Small labels were sitting just under the 12px floor. */
.card-count,.badge,.badge-verified{font-size:.76rem}
/* 4. The cookie banner's own buttons were 38px — under the comfortable tap size. */
.cookie-btns .btn,.cookie .btn{min-height:42px}
/* 5. Filter and quick-link chips are tap targets too. */
.chips a{display:inline-flex;align-items:center;min-height:40px}

/* ---------------------------------------------------------------------------
   v6.4 — narrow-viewport integrity.

   Three real defects found at 320–768px, all of them structural rather than
   cosmetic:

   1. A closed <details> still generates a box for its content in current
      Chromium (::details-content is content-visibility:hidden, which skips the
      descendants' layout but keeps the wrapper's own box). Every closed filter
      dropdown was therefore contributing a 240–350px absolutely-positioned
      slab to the page's scroll width. Hiding the menu outright when the
      dropdown is closed removes the phantom box; the [open] rules already
      handle the visible case.

   2. The property page's single-column grid had no explicit track, so the
      track's automatic minimum was the widest child's min-content — 348px
      inside a 288px column. minmax(0,1fr) lets the track shrink; anything that
      genuinely cannot fit now scrolls inside its own wrapper instead of
      dragging the whole document sideways.

   3. The "Verified" pill inherited a .7rem size from a more specific rule than
      the 12px floor set in v6.3, so it kept rendering at 11.2px.
--------------------------------------------------------------------------- */
.fb-dd:not([open]) .fb-menu{display:none}
.property-layout{grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.property-layout{grid-template-columns:minmax(0,1.62fr) minmax(300px,.85fr)}}

/* The WhatsApp prompt under the results had a nowrap label ("Send us your requirement
   on WhatsApp") that measured 378px, which is wider than a 320px phone and was the
   single element dragging the whole results page sideways. The label wraps now. */
.search-wa .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.35}
@media(max-width:520px){.search-wa{padding:20px 16px}}

/* The premium pass re-centred .hero-tabs without re-checking the narrow case, which
   overrode the flex-start needed once the strip scrolls: centring overflowing content
   in a scroll container pushes the first tab off the left edge where it cannot be
   reached by scrolling at all. */
@media(max-width:700px){.hero-tabs{justify-content:flex-start}}

/* --- v6.5: the results row, rebuilt around the card's reading order ---------
   Price, then what, then where, then three facts, then one dark action. The row was
   previously title-first with the price stranded in a right-hand column, which on a
   phone put the single most decisive number below three paragraphs of detail. It also
   stacked two full-width filled buttons — a green WhatsApp block and a yellow Contact
   Agent — so neither read as the primary step.                                     */
.row-price{font-family:var(--font-display);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0 0 2px;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px}
.row-price small{font-size:.8rem;font-weight:600;color:var(--mute);letter-spacing:0}
.row-dep{font-family:var(--font-body);font-size:.8rem;font-weight:600;color:var(--mute);letter-spacing:0}
.row-body h3{font-size:1.06rem;margin:0 0 4px}
.row-loc{display:flex;align-items:center;gap:6px;color:var(--mute);font-size:.88rem;margin:0 0 12px}
.row-loc svg{flex:0 0 auto;color:var(--accent-text)}
.row-loc a{color:var(--mute);text-decoration:underline;text-underline-offset:2px}
.row-loc a:hover{color:var(--ink)}
.row-facts{margin:0 0 10px;padding:10px 14px;gap:8px 22px}
.row-meta{font-size:.78rem;color:var(--mute);margin:10px 0 0;letter-spacing:.01em}
.row-side{gap:10px}
.row-side .btn{justify-content:center}
.row-side .btn-wa-quiet{gap:8px}
.row-tools{justify-content:flex-start}

/* On a phone the actions belong at the end of the row, full width and thumb-sized,
   with the two icon buttons beside them rather than under them. */
@media(max-width:799px){
  .row-card{padding:14px}
  .row-side{grid-template-columns:1fr 1fr auto;align-items:center;gap:8px}
  .row-side .btn-dark{grid-column:1}
  .row-side .btn-wa-quiet{grid-column:2}
  .row-tools{grid-column:3}
  .row-desc{-webkit-line-clamp:2}
}
@media(min-width:800px){
  .row-card{grid-template-columns:300px minmax(0,1fr) 200px}
  .row-side{align-content:start}
}

/* A stretched grid item that still carries aspect-ratio derives its WIDTH from the
   row's height, so the photograph grew past its 300px track and printed itself over
   the price and title. In the side-by-side layout the height comes from the row, so
   the ratio has to go. */
@media(min-width:800px){
  .row-media{width:100%;aspect-ratio:auto;height:100%;min-height:210px}
}
@media(max-width:799px){
  .row-media{width:100%;aspect-ratio:3/2;min-height:0}
}

/* The stacked row was one column of `1fr`, whose automatic minimum is the widest
   child's min-content — the four-column facts strip — so the body was laid out wider
   than the card and the card's own overflow:hidden quietly sliced the titles and
   descriptions off at the right edge. */
.row-card{grid-template-columns:minmax(0,1fr)}
.row-body{min-width:0}
.row-facts li{min-width:0}
@media(max-width:560px){.row-facts{gap:10px 18px}.row-facts li{font-size:.86rem}}
@media(min-width:800px){.row-card{grid-template-columns:300px minmax(0,1fr) 200px}}

/* Save and compare move onto the photograph on a phone, exactly where they sit on a
   card, so the action row holds only the two things a tenant actually presses. Three
   items on one line pushed them off the edge. */
@media(max-width:799px){
  .row-card{position:relative}
  .row-side{grid-template-columns:1fr 1fr}
  .row-side .btn-dark{grid-column:1}
  .row-side .btn-wa-quiet{grid-column:2}
  .row-tools{position:absolute;top:22px;right:22px;z-index:2;gap:8px}
  .row-tools .save,.row-tools .cmp{width:40px;height:40px;background:rgba(255,255,255,.94);border-color:transparent;box-shadow:0 2px 8px rgba(0,0,0,.18)}
}

/* --- v6.6: the site with no photographs in it -----------------------------
   The premium pass leans on photography, and a brand-new database has none — so the
   homepage fell back to cream text on a cream panel and read exactly like the version
   it replaced. A portal should look deliberate before its first flat is shot, so the
   photo-less states are designed rather than left as a gap.

   The hero without a cover becomes a dark brand panel: a warm charcoal gradient, one
   soft marigold glow, and an architectural rule grid faded out towards the bottom.
   It is the same light-on-dark typography as the photographic hero, so the page does
   not re-flow or change character the moment the first photograph is uploaded. */
.hero-plain{
  background:
    radial-gradient(1100px 520px at 78% -12%, rgba(255,204,0,.17), transparent 62%),
    radial-gradient(900px 480px at 6% 112%, rgba(255,204,0,.07), transparent 60%),
    linear-gradient(165deg,#242118 0%,#15140F 56%,#1D1B15 100%);
}
.hero-plain::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:104px 104px;
  -webkit-mask-image:radial-gradient(76% 100% at 50% 0,#000 0%,transparent 80%);
          mask-image:radial-gradient(76% 100% at 50% 0,#000 0%,transparent 80%);
}

/* A listing without a photograph shows a warm tonal panel with a drawn building and
   its configuration, instead of a grey rectangle that reads as a broken image. */
.card-placeholder{
  background:linear-gradient(150deg,#EFE9DE 0%,#DFD7C8 100%);
  color:#5C5548;font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  align-content:center;justify-items:center;gap:10px;padding:16px;text-align:center;
}
.card-placeholder::before{
  content:'';width:40px;height:40px;background:currentColor;opacity:.42;
  -webkit-mask:var(--ph-icon) center/contain no-repeat;mask:var(--ph-icon) center/contain no-repeat;
}
:root{--ph-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l7-4 7 4v13M9.5 21v-4.5h5V21M8.5 9.5h2M13.5 9.5h2M8.5 13h2M13.5 13h2'/%3E%3C/svg%3E")}
.row-media .card-placeholder{font-size:.8rem}
/* The detail-page gallery IS the placeholder element, not its container, so it takes a
   compound selector; the similar-rentals thumbnails are 96px wide and need a small mark. */
.card-placeholder.gallery-main{font-size:.86rem;gap:16px}
.card-placeholder.gallery-main::before{width:72px;height:72px}
.sim-media .card-placeholder::before{width:24px;height:24px}

/* The CRM listing table carries a Rent/Sale marker on every row: the two kinds of
   listing have different money columns, and a glance has to be enough to know which
   column is being read. */
.pill-lt{display:inline-block;padding:1px 7px;border-radius:999px;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
.pill-rent{background:#E8EEF2;color:#28405A}
.pill-sale{background:#FFF1C2;color:#6B4E00}

/* --- v7: the Buy section ---------------------------------------------------
   Buy Property is the one navigation item that is a commitment rather than a
   category, so it is a filled marigold control rather than another text link, and
   it sits outside the collapsing nav so it can never disappear behind "More". */
.nav-buy{position:relative;flex:0 0 auto;margin-right:var(--s3)}
.nav-buy>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  background:var(--yellow);color:var(--ink);font-weight:800;font-size:.92rem;letter-spacing:-.01em;
  border-radius:999px;padding:9px 16px;white-space:nowrap;border:1.5px solid var(--yellow);transition:background .15s,border-color .15s}
.nav-buy>summary::-webkit-details-marker{display:none}
.nav-buy>summary:hover{background:#FFD82E;border-color:#FFD82E}
.nav-buy[open]>summary{background:var(--ink);border-color:var(--ink);color:#fff}
.nav-buy>summary svg{transition:transform .15s}
.nav-buy[open]>summary svg{transform:rotate(180deg)}
.nav-buy-list{position:absolute;top:calc(100% + 10px);left:0;z-index:60;min-width:290px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 18px 44px rgba(0,0,0,.16);padding:8px;display:grid;gap:2px}
.nav-buy-list a{display:block;padding:10px 12px;border-radius:var(--r);text-decoration:none;color:var(--ink)}
.nav-buy-list a:hover{background:var(--band)}
.nav-buy-list b{display:block;font-size:.93rem;font-weight:700}
.nav-buy-list small{display:block;color:var(--mute);font-size:.8rem;margin-top:1px}
/* The mobile menu has no room for a second level, so Buy is two plain rows, marked. */
.mobile-menu .mm-buy{font-weight:800;color:var(--ink)}
.mobile-menu .mm-buy::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--yellow);margin-right:8px;vertical-align:1px}
@media(max-width:900px){.nav-buy{display:none}}

/* Sale pricing. A buyer compares on the total and on ₹/sq ft, in that order, so the
   per-sq-ft figure rides alongside the price rather than in the specs list. */
.card-psf,.row-psf{font-family:var(--font-body);font-size:.8rem;font-weight:600;color:var(--mute);letter-spacing:0}
.tag-sale{display:inline-block;background:var(--ink);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.tag-possession{display:inline-block;background:#FFF1C2;color:#6B4E00;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px}

/* The homepage Buy block: one dark band that says the site does both, placed after
   the rentals a returning visitor came for. */
.buy-cta{background:linear-gradient(150deg,#242118 0%,#15140F 100%);color:#fff;border-radius:var(--r-xl);padding:40px 32px;margin:var(--s7) 0;display:grid;gap:var(--s4);align-items:center}
.buy-cta .eyebrow{color:var(--yellow);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px}
.buy-cta h2{color:#fff;margin:0 0 8px;font-size:1.6rem}
.buy-cta p{color:rgba(255,255,255,.8);margin:0;max-width:56ch}
.buy-links{display:flex;flex-wrap:wrap;gap:10px}
.buy-links a{display:inline-flex;align-items:center;min-height:42px;padding:9px 16px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.9rem;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);color:#fff}
.buy-links a:hover{background:rgba(255,255,255,.2);border-color:#fff}
.buy-links a.on{background:var(--yellow);border-color:var(--yellow);color:var(--ink);font-weight:700}
@media(min-width:860px){.buy-cta{grid-template-columns:1.4fr 1fr;padding:48px 44px}}

/* The bar is already the brand marigold, so a marigold button on it disappears. The
   highlight has to be the inverse: a white pill that lifts off the yellow, bold enough
   to read as the primary move and distinct from the dark "List Your Property" button
   further along the bar. */
.nav-buy>summary{background:#fff;border-color:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.14)}
.nav-buy>summary:hover{background:#fff;border-color:var(--ink);box-shadow:0 3px 14px rgba(0,0,0,.2)}
.nav-buy[open]>summary{background:var(--ink);border-color:var(--ink);color:#fff}