/* ============================================================
   OneValue - rustige, consistente styling-laag (override)
   Doelt op stabiele Divi-selectors; geladen na de Divi-inline-CSS
   zodat gelijke-specificiteit-ties in ons voordeel vallen.
   Single source of truth voor site-brede typografie/ritme.
   v1
   ============================================================ */

/* --- 1. Uitlijning: nooit meer justified (rivieren = onrust) ---
   Flipt alleen wat justified was; center/left blijven zoals ontworpen. */
.et_pb_text_align_justified,
.et_pb_text_align_justified .et_pb_text_inner,
.et_pb_text_align_justified .et_pb_text_inner p,
.et_pb_text_align_justified .et_pb_text_inner li,
.et_pb_text_inner p[style*="justify"],
.et_pb_text_inner li { text-align: left !important; }

/* --- 2. Rustige regelafstand in alle tekstmodules (alleen verticaal, geen reflow) --- */
.et_pb_text_inner p,
.et_pb_text_inner li { line-height: 1.7; }

/* --- 3. Koppen: consistente kleur, rustige regelafstand, ademruimte --- */
.et_pb_text_inner h1,
.et_pb_text_inner h2,
.et_pb_text_inner h3,
.et_pb_text_inner h4 { line-height: 1.25; }
.et_pb_text_inner h2,
.et_pb_text_inner h3,
.et_pb_text_inner h4 { color: #2d2f31; }

/* --- 4. Leescontent (blog/artikel/archief): comfortabele leesmaat + ritme ---
   Hoge specificiteit via #left-area; raakt geen designed landingssecties. */
#left-area .et_pb_text_inner p,
#left-area .et_pb_text_inner li { font-size: 16px; line-height: 1.75; }

#left-area .et_pb_text_inner p { margin: 0 0 1.15em; padding-bottom: 0; }
#left-area .et_pb_text_inner ul,
#left-area .et_pb_text_inner ol { margin: 0 0 1.35em; padding-left: 1.15em; }
#left-area .et_pb_text_inner li { margin-bottom: .45em; }

/* kop-ademruimte in leescontent, maar niet boven het eerste element */
#left-area .et_pb_text_inner h2 { margin: 1.7em 0 .5em; }
#left-area .et_pb_text_inner h3 { margin: 1.35em 0 .35em; }
#left-area .et_pb_text_inner > :first-child { margin-top: 0; }

/* comfortabele leesbreedte voor lange lopende tekst */
#left-area .et_pb_post .et_pb_text_inner { max-width: 760px; }

/* ============================================================
   ActiveCampaign-formulieren: strak, on-brand - techniek intact.
   ._form = basisklasse van BEIDE forms (_form_1 homepage / _form_15 contact).
   Gedeelde vorm/typo hieronder; kleuren per context (achtergrond) daaronder.
   2 stabiele IDs (#et-boc #et-main-area) overrulen AC's runtime-CSS.
   ALLEEN CSS - veldnamen/ids/script ongemoeid, dus AC blijft werken.
   ============================================================ */

/* -- gedeeld: font + max breedte -- */
#et-boc #et-main-area ._form { font-family:"Ubuntu Sans",Helvetica,Arial,sans-serif !important; max-width:560px; }

/* -- gedeeld: labels (font/afmeting; kleur = per context) -- */
#et-boc #et-main-area ._form ._form-label,
#et-boc #et-main-area ._form legend._form-label,
#et-boc #et-main-area ._form label {
  font-family:"Ubuntu",sans-serif !important; font-weight:600 !important;
  font-size:15px !important; margin-bottom:8px !important; }

/* -- gedeeld: invoervelden = strakke witte kaartjes -- */
#et-boc #et-main-area ._form input[type=text],
#et-boc #et-main-area ._form input[type=email],
#et-boc #et-main-area ._form input[type=tel],
#et-boc #et-main-area ._form textarea {
  background:#ffffff !important; color:#2d2f31 !important;
  border:1px solid rgba(0,0,0,0.10) !important; border-radius:10px !important;
  height:auto !important; padding:14px 16px !important;
  font-size:16px !important; line-height:1.5 !important;
  font-family:"Ubuntu Sans",sans-serif !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.10) !important;
  transition:border-color .18s, box-shadow .18s !important; }
