/* Blok: Hero (gescopet op .block-hero). */
/* 81px/142px zijn de bevroren 1350px-waarden (6%% resp. 10,52%%). */
.block-hero{padding:6% 0 10.52%;background:#fff;}
@media (min-width:1350px){.block-hero{padding:81px 0 142px;}}
.block-hero__inner{
	display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	/* Divi-goot 3 = 5,5% van de rij — vaste px klopt alleen bij 1440. */
	column-gap:5.5%;row-gap:64px;align-items:start;
}
.block-hero__text h1{margin:0 0 30px;white-space:pre-line;}
/* Dienstpagina-hero (volledige afbeelding): tekst verticaal gecentreerd naast de hoge illustratie, kop in zwart (zoals origineel). */
.block-hero--img-full .block-hero__inner{align-items:center;}
.block-hero--img-full .block-hero__text h1{color:#000;}
.block-hero__intro{color:#000;margin-bottom:22px;font-size:15px;line-height:23.8px;font-weight:300;font-family:"Inter",Helvetica,Arial,sans-serif;}
.block-hero__intro p{margin:0 0 1em;}
.block-hero__intro p:last-child{margin-bottom:0;}
.block-hero__media{display:flex;justify-content:flex-start;}
.block-hero__media img{width:100%;max-width:100%;height:auto;}
.block-hero--img-small .block-hero__media img{width:50%;}

/* Tablet: 1-koloms, tekst boven, afbeelding eronder (links uitgelijnd). */
@media (max-width:980px){
	/* Onder 980px rekent Divi niet meer in procenten: sectiepadding 50px +
	   rijpadding 30px = 80px. */
	.block-hero{padding:80px 0;}
	.block-hero .td-container{width:80%;}
	.block-hero__inner{grid-template-columns:minmax(0,1fr);gap:55px;}
	.block-hero__media{justify-content:flex-start;}
	.block-hero__text h1{font-size:60px;line-height:60px;}
}
@media (max-width:767px){
	.block-hero__text h1{font-size:40px;line-height:40px;}
}

/* Bovenkop boven de h1 (Divi: Inter 700, hoofdletters, 15px). */
.block-hero__eyebrow{
	margin:0 0 10px;padding-bottom:1px;
	font-family:"Inter",Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;line-height:1.7;
	text-transform:uppercase;color:#000;
}

/* Klein hero-icoon boven de kop */
.block-hero__icon{display:block;width:55px;height:auto;margin:0 0 14px;}

/* ------------------------------------------------------------------------- *
 * Contact-hero: tekst links, formulier rechts (reseller-worden, Divi-parity).
 * Sectie 100px lager dan een gewone hero, blauwe kop van 60px.
 * ------------------------------------------------------------------------- */
.block-hero--form{padding:4% 0;}
.block-hero--form .block-hero__inner{padding:2% 0;gap:5.5%;align-items:start;}
@media (min-width:1350px){
	.block-hero--form{padding:54px 0;}
	.block-hero--form .block-hero__inner{padding:27px 0;}
}
.block-hero--form .block-hero__text h1{font-size:60px;line-height:60px;color:var(--td-blue);}
/* Divi erft de regelhoogte van body (1.7em van 14px = 23.8px), ook op 15px-tekst. */
.block-hero--form .block-hero__eyebrow{line-height:23.8px;}
.block-hero--form .block-hero__intro{margin-bottom:0;}

/* Formulierkolom (Contact Form 7) — pillvormige velden, knop rechts. */
.block-hero__form .wpcf7{max-width:none;}
.block-hero__form .wpcf7-form p{margin:0 0 3.09%;}
.block-hero__form .wpcf7-form-control-wrap{display:block;}
.block-hero__form input:not([type=submit]),
.block-hero__form textarea{
	width:100%;box-sizing:border-box;
	background:#EAF2F9;border:0;border-radius:100px;
	padding:16px;margin:0;
	font-family:var(--td-font-btn);font-size:14px;line-height:normal;color:#000;
	-webkit-appearance:none;appearance:none;
}
.block-hero__form textarea{border-radius:25px;min-height:150px;height:150px;resize:vertical;display:block;}
.block-hero__form ::placeholder{color:#000;opacity:1;}
.block-hero__form input:focus,
.block-hero__form textarea:focus{outline:none;box-shadow:0 0 0 2px rgba(28,113,185,.28);}

.block-hero__form .wpcf7-form p:has(.wpcf7-submit){
	display:flex;justify-content:flex-end;align-items:center;margin:-1.5% 0 0;
}
/* Spinner vóór de knop, zodat de knop rechts uitlijnt met de velden. */
.block-hero__form .wpcf7-spinner{order:-1;margin:0 12px 0 0;}
.block-hero__form .wpcf7-submit{
	font-family:var(--td-font-btn);font-size:15px;font-weight:500;line-height:1.7;
	color:#fff;background:var(--td-blue);border:2px solid var(--td-blue);
	border-radius:100px;padding:.3em 30px;cursor:pointer;
	transition:color .3s ease,background-color .3s ease;
}
.block-hero__form .wpcf7-submit:hover{background:#fff;color:var(--td-blue);}
.block-hero__form .wpcf7 form .wpcf7-response-output{border-radius:8px;margin:14px 0 0;}

/* Tablet: 1-koloms, formulier onder de tekst (kolomafstand 30px, zoals het origineel).
   Sectie/rij zijn hier 50/30px en het origineel zet er 100px marge boven;
   .td-main levert daar 50px van, dus de sectie neemt de resterende 50px mee. */
@media (max-width:980px){
	.block-hero--form{padding:100px 0 50px;}
	.block-hero--form .block-hero__inner{grid-template-columns:1fr;gap:30px;padding:30px 0;}
	.block-hero--form .block-hero__text h1{font-size:50px;line-height:50px;}
	.block-hero--form .block-hero__intro{margin-bottom:0;}
}
/* Mobiel: marge boven de sectie is 50px; .td-main levert er 25 van. */
@media (max-width:767px){
	.block-hero--form{padding:75px 0 50px;}
	.block-hero--form .block-hero__text h1{font-size:40px;line-height:40px;}
}

/* ---- Kop-kleur expliciet (overschrijft de img-size-standaard) ------------ */
.block-hero--heading-blue .block-hero__text h1{color:var(--td-blue);}
.block-hero--heading-ink .block-hero__text h1{color:#000;}

/* ---- Contactregels (icoon + tekst) onder de knop ------------------------- */
.block-hero__contact{list-style:none;margin:0;padding:0;}
.block-hero__contact-item{display:flex;align-items:flex-start;margin:0 0 18px;}
.block-hero__contact-item:last-child{margin-bottom:0;}
.block-hero__contact-icon{flex:0 0 32px;width:32px;padding-top:4px;}
.block-hero__contact-icon::before{
	content:"";display:block;width:21px;height:21px;background:var(--td-blue);
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
	-webkit-mask-position:left top;mask-position:left top;
	-webkit-mask-size:contain;mask-size:contain;
}
.block-hero__contact-text{
	padding-left:15px;
	font-family:"Inter",Helvetica,Arial,sans-serif;font-weight:300;
	font-size:15px;line-height:1.2em;color:#000;
}
.block-hero__contact-text p{margin:0;}
.block-hero__contact-text a{color:inherit;}
.block-hero__contact-text a:hover{text-decoration:underline;}
.block-hero__contact-icon--location::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath transform='translate(0 448) scale(1 -1)' d='M172.268 -53.6699c-145.298 210.639 -172.268 232.257 -172.268 309.67c0 106.039 85.9609 192 192 192s192 -85.9609 192 -192c0 -77.4131 -26.9697 -99.0312 -172.268 -309.67c-9.53516 -13.7744 -29.9307 -13.7734 -39.4648 0zM192 176c44.1826 0 80 35.8174 80 80 s-35.8174 80 -80 80s-80 -35.8174 -80 -80s35.8174 -80 80 -80z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath transform='translate(0 448) scale(1 -1)' d='M172.268 -53.6699c-145.298 210.639 -172.268 232.257 -172.268 309.67c0 106.039 85.9609 192 192 192s192 -85.9609 192 -192c0 -77.4131 -26.9697 -99.0312 -172.268 -309.67c-9.53516 -13.7744 -29.9307 -13.7734 -39.4648 0zM192 176c44.1826 0 80 35.8174 80 80 s-35.8174 80 -80 80s-80 -35.8174 -80 -80s35.8174 -80 80 -80z'/%3E%3C/svg%3E");}
.block-hero__contact-icon--mail::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='translate(0 448) scale(1 -1)' d='M502.3 257.2c3.90039 3.09961 9.7002 0.200195 9.7002 -4.7002v-204.5c0 -26.5 -21.5 -48 -48 -48h-416c-26.5 0 -48 21.5 -48 48v204.4c0 5 5.7002 7.7998 9.7002 4.69922c22.3994 -17.3994 52.0996 -39.5 154.1 -113.6 c21.1006 -15.4004 56.7002 -47.7998 92.2002 -47.5996c35.7002 -0.300781 72 32.7998 92.2998 47.5996c102 74.0996 131.601 96.2998 154 113.7zM256 128c-23.2002 -0.400391 -56.5996 29.2002 -73.4004 41.4004c-132.699 96.2998 -142.8 104.8 -173.399 128.699 c-5.7998 4.60059 -9.2002 11.5 -9.2002 18.9004v19c0 26.5 21.5 48 48 48h416c26.5 0 48 -21.5 48 -48v-19c0 -7.40039 -3.40039 -14.4004 -9.2002 -18.9004c-30.5996 -24 -40.7002 -32.3994 -173.399 -128.699c-16.8008 -12.2002 -50.2002 -41.8008 -73.4004 -41.4004z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='translate(0 448) scale(1 -1)' d='M502.3 257.2c3.90039 3.09961 9.7002 0.200195 9.7002 -4.7002v-204.5c0 -26.5 -21.5 -48 -48 -48h-416c-26.5 0 -48 21.5 -48 48v204.4c0 5 5.7002 7.7998 9.7002 4.69922c22.3994 -17.3994 52.0996 -39.5 154.1 -113.6 c21.1006 -15.4004 56.7002 -47.7998 92.2002 -47.5996c35.7002 -0.300781 72 32.7998 92.2998 47.5996c102 74.0996 131.601 96.2998 154 113.7zM256 128c-23.2002 -0.400391 -56.5996 29.2002 -73.4004 41.4004c-132.699 96.2998 -142.8 104.8 -173.399 128.699 c-5.7998 4.60059 -9.2002 11.5 -9.2002 18.9004v19c0 26.5 21.5 48 48 48h416c26.5 0 48 -21.5 48 -48v-19c0 -7.40039 -3.40039 -14.4004 -9.2002 -18.9004c-30.5996 -24 -40.7002 -32.3994 -173.399 -128.699c-16.8008 -12.2002 -50.2002 -41.8008 -73.4004 -41.4004z'/%3E%3C/svg%3E");}
.block-hero__contact-icon--phone::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='translate(0 448) scale(1 -1)' d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='translate(0 448) scale(1 -1)' d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z'/%3E%3C/svg%3E");}

/* ---- Contact-hero: maatvoering zoals het origineel ----------------------- */
.block-hero--contact{padding:81px 0;}
.block-hero--contact .block-hero__inner{align-items:start;}
.block-hero--contact .block-hero__text h1{font-size:60px;line-height:1em;}
.block-hero--contact .block-hero__intro{margin-bottom:5.82%;line-height:1.7em;}
.block-hero--contact .td-btn{margin-top:-10px;margin-bottom:5.82%;}
/* Sectiemarge boven de contact-hero is 100px (tablet) / 50px (telefoon) i.p.v. de
   50/25px die .td-main al meeneemt; het verschil komt hier bovenop. */
@media (max-width:980px){
	.block-hero--contact{padding-top:131px;}
	.block-hero--contact .block-hero__text h1{font-size:60px;line-height:1em;}
}
@media (max-width:767px){
	.block-hero--contact{padding-top:106px;}
	.block-hero--contact .block-hero__text h1{font-size:37px;line-height:1em;}
}

/* ------------------------------------------------------------------------- *
 * Zwevende hero-illustratie: de afbeelding vult de kolom en zweeft op en neer.
 * Divi zet de kolommen dan boven aan elkaar (de illustratie is hoger dan de
 * tekst en mag onder zijn container uitsteken).
 * ------------------------------------------------------------------------- */
.block-hero--float .block-hero__inner{align-items:start;}
.block-hero--float .block-hero__media{display:block;}

/* Icoon-lijst onder de tekst (Divi houdt 14px onder de alinea aan). */
.block-hero__intro:has(+ .block-hero__iconlist){margin-bottom:14px;}

/* ---- Volle breedte: geen kolom rechts, tekst over de hele rij ------------ */
.block-hero--wide .block-hero__inner{grid-template-columns:minmax(0,1fr);gap:0;}