@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

        :root {
            --bg-white: #ffffff;
            --bg-black: #050505;
            --text-black: #0a0a0a;
            --text-white: #f5f5f5;
            --vh: 1vh; 

            /* Ritme van de expertise-stapel, in eenheden van 1vh.
               De afstand van de ene kaart naar de volgende is
               kaart-hoogte + kaart-tussenruimte. */
            --kaart-hoogte: 60;
            --kaart-tussenruimte: 12;
            --kaart-uitloop: 60;

            /* De morph loopt over precies 100vh. Wat daarboven zit is de tijd
               dat de knop stil in beeld blijft voordat het werk begint.

               Let op de koppeling met .sticky-backgrounds: die laat los op
               (--morph-lengte - 110) vh na het einde van de morph. Op 110 valt
               het loslaten samen met het einde van de morph, daaronder al
               tijdens de morph, daarboven tijdens de stilstand erna. */
            --morph-lengte: 145;
        }

        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: var(--bg-white);
            color: var(--text-black);
            overflow-x: clip; 
            scroll-behavior: smooth;
        }

        /* --- SCROLLVOORTGANG BOVENAAN --- */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            z-index: 200;
            pointer-events: none;
            /* Zelfde aanpak als het logo: difference maakt de lijn zwart op de
               lichte secties en wit op de zwarte, zonder dat je per sectie
               iets hoeft te schakelen. */
            mix-blend-mode: difference;
            opacity: 1;
            transition: opacity 0.35s ease;
        }

        .scroll-progress.is-verborgen {
            opacity: 0;
        }

        .scroll-progress__bar {
            display: block;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            transform: scaleX(0);
            transform-origin: 0 50%;
            will-change: transform;
        }

        /* --- LOGO LINKSAAN --- */
        .brand-logo {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 200;
            width: 100px; 
            height: auto;
            color: white; 
            mix-blend-mode: difference;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .brand-logo__mark {
            width: 100%;
            height: auto;
            display: block;

            /* Het bestand heeft een eigen donkere vulling met een verloop.
               brightness(0) maakt de vorm eerst volledig zwart, invert(1)
               daarna volledig wit. Zo blijft mix-blend-mode: difference op de
               ouder werken: zwart op de lichte secties, wit op de zwarte.

               Wil je het merk juist in de eigen kleuren tonen, haal dan deze
               filter weg en ook de mix-blend-mode op .brand-logo hierboven.
               Houd er dan rekening mee dat het logo op de zwarte secties en
               in de footer vrijwel onzichtbaar wordt. */
            filter: brightness(0) invert(1);
        }

        /* --- HAMBURGER KNOP RECHTSBOVEN --- */
        .menu-toggle {
            position: fixed;
            top: 40px;
            right: 40px;
            z-index: 200;
            width: 40px;
            height: 40px;
            background: none;
            border: none;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 6px;
            mix-blend-mode: difference;
            color: white;
            transition: transform 0.3s ease;
        }

        .menu-toggle:hover {
            transform: scale(1.1);
        }

        .menu-line {
            width: 28px;
            height: 2px;
            background-color: currentColor;
            transition: transform 0.4s ease, opacity 0.3s ease;
        }

        .menu-toggle.active .menu-line:nth-child(1) {
            transform: translateY(4px) rotate(45deg);
        }
        .menu-toggle.active .menu-line:nth-child(2) {
            transform: translateY(-4px) rotate(-45deg);
        }

        /* --- DIAGONAAL MENU --- */
        .menu-overlay {
            position: fixed;
            inset: 0;
            z-index: 150;
            background-color: var(--bg-black);
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            transition: clip-path 0.7s cubic-bezier(0.77, 0, 0.175, 1);
        }

        .menu-overlay.open {
            clip-path: polygon(0 0, 200% 0, 0 200%, 0 0);
            pointer-events: auto;
        }

        .menu-links {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
            list-style: none;
            padding: 0;
            margin: 0;
            width: 80vw;
            max-width: 500px;
        }

        .menu-links li {
            width: 100%;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding-bottom: 16px;
            overflow: hidden;
        }

        .menu-links a {
            color: var(--text-white);
            text-decoration: none;
            font-size: clamp(1.4rem, 4vw, 2.2rem);
            font-weight: 400;
            letter-spacing: -0.5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            opacity: 0;
            filter: blur(12px);
            transform: translateY(20px);
            transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                        filter 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                        color 0.3s ease,
                        padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .menu-index {
            font-family: monospace;
            font-size: 0.8rem;
            color: #666;
            letter-spacing: 1px;
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .menu-links a:hover {
            color: #ffffff;
            padding-left: 15px;
        }

        .menu-links a:hover .menu-index {
            color: #ffffff;
            transform: translateX(-5px);
        }

        .menu-overlay.open .menu-links a {
            opacity: 1;
            filter: blur(0px);
            transform: translateY(0);
        }

        .menu-overlay.open .menu-links li:nth-child(1) a { transition-delay: 0.35s; }
        .menu-overlay.open .menu-links li:nth-child(2) a { transition-delay: 0.45s; }
        .menu-overlay.open .menu-links li:nth-child(3) a { transition-delay: 0.55s; }
        .menu-overlay.open .menu-links li:nth-child(4) a { transition-delay: 0.65s; }

        /* --- HERO SECTIE --- */
        .hero {
            isolation: isolate;
            height: calc(var(--vh, 1vh) * 100 - 40px); 
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            background-color: var(--bg-white);
            position: relative;
            z-index: 2; 
            overflow: hidden;
        }

        /* DYNAMIC MASKED IMAGE LAYER */
        .hero-bg-photo {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            pointer-events: none;

            /* De foto wordt niet meer via CSS gemaskeerd, maar als WebGL texture
               in de display-shader gebruikt. Dit element dient enkel als bron. */
            opacity: 0;
            visibility: hidden;
        }

        #fluid-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            opacity: 1;
        }

        #fluid {
            width: 100%;
            height: 100%;
            display: block;
        }

        .hero-content {
            /* geen eigen z-index: anders isoleert dit laagje de blend van de h1.
               De content staat na de canvas in de DOM en valt er dus vanzelf bovenop. */
            position: relative;
        }

        .hero-tag {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-weight: 700;
            color: #888888;
            margin-bottom: 25px;
            animation: smokeReveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .hero h1 {
            font-size: clamp(3rem, 9vw, 6rem);
            font-weight: 800;
            letter-spacing: -2px;
            line-height: 0.95;
            margin: 0 0 25px 0;
            color: #ffffff;
            mix-blend-mode: difference;
            animation: smokeReveal 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes smokeReveal {
            0% {
                opacity: 0;
                filter: blur(16px);
                transform: translateY(20px) scale(0.95);
            }
            100% {
                opacity: 1;
                filter: blur(0px);
                transform: translateY(0) scale(1);
            }
        }

        .hero p {
            font-size: clamp(1.05rem, 3vw, 1.4rem);
            color: #333333;
            max-width: 630px;
            margin: 0 auto;
            font-weight: 600;
            line-height: 1.6;
            animation: smokeReveal 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            text-shadow: 0 0 20px rgba(255,255,255,0.8);
        }

        .scroll-indicator {
            position: absolute;
            bottom: 35px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: #aaaaaa;
            z-index: 3;
        }

        .scroll-line-container {
            width: 1px;
            height: 45px;
            background: rgba(0,0,0,0.08);
            position: relative;
            overflow: hidden;
        }

        .scroll-line-pulse {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--text-black);
            animation: scrollPulse 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
        }

        @keyframes scrollPulse {
            0% { transform: translateY(-100%); }
            50% { transform: translateY(0%); }
            100% { transform: translateY(100%); }
        }

        /* --- MAIN TRACK (MORPH) --- */
        .services-track {
            position: relative;
        }

        .sticky-backgrounds {
            position: sticky;
            top: calc(var(--vh, 1vh) * -10);
            left: 0;
            width: 100%;
            height: calc(var(--vh, 1vh) * 120);
            overflow: hidden;
            z-index: 1;

            /* Zonder dit zet de browser dit element bij het vastplakken op een
               compositorlaag en bij het loslaten er weer af. Dat kost een
               volledige repaint van 120vh, in beide scrollrichtingen. Met een
               vaste laag blijft hij aan beide kanten van die grens hetzelfde. */
            will-change: transform;
            transform: translateZ(0);
        }

        .reveal-white-bg {
            position: absolute;
            inset: 0;
            background-color: var(--bg-white);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }

        .pre-cta-text {
            transform: translateY(-50px); 
            text-align: center;
            padding: 0 20px;
        }

        .pre-cta-text h2 {
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            font-weight: 800;
            letter-spacing: -1.5px;
            margin: 0 0 10px 0;
            color: var(--text-black);
            line-height: 1.1;
        }

        .pre-cta-text p {
            font-size: 1.2rem;
            color: #666;
            margin: 0;
        }

        .morph-layer {
            position: absolute;
            inset: 0;
            background-color: var(--bg-black);
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            /* Geen will-change: clip-path. Dat is geen composite-eigenschap,
               dus de promotie levert alleen een extra laag op die elk frame
               alsnog opnieuw getekend moet worden. */
        }

        .morph-btn-link {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

        .btn-text {
            color: var(--text-white);
            font-size: 1.1rem;
            font-weight: 600;
            opacity: 0; 
            white-space: nowrap;
        }

        /* --- STAPELENDE KAARTEN --- */
        .cards-scroll-container {
            position: relative;
            z-index: 3;
            margin-top: calc(var(--vh, 1vh) * -120); 
            padding-top: calc(var(--vh, 1vh) * 10); 
        }

        .card {
            position: sticky;
            height: calc(var(--vh, 1vh) * var(--kaart-hoogte)); 
            max-width: 800px;
            margin: 0 auto; 
            background-color: var(--bg-white);
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 24px;
            padding: 50px;
            color: var(--text-black);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            /* De schaduw zit op een pseudo-element. Opacity animeren gebeurt op de
               compositor, box-shadow animeren dwingt een repaint van de hele kaart. */
            box-shadow: none;
            backface-visibility: hidden;
        }

        .card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.06);
            opacity: 1;
            transition: opacity 0.4s ease;
            pointer-events: none;
            z-index: -1;
        }

        /* Geen hover op de expertise-kaarten. Tijdens het scrollen schuiven ze
           onder de cursor door, waardoor mouseenter en mouseleave herhaaldelijk
           vuren en er een box-shadow met grote blur staat te animeren. Dat is
           een repaint per keer, precies op het verkeerde moment. */

        .card-2, .card-3 { margin-top: calc(var(--vh, 1vh) * var(--kaart-tussenruimte)); }

        .card.no-shadow::before {
            opacity: 0;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            padding-bottom: 20px;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #888;
        }

        .card-content h3 {
            font-size: clamp(2rem, 4vw, 3.5rem);
            font-weight: 700;
            letter-spacing: -1px;
            margin: 0 0 20px 0;
            color: var(--text-black);
        }

        .card-content p {
            font-size: 1.1rem;
            color: #555;
            line-height: 1.6;
            max-width: 500px;
            margin: 0;
        }

        .cards-pull-up-spacer {
            height: calc(var(--vh, 1vh) * var(--kaart-uitloop));
            pointer-events: none;
        }

        #morph-trigger {
            height: calc(var(--vh, 1vh) * var(--morph-lengte));
            pointer-events: none;
            position: relative;
            z-index: 4;
        }

        /* --- CASES HORIZONTALE SCROLL --- */
        .cases-section {
            position: relative;
            /* Startwaarde. De echte hoogte wordt in JS afgestemd op hoe breed
               de track daadwerkelijk is, zie meetCases(). */
            height: calc(var(--vh, 1vh) * 300); 
            background-color: var(--bg-white);
            z-index: 5;
        }

        .cases-sticky-container {
            position: sticky;
            top: 0;
            /* Zelfde reden als bij .sticky-backgrounds: voorkomt dat de laag
               pas bij het vastplakken wordt aangemaakt. */
            will-change: transform;
            transform: translateZ(0);
            height: calc(var(--vh, 1vh) * 100);
            width: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .cases-header {
            padding: 0 20px 40px 20px;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
            box-sizing: border-box;
        }

        .cases-header h2 {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 800;
            margin: 0 0 10px 0;
            letter-spacing: -1px;
        }

        .cases-header p {
            color: #666;
            font-size: 1.1rem;
            margin: 0;
        }

        .cases-track {
            display: flex;
            gap: 30px;
            /* Linkermarge lijnt de eerste kaart uit met de kop "Uitgelicht Werk".
               JS zet --cases-start op de werkelijke marge van de kop. */
            padding-left: var(--cases-start, 20px);
            padding-right: 10vw;
            width: max-content;
            will-change: transform;
        }

        .case-card {
            position: relative;
            width: 85vw;
            max-width: 600px;
            height: calc(var(--vh, 1vh) * 55); 
            border-radius: 20px;
            overflow: hidden;
            flex-shrink: 0;
            background-color: #1a1a1a;
            contain: layout paint;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
        }

        .case-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px rgba(0,0,0,0.25);
        }

        .case-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
        }

        /* will-change alleen tijdens de hover. Permanent op elke afbeelding
           betekent net zoveel compositielagen als er cases zijn. */
        .case-card:hover .case-img {
            will-change: transform;
            transform: scale(1.08);
            filter: brightness(0.9);
        }

        .case-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60%;
            background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 30px;
            box-sizing: border-box;
            color: var(--text-white);
            transition: padding-bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .case-card:hover .case-overlay {
            padding-bottom: 38px;
        }

        .case-overlay h3 {
            font-size: clamp(1.5rem, 3vw, 2.2rem);
            font-weight: 700;
            margin: 0 0 10px 0;
            letter-spacing: -0.5px;
        }

        .case-meta {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #a3a3a3;
            display: flex;
            gap: 15px;
        }

        .case-card.cta-card {
            background-color: var(--bg-black);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .cta-content {
            padding: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            color: var(--text-white);
        }

        .cta-content h3 {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            font-weight: 800;
            margin: 0;
            letter-spacing: -1px;
        }

        .cta-content p {
            color: #a3a3a3;
            font-size: 1.1rem;
            margin: 0;
            max-width: 400px;
            line-height: 1.5;
        }

        .btn-white {
            background-color: var(--text-white);
            color: var(--text-black);
            padding: 16px 36px;
            border-radius: 40px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.1rem;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, box-shadow 0.4s ease;
            margin-top: 10px;
            display: inline-block;
        }

        .btn-white:hover {
            transform: scale(1.08) translateY(-3px);
            background-color: #ffffff;
            box-shadow: 0 15px 30px rgba(255, 255, 255, 0.25);
        }

        /* --- FOOTER --- */
        .site-footer {
            background-color: var(--bg-black);
            color: var(--text-white);
            padding: 140px 40px 40px 40px;
            position: relative;
            z-index: 5;
            box-sizing: border-box;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        /* --- CONTACTMOMENT --- */
        .contact-lead {
            max-width: 1200px;
            margin: 0 auto 120px auto;
        }

        .contact-eyebrow {
            display: flex;
            align-items: baseline;
            gap: 14px;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: #666666;
            font-weight: 700;
            margin-bottom: 40px;
        }

        .contact-eyebrow__index {
            font-family: monospace;
            letter-spacing: 0;
            color: #444444;
        }

        .contact-statement {
            font-size: clamp(2.75rem, 8.5vw, 7rem);
            font-weight: 800;
            line-height: 0.95;
            letter-spacing: -0.04em;
            margin: 0 0 60px 0;
            color: var(--text-white);
        }

        .contact-statement em {
            font-style: normal;
            color: #555555;
        }
.contact-lead p {
    margin-top: -20px;
    margin-bottom: 40px;
}
        /* Het e-mailadres is het zwaartepunt: groot, klikbaar, met een
           haarlijn die bij hover van links naar rechts dichtloopt. */
        .contact-mail {
            display: inline-flex;
            align-items: center;
            gap: 0.4em;
            position: relative;
            text-decoration: none;
            color: var(--text-white);
            font-size: clamp(1.35rem, 3.4vw, 2.75rem);
            font-weight: 600;
            letter-spacing: -0.02em;
            padding-bottom: 0.35em;
        }

        .contact-mail::before,
        .contact-mail::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
        }

        .contact-mail::before {
            background-color: rgba(255, 255, 255, 0.18);
        }

        .contact-mail::after {
            background-color: var(--text-white);
            transform: scaleX(0);
            transform-origin: 0 50%;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .contact-mail:hover::after,
        .contact-mail:focus-visible::after {
            transform: scaleX(1);
        }

        .contact-mail__arrow {
            display: inline-block;
            font-size: 0.7em;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .contact-mail:hover .contact-mail__arrow,
        .contact-mail:focus-visible .contact-mail__arrow {
            transform: translate(0.25em, -0.25em);
        }

        .contact-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 20px;
            margin-top: 45px;
            font-size: 0.8rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: #888888;
        }

        .contact-meta a {
            color: #888888;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .contact-meta a:hover {
            color: var(--text-white);
        }

        .contact-meta__sep {
            width: 28px;
            height: 1px;
            background-color: rgba(255, 255, 255, 0.18);
        }

        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            padding-top: 60px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1fr;
            gap: 40px;
        }

        .footer-brand h3 {
            font-size: 1.5rem;
            font-weight: 800;
            margin: 0 0 15px 0;
            letter-spacing: -0.5px;
        }

        .footer-brand p {
            color: #888888;
            font-size: 0.85rem;
            line-height: 1.6;
            margin: 0;
            max-width: 320px;
        }

        .footer-column h4 {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #666666;
            margin: 0 0 20px 0;
            font-weight: 700;
        }

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

        .footer-column a {
            color: #a3a3a3;
            text-decoration: none;
            font-size: 0.85rem;
            transition: color 0.3s ease, padding-left 0.3s ease;
            display: inline-block;
        }

        .footer-column a:hover {
            color: var(--text-white);
            padding-left: 6px;
        }

        .footer-bottom {
            max-width: 1200px;
            margin: 60px auto 0 auto;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.75rem;
            color: #555555;
            letter-spacing: 0.5px;
        }


        @media (max-width: 768px) {
            :root {
                --kaart-hoogte: 65;
                --kaart-tussenruimte: 9;
                --kaart-uitloop: 50;
            }

            .scroll-progress { height: 2px; }

            /* Het fluid-canvas stond hier op display:none. Dat is verwijderd:
               de engine draait nu ook op mobiel, op lagere resolutie. */
            .brand-logo {
                top: 10px;
                left: 10px;
                width: 55px;
            }
            .menu-toggle {
                top: 20px;
                right: 20px;
            }
            .card {
                padding: 30px;
                width: 90vw;
            }
            .case-card {
                width: 85vw;
            }
            .cases-header {
                padding-bottom: 20px;
            }
            .site-footer {
                padding: 90px 20px 30px 20px;
            }
            .contact-lead {
                margin-bottom: 80px;
            }
            .contact-eyebrow {
                margin-bottom: 28px;
            }
            .contact-statement {
                margin-bottom: 45px;
            }
            .contact-meta {
                gap: 12px;
                margin-top: 32px;
            }
            .contact-meta__sep {
                display: none;
            }
            .footer-container {
                padding-top: 45px;
            }
            .footer-container {
                grid-template-columns: 1fr;
                gap: 35px;
            }
            .footer-bottom {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
        }


/* --- Footer: inklapbare menu's op mobiel (Navigatie + ATS-koppelingen) --- */
.footer-acc__head{cursor:default;}
@media (max-width:768px){
  .footer-acc.acc-ready{border-bottom:1px solid rgba(255,255,255,.08);}
  .footer-acc.acc-ready>.footer-acc__head{cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin:0;padding:16px 0;}
  .footer-acc.acc-ready>.footer-acc__head::after{content:'+';font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;font-weight:400;color:rgba(255,255,255,.5);}
  .footer-acc.acc-ready.is-open>.footer-acc__head::after{content:'\2013';}
  .footer-acc.acc-ready>ul{overflow:hidden;transition:height .4s cubic-bezier(.16,1,.3,1),opacity .3s ease;}
  .footer-acc.acc-ready:not(.is-open)>ul{height:0;opacity:0;}
  .footer-acc.acc-ready.is-open>ul{padding-bottom:12px;}
}
@media (prefers-reduced-motion:reduce){.footer-acc.acc-ready>ul{transition:none;}}

/* --- Woord-onthulling voor koppen (gesplitst door js/home-text.js) --- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.09em;margin-bottom:-.09em;}
.wi{display:inline-block;will-change:transform;}