/* =========================================================
   Het ritme van de pagina: EEN maat voor alle secties.
   Bewust op vw (schermbreedte) en niet op vh. Met vh springt de
   ruimte op mobiel zodra de adresbalk weg scrollt, en in liggende
   stand valt alles ineens plat tegen elkaar.
   64px op een telefoon, rustig oplopend naar 132px op een breed
   scherm. De zijruimte loopt mee, zodat tekst nooit tegen de rand plakt.
   ========================================================= */
:root{
  --sm-sectie-ruimte: clamp(48px, 5vw, 72px);
  --sm-sectie-zij: clamp(20px, 4vw, 32px);
  /* EEN inhoudsbreedte voor de hele pagina, zodat de linkerrand van elke
     sectie op dezelfde lijn valt. Apple houdt ook een vaste breedte aan en
     varieert alleen de leesbreedte van tekst binnenin. */
  --sm-inhoud: 1080px;
  --sm-inhoud-smal: 720px;
}

/* Vervanger voor de basis-reset van bootstrap (138 kb) op pagina's die volledig
   uit eigen widgets bestaan (body-class sm-eigen-pagina).
   NIET op het oog samengesteld: eerst gemeten WELKE eigenschappen veranderen
   als bootstrap wegvalt, daarna deze set opgebouwd en de vergelijking herhaald.
   Uitkomst 29-07: 75 elementen x 16 eigenschappen = 1200 waarden, allemaal
   identiek met en zonder bootstrap. Regels hier weghalen zonder die meting
   opnieuw te doen = layout-verschuivingen. */
.sm-eigen-pagina,
.sm-eigen-pagina *,
.sm-eigen-pagina *::before,
.sm-eigen-pagina *::after {
    box-sizing: border-box;
}
.sm-eigen-pagina h1,
.sm-eigen-pagina h2,
.sm-eigen-pagina h3,
.sm-eigen-pagina h4,
.sm-eigen-pagina h5,
.sm-eigen-pagina h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}
.sm-eigen-pagina p { margin-top: 0; margin-bottom: 1rem; }
.sm-eigen-pagina ul,
.sm-eigen-pagina ol { margin-top: 0; margin-bottom: 1rem; }
.sm-eigen-pagina ul ul,
.sm-eigen-pagina ol ul,
.sm-eigen-pagina ul ol,
.sm-eigen-pagina ol ol { margin-bottom: 0; }
.sm-eigen-pagina blockquote,
.sm-eigen-pagina figure { margin: 0 0 1rem; }
.sm-eigen-pagina button,
.sm-eigen-pagina input,
.sm-eigen-pagina optgroup,
.sm-eigen-pagina select,
.sm-eigen-pagina textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
.sm-eigen-pagina button,
.sm-eigen-pagina [type="button"],
.sm-eigen-pagina [type="submit"] { -webkit-appearance: button; }
.sm-eigen-pagina img,
.sm-eigen-pagina svg { vertical-align: middle; }
.sm-eigen-pagina table { border-collapse: collapse; }
.sm-eigen-pagina hr { box-sizing: content-box; height: 0; overflow: visible; }
.sm-eigen-pagina a { text-decoration: none; }

/* Automatisch gesplitst uit sm-elements.css + sm-sections.css.
   Nieuwe stijl voor dit onderdeel? In DIT bestand, niet in de basis. */

