/* ============================================================================
   THEME MOBILE — Custom Stylesheet
   ============================================================================

   TABLE OF CONTENTS
   -----------------
   1.  GLOBAL          Base & Resets (body, .inner, overflow)
   2.  GLOBAL          Pagebuilder Paddings
   3.  GLOBAL          Padding Overrides (!important)
   4.  GLOBAL          Sticky Header Logic
   5.  GLOBAL          Typography & Font Family
   6.  HEADER          CTA Buttons, Green Dot, Mobile Overrides
   7.  SECTION          Hero Grid (Bento Style)
   8.  SECTION          USP / Features Bar
   9.  SECTION          Bestsellers Slider
   10. SECTION          About Stats (Tekst & Cijfers)
   11. SECTION          Proces Stappen (Accordion)
   12. SECTION          Visit Showroom
   13. SECTION          Projects (Homepage)
   14. SECTION          Feedback / Reviews
   15. SECTION          Brochure Download
   16. SECTION          Nieuwsbrief
   17. SECTION          Breadcrumbs (Rank Math)
   18. SECTION          Header Layer (Hero Tekst)
   19. SECTION          Small Cards
   20. SECTION          Pagebuilder Content (Content Row & Centered Row)
   21. GLOBAL          Button Stijlen (.btn)
   22. SECTION          FAQ Styling
   23. SECTION          Contact Info Layer
   24. SECTION          Gravity Form (Centered / Figma)
   25. SECTION          Projects / Inspiratie Listing
   26. SECTION          Single Post (Blog)
   27. SECTION          Post Meta & Share Buttons
   28. SECTION          FAQ Overzicht (Figma)
   29. SECTION          Thanks Page
   30. SECTION          Vacature Detail
   31. SECTION          Project Detail
   32. COMPONENT       Header Rating Widget
   33. COMPONENT       Header Opening Hours
   34. GLOBAL          Filter Buttons
   35. RESPONSIVE      Mobile ≤63.9375rem (Combined)
   36. RESPONSIVE      Mobile ≤48rem (Combined)
   37. GLOBAL          Accessibility & Print

   ============================================================================ */

body .inner {
    max-width: 90.5rem;
}
.site-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
}
.logged-in .site-header-wrapper.is-scrolled {
    top: calc(var(--top-header-offset, 0) * -1) !important;
}
body {
    overflow-x: clip !important;
}
body.has-top-header .site {
    padding-top: unset;
}
body.archive .site-content {
    display: none;
}
/* ==========================================================================
   GLOBAL: Pagebuilder Paddings
   ========================================================================== */

.site-content>section {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    /* Mobile First (Standaard) */
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.site-content>section.pt-small {
    padding-top: 2.5rem;
}
/* Desktop (Vanaf 1024px) */

@media (min-width:1280px) {
    .site-content>section {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
    body:not(.home) section.header-layer.with-image, body section.header-layer {
        padding-bottom: 4.5rem;
        flex-direction: column;
    }
    body .pagebuilder-wrapper {
        margin: 7rem auto;
    }
    body .section-content-row, body .section-centered-row {
        padding: 7rem 0;
    }
}
/* ==========================================================================
   GLOBAL: Padding Overrides (!important)
   ========================================================================== */

/* Geen padding boven */

.site-content>section.pt-0 {
    padding-top: 0 !important;
}
/* Geen padding onder */

.site-content>section.pb-0 {
    padding-bottom: 0 !important;
}
/* Geen padding boven én onder */

.site-content>section.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Sticky Header Logic */

body.has-sticky-top-header .header-top {
    position: relative !important;
    top: unset !important;
}
body.has-sticky-top-header .site-header {
    position: relative !important;
    top: unset !important;
    padding: 1.125rem 0;
    border-bottom: 1px solid #F6F6F6;
}
body, button, input, select, optgroup, textarea {
    font-family: "Inter", sans-serif;
}
.header-cta-buttons .cta-btn {
    border-radius: 0.5rem;
    padding: 0.6875rem 1rem;
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}
/* Secondary CTA - NU WEER OUTLINED */

.header-cta-buttons .cta-btn.cta-btn--secondary {
    background: transparent;
    border: 1px solid #131313;
    color: #131313;
}
.header-cta-buttons .cta-btn.cta-btn--secondary:hover {
    background: #f6f6f6;
    opacity: 1;
}
/* Primary CTA - NU WEER PURPLE FILLED */

.header-cta-buttons .cta-btn:not(.cta-btn--secondary) {
    background: #7a68ae;
    border: 1px solid transparent;
    color: #ffffff;
}
.header-cta-buttons .cta-btn:not(.cta-btn--secondary):hover {
    opacity: 0.9;
    background: #7a68ae;
}
.green-dot {
    display: inline-flex;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #34A853
}
@media (max-width:1279px) {
    .mobile-hidden {
        display: none;
    }
    .th-zone--right, .th-zone--left {
        display: none;
    }
    .header-top {
        height: unset;
    }
    .header-top .th-grid {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-menu-toggle {
        color: #221D1D;
    }
    body .site-logo {
        max-width: 8.9375rem;
    }
}
/* ==========================================================================
   SECTION: Hero Grid (Bento Style)
   ========================================================================== */

/* --- 1. Container & Layout --- */

body .site .hero-grid-laag {
    position: relative;
    padding: 2.5rem 0;
}
.hero-grid-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}
/* --- 2. Main Hero Card (Links) --- */

.hero-main-card {
    position: relative;
    border-radius: 1rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: flex-end;
    min-height: 28.125rem;
    /* Mobiele hoogte */
}
/* Overlays (Algemeen) */

.hero-overlay, .mini-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Subtiele gradient zodat tekst leesbaar blijft */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.65) 90%);
    z-index: 1;
    pointer-events: none;
}
/* Main Content Wrapper */

.hero-content {
    position: relative;
    z-index: 2;
    padding: 1rem;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Alles naar beneden duwen */
}
/* --- 3. Typografie Main Card --- */

.hero-title {
    color: #FFF;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}
.hero-subtitle {
    color: #FFF;
    font-size: 1.125rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    /* Ruimte op mobiel boven de knop */
    max-width: 90%;
    opacity: 0.9;
}
/* --- 4. Main Button (Positionering) --- */

.hero-action {
    margin-top: auto;
    /* Mobiel: duw naar beneden als er ruimte over is */
}
.btn-hero-white {
    background: #FFF;
    color: #131313;
    padding: 0 1.5rem;
    height: 3.25rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}
.btn-hero-white:hover {
    background: #f2f2f2;
}
/* --- 5. Side Grid (Rechts) --- */

.hero-side-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}
.hero-mini-card {
    position: relative;
    flex: 1;
    /* Verdeel ruimte gelijkmatig */
    border-radius: 1rem;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    min-height: 11.25rem;
    /* Mobiele min-hoogte */
}
.mini-card-content {
    position: relative;
    z-index: 2;
    padding: 1.25rem;
    width: 100%;
    display: flex;
}
/* --- 6. Small Grid Buttons --- */

.mini-card-btn {
    background: #FFF;
    color: #131313;
    padding: 0 1.25rem;
    /* Vaste maten voor uniformiteit */
    height: 3rem;
    min-width: 10rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    /* Tekst links, pijl rechts in de knop */
    gap: 0.75rem;
    white-space: nowrap;
}
.mini-card-btn svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
/* Subtiel pijltje bewegen bij hover */

.hero-mini-card:hover .mini-card-btn svg {
    transform: translateX(0.25rem);
}
/* ==========================================================================
   SECTION: USP / Features Bar
   ========================================================================== */

/* Container styling (Mobile First) */

body .site .features-section {
    padding: 1rem 0;
    /* Figma Mobile: padding 1rem */
    width: 100%;
    /* border-bottom: 1px solid #E5E5E5;  <-- Optioneel, vaak mooi bij USP bars */
}
.features-wrapper {
    display: flex;
    flex-direction: column;
    /* Mobile: onder elkaar */
    gap: 0.5rem;
    /* Figma Mobile: gap 0.5rem */
    align-items: flex-start;
}
/* Feature Item */

.feature-item {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
}
/* Icon Container */

.feature-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* SVG Styling */

.feature-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}
/* Text Styling */

.feature-text {
    color: #131313;
    font-size: 0.875rem;
    line-height: 1.5;
    /* 150% */
    font-weight: 400;
}
/* ==========================================================================
   SECTION: Bestsellers Slider
   ========================================================================== */

.bestsellers-section {
    padding: 3.75rem 0;
    position: relative;
    overflow: hidden;
    /* Belangrijk voor slider overflow */
}
/* Header */

.bestsellers-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
    align-items: flex-start;
}
.bestsellers-title {
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
    color: #131313;
}
/* De "Bekijk alle" knop (Linkstijl) */

.bestsellers-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #131313;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
}
.bestsellers-link-btn .btn-icon svg {
    transition: transform 0.2s ease;
}
.bestsellers-link-btn .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.bestsellers-link-btn:hover .btn-icon svg {
    transform: translateX(0.25rem);
}
/* Cards */

.bestseller-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.card-image-wrap {
    display: block;
    width: 100%;
    aspect-ratio: 4/3.5;
    /* Figma verhouding benaderd */
    background: #f6f6f6;
    border-radius: 1rem;
    overflow: hidden;
}
.card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.bestseller-card:hover .card-image-wrap img {
    transform: scale(1.05);
}
.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}
.card-title a {
    text-decoration: none;
    color: #131313;
}
.card-subtitle {
    color: #666666;
    /* Of primary color variabele */
    font-size: 1rem;
}
/* Custom Navigation Buttons */

.bestsellers-nav {
    display: none;
    /* Mobile: hidden, swipe only */
}
/* ==========================================================================
   SECTION: About Stats (Tekst & Cijfers)
   ========================================================================== */

.section-about-stats {
    padding: var(--small-padding, 2.5rem 0);
}
.section-about-stats .about-content-card {
    background: #F6F6F6;
    /* De grijze achtergrond uit Figma */
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
/* --- Linker Kolom: Tekst & Knop --- */

.section-about-stats .about-text-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}
.section-about-stats .paragraph p {
    color: var(--color-text-dark, #131313);
    font-family: "Inter", sans-serif;
    font-size: 1.25rem;
    /* Mobiel start grootte */
    line-height: 140%;
    font-weight: 400;
    margin: 0;
}
/* Knop Styling (.menu-item is de <a> tag in jouw HTML) */

.section-about-stats .about-button-container .menu-item {
    background: var(--color-primary, #7A68AE);
    border-radius: 0.5rem;
    padding: 0.875rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
    border: none;
}
.section-about-stats .about-button-text {
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
}
.section-about-stats .about-button-container .menu-item:hover {
    background: var(--color-primary-hover, #655494);
    transform: translateY(-2px);
}
/* --- Rechter Kolom: Stats (Witte kaarten) --- */

.section-about-stats .stats-section {
    display: flex;
    flex-direction: column;
    /* Mobiel: onder elkaar */
    gap: 1rem;
    width: 100%;
}
.section-about-stats .stat-item {
    background: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    flex: 1;
    /* Zorgt dat ze even breed zijn */
    box-shadow: 0 2px 0.625rem rgba(0, 0, 0, 0.03);
}
.section-about-stats .stat-value {
    color: var(--color-primary, #7A68AE);
    font-family: "Inter", sans-serif;
    font-size: 2.5rem;
    line-height: 120%;
    font-weight: 600;
    /* SemiBold */
}
.section-about-stats .stat-description {
    color: var(--color-text-dark, #131313);
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 150%;
    font-weight: 400;
}
/* ==========================================================================
   SECTION: Proces Stappen (Accordion)
   ========================================================================== */

.process-wrapper {
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
/* Header & Knoppen Styling (uit jouw code) */

.process-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}
.process-title {
    color: #131313;
    font-family: "Inter", sans-serif;
    font-size: 2rem;
    line-height: 130%;
    font-weight: 600;
}
/* Helpers */

.desktop-only {
    display: none !important;
}
.mobile-only {
    display: flex !important;
    width: 100%;
}
.menu-item.mobile-only {
    margin-top: 1.5rem;
}
.mobile-only a {
    width: 100%;
    justify-content: center;
    text-decoration: none;
    display: flex;
}
/* ---------------------------------------------------------
   DE ACCORDION CONTAINER (.component-7)
   --------------------------------------------------------- */

.component-7 {
    display: flex;
    flex-direction: column;
    /* Mobiel: onder elkaar */
    gap: 1rem;
    width: 100%;
}
/* ---------------------------------------------------------
   DE KAART (.process-card)
   --------------------------------------------------------- */

.process-card {
    position: relative;
    border-radius: 1rem;
    background-size: 65.375rem;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    /* Mobiel dimensies uit je design */
    width: 100%;
    height: 27.5rem;
    flex-shrink: 0;
    /* Animatie settings */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Overlay standaard (Inactief) */

.process-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    transition: background 0.4s ease;
    /* Jouw inactieve gradient */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 47.11%, rgba(0, 0, 0, 0.4) 69.23%)
}
/* Overlay Actief */

.process-card.is-active .process-card__overlay {
    /* Jouw actieve gradient */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 47.11%, rgba(0, 0, 0, 0.4) 69.23%);
}
.process-card__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* Badge (Het nummer) */

.process-card__badge {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 4.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    /* Inactieve stijl: border */
    border: 1px solid #ffffff;
    background: transparent;
}
.process-card.is-active .process-card__badge {
    /* Actieve stijl: wit vlak */
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(0.25rem);
    /* Optioneel, modern */
}
.badge-number {
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 400;
}
/* TEKST (Standaard verborgen!) */

.process-card__text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    /* Verberg alles in dichte toestand */
    opacity: 0;
    visibility: hidden;
    transform: translateY(1.25rem);
    transition: all 0.4s ease;
}
/* Als actief: Toon tekst */

.process-card.is-active .process-card__text {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.kennismaken {
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 2rem;
    line-height: 130%;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    /* Voorkom breken */
}
.description-text {
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 1.125rem;
    line-height: 150%;
    font-weight: 400;
    max-width: 50.75rem;
}
/* --- BUTTON STYLING (Figma: .menu-item) --- */

/* De wrapper is visueel de knop */

.process-header .menu-item, .process-wrapper .mobile-only.menu-item {
    background: #7a68ae;
    /* Primary Purple */
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    /* Zorg dat de link de hele ruimte pakt */
    position: relative;
}
/* Hover effect */

.process-header .menu-item:hover, .process-wrapper .mobile-only.menu-item:hover {
    background: #655694;
    /* Iets donkerder paars */
    transform: translateY(-2px);
}
/* De link zelf (reset styling) */

.process-button-container, .process-btn-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0.875rem 1rem;
}
/* De tekst in de knop */

.process-button-text {
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}
/* --- Container & Basis --- */

.visit-showroom-block {
    width: 100%;
    position: relative;
    background: #fff;
}
/* Padding classes (uit ACF) */

.visit-showroom-block.pt-0 {
    padding-top: 0;
}
.visit-showroom-block.pb-0 {
    padding-bottom: 0;
}
.visit-showroom-block.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}
/* --- Deel 1: Visit Sectie --- */

/* Het grijze vlak (volgens design #f6f6f6) */

.visit-content {
    background-color: #f6f6f6;
    border-radius: 1rem;
    padding: 3.75rem 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    /* Ruimte tussen titel en knoppen */
    align-items: center;
    padding-bottom: 2rem;
}
.visit-showroom-block.no-visit-header .visit-content {
    padding: 0;
}
.visit-title {
    font-size: 2rem;
    font-weight: 600;
    color: #131313;
    line-height: 1.3;
    margin: 0;
    max-width: 50rem;
}
/* De knoppen container */

.visit-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 46.5rem;
}
/* De Paarse Knoppen (.menu-item style) */

