/* SECTOREN-OVERZICHT (/sectoren/): alle regels zijn gescoped op .sct-page. Header, topbar, mobiel menu, footer en base.css blijven ongemoeid.
   Hero, knoppen, secties, FAQ en afsluiting volgen de sectorpagina's (zie ggz.css): DM Sans 400/500 voor koppen en labels,
   het systeemlettertype voor lopende tekst, berry voor acties, turquoise voor accenten, hairlines en de afronding 5px 56px 5px 5px. */

@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')}

.sct-page{--s-berry:#982060;--s-berry-deep:#6d1746;--s-teal:#14707d;--s-teal-deep:#0e5560;--s-turq:#2ba2b1;
  --s-soft:#fbf7fa;--s-ink:#221426;--s-muted:#6d5f6a;--s-line:rgba(34,20,38,.12);--s-rule:#dacbd5;
  --s-h2:clamp(36px,4.6vw,64px);--s-pad:clamp(52px,5.2vw,76px);scroll-margin-top:var(--hdr-h)}
.sct-page :where(h2,h3){font-family:'DM Sans',Arial,sans-serif;color:var(--s-ink)}
.sct-icons{position:absolute;width:0;height:0;overflow:hidden}
.s-ic{display:block;flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sct-page section[id]{scroll-margin-top:calc(var(--hdr-h) + 12px)}

/* ---- 1. HERO: foto over de volle breedte achter de transparante header (klasse .hero blijft nodig voor de headerdetectie) ---- */
.sct-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}
.sct-page .hero>.wide{width:100%}
.sct-page .hero-img{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:-2;width:min(100%,1800px);height:100%;object-fit:cover;object-position:50% 24%;pointer-events:none;filter:brightness(.9) saturate(.97)}
.sct-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,.86) 0%,rgba(6,20,22,.7) 44%,rgba(6,20,22,.3) 74%,rgba(6,20,22,.14) 100%),
  linear-gradient(rgba(5,15,17,.2),rgba(5,15,17,.2))}
.sct-page .hero-copy{max-width:700px}
.sct-page .hero .crumb{margin-bottom:.9rem}
.sct-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}
.sct-page .hero h1 .b{color:#fff}
.sct-page .hero h1 .g{color:var(--s-turq)}
.sct-page .hero .lead{font-size:clamp(1.02rem,1.4vw,1.15rem);color:#fff;max-width:58ch;margin-bottom:1.5rem}
.sct-page .hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.sct-page .btn{min-height:48px;white-space:normal;text-align:center;line-height:1.3;box-shadow:none}
.sct-page .btn-berry,.sct-page .btn-teal{color:#fff}
.sct-page .hero :where(a,button):focus-visible,.sct-page .sct-close :where(a,button):focus-visible{outline-color:#fff}
@media(max-width:767px){
  .sct-page .hero h1{font-size:clamp(2.5rem,10vw,3.5rem)}
  .sct-page .hero-img{height:calc((var(--hdr-h) + clamp(4.5rem,30vw,9rem)) * 2.6 - var(--hdr-h));object-position:50% 12%;
    -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
  .sct-page .hero{padding:clamp(4.5rem,30vw,9rem) 0 1.9rem;min-height:0;display:block}
  .sct-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%)}
  .sct-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}
  .sct-page .hero-copy{max-width:none;position:relative;z-index:1}
  .sct-page .hero-actions{gap:.6rem}
  .sct-page .hero .lead{margin-bottom:1.2rem}
}
@media(max-width:559px){.sct-page .hero-actions .btn{flex:1 1 100%}}
@media(min-width:768px){.sct-page .hero-top-scrim{display:none}}

/* ---- Secties ---- */
.sct-page .s-sec{padding:var(--s-pad) 0;color:var(--s-ink)}
.sct-page .s-wrap{width:100%;max-width:1216px;margin:0 auto;padding:0 48px}
.sct-page .s-h2{font-family:'DM Sans',Arial,sans-serif;font-size:var(--s-h2);font-weight:500;line-height:1.04;letter-spacing:-.055em;color:var(--s-ink);margin:0;text-wrap:balance}
.sct-page .s-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}
.sct-page .s-p{font-family:var(--fb);font-size:18px;line-height:1.55;color:var(--s-ink);margin:0}

/* 2. Openingsblok: antwoord direct onder de hero */
.sct-page .s-opening-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:90px;align-items:end}
.sct-page .s-opening-grid .s-p{max-width:430px}

