/* -------------BASE--------------- */

	:root{
		/* basis (geen project open) */
		--bg-base: #f5f4f0;
		--fg-base: #31302f;
		--logo-base: #615e5c;
		--accent-base: #ae927b;

		/* current (wordt door JS aangepast) */
		--bg: var(--bg-base);
		--fg: var(--fg-base);
		--logo: var(--logo-base);
		--accent: var(--accent-base);

		/* helper: “zachter” tekst/border op basis van fg */
		--soft-alpha: 0.65;     /* voor project-text bijvoorbeeld */
		--border-alpha: 0.25;   /* voor borders */
	}


	body {
		font-family: 'Matter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
		background-color: var(--bg);
		color: var(--fg);
		transition: background-color 2s ease, color 2s ease;
	}


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

	html {
		scroll-behavior: smooth;
	}


	main {
		margin: 0 auto;
		padding: 25px 25px 80px;
	}

	.button-right {
		display: inline-block;
		margin-left: auto;
		margin-left: 0px;
	}


	/* --- text styles --- */

		@font-face {
			font-family: 'Matter';
			src: 	url('fonts/Matter-Regular.woff2') format('woff2'),
						url('fonts/Matter-Regular.woff') format('woff');
			font-weight: 300;
			font-style: normal;
			font-display: swap;
		}

		@font-face {
			font-family: 'Matter';
			src: 	url('fonts/Matter-Medium.woff2') format('woff2'),
						url('fonts/Matter-Medium.woff') format('woff');
			font-weight: 500;
			font-style: normal;
			font-display: swap;
		}

	    @font-face {
			font-family: 'Matter Mono';
			src: 	url('fonts/MatterMono-Regular.woff2') format('woff2'),
						url('fonts/MatterMono-Regular.woff') format('woff');
			font-weight: 400;
			font-style: normal;
			font-display: swap;
	    }

	    .mono {
			font-family: 'Matter Mono', monospace;
			text-transform: uppercase;
			letter-spacing: 0.1em;
	    }

	    .difference-text2{
			background:transparent;
			color: rgba(100,100,100,1);
	      	mix-blend-mode: ; 
	      	opacity: 1;
	        transform: translateY(0px);
		}

		.difference-text{
			background:transparent;
			color: rgba(255,255,255,1);
			mix-blend-mode: difference; 
			opacity: 1;
		}


		a {
			position: relative;
			text-decoration: none;
			color: var(--accent);
			transition:     color 1s ease;
		}

		a:hover {
			color: var(--fg);
		}






/* ------------- TOP / LANDING PAGE --------------- */

	/* --- main logo / top logo --- */

		.site-logo {
			position: absolute;
			top: 10px;
			left: 10px;
			z-index: 20;
			display: inline-flex;
			align-items: center;
			color: #f5f4f0;
			opacity: 1;
			font-size: 0;
			transform-origin: top left;
			transition:
			opacity 0.5s ease,
			transform 0.5s ease,
			filter 0.5s ease;
			filter: drop-shadow(0 50px 50px rgba(0,0,0,0.1));
		}

		.site-logo svg {
			display: block;
			height: 25vmin;

		}




	
	/* --- Hero slideshow top images --- */

	    .hero {
			height: 110vh;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			overflow: hidden; 

	    }

	    .hero-slides {
			position: relative;
			flex: 1;
			overflow: hidden;
			width: 100%;
			height: 100%;
			-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
			mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-size: 100% 100%;
			mask-size: 100% 100%;
	    }


	    .hero-slide {
			position: absolute;
			inset: 0;
			background-size: cover;
			background-position: center;
			opacity: 0;
	  		filter: blur(0px);
	    	transition: opacity 1.5s ease, filter .5s ease;
	    	will-change:opacity, filter;
	    }

	    .hero-slide.is-active {
			display: block;
			opacity: 1;
			filter: blur(0px);
    	}

		.hero-caption {
			position: absolute;
			z-index: 2;
			right: 20px;
			bottom: 20px;
			max-width: min(50vw);
			color: black;
			opacity: 1;
			text-align: right;           /* alles rechts uitlijnen */
			line-height: 1;
      	    font-family: 'Matter Mono', monospace;
  			font-size: 11.5px;
  			text-transform: uppercase;
  			letter-spacing: 0.1em;
		}

		/* alles gewoon inline laten lopen, dan breekt het netjes */
		.caption-title,
		.caption-sub,
		.caption-arrow {
			display: inline;
		}

		.caption-title a{
			color: black;
			opacity: .6;
						transition:
				opacity 0.4s ease;
		}

		.caption-title a:hover{
			color: black;
			opacity: 1;
			transition:
				opacity 0.4s ease;
		}
	

		.caption-arrow {
			margin: 0 0.6em;
		}



