/* ===================================================================
   Olmo Realty — shared stylesheet
   Palette: pine #1F3D2B, parchment #F1EEE4, brass #B08D57, brick #8C3A2B
   Display: "Fraunces" (colonial/historic character, used with restraint)
   Body: "Inter"
   Signature: "mile marker" strip — nods to the real colonial-era stone
   mile markers still found along old Morris County roads.
   =================================================================== */

:root{
  --pine:#1F3D2B;
  --pine-dark:#132A1D;
  --parchment:#F1EEE4;
  --parchment-dim:#E8E3D4;
  --brass:#B08D57;
  --brick:#8C3A2B;
  --ink:#20241F;
  --line: rgba(32,36,31,0.14);
  --radius: 2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.55;
}

h1,h2,h3,.display{
  font-family:"Fraunces",Georgia,serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--pine-dark);
  margin:0 0 0.4em 0;
}

a{color:inherit;}
img{max-width:100%;display:block;}

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

/* ---------- header ---------- */
header.site{
  background:var(--pine);
  color:var(--parchment);
  padding:18px 0;
  position:sticky; top:0; z-index:40;
  border-bottom:1px solid rgba(241,238,228,0.15);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{
  font-family:"Fraunces",serif;
  font-weight:600;
  font-size:1.25rem;
  color:var(--parchment);
  text-decoration:none;
  letter-spacing:-0.01em;
}
.brand small{display:block;font-family:"Inter",sans-serif;font-weight:400;font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--brass);margin-top:2px;}
nav.main a{
  color:var(--parchment);
  text-decoration:none;
  font-size:0.88rem;
  margin-left:22px;
  opacity:0.85;
}
nav.main a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px;}
.btn-call{
  background:var(--brass);
  color:var(--pine-dark);
  padding:8px 16px;
  border-radius:var(--radius);
  font-size:0.85rem;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}

/* ---------- mile marker strip (signature element) ---------- */
.mile-strip{
  background:var(--pine-dark);
  overflow-x:auto;
  white-space:nowrap;
  border-bottom:3px solid var(--brass);
}
.mile-strip .wrap{display:flex;padding:0;gap:0;}
.mile-strip a{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  padding:10px 18px;
  color:rgba(241,238,228,0.75);
  text-decoration:none;
  font-size:0.78rem;
  border-right:1px solid rgba(241,238,228,0.12);
  flex-shrink:0;
}
.mile-strip a .mm{
  font-family:"Fraunces",serif;
  font-size:0.95rem;
  color:var(--brass);
}
.mile-strip a.active,.mile-strip a:hover{color:var(--parchment);background:rgba(176,141,87,0.15);}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(180deg,var(--pine) 0%, var(--pine) 55%, var(--parchment) 55%);
  padding:64px 0 0 0;
}
.hero-card{
  background:var(--parchment);
  border:1px solid var(--line);
  padding:40px;
  box-shadow:0 24px 48px -24px rgba(19,42,29,0.35);
}
.eyebrow{
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--brick);
  font-weight:600;
  margin-bottom:10px;
}
.hero h1{font-size:2.6rem;max-width:14ch;}
.hero p.lede{font-size:1.08rem;max-width:52ch;color:#3a3f36;}

/* ---------- forms ---------- */
.lead-form{
  background:#fff;
  border:1px solid var(--line);
  padding:28px;
  display:grid;
  gap:12px;
}
.lead-form h3{margin-bottom:4px;}
.lead-form .sub{font-size:0.88rem;color:#565b50;margin-bottom:10px;}
.lead-form input,.lead-form select{
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-family:inherit;
  font-size:0.95rem;
  background:var(--parchment);
}
.lead-form button{
  background:var(--brick);
  color:#fff;
  border:none;
  padding:14px 20px;
  font-size:0.95rem;
  font-weight:600;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background 0.15s;
}
.lead-form button:hover{background:#6f2c1f;}
.lead-form .fine{font-size:0.72rem;color:#7a7f74;}

/* ---------- sections ---------- */
section{padding:56px 0;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px;}
.section-head .tag{font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--brass);font-weight:700;}

.grid{display:grid;gap:20px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:860px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr;} .hero h1{font-size:2rem;}}

.card{
  background:#fff;
  border:1px solid var(--line);
  padding:22px;
  opacity:0;
  transform:translateY(10px);
  animation:rise 0.5s ease forwards;
}
.card:nth-child(2){animation-delay:0.06s;}
.card:nth-child(3){animation-delay:0.12s;}
@keyframes rise{to{opacity:1;transform:none;}}

.card .stat{font-family:"Fraunces",serif;font-size:1.6rem;color:var(--pine-dark);}
.card .label{font-size:0.78rem;color:#6a6f63;text-transform:uppercase;letter-spacing:0.06em;}

.pill{
  display:inline-block;
  font-size:0.72rem;
  padding:4px 10px;
  border:1px solid var(--brass);
  color:var(--brick);
  border-radius:20px;
  margin:2px 6px 2px 0;
  text-decoration:none;
}
.pill:hover{background:var(--brass);color:#fff;}

.band{background:var(--pine);color:var(--parchment);}
.band h2{color:var(--parchment);}
.band .lede{color:rgba(241,238,228,0.8);}

footer.site{
  background:var(--pine-dark);
  color:rgba(241,238,228,0.6);
  padding:34px 0;
  font-size:0.82rem;
}
footer.site a{color:rgba(241,238,228,0.8);}

.breadcrumb{font-size:0.78rem;color:#6a6f63;margin-bottom:18px;}
.breadcrumb a{color:var(--brick);text-decoration:none;}

/* ---------- broker compliance bar ---------- */
/* N.J.A.C. 11:5-6.1(b) requires salesperson advertising to include the
   licensee's own name and the broker's regular business name; (d)(2)
   requires the broker's phone (since this site isn't linked directly to
   the broker's own site) to appear in wording as large as the page's
   predominant body text — not buried as small print. */
.broker-bar{
  background:var(--parchment-dim);
  border-bottom:1px solid var(--line);
  padding:10px 0;
  font-size:0.92rem;
  color:var(--ink);
}
.broker-bar .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;}
.broker-bar a{color:var(--brick);text-decoration:none;font-weight:600;}
.equal-housing{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.78rem;
  color:rgba(241,238,228,0.75);
  margin-top:10px;
}
.equal-housing .eh-icon{
  width:16px;height:16px;
  border:1.5px solid currentColor;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0.6rem;font-weight:700;flex-shrink:0;
}

@font-face{font-family:"Fraunces";src:local("Georgia");}