/* NorthStar Healing Center — brand stylesheet
   Palette derived from the clinic logo. */

:root{
  --ink:#2E2A3C;        /* deep plum-navy: headings */
  --body:#403B4E;       /* body text on cream */
  --muted:#6F6979;      /* secondary text */
  --cream:#F7F2EA;      /* page background */
  --shell:#EFE7D9;      /* alternate section band */
  --card:#FBF8F2;       /* cards */
  --line:#E5DBCA;       /* hairlines */
  --sage:#7E9488;       /* sage accent */
  --sage-deep:#516560;  /* sage CTA bg (white text) */
  --plum:#947B8D;       /* mauve accent */
  --plum-deep:#675A74;  /* plum CTA bg (white text) */
  --star:#9A7E92;       /* north-star motif */
  --maxw:1120px;
  --r:14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  background:var(--cream);
  color:var(--body);
  font-family:"Mulish",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:"Cormorant Garamond",Georgia,serif;
  color:var(--ink);
  font-weight:600;
  line-height:1.12;
  letter-spacing:.2px;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.7rem,6vw,4.3rem);font-weight:500;}
h2{font-size:clamp(2.1rem,4vw,3rem);}
h3{font-size:clamp(1.5rem,2.4vw,1.9rem);}
p{margin:0 0 1.1rem;}
a{color:var(--plum-deep);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;}
.section{padding:58px 0;}
.section--shell{background:var(--shell);}
.section--tight{padding:42px 0;}
.section--plum{
  background:linear-gradient(155deg,#6E5F7B,#564A67);
  color:#F1ECF2;
}
.section--plum h2{color:#fff;}
.section--plum .lead-p{color:rgba(255,255,255,.92);}
.section--plum .eyebrow{color:#D9CBDD;}
.section--plum .eyebrow .star{fill:#D9CBDD;}

/* ---- star motif ---- */
.star{display:inline-block;width:1em;height:1em;fill:var(--star);vertical-align:-.12em;}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:"Mulish",sans-serif;
  text-transform:uppercase;letter-spacing:.22em;
  font-size:.74rem;font-weight:700;color:var(--sage-deep);
  margin:0 0 1rem;
}
.eyebrow .star{fill:var(--sage-deep);width:.85em;height:.85em;}
.divider{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto;color:var(--line);}
.divider::before,.divider::after{content:"";height:1px;width:min(120px,18vw);background:var(--line);}
.divider .star{fill:var(--star);width:16px;height:16px;}

/* ---- buttons ---- */
.btn{
  display:inline-block;font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:.85em 1.6em;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  text-decoration:none;
}
.btn:hover{text-decoration:none;transform:translateY(-1px);}
.btn--primary{background:var(--sage-deep);color:#fff;box-shadow:0 6px 18px rgba(81,101,96,.22);}
.btn--primary:hover{background:#445650;}
.btn--plum{background:var(--plum-deep);color:#fff;box-shadow:0 6px 18px rgba(103,90,116,.2);}
.btn--plum:hover{background:#574a64;}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn--ghost:hover{border-color:var(--sage);background:#fff;}
.nav-links a.btn{color:#fff;}
.nav-links a.btn:hover{color:#fff;text-decoration:none;}

/* ---- header ---- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,242,234,.86);backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 26px;max-width:1240px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:11px;}
.brand img{height:42px;width:auto;}
.brand .wordmark{font-family:"Cormorant Garamond",serif;line-height:1;}
.brand .wordmark b{display:block;font-size:1.42rem;font-weight:600;color:var(--ink);letter-spacing:.3px;}
.brand .wordmark span{display:block;font-family:"Mulish",sans-serif;font-size:.58rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--sage-deep);margin-top:3px;}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.nav-links a{color:var(--ink);font-weight:600;font-size:.93rem;}
.nav-links a:hover{color:var(--plum-deep);text-decoration:none;}
.nav-cta{margin-left:4px;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.25s;}

@media (max-width:900px){
  .nav-toggle{display:block;}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:4px;background:var(--cream);border-bottom:1px solid var(--line);
    padding:14px 26px 22px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:.2s;
  }
  .nav-links.open{transform:none;opacity:1;pointer-events:auto;}
  .nav-links li{width:100%;}
  .nav-links li.nav-cta{width:auto;}
  .nav-links a{display:block;padding:10px 0;width:100%;}
  .nav-links a.btn{display:inline-block;width:auto;padding-left:1.6em;padding-right:1.6em;}
  .nav-cta{margin:10px 0 4px;}
}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;text-align:center;
  padding:38px 0 34px;
  background:
    radial-gradient(1200px 520px at 50% -8%, rgba(148,123,141,.16), transparent 60%),
    radial-gradient(900px 480px at 12% 120%, rgba(126,148,136,.20), transparent 60%),
    var(--cream);
}
.hero .watermark{position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  width:520px;max-width:80%;opacity:.05;fill:var(--star);pointer-events:none;}
/* scattered north-stars sprinkled behind the hero text */
.hero .sprinkle{position:absolute;fill:var(--star);pointer-events:none;}
@media (prefers-reduced-motion:no-preference){
  .hero .sprinkle{animation:twinkle 6s ease-in-out infinite;}
  .hero .sprinkle:nth-of-type(odd){animation-delay:2.5s;}
}
@keyframes twinkle{0%,100%{opacity:.10;}50%{opacity:.28;}}
.hero .inner{position:relative;max-width:820px;margin:0 auto;}
.hero .hero-crest{width:76px;height:auto;margin:0 auto 12px;}
.hero h1{margin-bottom:.15em;}
.hero .tagline{font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:clamp(1.3rem,2.6vw,1.8rem);color:var(--sage-deep);margin:0 0 .8rem;}
.hero .pillars{display:inline-flex;gap:.7em;align-items:center;flex-wrap:wrap;justify-content:center;
  font-family:"Mulish",sans-serif;text-transform:uppercase;letter-spacing:.22em;
  font-size:.78rem;font-weight:700;color:var(--plum-deep);margin-bottom:1.1rem;}
.hero .pillars .dot{width:5px;height:5px;border-radius:50%;background:var(--plum);display:inline-block;}
.hero .lead{font-size:1.16rem;color:var(--body);max-width:620px;margin:0 auto 1.4rem;}
.hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.hero .reassure{margin-top:1rem;font-size:.86rem;color:var(--muted);}

/* ---- generic ---- */
.center{text-align:center;}
.measure{max-width:660px;margin-left:auto;margin-right:auto;}
.lead-p{font-size:1.12rem;}
.sec-head{text-align:center;margin-bottom:34px;}

/* ---- conditions grid ---- */
.grid{display:grid;gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:820px){.grid-3{grid-template-columns:1fr;}.grid-2{grid-template-columns:1fr;}}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 28px;transition:transform .18s ease,box-shadow .22s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(46,42,60,.08);}
.card h3{margin-bottom:.35em;}
.card .star{width:20px;height:20px;margin-bottom:14px;display:block;}
.card.plum .star{fill:var(--plum);}
.card.feature{
  background:linear-gradient(155deg,#6E5F7B,#574A68);
  border-color:transparent;
  color:#F4EFF4;
}
.card.feature h3{color:#fff;}
.card.feature p{color:rgba(255,255,255,.92);}
.card.feature .star{fill:#fff;}
.card.feature:hover{box-shadow:0 16px 36px rgba(103,90,116,.28);}
.card.sage .star{fill:var(--sage);}
.card p{margin-bottom:0;font-size:.98rem;color:var(--body);}
/* faint brand tint so the grid isn't all near-white */
.card.sage{background:linear-gradient(158deg,#F1F5F2,var(--card));border-color:#DBE6DF;}
.card.plum{background:linear-gradient(158deg,#F7F1F6,var(--card));border-color:#EADEE9;}

/* ---- program (PHP / IOP) ---- */
.programs{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
@media (max-width:820px){.programs{grid-template-columns:1fr;}}
.program{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px 32px;
  border-top:4px solid var(--sage);
}
.program.iop{border-top-color:var(--plum);}
.program .tag{font-family:"Mulish",sans-serif;text-transform:uppercase;letter-spacing:.2em;
  font-size:.72rem;font-weight:800;color:var(--sage-deep);}
.program.iop .tag{color:var(--plum-deep);}
.program h3{font-size:1.7rem;margin:.2em 0 .4em;}
.program ul{list-style:none;margin:1rem 0 0;padding:0;}
.program li{position:relative;padding-left:1.7em;margin-bottom:.6em;font-size:.97rem;}
.program li .star{position:absolute;left:0;top:.18em;width:14px;height:14px;fill:var(--sage);}
.program.iop li .star{fill:var(--plum);}

/* ---- approach: two-column ---- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:54px;align-items:center;}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:30px;}}
.pill-list{list-style:none;margin:1.4rem 0 0;padding:0;}
.pill-list li{display:flex;gap:13px;margin-bottom:1.05rem;}
.pill-list .star{flex:0 0 auto;width:18px;height:18px;margin-top:.28em;fill:var(--sage);}
.pill-list b{color:var(--ink);font-family:"Mulish",sans-serif;}
.approach-aside{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 32px;}
.approach-aside h3{color:var(--plum-deep);}
/* pill-list used inside cards (truth / signs) */
.card .pill-list{margin-top:1rem;}
.card .pill-list li{margin-bottom:.8rem;}
.card .pill-list li:last-child{margin-bottom:0;}
.card .pill-list .star{display:inline-block;width:17px;height:17px;margin:.28em 0 0;flex:0 0 auto;}
.card.sage .pill-list .star{fill:var(--sage);}
.card.plum .pill-list .star{fill:var(--plum);}

/* ---- steps ---- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media (max-width:820px){.steps{grid-template-columns:1fr;}}
.step{position:relative;padding-top:8px;}
.step .num{font-family:"Cormorant Garamond",serif;font-size:2.4rem;color:var(--plum);line-height:1;}
.step h3{font-size:1.25rem;margin:.3em 0 .3em;}
.step p{font-size:.95rem;margin:0;}

/* ---- team ---- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:820px){.team{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.team{grid-template-columns:1fr;}}
.member{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;text-align:center;}
.member .avatar{width:84px;height:84px;border-radius:50%;margin:0 auto 14px;overflow:hidden;
  background:radial-gradient(circle at 35% 30%,var(--sage),var(--plum));display:grid;place-items:center;}
.member .avatar .star{width:34px;height:34px;fill:rgba(255,255,255,.92);}
.member .avatar img{width:100%;height:100%;object-fit:cover;}
.member .role{margin-bottom:.4em;}
.member .bio{font-size:.86rem;line-height:1.55;color:var(--body);margin:0;}
/* centered two-up team layout */
.team--2{max-width:560px;margin:0 auto;grid-template-columns:repeat(2,1fr);}
/* three-up team layout */
.team.team--3{max-width:940px;margin:0 auto;grid-template-columns:repeat(3,1fr);align-items:stretch;}
@media (max-width:800px){.team.team--3{grid-template-columns:1fr;max-width:440px;}}
.member h3{font-size:1.2rem;margin-bottom:.1em;}
.member .role{font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:var(--sage-deep);font-weight:700;}

/* ---- CTA band ---- */
.cta-band{background:linear-gradient(120deg,#54675F,#6B5E78);color:#fff;text-align:center;border-radius:0;}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.9);max-width:560px;margin:0 auto 1.7rem;}
.cta-band .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5);}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.cta-band .btn--light{background:#fff;color:var(--ink);}

/* ---- contact / form ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:start;}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:34px;}}
.notice{background:#FBF6EE;border:1px solid var(--line);
  border-radius:10px;padding:16px 18px;font-size:.92rem;color:var(--body);margin-bottom:22px;}
.notice b{color:var(--ink);}
form .field{margin-bottom:18px;}
form label{display:block;font-weight:700;font-size:.86rem;color:var(--ink);margin-bottom:6px;}
form input,form select,form textarea{
  width:100%;font:inherit;font-size:.97rem;color:var(--body);background:#fff;
  border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;transition:border .18s ease,box-shadow .18s ease;
}
form input:focus,form select:focus,form textarea:focus{
  outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(126,148,136,.18);
}
form textarea{min-height:120px;resize:vertical;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-note{font-size:.82rem;color:var(--muted);margin-top:10px;}
.info-block{margin-bottom:26px;}
.info-block h3{font-size:1.35rem;margin-bottom:.2em;}
.info-block a{font-weight:700;}

/* ---- footer ---- */
.site-footer{background:var(--ink);color:#D8D2DF;padding:64px 0 30px;}
.site-footer a{color:#E7E1EE;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.3fr;gap:40px;}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr;gap:30px;}}
.site-footer h4{font-family:"Mulish",sans-serif;text-transform:uppercase;letter-spacing:.18em;
  font-size:.74rem;color:#fff;margin:0 0 14px;font-weight:800;}
.site-footer .fbrand{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.site-footer .fbrand img{height:46px;filter:brightness(0) invert(1);opacity:.92;}
.site-footer .fbrand b{font-family:"Cormorant Garamond",serif;font-size:1.5rem;color:#fff;font-weight:600;}
.site-footer p{font-size:.92rem;color:#BDB6C8;margin-bottom:.8rem;}
.crisis{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:18px 20px;}
.crisis h4{margin-bottom:10px;}
.crisis ul{list-style:none;margin:0;padding:0;font-size:.92rem;}
.crisis li{margin-bottom:8px;line-height:1.5;}
.crisis b{color:#fff;}
.crisis .small{font-size:.82rem;color:#A9A2B6;margin-top:10px;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:42px;padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:#A9A2B6;}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

:focus-visible{outline:3px solid var(--plum);outline-offset:2px;border-radius:4px;}
.skip{position:absolute;left:-9999px;background:#fff;padding:10px 16px;border-radius:8px;z-index:100;}
.skip:focus{left:16px;top:10px;}

.support-box{
  margin-top:4px;
}
.support-box h4{
  font-family:"Mulish",sans-serif; text-transform:uppercase;
  letter-spacing:.14em; font-size:.78rem; color:var(--ink); margin:0 0 10px;
}
.support-box ul{list-style:none; margin:0; padding:0; font-size:.92rem;}
.support-box li{margin-bottom:7px; color:var(--body);}
.support-box li:last-child{margin-bottom:0;}
.support-box b{color:var(--ink);}

/* ---- full logo lockup (light backgrounds) ---- */
.brand-logo{width:100%;max-width:360px;height:auto;margin:0 auto 14px;}

/* ---- photo placeholder / frame ---- */
.photo-frame{position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:4/3;margin-bottom:22px;
  background:linear-gradient(150deg,#E6EBE6,#EFE2EC);
  display:grid;place-items:center;text-align:center;}
.photo-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-frame .ph{display:grid;gap:9px;justify-items:center;padding:26px;}
.photo-frame .ph .star{width:30px;height:30px;fill:var(--star);opacity:.75;}
.photo-frame .ph b{font-family:"Mulish",sans-serif;font-size:.76rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.16em;color:var(--sage-deep);}
.photo-frame .ph span{font-size:.84rem;color:var(--muted);max-width:230px;}

/* ---- full-width photo band ---- */
.photo-band{
  position:relative;
  min-height:clamp(300px,40vw,440px);
  display:flex;align-items:center;
  color:#fff;
  background:
    linear-gradient(90deg, rgba(46,42,60,.62), rgba(46,42,60,.20) 52%, rgba(46,42,60,0) 78%),
    url("image2.jpg") center 26%/cover no-repeat;
}
.photo-band .wrap{width:100%;}
.photo-band .band-text{max-width:520px;}
.photo-band h2{color:#fff;margin-bottom:.25em;}
.photo-band p{color:rgba(255,255,255,.94);margin:0;font-size:1.08rem;}
@media (max-width:600px){
  .photo-band{background-position:0 0, 72% 26%;}
  .photo-band .band-text{max-width:none;}
}


.nav-links a.btn--plum,
.nav-links a.btn--plum:link,
.nav-links a.btn--plum:visited,
.nav-links a.btn--plum:hover,
.nav-links a.btn--plum:active,
.nav-links a.btn--plum:focus{
  background:var(--plum-deep);
  color:#fff;
  text-decoration:none;
}