@charset "utf-8";

/* Voorkom dat de hele pagina kan 'wiebelen' naar rechts */
/* DAT: rgb(154, 140, 110), rgb(84,73,53),#9a8c6e */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
* { margin: 0; 
	padding: 0; 
	box-sizing: border-box; 
	font-family: sans-serif;
	color: rgb(84,73,53); /*LOGOKLEUR)*/
}

html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}

/* Fallback voor oudere browsers die bovenstaande niet ondersteunen */
@supports not (scrollbar-gutter: stable) {
    html {
        overflow-y: scroll;
    }
}

/*HOOFDMENU*/
.page-container{
	padding-bottom: 0px;
}
.info-section{
	padding-top: 20px;
}

/*NAVBAR*/
.page-container, 
.navbar {
    padding-left: clamp(20px, calc(15.4vw - 61.5px), 160px);
    padding-right: clamp(20px, calc(15.4vw - 61.5px), 160px);
	z-index: 10000;
}
/* Centraal berekende padding voor de hele site */
/* Gebruik calc binnen clamp om syntax fouten te voorkomen */

.navbar {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 90px;
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    z-index: 9999;
	background-color: #ffffff ; 
	border-bottom: 1px solid #F3F3F3; /* toegevoeg NH*/
	transition: height 0.5s ease-in-out, box-shadow 0.4s ease, background-color 0.4s ease-in-out;
}
/* toegevoeg NH*/
.navbar.scrolled {
    background-color: #ffffff !important; /* Blijft wit, of kies een andere kleur */
    /* ... rest van je scrolled code ... */
}/* toegevoeg NH*/


/*15-1-2026 17:20*/


