/*
	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;
	}

	#main article {
		background-color: var(--ae-dark);
		background-image: linear-gradient(to bottom right, var(--ae-green), var(--ae-dark));
	}

	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;
	}

/* ---------- 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);
	}

/* ---------- 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;
	}

	/* On phones the switch shows on the home screen only, so it never covers a page */
	@media screen and (max-width: 736px) {
		body.is-article-visible #lang-switch {
			opacity: 0;
			pointer-events: none;
		}
	}

	/* 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;
		transition: transform 0.6s ease;
	}

	.image.triple .tile:hover img {
		transform: scale(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 (style="--service-bg: url(...)").
		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.6;
		margin-bottom: 1rem;
	}

	@media screen and (max-width: 736px) {
		.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);
	}

	.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);
	}

	.portfolio-badge.is-video:before {
		margin-left: 0.2rem; /* 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);
		margin-top: 0.25rem;
	}

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

	.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;
	}

	.lightbox-info h2 {
		margin-bottom: 1rem;
		font-size: 1.25rem;
		line-height: 1.5;
	}

	.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;
	}

	@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: as tall as fits on screen, centred */
	.player-stage.is-vertical {
		width: auto;
		height: min(72vh, 44rem, calc((100vw - 5rem) * 16 / 9));
		aspect-ratio: 9 / 16;
	}

	.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;
	}

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

	@media screen and (max-width: 736px) {
		.player-stage.is-vertical {
			height: min(70vh, calc((100vw - 3.5rem) * 16 / 9));
		}

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

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

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

	.carousel-track {
		display: flex;
		height: 100%;
		transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
	}

	.carousel-slide {
		flex: 0 0 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

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

	.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;
	}

	.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;
		}
	}