/* ==========================================================================
   JEFOLIO  /  cinematic portfolio
   Direction: night-run editorial. Near-black and anthracite, one tail-light
   red accent, expanded grotesk display type, mono "scene" metadata.
   The photography sets the colour; the interface stays out of the way.
   ========================================================================== */

:root {
	/* Base tokens. "Website aanpassen" overrides these (printed after this file). */
	--bg: #0b0b0b;
	--ink: #ecebe7;
	--accent: #e5331c;
	--f-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--f-text: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--display-weight: 760;
	--display-wdth: 125;
	--display-stretch: 125%;
	--display-case: uppercase;
	--h-scale: 1;
	--hero-scale: 1;
	--body-size: 17px;
	--space-scale: 1;
	--max: 1680px;
	--radius: 0px;
	--hero-h: 100;
	--hero-shade: 60;
	--logo-size: 17px;
	--wall-cols: 3;

	/* Derived from the base tokens, so every colour scheme stays consistent. */
	--bg-2: color-mix(in srgb, var(--bg), var(--ink) 4%);
	--bg-3: color-mix(in srgb, var(--bg), var(--ink) 8%);
	--bg-black: color-mix(in srgb, var(--bg), #000 55%);
	--ink-2: color-mix(in srgb, var(--ink) 72%, var(--bg));
	--ink-3: color-mix(in srgb, var(--ink) 60%, var(--bg));
	--line: color-mix(in srgb, var(--ink) 13%, transparent);
	--line-2: color-mix(in srgb, var(--ink) 30%, transparent);
	--on-image: #f2f1ed;
	--on-image-2: rgba(242, 241, 237, 0.78);
	--error: #e2553f;
	--f-mono: 'Fragment Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	--gutter: clamp(16px, 4vw, 64px);
	--gap: clamp(16px, 2vw, 32px);
	--section: calc(clamp(96px, 14vw, 220px) * var(--space-scale));
	--header-h: 72px;

	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-in-out: cubic-bezier(0.7, 0, 0.2, 1);
	--t-fast: 0.25s;
	--t-med: 0.6s;
	--t-slow: 1.2s;

}

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

*, *::before, *::after { box-sizing: border-box; }

:where(html) {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
	:where(html) { scroll-behavior: smooth; }
}

:where(body) {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--f-text);
	font-size: clamp(calc(var(--body-size) - 2px), calc(var(--body-size) - 3px + 0.35vw), var(--body-size));
	line-height: 1.6;
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

:where(img, video, svg) { display: block; max-width: 100%; }
:where(img) { height: auto; }
:where(h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
:where(a) { color: inherit; text-decoration: none; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(input, textarea, select) { font: inherit; color: inherit; }
:where(dialog) { color: inherit; }

::selection { background: var(--ink); color: var(--bg); }

:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.skip {
	position: fixed; left: 16px; top: 16px; z-index: 200;
	padding: 12px 16px;
	background: var(--ink); color: var(--bg);
	font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
	transform: translateY(-200%);
	transition: transform var(--t-fast) var(--ease);
}
.skip:focus { transform: none; }

.site-main { display: block; outline: none; }

.wrap {
	width: 100%;
	max-width: calc(var(--max) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap-wide {
	width: 100%;
	max-width: 1800px;
	margin-inline: auto;
	padding-inline: clamp(0px, 2vw, 32px);
}

.section { padding-block: var(--section); }

svg { width: 1em; height: 1em; flex: none; }

/* --------------------------------------------------------------------------
   Type system
   -------------------------------------------------------------------------- */

.display,
.hero__title,
.section-title,
.work-head__title,
.project-hero__title,
.project-cover__title,
.closing__title,
.notfound__title,
.contact__title,
.about-hero__title,
.page-head__title,
.next-project__title,
.about-cta__title,
.mobile-menu__label {
	font-family: var(--f-display);
	font-weight: var(--display-weight);
	font-stretch: var(--display-stretch);
	text-transform: var(--display-case);
	letter-spacing: -0.025em;
	line-height: 0.92;
	font-variation-settings: 'wdth' var(--display-wdth);
	overflow-wrap: break-word;
}

/* Scene label: SC.01  Selected work */
.label {
	display: inline-flex;
	align-items: baseline;
	gap: 0.9em;
	font-family: var(--f-mono);
	font-size: 12px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-2);
}
.label__num { color: var(--ink); }

.link-line {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--f-mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink);
	padding-block: 6px;
	background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
	transition: background-size var(--t-med) var(--ease), gap var(--t-med) var(--ease);
}
.link-line:hover { background-size: 0 1px; background-position: right bottom; gap: 1em; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.9em;
	min-height: 52px;
	padding: 0 26px;
	border: 1px solid var(--line-2);
	font-family: var(--f-mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink);
	background: transparent;
	transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn svg { transition: transform var(--t-med) var(--ease); }
.btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn:hover svg { transform: translateX(4px); }
.btn--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--solid:hover { background: transparent; color: var(--ink); }
.btn[disabled], .btn[aria-busy='true'] { opacity: 0.6; cursor: progress; }

.icon-btn {
	display: inline-grid;
	place-items: center;
	width: 48px; height: 48px;
	font-size: 22px;
	color: var(--ink);
	border: 1px solid var(--line);
	transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* --------------------------------------------------------------------------
   Header & navigation
   -------------------------------------------------------------------------- */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	height: var(--header-h);
	transition: transform 0.5s var(--ease), background-color 0.5s var(--ease);
}
.site-header::before {
	content: '';
	position: absolute; inset: 0 0 -40px;
	background: linear-gradient(to bottom, rgba(5, 5, 5, 0.65), rgba(5, 5, 5, 0));
	pointer-events: none;
	transition: opacity 0.5s var(--ease);
}
.site-header.is-solid { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.site-header.is-solid::before { opacity: 0; }
@supports (backdrop-filter: blur(1px)) {
	.site-header.is-solid { background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(14px) saturate(1.1); }
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header::before { opacity: 0; }
.is-home .site-header::before, .is-project:not(.jf-cover-plain) .site-header::before, .error404 .site-header::before { opacity: 1; }
body:not(.menu-open):is(.is-home, .is-project:not(.jf-cover-plain), .error404) .site-header:not(.is-solid) { color: var(--on-image); --ink: var(--on-image); --ink-2: var(--on-image-2); }
.site-header { color: var(--ink); }

.site-header__inner {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.wordmark {
	display: inline-flex;
	align-items: flex-start;
	gap: 3px;
	font-family: var(--f-display);
	font-weight: max(600, var(--display-weight));
	font-stretch: var(--display-stretch);
	font-variation-settings: 'wdth' var(--display-wdth);
	font-size: var(--logo-size);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
}
.wordmark__dot {
	width: 6px; height: 6px;
	margin-top: 1px;
	background: var(--accent);
	border-radius: 50%;
}
.wordmark--logo img { max-height: calc(var(--logo-size) * 2); width: auto; }

.nav { display: none; }
.nav__list { display: flex; gap: clamp(18px, 2.4vw, 40px); }
.nav__link {
	position: relative;
	display: inline-block;
	padding-block: 8px;
	font-family: var(--f-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-2);
	transition: color var(--t-fast);
}
.nav__link::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: 2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--t-med) var(--ease);
}
.nav__link:hover, .nav__link[aria-current='page'] { color: var(--ink); }
.nav__link:hover::after, .nav__link[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }

.menu-toggle {
	position: relative;
	z-index: 110;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding-inline: 4px;
	font-family: var(--f-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}
.menu-toggle__bars { display: grid; gap: 6px; width: 26px; }
.menu-toggle__bars span {
	display: block; height: 1.5px; background: currentColor;
	transition: transform var(--t-med) var(--ease);
}
.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

@media (min-width: 960px) {
	.nav { display: block; }
	.menu-toggle { display: none; }
}

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 95;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: calc(var(--header-h) + 24px) var(--gutter) max(28px, env(safe-area-inset-bottom));
	background: var(--bg);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__list { display: grid; gap: 4px; }
.mobile-menu__list a {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding-block: 10px;
	border-bottom: 1px solid var(--line);
}
.mobile-menu__num { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); width: 2.5ch; }
.mobile-menu__label { font-size: clamp(1.8rem, 8.2vw, 4.4rem); line-height: 1; }
.mobile-menu__list a[aria-current='page'] .mobile-menu__label { color: var(--ink-2); }
.mobile-menu__foot {
	display: flex; flex-wrap: wrap; gap: 12px 24px;
	margin-top: 40px;
	font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
	color: var(--ink-2);
}
.js .mobile-menu.is-open .mobile-menu__list li { animation: menu-in 0.7s var(--ease) both; animation-delay: calc(var(--i) * 55ms + 80ms); }
@keyframes menu-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

body.menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	min-height: max(420px, calc(var(--hero-h) * 1svh));
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--bg-black);
	color: var(--on-image);
	isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__img, .hero__video {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 60%;
}
.hero__video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__video.is-ready { opacity: 1; }
.hero__empty { width: 100%; height: 100%; background: radial-gradient(120% 80% at 70% 30%, #2a2a2a, var(--bg-black) 70%); }
.hero__scrim {
	position: absolute; inset: 0; z-index: -1;
	opacity: min(1, calc(var(--hero-shade) / 60));
	background:
		linear-gradient(to top, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.45) 38%, rgba(5, 5, 5, 0) 65%),
		linear-gradient(to right, rgba(5, 5, 5, 0.55) 0%, rgba(5, 5, 5, 0) 55%);
}

.hero__scrim::after { content: ''; position: absolute; inset: 0; background: #000; opacity: max(0, calc((var(--hero-shade) - 60) / 70)); }
.hero--center .hero__scrim, .hero--middle-left .hero__scrim, .hero--bottom-right .hero__scrim { background: rgba(5, 5, 5, 0.42); }
.hero--no-bars .hero__bars { display: none; }

/* Text position variants */
.hero--middle-left { align-items: center; }
.hero--middle-left .hero__content { padding-bottom: clamp(40px, 8vh, 80px); }
.hero--center { align-items: center; text-align: center; }
.hero--center .hero__content { display: flex; flex-direction: column; align-items: center; padding-bottom: clamp(40px, 8vh, 80px); }
.hero--center .hero__title { max-width: none; }
.hero--center .hero__foot { flex-direction: column; justify-content: center; }
.hero--bottom-right .hero__content { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.hero--bottom-right .hero__title { max-width: none; }
.hero--bottom-right .hero__foot { flex-direction: row-reverse; }

/* Letterbox bars that open from 2.39:1 to full frame */
.hero__bars span {
	position: absolute; left: 0; right: 0; z-index: 1;
	height: 0;
	background: var(--bg-black);
	pointer-events: none;
}
.hero__bars span:first-child { top: 0; }
.hero__bars span:last-child { bottom: 0; }

.hero__content {
	position: relative;
	padding-top: calc(var(--header-h) + 40px);
	padding-bottom: clamp(88px, 12vh, 140px);
}
.hero__kicker { margin-bottom: clamp(20px, 3vw, 36px); }
.hero__kicker .label__num { display: inline-flex; align-items: center; gap: 8px; color: var(--on-image); }
.hero .label, .closing .label, .notfound .label, .project-hero .label, .next-project .label { color: var(--on-image-2); }
.hero .label__num, .closing .label__num, .notfound .label__num, .project-hero .label__num, .next-project .label__num { color: var(--on-image); }
.hero .btn, .closing .btn, .notfound .btn { color: var(--on-image); border-color: rgba(242, 241, 237, 0.4); }
.hero .btn:hover, .closing .btn:hover, .notfound .btn:hover { background: var(--on-image); color: #0b0b0b; border-color: var(--on-image); }
.closing .btn--solid, .notfound .btn--solid { background: var(--on-image); color: #0b0b0b; border-color: var(--on-image); }
.closing .btn--solid:hover, .notfound .btn--solid:hover { background: transparent; color: var(--on-image); }
.hero__kicker .label__num::before {
	content: '';
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--accent);
}
.hero__title {
	font-size: calc(clamp(2.3rem, 9vw, 11.5rem) * var(--hero-scale));
	max-width: 14ch;
}
.hero__line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero__line > span { display: inline-block; }
.hero__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	margin-top: clamp(28px, 4vw, 52px);
	max-width: min(1100px, calc(100% - 64px));
}
.hero__nl {
	font-size: clamp(1rem, 0.6vw + 0.9rem, 1.35rem);
	color: var(--on-image-2);
	max-width: 32ch;
}

.hero__scroll {
	position: absolute;
	right: var(--gutter);
	bottom: clamp(28px, 5vh, 56px);
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 8px;
	color: var(--on-image-2);
}
.hero__scroll-track { position: relative; width: 1px; height: 72px; background: rgba(242, 241, 237, 0.3); overflow: hidden; }
.hero__scroll-track span { position: absolute; left: 0; top: 0; width: 1px; height: 24px; background: var(--on-image); }
.hero__scroll-label {
	font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em;
	writing-mode: vertical-rl;
}
@media (min-width: 720px) { .hero__scroll { display: inline-flex; } }

@media (prefers-reduced-motion: no-preference) {
	.js .hero__img { animation: hero-settle 2.8s var(--ease) both; }
	.js .hero__bars span { animation: bars-open 1.6s var(--ease-in-out) 0.25s both; }
	.js .hero__line > span { animation: line-up 1.2s var(--ease) both; animation-delay: calc(0.55s + var(--i) * 0.12s); }
	.js .hero__kicker, .js .hero__foot { animation: fade-up 1.2s var(--ease) 1s both; }
	.hero__scroll-track span { animation: scroll-run 2.4s var(--ease-in-out) infinite; }
}
@keyframes hero-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes bars-open { from { height: max(0px, calc((100svh - 100vw / 2.39) / 2)); } to { height: 0; } }
@keyframes line-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes scroll-run { 0% { transform: translateY(-24px); } 100% { transform: translateY(72px); } }

/* --------------------------------------------------------------------------
   Section heads
   -------------------------------------------------------------------------- */

.section-head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 20px 24px;
	margin-bottom: clamp(48px, 7vw, 112px);
}
.section-head .label { grid-column: 1 / -1; }
.section-title { font-size: calc(clamp(1.8rem, 7.2vw, 7rem) * var(--h-scale)); }
.section-head__link { justify-self: end; margin-bottom: 0.4em; }
@media (max-width: 640px) {
	.section-head { grid-template-columns: 1fr; }
	.section-head__link { justify-self: start; }
}

/* --------------------------------------------------------------------------
   Project tiles
   -------------------------------------------------------------------------- */

.tile { position: relative; min-width: 0; }
.tile__link { display: block; }
.tile__media {
	position: relative;
	overflow: hidden;
	background: var(--bg-3);
	border-radius: var(--radius);
}
.tile__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.001);
	transition: transform 1.4s var(--ease), filter var(--t-med) var(--ease);
}
.tile__link:hover .tile__img,
.tile__link:focus-visible .tile__img { transform: scale(1.035); }
@media (hover: hover) {
	.tile__img { filter: brightness(0.92); }
	.tile__link:hover .tile__img { filter: brightness(1.04); }
}
.tile__caption {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 6px 16px;
	padding-top: 16px;
}
.tile__num { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.08em; }
.tile__title {
	font-family: var(--f-display);
	font-weight: min(900, calc(var(--display-weight) - 60));
	font-stretch: var(--display-stretch);
	font-variation-settings: 'wdth' var(--display-wdth);
	font-size: calc(clamp(1.05rem, 0.9vw + 0.8rem, 1.6rem) * (0.5 + var(--h-scale) / 2));
	line-height: 1.05;
	text-transform: var(--display-case);
	letter-spacing: -0.005em;
}
.tile__title a { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size var(--t-med) var(--ease); }
.tile__link:hover .tile__title, .tile__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.tile__meta {
	grid-column: 2;
	display: flex; flex-wrap: wrap; gap: 4px 16px;
	font-family: var(--f-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink-2);
}
.tile__year { color: var(--ink-3); }

.tile__play {
	position: absolute;
	left: clamp(12px, 1.6vw, 24px);
	bottom: clamp(12px, 1.6vw, 24px);
	display: inline-flex; align-items: center; gap: 10px;
	padding: 0 14px 0 10px;
	height: 40px;
	background: rgba(5, 5, 5, 0.72);
	font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em;
}
.tile__play svg { font-size: 18px; }

/* Home: editorial composition */
.editorial {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	row-gap: clamp(56px, 9vw, 160px);
	align-items: start;
}
.editorial__item { grid-column: 1 / -1; }
.editorial__item--0 { margin-inline: calc(var(--gutter) * -1); }
.editorial__item--0 .tile__caption { padding-inline: var(--gutter); }
.editorial__item--0.tile--portrait, .editorial__item--0.tile--square { margin-inline: 0; }

@media (min-width: 900px) {
	.editorial__item--0 { grid-column: 1 / -1; }
	.editorial__item--0.tile--portrait, .editorial__item--0.tile--square { grid-column: 4 / 10; }
	.editorial__item--1 { grid-column: 1 / 8; }
	.editorial__item--1.tile--portrait { grid-column: 2 / 7; }
	.editorial__item--2 { grid-column: 9 / 13; margin-top: clamp(80px, 18vh, 240px); }
	.editorial__item--2.tile--landscape { grid-column: 8 / 13; }
	.editorial__item--3 { grid-column: 2 / 6; }
	.editorial__item--3.tile--landscape { grid-column: 1 / 7; }
	.editorial__item--4 { grid-column: 7 / 13; margin-top: clamp(60px, 12vh, 180px); }
	.editorial__item--4.tile--portrait { grid-column: 8 / 12; }
	.editorial__item--5 { grid-column: 3 / 11; }
	.editorial__item--5.tile--portrait { grid-column: 4 / 9; }
	.editorial__item--6 { grid-column: 1 / 6; }
	.editorial__item--6.tile--landscape { grid-column: 1 / 8; }
}
@media (max-width: 899px) {
	.editorial .tile--portrait:not(.editorial__item--0), .editorial .tile--square:not(.editorial__item--0) { width: 78%; }
	.editorial .tile:nth-child(even) { justify-self: end; }
}

/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */

.intro { border-top: 1px solid var(--line); }
.intro__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 32px var(--gap);
}
.intro__grid > .label { grid-column: 1 / -1; }
.intro__lead {
	grid-column: 1 / -1;
	font-family: var(--f-display);
	font-weight: 500;
	font-stretch: 100%;
	font-size: calc(clamp(2.2rem, 6.2vw, 7.2rem) * var(--h-scale));
	line-height: 0.98;
	letter-spacing: -0.035em;
}
.intro__inline {
	display: inline-block;
	width: 1.6em; height: 0.82em;
	margin-inline: 0.06em;
	vertical-align: -0.04em;
	overflow: hidden;
	background: var(--bg-3);
	border-radius: min(var(--radius), 0.2em);
}
.intro__inline img { width: 100%; height: 100%; object-fit: cover; }
.intro__text {
	grid-column: 1 / -1;
	display: grid; gap: 28px; justify-items: start;
	max-width: 46ch;
	font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.3rem);
	color: var(--ink-2);
}
@media (min-width: 900px) {
	.intro__lead { grid-column: 2 / -1; }
	.intro__text { grid-column: 7 / -1; margin-top: clamp(16px, 3vw, 48px); }
}

/* --------------------------------------------------------------------------
   Film reel (home)
   -------------------------------------------------------------------------- */

.film { background: var(--bg-2); }
.film__reel {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(36px, 4vw, 56px) var(--gap);
}
.reel-item__btn { display: block; width: 100%; text-align: left; }
.reel-item__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bg-3);
	border-radius: var(--radius);
}
.reel-item__media img {
	width: 100%; height: 100%; object-fit: cover;
	filter: brightness(0.8);
	transition: transform 1.4s var(--ease), filter var(--t-med) var(--ease);
}
.reel-item__btn:hover img, .reel-item__btn:focus-visible img { transform: scale(1.03); filter: brightness(0.95); }
.reel-item__play {
	position: absolute; left: 50%; top: 50%;
	display: grid; place-items: center;
	width: clamp(56px, 7vw, 104px); aspect-ratio: 1;
	border: 1px solid rgba(236, 235, 231, 0.7);
	border-radius: 50%;
	font-size: clamp(18px, 2vw, 28px);
	transform: translate(-50%, -50%);
	transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-med) var(--ease);
}
.reel-item__play svg { margin-left: 0.12em; }
.reel-item__btn:hover .reel-item__play, .reel-item__btn:focus-visible .reel-item__play {
	background: var(--ink); color: var(--bg); transform: translate(-50%, -50%) scale(1.06);
}
.reel-item__caption { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding-top: 16px; align-items: baseline; }
.reel-item--side .reel-item__play { width: 56px; font-size: 18px; }
@media (min-width: 900px) {
	.film__reel { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.reel-item--lead { grid-column: 1 / 9; grid-row: span 3; }
	.reel-item--side { grid-column: 9 / 13; }
}

/* --------------------------------------------------------------------------
   Closing / 404
   -------------------------------------------------------------------------- */

.closing, .notfound {
	position: relative;
	min-height: max(560px, 92svh);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
	background: var(--bg-black);
}
.notfound { min-height: 100svh; }
.closing__media, .notfound__media { position: absolute; inset: 0; z-index: -1; }
.closing__media img, .notfound__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.38) saturate(0.9); }
.closing__content, .notfound__content {
	padding-block: calc(var(--header-h) + 60px) clamp(64px, 10vh, 120px);
	display: grid;
	gap: clamp(20px, 2.4vw, 32px);
	justify-items: start;
}
.closing__title, .notfound__title { font-size: calc(clamp(2.3rem, 9.2vw, 12.5rem) * var(--h-scale)); }
.closing, .notfound { color: var(--on-image); }
.closing__text, .notfound__text { max-width: 40ch; color: var(--on-image-2); font-size: clamp(1rem, 0.5vw + 0.9rem, 1.25rem); }
.closing__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* --------------------------------------------------------------------------
   Work index
   -------------------------------------------------------------------------- */

