/* Layout: an architect's sheet — hairline grid, generous white space, one gold roof line as the only accent */
:root{
  --bg:#FAFAF8; --surface:#FFFFFF; --fg:#16181D; --muted:#5F636B; --line:#E3E2DD; --soft:#F1F0EC;
  --accent:#F2A900; --accent-ink:#8A6100; --on-accent:#16181D; --danger:#B3261E; --ok:#2E7D4F;
  --grid:rgba(22,24,29,.045);
  --font:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r:10px; --wrap:1180px;
  color-scheme:light;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1.1}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:14px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--fg)}
.brand svg{display:block}
.brand .div{width:1px;height:26px;background:var(--fg);opacity:.85}
.brand .word{font-size:12px;letter-spacing:.32em;text-transform:uppercase;font-weight:500}
nav.menu{display:flex;flex-wrap:wrap;gap:4px}
nav.menu a{padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:500;font-size:15px;color:var(--muted);min-height:44px;display:inline-flex;align-items:center}
nav.menu a:hover{color:var(--fg)}
nav.menu a[aria-current="page"]{color:var(--fg);background:var(--soft)}

/* buttons & inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font:inherit;font-weight:600;font-size:15px;border:1.5px solid var(--fg);background:var(--fg);color:var(--bg);cursor:pointer;text-decoration:none}
.btn:hover{opacity:.9}
.btn.ghost{background:transparent;color:var(--fg)}
.btn.small{min-height:38px;padding:0 14px;font-size:14px}
.btn.danger{border-color:var(--danger);color:var(--danger);background:transparent}
.btn[disabled]{opacity:.45;cursor:not-allowed}
label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
input,select,textarea{width:100%;font:inherit;font-size:15px;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;min-height:46px}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--fg)}
.field{min-width:0}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);font-weight:400}
.check input{width:20px;height:20px;min-height:0;margin-top:2px;flex:none}
.note{font-size:13px;color:var(--muted)}
.status{font-size:14px;min-height:22px}
.status.ok{color:var(--ok)} .status.err{color:var(--danger)}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px}
.hero .wrap{position:relative;padding-block:88px 96px;display:grid;gap:28px}
.hero h1{font-size:clamp(40px,6.4vw,76px);font-weight:700;max-width:13ch;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--accent-ink)}
.hero p.lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:52ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}
.roof{position:absolute;right:-4%;bottom:-2px;width:min(56%,640px);height:auto;pointer-events:none}
@media (max-width:720px){.roof{width:90%;right:-20%;opacity:.5}}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:14px;color:var(--muted)}
.facts span::before{content:"";display:inline-block;width:6px;height:6px;background:var(--accent);margin-right:10px;vertical-align:2px}

/* sections */
section.block{padding-block:80px;border-bottom:1px solid var(--line)}
.sechead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:36px}
.sechead h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;margin-top:10px}
.cols4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 28px}
.cols4 > div{border-top:1.5px solid var(--fg);padding-top:18px;padding-bottom:28px;min-width:0}
.cols4 h3{font-size:19px;font-weight:700;margin-bottom:8px}
.cols4 p{color:var(--muted);font-size:15px}
.step-n{font-size:13px;font-weight:700;color:var(--accent-ink);letter-spacing:.1em;margin-bottom:10px;display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:500;background:var(--surface)}

/* property cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:28px}
.card{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--fg);min-width:0}
.ph{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:var(--r);overflow:hidden;background:var(--soft);border:1px solid var(--line)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.card:hover .ph img{transform:scale(1.03)}
.ph .empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
.tag{position:absolute;left:12px;top:12px;background:var(--surface);color:var(--fg);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.tag.st{left:auto;right:12px;background:var(--fg);color:var(--bg)}
.tag.ex{left:auto;right:12px;background:var(--accent);color:var(--on-accent)}
.card .price{font-size:20px;font-weight:700}
.card .ttl{font-weight:600;line-height:1.35}
.card .meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--muted)}
.emptybox{border:1px dashed var(--line);border-radius:var(--r);padding:40px 24px;text-align:center;display:grid;gap:12px;justify-items:center;color:var(--muted);background:var(--surface)}
.emptybox strong{color:var(--fg);font-size:18px}

/* filters */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:28px}
.seg{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--surface);flex-wrap:wrap}
.seg button{flex:1;border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--muted);border-radius:999px;padding:8px 12px;cursor:pointer;min-height:38px}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.count{font-size:14px;color:var(--muted)}

/* detail */
.detail{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:860px){.detail{grid-template-columns:1fr}}
.gallery{display:grid;gap:10px}
.thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.thumbs button{flex:none;width:86px;aspect-ratio:4/3;border-radius:8px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:var(--soft)}
.thumbs button[aria-current="true"]{border-color:var(--fg)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);margin-block:24px}
.specs div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px}
.specs dt{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.specs dd{margin:4px 0 0;font-weight:700;font-size:17px}
.desc{white-space:pre-line;color:var(--fg);max-width:65ch}
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px);display:grid;gap:18px;border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--surface)}
@media (max-width:860px){.side{position:static}}
.agent{display:flex;gap:14px;align-items:center}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--soft);display:grid;place-items:center;font-weight:700;flex:none;overflow:hidden}
.copyrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.copyrow .v{font-weight:700;user-select:all}
.back{display:inline-flex;gap:8px;align-items:center;text-decoration:none;color:var(--muted);font-weight:600;margin-bottom:24px;min-height:44px}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.infolist{display:grid;gap:18px;margin-top:28px}
.infolist .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:24px;display:grid;gap:16px}

/* admin */
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:28px}
.tabs button{border:0;background:transparent;font:inherit;font-weight:600;color:var(--muted);padding:12px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;min-height:44px}
.tabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--fg)}
.adm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:start}
@media (max-width:960px){.adm{grid-template-columns:1fr}}
.rows{display:grid;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.row{display:flex;gap:14px;align-items:center;padding:14px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.row:first-child{border-top:0}
.row .grow{flex:1;min-width:180px}
.row .mini{width:64px;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:var(--soft);flex:none}
.row .mini img{width:100%;height:100%;object-fit:cover;display:block}
.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.pill.on{border-color:var(--ok);color:var(--ok)}
.pill.new{border-color:var(--accent-ink);color:var(--accent-ink)}
.photos{display:flex;flex-wrap:wrap;gap:8px}
.photos .ph2{position:relative;width:92px;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--soft)}
.photos .ph2 img{width:100%;height:100%;object-fit:cover}
.photos .ph2 button{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:var(--fg);color:var(--bg);cursor:pointer;font-weight:700;line-height:1}
.msg{display:grid;gap:6px;padding:16px;border-top:1px solid var(--line)}
.msg:first-child{border-top:0}
.msg .hd{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.msg .txt{white-space:pre-line;color:var(--muted);font-size:15px}

.cta{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-end;justify-content:space-between;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:clamp(24px,4vw,44px)}
.cta > div:first-child{flex:1 1 420px}
.after{margin:32px 0 0;padding:0;list-style:none;counter-reset:a;display:grid;gap:12px;border-top:1px solid var(--line);padding-top:24px}
.after li{counter-increment:a;display:flex;gap:12px;color:var(--muted);font-size:15px}
.after li::before{content:counter(a);flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--fg);color:var(--fg);display:grid;place-items:center;font-size:13px;font-weight:700}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:4px 0;font-size:14px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600}
footer{padding-block:40px 56px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
footer a{color:var(--muted)}
.lock{max-width:560px}