#et-boc #et-main-area ._form textarea { min-height:150px !important; resize:vertical !important; }
#et-boc #et-main-area ._form input::placeholder,
#et-boc #et-main-area ._form textarea::placeholder { color:#8a8d90 !important; opacity:1 !important; }
#et-boc #et-main-area ._form input:focus,
#et-boc #et-main-area ._form textarea:focus {
  outline:none !important; border-color:#2e3a7b !important;
  box-shadow:0 0 0 3px rgba(46,58,123,0.28) !important; }

/* -- gedeeld: ademruimte tussen rijen -- */
#et-boc #et-main-area ._form ._form_element,
#et-boc #et-main-area ._form ._row { margin-bottom:18px !important; }

/* -- gedeeld: submit-knop = gepolijste pill met hover-lift (kleur = per context) -- */
#et-boc #et-main-area ._form ._submit,
#et-boc #et-main-area ._form button[type=submit] {
  color:#ffffff !important; border:none !important; border-radius:50px !important;
  padding:16px 42px !important; font-family:"Montserrat",sans-serif !important;
  font-weight:700 !important; font-size:16px !important; letter-spacing:.02em !important;
  width:auto !important; box-shadow:0 8px 20px rgba(0,0,0,0.18) !important;
  cursor:pointer !important; transition:transform .15s, box-shadow .15s, background .15s !important; }
#et-boc #et-main-area ._form ._submit:hover,
#et-boc #et-main-area ._form button[type=submit]:hover {
  transform:translateY(-2px) !important; box-shadow:0 12px 26px rgba(0,0,0,0.26) !important; }

/* === CONTEXT A - homepage (_form_1) op WITTE achtergrond: donkere labels, magenta CTA === */
#et-boc #et-main-area ._form_1 ._form-label,
#et-boc #et-main-area ._form_1 legend._form-label,
#et-boc #et-main-area ._form_1 label { color:#2d2f31 !important; }
#et-boc #et-main-area ._form_1 ._submit,
#et-boc #et-main-area ._form_1 button[type=submit] { background:#c4267e !important; }
#et-boc #et-main-area ._form_1 ._submit:hover,
#et-boc #et-main-area ._form_1 button[type=submit]:hover { background:#a81f6b !important; }

/* === CONTEXT B - contact (_form_15) op MAGENTA paneel: witte labels, navy CTA === */
#et-boc #et-main-area ._form_15 ._form-label,
#et-boc #et-main-area ._form_15 legend._form-label,
#et-boc #et-main-area ._form_15 label,
#et-boc #et-main-area ._form_15 ._error,
#et-boc #et-main-area ._form_15 ._error-inner,
#et-boc #et-main-area ._form_15 span._error-inner { color:#ffffff !important; }
#et-boc #et-main-area ._form_15 ._submit,
#et-boc #et-main-area ._form_15 button[type=submit] { background:#2e3a7b !important; }
#et-boc #et-main-area ._form_15 ._submit:hover,
#et-boc #et-main-area ._form_15 button[type=submit]:hover { background:#26306a !important; }

/* ============================================================
   Homepage-hero (fullwidth slider) - polish, on-brand.
   Eyebrow (positionering) + rustige kop/subkop + CTA met hover-lift.
   ============================================================ */
#et-boc .et_pb_fullwidth_slider_0 .ov-hero-eyebrow {
  display:inline-block !important; margin:0 0 20px !important; padding:7px 16px !important;
  background:rgba(255,255,255,0.15) !important; border:1px solid rgba(255,255,255,0.40) !important;
  border-radius:50px !important; color:#ffffff !important;
  font-family:"Montserrat",Helvetica,Arial,sans-serif !important; font-weight:600 !important;
  font-size:13px !important; letter-spacing:.14em !important; text-transform:uppercase !important;
  line-height:1 !important; }

#et-boc .et_pb_fullwidth_slider_0 .et_pb_slide_title {
  line-height:1.08 !important; margin-bottom:.35em !important;
  text-shadow:0 2px 18px rgba(0,0,0,0.14); }

#et-boc .et_pb_fullwidth_slider_0 .et_pb_slide_content {
  font-size:18px !important; line-height:1.6 !important;
  max-width:520px; margin-left:auto !important; margin-right:auto !important; }

