/*
Theme Name: De Gangmakers
Theme URI: https://degangmakers.com/
Author: De Gangmakers
Description: Thema voor het hospitality collectief De Gangmakers. De vormgeving zit in dit thema, alle content komt uit de plugin "De Gangmakers Core".
Version: 1.3.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: degangmakers
Tags: business, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   Lettertype
   ========================================================================== */

@font-face {
	font-family: 'Atkinson Next';
	src: url('assets/fonts/AtkinsonHyperlegibleNext-Variable.woff2') format('woff2-variations'),
		url('assets/fonts/AtkinsonHyperlegibleNext-Variable.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Next';
	src: url('assets/fonts/AtkinsonHyperlegibleNext-Italic-Variable.woff2') format('woff2-variations'),
		url('assets/fonts/AtkinsonHyperlegibleNext-Italic-Variable.woff2') format('woff2');
	font-weight: 200 800;
	font-style: italic;
	font-display: swap;
}

/* ==========================================================================
   Merkwaarden
   ========================================================================== */

:root {
	--gm-bg: #faf7f4;
	--gm-ink: #0c1116;
	--gm-white: #fff;

	--gm-blue: #1060a8;
	--gm-wine: #981030;
	--gm-orange: #e85010;
	--gm-orange-light: #ff8a4c;

	--gm-text: #2a3239;
	--gm-muted: #4a545c;

	--gm-on-dark: #c9cfd5;
	--gm-on-dark-strong: #e4e8eb;
	--gm-on-dark-body: #d2d8dd;
	--gm-on-dark-soft: #9aa4ac;
	--gm-on-dark-dim: #8e979f;

	--gm-grad: linear-gradient(115deg, #1060a8, #981030 52%, #e85010);
	--gm-grad-line: linear-gradient(90deg, #1060a8, #981030 55%, #e85010);

	/*
	 * De doorlopende variant: dezelfde merkkleuren, maar heen en terug, zodat
	 * hij op dubbele breedte eindeloos kan schuiven. Dit is het effect dat door
	 * het woord "hospitality" loopt; de knoppen gebruiken hem nu ook.
	 */
	--gm-grad-sheen: linear-gradient(115deg, #1060a8, #981030 30%, #e85010 50%, #981030 70%, #1060a8 100%);

	/* Lichter afgestemd, voor tekst op een donkere ondergrond. */
	--gm-grad-sheen-light: linear-gradient(115deg, #7cbdf0, #ff8a4c 30%, #ffd0a8 50%, #ff8a4c 70%, #7cbdf0 100%);

	/*
	 * Voor tekst op een lichte ondergrond. Als vulling is het merkoranje prima —
	 * daar staat witte tekst op — maar als letterkleur op wit haalt #e85010 maar
	 * 3,8:1, onder de 4,5:1 die WCAG AA vraagt. Deze variant zit op 5,1:1 en is
	 * met het blote oog nauwelijks te onderscheiden. Wil je toch exact het
	 * merkoranje, vervang #c73f0c dan door #e85010.
	 */
	--gm-grad-sheen-text: linear-gradient(115deg, #1060a8, #981030 30%, #c73f0c 50%, #981030 70%, #1060a8 100%);

	/*
	 * De kop "hospitality" doet 9 seconden per ronde. Op een knop zie je maar
	 * een smal stukje van het verloop, waardoor de hele knop als geheel
	 * verkleurt — dat oogt onrustiger bij hetzelfde tempo. Vandaar ruim twee
	 * keer zo traag. Het script verdeelt de knoppen daarnaast over de ronde,
	 * zodat ze niet allemaal tegelijk omslaan.
	 */
	--gm-sheen-duration: 22s;

	--gm-max: 1240px;
	--gm-gutter: 20px;
	--gm-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

	--gm-line-light: rgba(12, 17, 22, 0.12);
	--gm-line-dark: rgba(255, 255, 255, 0.16);
}

/* ==========================================================================
   Basis
   ========================================================================== */

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

/*
 * Het attribuut hidden krijgt van de browser display:none mee, maar dat is
 * een regel zonder klasse — en daarmee verliest hij van elke eigen regel die
 * display zet. Zo bleven de weggefilterde gangmakerkaarten gewoon staan.
 */
[hidden] {
	display: none !important;
}

html,
body {
	margin: 0;
	padding: 0;
	/* clip in plaats van hidden, zodat position:sticky blijft werken */
	overflow-x: clip;
}

body {
	font-family: 'Atkinson Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
	background: var(--gm-bg);
	color: var(--gm-ink);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--gm-wine);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--gm-orange);
}

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

input,
select,
button,
textarea {
	font-family: inherit;
}

::selection {
	background: var(--gm-orange);
	color: #fff;
}

:focus-visible {
	outline: 3px solid var(--gm-orange);
	outline-offset: 3px;
}

.gm-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 14px 22px;
	background: var(--gm-ink);
	color: #fff;
	font-weight: 700;
}

.gm-skip-link:focus {
	left: 12px;
	top: 12px;
	color: #fff;
}

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

.gm-site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.gm-main {
	flex: 1;
}

/* ==========================================================================
   Animaties
   ========================================================================== */

@keyframes gmFade {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

@keyframes gmPieceA {
	0%   { opacity: 0; transform: translate(-46px, 26px) rotate(-38deg); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: none; }
}

@keyframes gmPieceB {
	0%   { opacity: 0; transform: translate(38px, -34px) rotate(34deg); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: none; }
}

@keyframes gmPieceC {
	0%   { opacity: 0; transform: translate(34px, 40px) rotate(26deg) scale(0.8); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: none; }
}

@keyframes gmDraw {
	from { width: 0; }
	to   { width: 100%; }
}

@keyframes gmTicker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes gmSheen {
	0%   { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

@keyframes gmGlow {
	0%, 100% { transform: translate(-10%, -6%) scale(1); opacity: 0.55; }
	50%      { transform: translate(6%, 8%) scale(1.15); opacity: 0.8; }
}

/*
 * Alleen verbergen wanneer JavaScript de secties ook weer zichtbaar kan maken.
 * Zonder JavaScript blijft de hele pagina gewoon leesbaar — belangrijk voor
 * zoekmachines en voor bezoekers met scriptblokkers.
 */
html:not(.no-js) [data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--gm-ease), transform 0.7s var(--gm-ease);
}

html:not(.no-js) [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

.gm-page-enter {
	animation: gmFade 0.5s ease both;
}

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

	html [data-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Bouwstenen
   ========================================================================== */

.gm-wrap {
	max-width: var(--gm-max);
	margin: 0 auto;
	padding-left: var(--gm-gutter);
	padding-right: var(--gm-gutter);
}

.gm-wrap--narrow {
	max-width: 1000px;
}

.gm-section {
	padding-top: clamp(52px, 7vw, 96px);
	padding-bottom: clamp(52px, 7vw, 96px);
}

.gm-section--tight-top { padding-top: 0; }
.gm-section--tight-bottom { padding-bottom: clamp(24px, 3vw, 40px); }

.gm-eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--gm-wine);
}

.gm-eyebrow--dark {
	color: var(--gm-orange-light);
}

.gm-h1 {
	margin: 0;
	font-size: clamp(38px, 6vw, 74px);
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -0.025em;
}

.gm-h2 {
	margin: 0;
	font-size: clamp(30px, 3.8vw, 48px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.gm-h3 {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.gm-lead {
	margin: 20px 0 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--gm-text);
	max-width: 62ch;
}

.gm-sheen {
	background: var(--gm-grad-sheen);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: gmSheen 9s linear infinite;
}

.gm-rule {
	height: 5px;
	margin: 26px 0;
	max-width: 160px;
	border-radius: 3px;
	background: var(--gm-grad-line);
	animation: gmDraw 1.1s 0.3s var(--gm-ease) both;
}

.gm-btn {
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	padding: 16px 28px;
	border: 0;
	border-radius: 2px 18px 2px 18px;
	cursor: pointer;
	transition: transform 0.3s var(--gm-ease), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.gm-btn--grad {
	color: #fff;
}

.gm-btn--grad:hover,
.gm-btn--grad:focus-visible {
	color: #fff;
	transform: translateY(-2px);
}

.gm-btn--ghost-dark {
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.gm-btn--ghost-dark:hover,
.gm-btn--ghost-dark:focus-visible {
	color: #fff;
	border-color: #fff;
	background-color: rgba(255, 255, 255, 0.08);
}

.gm-btn--ghost-light {
	color: var(--gm-ink);
	border: 1.5px solid rgba(12, 17, 22, 0.2);
	padding: 15px 26px;
}

.gm-btn--ghost-light:hover,
.gm-btn--ghost-light:focus-visible {
	color: var(--gm-ink);
	border-color: var(--gm-orange);
}

.gm-btn--white {
	background-color: #fff;
	color: var(--gm-ink);
	font-size: 17px;
	padding: 18px 32px;
	border-radius: 2px 20px 2px 20px;
}

.gm-btn--large {
	font-size: 17px;
	padding: 18px 32px;
	border-radius: 2px 20px 2px 20px;
}

.gm-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.gm-link-underline {
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
	color: var(--gm-ink);
	border-bottom: 2px solid var(--gm-orange);
	padding-bottom: 2px;
}

/* Booglijn-patroon uit de rondingen van het beeldmerk */

.gm-pattern {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(120% 90% at 80% 10%, #000 20%, transparent 75%);
	mask-image: radial-gradient(120% 90% at 80% 10%, #000 20%, transparent 75%);
}

.gm-pattern--dark {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M0 72 A72 72 0 0 1 72 0' fill='none' stroke='%23FFFFFF' stroke-opacity='.07' stroke-width='1.4'/%3E%3C/svg%3E");
}

.gm-pattern--light {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M0 72 A72 72 0 0 1 72 0' fill='none' stroke='%230C1116' stroke-opacity='.06' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* Het beeldmerk dat in elkaar valt */

.gm-mark {
	display: block;
	overflow: visible;
}

.gm-mark__piece {
	transform-origin: 50% 50%;
	opacity: 0;
}

.gm-mark--animate .gm-mark__piece--a { animation: gmPieceA 1.1s 0.15s var(--gm-ease) both; }
.gm-mark--animate .gm-mark__piece--b { animation: gmPieceB 1.1s 0.27s var(--gm-ease) both; }
.gm-mark--animate .gm-mark__piece--c { animation: gmPieceC 1.1s 0.39s var(--gm-ease) both; }

.gm-mark:not(.gm-mark--animate) .gm-mark__piece { opacity: 1; }

/* ==========================================================================
   Kop van de site
   ========================================================================== */

.gm-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(250, 247, 244, 0.9);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(12, 17, 22, 0.1);
}

.gm-header__inner {
	max-width: var(--gm-max);
	margin: 0 auto;
	padding: 12px var(--gm-gutter);
	display: flex;
	align-items: center;
	gap: 20px;
	position: relative;
}

.gm-header__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.gm-header__logo img {
	height: 38px;
	width: auto;
	display: block;
}

.gm-nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.gm-nav ul {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Alleen de echte menulinks, niet de knop die ernaast staat. Met `.gm-nav a`
 * won deze regel het op specificiteit van .gm-header__cta, waardoor de knop
 * donkere tekst en de krappe padding van een menu-item kreeg.
 */
.gm-nav ul a {
	display: block;
	font-size: 15px;
	font-weight: 700;
	padding: 10px 12px;
	color: var(--gm-ink);
	border-bottom: 2px solid transparent;
}

.gm-nav ul a:hover,
.gm-nav ul a:focus-visible {
	color: var(--gm-wine);
}

.gm-nav .current-menu-item > a,
.gm-nav .current_page_item > a,
.gm-nav .current-menu-ancestor > a,
.gm-nav .gm-nav__item--current > a {
	color: var(--gm-wine);
	border-bottom-color: var(--gm-orange);
}

.gm-header__cta {
	margin-left: 10px;
	font-size: 15px;
	font-weight: 700;
	padding: 13px 22px;
	border-radius: 2px 14px 2px 14px;
	color: #fff;
	background: var(--gm-grad);
}

.gm-header__cta:hover,
.gm-header__cta:focus-visible {
	color: #fff;
}

.gm-burger {
	display: none;
	margin-left: auto;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(12, 17, 22, 0.2);
	background: #fff;
	border-radius: 2px 12px 2px 12px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var(--gm-ink);
}

@media (max-width: 899px) {
	.gm-header__logo img { height: 30px; }

	.gm-burger { display: block; }

	.gm-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		margin: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding: 12px var(--gm-gutter) 20px;
		background: var(--gm-bg);
		border-bottom: 1px solid rgba(12, 17, 22, 0.12);
		box-shadow: 0 20px 40px rgba(12, 17, 22, 0.12);
	}

	.gm-nav.is-open { display: flex; }

	.gm-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.gm-header__cta {
		margin-left: 0;
		margin-top: 10px;
		text-align: center;
		font-size: 16px;
		padding: 15px 22px;
		border-radius: 2px 16px 2px 16px;
	}
}

/* ==========================================================================
   Home — hero
   ========================================================================== */

.gm-hero {
	position: relative;
	overflow: hidden;
	background: var(--gm-ink);
}

.gm-hero__glow {
	position: absolute;
	top: -10%;
	right: -8%;
	width: min(620px, 70vw);
	height: min(620px, 70vw);
	pointer-events: none;
	border-radius: 50%;
	filter: blur(90px);
	background: radial-gradient(circle at 40% 40%, rgba(232, 80, 16, 0.28), rgba(152, 16, 48, 0.22) 45%, rgba(16, 96, 168, 0.18) 70%, transparent 75%);
	animation: gmGlow 16s ease-in-out infinite;
}

.gm-hero__inner {
	position: relative;
	max-width: var(--gm-max);
	margin: 0 auto;
	padding: clamp(40px, 6vw, 96px) var(--gm-gutter) clamp(40px, 5vw, 72px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}

.gm-hero__title {
	color: #fff;
}

.gm-hero__intro {
	margin: 0;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.6;
	max-width: 54ch;
	color: var(--gm-on-dark-strong);
}

.gm-hero__sub {
	margin: 18px 0 0;
	font-size: 16px;
	line-height: 1.65;
	max-width: 54ch;
	color: var(--gm-on-dark-soft);
}

.gm-hero__aside {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.gm-hero__figure {
	position: relative;
	width: 100%;
}

.gm-hero__image {
	position: relative;
	overflow: hidden;
	border-radius: 4px 90px 4px 4px;
	background: var(--gm-ink);
}

/*
 * Een vaste hoogte bij een meegroeiende breedte betekent dat de verhouding van
 * het kader met het venster meeverandert — en dat object-fit: cover er dus bij
 * elke schermbreedte een ander stuk afsnijdt. Bij een interieurfoto valt dat
 * niet op, bij een groepsfoto sneuvelen de mensen aan de zijkanten. Met een
 * vaste verhouding is het kader voorspelbaar: een beeld van 3:2 past er precies
 * in en er gaat niets af. De hoogte komt op dezelfde maat uit als voorheen.
 */
.gm-hero__image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	display: block;
}

.gm-hero__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(180deg, rgba(12, 17, 22, 0), rgba(12, 17, 22, 0.72));
}

.gm-hero__caption {
	position: absolute;
	left: clamp(20px, 3vw, 32px);
	right: clamp(20px, 3vw, 32px);
	bottom: clamp(20px, 3vw, 30px);
	margin: 0 0 0 auto;
	text-align: right;
	font-size: clamp(17px, 1.7vw, 21px);
	line-height: 1.35;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #fff;
	max-width: 18ch;
}

.gm-hero__mark {
	position: absolute;
	left: -4px;
	bottom: -26px;
	padding: 14px;
	background: var(--gm-ink);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 4px 22px 4px 4px;
}

.gm-hero__spacer {
	height: 26px;
}

.gm-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	width: 100%;
	background: var(--gm-line-dark);
	border: 1px solid var(--gm-line-dark);
}

.gm-stats__item {
	background: var(--gm-ink);
	padding: 18px 14px;
	text-align: center;
}

.gm-stats__value {
	display: block;
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 800;
	line-height: 1;
	color: #fff;
}

.gm-stats__label {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--gm-on-dark-soft);
}

/* ==========================================================================
   Lichtkrant
   ========================================================================== */

.gm-ticker {
	background: var(--gm-ink);
	color: var(--gm-on-dark);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.gm-ticker__viewport {
	padding: 16px 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.gm-ticker__track {
	display: inline-flex;
	align-items: center;
	gap: 26px;
	width: max-content;
	animation: gmTicker 38s linear infinite;
}

.gm-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 26px;
	white-space: nowrap;
	font-size: 15px;
	letter-spacing: 0.04em;
}

.gm-ticker__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gm-orange);
	display: inline-block;
}

/* ==========================================================================
   Specialismen
   ========================================================================== */

/*
 * Breder dan voorheen. Met tien blokken vulde 272px de rijen netjes; met vijf
 * leverde dat vier kaarten met een gat ernaast op. Vanaf 320px worden het er
 * drie op een rij, en staat de tweede rij met twee er rustiger onder.
 */
.gm-spec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(12px, 1.4vw, 18px);
}

.gm-spec {
	position: relative;
	overflow: hidden;
	min-height: 330px;
	border-radius: 4px 34px 4px 34px;
	background: var(--gm-ink);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	/*
	 * Bovenin is ruimte vrijgehouden voor het icoon en het nummer: die staan
	 * los van de tekststroom. Zonder die ruimte groeit een lange kop dwars
	 * over het icoon heen, zoals bij "Keukeninrichting & interieur".
	 */
	padding: 82px 26px 26px;
	transition: transform 0.5s var(--gm-ease), box-shadow 0.5s ease;
}

.gm-spec:hover,
.gm-spec:focus-within {
	color: #fff;
	transform: translateY(-5px);
	box-shadow: 0 26px 52px rgba(12, 17, 22, 0.24);
}

.gm-spec__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.66;
	transition: transform 1.2s var(--gm-ease), opacity 0.6s ease;
}

.gm-spec:hover .gm-spec__image,
.gm-spec:focus-within .gm-spec__image {
	transform: scale(1.08);
	opacity: 0.82;
}

.gm-spec__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 17, 22, 0.08) 0%, rgba(12, 17, 22, 0.52) 50%, rgba(12, 17, 22, 0.88) 100%);
}

.gm-spec__top {
	position: absolute;
	top: 22px;
	left: 26px;
	right: 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.gm-spec__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 2px 15px 2px 15px;
	background: var(--gm-grad);
}

.gm-spec__num {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.65);
}

.gm-spec__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gm-spec__dash {
	display: block;
	width: 44px;
	height: 3px;
	border-radius: 2px;
	background: var(--gm-grad-line);
	transition: width 0.5s var(--gm-ease);
}

.gm-spec:hover .gm-spec__dash,
.gm-spec:focus-within .gm-spec__dash {
	width: 96px;
}

.gm-spec__title {
	margin: 0;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.22;
}

.gm-spec__title a {
	color: inherit;
}

.gm-spec__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.gm-spec__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--gm-on-dark-body);
}

