/* ===================================================
   DenHomesForSale.com — shared stylesheet
   =================================================== */
:root{
  --ink:#16232E;
  --ink-soft:#4B5560;
  --paper:#FAF8F3;
  --panel:#F1ECE1;
  --brick:#A8462A;
  --brick-dark:#8A3820;
  --evergreen:#445843;
  --gold:#C9962C;
  --line:#DDD5C7;
  --white:#FFFFFF;
  --radius:2px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Spectral', serif;
  color:var(--ink);
  margin:0 0 .4em 0;
  font-weight:500;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em 0; color:var(--ink-soft); max-width:64ch;}
a{color:inherit; text-decoration:none;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--evergreen); outline-offset:3px;}

.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
.narrow{max-width:720px;}

/* Header / Nav */
header.site{
  background:var(--ink);
  color:var(--paper);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; max-width:1120px; margin:0 auto;
  gap:24px;
}
.brand{font-family:'Spectral', serif; font-size:1.15rem; color:var(--white); white-space:nowrap;}
.brand span{color:var(--gold);}
nav.primary{display:flex; align-items:center; gap:2px; flex-wrap:wrap;}
nav.primary > .nav-item{position:relative;}
nav.primary a.nav-link, nav.primary button.nav-link{
  background:none;border:none;color:rgba(250,248,243,.82);
  font-family:'Work Sans', sans-serif; font-size:.92rem; font-weight:500;
  padding:10px 12px; cursor:pointer; border-radius:var(--radius);
}
nav.primary a.nav-link:hover, nav.primary button.nav-link:hover{color:var(--white); background:rgba(255,255,255,.06);}
nav.primary a.nav-link.is-active{color:var(--gold);}
.dropdown{
  display:none; position:absolute; top:100%; left:0;
  background:var(--white); color:var(--ink);
  min-width:220px; padding:8px; border:1px solid var(--line);
  box-shadow:0 12px 24px rgba(22,35,46,.16);
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{display:block;}
.dropdown a{display:block; padding:9px 12px; font-size:.9rem; color:var(--ink); border-radius:var(--radius);}
.dropdown a:hover{background:var(--panel);}
.nav-cta{background:var(--brick); color:var(--white); padding:10px 18px; font-size:.9rem; font-weight:600; border-radius:var(--radius); white-space:nowrap;}
.nav-cta:hover{background:var(--brick-dark);}
.mobile-toggle{display:none; background:none; border:1px solid rgba(255,255,255,.3); color:var(--white); padding:8px 12px; font-size:.85rem;}

/* Hero / skyline motif */
.hero{background:var(--ink); color:var(--paper); position:relative; overflow:hidden; padding:64px 0 0 0;}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:end;}
.hero-copy{padding-bottom:56px;}
.hero .eyebrow{color:var(--gold); font-size:.85rem; font-weight:600; margin-bottom:14px; letter-spacing:.02em;}
.hero h1{color:var(--white); font-size:clamp(2.1rem, 4vw, 3.1rem); line-height:1.1; max-width:14ch;}
.hero p.lede{color:rgba(250,248,243,.78); font-size:1.05rem; max-width:46ch;}
.hero-ctas{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}
.btn{display:inline-block; padding:13px 22px; font-weight:600; font-size:.94rem; border-radius:var(--radius); cursor:pointer; border:1px solid transparent;}
.btn-primary{background:var(--brick); color:var(--white);}
.btn-primary:hover{background:var(--brick-dark);}
.btn-outline{background:transparent; color:var(--white); border-color:rgba(255,255,255,.4);}
.btn-outline:hover{border-color:var(--white);}
.btn-outline-dark{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-outline-dark:hover{background:var(--ink); color:var(--white);}
.btn-secondary{background:var(--evergreen); color:var(--white);}
.btn-secondary:hover{background:#374a36;}
.skyline{width:100%; height:auto; display:block;}
.skyline path{fill:none; stroke:rgba(250,248,243,.28); stroke-width:1.4;}
.skyline .fill{fill:rgba(201,150,44,.14); stroke:none;}

/* Sections */
.section{padding:72px 0;}
.section.tint{background:var(--panel);}
.section-head{max-width:640px; margin-bottom:36px;}
.section-head h2{font-size:clamp(1.6rem,2.6vw,2.1rem);}

/* Cards / grids */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.card{background:var(--white); border:1px solid var(--line); padding:26px; border-radius:var(--radius);}
.card h3{font-size:1.05rem; margin-bottom:.35em;}
.card p{font-size:.92rem; margin-bottom:0;}
.link-card{display:block; background:var(--white); border:1px solid var(--line); padding:18px 20px; font-weight:600; font-size:.95rem; color:var(--ink);}
.link-card:hover{border-color:var(--brick); color:var(--brick);}
.link-list{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.link-list.cols-3{grid-template-columns:repeat(3,1fr);}
.card-with-art{display:block;}
.card-art{margin:-26px -26px 16px -26px; background:var(--panel); overflow:hidden;}
.card-art svg{width:100%; height:110px; display:block;}

/* Questions checklist */
.qlist{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
.qlist li{padding:14px 18px; background:var(--white); border-left:3px solid var(--gold); font-size:.95rem; color:var(--ink);}

/* Numbered process */
.steps{counter-reset:step; display:grid; gap:0;}
.step{display:grid; grid-template-columns:60px 1fr; gap:20px; padding:22px 0; border-top:1px solid var(--line);}
.step:last-child{border-bottom:1px solid var(--line);}
.step-num{counter-increment:step; font-family:'Spectral',serif; font-size:1.6rem; color:var(--gold);}
.step-num::before{content: counter(step, decimal-leading-zero);}
.step h3{margin-bottom:.25em; font-size:1.05rem;}
.step p{margin-bottom:0; font-size:.93rem;}

/* Marc profile */
.profile{display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:start;}
.profile-photo{width:220px; height:260px; border-radius:var(--radius); overflow:hidden; background:var(--panel);}
.profile-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.profile ul{margin:0 0 20px 0; padding-left:18px; color:var(--ink-soft); font-size:.94rem;}
.profile ul li{margin-bottom:6px;}
.signature{font-family:'Spectral',serif; font-size:1.1rem; margin-top:22px;}
.signature small{display:block; font-family:'Work Sans',sans-serif; color:var(--ink-soft); font-size:.82rem; margin-top:4px;}

/* FAQ accordion */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:18px 0; font-family:'Spectral',serif; font-size:1.05rem; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq-q .mark{font-size:1.3rem; color:var(--gold); flex-shrink:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding-bottom:18px; font-size:.94rem;}
.faq-item.open .faq-a{max-height:400px;}

/* Stat panel */
.stat-panel{background:var(--ink); color:var(--white); padding:36px; border-radius:var(--radius);}
.stat-panel .big{font-family:'Spectral',serif; font-size:2.6rem; color:var(--gold);}
.stat-panel p{color:rgba(250,248,243,.7); font-size:.9rem;}

/* CTA banner */
.cta-banner{background:var(--brick); color:var(--white); padding:56px 0; text-align:left;}
.cta-banner h2{color:var(--white);}
.cta-banner p{color:rgba(255,255,255,.85);}
.cta-banner .btn-outline{border-color:rgba(255,255,255,.5);}

/* Inner page hero */
.inner-hero{background:var(--panel); padding:48px 0;}
.inner-hero .kicker{color:var(--brick); font-weight:600; font-size:.85rem; margin-bottom:8px;}
.inner-hero h1{font-size:clamp(1.8rem,3vw,2.4rem);}
.inner-hero-grid{display:grid; grid-template-columns:1fr 220px; gap:32px; align-items:center;}
.inner-hero-art{width:100%;}
.inner-hero-art svg{width:100%; height:auto; display:block;}
@media (max-width:700px){.inner-hero-grid{grid-template-columns:1fr;} .inner-hero-art{max-width:220px; margin:0 auto;}}

/* Footer */
footer.site{background:var(--ink); color:rgba(250,248,243,.7); padding:56px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
footer.site h4{color:var(--white); font-family:'Work Sans',sans-serif; font-size:.85rem; margin:0 0 14px 0;}
footer.site a{display:block; font-size:.87rem; padding:5px 0; color:rgba(250,248,243,.7);}
footer.site a:hover{color:var(--gold);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:36px; padding-top:20px; font-size:.78rem; color:rgba(250,248,243,.45);}
.footer-bottom-legal{display:flex; align-items:flex-start; gap:20px;}
.footer-ehl-logo{width:56px; height:56px; flex-shrink:0; filter:invert(1) brightness(1.6);}
@media (max-width:600px){.footer-bottom-legal{flex-direction:column; align-items:flex-start;}}
.disclosure{max-width:760px;}

/* Phone strip */
.phone-strip{background:var(--gold); color:var(--ink);}
.phone-strip-inner{display:flex; justify-content:flex-end; align-items:center; gap:10px; padding:7px 32px; font-size:.82rem; font-weight:600;}
.phone-strip-inner span{opacity:.85; font-weight:500;}
.phone-strip-inner a{color:var(--ink); text-decoration:underline;}

/* Category / cross-link bar (Financing a Home in X) */
.category-bar{font-size:.92rem; font-weight:600; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.category-bar a{color:var(--brick);}
.category-bar a:hover{text-decoration:underline;}
.category-bar .sep{color:var(--line); font-weight:400;}

/* Calculator */
.calc{display:grid; grid-template-columns:1.1fr .9fr; gap:0; background:var(--white); border:1px solid var(--line); overflow:hidden;}
.calc-inputs{padding:32px; display:grid; gap:16px;}
.calc-field{display:grid; gap:6px;}
.calc-field label{font-size:.82rem; font-weight:600; color:var(--ink-soft); display:flex; justify-content:space-between;}
.calc-field input[type="number"]{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius);
  font-family:'Work Sans',sans-serif; font-size:.95rem; color:var(--ink); background:var(--paper);
}
.calc-field input[type="range"]{width:100%; accent-color:var(--brick);}
.calc-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.calc-results{background:var(--ink); color:var(--white); padding:32px; display:flex; flex-direction:column; justify-content:center;}
.calc-total{font-family:'Spectral',serif; font-size:2.4rem; color:var(--gold); margin-bottom:4px;}
.calc-total-label{font-size:.82rem; color:rgba(250,248,243,.65); margin-bottom:22px;}
.calc-breakdown{display:grid; gap:8px; font-size:.88rem;}
.calc-breakdown div{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.1);}
.calc-note{font-size:.76rem; color:rgba(250,248,243,.55); margin-top:18px;}
@media (max-width:880px){
  .calc{grid-template-columns:1fr;}
  .calc-row{grid-template-columns:1fr;}
  .phone-strip-inner{justify-content:center; text-align:center; flex-wrap:wrap;}
}

/* Contact modal */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(22,35,46,.6); z-index:200;
  align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:var(--white); max-width:440px; width:100%; padding:32px; position:relative;
  border-radius:var(--radius); max-height:90vh; overflow-y:auto;
}
.modal-box h3{font-size:1.4rem; margin-bottom:.3em;}
.modal-close{
  position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.6rem;
  line-height:1; cursor:pointer; color:var(--ink-soft);
}
.modal-quick-actions{display:flex; gap:12px; margin-bottom:8px;}
.modal-quick-actions .btn{flex:1; text-align:center;}
.modal-divider{display:flex; align-items:center; gap:12px; margin:20px 0; font-size:.8rem; color:var(--ink-soft);}
.modal-divider::before, .modal-divider::after{content:""; flex:1; height:1px; background:var(--line);}
.cf-status{font-size:.85rem; margin-top:12px; margin-bottom:0;}
.cf-status.success{color:var(--evergreen); font-weight:600;}
.cf-status.error{color:var(--brick); font-weight:600;}

@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;}
  .grid-3, .grid-2, .link-list{grid-template-columns:1fr;}
  .profile{grid-template-columns:1fr;}
  .profile-photo{width:100%;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  nav.primary{display:none;}
  .mobile-toggle{display:inline-block;}
  nav.primary.open{display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--ink); padding:12px; border-top:1px solid rgba(255,255,255,.1);}
  .dropdown{position:static; display:block; box-shadow:none; border:none; background:none; padding-left:12px;}
  .nav-item:hover .dropdown{display:block;}
}