.tag-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    background-color: #7a68ae;
    /* Design paars */
    color: #ffffff;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.tag-link:hover {
    background-color: #6a589e;
    /* Iets donkerder bij hover */
}
/* --- Deel 2: Showroom Banner --- */

.showroom-banner {
    position: relative;
    width: 100%;
    height: 35rem;
    /* Hoogte volgens design */
    overflow: hidden;
    display: flex;
    align-items: center;
}
/* Achtergrond (Video/Foto) */

.showroom-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 1rem;
    overflow: hidden;
}
.showroom-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Zorgt dat beeld vult zonder vervorming */
    display: block;
}
/* Overlay gradient */

.showroom-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /* Donkere overlay voor leesbaarheid */
    z-index: 2;
}
/* Content over de banner */

.showroom-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    /* Content onderin uitlijnen */
    padding: 2rem;
    border-radius: 1rem;
}
.showroom-inner-content {
    max-width: 43.75rem;
    color: #fff;
    /* Wil je de tekst gecentreerd of links? Design lijkt links */
    text-align: left;
}
.showroom-title {
    font-size: 2rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
    line-height: 1.3;
}
.showroom-text {
    font-size: 1rem;
    line-height: 1.5;
    color: #ffffff;
    margin-bottom: 2rem;
    font-weight: 500;
}
/* De Witte Knop */

.btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    background-color: #ffffff;
    color: #131313;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.2s ease;
    gap: 0.5rem;
}
.btn-white:hover {
    transform: translateY(-2px);
}
.btn-icon {
    display: flex;
}
/* --- Mobiele Optimalisatie --- */

@media (max-width:768px) {
    .visit-content {
        padding: 2.5rem 1.5rem;
    }
    .visit-title {
        font-size: 1.625rem;
    }
    .showroom-banner {
        height: unset;
    }
    .showroom-inner-content {
        text-align: center;
        /* Op mobiel vaak mooier gecentreerd */
        margin: 0 auto;
    }
    .showroom-content {
        justify-content: center;
        /* Verticaal centreren op mobiel? Of bottom houden */
    }
}
/* --- Container --- */

.projects-content {
    background: #fff;
    /* Padding wordt geregeld door globale .site-content > section regels */
}
/* Header */

.projects-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 4rem;
}
.projects-title {
    color: #131313;
    font-family: "Inter", sans-serif;
    font-size: 2rem;
    line-height: 1.3;
    font-weight: 600;
}
/* Knop Stijl (Hergebruikt van vorige styles) */

.projects-content .menu-item {
    background: #7a68ae;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}
.projects-content .menu-item a {
    padding: 0.875rem 1rem;
}
.projects-content .menu-item:hover {
    background: #6a589e;
}
.projects-button-container {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.projects-button-text {
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 500;
}
/* --- Grid & Cards --- */

.projects-images {
    width: 100%;
}
.projects-grid {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    width: 100%;
}
/* De Project Kaart (Vervangt component-26/27) */

.project-card {
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Content onderin */
    flex: 1;
    /* Beide kaarten even breed */
    height: 35rem;
    position: relative;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    /* Link reset */
    transition: transform 0.3s ease;
    overflow: hidden;
}
.project-card:hover {
    transform: translateY(-0.25rem);
}
.project-card-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}
/* De Witte Tag */

.project-tag {
    background: #ffffff;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    display: inline-flex;
}
.project-tag-text {
    color: #131313;
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
}
/* Grote Titel in kaart */

.project-heading {
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 2rem;
    line-height: 1.3;
    font-weight: 600;
    margin: 0;
}
/* Beschrijving tekst */

.project-description {
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 1.125rem;
    line-height: 1.5;
    font-weight: 400;
}
/* --- Mobiel --- */

@media (max-width:768px) {
    .projects-header {
        margin-bottom: 2rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .desktop-only {
        display: none;
    }
    .projects-grid {
        flex-direction: column;
        /* Onder elkaar op mobiel */
        gap: 1.5rem;
    }
    .project-card {
        height: 28.125rem;
        /* Iets minder hoog op mobiel */
        width: 100%;
    }
    .project-heading {
        font-size: 1.5rem;
    }
    .project-description {
        font-size: 1rem;
    }
}
/* --- CONTAINER --- */

.feedback-block .feedback-container {
    background: #f6f6f6;
    border-radius: 1rem;
    padding: 4rem 2rem 2rem 2rem;
    /* Ruimte bovenin voor header */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    /* Ruimte tussen onderdelen */
    position: relative;
    overflow: hidden;
    /* Zodat de border-radius behouden blijft */
}
/* --- 1. HEADER (Logo & Titel) --- */

.feedback-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
}
.feedback-logo {
    width: 8.875rem;
    height: 2.5rem;
}
.feedback-title {
    color: #131313;
    font-family: "Inter", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    max-width: 27.5rem;
}
/* --- 2. SCORE (Midden) --- */

.feedback-score-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.score-stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.score-number {
    font-size: 1rem;
    font-weight: 600;
    color: #131313;
    margin-left: 0.75rem;
}
.score-text {
    font-size: 1.25rem;
    color: #131313;
    text-align: center;
}
.score-link {
    font-weight: 700;
    text-decoration: underline;
    color: #131313;
}
.score-link:hover {
    text-decoration: none
}
/* --- 3. SLIDER SECTIE (Onderkant - Volle Breedte) --- */

.feedback-slider-container {
    width: 100%;
    height: 35rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Content onderin */
}
.slider-inner {
    padding: 2rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
}
/* Witte Kaart (Review Content) */

.review-card-wrapper {
    background: #ffffff;
    border-radius: 1rem;
    padding: 2rem;
    width: 100%;
    max-width: 37.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.05);
}
/* Review Slide Items */

.review-slide {
    display: none;
    flex-direction: column;
    gap: 1.5rem;
    animation: fadeIn 0.5s ease;
}
.review-slide.active {
    display: flex;
}
.review-stars {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}
.review-score {
    margin-left: 0.5rem;
    font-weight: 600;
}
.review-quote {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #131313;
    font-style: italic;
    margin: 0;
}
.review-author .author-name {
    font-weight: 700;
    color: #131313;
}
.review-author .author-product {
    color: #666;
    font-size: 0.875rem;
}
/* Navigatie Knoppen */