.work-head {
	padding-top: calc(var(--header-h) + clamp(64px, 14vh, 180px));
	padding-bottom: clamp(40px, 6vw, 80px);
	display: grid;
	gap: clamp(20px, 3vw, 40px);
}
.work-head__title {
	display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0 0.2em;
	font-size: calc(clamp(2rem, 8.8vw, 15rem) * var(--h-scale));
	overflow-wrap: break-word;
}
.work-head__count {
	font-family: var(--f-mono);
	font-size: clamp(12px, 1.2vw, 16px);
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--ink-2);
	position: relative; top: 0.6em;
	vertical-align: baseline;
}
.work-head__desc { max-width: 52ch; color: var(--ink-2); font-size: clamp(1rem, 0.4vw + 0.95rem, 1.2rem); }

.work-bar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding-block: 10px;
	margin-bottom: clamp(40px, 6vw, 88px);
	background: var(--bg);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	transition: top 0.5s var(--ease);
}
.has-header .work-bar { top: calc(var(--header-h) - 1px); }
.filter { overflow-x: auto; scrollbar-width: none; margin-inline: -4px; }
.filter::-webkit-scrollbar { display: none; }
.filter__list { display: flex; gap: clamp(4px, 1.4vw, 20px); white-space: nowrap; }
.filter__link {
	position: relative;
	display: inline-flex; align-items: center;
	min-height: 44px;
	padding-inline: 4px;
	font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
	color: var(--ink-2);
	transition: color var(--t-fast);
}
.filter__link::after {
	content: ''; position: absolute; left: 4px; right: 4px; bottom: 8px; height: 1px;
	background: var(--accent);
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--t-med) var(--ease);
}
.filter__link:hover, .filter__link[aria-current='page'] { color: var(--ink); }
.filter__link[aria-current='page']::after { transform: scaleX(1); }

