/* ===================== VARIABLES ===================== */
:root{
  --bg:#0f1512;           /* near-black with green undertone */
  --surface:#111a16;      /* dark surface */
  --card:#121e19;
  --muted:#9fb7ab;
  --text:#e6f0eb;
  --accent:#1fd08a;
  --accent-2:#9cf1cb;
  --border:#1c3028;
  --white:#fff;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg) 0%, #09120f 100%);
  line-height:1.5;
}

img{max-width:100%;display:block;border-radius:12px}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5rem}
h1,h2{font-family:'Playfair Display', serif}
h1.display{font-size:clamp(2.4rem, 5vw, 4.25rem); font-weight:700; letter-spacing:-.02em;}
h2{font-size:clamp(1.6rem, 3vw, 2.4rem)}
h3{font-size:1.25rem}
p{margin:.75rem 0}
.lead{font-size:1.125rem; color:var(--muted)}
.muted{color:var(--muted)}

.container{width:min(1120px, 92vw); margin-inline:auto}
.section-head{margin:3.5rem 0 1.25rem}
.section-head.center{text-align:center}
.section-head.light{color:var(--white)}

/* ===================== NAV ===================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,16,14,.55); backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-bar{display:flex;align-items:center;justify-content:space-between; padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--text);text-decoration:none;font-weight:700}
.brand-mark{width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--shadow)}
.brand-text{letter-spacing:.02em}
.primary-nav{display:flex;gap:1.25rem; align-items:center}
.primary-nav a{color:var(--text); text-decoration:none; opacity:.9}
.primary-nav a:hover{opacity:1}
.nav-toggle{display:none; background:none; border:0; padding:.25rem; cursor:pointer}
.nav-toggle .bar{display:block;width:22px;height:2px;background:var(--text); margin:.25rem 0; border-radius:2px}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-block; text-decoration:none; border:1px solid transparent;
  padding:.85rem 1.15rem; border-radius:12px; font-weight:600;
  transition: transform .2s ease, background .2s ease, border .2s ease, color .2s ease;
  cursor:pointer;
}
.btn.small{padding:.55rem .85rem; font-size:.95rem}
.btn-primary{background:var(--accent); color:#05281b}
.btn-primary:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn-ghost{border-color:var(--border); color:var(--text); background:transparent}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn-ghost-light{border-color:rgba(255,255,255,.5); color:#fff; background:transparent}
.btn-ghost-light:hover{border-color:#fff;}

/* ===================== HERO ===================== */
.hero{position:relative; isolation:isolate}
.hero img{width:100%;height:min(70vh,700px);object-fit:cover;filter:brightness(.6)}
.hero-content{position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:1rem}
.cta-row{display:flex;gap:.75rem; justify-content:center; flex-wrap:wrap}

/* ===================== WHY ===================== */
.feature-icons{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.5rem 0 0; list-style:none; padding:0}
.feature-icons li{background:var(--card); border:1px solid var(--border); padding:1.25rem; border-radius:16px; box-shadow:var(--shadow)}
.icon-leaf,.icon-legacy,.icon-landmark{width:40px;height:40px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-2)); margin-bottom:.5rem}

/* ===================== AMENITIES STRIP ===================== */
.strip{padding:2rem 0 3rem}
.amenity-grid{display:grid; grid-template-columns: repeat(6, 1fr); gap:1rem}
.am-card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1rem; text-align:center}
.am-card h4{margin-top:.75rem}

/* ===================== LIFESTYLE ===================== */
.lifestyle{padding:2rem 0 1rem}
.lifestyle-grid{display:grid; grid-template-columns: repeat(4,1fr); gap:1rem}
.lifestyle article{background:var(--card); border:1px solid var(--border); padding:1rem; border-radius:16px}

/* ===================== EQUESTRIAN ===================== */
.equestrian{position:relative; padding:3rem 0 2rem}
.eq-bg{position:absolute; inset:0; background:url('assets/equestrian-bg.jpg') center/cover no-repeat; opacity:.15; filter:grayscale(100%);}
.eq-content{display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center}
.eq-text p{color:var(--muted)}

/* ===================== INVESTMENT ===================== */
.investment{padding:2rem 0}
.inv-wrap{display:grid; grid-template-columns: 1.35fr .65fr; gap:1.25rem}
.inv-card{background:var(--card); border:1px solid var(--border); padding:1.25rem; border-radius:16px}
.tick-list{padding-left:1rem}
.tick-list li{margin:.35rem 0}
.pillars{margin-top:1.5rem; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1rem}

/* ===================== FORM / REQUEST ===================== */
.request{padding:2.5rem 0}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow)}
.form{padding:1.25rem}
.form-grid{display:grid; grid-template-columns: repeat(2,1fr); gap:1rem}
.field{display:flex; flex-direction:column; gap:.35rem}
.field input,.field select,.field textarea{
  background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:.85rem;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:1px solid var(--accent)}
.span-2{grid-column: span 2}
.nda-check{display:flex; align-items:center; gap:.5rem; margin:1rem 0 .5rem; color:var(--muted)}
.hidden{display:none}

/* ===================== CONTACT ===================== */
.contact{padding:2rem 0 3rem}
.contact-grid{display:grid; grid-template-columns: .75fr 1.25fr; gap:1rem}
.contact-card{padding:1.25rem}
.contact-list{list-style:none; padding:0; margin:0; display:grid; gap:.35rem}
.map-placeholder{height:280px; display:grid; place-content:center; color:#000; background:#e3ece7; border-radius:12px}

/* ===================== FOOTER ===================== */
.site-footer{border-top:1px solid var(--border); padding:1.25rem 0; background:#0c120f}
.footer-grid{display:grid; grid-template-columns: 1fr auto; align-items:center}
.brand-sm{display:flex; align-items:center; gap:.5rem}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px){
  .amenity-grid{grid-template-columns: repeat(3,1fr)}
  .lifestyle-grid{grid-template-columns: repeat(2,1fr)}
  .inv-wrap{grid-template-columns: 1fr}
  .eq-content{grid-template-columns: 1fr}
  .contact-grid{grid-template-columns: 1fr}
}
@media (max-width: 760px){
  .feature-icons{grid-template-columns:1fr}
  .primary-nav{position:absolute; inset:60px 0 auto 0; background:#0b120f; border-bottom:1px solid var(--border); display:none; flex-direction:column; padding:1rem}
  .primary-nav a{padding:.65rem 1rem}
  .nav-toggle{display:block}
}