/* =====================================================================
   Vinayak Property — stylesheet
   Palette: paper white, warm sand, deep green (trust), brass (accent)
   Type:    Bricolage Grotesque (headings) + Karla (body)
   ===================================================================== */

:root{
  --paper:#FFFFFF;
  --sand:#F5F2EC;
  --sand-2:#EDE8DE;
  --ink:#16211C;
  --ink-soft:#5A6660;
  --green:#1D5B45;
  --green-dark:#143F30;
  --green-tint:#E7F0EB;
  --brass:#B4842B;
  --line:#E2DCD0;
  --wa:#1FA855;
  --danger:#A33232;

  --r-sm:4px; --r-md:8px; --r-lg:14px;
  --wrap:1200px;
  --shadow:0 1px 2px rgba(22,33,28,.06), 0 8px 24px -16px rgba(22,33,28,.35);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Karla',system-ui,sans-serif; font-size:16px; line-height:1.6;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:600; line-height:1.15; margin:0; letter-spacing:-.015em;}
h1{font-size:clamp(28px,4.4vw,46px);}
h2{font-size:clamp(23px,2.8vw,32px);}
h3{font-size:19px;}
p{margin:0 0 14px;}
p:last-child{margin-bottom:0;}
:focus-visible{outline:3px solid var(--brass); outline-offset:2px;}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px;}
.skip{position:absolute; left:-9999px;}
.skip:focus{left:12px; top:12px; background:var(--ink); color:#fff; padding:10px 14px; z-index:99;}
.muted{color:var(--ink-soft);}
.center{text-align:center;}

/* ---------- Buttons ---------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:var(--r-md); border:1px solid transparent;
  font:600 15px/1 'Karla',sans-serif; cursor:pointer; transition:background .15s,border-color .15s,color .15s;
}
.btn-solid{background:var(--green); color:#fff;}
.btn-solid:hover{background:var(--green-dark);}
.btn-line{background:transparent; color:var(--green); border-color:var(--green);}
.btn-line:hover{background:var(--green-tint);}
.btn-wa{background:var(--wa); color:#fff;}
.btn-wa:hover{filter:brightness(.93);}
.btn-ghost{background:var(--sand); color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{background:var(--sand-2);}
.btn-sm{padding:9px 14px; font-size:14px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.6; cursor:not-allowed;}

/* ---------- Header ------------------------------------------------ */
.site-head{position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:1px solid var(--line);}
.head-in{display:flex; align-items:center; gap:20px; min-height:70px;}
.brand{display:flex; align-items:center; gap:10px; color:var(--green); margin-right:auto;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text strong{font-family:'Bricolage Grotesque',sans-serif; font-size:19px; color:var(--ink); letter-spacing:-.02em;}
.brand-text small{font-size:11.5px; color:var(--ink-soft); letter-spacing:.02em;}
.nav{display:flex; align-items:center; gap:22px;}
.nav a{font-size:15px; font-weight:500; color:var(--ink); padding:6px 0; border-bottom:2px solid transparent;}
.nav a:hover, .nav a.on{border-bottom-color:var(--brass);}
.nav .nav-cta{border-bottom:1px solid var(--green);}
.nav-toggle{display:none; width:42px; height:42px; background:none; border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; padding:10px;}
.nav-toggle span{display:block; height:2px; background:var(--ink); margin:4px 0; border-radius:2px;}

/* ---------- Hero + search ---------------------------------------- */
.hero{
  background:
    linear-gradient(180deg, rgba(29,91,69,.92), rgba(20,63,48,.94)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 46px),
    var(--green);
  color:#fff; padding:56px 0 0;
}
.hero h1{max-width:16ch;}
.hero-sub{max-width:56ch; margin-top:14px; color:rgba(255,255,255,.86); font-size:17px;}
.hero-note{margin-top:18px; font-size:14px; color:rgba(255,255,255,.75);}
.hero-note b{color:#fff;}

.searchbox{
  background:var(--paper); color:var(--ink); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:18px; margin-top:32px; transform:translateY(28px);
}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px;}
.tabs button{
  background:none; border:0; border-bottom:3px solid transparent; padding:8px 14px;
  font:600 15px 'Karla',sans-serif; color:var(--ink-soft); cursor:pointer;
}
.tabs button.on{color:var(--green); border-bottom-color:var(--green);}
.search-row{display:grid; grid-template-columns:1.6fr 1fr 1fr auto; gap:10px;}
.search-row input, .search-row select, .field input, .field select, .field textarea{
  width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:var(--r-md);
  font:400 15px 'Karla',sans-serif; background:var(--paper); color:var(--ink);
}
.search-row input:focus, .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--green); outline:none; box-shadow:0 0 0 3px var(--green-tint);}
.search-more{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.chip{
  border:1px solid var(--line); background:var(--sand); border-radius:100px;
  padding:6px 13px; font-size:13.5px; color:var(--ink-soft);
}
.chip:hover{border-color:var(--green); color:var(--green);}

/* ---------- Trust strip ------------------------------------------- */
.trust{background:var(--sand); border-bottom:1px solid var(--line); padding:64px 0 22px;}
.trust-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;}
.trust-grid div{background:var(--sand); padding:16px 14px;}
.trust-grid b{display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:15px; margin-bottom:2px;}
.trust-grid span{font-size:13px; color:var(--ink-soft); line-height:1.45; display:block;}

