/* Paul Mediation - 1-op-1 nagebouwd van de Salient-site (okt 2026).
   Maten gemeten op paulmediation.nl (desktop 1466 breed, telefoon 390 breed).
   Knop, zijmenu en parallax volgen de Salient-code (zelfde klassen en waarden). */

:root {
  --cream: #f5f1ee;
  --strip: #ded4c8;
  --navy: #00334d;
  --deep: #001d28;
  --sky: #c3dceb;
  --orange: #d65b2f;
  --ink: #1d1d1f;
  --btn-ink: #151419;
  --mist: #aebdc1;
  --slate: #5e6d78;
  --grey: #6c7275;
  --frame: 26px;
  --hdr: 119px;
  --cw: calc(100vw - 46px); /* breedte van de inhoud op de telefoon */
  --ocm-ease: cubic-bezier(.15, .2, .1, 1);
  --serif: "adelle", sans-serif;
  --sans: "Poppins", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-bottom: 26px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 30px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; padding-bottom: 1.5em; }
p:last-child { padding-bottom: 0; }
h1, h2, h3, h5, h6 { margin: 0; font-weight: 400; }
h1 { font-family: var(--serif); font-weight: 100; font-size: 54px; line-height: 54px; }
h2 { font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 50px; }
h3 { font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 45px; }
[id] { scroll-margin-top: var(--hdr); }

/* ---------- Bouwstenen voor afstanden (zoals Salient) ---------- */
.kop { margin-bottom: 24px; }          /* kop (h3) naar tekst: 24 px */
.kop--h2 { margin-bottom: 31px; }      /* kop (h2) naar tekst: 31 px */
.tekst { margin-bottom: 25.5px; }      /* tekstblok naar wat eronder staat */
.kop:last-child, .tekst:last-child, .nectar-cta:last-child { margin-bottom: 0; }
.sp { height: var(--d); }              /* tussenruimte, desktop / telefoon */

/* ---------- Kader rond de pagina (Salient body border) ---------- */
.body-border-top, .body-border-right, .body-border-bottom, .body-border-left {
  position: fixed; z-index: 9997; background: var(--cream);
  transition: opacity .15s ease;
}
.body-border-top { top: 0; left: 0; width: 100%; height: 26px; }
.body-border-bottom { bottom: 0; left: 0; width: 100%; height: 26px; }
.body-border-left { top: 0; left: 0; width: 26px; height: 100%; }
.body-border-right { top: 0; right: 0; width: 26px; height: 100%; }
.material-ocm-open .body-border-top, .material-ocm-open .body-border-right,
.material-ocm-open .body-border-bottom, .material-ocm-open .body-border-left { opacity: 0; }

/* ---------- Pagina-omhulsel (voor het zijmenu-effect) ---------- */
.ocm-effect-wrap {
  position: relative;
  z-index: 10;
  background: var(--cream);
  transform-origin: center;
  transition: transform .8s var(--ocm-ease);
}
.ocm-effect-wrap-inner { backface-visibility: hidden; }
main { padding-top: var(--hdr); }

/* ---------- Header (global section) ---------- */
#header-outer {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9998;
  height: var(--hdr);
  background: var(--cream);
  box-shadow: rgba(0, 0, 0, .15) 0 3px 45px 0;
  transition: box-shadow .4s ease;
}
.material-ocm-open #header-outer { box-shadow: none; }
.hdr-inner {
  max-width: 1425px;
  height: 100%;
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#logo img { height: 31px; width: auto; }
.hdr-right { display: flex; align-items: stretch; height: 100%; gap: 36px; margin-right: 20px; }
.main-nav { display: flex; align-items: stretch; gap: 36px; margin: 0; padding: 0; list-style: none; }
.main-nav > li { position: relative; display: flex; align-items: center; }
.main-nav > li > a { font-size: 16px; line-height: 22px; color: var(--ink); }
.main-nav .t { position: relative; display: inline-block; }
.main-nav .t::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%;
  border-top: 2px solid var(--navy);
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform .35s cubic-bezier(.52, .01, .16, 1);
}
.main-nav > li > a:hover .t::after,
.main-nav > li:hover > a .t::after,
.main-nav > li.is-current > a .t::after { transform: scaleX(1); }

