/*
 * JSKR Invest — globale CSS-basis (MVP 2.1: design system en globale basis).
 *
 * Bron: A3-overdracht (`A3 - Overdracht specificatie.md` §3–§9, §12–§13) en de
 * A3-bestanden `A3 - *.dc.html`, `A3Header`, `A3Footer`. Waarden zijn één-op-één
 * overgenomen; waar spec en HTML verschillen volgt de HTML (visuele bron van
 * waarheid volgens de spec) en staat dat bij de regel vermeld.
 *
 * Inhoud:
 *   1. Fonts (self-hosted, OFL — zie assets/fonts/*\/OFL.txt)
 *   2. Design tokens
 *   3. Responsive tokens (breakpoints: <900 mobiel · 900–1199 tablet · ≥1200 desktop)
 *   4. Basis (html/body, selectie, links, headings, focus)
 *   5. Typografie-classes
 *   6. Oppervlakken (donker / licht)
 *   7. Layout: container, secties, grids
 *   8. Primitives: button, text link, label, status
 *   9. Toegankelijkheid
 *  10. Reduced motion
 *  11. Shell (MVP 2.2)
 *  12. Motion-primitives: reveal, clip-reveal, pagina-overgang (MVP 2.3)
 *
 * Shell: sectie 11 (MVP 2.2). Globale motion: sectie 12 (MVP 2.3). Pagina's en
 * component-specifieke motion volgen in latere taken.
 */

/* ==========================================================================
   1. Fonts — Cormorant Garamond 300/400 (+ italic), Jost 300/400/500 (§4, §13)
   Bestanden: latin + latin-ext, woff2. Geen externe font-requests.
   ========================================================================== */

/* Cormorant Garamond — latin */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/cormorant-garamond/cormorant-garamond-latin-300-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/cormorant-garamond/cormorant-garamond-latin-300-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cormorant-garamond/cormorant-garamond-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cormorant-garamond/cormorant-garamond-latin-400-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cormorant Garamond — latin-ext */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/cormorant-garamond/cormorant-garamond-latin-ext-300-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/cormorant-garamond/cormorant-garamond-latin-ext-300-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cormorant-garamond/cormorant-garamond-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cormorant-garamond/cormorant-garamond-latin-ext-400-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Jost — latin */
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/jost/jost-latin-300-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/jost/jost-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/jost/jost-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Jost — latin-ext */
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/jost/jost-latin-ext-300-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/jost/jost-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/jost/jost-latin-ext-500-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Design tokens (§3 kleuren, §4 typografie, §5 spacing/layout, §8 motion)
   ========================================================================== */

