/* Discovery Family Therapy — shared service-page design system (.ndpage).
   Extracted from the neurodivergence template 26 Jul 2026. Edit here; all service pages share it. */
/* Neurodivergence page — structural optimisation (scoped to .ndpage; edits this page only). 26 Jul 2026 */
.ndpage{--nd-ink:#22383d;--nd-deep:#0292b7;--nd-cta:#185f6d;--nd-tint:#eef7f9;--nd-border:#aed9e0;--nd-muted:#5f7379;
  font-family:'Lato',system-ui,-apple-system,Segoe UI,sans-serif;color:var(--nd-ink);font-size:16px;line-height:1.6;}
.ndpage h1,.ndpage h2,.ndpage h3{font-family:"Fraunces",Georgia,serif;color:var(--nd-ink);line-height:1.15;font-weight:600;}
.ndpage .wrap{max-width:1080px;margin:0 auto;padding:0 20px;}
.ndpage section{padding:48px 0;scroll-margin-top:78px;}
.ndpage .tint{background:var(--nd-tint);}
.ndpage .eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:900;color:var(--nd-deep);margin:0 0 .6rem;}
.ndpage h1{font-size:34px;margin:0 0 .6rem;}
.ndpage h2{font-size:25px;margin:0 0 1rem;}
.ndpage h3{font-size:18px;margin:0 0 .35rem;}
.ndpage p{margin:0 0 1rem;}
.ndpage .lead{font-size:1.05rem;color:var(--nd-muted);max-width:60ch;}
.ndpage .clar{font-weight:700;}
.ndpage a{color:var(--nd-deep);}
/* buttons */
.ndpage .btnrow{display:flex;flex-direction:column;gap:.7rem;margin-top:1.3rem;}
.ndpage .btn{display:flex;align-items:center;justify-content:center;min-height:50px;padding:.6rem 1.5rem;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;text-align:center;}
.ndpage .btn-primary{background:var(--nd-deep);color:#fff;}
.ndpage .btn-outline{background:#fff;color:var(--nd-deep);border-color:var(--nd-border);}
.ndpage .btn-full{width:100%;}
/* info strip */
.ndpage .strip{display:grid;grid-template-columns:1fr;gap:.5rem;margin-top:1.4rem;}
.ndpage .strip span{background:#fff;border:1px solid var(--nd-border);border-radius:12px;padding:.7rem .9rem;font-weight:700;font-size:.92rem;text-align:center;display:flex;align-items:center;justify-content:center;}
/* recognition rows */
.ndpage .rows{display:flex;flex-direction:column;gap:.7rem;margin-top:1.2rem;}
.ndpage .row{background:#fff;border:1px solid var(--nd-border);border-radius:14px;padding:1rem 1.1rem;}
.ndpage .row h3{margin:0 0 .25rem;font-size:17px;}
.ndpage .row p{margin:0;color:var(--nd-muted);font-size:.95rem;}
/* Does this sound familiar */
.ndpage .dsf-intro{color:var(--nd-muted);max-width:62ch;margin:0 0 .4rem;}
.ndpage .dsf-aud{font-weight:700;font-size:.92rem;color:var(--nd-ink);margin:0;}
.ndpage .dsf-grid{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:1.3rem;}
.ndpage .dsf-card{background:#fff;border:1px solid var(--nd-border);border-radius:16px;padding:1.3rem;text-align:left;}
.ndpage .dsf-card .ic{width:30px;height:30px;color:#185f6d;display:block;margin-bottom:.6rem;}
.ndpage .dsf-card h3{margin:0 0 .35rem;font-size:17px;}
.ndpage .dsf-card p{margin:0;color:var(--nd-muted);font-size:16px;line-height:1.55;}
.ndpage .dsf-panel{margin-top:1.5rem;background:#e3f1f4;border:1px solid var(--nd-border);border-left:4px solid #185f6d;border-radius:14px;padding:1.2rem 1.3rem;color:var(--nd-ink);font-size:16px;line-height:1.55;}
@media(min-width:800px){.ndpage .dsf-grid{grid-template-columns:repeat(2,1fr);gap:1.1rem;}}
/* service cards */
.ndpage .cards{display:flex;flex-direction:column;gap:.9rem;margin-top:1.2rem;}
.ndpage .card{background:#fff;border:1px solid var(--nd-border);border-radius:16px;padding:1.2rem;}
.ndpage .card h3{margin-top:0;}
.ndpage .card p{margin:0;color:var(--nd-muted);font-size:.96rem;}
/* practitioners */
.ndpage .pracs{display:flex;flex-direction:column;gap:1.2rem;margin-top:1.2rem;}
.ndpage .prac{background:#fff;border:1px solid var(--nd-border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;}
.ndpage .prac>img{width:100%;height:300px;object-fit:cover;object-position:center top;display:block;}
.ndpage .prac .pb{padding:1.1rem;display:flex;flex-direction:column;flex:1;}
.ndpage .prac h3{margin:0 0 .1rem;}
.ndpage .prac .title{font-size:.9rem;color:var(--nd-muted);margin:0 0 .5rem;}
.ndpage .prac .avail{display:inline-block;align-self:flex-start;border-radius:999px;padding:.26rem .8rem;font-size:.78rem;font-weight:700;margin:0 0 .7rem;}
.ndpage .avail-open{background:#e4f6ea;color:#1d6b3c;}
.ndpage .avail-wait{background:#fdf0da;color:#8a5a12;}
.ndpage .prac .who{font-weight:700;font-size:.92rem;margin:0 0 .35rem;}
.ndpage .prac ul{margin:0 0 .7rem;padding-left:1.15rem;font-size:.92rem;color:var(--nd-muted);}
.ndpage .prac ul li{margin:.1rem 0;}
.ndpage .prac .fee{font-size:.9rem;color:var(--nd-ink);margin:.1rem 0 1rem;}
.ndpage .prac .btn{margin-top:auto;width:100%;}
/* steps */
.ndpage .steps{display:flex;flex-direction:column;gap:.9rem;margin-top:1.2rem;}
.ndpage .step{background:#fff;border:1px solid var(--nd-border);border-radius:14px;padding:1.1rem;}
.ndpage .step h3{margin:0 0 .3rem;}
.ndpage .step p{margin:0;color:var(--nd-muted);font-size:.96rem;}
/* faq */
.ndpage .faq{margin-top:1.2rem;}
.ndpage details{background:#fff;border:1px solid var(--nd-border);border-radius:12px;padding:0 1rem;margin-bottom:.6rem;}
.ndpage summary{cursor:pointer;font-weight:700;padding:.9rem 0;list-style:none;}
.ndpage summary::-webkit-details-marker{display:none;}
.ndpage summary::after{content:"+";float:right;color:var(--nd-deep);font-weight:900;}
.ndpage details[open] summary::after{content:"\2013";}
.ndpage details p{margin:0 0 .9rem;color:var(--nd-muted);font-size:.96rem;}
/* related — whole card tappable */
.ndpage .related{display:grid;grid-template-columns:1fr;gap:.8rem;margin-top:1.2rem;}
.ndpage .related a{display:block;background:#fff;border:1px solid var(--nd-border);border-radius:14px;padding:1.05rem 1.1rem;text-decoration:none;color:var(--nd-ink);font-weight:700;}
.ndpage .related a span{display:block;font-weight:400;font-size:.92rem;color:var(--nd-muted);margin-top:.25rem;}
/* final CTA */
.ndpage .finalcta{background:var(--nd-cta);}
.ndpage .finalcta h2,.ndpage .finalcta p{color:#fff;}
.ndpage .finalcta .btn-primary{background:var(--nd-deep);color:#fff;}
.ndpage .finalcta .btn-outline{background:transparent;color:#fff;border-color:#7fdcea;}
.ndpage .phone-link{display:inline-block;margin-top:1.1rem;color:#dff3f7;font-weight:700;}
/* hero image */
.ndpage .nd-hero{padding-top:32px;}
.ndpage .nd-hero img{width:100%;height:220px;object-fit:cover;border-radius:16px;margin-top:1.3rem;display:block;}

/* Full-bleed illustrated hero photo, right-aligned, fading to white behind the copy.
   Standard pattern for service pages with a matching illustrated hero image
   (proven on Men's Counselling, rolled out 12 Aug 2026). Default crop tuned for
   counselling_family.jpg; pages using a different image override object-position
   via a small scoped <style> block after this stylesheet link. */
.ndpage .nd-hero.nd-hero--photo{
  position:relative;
  overflow:hidden;
  padding-top:0;
  min-height:clamp(440px,52vw,600px);
  display:flex;
  align-items:center;
}
.ndpage .nd-hero--photo .nd-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:68% 40%;
  z-index:0;
  margin:0;
  border-radius:0;
  animation:none;
}
.ndpage .nd-hero--photo .nd-hero-fade{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,#fff 0%,#fff 32%,rgba(255,255,255,.94) 44%,rgba(255,255,255,.6) 58%,rgba(255,255,255,0) 76%);
}
.ndpage .nd-hero--photo .wrap{
  position:relative;
  z-index:2;
  padding-top:2.6rem;
  padding-bottom:2.6rem;
  /* Anchor copy to the true left edge instead of centring within the 1080px column.
     The base .ndpage .wrap rule centres via margin:0 auto, which on wide viewports
     pushes the hero copy well right of the edge with a large blank gap. This overrides
     that specifically for the photo hero, using a capped responsive gutter instead of
     a viewport-proportional one. 16 Aug 2026. */
  max-width:none;
  margin-left:0;
  margin-right:0;
  padding-left:clamp(20px,4vw,4rem);
}
.ndpage .nd-hero--photo .nd-hero-copy{
  max-width:600px;
}
@media(max-width:760px){
  .ndpage .nd-hero.nd-hero--photo{min-height:auto;display:block;}
  .ndpage .nd-hero--photo .nd-hero-bg{position:static;width:100%;height:220px;object-position:70% 20%;border-radius:16px;margin-top:1.3rem;}
  .ndpage .nd-hero--photo .nd-hero-fade{display:none;}
  .ndpage .nd-hero--photo .wrap{padding-top:1.6rem;padding-bottom:1.8rem;}
  .ndpage .nd-hero--photo .nd-hero-copy{max-width:none;}
}
/* desktop */
@media(min-width:900px){
  .ndpage section{padding:64px 0;}
  .ndpage h1{font-size:44px;}
  .ndpage h2{font-size:30px;}
  .ndpage .btnrow{flex-direction:row;flex-wrap:wrap;}
  .ndpage .btn{min-width:200px;}
  .ndpage .strip{grid-template-columns:repeat(4,1fr);}
  .ndpage .cards{display:grid;grid-template-columns:repeat(2,1fr);}
  .ndpage .pracs{display:grid;grid-template-columns:repeat(3,1fr);}
  .ndpage .steps{display:grid;grid-template-columns:repeat(3,1fr);}
  .ndpage .related{grid-template-columns:repeat(2,1fr);}
  .ndpage .nd-hero img{height:auto;aspect-ratio:16/9;}
}

/* Practitioner cards: link headshot + name to the profile page (added 1 Aug 2026). */
.ndpage .prac a.prac-photo{display:block;}
.ndpage .prac a.prac-photo img{display:block;}
.ndpage .prac h3 a{color:inherit;text-decoration:none;}
.ndpage .prac h3 a:hover{color:#0292b7;text-decoration:underline;}