/* ------------- OVERLAY / 'HEADER' --------------- */

	/* --- logo-fixed --- */

		.logo-header {
			position: fixed;
			top: 25px;
			left: 25px;
			width: 120px;
			z-index: 40;
			color: var(--logo);
			opacity: 0;
			pointer-events: none;
			transition: opacity 3s ease-out, color 2s ease, filter 2s ease;
			

		}

		.logo-header.is-visible {
		  opacity: .85;
		  filter: drop-shadow(2px 2px 30px var(--bg)) ;
		}

		.logo-header.is-fast-hide {
		  transition: opacity 0.0s ease-out;
		}


	/* --- scroll down button --- */

		.scroll-down-btn {
			position: fixed;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%) translateY(0px);
			z-index: 50;
			height: 30px;
			width: 30px;
			font-family: 'matter' ;
			font-weight: 100;
			font-size: 16px;
			text-transform: uppercase;
			border: 0px solid rgba(255,255,255,0.1); 
			border-radius: 999px;
			cursor: pointer;
			background-color: var(--logo);
			color: var(--bg);
			backdrop-filter: blur(0px);
			filter: drop-shadow(1px 1px 5px rgba(0,0,0,0));
			cursor: pointer;
			transition: opacity 0.6s ease, background-color 0.6s ease, filter 0.6s;   /* ← deze toevoegen */

			  opacity: 0;
  pointer-events: none;
		}

		.scroll-down-btn.is-visible {
  opacity: .85;
  pointer-events: auto;
  filter: drop-shadow(2px 2px 30px var(--bg)) ;
}


		.scroll-down-btn:hover {
			background-color: var(--accent);
			color: var(--bg);
			opacity: 1;
			transition:
				transform 0.4s ease,
				background-color 0.6s ease,
				opacity 0.6s ease;
			mix-blend-mode: normal;
		}


		.scroll-down-btn.is-up {
			transform: translateX(-50%) rotate(180deg);
		}





/* ------------- INTRO --------------- */
	.intro {

		font-weight: 500;
		max-width: 100vw;
		margin-bottom: 0px;
		font-size: clamp(28px, 5vmin, 40px);
		text-align: left;
		line-height: 1.1;
		z-index: 2;
		display:flex;
		flex-direction:column;
		align-items:flex-start; /* mag blijven staan */
		transform: translateY(-100px); 
	}

    .intro a{
    }

	.intro-fade {
	  opacity: 0;
	  transform: translateY(0px);
	  transition: opacity 3s ease, transform 2s ease;
	}

	.intro-fade.is-visible {
	  opacity: 1;
	  transform: translateY(0);
	}

	.intro .intro-fade p {
  margin: 0 0 16px 0;
}

.intro .intro-fade p:last-child {
  margin-bottom: 0;
}


	/* --- intro-knoppen --- */

		.intro-actions {
			margin-top: 24px;
			display: flex;
			gap: 12px;
			justify-content: flex-end;   /* of flex-start als je ze links wil */
			margin-bottom: 0px;
			color: var(--fg);
		} 

		.intro-actions a::after{
		    height: 0px;
		    background: none;
		} 


		.button {
			font-family: 'matter';
			font-weight: 200;
			margin-top: 0px;
			margin-bottom: 15px;
			padding: 8px 16px 7px 16px;
			font-size: 14px;
			border-radius: 999px;
			border: 1px solid var(--fg);
			text-decoration: none;
			cursor: pointer;
			transition: background 1s ease, color 1s ease, opacity 1s ease, border 1s;
			mix-blend-mode: none;
			opacity: 1;
		}


		.button.btn2 {
			background: var(--fg);
			color: var(--bg);
			border: 0px solid var(--fg);
		}

				.button.btn2:hover {
					background: var(--accent);
					border: 0px solid var(--accent);
				}


		.button.btn1 {
			background: transparent; 
			color: var(--fg);
			border: 1px solid var(--fg);
		}

				.button.btn1:hover {
					color: var(--accent);
					border: 1px solid var(--accent);
				}



