/* Dezelfde begrensde blokken op website en in editor, na de paginastijlen. */
.h2-case{isolation:isolate}
.h2-case:after{background:radial-gradient(ellipse at 50% 45%,#555 0%,#292929 48%,#000 100%);mix-blend-mode:multiply;opacity:.45;pointer-events:none}
.h2-case .case-copy{text-shadow:0 1px 4px #0009}
.h2-case-hero{isolation:auto}
.h2-case-hero:after{background:radial-gradient(ellipse at 52% 42%,#fff 0%,#d0d0d0 38%,#303030 100%);mix-blend-mode:color-burn;opacity:.6;pointer-events:none}
.h2-case-services{background:none;isolation:isolate;justify-content:flex-start;min-height:162px;padding:28px 42px;gap:8px;overflow:visible}
.h2-case-services:before{content:'';position:absolute;inset:-30px 0 0;z-index:-1;background:#fff;clip-path:polygon(0 30px,100% 0,100% 100%,0 100%);pointer-events:none}
.h2-case-services a{text-decoration:none;max-width:100%;overflow-wrap:anywhere;flex-shrink:0}
.h2-case-services a:hover{text-decoration:underline;text-underline-offset:4px}
.h2-logo{filter:drop-shadow(10px 10px 4px rgb(0 0 0 / .161));overflow:visible}
.h2-header,.header-inner{overflow:visible}
:is(.h2-breadcrumb,.h2-case-breadcrumb,.breadcrumbs){color:#666}
:is(.h2-breadcrumb,.h2-case-breadcrumb,.breadcrumbs) a{text-decoration:underline;text-underline-offset:3px}
/* Eén titel-tekstafstand; geen optelling van h2-marge en p-marge. */
.h2-text h2{margin-bottom:24px}
.h2-text .text-columns p{margin-top:0}
/* Diensten en cases delen exact dezelfde kolommen, inclusief nieuwe blokken. */
.h2-columns{background:#583070;color:#fff;margin-block:0;padding:90px 0 60px}
.h2-columns>.h2-wrap{z-index:2}
.h2-columns .column-magic{top:-165px}
.h2-columns .three-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px;padding-inline:50px 0}
.h2-columns .three-columns h3{font-size:24px;line-height:38px;font-weight:500;margin-bottom:6px}
.h2-columns .three-columns ul{list-style:none;padding:0;margin:0}
.h2-columns .three-columns li{font-size:18px;line-height:34px;position:relative;padding-left:14px;overflow-wrap:anywhere}
.h2-columns .three-columns li:before{content:'–';position:absolute;left:0}
.editor-styles-wrapper .h2-columns .three-columns textarea{font-family:inherit;font-size:18px;line-height:34px;font-weight:300;color:inherit;background:transparent;border:0;padding:0;margin:0;resize:vertical}
@media(min-width:768px) and (max-width:1199px){.h2-columns .three-columns{gap:25px}.h2-columns .three-columns h3{font-size:20px}}
@media(max-width:767px){
 .h2-case-services{min-height:139px;padding:24px;gap:5px}
 .h2-case-services:before{inset:-24px 0 0;clip-path:polygon(0 24px,100% 0,100% 100%,0 100%)}
 .h2-columns{padding:95px 0 45px}
 .h2-columns .column-magic{width:185px;top:-150px}
 .h2-columns .three-columns{grid-template-columns:1fr;gap:28px;padding-inline:0}
 .h2-columns .three-columns h3{font-size:24px}
}
:is(.h2-service-page,.h2-case-single,.h2-service-editor,.editor-styles-wrapper) .h2-text h2{margin-bottom:24px}
@media(min-width:768px) and (max-width:1199px){.h2-logo{filter:drop-shadow(7px 7px 3px rgb(0 0 0 / .161))}}
@media(max-width:767px){.h2-logo{filter:drop-shadow(5px 5px 2px rgb(0 0 0 / .161))}}
/* Leesbare witte navigatie op lichte foto’s, zonder tweede beeld-overlay. */
.single-case .h2-header:not(.scrolled) nav,.single-case .h2-header:not(.scrolled) .menu-toggle{text-shadow:0 1px 3px #000,0 0 6px #0009}

/* A single owner of spacing around the protruding label: no stacked block padding. */
.h2-columns{--h2-columns-rise:104px;--h2-columns-clearance:50px;--h2-columns-after:60px}
:is(.h2-service-page,.h2-case-single,.h2-service-editor,.editor-styles-wrapper) .h2-columns{margin-block:calc(var(--h2-columns-rise) + var(--h2-columns-clearance)) var(--h2-columns-after)}
.h2-columns .column-magic{top:-194px;pointer-events:none}
:is(.h2-service-page,.h2-case-single) :is(.h2-text,.h2-split,.h2-images,.h2-large-image,.h2-video,.h2-cta):has(+ .h2-columns){padding-bottom:0;margin-bottom:0;min-height:0}
:is(.h2-service-page,.h2-case-single) .h2-columns + :is(.h2-text,.h2-split,.h2-images,.h2-large-image,.h2-video,.h2-cta){padding-top:0;margin-top:0}
/* Gutenberg wraps each section in its selectable block container. Reserve the same space there. */
.editor-styles-wrapper .h2-block:has(> .h2-columns){padding-block:calc(var(--h2-columns-rise,104px) + var(--h2-columns-clearance,50px)) var(--h2-columns-after,60px)}
.editor-styles-wrapper .h2-block > .h2-columns{margin-block:0}
.editor-styles-wrapper .h2-block:has(+ .h2-block > .h2-columns) > :is(.h2-text,.h2-split,.h2-images,.h2-large-image,.h2-video,.h2-cta){padding-bottom:0;margin-bottom:0;min-height:0}
.editor-styles-wrapper .h2-block:has(> .h2-columns) + .h2-block > :is(.h2-text,.h2-split,.h2-images,.h2-large-image,.h2-video,.h2-cta){padding-top:0;margin-top:0}
@media(max-width:767px){
 .h2-columns{--h2-columns-rise:55px;--h2-columns-clearance:35px;--h2-columns-after:45px}
 .h2-columns .column-magic{top:-150px}
 .editor-styles-wrapper .h2-block:has(> .h2-columns){padding-block:90px 45px}
}

/* Diensttitels mogen over meerdere regels lopen; korte goedgekeurde titels houden dezelfde hoogte. */
.h2-service-heading{height:auto;min-height:300px}
.h2-service-heading h1{hyphens:auto;overflow-wrap:anywhere}
@media(max-width:767px){.h2-service-heading{min-height:240px}}

/* Aansluitende dienstintro en tekst/beeld: vaste blokruimte zonder afstandsblok. */
.h2-service-page .h2-service-intro + .h2-split{margin-top:60px}
.editor-styles-wrapper .h2-block:has(> .h2-service-intro) + .h2-block > .h2-split{padding-top:60px;align-items:start;min-height:0}
@media(max-width:767px){
 .h2-service-page .h2-service-intro + .h2-split{margin-top:35px}
 .editor-styles-wrapper .h2-service-editor .h2-service-intro{grid-template-columns:1fr;gap:35px;width:calc(100% - 60px)}
 .editor-styles-wrapper .h2-block:has(> .h2-service-intro) + .h2-block > .h2-split{display:flex;flex-direction:column;gap:35px;padding:35px 0 0;min-height:0}
 .editor-styles-wrapper .h2-block:has(> .h2-service-intro) + .h2-block > .h2-split :is(.split-image,.split-copy){width:calc(100% - 60px);margin-inline:auto}
}
@media(max-width:359px){
 .editor-styles-wrapper .h2-service-editor .h2-service-intro,
 .editor-styles-wrapper .h2-block:has(> .h2-service-intro) + .h2-block > .h2-split :is(.split-image,.split-copy){width:calc(100% - 40px)}
}
