:root{
  --ink:#244f52; --ink-dark:#173d40; --sage:#5f8976; --sage-dark:#47705f;
  --cream:#f7f6ef; --mist:#eaf3f1; --white:#fff;
  --shadow:0 16px 45px rgba(27,65,65,.10); --radius:18px;
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  color:var(--ink-dark);
  font-family:"DM Sans",system-ui,sans-serif;
  background:#fff;
  line-height:1.6;
  overflow-x:hidden
}
a{
  color:inherit;
  text-decoration:none
}
img{
  max-width:100%;
  height:auto;display:block
}
.container{
  width:min(1440px,calc(100% - 80px));
  margin-inline:auto
}
.narrow{
  width:min(820px,calc(100% - 80px));
  margin-inline:auto
}
.skip-link{
  position:absolute;
  left:-999px;
  top:10px}.skip-link:focus{left:10px;z-index:99;
  background:#fff;
  padding:10px
}
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(36,79,82,.08)
}
.nav-wrap{
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;flex-shrink:0
}
.brand strong{
  display:block;
  font:600 clamp(22px,1.5vw,30px)/1 "Playfair Display",serif;
  letter-spacing:-.02em
}
.brand small{
  display:block;
  font-size:9px;
  letter-spacing:.22em;
  margin-top:5px;
  color:var(--sage-dark)
}
.brand-mark{
  width:56px;
  height:44px;
  position:relative;
  display:inline-block
}
.brand-mark span{
  position:absolute;
  width:22px;
  height:36px;
  border-radius:100% 0 100% 0;
  transform:rotate(35deg);
  background:#8eb9b0
}
.brand-mark span:nth-child(1){
  left:18px;
  top:0
}
.brand-mark span:nth-child(2){
  left:5px;
  top:10px;
  transform:rotate(-35deg);
  background:#5f8976
}
.brand-mark span:nth-child(3){
  left:29px;
  top:13px;
  transform:rotate(85deg);
  background:#b7d0c7
}
.nav{
  display:flex;
  align-items:center;
  gap:clamp(16px,2vw,34px);
  font-size:14px;font-weight:600
}
.nav a:not(.btn){
  padding:7px 0;
  border-bottom:2px solid transparent
}
.nav a.active,.nav a:hover{
  border-color:var(--sage)
}
.menu-toggle{
  display:none;
  border:1px solid #ccd9d4;
  background:#fff;
  border-radius:10px;
  padding:9px 12px
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;border-radius:999px;
  padding:13px 22px;
  font-weight:700;
  font-size:14px;
  border:1px solid transparent;
  transition:.2s ease;
  white-space:nowrap
}
.btn:hover{
  transform:translateY(-2px)
}
.btn-primary{
  background:var(--sage);
  color:#fff
}
.btn-primary:hover{
  background:var(--sage-dark)
}
.btn-outline{
  border-color:var(--ink);
  background:rgba(255,255,255,.25)
}
.btn-light{
  background:#fff;
  color:var(--ink)
}

.hero{
  position:relative;
  min-height:clamp(600px,46vw,760px);
  overflow:hidden;
  display:flex;
  align-items:center
}
.hero-image{
  position:absolute;
  inset:0;
  background:url("assets/counseling-cares-hero.png") center/cover no-repeat;
  transform:scale(1.01)
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(248,247,240,.98) 0%,rgba(248,247,240,.91) 31%,rgba(248,247,240,.48) 57%,rgba(248,247,240,.08) 100%)
}
.hero-content{
  position:relative;
  padding:clamp(70px,9vw,130px) 0;
  z-index:1;
  max-width:720px
}
.eyebrow{
  font-size:11px;
  letter-spacing:.2em;
  font-weight:800;
  color:var(--sage-dark);
  margin:0 0 13px
}
.hero h1,h2{
  font-family:"Playfair Display",serif;
  font-weight:500;
  letter-spacing:-.035em
}
.hero h1{
  font-size:clamp(48px,5.2vw,82px);
  line-height:1.02;
  margin:0 0 24px;
  color:var(--ink)
}
.hero-copy{
  font-size:clamp(16px,1.25vw,20px);
  max-width:570px;
  margin:0 0 30px
}
.button-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px
}

