.primary-button {
    font-family: "Klavika", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    fill: var(---magenta-color);
    color: var(--magenta-color);
    border-radius: 0px 0px 0px 0px;
    position: relative;
    padding-right: 24px;
}

.primary-button::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    transition: transform 0.5s ease;
    background-image: url('https://hogenhouck.nl/wp-content/plugins/custom-elementor-widgets/assets/icons/button-arrow-right.svg');
    /* Updated path */
    background-size: cover;
}

.primary-button:hover {
    color: var(--magenta-color);
}

.primary-button:hover::after {
    transform: translateY(-50%) translateX(5px);
}

#load-more-transactions {
    background-color: var(--e-global-color-715d6e0);
    font-family: "Klavika", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    border-style: none;
    border-radius: 4px 4px 4px 4px;
    display: block;
    margin: 0 auto;
}

#load-more-transactions:hover {
    background-color: #BD83B1;
}
    
/* =========================================================================
   Hero (Vimeo) widget
   Poster is the LCP element and is always visible; the Vimeo background
   iframe is lazy-loaded via hero.js and faded in on top once ready.
   ========================================================================= */

.hero {
    position: relative;
    display: flex;
    align-items: flex-end; /* content block sits at the bottom */
    width: 100%;

    /* svh = smallest viewport height: measured with the mobile browser chrome
       visible, so the hero never overshoots the fold or jumps when the address
       bar hides. The vh line above it is the fallback for older browsers.
       These are defaults only — the Elementor height controls (hero.php) win. */
    min-height: 90vh;
    min-height: 90svh;
    max-height: 95vh;
    max-height: 95svh;

    overflow: hidden;
    isolation: isolate;
    color: #fff;
}

/* --- Media layer -------------------------------------------------------- */
.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--primary-color, #1C2945); /* avoids flash before poster paints */
}

.hero .hero__poster {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100% !important; /* beat Elementor's global img { height: auto } */
    object-fit: cover;
    display: block;
}

/* Vimeo background iframe, scaled to fully cover the container (16:9). */
.hero__video {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.hero--video-ready .hero__video {
    opacity: 1;
}

.hero__video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;        /* 16:9 based on width  */
    min-height: 100%;
    min-width: 177.78vh;    /* 16:9 based on height */
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

/* Vertical overlay for legible text over any frame of the video:
   dark at the bottom, fading to transparent towards the top.
   Works identically in every browser (normal blending). */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2; /* above poster (0) and video (1), below content */
    opacity: 1;
    pointer-events: none;
    background: linear-gradient(
        to top right,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0) 100%
    );
}

/* Entrance: a solid dark veil (opacity 0.9) fades out on load,
   revealing the gradient overlay above. */
.hero__overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.9;
    pointer-events: none;
    animation: hero-overlay-reveal 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes hero-overlay-reveal {
    from {
        opacity: 0.9;
    }
    to {
        opacity: 0;
    }
}

/* Decorative magenta shape, bottom-left, on top of the image/overlay.
   Slides in from the right into place on load. */
.hero__shape {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3; /* above overlay (2), below content (4) */
    width: min(970px, 70%);
    height: auto;
    display: block;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    animation: hero-shape-in 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

@keyframes hero-shape-in {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__shape {
        opacity: 1;
        animation: none;
        transform: none;
    }
}

/* --- Content ------------------------------------------------------------ */
.hero__inner {
    position: relative;
    z-index: 4; /* keep title, text and buttons above the shape */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    /* Fluid vertical padding: keeps the designed 80/160px on tall screens and
       shrinks on short ones, so the content stays inside max-height instead of
       being clipped by it (a cap can only cut, never shrink). */
    padding: 80px 0 10rem;
    padding: clamp(2.5rem, 8svh, 5rem) 0 clamp(3rem, 17svh, 10rem);
    box-sizing: border-box;
}

.hero__content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* Only the text block is width-limited; the buttons below it stay on one row. */
.hero__text-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 580px;
}