:root {
	/* Kleuren — §3, letterlijk */
	--c-navy-900: #071223;   /* bg primary, header, footer */
	--c-navy-800: #0b1b33;   /* bg secondary: panelen, sticky secties, beeld-placeholder */
	--c-cream-100: #f2ede3;  /* bg light */
	--c-cream-200: #e6e0d3;  /* beeld-placeholder op crème */
	--c-white: #fff;         /* alleen hover keuzetegel huurder */
	--c-gold-600: #b08000;   /* accent: knoppen, lijnen, dots, selected filter */
	--c-gold-400: #d9a72a;   /* goud als tekst op marine, focus op marine, hover knop */
	--c-gold-800: #6e5000;   /* goud als tekst op crème */
	--c-text-on-dark: #f2ede3;
	--c-text-muted-dark: #bdbab4;
	--c-text-subtle-dark: #8e8c88;  /* alleen disabled/‘Volgt’; ≥14px op navy-900 */
	--c-text-on-light: #0b1b33;
	--c-text-body-light: #1c2638;
	--c-text-muted-light: #3d4658;
	--c-line-dark: rgba(242, 237, 227, 0.16);
	--c-line-dark-strong: rgba(242, 237, 227, 0.3);
	--c-line-light: rgba(11, 27, 51, 0.14);
	--c-line-gold: rgba(176, 128, 0, 0.4);
	--c-overlay-hero: linear-gradient(180deg, rgba(7, 18, 35, 0.6) 0%, rgba(7, 18, 35, 0.35) 38%, rgba(7, 18, 35, 0.94) 100%);
	--c-status-tag-let: rgba(7, 18, 35, 0.88); /* status ‘Verhuurd’ op foto: marine vlak 88 % */
	--c-error: #f08c74;
	--c-error-text: #f7b7a6;

	/* Focus — §3 / §12 */
	--focus-width: 2px;
	--focus-offset: 3px;
	--focus-dark: var(--focus-width) solid var(--c-gold-400);
	--focus-light: var(--focus-width) solid var(--c-navy-800);
	--focus-on-gold: var(--focus-width) solid var(--c-cream-100); /* primaire knop */

	/* Lijnen — §5 */
	--border-width: 1px;

	/* Fontfamilies — fallbacks zoals in A3 */
	--font-display: "Cormorant Garamond", serif;
	--font-body: "Jost", system-ui, sans-serif;

	/* Typografie — §4, clamp-waarden letterlijk uit de A3-HTML */
	--fs-display: clamp(96px, 17vw, 288px);
	--lh-display: 0.8;
	--ls-display: -0.035em;

	--fs-h1: clamp(52px, 6.2vw, 88px);
	--lh-h1: 0.95;
	--ls-h1: -0.02em;

	--fs-h2: clamp(40px, 4.4vw, 64px);
	--lh-h2: 1;

	--fs-h2-sticky: clamp(48px, 5.4vw, 88px); /* alleen sticky secties (≥900) */
	--lh-h2-sticky: 0.95;

	--fs-statement: clamp(34px, 4.4vw, 64px);
	--lh-statement: 1.1;
	--ls-statement: -0.01em;

	--fs-lead: clamp(28px, 3vw, 40px);
	--lh-lead: 1.15;

	--fs-body-lg: 17px;
	--lh-body-lg: 1.7;

	--fs-body: 16px;
	--lh-body: 1.65;

	--fs-small: 14px;
	--lh-small: 1.6;

	--fs-label: 11px;
	--lh-label: 1.4;
	--ls-label: 0.26em;

	--fs-ui: 12px;          /* nav, button, text link */
	--ls-ui: 0.2em;

	--fs-status: 11px;      /* inline */
	--fs-status-tag: 10px;  /* op foto */
	--ls-status: 0.2em;

	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;

	/* Spacing-schaal — §5 */
	--space-4: 4px;
	--space-8: 8px;
	--space-12: 12px;
	--space-16: 16px;
	--space-24: 24px;
	--space-32: 32px;
	--space-40: 40px;
	--space-48: 48px;
	--space-64: 64px;
	--space-96: 96px;
	--space-128: 128px;
	--space-192: 192px;

	/* Layout — §5 */
	--container-max: 1440px;
	--container-inner: 1312px;
	--grid-columns: 12;

	/* Touch targets — §7 */
	--tap-min: 44px;
	--btn-min: 48px;
	--btn-min-lg: 52px;

	/* Motion — §8 */
	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-inout: cubic-bezier(0.7, 0, 0.2, 1);
	--dur-hover: 200ms;
	--dur-ui-fast: 300ms;
	--dur-ui: 400ms;
	--dur-crossfade: 700ms;
	--dur-reveal: 900ms;
	--dur-curtain: 1100ms;
	--dur-image: 1300ms;

	/* Motion — aanvullingen MVP 2.3 (bestaande tokens ongewijzigd) */
	--ease-reveal: cubic-bezier(0.25, 0.6, 0.3, 1); /* reveal: A3-referentie jskr-motion.js (eigenaarbesluit) */
	--dur-reveal-move: 1000ms;                      /* reveal-transform; opacity = --dur-reveal (§8: 900/1000) */
	--reveal-distance: 18px;                        /* reveal: y 18 → 0 (§8) */
	--dur-page-out: 200ms;                          /* pagina-overgang oud (§8) */
	--dur-page-in: 300ms;                           /* pagina-overgang nieuw (§8) */
}

/* ==========================================================================
   3. Responsive tokens — mobile-first; breakpoints 900 en 1200 (§5, §7)
   CSS custom properties werken niet in media queries; 900px en 1200px staan
   daarom alleen hier en bij de layout-regels hieronder.
   ========================================================================== */

