/* ---------- Brand & base ---------- */
:root{
  /* Replace these with exact brand colours from your logo */
  --brand-primary: #C6A65B; /* Gold */
  --brand-secondary: #0B2B40; /* Deep navy */
  --brand-accent: #00A859; /* Emerald accent (WhatsApp vibe) */
  --gray-900:#0f1115; --gray-800:#171a20; --gray-700:#222733; --gray-600:#2d3442;
  --gray-500:#465065; --gray-400:#6b7280; --gray-300:#9aa3b2; --gray-200:#d1d5db; --gray-100:#f5f7fa;
  --white:#fff; --black:#000;
  --radius:12px; --radius-sm:8px; --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6; color:#1f2937; background:#fff;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand-secondary); text-decoration:none}
a:hover{opacity:.9}
.container{width:min(1100px, 92%); margin:auto}
.narrow{width:min(860px, 92%); margin:auto}
.center{text-align:center}
.mt{margin-top:1rem}
.hidden{position:absolute !important; left:-9999px !important; opacity:0 !important;}

/* ---------- Header ---------- */
.site-header .topbar{
  background:var(--gray-100); color:#374151; font-size:.9rem;
  border-bottom:1px solid var(--gray-200);
}
.flex{display:flex; gap:1rem}
.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.center{align-items:center}
.topbar .link{margin-left:1rem}
.topbar .reac{font-weight:600; color:#111827}
.topbar .gps{margin-left:1rem; color:#6b7280}
.nav{background:#fff}
.brand img{display:block}
.primary-nav ul{margin:0; padding:0; list-style:none; display:flex; gap:1rem; align-items:center}
.primary-nav a{padding:.75rem 1rem; border-radius:var(--radius-sm)}
.primary-nav .btn.small{padding:.6rem .9rem}
.menu-toggle{display:none; font-size:1.5rem; background:none; border:0}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(120deg, rgba(198,166,91,.2), rgba(11,43,64,.08)); padding:4rem 0}
.hero .lead{font-size:1.2rem; color:#374151}
.actions{display:flex; gap:1rem; margin-top:1rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; background:var(--brand-secondary); color:#fff; padding:.9rem 1.2rem;
  border-radius:var(--radius); font-weight:600; box-shadow:var(--shadow); border:1px solid var(--brand-secondary);
}
.btn:hover{transform:translateY(-1px)}
.btn.outline{background:transparent; color:var(--brand-secondary); border:1.5px solid var(--brand-secondary)}
.btn.ghost{background:transparent; color:#111827; border:1px dashed var(--gray-300)}
.btn.small{padding:.5rem .8rem; font-size:.9rem}

/* ---------- Sections ---------- */
.section{padding:3rem 0}
.section.alt{background:var(--gray-100)}
.section-title{margin-top:0; font-size:2rem; color:#0b1220}

/* ---------- Grid & Cards ---------- */
.grid{display:grid; gap:1.2rem}
.grid.two{grid-template-columns:repeat(2, 1fr)}
.grid.three{grid-template-columns:repeat(3, 1fr)}
.grid.four{grid-template-columns:repeat(4, 1fr)}
.card{
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius); padding:1.3rem; box-shadow:var(--shadow);
}
.card-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1rem}
.card .price{font-weight:700; font-size:1.1rem; color:#0b1220}
.card .meta{font-size:.95rem; color:#6b7280}
.link{color:var(--brand-secondary); font-weight:600}

/* ---------- Forms ---------- */
.form label{display:block; font-weight:600; margin-bottom:.5rem}
.form input, .form select, .form textarea{
  width:100%; padding:.8rem 1rem; border:1px solid var(--gray-300); border-radius:var(--radius-sm);
  font:inherit; background:#fff;
}
.form button{margin-top:.6rem}
.search-form .grid{align-items:end}
.search-actions{margin-top:1rem; display:flex; gap:.8rem}

/* ---------- Map, Modal ---------- */
.map{height:360px; border-radius:var(--radius); border:1px solid var(--gray-200);}
.sticky-columns{grid-template-columns: 1.2fr .8fr}
.modal{position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; padding:1rem}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:#fff; border-radius:var(--radius); width:min(900px, 94%); max-height:90vh; overflow:auto; padding:1rem}
.modal-close{position:sticky; top:0; right:0; margin-left:auto; display:block; background:transparent; border:0; font-size:2rem}

/* ---------- Tables ---------- */
.table{width:100%; border-collapse:collapse; margin:1rem 0; font-size:.98rem}
.table th, .table td{padding:.7rem; border-bottom:1px solid var(--gray-200); text-align:left}
.table thead th{border-bottom:2px solid var(--gray-300)}

/* ---------- Lists ---------- */
ul.tick{list-style:none; padding:0}
ul.tick li{padding-left:1.5rem; position:relative; margin:.4rem 0}
ul.tick li::before{content:"✓"; position:absolute; left:0; color:var(--brand-accent);}

/* ---------- Footer ---------- */
.site-footer{background:#0B2B40; color:#e5e7eb; margin-top:2rem}
.site-footer a{color:#fff}
.site-footer h4{margin-top:0; color:#fff}
.site-footer .footer-base{border-top:1px solid rgba(255,255,255,.15); padding:.8rem 0; font-size:.95rem}

/* ---------- Utilities ---------- */
.muted{color:#6b7280}
.cta-panel{display:flex; justify-content:space-between; align-items:center; gap:1rem; background:var(--gray-100); border:1px solid var(--gray-200); padding:1rem; border-radius:var(--radius)}
.floating-whatsapp{
  position:fixed; right:20px; bottom:20px; background:#25D366; color:#fff; padding:.9rem 1rem; border-radius:999px; font-weight:700; box-shadow:var(--shadow);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr 1fr}
  .grid.four{grid-template-columns:1fr 1fr}
  .sticky-columns{grid-template-columns:1fr}
  .primary-nav{display:none}
  .menu-toggle{display:block}
}
@media (max-width: 560px){
  .grid.three{grid-template-columns:1fr}
  .grid.four{grid-template-columns:1fr}
}