.gm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.gm-chips li {
	position: relative;
	z-index: 1;
}

.gm-chips a,
.gm-chips span {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	padding: 6px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #fff;
}

.gm-chips a:hover,
.gm-chips a:focus-visible {
	color: var(--gm-ink);
	background: #fff;
	border-color: #fff;
}

/* ==========================================================================
   Fotoband
   ========================================================================== */

.gm-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}

.gm-strip figure {
	margin: 0;
	position: relative;
}

.gm-strip__frame {
	display: block;
	overflow: hidden;
	border-radius: 4px 70px 4px 4px;
}

.gm-strip figure:nth-child(2) .gm-strip__frame { border-radius: 4px 4px 4px 70px; }
.gm-strip figure:nth-child(3n) .gm-strip__frame { border-radius: 4px 4px 70px 4px; }

.gm-strip img {
	width: 100%;
	height: clamp(200px, 22vw, 290px);
	object-fit: cover;
	display: block;
	transition: transform 0.7s var(--gm-ease);
}

.gm-strip__frame:hover img {
	transform: scale(1.06);
}

.gm-strip figcaption {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--gm-muted);
}

/* ==========================================================================
   Werkwijze
   ========================================================================== */

.gm-steps-section {
	position: relative;
	background: #fff;
	border-top: 1px solid rgba(12, 17, 22, 0.1);
	border-bottom: 1px solid rgba(12, 17, 22, 0.1);
	overflow: hidden;
}