.section{
  padding:clamp(72px,7vw,110px) 0
}
.services{
  background:var(--cream)
}
.section-heading{
  max-width:760px;
  margin:0 auto 46px
}
.centered{
  text-align:center
}
.section-heading h2,h2{
  font-size:clamp(35px,3.3vw,54px);
  line-height:1.08;
  margin:0 0 14px;
  color:var(--ink)
}
.section-heading>p:last-child{
  margin:0 auto;
  max-width:700px;
  color:#587273
}
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px
}
.card{
  background:#fff;
  border:1px solid rgba(65,105,100,.09);
  border-radius:var(--radius);
  padding:clamp(24px,2.1vw,32px);
  box-shadow:0 7px 22px rgba(40,72,70,.04)
}
.service-grid 
.card{
  min-height:200px;
  text-align:center
}
.icon{
  font-size:32px;
  line-height:1;
  color:var(--sage);
  margin-bottom:16px
}
.card h3{
  margin:0 0 8px;
  font-size:17px
}
.card p{
  margin:0;
  color:#617678;
  font-size:14px
}

.process{
  display:grid;
  grid-template-columns:minmax(360px,38%) minmax(0,62%);
  background:var(--mist)
}
.process-photo{
  min-height:clamp(430px,35vw,600px);
  background:url("assets/counseling-cares-rock.png") center/cover
}
.process-content{
  padding:clamp(65px,7vw,110px) clamp(40px,7vw,110px)
}
.steps{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap:20px;
  align-items:start;
  margin-top:44px
}
.step span{
  display:flex;
  width:45px;
  height:45px;
  border-radius:50%;
  background:var(--sage);
  color:#fff;
  align-items:center;
  justify-content:center;
  font-weight:700;
  margin-bottom:15px
}
.step h3{
  margin:0 0 7px
}
.step p{
  font-size:13px;
  color:#587273;
  margin:0
}
.arrow{
  font-size:27px;
  color:var(--sage);
  padding-top:7px
}

.about{
  background:#fff
}
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,7vw,110px);
  align-items:center
}
.about-grid>div:first-child>p:not(.eyebrow){
  font-size:17px;
  color:#5c7273;
  max-width:600px;
  margin-bottom:25px
}
.quote-panel{
  min-height:clamp(330px,31vw,470px);
  border-radius:20px;
  overflow:hidden;
  position:relative;
  background:linear-gradient(90deg,rgba(28,68,67,.02),rgba(28,68,67,.2)),url("assets/counseling-cares-hero.png") center/cover;
  display:flex;
  align-items:flex-end;
  padding:40px
}
.quote-panel p{
  color:#fff;
  font:italic clamp(28px,2.3vw,38px)/1.15 "Playfair Display",serif;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
  margin:0
}
.stacked-stones{
  position:absolute;
  right:16%;
  top:25%;
  display:grid;
  gap:2px;
  transform:rotate(-4deg)
}
.stacked-stones i{
  display:block;
  background:#665f53;
  border-radius:50%;
  width:85px;
  height:20px;
  box-shadow:0 4px 8px rgba(0,0,0,.25)
}
.stacked-stones i:nth-child(2){
  width:68px;
  margin-left:10px
}
.stacked-stones i:nth-child(3){
  width:50px;
  margin-left:18px
}


/* Staff grid */
.staff{
  background:#fff
}
.staff-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch
}
.staff-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid rgba(65,105,100,.12);
  border-radius:20px;
  overflow:hidden;box-shadow:0 10px 30px rgba(40,72,70,.07);
  transition:transform .2s ease,box-shadow .2s ease
}
.staff-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 42px rgba(40,72,70,.12)
}
.staff-photo{
  aspect-ratio:1/1;
  overflow:hidden;
  background:#e4eeeb
}
.staff-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top
}
.staff-card-body{
  padding:25px;
  display:flex;
  flex-direction:column;flex:1
}
.staff-role{
  margin:0 0 9px;
  color:var(--sage-dark);
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1.5
}
.staff-card h3{
  font:500 clamp(25px,2vw,31px)/1.08 "Playfair Display",serif;
  color:var(--ink);
  margin:0
}
.staff-card 
.credentials{
  margin:5px 0 14px;
  color:var(--sage-dark);
  font-weight:700;
  font-size:13px
}
.staff-card-body>p:not(.staff-role):not(.credentials){
  font-size:13px;
  color:#5c7273;
  margin:0 0 12px
}
.staff-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:12px;
  color:var(--ink);
  font-weight:700;
  font-size:13px
}
.staff-link span{
  color:var(--sage);
  font-size:19px
}
.staff-placeholder-photo{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#edf4f1,#dfeae6)
}
.staff-placeholder-photo span{
  width:76px;
  height:76px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:var(--sage);
  font-size:42px;
  font-weight:300;
  box-shadow:0 5px 20px rgba(40,72,70,.08)
}
.staff-card-placeholder{
  border-style:dashed;
  background:#fbfcfa
}