#et-boc .et_pb_fullwidth_slider_0 .et_pb_more_button.et_pb_button {
  transition:transform .15s, box-shadow .15s !important;
  box-shadow:0 8px 22px rgba(0,0,0,0.18) !important; }
#et-boc .et_pb_fullwidth_slider_0 .et_pb_more_button.et_pb_button:hover {
  transform:translateY(-2px) !important; box-shadow:0 12px 28px rgba(0,0,0,0.26) !important; }

/* ============================================================
   Vergelijkings-/voor-na-tabellen in artikel- en case-content.
   ============================================================ */
#et-boc .et_pb_text_inner table {
  width:100% !important; border-collapse:separate !important; border-spacing:0 !important;
  background:#ffffff !important;
  margin:.4em 0 1.6em !important; font-size:16px !important;
  overflow:hidden; border-radius:10px;
  box-shadow:0 6px 22px rgba(0,0,0,0.12); }
#et-boc .et_pb_text_inner table th {
  background:#2e3a7b !important; color:#ffffff !important;
  text-align:left !important; font-weight:700 !important;
  font-family:"Ubuntu",sans-serif !important; padding:13px 18px !important;
  line-height:1.3 !important; }
#et-boc .et_pb_text_inner table td {
  padding:13px 18px !important; border-bottom:1px solid #e6e7ea !important;
  vertical-align:top !important; color:#2d2f31 !important; line-height:1.55 !important; }
#et-boc .et_pb_text_inner table tbody tr:nth-child(even) { background:#f6f6f9 !important; }
#et-boc .et_pb_text_inner table tbody tr:last-child td { border-bottom:none !important; }

/* ============================================================
   Secundaire heroes - in lijn met de homepage-hero:
   pill-eyebrow + titel-streep. Hero = .et_pb_section_0.
   ============================================================ */
/* eyebrow (eerste tekstmodule-<p> in de hero) -> pill */
#et-boc .et_pb_section_0 .et_pb_text_0 .et_pb_text_inner p{
  display:inline-flex !important; align-items:center; gap:9px;
  font-family:"Ubuntu",Helvetica,Arial,sans-serif !important;
  font-weight:600 !important; font-size:12.5px !important; line-height:1 !important;
  letter-spacing:.16em !important; text-transform:uppercase !important; color:#fff !important;
  background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.34) !important;
  padding:8px 15px !important; border-radius:50px !important; margin:0 0 12px !important;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  animation:ovhFadeUp .6s .1s both; }
/* groen pulserend bolletje in de pill (zoals de homepage-hero) */
#et-boc .et_pb_section_0 .et_pb_text_0 .et_pb_text_inner p::before{
  content:""; flex:0 0 auto; width:8px; height:8px; border-radius:50%;
  background:#43e39b; box-shadow:0 0 0 0 rgba(67,227,155,.7); animation:ovhPulse 2s infinite; }
@keyframes ovhPulse{
  0%{box-shadow:0 0 0 0 rgba(67,227,155,.6)}
  70%{box-shadow:0 0 0 9px rgba(67,227,155,0)}
  100%{box-shadow:0 0 0 0 rgba(67,227,155,0)} }
/* hero-titel: strakke regelafstand als de homepage (i.p.v. de rustige 1.25 van lopende tekst) */
#et-boc .et_pb_section_0 .et_pb_text_inner h1{ line-height:1.06 !important; }
/* (titel-streepje op secundaire heroes verwijderd - gaf ruis) */
@keyframes ovhFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   Homepage-achtige gradient-overlay op de secundaire heroes.
   Radiale merk-gradient + kleur-blobs over de bestaande foto;
   foto schijnt zacht door (alpha < 1). Tekst blijft erboven.
   ============================================================ */
#et-boc .et_pb_section_0{ position:relative; }
#et-boc .et_pb_section_0::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    radial-gradient(58% 68% at 9% 6%, rgba(255,63,174,.30), transparent 64%),
    radial-gradient(55% 65% at 93% 96%, rgba(77,91,214,.28), transparent 62%),
    radial-gradient(130% 140% at 12% 8%, rgba(58,42,110,.46) 0%, rgba(46,58,123,.44) 36%, rgba(122,31,107,.44) 76%, rgba(196,38,126,.50) 100%);
  background-size:46px 46px, 46px 46px, auto, auto, auto; }