:root {
	--gutter: 20px;          /* <900 */
	--section-l: 96px;       /* sectie-padding groot */
	--section-n: 72px;       /* sectie-padding normaal */
	--page-top: 112px;       /* pagina-top onder fixed header */
	--grid-gap: 12px;        /* 12-koloms grid mobiel (A3 gallery: 12px) */
}

@media (min-width: 900px) {
	:root {
		--gutter: 40px;      /* 900–1199 */
		--section-l: 192px;
		--section-n: 128px;
		--page-top: 176px;
		--grid-gap: 24px;
	}
}

@media (min-width: 1200px) {
	:root {
		--gutter: 64px;      /* ≥1200 */
	}
}

/* ==========================================================================
   4. Basis — globale regels uit de A3 <style>-blokken
   ========================================================================== */

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

html,
body {
	margin: 0;
	padding: 0;
	background: var(--c-navy-900);
}

body {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-text-on-dark);
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
}

::selection {
	background: var(--c-gold-600);
	color: var(--c-navy-900);
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--c-gold-400);
}

img {
	max-width: 100%;
	height: auto;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
}

:where(h1) {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-h1);
}

:where(h2) {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

/* Tweede regel/accent in koppen: italic 300 goud (A3 h1/h2 op marine). */
:where(h1, h2, .t-h1, .t-h2) em {
	font-weight: var(--fw-light);
	color: var(--c-gold-400);
}

:where(p) {
	margin: 0;
	font-weight: var(--fw-light);
}

input::placeholder,
textarea::placeholder {
	color: var(--c-text-subtle-dark);
}

/* Focus: zichtbaar via :focus-visible (§13). Donker = goud, licht = marine. */
:focus-visible {
	outline: var(--focus-dark);
	outline-offset: var(--focus-offset);
}

/* ==========================================================================
   5. Typografie-classes (§4)
   ========================================================================== */

.t-display {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
}

/* “Invest” in het display-woordmerk: 0.28em italic 300 goud. */
.t-display em {
	font-weight: var(--fw-light);
	font-size: 0.28em;
	letter-spacing: 0;
	color: var(--c-gold-400);
}

.t-h1 {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-h1);
}

.t-h2 {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	letter-spacing: 0;
}

.t-h2-sticky {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: var(--fs-h2-sticky);
	line-height: var(--lh-h2-sticky);
	letter-spacing: 0;
}

.t-statement {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: var(--fs-statement);
	line-height: var(--lh-statement);
	letter-spacing: var(--ls-statement);
	text-wrap: pretty;
}

.t-lead {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}

.t-body-lg {
	font-family: var(--font-body);
	font-weight: var(--fw-light);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
}