.slider-navigation {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 0;
    /* Uitlijnen met witte kaart */
}
.feedback-block .nav-btn {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.nav-btn.prev {
    background: #f6f6f6;
}
.nav-btn.prev:hover {
    background: #e0e0e0;
}
.nav-btn.next {
    background: #7a68ae;
}
.nav-btn.next:hover {
    background: #6a589e;
}
.slide-counter {
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    min-width: 2.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ANIMATIE */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* MOBIEL */

@media (max-width:768px) {
    .feedback-slider-container {
        height: auto;
        min-height: 31.25rem;
    }
    .slider-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .slider-navigation {
        width: 100%;
        justify-content: space-between;
    }
}
/* --- CONTAINER --- */

.brochure-block {
    width: 100%;
    position: relative;
    /* Padding wordt geregeld door global .site-content > section */
}
/* De Grote Kaart (Component 27) */

.brochure-card {
    background-color: #F1F1EF;
    /* Fallback */
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 1rem;
    padding: 4rem 2rem 2rem 2rem;
    height: 35rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Content onderin */
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}
/* Content Wrapper */

.brochure-content-wrapper {
    max-width: 44.375rem;
    /* Zorgt dat de content niet te breed wordt */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
/* --- TEXT GEDEELTE --- */

.brochure-text-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.brochure-title {
    color: #131313;
    font-family: "Inter", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    text-align: left;
    /* Volgens design left aligned als het in frame zit */
}
.brochure-description {
    color: #131313;
    font-family: "Inter", sans-serif;
    font-size: 1.125rem;
    line-height: 1.5;
    font-weight: 400;
}
/* --- GRAVITY FORMS STYLING --- */

/* Zorg dat de velden transparant zijn of passen bij design */

.brochure-form-container .gform_wrapper {
    margin: 0;
}
/* REMOVED DUPLICATE: .brochure-form-container .gform_footer (overridden later with !important) */

/* REMOVED DUPLICATE: .brochure-form-container input[type="email/text"] basic styling (overridden later with !important) */

/* De Custom Submit Button (uit functions.php) */

.custom-brochure-btn {
    background: #ededed;
    /* Kleur uit design */
    border-radius: 1rem;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    /* Rechts minder padding voor de pijl box */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 25.5rem;
    height: 3.875rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    color: #1f1f1f;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 400;
}
.custom-brochure-btn:hover {
    background: #e0e0e0;
}
/* De tekst in de knop */

.custom-brochure-btn .btn-text {
    text-align: left;
    flex: 1;
    display: none;
}
/* Het vierkantje met de pijl */

.custom-brochure-btn .btn-arrow-box {
    background-color: #7a68ae;
    width: 2.875rem;
    height: 2.875rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* REMOVED DUPLICATE: .brochure-form-container .gfield_checkbox (redefined later) */

/* REMOVED DUPLICATE: .brochure-form-container .gfield_checkbox label (redefined later) */

/* Mobiel */

@media (max-width:768px) {
    .brochure-card {
        height: auto;
        padding: 2.5rem 1.5rem;
        min-height: 31.25rem;
    }
    .brochure-title {
        font-size: 1.625rem;
    }
    .custom-brochure-btn {
        width: 100%;
        max-width: 100%;
    }
}
/* --- BROCHURE FORMULIER (JS METHODE) --- */

/* 1. DE CONTAINER (De grijze balk) */

/* Omdat we de footer hierin hebben gezet met JS, is dit nu de ouder */

.brochure-form-container .ginput_container_email {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    /* De grijze kleur */
    border-radius: 1rem;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    /* Padding rondom de content */
    width: 100%;
    max-width: 25.5rem;
    height: 3.875rem;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
    /* Ruimte voor eventuele error messages */
}
/* 2. HET INVOERVELD */

/* Deze maken we transparant, hij zit IN de grijze container */

.brochure-form-container input[type="email"] {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    flex-grow: 1;
    /* Pakt alle overgebleven ruimte */
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    color: #1f1f1f;
}
.brochure-form-container input::placeholder {
    color: #1f1f1f;
    opacity: 1;
}
/* 3. DE GRAVITY FORMS FOOTER */

/* Deze zit nu naast de input in de flex container */

.brochure-form-container .gform_footer {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    flex-shrink: 0;
    /* Zorg dat hij niet krimpt */
}
/* 4. DE SUBMIT KNOP (Paarse blokje) */

body .site .site-content .gform-body .brochure-submit-btn {
    width: 2.875rem;
    height: 2.875rem;
    background-color: #7a68ae;
    border-radius: 0.75rem;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    margin-bottom: 0;
}
body .site .site-content .gform-body .brochure-submit-btn:hover {
    background-color: #6a589e;
}
/* Verberg de tekst span (die we in PHP hebben laten staan) */

body .site .site-content .gform-body .brochure-submit-btn .btn-text {
    display: none;
}
/* De SVG */

body .site .site-content .gform-body .brochure-submit-btn svg {
    display: block;
    width: 1.0625rem;
    height: 0.75rem;
}
/* --- OPTIES VERBERGEN --- */

.brochure-form-container .gfield_label {
    display: none !important;
}
/* Privacy Checkbox iets omlaag */

.brochure-form-container .gfield--type-checkbox {
    margin-top: 1rem;
}
/* REMOVED DUPLICATE: .brochure-form-container .gfield_checkbox input accent-color (superseded by full custom checkbox below) */

.gform_required_legend {
    display: none;
}
/* Mobiel */

@media (max-width:768px) {
    .brochure-form-container .ginput_container_email {
        max-width: 100%;
    }
}
/* --- BROCHURE PRIVACY CHECKBOX --- */

/* 1. Wrapper Layout (overeenkomstig met .checkbox uit Figma) */

.brochure-form-container .gfield_checkbox {
    display: flex;
    flex-direction: column;
    /* Voor als er meerdere opties zijn, maar hier is het er 1 */
    gap: 0.5rem;
}
.brochure-form-container .gchoice {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    /* Ruimte tussen vakje en tekst */
    align-items: flex-start;
    /* Uitlijnen aan de bovenkant */
}
/* 2. Het Vierkantje (overeenkomstig met .checkbox2 uit Figma) */

.brochure-form-container input[type="checkbox"] {
    /* Verberg standaard browser stijl */
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    /* Figma styles */
    background-color: #ffffff;
    border-radius: 0.25rem;
    width: 1.125rem !important;
    height: 1.125rem !important;
    flex-shrink: 0;
    /* Zorg dat hij niet geplet wordt */
    cursor: pointer;
    /* Positionering ten opzichte van tekst */
    position: relative;
    top: 2px;
    /* Optische correctie om uit te lijnen met de eerste regel tekst */
    border: 0 !important;
    transition: all 0.2s ease;
    background-size: 0.875rem;
    background-position: center;
    background-repeat: no-repeat;
}
/* Hover effect */

.brochure-form-container input[type="checkbox"]:hover {
    border-color: #d9d9d9;
}
/* 3. Checked State (Het vinkje) */

.brochure-form-container input[type="checkbox"]:checked {
    background-color: #7a68ae;
    /* De paarse brand kleur */
    border-color: #7a68ae;
    /* Data URI van een simpel wit vinkje */
    background-image: url("data:image/svg+xml,%3Csvg xmlns=!string!viewBox=!string!fill=!string!width=!string!height=!string!%3E%3Cpath d=!string!/%3E%3C/svg%3E");
    background-size: 0.875rem;
    background-position: center;
    background-repeat: no-repeat;
}
/* 4. De Tekst (overeenkomstig met .label uit Figma) */

.brochure-form-container .gfield_checkbox label {
    color: #131313;
    font-family: "Inter", sans-serif;
    /* Fallback, pakt waarschijnlijk body font */
    font-size: 0.75rem;
    line-height: 1.5;
    /* 150% */
    font-weight: 400;
    cursor: pointer;
    max-width: 100%;
    /* Zorgt dat tekst netjes wrapt */
}
/* Linkjes in het label (bv. 'privacyverklaring') */

.brochure-form-container .gfield_checkbox label a {
    color: #131313;
    text-decoration: underline;
    font-weight: 600;
}
body .gfield--type-consent div label {
    font-size: 0.75rem;
    line-height: 150%;
}
.gfield--type-consent div {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
/* ==========================================================================
   SECTION: Nieuwsbrief
   ========================================================================== */

/* De Paarse Balk */

.newsletter-block {
    background-color: #7a68ae;
    width: 100%;
}
/* De Container Content */

.newsletter-scope {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    max-width: 37.5rem;
    margin: 0 auto;
    text-align: center;
}
/* De Titel (Wit) */

.newsletter-scope .newsletter-title {
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}
/* ==========================================================================
   SECTION: Nieuwsbrief — Gravity Forms Styling
   ========================================================================== */

/* Reset standaard GF margins */

.newsletter-scope .gform_wrapper {
    margin: 0 !important;
}
.newsletter-scope form {
    margin: 0 auto;
    width: 100%;
    max-width: 37.5rem;
    /* Breedte uit Figma */
}
.newsletter-form-wrapper {
    width: 100%;
}
.site-content>section.newsletter-block, .newsletter-block {
    padding: 3rem 0;
}
/* 1. DE GRIJZE CONTAINER (Flexbox voor Input + Knop) */

/* Dit is de div waar JS de knop in heeft gezet */

.newsletter-scope .ginput_container_email {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ededed;
    /* Grijs */
    border-radius: 1rem;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    width: 100%;
    height: 3.875rem;
    box-sizing: border-box;
    margin-bottom: 0;
    transition: background-color 0.3s;
}
/* Focus effect op de hele balk */

.newsletter-scope .ginput_container_email:focus-within {
    background-color: #e0e0e0;
}
/* 2. HET INVOERVELD (Transparant gemaakt) */

.newsletter-scope input[type="email"] {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    flex-grow: 1;
    /* Vult de ruimte */
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    color: #1f1f1f;
    font-weight: 400;
}
.newsletter-scope input::placeholder {
    color: #1f1f1f;
    opacity: 1;
}
/* 3. DE FOOTER CONTAINER (Waar de knop in zit) */

.newsletter-scope .gform_footer {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    flex-shrink: 0;
}
/* 4. DE SUBMIT KNOP (Paars blokje met pijl) */

/* We targeten de button die door de PHP filter is aangemaakt */

.newsletter-scope button[type="submit"], .newsletter-scope .brochure-submit-btn {
    /* Als je dezelfde PHP functie gebruikt */
    width: 2.875rem;
    height: 2.875rem;
    background-color: #7a68ae;
    border-radius: 0.75rem;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.newsletter-scope button:hover {
    background-color: #6a589e;
    /* Donkerder paars */
}
/* De SVG in de knop */

.newsletter-scope button svg {
    display: block;
    width: 1.0625rem;
    height: 0.75rem;
    fill: white;
}
/* Verberg de tekst in de knop (in case PHP filter fails or shows text) */

.newsletter-scope button .btn-text {
    display: none;
}
/* 5. OVERIGE PUNTJES OP DE I */

/* Labels verbergen */

.newsletter-scope .gfield_label {
    display: none !important;
}
/* Error messages styling (voor het geval dat) */

.newsletter-scope .gfield_description.validation_message {
    color: #ffcccc;
    /* Lichtrood op paarse achtergrond */
    font-size: 0.8125rem;
    margin-top: 0.5rem;
    text-align: left;
}
/* Mobiel */

@media (max-width:768px) {
    .newsletter-block {
        padding: 3rem 1.5rem;
    }
    .newsletter-scope .newsletter-title {
        font-size: 1.625rem;
    }
    .newsletter-scope form {
        max-width: 100%;
    }
}
/* ==========================================================================
   SECTION: Breadcrumbs (Rank Math)
   ========================================================================== */

/* 1. De Container (Flexbox) */

.rank-math-breadcrumb p {
    display: flex;
    flex-wrap: wrap;
    /* Zodat het op mobiel niet breekt */
    align-items: center;
    gap: 0;
    /* Gap staat op 0 in design */
    margin: 0;
    padding: 0;
}
/* 2. De Items (Links en actieve item) */

.rank-math-breadcrumb a, .rank-math-breadcrumb .last {
    color: #000000;
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    /* 150% */
    font-weight: 400;
    /* Padding uit design (.breadcrumb-item heeft 0.5rem) */
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}
.rank-math-breadcrumb a:hover {
    color: #7a68ae;
    /* Hover kleurtje (optioneel) */
}
/* 3. De Separator (Vervang het streepje door SVG) */

nav.breadcrumbs {
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.header-layer .content-box.text-align-left {
    justify-content: flex-start;
    align-items: flex-start;
}
.header-layer .content-box h1 {
    color: var(--font-dark);
    font-weight: 600;
}
/* ==========================================================================
   SECTION: Header Layer (Hero Tekst)
   ========================================================================== */

/* De Container (vervangt .hero-text) */

.header-layer .content-box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    margin: 0 auto;
    max-width: 100%;
}
/* De Titel (vervangt .hero-title) */

.header-layer h1 {
    color: #000000;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 3rem;
    line-height: 1.2;
    /* 120% */
    font-weight: 600;
    margin: 0;
    /* Reset standaard browser margins */
}
/* De Subtitel Tekst (vervangt .hero-subtitle) */

.header-layer .text-box p {
    color: #000000;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 1.125rem;
    line-height: 1.5;
    /* 150% */
    font-weight: 400;
    margin: 0;
}
/* Mobiele aanpassing (optioneel, voor betere leesbaarheid) */

@media (max-width:768px) {
    .header-layer h1 {
        font-size: 2rem;
    }
    .header-layer .text-box p {
        font-size: 1rem;
    }
}
.header-layer .text-box {
    margin: 0;
}
body:not(.home) section.header-layer.with-image, body section.header-layer {
    min-height: unset;
    padding-top: 0;
    flex-direction: column;
}
body:not(.home):not(.single) section.header-layer.has-hero-image, body:not(.home).page-id-1972 section.header-layer {
    padding-bottom: 2.5rem;
}
body section.header-layer.small-padding-bottom {
    padding-bottom: 2.5rem;
}
body.single-vacature section.header-layer.small-padding-bottom {
    padding-bottom: 1rem !important;
}
.single-vacature .process-title {
    text-align: center;
    width: 100%;
}
.single-vacature .process-header {
    justify-content: center;
}
/* ==========================================================================
   SECTION: Small Cards
   ========================================================================== */

.small-cards-block {
    background: #ffffff;
    /* Padding wordt geregeld door global classes, maar design heeft ruime witruimte */
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.sc-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    /* Ruimte tussen de secties (Inbouw vs Slaapkamer) */
}
.sc-group {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* Ruimte tussen titel en grid */
}
/* Sectie Titel (bijv. "Inbouw") */

.sc-title {
    color: #131313;
    font-family: "Inter", sans-serif;
    font-size: 2rem;
    line-height: 1.3;
    font-weight: 600;
    margin: 0;
}
/* De Grid: 4 koloms op desktop */

.sc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Hier gebeurt de magie */
    gap: 2rem;
    /* Ruimte tussen de kaartjes */
    width: 100%;
}
/* De Kaart */

.sc-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-decoration: none;
    /* Geen onderstreping link */
    group: transition;
    /* Voor hover effecten */
    width: 100%;
}
/* Image Wrapper (Het grijze vlak) */

.sc-image-wrapper {
    background: #f6f6f6;
    border-radius: 1rem;
    overflow: hidden;
    /* Aspect ratio forceren om hoogte 17.3125rem te benaderen */
    /* Bij 4 koloms is de breedte variabel, dus we gebruiken een ratio */
    aspect-ratio: 330 / 277;
    width: 100%;
    position: relative;
    transition: transform 0.3s ease;
}
.sc-card:hover .sc-image-wrapper {
    transform: scale(1.02);
    /* Subtiel zoom effect bij hover */
}
.sc-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Zorgt dat plaatje het vlak vult */
    display: block;
}
/* Fallback placeholder */

.sc-placeholder {
    width: 100%;
    height: 100%;
    background-color: #e0e0e0;
}
/* Content onder plaatje */

.sc-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* Kleine ruimte tussen titel en tekst */
}
/* Item Titel (bijv. "Inbouwkasten") */

.sc-item-title {
    color: #131313;
    font-family: "Inter", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}
/* Beschrijving (bijv. "U-kasten, L-kasten...") */

.sc-item-desc {
    color: #131313;
    /* Of een lichtere kleur #666 als je wilt */
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
/* ==========================================================================
   Small Cards — Responsive
   ========================================================================== */

/* Tablet (2 koloms) */

@media (max-width:1024px) {
    .sc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}
/* Mobiel (1 kolom) */

@media (max-width:600px) {
    .sc-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .sc-title {
        font-size: 1.625rem;
    }
}
/* Container instellingen */

.hero-image {
    width: 100%;
    position: relative;
    overflow: hidden;
    /* Zorgt dat de afbeelding niet buiten de radius komt */
    border-radius: 1rem;
    margin-top: 2rem;
}
.hero-image-content {
    height: 35.0625rem;
    /* Hoogte uit je design */
    position: relative;
    overflow: hidden;
    /* Zorgt dat de afbeelding niet buiten de radius komt */
    border-radius: 1rem;
}
/* De afbeelding zelf */

.hero-image .hero-image-tag {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Vult de container */
    object-position: center;
    display: block;
}
/* Mobiele aanpassing voor de hoogte */

@media (max-width:768px) {
    .hero-image-content {
        height: 18.75rem;
    }
}
/* ==========================================================================
   SECTION: Pagebuilder Content (Content Row & Centered Row)
   ========================================================================== */

/* --- 1. Container & Wrapper Styling --- */

/* De grijze omhulling (als je wrapper start/end gebruikt) */

.visit-content {
    background: #f6f6f6;
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Zorg dat de secties binnen de wrapper geen extra padding krijgen als dat niet moet */
}
/* De Secties zelf */

.section-content-row, .section-centered-row {
    width: 100%;
    position: relative;
    padding: 3rem 0;
    /* Standaard witruimte */
}
/* Padding Utilities (Worden via ACF toegevoegd aan de <section>) */

.section-content-row.pt-0, .section-centered-row.pt-0 {
    padding-top: 0 !important;
}
.section-content-row.pb-0, .section-centered-row.pb-0 {
    padding-bottom: 0 !important;
}
.section-content-row.py-0, .section-centered-row.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* --- 2. Grid & Layout (Flexbox) --- */

.content-row {
    display: flex;
    gap: 4rem;
    /* Ruimte tussen tekst en afbeelding */
    align-items: center;
    /* Verticaal centreren */
    width: 100%;
}
/* Layout: Tekst Links, Foto Rechts */

.content-row.layout-right {
    flex-direction: row;
}
/* Layout: Foto Links, Tekst Rechts */

.content-row.layout-left {
    flex-direction: row-reverse;
}
/* Layout: Gecentreerd */

.content-row.layout-centered {
    justify-content: center;
}
/* --- 3. Kolommen --- */

.col-content {
    flex: 1;
    /* Neemt beschikbare ruimte in */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Ruimte tussen titel, tekst, lijstjes, knoppen */
    align-items: flex-start;
    min-width: 0;
    /* Fix voor flexbox overflows */
}
.col-media {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: 100%;
}
/* --- 4. Typografie & Elementen --- */

/* Titel */

.section-title {
    color: #131313;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}
/* Tekst (Body) */

.section-body {
    color: #131313;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
.section-body p {
    margin-bottom: 1em;
}
.section-body p:last-child {
    margin-bottom: 0;
}
/* Lijstjes (Checkmarks) */

.content-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin-top: 0.5rem;
}
.list-heading {
    color: #131313;
    font-family: "Inter", sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}
.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.check-list-item {
    display: flex;
    align-items: flex-start;
    /* Zorgt dat vinkje bovenaan staat bij lange zinnen */
    gap: 0.75rem;
}
.icon-check {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.25rem;
    /* Optisch uitlijnen met tekstregel */
}
.list-text {
    font-size: 1rem;
    line-height: 1.5;
    color: #131313;
}
/* --- 5. Afbeeldingen --- */

.image-wrapper {
    width: 100%;
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #e5e5e5;
    /* Fallback kleur */
    /* Zorg voor een minimale hoogte zodat het niet inklapt als afbeelding laadt */
    min-height: 25rem;
    height: 100%;
}
.content-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Belangrijk: vult het vak zonder vervorming */
    display: block;
}
/* --- 6. Gecentreerde Content Styling --- */

.centered-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    margin: 0 auto;
}
.centered-content .section-body {
    text-align: center;
}
.centered-content .section-title {
    margin-bottom: 0;
}
.centered-content .button-group {
    margin-top: 1rem;
}
/* --- 7. Knoppen Groep --- */

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}
.button-group.center {
    justify-content: center;
}
/* Standaard knop styling (als fallback, gebruik jouw thema classes) */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    width: fit-content;
    transition: all 0.3s ease;
}
.btn-primary {
    background-color: #7A68AE;
    /* Jouw paars */
    color: #fff;
    border: 1px solid #7A68AE;
}
.btn-white {
    background-color: #fff;
    color: #131313;
    border: 1px solid #e5e5e5;
}
.btn-outline {
    background-color: transparent;
    color: #131313;
    border: 1px solid #131313;
}
/* ==========================================================================
   Pagebuilder Content — Responsive
   ========================================================================== */

