/* ==========================================================================
   Central Space Agency - eigen stylesheet
   Samenvoeging van type.css, layout.css, form.css en color.css tot een
   bestand. De bronbestanden blijven staan voor het overzicht, maar de
   pagina laadt alleen dit. Volgorde is betekenisvol: typografie legt de
   tokens vast, kleur corrigeert als laatste.
   ========================================================================== */


/* ======================= type.css ======================= */

/* ==========================================================================
   Central Space Agency - typografie
   --------------------------------------------------------------------------
   Laadt als laatste stylesheet, na css/style.css en na de inline <style>-
   blokken in de <head>, zodat dit bestand de template-ramp overschrijft
   zonder dat er iets in het gecompileerde style.css (391 KB, uit sass/)
   aangepast hoeft te worden. Verwijder de <link> en de site staat terug.

   Uitgangspunten:
   - Twee families blijven: Urbanist (display, labels, cijfers), Mulish (tekst).
   - Alles in rem. style.css zet 385 van 390 groottes in harde px, waardoor
     de lettergrootte-instelling van de browser volledig genegeerd werd.
   - Regelafstand volgt de regelbreedte. Er stond overal 1.875 geerfd, over
     kolommen die van 23 tot 200 tekens per regel liepen.
   - Cijfers die verspringen of moeten uitlijnen krijgen tabular-nums.
   ========================================================================== */

