/* =============================================================================
   Hiranandani Maitri Park — Landing Page
   Plain static stylesheet. No frameworks. Edit freely.
   Brand fonts (Zona Pro) live in ../fonts/ ; images in ../images/
   ============================================================================= */

/* ---------- Brand webfonts (only the weights this page uses) ---------- */
@font-face { font-family:'Zona Pro'; src:url('../fonts/zonapro-thin.ttf')     format('truetype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Zona Pro'; src:url('../fonts/zonapro-light.ttf')    format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Zona Pro'; src:url('../fonts/zonapro-regular.ttf')  format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Zona Pro'; src:url('../fonts/zonapro-semibold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Zona Pro'; src:url('../fonts/zonapro-bold.ttf')     format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Design tokens ---------- */
:root {
  /* Surfaces */
  --bg-ivory:#F6F1E7; --bg-bone:#ECE5D5; --bg-paper:#FBF8F1;
  --bg-forest:#1F3D2F; --bg-forest-deep:#16291F;
  --bg-sand:#F5E4CF;                 /* highlights + footer band */
  /* Ink */
  --fg1:#1C1A16; --fg2:#4A4439; --fg3:#7A7363; --fg-muted:#A89E89;
  --fg-on-dark:#F6F1E7; --fg-on-dark-2:#C6BEA9;
  --burgundy:#6E1F2E;
  /* Accent */
  --brass:#A8884B; --brass-hover:#8E7036; --brass-soft:#D8C58F;
  /* Lines */
  --line-soft:#DCD3BD;
  --status-error:#8B3A2F;
  /* Type */
  --ff:'Zona Pro','Helvetica Neue',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Layout */
  --container-max:1320px;
  --container-pad:clamp(20px,4vw,64px);
  --section-pad-y:clamp(80px,10vw,160px);
  /* Shadows */
  --shadow-paper:0 1px 2px rgba(28,26,22,.04),0 4px 16px rgba(28,26,22,.06);
  --shadow-rise:0 12px 40px rgba(28,26,22,.10);
  --shadow-deep:0 24px 64px rgba(28,26,22,.16);
  --ease:cubic-bezier(0.16,1,0.3,1);
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body {
  margin:0; font-family:var(--ff); font-size:16px; line-height:1.6;
  color:var(--fg1); background:var(--bg-ivory); overflow-x:hidden;
}
img { max-width:100%; display:block; }
h1,h2,h3 { margin:0; text-wrap:balance; }
p { margin:0; text-wrap:pretty; }
a { color:inherit; text-decoration:none; }

.container { max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad); }
.eyebrow {
  font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--brass); display:inline-block;
}
.rule { border:0; border-top:1px solid var(--brass); width:56px; margin:22px 0 30px; }
.rule--center { margin-left:auto; margin-right:auto; }

/* Screen-reader-only (keeps the page's H1 without printing text on the banner) */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- Reveal on scroll (progressive enhancement; visible without JS) ---------- */
.js .reveal { opacity:0; transform:translateY(22px); transition:opacity 900ms var(--ease),transform 900ms var(--ease); }
.js .reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal { opacity:1; transform:none; transition:none; } }

/* =============================================================================
   HEADER / NAV
   ============================================================================= */
.nav {
  position:sticky; top:0; left:0; right:0; z-index:100;
  background:rgba(246,241,231,0.97); border-bottom:1px solid var(--line-soft);
  transition:background 600ms var(--ease),border-color 600ms var(--ease);
}
.nav__inner {
  max-width:var(--container-max); margin:0 auto;
  padding:26px var(--container-pad);
  display:flex; align-items:center; justify-content:space-between;
  transition:padding 600ms var(--ease);
}
.nav.scrolled .nav__inner { padding:16px var(--container-pad); }
.wordmark { display:flex; flex-direction:column; align-items:flex-start; line-height:1; user-select:none; }
.wordmark__name {
  font-weight:300; font-size:23px; letter-spacing:0.22em; text-transform:uppercase;
  padding-left:0.22em; color:var(--fg1);
}
.wordmark__sub {
  margin-top:6px; font-weight:600; font-size:8.5px; letter-spacing:0.40em;
  text-transform:uppercase; padding-left:0.40em; color:var(--fg3);
}
.nav.scrolled .wordmark__name { font-size:20px; }
.nav__menu { display:flex; align-items:center; gap:36px; }
.nav__link {
  font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--fg1); position:relative; padding-bottom:2px;
  background-image:linear-gradient(var(--brass),var(--brass));
  background-size:0 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size 320ms ease,color 600ms var(--ease);
}
.nav__link:hover { background-size:100% 1px; }
.btn-enquire {
  font-family:var(--ff); font-size:11.5px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; padding:11px 22px; border:1px solid var(--brass);
  background:transparent; color:var(--fg1); cursor:pointer; border-radius:2px;
  transition:all 320ms; white-space:nowrap;
}
.btn-enquire:hover { background:var(--brass); color:var(--bg-paper); }