/* Kicker above the title. The 1.5rem gap comes from .hero__text-group. */
.hero .hero__pretitle {
    margin: 0;
    color: var(--S---Light-grey-4, #F7F8F8);
    leading-trim: both;
    text-edge: cap;
    font-family: var(--primary-font, "Klavika Basic", "Klavika", sans-serif);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 1.5rem */
}

.hero__title,
.hero .hero__title span,
.hero .hero__title em,
.hero .hero__title i,
.hero .hero__title strong,
.hero .hero__title b {
    color: #fff !important; /* override theme/Elementor heading colour */
}

.hero__title {
    margin: 0;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-weight: 300; /* Klavika Light */
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    line-height: 1.05;
}

/* Accent words: serif font, but kept inline (the theme forces h_ span to
   display:block with a left margin — undo that here so it stays on one line). */
.hero .hero__title span,
.hero .hero__title em,
.hero .hero__title i {
    display: inline;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

.hero__text {
    margin: 0;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

/* --- Buttons ------------------------------------------------------------ */
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 28px;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 2px;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

/* Shared layout for both buttons. */
.hero__button--primary,
.hero__button--secondary {
    display: flex;
    padding: 1rem 6rem 1rem 1.5rem;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    border-radius: 0.25rem;
}

/* Overal ook :visited meenemen. Een pop-upbutton linkt naar een fragment
   (#elementor-action:…), dus zodra hij één keer geopend is telt de browser hem
   als bezocht — en dan wint het a:visited van het thema (0,1,1) van een losse
   class (0,1,0) en wordt de tekst donker. */
.hero__button--primary,
.hero__button--primary:visited {
    border: 1px solid #C142A2;
    background: linear-gradient(61deg, #A52A87 13.96%, #C14DA5 86.04%);
    color: #fff;
}

.hero__button--primary:hover,
.hero__button--primary:focus-visible {
    filter: brightness(0.92);
    color: #fff;
}

.hero__button--secondary,
.hero__button--secondary:visited {
    border: 1px solid var(--S---Mid-purple-4, #E1DBE1);
    background: var(--S---Mid-purple-4, #E1DBE1);
    color: var(--primary-color, #1C2945);
}

.hero__button--secondary:hover,
.hero__button--secondary:focus-visible {
    filter: brightness(0.96);
    color: var(--primary-color, #1C2945);
}

/* Visible keyboard focus for a11y (works on the dark background). */
.hero__button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* --- Content entrance: fade in + up ------------------------------------- */
@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(3rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__pretitle {
    opacity: 0;
    animation: hero-fade-up 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

.hero__title {
    opacity: 0;
    animation: hero-fade-up 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.hero__text {
    opacity: 0;
    animation: hero-fade-up 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

.hero__actions {
    opacity: 0;
    animation: hero-fade-up 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

/* --- Responsive --------------------------------------------------------- */

/* Short landscape viewports (laptops around 700px tall): the content needs
   ~750px at full padding, which is exactly where max-height would start
   clipping. Tighten the rhythm so it fits on its own. */
@media (min-width: 768px) and (max-height: 820px) {
    .hero__inner {
        padding-bottom: clamp(2.5rem, 11svh, 6rem);
    }
    .hero__content {
        gap: 1.75rem;
    }
    .hero__text-group {
        gap: 1.125rem;
    }
}

@media (max-width: 767px) {
    .hero {
        /* Fallback for the mobile default of the Elementor control (80svh).
           lvh = full screen height: the content needs more room than 95svh on a
           phone, so cap at the screen instead of cutting off the buttons. */
        min-height: 80vh;
        min-height: 80svh;
        max-height: 100vh;
        max-height: 100lvh;
    }
    .hero__inner {
        padding: 56px 20px;
        padding: clamp(2rem, 5svh, 3.5rem) 20px clamp(2rem, 5svh, 3.5rem);
    }
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .hero__button {
        width: 100%;
    }
    /* Reset the desktop 6rem right padding so full-width buttons stay balanced. */
    .hero__button--primary,
    .hero__button--secondary {
        justify-content: center;
        padding: 1rem 1.5rem;
    }
}

/* Small phones (iPhone SE/8 class): title, body copy and two stacked buttons
   need ~650px on their own, so trim the gaps to stay inside the 100lvh cap. */
@media (max-width: 767px) and (max-height: 740px) {
    .hero__content {
        gap: 1.75rem;
    }
    .hero__text-group {
        gap: 1.125rem;
    }
    .hero__actions {
        gap: 1rem;
    }
}

/* --- Reduced motion: keep the poster, never fade in autoplay video ------ */
@media (prefers-reduced-motion: reduce) {
    .hero__video {
        display: none;
    }
    .hero__button {
        transition: none;
    }
    .hero__pretitle,
    .hero__title,
    .hero__text,
    .hero__actions {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .hero__overlay::after {
        animation: none;
        opacity: 0;
    }
}

.content-tabs {
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

/* ---------- Navigation (left) ---------- */
.content-tabs__nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 40%;
    flex-shrink: 0;
}

.content-tabs__trigger {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 1rem;
    background-color: #E5EBEA0D;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.content-tabs__trigger:hover {
    border-color: var(--magenta-color);
}

.content-tabs__trigger.is-active {
    background-color: var(--magenta-color);
    border-color: var(--magenta-color);
    transform: translateX(24px);
}

.content-tabs__chip {
    display: inline-block;
    width: 29px;
    height: 18px;
    background-color: var(--magenta-color);
    -webkit-mask: url('https://hogenhouck.nl/wp-content/plugins/custom-elementor-widgets/assets/icons/tab-arrow.svg') no-repeat center / contain;
    mask: url('https://hogenhouck.nl/wp-content/plugins/custom-elementor-widgets/assets/icons/tab-arrow.svg') no-repeat center / contain;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.content-tabs__trigger.is-active .content-tabs__chip {
    background-color: #ffffff;
}

.content-tabs__label {
    font-family: 'Klavika', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: 0;
    color: inherit;
}

/* ---------- Content (right) ---------- */
.content-tabs__content {
    flex: 1 1 auto;
    min-width: 0;
}

.content-tabs__panel.is-active {
    display: block;
    animation: content-tabs-fade 0.35s ease;
}

.content-tabs__title {
    font-size: 40px;
    line-height: 120%;
    font-weight: 400;
    color: #ffffff;
    margin: 0 0 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.content-tabs__body {
    font-size: 18px;
    line-height: 160%;
    color: #ffffff;
}

.content-tabs__body ul,
.content-tabs__body ol {
    padding-left: 20px;
    margin: 0 0 16px;
}

.content-tabs__body li {
    margin-bottom: 8px;
}

.content-tabs__body p:last-child {
    margin-bottom: 0;
}

@keyframes content-tabs-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .content-tabs {
        flex-direction: column;
        gap: 32px;
    }

    .content-tabs__nav,
    .content-tabs__content {
        width: 100%;
    }

    .content-tabs__title {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .content-tabs__body {
        font-size: 16px;
    }
}

/* =========================================================================
   Pop-up: Discovery call
   Desktop: twee kolommen (940 x 596) — wit tekstpaneel links, formulier rechts.
   <=1024px: één kolom, opsomming vervalt (zo staat het in het ontwerp).
   ========================================================================= */

.hh-popup {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    font-family: var(--primary-font, "Klavika", sans-serif);
    color: var(--primary-color, #1C2945);
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* Wint van de display:flex hierboven dankzij de hogere specificiteit. */
.hh-popup[hidden] {
    display: none;
}

.hh-popup.is-open {
    opacity: 1;
}

.hh-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 41, 69, 0.8);
}

.hh-popup__dialog {
    position: relative;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    width: 940px;
    max-width: 100%;
    max-height: calc(100vh - 4rem);
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 24px 64px rgba(9, 18, 43, 0.28);
    overflow: hidden;
    transform: translateY(12px);
    transition: transform 0.25s ease;
}

.hh-popup.is-open .hh-popup__dialog {
    transform: translateY(0);
}

/* ------------------------------------------------------------- sluiten -- */
.hh-popup .hh-popup__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: #6E7385;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* Alleen het icoon verkleurt — nooit een vlak achter de knop. Alle statussen
   staan er expliciet bij, want een kale <button> pakt zijn achtergrond anders
   terug van de browser-default of een globale knopstijl. */
.hh-popup .hh-popup__close,
.hh-popup .hh-popup__close:hover,
.hh-popup .hh-popup__close:focus,
.hh-popup .hh-popup__close:focus-visible,
.hh-popup .hh-popup__close:active {
    border: none;
    background: none;
    box-shadow: none;
}

.hh-popup .hh-popup__close svg {
    width: 14px;
    height: 14px;
}

.hh-popup .hh-popup__close:hover {
    color: var(--primary-color, #1C2945);
}

.hh-popup .hh-popup__close:focus-visible {
    outline: 2px solid var(--magenta-color, #A52A87);
    outline-offset: 2px;
}

/* -------------------------------------------------------- linkerkolom -- */
/* min-height:0 — een grid-item krimpt anders niet onder zijn inhoud, waardoor
   de max-height van de dialoog wordt genegeerd en overflow niet werkt. */
.hh-popup__aside {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #fff;
}

.hh-popup__aside-body {
    padding: 40px 40px 32px;
}

.hh-popup__title {
    margin: 0;
    font-size: 2.75rem;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--primary-color, #1C2945);
}

/* S-1. De marge rechts houdt de regel smal, zoals in het ontwerp. */
.hh-popup__subtitle {
    margin: 16px 4rem 0 0;
    font-family: var(--primary-font, "Klavika Basic", "Klavika", sans-serif);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    color: var(--S---Mid-grey-1, #808E96);
}

.hh-popup__divider {
    margin: 28px 0 24px;
    border: 0;
    border-top: 1px solid var(--mid-purple-color, #E1DBE1);
}

.hh-popup__usps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hh-popup__usps li {
    position: relative;
    padding-left: 18px;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    color: #808E96;
}

.hh-popup__usps li + li {
    margin-top: 14px;
}

.hh-popup__usps li::before {
    content: "";
    position: absolute;
    top: 0.65em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #C4C7D0;
}

/* Duwt het beeld naar de onderkant van de kolom, zoals in het ontwerp.
   flex:none is essentieel — als flex-item zou het beeld anders meekrimpen
   zodra de tekst erboven de kolom bijna vult, en dus (vrijwel) verdwijnen. */
.hh-popup__image {
    display: block;
    flex: none;
    width: 100%;
    /* Verhouding in plaats van een vaste hoogte: het beeld schaalt mee met de
       kolombreedte, zodat de uitsnede op mobiel even ruim is als op desktop.
       Met een vaste hoogte sneed mobiel bijna twee keer zo hard bij. */
    aspect-ratio: 2 / 1;
    height: auto;
    margin-top: auto;
    object-fit: cover;
    /* Bovenkant van het beeld blijft altijd zichtbaar; bijsnijden gebeurt
       uitsluitend aan de onderkant. */
    object-position: center top;
}

/* ------------------------------------------------------- rechterkolom -- */
.hh-popup__main {
    min-width: 0;
    min-height: 0;
    padding: 40px;
    background: var(--light-grey-color, #F7F8F8);
    overflow-y: auto;
}

.hh-popup__form-title {
    margin: 0 0 24px;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    color: #1C2945;
}

.hh-popup__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.hh-popup__field {
    margin-bottom: 16px;
}

.hh-popup__row .hh-popup__field {
    margin-bottom: 0;
}

.hh-popup__row + .hh-popup__field,
.hh-popup__row + .hh-popup__row {
    margin-top: 16px;
}

.hh-popup__field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--primary-color, #1C2945);
}

.hh-popup__optional {
    color: #8C90A0;
}

/* Aan .hh-popup gehangen zodat deze regels van de globale formulierstijlen
   uit de Elementor-kit winnen, die later worden ingeladen. */
.hh-popup .hh-popup__field input,
.hh-popup .hh-popup__field select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #D9DEE5;
    border-radius: 0.375rem;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.2;
    color: var(--primary-color, #1C2945);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hh-popup .hh-popup__field input::placeholder {
    color: #9BA0AE;
    opacity: 1;
}

.hh-popup .hh-popup__field input:focus,
.hh-popup .hh-popup__field select:focus {
    outline: none;
    border-color: var(--magenta-color, #A52A87);
    box-shadow: 0 0 0 3px rgba(165, 42, 135, 0.12);
}

/* Ongeldig pas markeren nadat er één keer is verzonden. */
.hh-popup .hh-popup__form.is-validated input:invalid,
.hh-popup .hh-popup__form.is-validated select:invalid {
    border-color: #B3261E;
}

/* Eigen chevron; de native select houdt de mobiele UX en toegankelijkheid. */
.hh-popup__select {
    position: relative;
}

.hh-popup__select select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    cursor: pointer;
}

/* Zolang "Maak een keuze" geselecteerd is, leest het als een placeholder.
   Het veld is niet verplicht, dus :invalid kan hier niet gebruikt worden. */
.hh-popup__select select:has(option[value=""]:checked) {
    color: #9BA0AE;
}

.hh-popup__select-chevron {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--primary-color, #1C2945);
}

/* ---------------------------------------------------------- akkoord ---- */
.hh-popup__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 20px;
}

.hh-popup__consent input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--magenta-color, #A52A87);
    cursor: pointer;
}

.hh-popup__consent label {
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

.hh-popup__consent a {
    color: var(--magenta-color, #A52A87);
    text-decoration: underline;
}

.hh-popup__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.hh-popup__error {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #B3261E;
}

/* ----------------------------------------------------------- knop ------ */
.hh-popup__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    padding: 0 1.5rem;
    border: 1px solid #C142A2;
    border-radius: 2px;
    background: linear-gradient(61deg, #A52A87 13.96%, #C14DA5 86.04%);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    transition: filter 0.25s ease;
}

.hh-popup__submit:hover,
.hh-popup__submit:focus-visible {
    filter: brightness(0.92);
}

.hh-popup__submit:focus-visible {
    outline: 2px solid var(--primary-color, #1C2945);
    outline-offset: 2px;
}

.hh-popup__submit[disabled] {
    cursor: progress;
    filter: saturate(0.6) brightness(1.05);
}

.hh-popup__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hh-popup-spin 0.7s linear infinite;
}

.hh-popup__form.is-sending .hh-popup__spinner {
    display: block;
}

@keyframes hh-popup-spin {
    to {
        transform: rotate(360deg);
    }
}

.hh-popup__reassurance {
    margin: 14px 0 0;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 170%;
    text-align: center;
    color: #808E96;
}

/* -------------------------------------------------------- bedankt ------ */
/* Na verzenden blijft alleen het bedanktscherm over, verticaal gecentreerd:
   de kolomhoogte wordt bepaald door de linkerkolom, dus zonder centrering
   hangt de tekst bovenin met een leeg vlak eronder. */
.hh-popup__main.is-submitted {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hh-popup__main.is-submitted .hh-popup__form-title {
    display: none;
}

.hh-popup__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 0;
    text-align: center;
}

/* Zonder deze regel wint de display:flex hierboven van het hidden-attribuut
   (een auteursregel gaat altijd voor op de UA-stijl van [hidden]). */
.hh-popup__success[hidden] {
    display: none;
}

.hh-popup__success:focus {
    outline: none;
}

.hh-popup__success-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    color: var(--magenta-color, #A52A87);
}

.hh-popup__success h3 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
}

.hh-popup__success p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #4A506A;
}

/* ====================================================== mobiele variant = */
@media (max-width: 1024px) {
    .hh-popup {
        padding: 1rem;
    }

    .hh-popup__dialog {
        grid-template-columns: minmax(0, 1fr);
        width: min(100%, 420px);
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    .hh-popup__aside-body {
        padding: 28px 24px 22px;
    }

    .hh-popup__title {
        font-size: 2rem;
    }

    /* Geen marge rechts: op mobiel past de ondertitel op één regel. */
    .hh-popup__subtitle {
        margin: 12px 0 0;
        font-size: 1rem;
    }

    /* Het ontwerp laat de opsomming op mobiel weg. */
    .hh-popup__divider,
    .hh-popup__usps {
        display: none;
    }

    /* Verhouding komt uit de basisregel; alleen het naar onderen duwen vervalt. */
    .hh-popup__image {
        margin-top: 0;
    }

    .hh-popup__main {
        padding: 24px;
        overflow-y: visible;
    }

    .hh-popup__form-title {
        margin-bottom: 20px;
        font-size: 1.125rem;
    }

    /* Alle velden onder elkaar; de gap van 16px regelt de tussenruimte al. */
    .hh-popup__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-popup .hh-popup__close {
        top: 12px;
        right: 12px;
    }
}

/* Op korte schermen mag de dialoog de volle hoogte gebruiken. */
@media (max-width: 1024px) and (max-height: 740px) {
    .hh-popup {
        align-items: flex-start;
        padding: 0.5rem;
    }

    .hh-popup__dialog {
        max-height: calc(100vh - 1rem);
    }
}

/* ================================================== Elementor-editor === */
/* De pop-up staat verborgen, dus in de editor zou de widget een leeg blok
   zijn. Daar tonen we de dialoog inline zodat je hem kunt vullen en zien. */
body.elementor-editor-active .hh-popup[hidden] {
    display: flex;
    position: relative;
    padding: 0;
    opacity: 1;
}

body.elementor-editor-active .hh-popup__backdrop {
    display: none;
}

body.elementor-editor-active .hh-popup__dialog {
    max-height: none;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .hh-popup,
    .hh-popup__dialog,
    .hh-popup__submit {
        transition: none;
    }

    .hh-popup__spinner {
        animation-duration: 2s;
    }
}

/* General Styling for the Widget */
.elementor-widget-entrepreneur_stories_archive .entrepreneur-stories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Two columns */
    gap: 20px;
    /* Space between grid items */
    margin-bottom: 40px;
    /* Add spacing before pagination */
}

.elementor-widget-entrepreneur_stories_archive .entrepreneur-story {
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.elementor-widget-entrepreneur_stories_archive .entrepreneur-story .image-wrapper {
    height: 300px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-radius: 6px;
}

.elementor-widget-entrepreneur_stories_archive .entrepreneur-story .play-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.elementor-widget-entrepreneur_stories_archive .entrepreneur-story .play-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;

}

.elementor-widget-entrepreneur_stories_archive .entrepreneur-story .flex-wrapper {
    gap: 16px;
    align-items: end;
    justify-content: space-between;
    display: flex;
    height: 100%;
    padding: 16px;
}

.elementor-widget-entrepreneur_stories_archive .entrepreneur-story .meta {
    display: flex;
    gap: 38px;
    flex-wrap: wrap;
    align-items: center;
}

.elementor-widget-entrepreneur_stories_archive .entrepreneur-story .post-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 38px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.elementor-widget-entrepreneur_stories_archive .entrepreneur-story .post-categories li {
    color: var(--light-grey-color);
    display: block;
    font-family: "Klavika", Sans-serif;
    font-size: 18px;
    line-height: 120%;
    font-weight: 400;
    position: relative;
}

/* Koop and Verkoop category icons */
.elementor-widget-entrepreneur_stories_archive .category-koop::before,
.elementor-widget-entrepreneur_stories_archive .category-verkoop::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 45%;
    width: 20px;
    height: 20px;
    background-image: url('https://hogenhouck.nl/wp-content/uploads/2024/10/koop-verkoop-category.svg');
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateY(-50%);
}

/* Technology and Health Services category icons */
.elementor-widget-entrepreneur_stories_archive .category-technology::before,
.elementor-widget-entrepreneur_stories_archive .category-health-services::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 45%;
    width: 20px;
    height: 20px;
    background-image: url('https://hogenhouck.nl/wp-content/uploads/2024/10/health-services-technology-category.svg');
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateY(-50%);
}

/* Add custom icons for additional categories here */

.elementor-widget-entrepreneur_stories_archive .entrepreneur-story .meta .category-item {
    color: var(--light-grey-color);
    display: block;
    font-family: "Klavika", Sans-serif;
    font-size: 18px;
    line-height: 120%;
    font-weight: 400;
    position: relative;
    text-transform: capitalize;
}

.elementor-widget-entrepreneur_stories_archive .entrepreneur-story .content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 40px 0;
}

.elementor-widget-entrepreneur_stories_archive .entrepreneur-story h4.title {
    font-family: "Klavika", Sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--primary-color);
    line-height: 120%;
    margin: 0;
    padding: 0;
}

.elementor-widget-entrepreneur_stories_archive .entrepreneur-story a.title-post-link h4.title:hover {
    color: var(--magenta-color);
}

.elementor-widget-entrepreneur_stories_archive .entrepreneur-story .content {
    font-family: "Klavika", Sans-serif;
    font-size: 18px;
    line-height: 120%;
    font-weight: 400;
    color: #808E96;
    min-height: 87px;
}

.elementor-widget-entrepreneur_stories_archive .entrepreneur-story a.primary-button::after {
    margin-left: 15px;
    right: unset;
}

/* Transaction Data Styling */
.elementor-widget-entrepreneur_stories_archive .transaction-data {
    background-color: #F7F8F8;
    border-radius: 8px;
    min-height: 215px;
    min-width: 200px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    margin-bottom: -48px;
    box-shadow: 0px 10px 64px rgba(0, 0, 0, 0.15);
}

.elementor-widget-entrepreneur_stories_archive .transaction-data img {
    width: 100%;
    object-fit: contain;
    max-width: 100px;
    height: 50px;
    align-self: center;
}

.elementor-widget-entrepreneur_stories_archive .transaction-data .transaction-divider {
    font-family: "Klavika", Sans-serif;
    font-size: 18px;
    line-height: 120%;
    color: var(--magenta-color);
    font-weight: 400;
    text-align: center;
    position: relative;
    display: inline-block;
}

.elementor-widget-entrepreneur_stories_archive .transaction-data .transaction-divider::before,
.elementor-widget-entrepreneur_stories_archive .transaction-data .transaction-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px;
    height: 2px;
    background-color: var(--magenta-color);
}

.elementor-widget-entrepreneur_stories_archive .transaction-data .transaction-divider::before {
    left: -8px;
}

.elementor-widget-entrepreneur_stories_archive .transaction-data .transaction-divider::after {
    right: -8px;
}

.elementor-widget-entrepreneur_stories_archive .transaction-data .transaction-divider span {
    display: block;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .elementor-widget-entrepreneur_stories_archive .entrepreneur-stories-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Still two columns */
    }

    .elementor-widget-entrepreneur_stories_archive .entrepreneur-story .meta,
    .elementor-widget-entrepreneur_stories_archive .entrepreneur-story .post-categories {
        gap: 12px;
        flex-direction: column;
    }

    .elementor-widget-entrepreneur_stories_archive .transaction-data {
        min-width: 160px;
    }

    .elementor-widget-entrepreneur_stories_archive .entrepreneur-story .flex-wrapper {
        margin-left: 24px;
    }

    .elementor-widget-entrepreneur_stories_archive .transaction-data .transaction-divider::before,
    .elementor-widget-entrepreneur_stories_archive .transaction-data .transaction-divider::after {
        width: 20px;
    }

    .elementor-widget-entrepreneur_stories_archive .entrepreneur-story .content {
        min-height: 152px;
    }
}

@media (max-width: 768px) {
    .elementor-widget-entrepreneur_stories_archive .entrepreneur-stories-grid {
        grid-template-columns: 1fr;
        /* Single column */
    }
}
.elementor-widget-entrepreneur_stories .entrepreneur-stories-slider.slick-initialized .slick-slide {
    margin-right: 40px;
    min-height: 540px;
    display: flex;
    align-items: stretch;
    background-position: top center;
}

.elementor-widget-entrepreneur_stories .entrepreneur-stories-slider.slick-initialized .slick-slide:last-child {
    margin-right: 0;
}

.elementor-widget-entrepreneur_stories .entrepreneur-story {
    background-size: cover;
    position: relative;
    padding: 24px 16px;
    border-radius: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Align content to the bottom */
}

.elementor-widget-entrepreneur_stories .entrepreneur-story .play-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.elementor-widget-entrepreneur_stories .entrepreneur-story .play-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.elementor-widget-entrepreneur_stories .entrepreneur-story .wrapper {
    align-self: flex-start;
    margin-top: auto;
    width: 100%;
}

.elementor-widget-entrepreneur_stories .entrepreneur-story .categories {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    margin-bottom: 16px;
    margin-left: 30px;
}

.elementor-widget-entrepreneur_stories .entrepreneur-story .category-item {
    font-family: "Klavika", Sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 120%;
    color: var(--light-grey-color);
    position: relative;
}

.elementor-widget-entrepreneur_stories .entrepreneur-story .content-wrapper {
    background-color: #ffffff;
    padding: 16px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.elementor-widget-entrepreneur_stories .news-carousel-controls {
    justify-content: flex-end;
    margin-bottom: 30px;
    margin-right: 30px;
    gap: 10px;
}

.elementor-widget-entrepreneur_stories .entrepreneur-story .content-wrapper .title-post {
    font-family: "Klavika", Sans-serif;
    font-size: 24px;
    line-height: 120%;
    color: var(--dark-grey);
    min-height: 58px;
}

.elementor-widget-entrepreneur_stories .entrepreneur-story .content-wrapper .title-post:hover {
    color: var(--magenta-color);
}

.elementor-widget-entrepreneur_stories .entrepreneur-story .content-wrapper a.title-post-link .title-post:hover {
    color: var(--magenta-color);
}

.elementor-widget-entrepreneur_stories .entrepreneur-story .content-wrapper .author-function {
    font-family: "Klavika", Sans-serif;
    font-size: 18px;
    line-height: 120%;
    color: var(--dark-grey);
}

.elementor-widget-entrepreneur_stories .entrepreneur-story .content-wrapper .company-logo img {
    max-width: 100px;
    width: 100%;
    height: 50px;
    object-fit: contain;
    margin: 0;
}

.elementor-widget-entrepreneur_stories .entrepreneur-story .play-icon img:hover {
    border: 1px solid var(--magenta-color);
    border-radius: 50%;
}

@media (max-width: 1024px) {
    .elementor-widget-entrepreneur_stories .entrepreneur-stories-slider.slick-initialized .slick-slide {
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .elementor-widget-entrepreneur_stories .entrepreneur-stories-slider.slick-initialized .slick-slide {
        margin-right: 5px;
        margin-left: 25px;
    }

    .elementor-widget-entrepreneur_stories .entrepreneur-story .categories {
        gap: 10px;
        flex-direction: column;
    }

    .elementor-widget-entrepreneur_stories .entrepreneur-story .content-wrapper .title-post {
        font-size: 20px;
        min-height: 45px;
    }
}
/* =========================================================================
   Expanding Panels widget
   Alle cards houden altijd dezelfde grootte; alleen de inhoud wisselt.
   Ruststand: alleen de titel linksonder op een verdonkerde afbeelding.

   Bij hover (of :focus-within met toetsenbord) verdwijnt de overlay, komt de
   afbeelding in kleur en klappen tekst + knop onder de titel uit. Er is geen
   klik-state: zodra de muis weg is, valt de card terug in ruststand.

   Dat geldt vanaf 1025px. Daaronder is het een accordeon: de cards staan als
   balken onder elkaar en je tikt er één open, via de class is-open uit
   assets/js/expanding-panels.js. Een open paneel houdt daar een vlakke overlay
   in plaats van de gradient. Zie het accordeon-blok onderaan.
   ========================================================================= */

.expanding-panels {
    --ep-gap: 12px;
    --ep-radius: 8px;
    /* Marge die overblijft tussen de cards en de viewport-rand bij bleed. */
    --ep-bleed-inset: 0.5rem;
    /* Positie van de tekst linksonder in de card. */
    --ep-content-inset-left: 2rem;
    --ep-content-inset-bottom: 2.5rem;
    /* Hoogte van een dichtgeklapte balk in de accordeon (< 1025px). */
    --ep-bar-height: 4.8125rem;
    /* Ondergrens voor een opengeklapt paneel: bij weinig tekst blijft de card
       zo een card in plaats van een iets hogere balk. Meer tekst mag hem
       verder laten groeien. */
    --ep-open-min-height: 19rem;
    position: relative; /* anker voor de CTA, die in de container blijft */
    width: 100%;
}

/* --- Intro (title + lead) ----------------------------------------------- */
.expanding-panels__intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 48px;
}

.expanding-panels__title {
    margin: 0;
    flex: 1 1 auto;
    max-width: 640px;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.2;
    color: #1C2945;
}

/* Serif accent words (kept inline; the theme forces heading spans to block). */
.expanding-panels__title span,
.expanding-panels__title em,
.expanding-panels__title i {
    display: inline;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
    color: inherit;
}

.expanding-panels__lead {
    margin: 0;
    flex: 0 1 470px;
    max-width: 470px;
    color: #09122B;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 1.35rem */
}

/* --- Grid --------------------------------------------------------------- */
/* De grid bepaalt zelf de kaartbreedte: alle panelen zijn flex-items met
   flex: 1 1 0%, dus de beschikbare breedte wordt gelijk verdeeld. Met 5 cards
   is elke card smaller, met 4 breder en met 3 nog breder — zonder dat er per
   aantal iets ingesteld hoeft te worden. De inhoud schaalt mee via de
   container-query verderop. */
.expanding-panels__grid {
    --ep-panel-height: 48.5rem;
    position: relative;
    display: flex;
    gap: var(--ep-gap);
    width: 100%;
}

/* --- Cards buiten de container (bleed) ---------------------------------- */
/* De container is horizontaal gecentreerd; (50% - 50vw) is negatief en trekt
   beide randen van de grid door tot de viewport, terwijl de intro (titel +
   tekst) binnen de container blijft staan. De inset laat een kleine marge over
   en vangt tegelijk de breedte van een zichtbare scrollbar op, zodat er geen
   horizontale scroll ontstaat. */
.expanding-panels--bleed .expanding-panels__grid {
    width: auto;
    margin-left: calc(50% - 50vw + var(--ep-bleed-inset));
    margin-right: calc(50% - 50vw + var(--ep-bleed-inset));
}

/* --- Panel -------------------------------------------------------------- */
.expanding-panels__panel {
    --ep-overlay-color: #1C2945;
    --ep-overlay-opacity: 0.78;
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
    height: var(--ep-panel-height);
    border-radius: var(--ep-radius);
    overflow: hidden;
    isolation: isolate;
    /* Query-container: de titel en insets in de card schalen mee met de
       breedte die de grid aan deze card geeft. */
    container-type: inline-size;
}

/* De head is een echte knop. Buiten de accordeon-modus staat het content-blok
   op pointer-events: none, dus daar vangt hij geen kliks — focusbaar blijft hij
   wel, en daarop opent :focus-within de reveal. De reset is nodig omdat een
   knop anders zijn eigen achtergrond, rand en font meeneemt. */
.expanding-panels__head {
    -webkit-appearance: none;
    appearance: none;
    /* block, niet flex: dat was een <div> en op desktop staat de chevron uit,
       dus daar bevat de head alleen de titel. De accordeon zet hem verderop
       wel op flex, om titel en chevron op een rij te krijgen. */
    display: block;
    /* Geen width: 100% hier — buiten de accordeon is de head een flex-item dat
       met de titel meekrimpt, net als de <div> die hij vervangt. De accordeon
       zet de volle breedte verderop zelf. */
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    /* inherit en niet left: een knop centreert standaard, een div nam de
       uitlijning van zijn ouder over. */
    text-align: inherit;
}

/* GeneratePress stijlt elk <button>-element, ook op :hover en :focus:
   background-color #3f4047 met witte tekst (inc/defaults.php,
   form_button_background_color_hover). Als <div> ontsnapte de head daaraan, als
   <button> niet meer. Op een touchscreen blijft :hover na een tik hangen, dus
   zonder deze reset houdt een opengetikt paneel een grijze titelbalk. */
.expanding-panels__head:hover,
.expanding-panels__head:focus,
.expanding-panels__head:active {
    background: none;
    color: inherit;
}

/* Visible keyboard focus (works on the dark image). */
.expanding-panels__head:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* --- Media layers ------------------------------------------------------- */
.expanding-panels__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--ep-overlay-color);
}

.expanding-panels__panel .expanding-panels__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important; /* beat Elementor's global img { height: auto } */
    object-fit: cover;
    display: block;
}

/* Vlakke overlay over de hele card: zichtbaar in ruststand, bij hover fade die
   volledig weg (opacity 0) zodat de foto in volle kleur overblijft. De
   gradient hieronder neemt dan de leesbaarheid van de tekst over. */
.expanding-panels__veil {
    position: absolute;
    inset: 0;
    background-color: var(--ep-overlay-color);
    opacity: var(--ep-overlay-opacity);
    transition: opacity 0.85s ease;
    pointer-events: none;
}

/* Gradient scrim: donker vanaf de onderkant, zodat de tekst linksonder
   leesbaar blijft op een afbeelding in volle kleur. */
.expanding-panels__scrim {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.85s ease;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(28, 41, 69, 0.88) 0%,
        rgba(28, 41, 69, 0.45) 32%,
        rgba(28, 41, 69, 0) 62%
    );
}

/* Reveal-state: de overlay verdwijnt en tekst + knop komen in beeld bij hover.
   :focus-within doet hetzelfde voor toetsenbordgebruikers, anders is de
   pijl-link niet bereikbaar.
   Alleen vanaf 1025px: daaronder is het een accordeon die op een class werkt
   (zie onderaan). Zonder deze grens zou een tik of hover op een tablet een
   paneel openen buiten de accordeon om. */
@media (min-width: 1025px) {
    .expanding-panels__panel:hover .expanding-panels__veil,
    .expanding-panels__panel:focus-within .expanding-panels__veil {
        opacity: 0;
    }

    .expanding-panels__panel:hover .expanding-panels__scrim,
    .expanding-panels__panel:focus-within .expanding-panels__scrim {
        opacity: 1;
    }
}

/* --- Hele card klikbaar (desktop) --------------------------------------- */
/* Een link over het volle paneel, zodat je op desktop niet de pijl-knop hoeft
   te raken: klikken op de foto, de titel of de tekst gaat naar dezelfde link.
   Hij ligt boven de media-lagen (z-index 0) en onder het content-blok
   (z-index 2) — dat blok laat aanwijzer-events door, zodat een klik op de
   tekst hier alsnog terechtkomt. Alleen de pijl-knop pakt ze zelf op: die
   houdt zo z'n eigen hover-animatie en blijft de link in de tabvolgorde (de
   overlay staat aria-hidden en op tabindex -1, anders zou elke card twee keer
   in de tabvolgorde en in de voorleeslijst staan).
   Onder 1025px is de card een accordeon-toggle en moet een tik openklappen in
   plaats van navigeren; daar staat de overlay dus uit. */
.expanding-panels__link {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1;
}

@media (min-width: 1025px) {
    .expanding-panels__link {
        display: block;
    }

    .expanding-panels__content {
        pointer-events: none;
    }

    /* Terug aan voor de knop zelf. In ruststand is de reveal tot hoogte 0
       geklapt met overflow: hidden, dus daar valt niets te raken. */
    .expanding-panels__arrow {
        pointer-events: auto;
    }
}

/* --- Content (titel + tekst + knop) ------------------------------------- */
/* Staat altijd linksonder in de card. De titel is er maar één: in ruststand
   zie je alleen die titel, want tekst en knop zitten dichtgeklapt in
   .expanding-panels__reveal eronder. */
.expanding-panels__content {
    position: absolute;
    top: var(--ep-content-inset-left);
    left: var(--ep-content-inset-left);
    right: 1.5rem;
    bottom: var(--ep-content-inset-bottom);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}

.expanding-panels__content-title {
    font-family: var(--primary-font, "Klavika Basic", "Klavika", sans-serif);
    font-size: 2rem;   /* H3 */
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 2.4rem */
    color: var(--S---Light-grey-4, #F7F8F8);
}

/* Tekst + knop klappen onder de titel uit. De rij gaat van 0fr naar 1fr, dus
   de animatie loopt precies tot de eigen hoogte van de inhoud (in plaats van
   naar een geschatte max-height, wat halverwege al klaar zou zijn). Omdat het
   content-blok onderaan is uitgelijnd, schuift de tekst van onder naar boven
   in beeld en gaat de titel mee omhoog. */
.expanding-panels__reveal {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: grid-template-rows 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}

@media (min-width: 1025px) {
    .expanding-panels__panel:hover .expanding-panels__reveal,
    .expanding-panels__panel:focus-within .expanding-panels__reveal {
        grid-template-rows: 1fr;
        opacity: 1;
    }
}

/* min-height: 0 laat de rij ook echt tot 0 krimpen. */
.expanding-panels__reveal-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
}

/* De ruimte tussen de titel en de tekst zit in een marge en niet in padding:
   padding zou de dichtgeklapte rij alsnog 20px hoog houden. */
.expanding-panels__reveal-inner > :first-child {
    margin-top: 20px;
}

.expanding-panels__content-text {
    max-width: 18.75rem;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

.expanding-panels__content-text p {
    margin: 0 0 12px;
}

.expanding-panels__content-text p:last-child {
    margin-bottom: 0;
}

/* --- Inhoud schaalt met de kaartbreedte --------------------------------- */
/* Hoe meer panelen, hoe smaller elke card. Deze container-queries laten de
   titel en de insets die breedte volgen, zodat een titel bij 5 cards niet
   afbreekt en bij 3 cards juist de volle 2rem gebruikt.
   Alleen vanaf 1025px: daaronder staan de cards als accordeon onder elkaar en
   gelden de vaste waarden uit dat blok. Browsers zonder container-queries
   negeren dit blok en houden de vaste waarden aan. */
@media (min-width: 1025px) {
    /* Titel loopt vloeiend mee met de kaartbreedte, met 2rem als plafond
       (de huidige maat bij brede cards) en 1.5rem als bodem. */
    @container (max-width: 30rem) {
        .expanding-panels__content-title {
            font-size: clamp(1.5rem, 7.5cqi, 2rem);
        }
    }

    /* Smalle cards: minder ruimte verspillen aan de randen. De vars worden op
       het content-blok zelf gezet, zodat de basisregels ze oppikken. */
    @container (max-width: 20rem) {
        .expanding-panels__content {
            --ep-content-inset-left: 1.5rem;
            --ep-content-inset-bottom: 2rem;
            right: 1.25rem;
        }
    }
}

/* --- Per-panel arrow button --------------------------------------------- */
.expanding-panels__arrow {
    display: flex;
    padding: 0.75rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem; /* ruimte tussen de tekst en de knop */
    background: #fff;
    border-radius: 4px;
    color: var(--magenta-color, #A52A87);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.expanding-panels__arrow .ep-arrow-icon {
    width: 1rem;
    height: 1rem;
}

.expanding-panels__arrow:hover,
.expanding-panels__arrow:focus-visible {
    transform: translateX(4px);
}

/* --- Global CTA (bottom-right) ------------------------------------------ */
/* Hangt aan .expanding-panels (de container), niet aan de grid: ook bij bleed
   lijnt de knop rechts uit met de titel en tekst. */
.expanding-panels__cta {
    position: absolute;
    right: 0;
    bottom: 32px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 20px 32px;
    background: var(--magenta-color, #A52A87);
    color: #fff;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: filter 0.25s ease;
}

.expanding-panels__cta:hover,
.expanding-panels__cta:focus-visible {
    filter: brightness(0.92);
    color: #fff;
}

/* --- Arrow icon (mask so it follows currentColor) ----------------------- */
.ep-arrow-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    flex-shrink: 0;
}

/* Chevron rechts in de dichtgeklapte balk. Hoort bij de accordeon onder
   1025px; op desktop bestaat die staat niet, dus daar staat hij uit. Moet ná
   .ep-arrow-icon staan om de display van die klasse te overrulen. */
.expanding-panels__chevron {
    display: none;
    width: 1rem;
    height: 1rem;
}

.expanding-panels__cta .ep-arrow-icon {
    color: #fff;
    transition: transform 0.3s ease;
}

.expanding-panels__cta:hover .ep-arrow-icon {
    transform: translateX(4px);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
    .expanding-panels__intro {
        flex-direction: column;
        gap: 24px;
    }

    .expanding-panels__lead {
        flex-basis: auto;
        max-width: 640px;
    }
}

/* --- Accordeon op mobiel en tablet (< 1025px) --------------------------- */
/* Naast elkaar werkt hier niet: vijf panelen op een tablet zijn nog geen
   150px breed, en zonder hover valt er niets te onthullen. De cards worden
   daarom balken die je open tikt. Eén tegelijk: het openen van een paneel
   sluit het vorige (de class is-open komt uit assets/js/expanding-panels.js).
   De hoogte is niet vast maar volgt de inhoud — dicht is het een balk van
   --ep-bar-height, open groeit de card tot wat de tekst en de knop nodig
   hebben, met --ep-open-min-height als ondergrens.
   De hoogte-instelling van de widget geldt daardoor alleen vanaf 1025px. */
@media (max-width: 1024px) {
    /* Alles wat bij het open- en dichtklappen beweegt gebruikt dezelfde duur en
       curve. Anders landen de hoogte (0.5s), de tekst (0.7s) en de overlay
       (0.85s) op verschillende momenten en valt de beweging uiteen. */
    .expanding-panels {
        --ep-accordion-duration: 0.6s;
        --ep-accordion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    .expanding-panels__grid {
        flex-direction: column;
    }

    /* De crop begint bovenaan in plaats van in het midden. Een dichtgeklapte
       balk is maar --ep-bar-height hoog, dus je ziet een strook van de foto;
       vanaf de bovenkant snijden zet die strook op de kop van het beeld, en
       omdat de balk aan de onderkant groeit schuift de rest erbij zodra het
       paneel openklapt — mee met de hoogte-animatie.
       Welke foto hier binnenkomt, is een tweede: onder 1025px levert de widget
       de liggende bron in plaats van de staande crop (zie de <source> in
       expanding-panels.php). Anders bleef er van een 3:5-crop in een balk van
       ~360x77 maar 13% van de hoogte over — te weinig om iets te herkennen.
       Bij een opengeklapte kaart is die liggende bron hoger dan de kaart breed
       is, dus daar valt de volle hoogte van de foto in beeld en snijdt cover
       alleen links en rechts een marge weg. */
    .expanding-panels__panel .expanding-panels__image {
        object-position: center top;
    }

    /* Op desktop lopen de cards tot de viewport-rand; als balk lijnen ze uit
       met de titel en de tekst, zoals in het ontwerp. */
    .expanding-panels--bleed .expanding-panels__grid {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* height: auto laat de card met de inhoud meegroeien. flex: 0 0 auto is
       nodig omdat flex-basis in een kolom de hoogte bepaalt; met de 0% uit de
       desktopregel zouden de cards inklappen tot hoogte 0. */
    .expanding-panels__panel {
        flex: 0 0 auto;
        height: auto;
        cursor: pointer;
    }

    /* Niet langer absoluut gepositioneerd: de inhoud bepaalt nu de hoogte van
       de card. Wel relative en niet static, want de z-index van deze laag
       werkt alleen op een gepositioneerd element — anders tekent de
       afbeeldingslaag (absolute, z-index 0) over de titel heen. inset: auto
       maakt de offsets van de desktopregel ongedaan; die zouden het blok in
       relative-positie 2rem verschuiven. */
    /* De inhoud begint bovenaan en de padding-top verandert niet bij openen:
       zo blijft de titel staan waar hij stond en groeit de card alleen naar
       onderen. Eerder wisselde justify-content hier van center naar
       space-between, en zo'n wissel is niet animeerbaar — de titel verspringt
       dan een paar pixels op het moment dat de card begint te groeien. */
    .expanding-panels__content {
        position: relative;
        inset: auto;
        min-height: var(--ep-bar-height);
        padding: 1rem 1.5rem;
        justify-content: flex-start;
        transition: padding var(--ep-accordion-duration) var(--ep-accordion-ease),
                    min-height var(--ep-accordion-duration) var(--ep-accordion-ease);
    }

    .expanding-panels__panel.is-open .expanding-panels__content {
        min-height: var(--ep-open-min-height);
        padding-bottom: 2rem;
    }

    /* Tekst en knop onderaan: de auto-marge slokt de vrije ruimte op die
       ontstaat terwijl de card groeit. Dat loopt mee met de hoogte-animatie, dus
       zonder sprong. Past de inhoud niet binnen de minimumhoogte, dan is er geen
       vrije ruimte en zorgt de margin-top uit de basisregel voor de afstand tot
       de titel. */
    .expanding-panels__panel.is-open .expanding-panels__reveal {
        margin-top: auto;
    }

    /* Dezelfde duur en curve als de hoogte, zodat de tekst gelijk met de card
       op zijn plaats komt. De basisregel gebruikt 0.7s en 0.5s. */
    .expanding-panels__reveal {
        transition: grid-template-rows var(--ep-accordion-duration) var(--ep-accordion-ease),
                    opacity var(--ep-accordion-duration) var(--ep-accordion-ease);
    }

    /* De overlay deed er met 0.85s het langst over en liep daardoor achter op
       de rest. */
    .expanding-panels__veil {
        transition: opacity var(--ep-accordion-duration) var(--ep-accordion-ease);
    }

    /* Tekst en knop naast elkaar: tekst links, knop rechts tegen de rand van de
       card. De ruimte tussen de titel en de tekst blijft de margin-top uit de
       basisregel; de margin-top van de knop hoorde bij de kolom-opstelling en
       moet er hier af. */
    .expanding-panels__reveal-inner {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .expanding-panels__arrow {
        margin-top: 0;
    }

    /* De knop staat hier tegen de rechterrand van de reveal, en die heeft
       overflow: hidden nodig voor de uitklap-animatie. Een translate op de knop
       zelf wordt daar dus afgesneden; net als bij de CTA-knop schuift daarom
       het icoon bínnen de knop, waar de padding ruimte genoeg laat. */
    .expanding-panels__arrow .ep-arrow-icon {
        transition: transform 0.3s ease;
    }

    .expanding-panels__arrow:hover,
    .expanding-panels__arrow:focus-visible {
        transform: none;
    }

    .expanding-panels__arrow:hover .ep-arrow-icon,
    .expanding-panels__arrow:focus-visible .ep-arrow-icon {
        transform: translateX(4px);
    }

    /* De titel groeit mee bij openen: dicht is het een balk, open een card. */
    .expanding-panels__content-title {
        font-size: 1.5rem;
        transition: font-size var(--ep-accordion-duration) var(--ep-accordion-ease);
    }

    .expanding-panels__panel.is-open .expanding-panels__content-title {
        font-size: 1.75rem;
    }

    /* Titel en chevron staan in dezelfde rij, dus ze blijven op één regel of de
       card nu dicht is of open (waar de inhoud naar onderen schuift). Een vaste
       hoogte zou dat niet halen: de titel zakt mee met de hoogte van de tekst
       eronder. */
    .expanding-panels__head {
        display: flex;
        width: 100%;
        cursor: pointer;
        /* De balkhoogte min de padding: hierdoor staat de titel in de
           dichtgeklapte balk verticaal gecentreerd zonder dat de inhoud daarvoor
           op center hoeft te staan. */
        min-height: calc(var(--ep-bar-height) - 2rem);
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    /* Bij een open paneel draait de chevron 180 graden en blijft hij staan —
       dat is de hint dat je de card weer dicht kunt tikken. */
    .expanding-panels__chevron {
        display: block;
        color: #fff;
        transition: transform var(--ep-accordion-duration) var(--ep-accordion-ease);
        pointer-events: none;
    }

    .expanding-panels__panel.is-open .expanding-panels__chevron {
        transform: rotate(180deg);
    }

    /* Open: de foto komt naar voren, maar houdt een vlakke overlay in plaats
       van de gradient die de desktop-hover gebruikt. De gradient blijft hier
       dus uit (de scrim staat standaard al op opacity 0). */
    .expanding-panels__panel.is-open .expanding-panels__veil {
        opacity: var(--ep-overlay-opacity-open, 0.5);
    }

    .expanding-panels__panel.is-open .expanding-panels__reveal {
        grid-template-rows: 1fr;
        opacity: 1;
        pointer-events: auto;
    }

    /* Op een volle kaartbreedte hoeft de tekst niet op 18.75rem te blijven. */
    .expanding-panels__content-text {
        max-width: 34rem;
    }
}

@media (max-width: 767px) {
    .expanding-panels__cta {
        position: static;
        margin-top: 16px;
        justify-content: center;
        width: 100%;
    }
}

/* --- Touch zonder hover, vanaf 1025px ----------------------------------- */
/* Denk aan een touchscreen-laptop of een grote tablet in landscape: daar staan
   de panelen naast elkaar, maar valt er zonder hover niets te onthullen. Dan
   staat de inhoud meteen open. Onder 1025px neemt de accordeon dit over. */
@media (min-width: 1025px) and (hover: none) {
    .expanding-panels__panel .expanding-panels__veil {
        opacity: 0;
    }

    .expanding-panels__panel .expanding-panels__scrim {
        opacity: 1;
    }

    .expanding-panels__panel .expanding-panels__reveal {
        grid-template-rows: 1fr;
        opacity: 1;
    }
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .expanding-panels__panel,
    .expanding-panels__veil,
    .expanding-panels__scrim,
    .expanding-panels__reveal,
    .expanding-panels__arrow,
    .expanding-panels__cta,
    .expanding-panels__content,
    .expanding-panels__content-title,
    .expanding-panels__chevron,
    .ep-arrow-icon {
        transition: none;
    }
}

/* =========================================================================
   Header / Menu
   - Eén set markup voor beide weergaves. In de brede stand staan logo, menu en
     acties naast elkaar in de balk; met de class .is-compact wordt dezelfde
     .rw-header__drawer een schermvullend paneel dat je met de hamburger
     openklapt.
   - .is-compact wordt door header-menu.js gezet, niet door een media query.
     Het script meet of de menu-items nog naast het logo en de knop passen en
     schakelt over zodra dat niet meer zo is — handig bij vertalingen, waar
     labels langer worden. Onder de 1024px is het altijd de compacte stand.
   - Submenu's zijn in de brede stand dropdowns en in de compacte stand panelen
     die van rechts inschuiven. Beide gebruiken dezelfde
     <ul class="rw-header__submenu">.
   ========================================================================= */

.rw-header {
    /* Overschrijfbaar via de Elementor-controls (zie header-menu.php). */
    --rw-header-bg: #0F1430;
    --rw-header-height: 64px;
    --rw-header-inline-padding: 30px;
    --rw-header-content-width: 100%;
    --rw-header-border-color: transparent;
    --rw-header-border-width: 0px;
    --rw-header-z: 999;

    --rw-header-link-color: #fff;
    --rw-header-link-color-hover: #fff;
    --rw-header-link-color-current: #fff;
    --rw-header-menu-gap: 2rem;
    --rw-header-menu-align: center;

    --rw-header-submenu-bg: #1C2945;
    --rw-header-submenu-color: #fff;
    --rw-header-submenu-color-hover: #fff;
    --rw-header-submenu-bg-hover: rgba(255, 255, 255, 0.08);

    /* Een menu-item is niet zo hoog als de balk, maar zo hoog als de chevron;
       de rest van de balkhoogte is vrije ruimte boven en onder het item. Door
       die helft mee te rekenen hangt de dropdown onder de balk in plaats van er
       middenin, en schuift hij mee als de balkhoogte verandert. Alleen deze gap
       is bedoeld om aan te draaien. */
    --rw-header-submenu-gap: 0.5rem;
    --rw-header-row-height: 1.125rem;
    --rw-header-submenu-offset: calc(
        (var(--rw-header-bar-height) - var(--rw-header-row-height)) / 2
        + var(--rw-header-submenu-gap)
    );

    --rw-header-drawer-bg: var(--rw-header-bg);
    --rw-header-drawer-link-color: #fff;
    --rw-header-drawer-divider: rgba(255, 255, 255, 0.18);
    --rw-header-arrow-color: rgba(255, 255, 255, 0.85);
    --rw-header-burger-color: #fff;

    --rw-header-contact-color: rgba(255, 255, 255, 0.9);
    --rw-header-contact-icon-color: #fff;

    --rw-header-cta-color: #fff;
    --rw-header-cta-border-color: #c142a2;
    --rw-header-cta-radius: 0.25rem;

    --rw-header-lang-color: rgba(255, 255, 255, 0.7);
    --rw-header-lang-color-active: #fff;

    --rw-header-search-icon-color: #fff;
    --rw-header-search-field-bg: rgba(255, 255, 255, 0.08);
    --rw-header-search-field-color: #fff;
    --rw-header-search-placeholder-color: rgba(255, 255, 255, 0.6);
    --rw-header-search-border-color: rgba(255, 255, 255, 0.35);
    --rw-header-search-border-color-focus: #c142a2;
    --rw-header-search-radius: 0.25rem;
    --rw-header-search-width: 28rem;

    /* Wordt door de JS gevuld met de gemeten hoogte van de balk; tot dat moment
       valt hij terug op de ingestelde hoogte. */
    --rw-header-bar-height: var(--rw-header-height);

    position: relative;
    width: 100%;
}

/* De widget zit in Elementor-wrappers met een eigen breedte; die mogen de
   vaste balk niet afknellen. */
.rw-header * {
    box-sizing: border-box;
}

/* --- Balk ---------------------------------------------------------------- */
.rw-header__bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    min-height: var(--rw-header-height);
    /* De achtergrond loopt door tot de schermranden, de inhoud niet: bij een
       ingestelde maximale breedte groeit de binnenmarge mee, zodat het logo
       links en de knop rechts binnen diezelfde kolom blijven. */
    padding: 0 max(
        var(--rw-header-inline-padding),
        calc((100% - var(--rw-header-content-width)) / 2)
    );
    border-bottom: var(--rw-header-border-width) solid var(--rw-header-border-color);
    background-color: var(--rw-header-bg);
}

/* Vaste balk: position fixed in plaats van sticky, omdat sticky binnen de
   Elementor-kolom niet verder plakt dan de kolom zelf hoog is. De spacer
   eronder houdt de ruimte in de pagina open.

   De balk staat eerst gewoon in de pagina en scrolt mee omhoog; pas voorbij de
   ingestelde afstand zet header-menu.js de class .is-stuck erop en klapt hij
   vast bovenaan. */
.rw-header--sticky.is-stuck .rw-header__bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--rw-header-z);
    animation: rw-header-drop 0.28s ease;
}

/* Van boven het scherm naar binnen schuiven, zodat hij niet ineens verschijnt. */
@keyframes rw-header-drop {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* Houdt de ruimte van de vaste balk open zodra hij uit de pagina stroom gaat,
   anders springt de inhoud een balkhoogte omhoog. */
.rw-header__spacer {
    height: 0;
}

.rw-header--sticky.is-stuck .rw-header__spacer,
.rw-header.is-open .rw-header__spacer {
    height: var(--rw-header-bar-height);
}

/* In de editor blijft de balk meescrollen, anders ligt hij over de rest van de
   pagina heen en kun je er niet omheen werken. Staat het menu open, dan moet de
   balk wél vast staan — anders verdwijnt de sluitknop. */
body.elementor-editor-active .rw-header--sticky.is-stuck:not(.is-open) .rw-header__bar,
body.elementor-editor-preview .rw-header--sticky.is-stuck:not(.is-open) .rw-header__bar {
    position: relative;
    animation: none;
}

body.elementor-editor-active .rw-header__spacer,
body.elementor-editor-preview .rw-header__spacer {
    display: none;
}

/* Op desktop is .rw-header__inner alleen het logo; de rest zit in de drawer
   ernaast. Onder de breakpoint wordt dit de bovenste rij met logo + hamburger. */
.rw-header__inner {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* --- Logo ---------------------------------------------------------------- */
.rw-header__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}

.rw-header .rw-header__logo-img {
    display: block;
    width: 170px;
    max-width: 100%;
    height: auto;
}

.rw-header .rw-header__logo-text {
    color: #fff;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
}

/* --- Drawer -------------------------------------------------------------- */
/* Desktop: gewoon de tweede kolom van de balk. */
.rw-header__drawer {
    flex: 1 1 auto;
    min-width: 0;
}

.rw-header__drawer-scroll {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

/* --- Menu (desktop) ------------------------------------------------------ */
.rw-header__nav {
    flex: 1 1 auto;
    min-width: 0;
}

.rw-header .rw-header__menu {
    display: flex;
    align-items: center;
    justify-content: var(--rw-header-menu-align);
    gap: var(--rw-header-menu-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rw-header .rw-header__item {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rw-header__row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.rw-header .rw-header__link {
    display: inline-block;
    color: var(--rw-header-link-color);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.rw-header .rw-header__link:hover,
.rw-header .rw-header__link:focus-visible {
    color: var(--rw-header-link-color-hover);
    opacity: 0.75;
}

.rw-header .rw-header__item.is-current > .rw-header__row > .rw-header__link,
.rw-header .rw-header__item.is-ancestor > .rw-header__row > .rw-header__link {
    color: var(--rw-header-link-color-current);
}

/* --- Pijltjes en toggles ------------------------------------------------- */
.rw-header .rw-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rw-header-arrow-color);
    cursor: pointer;
    line-height: 0;
}

.rw-header__icon {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
}

/* Op desktop krijgt alleen een item mét submenu een teken, en dat is de chevron
   naar beneden. De pijl naar rechts hoort bij het mobiele paneel, dus die en de
   lege plaatshouders staan hier uit. */
.rw-header .rw-header__toggle--static {
    display: none;
}

.rw-header .rw-header__icon--arrow {
    display: none;
}

.rw-header .rw-header__icon--chevron {
    display: block;
}

/* --- Dropdown (desktop) -------------------------------------------------- */
.rw-header .rw-header__submenu {
    position: absolute;
    top: calc(100% + var(--rw-header-submenu-offset));
    left: 0;
    z-index: 2;
    min-width: 13rem;
    margin: 0;
    padding: 0.5rem 0;
    border-radius: 0.25rem;
    background-color: var(--rw-header-submenu-bg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    list-style: none;

    /* Verborgen, maar wel meetbaar: zo blijft de overgang vloeiend. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.375rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* Onzichtbare brug over het gat tussen de link en de dropdown. Zonder deze
   strook verliest het item zijn :hover zodra de muis het gat oversteekt en
   klapt het submenu dicht voordat je er bent. Zit op het submenu zelf, dus hij
   bestaat alleen als het open is (een dicht submenu is visibility: hidden en
   vangt geen muis). */
.rw-header:not(.is-compact) .rw-header__menu > .rw-header__item--has-children > .rw-header__submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--rw-header-submenu-offset);
}

/* Bewust visibility en niet display: zo staat een dicht submenu ook niet in de
   voorleesvolgorde en zijn de links er niet met tab te bereiken. */
.rw-header__item--has-children:hover > .rw-header__submenu,
.rw-header__item--has-children.is-open > .rw-header__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rw-header .rw-header__submenu .rw-header__item {
    width: 100%;
}

.rw-header .rw-header__submenu .rw-header__row {
    width: 100%;
}

.rw-header .rw-header__submenu .rw-header__link {
    width: 100%;
    padding: 0.625rem 1.25rem;
    color: var(--rw-header-submenu-color);
    white-space: normal;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.rw-header .rw-header__submenu .rw-header__link:hover,
.rw-header .rw-header__submenu .rw-header__link:focus-visible {
    background-color: var(--rw-header-submenu-bg-hover);
    color: var(--rw-header-submenu-color-hover);
    opacity: 1;
}

/* De terug-knop hoort bij het mobiele paneel. */
.rw-header .rw-header__back-item {
    display: none;
}

/* Diepere niveaus klappen op desktop naar rechts uit. */
.rw-header .rw-header__submenu .rw-header__submenu {
    top: -0.5rem;
    left: 100%;
}

/* --- Acties (taalwissel + knop) ------------------------------------------ */
.rw-header__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 0 0 auto;
}

.rw-header__lang {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.8125rem;
    line-height: 1;
}

.rw-header .rw-header__lang-link {
    color: var(--rw-header-lang-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.rw-header .rw-header__lang-link:hover,
.rw-header .rw-header__lang-link:focus-visible {
    color: var(--rw-header-lang-color-active);
}

.rw-header .rw-header__lang-link.is-current {
    color: var(--rw-header-lang-color-active);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rw-header__lang-sep {
    color: var(--rw-header-lang-color);
}

/* --- Zoeken -------------------------------------------------------------- */
/* De blokken staan in de HTML in de mobiele volgorde: het zoekveld bovenaan
   het paneel. In de brede stand zet order ze weer op één rij, met het loepje
   tussen het menu en de acties. In de compacte stand is .rw-header__drawer-
   scroll display: block en doet order niets. */
.rw-header__nav     { order: 1; }
.rw-header__contact { order: 2; }
.rw-header__search  { order: 3; }
.rw-header__actions { order: 4; }

.rw-header__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    min-width: 0;
}

/* Open mag het veld de ruimte innemen die het menu vrijmaakt, en het blijft
   tegen de taalwissel en de knop aan staan. */
.rw-header:not(.is-compact).is-searching .rw-header__search {
    flex: 1 1 auto;
    justify-content: flex-end;
}

/* Zolang er gezocht wordt maakt het menu plaats. header-menu.js houdt daar
   rekening mee: bij de meting of de items nog passen gaat deze class er even
   af, anders zou de header ten onrechte in de brede stand blijven staan. */
.rw-header:not(.is-compact).is-searching .rw-header__nav {
    display: none;
}

.rw-header__search-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    /* Dicht: geen breedte, geen rand, en met visibility ook niet bereikbaar
       met tab of schermlezer. */
    max-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--rw-header-search-radius);
    background-color: transparent;
    opacity: 0;
    visibility: hidden;
    transition: max-width 0.3s ease, padding 0.3s ease, opacity 0.2s ease,
                border-color 0.2s ease, background-color 0.2s ease, visibility 0.3s;
}

.rw-header:not(.is-compact).is-searching .rw-header__search-form {
    max-width: var(--rw-header-search-width);
    padding: 0.4375rem 0.75rem;
    border-color: var(--rw-header-search-border-color);
    background-color: var(--rw-header-search-field-bg);
    opacity: 1;
    visibility: visible;
}

/* Het veld zelf heeft geen outline — dat zou een rand om een rand geven — dus
   laat de rand van het formulier zien dat de cursor erin staat. */
.rw-header .rw-header__search-form:focus-within {
    border-color: var(--rw-header-search-border-color-focus);
}

/* Het thema en Elementor geven invoervelden een eigen rand, achtergrond en
   binnenmarge; die horen hier weg, de vormgeving zit op het formulier. */
.rw-header .rw-header__search-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--rw-header-search-field-color);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.875rem;
    line-height: 1.5;
}

.rw-header .rw-header__search-input:focus {
    border: 0;
    outline: none;
    background: none;
    box-shadow: none;
    color: var(--rw-header-search-field-color);
}

.rw-header .rw-header__search-input::placeholder {
    color: var(--rw-header-search-placeholder-color);
    opacity: 1;
}

/* Chrome en Safari zetten een eigen kruisje in een type=search; dat botst met
   de knoppen ernaast. */
.rw-header .rw-header__search-input::-webkit-search-cancel-button,
.rw-header .rw-header__search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.rw-header .rw-header__search-submit,
.rw-header .rw-header__search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--rw-header-search-icon-color);
    cursor: pointer;
}

.rw-header .rw-header__search-submit {
    width: 1.5rem;
    height: 1.5rem;
}

.rw-header .rw-header__search-toggle {
    width: 2.25rem;
    height: 2.25rem;
}

.rw-header__search-toggle-icon {
    display: none;
}

.rw-header:not(.is-searching) .rw-header__search-toggle-icon--open,
.rw-header:not(.is-compact).is-searching .rw-header__search-toggle-icon--close {
    display: inline-flex;
}

/* Het label hoort bij het veld, maar wordt alleen voorgelezen. */
.rw-header__search-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Contactknop --------------------------------------------------------- */
.rw-header .rw-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--rw-header-cta-border-color);
    border-radius: var(--rw-header-cta-radius);
    /* Zelfde verloop als de knoppen in de Kennismaken-CTA. */
    background: linear-gradient(61deg, #a52a87 13.96%, #c14da5 86.04%);
    color: var(--rw-header-cta-color);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.25s ease;
}

.rw-header .rw-header__cta:hover,
.rw-header .rw-header__cta:focus-visible {
    filter: brightness(0.92);
    color: var(--rw-header-cta-color);
}

/* --- Hamburger ----------------------------------------------------------- */
.rw-header .rw-header__burger {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.625rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rw-header-burger-color);
    cursor: pointer;
}

.rw-header__burger-box {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 1rem;
}

.rw-header__burger-line {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: currentColor;
    transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}

.rw-header__burger-line:nth-child(1) { top: 0; }
.rw-header__burger-line:nth-child(2) { top: calc(50% - 1px); }
.rw-header__burger-line:nth-child(3) { top: calc(100% - 2px); }

/* Open: de bovenste en onderste lijn vormen het kruisje. */
.rw-header.is-open .rw-header__burger-line:nth-child(1) {
    top: calc(50% - 1px);
    transform: rotate(45deg);
}

.rw-header.is-open .rw-header__burger-line:nth-child(2) {
    opacity: 0;
}

.rw-header.is-open .rw-header__burger-line:nth-child(3) {
    top: calc(50% - 1px);
    transform: rotate(-45deg);
}

/* --- Contactgegevens (alleen mobiel) ------------------------------------- */
.rw-header .rw-header__contact {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Focus --------------------------------------------------------------- */
.rw-header a:focus-visible,
.rw-header button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* --- Editor-melding ------------------------------------------------------ */
.rw-header__notice {
    padding: 0.75rem 1rem;
    background-color: #fff3cd;
    color: #664d03;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.875rem;
}

/* =========================================================================
   Mobiel en tablet — de drawer wordt een schermvullend paneel.
   Let op: dezelfde breakpoint staat in header-menu.js.
   ========================================================================= */

.rw-header.is-compact {
    --rw-header-inline-padding: 20px;
}

/* De balk is nu alleen nog de bovenste rij; de drawer eronder ligt
   schermvullend en wordt los gepositioneerd. */
.rw-header.is-compact .rw-header__bar {
    display: block;
    padding: 0;
}

.rw-header.is-compact .rw-header__inner {
    position: relative;
    z-index: 2;
    justify-content: space-between;
    width: 100%;
    min-height: var(--rw-header-height);
    padding: 0 var(--rw-header-inline-padding);
    background-color: var(--rw-header-bg);
}

.rw-header.is-compact .rw-header__burger {
    display: inline-flex;
}

/* Het paneel vult het scherm onder de balk. Verborgen met visibility, zodat
   links niet bereikbaar zijn met tab of schermlezer als het dicht is. */
.rw-header.is-compact .rw-header__drawer {
    position: fixed;
    top: var(--rw-header-bar-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--rw-header-z);
    overflow: hidden;
    background-color: var(--rw-header-drawer-bg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}

/* De balk met logo en sluitknop staat altijd bovenaan zolang het menu open is,
   ook als de header niet op sticky staat. Anders was hij met de pagina mee naar
   boven gescrold en bleef er alleen een lege strook boven het paneel over. */
.rw-header.is-open .rw-header__bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--rw-header-z);
}

.rw-header.is-compact.is-open .rw-header__drawer {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rw-header.is-compact .rw-header__drawer-scroll {
    display: block;
    max-width: none;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem var(--rw-header-inline-padding) 2.5rem;
}

/* --- Zoeken (mobiel) ------------------------------------------------- */
/* Het veld staat altijd open bovenaan het paneel; een loepje dat het eerst
   moet openklappen voegt daar niets toe. */
.rw-header.is-compact .rw-header__search {
    display: block;
    margin: 0 0 2rem;
}

.rw-header.is-compact .rw-header__search-toggle {
    display: none;
}

.rw-header.is-compact .rw-header__search-form {
    max-width: none;
    padding: 0.875rem 1rem;
    border-color: var(--rw-header-search-border-color);
    background-color: var(--rw-header-search-field-bg);
    opacity: 1;
    visibility: visible;
}

.rw-header.is-compact .rw-header__search-input {
    font-size: 1rem;
}

/* --- Menu-items als rijen met scheidingslijn ------------------------- */
.rw-header.is-compact .rw-header__menu {
    display: block;
    margin: 0 0 2rem;
}

.rw-header.is-compact .rw-header__item {
    position: static; /* het submenu wordt t.o.v. de drawer gepositioneerd */
    border-bottom: 1px solid var(--rw-header-drawer-divider);
}

.rw-header.is-compact .rw-header__row {
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.rw-header.is-compact .rw-header__drawer .rw-header__link {
    flex: 1 1 auto;
    padding: 1.125rem 0;
    color: var(--rw-header-drawer-link-color);
    font-size: 1.375rem;
    font-weight: 400;
    white-space: normal;
}

.rw-header.is-compact .rw-header__drawer .rw-header__link:hover,
.rw-header.is-compact .rw-header__drawer .rw-header__link:focus-visible {
    opacity: 1;
}

.rw-header.is-compact .rw-header__toggle {
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.5rem;
}

.rw-header.is-compact .rw-header__icon {
    width: 1.375rem;
    height: 1.375rem;
}

/* Op mobiel krijgt élke regel dezelfde pijl naar rechts — ook items zonder
   submenu, zodat de rijen er gelijk uitzien zoals in het ontwerp. */
.rw-header.is-compact .rw-header__toggle--static {
    display: inline-flex;
}

.rw-header.is-compact .rw-header__icon--arrow {
    display: block;
}

.rw-header.is-compact .rw-header__icon--chevron {
    display: none;
}

/* --- Submenu als paneel dat inschuift -------------------------------- */
.rw-header.is-compact .rw-header__submenu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    min-width: 0;
    margin: 0;
    padding: 1.5rem var(--rw-header-inline-padding) 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0;
    background-color: var(--rw-header-drawer-bg);
    box-shadow: none;

    opacity: 1;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.3s ease, visibility 0.3s;
}

/* Hover mag op mobiel niets openen — een tik blijft op touch als hover
   hangen. Alleen de knop opent het paneel. */
.rw-header.is-compact .rw-header__item--has-children:hover > .rw-header__submenu {
    visibility: hidden;
    transform: translateX(100%);
}

.rw-header.is-compact .rw-header__submenu.is-open,
.rw-header.is-compact .rw-header__item--has-children:hover > .rw-header__submenu.is-open {
    visibility: visible;
    transform: translateX(0);
}

.rw-header.is-compact .rw-header__submenu .rw-header__link {
    padding: 1.125rem 0;
    background: none;
    color: var(--rw-header-drawer-link-color);
}

.rw-header.is-compact .rw-header__submenu .rw-header__link:hover,
.rw-header.is-compact .rw-header__submenu .rw-header__link:focus-visible {
    background: none;
}

/* Diepere niveaus schuiven ook van rechts in, niet naar opzij. */
.rw-header.is-compact .rw-header__submenu .rw-header__submenu {
    top: 0;
    left: 0;
}

/* --- Terug-knop ------------------------------------------------------ */
.rw-header.is-compact .rw-header__back-item {
    display: block;
    border-bottom: 1px solid var(--rw-header-drawer-divider);
}

.rw-header.is-compact .rw-header__back {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 1.125rem 0;
    border: 0;
    background: none;
    color: var(--rw-header-drawer-link-color);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    opacity: 0.8;
}

/* --- Contactgegevens ------------------------------------------------- */
.rw-header.is-compact .rw-header__contact {
    display: block;
    margin: 0 0 2rem;
}

.rw-header.is-compact .rw-header__contact-item + .rw-header__contact-item {
    margin-top: 1.125rem;
}

.rw-header.is-compact .rw-header__contact-link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: var(--rw-header-contact-color);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
}

.rw-header.is-compact .rw-header__contact-icon {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--rw-header-contact-icon-color);
}

/* --- Acties onderin -------------------------------------------------- */
.rw-header.is-compact .rw-header__actions {
    display: block;
}

.rw-header.is-compact .rw-header__lang {
    margin-bottom: 1.75rem;
    font-size: 1rem;
}

.rw-header.is-compact .rw-header__cta {
    display: flex;
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1rem;
}

/* Als het menu openstaat mag de pagina eronder niet meescrollen. */
body.rw-header-open {
    overflow: hidden;
}

/* --- Beperkte beweging --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .rw-header__drawer,
    .rw-header .rw-header__search-form,
    .rw-header .rw-header__submenu,
    .rw-header__burger-line,
    .rw-header .rw-header__link,
    .rw-header .rw-header__cta {
        transition-duration: 0.01ms !important;
    }

    /* De balk klapt dan meteen vast, zonder het inschuiven van bovenaf. */
    .rw-header--sticky.is-stuck .rw-header__bar {
        animation: none;
    }
}

/* =========================================================================
   Kennismaken CTA (beeld + tekst)
   - Twee gelijke kolommen van 50%: beeld (cover, vult de volle hoogte) naast
     een donker tekstpaneel met titel en twee buttons.
   - De sectie heeft een vaste hoogte, dus de rijhoogte hangt niet van de
     hoeveelheid tekst af.
   - Alle maten komen uit CSS-variabelen die de Elementor-controls zetten
     (zie kennismaken-cta.php).
   - Onder 768px staan beeld en tekst onder elkaar.
   ========================================================================= */

.rw-cta {
    /* Overschrijfbaar via de Elementor-controls. */
    --rw-cta-bg: var(--dark-grey, #131931);
    --rw-cta-title-color: #fff;
    --rw-cta-text-color: var(--S---Light-grey-4, #F7F8F8);
    --rw-cta-height: 540px;
    --rw-cta-media-mobile-height: 18rem;
    --rw-cta-title-width: 28rem;
    --rw-cta-text-width: 24rem;
    --rw-cta-content-justify: center;
    --rw-cta-content-gap: 2.5rem;
    --rw-cta-actions-gap: 1rem;

    position: relative;
    display: grid;
    /* 50% + 1fr = twee exact even brede kolommen. */
    grid-template-columns: 50% 1fr;
    align-items: stretch;
    width: 100%;
    height: var(--rw-cta-height);
    overflow: hidden;
    isolation: isolate;
    background-color: var(--rw-cta-bg);
}

/* Beeld rechts: kolombreedtes omdraaien en het beeld achter het paneel
   plaatsen in de bronvolgorde-onafhankelijke grid-order. */
.rw-cta--media-right {
    grid-template-columns: 1fr 50%;
}

.rw-cta--media-right .rw-cta__media {
    order: 2;
}

/* Zonder beeld vult het paneel de hele sectie. */
.rw-cta--no-media {
    grid-template-columns: 1fr;
}

/* De container is horizontaal gecentreerd; (50% - 50vw) is negatief en trekt
   beide randen door tot de viewport-rand. Staat de sectie al op volledige
   breedte, dan is de waarde 0 en verandert er niets. */
.rw-cta--bleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* --- Beeldkolom --------------------------------------------------------- */
/* Het beeld staat absoluut, zodat het nooit de rijhoogte bepaalt: de kolom
   vult simpelweg de vaste hoogte van de sectie. */
.rw-cta__media {
    position: relative;
    overflow: hidden;
    min-height: 100%;
}

.rw-cta .rw-cta__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100% !important; /* verslaat de globale img { height: auto } */
    object-fit: cover;
    /* Bovenkant blijft standaard zichtbaar; bijsnijden gebeurt aan de
       onderkant. Per widget te overrulen met "Uitsnede van het beeld". */
    object-position: center top;
}

/* --- Tekstpaneel -------------------------------------------------------- */
.rw-cta__panel {
    display: flex;
    align-items: center;
    justify-content: var(--rw-cta-content-justify);
    box-sizing: border-box;
    min-width: 0;
    padding: 5rem 3rem;
    background-color: var(--rw-cta-bg);
}

/* De max-breedtes zitten op de titel en de tekst zelf (zie onder), niet op dit
   blok: zo houdt de buttonrij haar eigen breedte en blijven de buttons naast
   elkaar staan. fit-content laat het blok krimpen tot z'n breedste kind, zodat
   het als geheel gecentreerd kan worden in het paneel. */
.rw-cta__content {
    display: flex;
    flex-direction: column;
    gap: var(--rw-cta-content-gap);
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
}

/* --- Titel -------------------------------------------------------------- */
.rw-cta__title,
.rw-cta .rw-cta__title span,
.rw-cta .rw-cta__title em,
.rw-cta .rw-cta__title i,
.rw-cta .rw-cta__title strong,
.rw-cta .rw-cta__title b {
    color: var(--rw-cta-title-color) !important; /* overschrijft de heading-kleur van thema/Elementor */
}

.rw-cta__title {
    margin: 0;
    max-width: var(--rw-cta-title-width);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-weight: 300; /* Klavika Light */
    font-size: clamp(1.75rem, 2.6vw, 2.75rem);
    line-height: 1.2;
}

/* Accentregel: het thema zet h_ span al op display:block met een linkermarge —
   die marge hier weghalen zodat de regel netjes onder de eerste uitlijnt. */
.rw-cta .rw-cta__title span {
    display: block;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

/* Accentwoorden binnen een regel blijven inline staan. */
.rw-cta .rw-cta__title em,
.rw-cta .rw-cta__title i {
    display: inline;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

/* --- Tekst -------------------------------------------------------------- */
.rw-cta .rw-cta__text {
    margin: 0;
    max-width: var(--rw-cta-text-width);
    color: var(--rw-cta-text-color);
    font-family: var(--primary-font, "Klavika Basic", "Klavika", sans-serif);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.0225rem;
}

/* --- Buttons ------------------------------------------------------------ */
.rw-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rw-cta-actions-gap);
}

.rw-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: filter 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Overal ook :visited meenemen. Een pop-upbutton linkt naar een fragment
   (#elementor-action:…), dus zodra hij één keer geopend is telt de browser hem
   als bezocht — en dan wint het a:visited van het thema (0,1,1) van een losse
   class (0,1,0) en wordt de tekst donker. */
.rw-cta__button--primary,
.rw-cta__button--primary:visited {
    border-color: #c142a2;
    background: linear-gradient(61deg, #a52a87 13.96%, #c14da5 86.04%);
    color: #fff;
}

.rw-cta__button--primary:hover,
.rw-cta__button--primary:focus-visible {
    filter: brightness(0.92);
    color: #fff;
}

/* Standaard: transparant met witte rand. */
.rw-cta__button--secondary,
.rw-cta__button--secondary:visited {
    border-color: rgba(255, 255, 255, 0.65);
    background: transparent;
    color: #fff;
}

.rw-cta__button--secondary:hover,
.rw-cta__button--secondary:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Variant: licht gevuld, zoals de secundaire button in de hero. */
.rw-cta--secondary-light .rw-cta__button--secondary,
.rw-cta--secondary-light .rw-cta__button--secondary:visited {
    border-color: var(--S---Mid-purple-4, #E1DBE1);
    background: var(--S---Mid-purple-4, #E1DBE1);
    color: var(--primary-color, #1C2945);
}

.rw-cta--secondary-light .rw-cta__button--secondary:hover,
.rw-cta--secondary-light .rw-cta__button--secondary:focus-visible {
    filter: brightness(0.96);
    background: var(--S---Mid-purple-4, #E1DBE1);
    color: var(--primary-color, #1C2945);
}

.rw-cta__button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
    .rw-cta {
        --rw-cta-content-gap: 2rem;
    }

    .rw-cta__panel {
        padding: 4rem 2.5rem;
    }
}

@media (max-width: 767px) {
    /* Onder elkaar: de vaste hoogte vervalt, de sectie groeit mee met beeld
       en tekst. */
    .rw-cta {
        grid-template-columns: 1fr;
        height: auto;
    }

    /* Beeld altijd bovenaan, ook in de variant met het beeld rechts. */
    .rw-cta--media-right .rw-cta__media {
        order: 0;
    }

    .rw-cta__media {
        min-height: var(--rw-cta-media-mobile-height);
    }

    .rw-cta__panel {
        padding: 3rem 1.5rem;
        justify-content: flex-start;
    }

    /* Volle breedte: de buttons gaan onder elkaar en moeten het paneel vullen. */
    .rw-cta__content {
        width: 100%;
    }

    .rw-cta__title,
    .rw-cta .rw-cta__text {
        max-width: none;
    }

    .rw-cta__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .rw-cta__button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rw-cta__button {
        transition: none;
    }
}

/* =========================================================================
   Kernwaarden (titel + kaarten)
   - Titel en kaarten zitten in hetzelfde grid: de titel is simpelweg het
     eerste item. Daardoor staat hij op desktop als eerste kolom naast de
     kaarten, en schuift hij op mobiel mee in het tweekolomsgrid met de
     eerste kaart ernaast.
   - Het component levert alleen het grid en de kaarten: geen achtergrond,
     geen buitenmarge, geen max. breedte. Dat regel je in Elementor zelf.
   - Het aantal kolommen komt uit de Elementor-control, die de volledige
     grid-tracks in --rw-values-columns zet. "Automatisch" vult daar auto-fit
     met de minimale kolombreedte in.
   ========================================================================= */

.rw-values {
    /* Overschrijfbaar via de Elementor-controls (zie kernwaarden-cards.php). */
    --rw-values-columns: repeat(auto-fit, minmax(var(--rw-values-column-min), 1fr));
    --rw-values-column-min: 14rem;
    --rw-values-column-gap: 1rem;
    --rw-values-row-gap: 1rem;
    --rw-values-align: stretch;

    --rw-values-title-color: #fff;
    --rw-values-title-size: 3rem;
    --rw-values-title-space-right: 2.5rem;

    --rw-values-card-bg: rgba(255, 255, 255, 0.02);
    --rw-values-card-border: rgba(255, 255, 255, 0.14);
    --rw-values-card-border-width: 1px;
    --rw-values-card-radius: 8px;
    --rw-values-card-padding: 1.5rem;
    --rw-values-card-gap: 1rem;
    --rw-values-card-title-color: #fff;
    --rw-values-card-title-size: 1.125rem;
    --rw-values-card-text-color: var(--S---Light-grey-4, #F7F8F8);
    --rw-values-card-text-size: 0.9375rem;

    --rw-values-marker-color: #B71A91;
    --rw-values-marker-width: 1.375rem;

    display: grid;
    grid-template-columns: var(--rw-values-columns);
    align-items: var(--rw-values-align);
    column-gap: var(--rw-values-column-gap);
    row-gap: var(--rw-values-row-gap);
}

/* --- Titel --------------------------------------------------------------- */
/* De titel is een gewoon gridvakje: geen rand, geen achtergrond, en geen
   binnenmarge zodat de bovenkant uitlijnt met de bovenrand van de kaarten. */
.rw-values__title,
.rw-values .rw-values__title span,
.rw-values .rw-values__title em,
.rw-values .rw-values__title i,
.rw-values .rw-values__title strong,
.rw-values .rw-values__title b {
    color: var(--rw-values-title-color) !important; /* overschrijft de heading-kleur van thema/Elementor */
}

.rw-values .rw-values__title {
    margin: 0;
    min-width: 0;
    box-sizing: border-box;
    padding-right: var(--rw-values-title-space-right);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-weight: 300; /* Klavika Light */
    font-size: var(--rw-values-title-size);
    line-height: 1.15;
    overflow-wrap: break-word; /* smalle kolommen: liever afbreken dan overlopen */
}

/* Accentregel: het thema zet elke <span> in een heading op display:block met
   margin-left:60px (themes/refreshworks/assets/css/global.css) — die marge hier
   weghalen zodat de regel netjes onder de eerste uitlijnt. */
.rw-values .rw-values__title span {
    display: block;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

/* Accentwoorden binnen een regel blijven inline staan. */
.rw-values .rw-values__title em,
.rw-values .rw-values__title i {
    display: inline;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

/* --- Kaart --------------------------------------------------------------- */
.rw-values__card {
    display: flex;
    flex-direction: column;
    gap: var(--rw-values-card-gap);
    min-width: 0;
    box-sizing: border-box;
    padding: var(--rw-values-card-padding);
    border: var(--rw-values-card-border-width) solid var(--rw-values-card-border);
    border-radius: var(--rw-values-card-radius);
    background-color: var(--rw-values-card-bg);
}

.rw-values .rw-values__card-title,
.rw-values .rw-values__card-title-text {
    color: var(--rw-values-card-title-color) !important;
}

.rw-values .rw-values__card-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    min-width: 0;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: var(--rw-values-card-title-size);
    font-weight: 400;
    line-height: 1.2;
}

/* Dezelfde themaregel als hierboven raakt ook de spans in de kaarttitel: die
   zouden er 60px linkermarge en het serif-accentfont bij krijgen. In een smalle
   kolom duwt dat de titel buiten de kaart. Hier dus voor beide spans terug naar
   nul; de tekst-span erft daarnaast weer de typografie van de kaarttitel. */
.rw-values .rw-values__card-title span {
    margin: 0;
}

.rw-values .rw-values__card-title-text {
    display: inline;
    min-width: 0;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    overflow-wrap: break-word;
}

/* Het magenta vlaggetje: vaste breedte, hoogte volgt de verhouding van de SVG. */
.rw-values .rw-values__marker {
    display: block;
    flex: 0 0 auto;
    width: var(--rw-values-marker-width);
    line-height: 0;
    color: var(--rw-values-marker-color);
}

.rw-values .rw-values__marker svg {
    display: block;
    width: 100%;
    height: auto;
}

.rw-values .rw-values__card-text {
    margin: 0;
    color: var(--rw-values-card-text-color);
    font-family: var(--primary-font, "Klavika Basic", "Klavika", sans-serif);
    font-size: var(--rw-values-card-text-size);
    font-weight: 400;
    line-height: 135%;
    letter-spacing: 0.0225rem;
    overflow-wrap: break-word;
}

/* --- Responsive ---------------------------------------------------------- */
/* Op mobiel staat het grid standaard op 2 kolommen (zie de control): de titel
   vult het eerste vakje en de eerste kaart staat ernaast, de rest volgt op de
   rijen daaronder. */
@media (max-width: 767px) {
    .rw-values {
        --rw-values-card-padding: 1.25rem;
        --rw-values-title-size: 1.875rem;
        --rw-values-title-space-right: 0rem; /* daar is de kolom te smal voor */
    }
}

/* =========================================================================
   Koptekst
   - Als de standaard Koptekst-widget, maar met een WYSIWYG-veld: cursieve
     woorden (<em>/<i>) krijgen het serif-accentfont, net als in de Hero en
     de sliders.
   ========================================================================= */

.rw-heading {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: start;
}

/* Twee classes: de kit schrijft per heading-tag regels uit met de tag in de
   selector (0,1,1) — een enkele class zou daarvan verliezen. De Elementor-
   controls staan met {{WRAPPER}} ervoor op (0,3,0) en winnen hier weer van. */
.rw-heading .rw-heading__title {
    margin: 0;
    padding: 0;
    max-width: 100%;
    font-family: var(--primary-font, "Klavika", sans-serif);
}

/* Accentwoorden: serif-italic, maar inline houden (thema forceert h_ span
   soms naar display:block met marge — hier terugdraaien). */
.rw-heading .rw-heading__title em,
.rw-heading .rw-heading__title i {
    display: inline;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

/* Overige inline-opmaak uit de WYSIWYG houdt zijn eigen stijl, maar mag niet
   op een eigen regel belanden. */
.rw-heading .rw-heading__title span,
.rw-heading .rw-heading__title strong,
.rw-heading .rw-heading__title b,
.rw-heading .rw-heading__title mark,
.rw-heading .rw-heading__title u {
    display: inline;
    margin: 0;
}

.rw-heading .rw-heading__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Logo Marquee widget
   Seamless, CSS-only infinite scroll. The logo set is rendered twice inside
   .rw-marquee__track; the track animates to translateX(-50%), which lands
   exactly on the second (duplicate) copy for a gapless loop. */

.rw-marquee {
    /* Overridable via Elementor controls (see marquee.php selectors). */
    --rw-marquee-logo-height: 3rem;
    --rw-marquee-gap: 4rem;
    --rw-marquee-fade-color: #ffffff;
    --rw-marquee-fade-width: 120px;
    /* How many logos fit across the visible area (equal-width slots). */
    --rw-marquee-visible: 9;
    /* Fixed, restful default speed. Tweak here if needed. */
    --rw-marquee-duration: 40s;

    position: relative;
    overflow: hidden;
    width: 100%;
    /* Establishes the reference width for the cqw slot calculation below. */
    container-type: inline-size;
}

/* Fade-out gradients at both ends, in the chosen colour. */
.rw-marquee::before,
.rw-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--rw-marquee-fade-width);
    z-index: 2;
    pointer-events: none;
}

.rw-marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--rw-marquee-fade-color), transparent);
}

.rw-marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--rw-marquee-fade-color), transparent);
}

.rw-marquee__track {
    display: flex;
    width: max-content;
    animation: rw-marquee-scroll var(--rw-marquee-duration) linear infinite;
    will-change: transform;
}

/* Pause on hover so visitors can read a logo. */
.rw-marquee:hover .rw-marquee__track {
    animation-play-state: paused;
}

.rw-marquee__group {
    display: flex;
    align-items: center;
    gap: var(--rw-marquee-gap);
    /* Trailing gap so the seam between the two copies keeps even spacing. */
    padding-right: var(--rw-marquee-gap);
    margin: 0;
    padding-left: 0;
    list-style: none;
    flex: 0 0 auto;
}

.rw-marquee__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--rw-marquee-logo-height);
    /* Equal-width slots so exactly --rw-marquee-visible logos fit across.
       Each slot + its gap = 100cqw / visible, so `visible` cells span the
       full container width. */
    width: calc(100cqw / var(--rw-marquee-visible) - var(--rw-marquee-gap));
}

.rw-marquee__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

@keyframes rw-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Respect users who prefer reduced motion: stop the animation and let the
   logos sit still (scrollable if they overflow). */
@media (prefers-reduced-motion: reduce) {
    .rw-marquee__track {
        animation: none;
        width: 100%;
        overflow-x: auto;
    }

    /* The duplicate copy is redundant when static; hide it. */
    .rw-marquee__group[aria-hidden="true"] {
        display: none;
    }
}

.news-grid-wrapper {
    margin-bottom: 20px;
}

.news-grid-header {
    margin-bottom: 50px;
    text-align: left;
}

.news-grid-category {
    font-size: 32px;
    line-height: 120%;
    font-weight: 400;
    color: var(--primary-color);
    font-family: "Klavika", Sans-serif;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4 columns */
    gap: 50px 20px; /* Space between grid items */
}

.news-grid-item .news-image {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
}

.news-grid-item .news-image img {
    height: 330px;
    object-fit: cover;
    width: 100%;
    border-radius: 8px;
    display: block; /* Remove any default inline spacing */
}

.news-grid-item .news-title {
    font-size: 18px;
    font-weight: 400;
    color: var(--primary-color);
    font-family: "Klavika", Sans-serif;
    margin: 0;
}

.news-grid-item .news-title a {
    color: inherit;
    text-decoration: none;
}

.news-grid-item .news-title a:hover {
    color: var(--magenta-color);
}

.news-grid-item .news-image .news-date {
    position: absolute;
    bottom: 24px;
    left: 16px;
    color: var(--light-grey-color);
    font-family: "Klavika", Sans-serif;
    font-size: 18px;
    line-height: 120%;
    margin-left: 30px;
    font-weight: 400;
    z-index: 2; /* Ensure the date appears above the gradient */
}

.news-grid-item .news-image .news-date::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 45%;
    width: 20px;
    height: 20px;
    background-image: url('https://hogenhouck.nl/wp-content/uploads/2024/11/date-icon.svg');
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateY(-50%);
}

@media (max-width: 1024px) {
    .news-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }
}

@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
}

@media (max-width: 480px) {
    .news-grid {
        grid-template-columns: 1fr; /* 1 column */
    }
}

@media (min-width: 1024px) {
    /* .news-carousel.slick-initialized {
        display: flex;
        align-items: flex-start;
    }
    .news-carousel.slick-initialized .slick-list.draggable .slick-track {
        width: 100% !important;
    }
    .news-carousel.slick-initialized .slick-slide {
        min-width: 452px;
    } */
}

.news-carousel.slick-initialized .slick-slide {
    margin-right: 40px;
}

.news-carousel.slick-initialized .slick-slide:last-child {
    margin-right: 0;
}

.news-carousel .news-item .news-image {
    position: relative;
    border-radius: 8px;
    margin-bottom: 30px;
    overflow: hidden; /* Ensure child elements don't overflow the container */
}

.news-carousel .news-item .news-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1; /* Place the gradient above the image */
    pointer-events: none; /* Allow interactions with underlying elements */
    border-radius: inherit; /* Match the border radius of the container */
}

.news-carousel .news-item .news-image img {
    height: 330px;
    object-fit: cover;
    width: 100%;
    border-radius: 8px;
    display: block; /* Remove any default inline spacing */
}

#rapporten .news-carousel .news-item .news-image img {
    object-fit: contain;
    background-color: var(--primary-color);
}

.news-carousel .news-item .news-image .news-date {
    position: absolute;
    bottom: 24px;
    left: 16px;
    color: var(--light-grey-color);
    font-family: "Klavika", Sans-serif;
    font-size: 18px;
    line-height: 120%;
    margin-left: 30px;
    font-weight: 400;
    z-index: 2; /* Ensure the date appears above the gradient */
}

.news-carousel .news-item .news-image .news-date::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 45%;
    width: 20px;
    height: 20px;
    background-image: url('https://hogenhouck.nl/wp-content/uploads/2024/11/date-icon.svg');
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateY(-50%);
}

.news-carousel .news-item .news-title {
    font-size: 24px;
    line-height: 120%;
    font-weight: 400;
    color: var(--primary-color);
    font-family: "Klavika", Sans-serif;
}

.news-carousel .news-item .news-title a {
    color: inherit;
}

.news-carousel .news-item .news-title a:hover {
    color: var(--magenta-color)
}

.news-carousel-wrapper {
    margin-bottom: 20px;
}

.news-carousel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    max-width: 1400px;
}

.news-carousel-category {
    font-size: 32px;
    line-height: 120%;
    font-weight: 400;
    color: var(--primary-color);
    font-family: "Klavika", Sans-serif;
}

.news-carousel-controls {
    display: flex;
    gap: 40px;
}

.news-carousel-controls button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.news-carousel-controls button:hover,
.news-carousel-controls button:focus {
    background: none;
}

.news-carousel-controls button img {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease-in-out;
}

.news-carousel-controls button:hover img {
    transform: scale(1.4);
}

/* Hide Slick's default arrows */
.news-carousel.slick-initialized.slick-slider .slick-prev.slick-arrow,
.news-carousel.slick-initialized.slick-slider .slick-next.slick-arrow {
    display: none !important;
}

@media (max-width: 768px) {
    .news-carousel.slick-initialized .slick-slide {
        margin-right: 0;
    }
    .news-carousel-header {
        margin-bottom: 30px;
    }
}
/* =========================================================================
   Ondernemersverhalen
   - Kop links, link rechts.
   - Daaronder een grid met de laatste verhalen (standaard 4 kolommen).
   - Card: beeld met label + naam erover, onderaan het logo en een pijlknop.
     De hele card is één link naar het verhaal.
   ========================================================================= */

.rw-vstories {
    /* De -fallback-varianten gelden zolang Elementor de eigen waarden nog niet
       heeft weggeschreven (bijv. bij een pagina die na de update nog niet
       opnieuw is opgeslagen). Zodra de widget-instellingen wél in de
       Elementor-CSS staan, winnen die. */
    --rw-vstories-columns-fallback: 4;
    --rw-vstories-card-height: 29rem;
    --rw-vstories-gap: 24px;
    --rw-vstories-radius: 0.5rem;
    --rw-vstories-inner-radius: 0.375rem;
    --rw-vstories-foot-padding: 0.75rem;
    --rw-vstories-pad-left: 0.75rem;   /* linkerlijn van label, naam en logovak */
    --rw-vstories-pad-right: 0.75rem;
    --rw-vstories-logo-height: 22px;
    --rw-vstories-slide-width: 82%; /* cardbreedte in de mobiele slider */
    --rw-vstories-primary: var(--primary-color, #1C2945);
    --rw-vstories-card-bg: var(--rw-vstories-primary);
    --rw-vstories-magenta: #A52A87;

    position: relative;
    color: var(--rw-vstories-primary);
}

/* --- Kop ---------------------------------------------------------------- */
.rw-vstories__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 5rem;
}

.rw-vstories__title {
    margin: 0;
    max-width: 46rem;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-weight: 300;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.15;
    color: var(--rw-vstories-primary);
}

/* Accentwoorden: serif-italic, maar inline houden (thema forceert h_ span
   soms naar display:block met marge — hier terugdraaien). */
.rw-vstories__title em,
.rw-vstories__title i,
.rw-vstories__title span {
    display: inline;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

.rw-vstories__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--rw-vstories-magenta);
    transition: opacity 0.2s ease;
}

