body {
            background-color: var(--color-kalk);
            color: var(--color-wit);
            overflow: hidden;           
            line-height: 1.28;
        }

		h2 { color: var(--color-wit); font-size: calc(var(--font-size-large) * 1); font-weight: normal; z-index: 2;}

        /* === LAYOUT & SNAPPY SCROLL === */
        .page-frame {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            border: var(--marge) solid var(--color-kalk);
            z-index: 100;
            pointer-events: none; 
        }

        .scroll-container {
            height: 100vh;
            width: 100vw;
            overflow-y: scroll;
            overflow-x: hidden;
            scroll-snap-type: y proximity; 
            /* scroll-padding-top: 20%; */
            /* scroll-padding-bottom: 5%; */
            scroll-behavior: smooth;
            padding: var(--marge);
        }

        section {
            position: relative;
            min-height: calc(100vh - (var(--marge) * 2));
            scroll-margin: var(--marge);
            width: 100%;
            scroll-snap-align: start;
            overflow: hidden;
            display: flex;
            flex-flow: column;
            align-items: flex-start;
            margin-bottom: var(--marge);
        }

        /* === DUAL LAYER EFFECT === */
        .dual-layer {
            position: relative;
            background: transparent;
            z-index: 1;
        }
        .dual-layer::before, .dual-layer::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            border-radius: inherit;
            pointer-events: none;
        }
        .dual-layer::before {
            background-color: var(--layer-color);
            mix-blend-mode: lighten; 
            opacity: 0.8;
            z-index: -1;
        }
        .dual-layer::after {
         
            background-color: var(--layer-color);
            mix-blend-mode: darken; 
            opacity: 0.4;
            z-index: -2;
        }

        /* === CUSTOM CURSOR (PLAY/PAUSE) === */
        @media (pointer: fine) {
            #home { cursor: none; }
        }
        .custom-cursor {
            position: fixed;
            pointer-events: none;
            width: 3.5em; height: 3.5em;
            color: var(--color-wit);
            z-index: 1000;
            transform: translate(-50%, -50%);
            display: none;
            justify-content: center; 
            align-items: center;
        }
        .custom-cursor svg {
            width: 50%; height: 50%;
            stroke: currentColor;
            stroke-width: var(--line-thickness);
            fill: none;
        }
        body.hover-home .custom-cursor { display: flex; }

        /* Pauzeer animaties status */
        body.is-paused .animate-in *, 
        body.is-paused .animate-out *,
        body.is-paused .tb-container,
        body.is-paused .tb-text,
        body.is-paused .hex {
            animation-play-state: paused !important;
        }

        /* === HEADER (ABSOLUTE POSITIONING) === */
        header {
            position: fixed;
            top: calc(var(--marge) * 2.5);
            left: calc(var(--marge) * 2);
            right: calc(var(--marge) * 2);
            height: var(--btn-height); /* Hoogte referentie voor children */
            z-index: 100;
            pointer-events: none; /* Kliks doorlaten tussen elementen */
        }
        
        header > * { pointer-events: auto; } /* Activeer kliks op de elementen zelf */

        


        .logo-container {
            position: absolute;
            left: 50%; 
            transform: translateX(-50%); 
            top: calc(var(--btn-height) * -1.5); 
            height: calc(var(--btn-height) * 5.5); 
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--logo-color);
            transition: color 0.5s ease;
        }
        
        .logo-container svg {
            width: auto;
            height: 100%;
            fill: currentColor;
            overflow: visible;
        }
        
        .logo-container .cls-2 { 
            fill: none; 
            stroke: currentColor; 
            stroke-width: 3px; 
            transition: stroke 0.4s ease;
        }






        /* === HERO SECTION (VIDEO) === */
        #home {
            position: relative;
            overflow: hidden;
        }

        .hero-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            opacity: 0;
            transition: opacity 0.05s ease-in-out; /* Binnen 50ms naadloze switch */
        }

        .hero-video.active {
            z-index: 2;
            opacity: 1;
        }

        /* === TEKSTBALLON ANIMATIES (FLEXIBELE EENHEDEN) === */
        .balloon-wrapper {
            position: absolute;
            z-index: 10;
            /* Basispositie, wordt overschreven via JS */
            top: 50%; left: 50%;
        }
        
        /* --- BALLON REVERSE ANIMATIE --- */
        .balloon-wrapper.animate-in {
            display: flex;
            animation: balloonPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        .balloon-wrapper.animate-out {
            /* Exacte reverse van de verschijn-animatie, ruim 2x zo snel */
            animation: balloonPop 0.22s ease-in reverse forwards;
        }

        /* Richtingen variabelen voor de uitwaaierende layout */
        /* sx/sy: curverichting | ox/oy: animatie oorsprong | b,l,r,t: ankerpunten box */
        .dir-bl { --sx: -1; --sy: 1;  --ox: 0%; --oy: 100%; --b: 0; --l: 0; --r: auto; --t: auto; }
        .dir-br { --sx: 1;  --sy: 1;  --ox: 100%; --oy: 100%; --b: 0; --l: auto; --r: 0; --t: auto; }
        .dir-tl { --sx: -1; --sy: -1; --ox: 0%; --oy: 0%; --t: auto; --l: 0; --r: auto; --t: 0; }
        .dir-tr { --sx: 1;  --sy: -1; --ox: 100%; --oy: 0%; --t: auto; --l: auto; --r: 0; --t: 0; }
        
        /* Schakel hexagons uit via CSS cascade als wrapper 'no-hex' klasse heeft */
        .balloon-wrapper.no-hex .hexagons {
            display: none;
        }

        .hexagons {
            position: absolute;
            top: 0; left: 0;
            width: 0; height: 0;
        }

        .hex {
            width: var(--size);
            height: calc(var(--size) * 1.1547);
            background-color: var(--color-horizon);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            position: absolute;
            opacity: 0;
            /* Centreer de hexagon exact op zijn eigen dynamische coördinaten */
            margin-left: calc(var(--size) / -2);
            margin-top: calc((var(--size) * 1.1547) / -2);
            /* Bepaal de locatie langs de curve afhankelijk van de richting */
            left: calc(var(--sx) * var(--hx));
            top: calc(var(--sy) * var(--hy));
            transform: scale(0);
        }

        .tb-container {
            --layer-color: var(--color-horizon);
            padding: calc(var(--marge) / 1) calc(var(--marge) * 1.5);
            position: absolute;
            z-index: 1000;
            top: var(--t); bottom: var(--b);
            left: var(--l); right: var(--r);
            transform-origin: var(--ox) var(--oy);
            transform: scale(0);
            opacity: 0;
            max-width: 50ch;
            width: calc(50vw - (var(--marge) * 2));
        }

        .tb-text {
            font-size: var(--font-size-ml);
            opacity: 0;
            transform: translateY(0.5em);
        }

        /* 5 Hexagons langs een kromme (curve) in plaats van een rechte lijn */
        .hex-1 { --size: 0.35em; --hx: 5.2em; --hy: 5.0em; }
        .hex-2 { --size: 0.55em; --hx: 4.7em; --hy: 3.6em; }
        .hex-3 { --size: 0.85em; --hx: 3.8em; --hy: 2.4em; }
        .hex-4 { --size: 1.25em; --hx: 2.5em; --hy: 1.5em; }
        .hex-5 { --size: 1.70em; --hx: 1.0em; --hy: 0.8em; }

        .animate-in .hex-1 { animation: popHex 0.4s ease 0.0s forwards; }
        .animate-in .hex-2 { animation: popHex 0.4s ease 0.1s forwards; }
        .animate-in .hex-3 { animation: popHex 0.4s ease 0.2s forwards; }
        .animate-in .hex-4 { animation: popHex 0.4s ease 0.3s forwards; }
        .animate-in .hex-5 { animation: popHex 0.4s ease 0.4s forwards; }
        
        .animate-in .tb-container { animation: slideBox 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards; }
        .animate-in .tb-text { animation: fadeText 0.4s ease 0.8s forwards; }

        .animate-out .tb-text { animation: fadeOut 0.2s forwards; }
        .animate-out .tb-container { animation: shrinkBox 0.3s cubic-bezier(0.7, 0, 0.84, 0) 0.1s forwards; }
        .animate-out .hex { animation: fadeOut 0.2s 0.2s forwards; }

        @keyframes popHex { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 0.9; transform: scale(1); } }
        @keyframes slideBox { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
        @keyframes fadeText { 0% { opacity: 0; transform: translateY(0.5em); } 100% { opacity: 1; transform: translateY(0); } }
        @keyframes fadeOut { to { opacity: 0; } }
        @keyframes shrinkBox { to { opacity: 0; transform: scale(0); } }

        /* === DE BOVENKAMER (SECTIE 2) === */
        #de-bovenkamer {
            justify-content: center;
            align-items: center;
            background-color: var(--color-maasgroen);
        }
        
        #de-bovenkamer .bg-overlay {
            --layer-color: var(--color-maasgroen);
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: 1;
        }

        .bg-image {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            object-fit: cover;
            z-index: 0;
        }

        #wie-we-zijn {  
            background-color: var(--color-skyline);
            position: relative;
            justify-content: center;
            align-items: center;
            color: var(--color-maasgroen);
            
            & .bg-overlay {
            --layer-color: var(--color-wit);
            background-color: var(--color-skyline);
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: 1;
            }

            & .content-right { 
                color: var(--color-donkergroen); 
            }

            & .beeldmerk{
                position: absolute;                     
                background-color: var(--color-wit);
                height: 11em;
                width: 11em;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0em;
                mask-image: url('../img/beeldmerk.svg');
                mask-size: contain;         
                mask-repeat: no-repeat;
                mask-position: center;
            }
        }

        .content-split {
            position: relative;
            width: 100%;
            z-index: 2;
            display: flex;
            max-width: 200ch;
            padding: 0 15%;
            padding-top: 11em;
            padding-bottom: 10em;
            gap: 4em;
            align-items: top;
        }

        .content-left {
            flex: 1 1 50%;
            box-sizing: border-box;
            color: var(--color-horizon);
            font-size: var(--font-size-large);
            text-align:  left;
            padding-top: 1em;
            padding-right: 2em;
        }

        .content-right {
            flex: 1 1 50%;
            box-sizing: border-box;
            color: var(--color-wit);
            font-size: var(--font-size);
            line-height: calc( var(--baseline) * 2);
        }

        .dummy-section { background-color: var(--color-skyline); display:flex; justify-content:center; }
   





