
:root{
  --navy:#143C73;--azure:#247DC7;--blue:#1F70B5;--light:#E5F5FF;--orange:#FF994A;
  --ink:#0F172A;--text:#334155;--muted:#64748B;--line:#E2E8F0;--input:#CBD5E1;
  --soft:#F8FAFC;--surface:#FFFFFF;--success:#0D9977;--shadow:0 9px 24px rgba(16,52,93,.075);
  --radius:12px;--container:1232px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:400 14px/1.55 Inter,Arial,sans-serif;background:#fff;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
a:hover{color:var(--azure)}
img,svg{max-width:100%}
svg{flex-shrink:0}
p,h1,h2,h3,h4{margin-top:0}
h1,h2,h3,h4{line-height:1.27;color:var(--navy)}
h1{font-size:32px;letter-spacing:-.7px}
h2{font-size:24px;letter-spacing:-.45px}
h3{font-size:17px}
p{color:var(--muted)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #8BD2FF;outline-offset:3px}
.skip-link{position:absolute;top:-70px;left:15px;background:#fff;color:var(--navy);padding:10px 15px;z-index:200}
.skip-link:focus{top:10px}
.container{max-width:var(--container);width:calc(100% - 48px);margin:0 auto}
#main{min-height:55vh}
.tiny{font-size:11px}
.muted{color:var(--muted)}
.text-blue{color:var(--azure)}
.text-orange{color:var(--orange)}
.bold{font-weight:700}
.eyebrow{font-weight:700;letter-spacing:.09em;color:#56D4F5;font-size:11px;text-transform:uppercase}
.demo-notice{background:#EAF6FF;color:#29577F;text-align:center;padding:5px 12px;font-size:11px;border-bottom:1px solid #D8EDFD}
.demo-notice b{color:var(--navy)}
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:90}
.header-wrap{height:68px;max-width:var(--container);width:calc(100% - 48px);margin:auto;display:flex;align-items:center;gap:22px}
.brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;color:var(--navy);font-size:20px;letter-spacing:-.65px;font-weight:700}
.brand:hover{color:var(--navy)}
.brand em{font-style:normal;color:var(--orange)}
.brand-mark{height:36px;width:36px;border-radius:9px;background:var(--azure);color:#fff;display:grid;place-items:center}
.brand-mark svg{width:22px;height:22px}
.desktop-nav{display:flex;align-items:center;gap:21px;margin-left:auto}
.desktop-nav a{font-weight:600;font-size:12px;white-space:nowrap;padding:9px 0;color:var(--text)}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--azure)}
.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.header-actions .phone-link{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--navy);font-weight:700;white-space:nowrap}
.header-login{font-size:12px;font-weight:600;color:var(--navy);white-space:nowrap}
.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:40px;padding:0 17px;border-radius:8px;border:1px solid transparent;font-size:13px;font-weight:600;white-space:nowrap;transition:.18s ease;background:transparent}
.btn:hover{transform:translateY(-1px);filter:brightness(.98)}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--azure);color:#fff}
.btn-primary:hover,.btn-orange:hover,.btn-navy:hover{color:#fff}
.btn-orange{background:var(--orange);color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-outline{color:var(--azure);border-color:var(--azure);background:#fff}
.btn-soft{background:var(--light);color:var(--azure)}
.btn-ghost{border:1px solid var(--line);background:#fff;color:var(--navy)}
.btn-pill{border-radius:999px}
.btn-small{min-height:32px;padding:0 12px;font-size:12px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.mobile-menu-btn,.mobile-phone-btn,.mobile-drawer{display:none}
.badge{display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:4px 8px;font-size:10px;line-height:1.2;font-weight:700;white-space:nowrap}
.badge-white{color:var(--azure);background:#EAF5FF}
.badge-vip{background:#FF9B48;color:#fff}
.badge-hot{background:var(--navy);color:#fff}
.badge-owner{background:#DDF8E7;color:#116044}
.badge-blue{background:#E7F4FF;color:var(--azure)}
.badge-outline{background:#fff;color:var(--azure);border:1px solid #AED8FD}
.surface{border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow)}
.section{padding:40px 0 15px}
.section-top{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:22px}
.section-top h2{margin-bottom:4px}
.section-top p{margin:0}
.section-top .text-link{font-weight:600;font-size:13px;color:var(--orange);white-space:nowrap}
.breadcrumb{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;padding:20px 0;flex-wrap:wrap}
.breadcrumb strong{font-weight:600;color:var(--navy)}
.page-title{margin:8px 0 7px}
.page-lead{font-size:14px;color:var(--muted);margin-bottom:20px}
.page-banner{padding:32px 35px;background:linear-gradient(110deg,#173E76,#237AC3);border-radius:14px;color:#fff;margin:12px 0 25px}
.page-banner h1,.page-banner p{color:#fff}
.page-banner h1{margin-bottom:8px}
.page-banner p{opacity:.82;margin-bottom:0}
.empty-state{text-align:center;padding:65px 20px}
.empty-state svg{color:var(--azure);width:52px;height:52px}
.empty-state h3{margin-top:18px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #CDE2F4;color:var(--navy);padding:6px 10px;border-radius:999px;font-size:12px;background:#F5FBFF}
.divider{height:1px;background:var(--line);margin:23px 0}
.icon-circle{width:42px;height:42px;display:inline-grid;place-items:center;background:#F3FAFF;color:var(--navy);border:1px solid #D6E9F7;border-radius:50%}
.icon-circle svg{width:20px}
.toast{position:fixed;right:22px;bottom:24px;z-index:300;background:var(--navy);color:#fff;padding:14px 18px;border-radius:10px;box-shadow:0 12px 28px #123c7377;max-width:360px}
#toast:empty{display:none}
.initial-loading{padding:15vh 0;text-align:center;color:var(--azure);display:flex;gap:12px;justify-content:center}
.spinner{width:18px;height:18px;border:2px solid #DCEEFF;border-top-color:var(--azure);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* SEARCH */
.search-band{background:#F8FBFE;border-bottom:1px solid #E8F0F8;padding:10px 0}
.search-bar{display:grid;grid-template-columns:107px minmax(210px,1fr) 125px 123px 117px 128px 86px 82px;gap:8px;align-items:center}
.search-control{height:40px;min-width:0;border:1px solid #D8E4F2;border-radius:8px;background:#fff;display:flex;align-items:center;padding:0 10px;gap:8px;font-size:12px;color:var(--navy);font-weight:600}
.search-control svg{width:17px;height:17px;color:var(--azure)}
.search-control input{width:100%;min-width:0;border:0;outline:0;font-size:12px;font-weight:400;color:var(--ink)}
.search-control input::placeholder{color:#94A3B8}
.search-control select{border:0;background:transparent;outline:0;appearance:none;width:100%;font-size:12px;color:var(--navy);font-weight:600;cursor:pointer}
.search-control .chevron{width:13px;color:var(--muted);margin-left:auto}
.search-bar .btn{height:40px;padding:0 10px;gap:4px;font-size:12px}
.search-row-mobile{display:none}
.search-keyword .search-go{display:none}
.filter-pills{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px}
.filter-pills button{border:1px solid #B8DFFD;background:var(--light);font-size:11px;border-radius:20px;color:var(--navy);padding:6px 10px}

/* HERO & CATEGORIES */
.hero{position:relative;min-height:264px;border-radius:14px;background:linear-gradient(111deg,#2478C0 10%,#32A8D9 66%,#51C9E7);padding:45px 52px;display:flex;align-items:center;overflow:hidden;color:#fff}
.hero::before{content:"";position:absolute;width:490px;height:350px;border-radius:50%;background:#ffffff0b;right:0;top:-150px}
.hero-copy{position:relative;z-index:2;max-width:580px}
.hero h1{color:#fff;margin:12px 0;font-size:31px}
.hero p{color:#E4F4FF;max-width:500px;font-size:14px;line-height:1.8;margin-bottom:22px}
.hero .btn{padding:0 25px}
.skyline{position:absolute;right:40px;bottom:0;height:235px;width:370px;display:flex;align-items:flex-end;gap:12px;opacity:.22}
.skyline span{display:block;width:75px;height:var(--height);border-radius:16px 16px 0 0;background:#E9F9FF;position:relative}
.skyline span::after{content:"";position:absolute;left:14px;right:14px;top:23px;bottom:14px;background:repeating-linear-gradient(to bottom,#2682BA 0 7px,transparent 7px 23px);opacity:.55}
.home-main .hero{margin-top:18px}
.categories{display:grid;grid-template-columns:repeat(7,1fr);gap:15px;padding:23px 0 4px}
.category{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text);font-size:12px}
.category .category-icon{width:56px;height:56px;border-radius:50%;border:1px solid #D4E7F7;background:#F5FBFF;display:grid;place-items:center;color:var(--azure);transition:.15s}
.category:hover .category-icon{background:#DFF3FF;border-color:#9ACFFC;transform:translateY(-2px)}
.category svg{width:25px;height:25px}
.category span:last-child{font-weight:500;line-height:1.4}

/* PROPERTIES */
.cards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.property-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 3px 12px rgba(15,23,42,.055);position:relative;transition:.15s}
.property-card:hover{box-shadow:0 10px 26px #16406D1F;transform:translateY(-2px)}
.thumb{height:195px;position:relative;overflow:hidden;background:var(--light)}
.thumb .badge{position:absolute;top:10px;left:10px;z-index:4}
.thumb .photo-count{position:absolute;bottom:9px;left:9px;z-index:4;background:#123C73D9;color:#fff;font-size:10px;border-radius:5px;padding:4px 7px;display:flex;gap:4px;align-items:center}
.thumb .photo-count svg{width:12px;height:12px}
.scene{width:100%;height:100%;position:relative;overflow:hidden;background:#76D5FA}
.scene::before{content:"";position:absolute;left:14%;bottom:-9%;width:68%;height:78%;background:#F7FCFF;border:9px solid #EAF4FF;border-bottom:0;border-radius:12px 12px 0 0;box-shadow:0 2px 20px #0F4C8B33}
.scene::after{content:"";position:absolute;left:27%;bottom:4%;width:46%;height:22%;background:#2A80BD;border-radius:8px 8px 0 0;box-shadow:0 -43px 0 -12px #BDE8FB,0 -82px 0 -23px #95D8F2}
.scene-villa{background:linear-gradient(#36B9F4 0 72%,#0B83C3 72% 100%)}
.scene-villa::before{height:70%;width:58%;left:21%;background:#FFF5D9;border-color:#FFFFFF;border-width:9px}
.scene-villa::after{background:#1985C9;box-shadow:0 -40px 0 -12px #CAEBFF,0 -84px 0 -26px #AAD9EE}
.scene-river{background:linear-gradient(#FCE9AF 0 72%,#EFCF83 72% 83%,#49A7D6 83%)}
.scene-river::before{background:#FFFFFF;border-color:#F8FAFC;width:66%;left:17%;height:62%}
.scene-river::after{background:#9B480E;box-shadow:0 -40px 0 -11px #CDEEFE}
.scene-modern{background:linear-gradient(#F3B65B 0 70%,#E47E00 70%)}
.scene-modern::before{background:#FFFFFF;border-color:#FFF0CF;width:66%;left:17%;height:69%}
.scene-modern::after{background:#AB4E16;box-shadow:0 -43px 0 -11px #FFFFFF}
.scene-night{background:linear-gradient(#EA7028 0 35%,#173D73 35% 58%,#0F172A 58%)}
.scene-night::before{background:#133F78;border-color:#18386B;width:100%;left:0;height:40%;bottom:-8%}
.scene-night::after{width:72%;left:14%;background:#F7B600;height:8%;bottom:36%;border-radius:30px;box-shadow:0 -22px 0 -8px #FFD668}
.scene-green{background:linear-gradient(#47B4EB 0 70%,#078BAA 70%)}
.scene-green::before{background:#F7F6EA;border-color:#F0F6F8}
.scene-green::after{background:#B8ECF6;box-shadow:0 -40px 0 -12px #8ED3EF}
.scene-office{background:linear-gradient(110deg,#2679C3,#43C4E4)}
.scene-office::before{background:repeating-linear-gradient(to right,#DCF5FF 0 16px,#A2D9F5 16px 23px);border-color:#F7FBFF;height:84%;width:64%;left:18%}
.scene-office::after{background:#EAF8FF;box-shadow:0 -40px 0 -12px #C7EBFB}
.card-content{padding:13px 15px 14px}
.card-meta-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:var(--muted);font-size:10px;margin-bottom:8px}
.card-meta-top .badge{padding:3px 7px}
.card-title{display:block;color:var(--ink);font-size:15px;font-weight:600;line-height:1.45;min-height:43px;margin-bottom:6px}
.card-title:hover{color:var(--azure)}
.card-price{color:var(--orange);font-size:18px;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.card-price span{font-size:12px;font-weight:600;color:var(--azure)}
.card-specs{font-size:12px;font-weight:500;color:var(--navy);display:flex;align-items:center;gap:10px;margin-bottom:7px}
.card-address{font-size:12px;color:var(--muted);display:flex;align-items:start;gap:5px;min-height:18px;margin-bottom:11px}
.card-address svg{width:13px;height:13px;color:var(--azure);margin-top:2px}
.card-bottom{display:flex;justify-content:space-between;align-items:center;color:#8492A7;font-size:11px;border-top:1px solid #F0F3F7;padding-top:10px}
.bookmark-btn{border:0;background:transparent;color:var(--azure);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px}
.bookmark-btn:hover{background:#E8F4FF}
.bookmark-btn.saved{color:var(--orange)}
.bookmark-btn svg{width:20px;height:20px}
.cards-actions{text-align:center;margin-top:24px}
.feature-strip{background:linear-gradient(105deg,#163E77,#1E6BB0 68%,#F9A04E 68%);color:#fff;border-radius:14px;padding:38px 48px;position:relative;overflow:hidden;margin:38px 0 0}
.feature-strip h2,.feature-strip p{color:#fff}
.feature-strip h2{margin:9px 0 8px}
.feature-strip p{color:#DFEBFF;max-width:480px}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.quick-link{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid #BCE2FC;border-radius:12px;box-shadow:var(--shadow);font-size:13px;font-weight:600;color:var(--navy)}
.quick-link .icon-circle{width:44px;height:44px}
.info-panel{padding:24px 30px;margin:36px 0 40px}
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.info-tile{padding:16px;border:1px solid var(--line);border-radius:12px;background:#F5FBFF}
.info-tile small{color:var(--muted);font-size:12px}
.info-tile strong{display:block;color:var(--navy);font-size:17px;margin:8px 0}
.info-tile span{font-size:12px;color:var(--azure)}

/* LISTING */
.listing-layout{display:grid;grid-template-columns:278px minmax(0,1fr);gap:24px;align-items:start}
.filter-sidebar{padding:20px;position:sticky;top:92px}
.filter-sidebar h3{margin-bottom:15px}
.filter-group{border-top:1px solid var(--line);padding:17px 0}
.filter-group:first-of-type{border:0}
.filter-group h4{font-size:13px;margin:0 0 11px}
.filter-group label{display:flex;align-items:center;gap:9px;color:var(--text);font-size:12px;margin:8px 0}
.filter-group input{accent-color:var(--azure)}
.filter-group select,.filter-group input[type=text]{width:100%;height:40px;border:1px solid var(--input);background:var(--soft);border-radius:8px;padding:0 10px}
.listing-toolbar{display:flex;align-items:center;gap:10px;padding:13px 16px;margin-bottom:15px;flex-wrap:wrap}
.listing-toolbar .grow{flex:1}
.listing-toolbar select{border:1px solid var(--line);border-radius:8px;padding:9px;background:#fff;color:var(--navy);font-size:12px}
.listing-row{display:grid;grid-template-columns:265px minmax(0,1fr);border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 2px 10px #143C7310;overflow:hidden;margin-bottom:14px;min-height:203px}
.listing-row .thumb{height:100%;min-height:203px}
.listing-row .list-content{padding:15px 17px;position:relative}
.listing-row .card-title{font-size:16px;min-height:0;margin:8px 0}
.listing-row .card-price{font-size:20px;margin-bottom:10px}
.listing-row .card-address{margin-bottom:10px}
.listing-row .list-actions{display:flex;gap:8px;flex-wrap:wrap}
.listing-row .list-actions .btn{min-height:32px}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin:25px 0}
.pager button{min-width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--text);padding:0 7px}
.pager button.active{background:var(--azure);border-color:var(--azure);color:#fff;font-weight:700}
.pager button:disabled{opacity:.4}
.guide-box{padding:25px 28px;margin:30px 0}
.guide-box h3{margin-bottom:10px}
.guide-box li{margin:8px 0;color:var(--text)}

/* DETAIL */
.detail-heading{display:flex;justify-content:space-between;gap:25px;align-items:start}
.detail-heading h1{max-width:920px}
.detail-gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:200px 200px;gap:8px;margin:22px 0 24px;border-radius:12px;overflow:hidden}
.detail-gallery .thumb{height:100%;min-height:100%}
.detail-gallery .thumb:first-child{grid-row:span 2}
.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.detail-main .surface{padding:25px;margin-bottom:20px}
.detail-price{font-size:29px;color:var(--orange);font-weight:700;margin-bottom:8px}
.fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.fact{padding:15px;border-radius:10px;background:#F4F9FD}
.fact small{color:var(--muted);display:block}
.fact strong{color:var(--navy);font-size:17px}
.tag-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}
.detail-sidebar{position:sticky;top:92px}
.agent-contact{text-align:center;padding:24px}
.avatar{width:62px;height:62px;border-radius:999px;background:var(--azure);color:#fff;display:grid;place-items:center;font-weight:700;font-size:21px;margin:auto}
.agent-contact h3{margin:12px 0 6px}
.agent-contact .btn{margin-top:9px}
.map-mini{height:215px;position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:14px}
.fake-map{background:#E9F5FF;position:relative;isolation:isolate;overflow:hidden}
.fake-map::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 60px,#FFF 61px 65px,transparent 65px 108px),repeating-linear-gradient(90deg,transparent 0 70px,#FFF 72px 77px,transparent 78px 132px);z-index:-1}
.fake-map::after{content:"";position:absolute;width:38%;height:125%;left:52%;top:-12%;background:#BCE9FA;transform:rotate(-16deg);border:15px solid #F1FAFE;z-index:-1}
.fake-map .map-label{position:absolute;top:16px;left:16px;font-size:11px;color:var(--navy);font-weight:700}
.fake-map .map-center{position:absolute;top:50%;left:49%;transform:translate(-50%,-50%);color:var(--orange);width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 4px 10px #143C7322}

/* MAP VIEW */
.map-page{padding:20px 0 35px;background:#F5FAFD}
.map-filter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--line);padding:12px;border-radius:12px;margin-bottom:16px}
.map-filter-row .search-control{flex:1 1 150px}
.map-filter-row .btn{min-height:40px}
.map-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(325px,1fr);gap:16px;min-height:680px}
.map-visual{border:1px solid #D0E6F7;overflow:hidden;border-radius:14px;position:relative;min-height:650px}
.map-visual .fake-map{width:100%;height:100%;min-height:650px;background:#F0F8FF}
.map-visual .fake-map::after{background:#9FD9F7;left:52%;width:20%;transform:rotate(-10deg)}
.map-toolbar{position:absolute;top:16px;left:16px;display:flex;gap:7px;z-index:6}
.map-toolbar button{border:1px solid var(--line);background:#fff;padding:8px 12px;border-radius:22px;color:var(--navy);font-size:11px;font-weight:700}
.map-pin{position:absolute;border:1px solid #D6E3EF;background:#fff;color:var(--navy);font-size:12px;font-weight:700;border-radius:25px;box-shadow:0 3px 8px #143C731A;padding:8px 12px;z-index:3;white-space:nowrap}
.map-pin i{display:inline-block;width:7px;height:7px;background:var(--orange);border-radius:50%;margin-right:6px}
.map-pin.active{background:var(--navy);color:#fff}
.map-panel{padding:18px;overflow:auto;max-height:750px}
.map-panel-top{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-bottom:16px}
.map-panel-top h2{font-size:19px;margin:0}
.map-result{display:grid;grid-template-columns:120px 1fr;gap:14px;border:1px solid var(--line);border-radius:12px;padding:11px;margin-bottom:12px;cursor:pointer}
.map-result:hover,.map-result.selected{border-color:var(--azure);background:#F5FBFF}
.map-result .thumb{height:124px;border-radius:8px}
.map-result h3{font-size:13px;color:var(--ink);margin:0 0 13px}
.map-result .price{font-size:18px;color:var(--orange);font-weight:700}
.map-result .small{font-size:11px;color:var(--muted);margin-top:7px}
.map-preview{position:absolute;bottom:17px;left:17px;width:min(330px,calc(100% - 34px));padding:12px;z-index:5}
.map-preview .thumb{height:104px;border-radius:8px}
.map-preview h3{font-size:14px;margin:8px 0 5px}
.map-preview .btn{width:100%;margin-top:9px}
.map-controls{position:absolute;right:15px;bottom:15px;display:flex;flex-direction:column;gap:2px;z-index:5}
.map-controls button{width:35px;height:35px;border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:7px;font-size:19px}

/* BROKERS, CAREERS, CONTACT, NEWS */
.broker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.broker-card{padding:24px;text-align:center}
.broker-card .avatar{width:68px;height:68px}
.broker-card h3{margin:12px 0 5px}
.broker-card .btn{margin-top:16px}
.broker-banner{background:linear-gradient(105deg,#FF9745,#FFAD61);padding:28px 35px;border-radius:12px;margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#fff}
.broker-banner h3,.broker-banner p{color:#fff;margin:0 0 5px}
.broker-profile{padding:26px;margin-bottom:18px}
.profile-head{display:flex;align-items:center;gap:22px}
.profile-head .avatar{width:82px;height:82px;margin:0}
.profile-head h1{font-size:23px;margin:0 0 6px}
.profile-head .actions{margin-left:auto;display:flex;gap:8px}
.jobs-grid{display:grid;grid-template-columns:2fr 1fr;gap:22px}
.job-card{padding:22px;margin-bottom:14px}
.job-card h3{margin-bottom:9px}
.job-card p{margin-bottom:12px}
.job-card .job-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:13px}
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;align-items:stretch}
.contact-panel{padding:28px}
.contact-panel h3{margin-bottom:8px}
.contact-line{display:flex;gap:11px;align-items:flex-start;margin:20px 0}
.contact-line svg{color:var(--azure);margin-top:2px}
.contact-line strong{display:block;color:var(--navy);font-size:13px}
.contact-line small{color:var(--muted)}
.form-field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px;font-size:12px;color:var(--navy);font-weight:600}
.form-field input,.form-field textarea,.form-field select{width:100%;border:1px solid var(--input);background:var(--soft);border-radius:8px;padding:11px 12px;color:var(--ink);outline:none}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--azure);box-shadow:0 0 0 3px #247DC71A}
.form-field textarea{resize:vertical;min-height:115px}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.news-topics{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:24px}
.news-topics button{border:0;background:transparent;color:var(--muted);padding:8px 13px;border-radius:20px;font-size:12px}
.news-topics button.active{color:var(--azure);border:1px solid #A6D6FB;background:#F4FBFF}
.news-feature{display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden}
.news-feature .scene{min-height:295px}
.news-feature .copy{padding:30px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.news-card{overflow:hidden}
.news-card .scene{height:160px}
.news-card .copy{padding:16px}
.news-card h3{font-size:15px;min-height:54px;margin:10px 0}
.news-card p{font-size:12px;margin-bottom:14px}
.news-card small{color:var(--azure)}
.article-layout{display:grid;grid-template-columns:1fr 280px;gap:24px}
.article-body{padding:30px}
.article-body p{font-size:14px;line-height:1.9;color:var(--text)}
.article-body h2{font-size:20px;margin-top:28px}
.article-body .scene{height:295px;border-radius:12px;margin:23px 0}
.article-side{padding:20px;align-self:start;position:sticky;top:90px}
.author-head{display:flex;align-items:center;gap:18px;padding:30px}
.author-head .avatar{width:76px;height:76px;margin:0}
.article-table{border-collapse:collapse;width:100%;font-size:13px}
.article-table td,.article-table th{border:1px solid var(--line);padding:11px;text-align:left}
.article-table th{background:#F0F8FF;color:var(--navy)}

/* AUTH */
.auth-page{padding:42px 0 64px;background:#F3FAFE}
.auth-layout{display:grid;grid-template-columns:420px 1fr;max-width:1020px;margin:0 auto;min-height:590px;border:1px solid #DEEBF6;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 14px 40px #113F7420}
.auth-side{padding:38px;background:var(--navy);color:#fff;display:flex;flex-direction:column}
.auth-side h2,.auth-side p{color:#fff}
.auth-side h2{font-size:25px;max-width:320px;margin-top:13px}
.auth-side .orange{color:var(--orange)}
.auth-side p{color:#CDE8FA}
.auth-benefit{display:flex;gap:13px;align-items:start;margin:17px 0}
.auth-benefit .icon-circle{width:32px;height:32px;background:#287BBE;color:#fff;border:0}
.auth-benefit .icon-circle svg{width:17px}
.auth-benefit strong{font-size:13px}
.auth-benefit small{display:block;color:#C1DBEE;font-size:11px;margin-top:4px}
.auth-note{margin-top:auto;background:#0D2D59;padding:17px;border-radius:10px;font-size:12px}
.auth-card{padding:38px 42px}
.auth-card h1{font-size:24px;margin-bottom:7px}
.auth-card .form-field{margin-bottom:14px}
.auth-card .form-field input{height:43px}
.auth-card .btn{min-height:45px}
.auth-social{border-top:1px solid var(--line);margin:18px 0 0;padding-top:18px}
.auth-social .btn{border-color:var(--line)}
.auth-bottom{text-align:center;background:var(--soft);padding:13px;border-radius:8px;font-size:12px;margin-top:17px}
.auth-bottom a{color:var(--azure);font-weight:700}
.checkbox-row{display:flex;gap:8px;align-items:flex-start;font-size:11px;margin:9px 0 16px;color:var(--text)}
.checkbox-row input{accent-color:var(--azure)}
.otp-page{max-width:680px;margin:20px auto 40px;padding:35px;text-align:center}
.otp-digits{display:flex;justify-content:center;gap:8px;margin:22px 0}
.otp-digits input{width:51px;height:60px;text-align:center;font-size:24px;font-weight:700;color:var(--navy);border:1px solid var(--input);border-radius:8px;background:var(--soft)}
.otp-digits input:focus{border-color:var(--azure);outline:2px solid #99CFFF}
.otp-demo-note{background:#FFF5E8;border:1px solid #FFD7AC;color:#905010;padding:12px;border-radius:8px;font-size:12px;margin:10px 0}

/* FOOTER, MOBILE */
.site-footer{background:var(--soft);border-top:1px solid var(--line);margin-top:54px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.15fr;gap:45px;padding:40px 0 55px}
.footer-grid h4{font-size:13px;color:var(--navy);margin-bottom:16px}
.footer-grid p{font-size:12px;margin:0 0 10px}
.footer-grid a{display:block;color:var(--muted);font-size:12px;margin:7px 0}
.footer-grid a:hover{color:var(--azure)}
.footer-grid svg{width:15px;height:15px}
.footer-contact{display:flex;gap:7px;align-items:start;font-size:12px;color:var(--muted);margin:10px 0}
.footer-newsletter{display:flex;align-items:center;border:1px solid var(--input);border-radius:8px;overflow:hidden;background:#fff;height:42px}
.footer-newsletter input{border:0;outline:0;min-width:0;flex:1;padding:0 12px;font-size:12px}
.footer-newsletter button{background:var(--orange);color:#fff;border:0;height:100%;padding:0 15px}
.footer-bottom{border-top:1px solid var(--line);background:#fff;padding:15px 0}
.footer-bottom .container{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.footer-bottom a{font-weight:600;color:var(--navy)}
.mobile-bottom{display:none}
.mobile-drawer{position:absolute;right:12px;top:calc(100% + 3px);background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px #143C7333;padding:9px;border-radius:12px;width:230px}
.mobile-drawer.open{display:flex;flex-direction:column}
.mobile-drawer a{padding:11px 12px;border-radius:8px;color:var(--navy);font-weight:600}
.mobile-drawer a:hover{background:var(--light)}
.kit-colors{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
.kit-swatch{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.kit-swatch .tone{height:90px}
.kit-swatch .meta{padding:10px;font-size:12px}
.kit-swatch .meta strong{display:block}
.kit-components{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* TABLET */
@media(max-width:1150px){
  .desktop-nav{gap:12px}
  .header-wrap{gap:12px}
  .header-actions{gap:7px}
  .header-actions .phone-link{display:none}
  .desktop-nav a{font-size:11px}
  .search-bar{grid-template-columns:100px minmax(140px,1fr) 105px 106px 100px 105px 77px 72px;gap:6px}
  .search-control{padding:0 7px;gap:5px}
  .search-control svg{width:14px}
  .footer-grid{gap:22px}
}
@media(max-width:900px){
  .container,.header-wrap{width:calc(100% - 48px)}
  .desktop-nav{display:none}
  .mobile-menu-btn{display:inline-flex}
  .mobile-menu-btn,.mobile-phone-btn{height:36px;width:36px;border-radius:8px;border:1px solid var(--line);background:#F3F8FC;color:var(--navy);align-items:center;justify-content:center}
  .header-actions{margin-left:auto}
  .header-login{display:none}
  .search-bar{grid-template-columns:repeat(4,minmax(0,1fr))}
  .search-keyword{grid-column:span 2}
  .search-control select{max-width:100%}
  .hero{min-height:240px;padding:35px}
  .skyline{right:-50px}
  .categories{gap:8px}
  .category .category-icon{width:50px;height:50px}
  .cards-grid,.broker-grid,.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  .listing-layout{grid-template-columns:1fr}
  .filter-sidebar{position:static}
  .listing-row{grid-template-columns:235px 1fr}
  .detail-layout{grid-template-columns:1fr}
  .detail-sidebar{position:static}
  .map-layout{grid-template-columns:1fr}
  .map-visual,.map-visual .fake-map{min-height:490px}
  .map-panel{max-height:none}
  .map-result{display:inline-grid;width:calc(50% - 8px);vertical-align:top;margin-right:8px}
  .contact-grid,.jobs-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .auth-layout{grid-template-columns:300px 1fr}
  .auth-side{padding:27px}
  .auth-card{padding:27px}
  .info-grid{grid-template-columns:repeat(2,1fr)}
  .kit-colors{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:620px){
  body{font-size:13px}
  h1{font-size:23px}
  h2{font-size:19px}
  h3{font-size:15px}
  .container,.header-wrap{width:calc(100% - 32px)}
  .site-header{top:0}
  .header-wrap{height:56px;gap:7px}
  .brand{font-size:16px;gap:7px;letter-spacing:-.55px}
  .brand-mark{width:32px;height:32px}
  .brand-mark svg{width:21px;height:21px}
  .header-actions{gap:5px}
  .mobile-phone-btn{display:inline-flex;width:32px;height:32px}
  .mobile-menu-btn{width:38px;height:34px;background:var(--navy);color:#fff;border-color:var(--navy)}
  .header-actions .post-btn{min-height:32px;padding:0 9px;font-size:11px}
  .header-actions .post-btn svg{width:13px;height:13px}
  .demo-notice{font-size:10px;padding:4px 5px}
  .section{padding:26px 0 5px}
  .section-top{margin-bottom:14px}
  .section-top p{font-size:12px}
  .section-top .text-link{font-size:11px}
  .page-banner{padding:21px;border-radius:12px}
  .breadcrumb{padding:13px 0;font-size:11px}
  .search-band{padding:7px 0}
  .search-bar{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .search-keyword{grid-column:1/-1}
  .search-bar .btn{grid-column:span 3}
  .search-bar:not(.search-home) .search-control:nth-child(n+5){display:none}
  .search-home .search-control{height:36px}
  .search-home .search-keyword{height:40px;grid-row:1;grid-column:1/-1}
  .search-home .search-control:first-child{display:flex;grid-row:2;grid-column:1}
  .search-home .search-control:nth-child(3){grid-row:2;grid-column:2}
  .search-home .search-control:nth-child(4){grid-row:2;grid-column:3}
  .search-home .search-control:nth-child(n+5){display:none}
  .search-home .btn{display:none}
  .search-home .search-keyword .search-go{display:inline-flex;grid-column:auto;min-height:31px;padding:0 9px}
  .search-row-mobile{display:block}
  .search-keyword input{font-size:11px}
  .search-home .search-control select{font-size:11px}
  .hero{min-height:176px;border-radius:12px;padding:20px;margin-top:12px!important}
  .hero h1{font-size:22px;line-height:1.2;margin:8px 0}
  .hero p{font-size:12px;line-height:1.6;margin-bottom:13px;max-width:290px}
  .hero .btn{min-height:36px;font-size:11px;padding:0 14px}
  .skyline{display:none}
  .categories{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:4px;padding:17px 0 4px}
  .category{gap:5px;font-size:10px}
  .category .category-icon{width:100%;height:54px;border-radius:12px}
  .category svg{width:24px;height:24px}
  .category:nth-child(n+6){display:none}
  .cards-grid,.broker-grid,.news-grid{grid-template-columns:1fr;gap:11px}
  .property-card{display:grid;grid-template-columns:124px 1fr;min-height:170px}
  .property-card .thumb{height:100%;min-height:170px}
  .property-card .card-content{padding:10px 10px 8px}
  .property-card .card-title{font-size:12px;line-height:1.4;min-height:0;margin:5px 0}
  .property-card .card-price{font-size:14px;margin:4px 0}
  .property-card .card-meta-top{font-size:9px;margin:0}
  .property-card .card-specs,.property-card .card-address{font-size:10px;margin-bottom:4px}
  .property-card .card-bottom{font-size:9px;padding-top:5px}
  .property-card .photo-count{font-size:9px;padding:3px 4px}
  .feature-strip{padding:24px;border-radius:12px;margin-top:23px;background:linear-gradient(110deg,#173C75,#2377B9 65%,#FF9B4A)}
  .feature-strip h2{font-size:18px}
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .quick-link{padding:8px;gap:7px;font-size:10px}
  .quick-link .icon-circle{width:30px;height:30px}
  .quick-link .icon-circle svg{width:15px}
  .info-panel{padding:17px;margin:22px 0}
  .info-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .info-tile{padding:10px}
  .info-tile strong{font-size:12px}
  .info-tile small,.info-tile span{font-size:10px}
  .listing-toolbar{padding:10px;gap:6px}
  .listing-toolbar .btn{font-size:11px;padding:0 8px}
  .listing-row{grid-template-columns:115px 1fr;min-height:171px;margin-bottom:10px}
  .listing-row .thumb{min-height:171px}
  .listing-row .list-content{padding:9px}
  .listing-row .card-title{font-size:11px;margin:4px 0}
  .listing-row .card-price{font-size:15px;margin:3px 0}
  .listing-row .card-address,.listing-row .card-specs{font-size:10px;margin-bottom:4px}
  .listing-row .list-actions .btn{min-height:27px;font-size:10px;padding:0 8px}
  .filter-sidebar{padding:15px;display:none}
  .filter-sidebar.show{display:block}
  .pager{gap:6px}
  .pager button{min-width:34px;width:34px;height:34px;padding:0}
  .guide-box{padding:15px}
  .detail-heading{display:block}
  .detail-heading h1{font-size:20px}
  .detail-gallery{grid-template-columns:1fr 1fr;grid-template-rows:200px 95px}
  .detail-gallery .thumb:first-child{grid-column:span 2;grid-row:span 1}
  .detail-gallery .thumb:nth-child(n+4){display:none}
  .detail-main .surface{padding:17px}
  .detail-price{font-size:23px}
  .fact-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .map-page{padding:14px 0}
  .map-filter-row .search-control{flex-basis:45%}
  .map-layout{gap:12px}
  .map-visual,.map-visual .fake-map{min-height:425px}
  .map-pin{padding:6px 9px;font-size:10px}
  .map-panel{padding:12px}
  .map-result{width:100%;margin-right:0;grid-template-columns:112px 1fr}
  .map-result .thumb{height:108px}
  .map-result h3{font-size:12px;margin-bottom:6px}
  .map-result .price{font-size:15px}
  .map-preview{display:none}
  .broker-card{padding:18px}
  .broker-banner{padding:20px;display:block}
  .broker-banner .btn{margin-top:12px}
  .profile-head{display:block;text-align:center}
  .profile-head .avatar{margin:0 auto 13px}
  .profile-head .actions{justify-content:center;margin-top:14px}
  .contact-panel{padding:18px}
  .form-row{grid-template-columns:1fr;gap:0}
  .news-feature{grid-template-columns:1fr}
  .news-feature .scene{min-height:175px}
  .news-feature .copy{padding:18px}
  .news-card{display:grid;grid-template-columns:120px 1fr}
  .news-card .scene{height:100%;min-height:150px}
  .news-card .copy{padding:12px}
  .news-card h3{font-size:12px;min-height:0}
  .news-card p{display:none}
  .article-layout{grid-template-columns:1fr}
  .article-side{position:static}
  .article-body{padding:18px}
  .auth-page{padding:15px 0 25px}
  .auth-layout{display:block;min-height:0;border:0;box-shadow:none;background:transparent}
  .auth-side{padding:19px 20px;border-radius:12px;margin-bottom:12px}
  .auth-side h2{font-size:19px;max-width:100%;margin:8px 0}
  .auth-benefit,.auth-note{display:none}
  .auth-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
  .auth-card h1{font-size:20px}
  .otp-page{padding:22px 14px}
  .otp-digits{gap:5px}
  .otp-digits input{width:min(45px,14%);height:53px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:25px 0 85px}
  .footer-grid > div{min-width:0;overflow-wrap:anywhere}
  .footer-newsletter{max-width:100%}
  .footer-grid h4{font-size:11px}
  .footer-grid a,.footer-grid p{font-size:10px}
  .footer-bottom{padding-bottom:110px}
  .site-footer{margin-top:35px}
  .mobile-bottom{display:flex;position:fixed;bottom:0;left:0;right:0;height:78px;background:#fff;border:1px solid #D2DEED;border-radius:12px 12px 0 0;z-index:95;justify-content:space-around;align-items:end;padding:7px 3px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -5px 16px #123C7312}
  .mobile-bottom a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:4px;font-size:10px;color:var(--muted)}
  .mobile-bottom svg{width:22px;height:22px}
  .mobile-bottom a.active{color:var(--azure);font-weight:600}
  .mobile-bottom .post-fab{position:relative}
  .mobile-bottom .post-fab span:first-child{display:grid;place-items:center;background:var(--orange);border-radius:50%;width:44px;height:44px;color:var(--navy);margin-top:-21px}
  .mobile-bottom .post-fab svg{width:21px}
  .mobile-bottom .post-fab{color:var(--muted)}
  .toast{bottom:90px;left:12px;right:12px;font-size:12px}
  .kit-colors{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:365px){
  .brand{font-size:13px}
  .header-actions .post-btn{padding:0 7px;font-size:10px}
  .mobile-phone-btn{display:none}
  .search-bar{gap:5px}
  .search-control{padding:0 6px}
  .categories{gap:5px}
  .category{font-size:9px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