/* =============================================================================
   HERO BANNER (image shown in full, directly below the header)
   Desktop art is 2000x900, mobile art is 500x800 — the section takes its
   height from the image so neither crop is ever cut off.
   ============================================================================= */
.hero-banner {
  position:relative; width:100%; aspect-ratio:2000/900;
  background:linear-gradient(160deg,#213e30 0%,#16291f 55%,#1c1a16 100%);
}
.hero-banner picture { display:block; }
.hero-banner__img { display:block; width:100%; height:auto; }
@media (max-width:767px){
  .hero-banner { aspect-ratio:500/800; }
}

/* =============================================================================
   OVERVIEW
   ============================================================================= */
.overview { background:#fff; }
.overview__grid {
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(36px,5vw,80px); align-items:center;
  padding:clamp(76px,8vh,100px) 0 clamp(56px,8vh,88px);
}
.overview__title {
  font-weight:400; font-size:clamp(38px,4.8vw,74px); line-height:1.04; letter-spacing:-0.02em;
  margin:0 0 26px; color:var(--burgundy); max-width:14ch;
}
.overview__sub { font-weight:300; font-size:clamp(15px,1.7vw,18px); line-height:1.5; color:#141414; max-width:48ch; }
.overview__img { width:100%; aspect-ratio:1110/598; object-fit:cover; box-shadow:var(--shadow-paper); }

/* =============================================================================
   HIGHLIGHTS
   ============================================================================= */
.highlights { background:var(--bg-sand); border-top:1px solid rgba(110,31,46,0.12); border-bottom:1px solid rgba(110,31,46,0.12); }
.highlights__grid { display:grid; grid-template-columns:repeat(4,1fr); }
.stat { padding:clamp(30px,3.6vw,46px) clamp(16px,3vw,40px); text-align:center; border-left:1px solid rgba(110,31,46,0.16); }
.stat:first-child { border-left:0; }
.stat__num { font-weight:700; font-size:clamp(28px,3.2vw,44px); line-height:1.05; letter-spacing:-0.01em; color:var(--burgundy); }
.stat__label { margin-top:12px; font-size:12px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--fg2); white-space:nowrap; }

/* =============================================================================
   RESIDENCES
   ============================================================================= */
.residences { background:var(--bg-bone); padding:var(--section-pad-y) 0; border-top:1px solid var(--line-soft); }
.section-title { font-weight:300; font-size:clamp(32px,4vw,52px); line-height:1.1; margin:0 0 16px; }
.section-intro { max-width:56ch; color:var(--fg2); margin-bottom:clamp(40px,5vw,64px); }
.res-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px); }
.res-card { background:var(--bg-paper); border:1px solid var(--line-soft); transition:box-shadow 320ms,border-color 320ms; }
.res-card:hover { box-shadow:var(--shadow-paper); border-color:var(--brass); }
.res-card__inner { padding:clamp(24px,2.5vw,36px); }
.res-card__name { font-weight:300; font-size:clamp(30px,3vw,40px); line-height:1; margin:0 0 18px; }
.res-row { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-top:1px solid var(--line-soft); }
.res-row--last { border-bottom:1px solid var(--line-soft); }
.res-row__key { font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg3); }
.res-row__val { font-size:14px; font-weight:500; color:var(--fg1); }
.res-price { background:transparent; border:0; padding:0; cursor:pointer; font-family:var(--ff);
  font-size:17px; font-weight:300; color:var(--brass); text-decoration:underline; text-underline-offset:3px; }

/* =============================================================================
   AMENITIES
   ============================================================================= */
