/*
	Aestronaut additions on top of the Dimension template (main.css).
	Brand colours:
		--ae-yellow  #fff205  accents
		--ae-dark    #163305  backgrounds
		--ae-green   #203d05  buttons / gradients
*/

:root {
	--ae-yellow: #fff205;
	--ae-dark: #163305;
	--ae-green: #203d05;
	--ae-yellow-soft: rgba(255, 242, 5, 0.12);
	--ae-ease: 0.325s ease-in-out;
}

/* ---------- Base colours ---------- */

	body {
		background: var(--ae-dark);
	}

	/* The template only sets the font on text and form fields; buttons need it too */
	button {
		font-family: "Source Sans Pro", sans-serif;
	}

	/* Bold button text for readability (600 = the bold weight the site loads) */
	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		font-weight: 600;
	}

	/* Page background: green gradient with depth — a soft warm glow top left, a slightly darker
	   bottom right and a fine film grain. The grain uses soft-light blending (grey = no change),
	   so it adds texture without making the green lighter. All CSS, nothing extra to download. */
	#main article {
		position: relative;
		isolation: isolate;	/* keeps the grain layer behind the text but on top of the green */
		background-color: var(--ae-dark);
		background-image:
			radial-gradient(circle at 12% 0%, rgba(255, 242, 5, 0.08), transparent 42%),
			radial-gradient(ellipse at 80% 115%, rgba(0, 0, 0, 0.4), transparent 60%),
			linear-gradient(to bottom right, var(--ae-green), var(--ae-dark));
	}

	#main article::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E");
		background-size: 220px 220px;
		mix-blend-mode: soft-light;
		opacity: 0.35;	/* grain strength */
		z-index: -1;
		pointer-events: none;
	}

	a:hover {
		color: var(--ae-yellow);
	}

	::selection {
		background: var(--ae-yellow);
		color: var(--ae-dark);
	}

	.visually-hidden {
		position: absolute !important;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

/* ---------- Faster background fade-in on page load (template: 2.5s after 0.75s) ---------- */

	#bg:before {
		transition: background-color 1.25s ease-in-out;
		transition-delay: 0.375s;
	}

	/* Same background photo as WebP: about 120 KB instead of 400 KB (preloaded in index.html) */
	#bg:after {
		background-image: url("../../images/background/space-background-2_Green.webp");
	}

/* ---------- Yellow accents ---------- */

	/* Primary buttons */
	input[type="submit"].primary,
	input[type="reset"].primary,
	input[type="button"].primary,
	button.primary,
	.button.primary {
		background-color: var(--ae-yellow);
		color: var(--ae-dark) !important;
		box-shadow: none;
	}

	input[type="submit"].primary:hover,
	button.primary:hover,
	.button.primary:hover {
		background-color: #fff76a !important;
	}

	/* Default buttons */
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover,
	button:hover,
	.button:hover {
		background-color: var(--ae-yellow-soft);
	}

	/* Menu */
	#header nav ul li a:hover {
		background-color: var(--ae-yellow-soft);
		color: var(--ae-yellow);
	}

	/* Equal-width menu items, so the yellow centre line falls between items 2 and 3 */
	@media screen and (min-width: 481px) {
		#header nav ul {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
		}

		#header nav ul li a {
			min-width: 0;
			width: 100%;
			text-align: center;
		}
	}

	/*
		Fixed header sizes, so the home screen looks identical in English and Dutch.
		(The template sizes the logo at 50% of the box, and the box grows with the tagline,
		so a longer tagline made the logo bigger.) Sizes match the English version.
	*/
	@media screen and (min-width: 737px) {
		#header .content {
			width: 46.5rem;
		}

		#header .content img {
			width: 21rem;
			max-width: 100%;
		}

		#header nav ul {
			grid-template-columns: repeat(4, 10rem);
		}
	}

	/* Social icons */
	ul.icons li a:hover {
		background-color: var(--ae-yellow-soft);
		color: var(--ae-yellow);
	}

	/* Form fields */
	input[type="text"]:focus,
	input[type="email"]:focus,
	select:focus,
	textarea:focus {
		border-color: var(--ae-yellow);
		box-shadow: 0 0 0 1px var(--ae-yellow);
	}

	input[type="checkbox"]:checked + label:before,
	input[type="radio"]:checked + label:before {
		background: var(--ae-yellow) !important;
		border-color: var(--ae-yellow) !important;
		color: var(--ae-dark);
	}

	input[type="checkbox"]:focus-visible + label:before,
	input[type="radio"]:focus-visible + label:before {
		border-color: var(--ae-yellow);
		box-shadow: 0 0 0 1px var(--ae-yellow);
	}

	/* Close button of the pages */
	#main article .close:hover:before {
		background-color: var(--ae-yellow-soft);
	}

/* ---------- Text density on pages ---------- */

	/* Slightly tighter line spacing than the template's 1.65, so more fits on screen */
	#main article,
	.lightbox-info {
		line-height: 1.5;
	}

