@import 'variables.css';
/* =========================================
   JRMA TRANSFER PRICING - MAIN STYLES
   Mobile-First Responsive CSS
   Last Updated: December 2025
   ========================================= */

/* =========================================
   TABLE OF CONTENTS
   =========================================
   1. BASE & RESET
   2. TYPOGRAPHY
   3. LAYOUT & CONTAINERS
   4. BUTTONS & INTERACTIVE ELEMENTS
   5. NAVIGATION
   6. HERO SECTIONS
   7. CONTENT SECTIONS (Intro, Services, Gallery, FAQ)
   8. DOCUMENTS (Document Shop)
   9. BLOG
   10. FORMS & INPUTS
   11. FOOTER (Figma Design)
   12. SINGLE POST/PAGE
   13. SEARCH
   14. UTILITIES & HELPERS
   ========================================= */

/* =========================================
   1. BASE & RESET
   ========================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--white-jrma);
    font-family: var(--font-body);
    color: var(--black-jrma);
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    overflow-x: clip;
}

.post,
.page {
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--black-jrma);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--orange-jrma);
}

ul,
ol {
    list-style: none;
    margin: 0;
}

.grecaptcha-badge {
    visibility: hidden !important
}

li>ul,
li>ol {
    margin-left: unset;
}


/* =========================================
   0. CMPLZ
   ========================================= */

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

#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;
}

/* =========================================
   0. CMPLZ
   ========================================= */



/* =========================================
   2. TYPOGRAPHY
   ========================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 1rem;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: -0.04rem;
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    letter-spacing: -0.04rem;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h4 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.text-center {
    text-align: center;
}

.text-uppercase {
    text-transform: uppercase;
}

/* =========================================
   3. LAYOUT & CONTAINERS
   ========================================= */

.inner-container,
.container {
    width: 100%;
    max-width: 91.75rem;
    /* 1468px */
    margin: 0 auto;
    padding: 0 1.5rem;
    /* 24px fixed */
}

section {
    padding: 3rem 0;
}

section.white-bg {
    background: #fff !important;
}

@media (min-width: 1024px) {
    section {
        padding: 5rem 0;
    }
}

section.no-padding-top {
    padding-top: 0 !important;
}

section.no-padding-bottom {
    padding-bottom: 0 !important;
}

/* Grid System */

.grid {
    display: grid;
    gap: 2rem;
}

.grid-2 {
    grid-template-columns: 1fr;
}

.grid-3 {
    grid-template-columns: 1fr;
}

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

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* =========================================
   4. BUTTONS & INTERACTIVE ELEMENTS
   ========================================= */

/* Tags */

.tag {
    background: var(--orange-jrma);
    border-radius: 4px;
    padding: 8px 16px;
    color: var(--white-jrma);
    font-family: var(--font-semibold, sans-serif);
    font-size: 14px;
    line-height: 170%;
    display: inline-flex;
    font-weight: 600;
    width: fit-content;
}

.tag.dark {
    background: var(--black-jrma);
}

.tag.white {
    background: var(--white-jrma);
    color: var(--black-jrma);
}

.tag.grey {
    background: var(--grey-jrma);
    color: var(--black-jrma);
}

.tag-small {
    font-size: 12px;
    padding: 4px 12px;
}

/* Button Base Styles */

.button-primary,
.button-white,
.button-black {
    align-items: stretch;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-family: var(--font-body);
    font-weight: 600;
    position: relative;
    height: 100%;
    display: flex;
    width: fit-content;
}

/* Button Components */

.button-text {
    background: #DA2E00;
    padding: 12px 24px;
    color: var(--white-jrma);
    display: inline-flex;
    align-items: center;
    font-weight: 400;
    width: 100%;
}