/* ------------- PROJECTS --------------- */

	.projects {
		margin-top: 64px;
		margin-bottom: 25px;
		font-size: 18px;
		color: var(--fg);
	}

	
	/* --- project header --- */

		.projects-header {
			font-family: 'Matter Mono', monospace;
			font-size: 10px;
			opacity: 1;
			text-transform: uppercase;
			letter-spacing: 0.1em;
			border-bottom: 0;
			font-weight: 500;
		}

		.project-arrow::before {
			content: "↓";
			font-size: 20px;
			opacity: 1;
			display: inline-block;          /* nodig voor transform */
			transition: transform 0.75s ease, opacity 0.2s ease;
		}

		.project-row.is-open .project-arrow::before {
			opacity:1;
			font-size: 28px;
  transform: rotate(45deg);
  content:"+";
		}

				.project-row.is-open .project-arrow:hover {
color: var(--accent);
transform: rotate(-1deg);
		}

		.project-info {
			display:contents; /* wrapper telt niet mee, title en client worden weer echte grid-items */
		}


	/* --- project kolommen opdeling --- */

		.projects-header,
		.project-row {
			display: grid;
			grid-template-columns: 2fr 2fr 1fr auto 30px;
			grid-template-areas: " title client year spacer arrow";
			gap: 20px;
			align-items: center;
			padding: 12px 0;
		}

		.ph-title, .project-title {
			grid-area: title;
		}

		.ph-client, .project-client {
			grid-area: client;
		}

		.ph-year, .project-year {
			grid-area: year;
		}

		.spacer {
		grid-area: spacer;
		}

		.ph-arrow, .project-arrow {
			grid-area: arrow;
		}


	/* --- project titels / project rijen --- */

		.project-row {
			font-size: 18px;
			cursor: pointer;
			border-top: 1px solid color-mix(in srgb, var(--fg) calc(var(--soft-alpha) * 100%), transparent);
			opacity: 1;
			transition:  .5s ease;
			font-weight: 500;
			color: var(--fg);
		}

		/* hover: rij wordt helder */
		.project-row:hover {
			color: var(--accent);
			font-weight: 500;
		}

		.project-row:last-child {
			border-bottom: none;
		}

		/* als er een project open is: fade alle andere rows */
		.projects.has-open .project-row {
			color: color-mix(in srgb, var(--fg) calc(var(--soft-alpha) * 80%), transparent);
			transition: opacity .5s ease, color .5s ease;
		}

		.projects.has-open .project-row:hover {
		opacity: 1;
		color: var(--accent);

		}

		.projects.has-open .project-row.is-open {
		opacity: 1;
		color: var(--fg);
		}

		/* --- thumbnail voor hover en mobiele versie --- */
			.project-thumb {
				display:none;      /* desktop nog verbergen */
			}

			.project-thumb img {
				display:block;
				width:80px;
				height:60px;
				object-fit:cover;
			}


			.project-hover-thumb {
				position: fixed;
				top: 0;
				left: 0;
				width: 220px;
				aspect-ratio: 4 / 3;
				background-size: cover;
				background-position: center;
				pointer-events: none;
				z-index: 60;
				opacity: 0;
				transform: scale(0.9);
				transition:
				opacity 0.18s ease-out,
				transform 0.18s ease-out;
			}

			.project-hover-thumb.is-visible {
				opacity: 1;
				transform: scale(1);
			}


	/* --- project detail / content --- */

		.project-details {
			grid-column: 1 / -1;
			overflow:hidden;
			height:0;
			opacity:0;
			padding-top:0;
			padding-bottom:0;
			transition:
			height .8s ease,
			opacity 1s ease,
			padding 5s ease;
			border-bottom: 0px solid var(--fg);
		}

		.project-details.is-open {
			display: flex;
			flex-wrap: wrap;
			gap: 80px;
			align-items: flex-start;
			justify-content: space-between; 
			opacity:1;
			margin-top: 0px;
		}

		/* -- project open dicht animaties -- */

			/* inhoud van opengeklapt project: eerst onzichtbaar */
				.project-details .project-left,
				.project-details .project-images {
					opacity: 0;
					transition: opacity 1s ease;
				}

			/* zodra .is-open erop zit: inhoud infaden */
				.project-details.is-open .project-left,
				.project-details.is-open .project-images {
					opacity: 1;
					transition-delay: 0.6s;   /* wacht tot het paneel is uitgevouwen */
				}

			/* tijdens sluiten: eerst inhoud verbergen */
				.project-details.closing .project-left,
				.project-details.closing .project-images, 
				.project-details.closing .project-images img.is-active {
					opacity: 0;
					transition: opacity .5s ease; /* fade duur */
				}

			/* tijdens sluiten: eerst inhoud verbergen */
				.project-details.opening .project-left,
				.project-details.opening .project-images {
					opacity: 0;
					transition-delay: 0s;
				}



			/* ???	*/

			.projects-extra {
				overflow: hidden;
				height: 0;                     /* start ingeklapt */
				transition: height 5s ease;  /* bepaalt hoe smooth het rolt */
			}

			.projects-extra.is-expanded {
				/* height wordt in JS dynamisch gezet, deze class is meer een vlag */
			}

		/* -- project linkerkant: project tekst + project credits -- */

			.project-left {
				flex: 1 1 0;
				max-width: 550px;
				min-height: 0;
				margin-top: 20px;
			}


			.project-text {
				line-height: 1.3;
				font-weight: 100;
				font-size: 16px;
				color: color-mix(in srgb, var(--fg) calc(var(--soft-alpha) * 120%), transparent);
			}

					.project-text a{
						color: var(--fg);
					}

					.project-text a:hover{
						color: var(--accent);
					}


			.project-text p {
			margin: 0 0 16px 0;
			}

			.project-text p:last-child {
			margin-bottom: 0;
			}

	


			.project-credits {
				margin-top: 35px;
				font-family: 'matter mono';
				font-weight: 200;
				font-size: 9.5px;
				letter-spacing: 0px;
				line-height: 1.30;
				text-transform: uppercase;
				display: block;
				color: color-mix(in srgb, var(--fg) calc(var(--soft-alpha) * 100%), transparent);
				gap:10px;
				margin-bottom: 50px;
				opacity: 1;
			}

						/* note iets compacter */
			.project-credits p {
			margin: 0 0 12px 0;
			}	

			.project-note p:last-child { margin-bottom: 0; }

			.project-credits .project-note p { 
				margin: 0 0 12px 0;
			  color: color-mix(in srgb, var(--fg) calc(var(--soft-alpha) * 115%), transparent); }


			.project-credits a { 
			  color: var(--fg); }

			.project-credits a:hover { 
			  color: var(--accent); }