/* ---------- Language switch ---------- */

	html[lang="en"] [data-lang="nl"],
	html[lang="nl"] [data-lang="en"] {
		display: none !important;
	}

	#lang-switch {
		position: fixed;
		top: 1rem;
		right: 1rem;
		z-index: 10010;
		display: flex;
		border: solid 1px rgba(255, 255, 255, 0.5);
		border-radius: 4px;
		overflow: hidden;
		background: rgba(22, 51, 5, 0.6);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		opacity: 1;
		transition: opacity 1s ease-in-out;
	}

	body.is-preload #lang-switch {
		opacity: 0;
	}

	#lang-switch button {
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		height: 2rem;
		line-height: 2rem;
		padding: 0 0.75rem;
		font-size: 0.7rem;
		letter-spacing: 0.2rem;
		color: #ffffff !important;
	}

	#lang-switch button + button {
		border-left: solid 1px rgba(255, 255, 255, 0.5);
	}

	#lang-switch button.is-active {
		background: var(--ae-yellow);
		color: var(--ae-dark) !important;
		font-weight: 600;
	}

	/* While a project window is open, its own switch (top left of the window) takes over */
	body.is-lightbox-open #lang-switch {
		opacity: 0;
		pointer-events: none;
	}

	/* Phones & small tablets: with a page open, the switch sits at the top right like the logo
	   at the top left, and slides behind the page when scrolling, so it never covers text */
	@media screen and (max-width: 1000px) {
		body.is-article-visible #lang-switch {
			z-index: 2;
		}

		/* Let taps on the logo and switch through the (otherwise empty) page layer */
		body.is-article-visible #wrapper {
			pointer-events: none;
		}

		body.is-article-visible #wrapper #main article {
			pointer-events: auto;
		}
	}

	/* Language switch inside the project window */
	/* Top right, just left of the close (X) button, vertically centred on it */
	.lightbox-lang {
		position: absolute;
		top: 2rem;
		transform: translateY(-50%);
		right: 4rem;
		z-index: 1;
		display: flex;
		border: solid 1px rgba(255, 255, 255, 0.5);
		border-radius: 2px;
		overflow: hidden;
	}

	/* Same height, text size and letter-spacing as the category label (left of the window) */
	.lightbox-lang button {
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		height: calc(0.65rem * 1.65 + 0.2rem - 2px); /* label: font × line-height + padding, minus the 1px borders */
		line-height: calc(0.65rem * 1.65 + 0.2rem - 2px);
		padding: 0 0.6rem;
		font-size: 0.65rem;
		letter-spacing: 0.2rem;
		color: #ffffff !important;
	}

	.lightbox-lang button + button {
		border-left: solid 1px rgba(255, 255, 255, 0.5);
	}

	.lightbox-lang button.is-active {
		background: var(--ae-yellow);
		color: var(--ae-dark) !important;
		font-weight: 600;
	}


	/* Long headings: tighter letter-spacing on small screens so they don't run off the edge */
	@media screen and (max-width: 480px) {
		#main article h2.major,
		.lightbox-info h2 {
			letter-spacing: 0.25rem;
			overflow-wrap: break-word;
		}
	}

/* ---------- Pages: same width + page menu ---------- */

	/* All pages share one width (the home screen is not affected) */
	#main article {
		width: 50.5rem;
	}

	/* Small page menu in the top-left corner of every page (built by aestronaut.js from the home menu) */
	.page-nav {
		position: absolute;
		top: 1.55rem;
		left: 2.5rem;
		right: 4.5rem;
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem 1.5rem;
	}

	.page-nav a {
		font-size: 0.6rem;
		font-weight: 600;
		letter-spacing: 0.2rem;
		line-height: 1.6;
		text-transform: uppercase;
		white-space: nowrap;
		color: rgba(255, 255, 255, 0.55);
		border-bottom: solid 1px transparent;
		padding-bottom: 0.1rem;
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	}

	.page-nav a:hover {
		color: var(--ae-yellow);
		border-bottom-color: transparent;
	}

	.page-nav a.is-current {
		color: #ffffff;
		border-bottom-color: var(--ae-yellow);
		pointer-events: none;
	}

	@media screen and (max-width: 736px) {
		/* On phones the menu takes two lines, so the page content starts a bit lower,
		   and extra room at the bottom keeps the last lines away from the edge */
		#main article {
			padding-top: 5.25rem;
			padding-bottom: 2.5rem;
		}

		body.is-article-visible #wrapper {
			padding-bottom: 2.5rem;
		}

		.page-nav {
			top: 1.45rem;
			left: 2rem;
			right: 4rem;
			gap: 0.35rem 1.1rem;
		}
	}

	@media screen and (max-width: 480px) {
		.page-nav {
			left: 1.5rem;
			gap: 0.35rem 0.9rem;
		}

		.page-nav a {
			letter-spacing: 0.12rem;
		}
	}