.amenities { background:var(--bg-ivory); padding:var(--section-pad-y) 0; }
.amen-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.5vw,18px); }
.amen-card {
  background:var(--bg-paper); border:1px solid var(--line-soft); min-height:150px;
  padding:clamp(22px,2vw,30px) clamp(18px,1.8vw,24px);
  display:flex; flex-direction:column; justify-content:space-between; gap:24px; transition:border-color 320ms;
}
.amen-card:hover { border-color:var(--brass); }
.amen-card svg { stroke:var(--fg1); transition:stroke 320ms; }
.amen-card:hover svg { stroke:var(--brass); }
.amen-card__name { font-size:14px; font-weight:500; color:var(--fg1); line-height:1.3; }

/* =============================================================================
   LOCATION
   ============================================================================= */
.location { background:var(--bg-bone); padding:var(--section-pad-y) 0; border-top:1px solid var(--line-soft); }
.loc-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px); align-items:center; }
.loc-map { width:100%; aspect-ratio:3/4; display:block; border:0; box-shadow:var(--shadow-paper); }
.loc-maplink { display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--brass); }
.loc-title { font-weight:300; font-size:clamp(30px,3.6vw,48px); line-height:1.12; margin:0 0 36px; max-width:16ch; }
.loc-row { display:flex; align-items:center; gap:20px; padding:18px 0; border-top:1px solid var(--line-soft); }
.loc-row:last-child { border-bottom:1px solid var(--line-soft); }
.loc-row svg { stroke:var(--brass); flex:0 0 auto; }
.loc-row__place { flex:1; font-size:clamp(15px,1.4vw,17px); color:var(--fg1); }
.loc-row__dist { font-size:17px; font-weight:300; color:var(--fg2); white-space:nowrap; }

/* =============================================================================
   LEGACY
   ============================================================================= */
.legacy { background:#F6F1E7; padding:var(--section-pad-y) 0; }
.leg-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(40px,6vw,96px); align-items:center; }
.leg-title { font-weight:200; font-size:clamp(32px,4.2vw,56px); line-height:1.1; margin:0 0 28px; }
.leg-text { font-weight:300; font-size:clamp(18px,2vw,22px); line-height:1.55; color:var(--fg2); max-width:50ch; }
.leg-stats { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.leg-stat { background:#F6F1E7; padding:clamp(28px,3vw,40px); }
.leg-stat__num { font-weight:200; font-size:clamp(34px,4vw,52px); line-height:1; color:var(--fg1); }
.leg-stat__label { margin-top:12px; font-size:11.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--fg3); }

/* =============================================================================
   FOOTER
   ============================================================================= */
.site-footer { background:var(--bg-sand); color:#3a352c; }
.site-footer__inner { padding:clamp(40px,5vw,64px) var(--container-pad) clamp(36px,4vw,52px); }
.site-footer__copy { text-align:center; font-size:14px; color:#3a352c; margin-bottom:clamp(22px,2.8vw,32px); }
.site-footer__divider { height:1px; background:rgba(58,53,44,0.18); margin:0 auto clamp(22px,2.8vw,32px); }
.site-footer__legal { font-size:12.5px; line-height:1.7; color:rgba(58,53,44,0.78); text-align:center; max-width:120ch; margin:0 auto; }

/* =============================================================================
   FLOATING ENQUIRE BUTTON
   ============================================================================= */
.floating-enquire {
  position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px); z-index:500;
  font-family:var(--ff); font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  padding:16px 26px; border-radius:2px; cursor:pointer; border:0;
  background:var(--brass); color:var(--bg-paper); box-shadow:var(--shadow-rise);
  display:inline-flex; align-items:center; gap:12px;
  opacity:0; transform:translateY(20px); pointer-events:none;
  transition:opacity 600ms var(--ease),transform 600ms var(--ease),background 320ms;
}
.floating-enquire.visible { opacity:1; transform:none; pointer-events:auto; }
.floating-enquire:hover { background:var(--brass-hover); }
.floating-enquire span { transition:transform 320ms; }
.floating-enquire:hover span { transform:translateX(4px); }

/* =============================================================================
   MODAL + LEAD FORM
   ============================================================================= */
.modal {
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,40px); opacity:0; pointer-events:none; transition:opacity 420ms var(--ease);
}
.modal.open { opacity:1; pointer-events:auto; }
.modal__backdrop { position:absolute; inset:0; background:rgba(22,41,31,0.62); }
.modal__card {
  position:relative; width:min(480px,94vw); max-height:92vh; overflow:auto;
  background:var(--bg-paper); box-shadow:var(--shadow-deep); border-top:3px solid var(--brass);
  transform:translateY(18px); transition:transform 480ms var(--ease);
}
.modal.open .modal__card { transform:none; }
.modal__close {
  position:absolute; top:16px; right:16px; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-soft); border-radius:2px;
  cursor:pointer; color:var(--fg2); font-size:16px; line-height:1; transition:all 240ms; z-index:2;
}
.modal__close:hover { border-color:var(--brass); color:var(--brass); }
.modal__body { padding:clamp(32px,5vw,46px); }
.modal__title { font-weight:300; font-size:clamp(26px,4vw,38px); line-height:1.08; margin:12px 0 8px; color:var(--burgundy); }
.modal__sub { font-weight:300; font-size:16px; color:var(--fg2); margin:0 0 28px; max-width:36ch; }
.modal__legal { font-size:11px; color:var(--fg3); margin-top:22px; line-height:1.7; }