.view-toggle { display: inline-flex; border: 1px solid var(--line); }
.view-toggle[hidden] { display: none; }
.view-toggle__btn {
	min-height: 40px; padding: 0 16px;
	font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--ink-2);
	transition: background-color var(--t-fast), color var(--t-fast);
}
.view-toggle__btn[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
.view-toggle__n { opacity: 0.6; margin-left: 4px; }

.work-view { padding-bottom: var(--section); }
.work-view[hidden] { display: none !important; }
[data-work] { transition: opacity 0.35s var(--ease); }
[data-work].is-loading { opacity: 0.35; pointer-events: none; }

.empty { padding-block: 40px var(--section); color: var(--ink-2); font-size: 1.2rem; }

/* Grid: shared */
.grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	row-gap: clamp(56px, 8vw, 140px);
	align-items: start;
}
.grid__item { grid-column: 1 / -1; }
@media (max-width: 899px) {
	.grid .tile--portrait, .grid .tile--square { width: 78%; }
	.grid .tile:nth-child(even) { justify-self: end; }
}

/* All work: asymmetric editorial rhythm */
@media (min-width: 900px) {
	.grid--all .grid__item--0 { grid-column: 1 / 8; }
	.grid--all .grid__item--1 { grid-column: 9 / 13; margin-top: clamp(80px, 16vh, 220px); }
	.grid--all .grid__item--2 { grid-column: 3 / 11; }
	.grid--all .grid__item--3 { grid-column: 1 / 6; }
	.grid--all .grid__item--4 { grid-column: 7 / 13; margin-top: clamp(60px, 10vh, 160px); }
	.grid--all .grid__item--5 { grid-column: 2 / 12; }
	.grid--all .tile--portrait.grid__item--0, .grid--all .tile--portrait.grid__item--2, .grid--all .tile--portrait.grid__item--5 { grid-column: 3 / 8; }
	.grid--all .tile--portrait.grid__item--4 { grid-column: 8 / 12; }
}