.t-body {
	font-family: var(--font-body);
	font-weight: var(--fw-light);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.t-small {
	font-family: var(--font-body);
	font-weight: var(--fw-light);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

/* ==========================================================================
   6. Oppervlakken — donker (navy-900 / navy-800) en licht (crème)
   ========================================================================== */

.surface-dark {
	background: var(--c-navy-900);
	color: var(--c-text-on-dark);
}

.surface-dark-2 {
	background: var(--c-navy-800);
	color: var(--c-text-on-dark);
}

.surface-light {
	background: var(--c-cream-100);
	color: var(--c-text-on-light);
}

.surface-light :focus-visible {
	outline: var(--focus-light);
	outline-offset: var(--focus-offset);
}

/* Lopende tekst (body-lg/body/small) op licht oppervlak: #1C2638. */
.surface-light :where(.t-body-lg, .t-body, .t-small) {
	color: var(--c-text-body-light);
}

/* Links in lopende tekst (A3 FAQ op marine, Privacy/Voorwaarden op crème). */
.prose a {
	color: var(--c-gold-400);
	text-decoration: underline;
}

.prose a:hover {
	color: var(--c-text-on-dark);
}

.surface-light .prose a,
.surface-light.prose a {
	color: var(--c-gold-800);
}

.surface-light .prose a:hover,
.surface-light.prose a:hover {
	color: var(--c-text-on-light);
}

/* ==========================================================================
   7. Layout — container, secties, grids (§5)
   ========================================================================== */

/* Max 1440 breed; inner 1312 bij 64px gutter. */
.container {
	width: 100%;
	max-width: calc(var(--container-inner) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Sectie-padding: groot 192/96, normaal 128/72. */
.section-l {
	padding-block: var(--section-l);
}

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

/* Pagina-top onder de fixed header: 176/112. */
.page-top {
	padding-top: var(--page-top);
}

/* 12-koloms grid; <900 één kolom. Gap 24 desktop / 12 mobiel. */
.grid-12 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--grid-gap);
}

@media (min-width: 900px) {
	.grid-12 {
		grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
	}

	.grid-12 > .span-3 { grid-column: span 3; }
	.grid-12 > .span-4 { grid-column: span 4; }
	.grid-12 > .span-6 { grid-column: span 6; }
	.grid-12 > .span-8 { grid-column: span 8; }
	.grid-12 > .span-12 { grid-column: span 12; }
}

/* Kaartraster: repeat(auto-fit, minmax(min(100%, 270px), 1fr)), gap 24. */
.grid-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
	gap: var(--space-24);
}

/* ==========================================================================
   8. Primitives — button, text link, label, status (§4, §6, §12)
   ========================================================================== */

/* Button primary: goud vlak, marine tekst. */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-12);
	min-height: var(--btn-min);
	padding: 0 var(--space-24);
	border: 0;
	border-radius: 0;
	background: var(--c-gold-600);
	color: var(--c-navy-900);
	font-family: var(--font-body);
	font-size: var(--fs-ui);
	font-weight: var(--fw-medium);
	line-height: 1;
	letter-spacing: var(--ls-ui);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur-hover) ease;
}

.btn:hover {
	background: var(--c-gold-400);
	color: var(--c-navy-900);
}

.btn:focus-visible {
	outline: var(--focus-on-gold);
	outline-offset: var(--focus-offset);
}

.btn:active {
	transform: translateY(1px);
}

/* Disabled: 30 %, alleen formulier tijdens verzenden. */
.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.3;
}

/* Formulier-submit (A3 Contact): 52px, padding 28. */
.btn--lg {
	min-height: var(--btn-min-lg);
	padding: 0 28px;
}

/* Outline op marine. A3-HTML zet hier geen font-weight (→ 400). */
.btn--outline {
	background: transparent;
	color: var(--c-text-on-dark);
	border: var(--border-width) solid var(--c-line-dark-strong);
	font-weight: var(--fw-regular);
	transition: border-color var(--dur-hover) ease, color var(--dur-hover) ease;
}

.btn--outline:hover {
	background: transparent;
	border-color: var(--c-gold-400);
	color: var(--c-text-on-dark);
}

.btn--outline:focus-visible {
	outline: var(--focus-dark);
	outline-offset: var(--focus-offset);
}

/* Text link: secundaire actie, goud onderlijn, min 44px hoog. */
.text-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	padding: 0;
	border: 0;
	border-bottom: var(--border-width) solid var(--c-gold-600);
	background: none;
	color: var(--c-text-on-dark);
	font-family: var(--font-body);
	font-size: var(--fs-ui);
	font-weight: var(--fw-regular);
	line-height: 1;
	letter-spacing: var(--ls-ui);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--dur-hover) ease;
}

.text-link:hover {
	color: var(--c-gold-400);
}

.text-link:focus-visible {
	outline: var(--focus-dark);
	outline-offset: var(--focus-offset);
}

.surface-light .text-link {
	color: var(--c-text-on-light);
}

.surface-light .text-link:hover {
	color: var(--c-gold-800);
}

.surface-light .text-link:focus-visible {
	outline: var(--focus-light);
	outline-offset: var(--focus-offset);
}

/* Label: 11px, .26em, uppercase. Goud-400 op marine, goud-800 op crème. */
.label {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: var(--fw-regular);
	line-height: var(--lh-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-gold-400);
}

.label--muted {
	color: var(--c-text-muted-dark);
}

.surface-light .label {
	color: var(--c-gold-800);
}

.surface-light .label--muted {
	color: var(--c-text-muted-light);
}

