/* GGZ-PAGINA (/ggz/): alle regels zijn gescoped op .ggz-page. Header, topbar, mobiel menu, footer en base.css blijven ongemoeid.
   Hero en knoppen volgen de bestaande hero-typografie en .btn-stijlen; de inhoud gebruikt DM Sans 400/500 voor koppen
   en labels en het systeemlettertype voor lopende tekst (zelfde opbouw als /organisaties/). */

@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-sans-latin-400.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-sans-latin-500.woff2) format('woff2')}

.ggz-page{--g-berry:#982060;--g-berry-deep:#6d1746;--g-teal:#14707d;--g-teal-deep:#0e5560;--g-turq:#2ba2b1;
  --g-white:#ffffff;--g-soft:#fbf7fa;--g-ink:#221426;--g-muted:#6d5f6a;--g-line:rgba(34,20,38,.12);
  --g-h2:clamp(30px,3.8vw,42px);--g-pad:clamp(48px,6vw,80px)}
.ggz-page :where(h2,h3){font-family:'DM Sans',Arial,sans-serif;color:var(--g-ink)}
.ggz-icons{position:absolute;width:0;height:0;overflow:hidden}
.ggz-ic{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---- 1. HERO: foto over de volle breedte achter de transparante header (klasse .hero blijft nodig voor de headerdetectie) ---- */
.ggz-page .hero{position:relative;background:#150d13;min-height:calc(clamp(560px,66vh,660px) - var(--hdr-h));display:flex;align-items:center;padding:clamp(1.25rem,2.6vw,2rem) 0 clamp(2rem,3.4vw,2.75rem);overflow:hidden;isolation:isolate}
.ggz-page .hero>.wide{width:100%}
.ggz-page .hero-img{position:absolute;top:0;left:50%;transform:translateX(-50%) scaleX(-1);z-index:-2;width:min(100%,1800px);height:100%;object-fit:cover;object-position:50% 30%;pointer-events:none;filter:brightness(.9) saturate(.97)}
.ggz-page .hero-scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(4,17,19,.56) 0%,rgba(4,17,19,.2) 24%,transparent 44%),
  linear-gradient(100deg,rgba(6,20,22,.8) 0%,rgba(6,20,22,.62) 44%,rgba(6,20,22,.28) 74%,rgba(6,20,22,.14) 100%),
  linear-gradient(rgba(5,15,17,.2),rgba(5,15,17,.2))}