/* tekst/content boven de overlay houden */
#et-boc .et_pb_section_0 > .et_pb_row,
#et-boc .et_pb_section_0 .et_pb_row{ position:relative; z-index:2; }
/* dividers: alleen boven de overlay tillen, hun eigen (absolute) positie NIET overschrijven */
#et-boc .et_pb_section_0 .et_pb_bottom_inside_divider,
#et-boc .et_pb_section_0 .et_pb_top_inside_divider{ z-index:2; }

/* ============================================================
   Hero-CTA (brochure-knop) -> witte primaire pill zoals de
   homepage-hero (.ovh__btn--primary): wit vlak, navy tekst,
   hover-lift, geen Divi-hoverpijl. Alleen binnen de hero.
   ============================================================ */
#et-boc .et_pb_section_0 a.et_pb_button,
#et-boc .et_pb_section_0 a.et_pb_button:hover{
  background:#fff !important; color:#2e3a7b !important; border:0 !important;
  border-radius:50px !important; padding:15px 34px !important;
  font-family:"Ubuntu",Helvetica,Arial,sans-serif !important; font-weight:700 !important;
  font-size:16px !important; letter-spacing:0 !important; text-transform:none !important;
  box-shadow:0 12px 30px rgba(0,0,0,.22) !important;
  transition:transform .15s, box-shadow .15s !important; }
#et-boc .et_pb_section_0 a.et_pb_button:hover{
  transform:translateY(-3px) !important; box-shadow:0 18px 40px rgba(0,0,0,.3) !important; }
/* Divi voegt op hover een pijl toe via ::after; de homepage-knoppen hebben er geen */
#et-boc .et_pb_section_0 a.et_pb_button::after{ display:none !important; content:"" !important; }

/* ============================================================
   Hero-content uitlijnen met de homepage-hero (positie + breedte):
   zelfde 1200px-container met 32px padding (pill/titel left = homepage),
   en pill 35px hoger (zelfde afstand onder het menu).
   ============================================================ */
#et-boc .et_pb_section_0 .et_pb_row{
  width:100% !important; max-width:1200px !important;
  padding-left:32px !important; padding-right:32px !important; margin-left:auto !important; margin-right:auto !important; }
#et-boc .et_pb_section_0{ padding-top:18px !important; border-left:0 !important; }

/* ============================================================
   FAQ-toggles: leesbaar tijdens het openen.
   De toggle wisselt van navy (dicht, witte vraag) naar een licht
   paneel (open, donkere tekst). Divi zet er een 'transition: .9s'
   op, waardoor de achtergrond 0,9s lang van navy -> licht faadt
   terwijl de donkere antwoordtekst al zichtbaar is -> even
   donker-op-donker. We laten de achtergrond/kleur direct
   omschakelen; de hoogte-slide (jQuery) blijft gewoon animeren.
   ============================================================ */
#et-boc .et_pb_toggle,
#et-boc .et_pb_toggle.et_pb_toggle_open,
#et-boc .et_pb_toggle.et_pb_toggle_close{ transition:none !important; }

/* ============================================================
   Footer-kolomtitels (voorheen inline in de footer-partial).
   ============================================================ */