.project-credits-inline {
  color: color-mix(in srgb, var(--fg) calc(var(--soft-alpha) * 115%), transparent);
  font-weight: 200;
}

.project-credits-inline strong {
  font-weight: 200;
  color: var(--fg);
  text-decoration: none;
}

.project-credits-inline a {
  color: color-mix(in srgb, var(--fg) calc(var(--soft-alpha) * 115%), transparent);
}

.project-credits-inline a:hover {
  color: var(--accent);
}

.credit-group { white-space: normal; }





		/* -- project rechterkant: foto en video slideshow -- */

			/* FOTO'S */
			.project-images {
				position: relative;
				width: 60vw;
				min-height: 420px;
				aspect-ratio: 3 / 2;
				cursor: pointer;
				overflow: hidden;
				margin-bottom: 50px;
				margin-top: 20px;
			}

			/* alle slides overlappen en beginnen onzichtbaar */
			.project-images img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: left top;
				opacity: 0;
				transition: opacity .5s ease; /* fade duur */
				transform: none;              /* geen schaal */
			}


			.project-images .project-slide {
				position: absolute;
				top: 0;
				left: 0;
				object-fit: cover;
				object-position: left top;
				opacity: 0;
				transition: opacity .5s ease; /* fade duur */
				transform: none;              /* geen schaal */
			}

			/* actieve slide (bovenop en zichtbaar) */
			.project-images img.is-active {
				position: relative;  /* JS zet dit ook */
				opacity: 1;
			}


			.project-images .project-slide.is-active {
				opacity: 1;
				position: relative;
			}

			/* GALLERY FRAME */
			.project-images.project-gallery{
				position: relative;
				width: 59.5vw;
				min-height: 420px;
				height: auto;
				aspect-ratio: 3 / 2;   /* 1000x667 ≈ 3:2, pas aan als je wilt */
				overflow: hidden;
			}