@media (max-width:991px) {
    .content-row {
        gap: 2.5rem;
    }
    .image-wrapper {
        min-height: 18.75rem;
    }
}
@media (max-width:768px) {
    /* Stack alles onder elkaar op mobiel */
    .content-row, .content-row.layout-right, .content-row.layout-left {
        flex-direction: column-reverse;
        /* Afbeelding boven, tekst onder */
        align-items: stretch;
        gap: 2rem;
    }
    /* Gecentreerde content blijft kolom, maar normaal */
    .content-row.layout-centered {
        flex-direction: column;
    }
    .col-content {
        width: 100%;
        align-items: flex-start;
        /* Of center als je dat mooier vindt op mobiel */
    }
    .col-media {
        width: 100%;
        height: auto;
    }
    .image-wrapper {
        min-height: 15.625rem;
        /* Iets lager op mobiel */
        max-height: 25rem;
    }
    .section-title {
        font-size: 1.625rem;
        /* Iets kleiner font */
    }
    .visit-content {
        padding: 2rem 1.5rem;
    }
    .button-group {
        width: 100%;
    }
    /* Optioneel: Knoppen full-width op mobiel */
    .button-group .btn {
        width: 100%;
    }
}
/* ==========================================================================
   GLOBAL: Button Stijlen (.btn)
   ========================================================================== */

.btn {
    /* Layout & Box Model */
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    /* Ruimte tussen tekst en eventueel icoon */
    padding: 0.875rem 1rem;
    box-sizing: border-box;
    /* Vorm */
    border-radius: 0.5rem;
    border: 1px solid transparent;
    /* Standaard border (transparant) */
    /* Typografie */
    font-family: "Inter", "Inter-Medium", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    /* Interactie */
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0;
}
/* --- Varianten --- */

/* 1. Primary (De paarse knop uit je design) */

.btn-primary {
    background-color: #7A68AE;
    color: #ffffff;
    border-color: #7A68AE;
    /* Zorgt dat rand strak is */
}
.btn-primary:hover {
    background-color: #685796;
    /* Iets donkerder paars bij hover */
    border-color: #685796;
    color: #ffffff;
}
/* 2. White (Wit met grijze rand, vaak gebruikt als secundaire knop) */

.btn-white {
    background-color: #ffffff;
    color: #131313;
    border-color: #E5E5E5;
    /* Lichte grijze rand */
}
.btn-white:hover {
    background-color: #F6F6F6;
    /* Lichtgrijs bij hover */
    color: #131313;
}
/* 3. Outline (Transparant met donkere rand) */

.btn-outline {
    background-color: transparent;
    color: #131313;
    border-color: #131313;
}
.btn-outline:hover {
    background-color: #131313;
    color: #ffffff;
}
/* 4. Full Width (Optie voor mobiel) */

.btn-full {
    width: 100%;
}
.pagebuilder-wrapper.bg-gray {
    border-radius: 1rem;
    background: #F6F6F6;
    padding: 2.5rem 2rem;
}
.pagebuilder-wrapper.bg-gray>section:first-child {
    padding-top: 0 !important;
}
.pagebuilder-wrapper.bg-gray>section:last-child {
    padding-bottom: 0 !important;
}
.pagebuilder-wrapper {
    max-width: 88.5rem;
    width: calc(100% - 2.5rem);
    margin: 3rem auto;
}
/* ==========================================================================
   SECTION: FAQ Styling
   ========================================================================== */

/* 1. Header Layout (Flexbox: Links & Rechts) */

.faq-header {
    display: flex;
    justify-content: space-between;
    /* Duw ze uit elkaar */
    align-items: flex-end;
    /* Uitlijnen op de onderkant */
    gap: 2rem;
    width: 100%;
    /* Breedte restricties */
    max-width: 65.75rem;
    margin: 0 auto 2rem auto;
    /* Centreren en marge onder */
}
/* Titel Container (Links) */

.header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Alles links uitlijnen */
    text-align: left;
    max-width: 43.75rem;
    /* Zorgt dat tekst niet tegen knop aan botst */
}
.header-left .tag {
    margin-bottom: 0.75rem;
    display: inline-block;
}
.header-left .process-title {
    margin: 0;
}
/* Knop Container (Rechts) */

.header-right {
    flex-shrink: 0;
    /* Zorg dat de knop zijn breedte behoudt */
    margin-bottom: 0.375rem;
    /* Optische correctie baseline */
}
/* 2. De Vragenlijst Container */

.custom-faq-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    width: 100%;
    /* Breedte restricties */
    max-width: 65.75rem;
    margin: 0 auto;
    /* Centreren */
}
/* 3. Het Item (Kaart) */

.custom-faq-item {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
}
.custom-faq-item.is-open {
    border-color: #131313;
}
/* 4. De Trigger (Knop) */

button.custom-faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 0.875rem 0.875rem 1.75rem;
    /* Figma Padding */
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    margin: 0;
    outline: none;
    min-height: 4.75rem;
}
.custom-faq-title {
    color: #000000;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding-right: 1rem;
}
/* Het Icoon */

.custom-faq-icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    padding: 0.75rem;
    box-sizing: content-box;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.custom-faq-item.is-open .custom-faq-icon {
    transform: rotate(180deg);
}
/* 5. Smooth Content Animatie */

.custom-faq-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    background-color: #fff;
}
.custom-faq-item.is-open .custom-faq-body {
    grid-template-rows: 1fr;
}
.custom-faq-inner {
    overflow: hidden;
}
.custom-faq-inner p {
    margin: 1rem 0;
}
.custom-faq-inner p:first-child {
    margin-top: 0;
}
.custom-faq-inner p:last-child {
    margin-bottom: 0;
}
.custom-faq-inner ul {
    padding-left: 1.125rem;
}
.custom-faq-inner ol {
    padding-left: 1.125rem;
}
.custom-faq-inner>span, .custom-faq-inner>p {
    display: block;
    padding: 0 1.75rem 1.25rem 1.75rem;
    color: #555;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(0.625rem);
    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}
.custom-faq-item.is-open .custom-faq-inner>span, .custom-faq-item.is-open .custom-faq-inner>p {
    opacity: 1;
    transform: translateY(0);
}
/* 6. Mobiele Aanpassingen */

@media (max-width:991px) {
    /* Header onder elkaar */
    .faq-header {
        flex-direction: column;
        align-items: flex-start;
        /* Alles links uitlijnen */
        gap: 1.5rem;
        max-width: 100%;
        /* Volle breedte op mobiel */
    }
    /* Knop komt nu automatisch onder de titel door flex-direction: column */
    .header-right {
        margin-bottom: 0;
        width: 100%;
        /* Optioneel: als je de knop full-width wilt */
    }
    /* Vragenlijst padding fix */
    button.custom-faq-trigger {
        padding: 0.75rem 0.75rem 0.75rem 1rem;
    }
    .custom-faq-inner>span, .custom-faq-inner>p {
        padding: 0 1rem 1rem 1rem;
    }
}
/* ==========================================================================
   SECTION: Contact Info Layer
   ========================================================================== */

/* De sectie zelf (Padding en background worden via PHP/ACF geregeld) */

.contact-info-layer {
    width: 100%;
    box-sizing: border-box;
}
/* De Witte Kaart */

.contact-card-container {
    background: #ffffff;
    border-radius: 1rem;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 5rem;
    /* Ruimte tussen kolommen */
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    /* Schaduw optioneel, stond niet in Figma code maar vaak wel mooi op wit vlak */
    /* box-shadow: 0 4px 20px rgba(0,0,0,0.05); */
}
/* Kolom */

.contact-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    flex: 1;
    /* Verdeel ruimte gelijkmatig */
    min-width: 11.875rem;
    /* Minimale breedte uit design */
}
/* Icoon */

.contact-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    fill: #131313;
}
/* Tekst Blok Wrapper */

.contact-info-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    /* Alles gecentreerd zoals in design */
    width: 100%;
}
/* Titel (bv. "Bezoekadres") */

.contact-title {
    color: #131313;
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 700;
}
/* Details container */

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
/* Specifiek centreren voor Contact & Openingstijden (zoals Figma CSS) */

.contact-col:nth-child(3) .contact-details, .contact-col:nth-child(5) .contact-details {
    align-items: center;
    text-align: center;
}
/* Tekst regels */

.contact-line, .contact-link {
    color: #131313;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}
/* Linkjes (Email/Tel) */

.contact-link {
    text-decoration: underline;
    transition: color 0.2s ease;
}
.contact-link:hover {
    color: #7a68ae;
    /* Je brand kleur */
    text-decoration: none;
}
/* De Verticale Lijn (Divider) */

.contact-divider {
    width: 1px;
    height: 8.875rem;
    /* Hoogte uit design */
    background-color: #bfbfbf;
    flex-shrink: 0;
    margin-top: 0.625rem;
    /* Beetje optische uitlijning */
}
/* --- Mobiel / Tablet --- */

@media (max-width:1024px) {
    .contact-card-container {
        flex-direction: column;
        gap: 2.5rem;
        padding: 0;
        align-items: center;
    }
    .contact-divider {
        width: 100%;
        height: 1px;
        /* Horizontaal lijntje op mobiel */
        max-width: 12.5rem;
        /* Niet te breed */
    }
    .contact-col {
        width: 100%;
        align-items: center;
    }
    .contact-details {
        align-items: center;
        /* Alles centreren op mobiel */
        text-align: center;
    }
}
/* ==========================================================================
   SECTION: Gravity Form (Centered / Figma)
   ========================================================================== */

/* --- 1. Main Layout & Header --- */

.gf-centered-layer {
    padding: 4.5rem 0;
    width: 100%;
}
/* ACF Padding Overrides */

.gf-centered-layer.pt-0 {
    padding-top: 0;
}
.gf-centered-layer.pb-0 {
    padding-bottom: 0;
}
.gf-centered-layer.py-0 {
    padding: 0;
}
.gf-centered-layer .inner {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
}
/* Header Text */

/* --- 1. Header Styling (Updated) --- */

.gf-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    max-width: 50rem;
    text-align: center;
}
/* Titel */

.gf-centered-layer .gf-centered-title {
    color: #000000;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 1.2;
    margin: 0;
}
/* Subtitel */

.gf-centered-layer .gf-centered-subtitle {
    color: #000000;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5;
}
/* Mobiel */

@media (max-width:768px) {
    .gf-centered-layer .gf-centered-title {
        font-size: 2rem;
    }
}
/* --- 2. Form Container & Reset --- */

.gf-centered-layer .gf-form-container {
    width: 100%;
    max-width: 76rem;
    /* Exacte breedte uit Figma */
    margin: 0 auto;
}
/* Verwijder standaard margins van de wrapper */

.gf-centered-layer .gform_wrapper.gravity-theme {
    margin: 0;
    padding: 0;
}
/* --- 3. Input Styles (De "Button" look uit Figma) --- */