.button-circle,
.button-white-circle,
.button-black-circle {
    padding: 12px;
    width: 3.1875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-circle {
    background: #FE4C1C;
}

.button-white-circle {
    background: var(--white-jrma);
}

.button-black-circle {
    background: var(--black-jrma);
}

/* Primary Button (Orange) */

.button-primary {
    color: var(--white-jrma);
}

.button-primary:hover .button-text {
    background: #B62701;
}

.button-primary:hover .button-circle {
    background: linear-gradient(0deg, #CB3D16 0%, #CB3D16 100%), #FFF;
}

/* White Button */

.button-white {
    color: var(--black-jrma);
}

.button-white .button-text {
    background: var(--white-jrma);
    color: var(--black-jrma);
}

/* Black Button */

.button-black {
    color: var(--white-jrma);
}

.button-black .button-text {
    background: var(--black-jrma);
}

.button-black:hover .button-black-circle {
    background: var(--orange-jrma);
}

/* Outline Buttons */

.button-primary-outline {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border: 2px solid var(--orange-jrma);
    border-radius: 4px;
    color: var(--orange-jrma);
    font-weight: 600;
    transition: unset;
    background: transparent;
}

.button-primary-outline:hover {
    background: var(--orange-jrma);
    color: var(--white-jrma);
}

/* =========================================
   5. NAVIGATION
   ========================================= */

/* Mobile Navigation - Updated to Figma Specs */

.topnav-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    /* Figma: 0 24px */
    height: 80px;
    /* Figma: height 80px */
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Figma Visuals */
    background: linear-gradient(to left, rgba(7, 38, 76, 0.6), rgba(7, 38, 76, 0.6));
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.home .topnav-mobile {
    position: fixed;
    width: 100%;
}

.topnav-mobile {
    position: fixed;
    width: 100%;
}

.site-logo-link {
    display: block;
    max-width: 8.75rem;
}

body .trp-menu-ls-label .trp-flag-image {
    display: none !important;
}

.site-logo-mobile {
    height: 3rem;
    width: auto;
}

/* Updated Menu Toggle to match design context */

.menu-toggle {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 8px;
    /* For potential "Menu" text */
    padding: 0;
}

.menu-toggle img {
    /* Ensure icon is white for the dark header */
    filter: brightness(0) invert(1);
}

/* Desktop Navigation Base */

.topnav-desktop {
    display: none;
    background: var(--white-jrma);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
}

body:not(.home) .topnav-desktop {}

.hero.only-breadcrumbs .hero-content {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

/* =========================================
   CTA BUTTON IN MENU (.nav-ct-btn)
   Targeting: <a><span>Text</span><span></span></a>
   ========================================= */

.desktop-menu-items>li.nav-ct-btn {
    margin-left: 1rem;
}

/* 1. The Container (The Link) */

.desktop-menu-items>li.nav-ct-btn>a {
    /* Reset standard link styles */
    padding: 0 !important;
    background: transparent !important;
    /* Layout for the two spans */
    display: inline-flex;
    align-items: stretch;
    height: 3.125rem;
    /* CRITICAL FIXES */
    border-radius: 0;
    overflow: hidden;
    /* Ensures spans don't overflow the radius */
    text-decoration: none;
}

/* 2. The Text Part (First Span) */

.desktop-menu-items>li.nav-ct-btn>a>span:first-child {
    background-color: #DA2E00;
    /* Dark Orange */
    color: var(--white-jrma, #ffffff);
    /* CRITICAL FIX */
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    /* Layout */
    display: flex;
    align-items: center;
    padding: 0 24px;
    transition: background-color 0.3s ease;
}

/* 3. The Icon Part (Second Span) */

.desktop-menu-items>li.nav-ct-btn>a>span:last-child {
    background-color: #FE4C1C;
    /* Light Orange */
    width: 51px;
    /* Square box */
    /* Icon */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8.14453 0.5C8.21548 0.500668 8.27733 0.517317 8.33887 0.560547L8.40039 0.613281L15.3486 7.56152C15.4018 7.61569 15.4275 7.65782 15.4395 7.68652V7.6875C15.4546 7.72385 15.4629 7.7639 15.4629 7.81152C15.4629 7.85913 15.4543 7.89825 15.4395 7.93359V7.93457C15.4276 7.96304 15.4022 8.00538 15.3486 8.05957L8.39453 15.0078C8.30318 15.0981 8.22456 15.124 8.1416 15.124C8.0609 15.1239 7.98874 15.0994 7.90527 15.0137L7.90039 15.0088L7.84863 14.9482C7.80653 14.8886 7.79201 14.8306 7.79199 14.7656C7.79199 14.701 7.80676 14.6433 7.84863 14.584L7.90039 14.5234L14.2617 8.16211H0.851562C0.729469 8.16207 0.657228 8.12693 0.59668 8.06641H0.59668C0.53483 8.0055 0.500002 7.93257 0.5 7.81055C0.5 7.68853 0.534835 7.6156 0.595703 7.55469H0.59668C0.657231 7.49416 0.729461 7.45902 0.851562 7.45898H14.2617L7.90625 1.10352C7.84494 1.04216 7.81315 0.983763 7.80078 0.918945L7.79492 0.851562C7.79401 0.761613 7.82017 0.688031 7.90039 0.607422L7.90137 0.606445C7.98151 0.525858 8.05487 0.499224 8.14453 0.5Z' fill='white' stroke='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px auto;
    transition: background-color 0.3s ease;
}

/* 4. Hover Effects */

.desktop-menu-items>li.nav-ct-btn>a:hover>span:first-child {
    background-color: #B62701;
    /* Darker Text bg */
}

.desktop-menu-items>li.nav-ct-btn>a:hover>span:last-child {
    background-color: #CB3D16;
    /* Darker Icon bg */
}

/* 5. Cleanup pseudo-elements from standard menu styles */

.desktop-menu-items>li.nav-ct-btn>a::after {
    display: none !important;
}

@media (min-width: 1280px) {
    .topnav-mobile {
        display: none;
    }

    .topnav-desktop {
        display: block;
    }
}

@media (max-width: 1279px) {
    .hidden-mobile {
        display: none;
    }

    .lang-switcher {
        display: none;
    }
}

.inner-topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo-desktop {
    height: 54px;
    width: auto;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.desktop-menu-items {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
    align-items: center;
}

.desktop-menu-items a {
    color: var(--Color-White, #FFF);
    transition: color 0.3s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: Sora;
    font-size: 1rem;
    font-weight: 400;
    line-height: 150%;
}

.desktop-menu-items .menu-item-has-children>a:first-child {
    display: flex;
    align-items: center;
    letter-spacing: -0.02rem;
    gap: 0.5rem;
}

.desktop-menu-items a:hover {
    color: var(--orange-jrma);
}

/* Search Elements */

.search-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-search {
    display: block;
}

.icon-close {
    display: none;
}

.search-toggle.active .icon-search {
    display: none;
}

.search-toggle.active .icon-close {
    display: block;
}

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white-jrma);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.search-dropdown.active {
    max-height: 600px;
    padding: 2rem;
}

.search-heading {
    margin-bottom: 1rem;
}

.search-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.desktop-search-form {
    margin-bottom: 2rem;
}

.text-input {
    position: relative;
    width: 100%;
}

.text-input input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    border: 1px solid var(--grey-jrma);
    border-radius: 4px;
    font-size: 16px;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dark-grey-jrma);
}

/* Breadcrumbs */

.breadcrumbs {
    display: flex;
    gap: 0.5rem;
    font-size: 14px;
    color: var(--dark-grey-jrma);
    margin-bottom: 1rem;
}

.breadcrumbs a {
    color: var(--dark-grey-jrma);
}

.breadcrumbs a:hover {
    color: var(--orange-jrma);
}

.rank-math-breadcrumb {
    color: #fff;
}

.rank-math-breadcrumb .separator {
    /* Jouw SVG encoded als data-URI */
    background-image: 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='M9.75398 7.9667L4.55181 2.76453C4.41626 2.62898 4.34787 2.46025 4.34665 2.25836C4.34531 2.05648 4.41237 1.88353 4.54781 1.73953C4.69448 1.59286 4.86943 1.51953 5.07265 1.51953C5.27587 1.51953 5.44948 1.59286 5.59348 1.73953L11.033 7.17103C11.1463 7.28436 11.2285 7.41009 11.2795 7.5482C11.3306 7.68642 11.3561 7.82592 11.3561 7.9667C11.3561 8.10748 11.3306 8.24698 11.2795 8.3852C11.2285 8.52331 11.1463 8.64903 11.033 8.76236L5.58081 14.2145C5.43415 14.3612 5.26265 14.4318 5.06631 14.4262C4.86998 14.4206 4.69848 14.3445 4.55181 14.1979C4.41626 14.0512 4.3457 13.8797 4.34015 13.6834C4.33459 13.487 4.40515 13.3155 4.55181 13.1689L9.75398 7.9667Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* Zorgt dat het icoon past */
    /* Maak er een blokje van om afmetingen te kunnen geven */
    display: inline-block;
    width: 16px;
    height: 16px;
    /* Verberg het originele scheidingsteken (zoals '-' of '»') */
    color: transparent;
    /* Uitlijning */
    vertical-align: middle;
    margin: 0 1rem;
    /* Beetje ruimte links/rechts */
}

.rank-math-breadcrumb>p {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    flex-wrap: wrap;
}

.rank-math-breadcrumb>p a {
    color: #fff;
    text-decoration: underline;
}

.rank-math-breadcrumb>p a:hover {
    text-decoration: none;
}

/* =========================================
   6. HERO SECTIONS
   ========================================= */

.hero-section {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--hero-gradient);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: var(--white-jrma);
    text-align: center;
    max-width: 91.75rem;
    margin: 0 auto;
    padding: 0rem 1.5rem;
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 0;
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 0;
    margin-top: 1.5rem;
}

.hero-subtitle>p:last-child {
    margin-bottom: 0;
    ;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.hero-gradient {
    background: var(--blue-linear-jrma);
    color: var(--white-jrma);
    padding: 4rem 0;
}

.hero-video-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home .topnav-desktop {
    position: fixed;
    top: 0;
    width: 100%;
}

.hero.has-video {
    display: flex;
    align-items: center;
    position: relative;
    flex-direction: column;
    justify-content: center;
}

.hero {
    padding-top: 80px;
    padding-bottom: 80px
}

.home .hero.has-video {
    padding-bottom: 0;
}

.hero-video-overlay {
    background: linear-gradient(0deg, rgba(7, 38, 76, 0.60) 0%, rgba(7, 38, 76, 0.60) 100%);
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.hero:not(.has-video) .hero-content {
    min-height: 35rem;
    min-height: unset;
    padding-top: 2rem;
}

.hero:not(.has-video) .hero-content .rank-math-breadcrumb>p {
    margin-bottom: 2rem;
}

.hero:not(.has-video).only-breadcrumbs+section {
    padding-top: 6rem
}

.hero:not(.has-video).only-breadcrumbs .hero-content .rank-math-breadcrumb>p {}

.hero:not(.has-video) {
    background: linear-gradient(0deg, rgba(7, 38, 76, 0.60) 0%, rgba(7, 38, 76, 0.60) 100%), url(https://www.jrma.nl/wp-content/uploads/2025/12/JRMA_Background_WP.webp);
    background: url(https://www.jrma.nl/wp-content/uploads/2026/01/BG.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero:not(.has-video) .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero:not(.has-video).has-breadcrumbs .hero-content {
    padding-top: 0;
}

@media (max-width: 768px) {
    .hero.has-video {
        height: 42.125rem;
        gap: 4rem;
    }

    .hero-content {}

    .hero-usp-wrapper {
        padding: 0;
    }

    .hero.has-video {
        justify-content: flex-end;
    }

    .home .section-usp-carousel {
        padding-bottom: 4rem;
        padding-top: 0;
    }
}

/* =========================================
   7. CONTENT SECTIONS
   ========================================= */

/* Intro & Stats */

.section-intro {
    padding: 4rem 0;
}

.intro-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    margin-bottom: 1rem;
}

.intro-description {
    font-size: 1.125rem;
    color: var(--dark-grey-jrma);
    max-width: 700px;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--orange-jrma);
    line-height: 1;
}

.stat-label {
    font-size: 1rem;
    color: var(--dark-grey-jrma);
    margin-top: 0.5rem;
}

.section-intro .intro-text-below-title a {
    text-decoration: underline;
    color: #fff;
}

.section-intro .intro-text-below-title a:hover {
    text-decoration: none;
}

/* Services Section */

.section-services {
    background: var(--grey-jrma);
    padding: 4rem 0;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.service-card {
    background: var(--white-jrma);
    border-radius: 8px;
    padding: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.service-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
}

.service-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.service-description {
    color: var(--dark-grey-jrma);
    line-height: 1.7;
}

/* Gallery / Carousel */

.section-gallery {
    padding: 4rem 0;
}

.gallery-container {
    position: relative;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-slide img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--orange-jrma);
}

.swiper-pagination-bullet-active {
    background: var(--orange-jrma);
}

/* Content Left/Right */

.content-left-right {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .content-left-right {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.content-image img {
    border-radius: 8px;
}

.content-text h2 {
    margin-bottom: 1rem;
}

.content-text p {
    color: var(--dark-grey-jrma);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* FAQ Section */

.section-faq {
    padding: 4rem 0;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--grey-jrma);
    margin-bottom: 1rem;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.5rem 0;
    background: none;
    border: none;
    text-align: left;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: var(--orange-jrma);
}

.faq-icon {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding-bottom: 1.5rem;
}

.faq-answer p {
    color: var(--dark-grey-jrma);
    line-height: 1.7;
}

/* =========================================
   8. DOCUMENTS (Document Shop)
   ========================================= */

.section-documents {
    padding: 4rem 0;
}

.documents-header {
    text-align: center;
    margin-bottom: 3rem;
}

.documents-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    margin-bottom: 1rem;
}

/* Document Filters */

.document-filters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
}

.filter-btn {
    padding: 8px 20px;
    border: 2px solid var(--grey-jrma);
    background: var(--white-jrma);
    border-radius: 24px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--orange-jrma);
    border-color: var(--orange-jrma);
    color: var(--white-jrma);
}

/* Documents Grid */

.documents-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .documents-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .documents-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Document Card */

.document-card-overview {
    background: var(--white-jrma);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.document-card-overview:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.document-card-image-link {
    display: block;
    overflow: hidden;
}

.document-card-image-link img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.document-card-overview:hover .document-card-image-link img {
    transform: scale(1.05);
}

.document-card-body {
    padding: 1.5rem;
}

.document-meta {
    margin-top: 1rem;
}

.meta-row {
    display: flex;
    gap: 0.5rem;
    font-size: 14px;
    color: var(--dark-grey-jrma);
    margin-bottom: 0.5rem;
}

.document-title {
    font-size: 1.25rem;
    margin: 0.75rem 0;
}

.document-description {
    color: var(--dark-grey-jrma);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.document-action {
    margin-top: 1rem;
}

/* Document Shop Page Layout */

.document-shop-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .document-shop-layout {
        grid-template-columns: 250px 1fr 300px;
    }
}

.document-sidebar {
    background: var(--grey-jrma);
    padding: 1.5rem;
    border-radius: 8px;
}

.sidebar-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.category-list {
    list-style: none;
}

.category-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--white-jrma);
}

.category-item:last-child {
    border-bottom: none;
}

.category-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    transition: color 0.3s ease;
}

.category-link:hover,
.category-link.active {
    color: var(--orange-jrma);
}

.category-count {
    font-size: 14px;
    color: var(--dark-grey-jrma);
}

/* Selected Documents Panel */

.selected-documents-panel {
    background: var(--white-jrma);
    border: 1px solid var(--grey-jrma);
    border-radius: 8px;
    padding: 1.5rem;
    position: sticky;
    top: 100px;
}

.panel-title {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.selected-items {
    list-style: none;
    margin-bottom: 1rem;
}

.selected-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--grey-jrma);
}