.gm-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(24px, 3vw, 44px);
}

.gm-step {
	border-top: 2px solid var(--gm-ink);
	padding-top: 20px;
}

.gm-step__num,
.gm-numtile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 2px 14px 2px 14px;
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	background: var(--gm-grad);
}

.gm-step h3 {
	margin: 16px 0 10px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.gm-step p {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--gm-muted);
}

/* ==========================================================================
   Gangmakers — logo-raster op de homepage
   ========================================================================== */

.gm-section__head {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 34px;
}

.gm-partners {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
	gap: 12px;
}

.gm-partner {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--gm-line-light);
	border-radius: 2px 16px 2px 16px;
	background: #fff;
	color: var(--gm-ink);
	transition: transform 0.3s var(--gm-ease), border-color 0.3s ease;
}

.gm-partner:hover,
.gm-partner:focus-visible {
	color: var(--gm-ink);
	border-color: var(--gm-orange);
	transform: translateY(-3px);
}

.gm-partner__image {
	display: block;
	overflow: hidden;
	border-radius: 2px 12px 2px 2px;
}

.gm-partner__image img {
	width: 100%;
	height: 92px;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--gm-ease);
}

.gm-partner:hover .gm-partner__image img {
	transform: scale(1.07);
}

.gm-partner__name {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
}