.project-images.project-gallery .project-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

			.project-images.project-gallery .project-slide.is-active{
				opacity: 1;
				pointer-events: auto;
			}

			/* pijltjes aan de randen */
.project-images {
  cursor: pointer; /* fallback */
}

.project-images.is-left-side {
  cursor: url("images/arrow-left.svg") 12 12, w-resize;
}

.project-images.is-right-side {
  cursor: url("images/arrow-right.svg") 12 12, e-resize;
}




		/* -- project buttons show more toggle -- */

			.projects-button-wrap {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
			}

			.projects-toggle {
				font-family: 'matter';
				font-weight: 200;
				margin-top: 15px;

				padding: 8px 16px 7px 16px;
				font-size: 14px;
				text-transform: none;
				letter-spacing:0em;
				border-radius: 999px;
				border: 1px solid var(--fg);
				background: transparent;
				cursor: pointer;
				display: inline-block;
				align-self: flex-start; /* <<< dit zorgt dat hij rechts staat */
				transition: background .18s ease, color .18s ease, opacity .5s, border .6s;
				color: var(--fg);
				opacity: 1;
			}

			.projects-toggle:hover {
				opacity: 1;
				color: var(--accent);
				border: 1px solid var(--accent);
			}

			.projects-toggle::first-letter {
				text-transform: uppercase;
			}




    /* --------------------
       ABOUT
    -------------------- */

    .after-about {
      padding: 0px 25px 25px;
	  margin-top: 150px;
    }


  .about {
 
      margin-bottom: 0px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  align-items: start;
}





/* ------------- ABOUT --------------- */

	.about-header {
		font-size: 10px;
		font-family: 'Matter Mono', monospace;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		opacity: 0.8;
		margin-bottom: 14px;
		
	}

	.about img {
		display: block;
		width: 100%;
		max-width: 600px;        /* blijft mooi */
		height: auto;
		object-fit: cover;
		border-radius: 0;        /* of 12px als je afgerond wilt */
		margin: auto;
		padding-top: 0px;
		padding: 11px 50px 50px 50px;
	}

	.about-text {
		font-size: 22px;
		font-weight: 100;
		line-height: 1.25;
		max-width: 800px;
		opacity: 1;
		margin-bottom: 40px;
	}

	.about-text a{
		color: color-mix(in srgb, var(--fg) calc(var(--soft-alpha) * 110%), transparent);
	}

		.about-text a:hover{
		color: var(--accent);
	}


	.about-text p { 
  margin: 0 0 16px 0; 
}

.about-text p:last-child {
  margin-bottom: 0;
}


	.about-animated {
		opacity: .5;
		transform: translateY(0);
		transition: opacity 3s ease-out, transform 2s ease-out;
	}

	.about-animated.is-visible {
		opacity: 1;
		transform: translateY(0px);
		
	}