/* Status: altijd stip + tekst, nooit alleen kleur. */
.status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-family: var(--font-body);
	font-size: var(--fs-status);
	font-weight: var(--fw-medium);
	line-height: 1;
	letter-spacing: var(--ls-status);
	text-transform: uppercase;
}

.status::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: var(--border-width) solid currentColor;
	background: transparent;
}

.status--available {
	color: var(--c-gold-400);
}

.status--available::before {
	background: currentColor;
}

.status--let {
	color: var(--c-text-muted-dark);
}

/* Status-tag op foto: beschikbaar = goud vlak + marine tekst; verhuurd = marine 88 %. */
.status--tag {
	padding: 7px 10px;
	font-size: var(--fs-status-tag);
}

.status--tag::before {
	width: 7px;
	height: 7px;
}

.status--tag.status--available {
	background: var(--c-gold-600);
	color: var(--c-navy-900);
}

.status--tag.status--let {
	background: var(--c-status-tag-let);
	color: var(--c-text-on-dark);
}

/* ==========================================================================
   9. Toegankelijkheid
   ========================================================================== */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* ==========================================================================
   10. Reduced motion (§9) — globaal fundament
   Transities en animaties direct naar eindtoestand (kleurwissel zonder
   overgang). Effect-specifieke regels (intro, reveals, parallax, marquee,
   StickyStory-stapel) komen bij de betreffende componenten.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   11. Shell — header, navigatie, taalshell, mobiel menu, footer (MVP 2.2)
   Bron: A3Header.dc.html en A3Footer.dc.html; waarden letterlijk.
   A3 rendert de shell zonder line-height (normal); daarom hier expliciet.
   ========================================================================== */

/* Skip-link boven de fixed header (A3 definieert geen skip-link). */
.skip-link:focus {
	position: fixed;
	top: var(--space-8);
	left: var(--space-8);
	z-index: 101;
	padding: var(--space-12) var(--space-16);
	background: var(--c-navy-900);
	color: var(--c-text-on-dark);
}

/* --- Header ------------------------------------------------------------ */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-24);
	padding: 0 var(--gutter);
	background: rgba(7, 18, 35, 0.96);
	border-bottom: var(--border-width) solid var(--c-line-gold);
	font-family: var(--font-body);
	line-height: normal;
	transition:
		background var(--dur-ui) var(--ease-out),
		height var(--dur-ui) var(--ease-out),
		border-color var(--dur-ui) ease;
}

/* overHero (alleen voorpagina): transparant tot scroll > 40px of menu open. */
.site-header--over-hero:not(.is-scrolled):not(.is-menu-open) {
	background: rgba(7, 18, 35, 0);
	border-bottom-color: rgba(176, 128, 0, 0);
}

.site-header__logo {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	outline-offset: 4px;
}

.site-header__logo:focus-visible {
	outline: var(--focus-dark);
	outline-offset: 4px;
}

/* Tijdelijk: PNG-woordmerk met filter (A3 §11/§14), tot een lichte SVG is aangeleverd. */
.site-header__logo img {
	display: block;
	width: auto;
	height: 30px;
	filter: brightness(1.6);
}

.site-nav {
	display: none;
	align-items: center;
	gap: 28px;
}

.site-nav__link {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	font-size: var(--fs-ui);
	letter-spacing: var(--ls-ui);
	text-transform: uppercase;
	color: var(--c-text-muted-dark);
	border-bottom: var(--border-width) solid transparent;
	transition: color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
	color: var(--c-text-on-dark);
	border-bottom-color: var(--c-gold-600);
}

.site-nav__link:focus-visible {
	outline: var(--focus-dark);
	outline-offset: 4px;
}

.lang-switch {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: var(--space-8);
	padding-left: var(--space-24);
	border-left: var(--border-width) solid var(--c-line-dark);
	font-size: var(--fs-ui);
	letter-spacing: var(--ls-ui);
}

.lang-switch__item {
	min-width: 32px;
	min-height: var(--tap-min);
	display: flex;
	align-items: center;
	justify-content: center;
}

.lang-switch__item[aria-current="true"] {
	color: var(--c-text-on-dark);
	border-bottom: var(--border-width) solid var(--c-gold-600);
}

