/* =========================================
   JRMA TRANSFER PRICING - DESKTOP STYLES
   Responsive Overrides for Larger Screens
   Last Updated: December 2025
   ========================================= */

/* =========================================
   TABLE OF CONTENTS
   =========================================
   1. TABLET (768px - 1023px)
   2. DESKTOP (1024px - 1279px)
   3. LARGE DESKTOP (1280px+)
   4. EXTRA LARGE (1440px+)
   5. UTILITIES (Hide on X)
   6. COMPONENT OVERRIDES
   7. PRINT
   ========================================= */

/* =========================================
   1. TABLET BREAKPOINT (768px - 1023px)
   ========================================= */

@media (min-width: 768px) {

    /* Typography */
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.25rem;
    }

    /* Hero */
    .hero-section {
        min-height: 500px;
    }

    .hero-content {
        padding: 0 1.5rem;
    }

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

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

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

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

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

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

    /* Footer */
    .footer-top {
        grid-template-columns: 2fr 1fr 1fr;
    }

    /* Forms */
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Content Blocks */
    .content-left-right {
        gap: 3rem;
    }
}

/* =========================================
   2. DESKTOP BREAKPOINT (1280px+)
   ========================================= */

@media (min-width: 1280px) {

    /* --- Typography --- */
    h1 {
        font-size: 3.5rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    /* --- Navigation (Topnav) --- */
    .topnav-mobile {
        display: none;
    }

    .topnav-desktop {
        display: block;
    }

    /* Specific Style Overrides from Updates */
    .topnav-desktop {
        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);
    }

    .inner-topnav {
        height: 100px;
    }

    .hero {
        padding-top: 100px;
    }

    .site-logo-desktop {
        height: 68px;
    }

    .nav-links {
        gap: 3rem;
    }

    .desktop-menu-items {
        gap: 2.5rem;
    }

    /* Menu Text Updates */
    .desktop-menu-items a {
        font-size: 16px;
        color: white;
        /* Force white text */
        font-weight: 400;
        letter-spacing: -0.02em;
    }

    .desktop-menu-items a:hover {}

    /* Menu Hover Effect */
    .desktop-menu-items>li {
        position: relative;
    }

    /* Submenu / Dropdown */
    .menu-item-has-children {
        position: relative;
    }

    .menu-item-has-children>a::after {
        /* Placeholder for white arrow SVG if needed */
        /* background-image: url("...white-arrow..."); */
    }

    .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background: rgba(7, 38, 76, 0.95);
        /* Dark background with opacity */
        min-width: 220px;
        padding: 1rem 0;
        opacity: 0;
        visibility: hidden;
        z-index: 1000;
    }

    .sub-menu {
        padding: 2rem;
        padding-top: 4.5rem;
        background: transparent;
        width: max-content;
        /* Zorgt dat de container zo breed wordt als de inhoud */
        white-space: nowrap;
        /* Zorgt dat de tekst in de list items niet afbreekt naar een volgende regel */
        left: -3.5rem;
    }

    .sub-menu:before {
        left: 0;
        bottom: 0;
        width: 100%;
        height: calc(100% - 3rem);
        background: rgba(7, 38, 76, 0.60);
        pointer-events: none;
        content: "";
        position: absolute;
        backdrop-filter: blur(8px);
    }

    .lang-switcher .sub-menu {
        min-width: unset;
    }

    .menu-item-has-children:hover .sub-menu {
        opacity: 1;
        visibility: visible;
    }

    .sub-menu li {
        padding: 0;
        position: relative;
        z-index: 1
    }

    .sub-menu a {
        display: block;
        padding: 0.75rem 1.5rem;
        color: var(--white-jrma);
        /* White text in dark submenu */
        transition: background 0.3s ease, color 0.3s ease;
    }

    .sub-menu a:hover {
        background: #fff;
        color: #07264C;
    }

    /* --- Buttons --- */
    .button-primary {
        background: #e33101;
    }

    .button-circle {
        background: #fe4c1c;
    }

    /* Interaction placeholders */
    .button-primary:hover .button-circle img,
    .button-white:hover .button-white-circle img,
    .button-black:hover .button-black-circle img {}

    /* --- Search Dropdown --- */
    .search-dropdown {
        max-width: 800px;
        left: 50%;
        transform: translateX(-50%);
    }

    .search-dropdown.active {
        padding: 3rem;
    }

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /* ----------------------------------------------------
   PARENT ITEMS CHEVRON
   Target: .menu-item-has-children > a
---------------------------------------------------- */
    .desktop-menu-items>.menu-item-has-children>a::after {
        content: '';
        display: block;
        width: 10px;
        height: 6px;
        flex-shrink: 0;
        /* Inline SVG Chevron (White) */
        background-image: url("data:image/svg+xml;charset=UTF-8,%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.76277L0.19774 1.25535C0.0659134 1.10379 0 0.932455 0 0.741351C0 0.530478 0.0674827 0.354201 0.202448 0.212521C0.337414 0.0708404 0.502197 0 0.696798 0C0.8914 0 1.06089 0.0757823 1.20527 0.227347L5 4.22076L8.79473 0.227347C8.93911 0.0757823 9.1086 0 9.3032 0C9.4978 0 9.66259 0.0708404 9.79755 0.212521C9.93252 0.354201 10 0.530478 10 0.741351C10 0.945634 9.93409 1.11697 9.80226 1.25535L5.52731 5.76277C5.3892 5.92092 5.21343 6 5 6Z' fill='white'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transition: transform 0.3s ease;
        margin-left: 4px;
        /* Optional: space between text and chevron */
    }

    /* Rotate Chevron on Hover */
    .desktop-menu-items>.menu-item-has-children:hover>a::after {
        transform: rotate(180deg);
    }

    /* ----------------------------------------------------
   LANGUAGE SWITCHER GLOBE
   Target: .lang-switcher > a
---------------------------------------------------- */
    .desktop-menu-items>.lang-switcher>a::before {
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        /* Inline SVG Globe (White) */
        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%3Cg clip-path='url(%23clip0_9804_1580)'%3E%3Cpath d='M14.0739 11.717C14.7602 10.5988 15.1227 9.31205 15.1208 8.00001V7.99976C15.1227 6.6877 14.7602 5.4009 14.0738 4.28269L14.0699 4.27658C13.4332 3.23872 12.5409 2.3815 11.4783 1.78682C10.4158 1.19215 9.21852 0.879888 8.00088 0.879883C6.78325 0.879878 5.58596 1.19213 4.52341 1.7868C3.46087 2.38146 2.56858 3.23868 1.9318 4.27653L1.92784 4.28271C1.24318 5.4017 0.880864 6.68803 0.880859 7.99986C0.880854 9.31168 1.24316 10.598 1.92781 11.717L1.93184 11.7233C2.56862 12.7611 3.46091 13.6183 4.52345 14.213C5.58598 14.8076 6.78326 15.1199 8.00089 15.1199C9.21851 15.1199 10.4158 14.8076 11.4783 14.2129C12.5408 13.6183 13.4331 12.7611 14.0699 11.7232L14.0739 11.717ZM8.91096 13.8996C8.77528 14.0305 8.61912 14.1384 8.44865 14.2189C8.30873 14.2854 8.15577 14.3199 8.00085 14.3199C7.84594 14.3199 7.69298 14.2854 7.55306 14.2189C7.22866 14.0532 6.95096 13.8088 6.74536 13.5081C6.32547 12.9014 6.01429 12.2262 5.82574 11.5128C6.55005 11.4682 7.27509 11.4455 8.00086 11.4447C8.72633 11.4447 9.45141 11.4674 10.1761 11.5128C10.0717 11.8796 9.94137 12.2385 9.78601 12.5868C9.58143 13.0766 9.28432 13.5223 8.91096 13.8996ZM1.69478 8.39988H4.56662C4.58532 9.20123 4.67218 9.99953 4.82626 10.7861C4.04121 10.8552 3.25817 10.9501 2.47713 11.0708C2.01977 10.2502 1.75241 9.33751 1.69478 8.39988ZM2.47712 4.92896C3.25785 5.04995 4.04117 5.14485 4.82708 5.21367C4.67269 6.00024 4.58564 6.79853 4.56688 7.59988H1.69478C1.75241 6.66225 2.01976 5.74951 2.47712 4.92896ZM7.09075 2.10015C7.22642 1.96923 7.38258 1.86138 7.55306 1.78085C7.69298 1.71437 7.84594 1.67987 8.00085 1.67987C8.15577 1.67987 8.30873 1.71437 8.44865 1.78085C8.77305 1.94655 9.05075 2.19092 9.25635 2.49162C9.67624 3.09838 9.98741 3.77354 10.176 4.48692C9.45165 4.53149 8.72662 4.5542 8.00086 4.55504C7.27539 4.55503 6.55031 4.53232 5.82561 4.48691C5.92998 4.12012 6.06034 3.76123 6.2157 3.41297C6.42028 2.92318 6.71738 2.47743 7.09075 2.10015ZM14.3069 7.59988H11.4351C11.4164 6.79853 11.3295 6.00022 11.1755 5.2136C11.9605 5.14452 12.7436 5.04964 13.5246 4.92896C13.982 5.74951 14.2493 6.66225 14.3069 7.59988ZM5.63087 10.724C5.47442 9.95858 5.38606 9.18085 5.36683 8.39988H10.635C10.6159 9.18085 10.5277 9.95858 10.3714 10.724C9.58209 10.6722 8.79191 10.6458 8.00086 10.6447C7.21038 10.6447 6.42038 10.6711 5.63087 10.724ZM10.3708 5.27579C10.5273 6.04118 10.6156 6.81891 10.6349 7.59988H5.36674C5.3858 6.81891 5.47399 6.04117 5.6303 5.27576C6.41962 5.32755 7.2098 5.35397 8.00086 5.35503C8.79134 5.35503 9.58133 5.32861 10.3708 5.27579ZM11.4348 8.39988H14.3069C14.2493 9.33751 13.9819 10.2502 13.5246 11.0708C12.7439 10.9498 11.9605 10.8549 11.1746 10.7861C11.329 9.99952 11.4161 9.20123 11.4348 8.39988ZM13.0449 4.19265C12.3623 4.29113 11.6777 4.36911 10.9909 4.42657C10.8675 3.96706 10.7084 3.51791 10.5149 3.08324C10.3382 2.68323 10.116 2.30497 9.85251 1.95599C11.1258 2.34648 12.2431 3.12929 13.0449 4.19265ZM3.53192 3.53095C4.26231 2.79987 5.16088 2.25911 6.14887 1.95608C6.13388 1.9755 6.11846 1.99405 6.10368 2.01387C5.59586 2.7449 5.22596 3.56262 5.01222 4.42669C4.32548 4.36853 3.64034 4.29051 2.95679 4.19265C3.13308 3.95914 3.32525 3.73805 3.53192 3.53095ZM2.95679 11.8071C3.63939 11.7086 4.32405 11.6306 5.01075 11.5732C5.13417 12.0327 5.29335 12.4818 5.48683 12.9165C5.66347 13.3165 5.88574 13.6948 6.1492 14.0438C4.87594 13.6533 3.75862 12.8705 2.95679 11.8071ZM12.4698 12.4688C11.7394 13.1999 10.8408 13.7406 9.85284 14.0437C9.86783 14.0243 9.88324 14.0057 9.89803 13.9859C10.4059 13.2549 10.7758 12.4371 10.9895 11.5731C11.6762 11.6312 12.3614 11.7092 13.0449 11.8071C12.8686 12.0406 12.6765 12.2617 12.4698 12.4688Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_9804_1580'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    /* --- Hero --- */
    .hero-section {
        min-height: 600px;
    }

    .hero-content {
        padding: 0 1.5rem;
    }

    .hero-actions {
        flex-wrap: nowrap;
    }

    .hero:not(.has-video) .hero-content {}

    /* --- Layout Sections --- */
    section {
        padding: 6rem 0;
    }

    /* --- Grids & Spacing --- */
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .documents-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }

    /* --- Service Cards --- */
    .service-card {
        padding: 2.5rem;
    }

    .service-icon {
        width: 80px;
        height: 80px;
    }

    /* --- Content Left/Right --- */
    .content-left-right {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }

    /* --- Document Shop Layout --- */
    .document-shop-layout {
        grid-template-columns: 250px 1fr 320px;
        gap: 3rem;
    }

    .document-sidebar {
        position: sticky;
        top: 100px;
        align-self: start;
    }

    .selected-documents-panel {
        position: sticky;
        top: 100px;
    }

    /* Document Hover Effect */
    .document-card-overview {
        position: relative;
        overflow: visible;
    }

    .document-card-overview::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 8px;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        transition: box-shadow 0.3s ease;
        pointer-events: none;
    }

    .document-card-overview:hover::before {
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    }

    /* --- Blog Masonry --- */
    .blog-grid {
        gap: 3rem;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-flow: dense;
    }

    .blog-card-overview:nth-child(3n) {
        grid-column: span 1;
    }

    /* --- Forms --- */
    .contact-form {
        padding: 3rem;
    }

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

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        padding: 14px 18px;
        font-size: 16px;
    }

    textarea {
        min-height: 150px;
    }

    /* --- FAQ --- */
    .faq-list {
        max-width: 900px;
    }

    .faq-question {
        font-size: 1.25rem;
        padding: 2rem 0;
    }

    .faq-item.active .faq-answer {
        padding-bottom: 2rem;
    }

    /* --- Single Post --- */
    .single-content {
        max-width: 900px;
        padding: 4rem 2rem;
    }

    .single-header {
        margin-bottom: 4rem;
    }

    .single-content-body {
        font-size: 1.125rem;
        line-height: 1.9;
    }

    .single-content-body h2 {
        margin-top: 3rem;
        margin-bottom: 1.5rem;
    }

    .single-content-body h3 {
        margin-top: 2.5rem;
        margin-bottom: 1.25rem;
    }

    .single-content-body blockquote {
        padding-left: 2rem;
        margin: 3rem 0;
        font-size: 1.25rem;
    }

    /* --- Gallery --- */
    .gallery-container {
        padding: 0 3rem;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 54px;
        height: 54px;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 24px;
    }

    /* --- Stats Animation --- */
    .stats-grid {
        gap: 4rem;
    }

    .stat-item {
        padding: 2rem;
    }

    .stat-item:hover .stat-number {
        transform: scale(1.1);
        transition: transform 0.3s ease;
    }

    /* --- Search Results --- */
    .search-result-item {
        padding: 1.5rem;
    }

    .result-info {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .result-type {
        min-width: 80px;
    }

    /* --- FOOTER DESKTOP --- */
    /* Container */
    .footer {
        padding: 120px 0 !important;
    }

    /* Footer Content - Horizontal Layout */
    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .footer-logo-section {
        max-width: 500px;
    }

    /* Navigation - Horizontal */
    .footer-menu {
        flex-direction: row;
        gap: 32px;
    }

    /* Hide mobile line break */
    .mobile-only {
        display: none;
    }

    /* Footer Bottom - Horizontal */
    .footer-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* Legal Links - Horizontal */
    .footer-legal {
        flex-direction: row;
        gap: 16px;
        align-items: center;
        flex: 1;
        justify-content: flex-end;
    }

    /* Copyright */
    .footer-copyright {
        white-space: nowrap;
    }

    /* Socials Spacing */
    .socials {
        padding-left: 2rem;
    }

    #gform_wrapper_1 .gform_heading .gform_title {
        font-size: 2.5rem;
    }
}

