/* /public/styles.css */

/* ---------- Base ---------- */
:root{--fg:#0f172a;--muted:#475569;--line:rgba(15,23,42,.10);--bg:#fff;--bg-alt:#f1f5f9;--brand:#42486a;--brand-hi:#515781;--accent:#2b7de9;--lg:56px}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg);line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.narrow{max-width:820px;margin:0 auto}
section{padding-block:var(--lg);border-bottom:1px solid var(--line)}
h1,h2,h3{margin:0 0 .5rem;text-align:center}
.subtitle,.lead,.note{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1rem;border-radius:10px;border:1px solid transparent;font-weight:800;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary[disabled]{opacity:.85;cursor:default}

/* ---------- Header (base styles; final fix added at bottom) ---------- */
.header{background:linear-gradient(180deg,var(--brand-hi),var(--brand));color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}
.brand-row{display:flex;align-items:center;gap:.7rem}
.logo{width:32px;height:32px;border-radius:6px}
.brand{line-height:1.2}
.brand strong{font-weight:900;display:block;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.28);font-size:1.1rem}
.brokerage,.phone{display:block;color:#fff;opacity:.98;text-shadow:0 1px 1px rgba(0,0,0,.25);font-size:.98rem}
.phone:hover{text-decoration:underline}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--bg-alt);overflow:hidden;min-height:420px}
.hero::before{content:"";position:absolute;inset:0;background:url("./images/shmap.png") center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(66,72,106,.16),transparent)}
.hero-content{position:relative;z-index:1;padding-block:70px;text-align:center}
.hero .eyebrow{display:inline-block;padding:.5rem 1rem;border:1px solid rgba(255,255,255,.5);border-radius:999px;font-size:clamp(1.2rem,1.05rem + 1vw,1.6rem);font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(17,24,39,.18);backdrop-filter:saturate(140%) blur(1.5px);margin:0 auto 1rem}
.hero h1{font-size:clamp(2.2rem,1.5rem + 3vw,3.2rem);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.28)}
.hero .subtitle{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);text-align:center}

/* ---------- Centering fixes ---------- */
.narrative-section .narrow{text-align:center}
.narrative-section .narrow p,.narrative-section .narrow .lead{margin-left:auto;margin-right:auto}
.market-note{text-align:center}
.section-center .container .lead{text-align:center}
.why-start .narrow{text-align:center}
.why-start .narrow p{margin-left:auto;margin-right:auto}