/* --- LOGO BASIS --- */
.logo-link { 
    text-decoration: none; 
    color: inherit; 
    z-index: 10001; 
}
.logo { 
    display: flex; 
    align-items: baseline; /* Hou alles strak op de onderste regel */
    gap: 0.25em; 
    font-weight: 600; 
    font-family: 'Tahoma', sans-serif;
    font-size: 2.2rem; 
    letter-spacing: -0.05em; 
    transition: all 0.5s ease; 
}
/* --- DE KLEINE WOORDEN (& en CO) --- */
.logo-small { 
    font-weight: 400; 
    font-size: 0.75em;
    font-family: 'Tahoma', sans-serif;
    display: inline-flex;
    align-items: baseline; /* Lijn uit op de tekstlijn van PP */
}
/* --- DE '&' MET 'ARCHITECT' ERONDER --- */
.stack-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    vertical-align: baseline; 
}
.stack-container .first-letter {
    font-size: 1.0em;
    line-height: 1;
    display: inline-block;
}
/* --- 1. ARCHITECT: GEZAMENLIJKE BASIS (Fixeert de look) --- */
.sub-text, 
.static-architect {
    font-family: 'Tahoma', sans-serif !important;
    font-size: 13px !important;      /* EXACT GELIJK OP ALLE APPARATEN */
    font-weight: 600 !important;     /* EXACT GELIJK OP ALLE APPARATEN */
    text-transform: uppercase;
    line-height: 1;                  /* Voorkomt dansen in de hoogte */
    letter-spacing: 0.05em;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
/* --- 2. DESKTOP RUSTSTAND (Onder de &) --- */
.stack-container .sub-text {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    opacity: 1;
    visibility: visible;
    display: block;
}
/* De versie achter CO verbergen in ruststand */
.static-architect {
    display: none !important;
    opacity: 0;
    visibility: hidden;
}
/* --- 3. DESKTOP SCROLLSTAND (Achter de CO) --- */
.navbar.scrolled .stack-container .sub-text {
    display: none !important;
    opacity: 0;
    visibility: hidden;
}
.navbar.scrolled .static-architect {
    display: inline-block !important;
    opacity: 1;
    visibility: visible;
    position: relative;
    /* Gecorrigeerde marge: compenseert het naar links schuiven van de 'CO' */
    margin-left: 10px; 
    transform: translateY(0px); 
    white-space: nowrap;
}

/*cookies*/
.cookie-alert {
    position: fixed;
    bottom: 13px;
    left: 20px;
    right: 20px;
    background: rgba(240,236,228,0.90);
    color: #333;
    padding: 15px 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border-radius: 8px;
    border-left: 5px solid #e67e22; /* DAT: rgb(154, 140, 110), rgb(84,73,53),#9a8c6e */
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    transform: translateY(150%);
    transition: transform 0.4s ease-out;
    font-family: sans-serif;
}
.cookie-alert.show {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.cookie-alert p { margin: 0; font-size: 14px; }
.cookie-alert a { color: rgb(84,73,53); text-decoration: underline; }

#close-info {
    background: rgb(84,73,53);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 15px;
}

#close-info:hover { background: #e67e22; }


/* --- 4. MOBIEL & TABLET (Altijd achter de CO) --- */
@media (max-width: 992px) {
    .stack-container .sub-text {
        display: none !important;
    }
    .static-architect {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-left: 10px; /* Standaard marge op mobiel */
        position: relative;
        transform: translateY(0px);
        white-space: nowrap;
    }
    .logo {
        gap: 0 !important; /* Fixeert de horizontale positie op mobiel */
    }
    .logo .word {
        margin-right: 6px; /* Vaste tussenruimte in plaats van variabele gap */
    }
}
/* --- 5. DE 'CO' BASISLIJN --- */
.co-tekst {
    margin-left: 0.1em; 
    display: inline-flex;
    align-items: baseline; /* Houdt letters op de tekstlijn van PP */
}
.co-tekst .first-letter {
    font-size: 1.0em;
    line-height: 1;
}
/* --- SCROLL ANIMATIE --- */
.navbar.scrolled .logo {  
    gap: 0.1em; /* Letters schuiven naar elkaar bij scroll */
}
.navbar.scrolled .fade-out { 
    opacity: 0; 
    transform: translateY(10px); 
    width: 0; 
    pointer-events: none;
}
/* De letters die verdwijnen */
.fade-out { 
    display: inline-block; 
    opacity: 1; 
    transition: opacity 0.5s ease, transform 0.5s ease, width 0.6s ease;
}
/* Effect bij scrollen */
.navbar.scrolled .fade-out { 
    opacity: 0; 
    transform: translateY(20px); /* Vallen omlaag in de uitgerekte balk */
    width: 0; /* Zorgt dat K en E naar S kunnen schuiven */
    pointer-events: none;
}
.navbar.scrolled .logo {  /* S K E schuiven tegen elkaar */
	gap: 0; 
} 






/* KEUZEMENU RECHTS (Desktop) */
.nav-links { 
	display: flex; 
	list-style: none; 
	gap: 30px; }
.nav-links a { 
    text-decoration: none; 
	color: #333; 
	position: relative;    /* tekst, kleur*/
    padding: 5px 0; 
	font-weight: 500; 
}
/* Rechts naar links onderlijning */
.nav-links a::after {
    content: ""; 
	position: absolute; 
	bottom: 0; 
	right: 0;
    width: 0%; 
	height: 2px; 
	background-color: #333; 
	transition: width 0.4s ease;
}
.nav-links a:hover::after { 
	width: 100%; 
}
/* MOBIEL MENU & ICON */
.menu-icon { 
	display: none; 
	width: 30px; 
	height: 22px; 
	position: relative; 
	cursor: pointer; 
	z-index: 10001; 
}
.line { 
	display: block; 
	position: absolute; 
	height: 3px; 
	width: 100%; 
	background: #333; 
	border-radius: 3px; 
	transition: 0.3s; }
.line1 { 
	top: 0; 
} 
.line2 { 
	top: 9px; 
} 
.line3 { 
	top: 18px; 
}

/* Transformeren naar Kruis */
.menu-icon.open .line1 { 
	transform: translateY(9px) rotate(45deg); 
}
.menu-icon.open .line2 { 
	opacity: 0; 
}
.menu-icon.open .line3 { 
	transform: translateY(-9px) rotate(-45deg); 
}






/* TWEE HORIZONTAAL EN VERTICAAL UITGELIJNDE KOLOMMEN*/
/* De titel over de volle breedte, beperkt tot kolombreedte op desktop */
.section-title{
    font-size: 1.25rem;
    margin-bottom: 30px;
}
.matrix-title{
	font-size: 2.0rem;
}


/* De container die de kolommen vasthoudt */
.hero-content, .expertise-content {
    display: flex;
    flex-wrap: wrap;
    
}
.hero-image-container{
    flex: 1; /* Beide kolommen nemen 50% in (minus de gap) */
    min-width: 300px; /* Voor mobiele responsiviteit */
}
 
.hero-text {
    /* Beide kolommen nemen 50% in (minus de gap) */
    min-width: 300px; /* Voor mobiele responsiviteit */
}
/* De H2 boven de expertise-kolommen */
.section-title {
    /* Door deze 50% breedte te geven (minus de helft van de gap), 
       lijnt hij precies uit met de linker kolom */
    width: calc(50% - 20px); 
    margin-bottom: 20px;
    font-size: 1.25rem;
}
.matrix-title {
    /* Door deze 50% breedte te geven (minus de helft van de gap), 
       lijnt hij precies uit met de linker kolom */
    width: calc(50% - 20px); 
    margin-bottom: 0px;
    font-size: 2.0rem;
}
@media (max-width: 1100px) {
    .section-title, .matrix-title {
        width: 100%; /* Op mobiel de volle breedte */
    }
}
/* Forceer de 55% verhouding voor de expertise kolom, gelijk aan de image boven */
.col-55 {
    flex: 0 0 55% !important;
    max-width: 55%;
}
		.col-50 {
			flex: 0 0 50% !important;
			max-width: 45%;
		}
.col-45 {
    flex: 1; /* Neemt de rest in beslag */
}

/* Zorg dat de H2 boven de kolommen ook stopt bij de 55% lijn */
.section-title {
    max-width: 55%;
    margin-bottom: 30px;
    font-size: 2.0rem;
    line-height: 1.2;
}
/* Mobiel herstel: alles naar 100% breedte */
@media (max-width: 1100px) {
    .col-55, .col-45, .col-50, .section-title, .matrix-title {
        flex: 0 0 100% !important;
        max-width: 100%;
    }
}












/**/
/* --- STRETCH FIX: AFBEELDING EN TEKST UITLIJNEN  --- */

.force-stretch {
    display: flex !important;
    align-items: stretch !important; /* Maakt beide kolommen even hoog */
    gap: 80px; 
    width: 100% !important;
    position: relative;
    margin: 0 !important;
}

/* Linker kolom: Tekst bepaalt de hoogte */
.force-stretch .col-55 {
    flex: 0 0 55% !important;
    max-width: 55% !important;
    display: flex !important;
    flex-direction: column !important;
}
		/* Linker kolom: Tekst bepaalt de hoogte */
		.force-stretch .col-45 {
			flex: 0 0 45% !important;
			max-width: 45% !important;
			display: flex !important;
			flex-direction: column !important;
		}
		.force-stretch .col-50 {
			flex: 0 0 50% !important;
			max-width: 50% !important;
			display: flex !important;
			flex-direction: column !important;
		}

/* Rechter kolom: Het anker voor de absolute foto */
.img-anchor-45 {
    flex: 0 0 45% !important;
    max-width: 45% !important;
    position: relative !important; /* Cruciaal: houdt de foto binnen deze kolom */
    display: block !important;
}
/* Rechter kolom: Het anker voor de absolute foto */
		.img-anchor-55 {
			flex: 0 0 55% !important;
			max-width: 55% !important;
			position: relative !important; /* Cruciaal: houdt de foto binnen deze kolom */
			display: block !important;
		}
/* De Picture-tag: vult de volledige kolom van boven tot aan de button-lijn */
.absolute-picture {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* De Image: negeert de 3/2 verhouding en snijdt bij via 'cover' */
.stretch-final {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Vult de ruimte zonder vervorming */
    border-radius: 12px;
    display: block !important;
    aspect-ratio: auto !important; /* Verwijdert de blokkade uit je eerdere CSS */
    transition: transform 0.8s ease;
}

.stretch-final:hover {
    transform: scale(1.05);
}

/* De Button: lijnt de onderkant van de foto uit */
.force-stretch .cta-button {
    margin-top: auto !important;
    align-self: flex-start;
}

/* Mobiele Reset (Conform Deel 12/13) */
@media (max-width: 1100px) {
    .force-stretch {
        flex-direction: column !important;
    }
    .img-anchor {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        height: 400px !important; /* Vaste hoogte op mobiel */
        margin-top: 30px;
    }
    .absolute-picture {
        position: relative !important;
        height: 100% !important;
    }
}
/* --- ELIMINEER RECHTER UITBRAAK --- */

.expertise-section {
    overflow: hidden; /* Veiligheidsmaatregel: kapt alles af wat buiten de sectie valt */
}

.force-stretch {
    /* Zorg dat de container nooit breder wordt dan de page-container padding */
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

.img-anchor-45{
    /* Dwing de kolom om de 45% breedte NIET te overschrijden */
    flex: 0 0 45% !important;
    max-width: 45% !important;
    width: 45% !important;
    position: relative !important;
}
		.img-anchor-55 {
			/* Dwing de kolom om de 45% breedte NIET te overschrijden */
			flex: 0 0 55% !important;
			max-width: 55% !important;
			width: 55% !important;
			position: relative !important;
		}

.absolute-picture {
    /* De foto mag alleen binnen de 45% van de img-anchor opereren */
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.stretch-final {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important; /* Voorkomt dat de img breder wordt dan de picture-tag */
    object-fit: cover !important;
}
/* --- TABLET FIX: VOORKOM TE BREDE TEKST ONDER 1100PX --- */

@media (max-width: 1100px) {
    .force-stretch .col-55 {
        /* Houd de tekst leesbaar door een max-breedte aan te houden op tablet */
        width: 100% !important;
        max-width: 800px !important; /* Voorkomt te lange regels */
        margin-bottom: 40px;
    }
			.force-stretch .col-45 {
				/* Houd de tekst leesbaar door een max-breedte aan te houden op tablet */
				width: 100% !important;
				max-width: 800px !important; /* Voorkomt te lange regels */
				margin-bottom: 40px;
			}
			.force-stretch .col-50 {
				/* Houd de tekst leesbaar door een max-breedte aan te houden op tablet */
				width: 100% !important;
				max-width: 800px !important; /* Voorkomt te lange regels */
				margin-bottom: 40px;
			}
    
    /* Zorg dat de foto (die nu onder de tekst staat) een mooie verhouding krijgt */
    .img-anchor {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 500px !important; /* Vaste hoogte voor tablet-view */
    }

    .absolute-picture {
        position: relative !important; /* Terug naar normale flow voor kolom-layout */
        height: 100% !important;
    }
}

/* Pas bij echte kleine schermen (mobiel) de breedte weer volledig aan */
@media (max-width: 600px) {
    .force-stretch .col-55 {
        max-width: 100% !important;
    }
			  .force-stretch .col-45 {
				max-width: 100% !important;
			}
			  .force-stretch .col-50 {
				max-width: 100% !important;
			}
    .img-anchor {
        height: 350px !important;
    }
}

/* ============================================================
   FINALE EXPERTISE LOGICA - 6-2-2026 (VOLLEDIGE VERSIE)
   ============================================================ */

/* 1. Desktop Layout & Ontkoppeling onderzijde */
.expertise-content.force-stretch {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important; 
    gap: 80px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Container voor de afbeeldingen (Anker) */
.img-anchor-45, .img-anchor-55 {
    container-type: inline-size; 
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px; 
    flex-shrink: 0 !important;
    min-width: 0;
}

/* Specifieke breedtes conform HTML */
.img-anchor-45 { flex: 0 0 45% !important; max-width: 45% !important; }
.img-anchor-55 { flex: 0 0 55% !important; max-width: 55% !important; }

/* 3. De Afbeeldingen & De 1:1 Limiet */
.stretch-final {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    aspect-ratio: auto !important;
    border-radius: 12px !important;
    display: block !important;
    transition: transform 0.8s ease; /* Hover-effect hersteld */
}

/* De 1:1 limiet boven 1100px via Container Units */
@media (min-width: 1101px) {
    .stretch-final {
        max-height: 100cqw !important; 
    }
}

/* Hover-effect binnen de afgeronde hoeken */
.expertise-image-col picture:hover .stretch-final {
    transform: scale(1.05);
}

/* 4. De Tweede Afbeelding (Secondary Image) LOGICA */
.secondary-image {
    display: none !important;
}

@media (min-width: 1101px) {
    .has-extra-image .secondary-image {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        max-height: 100cqw !important;
    }
}

/* 5. Tekstbeheer: Automatisch afbreken */
.expertise-content {
    flex: 1;
    min-width: 0;
}
.hero-text {
    min-width: 0;
}
.expertise-content .hero-text p {
    display: -webkit-box;
    -webkit-line-clamp: 10; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	padding-bottom: 20px;
}
.read-more-link {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
    text-decoration: underline;
    color: rgb(84,73,53);
}

/* 6. Mobiele Responsiviteit (< 1101px) */
@media (max-width: 1100px) {
    .expertise-content.force-stretch {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .img-anchor-45, .img-anchor-55, 
    .force-stretch .col-55, .force-stretch .col-45, .hero-text {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .stretch-final {
        max-height: none !important; 
    }
}

/* 7. PICTURE TAG FIX: Garandeert afgeronde hoeken RECHTS en zoom-masker */
.expertise-image-col picture {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    border-radius: 12px !important;
    overflow: hidden !important; 
}




/**/













/* --- UITLIJNING MATRIX OP HERO  --- */
/* --- GEZUIVERDE HERO SECTIE --- */
/* 1. Gezamenlijke basis voor alle hoofdcontainers */
.hero-section,
.expertise-section,
.menu-matrix, 
.carousel-container {
    max-width: 100%; 
    margin-left: 0 !important;
    margin-right: auto;
    padding-left: 0 !important;
}

/* 2. Specifieke afstelling voor de Hero-sectie (ivm de Navbar) */
.hero-section, .expertise-section {
    display: block;
    width: 100% !important;
    margin-top: 0 !important;
}
.hero-section {
    padding-top: 140px !important; /* Ruimte onder de fixed navbar */
}

.hero-subtitle {
    font-family: inherit;
	display: inline;      /* Zorgt dat het aansluit op dezelfde regel */
    font-style: inherit;  /* Neemt de stijl van de h1 over */
    font-weight: inherit; /* Neemt de dikte van de h1 over */
    color: inherit;       /* Neemt de kleur van de h1 over */
}

.menu-matrix, .carousel-container {
    max-width: 100%; 
	margin: 0 auto; 
}

/* Zorg dat de slogan bij scrollen ook vrij blijft */
.navbar.scrolled ~ .hero-section {
    /* Optioneel: als je navbar hoger wordt bij scrollen (120px), 
       dan kun je hier de padding nog iets verhogen */
}
.hero-slogan, .expertise-slogan {
    /* 1. Uiterst links tegen de rand */
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 55% !important; /* Smalle kolom voor architecturale look */

    /* 2. Tekst opmaak */
    font-size: clamp(2rem, 5vw, 3.0rem);
    font-weight: 100;
    font-family: Cambria, serif;
	color: rgb(84,73,53); /* DAT: rgb(154, 140, 110), rgb(84,73,53),#9a8c6e */
    line-height: 1.1;
    letter-spacing: -1px;
    -webkit-font-smoothing: antialiased;
	display: block;
    margin-bottom: 90px;
}
.hero-slogan{
	padding-top: 60px;
}
.expertise-slogan{
	padding-top: 0px;
}
/* Zorg dat de afbeeldingen de volledige breedte van hun containers vullen */
.menu-matrix img, 
.carousel-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Voorkomt vervorming bij het uitrekken */
}
/* Verwijder eventuele resterende marges tussen de items voor een 'wall' effect */
.menu-matrix {
    display: flex;
    flex-wrap: wrap;
    gap: 0; /* Zet op 0 voor een naadloze fotowand, of bijv. 2px voor een fijne lijn */
}

/* Zorg dat de navbar-logo en de slogan op dezelfde x-as starten */
.logo {
    margin-left: 0;
}
.hero-content, .expertise-content {
    display: flex;
    flex-wrap: nowrap; 
    gap: 80px; 
    align-items: flex-start;
    width: 100%; /* Gebruik 100% van de parent, nooit 100vw */
	min-width: 0; /* Voorkomt dat flex-items buiten de container 'breken' */
}
/* De afbeelding container */
.hero-image-container {
    flex: 0 0 55%; /* Houdt de afbeelding op precies 55% */
    max-width: 55%;
    overflow: hidden;
    border-radius: 12px;
}
.zoom-img { 
	width: 100%; 
	height: auto; 
	display: block;
	transition: transform 0.8s ease; 
	aspect-ratio: 3 / 2; /* Forceert de 3:2 verhouding van de medium/large */
    object-fit: cover;   /* Snijdt de 1:1 afbeelding netjes bij zodat hij vult */
}
.zoom-img:hover { 
	transform: scale(1.05); 
}
/* De tekstuele uitleg */
.hero-text {
    min-width: 300px; /* Voorkomt dat tekst te smal wordt */
}
.hero-text h2 {
    font-size: 1.5rem;
	font-weight: 100;
	color: rgb(84,73,53);/* DAT: rgb(154, 140, 110), rgb(84,73,53),#9a8c6e */
    margin-top: -5px; /* Uitlijning op bovenkant foto */
    margin-bottom: 25px;
    border-left: 2px solid #333;
    padding-left: 20px;
    line-height: 1;
}
.hero-text p {
    font-size: 1.0rem;
	font-family: sans-serif;
    font-weight: 300; /* Voor als de browser het wel ondersteunt */
	color:#9a8c6e;
	line-height: 25px;
}

    
/* --- RESPONSIVE FIX --- */
@media (max-width: 600px) {
    .hero-image-container {
        border-radius: 0; /* Foto loopt strak van rand tot rand */
    }
}


@media (max-width: 1100px) {
    .hero-content, .expertise-content {
        flex-direction: column; /* Stapel tekst onder foto bij ruimtegebrek */
        gap: 20px;
    }
    .hero-image-container {
        flex: 0 0 100%;
        max-width: 100%;
		/*
		margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px); 
		*/ /* Compenseert de padding van de container, indien volledige breedte gewenst */
    }
	
}

@media (max-width: 400px) {
    .hero-content, .expertise-content {
        flex-direction: column; /* Stapel tekst onder foto bij ruimtegebrek */
        gap: 0px;
    }
    .hero-image-container {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
.cta-button { 
    display: inline-block; 
	padding: 12px 25px; 
	background: rgb(84,73,53); 
	color: #fff; /*#333, rgb(154, 140, 110), rgb(84,73,53),#9a8c6e */ 
    text-decoration: none; 
	border-radius: 4px; 
	transition: 0.3s; 
}
.cta-button:hover { background: #e67e22; 
}











/* --- HORIZONTALE LIJN --- */
.full-line { 
	border: 0; 
	height: 1px;
	background-color: #999999; 
	width: 100%; 
	margin: 0;
	margin: 60px 0px 90px 0px;
}
.full-line-carousel-boven { 
	border: 0; 
	height: 1px;
	background-color: #999999; 
	width: 100%; 
	margin: 0;
	margin: 90px 0px 0px 0px;
}
.full-line-carousel-onder { 
	border: 0; 
	height: 1px;
	background-color: #999999; 
	width: 100%; 
	margin: 0;
	margin: 0px 0px 60px 0px;
}
.full-line-none { 
	border: 0; 
	height: 1px;
	background-color: #999999; 
	width: 100%; 
	margin: 0;
	margin: 0px 0px 0px 0px;
}
@media (max-width: 1100px) {
	.full-line { 
	margin: 60px 0px 60px 0px;
}
}


/* --- BACK TO TOP GEOPTIMALISEERD --- */
#backToTop {
    display: none; /* Wordt 'flex' via JS */
    position: fixed;
    bottom: 100px; 
    right: 20px; 
    z-index: 9999;  
    
    /* Maak de knop iets groter voor de 24px pijl, of verwijder padding */
    width: 40px; 
    height: 40px;
    padding: 0; /* Verwijder padding voor perfecte centrering via flex */
    
    background-color: rgba(255,255,255,0.60);
    color: rgba(84,73,53, 0.6);
    border: 1px solid rgba(84,73,53, 0.6); 
    border-radius: 10px; 
    cursor: pointer;
    transition: all 0.3s ease-in-out;

    /* Zorg dat deze op flex staat in JS! */
    align-items: center;
    justify-content: center;
}

#backToTop:hover {
    background-color: rgba(84,73,53, 0.6);
    color: #ffffff;
}

#backToTop svg {
    width: 24px;   
    height: 24px;
    /* stroke-width bepaalt hoe dik de pijl is */
    stroke: currentColor; 
    transform: translateY(-1px); 
    transition: transform 0.3s ease;
}

#backToTop:hover svg {
    transform: translateY(-4px); 
}

@media (max-width: 480px) {
    #backToTop {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
    #backToTop svg {
        width: 20px;
        height: 20px;
    }
}

/*PERMANENT LINK ONDERSTREPEN*/


/* Gebruik het volledige pad voor maximale prioriteit */
.nav-links li a.active::after {
    width: 100% !important;
    opacity: 1 !important;
    background-color: rgb(84,73,53); /* Zorg dat dit jouw logokleur is */
}

/* Optioneel: geef de actieve tekst ook de kleur van het logo */
.nav-links li a.active {
    color: rgb(84,73,53) !important;}
	
.nav-links a.active::after {
    width: 100% !important;
    background-color: rgb(84,73,53) !important;
    opacity: 1 !important;
}

/* TWEE FOTO'S IN ÉÉN KOLOM*/
.image-stack {
    display: flex;
    flex-direction: column;
    gap: 20px; /* De ruimte tussen de twee foto's */
}

.image-stack img {
    width: 100%;
    height: auto;
    display: block;
}





















/* --- MATRIX GRID GEOPTIMALISEERD --- */
.menu-matrix { 
    padding: 0px 0px; 
    max-width: 100%;
}

.matrix-grid { 
    display: grid; 
    /* Aangepast naar 3 kolommen voor jouw wens */
    grid-template-columns: repeat(3, 1fr); 
    gap: 60px; 
	justify-items: center; /* Centreert de items horizontaal in de grid-cel */
	padding-top: 90px;
}

.matrix-img { 
    width: 100%; 
    aspect-ratio: 1/1; 
    object-fit: cover; 
    border-radius: 4px; 
    display: block;
}

.menu-item {
    text-align: center; /* Centreert de titel en beschrijving onder de foto */
    width: 100%;
    max-width: 400px; /* Optioneel: houdt de tekstblokken compact en leesbaar */
}

.menu-desc h3 {
    margin-top: 20px;
    font-size: 1.2rem;
    /* Verwijder eventuele border-left of padding-left als die er nog stonden */
}

.menu-desc p {
    margin-top: 10px;
    line-height: 1.6;
    /* Zorgt dat de tekst niet te breed uitloopt */
    padding: 0 10px; 
}

/* --- MATRIX ITEM 5: SPECIFIEKE GROOTTE --- */
/* --- RESPONSIVENESS --- */
/* Tablet & Kleine laptops: 2 kolommen */
@media (max-width: 1024px) {
    .matrix-grid { 
        grid-template-columns: repeat(2, 1fr); 
        padding-top: 100px;
        gap: 40px; /* Iets compacter op tablet */
    }
}
@media (max-width: 600px) {	
    .full-width-content { 
        flex-direction: column; 
        gap: 30px;
        text-align: center;}
	.menu-item {
        max-width: 100%; /* Gebruik volledige breedte op mobiel *//* Mobile: 1 kolom (vanaf 600px of lager) */
    
    }
}




/* Verberg het 3e item op tablet (want 3 is geen veelvoud van 2) */
@media (max-width: 1024px) and (min-width: 601px) {
    /* Als het laatste item een oneven nummer is (en dus alleen op een rij staat) */
    .menu-item:nth-child(odd):last-child {
        display: none;
    }
}

/* Verberg items op desktop die geen volledige rij van 3 vormen */
@media (min-width: 1025px) {
    /* Verberg het 4e of 7e item als dat de start van een nieuwe onvolledige rij is */
    .menu-item:nth-child(3n+1):last-child,
    /* Verberg het 5e of 8e item als dat het tweede item in een onvolledige rij is */
    .menu-item:nth-child(3n+2):last-child,
    .menu-item:nth-child(3n+2):nth-last-child(2) {
        /* Met Javascript is dit makkelijker, maar dit vangt de meest voorkomende 'gaten' op */
    }
}

/*Houd de 480px aan voor de overgang naar één kolom, maar zorg dat de items daar de volledige breedte pakken:*/
@media (max-width: 480px) {
     .matrix-grid { 
        grid-template-columns: repeat(1, 1fr); 
        gap: 40px; /* Iets minder gap voor mobiel */
    }
    .menu-item {
        max-width: 100%; /* Zorg dat het item niet beperkt wordt tot 400px */
    }
    /* ... rest van je footer en carousel css ... */
}

/* Logica voor Tablet (2 kolommen): Verberg het laatste item als het aantal oneven is */
@media (max-width: 1024px) and (min-width: 481px) {
    .menu-item:nth-child(odd):last-child {
        display: none;
    }
}

/* Logica voor Desktop (3 kolommen): Verberg items die geen rij van 3 volmaken */
@media (min-width: 1025px) {
    /* Verberg het 1e item van een nieuwe rij als het de laatste is */
    .menu-item:nth-child(3n+1):last-child {
        display: none;
    }
    /* Verberg de laatste twee items als ze samen een nieuwe rij starten maar niet afmaken */
    .menu-item:nth-child(3n+1):nth-last-child(2),
    .menu-item:nth-child(3n+2):last-child {
        display: none;
    }
}

/* --- MATRIX RESPONSIVENESS UPDATE --- */









/* RECENTE PROJECTEN, Footer & Links behouden zoals ze waren */
.matrix-footer { width: 100%; text-align: center; margin-top: 60px; }
.all-offers-link { 
    display: inline-block; text-decoration: none; color: #333; 
    font-weight: bold; text-transform: uppercase; letter-spacing: 2px; 
    position: relative; padding: 10px 0;
}
.all-offers-link::after { 
    content: ""; position: absolute; bottom: 0; right: 0; 
    width: 0%; height: 2px; background: #e67e22; transition: 0.4s; 
}
.all-offers-link:hover::after { width: 100%; }






/* --- CARROUSEL --- */

.carousel-text {
    /* Beperk de breedte voor een bescheiden, leesbare kolom */
    max-width: 800px; 
    margin: 0 auto; /* Zorgt voor centrering binnen de content-box */
    color: #000000;
}

.carousel-text p {
    font-size: 1.05rem;
    color: #242424;
    line-height: 1.6;
    /* Voorkomt dat woorden de rand raken op mobiel */
    padding: 0 0px; 
}

/* Optioneel: Maak de titel ook iets compacter */
.carousel-text h2 {
    font-size: 1.7rem;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.carousel-container { 
    position: relative; 
    margin: auto; 
    /* Gebruik de gecorrigeerde clamp overal voor perfecte uitlijning */
    padding-left: clamp(0px, calc(15.4vw - 61.5px), 160px);
    padding-right: clamp(0px, calc(15.4vw - 61.5px), 160px);
    padding-top: 50px; 
    padding-bottom: 50px; /* Was padding-down */
    background-color: whitesmoke;
}

.carousel-outer { 
	overflow: visible; 
	width: 100%; 
	padding: 0; 
}
.carousel-wrapper { 
	display: flex; 
	transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); 
	width: 500%; 
	z-index: 1;
}
.carousel-item { 
	width: 20%; 
	flex-shrink: 0; 
	opacity: 0.3; 
	transform: scale(0.9); 
	transition: 0.6s; 
	z-index: 1;
}
.carousel-item.active { 
	opacity: 1; 
	transform: scale(1); 
	z-index: 1;
}
.carousel-link { 
	text-decoration: none; 
	color: inherit; 
	display: block; 
	-webkit-user-drag: none;
}
.carousel-content { 
	display: flex; 
	align-items: center; 
	gap: 60px; 
	padding: 20px; 
}
.carousel-image img { 
	width: 100%; 
	height: 400px; 				/* afmeting*/
	object-fit: cover; 
	border-radius: 12px; 
	user-select: none; 
    -webkit-user-drag: none; /* Voorkomt 'slepen' van plaatje in Chrome/Safari */
    pointer-events: none;    /* Laat de swipe-actie door naar de container */
}

.carousel-btn {
    position: absolute; 
	top: 50%; 
	transform: translateY(-50%);
    width: 60px; 
	height: 60px; 
	background: #fff; 
	border: 1px solid #eee;
    border-radius: 50%; 
	cursor: pointer; 
	font-size: 1.4rem; 
	z-index: 10;
	transition: all 0.3s ease;
}

.carousel-btn.prev { 
    /* Gebruik ook hier de clamp ipv vaste 160px voor desktop */
    left: clamp(0px, calc(15.4vw - 61.5px), 160px);
} 

.carousel-btn.next { 
    /* Gebruik ook hier de clamp ipv vaste 160px voor desktop */
    right: clamp(0px, calc(15.4vw - 61.5px), 160px);
}
.carousel-btn:hover { 
	background: #e67e22;
	color: #fff; 
	border-color: #e67e22; 
}
.carousel-btn:hover {     
    transform: translateY(-50%) scale(1.1); /* Subtiele zoom bij hover */
}

/*2026-01-16 15:40*/







/* --- CONTACT PAGINA SPECIFIEK --- */
/*2026-01-16 16:30*/
/* --- FINALE CONTACT LAYOUT: PERFECTE UITLIJNING --- */
/* De grid heft de padding van page-container op om de foto strak rechts te krijgen */
.contact-grid {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + (2 * clamp(0px, calc(15.4vw - 61.5px), 160px)));
    margin-left: calc(-1 * clamp(0px, calc(15.4vw - 61.5px), 160px));
    margin-right: calc(-1 * clamp(0px, calc(15.4vw - 61.5px), 160px));
    padding-top: 150px; 
	padding-bottom: 120px;
    align-items: stretch;
}

.contact-col {
    flex: 1;
    min-width: 50%;
    display: flex;
    flex-direction: column;
}

.contact-left {
    /* 'N' uitlijnen op 'P' van logo */
    padding-left: clamp(0px, calc(15.4vw - 61.5px), 160px);
    padding-right: 60px;
    padding-bottom: 80px;
    align-items: flex-start;
}

.contact-right {
    /* Rechterkant foto uitlijnen op 't' van contact */
    padding-right: clamp(0px, calc(15.4vw - 61.5px), 160px);
}

.contact-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/*--2026-1-22--*/
.contact-form {
    display: flex;
    flex-direction: column; /* Nu staat alles weer in de juiste volgorde */
    width: 100%;
}

/* Zorg dat de slogan bovenaan blijft */
#status-message {
    order: -1; 
}

/* Zorg dat de verzendknop onderaan blijft */
.contact-submit {
    order: 99;
    margin-top: 20px;
}
/*--2026-1-22--*/

.contact-slogan {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 40px;
    color: #333;
    line-height: 1.3;
}

.form-group {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 25px;
}

.form-group label {
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 600;
}

.form-group input, 
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #d3d3d3; /* Licht grijs omrand */
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
}

