/* =========================================================
   Monte Developments — v2
   Real brand tokens (pulled from montedevelopments.com computed
   styles): green / gold / cream, Refina + Avenir Next LT Pro.
   Structure and layout are a full rebuild, not a copy of the
   live site.
   ========================================================= */

@font-face {
  font-family: 'Refina';
  src: url('https://fonts.cdnfonts.com/s/115524/Refina.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next LT Pro';
  src: url('https://fonts.cdnfonts.com/s/13217/AvenirNextLTPro-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next LT Pro Cn';
  src: url('https://fonts.cdnfonts.com/s/13217/AvenirNextLTPro-Cn.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --green: #416d50;
  --green-dark: #263f2d;
  --green-tint: #6f9a7f;
  --gold: #b08c44;
  --gold-light: #d9c48b;
  --cream: #efe6ba;
  --paper: #FBF9F4;
  --ink: #1c231d;
  --gray: #66665e;
  --gray-light: #98968a;
  --white: #ffffff;
  --line: #ddd6bf;

  --font-display: 'Refina', 'Times New Roman', serif;
  --font-body: 'Avenir Next LT Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Avenir Next LT Pro Cn', -apple-system, monospace;

  --radius: 4px;
  --radius-lg: 10px;
  --container: 1320px;
  --shadow: 0 16px 40px rgba(28,35,29,.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 17px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.6; font-size:1.05rem; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { margin:0; padding:0; list-style:none; }
button { font-family:inherit; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:400; margin:0 0 .4em; color:var(--green-dark); line-height:1.1; }
h1 { font-size:66px; }
h2 { font-size:44px; }
h3 { font-size:26px; }
p { margin:0 0 1em; color:var(--gray); font-size:1.05rem; }
.wrap { max-width:var(--container); margin:0 auto; padding:0 40px; }
.eyebrow { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em; font-size:13px; color:var(--gold); font-weight:600; margin-bottom:16px; display:inline-block; }

/* ---------- Icons (inline SVG, no emoji anywhere on this site) ---------- */
.icon { width:1.15em; height:1.15em; display:inline-block; vertical-align:-0.2em; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-right:.4em; }
.icon-lg { width:26px; height:26px; stroke-width:1.6; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 30px; border-radius:var(--radius); font-size:15px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:all .15s ease; white-space:nowrap; }
.btn-primary { background:var(--green); color:var(--white); }
.btn-primary:hover { background:var(--green-dark); }
.btn-gold { background:var(--gold); color:var(--white); }
.btn-gold:hover { background:#8f6f34; }
.btn-outline { border:1px solid var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover { background:var(--ink); color:var(--paper); }
.btn-outline-light { border:1px solid rgba(255,255,255,.55); color:var(--white); background:transparent; }
.btn-outline-light:hover { background:rgba(255,255,255,.14); }
.btn-sm { padding:11px 20px; font-size:13.5px; }
.btn-block { width:100%; }
.btn-wa { background:#2e7d5b; color:#fff; }
.btn-wa:hover { background:#256349; }

/* ---------- Header ---------- */
.site-header { position:sticky; top:0; z-index:100; background:rgba(251,249,244,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
.logo { font-family:var(--font-display); font-size:40px; color:var(--gold); line-height:.9; letter-spacing:.01em; }
.logo small { display:block; font-family:var(--font-body); font-size:10.5px; letter-spacing:.32em; color:var(--gold); font-weight:600; margin-top:5px; opacity:.85; }
.nav-links { display:flex; align-items:center; gap:38px; }
.nav-links a { font-size:15.5px; font-weight:500; padding-bottom:4px; border-bottom:2px solid transparent; }
.nav-links a:hover, .nav-links a.active { color:var(--green); border-color:var(--gold); }
.nav-actions { display:flex; align-items:center; gap:14px; }
.nav-burger { display:none; }
@media (max-width:940px){
  .nav-links{ display:none; }
  .nav-burger{ display:inline-flex; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); align-items:center; justify-content:center; cursor:pointer; background:var(--white); }
}

/* ---------- Hero ---------- */
.hero { padding:72px 0 0; }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:center; }
.hero h1 { font-size:64px; }
.hero h1 em { font-style:italic; color:var(--green); }
.hero p.lead { font-size:20px; max-width:520px; }
.hero-actions { display:flex; gap:16px; margin:32px 0 0; flex-wrap:wrap; }
.hero-art { position:relative; }
.hero-stats { display:flex; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:60px; }
.hero-stat { flex:1; padding:28px 30px; border-right:1px solid var(--line); }
.hero-stat:last-child { border-right:none; }
.hero-stat .num { font-family:var(--font-display); font-size:38px; color:var(--green-dark); }
.hero-stat .lbl { font-size:13px; color:var(--gray); margin-top:4px; }

/* ---------- Unit finder ---------- */
.finder { background:var(--green-dark); border-radius:var(--radius-lg); padding:26px 28px; box-shadow:var(--shadow); }
.finder-title { color:var(--white); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; font-family:var(--font-body); }
.finder-row { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:12px; }
.finder select {
  width:100%; padding:13px 14px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08); color:var(--white); font-family:var(--font-body); font-size:14px; appearance:none;
}
.finder select option { color:var(--ink); }
.finder .btn { white-space:nowrap; }
@media (max-width:700px){ .finder-row{ grid-template-columns:1fr; } }

/* ---------- Sections ---------- */
section { padding:110px 0; }
.section-cream { background:var(--cream); }
.section-green { background:var(--green-dark); color:var(--white); }
.section-green h2, .section-green h3 { color:var(--white); }
.section-green p { color:rgba(255,255,255,.78); }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:46px; }
.section-head p { max-width:340px; margin:0; }
.section-head.center { text-align:center; display:block; }
.section-head.center p { max-width:600px; margin:0 auto; }

/* ---------- Floor plan gallery (real images, shown large — not tiny thumbnails) ---------- */
.plan-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.plan-card { background:var(--white); cursor:pointer; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm,0 4px 14px rgba(28,35,29,.06)); }
.plan-card .thumb-wrap { aspect-ratio:1/1; overflow:hidden; background:var(--cream); }
.plan-card img { width:100%; height:100%; object-fit:contain; background:var(--white); transition:transform .3s ease; }
.plan-card:hover img { transform:scale(1.04); }
.plan-card .meta { padding:18px 20px 20px; border-top:1px solid var(--line); }
.plan-card .meta .p-code { font-family:var(--font-mono); font-size:12px; color:var(--gold); text-transform:uppercase; letter-spacing:.05em; }
.plan-card .meta .p-spec { font-size:16px; color:var(--ink); margin-top:4px; font-weight:600; }
.plan-card .zoom-hint { position:absolute; top:14px; right:14px; background:rgba(28,35,29,.75); color:#fff; font-size:12px; padding:6px 14px; border-radius:999px; display:flex; align-items:center; }
.plan-card .zoom-hint .icon { margin-right:5px; width:1em; height:1em; }
@media (max-width:980px){ .plan-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .plan-grid{ grid-template-columns:1fr; } }

/* ---------- Project cards ---------- */
.project-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.project-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.project-card { background:var(--white); display:flex; flex-direction:column; }
.project-media { position:relative; aspect-ratio:4/3; background:var(--green-tint); overflow:hidden; }
.project-media img { width:100%; height:100%; object-fit:cover; }
.project-media svg { width:100%; height:100%; }
.badge { position:absolute; top:14px; left:14px; padding:6px 14px; border-radius:2px; font-size:11px; font-weight:700; color:var(--white); text-transform:uppercase; letter-spacing:.04em; }
.badge-gold { background:var(--gold); }
.badge-green { background:var(--green); }
.badge-gray { background:var(--gray-light); }
.project-body { padding:30px 30px 32px; display:flex; flex-direction:column; gap:16px; flex:1; }
.project-title { font-family:var(--font-display); font-size:28px; color:var(--green-dark); }
.project-loc { font-size:14px; color:var(--gray); margin-top:-12px; }
.spec-strip { display:flex; justify-content:space-between; padding:16px 0; border-top:1px solid var(--line); font-size:13px; }
.spec-strip .spec-lbl { display:block; color:var(--gray-light); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.spec-strip .spec-val { font-family:var(--font-mono); font-size:17px; color:var(--ink); font-weight:600; }
.spec-strip .spec-val.accent { color:var(--gold); }

/* ---------- Trust / stats strip ---------- */
.trust { background:var(--ink); color:var(--paper); padding:90px 0; }
.trust-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:center; }
.trust h2 { color:var(--paper); font-size:40px; }
.trust p { color:#b9b6a9; font-size:17px; max-width:480px; }
.stat-row { display:flex; gap:50px; margin-top:34px; flex-wrap:wrap; }
.stat .num { font-family:var(--font-display); font-size:46px; color:var(--paper); }
.stat .lbl { font-size:13px; color:#9c9a8f; margin-top:4px; }
.quote-block { border-left:2px solid var(--gold); padding-left:26px; }
.quote-block p { font-family:var(--font-display); font-style:italic; font-size:24px; color:var(--paper); line-height:1.5; }
.quote-block .attrib { font-size:14px; color:#9c9a8f; font-family:var(--font-body); }

/* ---------- Process ---------- */
.process { display:grid; grid-template-columns:repeat(4,1fr); gap:36px; }
.step { border-top:1px solid var(--ink); padding-top:18px; }
.step .step-num { font-family:var(--font-mono); font-size:14px; color:var(--gold); margin-bottom:12px; display:block; }
.step h3 { font-size:21px; margin-bottom:10px; }
.step p { font-size:15px; margin:0; }
.step .icon-lg { color:var(--gold); }

/* ---------- Unit table / cards (project detail) ---------- */
.stat-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin-top:-80px; position:relative; z-index:5; box-shadow:var(--shadow); }
.stat-bar > div { background:var(--white); padding:32px 24px; text-align:center; }
.stat-bar .stat-big { font-size:30px; font-weight:600; color:var(--green-dark); font-family:var(--font-display); }
.stat-bar .stat-cap { font-size:12.5px; color:var(--gray-light); text-transform:uppercase; letter-spacing:.06em; margin-top:6px; }

.unit-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.unit-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 4px 14px rgba(28,35,29,.06); }
.unit-thumb { aspect-ratio:4/3; background:var(--cream); position:relative; cursor:pointer; overflow:hidden; }
.unit-thumb img { width:100%; height:100%; object-fit:contain; background:var(--white); transition:transform .3s ease; }
.unit-thumb:hover img { transform:scale(1.03); }
.unit-thumb .no-plan { display:flex; align-items:center; justify-content:center; height:100%; color:var(--gray-light); font-size:14px; font-family:var(--font-mono); text-align:center; padding:20px; }
.unit-thumb .zoom-hint { position:absolute; top:14px; right:14px; background:rgba(28,35,29,.75); color:#fff; font-size:12px; padding:6px 14px; border-radius:999px; display:flex; align-items:center; }
.unit-thumb .zoom-hint .icon { margin-right:5px; width:1em; height:1em; }
.unit-status { position:absolute; top:14px; left:14px; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.status-Available { background:#e5f0e8; color:var(--green); }
.status-Sold { background:#f1e3e3; color:#a14b4b; }
.status-Reserved { background:#f7ecd6; color:var(--gold); }
.status-Resale { background:#e6e9f5; color:#4b5ca1; }
.unit-body { padding:24px 26px 28px; display:flex; flex-direction:column; gap:14px; flex:1; }
.unit-head { display:flex; justify-content:space-between; align-items:baseline; }
.unit-head h4 { font-family:var(--font-display); font-size:24px; color:var(--green-dark); margin:0; }
.unit-head .floor { font-size:13px; color:var(--gray); }
.unit-specs { display:flex; gap:18px; font-size:14.5px; color:var(--gray); border-top:1px solid var(--line); padding-top:14px; }
.unit-specs .icon { color:var(--gold); }
.unit-price { display:flex; justify-content:space-between; align-items:flex-end; margin-top:auto; }
.unit-price .amt { font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--gold); }
.unit-price .per { font-size:12px; color:var(--gray-light); }
.unit-pay { font-size:13px; color:var(--gray); background:var(--cream); border-radius:var(--radius); padding:10px 12px; }
@media (max-width:900px){ .unit-cards{ grid-template-columns:1fr; } }

/* ---------- Lightbox ---------- */
.lightbox { position:fixed; inset:0; background:rgba(20,25,20,.92); display:none; align-items:center; justify-content:center; z-index:1000; padding:40px; }
.lightbox.open { display:flex; }
.lightbox-inner { max-width:900px; max-height:90vh; width:100%; background:var(--white); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; }
.lightbox-inner img { width:100%; max-height:70vh; object-fit:contain; background:#fff; }
.lightbox-info { padding:20px 26px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); }
.lightbox-close { position:absolute; top:24px; right:32px; color:#fff; font-size:28px; cursor:pointer; background:none; border:none; line-height:1; }

/* ---------- Payment plan ---------- */
.pay-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.pay-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; }
.pay-card .pct { font-family:var(--font-display); font-size:42px; color:var(--gold); }
.pay-card h4 { font-size:18px; margin:12px 0 8px; }

/* ---------- Filter bar ---------- */
.filter-bar { display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:40px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.filter-group { display:flex; gap:10px; flex-wrap:wrap; }
.filter-bar select { padding:12px 16px; border-radius:var(--radius); border:1px solid var(--line); background:var(--white); font-size:14px; font-family:var(--font-body); }
.chip { padding:10px 20px; border-radius:999px; border:1px solid var(--line); font-size:14px; font-weight:600; color:var(--gray); cursor:pointer; background:var(--white); }
.chip.active, .chip:hover { border-color:var(--green); color:var(--green); background:#eef4f0; }
.result-count { font-size:14px; color:var(--gray); }

/* ---------- Elevation / architectural SVG placeholder ---------- */
.elevation-wrap { background:var(--cream); display:flex; align-items:center; justify-content:center; }
.elevation-wrap svg { width:70%; height:auto; }
.elevation-caption { font-family:var(--font-mono); font-size:10px; color:var(--gray); text-align:center; padding:10px 0 0; letter-spacing:.04em; }

/* ---------- CTA banner ---------- */
.cta-banner { background:var(--green); color:var(--white); border-radius:var(--radius-lg); padding:60px 66px; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; }
.cta-banner h2 { color:var(--white); font-size:36px; max-width:460px; margin:0; }
.cta-banner .sub { color:rgba(255,255,255,.82); margin-top:10px; font-size:16px; }
.cta-banner .actions { display:flex; gap:14px; flex-wrap:wrap; }
.cta-banner .btn-outline-light:hover { background:rgba(255,255,255,.16); }

/* ---------- Sticky bottom CTA (mobile-first, visible always) ---------- */
.sticky-cta { position:fixed; bottom:0; left:0; right:0; z-index:90; background:var(--white); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(0,0,0,.06); }
.sticky-cta-inner { max-width:var(--container); margin:0 auto; padding:14px 40px; display:flex; gap:12px; justify-content:flex-end; align-items:center; }
.sticky-cta .lead { font-size:14px; color:var(--gray); margin-right:auto; }
@media (max-width:700px){ .sticky-cta-inner{ padding:10px 16px; } .sticky-cta .lead{ display:none; } .sticky-cta .btn{ flex:1; } }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size:14px; color:rgba(255,255,255,.75); margin-bottom:20px; }
.breadcrumb a { color:rgba(255,255,255,.92); font-weight:600; }
.breadcrumb a:hover { text-decoration:underline; }

/* ---------- Footer ---------- */
.site-footer { background:var(--green-dark); color:rgba(255,255,255,.85); padding:80px 0 0; margin-top:0; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1.2fr 1fr; gap:44px; padding-bottom:56px; }
.footer-grid h4 { color:var(--white); font-size:15px; margin-bottom:20px; font-family:var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.footer-grid .logo { color:var(--gold-light); font-size:34px; }
.footer-grid .logo small { color:var(--gold-light); opacity:.85; }
.footer-links li { margin-bottom:12px; font-size:15px; }
.footer-links a:hover { color:var(--gold-light); }
.footer-contact li { display:flex; gap:12px; margin-bottom:16px; font-size:15px; align-items:flex-start; }
.footer-contact .icon { flex-shrink:0; margin-top:3px; }
.social-row { display:flex; gap:12px; }
.social-row a { width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.14); padding:22px 0 110px; text-align:center; font-size:13.5px; color:rgba(255,255,255,.6); }

/* ---------- Utilities ---------- */
.mt-0{ margin-top:0; } .text-center{ text-align:center; }
.mono-note{ font-size:13px; color:var(--gray-light); font-family:var(--font-mono); }
.page-hero { padding:140px 0 68px; }
.page-hero h1 { font-size:52px; }

@media (max-width:980px){
  h1{ font-size:46px; } .hero h1{ font-size:44px; }
  .hero-grid, .trust-grid { grid-template-columns:1fr; gap:36px; }
  .project-grid, .process, .pay-grid { grid-template-columns:repeat(2,1fr); }
  .stat-bar{ grid-template-columns:repeat(2,1fr); margin-top:24px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .wrap{ padding:0 20px; }
  .project-grid, .process, .pay-grid, .form-grid{ grid-template-columns:1fr; }
  h1{ font-size:36px; } section{ padding:70px 0; }
  .cta-banner{ flex-direction:column; text-align:center; padding:36px 26px; }
}