.item-remove {
    background: none;
    border: none;
    color: var(--dark-grey-jrma);
    cursor: pointer;
    font-size: 1.25rem;
}

.panel-totals {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 2px solid var(--grey-jrma);
}

.total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.total-label {
    font-weight: 600;
}

.total-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark-blue-jrma);
}

/* =========================================
   9. BLOG
   ========================================= */

.section-blog {
    padding: 4rem 0;
}

.blog-header {
    text-align: center;
    margin-bottom: 3rem;
}

.blog-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    margin-bottom: 1rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.blog-card-overview {
    background: var(--white-jrma);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card-overview:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.blog-card-image-link {
    display: block;
    overflow: hidden;
}

.blog-card-image-link img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card-overview:hover .blog-card-image-link img {
    transform: scale(1.05);
}

.blog-card-content-wrapper {
    padding: 1.5rem;
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blog-meta-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.blog-title {
    font-size: 1.25rem;
    margin: 0;
}

.blog-description {
    color: var(--dark-grey-jrma);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.blog-card-link {
    color: var(--orange-jrma);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}

.blog-card-link:hover {
    gap: 1rem;
}

.blog-filters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
}

/* =========================================
   10. FORMS & INPUTS
   ========================================= */

.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--grey-jrma);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 16px;
    transition: border-color 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--orange-jrma);
}