.gm-partner__tag {
	font-size: 13px;
	line-height: 1.4;
	color: var(--gm-muted);
}

.gm-placeholder {
	display: block;
	width: 100%;
	background: linear-gradient(135deg, rgba(16, 96, 168, 0.18), rgba(152, 16, 48, 0.16) 52%, rgba(232, 80, 16, 0.2));
}

/* ==========================================================================
   Werkgebied
   ========================================================================== */

.gm-area {
	background: var(--gm-ink);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.gm-area__inner {
	position: relative;
	max-width: var(--gm-max);
	margin: 0 auto;
	padding: clamp(52px, 7vw, 96px) var(--gm-gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(32px, 5vw, 72px);
}

.gm-area h2 {
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.1;
	max-width: 18ch;
}

/* :not() zodat de bovenregel zijn eigen formaat houdt — zonder die uitzondering
   wint deze regel op specificiteit van .gm-eyebrow. */
.gm-area p:not(.gm-eyebrow) {
	margin: 22px 0 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--gm-on-dark);
	max-width: 52ch;
}

/* De foto naast de tekst. Dezelfde afgeronde hoek als in de kop, maar
   gespiegeld, zodat de twee beelden op de pagina naar elkaar wijzen. */
.gm-area__figure {
	position: relative;
	overflow: hidden;
	border-radius: 4px 4px 4px 70px;
	align-self: center;
	background: rgba(255, 255, 255, 0.06);
}

.gm-area__figure img {
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   Veelgestelde vragen
   ========================================================================== */

.gm-faq {
	border-top: 1px solid rgba(12, 17, 22, 0.16);
}

.gm-faq__item {
	border-bottom: 1px solid rgba(12, 17, 22, 0.16);
}

.gm-faq__question {
	width: 100%;
	text-align: left;
	cursor: pointer;
	background: transparent;
	border: 0;
	padding: 22px 0;
	display: flex;
	gap: 20px;
	align-items: baseline;
	justify-content: space-between;
	color: var(--gm-ink);
}

.gm-faq__question h3 {
	margin: 0;
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.gm-faq__icon {
	flex: 0 0 auto;
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	color: var(--gm-orange);
	transition: transform 0.3s ease;
}

.gm-faq__question[aria-expanded='true'] .gm-faq__icon {
	transform: rotate(45deg);
}

.gm-faq__answer {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	padding-bottom: 0;
	transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}

.gm-faq__answer p {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--gm-muted);
	max-width: 78ch;
}

.gm-faq__item.is-open .gm-faq__answer {
	max-height: 600px;
	opacity: 1;
	padding-bottom: 22px;
}

/* Zonder JavaScript staan alle antwoorden open. */
.no-js .gm-faq__answer {
	max-height: none;
	opacity: 1;
	padding-bottom: 22px;
}

/* ==========================================================================
   Slotsectie
   ========================================================================== */

.gm-cta {
	position: relative;
	overflow: hidden;
	background: var(--gm-ink);
}

.gm-cta__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.42;
	transform: scale(1.04);
}

.gm-cta__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(12, 17, 22, 0.95) 0%, rgba(12, 17, 22, 0.82) 42%, rgba(152, 16, 48, 0.42) 74%, rgba(232, 80, 16, 0.38) 100%);
}

.gm-cta__inner {
	position: relative;
	max-width: var(--gm-max);
	margin: 0 auto;
	padding: clamp(56px, 9vw, 132px) var(--gm-gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(28px, 4vw, 64px);
	align-items: end;
}

.gm-cta h2 {
	font-size: clamp(32px, 5vw, 62px);
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: #fff;
	max-width: 15ch;
}

.gm-cta p:not(.gm-eyebrow) {
	margin: 22px 0 0;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.6;
	color: var(--gm-on-dark-strong);
	max-width: 46ch;
}

.gm-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ==========================================================================
   Pagina-koppen
   ========================================================================== */

.gm-page-hero {
	position: relative;
	overflow: hidden;
	background: var(--gm-ink);
	color: #fff;
}

.gm-page-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.32;
}

.gm-page-hero--gangmakers .gm-page-hero__image { opacity: 0.3; }
.gm-page-hero--over .gm-page-hero__image { object-position: 50% 35%; }
.gm-page-hero--gangmaker .gm-page-hero__image { opacity: 0.38; }

.gm-page-hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(12, 17, 22, 0.96) 0%, rgba(12, 17, 22, 0.84) 46%, rgba(152, 16, 48, 0.4) 78%, rgba(232, 80, 16, 0.34) 100%);
}

.gm-page-hero--over .gm-page-hero__veil {
	background: linear-gradient(105deg, rgba(12, 17, 22, 0.96) 0%, rgba(12, 17, 22, 0.84) 46%, rgba(16, 96, 168, 0.38) 78%, rgba(152, 16, 48, 0.34) 100%);
}

.gm-page-hero--gangmakers .gm-page-hero__veil {
	background: linear-gradient(105deg, rgba(12, 17, 22, 0.96) 0%, rgba(12, 17, 22, 0.86) 46%, rgba(152, 16, 48, 0.4) 78%, rgba(232, 80, 16, 0.34) 100%);
}

.gm-page-hero__inner {
	position: relative;
	max-width: var(--gm-max);
	margin: 0 auto;
	padding: clamp(48px, 6.5vw, 100px) var(--gm-gutter);
}

.gm-page-hero h1 {
	margin: 0;
	font-size: clamp(34px, 5.2vw, 64px);
	line-height: 1.03;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: #fff;
}

.gm-page-hero__intro {
	margin: 22px 0 0;
	font-size: 18px;
	line-height: 1.65;
	color: var(--gm-on-dark);
	max-width: 62ch;
}

.gm-page-hero .gm-rule {
	margin-bottom: 0;
}