/* ---------- Sections ---------------------------------------------- */
.section{padding:56px 0;}
.section-alt{background:var(--sand);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:26px;}
.section-head p{color:var(--ink-soft); margin-top:6px; max-width:60ch;}
.section-head a{color:var(--green); font-weight:600; white-space:nowrap; border-bottom:1px solid var(--green);}

/* ---------- Property cards ---------------------------------------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(292px,1fr)); gap:22px;}
.pcard{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper); display:flex; flex-direction:column;}
.pcard:hover{box-shadow:var(--shadow);}
.pcard-img{position:relative; aspect-ratio:4/3; background:var(--sand-2);}
.pcard-img img{width:100%; height:100%; object-fit:cover;}
.tag{
  position:absolute; top:10px; left:10px; background:var(--ink); color:#fff;
  font-size:12px; font-weight:600; padding:5px 10px; border-radius:var(--r-sm);
}
.tag-featured{left:auto; right:10px; background:var(--brass);}
.tag-sold{background:var(--danger);}
.pcard-body{padding:15px 16px 16px; display:flex; flex-direction:column; flex:1;}
.pcard-price{font-family:'Bricolage Grotesque',sans-serif; font-size:21px; font-weight:600;}
.price-note{font-family:'Karla',sans-serif; font-size:13px; font-weight:500; color:var(--ink-soft);}
.pcard h3{font-size:16.5px; margin:6px 0 4px; font-weight:600;}
.pcard h3 a:hover{color:var(--green);}
.pcard-loc{font-size:14px; color:var(--ink-soft);}
.specs{display:flex; flex-wrap:wrap; gap:14px; margin:12px 0; padding:11px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink-soft);}
.specs b{color:var(--ink); font-weight:600;}
.pcard-foot{display:flex; gap:8px; margin-top:auto;}
.pcard-foot .btn{flex:1; padding:10px 12px; font-size:14px;}
.pcard-meta{font-size:12.5px; color:var(--ink-soft); margin-top:10px;}
.rera-chip{display:inline-block; font-size:12px; color:var(--green); background:var(--green-tint); padding:3px 9px; border-radius:100px; margin-top:8px;}

/* ---------- Search results layout --------------------------------- */
.results{display:grid; grid-template-columns:270px 1fr; gap:28px; padding:32px 0 56px;}
.filters{border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; height:max-content; position:sticky; top:90px;}
.filters h4{font-size:15px; margin-bottom:14px;}
.filters .field{margin-bottom:13px;}
.field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:5px;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.results-head{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.results-head h1{font-size:26px;}
.filter-open{display:none;}
.pager{display:flex; gap:6px; justify-content:center; margin-top:34px; flex-wrap:wrap;}
.pager a,.pager span{padding:9px 14px; border:1px solid var(--line); border-radius:var(--r-md); font-size:14.5px;}
.pager .on{background:var(--green); color:#fff; border-color:var(--green);}
.empty{border:1px dashed var(--line); border-radius:var(--r-lg); padding:44px 24px; text-align:center; color:var(--ink-soft);}

/* ---------- Property detail --------------------------------------- */
.crumbs{font-size:13.5px; color:var(--ink-soft); padding:16px 0;}
.crumbs a:hover{color:var(--green);}
.detail{display:grid; grid-template-columns:1fr 350px; gap:32px; padding-bottom:56px; align-items:start;}
.gallery-main{aspect-ratio:16/10; background:var(--sand-2); border-radius:var(--r-lg); overflow:hidden;}
.gallery-main img{width:100%; height:100%; object-fit:cover;}
.thumbs{display:flex; gap:9px; margin-top:9px; overflow-x:auto; padding-bottom:4px;}
.thumbs img{width:96px; height:70px; object-fit:cover; border-radius:var(--r-sm); cursor:pointer; border:2px solid transparent; flex:0 0 auto;}
.thumbs img.on{border-color:var(--green);}
.d-title{margin-top:26px;}
.d-price{font-family:'Bricolage Grotesque',sans-serif; font-size:30px; font-weight:600; margin-top:8px;}
.spec-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin:24px 0;}
.spec-grid div{background:var(--paper); padding:13px 15px;}
.spec-grid small{display:block; font-size:12.5px; color:var(--ink-soft);}
.spec-grid b{font-size:15.5px; font-weight:600;}
.block{margin-bottom:30px;}
.block h2{font-size:20px; margin-bottom:12px;}
.pill-list{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0;}
.pill-list li{background:var(--sand); border:1px solid var(--line); border-radius:100px; padding:7px 14px; font-size:14px;}
.side-card{border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; position:sticky; top:90px; box-shadow:var(--shadow);}
.agent-line{display:flex; gap:12px; align-items:center; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line);}
.agent-ini{width:46px; height:46px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-family:'Bricolage Grotesque',sans-serif; font-size:17px;}
.note-box{background:var(--sand); border-left:3px solid var(--brass); padding:13px 15px; font-size:13.5px; color:var(--ink-soft); border-radius:0 var(--r-md) var(--r-md) 0;}