.form-group input::placeholder, 
.form-group textarea::placeholder {
    color: #bcbcbc; /* Licht grijze tekst */
}

.contact-submit {
    align-self: flex-start;
    padding: 16px 45px;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
}
/*2026-01-16 16:30*/


/* --- RESPONSIVE CONTACT GRID --- */

@media (max-width: 1100px) {
    /* 1. Reset de negatieve marges en calc-breedte van de desktop */
    .contact-grid {
        flex-direction: column; /* Stapel foto en formulier */
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 100px; /* Iets compacter op mobiel */
    }

    /* 2. Beiden pakken de volledige breedte van de page-container */
    .contact-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 3. Visuele volgorde: Foto bovenop is sterker voor architectuur */
    .contact-right {
        order: -1; 
        margin-bottom: 40px;
        height: 400px; /* Geef de foto een mooie hoogte op mobiel/tablet */
    }

    .contact-left {
        padding-bottom: 60px;
    }

    .contact-img {
        border-radius: 12px; /* Rondom afgerond op mobiel */
    }

    /* 4. Verzendknop op mobiel mag ook over de volle breedte indien gewenst */
    .contact-submit {
        width: 100%; /* Optioneel voor betere 'tap'-ervaring op telefoon */
    }
}






/* --- FOOTER (Dreamweaver Flexbox Fix) --- */
.main-footer { width: 100%; 
	border: 1px solid #000; 
	box-sizing: border-box; 
	margin-top: 0px;}