textarea {
    min-height: 120px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.contact-form {
    background: var(--white-jrma);
    padding: 2rem;
    border-radius: 8px;
}

.form-submit {
    background: var(--orange-jrma);
    color: var(--white-jrma);
    padding: 14px 32px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.form-submit:hover {
    background: var(--dark-blue-jrma);
}

/* =========================================
   11. FOOTER (Figma Design - Mobile Base)
   ========================================= */

.footer {
    background: linear-gradient(0deg, rgba(7, 38, 76, 0.80) 0%, rgba(7, 38, 76, 0.80) 100%), url(https://www.jrma.nl/wp-content/uploads/2025/12/JRMA_Background_WP.webp) 50% / cover no-repeat, #FFF !important;
    color: var(--white-jrma);
    padding: 64px 0 !important;
    position: relative;
}

/* Footer Main Content */

.footer-main {
    display: flex;
    flex-direction: column;
    gap: 64px;
    margin-bottom: 40px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Logo */

.footer-logo {
    display: flex;
}

.jrma-logo {
    display: inline-block;
}

.jrma-logo img {
    width: 200px;
    height: 68px;
    object-fit: contain;
}

/* Navigation */

.footer-nav {
    display: flex;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-menu li {
    display: flex;
}

.footer-menu a {
    color: var(--white-jrma) !important;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.02em;
    font-weight: 400;
    transition: opacity 0.3s ease;
    text-decoration: none;
}

.footer-menu a:hover {
    opacity: 0.7;
}

/* Social */

.footer-social {
    display: flex;
    gap: 8px;
}

.social-icon-button {
    background: transparent;
    border: 1px solid #bbdef8;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    transition: all 0.3s ease;
    color: var(--white-jrma);
    text-decoration: none;
}

.social-icon-button:hover {
    background: rgba(187, 222, 248, 0.1);
    border-color: var(--white-jrma);
}

.social-icon-button svg {
    width: 24px;
    height: 24px;
}

.social-icon-button svg path {
    fill: #fff;
}

/* Divider */

.footer-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    margin: 0 0 40px 0;
    height: 0;
}

/* Footer Bottom */

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Copyright */

.footer-copyright {
    color: var(--white-jrma);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.02em;
    font-weight: 400;
}

.mobile-only {
    display: inline;
}

/* Legal Links */

.footer-legal {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-link {
    color: var(--white-jrma) !important;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.02em;
    font-weight: 400;
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.footer-link:hover {
    opacity: 0.7;
}

/* Credits */

.footer-credits {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
}

.credits-label {
    color: var(--white-jrma);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.02em;
    font-weight: 400;
}

.credits-link {
    color: var(--white-jrma) !important;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.02em;
    font-weight: 400;
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.credits-link:hover {
    opacity: 0.7;
}

/* =========================================
   12. SINGLE POST/PAGE
   ========================================= */

.single-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.single-header {
    text-align: center;
    margin-bottom: 3rem;
}

.single-title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
}

.single-meta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--dark-grey-jrma);
    font-size: 14px;
}

.single-featured-image {
    margin-bottom: 2rem;
    border-radius: 8px;
    overflow: hidden;
}

.single-featured-image img {
    width: 100%;
    height: auto;
}

.single-content-body {
    line-height: 1.8;
}

.single-content-body h2,
.single-content-body h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.single-content-body p {
    margin-bottom: 1.5rem;
}

.single-content-body ul,
.single-content-body ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.single-content-body li {
    margin-bottom: 0.5rem;
}

.single-content-body blockquote {
    border-left: 4px solid var(--orange-jrma);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--dark-grey-jrma);
}

/* =========================================
   13. SEARCH
   ========================================= */

.search-page {
    padding: 4rem 0;
}

.search-page-header {
    margin-bottom: 2rem;
}

.search-results-count {
    color: var(--dark-grey-jrma);
    margin-bottom: 2rem;
}

.search-result {
    padding: 2rem 0;
    border-bottom: 1px solid var(--grey-jrma);
}

.search-result-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.search-result-title a {
    color: var(--black-jrma);
    transition: color 0.3s ease;
}

.search-result-title a:hover {
    color: var(--orange-jrma);
}

.search-result-excerpt {
    color: var(--dark-grey-jrma);
    line-height: 1.7;
}

/* =========================================
   14. UTILITIES & HELPERS
   ========================================= */

.hidden {
    display: none !important;
}

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

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.p-1 {
    padding: 0.5rem;
}

.p-2 {
    padding: 1rem;
}

.p-3 {
    padding: 1.5rem;
}

.p-4 {
    padding: 2rem;
}

.text-primary {
    color: var(--orange-jrma);
}

.text-secondary {
    color: var(--dark-blue-jrma);
}

.text-muted {
    color: var(--dark-grey-jrma);
}

.bg-primary {
    background: var(--orange-jrma);
}

.bg-secondary {
    background: var(--dark-blue-jrma);
}

.bg-light {
    background: var(--grey-jrma);
}

.border {
    border: 1px solid var(--grey-jrma);
}

.border-radius {
    border-radius: 8px;
}

.shadow-sm {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.loading {
    opacity: 0.5;
    pointer-events: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease;
}

.slide-up {
    animation: slideUp 0.5s ease;
}

/* =========================================
   USP CAROUSEL (Figma Style)
   ========================================= */

.section-usp-carousel {
    /* De specifieke Figma Gradient (Transparent -> Dark Blue) */
    background: linear-gradient(180deg, rgba(7, 38, 76, 0) 0%, rgba(7, 38, 76, 1) 100%);
    width: 100%;
    position: relative;
    z-index: 10;
    padding: 1rem 0;
}

/* Container */

.usp-container {
    width: 100%;
    max-width: 100%;
    padding-top: 0 1.5rem;
    /* Mobiel heeft wat minder padding nodig dan desktop */
}

/* Swiper Setup */

.usp-swiper {
    width: 100%;
    overflow: visible;
}

.usp-swiper .swiper-wrapper {
    transition-timing-function: linear;
    align-items: center;
    justify-content: space-between;
}

.usp-swiper .swiper-slide {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
}

/* Item Styling (Frame-8114419) */

.usp-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    /* Mobiel font size iets kleiner of gelijk aan desktop */
}

@media (max-width: 1023px) {
    .usp-swiper .swiper-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .usp-swiper .swiper-slide {
        align-items: flex-start;
    }

    .usp-item {
        padding: 8px 0;
        justify-content: flex-start;
    }
}

/* Icon */

.usp-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Text (.sample uit Figma) */

.usp-text {
    color: var(--white-jrma, #ffffff);
    font-family: var(--font-body, "Sora", sans-serif);
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.02em;
    font-weight: 400;
    white-space: nowrap;
}

/* =========================================
   BLOCK: INTRO (Mobile First)
   ========================================= */

.section-intro {
    position: relative;
    background: linear-gradient(0deg, rgba(7, 38, 76, 0.60) 0%, rgba(7, 38, 76, 0.60) 100%), url('https://www.jrma.nl/wp-content/uploads/2025/12/JRMA_Background_WP.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--white-jrma);
    /* Figma Mobile: 40px top/bottom, 24px side */
    padding: 2.5rem 0;
    overflow: hidden;
}

.section-intro .intro-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
}

.section-intro .intro-header-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
    /* 40px */
    width: 100%;
}

.section-intro .intro-text-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
    /* 40px */
    max-width: 100%;
}

/* --- Subtitle --- */

.section-intro .intro-subtitle-wrapper {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    /* 10px */
}

.section-intro .subtitle-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.section-intro .intro-subtitle {
    color: var(--orange-jrma);
    font-family: "Sora", sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    /* ~14px */
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* --- Lead Text (Mobile: 24px) --- */

.section-intro .intro-lead-text {
    color: var(--white-jrma);
    font-family: "Sora", sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    /* 24px */
    line-height: 1.4;
    letter-spacing: -0.02em;
    margin: 0;
    text-align: left;

}

.home .section-intro,
.parent-pageid-1079 .section-intro,
.page-id-1135 .section-intro {
    background: transparent;
    color: var(--black-jrma);
}

.home .section-intro .intro-lead-text,
.parent-pageid-1079 .intro-lead-text,
.parent-pageid-1079 .intro-description,
.page-id-1135 .intro-description,
.page-id-1135 .intro-lead-text {

    color: #07264C;
}

/* --- Button Styling (Exact op basis van je elementen) --- */

.section-intro .intro-actions {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}

/* =========================================
   BLOCK: LOGO CAROUSEL / CLIENTS
   ========================================= */

/* De losse sectie (als hij niet in de intro zit) */

.section-logos {
    padding: 2.5rem 0;
    width: 100%;
}

/* Wrapper voor spacing binnen de intro sectie */

.intro-logos-wrapper {
    margin-top: 4rem;
    /* Gap 64px van Figma */
    width: 100%;
    padding-top: 2.5rem;
    background: #F3F1EA;
    padding: 1.5rem;
}

/* Header Row (Subtitle + Icon) */

.logo-header-row {
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-subtitle-wrapper {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    /* 10px */
}

/* Subtitle tekst styling */

.logo-subtitle {
    color: var(--orange-jrma);
    font-family: "Sora", sans-serif;
    font-weight: 600;
    /* Regular in Figma */
    font-size: 0.875rem;
    /* 13.9px */
    line-height: 1;
    letter-spacing: 0.08em;
    /* 1.12px */
    text-transform: uppercase;
}

/* Swiper Styling */

.logo-swiper-container {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    /* Belangrijk voor carousel */
}

.logo-swiper {
    width: 100%;
    /* overflow: visible kan, maar let op horizontale scrollbar op body */
}

/* Logo Card (Witte Boxen uit Figma) */

.logo-card {
    background: #ffffff;
    /* Figma mobile frame padding kan variëren, maar visueel gecentreerd: */
    height: 7rem;
    /* 112px */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}

.logo-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Zorg dat het logo niet te groot wordt */
    width: auto;
    height: auto;
    /* Optioneel: grayscale start, kleur bij hover (standaard in veel designs) */
    /* filter: grayscale(100%); opacity: 0.8; */
    transition: all 0.3s ease;
}

.logo-swiper-container .swiper-wrapper {
    justify-content: center;
    display: flex;
    align-items: center;
}

/* Als je hover effecten wilt: */

/* .logo-card:hover img { filter: grayscale(0%); opacity: 1; } */

/* =========================================
   BLOCK: CONTENT LEFT/RIGHT (Split)
   ========================================= */

.section-content-lr {
    padding: 2.5rem 0;
    /* 64px mobile */
    background-color: var(--white-jrma);
    overflow: hidden;
}

.clr-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    /* Mobile gap */
}

/* --- Image Column --- */

.clr-image-col {
    width: 100%;
    height: 13.375rem;
    position: relative;
    /* Zorg dat de image niet te groot wordt op mobiel */
}

.clr-main-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* --- Content Column --- */

.clr-content-col {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    /* 40px gap tussen header en blokken */
}

/* Header (Tag + Title + Intro) */

.clr-header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.clr-tag-wrapper {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.clr-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
}

.clr-tag {
    color: #DA2E00;
    font-family: "Sora", sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    /* 13.9px */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

.clr-title {
    color: var(--dark-blue-jrma);
    font-family: "Sora", sans-serif;
    font-size: 1.75rem;
    /* 28px mobile */
    line-height: 1.2;
    margin-bottom: 0;
    margin-top: 1rem;
    font-weight: 400;
}

.clr-intro {
    color: var(--dark-blue-jrma);
    font-family: "Sora", sans-serif;
    font-size: 1rem;
    /* 16px */
    line-height: 1.5;
}

/* --- Inner Blocks (Repeater) --- */

.clr-block-content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.clr-block-text {
    margin-top: auto;
}

.clr-blocks-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Layout: Row (Bijv 'Why Choose Us') - Op mobiel onder elkaar */

.clr-blocks-wrapper.layout-row {
    flex-direction: column;
}

/* Layout: Column (Bijv 'Our Clients') */

.clr-blocks-wrapper.layout-column {
    flex-direction: column;
    gap: 2rem;
}

/* Block Item Styling */

.clr-block-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Colored Box Variant (Beige background) */

.clr-block-item.has-bg {
    background-color: #F3F1EA;
    /* Beige kleur uit Figma */
    padding: 1.5rem;
    height: auto;
}

/* Titel in Block */

.clr-block-title {
    color: var(--dark-blue-jrma);
    font-family: "Sora", sans-serif;
    font-size: 1.25rem;
    /* 20px */
    margin-bottom: 0;
    font-weight: 400;
    line-height: 1.4;
}

.layout-column .clr-block-item .clr-block-title {
    margin-bottom: 0;
}

.clr-block-text {
    color: var(--dark-blue-jrma);
    font-family: "Sora", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

/* Icon in Block (voor Clients lijst) */

.clr-block-icon img {
    width: 26px;
    height: auto;
}

.clr-block-header {
    align-items: top;
    gap: 0.625rem;
    align-self: stretch;
    display: flex;
    margin-bottom: 0.875rem;
}

.clr-block-icon {
    flex-shrink: 0;
}

/* =========================================
   BLOCK: STEPS STACK (Stacking Cards)
   ========================================= */

.section-steps-stack {
    /* Standaard background is dark-blue (via PHP style), tekst is wit */
    color: var(--white-jrma);
    padding: 4rem 0;
    position: relative;
    /* BELANGRIJK: overflow mag NIET hidden zijn, anders werkt sticky niet */
    overflow: visible;
    background: linear-gradient(0deg, rgba(7, 38, 76, 0.60) 0%, rgba(7, 38, 76, 0.60) 100%), url(https://www.jrma.nl/wp-content/uploads/2025/12/JRMA_Background_WP.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* --- Intro --- */

.stack-intro-wrapper {
    text-align: center;
    max-width: 65.75rem;
    /* ~1052px */
    margin: 0 auto 4rem auto;
    /* Margin bottom 64px */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stack-intro-title {
    color: var(--white-jrma);
    font-family: "Sora", sans-serif;
    font-size: 2rem;
    /* 32px mobile */
    line-height: 1.2;
    font-weight: 400;
}

.stack-intro-desc {
    color: var(--white-jrma);
    font-family: "Sora", sans-serif;
    font-size: 1.125rem;
    /* 18px */
    line-height: 1.5;
}

/* --- Cards Container --- */

.stack-cards-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
}

/* Wrapper voor sticky positioning - AANGEPAST VOOR MOBILE STICKY */

.stack-card-wrapper {
    position: sticky;
    /* Gewijzigd van relative naar sticky */
    top: 100px;
    /* Zorgt dat het onder de header plakt */
    width: 100%;
    padding-bottom: 4rem;
    /* Ruimte voor de volgende kaart */
}

/* Stacking Order - Zorgt dat de kaarten in de juiste volgorde over elkaar vallen */

.stack-card-wrapper:nth-child(1) {
    z-index: 1;
}

.stack-card-wrapper:nth-child(2) {
    z-index: 2;
}

.stack-card-wrapper:nth-child(3) {
    z-index: 3;
}

.stack-card-wrapper:nth-child(4) {
    z-index: 4;
}

.stack-card-wrapper:nth-child(5) {
    z-index: 5;
}

.stack-card-wrapper:nth-child(6) {
    z-index: 6;
}

body .stack-card-wrapper:last-child {
    padding-bottom: 0;
}

/* De kaart zelf */

.stack-card {
    background-color: #ffffff;
    color: var(--dark-blue-jrma);
    /* Tekst op kaart is donker */
    border: 1px solid #eeeeee;
    /* Figma Shadow */
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    padding: 1.5rem;
    flex-direction: column-reverse;
    /* Mobiel: Image onder, tekst boven? Of andersom. Figma toont Image rechts. */
    overflow: hidden;
}

/* Rotaties (Mobiel: subtiel of uit) */

.stack-card.rotate-left {
    transform: rotate(-1deg);
}

.stack-card.rotate-right {
    transform: rotate(1deg);
}

.stack-card-content {
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stack-card-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.stack-icon {
    width: 18px;
    height: 18px;
    display: flex;
}

.stack-tag {
    color: #DA2E00;
    font-family: "Sora", sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
}

.stack-title {
    font-family: "Sora", sans-serif;
    font-size: 2rem;
    /* 32px */
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: var(--dark-blue-jrma);
}

.stack-subtitle {
    font-family: "Sora", sans-serif;
    font-size: 1.25rem;
    /* 20px */
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--dark-blue-jrma);
}

.stack-desc {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--dark-blue-jrma);
}

/* Button container inside card */

.stack-action {
    margin-top: 1rem;
}

.stack-card-image {
    width: 100%;
    height: 250px;
    /* Mobiele hoogte */
    overflow: hidden;
}

.stack-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   BLOCK: CTA DOCUMENTS (Card Style)
   ========================================= */

.section-cta-documents {
    position: relative;
    /* De donkere background + gradient (dezelfde als Intro) */
    background: linear-gradient(0deg, rgba(7, 38, 76, 0.60) 0%, rgba(7, 38, 76, 0.60) 100%), url('https://www.jrma.nl/wp-content/uploads/2025/12/JRMA_Background_WP.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 4rem 0;
    /* Ruimte om de kaart heen */
}

/* De kaart container (het lichtblauwe vlak) */

.cta-doc-card {
    background-color: #DDEFFB;
    /* Lichtblauw uit Figma */
    /* Figma Mobile Padding: 48px top/bottom, 24px side */
    padding: 3rem 1.5rem;
    width: 100%;
    position: relative;
}

.cta-doc-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    /* Gap tussen tekst en knop */
}

.cta-doc-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Gap 24px */
    max-width: 100%;
}

.cta-doc-title {
    color: var(--color-trust-navy, #07264c);
    font-family: "Sora", sans-serif;
    font-size: 1.5rem;
    /* 24px */
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.02em;
    margin: 0;
}

.cta-doc-desc {
    color: var(--color-trust-navy, #07264c);
    font-family: "Sora", sans-serif;
    font-size: 1.125rem;
    /* 18px */
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
}

.cta-doc-action {
    display: flex;
    align-items: stretch;
}

/* =========================================
   BLOCK: CONTACT CTA (Avatar - Centered)
   ========================================= */

.section-contact {
    position: relative;
    /* Achtergrond: Dark Gradient + Image */
    background: linear-gradient(0deg, rgba(7, 38, 76, 0.60) 0%, rgba(7, 38, 76, 0.60) 100%), url('https://www.jrma.nl/wp-content/uploads/2025/12/JRMA_Background_WP.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* Figma Mobile Padding: 40px rondom */
    padding: 2.5rem 0rem;
    color: var(--white-jrma);
    overflow: hidden;
}

.contact-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Alles horizontaal centreren */
    justify-content: flex-start;
    /* Figma Gap: 40px tussen de content-groep en de knop */
    gap: 2.5rem;
    width: 100%;
}

/* --- Content Group (Avatar + Tekst) --- */

.contact-content-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Figma Gap: 24px tussen Avatar en Tekstblok */
    gap: 1.5rem;
    width: 100%;
    max-width: 56.5rem;
    /* ~904px voor leesbaarheid op bredere schermen */
}

/* De Avatar (Ronde foto) */

.contact-avatar-wrapper {
    /* Figma: Width/Height 112px */
    width: 112px;
    height: 112px;
    border-radius: 50%;
    /* Figma Border: 4px solid #BBDEF8 */
    border: 4px solid #BBDEF8;
    overflow: hidden;
    /* Zorgt dat de img in de cirkel blijft */
    flex-shrink: 0;
    /* Background fallback */
    background: #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tekst Container */

.contact-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Figma Gap: 24px tussen Titel en Beschrijving */
    gap: 1.5rem;
}

.contact-title {
    color: var(--white-jrma);
    font-family: "Sora", sans-serif;
    font-size: 2rem;
    /* 32px Mobile */
    line-height: 1.3;
    /* 130% */
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 0;
}

.contact-desc {
    color: var(--white-jrma);
    font-family: "Sora", sans-serif;
    font-size: 1.125rem;
    /* 18px */
    line-height: 1.5;
    /* 150% */
    font-weight: 400;
    letter-spacing: -0.02em;
}

/* Button Container */

.contact-actions {
    display: flex;
    justify-content: center;
    width: 100%;
}

body:not(.single-post) .jrma-section-wrapper section {
    background: transparent !important;
}

body:not(.single-post) .jrma-section-wrapper header {
    background: transparent !important;
}

.jrma-section-wrapper {
    color: #fff;
}

body:not(.single-post) .site-main>.jrma-section-wrapper:last-child {
    background: transparent !important;
    color: var(--black-jrma)
}

.site-main>.jrma-section-wrapper:last-child .contact-wrapper {
    background-color: #F3F1EA;
    color: var(--black-jrma);
    padding: 1.5rem;
}

.site-main>.jrma-section-wrapper:last-child .contact-wrapper .contact-title,
.site-main>.jrma-section-wrapper:last-child .contact-wrapper .contact-desc {
    color: var(--black-jrma);
}

/* =========================================
   BLOCK: INTRO (Mobile)
   ========================================= */

.intro-inner,
.intro-header-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2.5rem;
}

.intro-subtitle-wrapper {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.subtitle-icon {
    width: 18px;
    height: 18px;
    display: flex;
}

.intro-subtitle {
    color: var(--impact-orange-jrma);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.intro-lead-text {
    color: var(--white-jrma)Navy;
    font-size: 2rem;
    line-height: 1.4;
    font-weight: 400;
    margin: 0;
}

.intro-description {
    color: var(--white-jrma);
    font-size: 1.125rem;
    line-height: 1.5;
    opacity: 0.9;
    opacity: 1;
    width: 100%;
}

.intro-actions {
    margin-top: 0.5rem;
}

.intro-logos-wrapper {
    margin-top: 3rem;
}

/* Mobile: Forceer full width, negeer de inline styles van PHP */

.intro-left-col,
.intro-right-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

@media (max-width: 1023px) {

    /* Mobile: Forceer full width, negeer de inline styles van PHP */
    .intro-left-col,
    .intro-right-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100% !important;
        max-width: 100% !important;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .clr-image-col {
        width: 100% !important;
        height: 13.375rem;
        position: relative;
        /* Zorg dat de image niet te groot wordt op mobiel */
    }
}

/* =========================================
   BLOCK: WHY US (Columns)
   ========================================= */

.section-why-us {
    background-color: var(--white-jrma);
    padding: 4rem 0;
}

.why-header {
    text-align: center;
    margin-bottom: 3rem;
    /* 48px - 64px gap */
}

.why-title {
    color: var(--trust-navy-jrma);
    font-family: "Sora", sans-serif;
    font-size: 2rem;
    /* 32px Mobiel */
    line-height: 1.4;
    font-weight: 400;
}

/* Grid Container (Mobiel: Stacked) */

.why-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* 24px gap */
}

/* De Kaart */

.why-card {
    background-color: #F3F1EA;
    /* Beige uit Figma */
    padding: 1.5rem;
    /* 24px padding */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    height: auto;
}

/* Header binnen kaart (Icoon + Titel naast elkaar op mobiel? 
   Figma CSS toont 'frame-8114491' als row met gap 10px. */

.why-card-header {
    display: flex;
    align-items: center;
    align-items: flex-start;
    gap: 0.625rem;
    /* 10px */
    margin-bottom: 0.5rem;
}

.why-icon-wrapper {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    margin-top: 4px
}

.why-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.why-card-title {
    color: var(--trust-navy-jrma);
    font-family: "Sora", sans-serif;
    font-size: 1.25rem;
    /* 20px of 24px */
    line-height: 1.4;
    font-weight: 400;
    /* Regular in Figma H5 */
    margin: 0;
}

.why-card-desc {
    color: var(--trust-navy-jrma);
    font-family: "Sora", sans-serif;
    font-size: 1rem;
    /* 16px */
    line-height: 1.5;
    font-weight: 400;
}

/* =========================================
   BLOCK: NEWS (Recent Posts)
   ========================================= */

.section-news {
    padding: 4rem 0;
    background-color: var(--white-jrma);
}

.news-grid-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* Ruimte tussen kaarten op mobiel */
}

/* De Kaart Container */

.news-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Geen border of schaduw in Figma design op de wrapper, 
       maar de tekstbody heeft wel background white en padding. */
}

/* Afbeelding */

.news-card-image-link {
    display: block;
    width: 100%;
    overflow: hidden;
}

.news-card-image {
    width: 100%;
    height: 380px;
    /* Figma Fixed Height */
    object-fit: cover;
    display: block;
}

/* Content Blok (Wit blok onder foto) */

.news-card-body {
    background: #ffffff;
    color: var(--Color-Trust-Navy, #07264C);
    /* Figma padding: 32px */
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Gap tussen tekst en footer */
}

.news-card-text-group {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    /* 14px gap */
}

.news-card-title {
    margin: 0;
    font-family: "Sora", sans-serif;
    font-size: 1.5rem;
    /* 24px */
    line-height: 1.4;
    font-weight: 400;
}

.news-card-title a {
    color: var(--trust-navy-jrma);
    text-decoration: none;
    transition: color 0.2s;
}

.news-card-title a:hover {
    color: var(--impact-orange-jrma);
}

.news-card-excerpt {
    color: var(--trust-navy-jrma);
    font-family: "Sora", sans-serif;
    font-size: 1rem;
    /* 16px */
    line-height: 1.5;
    font-weight: 400;
}

/* Meta Data (Datum, Read time) */

.news-card-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* 8px gap */
    color: var(--trust-navy-jrma);
    font-family: "Sora", sans-serif;
    font-size: 0.875rem;
    /* 14px */
}

.news-separator {
    font-size: 1.125rem;
    /* 18px bullet */
}

.section-news {
    background: linear-gradient(0deg, rgba(7, 38, 76, 0.60) 0%, rgba(7, 38, 76, 0.60) 100%), url(https://www.jrma.nl/wp-content/uploads/2025/12/JRMA_Background_WP.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}

.section-news.more-posts h2 {
    font-size: 2.5rem;
    margin-bottom: 4rem;
}

.section-news.more-posts .news-card:nth-child(2)~.news-card {
    display: none;
}

.only-breadcrumbs .hero-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: unset !important;
}

.only-breadcrumbs {
    padding-bottom: 0 !important;
}

.only-breadcrumbs .hero-text-group {
    display: none !important
}

/* ... bestaande hero css ... */

/* --- HERO POST META (Datum & Leestijd) --- */

.hero-post-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centered in hero */
    gap: 0.5rem;
    color: var(--white-jrma);
    font-family: "Sora", sans-serif;
    font-size: 0.875rem;
    /* 14px */
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.meta-separator {
    font-size: 1.125rem;
    margin: 0 4px;
}

/* --- HERO SHARE BUTTONS --- */

.hero-share-buttons {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    /* 8px gap */
    align-items: center;
    justify-content: center;
    /* Centered in hero */
    margin-bottom: 2rem;
}

body .hero-share-buttons {
    margin-bottom: 0;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #eeeeee;
    /* Grey background from Figma */
    border-radius: 50%;
    /* Perfect circle */
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    padding: 0;
}

.share-btn:hover {
    transform: scale(1.1);
    background-color: var(--white-jrma);
}

.share-btn svg {
    width: 16px;
    height: 16px;
    display: block;
    /* De SVG's hebben fill="#FE4C1C" (oranje) er al in zitten, 
       dus dat wordt automatisch goed weergegeven. */
}

/* =========================================
   HERO FEATURED IMAGE (Single Post)
   ========================================= */

.hero-featured-image-wrapper {
    margin-top: 2rem;
    /* Ruimte tussen de share buttons en de foto */
    width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    /* Mooie diepte (los van achtergrond) */
    background-color: rgba(255, 255, 255, 0.1);
    /* Placeholder kleur tijdens laden */
}

.hero-featured-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* Op mobiel beperken we de hoogte iets, zodat men niet eindeloos hoeft te scrollen */
    max-height: 25rem;
    /* 400px */
}

.section-full-width-content .content-body>p:first-child {
    margin-top: 0!important;
}

.section-full-width-content .content-body>p:last-child {
    margin-bottom: 0!important;
}

.single-post .section-full-width-content .content-body {
    margin: 0 auto;
    width: 100%;
    max-width: 48rem;
}

.single-post .section-full-width-content .content-body ul {
    list-style: disc;
    list-style-position: outside;
    padding-left: 1.25rem;
}

.single-post .section-full-width-content .content-body ul+p {
    margin-top: 1rem;
}

body.single-post .hero-single-post {
    padding-bottom: 0;
}

/* Basis container instellingen */

.single-post .section-full-width-content .content-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
}

.single-post .section-full-width-content .content-body * {
    box-sizing: border-box;
}

/* ---------------------------
   Heading 2
   Matcht met design class: .heading
   Padding wrapper was: 0px 0px 16px 0px
--------------------------- */

.single-post .section-full-width-content .content-body h2 {
    color: #ffffff;
    font-family: "Sora", sans-serif;
    /* Fallback naar sans-serif als Sora faalt */
    font-size: 48px;
    line-height: 120%;
    letter-spacing: -0.02em;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 16px;
    /* Komt overeen met padding-bottom wrapper */
    width: 100%;
}

/* ---------------------------
   Heading 3
   Matcht met design class: .heading2
   Padding wrapper was: 24px 0px 24px 0px
--------------------------- */

.single-post .section-full-width-content .content-body h3 {
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -0.02em;
    font-weight: 400;
    margin-top: 24px;
    /* Komt overeen met padding-top wrapper */
    margin-bottom: 24px;
    /* Komt overeen met padding-bottom wrapper */
    width: 100%;
}

/* ---------------------------
   Heading 4
   Matcht met design class: .heading3
   Padding wrapper was: 24px 0px 20px 0px
--------------------------- */

.single-post .section-full-width-content .content-body h4 {
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: 32px;
    line-height: 130%;
    letter-spacing: -0.02em;
    font-weight: 400;
    margin-top: 24px;
    /* Komt overeen met padding-top wrapper */
    margin-bottom: 20px;
    /* Komt overeen met padding-bottom wrapper */
    width: 100%;
}

/* ---------------------------
   Standaard Tekst (Paragrafen & Divs)
   Matcht met design class: .paragraph2 (Regular)
   Padding wrapper was: 0px 0px 16px 0px
--------------------------- */

.single-post .section-full-width-content .content-body p,
.single-post .section-full-width-content .content-body div {
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.02em;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 16px;
    /* Komt overeen met padding-bottom wrapper */
    width: 100%;
}

/* Optioneel: Dikgedrukte tekst (Bold)
   Matcht met design class: .paragraph
   Als je <strong> tags gebruikt in je tekst.
*/

.single-post .section-full-width-content .content-body strong,
.single-post .section-full-width-content .content-body b {
    font-family: "Sora", sans-serif;
    font-weight: 700;
}

/* ---------------------------
   Afbeeldingen
   Matcht met design wrapper: .content4 (padding 48px)
   Matcht met image class: .placeholder-image (height 480px, cover)
--------------------------- */

.single-post .section-full-width-content .content-body img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    margin-top: 48px;
    margin-bottom: 48px;
    display: block;
}

/* Fix voor als de afbeelding in een <p> tag staat (standaard WordPress gedrag) */

.single-post .section-full-width-content .content-body p:has(img) {
    margin-bottom: 0;
    /* Margin wordt door de img zelf geregeld */
}

.section-full-width-content .content-body>p:last-child>img:last-child {
    margin-bottom: 0;
}

/* -----------------------------------------------------------
   Gravity Forms Styling - Form ID 1
   Design match: frame-2224
----------------------------------------------------------- */

/* 1. Wrapper (De witte kaart) */

#gform_wrapper_1 {
    background: #ffffff;
    padding: 64px;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 42.75rem;
}