/* ---------- Forms -------------------------------------------------- */
.form-card{border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; background:var(--paper);}
.field{margin-bottom:15px;}
.field textarea{resize:vertical; min-height:96px;}
.hp{position:absolute; left:-9999px;}
.form-msg{margin-top:14px; padding:12px 14px; border-radius:var(--r-md); font-size:14.5px; display:none;}
.form-msg.ok{display:block; background:var(--green-tint); color:var(--green-dark);}
.form-msg.err{display:block; background:#FBEAEA; color:var(--danger);}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:0 15px;}
.req{color:var(--danger);}

/* ---------- Prose / legal pages ------------------------------------ */
.prose{max-width:70ch; padding:40px 0 60px;}
.prose h1{margin-bottom:18px;}
.prose p{margin-bottom:16px; color:var(--ink-soft);}
.prose h2{font-size:21px; margin:28px 0 10px;}

/* ---------- Location tiles ----------------------------------------- */
.loc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px;}
.loc-tile{border:1px solid var(--line); border-radius:var(--r-md); padding:18px; background:var(--paper);}
.loc-tile:hover{border-color:var(--green);}
.loc-tile b{font-family:'Bricolage Grotesque',sans-serif; font-size:17px;}
.loc-tile span{display:block; font-size:13.5px; color:var(--ink-soft); margin-top:4px;}

/* ---------- FAQ ---------------------------------------------------- */
.faq details{border-bottom:1px solid var(--line); padding:16px 0;}
.faq summary{cursor:pointer; font-weight:600; font-size:16.5px; list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; float:right; color:var(--green); font-size:20px; line-height:1;}
.faq details[open] summary::after{content:'–';}
.faq p{margin-top:10px; color:var(--ink-soft);}

/* ---------- Footer -------------------------------------------------- */
.site-foot{background:var(--ink); color:#D6DCD8; margin-top:auto; padding:48px 0 26px;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px;}
.foot-brand strong{font-family:'Bricolage Grotesque',sans-serif; color:#fff; font-size:19px;}
.foot-brand p{font-size:14px; margin:8px 0 0; color:#A8B2AD;}
.foot-brand address{font-style:normal; font-size:14px; color:#A8B2AD; margin-top:10px; max-width:34ch;}
.rera-line b{color:var(--brass);}
.foot-col h4{color:#fff; font-size:14.5px; margin-bottom:12px;}
.foot-col a{display:block; font-size:14px; color:#A8B2AD; padding:4px 0;}
.foot-col a:hover, .foot-brand a:hover{color:#fff;}
.foot-note{border-top:1px solid #2A3833; margin-top:34px; padding-top:20px;}
.foot-note p{font-size:12.8px; color:#8D9993; max-width:100ch;}
.foot-note .copy{margin-top:10px;}

/* ---------- Floating WhatsApp + mobile bar --------------------------- */
.wa-float{
  position:fixed; right:18px; bottom:22px; z-index:35; width:54px; height:54px;
  border-radius:50%; background:var(--wa); color:#fff; display:grid; place-items:center;
  box-shadow:0 6px 20px rgba(31,168,85,.4);
}
.mobile-bar{display:none;}

/* ---------- Responsive ----------------------------------------------- */
@media (max-width:960px){
  .results{grid-template-columns:1fr;}
  .filters{position:static; display:none;}
  .filters.show{display:block;}
  .filter-open{display:inline-flex;}
  .detail{grid-template-columns:1fr;}
  .side-card{position:static;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .nav{
    display:none; position:absolute; top:70px; left:0; right:0; background:var(--paper);
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:0; padding:8px 20px 18px;
  }
  .nav.show{display:flex;}
  .nav a{padding:12px 0; border-bottom:1px solid var(--line);}
  .nav .nav-cta{margin-top:12px; justify-content:center; padding:12px;}
  .nav-toggle{display:block;}
  .search-row{grid-template-columns:1fr;}
  .searchbox{transform:translateY(22px); padding:15px;}
  .hero{padding-top:38px;}
  .trust{padding-top:56px;}
  .section{padding:40px 0;}
  .section-head{flex-direction:column; align-items:flex-start;}
  .grid-2{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  body{padding-bottom:62px;}
  .wa-float{bottom:74px; width:48px; height:48px;}
  .mobile-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:36;
    background:var(--paper); border-top:1px solid var(--line);
  }
  .mb-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:9px 4px; font-size:12px; font-weight:600; color:var(--ink);
  }
  .mb-wa{color:var(--wa);}
  .mb-primary{background:var(--green); color:#fff; justify-content:center;}
}
@media (max-width:420px){
  .trust-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important;}
}