.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 240px;
  margin: 0;
  padding: 20px;
  list-style: none;
  background: var(--cream);
  box-shadow: rgba(0, 0, 0, .08) 0 6px 28px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.main-nav > li:hover .sub-menu,
.main-nav > li:focus-within .sub-menu { opacity: 1; visibility: visible; transform: none; }
.sub-menu a { display: block; padding: 6px; font-size: 16px; line-height: 26px; color: var(--ink); transition: color .2s; }
.sub-menu a:hover { color: var(--navy); }

/* LinkedIn: zelfde hover als Salient. Het icoon schuift 22px omhoog, een navy kopie schuift eronder vandaan. */
.hdr-social { display: block; align-self: center; height: 22px; overflow: hidden; margin-left: 13px; color: var(--ink); line-height: 0; }
.hdr-social-ico { display: flex; flex-direction: column; transition: transform .25s ease; }
.hdr-social svg { width: 16px; height: 16px; margin: 3px 0; fill: currentColor; }
.hdr-social svg + svg { color: var(--navy); }
.hdr-social:hover .hdr-social-ico,
.hdr-social:focus-visible .hdr-social-ico { transform: translateY(-22px); }

.burger {
  display: flex; align-items: center;
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink);
}
.burger-lines { position: relative; display: block; width: 24px; height: 21px; }
.burger-lines i {
  position: absolute; left: 0; height: 2px; background: currentColor;
  transition: width .3s ease;
}
.burger-lines i:nth-child(1) { top: 2px; width: 22px; }
.burger-lines i:nth-child(2) { top: 9px; width: 22px; }
.burger-lines i:nth-child(3) { top: 16px; width: 16px; }
.burger:hover .burger-lines i:nth-child(3) { width: 22px; }
.burger--mobile { display: none; }

/* ---------- Secties ---------- */
.frame { padding: 0 var(--frame); }
.container { max-width: 1425px; margin: 0 auto; padding: 0 90px; }
.sec { position: relative; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }

.strip { height: 12px; background: var(--strip); }

/* 1. Bericht over Paul */
.herdenking { background: var(--deep); color: var(--cream); padding: 6vw 0 5vw; }
.herdenking .cols { display: grid; grid-template-columns: 1fr 2fr 1fr; }
.herdenking .mid { padding: 0 50px; }