/* =========================================
   3. LARGE DESKTOP (1280px+)
   ========================================= */

@media (min-width: 1280px) {

    /* Container */
    .container {
        max-width: 1280px;
    }

    /* Typography */
    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 3rem;
    }

    /* Hero */
    .hero-section {
        min-height: 700px;
    }

    .home .hero-content {
        transform: translateY(-48px);
    }

    .hero:not(.has-video) .hero-content {
        padding-bottom: 10rem;
        justify-content: flex-start;
    }

    .page-id-1149 .hero:not(.has-video) .hero-content,
    .page-id-1079 .hero:not(.has-video) .hero-content {
        padding-bottom: 0;
    }

    .hero:not(.has-video) .hero-breadcrumbs {
        margin-top: 1.75rem;
        display: flex;
    }

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

    .hero:not(.has-video) .hero-text-group {
        margin-top: 10rem;
    }

    .page-id-1149 .hero:not(.has-video) .hero-text-group,
    .single-post .hero:not(.has-video) .hero-text-group {
        margin-top: 4rem;
    }

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

    /* Services */
    .services-grid {
        gap: 4rem;
    }

    .service-card {
        padding: 3rem;
    }

    /* Documents */
    .documents-grid {
        gap: 3rem;
    }

    .document-card-image-link img {
        height: 280px;
    }

    /* Document Shop */
    .document-shop-layout {
        grid-template-columns: 280px 1fr 360px;
        gap: 4rem;
    }

    /* Blog */
    .blog-card-image-link img {
        height: 320px;
    }

    /* Content Left/Right */
    .content-left-right {
        gap: 5rem;
    }

    /* Forms */
    .contact-form {
        padding: 4rem;
    }

    /* Stats */
    .stat-number {
        font-size: 4rem;
    }

    .stat-label {
        font-size: 1.125rem;
    }

    body:not(.page-id-1210):not(.page-id-1149):not(.page-id-1079) .hero:not(.has-video),
    body:not(.page-id-1210):not(.page-id-1149):not(.page-id-1079) .hero:not(.has-video) {
        padding-bottom: 0;
    }

    body:not(.page-id-1210) .hero:not(.has-video) .hero-text-group,
    body:not(.page-id-1210) .hero:not(.has-video) .hero-text-group {
        margin-top: 6rem
    }
}

