:root {
    --font-main: "Alexandria", system-ui, -apple-system, "Segoe UI", sans-serif;
    --icon-arrow-dr:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7 17 17'/%3E%3Cpath d='M17 11v6h-6'/%3E%3C/svg%3E");
    --icon-arrow-down:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v34'/%3E%3Cpath d='M2 30l6 6 6-6'/%3E%3C/svg%3E");
    --icon-burger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 7h18'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M3 17h18'/%3E%3C/svg%3E");
    --icon-close:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14'/%3E%3Cpath d='M19 5L5 19'/%3E%3C/svg%3E");
    --icon-label-mark:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 15' fill='black'%3E%3Cpath d='M3.99942 0.0101795L0.0151513 0L0.00466919 5.89138L0.0000145435 9.16752C-0.00580692 12.1107 1.71737 14.5536 3.97439 15L4 0.0101795H3.99942Z'/%3E%3C/svg%3E");
    --icon-title-mark:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 82' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M28.75 1.25H1.25V49.84C1.21 65.44 13.06 78.38 28.75 80.75V1.25Z'/%3E%3C/svg%3E");
    --icon-phone:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.5 2.1L8.1 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.8 2Z'/%3E%3C/svg%3E");
    --icon-mail:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
    --icon-pin:             url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
    /* Carries its own white, unlike the others: it goes on an element that
       already has a background of its own, so it cannot be a mask. */
    --icon-dots:            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3C/svg%3E");
    /* The three on the button in the bottom corner. Masks like the rest, so each
       one takes the colour of whatever circle it sits in. */
    --icon-chat:            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.9 8.9 0 0 1-3.8-.9L3 21l1.9-5.1A8.4 8.4 0 0 1 4 11.5 8.4 8.4 0 0 1 12.5 3 8.4 8.4 0 0 1 21 11.5z'/%3E%3C/svg%3E");
    --icon-help:            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M9.2 9.3a2.9 2.9 0 0 1 5.6 1c0 1.9-2.8 2.4-2.8 4.2'/%3E%3Cpath d='M12 17.6h.01'/%3E%3C/svg%3E");
    --icon-wrench:          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
    /* The quote mark the testimonial opens with, as drawn in the icon block on
       the jobs page; the section closes with the same one turned round. */
    --icon-quote:           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 40' fill='black'%3E%3Cpath d='M8.86 17.67c4.68 0 8.14 1.11 10.37 3.33 2.23 2.22 3.34 4.83 3.34 7.83 0 3.22-1.11 5.89-3.34 8-2.12 2.11-4.8 3.17-8.03 3.17-3.01 0-5.63-.94-7.86-2.83C1.11 35.17 0 32.39 0 28.83c0-1.66.33-3.22 1-4.66.67-1.56 1.34-3 2.01-4.34L13.54 0h10.87L14.21 27.67 8.86 17.67Zm26.59 0c4.68 0 8.08 1.11 10.2 3.33 2.23 2.22 3.34 4.83 3.34 7.83 0 3.22-1.06 5.89-3.18 8-2.12 2.11-4.79 3.17-8.02 3.17-3.01 0-5.63-.94-7.86-2.83-2.23-2-3.34-4.78-3.34-8.34 0-1.66.28-3.22.84-4.66.67-1.56 1.39-3 2.17-4.34L40.13 0H51L40.8 27.67l-5.35-10Z'/%3E%3C/svg%3E");
    /* Drawn in --blue rather than black: it is a background image on the
       select, not a mask, so it carries its own colour. */
    --icon-chevron-down:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2E4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --container-padding:    40px;
    --container-full:       10px;
    --logo-height:          68px;
    --header-pad-y:         24px;
    --header-height:        calc(var(--logo-height) + var(--header-pad-y) * 2);
    --blue:                 #0F2E4A;
    /* The ground the footer sits on: the same blue, a few steps darker, so the
       contact card inside it still reads as the brand blue. */
    --blue-dark:            #12171F;
    --yellow:               #FFD500;
    --black:                #020A0A;
    --lite-grey:            #D7D7D7;
    --grey:                 #BDBCBC;
    --grey-lite:            #F5F5F5;
    --text-grey:            #55585C;
    --dark-grey:            #D9D9D9;
    --white:                #FFFFFF;
    --border-opacity:       hsl(0deg 0.75% 73.92% / 30%);
}

html {
    font-family: var(--font-main);
    font-optical-sizing: auto;
    font-style: normal;
}

input,
textarea,
select,
button {
    font-family: inherit;
    font-size: inherit;
}

p{
    line-height: 1.5;
}

.site-logo {
    margin: 0;
    line-height: 0;
}

.site-logo a {
    display: inline-block;
    line-height: 0;
}

#site-title img,
.site-logo__svg {
    display: block;
    height: var(--logo-height);
    width: auto;
}

.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.container{
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.container-main{
    padding-top: 100px;
    padding-bottom: 100px;
}

.container-full{
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    margin: auto 10px;
    border-radius: 15px;
}

h2 {
    position: relative;
    padding-left: 0;
    color: var(--white);
    font-size: clamp(1rem, 0.7vw + 1.2rem, 2.4rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
}

/* Stackable resets .stk-block-heading__text::before to content:unset,
   so the class has to be in the selector to outrank it. */
h2::before,
h2.stk-block-heading__text::before {
    content: "";
    position: absolute;
    left: -32px;
    top: .18em;
    width: .77em;
    height: 2.1em;
    background-color: var(--yellow);
    -webkit-mask: var(--icon-title-mark) top left / contain no-repeat;
    mask: var(--icon-title-mark) top left / contain no-repeat;
}

h2 strong{
    text-transform: uppercase;
}

h2 em{
    display: inline-block;
    border-bottom: .1em solid var(--yellow);
    font-style: normal;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding-top: var(--header-pad-y);
    padding-bottom: var(--header-pad-y);
}

#header::after {
    content: "";
    position: absolute;
    left: var(--container-padding);
    right: var(--container-padding);
    bottom: 0;
    height: 1px;
    background: var(--border-opacity);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

#branding {
    flex: 0 0 auto;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 28px;
}

.main-menu {
    display: flex;
    align-items: center;
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-menu a {
    display: block;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s ease;
}

.main-menu a:hover,
.main-menu .current-menu-item > a,
.main-menu .current-menu-ancestor > a {
    color: var(--yellow);
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(2, 10, 10, .55);
    backdrop-filter: blur(25px);
}

.lang-switch__item {
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--lite-grey);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: .25s ease;
}

.lang-switch__item:hover {
    color: var(--white);
}

.lang-switch__item.is-active {
    background: var(--yellow);
    color: var(--black);
    font-weight: 600;
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--yellow);
    color: var(--black);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: .25s ease;
}

.menu-toggle:hover {
    background: var(--white);
}

.menu-toggle__icon {
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--icon-burger) center / contain no-repeat;
    mask: var(--icon-burger) center / contain no-repeat;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

/* Open, the same button turns into a cross. The panel covers the button on a
   phone, which is why there is a close button inside it as well. */
.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
    transform: rotate(90deg);
    -webkit-mask-image: var(--icon-close);
    mask-image: var(--icon-close);
}

/* --------------------------------------------------------- offcanvas menu ---
   The panel the header button opens. Closed it is inert and cannot be reached
   by keyboard; open it takes focus, traps it, and hands it back on close - all
   of that lives in assets/js/menu.js. */
.offcanvas {
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    transition: visibility 0s linear .5s;
}

.offcanvas.is-open {
    visibility: visible;
    transition-delay: 0s;
}

.offcanvas__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 10, 10, .55);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .45s ease;
}

.offcanvas.is-open .offcanvas__backdrop {
    opacity: 1;
}

.offcanvas__panel {
    /* A colour on the panel so anything inheriting inside it lands on white -
       the theme's own a[href^="tel"] { color: inherit } was otherwise painting
       the phone number black on the navy. */
    color: var(--white);
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    height: 100%;
    padding: clamp(24px, 4vw, 56px) clamp(24px, 4vw, 64px) clamp(28px, 3vw, 48px);
    background: var(--blue);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

.offcanvas.is-open .offcanvas__panel {
    transform: none;
}

/* The site's corner arc, at the size the panel can carry. */
.offcanvas__panel::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 90px;
    height: 140px;
    border-left: 1px solid var(--yellow);
    border-top: 1px solid var(--yellow);
    border-top-left-radius: 130% 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease .25s;
}

.offcanvas.is-open .offcanvas__panel::after {
    opacity: .55;
}

.offcanvas__close {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: transparent;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.offcanvas__close:hover {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--black);
}

.offcanvas__close-icon {
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--icon-close) center / contain no-repeat;
    mask: var(--icon-close) center / contain no-repeat;
}

.offcanvas__nav {
    margin-top: clamp(25px, 3vh, 40px);
}

.offcanvas-menu {
    /* The 01, 02 ... running down the list is the same device the rest of the
       site uses, so it comes from a counter rather than from the menu items. */
    counter-reset: offcanvas-item;
    margin: 0;
    padding: 0;
    list-style: none;
}

.offcanvas-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}

.offcanvas.is-open .offcanvas-menu li {
    opacity: 1;
    transform: none;
}

/* Each item comes in just after the one above it. */
.offcanvas.is-open .offcanvas-menu li:nth-child(1) { transition-delay: .16s; }
.offcanvas.is-open .offcanvas-menu li:nth-child(2) { transition-delay: .22s; }
.offcanvas.is-open .offcanvas-menu li:nth-child(3) { transition-delay: .28s; }
.offcanvas.is-open .offcanvas-menu li:nth-child(4) { transition-delay: .34s; }
.offcanvas.is-open .offcanvas-menu li:nth-child(5) { transition-delay: .40s; }
.offcanvas.is-open .offcanvas-menu li:nth-child(6) { transition-delay: .46s; }
.offcanvas.is-open .offcanvas-menu li:nth-child(7) { transition-delay: .52s; }
.offcanvas.is-open .offcanvas-menu li:nth-child(8) { transition-delay: .58s; }

.offcanvas-menu a {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: clamp(14px, 2.2vh, 22px) 0 clamp(14px, 2.2vh, 22px) 6px;
    color: var(--white);
    font-size: clamp(24px, 5.4vw, 34px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .3s ease, padding-left .3s cubic-bezier(.16, 1, .3, 1);
}

.offcanvas-menu a::before {
    content: counter(offcanvas-item, decimal-leading-zero);
    counter-increment: offcanvas-item;
    flex: 0 0 auto;
    color: var(--yellow);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    transition: opacity .3s ease;
}

.offcanvas-menu a:hover,
.offcanvas-menu a:focus-visible,
.offcanvas-menu .current-menu-item > a {
    color: var(--yellow);
    padding-left: 20px;
}

.offcanvas__foot {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vh, 32px);
    align-items: flex-start;
    margin-top: auto;
    padding-top: clamp(24px, 4vh, 48px);
}

/* Filled in under Appearance > Customise > Contactgegevens; each line is only
   rendered once it has a value, so an empty setting leaves no gap behind. */
.offcanvas__contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding-top: clamp(20px, 3vh, 28px);
    border-top: 1px solid rgba(255, 255, 255, .12);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease .5s, transform .5s cubic-bezier(.16, 1, .3, 1) .5s;
}

.offcanvas.is-open .offcanvas__contact {
    opacity: 1;
    transform: none;
}

.offcanvas__contact-label {
    margin-bottom: 2px;
    color: var(--yellow);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Address, phone and mail all read as one list: a small yellow icon, then the
   line itself. Each row names its own icon in --row-icon and the shared rule
   below masks it. */
.offcanvas__address,
.offcanvas .offcanvas__contact-link {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
}

.offcanvas__address::before,
.offcanvas .offcanvas__contact-link::before {
    content: "";
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: .16em;
    background-color: var(--yellow);
    -webkit-mask: var(--row-icon) center / contain no-repeat;
    mask: var(--row-icon) center / contain no-repeat;
}

.offcanvas__address {
    --row-icon: var(--icon-pin);
    color: rgba(255, 255, 255, .75);
    font-weight: 400;
}

/* Scoped to the panel so it outweighs the theme's a[href^="tel"] rule, which
   sits later in the cascade and would otherwise win the tie. */
.offcanvas .offcanvas__contact-link {
    color: var(--white);
    font-weight: 500;
    transition: color .25s ease;
}

.offcanvas .offcanvas__contact-link[href^="tel"] {
    --row-icon: var(--icon-phone);
}

.offcanvas .offcanvas__contact-link[href^="mailto"] {
    --row-icon: var(--icon-mail);
}

.offcanvas .offcanvas__contact-link:hover,
.offcanvas .offcanvas__contact-link:focus-visible {
    color: var(--yellow);
}

/* Scoped to the panel so it outweighs the .lang-switch { display: none } that
   hides the header's copy below 768px - that rule was hiding this one too, and
   the switch vanished from the menu exactly where it is needed most. */
.offcanvas .lang-switch--panel {
    display: inline-flex;
    background: rgba(255, 255, 255, .08);
}

/* Nothing moves for anyone who has asked for less motion - the panel simply
   appears. */
@media (prefers-reduced-motion: reduce) {
    .offcanvas__panel,
    .offcanvas__backdrop,
    .offcanvas-menu li,
    .offcanvas-menu a,
    .menu-toggle__icon {
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }

    .offcanvas__panel {
        transform: none;
    }
}

.header-colum {
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
}

/* Stackable owns the block padding, so header clearance sits on the inner row.
   'safe' keeps the content below the header when it is taller than the viewport. */
.header-colum > .stk-row {
    flex: 1 1 auto;
    padding-top: var(--header-height);
    align-content: flex-end;
    align-content: safe flex-end;
}

.header-colum h1{
    font-size: clamp(1.3rem, 1.8vw + 2.7rem, 4.6rem);
    color: var(--white);
    text-transform: uppercase;
    font-weight: 700;
    text-wrap: balance;
    max-width: 780px;
    line-height: 1.1;
}

.header-colum h1 em  {
    display: inline-block;
    border-bottom: 6px solid var(--yellow);
    color: var(--yellow);
}

.header-colum-left p{
    color: var(--white);
    font-weight: 400;
    font-size: 15px;
    text-wrap: balance;
}

.header-colum-left p strong{
    color: var(--white);
    font-weight: 500;
}

.btn a{
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1;
    padding: 12px 18px 12px 18px;
    border-radius: 32px;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: .25s ease;
}

.white-btn a{
    background-color: var(--white);
    color: var(--black);
}

.blur-btn a{
    border-radius: 54px;
    border: 1px solid rgba(189, 188, 188, 0.40);
    background: var(--blue-dark);
    backdrop-filter: blur(25px);
}

.btn a::after {
    content: "";
    flex: 0 0 auto;
    width: 1.25em;
    height: 1.25em;
    background-color: currentColor;
    -webkit-mask: var(--icon-arrow-dr) center / contain no-repeat;
    mask: var(--icon-arrow-dr) center / contain no-repeat;
    transition: transform .25s ease;
}

.btn a:hover::after {
    transform: translate(2px, 2px);
}

.blur-btn a::after{
    background-color: var(--yellow);
}

.yellow-btn a{
    background-color: var(--yellow);
    color: var(--black);
}

.outline-btn a{
    padding: 0 0 12px;
    gap: 1rem;
    border: 0;
    border-bottom: 1px solid var(--white);
    border-radius: 0;
    background: transparent;
    color: var(--white);
}

.outline-btn a::after{
    background-color: var(--yellow);
}

.btn a:hover{
    border: 1px solid var(--yellow);
    padding: 12px 16px 12px 20px;
    filter: brightness(1.1);
}

/* Must stay after .btn a:hover - same specificity, so source order decides. */
.outline-btn a:hover{
    padding: 0 0 12px 3px;
    border: 0;
    border-bottom: 1px solid var(--yellow);
}

.header-bottom{
    border-top: 1px solid var(--border-opacity);
    padding-top: 20px;
}

.header-bottom-left{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.header-bottom-center{

}

.header-bottom-right{
    display: flex;
    justify-content: flex-end;
}

.header-bottom-right .copyright{
    font-size: 11px;
    color: var(--blue-dark);
}

.header-bottom-right .copyright .copyright__mark{
    color: var(--yellow);
    padding-right: 3px;
}

.scroll-btn a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    color: var(--blue-dark);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    background-color: transparent;
    /* The block carries no link - scroll-btn.js works out where it goes - and
       an anchor without an href gets no pointer of its own. */
    cursor: pointer;
}

.home .scroll-btn a,
.home .header-bottom-right .copyright{
    color: var(--lite-grey);
}

.home  .scroll-btn a::after {
    background-color: var(--lite-grey);
}

.scroll-btn a:hover {
    color: var(--blue);
}

.scroll-btn a::after {
    content: "";
    width: 12px;
    height: 20px;
    background-color: var(--blue-dark);
    -webkit-mask: var(--icon-arrow-down) center / contain no-repeat;
    mask: var(--icon-arrow-down) center / contain no-repeat;
    animation: scroll-bounce 1.8s ease-in-out infinite;
}

.home .scroll-btn a:hover {
    color: var(--white);
}

.blue-container{
    background-color: var(--blue);
    color: var(--white);
}

/* Once the columns stack on mobile, the one holding the marquee grew to the
   width of the whole track - 6976px against a 390px screen - and the track's
   own overflow then had nothing left to clip, so the entire page scrolled
   sideways. Capping the column at the row width keeps the scrolling inside it. */
.blue-container > .wp-block-column{
    max-width: 100%;
}

.grey-container{
    background-color: var(--dark-grey);
}

.grey-lite-container{
    background-color: var(--grey-lite);
}

.white-container{
    background-color: var(--white);
}

.grey-container .label-box{
    color: var(--black);
}

.grey-container h2{
    color: var(--black);
}

.grey-container h2::before, .grey-container h2.stk-block-heading__text::before{
    background-color: var(--grey);
}

/* ---------------------------------------------------- werken bij, mozaiek ---
   Two halves side by side, each holding two rows of tiles. The tiles only line
   up across the halves if every row is the same height, so one variable drives
   all of them. The photos are column backgrounds set in the editor - what is
   missing there is a height, which is why the tiles collapsed. */
.werken-bij-box{
    --werken-gap: 10px;
    /* 20vw rather than 16: the rows split their half evenly, so a row that
       shrinks faster than the panel's text does leaves the text cut off. */
    --werken-row: clamp(150px, 20vw, 288px);
    align-items: stretch;
    gap: var(--werken-gap);
    margin: 0;
}

.werken-bij-box__left,
.werken-bij-box__right{
    display: flex;
    flex-direction: column;
    gap: var(--werken-gap);
    /* A definite height for the half, so its two rows have something to split
       evenly. Left to the content, flexbox handed the row with the shorter
       content all the spare height and the two sides stopped lining up. */
    min-height: calc(var(--werken-row) * 2 + var(--werken-gap));
}

/* The rows share out the height of their half, so a panel that needs more room
   than a photo row does not knock the two sides out of step. */
.werken-bij-box__left > .stk-block-columns,
.werken-bij-box__right > .stk-block-columns{
    /* An equal share of the half, whatever the content inside asks for. */
    flex: 1 1 0;
    margin: 0 !important;
}

.werken-bij-box .stk-row{
    /* Stackable derives its column widths from this variable, so the gap goes
       through it rather than through the gap property. !important because the
       editor writes its own value on a heavier selector. */
    --stk-column-gap: var(--werken-gap) !important;
    flex-wrap: nowrap !important;
    /* The panel's row carries 48px of padding from the editor, which sat on top
       of the padding the tile already has and pushed the panel in from the edge
       of its half. The tiles' own padding is set further down. */
    padding: 0 !important;
}

/* Equal tiles by default, with !important because Stackable writes its own
   widths that way - including the ones that stack columns on a phone, which
   would break the mosaic into a single long column. */
.werken-bij-box .stk-row > .stk-block-column{
    flex: 1 1 0 !important;
    min-height: var(--werken-row);
    max-width: none !important;
    position: relative;
    overflow: hidden;
}

/* Only while the halves sit side by side does the row need to fill the share
   it was given. Left in place further down, this percentage resolved against a
   height that was itself waiting on the content, and the panel came out 32px
   tall with its text clipped. */
@media (min-width: 1201px) {
    .werken-bij-box .stk-row{
        height: 100%;
    }
}

/* The counter tile takes a third of its row; the photo beside it the rest. */
.werken-bij-box__left > .stk-block-columns:first-of-type .stk-row > .stk-block-column:first-child{
    flex: 0 0 calc(33.33% - var(--werken-gap) * 2 / 3) !important;
}

/* The tile's wrapper fills it by flex rather than by height: 100%. With the
   percentage the chain resolved against an auto height once the tiles stopped
   sharing a fixed one, and the panel collapsed to a sliver with its text cut. */
.werken-bij-box .stk-block-column{
    display: flex;
    flex-direction: column;
}

.werken-bij-box .stk-block-column > .stk-column-wrapper,
.werken-bij-box .stk-block-column > .stk-column-wrapper > .stk-block-content{
    /* No min-height: 0 here. It let these shrink below their own text, so the
       panel's height stopped counting for anything and the tile collapsed to a
       bar with the text cut off behind it. */
    flex: 1 1 auto;
    margin: 0;
}

/* ---- the yellow counter tile ---- */
.werken-bij-box__left > .stk-block-columns:first-of-type .stk-block-column:first-child .stk-block-content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(20px, 2.6vw, 48px);
}

.werken-bij-box__left > .stk-block-columns:first-of-type .stk-block-column:first-child .stk-block-text:first-of-type .stk-block-text__text{
    margin: 0;
    color: var(--black);
    font-size: clamp(28px, 2.4vw, 44px);
    font-weight: 700;
    line-height: 1.1;
}

.werken-bij-box__left > .stk-block-columns:first-of-type .stk-block-column:first-child .stk-block-text:last-of-type .stk-block-text__text{
    margin: 0;
    color: var(--black);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

/* ---- the blue panel ---- */
/* width, not flex: as a lone flex item it stopped at three quarters of the row
   whatever basis it was given, leaving the panel short of the photos above it. */
.werken-bij-box__right > .stk-block-columns:last-of-type .stk-row > .stk-block-column{
    width: 100%;
}

.werken-bij-box__right > .stk-block-columns:last-of-type .stk-block-content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(18px, 2vw, 36px);
}

/* Addressed by position, not by :last-of-type - the last div in the panel is
   the button block, so the paragraph was never matched and stayed black. */