.gform_required_legend {
    display: none;
}

/* Mobiele aanpassing voor padding */

@media (max-width: 768px) {
    #gform_wrapper_1 {
        padding: 32px;
    }
}

/* 2. Titel (Contactformulier) */

#gform_wrapper_1 .gform_heading .gform_title {
    color: #07264c;
    /* var(--color-trust-navy) */
    font-family: "Sora", sans-serif;
    font-size: 40px;
    line-height: 120%;
    font-weight: 400;
    font-size: 2rem;
    margin-bottom: 32px;
    margin-top: 0;
}

/* 3. Velden Container & Labels */

#gform_wrapper_1 .gform_fields {
    grid-row-gap: 24px;
    /* Komt overeen met gap: 24px in design */
}

#gform_wrapper_1 .gfield {
    margin-bottom: 0;
    /* Reset default GF margin */
}

/* Labels stylen */

#gform_wrapper_1 .gfield_label,
#gform_wrapper_1 .ginput_complex label {
    color: #07264c;
    font-family: "Sora", sans-serif;
    font-size: 16px;
    font-weight: 600;
    /* SemiBold */
    line-height: 150%;
    margin-bottom: 8px;
    display: block;
}

/* Sterretje (Required) styling */

#gform_wrapper_1 .gfield_required {
    color: #07264c;
    margin-left: 2px;
    margin-left: 0;
}