/* We targeten specifiek binnen jouw layer om GF styles te overrulen */

.gf-centered-layer .gform_wrapper.gravity-theme input[type=text], .gf-centered-layer .gform_wrapper.gravity-theme input[type=email], .gf-centered-layer .gform_wrapper.gravity-theme input[type=tel], .gf-centered-layer .gform_wrapper.gravity-theme input[type=number], .gf-centered-layer .gform_wrapper.gravity-theme input[type=url], .gf-centered-layer .gform_wrapper.gravity-theme textarea, .gf-centered-layer .gform_wrapper.gravity-theme select {
    background: rgba(237, 237, 237, 0.5);
    /* Figma BG */
    border: 1px solid rgba(0, 0, 0, 0.25);
    /* Figma Border */
    border-radius: 1rem;
    padding: 0.75rem 1.5rem;
    width: 100%;
    height: 3.875rem;
    /* Figma Height */
    /* Font Styles */
    color: #1f1f1f;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    /* Reset & Transition */
    box-shadow: none;
    outline: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    margin-top: 0;
    /* Reset GF margin */
    margin-bottom: 0;
}
/* Specifieke hoogte voor Textarea */

.gf-centered-layer .gform_wrapper.gravity-theme textarea {
    height: 8.5rem;
    resize: vertical;
}
/* Focus States */

.gf-centered-layer .gform_wrapper.gravity-theme input:focus, .gf-centered-layer .gform_wrapper.gravity-theme textarea:focus, .gf-centered-layer .gform_wrapper.gravity-theme select:focus {
    border-color: #7a68ae;
    /* Je brand color */
    background-color: #ffffff;
}
/* Placeholder Styling */

.gf-centered-layer .gform_wrapper.gravity-theme::placeholder {
    color: #1f1f1f;
    opacity: 1;
}
/* Labels */

/* Omdat je placeholder teksten gebruikt in het design, verbergen we de labels vaak,
   of we stylen ze discreet. Hier houden we ze netjes boven de input als ze aan staan. */

.gf-centered-layer .gform_wrapper.gravity-theme .gfield_label {
    font-size: 1rem;
    font-weight: 600;
    color: #1f1f1f;
    margin-bottom: 0.5rem;
}
/* Verberg sub-labels (zoals 'First', 'Last' bij Naam veld) */

.gf-centered-layer .gform_wrapper.gravity-theme .hidden_sub_label {
    display: none;
}
/* --- 4. Grid / Layout van Velden --- */

/* --- 5. Submit Button (.menu-item style) --- */

.gf-centered-layer .gform_wrapper.gravity-theme .gform_footer {
    padding: 0;
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    /* Centreer de knop */
    width: 100%;
}
/* Styling van jouw specifieke button structuur */

body .site .gf-centered-layer button.brochure-submit-btn {
    background: #7a68ae;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    height: auto;
    width: auto;
    margin-bottom: 0;
}
body .gform_wrapper.gravity-theme .gform_fields {
    grid-column-gap: 1rem;
}
body .site .gf-centered-layer button.brochure-submit-btn:hover {
    background: #6a589e;
}
.gf-centered-layer .brochure-submit-btn .btn-text {
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 500;
}
.gf-centered-layer .brochure-submit-btn .btn-arrow-box {
    display: flex;
    align-items: center;
}
/* --- 6. Mobiele Aanpassingen --- */

@media (max-width:768px) {
    .gf-centered-layer {
        padding: 3rem 0;
    }
    .gf-centered-layer .hero-title {
        font-size: 2rem;
    }
    /* Velden onder elkaar op mobiel */
    .gf-centered-layer .gform_wrapper.gravity-theme .ginput_complex.ginput_container_name {
        flex-direction: column;
        gap: 1rem;
    }
    .gf-centered-layer .gform_wrapper.gravity-theme .gfield.gfield--width-half {
        width: 100%;
        margin-right: 0;
        display: block;
    }
}
@media (min-width:641px) {
    body .gform_wrapper.gravity-theme .ginput_complex:not(.ginput_container_address) fieldset:not([style*="display:none"]):not(.ginput_full), body .gform_wrapper.gravity-theme .ginput_complex:not(.ginput_container_address) span:not([style*="display:none"]):not(.ginput_full) {
        padding-right: 0.5rem;
    }
    body .gform_wrapper.gravity-theme .ginput_complex:not(.ginput_container_address) fieldset:not([style*="display:none"]):not(.ginput_full)~span:not(.ginput_full), body .gform_wrapper.gravity-theme .ginput_complex:not(.ginput_container_address) span:not([style*="display:none"]):not(.ginput_full)~span:not(.ginput_full) {
        padding-left: 0.5rem;
        padding-right: 0;
    }
    body .gform_wrapper.gravity-theme .ginput_container_address span, body .gform_wrapper.gravity-theme .ginput_full:not(:last-of-type) {
        margin-bottom: 0.5rem;
    }
    body .gform_wrapper.gravity-theme .ginput_container_address {
        margin-bottom: -0.5rem;
    }
    /* HTML selectors ongewijzigd gelaten */
    html[dir=rtl] .gform_wrapper.gravity-theme .ginput_complex:not(.ginput_container_address) fieldset:not([style*="display:none"]):not(.ginput_full), html[dir=rtl] .gform_wrapper.gravity-theme .ginput_complex:not(.ginput_container_address) span:not([style*="display:none"]):not(.ginput_full) {
        padding-left: 0.5rem;
        padding-right: 0;
    }
    html[dir=rtl] .gform_wrapper.gravity-theme .ginput_complex:not(.ginput_container_address) fieldset:not([style*="display:none"]):not(.ginput_full)~span:not(.ginput_full), html[dir=rtl] .gform_wrapper.gravity-theme .ginput_complex:not(.ginput_container_address) span:not([style*="display:none"]):not(.ginput_full)~span:not(.ginput_full) {
        padding-left: 0;
        padding-right: 0.5rem;
    }
}
/* ==========================================================================
   SECTION: Projects / Inspiratie Listing
   ========================================================================== */

.projects-listing-layer {
    padding: 4.5rem 0;
    width: 100%;
}
/* ACF Padding Classes */

.projects-listing-layer.pt-0 {
    padding-top: 0;
}
.projects-listing-layer.pb-0 {
    padding-bottom: 0;
}
.projects-listing-layer.py-0 {
    padding: 0;
}
/* Header voor Projects Listing */

.projects-listing-layer .projects-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 4rem;
}
.projects-listing-layer .projects-title {
    color: #131313;
    font-family: "Inter", sans-serif;
    font-size: 2rem;
    line-height: 1.3;
    font-weight: 600;
}
.projects-listing-layer .menu-item {
    background: #7a68ae;
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    text-decoration: none;
}
.projects-listing-layer .menu-item:hover {
    background: #6a589e;
}
.projects-listing-layer .projects-button-container {
    display: flex;
    align-items: center;
}
.projects-listing-layer .projects-button-text {
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 500;
}
/* --- 1. Grid Layout --- */

.projects-grid {
    display: grid;
    /* 2 kolommen naast elkaar, gelijke breedte */
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    /* Ruimte tussen kaarten */
    width: 100%;
}
/* --- 2. Project Kaart --- */

.project-card {
    display: flex;
    flex-direction: column;
    /* Flex-end zorgt dat de witte box onderaan staat */
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 47.875rem;
    /* Vaste hoogte uit Figma */
    border-radius: 1rem;
    padding: 2rem;
    /* Background properties */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none;
    /* Link underline weg */
    box-sizing: border-box;
    transition: transform 0.3s ease;
}
.project-card:hover {
    transform: translateY(-0.3125rem);
    /* Subtiel hover effect */
}
/* --- 3. Witte Content Box --- */

.project-card-content {
    background: #ffffff;
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    /* Links uitlijnen */
    width: 100%;
    /* Max breedte binnen de kaart zodat hij niet te breed wordt */
    max-width: 39.25rem;
}
/* --- 4. Elementen --- */

/* Tag (Grijs blokje) */

.project-tag {
    background: #f6f6f6;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    display: inline-flex;
    align-items: flex-start;
}
.project-card.project-card--projecten .project-tag {
    background: #fff;
}
.project-tag-text {
    color: #131313;
    font-family: "Inter", sans-serif;
    /* Of "Inter-SemiBold" als je die hebt */
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
}
/* Titel */

.project-title {
    color: #000000;
    font-family: "Inter", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    width: 100%;
    text-align: left;
    /* Figma toont tekst gecentreerd in het midden */
}
/* Excerpt Tekst */

.project-excerpt, .project-excerpt p {
    color: #000000;
    font-family: "Inter", sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-align: left;
    /* Tekst zelf is links */
    width: 100%;
}
/* --- 5. Responsive (Tablet & Mobiel) --- */

@media (max-width:991px) {
    .projects-listing-layer .projects-header {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
        margin-bottom: 2.5rem;
    }
    .projects-listing-layer .projects-title {
        font-size: 1.5rem;
    }
    .projects-listing-layer .menu-item {
        justify-content: center;
    }
    .projects-grid {
        /* Op tablet/mobiel alles onder elkaar */
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .project-card {
        height: auto;
        /* Geen vaste hoogte meer op mobiel */
        min-height: 31.25rem;
        /* Wel een minimale hoogte */
        padding: 1rem;
    }
    .project-card-content {
        padding: 1.5rem;
    }
    .project-title {
        font-size: 1.5rem;
    }
    .project-excerpt {
        font-size: 1rem;
    }
}
.single-post .hero-image-content {
    max-width: 55.125rem;
    margin: 0 auto;
}
.single-post .section-content-row .content-row {
    max-width: 48rem;
    margin: 0 auto;
}
/* --- Heading 2 (De hoofdtitel) --- */

/* Figma: 48px size / 120% line-height / 16px bottom space */

.single-post .section-content-row .content-row .section-title {
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 600;
}
/* --- Paragrafen --- */

/* Figma: 16px size / 150% line-height / 16px bottom space */

.single-post .section-content-row .content-row .section-body p {
    font-size: 1rem;
    line-height: 1.5;
}
/* --- Heading 3 --- */

/* Figma: 40px size / 120% line-height / 24px top & bottom space */

.single-post .section-content-row .content-row .section-body h3 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-top: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}
/* --- Heading 4 --- */

/* Figma: 32px size / 130% line-height / 24px top & 20px bottom space */

.single-post .section-content-row .content-row .section-body h4 {
    font-size: 2rem;
    line-height: 1.3;
    margin-top: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}
/* --- Afbeelding (Figure) --- */

/* Figma: 48px top & bottom space */

.single-post .section-content-row .content-row .section-body figure {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
/* ==========================================================================
   SECTION: Post Meta & Share Buttons
   ========================================================================== */

.post-meta-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    margin-top: 0;
}
.post-meta-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}
.post-meta-time {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}
.post-date {
    color: #000000;
    text-align: left;
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 400;
}
.meta-separator {
    color: #000000;
    text-align: left;
    font-family: "Inter", sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
    font-weight: 400;
}
.reading-time {
    color: #000000;
    text-align: left;
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 400;
}
/* Share Buttons */

.share-buttons {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}
.share-button {
    background: #eeeeee;
    border-radius: 4rem;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.share-button:hover {
    background: #e0e0e0;
    transform: translateY(-2px);
}
.share-button:active {
    transform: translateY(0);
}
.share-button svg {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    overflow: visible;
}
/* Toast notificatie voor gekopieerde link */

.copy-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(6.25rem);
    background: #131313;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 9999;
    pointer-events: none;
}
.copy-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Responsive aanpassingen */

@media (max-width:768px) {
    .post-meta-wrapper {
        gap: 0.75rem;
        margin-top: 0;
    }
    .post-meta-time {
        flex-wrap: wrap;
        justify-content: center;
    }
    .share-buttons {
        gap: 0.375rem;
    }
    .share-button {
        padding: 0.1875rem;
    }
    .share-button svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}
.projects-section .project-card-content, .project-card.project-card--projecten .project-card-content {
    padding: 0;
    background: transparent;
    color: #fff;
}
.project-card.project-card--projecten .project-title, .project-card.project-card--projecten .project-excerpt {
    color: #fff;
}
.projects-section .project-card, .project-card.project-card--projecten {
    height: 35rem;
    position: relative;
    overflow: hidden;
}
/* Donkerdere gradient overlay bij hover */

.projects-section .project-card::after, .project-card.project-card--projecten::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1rem;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: none;
    z-index: 1;
}
.projects-section .project-card:hover::after, .project-card.project-card--projecten:hover::after {
    opacity: 1;
}
.projects-section .project-card .project-card-content, .project-card.project-card--projecten .project-card-content {
    position: relative;
    z-index: 2;
}
/* Titel underline bij hover */

.projects-section .project-card:hover .project-title, .projects-section .project-card:hover .project-heading, .project-card.project-card--projecten:hover .project-title, .project-card.project-card--projecten:hover .project-heading {
    text-decoration: underline;
    text-decoration-thickness: 0.125rem;
    text-underline-offset: 0.2em;
    transition: text-decoration 0.3s ease;
}
/* ==========================================================================
   SECTION: FAQ Overzicht (Figma Design)
   ========================================================================== */

.faq-overzicht-section, .faq-overzicht-section * {
    box-sizing: border-box;
}
/* Main Section - WHITE */

.faq-overzicht-section {
    background: #ffffff;
    opacity: 0.9;
    padding: 2.5rem 3rem 2.5rem 3rem;
}
/* Grey container inside .inner */