/* ---------- Checklist ---------- */
.checklist{list-style:none;padding:0;margin:1rem auto 1.25rem;max-width:720px;text-align:center}
.checklist li{display:inline-block;text-align:left;position:relative;padding-left:2rem;margin:.35rem 0;font-weight:700}
.checklist li::before{content:"";position:absolute;left:0;top:.15rem;width:1.2rem;height:1.2rem;border-radius:50%;background:linear-gradient(180deg,#2d8a5d,#207a7a);box-shadow:0 0 0 2px rgba(45,138,93,.18)}
.checklist li::after{content:"";position:absolute;left:.35rem;top:.45rem;width:.5rem;height:.25rem;border:3px solid #fff;border-top:none;border-right:none;transform:rotate(-45deg)}

/* ---------- Tiles (How Buyers Quietly Sort) ---------- */
.news-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}
@media (max-width:900px){.news-cards{grid-template-columns:1fr}}
.news-card{border:1px solid rgba(15,23,42,.14);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;min-height:400px;box-shadow:0 8px 20px rgba(2,6,23,.08);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.news-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(2,6,23,.12);border-color:rgba(15,23,42,.22)}
.card-media{position:relative;height:190px;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover}
.media-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 20%, rgba(0,0,0,.35) 100%)}
.title-band{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;padding:.7rem .95rem;color:#fff;border-top:1px solid rgba(255,255,255,.18)}
.title-band h3{margin:0;font-size:1.28rem;font-weight:900;letter-spacing:.01em;text-align:left}
.card-body{padding:1rem}
.location{margin:.1rem 0 .35rem;font-weight:800;color:#0f172a;text-align:left}
.excerpt{margin:0;color:#334155;text-align:left}
.card-meta{margin-top:auto;display:flex;justify-content:space-between;gap:.5rem;align-items:center;padding:.7rem 1rem;border-top:1px solid rgba(15,23,42,.08);background:rgba(236,244,255,.8)}
.meta-item{font-size:.98rem;color:#0f172a}

/* ---------- Lanes (Condition tiers) ---------- */
.lanes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;margin-top:1rem}
@media (max-width:1100px){.lanes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.lanes{grid-template-columns:1fr 1fr}}
.lane-card{border:1px solid var(--line);border-radius:12px;padding:.9rem;background:#fff;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.lane-icon{width:28px;height:28px;color:#4f77a3}
.lane-icon svg{width:100%;height:100%}

/* ---------- Why Start Here ---------- */
.why-start{background:#f8fafc;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why-start .narrow p{margin:.65rem 0}
.why-qs{list-style:none;padding:0;margin:.4rem auto 1rem;max-width:720px;text-align:center}
.why-qs li{display:inline-block;text-align:left;position:relative;padding-left:1.25rem;margin:.25rem .75rem;font-weight:600}
.why-qs li::before{content:"";position:absolute;left:0;top:0.9em;width:.45rem;height:.45rem;border-radius:50%;background:#2d8a5d;transform:translateY(-50%)}

/* ---------- Form ---------- */
.form-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:900px;margin:0 auto;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.form-card__header{background:linear-gradient(180deg,var(--brand-hi),var(--brand));color:#fff;padding:16px 18px}
.form-card__header h3{margin:0;font-weight:900}
.form-card__body{background:#eef2f6;padding:18px;position:relative}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:720px){.grid-2{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-weight:700}
.field .req{color:#b91c1c}
input[type="text"],input[type="email"],input[type="tel"],textarea{width:100%;padding:.65rem .7rem;border-radius:8px;border:1px solid #cbd5e1;background:#e5e7eb;font:inherit;outline:none}
input:focus,textarea:focus{border-color:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.25)}
.checkbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .75rem;margin-top:.35rem;text-align:left}
@media (max-width:720px){.checkbox-grid{grid-template-columns:1fr}}
.cb{display:flex;align-items:flex-start;gap:.5rem}
.cb input{margin-top:.2rem}
.actions{display:flex;flex-direction:column;gap:.45rem;margin-top:1rem;align-items:center;justify-content:center;text-align:center}
.actions .btn{min-width:260px}
@media (max-width:720px){.actions .btn{width:100%;max-width:480px}}
.tiny{font-size:.85rem;color:#64748b;text-align:center}
.tiny.success{color:#0f5132}
.tiny.error{color:#9b1c1c}
.error-detail{white-space:pre-wrap;background:#fff;border:1px dashed rgba(15,23,42,.2);padding:.6rem;border-radius:8px;color:#0f172a;max-width:780px;margin:0 auto;display:none}

/* ---------- Honeypot (bots still see it) ---------- */
.hp{position:absolute !important;left:-99999px !important;width:1px;height:1px;overflow:hidden;white-space:nowrap}

/* ---------- Footer ---------- */
.footer{text-align:center;padding:18px;background:#f2f2f2;font-size:.95rem;color:#334155}

/* =========================================================
   FINAL HEADER FIX (replaces any previous “overlay fix” code)
   ========================================================= */
/* 1) Page offset for fixed header height */
:root { --header-h: 72px; }     /* adjust if your header is taller */
body { padding-top: var(--header-h); }

/* 2) Pin header above everything with opaque bg */
.header{
  position: fixed;              /* force above hero in all browsers */
  top: 0; left: 0; right: 0;
  z-index: 100000;              /* win every stacking context */
  isolation: isolate;           /* new stacking context */
  background-image: linear-gradient(180deg, var(--brand-hi), var(--brand)) !important;
  background-color: #42486a !important;     /* solid fallback */
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

/* 3) Ensure header row matches height */
.header-inner{
  min-height: var(--header-h);
  align-items: center;
}

/* 4) Keep hero overlays behind content + header */
.hero{ position: relative; z-index: 0; }
.hero::before,
.hero::after{
  z-index: -1;
  pointer-events: none;
}

/* 5) Force header text fully opaque */
.header .brand strong,
.header .brokerage,
.header .phone{
  opacity: 1 !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

/* 6) If HubSpot injects a cookie banner, keep it below header */
#hs-eu-cookie-confirmation,
.hs-cookie-notification-position{
  z-index: 9998 !important;
}

/* 7) Safari/Edge stability */
.header{ will-change: transform; backface-visibility: hidden; }