.werken-bij-box__right > .stk-block-columns:last-of-type .stk-block-text:nth-of-type(1) .stk-block-text__text{
    margin: 0 0 14px;
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

.werken-bij-box__right > .stk-block-columns:last-of-type .stk-block-text:nth-of-type(2) .stk-block-text__text{
    margin: 0;
    max-width: 560px;
    color: var(--white);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.2;
}

.werken-bij-box__right > .stk-block-columns:last-of-type .wp-block-buttons{
    margin-top: clamp(16px, 1.6vw, 28px);
}

/* The line under the button - an address in the current content. */
.werken-bij-box__right > .stk-block-columns:last-of-type .stk-block-text:nth-of-type(3){
    margin-top: 14px !important;
}

.werken-bij-box__right > .stk-block-columns:last-of-type .stk-block-text:nth-of-type(3) .stk-block-text__text{
    margin: 0;
    color: var(--white);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

/* The arc in the panel's bottom-right corner: radii equal to the box, so the
   stroke is all curve. Stackable blanks ::after on its blocks, hence the extra
   class and the !important on content. */
.werken-bij-box__right > .stk-block-columns:last-of-type .stk-block-column.stk-block::after{
    content: "" !important;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: clamp(70px, 7vw, 150px);
    height: clamp(120px, 14vw, 158px);
    border-left: 1px solid var(--yellow);
    border-top: 1px solid var(--yellow);
    border-top-left-radius: 100% 100%;
    pointer-events: none;
}

.form-contact-forminator{

}

.stk-79a3dfe p strong{
    font-weight: 500;
}

/* The panel's text is what decides whether the mosaic still works: the rows
   share their half evenly, so it has to fit in the same height as a photo.
   Smaller type buys that back before the halves have to stack. */
@media (max-width: 1500px) {
    .werken-bij-box__right > .stk-block-columns:last-of-type .stk-block-content{
        padding: clamp(16px, 1.8vw, 28px);
    }

    .werken-bij-box__right > .stk-block-columns:last-of-type .stk-block-text:nth-of-type(1) .stk-block-text__text{
        font-size: 18px;
        margin-bottom: 10px;
    }

    .werken-bij-box__right > .stk-block-columns:last-of-type .stk-block-text:nth-of-type(2) .stk-block-text__text{
        font-size: 14px;
    }

    .werken-bij-box__right > .stk-block-columns:last-of-type .wp-block-buttons{
        margin-top: 16px;
    }

    .werken-bij-box__right > .stk-block-columns:last-of-type .stk-block-text:nth-of-type(3){
        margin-top: 10px !important;
    }

    .werken-bij-box__right > .stk-block-columns:last-of-type .stk-block-text:nth-of-type(3) .stk-block-text__text{
        font-size: 12px;
    }
}

/* Below this the halves stack, which turns the mosaic into four rows: the
   counter with its photo, two rows of three, and the panel. The rows keep their
   own side-by-side layout - stacked tiles would run to an absurd length.
   Once stacked the two sides no longer have to line up, so each row takes the
   height it needs: the photo rows a set one, the panel whatever its text asks
   for. Left on a fixed share it was cut off by the tile's own overflow. */
@media (max-width: 1200px) {
    /* Core holds columns on one line above 782px with !important, so the wrap
       that stacks the halves has to say so too. */
    .werken-bij-box{
        --werken-row: clamp(100px, 22vw, 220px);
        flex-wrap: wrap !important;
    }

    /* Written out this heavily on purpose: the stacked-columns rule further
       down the file (.wp-block-columns:not(.is-not-stacked-on-mobile) >
       .wp-block-column { flex-basis: auto !important }) is (0,3,0), so a
       lighter selector lost below 768px and the halves stayed side by side
       with the counter squeezed to a strip. */
    .werken-bij-box.wp-block-columns > .wp-block-column.werken-bij-box__left,
    .werken-bij-box.wp-block-columns > .wp-block-column.werken-bij-box__right{
        flex: 1 1 100% !important;
        min-height: 0;
    }

    .werken-bij-box__left > .stk-block-columns,
    .werken-bij-box__right > .stk-block-columns{
        flex: 0 0 auto;
    }

    /* The panel goes back to plain blocks here. As a flex item with a zero
       basis in a row aligned to flex-start, its height came out 32px however
       tall its text was, and the tile's own overflow cut the rest off. A block
       simply grows with what is inside it. */
    .werken-bij-box__right > .stk-block-columns:last-of-type .stk-row,
    .werken-bij-box__right > .stk-block-columns:last-of-type .stk-block-column,
    .werken-bij-box__right > .stk-block-columns:last-of-type .stk-column-wrapper,
    .werken-bij-box__right > .stk-block-columns:last-of-type .stk-block-content{
        display: block;
        height: auto;
        min-height: 0;
    }

    .werken-bij-box__right > .stk-block-columns:last-of-type .stk-block-text:nth-of-type(1) .stk-block-text__text{
        font-size: 18px;
    }
}

/* A third of a phone screen is too narrow for the counter - "200+" broke a
   character to a line - so it shares that row evenly with the photo instead. */
@media (max-width: 600px) {
    .werken-bij-box__left > .stk-block-columns:first-of-type .stk-row > .stk-block-column:first-child{
        flex: 1 1 0 !important;
    }
}

.label-box{
    display: inline-flex;
    gap: 7px;
    color: var(--lite-grey);
    font-size: 12px !important;
    font-style: normal;
    font-weight: 500 !important;
    padding-right: 10px;
    line-height: 1.2;
    align-items: self-start;
}

.label-box::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 17px;
    background-color: var(--yellow);
    -webkit-mask: var(--icon-label-mark) center / contain no-repeat;
    mask: var(--icon-label-mark) center / contain no-repeat;
}

.white-container .label-box{
    color: var(--black);
}

.white-container h2{
    color: var(--black);
}

@keyframes scroll-bounce {
    0%, 100% { transform: translateY(0);    opacity: 1;   }
    50%      { transform: translateY(5px);  opacity: .55; }
}

.scroll-btn a:hover::after {
    animation-play-state: paused;
}

.over-ons-detail{
    border-top: 1px solid var(--border-opacity);
    padding-top: 30px;
    margin-top: 80px;
}

.over-ons-detail p{
    color: var(--blue-dark) !important;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.over-ons-detail p strong{
    color: var(--blue);
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    padding-top: 0;
}

.over-ons-detail > div:nth-of-type(1),
.over-ons-detail > div:nth-of-type(2){
    border-right: 1px solid var(--border-opacity);
}

.blue-container__text p{
    color: var(--white);
    font-style: normal;
    font-weight: 400 !important;
    margin: auto;
    padding-top: 4px;
}

/* The cards fade into the blue background at both edges. The overlays sit on the
   parent, not on the scroller: a mask on .blue-container__slider-box would force it to
   repaint on every frame of the marquee. The rgba() has to stay in sync with --blue. */
.blue-container__slider{
    position: relative;
}

.blue-container__slider::before,
.blue-container__slider::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    width: var(--slider-fade, 220px);
    pointer-events: none;
}

.blue-container__slider::before{
    left: 0;
    background: linear-gradient(to right, hsl(0deg 0% 100% / 23%), rgb(27 58 97 / 0%));
}

.blue-container__slider::after{
    right: 0;
    background: linear-gradient(to left, hsl(0deg 0% 100% / 23%), rgba(27, 58, 97, 0));
}

.blue-container__slider-box{
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.blue-container__slider-box::-webkit-scrollbar{
    display: none;
}

/* WordPress core layout CSS forces .wp-block-column to flex: 1 0 0 at (0,3,0)
   specificity, and to flex-basis: 100% !important below 782px - that is what makes
   the cards squeeze to fit instead of scrolling. Beating it needs the extra class
   weight plus !important. */
.wp-block-columns.blue-container__slider-box{
    flex-wrap: nowrap !important;
}

.wp-block-columns.blue-container__slider-box > .blue-container__slider-box__item{
    flex: 0 0 clamp(220px, 31%, 380px) !important;
}

.blue-container__slider-box__item{
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 3 / 4;
    padding: 32px;
    border-radius: 12px;
    overflow: hidden;
    scroll-snap-align: start;
    min-width: 460px;
}

/* Decorative arc. Built from a border + elliptical radius rather than an SVG mask,
   so the 2px stroke stays 2px while the box grows on hover. */
.blue-container__slider-box__item::before{
    content: "";
    position: absolute;
    z-index: 2;
    top: -15px;
    left: -20px;
    width: 50px;
    height: 50px;
    border-top: 1px solid var(--yellow);
    border-right: 1px solid var(--yellow);
    border-top-right-radius: 90% 90%;
    transform: rotate(90deg);
    pointer-events: none;
    transition: width .5s ease, height .5s ease;
}

.blue-container__slider-box__item:hover::before{
    width: 180px;
    height: 180px;
    top: -1px;
}

.blue-container__slider-box__item::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(2, 10, 10, .55) 0%,
        rgba(2, 10, 10, 0) 32%,
        rgba(2, 10, 10, 0) 52%,
        rgba(2, 10, 10, .78) 100%);
}

.blue-container__slider-box__item-img{
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
}

.blue-container__slider-box__item-img figure,
.blue-container__slider-box__item-img .stk-img-wrapper{
    height: 100%;
    scale: 1;
    transition: all .5s;
}

.blue-container__slider-box__item:hover .blue-container__slider-box__item-img figure {
    scale: 1.05;
    filter: brightness(1.2) contrast(1.1);
}

.blue-container__slider-box__item-img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blue-container__slider-box__item-title,
.blue-container__slider-box__item-bottom{
    position: relative;
    z-index: 3;
}

.blue-container__slider-box__item-title{
    color: var(--white);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
}

/* The bottom block is two plain paragraphs: the first is the caption,
   the second the description. No extra class needed. */
.blue-container__slider-box__item-bottom p{
    margin-top: 0;
    color: var(--white);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.3;
}

/* The rule between the two lines of text; stretches to full width on hover. */
.blue-container__slider-box__item-bottom p:first-child::after{
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    margin-top: 16px;
    background: var(--white);
    transition: width .5s ease;
}

.blue-container__slider-box__item:hover .blue-container__slider-box__item-bottom p:first-child::after{
    width: 100%;
    background: var(--yellow);
}

.blue-container__slider-box__item-bottom p + p{
    margin-top: 16px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
}

.title-colum-box p{
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    text-wrap: pretty;
}

/* -------------------------------------------------------- comment box ---
   Client quotes. This is a Stackable carousel block, so the sliding, autoplay
   and dots are the plugin's - only the looks are ours. */
.comment-box .stk-block-carousel__buttons{
    display: none;
}

/* 1 : 2 : 1 - the centred quote twice the width of the cropped neighbours.
   The slider is padded by a quarter of its width on each side and every slide
   fills what is left, so the maths works out to side : centre : side of
   1 : 2 : 1 at any screen size. Stackable reads the real slide geometry when it
   scrolls (verified), so widening the slides keeps its steps correct, and
   because the padding equals half the leftover space each step lands the slide
   exactly in the middle. */
/* comment-box.js drives this row itself, so it needs no centring padding and
   no snapping - snap would fight the per-frame scrollLeft writes. */
.comment-box .stk-block-carousel__slider{
    scroll-snap-type: none !important;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.comment-box .stk-block-carousel__slider.is-dragging{
    cursor: grabbing;
}

/* Stackable scrolls by assigning slider.scrollLeft = slide.offsetLeft, which
   parks the slide against the left edge - and its scroll snapping then pins it
   there. Switching the snap point to the centre makes the browser do the
   centring itself, so no scripting is involved. */
.comment-box .stk-block-carousel__slider > .stk-block-column{
    flex: 0 0 50% !important;
}

/* The slider is focusable, and clicking a quote drew its focus ring around the
   whole row. Keep the ring for keyboard users, drop it for mouse clicks. */
.comment-box .stk-block-carousel__slider:focus:not(:focus-visible){
    outline: none;
}

/* Half the screen is too narrow for a quote on a phone. */
@media (max-width: 900px) {
    .comment-box .stk-block-carousel__slider > .stk-block-column{
        flex: 0 0 84% !important;
    }
}

.comment-box .stk-block-carousel__slider > .stk-block-column{
    position: relative;
    padding: 60px 80px;
    border-radius: 12px;
    transition: opacity .45s ease, transform .45s ease;
}

/* Stackable marks the first visible slide as active; the design wants the
   centred one, so comment-box.js marks that instead. The dimming is gated on
   .is-live so that without the script nothing sits at reduced contrast.
   The extra class is there to outrank the rule above. */
/* Scaled rather than resized: changing the real width would move the slides
   and desync the scroll positions Stackable works from. */
.comment-box.is-live .stk-block-carousel__slider > .stk-block-column{
    opacity: .4;
    transform: scale(.96);
    cursor: pointer;
}

.comment-box.is-live .stk-block-carousel__slider > .stk-block-column.is-centered{
    opacity: 1;
    transform: none;
    cursor: default;
}

/* The quote mark is lifted out of the flow so the text can sit beside it. */
.comment-box .stk-block-carousel__slider > .stk-block-column > .stk-column-wrapper,
.comment-box .stk-block-carousel__slider .stk-inner-blocks,
.comment-box .stk-block-carousel__slider .stk-block-content{
    position: static;
}

.comment-box .stk-block-icon{
    position: absolute;
    z-index: 0;
    top: 38px;
    left: 50px;
    line-height: 0;
}

.comment-box .stk-block-icon svg.ugb-custom-icon{
    width: 46px;
    height: 46px;
}

.comment-box .stk-block-text{
    position: relative;
    z-index: 1;
}

.comment-box .stk-block-text__text{
    margin: 0;
    color: var(--black);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
}

/* The block editor writes grid-template-columns inline, so the avatar column
   can only be pinned from here. */
.comment-box .wp-block-media-text{
    grid-template-columns: 30px auto !important;
    align-items: center;
    gap: 30px;
    margin-top: 36px;
}

.comment-box .wp-block-media-text__media{
    margin: 0;
}

.comment-box .wp-block-media-text__media img{
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}

.comment-box .wp-block-media-text__content p{
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

/* Stackable rebuilds its dot row from the child count, which the loop copies
   inflate - comment-box.js renders its own row instead. */
.comment-box .stk-block-carousel__dots{
    display: none;
}

.comment-box__dots{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 40px;
}

/* Stackable locks the dot button with all:!important and paints the visible
   dot on ::before, so the styling has to go there. */
.comment-box__dot{
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--grey);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}

.comment-box__dot.is-active{
    width: 40px;
    height: 6px;
    background: var(--blue);
}

/* ----------------------------------------------------------- voor wie ---
   Each column of .voor-wie-colums is a card: the Stackable image becomes the
   background, and the button is folded away until the card is hovered.
   Type scales with cqw so the cards stay readable however many columns the
   row holds - note cqw only resolves on descendants, never on the container
   itself, which is why the padding uses a plain clamp. */
/* The row is a marquee track: no wrapping, its own horizontal scroll, and a
   fixed card width so four and a bit of the fifth stay in view. WordPress core
   forces .wp-block-column to flex: 1 0 0 at (0,3,0) - and to flex-basis: 100%
   !important below 782px - so beating it needs the extra class and !important. */
.wp-block-columns.voor-wie-colums{
    /* The band runs to the screen edges while the heading above it stays in the
       container, so the row takes back the section's own padding and the
       spacing Stackable puts on the column wrapper inside it - the same bleed
       the sector cards, the team band and the gallery use. width: auto is what
       lets the negative margins widen the box; without it Stackable's pixel
       width holds and the margins only shift the row sideways. */
    --vwc-bleed: calc(var(--container-padding) + var(--stk-columns-spacing, 0px));
    width: auto !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--vwc-bleed));
    margin-right: calc(-1 * var(--vwc-bleed));
    flex-wrap: nowrap !important;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.voor-wie-colums::-webkit-scrollbar{
    display: none;
}

.voor-wie-colums.is-dragging{
    cursor: grabbing;
}

/* A drag that ends on a card must not open it. */
.voor-wie-colums.is-dragging a{
    pointer-events: none;
}

.wp-block-columns.voor-wie-colums > .wp-block-column{
    flex: 0 0 clamp(330px, 23%, 450px) !important;
}


.voor-wie-colums > .wp-block-column{
    container-type: inline-size;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    aspect-ratio: 4 / 5;
    padding: clamp(16px, 2vw, 30px);
    border-radius: 10px;
    overflow: hidden;
}

/* Everything except the image sits above the photo and the scrim. */
.voor-wie-colums > .wp-block-column > *:not(.stk-block-image){
    position: relative;
    z-index: 3;
}

.voor-wie-colums .stk-block-image{
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
}

.voor-wie-colums .stk-block-image figure,
.voor-wie-colums .stk-block-image .stk-img-wrapper{
    display: block;
    height: 100%;
    margin: 0;
}

.voor-wie-colums .stk-block-image img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s !important;
    filter: brightness(0.9);
}


.wp-block-columns.voor-wie-colums > .wp-block-column:hover img{
    scale: 1.03;
    filter: brightness(1);

}

.voor-wie-colums > .wp-block-column::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(2, 10, 10, .45) 0%,
        rgba(2, 10, 10, 0) 28%,
        rgba(2, 10, 10, 0) 42%,
        rgba(2, 10, 10, .8) 100%);
}

.voor-wie-colums > .wp-block-column::after{
    content: "";
    position: absolute;
    z-index: 2;
    top: -40px;
    right: -3px;
    width: 9%;
    height: 20%;
    border-bottom: 1px solid var(--yellow);
    border-left: 1px solid var(--yellow);
    border-bottom-left-radius: 103% 50%;
    pointer-events: none;
    transition: width .5s ease, height .5s ease;
}

.voor-wie-colums > .wp-block-column:hover::after{
    width: 12%;
    height: 25%;
}

.voor-wie-colums > .wp-block-column > .wp-block-paragraph{
    margin: 0;
    color: var(--yellow);
    font-size: clamp(10px, 2.4cqw, 14px);
    font-weight: 400;
    line-height: 1.3;
    padding-bottom: 10px;
}

.voor-wie-colums .stk-block-heading__text{
    margin: clamp(6px, 2.5cqw, 16px) 0 0;
    color: var(--white);
    font-size: clamp(15px, 4.8cqw, 27px);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
}

.voor-wie-colums .stk-block-heading__text::after{
    content: "";
    display: block;
    width: 30px;
    height: 1px;
    margin-top: clamp(8px, 3.2cqw, 20px);
    background: var(--white);
    transition: width .5s ease, background .5s ease;
}

.voor-wie-colums > .wp-block-column:hover .stk-block-heading__text::after{
    width: 33%;
    background: var(--yellow);
}

.voor-wie-colums > .wp-block-column > .stk-block-text{
    margin-top: auto;
}

.voor-wie-colums .stk-block-text__text{
    margin: 0;
    color: var(--white);
    font-size: clamp(13px, 3.7cqw, 18px);
    font-weight: 500;
    line-height: 1.35;
    text-transform: uppercase;
    text-wrap: balance;
}

/* The button takes no room until hover; animating the grid row keeps the
   lead text sliding up smoothly instead of jumping. */
.voor-wie-colums > .wp-block-column > .wp-block-buttons{
    display: grid;
    grid-template-rows: 0fr;
    justify-items: start;
    margin-top: 0;
    opacity: 0;
    transition: grid-template-rows .45s ease, margin-top .45s ease, opacity .3s ease;
}

.voor-wie-colums > .wp-block-column > .wp-block-buttons > *{
    overflow: hidden;
    min-height: 0;
}

.voor-wie-colums > .wp-block-column:hover > .wp-block-buttons{
    grid-template-rows: 1fr;
    margin-top: clamp(12px, 4cqw, 26px);
    opacity: 1;
}

/* ------------------------------------------------------------ projecten ---
   Cards rendered by the [projecten] shortcode. The whole card is one link, so
   the image sits behind it and everything else is stacked on top. */
.projecten__track{
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.projecten__track.is-dragging{
    cursor: grabbing;
}

/* A drag that ends on a card must not open the project. */
.projecten__track.is-dragging a{
    pointer-events: none;
}

.projecten__track::-webkit-scrollbar{
    display: none;
}

.projecten__item{
    flex: 0 0 clamp(300px, 50%, 740px);
    scroll-snap-align: center;
}

.projecten__link{
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 7 / 5;
    padding: 32px;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
}

.projecten__img{
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .4s;
}

.projecten__link::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(2, 10, 10, .35), rgba(2, 10, 10, 0) 40%);
}

/* Same arc as the story cards, mirrored to the top right corner. */
.projecten__link::after{
    content: "";
    position: absolute;
    z-index: 2;
    top: -23px;
    right: -15px;
    width: 8%;
    height: 21%;
    border-bottom: 1px solid var(--yellow);
    border-left: 1px solid var(--yellow);
    border-bottom-left-radius: 140% 83%;
    pointer-events: none;
    transition: width .5s ease, height .5s ease;
}

.projecten__link:hover::after{
    width: 16%;
    height: 44%;
}

.projecten__head{
    position: relative;
    z-index: 3;
    display: block;
}

.projecten__tags{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.projecten__tag{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 7px;
    border: 1px solid var(--border-opacity);
    border-radius: 999px;
    color: var(--white);
    font-size: 10px;
    font-weight: 300;
    line-height: 1;
    text-transform: uppercase;
}

/* The city is not a pill in the design - just the pin and the name. */
.projecten__tag--city{
    padding: 0;
    border: 0;
}

.projecten__tag--city::before{
    content: "";
    flex: 0 0 auto;
    width: 13px;
    height: 14px;
    background-color: var(--yellow);
    -webkit-mask: var(--icon-pin) center / contain no-repeat;
    mask: var(--icon-pin) center / contain no-repeat;
}

.projecten__title{
    display: block;
    margin-top: 26px;
    color: var(--white);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
}

.projecten__title::after{
    content: "";
    display: block;
    width: 26px;
    height: 2px;
    margin-top: 16px;
    background: var(--white);
    transition: width .5s ease, background .5s ease;
}

.projecten__link:hover .projecten__title::after{
    width: 20%;
    background: var(--yellow);
}

.projecten__link:hover img{
    scale: 1.02;
}

.small-top-pading{
    padding-top: 30px;
}

.projecten__cta{
    position: relative;
    z-index: 3;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    padding: 11px 14px;
    border-radius: 999px;
    background: var(--white);
    color: var(--black);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    transition: background .35s ease;
}

.projecten__link:hover .projecten__cta{
    background: var(--yellow);
}

.projecten__cta::after{
    content: "";
    flex: 0 0 auto;
    width: 1.25em;
    height: 1.25em;
    background-color: currentColor;
    -webkit-mask: var(--icon-arrow-dr) center / contain no-repeat;
    mask: var(--icon-arrow-dr) center / contain no-repeat;
    transition: transform .25s ease;
}

.projecten__link:hover .projecten__cta::after{
    transform: translate(2px, 2px);
}

.projecten__dots{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
}

.projecten__dot{
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--grey);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}

.projecten__dot.is-active{
    width: 40px;
    height: 6px;
    background: var(--blue);
}

/* --------------------------------------------------- projecten filter ---
   The [projecten-filter] grid: the same cards as the slider, three up under a
   row of sector buttons. Every project is already in the page and the buttons
   only hide what does not match, so the counts are written out with the markup
   and switching costs no request; see assets/js/projecten.js. */
.projecten-filter__bar{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 48px;
}

.projecten-filter__tabs{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.projecten-filter__label{
    margin: 0 0 28px;
}

.projecten-filter__tab{
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--lite-grey);
    border-radius: 999px;
    background: var(--white);
    color: var(--blue);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.1;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}

.projecten-filter__tab:hover{
    border-color: var(--blue);
}

.projecten-filter__tab.is-active{
    border-color: var(--yellow);
    background: var(--yellow);
    color: var(--black);
    font-weight: 500;
}

.projecten-filter__count{
    color: var(--text-grey);
    font-size: 13px;
    transition: color .3s ease;
}

.projecten-filter__tab.is-active .projecten-filter__count{
    color: var(--black);
}

.projecten-filter__total{
    margin: 0;
    color: var(--text-grey);
    font-size: 14px;
    white-space: nowrap;
}

.projecten-filter__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* The card sets no display of its own, but spell the hidden state out so a
   later layout rule cannot outrank the browser's own [hidden] handling. */
.projecten-filter__grid > .projecten__item[hidden]{
    display: none;
}

/* Every card is its own container, so the type and the spacing inside it are
   read off the card's width rather than the window's. Three up on a laptop a
   card is barely half the width of one in the slider, and the fixed sizes the
   slider uses left a two-line title pushing the button out through the bottom
   of the card - where overflow: hidden simply cut it off. */
.projecten-filter__grid > .projecten__item{
    container-type: inline-size;
    display: grid;
}

/* 16:10 as a floor rather than a cage: a card whose title takes an extra line
   grows, and the grid row takes its neighbours along with it. The slider's own
   aspect-ratio is handed back for the same reason - it returns below 1024px. */
.projecten-filter__grid .projecten__link{
    aspect-ratio: auto;
    min-height: 62.5cqw;
    padding: clamp(18px, 5cqw, 32px);
}

.projecten-filter__grid .projecten__title{
    margin-top: clamp(12px, 3cqw, 26px);
    font-size: clamp(17px, 4.4cqw, 28px);
    line-height: 1.2;
}

.projecten-filter__grid .projecten__title::after{
    margin-top: clamp(9px, 2.6cqw, 16px);
}

.projecten-filter__grid .projecten__cta{
    gap: clamp(14px, 4cqw, 32px);
    padding: clamp(9px, 1.9cqw, 11px) clamp(12px, 2.4cqw, 14px);
    font-size: clamp(12px, 2.3cqw, 14px);
}

