/**
 * Estate Showcase - shared design system (Architectural / Editorial).
 * Single source of truth for tokens, base type, nav, buttons, lead form, footer.
 * Page-specific layout lives in each template's own <style> block.
 * Fonts: Bodoni Moda (display) + Archivo (text). Palette: emerald-forest / bone / brass.
 */

:root{
  --forest:#16271e; --forest-2:#1d3327; --forest-deep:#0f1c15;
  --bone:#f4f1e8; --bone-2:#ece7da; --paper:#fbfaf4;
  --ink:#1a2620; --ink-soft:#56615a; --ink-faint:#8a8e83;
  --bone-soft:rgba(238,233,221,.72); --bone-faint:rgba(238,233,221,.5);
  --gold:#9c7c43; --gold-bright:#c0a05c;
  --line:rgba(26,38,32,.15); --line-2:rgba(26,38,32,.08); --line-dark:rgba(240,235,222,.16);
  --serif:"Bodoni Moda",Georgia,serif; --sans:"Archivo",-apple-system,system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --rad:2px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-.01em}
em{font-style:italic}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px;position:relative}
@media(max-width:720px){.wrap{padding:0 22px}}
.eyebrow{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.lede{font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:60ch;font-weight:400}

/* buttons */
.btn{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:16px 30px;border-radius:var(--rad);border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-block;transition:transform .5s var(--ease),background .35s,color .35s,border-color .35s;will-change:transform}
.btn-solid{background:var(--forest);color:var(--bone)}
.btn-solid:hover{background:var(--forest-2);transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:#8a6c39;transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}
.on-dark .btn-line{color:var(--bone);border-color:var(--line-dark)}
.on-dark .btn-line:hover{border-color:var(--gold-bright);color:var(--gold-bright)}

/* nav: solid by default (content pages); .over-hero = transparent over a hero image until scrolled */
nav{position:fixed;inset:0 0 auto 0;z-index:100;padding:15px 0;background:var(--bone);border-bottom:1px solid var(--line);transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:.02em;color:var(--ink);text-decoration:none;line-height:1;transition:color .5s}
.logo span{display:block;font-family:var(--sans);font-size:8.5px;letter-spacing:.34em;font-weight:600;margin-top:5px;color:var(--gold);transition:color .5s}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a:not(.btn){font-size:13px;letter-spacing:.04em;text-decoration:none;color:var(--ink-soft);transition:color .3s}
.nav-links a:not(.btn):hover{color:var(--gold)}
.nav-links a.active{color:var(--gold)}
nav .btn{padding:12px 24px}
@media(max-width:860px){.nav-links a:not(.btn){display:none}}

nav.over-hero{padding:24px 0;background:transparent;border-bottom-color:transparent}
nav.over-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,28,21,.55),transparent);pointer-events:none;z-index:-1;transition:opacity .5s}
nav.over-hero .logo{color:var(--bone)}
nav.over-hero .logo span{color:var(--gold-bright)}
nav.over-hero .nav-links a:not(.btn){color:var(--bone-soft)}
nav.over-hero .nav-links a:not(.btn):hover{color:var(--gold-bright)}
nav.over-hero .btn-solid{background:var(--bone);color:var(--forest)}
nav.over-hero.scrolled{padding:15px 0;background:var(--bone);border-bottom:1px solid var(--line)}
nav.over-hero.scrolled::before{opacity:0}
nav.over-hero.scrolled .logo{color:var(--ink)}
nav.over-hero.scrolled .logo span{color:var(--gold)}
nav.over-hero.scrolled .nav-links a:not(.btn){color:var(--ink-soft)}
nav.over-hero.scrolled .btn-solid{background:var(--forest);color:var(--bone)}

/* sections */
section{position:relative}
.pad{padding:130px 0}
@media(max-width:720px){.pad{padding:84px 0}}
.sec-head{max-width:46ch;margin-bottom:64px}
.sec-head h2{font-size:clamp(32px,4.4vw,58px)}
.sec-head .lede{margin-top:22px}
.band-forest{background:var(--forest);color:var(--bone)}
.band-forest h1,.band-forest h2,.band-forest h3{color:var(--bone)}

/* lead form (shared across project / home / archive) */
.lead-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);padding:52px 50px}
@media(max-width:560px){.lead-card{padding:34px 24px}}
.lead-card h3{font-size:30px;margin-bottom:8px}
.lead-card .sub{font-size:14px;color:var(--ink-soft);margin-bottom:30px}
.field{margin-bottom:18px}
.field label{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;font-weight:600}
.field input,.field select{width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:14px 15px;color:var(--ink);font-family:var(--sans);font-size:15px;transition:border-color .3s}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold)}
.field input::placeholder{color:#a9ada3}
.phone-row{display:grid;grid-template-columns:62px 1fr;gap:8px}
.phone-row .cc{display:flex;align-items:center;justify-content:center;background:var(--bone-2);border:1px solid var(--line);border-radius:var(--rad);font-size:14px;color:var(--ink-soft)}
.consent{display:flex;gap:11px;align-items:flex-start;margin:6px 0 22px}
.consent input{margin-top:3px;accent-color:var(--gold);flex-shrink:0}
.consent label{font-size:11.5px;line-height:1.55;color:var(--ink-faint)}
.consent a{color:var(--gold);text-decoration:underline}
.lead-card .btn{width:100%;text-align:center}
.lead-note{text-align:center;font-size:11.5px;color:var(--ink-faint);margin-top:14px;letter-spacing:.04em}
.lead-note b{color:var(--gold);font-weight:600}
.lc-success{display:none;text-align:center;padding:40px 10px}
.lc-success.show{display:block}
.lc-success .tick{width:58px;height:58px;border:1px solid var(--gold);border-radius:50%;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:24px}
.lc-success h3{font-size:30px;margin-bottom:10px}
.lc-success p{font-size:14px;color:var(--ink-soft);max-width:38ch;margin:0 auto}
.lc-error{display:none;color:#a3402f;font-size:13px;margin-top:12px;text-align:center;background:rgba(163,64,47,.08);border:1px solid rgba(163,64,47,.2);padding:10px;border-radius:var(--rad)}

/* footer (site-wide) */
.site-footer{background:var(--forest-deep);color:var(--bone-soft);padding:70px 0 44px}
.foot-top{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:start;padding-bottom:40px;border-bottom:1px solid var(--line-dark)}
@media(max-width:760px){.foot-top{grid-template-columns:1fr;gap:26px}}
.foot-logo{font-family:var(--serif);font-size:30px;color:var(--bone);letter-spacing:.02em}
.foot-logo span{display:block;font-family:var(--sans);font-size:12px;color:var(--bone-faint);letter-spacing:.04em;margin-top:10px}
.foot-links{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px}
.foot-links a{font-size:12.5px;letter-spacing:.04em;color:var(--bone-soft);text-decoration:none}
.foot-links a:hover{color:var(--gold-bright)}
.rera-box{font-size:11.5px;line-height:1.85;color:var(--bone-faint)}
.rera-box b{color:var(--bone-soft)}
.foot-bottom{margin-top:32px;font-size:11px;color:var(--bone-faint);letter-spacing:.05em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.foot-bottom a{color:var(--bone-faint);text-decoration:none}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{animation:none!important}}