/* Spectrum Health Agency — shared styles */
:root{
  --ink:#16273D;
  --navy:#1F3A5F;
  --blue:#2E6FB7;
  --clay:#BE7A45;
  --clay-dark:#A2652F;
  --surface:#FBFBF8;
  --panel:#EEF3F8;
  --line:#DCE4EE;
  --muted:#586577;
  --spectrum:linear-gradient(90deg,#5BA6A0,#4E84C4,#6E6FB0,#B98AB0,#D49A6A);
  --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--blue); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

.skip{position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:10px 16px; border-radius:6px; z-index:100;}
.skip:focus{left:12px; top:12px;}

/* header / nav */
header.site{position:sticky; top:0; z-index:50; background:rgba(251,251,248,.92); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);}
.bar{display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:16px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand:hover{text-decoration:none;}
.mark{flex:0 0 auto;}
.wordmark{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1.32rem; color:var(--navy); letter-spacing:.1px; line-height:1; white-space:nowrap;}
.wordmark small{display:block; font-family:"IBM Plex Sans",sans-serif; font-weight:500; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:4px;}
nav.top{display:flex; align-items:center; gap:8px;}
nav.top a{font-weight:500; color:var(--navy); padding:9px 14px; border-radius:8px; font-size:.97rem; text-decoration:none;}
nav.top a:hover{text-decoration:none;}
nav.top a.contact{color:var(--navy);}
nav.top a.contact:hover{background:var(--panel);}
nav.top a.invest{border:1px solid var(--line);}
nav.top a.invest:hover{background:var(--panel);}
nav.top a.families{background:var(--clay); color:#fff;}      /* primary action: get patients */
nav.top a.families:hover{background:var(--clay-dark);}

/* hero */
.hero{padding:88px 0 64px; position:relative; overflow:hidden;}
.eyebrow{font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--clay-dark);}
.hero h1{font-family:"Fraunces",Georgia,serif; font-weight:500; color:var(--navy);
  font-size:clamp(2.3rem,5.4vw,3.7rem); line-height:1.08; margin:.5rem 0 0; letter-spacing:-.5px; max-width:17ch;}
.hero h1 .u{position:relative; white-space:nowrap;}
.hero h1 .u::after{content:""; position:absolute; left:0; right:0; bottom:.04em; height:.16em; border-radius:3px; background:var(--spectrum); opacity:.85;}
.lede{font-size:1.18rem; color:#374a60; max-width:56ch; margin:1.4rem 0 0;}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:2rem;}
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:1rem; padding:13px 22px; border-radius:10px; cursor:pointer; border:1px solid transparent; text-decoration:none;}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--clay); color:#fff;}
.btn-primary:hover{background:var(--clay-dark);}
.btn-ghost{background:#fff; color:var(--navy); border-color:var(--line);}
.btn-ghost:hover{background:var(--panel);}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:#16314f;}

/* generic section heading */
.sec-head{max-width:62ch;}
.sec-head h2{font-family:"Fraunces",serif; font-weight:500; color:var(--navy); font-size:clamp(1.6rem,3.2vw,2.2rem); margin:0; letter-spacing:-.3px;}
.sec-head p{color:#4b5a6d; margin:.6rem 0 0;}

/* cards */
section.serve{padding:34px 0 18px;}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px;}
.card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 24px;}
.card .ic{width:40px; height:40px; border-radius:10px; background:var(--panel); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.card h3{margin:0 0 8px; font-size:1.14rem; color:var(--navy); font-weight:600;}
.card p{margin:0; color:#4b5a6d; font-size:.98rem;}

/* numbered steps (real sequence) */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px;}
.step{background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px;}
.step .n{width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff; font-weight:600; display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:1rem;}
.step h3{margin:0 0 6px; font-size:1.1rem; color:var(--navy);}
.step p{margin:0; color:#4b5a6d; font-size:.97rem;}

/* checklist */
.checklist{list-style:none; padding:0; margin:24px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:12px 28px;}
.checklist li{position:relative; padding-left:30px; color:#3c4d62;}
.checklist li::before{content:""; position:absolute; left:0; top:.45em; width:16px; height:16px; border-radius:50%; background:var(--panel);
  box-shadow:inset 0 0 0 2px var(--blue);}
.checklist li::after{content:""; position:absolute; left:5px; top:.62em; width:6px; height:3px; border-left:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:rotate(-45deg);}

/* dark band */
.band{margin:60px 0; background:var(--navy); color:#eaf1f8; border-radius:18px; padding:48px 40px; position:relative; overflow:hidden;}
.band::before{content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--spectrum);}
.band h2{font-family:"Fraunces",serif; font-weight:500; font-size:clamp(1.6rem,3.4vw,2.25rem); margin:0; color:#fff; letter-spacing:-.3px;}
.band p{margin:1rem 0 0; max-width:62ch; color:#cdddee; font-size:1.06rem;}

/* contact */
section.contact{padding:24px 0 80px;}
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:start;}
.contact-grid h2{font-family:"Fraunces",serif; font-weight:500; color:var(--navy); font-size:clamp(1.7rem,3.4vw,2.3rem); margin:0; letter-spacing:-.3px;}
.contact-grid .intro{color:#4b5a6d; margin:.8rem 0 0;}
.contact-grid .detail{margin-top:22px; font-size:.97rem; color:#4b5a6d;}
.contact-grid .detail strong{color:var(--navy); display:block; font-weight:600;}
form.card-form{background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px;}
.field{margin-bottom:18px;}
.field label{display:block; font-weight:600; font-size:.92rem; color:var(--navy); margin-bottom:7px;}
.field .opt{font-weight:400; color:#8a96a5;}
.field .req{color:var(--clay-dark);}
.field input, .field textarea, .field select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:9px; font:inherit; color:var(--ink); background:var(--surface);}
.field input:focus, .field textarea:focus, .field select:focus{outline:3px solid rgba(46,111,183,.28); outline-offset:1px; border-color:var(--blue); background:#fff;}
.field textarea{min-height:130px; resize:vertical;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
form.card-form .btn-primary{width:100%; justify-content:center; margin-top:4px;}
.formnote{font-size:.82rem; color:var(--muted); margin:14px 0 0; text-align:center;}

a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid rgba(46,111,183,.45); outline-offset:2px; border-radius:8px;}

/* footer */
footer.site{border-top:1px solid var(--line); background:#fff;}
.foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding:26px 0; color:var(--muted); font-size:.9rem;}
.foot .fbrand{font-family:"Fraunces",serif; color:var(--navy); font-weight:600;}
.foot a{color:var(--muted);}

/* reveal */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

@media (max-width:820px){
  .cards, .steps{grid-template-columns:1fr;}
  .checklist{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr; gap:28px;}
  .hero{padding:60px 0 44px;}
  .wordmark small{display:none;}
  nav.top a{padding:8px 11px; font-size:.92rem;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
}