/* ---------- Small logo (top left, on pages) ---------- */

	#page-logo {
		position: fixed;
		top: 1rem;
		left: 1.25rem;
		z-index: 10010;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		border: 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.25rem);
		transition: opacity var(--ae-ease), transform var(--ae-ease), visibility 0s linear 0.325s;
	}

	/* Fades in together with the page, fades out when going back home */
	body.is-article-visible #page-logo {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity var(--ae-ease) 0.1s, transform var(--ae-ease) 0.1s, visibility 0s;
	}

	.page-logo-icon {
		display: flex;
		align-items: center;
		width: 2.75rem;
	}

	.page-logo-icon img {
		width: 100%;
	}

	body.is-article-visible #page-logo:hover {
		opacity: 0.8;
	}

	/* Smaller screens: there is no free space next to the page, so the page moves down below the logo.
	   The logo sits behind the page, so when scrolling the page slides over it instead of the logo
	   covering the text. (Tapping it still goes home: a tap outside the page closes it.) */
	@media screen and (max-width: 1000px) {
		body.is-article-visible #wrapper {
			padding-top: 4.75rem;
		}

		#page-logo {
			z-index: 2;
		}
	}

	@media screen and (max-width: 480px) {
		.page-logo-icon {
			width: 2.4rem;
		}
	}

/* ---------- About me: three photos (same size as the template's single photo) ---------- */

	.image.main.triple {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 0.5rem;
		width: 100%;
		aspect-ratio: 1500 / 633;
		margin: 0 0 2rem 0;
	}

	.image.main.triple:before {
		display: none;
	}

	.image.triple .tile {
		position: relative;
		overflow: hidden;
		border-radius: 4px;
	}

	/* Same soft overlay as the template's photos */
	.image.triple .tile:before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		background: url("../../images/overlay.png"), rgba(19, 21, 25, 0.25);
		opacity: 0.5;
		pointer-events: none;
	}

	.image.triple img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
		/* --zoom (set per photo in index.html) zooms a photo in, around its transform-origin */
		transform: scale(var(--zoom, 1));
		transition: transform 0.6s ease;
	}

	.image.triple .tile:hover img {
		transform: scale(calc(var(--zoom, 1) * 1.04));
	}

	@media screen and (max-width: 480px) {
		.image.main.triple {
			gap: 0.35rem;
		}
	}

/* ---------- Knowledge: service blocks ---------- */

	.services {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;
		margin: 0 0 2rem 0;
	}

	.service {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		padding: 1.5rem 1.5rem 0.5rem 1.5rem;
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.04);
		border: solid 1px rgba(255, 255, 255, 0.12);
		transition: border-color var(--ae-ease), transform var(--ae-ease), background-color var(--ae-ease);
	}

	/*
		Background photo: starts in the top-left corner and fades out towards the bottom right.
		The photo itself is set per block in index.html (data-service-bg="images/skills/....webp");
		aestronaut.js turns it into --service-bg once the home screen is showing, so it doesn't slow down the start.
		Optional: --service-pos moves the visible part of the photo (default: left top),
		and --service-size zooms in (e.g. "auto 200%" = photo twice the height of the block).
		The green layer on top keeps the text readable.
	*/
	.service:before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			linear-gradient(to bottom right, rgba(22, 51, 5, 0.1), rgba(22, 51, 5, 0.55) 45%, rgba(22, 51, 5, 0.8) 75%),
			var(--service-bg, none) var(--service-pos, left top) / var(--service-size, cover) no-repeat;
		-webkit-mask-image: linear-gradient(to bottom right, #000 0%, rgba(0, 0, 0, 0.75) 45%, transparent 90%);
		mask-image: linear-gradient(to bottom right, #000 0%, rgba(0, 0, 0, 0.75) 45%, transparent 90%);
		opacity: 0.9;
		transform-origin: left top;
		transition: transform 0.6s ease, opacity var(--ae-ease);
	}

	.service:hover:before {
		transform: scale(1.05);
		opacity: 1;
	}

	.service h3,
	.service p {
		text-shadow: 0 1px 6px rgba(10, 24, 2, 0.6);
	}

	.service:hover {
		border-color: rgba(255, 242, 5, 0.6);
		background: rgba(255, 242, 5, 0.04);
		transform: translateY(-2px);
	}

	.service:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.service-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		margin-bottom: 1rem;
		border-radius: 100%;
		border: solid 1px var(--ae-yellow);
		background: rgba(22, 51, 5, 0.6);
		color: var(--ae-yellow);
		font-size: 1rem;
	}

	.service h3 {
		font-size: 0.9rem;
		margin-bottom: 0.75rem;
	}

	.service p {
		font-size: 0.9rem;
		line-height: 1.45;
		margin-bottom: 1rem;
	}

	/* Narrow two-column blocks are tall: always fill them with the photo (overrides a custom --service-size) */
	@media screen and (max-width: 736px) {
		.service:before {
			background-size: auto, cover;
		}
	}

	/* Two columns down to 541px wide (keeps the photos big enough to matter), one column at 540px and below */
	@media screen and (max-width: 540px) {
		.services {
			grid-template-columns: 1fr;
		}
	}