.ggz-page .hero-copy{max-width:700px}
.ggz-page .hero .crumb{margin-bottom:.9rem}
.ggz-page .hero h1{font-size:clamp(2.75rem,5.5vw,4.75rem);line-height:1.02;letter-spacing:-.05em;margin-bottom:1rem;color:#fff;text-wrap:balance}
.ggz-page .hero h1 .g-w{color:#ffffff}
.ggz-page .hero h1 .g-a{color:#2ba2b1}
.ggz-page .hero .lead{font-size:clamp(1.02rem,1.4vw,1.15rem);color:#ffffff;max-width:58ch;margin-bottom:1.5rem}
.ggz-page .hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.ggz-page .btn{min-height:48px;white-space:normal;text-align:center;line-height:1.3}
.ggz-page .btn{box-shadow:none}
.ggz-page .btn-berry,.ggz-page .btn-teal{color:#fff}
.ggz-page .hero :where(a,button):focus-visible,.ggz-page .ggz-close :where(a,button):focus-visible{outline-color:#fff}
@media(max-width:767px){
  .ggz-page .hero h1{font-size:clamp(2.5rem,10vw,3.5rem)}
  .ggz-page .hero-img{object-position:35% 20%}
  .ggz-page .hero{padding:clamp(4.5rem,30vw,9rem) 0 1.9rem;min-height:0;display:block}
  .ggz-page .hero-scrim{background:linear-gradient(180deg,rgba(21,13,19,0) 0%,rgba(21,13,19,.1) 20%,rgba(21,13,19,.78) 46%,rgba(21,13,19,.94) 100%)}
  .ggz-page .hero-top-scrim{position:absolute;top:0;left:0;right:0;height:0;display:none;z-index:1;background:linear-gradient(to bottom,rgba(4,17,19,.6),rgba(4,17,19,.2) 70%,transparent);pointer-events:none}
  .ggz-page .hero-copy{max-width:none;position:relative;z-index:1}
  .ggz-page .hero-actions{gap:.6rem}
  .ggz-page .hero .lead{margin-bottom:1.2rem}
}
@media(max-width:559px){.ggz-page .hero-actions .btn{flex:1 1 100%}}
@media(min-width:768px){.ggz-page .hero-top-scrim{display:none}}
/* Alleen /gehandicaptenzorg/: het bronbeeld is 4:3 met de gezichten hoog in beeld. 'cover' over de volle mobiele hero
   zou het gezicht achter kruimelpad en kop zetten. Daarom een lagere beeldhoogte (ruimte tussen header en kruimelpad)
   die in de bestaande donkere heroachtergrond overloopt. */
@media(max-width:767px){
  .ggz-page .hero-img.hero-img-gehandicaptenzorg{height:calc((var(--hdr-h) + clamp(4.5rem,30vw,9rem)) * 2.2 - var(--hdr-h));object-position:0 0;
    -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
}
/* Alleen /verslavingszorg/ en /jeugdzorg/: vierkante bronbeelden; op smalle telefoons viel het gezicht achter het
   kruimelpad. Zelfde aanpak, factor per beeld afgestemd op de plek van het gezicht. */
@media(max-width:559px){
  .ggz-page .hero-img.hero-img-verslavingszorg{height:calc((var(--hdr-h) + clamp(4.5rem,30vw,9rem)) * 2.4 - var(--hdr-h));object-position:35% 0;
    -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
  .ggz-page .hero-img.hero-img-jeugdzorg{height:calc((var(--hdr-h) + clamp(4.5rem,30vw,9rem)) * 2.3 - var(--hdr-h));object-position:35% 0;
    -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
}


/* De hele herbouw blijft binnen .ggz-page; header, navigatie en footer behouden hun eigen CSS. */
.ggz-page{--g-h2:clamp(36px,4.6vw,64px);--g-pad:clamp(76px,7.3vw,108px);scroll-margin-top:var(--hdr-h)}
.ggz-page section[id]{scroll-margin-top:calc(var(--hdr-h) + 12px)}
.ggz-page .g-sec{padding:var(--g-pad) 0;color:var(--g-ink)}
.ggz-page .g-wrap{width:100%;max-width:1216px;margin:0 auto;padding:0 48px}
.ggz-page .g-h2{font-family:'DM Sans',Arial,sans-serif;font-size:var(--g-h2);font-weight:500;line-height:1.04;letter-spacing:-.055em;color:var(--g-ink);margin:0;text-wrap:balance}
.ggz-page .g-h3{font-family:'DM Sans',Arial,sans-serif;font-size:24px;font-weight:500;line-height:1.2;letter-spacing:-.035em;margin:0 0 13px}
.ggz-page .g-p{font-family:var(--fb);font-size:18px;line-height:1.55;color:var(--g-ink);margin:0}
.ggz-page .g-opening-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:90px;align-items:end}
.ggz-page .g-opening-grid .g-p{max-width:410px}
.ggz-page .g-service-note{margin:65px 0 0;padding-top:19px;border-top:1px solid var(--g-line);font:15px/1.5 var(--fb);color:var(--g-muted)}
.ggz-page .g-org{background:var(--g-soft)}
.ggz-page .g-org-grid{display:grid;grid-template-columns:1.15fr .85fr;grid-template-areas:'choices heading';gap:85px}
.ggz-page .g-org-grid>div:first-child{grid-area:heading;text-align:right;justify-self:end}
.ggz-page .g-org-grid>div:last-child{grid-area:choices}
.ggz-page .g-org .g-h2{max-width:480px}
.ggz-page .g-intro{max-width:370px;margin:23px 0 0 auto}
.ggz-page .g-choices{border-top:1px solid #dacbd5}
.ggz-page .g-choice{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:64px;padding:17px 3px;border:0;border-bottom:1px solid #dacbd5;border-radius:0;background:transparent;color:#705d68;text-align:left;font:500 clamp(20px,2.1vw,28px)/1.25 'DM Sans',Arial,sans-serif;letter-spacing:-.035em;cursor:pointer;transition:color 180ms ease}
.ggz-page .g-choice:hover,.ggz-page .g-choice.is-active{color:var(--g-berry)}
.ggz-page .g-choice-dot{flex:0 0 11px;width:11px;height:11px;border-radius:50%;background:currentColor;opacity:.35;transition:opacity 180ms ease}
.ggz-page .g-choice.is-active .g-choice-dot{opacity:1}
.ggz-page .g-choice-answer{max-width:540px;min-height:115px;margin:25px 0 9px}
.ggz-page .g-choice-answer p{font:17px/1.55 var(--fb);color:var(--g-ink);margin:0}
.ggz-page .g-pro-grid{display:grid;grid-template-columns:.9fr 1fr;grid-template-areas:'copy statement';gap:95px;align-items:center}
.ggz-page .g-pro-copy{grid-area:copy}
.ggz-page .g-pro-statement{grid-area:statement}
.ggz-page .g-pro-statement{display:flex;flex-direction:column;justify-content:space-between;min-height:380px;padding:44px;border-radius:5px 82px 5px 5px;background:var(--g-soft)}
.ggz-page .g-pro-statement strong{display:block;max-width:470px;color:var(--g-berry);font:500 clamp(32px,3.5vw,51px)/1.12 'DM Sans',Arial,sans-serif;letter-spacing:-.055em}
.ggz-page .g-pro-statement p{max-width:360px;margin:0;font:17px/1.55 var(--fb)}
.ggz-page .g-pro-copy>.g-p{max-width:450px;margin:23px 0 25px}
.ggz-page .g-topics{display:flex;flex-wrap:wrap;gap:9px}
.ggz-page .g-topic{min-height:44px;padding:9px 15px;border:1px solid var(--g-teal);border-radius:24px;background:#fff;color:var(--g-teal);font:500 15px/1.3 'DM Sans',Arial,sans-serif;cursor:pointer;transition:background 180ms ease,color 180ms ease}
.ggz-page .g-topic:hover,.ggz-page .g-topic.is-active{background:var(--g-teal);color:#fff}
.ggz-page .g-pro .g-choice-answer{min-height:93px;margin:20px 0 10px}
.ggz-page .g-process{border-top:1px solid var(--g-line)}
.ggz-page .g-process-head{display:grid;grid-template-columns:1.15fr .85fr;grid-template-areas:'intro heading';gap:85px;align-items:end}
.ggz-page .g-process-head .g-h2{grid-area:heading;text-align:right}
.ggz-page .g-process-head .g-p{grid-area:intro}
.ggz-page .g-process-head .g-p{max-width:540px}
.ggz-page .g-paths{display:grid;grid-template-columns:1fr 1fr;gap:55px;margin-top:52px}
.ggz-page .g-path{padding-top:23px;border-top:2px solid var(--g-ink)}
.ggz-page .g-path .g-p{max-width:455px;font-size:17px}
.ggz-page .g-shared{display:grid;grid-template-columns:.75fr 1.25fr;gap:50px;margin-top:46px;padding:29px 33px;border-radius:4px;background:var(--g-berry);color:#fff}
.ggz-page .g-shared strong{font:500 25px/1.2 'DM Sans',Arial,sans-serif;letter-spacing:-.04em}
.ggz-page .g-shared p{margin:0;font:17px/1.55 var(--fb);color:#fff}
.ggz-page .g-faq{background:var(--g-soft)}
.ggz-page .g-faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:105px}
.ggz-page .g-faq-title{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;gap:19px;max-width:450px}
.ggz-page .g-faq-title .g-h2{min-width:0}
.ggz-page .g-faq-symbol{display:block;flex:none;width:36px;height:36px;object-fit:contain;margin-top:9px}
.ggz-page .g-faq-list{border-top:1px solid #dfd1da}
.ggz-page .g-faq-list details{border-bottom:1px solid #dfd1da}
.ggz-page .g-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:63px;padding:15px 0;list-style:none;cursor:pointer;color:var(--g-ink);font:500 18px/1.4 'DM Sans',Arial,sans-serif}
.ggz-page .g-faq-list summary::-webkit-details-marker{display:none}
.ggz-page .g-faq-plus{flex:0 0 26px;display:flex;align-items:center;justify-content:center;width:26px;height:26px;color:var(--g-berry)}
.ggz-page .g-faq-plus svg{transition:transform 220ms ease}
.ggz-page .g-faq-list details[open] .g-faq-plus svg{transform:rotate(45deg)}
.ggz-page .g-faq-list details[open] summary{color:var(--g-berry)}
.ggz-page .g-faq-answer{overflow:hidden}
.ggz-page .g-faq-answer p{margin:0;padding:0 30px 20px 0;font:16px/1.55 var(--fb);color:var(--g-ink)}
.ggz-page .ggz-close{padding:clamp(76px,7.3vw,108px) 0;background:var(--g-berry);color:#fff}
.ggz-page .g-close-grid{display:grid;grid-template-columns:.85fr 1fr;grid-template-areas:'actions copy';gap:70px;align-items:end}
.ggz-page .g-close-grid>div:first-child{grid-area:copy;text-align:right}
.ggz-page .g-actions{grid-area:actions}
.ggz-page .ggz-close h2{max-width:700px;margin:0;color:#fff;font:500 var(--g-h2)/1.04 'DM Sans',Arial,sans-serif;letter-spacing:-.055em;text-wrap:balance}
.ggz-page .ggz-close p{max-width:520px;margin:24px 0 0 auto;color:#fff;font:18px/1.55 var(--fb)}
.ggz-page .g-actions{display:flex;flex-wrap:wrap;gap:12px}
.ggz-page .ggz-close .btn-white{color:var(--g-berry)}
.ggz-page .g-sec :where(a,button,summary):focus-visible{outline:3px solid var(--g-teal);outline-offset:4px}
.ggz-page .ggz-close :where(a,button):focus-visible{outline-color:#fff}
@media(max-width:850px){
 .ggz-page .g-wrap{padding:0 30px}
 .ggz-page .g-opening-grid,.ggz-page .g-org-grid,.ggz-page .g-pro-grid,.ggz-page .g-process-head,.ggz-page .g-faq-grid,.ggz-page .g-close-grid{grid-template-columns:1fr;gap:30px}
 .ggz-page .g-org-grid{grid-template-areas:'heading' 'choices'}
 .ggz-page .g-pro-grid{grid-template-areas:'copy' 'statement'}
 .ggz-page .g-process-head{grid-template-areas:'heading' 'intro'}
 .ggz-page .g-close-grid{grid-template-areas:'copy' 'actions'}
 .ggz-page .g-pro-copy{order:initial}
 .ggz-page .g-opening-grid .g-p{max-width:560px}
}
@media(max-width:620px){
 .ggz-page{--g-h2:clamp(36px,9vw,45px)}
 .ggz-page .g-wrap{padding:0 24px}
 .ggz-page .g-p{font-size:17px}
 .ggz-page .g-service-note{margin-top:45px}
 .ggz-page .g-pro-statement{min-height:290px;padding:30px}
 .ggz-page .g-paths{grid-template-columns:1fr;gap:28px}
 .ggz-page .g-shared{grid-template-columns:1fr;gap:9px;padding:26px}
 .ggz-page .g-choice-answer{min-height:0}
 .ggz-page .g-org .btn,.ggz-page .g-pro .btn{width:100%}
 .ggz-page .g-faq-title{grid-template-columns:32px minmax(0,1fr);gap:13px}
 .ggz-page .g-faq-symbol{width:32px;height:32px;margin-top:6px}
 .ggz-page .g-faq-list summary{font-size:16px}
 .ggz-page .g-actions{flex-direction:column}
 .ggz-page .g-actions .btn{width:100%}
}
@media(max-width:350px){.ggz-page .g-wrap{padding:0 20px}}
@media(prefers-reduced-motion:reduce){.ggz-page .g-choice,.ggz-page .g-choice-dot,.ggz-page .g-topic,.ggz-page .g-faq-plus svg{transition:none}}