/*
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.1.0
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%);

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

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

.gm-hero__image img {
	width: 100%;
	height: clamp(230px, 30vw, 380px);
	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
   ========================================================================== */

.gm-spec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(272px, 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;
	padding: 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;
}

.gm-area p {
	margin: 22px 0 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--gm-on-dark);
	max-width: 52ch;
}

.gm-usps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.gm-usp {
	background: var(--gm-ink);
	padding: 22px 20px;
}

.gm-usp h3 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 800;
	color: #fff;
}

.gm-usp p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--gm-on-dark-dim);
	max-width: none;
}

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

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

.gm-form label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
}

.gm-form label + label,
.gm-form__grid + label {
	margin-top: 18px;
}

.gm-form input,
.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: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;
}

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

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