/* Motorcycles: a diagonal, wide "speed" sequence */
@media (min-width: 900px) {
	.grid--motorcycles .grid__item:nth-child(odd) { grid-column: 1 / 10; }
	.grid--motorcycles .grid__item:nth-child(even) { grid-column: 4 / 13; }
	.grid--motorcycles .tile--portrait:nth-child(odd) { grid-column: 2 / 7; }
	.grid--motorcycles .tile--portrait:nth-child(even) { grid-column: 8 / 12; }
}
.grid--motorcycles .tile__title { font-size: clamp(1.2rem, 1.4vw + 0.8rem, 2.2rem); }

/* Film: a reel of 16:9 frames */
.grid--film { row-gap: clamp(48px, 6vw, 96px); }
.grid--film .tile { width: 100% !important; justify-self: stretch !important; }
.grid--film .tile__media { aspect-ratio: 16 / 9 !important; }
.grid--film .tile__img { filter: brightness(0.82); }
.grid--film .tile__link:hover .tile__img { filter: brightness(0.98); }
@media (min-width: 900px) {
	.grid--film .grid__item:nth-child(3n + 1) { grid-column: 1 / 9; }
	.grid--film .grid__item:nth-child(3n + 2) { grid-column: 9 / 13; margin-top: clamp(40px, 10vh, 140px); }
	.grid--film .grid__item:nth-child(3n) { grid-column: 3 / 11; }
}

/* Photography projects view: quiet columns */
.grid--photography { display: block; columns: 1; column-gap: var(--gap); }
.grid--photography .tile { width: 100% !important; break-inside: avoid; margin-bottom: clamp(48px, 6vw, 96px); }
@media (min-width: 700px) { .grid--photography { columns: 2; } }
@media (min-width: 1200px) { .grid--photography { columns: 3; } }

/* Image wall (exhibition view) */
.wall { columns: 1; column-gap: clamp(12px, 1.6vw, 28px); }
@media (min-width: 640px) { .wall { columns: 2; } }
@media (min-width: 1100px) { .wall { columns: var(--wall-cols); } }
.wall__item { break-inside: avoid; margin-bottom: clamp(20px, 2.4vw, 40px); }
.wall__btn { display: block; width: 100%; cursor: zoom-in; }
.wall__media { display: block; overflow: hidden; background: var(--bg-3); border-radius: var(--radius); }
.wall__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity var(--t-med); }
.wall__btn:hover img, .wall__btn:focus-visible img { transform: scale(1.025); }
.wall__cap {
	display: flex; justify-content: space-between; gap: 12px;
	padding-top: 10px;
	font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--ink-3);
}
.wall__cap a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Project page
   -------------------------------------------------------------------------- */

.project-hero {
	position: relative;
	min-height: max(420px, var(--cover-h, 100svh));
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
	background: var(--bg-black);
}
.project-hero__media { position: absolute; inset: 0; z-index: -2; }
.project-hero__img { width: 100%; height: 100%; object-fit: cover; }
.project-hero__scrim {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to top, rgba(5, 5, 5, 0.88) 0%, rgba(5, 5, 5, 0.25) 42%, rgba(5, 5, 5, 0) 70%);
}
.project-hero__content {
	display: grid; gap: clamp(16px, 2vw, 28px);
	padding-bottom: clamp(48px, 9vh, 112px);
}
.project-hero { color: var(--on-image); }
.project-hero__title { font-size: calc(clamp(2.2rem, 8.8vw, 12rem) * var(--h-scale)); max-width: 16ch; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
	.js .project-hero__content { animation: fade-up 1.1s var(--ease) 0.2s both; }
}

/* Cover styles without a full-bleed photo */
.project-cover { padding-top: calc(var(--header-h, 88px) + clamp(40px, 8vw, 120px)); }
.project-cover__text { display: grid; gap: clamp(16px, 2vw, 28px); align-content: end; }
.project-cover__title { font-size: calc(clamp(2.2rem, 7.4vw, 10rem) * var(--h-scale)); max-width: 16ch; overflow-wrap: anywhere; }
.project-cover__media { overflow: hidden; border-radius: var(--radius); background: var(--bg-3); }
.project-cover__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-cover--split { display: grid; gap: clamp(28px, 4vw, 64px); align-items: end; }
@media (min-width: 900px) {
	.project-cover--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.project-cover--split .project-cover__title { font-size: calc(clamp(2.2rem, 5.4vw, 7.6rem) * var(--h-scale)); }
}
.project-cover--split .project-cover__media { max-height: 82svh; }
.project-cover--contained { display: grid; gap: clamp(32px, 5vw, 80px); }
.project-cover--contained .project-cover__media { padding: 0; max-width: calc(var(--max) - 0px); }
.project-cover--contained .project-cover__media img { max-height: 86svh; }
.project-cover--none { padding-bottom: clamp(8px, 2vw, 24px); }
.project-cover--none .project-cover__title { font-size: calc(clamp(2.6rem, 10vw, 14rem) * var(--h-scale)); }
@media (prefers-reduced-motion: no-preference) {
	.js .project-cover__text { animation: fade-up 1.1s var(--ease) 0.2s both; }
}