.lead-form { display:flex; flex-direction:column; gap:22px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field__label { font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--fg3); }
.field__label b { color:var(--brass); font-weight:600; }
.field input {
  font-family:var(--ff); font-size:17px; padding:13px 0; background:transparent;
  border:0; border-bottom:1px solid var(--line-soft); color:var(--fg1); outline:none; transition:border-color 320ms; width:100%;
}
.field input:focus { border-bottom-color:var(--brass); }
/* Inline validation — message sits directly under the input it belongs to. */
.field__error { font-size:12.5px; line-height:1.5; color:var(--status-error); margin-top:-1px; }
.field--error input { border-bottom-color:var(--status-error); }
.field--error .field__code { border-bottom-color:var(--status-error); }
.field--error .field__label { color:var(--status-error); }
.field--phone .field__row { display:flex; align-items:stretch; gap:12px; }
.field--phone .field__code { display:inline-flex; align-items:center; font-size:17px; padding:13px 0; border-bottom:1px solid var(--line-soft); color:var(--fg1); user-select:none; }
.configpick { display:flex; flex-direction:column; gap:12px; }
.configpick__label { font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--fg3); }
.configpick__opts { display:flex; gap:10px; flex-wrap:wrap; }
.chip {
  font-family:var(--ff); font-size:13px; font-weight:500; letter-spacing:0.04em; padding:10px 18px;
  border-radius:2px; cursor:pointer; border:1px solid var(--line-soft); background:transparent; color:var(--fg2); transition:all 240ms;
}
.chip.active { border-color:var(--brass); background:var(--brass); color:var(--bg-paper); }
.btn-submit {
  font-family:var(--ff); font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  padding:15px 30px; border-radius:2px; cursor:pointer; border:1px solid var(--brass);
  background:var(--brass); color:var(--bg-paper); transition:all 320ms; width:100%; margin-top:2px;
}
.btn-submit:hover { background:var(--brass-hover); border-color:var(--brass-hover); }
.btn-submit[disabled] { opacity:0.6; pointer-events:none; }
.form-error { color:var(--status-error); font-size:13px; margin:0; }
.form-thanks { text-align:center; padding:20px 0; }
.form-thanks h3 { font-weight:300; font-size:clamp(26px,3.6vw,34px); line-height:1.1; margin:18px 0 12px; color:var(--burgundy); }
.form-thanks p { font-weight:300; font-size:16px; color:var(--fg2); margin:0 auto; max-width:34ch; }
.form-thanks svg { stroke:var(--brass); }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width:1024px){
  .amen-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .nav__link { display:none; }
  .overview__grid { grid-template-columns:1fr; }
  .highlights__grid { grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(odd) { border-left:0; }
  .stat:nth-child(n+3) { border-top:1px solid rgba(110,31,46,0.16); }
  .res-grid, .amen-grid, .loc-grid, .leg-grid { grid-template-columns:1fr; }
  .loc-grid > .reveal:first-child { order:2; }
  .amen-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .highlights__grid { grid-template-columns:1fr; }
  .stat { border-left:0; border-top:1px solid rgba(110,31,46,0.16); }
  .stat:first-child { border-top:0; }
}