.projecten-filter__grid .projecten__cta{
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--white);
}

/* The arrow is drawn from currentColor on the slider card, which here would
   make it white along with the label. */
.projecten-filter__grid .projecten__cta::after{
    background-color: var(--yellow);
}

.projecten-filter__grid .projecten__link:hover .projecten__cta{
    border-color: var(--yellow);
    background: var(--yellow);
    color: var(--black);
}

.projecten-filter__grid .projecten__link:hover .projecten__cta::after{
    background-color: var(--black);
}

.projecten-filter__empty{
    margin: 48px 0 0;
    color: var(--text-grey);
    font-size: 16px;
    text-align: center;
}

@media (max-width: 1200px){
    .projecten-filter__grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px){
    .projecten-filter__grid{
        grid-template-columns: 1fr;
    }

    /* The count on the right has nothing to sit beside once the buttons take
       the whole row, so it goes under them. */
    .projecten-filter__bar{
        justify-content: flex-start;
        margin-bottom: 24px;
    }

    .projecten-filter__tab{
        padding: 9px 15px;
        font-size: 14px;
    }
}

/* ---------------------------------------------------------------- tabs ---
   Stackable's vertical tabs render as a 3-column grid with every wrapper
   position:relative. To get the design - one full-bleed video with a white
   label card floating over it - the grid is reduced to two columns and the
   wrappers are made static so the video can position against the outer row. */
.wp-block-stackable-tabs.stk-block-background.tab-container{
    --tab-labels-w: 36%;
    position: relative;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--black);
}

/* Stackable sets grid-template-columns: auto 1fr auto at (0,3,0) inside a
   min-width:768px query, so match the query and outrank the selector. */
@media (min-width: 768px) {
    .wp-block-stackable-tabs.tab-container > .stk-inner-blocks.stk-block-tabs--vertical{
        grid-template-columns: var(--tab-labels-w) 1fr;
    }
}

.tab-container > .stk-row{
    position: relative;
    gap: 48px;
    align-items: start;
    min-height: 620px;
}

/* Every one of these is position:relative in Stackable and would capture the
   absolutely placed video, caption and text block. */
.tab-container .stk-block-tab-content,
.tab-container .stk-block-tab-content > .stk-row,
.tab-container [role="tabpanel"],
.tab-container [role="tabpanel"] > .stk-column-wrapper,
.tab-container [role="tabpanel"] .stk-inner-blocks,
.tab-container [role="tabpanel"] .stk-block-content{
    position: static;
}

/* A tab can hold a video or an image. The core video block is a bare
   <figure><video>, while the Stackable image block nests
   <div><figure><span.stk-img-wrapper><img>, so every level in between has to be
   stretched before object-fit on the <img> has a box to cover. */
.tab-container .wp-block-video,
.tab-container .wp-block-image,
.tab-container .stk-block-image{
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
}

.tab-container .wp-block-image figure,
.tab-container .stk-block-image figure,
.tab-container .stk-block-image .stk-img-wrapper{
    display: block;
    height: 100%;
    margin: 0;
    filter: brightness(0.9);
}

.tab-container .wp-block-video video,
.tab-container .wp-block-image img,
.tab-container .stk-block-image img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.9);
}

.tab-container .wp-block-video::after,
.tab-container .wp-block-image::after,
.tab-container .stk-block-image::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 10, 10, .7), rgba(2, 10, 10, 0) 45%);
}

.tab-container .stk-block-tab-labels{
    position: relative;
    z-index: 2;
    margin: 24px 0 24px 24px;
    padding: 30px 36px;
    border-radius: 14px;
    background: var(--white);
}

.tab-container .stk-block-tab-labels__wrapper{
    counter-reset: tab;
    display: flex;
    flex-direction: column;
}

/* The 01..09 numbers are not in the markup - they come from the counter. */
.tab-container .stk-block-tabs__tab{
    counter-increment: tab;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 96%;
    padding: 20px 0 20px 18px;
    border: 0;
    border-bottom: 1px solid var(--lite-grey) !important;
    border-radius: 0;
    background: none;
    color: var(--grey);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease;
}

.tab-container .stk-block-tabs__tab::after{
    content: counter(tab, decimal-leading-zero);
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
}

.tab-container .stk-block-tabs__tab::before{
    content: "";
    position: absolute;
    left: 0;
    width: 4px;
    height: 18px;
    background: var(--yellow);
    opacity: 0;
    transition: opacity .25s ease;
}

.tab-container .stk-block-tabs__tab:hover{
    color: var(--blue);
}

.tab-container .stk-block-tabs__tab--active{
    color: var(--blue);
    border-bottom-color: var(--blue);
}

.tab-container .stk-block-tabs__tab--active::before{
    opacity: 1;
}

.tab-container .stk-block-content > .stk-block-text:first-child{
    position: absolute;
    z-index: 2;
    top: 40px;
    right: 40px;
    margin: 0;
}

.comment-box{

}

.tab-container .stk-block-content > .stk-block-text:first-child p{
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--yellow);
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tab-container [role="tabpanel"] .wp-block-columns{
    position: absolute;
    z-index: 2;
    left: calc(var(--tab-labels-w) + 72px);
    right: 40px;
    bottom: 48px;
    margin: 0;
}

.tab-container [role="tabpanel"] .wp-block-columns p{
    max-width: 620px;
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}

/* -------------------------------------------------------- waarom colums ---
   "Waarom eigen beheer" cards: image, a translucent pill caption top-left, a
   yellow corner arc, and a title + description pinned to the bottom. On hover
   the pill fills in yellow with dark text and the corner arc sweeps out to
   roughly half again its height, matching the hover frame in the design. */
.waarom-colums-box{
    gap: 10px;
}

.waarom-colums-box__col{
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    aspect-ratio: 28 / 28;
    min-height: 390px;
    padding: 32px;
    transition: all .6s;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 1px 1px 1px -20px var(--black);
}

.waarom-colums-box__col:hover{
    transform: translateY(-3px);
    box-shadow: 1px 20px 20px -20px var(--black);
    overflow: hidden;
}

/* Everything but the image sits above the photo and the scrim. */
.waarom-colums-box__col > *:not(.wp-block-stackable-image){
    position: relative;
    z-index: 3;
}

.waarom-colums-box__col::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(2, 10, 10, .55) 0%,
        rgba(2, 10, 10, 0) 24%,
        rgba(2, 10, 10, 0) 55%,
        rgba(2, 10, 10, .85) 100%);
}

/* Decorative corner arc. It grows on hover, mostly downwards: the design's
   hovered card carries a long sweep down the right-hand edge, while the cards
   beside it keep the shorter one. Sizing the box rather than scaling it keeps
   the stroke a hairline at every size. */
.waarom-colums-box__col::after{
    content: "";
    position: absolute;
    z-index: 2;
    top: -3px;
    right: -3px;
    width: 90px;
    height: 110px;
    border-bottom: 1px solid var(--yellow);
    border-left: 1px solid var(--yellow);
    border-bottom-left-radius: 90% 80%;
    pointer-events: none;
    transition: width .45s ease, height .45s ease;
}

.waarom-colums-box__col:hover::after{
    width: 115px;
    height: 175px;
}

/* The subtitle block is the pill caption. margin-bottom:auto pins it to the
   top and pushes the heading + text group down to the bottom edge. */
.waarom-colums-box__col > div:nth-of-type(1){
    align-self: flex-start;
    margin-bottom: auto;
}

.waarom-colums-box__col .stk-block-subtitle__text{
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(2, 10, 10, .45);
    backdrop-filter: blur(6px);
    color: var(--white);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.waarom-colums-box__col:hover .stk-block-subtitle__text{
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--black);
}

.waarom-colums-box__col .wp-block-stackable-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
}

.waarom-colums-box__col .wp-block-stackable-image figure,
.waarom-colums-box__col .wp-block-stackable-image .stk-img-wrapper{
    display: block;
    height: 100%;
    margin: 0;
}

.waarom-colums-box__col .wp-block-stackable-image figure img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s;
}

.waarom-colums-box__col:hover .wp-block-stackable-image figure img{
   scale: 1.04;
}

.waarom-colums-box__col .stk-block-heading{
    margin-top: 18px;
}

.waarom-colums-box__col .stk-block-heading__text{
    position: relative;
    margin: 0;
    padding-left: 16px;
    color: var(--white);
    font-size: clamp(19px, 1.7vw, 24px);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.waarom-colums-box__col .stk-block-heading__text::before{
    content: "";
    position: absolute;
    top: .1em;
    left: 0;
    width: 4px;
    height: 1.05em;
    background: var(--yellow);
}

.waarom-colums-box__col .stk-block-heading__text::after{
    content: "";
    display: block;
    width: 25px;
    height: 1px;
    margin: 20px 0 0 0;
    background: var(--white);
    transition: all .6s;
}

.waarom-colums-box__col:hover .stk-block-heading__text::after{
    content: "";
    display: block;
    width: 65px;
    height: 1px;
    margin: 20px 0 0 0;
    background: var(--yellow);
}

.waarom-colums-box__col .stk-block-text{
    margin-top: 0;
}

.waarom-colums-box__col .stk-block-text__text{
    margin: 0;
    padding-left: 16px;
    color: var(--white);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    text-wrap: pretty;
}

/* ------------------------------------------------------ negen diensten ---
   Service cards. The photo lies behind the card and is only shown through an
   elliptical window pinned to the top-right corner. On hover that window opens
   out past the far corner, so the whole photo comes into view: the card turns
   blue underneath, a scrim and a yellow corner arc fade in, and the text goes
   to white with a yellow number. */
/* The gap goes through Stackable's own --stk-column-gap rather than the gap
   property: it sizes each column as calc(33.33% - var(--stk-column-gap) * 2/3)
   with !important, so setting gap directly widened the columns past the row and
   pushed every third card onto its own line. The same value can be set as
   "Column Gap" in the block editor instead of here. Only column-gap comes from
   the variable, so the space between the rows is set separately. */
.stk-row:has(> .negen-diensten-item){
    --stk-column-gap: 10px;
    row-gap: 10px;
}

/* The video runs the full width of the page rather than its column. It sits
   inset by the section's own padding plus the margin Stackable puts on every
   column wrapper - both are pulled back here. The column margin is read from
   Stackable's own --stk-columns-spacing rather than written out, because it
   drops from 12px to 8px below 768px and a fixed value left the video hanging
   4px over each edge, which put a horizontal scrollbar on the page.
   --video-bleed is the one value to change if it should only reach part of
   the way out. */
.video-box-eigen{
    --video-bleed: calc(var(--container-padding) + var(--stk-columns-spacing, 0px));
    width: auto;
    max-width: none;
    margin-left: calc(-0.8 * var(--video-bleed));
    margin-right: calc(-0.8 * var(--video-bleed));
}

.video-box-eigen video {
    aspect-ratio: 5 / 2 !important;
    object-fit: cover;
    border-radius: 15px;
    margin: -250px 0 0 0;
}

.negen-diensten-item{
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--border-opacity);
    border-radius: 15px;
    background-color: var(--white);
    padding: 0;
    transition: background-color .5s ease, border-color .5s ease;
}

.negen-diensten-item:hover{
    background-color: var(--blue);
    border-color: transparent;
}

.negen-diensten-item > div{
    padding: 0;
    margin: 0 !important;
}

/* position: static so the photo's inset: 0 resolves against the card and fills
   it edge to edge; the padding here is what keeps the text off the edges. */
.negen-diensten-item > div > .stk-block-content{
    position: static;
    min-height: 232px;
    padding: 28px 28px 22px;
}

/* The scrim is only wanted while the photo is showing, so it fades in with it. */
.negen-diensten-item.stk-block.stk-column::before{
    content: "" !important;
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(2, 10, 10, .8) 0%,
        rgba(2, 10, 10, .45) 45%,
        rgba(2, 10, 10, 0) 80%);
    transition: opacity .5s ease;
}

.negen-diensten-item.stk-block.stk-column:hover::before{
    opacity: 1;
}

/* The yellow arc traces roughly where the resting window's edge ran, so it
   reads as the curve staying behind once the photo has opened past it. */
.negen-diensten-item.stk-block.stk-column::after{
    content: "" !important;
    position: absolute;
    z-index: 2;
    top: -1px;
    right: -1px;
    width: 62px;
    height: 85px;
    border-bottom: 1px solid var(--yellow);
    border-left: 1px solid var(--yellow);
    border-bottom-left-radius: 90% 60%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
}

.negen-diensten-item.stk-block.stk-column:hover::after{
    opacity: 1;
}

.negen-diensten-item-num,
.negen-diensten-item-title,
.negen-diensten-item-desc{
    position: relative;
    z-index: 3;
}

/* The number holds the top of the card; margin-bottom: auto drops the title
   and the description to the bottom, as in the design. */
.negen-diensten-item-num{
    margin-bottom: auto !important;
}

.negen-diensten-item-num .stk-block-subtitle__text{
    margin: 0;
    color: var(--grey);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    transition: color .4s ease;
}

.negen-diensten-item:hover .negen-diensten-item-num .stk-block-subtitle__text{
    color: var(--yellow);
    font-weight: 700;
}

/* clip-path is animated rather than a width and height, so the photo itself
   never rescales - only the window over it opens. */
.negen-diensten-item-img{
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0 !important;
    clip-path: ellipse(13% 50% at 100% 0);
    transition: clip-path .6s ease;
}

.negen-diensten-item:hover .negen-diensten-item-img{
    clip-path: ellipse(150% 150% at 100% 0);
}

.negen-diensten-item-img figure,
.negen-diensten-item-img .stk-img-wrapper{
    display: block;
    height: 100%;
    margin: 0;
}

.negen-diensten-item-img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The rule under the title: a faint hairline across the card with a short
   yellow accent on its left end. On hover the hairline goes and the accent
   runs out longer. */
.negen-diensten-item-title{
    padding-bottom: 15px;
    margin-bottom: 0 !important;
}

.negen-diensten-item-title.stk-block.stk-block-heading::before,
.negen-diensten-item-title.stk-block.stk-block-heading::after{
    content: "" !important;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    transition: opacity .4s ease, width .5s ease;
}

.negen-diensten-item-title.stk-block.stk-block-heading::before{
    right: 0;
    background: var(--lite-grey);
    opacity: 1;
}

.negen-diensten-item-title.stk-block.stk-block-heading::after{
    width: 40px;
    background: var(--yellow);
}

.negen-diensten-item:hover .negen-diensten-item-title.stk-block.stk-block-heading::before{
    opacity: 0;
}

.negen-diensten-item:hover .negen-diensten-item-title.stk-block.stk-block-heading::after{
    width: 100px;
}

.negen-diensten-item-title h3{
    color: var(--blue);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 100% */
    text-transform: uppercase;
    transition: color .4s ease;
}

.negen-diensten-item:hover .negen-diensten-item-title h3{
    color: var(--white);
}

.negen-diensten-item-desc{
    margin-top: 16px !important;
    /* The design breaks the description well before the card edge, which also
       keeps it off the bright side of the photo once the card is hovered. */
    max-width: 420px;
}

.negen-diensten-item-desc .stk-block-text__text{
    margin: 0;
    color: var(--text-grey);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    transition: color .4s ease;
}

.negen-diensten-item:hover .negen-diensten-item-desc .stk-block-text__text{
    color: var(--white);
}

/* -------------------------------------------------- fundering rijen ---
   A phase row: number and title on the left, description and tags on the
   right. Hovering opens a photo over the right half - the mask runs from the
   right edge inwards - so the description and the tags disappear behind it.

   The block is a core columns block, not a Stackable one, so its pseudo
   elements are not subject to Stackable's content: none reset. The two nested
   columns on the right are addressed by position: first is the description,
   second holds the tags. */
.fundering-horizontale-col{
    position: relative;
    overflow: hidden;
    align-items: center;
    min-height: 200px;
    padding: 24px 40px;
    border-radius: 14px;
    /* The resting colour is set on the block in the editor, so the darker
       hover has to be !important to get past that inline style. */
    transition: background-color .5s ease;
}

@media (hover: hover) {
    .fundering-horizontale-col:hover{
        background-color: #16273d !important;
    }
}

.fundering-horizontale-col.is-open{
    background-color: #16273d !important;
}

/* The yellow marker at the far left. */
.fundering-horizontale-col::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 54px;
    width: 2px;
    height: 98px;
    background: var(--yellow);
    transform: translateY(-50%);
}

/* ---- left: number and title ---- */
.fundering-horizontale-col > .wp-block-column:first-child{
    display: flex;
    align-items: center;
    gap: 52px;
    padding-left: 129px;
}

.fundering-horizontale-col > .wp-block-column:first-child .stk-block-text__text{
    margin: 0;
    /* The editor's own colour lands as .stk-<id> ... { color: #fff !important }
       in an inline style block after this file, hence !important here too. */
    color: rgba(255, 255, 255, .55) !important;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    transition: color .4s ease;
}

@media (hover: hover) {
    .fundering-horizontale-col:hover > .wp-block-column:first-child .stk-block-text__text{
        color: var(--white) !important;
    }
}

.fundering-horizontale-col.is-open > .wp-block-column:first-child .stk-block-text__text{
    color: var(--white) !important;
}

/* Stackable leaves 24px under each block. A flex item is centred by its
   margin box, so that margin pushed the number 12px above the middle. */
.fundering-horizontale-col > .wp-block-column:first-child > *{
    margin: 0 !important;
}

/* Keeps the number on one line - as a flex item it shrank below its own text
   on narrow rows and broke "01" across two lines. */
.fundering-horizontale-col > .wp-block-column:first-child > .stk-block-text{
    flex: 0 0 auto;
}

.fundering-horizontale-col > .wp-block-column:first-child .stk-block-heading__text{
    margin: 0;
    color: var(--white) !important;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: color .4s ease;
}

@media (hover: hover) {
    .fundering-horizontale-col:hover > .wp-block-column:first-child .stk-block-heading__text{
        color: var(--yellow) !important;
    }
}

.fundering-horizontale-col.is-open > .wp-block-column:first-child .stk-block-heading__text{
    color: var(--yellow) !important;
}

/* ---- right: description and tags ---- */
/* Both columns are stretched to the full height of the row, so align-items on
   the row itself does nothing here - the column has to centre its own content,
   the same way the left one does. */
.fundering-horizontale-col > .wp-block-column:last-child{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fundering-horizontale-col .wp-block-columns{
    align-items: center;
    margin: 0;
}

/* The nested columns split evenly by default, which left the description
   375px wide and wrapped it onto a third line. It gets a fixed 390px - the
   width the design breaks it at - and the tags take what is left, which is
   just enough to keep all three on one row. */
.fundering-horizontale-col > .wp-block-column .wp-block-columns > .wp-block-column:first-child{
    flex: 0 1 390px;
}

.fundering-horizontale-col .wp-block-columns > .wp-block-column:first-child .stk-block-text__text{
    margin: 0;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.65 !important;
}

/* The tags are three separate text blocks stacked in their own column; this
   lays them out as one row of pills. */
.fundering-horizontale-col .wp-block-columns > .wp-block-column:last-child{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.fundering-horizontale-col .wp-block-columns > .wp-block-column:last-child > .stk-block-text{
    margin: 0 !important;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--yellow);
}

.fundering-horizontale-col .wp-block-columns > .wp-block-column:last-child .stk-block-text__text{
    margin: 0;
    color: var(--black);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* ---- the photo, revealed from the right edge inwards ---- */
.fundering-horizontale-col .stk-block-image{
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    bottom: 8px;
    width: calc(50% - 16px);
    margin: 0 !important;
}

/* The reveal is two counter-running translates rather than an animated
   clip-path: the frame slides in from the right while the photo inside slides
   the same distance the other way, so the photo is uncovered where it stands
   instead of sliding. Both are composited - the clip-path version was
   repainted every frame and stuttered. The 101% keeps a hairline of photo from
   showing at rest. */
/* The clipping has to be on the frame that moves, not on the panel it moves
   inside: with it on the panel the two translates simply cancelled out and the
   photo sat in full view the whole time. */
.fundering-horizontale-col .stk-block-image figure{
    overflow: hidden;
    border-radius: 10px;
    transform: translateX(101%);
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}

.fundering-horizontale-col .stk-block-image .stk-img-wrapper{
    transform: translateX(-101%);
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}

@media (hover: hover) {
    .fundering-horizontale-col:hover .stk-block-image figure,
    .fundering-horizontale-col:hover .stk-block-image .stk-img-wrapper{
        transform: translateX(0);
    }
}

.fundering-horizontale-col.is-open .stk-block-image figure,
.fundering-horizontale-col.is-open .stk-block-image .stk-img-wrapper{
    transform: translateX(0);
}

/* The image block carries a 4/1 ratio from the editor. On a narrower screen
   that made the photo shorter than the panel, so it stopped short of the
   card's height and left an uneven gap under it. */
.fundering-horizontale-col .stk-block-image figure,
.fundering-horizontale-col .stk-block-image .stk-img-wrapper{
    display: block;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0;
}

.fundering-horizontale-col .stk-block-image img{
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.header-over-ons h1{
    max-width: initial;
}

/* ----------------------------------------------------- over ons cijfers ---
   Four figures in a row, ruled off top and bottom and separated by hairlines.
   The dividers sit on the left edge of every item but the first, so the row's
   own gap is dropped - with a gap the lines would not land on the quarter
   points. Each item holds three blocks in order: the figure, its label, and
   the line of explanation. */
.over-ons-colums{
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--border-opacity);
    border-bottom: 1px solid var(--border-opacity);
}

/* The vertical padding belongs to the items, not to the row. On the row it sat
   outside the columns, so every divider stopped short of the rules above and
   below it instead of running the full height between them. */
.over-ons-colums__item{
    padding: 40px 0 36px;
}

.over-ons-colums__item + .over-ons-colums__item{
    border-left: 1px solid var(--border-opacity);
    padding-left: 42px;
}

.over-ons-colums__item > div{
    margin: 0 !important;
}

.over-ons-colums__item > div:nth-of-type(1) .stk-block-text__text{
    margin: 0;
    color: var(--blue);
    font-size: 33px;
    font-weight: 700;
    line-height: 1.1;
}

/* The yellow tick under the figure. Stackable blanks ::after on every one of
   its blocks with content: none !important, hence the extra classes and the
   !important here. */
.over-ons-colums__item > div:nth-of-type(1).stk-block::after{
    content: "" !important;
    display: block;
    width: 30px;
    height: 3px;
    margin-top: 30px;
    background: var(--yellow);
}

/* --------------------------------------------------------- galerij band ---
   A row of square photos that runs the full width of the page and drifts
   sideways on its own - see assets/js/gallery.js, which duplicates the photos
   until they cover the screen so the loop has no seam. */
.galery-block-box{
    --gallery-bleed: calc(var(--container-padding) + var(--stk-columns-spacing, 0px));
}

/* The track, and the element that breaks the band out to the page edges: the
   section pads 40px and Stackable's column wrapper adds its own margin. The
   bleed cannot go on .galery-block-box itself - that is a flex item, so
   negative margins only shift it, they do not widen it. Here width: auto is
   what lets the margins grow the box; Stackable pins it to a pixel width.

   Stackable also centres these blocks with space-evenly, which fights a
   marquee - the photos have to start at the left edge and simply run on. */
.galery-block-box .stk-block-content{
    width: auto !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--gallery-bleed));
    margin-right: calc(-1 * var(--gallery-bleed));
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 14px;
    overflow-x: auto;
    scrollbar-width: none;
}

.galery-block-box .stk-block-content::-webkit-scrollbar{
    display: none;
}

.galery-block-box .stk-block-image{
    flex: 0 0 auto;
    width: clamp(260px, 24vw, 450px);
    margin: 0 !important;
}

.galery-block-box .stk-block-image figure,
.galery-block-box .stk-block-image .stk-img-wrapper{
    display: block;
    margin: 0;
}

.galery-block-box .stk-block-image img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: all .5s;
    filter: brightness(0.9);
}

.galery-block-box .stk-block-image:hover img{
    filter: brightness(1.1);
}

.over-ons-colums__item > div:nth-of-type(2){
    margin-top: 48px !important;
}