/* 3. Sectorindex met voorbeeldpaneel */
.sct-page .s-index{background:var(--s-soft)}
.sct-page .s-index-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(48px,6vw,96px);align-items:start;margin-top:clamp(34px,4vw,54px)}
.sct-page .s-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--s-rule)}
.sct-page .s-row{display:grid;grid-template-columns:minmax(0,1fr) 22px;align-items:center;gap:20px;min-height:64px;padding:24px 3px;border-bottom:1px solid var(--s-rule);color:#705d68;text-decoration:none;transition:color 180ms ease}
.sct-page .s-row-thumb{display:none}
.sct-page .s-row-name{display:block;font:500 clamp(30px,3.3vw,46px)/1.08 'DM Sans',Arial,sans-serif;letter-spacing:-.05em;color:inherit}
.sct-page .s-row-desc{display:block;margin-top:7px;font:16px/1.45 var(--fb);color:var(--s-muted)}
.sct-page .s-row .s-ic{width:22px;height:22px;opacity:.5;transition:transform 180ms ease,opacity 180ms ease}
.sct-page .s-row:hover,.sct-page .s-row.is-active,.sct-page .s-row:focus-visible{color:var(--s-berry)}
.sct-page .s-row:hover .s-ic,.sct-page .s-row.is-active .s-ic,.sct-page .s-row:focus-visible .s-ic{opacity:1;transform:translateX(5px)}
.sct-page .s-preview{position:sticky;top:calc(var(--hdr-h) + 28px);overflow:hidden;border-radius:5px 56px 5px 5px;background:#fff;border:1px solid var(--s-line);cursor:pointer}
.sct-page .s-panel{display:none}
.sct-page .s-panel.is-active{display:block}
.sct-page .s-panel-media{aspect-ratio:4/3;background:#150d13;overflow:hidden}
.sct-page .s-panel-media img{display:block;width:100%;height:100%;object-fit:cover}
.sct-page .s-panel-body{padding:28px 32px 32px}
.sct-page .s-panel .s-h3{font-size:30px;margin-bottom:10px}
.sct-page .s-panel-text{margin:0;font:17px/1.55 var(--fb);color:var(--s-ink)}
.sct-page .s-panel-label{margin:22px 0 10px;font:500 15px/1.3 'DM Sans',Arial,sans-serif;color:var(--s-muted)}
.sct-page .s-roles{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.sct-page .s-roles li{padding:7px 14px;border:1px solid var(--s-teal);border-radius:24px;background:#fff;color:var(--s-teal);font:500 14.5px/1.3 'DM Sans',Arial,sans-serif}
.sct-page .s-panel-go{display:inline-flex;align-items:center;gap:8px;margin-top:24px;color:var(--s-berry);font:500 17px/1.3 'DM Sans',Arial,sans-serif}

/* 4. Vergelijking als echte tabel */

/* 5. Raakvlakken */

/* 6. FAQ (zelfde opbouw en het SamenSterk-icoon naast de kop als op de sectorpagina's) */
.sct-page .s-faq{background:#fff}
.sct-page .s-faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:105px}
.sct-page .s-faq-title{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;gap:19px;max-width:450px}
.sct-page .s-faq-title .s-h2{min-width:0}
.sct-page .s-faq-symbol{display:block;flex:none;width:36px;height:36px;object-fit:contain;margin-top:9px}
.sct-page .s-faq-list{border-top:1px solid #dfd1da}
.sct-page .s-faq-list details{border-bottom:1px solid #dfd1da}
.sct-page .s-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(--s-ink);font:500 18px/1.4 'DM Sans',Arial,sans-serif}
.sct-page .s-faq-list summary::-webkit-details-marker{display:none}
.sct-page .s-faq-plus{flex:0 0 26px;display:flex;align-items:center;justify-content:center;width:26px;height:26px;color:var(--s-berry)}
.sct-page .s-faq-plus svg{transition:transform 220ms ease}
.sct-page .s-faq-list details[open] .s-faq-plus svg{transform:rotate(45deg)}
.sct-page .s-faq-list details[open] summary{color:var(--s-berry)}
.sct-page .s-faq-answer{overflow:hidden}
.sct-page .s-faq-answer p{margin:0;padding:0 30px 20px 0;font:16px/1.55 var(--fb);color:var(--s-ink)}

/* 7. Afsluiting */
.sct-page .sct-close{padding:clamp(76px,7.3vw,108px) 0;background:var(--s-berry);color:#fff}
.sct-page .s-close-grid{display:grid;grid-template-columns:.85fr 1fr;grid-template-areas:'actions copy';gap:70px;align-items:end}
.sct-page .s-close-grid>div:first-child{grid-area:copy;text-align:right}
.sct-page .s-actions{grid-area:actions;display:flex;flex-wrap:wrap;gap:12px}
.sct-page .sct-close h2{max-width:700px;margin:0 0 0 auto;color:#fff;font:500 var(--s-h2)/1.04 'DM Sans',Arial,sans-serif;letter-spacing:-.055em;text-wrap:balance}
.sct-page .sct-close p{max-width:520px;margin:24px 0 0 auto;color:#fff;font:18px/1.55 var(--fb)}
.sct-page .sct-close .btn-white{color:var(--s-berry)}
.sct-page .s-sec :where(a,button,summary):focus-visible{outline:3px solid var(--s-teal);outline-offset:4px}

/* ---- Breakpoints ---- */
@media(max-width:850px){
  .sct-page .s-wrap{padding:0 30px}
  .sct-page .s-opening-grid,.sct-page .s-faq-grid,.sct-page .s-close-grid{grid-template-columns:1fr;gap:30px}
  .sct-page .s-close-grid{grid-template-areas:'copy' 'actions'}
  .sct-page .s-opening-grid .s-p{max-width:560px}
  /* Op smalle schermen: geen voorbeeldpaneel; elke rij krijgt een eigen kleine foto */
  .sct-page .s-index-grid{grid-template-columns:1fr}
  .sct-page .s-preview{display:none}
  .sct-page .s-row{grid-template-columns:76px minmax(0,1fr) 22px;gap:16px;padding:18px 3px}
  .sct-page .s-row-thumb{display:block;width:76px;height:76px;border-radius:5px 22px 5px 5px;overflow:hidden;background:#150d13}
  .sct-page .s-row-thumb img{display:block;width:100%;height:100%;object-fit:cover}
  .sct-page .s-row-name{font-size:clamp(22px,5.7vw,32px);overflow-wrap:break-word}
  .sct-page .s-row-desc{font-size:15px;margin-top:5px}
}
@media(max-width:700px){
  /* Tabel wordt per sector gestapeld; de kolomnamen komen uit data-label */
}
@media(max-width:620px){
  .sct-page{--s-h2:clamp(36px,9vw,45px)}
  .sct-page .s-wrap{padding:0 24px}
  .sct-page .s-p{font-size:17px}
  .sct-page .s-faq-title{grid-template-columns:32px minmax(0,1fr);gap:13px}
  .sct-page .s-faq-symbol{width:32px;height:32px;margin-top:6px}
  .sct-page .s-faq-list summary{font-size:16px}
  .sct-page .s-actions{flex-direction:column}
  .sct-page .s-actions .btn{width:100%}
}
@media(max-width:350px){.sct-page .s-wrap{padding:0 20px}.sct-page .s-row{grid-template-columns:56px minmax(0,1fr) 18px;gap:12px}.sct-page .s-row-thumb{width:56px;height:56px}.sct-page .s-row-name{font-size:19px;overflow-wrap:normal}.sct-page .s-row-desc{font-size:14px}.sct-page .s-row .s-ic{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.sct-page .s-row,.sct-page .s-row .s-ic,.sct-page .s-faq-plus svg{transition:none}}