/* ---------- My work: filters + grid ---------- */


	.portfolio-filters {
		list-style: none;
		padding: 0;
		margin: 0 0 1.5rem 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.portfolio-filters li {
		padding: 0;
	}

	.portfolio-filters[hidden],
	.portfolio-filters li[hidden] {
		display: none !important;
	}

	.portfolio-filters button {
		font-size: 0.6rem;
		height: 2.0625rem;
		line-height: 2.0625rem;
		padding: 0 1rem;
	}

	.portfolio-filters button.is-active {
		background-color: var(--ae-yellow);
		box-shadow: inset 0 0 0 1px var(--ae-yellow);
		color: var(--ae-dark) !important;
		font-weight: 600;
	}

	/* Selected categories get a check mark: they are toggles, several can be on */
	.portfolio-filters button.is-active:before {
		content: '\f00c';
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		font-size: 0.55rem;
		margin-right: 0.5rem;
		letter-spacing: 0;
	}

	.portfolio-filters button.is-active:hover {
		background-color: #fff76a;
	}

	.portfolio-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;
		margin-bottom: 2rem;
	}

	@media screen and (max-width: 600px) {
		.portfolio-grid {
			grid-template-columns: 1fr;
		}
	}

	.portfolio-item {
		display: block;
		width: 100%;
		height: auto;
		line-height: inherit;
		padding: 0;
		margin: 0;
		text-align: left;
		text-transform: none;
		letter-spacing: normal;
		white-space: normal;
		font-size: 1rem;
		font-weight: 300;
		background: transparent !important;
		box-shadow: none;
		border-radius: 4px;
		cursor: pointer;
		opacity: 1;
		transform: none;
		transition: opacity var(--ae-ease), transform var(--ae-ease);
	}

	.portfolio-item.is-hiding {
		opacity: 0;
		transform: scale(0.97);
	}

	.portfolio-item.is-hidden {
		display: none;
	}

	.portfolio-thumb {
		position: relative;
		display: block;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 4px;
		background: var(--ae-green);
	}

	/* No thumbnail, video still or photo available: show the AE logo */
	.portfolio-thumb.is-empty {
		background: var(--ae-green) url('../../images/logo/2x/AE_Logo_Icon@2x.png') center / auto 30% no-repeat;
	}

	.portfolio-thumb.is-empty .portfolio-badge {
		display: none;
	}

	.portfolio-thumb img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.6s ease, filter 0.6s ease;
	}

	.portfolio-thumb:after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: 4px;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
		transition: box-shadow var(--ae-ease);
		pointer-events: none;
	}

	.portfolio-badge {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 3.25rem;
		height: 3.25rem;
		margin: -1.625rem 0 0 -1.625rem;
		border-radius: 100%;
		background: rgba(22, 51, 5, 0.7);
		border: solid 1px rgba(255, 255, 255, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 0.9rem;
		transition: background-color var(--ae-ease), color var(--ae-ease), border-color var(--ae-ease), transform var(--ae-ease);
	}

	/* 25% bigger than the photos icon (2.25rem → 2.8125rem), centred on the tile */
	.portfolio-badge.is-video {
		width: 2.8125rem;
		height: 2.8125rem;
		margin: -1.40625rem 0 0 -1.40625rem;
		font-size: 0.9375rem;
	}

	.portfolio-badge.is-video:before {
		margin-left: 0.15rem; /* optical centre of the play triangle */
	}

	.portfolio-badge.is-gallery {
		left: auto;
		top: auto;
		right: 0.75rem;
		bottom: 0.75rem;
		margin: 0;
		width: 2.25rem;
		height: 2.25rem;
		font-size: 0.75rem;
	}

	.portfolio-caption {
		display: block;
		padding: 0.75rem 0 0 0;
	}

	.portfolio-title {
		display: block;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.15rem;
		font-size: 0.8rem;
		line-height: 1.4;
		color: #ffffff;
		transition: color var(--ae-ease);
	}

	.portfolio-cat {
		display: block;
		font-size: 0.75rem;
		letter-spacing: 0.1rem;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.55);
		/* Close to the title: half the original visible gap (about 4px instead of 8px) */
		line-height: 1.2;
		margin-top: 0.125rem;
	}

	.portfolio-item:hover .portfolio-thumb img,
	.portfolio-item:focus-visible .portfolio-thumb img,
	.portfolio-item:hover .portfolio-preview {
		transform: scale(1.05);
	}

	/* Hover preview: silent low-res video fading in over the thumbnail */
	.portfolio-preview {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.45s ease, transform 0.6s ease;
	}

	.portfolio-thumb.is-previewing .portfolio-preview {
		opacity: 1;
	}

	.portfolio-badge {
		transition: background-color var(--ae-ease), color var(--ae-ease), border-color var(--ae-ease), transform var(--ae-ease), opacity 0.45s ease;
	}

	.portfolio-thumb.is-previewing .portfolio-badge {
		opacity: 0;
	}

	/* Photo hover preview: the project-window carousel (without buttons) over the thumbnail */
	.portfolio-preview-carousel {
		position: absolute;
		inset: 0;
		background: #0b1a03;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.45s ease;
	}

	.portfolio-thumb.is-previewing .portfolio-preview-carousel {
		opacity: 1;
	}

	/* No hover zoom on the photos inside the preview (they move instead) */
	.portfolio-item:hover .portfolio-preview-carousel img {
		transform: none;
	}

	.portfolio-item:hover .portfolio-thumb:after,
	.portfolio-item:focus-visible .portfolio-thumb:after {
		box-shadow: inset 0 0 0 2px var(--ae-yellow);
	}

	.portfolio-item:hover .portfolio-badge,
	.portfolio-item:focus-visible .portfolio-badge {
		background: var(--ae-yellow);
		border-color: var(--ae-yellow);
		color: var(--ae-dark);
		transform: scale(1.08);
	}

	.portfolio-item:hover .portfolio-title,
	.portfolio-item:focus-visible .portfolio-title {
		color: var(--ae-yellow);
	}

	.portfolio-item:focus-visible {
		outline: none;
	}

	.portfolio-empty {
		color: rgba(255, 255, 255, 0.6);
	}