.over-ons-colums__item > div:nth-of-type(2) .stk-block-text__text{
    margin: 0;
    color: var(--blue-dark);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
}

.over-ons-colums__item .stk-block-subtitle{
    margin-top: 24px !important;
}

/* ------------------------------------------------------------- team band ---
   Portrait cards dragged sideways by hand - no drift of their own. The loop is
   endless either way; see assets/js/team.js. The band runs the full width of
   the page, so the row itself carries the bleed and the scrolling. */
.team-colums-info{
    --team-bleed: calc(var(--container-padding) + var(--stk-columns-spacing, 0px));
    width: auto !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--team-bleed));
    margin-right: calc(-1 * var(--team-bleed));
    flex-wrap: nowrap !important;
    gap: 10px;
    overflow-y: visible;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    /* pan-x as well as pan-y: with pan-y alone the browser refuses to pan the
       band sideways on a touch screen, so a swipe did nothing at all. The JS
       drag stays for the mouse; on a phone this hands the swipe back to the
       browser, momentum and all, and the scroll handler in team.js keeps the
       loop endless either way. */
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    user-select: none;
    padding: 5px 0;
}

.team-colums-info::-webkit-scrollbar{
    display: none;
}

.team-colums-info.is-dragging{
    cursor: grabbing;
}

/* A drag that ends on a card must not open its mail link. */
.team-colums-info.is-dragging a{
    pointer-events: none;
}

/* The width is written on a heavy selector on purpose: the stacked-columns
   rule further down (.wp-block-columns:not(.is-not-stacked-on-mobile) >
   .wp-block-column { flex-basis: auto !important }) is (0,3,0), and with a
   lighter one the cards sized to their content below 768px - each one came out
   3000px wide with the photo at full resolution. */
.team-colums-info.wp-block-columns > .wp-block-column.team-colums-info__col{
    flex: 0 0 clamp(300px, 24vw, 450px) !important;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 3px 3px 20px;
    border-radius: 12px;
    background: var(--white);
    /* The card fades white to blue while the type inside it fades blue to
       white, so the two pass through the same grey halfway and the name
       disappears for as long as the crossing lasts. It cannot be avoided in a
       cross-fade - what it can be is short. At 0.7s against the type's 0.4s the
       card was still nearly white when the name had already turned, and the
       text was gone for a third of a second; matched and cut to 0.2s it is a
       frame or two and reads as a flip.

       Named properties rather than the bare duration it had, which meant "all":
       every hover was also animating the scale, the radius and the shadow. */
    transition: background-color .2s ease, scale .55s ease;
}

/* The whole selector again rather than just the class: the rule above needs
   four classes to outrank core's column layout, and a bare
   .team-colums-info__col:hover carries two - so the white background won every
   time. The card never turned blue, while the type inside it did turn white on
   a lighter selector, and hovering a card wiped its own name off it. */
.team-colums-info.wp-block-columns > .wp-block-column.team-colums-info__col:hover{
    background: var(--blue);
    scale: 1.01;
}

/* ---- the photo ---- */
.team-colums-info__col > div:nth-of-type(1){
    position: relative;
    margin: 0 !important;
    border-radius: 8px;
    overflow: hidden;
}

.team-colums-info__col .stk-block-image figure,
.team-colums-info__col .stk-block-image .stk-img-wrapper{
    display: block;
    margin: 0;
    aspect-ratio: auto !important;
    height: auto !important;
}

.team-colums-info__col .stk-block-image img{
    display: block;
    width: 100%;
    height: auto !important;
    aspect-ratio: 45 / 31;
    object-fit: cover;
    transition: all .5s;
}

.team-colums-info__col .stk-block-image figure{
     overflow: hidden;
}

.team-colums-info__col:hover .stk-block-image figure img{
    scale: 1.02;
}

/* The yellow arc in the photo's top-left corner. Stackable blanks ::after on
   all of its blocks, hence the extra class and the !important on content. */
.team-colums-info__col > div:nth-of-type(1).stk-block::after{
    content: "" !important;
    position: absolute;
    z-index: 2;
    top: -10px;
    left: -10px;
    width: 70px;
    height: 80px;
    border-bottom: 1px solid var(--yellow);
    border-right: 1px solid var(--yellow);
    border-bottom-right-radius: 100% 100%;
    pointer-events: none;
    transition: all .5s;
}

.team-colums-info__col:hover > div:nth-of-type(1).stk-block::after{
    top: -3px;
    left: -3px;
    height: 95px;
}

/* ---- name ---- */
.team-colums-info__col > div:nth-of-type(2){
    position: relative;
    margin: 26px 0 0 !important;
    padding-left: 46px;
}

/* The yellow tick before the name. ::before needs more weight than ::after:
   Stackable's reset for it carries a :not(), which counts. */
.team-colums-info__col > div:nth-of-type(2).stk-block.stk-block-text::before{
    content: "" !important;
    position: absolute;
    top: 0;
    left: 26px;
    width: 8px;
    height: 30px;
    background-color: var(--yellow);
    -webkit-mask: var(--icon-label-mark) center / contain no-repeat;
    mask: var(--icon-label-mark) center / contain no-repeat;
}

.team-colums-info__col > div:nth-of-type(2) .stk-block-text__text{
    margin: 0;
    color: var(--blue);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    transition: color .2s ease;
}

.team-colums-info__col:hover > div:nth-of-type(2) .stk-block-text__text{
    color: var(--white);
}

/* ---- role, with the short rule under it ---- */
.team-colums-info__col > div:nth-of-type(3){
    margin: 8px 0 0 !important;
    padding-left: 46px;
}

.team-colums-info__col .stk-block-subtitle__text{
    margin: 0;
    color: var(--blue);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    transition: color .2s ease;
}

.team-colums-info__col .stk-block-subtitle__text a{
    color: var(--blue);
}

.team-colums-info__col:hover .stk-block-subtitle__text a{
    color: var(--yellow);
}

.team-colums-info__col:hover .stk-block-subtitle__text a:hover{
    color: var(--yellow);
    opacity: 0.9;
}

.team-colums-info__col:hover .stk-block-subtitle__text{
    color: var(--white);
}

.team-colums-info__col > div:nth-of-type(3).stk-block::after{
    content: "" !important;
    display: block;
    width: 30px;
    height: 1px;
    margin-top: 20px;
    background: var(--yellow);
    transition: .6s ease;
}

.team-colums-info__col:hover > div:nth-of-type(3).stk-block::after{
    background: var(--yellow);
    width: 60px;
}

/* ---- the line under it: a description in the design, an address here ---- */
.team-colums-info__col > div:nth-of-type(4){
    margin: 18px 0 0 !important;
    padding: 0 30px 0 46px;
}

.team-colums-info__col > div:nth-of-type(4) .stk-block-text__text{
    margin: 0;
    color: var(--text-grey);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    transition: color .2s ease;
}

.team-colums-info__col:hover > div:nth-of-type(4) .stk-block-text__text{
    color: rgba(255, 255, 255, .8);
}

.team-colums-info__col > div:nth-of-type(4) a{
    color: inherit;
    text-decoration: none;
}

.team-colums-info__col > div:nth-of-type(4) a:hover{
    text-decoration: underline;
}

/* On a phone the card is 300px wide, and the desktop indents left the text
   column too narrow - the address broke mid-word. */
@media (max-width: 480px) {
    .team-colums-info__col > div:nth-of-type(2),
    .team-colums-info__col > div:nth-of-type(3){
        padding-left: 34px;
    }

    .team-colums-info__col > div:nth-of-type(2).stk-block.stk-block-text::before{
        left: 18px;
    }

    .team-colums-info__col > div:nth-of-type(4){
        padding: 0 20px 0 34px;
    }

    .team-colums-info__col > div:nth-of-type(4) .stk-block-text__text{
        font-size: 13px;
        overflow-wrap: anywhere;
    }
}

.over-ons-colums__item .stk-block-subtitle__text{
    margin: 0;
    color: var(--text-grey);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-wrap: balance;
    padding-right: 10px;
}

/* ------------------------------------------------- eigen beheer, de rijen ---
   One block per row, so the rules between them are a border on each row rather
   than a list. Row one: number, thumbnail and title on the left, the label and
   the arrow pushed to the right. */
.eigen-beheer-vertikal-box{
    align-items: center;
    gap: 0;
    cursor: pointer;
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid var(--border-opacity);
    transition: background-color .3s ease, border-color .3s ease;
    border-style: solid !important;
    border-width: 1px !important;
    border-left: 0 transparent;
    border-right: 0 transparent;
    padding-right: 10px;
    padding-left: 10px;
    transition: all 0.3s;
    border-bottom: 0 !important;
}

/* Hovered, the whole row fills with yellow and everything on it goes dark. */
.eigen-beheer-vertikal-box:hover{
    background-color: var(--yellow);
    border-top-color: transparent;
    padding-left: 15px;
    padding-right: 10px;
}

/* The rule under it belongs to the next row, so the band is closed off from
   that side too - otherwise a line runs along the bottom of the yellow. */
.eigen-beheer-vertikal-box:hover + .eigen-beheer-vertikal-box{
    border-top-color: transparent;
}

.eigen-beheer-vertikal-box:last-of-type{
    border-bottom: 1px solid var(--border-opacity) !important;
}

/* ---- left: number, thumbnail, title ---- */
.eigen-beheer-vertikal-box > .wp-block-column:first-child{
    display: flex;
    align-items: center;
    /* The design spaces these across the row rather than by a fixed gap, so
       the gap grows with the viewport and stops before it gets silly. */
    gap: clamp(24px, 5.5vw, 110px);
    flex: 1 1 auto;
}

.eigen-beheer-vertikal-box > .wp-block-column:first-child > div{
    margin: 0 !important;
    flex: 0 0 auto;
}

.eigen-beheer-vertikal-box > .wp-block-column:first-child > div:nth-of-type(1) .stk-block-text__text{
    margin: 0;
    color: rgba(255, 255, 255, .7);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    transition: color .3s ease;
}

.eigen-beheer-vertikal-box:hover > .wp-block-column:first-child > div:nth-of-type(1) .stk-block-text__text{
    color: var(--blue);
}

.eigen-beheer-vertikal-box .stk-block-image{
    width: clamp(120px, 10vw, 180px);
}

.eigen-beheer-vertikal-box .stk-block-image figure,
.eigen-beheer-vertikal-box .stk-block-image .stk-img-wrapper{
    display: block;
    margin: 0;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden;
    border-radius: 10px;
}

.eigen-beheer-vertikal-box .stk-block-image img{
    display: block;
    width: 100%;
    height: auto !important;
    aspect-ratio: 45 / 19;
    object-fit: cover;
    border-radius: 6px;
    transition: transform .3s ease;
}

.eigen-beheer-vertikal-box:hover .stk-block-image img{
    transform: scale(1.07);
}

.eigen-beheer-vertikal-box .stk-block-heading{
    position: relative;
    padding-left: 20px;
}

/* The same mark the label boxes use, masked so it takes the yellow. */
.eigen-beheer-vertikal-box .stk-block-heading.stk-block.stk-block-heading::before{
    content: "" !important;
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 24px;
    transform: translateY(-50%);
    background-color: var(--yellow);
    -webkit-mask: var(--icon-label-mark) center / contain no-repeat;
    mask: var(--icon-label-mark) center / contain no-repeat;
    transition: background-color .3s ease;
}

.eigen-beheer-vertikal-box:hover .stk-block-heading.stk-block.stk-block-heading::before{
    background-color: var(--blue);
}

.eigen-beheer-vertikal-box .stk-block-heading__text{
    margin: 0;
    color: var(--white);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .3s ease;
}

.eigen-beheer-vertikal-box:hover .stk-block-heading__text{
    color: var(--blue);
    font-weight: 600;
}

/* ---- right: the label, with the arrow after it ---- */
.eigen-beheer-vertikal-box > .wp-block-column:last-child{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 40px;
    flex: 0 0 auto;
}

.eigen-beheer-vertikal-box > .wp-block-column:last-child > div{
    margin: 0 !important;
}

.eigen-beheer-vertikal-box > .wp-block-column:last-child .stk-block-text__text{
    margin: 0;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
    transition: color .3s ease;
}

.eigen-beheer-vertikal-box:hover > .wp-block-column:last-child .stk-block-text__text{
    color: var(--blue);
}

.eigen-beheer-vertikal-box > .wp-block-column:last-child::after{
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: var(--yellow);
    -webkit-mask: var(--icon-arrow-dr) center / contain no-repeat;
    mask: var(--icon-arrow-dr) center / contain no-repeat;
    transition: transform .3s ease, background-color .3s ease;
}

/* The same arrow rotated a quarter turn back: diagonal at rest, straight to
   the right on the row that is hovered. */
.eigen-beheer-vertikal-box:hover > .wp-block-column:last-child::after{
    background-color: var(--blue);
    transform: rotate(-45deg);
}

/* ------------------------------------------------ voor wie bouwen box ---
   A row of light cards: title, subtitle, a photo window and a lead. Hovering
   a card opens the window out to the whole card and flips the type to white
   over the photo.

   The card is a grid so that the photo is the row that stretches - that keeps
   every photo ending on the same line however many lines the title above it
   takes. The photo opens by pulling its own margins negative, which needs the
   exact distance to the top and bottom card edges: voor-wie.js measures those
   per card into --vwb-top / --vwb-bottom. The values below are only the
   fallback for the first paint, deliberately generous - overshooting is
   invisible behind overflow: hidden, stopping short would leave a light band.
   Type scales with cqw so five cards stay as readable as four; cqw resolves
   only on descendants, never on the container itself, hence the plain clamp
   on the padding. */
.wp-block-columns.voor-wie-bouwen-box{
    --vwb-pad: clamp(18px, 1.6vw, 28px);
    --vwb-gap: clamp(10px, 1vw, 16px);
    --vwb-track-gap: 14px;
    --vwb-radius: 12px;
    --vwb-window-radius: 10px;
    --vwb-speed: .55s;
    --vwb-ease: cubic-bezier(.22, .61, .36, 1);
    /* The band runs to the screen edges while the heading above it stays in
       the container, so the row takes back the section's own padding and the
       spacing Stackable puts on the column wrapper inside it - the same bleed
       the team band and the gallery use. */
    --vwb-bleed: calc(var(--container-padding) + var(--stk-columns-spacing, 0px));
    align-items: stretch;
    gap: var(--vwb-track-gap);
    width: auto !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--vwb-bleed));
    margin-right: calc(-1 * var(--vwb-bleed));
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.voor-wie-bouwen-box::-webkit-scrollbar{
    display: none;
}

.voor-wie-bouwen-box.is-dragging{
    cursor: grabbing;
}

/* A drag that ends on a card must not open it. */
.voor-wie-bouwen-box.is-dragging a{
    pointer-events: none;
}

/* Four cards and half of the fifth stay in view, with four gaps between them
   to take off the width first. Core pins .wp-block-column to flex: 1 0 0 at
   (0,3,0), and to flex-basis: 100% !important below 782px, and Stackable
   follows that with flex-basis: auto !important below 768px - naming both of
   the column's classes clears all three. */
.wp-block-columns.voor-wie-bouwen-box > .wp-block-column.voor-wie-bouwen-box__col{
    flex: 0 0 calc((100% - 4 * var(--vwb-track-gap)) / 4.1) !important;
}

.voor-wie-bouwen-box__col{
    --vwb-top: 190px;
    --vwb-bottom: 130px;
    container-type: inline-size;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto minmax(clamp(150px, 14vw, 250px), 0.8fr) auto;
    row-gap: var(--vwb-gap);
    padding: var(--vwb-pad);
    border-radius: var(--vwb-radius);
    background: var(--grey-lite);
    overflow: hidden;
}

/* Placed by class rather than by order: a card that is missing its subtitle
   must not slide its photo into the row that stretches. */
.voor-wie-bouwen-box__col > .stk-block{
    margin: 0;
}

.voor-wie-bouwen-box__col > .stk-block-heading{
    grid-row: 1;
}

.voor-wie-bouwen-box__col > .stk-block-subtitle{
    grid-row: 2;
}

.voor-wie-bouwen-box__col > .stk-block-image{
    grid-row: 3;
}

.voor-wie-bouwen-box__col > .stk-block-text{
    grid-row: 4;
}

/* Above the photo and the scrim. */
.voor-wie-bouwen-box__col > .stk-block-heading,
.voor-wie-bouwen-box__col > .stk-block-subtitle,
.voor-wie-bouwen-box__col > .stk-block-text{
    position: relative;
    z-index: 3;
}

.voor-wie-bouwen-box__col > .stk-block-image{
    position: relative;
    z-index: 1;
    border-radius: var(--vwb-window-radius);
    overflow: hidden;
    transition: margin var(--vwb-speed) var(--vwb-ease),
                border-radius var(--vwb-speed) var(--vwb-ease);
}

/* The grid rows are sized before this margin is read, so growing the photo
   moves nothing else on the card. */
.voor-wie-bouwen-box__col:hover > .stk-block-image{
    margin: calc(-1 * var(--vwb-top)) calc(-1 * var(--vwb-pad)) calc(-1 * var(--vwb-bottom));
    border-radius: var(--vwb-radius);
}

.voor-wie-bouwen-box__col .stk-block-image figure,
.voor-wie-bouwen-box__col .stk-block-image .stk-img-wrapper{
    display: block;
    height: 100%;
    margin: 0;
}

.voor-wie-bouwen-box__col .stk-block-image img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The scrim only has to work once the photo is behind the type. */
.voor-wie-bouwen-box__col::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to bottom,
        rgba(2, 10, 10, .78) 0%,
        rgba(2, 10, 10, .42) 22%,
        rgba(2, 10, 10, .14) 48%,
        rgba(2, 10, 10, .85) 100%);
    transition: opacity var(--vwb-speed) var(--vwb-ease);
}

.voor-wie-bouwen-box__col:hover::before{
    opacity: 1;
}

/* The corner mark: a left and a bottom border swept into one another, hung
   above the card so only the sweep itself shows. */
.voor-wie-bouwen-box__col::after{
    content: "";
    position: absolute;
    z-index: 4;
    top: -34px;
    right: -2px;
    width: 12%;
    height: 30%;
    border-bottom: 1px solid var(--yellow);
    border-left: 1px solid var(--yellow);
    border-bottom-left-radius: 103% 50%;
    pointer-events: none;
    transition: width var(--vwb-speed) var(--vwb-ease),
                height var(--vwb-speed) var(--vwb-ease);
}

.voor-wie-bouwen-box__col:hover::after{
    width: 15%;
    height: 34%;
}

.voor-wie-bouwen-box__col .stk-block-heading__text{
    margin: 0;
    color: var(--blue);
    font-size: clamp(15px, 4.4cqw, 22px);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    transition: color var(--vwb-speed) var(--vwb-ease);
}

.voor-wie-bouwen-box__col .stk-block-heading__text::after{
    content: "";
    display: block;
    width: 26px;
    height: 2px;
    margin-top: clamp(8px, 2.6cqw, 14px);
    background: var(--yellow);
    transition: width var(--vwb-speed) var(--vwb-ease),
                background var(--vwb-speed) var(--vwb-ease);
}

.voor-wie-bouwen-box__col:hover .stk-block-heading__text::after{
    width: 46px;
    background: var(--white);
}

.voor-wie-bouwen-box__col .stk-block-subtitle__text{
    margin: 0;
    color: var(--text-grey);
    font-size: clamp(10px, 3cqw, 13px);
    font-weight: 400;
    line-height: 1.4;
    transition: color var(--vwb-speed) var(--vwb-ease);
}

/* Three lines are held open so one wordier card does not pull its photo up
   above the rest of the row. */
.voor-wie-bouwen-box__col .stk-block-text__text{
    margin: 0;
    min-height: calc(1.45em * 3);
    color: var(--blue);
    font-size: clamp(12px, 3.4cqw, 16px);
    font-weight: 400;
    line-height: 1.45;
    transition: color var(--vwb-speed) var(--vwb-ease);
}

.voor-wie-bouwen-box__col:hover .stk-block-heading__text,
.voor-wie-bouwen-box__col:hover .stk-block-subtitle__text,
.voor-wie-bouwen-box__col:hover .stk-block-text__text{
    color: var(--white);
}

/* ---- the mark that says the card opens something ---- */
/* Nothing on the card tells you it is a control, so a button appears in its
   top corner while the pointer is on it. Only on a card that actually has a
   window behind it: modal.js puts .has-modal on the ones it wired, so a sector
   nobody has written a window for makes no promise it cannot keep.

   Hung on the heading block's ::after because the card's own two are taken -
   ::before is the scrim, ::after the yellow sweep. Stackable blanks the pseudo
   elements of its blocks, which is what the third class and the !important on
   content are for. */
.voor-wie-bouwen-box__col.has-modal > .stk-block-heading.stk-block::after{
    content: "" !important;
    position: absolute;
    z-index: 5;
    top: -5px;
    right: 0;
    width: clamp(28px, 7.8cqw, 38px);
    height: clamp(28px, 7.8cqw, 38px);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background-color: rgba(189, 188, 188, .19);
    background-image: var(--icon-dots);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 42%;
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: scale(.85);
    pointer-events: none;
    transition: opacity var(--vwb-speed) var(--vwb-ease),
                transform var(--vwb-speed) var(--vwb-ease);
}

/* Keyboard as well as pointer: the card is reachable by tab, and the mark is
   the only thing that says what pressing it will do. */