/* tarieven */


        #tarieven {
            background-color: var(--color-maasgroen);
            padding-top: 10em;
            align-items: center;
            justify-content: flex-start;
            gap: var(--marge);
        }

	    .tarieven-header {width: 100%;  }
        #tarieven h2 { 
            font-size: var(--font-size);
            margin: 3em 0 0 0; 
            color: var(--color-wit);
            text-align: center; 
        }

        .pricing-grid {
            
            display: flex;
            flex-wrap: wrap; 
            justify-content: center; 
            gap: var(--marge);
            width: 100%;
            padding: 0 10%;
            box-sizing: border-box;

        }

        .pricing-card {
            flex: 0 0 calc(33.333% - var(--marge)); 
            min-width: 320px; 
            padding: 2.5em 2em;
            border-radius: var(--border-radius);
            color: var(--color-donkergroen);
            display: flex;
            flex-direction: column;
            gap: 0;
            box-sizing: border-box; 

            & h3 { 
            margin: 0; 
            margin-bottom: 0em;
            font-size: var(--font-size-ml); 
            color: var(--color-wit);  font-weight: normal; 
            
            }
            & .card-icon{
                width: 2em;
                height: 2em;
                background-color: var(--color-wit);
    
                -webkit-mask-image: url('../img/bovenkamer-beeldmerk.svg');
                mask-image: url('../img/bovenkamer-beeldmerk.svg');
               -webkit-mask-size: contain;
                mask-size: contain;         
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                -webkit-mask-position: center;
                mask-position: center;

                margin-bottom: 0.5em;
            }
                
            & .price { 	
                font-family: 'Font Book', Helvetica, Arial, sans-serif;
                font-size: var(--font-size-small) ; text-transform: uppercase; margin-top: 0.5em; 
                margin-bottom: calc(var(--baseline) * 3); 
                
            }

            &:nth-child(1) { 
                background-color: var(--color-skyline);
                color: var(--color-donkergroen);
                & .card-icon { background-color: var(--color-horizon); }
                & h3,
                & .price { color: var(--color-horizon); }

            }

                &:nth-child(2) { 
                background-color: var(--color-horizon);
                color: var(--color-donkergroen);
                & .card-icon { background-color: var(--color-wit); }
                & h3,
                & .price { color: var(--color-wit); }

            }

            &:nth-child(3) { 
                background-color: var(--color-donkergroen);
                color: var(--color-kalk);
                & .card-icon { background-color: var(--color-skyline);}
                & h3,
                & .price { color: var(--color-skyline); }

            }

        }



      
		.pricing-card:has(.options),
        .pricing-extras {
            flex: 0 0 calc(100% - var(--marge)); 
            color: var(--color-wit);
            text-align: center;
            padding-top: 0em;  
            margin-bottom: 3em;

             & .card-icon {
                display: none; /* Verberg het icoon voor de extra sectie */
             }

             & h3 { font-size: var(--font-size); line-height: calc( var(--baseline) * 2) }

             & li {
                margin-left: 0.5em;
                display: inline; list-style: none; 
                position: relative;
                padding-left: 1em; /* Maak ruimte voor het plusje */
            }

            li::before {
                content: "+";
                position: absolute;
                left: 0;
                top: -0.1em;
                font-family: 'Font Book', Helvetica, Arial, sans-serif;
                color: var(--color-horizon);
            }
        }




        /* Mobile fallback */
        @media (max-width: 900px) {
            .pricing-grid {
                grid-template-columns: 1fr; 
            }
            .pricing-extras {
                grid-column: 1 / -1; 
            }
        }



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