.rw-vstories__more:hover,
.rw-vstories__more:focus-visible {
    opacity: 0.75;
    color: var(--rw-vstories-magenta);
}

.rw-vstories__more-arrow {
    width: 1rem;
    height: auto;
    transition: transform 0.2s ease;
}

.rw-vstories__more:hover .rw-vstories__more-arrow {
    transform: translateX(3px);
}

/* Thema-/Elementor-knopstijlen geven <a> op hover een achtergrond; de links in
   deze widget zijn een tekstlink en een card, dus die overal weghouden. */
.rw-vstories :is(.rw-vstories__card, .rw-vstories__more),
.rw-vstories :is(.rw-vstories__card, .rw-vstories__more):is(:hover, :focus, :focus-visible, :active) {
    box-shadow: none;
    border: 0;
}

.rw-vstories .rw-vstories__more,
.rw-vstories .rw-vstories__more:is(:hover, :focus, :focus-visible, :active) {
    background: transparent !important;
}

/* --- Grid -------------------------------------------------------------- */
.rw-vstories__grid {
    display: grid;
    grid-template-columns: repeat(var(--rw-vstories-columns, var(--rw-vstories-columns-fallback)), minmax(0, 1fr));
    gap: var(--rw-vstories-gap);
}

/* --- Card ---------------------------------------------------------------
   Vaste hoogte; de afbeelding vult de hele card en label, naam, logo en
   pijlknop liggen eroverheen. */
