/* ==========================================================================
   Griha Rentals — stylesheet
   Scoped under #griha-app so it never fights the WordPress theme.
   ========================================================================== */
#griha-app{
  --ink:#15233B; --ink-soft:#33445F; --marigold:#E8972E; --marigold-dk:#C97B16;
  --verify:#1C8C6A; --verify-bg:#E6F2ED; --brick:#BE4A33; --brick-bg:#FBEAE6;
  --paper:#FAF6EF; --surface:#FFFFFF; --mist:#E7E0D4; --mist-2:#F1EBE0;
  --muted:#6E6657;
  --shadow:0 1px 2px rgba(21,35,59,.06),0 8px 28px rgba(21,35,59,.08);
  --shadow-lg:0 30px 80px -20px rgba(21,35,59,.30); --r:16px;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--paper); line-height:1.5;
  -webkit-font-smoothing:antialiased; position:relative; overflow-x:clip;
}
#griha-app *{box-sizing:border-box; margin:0; padding:0}
#griha-app .mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
#griha-app h1,#griha-app h2,#griha-app h3,#griha-app .display{
  font-family:'Fraunces',Georgia,serif; font-weight:600; letter-spacing:-.01em; line-height:1.05}
#griha-app a{color:inherit; text-decoration:none}
#griha-app button{font-family:inherit; cursor:pointer; border:none; background:none}
#griha-app img{max-width:100%; display:block}
#griha-app .wrap{max-width:1180px; margin:0 auto; padding:0 24px}
#griha-app .hidden{display:none!important}

/* ---------- buttons ---------- */
#griha-app .btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:12px; transition:.18s; white-space:nowrap; line-height:1}
#griha-app .btn-primary{background:var(--marigold); color:#3a2503}
#griha-app .btn-primary:hover{background:var(--marigold-dk); color:#fff; transform:translateY(-1px)}
#griha-app .btn-ink{background:var(--ink); color:#fff}
#griha-app .btn-ink:hover{background:#0c1626; transform:translateY(-1px)}
#griha-app .btn-ghost{background:transparent; border:1.5px solid var(--mist); color:var(--ink)}
#griha-app .btn-ghost:hover{border-color:var(--ink)}
#griha-app .btn-block{width:100%; justify-content:center}
#griha-app .btn:disabled{opacity:.45; cursor:not-allowed; transform:none!important}
#griha-app .btn-sm{padding:8px 14px; font-size:13px; border-radius:9px}

/* ---------- in-app nav ---------- */
#griha-app .gnav{position:sticky; top:0; z-index:40; background:rgba(250,246,239,.85);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--mist)}
#griha-app .gnav-in{display:flex; align-items:center; justify-content:space-between; height:68px}
#griha-app .logo{display:flex; align-items:center; gap:11px; font-family:'Fraunces'; font-weight:700; font-size:22px; cursor:pointer}
#griha-app .logo .mark{width:32px; height:32px; border-radius:9px; background:var(--ink); position:relative; flex:none}
#griha-app .logo .mark::before{content:""; position:absolute; inset:8px 8px 0 8px; border:2.5px solid var(--marigold); border-bottom:none; border-radius:6px 6px 0 0}
#griha-app .logo .mark::after{content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:var(--marigold); bottom:7px; left:50%; transform:translateX(-50%)}
#griha-app .gnav-links{display:flex; align-items:center; gap:6px}
#griha-app .gnav-links a{padding:9px 14px; border-radius:9px; font-weight:500; font-size:15px; color:var(--ink-soft); cursor:pointer}
#griha-app .gnav-links a:hover{background:var(--mist-2); color:var(--ink)}
#griha-app .userchip{display:flex; align-items:center; gap:9px; padding:6px 6px 6px 14px; border:1px solid var(--mist); border-radius:30px; font-weight:600; font-size:14px; background:var(--surface); cursor:pointer}
#griha-app .userchip .av{width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:13px}

/* ==========================================================================
   HERO with parallax skyline layers
   ========================================================================== */