.ov-footer-title{font-size:18px!important;line-height:1em;color:#ffffff!important}

/* ============================================================
   Homepage-hero (.ovh) - voorheen inline in index.html.
   Rendert alleen waar .ovh bestaat (homepage). ovhPulse hergebruikt uit boven.
   ============================================================ */
/* oude Divi-hero verbergen (alleen homepage); makkelijk terug te zetten */
.et_pb_section_0.et_pb_fullwidth_section{display:none !important;}

.ovh{--navy:#2e3a7b;--magenta:#c4267e;--ink:#141a3a;
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(600px,86vh,820px);display:flex;align-items:center;
  background:radial-gradient(120% 130% at 12% 8%, #3a2a6e 0%, var(--navy) 38%, #7a1f6b 78%, var(--magenta) 100%);
  font-family:"Ubuntu Sans",Helvetica,Arial,sans-serif;color:#fff;}
.ovh *{box-sizing:border-box;}

/* ambient blobs + grid + ecg */
.ovh__bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.ovh__grid{position:absolute;inset:-2px;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(120% 90% at 60% 40%,#000 30%,transparent 78%);opacity:.6;}
.ovh__blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;mix-blend-mode:screen;}
.ovh__blob--1{width:520px;height:520px;left:-140px;top:-120px;background:#ff3fae;animation:ovhFloat 14s ease-in-out infinite;}
.ovh__blob--2{width:460px;height:460px;right:-120px;bottom:-160px;background:#4d5bd6;animation:ovhFloat 18s ease-in-out infinite reverse;}
@keyframes ovhFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.12)}}





/* layout */
.ovh__inner{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;
  padding:110px 32px 150px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.ovh__content{max-width:560px;}
.ovh__eyebrow{display:inline-flex;align-items:center;gap:9px;
  font-family:"Ubuntu",Helvetica,Arial,sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.34);
  padding:8px 15px;border-radius:50px;}
.ovh__eyebrow .dot{width:8px;height:8px;border-radius:50%;background:#43e39b;box-shadow:0 0 0 0 rgba(67,227,155,.7);animation:ovhPulse 2s infinite;}

.ovh__title{color:#fff !important;font-family:"Ubuntu",Helvetica,Arial,sans-serif;font-weight:800;line-height:1.05;letter-spacing:-.01em;
  font-size:clamp(38px,5vw,66px);margin:22px 0 0;text-shadow:0 6px 30px rgba(0,0,0,.18);}
.ovh__title .hl{position:relative;white-space:nowrap;}
.ovh__title .hl::after{content:"";position:absolute;left:0;right:0;bottom:.07em;height:.28em;z-index:-1;border-radius:6px;
  background:linear-gradient(90deg,#ff5fb6,#ffcf5a);transform:scaleX(0);transform-origin:left;animation:ovhWipe .9s .5s cubic-bezier(.2,.8,.2,1) forwards;}
@keyframes ovhWipe{to{transform:scaleX(1)}}
.ovh__sub{font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:rgba(255,255,255,.9);margin:22px 0 0;max-width:520px;}
.ovh__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}
.ovh__btn{display:inline-flex;align-items:center;gap:10px;font-family:"Ubuntu",Helvetica,Arial,sans-serif;font-weight:700;font-size:16px;
  padding:16px 30px;border-radius:50px;text-decoration:none;transition:transform .16s,box-shadow .16s,background .16s;cursor:pointer;}
.ovh__btn--primary{background:#fff;color:var(--navy);box-shadow:0 12px 30px rgba(0,0,0,.22);}
.ovh__btn--primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.3);}
.ovh__btn--ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.5);}
.ovh__btn--ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-3px);}
.ovh__steps{display:flex;align-items:center;gap:10px;margin-top:30px;font-size:14px;color:rgba(255,255,255,.82);flex-wrap:wrap;}
.ovh__steps b{font-family:"Ubuntu",Helvetica,Arial,sans-serif;font-weight:700;color:#fff;}
.ovh__steps .arw{opacity:.6;}

/* dashboard-kaart */
.ovh__visual{display:flex;justify-content:center;}
.ovh__card{position:relative;width:100%;max-width:380px;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.25);border-radius:24px;padding:26px 26px 24px;
  box-shadow:0 30px 70px rgba(10,8,40,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transform:translateY(18px);opacity:0;animation:ovhCardIn .9s .25s cubic-bezier(.2,.8,.2,1) forwards;}
@keyframes ovhCardIn{to{transform:translateY(0);opacity:1}}
.ovh__card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.ovh__card-top span{font-family:"Ubuntu",Helvetica,Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.9);}
.ovh__live{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#43e39b;font-weight:700;letter-spacing:.08em;}
.ovh__live i{width:7px;height:7px;border-radius:50%;background:#43e39b;animation:ovhPulse 1.8s infinite;}
.ovh__gauge{position:relative;width:170px;height:170px;margin:6px auto 4px;}
.ovh__gauge svg{transform:rotate(-90deg);}
.ovh__gauge .trk{fill:none;stroke:rgba(255,255,255,.16);stroke-width:13;}
.ovh__gauge .prg{fill:none;stroke:url(#ovhGrad);stroke-width:13;stroke-linecap:round;
  stroke-dasharray:339.29;stroke-dashoffset:339.29;transition:stroke-dashoffset 1.7s cubic-bezier(.2,.8,.2,1);}
.ovh__score{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ovh__score b{font-family:"Ubuntu",Helvetica,Arial,sans-serif;font-weight:800;font-size:46px;line-height:1;color:#fff;}
.ovh__score small{font-size:12px;color:rgba(255,255,255,.7);margin-top:4px;letter-spacing:.02em;}
.ovh__doms{margin-top:14px;display:grid;gap:11px;}
.ovh__dom{display:grid;grid-template-columns:78px 1fr 34px;align-items:center;gap:10px;font-size:12.5px;color:rgba(255,255,255,.9);}
.ovh__bar{height:7px;border-radius:5px;background:rgba(255,255,255,.16);overflow:hidden;}
.ovh__bar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#ff5fb6,#ffcf5a);transition:width 1.4s cubic-bezier(.2,.8,.2,1);}
.ovh__dom em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:#fff;font-weight:600;}
.ovh__note{margin-top:16px;font-size:11px;color:rgba(255,255,255,.6);text-align:center;}

.ovh__wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;line-height:0;z-index:1;pointer-events:none;}
.ovh__wave svg{display:block;width:100%;height:70px;}
@media(max-width:900px){
  .ovh__inner{grid-template-columns:1fr;gap:36px;padding:96px 22px 70px;text-align:center;}
  .ovh__content{max-width:none;margin:0 auto;}
  .ovh__cta,.ovh__steps{justify-content:center;}
  .ovh__eyebrow{margin:0 auto;}
  .ovh__visual{order:2;}
}

/* ============================================================
   404-pagina (.ov404) - on-brand, gradient + snelle navigatie.
   ============================================================ */
.ov404{ position:relative; overflow:hidden; min-height:64vh; display:flex; align-items:center;
  background:radial-gradient(120% 130% at 15% 10%, #3a2a6e 0%, #2e3a7b 40%, #7a1f6b 80%, #c4267e 100%);
  color:#fff; text-align:center; padding:72px 24px; font-family:"Ubuntu Sans",Helvetica,Arial,sans-serif; }
.ov404 *{ box-sizing:border-box; }
.ov404__inner{ position:relative; z-index:2; max-width:700px; margin:0 auto; }
.ov404__eyebrow{ display:inline-block; font-family:"Ubuntu",sans-serif; font-weight:600; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.34); padding:8px 15px; border-radius:50px; }
.ov404__big{ font-family:"Ubuntu",sans-serif; font-weight:800; font-size:clamp(96px,17vw,180px); line-height:.9;
  margin:16px 0 0; letter-spacing:-.02em; background:linear-gradient(90deg,#ff5fb6,#ffcf5a);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ov404 h1.ov404__title{ font-family:"Ubuntu",sans-serif !important; font-weight:800 !important; color:#fff !important;
  font-size:clamp(26px,3.4vw,40px) !important; line-height:1.12 !important; margin:4px 0 0 !important; padding:0 !important; }
.ov404__sub{ font-size:18px; line-height:1.6; color:rgba(255,255,255,.9); margin:16px auto 0; max-width:540px; }
.ov404__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px; }
.ov404__btn{ display:inline-flex; align-items:center; font-family:"Ubuntu",sans-serif; font-weight:700; font-size:16px;
  padding:15px 32px; border-radius:50px; text-decoration:none; transition:transform .15s, box-shadow .15s, background .15s; }
.ov404__btn--primary{ background:#fff; color:#2e3a7b; box-shadow:0 12px 30px rgba(0,0,0,.22); }
.ov404__btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.3); }
.ov404__btn--ghost{ background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.5); }
.ov404__btn--ghost:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }
.ov404__links{ margin-top:34px; font-size:14px; color:rgba(255,255,255,.85);
  display:flex; gap:10px 20px; flex-wrap:wrap; justify-content:center; align-items:center; }
.ov404__links a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.ov404__links a:hover{ color:#ffcf5a; }

/* ============================================================
   One Value Flows - subtiele grafische verrijking.
   Alleen actief op /flow/-pagina's (body.ov-flow). Legt zich op
   de diagnose-structuur; verandert de huisstijl niet.
   ============================================================ */
/* icoon boven de 3 feature-koppen */
.ov-flow .ovf-ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:13px;background:linear-gradient(135deg,rgba(196,38,126,.12),rgba(46,58,123,.12));
  color:#c4267e;margin:0 0 14px;}
.ov-flow .ovf-ico svg{width:24px;height:24px;display:block;}
/* 'Meest gekozen'-badge (Flow Care+) */
.ov-flow .ovf-badge{display:inline-block;background:#c4267e;color:#fff;font-family:"Ubuntu",Helvetica,Arial,sans-serif;
  font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:50px;margin:0 0 12px;}
/* voorbeeld-chips (van X naar Y) */
.ov-flow .ovf-chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 4px;}
.ov-flow .ovf-chip{display:inline-flex;align-items:center;gap:8px;background:#f6f7fb;border:1px solid #e7e9f2;
  border-radius:50px;padding:9px 16px;font-family:"Ubuntu",Helvetica,Arial,sans-serif;font-weight:600;font-size:14px;color:#2e3a7b;}
.ov-flow .ovf-chip .ar{color:#c4267e;font-weight:800;}
/* scroll-reveal: alleen als JS draait (body krijgt .ovf-js via html-element);
   valt anders terug op gewoon zichtbaar. Respecteert reduced-motion. */
.ovf-js .ovf-reveal{opacity:0;transform:translateY(22px);will-change:opacity,transform;}
.ovf-js .ovf-reveal.ovf-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease;}
@media (prefers-reduced-motion:reduce){.ovf-js .ovf-reveal{opacity:1 !important;transform:none !important;transition:none !important;}}

/* Oude Divi-sjabloon-icoontjes (et_pb_icon: quote-teken, feature-iconen,
   FAQ-icoon) verbergen op de flow-pagina's. Alleen de getinte, afgeronde
   ovf-ico-vlakjes blijven over. Footer gebruikt geen et_pb_icon. */
.ov-flow .et_pb_icon{display:none !important;}

/* ============================================================
   Site-breed: oude Divi-icoontjes (.et_pb_icon) als icoon in een
   getint, afgerond vlakje - identiek aan de flow-ovf-ico.
   ============================================================ */
#et-boc .et_pb_icon .et-pb-icon{
  display:flex !important; align-items:center; justify-content:center;
  width:48px !important; height:48px !important; border-radius:13px !important;
  background:linear-gradient(135deg, rgba(196,38,126,.12), rgba(46,58,123,.12)) !important;
  color:#c4267e !important; font-size:24px !important; line-height:1 !important;
}
/* op donkere secties: iets steviger vlak zodat het contrast houdt */
#et-boc .et_pb_icon.et_pb_bg_layout_dark .et-pb-icon{
  background:rgba(255,255,255,.16) !important;
}

/* ============================================================
   Secundaire hero's (alle pagina's behalve homepage): titel 66px en
   afbreken op twee derde van de hero. De lege/decoratieve rechter
   hero-kolom verbergen we; de tekstkolom krijgt 2/3 breedte, zodat
   de foto in de resterende derde doorschijnt.
   Alleen >980px; daaronder staat de kolom toch al full-width.
   (Homepage-hero = .ovh; diens .et_pb_section_0 staat op display:none.)
   ============================================================ */
@media (min-width:981px){
  #et-boc .et_pb_section_0 .et_pb_row > .et_pb_column:first-child{
    width:66.666% !important; margin-right:0 !important;
  }
  #et-boc .et_pb_section_0 .et_pb_row > .et_pb_column:first-child ~ .et_pb_column{
    display:none !important;
  }
  #et-boc .et_pb_section_0 .et_pb_text_inner h1{ font-size:66px !important; }
}

