/* ============================================
   Sonomarin Home Buyers — Shared Site Stylesheet
   Brand system locked September 2026.
   Edit colors, type, and shared components here —
   changes apply across every page that links this file.
   ============================================ */

:root{
  --blue:#275E8A;
  --gold:#F2C14E;
  --ink:#173954;
  --paper:#F6F3EC;
  --rule:#D9D3C6;
  --muted:#5C6B78;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', Georgia, serif;
  line-height:1.6;
}

h1,h2,h3,nav,.eyebrow,.badge,.btn,label,.field-note{
  font-family:'Jost', sans-serif;
}

a{ color:var(--blue); }

.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }

/* ---------- Header / Nav ---------- */
header{
  background:var(--blue);
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
header img.logo{ height:38px; display:block; }
header nav a{
  color:#fff;
  text-decoration:none;
  margin-left:22px;
  font-size:15px;
  font-weight:400;
}
header nav a:first-child{ margin-left:0; }

.crumb{
  max-width:1080px; margin:20px auto 0; padding:0 24px;
  font-family:'Jost',sans-serif; font-size:13px; color:var(--muted);
}
.crumb a{ color:var(--muted); }

/* ---------- Buttons & Badges ---------- */
.btn{
  display:inline-block;
  background:var(--gold);
  color:var(--ink);
  text-decoration:none;
  padding:13px 26px;
  border-radius:2px;
  font-weight:500;
  font-size:15px;
  border:none;
  cursor:pointer;
  text-align:center;
}
.btn-outline{
  display:inline-block;
  background:transparent;
  color:#fff;
  text-decoration:none;
  padding:12px 25px;
  border-radius:2px;
  border:1px solid rgba(255,255,255,.5);
  font-weight:500;
  font-size:15px;
}
.badge{
  display:inline-block;
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--ink);
  background:var(--gold);
  padding:5px 12px;
  border-radius:2px;
}

/* ---------- Dark panel (the "one bold element") ---------- */
.panel{
  background:var(--blue);
  color:#fff;
  border-radius:2px;
  padding:32px 28px;
}
.panel h1, .panel h2, .panel h3{ color:#fff; }
.panel dl{ margin:0 0 24px; padding-top:16px; border-top:1px solid rgba(255,255,255,.25); }
.panel dl div{
  display:flex; justify-content:space-between; padding:7px 0;
  font-family:'Jost',sans-serif; font-size:14.5px;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.panel dl dt{ color:#cfe0ee; }
.panel dl dd{ margin:0; text-align:right; }

/* ---------- Typographic lists (no icon grids) ---------- */
.divided-list{ list-style:none; margin:0; padding:0; max-width:64ch; }
.divided-list li{ padding:14px 0; border-top:1px solid var(--rule); font-size:16px; }
.divided-list li:last-child{ border-bottom:1px solid var(--rule); }
.divided-list strong{ font-family:'Jost',sans-serif; font-weight:500; }

.note{
  margin-top:24px; padding:18px 20px; border-left:3px solid var(--gold);
  background:rgba(242,193,78,.12); font-size:15px; max-width:64ch;
}

/* ---------- Body copy sections ---------- */
main{ max-width:1080px; margin:0 auto; padding:20px 24px 80px; }
section{ margin-top:56px; max-width:64ch; }
section h2{ font-size:22px; font-weight:500; margin:0 0 16px; }
section p{ font-size:17px; margin:0 0 16px; }

/* ---------- Forms ---------- */
form label{ display:block; font-size:13px; margin:0 0 6px; color:var(--muted); }
form input, form textarea{
  width:100%; padding:11px 12px; margin-bottom:16px; border:1px solid var(--rule);
  border-radius:2px; font-family:'Source Serif 4', serif; font-size:15px;
  background:#fff; color:var(--ink);
}
form textarea{ min-height:90px; resize:vertical; }
.honeypot{ position:absolute; left:-9999px; opacity:0; }

/* ---------- Footer ---------- */
footer{ background:var(--ink); color:#cfd8e0; padding:36px 24px; font-size:14px; margin-top:70px; }
footer .wrap{ max-width:1080px; margin:0 auto; }
footer a{ color:#fff; }
footer .legal{ margin-top:16px; color:#98a7b3; font-size:12.5px; max-width:70ch; }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .hero{ grid-template-columns:1fr; }
}