:root{
  --color-bg:#F8F5EF;
  --color-ink:#102E33;
  --color-orange:#E8931F;
  --color-teal:#278D8D;
  --radius-card:28px;
  --container-width:1440px;
  --header-height:82px;
  --focus-ring:3px solid #102E33;
}
html{scroll-behavior:smooth;max-width:100%;overflow-x:clip}
body{background:var(--color-bg);max-width:100%;overflow-x:clip}
.header{background:var(--color-bg)!important}
.header .nav .mobile-contact-link{display:none!important}
.mobile-menu-toggle{display:none;border:1.5px solid var(--color-ink);border-radius:999px;background:transparent;color:var(--color-ink);width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer}
.mobile-menu-toggle .menu-icon,.mobile-menu-toggle .menu-icon::before,.mobile-menu-toggle .menu-icon::after{display:block;width:21px;height:2px;background:currentColor;content:"";transition:transform .2s ease,opacity .2s ease}
.mobile-menu-toggle .menu-icon{position:relative}
.mobile-menu-toggle .menu-icon::before{position:absolute;top:-7px}
.mobile-menu-toggle .menu-icon::after{position:absolute;top:7px}
.mobile-menu-toggle[aria-expanded="true"] .menu-icon{background:transparent}
.mobile-menu-toggle[aria-expanded="true"] .menu-icon::before{top:0;transform:rotate(45deg)}
.mobile-menu-toggle[aria-expanded="true"] .menu-icon::after{top:0;transform:rotate(-45deg)}
:where(a,button,input,textarea,select,summary):focus-visible{outline:var(--focus-ring)!important;outline-offset:4px}
.button-primary,.step-num,.filter-button.active,.filter-button:hover,.progress span.active,.faq-item[open] summary::after{color:var(--color-ink)!important}
.final-cta{color:var(--color-ink)!important}
.final-cta :is(h1,h2,h3,p){color:var(--color-ink)!important}
.final-cta .button,.final-cta .button-primary{color:#fff!important}
.skip-link{position:fixed;z-index:10000;left:16px;top:12px;transform:translateY(-150%);background:var(--color-ink);color:#fff;padding:12px 18px;border-radius:8px}
.skip-link:focus{transform:none}
@media(max-width:1050px){
  body.mobile-menu-open{overflow:hidden}
  .header-inner>.button-primary{display:none!important}
  .mobile-menu-toggle{display:inline-flex;position:relative;z-index:1002}
  .header .nav{display:none!important;position:fixed;z-index:1001;inset:var(--header-height) 0 0;background:var(--color-bg);padding:38px max(24px,6vw) 54px;overflow:auto;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px}
  .header .nav[data-mobile-open="true"]{display:flex!important}
  .header .nav a{display:flex;align-items:center;min-height:54px;padding:10px 4px;border-bottom:1px solid rgba(16,46,51,.14);font-size:clamp(1.05rem,4.2vw,1.35rem)}
  .header .nav .mobile-contact-link{display:flex!important;margin-top:22px;justify-content:center;border:0;border-radius:999px;background:var(--color-orange);color:var(--color-ink);font-weight:800}
}
@media(max-width:430px){
  :root{--header-height:74px}
  .mobile-menu-toggle{width:44px;height:44px}
  :where(h1,h2,h3,p,a,li,dt,dd){overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Uniforme header-CTA op alle pagina's. */
.header-inner>.button-primary{
  width:203px!important;
  min-width:203px!important;
  max-width:203px!important;
  height:50px!important;
  min-height:50px!important;
  flex:0 0 203px!important;
  padding:0 23px!important;
  border-radius:999px!important;
  font-size:16px!important;
  line-height:1!important;
  white-space:nowrap!important;
  box-shadow:0 7px 16px rgba(232,147,31,.13)!important;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease!important;
}
.header-inner>.button-primary:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 9px 20px rgba(232,147,31,.17)!important;
}

/* Gedeelde doorklikkaarten volgen dezelfde hoverkleur als de dienstkaarten. */
@media (hover:hover){
  .info-card:hover{background:rgba(232,147,31,.1)!important}
}

/* Definitieve Optimistisch design tokens en gedeelde componentstandaarden. */
:root{
  --surface-page:#F8F5EF;
  --surface-hero:#ECE3D8;
  --surface-card:#fff;
  --surface-card-hover:rgba(232,147,31,.1);
  --surface-card-accent:rgba(232,147,31,.12);
  --brand-ink:#102E33;
  --brand-orange:#E8931F;
  --brand-teal:#278D8D;
  --border-subtle:rgba(16,46,51,.14);
  --shadow-card:0 12px 28px rgba(16,46,51,.08);
  --shadow-card-hover:0 18px 40px rgba(16,46,51,.1);
  --radius-card:28px;
  --section-gap:clamp(64px,7vw,96px);
}

/* Rustige standaardoppervlakken; afwijkende beige artikelkaarten zijn vervallen. */
:where(.knowledge-card,.read-more){
  background:var(--surface-card)!important;
  border:1px solid var(--border-subtle);
}

/* Interactieve kaarten delen voortaan één beweging en één hoverkleur. */
@media (hover:hover){
  :where(.info-card,.service-card,.blog-card,.knowledge-card):hover{
    background:var(--surface-card-hover)!important;
    box-shadow:var(--shadow-card-hover);
  }
}

/* Vast verticaal ritme: de homepage is de maatstaf voor alle paginatypen. */
:root{
  --section-rhythm:clamp(72px,8vw,118px);
  --section-heading-gap:clamp(30px,3.5vw,46px);
  --card-rhythm:18px;
  --brand-link:#176D70;
}
:where(.section,.act-section,.statement,.services,.method,.values){
  padding-top:var(--section-rhythm)!important;
}
:where(.section,.act-section) > .wrap > .eyebrow{
  margin-bottom:16px;
}
:where(.section,.act-section) > .wrap > .eyebrow + .section-head{
  margin-top:0;
}
:where(.section,.act-section) > .wrap > .eyebrow + :is(.value-grid,.values-grid,.topic-grid,.knowledge-grid,.blog-grid,.info-links){
  margin-top:var(--section-heading-gap);
}
:where(.value-grid,.values-grid,.info-links,.blog-grid,.knowledge-grid,.topic-grid,.two-card-grid){
  gap:var(--card-rhythm)!important;
}
:where(.card-link,.service-link,.section-link,.news-row a,.blog-card a,.knowledge-card a,.info-card a,.read-more a){
  color:var(--brand-link)!important;
}

/* Leefgebieden en Big 5 zijn informatief; alleen de doorklikkaarten reageren. */
.compact-life-cards .service-card,
.compact-life-cards .service-card:hover{
  background:var(--surface-card)!important;
  box-shadow:none!important;
  transform:none!important;
}
.compact-life-cards .service-card:hover > *{
  transform:none!important;
}
.compact-life-cards .service-card::after{
  display:none!important;
}

/* De dienstkeuzes gebruiken dezelfde donkergroene linkkleur als Jeugdhulp. */
.service-choice-link{
  color:var(--brand-link)!important;
}
.thankyou .button-primary{
  box-shadow:none!important;
}
.thankyou .button-primary:hover{
  box-shadow:none!important;
}
.error-actions .button-primary,
.error-actions .button-primary:hover{
  box-shadow:none!important;
}
@media(max-width:700px){
  :root{
    --section-rhythm:58px;
    --section-heading-gap:28px;
    --card-rhythm:14px;
  }
}

/* Bescheiden uitklapmenu voor de drie doelgroepen. */
.header .nav-item{position:relative;display:flex;align-items:center;white-space:nowrap}
.header .nav-item>.submenu-toggle{display:inline-flex;align-items:center;justify-content:center;width:24px;height:34px;margin-left:-3px;padding:0;border:0;background:transparent;color:var(--color-ink);cursor:pointer}
.header .nav-item>.submenu-toggle span{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .18s ease}
.header .nav-item[data-open="true"]>.submenu-toggle span{transform:translateY(2px) rotate(225deg)}
.header .submenu{position:absolute;z-index:1200;top:calc(100% + 13px);left:50%;display:grid;gap:2px;min-width:248px;padding:10px;background:var(--color-bg);border:1px solid rgba(16,46,51,.12);border-radius:18px;box-shadow:0 16px 38px rgba(16,46,51,.12);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-5px);transition:opacity .16s ease,transform .16s ease,visibility .16s ease}
.header .submenu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px}
.header .submenu a{display:flex;align-items:center;min-height:39px;padding:8px 11px;border-radius:10px;color:var(--color-ink);font-size:14px;font-weight:650;line-height:1.25;text-decoration:none}
.header .submenu a:hover,.header .submenu a:focus-visible{background:rgba(232,147,31,.11);color:var(--color-ink)}
.header .nav-item-jeugdhulp>.submenu{grid-template-columns:repeat(2,minmax(210px,1fr));width:478px}
.header .nav-item[data-open="true"]>.submenu,.header .nav-item:focus-within>.submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
@media (hover:hover) and (min-width:1051px){.header .nav-item:hover>.submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}}
@media(max-width:1050px){
  .header .nav-item{display:grid;grid-template-columns:minmax(0,1fr) 48px;width:100%;white-space:normal}
  .header .nav-item>a{grid-column:1;min-width:0}
  .header .nav-item>.submenu-toggle{grid-column:2;grid-row:1;width:48px;height:54px;margin:0;border-bottom:1px solid rgba(16,46,51,.14)}
  .header .submenu,.header .nav-item-jeugdhulp>.submenu{position:static;grid-column:1/-1;display:none;width:auto;min-width:0;padding:7px 8px 10px;margin:0 0 7px;background:rgba(255,255,255,.48);border:0;border-radius:12px;box-shadow:none;opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:none}
  .header .nav-item[data-open="true"]>.submenu{display:grid;grid-template-columns:1fr}
  .header .submenu::before{display:none}
  .header .submenu a{min-height:44px;padding:9px 13px;border-bottom:0;font-size:15px;font-weight:650}
}