/* munawerdhala.com — 2027 system
   Navy / ivory, gold rationed to the one action. Serif display + sans utility.
   8-pt spacing. One primary action sitewide: "What's my home worth?" */

:root{
  --navy:#0B1F38; --navy-deep:#071629; --navy-card:#12283F; --navy-line:#24405F;
  --gold:#C9A227; --gold-lt:#E7CB7E; --gold-dim:#7A5F14;
  --ivory:#FBF8F1; --paper:#FFFFFF; --ink:#182430; --sage:#5B6B7A; --line:#E5DFCE;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1200px; --read:680px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--navy)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------- type roles ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--navy);line-height:1.1}
h1 em,h2 em{font-style:italic}
.eyebrow{font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim)}
.on-navy .eyebrow{color:var(--gold)}
.lede{font-size:18px;line-height:1.6;color:#3D4C5C;max-width:var(--read)}
.on-navy .lede{color:#C7D2DF}
.measure{max-width:var(--read)}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(7,22,41,.97);border-bottom:1px solid var(--gold)}
.header-in{max-width:var(--wrap);margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:38px;height:38px}
.brand .wordmark{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.14em;color:#fff;white-space:nowrap}
.brand .wordmark small{display:block;font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.3em;color:var(--gold-lt)}
.main-nav{display:flex;align-items:center;gap:26px}
.main-nav a{color:#D8E0EA;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:10px 2px}
.main-nav a:hover,.main-nav a.current{color:var(--gold-lt)}
.btn{display:inline-block;font-family:var(--sans);font-weight:700;font-size:15.5px;letter-spacing:.02em;text-decoration:none;border-radius:980px;padding:15px 32px;min-height:48px;cursor:pointer;border:0;text-align:center;transition:background .2s ease,color .2s ease,border-color .2s ease}
.btn-gold{background:var(--gold);color:var(--navy-deep)}
.btn-gold:hover{background:var(--gold-lt)}
.btn-sm{padding:10px 20px;min-height:44px;font-size:13.5px}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-card)}
.btn-outline-navy{background:transparent;border:1.5px solid var(--navy);color:var(--navy)}
.btn-outline-navy:hover{border-color:var(--gold-dim);color:var(--gold-dim)}
.btn-outline-light{background:transparent;border:1.5px solid rgba(255,255,255,.65);color:#fff}
.btn-outline-light:hover{border-color:var(--gold);color:var(--gold-lt)}
.quiet-link{color:#D8E0EA;font-size:15px;text-decoration:none}
.quiet-link:hover{color:var(--gold-lt);text-decoration:underline;text-underline-offset:4px}
.menu-btn{display:none;background:none;border:1px solid var(--navy-line);border-radius:10px;color:#fff;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:11px 16px;min-height:44px;cursor:pointer}
.mobile-menu{display:none;background:var(--navy-deep);border-bottom:1px solid var(--gold);padding:8px 24px 20px}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;color:#D8E0EA;text-decoration:none;font-size:15px;font-weight:600;padding:13px 0;border-bottom:1px solid var(--navy-line)}
.mobile-menu a:last-child{border-bottom:0}
@media(max-width:900px){
  .main-nav a:not(.btn){display:none}
  .menu-btn{display:block}
  .brand .wordmark{font-size:16px}
}
@media(max-width:480px){ .main-nav .btn{display:none} }

/* ---------- layout ---------- */
.section{padding:96px 24px}
.section-in{max-width:var(--wrap);margin:0 auto}
.section h2{font-size:clamp(30px,4vw,40px);margin-top:14px}
.section .lede{margin-top:14px}
.on-navy{background:var(--navy);color:#E6EBF2}
.on-navy h1,.on-navy h2,.on-navy h3{color:#fff}
.on-deep{background:var(--navy-deep);color:#E6EBF2}
.on-deep h1,.on-deep h2,.on-deep h3{color:#fff}
.hairline{width:84px;height:2px;background:var(--gold);margin-top:24px;border:0}
@media(max-width:640px){ .section{padding:60px 20px} body{font-size:16.5px} }

/* ---------- hero ---------- */
.hero{background:var(--navy);color:#E6EBF2;padding:168px 24px 96px}
.hero-in{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1fr 220px;gap:56px;align-items:center}
.hero h1{color:#fff;font-size:clamp(44px,7.2vw,92px);line-height:1.04;margin-top:20px;max-width:12.5em}
.hero h1 em{color:var(--gold-lt)}
.hero-proof{margin-top:22px;font-size:16.5px;color:#C7D2DF;max-width:34em;line-height:1.55}
.hero-portrait{width:220px}
.hero-portrait img{width:220px;height:220px;object-fit:cover;border-radius:50%;border:2px solid var(--gold);display:block}
.hero-portrait figcaption{margin-top:14px;text-align:center;font-size:13px;letter-spacing:.06em;color:#C7D2DF;text-transform:uppercase;font-weight:600}
.hero .buy-link{margin-top:26px}
@media(max-width:900px){
  .hero{padding:136px 20px 64px}
  .hero-in{grid-template-columns:1fr;gap:0}
  .hero-portrait{order:5;margin-top:40px;width:132px}
  .hero-portrait img{width:132px;height:132px}
  .hero-portrait figcaption{text-align:left}
}

/* ---------- valuation flow (the one ask) ---------- */
.val-flow{margin-top:34px;max-width:620px}
.val-card{background:var(--paper);border-radius:16px;padding:10px;box-shadow:0 18px 44px rgba(0,0,0,.28)}
.val-step1{display:flex;gap:8px}
.val-step1 input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:var(--sans);font-size:16px;padding:14px 16px;color:var(--ink)}
.val-step1 button{flex:none}
.val-error{display:none;margin-top:10px;padding:2px 8px 8px;font-size:14.5px;color:#F3B8B0;line-height:1.45}
.on-ivory .val-error,.val-card .val-error{color:#9C2B1E}
.val-error.show{display:block}
.val-micro{margin-top:12px;font-size:13.5px;color:#A9BACB}
.val-step2{display:none}
.val-step2.show{display:block}
.val-promise{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--navy);line-height:1.35;padding:8px 8px 0}
.val-addr-echo{font-size:14px;color:var(--sage);padding:4px 8px 0}
.val-fields{padding:14px 8px 6px;display:grid;gap:14px}
.val-fields label{display:block;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--sage);margin-bottom:6px}
.val-fields input{width:100%;padding:13px 14px;border:1px solid #D8D4C4;border-radius:10px;font-family:var(--sans);font-size:16px;color:var(--ink);background:#fff}
.val-fields input[aria-invalid="true"]{border-color:#9C2B1E}
.val-submit{margin:4px 8px 8px;width:calc(100% - 16px)}
.val-done{display:none;padding:10px 8px 6px}
.val-done.show{display:block}
.val-done .done-row{display:flex;gap:16px;align-items:flex-start}
.val-done img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);flex:none}
.val-done h3{font-size:24px;line-height:1.2}
.val-done p{font-size:15.5px;color:#3D4C5C;margin-top:6px;line-height:1.55}
.val-done .done-note{font-size:13.5px;color:var(--sage);margin-top:12px}
.on-ivory .val-card{box-shadow:none;border:1px solid var(--line)}
@media(max-width:600px){
  .val-step1{flex-direction:column;padding:4px}
  .val-step1 input{padding:14px 12px}
  .val-step1 button{width:100%}
}

/* ---------- proof band ---------- */
.proof-band{background:var(--ivory);padding:64px 24px;border-bottom:1px solid var(--line)}
.proof-in{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:left}
.proof-item .num{font-family:var(--serif);font-weight:700;font-size:44px;color:var(--navy);line-height:1}
.proof-item .lbl{margin-top:8px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dim)}
.proof-item .sub{margin-top:6px;font-size:14.5px;color:var(--sage);line-height:1.5}
.proof-line{max-width:var(--wrap);margin:36px auto 0;padding-top:24px;border-top:1px solid var(--line);font-size:15px;color:#3D4C5C}
.proof-line a{font-weight:600}
@media(max-width:820px){ .proof-in{grid-template-columns:1fr 1fr;gap:28px} }
@media(max-width:460px){ .proof-in{grid-template-columns:1fr} }

/* ---------- services / steps ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:48px}
.svc{border-top:2px solid var(--gold);padding-top:22px}
.svc h3{font-size:24px}
.svc p{margin-top:10px;font-size:16px;color:#3D4C5C;line-height:1.6}
.svc .n{font-family:var(--serif);font-size:15px;letter-spacing:.1em;color:var(--gold-dim)}
@media(max-width:820px){ .svc-grid{grid-template-columns:1fr;gap:32px} }
.steps{display:grid;grid-template-columns:1fr 1fr;gap:40px 56px;margin-top:48px}
.step{border-top:2px solid var(--gold);padding-top:22px}
.step h3{font-size:24px}
.step p{margin-top:10px;font-size:16px;color:#3D4C5C;line-height:1.6}
.step .cadence{margin-top:12px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--navy)}
@media(max-width:820px){ .steps{grid-template-columns:1fr} }

/* ---------- areas index ---------- */
.areas-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px 64px;margin-top:40px;max-width:880px}
.areas-cols h3{font-size:22px;margin-bottom:12px}
.areas-list{list-style:none;font-size:16.5px;line-height:2.05;color:#3D4C5C;column-count:2;column-gap:40px}
@media(max-width:640px){ .areas-cols{grid-template-columns:1fr} .areas-list{column-count:1} }

/* ---------- market report ---------- */
.report-stats{margin-top:40px;border-top:1px solid var(--navy-line)}
.report-stat{display:grid;grid-template-columns:220px 1fr;gap:8px 40px;padding:24px 0;border-bottom:1px solid var(--navy-line);align-items:baseline}
.report-stat .v{font-family:var(--serif);font-weight:700;font-size:36px;color:#fff;line-height:1.05}
.report-stat .k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);margin-top:6px}
.report-stat p{font-size:16px;color:#C7D2DF;line-height:1.6;max-width:56ch}
@media(max-width:640px){ .report-stat{grid-template-columns:1fr} }
.eo-wrap{margin-top:44px;max-width:460px;background:#fff;border-radius:12px;padding:20px;text-align:left}
.eo-note{margin-top:14px;font-size:13.5px;color:#8FA3B8}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:360px 1fr;gap:64px;align-items:start}
.about-grid img.portrait{width:100%;border-radius:4px;display:block}
.about-grid p{margin-top:16px;font-size:17px;line-height:1.65;max-width:60ch}
.about-grid .sig{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--navy);margin-top:24px}
.about-dre{margin-top:20px;font-size:14px;color:var(--sage);line-height:1.7}
@media(max-width:820px){ .about-grid{grid-template-columns:1fr;gap:32px} .about-grid img.portrait{max-width:300px} }

/* ---------- faq ---------- */
.faq{margin-top:40px;max-width:var(--read)}
.faq details{border-top:1px solid var(--line);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--navy);cursor:pointer;list-style:none;padding-right:24px;min-height:44px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin-top:10px;font-size:16px;color:#3D4C5C;line-height:1.65}

/* ---------- lead forms (SMS handoff) ---------- */
form.lead-form{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:760px}
form.lead-form .full{grid-column:1/-1}
form.lead-form label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--sage);margin-bottom:8px}
form.lead-form input,form.lead-form select,form.lead-form textarea{width:100%;padding:14px 16px;border:1px solid #D8D4C4;background:#fff;color:var(--navy);font-family:var(--sans);font-size:16px;border-radius:10px}
form.lead-form textarea{min-height:120px;resize:vertical}
form.lead-form button{grid-column:1/-1}
.form-consent{grid-column:1/-1;font-size:13px;color:#6E6E73}
.form-note{display:none;grid-column:1/-1;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--gold-dim);padding:8px 0}
.qr-block{grid-column:1/-1;text-align:center;padding-top:24px;border-top:1px solid var(--line)}
.qr-block img{width:140px;height:140px;border:1px solid var(--line);border-radius:10px}
.qr-block p{font-size:13.5px;color:var(--sage);margin-top:10px}
@media(max-width:640px){ form.lead-form{grid-template-columns:1fr} }

/* ---------- portal cards (search) ---------- */
.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.portal-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:30px 26px;text-decoration:none;transition:border-color .2s ease}
.portal-card h3{font-size:25px}
.portal-card p{font-size:15.5px;color:var(--sage);line-height:1.6;margin-top:8px}
.portal-card .go{display:inline-block;margin-top:16px;font-weight:700;font-size:14.5px;color:var(--gold-dim)}
.portal-card:hover{border-color:var(--gold)}
@media(max-width:640px){ .portal-grid{grid-template-columns:1fr} }

/* ---------- page heroes (subpages) ---------- */
.page-hero{padding:168px 24px 88px}
.page-hero h1{font-size:clamp(40px,6vw,68px);line-height:1.06;margin-top:18px;max-width:14em}
.page-hero .lede{margin-top:18px}
.page-hero-navy{background:var(--navy);color:#E6EBF2}
.page-hero-navy h1{color:#fff}
.page-hero-navy h1 em{color:var(--gold-lt)}
.page-hero-ivory{background:var(--ivory)}
.page-hero-ivory h1 em{color:var(--gold-dim)}
@media(max-width:640px){ .page-hero{padding:136px 20px 64px} }

/* ---------- footer ---------- */
footer.site-footer{background:var(--navy-deep);border-top:2px solid var(--gold);padding:64px 24px 48px;text-align:center;color:#C7D2DF}
footer.site-footer img.mark{width:72px;height:72px;margin-bottom:18px}
.footer-name{font-family:var(--serif);font-weight:600;font-size:26px;color:#fff}
.footer-line{font-size:14.5px;margin-top:7px;line-height:1.6}
.footer-links{margin-top:22px;line-height:2.1}
.footer-links a{color:var(--gold-lt);font-size:14.5px;text-decoration:none;margin:0 11px;white-space:nowrap}
.footer-links a:hover{text-decoration:underline}
.footer-eho{font-size:12px;color:#8FA3B8;margin-top:28px;letter-spacing:.05em;line-height:1.7}

/* ---------- sticky mobile valuation bar ---------- */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--navy-deep);border-top:1px solid var(--gold);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:none;align-items:center;gap:12px;transform:translateY(110%);transition:transform .3s ease}
.sticky-bar.show{transform:translateY(0)}
.sticky-bar a{flex:1}
.sticky-bar .dismiss{background:none;border:0;color:#C7D2DF;font-size:22px;line-height:1;padding:10px;cursor:pointer;min-width:44px;min-height:44px}
@media(max-width:760px){ .sticky-bar{display:flex} }

/* ---------- motion: one reveal + fades, restrained ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .sticky-bar{transition:none}
}