/* ---------- Project window (lightbox) ---------- */

	.lightbox {
		position: fixed;
		inset: 0;
		z-index: 10020;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 4rem 2rem;
		overflow-y: auto;
		background: rgba(10, 24, 2, 0.85);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		visibility: hidden;
		opacity: 0;
		transition: opacity var(--ae-ease), visibility 0s linear 0.325s;
	}

	.lightbox.is-open {
		visibility: visible;
		opacity: 1;
		transition: opacity var(--ae-ease), visibility 0s;
	}

	body.is-lightbox-open {
		overflow: hidden;
	}

	.lightbox-inner {
		position: relative;
		width: 60rem;
		max-width: 100%;
		margin: auto;
		padding: 4rem 2.5rem 1rem 2.5rem;
		border-radius: 4px;
		background-color: var(--ae-dark);
		background-image: linear-gradient(to bottom right, var(--ae-green), var(--ae-dark));
		box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45);
		transform: translateY(0.75rem) scale(0.98);
		transition: transform var(--ae-ease);
	}

	.lightbox.is-open .lightbox-inner {
		transform: none;
	}

	.lightbox-close {
		position: absolute;
		top: 0;
		right: 0;
		width: 4rem;
		height: 4rem;
		padding: 0;
		background: transparent !important;
		box-shadow: none;
		text-indent: 4rem;
		overflow: hidden;
		white-space: nowrap;
		cursor: pointer;
	}

	.lightbox-close:before {
		content: '';
		position: absolute;
		top: 0.75rem;
		left: 0.75rem;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 20px 20px;
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 20 20'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
		transition: background-color 0.2s ease-in-out;
	}

	.lightbox-close:hover:before,
	.lightbox-close:focus-visible:before {
		background-color: var(--ae-yellow-soft);
	}

	.lightbox-media {
		position: relative;
		aspect-ratio: 16 / 9;
		border-radius: 4px;
		overflow: hidden;
		background: #0b1a03;
		margin-bottom: 1.75rem;
	}

	.lightbox-media iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	.lightbox-placeholder {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		color: rgba(255, 255, 255, 0.7);
		text-transform: uppercase;
		letter-spacing: 0.2rem;
		font-size: 0.8rem;
		text-align: center;
		padding: 1rem;
	}

	.lightbox-placeholder .icon {
		font-size: 2rem;
		color: var(--ae-yellow);
	}

	.lightbox-tag {
		display: inline-block;
		font-size: 0.65rem;
		letter-spacing: 0.2rem;
		text-transform: uppercase;
		font-weight: 600;
		color: var(--ae-dark);
		background: var(--ae-yellow);
		border-radius: 2px;
		padding: 0.1rem 0.6rem;
		margin-bottom: 1rem;
	}

	/* Category label sits in the top left corner of the project window, above the video/photos,
	   vertically centred on the language switch and close button (both centred 2rem from the top) */
	.lightbox-inner > .lightbox-tag {
		position: absolute;
		top: 2rem;
		left: 2.5rem;
		margin: 0;
		transform: translateY(-50%);
	}

	@media screen and (max-width: 736px) {
		.lightbox-inner > .lightbox-tag {
			left: 1.25rem;
		}
	}

	.lightbox-info h2 {
		margin-bottom: 1rem;
		font-size: 1.25rem;
		line-height: 1.5;
		max-width: 100%;	/* never wider than the project window (aestronaut.js shrinks long titles to fit) */
	}

	.lightbox-meta {
		color: rgba(255, 255, 255, 0.6);
		font-size: 0.8rem;
		letter-spacing: 0.1rem;
		text-transform: uppercase;
		margin-bottom: 1rem;
	}

	.lightbox-desc p {
		margin-bottom: 1.25rem;
	}

	/* Formatting from the editor's rich text field */
	.lightbox-desc ul,
	.lightbox-desc ol {
		margin: 0 0 1.25rem 0;
		padding-left: 1.25rem;
	}

	.lightbox-desc ul {
		list-style: none;
	}

	.lightbox-desc ul li {
		position: relative;
		padding-left: 0.4rem;
		margin-bottom: 0.35rem;
	}

	.lightbox-desc ul li:before {
		content: '';
		position: absolute;
		left: -0.95rem;
		top: 0.7em;
		width: 0.4rem;
		height: 0.4rem;
		border-radius: 1px;
		background: var(--ae-yellow);
		transform: rotate(45deg);
	}

	.lightbox-desc ol li {
		padding-left: 0.4rem;
		margin-bottom: 0.35rem;
	}

	.lightbox-desc ol li::marker {
		color: var(--ae-yellow);
		font-weight: 600;
	}

	.lightbox-desc .desc-heading {
		font-size: 0.8rem;
		letter-spacing: 0.2rem;
		margin: 1.75rem 0 0.75rem 0;
		color: var(--ae-yellow);
	}

	.lightbox-desc .desc-heading:first-child {
		margin-top: 0;
	}

	.lightbox-desc strong {
		color: #ffffff;
		font-weight: 600;
	}

	.lightbox-desc a {
		color: var(--ae-yellow);
		border-bottom-color: rgba(255, 242, 5, 0.5);
		overflow-wrap: anywhere;
	}

	.lightbox-desc a:hover {
		border-bottom-color: transparent;
	}

	.lightbox-desc blockquote {
		border-left: solid 3px var(--ae-yellow);
		margin: 0 0 1.25rem 0;
		padding: 0.25rem 0 0.25rem 1rem;
		font-style: italic;
	}

	.lightbox-desc code {
		font-size: 0.85em;
	}

	/* "View project" button below the description */
	.lightbox-link {
		margin: 0.5rem 0 1.75rem 0;
	}

	.lightbox-link[hidden] {
		display: none;
	}

	.lightbox-link .button {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
	}

	.lightbox-link .button .icon:before {
		font-size: 0.75em;
	}

	@media screen and (max-width: 736px) {
		.lightbox {
			padding: 1rem;
		}

		.lightbox-inner {
			padding: 3.5rem 1.25rem 0.5rem 1.25rem;
		}

		.lightbox-close:before {
			top: 0.875rem;
			left: 0.875rem;
			width: 2.25rem;
			height: 2.25rem;
			background-size: 14px 14px;
		}
	}

