/* LeadHerd — dusk prairie
   ink slate night sky · wheat gold brand · leather accents · paper daylight */

:root{
  --ink:      #212936;
  --dusk:     #2F3B4F;
  --wheat:    #E2A63D;
  --wheat-soft:#F0C878;
  --paper:    #F7F5F0;
  --white:    #FFFDF9;
  --text:     #272C33;
  --text-dim: #5A6270;
  --leather:  #8A5A33;
  --line:     #E3DFD6;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Source Sans 3", system-ui, sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.6;
  font-size:17px;
}
h1,h2,h3{ font-family:"Zilla Slab", Georgia, serif; line-height:1.12; }
.mono{ font-family:"IBM Plex Mono", monospace; font-size:.78rem; letter-spacing:.04em; }
a{ color:var(--leather); }
img{ max-width:100%; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }

/* ---------- top bar ---------- */
.topbar{
  position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px;
}
.brandmark{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.iron{
  font-family:"Zilla Slab", serif; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:2.5px solid var(--wheat); border-radius:50%;
  color:var(--wheat); font-size:1.05rem; letter-spacing:.02em;
  transform:rotate(-6deg);
}
.iron.small{ width:30px; height:30px; font-size:.78rem; border-width:2px; margin-right:8px; vertical-align:middle; }
.brandname{ font-family:"Zilla Slab", serif; font-weight:700; font-size:1.35rem; color:var(--white); }
.topnav a{
  color:#C8CEDA; text-decoration:none; margin-left:26px; font-weight:600; font-size:.95rem;
}
.topnav a:hover{ color:var(--wheat-soft); }

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(178deg, var(--ink) 0%, var(--dusk) 78%, #3A4A63 100%);
  color:var(--white);
  padding:130px 0 90px;
  overflow:hidden;
}
.hero-inner{
  max-width:1080px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
}
.eyebrow{ color:var(--wheat-soft); font-weight:600; margin-bottom:18px; }
.eyebrow .mono{ background:rgba(226,166,61,.14); border:1px solid rgba(226,166,61,.4);
  padding:3px 8px; border-radius:4px; margin-right:8px; color:var(--wheat); }
.hero h1{
  font-size:clamp(3rem, 6.5vw, 4.8rem); font-weight:700; letter-spacing:-.01em;
  margin-bottom:22px;
}
.hero h1 em{ font-style:italic; color:var(--wheat); }
.lede{ font-size:1.18rem; color:#D4D9E2; max-width:34em; margin-bottom:30px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.btn{
  display:inline-block; padding:13px 26px; border-radius:6px; font-weight:700;
  text-decoration:none; font-size:1rem; border:2px solid transparent;
}
.btn-gold{ background:var(--wheat); color:var(--ink); }
.btn-gold:hover{ background:var(--wheat-soft); }
.btn-ghost{ border-color:#5B6B85; color:var(--white); }
.btn-ghost:hover{ border-color:var(--wheat); color:var(--wheat-soft); }
.hero-fine{ color:#9AA4B5; font-size:.9rem; }

/* ---------- the phone (signature) ---------- */
.phone{
  background:#FCFAF6; color:var(--text);
  border-radius:18px; padding:18px 16px 14px;
  box-shadow:0 24px 60px rgba(10,14,22,.45), 0 0 0 1px rgba(255,255,255,.08);
  max-width:360px; justify-self:end; width:100%;
}
.phone-head{
  display:flex; justify-content:space-between; color:var(--text-dim);
  border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:12px;
}
.phone-time{ color:var(--leather); }
.thread{ display:flex; flex-direction:column; gap:9px; }
.msg{
  max-width:82%; padding:9px 13px; border-radius:14px; font-size:.92rem; line-height:1.45;
  opacity:0; animation:pop .5s ease forwards;
}
.msg.them{ background:#ECE8DF; border-bottom-left-radius:4px; align-self:flex-start; }
.msg.us{ background:var(--ink); color:#F3EFE7; border-bottom-right-radius:4px; align-self:flex-end; }
.phone-foot{
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line);
  color:var(--leather); text-align:center;
  opacity:0; animation:pop .5s ease forwards;
}
@keyframes pop{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.delay-1{ animation-delay:.3s } .delay-2{ animation-delay:1.1s }
.delay-3{ animation-delay:1.9s } .delay-4{ animation-delay:2.7s }
.delay-5{ animation-delay:3.5s } .delay-6{ animation-delay:4.3s }
.delay-7{ animation-delay:5.2s }
@media (prefers-reduced-motion: reduce){
  .msg,.phone-foot{ animation:none; opacity:1; }
  html{ scroll-behavior:auto; }
}

/* ---------- cost strip ---------- */
.cost{ background:var(--wheat); color:var(--ink); padding:44px 0; }
.cost-inner{ max-width:820px; }
.cost-line{ font-family:"Zilla Slab", serif; font-size:1.35rem; line-height:1.5; }
.cost-line.strong{ font-weight:700; margin-top:10px; }

/* ---------- sections ---------- */
section h2{
  font-size:2rem; font-weight:700; margin-bottom:34px; display:flex; align-items:center; gap:16px;
}
.rule{ display:inline-block; width:44px; height:3px; background:var(--wheat); border-radius:2px; }

.how{ padding:78px 0; background:var(--white); }
.steps{ list-style:none; counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.steps li{ counter-increment:step; padding-top:14px; border-top:1px solid var(--line); position:relative; }
.steps li::before{
  content:counter(step);
  font-family:"Zilla Slab", serif; font-weight:700; font-size:.95rem;
  position:absolute; top:-14px; left:0;
  width:28px; height:28px; border-radius:50%;
  background:var(--ink); color:var(--wheat);
  display:flex; align-items:center; justify-content:center;
}
.steps h3{ font-size:1.22rem; margin:16px 0 8px; }
.steps p{ color:var(--text-dim); font-size:.98rem; }
.how-note{
  margin-top:36px; padding:16px 20px; background:var(--paper); border-left:3px solid var(--wheat);
  color:var(--text-dim); font-size:.98rem; border-radius:0 8px 8px 0;
}

.who{ padding:78px 0; background:var(--paper); }
.who-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.who-card{
  background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px;
}
.who-card h3{ font-size:1.35rem; margin-bottom:12px; color:var(--ink); }
.who-card p{ color:var(--text-dim); }
.who-tag{ margin-top:16px; color:var(--leather); }
.who-more{ margin-top:26px; color:var(--text-dim); }

.about{ padding:78px 0; }
.about-inner p{ max-width:48em; color:var(--text-dim); margin-bottom:16px; }

.contact{ background:var(--ink); color:var(--white); padding:80px 0; }
.contact h2{ font-size:2.3rem; }
.contact > .wrap > p, .contact-inner > p{ color:#C8CEDA; max-width:38em; margin-bottom:34px; }
.contact-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ccard{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:20px; display:flex; flex-direction:column; gap:6px;
}
.clabel{ color:var(--wheat); }
.ccard a{ color:var(--white); text-decoration:none; font-weight:600; }
.ccard a:hover{ color:var(--wheat-soft); }
.ccard span:not(.clabel){ font-weight:600; }

/* ---------- footer ---------- */
.footer{ background:#1A212C; color:#9AA4B5; padding:38px 0; font-size:.9rem; }
.footer-inner{ display:flex; flex-direction:column; gap:14px; }
.footer-brand{ font-family:"Zilla Slab", serif; font-weight:700; color:var(--white); }
.footer-nav a{ color:#C8CEDA; margin-right:22px; }
.footer-fine{ color:#6B7484; font-size:.82rem; max-width:60em; }

/* ---------- legal pages ---------- */
.legal{ max-width:760px; margin:0 auto; padding:130px 24px 80px; }
.legal h1{ font-size:2.4rem; margin-bottom:8px; }
.legal .updated{ color:var(--text-dim); font-size:.9rem; margin-bottom:36px; }
.legal h2{ font-size:1.35rem; margin:34px 0 12px; display:block; }
.legal p, .legal li{ color:var(--text-dim); margin-bottom:12px; }
.legal ul{ padding-left:22px; }
.legal .highlight{
  background:var(--paper); border-left:3px solid var(--wheat);
  padding:16px 20px; border-radius:0 8px 8px 0; color:var(--text);
}
.legal-topbar{ background:var(--ink); position:fixed; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero-inner{ grid-template-columns:1fr; gap:44px; }
  .phone{ justify-self:center; }
  .steps{ grid-template-columns:1fr; gap:40px; }
  .who-grid{ grid-template-columns:1fr; }
  .contact-cards{ grid-template-columns:1fr; }
  .topnav{ display:none; }
}