/* ------------- FOOTER --------------- */

	footer {
		height: 87vh;
		margin-top: 100px;
		padding-top: 30px;
		border-top: 0px solid black;
		font-size: 28px;
		font-weight: 500;
		line-height: 1.15;
		text-decoration: none;
		color: var(--fg);
		transition: color 1s;
	}

	footer a{
		opacity: 1;
		color: var(--fg);		
	} 

	footer a:hover{
		opacity: 1;
		color: var(--accent);		
	}


	.footer-header {
		font-size: 10px;
		font-family: 'Matter Mono', monospace;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		opacity: 1;
		padding-bottom: 8px;
		margin-top: 15px;
	}

	/* footer opdeling	*/
		.fg-spacer { grid-area: fgspacer; }

		.footer-grid {
			display: grid;
			grid-template-columns: 400px 300px auto clamp(150px, 250px, 250px);
			grid-template-areas: "fg1 fg2 fgspacer fg3";
			gap: 16px;
			align-items: flex-start;
			padding: 0;
		}

		.fg1 { grid-area: fg1; }
		.fg2 { grid-area: fg2; }
		.fgspacer { grid-area: fgspacer;  }
		.fg3 { grid-area: fg3; }


		/* footer opdeling mobile 1000px	*/
			@media (max-width: 1000px) {
				.footer-grid {
				grid-template-columns: 1fr;
				grid-template-areas:
				"fg1"
				"fg2"
				"fg3";
				}

				.fgspacer {
				display: none;
				}
			}


	.End {
		position: absolute;
		z-index: 2;
		right: 20px;
		bottom: 20px;
		max-width: min(40vw);
		font-size: 10px;
		color: ;
		opacity: .8;
		text-align: left;
		line-height: 0.9;
		font-family: 'Matter Mono', monospace;
		font-size: 9px;
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}




/* vangt hoogte op bij auto-close zodat scroll niet inzakt */
.accordion-close-buffer {
  height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: height 0.6s ease;
}


