/* HomeBase Connect — Main Stylesheet · Warm Stone & Terracotta */
:root {
  --ink: #23201c;
  --bg: #faf7f2;
  --surface: #ffffff;
  --surface2: #f3ede4;
  --glass: rgba(35,32,28,0.03);
  --accent: #c1622f;
  --accent2: #e08b52;
  --accent-dim: rgba(193,98,47,0.10);
  --sage: #5b7a63;
  --sage-dim: rgba(91,122,99,0.10);
  --rose: #c1453a;
  --green: #3f8f5f;
  --text: #23201c;
  --text-muted: #8a8073;
  --text-soft: #5b5347;
  --border: rgba(193,98,47,0.22);
  --border-soft: rgba(35,32,28,0.08);
  --r: 12px;
  --r2: 20px;
  --shadow: 0 20px 50px rgba(35,32,28,0.10);
  --shadow-sm: 0 4px 16px rgba(35,32,28,0.06);
  --shadow-md: 0 10px 30px rgba(35,32,28,0.09);

  /* legacy aliases kept so existing class names (btn-gold, badge-gold, text-gold…)
     repaint with the new palette without a repo-wide rename */
  --gold: var(--accent);
  --gold2: var(--accent2);
  --gold-dim: var(--accent-dim);
  --teal: var(--sage);
  --teal-dim: var(--sage-dim);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; font-weight:400; min-height:100vh; }

a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent2); }

:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

::selection { background:var(--accent); color:#fff; }

/* Slim, tasteful scrollbar (WebKit + Firefox) */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(35,32,28,0.15); border-radius:100px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:rgba(193,98,47,0.4); background-clip:content-box; }
* { scrollbar-width:thin; scrollbar-color:rgba(35,32,28,0.2) transparent; }