.project-info {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 40px var(--gap);
	padding-block: clamp(64px, 9vw, 140px);
}
.project-info__meta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); align-content: start; }
.project-info__meta > div { padding-block: 14px; border-top: 1px solid var(--line); }
.project-info__meta dt { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: 4px; }
.project-info__meta dd { font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.project-info__meta a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.project-info__body { grid-column: 1 / -1; }
.project-info__lead { font-size: clamp(1.3rem, 1vw + 1rem, 2rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 1.2em; max-width: 34ch; }
@media (min-width: 900px) {
	.project-info__meta { grid-column: 1 / 5; grid-template-columns: 1fr; }
	.project-info__body { grid-column: 6 / -1; }
}

.project-film { padding-bottom: clamp(64px, 9vw, 140px); }

/* Photo sequence: 12-column rows, each photo has its own size and place (set per project in the studio). */
.seq {
	--seq-gap: clamp(32px, 7vw, 140px);
	display: grid;
	gap: var(--seq-gap);
	padding-bottom: var(--section);
}
.seq--gap-compact { --seq-gap: clamp(12px, 1.6vw, 28px); }
.seq--gap-large { --seq-gap: clamp(56px, 11vw, 220px); }
.seq-row--full { padding-inline: clamp(0px, 1.6vw, 28px); }
.seq-row--grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	align-items: start;
}
.seq-item { grid-column: var(--start, 1) / span var(--span, 12); min-width: 0; }
.seq-item--drop { margin-top: clamp(24px, 8vw, 140px); }
.seq--gap-compact .seq-item--drop { margin-top: clamp(16px, 4vw, 72px); }
@media (max-width: 760px) {
	.seq-row--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--seq-gap); }
	.seq-item { grid-column: 1 / -1; }
	.seq-row--multi .seq-item--small, .seq-row--multi .seq-item--medium { grid-column: auto / span 1; }
	.seq-row--multi .seq-item--drop { margin-top: 36px; }
	.seq-row--grid:not(.seq-row--multi) .seq-item--small { grid-column: 1 / span 2; width: 72%; }
	.seq-row--grid:not(.seq-row--multi) .seq-item--medium { width: 86%; }
	.seq-row--grid:not(.seq-row--multi) .seq-item[style*="--start:1;"] { justify-self: start; }
	.seq-row--grid:not(.seq-row--multi) .seq-item:not([style*="--start:1;"]) { justify-self: end; }
}
.frame__btn { display: block; width: 100%; cursor: zoom-in; }
.frame__media { display: block; overflow: hidden; background: var(--bg-3); border-radius: var(--radius); }
.frame__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.frame__btn:hover img { transform: scale(1.012); }
.frame__cap {
	display: flex; gap: 16px;
	padding-top: 12px;
	font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--ink-3);
}
.seq-row--full .frame__cap { padding-inline: var(--gutter); }
.seq-clip__media { position: relative; }
.seq-clip__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.seq-text { align-self: center; color: var(--ink-2); max-width: 62ch; }
.seq-text p { margin: 0 0 1em; font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.3rem); line-height: 1.6; }
.seq-text p:last-child { margin-bottom: 0; }
.seq-text--statement { color: var(--ink); max-width: none; }
.seq-text--statement p {
	font-family: var(--f-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: var(--display-case);
	font-size: calc(clamp(1.8rem, 4.2vw, 5rem) * var(--h-scale)); line-height: 1; letter-spacing: -0.02em; overflow-wrap: anywhere;
}
.seq-row--full .seq-text { padding-inline: var(--gutter); max-width: none; }
.seq-row--grid .seq-item--wide.seq-text--body { max-width: 62ch; justify-self: center; }

/* Before / after */
.seq-compare__media { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; }
.seq-compare__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seq-compare__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.seq-compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--on-image); box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
.seq-compare__knob { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid var(--on-image); background: rgba(10,10,10,.45); backdrop-filter: blur(6px); }
.seq-compare__knob::before, .seq-compare__knob::after { content: ''; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; }
.seq-compare__knob::before { left: 7px; border-right-color: var(--on-image); }
.seq-compare__knob::after { right: 7px; border-left-color: var(--on-image); }
.seq-compare__tag { position: absolute; top: 14px; padding: 4px 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-image); background: rgba(10,10,10,.5); border-radius: 2px; pointer-events: none; }
.seq-compare__tag--before { left: 14px; }
.seq-compare__tag--after { right: 14px; }
.seq-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.seq-compare__range:focus-visible + .seq-compare__line, .seq-compare__media:has(.seq-compare__range:focus-visible) .seq-compare__knob { outline: 2px solid var(--accent); outline-offset: 3px; }
.seq-row--full .seq-compare .frame__cap { padding-inline: var(--gutter); }

/* Credits */
.project-credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px 28px; margin: clamp(32px, 4vw, 56px) 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.project-credits div { display: grid; gap: 6px; }
.project-credits dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.project-credits dd { margin: 0; color: var(--ink); }

/* Behind the scenes */
.bts { padding-bottom: var(--section); }
.bts__head { display: grid; gap: 14px; margin-bottom: clamp(24px, 3vw, 40px); }
.bts__title { font-family: var(--f-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: var(--display-case); font-size: calc(clamp(1.6rem, 3.2vw, 3.2rem) * var(--h-scale)); line-height: 1; }
.bts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); margin: 0; padding: 0; list-style: none; }
@media (max-width: 760px) { .bts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bts__btn { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--bg-3); cursor: zoom-in; }
.bts__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .4s; filter: grayscale(.25); }
.bts__btn:hover img { transform: scale(1.03); filter: none; }
.jf-no-zoom .bts__btn:hover img { transform: none; }

/* Homepage arranged by hand + showreel button */
.seq--home { padding-bottom: 0; }
.seq--home .seq-row--full { margin-inline: calc(var(--gutter) * -1); padding-inline: 0; }
.seq--home .seq-row--full .tile__caption { padding-inline: var(--gutter); }
.seq--home .home-tile { width: 100%; }
.hero__reel { gap: 10px; }
.btn--ghost { background: transparent; border-color: color-mix(in srgb, currentColor 45%, transparent); }
.btn--ghost svg { width: 12px; height: 12px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__actions:empty { display: none; }

/* Extra filters (Verfijn) */
.refine { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: clamp(24px, 3vw, 40px); }
.refine__label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.refine__field select {
	appearance: none; -webkit-appearance: none;
	padding: 9px 34px 9px 14px; border: 1px solid var(--line-2); border-radius: 999px;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center;
	color: var(--ink); font: inherit; font-size: 14px; cursor: pointer;
}
.refine__field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.refine__field select option { background: var(--bg-2); color: var(--ink); }
.refine__count { font-size: 13px; color: var(--ink-3); }
.work .tile[hidden], .wall__item[hidden], .refine [hidden] { display: none !important; }

/* Availability */
.availability { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.availability__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #2fbf71; flex: none; }
.availability--limited .availability__dot { background: #f0a020; }
.availability--full .availability__dot { background: var(--accent); }
.availability--open .availability__dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #2fbf71; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
	.availability--open .availability__dot::after { animation: jf-ping 2.4s var(--ease) infinite; }
}
@keyframes jf-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
.jf-no-anim .availability__dot::after { animation: none !important; }
.contact__availability { margin: 0 0 clamp(20px, 2.5vw, 32px); }
.site-footer__availability { flex-basis: 100%; }

/* Quote fields */
.form__quote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px var(--gap); margin: 0; padding: 18px 0 4px; border: 0; border-top: 1px solid var(--line); grid-column: 1 / -1; }
.form__quote legend { padding: 0 0 4px; }
@media (max-width: 640px) { .form__quote { grid-template-columns: 1fr; } }
.field__opt { margin-left: 6px; color: var(--ink-3); text-transform: none; letter-spacing: 0; font-family: inherit; }
.field__label--sub { color: var(--ink-3); }
.field__select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center; }
.field__select option { background: var(--bg-2); color: var(--ink); }
.form__quote input[type="date"] { color-scheme: inherit; }
.site-footer__availability { order: 3; }

