:root{
  --purple:#2F5A45; --purple-deep:#1F3A2D; --forest:#1F3A2D; --ink:#1b2a22; --gold:#B08D4F; --gold-soft:#D2B375; --bronze:#8E6B2E;
  --cream:#E4DED3; --paper:#FFFFFF; --muted:#5b665f;
  --serif:'Jost',Futura,'Helvetica Neue',sans-serif; --sans:'Jost',Futura,'Helvetica Neue',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.center{text-align:center}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.12}
h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:20px}
h3{font-size:clamp(1.8rem,3vw,2.5rem);margin-bottom:16px}
.eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:16px;font-weight:400}
.eyebrow.dark{color:var(--bronze)}
.lead{font-family:var(--serif);font-size:1.45rem;line-height:1.5;margin-bottom:20px}
p{margin-bottom:16px;color:inherit}
.note{font-size:.78rem;color:var(--muted);margin-top:18px}
.btn{display:inline-block;background:var(--gold-soft);color:var(--forest);text-decoration:none;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;padding:16px 34px;border:1px solid var(--gold-soft);cursor:pointer;font-family:var(--sans);font-weight:400;transition:.25s}
.btn:hover{background:transparent;color:var(--gold-soft)}
.btn.ghost{background:transparent;border-color:var(--gold-soft);color:#fff}
.btn.ghost:hover{background:var(--gold);color:#fff}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:20px 40px;transition:.3s;color:#fff}
.nav.solid{background:rgba(31,58,45,.96);backdrop-filter:blur(8px);padding:14px 40px}
.brand{text-decoration:none;display:flex;align-items:baseline;gap:12px}
.brand-mark{font-family:var(--serif);font-size:1.8rem;font-weight:300}
.brand-text{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase}
.links{display:flex;gap:30px;align-items:center}
.links a{text-decoration:none;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.links a:hover{color:var(--gold-soft)}
.links .cta{border:1px solid var(--gold-soft);padding:10px 18px}
.burger{display:none;background:none;border:0;width:32px;height:24px;position:relative;cursor:pointer}
.burger span{position:absolute;left:0;right:0;height:2px;background:#fff;transition:.3s}
.burger span:first-child{top:7px}.burger span:last-child{top:15px}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:zoom 22s ease-out both}
@keyframes zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,32,24,.35) 0%,rgba(16,32,24,.1) 35%,rgba(31,58,45,.88) 100%)}
.hero-copy{position:relative;padding:0 40px 90px;max-width:900px;animation:rise 1.2s .2s both}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero h1{font-size:clamp(3rem,8vw,6.2rem);margin-bottom:14px}
.tagline{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.4vw,1.7rem);margin-bottom:34px;color:#f1e8d6}
.hero-stats{display:flex;gap:40px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.35);padding-top:22px;margin-bottom:26px}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font-family:var(--serif);font-size:2rem;font-weight:400;line-height:1}
.hero-stats span{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin-top:6px}
.hero-price{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.hero-price strong{font-family:var(--serif);font-size:2.4rem;font-weight:400}
#statusBadge{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;border:1px solid var(--gold-soft);padding:6px 12px;color:var(--gold-soft)}
.scroll{position:absolute;right:40px;bottom:40px;width:1px;height:70px;background:rgba(255,255,255,.4)}
.scroll i{position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:#fff;animation:drop 2s infinite}
@keyframes drop{to{top:65px;opacity:0}}

/* sections */
.intro{padding:130px 0 90px}
.intro .two{align-items:start}
.intro h2{margin-bottom:0}
.facts{background:var(--purple-deep);color:#fff;padding:54px 0}
.facts-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;text-align:center}
.facts b{display:block;font-family:var(--serif);font-size:1.7rem;font-weight:400;color:var(--gold-soft)}
.facts span{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;opacity:.8}

.split{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:0;background:var(--cream)}
.split.flip{grid-template-columns:1fr 1.25fr;background:var(--paper)}
.split.flip figure{order:2}
.split figure{height:78vh;min-height:460px;overflow:hidden}
.split figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s}
.split figure:hover img{transform:scale(1.04)}
.split-copy{padding:60px clamp(32px,6vw,110px)}
.split+.split{border-top:0}

.gallery{padding:120px 0 90px;background:var(--paper)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:14px;margin-top:50px}
.g{position:relative;border:0;padding:0;overflow:hidden;cursor:zoom-in;background:#ddd}
.g.w2{grid-column:span 2}
.g img{width:100%;height:100%;object-fit:cover;transition:transform .9s}
.g:hover img{transform:scale(1.07)}
.g em{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;color:#fff;font-style:normal;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;background:linear-gradient(transparent,rgba(16,32,24,.75));opacity:0;transition:.3s;text-align:left}
.g:hover em{opacity:1}
.gallery .note{margin-top:28px}

.lifestyle{background:linear-gradient(135deg,var(--purple) 0%,var(--purple-deep) 100%);color:#fff;padding:120px 0}
.lifestyle .two{align-items:start}
.feat{list-style:none}
.feat li{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column}
.feat b{font-family:var(--serif);font-size:1.45rem;font-weight:400}
.feat span{font-size:.82rem;color:#e0dacb}

.club{width:100%;margin-top:70px;aspect-ratio:16/7;object-fit:cover}
.marks{display:flex;gap:18px;justify-content:center;margin-bottom:22px}
.marks img{height:46px;width:auto;background:#fff;padding:5px;border-radius:3px}
.plan{padding:120px 0;background:var(--cream)}
.plan .two{align-items:start}
.plan figure button{width:100%;background:#fff;box-shadow:0 20px 60px rgba(31,58,45,.15);border:0;padding:16px;cursor:zoom-in}
.spec{list-style:none;margin-top:26px}
.spec li{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid #ddd3c2;font-size:.9rem}
.spec span{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem}
.spec b{font-weight:400;text-align:right}

.location{position:relative;min-height:80vh;display:flex;align-items:center}
.location>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.location::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,58,45,.9) 0%,rgba(31,58,45,.35) 60%,transparent)}
.loc-card{position:relative;z-index:2;color:#fff;max-width:520px;margin-left:max(40px,calc((100vw - 1180px)/2 + 24px));padding:60px 0}
.loc-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;margin:24px 0 30px;font-size:.9rem}
.loc-card dt{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);padding-top:3px}

.visit{padding:120px 0;background:var(--purple-deep);color:#fff}
.visit .two{align-items:start}
.agent{display:flex;gap:22px;align-items:center;margin-top:34px;padding-top:30px;border-top:1px solid rgba(255,255,255,.2)}
.agent img{width:110px;height:110px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid var(--gold)}
.agent div{display:flex;flex-direction:column;font-size:.9rem}
.agent b{font-family:var(--serif);font-size:1.7rem;font-weight:400}
.agent span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:6px}
.agent a{text-decoration:none;color:#fff}.agent a:hover{color:var(--gold-soft)}
.form{display:grid;gap:18px;background:rgba(255,255,255,.06);padding:36px;border:1px solid rgba(255,255,255,.15)}
.form label{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);display:grid;gap:8px}
.form input,.form textarea{font:inherit;font-size:1rem;letter-spacing:0;text-transform:none;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.4);color:#fff;padding:8px 0;outline:0}
.form input:focus,.form textarea:focus{border-color:var(--gold)}
.form .note{color:#cfc9b8;margin:0}
.hp{position:absolute;left:-9999px}

footer{background:#12261d;color:#cfc9b8;padding:56px 0;font-size:.8rem}
.foot{text-align:center}
.foot-logo{width:140px;margin:0 auto 20px;border:1px solid rgba(255,255,255,.3)}
.fine{max-width:760px;margin:18px auto 0;font-size:.7rem;opacity:.7}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(15,8,22,.95);z-index:100;display:flex;align-items:center;justify-content:center;flex-direction:column}
.lb[hidden]{display:none}
.lb img{max-width:90vw;max-height:80vh;object-fit:contain}
.lb p{color:#fff;margin-top:16px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.lb button{position:absolute;background:none;border:0;color:#fff;font-size:3rem;cursor:pointer;padding:10px 20px;line-height:1}
.lb-x{top:10px;right:16px}.lb-p{left:10px;top:50%}.lb-n{right:10px;top:50%}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s,transform .9s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero>img,.hero-copy{animation:none}html{scroll-behavior:auto}}

@media(max-width:900px){
  .two{grid-template-columns:1fr;gap:36px}
  .nav{padding:16px 20px}.nav.solid{padding:12px 20px}
  .burger{display:block}
  .links{position:fixed;inset:60px 0 auto 0;background:var(--purple-deep);flex-direction:column;padding:30px;gap:22px;display:none}
  .links.open{display:flex}
  .hero-copy{padding:0 22px 70px}.scroll{display:none}
  .hero-stats{gap:22px}
  .facts-grid{grid-template-columns:repeat(3,1fr);gap:28px 10px}
  .split,.split.flip{grid-template-columns:1fr}.split.flip figure{order:0}
  .split figure{height:50vh;min-height:300px}
  .split-copy{padding:44px 24px}
  .grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .intro,.gallery,.lifestyle,.plan,.visit{padding:80px 0}
  .loc-card{margin:0 24px}
  .form{padding:24px}
  .agent{flex-direction:column;align-items:flex-start}
}

.request{background:var(--cream);padding:64px 0;border-bottom:1px solid #d6cfc0}
.req-in{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:center}
.req-copy h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:12px}
.req-copy p{color:var(--muted)}.req-copy a{color:var(--purple);font-weight:400}
.req-form{display:grid;gap:16px;background:var(--paper);padding:30px;border-top:3px solid var(--gold);box-shadow:0 20px 50px rgba(31,58,45,.10)}
.req-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.req-form label{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--purple);display:grid;gap:6px}
.req-form input,.req-form select{font:inherit;font-size:.95rem;letter-spacing:0;text-transform:none;background:#fff;border:1px solid #e0dacb;padding:11px 12px;color:var(--ink);outline:0}
.req-form input:focus,.req-form select:focus{border-color:var(--gold)}
@media(max-width:900px){.req-in{grid-template-columns:1fr;gap:26px}.request{padding:48px 0}.req-form .row{grid-template-columns:1fr}}

.hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s}
.hero>video.on{opacity:1}

/* ---------- Reagan brand (Oct 2026) ---------- */
@font-face{font-family:'Jost';font-weight:300;font-style:normal;font-display:swap;src:url(fonts/Jost-300.ttf) format('truetype')}
@font-face{font-family:'Jost';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Jost-400.ttf) format('truetype')}
/* Illinois advertising rule (68 Ill. Adm. Code 1450.715): the brokerage logo is always the SAME HEIGHT as the Reagan logo. Do not size them separately. */
.lockup{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,28px);--lh:clamp(54px,9vw,104px)}
.lockup{align-items:center}.lockup img:first-child{height:var(--lh);width:auto;max-width:none}
.lockup img:last-child{height:calc(var(--lh)*1.9);width:auto;max-width:none}
.lockup .div{width:1px;height:calc(var(--lh)*1.9);background:rgba(242,235,219,.45)}
.lockup.foot-lock{--lh:46px;margin:0 auto 26px}
.hero-id{font-size:.8rem;letter-spacing:.14em;color:#F2EBDB;margin:-14px 0 28px}
h1,h2,h3{letter-spacing:.01em}
.eyebrow,.hero-tag{letter-spacing:.34em}
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;text-align:left}
.tcard{background:#fff;border-top:3px solid var(--gold);padding:30px 28px;box-shadow:0 10px 30px rgba(31,58,45,.08)}
.tcard .q{font-size:3.2rem;line-height:.6;color:var(--gold);display:block;margin-bottom:12px;font-weight:300}
.tcard p{font-size:1.02rem;margin-bottom:16px}
.tcard .who{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.tcard.ph{border:1px dashed #b9b19d;border-top:3px solid var(--gold);background:rgba(255,255,255,.6)}
.tnote{margin-top:22px;font-size:.78rem;color:var(--muted);text-align:center}
.testimonials{padding:100px 0;background:#E4DED3;text-align:center}
.testimonials .tcard{background:#fff}
@media(max-width:860px){.testi{grid-template-columns:1fr}.lockup{--lh:clamp(44px,13vw,70px)}.lockup.foot-lock{--lh:34px}}

/* ---------- Round 4: white header + brand rules (same as darrenreagan.com) ---------- */
/* Brokerage lettering must be >= REAGAN lettering: Rutenberg logo is 1.9x the Reagan logo height. Do not size separately. */
.nav,.nav.solid{background:#fff;color:var(--forest);box-shadow:0 1px 0 rgba(31,58,45,.12);backdrop-filter:none;padding:12px 40px}
.nav.solid{box-shadow:0 6px 24px rgba(31,58,45,.12);padding:8px 40px}
.brand{--lh:54px;gap:20px;align-items:center}
.brand img{width:auto;transition:height .3s}.brand img:first-child{height:var(--lh)}.brand img:last-child{height:calc(var(--lh)*1.9)}
.brand .b-div{display:block;width:1px;height:calc(var(--lh)*1.9);background:rgba(31,58,45,.28)}
.nav.solid .brand{--lh:44px}
.links a{color:var(--forest)}.links a:hover{color:var(--bronze)}
.links .cta{background:var(--forest);color:#F2EBDB;border:1px solid var(--forest)}
.links .cta:hover{background:var(--gold-soft);color:var(--forest);border-color:var(--gold-soft)}
.burger span{background:var(--forest)}
h1,h2,h3{color:var(--forest)}
.hero h1,.hero h2,.visit h2,.lifestyle h2{color:#fff}
.btn{background:var(--forest);color:#F2EBDB;border-color:var(--forest)}
.btn:hover{background:var(--gold-soft);color:var(--forest);border-color:var(--gold-soft)}
.hero .btn{background:var(--gold-soft);color:var(--forest);border-color:var(--gold-soft)}
.hero .btn:hover{background:#fff;border-color:#fff}
@media(max-width:1200px){.brand{--lh:42px}.nav.solid .brand{--lh:38px}.links{gap:18px}}
@media(max-width:900px){.nav,.nav.solid{padding:8px 18px}.brand,.nav.solid .brand{--lh:32px}.links,.links.open{background:#fff;border-top:1px solid rgba(31,58,45,.12);box-shadow:0 20px 30px rgba(31,58,45,.12)}.links{inset:76px 0 auto 0}}
@media(max-width:480px){.brand,.nav.solid .brand{--lh:26px;gap:10px}.links{inset:62px 0 auto 0}}

/* ---------- Round 5: forest header (logos reversed) ---------- */
.nav,.nav:not(.solid),.nav.solid,body.inner .nav{background:#1F3A2D;color:#F2EBDB;box-shadow:0 1px 0 rgba(210,179,117,.35)}
.nav.solid{box-shadow:0 8px 28px rgba(0,0,0,.28)}
.brand .b-div{background:rgba(242,235,219,.4)}
.links a{color:#F2EBDB}.links a:hover{color:#D2B375}
.links .cta{background:#D2B375;color:#1F3A2D;border:1px solid #D2B375}
.links .cta:hover{background:#fff;color:#1F3A2D;border-color:#fff}
.burger span{background:#F2EBDB}
@media(max-width:900px){.links,.links.open{background:#1F3A2D;border-top:1px solid rgba(210,179,117,.35);box-shadow:0 20px 30px rgba(0,0,0,.3)}.links a{color:#F2EBDB}.links .cta{color:#1F3A2D}}
footer .marks{align-items:center;gap:22px}
footer .marks img{background:none;padding:0;border-radius:0;height:56px}
footer .marks .m-eho{background:#fff;padding:5px;border-radius:3px;height:60px}
footer .marks .m-r{height:60px}
footer .marks .m-il{height:50px}

/* ---- Round 7: stacked Reagan logo; both logos share one height (--lh). See realtor/styles.css. ---- */
.brand img:last-child{height:var(--lh)}
.brand .b-div{height:calc(var(--lh)*.8)}
.brand{--lh:87px;gap:22px}
.nav.solid .brand{--lh:71px}
@media(max-width:1200px){.brand{--lh:68px}.nav.solid .brand{--lh:61px}}
@media(max-width:900px){.brand,.nav.solid .brand{--lh:52px}}
@media(max-width:480px){.brand,.nav.solid .brand{--lh:42px;gap:10px}}
.lockup img:last-child{height:var(--lh)}
.lockup .div{height:calc(var(--lh)*.8)}
.lockup{--lh:clamp(80px,12vw,160px)}
.lockup.foot-lock{--lh:76px}
@media(max-width:860px){.lockup{--lh:clamp(70px,20vw,110px)}.lockup.foot-lock{--lh:58px}}
/* stacked Reagan logo may be up to 1.15x the Rutenberg height (letters 16% vs 19%); use 1.12x */
.brand img:first-child,.lockup img:first-child{height:calc(var(--lh)*1.12)}

.form-ok{padding:28px;background:#F2EBDB;text-align:center;font-size:1.1rem}

.tour{background:var(--paper);padding:84px 0 72px}.tour h2{margin:6px 0 28px}.tour-frame{max-width:1040px;margin:0 auto;box-shadow:0 18px 50px rgba(0,0,0,.18);background:#000}.tour-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9}@media(max-width:700px){.tour{padding:56px 0 48px}}