.footer-grid { 
	display: flex; 
	flex-wrap: wrap; 
	width: 100%; }
.footer-box-1 { 				
    flex: 0 0 50%; 
    background-color: #DDD7C9; /*#f5f1e9*/   /* DAT: rgb(154, 140, 110), rgb(84,73,53),#9a8c6e */
    /* Boven: 80px, Rechts: 10%, Onder: 80px, Links: Vloeibaar */
    padding: 80px 10% 80px clamp(0px, calc(15.4vw - 61.5px), 160px); 
    box-sizing: border-box; 
}
.footer-box-2 { 
	flex: 0 0 50%; 
	border-left: 1px solid #000; 
	line-height: 0; 
	box-sizing: border-box; }
.butcher-photo { 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	display: block; 
}
.method-link {
    display: inline-block; 
	color: #000; 
	text-decoration: none; 
	text-transform: uppercase;
    border-bottom: 1px solid #e67e22; /* Oranje accent van je carrousel */ 
	font-size: 0.8rem;
	letter-spacing: 1px; 
	position: relative; 
	padding-bottom: 4px; 
	margin-bottom: 60px;
	font-family: sans-serif;
	font-weight: 500;
	transition: opacity 0.3s;
}
.method-link::after { content: ""; 
	position: absolute; 
	bottom: 0; 
	right: 0; 
	width: 0%; 
	height: 1px; 
	background: #e67e22; 
	transition: 0.4s; 
}
.method-link:hover::after {
	width: 100%;
	opacity: 0.7;
}
.footer-contact-matrix { display: flex; gap: 50px; flex-wrap: wrap; }