.rw-vstories__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    height: var(--rw-vstories-card-height);
    border-radius: var(--rw-vstories-radius);
    background: var(--rw-vstories-card-bg) !important; /* wint van thema-linkstijlen */
    overflow: hidden; /* houdt de inzoomende afbeelding binnen de ronding */
    text-decoration: none;
    color: #fff;
}

.rw-vstories__card:hover,
.rw-vstories__card:focus-visible {
    color: #fff;
}

.rw-vstories__card:focus-visible {
    outline: 2px solid var(--rw-vstories-magenta);
    outline-offset: 2px;
}

/* Media — vult de hele card, onder de tekst en de onderbalk. */
.rw-vstories__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--rw-vstories-primary);
}

.rw-vstories__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important; /* beat Elementor's global img { height: auto } */
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.rw-vstories__card:hover .rw-vstories__poster,
.rw-vstories__card:focus-visible .rw-vstories__poster {
    transform: scale(1.05);
}

/* Donker verloop onderaan het beeld, zodat label, naam en logo leesbaar blijven.
   Onder 88% is het de volle kaartkleur, dus de onderbalk staat op een egaal vlak. */
.rw-vstories__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(28, 41, 69, 0) 20%,
        rgba(28, 41, 69, 0.55) 52%,
        rgba(28, 41, 69, 0.92) 78%,
        var(--rw-vstories-primary) 88%);
}