/* Client galleries */
.client { padding-top: calc(var(--header-h) + clamp(48px, 9vh, 120px)); padding-bottom: var(--section); }
.client__head, .client-lock { display: grid; gap: clamp(16px, 2vw, 24px); margin-bottom: clamp(32px, 5vw, 64px); max-width: 900px; }
.client__title { font-family: var(--f-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: var(--display-case); font-size: calc(clamp(2.2rem, 6vw, 6.5rem) * var(--h-scale)); line-height: .95; overflow-wrap: anywhere; }
.client__intro { color: var(--ink-2); max-width: 60ch; }
.client__meta, .client-lock__text { color: var(--ink-2); margin: 0; }
.client__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.client__actions .btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.client-lock { min-height: 50svh; align-content: center; }
.client-lock__form { display: grid; gap: 10px; max-width: 520px; }
.client-lock__row { display: flex; gap: 10px; flex-wrap: wrap; }
.client-lock__row .field__input { flex: 1 1 240px; }
.client-lock__help { margin: 0; color: var(--ink-3); font-size: 14px; }
.client__grid { columns: 3 320px; column-gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.client-photo { break-inside: avoid; margin: 0 0 var(--gap); }
.client-photo[hidden] { display: none; }
.client-photo__open { display: block; width: 100%; cursor: zoom-in; }
.client-photo__media { display: block; overflow: hidden; border-radius: var(--radius); background: var(--bg-3); }
.client-photo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.client-photo.is-fav .client-photo__media { outline: 2px solid var(--accent); outline-offset: 3px; }
.client-photo__bar { display: flex; align-items: center; gap: 12px; padding-top: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); }
.client-photo__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-photo__dl, .client-photo__fav { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink); transition: background-color .2s, color .2s, border-color .2s; }
.client-photo__dl svg, .client-photo__fav svg { width: 18px; height: 18px; }
.client-photo__dl:hover, .client-photo__fav:hover { border-color: var(--ink); }
.client-photo__fav[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.client-photo__fav[aria-pressed="true"] path { fill: currentColor; }
.client-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.client-tray[hidden] { display: none; }
.client-tray__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 14px max(14px, env(safe-area-inset-bottom)); }
.client-tray__count { margin: 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.client-tray__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.has-client-tray .site-footer { padding-bottom: 96px; }
.client-send { width: min(520px, calc(100% - 32px)); padding: clamp(24px, 4vw, 36px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); color: var(--ink); }
.client-send::backdrop { background: rgba(0,0,0,.6); }
.client-send__form { display: grid; gap: 18px; }
.client-send__title { font-family: var(--f-display); font-weight: var(--display-weight); text-transform: var(--display-case); font-size: 1.8rem; line-height: 1; }
.client-send__text { margin: 0; color: var(--ink-2); }
.client-send__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Language switch */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; }
.lang-switch a { color: color-mix(in srgb, currentColor 55%, transparent); padding: 6px 2px; transition: color .2s; }
.lang-switch a:hover, .lang-switch a[aria-current] { color: currentColor; }
.lang-switch span { opacity: .4; }
.site-header__lang { display: none; margin-left: clamp(18px, 2.4vw, 40px); }
@media (min-width: 960px) { .site-header__lang { display: inline-flex; } .site-header__inner .nav { margin-left: auto; } }
.mobile-menu__lang { font-size: 13px; }
.preview-bar { position: fixed; left: 50%; bottom: 16px; z-index: 200; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(0,0,0,.3); pointer-events: none; }

.next-project { border-top: 1px solid var(--line); }
.next-project__link {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: max(420px, 72svh);
	overflow: hidden;
	isolation: isolate;
	background: var(--bg-black);
}
.next-project__media { position: absolute; inset: 0; z-index: -1; }
.next-project__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.42); transform: scale(1.03); transition: filter 1s var(--ease), transform 1.6s var(--ease); }
.next-project__link:hover .next-project__media img, .next-project__link:focus-visible .next-project__media img { filter: brightness(0.62); transform: scale(1); }
.next-project__content { display: grid; gap: 20px; padding-block: clamp(48px, 8vh, 96px); }
.next-project__link { color: var(--on-image); }
.next-project__title { display: flex; align-items: center; gap: 0.25em; font-size: calc(clamp(2rem, 8vw, 9rem) * var(--h-scale)); }
.next-project__title svg { width: 0.6em; height: 0.6em; transition: transform var(--t-med) var(--ease); }
.next-project__link:hover .next-project__title svg { transform: translateX(0.12em); }

/* --------------------------------------------------------------------------
   Video player
   -------------------------------------------------------------------------- */

.player { position: relative; background: var(--bg-black); }
.player__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: var(--radius); color: var(--on-image); }
.player__poster { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.72); transition: filter var(--t-med) var(--ease), transform 1.4s var(--ease); }
.player__start {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
	width: 100%;
}
.player__ring {
	display: grid; place-items: center;
	width: clamp(64px, 8vw, 120px); aspect-ratio: 1;
	border: 1px solid rgba(236, 235, 231, 0.75);
	border-radius: 50%;
	font-size: clamp(20px, 2.4vw, 32px);
	transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-med) var(--ease);
}
.player__ring svg { margin-left: 0.12em; }
.player__meta { display: flex; gap: 16px; font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; }
.player__dur { color: var(--ink-2); }
.player__start:hover .player__ring, .player__start:focus-visible .player__ring { background: var(--ink); color: var(--bg); transform: scale(1.05); }
.player__start:hover ~ .player__poster, .player__stage:hover .player__poster { filter: brightness(0.85); }
.player__notice {
	position: absolute; left: 16px; bottom: 12px;
	font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-2);
	pointer-events: none;
}
.player__fallback { display: inline-block; padding: 16px; }
.player__video, .player__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.player__video { object-fit: contain; }
.player.is-playing .player__poster, .player.is-playing .player__start, .player.is-playing .player__notice { display: none; }

.controls {
	position: absolute; left: 0; right: 0; bottom: 0;
	display: flex; align-items: center; gap: 14px;
	padding: 40px 16px 12px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em;
	transition: opacity 0.4s var(--ease);
}
.player.is-idle .controls { opacity: 0; }
.player.is-idle { cursor: none; }
.controls__btn { display: grid; place-items: center; width: 40px; height: 40px; font-size: 18px; }
.controls__btn:hover { color: var(--accent); }
.controls__time { min-width: 10ch; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.controls__range {
	flex: 1;
	-webkit-appearance: none; appearance: none;
	height: 24px;
	background: transparent;
	cursor: pointer;
	--p: 0%;
}
.controls__range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--ink) var(--p), rgba(236, 235, 231, 0.25) var(--p)); }
.controls__range::-moz-range-track { height: 2px; background: rgba(236, 235, 231, 0.25); }
.controls__range::-moz-range-progress { height: 2px; background: var(--ink); }
.controls__range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border-radius: 50%; background: var(--ink); }
.controls__range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--ink); }

/* --------------------------------------------------------------------------
   Lightbox & video dialog
   -------------------------------------------------------------------------- */

.lightbox, .video-dialog {
	width: 100vw; height: 100dvh;
	max-width: none; max-height: none;
	margin: 0; padding: 0;
	border: 0;
	background: rgba(5, 5, 5, 0.97);
	overflow: hidden;
}
.lightbox::backdrop, .video-dialog::backdrop { background: #000; }
.lightbox[open], .video-dialog[open] { display: grid; grid-template-rows: auto 1fr; }
@media (prefers-reduced-motion: no-preference) {
	.lightbox[open], .video-dialog[open] { animation: dialog-in 0.45s var(--ease) both; }
}
@keyframes dialog-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox__bar, .video-dialog__bar {
	display: flex; align-items: center; gap: 16px;
	padding: 12px var(--gutter);
	min-height: 72px;
}
.lightbox__count, .lightbox__title, .video-dialog__title {
	font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-2);
}
.lightbox__count { color: var(--ink); font-variant-numeric: tabular-nums; }
.lightbox__title, .video-dialog__title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-dialog__title { color: var(--ink); }

.lightbox__stage {
	position: relative;
	display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center;
	gap: 12px;
	min-height: 0;
	padding: 0 clamp(8px, 7vw, 120px) clamp(16px, 3vh, 32px);
	touch-action: pan-y;
}
.lightbox__img {
	max-width: 100%;
	max-height: calc(100dvh - 72px - 72px);
	width: auto; height: auto;
	object-fit: contain;
	transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
	user-select: none;
}
.lightbox__img.is-loading { opacity: 0; transform: scale(0.985); }
.lightbox__caption {
	min-height: 1.4em;
	font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-2); text-align: center;
	max-width: 70ch;
}
.lightbox__nav {
	position: absolute; top: 50%;
	transform: translateY(-50%);
	background: rgba(5, 5, 5, 0.5);
}
.lightbox__nav--prev { left: clamp(8px, 2vw, 32px); }
.lightbox__nav--next { right: clamp(8px, 2vw, 32px); }
.lightbox.is-single .lightbox__nav { display: none; }
@media (max-width: 640px) {
	.lightbox__nav { top: auto; bottom: 16px; transform: none; }
	.lightbox__stage { padding-bottom: 80px; }
	.lightbox__img { max-height: calc(100dvh - 72px - 120px); }
}