/* De kleine koppen (ADRES, TELEFOON, etc.) */
.contact-item h3 { 
    font-family: sans-serif; /* Strakke sans-serif voor metadata */
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px; 
    color: #333;
    margin-bottom: 8px;
}
/* De normale tekst in de footer */
.contact-item p, .bottom-left, .terms-link {
    font-family: sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
}
.footer-box-3 {
    flex: 0 0 100%; 
    width: 100%; 
    background-color: #ffffff; /*#faf7f2*/
    border-top: 1px solid #000;
    /* Verticaal: 30px, Horizontaal: Vloeibaar */
    padding: 30px clamp(0px, calc(15.4vw - 61.5px), 160px); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-sizing: border-box;
}
/* De grote slogan in de footer */
.footer-slogan {
    font-family: Cambria, serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem); /* Schaaalt mee met scherm */
    font-weight: 100;
    line-height: 1.1;
    letter-spacing: -1px;
    color: #000;
    margin-bottom: 40px;
}
.bottom-left { 
	flex: 1; 
	text-align: left; 
}
.bottom-right { 
	flex: 1; 
	text-align: right; 
}
.terms-link { 
	text-decoration: none; 
	color: inherit; 
}
/* Herstel de grid layout */
.contact-grid {
    display: flex !important;
    flex-direction: row !important; /* Forceert normale horizontale volgorde */
    justify-content: space-between;
    direction: ltr !important; /* Forceert tekst van links naar rechts */
}
/* Zorg dat de kolommen niet spiegelen */
.contact-left {
    order: 1 !important;
}
.contact-right {
    order: 2 !important;
}
/* Fix voor de knop die bovenaan staat */
.contact-form {
    display: flex !important;
    flex-direction: column !important;
}
.contact-submit {
    order: 10 !important; /* Zet de knop altijd onderaan */
}
/* Mobiel & Tablet: Knoppen dichter naar de kant om de content niet te bedekken */












/*PROJECT-PAGINA*/

.main-project-img {
    width: 100%;
    height: auto;
    filter: grayscale(0%); /* Start volledig in kleur */
    transition: filter 0.3s ease-out;
    position: sticky;
    top: 0;
}




















