/* ============================================================================
   KLAAS PUUL - HOMEPAGE SECTIES CSS
   Gebaseerd op Figma design (desktop 1920px)
   Fonts: "sofia-pro" (headings), "acumin-pro" (body)
   Primaire kleur: #0D1C38 (donkerblauw)
   ============================================================================ */

/* ============================================================================
   NATIVE CAROUSEL — basis class voor alle scroll-snap carousels
   Card-breedtes worden per-carousel in eigen CSS gezet.
   ============================================================================ */
.kp-ncarousel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.kp-ncarousel::-webkit-scrollbar { display: none; }
.kp-ncarousel > * {
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* Mobile-only variant: carousel behaviour kicks in alleen onder 1024px.
   Op desktop blijft de element z'n eigen layout (grid/wrap/etc) houden. */
@media (max-width: 1023px) {
    .kp-ncarousel--mobile {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .kp-ncarousel--mobile::-webkit-scrollbar { display: none; }
    .kp-ncarousel--mobile > * {
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}

/* ============================================================================
   KP WYSIWYG (vrije content)
   ============================================================================ */
.kp-wysiwyg { background: #ffffff; }
.kp-wysiwyg__content { max-width: 95rem; margin: 0 auto; }

/* ============================================================================
   GLOBAL: KP Button Styles
   ============================================================================ */

.kp-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease;
    height: 56px;
    box-sizing: border-box;
    width: fit-content;
}
.kp-btn__arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.kp-btn:hover .kp-btn__arrow {
    transform: translateX(4px);
}
/* Primair wit (op donkere achtergrond) */

.kp-btn.btn-primary-white {
    background: #ffffff;
    color: var(--color-primary, #0D1C38);
}
.kp-btn.btn-primary-white:hover {
    background: rgba(255, 255, 255, 0.85);
}
/* Outline wit */

.kp-btn.btn-outline-white {
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
}
.kp-btn.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
}
/* Primair donker (op lichte achtergrond) */

.kp-btn.btn-primary-dark {
    background: var(--color-primary, #0D1C38);
    color: #ffffff;
}
.kp-btn.btn-primary-dark:hover {
    background: var(--color-primary-hover, #091428);
}
/* Outline donker */

.kp-btn.btn-outline-dark {
    background: transparent;
    border: 1px solid var(--color-primary, #0D1C38);
    color: var(--color-primary, #0D1C38);
}
.kp-btn.btn-outline-dark:hover {
    background: rgba(13, 28, 56, 0.05);
}
/* ============================================================================
   1. KP HERO BANNER
   ============================================================================ */

.kp-hero-banner {
    position: relative;
    width: 100%;
}
.kp-hero-banner__bg {
    position: relative;
    width: 100%;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.kp-hero-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1));
    pointer-events: none;
}
.kp-hero-banner__content {
    position: relative;
    z-index: 2;
    padding: 80px 0;
}
.kp-hero-banner__title {
    color: #ffffff;
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 32px;
    line-height: 120%;
    font-weight: 400;
    max-width: 1361px;
    margin-bottom: 40px;
}
.kp-hero-banner__title:last-child {
    margin-bottom: 0;
}
/* Centered hero variant (thank you page, etc.) */
.kp-hero-banner.kp-hero-centered .kp-hero-banner__content {
    padding: 160px 0;
}
.kp-hero-banner.kp-hero-centered .kp-hero-banner__content .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.kp-hero-banner.kp-hero-centered .kp-hero-banner__title {
    text-align: center;
    width: 100%;
}
.kp-hero-banner.kp-hero-centered .kp-hero-banner__description {
    text-align: center;
}
.kp-hero-banner.kp-hero-centered .kp-hero-banner__buttons {
    justify-content: center;
}
.kp-hero-banner__deco-img {
    width: 95px;
    height: auto;
    margin-bottom: 40px;
}
.kp-hero-banner__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    display: none;
}
@media (min-width: 1024px) {
    .kp-hero-banner__deco {
        display: block;
    }
}
.kp-hero-banner__content .inner > *:not(.kp-hero-banner__deco) {
    position: relative;
    z-index: 1;
}
.kp-hero-banner__description {
    color: #ffffff;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 18px;
    line-height: 150%;
    font-weight: 400;
    max-width: 921px;
    margin: 0 0 40px 0;
}
.kp-hero-banner__description:last-child {
    margin-bottom: 0;
}
.kp-hero-banner__usps {
    list-style: none;
    margin: 24px 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kp-hero-banner__usp {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-main, 'acumin-pro', sans-serif);
    font-size: 16px;
    line-height: 150%;
    color: #ffffff;
}
.kp-hero-banner__usp svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.kp-hero-banner__usp span strong,
.kp-hero-banner__usp span b {
    font-weight: 700;
}
.kp-hero-banner__buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Hero search bar — Figma mobile: full width, padding 12px, gap 12px, bg linear-gradient(rgba(235,241,248,0.5)) */
.kp-hero-banner__search {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    background: linear-gradient(to left, rgba(235, 241, 248, 0.5), rgba(235, 241, 248, 0.5)), #ffffff;
    border: 1px solid rgba(13, 28, 56, 0.25);
    box-sizing: border-box;
    margin-top: 24px;
}
@media (min-width: 1024px) {
    .kp-hero-banner__search {
        max-width: 720px;
        margin-top: 32px;
    }
}
.kp-hero-banner__search-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--color-primary, #0D1C38);
}
.kp-hero-banner__search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    color: #000;
    padding: 0;
}
.kp-hero-banner__search-input::placeholder {
    color: rgba(0, 0, 0, 0.6);
}

/* Pagebuilder breadcrumbs — sits inside dark hero area */
.breadcrumbs {
    background: var(--color-primary, #0D1C38);
    padding: 12px 0 0;
    position: relative; z-index: 2;
}
.breadcrumbs .inner {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 14px; line-height: 150%;
    color: #ffffff;
}
.breadcrumbs a { color: #ffffff; text-decoration: underline; }
.breadcrumbs a:hover { text-decoration: none; }
.breadcrumbs .separator {
    font-size: 0;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 8px; vertical-align: middle; width: 6px; height: 14px;
}
.breadcrumbs .separator::after {
    content: ''; display: block; width: 6px; height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='14' viewBox='0 0 6 14' fill='none'%3E%3Cpath d='M0 0C0.018969 1.33921 0.682885 2.85673 1.91208 4.08781C3.14127 5.3189 4.66069 5.98091 5.9999 5.99988L0 0Z' fill='white'/%3E%3Cpath d='M5.9999 7.08887C4.66069 7.10784 3.14317 7.77175 1.91208 9.00094C0.680988 10.2301 0.018969 11.7495 0 13.0887L5.9999 7.08887Z' fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
}
.breadcrumbs .rank-math-breadcrumb a { color: #ffffff; }
.breadcrumbs .rank-math-breadcrumb .last { opacity: 0.7; }

/* Compact hero variant (subpages like product overview) */
.kp-hero-banner.hero-compact {
    padding: 0 !important;
}
.kp-hero-banner.hero-compact .kp-hero-banner__bg {
    min-height: 280px; height: auto;
}
.kp-hero-banner.hero-compact .kp-hero-banner__content {
    padding: 0;
    display: flex; align-items: flex-end;
}
.kp-hero-banner.hero-compact .kp-hero-banner__content .inner {
    padding: 80px 16px;
}
.kp-hero-banner.hero-compact .kp-hero-banner__title {
    font-size: clamp(24px, 2vw + 16px, 48px);
}
@media (max-width: 1023px) {
    .kp-hero-banner.hero-compact .kp-hero-banner__bg {
        min-height: auto; height: auto; min-height: 200px;
    }
    .kp-hero-banner.hero-compact .kp-hero-banner__content {
        padding: 0;
    }
    .kp-hero-banner.hero-compact .kp-hero-banner__content .inner {
        padding: 40px 16px;
    }
}

/* Desktop */

@media (min-width: 1024px) {
    .kp-hero-banner__bg {
        min-height: 430px;
    }
    .kp-hero-banner__content {
        padding: 80px 0rem;
    }
    .kp-hero-banner__title {
        font-size: clamp(32px, 2.5vw, 48px);
    }
}
/* ============================================================================
   2. KP SECTION LABEL
   ============================================================================ */

.kp-section-label {
    padding: 24px 0;
}
@media (max-width: 1023px) {
    .kp-section-label#knowledge {
        border-bottom: none !important;
    }
}
@media (min-width: 1024px) {
    .kp-section-label {
        padding: 48px 0;
    }
}
.kp-section-label.bg-white {
    background: #ffffff;
}
.kp-section-label.bg-dark {
    background: var(--color-primary, #0D1C38);
}
.kp-section-label.text-light {
    color: #ffffff;
}
.kp-section-label.text-dark {
    color: var(--color-primary, #0D1C38);
}
.kp-section-label .inner {
    padding-left: 1rem;
    padding-right: 1rem;
}
.kp-section-label__inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.kp-section-label__inner--with-btn {
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}
.kp-section-label__left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.kp-section-label__btn {
    display: none;
}
@media (min-width: 1024px) {
    .kp-section-label__btn {
        display: inline-flex;
    }
}
.kp-section-label__arrow {
    display: inline-flex;
    flex-shrink: 0;
}
.kp-section-label__text {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 1.125rem;
    /* 18px */
    line-height: 150%;
    font-weight: 400;
}
/* Large variant: sofia-pro heading font, 32px desktop / 24px mobile */
.kp-section-label--large .kp-section-label__text {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: clamp(1.5rem, 1.2rem + 0.5vw, 2rem); /* 24px → 32px */
    line-height: 130%;
}
.kp-section-label--large .kp-section-label__chevron {
    width: 12px; height: 26px;
}
@media (max-width: 1024px) {
    .kp-section-label .inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* ============================================================================
   3. KP TEKST + USP BLOKKEN
   ============================================================================ */

.kp-text-usp {
    background: #ffffff;
}
.kp-text-usp .inner {
    padding-left: 1rem;
    padding-right: 1rem;
}
.kp-text-usp__grid {
    display: flex;
    flex-direction: column;
    gap: 64px;
}
.kp-text-usp__title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 48px;
    line-height: 100%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
    margin-bottom: 0;
}
@media (max-width: 600px) {
    .kp-text-usp__title br {
        display: none !important;
    }
}
.kp-text-usp__text {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 20px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
    margin-bottom: 0;
}
.kp-text-usp__text p {
    margin: 0 0 1rem 0;
}
.kp-text-usp__text p:last-child {
    margin-bottom: 0;
}
.kp-text-usp__left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.kp-text-usp__right {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.kp-text-usp__right .kp-text-usp__item {
    padding: 24px 0;
}
.kp-text-usp__right .kp-text-usp__item:first-child {
    padding-top: 0;
}
@media (min-width: 1024px) {
    .kp-text-usp__right .kp-text-usp__item {
        padding: 40px 0;
    }
    .kp-text-usp__right .kp-text-usp__item:first-child {
        padding-top: 0;
    }
}
.kp-text-usp__buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.kp-text-usp__item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
}
.kp-text-usp__item-title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    line-height: 130%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
    margin: 0;
}
.kp-text-usp__item-text {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
}
.kp-text-usp__divider {
    border-top: 1px solid rgba(13, 28, 56, 0.25);
    margin: 0;
    padding: 0;
}
/* Desktop: twee kolommen */

@media (min-width: 1024px) {
    .kp-text-usp__grid {
        flex-direction: row;
        gap: var(--kp-content-gap, 200px);
    }
    .kp-text-usp__left {
        /* Figma: 817px / 1720px content = 47.5% */
        flex: 0 0 47.5%;
    }
    .kp-text-usp__right {
        flex: 1;
    }
    .kp-text-usp__title {
        font-size: clamp(48px, 5.2vw, 64px);
    }
    .kp-text-usp__text {
        font-size: clamp(20px, 1.25vw, 24px);
    }
    .kp-text-usp__item-title {
        font-size: clamp(24px, 1.667vw, 32px);
    }
}
@media (max-width: 1024px) {
    .kp-text-usp .inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* ============================================================================
   4. KP FULLSCREEN MARKTEN
   ============================================================================ */

.kp-fullscreen-markets {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    color: #ffffff;
    overflow: hidden;
}
.kp-fullscreen-markets__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
    z-index: 0;
}
.kp-fullscreen-markets__sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 123px;
    z-index: 2;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    display: none;
}
.kp-fullscreen-markets__sidebar-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transform: rotate(-90deg);
    transform-origin: left bottom;
    position: absolute;
    bottom: 3rem;
    left: 3.75rem;
    white-space: nowrap;
    color: #ffffff;
}
.kp-fullscreen-markets__sidebar-text {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 18px;
    line-height: 150%;
}
.kp-fullscreen-markets__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    padding: 80px 1rem;
}
.kp-fullscreen-markets__title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 48px;
    line-height: 120%;
    font-weight: 400;
    color: #ffffff;
}
.kp-fullscreen-markets__text {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 20px;
    line-height: 140%;
    color: #ffffff;
    max-width: 495px;
}
.kp-fullscreen-markets__right {
    background: #ffffff;
    padding: 24px;
}
.kp-fullscreen-markets__images-grid {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}
.kp-fullscreen-markets__shape {
    position: absolute;
    width: 40px;
    height: 40px;
}
.kp-fullscreen-markets__shape--tl { top: 0; left: 0; }
.kp-fullscreen-markets__shape--tr { top: 0; right: 0; }
.kp-fullscreen-markets__shape--bl { bottom: 0; left: 0; }
.kp-fullscreen-markets__shape--br { bottom: 0; right: 0; }
.kp-fullscreen-markets__image-item img {
    width: 100%;
    height: auto;
    display: block;
}
.kp-fullscreen-markets__caption {
    color: #000000;
    text-align: center;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 24px;
    padding-top: 16px;
}
/* Desktop */

@media (min-width: 1024px) {
    .kp-fullscreen-markets__sidebar {
        display: block;
    }
    .kp-fullscreen-markets__content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 clamp(80px, 10.42vw, 200px);
    }
    .kp-fullscreen-markets__left {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }
    .kp-fullscreen-markets__right {
        /* Figma: 580px grid op 1920px = 30.2vw */
        flex: 0 0 clamp(380px, 30.2vw, 600px);
        height: clamp(380px, 30.2vw, 600px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .kp-fullscreen-markets__title {
        font-size: clamp(48px, 5.2vw, 64px);
    }
    .kp-fullscreen-markets__text {
        font-size: clamp(20px, 1.25vw, 24px);
    }
}
/* ============================================================================
   5. KP PRODUCT CARDS (SLIDER)
   ============================================================================ */

.kp-product-cards {
    background: #ffffff;
}
.kp-product-cards .inner {
    padding-left: 1rem;
    padding-right: 1rem;
}
.kp-product-cards__grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.kp-product-cards__grid::-webkit-scrollbar {
    display: none;
}
.kp-product-card {
    flex: 0 0 calc(25% - 12px);
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
}
.kp-product-card__image {
    width: 100%;
    aspect-ratio: 1/1.3;
    overflow: hidden;
    border: 1px solid rgba(13, 28, 56, 0.25);
}
@media (min-width: 1024px) {
    .kp-product-card__image {
        max-height: 418px;
    }
}
.kp-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kp-product-card__image {
    position: relative;
}

/* ── Product/Markt Card hover: centered overlay met 4 shapes + "Read more" ── */
/* Dark overlay on image hover */
.kp-product-card__image::after,
.kp-brand-card__image::after,
.kp-news-row__image::after,
.kp-product-grid__card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}
/* Manual/detail cards zijn niet klikbaar (geen <a>) — geen hover blur */
.kp-product-grid__card--detail .kp-product-grid__card-image::after {
    content: none;
}
.kp-product-card:hover .kp-product-card__image::after,
.kp-brand-card:hover .kp-brand-card__image::after,
.kp-news-row:hover .kp-news-row__image::after,
.kp-product-grid__card:not(.kp-product-grid__card--detail):hover .kp-product-grid__card-image::after {
    opacity: 1;
}
/* Cursor-following hover element */
.kp-product-card__hover-overlay {
    position: absolute;
    width: 127px;
    height: 127px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.kp-product-card__image.is-hovering .kp-product-card__hover-overlay,
.kp-brand-card__image.is-hovering .kp-product-card__hover-overlay,
.kp-news-row__image.is-hovering .kp-product-card__hover-overlay,
.kp-product-grid__card-image.is-hovering .kp-product-card__hover-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.kp-product-card__image.is-hovering,
.kp-brand-card__image.is-hovering,
.kp-news-row__image.is-hovering,
.kp-product-grid__card-image.is-hovering { cursor: none; }
.kp-product-card__hover-overlay .kp-hover-shapes__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.kp-product-card__hover-overlay .kp-hover-shapes__row--bottom {
    transform: scaleY(-1);
}
.kp-product-card__hover-overlay .kp-hover-shape {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
.kp-product-card__hover-overlay .kp-hover-read-more {
    color: #ffffff;
    text-align: center;
    font-family: "sofia-pro", sans-serif;
    font-size: 18px;
    line-height: 120%;
    font-weight: 400;
}
/* Hide cursor-follow on touch devices */
@media (hover: none) {
    .kp-product-card__hover-overlay { display: none; }
}
.kp-product-card:hover .kp-product-card__hover-overlay {
    /* keep for backwards compat — actual show is via .is-hovering */
}
/* Desktop: "Bekijk meer" verborgen (hover overlay doet dat) */
.kp-product-card__read-more {
    display: none;
}
.kp-product-card__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-right: 16px;
}
.kp-product-card__header {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.kp-product-card__title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    line-height: 130%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
}
.kp-product-card__subtitle {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
    font-style: italic;
}
.kp-product-card__text {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
}
/* Slider nav */

.kp-product-cards__nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
}
.kp-product-cards__line {
    flex: 1;
    height: 4px;
    background: rgba(13, 28, 56, 0.25);
    position: relative;
}
.kp-product-cards__line-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    background: #0D1C38;
    transition: width 0.3s ease;
    width: 0%;
}
.kp-product-cards__arrows {
    display: flex;
    gap: 16px;
}
.kp-slider-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50px;
    border: 1px solid var(--color-primary, #0D1C38);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-primary, #0D1C38);
}
.kp-slider-arrow:hover {
    background: var(--color-primary, #0D1C38);
    color: #ffffff;
}
@media (min-width: 1024px) {
    .kp-product-card__title {
        font-size: clamp(24px, 1.667vw, 32px);
    }
}
@media (max-width: 1023px) {
    /* Figma mobile .frame-84509348: padding 0 top, 64px bottom */
    .kp-product-cards {
        padding-top: 0 !important;
        padding-bottom: 64px !important;
    }
    .kp-product-cards .inner {
        padding: 0 16px;
    }
    /* Figma mobile: geen carousel, verticale lijst met gap 24px */
    .kp-product-cards__grid {
        display: flex;
        flex-direction: column;
        gap: 24px;
        overflow: visible;
        scroll-snap-type: none;
    }
    .kp-product-cards__nav {
        display: none;
    }
    .kp-cases-carousel .kp-product-cards__nav {
        display: flex;
    }
    /* Figma mobile .mobile-markt-card: row, gap 16px, image links 136px */
    .kp-product-card {
        flex: none;
        min-width: 0;
        width: 100%;
        flex-direction: row;
        gap: 16px;
        align-items: center;
    }
    .kp-product-card__image {
        width: 136px;
        flex-shrink: 0;
        align-self: stretch;
        aspect-ratio: auto;
        max-height: none;
    }
    .kp-product-card__image img {
        height: 100%;
    }
    /* Figma: content gap 8px, titel 20px sofia-pro, tekst 16px acumin-pro */
    .kp-product-card__content {
        gap: 8px;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        padding-right: 0;
    }
    .kp-product-card__title {
        font-size: 20px;
        line-height: 140%;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    .kp-product-card__text {
        max-height: 72px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    /* Hover overlay verbergen op mobile */
    .kp-product-card__hover-overlay {
        display: none;
    }
    /* Figma mobile: "Bekijk meer" link met chevron */
    .kp-product-card__read-more {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
    }
    .kp-product-card__read-more-text {
        color: #0d1c38;
        font-family: "acumin-pro", sans-serif;
        font-size: 16px;
        line-height: 150%;
        font-weight: 400;
        text-decoration: underline;
    }
    .kp-product-card__read-more-chevron {
        width: 6px;
        height: 13.09px;
        flex-shrink: 0;
        color: #0d1c38;
    }
    .kp-product-card {
        flex: 0 0 85%;
    }
}
/* ============================================================================
   6. KP ACCORDION RIJEN
   ============================================================================ */

.kp-accordion-rows {
    background: #ffffff;
}
.kp-accordion-rows.bg-dark {
    background: var(--color-primary, #0D1C38);
}
.kp-accordion-rows .inner {
    padding-left: 1rem;
    padding-right: 1rem;
}
.kp-accordion-rows__header {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 120px;
}
.kp-accordion-rows .kp-pd-cert__logos {
    margin-bottom: 80px;
}
.kp-accordion-rows__title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 48px;
    line-height: 100%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
}
.kp-accordion-rows.text-light .kp-accordion-rows__title, .kp-accordion-rows.text-light .kp-accordion-rows__intro, .kp-accordion-rows.text-light .kp-accordion-rows__item-title {
    color: #ffffff;
}
.kp-accordion-rows__intro {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 20px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
}
.kp-accordion-rows__item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 0;
    cursor: pointer;
}
.kp-accordion-rows__item:first-child .kp-accordion-rows__item-header {
    padding-top: 0;
}
.kp-accordion-rows__item-title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    line-height: 130%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
}
.kp-accordion-rows__item-arrow {
    display: inline-flex;
    transition: transform 0.3s ease;
    color: var(--color-primary, #0D1C38);
}
.kp-accordion-rows.text-light .kp-accordion-rows__item-arrow {
    color: #ffffff;
}
.kp-accordion-rows__item[aria-expanded="true"] .kp-accordion-rows__item-arrow {
    transform: rotate(180deg);
}
.kp-accordion-rows__item-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}
.kp-accordion-rows__item-body>* {
    overflow: hidden;
    min-height: 0;
}
.kp-accordion-rows__item.is-open .kp-accordion-rows__item-body {
    grid-template-rows: 1fr;
}
.kp-accordion-rows__item-body-inner {}
.kp-accordion-rows__item-body .kp-accordion-rows__item-text {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    margin-bottom: 24px;
    max-width: calc(100% - 2rem);
}
.kp-accordion-rows__divider {
    border-top: 1px solid rgba(13, 28, 56, 0.25);
}
.kp-accordion-rows.text-light .kp-accordion-rows__divider {
    border-top-color: rgba(255, 255, 255, 0.25);
}
/* Desktop */

@media (min-width: 1024px) {
    .kp-accordion-rows__header {
        flex-direction: row;
        gap: var(--kp-content-gap, 200px);
        align-items: flex-end;
    }
    .kp-accordion-rows__title {
        flex: 1;
        font-size: clamp(48px, 5.2vw, 64px);
    }
    .kp-accordion-rows__intro {
        /* Figma: 703px / 1720px content = 40.87% */
        width: 40.87%;
        font-size: clamp(20px, 1.25vw, 24px);
    }
    .kp-accordion-rows__item-title {
        font-size: clamp(24px, 1.667vw, 32px);
    }
}
@media (max-width: 1024px) {
    .kp-accordion-rows .inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .kp-accordion-rows__header {
        margin-bottom: 40px;
    }
}
/* ============================================================================
   7. KP MERKEN CARDS
   ============================================================================ */

.kp-brand-cards {
    background: #ffffff;
}
.kp-brand-cards .inner {
    padding-left: 1rem;
    padding-right: 1rem;
}
.kp-brand-cards__grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
/* Carousel-variant: geen wrap, cards op vaste basis zodat scroll-snap klopt */
.kp-brand-cards__grid.kp-ncarousel {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
}
.kp-brand-cards__grid.kp-ncarousel > .kp-brand-card {
    flex: 0 0 calc((100% - 16px) / 3);
    min-width: 280px;
}
@media (max-width: 1023px) {
    .kp-brand-cards__grid.kp-ncarousel {
        padding-left: 16px;
        padding-right: 16px;
        scroll-padding-left: 16px;
    }
    .kp-brand-cards__grid.kp-ncarousel > .kp-brand-card {
        flex: 0 0 85vw;
        min-width: 0;
        max-width: 360px;
    }
}
.kp-brand-card {
    flex: 0 1 calc((100% - 16px) / 3);
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    text-decoration: none;
    color: inherit;
}
.kp-brand-card__image {
    width: 100%;
    aspect-ratio: 1/1.4;
    overflow: hidden;
    max-height: 640px;
    position: relative;
}
.kp-brand-card:hover .kp-product-card__hover-overlay {
    opacity: 1;
}
.kp-brand-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kp-brand-card__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-right: 1rem;
}
.kp-brand-card__title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    line-height: 130%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
}
.kp-brand-card__text {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
}
.kp-brand-card__text p+p {
    margin-top: 1rem;
}
@media (min-width: 1024px) {
    .kp-brand-card__title {
        font-size: clamp(24px, 1.667vw, 32px);
    }
}
/* Brand cards nav: hidden desktop, visible mobile */
.kp-brand-cards__nav {
    display: none;
}
@media (max-width: 1023px) {
    .kp-brand-cards .inner {
        padding-left: 0;
        padding-right: 0;
    }
    .kp-brand-cards__grid {
        padding-left: 16px;
    }
    .kp-brand-cards__nav {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 24px 16px 0 16px;
    }
    .kp-brand-cards__line {
        flex: 1;
        height: 4px;
        background: rgba(13, 28, 56, 0.25);
        position: relative;
    }
    .kp-brand-cards__line-progress {
        position: absolute;
        top: 0; left: 0;
        height: 4px;
        background: #0d1c38;
        width: 0%;
        transition: width .3s ease;
    }
    .kp-brand-cards__arrows {
        display: flex;
        gap: 16px;
        flex-shrink: 0;
    }
    .kp-brand-cards .kp-slider-arrow {
        background: #ffffff;
        border: 1px solid #0d1c38;
        border-radius: 50px;
        padding: 12px;
        width: 48px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #0d1c38;
    }
}
/* ============================================================================
   8. KP CONTACT CTA
   ============================================================================ */