.lang-switch__item[aria-disabled="true"] {
	color: var(--c-text-subtle-dark);
	cursor: not-allowed;
}

.menu-toggle {
	width: var(--btn-min);
	height: var(--btn-min);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 0;
	background: none;
	border: var(--border-width) solid var(--c-line-dark-strong);
	border-radius: 0;
	cursor: pointer;
}

.menu-toggle:focus-visible {
	outline: var(--focus-dark);
	outline-offset: var(--focus-offset);
}

.menu-toggle__bar {
	display: block;
	width: 20px;
	height: 1px;
	background: var(--c-text-on-dark);
	transition: transform var(--dur-ui-fast) var(--ease-out);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child {
	transform: translateY(4px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child {
	transform: translateY(-4px) rotate(-45deg);
}

@media (min-width: 900px) {
	.site-header {
		height: 96px;
	}

	.site-header.is-scrolled {
		height: 72px;
	}

	.site-header__logo img {
		height: 36px;
	}

	.site-nav {
		display: flex;
	}

	.menu-toggle,
	.mobile-menu {
		display: none;
	}
}

/* --- Mobiel menu (<900): fullscreen marine onder de header -------------- */

.mobile-menu {
	position: fixed;
	inset: 64px 0 0 0;
	z-index: 99;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-32);
	padding: 40px 20px 32px;
	background: var(--c-navy-900);
	font-family: var(--font-body);
	line-height: normal;
	overflow-y: auto;
}

.mobile-menu[hidden] {
	display: none;
}

.mobile-menu__nav {
	display: flex;
	flex-direction: column;
}

.mobile-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	border-bottom: var(--border-width) solid var(--c-line-dark);
	font-family: var(--font-display);
	font-size: 36px;
	line-height: 1;
	color: var(--c-text-on-dark);
}

.mobile-menu__link[aria-current="page"] {
	color: var(--c-gold-400);
}

.mobile-menu__link:focus-visible {
	outline: var(--focus-dark);
	outline-offset: -2px;
}

.mobile-menu__mark {
	font-family: var(--font-body);
	font-size: var(--fs-label);
	letter-spacing: var(--ls-ui);
	color: var(--c-gold-400);
}

.mobile-menu__meta {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mobile-menu__lang {
	display: flex;
	gap: var(--space-8);
	font-size: var(--fs-ui);
	letter-spacing: var(--ls-ui);
}

.mobile-menu__lang-item {
	min-width: var(--btn-min);
	min-height: var(--tap-min);
	display: flex;
	align-items: center;
	justify-content: center;
	border: var(--border-width) solid var(--c-gold-600);
	color: var(--c-text-on-dark);
}

.mobile-menu__lang-item[aria-disabled="true"] {
	border-color: var(--c-line-dark);
	color: var(--c-text-subtle-dark);
}

.mobile-menu__contact {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 15px;
	font-weight: var(--fw-light);
	color: var(--c-text-muted-dark);
}

.mobile-menu__contact a {
	min-height: var(--tap-min);
	display: flex;
	align-items: center;
	color: var(--c-text-on-dark);
}

/* Scroll-lock achter het open menu. */
html.has-menu-open {
	overflow: hidden;
}

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

.site-footer {
	overflow: hidden;
	padding: clamp(72px, 10vw, 128px) clamp(20px, 4.4vw, 64px) 0;
	background: var(--c-navy-900);
	color: var(--c-text-on-dark);
	font-family: var(--font-body);
	line-height: normal;
	font-variant-numeric: lining-nums;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-48) var(--space-32);
	padding-bottom: var(--space-64);
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.site-footer__brand img {
	width: 128px;
	height: auto;
}

.site-footer__tagline,
.site-footer__place {
	font-size: var(--fs-small);
	font-weight: var(--fw-light);
	color: var(--c-text-muted-dark);
}

.site-footer__tagline {
	line-height: var(--lh-small);
	max-width: 28ch;
}

.site-footer__place {
	margin-top: var(--space-8);
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.site-footer__label {
	line-height: normal;
	margin-bottom: 10px;
}

.site-footer__link,
.site-footer__contact {
	min-height: 40px;
	display: flex;
	align-items: center;
	color: var(--c-text-on-dark);
}

.site-footer__link {
	font-size: 15px;
	font-weight: var(--fw-light);
	transition: color var(--dur-hover) ease;
}

.site-footer__contact {
	font-family: var(--font-display);
	font-size: 28px;
}

.site-footer__contact--mail {
	font-style: italic;
}

.site-footer__link:hover,
.site-footer__contact:hover {
	color: var(--c-gold-400);
}

.site-footer__link:focus-visible,
.site-footer__contact:focus-visible,
.site-footer__legal:focus-visible {
	outline: var(--focus-dark);
	outline-offset: 2px;
}

.site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-12) var(--space-24);
	padding: var(--space-16) 0;
	border-top: var(--border-width) solid var(--c-line-gold);
	font-size: 13px;
	color: var(--c-text-muted-dark);
}

.site-footer__bar-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-24);
}