/* ── Layout ── */
.layout { display:flex; min-height:100vh; }
.sidebar {
  width:260px; flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.main-content { flex:1; overflow:hidden; }

/* ── Sidebar ── */
.sidebar-logo {
  padding:28px 24px 20px;
  border-bottom:1px solid var(--border-soft);
  font-family:'Fraunces',serif; font-size:1.3rem;
  color:var(--text);
}
.sidebar-logo span { color:var(--accent); font-style:italic; }
.sidebar-role {
  display:inline-block; padding:2px 10px; border-radius:100px;
  background:var(--accent-dim); border:1px solid var(--border);
  font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent); margin-top:6px;
}
.sidebar-nav { padding:16px 12px; flex:1; }
.nav-section-label {
  padding:4px 8px; font-size:0.62rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--text-muted); margin-top:12px;
}
.nav-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; margin-bottom:2px; color:var(--text-soft); font-size:0.86rem;
  transition:background 0.2s, color 0.2s, transform 0.2s; cursor:pointer;
  border-radius:10px; text-decoration:none; position:relative;
}
.nav-item:hover { background:var(--glass); color:var(--text); transform:translateX(2px); }
.nav-item.active { background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff; box-shadow:0 6px 16px rgba(193,98,47,0.28); }
.nav-item .icon {
  width:26px; height:26px; text-align:center; font-size:0.95rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; border-radius:8px;
  background:rgba(35,32,28,0.04); transition:background 0.2s;
}
.nav-item.active .icon { background:rgba(255,255,255,0.2); }
.nav-item:hover .icon { background:rgba(35,32,28,0.07); }
.nav-item.active:hover .icon { background:rgba(255,255,255,0.25); }
.sidebar-footer {
  padding:16px 20px;
  border-top:1px solid var(--border-soft);
  font-size:0.78rem; color:var(--text-muted);
}
.sidebar-user { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.sidebar-avatar {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-size:0.9rem; font-weight:600; color:#fff;
  overflow:hidden; flex-shrink:0; box-shadow:0 4px 12px rgba(193,98,47,0.3);
}
.sidebar-avatar img { width:100%; height:100%; object-fit:cover; }
.sidebar-username { font-size:0.84rem; color:var(--text); font-weight:500; }
.sidebar-email { font-size:0.72rem; color:var(--text-muted); }

/* ── Top bar ── */
.topbar {
  height:64px; background:rgba(255,255,255,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px; position:sticky; top:0; z-index:50;
}
.topbar-title { font-family:'Fraunces',serif; font-size:1.3rem; font-weight:300; }
.topbar-actions { display:flex; align-items:center; gap:16px; }
.topbar-notif {
  position:relative; width:38px; height:38px;
  background:var(--surface2); border:1px solid var(--border-soft);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.05rem; transition:background 0.2s, transform 0.2s, border-color 0.2s;
  text-decoration:none; color:var(--text);
}
.topbar-notif:hover { background:var(--accent-dim); border-color:var(--border); color:var(--accent); transform:translateY(-1px); }
.notif-badge {
  position:absolute; top:-5px; right:-5px;
  min-width:17px; height:17px; padding:0 3px; border-radius:50%;
  background:var(--rose); font-size:0.6rem; font-weight:700;
  color:#fff; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg); box-shadow:0 2px 6px rgba(193,69,58,0.4);
}

/* ── Page content ── */
.page { padding:32px; animation:pageFadeIn 0.4s ease-out both; }
@keyframes pageFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.page-header { margin-bottom:28px; }
.page-header h1 { font-family:'Fraunces',serif; font-size:1.8rem; font-weight:300; }
.page-header p { color:var(--text-soft); font-size:0.88rem; margin-top:4px; }

/* ── Cards ── */
.card {
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--r2); padding:24px;
  box-shadow:var(--shadow-sm);
}
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.card-title { font-size:0.95rem; font-weight:500; }
.card-subtitle { font-size:0.78rem; color:var(--text-soft); margin-top:2px; }

/* ── Stat cards ── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:28px; }
.stat-card {
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--r2); padding:20px;
  transition:border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position:relative; overflow:hidden;
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  opacity:0; transition:opacity 0.3s;
}
.stat-card:hover { border-color:var(--border); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.stat-card:hover::before { opacity:1; }
.stat-card .label { font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; }
.stat-card .value { font-family:'Fraunces',serif; font-size:2rem; font-weight:300; color:var(--text); line-height:1; }
.stat-card .change { font-size:0.74rem; color:var(--text-soft); margin-top:6px; }
.stat-card .icon {
  float:right; font-size:1.2rem; margin-top:-4px;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:var(--accent-dim); color:var(--accent);
}

/* ── Tables ── */
.table-wrap { overflow-x:auto; border-radius:var(--r); }
table { width:100%; border-collapse:collapse; font-size:0.86rem; }
thead th {
  padding:12px 16px; text-align:left;
  font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-muted); border-bottom:1px solid var(--border-soft);
  background:var(--surface2);
}
thead th:first-child { border-top-left-radius:var(--r); }
thead th:last-child { border-top-right-radius:var(--r); }
tbody tr { border-bottom:1px solid var(--border-soft); transition:background 0.15s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--accent-dim); }
tbody td { padding:13px 16px; color:var(--text-soft); vertical-align:middle; }
tbody td strong { color:var(--text); }