/* ==========================================================================
   Over ons
   ========================================================================== */

.gm-over-intro {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(28px, 4vw, 56px);
	padding-top: clamp(36px, 5vw, 72px);
	padding-bottom: clamp(48px, 6vw, 80px);
}

.gm-over-intro__lead {
	margin: 0 0 24px;
	font-size: clamp(19px, 1.9vw, 23px);
	line-height: 1.55;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--gm-ink);
}

.gm-over-intro__text > p {
	margin: 0 0 20px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--gm-text);
}

.gm-over-intro__text > p:last-child {
	margin-bottom: 0;
}

.gm-over-intro__aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: clamp(8px, 1.5vw, 20px);
}

.gm-over-intro__image {
	width: 100%;
	height: clamp(220px, 26vw, 330px);
	object-fit: cover;
	border-radius: 4px 80px 4px 4px;
	display: block;
	box-shadow: 0 30px 60px rgba(12, 17, 22, 0.22);
}

.gm-stats--light {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 1px;
	background: rgba(12, 17, 22, 0.14);
	border: 1px solid rgba(12, 17, 22, 0.14);
}

.gm-stats--light .gm-stats__item {
	background: var(--gm-bg);
	padding: 22px 20px;
	text-align: left;
}

.gm-stats--light .gm-stats__value {
	color: var(--gm-ink);
	font-size: clamp(26px, 3vw, 34px);
}

.gm-stats--light .gm-stats__label {
	font-size: 14px;
	color: var(--gm-muted);
}

@media (max-width: 899px) {
	.gm-over-intro__aside { margin-top: 0; }
}

.gm-values-section {
	background: #fff;
	border-top: 1px solid rgba(12, 17, 22, 0.1);
	border-bottom: 1px solid rgba(12, 17, 22, 0.1);
}

.gm-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(20px, 2.5vw, 36px);
}

.gm-columns--wide {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.gm-column {
	border-top: 2px solid var(--gm-ink);
	padding-top: 18px;
}

.gm-column h3 {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.gm-column p {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--gm-muted);
}

.gm-column--numbered {
	padding-top: 20px;
}

.gm-column__num {
	font-size: 13px;
	font-weight: 700;
	color: var(--gm-orange);
}

.gm-column--numbered h3 {
	margin: 8px 0 12px;
	font-size: 24px;
}

/* ==========================================================================
   Onze Gangmakers — overzicht
   ========================================================================== */

.gm-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: clamp(28px, 4vw, 48px);
	margin: 0;
	list-style: none;
}

.gm-filter {
	display: inline-block;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	padding: 11px 18px;
	border-radius: 2px 14px 2px 14px;
	background: #fff;
	color: var(--gm-ink);
	border: 1px solid rgba(12, 17, 22, 0.2);
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.gm-filter:hover,
.gm-filter:focus-visible {
	color: var(--gm-ink);
	border-color: var(--gm-orange);
}

.gm-filter.is-active {
	background: var(--gm-ink);
	color: #fff;
	border-color: var(--gm-ink);
}

.gm-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: clamp(16px, 2vw, 28px);
}

.gm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--gm-line-light);
	border-radius: 4px 28px 4px 28px;
	overflow: hidden;
	transition: border-color 0.3s ease, transform 0.3s var(--gm-ease);
}

.gm-card:hover {
	border-color: var(--gm-orange);
	transform: translateY(-3px);
}

.gm-card[hidden] {
	display: none;
}

.gm-card__image {
	display: block;
	overflow: hidden;
}

.gm-card__image img,
.gm-card__image .gm-placeholder {
	width: 100%;
	height: 186px;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--gm-ease);
}

.gm-card:hover .gm-card__image img {
	transform: scale(1.06);
}

.gm-card__body {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 24px 24px 26px;
	flex: 1;
}

.gm-card__field {
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--gm-wine);
}

.gm-card__title {
	margin: 0;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.gm-card__title a {
	color: var(--gm-ink);
}

/* De hele kaart is klikbaar, maar er staat maar één link in de tabvolgorde. */
.gm-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.gm-card__tag {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--gm-ink);
}

.gm-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--gm-muted);
	flex: 1;
}

.gm-card__more {
	font-size: 15px;
	font-weight: 700;
	color: var(--gm-orange);
	margin-top: 4px;
}

.gm-join {
	margin-top: clamp(40px, 5vw, 72px);
	padding: clamp(28px, 4vw, 56px);
	border-radius: 4px 44px 4px 44px;
	background: var(--gm-grad);
	color: #fff;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
	align-items: center;
}

.gm-join h2 {
	margin: 0;
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.gm-join p {
	margin: 14px 0 0;
	font-size: 17px;
	line-height: 1.6;
	max-width: 46ch;
}

.gm-join__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: flex-end;
}

.gm-join .gm-btn--white {
	font-size: 16px;
	padding: 16px 28px;
	border-radius: 2px 18px 2px 18px;
}

.gm-empty {
	padding: 40px 0;
	font-size: 17px;
	color: var(--gm-muted);
}

/* ==========================================================================
   Profielpagina van een gangmaker
   ========================================================================== */

.gm-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14px;
	color: var(--gm-on-dark-dim);
	margin-bottom: clamp(28px, 4vw, 52px);
}

.gm-breadcrumb a {
	color: var(--gm-on-dark);
}

.gm-breadcrumb [aria-current='page'] {
	color: var(--gm-orange-light);
}

.gm-profile-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(24px, 4vw, 56px);
	align-items: end;
}

.gm-profile-hero h1 {
	font-size: clamp(36px, 5.6vw, 68px);
	line-height: 1.02;
}

.gm-profile-hero__tag {
	margin: 20px 0 0;
	font-size: clamp(18px, 1.8vw, 22px);
	line-height: 1.5;
	color: var(--gm-on-dark-strong);
	max-width: 46ch;
}

.gm-profile-hero__logo {
	justify-self: end;
	padding: 26px 30px;
	border-radius: 2px 26px 2px 26px;
	max-width: 260px;
	background: #fff;
}

.gm-profile-hero__logo--dark {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.gm-profile-hero__logo img {
	width: 100%;
	height: auto;
	display: block;
}

.gm-profile {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
	padding-top: clamp(40px, 5vw, 72px);
	padding-bottom: clamp(32px, 4vw, 56px);
}

@media (max-width: 899px) {
	.gm-profile { grid-template-columns: 1fr; }
}

.gm-profile__lead {
	margin: 0 0 26px;
	font-size: clamp(19px, 1.9vw, 23px);
	line-height: 1.55;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--gm-ink);
}

.gm-profile__text > p {
	margin: 0 0 20px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--gm-text);
}

.gm-profile__text > ul,
.gm-profile__text > ol {
	font-size: 17px;
	line-height: 1.75;
	color: var(--gm-text);
}

.gm-quote {
	margin: 32px 0;
	padding: 26px 28px;
	border-radius: 2px 26px 2px 26px;
	background: #fff;
	border: 1px solid rgba(12, 17, 22, 0.14);
}