:root {
    --sm-easing: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.sm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 700; font-size: 14px; letter-spacing: .5px; line-height: 1.2;
    border: 0; cursor: pointer; border-radius: 100px;
    text-decoration: none; transition: all .4s var(--sm-easing);
    position: relative;
}
.sm-btn, .sm-btn-maat-md { padding: 0.625rem 1.5rem; font-size: 14px; }
.sm-btn-maat-sm { padding: 0.375rem 0.875rem; font-size: 13px; }
.sm-btn-maat-lg { padding: 0.75rem 2rem; font-size: 16px; }
.sm-btn-maat-xl { padding: 1rem 2.375rem; font-size: 17px; }
.sm-btn-hoeken { border-radius: 8px; }
.sm-btn-vol { display: flex; width: 100%; }
.sm-btn-accent { background: var(--sm-accent, #c8a95a); color: var(--sm-btn-tekst, #1c1405); }
.sm-btn-accent:hover { background: color-mix(in srgb, var(--sm-accent, #c8a95a) 82%, #fff); }
.sm-btn-accent:active { background: color-mix(in srgb, var(--sm-accent, #c8a95a) 70%, #fff); }
.sm-btn { -webkit-tap-highlight-color: transparent; }
.sm-btn-donker { background: #17181c; color: var(--sm-btn-tekst, #fff); }
.sm-btn-licht { background: #f1f2f6; color: var(--sm-btn-tekst, #17181c); }
.sm-btn-outline { background: transparent; border: 2px solid rgba(255,255,255,.7); color: var(--sm-btn-tekst, #fff); }
.sm-btn-outline:hover { background: #fff; border-color: #fff; color: #17181c; }
.sm-btn-outline-donker { background: transparent; border: 2px solid #17181c; color: var(--sm-btn-tekst, #17181c); }
.sm-btn-outline-donker:hover { background: #17181c; color: #fff; }
.sm-btn-gradient { background: linear-gradient(90deg, var(--sm-accent, #c8a95a), var(--sm-accent-2, #8a6d2f)); background-size: 160%; color: var(--sm-btn-tekst, #fff); }
.sm-btn-gradient:hover { background-position: 100%; }
.sm-btn-flat { background: var(--sm-accent, #c8a95a); color: var(--sm-btn-tekst, #1c1405); }
.sm-btn-flat:hover { filter: brightness(.94); }
.sm-btn-outline-accent { background: transparent; border: 2px solid var(--sm-accent, #c8a95a); color: var(--sm-btn-tekst, var(--sm-accent, #c8a95a)); }
.sm-btn-outline-accent:hover { background: var(--sm-accent, #c8a95a); color: #1c1405; }
.sm-btn-underline { background: transparent; border-radius: 0; color: var(--sm-btn-tekst, inherit); position: relative; }
.sm-btn-underline::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: currentColor; transform-origin: left; transition: transform .4s var(--sm-easing); }
.sm-btn-underline:hover::after { transform: scaleX(.55); }
.sm-btn-link { background: transparent; color: var(--sm-btn-tekst, var(--sm-accent, #c8a95a)); text-decoration: none; }
.sm-btn-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.sm-btn-blink { background: var(--sm-accent, #c8a95a); color: var(--sm-btn-tekst, #1c1405); animation: sm-blink 2.2s infinite; }
.sm-btn-pad-weg { padding-left: 0; padding-right: 0; }
.sm-btn-maat-normaal { padding: 0.5rem 1.25rem; font-size: 13.5px; }

/* ---------- Ringknop: een lichtje dat om de knop heen loopt ----------
   Zelfde motor als het randje van de glow-kaarten: een draaiende
   conic-gradient met een vulling eroverheen, zodat alleen de rand
   overblijft. Bewust GEEN @property, anders stript WP Rocket RUCSS het weg.

   De kleuren komen uit --sm-accent en --sm-accent-2, dus de knop pakt per
   site vanzelf het eigen merk. Niets hardgecodeerd.

   Maten uit de referentie, gemeten en niet gegokt: rondje van 3s lineair,
   ademen van 4s ease-in-out tussen 1 en 1.2. */
.sm-btn-ring {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background: transparent;
    color: var(--sm-btn-tekst, #fff);
}
.sm-btn-ring::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 190%; aspect-ratio: 1;
    translate: -50% -50%;
    z-index: -2;
    background: conic-gradient(from 0deg,
        transparent 0deg 250deg,
        var(--sm-accent-2, #8a6d2f) 300deg,
        var(--sm-accent, #c8a95a) 340deg,
        var(--sm-ring-punt, #fff) 352deg,
        transparent 360deg);
    animation: sm-ring-draai var(--sm-ring-tijd, 3s) linear infinite,
               sm-ring-adem var(--sm-ring-adem, 4s) ease-in-out infinite;
}
.sm-btn-ring::after {
    content: '';
    position: absolute;
    inset: var(--sm-ring-dikte, 2px);
    border-radius: inherit;
    z-index: -1;
    background: var(--sm-ring-vul, #17181c);
    transition: background .4s var(--sm-easing);
}
.sm-btn-ring:hover::after { background: var(--sm-ring-vul-hover, var(--sm-ring-vul, #17181c)); }
/* Rustig: alleen rondgaan, niet ademen */
.sm-btn-ring-rustig::before { animation: sm-ring-draai var(--sm-ring-tijd, 3s) linear infinite; }

@keyframes sm-ring-draai { to { rotate: 360deg; } }
@keyframes sm-ring-adem { 0%, 100% { scale: 1; } 50% { scale: 1.2; } }

@media (prefers-reduced-motion: reduce) {
    .sm-btn-ring::before { animation: none; }
}
.sm-schaduw-sm-op { box-shadow: 0 -2px 6px rgba(20,20,30,.14); }
.sm-schaduw-md-op { box-shadow: 0 -6px 18px rgba(20,20,30,.18); }
.sm-schaduw-lg-op { box-shadow: 0 -12px 32px rgba(20,20,30,.22); }
.sm-hschaduw-sm-op:hover { box-shadow: 0 -4px 10px rgba(20,20,30,.2); }
.sm-hschaduw-md-op:hover { box-shadow: 0 -10px 24px rgba(20,20,30,.25); }
.sm-hschaduw-lg-op:hover { box-shadow: 0 -18px 42px rgba(20,20,30,.3); }
.sm-hover-scale-inv-sm:hover { transform: scale(.97); }
.sm-hover-scale-inv:hover { transform: scale(.94); }
.sm-hover-scale-inv-lg:hover { transform: scale(.9); }
.sm-hover-fly-sm:hover { transform: translate(0, -3px); }
.sm-hover-fly:hover { transform: translate(0, -6px); }
.sm-hover-fly-lg:hover { transform: translate(0, -9px); }
.sm-hover-scale-sm:hover { transform: scale(1.03); }
.sm-hover-scale:hover { transform: scale(1.06); }
.sm-hover-scale-lg:hover { transform: scale(1.1); }
.sm-schaduw-sm { box-shadow: 0 2px 6px rgba(20,20,30,.14); }
.sm-schaduw-md { box-shadow: 0 6px 18px rgba(20,20,30,.18); }
.sm-schaduw-lg { box-shadow: 0 12px 32px rgba(20,20,30,.22); }
.sm-hschaduw-sm:hover { box-shadow: 0 4px 10px rgba(20,20,30,.2); }
.sm-hschaduw-md:hover { box-shadow: 0 10px 24px rgba(20,20,30,.25); }
.sm-hschaduw-lg:hover { box-shadow: 0 18px 42px rgba(20,20,30,.3); }
.sm-hschaduw-gloed:hover { box-shadow: 0 14px 30px color-mix(in srgb, var(--sm-accent, #c8a95a) 45%, transparent); }
.sm-btn-donker.sm-hschaduw-gloed:hover { box-shadow: 0 14px 30px rgba(23,24,28,.45); }
.sm-btn-ic { display: inline-flex; align-items: center; transition: padding .4s var(--sm-easing); }
.sm-btn-ic i { font-size: 1.2em; line-height: 1; }
.sm-btn-ic svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.sm-icoon-schuif:hover .sm-ic-na { padding-left: 8px; }
.sm-icoon-schuif:hover .sm-ic-voor { padding-right: 8px; }
.sm-btn-ar { width: 18px; height: 18px; flex: 0 0 auto; transition: padding .4s var(--sm-easing); fill: currentColor; }
.sm-btn:hover .sm-btn-ar { padding-left: 8px; }
.sm-btn-spinner { width: 1em; height: 1em; border: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; border-radius: 50%; animation: sm-spin 1s linear infinite; }
.sm-up-big { transform: translateY(90px); }
.sm-up-zoom { transform: scale(.6); }
.sm-eyebrow {
    color: var(--sm-accent, #c8a95a); letter-spacing: 4px; font-size: 12px;
    font-weight: 700; margin-bottom: 16px; text-transform: uppercase;
}
.sm-sliding .sm-sliding-titel { overflow: hidden; margin: 0; overflow-wrap: normal; word-break: normal; text-wrap: balance; }
.sm-sliding .sm-sliding-titel .sm-woord { display: inline-block; white-space: nowrap; }
.sm-sliding .sm-sliding-titel .rl { display: inline-block; }
.sm-anim .sm-sliding .sm-sliding-titel .rl {
    opacity: 0; transform: translateY(105%);
    transition: transform .6s var(--sm-easing), opacity .4s var(--sm-easing);
    transition-delay: var(--d, 0ms);
}
.sm-anim .sm-sliding.sm-play .sm-sliding-titel .rl { opacity: 1; transform: none; }
.sm-anim .sm-sliding .sm-sliding-titel > span:not(.sm-woord) { display: inline-block; opacity: 0; transform: translateY(105%); transition: transform .6s var(--sm-easing), opacity .4s var(--sm-easing); transition-delay: var(--d, 0ms); }
.sm-anim .sm-sliding.sm-play .sm-sliding-titel > span:not(.sm-woord) { opacity: 1; transform: none; }
.sm-anim .sm-up { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--sm-easing), transform .5s var(--sm-easing); transition-delay: var(--d, 0ms); }
.sm-anim .sm-up.sm-animated { opacity: 1; transform: none; }

@media (max-width: 767px) {
.sm-anim .sm-up { transform: translateY(12px); transition-duration: .42s, .42s; transition-delay: calc(var(--d, 0ms) * .6), calc(var(--d, 0ms) * .6); }
}

.sm-hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; background: var(--sm-donker, #0a0a0a); color: #fff; }
.sm-hero-cross { position: absolute; inset: 0; }
.sm-scrolldown { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 5; color: rgba(255,255,255,.8); }
.sm-hero, .sm-kopsectie {
    --sm-scrim: .55;
    --sm-kopscrim: linear-gradient(180deg, rgba(10,10,10,var(--sm-scrim, .55)) 0px, rgba(10,10,10,calc(var(--sm-scrim, .55) * .72)) 76px, rgba(10,10,10,0) 200px);
}

@media (max-width: 767px) {
.sm-verberg-mobiel { display: none !important; }
}

@media (min-width: 768px) {
.sm-verberg-desktop { display: none !important; }
}

.sm-steps { background: var(--sm-licht, #f6f4ef); padding: 100px 0 90px; color: #1c1c1c; }
.sm-steps-kader, .sm-reviews-kader { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.sm-reviews-grid { display: grid; grid-template-columns: repeat(var(--sm-rv-kolommen, 3), 1fr); gap: 22px; align-items: start; }

@media (max-width: 900px) {
.sm-steps-kader, .sm-reviews-kader { padding: 0 22px; }
.sm-reviews-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
.sm-hero { height: 100svh; }
}

.sm-eyebrow-lijn { display: flex; align-items: center; gap: 12px; color: var(--sm-accent-donker, #614f13); letter-spacing: 4px; font-size: 12px; font-weight: 700; margin-bottom: 18px; }
.sm-eyebrow-lijn::before { content: ''; width: 34px; height: 1px; background: currentColor; }

@media (max-width: 900px) {
.sm-about, .sm-dn { padding: 70px 0; }
.sm-about-kader, .sm-dn-kader { padding: 0 22px; }
}

.break-tablet,
.break-mobile,
.break-tablet-mobile { display: none; }
/* andersom: alleen op desktop en tablet een regel verder, op de telefoon niet */
.break-desktop-tablet { display: block; }
@media (max-width: 767px) { .break-desktop-tablet { display: none; } }

@media (min-width: 768px) and (max-width: 1024px) {
.break-tablet,
    .break-tablet-mobile { display: block; }
}

@media (max-width: 767px) {
.break-mobile,
    .break-tablet-mobile { display: block; }
}

.show-desktop { display: inline; }
.show-tablet,
.show-mobile { display: none; }

@media (min-width: 768px) and (max-width: 1024px) {
.show-desktop { display: none; }
.show-tablet { display: inline; }
}

@media (max-width: 767px) {
.show-desktop { display: none; }
.show-mobile { display: inline; }
}

.sm-hero-sub,
.sm-about-tekst,
.sm-dn-tekst,
.sm-steps-sub,
.sm-stap p,
.sm-steps-tekst p,
.sm-reviews-rechts p { text-wrap: pretty; }
.sm-btn-vet { font-weight: 700; }
.sm-btn-cursief { font-style: italic; }
.sm-btn-font2 { font-family: var(--sm-font-2, var(--e-global-typography-secondary-font-family, inherit)); }
.sm-btn { --sm-schuif: 8px; }
.sm-btn > span { transition: padding .35s cubic-bezier(.165,.84,.44,1), transform .35s cubic-bezier(.165,.84,.44,1); }
.sm-schuif-icoon:hover .sm-ic-na { padding-left: var(--sm-schuif); }
.sm-schuif-icoon:hover .sm-ic-voor { padding-right: var(--sm-schuif); }
.sm-schuif-tekst-rechts:hover > span:not(.sm-btn-ic) { transform: translateX(var(--sm-schuif)); }
.sm-schuif-tekst-links:hover > span:not(.sm-btn-ic) { transform: translateX(calc(var(--sm-schuif) * -1)); }
.sm-schuif-uit-elkaar:hover > span:not(.sm-btn-ic) { transform: translateX(calc(var(--sm-schuif) * -0.5)); }
.sm-schuif-uit-elkaar:hover .sm-ic-na { padding-left: var(--sm-schuif); }
.sm-schuif-uit-elkaar:hover .sm-ic-voor { padding-right: var(--sm-schuif); }
.sm-schuif-naar-elkaar:hover > span:not(.sm-btn-ic) { transform: translateX(calc(var(--sm-schuif) * 0.4)); }
.sm-schuif-naar-elkaar:hover .sm-ic-na { padding-left: 0; margin-left: calc(var(--sm-schuif) * -0.4); }
.sm-schuif-naar-elkaar:hover .sm-ic-voor { padding-right: 0; margin-right: calc(var(--sm-schuif) * -0.4); }
.sm-btn-glas-donker { background: rgba(10,10,10,var(--sm-glas, .28)); color: var(--sm-btn-tekst, #fff); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sm-btn-glas-donker:hover { background: rgba(10,10,10,calc(var(--sm-glas, .28) + .16)); }
.sm-btn-glas-licht { background: rgba(255,255,255,var(--sm-glas, .18)); color: var(--sm-btn-tekst, #fff); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sm-btn-glas-licht:hover { background: rgba(255,255,255,calc(var(--sm-glas, .18) + .12)); }
.sm-btn-glas-rand { background: rgba(255,255,255,var(--sm-glas, .10)); color: var(--sm-btn-tekst, #fff); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sm-btn-glas-rand:hover { background: rgba(255,255,255,calc(var(--sm-glas, .10) + .10)); border-color: rgba(255,255,255,.5); }
.sm-btn-accent:hover,
.sm-btn-blink:hover { background: color-mix(in srgb, var(--sm-accent, #c8a95a) 82%, #fff); color: #3f9fd4; /* sm-hover-blauw */ }
.sm-btn-accent:active,
.sm-btn-blink:active { background: color-mix(in srgb, var(--sm-accent, #c8a95a) 70%, #fff); color: #3f9fd4; }

@media (max-width: 920px) {
body.menu-open { overflow: hidden; }
}

.sm-footer-credit { font-size: .88em;}
.sm-contact-tekst .sm-contact-lijst a.ui-e-wrap { color: #614f13; }
.sm-contact-tekst .sm-contact-lijst a.ui-e-wrap .ui-e-title { color: #614f13; }
.sm-contact-tekst .sm-contact-lijst ul li:hover a .ui-e-title { text-decoration: underline; }
.sm-contact-sectie.sm-heeft-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(10, 10, 10, .74) 0%, rgba(10, 10, 10, .86) 100%);
}
.elementor .sm-contact-sectie.sm-heeft-bg .sm-contact-tekst .elementor-heading-title,
.elementor .sm-contact-sectie.sm-heeft-bg .sm-contact-tekst .elementor-widget-text-editor,
.elementor .sm-contact-sectie.sm-heeft-bg .sm-contact-tekst .elementor-widget-text-editor p,
.elementor .sm-contact-sectie.sm-heeft-bg .sm-contact-tekst .elementor-widget-text-editor strong {
    color: #ffffff;
}
.sm-contact-sectie.sm-heeft-bg .sm-contact-tekst .sm-contact-lijst .ui-e-title { color: #ffffff; }
.sm-contact-sectie.sm-heeft-bg .sm-contact-tekst .sm-contact-lijst a.ui-e-wrap .ui-e-title { color: #d6b66e; }
.sm-contact-sectie.sm-heeft-bg .sm-contact-tekst .sm-contact-lijst ul li:hover a .ui-e-title { color: #d6b66e; }
.sm-kopsectie { position: relative; overflow: hidden !important; --overflow: hidden !important; }
.sm-kopsectie > .sm-kop-cover {
    position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 0;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    background-repeat: no-repeat;
    pointer-events: none;
    will-change: top;
}
.sm-kopsectie > .sm-kop-overlay {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: var(--sm-kopscrim), linear-gradient(270deg, rgba(10,10,10,calc(var(--sm-overlay, .85) * .18)) 0%, rgba(10,10,10,var(--sm-overlay, .85)) 80%);
}
.sm-kopsectie > .e-con-inner,
.sm-kopsectie > .elementor-container { position: relative; z-index: 1; }

@media (max-width: 767px) {
.sm-kopsectie > .sm-kop-overlay { background-image: var(--sm-kopscrim), linear-gradient(0deg, rgba(10,10,10,.88) 15%, rgba(10,10,10,.35) 75%); }
}

@media (prefers-reduced-motion: reduce) {
.sm-kopsectie > .sm-kop-cover { top: 0 !important; will-change: auto; }
.sm-kopsectie > .e-con-inner,
    .sm-kopsectie > .elementor-container { opacity: 1 !important; }
}

.uicore-tb-footer .elementor-icon-list-text, .uicore-tb-footer .elementor-widget-text-editor { overflow-wrap: break-word; min-width: 0; }
.page-id-354 .uicore-page-title,
.page-id-355 .uicore-page-title,
.page-id-356 .uicore-page-title {
  --uicore-headline-color: #fff;
  background: #1c1c1c;
  width: auto;
  margin: 0 calc(50% - 50vw);
  border-radius: 0;
  padding: clamp(112px, 14vw, 152px) 24px 52px;
}
.page-id-354 .uicore-page-title .uicore-title,
.page-id-355 .uicore-page-title .uicore-title,
.page-id-356 .uicore-page-title .uicore-title { color: #fff !important; }
.page-id-354 .uicore-page-title .ui-breadcrumb,
.page-id-355 .uicore-page-title .ui-breadcrumb,
.page-id-356 .uicore-page-title .ui-breadcrumb { color: rgba(255,255,255,.55) !important; }
.page-id-354 .uicore-page-title .ui-breadcrumb a,
.page-id-355 .uicore-page-title .ui-breadcrumb a,
.page-id-356 .uicore-page-title .ui-breadcrumb a { color: #c8a95a !important; }
.page-id-354 .uicore-body-content,
.page-id-355 .uicore-body-content,
.page-id-356 .uicore-body-content { overflow-x: clip; }
.page-id-354 .entry-content,
.page-id-355 .entry-content,
.page-id-356 .entry-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}
.page-id-354 .entry-content h2,
.page-id-355 .entry-content h2,
.page-id-356 .entry-content h2 { margin-top: 44px; }
.page-id-681 .uicore-page-title,
.page-id-682 .uicore-page-title,
.page-id-683 .uicore-page-title {
  --uicore-headline-color: #fff;
  background: #1c1c1c;
  width: auto;
  margin: 0 calc(50% - 50vw);
  border-radius: 0;
  padding: clamp(112px, 14vw, 152px) 24px 52px;
}
.page-id-681 .uicore-page-title .uicore-title,
.page-id-682 .uicore-page-title .uicore-title,
.page-id-683 .uicore-page-title .uicore-title { color: #fff !important; }
.page-id-681 .uicore-page-title .ui-breadcrumb,
.page-id-682 .uicore-page-title .ui-breadcrumb,
.page-id-683 .uicore-page-title .ui-breadcrumb { color: rgba(255,255,255,.55) !important; }
.page-id-681 .uicore-page-title .ui-breadcrumb a,
.page-id-682 .uicore-page-title .ui-breadcrumb a,
.page-id-683 .uicore-page-title .ui-breadcrumb a { color: #c8a95a !important; }
.page-id-681 .uicore-body-content,
.page-id-682 .uicore-body-content,
.page-id-683 .uicore-body-content { overflow-x: clip; }
.page-id-681 .entry-content,
.page-id-682 .entry-content,
.page-id-683 .entry-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}
.page-id-681 .entry-content h2,
.page-id-682 .entry-content h2,
.page-id-683 .entry-content h2 { margin-top: 44px; }
@keyframes sm-blink {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sm-accent, #c8a95a) 50%, transparent); }
    55% { box-shadow: 0 0 0 12px transparent; }
}
@keyframes sm-spin { to { transform: rotate(360deg); } }

/* =========================================================
   Sectie-badge: klein pilletje boven een sectie, met een nummer
   ervoor (01 DIENSTEN). Vaste eyebrow-stijl voor de hele pagina.
   Het label erft de tekstkleur van de sectie, het nummer pakt het
   accent via --sm-badge-accent (zet elke widget in zijn eigen css).
   ========================================================= */
.sm-badge{
  display:inline-flex; align-items:center; gap:9px;
  font-family:ui-monospace,"SF Mono","Fira Code","JetBrains Mono",Menlo,monospace;
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; /* 12px: kleiner leest slecht */
  border:1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius:999px; padding:6px 14px; margin:0 0 var(--sm-badge-onder, 18px);
  background:color-mix(in srgb, var(--sm-badge-accent, currentColor) 9%, transparent);
}
/* sm-badge-nr-gloed: het nummer licht zacht op in het accent van de sectie */
.sm-badge .sm-badge-nr{
  /* neon: een felle kern met twee wijdere halo's eromheen. Drie lagen,
     want met een enkele schaduw krijg je wattig licht in plaats van neon. */
  text-shadow:0 0 3px  color-mix(in srgb, var(--sm-badge-accent, currentColor) 95%, transparent),
              0 0 9px  color-mix(in srgb, var(--sm-badge-accent, currentColor) 75%, transparent),
              0 0 22px color-mix(in srgb, var(--sm-badge-accent, currentColor) 45%, transparent);
  color:var(--sm-badge-accent, inherit);
  font-weight:700; letter-spacing:.06em;
  padding-right:9px;
  border-right:1px solid color-mix(in srgb, currentColor 22%, transparent);
}

/* Het icoontje breekt de badge tussen het nummer en de tekst. Het neemt
   de plaats in van het streepje, dus dat valt weg zodra er een icoon staat.
   De gloed ademt heel rustig: bij acht badges op een pagina is meer beweging
   onrust in plaats van leven. */
.sm-badge .sm-badge-ic{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--sm-badge-accent, currentColor);
  font-size:1.35em; line-height:1;
  filter:drop-shadow(0 0 4px color-mix(in srgb, var(--sm-badge-accent, currentColor) 80%, transparent))
         drop-shadow(0 0 11px color-mix(in srgb, var(--sm-badge-accent, currentColor) 50%, transparent));
  animation:sm-badge-adem 3.4s ease-in-out infinite;
}
.sm-badge .sm-badge-ic i, .sm-badge .sm-badge-ic svg{ display:block; width:1em; height:1em; fill:currentColor; }
@keyframes sm-badge-adem{
  0%,100%{ opacity:.82; transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.14); }
}
@media (prefers-reduced-motion:reduce){
  .sm-badge .sm-badge-ic{ animation:none; opacity:1; }
}

/* =========================================================
   De koppen, naar het recept van danmartell.com: een grote sprong
   tussen tekst en kop, in Bebas Neue met strakke regels.
   Gemeten daar: koppen 75px en 50px, tekst 16px met 20px intro.
   Bij ons fluide, want onze koppen zijn langer dan de zijne.
   text-wrap:balance verdeelt de regels netjes bij een kop van
   twee of drie regels, zodat er nooit een los woord onder hangt.
   ========================================================= */
:root{
  --sm-kop-font: "Bebas Neue", "Google Sans", Inter, -apple-system, "Segoe UI", sans-serif;
  --sm-kop: clamp(40px, 6vw, 68px);
  --sm-kop-regel: .95;
  --sm-kop-sp: .005em;
  /* het ritme van een sectiekop: badge, dan kop, dan de subregel.
     Gemeten op de secties die al goed liepen (01, 04, 05, 07, 08). */
  --sm-badge-onder: 18px;
  --sm-kop-onder: 16px;
}

/* UiCore leidend (Typografie_Systemen_Framework, deel 5): op een site met UiCore volgen de sectiekoppen
   UiCore H1 en de lopende tekst UiCore Paragraaf, per apparaat. Zo past John het op één plek aan.
   Zonder UiCore blijven onze eigen maten. Op body, want daar zet UiCore zijn variabelen. */
body {
  --sm-kop: var(--uicore-typography--h1-s, clamp(40px, 6vw, 68px));
  --sm-tekst: var(--uicore-typography--p-s, 16px);
}

/* Geen los woord op de laatste regel, voor alle sectie-widgets.
   :where houdt de specificiteit op nul, dus een widget die zelf al
   balance of pretty zet, wint gewoon. De mockups in de uitkomsten
   (.smu-schaal) blijven zoals ze gemeten zijn. */
:where([class^="sm-"]) :where(h2, h3, h4):where(:not(.smu-schaal *)) { text-wrap: balance; }
:where([class^="sm-"]) p:where(:not(.smu-schaal *)) { text-wrap: pretty; }
/* Tekstblokken tussen responsive breaks (sm_tekst_blokken in sm-tekst.php).
   sm-al = alinea op elk scherm, sm-mb = eigen blok op de telefoon.
   balance verdeelt in Chrome alleen het stuk vóór een break; als eigen blok krijgt elk stuk
   zijn eigen gelijke regels, zonder staartje van twee woorden. */
.sm-al { display: block; }
.sm-al + .sm-al { margin-top: 1.6em; margin-top: 1lh; }
[class^="sm-"] p:has(> .sm-mb) { text-wrap: balance; }
/* een alinea kan langer zijn dan 6 regels; dan stopt balance en valt er een los woord: pretty */
.sm-al { text-wrap: pretty; }
/* een korte alinea zonder eigen blokjes (een of twee zinnen) mag wel gelijk verdeeld */
.sm-al:not(:has(.sm-mb)) { text-wrap: balance; }
/* desktop: daar zijn de blokjes inline en is de alinea kort genoeg (hooguit 6 regels) om gelijk te verdelen */
@media (min-width: 1025px) { .sm-al { text-wrap: balance; } }
@media (max-width: 767px) {
  .sm-mb { display: block; text-wrap: balance; }
  .sm-mb + .sm-mb { margin-top: 1.6em; margin-top: 1lh; }
}
/* lange teksten met een eigen alinea: op tablet ook in blokjes (framework: tablet 2-4 zinnen per blok) */
@media (min-width: 768px) and (max-width: 1024px) {
  .sm-al > .sm-mb { display: block; text-wrap: balance; }
  .sm-al > .sm-mb + .sm-mb { margin-top: 1.6em; margin-top: 1lh; }
}

/* knoptekst die op een smal scherm naar twee regels gaat: gelijk verdelen, gecentreerd */
.sm-btn > span:first-child { text-wrap: balance; text-align: center; }