/* 2. Paul Boontje */
.paul { background: var(--navy); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.paul::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 11%; background: var(--sky); z-index: 0; }
.paul .txt { position: relative; z-index: 1; padding: 19% 10% 0 14%; color: #fff; }
.paul .intro { font-size: 20px; line-height: 36px; color: var(--mist); }
.paul .foto { position: relative; z-index: 1; min-height: 85vh; overflow: hidden; background: var(--navy); clip-path: inset(0); }

/* Parallax-lagen (waarden uit Salient: laag 20% van het scherm hoger, beweegt 0,2x mee) */
.plx { position: absolute; left: 0; right: 0; top: 0; height: 100%; background-size: cover; background-position: 50% 0%; will-change: transform; }

/* 3. Conflictdomein */
.conflict { background: var(--sky); color: var(--slate); padding: 5vw 0 6vw; text-align: center; }
.conflict .col { padding: 2% 15% 0; }
.conflict h2 { color: var(--navy); }

/* 4. Elke stap zeker */
.elkestap { background: #fff; color: var(--grey); padding: 6vw 0; }
.elkestap .c1 { padding: 0 5% 3% 0; }
.elkestap .c2 { padding: 0 0 0 5%; }
.elkestap h3 { color: var(--navy); }

/* 5. Bergen */
.bergen { overflow: hidden; height: calc(10vw + 250px); background: var(--cream); }

/* 6. Mediation */
.mediation { background: var(--navy); color: var(--mist); padding: 6vw 0; }
.mediation h3 { color: #fff; }
.mediation .c1 { padding: 0 5% 0 0; }
.mediation .c2 { padding: 0 0 0 5%; }

/* 7. Mediation en meer */
.meer { background: var(--orange); color: var(--cream); padding: 5vw 0 3vw; text-align: center; }
.meer h3 { color: #fff; }
.meer .col { padding: 0 14% 3%; }

/* Contactpagina */
.contact { background: #fff; padding: 6vw 0; }
.contact .c1 { padding: 0 5% 0 0; }
.contact .c2 { padding: 0 0 0 5%; }
.map { height: 425px; margin-bottom: 24px; background: #e9e9e9; }
.map .leaflet-tile, .map .leaflet-tile-container { filter: grayscale(1); }
.contact .loc strong { font-weight: 600; }
.map-dot { position: relative; width: 20px; height: 20px; }
.map-dot .middle { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 30px; background: var(--navy); }
.map-dot .signal, .map-dot .signal2 {
  position: absolute; left: -80px; top: -80px; width: 180px; height: 180px; border-radius: 200px;
  background: var(--navy); opacity: 0; pointer-events: none;
  animation: animationSignal 2s cubic-bezier(0, .55, .55, 1) .78s infinite forwards;
}
.map-dot .signal2 { animation-delay: 1s; }
@keyframes animationSignal {
  0% { opacity: 0; transform: scale(0); }
  1% { opacity: .25; }
  100% { opacity: 0; transform: scale(1); }
}

/* Formulier (Fluent Forms-stijl van de oude site) */
.ff-form { margin: 0; }
.ff-el-group { margin-bottom: 20px; }
.ff-el-group label { display: inline-block; margin-bottom: 5px; font-size: 16px; line-height: 30px; font-weight: 600; color: var(--ink); }
.ff-el-form-control {
  display: block; width: 100%;
  padding: 12px 15px 11px;
  border: 1px solid #dadbdd; border-radius: 7px;
  background: rgba(0, 0, 0, .04);
  color: #606266;
  height: 41.5px;
  font-family: var(--sans); font-size: 14px; line-height: 16.5px;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  -webkit-appearance: none; appearance: none;
}
.ff-el-form-control:focus { outline: none; border-color: #b4b6ba; }
textarea.ff-el-form-control { height: 250px; resize: vertical; }
.ff-btn-submit {
  display: inline-block;
  padding: 16px 23px;
  border: 1px solid transparent; border-radius: 200px;
  background-color: var(--navy); color: #fff;
  font-family: "Open Sans", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px;
  cursor: pointer;
  transition: background-color .45s cubic-bezier(.25, 1, .33, 1), color .45s cubic-bezier(.25, 1, .33, 1);
}
.ff-btn-submit:hover { background-color: var(--orange); color: #fff; }
.ff-btn-submit[disabled] { opacity: .6; cursor: default; }
.ff-melding { margin-top: 20px; font-size: 16px; line-height: 30px; }
.ff-melding--goed { color: var(--navy); }
.ff-melding--fout { color: var(--orange); }

/* Tekstpagina's (voorwaarden, privacy) */
.tekstpagina { background: #fff; padding: 6vw 0 calc(6vw + 17px); }
.tekstpagina .cols { display: grid; grid-template-columns: 1fr 2fr; padding: 0 3%; }
.tekstpagina .c1 { padding-right: 40%; }
.tekstpagina .c2 { padding-left: 7px; margin-top: 9px; }
.tekstpagina h1 { font-weight: 100; font-size: 34px; line-height: 45px; color: var(--navy); }

/* 404 */
.nietgevonden { background: #fff; padding: 6vw 0; }
.nietgevonden h1 { color: var(--navy); }

/* ---------- Knop met pijltje: Salient nectar-cta "arrow-animation" ---------- */
.nectar-cta { line-height: 0; margin-bottom: 24px; }
.nectar-cta p { margin: 0; padding: 0; color: var(--btn-ink); font-size: 17px; line-height: 30px; }
.nectar-cta.font_size_desktop_18px, .nectar-cta.font_size_desktop_18px * { font-size: 18px; line-height: 1.1; }
.nectar-cta.alignment_center { text-align: center; }
.nectar-cta.alignment_left { text-align: left; }
.nectar-cta .link_wrap {
  position: relative;
  display: inline;
  padding: 17px 33px;
  border-radius: 200px;
  background-color: var(--cream);
  cursor: pointer;
  text-decoration: inherit;
  transition: opacity .45s cubic-bezier(.25, 1, .33, 1), transform .45s cubic-bezier(.25, 1, .33, 1), border-color .45s cubic-bezier(.25, 1, .33, 1), color .45s cubic-bezier(.25, 1, .33, 1), background-color .45s cubic-bezier(.25, 1, .33, 1), box-shadow .45s cubic-bezier(.25, 1, .33, 1);
}
.nectar-cta .link_wrap .link_text { position: relative; display: inline-block; padding: 0 0 0 40px; color: inherit; }
.nectar-cta .link_wrap .link_text > .text { display: block; margin-right: 10px; animation: ctaArrowTextStart .45s cubic-bezier(.23, .46, .4, 1) forwards; }
.nectar-cta .line {
  position: absolute; left: 0; top: 50%;
  display: block; width: 25px; height: 1px;
  background-color: var(--btn-ink);
  transform-origin: left;
  transform: translateY(calc(-50% + .5px)) translateZ(0);
  animation: ctaArrowLineStart .45s cubic-bezier(.23, .46, .4, 1) forwards;
}
.nectar-cta svg { position: absolute; left: 25px; top: 50%; width: 6px; animation: ctaArrowSVGStart .45s cubic-bezier(.23, .46, .4, 1) forwards; }
.nectar-cta svg, .nectar-cta svg polyline { stroke: currentColor; }
.nectar-cta svg polyline { stroke-dashoffset: 140px; stroke-dasharray: 140px; animation: ctaArrowEnd .45s cubic-bezier(.23, .46, .4, 1) forwards; }
.nectar-cta:not(.loaded) * { animation-duration: 0s !important; }
.nectar-cta .link_wrap:hover svg { animation: ctaArrowSVGEnd .45s cubic-bezier(.23, .46, .4, 1) forwards; }
.nectar-cta .link_wrap:hover .link_text .line { animation: ctaArrowLineEnd .45s cubic-bezier(.23, .46, .4, 1) forwards; }
.nectar-cta .link_wrap:hover .link_text > .text { animation: ctaArrowTextEnd .45s cubic-bezier(.23, .46, .4, 1) forwards; }
.nectar-cta .link_wrap:hover polyline { animation: ctaArrowStart .45s ease .25s forwards; }
.nectar-cta.hover_color_ffffff .link_wrap:hover { background-color: #fff; }
.nectar-cta.text_hover_color_151419 .link_wrap:hover { color: #151419; }
.nectar-cta.text_hover_color_151419 .link_wrap:hover .line { background-color: #151419; }
.nectar-cta.hover_color_00334d .link_wrap:hover { background-color: #00334d; }
.nectar-cta.text_hover_color_ffffff .link_wrap:hover { color: #fff; }
.nectar-cta.text_hover_color_ffffff .link_wrap:hover .line { background-color: #fff; }

@keyframes ctaArrowSVGStart { 0% { transform: translateY(calc(-50% + .5px)) translateX(0) translateZ(0); } 100% { transform: translateY(calc(-50% + .5px)) translateX(-3px) translateZ(0); } }
@keyframes ctaArrowSVGEnd { 0% { transform: translateY(calc(-50% + .5px)) translateX(-3px) translateZ(0); } 100% { transform: translateY(calc(-50% + .5px)) translateX(0) translateZ(0); } }
@keyframes ctaArrowTextStart { 0% { transform: translateX(6px) translateZ(0); } 100% { transform: translateX(0) translateZ(0); } }
@keyframes ctaArrowTextEnd { 0% { transform: translateX(0) translateZ(0); } 100% { transform: translateX(6px) translateZ(0); } }
@keyframes ctaArrowStart { 0% { stroke-dashoffset: 140px; stroke-dasharray: 140px; } 100% { stroke-dasharray: 140px; stroke-dashoffset: 10px; } }
@keyframes ctaArrowEnd { 0% { stroke-dashoffset: 10px; stroke-dasharray: 150px 150px; } 40% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -53px; stroke-dasharray: 1px 150px; } }
@keyframes ctaArrowLineStart { 0% { transform-origin: left; transform: scaleX(1.2) translateY(calc(-50% + .5px)) translateZ(0); } 100% { transform: scaleX(1) translateY(calc(-50% + .5px)) translateZ(0); } }
@keyframes ctaArrowLineEnd { 0% { transform-origin: right; transform: scaleX(1) translateY(calc(-50% + .5px)) translateZ(0); } 50% { transform-origin: right; transform: scaleX(0) translateY(calc(-50% + .5px)) translateZ(0); } 51% { transform-origin: left; } 100% { transform: scaleX(1.2) translateY(calc(-50% + .5px)) translateZ(0); transform-origin: left; } }

/* ---------- Footer (global section) ---------- */
.site-footer { padding: 6vw 0; }
.ftr { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 26px; }
.ftr-logo img { width: 157px; }
.ftr-claim { margin-top: 19px; color: var(--ink); }
.ftr h5 { font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 18px; color: var(--navy); margin-bottom: 24px; }
.ftr h6 { font-family: var(--sans); font-size: 17px; line-height: 30px; margin: 1px 0; color: var(--ink); }
.ftr h6 a { transition: color .2s; }
.ftr h6 a:hover { color: var(--orange); }
.ftr h6.zwart { color: #000; }

/* ---------- Zijmenu: Salient "slide-out-from-right" (material) ---------- */
#slide-out-widget-area-bg {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  z-index: 1; visibility: hidden;
  background: var(--orange);
}
.material-ocm-open #slide-out-widget-area-bg { visibility: visible; }
#slide-out-widget-area {
  position: fixed; top: 0; right: 0;
  height: 100%;
  min-width: 360px;
  padding: 0 60px;
  z-index: 5;
  overflow: hidden;
  background: linear-gradient(145deg, #d65b2f, #d65b2f);
  color: var(--cream);
  display: flex; flex-direction: column;
}
body:not(.material-ocm-open) #slide-out-widget-area { visibility: hidden; }
#slide-out-widget-area .inner-wrap { opacity: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.material-ocm-open #slide-out-widget-area .inner-wrap { opacity: 1; }
#slide-out-widget-area .inner > div,
#slide-out-widget-area .bottom-meta-wrap { transform: translateX(110px); transition: all .8s var(--ocm-ease); }
#slide-out-widget-area.material-open .inner > div,
#slide-out-widget-area.material-open .bottom-meta-wrap { transform: translateX(0); }
#slide-out-widget-area .inner > div { margin-bottom: 25px; }
#slide-out-widget-area .inner > div:first-of-type { margin-top: -7px; }
#slide-out-widget-area .off-canvas-menu-container { min-width: 190px; }
#slide-out-widget-area .off-canvas-menu-container.mobile-only { display: none; }
#slide-out-widget-area ul { list-style: none; margin: 0; padding: 0; }
#slide-out-widget-area .off-canvas-menu-container li { position: relative; margin-bottom: 12px; line-height: 1.2; }
#slide-out-widget-area .off-canvas-menu-container li a {
  position: relative; display: inline-block;
  font-family: var(--sans); font-size: 20px; line-height: 30px; font-weight: 400;
  color: var(--cream);
  transition: color .37s cubic-bezier(.52, .01, .16, 1);
}
#slide-out-widget-area .off-canvas-menu-container li a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%;
  border-top: 2px solid #fff;
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
  transition: transform .37s cubic-bezier(.52, .01, .16, 1);
}
#slide-out-widget-area .off-canvas-menu-container li a:hover::after { transform: scaleX(1); }
#slide-out-widget-area .off-canvas-menu-container li ul { padding-left: 20px; overflow: hidden; height: 0; visibility: hidden; transition: height .5s cubic-bezier(.215, .61, .355, 1); }
#slide-out-widget-area .off-canvas-menu-container li ul > li:first-child { margin-top: 10px; }
#slide-out-widget-area .off-canvas-menu-container li ul > li:last-child { margin-bottom: 0; }
#slide-out-widget-area .off-canvas-menu-container li li a { font-size: 16px; line-height: 22px; }
#slide-out-widget-area .ocm-dropdown-arrow {
  position: absolute; right: -6px; top: 15px;
  width: 28px; height: 28px; padding: 0; border: 0; background: none;
  color: var(--cream); cursor: pointer;
  transform: translateY(-50%);
  transition: transform .5s cubic-bezier(.215, .61, .355, 1);
  display: flex; align-items: center; justify-content: center;
}
#slide-out-widget-area .ocm-dropdown-arrow svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
#slide-out-widget-area .off-canvas-menu-container li.open-submenu > ul { visibility: visible; }
#slide-out-widget-area .open-submenu > .ocm-dropdown-arrow { transform: translateY(-50%) rotate(180deg); }
#slide-out-widget-area .off-canvas-social-links { display: flex; }
#slide-out-widget-area .off-canvas-social-links a { display: inline-block; height: 24px; line-height: 38px; overflow: hidden; color: var(--cream); }
#slide-out-widget-area .off-canvas-social-links svg { width: 18px; height: 18px; fill: currentColor; transition: transform .25s ease; }
#slide-out-widget-area .off-canvas-social-links a:hover svg { transform: translateY(-3px); }
#slide-out-widget-area .bottom-meta-wrap { display: none; }

/* Sluitknop: rond, navy, met kruisje (Salient close-wrap) */
.slide_out_area_close { position: relative; display: block; width: 34px; height: 34px; }
.slide_out_area_close::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background-color: var(--navy);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .3);
  transform: scale(0) translateZ(0);
  transition: all .45s var(--ocm-ease);
}
.material-ocm-open.slide_out_area_close::before, .material-ocm-open .slide_out_area_close::before { transform: scale(1) translateZ(0); }
.slide_out_area_close:hover::before { transform: scale(1.2) translateZ(0) !important; }
.slide_out_area_close .close-wrap { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; transform: translateX(-50%) translateY(-50%); }
.slide_out_area_close .close-line { position: absolute; left: 9px; top: 0; width: 2px; height: 100%; border-radius: 5px; background: var(--cream); }
.slide_out_area_close .close-line1 { transform: rotate(-45deg); }
.slide_out_area_close .close-line2 { transform: rotate(45deg); }
.slide_out_area_close.follow-body {
  position: fixed; right: -100px; top: 50%; z-index: 10000;
  opacity: 0;
  transform: translateY(-50%) translateX(100%);
  transition: transform .8s var(--ocm-ease);
}
.slide_out_area_close.follow-body.material-ocm-open { opacity: 1; right: 0; transform: translateY(-50%) translateX(-35.55vw); }
#slide-out-widget-area .slide_out_area_close { display: none; }

/* Desktop: pagina schuift naar links en wordt kleiner */
.material-ocm-open .ocm-effect-wrap { transform: scale(.8) translateX(-32vw) translateZ(0); overflow: hidden; cursor: pointer; }
.material-ocm-open .ocm-effect-wrap-inner { transform: scale(1.007); transform-origin: center; }
.material-ocm-open .ocm-effect-wrap-inner * { pointer-events: none; }
@media (min-width: 1000px) {
  #slide-out-widget-area { min-width: 33.3vw; padding-left: 4%; padding-right: 4%; }
}

/* ---------- Naar boven ---------- */
.to-top {
  position: fixed; right: 43px; bottom: 17px; z-index: 9999;
  width: 29px; height: 29px; border-radius: 200px;
  background: rgba(0, 0, 0, .25); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s, background-color .2s;
}
.to-top svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: rgba(0, 0, 0, .4); }
.material-ocm-open .to-top { opacity: 0; visibility: hidden; }

/* ---------- Zachte animaties (koppen per woord, tekst infaden) ---------- */
.js .reveal .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js .reveal .w > span { display: inline-block; transform: translateY(105%); opacity: 0; transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .9s cubic-bezier(.16, 1, .3, 1); }
.js .reveal.in .w > span { transform: none; opacity: 1; }
.js .fade { opacity: 0; transition: opacity .9s cubic-bezier(.16, 1, .3, 1); }
.js .fade.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal .w > span, .js .fade { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* ---------- Tablet en telefoon (Salient schakelt onder 1000 px) ---------- */
@media (max-width: 999px) {
  :root { --frame: 0px; --hdr: 74px; }
  .body-border-top, .body-border-right, .body-border-bottom, .body-border-left { display: none; }
  .hdr-inner { padding: 0 28px; }
  #logo img { height: 26px; }
  .main-nav, .hdr-social, .burger--desk { display: none; }
  .hdr-right { margin-right: 0; }
  .burger--mobile { display: flex; }

  .container { padding: 0 23px; }
  .cols-2 { grid-template-columns: 1fr; row-gap: 25px; }
  .sp { height: var(--m, var(--d)); }
  .nectar-cta.alignment_phone_left { text-align: left; }

  #slide-out-widget-area .off-canvas-menu-container.mobile-only { display: block; }
  #slide-out-widget-area .bottom-meta-wrap { display: block; }
  #slide-out-widget-area .slide_out_area_close { display: block; position: absolute; right: 22px; top: 22px; z-index: 100; }
  #slide-out-widget-area .slide_out_area_close::before { background-color: rgba(0, 0, 0, .06); box-shadow: none; }
  #slide-out-widget-area .slide_out_area_close .close-line { background: #fff; }
  .slide_out_area_close.follow-body { display: none; }
  .material-ocm-open .ocm-effect-wrap { transform: scale(.835) translateX(-466px) translateZ(0); }
  #slide-out-widget-area { width: 360px; }
}

@media (max-width: 690px) {
  h1 { font-size: 30px; line-height: 30px; }
  h2 { font-size: 30px; line-height: 37.5px; }
  h3 { font-size: 25.5px; line-height: 33.75px; }
  .strip { height: 8px; }

  .herdenking { padding: calc(var(--cw) * .12) 0 0; }
  .herdenking .cols { grid-template-columns: 1fr; }
  .herdenking .side { display: none; }
  .herdenking .side--spacer { display: block; order: 2; padding: 12vw 0 20vw; }
  .herdenking .mid { padding: 0 10vw; }

  .paul { grid-template-columns: 1fr; }
  .paul::after { display: none; }
  .paul .foto { order: -1; min-height: 55vh; }
  .paul .txt { padding: 12% 8% 20%; }
  .paul .intro { line-height: 30px; }

  .conflict { padding: calc(var(--cw) * .12) 0 calc(var(--cw) * .2); text-align: left; }
  .conflict .col { padding: 2% 3% 0; }

  .elkestap { padding: calc(var(--cw) * .12) 0 calc(var(--cw) * .13); }
  .elkestap .c1 { padding: 0 3% 4%; }
  .elkestap .c2 { padding: 0 3%; }

  .bergen { height: calc(var(--cw) * .14 + 150px + 4vw); }

  .mediation { padding: calc(var(--cw) * .11) 0; }
  .mediation .c1 { padding: 0 3%; }
  .mediation .c2 { padding: 0 0 0 5%; }

  .meer { padding: calc(var(--cw) * .11) 0 calc(var(--cw) * .15); text-align: left; }
  .meer .col { padding: 0 3% 4%; }

  .contact { padding: calc(var(--cw) * .12) 0; }
  .contact .c1, .contact .c2 { padding: 0 3%; }

  .tekstpagina { padding: calc(var(--cw) * .12) 0; }
  .tekstpagina .cols { grid-template-columns: 1fr; }
  .tekstpagina .c1 { padding-right: 0; margin-bottom: 25px; }
  .tekstpagina .c2 { padding-left: 0; margin-top: 0; }

  .site-footer { padding: calc(var(--cw) * .14) 0; }
  .ftr { grid-template-columns: 1fr; row-gap: 23.4px; }
  .ftr > div { padding: 0 3%; }
  .ftr > div + div { padding-top: 6%; }
  .ftr > div:first-child { margin-bottom: 16.6px; }
  .ftr-logo img { width: 182px; }
  .ftr-claim { margin-top: 54px; font-size: 18px; line-height: 27px; }
  .ftr > div:first-child { padding-left: calc(3% + 5px); }
  .ftr h5 { font-size: 16px; line-height: 19px; margin-bottom: 25px; }
  .ftr h6 { font-size: 15px; line-height: 16.5px; }
  .to-top { right: 20px; }
}

@media (max-width: 450px) {
  #slide-out-widget-area { min-width: 78vw; width: 78vw; padding-left: 50px; padding-right: 50px; }
  .material-ocm-open .ocm-effect-wrap { transform: scale(.84) translateX(-93vw) translateZ(0); }
}

/* Op de oude site stond na deze teksten nog een leeg blokje, waardoor de laatste alinea
   wel ondermarge hield. Zo blijft de afstand tot de knop gelijk aan het origineel. */
.meer .tekst p:last-child, .contact .loc p:last-child, .tekstpagina .c2 p:last-child { padding-bottom: 1.5em; }