/* Label + naam: in de kaartflow, direct boven de onderbalk en op dezelfde
   linkerlijn als het logovak. */
.rw-vstories__caption {
    position: relative;
    z-index: 1;
    padding-left: var(--rw-vstories-pad-left);
    padding-right: var(--rw-vstories-pad-right);
    margin-bottom: 0.625rem;
}

.rw-vstories__label {
    margin: 0 0 0.25rem;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
}

.rw-vstories__name {
    margin: 0;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 1.1875rem;
    font-weight: 400;
    line-height: 1.25;
    color: #fff;

    /* Lange namen netjes afkappen i.p.v. de card uit balans trekken. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* --- Onderbalk: logo + pijlknop ---------------------------------------- */
.rw-vstories__foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    gap: 0.625rem;
    padding: var(--rw-vstories-foot-padding);
}

.rw-vstories__logo,
.rw-vstories__arrow {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    border-radius: var(--rw-vstories-inner-radius);
    background: #fff;
}

.rw-vstories__logo {
    flex: 1 1 auto;
    justify-content: flex-start;
    min-width: 0;
    padding: 0.375rem 0.75rem;
    overflow: hidden;
}

/* Vaste hoogte; de breedte volgt de eigen verhouding van het logobestand.
   max-width is alleen een veiligheidsventiel voor extreem brede logo's. */