.gm-quote p {
	margin: 0;
	font-size: clamp(18px, 1.8vw, 21px);
	line-height: 1.55;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--gm-ink);
}

.gm-quote footer {
	margin-top: 12px;
	font-size: 14px;
	color: var(--gm-muted);
}

.gm-plan {
	margin: 32px 0;
}

.gm-plan h2 {
	margin: 0 0 20px;
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.gm-plan__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: gm-plan;
}

.gm-plan__item {
	display: flex;
	gap: 18px;
	padding: 16px 0;
	border-top: 1px solid rgba(12, 17, 22, 0.14);
	counter-increment: gm-plan;
}

.gm-plan__num {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px 12px 2px 12px;
	font-size: 15px;
	font-weight: 800;
	color: #fff;
	background: var(--gm-grad);
}

.gm-plan__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.gm-plan__title {
	font-size: 17px;
	font-weight: 800;
}

.gm-plan__text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--gm-muted);
}

.gm-profile__aside {
	position: sticky;
	top: 96px;
}

@media (max-width: 899px) {
	.gm-profile__aside { position: static; }
}

.gm-contact-card {
	background: #fff;
	border: 1px solid rgba(12, 17, 22, 0.14);
	border-radius: 4px 30px 4px 30px;
	padding: 26px 26px 28px;
}

.gm-contact-card h2 {
	margin: 0 0 18px;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--gm-wine);
}

.gm-contact-card__row {
	padding: 12px 0;
	border-top: 1px solid rgba(12, 17, 22, 0.12);
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.gm-contact-card__key {
	font-size: 13px;
	color: var(--gm-muted);
}

.gm-contact-card__value {
	font-size: 16px;
	font-weight: 700;
	color: var(--gm-ink);
}

.gm-contact-card__cta {
	display: block;
	text-align: center;
	margin-top: 20px;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 20px;
	border: 1.5px solid rgba(12, 17, 22, 0.2);
	border-radius: 2px 16px 2px 16px;
	color: var(--gm-ink);
}

.gm-contact-card__cta:hover,
.gm-contact-card__cta:focus-visible {
	color: var(--gm-ink);
	border-color: var(--gm-orange);
}

.gm-impression {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}

.gm-impression figure {
	margin: 0;
	overflow: hidden;
	border-radius: 2px 20px 2px 20px;
}

.gm-impression img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--gm-ease);
}

.gm-impression figure:hover img {
	transform: scale(1.07);
}

.gm-others {
	background: #fff;
	border-top: 1px solid rgba(12, 17, 22, 0.1);
}

.gm-others .gm-partner {
	background: var(--gm-bg);
}

/* ==========================================================================
   Contact
   ========================================================================== */

.gm-contact {
	position: relative;
	overflow: hidden;
}

.gm-contact__inner {
	position: relative;
	max-width: var(--gm-max);
	margin: 0 auto;
	padding: clamp(28px, 4vw, 56px) var(--gm-gutter) clamp(44px, 6vw, 88px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(32px, 5vw, 72px);
}

/*
 * Zodra er ruimte is, krijgt het formulier het grootste deel. Daar staat sinds
 * de gangmakerkiezer een raster met vijftien tegels in; in een halve kolom
 * worden dat drie smalle rijtjes.
 */
@media (min-width: 1000px) {
	.gm-contact__inner {
		grid-template-columns: minmax(280px, 360px) 1fr;
	}
}

.gm-contact-list {
	margin-top: 8px;
	border: 1px solid rgba(12, 17, 22, 0.14);
	background: rgba(255, 255, 255, 0.6);
}

.gm-contact-list__row {
	padding: 20px 22px;
	border-bottom: 1px solid rgba(12, 17, 22, 0.14);
}

.gm-contact-list__row:last-child {
	border-bottom: 0;
}

.gm-contact-list__key {
	display: block;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--gm-muted);
}

.gm-contact-list__value {
	display: block;
	font-size: 19px;
	font-weight: 700;
}

.gm-contact-list__note {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--gm-muted);
}

.gm-form {
	background: #fff;
	border: 1px solid rgba(12, 17, 22, 0.14);
	border-radius: 4px 40px 4px 40px;
	padding: clamp(22px, 3vw, 40px);
}

.gm-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 18px;
}

/*
 * Alleen de echte veldlabels. Zonder de > raakte deze regel ook het label om
 * een gangmakertegel in de kiezer, en zette die op flex terwijl het een raster
 * moet zijn — logo boven, vinkje en naam eronder.
 */
.gm-form > label,
.gm-form__grid > label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
}

/*
 * Ruimte tussen de velden die onder elkaar staan. Alleen de directe kinderen
 * van het formulier: zonder de > raakte deze regel ook de velden ín het
 * tweekolomsraster, waardoor "Bedrijf" 18px lager stond dan "Naam".
 */
.gm-form > label + label,
.gm-form__grid + label {
	margin-top: 18px;
}

/* Vinkjes uitgezonderd: die hebben geen veldvulling of -rand nodig. */
.gm-form input:not([type="checkbox"]),
.gm-form select,
.gm-form textarea {
	font-size: 16px;
	padding: 14px 16px;
	border: 1px solid rgba(12, 17, 22, 0.22);
	border-radius: 2px;
	background: var(--gm-bg);
	color: var(--gm-ink);
	font-weight: 400;
}

.gm-form textarea {
	resize: vertical;
}

.gm-form input:not([type="checkbox"]):focus,
.gm-form select:focus,
.gm-form textarea:focus {
	border-color: var(--gm-orange);
}

.gm-form__submit {
	margin-top: 22px;
	width: 100%;
	border: 0;
	cursor: pointer;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	padding: 17px 24px;
	border-radius: 2px 18px 2px 18px;
	background: var(--gm-grad);
}

.gm-form__note {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gm-muted);
}

.gm-form__error {
	font-size: 13px;
	font-weight: 700;
	color: #981030;
}

.gm-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------- De gangmakerkiezer in het formulier */

/*
 * Ook onderaan ruimte: de kiezer staat tussen het velderaster en het
 * berichtveld in, en die twee regelen hun onderlinge afstand met een regel
 * die nu niets meer overspant.
 */
.gm-form__picker {
	margin: 22px 0;
}

.gm-form__picker-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
}

.gm-form__picker-body {
	margin: 6px 0 14px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--gm-muted);
}

.gm-picks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 10px;
}

.gm-pick {
	border: 1px solid rgba(12, 17, 22, 0.16);
	border-radius: 2px 18px 2px 18px;
	background: var(--gm-bg);
	overflow: hidden;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.gm-pick:hover {
	border-color: rgba(16, 96, 168, 0.5);
}

/*
 * Twee rijen: het logo over de volle breedte, daaronder het vinkje naast de
 * naam. Elke plek is met de hand aangewezen, want met alleen de volgorde van
 * de elementen komt het vinkje boven het logo terecht.
 */
.gm-pick__choose {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 10px;
	padding: 12px;
	cursor: pointer;
	font-weight: 400;
}

.gm-pick__choose input {
	grid-column: 1;
	grid-row: 2;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--gm-orange);
}

