/* Brige Space — the Brige house style.
   ⚠ The tokens below are COPIED FROM brige.world, not invented: same names, same values,
   so a change to the family's palette can be carried across by eye. The system is flat —
   no rounded corners anywhere, 1.5px rules, cream grounds, one orange — and the display
   face is Archivo at -0.02em, the body IBM Plex Sans, numbers in IBM Plex Mono.
   ⚠ Deliberately no Tailwind and no build step: this is a shared cPanel host, and a deploy
   that needs node is a deploy that breaks at midnight. */

:root {
  --paper:#FFFFFF; --surface:#FFFCF9; --surface-2:#FDF1E4; --surface-3:#F7E8DA;
  --ink:#3A281E; --ink-2:#6B5344; --muted:#9A8577;
  --line:#F0E1D3; --line-2:#E1CAB3;
  --orange:#D4761E; --orange-soft:#FDEEDD; --orange-ink:#8A4A0E;
  --brown:#8A5A33; --brown-deep:#543720;
  --signal:#D4761E; --signal-soft:#FDEEDD;
  --risk:#A8452F;   --risk-soft:#FBE9E3;
  --ledger:#2E7D52; --ledger-soft:#E7F2EA;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--surface); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4 { font-family:var(--display); font-weight:700; letter-spacing:-0.02em;
              text-wrap:balance; margin:0; }
h1 { font-size:clamp(28px,4.6vw,44px); line-height:1.08; }
h2 { font-size:19px; margin-bottom:10px; }
h3 { font-size:15px; margin-bottom:4px; }
a { color:var(--orange-ink); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ⚠ Every number a seller might read out — a price, a reference, a credit balance — is
   set in the mono face, as the family does. It also stops columns of rupees dancing. */
.num, .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }

.eyebrow { font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
           text-transform:uppercase; color:var(--muted); margin:0 0 10px; }

.wrap { max-width:1160px; margin:0 auto; padding:0 20px; }

/* ---------- header ---------- */
.top { position:sticky; top:0; z-index:50; background:var(--surface-2);
       border-bottom:2px solid var(--orange); }
.top .wrap { display:flex; align-items:center; gap:14px; height:62px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.brand:hover { text-decoration:none; }
.brand img { width:26px; height:26px; display:block; }
.brand .nm { font-family:var(--display); font-size:21px; font-weight:700;
             letter-spacing:-0.025em; line-height:1; }
.brand .dot { color:var(--orange); }
.top nav { margin-left:auto; display:flex; align-items:center; gap:10px; }
.top nav a, .top .linkish { color:var(--ink-2); font-size:13.5px; font-family:var(--body);
  background:none; border:0; cursor:pointer; padding:6px 2px; }
.top nav a:hover, .top .linkish:hover { color:var(--ink); text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--orange); }
.chip-credits { font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  background:var(--orange); color:#fff; padding:4px 8px; }
.chip-credits:hover { box-shadow:none !important; filter:brightness(1.07); }

/* ---------- the search band ---------- */
.band { background:var(--surface-2); border-bottom:1.5px solid var(--line-2); padding:30px 0 34px; }
.band h1 { max-width:16ch; }
.band p.sub { color:var(--ink-2); margin:12px 0 20px; font-size:15px; max-width:56ch; }
.band .mark { background:var(--surface-3); padding:0 .14em 0 .18em; }  /* the family's highlight */
/* ⚠ The full stop after a Brige name is always the orange one — it is the family's
   signature, and the mark in the header repeats it as the window. Keep them the same. */
.dot { color:var(--orange); }

.seek { background:var(--paper); border:1.5px solid var(--line-2); padding:12px; }
.seek .row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) 1.4fr auto; gap:10px; }
.seek label { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
              text-transform:uppercase; color:var(--muted); margin:0 0 4px; }
.seek input, .seek select {
  width:100%; border:1.5px solid var(--line-2); padding:9px 10px; background:var(--surface);
  font-family:var(--body); font-size:14px; color:var(--ink); border-radius:0;
}
.seek input:focus, .seek select:focus { outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px var(--orange-soft); }
.seek .go { align-self:end; }