:root {
	/* Display schaalt mee met het scherm; lopende tekst niet - die hoort
	   voorspelbaar te blijven. */
	--type-display: clamp(2.75rem, 5.5vw, 4.5rem);   /* 44 -> 72px */
	--type-section: clamp(2rem, 3.2vw, 2.75rem);     /* 32 -> 44px */
	--type-subsection: clamp(1.5rem, 2vw, 1.75rem);  /* 24 -> 28px */
	--type-subtitle: 1.3125rem;                          /* 21px */
	--type-body: 1.0625rem;                          /* 17px */
	--type-compact: 1rem;                            /* 16px */
	--type-label: 0.75rem;                           /* 12px */
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */

/* style.css:121 zet line-height: 28px absoluut. Een absolute regelafstand
   erft als vaste pixelwaarde door, dus elk kind dat wel een font-size maar
   geen line-height zet, krijgt een regelbox van 28px ongeacht zijn grootte. */
body {
	font-size: var(--type-body);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Display en koppen
   -------------------------------------------------------------------------- */

h1 {
	font-size: var(--type-display);
	line-height: 1.04;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h2 {
	font-size: var(--type-section);
	line-height: 1.14;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h3 {
	font-size: var(--type-subsection);
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h4 {
	font-size: var(--type-subtitle);
	line-height: 1.38;
	font-weight: 600;
	text-wrap: balance;
}

h5 {
	font-size: var(--type-compact);
	line-height: 1.4;
	font-weight: 600;
}

/* Labelrol. Klein, zwaar, kapitaal, ruim gespatieerd - kapitalen zonder
   spatiering lezen als een fout, niet als een label. */
h6,
.section-header h6 {
	font-size: var(--type-label);
	line-height: 1.33;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Binnenpagina's zetten hun eigen .breadcrumb-area .title met een afwijkende
   clamp, gewicht en spatiering. Hier trekken we grootte en regelafstand
   gelijk met h1; het zware gewicht en de tekstschaduw blijven, want die
   titel staat op onbewerkte fotografie zonder scrim. */
.breadcrumb-area .title {
	font-size: var(--type-display);
	line-height: 1.04;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Het 'professional'-blok: 48px displaytekst over 51 tekens per regel, en
   Bootstraps .lh-base verving daar stilletjes de 58px regelafstand door 72px. */
.professional__content h2 {
	line-height: 1.14;
	max-width: 30ch;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Lopende tekst
   -------------------------------------------------------------------------- */

p {
	font-size: var(--type-body);
	line-height: 1.6;
	text-wrap: pretty;
}

/* Smalle kolommen: minder regelafstand, anders valt de regel uit elkaar.
   De kolombreedtes zelf zijn layoutwerk en blijven hier ongemoeid. */
.feature__item .feature__content p,
.hzAccordion__item .content .text {
	font-size: var(--type-compact);
	line-height: 1.45;
}

/* Hero-onderkop stond op 18px/36px - een regelafstand van 2.0 over 70 tekens
   breekt de terugsprong van het oog. */
.banner__content .text {
	font-size: var(--type-body);
	line-height: 1.55;
	text-wrap: pretty;
}

.accordion-body p,
.faq-one-left .section-header p {
	font-size: var(--type-body);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Licht op donker
   Witte tekst op #121c27 bloeit optisch op: ze leest zwaarder en dichter dan
   dezelfde tekst op wit. Compenseren op alle drie de assen - meer regel-
   afstand, iets meer spatiering, een stap minder gewicht.
   -------------------------------------------------------------------------- */

.about__wrp .about__content ul li {
	font-size: var(--type-body);
	line-height: 1.55;
	letter-spacing: 0.005em;
	font-weight: 400;
}

.about__testimonial p {
	font-size: var(--type-body);
	line-height: 1.65;
	letter-spacing: 0.005em;
	font-weight: 400;
}

.hzAccordion__item .content .text {
	letter-spacing: 0.005em;
}

/* --------------------------------------------------------------------------
   Labels, navigatie en knoppen
   -------------------------------------------------------------------------- */

.header__main .main-menu ul li a {
	letter-spacing: 0.08em;
}

.about__funfact p {
	font-size: var(--type-label);
	line-height: 1.33;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.btn-one,
.btn-two,
.btn-two-light {
	font-size: var(--type-compact);
	letter-spacing: 0.02em;
}

/* De FAQ-vraag stond op 20px - kleiner dan h4, nauwelijks boven broodtekst,
   terwijl het document haar als kop op tweede niveau aankondigt. */
.accordion .accordion-item h2 button,
.accordion .accordion-item .accordion-button {
	font-size: var(--type-subtitle);
	line-height: 1.38;
	font-weight: 600;
	padding-right: 3rem;
}

/* --------------------------------------------------------------------------
   Cijfers
   tabular-nums pint de breedte van elk cijfer vast. Alleen op de rollen waar
   cijfers moeten uitlijnen of tijdens het tellen van breedte veranderen -
   nooit op lopende tekst, waar proportionele cijfers juist beter lezen.
   -------------------------------------------------------------------------- */

.about__funfact ul li h3,
.hzAccordion__item .head .head-title .number,
.banner__dot .swiper-pagination-bullet .dot-content span {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* De teller telt van 0 naar 200 en herschrijft de tekst elk frame. Met
   proportionele cijfers is de 1 smaller dan de 0, dus de 'k+' erachter
   schoof anderhalve seconde lang heen en weer. */
.about__funfact ul li h3 {
	font-size: clamp(3rem, 6vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

/* Het plusteken was een <sup> en zweefde als voetnootverwijzing boven de
   basislijn van een cijfer van 80px. Nu een gewoon teken op de regel. */
.about__funfact ul li h3 .count-suffix {
	font-size: 0.5em;
	font-weight: 600;
	letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Detail
   -------------------------------------------------------------------------- */

/* splitting.js hakt koppen in losse tekens; de woordspatie stond vast op 8px,
   te krap bij 44px en te ruim bij 21px. */
.splt-txt .whitespace {
	width: 0.22em;
}

/* Browseroppervlakken die standaard bij geen enkel ontwerp horen. */
::selection {
	background-color: #121c27;
	color: #ffffff;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}


/* ======================= layout.css ======================= */

/* ==========================================================================
   Central Space Agency - layout
   --------------------------------------------------------------------------
   Laadt na css/type.css, als laatste stylesheet in de <head>. Zelfde principe
   als type.css: niets in het gecompileerde style.css aanpassen, alles hier,
   verwijder de <link> en de structuur staat terug.

   Let op: de twee <style>-blokken in de BODY van index.html komen na dit
   bestand en winnen dus bij gelijke specificiteit.
   ========================================================================== */

:root {
	/* Afstandsschaal. style.css definieert 320 losse utilities in stappen van
	   5px - dat is geen schaal maar de afwezigheid ervan. Deze acht stappen
	   dekken alles wat de pagina nodig heeft. */
	--space-2: 0.5rem;   /* 8  */
	--space-3: 0.75rem;  /* 12 */
	--space-4: 1rem;     /* 16 */
	--space-6: 1.5rem;   /* 24 */
	--space-8: 2rem;     /* 32 */
	--space-12: 3rem;    /* 48 */
	--space-16: 4rem;    /* 64 */
	--space-24: 6rem;    /* 96 */

	/* Ritme tussen de banden: één waarde, vloeiend. */
	--band-y: clamp(3.5rem, 6vw, 6rem);   /* 56 -> 96px */

	/* Echte hoogte van de vaste header: nav-link padding 30+30 plus
	   line-height 26. style.css:123 stond op 70px met de comment
	   "tweak to match header height" - dat is nooit gebeurd, dus de
	   bovenste 16px van elke pagina zat onder de header. */
	--header-h: 86px;
}

@media (max-width: 991px) {
	:root {
		--header-h: 74px;   /* .header__main padding valt daar terug naar 15px */
	}
}

body {
	padding-top: var(--header-h);
}

/* --------------------------------------------------------------------------
   Bandritme
   De feature-band had 0 padding boven en onder: pb-130 werd gemaskeerd door
   style.css:9130 en die weer door een !important in de body van index.html.
   De accordeon-band had pt-130 dat gemaskeerd werd door style.css:9994.
   -------------------------------------------------------------------------- */

.feature-area {
	padding-top: var(--band-y);
	padding-bottom: var(--band-y);
}

.hzAccordion-area {
	padding-top: var(--band-y);
	padding-bottom: var(--band-y);
}

.professional-area {
	padding-top: var(--band-y);
	padding-bottom: var(--band-y);
}

.faq-one-area {
	padding-top: var(--band-y);
	padding-bottom: var(--band-y);
}

/* Een kop hoort meer ruimte boven zich te hebben dan onder zich, anders
   bindt hij niet aan wat hij aankondigt. Stond op 60/60 en 48/48. */
.hzAccordion-area .section-header,
.faq-one-area .section-header {
	margin-bottom: var(--space-8);
}

/* --------------------------------------------------------------------------
   Horizontaal accordeon
   De wrapper stond op height: 700px (450px onder 1399px) met overflow: hidden
   op zowel de wrapper als elk item. De panelen bevatten 615-821 tekens, en
   liepen daar tot 28% overheen - stil afgekapt, zonder scrollbar of teken.
   Hoogte volgt nu de inhoud; de min-height houdt het oorspronkelijke formaat
   als ondergrens.
   -------------------------------------------------------------------------- */

.hzAccordion__wrp {
	height: auto;
	min-height: 700px;
}

@media (max-width: 1399px) {
	.hzAccordion__wrp {
		height: auto;
		min-height: 450px;
	}
}

@media (max-width: 991px) {
	.hzAccordion__wrp {
		min-height: 0;
	}
}

/* Tussen 1400 en 1560px kromp de tekstkolom juist als het venster breder
   werd: de rail-breedte en de panelpadding sprongen daar van 75/20 naar
   190/60px, sneller dan de container groeide. */
@media (min-width: 1400px) {
	.hzAccordion__item .content .wrp {
		padding: 0 var(--space-8);
		gap: var(--space-8);
	}
}

/* Bij 1920px was bijna de helft van het actieve paneel leeg terwijl de tekst
   in een kolom van 330px stond. De kolom mag breder. */
.hzAccordion__item .content .content-wrp {
	max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Feature-grid
   Vier kolommen gaven 24 tekens per regel bij 992px en 30 bij 1400px - een
   bijschriftbreedte voor teksten van 90 woorden. Twee kolommen geven 50-67.
   De HTML gaat van col-lg-3 naar col-lg-6; hier de scheidingslijnen, die bij
   het omklappen verdwenen (de row had alleen één border-bottom onder het
   geheel) en bij vier kolommen tegen de schermrand aanliepen.
   -------------------------------------------------------------------------- */

.feature__item {
	padding: clamp(2rem, 3vw, 3.75rem);
}

/* Twee kolommen over de volle schermbreedte geeft bij 1920px ruim 100 tekens
   per regel. De kaart houdt zijn breedte - het raster en de scheidingslijnen
   blijven intact - maar de tekst krijgt een plafond. */
.feature__item .feature__content p {
	max-width: 62ch;
}

.feature__wrp .row > [class*="col-"] .feature__item {
	border-bottom: 1px solid var(--border);
}

.feature__wrp .row > [class*="col-"]:nth-child(2n) .feature__item {
	border-right: 0;
}

.feature__wrp .row > [class*="col-"]:nth-last-child(-n + 2) .feature__item {
	border-bottom: 0;
}

/* Onder 992px staat alles onder elkaar: geen verticale scheiding meer nodig,
   wel een horizontale tussen elke kaart. */
@media (max-width: 991px) {
	.feature__wrp .row > [class*="col-"] .feature__item {
		border-right: 0;
		border-bottom: 1px solid var(--border);
	}

	.feature__wrp .row > [class*="col-"]:last-child .feature__item {
		border-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
   Beeld
   Geen enkel afbeeldingselement had width/height, dus reserveerde de browser
   nergens ruimte en schoof alles bij het laden. De attributen staan nu in de HTML;
   dit houdt de verhouding intact nu er echte afmetingen bijstaan.
   -------------------------------------------------------------------------- */

.feature__item .shape img,
.hzAccordion__item .image img {
	height: auto;
}

/* --------------------------------------------------------------------------
   Hero: controle en oriëntatie
   De slide-indicatoren stonden onder 992px op display: none, dus op een
   telefoon kon je niet weten dat er drie slides zijn - terwijl kop en tekst
   er wel onder je ogen verwisselden. Ze komen terug als compacte vakjes van
   44px: groot genoeg om met een duim te raken, klein genoeg om niet de halve
   hero te vullen. Het label vervalt daar; het nummer blijft.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
	.banner__dot {
		display: flex !important;
		left: 30px !important;
		right: auto !important;
		bottom: 30px !important;
		max-width: none;
		gap: 8px;
	}

	.banner__dot .swiper-pagination-bullet {
		width: 44px;
		height: 44px;
		padding: 0;
		display: grid;
		place-items: center;
	}

	.banner__dot .dot-content span:last-child {
		display: none;
	}
}

@media (max-width: 575px) {
	.banner__dot {
		left: 15px !important;
		bottom: 15px !important;
	}
}

/* Pauzeknop. Wordt door js/enhance.js aangemaakt, dus hij verschijnt alleen
   als dat script draait - een knop die niets doet is erger dan geen knop. */
.banner__pause {
	position: absolute;
	right: 30px;
	bottom: 30px;
	z-index: 3;
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem 1rem;
	font-family: var(--font-title, sans-serif);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background-color: rgba(18, 28, 39, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.banner__pause:hover {
	background-color: rgba(18, 28, 39, 0.85);
}

.banner__pause:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Accordeonkoppen zijn nu knoppen: ze moeten zichtbaar focus kunnen krijgen.
   -------------------------------------------------------------------------- */

.hzAccordion__item .head:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

.hzAccordion__item .head {
	cursor: pointer;
}


/* ======================= form.css ======================= */

/* ==========================================================================
   Central Space Agency - formulier en afsluitende CTA
   --------------------------------------------------------------------------
   Laadt na css/layout.css. Bouwt voort op de tokens uit type.css en
   layout.css; introduceert er zelf twee.
   ========================================================================== */

:root {
	/* De signaalkleur staat bij de overige kleurrollen verderop in dit
	   bestand; hier stond een tweede definitie met dezelfde waarde. */
}

/* --------------------------------------------------------------------------
   Formulier
   -------------------------------------------------------------------------- */

.csa-form {
	max-width: 46rem;
	margin-inline: auto;
	text-align: left;
}

.csa-form__grid {
	display: grid;
	gap: var(--space-6, 1.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.csa-form__grid {
		grid-template-columns: 1fr 1fr;
	}

	.csa-field--wide {
		grid-column: 1 / -1;
	}
}

.csa-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.csa-field label {
	font-family: var(--font-title, sans-serif);
	font-size: 0.75rem;
	line-height: 1.33;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: inherit;
}

/* Het sterretje is decoratief; de screenreader hoort 'required' via het
   required-attribuut zelf, niet via een losse asterisk. */
.csa-field label .req {
	color: var(--csa-alert);
	margin-left: 0.15em;
}

.csa-field input,
.csa-field select,
.csa-field textarea {
	font-family: var(--font-body, sans-serif);
	font-size: 1rem;
	line-height: 1.5;
	color: inherit;
	background-color: #fff;
	border: 1px solid #00000033;
	border-radius: 2px;
	padding: 0.75rem 0.875rem;
	width: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.csa-field textarea {
	min-height: 9rem;
	resize: vertical;
}

.csa-field input:hover,
.csa-field select:hover,
.csa-field textarea:hover {
	border-color: #00000066;
}

.csa-field input:focus-visible,
.csa-field select:focus-visible,
.csa-field textarea:focus-visible {
	outline: none;
	border-color: #121c27;
	box-shadow: 0 0 0 3px #121c2726;
}

/* Foutstaat. De rand alleen zou kleur als enige drager maken; de melding
   eronder benoemt het probleem en het herstel in woorden. */
.csa-field[data-invalid] input,
.csa-field[data-invalid] select,
.csa-field[data-invalid] textarea {
	border-color: var(--csa-alert);
}

.csa-field__error {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--csa-alert);
}

.csa-field__hint {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	opacity: 0.7;
}

/* De honeypot moet voor mensen onzichtbaar zijn maar wel invulbaar voor bots,
   dus geen display:none - dat slaan veel bots over. */
.csa-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.csa-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6, 1.5rem);
	margin-top: var(--space-8, 2rem);
}

.csa-form__submit {
	font-family: var(--font-title, sans-serif);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	background-color: #121c27;
	border: 1px solid #121c27;
	border-radius: 2px;
	padding: 0.875rem 2rem;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.csa-form__submit:hover {
	background-color: #24384f;
	border-color: #24384f;
}

.csa-form__submit:focus-visible {
	outline: 2px solid #121c27;
	outline-offset: 3px;
}

.csa-form__submit[disabled] {
	opacity: 0.55;
	cursor: progress;
}

.csa-form__promise {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	opacity: 0.75;
	flex: 1 1 16rem;
}

/* Statusregel voor het geheel: verzonden, of mislukt met een uitweg. */
.csa-form__status {
	margin: var(--space-6, 1.5rem) 0 0;
	padding: 0.875rem 1rem;
	border-left: 1px solid currentColor;
	font-size: 1rem;
	line-height: 1.5;
}

.csa-form__status[data-state="error"] {
	color: var(--csa-alert);
}

.csa-form__status[data-state="sent"] {
	color: #121c27;
}

/* --------------------------------------------------------------------------
   Afsluitende CTA-band op de homepage
   De pagina eindigde op een voetnoot over domeinregistratie, zonder enige
   volgende stap.
   -------------------------------------------------------------------------- */

.csa-cta {
	background-color: #121c27;
	color: #fff;
	padding-block: var(--band-y, 4rem);
}

.csa-cta__wrp {
	max-width: 46rem;
	margin-inline: auto;
	padding-inline: var(--space-6, 1.5rem);
	text-align: center;
}

.csa-cta h2 {
	color: #fff;
	margin: 0 0 var(--space-4, 1rem);
}

/* style.css:204 zet color op elke <p>. Een directe regel wint van overerving,
   dus de tekst op deze donkere band was #4b535d op #121c27 - 2,21:1, ruim onder
   de norm. Wit moet hier expliciet, niet geerfd. */
.csa-cta p {
	margin: 0 auto;
	max-width: 44ch;
	color: #ffffff;
}

.csa-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-6, 1.5rem);
	margin-top: var(--space-8, 2rem);
}

.csa-cta__primary {
	font-family: var(--font-title, sans-serif);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #121c27;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 2px;
	padding: 0.875rem 2rem;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.csa-cta__primary:hover {
	background-color: #d7dee6;
	color: #121c27;
}

.csa-cta__primary:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.csa-cta__secondary {
	color: #fff;
	text-underline-offset: 0.25em;
}

/* Hero: de enige affordance was een decoratief pijltje omlaag. */
.banner__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8, 2rem);
	margin-top: var(--space-8, 2rem);
}

.banner__actions .arry-btn {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Contact als primaire actie in de navigatie
   Zes gelijkwaardige menu-items zonder enige hoofdactie; deze krijgt gewicht.
   -------------------------------------------------------------------------- */

.header__main .main-menu ul li.nav-cta a {
	color: #fff;
	background-color: #24384f;
	border-radius: 2px;
	padding-inline: 1.125rem;
	margin-block: 1.25rem;
	padding-block: 0.625rem;
	transition: background-color 0.15s ease;
}

.header__main .main-menu ul li.nav-cta a:hover {
	background-color: #33506f;
	color: #fff;
}

/* In het uitklapmenu op mobiel (meanmenu kloont de <ul>) zou die knopvorm
   de lijst breken, dus daar blijft het een gewone regel. */
.mobile-menu .nav-cta a {
	background-color: transparent;
	padding-inline: 0;
	margin-block: 0;
}


/* ======================= color.css ======================= */

/* ==========================================================================
   Central Space Agency - kleur
   --------------------------------------------------------------------------
   Laadt als laatste stylesheet, na form.css.

   Strategie: deze site wordt niet kleuriger. Ze had vijf losse kleuren van
   drie verschillende bewerkingen (#003366, #0066cc, #000a9b, #002244,
   #ff2e2e) die in geen enkel systeem stonden, en vier contrastfouten. Dit
   bestand voegt geen kleur toe maar brengt het terug tot rollen:

   - inkt en oppervlak, hoog contrast, koel en terughoudend;
   - één gereserveerde signaalkleur, uitsluitend voor iets dat misgaat;
   - kleur draagt nergens in haar eentje betekenis - overal staat er een
     onderstreping, een rand of tekst naast.
   ========================================================================== */

:root {
	/* Inkt en oppervlak. Bestonden al als --black / --paragraph; hier
	   benoemd als rol in plaats van als waarde. */
	--csa-ink: #121c27;
	--csa-ink-soft: #4b535d;        /* 7.79:1 op wit */
	--csa-surface: #ffffff;
	--csa-surface-dark: #121c27;

	/* Secundaire tekst op de donkere banden. Stond op #c4c4c4: een volledig
	   neutraal grijs op een blauwzwart oppervlak leest als vuil in plaats van
	   als zachter. Zelfde helderheid, maar de huidskleur van het oppervlak. */
	--csa-ink-on-dark: #c2c8d0;     /* 10.21:1 op #121c27 */

	/* Randen. De invoerrand stond op 20% zwart = 1.61:1 en haalde de 3:1-eis
	   voor formuliervelden niet (WCAG 1.4.11). */
	--csa-line-strong: #7a828d;     /* 3.89:1 op wit */
	--csa-line: #0000001a;
	--csa-line-on-dark: #ffffff33;

	/* De enige gereserveerde kleur van de site. Twee varianten, omdat geen
	   enkel rood tegelijk op wit en op #121c27 leesbaar is - een enkele
	   waarde zou op een van beide zakken. Nergens anders gebruiken. */
	/* Lichte subtiele ondergrond, voor tabelkoppen en ingesprongen blokken.
	   Geen kleur in de zin van de One Signal Rule - een neutraal. */
	--csa-surface-sub: #f5f5f5;

	/* De hoekstraal uit DESIGN.md, nu ook als variabele. De binnenpagina's
	   gebruikten 8px en 12px. */
	--radius-edge: 2px;

	--csa-alert: #b42318;           /* 6.57:1 op wit, 2.62:1 op donker */
	--csa-alert-on-dark: #ff8a80;   /* 7.53:1 op #121c27, 2.28:1 op wit */
	/* Komt er ooit een formulier of foutmelding op een donkere band, gebruik
	   dan --csa-alert-on-dark. Vandaag staat het formulier alleen op
	   contact.html, dus die variant heeft nog geen toepassing. */
}

/* --------------------------------------------------------------------------
   Tekst op donkere banden
   -------------------------------------------------------------------------- */

.hzAccordion__item .content .text {
	color: var(--csa-ink-on-dark);
}

/* --------------------------------------------------------------------------
   Links in lopende tekst
   De site gebruikte drie verschillende blauwen voor links, geen ervan uit het
   palet. Een link hoort hier bij de inkt: donkerder dan de tekst eromheen,
   met een onderstreping die het werk doet - zodat kleur niet de enige drager
   is voor wie kleur niet onderscheidt.
   -------------------------------------------------------------------------- */

.page-content a:not([class]),
.text-content a:not([class]),
.contact-info a:not([class]),
.job-list a:not([class]),
.accordion-body a:not([class]),
.faq-one-left .section-header p a {
	color: var(--csa-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-thickness 0.15s ease;
}

.page-content a:not([class]):hover,
.text-content a:not([class]):hover,
.contact-info a:not([class]):hover,
.job-list a:not([class]):hover,
.accordion-body a:not([class]):hover,
.faq-one-left .section-header p a:hover {
	color: var(--csa-ink);
	text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   Waar sta ik?
   Geen enkele pagina markeerde het actieve menu-item. Kleur alleen kan dat
   hier niet dragen - de navigatie is al volledig wit - dus het teken is een
   streep, met kleur als versterking.
   -------------------------------------------------------------------------- */

.header__main .main-menu ul li:not(.nav-cta) a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 26px;
	height: 2px;
	background-color: currentColor;
}

.header__main .main-menu ul li.nav-cta a[aria-current="page"] {
	background-color: var(--csa-ink);
}

/* --------------------------------------------------------------------------
   Formulier: de drie contrastfouten uit de vorige stap
   -------------------------------------------------------------------------- */

.csa-field input,
.csa-field select,
.csa-field textarea {
	border-color: var(--csa-line-strong);
}

.csa-field input:hover,
.csa-field select:hover,
.csa-field textarea:hover {
	border-color: var(--csa-ink-soft);
}

/* Doorzichtigheid maakte de leesbaarheid afhankelijk van wat eronder ligt;
   deze twee zakten daardoor naar 3.63:1. Nu een echte kleur. */
.csa-field__hint,
.csa-form__promise {
	opacity: 1;
	color: var(--csa-ink-soft);
}

/* --------------------------------------------------------------------------
   Leesbaarheid van de hero
   De belangrijkste zin van de site - 44 tot 72px wit - lag rechtstreeks op
   drie onbewerkte foto's die elke acht seconden wisselen. Er was geen scrim:
   .banner-two-area::before en .banner-three-area::before bestaan in de
   template, .banner-area::before niet. De leesbaarheid hing dus af van welke
   foto er toevallig stond, en dat lot werd drie keer opnieuw geworpen.

   Het verloop is schuin en loopt naar bijna niets aan de rechterkant, zodat
   de satelliet in beeld blijft terwijl de tekst links een vaste ondergrond
   krijgt.
   -------------------------------------------------------------------------- */

.banner__image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		rgba(18, 28, 39, 0.85) 0%,
		rgba(18, 28, 39, 0.6) 30%,
		rgba(18, 28, 39, 0.25) 60%,
		rgba(18, 28, 39, 0.05) 85%
	);
}


/* ======================= beweging ======================= */

/*
   prefers-reduced-motion dekte tot nu toe alleen het 'ademen' van de foto's
   en de hero-slider. De animaties van de template - WOW.js, animate.css,
   splitting.js, de oneindige pijltjeslussen - liepen gewoon door.

   Dit is bewust geen blinde `animation: 0.01ms` over alles heen: dat sloopt
   ook de overgangen die feedback geven bij hover en focus. Wat hier stopt
   zijn entree-animaties (de eindtoestand wordt meteen getoond) en lussen
   die nooit ophouden. Overgangen op interactie blijven.
*/
@media (prefers-reduced-motion: reduce) {
	.wow,
	.animated,
	[data-animation] {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		visibility: visible !important;
	}

	.splt-txt .char,
	.splt-txt .word {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	.animation__arryUpDown,
	.animation__arryLeftRight,
	.about__rectangle .item,
	.about__rectangle .item-dark {
		animation: none !important;
	}

	/* De parallax op de hero verplaatst de foto tijdens het scrollen. */
	.banner__image [data-swiper-parallax] {
		transform: none !important;
	}
}


/* ======================= aanraakdoelen ======================= */

/*
   De knop in het uitklapmenu kwam op ongeveer 34px uit: padding 6px boven en
   onder plus een regelhoogte van 17px. Dat is onder de 44px die een duim
   betrouwbaar raakt, en het is de enige actie in dat paneel.
*/
.sidebar__btns a,
.sidebar__btns .sign-in {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-block: 0.625rem;
}

/* De voettekstlinks staan als losse woorden in een regel van 17px; een
   grotere raakzone kost hier niets omdat ze toch op eigen regels staan. */
.footer-area a {
	display: inline-block;
	padding-block: 0.375rem;
}


/* ======================= leesbaarheid op donker ======================= */

/*
   De CTA-band en de footer stonden op 75-85% doorzichtigheid. Op een donkere
   ondergrond haalt dat de tekst omlaag naar een grijs dat slechter leest dan
   het wit dat eronder zit. Doorzichtigheid is hier geen ontwerpkeuze maar
   verlies: de kleur was al goed.
*/
.footer-area,
.footer-area p,
.footer-area a {
	color: #ffffff;
}

.footer-area .opacity-75,
.footer-area a.opacity-75 {
	opacity: 1 !important;
}