.faq-overzicht-section .faq-container {
    background: #f6f6f6;
    border-radius: 1rem;
    padding: 2.5rem 2rem 2.5rem 2rem;
}
/* Two-column layout */

.faq-content {
    display: flex;
    flex-direction: row;
    gap: 4.5rem;
    align-items: flex-start;
    justify-content: flex-start;
}
/* ==========================================================================
   SECTION: FAQ Overzicht — Sidebar
   ========================================================================== */

.faq-sidebar {
    background: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem 2.5rem 1.5rem 2.5rem;
    flex-shrink: 0;
    width: 23.125rem;
}
.faq-categories {
    padding: 1.5rem 2.5rem 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.faq-category-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 18.125rem;
}
.faq-category-button {
    background: transparent;
    border: none;
    padding: 0;
    color: #000000;
    text-align: left;
    font-size: var(--text-medium-semi-bold-font-size, 1.125rem);
    line-height: var(--text-medium-semi-bold-line-height, 150%);
    font-weight: var(--text-medium-semi-bold-font-weight, 600);
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: opacity 0.3s ease;
}
.faq-category-button:hover {
    opacity: 0.7;
}
.faq-category-button:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 0.25rem;
}
.faq-category-button.is-active {
    text-decoration: underline;
}
.faq-category-divider {
    margin-top: -1px;
    border-style: solid;
    border-color: #bfbfbf;
    border-width: 1px 0 0 0;
    height: 0;
    transform: rotate(-180deg);
}
/* ==========================================================================
   SECTION: FAQ Overzicht — Main Content
   ========================================================================== */

.faq-main-content {
    padding: 1.5rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    flex: 1;
    width: 100%;
}
.faq-category-section {
    display: none;
    flex-direction: column;
    gap: 2rem;
}
.faq-category-section.is-active {
    display: flex;
}
.faq-category-header {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}
.faq-category-title {
    color: #131313;
    text-align: left;
    font-size: var(--heading-h4-font-size, 2rem);
    line-height: var(--heading-h4-line-height, 130%);
    font-weight: var(--heading-h4-font-weight, 600);
    margin: 0;
}
/* ==========================================================================
   SECTION: FAQ Overzicht — Items List
   ========================================================================== */

.faq-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.faq-item {
    background: #ffffff;
    border-radius: 0.5rem;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.25);
    border-width: 1px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}
.faq-item:hover {
    border-color: rgba(0, 0, 0, 0.4);
}
.faq-item.is-featured {
    border-color: #002240;
    box-shadow: 0 2px 0.5rem rgba(0, 34, 64, 0.1);
}
/* Question Button */