/* 4. Inputs & Textareas */

#gform_wrapper_1 input[type="text"],
#gform_wrapper_1 input[type="email"],
#gform_wrapper_1 input[type="tel"],
#gform_wrapper_1 textarea,
#gform_wrapper_1 select {
    border-radius: 8px;
    border: 1px solid rgba(7, 38, 76, 0.25);
    background: transparent;
    padding: 16px;
    height: 48px;
    width: 100%;
    box-sizing: border-box;
    /* Font styles */
    font-family: "Sora", sans-serif;
    font-size: 16px;
    color: #07264c;
    font-weight: 400;
    line-height: 150%;
    outline: none;
    transition: border-color 0.2s ease;
}

/* Focus state */

#gform_wrapper_1 input:focus,
#gform_wrapper_1 textarea:focus,
#gform_wrapper_1 select:focus {
    border-color: #07264c;
}

/* Textarea specifieke hoogte */

#gform_wrapper_1 textarea {
    height: 123px;
    resize: vertical;
}

/* Placeholders styling */

#gform_wrapper_1 ::placeholder {
    color: rgba(7, 38, 76, 0.25);
    opacity: 1;
}

/* 5. Select Dropdown (Custom Arrow) */

#gform_wrapper_1 select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2307264C' stroke-opacity='0.25' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 40px;
}