/* =========================================
   4. EXTRA LARGE (1440px+)
   ========================================= */

@media (min-width: 1440px) {

    /* Container */
    .container {
        max-width: 1408px;
    }

    /* Hero */
    .hero-content {}

    .site-logo-link {
        max-width: 12.5rem;
    }

    body .site-logo-desktop {
        height: 4.25rem;
    }

    /* Documents Grid - 4 columns */
    .documents-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Services */
    .services-grid {
        gap: 4.5rem;
    }

    /* Typography */
    h1 {
        font-size: 4.5rem;
    }

    h2 {
        font-size: 3.5rem;
    }
}

/* =========================================
   5. UTILITIES & HELPERS
   ========================================= */

@media (min-width: 1024px) {
    .hide-desktop {
        display: none !important;
    }

    /* =========================================
       USP CAROUSEL DESKTOP (Figma Match)
       ========================================= */
    .section-usp-carousel {
        /* Figma: Height 142px + Gradient */
        display: flex;
        align-items: flex-end;
        /* Zorgt dat content onderin de gradient 'rust' of gecentreerd is, afh. van smaak */
        justify-content: center;
        padding-bottom: 2.5rem;
        position: absolute;
        bottom: 0;
        /* Visuele correctie om tekst in het donkerste deel te krijgen */
    }

    .usp-container {
        width: 100%;
        max-width: 1920px;
        /* Full width support */
        margin: 0 auto;
        /* Figma Padding: 0px 250px */
        /* Start met minder padding op kleinere desktops */
    }

    .usp-swiper {
        width: 100%;
    }

    /*
    .usp-swiper {
        width: 100%;
        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }*/
    /* Grote schermen (zoals jouw 1920px design) */
    .home .hero-content {
        transform: translateY(-48px);
    }

    @media (min-width: 1600px) {
        .usp-container {
            /* De exacte Figma padding */
        }

        body .why-grid {
            display: grid;
            /* 3 gelijke kolommen */
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            /* 24px gap */
        }
    }

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

    @media (min-width: 768px) and (max-width: 1023px) {
        .hide-tablet {
            display: none !important;
        }
    }

    /* =========================================
   7. PRINT STYLES
   ========================================= */
    @media print {

        /* Hide navigation and non-essential elements */
        .topnav-mobile,
        .topnav-desktop,
        .footer,
        .search-dropdown,
        .button-primary,
        .button-white,
        .button-black,
        .hero-actions {
            display: none !important;
        }

        /* Adjust layout for print */
        body {
            font-size: 12pt;
            line-height: 1.5;
            color: #000;
            background: #fff;
        }

        .container {
            max-width: 100%;
            padding: 0;
        }

        h1 {
            font-size: 24pt;
        }

        h2 {
            font-size: 18pt;
        }

        h3 {
            font-size: 14pt;
        }

        /* Avoid page breaks inside elements */
        .document-card-overview,
        .blog-card-overview,
        .service-card {
            page-break-inside: avoid;
        }
    }

    /* =========================================
   BLOCK: INTRO (Desktop Overrides)
   ========================================= */
    @media (min-width: 1024px) {
        .section-intro {
            /* Figma Desktop: 160px top/bottom */
            padding: 10rem 0;
        }

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

        .section-intro .intro-header-row {
            flex-direction: row;
            align-items: flex-start;
            /* Button onderaan lijnen met tekst */
            justify-content: space-between;
            gap: 4rem;
        }

        .intro-right-col {
            margin-top: auto;
        }

        .section-intro .intro-text-col {
            width: 100%;
            max-width: 63.375rem;
            /* ~1014px */
        }

        /* Typografie upgrades */
        .section-intro .intro-subtitle {
            font-size: 0.868rem;
            /* 13.9px */
        }

        .section-intro .intro-lead-text {
            /* Figma Desktop: 40px */
            font-size: 2.5rem;
            line-height: 1.4;
        }

        /* Button container positioning */
        .section-intro .intro-actions {
            width: auto;
            flex-shrink: 0;
            margin-bottom: 0.5rem;
            /* Visuele correctie baseline */
        }

        .hero.has-video {
            height: 100vh;
        }

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

    /* =========================================
   BLOCK: LOGO CAROUSEL (Desktop)
   ========================================= */
    @media (min-width: 1024px) {

        /* Als het een losse sectie is */
        .section-logos {
            padding: 5rem 0;
        }

        /* Als het in de intro sectie zit */
        .intro-logos-wrapper {
            margin-top: 7.5rem;
            /* Iets meer ruimte op desktop */
            padding-top: 2.5rem;
            padding-bottom: 2.5rem;
            background: #F3F1EA;
            padding: 2.5rem;
        }

        .logo-card {
            /* Iets meer padding op desktop indien nodig */
            padding: 2rem;
        }

        body:not(.home) .hero-title {
            font-size: 3rem;
        }
    }

    /* =========================================
   BLOCK: CONTENT LEFT/RIGHT (Desktop)
   ========================================= */
    @media (min-width: 1024px) {
        .section-content-lr {
            /* Figma: 200px top/bottom */
            padding: 12.5rem 0;
        }

        .clr-wrapper {
            flex-direction: row;
            align-items: flex-start;
            align-items: stretch;
            justify-content: space-between;
            gap: 4rem;
            /* 64px gap */
        }

        /* --- Image Positioning Logic --- */
        /* Als class .img-pos-right is, draai de volgorde om */
        .section-content-lr.img-pos-right .clr-wrapper {
            flex-direction: row-reverse;
        }

        .clr-image-col {
            flex-shrink: 0;
            height: unset;
            width: 50%;
            /* Width wordt geregeld via inline style uit PHP (custom field) */
        }

        .clr-content-col {
            flex: 1;
            /* Neemt resterende ruimte in */
            gap: 5rem;
            /* 80px gap tussen header en content blocks */
        }

        .blocks-layout-column .clr-content-col {
            gap: 3rem;
        }

        .clr-header {
            gap: 1.5rem;
            /* 40px */
        }

        /* Typography Desktop */
        .clr-title {
            font-size: 2.5rem;
            /* 40px */
        }

        .clr-intro {
            font-size: 1.25rem;
            /* 20px */
        }

        /* --- Blocks Layouts Desktop --- */
        /* Layout: Row (Naast elkaar, zoals 'Why Choose Us') */
        .clr-blocks-wrapper.layout-row {
            flex-direction: row;
            gap: 0.875rem;
            /* 14px gap */
        }

        .clr-blocks-wrapper.layout-row .clr-block-item {
            flex: 1;
            /* Evenredig verdelen */
        }

        /* Specifieke styling voor de gekleurde boxen op desktop */
        .clr-block-item.has-bg {
            padding: 1.5rem;
            /* Figma height: 320px fixed, of min-height */
            min-height: 20rem;
            justify-content: space-between;
            /* Titel bovenaan, tekst onderaan */
        }

        .clr-block-item.has-bg .clr-block-title {
            font-size: 1.5rem;
            /* 24px */
            /* Push naar beneden als flex-direction column is */
            /* Figma doet dit andersom: Titel boven, tekst onder. 
           Pas aan indien nodig op basis van specifieke content. */
        }

        /* Layout: Column (Onder elkaar, zoals 'Our Clients') */
        .clr-blocks-wrapper.layout-column {
            flex-direction: column;
            gap: 3rem;
            /* Ruimte tussen rows */
        }

        /* In column layout willen we icon + tekst vaak als row */
        .layout-column .clr-block-item {
            flex-direction: column;
            gap: 0.875rem;
        }

        /* Als er een icon is, zet die naast de titel */
        .layout-column .clr-block-item .clr-block-icon {}

        .layout-column .clr-block-item .clr-block-text {
            font-size: 1.25rem;
        }

        .layout-column .clr-block-item .clr-block-title {
            font-size: 1.5rem;
        }

        .layout-column .clr-block-item.title-only .clr-block-title {
            font-size: 1.25rem;
        }
    }

    /* =========================================
   BLOCK: STEPS STACK (Desktop Sticky)
   ========================================= */
    @media (min-width: 1024px) {
        .section-steps-stack {
            padding: 8rem 0 12rem 0;
            /* Extra ruimte onderaan voor scrollen */
        }

        .stack-intro-title {
            font-size: 4rem;
            /* 64px */
        }

        .stack-intro-desc {
            font-size: 1.25rem;
            /* 20px */
        }

        /* --- STICKY LOGIC --- */
        .stack-cards-container {
            /* Geen gap nodig hier, we gebruiken margin-bottom op de cards voor spacing tijdens scroll */
            gap: 0;
            max-width: 75rem;
            /* ~1200px breedte voor de kaarten */
            margin: 0 auto;
        }

        .stack-card-wrapper {
            /* Dit is de magic: Sticky positioning */
            position: sticky;
            /* Top offset: Zorg dat dit onder je header valt. Bijv 120px */
            top: 8rem;
            /* Zorg voor padding-bottom zodat de volgende kaart er niet direct strak opklapt visueel */
            padding-bottom: 10rem;
        }

        .stack-intro-wrapper {
            margin: 0 auto 10rem auto;
        }

        /* Figma Layout: Row (Content Left, Image Right) */
        .stack-card {
            flex-direction: row;
            align-items: center;
            /* Hoogte instellen of min-height zodat ze even groot lijken */
            min-height: 33.75rem;
            height: 33.75rem;
            padding: 1.5rem;
            padding-left: unset;
            /* ~540px */
        }

        .stack-card-content {
            flex: 1;
            padding: 4rem;
            /* Ruime padding desktop */
            align-self: stretch;
            justify-content: center;
        }

        .stack-card-image {
            flex: 0 0 50%;
            /* 50% breedte */
            height: 100%;
            /* Vul hoogte van kaart */
            align-self: stretch;
            position: relative;
        }

        .stack-card-image img {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }

        /* Fonts Desktop */
        .stack-title {
            font-size: 3rem;
            /* 48px */
        }

        .stack-subtitle {
            font-size: 1.5rem;
            /* 24px */
        }

        /* Sticky Stacking Volgorde (Optioneel, meestal regelt DOM order dit al) */
        .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;
        }
    }

    /* =========================================
   BLOCK: CTA DOCUMENTS (Desktop)
   ========================================= */
    @media (min-width: 1024px) {
        .section-cta-documents {
            /* Iets meer ademruimte boven/onder de kaart */
            padding: 10rem 0;
        }

        .cta-doc-card {
            /* Figma Desktop Padding: 48px (3rem) rondom */
            padding: 3rem;
        }

        .cta-doc-wrapper {
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            gap: 4rem;
        }

        .cta-doc-content {
            width: 100%;
            max-width: 56.5rem;
            /* ~904px max width voor tekst */
        }

        /* Typografie blijft hetzelfde (24px / 18px) */
        .cta-doc-action {
            flex-shrink: 0;
            /* Padding correctie om optisch te lijnen met tekst, indien nodig */
            padding-top: 0.5rem;
        }
    }

    /* =========================================
   BLOCK: CONTACT CTA (Desktop Centered)
   ========================================= */
    @media (min-width: 1024px) {
        .section-contact {
            /* Figma Desktop Padding: Lijkt ruimer, bijvoorbeeld 100px of 160px */
            padding: 7.5rem 0;
        }

        /* We behouden de flex-direction: column omdat het design dat vraagt */
        .contact-wrapper {
            /* Misschien gap vergroten op desktop? Figma toont 40px in de mobile snippet, 
           maar vaak is er meer ruimte op desktop. Ik houd 2.5rem aan tenzij anders gewenst. */
            gap: 2.5rem;
        }

        .site-main>.jrma-section-wrapper:last-child .contact-wrapper {
            padding: 3.5rem;

        }

        .contact-content-group {
            /* Figma Desktop gap tussen avatar en tekst: 40px? */
            gap: 2.5rem;
        }

        /* Typografie Upgrades */
        .contact-title {
            /* Figma Desktop: 40px */
            font-size: 2.5rem;
            line-height: 1.2;
            /* 120% */
        }

        .contact-desc {
            /* Blijft 18px */
            max-width: 904px;
            /* Zorgt dat de tekst niet te breed uitloopt */
        }
    }

    /* =========================================
   BLOCK: INTRO (Desktop Dynamic Split)
   ========================================= */
    @media (min-width: 1024px) {
        .section-intro {
            padding: 10rem 0 6.25rem 0;
        }

        .intro-header-row {
            flex-direction: row;
            align-items: flex-end;
            justify-content: space-between;
            gap: 4rem;
        }

        .intro-left-col {
            /* Gebruik var uit PHP style="", fallback naar 547px */
            max-width: var(--mw-left, 547px);
            flex-shrink: 0;
            gap: 2.5rem;
        }

        .intro-right-col {
            /* Gebruik var uit PHP style="", fallback naar 700px */
            max-width: var(--mw-right, 700px);
            flex-shrink: 0;
            align-items: flex-start;
            text-align: left;
        }

        .intro-lead-text {
            font-size: 2.5rem;
            /* 40px */
            line-height: 1.4;
        }

        .intro-description {
            font-size: 1.25rem;
            /* 20px */
            line-height: 1.5;
        }
    }

    /* =========================================
   BLOCK: WHY US (Desktop Grid)
   ========================================= */
    @media (min-width: 1024px) {
        .section-why-us {
            padding: 10rem 0;
            /* Ruimere padding */
        }

        .why-title {
            font-size: 2.5rem;
            /* 40px */
        }

        .why-header {
            margin-bottom: 4rem;
            /* 64px gap */
        }

        .why-grid {
            display: grid;
            /* 3 gelijke kolommen */
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            /* 24px gap */
        }

        .why-card {
            /* Figma: Height 240px fixed? Of min-height?
           Min-height is veiliger voor als tekst langer wordt. */
            min-height: 15rem;
            /* Flex layout om content te verdelen (header boven, tekst eronder) */
            justify-content: space-between;
            padding: 1.5rem;
        }

        .why-card-title {
            font-size: 1.5rem;
            /* 24px */
        }

        .why-card-desc {
            min-height: 48px;
        }
    }

    @media (min-width: 1280px) {
        .hero {
            padding-top: 100px;
        }

        body:not(.home) .thank-you .hero-title {
            font-size: 4rem;
            line-height: 120%;
            /* 4.8rem */
        }
    }

    /* =========================================
   BLOCK: NEWS (Desktop Grid)
   ========================================= */
    @media (min-width: 1024px) {
        .section-news {
            padding: 6rem 0;
        }

        .news-grid-wrapper {
            display: grid;
            /* 2 Gelijke kolommen zoals in Figma (688.5px elk) */
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            /* 31px gap uit Figma ~ 2rem */
        }

        .news-card {
            /* Zorg dat kaarten even hoog zijn */
            height: 100%;
        }

        .news-card-body {
            /* Content vult de rest van de ruimte onder de foto */
            flex: 1;
            justify-content: space-between;
            /* Duwt footer naar beneden als tekst kort is */
        }

        /* Footer op desktop horizontaal of verticaal? 
       In Figma "frame-8114496" lijkt alles onder elkaar te staan. */
        .news-card-footer {
            flex-direction: column;
            gap: 1.5rem;
        }
    }

    @media (min-width: 1024px) {

        /* =========================================
       HERO SINGLE POST UPDATES (Desktop)
       ========================================= */
        /* Meta Data (Datum & Leestijd) */
        .hero-post-meta {
            font-size: 1rem;
            /* Iets groter dan mobiel (16px) */
            gap: 1rem;
            /* Meer ruimte tussen elementen */
            margin-top: 1.5rem;
            margin-bottom: 2rem;
        }

        .meta-separator {
            font-size: 1.25rem;
            margin: 0 8px;
        }

        /* Share Buttons */
        .hero-share-buttons {
            gap: 0.75rem;
            /* Iets meer tussenruimte */
            margin-bottom: 3rem;
            /* Meer ruimte tot de beschrijving/image */
        }

        .share-btn {
            width: 40px;
            /* Grotere touch targets op desktop */
            height: 40px;
        }

        .share-btn svg {
            width: 20px;
            /* Iconen schalen mee */
            height: 20px;
        }

        /* Featured Image (Los onderaan) */
        .hero-featured-image-wrapper {
            margin-top: 3rem;
            /* Ruime marge boven de foto */
            width: 55.125rem;
            margin-left: auto;
            /* Centreren */
            margin-right: auto;
        }

        .hero-featured-image {
            max-height: 30.75rem;
            /* Max hoogte ~640px om de vouw te bewaken */
        }

        .single-post .hero:not(.has-video) .hero-content {
            padding-bottom: 0;
        }
    }