Referenties Carousel (Sectie 4)

=========================== */
		#referenties {
            background-color: var(--color-zeegroen);
    		padding-top: 12em;
            padding-bottom: 10em;

			& h2 {
				text-align: center;
			}
		}

		.referenties-carousel-wrapper {
			position: relative;
			width: 100%;
			margin: 0 auto;
			overflow: hidden;
			padding: 0 max(4em, 6%);
			z-index: 5;
            display: flex;
            align-items: center;
            gap: 1rem; /* Ruimte tussen de knoppen en de kaarten */
            width: 100%;
		}


        .referenties-viewport {
            overflow: hidden; /* DIT verbergt de kaarten die buiten beeld vallen */
            width: 100%;
            flex-grow: 1;
        }

		.referenties-track {
            display: flex;
            width: max-content; 
			gap: 2rem;
			transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);

		}



		.referentie-card {
			--layer-color: var(--color-horizon);
			color: var(--color-donkergroen);

            flex: 0 0 calc(28vw - 1em);
			padding: 2.5em 2em;
			border-radius: var(--border-radius);
			display: flex;
			flex-direction: column;
			gap: 0.5em;
            min-width: 0; /* Voorkomt flexbox overflow bugs */
		}

		.referentie-card h3 { 
            margin: 0;
			font-size: var(--font-size-ml); 
			color: var(--color-wit); 
            font-weight: normal; 
            margin-bottom: calc(var(--baseline) * 3);
        }

		.referentie-content {

			& img {
				max-width: 80%;
				margin: 0 auto;
				height: auto;
				min-height: 3em;
				max-height: 5em;
				aspect-ratio: keep;
		
			}

			& svg {
				/* fill: var(--color-kadeblauw); */
			}
		}

		.referentie-meta {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			font-size: var(--font-size-small); 
            color: var(--color-wit);
            text-transform: uppercase;
			gap: 0.75em;
			margin-bottom: 0; 
		}







                
            




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