/* ============================================================
   Herbruikbare reveal-on-scroll (ov-reveal): subtiele fade + lift
   zodra een element in beeld komt. Alleen actief als JS draait
   (html.ov-js) -> zonder JS gewoon zichtbaar. Respecteert
   reduced-motion. Site-breed inzetbaar; nu als pilot op de homepage.
   ============================================================ */
html.ov-js .ov-reveal{opacity:0;transform:translateY(20px);will-change:opacity,transform;}
html.ov-js .ov-reveal.ov-in{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
@media (prefers-reduced-motion:reduce){
  html.ov-js .ov-reveal{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* ============================================================
   Flow Care-paneel (flow-service): 3 beheerniveaus naast elkaar in
   huisstijl. Losse (lege) tekstmodules in sectie 2 verbergen we.
   ============================================================ */
.ov-flow-service .et_pb_section_2 .et_pb_text:not(.et_pb_text_6){display:none !important;}
.ov-flow .ovf-care{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:26px 0 0;align-items:start;}
.ov-flow .ovf-tier{background:#fff;border:1px solid #e7e9f2;border-radius:18px;padding:30px 26px;
  box-shadow:0 10px 30px rgba(24,28,64,.06);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.ov-flow .ovf-tier:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(24,28,64,.11);border-color:#d7dbee;}
.ov-flow .ovf-tier .ovf-ico{margin:0 0 16px;}
.ov-flow .ovf-tier h3{font-family:"Ubuntu",Helvetica,Arial,sans-serif !important;font-weight:800 !important;
  font-size:21px !important;color:#141a3a !important;line-height:1.2 !important;margin:0 0 4px !important;}
.ov-flow .ovf-tier__for{font-size:14px;color:#7b7e88;margin:0 0 16px;line-height:1.4;}
.ov-flow .ovf-tier__base{font-size:13px;color:#7b7e88;font-style:italic;margin:0 0 6px;}
.ov-flow .ovf-tier ul{list-style:none;margin:0;padding:0;}
.ov-flow .ovf-tier li{position:relative;padding:9px 0 9px 26px;font-size:15px;line-height:1.5;color:#4a4d55;border-top:1px solid #eef0f6;}
.ov-flow .ovf-tier li:first-child{border-top:none;}
.ov-flow .ovf-tier li::before{content:"\2713";position:absolute;left:2px;top:9px;color:#c4267e;font-weight:800;font-size:13px;}
.ov-flow .ovf-tier li:first-child::before{top:0;}
@media (max-width:900px){ .ov-flow .ovf-care{grid-template-columns:1fr;} }

/* Care-paneel fix: gelijke kolommen + volle sectiebreedte (lege linkerkolom weg) */
.ov-flow .ovf-care{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (min-width:981px){
  .ov-flow-service .et_pb_section_2 .et_pb_row > .et_pb_column:first-child{display:none !important;}
  .ov-flow-service .et_pb_section_2 .et_pb_row > .et_pb_column:last-child{width:100% !important;margin-left:0 !important;}
}

/* ============================================================
   Alle quote-teksten (blockquote) site-breed uniform:
   Ubuntu Sans 700 italic, navy (#2e3a7b), 24px / line-height 41px.
   #et-boc (ID) wint van de per-pagina genummerde blockquote-regels.
   ============================================================ */
#et-boc .et_pb_text_inner blockquote,
#et-boc blockquote{
  font-family:"Ubuntu Sans",Helvetica,Arial,sans-serif !important;
  font-weight:700 !important; font-style:italic !important;
  color:#2e3a7b !important; font-size:24px !important; line-height:41px !important;
}

/* Prijs per Flow Care-niveau: prominent bedrag + periode, huisstijl */
.ov-flow .ovf-tier__price{display:flex;align-items:baseline;gap:8px;margin:4px 0 16px;padding:0 0 16px;border-bottom:1px solid #eef0f6;}
.ov-flow .ovf-tier__amount{font-family:"Ubuntu",Helvetica,Arial,sans-serif;font-weight:800;font-size:30px;line-height:1;color:#2e3a7b;}
.ov-flow .ovf-tier__period{font-size:13px;color:#7b7e88;}

/* Care-paneel responsive fix: op mobiel/tablet 1 kolom (deze regel staat
   BEWUST als laatste, want de minmax-fix hierboven is unconditional en zou
   anders de eerdere mobiele regel overrulen). */
@media (max-width:900px){
  .ov-flow .ovf-care{grid-template-columns:minmax(0,1fr) !important;}
  .ov-flow .ovf-tier__price{flex-wrap:wrap;}
}