/* --- TABLET & SMALL LAPTOP FIX --- */
@media (max-width: 1200px) {
    .hero-slogan, .expertise-slogan {
        /* Op tablets mag de tekst iets breder (bijv. 70%) 
           of volledig 100% als de foto ook naar 100% gaat */
        width: 100%; 
        max-width: 100%;
        margin-bottom: 40px; /* Iets minder witruimte op kleinere schermen */
    }
	 .carousel-btn {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
}
/* Zorg dat de afbeelding-container op tablet ook goed meeschaalt */
@media (max-width: 1100px) {
    .hero-content, .expertise-content {
        flex-direction: column; /* Stapelt foto en tekst */
    }
    .hero-image-container {
        flex: 0 0 100%;
        max-width: 100%;
    }
	.contact-grid {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .contact-col {
        min-width: 100%;
        padding-left: clamp(0px, calc(15.4vw - 61.5px), 160px);
        padding-right: clamp(0px, calc(15.4vw - 61.5px), 160px);
    }
    .contact-right {
        order: 2; /* Foto onder het formulier */
        height: 400px;
        margin-top: 20px;
    }
}

@media (min-width: 1024px) {
    .hero-slogan, .expertise-slogan {
        margin-left: -4px !important; /* Alleen op desktop voor de optische 'A' */
    }
}



@media (max-width: 992px) {
     .navbar, .menu-matrix, .carousel-container {
		 }
    /* 1. Stapelen van de boxen: Foto boven, tekst onder */
    .footer-grid {
        flex-direction: column !important;
    }
	.footer-box-1 {
        flex: 0 0 100% !important;
        /* Behoud je clamp-padding zodat tekst links uitlijnt met het logo */
        padding: 60px clamp(20px, calc(15.4vw - 61.5px), 160px) !important;
    }

    .footer-box-2 {
        flex: 0 0 100% !important;
        border-left: none !important;
        border-top: 1px solid #000;
        height: 350px; /* Vaste hoogte voor de foto op mobiel */
    }
	.footer-box-3 {
        /* De onderste balk met copyright en voorwaarden */
        padding: 30px clamp(20px, calc(15.4vw - 61.5px), 160px) !important;
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
	
	/* Zorg dat de grote foto in de footer meeschaalt */
    .footer-box-1 img {
        width: 100%;
        height: auto;
        display: block;
        loading: lazy; /* Zoals besproken voor SEO/Snelheid */
    }
    .matrix-grid { 
		grid-template-columns: repeat(2, 1fr); }
    .carousel-outer { 
		padding: 0; overflow: hidden; }
	.hero-section, .expertise-section {
        padding-top: 0px !important; /* Iets minder ruimte op mobiel */
    }
	.hero-slogan, .expertise-slogan {
        width: 100% !important; /* Volledige breedte op kleine schermen */
    }
	.fade-out { 
		display: none; 
	}
    .logo {
        gap: 0 !important; /* Verwijder dynamische flex-gap */
        display: flex;
        flex-wrap: nowrap; /* Voorkom dat letters verspringen naar nieuwe regel */
    }
	.logo .word {
        flex-shrink: 0; /* Voorkom dat letters "geknepen" worden */
        margin-right: 6px; /* Gebruik een vaste marge in plaats van flex-gap */
    }
    .menu-icon { 
		display: block; 
	}
	.hero-slogan,.expertise-slogan {
        width: 100%; /* Volledige breedte op mobiel */
        margin-top: 20px;
    }
    .nav-links {
        position: fixed; 
        top: -100vh; 
        left: 0; 
        width: 100%; 
        height: 100vh;
        background-color: rgba(208,200,187,1.00);/*UITKLAPMENU KLEUR*/ 
        flex-direction: column;
        justify-content: flex-start; 
        
        /* 1. LIJN HIER UIT MET LOGO: */
        /* Gebruik exact dezelfde padding als je .navbar heeft */
        padding-left: clamp(0px, calc(15.4vw - 61.5px), 160px);
        
        /* 2. ZORG DAT DE ITEMS LINKS BLIJVEN PLAKKEN: */
        align-items: flex-start; 
        padding-top: 140px; /* Hoogte vanaf de bovenkant */
        gap: 40px;
        transition: top 0.7s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 9999;
    }
    .nav-links.active { 
		top: 0; 
		transition-delay: 0s; 
	}
        /* Optioneel: Zorg dat de linkjes zelf geen extra marge hebben */
    .nav-links li {
        padding-top:10px;
		margin-left: 3px;
		width: 100%;
        opacity: 0;
       	transition: opacity 1.5s ease;
    }
    .nav-links.active li { 
		opacity: 1; 
		transition-delay: 0.7s; 
	}
    .nav-links a { 
		font-size: 3rem; 
		font-family: "inherit"; /*layout*/ 
		font-weight: lighter; 
		color: rgb(84,73,53);
	}
}


/*UITLIJNING RECHTS HERO FOTO en TEXT op MENU*/

@media (max-width: 992px) {
    /* ... je bestaande code voor navbar, footer, etc ... */

    .hero-content, .expertise-content {
        flex-direction: column; /* Stapel container verticaal */
        gap: 30px;              /* Ruimte tussen afbeelding en tekst */
        width: 100%;            /* Gebruik volledige breedte binnen padding */
    }

    .hero-image-container {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
    }

    .project-text {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-right: 0;      /* Zorg dat tekst niet onnodig inspringt rechts */
    }

    .project-text h2 {
        margin-top: 0;         /* Reset de desktop uitlijning */
    }
}



/* Specifieke fix voor het gebied tussen 1100px en het hamburger-menu (992px) */
@media (max-width: 1100px) and (min-width: 993px) {
    .hero-content, .expertise-content {
        flex-direction: column; /* Stapel ze alvast verticaal */
        width: 100%;
        display: flex;
    }

    .hero-image-container, 
    .hero-text {
        /* In plaats van 100% breedte, vullen ze de container 
           tot aan de rechter padding van de navbar */
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .hero-text {
        text-align: left; /* Houd de tekstinhoud zelf links gealigneerd */
    }
}

/* Zorg dat de slogan in dit gebied ook de volledige breedte pakt */
@media (max-width: 1100px) {
    .hero-slogan, .expertise-slogan {
        width: 100% !important;
        padding-right: 0;
    }
}

/*EINDE - UITLIJNING RECHTS HERO FOTO en TEXT op MENU*/












@media (max-width: 768px) {
    .word-hide, .fade-out { display: none; }
    .logo { 
        /* Verlaag de basisgrootte; de & en PO schalen automatisch mee via 'em' */
        font-size: 2.0rem; 
        gap: 0.1em; /* Iets ruimte houden zodat ze niet plakken */
    }
	/* Extra marge toevoegen op mobiel voor de & om overlap te voorkomen */
    .logo .word:nth-child(3) {
        margin-left: 0.1em;
        margin-right: 0.1em;
    }
    .matrix-grid { 
		grid-template-columns: repeat(2, 1fr);
	}
}
    .carousel-content { flex-direction: column-reverse; text-align: center; }
    .carousel-content { flex-direction: column-reverse; text-align: center; }

@media (max-width: 600px) {
    .carousel-outer {
        /* Wil je dat de foto de rand raakt? Gebruik dan 0. 
           Wil je de foto ernaast zien 'lekken'? Gebruik dan 40px, 
           maar besef dat de huidige foto dan kleiner wordt. */
        padding: 40; 
    }
    .carousel-btn {
        width: 35px;
        height: 35px;
        background: rgba(255, 255, 255, 0.7);
        font-size: 0.9rem;
    }
}








/* --- MATRIX GRID 1 KOLOM VANAF 600PX --- */
@media (max-width: 600px) {
    .matrix-grid { 
        grid-template-columns: repeat(1, 1fr); /* Dwingt 1 kolom */
        gap: 50px; /* Ruimte tussen de projecten */
        padding-top: 60px; /* Iets minder witruimte boven de grid op mobiel */
    }

    .menu-item {
        max-width: 100%; /* Plaatje vult de volledige breedte binnen de padding */
		display: block !important; 
    }

    .menu-desc p {
        padding: 0; /* Tekst mag de volledige breedte gebruiken voor betere leesbaarheid */
    }
}






















@media (max-width: 480px) {
    /* 1. Matrix Grid: De kolom-instelling staat al bij 600px, 
       dus hier voegen we alleen specifieke mobiele styling toe */
    .matrix-grid { 
        gap: 40px; /* Iets compacter op kleine telefoons */
    }

    /* 2. CRUCIALE FIX: Zorg dat het 3e project weer zichtbaar is */
    .menu-item {
        display: block !important; 
        max-width: 100%;
    }

    /* 3. Footer & Carousel aanpassingen */
    .footer-box-3 { 
        flex-direction: column; 
        gap: 10px; 
        text-align: center; 
    }
    .bottom-left, .bottom-right { 
        text-align: center; 
    }
    .carousel-btn {/* Verbergt de knoppen op kleine telefoons voor meer rust */
        display: none; 
    }
    .carousel-outer {/* Geeft meer ruimte aan de foto op mobiel */
        padding: 0; 
    }
}



/* ============================================================
   DEFINITIEVE 50/50 EXPERTISE FIX (Overschrijft alle delen)
   ============================================================ */

@media (min-width: 1101px) {
    /* 1. Dwing de container naar een strakke rij zonder 'wrappen' */
    .expertise-content.force-stretch {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 80px !important; /* De door jou gewenste gap */
        align-items: flex-start !important;
        width: 100% !important;
    }

    /* 2. De Kolommen: Exact 50% minus de helft van de gap (40px) */
    .expertise-content.force-stretch .col-50 {
        /* Wiskunde: 50% breedte - 40px (helft van de gap) = exact passend */
        flex: 0 0 calc(50% - 40px) !important;
        max-width: calc(50% - 40px) !important;
        width: calc(50% - 40px) !important;
        
        /* Reset de 'flex: 1' en andere instellingen uit eerdere delen */
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important; 
        box-sizing: border-box !important;
    }

    /* 3. Lijn de titels (H2/H3) boven de kolommen ook exact uit op deze lijn */
    .section-title, .matrix-title {
        max-width: calc(50% - 40px) !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* 4. Mobiele Reset: Onder 1101px alles netjes stapelen */
@media (max-width: 1100px) {
    .expertise-content.force-stretch {
        flex-direction: column !important;
        gap: 40px !important;
    }
    .expertise-content.force-stretch .col-50 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 30px;
    }
}

/* --- FINALE LAYOUT LOGICA (Desktop > 1100px) --- */
@media (min-width: 1101px) {
    .hero-content, .expertise-content {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 80px !important; /* De vaste gap */
        align-items: flex-start;
    }

    /* ASYMMETRISCH (Hero & Contact) */
    .col-55 { 
        flex: 0 0 calc(55% - 40px) !important; 
        max-width: calc(55% - 40px) !important; 
    }
    .col-45 { 
        flex: 0 0 calc(45% - 40px) !important; 
        max-width: calc(45% - 40px) !important; 
    }

    /* SYMMETRISCH (Expertise) */
    .col-50 { 
        flex: 0 0 calc(50% - 40px) !important; 
        max-width: calc(50% - 40px) !important; 
    }
    
    /* TITEL UITLIJNING (Lijn uit met linker kolom) */
    .section-title {
        max-width: calc(55% - 40px) !important; /* Stopt exact bij de gap */
        width: 100%;
    }
}

/* MOBIELE FIX (< 1100px) */
@media (max-width: 1100px) {
    .hero-content, 
    .expertise-content.force-stretch {
        flex-direction: column !important;
        gap: 40px !important; /* Iets compactere gap voor mobiel */
        width: 100% !important;
    }

    /* Alle kolommen naar volledige breedte binnen de page-container */
    .col-55, .col-45, .col-50 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Zorg dat afbeeldingen hun aspect-ratio behouden of een vaste hoogte krijgen */
    .hero-image-container {
        height: auto;
        margin-bottom: 20px;
    }
}


@media (max-width: 768px) {
    /* De grote slogans (Hero & Footer) */
    .hero-slogan, .footer-slogan {
        font-size: 1.8rem !important; /* Compacter op kleine schermen */
        line-height: 1.2;
        margin-bottom: 40px;
    }

    /* Koppen in de tekstblokken (H2 en H3) */
    .hero-text h2, .info-section h3 {
        font-size: 1.3rem !important;
        line-height: 1.3;
    }

    /* De gewone lees-tekst */
    .hero-text p, .info-section p, .contact-item p {
        font-size: 0.95rem !important;
        line-height: 1.5; /* Iets meer ademruimte voor kleine letters */
    }

    /* De menu-items in de navbar (indien uitgeklapt) */
    .nav-links a {
        font-size: 2rem !important;
    }
}
/* Desktop & Mobiel Slogan Tuning */
.hero-slogan, .footer-slogan, .expertise-slogan {
    line-height: 1.05 !important; /* Strakker op elkaar */
    letter-spacing: -0.02em !important; /* Iets compacter voor premium gevoel */
}


@media (max-width: 768px) {
    .hero-slogan, .footer-slogan {
        font-size: 1.85rem !important;
        line-height: 1.1 !important; /* Iets meer ademruimte op kleine schermen */
    }
}
@media (max-width: 600px) {
    /* Matrix Foto Hoogte */
    .matrix-img {
        aspect-ratio: 4/3 !important; /* Iets minder hoog dan vierkant voor mobiel overzicht */
        height: auto !important;
    }

    /* Contactformulier Verzendknop */
    .contact-submit {
        width: 100% !important; /* Volle breedte voor makkelijk klikken */
        padding: 18px 0 !important; /* Iets groter raakvlak */
        font-size: 1rem !important;
        margin-top: 10px;
    }

    /* Extra ruimte onder inputvelden voor duim-navigatie */
    .form-group {
        margin-bottom: 30px !important;
    }
}

/* Contactformulier Kleurmatch */
.form-group input, 
.form-group textarea {
    border: 1px solid rgba(84,73,53, 0.3) !important; /* Subtiele logokleur */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: rgb(84,73,53) !important; /* Hardere kleur bij actieve klik */
    box-shadow: 0 2px 0 rgba(84,73,53, 0.1); /* Subtiele schaduw onderaan */
}

.contact-submit {
    background-color: rgb(84,73,53) !important; /* Exacte logokleur */
    transition: opacity 0.3s ease;
}

.contact-submit:hover {
    opacity: 0.9;
    background-color: rgb(84,73,53) !important; /* Geen oranje meer, houd het rustig */
}
/* Matrix Projecten Animatie */
.menu-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Deze class voeg je toe via JS of direct in CSS als je geen scroll-animatie wilt */
.menu-item.visible, .matrix-grid .menu-item {
    opacity: 1;
    transform: translateY(0);
}

.matrix-img {
    transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.menu-item:hover .matrix-img {
    transform: scale(1.03); /* Zeer subtiele zoom op de foto */
}
/* BackToTop Mobiele Veiligheid */
@media (max-width: 600px) {
    #backToTop {
        bottom: 20px !important;
        right: 20px !important;
        /* Maak de knop iets minder aanwezig op mobiel */
        background-color: rgba(255, 255, 255, 0.8) !important;
        width: 35px !important;
        height: 35px !important;
        border-radius: 5px !important;
    }

    /* Zorg dat de contact-submit op mobiel altijd vrij blijft */
    .contact-left {
        padding-bottom: 100px !important; /* Extra ruimte onderaan het formulier */
    }
}

/* Styling voor de Fasen */
.method-row {
    padding: 60px 0;
}

.phase-number {
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #9a8c6e;
    margin-bottom: 10px;
}

.method-divider {
    border: 0;
    height: 1px;
    background-color: rgba(84,73,53, 0.2); /* Subtiele scheidingslijn */
    width: 100%;
}









/*OUD*/

.nh-accordion-section {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.nh-fase-wrapper {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0;
    margin-right: 0;
}

.nh-fase-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #999;
}

.nh-fase-titel h2 {
    margin-top: 5px;
    margin-bottom: 30px;
}

/* Accordion Basis */
.nh-accordion-item {
    border-bottom: 1px solid #e0e0e0;
    width: 100%;
}

.nh-accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0; /* Geen padding links voor uitlijning */
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.3s;
}

.nh-header-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: #1a1a1a;
}

.nh-icon {
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.3s ease;
}

/* Content gebied */
.nh-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Verloop: begint heel lichtgrijs, eindigt in transparant/wit */
    background: linear-gradient(to bottom, #f9f9f9 0%, #ffffff 100%);
}

.nh-content-inner {
    padding: 20px 0 30px 0; /* Tekst blijft links uitgelijnd */
    max-width: 650px;
}

/* Actieve status */
.nh-accordion-item.is-open .nh-icon {
    transform: rotate(45deg); /* Maakt van + een x */
}

.nh-accordion-item.is-open .nh-accordion-content {
    max-height: 500px; /* Hoog genoeg voor je tekst */
}

.nh-step-block p {
    font-size: 1rem;
    line-height: 1.7;
    color: #444;
    margin: 0;
    padding: 0;
    max-width: 600px; /* Houdt tekstregels leesbaar */
}

/* Forceert alle directe kinderen op 0 padding */
.nh-aligned-method, 
.nh-phase-block, 
.nh-step-block {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

    cursor: pointer; 
    color: rgb(84,73,53); 
    font-size: 1.1rem;
    font-family: inherit;
    text-align: left;
    transition: color 0.3s ease;
}

.accordion-header:hover {
    color: #9a8c6e;
}

.accordion-header .plus { 
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    font-size: 1.5rem; 
    font-weight: 300;
    line-height: 1;
}

.accordion-item.active .plus { 
    transform: rotate(45deg); /* Plus wordt een kruisje */
}

.accordion-content { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease; 
}

.accordion-item.active .accordion-content { 
    max-height: 400px; /* Hoog genoeg voor je tekst */
    padding-bottom: 30px; 
}

.accordion-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* --- 4. MOBIELE FIX (< 1100px) --- */
@media (max-width: 1100px) {
    .method-row {
        flex-direction: column !important; /* Stapelt de 50/50 kolommen */
        padding: 40px 0;
        gap: 30px !important;
    }

    .method-left-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .method-image-wrapper {
        margin-bottom: 10px;
    }

    .accordion-header {
        font-size: 1.05rem; /* Iets compacter op mobiel */
        padding: 18px 0;
    }
    
    .method-text-meta h3 {
        font-size: 1.5rem; /* Titel van de fase iets groter op mobiel */
    }
}

.method-row {
    /* Zorg dat deze waarde minimaal gelijk is aan de hoogte van je navbar + 20px extra marge */
    scroll-margin-top: 120px; 
}
















/*10-2-2026- OUD*/
/* --- CONTAINER & BASIS (Strak links uitgelijnd) --- */

.scroll-hint{
	padding-top: 45px;
	padding-bottom: 60px;
}
.nh-zero-padding-method {
    max-width: 800px;
    margin: 40px 0 80px 0; /* Margin auto verwijderd voor strakke linker uitlijning */
    padding-left: 0 !important;
    padding-right: 20px;
}

.nh-z-phase {
    margin-bottom: 100px;
    padding-left: 0 !important;
}

.nh-z-header {
    border-bottom: 2px solid #000;
    padding-bottom: 15px;
    margin-bottom: 30px;
    padding-left: 0 !important;
}

.nh-z-sub {
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #999;
    display: block;
}

.nh-z-title {
    font-size: 2.8rem;
	color: #5d544d;
    font-weight: 500;
    text-transform: uppercase;
    margin: 5px 0 0 0;
}

/* --- FOTO LOGICA (Alleen zichtbaar op tablet/mobile) --- */

.nh-mobile-only-photo {
    display: none; /* Standaard onzichtbaar op Desktop */
    width: 100%;
    margin: 30px 0;
}

.nh-process-img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- ACCORDION SYSTEEM (Overal actief) --- */
.nh-z-step {
    border-bottom: 1px solid #eee;
    padding-left: 0 !important;
}

.nh-accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.nh-z-num {
    font-size: 12px;
    font-family: monospace;
    color: #000;
    margin-right: 15px;
}

.nh-accordion-header h4 {
    font-size: 1.4rem;
    margin: 0;
    font-weight: 600;
    flex-grow: 1;
}

.nh-icon {
    font-size: 1.5rem;
	color: #5d544d; 
    font-weight: 300;
    transition: transform 0.3s ease;
}

/* De toelichting met gradient (Optie 1) */
.nh-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(to bottom, #f7f7f7 0%, #ffffff 100%);
}

.nh-content-inner {
    padding: 10px 0 40px 0;
}

.nh-z-step p {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
    margin: 0;
    max-width: 650px;
}

/* Actieve status */
.nh-z-step.is-open .nh-accordion-content {
    max-height: 1200px;
}

.nh-z-step.is-open .nh-icon {
    transform: rotate(45deg);
}

/* --- LIJST STYLING (FASE 02) --- */
.nh-custom-list {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

.nh-custom-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #555;
}

.nh-custom-list li::before {
    content: "+";
    position: absolute;
    left: 0;
    color: #000;
    font-weight: bold;
}

/* --- RESPONSIVE INSTELLINGEN --- */
@media (max-width: 992px) {
    .nh-mobile-only-photo {
        display: block; 
    }
}

/* Tekst marge tegen de schermrand bij mobiel */
@media (max-width: 840px) {
    .nh-zero-padding-method {
        padding-left: 20px !important; 
    }
}

/* Voegt ruimte toe onder de content voordat de footer begint */
.scroll-content-inner {
    padding-bottom: 120px; /* Ruimte voor desktop */
}

/* Zorg dat de footer zelf ook een duidelijke scheiding heeft */
.project-specific-footer {
    margin-top: 50px;
    background-color: #fff; /* Voorkomt transparantie-issues */
    position: relative;
    z-index: 10;
}

/* Specifieke fix voor de overgang */
@media (min-width: 993px) {
    .nh-zero-padding-method {
        margin-bottom: 150px; /* Extra marge onder de laatste fase */
    }
}
/* Standaard staat de tekst op onzichtbaar */
.nh-content-inner {
    opacity: 0;
    transform: translateY(10px); /* Subtiele schuif omhoog */
    transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s; /* 0.2s vertraging */
    padding: 10px 0 40px 0;
}

/* Wanneer de map open is, fadet de tekst in */
.nh-accordion-item.is-open .nh-content-inner {
    opacity: 1;
    transform: translateY(0);
}
/* 1. De Basis: Plusje */
.nh-icon {
    font-size: 1.5rem;
    font-weight: 200; /* Extra dun voor architecturale finesse */
    color: #1a1a1a;
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
    will-change: transform; /* Optimalisatie voor vloeiend rollen */
}

/* 2. De Rol-interactie op Hover */
.nh-accordion-header:hover .nh-icon {
    transform: rotate(90deg); /* Hij rolt een kwartslag */
	color: #8a7f76;
}

/* 3. De Status wanneer OPEN (De X) */
/* Hij rolt door naar 45 graden (of 135) om de X te vormen */
.nh-accordion-item.is-open .nh-icon {
    transform: rotate(135deg); 
    color: #5d544d;
}

/* 4. Hover op de X (wanneer open) */
.nh-accordion-item.is-open .nh-accordion-header:hover .nh-icon {
    transform: rotate(180deg); /* Rolt nog een stukje door */
}

/* 5. Subtiele lijn-animatie (bonus) */
.nh-accordion-item {
    position: relative;
    border-bottom: 1px solid #eee;
    transition: border-color 0.4s ease;
}
.nh-accordion-item, .nh-z-header {
    border-bottom: 1px solid #d1ccc8; /* Een warme, lichtbruine lijn */
}
.nh-accordion-item:hover {
    border-bottom-color: #C8C8C8; /* Lijn wordt zwart bij hover over het hele vak */
}















/* --- NH WERKEWIJZE / METHODE SECTIE (11-02-2026) --- */

/* ============================================================
   NH WERKWIJZE: ARCHITECTURAL GRID - DEFINITIEVE VERSIE BEWAREN
   ============================================================ */

/* 1. BASIS GRID DESKTOP (> 1024px) */
.nh-method-grid {
    width: 100%;
    border-top: 1px solid #d1ccc8; 
    margin-top: 60px;
	margin-bottom: 120px;
    box-sizing: border-box;
}

.nh-fase {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #d1ccc8;
    align-items: stretch;
}

/* Kolomverhouding 35/65 en tekst-uitlijning bovenkant */
.nh-fase-left {
    width: 35%;
    padding: 25px 40px 40px 0; /* Padding-top gelijk aan rechterkolom */
    box-sizing: border-box;
}

.nh-fase-right {
    width: 65%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #d1ccc8;
    box-sizing: border-box;
}

/* 2. SUBVAKKEN & INTERACTIE */
.nh-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #d1ccc8;
    background-color: #ffffff;
    transition: background-color 0.4s ease;
}

.nh-step:last-child { border-bottom: none; }
.nh-step:hover { background-color: rgba(249, 248, 246, 1); }

.nh-step-header {
    flex: 1;
    width: 100%;
    background: none;
    border: none;
    padding: 25px 30px 25px 30px; /* Padding-top gelijk aan linkerkolom */
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.1rem;
    color: rgb(84,73,53);
    text-align: left;
}

/* ICOON: Perfecte rotatie om eigen as */
.nh-step-header span:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 1.6rem;
    font-weight: 200;
    color: rgb(154, 140, 110);
    transform-origin: center center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.nh-step.active .nh-step-header span:last-child {
    transform: rotate(135deg);
    color: #5d544d;
}

/* CONTENT EFFECTEN */
.nh-step-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background: linear-gradient(to bottom, #f9f8f6 0%, #ffffff 100%);
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease-in-out;
}

.nh-step.active .nh-step-content { opacity: 1; }

.nh-step-content p {
    padding: 10px 30px 40px 30px;
    margin: 0;
    color: #666;
    line-height: 1.7;
    transform: translateY(15px);
    transition: transform 0.5s ease-out 0.2s;
}

.nh-step.active .nh-step-content p { transform: translateY(0); }

/* TITELS */
.nh-label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #999; display: block; margin-bottom: 10px; }
.nh-title { font-size: 1.8rem; font-weight: 400; color: #5d544d; margin: 0; line-height: 1.1; }

/* 3. RESPONSIVE FIX (TABLET & MOBIEL < 1024px) */
@media (max-width: 1024px) {
    /* VERWIJDER BOVENLIJNEN */
    .nh-method-grid, 
    .nh-accordion-section {
        border-top: none !important;
        margin-top: 20px;
    }

    .nh-fase:first-child {
        border-top: none !important;
    }

    /* STAPELING */
    .nh-fase {
        flex-direction: column;
        margin-bottom: 60px;
        border-bottom: 1px solid #d1ccc8;
    }

    .nh-fase-left {
        width: 100% !important;
        padding: 0 0 15px 0 !important;
    }

    .nh-fase-right {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid #d1ccc8; /* Lijn tussen titel en menu */
    }

    .nh-step-header {
        padding: 20px 0 !important;
    }

    .nh-step-header span:last-child {
        margin-right: 0;
        padding-right: 0;
    }

    .nh-step-content p {
        padding: 10px 0 30px 0;
    }

    .nh-title { font-size: 1.5rem; }
}