/* 6. Naam Velden (Complex Layout Fix) */

/* Zorg dat First en Last name netjes naast elkaar staan als er ruimte is */

#gform_wrapper_1 .ginput_complex {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

#gform_wrapper_1 .ginput_complex span {
    flex: 1;
    min-width: 45%;
    width: 100%;
    padding: 0;
}

#gform_wrapper_1 .name-field .ginput_complex {
    flex-direction: column;
}

/* Verberg sub-labels als je die niet wilt, of style ze hetzelfde als hooflabels */

#gform_wrapper_1 .ginput_complex label {
    /* Iets kleiner voor sublabels */
}

body .gform_wrapper.gravity-theme .gform_footer button {
    padding: 0 !important;
    margin: 0;
    width: 100%;
    border-radius: 0;
    display: flex;
    justify-content: space-between;
    width: fit-content;
    min-height: 3.125rem;
}

/* 7. Submit Button (De 'Split' look) */

/* Omdat GF een <input> gebruikt, simuleren we de split button look */

#gform_wrapper_1 .gform_footer {
    margin-top: 8px;
    padding: 0;
    position: relative;
    display: flex;
    justify-content: flex-start;
}

#gform_wrapper_1 input[type="submit"] {
    /* De rode knop basis */
    background-color: #e33101;
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding: 14px 24px;
    border: none;
    border-radius: 0;
    /* Design lijkt hoekig of licht afgerond? */
    cursor: pointer;
    height: 50px;
    /* Match height van icoon blok */
    display: flex;
    align-items: center;
    transition: background 0.3s ease;
    /* Zorg dat er ruimte is rechts voor het 'icoon blok' effect */
    margin-right: 0;
    margin-bottom: 0;
}