/* ── Badges ── */
.badge {
  display:inline-block; padding:3px 10px; border-radius:100px;
  font-size:0.65rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase;
}
.badge-gold, .badge-accent { background:var(--accent-dim); color:var(--accent); border:1px solid var(--border); }
.badge-teal, .badge-sage   { background:var(--sage-dim); color:var(--sage); border:1px solid rgba(91,122,99,0.2); }
.badge-rose     { background:rgba(193,69,58,0.1); color:var(--rose); border:1px solid rgba(193,69,58,0.2); }
.badge-green    { background:rgba(63,143,95,0.1); color:var(--green); border:1px solid rgba(63,143,95,0.2); }
.badge-gray     { background:rgba(35,32,28,0.05); color:var(--text-muted); border:1px solid var(--border-soft); }
.badge-purple   { background:rgba(139,111,167,0.1); color:#8b6fa7; border:1px solid rgba(139,111,167,0.2); }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:8px;
  font-family:'Inter',sans-serif; font-size:0.82rem; font-weight:500;
  letter-spacing:0.02em; cursor:pointer; transition:all 0.25s;
  border:none; text-decoration:none; white-space:nowrap;
}
.btn-sm { padding:7px 14px; font-size:0.76rem; border-radius:6px; }
.btn-gold {
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;
  position:relative; overflow:hidden;
}
.btn-gold::after {
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg); transition:left 0.6s ease;
}
.btn-gold:hover::after { left:130%; }
.btn-gold:hover { box-shadow:0 8px 24px rgba(193,98,47,0.35); transform:translateY(-1px); color:#fff; }
.btn-outline { background:var(--surface); border:1px solid var(--border-soft); color:var(--text-soft); }
.btn-outline:hover { border-color:var(--border); color:var(--text); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.btn-danger { background:rgba(193,69,58,0.1); border:1px solid rgba(193,69,58,0.2); color:var(--rose); }
.btn-danger:hover { background:rgba(193,69,58,0.2); transform:translateY(-1px); }
.btn-teal { background:var(--sage-dim); border:1px solid rgba(91,122,99,0.2); color:var(--sage); }
.btn-teal:hover { background:rgba(91,122,99,0.18); transform:translateY(-1px); }
.btn:active { transform:translateY(0) scale(0.97) !important; }
.btn:disabled, .btn[disabled] { opacity:0.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ── Forms ── */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:0.78rem; color:var(--text-soft); margin-bottom:6px; letter-spacing:0.02em; }
.form-control {
  width:100%; padding:11px 14px;
  background:var(--surface2); border:1px solid var(--border-soft);
  border-radius:8px; color:var(--text); font-family:'Inter',sans-serif;
  font-size:0.88rem; transition:border-color 0.25s, box-shadow 0.25s;
  outline:none;
}
.form-control:hover { border-color:rgba(193,98,47,0.35); }
.form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(193,98,47,0.12); background:var(--surface); }
.form-control::placeholder { color:var(--text-muted); }
select.form-control option { background:var(--surface2); }
textarea.form-control { resize:vertical; min-height:100px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-hint { font-size:0.72rem; color:var(--text-muted); margin-top:4px; }
.form-error { font-size:0.76rem; color:var(--rose); margin-top:4px; }

/* ── Alerts ── */
.alert {
  padding:12px 16px; border-radius:8px; font-size:0.86rem;
  display:flex; align-items:flex-start; gap:10px; margin-bottom:16px;
}
.alert-success { background:rgba(63,143,95,0.1); border:1px solid rgba(63,143,95,0.2); color:var(--green); }
.alert-error, .alert-danger { background:rgba(193,69,58,0.1); border:1px solid rgba(193,69,58,0.2); color:var(--rose); }
.alert-warning { background:rgba(224,139,82,0.15); border:1px solid rgba(224,139,82,0.3); color:#a15a1f; }
.alert-info { background:var(--accent-dim); border:1px solid var(--border); color:var(--accent); }

/* ── Property / unit cards ── */
.property-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.property-card {
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--r2); overflow:hidden;
  transition:transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.property-card:hover { transform:translateY(-4px); border-color:var(--border); box-shadow:var(--shadow); }
.property-card-img {
  height:200px; background:var(--surface2);
  position:relative; overflow:hidden;
}
.property-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.property-card:hover .property-card-img img { transform:scale(1.05); }
.property-card-img .no-img {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; color:var(--text-muted);
}
.property-card-badge {
  position:absolute; top:12px; left:12px;
}
.property-card-save {
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; background:rgba(255,255,255,0.85);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:1rem; transition:background 0.2s;
}
.property-card-save:hover { background:rgba(193,98,47,0.15); }
.property-card-body { padding:16px; }
.property-card-price {
  font-family:'Fraunces',serif; font-size:1.4rem;
  color:var(--accent); font-weight:300;
}
.property-card-price span { font-size:0.75rem; color:var(--text-muted); font-family:'Inter',sans-serif; }
.property-card-title { font-size:0.92rem; font-weight:500; color:var(--text); margin:4px 0 8px; }
.property-card-meta { display:flex; gap:12px; flex-wrap:wrap; }
.property-card-meta span { font-size:0.76rem; color:var(--text-muted); display:flex; align-items:center; gap:4px; }
.property-card-footer {
  padding:12px 16px; border-top:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-between;
}
.property-card-location { font-size:0.76rem; color:var(--text-muted); }
.property-card-location strong { color:var(--text-soft); }

/* ── Pagination ── */
.pagination { display:flex; gap:8px; justify-content:center; margin-top:28px; }
.pagination a, .pagination span {
  padding:8px 14px; border-radius:8px; font-size:0.82rem;
  border:1px solid var(--border-soft); color:var(--text-soft); text-decoration:none;
  transition:all 0.2s;
}
.pagination a:hover { border-color:var(--accent); color:var(--accent); }
.pagination .active { background:var(--accent-dim); border-color:var(--border); color:var(--accent); }

/* ── Modal ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(35,32,28,0.5);
  backdrop-filter:blur(4px); z-index:200;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--r2); padding:32px; max-width:560px; width:90%;
  transform:scale(0.95); transition:transform 0.3s; box-shadow:var(--shadow);
  max-height:90vh; overflow-y:auto;
}
.modal-overlay.open .modal { transform:scale(1); }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.modal-title { font-family:'Fraunces',serif; font-size:1.5rem; }
.modal-close {
  background:var(--surface2); border:none; color:var(--text-muted); font-size:1.1rem; cursor:pointer;
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:background 0.2s, color 0.2s;
}
.modal-close:hover { color:var(--text); background:var(--border-soft); }

/* ── Empty state ── */
.empty-state { text-align:center; padding:60px 20px; }
.empty-state .icon {
  font-size:2.2rem; margin:0 auto 18px; opacity:1;
  width:76px; height:76px; border-radius:50%;
  background:var(--surface2); display:flex; align-items:center; justify-content:center;
}
.empty-state h3 { font-family:'Fraunces',serif; font-size:1.4rem; font-weight:300; margin-bottom:8px; }
.empty-state p { color:var(--text-soft); font-size:0.88rem; margin-bottom:20px; max-width:360px; margin-left:auto; margin-right:auto; }

/* ── Public nav: floating pill, shrinks + gains depth on scroll ── */
.pub-nav-anchor { position:sticky; top:0; z-index:100; padding:16px 20px 0; pointer-events:none; }
.pub-nav-anchor > .pub-nav { pointer-events:all; }
.pub-nav {
  max-width:1160px; margin:0 auto;
  background:rgba(255,255,255,0.75); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:100px;
  padding:12px 24px; display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 8px 30px rgba(35,32,28,0.06);
  transition:box-shadow 0.35s, padding 0.35s, background 0.35s, border-color 0.35s;
}
.pub-nav.scrolled {
  background:rgba(255,255,255,0.92);
  box-shadow:0 14px 40px rgba(35,32,28,0.12);
  border-color:var(--border-soft);
  padding:8px 24px;
}
.pub-nav-logo { font-family:'Fraunces',serif; font-size:1.3rem; color:var(--text); text-decoration:none; display:flex; align-items:center; gap:8px; }
.pub-nav-logo span { color:var(--accent); font-style:italic; }
.pub-nav-links { display:flex; align-items:center; gap:28px; }
.pub-nav-links a:not(.btn) {
  font-size:0.84rem; color:var(--text-soft); text-decoration:none; transition:color 0.2s;
  position:relative; padding-bottom:2px;
}
.pub-nav-links a:not(.btn)::after {
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--accent); transition:width 0.25s ease;
}
.pub-nav-links a:not(.btn):hover { color:var(--accent); }
.pub-nav-links a:not(.btn):hover::after { width:100%; }

/* ── Auth pages: split-screen (photo left, form right) ── */
.auth-split { display:flex; min-height:100vh; }
.auth-visual {
  flex:1.15; position:relative; background-size:cover; background-position:center;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:44px; color:#fff; overflow:hidden;
  animation: heroKenBurns 26s ease-in-out infinite alternate;
}
.auth-visual::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(190deg, rgba(20,17,14,0.25) 0%, rgba(20,17,14,0.35) 45%, rgba(20,17,14,0.82) 100%);
}
.auth-visual-top, .auth-visual-bottom { position:relative; z-index:1; }
.auth-visual-brand { font-family:'Fraunces',serif; font-size:1.3rem; display:flex; align-items:center; gap:10px; }
.auth-visual-brand img { height:30px; width:auto; filter:brightness(0) invert(1); }
.auth-visual-quote { font-family:'Fraunces',serif; font-weight:300; font-size:1.6rem; line-height:1.4; max-width:420px; text-shadow:0 2px 16px rgba(0,0,0,0.3); }
.auth-visual-quote-by { font-size:0.8rem; opacity:0.85; margin-top:14px; letter-spacing:0.04em; }

.auth-form-side {
  flex:1; min-width:0; display:flex; align-items:center; justify-content:center;
  padding:40px; background:var(--bg); position:relative;
}
.auth-card {
  width:100%; max-width:420px; padding:8px;
  animation: heroFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.auth-back-link { position:absolute; top:28px; left:32px; font-size:0.82rem; color:var(--text-muted); }
.auth-back-link:hover { color:var(--accent); }
.auth-logo {
  font-family:'Fraunces',serif; font-size:1.7rem;
  text-align:center; margin-bottom:8px; color:var(--text);
}
.auth-logo span { color:var(--accent); font-style:italic; }
.auth-subtitle { text-align:center; color:var(--text-muted); font-size:0.86rem; margin-bottom:28px; }
.auth-divider { text-align:center; color:var(--text-muted); font-size:0.78rem; margin:16px 0; position:relative; }
.auth-divider::before, .auth-divider::after {
  content:''; position:absolute; top:50%; width:42%; height:1px;
  background:var(--border-soft);
}
.auth-divider::before { left:0; }
.auth-divider::after { right:0; }

@media(max-width:900px){
  .auth-visual { display:none; }
}

/* ── Search bar ── */
.search-bar {
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--r2); padding:20px; margin-bottom:24px;
  display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;
}
.search-bar .form-group { margin:0; flex:1; min-width:140px; }

/* ── Tabs ── */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border-soft); margin-bottom:24px; }
.tab {
  padding:10px 20px; font-size:0.84rem; color:var(--text-muted);
  border-bottom:2px solid transparent; text-decoration:none; transition:all 0.2s;
}
.tab:hover { color:var(--text); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ── Status dots ── */
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; }
.dot-green  { background:var(--green); }
.dot-gold   { background:var(--accent); }
.dot-rose   { background:var(--rose); }
.dot-gray   { background:var(--text-muted); }
.dot-teal   { background:var(--sage); }