.video-dialog__body {
	display: grid; place-items: center;
	min-height: 0;
	padding: 0 var(--gutter) clamp(16px, 4vh, 48px);
}
.video-dialog__body .player { width: min(100%, 1600px, calc((100dvh - 140px) * 16 / 9)); }
.video-dialog__link { white-space: nowrap; }
@media (max-width: 640px) { .video-dialog__link { display: none; } }

/* --------------------------------------------------------------------------
   Pages: generic, about, contact
   -------------------------------------------------------------------------- */

.page-wrap { padding-top: calc(var(--header-h) + clamp(64px, 12vh, 160px)); padding-bottom: var(--section); }
.page-head { display: grid; gap: 24px; margin-bottom: clamp(40px, 6vw, 80px); }
.page-head__title { font-size: calc(clamp(2.2rem, 8.8vw, 10rem) * var(--h-scale)); overflow-wrap: anywhere; }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.prose h2, .prose h3 { font-family: var(--f-display); font-stretch: 115%; text-transform: uppercase; line-height: 1.05; margin-top: 2em; color: var(--ink); }
.prose h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.4rem); }
.prose h3 { font-size: 1.2rem; }
.prose ul { list-style: square; padding-left: 1.2em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose img { height: auto; }
.prose figure { margin-block: 2em; }
.prose figcaption { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: 1em; font-size: 1.2em; color: var(--ink); }
.plain-list { display: grid; gap: 8px; }

.about-hero {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 48px var(--gap);
	padding-top: calc(var(--header-h) + clamp(56px, 12vh, 160px));
	padding-bottom: clamp(48px, 8vw, 120px);
	align-items: end;
}
.about-hero__text { grid-column: 1 / -1; display: grid; gap: clamp(20px, 3vw, 40px); }
.about-hero__title { font-size: calc(clamp(2.4rem, 11vw, 13rem) * var(--h-scale)); }
.about-hero__intro { font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.3rem); }
.about-hero__media { grid-column: 1 / -1; display: grid; gap: 16px; }
.about-hero__frame { display: block; overflow: hidden; background: var(--bg-3); max-height: 82svh; border-radius: var(--radius); }
.about-hero__frame img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
	.about-hero__text { grid-column: 1 / 8; }
	.about-hero__media { grid-column: 8 / 13; }
}

.about-vision { border-top: 1px solid var(--line); }
.about-vision .wrap { display: grid; gap: clamp(28px, 4vw, 56px); }
.about-vision__quote {
	font-family: var(--f-display);
	font-weight: 450;
	font-size: calc(clamp(1.8rem, 4.4vw, 5rem) * var(--h-scale));
	line-height: 1.05;
	letter-spacing: -0.03em;
	max-width: 24ch;
	text-indent: 2.2em;
}

.about-split {
	display: grid; gap: clamp(64px, 8vw, 120px) var(--gap);
	border-top: 1px solid var(--line);
}
.about-split > div { display: grid; gap: 24px; align-content: start; }
.about-split__title { font-family: var(--f-display); font-stretch: var(--display-stretch); font-variation-settings: 'wdth' var(--display-wdth); font-weight: var(--display-weight); font-size: calc(clamp(1.8rem, 3vw, 3rem) * var(--h-scale)); text-transform: var(--display-case); line-height: 1; }
@media (min-width: 900px) {
	.about-split { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.about-gear { grid-column: 1 / 6; }
	.about-process { grid-column: 7 / 13; }
}
.spec__row { display: grid; grid-template-columns: minmax(8ch, 34%) 1fr; gap: 16px; padding-block: 14px; border-top: 1px solid var(--line); }
.spec__row:last-child { border-bottom: 1px solid var(--line); }
.spec dt { font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); padding-top: 3px; }
.steps { display: grid; }
.steps__item { display: grid; grid-template-columns: 4ch 1fr; gap: 4px 16px; padding-block: 20px; border-top: 1px solid var(--line); }
.steps__item:last-child { border-bottom: 1px solid var(--line); }
.steps__num { grid-row: span 2; font-family: var(--f-mono); font-size: 12px; color: var(--accent); padding-top: 4px; }
.steps__title { font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; font-stretch: 112%; }
.steps__text { color: var(--ink-2); grid-column: 2; }

.about-cta { padding-top: 0; }
.about-cta__link { display: grid; gap: 20px; padding-block: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-cta__title { display: flex; align-items: center; gap: 0.25em; font-size: calc(clamp(2.2rem, 7vw, 7.5rem) * var(--h-scale)); }
.about-cta__title svg { width: 0.6em; height: 0.6em; transition: transform var(--t-med) var(--ease); }
.about-cta__link:hover .about-cta__title svg { transform: translateX(0.15em); }

.contact {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 64px var(--gap);
	padding-top: calc(var(--header-h) + clamp(56px, 12vh, 160px));
	padding-bottom: var(--section);
}
.contact__head { grid-column: 1 / -1; display: grid; gap: clamp(20px, 3vw, 36px); align-content: start; }
.contact__title { font-size: calc(clamp(2.4rem, 9.5vw, 10rem) * var(--h-scale)); }
.contact__dot { color: var(--accent); }
.contact__intro { font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.3rem); }
.contact__direct { display: grid; }
.contact__direct li { display: grid; grid-template-columns: 12ch 1fr; gap: 16px; padding-block: 14px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.04em; }
.contact__direct li:last-child { border-bottom: 1px solid var(--line); }
.contact__k { text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); font-size: 11px; padding-top: 2px; }
.contact__direct a { overflow-wrap: anywhere; }
.contact__direct a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.contact__form-wrap { grid-column: 1 / -1; }
@media (min-width: 1000px) {
	.contact__head { grid-column: 1 / 6; }
	.contact__form-wrap { grid-column: 7 / 13; padding-top: clamp(0px, 8vw, 120px); }
}