Contact  (Sectie 4)

=========================== */
		#contact {

			padding-top: 8em;
            color: var(--color-wit);

            & .bg-overlay {
                --layer-color: var(--color-horizon);
                background-color: var(--color-maasgroen);
                position: absolute;
                top: 0; left: 0; width: 100%; height: 100%;
                z-index: 1;
            }

			& h2 {
				text-align: center;
			}

             & .content-left{
                flex: 1 0 50%;
                padding-right: 4em;
            }           
            & .content-right{
                transform: translateX(-4.5em); 
                flex: 1 0 50%;
            }

            .contact-details {
                & li{
                     display: flex; 
                     align-items: center; 
                     gap: 1em; 
                     margin-bottom: 1em;
                }

                & .btn{
                     align-self: flex-start;
                }
            }
		}


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

Footer

=========================== */
.page-content {
    color: var(--color-donkergroen);

    & h1{
        font-size: var(--font-size-ml);
    }
}

.footer {
    position: absolute;
    z-index: 1000;
    right: calc(var(--marge) * 1.2);
    bottom: 0.5em;
    font-size: var(--font-size-small);

    & p,
    & a {
        color: var(--color-maasgroen);
    }

}


        

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

Animaties & Transities

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




        .reveal-up {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        .reveal-up.is-revealed {
            opacity: 1;
            transform: translateY(0);
        }

        header .reveal-up { transition-delay: 0.1s; }


                /* Luxe Mouseovers voor Buttons & Links (Krimpen dan zachtjes groeien) */
        .smooth-btn, .nav-link, .carousel-thumb {
            transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
        }
        
        .smooth-btn:hover, .nav-link:hover {
            animation: luxuryPulse 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }
        
        @keyframes luxuryPulse {
            0% { transform: scale(1); }
            40% { transform: scale(0.96); } /* Subtiel krimpen */
            100% { transform: scale(1.03); } /* Subtiel groter worden */
        }

   /* carousel */
   
   .carousel-wrapper {
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: calc(100vh - (var(--marge) * 2));
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .carousel-slide {
            position: absolute; inset: 0; width: 100%; height: 100%;
            object-fit: cover; opacity: 0;
            transition: opacity 1.5s ease-in-out; /* Trage fade overgang, geen slide */
            z-index: 1;
        }
        .carousel-slide.active { opacity: 1; z-index: 2; }


        .carousel-btn {
            position: absolute; top: 50%; transform: translateY(-50%); z-index: 15;
            width: var(--btn-height); 
            height: var(--btn-height); 
            background: transparent; cursor: pointer;
            --layer-color: var(--color-horizon);
            border: none; 
            border-radius: calc(var(--btn-height) / 2);
            display: flex; justify-content: center; align-items: center;
            transition: transform 0.6s ease;
        }
        .carousel-btn:hover {
            transform: translateY(-50%) scale(1.05);
        }
        .carousel-btn svg {
            width: 50%; height: 50%;
            stroke: var(--color-wit); stroke-width: var(--line-thickness);
            fill: none;
        }
        .carousel-btn.prev { left: var(--marge); }
        .carousel-btn.next { right: var(--marge); }

        /* Thumbnails navigatie, onderaan midden, OP de foto */
        .carousel-thumbs {
            position: absolute; bottom: 1.5em; left: 50%; transform: translateX(-50%);
            display: flex; gap: 0.8em; z-index: 15;
        }
        .carousel-thumb {
            width: 70px; height: 45px; object-fit: cover; cursor: pointer;
            border-radius: 0; /* Geen decoratie/afronding */
            border: 2px solid transparent; opacity: 0.5;
        }
        .carousel-thumb.active { opacity: 1; border-color: var(--color-wit); }
        .carousel-thumb:hover { opacity: 0.8; }

        /* Tekst overlay in tarieven */
        .carousel-text-overlay {
            position: relative; z-index: 10; pointer-events: none; text-align: center;
            background: rgba(0,0,0,0.3); padding: 2em;
        }