.faq-question-button {
    background: transparent;
    border: none;
    padding: 0.875rem 0.875rem 0.875rem 1.75rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.faq-question-button:hover {
    background-color: rgba(0, 0, 0, 0.02);
}
.faq-question-button:focus-visible {
    outline: 2px solid #002240;
    outline-offset: -2px;
}
.faq-question-container {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
}
.faq-question-text {
    color: #000000;
    text-align: left;
    font-size: var(--text-regular-normal-font-size, 1rem);
    line-height: var(--text-regular-normal-line-height, 150%);
    font-weight: var(--text-regular-normal-font-weight, 400);
}
.faq-toggle-wrapper {
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.faq-toggle-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.faq-toggle-icon svg {
    width: 100%;
    height: 100%;
}
.faq-item.is-open .faq-toggle-icon {
    transform: rotate(180deg);
}
/* Answer Content - EXACT custom-faq animation */

.faq-answer-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.faq-item.is-open .faq-answer-wrapper {
    max-height: 125rem;
}
.faq-answer-content {
    padding: 0 1.75rem 1.5rem 1.75rem;
    color: #000000;
    font-size: var(--text-regular-normal-font-size, 1rem);
    line-height: var(--text-regular-normal-line-height, 150%);
    font-weight: var(--text-regular-normal-font-weight, 400);
}
.faq-answer-content p:first-child {
    margin-top: 0;
}
.faq-answer-content p:last-child {
    margin-bottom: 0;
}
/* ==========================================================================
   SECTION: FAQ Overzicht — Responsive Tablet
   ========================================================================== */

@media (max-width:1024px) {
    .faq-overzicht-section {
        padding: 2rem 1.5rem;
    }
    .faq-overzicht-section .faq-container {
        padding: 2rem 1.5rem;
    }
    .faq-content {
        gap: 3rem;
    }
    .faq-sidebar {
        width: 18.75rem;
    }
    .faq-categories {
        padding: 1.25rem 2rem 1.25rem 0;
    }
    .faq-category-group {
        width: 100%;
    }
}
/* ==========================================================================
   SECTION: FAQ Overzicht — Responsive Mobile
   ========================================================================== */

@media (max-width:768px) {
    .faq-overzicht-section {
        padding: 2rem 1.25rem;
    }
    .faq-overzicht-section .faq-container {
        padding: 2rem 1.25rem;
        border-radius: 0.75rem;
    }
    .faq-content {
        flex-direction: column;
        gap: 2rem;
    }
    .faq-sidebar {
        width: 100%;
    }
    .faq-categories {
        padding: 1.25rem 1.5rem 1.25rem 0;
        gap: 1.5rem;
    }
    .faq-category-group {
        gap: 0.75rem;
        width: 100%;
    }
    .faq-category-button {
        font-size: 1rem;
    }
    .faq-main-content {
        padding-top: 0;
        gap: 1.5rem;
    }
    .faq-category-header {
        gap: 1.25rem;
    }
    .faq-category-title {
        font-size: 1.5rem;
    }
    .faq-items-list {
        gap: 0.75rem;
    }
    .faq-question-button {
        padding: 0.75rem 0.75rem 0.75rem 1.25rem;
    }
    .faq-toggle-wrapper {
        padding: 0.5rem;
    }
    .faq-question-text {
        font-size: 0.875rem;
    }
    .faq-answer-content {
        padding: 0 1.25rem 1.25rem 1.25rem;
        font-size: 0.875rem;
    }
}
/* ==========================================================================
   GLOBAL: Accessibility & Print
   ========================================================================== */

@media (prefers-reduced-motion:reduce) {
    .faq-toggle-icon, .faq-answer-wrapper, .faq-item, .faq-question-button, .faq-category-button {
        transition: none;
    }
}
@media print {
    .faq-answer-wrapper {
        max-height: none !important;
    }
    .faq-item {
        page-break-inside: avoid;
    }
    .faq-overzicht-section {
        background: #ffffff;
    }
}
body.thanks-page .content-box {
    max-width: 48.25rem;
    margin: 0 auto;
}
body.thanks-page .content-box p {
    margin: 1rem 0;
}
body.thanks-page .content-box p:last-child {
    margin-bottom: 0;
}
body.thanks-page .content-box p:first-child {
    margin-top: 0;
}
body.thanks-page .buttons-box {
    margin-top: 1rem;
}
body.thanks-page .breadcrumbs {
    opacity: 0;
}
body.thanks-page .site-footer__categories {
    display: none;
    padding-top: 0;
}
body.thanks-page .site-footer__categories-column {
    display: none;
}
/* ==========================================================================
   SECTION: Vacature Detail
   ========================================================================== */

/* Section zelf is wit / transparant — de grijze bak zit op .vd-container */

.vacature-detail-laag {
    background: transparent;
}
/* Grijze container met border-radius (binnen .inner) */

.vd-container {
    background: #f6f6f6;
    border-radius: 1rem;
    padding: 2.5rem 2rem;
}
/* Grid: mobile stacked, desktop side-by-side */

.vd-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.vd-main {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
/* ----- Intro ----- */

.vd-intro {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.vd-intro__title {
    font-size: var(--h5-font-size-mobile, 1.25rem);
    line-height: var(--h5-line-height-mobile, 140%);
    font-weight: 600;
    color: #000;
}
.vd-intro__body {
    font-size: 1.125rem;
    line-height: 150%;
    color: #000;
}
.vd-intro__body p:last-child {
    margin-bottom: 0;
}
/* ----- Afbeelding ----- */

.vd-image {
    border-radius: 1rem;
    overflow: hidden;
}
.vd-image__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}
/* ----- Accordion secties ----- */

.vd-sections {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.vd-accordion {
    border-bottom: 1px solid #c5c5c5;
}
.vd-accordion:first-child {
    border-top: 1px solid #c5c5c5;
}
.vd-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.5rem 0;
    background: none;
    border: none;
    cursor: pointer;
    gap: 1rem;
    text-align: left;
}
.vd-accordion__title {
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    color: #000;
    margin: 0;
}
.vd-accordion__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    color: #131313;
}
.vd-accordion.is-open .vd-accordion__icon {
    transform: rotate(180deg);
}
.vd-accordion__panel {
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.vd-accordion__panel[hidden] {
    display: block;
    max-height: 0;
    overflow: hidden;
}
.vd-accordion.is-open .vd-accordion__panel {
    max-height: 125rem;
}
.vd-accordion__body p {
    margin: 1rem 0;
}
.vd-accordion__body {
    padding-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 150%;
    color: #000;
}
.vd-accordion__body ul {
    list-style: disc;
    list-style-position: inside;
    list-style-type: disc;
}
.vd-accordion__body p:last-child {
    margin-bottom: 0;
}
/* ----- Footer CTA ----- */

.vd-footer-cta {
    padding-top: 0;
}
/* ----- Verticale divider (desktop only) ----- */

.vd-divider {
    display: none;
}
/* ----- Sidebar ----- */

.vd-sidebar {
    align-self: flex-start;
}
.vd-contact-card {
    background: #ffffff;
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.vd-contact-card__avatar {
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.vd-contact-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vd-contact-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.vd-contact-card__name {
    font-weight: 600;
    color: #000;
    margin: 0;
    font-size: 1.25rem;
    line-height: 140%;
}
.vd-contact-card__role {
    font-size: 0.875rem;
    line-height: 150%;
    color: var(--color-text-grey, #666);
    margin: 0;
}
.vd-contact-card__desc {
    font-size: 1rem;
    line-height: 150%;
    color: #000;
    margin: 0;
}
.vd-contact-card__btn {
    align-self: flex-start;
}
/* ==========================================================================
   Tablet (≥48rem)
   ========================================================================== */

@media (min-width:768px) {
    .vd-container {
        padding: 2.5rem;
    }
    .vd-intro__title {
        font-size: var(--h5-font-size-ipad, 1.375rem);
        line-height: var(--h5-line-height-ipad, 140%);
    }
}
/* ==========================================================================
   Desktop (≥64rem): twee koloms met divider
   ========================================================================== */

@media (min-width:1280px) {
    .vd-container {
        padding: 2.5rem 3rem;
    }
    .vd-grid {
        flex-direction: row;
        gap: 0;
        align-items: stretch;
    }
    .vd-main {
        flex: 1;
        min-width: 0;
        padding-right: 2.5rem;
    }
    /* Verticale divider */
    .vd-divider {
        display: block;
        width: 1px;
        background: #d9d9d9;
        border-radius: 2rem;
        flex-shrink: 0;
        align-self: stretch;
    }
    .vd-sidebar {
        flex-shrink: 0;
        width: 23.375rem;
        padding-left: 2.5rem;
        position: sticky;
        top: 8.75rem;
        align-self: flex-start;
    }
}
/* ==========================================================================
   Desktop Large (≥90rem)
   ========================================================================== */

@media (min-width:1440px) {
    .vd-main {
        padding-right: 2.5rem;
    }
    .vd-sidebar {
        padding-left: 2.5rem;
    }
    .vd-intro__title {
        font-size: var(--h5-font-size-desktop-large, 1.5rem);
        line-height: var(--h5-line-height-desktop-large, 140%);
    }
    .vd-intro__body {
        font-size: 1.25rem;
    }
}
/* ==========================================================================
   SECTION: Project Detail
   ========================================================================== */

.project-detail-laag {
    background: transparent;
}
/* Grijze container met border-radius */

.pd-container {
    background: #f6f6f6;
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
/* ==========================================================================
   Bovenste deel: specs sidebar + content
   ========================================================================== */

.pd-top {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
/* ----- Specificaties sidebar (witte card) ----- */

.pd-specs {
    background: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.pd-specs__group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #bfbfbf;
}
.pd-specs__group:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.pd-specs__label {
    font-size: 1.125rem;
    line-height: 150%;
    font-weight: 600;
    color: #000;
    margin: 0;
}
.pd-specs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.pd-specs__item {
    font-size: 1rem;
    line-height: 150%;
    color: #000;
}
/* ----- Content (titel + tekst) ----- */

.pd-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.pd-content__title {
    color: #131313;
    margin: 0;
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
}
.pd-content__body {
    font-size: 1rem;
    line-height: 150%;
    color: #000;
}
.pd-content__body p {
    margin: 1rem 0;
}
.pd-content__body p:first-child {
    margin-top: 0;
}
.pd-content__body p:last-child {
    margin-bottom: 0;
}
/* ==========================================================================
   Fotogalerij
   ========================================================================== */

.pd-gallery {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.pd-gallery__row {
    display: grid;
    gap: 2rem;
}
/* 1 foto: volle breedte */

.pd-gallery__row--single {
    grid-template-columns: 1fr;
}
/* 2 foto's: 50/50 */

.pd-gallery__row--double {
    grid-template-columns: 1fr 1fr;
}
/* 3 foto's: gelijke verdeling */

.pd-gallery__row--triple {
    grid-template-columns: 1fr 1fr 1fr;
}
/* Galerij items */

.pd-gallery__item {
    border-radius: 1rem;
    overflow: hidden;
    background: #c4c4c4;
}
.pd-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Hoogte per rij-type */

.pd-gallery__row--single .pd-gallery__item {
    aspect-ratio: 16 / 9;
}
.pd-gallery__row--double .pd-gallery__item, .pd-gallery__row--triple .pd-gallery__item {
    aspect-ratio: 4 / 3;
}
/* ==========================================================================
   Mobile: galerij stapelen
   ========================================================================== */

@media (max-width:767px) {
    .pd-gallery__row--triple {
        grid-template-columns: 1fr;
    }
    .pd-gallery__row--double {
        grid-template-columns: 1fr;
    }
    .pd-gallery__row--triple .pd-gallery__item, .pd-gallery__row--double .pd-gallery__item {
        aspect-ratio: 16 / 9;
    }
    .pd-specs {
        padding: 1.5rem;
    }
}
/* ==========================================================================
   Tablet (≥48rem)
   ========================================================================== */

@media (min-width:768px) {
    .pd-container {
        padding: 2.5rem 2rem;
    }
    .pd-gallery__row--triple {
        grid-template-columns: 1fr 1fr;
    }
}
/* ==========================================================================
   Desktop (≥64rem): specs sidebar + content naast elkaar
   ========================================================================== */

@media (min-width:1280px) {
    .pd-container {
        padding: 2.5rem 2rem;
    }
    .pd-top {
        flex-direction: row;
        gap: 4.5rem;
    }
    .pd-specs {
        flex-shrink: 0;
        width: 23.125rem;
        align-self: flex-start;
        padding: 1.5rem 2.5rem;
    }
    .pd-content {
        flex: 1;
        min-width: 0;
        padding-top: 1.5rem;
    }
    .pd-gallery__row--triple {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
/* ==========================================================================
   COMPONENT: Header Rating Widget
   ========================================================================== */

.header-rating {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    flex-shrink: 0;
}
/* Container: 5 sterren breed
   Ster = 0.8125rem (0.8125rem), gap = 0.25rem (0.25rem)
   Totaal = 5 × 0.8125 + 4 × 0.25 = 5.0625rem */

.header-rating__stars {
    position: relative;
    display: block;
    width: 5.375rem;
    height: 0.75rem;
    /* 0.75rem */
    flex-shrink: 0;
}
/* Grijze sterren (achtergrond) */

.header-rating__stars-grey {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEzIDEyIiBmaWxsPSJub25lIj48cGF0aCBkPSJNNS44OTYwOCAwLjM4OTAxOEM2LjExOTUyIC0wLjEyOTY3MyA2Ljg4MDUxIC0wLjEyOTY3MyA3LjEwMzk1IDAuMzg5MDE5TDguNDIyNjUgMy40NTA0M0M4LjUxNjkgMy42NjkxIDguNzI5ODggMy44MTg1IDguOTc0MzUgMy44Mzc0M0wxMi4zOTczIDQuMTAyMzlDMTIuOTc3MiA0LjE0NzI5IDEzLjIxMjQgNC44NDYxIDEyLjc3MDUgNS4yMTE1N0wxMC4xNjI2IDcuMzY4NTZDOS45NzYzNyA3LjUyMjY1IDkuODk0OTcgNy43NjQ0MiA5Ljk1MTg5IDcuOTk0NzRMMTAuNzQ4NiAxMS4yMTk5QzEwLjg4MzYgMTEuNzY2MyAxMC4yNjggMTIuMTk4MyA5Ljc3MTQ3IDExLjkwNTVMNi44NDA5NiAxMC4xNzcxQzYuNjMxNjQgMTAuMDUzNyA2LjM2ODM5IDEwLjA1MzcgNi4xNTkwOCAxMC4xNzcxTDMuMjI4NTUgMTEuOTA1NUMyLjczMjAzIDEyLjE5ODMgMi4xMTYzOCAxMS43NjYzIDIuMjUxMzcgMTEuMjE5OUwzLjA0ODEzIDcuOTk0NzRDMy4xMDUwNCA3Ljc2NDQyIDMuMDIzNjkgNy41MjI2NSAyLjgzNzQyIDcuMzY4NTZMMC4yMjk0OTEgNS4yMTE1N0MtMC4yMTIzNjcgNC44NDYxIDAuMDIyNzk0MiA0LjE0NzI5IDAuNjAyNzQxIDQuMTAyMzlMNC4wMjU2OSAzLjgzNzQzQzQuMjcwMTggMy44MTg1IDQuNDgzMTYgMy42NjkxIDQuNTc3MzUgMy40NTA0M0w1Ljg5NjA4IDAuMzg5MDE4WiIgZmlsbD0iI0QxRDVEQiIvPjwvc3ZnPg==");
    background-repeat: repeat-x;
    background-size: 1.0625rem 0.75rem;
    /* 1.0625rem breed = 0.8125rem ster + 0.25rem gap */
    background-position: left center;
}
/* Gouden sterren (overlay, geknipt op breedte) */

.header-rating__stars-gold {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEzIDEyIiBmaWxsPSJub25lIj48cGF0aCBkPSJNNS44OTYwOCAwLjM4OTAxOEM2LjExOTUyIC0wLjEyOTY3MyA2Ljg4MDUxIC0wLjEyOTY3MyA3LjEwMzk1IDAuMzg5MDE5TDguNDIyNjUgMy40NTA0M0M4LjUxNjkgMy42NjkxIDguNzI5ODggMy44MTg1IDguOTc0MzUgMy44Mzc0M0wxMi4zOTczIDQuMTAyMzlDMTIuOTc3MiA0LjE0NzI5IDEzLjIxMjQgNC44NDYxIDEyLjc3MDUgNS4yMTE1N0wxMC4xNjI2IDcuMzY4NTZDOS45NzYzNyA3LjUyMjY1IDkuODk0OTcgNy43NjQ0MiA5Ljk1MTg5IDcuOTk0NzRMMTAuNzQ4NiAxMS4yMTk5QzEwLjg4MzYgMTEuNzY2MyAxMC4yNjggMTIuMTk4MyA5Ljc3MTQ3IDExLjkwNTVMNi44NDA5NiAxMC4xNzcxQzYuNjMxNjQgMTAuMDUzNyA2LjM2ODM5IDEwLjA1MzcgNi4xNTkwOCAxMC4xNzcxTDMuMjI4NTUgMTEuOTA1NUMyLjczMjAzIDEyLjE5ODMgMi4xMTYzOCAxMS43NjYzIDIuMjUxMzcgMTEuMjE5OUwzLjA0ODEzIDcuOTk0NzRDMy4xMDUwNCA3Ljc2NDQyIDMuMDIzNjkgNy41MjI2NSAyLjgzNzQyIDcuMzY4NTZMMC4yMjk0OTEgNS4yMTE1N0MtMC4yMTIzNjcgNC44NDYxIDAuMDIyNzk0MiA0LjE0NzI5IDAuNjAyNzQxIDQuMTAyMzlMNC4wMjU2OSAzLjgzNzQzQzQuMjcwMTggMy44MTg1IDQuNDgzMTYgMy42NjkxIDQuNTc3MzUgMy40NTA0M0w1Ljg5NjA4IDAuMzg5MDE4WiIgZmlsbD0iI0YyQzEwMCIvPjwvc3ZnPg==");
    background-repeat: repeat-x;
    background-size: 1.0625rem 0.75rem;
    /* 1.0625rem breed = 0.8125rem ster + 0.25rem gap */
    background-position: left center;
}
/* Tekst */

.header-rating__text {
    color: #131313;
    font-size: 0.75rem;
    line-height: 150%;
    font-weight: 500;
    white-space: nowrap;
}
/* ==========================================================================
   COMPONENT: Header Opening Hours
   ========================================================================== */

.header-opening-hours {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
/* Groene stip (open) */

.header-opening-hours__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: #34A853;
}
/* Rode stip als gesloten */

.header-opening-hours.is-closed .header-opening-hours__dot {
    background: #EA4335;
}
.header-opening-hours__text {
    color: #131313;
    font-size: 0.875rem;
    line-height: 150%;
    font-weight: 400;
    white-space: nowrap;
}
.th-btn.lang-selector {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    border-radius: 3.75rem;
    border: 1px solid #E0E0E0;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
    line-height: 1;
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: #131313;
}
.th-btn.lang-selector:hover {
    border-color: #131313;
    background: #f6f6f6;
}
.th-btn.lang-selector::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M14.0739 11.7172C14.7602 10.599 15.1227 9.31217 15.1208 8.00013V7.99987C15.1227 6.68782 14.7602 5.40102 14.0738 4.2828L14.0699 4.2767C13.4332 3.23884 12.5409 2.38162 11.4783 1.78694C10.4158 1.19227 9.21852.880006 8.00088.880001 6.78325.879996 5.58596 1.19225 4.52341 1.78691 3.46087 2.38158 2.56858 3.2388 1.9318 4.27665L1.92784 4.28283C1.24318 5.40181.880864 6.68815.880859 7.99998.880854 9.3118 1.24316 10.5981 1.92781 11.7171L1.93184 11.7234C2.56862 12.7612 3.46091 13.6184 4.52345 14.2131 5.58598 14.8078 6.78326 15.12 8.00089 15.12 9.21851 15.12 10.4158 14.8077 11.4783 14.2131 12.5408 13.6184 13.4331 12.7612 14.0699 11.7233L14.0739 11.7172ZM8.91096 13.8997C8.77528 14.0306 8.61912 14.1385 8.44865 14.219 8.30873 14.2855 8.15577 14.32 8.00085 14.32 7.84594 14.32 7.69298 14.2855 7.55306 14.219 7.22866 14.0533 6.95096 13.8089 6.74536 13.5082 6.32547 12.9015 6.01429 12.2263 5.82574 11.5129 6.55005 11.4684 7.27509 11.4457 8.00086 11.4448 8.72633 11.4448 9.45141 11.4675 10.1761 11.5129 10.0717 11.8797 9.94137 12.2386 9.78601 12.5869 9.58143 13.0767 9.28432 13.5224 8.91096 13.8997ZM1.69478 8.4H4.56662C4.58532 9.20135 4.67218 9.99965 4.82626 10.7863 4.04121 10.8554 3.25817 10.9502 2.47713 11.0709 2.01977 10.2504 1.75241 9.33763 1.69478 8.4ZM2.47712 4.92908C3.25785 5.05007 4.04117 5.14497 4.82708 5.21379 4.67269 6.00035 4.58564 6.79865 4.56688 7.6H1.69478C1.75241 6.66237 2.01976 5.74963 2.47712 4.92908ZM7.09075 2.10026C7.22642 1.96935 7.38258 1.8615 7.55306 1.78097 7.69298 1.71448 7.84594 1.67999 8.00085 1.67999 8.15577 1.67999 8.30873 1.71448 8.44865 1.78097 8.77305 1.94667 9.05075 2.19104 9.25635 2.49174 9.67624 3.0985 9.98741 3.77366 10.176 4.48704 9.45165 4.53161 8.72662 4.55432 8.00086 4.55516 7.27539 4.55515 6.55031 4.53244 5.82561 4.48703 5.92998 4.12024 6.06034 3.76135 6.2157 3.41309 6.42028 2.9233 6.71738 2.47755 7.09075 2.10026ZM14.3069 7.6H11.4351C11.4164 6.79865 11.3295 6.00034 11.1755 5.21372 11.9605 5.14464 12.7436 5.04976 13.5246 4.92908 13.982 5.74963 14.2493 6.66237 14.3069 7.6ZM5.63087 10.7241C5.47442 9.9587 5.38606 9.18097 5.36683 8.4H10.635C10.6159 9.18096 10.5277 9.9587 10.3714 10.7241 9.58209 10.6723 8.79191 10.6459 8.00086 10.6448 7.21038 10.6448 6.42038 10.6712 5.63087 10.7241ZM10.3708 5.27591C10.5273 6.0413 10.6156 6.81903 10.6349 7.6H5.36674C5.3858 6.81903 5.47399 6.04128 5.6303 5.27588 6.41962 5.32767 7.2098 5.35409 8.00086 5.35515 8.79134 5.35515 9.58133 5.32873 10.3708 5.27591ZM11.4348 8.4H14.3069C14.2493 9.33763 13.9819 10.2504 13.5246 11.0709 12.7439 10.9499 11.9605 10.855 11.1746 10.7862 11.329 9.99964 11.4161 9.20135 11.4348 8.4ZM13.0449 4.19276C12.3623 4.29125 11.6777 4.36922 10.9909 4.42668 10.8675 3.96718 10.7084 3.51803 10.5149 3.08335 10.3382 2.68335 10.116 2.30509 9.85251 1.95611 11.1258 2.34659 12.2431 3.12941 13.0449 4.19276ZM3.53192 3.53106C4.26231 2.79999 5.16088 2.25923 6.14887 1.9562 6.13388 1.97562 6.11846 1.99417 6.10368 2.01398 5.59586 2.74502 5.22596 3.56274 5.01222 4.42681 4.32548 4.36864 3.64034 4.29063 2.95679 4.19276 3.13308 3.95925 3.32525 3.73817 3.53192 3.53106ZM2.95679 11.8072C3.63939 11.7087 4.32405 11.6308 5.01075 11.5733 5.13417 12.0328 5.29335 12.482 5.48683 12.9166 5.66347 13.3166 5.88574 13.6949 6.1492 14.0439 4.87594 13.6534 3.75862 12.8706 2.95679 11.8072ZM12.4698 12.4689C11.7394 13.2 10.8408 13.7408 9.85284 14.0438 9.86783 14.0244 9.88324 14.0058 9.89803 13.986 10.4059 13.255 10.7758 12.4373 10.9895 11.5732 11.6762 11.6313 12.3614 11.7094 13.0449 11.8072 12.8686 12.0407 12.6765 12.2618 12.4698 12.4689Z' fill='%23131313'/%3E%3C/svg%3E") no-repeat center / contain;
}
.th-btn.lang-selector::after {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.375rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M5 6C4.81168 6 4.63591 5.92092 4.47269 5.76277L.19774 1.25535C.0659134 1.10379 0 .932455 0 .741351 0 .530478.0674827.354201.202448.212521.337414.0708404.502197 0 .696798 0 .8914 0 1.06089.0757823 1.20527.227347L5 4.22076 8.79473.227347C8.93911.0757823 9.1086 0 9.3032 0 9.4978 0 9.66259.0708404 9.79755.212521 9.93252.354201 10 .530478 10 .741351 10 .945634 9.93409 1.11697 9.80226 1.25535L5.52731 5.76277C5.3892 5.92092 5.21343 6 5 6Z' fill='%23131313'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (min-width:1024px) {
    .bestsellers-link-btn--mobile {
        display: none;
    }
}
/* Project Filter Buttons */

.filter-options-and-search, .filter-options-and-search * {
    box-sizing: border-box;
}
.filter-options-and-search {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    margin-bottom: 4.5rem;
}
body:not(.page-id-2032) .filter-options-and-search {
    display: none;
}
.filter-options {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
.filter-btn {
    border-radius: 0.5rem;
    border: 1px solid #000000;
    background: transparent;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    color: #000000;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
}
.filter-btn.is-active {
    background: #7a68ae;
    border-color: transparent;
    color: #ffffff;
}
.filter-btn:hover:not(.is-active) {
    background: #f6f6f6;
}
.projects-grid {
    transition: opacity 0.3s ease;
}
@media (max-width:1023px) {
    body .site .hero-grid-laag {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .bestsellers-title {
        font-size: 1.5rem;
    }
    .bestsellers-header .bestsellers-link-btn {
        display: none;
    }
    .bestsellers-link-btn--mobile {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: #131313;
        text-decoration: none;
        font-weight: 500;
        margin-top: 1.5rem;
        font-size: 1rem;
    }
    .bestsellers-link-btn--mobile .btn-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bestsellers-link-btn--mobile .btn-icon svg {
        transition: transform 0.2s ease;
    }
    .bestsellers-link-btn--mobile:hover .btn-icon svg {
        transform: translateX(0.25rem);
    }
    .bestsellers-header {
        margin-bottom: 1.5rem;
    }
    /* Native scroll-snap voor bestsellers (vervangt Owl op mobile) */
    .bestsellers-slider.native-scroll {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 1rem;
        scroll-padding-left: 0;
    }
    .bestsellers-slider.native-scroll::-webkit-scrollbar {
        display: none;
    }
    .bestsellers-slider.native-scroll .bestseller-card {
        flex: 0 0 80%;
        min-width: 0;
        scroll-snap-align: start;
    }
    @media (min-width: 768px) and (max-width: 1023px) {
        .bestsellers-slider.native-scroll .bestseller-card {
            flex: 0 0 38%;
        }
    }
    .kennismaken {
        white-space: unset;
    }
    /* Process cards: horizontal carousel on mobile */
    .component-7 {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 1rem;
    }
    .component-7::-webkit-scrollbar {
        display: none;
    }
    .process-card {
        width: 20rem;
        min-width: 20rem;
        height: 27.5rem;
        scroll-snap-align: start;
    }
    .component-7 .process-card .process-card__text {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .component-7 .process-card .process-card__badge {
        border: 1px solid transparent;
        background: rgba(255, 255, 255, 0.25);
    }
    .process-title {
        font-size: 1.5rem;
    }
    .process-wrapper {
        gap: 2rem;
    }
    .kennismaken {
        font-size: 1.5rem;
    }
    .process-header .menu-item, .process-wrapper .mobile-only.menu-item {
        margin-top: 0;
        width: fit-content;
    }
    /* Projects (pagebuilder-projects): horizontal carousel on mobile */
    .projects-images {
        width: 100%;
        overflow: visible;
    }
    .projects-content .projects-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 1rem;
    }
    .projects-content .projects-grid::-webkit-scrollbar {
        display: none;
    }
    .projects-grid .project-card {
        height: 27.5rem;
        border-radius: 1rem;
        flex-shrink: 0;
        min-height: unset;
    }
    .projects-content .projects-grid .project-card {
        width: 19.75rem;
        min-width: 19.75rem;
        height: 27.5rem;
        scroll-snap-align: start;
        border-radius: 1rem;
        flex-shrink: 0;
    }
    .projects-title {
        font-size: 1.5rem;
    }
    .projects-content .menu-item a {
        width: fit-content;
    }
    .projects-content .menu-item {
        width: fit-content;
    }
    body .slider-inner {
        padding: 1rem;
    }
    .feedback-slider-container {
        min-height: unset;
    }
    .feedback-block .feedback-container {
        gap: 2rem;
        padding: 2rem 1rem;
        padding-top: 2rem;
    }
    body .brochure-card {
        background-image: unset !important;
    }
    body .site-footer__top-row {
        padding-bottom: 0;
    }
    .tag-link:nth-child(6)~.tag-link {
        display: none;
    }
    /* Small Cards: horizontal layout on mobile */
    .sc-wrapper {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .sc-grid::-webkit-scrollbar {
        display: none;
    }
    .sc-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        max-width: 22.375rem;
        width: 100%;
        flex-shrink: 0;
        scroll-snap-align: start;
        text-decoration: none;
    }
    .sc-card .sc-image-wrapper {
        width: 7.375rem;
        min-width: 7.375rem;
        height: 7.3125rem;
        border-radius: 1rem;
        overflow: hidden;
        flex-shrink: 0;
    }
    .sc-card .sc-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .sc-card .sc-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .sc-title {
        font-size: 1.5rem;
    }
    .sc-group+.sc-group {
        margin-top: 1.5rem;
    }
    section.header-layer {
        padding-bottom: 3rem;
    }
    nav.breadcrumbs {
        margin-top: 1rem;
    }
    body:not(.home):not(.single) section.header-layer.has-hero-image, body:not(.home).page-id-1972 section.header-layer {
        padding-bottom: 1.5rem;
    }
    .centered-content .section-title {
        font-size: 2rem;
    }
    .pagebuilder-wrapper.bg-gray {
        padding: 3rem 1.5rem;
    }
    .pagebuilder-wrapper.bg-gray .inner {
        padding: 0;
    }
    .faq-header .header-right .bestsellers-link-btn {
        display: none;
    }
    .faq-header {
        gap: 0;
        margin-bottom: 1.5rem;
    }
    .faq-header .header-left {
        text-align: center;
        width: 100%;
        align-items: center;
    }
    .contact-card-container {
        gap: 1.5rem;
    }
    body.thanks-page .breadcrumbs {
        margin-bottom: 0;
    }
    .feedback-title {
        font-size: 1.5rem;
    }
    .faq-overzicht-section .inner {
        padding: 0;
    }
    .faq-overzicht-section .faq-container {
        padding: 1.5rem 1rem;
    }
    .faq-sidebar {
        padding: 1.125rem;
    }
    .faq-categories {
        padding: 0;
    }
    /* Filters: horizontal scroll on mobile */
    .filter-options {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .filter-options::-webkit-scrollbar {
        display: none;
    }
    .filter-btn {
        font-size: 0.875rem;
        padding: 0.625rem 0.875rem;
    }
    .filter-options-and-search {
        margin-bottom: 1.5rem;
    }
    .pd-container {
        padding: 3rem 1.5rem;
        gap: 2rem;
    }
    .single-vacature .site .site-content>.features-section:first-child {
        padding-top: 0;
        padding-bottom: 0;
    }
    .bestsellers-section .inner {
        padding-right: 0;
    }
}
body.logged-in .mobile-menu {
    z-index: 9999;
}
/* Bestseller card image hover */

.bestseller-card .card-image-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 1rem;
}
.bestseller-card .card-image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    border-radius: 1rem;
    pointer-events: none;
}
.bestseller-card .card-image-wrap:hover::after {
    background: rgba(0, 0, 0, 0.25);
}
/* Shared card hover overlay button */

.card-hover-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 0.5rem;
    border: 1px solid transparent;
    padding: 0.875rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.project-card:hover .card-hover-btn, .bestseller-card .card-image-wrap:hover .card-hover-btn {
    opacity: 1;
}
/* --- 7. Custom File Upload (Figma design) --- */

.gf-centered-layer .gfield--type-fileupload .ginput_container_fileupload {
    background: rgba(237, 237, 237, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 1rem;
    padding: 0.75rem 1.5rem;
    height: 3.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    position: relative;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}
.gf-centered-layer .gfield--type-fileupload .ginput_container_fileupload:focus-within {
    border-color: #7a68ae;
    background-color: #ffffff;
}
.gf-centered-layer .gfield--type-fileupload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.gf-centered-layer .gfield--type-fileupload .gform_fileupload_rules, .gf-centered-layer .gfield--type-fileupload .gfield_description {
    display: none !important;
}
.gf-centered-layer .gf-upload-label {
    color: #1f1f1f;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.gf-centered-layer .gf-upload-label.has-file {
    color: #131313;
    font-weight: 500;
}
.gf-centered-layer .gf-upload-btn {
    border-radius: 0.5rem;
    border: 1px solid #000000;
    padding: 0.75rem 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    flex-shrink: 0;
    cursor: pointer;
    background: transparent;
    transition: background-color 0.2s ease;
}
.gf-centered-layer .gf-upload-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
.gf-centered-layer .gf-upload-btn span {
    color: #000000;
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}
.gf-centered-layer .gfield--type-fileupload input[type="hidden"] {
    display: none;
}
.gf-centered-layer .gfield--type-fileupload .gfield_validation_message {
    margin-top: 0.5rem;
}
@media (max-width:768px) {
    .gf-centered-layer .gf-upload-btn {
        padding: 0.625rem 0.75rem;
    }
    .gf-centered-layer .gf-upload-btn span {
        font-size: 0.8125rem;
    }
}
/* --- Mobile Search Bar (onder header, buiten menu) --- */

.mobile-search-bar {
    display: none;
}
@media (max-width:1023px) {
    .mobile-search-bar {
        display: block;
        background: #f6f6f6;
        padding: 0.875rem 1rem;
    }
    .mobile-search-bar__inner {
        width: 100%;
    }
    .mobile-search-bar .qs-search-trigger {
        width: 100%;
        min-width: unset;
        min-height: 2.9375rem;
        padding: 0.875rem 1rem;
        justify-content: flex-start;
        gap: 0.5rem;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 0.5rem;
    }
    .mobile-search-bar .qs-search-trigger__text {
        display: inline;
    }
}
/* --- FAQ Category Dropdown (Mobile) --- */

.faq-category-dropdown-toggle {
    display: none;
}
@media (max-width:768px) {
    .faq-category-dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: #ffffff;
        border-radius: 0.5rem;
        border: 1px solid rgba(0, 0, 0, 0.25);
        padding: 0.875rem 1.125rem;
        height: 3.9375rem;
        cursor: pointer;
        font-family: "Inter", sans-serif;
        font-size: 1rem;
        font-weight: 400;
        color: #000000;
    }
    .faq-category-dropdown-toggle__icon {
        width: 1.5rem;
        height: 1.5rem;
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }
    .faq-category-dropdown-toggle.is-open .faq-category-dropdown-toggle__icon {
        transform: rotate(180deg);
    }
    .faq-sidebar .faq-categories {
        display: none;
    }
    .faq-sidebar .faq-categories.is-open {
        display: block;
        margin-top: 0.5rem;
    }
    .faq-category-group {
        margin-top: 0.75rem;
    }
    .faq-sidebar {
        background: transparent;
        padding: 0;
    }
}
/* === Desktop: col-media 444px, stretch als content groter is === */

@media (min-width: 769px) {
    .content-row.layout-left .col-media, .content-row.layout-right .col-media {
        position: relative;
        overflow: hidden;
        min-height: 0;
        height: 27.75rem;
        align-self: stretch;
    }
    .content-row.layout-left .image-wrapper, .content-row.layout-right .image-wrapper {
        position: absolute;
        inset: 0;
        min-height: 0;
    }
}
/* === Mobile: col-media max 310px === */

@media (max-width: 768px) {
    .content-row .col-media {
        height: 19.375rem;
        position: relative;
        overflow: hidden;
        flex: unset;
    }
    .content-row .image-wrapper {
        position: absolute;
        inset: 0;
        min-height: 0;
        max-height: none;
    }
}

#cmplz-document a {
    color:#7a68ae;
    text-decoration: underline;
}

#cmplz-document a:hover {
    color:#7a68ae;
    text-decoration: unset;
}

#cmplz-document p, #cmplz-document li, #cmplz-document td, .editor-styles-wrapper .cmplz-unlinked-mode p, .editor-styles-wrapper .cmplz-unlinked-mode li, .editor-styles-wrapper .cmplz-unlinked-mode td {
    font-size: initial;
}

#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode {
    font-size: initial;
    max-width: 100%;
}

#cmplz-document ul {
    margin: 1em 0;
    padding-left: 40px;
}

#cmplz-document h2 {
    font-size: 1.5em;
}

#cmplz-document h3 {
    font-size: 1.2em;
}

#cmplz-document h2,
#cmplz-document h3 {
    line-height: inherit;
}

.grecaptcha-badge {
    visibility: hidden !important;
}