:root{--g:#28b16d;--gd:#0e7a4a;--ink:#1f2933;--mut:#6b7785;--ln:#e4e8ec;--bg:#f7f8f9}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:#fff}
a{color:inherit;text-decoration:none}
img{display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
/* HEADER */
header{border-bottom:1px solid var(--ln);background:#fff;position:sticky;top:0;z-index:50}
.hd{display:flex;align-items:center;gap:28px;height:64px}
.logo{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:800;color:var(--gd);letter-spacing:-.5px;white-space:nowrap}
.logo .hs{width:34px;height:34px;border-radius:9px;background:linear-gradient(145deg,var(--g),var(--gd));display:grid;place-content:center;flex:0 0 auto;box-shadow:0 2px 6px rgba(14,122,74,.3)}
.logo .hs svg{width:20px;height:20px}
.logo i{font-style:normal;color:var(--g)}
nav.main{display:flex;gap:22px;font-size:14px;font-weight:500;flex:1}
nav.main a:hover{color:var(--g)}
.btn{border:1px solid var(--ln);background:#fff;border-radius:6px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--ink);white-space:nowrap}
.btn:hover{border-color:var(--g);color:var(--gd)}
.btn.pri{background:var(--g);border-color:var(--g);color:#fff}
.btn.pri:hover{background:var(--gd);color:#fff}
.burger{width:38px;height:38px;border:1px solid var(--ln);border-radius:6px;display:grid;place-content:center;gap:3px;cursor:pointer}
.burger i{display:block;width:16px;height:2px;background:var(--ink)}
/* SHARED BITS */
section{padding:30px 0}
h2.st{font-size:22px;font-weight:700;margin-bottom:4px}
p.ss{color:var(--mut);font-size:14px;margin-bottom:18px}
.seg{display:flex;border:1px solid var(--ln);border-radius:8px;overflow:hidden}
.seg button{border:0;background:#fff;padding:11px 20px;font:600 14px Inter;cursor:pointer;color:#3b4653}
.seg button.on{background:#e6f6ee;color:var(--gd)}
.sel{flex:1;border:1px solid var(--ln);border-radius:8px;padding:11px 13px;font:400 14px Inter;color:#3b4653;background:#fff;cursor:pointer}
.fld{flex:1;display:flex;align-items:center;gap:7px;border:1px solid var(--ln);border-radius:8px;padding:11px 13px;font-size:14px;color:var(--mut)}
.fld input{border:0;outline:0;flex:1;font:400 14px Inter}
.row{display:flex;gap:10px;margin-bottom:10px}
.crumb{font-size:12.5px;color:var(--mut);padding:14px 0}
.crumb a:hover{color:var(--g);text-decoration:underline}
.crumb span{margin:0 7px;opacity:.5}
/* PROPERTY CARD */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:20px}
.pc{border:1px solid var(--ln);border-radius:10px;overflow:hidden;background:#fff;transition:.2s;display:block}
.pc:hover{box-shadow:0 8px 22px rgba(0,0,0,.1);transform:translateY(-2px)}
.pc .im{position:relative;height:186px;background:#dfe4e8}
.pc .im img{width:100%;height:100%;object-fit:cover}
.chk{position:absolute;top:10px;left:10px;background:#fff;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:700}
.chk::before{content:"✔ ";color:var(--g)}
.vfy{position:absolute;bottom:10px;left:10px;background:rgba(0,0,0,.62);color:#fff;font-size:11px;padding:3px 8px;border-radius:4px}
.pc .bd{padding:14px}
.prc{font-size:19px;font-weight:700}
.prc em{font-style:normal;font-size:13px;color:var(--mut);font-weight:600;margin-right:3px}
.typ{font-size:13px;font-weight:600;margin:7px 0 5px}
.mt{display:flex;gap:14px;font-size:12.5px;color:var(--mut);flex-wrap:wrap}
.loc{font-size:12.5px;color:var(--mut);margin-top:9px;border-top:1px solid var(--ln);padding-top:9px}
.ag{display:flex;justify-content:space-between;align-items:center;margin-top:11px}
.ag .nm{font-size:12px;color:var(--mut)}
.icb{display:flex;gap:6px}
.icb span{width:30px;height:30px;border:1px solid var(--ln);border-radius:5px;display:grid;place-content:center;font-size:13px}
/* STORIES (insta-style) */
.strip{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 14px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.sv{flex:0 0 auto;width:92px;text-align:center;cursor:pointer;border:0;background:0;font-family:inherit}
.ring{width:82px;height:82px;border-radius:50%;padding:3px;margin:0 auto;
background:conic-gradient(from 210deg,#f9a825,#e5352b,#c2185b,#28b16d,#f9a825)}
.sv.seen .ring{background:var(--ln)}
.ring i{display:block;width:100%;height:100%;border-radius:50%;border:2.5px solid #fff;overflow:hidden;background:#eee}
.ring img{width:100%;height:100%;object-fit:cover}
.sv b{display:block;font-size:11.5px;font-weight:600;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv s{display:block;text-decoration:none;font-size:10.5px;color:var(--mut)}
.live{display:inline-block;background:#e5352b;color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;margin-left:4px;vertical-align:2px}
/* STORY VIEWER */
#sv{position:fixed;inset:0;background:rgba(10,12,16,.94);z-index:200;display:none;place-content:center}
#sv.on{display:grid}
.sw{width:min(400px,92vw);aspect-ratio:9/15.4;position:relative;border-radius:14px;overflow:hidden;background:#000;margin:auto}
.sw>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sw .shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.55) 0 18%,transparent 34% 58%,rgba(0,0,0,.8))}
.bars{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:4px;z-index:3}
.bars i{flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden}
.bars i b{display:block;height:100%;width:0;background:#fff}
.bars i.done b{width:100%}
.bars i.act b{animation:fill 4.6s linear forwards}
@keyframes fill{to{width:100%}}
.shd{position:absolute;top:26px;left:14px;right:14px;display:flex;align-items:center;gap:9px;z-index:3;color:#fff}
.shd img{width:33px;height:33px;border-radius:50%;object-fit:cover;border:2px solid #fff}
.shd b{font-size:13px}.shd s{display:block;text-decoration:none;font-size:11px;opacity:.8}
.shd .x{margin-left:auto;font-size:26px;background:0;border:0;color:#fff;cursor:pointer;line-height:1}
.scap{position:absolute;bottom:78px;left:20px;right:20px;color:#fff;z-index:3}
.scap b{font-size:19px;display:block;line-height:1.3}
.scap s{text-decoration:none;font-size:13px;opacity:.9;display:block;margin-top:5px}
.sgo{position:absolute;bottom:20px;left:20px;right:20px;background:#fff;color:var(--ink);border:0;border-radius:9px;padding:13px;font:700 14px Inter;cursor:pointer;z-index:3}
.nav{position:absolute;inset:0;display:flex;z-index:2}
.nav button{flex:1;background:0;border:0;cursor:pointer}
/* AGENT CARD */
.ac{border:1px solid var(--ln);border-radius:10px;padding:18px;text-align:center;transition:.2s;background:#fff}
.ac:hover{box-shadow:0 8px 22px rgba(0,0,0,.09);transform:translateY(-2px)}
.ac .av{width:88px;height:88px;border-radius:50%;object-fit:cover;margin:0 auto 12px;border:3px solid #e6f6ee}
.ac h3{font-size:16px;font-weight:700}
.ac .cy{font-size:12.5px;color:var(--mut);margin-top:3px}
.pill{display:inline-block;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:20px;margin:3px 2px}
.pill.b{background:#e8f1fd;color:#1667c9}.pill.p{background:#f4ebfd;color:#7a3cbe}
.stars{color:#f5a623;font-size:12px;margin-top:8px}
.acs{display:flex;border-top:1px solid var(--ln);margin-top:13px;padding-top:11px;font-size:12px}
.acs div{flex:1}.acs b{display:block;font-size:15px}
/* FOOTER */
footer{background:#12283c;color:#c6d2dd;margin-top:36px;padding:38px 0 22px;font-size:13px}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px}
footer h4{color:#fff;font-size:13px;margin-bottom:11px}
footer li{list-style:none;margin-bottom:7px;opacity:.85}
footer li:hover{opacity:1;color:#fff}
.fb{border-top:1px solid #24405a;margin-top:26px;padding-top:16px;font-size:12px;opacity:.7;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.side{position:fixed;right:0;top:38%;background:#0f6f58;color:#fff;writing-mode:vertical-rl;padding:16px 9px;font-size:12px;border-radius:6px 0 0 6px;z-index:40}
@media(max-width:900px){nav.main{display:none}.side{display:none}.row{flex-wrap:wrap}}