.rw-vstories__logo-img {
    width: auto;
    max-width: 100%;
    height: var(--rw-vstories-logo-height) !important; /* wint van de width/height-attributen van WP */
    object-fit: contain;
    object-position: left center;
}

.rw-vstories__arrow {
    flex: 0 0 auto;
    justify-content: center;
    width: 2.625rem;
    transition: background-color 0.2s ease;
}

.rw-vstories__arrow img {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.2s ease;
}

.rw-vstories__card:hover .rw-vstories__arrow img,
.rw-vstories__card:focus-visible .rw-vstories__arrow img {
    transform: translateX(3px);
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
    .rw-vstories {
        --rw-vstories-columns-fallback: 2;
    }
}

@media (max-width: 767px) {
    .rw-vstories {
        --rw-vstories-columns-fallback: 1;
    }

    .rw-vstories__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Slider: de cards staan naast elkaar en je swipet erdoor. Scroll-snap doet
       het werk, dus hier is geen JS voor nodig. De cardbreedte is kleiner dan
       de viewport zodat de volgende card er net naast uitkomt — dat maakt
       zichtbaar dat er meer te zien is. */
    .rw-vstories__grid {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: var(--rw-vstories-slide-width);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        /* Scrollbalk verbergen; de uitpiepende card is de affordance. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .rw-vstories__grid::-webkit-scrollbar {
        display: none;
    }

    .rw-vstories__card {
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rw-vstories__poster,
    .rw-vstories__more-arrow,
    .rw-vstories__arrow,
    .rw-vstories__arrow img {
        transition: none;
    }

    .rw-vstories__card:hover .rw-vstories__poster,
    .rw-vstories__card:focus-visible .rw-vstories__poster {
        transform: none;
    }
}

.sector-accordeon-wrapper {
    display: flex;
    align-items: center;
    gap: 160px;
    justify-content: center;
}

.sector-image-container {
    width: 50%;
    box-sizing: border-box;
}

#sector-image-placeholder {
    width: 100%;
    border-radius: 8px;
    height: 500px;
    object-fit: cover;
}

.sector-list-container {
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
}

.sector-list-container .top-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.sector-list-container .top-wrapper .sector-block-title {
    font-size: 32px;
    line-height: 120%;
    margin: 0;
}

.sector-items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 40px;
}

.sector-items-grid .sector-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 1px solid #E5EBEA;
    padding: 12px;
    border-radius: 8px;
    transition: transform 0.5s ease;
}

.sector-items-grid .sector-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 32px;
}

.sector-items-grid .sector-content .sector-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.sector-items-grid .sector-content .sector-icon img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.sector-items-grid .sector-item:hover .sector-icon img {
    filter: grayscale(0%);
}

.sector-items-grid .sector-item .sector-title {
    font-size: 18px;
    line-height: 120%;
    font-weight: 400;
    color: var(--primary-color);
    margin: 0;
}

.sector-items-grid .sector-item:hover {
    background-color: #F3E6F2;
    border-color: var(--magenta-color);
}

.sector-items-grid .sector-item:hover .sector-title {
    color: var(--magenta-color);
}

@media (max-width: 1024px) {
    .sector-accordeon-wrapper {
        gap: 20px;
        flex-direction: column;
    }

    .sector-accordeon-wrapper .sector-image-container,
    .sector-accordeon-wrapper .sector-list-container {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .sector-image-container {
        display: none;
    }

    #sector-image-placeholder {
        height: auto;
    }

    .sector-list-container .top-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .sector-items-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns */
        gap: 20px;
        /* Adjust spacing between items */
    }

    .sector-items-grid .sector-content .sector-icon {
        flex-shrink: 0;
    }

    .sector-items-grid .sector-content {
        gap: 12px;
    }

    .sector-items-grid .sector-item .sector-title {
        font-size: 14px;
    }
}
.team-category-filters {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 60px;
}

.team-category-filters .team-filter-button {
    background-color: var(--mid-purple-color);
    color: var(--primary-color);
    font-family: var(--primary-font);
    font-size: 20px;
    line-height: 120%;
    padding: 12px 20px;
}

.team-category-filters .team-filter-button:hover,
.team-category-filters .team-filter-button.active {
    background-color: var(--magenta-color);
    color: var(--light-grey-color);
}

.team-archive-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
	justify-content: space-between;
}

.team-archive-grid .team-member {
    flex: 1;
    max-width: 300px;
    box-sizing: border-box;
}

#team-members-content .team-archive-grid .team-member {
    flex: unset;
    width: calc(25% - 20px);
}

.team-archive-grid .team-image {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 16px;
    background-repeat: no-repeat;
}

.team-archive-grid .team-name {
    font-family: "Klavika", Sans-serif;
    font-size: 24px;
    line-height: 120%;
    color: #000;
    margin-bottom: 8px;
}

.team-archive-grid a.team-name-link .team-name:hover {
    color: var(--magenta-color);
}


.team-archive-grid .team-functie {
    font-family: "Klavika", Sans-serif;
    font-size: 18px;
    line-height: 120%;
    color: #000;
}

/* Skeleton Loader for Team Members */
.skeleton-loader {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.skeleton-loader .skeleton-member {
    width: calc(25% - 20px);
    box-sizing: border-box;
    background-color: #d4d4d4;
    /* Slightly darker base color */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

/* Shimmer effect for the image and text areas */
.skeleton-loader .skeleton-image,
.skeleton-loader .skeleton-text {
    background: linear-gradient(90deg,
            #d4d4d4 25%,
            /* Start color */
            #e6e6e6 50%,
            /* Middle highlight color */
            #d4d4d4 75%
            /* End color */
        );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
    /* Slowed down to 2 seconds */
}

.skeleton-loader .skeleton-image {
    width: 100%;
    height: 400px;
    margin-bottom: 16px;
    border-radius: 8px;
}

.skeleton-loader .skeleton-text {
    margin: 8px;
    height: 20px;
    border-radius: 4px;
}

/* Animation to create the shimmer effect */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .skeleton-loader .skeleton-member {
        width: 100%;
    }

    .skeleton-loader .skeleton-image {
        height: 300px;
    }
}

@media (max-width: 1024px) {
    .team-category-filters {
        margin-bottom: 40px;
        display: grid;
        flex-direction: column;
        gap: 20px;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .team-archive-grid {
        gap: 20px;
        /* Reduced gap for smaller screens */
    }

    .team-archive-grid .team-image {
        height: 200px;
        /* Adjusted height for mobile */
    }

    #team-members-content .team-archive-grid .team-member {
        flex: unset;
        width: calc(50% - 20px);
    }
}
.team-carousel.slick-initialized .slick-slide {
    margin-right: 40px;
}

.team-carousel.slick-initialized .slick-slide:last-child {
    margin-right: 0;
}

.team-carousel .team-image {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 16px;
    background-repeat: no-repeat;
}

.team-carousel .team-name {
    font-family: "Klavika", Sans-serif;
    font-size: 24px;
    line-height: 120%;
    color: #000;
    margin-bottom: 8px;
}

.team-carousel a.team-name-link .team-name:hover {
    color: var(--magenta-color);
}

.team-carousel .team-functie {
    font-family: "Klavika", Sans-serif;
    font-size: 18px;
    line-height: 120%;
    color: #000;
}

@media (max-width: 768px) {
    .team-carousel.slick-initialized .slick-slide {
        margin-right: 0px;
    }
}
/* ==========================================================================
   Team Filter widget
   Fully self-contained: the filter controls, the card, and the skeleton loader
   are all styled here with unique classes, so this widget no longer depends on
   team-archive.css and can be restyled without affecting the other team widgets.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Filter controls
   -------------------------------------------------------------------------- */
.team-filter-archive .filter-heading {
    font-family: "Klavika", Sans-serif;
    font-size: 20px;
    line-height: 120%;
    font-weight: 400;
    color: #000000;
    margin-bottom: 10px;
}

.team-filter-archive .team-filter-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 64px;
}

.team-filter-archive .team-filter-select {
    position: relative;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 12px;
    padding: 12px 48px 12px 16px;
    font-family: "Klavika", Sans-serif;
    font-size: 20px;
    line-height: 120%;
    font-weight: 400;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    border-radius: 4px;
    min-width: 220px;
}

.team-filter-archive select#team-filter-functie {
    background-color: var(--mid-purple-color);
    background-image: url('https://hogenhouck.nl/wp-content/plugins/custom-elementor-widgets/assets/icons/chevcon-arrow-down-primary.svg');
    color: var(--primary-color);
}

.team-filter-archive select#team-filter-sector {
    background-color: var(--primary-color);
    background-image: url('https://hogenhouck.nl/wp-content/plugins/custom-elementor-widgets/assets/icons/chevcon-arrow-down-purple.svg');
    color: var(--mid-purple-color);
}

.team-filter-archive button#team-filter-reset {
    margin-left: auto;
    font-family: "Klavika", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    fill: var(--magenta-color);
    color: var(--magenta-color);
    position: relative;
    padding: 0 24px 0 0;
    background-color: unset;
    border: none;
    cursor: pointer;
}

.team-filter-archive button#team-filter-reset::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    transition: transform 0.5s ease;
    background-image: url('https://hogenhouck.nl/wp-content/plugins/custom-elementor-widgets/assets/icons/button-cross-magenta.svg');
    background-size: cover;
}

.team-filter-archive button#team-filter-reset:hover::after {
    transform: translateY(-50%) translateX(5px);
}

/* --------------------------------------------------------------------------
   Grid + cards (unique to this widget)
   -------------------------------------------------------------------------- */
.team-filter-grid-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.team-filter-card {
    width: calc(25% - 15px);
    box-sizing: border-box;
    /* Hover: lift the card up; the transition is what makes it smooth */
    transition: transform 0.3s ease;
    will-change: transform;
}

.team-filter-card__image-link {
    display: block;
    overflow: hidden;         /* keeps the scaled photo inside the rounded frame */
    border-radius: 8px;
    margin-bottom: 16px;
}

/* Selector doubled so it beats Elementor's `.elementor img { height: auto }` */
.team-filter-card .team-filter-card__image {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    transition: transform 0.4s ease;
    will-change: transform;
}

.team-filter-card__name {
    font-family: "Klavika", Sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 120%;
    color: #000;
    margin: 0 0 8px;
    transition: color 0.3s ease;
}

.team-filter-card__name-link {
    color: inherit;
    text-decoration: none;
}

.team-filter-card__functie {
    font-family: "Klavika", Sans-serif;
    font-size: 18px;
    line-height: 120%;
    color: #000;
}

/* Hover effect: card moves up, photo scales to 1.05 */
.team-filter-card:hover {
    transform: translateY(-8px);
}

.team-filter-card:hover .team-filter-card__image {
    transform: scale(1.05);
}

.team-filter-card:hover .team-filter-card__name {
    color: var(--magenta-color);
}

.team-filter-archive .team-filter-empty {
    font-family: "Klavika", Sans-serif;
    font-size: 20px;
    color: #000000;
}

/* --------------------------------------------------------------------------
   Skeleton loader (unique to this widget)
   -------------------------------------------------------------------------- */
.team-filter-skeleton {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.team-filter-skeleton__member {
    width: calc(25% - 15px);
    box-sizing: border-box;
    border-radius: 8px;
    overflow: hidden;
}

.team-filter-skeleton__image,
.team-filter-skeleton__text {
    background: linear-gradient(90deg, #d4d4d4 25%, #e6e6e6 50%, #d4d4d4 75%);
    background-size: 200% 100%;
    animation: team-filter-shimmer 2s infinite;
}

.team-filter-skeleton__image {
    width: 100%;
    height: 400px;
    margin-bottom: 16px;
    border-radius: 8px;
}

.team-filter-skeleton__text {
    margin: 8px;
    height: 20px;
    border-radius: 4px;
}

@keyframes team-filter-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
    .team-filter-card,
    .team-filter-skeleton__member {
        width: calc(33.333% - 14px);
    }
}

@media (max-width: 768px) {
    .team-filter-archive .team-filter-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .team-filter-archive .team-filter-select {
        width: 100%;
    }

    .team-filter-archive button#team-filter-reset {
        margin-left: 0;
        align-self: flex-end;
        margin-top: 10px;
    }

    .team-filter-card,
    .team-filter-skeleton__member {
        width: calc(50% - 10px);
    }

    .team-filter-card .team-filter-card__image,
    .team-filter-skeleton__image {
        height: 300px;
    }
}

/* =========================================================================
   Recente Transacties Slider
   - Kop + slider lijnen links uit met de container; pijlen staan rechts.
   - De slider loopt aan de rechterkant door tot de viewport-rand (bleed).
   - Card: links de twee logo's met de transactiewaarde ertussen, rechts de
     foto met datum, titel en "Lees meer". De actieve slide krijgt een
     magenta rand.
   ========================================================================= */

.rw-trx {
    --rw-trx-card-width: 34rem;
    --rw-trx-card-min-height: 0; /* de hoogte volgt de inhoud; dit is alleen een ondergrens */
    --rw-trx-brands-width: 48%;
    --rw-trx-media-height: 9rem;
    --rw-trx-logo-width: 11rem;
    --rw-trx-logo-height: 4.5rem; /* samen met de breedte het kader waar elk logo in past */
    --rw-trx-card-padding: 1.75rem;
    --rw-trx-content-gap: 1.75rem;
    --rw-trx-body-gap: 6rem; /* verticale ruimte tussen de foto en het tekstblok */
    --rw-trx-radius: 0.75rem;
    --rw-trx-media-radius: 0.25rem;
    --rw-trx-gap: 24px;
    --rw-trx-lift: 1rem; /* hoeveel de actieve/gehoverde card omhoog komt */
    --rw-trx-border: #E7E4EA;
    --rw-trx-muted: #8A8792; /* datum en "Lees meer" in rust */
    --rw-trx-primary: var(--primary-color, #1C2945);
    --rw-trx-magenta: #A52A87;

    position: relative;
    color: var(--rw-trx-primary);
}

/* --- Kop ---------------------------------------------------------------- */
/* Titel en link staan naast elkaar op dezelfde baseline; de pijlen rechts. */
.rw-trx__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    /* De negatieve margin-top van de viewport en de padding-top van de slider
       heffen elkaar op, dus dit is exact de zichtbare ruimte tot de cards. */
    margin-bottom: 5rem;
}