#griha-app .hero{position:relative; overflow:hidden; padding:96px 0 120px; isolation:isolate}
#griha-app .hero-sky{position:absolute; inset:0; z-index:-3;
  background:radial-gradient(120% 90% at 80% -10%,#22436f 0%,transparent 55%),
             radial-gradient(90% 80% at 5% 120%,#2c1d11 0%,transparent 55%), var(--ink)}
#griha-app .hero-stars{position:absolute; inset:0; z-index:-2; opacity:.5;
  background-image:radial-gradient(1.4px 1.4px at 20% 30%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 70% 20%,#fff,transparent),
    radial-gradient(1px 1px at 45% 15%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 88% 40%,#fff,transparent),
    radial-gradient(1px 1px at 33% 45%,#ffe,transparent);
  background-size:cover}
/* parallax silhouette layers (positioned at the bottom, moved by JS) */
#griha-app .layer{position:absolute; left:0; right:0; bottom:0; z-index:-1; will-change:transform; pointer-events:none}
#griha-app .layer svg{width:100%; height:auto; display:block}
#griha-app .layer-back{opacity:.35}
#griha-app .layer-mid{opacity:.6}
#griha-app .hero .wrap{position:relative; z-index:2; color:#fff}
#griha-app .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--marigold); background:rgba(232,151,46,.12); border:1px solid rgba(232,151,46,.3); padding:7px 14px; border-radius:30px}
#griha-app .hero h1{font-size:clamp(40px,6vw,70px); margin:22px 0 18px; max-width:15ch}
#griha-app .hero h1 em{font-style:italic; color:var(--marigold)}
#griha-app .hero .lead{font-size:19px; color:#cdd6e3; max-width:52ch; margin-bottom:34px}
#griha-app .searchbar{background:var(--surface); border-radius:18px; padding:10px; display:flex; gap:8px; box-shadow:var(--shadow-lg); max-width:760px}
#griha-app .searchbar .field{flex:1; padding:10px 16px; border-radius:11px}
#griha-app .searchbar .field label{display:block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
#griha-app .searchbar .field input,#griha-app .searchbar .field select{border:none; outline:none; font-family:inherit; font-size:15px; font-weight:600; color:var(--ink); width:100%; background:transparent}
#griha-app .searchbar .field+.field{border-left:1px solid var(--mist)}
#griha-app .trust-strip{display:flex; flex-wrap:wrap; gap:26px; margin-top:36px}
#griha-app .trust-strip .t{display:flex; align-items:center; gap:10px; color:#cdd6e3; font-size:14px; font-weight:500}
#griha-app .trust-strip .t b{font-family:'Fraunces'; font-size:26px; color:#fff; font-weight:600}

/* ==========================================================================
   sections
   ========================================================================== */
#griha-app .section{padding:78px 0}
#griha-app .sec-head{max-width:640px; margin-bottom:44px}
#griha-app .sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
#griha-app .sec-head .eyebrow{color:var(--marigold-dk); background:#f6ecd9; border-color:#ecd9b4}
#griha-app .sec-head h2{font-size:clamp(30px,4vw,44px); margin:16px 0 14px}
#griha-app .sec-head p{font-size:18px; color:var(--muted)}

/* dual paths */
#griha-app .paths{display:grid; grid-template-columns:1fr 1fr; gap:24px}
#griha-app .path{background:var(--surface); border:1px solid var(--mist); border-radius:var(--r); padding:34px; position:relative; overflow:hidden; transition:.2s}
#griha-app .path:hover{box-shadow:var(--shadow); transform:translateY(-3px)}
#griha-app .path .tag{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--marigold-dk)}
#griha-app .path h3{font-size:26px; margin:8px 0 10px}
#griha-app .path>p{color:var(--muted); margin-bottom:20px}
#griha-app .path ul{list-style:none; display:grid; gap:11px; margin-bottom:26px}
#griha-app .path li{display:flex; gap:11px; align-items:flex-start; font-size:15px}
#griha-app .path li .dot{width:22px; height:22px; border-radius:50%; background:var(--verify-bg); color:var(--verify); display:grid; place-items:center; flex:none; font-size:12px; font-weight:700; margin-top:1px}
#griha-app .path::after{content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,rgba(232,151,46,.12),transparent 70%)}

/* ==========================================================================
   PARALLAX BANNER BAND (stats) — background-attachment fixed
   ========================================================================== */
#griha-app .band{position:relative; padding:90px 0; color:#fff; text-align:center; overflow:hidden;
  background:linear-gradient(rgba(15,24,40,.86),rgba(15,24,40,.92)), var(--ink)}
#griha-app .band-bg{position:absolute; inset:0; z-index:-1; opacity:.5; will-change:transform;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:54px 54px}
#griha-app .band .glow{position:absolute; z-index:-1; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(232,151,46,.18),transparent 65%); top:-180px; left:50%; transform:translateX(-50%); will-change:transform}
#griha-app .band h2{font-size:clamp(28px,4vw,40px); margin-bottom:46px}
#griha-app .band h2 em{font-style:italic; color:var(--marigold)}
#griha-app .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; max-width:900px; margin:0 auto}
#griha-app .stat-n{font-family:'Fraunces'; font-size:clamp(36px,5vw,52px); font-weight:600; color:var(--marigold)}
#griha-app .stat-l{color:#cdd6e3; font-size:14px; margin-top:6px}

/* verification ledger — signature element */
#griha-app .ledger{background:var(--ink); border-radius:22px; padding:44px; color:#fff; position:relative; overflow:hidden}
#griha-app .ledger::before{content:"VERIFIED"; position:absolute; right:-10px; bottom:-26px; font-family:'Fraunces'; font-size:170px; font-weight:700; color:rgba(255,255,255,.04); letter-spacing:-.04em}
#griha-app .ledger h3{font-size:30px; margin-bottom:6px}
#griha-app .ledger>p{color:#aebccf; max-width:48ch; margin-bottom:28px}
#griha-app .passport{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; position:relative; z-index:2}
#griha-app .pp{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:13px; padding:18px; position:relative}
#griha-app .pp .ic{width:38px; height:38px; border-radius:10px; background:rgba(28,140,106,.2); color:#5bd6ac; display:grid; place-items:center; margin-bottom:12px; font-size:18px}
#griha-app .pp .k{font-size:13px; color:#aebccf}
#griha-app .pp .v{font-weight:600; font-size:15px; margin-top:2px}
#griha-app .pp .chk{position:absolute; top:14px; right:14px; color:#5bd6ac; font-size:13px}

/* process timeline */
#griha-app .timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:tl}
#griha-app .tl{position:relative; padding-top:54px}
#griha-app .tl::before{counter-increment:tl; content:counter(tl,decimal-leading-zero); position:absolute; top:0; left:0; font-family:'Fraunces'; font-size:34px; font-weight:600; color:var(--marigold)}
#griha-app .tl::after{content:""; position:absolute; top:20px; left:54px; right:-12px; height:2px; background:var(--mist)}
#griha-app .tl:last-child::after{display:none}
#griha-app .tl h4{font-family:'Fraunces'; font-size:19px; margin-bottom:8px}
#griha-app .tl p{color:var(--muted); font-size:14px}

/* cities */
#griha-app .cities{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
#griha-app .city{height:170px; border-radius:var(--r); position:relative; overflow:hidden; cursor:pointer; display:flex; align-items:flex-end; padding:18px; color:#fff; transition:.2s}
#griha-app .city:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
#griha-app .city::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 35%,rgba(15,24,40,.78))}
#griha-app .city .lab{position:relative; z-index:2}
#griha-app .city .lab b{font-family:'Fraunces'; font-size:21px; display:block}
#griha-app .city .lab span{font-size:13px; opacity:.85}

/* testimonials */
#griha-app .quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
#griha-app .quote{background:var(--surface); border:1px solid var(--mist); border-radius:var(--r); padding:28px}
#griha-app .quote .stars{color:var(--marigold); letter-spacing:2px; margin-bottom:12px}
#griha-app .quote p{font-size:16px; line-height:1.6; margin-bottom:18px}
#griha-app .quote .who{display:flex; align-items:center; gap:11px}
#griha-app .quote .who .av{width:40px; height:40px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:600; font-size:14px}
#griha-app .quote .who b{font-size:14px; display:block}
#griha-app .quote .who span{font-size:12px; color:var(--muted)}
#griha-app .quote .who .vb{color:var(--verify); font-size:11px; font-weight:700}

/* FAQ */
#griha-app .faq{max-width:820px; margin:0 auto}
#griha-app .faq details{border:1px solid var(--mist); border-radius:13px; background:var(--surface); margin-bottom:12px; overflow:hidden}
#griha-app .faq summary{padding:20px 22px; font-weight:600; font-size:16px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center}
#griha-app .faq summary::-webkit-details-marker{display:none}
#griha-app .faq summary::after{content:"+"; font-size:22px; color:var(--marigold-dk); font-weight:400}
#griha-app .faq details[open] summary::after{content:"–"}
#griha-app .faq .a{padding:0 22px 20px; color:var(--muted); font-size:15px; line-height:1.6}

/* listing grid + cards */
#griha-app .listings{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
#griha-app .card{background:var(--surface); border:1px solid var(--mist); border-radius:var(--r); overflow:hidden; transition:.2s; cursor:pointer}
#griha-app .card:hover{box-shadow:var(--shadow); transform:translateY(-4px)}
#griha-app .card .ph{height:200px; position:relative}
#griha-app .card .ph .badge{position:absolute; top:12px; left:12px; background:rgba(255,255,255,.94); color:var(--verify); font-size:12px; font-weight:700; padding:6px 11px; border-radius:30px; display:flex; align-items:center; gap:5px}
#griha-app .card .ph .ph-count{position:absolute; bottom:12px; right:12px; background:rgba(21,35,59,.8); color:#fff; font-size:12px; font-weight:600; padding:5px 10px; border-radius:8px}
#griha-app .card .body{padding:18px}
#griha-app .card .rent{font-family:'Fraunces'; font-size:24px; font-weight:600}
#griha-app .card .rent span{font-size:13px; color:var(--muted); font-family:'Inter'; font-weight:500}
#griha-app .card .ttl{font-weight:600; font-size:16px; margin:7px 0 4px}
#griha-app .card .loc{color:var(--muted); font-size:14px; display:flex; align-items:center; gap:5px}
#griha-app .card .am{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
#griha-app .chip{font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--mist-2); padding:5px 10px; border-radius:7px}

/* footer */
#griha-app .gfoot{background:var(--ink); color:#aebccf; padding:56px 0 30px; margin-top:0}
#griha-app .gfoot .cols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px}
#griha-app .gfoot .logo{color:#fff}
#griha-app .gfoot .logo .mark{background:#fff}
#griha-app .gfoot .logo .mark::before{border-color:var(--marigold)}
#griha-app .gfoot h4{color:#fff; font-family:'Inter'; font-size:14px; font-weight:600; margin-bottom:16px; text-transform:uppercase; letter-spacing:.05em}
#griha-app .gfoot ul{list-style:none; display:grid; gap:10px}
#griha-app .gfoot a{font-size:14px; cursor:pointer}
#griha-app .gfoot a:hover{color:#fff}
#griha-app .gfoot .bot{border-top:1px solid rgba(255,255,255,.1); padding-top:24px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

/* ==========================================================================
   modal / forms / app shells (shared)
   ========================================================================== */
#griha-scrim{position:fixed; inset:0; z-index:100000; background:rgba(11,17,30,.92); backdrop-filter:blur(2px); display:grid; place-items:center; padding:24px; overflow-y:auto;
  font-family:'Inter',sans-serif}
#griha-scrim .modal{background:var(--paper); border-radius:22px; width:100%; max-width:480px; box-shadow:var(--shadow-lg); max-height:92vh; overflow-y:auto; animation:gpop .25s; color:var(--ink)}
#griha-scrim .modal.wide{max-width:840px}
@keyframes gpop{from{opacity:0; transform:translateY(14px) scale(.98)}to{opacity:1; transform:none}}
#griha-scrim .modal-head{padding:26px 30px 0; display:flex; justify-content:space-between; align-items:flex-start}
#griha-scrim .modal-head h2{font-family:'Fraunces'; font-size:25px}
#griha-scrim .modal-head p{color:var(--muted); font-size:14px; margin-top:5px}
#griha-scrim .x{width:34px; height:34px; border-radius:9px; font-size:18px; color:var(--muted); flex:none; background:none; cursor:pointer}
#griha-scrim .x:hover{background:var(--mist-2)}
#griha-scrim .modal-body{padding:22px 30px 30px}

#griha-app .roletog,#griha-scrim .roletog{display:flex; background:var(--mist-2); border-radius:12px; padding:5px; margin-bottom:22px}
#griha-scrim .roletog button{flex:1; padding:11px; border-radius:9px; font-weight:600; font-size:14px; color:var(--muted); background:none}
#griha-scrim .roletog button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}

#griha-app .fld,#griha-scrim .fld{margin-bottom:16px}
#griha-app .fld label,#griha-scrim .fld label{display:block; font-size:13px; font-weight:600; margin-bottom:7px; color:var(--ink-soft)}
#griha-app .fld label .req,#griha-scrim .fld label .req{color:var(--brick)}
#griha-app .inp,#griha-scrim .inp{width:100%; padding:12px 14px; border:1.5px solid var(--mist); border-radius:11px; font-family:inherit; font-size:15px; background:var(--surface); outline:none; transition:.15s; color:var(--ink)}
#griha-app .inp:focus,#griha-scrim .inp:focus{border-color:var(--ink); box-shadow:0 0 0 3px rgba(21,35,59,.07)}
#griha-app textarea.inp,#griha-scrim textarea.inp{resize:vertical; min-height:88px}
#griha-app .row2,#griha-scrim .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
#griha-app .hint,#griha-scrim .hint{font-size:12px; color:var(--muted); margin-top:6px}
#griha-scrim .divider{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; margin:18px 0}
#griha-scrim .divider::before,#griha-scrim .divider::after{content:""; flex:1; height:1px; background:var(--mist)}

#griha-scrim .otp{display:flex; gap:10px; justify-content:center; margin:8px 0 4px}
#griha-scrim .otp input{width:48px; height:56px; text-align:center; font-size:22px; font-weight:600; border:1.5px solid var(--mist); border-radius:11px; font-family:'IBM Plex Mono'; outline:none}
#griha-scrim .otp input:focus{border-color:var(--ink)}

/* KYC method tabs + items */
#griha-scrim .methodtog{display:flex; background:var(--mist-2); border-radius:11px; padding:4px; margin-bottom:18px; font-size:13px}
#griha-scrim .methodtog button{flex:1; padding:9px; border-radius:8px; font-weight:600; color:var(--muted); background:none}
#griha-scrim .methodtog button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
#griha-scrim .kyc-list{display:grid; gap:12px}
#griha-scrim .kyc-item{display:flex; align-items:center; gap:14px; padding:16px; border:1.5px solid var(--mist); border-radius:13px; background:var(--surface)}
#griha-scrim .kyc-item .ic{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:19px; flex:none; background:var(--mist-2)}
#griha-scrim .kyc-item.ok{border-color:var(--verify); background:var(--verify-bg)}
#griha-scrim .kyc-item.ok .ic{background:var(--verify); color:#fff}
#griha-scrim .kyc-item .gr{flex:1}
#griha-scrim .kyc-item .gr b{font-size:15px}
#griha-scrim .kyc-item .gr p{font-size:13px; color:var(--muted)}
#griha-scrim .kyc-item .st{font-size:13px; font-weight:700; color:var(--muted)}
#griha-scrim .kyc-item.ok .st{color:var(--verify)}

/* file drop */
#griha-scrim .drop{border:1.5px dashed var(--mist); border-radius:13px; padding:24px; text-align:center; background:var(--surface); cursor:pointer; transition:.15s}
#griha-scrim .drop:hover{border-color:var(--ink)}
#griha-scrim .drop.has{border-style:solid; border-color:var(--verify); background:var(--verify-bg)}
#griha-scrim .drop .ic{font-size:30px; margin-bottom:8px}

/* shared kyc verif bar in dashboards */
#griha-app .kyc-item{display:flex; align-items:center; gap:14px; padding:16px; border:1.5px solid var(--mist); border-radius:13px; background:var(--surface)}
#griha-app .kyc-item .ic{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:19px; flex:none; background:var(--mist-2)}
#griha-app .kyc-item.ok{border-color:var(--verify); background:var(--verify-bg)}
#griha-app .kyc-item.ok .ic{background:var(--verify); color:#fff}
#griha-app .kyc-item .gr{flex:1}#griha-app .kyc-item .gr b{font-size:15px}#griha-app .kyc-item .gr p{font-size:13px; color:var(--muted)}
#griha-app .kyc-item .st{font-size:13px; font-weight:700; color:var(--muted)}#griha-app .kyc-item.ok .st{color:var(--verify)}

/* stepper */
#griha-app .steps{display:flex; margin-bottom:30px}
#griha-app .step{flex:1; text-align:center; position:relative}
#griha-app .step .n{width:34px; height:34px; border-radius:50%; background:var(--mist-2); color:var(--muted); display:grid; place-items:center; font-weight:700; font-size:14px; margin:0 auto 8px; position:relative; z-index:2; border:2px solid var(--paper)}
#griha-app .step.done .n{background:var(--verify); color:#fff}
#griha-app .step.active .n{background:var(--ink); color:#fff}
#griha-app .step .lab{font-size:12px; font-weight:600; color:var(--muted)}
#griha-app .step.active .lab,#griha-app .step.done .lab{color:var(--ink)}
#griha-app .step::after{content:""; position:absolute; top:17px; left:50%; width:100%; height:2px; background:var(--mist); z-index:1}
#griha-app .step:last-child::after{display:none}
#griha-app .step.done::after{background:var(--verify)}

/* geo */
#griha-app .geobox{border:1.5px dashed var(--mist); border-radius:14px; padding:22px; text-align:center; background:var(--surface)}
#griha-app .geobox.locked{border-style:solid; border-color:var(--verify); background:var(--verify-bg)}
#griha-app .geo-coord{font-family:'IBM Plex Mono'; font-size:18px; font-weight:600; margin:10px 0}
#griha-app .map-mini{height:120px; border-radius:12px; margin-top:14px; position:relative; overflow:hidden; background:linear-gradient(135deg,#dbe6d6,#cfe0ea); border:1px solid var(--mist)}
#griha-app .map-mini .grid{position:absolute; inset:0; opacity:.4; background-image:linear-gradient(#9fb3a8 1px,transparent 1px),linear-gradient(90deg,#9fb3a8 1px,transparent 1px); background-size:24px 24px}
#griha-app .map-mini .pin{position:absolute; top:50%; left:50%; transform:translate(-50%,-100%); font-size:30px}

/* photos */
#griha-app .photogrid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px}
#griha-app .photo-slot{aspect-ratio:1; border-radius:12px; border:1.5px dashed var(--mist); display:grid; place-items:center; color:var(--muted); font-size:13px; text-align:center; cursor:pointer; background:var(--surface); position:relative; overflow:hidden; transition:.15s}
#griha-app .photo-slot:hover{border-color:var(--ink)}
#griha-app .photo-slot.filled{border-style:solid; border-color:var(--verify)}
#griha-app .photo-slot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
#griha-app .photo-slot .rm{position:absolute; top:4px; right:4px; background:rgba(21,35,59,.8); color:#fff; width:22px; height:22px; border-radius:7px; font-size:13px; z-index:2}
#griha-app .upload-meta{display:flex; justify-content:flex-end; font-size:13px; margin-top:2px}
#griha-app .upload-meta .count{font-weight:700}
#griha-app .upload-meta .count.bad{color:var(--brick)}
#griha-app .upload-meta .count.good{color:var(--verify)}

/* amenities */
#griha-app .amen-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px}
#griha-app .amen{display:flex; align-items:center; gap:9px; padding:11px 13px; border:1.5px solid var(--mist); border-radius:11px; font-size:14px; font-weight:500; cursor:pointer; user-select:none; background:var(--surface); transition:.12s}
#griha-app .amen:hover{border-color:var(--ink-soft)}
#griha-app .amen.on{border-color:var(--marigold); background:#fdf3e2; color:var(--ink); font-weight:600}
#griha-app .amen .bx{width:18px; height:18px; border-radius:5px; border:1.8px solid var(--mist); flex:none; display:grid; place-items:center; font-size:11px}
#griha-app .amen.on .bx{background:var(--marigold); border-color:var(--marigold); color:#fff}

/* advance lock */
#griha-app .advance-box{background:var(--brick-bg); border:1.5px solid #f0c9bf; border-radius:14px; padding:18px 20px; margin-top:6px}
#griha-app .advance-box .ttl{display:flex; align-items:center; gap:8px; font-weight:700; color:var(--brick); font-size:14px}
#griha-app .advance-box .amt{font-family:'Fraunces'; font-size:30px; font-weight:600; color:var(--ink); margin:8px 0 2px}
#griha-app .advance-box .calc{font-size:13px; color:var(--muted); font-family:'IBM Plex Mono'}

/* property detail */
#griha-app .pd-gallery{display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:8px; height:380px; border-radius:18px; overflow:hidden; margin-bottom:28px}
#griha-app .pd-gallery>div{position:relative}
#griha-app .pd-gallery>div:first-child{grid-row:span 2}
#griha-app .pd-gallery .label{position:absolute; bottom:10px; left:10px; background:rgba(21,35,59,.78); color:#fff; font-size:12px; font-weight:600; padding:5px 10px; border-radius:7px}
#griha-app .pd-cols{display:grid; grid-template-columns:1fr 360px; gap:36px; align-items:start}
#griha-app .pd-main h1{font-size:34px}
#griha-app .pd-loc{color:var(--muted); display:flex; align-items:center; gap:6px; margin:8px 0 20px; font-size:16px; flex-wrap:wrap}
#griha-app .pd-stats{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px}
#griha-app .pd-stat{border:1px solid var(--mist); border-radius:13px; padding:14px 18px; background:var(--surface); min-width:110px}
#griha-app .pd-stat .k{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600}
#griha-app .pd-stat .v{font-family:'Fraunces'; font-size:22px; font-weight:600; margin-top:3px}
#griha-app .pd-sec{margin-bottom:30px}
#griha-app .pd-sec h3{font-size:20px; margin-bottom:14px}
#griha-app .amen-show{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
#griha-app .amen-show div{display:flex; align-items:center; gap:9px; font-size:15px}
#griha-app .amen-show .dot{color:var(--verify)}
#griha-app .book-card{border:1px solid var(--mist); border-radius:18px; padding:24px; background:var(--surface); box-shadow:var(--shadow); position:sticky; top:90px}
#griha-app .book-card .rentbig{font-family:'Fraunces'; font-size:32px; font-weight:600}
#griha-app .book-card .rentbig span{font-size:15px; color:var(--muted); font-weight:500; font-family:'Inter'}
#griha-app .book-card .line{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--mist); font-size:14px}
#griha-app .book-card .line:last-of-type{border:none; font-weight:700; font-size:16px}
#griha-app .book-card .line .mono{font-weight:600}

/* comments */
#griha-app .comment{display:flex; gap:13px; padding:16px 0; border-bottom:1px solid var(--mist)}
#griha-app .comment .av{width:40px; height:40px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:600; flex:none; font-size:15px}
#griha-app .comment .meta{font-size:13px; color:var(--muted); margin-bottom:4px}
#griha-app .comment .meta b{color:var(--ink); font-size:14px}
#griha-app .comment .vbadge{color:var(--verify); font-size:11px; font-weight:700; background:var(--verify-bg); padding:2px 7px; border-radius:20px; margin-left:6px}

/* contact service charge */
#griha-app .contact-lock{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px; border:1.5px dashed var(--mist); border-radius:13px; background:var(--surface); margin-top:12px; flex-wrap:wrap}
#griha-app .contact-lock.open{border-style:solid; border-color:var(--verify); background:var(--verify-bg)}
#griha-app .contact-lock .info b{font-size:16px; font-family:'IBM Plex Mono'}
#griha-app .contact-lock .info p{font-size:14px; color:var(--ink-soft); margin-top:3px; font-family:'IBM Plex Mono'}
#griha-app .contact-lock .credits{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--marigold-dk); background:#f6ecd9; border:1px solid #ecd9b4; padding:6px 12px; border-radius:30px}

/* dashboards */
#griha-app .dash-head{padding:40px 0 0}
#griha-app .dash-head h1{font-size:34px}
#griha-app .dash-head p{color:var(--muted); font-size:16px; margin-top:6px}
#griha-app .dash-tabs{display:flex; gap:6px; border-bottom:1px solid var(--mist); margin:26px 0 32px}
#griha-app .dash-tabs button{padding:13px 18px; font-weight:600; font-size:15px; color:var(--muted); border-bottom:2.5px solid transparent; margin-bottom:-1px; background:none}
#griha-app .dash-tabs button.on{color:var(--ink); border-color:var(--marigold)}
#griha-app .empty{text-align:center; padding:70px 20px; border:1.5px dashed var(--mist); border-radius:18px; background:var(--surface)}
#griha-app .empty .ic{font-size:40px; margin-bottom:14px}
#griha-app .empty h3{font-size:22px; margin-bottom:8px}
#griha-app .empty p{color:var(--muted); margin-bottom:22px}

#griha-app .profile-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--mist); border:1px solid var(--mist); border-radius:14px; overflow:hidden}
#griha-app .profile-grid .cell{background:var(--surface); padding:16px 18px}
#griha-app .profile-grid .cell .k{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600}
#griha-app .profile-grid .cell .v{font-size:15px; font-weight:600; margin-top:4px}

/* banner / toast */
#griha-app .banner,#griha-scrim .banner{background:#f6ecd9; border:1px solid #ecd9b4; border-radius:13px; padding:14px 18px; font-size:14px; color:#7a5410; display:flex; gap:10px; align-items:flex-start; margin-bottom:22px}
#griha-toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); z-index:100001; background:var(--ink); color:#fff; padding:14px 22px; border-radius:13px; font-weight:500; font-size:14px; box-shadow:var(--shadow-lg); opacity:0; transition:.3s; display:flex; align-items:center; gap:10px; pointer-events:none; font-family:'Inter',sans-serif}
#griha-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
#griha-toast.ok{background:var(--verify)}
#griha-toast.err{background:var(--brick)}

/* reveal-on-scroll */
#griha-app .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease}
#griha-app .reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  #griha-app .layer,#griha-app .band-bg,#griha-app .band .glow{transform:none!important}
  #griha-app .reveal{opacity:1; transform:none; transition:none}
}

@media(max-width:920px){
  #griha-app .paths,#griha-app .listings,#griha-app .passport,#griha-app .pd-cols,
  #griha-app .gfoot .cols,#griha-app .stats,#griha-app .timeline,#griha-app .cities,#griha-app .quotes{grid-template-columns:1fr}
  #griha-app .stats,#griha-app .cities{grid-template-columns:1fr 1fr}
  #griha-app .pd-gallery{grid-template-columns:1fr 1fr; height:auto}
  #griha-app .pd-gallery>div:first-child{grid-row:auto; grid-column:span 2; height:240px}
  #griha-app .pd-gallery>div{height:120px}
  #griha-app .gnav-links{display:none}
  #griha-app .amen-grid,#griha-app .photogrid{grid-template-columns:repeat(2,1fr)}
  #griha-app .profile-grid{grid-template-columns:1fr}
  #griha-app .searchbar{flex-direction:column}
  #griha-app .searchbar .field+.field{border-left:none; border-top:1px solid var(--mist)}
  #griha-app .tl::after{display:none}
}