/* --------- RESPONSIVE / MOBILE --------------------------------------------------------------------------- */

	@media (max-width: 820px) {


		/*	BASE (responsive / mobile)	*/
			main {
				padding: 20px 20px 60px;
			}


		.site-logo svg {
			height: 30vmin;
		}	

		.hero {
			height: 100vh;
			height: 100svh;     /* iOS: stabiel, ‘small viewport’ */
  			height: 100dvh;     /* modern: dynamisch mee met balken */
		}

		.scroll-down-btn {
			bottom: 40px;
			transform: translateX(-50%) translateY(50%);
		}

				.scroll-down-btn.is-up {
			transform: translateX(-50%) translateY(50%) rotate(180deg);
		}


		/*	HEADER (responsive / mobile)	*/
			.logo-header {
				left: 20px
			}

					.logo-header.is-visible {
		  opacity: .95;
		}


		/*	TOP / LANDING PAGE / HERO (responsive / mobile)	*/
			.hero-caption {
				min-height: 4.4em; /* beetje extra voor 2–3 regels */
				max-width: min(35vw);
				  display: flex;
  align-items: flex-end;
			}

		/*	INTRO  (responsive / mobile)	*/
			.intro {
				transform: translateY(0px); 
			}

			.intro-actions {
				flex-direction: column;
				align-items: flex-start;
				gap: 8px;
				margin-bottom: 8px;
			}

			.intro-actions .button {
				margin-bottom: 5px;
			}


		/*	PROJECTS   (responsive / mobile)	*/

			.projects{
				margin-top: 150px;
			}


			
			/*	PROJECTS header  (responsive / mobile)	*/
				.projects-header {
					grid-template-columns: 2fr 1fr 110px;
					grid-template-areas: "title year thumb";
					align-items: baseline;
				}

				.ph-title  { grid-area:title; }
				.ph-client { display:none; }
				.spacer    { display:none; }
				.ph-year   { grid-area:year; justify-self:end; }
				.ph-arrow {
					grid-area:thumb;
					width:90px;      /* maakt de kolom net zo breed als de echte thumbs */
					display:block;   /* heel belangrijk, anders blijft hij onzichtbaar */
				}

				.project-arrow {
					display:none;
				}


			/*	PROJECTS rij / titels  (responsive / mobile)	*/	

				.project-row {
					position: relative;
					grid-template-columns: 2fr 1fr auto;
					grid-template-areas: "info year thumb";
					gap:20px;
					align-items:start;
				}

				.project-info {
					grid-area:info;
					display:flex;
					flex-direction:column;
					gap:2px;
				}

				.project-title {
					font-weight:600;
					line-height:1.1;
				}

				.project-client {
					font-weight:200;
					line-height:1.1;
				}

				.project-year {
					grid-area:year;
					justify-self:end;
					font-weight:600;
				}

				.project-thumb {
					grid-area:thumb;
					display:block;
					justify-self:end;
					transition:
					opacity 1s ease,
					transform 0s ease;   /* voor het “springen” */
				}

				/* ✦ als project open is: thumbnail weg-animatie */
				.project-row.is-open .project-thumb {
					opacity: 0;
					transform: none;  /* lijkt alsof hij naar beneden zakt */
					pointer-events: none;
					transition:
					opacity 0.1s ease-out 0.5s,
				}

				.project-thumb img {
					width:90px;
					height:70px;
					object-fit:cover;
					display:block;
					opacity: .8;
			
				}

				  .projects.has-open
  .project-row:not(.is-open)
  .project-thumb {
    opacity: 0.5;
    transition: opacity 0.4s ease;
  }

  				  .projects.has-open
  .project-row:not(.is-open) {
    opacity: 0.5;
    transition: opacity 0.4s ease;
  }

				.project-row.is-open .project-arrow {
					position: absolute;
					right: 0;
					top: 10px;
					width: 28px;
					height: 28px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 25px;
					opacity: 1;
					transform: rotate(0deg); /* pijl naar boven om te sluiten */
					z-index: 10;
				}



			/*	PROJECTS details / content  (responsive / mobile)	*/

				.project-left {
				order: 2;
				}	


				.project-details.is-open {
				flex-direction: column;
				gap: 25px;
				margin-bottom: 0px;

				}

				.project-text{
				margin-top: -25px;
				}

				.project-left,
				.project-images {
				max-width: 100%;
				flex: 0 0 auto;
				}

				.project-credits {
				order: 2;
				margin-top: 25px;
				margin-bottom: 50px;
				}

				/* eerst het beeld, dan de tekst */
				.project-images {
				order: 1;
				margin-bottom: 25px;
				margin-top: 5px;
				width: 100%;
				}

				.project-images.project-gallery{
				    min-height: 0;
					width: 100%;
					aspect-ratio: 3 / 2;
					height: auto;
				}

				/* paneel zelf: alleen hoogte en padding animeren, geen opacity-jump */
				.project-details {
					transition: height 0.9s ease, padding 1s ease;
					opacity: 1; /* container zelf niet laten faden op mobiel */
				  padding-top: 0;
					padding-bottom: 0;
				}

				/* inhoud van opengeklapt project: start onzichtbaar */
				.project-details .project-left,
				.project-details .project-images {
					opacity: 0;
					transition: opacity 0.4s ease;
					transition-delay: 0s;  /* geen vertraging hier */
				}

				/* zodra .is-open erop zit: inhoud pas NA het uitklappen infaden */
				.project-details.is-open .project-left,
				.project-details.is-open .project-images {
					opacity: 1;
					transition-delay: 1s; /* ≈ zelfde als height-transition hierboven */
				}


				.project-details.closing .project-left,
  			.project-details.closing .project-images {
    				opacity: 0;
    				transition-delay: 0s;
  			}

		/*	ABOUT (responsive / mobile)	*/

			.after-about {
			padding: 0px 20px 20px;
			margin-top: 100px;
			}

			.about {
			grid-template-columns: 1fr;
			grid-template-areas:
			"abouttext"
			"aboutphoto";
			gap: 24px;
			}

			.about-text {
				font-size: 20px;
			}



			.about-photo img {
			width: 100%;
			height: auto;
			padding: 20px;
			
			}


		/*	FOOTER (responsive / mobile)	*/

			footer{
			height: 85dvh;
			height: 85svh;
			}     

				.End {
		right: 30px;
		bottom: 30px;
				font-size: 8.5px;

	}