.voor-wie-bouwen-box__col.has-modal:hover > .stk-block-heading.stk-block::after,
.voor-wie-bouwen-box__col.has-modal:focus-visible > .stk-block-heading.stk-block::after{
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------------- contact kaarten ---
   Two light cards on the blue band, each a list of rows: an icon in a rounded
   tile, then a label, the value and sometimes a line under it. The blocks come
   from the editor, so the type sizes and colours are already set there with
   !important - what is left here is the layout, the tile and the rules between
   the rows. */
/* The pair does not run the width of the container: the design holds it to
   1370px and centres it, which is the same measure in mock-ups taken at two
   different window widths - a cap rather than a share of the row. */
.wp-block-columns.contact-colums-box{
    align-items: stretch;
    gap: 12px;
    /* The Stackable column around it is a flex column, and an auto margin on
       the cross axis switches off the stretch that would otherwise give this
       its width - so the width is stated as well as the cap. */
    width: 100%;
    max-width: 1370px;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-columns.contact-colums-box > .wp-block-column.contact-colums-box__col{
    flex: 1 1 0 !important;
    padding: clamp(28px, 3.2vw, 56px) clamp(24px, 3vw, 54px);
    border-radius: 18px;
    background: var(--grey-lite);
}

/* The name of the location, above the rows. */
.contact-colums-box__col > .stk-block-text:first-child{
    margin-bottom: clamp(20px, 2vw, 32px) !important;
}

.contact-colums-box__col > .stk-block-text:first-child .stk-block-text__text{
    color: var(--blue);
    line-height: 1.2;
}

/* A rule between the rows, none after the last. The row keeps the icon beside
   the text at every width: core stacks .wp-block-column below 782px and
   Stackable follows with flex-basis: auto below 768px, so both the wrap and
   the basis are taken back here rather than in a media query. */
.wp-block-columns.contact-colums-box__col-row{
    flex-wrap: nowrap !important;
    align-items: flex-start;
    gap: clamp(12px, 1.2vw, 18px);
    margin-bottom: clamp(20px, 2vw, 20px);
    padding-bottom: clamp(20px, 2vw, 20px);
    border-bottom: 1px solid var(--lite-grey);
}

.contact-colums-box__col > .contact-colums-box__col-row:last-child{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* The editor left the icon column at 33.33% - far too wide for a 30px icon. */
.wp-block-columns.contact-colums-box__col-row > .wp-block-column:first-child{
    flex: 0 0 auto !important;
}

.wp-block-columns.contact-colums-box__col-row > .wp-block-column:last-child{
    flex: 1 1 0 !important;
    min-width: 0;
}

.contact-colums-box__col-row .stk-block-icon{
    display: grid;
    place-items: center;
    width: clamp(44px, 4vw, 56px);
    height: clamp(44px, 4vw, 56px);
    margin: 0;
    border-radius: 12px;
    background: var(--dark-grey);
}

/* WordPress' own flow layout puts margin-block-start: 24px between the blocks
   in a column, which swamped the 10px the client set on them in the editor and
   left the label, the value and the line under it drifting apart. Dropping it
   hands the spacing back to the editor rather than pinning it here. */
.contact-colums-box__col-row > .wp-block-column:last-child > .stk-block-text{
    margin-top: 0 !important;
}

/* The label carries its size and colour from the editor; only the tracking
   and the weight that make it read as a label are added. */
.contact-colums-box__col-row > .wp-block-column:last-child > .stk-block-text:first-child .stk-block-text__text{
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 1.2;
}

.contact-colums-box__col-row > .wp-block-column:last-child > .stk-block-text:nth-child(2) .stk-block-text__text{
    font-weight: 700;
    line-height: 1.3;
}

/* Anything below the value is a note or the second address line. */
.contact-colums-box__col-row > .wp-block-column:last-child > .stk-block-text:nth-child(n+3) .stk-block-text__text{
    font-size: 14px;
    line-height: 1.4;
}

/* The map the design puts at the foot of the card is a row with nothing beside
   it: no icon column to sit next to, and no rule under it. Written against the
   iframe so it holds whichever embed block the map arrives in. */
.contact-colums-box__col-row:has(iframe){
    display: block;
    padding-bottom: 0;
    border-bottom: 0;
}

/* Nor a rule above it: the map is not another line of details. Written as a
   sibling test rather than :nth-last-child(2) because the second card has no
   map, and its own second-to-last row does keep its rule. */
.contact-colums-box__col-row:has(+ .contact-colums-box__col-row iframe){
    border-bottom: 0;
}

.contact-colums-box__col-row iframe{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 11 / 6;
    border: 0;
    border-radius: 12px;
}

/* The design underlines whatever can be tapped - the map link, the number and
   the mail address. Nothing else in the card is a link, so the underline is
   hung on the link itself rather than on a position in the row. */
.contact-colums-box__col-row a{
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color .3s ease;
}

.contact-colums-box__col-row a:hover{
    color: var(--blue);
}

.jobs-sfeer-container{

}

.jobs-sfeer-container__left{

}

.jobs-sfeer-container__right{

}


/* Side by side the cards get too narrow to hold the address on one line. */
@media (max-width: 900px){
    .wp-block-columns.contact-colums-box{
        flex-wrap: wrap !important;
    }

    .wp-block-columns.contact-colums-box > .wp-block-column.contact-colums-box__col{
        flex: 0 0 100% !important;
    }
}

@media (prefers-reduced-motion: reduce){
    .wp-block-columns.voor-wie-bouwen-box{
        --vwb-speed: .01ms;
    }
}

/* The row is one long loop now, so it never wraps: a narrow screen simply
   holds fewer cards at a time - two and a half on a tablet, one and a bit on
   a phone - and the card cut off at the edge keeps saying there is more. */
@media (max-width: 1100px){
    .wp-block-columns.voor-wie-bouwen-box > .wp-block-column.voor-wie-bouwen-box__col{
        flex: 0 0 calc((100% - 2 * var(--vwb-track-gap)) / 2.5) !important;
    }
}

@media (max-width: 700px){
    .wp-block-columns.voor-wie-bouwen-box > .wp-block-column.voor-wie-bouwen-box__col{
        flex: 0 0 calc((100% - var(--vwb-track-gap)) / 1.25) !important;
    }

    /* Nearly the full width, so the photo can take a proper share of the card
       again. */
    .voor-wie-bouwen-box__col{
        grid-template-rows: auto auto minmax(clamp(200px, 52vw, 300px), 1fr) auto;
    }
}

/* The titles and the labels are held on one line above; narrow, they have to
   be allowed to break or they push the page wider than the screen. Below 782px
   core stacks the two columns, so the label ends up under the title. */
@media (max-width: 900px) {
    .eigen-beheer-vertikal-box{
        padding: 18px 0;
    }

    .eigen-beheer-vertikal-box > .wp-block-column:first-child{
        gap: 18px;
    }

    .eigen-beheer-vertikal-box .stk-block-heading__text{
        font-size: 15px;
        white-space: normal;
    }

    .eigen-beheer-vertikal-box > .wp-block-column:last-child{
        gap: 16px;
    }

    .eigen-beheer-vertikal-box > .wp-block-column:last-child .stk-block-text__text{
        font-size: 11px;
        white-space: normal;
    }
}

/* On a phone the row becomes a list entry: the thumbnail on the left with the
   number and the title stacked beside it, and the caption with its arrow on a
   line of its own, indented to sit under the title. Side by side the four
   pieces were wider than the screen and wrapped into a jumble. */
@media (max-width: 600px) {
    .eigen-beheer-vertikal-box{
        padding: 20px 0;
    }

    .eigen-beheer-vertikal-box > .wp-block-column:first-child{
        display: grid;
        grid-template-columns: 96px 1fr;
        grid-template-areas:
            "photo number"
            "photo title";
        align-items: center;
        column-gap: 14px;
        row-gap: 3px;
        flex: 1 1 100% !important;
    }

    /* The 20px matches the indent the title carries for its yellow mark, so
       number, title and caption all start on the same line. */
    .eigen-beheer-vertikal-box > .wp-block-column:first-child > div:nth-of-type(1){
        grid-area: number;
        align-self: end;
        padding-left: 20px;
    }

    .eigen-beheer-vertikal-box .stk-block-image{
        grid-area: photo;
        width: 96px;
    }

    /* A squarer crop: at 96px wide the wide strip was barely a sliver. */
    .eigen-beheer-vertikal-box .stk-block-image img{
        aspect-ratio: 4 / 3;
    }

    .eigen-beheer-vertikal-box .stk-block-heading{
        grid-area: title;
        align-self: start;
    }

    .eigen-beheer-vertikal-box .stk-block-heading__text{
        font-size: 16px;
    }

    /* Indented by the width of the thumbnail and its gap, so the caption lines
       up with the title above it; the arrow keeps the far right. */
    .eigen-beheer-vertikal-box > .wp-block-column:last-child{
        flex: 1 1 100% !important;
        justify-content: space-between;
        gap: 12px;
        margin-top: 12px;
        padding-left: 130px;
    }
}


/* Two figures per row: core keeps columns on one line above 782px, so the wrap
   has to be forced. The dividers then belong only to the right-hand one. */
@media (min-width: 783px) and (max-width: 1200px) {
    .over-ons-colums{
        flex-wrap: wrap !important;
    }

    .over-ons-colums__item{
        flex-basis: 50% !important;
    }

    .over-ons-colums__item:nth-child(odd){
        border-left: 0;
        padding-left: 0;
    }

    /* The second pair is ruled off from the first the same way the row is. */
    .over-ons-colums__item:nth-child(n + 3){
        border-top: 1px solid var(--border-opacity);
    }

    .over-ons-colums__item > div:nth-of-type(2){
        margin-top: 36px !important;
    }
}

/* Stacked: the dividers turn into rules between the figures. */
@media (max-width: 782px) {
    .over-ons-colums{
        row-gap: 0;
    }

    .over-ons-colums__item{
        padding: 30px 0;
    }

    .over-ons-colums__item + .over-ons-colums__item{
        border-left: 0;
        border-top: 1px solid var(--border-opacity);
        padding-left: 0;
    }

    .over-ons-colums__item > div:nth-of-type(1) .stk-block-text__text{
        font-size: 28px;
    }

    .over-ons-colums__item > div:nth-of-type(1).stk-block::after{
        margin-top: 20px;
    }

    .over-ons-colums__item > div:nth-of-type(2){
        margin-top: 24px !important;
    }

    .over-ons-colums__item > div:nth-of-type(2) .stk-block-text__text{
        font-size: 19px;
    }

    .over-ons-colums__item .stk-block-subtitle{
        margin-top: 12px !important;
    }
}

/* The row needs about 670px on its right half to keep the description beside
   the tags: roughly 390 for the text, the gap, and 350 for three pills. Below
   that the halves are re-balanced first, then the pair is stacked - without
   this the tag column was squeezed to nothing and the pills ran outside the
   card. These are ordered widest first, so the narrower query always wins. */
@media (min-width: 783px) and (max-width: 1500px) {
    .fundering-horizontale-col > .wp-block-column:first-child{
        flex: 0 1 36% !important;
        gap: 36px;
        padding-left: 80px;
    }

    .fundering-horizontale-col > .wp-block-column:last-child{
        flex: 1 1 64% !important;
    }

    /* The panel has to grow with the right column, otherwise the left edge of
       the description stays in view once the photo has opened. */
    .fundering-horizontale-col .stk-block-image{
        width: calc(64% - 16px);
    }

    /* Shrinks but never grows: left to grow it swallowed the row and pushed
       the three tags into a vertical stack. */
    .fundering-horizontale-col > .wp-block-column .wp-block-columns > .wp-block-column:first-child{
        flex: 0 1 380px;
    }

    .fundering-horizontale-col > .wp-block-column:first-child .stk-block-text__text{
        font-size: 38px;
    }
}

/* Not enough width left for two columns of text, so the tags move under the
   description. The photo still opens over the right half. */
@media (min-width: 783px) and (max-width: 1300px) {
    .fundering-horizontale-col > .wp-block-column:first-child{
        gap: 28px;
        padding-left: 48px;
    }

    /* Core columns carry flex-wrap: nowrap !important above 782px, so wrapping
       them back has to be !important too. */
    .fundering-horizontale-col > .wp-block-column .wp-block-columns{
        flex-wrap: wrap !important;
        gap: 14px;
    }

    /* Both children are named so this outweighs the :first-child rule in the
       block above, which would otherwise keep the description beside the tags
       however narrow the row gets. */
    .fundering-horizontale-col > .wp-block-column .wp-block-columns > .wp-block-column:first-child,
    .fundering-horizontale-col > .wp-block-column .wp-block-columns > .wp-block-column:last-child{
        flex: 1 1 100%;
    }
}

/* Stacked, there is no right half to open the photo into - and a touch screen
   never hovers - so the row just reads as text. */
@media (max-width: 900px) {
    /* Core keeps columns on one line above 782px, so without this the two
       halves stayed side by side and both ended up too narrow to read. */
    .fundering-horizontale-col{
        flex-wrap: wrap !important;
        padding: 24px;
    }

    /* Everything on its own line from here down. This also undoes the 36/64
       split above: that rule is !important, and without this it survived past
       the point where core stacks the columns, squeezing the title to 14px and
       breaking it one letter per line. */
    .fundering-horizontale-col > .wp-block-column:first-child,
    .fundering-horizontale-col > .wp-block-column:last-child{
        flex: 1 1 100% !important;
    }

    .fundering-horizontale-col > .wp-block-column .wp-block-columns{
        flex-wrap: wrap !important;
        gap: 14px;
    }

    /* Centred vertically it ended up as a stripe beside the paragraph; here it
       marks the number instead. */
    .fundering-horizontale-col::before{
        top: 24px;
        left: 0;
        height: 46px;
        transform: none;
    }

    .fundering-horizontale-col > .wp-block-column:first-child{
        gap: 24px;
        padding-left: 24px;
    }

    .fundering-horizontale-col > .wp-block-column .wp-block-columns > .wp-block-column:first-child,
    .fundering-horizontale-col > .wp-block-column .wp-block-columns > .wp-block-column:last-child{
        flex: 1 1 100%;
    }

    /* A touch screen cannot hover, so the photo opens on a tap - the class is
       set by assets/js/fundering.js. It slides out under the tags instead of
       over them, so nothing the reader just tapped on disappears. */
    .fundering-horizontale-col{
        cursor: pointer;
    }

    .fundering-horizontale-col .stk-block-image{
        position: static;
        width: 100%;
        height: 0;
        margin: 0 !important;
        overflow: hidden;
        transition: height .45s ease, margin-top .45s ease;
    }

    .fundering-horizontale-col.is-open .stk-block-image{
        height: 180px;
        margin-top: 16px !important;
    }
}

/* On a narrow phone the indent left the title too little room and words like
   "VOORBEREIDINGSFASE" broke in half. */
@media (max-width: 480px) {
    .fundering-horizontale-col > .wp-block-column:first-child{
        gap: 16px;
        padding-left: 0;
    }

    .fundering-horizontale-col > .wp-block-column:first-child .stk-block-text__text{
        font-size: 30px;
    }
}


/* At full size the header row needs 1446px, but the burger only replaced the inline
   nav at 1100px - between those two widths the header pushed the whole page wider than
   the viewport. Tighten the row first, then drop the nav where even that stops fitting
   (tightened it needs 1206px; without the nav, 627px). */
@media (max-width: 1500px) {
    :root {
        --logo-height: 52px;
    }
    .header-inner {
        gap: 24px;
    }
    .header-actions {
        gap: 14px;
    }
    .main-menu {
        gap: 20px;
    }
    .main-menu a {
        font-size: 12px;
    }
    .lang-switch__item {
        padding: 6px 10px;
    }
}

@media (max-width: 1220px) {
    #menu {
        display: none;
    }

    .waarom-colums-box{

    }

    .waarom-colums-box__col {
        aspect-ratio: 23 / 28;
        padding: 25px;
    }

    .waarom-colums-box__col .stk-block-subtitle__text {
        padding: 9px 10px;
        font-size: 11px;
    }
}

@media (max-width: 1024px) {
    .block-over-ons {
        flex-direction: column;
        gap: 80px;
    }

    /* Core forces flex-wrap:wrap on every columns block under 782px, and a
       column-direction container that wraps sizes its lines by content: the
       text column came out at the unwrapped width of its paragraph (2100px on
       a phone) and the whole page scrolled sideways with it. A definite width
       holds the line to the container. */
    .block-over-ons > .wp-block-column {
        width: 100%;
    }

    .small-top-pading{
        padding-top: 30px !important;
    }

    .over-ons-detail {
        padding-top: 50px;
        margin-top: 80px;
    }

    .blue-container__slider-box__item {
        min-width: 380px;
    }

    .blue-container__slider-box__item-title h3{
        font-size: 26px;
    }

    .blue-container__slider-box__item-bottom p {
        font-size: 20px;
        line-height: 1.2;
    }

    .wp-block-stackable-tabs.stk-block-background.tab-container{
        --tab-labels-w: 44%;
    }

    .tab-container .stk-block-tab-labels {
        margin: 16px 0 16px 16px;
        padding: 20px 30px 20px 20px;
        border-radius: 7px;
    }

    .tab-container .stk-block-tabs__tab {
        gap: 12px;
        padding: 16px 0 16px 14px;
    }

    .tab-container > .stk-row {
        gap: 40px;
        min-height: 550px;
    }

    .tab-container [role="tabpanel"] .wp-block-columns {
        left: calc(var(--tab-labels-w) + 50px);
        right: 40px;
        bottom: 40px;
    }

    .projecten__title {
        margin-top: 22px;
        font-size: 20px;
        line-height: 1.2;
    }

    .projecten__cta {
        font-size: 13px;
    }

    .blue-container__slider::before, .blue-container__slider::after {
        width: var(--slider-fade, 100px);
    }

    .container-main {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .title-colum-box p {
        font-size: 14px;
        line-height: 22px;
        text-wrap: pretty;
    }

    .container {
        --container-padding: 30px;
        margin: 0 auto;
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }

    .wp-block-columns.voor-wie-colums > .wp-block-column {
        flex: 0 0 clamp(360px, 23%, 450px) !important;
    }

    .comment-box .stk-block-carousel__slider > .stk-block-column {
        padding: 40px 50px;
        border-radius: 12px;
    }

    .comment-box .stk-block-icon {
        top: 28px;
        left: 30px;
        opacity: 0.6;
    }

    .comment-box .stk-block-text__text {
        font-size: 18px;
        line-height: 1.4;
    }

    .comment-box .wp-block-media-text {
        grid-template-columns: 50px auto !important;
        gap: 20px;
        margin-top: 20px;
    }

    .projecten__link {
        aspect-ratio: 5.5 / 5;
        padding: 24px;
        border-radius: 12px;
    }

    .tab-container [role="tabpanel"] .wp-block-columns p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.4;
    }

    .header-colum h1 {
        font-size: clamp(1.2rem, 1.6vw + 2.5rem, 4.4rem);
        font-weight: 700;
    }

    .header-colum .buttoms-bottom{
        flex-direction: column;
        align-items: flex-start;
    }

    .waarom-colums-box{
        flex-direction: column;
    }

}

/* Below the width where Stackable stacks the tabs, the desktop layout falls
   apart: the media is still absolutely placed over the whole block and the text
   column gets squeezed to a sliver behind the label card. Everything goes back
   into the flow here - media, caption, text - and the label list sits under it.

   Kept last in the file on purpose. A media query adds no specificity, so this
   only wins over the desktop rules and over the wider max-width:1024px block by
   coming after them - anything appended below would override it again. */
@media (max-width: 900px) {
    .wp-block-stackable-tabs.stk-block-background.tab-container{
        padding: 18px;
    }

    .tab-container > .stk-row{
        display: block;
        min-height: 0;
    }

    .tab-container [role="tabpanel"] .stk-block-content{
        display: flex;
        flex-direction: column;
    }

    .tab-container .wp-block-video,
    .tab-container .wp-block-image,
    .tab-container .stk-block-image{
        order: 1;
        position: relative;
        inset: auto;
        aspect-ratio: 4 / 3;
        border-radius: 10px;
        overflow: hidden;
    }

    .tab-container .stk-block-content > .stk-block-text:first-child{
        order: 2;
        position: static;
        margin-top: 18px;
    }

    .tab-container .stk-block-content > .stk-block-text:first-child p{
        display: inline-block;
    }

    .tab-container [role="tabpanel"] .wp-block-columns{
        order: 3;
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 14px;
    }

    .tab-container [role="tabpanel"] .wp-block-columns p{
        max-width: none;
        font-size: 14px;
    }

    .tab-container .stk-block-tab-labels{
        margin: 0 0 20px;
        padding: 8px 18px;
    }

    .tab-container .stk-block-tabs__tab{
        padding: 14px 0 14px 16px;
        font-size: 13px;
    }

    .tab-container .stk-block-tabs__tab::before{
        height: 14px;
    }
}

@media (max-width: 768px) {
    .header-colum h1 {
        font-size: clamp(1.1rem, 1vw + 1.8rem, 2rem);
        font-weight: 700;
    }

    .contact-colums-box__col-row > .wp-block-column:last-child > .stk-block-text:nth-child(2) .stk-block-text__text{
        font-weight: 600 !important;
        line-height: 1.3;
    }

    .video-box-eigen video {
        aspect-ratio: 3 / 2 !important;
        margin: -200px 0 0 0;
    }

    .video-box-eigen {
        margin-left: calc(-0.6 * var(--video-bleed));
        margin-right: calc(-0.6 * var(--video-bleed));
    }

    .tab-container .stk-block-tabs__tab {
        padding: 10px 0 10px 10px;
        font-size: 12px;
    }

    .over-ons-detail p strong {
        font-size: 22px;
        line-height: 1.1;
    }

    .over-ons-detail {
        padding-top: 40px;
        margin-top: 50px;
    }

    .blue-container__slider-box__item-title h3 {
        font-size: 18px;
    }

    .blue-container__slider-box__item-bottom p {
        font-size: 16px;
        line-height: 1.2;
    }

    .over-ons-detail > div{
        flex-basis: auto !important;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: auto !important;
    }

    .blue-container__slider-box__item-bottom p + p {
        margin-top: 14px;
        font-size: 14px;
        font-weight: 300;
        line-height: 1.3;
    }

    .container-main {
        padding-top: 70px;
        padding-bottom: 90px;
    }

    .block-over-ons {
        gap: 50px;
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    .blue-container__slider-box__item {
        min-width: 260px;
        max-width: 190px;
    }

    .lang-switch {
        display: none;
    }
    :root {
        --logo-height: 38px;
    }
    .menu-toggle__label {
        display: none;
    }
    .menu-toggle {
        padding: 12px;
    }

    .tab-container [role="tabpanel"] .wp-block-columns p {
        max-width: none;
        font-size: 13px;
        font-weight: 300;
        line-height: 1.5;
    }

    .projecten__item {
        flex: 0 0 clamp(300px, 50%, 740px);
        scroll-snap-align: center;
    }

    .projecten__link {
        aspect-ratio: 4.3 / 5;
        padding: 20px;
        border-radius: 12px;
    }

    .projecten__title {
        margin-top: 22px;
        font-size: 17px;
        line-height: 1.3;
    }

    .header-colum .buttoms-bottom{
        gap: 15px;
    }
}

/* The blanket "flex: auto !important" for stacked columns under 768px collapses
   these cards to their content - 32px wide against a 390px screen, because the
   aspect-ratio then has nothing to work from. Kept last for the same reason as
   the block above: equal specificity, so only the order decides. */
@media (max-width: 768px) {
    .wp-block-columns.voor-wie-colums > .wp-block-column{
        flex: 0 0 90% !important;
        max-width: 420px;
    }

    .container {
        --container-padding: 15px;
        margin: 0 auto;
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }

    .waarom-colums-box {
        gap: 20px;
    }
}

/* One quote at a time on a phone, and the author line rebuilt.
   WordPress stacks the media-text block on small screens by rewriting its grid
   areas, but the two-column template pinned further up stayed - so the name
   landed inside the 50px avatar column and broke a letter per line. A flex row
   sidesteps the grid altogether. Kept last: equal specificity, order decides. */
@media (max-width: 768px) {
    .comment-box .stk-block-carousel__slider > .stk-block-column{
        flex: 0 0 100% !important;
        padding: 50px 50px;
    }

    .comment-box .stk-block-text__text{
        font-size: 16px;
        line-height: 1.45;
    }

    .comment-box .stk-block-icon{
        top: 30px;
        left: 30px;
    }

    .comment-box .stk-block-icon svg.ugb-custom-icon{
        width: 34px;
        height: 34px;
    }

    .comment-box .wp-block-media-text{
        display: flex !important;
        align-items: center;
        gap: 14px;
        margin-top: 22px;
    }

    .comment-box .wp-block-media-text__media{
        flex: 0 0 auto;
    }

    .comment-box .wp-block-media-text__media img{
        width: 56px;
        height: 56px;
    }

    .comment-box .wp-block-media-text__content{
        flex: 1 1 auto;
        min-width: 0;
    }

    .comment-box .wp-block-media-text__content p{
        font-size: 14px;
    }

    .comment-box__dots{
        margin-top: 28px;
    }

    /* Only one quote is on screen here, so there is no neighbour to play down -
       and while the track glides between two of them the dimming briefly landed
       on the visible card, which read as the whole block going inactive. */
    .comment-box.is-live .stk-block-carousel__slider > .stk-block-column,
    .comment-box.is-live .stk-block-carousel__slider > .stk-block-column.is-centered{
        opacity: 1;
        transform: none;
    }
}

/* ------------------------------ negen diensten on smaller screens ---
   Three across stops working below about 1050px: the titles break onto two
   lines, the descriptions run to four, and the resting window narrows into a
   sliver that runs straight into the title. Two across from there down to
   Stackable's own stacking point at 768px, and one below that.

   This block sits at the end of the file on purpose - media queries carry no
   extra weight of their own, so it has to come after the rules it adjusts. */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Stackable writes its column widths with !important, so this needs the
       block's own classes to outweigh it rather than just !important. */
    .negen-diensten-item.stk-block.stk-column{
        flex-basis: calc((100% - var(--stk-column-gap, 0px)) / 2) !important;
    }
}

@media (max-width: 1024px) {
    .negen-diensten-item > div > .stk-block-content{
        min-height: 210px;
        padding: 24px 24px 20px;
    }

    /* Wider and shorter cards need a rounder corner: the desktop 13% x 50%
       reads as a vertical stripe once the card narrows. */
    .negen-diensten-item-img{
        clip-path: ellipse(16% 38% at 100% 0);
    }

    .negen-diensten-item-title h3{
        font-size: 18px;
    }

    .negen-diensten-item-desc .stk-block-text__text{
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    /* One card per row: the height comes from the text, so the gap under the
       number is set rather than left to margin-bottom: auto, which has nothing
       to distribute once the card is only as tall as its content. */
    .negen-diensten-item > div > .stk-block-content{
        min-height: 0;
        padding: 24px;
    }

    .negen-diensten-item-num{
        margin-bottom: 24px !important;
    }

    .negen-diensten-item-img{
        clip-path: ellipse(20% 44% at 100% 0);
    }

    .negen-diensten-item-title h3{
        font-size: 16px;
    }

    .negen-diensten-item-desc{
        max-width: none;
    }

    .header-over-ons h1 {
        max-width: initial;
        font-size: clamp(1rem, 0.8vw + 1.7rem, 1.7rem) !important;
    }

    .header-bottom .wp-block-column.is-vertically-aligned-center{
        width: auto;
    }

    .paddin-left-col{
        padding-left: 30px;
        padding-right: 20px;
    }

    .jobs-sfeer-container__right .stk-block-text__text{
        max-width: 32em;
    }
}

/* ----------------------------------------------------------- contactform ---
   The Forminator form as the design draws it: a white card on the grey band,
   grey fields with no visible border until they are focused, and the yellow
   pill with the arrow at the foot.

   Forminator ships a lot of this itself, and its per-form rules are written
   against #forminator-module-<id> - an id, which no selector here can outweigh
   on specificity alone. So the properties it also sets are marked !important;
   the rest is left plain. The block is written against .forminator-custom-form
   rather than the one form id, so every form on the site gets the same skin. */
.forminator-ui.forminator-custom-form{
    /* padding and radius are !important because Forminator zeroes both from
       #forminator-module-<id>, and an id outweighs any class selector. */
    padding: clamp(24px, 3vw, 50px) !important;
    border-radius: 20px !important;
    background: var(--white);
}

.forminator-ui.forminator-custom-form .forminator-label{
    margin-bottom: 10px !important;
    color: var(--black);
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3;
}

/* The design keeps the asterisk in the colour of the label; Forminator paints
   it red. */
.forminator-ui.forminator-custom-form .forminator-label .forminator-required{
    color: inherit !important;
}

.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form select.forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea{
    padding: 0 18px !important;
    height: 48px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background-color: var(--grey-lite) !important;
    color: var(--black) !important;
    font-size: 15px !important;
    transition: border-color .25s ease, background-color .25s ease;
}

.forminator-ui.forminator-custom-form .forminator-input::placeholder,
.forminator-ui.forminator-custom-form .forminator-textarea::placeholder{
    color: var(--text-grey);
    opacity: .75;
}

.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus{
    outline: 0;
    border-color: var(--blue) !important;
    background-color: var(--white) !important;
}

/* A select needs the room the native arrow took and a mark of its own. */
.forminator-ui.forminator-custom-form select.forminator-input{
    padding-right: 44px !important;
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--icon-chevron-down);
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 14px;
    cursor: pointer;
}

.forminator-ui.forminator-custom-form .forminator-textarea{
    padding: 16px 18px !important;
    height: auto !important;
    min-height: 160px;
    line-height: 1.5;
    resize: vertical;
}

/* The character counter sits between the label and the field in the markup;
   put it on the label's own line, pushed to the right, where the design has
   nothing competing with it. */
.forminator-ui.forminator-custom-form .forminator-field-textarea .forminator-field{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
}

.forminator-ui.forminator-custom-form .forminator-field-textarea .forminator-description{
    margin: 0 0 10px !important;
    color: var(--text-grey);
    font-size: 12px;
}

.forminator-ui.forminator-custom-form .forminator-field-textarea .forminator-textarea{
    flex: 0 0 100%;
}

/* Radio groups. Forminator ships its own bare circles; these give them the
   same treatment the consent checkbox below already has, so a form built out of
   choices does not look like a different site. */
/* Forminator gives every option 10px above and below, which on a list of six
   reads as six separate questions. The padding takes over: it keeps the row a
   comfortable height to aim at without putting the same air between the lines. */
.forminator-ui.forminator-custom-form .forminator-radio{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 2px 0 !important;
    padding: 3px 0;
    cursor: pointer;
}

.forminator-ui.forminator-custom-form .forminator-radio-bullet{
    flex: 0 0 auto;
    margin-top: 1px;
    border: 1px solid var(--grey) !important;
    background-color: var(--white) !important;
    color: var(--blue) !important;
}

.forminator-ui.forminator-custom-form .forminator-radio input:checked + .forminator-radio-bullet{
    border-color: var(--blue) !important;
}

.forminator-ui.forminator-custom-form .forminator-radio-label{
    /* Forminator indents the text from its bullet with a margin of its own,
       which lands on top of the row's gap and doubles the distance. */
    margin-left: 0 !important;
    color: var(--text-grey);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

/* The question above a group of choices is a label like any other. */
.forminator-ui.forminator-custom-form span.forminator-label{
    display: block;
}

/* Consent row. */
.forminator-ui.forminator-custom-form .forminator-checkbox{
    align-items: flex-start;
    gap: 12px;
}

.forminator-ui.forminator-custom-form .forminator-checkbox-box{
    flex: 0 0 auto;
    margin-top: 2px;
    border: 1px solid var(--grey) !important;
    border-radius: 4px !important;
    background-color: var(--white) !important;
    color: var(--white) !important;
}

.forminator-ui.forminator-custom-form .forminator-checkbox input:checked + .forminator-checkbox-box{
    border-color: var(--blue) !important;
    background-color: var(--blue) !important;
}

.forminator-ui.forminator-custom-form .forminator-checkbox-label{
    color: var(--text-grey);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.forminator-ui.forminator-custom-form .forminator-checkbox-label a{
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The submit pill, same shape and arrow as the cards elsewhere on the site. */
.forminator-ui.forminator-custom-form .forminator-button-submit{
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: auto !important;
    /* The design draws the pill at a set width with the arrow pushed to its
       far edge, rather than sizing it to the label - but never wider than the
       card, which on the narrowest phones is less than that. */
    min-width: min(260px, 100%) !important;
    padding: 14px 26px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: var(--yellow) !important;
    color: var(--black) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.1;
    transition: background-color .3s ease, color .3s ease;
}

.forminator-ui.forminator-custom-form .forminator-button-submit::after{
    content: "";
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    background-color: currentColor;
    -webkit-mask: var(--icon-arrow-dr) center / contain no-repeat;
    mask: var(--icon-arrow-dr) center / contain no-repeat;
    transition: transform .25s ease;
}

.forminator-ui.forminator-custom-form .forminator-button-submit:hover{
    background-color: var(--blue) !important;
    color: var(--white) !important;
}

.forminator-ui.forminator-custom-form .forminator-button-submit:hover::after{
    transform: translate(2px, 2px);
}

@media (max-width: 782px){
    /* Forminator's own columns keep two fields side by side on a phone. */
    .forminator-ui.forminator-custom-form .forminator-row > .forminator-col{
        flex: 0 0 100%;
    }
}

/* --------------------------------------------------- volg & ontdek kaarten ---
   Three outlined cards on the blue band: a yellow icon tile, the channel name
   with a short rule under it, one line of copy and the link out. The blocks
   arrive from the editor with no styling of their own, so everything below is
   written against their order inside the column - icon, name, copy, link. */

/* The same 1370px measure the design gives the contact cards higher up this
   page: a cap that the row is centred on, not a share of the container. The
   width is stated as well, because the auto margins switch off the stretch
   the Stackable column around it would otherwise give the row. */
.wp-block-columns.volg-ontdek-links{
    align-items: stretch;
    gap: 14px;
    width: 100%;
    max-width: 1370px;
    margin-left: auto;
    margin-right: auto;
}

/* flex carries !important because core's layout stylesheet writes the same
   property at (0,3,0) through :where(), which a pair of classes cannot outrank. */
.wp-block-columns.volg-ontdek-links > .wp-block-column{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 0 !important;
    padding: 30px;
    border: 1px solid var(--border-opacity);
    border-radius: 10px;
    transition: border-color .3s ease;
}

.wp-block-columns.volg-ontdek-links > .wp-block-column:hover{
    border-color: var(--yellow);
}

/* The card is a flex column, so no margin collapses any more: the 24px
   Stackable hangs under every block and the 24px core hangs above them would
   both add to the spacing the design sets between them. */
.volg-ontdek-links > .wp-block-column > .stk-block{
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

/* ---- the icon tile ---- */
/* The tile is part of the SVG itself - a 44x44 rounded rect at 15% yellow
   behind the glyph - so it only needs the viewBox drawn at its own size. The
   markup carries width="32" as an attribute, which CSS outranks. */
.volg-ontdek-links > .wp-block-column > .stk-block-icon{
    margin-bottom: 24px;
    line-height: 0;
}

.volg-ontdek-links .stk-block-icon svg.ugb-custom-icon{
    width: 44px;
    height: 44px;
}

/* ---- the channel name, with the short rule under it ---- */
.volg-ontdek-links .stk-block-text:nth-child(2){
    margin-bottom: 10px;
}

.volg-ontdek-links .stk-block-text:nth-child(2) .stk-block-text__text{
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.2;
    text-transform: uppercase;
}

.volg-ontdek-links .stk-block-text:nth-child(2) .stk-block-text__text::after{
    content: "";
    display: block;
    width: 10px;
    height: 2px;
    margin-top: 10px;
    background-color: var(--yellow);
}

/* ---- the line of copy ---- */
.volg-ontdek-links .stk-block-text:nth-child(3){
    margin-bottom: 20px;
}

.volg-ontdek-links .stk-block-text:nth-child(3) .stk-block-text__text{
    color: var(--white);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    text-wrap: pretty;
}

/* ---- the link out ---- */
/* margin-top: auto holds the link against the bottom edge, so a card whose
   copy runs to two lines does not carry its link a line below its neighbours. */
.volg-ontdek-links .stk-block-text:nth-child(4){
    margin-top: auto;
}

/* The arrow sits on the paragraph rather than inside the link: as part of the
   link it would be crossed by the link's own underline, which the design keeps
   to the words. */
.volg-ontdek-links .stk-block-text:nth-child(4) .stk-block-text__text{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.volg-ontdek-links .stk-block-text:nth-child(4) .stk-block-text__text::after{
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background-color: var(--yellow);
    -webkit-mask: var(--icon-arrow-dr) center / contain no-repeat;
    mask: var(--icon-arrow-dr) center / contain no-repeat;
    transition: transform .25s ease;
}

.volg-ontdek-links .wp-block-column:hover .stk-block-text:nth-child(4) .stk-block-text__text::after{
    transform: translate(2px, 2px);
}

.volg-ontdek-links .stk-block-text:nth-child(4) a{
    color: var(--yellow);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

@media (max-width: 900px){
    /* Core stacks .wp-block-column below 782px and Stackable answers with
       flex-basis: auto at 768px, which leaves the three cards sharing one
       shrinking line on a phone - so the stacking is spelled out here. */
    .wp-block-columns.volg-ontdek-links{
        flex-wrap: wrap !important;
    }

    .wp-block-columns.volg-ontdek-links > .wp-block-column{
        flex: 0 0 100% !important;
    }
}

/* ---------------------------------------------------------------- footer ---
   One grid, six cells. The top row is the brand block, the two menu columns
   and the contact column; the bottom row is the copyright and the bar beside
   it. Both rows share the same column track, which is what puts the left edge
   of the bottom bar exactly under the Sitemap column, as in the design.

   The tracks are percentages rather than fixed widths so the proportions of
   the design hold at every window width: half the row for the brand, then two
   narrow menu columns and a wider contact column. */
.site-footer{
    position: relative;
    overflow: hidden;
    background-color: var(--blue-dark);
    color: var(--white);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-top: -20px;
    z-index: 2;
}

/* The site's arc, at the size the whole footer can carry: it comes in over the
   top edge and leaves through the right one. Drawn from a border and an
   elliptical radius, like the smaller arcs on the cards, so the stroke stays
   1px whatever the box does. It bleeds past the right edge, which the footer's
   own overflow clips. */
.site-footer::before{
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: -40px;
    width: 26%;
    height: 78%;
    border-left: 1px solid var(--yellow);
    border-bottom: 1px solid var(--yellow);
    border-bottom-left-radius: 100% 100%;
    pointer-events: none;
}

.site-footer__inner{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12.7% 12.7% 24.6%;
    row-gap: 28px;
    padding-top: 110px;
    padding-bottom: 40px;
}

/* ---- the brand column ---- */
/* The logo holds the top of the column and the language switch and the tagline
   the bottom, however tall the columns beside it turn out to be. */
.site-footer__brand{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.site-footer__logo{
    display: inline-block;
    line-height: 0;
}

.site-footer__logo img{
    width: min(345px, 100%);
    height: auto;
}

.site-footer__partner{
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-top: 45px;
}

.site-footer__partner-intro{
    color: var(--grey);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.55;
}

/* The wordmark that stands in until a partner logo is uploaded: the site's own
   type with the yellow mark in front of it. min-content is what breaks it over
   two lines at its own space, as the logo in the design does. */
.site-footer__partner-mark{
    display: block;
    position: relative;
    width: min-content;
    padding-left: 13px;
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
}

.site-footer__partner-mark::before{
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 4px;
    height: 24px;
    background-color: var(--yellow);
    -webkit-mask: var(--icon-label-mark) center / contain no-repeat;
    mask: var(--icon-label-mark) center / contain no-repeat;
}

.site-footer__partner-logo{
    width: auto;
    height: 34px;
}

.site-footer__brand-foot{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 46px;
    /* The design holds the switch and the tagline well down the column, clear of
       the lock-up above them; space-between takes over from here if a column
       beside this one turns out to be the taller of the two. */
    margin-top: clamp(60px, 14vw, 250px);
}

/* The switch is hidden on small screens in the header, where the panel carries
   it instead; in the footer it stays, so that rule has to be outweighed. */
.site-footer .lang-switch--footer{
    display: flex;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    background: transparent;
    backdrop-filter: none;
}

/* Tighter than the switch in the header: the design draws this one as a small
   pill rather than a control the thumb has to find. */
.site-footer .lang-switch--footer .lang-switch__item{
    padding: 6px 9px;
}

.site-footer__tagline{
    color: var(--white);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    text-wrap: balance;
}

/* ---- the two menu columns ---- */
.site-footer__label{
    display: block;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, .45);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
}

.site-footer__menu{
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.site-footer__menu a{
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .25s ease;
}

.site-footer__menu a:hover{
    color: var(--yellow);
}

/* ---- the contact column ---- */
.site-footer__contact{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: right;
}

.site-footer__address-line{
    color: var(--white);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}

.site-footer__address-line + .site-footer__address-line{
    margin-top: 9px;
}

/* The block sits on the bottom of the column, under whatever height the brand
   column beside it has taken. */
.site-footer__contact-block{
    padding-top: clamp(40px, 6vw, 106px);
}

.site-footer__card{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: fit-content;
    min-width: min(290px, 100%);
    max-width: 100%;
    margin-left: auto;
    padding: 26px 30px 28px;
    border-radius: 12px;
    background-color: var(--blue);
}

/* The colour is stated because the reset hands a[href^="tel"] whatever colour
   it inherits. */
.site-footer__card-link{
    color: var(--white);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    text-decoration: none;
    transition: color .25s ease;
}

.site-footer__card-link:hover{
    color: var(--yellow);
}

/* The pill is the site's yellow button; what the design adds is a width of its
   own, with the arrow held against the far edge rather than following the
   label. */
.site-footer__cta{
    margin-top: 34px;
}

.site-footer__cta a{
    justify-content: space-between;
    min-width: min(220px, 100%);
}

/* ---- the bottom row ---- */
.site-footer__copyright{
    align-self: center;
    padding-right: 30px;
    color: rgba(255, 255, 255, .65);
    font-size: 13px;
    font-weight: 200;
    line-height: 1.5;
}

.site-footer__legal{
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 18px 40px;
    border-radius: 14px;
    background-color: rgba(255, 255, 255, .06);
}

.site-footer__legal-menu{
    display: flex;
    flex-wrap: wrap;
    gap: 12px 48px;
}

.site-footer__legal-menu a{
    color: var(--white);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    transition: color .25s ease;
}

.site-footer__legal-menu a:hover,
.site-footer__credit a:hover{
    color: var(--yellow);
}

.site-footer__credit{
    margin-left: auto;
    color: rgba(255, 255, 255, .65);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
}

.site-footer__credit a{
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .25s ease;
}


/* The footer narrows in two steps. First the brand block leaves the row and
   takes the full width, with the two menus and the contact column left behind
   on a row of their own - the contact track keeps a floor of 300px, which is
   what the card needs before its address wraps, and the menus share whatever
   is left. Then everything becomes one column.

   The contact column keeps its right edge for as long as it is still a column
   beside something; once it is a band across the footer, right-aligned type
   with nothing next to it reads as a mistake, so it turns left with the rest. */
@media (max-width: 1400px){
    /* The arc is drawn against the width of the footer, so it steepens as the
       window narrows. Widening the box holds its curve roughly where the design
       has it - meeting the top corner of the card rather than crossing it. */
    .site-footer::before{
        width: 30%;
        height: 72%;
    }
}

@media (max-width: 1200px){
    .site-footer__inner{
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, 34%);
        row-gap: 45px;
        padding-top: 90px;
    }

    .site-footer__brand,
    .site-footer__copyright,
    .site-footer__legal{
        grid-column: 1 / -1;
    }

    /* From here the footer is tall rather than wide, and the arc would run
       down through the type instead of beside it. */
    .site-footer::before{
        display: none;
    }

    /* The gap the design holds between the lock-up and the language switch is
       the height of the columns beside it; with the brand on a row of its own
       there is nothing left to fill. */
    .site-footer__brand-foot{
        margin-top: 55px;
    }

    .site-footer__contact-block{
        padding-top: 45px;
    }

    .site-footer__copyright{
        padding-right: 0;
    }
}

@media (max-width: 900px){
    .site-footer__inner{
        row-gap: 50px;
        padding-top: 80px;
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 700px){
    /* One column. The bar at the foot loses its two ends as well: the links and
       the credit stop sharing a line before the columns above them do. */
    .site-footer__inner{
        grid-template-columns: minmax(0, 1fr);
        row-gap: 50px;
        padding-top: 64px;
    }

    .site-footer__brand-foot{
        gap: 30px;
        margin-top: 45px;
    }

    .site-footer__partner{
        margin-top: 35px;
    }

    .site-footer__contact{
        align-items: flex-start;
        text-align: left;
    }

    .site-footer__contact-block{
        padding-top: 40px;
    }

    .site-footer__card{
        align-items: flex-start;
        width: min(360px, 100%);
        margin-left: 0;
    }

    .site-footer__legal{
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 22px 26px;
    }

    .site-footer__legal-menu{
        gap: 12px 30px;
    }

    .site-footer__credit{
        margin-left: 0;
    }

    .site-footer__tagline {
        font-size: 13px;
        font-weight: 300;
        line-height: 1.4;
    }
}

@media (max-width: 480px){
    .site-footer__inner{
        padding-top: 52px;
        padding-bottom: 32px;
    }

    /* The intro and the wordmark stand side by side down to here; on the
       narrowest screens the wordmark drops under it. */
    .site-footer__partner{
        flex-direction: column;
        gap: 14px;
    }

    .site-footer__card{
        width: 100%;
        padding: 24px 24px 26px;
    }

    .site-footer__card-link{
        font-size: 18px;
    }

    .site-footer__legal{
        padding: 20px;
    }
}

/* -------------------------------------------------------- detailvensters ---
   The panel a row on the page opens. It is a <dialog>, so it lives in the top
   layer: none of Stackable's stacking contexts can cover it, and the page
   behind goes inert without the theme having to do anything about it.

   The dialog box itself is the panel's own size and sits against the left edge
   - the backdrop fills the rest of the screen on its own. That is also what
   makes "clicked outside" easy to read: a click on the backdrop lands on the
   dialog element rather than on anything inside it. */
.dp-modals{
    display: contents;
}

dialog.dp-modal{
    /* The user-agent sheet gives a dialog a border, a white ground, a centring
       margin and a max size; all of it is in the way here. */
    position: fixed;
    inset: 0 auto 0 0;
    /* Scales with the window rather than sitting at 930px until the phone
       breakpoint: at 1200px that fixed width left the page behind it a strip
       too narrow to read as a page at all. Kept in a property of its own
       because the arc below has to travel exactly this far. */
    --dp-panel-w: clamp(320px, 66vw, 930px);
    width: var(--dp-panel-w);
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: var(--white);
}

.dp-modal::backdrop{
    background-color: rgba(2, 10, 10, 0);
    transition: background-color .4s ease;
}

.dp-modal.is-open::backdrop{
    background-color: rgba(2, 10, 10, .6);
}

/* The arc sits on the dialog, not on the panel: the panel scrolls, and the
   curve belongs to the corner of the window rather than to the text. */
/* The curve comes down the right edge of the panel, bends away to the left and
   then runs straight to the bottom. Left and top borders on a box whose
   top-left corner is rounded: the horizontal radius eats the whole top edge, so
   that side is all curve, while the vertical one stops short of the bottom and
   leaves the straight tail the design ends on. */
.dp-modal::after{
    content: "";
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    width: clamp(74px, 12%, 108px);
    height: clamp(150px, 26vh, 170px);
    border-top: 1px solid var(--yellow);
    border-left: 1px solid var(--yellow);
    border-top-left-radius: 100% 68%;
    pointer-events: none;
    /* It rides with the panel rather than fading in where the panel is going to
       be. It hangs on the dialog, not on the panel - the panel scrolls, and the
       curve belongs to the window - so it cannot inherit the slide and has to
       repeat it: the same distance, the same time, the same curve. Fading it
       instead left it hanging in mid-air over the page for as long as the panel
       took to leave. */
    transform: translateX(calc(-1 * var(--dp-panel-w)));
    transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}

.dp-modal.is-open::after{
    transform: none;
}

.dp-modal__panel{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: clamp(22px, 4vh, 55px) clamp(24px, 3.8vw, 55px);
    overflow-x: hidden;
    overflow-y: auto;
    /* The panel is the one thing on the site that scrolls inside a coloured
       box, and the browser's own bar sits on it like a scar. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .28) transparent;
    border-radius: 0 24px 24px 0;
    background-color: var(--blue);
    transform: translateX(-100%);
    transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}

/* A flex column hands its items' height back when the panel runs short, which
   on a phone squashed the row of logo tiles down to a sliver. Everything keeps
   the height it asked for; the spacer further down is the one thing allowed to
   give, and it says so itself. */
.dp-modal__panel > *{
    flex-shrink: 0;
}

/* scrollbar-width and scrollbar-color only reached Chrome in 121; the pseudo-
   elements are what older builds of it read. */
.dp-modal__panel::-webkit-scrollbar{
    width: 6px;
}

.dp-modal__panel::-webkit-scrollbar-track{
    background-color: transparent;
}

.dp-modal__panel::-webkit-scrollbar-thumb{
    border-radius: 3px;
    background-color: rgba(255, 255, 255, .28);
}

.dp-modal.is-open .dp-modal__panel{
    transform: none;
}

@media (prefers-reduced-motion: reduce){
    .dp-modal__panel{
        transform: none;
        transition: none;
    }

    .dp-modal::after{
        transition: none;
    }
}

/* ---- head: the label and the way out ---- */
.dp-modal__head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-bottom: clamp(28px, 7vh, 80px);
}

.dp-modal__badge{
    margin: 0;
}

.dp-modal__close{
    flex: 0 0 auto;
    /* Always the far corner. space-between puts it there while a label sits
       beside it, but a window without one leaves it the only thing on the row -
       and it slid to the left. */
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease;
}

.dp-modal__close::before{
    content: "";
    width: 14px;
    height: 14px;
    background-color: var(--white);
    -webkit-mask: var(--icon-close) center / contain no-repeat;
    mask: var(--icon-close) center / contain no-repeat;
    transition: background-color .25s ease;
}

.dp-modal__close:hover{
    border-color: var(--yellow);
    background-color: var(--yellow);
}

.dp-modal__close:hover::before{
    background-color: var(--black);
}

/* ---- title and intro ---- */
/* No corner mark on this one: in the design the title carries only the rule
   under it. The class is in the selector to outrank the theme's bare h2. */
h2.dp-modal__title::before{
    content: none;
}

.dp-modal__title{
    margin: 0 0 clamp(16px, 3vh, 34px);
    font-size: clamp(1.25rem, 1.2vw + .95rem, 1.95rem);
    line-height: 1.25;
    text-transform: uppercase;
}

.dp-modal__intro{
    max-width: 62ch;
    margin: 0;
    color: var(--white);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    text-wrap: pretty;
}

/* ---- whatever the client put in the free field ---- */
/* Anything can land here, a shortcode included, so the type is set on the
   elements rather than on the block and nothing is positioned. */
.dp-modal__content{
    width: 100%;
    margin-top: clamp(18px, 3vh, 30px);
    color: var(--white);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
}

.dp-modal__content > *:first-child{
    margin-top: 0;
}

.dp-modal__content p{
    margin: 0 0 14px;
}

.dp-modal__content p:last-child{
    margin-bottom: 0;
}

.dp-modal__content a:not(.wp-block-button__link){
    color: var(--yellow);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* A form brings its own white card with it - the site gives every Forminator
   form one further up this file - so the white the window sets for its own text
   has to stop at its edge. Anything Forminator does not colour itself, a radio
   label among them, would otherwise inherit white onto white and disappear. */
.dp-modal__content .forminator-ui{
    color: var(--text-grey);
}

/* ---- the three figures, between two rules ---- */
.dp-modal__stats{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: clamp(24px, 5vh, 64px);
    padding: clamp(18px, 3vh, 32px) 0;
    border-top: 1px solid var(--border-opacity);
    border-bottom: 1px solid var(--border-opacity);
}

.dp-modal__stat{
    flex: 1 1 0;
    min-width: 130px;
    padding-right: 24px;
}

.dp-modal__stat + .dp-modal__stat{
    padding-left: 24px;
    border-left: 1px solid var(--border-opacity);
}

.dp-modal__stat strong{
    display: block;
    color: var(--yellow);
    font-size: clamp(1.35rem, 1.4vw + .65rem, 2rem);
    font-weight: 600;
    line-height: 1.2;
}

.dp-modal__stat span{
    display: block;
    margin-top: 8px;
    color: var(--grey);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
}

/* ---- the line above the pictures ---- */
.dp-modal__caption{
    margin: clamp(24px, 4.5vh, 52px) 0 16px;
    color: var(--lite-grey);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
}

/* A caption already puts space above the pictures; the band below should not
   add its own on top of it. */
.dp-modal__caption + .dp-modal__images{
    margin-top: 0;
}

/* ---- the photo, between two rules ---- */
/* One picture the width of the panel, as in the design; a second one simply
   follows it. The rules belong to the band rather than to the image, so they
   stay put whatever the photo's proportions turn out to be. */
.dp-modal__images{
    width: 100%;
    margin-top: clamp(24px, 5vh, 64px);
}

.dp-modal__images--photo{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(20px, 3.5vh, 44px) 0;
    border-top: 1px solid var(--border-opacity);
    border-bottom: 1px solid var(--border-opacity);
}

/* ---- the logos of the clients who went before ---- */
/* The row runs past the panel's padding on the right, so the last tile is cut
   off by the edge rather than stopping short of it - which is what says there
   is more of it to scroll to. */
.dp-modal__images--logos{
    display: flex;
    gap: 17px;
    width: calc(100% + clamp(24px, 3.8vw, 55px));
    padding-bottom: 16px;
    overflow-x: auto;
    /* Stated, because naming one axis turns the other from visible into auto -
       which put a second, vertical scrollbar down the edge of the row. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--yellow) rgba(255, 255, 255, .12);
}

.dp-modal__images--logos::-webkit-scrollbar{
    height: 3px;
}

.dp-modal__images--logos::-webkit-scrollbar-track{
    background-color: rgba(255, 255, 255, .12);
}

.dp-modal__images--logos::-webkit-scrollbar-thumb{
    background-color: var(--yellow);
}

.dp-modal__tile{
    flex: 0 0 auto;
    width: clamp(126px, 17vw, 158px);
    height: clamp(64px, 8vh, 78px);
    padding: 12px 18px;
    border-radius: 8px;
    background-color: var(--white);
    overflow: hidden;
}

/* The picture is given the tile's whole content box and object-fit does the
   rest: it scales the logo down to fit and centres what is left over, whatever
   proportions the client uploads. Sizing the image itself instead - auto width
   against a max-height - left a tall logo hanging out of the bottom of its
   tile, because a percentage max-height has nothing definite to measure
   against once the image is the thing being sized. */
.dp-modal__logo{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.dp-modal__image{
    /* Height off the viewport, not off its own width: on a short window a
       2:1 picture the width of the panel pushed the buttons two screens down. */
    width: 100%;
    height: clamp(170px, 34vh, 420px);
    border-radius: 4px;
    object-fit: cover;
}

/* ---- the two buttons ---- */
/* The box holds the buttons and nothing else, so it takes their width rather
   than the panel's, as in the design; the spacer above it is what carries it
   down to the foot of the panel. */
.dp-modal__spacer{
    flex: 1 1 auto;
    min-height: clamp(24px, 4vh, 60px);
}

.dp-modal__cta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    width: fit-content;
    max-width: 100%;
    padding: clamp(20px, 2.4vw, 30px);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, .05);
}

.dp-modal__cta .btn{
    margin: 0;
}

.dp-modal__cta .yellow-btn a{
    justify-content: space-between;
    min-width: min(210px, 100%);
}

/* ---- the centred window ---- */
/* The same panel, put in the middle of the screen instead of down the left
   edge: for a window a button opens rather than a row - a form, a notice. The
   base rule pins the dialog to the left with inset and a zero margin, so both
   have to be taken back before auto margins can centre it. */
dialog.dp-modal--center{
    inset: 0;
    width: min(1000px, 94vw);
    height: auto;
    max-height: min(86vh, 900px);
    margin: auto;
}

/* The rhythm above is measured for the tall panel down the left, where there is
   height to spend. In a box that is only as tall as what it holds, the same
   spacing put a form two hundred pixels below the top of its own window. */
.dp-modal--center .dp-modal__head{
    margin-bottom: clamp(12px, 2vh, 22px);
}

/* With a label beside it the close button needs a row of its own. Without one
   it was a button alone on an empty line, holding the title forty pixels below
   where it could have been - so the row is taken out of the flow and the title
   comes up level with it. Sticky rather than absolute: the panel scrolls, and a
   way out that scrolls away with the form is no way out. */
.dp-modal--center .dp-modal__head:not(:has(.dp-modal__badge)){
    position: sticky;
    top: 0;
    z-index: 4;
    height: 0;
    margin: 0;
    overflow: visible;
    pointer-events: none;
}

/* It now floats over whatever is scrolling underneath it, and a form brings a
   white card with it: a white ring on white is no button at all. The ground of
   the panel travels with it. */
.dp-modal--center .dp-modal__head:not(:has(.dp-modal__badge)) .dp-modal__close{
    pointer-events: auto;
    background-color: var(--blue);
    box-shadow: 0 0 0 7px var(--blue);
}

.dp-modal--center .dp-modal__head:not(:has(.dp-modal__badge)) .dp-modal__close:hover{
    background-color: var(--yellow);
}

/* Room for the button the title now shares its line with. */
.dp-modal--center .dp-modal__head:not(:has(.dp-modal__badge)) + .dp-modal__title{
    padding-right: 58px;
}

.dp-modal--center .dp-modal__title{
    margin-bottom: clamp(12px, 2vh, 20px);
    font-size: clamp(1.1rem, .8vw + .85rem, 1.5rem);
}

.dp-modal--center .dp-modal__content{
    margin-top: clamp(14px, 2vh, 22px);
}

/* A form brings a card of its own with padding to match a full-width section;
   inside a window that padding sits on top of the panel's, and the two together
   left the fields in a column narrower than the window around them. */
.dp-modal__content .forminator-ui.forminator-custom-form{
    padding: clamp(20px, 3vw, 34px) !important;
}

.dp-modal--center .dp-modal__panel{
    height: auto;
    max-height: min(86vh, 900px);
    padding: clamp(20px, 3vh, 32px) clamp(18px, 2.6vw, 34px);
    border-radius: 18px;
    /* It arrives from nowhere in particular, so it grows into place rather than
       sliding in from a side it has no relationship with. */
    transform: translateY(14px) scale(.98);
    opacity: 0;
    transition: transform .3s var(--vwb-ease, cubic-bezier(.22, .61, .36, 1)),
                opacity .3s ease;
}

.dp-modal--center.is-open .dp-modal__panel{
    transform: none;
    opacity: 1;
}

/* The corner arc belongs to a panel whose bottom corner is empty by design.
   This one holds whatever the client put in it, and the curve would cross it. */
.dp-modal--center::after{
    display: none;
}

/* Nothing to hold against the foot of a box that is only as tall as its own
   contents. */
.dp-modal--center .dp-modal__spacer{
    display: none;
}

.dp-modal--center .dp-modal__cta{
    margin-top: clamp(20px, 3vh, 32px);
}

.white-container .white-bg p{
    color: var(--black);
}

.white-container .white-bg .outline-btn a{
    color: var(--black);
    border-bottom: 1px solid var(--black);
}

.white-container .white-bg .outline-btn a::after {
    background-color: var(--blue);
}

@media (prefers-reduced-motion: reduce){
    .dp-modal--center .dp-modal__panel{
        transform: none;
        transition: none;
    }
}

@media (max-width: 782px){
    dialog.dp-modal{
        width: 100%;
    }

    /* On a phone there is no room to be a box in the middle of anything. */
    dialog.dp-modal--center{
        inset: 0;
        width: 100%;
        height: 100%;
        max-height: none;
        margin: 0;
    }

    .dp-modal--center .dp-modal__panel{
        max-height: none;
        height: 100%;
        border-radius: 0;
    }

    .dp-modal__panel{
        border-radius: 0;
    }

    /* The curve needs a corner to sit in; full-width there is none to spare. */
    .dp-modal::after{
        display: none;
    }

    .dp-modal__head{
        margin-bottom: 34px;
    }

    /* Two figures to a line rather than three squeezed onto one, which takes
       the dividers with it - they only read between neighbours on a row. */
    .dp-modal__stat{
        flex: 1 1 40%;
        min-width: 0;
        padding-right: 16px;
    }

    .dp-modal__stat + .dp-modal__stat{
        padding-left: 0;
        border-left: 0;
    }

    .dp-modal__stats{
        gap: 18px 0;
    }

    .dp-modal__cta{
        width: 100%;
        gap: 18px;
    }

    .dp-modal__cta .btn,
    .dp-modal__cta .btn a{
        width: 100%;
    }
}

/* ------------------------------------------------------ juridische pagina's ---
   Privacy, cookies and the terms: pages that are nothing but headings and
   running text. Everything else on the site is a dark full-width band, so these
   inherit a white h2 on a white ground and start their first line underneath
   the header. What they get here is a blue band to carry the header and the
   title, then a single column of text at a width that can be read.

   Scoped to the body class the theme adds for them, so no ordinary page built
   out of section blocks is touched. */
.dp-legal #container{
    background-color: var(--white);
}

/* ---- the band at the top ---- */
.dp-legal .legal-head{
    background-color: var(--blue-dark);
}

.dp-legal .legal-head__inner{
    /* Clear of the header, which is positioned over the top of the page. */
    padding-top: calc(var(--header-height) + clamp(28px, 6vh, 70px));
    padding-bottom: clamp(38px, 7vh, 80px);
}

.dp-legal .legal-head__title{
    margin: 18px 0 0;
    color: var(--white);
    font-size: clamp(1.75rem, 2.4vw + .9rem, 3rem);
    font-weight: 700;
    line-height: 1.15;
    text-wrap: balance;
}

/* The band already says which page this is, so the rule under the title is a
   short mark rather than a full underline. */
.dp-legal .legal-head__title::after{
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 22px;
    background-color: var(--yellow);
}

/* ---- the text ---- */
/* A measure, not a container: 900px is about 80 characters of the body size,
   which is as wide as a paragraph can go and still be read comfortably. */
.dp-legal .entry-content{
    max-width: 980px;
    margin: 0 auto;
    /* Its own side padding rather than --container-padding: that variable only
       narrows inside .container, which this is not, and 40px is a lot of a
       phone screen to give away. */
    padding: clamp(38px, 7vh, 76px) clamp(20px, 5vw, 20px) clamp(56px, 10vh, 116px);
}

/* Stackable hands every block the same 24px, which reads as one long grey wall.
   The spacing is set on the block wrappers rather than on the type inside them,
   because that is where Stackable puts its own. */
.dp-legal .entry-content .stk-block-heading{
    margin-top: clamp(32px, 5vh, 54px);
    margin-bottom: 10px;
}

.dp-legal .entry-content .stk-block-text{
    margin-bottom: 16px;
}

.dp-legal .entry-content .stk-inner-blocks > *:first-child{
    margin-top: 0;
}

/* The theme's h2 is white with the site's arc beside it - both meant for a dark
   band. The class is in the selector to outrank the theme's own h2::before. */
.dp-legal .entry-content h2,
.dp-legal .entry-content .stk-block-heading__text{
    color: var(--blue);
    font-size: clamp(1.2rem, 1.1vw + .8rem, 1.55rem);
    font-weight: 700;
    line-height: 1.3;
    text-wrap: pretty;
}

.dp-legal .entry-content h2::before,
.dp-legal .entry-content h2.stk-block-heading__text::before{
    content: none;
}

.dp-legal .entry-content h3,
.dp-legal .entry-content h3.stk-block-heading__text{
    font-size: clamp(1rem, .5vw + .85rem, 1.15rem);
    font-weight: 600;
}

.dp-legal .entry-content p,
.dp-legal .entry-content .stk-block-text__text{
    color: var(--text-grey);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.85;
    text-wrap: pretty;
    /* The client typed the address and the bullet lists as separate lines in
       the editor, without a <br> between them, and HTML collapses those into
       one paragraph. pre-line hands the line breaks back while still wrapping
       the long paragraphs normally. */
    white-space: pre-line;
}

.dp-legal .entry-content strong{
    color: var(--blue);
    font-weight: 600;
}

/* The reset takes the markers off every list on the site; a page of prose is
   the one place they are wanted back. */
.dp-legal .entry-content ul,
.dp-legal .entry-content ol{
    margin: 0 0 18px;
    padding-left: 22px;
    list-style: disc;
}

.dp-legal .entry-content ol{
    list-style: decimal;
}

.dp-legal .entry-content li{
    margin-bottom: 8px;
    color: var(--text-grey);
    font-size: 15px;
    line-height: 1.85;
}

.dp-legal .entry-content li::marker{
    color: var(--yellow);
}

/* Yellow on white is unreadable as text, so the accent goes under the link
   rather than into it. */
.dp-legal .entry-content a{
    color: var(--blue);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--yellow);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .25s ease;
    border-radius: 30px;
    font-size: 14px !important;
}

.dp-legal .entry-content .stk-link.stk-button{
    background-color: var(--yellow) !important;
}

.dp-legal .entry-content a span{
    color: var(--black) !important;
}

.dp-legal .entry-content a:hover{
    color: var(--black);
    text-decoration-thickness: 2px;
}

/* A wall of text that runs to the edge of a phone is hard to hold on to. */
.dp-legal .entry-content table{
    display: block;
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
}

.dp-legal .entry-content th,
.dp-legal .entry-content td{
    padding: 10px 14px;
    border: 1px solid var(--lite-grey);
    color: var(--text-grey);
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    vertical-align: top;
}

.dp-legal .entry-content th{
    color: var(--blue);
    font-weight: 600;
}

/* ------------------------------------------------- de knop rechtsonder ---
   A button that sits in the corner of every page and folds out into the two
   contact windows. It opens nothing itself: each row carries the CSS class of a
   detail window, and modal.js picks that up the same way it picks up a class on
   a block in the page. */
.dp-fab{
    position: fixed;
    z-index: 90;
    right: clamp(16px, 2vw, 28px);
    bottom: clamp(16px, 2vw, 28px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    /* Under the header's panel, and well under a dialog - which is in the top
       layer and out of reach of any z-index here anyway. */
    pointer-events: none;
}

.dp-fab > *{
    pointer-events: auto;
}

.dp-fab__actions{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
}

.dp-fab.is-open .dp-fab__actions{
    opacity: 1;
    transform: none;
}

/* ---- the two rows ---- */
.dp-fab__action{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.dp-fab__label{
    padding: 11px 20px;
    border-radius: 999px;
    background-color: var(--white);
    box-shadow: 0 6px 22px rgba(2, 10, 10, .18);
    color: var(--blue);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: color .25s ease;
}

.dp-fab__icon{
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--blue);
    box-shadow: 0 6px 22px rgba(2, 10, 10, .22);
    transition: background-color .25s ease, transform .25s ease;
}

.dp-fab__icon::before{
    content: "";
    width: 22px;
    height: 22px;
    background-color: var(--white);
    transition: background-color .25s ease;
}

/* The first of the two is the one the site wants asked. */
.dp-fab__icon--1{
    background-color: var(--yellow);
}

.dp-fab__icon--1::before{
    background-color: var(--black);
    -webkit-mask: var(--icon-help) center / contain no-repeat;
    mask: var(--icon-help) center / contain no-repeat;
}

.dp-fab__icon--2::before{
    -webkit-mask: var(--icon-wrench) center / contain no-repeat;
    mask: var(--icon-wrench) center / contain no-repeat;
}

.dp-fab__action:hover .dp-fab__icon{
    transform: scale(1.06);
}

.dp-fab__action:hover .dp-fab__label{
    color: var(--black);
}

/* ---- the button itself ---- */
.dp-fab__toggle{
    position: relative;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--yellow);
    box-shadow: 0 8px 26px rgba(2, 10, 10, .28);
    cursor: pointer;
    transition: transform .25s ease;
}

/* The wave. A ring that grows out of the button and fades, so the corner of the
   page says there is something there without anything moving into the reader's
   way. transform and opacity only: those run on the compositor, where a shadow
   or a width would have the browser repainting the corner twice a second for as
   long as the page is open. */
.dp-fab__toggle::after{
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--yellow);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: dp-fab-wave 2.6s ease-out infinite;
}

@keyframes dp-fab-wave{
    0%   { transform: scale(1);   opacity: .7; }
    70%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}

/* Once the pair is open, or once the pointer has found the button, the wave has
   done its job and is only noise. */
.dp-fab.is-open .dp-fab__toggle::after,
.dp-fab__toggle:hover::after,
.dp-fab__toggle:focus-visible::after{
    animation: none;
    opacity: 0;
}

.dp-fab__toggle::before{
    content: "";
    width: 24px;
    height: 24px;
    background-color: var(--black);
    -webkit-mask: var(--icon-chat) center / contain no-repeat;
    mask: var(--icon-chat) center / contain no-repeat;
    transition: transform .25s ease;
}

/* Open, the same button is the way to put it away again. */
.dp-fab.is-open .dp-fab__toggle::before{
    width: 20px;
    height: 20px;
    -webkit-mask: var(--icon-close) center / contain no-repeat;
    mask: var(--icon-close) center / contain no-repeat;
}

.dp-fab__toggle:hover{
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce){
    .dp-fab__actions,
    .dp-fab__icon,
    .dp-fab__toggle,
    .dp-fab__toggle::before{
        transition: none;
    }

    /* A ring that never stops is exactly what someone asking for less motion is
       asking to be spared. */
    .dp-fab__toggle::after{
        animation: none;
        opacity: 0;
    }
}

@media (max-width: 480px){
    /* The labels take most of a phone screen; the icons say enough once the
       pair is open, and the row stays reachable with one thumb. */
    .dp-fab__label{
        padding: 9px 15px;
        font-size: 13px;
    }

    .dp-fab__icon{
        width: 44px;
        height: 44px;
    }

    .dp-fab__toggle{
        width: 52px;
        height: 52px;
    }
}

/* ---------------------------------------------------- sfeer en cultuur ---
   The testimonial on the jobs page: a photo on the left, a quote with the
   colleague's portrait on the right. Both halves sit inside one slide of a
   Stackable carousel, so a second testimonial is simply a second slide.

   The markup carries three classes of its own - the columns block and its two
   halves. Everything above and around them (the section, the carousel, the
   plugin's arrow buttons) is reached with :has() instead of the generated
   stk-xxxxxxx classes, which change whenever a block is rebuilt.

   The measurements live on the section as variables because the arrows are
   printed by the plugin next to the slider, outside the slide, and still have
   to land inside the photo - they need the same numbers the columns use. */
.container-main:has(> .stk-row .jobs-sfeer-container){
    --sfeer-photo:   50%;                        /* the photo's share of the row */
    --sfeer-gutter:  13.4%;                      /* the wide gap before the quote */
    --sfeer-quote-w: 545px;                      /* the quote column, as designed */
    --sfeer-radius:  12px;
    --sfeer-photo-h: clamp(300px, 36vw, 680px);  /* 4:3 of half the container */
    --sfeer-arrow:   46px;
    --sfeer-arrow-x: clamp(14px, 2.1vw, 30px);   /* the arrows' inset in the photo */
    --sfeer-arrow-y: clamp(12px, 1.5vw, 22px);
    position: relative;
}

/* More air between the title row and the photo than the 30px the block
   prints for itself - with !important, so this needs it too. */
.container-main:has(> .stk-row .jobs-sfeer-container) > .stk-row{
    row-gap: clamp(30px, 3.3vw, 62px) !important;
}

/* The intro paragraph lines up with the quote column below it. It sits in the
   right half of a 50/50 title box that is itself the 60% column of the row,
   so its left edge is 38.2% into that box once the photo share and the gutter
   are worked back through the outer split. The editor writes the 50% inline,
   hence the !important. Below 1025px everything stacks and the box goes back
   to its own two halves. */
@media (min-width: 1025px){
    .container-main:has(> .stk-row .jobs-sfeer-container) .title-colum-box{
        gap: 0;
    }

    .container-main:has(> .stk-row .jobs-sfeer-container) .title-colum-box > .wp-block-column:first-child{
        flex-basis: 38.2% !important;
    }

    .container-main:has(> .stk-row .jobs-sfeer-container) .title-colum-box > .wp-block-column:last-child{
        flex-basis: 61.8% !important;
    }

    /* Two short lines, as in the design, rather than one long one. */
    .container-main:has(> .stk-row .jobs-sfeer-container) .title-colum-box p{
        max-width: 17em;
    }
}

/* The two halves. The editor writes flex-basis:60% / 40% inline, so the
   shares have to be forced - and the selectors carry the parent because the
   theme's own phone rule (.wp-block-columns:not(...) > .wp-block-column,
   flex-basis:auto !important) would otherwise outrank a lone class and hand
   the photo its upload width. The photo takes exactly its share; the quote
   column takes what is left after the gutter and stops at its designed width,
   which leaves the strip at the right free for the closing quote mark. */
.wp-block-columns.jobs-sfeer-container{
    gap: 0 var(--sfeer-gutter);
    align-items: stretch;
}

.wp-block-columns.jobs-sfeer-container > .wp-block-column.jobs-sfeer-container__left{
    flex: 0 0 var(--sfeer-photo) !important;
    min-width: 0;
    min-height: var(--sfeer-photo-h);
}

.wp-block-columns.jobs-sfeer-container > .wp-block-column.jobs-sfeer-container__right{
    display: flex;
    flex-direction: column;
    flex: 1 1 0% !important;
    min-width: 0;
    max-width: var(--sfeer-quote-w);
}

/* The photo fills its column top to bottom. Stackable already stretches the
   <img> to its wrapper with object-fit (and !important), so only the levels
   above the wrapper need a height, and the rounding goes on the wrapper,
   which clips. */
.jobs-sfeer-container__left .stk-block-image,
.jobs-sfeer-container__left .stk-block-image figure,
.jobs-sfeer-container__left .stk-block-image .stk-img-wrapper{
    height: 100%;
    margin: 0;
}

.jobs-sfeer-container__left .stk-block-image .stk-img-wrapper{
    border-radius: var(--sfeer-radius);
}

/* ---- the quote column, top to bottom ---- */

/* The opening quote mark. The block prints it at 32x32, which letterboxes a
   51x40 drawing; the design has it at its own proportions. */
.jobs-sfeer-container__right .stk-block-icon{
    flex: 0 0 auto;
    line-height: 0;
}

.jobs-sfeer-container__right .stk-block-icon svg.ugb-custom-icon{
    width: clamp(38px, 2.7vw, 52px);
    height: auto;
    aspect-ratio: 51 / 40;   /* the 32x32 attributes would make it square */
}

.jobs-sfeer-container__right .stk-block-text{
    flex: 0 0 auto;
    margin-top: clamp(22px, 1.7vw, 32px);
}

.jobs-sfeer-container__right .stk-block-text__text{
    margin: 0;
    color: var(--black);
    max-width: 50em;       /* the measure the design breaks its lines at */
    font-size: clamp(1.15rem, 1.05vw + 0.6rem, 1.9rem);
    font-weight: 700;
    line-height: 1.34;
    text-wrap: pretty;
}

/* The name, then the role in grey, closer together than to the quote. The
   two are sibling subtitle blocks, told apart by what precedes them. */
.jobs-sfeer-container__right .stk-block-subtitle{
    flex: 0 0 auto;
    margin-top: 8px;
}

.jobs-sfeer-container__right .stk-block-text + .stk-block-subtitle{
    margin-top: clamp(28px, 2.6vw, 50px);
}

.jobs-sfeer-container__right .stk-block-subtitle__text{
    margin: 0;
    color: var(--black);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.jobs-sfeer-container__right .stk-block-subtitle + .stk-block-subtitle .stk-block-subtitle__text{
    color: var(--text-grey);
    font-weight: 300;
}

/* The portrait takes whatever height is left, so its bottom edge always meets
   the bottom of the big photo, at any width. A basis of 0 keeps the picture's
   own height out of the sum that decides how tall the row is (a percentage
   would fall back to that height); the floor keeps it a picture when little
   is left over. */
.jobs-sfeer-container__right .stk-block-image{
    display: flex;
    flex: 1 1 0px;
    min-height: clamp(180px, 14vw, 271px);
    margin: clamp(32px, 3.7vw, 72px) 0 0;
}

/* The editor fixes the wrapper at the upload's 452px, with !important. */
.jobs-sfeer-container__right .stk-block-image figure,
.jobs-sfeer-container__right .stk-block-image .stk-img-wrapper{
    display: block;
    width: 100% !important;
    height: 100%;
    margin: 0;
}

.jobs-sfeer-container__right .stk-block-image figure{
    flex: 1 1 auto;
    min-height: 0;
}

.jobs-sfeer-container__right .stk-block-image .stk-img-wrapper{
    border-radius: var(--sfeer-radius);
}

/* ---- the arrows ---- */

/* The plugin spreads its two buttons to the far edges of the carousel; the
   design tucks them together in the photo's bottom-right corner. The carousel
   and the columns block are the same box (verified), so a percentage in
   `right` measures the same width the photo share does: the offset is the
   part of the row the photo does not cover, plus the inset into it. The
   plugin sizes the buttons from its own --button-* variables, so those are
   set rather than fought; the colours it locks with !important. */
.stk-block-carousel:has(.jobs-sfeer-container){
    --button-width:  var(--sfeer-arrow);
    --button-height: var(--sfeer-arrow);
    --button-gap:    10px;
}

.stk-block-carousel:has(.jobs-sfeer-container) .stk-block-carousel__buttons{
    inset: auto calc(100% - var(--sfeer-photo) + var(--sfeer-arrow-x)) var(--sfeer-arrow-y) auto;
    z-index: 3;      /* the plugin's 9999 would sit on top of the menu overlay */
    justify-content: flex-end;
}

.stk-block-carousel:has(.jobs-sfeer-container) .stk-block-carousel__button{
    background: hsl(0 0% 0% / .3) !important;
    opacity: 1 !important;
}

.stk-block-carousel:has(.jobs-sfeer-container) .stk-block-carousel__button__next{
    background: hsl(0 0% 0% / .62) !important;
}

.stk-block-carousel:has(.jobs-sfeer-container) .stk-block-carousel__button svg{
    width: auto;
    height: 15px;
    fill: var(--white);
    transition: fill .3s ease-in-out;
}

.stk-block-carousel:has(.jobs-sfeer-container) .stk-block-carousel__button__next svg{
    fill: var(--yellow);
}

@media (hover: hover){
    .stk-block-carousel:has(.jobs-sfeer-container) .stk-block-carousel__button:hover{
        background: var(--yellow) !important;
    }

    .stk-block-carousel:has(.jobs-sfeer-container) .stk-block-carousel__button:hover svg{
        fill: var(--black);
    }
}

/* No dots: the design has none, and the empty row still took 36px under the
   photo. */
.stk-block-carousel:has(.jobs-sfeer-container) .stk-block-carousel__dots{
    display: none;
}

/* The slider is focusable and a click on the photo would ring the whole row;
   keep the ring for the keyboard only. */
.stk-block-carousel:has(.jobs-sfeer-container) .stk-block-carousel__slider:focus:not(:focus-visible){
    outline: none;
}

/* ---- the closing quote mark ---- */

/* The same mark as the opening one, turned round and blown up, in the corner
   of the section under the empty strip beside the quote column. It hangs on
   the section rather than the columns block because the slider clips
   anything that leaves the slide. Stackable blanks ::after on its blocks,
   hence the !important on content. */
.container-main:has(> .stk-row .jobs-sfeer-container)::after{
    content: "" !important;
    position: absolute;
    right: var(--container-padding);
    bottom: 0;
    width: clamp(64px, 8vw, 153px);
    aspect-ratio: 51 / 40;
    background: var(--yellow);
    -webkit-mask: var(--icon-quote) center / contain no-repeat;
    mask: var(--icon-quote) center / contain no-repeat;
    rotate: 180deg;
    pointer-events: none;
}

/* ---- narrower screens ---- */

@media (max-width: 1024px){
    /* One under the other: the photo first, at 3:2, then the quote. Core
       pins columns to one line with !important from 782px up, so the wrap
       has to be forced until the editor's own stacking takes over below. */
    .container-main:has(> .stk-row .jobs-sfeer-container){
        --sfeer-photo-h: clamp(240px, 62vw, 620px);
    }

    .wp-block-columns.jobs-sfeer-container{
        flex-wrap: wrap !important;
        gap: clamp(28px, 5vw, 48px) 0;
    }

    .wp-block-columns.jobs-sfeer-container > .wp-block-column.jobs-sfeer-container__left,
    .wp-block-columns.jobs-sfeer-container > .wp-block-column.jobs-sfeer-container__right{
        flex: 0 0 100% !important;
        max-width: none;
    }

    /* The portrait no longer has a photo to line up with; give it its own
       proportions instead of a sliver of leftover height. */
    .jobs-sfeer-container__right .stk-block-image{
        flex: 0 0 auto;
        min-height: 0;
        aspect-ratio: 452 / 270;
        max-width: 560px;
        margin-top: clamp(26px, 4vw, 40px);
    }

    /* Anchored to the top now, since the carousel's bottom is under the
       quote: the photo's height minus the button and its inset. */
    .stk-block-carousel:has(.jobs-sfeer-container) .stk-block-carousel__buttons{
        inset: calc(var(--sfeer-photo-h) - var(--sfeer-arrow) - var(--sfeer-arrow-y)) var(--sfeer-arrow-x) auto auto;
    }
}

@media (max-width: 600px){
    .container-main:has(> .stk-row .jobs-sfeer-container){
        --sfeer-arrow: 40px;
    }

    .jobs-sfeer-container__right .stk-block-text__text{
        line-height: 1.4;
    }

    .jobs-sfeer-container__right .stk-block-image{
        max-width: none;
    }
}

/* ------------------------------------------------------------ vacatures ---
   The job cards on the jobs page: a Stackable columns block holding one
   column per vacancy, each with a row of pills, a title, a line of text and
   a "Bekijk vacature" link, and one last column that is the blue "Solliciteer
   spontaan" card. The classes are on the columns and the blocks inside
   them; the row that holds the cards is reached through :has(), the generated
   stk-xxxxxxx class of the row being no hook to build on.

   Every spacing rule carries the card class in front of the block class: the
   plugin sets its blocks' margins from .entry-content .stk-block (0,2,0), and
   some of its sheets load after this one, so a lone class lost. */
.stk-row:has(> .jobs-colum__item){
    --jobs-gap: 12px;
    flex-wrap: wrap;
    gap: var(--jobs-gap);
}

/* Four to a row. The plugin gives every column flex:1 1 0 and 12px of margin
   on its wrapper, which is what spread the eight cards over one line. The
   margin is the plugin's --stk-columns-spacing, read on the wrapper from its
   column, so it is zeroed there rather than outranked. */
.stk-row > .stk-block-column.jobs-colum__item,
.stk-row > .stk-block-column.jobs-colum__item-spontaan{
    --stk-columns-spacing: 0;
    flex: 0 0 calc(25% - var(--jobs-gap) * 3 / 4);
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 26px 30px 28px;
    border: 1px solid transparent;   /* turns yellow on hover, no shift */
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 1px 2px hsl(210deg 66% 12% / 4%);
    transition: border-color .25s ease;
}

.jobs-colum__item > .stk-column-wrapper,
.jobs-colum__item-spontaan > .stk-column-wrapper{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* The content column stretches to the card, so the link can sit at the
   bottom of every card in a row whatever the length of the text above it. */
.jobs-colum__item .stk-block-content,
.jobs-colum__item-spontaan .stk-block-content{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* ---- the pills ---- */

/* A core columns block with a single column of paragraphs - the editor's
   flow layout stacks them 24px apart. Laid out as a row of pills instead,
   the first of them yellow. */
.stk-block-column.jobs-colum__item .jobs-colum__item-label{
    margin: 0;
}

.jobs-colum__item-label > .wp-block-column{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 8px;
}

.jobs-colum__item-label p{
    margin: 0;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--grey-lite);
    color: var(--black);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.jobs-colum__item-label p:first-child{
    background: var(--yellow);
}

/* ---- title, dash, text ---- */

.stk-block-column.jobs-colum__item .jobs-colum__item-title{
    margin: 32px 0 0;
}

.jobs-colum__item-title .stk-block-heading__text{
    margin: 0;
    color: var(--blue);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    text-wrap: balance;
}

/* The short yellow stroke under the title. The plugin unsets ::after on its
   heading text; a plain declaration here outranks that. */
.jobs-colum__item-title .stk-block-heading__text::after{
    content: "";
    display: block;
    width: 12px;
    height: 2px;
    margin-top: 10px;
    background: var(--yellow);
}

.stk-block-column.jobs-colum__item .jobs-colum__item-text{
    margin: 10px 0 0;
}

.jobs-colum__item-text .stk-block-text__text{
    margin: 0;
    color: var(--text-grey);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    text-wrap: pretty;
}

/* ---- the link ---- */

/* A core button block, but drawn as an underlined link with the small grey
   arrow the site uses. Core's button look is set with zero-specificity
   :where() rules, so a class is enough to replace it. */
.stk-block-column.jobs-colum__item .jobs-colum__item-link{
    margin: auto 0 0;
    padding-top: 32px;
}

.jobs-colum__item-link .wp-block-button__link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--blue);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.jobs-colum__item-link .wp-block-button__link::after{
    content: "";
    flex: 0 0 auto;
    width: .75em;
    height: .75em;
    background-color: var(--grey);
    -webkit-mask: var(--icon-arrow-dr) center / contain no-repeat;
    mask: var(--icon-arrow-dr) center / contain no-repeat;
    transition: transform .25s ease, background-color .25s ease;
}

/* Hovering anywhere on the card: a yellow edge, and the arrow grows and
   turns blue - the whole card is the target, not just the link. */
@media (hover: hover){
    .stk-row > .stk-block-column.jobs-colum__item:hover{
        border-color: var(--yellow);
    }

    .jobs-colum__item:hover .jobs-colum__item-link .wp-block-button__link::after{
        background-color: var(--blue);
        transform: translate(2px, 2px) scale(1.35);
    }
}

/* ---- the blue card ---- */

/* Same shell, blue, with the photo behind the text: the image block is
   lifted out of the flow to cover the card and given a wash of the blue,
   heaviest on the left where the copy sits. The plugin positions its content
   box, which would have stopped the photo at the padding; both levels between
   the card and the image are made static so inset:0 measures the card. */
.stk-row > .stk-block-column.jobs-colum__item-spontaan{
    position: relative;
    overflow: hidden;
    background: var(--blue);
    color: var(--white);
}

.jobs-colum__item-spontaan > .stk-column-wrapper,
.jobs-colum__item-spontaan .stk-block-content{
    position: static;
}

.jobs-colum__item-spontaan .stk-block-content > *{
    position: relative;
    z-index: 1;
}

.jobs-colum__item-spontaan .stk-block-image{
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
}

.jobs-colum__item-spontaan .stk-block-image figure,
.jobs-colum__item-spontaan .stk-block-image .stk-img-wrapper{
    display: block;
    width: 100% !important;
    height: 100%;
    margin: 0;
}

.jobs-colum__item-spontaan .stk-block-image img{
    object-position: center;
}

/* The plugin already prints an empty ::after over every image wrapper; it
   only needs a colour. */
.jobs-colum__item-spontaan .stk-img-wrapper::after{
    background: linear-gradient(100deg, hsl(207deg 66% 17% / 80%) 0%, hsl(207deg 66% 17% / 58%) 45%, hsl(207deg 66% 17% / 38%) 100%);
    opacity: 1;
}

/* The thin yellow arc in the top corner: a quarter of an ellipse centred on
   the corner, the rest of it clipped by the card. It sits on the wrapper
   because the plugin blanks ::before on its own blocks. */
.jobs-colum__item-spontaan > .stk-column-wrapper::before{
    content: "";
    position: absolute;
    z-index: 1;
    top: -92px;
    right: -66px;
    width: 132px;
    height: 184px;
    border: 1px solid var(--yellow);
    border-radius: 50%;
    pointer-events: none;
}

/* Both kept short of the photo on the right, as the design has them. The
   heading block drops the plugin's 24px bottom margin so the gap is ours. */
.stk-block-column.jobs-colum__item-spontaan .stk-block-heading{
    margin: 0;
}

.jobs-colum__item-spontaan .stk-block-heading__text{
    max-width: 230px;
    margin: 0;
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    text-wrap: balance;
}

.stk-block-column.jobs-colum__item-spontaan .stk-block-text{
    margin: 20px 0 0;
}

.jobs-colum__item-spontaan .stk-block-text__text{
    max-width: 300px;
    margin: 0;
    color: var(--white);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    text-wrap: pretty;
}

/* The yellow button, as .btn.yellow-btn draws it elsewhere, a little lower
   as the design has it; the block carries no class of its own here. */
.stk-block-column.jobs-colum__item-spontaan .wp-block-buttons{
    margin: auto 0 0;
    padding-top: 28px;
}

.jobs-colum__item-spontaan .wp-block-button__link{
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 32px;
    background: var(--yellow);
    color: var(--black);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    text-decoration: none;
    transition: .25s ease;
}

.jobs-colum__item-spontaan .wp-block-button__link::after{
    content: "";
    flex: 0 0 auto;
    width: 1.25em;
    height: 1.25em;
    background-color: currentColor;
    -webkit-mask: var(--icon-arrow-dr) center / contain no-repeat;
    mask: var(--icon-arrow-dr) center / contain no-repeat;
    transition: transform .25s ease;
}

.jobs-colum__item-spontaan .wp-block-button__link:hover{
    border-color: var(--yellow);
    padding: 9px 14px 9px 18px;
    filter: brightness(1.1);
}

.jobs-colum__item-spontaan .wp-block-button__link:hover::after{
    transform: translate(2px, 2px);
}

/* ---- narrower screens ---- */

@media (max-width: 1200px){
    .stk-row > .stk-block-column.jobs-colum__item,
    .stk-row > .stk-block-column.jobs-colum__item-spontaan{
        flex-basis: calc(50% - var(--jobs-gap) / 2);
        padding: 24px 26px 26px;
    }
}

@media (max-width: 640px){
    .stk-row > .stk-block-column.jobs-colum__item,
    .stk-row > .stk-block-column.jobs-colum__item-spontaan{
        flex-basis: 100%;
        padding: 22px 22px 24px;
    }

    .stk-block-column.jobs-colum__item .jobs-colum__item-title{
        margin-top: 24px;
    }

    .stk-block-column.jobs-colum__item .jobs-colum__item-link,
    .stk-block-column.jobs-colum__item-spontaan .wp-block-buttons{
        padding-top: 22px;
    }
}

/* ------------------------------------------------- waarom (vacatures) ---
   "Vier redenen waarom collega's blijven" on the jobs page: four photo cards
   in a row, each a core column holding an image block, a heading and a
   paragraph. At rest the photo fills the card and the heading sits over its
   foot; on hover the photo draws up to make room, the paragraph unfolds
   under the heading, and the card's own colour shows below the photo -
   blue and grey by turns, as the design has them.

   The photo is a flex item that takes whatever height the text leaves, so
   there is no number for "how far up" - it follows the paragraph, however
   many lines it runs to. At rest it is pulled down over the heading by a
   negative margin the size of the resting foot, which is what a photo that
   covers the card looks like; the hover lets the margin go and the photo
   slides up as the paragraph opens.

   Like the job cards, every rule carries the column class: the plugin's own
   .entry-content .stk-block margins would otherwise win. */
.wp-block-columns:has(> .waarom-box-colum__item){
    gap: 12px;
}

.wp-block-columns > .wp-block-column.waarom-box-colum__item{
    --waarom-pad:   clamp(22px, 1.6vw, 30px);   /* side inset of the text */
    --waarom-top:   clamp(24px, 1.7vw, 32px);   /* photo -> heading, hovered */
    --waarom-foot:  clamp(26px, 1.9vw, 36px);   /* under the last line */
    --waarom-title: clamp(17px, 1.05vw, 20px);
    /* the resting foot: top gap + one heading line + bottom gap */
    --waarom-rest:  calc(var(--waarom-top) + var(--waarom-title) * 1.2 + var(--waarom-foot));
    --waarom-bg:    #1B3A61;                     /* the design's card blue */
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    aspect-ratio: 4 / 5;
    min-width: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--waarom-bg);
    color: var(--white);
}

.wp-block-columns > .wp-block-column.waarom-box-colum__item:nth-child(even){
    --waarom-bg: #7A7A7A;                        /* and its grey */
}

/* ---- the photo ---- */

.wp-block-column.waarom-box-colum__item .stk-block-image{
    flex: 1 1 0px;
    min-height: 0;
    margin: 0 0 calc(-1 * var(--waarom-rest));
    transition: margin-bottom .5s ease;
}

.wp-block-column.waarom-box-colum__item .stk-block-image figure,
.wp-block-column.waarom-box-colum__item .stk-block-image .stk-img-wrapper{
    display: block;
    width: 100% !important;
    height: 100%;
    margin: 0;
}

.wp-block-column.waarom-box-colum__item .stk-block-image .stk-img-wrapper{
    border-radius: 12px;
    transition: all .6s !important;
}

.wp-block-column.waarom-box-colum__item:hover .stk-block-image .stk-img-wrapper{
    border-radius: 8px;
    scale: 0.97;
    transition: all .6s !important;
}


/* A shade over the foot of the photo so the heading reads on it at rest; the
   plugin prints the empty ::after, it only needs the gradient. Gone on
   hover, when the heading has the card's colour under it instead. */
.wp-block-column.waarom-box-colum__item .stk-img-wrapper::after{
    background: linear-gradient(to top, hsl(180deg 67% 2% / 65%) 0%, hsl(180deg 67% 2% / 0%) 45%);
    opacity: 1;
    transition: opacity .4s ease;
}

/* ---- the corner arc ---- */

/* A quarter of an ellipse round the top-left corner, as on the other photo
   cards; drawn with borders so the stroke stays a hairline. */
.wp-block-column.waarom-box-colum__item::before{
    content: "";
    position: absolute;
    z-index: 3;
    top: -1px;
    left: -1px;
    width: 60px;
    height: 120px;
    border-right: 1px solid var(--yellow);
    border-bottom: 1px solid var(--yellow);
    border-bottom-right-radius: 170% 100%;
    pointer-events: none;
}

/* ---- heading and text ---- */

.wp-block-column.waarom-box-colum__item .stk-block-heading{
    position: relative;
    z-index: 2;
    margin: var(--waarom-top) var(--waarom-pad) var(--waarom-foot);
    transition: margin-bottom .5s ease;
}

.wp-block-column.waarom-box-colum__item .stk-block-heading__text{
    position: relative;
    margin: 0;
    padding-left: 18px;
    color: var(--white);
    font-size: var(--waarom-title);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.wp-block-column.waarom-box-colum__item .stk-block-heading__text::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 1.2em;
    background: var(--yellow);
    -webkit-mask: var(--icon-label-mark) center / contain no-repeat;
    mask: var(--icon-label-mark) center / contain no-repeat;
}

/* Folded away at rest. max-height rather than height so the paragraph can
   be any length; the cap only has to clear the longest one. */
.wp-block-column.waarom-box-colum__item > p{
    position: relative;
    z-index: 2;
    max-height: 0;
    margin: 0 var(--waarom-pad);
    overflow: hidden;
    opacity: 0;
    color: var(--white);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    text-wrap: pretty;
    transition: max-height .5s ease, margin .5s ease, opacity .3s ease;
}

/* ---- the hover ---- */

/* Shared with touch screens, where there is no hover and the paragraph
   would otherwise never be reachable: there the cards simply stand open. */
.wp-block-column.waarom-box-colum__item:hover .stk-block-image,
.wp-block-column.waarom-box-colum__item:focus-within .stk-block-image{
    margin-bottom: 0;
}

.wp-block-column.waarom-box-colum__item:hover .stk-img-wrapper::after,
.wp-block-column.waarom-box-colum__item:focus-within .stk-img-wrapper::after{
    opacity: 0;
}

.wp-block-column.waarom-box-colum__item:hover .stk-block-heading,
.wp-block-column.waarom-box-colum__item:focus-within .stk-block-heading{
    margin-bottom: 12px;
}

.wp-block-column.waarom-box-colum__item:hover > p,
.wp-block-column.waarom-box-colum__item:focus-within > p{
    max-height: 9em;
    margin-bottom: var(--waarom-foot);
    opacity: 1;
    transition: max-height .5s ease, margin .5s ease, opacity .4s ease .15s;
}

@media (hover: none){
    .wp-block-column.waarom-box-colum__item .stk-block-image{
        margin-bottom: 0;
    }

    .wp-block-column.waarom-box-colum__item .stk-img-wrapper::after{
        opacity: 0;
    }

    .wp-block-column.waarom-box-colum__item .stk-block-heading{
        margin-bottom: 12px;
    }

    .wp-block-column.waarom-box-colum__item > p{
        max-height: none;
        margin-bottom: var(--waarom-foot);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce){
    .wp-block-column.waarom-box-colum__item .stk-block-image,
    .wp-block-column.waarom-box-colum__item .stk-img-wrapper::after,
    .wp-block-column.waarom-box-colum__item .stk-block-heading,
    .wp-block-column.waarom-box-colum__item > p{
        transition: none;
    }
}

/* ---- narrower screens ---- */

/* Two to a row, then one. Core pins the columns to one line with !important
   from 782px up, and the theme's phone rule hands them flex-basis:auto, so
   both are forced here. */
@media (max-width: 1024px){
    .wp-block-columns:has(> .waarom-box-colum__item){
        flex-wrap: wrap !important;
    }

    .wp-block-columns > .wp-block-column.waarom-box-colum__item{
        flex: 0 0 calc(50% - 6px) !important;
    }
}

@media (max-width: 600px){
    .wp-block-columns > .wp-block-column.waarom-box-colum__item{
        flex-basis: 100% !important;
        aspect-ratio: 5 / 6;
    }
}