.kp-contact-cta {
    position: relative;
    background-color: var(--color-primary, #0D1C38);
    color: #ffffff;
    text-align: center;
}
.kp-contact-cta__overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 28, 56, 0.6);
    pointer-events: none;
}
.kp-contact-cta .inner {
    position: relative;
    z-index: 2;
}
.kp-contact-cta__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.kp-contact-cta__title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 40px;
    line-height: 120%;
    font-weight: 400;
    color: #ffffff;
}
.kp-contact-cta__text {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 20px;
    line-height: 150%;
    color: #ffffff;
}
.kp-contact-cta__buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Gravity Form inside dark CTA section — CENTERED/NEWSLETTER variant only */
.kp-contact-cta__content .kp-contact-cta__form { width: 100%; max-width: 720px; }
.kp-contact-cta__content .kp-contact-cta__form .gform_heading { display: none; }
.kp-contact-cta__content .kp-contact-cta__form .gform_validation_container { display: none !important; }
.kp-contact-cta__content .kp-contact-cta__form .gform_fields {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
@media (min-width: 1024px) {
    .kp-contact-cta__content .kp-contact-cta__form .gform_fields {
        flex-direction: row;
        align-items: flex-end;
    }
}
.kp-contact-cta__content .kp-contact-cta__form .gfield--type-email { flex: 1; }
.kp-contact-cta__content .kp-contact-cta__form .gfield--type-email .gfield_label { display: none !important; }
/* Figma: input width 560px, padding 8px 12px, bg linear-gradient(rgba(235,241,248,0.9)), border rgba(255,255,255,0.25), gap 12px with mail icon 24px */
.kp-contact-cta__content .kp-contact-cta__form .gfield--type-email input {
    width: 100%;
    height: 56px;
    padding: 8px 12px 8px 12px;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
    background-color: rgba(235, 241, 248, 0.9);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='17' viewBox='0 0 21 17' fill='none'%3E%3Cpath d='M1.20312 1.89746V15.1016H19.0957V2.29395L18.3203 2.80371L10.3643 8.04199C10.3039 8.07364 10.2515 8.09931 10.2061 8.11719C10.2029 8.11818 10.1861 8.12305 10.1494 8.12305C10.1121 8.12304 10.0955 8.11806 10.0928 8.11719C10.0471 8.09922 9.99432 8.07387 9.93359 8.04199L2.20312 2.95117V2.55176L9.87598 7.57715L10.1494 7.75684L10.4229 7.57812L18.7695 2.12793L19.7803 1.4668C19.7959 1.5446 19.8047 1.625 19.8047 1.70898V14.6016C19.8047 14.9228 19.6924 15.1963 19.4434 15.4443C19.1945 15.6924 18.9197 15.8047 18.5957 15.8047H1.70312C1.38141 15.8047 1.10823 15.6923 0.860352 15.4443L0.773438 15.3506C0.58577 15.1278 0.5 14.8831 0.5 14.6016V1.70898C0.500017 1.62046 0.509066 1.53575 0.526367 1.4541L1.20312 1.89746ZM1.70312 0.5H18.5957C18.9191 0.5 19.1933 0.613174 19.4424 0.862305H19.4434C19.553 0.971962 19.6346 1.08743 19.6934 1.20898H0.610352C0.669035 1.08699 0.750804 0.971226 0.860352 0.861328H0.861328C1.1093 0.612456 1.38205 0.500029 1.70312 0.5Z' fill='%230D1C38' stroke='%230D1C38'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(50% - 75px) center;
    background-size: 24px auto;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0;
    outline: none;
    box-sizing: border-box;
    text-align: center;
    -webkit-appearance: none;
}
.kp-contact-cta__content .kp-contact-cta__form .gfield--type-email input::placeholder { color: rgba(0, 0, 0, 0.6); }
.kp-contact-cta__content .kp-contact-cta__form .gfield--type-email input:focus { border-color: #6BABD3; }
.kp-contact-cta__content .kp-contact-cta__form .spacer.gfield { display: none !important; }
.kp-contact-cta__content .kp-contact-cta__form .gfield--type-submit { flex-shrink: 0; }
.kp-contact-cta__content .kp-contact-cta__form .gfield--type-submit .gfield_label { display: none; }
.kp-contact-cta__content .kp-contact-cta__form .brochure-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 56px;
    padding: 16px 32px;
    background: #ffffff;
    border: none;
    cursor: pointer;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
    white-space: nowrap;
    width: 100%;
    transition: background 0.2s ease;
}
.kp-contact-cta__content .kp-contact-cta__form .brochure-submit-btn:hover { background: #EBF1F8; }
.kp-contact-cta__content .kp-contact-cta__form .brochure-submit-btn .kp-btn__chevron path { fill: var(--color-primary, #0D1C38); }
@media (min-width: 1024px) {
    .kp-contact-cta__content .kp-contact-cta__form .gform_fields {
        gap: 16px;
    }
    .kp-contact-cta__content .kp-contact-cta__form .gfield--type-email {
        flex: 0 0 560px;
        max-width: 560px;
    }
    .kp-contact-cta__content .kp-contact-cta__form .gfield--type-email input {
        text-align: left;
        text-indent: 0;
        background-position: 12px center;
        padding-left: 48px;
    }
    .kp-contact-cta__content .kp-contact-cta__form .gfield--type-email input::placeholder { text-align: left; }
    .kp-contact-cta__content .kp-contact-cta__form .brochure-submit-btn { width: fit-content; }
}
.kp-contact-cta__content .kp-contact-cta__form .gform-footer { display: none; }
.kp-contact-cta__content .kp-contact-cta__form .gform_required_legend { display: none; }

/* Validation errors on dark bg */
.kp-contact-cta__form .gform_validation_errors,
.kp-contact-cta__form .validation_error {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.5);
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 0;
}
.kp-contact-cta__form .gform_validation_errors h2,
.kp-contact-cta__form .gform_submission_error,
.kp-contact-cta__form .validation_error {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 14px;
    line-height: 150%;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kp-contact-cta__form .gform_validation_errors .gform-icon,
.kp-contact-cta__form .gform_submission_error .gform-icon { display: none; }
.kp-contact-cta__form .gfield_error input {
    border-color: #dc3545 !important;
}
.kp-contact-cta__form .validation_message {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 13px;
    line-height: 150%;
    color: #ff8a8a;
    margin-top: 4px;
    padding: 0;
}
/* Prevent button from being pushed off on error state */
.kp-contact-cta__form .gfield_error .ginput_container { margin-bottom: 0; }
@media (min-width: 1024px) {
    .kp-contact-cta__form .validation_message {
        position: absolute;
        bottom: -20px;
        left: 0;
    }
    .kp-contact-cta__form .gfield--type-email {
        position: relative;
    }
}
@media (min-width: 1024px) {
    .kp-contact-cta__content {
        gap: 40px;
    }
    .kp-contact-cta__title {
        font-size: clamp(40px, 2.5vw, 48px);
    }
    .kp-contact-cta__text {
        font-size: 20px;
    }
}

/* Contact CTA: two-column layout with contact card + form */
.kp-contact-cta__grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: left;
}
.kp-contact-cta__left {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.kp-contact-cta__header {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
/* Company info block in grid left column */
.kp-contact-cta__company-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (min-width: 1024px) {
    .kp-contact-cta__company-info {
        flex-direction: row;
        gap: 56px;
    }
}
.kp-contact-cta__info-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kp-contact-cta__info-line {
    color: #ffffff;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
}
.kp-contact-cta__info-link {
    color: #6babd3;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    text-decoration: underline;
}
.kp-contact-cta__info-link:hover {
    color: #ffffff;
}
.kp-contact-cta__socials {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.kp-contact-cta__social-link {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    color: #ffffff;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.kp-contact-cta__social-link:hover {
    opacity: 0.7;
}
.kp-contact-cta__social-link svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.kp-contact-cta__contact-card {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 451px;
}
.kp-contact-cta__contact-top {
    padding: 24px;
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
}
.kp-contact-cta__contact-img {
    position: relative;
    width: 111px;
    height: 111px;
    flex-shrink: 0;
    overflow: hidden;
}
.kp-contact-cta__contact-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kp-contact-cta__shape {
    position: absolute;
    pointer-events: none;
}
.kp-contact-cta__shape--tl { top: 0; left: 0; }
.kp-contact-cta__shape--tr { top: 0; right: 0; }
.kp-contact-cta__shape--bl { bottom: 0; left: 0; }
.kp-contact-cta__shape--br { bottom: 0; right: 0; }
.kp-contact-cta__contact-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kp-contact-cta__contact-name {
    color: #0d1c38;
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 32px;
    line-height: 130%;
    font-weight: 400;
    margin: 0;
}
.kp-contact-cta__contact-role {
    color: #0d1c38;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
}
.kp-contact-cta__contact-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 0 24px 24px 24px;
}
.kp-contact-cta__contact-phone {
    width: fit-content;
}
.kp-contact-cta__contact-phone svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.kp-contact-cta__contact-email {
    border: 1px solid #0d1c38;
    padding: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    width: 56px;
    box-sizing: border-box;
    text-decoration: none;
    color: #0d1c38;
    transition: background 0.2s ease;
}
.kp-contact-cta__contact-email:hover {
    background: rgba(13, 28, 56, 0.05);
}
.kp-contact-cta__contact-email svg {
    width: 24px;
    height: 24px;
}
/* Grid form: layout sizing only — dark form styling comes from .kp-sv-form-section__form in kp-single-vacature.css */
.kp-contact-cta__grid .kp-contact-cta__form {
    max-width: 100%;
}

/* ─── Image variant (brochure-aanvraag stijl) ─── */
.kp-contact-cta__image-left {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}
.kp-contact-cta__image-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Left kolom zelf ook volledige hoogte zodat image hoogte = form hoogte */
.kp-contact-cta__left--image {
    display: flex;
    align-self: stretch;
}
.kp-contact-cta__image-left .kp-contact-cta__shape {
    position: absolute;
    width: 64px;
    height: 64px;
}
.kp-contact-cta__image-left .kp-contact-cta__shape--tl { top: 0; left: 0; }
.kp-contact-cta__image-left .kp-contact-cta__shape--tr { top: 0; right: 0; }
.kp-contact-cta__image-left .kp-contact-cta__shape--bl { bottom: 0; left: 0; }
.kp-contact-cta__image-left .kp-contact-cta__shape--br { bottom: 0; right: 0; }

.kp-contact-cta__form-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}
.kp-contact-cta__form--with-header .kp-contact-cta__title {
    margin: 0;
}
.kp-contact-cta__divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 0 32px;
}
.kp-contact-cta--light .kp-contact-cta__divider {
    background: rgba(13, 28, 56, 0.2);
}

@media (min-width: 1024px) {
    .kp-contact-cta__grid {
        flex-direction: row;
        gap: 40px;
        align-items: flex-start;
        justify-content: center;
    }
    .kp-contact-cta__left {
        width: 610px;
        flex-shrink: 0;
        gap: 80px;
    }
    .kp-contact-cta__grid .kp-contact-cta__form {
        flex: 1;
        max-width: 710px;
    }
    /* Image variant: 50/50 split — image matcht EXACT form-hoogte */
    .kp-contact-cta__grid--image {
        gap: 64px;
        align-items: stretch;
    }
    .kp-contact-cta__grid--image .kp-contact-cta__left--image {
        width: auto;
        flex: 1 1 50%;
        max-width: 600px;
        gap: 0;
        position: relative; /* anchor voor absolute image */
        min-height: 100%;
    }
    .kp-contact-cta__grid--image .kp-contact-cta__form {
        flex: 1 1 50%;
        max-width: 600px;
    }
    /* Image absoluut positioneren: dan draagt hij niet bij aan parent height
       → parent-height wordt volledig bepaald door form-kolom (grid stretch) */
    .kp-contact-cta__grid--image .kp-contact-cta__image-left {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
        height: auto;
    }
    .kp-contact-cta__grid .kp-contact-cta__title {
        font-size: 40px;
    }
    .kp-contact-cta__grid .kp-contact-cta__text {
        font-size: 20px;
    }
}

/* Contact CTA: LIGHT variant (white bg, dark text, dark form borders) */
.kp-contact-cta--light {
    color: #0d1c38;
    text-align: left;
}
.kp-contact-cta--light .kp-contact-cta__overlay {
    display: none;
}
.kp-contact-cta--light .kp-contact-cta__title {
    color: #0d1c38;
}
.kp-contact-cta--light .kp-contact-cta__text {
    color: #0d1c38;
}
.kp-contact-cta--light .kp-contact-cta__info-line {
    color: #0d1c38;
}
.kp-contact-cta--light .kp-contact-cta__info-link {
    color: #0d1c38;
    text-decoration: underline;
}
.kp-contact-cta--light .kp-contact-cta__social-link {
    color: #0d1c38;
}
/* Light variant form: dark labels, dark borders, dark placeholders */
.kp-contact-cta--light .kp-sv-form-section__form .gfield_label,
.kp-contact-cta--light .kp-sv-form-section__form label.gfield_label {
    color: #0d1c38 !important;
}
.kp-contact-cta--light .kp-sv-form-section__form input[type="text"],
.kp-contact-cta--light .kp-sv-form-section__form input[type="email"],
.kp-contact-cta--light .kp-sv-form-section__form input[type="tel"],
.kp-contact-cta--light .kp-sv-form-section__form input[type="url"],
.kp-contact-cta--light .kp-sv-form-section__form select,
.kp-contact-cta--light .kp-sv-form-section__form textarea {
    background: transparent !important;
    border: 1px solid rgba(13, 28, 56, 0.25) !important;
    color: #0d1c38 !important;
}
.kp-contact-cta--light .kp-sv-form-section__form input::placeholder,
.kp-contact-cta--light .kp-sv-form-section__form textarea::placeholder {
    color: rgba(13, 28, 56, 0.25) !important;
}
.kp-contact-cta--light .kp-sv-form-section__form .gform-field-label--type-sub {
    color: #0d1c38 !important;
}
.kp-contact-cta--light .kp-sv-form-section__form .gform_footer {
    border-top-color: rgba(13, 28, 56, 0.25);
}
.kp-contact-cta--light .kp-sv-form-section__form .gform_footer input[type="submit"],
.kp-contact-cta--light .kp-sv-form-section__form .brochure-submit-btn {
    background: #0d1c38 !important;
    color: #ffffff !important;
}
.kp-contact-cta--light .kp-sv-form-section__form .brochure-submit-btn .kp-btn__chevron path {
    fill: #ffffff !important;
}
.kp-contact-cta--light .kp-sv-form-section__form .brochure-submit-btn .btn-text {
    color: #ffffff !important;
}
/* Light variant: contact card inverts to dark bg, all content white */
.kp-contact-cta--light .kp-contact-cta__contact-card {
    background: #0d1c38;
    color: #ffffff;
}
.kp-contact-cta--light .kp-contact-cta__contact-name,
.kp-contact-cta--light .kp-contact-cta__contact-role,
.kp-contact-cta--light .kp-contact-cta__contact-actions,
.kp-contact-cta--light .kp-contact-cta__contact-actions * {
    color: #ffffff;
}
.kp-contact-cta--light .kp-contact-cta__contact-phone.btn-primary-dark {
    background: #ffffff !important;
    color: #0d1c38 !important;
}
.kp-contact-cta--light .kp-contact-cta__contact-phone.btn-primary-dark * {
    color: #0d1c38 !important;
}
.kp-contact-cta--light .kp-contact-cta__contact-email {
    border-color: #ffffff;
    color: #ffffff;
}

/* Gravity Forms: ensure gfield is a positioning context for validation messages */
.gform_wrapper .gfield {
    position: relative;
}
/* Gravity Forms: consistent label spacing across all forms */
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label--type-sub {
    display: flex !important;
    margin-bottom: 8px !important;
}
.gform_wrapper fieldset > legend.gfield_label {
    display: none !important;
}
/* Respecteer GF "Hide Label" keuze per veld (class = hidden_label) */
.gform_wrapper .gfield.hidden_label > .gfield_label,
.gform_wrapper .gfield.hidden_label > label.gfield_label,
.gform_wrapper .gfield.hidden_label > legend.gfield_label {
    display: none !important;
    margin-bottom: 0 !important;
}
/* Respecteer GF "Hide Sub-Labels" keuze per veld (class = field_sublabel_hidden_label) */
.gform_wrapper .gfield.field_sublabel_hidden_label .gform-field-label--type-sub {
    display: none !important;
}

/* ============================================================================
   GLOBAL: Padding utility classes
   ============================================================================ */

.compact-padding {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
/* 48px */

.small-padding {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}
/* 40px */

.medium-padding {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}
/* 80px */

.large-padding {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
}
/* 120px */

.xl-padding {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
}
/* 160px */

.no-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* ============================================================================
   NO SPACE TOP / BOTTOM — Global spacing overrides
   ============================================================================ */

#content body .no-space-top,
body #content .no-space-top,
body .site-content .no-space-top {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
#content body .no-space-bottom,
body #content .no-space-bottom,
body .site-content .no-space-bottom {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* Border utilities (ACF-driven) */

.has-border-top {
    border-top: 1px solid rgba(13, 28, 56, 0.25);
}
.has-border-bottom {
    border-bottom: 1px solid rgba(13, 28, 56, 0.25);
}
.has-border-top.border-light, .has-border-bottom.border-light {
    border-color: rgba(255, 255, 255, 0.25);
}
/* ============================================================================
   13. KP FULLWIDTH IMAGE
   ============================================================================ */

.kp-fullwidth-image {
    width: 100%;
    line-height: 0;
    padding-bottom: 2rem;
}
.kp-fullwidth-image__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ── Fullwidth Image Carousel (dot navigation) ── */
.kp-fullwidth-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.kp-fullwidth-carousel__track {
    display: flex;
    transition: transform 0.4s ease;
    will-change: transform;
}
.kp-fullwidth-carousel__slide {
    flex: 0 0 100%;
    min-width: 0;
}
.kp-fullwidth-carousel__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.kp-fullwidth-carousel__dots {
    position: absolute;
    bottom: 12px;
    left: 16px;
    z-index: 2;
    display: flex;
    gap: 0;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
    padding: 2px;
}
/* A11y (WCAG 2.5.8): button 24x24 tap target, geen overlap.
   Visueel blijft de dot subtiel (8px) via background-clip: content-box. */
.kp-fullwidth-carousel__dot {
    width: 24px;
    height: 24px;
    padding: 8px;
    box-sizing: border-box;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: #ffffff;
    background-clip: content-box;
    transition: background-color 0.2s ease;
}
.kp-fullwidth-carousel__dot.is-active {
    background-color: #0D1C38;
}

/* Accordion open state */

.kp-accordion-rows__item.is-open .kp-accordion-rows__item-arrow {
    transform: rotate(180deg);
}
.kp-accordion-rows__item-header {
    cursor: pointer;
    user-select: none;
}
@media (min-width: 1025px) {
    .kp-fullwidth-image {
        padding-bottom: 56px;
    }
    body.kp-transparent-header .nav-menu > li > a {
padding: 0.5rem 0.75rem;

    }
    body.kp-transparent-header .nav-menu > li > a:hover {
background: rgba(255, 255, 255, 0.60);
color: #fff !important;
opacity:1;
    }
    body .nav-menu {
        gap:1rem;
    }
        .kp-product-card__image {
    max-height: 418px;
}
 .kp-accordion-rows__item-header {
        transition:opacity 0.6s;
 }
 .kp-accordion-rows__item-header:hover {
    opacity: 0.6;
    transition:opacity 0.6s;
}
}
@media (min-width: 1440px) {
    .kp-hero-banner__bg {
        min-height: 430px;
    }
    .kp-accordion-rows__item-body .kp-accordion-rows__item-text {
        font-size: clamp(16px, 1.25vw, 24px);
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        max-width: calc(100% - 2rem);
        /* 36px */
    }
    
    body .nav-menu {
        gap:1.5rem;
    }
}
@media (max-width: 1023px) {
    .kp-accordion-rows__item-arrow {
        margin-top: 8px;
        max-width: 20px;
    }
    .kp-accordion-rows__item-header {
        align-items: flex-start;
    }
    .kp-hero-banner__buttons,.kp-text-usp__buttons{

    width: fit-content;
    }
    body .kp-hero-banner__buttons .kp-btn, body .kp-text-usp__buttons .kp-btn {
        width:100%;
            justify-content: center;
    }
}

body .cmplz-document {
    font-size: 20px;
}
body .cmplz-document ul {
   list-style-position: inside;
}

body .cmplz-document  p {
    margin: 1rem 0;
}

body .cmplz-document a {
color: #0D1C38;
    text-decoration: underline;
}
body .cmplz-document a:hover {

    text-decoration: unset;
}

.kp-content .kp-text-usp__right{
display: none;
}


@media (min-width: 1024px) {

    .kp-content .kp-text-usp__left {
        flex: 0 0 60%;
    }
}

/* ============================================================================
   10. PRODUCT GRID (Overview page — static grid, not slider)
   ============================================================================ */
.kp-product-grid {
    background: #ffffff;
    padding: 0 0 clamp(80px, 8.33vw, 160px);
}
.kp-product-grid__items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 64px 16px;
}
.kp-product-grid__card {
    display: flex; flex-direction: column; gap: 32px;
    text-decoration: none; color: inherit;
}
.kp-product-grid__card-image {
    aspect-ratio: 1 / 1; overflow: hidden;
    border: 1px solid rgba(13, 28, 56, 0.25);
    background: #ffffff;
    position: relative;
}
.kp-product-grid__card:hover .kp-product-card__hover-overlay {
    opacity: 1;
}
.kp-product-grid__card-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}
.kp-product-grid__card:hover .kp-product-grid__card-image img {
    transform: scale(1.05);
}
.kp-product-grid__card--detail:hover .kp-product-grid__card-image img {
    transform: none;
}
.kp-product-grid__card--detail {
    cursor: default;
}
.kp-product-grid__card-content {
    display: flex; flex-direction: column; gap: 8px;
    padding: 0 16px 0 0;
}
.kp-product-grid__card-title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px; line-height: 140%; font-weight: 400;
    color: var(--color-primary, #0D1C38); margin: 0;
}
/* "Bekijk meer" link — visible only on mobile */
.kp-product-grid__card-link {
    display: none;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px; line-height: 150%; font-weight: 400;
    color: var(--color-primary, #0D1C38);
    text-decoration: underline;
    align-items: center; gap: 8px;
}
.kp-product-grid__card-link svg { flex-shrink: 0; }

/* Mobile: horizontal card layout */
@media (max-width: 1023px) {
    .kp-product-grid {
        padding: 0 0 24px;
    }
    .kp-product-grid__items {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    /* Automatic (non-detail) cards: horizontale layout met 136x136 thumb.
       Manual/detail cards zijn uitgesloten (die hebben hun eigen mobiele carousel-layout). */
    .kp-product-grid__card:not(.kp-product-grid__card--detail) {
        flex-direction: row; gap: 16px;
    }
    .kp-product-grid__card:not(.kp-product-grid__card--detail) .kp-product-grid__card-image {
        width: 136px; height: 136px; flex-shrink: 0;
        aspect-ratio: auto;
    }
    .kp-product-grid__card:not(.kp-product-grid__card--detail) .kp-product-grid__card-content {
        flex: 1; justify-content: center; padding: 0;
    }
    .kp-product-grid__card-title {
        font-size: 20px;
    }
    .kp-product-grid__card-link {
        display: inline-flex;
    }
}

/* Detail cards (manual/value-added style) */
.kp-product-grid__card--detail {
    display: flex; flex-direction: column; gap: 0;
    background: #ffffff;
    border: 1px solid rgba(13, 28, 56, 0.25);
    text-decoration: none; color: inherit;
}
/* Desktop grid: 4-col via flex-wrap */
@media (min-width: 1024px) {
    .kp-product-grid--manual .kp-product-grid__items {
        display: flex; flex-wrap: wrap; gap: 16px;
    }
    .kp-product-grid__items .kp-product-grid__card--detail {
        width: calc(25% - 12px);
    }
}
.kp-product-grid__card-image--placeholder {
    height: 280px; background: #d2d2d7;
    border: none; border-bottom: 1px solid rgba(13, 28, 56, 0.25);
    aspect-ratio: auto; overflow: hidden;
}
.kp-product-grid__card-image--placeholder img {
    width: 100%; height: 100%; object-fit: cover;
}
.kp-product-grid__card-body {
    padding: 32px;
    display: flex; flex-direction: column; gap: 8px;
}
.kp-product-grid__card-body .kp-product-grid__card-title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px; line-height: 140%; font-weight: 400;
    color: var(--color-primary, #0D1C38); margin: 0;
}
.kp-product-grid__card-desc {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px; line-height: 150%; font-weight: 400;
    color: var(--color-primary, #0D1C38); margin: 0;
}
/* Nav: alleen zichtbaar op mobile */
.kp-product-grid__nav { display: none; }
@media (max-width: 1023px) {
    .kp-product-grid--manual .kp-product-grid__nav {
        display: flex; margin-top: 24px;
    }
    .kp-product-grid--manual .kp-product-grid__items {
        display: flex; flex-wrap: nowrap; overflow-x: auto;
        gap: 16px; padding-bottom: 16px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .kp-product-grid__items .kp-product-grid__card--detail {
        width: 320px; min-width: 320px; flex-shrink: 0;
        scroll-snap-align: start;
    }
    .kp-product-grid__card-image--placeholder {
        height: 200px;
    }
    .kp-product-grid__card-body {
        padding: 16px;
    }
    .kp-product-grid__card-body .kp-product-grid__card-title {
        font-size: 20px;
    }
}

/* ===================================================================
   USP COLUMNS — "Gebouwd op kwaliteit, compliance en continuïteit"
   =================================================================== */
.kp-usp-columns {
    background-color: #ffffff;
}
.kp-usp-columns__title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: clamp(28px, 2.5vw, 40px);
    font-weight: 400;
    line-height: 120%;
    color: var(--color-primary, #0D1C38);
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 80px);
}
.kp-usp-columns__grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.kp-usp-columns__divider {
    height: 1px;
    background: rgba(13, 28, 56, 0.25);
}
.kp-usp-columns__item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.kp-usp-columns__item-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}
.kp-usp-columns__item-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kp-usp-columns__item-icon svg {
    width: 24px;
    height: 24px;
}
.kp-usp-columns__item-title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 140%;
    color: var(--color-primary, #0D1C38);
}
.kp-usp-columns__item-text {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
}

@media (min-width: 1024px) {
    .kp-usp-columns__title {
        text-align: center;
    }
    .kp-usp-columns__grid {
        flex-direction: row;
        gap: 64px;
        align-items: flex-start;
    }
    .kp-usp-columns__divider {
        width: 1px;
        height: auto;
        align-self: stretch;
    }
    .kp-usp-columns__item {
        flex: 1;
    }
}

@media (max-width: 1023px) {
    .kp-usp-columns__title {
        text-align: left;
    }
}

/* ============================================================
   KP COMPLIANCE GRID
   ============================================================ */
.kp-compliance-grid {
    background: #ffffff;
}
.kp-compliance-grid__title {
    font-family: var(--font-heading, 'sofia-pro', sans-serif);
    font-size: clamp(32px, 3vw, 40px);
    font-weight: 400;
    line-height: 120%;
    color: var(--color-primary, #0D1C38);
    text-align: center;
    margin: 0 0 80px;
}
.kp-compliance-grid__items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px 64px;
}
.kp-compliance-grid__item {
    display: flex;
    flex-direction: row;
    gap: 16px;
    position: relative;
    align-items: flex-start;
}
/* Vertical divider left on 2nd and 3rd column items */
.kp-compliance-grid__item:nth-child(3n+2)::before,
.kp-compliance-grid__item:nth-child(3n)::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    height: 98px;
    width: 1px;
    background: rgba(13, 28, 56, 0.25);
}
.kp-compliance-grid__item-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--color-primary, #0D1C38);
    margin-top: 4px;
}
.kp-compliance-grid__item-title {
    font-family: var(--font-heading, 'sofia-pro', sans-serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 140%;
    color: var(--color-primary, #0D1C38);
    margin: 0 0 8px;
}
.kp-compliance-grid__item-text {
    font-family: var(--font-main, 'acumin-pro', sans-serif);
    font-size: 16px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
    margin: 0;
}

@media (max-width: 1023px) {
    .kp-compliance-grid__items {
        grid-template-columns: 1fr;
    }
    .kp-compliance-grid__item {
        padding: 24px 0;
        border-bottom: 1px solid rgba(13, 28, 56, 0.25);
    }
    .kp-compliance-grid__item::before {
        display: none !important;
    }
    .kp-compliance-grid__item:last-child {
        border-bottom: none;
    }
    .kp-compliance-grid__title {
        margin-bottom: 40px;
    }
}

/* ============================================================
   KP CASES CAROUSEL
   Figma: horizontal card (image left 560px + content right 560px)
   Non-active cards opacity: 0.4
   ============================================================ */
.kp-cases-carousel {
    background: rgba(13, 28, 56, 0.75);
    position: relative;
    overflow: hidden;
}
.kp-cases-carousel__inner {
    position: relative;
    z-index: 1;
    max-width: unset !important;
    padding: 0 !important;
    overflow: visible !important;
}
.kp-cases-carousel .kp-product-cards__nav {
    margin-top: 48px;
    padding: 0;
}
.kp-cases-carousel__card {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    height: 100%;
}
.kp-cases-carousel__card-image {
    position: relative;
    width: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 32px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 61%), rgba(0,0,0,0.1);
}
.kp-cases-carousel__card-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.kp-cases-carousel__card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 61%);
    z-index: 1;
}
.kp-cases-carousel__card-result {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 16px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kp-cases-carousel__card-result-label {
    font-family: var(--font-main, 'acumin-pro', sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: rgba(255, 255, 255, 0.7);
}
.kp-cases-carousel__card-result-value {
    font-family: var(--font-heading, 'sofia-pro', sans-serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 140%;
    color: #ffffff;
}
.kp-cases-carousel__card-body {
    width: 50%;
    flex-shrink: 0;
    background: #ffffff;
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.kp-cases-carousel__card-logo {
    font-family: 'Inter', var(--font-heading, 'sofia-pro', sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 23px; /* total gap from logo to quote = 47px (24px gap + 23px margin) */
}
.kp-cases-carousel__card-quote {
    font-family: var(--font-main, 'acumin-pro', sans-serif);
    font-size: 16px;
    line-height: 150%;
    color: #1d1d1f;
    margin: 0;
    font-style: normal;
}
.kp-cases-carousel__card-divider {
    border-top: 1px solid rgba(13, 28, 56, 0.25);
}
.kp-cases-carousel__card-author {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.kp-cases-carousel__card-name {
    font-family: var(--font-main, 'acumin-pro', sans-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    color: #1d1d1f;
}
.kp-cases-carousel__card-role {
    font-family: var(--font-main, 'acumin-pro', sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1d1d1f;
}

/* Slider nav on dark bg */
.kp-cases-carousel .kp-product-cards__nav {
    border-color: rgba(255, 255, 255, 0.25);
}
.kp-cases-carousel .kp-product-cards__line {
    background: rgba(255, 255, 255, 0.15);
}
.kp-cases-carousel .kp-product-cards__line-progress {
    background: #ffffff;
}
.kp-cases-carousel .kp-slider-arrow {
    border-color: #ffffff;
    background: #ffffff;
    color: #0d1c38;
}
.kp-cases-carousel .kp-slider-arrow:hover {
    border-color: #ffffff;
    background: #0d1c38;
    color: #ffffff;
}
@media (max-width: 1023px) {
    .kp-cases-carousel__card {
        flex-direction: column;
        height: 100%;
    }
    .kp-cases-carousel__card-image {
        width: 100%;
        aspect-ratio: 16/10;
    }
    .kp-cases-carousel__card-body {
        width: 100%;
        padding: 32px 24px;
        gap: 24px;
        flex: 1;
    }
}

/* ============================================================
   KP PRIVATE LABEL
   ============================================================ */
.kp-private-label {
    background: #ffffff;
}
.kp-private-label__grid {
    display: grid;
    grid-template-columns: minmax(0, 640px) 1fr;
    gap: clamp(40px, 8vw, 150px);
    align-items: start;
}
.kp-private-label__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.kp-private-label__title {
    font-family: var(--font-heading, 'sofia-pro', sans-serif);
    font-size: clamp(32px, 3vw, 48px);
    font-weight: 400;
    line-height: 120%;
    color: var(--color-primary, #0D1C38);
    margin: 0;
}
.kp-private-label__text {
    font-family: var(--font-main, 'acumin-pro', sans-serif);
    font-size: 20px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
    margin: 0;
}
.kp-private-label__divider {
    border-top: 1px solid rgba(13, 28, 56, 0.25);
}
.kp-private-label__items {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.kp-private-label__item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.kp-private-label__item-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}
.kp-private-label__item-title {
    font-family: var(--font-heading, 'sofia-pro', sans-serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 140%;
    color: var(--color-primary, #0D1C38);
    margin: 0 0 4px;
}
.kp-private-label__item-text {
    font-family: var(--font-main, 'acumin-pro', sans-serif);
    font-size: 16px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
    margin: 0;
}
.kp-private-label__image {
    border-radius: 0;
    overflow: hidden;
}
.kp-private-label__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4/3;
}

@media (max-width: 1023px) {
    .kp-private-label__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .kp-private-label__image {
        order: -1;
    }
}

/* ================================================================
   KP PROCESS STEPS
   2-column: content left + image right
   Figma: padding 160px 100px, gap 150px
   ================================================================ */
.kp-process-steps { background: #ffffff; }
.kp-process-steps__grid {
    display: grid;
    grid-template-columns: 640px 1fr;
    gap: clamp(40px, 8vw, 150px);
    align-items: start;
}
.kp-process-steps__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.kp-process-steps__intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.kp-process-steps__title {
    font-family: var(--font-heading, 'sofia-pro', sans-serif);
    font-size: clamp(28px, 2.5vw, 40px);
    line-height: 120%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
    margin: 0;
}
.kp-process-steps__desc {
    font-family: var(--font-main, 'acumin-pro', sans-serif);
    font-size: clamp(16px, 1.1vw, 20px);
    line-height: 150%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
    margin: 0;
}
.kp-process-steps__items {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.kp-process-steps__item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.kp-process-steps__item-title {
    font-family: var(--font-heading, 'sofia-pro', sans-serif);
    font-size: 24px;
    line-height: 140%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
    margin: 0;
}
.kp-process-steps__item-text {
    font-family: var(--font-main, 'acumin-pro', sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
    margin: 0;
}
.kp-process-steps__divider {
    border-top: 1px solid rgba(13, 28, 56, 0.25);
}
.kp-process-steps__btn { width: fit-content; }
.kp-process-steps__image {
    position: relative;
    overflow: hidden;
}
.kp-process-steps__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1023px) {
    .kp-process-steps__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .kp-process-steps__image {
        order: -1;
        max-height: 300px;
    }
}
/* ============================================================================
   KENNIS & INSPIRATIE: KP ARTICLE GRID
   ============================================================================ */

/* Figma: bg white */
.kp-article-grid {
    background: #ffffff;
}
.kp-article-grid .inner {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Filter bar — Figma mobile: transparent bg, column, gap 8px, no extra margin */
.kp-article-grid__filter-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}
/* Figma mobile: horizontal scroll, no wrap */
.kp-article-grid__filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.kp-article-grid__filters::-webkit-scrollbar { display: none; }
/* Figma: buttons bg #ebf1f8, padding 8px 32px, height 56px, flex-shrink 0 */
.kp-article-grid__filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 32px;
    height: 56px;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
    background: #EBF1F8;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.kp-article-grid__filter-pill:hover,
.kp-article-grid__filter-pill.is-active {
    background: rgba(13, 28, 56, 0.1);
}
/* Figma mobile: count above filters via order */
.kp-article-grid__count {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 14px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
    order: -1;
}

/* Card grid — Figma mobile: gap 24px, desktop: 32px 16px */
.kp-article-grid__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

/* Article card — Figma: bg white, border 1px rgba(13,28,56,0.25), padding 16px */
.kp-article-card {
    background: #ffffff;
    border: 1px solid rgba(13, 28, 56, 0.25);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.kp-article-card:hover {
    background-color: #ebf1f8;
    border-color: transparent;
}
.kp-article-card__image-link {
    display: block;
}
.kp-article-card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 530.67 / 334.49;
    object-fit: cover;
    display: block;
    align-self: stretch;
}
/* Figma mobile: padding 24px 0 0 0, gap 16px (between meta and title) */
.kp-article-card__body {
    padding: 24px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Metadata — Figma: flex column mobile (gap 4px), flex row desktop (gap 40px) */
.kp-article-card__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kp-article-card__meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Figma: AcuminPro-Bold, 16px */
.kp-article-card__meta-label {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 700;
    color: var(--color-primary, #0D1C38);
}
/* Figma: AcuminPro-Regular, 16px */
.kp-article-card__meta-value {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
}

/* Category pill — Figma: border-radius 52px, padding 6px 10px 4px 10px (desktop), 4px 8px 2px 8px (mobile) */
.kp-article-card__category-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px 2px 8px;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 14px;
    line-height: 150%;
    font-weight: 400;
    border: 1px solid currentColor;
    border-radius: 52px;
    white-space: nowrap;
}

/* Card title */
.kp-article-card__title-link {
    text-decoration: none;
}
.kp-article-card__title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 20px;
    line-height: 150%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin: 0;
}
.kp-article-card__title-link:hover .kp-article-card__title {
    text-decoration: none;
}

/* Load more — Figma mobile: padding 24px 16px, desktop: 48px 100px */
.kp-article-grid__load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 24px 0;
    border-bottom: 1px solid rgba(13, 28, 56, 0.25);
}
.kp-article-grid__load-more {
    width: fit-content;
}

/* Desktop */
@media (min-width: 1024px) {
    .kp-article-grid__filter-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: #EBF1F8;
        padding: 8px 16px 8px 8px;
        margin-bottom: 48px;
    }
    .kp-article-grid__filters {
        flex-wrap: wrap;
        overflow-x: visible;
    }
    .kp-article-grid__filter-pill {
        background: transparent;
    }
    .kp-article-grid__filter-pill:hover,
    .kp-article-grid__filter-pill.is-active {
        background: rgba(255, 255, 255, 0.6);
    }
    .kp-article-grid__count {
        order: 0;
    }
    .kp-article-card__category-pill {
        padding: 6px 10px 4px 10px;
        font-size: 16px;
    }
    .kp-article-grid__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px 16px;
    }
    .kp-article-card__body {
        padding: 32px 16px 16px 16px;
        gap: 32px;
    }
    .kp-article-card__meta {
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }
    .kp-article-grid__load-more-wrap {
        padding: 48px 0;
    }
    .kp-article-card__title {
        font-size: clamp(20px, 1.25vw, 24px);
        line-height: 140%;
        text-decoration: none;
    }
    .kp-article-card__title-link:hover .kp-article-card__title {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* ============================================================================
   KENNIS & INSPIRATIE: KP EVENT CARDS
   ============================================================================ */

/* Figma mobile: padding-bottom 16px, desktop: 160px */
.kp-event-cards {
    background: #ffffff;
}
.kp-event-cards .inner {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 16px;
}
/* Figma: gap 48px between event cards wrapper and content */
.kp-event-cards__grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Event card — Figma: border 1px, padding 16px mobile / 24px desktop, gap 24px */
.kp-event-card {
    border: 1px solid rgba(13, 28, 56, 0.25);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
/* Top row: date box + details side by side */
.kp-event-card__top {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
}

/* Date box — Figma: bg #ebf1f8, padding 4px 16px */
.kp-event-card__date-box {
    background: #EBF1F8;
    padding: 4px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
/* Figma: sofia-pro 32px, height 48px */
.kp-event-card__date-day {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 32px;
    line-height: 140%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
    height: 48px;
    display: flex;
    align-items: center;
}
/* Figma: acumin 18px, margin-top -12px */
.kp-event-card__date-month {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 18px;
    line-height: 150%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
    text-transform: uppercase;
    margin-top: -12px;
}

/* Event details — Figma: flex column, gap 4px */
.kp-event-card__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Figma: acumin 18px */
.kp-event-card__detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 18px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
}
.kp-event-card__detail svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-primary, #0D1C38);
}

/* Event title — Figma: sofia-pro 24px */
.kp-event-card__title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    line-height: 140%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
    text-align: left;
    margin: 0;
}

/* Event description — Figma: acumin 16px */
.kp-event-card__description {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
    margin: 0;
}

/* Desktop — Figma: 3 cards in row, padding 24px, bottom padding 160px */
@media (min-width: 1024px) {
    .kp-event-cards .inner {
        padding-bottom: 160px;
    }
    .kp-event-cards__grid {
        flex-direction: row;
        gap: 16px;
    }
    .kp-event-card {
        flex: 1;
        padding: 24px;
    }
}

/* ============================================================================
   KENNIS & INSPIRATIE: KP NEWSLETTER
   ============================================================================ */

.kp-newsletter {
    background: var(--color-primary, #0D1C38);
}
.kp-newsletter .inner {
    padding-left: 1rem;
    padding-right: 1rem;
}
/* Figma mobile: padding 64px 0, gap 24px. Desktop: 120px 0, gap 40px */
.kp-newsletter__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 64px 0;
    align-items: center;
    text-align: center;
}

/* Title */
.kp-newsletter__title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: clamp(28px, 2vw + 12px, 40px);
    line-height: 120%;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
}

/* Description */
.kp-newsletter__description {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    color: #ffffff;
    margin: 0;
    opacity: 0.85;
}

/* Form */
.kp-newsletter__form {
    width: 100%;
}
/* Figma mobile: gap 8px, stacked column */
.kp-newsletter__input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
/* Figma mobile: bg rgba(235,241,248,0.9), border rgba(255,255,255,0.25), padding 8px 12px 8px 48px, height 56px, mail icon 24px, centered content */
.kp-newsletter__input {
    width: 100%;
    padding: 8px 12px 8px 48px;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
    background-color: rgba(235, 241, 248, 0.9);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='17' viewBox='0 0 21 17' fill='none'%3E%3Cpath d='M1.20312 1.89746V15.1016H19.0957V2.29395L18.3203 2.80371L10.3643 8.04199C10.3039 8.07364 10.2515 8.09931 10.2061 8.11719C10.2029 8.11818 10.1861 8.12305 10.1494 8.12305C10.1121 8.12304 10.0955 8.11806 10.0928 8.11719C10.0471 8.09922 9.99432 8.07387 9.93359 8.04199L2.20312 2.95117V2.55176L9.87598 7.57715L10.1494 7.75684L10.4229 7.57812L18.7695 2.12793L19.7803 1.4668C19.7959 1.5446 19.8047 1.625 19.8047 1.70898V14.6016C19.8047 14.9228 19.6924 15.1963 19.4434 15.4443C19.1945 15.6924 18.9197 15.8047 18.5957 15.8047H1.70312C1.38141 15.8047 1.10823 15.6923 0.860352 15.4443L0.773438 15.3506C0.58577 15.1278 0.5 14.8831 0.5 14.6016V1.70898C0.500017 1.62046 0.509066 1.53575 0.526367 1.4541L1.20312 1.89746ZM1.70312 0.5H18.5957C18.9191 0.5 19.1933 0.613174 19.4424 0.862305H19.4434C19.553 0.971962 19.6346 1.08743 19.6934 1.20898H0.610352C0.669035 1.08699 0.750804 0.971226 0.860352 0.861328H0.861328C1.1093 0.612456 1.38205 0.500029 1.70312 0.5Z' fill='%230D1C38' stroke='%230D1C38'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 24px auto;
    border: 1px solid rgba(255, 255, 255, 0.25);
    outline: none;
    box-sizing: border-box;
    height: 56px;
    text-align: center;
    -webkit-appearance: none;
}
.kp-newsletter__input::placeholder {
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
}
.kp-newsletter__input:focus {
    border-color: #6BABD3;
}
/* Figma mobile: button full width (align-self: stretch), white bg, height 56px, justify-content center */
.kp-newsletter .kp-newsletter__submit.kp-btn {
    width: 100%;
    justify-content: center;
}

/* Desktop: Figma padding 120px 100px, input + button side by side, gap 16px */
@media (min-width: 1024px) {
    .kp-newsletter__content {
        padding: 120px 0;
        gap: 40px;
    }
    .kp-newsletter__input-group {
        flex-direction: row;
        gap: 16px;
    }
    .kp-newsletter__input {
        flex: 1;
        text-align: left;
    }
    .kp-newsletter__input::placeholder {
        text-align: left;
    }
    .kp-newsletter .kp-newsletter__submit.kp-btn {
        width: fit-content;
        flex-shrink: 0;
    }
}

/* Gravity Forms override inside newsletter */
.kp-newsletter .gform_wrapper { width: 100%; }
.kp-newsletter .gform_heading { display: none; }
.kp-newsletter .gform_validation_container { display: none !important; }
.kp-newsletter .gform_footer { display: none; }
.kp-newsletter .spacer.gfield { display: none !important; }
.kp-newsletter .gfield_label { display: none; }
.kp-newsletter .gform_fields {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
}
.kp-newsletter .gform_wrapper input[type="email"],
.kp-newsletter .gform_wrapper input[type="text"] {
    width: 100%;
    height: 56px;
    padding: 8px 12px 8px 48px;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
    background-color: rgba(235, 241, 248, 0.9);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='17' viewBox='0 0 21 17' fill='none'%3E%3Cpath d='M1.20312 1.89746V15.1016H19.0957V2.29395L18.3203 2.80371L10.3643 8.04199C10.3039 8.07364 10.2515 8.09931 10.2061 8.11719C10.2029 8.11818 10.1861 8.12305 10.1494 8.12305C10.1121 8.12304 10.0955 8.11806 10.0928 8.11719C10.0471 8.09922 9.99432 8.07387 9.93359 8.04199L2.20312 2.95117V2.55176L9.87598 7.57715L10.1494 7.75684L10.4229 7.57812L18.7695 2.12793L19.7803 1.4668C19.7959 1.5446 19.8047 1.625 19.8047 1.70898V14.6016C19.8047 14.9228 19.6924 15.1963 19.4434 15.4443C19.1945 15.6924 18.9197 15.8047 18.5957 15.8047H1.70312C1.38141 15.8047 1.10823 15.6923 0.860352 15.4443L0.773438 15.3506C0.58577 15.1278 0.5 14.8831 0.5 14.6016V1.70898C0.500017 1.62046 0.509066 1.53575 0.526367 1.4541L1.20312 1.89746ZM1.70312 0.5H18.5957C18.9191 0.5 19.1933 0.613174 19.4424 0.862305H19.4434C19.553 0.971962 19.6346 1.08743 19.6934 1.20898H0.610352C0.669035 1.08699 0.750804 0.971226 0.860352 0.861328H0.861328C1.1093 0.612456 1.38205 0.500029 1.70312 0.5Z' fill='%230D1C38' stroke='%230D1C38'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 24px auto;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0;
    outline: none;
    box-sizing: border-box;
    text-align: center;
    -webkit-appearance: none;
}
.kp-newsletter .gform_wrapper input[type="email"]::placeholder,
.kp-newsletter .gform_wrapper input[type="text"]::placeholder {
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
}
.kp-newsletter .brochure-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 56px;
    padding: 16px 32px;
    background: #ffffff;
    border: none;
    cursor: pointer;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    color: var(--color-primary, #0D1C38);
    transition: background 0.2s ease;
}
.kp-newsletter .brochure-submit-btn:hover { background: #EBF1F8; }
@media (min-width: 1024px) {
    .kp-newsletter .gform_fields {
        flex-direction: row;
        gap: 16px;
    }
    .kp-newsletter .gfield--type-email { flex: 1; }
    .kp-newsletter .gform_wrapper input[type="email"],
    .kp-newsletter .gform_wrapper input[type="text"] {
        text-align: left;
    }
    .kp-newsletter .gform_wrapper input[type="email"]::placeholder,
    .kp-newsletter .gform_wrapper input[type="text"]::placeholder {
        text-align: left;
    }
    .kp-newsletter .brochure-submit-btn { width: fit-content; }
}

/* Desktop newsletter text-col and form-col layout */
@media (min-width: 1024px) {
    .kp-newsletter__text-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .kp-newsletter__form-col {
        flex: 0 0 auto;
        min-width: 400px;
    }
}

/* ============================================================================
   KP News Rows (homepage "Kennis en inspiratie")
   Desktop: 3 full-width gestapelde rows met text-LINKS + image-RECHTS (540×340)
   Mobile : horizontale scroll-snap slider met cards (320px)
   ============================================================================ */
.kp-news-rows {
    background: #ffffff;
}
/* ── DESKTOP: stacked rows ── */
.kp-news-rows__list { display: block; }
.kp-news-rows__mobile { display: none; }

.kp-news-row {
    background: #ffffff;
    border-bottom: 1px solid rgba(13, 28, 56, 0.25);
    transition: background-color 0.3s ease;
}
.kp-news-row:hover {
    background-color: #ebf1f8;
}
/* Nieuws Card Large hover: 4 shapes (100px) op de image hoeken */
.kp-news-row__image {
    position: relative;
}
.kp-news-row__hover-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.kp-news-row__hover-shapes .kp-hover-shapes__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.kp-news-row__hover-shapes .kp-hover-shapes__row--bottom {
    transform: scaleY(-1);
}
.kp-news-row__hover-shapes .kp-hover-shape {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}
.kp-news-row:hover .kp-news-row__hover-shapes {
    opacity: 1;
}
.kp-news-row__inner {
    padding: 64px 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* Figma: gap 400px @ 1920 viewport — schaalt naar beneden */
    gap: clamp(40px, calc(25vw - 80px), 400px);
}
.kp-news-row__text {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    align-self: stretch;
}
.kp-news-row__meta {
    display: flex;
    flex-direction: row;
    gap: 40px;
    flex-wrap: wrap;
}
.kp-news-row__meta-item {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
}
.kp-news-row__meta-label {
    color: #0d1c38;
    font-family: "acumin-pro", sans-serif;
    font-size: 16px;
    line-height: 150%;
    font-weight: 700;
}
.kp-news-row__meta-value {
    color: #0d1c38;
    font-family: "acumin-pro", sans-serif;
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
}
.kp-news-row__title-link {
    text-decoration: none;
    align-self: stretch;
}
.kp-news-row__title {
    color: #0d1c38;
    font-family: "sofia-pro", sans-serif;
    font-size: 32px;
    line-height: 130%;
    font-weight: 400;
    margin: 0;
    transition: color .2s ease;
}
.kp-news-row__title-link:hover .kp-news-row__title { color: #6BABD3; }
.kp-news-row__text-body {
    color: #0d1c38;
    font-family: "acumin-pro", sans-serif;
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    margin: 0;
    margin-top: auto;
}
.kp-news-row__image {
    flex: 0 1 540px;
    width: 540px;
    max-width: 40%;
    aspect-ratio: 540 / 340;
    background: #c4c4c4;
    overflow: hidden;
    display: block;
}
.kp-news-row__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Footer button — Figma desktop: border-bottom rgba(13,28,56,0.25), padding 48px 100px, centered */
.kp-news-rows__footer {
    background: #ffffff;
    border-bottom: 1px solid rgba(13, 28, 56, 0.25);
}
.kp-news-rows__footer .inner {
    padding: 48px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Figma desktop .button3: padding 16px 32px, height 56px, gap 16px */
.kp-news-rows__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    height: 56px;
    gap: 16px;
}

/* ── MOBILE (< 1024px) ── */
@media (max-width: 1023px) {
    .kp-news-rows__list { display: none; }
    .kp-news-rows__mobile { display: block; }
    .kp-news-rows__mobile .inner {
        padding: 0 0 0 16px;
    }
    .kp-news-rows__nav {
        padding-right: 16px;
    }
    .kp-news-rows__slider {
        margin: 0;
        padding-right: 16px;
    }
    .kp-news-card {
        background: #ffffff;
        border: 1px solid rgba(13, 28, 56, 0.25);
        padding: 16px;
        display: flex;
        flex-direction: column;
        width: 100%;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    .kp-news-card:hover {
        background-color: #ebf1f8;
        border-color: transparent;
    }
    .kp-news-card__image-link {
        display: block;
        width: 100%;
        aspect-ratio: 288 / 181.53;
        overflow: hidden;
    }
    .kp-news-card__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .kp-news-card__body {
        padding: 24px 0 0 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .kp-news-card__meta {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .kp-news-card__meta-item {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
    }
    .kp-news-card__meta-label {
        color: #0d1c38;
        font-family: "acumin-pro", sans-serif;
        font-size: 16px;
        line-height: 150%;
        font-weight: 700;
    }
    .kp-news-card__meta-value {
        color: #0d1c38;
        font-family: "acumin-pro", sans-serif;
        font-size: 16px;
        line-height: 150%;
        font-weight: 400;
    }
    .kp-news-card__category-pill {
        display: inline-block;
        background: #fdf5ec;
        border: 1px solid #e8821a;
        border-radius: 52px;
        padding: 4px 8px 2px 8px;
        font-family: "acumin-pro", sans-serif;
        font-size: 14px;
        line-height: 150%;
        font-weight: 400;
        color: #e8821a;
    }
    .kp-news-card__title-link { text-decoration: none; }
    .kp-news-card__title {
        color: #0d1c38;
        font-family: "sofia-pro", sans-serif;
        font-size: 20px;
        line-height: 150%;
        font-weight: 400;
        text-decoration: underline;
        margin: 0;
    }

    /* Slider nav (progress lijn + arrows) */
    .kp-news-rows__nav {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-top: 24px;
    }
    .kp-news-rows__line {
        flex: 1;
        height: 4px;
        background: rgba(13, 28, 56, 0.25);
        position: relative;
    }
    .kp-news-rows__line-progress {
        position: absolute;
        top: 0;
        left: 0;
        height: 4px;
        background: #0d1c38;
        width: 0%;
        transition: width .3s ease;
    }
    .kp-news-rows__arrows {
        display: flex;
        gap: 16px;
        flex-shrink: 0;
    }
    .kp-news-rows__arrow {
        background: #ffffff;
        border: 1px solid #0d1c38;
        border-radius: 50px;
        padding: 12px;
        width: 48px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #0d1c38;
        transition: background .2s ease, color .2s ease;
    }
    .kp-news-rows__arrow:hover {
        background: #0d1c38;
        color: #ffffff;
    }
    .kp-news-rows__arrow svg { width: 24px; height: 24px; display: block; }

    /* Mobile section heeft border-bottom als geheel, niet per row */
    .kp-news-row { border-bottom: none; }

    /* Figma mobile: geen eigen footer border, align-items flex-start (links),
       24px boven button (gap tot arrows), 64px onder (ruimte tot Contact label) */
    .kp-news-rows__footer {
        border-bottom: none;
    }
    .kp-news-rows__footer .inner {
        padding: 24px 16px 64px 16px;
        justify-content: flex-start;
    }
    /* Figma mobile .button2: gap 12px */
    .kp-news-rows__btn {
        gap: 12px;
    }
}