.site-footer__legal {
	min-height: var(--tap-min);
	display: flex;
	align-items: center;
	color: var(--c-text-muted-dark);
}

.site-footer__legal:hover {
	color: var(--c-text-on-dark);
}

.site-footer__lang {
	min-height: var(--tap-min);
	display: flex;
	align-items: center;
	letter-spacing: var(--ls-ui);
}

.site-footer__lang-nl {
	color: var(--c-text-on-dark);
}

.site-footer__lang-en {
	color: var(--c-text-subtle-dark);
}

/* Decoratief (aria-hidden). Het glyph-vlak overlapt de onderbalk (ook in A3);
   pointer-events: none houdt de juridische links klikbaar zonder visuele wijziging. */
.site-footer__wordmark {
	pointer-events: none;
	margin: 8px -0.02em -0.1em;
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: 21.5vw;
	line-height: 0.74;
	letter-spacing: -0.045em;
	white-space: nowrap;
	text-align: center;
	color: var(--c-navy-800);
}

/* ==========================================================================
   12. Motion-primitives (MVP 2.3) — A3 §8/§9/§13 en jskr-motion.js
   Alleen globale, herbruikbare effecten. Opt-in via markup:
     data-fx="reveal" [data-d="0–380"]  fade + 18px rise, eenmalig bij top < 90 % vh
     data-fx="clip"   [data-d="…"]      beeld-wipe van onder, eenmalig bij top < 85 % vh
   Verbergen gebeurt alleen als main.js `has-motion` op <html> zet (JS actief,
   geen reduced motion). Zonder JS of met reduced motion: direct eindtoestand.
   Alleen transform, opacity en clip-path: geen layout shift.
   ========================================================================== */

/* Transitie alleen naar de eindtoestand: verbergen bij init gebeurt zonder animatie. */
.has-motion [data-fx="reveal"].is-revealed {
	transition:
		opacity var(--dur-reveal) var(--ease-reveal) var(--fx-delay, 0ms),
		transform var(--dur-reveal-move) var(--ease-reveal) var(--fx-delay, 0ms);
}

.has-motion [data-fx="reveal"]:not(.is-revealed) {
	opacity: 0;
	transform: translate3d(0, var(--reveal-distance), 0);
}

.has-motion [data-fx="clip"].is-revealed {
	clip-path: inset(0 0 0 0); /* expliciete eindwaarde (A3), anders geen interpolatie vanaf inset(100% …) */
	transition: clip-path var(--dur-image) var(--ease-inout) var(--fx-delay, 0ms);
}

.has-motion [data-fx="clip"]:not(.is-revealed) {
	clip-path: inset(100% 0 0 0);
}

/* Pagina-overgang (§13): cross-document View Transitions, alleen fade.
   Uit bij reduced motion (§9); browsers zonder ondersteuning navigeren gewoon. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: var(--dur-page-out) var(--ease-out) both jskr-page-out;
	}

	::view-transition-new(root) {
		animation: var(--dur-page-in) var(--ease-out) both jskr-page-in;
	}
}

@keyframes jskr-page-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes jskr-page-in {
	from { opacity: 0; }
	to { opacity: 1; }
}