/* ---------- Video player (several videos, horizontal / vertical versions) ---------- */

	.lightbox-media.has-player {
		aspect-ratio: auto;
		overflow: visible;
		background: none;
		border-radius: 0;
	}

	.player-stage {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		margin: 0 auto;
		border-radius: 4px;
		overflow: hidden;
		background: #0b1a03;
		animation: ae-fade-in 0.325s ease-in-out;
	}

	/* Vertical (9:16) video: the frame keeps its 16:9 size so the page doesn't jump;
	   the video is centred in it at full height (9/16 of 9/16 of the width) */
	.player-stage.is-vertical iframe {
		left: 50%;
		right: auto;
		width: calc(100% * 81 / 256);
		transform: translateX(-50%);
	}

	.player-stage iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	.player-controls {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem 1.5rem;
		margin-top: 1rem;
	}

	.player-controls[hidden],
	.player-format[hidden] {
		display: none;
	}

	.player-tabs {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.player-tab {
		font-size: 0.6rem;
		height: 2.0625rem;
		line-height: 2.0625rem;
		padding: 0 1rem;
	}

	.player-tab.is-active {
		background-color: var(--ae-yellow);
		box-shadow: inset 0 0 0 1px var(--ae-yellow);
		color: var(--ae-dark) !important;
		font-weight: 600;
	}

	/* 16:9 / 9:16 switch */
	.player-format {
		display: inline-flex;
		margin-left: auto;
		border-radius: 4px;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
		overflow: hidden;
	}

	.player-format-btn {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		height: 2.25rem;
		line-height: 2.25rem;
		padding: 0 0.9rem;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		font-size: 0.65rem;
		letter-spacing: 0.1rem;
	}

	.player-format-btn + .player-format-btn {
		border-left: solid 1px rgba(255, 255, 255, 0.35);
	}

	.format-icon {
		display: inline-block;
		border: solid 1.5px currentColor;
		border-radius: 2px;
	}

	.player-format-btn.is-horizontal .format-icon {
		width: 1.15rem;
		height: 0.65rem;
	}

	.player-format-btn.is-vertical .format-icon {
		width: 0.65rem;
		height: 1.15rem;
	}

	.player-format-btn.is-active {
		background: var(--ae-yellow);
		color: var(--ae-dark) !important;
		font-weight: 600;
	}

	/* Desktop & tablet: video buttons wrap within their own column and never run into the
	   16:9 / 9:16 switch, which stays at the top right */
	@media screen and (min-width: 737px) {
		.player-controls {
			flex-wrap: nowrap;
			align-items: flex-start;
		}

		.player-tabs {
			flex: 1 1 auto;
			min-width: 0;
		}

		.player-format {
			flex: none;
		}
	}

	/* Tablet & desktop: buttons on one row, the overflow goes into "More" (laid out by JS) */
	@media screen and (min-width: 737px) {
		.player-tabs {
			flex-wrap: nowrap;
		}

		.player-tabs > * {
			flex: none;
		}
	}

	.player-tab[hidden],
	.player-more[hidden],
	.player-more-item[hidden] {
		display: none !important;
	}

	.player-more {
		position: relative;
	}

	.player-more-btn {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
	}

	/* When it shows the playing video's title, long titles are cut off with … */
	.player-more-label {
		display: inline-block;
		max-width: 14rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: top;
	}

	.player-more-chevron:before {
		font-size: 0.6rem;
		transition: transform 0.2s ease;
		display: inline-block;
	}

	.player-more.is-open .player-more-chevron:before {
		transform: rotate(180deg);
	}

	.player-more-menu {
		position: absolute;
		top: calc(100% + 0.4rem);
		left: 0;
		z-index: 5;
		min-width: 13rem;
		max-width: 22rem;
		max-height: 50vh;
		overflow-y: auto;
		padding: 0.35rem;
		border-radius: 4px;
		background: var(--ae-dark);
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0.75rem 2rem rgba(0, 0, 0, 0.5);
		animation: ae-fade-in 0.2s ease-out;
	}

	.player-more-item {
		display: block;
		width: 100%;
		height: auto;
		padding: 0.6rem 0.85rem;
		border-radius: 3px;
		box-shadow: none;
		background: transparent;
		text-align: left;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 0.65rem;
		line-height: 1.3;
		letter-spacing: 0.15rem;
		color: #ffffff !important;
	}

	.player-more-item:hover,
	.player-more-item:focus-visible {
		background: rgba(255, 255, 255, 0.1);
	}

	.player-more-item.is-active {
		background: var(--ae-yellow);
		color: var(--ae-dark) !important;
	}

	/* Video dropdown (projects with several videos): phones only, see below */
	.player-select {
		display: none;
	}

	.player-select select {
		height: 2.25rem;
		padding-left: 0.9rem;
		padding-right: 2.5rem;
		border-color: rgba(255, 255, 255, 0.6);
		background-color: rgba(22, 51, 5, 0.6);
		background-size: 0.9rem;
		background-position: calc(100% - 0.85rem) center;
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.15rem;
		text-transform: uppercase;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		cursor: pointer;
	}

	.player-select select:focus {
		border-color: var(--ae-yellow);
		box-shadow: 0 0 0 1px var(--ae-yellow);
	}

	.player-select select option {
		background: var(--ae-dark);
		text-transform: none;
		letter-spacing: normal;
		font-weight: normal;
	}

	@media screen and (max-width: 736px) {
		/* One tidy row: [ video dropdown ▾ ] [ 16:9 | 9:16 ] */
		.player-controls:has(.player-select) {
			flex-wrap: nowrap;
			gap: 0.6rem;
		}

		.player-select {
			display: block;
			flex: 1 1 auto;
			min-width: 0;
		}

		.player-tabs.has-select {
			display: none;
		}

		.player-controls .player-format {
			flex: none;
		}
	}

	/* Photos inside the player use the normal carousel */
	.player-stage.is-photos .carousel {
		position: absolute;
		inset: 0;
	}

	@media screen and (max-width: 736px) {
		/* Phones: a 16:9 frame is too small for a vertical video, so it gets a tall frame */
		.player-stage.is-vertical {
			width: auto;
			height: min(70vh, calc((100vw - 3.5rem) * 16 / 9));
			aspect-ratio: 9 / 16;
		}

		.player-stage.is-vertical iframe {
			left: 0;
			width: 100%;
			transform: none;
		}

		.player-format {
			margin-left: 0;
		}
	}

/* ---------- Image carousel ---------- */

	.carousel {
		position: absolute;
		inset: 0;
		touch-action: pan-y;
	}

	.carousel {
		overflow: hidden;
	}

	.carousel-track {
		position: absolute;
		inset: 0;
	}

	/* Each photo is placed by JS; neighbours are shown at 50% */
	.carousel-slide {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.6s ease;
		will-change: transform;
	}

	.carousel-slide.is-active {
		opacity: 1;
	}

	.carousel-slide.is-neighbour {
		opacity: 0.5;
		cursor: pointer;
	}

	.carousel-slide.is-neighbour:hover {
		opacity: 0.7;
	}

	.carousel-slide img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
		user-select: none;
		-webkit-user-drag: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.carousel-slide {
			transition: opacity 0.3s ease;
		}
	}

	.carousel-btn {
		position: absolute;
		top: 50%;
		width: 2.75rem;
		height: 2.75rem;
		margin-top: -1.375rem;
		padding: 0;
		border-radius: 100%;
		background: rgba(22, 51, 5, 0.7) !important;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
		color: #ffffff !important;
		font-size: 0.9rem;
		line-height: 2.75rem;
		text-align: center;
		letter-spacing: 0;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	}

	.carousel-btn:hover,
	.carousel-btn:focus-visible {
		background: var(--ae-yellow) !important;
		color: var(--ae-dark) !important;
		box-shadow: none;
	}

	.carousel-btn.prev { left: 0.75rem; }
	.carousel-btn.next { right: 0.75rem; }

	.carousel-btn:before {
		margin: 0 !important;
	}

	.carousel-dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0.75rem;
		display: flex;
		justify-content: center;
		gap: 0.5rem;
	}

	.carousel-dots button {
		width: 0.6rem;
		height: 0.6rem;
		min-width: 0;
		padding: 0;
		border-radius: 100%;
		background: rgba(255, 255, 255, 0.4) !important;
		box-shadow: none;
		transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
	}

	.carousel-dots button.is-active {
		background: var(--ae-yellow) !important;
		transform: scale(1.25);
	}

	.carousel-counter {
		position: absolute;
		top: 0.75rem;
		right: 0.75rem;
		padding: 0.1rem 0.6rem;
		border-radius: 2px;
		background: rgba(22, 51, 5, 0.7);
		font-size: 0.7rem;
		letter-spacing: 0.1rem;
	}

	/* Full-screen button: top left (the counter is top right) */
	.carousel-fs {
		position: absolute;
		top: 0.75rem;
		left: 0.75rem;
		z-index: 2;
		width: 2.25rem;
		height: 2.25rem;
		padding: 0;
		border-radius: 100%;
		background: rgba(22, 51, 5, 0.7) !important;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
		color: #ffffff !important;
		font-size: 0.8rem;
		line-height: 2.25rem;
		text-align: center;
		letter-spacing: 0;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	}

	.carousel-fs:before {
		margin: 0 !important;
	}

	.carousel-fs:hover,
	.carousel-fs:focus-visible {
		background: var(--ae-yellow) !important;
		color: var(--ae-dark) !important;
		box-shadow: none;
	}

	/* The carousel filling the whole screen */
	.carousel.is-fullscreen {
		position: fixed;
		inset: 0;
		z-index: 10050;
		background: #050c02;
	}

	.carousel.is-fullscreen .carousel-track {
		inset: calc(env(safe-area-inset-top, 0px) + 3.5rem) env(safe-area-inset-right, 0px) calc(env(safe-area-inset-bottom, 0px) + 3rem) env(safe-area-inset-left, 0px);
	}

	.carousel.is-fullscreen .carousel-fs {
		top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
		left: calc(env(safe-area-inset-left, 0px) + 0.75rem);
		width: 2.75rem;
		height: 2.75rem;
		line-height: 2.75rem;
		font-size: 0.95rem;
	}

	.carousel.is-fullscreen .carousel-counter {
		top: calc(env(safe-area-inset-top, 0px) + 1.1rem);
		right: calc(env(safe-area-inset-right, 0px) + 0.75rem);
	}

	.carousel.is-fullscreen .carousel-dots {
		bottom: calc(env(safe-area-inset-bottom, 0px) + 1.1rem);
	}

	.carousel.is-fullscreen .carousel-btn.prev { left: calc(env(safe-area-inset-left, 0px) + 0.75rem); }
	.carousel.is-fullscreen .carousel-btn.next { right: calc(env(safe-area-inset-right, 0px) + 0.75rem); }

	/* While a carousel is full screen, nothing else on the page scrolls or shows above it */
	body.is-carousel-fullscreen {
		overflow: hidden;
	}

	body.is-carousel-fullscreen #lang-switch {
		opacity: 0;
		pointer-events: none;
	}

	/* Phones: photo carousels 50% taller (16:9 → 16:13.5) */
	@media screen and (max-width: 736px) {
		.lightbox-media:has(> .carousel),
		.player-stage.is-photos {
			aspect-ratio: 16 / 13.5;
		}
	}

	.carousel.is-single .carousel-btn,
	.carousel.is-single .carousel-dots,
	.carousel.is-single .carousel-counter {
		display: none;
	}