/* ── Utilities ── */
.text-gold { color:var(--accent); }
.text-soft { color:var(--text-soft); }
.text-muted{ color:var(--text-muted); }
.text-rose { color:var(--rose); }
.text-green{ color:var(--green); }
.text-teal { color:var(--sage); }
.text-sm   { font-size:0.8rem; }
.text-xs   { font-size:0.7rem; }
.mt-1{margin-top:4px} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px}
.mb-1{margin-bottom:4px} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px}
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between}
.flex-col{flex-direction:column}
.flex-responsive { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@media(max-width:768px){ .flex-responsive { flex-direction: column; align-items: flex-start; gap: 10px; } }
.gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px}
.w-full{width:100%} .hidden{display:none}
.verified-badge { color:var(--sage); font-size:0.85rem; }

/* ── Marketing: Hero ── */
.hero {
  position:relative; padding:170px 32px 150px; text-align:center;
  overflow:hidden;
  isolation:isolate;
  min-height:640px; display:flex; align-items:center; justify-content:center;
}
.hero-bg {
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center;
  animation: heroKenBurns 24s ease-in-out infinite alternate;
}
.hero-bg::after {
  content:''; position:absolute; inset:0;
  /* Light, mostly-transparent tint so the photo itself stays the star; just enough
     to keep white text readable, plus a short fade at the very bottom to blend
     into the page background below. */
  background:
    linear-gradient(180deg, rgba(20,17,14,0.46) 0%, rgba(20,17,14,0.24) 42%, rgba(20,17,14,0.42) 80%, var(--bg) 100%);
}
@keyframes heroKenBurns {
  0%   { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.14) translate(-2%, -2%); }
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 18px; border-radius:100px;
  background:rgba(255,255,255,0.92); border:1px solid rgba(255,255,255,0.4);
  color:var(--accent); font-size:0.75rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase;
  margin-bottom:28px; backdrop-filter:blur(6px); box-shadow:0 4px 20px rgba(0,0,0,0.15);
}
.hero-eyebrow .pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(1.4); } }
.hero-content { max-width:820px; margin:0 auto; position:relative; z-index:1; }
.hero h1 {
  font-family:'Fraunces',serif; font-weight:300; font-size:clamp(2.8rem, 6.2vw, 5.4rem);
  line-height:1.04; letter-spacing:-0.01em; color:#fff; margin-bottom:22px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.hero h1 em {
  font-style:italic;
  background:linear-gradient(120deg, var(--accent2), #ffd3a8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p {
  font-size:1.15rem; color:rgba(255,255,255,0.94); max-width:580px; margin:0 auto 40px; line-height:1.65;
  text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.hero-cta-group { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-cta-group .btn { padding:15px 30px; font-size:0.92rem; }
.hero-cta-group .btn-outline {
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.55); color:#fff;
  backdrop-filter:blur(4px);
}
.hero-cta-group .btn-outline:hover { background:rgba(255,255,255,0.2); border-color:#fff; color:#fff; }

/* Bouncing scroll cue */
.hero-scroll-cue {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:1;
  color:rgba(255,255,255,0.75); font-size:1.4rem; animation:scrollCueBounce 2.2s ease-in-out infinite;
  text-decoration:none;
}
@keyframes scrollCueBounce { 0%,100% { transform:translate(-50%,0); } 50% { transform:translate(-50%,8px); } }

/* Staggered entrance for hero content pieces (no scroll needed, plays on load) */
.hero-eyebrow, .hero h1, .hero p, .hero-cta-group {
  animation: heroFadeUp 0.9s cubic-bezier(0.16,1,0.3,1) both;
}
.hero h1        { animation-delay: 0.08s; }
.hero p          { animation-delay: 0.2s; }
.hero-cta-group  { animation-delay: 0.32s; }
@keyframes heroFadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Scroll-reveal (public marketing pages, driven by js/reveal.js) ──
   Progressive enhancement: .reveal is only hidden once html.js proves JS
   actually ran (see the inline script in head.php). No JS / script blocked /
   still loading => content stays fully visible, never stuck at opacity:0. */
html.js .reveal {
  opacity:0; transform:translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
html.js .reveal.in-view { opacity:1; transform:translateY(0); }
.reveal-d1.in-view { transition-delay:0.08s; }
.reveal-d2.in-view { transition-delay:0.16s; }
.reveal-d3.in-view { transition-delay:0.24s; }
.reveal-d4.in-view { transition-delay:0.32s; }
.reveal-d5.in-view { transition-delay:0.4s; }
.reveal-d6.in-view { transition-delay:0.48s; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-eyebrow, .hero h1, .hero p, .hero-cta-group { animation:none !important; }
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ── Marketing: stat highlight strip — floats up over the hero's bottom edge ── */
.stat-highlight-wrap { position:relative; z-index:3; padding:0 20px; margin-top:-64px; margin-bottom:24px; }
.stat-highlight-strip {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:8px; max-width:1000px; margin:0 auto; padding:36px 24px;
  text-align:center; background:var(--surface); border-radius:var(--r2);
  border:1px solid var(--border-soft); box-shadow:var(--shadow-md);
}
.stat-highlight { padding:0 16px; transition:transform 0.3s; position:relative; }
.stat-highlight:not(:last-child)::after {
  content:''; position:absolute; right:0; top:10%; bottom:10%; width:1px; background:var(--border-soft);
}
.stat-highlight:hover { transform:translateY(-3px); }
.stat-highlight .value {
  font-family:'Fraunces',serif; font-weight:300; font-size:2.6rem; color:var(--accent); line-height:1;
  transition:color 0.3s;
}
.stat-highlight .label {
  margin-top:8px; font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted);
}
@media(max-width:700px){
  .stat-highlight-strip { grid-template-columns:1fr 1fr; }
  .stat-highlight:nth-child(2)::after { display:none; }
}

/* ── Marketing: section shell ── */
.section { padding:80px 32px; position:relative; overflow:hidden; }
.section-header { text-align:center; max-width:640px; margin:0 auto 48px; position:relative; z-index:1; }
.section-header .eyebrow {
  font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; display:block;
}
.section-header h2 { font-family:'Fraunces',serif; font-weight:300; font-size:2.4rem; color:var(--text); margin-bottom:12px; letter-spacing:-0.01em; }
.section-header p { color:var(--text-soft); font-size:0.98rem; line-height:1.6; }
.section-inner { max-width:1160px; margin:0 auto; position:relative; z-index:1; }
.section-alt { background:var(--surface2); }

/* Ambient blurred gradient orbs for depth — decorative, behind content */
.section-blob {
  position:absolute; border-radius:50%; filter:blur(60px); z-index:0; pointer-events:none;
  animation: blobDrift 16s ease-in-out infinite alternate;
}
.section-blob.b1 { width:340px; height:340px; background:radial-gradient(circle, rgba(193,98,47,0.16), transparent 70%); top:-100px; left:-80px; }
.section-blob.b2 { width:420px; height:420px; background:radial-gradient(circle, rgba(91,122,99,0.14), transparent 70%); bottom:-140px; right:-100px; animation-delay:-8s; }
@keyframes blobDrift {
  0%   { transform:translate(0,0) scale(1); }
  100% { transform:translate(30px,-20px) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { .section-blob { animation:none; } }

/* Cursor-spotlight hover glow (driven by --spot-x/--spot-y set in js/reveal.js).
   Uses ::after (not ::before) so it doesn't collide with .stat-card's ::before accent bar. */
.property-card, .feature-item, .stat-card { position:relative; }
.property-card::after, .feature-item::after, .stat-card::after {
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
  opacity:0; transition:opacity 0.4s; pointer-events:none;
  background:radial-gradient(240px circle at var(--spot-x,50%) var(--spot-y,50%), rgba(193,98,47,0.12), transparent 70%);
}
.property-card:hover::after, .feature-item:hover::after, .stat-card:hover::after { opacity:1; }
.property-card > *, .feature-item > *, .stat-card > * { position:relative; z-index:1; }

/* ── Marketing: about image + text ── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:56px; }
.about-grid .about-img-wrap { border-radius:var(--r2); overflow:hidden; box-shadow:var(--shadow); }
.about-grid .about-img-wrap img { width:100%; height:340px; object-fit:cover; display:block; transition:transform 0.6s; }
.about-grid .about-img-wrap:hover img { transform:scale(1.04); }
.about-grid .about-text .eyebrow { font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; display:block; }
.about-grid .about-text h2 { font-family:'Fraunces',serif; font-weight:300; font-size:2rem; color:var(--text); margin-bottom:14px; }
.about-grid .about-text p { color:var(--text-soft); font-size:0.98rem; line-height:1.7; }
@media(max-width:800px){ .about-grid { grid-template-columns:1fr; } .about-grid .about-img-wrap img { height:240px; } }

/* ── Marketing: feature grid ── */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
.feature-item { padding:28px; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r2); transition:transform 0.3s, box-shadow 0.3s, border-color 0.3s; overflow:hidden; }
.feature-item:hover { transform:translateY(-4px); border-color:var(--border); box-shadow:var(--shadow); }
.feature-item .icon {
  font-size:1.4rem; margin-bottom:16px; color:var(--accent);
  width:52px; height:52px; border-radius:14px; background:var(--accent-dim);
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.3s, background 0.3s, color 0.3s;
}
.feature-item:hover .icon { transform:scale(1.08) rotate(-4deg); background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; }
.feature-item h3 { font-family:'Fraunces',serif; font-weight:500; font-size:1.15rem; margin-bottom:8px; color:var(--text); }
.feature-item p { color:var(--text-soft); font-size:0.88rem; line-height:1.6; }

/* ── Site footer ── */
.site-footer { background:var(--ink); color:rgba(255,255,255,0.7); padding:56px 32px 24px; }
.site-footer-top {
  max-width:1160px; margin:0 auto 32px; display:grid;
  grid-template-columns:1.6fr 1fr 1fr; gap:40px;
}
.site-footer-brand-col img { filter:brightness(0) invert(1); opacity:0.95; }
.site-footer-brand-col p { font-size:0.84rem; color:rgba(255,255,255,0.5); line-height:1.6; max-width:320px; }
.site-footer-col h4 { color:#fff; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:500; margin-bottom:16px; }
.site-footer-col { display:flex; flex-direction:column; gap:10px; }
.site-footer-col a { font-size:0.86rem; color:rgba(255,255,255,0.6); display:flex; align-items:center; gap:8px; transition:color 0.2s; }
.site-footer-col a:hover { color:var(--accent2); }
.site-footer-owner-link { color:rgba(255,255,255,0.4) !important; font-size:0.8rem !important; }
.site-footer-owner-link:hover { color:rgba(255,255,255,0.7) !important; }
.site-footer-bottom {
  max-width:1160px; margin:0 auto; padding-top:24px; border-top:1px solid rgba(255,255,255,0.08);
}
.site-footer-bottom p { font-size:0.78rem; color:rgba(255,255,255,0.4); }
@media(max-width:768px){ .site-footer-top { grid-template-columns:1fr; gap:28px; } }

/* ── Responsive ── */
@media(max-width:1024px){
  .sidebar {
    position: fixed; left: -280px; top: 0; bottom: 0;
    z-index: 1000; width: 260px; transition: left 0.3s ease;
    box-shadow: 10px 0 30px rgba(35,32,28,0.25);
  }
  .sidebar.open { left: 0; }
  .sidebar-overlay {
    position: fixed; inset: 0; background: rgba(35,32,28,0.4);
    backdrop-filter: blur(4px); z-index: 999;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
  }
  .sidebar-overlay.open { opacity: 1; pointer-events: all; }
  .layout { display: block; }
}

@media(max-width:768px){
  .topbar { padding: 0 16px; }
  .topbar-title { font-size: 1.1rem; }
  .topbar-actions .btn { display: none; }
  .topbar-actions span { display: none; }

  .page { padding: 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-card { padding: 16px; }
  .stat-card .value { font-size: 1.5rem; }
  .stat-card .icon { font-size: 1.4rem; }

  .card { padding: 16px; }
  .card-header { flex-direction: column; align-items: flex-start; gap: 10px; }

  .form-grid { grid-template-columns: 1fr; }
  .property-grid { grid-template-columns: 1fr; }

  .search-bar { flex-direction: column; align-items: stretch; }
  .search-bar .form-group { width: 100%; }

  .pub-nav { padding: 12px 16px; }
  .pub-nav-links { display: none; }

  .auth-form-side { padding: 24px; }
  .auth-back-link { top: 16px; left: 16px; }

  .hero { padding: 80px 20px 60px; }
  .section { padding: 56px 20px; }
  .site-footer-bottom { text-align: center; }
}

@media(max-width:480px){
  .stats-grid { grid-template-columns: 1fr; }
}

/* ── Mobile Menu Button ── */
.mobile-toggle {
  display: none; width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--border-soft);
  border-radius: 8px; color: var(--text); font-size: 1.2rem; cursor: pointer;
  margin-right: 12px;
}
@media(max-width:1024px){
  .mobile-toggle { display: flex; }
}