#gform_wrapper_1 input[type="submit"]:hover {
    background-color: #c42a01;
}

/* Het pijl-blokje ernaast simuleren */

/* We gebruiken ::after op de footer container omdat we niet in de input kunnen */

#gform_wrapper_1 .gform_footer::after {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    background: linear-gradient(to left, #fe4c1c, #fe4c1c), linear-gradient(to left, #ffffff, #ffffff);
    /* Pijl icoon SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 4L10.59 5.41L16.17 11H4V13H16.17L10.59 18.59L12 20L20 12L12 4Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    pointer-events: none;
    /* Klik gaat door naar formulier (werkt visueel) */
}

/* Zorg dat de input en de pijl tegen elkaar aan staan */

#gform_wrapper_1 .gform_footer {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.hero-breadcrumbs {
    margin-top: 2rem;
}

.rank-math-breadcrumb>p {
    justify-content: flex-start;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .section-content-lr.img-pos-right .clr-wrapper {
        flex-direction: column-reverse;
    }

    body.page-id-1135 .clr-image-col {
        height: auto;
    }

    .stack-cards-container {
        position: relative;
    }

    .stack-card-wrapper {
        position: relative;
        top: unset;
    }

    .stack-card-wrapper {
        padding-bottom: 0;
    }

    .stack-intro-wrapper {}

    .stack-card-image,
    .news-card-image-link {
        height: 160px
    }

    body .site .stack-card {
        transform: unset;
    }
}

@media (max-width: 768px) {
    .stack-cards-container {
        position: relative;
    }

    .stack-card-wrapper {
        position: relative;
        top: unset;
    }

    .stack-card-wrapper {
        padding-bottom: 0;
    }
}

@media (max-width: 1024px) {
    .mobile-hidden.menu-item-has-children {
        display: none;
    }

    .menu-item-has-children>a {}
}

/* ==========================================================================
   LOGO CAROUSEL - 5 VISIBLE, SEAMLESS LOOP
   ========================================================================== */

/* Logo slides equal width, fitting container */

.logo-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Logo images fit within their slide */

.logo-swiper .swiper-slide img {
    max-width: 100%;
    max-height: 60px;
    /* Adjust based on design */
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Smooth linear animation for continuous scroll */

.logo-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* Ensure no jumping during loop */

.logo-swiper {
    overflow: hidden;
}

/* ===========================================
   USP CAROUSEL - DESKTOP AUTO SCROLL
   Voeg dit toe aan je bestaande CSS1
   =========================================== */

@media (max-width: 1023px) {
    .usp-duplicate {
        display: none !important;
    }
}

/* Desktop Styles (1024px en groter) - AUTO SCROLL */

@media (min-width: 1024px) and (max-width: 1460px) {

    /* Container overflow voor infinite scroll */
    .usp-container {
        overflow: hidden;
        position: relative;
    }

    .section-usp-carousel .inner-container {
        padding: 0;
    }

    .usp-swiper {
        overflow: hidden;
    }

    /* Verberg duplicate items - NIEUW */
    /* Infinite scroll animation */
    .usp-swiper .swiper-wrapper {
        display: flex;
        width: max-content;
        animation: usp-scroll 30s linear infinite;
    }

    /* Pause on hover (optioneel - verwijder dit blok als je geen pause wilt) */
    .usp-swiper .swiper-wrapper:hover {
        animation-play-state: paused;
    }

    /* Meer ruimte tussen items op desktop */
    .usp-item {
        padding: 12px 32px;
    }

    /* Optional: Fade edges voor smooth effect */
    .usp-container::before,
    .usp-container::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100px;
        z-index: 2;
        pointer-events: none;
    }

    .usp-container::before {
        left: 0;
        background: linear-gradient(to right, rgba(7, 38, 76, 1), transparent);
    }

    .usp-container::after {
        right: 0;
        background: linear-gradient(to left, rgba(7, 38, 76, 1), transparent);
    }
}

@media (min-width: 1461px) {
    .usp-duplicate {
        display: none !important;
    }
}

/* Keyframe animation voor scroll */

@keyframes usp-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* 
 * NOTES:
 * 
 * 1. Snelheid aanpassen:
 *    Verander "30s" in de animation regel
 *    - Sneller: 20s
 *    - Langzamer: 45s
 * 
 * 2. Fade edges uitschakelen:
 *    Verwijder het ::before en ::after blok
 * 
 * 3. Pause on hover uitschakelen:
 *    Verwijder het :hover blok
 * 
 * 4. NIEUWE REGEL: .usp-duplicate { display: none; } verbergt duplicate items
 *    Duplicates zijn ALLEEN nodig buiten deze media query (op grotere schermen)
 */


/* De specifieke situaties waarin de witte paden blauw moeten worden */
.home .section-intro .path-white,
.parent-pageid-1079 .section-intro .path-white,
.parent-pageid-1079 .section-intro .path-white,
.page-id-1135 .section-intro .path-white,
.page-id-1135 .section-intro .path-white {
    fill: #07264C;
}

.single-post .jrma-section-wrapper {
    background: linear-gradient(0deg, rgba(7, 38, 76, 0.60) 0%, rgba(7, 38, 76, 0.60) 100%), url(https://www.jrma.nl/wp-content/uploads/2025/12/JRMA_Background_WP.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}

.single-post .section-full-width-content .content-body a {
    color:#fff;
    text-decoration: underline;
}

.single-post .section-full-width-content .content-body a:hover {
    text-decoration: unset;
}

body.single-post .hero-single-post {
    background: unset !important;
}