/* ============================================================
   EFFECTIEF — DIENST-HERO MERKVLAK  (v3, in de hoek)
   Zelfde afwerking als de homepage-hero: het terracotta vlak
   zit vast tegen de bovenkant en de rechter schermrand, loopt
   linksonder rond af, met de woorden uitgelijnd op de kop en
   witruimte eronder. Alleen dit css-bestand vervangen;
   de pagina's zelf blijven ongewijzigd.
   ============================================================ */

/* kolommen boven uitlijnen (alleen op merkvlak-pagina's;
   case-pagina's met echte foto's blijven gecentreerd) */
.d-hero-grid:has(.dh-visual){align-items:start}

/* afstand van wrap-rand tot schermrand, gelijk aan de site-wrap */
:root{--dh-edge:max(48px, calc((100vw - 1480px)/2 + 48px));--dh-terra-d:#c84e1f}

.d-hero-visual .main.dh-visual{position:relative;overflow:hidden;aspect-ratio:auto;display:block;
  background:linear-gradient(168deg,#ef6f3d,#E8602C 48%,#c84e1f);
  /* de hoek in: omhoog tot onder de menubalk, en door tot de schermrand */
  margin-top:var(--dh-up,-124px);
  margin-right:calc(-1 * var(--dh-edge));
  border-radius:0 0 0 clamp(90px,10vw,160px);
  padding:var(--dh-pt,170px) var(--dh-edge) clamp(60px,5.5vw,88px) clamp(34px,3vw,52px)}
.dh-visual::before{content:"";position:absolute;width:480px;height:480px;right:-170px;top:-190px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.2),transparent 65%)}
.dh-visual::after{content:none}

/* woorden: zelfde korps en ritme als de pagina-kop */
.dh-words{position:relative;margin:0;
  font-size:clamp(2.2rem,4.2vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.18;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.85)}
.dh-words em{display:block;font-style:normal;-webkit-text-stroke:0;color:#fff}
.dh-rule{position:relative;width:44px;height:2.5px;background:rgba(255,255,255,.85);border-radius:2px;margin-bottom:22px}

/* donker kaartje: half over de onderrand van het vlak */
.d-hero-visual:has(.dh-visual) .d-hero-card{bottom:auto;top:calc(100% - 46px)}

@media(max-width:960px){
  .d-hero-visual .main.dh-visual{margin:0;border-radius:20px 20px 20px 64px;padding:40px 28px 56px}
  .d-hero-visual:has(.dh-visual) .d-hero-card{left:16px;top:calc(100% - 40px)}
  .dh-words{font-size:clamp(2rem,8vw,2.6rem)}
}

/* ============================================================
   SLOT-CTA (.d-final) — mini-split over de volle breedte
   Zelfde markup, nieuwe look: witte tekstkant op de wrap-lijn,
   terracotta actiepaneel dat doorloopt tot de schermrand,
   met de ronde afloop linksonder. Echo van de hero.
   ============================================================ */
.d-final{padding:60px 0 100px;overflow:hidden}
.d-final .box{background:transparent;border-radius:0;padding:0;overflow:visible}
.d-final .box::before,.d-final .box::after{content:none}
.d-final-grid{grid-template-columns:1.1fr .9fr;gap:clamp(40px,5vw,90px);align-items:center}
.d-final .d-eyebrow{color:var(--dh-terra-d,#c84e1f)}
.d-final h2{color:#0b161d}
.d-final p{color:#63666b}

/* actiepaneel: naar de schermrand, rond aflopend linksonder */
.d-final-side{position:relative;overflow:hidden;color:#fff;align-items:stretch;
  background:linear-gradient(168deg,#ef6f3d,#E8602C 48%,#c84e1f);
  border-radius:28px 0 0 clamp(70px,7vw,120px);
  margin-right:calc(-1 * var(--dh-edge));
  padding:clamp(48px,4.5vw,68px) var(--dh-edge) clamp(48px,4.5vw,68px) clamp(36px,3.5vw,60px)}
.d-final-side::before{content:"";position:absolute;width:380px;height:380px;right:-150px;top:-170px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.2),transparent 65%)}
.d-final-side > *{position:relative}
/* knop keert om: wit op terracotta */
.d-final-side .btn-terra{background:#fff;color:#0b161d !important;transition:transform .18s,box-shadow .4s,background .18s}
.d-final-side .btn-terra .a{border-left:1.5px solid #e7e7e4}
.d-final-side .btn-terra:hover{background:#fff;transform:translateY(-2px);box-shadow:0 14px 34px rgba(11,22,29,.25)}
.d-final-call{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28)}
.d-final-call:hover{background:rgba(255,255,255,.18)}
.d-final-call .ic{background:#0b161d}
.d-final-reassure,.d-final-side .note{color:rgba(255,255,255,.7);text-align:left}

@media(max-width:960px){
  .d-final{padding:40px 0 70px}
  .d-final-grid{grid-template-columns:1fr;gap:36px}
  .d-final-side{margin-right:-24px;margin-left:-24px;border-radius:24px 24px 24px 56px;
    padding:40px 28px}
}

/* definitief: reassure wit, knop met meer lucht (laatst geladen bestand wint) */
.d-final p.d-final-reassure,.d-final-side .note{color:#fff !important}
.d-final .d-final-btn{margin-top:40px}