.rw-trx__heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    min-width: 0;
}

/* Twee classes: de kit schrijft per heading-tag regels uit met de tag in de
   selector (0,1,1) — zowel voor h2 als voor h4, die via de Titel-tag-control
   gekozen kan worden. Een enkele class zou daarvan verliezen. */
.rw-trx .rw-trx__title {
    margin: 0;
    color: #09122B;
    font-family: var(--primary-font, "Klavika Basic", "Klavika", sans-serif);
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 2.4rem */
}

/* Accentwoorden: serif-italic, maar inline houden (thema forceert h_ span
   soms naar display:block met marge — hier terugdraaien). */
.rw-trx__title em,
.rw-trx__title i,
.rw-trx__title span {
    display: inline;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

.rw-trx__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--rw-trx-magenta);
    transition: opacity 0.2s ease;
}

.rw-trx__more:hover,
.rw-trx__more:focus-visible {
    opacity: 0.75;
    color: var(--rw-trx-magenta);
}

.rw-trx__more-arrow {
    width: 1rem;
    height: auto;
    transition: transform 0.2s ease;
}

.rw-trx__more:hover .rw-trx__more-arrow {
    transform: translateX(3px);
}

/* --- Navigatie (rechtsboven) ------------------------------------------- */
.rw-trx__nav {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.rw-trx__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--rw-trx-magenta);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

/* Thema-/Elementor-knopstijlen vullen een <button> op elke state met een kleur.
   Deze pijlen zijn alleen een rand met een icoon, dus overal transparant. */
.rw-trx .rw-trx__arrow,
.rw-trx .rw-trx__arrow:is(:hover, :focus, :focus-visible, :active) {
    background: transparent !important;
    box-shadow: none;
}

/* Het icoon is 12×12: alleen de breedte zetten, zodat de verhouding klopt.
   De pijl beweegt niet op hover — alleen de rand reageert. */
.rw-trx__arrow img {
    width: 0.85rem;
    height: auto;
    transform: rotate(var(--rw-trx-arrow-rotate, 0deg));
}

.rw-trx__prev {
    --rw-trx-arrow-rotate: 180deg;
}

/* Hover/focus zonder beweging: alleen de knop zelf dimt iets. */
.rw-trx__arrow:hover,
.rw-trx__arrow:focus-visible {
    opacity: 0.65;
}

.rw-trx__arrow:focus-visible {
    outline: 2px solid var(--rw-trx-magenta);
    outline-offset: 2px;
}

/* --- Viewport: bleed naar rechts --------------------------------------- */
/* De container is horizontaal gecentreerd; (50% - 50vw) is negatief en trekt
   de rechterrand door tot de viewport-rand, terwijl links op de container blijft. */
/* De negatieve margin-top compenseert de padding-top hieronder, die de
   omhoog geschoven card ruimte geeft binnen de overflow:hidden van slick. */
.rw-trx__viewport {
    margin-right: calc(50% - 50vw);
    margin-top: calc(var(--rw-trx-lift) * -1);
}

/* Slick zet zelf overflow:hidden op .slick-list; hier alleen een fallback
   vóór init zodat er geen horizontale scroll ontstaat. */
.rw-trx__slider {
    min-width: 0;
}

.rw-trx .slick-list,
.rw-trx__slider:not(.slick-initialized) {
    padding-top: var(--rw-trx-lift);
}

.rw-trx__slider:not(.slick-initialized) {
    display: flex;
    gap: var(--rw-trx-gap);
    overflow: hidden;
}

.rw-trx__slider:not(.slick-initialized) .rw-trx__card {
    flex: 0 0 var(--rw-trx-card-width);
}

/* --- Card -------------------------------------------------------------- */
/* De hoogte volgt de inhoud. Omdat .slick-track een flexbox is met de
   standaard align-items:stretch, worden alle cards even hoog als de langste.
   Onder .rw-trx genest zodat height:auto wint van slick's eigen
   .slick-slide{height:100%} — bij slick ís de card zelf de slide. */
.rw-trx .rw-trx__card {
    position: relative;
    width: var(--rw-trx-card-width);
    max-width: 92vw;
    height: auto;
    min-height: var(--rw-trx-card-min-height, 0);
    margin-right: var(--rw-trx-gap);
    padding: var(--rw-trx-card-padding);
    box-sizing: border-box;
    border: 1px solid var(--rw-trx-border);
    border-radius: var(--rw-trx-radius);
    background: #fff;
    overflow: hidden;
    transition: border-color 0.25s ease, border-width 0.25s ease, transform 0.25s ease;
}

/* Actieve slide + hover: magenta rand van 2px en 1rem omhoog. De
   descendant-selector dekt beide slick-varianten (card mét en zónder
   wrapper-div rond de slide). */
.rw-trx .slick-current .rw-trx__card,
.rw-trx .rw-trx__card.slick-current,
.rw-trx__card:hover,
.rw-trx__card:focus-within {
    border-color: var(--rw-trx-magenta);
    border-width: 2px;
    transform: translateY(calc(var(--rw-trx-lift) * -1));
}

/* height:100% laat de kolommen (en dus de scheidingslijn) de volle cardhoogte
   vullen: de card is als flex-item van de track uitgerekt naar de langste card,
   waardoor die hoogte definitief is en het percentage oplost. */
.rw-trx__inner {
    display: grid;
    grid-template-columns: var(--rw-trx-brands-width) minmax(0, 1fr);
    height: 100%;
}

/* --- Logokolom (links) ------------------------------------------------- */
/* De logo's en de waarde staan als groep verticaal gecentreerd. */
.rw-trx__brands {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    min-width: 0;
    padding-right: var(--rw-trx-content-gap);
    text-align: center;
}

/* Twee gelijke, meegroeiende vlakken boven en onder de waarde. Daardoor staat
   de waarde exact in het midden van de kolom en elk logo in het midden van de
   ruimte die overblijft. */
.rw-trx__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
}

/* Elk logo krijgt exact hetzelfde kader; object-fit:contain schaalt het bestand
   daarbinnen met behoud van verhouding en centreert het. Twee classes zodat de
   hoogte wint van Elementors .elementor img{height:auto} (0,1,1). Opschalen van
   kleine bestanden is hier verliesvrij: de logo's zijn SVG. */
.rw-trx .rw-trx__logo {
    width: 100%;
    max-width: var(--rw-trx-logo-width);
    height: var(--rw-trx-logo-height);
    object-fit: contain;
}

/* Waarde met een streepje links en rechts: "— 120mlj. transaction —".
   flex:0 0 auto: neemt alleen zijn eigen hoogte, de vlakken eromheen de rest. */
.rw-trx__value {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 0.75rem;
    width: 100%;
    margin: 0 !important; /* zelfde reden als bij .rw-trx__date */
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--rw-trx-magenta);
}

.rw-trx__value::before,
.rw-trx__value::after {
    content: "";
    flex: 0 1 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: 0.65;
}

.rw-trx__value span {
    min-width: 0;
}

/* --- Tekstkolom (rechts) ---------------------------------------------- */
/* Foto bovenaan met een vaste ruimte naar het tekstblok. Omdat de cardhoogte
   vast is, lijnen de tekstblokken onderling automatisch uit. */
.rw-trx__body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--rw-trx-body-gap);
    min-width: 0;
    padding-left: var(--rw-trx-content-gap);
    border-left: 1px solid var(--rw-trx-border);
    overflow: hidden;
}

.rw-trx__media {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: var(--rw-trx-media-height);
    border-radius: var(--rw-trx-media-radius);
    overflow: hidden;
    background: #F3F0F5;
}

.rw-trx__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important; /* beat Elementor's global img { height: auto } */
    object-fit: cover;
    border-radius: var(--rw-trx-media-radius);
    display: block;
}

/* Buitenste blok: datum+titel als groep, met 1rem naar de link. */
.rw-trx__text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Binnenste blok: datum en titel, 0.5rem van elkaar. */
.rw-trx__meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
    overflow: hidden;
}

/* !important omdat Elementor per element een p{margin-block-end}-regel kan
   uitschrijven (instelling "Paragraph Spacing") die van een enkele class wint.
   De ruimte tussen datum en titel komt hier van de gap op .rw-trx__meta. */
.rw-trx__date {
    margin: 0 !important;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.8rem;
    color: var(--rw-trx-muted);
}

/* Twee classes: de Elementor-kit schrijft per heading-tag regels uit met een
   tag in de selector (0,1,1) — een enkele class zou daarvan verliezen. */
.rw-trx .rw-trx__card-title {
    margin: 0;
    color: var(--P---Dark-grey, #131931);
    font-family: var(--primary-font, "Klavika Basic", "Klavika", sans-serif);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 1.8rem */

    /* Afkappen op 3 regels, zodat één lange titel niet alle cards meetrekt. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Rust: tekst én pijl grijs. Het pijltje staat inline in de HTML met
   stroke="currentColor", dus het volgt deze color automatisch. */
.rw-trx__link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.5rem;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rw-trx-muted);
    transition: color 0.25s ease;
}

/* Actieve slide of hover: tekst en pijl magenta. */
.rw-trx .slick-current .rw-trx__card .rw-trx__link,
.rw-trx .rw-trx__card.slick-current .rw-trx__link,
.rw-trx__card:hover .rw-trx__link,
.rw-trx__card:focus-within .rw-trx__link {
    color: var(--rw-trx-magenta);
}

.rw-trx__link-arrow {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.rw-trx__card:hover .rw-trx__link-arrow,
.rw-trx__card:focus-within .rw-trx__link-arrow {
    transform: translateX(3px);
}

/* De hele card is klikbaar. */
.rw-trx__cardlink {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    overflow: hidden;
}

/* Thema-/Elementor-knopstijlen geven <a> en <button> op hover een achtergrond.
   Binnen de card zijn dat tekstlinks en overlays, dus transparant houden.
   Let op: de navigatiepijlen (.rw-trx__arrow) staan hier bewust niet tussen. */
.rw-trx :is(.rw-trx__cardlink, .rw-trx__more),
.rw-trx :is(.rw-trx__cardlink, .rw-trx__more):is(:hover, :focus, :focus-visible, :active) {
    background: transparent !important;
    box-shadow: none;
    border: 0;
}

.rw-trx__cardlink:focus-visible {
    outline: 2px solid var(--rw-trx-magenta);
    outline-offset: -4px;
    text-indent: 0;
    color: transparent;
}

/* --- Slick overrides --------------------------------------------------- */
.rw-trx .slick-track {
    display: flex;
}

/* Slick's .slick-slide{height:100%} uitzetten — maar nooit op de card zelf,
   want die is bij slick de slide en draagt juist de vaste hoogte. De :not()
   dekt dus de variant waarin slick een wrapper-div om de slide zet. */
.rw-trx .slick-slide:not(.rw-trx__card) {
    height: auto;
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 767px) {
    .rw-trx__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    /* Geen pijlen op mobiel: je swipet gewoon door de cards. */
    .rw-trx__nav {
        display: none;
    }

    /* Slider zonder JS, net als bij Ondernemersverhalen: de cards staan naast
       elkaar in een horizontale scroll-container met scroll-snap. Slick wordt op
       deze breedte afgebroken (zie global.js), dus deze regels gelden dan — en
       ook meteen als er helemaal geen JS draait. Zelfde selector als de
       basisregel hierboven, anders wint die van deze. */
    .rw-trx__slider:not(.slick-initialized) {
        gap: 0; /* de ruimte komt van de margin-right op de card zelf */
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        /* Scrollbalk verbergen; de uitpiepende card is de affordance. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .rw-trx__slider:not(.slick-initialized)::-webkit-scrollbar {
        display: none;
    }

    .rw-trx__slider:not(.slick-initialized) .rw-trx__card {
        scroll-snap-align: start;
    }

    .rw-trx__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .rw-trx__brands {
        padding-right: 0;
        padding-bottom: 1.5rem;
    }

    .rw-trx__body {
        padding-left: 0;
        padding-top: 1.5rem;
        border-left: 0;
        border-top: 1px solid var(--rw-trx-border);
        overflow: visible;
    }

    .rw-trx__text,
    .rw-trx__meta {
        overflow: visible;
    }

    /* Zelfde twee classes als de basisregel, anders wint die van deze reset. */
    .rw-trx .rw-trx__card-title {
        display: block;
        overflow: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rw-trx__more-arrow,
    .rw-trx__link-arrow,
    .rw-trx__arrow,
    .rw-trx__card {
        transition: none;
    }
}


.transactions-archive .transactions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 50px;
}

.transactions-archive .transaction-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.transactions-archive .transaction-item {
    background-size: cover;
    position: relative;
    padding: 24px 16px;
    border-radius: 8px;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 50px;
}

.transactions-archive .transaction-item .flex-wrapper {
    display: flex;
    justify-content: space-between;
}

.transactions-archive .transaction-item .flex-wrapper .sales-technology-data,
.transactions-archive .transaction-item .flex-wrapper .transaction-data {
    flex: 1;
    align-self: flex-end;
}

.transactions-archive .transaction-item .flex-wrapper .sales-technology-data p,
.transactions-archive .transaction-item .flex-wrapper .sales-technology-data ul li {
    color: var(--light-grey-color);
    display: block;
    font-family: "Klavika", Sans-serif;
    font-size: 18px;
    line-height: 120%;
    font-weight: 400;
    position: relative;
}

.transactions-archive .transaction-item .flex-wrapper .sales-technology-data ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 0 30px;
}

.transactions-archive .transaction-item .flex-wrapper .transaction-data {
    background-color: #FFFFFF;
    border-radius: 8px;
    min-height: 215px;
    min-width: 200px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    margin-bottom: -48px;
    box-shadow: 0px 10px 64px rgba(0, 0, 0, 0.15);
}

.transactions-archive .transaction-item .flex-wrapper .transaction-data img {
    width: 100%;
    object-fit: contain;
    max-width: 100px;
    height: 50px;
    align-self: center;
}

.transactions-archive .transaction-wrapper h4.transaction-title {
    font-family: "Klavika", Sans-serif;
    font-size: 22px;
    line-height: 120%;
    color: var(--primary-color);
    font-weight: 400;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
}

.transactions-archive .filter-heading {
    font-family: "Klavika", Sans-serif;
    font-size: 20px;
    line-height: 120%;
    font-weight: 400;
    color: #000000;
    margin-bottom: 10px;
}

.transactions-archive .filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* Ensure proper wrapping on smaller screens */
    margin-bottom: 64px;
}

.transactions-archive .filters select {
    margin-right: 20px;
    position: relative;
    cursor: pointer;
    /* Ensures it shows as clickable */
    background-repeat: no-repeat;
    background-position: right 16px center;
    /* Adjust positioning of the arrow */
    background-size: 12px 12px;
    /* Adjust size of the arrow */
    padding: 12px 16px;
    font-family: "Klavika", Sans-serif;
    font-size: 20px;
    line-height: 120%;
    font-weight: 400;
    appearance: none;
    /* Removes default arrow */
    -webkit-appearance: none;
    /* Removes default arrow in WebKit browsers */
    -moz-appearance: none;
    /* Removes default arrow in Mozilla browsers */
    border: none;
    border-radius: 4px;
}

.transactions-archive .filters select#filter-soort-transactie {
    background-color: var(--mid-purple-color);
    background-image: url('https://hogenhouck.nl/wp-content/plugins/custom-elementor-widgets/assets/icons/chevcon-arrow-down-primary.svg');
    /* Path to your custom arrow */
    color: var(--primary-color);
    min-width: 190px;
}

.transactions-archive .filters select#filter-sectoren {
    background-color: var(--primary-color);
    background-image: url('https://hogenhouck.nl/wp-content/plugins/custom-elementor-widgets/assets/icons/chevcon-arrow-down-purple.svg');
    /* Path to your custom arrow */
    color: var(--mid-purple-color);
    min-width: 130px;
}

.transactions-archive .filters button#reset-filters {
    margin-left: auto;
    font-family: "Klavika", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    fill: var(---magenta-color);
    color: var(--magenta-color);
    border-radius: 0px 0px 0px 0px;
    position: relative;
    padding: 0 24px 0 0;
    background-color: unset;
}

.transactions-archive .filters button#reset-filters::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    transition: transform 0.5s ease;
    background-image: url('https://hogenhouck.nl/wp-content/plugins/custom-elementor-widgets/assets/icons/button-cross-magenta.svg');
    /* Updated path */
    background-size: cover;
}

.transactions-archive .filters button#reset-filters:hover {
    color: var(--magenta-color);
}

.transactions-archive .filters button#reset-filters:hover::after {
    transform: translateY(-50%) translateX(5px);
}

.transactions-archive .pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 65px;
}

.transactions-archive .pagination-button {
    color: #9BA4AA;
    padding: 10px;
    cursor: pointer;
    background: unset !important;
    font-size: 16px;
}

.transactions-archive .pagination-button.active,
.transactions-archive .pagination-button:hover {
    color: var(--magenta-color);
}

@media (max-width: 768px) {
    .transactions-archive .transactions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .transactions-archive .filters {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        /* Align items to the left */
    }

    .transactions-archive .filters button#reset-filters {
        align-self: flex-end;
        /* Move the reset button to the end */
        margin-top: 10px;
    }

    .transactions-archive .pagination {
        display: block;
    }
}

@media (max-width: 480px) {
    .transactions-archive .transactions-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
.transactions-slider.slick-initialized .slick-slide {
    margin-right: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.transactions-slider.slick-initialized .slick-slide:last-child {
    margin-right: 0;
}

.transaction-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.transaction-item {
    background-size: cover;
    position: relative;
    padding: 24px 16px;
    border-radius: 8px;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 50px;
}

.transaction-item .flex-wrapper {
    display: flex;
    justify-content: space-between;
}

.transaction-item .flex-wrapper .sales-technology-data,
.transaction-item .flex-wrapper .transaction-data {
    flex: 1;
    align-self: flex-end;
}

.transaction-item .flex-wrapper .sales-technology-data p,
.transaction-item .flex-wrapper .sales-technology-data ul li {
    color: var(--light-grey-color);
    display: block;
    font-family: "Klavika", Sans-serif;
    font-size: 18px;
    line-height: 120%;
    font-weight: 400;
    position: relative;
}

.transaction-item .flex-wrapper .sales-technology-data ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 0 30px
}

.transaction-item .flex-wrapper .sales-technology-data .post-date {
    position: relative;
    margin-left: 30px;
}

.transaction-item .flex-wrapper .sales-technology-data .post-date::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 50%;
    width: 20px;
    height: 20px;
    background-image: url('https://hogenhouck.nl/wp-content/uploads/2024/11/date-icon.svg');
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateY(-50%);
}

/* Set background for koop & verkoop category */
.category-koop::before,
.category-verkoop::before,
.category-funding::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 50%;
    width: 20px;
    height: 20px;
    background-image: url('https://hogenhouck.nl/wp-content/uploads/2024/10/koop-verkoop-category.svg');
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateY(-50%);
}

/* Set background for technology & health-services category */
.category-business-sectoren::before,
.category-engineering::before,
.category-food-agriculture::before,
.category-health-lifestyle::before,
.category-industry::before,
.category-recruitment::before,
.category-retail::before,
.category-staffing::before,
.category-technology::before,
.category-trade::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 50%;
    width: 20px;
    height: 20px;
    background-image: url('https://hogenhouck.nl/wp-content/uploads/2024/10/health-services-technology-category.svg');
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateY(-50%);
}