.gm-markbox {
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	padding: 4px 6px;
	background: #fff;
	border: 1px solid rgba(12, 17, 22, 0.08);
	border-radius: 2px;
	overflow: hidden;
}

.gm-markbox img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Een wit logo heeft een donkere ondergrond nodig om zichtbaar te blijven. */
.gm-markbox--dark {
	background: var(--gm-ink);
	border-color: transparent;
}

.gm-markbox--photo {
	padding: 0;
	height: 64px;
}

.gm-markbox--photo img,
.gm-markbox--photo .gm-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gm-pick__text {
	display: block;
	grid-column: 2;
	grid-row: 2;
}

.gm-pick__name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.gm-pick__tag {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--gm-muted);
}

/*
 * De contactgegevens staan er al, maar pas in beeld zodra de bezoeker deze
 * gangmaker aanvinkt. Zonder JavaScript doet :has() het werk; het script zet
 * daarnaast een klasse, voor browsers die :has() nog niet kennen.
 */
.gm-pick__contact {
	display: none;
	padding: 0 12px 12px 40px;
	font-size: 13px;
	line-height: 1.5;
}

.gm-pick.is-picked .gm-pick__contact {
	display: block;
}

@supports selector(:has(*)) {
	.gm-pick:has(input:checked) .gm-pick__contact {
		display: block;
	}
}

.gm-pick:has(input:checked),
.gm-pick.is-picked {
	border-color: var(--gm-orange);
	background: rgba(232, 80, 16, 0.06);
}

.gm-pick__row {
	display: block;
	margin-bottom: 6px;
}

.gm-pick__key {
	display: block;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--gm-muted);
}

.gm-pick__value {
	display: block;
	font-weight: 700;
}

.gm-pick__profile {
	display: inline-block;
	margin-top: 4px;
	font-size: 13px;
}

.gm-pick__choose:focus-within {
	outline: 2px solid var(--gm-blue);
	outline-offset: -2px;
}

.gm-notice {
	margin: 0 0 24px;
	padding: 18px 22px;
	border-radius: 2px 20px 2px 20px;
	font-size: 16px;
	line-height: 1.6;
}

.gm-notice--success {
	background: rgba(16, 96, 168, 0.1);
	border: 1px solid rgba(16, 96, 168, 0.35);
	color: var(--gm-ink);
}

.gm-notice--error {
	background: rgba(152, 16, 48, 0.08);
	border: 1px solid rgba(152, 16, 48, 0.35);
	color: var(--gm-ink);
}

/* ==========================================================================
   Projectwijzer
   ========================================================================== */

.gm-page-hero--wijzer .gm-page-hero__veil {
	background: linear-gradient(105deg, rgba(12, 17, 22, 0.96) 0%, rgba(12, 17, 22, 0.84) 46%, rgba(16, 96, 168, 0.42) 78%, rgba(232, 80, 16, 0.3) 100%);
}

.gm-wizard {
	position: relative;
	overflow: hidden;
}

.gm-wizard__inner {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(36px, 5vw, 72px) var(--gm-gutter) clamp(48px, 6vw, 96px);
}

.gm-wizard__form {
	background: #fff;
	border: 1px solid rgba(12, 17, 22, 0.14);
	border-radius: 4px 40px 4px 40px;
	padding: clamp(22px, 3.4vw, 44px);
}

.gm-wizard__bar {
	margin-bottom: 28px;
}

.gm-wizard__count {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gm-muted);
}

.gm-wizard__track {
	height: 5px;
	border-radius: 3px;
	background: rgba(12, 17, 22, 0.1);
	overflow: hidden;
}

.gm-wizard__track span {
	display: block;
	width: 20%;
	height: 100%;
	border-radius: 3px;
	background: var(--gm-grad-line);
	transition: width 0.35s var(--gm-ease);
}

.gm-wizard__step {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.gm-wizard__legend {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0 0 8px;
	font-size: clamp(22px, 2.8vw, 30px);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.gm-wizard__legend:focus-visible {
	outline: 2px solid var(--gm-orange);
	outline-offset: 4px;
}

.gm-wizard__help {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--gm-muted);
	max-width: 58ch;
}

.gm-wizard__empty {
	margin: 0 0 20px;
	padding: 16px 18px;
	border-radius: 2px 18px 2px 18px;
	background: rgba(232, 80, 16, 0.08);
	border: 1px solid rgba(232, 80, 16, 0.3);
	font-size: 15px;
	line-height: 1.6;
}

.gm-wizard__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 10px;
	margin-top: 18px;
}

.gm-wizard__options--wide {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.gm-wizard__matches {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
}

.gm-wizard__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.gm-wizard__warn {
	margin: 16px 0 0;
}

/* De keuzevakjes: het hele blok is klikbaar, het vinkje zelf is de markering. */

.gm-choice {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	border: 1px solid rgba(12, 17, 22, 0.16);
	border-radius: 2px 18px 2px 18px;
	background: var(--gm-bg);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s var(--gm-ease);
}

.gm-choice:hover {
	border-color: rgba(16, 96, 168, 0.5);
	transform: translateY(-1px);
}

.gm-choice input {
	flex: none;
	margin: 2px 0 0;
	width: 19px;
	height: 19px;
	accent-color: var(--gm-orange);
}

.gm-choice__label {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.gm-choice:has(input:checked) {
	border-color: var(--gm-orange);
	background: rgba(232, 80, 16, 0.07);
}

.gm-choice:focus-within {
	border-color: var(--gm-blue);
}

.gm-choice__icon {
	flex: none;
	margin-top: 1px;
	opacity: 0.85;
}

.gm-match__name {
	display: block;
}

.gm-match__tag {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--gm-muted);
}

/*
 * De laatste stap gebruikt de gewone formuliervelden, maar zonder de kaart
 * eromheen — die zit hier al om de hele wizard heen.
 */
.gm-form--bare {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-top: 18px;
}

/* ==========================================================================
   Aanvraagformulier op een profielpagina
   ========================================================================== */

.gm-profile-form {
	position: relative;
	overflow: hidden;
	background: rgba(16, 96, 168, 0.04);
	border-top: 1px solid var(--gm-line-light);
}

.gm-profile-form__inner {
	position: relative;
	max-width: var(--gm-max);
	margin: 0 auto;
	padding: clamp(44px, 6vw, 88px) var(--gm-gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.gm-profile-form__intro .gm-lead {
	max-width: 46ch;
}

.gm-profile-form__direct {
	margin: 22px 0 0;
	font-size: 15px;
	color: var(--gm-muted);
}

/* ==========================================================================
   Losse pagina's en archieven
   ========================================================================== */

.gm-prose {
	max-width: 72ch;
}

.gm-prose > * + * {
	margin-top: 20px;
}

.gm-prose p,
.gm-prose li {
	font-size: 17px;
	line-height: 1.75;
	color: var(--gm-text);
}

.gm-prose h2 {
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-top: 40px;
}

.gm-prose h3 {
	font-size: 22px;
	font-weight: 800;
	margin-top: 32px;
}

.gm-prose img {
	border-radius: 4px 40px 4px 4px;
}

.gm-pagination {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 40px;
}

.gm-pagination .page-numbers {
	display: inline-block;
	padding: 10px 16px;
	border: 1px solid rgba(12, 17, 22, 0.2);
	border-radius: 2px 14px 2px 14px;
	color: var(--gm-ink);
	font-weight: 700;
}

.gm-pagination .page-numbers.current {
	background: var(--gm-ink);
	color: #fff;
	border-color: var(--gm-ink);
}

.gm-archive-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: clamp(16px, 2vw, 28px);
}

.gm-search-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	max-width: 480px;
}

.gm-search-form input[type='search'] {
	flex: 1;
	min-width: 200px;
	font-size: 16px;
	padding: 14px 16px;
	border: 1px solid rgba(12, 17, 22, 0.22);
	border-radius: 2px;
	background: #fff;
}

/* ==========================================================================
   Voettekst
   ========================================================================== */

.gm-footer {
	background: var(--gm-ink);
	color: var(--gm-on-dark);
	position: relative;
	overflow: hidden;
}

.gm-footer__inner {
	position: relative;
	max-width: var(--gm-max);
	margin: 0 auto;
	padding: clamp(44px, 6vw, 80px) var(--gm-gutter) 28px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(28px, 4vw, 56px);
}

.gm-footer__logo {
	height: 40px;
	width: auto;
	display: block;
	margin-bottom: 20px;
}

.gm-footer p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	max-width: 38ch;
}