.testimonials{
  background:var(--cream)
}
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.testimonial-grid blockquote{
  margin:0;
  font-size:14px;
  color:#526a6b
}
.testimonial-grid blockquote:before{
  content:"“";
  font:45px/0 "Playfair Display",serif;
  color:#7ca29a
}
.testimonial-grid cite{
  display:block;
  margin-top:17px;
  font-style:normal;
  font-weight:700;
  color:var(--ink)
}
.faq details{
  border-bottom:1px solid #d8e1de;
  padding:20px 0
}
.faq summary{
  cursor:pointer;
  font-weight:700;
  font-size:17px
}
.faq details p{
  color:#5e7273;
  margin-bottom:0
}
.cta{
  background:var(--ink);
  color:#fff;
  padding:clamp(55px,6vw,85px) 0
}
.cta-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}
.cta 

.eyebrow{
  color:#a8c6bd
}
.cta h2{
  color:#fff;
  margin:0 0 5px
}
.cta p{
  margin:0;
  color:#d0e0dc
}
.footer{
  background:#214f51;
  color:#d9e7e3;
  padding:65px 0 20px
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:clamp(30px,5vw,80px)
}
.footer 
.brand strong{
  color:#fff
}
.footer h4{
  margin:0 0 15px;
  color:#fff
}
.footer-grid a,.footer-grid span{
  display:block;
  margin:6px 0;
  font-size:13px
}
.footer-brand p{
  max-width:300px;
  color:#bcd0cc
}
.footer-tagline{
  font:italic 27px/1.15 "Playfair Display",serif;
  text-align:right
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  margin-top:45px;
  padding-top:17px;
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#a9c2bd
}

@media (max-width:1250px){
  .staff-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media (max-width:1100px){
  .container{width:min(100% - 48px,1440px)}
  .nav{
    gap:18px
  }
  .nav-cta{
    padding-inline:17px
  }
  .service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media (max-width:900px){
  .nav-wrap{
    min-height:76px
  }
  .phone-bar{
    display:none
  }
  .menu-toggle{
    display:block
  }
  .nav{
    display:none;
    position:absolute;
    left:24px;
    right:24px;
    top:76px;
    background:#fff;
    padding:18px;
    border-radius:16px;
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:stretch;
    gap:14px
  }
  .nav.open{
    display:flex
  }
  .nav 
  .btn{
    text-align:center
  }
  .hero{
    min-height:620px
  }
  .hero-overlay{
    background:linear-gradient(90deg,rgba(248,247,240,.98),rgba(248,247,240,.78))
  }
  .process{
    grid-template-columns:1fr
  }
  .process-photo{
    min-height:320px
  }
  .steps{
    grid-template-columns:1fr
  }
  .steps:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 42px rgba(40,72,70,.12)
  }
  .arrow{
    display:none
  }
  .about-grid{
    grid-template-columns:1fr;
    gap:35px
  }
  .testimonial-grid{
    grid-template-columns:1fr
  }
  .footer-grid{
    grid-template-columns:1fr 1fr
  }
  .footer-tagline{
    text-align:left
  }
}
@media (max-width:560px){
  .container,.narrow{
    width:calc(100% - 28px)
  }
  .brand strong{
    font-size:21px
  }
  .brand-mark{
    width:45px;
    transform:scale(.82);
    transform-origin:left center;
    margin-right:-8px
  }
  .hero-content{
    padding:60px 0
  }
  .hero h1{
    font-size:46px
  }
  .hero-copy{
    font-size:16px
  }
  .section{
    padding:70px 0
  }
  .service-grid{
    grid-template-columns:1fr
  }
  .staff-grid{
    grid-template-columns:1fr
  }
  .card{
    padding:23px
  }
  .footer-grid{
    grid-template-columns:1fr
  }
  .footer-bottom{
    display:block
  }
  .footer-bottom span{
    display:block;
    margin:8px 0
  }
  .quote-panel{
    min-height:300px
  }
  .cta-inner{
    align-items:flex-start;
    flex-direction:column
  }
}