.transaction-item .flex-wrapper .transaction-data {
    background-color: #ffffff;
    border-radius: 8px;
    min-height: 215px;
    max-width: 200px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: -48px;
}

.transaction-item .flex-wrapper .transaction-data img {
    width: 100%;
    object-fit: contain;
    max-width: 100px;
    height: 50px;
    align-self: center;
}

.transaction-item .flex-wrapper .transaction-data .transaction-divider {
    font-family: "Klavika", Sans-serif;
    font-size: 18px;
    line-height: 120%;
    color: var(--magenta-color);
    font-weight: 400;
    text-align: center;
    position: relative;
    display: inline-block;
}

.transaction-item .flex-wrapper .transaction-data .transaction-divider::before,
.transaction-item .flex-wrapper .transaction-data .transaction-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px;
    height: 2px;
    background-color: var(--magenta-color);
}

.transaction-item .flex-wrapper .transaction-data .transaction-divider::before {
    left: -8px;
}

.transaction-item .flex-wrapper .transaction-data .transaction-divider::after {
    right: -8px;
}

.transaction-item .flex-wrapper .transaction-data .transaction-divider span {
    display: block;
}

.transaction-wrapper a h4.transaction-title {
    font-family: "Klavika", Sans-serif;
    font-size: 22px;
    line-height: 120%;
    color: var(--light-grey-color);
    font-weight: 400;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
}

.transaction-wrapper a:hover h4.transaction-title {
    color: var(--magenta-color);
}

@media (max-width: 768px) {
    .transactions-slider.slick-initialized .slick-slide {
        margin: 0 10px;
    }
}
/* =========================================================================
   Veelgestelde vragen (FAQ)
   - Twee kolommen: tekstblok (titel + intro) naast de uitklapbare vragen.
   - Onder 767px staat het tekstblok boven de vragen — ook in de variant met
     het tekstblok rechts.
   - Alle maten en kleuren komen uit CSS-variabelen die de Elementor-controls
     zetten (zie veelgestelde-vragen.php).
   - Het antwoord animeert met grid-template-rows 0fr -> 1fr: geen vaste
     max-height, dus lange antwoorden worden nooit afgekapt.
   ========================================================================= */

.rw-faq {
    /* Overschrijfbaar via de Elementor-controls. */
    --rw-faq-intro-width: 32%;
    --rw-faq-columns-gap: 5rem;
    --rw-faq-intro-gap: 1.25rem;
    --rw-faq-intro-text-width: 100%;
    --rw-faq-list-width: 43rem;
    --rw-faq-title-color: var(--primary-color, #1C2945);
    --rw-faq-intro-text-color: #8A93A5;
    --rw-faq-item-bg: #FFFFFF;
    --rw-faq-item-radius: 0.25rem;
    --rw-faq-question-color: var(--dark-grey, #131931);
    --rw-faq-question-color-open: var(--magenta-color, #A52A87);
    --rw-faq-question-color-hover: var(--magenta-color, #A52A87);
    --rw-faq-answer-color: #596173;
    --rw-faq-answer-link-color: var(--magenta-color, #A52A87);
    --rw-faq-border-color: #E2E5EA;
    --rw-faq-border-width: 0px; /* geen scheidingslijnen; het ontwerp werkt met witruimte */
    --rw-faq-items-gap: 1.25rem;
    --rw-faq-icon-size: 1.25rem;

    display: grid;
    grid-template-columns: var(--rw-faq-intro-width) 1fr;
    column-gap: var(--rw-faq-columns-gap);
    row-gap: var(--rw-faq-columns-gap);
    align-items: start;
}

/* Tekstblok rechts: kolombreedtes omdraaien en het blok naar achteren zetten.
   De DOM-volgorde blijft intro -> vragen, zodat de leesvolgorde klopt. */
.rw-faq--intro-right {
    grid-template-columns: 1fr var(--rw-faq-intro-width);
}

.rw-faq--intro-right .rw-faq__intro {
    order: 2;
}

/* Zonder titel en introtekst vullen de vragen de volle breedte. */
.rw-faq--no-intro {
    grid-template-columns: 1fr;
}

/* --- Tekstblok ---------------------------------------------------------- */
.rw-faq__intro {
    display: flex;
    flex-direction: column;
    gap: var(--rw-faq-intro-gap);
    min-width: 0;
}

/* Twee classes: de kit schrijft per heading-tag regels uit met de tag in de
   selector (0,1,1) — een enkele class zou daarvan verliezen. */
.rw-faq .rw-faq__title {
    margin: 0;
    padding: 0;
    color: var(--rw-faq-title-color);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-weight: 300; /* Klavika Light */
    font-size: clamp(1.75rem, 2.4vw, 2.5rem);
    line-height: 1.2;
}

/* Accentwoorden: serif-italic, maar inline houden (het thema zet h_ span soms
   naar display:block met een marge — hier terugdraaien). */
.rw-faq .rw-faq__title em,
.rw-faq .rw-faq__title i {
    display: inline;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

.rw-faq .rw-faq__title span,
.rw-faq .rw-faq__title strong,
.rw-faq .rw-faq__title b {
    display: inline;
    margin: 0;
}

.rw-faq .rw-faq__intro-text {
    margin: 0;
    max-width: var(--rw-faq-intro-text-width);
    color: var(--rw-faq-intro-text-color);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 150%;
}

/* --- Vragenlijst -------------------------------------------------------- */
/* De kaartbreedte uit het ontwerp (43rem) als max-width, niet als vaste
   breedte: in een smallere kolom krimpt de lijst dan gewoon mee. */
.rw-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--rw-faq-items-gap);
    min-width: 0;
    max-width: var(--rw-faq-list-width);
}

/* De vraagkaart uit het ontwerp: kolom met 1rem binnenmarge rondom, dicht én open.
   De 0.5rem tussenruimte tussen vraag en antwoord staat hier niet als flex-gap
   maar als padding-top op het antwoord (zie onder): een gap zou ook ruimte
   innemen als de vraag dicht is, en springt bij het openklappen in één keer op
   z'n plek in plaats van mee te animeren.
   Het ontwerp zet de open kaart op align-items: center; dat scheelt hier niets
   omdat vraag en antwoord de volle kaartbreedte vullen. */
.rw-faq__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    gap: 0;
    box-sizing: border-box;
    min-width: 0;
    padding: 1.25rem;
    border-bottom: var(--rw-faq-border-width) solid var(--rw-faq-border-color);
    border-radius: var(--rw-faq-item-radius);
    /* Wit, ook als de vraag open staat: de open kaart krijgt geen eigen kleur. */
    background-color: var(--rw-faq-item-bg);
}

.rw-faq--top-border .rw-faq__item:first-child {
    border-top: var(--rw-faq-border-width) solid var(--rw-faq-border-color);
}

/* De heading eromheen is er alleen voor schermlezers; visueel doet de button
   het werk. De volle breedte is nodig zodat het pijltje rechts uitlijnt — de
   kaart erboven zet align-items op flex-start. */
.rw-faq .rw-faq__heading {
    width: 100%;
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: inherit;
}

.rw-faq .rw-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0; /* de binnenmarge zit op de kaart (.rw-faq__item) */
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--rw-faq-question-color);
    font-family: var(--primary-font, "Klavika Basic", "Klavika", sans-serif);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.0225rem;
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition: color 0.25s ease;
}

.rw-faq .rw-faq__question:hover,
.rw-faq .rw-faq__question:focus-visible {
    background: none;
    color: var(--rw-faq-question-color-hover);
}

/* Ná de hover-regel, zodat een open kaart z'n eigen kleur houdt. */
.rw-faq .rw-faq__item.is-open .rw-faq__question {
    background: none;
    color: var(--rw-faq-question-color-open);
}

.rw-faq .rw-faq__question:focus-visible {
    outline: 2px solid var(--rw-faq-question-color-hover);
    outline-offset: 2px;
}

/* Het thema zet elke span binnen een heading op het Kepler-accentfont, italic,
   weight 500 én margin-left: 60px (zie themes/refreshworks/assets/css/global.css).
   De vraagtekst en het pijltje zitten als span in de heading, dus die erfden dat
   allemaal. Hier terugzetten naar de stijl van de vraag zelf. */
.rw-faq .rw-faq__question-text,
.rw-faq .rw-faq__icon {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.rw-faq .rw-faq__question-text {
    display: block;
    min-width: 0;
}

/* --- Pijltje ------------------------------------------------------------ */
.rw-faq__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--rw-faq-icon-size);
    color: inherit;
    transition: transform 0.3s ease;
}

.rw-faq__icon svg {
    display: block;
    width: 100%;
    height: auto;
}

.rw-faq__item.is-open .rw-faq__icon {
    transform: rotate(180deg);
}

/* --- Antwoord ----------------------------------------------------------- */
/* 0fr -> 1fr laat de rij naar de eigenlijke inhoudshoogte animeren; overflow
   op de binnenlaag doet het clippen. */
.rw-faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    box-sizing: border-box;
    width: 100%;
    transition: grid-template-rows 0.35s ease;
}

.rw-faq__item.is-open > .rw-faq__answer {
    grid-template-rows: 1fr;
}

/* Deze laag clipt en mag daarom GEEN padding of marge hebben: een grid-item in
   een 0fr-rij wordt op hoogte 0 geklemd, maar padding telt wél mee in z'n box.
   Met padding hier hield een dichte kaart 8px dode ruimte onder de vraag, en
   stond de vraagregel dus niet in het midden van de kaart.
   visibility houdt links in een dicht antwoord buiten de tabvolgorde en de
   toegankelijkheidsboom; door de transitie blijft de inhoud tijdens het
   dichtklappen nog zichtbaar. */
.rw-faq__answer-inner {
    overflow: hidden;
    visibility: hidden;
    min-height: 0;
    transition: visibility 0.35s ease;
}

.rw-faq__item.is-open > .rw-faq__answer > .rw-faq__answer-inner {
    visibility: visible;
}

/* De binnenmarge zit hier, binnen de geclipte laag: zo animeert de ruimte
   tussen vraag en antwoord mee en neemt hij niets in als de kaart dicht is. */
.rw-faq__answer-content {
    padding: 0.5rem 0 0 0;
    color: var(--rw-faq-answer-color);
    font-family: var(--primary-font, "Klavika Basic", "Klavika", sans-serif);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

.rw-faq__answer-content > :first-child {
    margin-top: 0;
}

.rw-faq__answer-content > :last-child {
    margin-bottom: 0;
}

.rw-faq__answer-content a {
    color: var(--rw-faq-answer-link-color);
    text-decoration: underline;
}

.rw-faq__answer-content ul,
.rw-faq__answer-content ol {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
    .rw-faq {
        --rw-faq-columns-gap: 3rem;
    }
}

@media (max-width: 767px) {
    /* Onder elkaar: het tekstblok komt boven de vragen, ook als het op desktop
       rechts staat. */
    .rw-faq,
    .rw-faq--intro-right {
        grid-template-columns: 1fr;
    }

    .rw-faq--intro-right .rw-faq__intro {
        order: 0;
    }

    .rw-faq .rw-faq__intro-text {
        max-width: none;
    }

    .rw-faq .rw-faq__question {
        gap: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rw-faq__answer,
    .rw-faq__answer-inner,
    .rw-faq__icon,
    .rw-faq .rw-faq__question {
        transition: none;
    }
}

/* =========================================================================
   Wereldwijd Verbonden (CDI Global)
   - Donkere sectie met een stippenwereldkaart als decoratieve achtergrond.
   - Links de titel met "A member of" + logo, rechts de tekst met de button.
   - De stippenkaart is een SVG-masker: de kleur en dekking komen uit de
     Elementor-controls, zodat de kaart bij elke achtergrondkleur past.
   ========================================================================= */

.rw-world {
    /* Overschrijfbaar via de Elementor-controls (zie wereldwijd-verbonden.php). */
    --rw-world-bg: var(--dark-grey, #131931);
    --rw-world-dot: #2E364B;
    --rw-world-map-opacity: 1;
    --rw-world-map-width: 78%;
    --rw-world-map-right: -6rem;
    --rw-world-map-bottom: -6rem;
    --rw-world-content-width: 1400px;
    --rw-world-inline-padding: 0px;
    --rw-world-block-padding: 16.25rem;
    --rw-world-column-gap: 4rem;
    --rw-world-title-width: 30rem;
    --rw-world-text-width: 24rem;
    --rw-world-text-padding: 0px;
    --rw-world-logo-height: 3rem;
    --rw-world-veil-color: #09122B;
    --rw-world-veil-opacity: 0.85;
    /* De uitloop rekent vanaf de padding-box: heeft het tekstblok een
       binnenmarge, dan komt die er nog bij. */
    --rw-world-veil-spread: 4rem;
    --rw-world-veil-solid: 40%;
    --rw-world-veil-fade: 75%;

    position: relative;
    overflow: hidden;
    isolation: isolate;
    width: 100%;
    background-color: var(--rw-world-bg);
    color: #fff;
}

/* --- Kaartlaag ----------------------------------------------------------- */
/* De kaart hangt rechtsonder in de sectie en loopt standaard 6rem buiten de
   onder- en rechterrand door (overflow: hidden snijdt hem af). Negatieve
   waarden schuiven de kaart dus verder uit beeld. Op mobiel verhuist hij naar
   rechtsboven (zie de responsive-blokken onderaan). */
.rw-world__map {
    position: absolute;
    right: var(--rw-world-map-right);
    bottom: var(--rw-world-map-bottom);
    z-index: 0;
    width: var(--rw-world-map-width);
    opacity: var(--rw-world-map-opacity);
    pointer-events: none;
}

/* Standaardkaart: het SVG-masker vult exact de box, dus de aspect-ratio
   moet gelijk zijn aan die van de SVG (896 x 344) om de stippen vierkant
   te houden. */
.rw-world__map--dots {
    aspect-ratio: 896 / 344;
    background-color: var(--rw-world-dot);
    -webkit-mask: url('https://hogenhouck.nl/wp-content/plugins/custom-elementor-widgets/assets/icons/world-dots.svg') center / 100% 100% no-repeat;
    mask: url('https://hogenhouck.nl/wp-content/plugins/custom-elementor-widgets/assets/icons/world-dots.svg') center / 100% 100% no-repeat;
}

/* Zonder mask-ondersteuning zou hier een gekleurd blok staan; dan liever niets. */
@supports not ((-webkit-mask-image: url('#')) or (mask-image: url('#'))) {
    .rw-world__map--dots {
        display: none;
    }
}

/* Eigen kaart-afbeelding: de hoogte volgt de afbeelding zelf. */
.rw-world .rw-world__map-img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Layout ------------------------------------------------------------- */
.rw-world__inner {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--rw-world-content-width);
    margin: 0 auto;
    padding: var(--rw-world-block-padding) var(--rw-world-inline-padding);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: var(--rw-world-column-gap);
    row-gap: 3rem;
}

.rw-world__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rw-world__col--main {
    gap: 3rem;
}

/* De binnenmarge komt bovenop de max. breedte, zodat de tekst zelf precies zo
   breed blijft als de control "Max. breedte tekst" aangeeft. */
.rw-world__col--aside {
    position: relative;
    gap: 2rem;
    align-items: flex-start;
    box-sizing: border-box;
    padding: var(--rw-world-text-padding);
    max-width: calc(var(--rw-world-text-width) + var(--rw-world-text-padding) * 2);
}

/* Overlay achter het tekstblok: in het midden volledig dekkend en al op 75%
   van de radius uitgefade naar 0%, zodat de stippenkaart achter de tekst
   wegvalt zonder een zichtbare rand. Ligt onder de tekst, boven de kaart. */
.rw-world--veil .rw-world__col--aside::before {
    content: "";
    position: absolute;
    inset: calc(var(--rw-world-veil-spread) * -1);
    z-index: -1;
    background: radial-gradient(
        ellipse at center,
        var(--rw-world-veil-color) 0%,
        var(--rw-world-veil-color) var(--rw-world-veil-solid),
        transparent var(--rw-world-veil-fade)
    );
    opacity: var(--rw-world-veil-opacity);
    pointer-events: none;
}

/* --- Titel -------------------------------------------------------------- */
.rw-world__title,
.rw-world .rw-world__title span,
.rw-world .rw-world__title em,
.rw-world .rw-world__title i,
.rw-world .rw-world__title strong,
.rw-world .rw-world__title b {
    color: #fff !important; /* overschrijft de heading-kleur van thema/Elementor */
}

.rw-world__title {
    margin: 0;
    max-width: var(--rw-world-title-width);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-weight: 300; /* Klavika Light */
    font-size: clamp(1.75rem, 2.8vw, 2.75rem);
    line-height: 1.15;
}

/* Accentregel: het thema zet h_ span al op display:block met een linkermarge —
   die marge hier weghalen zodat de regel netjes onder de eerste uitlijnt. */
.rw-world .rw-world__title span {
    display: block;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

/* Accentwoorden binnen een regel blijven inline staan. */
.rw-world .rw-world__title em,
.rw-world .rw-world__title i {
    display: inline;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

/* --- Lidmaatschap (label + logo) ---------------------------------------- */
.rw-world__member {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.rw-world .rw-world__member-label {
    margin: 0;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.75);
}

.rw-world__logo-link {
    display: inline-flex;
    line-height: 0;
    border-radius: 2px;
    transition: opacity 0.25s ease;
}

.rw-world__logo-link:hover,
.rw-world__logo-link:focus-visible {
    opacity: 0.85;
}

.rw-world .rw-world__logo {
    display: block;
    width: auto;
    height: var(--rw-world-logo-height) !important; /* verslaat img { height: auto } */
    max-width: 100%;
    object-fit: contain;
}

/* --- Tekst + button ----------------------------------------------------- */
/* De breedte komt van de kolom, zodat de overlay eromheen precies past. */
.rw-world .rw-world__text {
    margin: 0;
    color: var(--S---Light-grey-4, #F7F8F8);
    font-family: var(--primary-font, "Klavika Basic", "Klavika", sans-serif);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 1.35rem */
    letter-spacing: 0.0225rem;
}

.rw-world__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    border: 1px solid #c142a2;
    border-radius: 0.25rem;
    background: linear-gradient(61deg, #a52a87 13.96%, #c14da5 86.04%);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    color: #fff;
    transition: filter 0.25s ease;
}

.rw-world__button:hover,
.rw-world__button:focus-visible {
    filter: brightness(0.92);
    color: #fff;
}

.rw-world__button:focus-visible,
.rw-world__logo-link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
    .rw-world {
        --rw-world-block-padding: 10rem;
        --rw-world-column-gap: 3rem;
        --rw-world-map-width: 100%;
    }
}

@media (max-width: 767px) {
    .rw-world {
        --rw-world-block-padding: 4rem;
        --rw-world-inline-padding: 20px;
        --rw-world-map-width: 140%;
        --rw-world-map-mobile-top: -2rem;
        --rw-world-map-mobile-right: -12rem;
    }

    /* Op mobiel hangt de kaart rechtsboven in plaats van rechtsonder, en verder
       naar rechts uit beeld. Dit gaat via de properties zelf en via eigen
       variabelen, niet via --rw-world-map-bottom/-right: die worden door de
       Elementor-controls gezet en wegen zwaarder dan deze regel. */
    .rw-world__map {
        top: var(--rw-world-map-mobile-top);
        right: var(--rw-world-map-mobile-right);
        bottom: auto;
    }

    .rw-world__inner {
        grid-template-columns: 1fr;
    }

    .rw-world__col--main {
        gap: 2rem;
    }

    .rw-world__title,
    .rw-world__col--aside {
        max-width: none;
    }

    .rw-world__button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rw-world__button,
    .rw-world__logo-link {
        transition: none;
    }
}