/* ---------- Contact form ---------- */

	.botcheck {
		display: none !important;
	}

	.service-choices {
		border: 0;
		padding: 0;
		margin: 0;
	}

	.service-choices legend {
		color: #ffffff;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.2rem;
		font-size: 0.8rem;
		line-height: 1.5;
		margin: 0 0 1rem 0;
		padding: 0;
	}

	.service-choices legend small {
		font-weight: 300;
		letter-spacing: 0.1rem;
		text-transform: none;
		color: rgba(255, 255, 255, 0.6);
		font-size: 0.8rem;
	}

	.choices {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.25rem 1.5rem;
	}

	.choice label {
		text-transform: none;
		letter-spacing: 0.05rem;
		font-weight: 300;
		font-size: 0.9rem;
	}

	@media screen and (max-width: 480px) {
		.choices {
			grid-template-columns: 1fr;
		}
	}

	#contact-form .is-invalid {
		border-color: #ff8a5c;
		box-shadow: 0 0 0 1px #ff8a5c;
	}

	.form-status {
		margin: 0 0 1.5rem 0;
		padding: 0.85rem 1rem;
		border-radius: 4px;
		font-size: 0.9rem;
		border-left: solid 3px var(--ae-yellow);
		background: rgba(255, 255, 255, 0.06);
		animation: ae-fade-in 0.325s ease-in-out;
	}

	.form-status.is-error {
		border-left-color: #ff8a5c;
	}

	#contact-form button[type="submit"][disabled] {
		opacity: 0.6;
		pointer-events: none;
	}

	@keyframes ae-fade-in {
		from { opacity: 0; transform: translateY(0.25rem); }
		to { opacity: 1; transform: none; }
	}

/* ---------- Reduced motion ---------- */

	@media (prefers-reduced-motion: reduce) {
		.portfolio-item,
		.portfolio-thumb img,
		.lightbox,
		.lightbox-inner,
		.carousel-track,
		.service {
			transition: none !important;
		}
	}