.gm-footer h2 {
	margin: 0 0 16px;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
	font-weight: 700;
}

.gm-footer__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Alleen de linklijsten en het e-mailadres, niet de knop en de accentlink die
 * er ook in staan — die hebben hun eigen kleur en zouden anders op
 * specificiteit verliezen van een algemene `.gm-footer a`.
 */
.gm-footer__links a,
.gm-footer__email {
	font-size: 15px;
	color: var(--gm-on-dark);
}

.gm-footer__email {
	font-weight: 700;
}

.gm-footer__links a:hover,
.gm-footer__links a:focus-visible,
.gm-footer__email:hover,
.gm-footer__email:focus-visible {
	color: var(--gm-orange-light);
}

.gm-footer__accent {
	display: inline-block;
	margin-top: 18px;
	font-size: 15px;
	font-weight: 700;
	color: var(--gm-orange-light);
}

.gm-footer__cta {
	display: inline-block;
	margin-top: 16px;
	font-size: 15px;
	font-weight: 700;
	padding: 13px 22px;
	border-radius: 2px 14px 2px 14px;
	color: #fff;
	background: var(--gm-grad);
}

.gm-footer__cta:hover,
.gm-footer__cta:focus-visible {
	color: #fff;
}

.gm-footer__bottom {
	position: relative;
	max-width: var(--gm-max);
	margin: 0 auto;
	padding: 20px var(--gm-gutter);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	font-size: 14px;
	color: var(--gm-on-dark-dim);
}

.gm-footer__bottom ul {
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-footer__bottom a {
	font-size: 14px;
	color: var(--gm-on-dark-dim);
}

/* ==========================================================================
   Beheerbalk
   ========================================================================== */

.admin-bar .gm-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .gm-header {
		top: 46px;
	}
}

/* ==========================================================================
   Kleine schermen
   ========================================================================== */

@media (max-width: 899px) {
	.gm-hero__mark .gm-mark {
		width: 92px;
		height: 83px;
	}

	.gm-join__actions {
		justify-content: flex-start;
	}

	.gm-profile-hero__logo {
		justify-self: start;
	}

	.gm-section__head {
		align-items: flex-start;
	}
}

@media (max-width: 599px) {
	:root {
		--gm-gutter: 18px;
	}

	.gm-stats {
		grid-template-columns: 1fr;
	}

	.gm-hero__caption {
		max-width: 14ch;
	}
}

/* ==========================================================================
   Merkgradient in de knoppen

   Hetzelfde doorlopende verloop als in het woord "hospitality". Dit blok staat
   bewust achteraan: de knopregels hierboven zetten hun eigen achtergrond en
   kleur, en die moeten hier overschreven kunnen worden.
   ========================================================================== */

/* Gevulde knoppen: het verloop schuift door de vulling, de tekst blijft wit. */
.gm-btn--grad,
.gm-header__cta,
.gm-footer__cta,
.gm-form__submit {
	background-image: var(--gm-grad-sheen);
	background-color: transparent;
	background-size: 200% 100%;
	animation: gmSheen var(--gm-sheen-duration) linear infinite;
}

/*
 * Knoppen zonder gevulde achtergrond krijgen de gradient in de letters — de
 * techniek van "hospitality". In @supports, want zonder background-clip: text
 * zou de doorzichtige tekstkleur de knop onleesbaar maken; zonder die steun
 * blijft de knop gewoon zoals hij was.
 */
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.gm-btn--ghost-light,
	.gm-contact-card__cta {
		background-image: var(--gm-grad-sheen-text);
		background-size: 200% 100%;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		animation: gmSheen var(--gm-sheen-duration) linear infinite;
	}

	/*
	 * De witte knop heeft wél een vulling, en die moet blijven staan. Vandaar
	 * twee lagen: het verloop bovenop, uitgeknipt tot de letters, en daaronder
	 * een effen witte laag die de pil vormt. Met één laag zou background-clip
	 * ook de vulling wegknippen en bleef er alleen zwevende tekst over.
	 */
	.gm-btn--white {
		background-image: var(--gm-grad-sheen-text), linear-gradient(#fff, #fff);
		background-size: 200% 100%, auto;
		-webkit-background-clip: text, padding-box;
		background-clip: text, padding-box;
		color: transparent;
		animation: gmSheen var(--gm-sheen-duration) linear infinite;
	}

	/* Op een donkere ondergrond een lichtere uitvoering, anders valt hij weg. */
	.gm-btn--ghost-dark {
		background-image: var(--gm-grad-sheen-light);
		background-size: 200% 100%;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		animation: gmSheen var(--gm-sheen-duration) linear infinite;
	}

	/* Bij hover draait de witte knop om: verloop als vulling, witte tekst. */
	.gm-btn--white:hover,
	.gm-btn--white:focus-visible {
		background-image: var(--gm-grad-sheen);
		background-size: 200% 100%;
		-webkit-background-clip: border-box;
		background-clip: border-box;
		color: #fff;
	}

	.gm-btn--ghost-dark:hover,
	.gm-btn--ghost-dark:focus-visible,
	.gm-btn--ghost-light:hover,
	.gm-btn--ghost-light:focus-visible,
	.gm-contact-card__cta:hover,
	.gm-contact-card__cta:focus-visible {
		color: transparent;
	}
}