.form { display: grid; grid-template-columns: 1fr; gap: 28px var(--gap); }
@media (min-width: 640px) { .form { grid-template-columns: 1fr 1fr; } }
.form[hidden] { display: none; }
.field { display: grid; gap: 8px; }
.field--full, .form__status, .form__foot { grid-column: 1 / -1; }
.field__label { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-2); }
.field__input {
	width: 100%;
	min-height: 52px;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--line-2);
	border-radius: 0;
	background: transparent;
	font-size: 1.15rem;
	color: var(--ink);
	transition: border-color var(--t-fast);
}
.field__input--area { resize: vertical; min-height: 160px; line-height: 1.5; }
.field__input:hover { border-bottom-color: var(--ink-2); }
.field__input:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
.field__input:focus-visible { outline: none; }
.field__input[aria-invalid='true'] { border-bottom-color: var(--error); box-shadow: 0 1px 0 0 var(--error); }
.field__error { min-height: 1.2em; font-family: var(--f-mono); font-size: 12px; color: var(--error); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { padding: 14px 16px; border-left: 2px solid var(--error); background: rgba(255, 122, 102, 0.08); font-size: 0.95rem; }
.form__status[hidden] { display: none; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 8px; }
.form__note { font-size: 0.9rem; color: var(--ink-3); max-width: 34ch; }
.form-success { display: grid; gap: 20px; justify-items: start; padding-block: 24px; outline: none; }
.form-success[hidden] { display: none; }
.form-success__title { font-family: var(--f-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-variation-settings: 'wdth' var(--display-wdth); font-size: calc(clamp(3rem, 7vw, 6rem) * var(--h-scale)); line-height: 0.9; text-transform: var(--display-case); }
.form-success__text { color: var(--ink-2); max-width: 40ch; font-size: 1.1rem; }

/* Editor-only placeholders */
.placeholder {
	display: grid; gap: 6px;
	padding: 18px 20px;
	border: 1px dashed rgba(236, 235, 231, 0.35);
	font-size: 0.95rem;
	color: var(--ink-2);
	max-width: 60ch;
}
.placeholder__tag { justify-self: start; padding: 3px 8px; background: var(--accent); color: #fff; font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; }
.placeholder__where { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
	padding-top: clamp(64px, 8vw, 120px);
	padding-bottom: max(24px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--line);
	background: var(--bg);
}
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px 48px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 28px; font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); }
.site-footer__links a:hover { color: var(--ink); }
.site-footer__mark {
	margin-block: clamp(40px, 6vw, 80px) clamp(24px, 3vw, 40px);
	font-family: var(--f-display); font-weight: max(600, var(--display-weight)); font-stretch: var(--display-stretch); font-variation-settings: 'wdth' var(--display-wdth);
	font-size: clamp(3.4rem, 17.5vw, 22rem);
	line-height: 0.78;
	letter-spacing: -0.04em;
	text-transform: var(--display-case);
	color: var(--bg-3);
	-webkit-text-stroke: 1px var(--line);
	white-space: nowrap;
	overflow: hidden;
	user-select: none;
}
.site-footer__bottom {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
	color: var(--ink-3);
}
.back-top { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.back-top svg { transform: rotate(180deg); }
.back-top:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Layout choices from "Website aanpassen"
   -------------------------------------------------------------------------- */

.editorial--grid2, .editorial--grid3, .editorial--stack { row-gap: clamp(40px, 5vw, 80px); }
.editorial--grid2 .editorial__item, .editorial--grid3 .editorial__item, .editorial--stack .editorial__item {
	grid-column: 1 / -1 !important; margin: 0 !important; width: auto !important; justify-self: stretch !important;
}
.editorial--grid2 .editorial__item .tile__caption, .editorial--grid3 .editorial__item .tile__caption, .editorial--stack .editorial__item .tile__caption { padding-inline: 0; }
.editorial--grid2 .tile__media, .editorial--grid3 .tile__media { aspect-ratio: 4 / 3 !important; }
.editorial--stack .tile__media { aspect-ratio: 16 / 9 !important; }
@media (min-width: 700px) {
	.editorial--grid2 .editorial__item, .editorial--grid3 .editorial__item { grid-column: span 6 !important; }
}
@media (min-width: 1100px) {
	.editorial--grid3 .editorial__item { grid-column: span 4 !important; }
}

/* Things that always sit on dark images or overlays keep light text, whatever the colour scheme. */
.lightbox, .video-dialog, .player__stage, .reel-item__media, .tile__play {
	--ink: var(--on-image); --ink-2: var(--on-image-2); --bg: #0b0b0b; --line: rgba(242, 241, 237, 0.16);
	color: var(--on-image);
}

.jf-no-zoom .tile__link:hover .tile__img, .jf-no-zoom .tile__link:focus-visible .tile__img,
.jf-no-zoom .reel-item__btn:hover img, .jf-no-zoom .wall__btn:hover img, .jf-no-zoom .frame__btn:hover img,
.jf-no-zoom .next-project__link:hover .next-project__media img { transform: none; }
.jf-no-mark .site-footer__mark { display: none; }
.jf-no-mark .site-footer__bottom { margin-top: clamp(40px, 6vw, 80px); }

/* --------------------------------------------------------------------------
   Scroll reveal (content stays visible without JS and with reduced motion)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
	.js .reveal.is-in { opacity: 1; transform: none; }
	.js .tile.reveal .tile__media { clip-path: inset(6% 0 0 0); transition: clip-path 1.3s var(--ease); }
	.js .tile.reveal.is-in .tile__media { clip-path: inset(0); }
}

/* Animations switched off in "Website aanpassen" */
.jf-no-anim .reveal, .js .jf-no-anim .reveal { opacity: 1 !important; transform: none !important; }
.jf-no-anim .tile.reveal .tile__media { clip-path: none !important; }
.jf-no-anim .hero__img, .jf-no-anim .hero__bars span, .jf-no-anim .hero__line > span, .jf-no-anim .hero__kicker,
.jf-no-anim .hero__foot, .jf-no-anim .project-hero__content, .jf-no-anim .project-cover__text, .jf-no-anim .hero__scroll-track span { animation: none !important; }

/* --------------------------------------------------------------------------
   Page transitions (cross-document View Transitions, progressive)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-old(root) { animation: 0.35s var(--ease) both vt-out; }
	::view-transition-new(root) { animation: 0.55s var(--ease) 0.1s both vt-in; }
	::view-transition-group(*) { animation-duration: 0.7s; animation-timing-function: var(--ease); }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* --------------------------------------------------------------------------
   Reduced motion: everything static, nothing hidden
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
	.hero__video { display: none; }
}

@media print {
	.site-header, .mobile-menu, .lightbox, .video-dialog, .hero__bars, .hero__scroll { display: none !important; }
	.reveal { opacity: 1 !important; transform: none !important; }
	body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   Instagram & socials band (home)
   -------------------------------------------------------------------------- */

.social-band { border-top: 1px solid var(--line); }
.social-band__inner { display: grid; gap: clamp(18px, 2.4vw, 32px); justify-items: start; }
.social-band__title { max-width: 100%; font-size: min(calc(clamp(2.2rem, 8vw, 9rem) * var(--h-scale)), calc((100vw - 2 * var(--gutter)) / (var(--len, 12) * 0.62 + 0.8))); line-height: 1; text-transform: none; overflow-wrap: anywhere; }
.social-band__title a { transition: color var(--t-fast) var(--ease); }
.social-band__title a:hover { color: var(--accent); }
.social-band__title svg { display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.2em; vertical-align: 0.1em; transform: rotate(-45deg); }
.social-band__text { max-width: 44ch; color: var(--ink-2); font-size: clamp(1rem, 0.5vw + 0.9rem, 1.25rem); }
.social-band__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   Phones: calmer, aligned layout
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
	:root { --section: calc(clamp(64px, 16vw, 96px) * var(--space-scale)); }

	/* Project and home sequences: one clean column, same left and right edge everywhere. */
	.seq-row--grid .seq-item,
	.seq-row--grid:not(.seq-row--multi) .seq-item--small,
	.seq-row--grid:not(.seq-row--multi) .seq-item--medium { grid-column: 1 / -1; width: auto; justify-self: stretch; }
	.seq-item--drop, .seq-row--multi .seq-item--drop, .seq--gap-compact .seq-item--drop { margin-top: 0; }
	.seq-row--full { padding-inline: 0; }
	.seq-row--full .seq-text { padding-inline: var(--gutter); }

	/* Overview grids: no narrow, shifted tiles. */
	.grid .tile--portrait, .grid .tile--square,
	.editorial .tile--portrait:not(.editorial__item--0), .editorial .tile--square:not(.editorial__item--0) { width: auto; }
	.grid .tile:nth-child(even) { justify-self: stretch; }
	.grid { row-gap: 48px; }

	/* Photo wall: two columns, like a contact sheet. */
	.wall { columns: 2; column-gap: 10px; }
	.wall__item { margin-bottom: 14px; }

	/* Buttons: full width and the same size. */
	.hero__actions, .closing__actions, .social-band__list { display: grid; grid-template-columns: 1fr; width: 100%; }
	.hero__actions .btn, .closing__actions .btn, .social-band__list .btn, .form__foot .btn, .client__actions .btn { width: 100%; }
	.closing { min-height: max(480px, 72svh); }
	.hero__foot { max-width: none; }
	.wrap-wide { padding-inline: var(--gutter); }

	/* Project facts: one tidy column of lines. */
	.project-info__meta { grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
	.project-info__meta > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

	/* Category filter: show that it scrolls sideways. */
	.filter { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }

	/* Forms: less empty space between fields. */
	.form { gap: 20px; }
	.field { gap: 4px; }
	.field__input { min-height: 46px; }
	.field__input--area { min-height: 130px; }

	/* Footer: everything stacked, easy to tap. */
	.site-footer__top { flex-direction: column; gap: 20px; }
	.site-footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; width: 100%; }
	.site-footer__links a { display: flex; align-items: center; min-height: 44px; }
	.site-footer__bottom { flex-direction: column; }
	.back-top { min-height: 44px; }
	.site-header__brand { padding-block: 12px; }
}

/* The optional "about the assignment" group: line above the title, not through it. */
.form__quote { border-top: 0; padding-top: 0; }
.form__quote legend { float: left; grid-column: 1 / -1; width: 100%; padding: 18px 0 4px; border-top: 1px solid var(--line); }