/* Buy / Rent — the owner's two buttons */
.toggle { display:inline-flex; border:1.5px solid var(--line-2); background:var(--paper); }
.toggle a { font-family:var(--display); font-size:13.5px; font-weight:600; color:var(--ink-2);
            padding:9px 22px; }
.toggle a + a { border-left:1.5px solid var(--line-2); }
.toggle a.on { background:var(--orange); color:#fff; }
.toggle a:hover { text-decoration:none; }
.toggle a:not(.on):hover { background:var(--surface-2); }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--display); font-size:13.5px; font-weight:600; padding:10px 17px;
  text-decoration:none; border:1.5px solid var(--orange); background:var(--orange); color:#fff;
  cursor:pointer; border-radius:0; transition:filter .12s ease, background .12s ease; }
.btn:hover { filter:brightness(1.07); text-decoration:none; color:#fff; }
.btn.ghost { background:var(--surface); color:var(--ink); border-color:var(--line-2); }
.btn.ghost:hover { background:var(--surface-2); filter:none; color:var(--ink); }
.btn.wa { background:#1F8F4E; border-color:#1F8F4E; }
.btn.block { width:100%; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.btn.small { font-size:12.5px; padding:7px 12px; }

/* ---------- the counts strip, as the family draws its stats ---------- */
.tabs { display:flex; align-items:stretch; border:1.5px solid var(--line-2);
        background:var(--paper); margin:22px 0 16px; }
.tabs a { padding:12px 18px; font-family:var(--display); font-size:14px; font-weight:600;
          color:var(--ink-2); display:flex; align-items:baseline; gap:8px; }
.tabs a + a { border-left:1.5px solid var(--line-2); }
.tabs a.on { color:var(--ink); box-shadow:inset 0 -3px 0 var(--orange); }
.tabs a:hover { text-decoration:none; background:var(--surface-2); }
.tabs .count { font-family:var(--mono); font-size:13px; color:var(--orange-ink); }
.tabs .spacer { margin-left:auto; display:flex; align-items:center; padding:0 14px;
                border-left:1.5px solid var(--line-2); }

/* ---------- lead cards ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(276px,1fr)); gap:14px; }
.card { background:var(--surface-2); border:1.5px solid var(--line-2);
        display:flex; flex-direction:column; }
.card .shot { aspect-ratio:16/10; background:var(--surface-3) center/cover no-repeat;
              position:relative; border-bottom:1.5px solid var(--line-2); }
.card .shot .none { position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:var(--muted); font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; }
.card .body { padding:14px 15px 15px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card h3 a { color:var(--ink); }
.card h3 a:hover { color:var(--orange-ink); }

.badge { display:inline-block; background:var(--orange); color:#fff; font-family:var(--mono);
         font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:3px 7px; }
.badge.buyer { background:var(--brown); }
.badge.demo  { background:var(--surface-3); color:var(--orange-ink); }

.where { color:var(--ink-2); font-size:13.5px; }
.price { font-family:var(--mono); font-size:16px; font-weight:600; letter-spacing:-.01em; }
.meta { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:11.5px;
        font-family:var(--mono); margin-top:auto; padding-top:4px; }
.locked { font-family:var(--mono); letter-spacing:.06em; color:var(--muted); }
.open   { font-family:var(--mono); font-weight:600; color:var(--ink); }

/* ---------- panels, forms, notes ---------- */
.panel { background:var(--surface-2); border:1.5px solid var(--line-2); padding:22px; }
.panel + .panel { margin-top:14px; }
.panel.paper { background:var(--paper); }
.fld { display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
       text-transform:uppercase; color:var(--muted); margin:0 0 5px; }
.in { width:100%; border:1.5px solid var(--line-2); padding:10px 11px; background:var(--paper);
      font-family:var(--body); font-size:14.5px; color:var(--ink); border-radius:0; }
.in:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-soft); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { margin-bottom:14px; }
.err { color:var(--risk); font-size:12.5px; margin-top:4px; }
.note { background:var(--orange-soft); border:1.5px solid var(--line-2); border-left:3px solid var(--orange);
        color:var(--orange-ink); padding:12px 14px; font-size:13.5px; }
.note.warn { background:var(--risk-soft); border-left-color:var(--risk); color:#7a2f1f; }
.muted { color:var(--muted); }
.sm { font-size:13px; }

/* the broker / individual choice, big enough to press on a phone */
.pick { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pick label { border:1.5px solid var(--line-2); padding:14px; cursor:pointer; background:var(--paper); }
.pick label:hover { border-color:var(--line-2); background:var(--surface-2); }
.pick input { position:absolute; opacity:0; }
.pick label:has(input:checked) { border-color:var(--orange); background:var(--orange-soft); }
.pick strong { display:block; font-family:var(--display); font-size:14.5px; }
.pick span { font-size:12.5px; color:var(--ink-2); }

/* ---------- lead detail ---------- */
.detail { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(290px,1fr); gap:16px;
          align-items:start; }
.shots { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.shots img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
             border:1.5px solid var(--line-2); }
.facts { display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-top:18px;
         border-top:1.5px solid var(--line-2); padding-top:16px; }
.facts div span { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
                  text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.facts div strong { font-family:var(--display); font-size:14.5px; font-weight:600; }

/* ---------- credit packs ---------- */
.packs { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.pack { border:1.5px solid var(--line-2); background:var(--surface-2); padding:20px; text-align:center; }
.pack.popular { border-color:var(--orange); background:var(--orange-soft); }
.pack .n { font-family:var(--mono); font-size:32px; font-weight:600; letter-spacing:-.02em; }
.pack .p { font-family:var(--display); font-size:16px; font-weight:700; margin:4px 0 2px; }
.pack .each { font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-bottom:14px; }

.foot { border-top:1.5px solid var(--line-2); margin-top:34px; color:var(--muted);
        font-size:12.5px; padding:20px 0 36px; }
.foot a { color:var(--ink-2); }

@media (max-width:880px) {
  .seek .row { grid-template-columns:1fr 1fr; }
  .seek .go { grid-column:1 / -1; }
  .detail, .two, .facts { grid-template-columns:1fr; }
  .tabs { flex-wrap:wrap; }
  .tabs .spacer { border-left:0; border-top:1.5px solid var(--line-2); width:100%; }
}

/* ---------- brokers ---------- */
.brokerhead { display:flex; align-items:center; gap:14px; }
.brokerhead img { width:54px; height:54px; object-fit:cover; border:1.5px solid var(--line-2); }
.brokerhead img.big, .avatar.big { width:84px; height:84px; font-size:28px; }
.avatar { width:54px; height:54px; flex:0 0 auto; display:inline-flex; align-items:center;
          justify-content:center; background:var(--ink); color:var(--cream, #FDEEDD);
          font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.02em; }
.via { font-size:12px; color:var(--muted); font-family:var(--mono); }
.via a { color:var(--orange-ink); }

/* a whole card is a link. ⚠ The headline keeps its own <a> so the keyboard, middle-click
   and "open in new tab" still work — the handler only covers the dead space around it. */
.card-link { cursor:pointer; transition:border-color .12s ease; }
.card-link:hover { border-color:var(--orange); }
.card-link a { position:relative; z-index:2; }

/* ---------------------------------------------------------- paid details (2026-10-23)
   The grid shows a drawn stand-in for every listing; the owner's own photographs are part
   of what the ₹118 buys. The corner caption keeps that honest. */
.shot{position:relative;background-size:cover;background-position:center}
.shot .illus{position:absolute;right:8px;bottom:8px;background:rgba(58,40,30,.72);color:#FFFCF9;
  font:500 10px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 7px}
.shot.big{height:320px;background-size:cover;background-position:center}

.paybox{margin:0}
.paybox .fld{display:block;margin:0 0 10px}
.paybox .fld span{display:block;font:500 11px/1 "IBM Plex Sans",system-ui,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.paybox .fld input{width:100%;padding:10px 11px;border:1px solid var(--line-2);background:var(--paper);
  color:var(--ink);font:400 15px/1.2 "IBM Plex Sans",system-ui,sans-serif}
.paybox .fld input:focus{outline:2px solid var(--orange);outline-offset:-1px}

.paytab{width:100%;border-collapse:collapse;font:400 15px/1.5 "IBM Plex Sans",system-ui,sans-serif}
.paytab td{padding:9px 0;border-bottom:1px solid var(--line)}
.paytab td:last-child{text-align:right}
.paytab .tot td{font-weight:600;border-bottom:none;border-top:2px solid var(--orange);color:var(--ink)}

/* ------------------------------------------------- the one search control (2026-10-23)
   Header: mark · search · nav. The control is a button dressed as a field — it opens the
   popup rather than filtering in place, because the things worth filtering on (budget,
   residential or commercial, kind, bedrooms) do not fit on a header row. */
.top .wrap{display:flex;align-items:center;gap:18px}
.top nav{margin-left:auto}

/* ⚠ flex:1 WITH min-width:0. Without the min-width a flex item refuses to shrink below
   its content, so the bar would push the nav off the right edge instead of taking exactly
   the space left between the mark and Sign in. */
.seekbar{display:flex;flex:1 1 auto;min-width:0;margin:0 8px}
.seekfield{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;
  padding:10px 14px;background:var(--paper);border:1px solid var(--line-2);border-right:0;
  color:var(--ink-2);font:400 14px/1.2 "IBM Plex Sans",system-ui,sans-serif;
  text-align:left;cursor:pointer}
.seekfield svg{color:var(--orange);flex:none}
.seekfield span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seekfield strong{font-weight:600;color:var(--ink)}
.seekgo{flex:none;padding:10px 22px;background:var(--orange);border:1px solid var(--orange);
  color:#fff;font:600 14px/1.2 "IBM Plex Sans",system-ui,sans-serif;cursor:pointer}
.seekbar:hover .seekfield{border-color:var(--orange)}
.seekgo:hover{background:var(--orange-ink);border-color:var(--orange-ink)}

/* The pitch, now at the foot of the page. */
.pitch{border-top:1px solid var(--line);background:var(--surface-2);padding:34px 0 30px;margin-top:40px}
.pitch h2{margin:6px 0 10px;font:700 clamp(26px,4vw,40px)/1.05 Archivo,system-ui,sans-serif;
  letter-spacing:-.02em;color:var(--ink)}
.pitch .sub{margin:0;max-width:58ch;color:var(--ink-2);font-size:16px;line-height:1.6}

.seekpop{width:min(680px,calc(100vw - 24px));max-height:88vh;padding:0;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);overflow:auto}
.seekpop::backdrop{background:rgba(58,40,30,.42)}
.seekpop header{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:2px solid var(--orange);position:sticky;top:0;background:var(--surface)}
.seekpop h2{margin:0;font:600 19px/1 Archivo,system-ui,sans-serif;letter-spacing:-.02em}
.seekpop .x{background:none;border:0;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.seekpop .x:hover{color:var(--ink)}
.seekpop .pad{padding:18px 20px}
.seekpop footer{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--surface)}

.seekpop .grp{margin:0 0 18px}
.seekpop .lbl{display:block;font:500 11px/1 "IBM Plex Sans",system-ui,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.seekpop .chips{display:flex;flex-wrap:wrap;gap:7px}
.seekpop .chips.bhk{margin-top:7px}
.seekpop .chip,.seekpop .seg{display:inline-flex;align-items:center;padding:7px 13px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2);
  font:400 14px/1.2 "IBM Plex Sans",system-ui,sans-serif}
.seekpop .chip.sm{padding:6px 11px;font-size:13px}
.seekpop .chip input,.seekpop .seg input{position:absolute;opacity:0;pointer-events:none}
.seekpop .chip:hover,.seekpop .seg:hover{border-color:var(--orange)}
.seekpop .chip.on,.seekpop .seg.on{background:var(--orange-soft);border-color:var(--orange);
  color:var(--orange-ink);font-weight:600}
.seekpop .segs{display:flex;gap:7px}

.seekpop input[type=text],.seekpop input:not([type]),.seekpop select{width:100%;padding:9px 11px;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink);
  font:400 15px/1.2 "IBM Plex Sans",system-ui,sans-serif}
.seekpop input:focus,.seekpop select:focus{outline:2px solid var(--orange);outline-offset:-1px}
.seekpop .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seekpop .four{display:grid;grid-template-columns:1fr 1fr;gap:8px}

@media (min-width:760px){ .seekpop .four{grid-template-columns:repeat(4,1fr)} }
@media (max-width:860px){
  .top .wrap{flex-wrap:wrap;row-gap:10px}
  .seekbar{order:3;flex-basis:100%;margin:0}
  .top nav{order:2}
}