/**
 * Florem — componenten.
 *
 * Mobile-first. Alle waardes komen uit tokens.css.
 *
 * Inhoud:
 *   1. Layout helpers
 *   2. Buttons
 *   3. Header + navigatie
 *   4. Hero
 *   5. Secties, grid, cards, steps
 *   6. CTA banner
 *   7. Footer
 *   8. Archief / losse pagina's
 *   9. Bloem-decoratie (SVG)
 *  10. Pijl-links
 *  11. Intro-sectie (twee koloms)
 *  12. Tarievenkaarten
 *  13. Pagina-hero, prose, credentials, registratie
 *  14. Timeline (Aanpak-pagina)
 *  15. Expertise-groepen
 *  16. Tarievenpagina
 *  17. Contactpagina
 *  18. Gecentreerde pagina-hero
 *  19. Cookiemelding
 *  20. Juridische pagina's
 *  21. 404
 *  22. Print
 *  23. Visuele accenten
 *  24. Herijking van ritme, uitlijning en beeld
 *  25. Tegels in het bloem-palet
 *  26. Zigzag-werkwijze (Aanpak-pagina)
 *  27. Bloem op de CTA: marineblauw blaadje lichter
 *  28. Over mij-hero: kleiner portret
 *  29. Contactformulier
 *  30. Foto-opties (interne keuzepagina)
 *  31. Hero met liggende afbeelding
 *  32. Reacties onder blogartikelen
 */

/* ==========================================================================
   1. Layout helpers
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-sm);
}

@media (min-width: 640px) {
	.container {
		padding-inline: var(--space-md);
	}
}

.container--narrow {
	max-width: var(--container-narrow);
}

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

@media (min-width: 900px) {
	.section {
		padding-block: var(--space-xl);
	}
}

.section--alt {
	background-color: var(--color-bg-alt);
}

.section__header {
	max-width: var(--container-narrow);
	margin-bottom: var(--space-md);
}

.section__header--center {
	margin-inline: auto;
	text-align: center;
}

.section__footer {
	margin-top: var(--space-md);
	text-align: center;
}

.section__title {
	margin-bottom: var(--space-xs);
}

.section__intro {
	color: var(--color-text-muted);
	font-size: 1.1rem;
}

/* ==========================================================================
   2. Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	font-family: var(--font-body);
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	padding: 0.9rem 2rem;
	border-radius: var(--radius-pill);
	background-image: none;
	cursor: pointer;
	transition:
		background-color 0.3s var(--ease),
		color 0.3s var(--ease),
		border-color 0.3s var(--ease),
		transform 0.3s var(--ease),
		box-shadow 0.3s var(--ease);
}

.btn + .btn {
	margin-left: 0;
}

/* Primary — oker CTA */

.btn-primary {
	background-color: var(--color-accent);
	color: var(--color-primary);
	border: 2px solid var(--color-accent);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background-color: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* Secondary — outline */

.btn-secondary {
	background-color: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
	background-color: var(--color-primary);
	color: #fff;
	transform: translateY(-2px);
}

/* Variant voor gebruik op marineblauwe achtergrond. */

.btn-secondary--light {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
}

.btn-secondary--light:hover,
.btn-secondary--light:focus-visible {
	background-color: #fff;
	color: var(--color-primary);
	border-color: #fff;
}

/* Ghost — tekstknop met underline-animatie */

.btn-ghost {
	background-color: transparent;
	color: var(--color-primary);
	border: 2px solid transparent;
	padding-inline: 0.5rem;
	position: relative;
}

.btn-ghost::after {
	content: "";
	position: absolute;
	left: 0.5rem;
	right: 0.5rem;
	bottom: 0.55rem;
	height: 2px;
	background-color: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.35s var(--ease);
}

.btn-ghost:hover::after,
.btn-ghost:focus-visible::after {
	transform: scaleX(1);
}

/* ==========================================================================
   3. Header + navigatie
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: transparent;
	transition:
		background-color 0.35s var(--ease),
		box-shadow 0.35s var(--ease);
}

/* Op alle pagina's behalve de homepage staat de header direct op cream. */
body:not(.has-transparent-header) .site-header {
	background-color: var(--color-bg);
}

.site-header.is-scrolled {
	background-color: var(--color-bg);
	box-shadow: var(--shadow-sm);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	min-height: var(--header-height);
}

/* Merk */

.site-brand,
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background-image: none;
}

.site-brand__icon {
	width: 34px;
	height: 34px;
	flex: none;
}

.site-brand__text {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--color-primary);
	letter-spacing: -0.01em;
}

.custom-logo {
	max-height: 52px;
	width: auto;
}

/* Navigatie */

.nav-menu {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-menu a {
	display: inline-block;
	font-size: 0.98rem;
	font-weight: 500;
	color: var(--color-text);
	padding-block: 0.35rem;
	background-position: 0 calc(100% - 0.15rem);
}

.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a {
	color: var(--color-primary);
	background-size: 100% 2px;
}

/* Submenu */

.nav-menu .sub-menu {
	display: none;
	position: absolute;
	min-width: 220px;
	margin-top: 0.5rem;
	padding: var(--space-xs);
	list-style: none;
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.nav-menu .menu-item-has-children {
	position: relative;
}

.nav-menu .menu-item-has-children:hover > .sub-menu,
.nav-menu .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

.nav-menu .sub-menu a {
	display: block;
	padding: 0.4rem 0.6rem;
}

/* Header-acties */

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.site-header__phone {
	white-space: nowrap;
}

/* Hamburger */

.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	flex: none;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--color-primary);
	border-radius: 2px;
	transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle__bars::before {
	top: -7px;
}

.nav-toggle__bars::after {
	top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
	background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	transform: translateY(-7px) rotate(-45deg);
}

.nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	background-color: rgba(26, 43, 74, 0.4);
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

.nav-overlay.is-visible {
	opacity: 1;
}

/* Mobiel menu (< 1024px) */

@media (max-width: 1023px) {
	.site-nav {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 95;
		width: min(320px, 85vw);
		height: 100dvh;
		padding: calc(var(--header-height) + var(--space-md)) var(--space-md) var(--space-md);
		background-color: var(--color-bg);
		box-shadow: var(--shadow-lg);
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.4s var(--ease), visibility 0.4s var(--ease);
	}

	.site-nav.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-xs);
	}

	.nav-menu > li {
		width: 100%;
		border-bottom: 1px solid var(--color-border);
	}

	.nav-menu a {
		width: 100%;
		padding-block: 0.7rem;
		font-size: 1.05rem;
	}

	.nav-menu .sub-menu {
		display: block;
		position: static;
		border: 0;
		box-shadow: none;
		background: transparent;
		padding: 0 0 0.5rem 0.75rem;
	}

	.site-nav__actions--mobile {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		margin-top: var(--space-md);
	}

	.site-header__phone,
	.site-header__actions .btn-primary {
		display: none;
	}

	body.nav-is-open {
		overflow: hidden;
	}
}

@media (min-width: 1024px) {
	.site-nav__actions--mobile {
		display: none;
	}

	.nav-toggle {
		display: none;
	}

	.nav-overlay {
		display: none;
	}
}

/* ==========================================================================
   4. Hero
   ========================================================================== */

.hero {
	position: relative;
	padding-block: var(--space-lg) var(--space-lg);
	background:
		radial-gradient(60% 80% at 85% 10%, var(--color-accent-soft), transparent 70%),
		var(--color-bg);
	overflow: hidden;
}

@media (min-width: 900px) {
	.hero {
		padding-block: var(--space-xl) var(--space-xl);
	}
}

.hero__inner {
	display: grid;
	gap: var(--space-md);
	align-items: center;
}

@media (min-width: 900px) {
	.hero__inner {
		grid-template-columns: 1.1fr 0.9fr;
		gap: var(--space-lg);
	}
}

.hero__eyebrow {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--space-xs);
}

.hero__title {
	margin-bottom: var(--space-sm);
	max-width: 16ch;
}

.hero__text {
	font-size: 1.15rem;
	color: var(--color-text-muted);
	max-width: 52ch;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: var(--space-md);
}

.hero__media img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   5. Secties, grid, cards, steps
   ========================================================================== */

.grid {
	display: grid;
	gap: var(--space-sm);
}

@media (min-width: 640px) {
	.grid {
		gap: var(--space-md);
	}

	.grid--2,
	.grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.card {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	box-shadow: var(--shadow-sm);
	transition:
		transform 0.4s var(--ease),
		box-shadow 0.4s var(--ease),
		border-color 0.4s var(--ease);
}

.card:hover {
	transform: translateY(-4px);
	border-color: var(--color-border-hover);
	box-shadow: var(--shadow-md);
}

.card__icon {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-md);
	background-color: var(--color-accent-soft);
	color: var(--color-primary);
}

.card__title {
	margin-bottom: var(--space-xs);
}

.card__text {
	color: var(--color-text-muted);
	font-size: 1rem;
}

/* Werkwijze — genummerde stappen */

/* Werkwijze — timeline met genummerde cirkels.
   Mobiel verticaal met doorlopende lijn links, vanaf 900px horizontaal in 3 kolommen. */

.steps {
	--step-size: 48px;

	position: relative;
	display: grid;
	gap: var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.steps__item {
	position: relative;
	padding-left: calc(var(--step-size) + var(--space-sm));
}

/* Verbindingslijn tussen de stappen (verticaal, mobiel). */
.steps__item::before {
	content: "";
	position: absolute;
	left: calc(var(--step-size) / 2 - 1px);
	top: var(--step-size);
	bottom: calc(var(--space-md) * -1);
	width: 2px;
	background-color: var(--color-border);
}

.steps__item:last-child::before {
	display: none;
}

.steps__num {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: var(--step-size);
	height: var(--step-size);
	border-radius: 50%;
	background-color: var(--step-color, var(--color-primary));
	color: #fff;
	font-family: var(--font-heading);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1;
	box-shadow: var(--shadow-sm);
}

/* Alternerende kleuren uit het bloem-palet. */
.steps__item:nth-child(1) { --step-color: var(--color-red); }
.steps__item:nth-child(2) { --step-color: var(--color-accent-dark); }
.steps__item:nth-child(3) { --step-color: var(--color-green); }
.steps__item:nth-child(4) { --step-color: var(--color-blue); }
.steps__item:nth-child(5) { --step-color: var(--color-primary); }
.steps__item:nth-child(6) { --step-color: var(--color-green); }

.steps__title {
	margin-bottom: var(--space-xs);
	font-size: 1.2rem;
	padding-top: 0.6rem;
}

.steps__text {
	color: var(--color-text-muted);
	font-size: 1rem;
}

@media (min-width: 640px) {
	.steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.steps {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-lg) var(--space-md);
	}

	/* Horizontale flow: nummer boven de tekst, lijn naar rechts. */
	.steps__item {
		padding-left: 0;
		padding-top: calc(var(--step-size) + var(--space-sm));
	}

	.steps__item::before {
		left: var(--step-size);
		right: calc(var(--space-md) * -1);
		top: calc(var(--step-size) / 2 - 1px);
		bottom: auto;
		width: auto;
		height: 2px;
	}

	/* Geen lijn aan het eind van een rij. */
	.steps__item:nth-child(3n)::before {
		display: none;
	}

	.steps__title {
		padding-top: 0;
	}
}

/* Tarieven */

.pricing {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	box-shadow: var(--shadow-sm);
}

.pricing__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-xs);
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--color-border);
}

.pricing__row:last-child {
	border-bottom: 0;
}

.pricing__price {
	font-family: var(--font-heading);
	font-weight: 600;
	white-space: nowrap;
}

.pricing__note {
	margin-top: var(--space-sm);
	font-size: 0.95rem;
	color: var(--color-text-muted);
}

/* ==========================================================================
   6. CTA banner
   ========================================================================== */

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

.cta-banner {
	background-color: var(--color-primary);
	color: rgba(255, 255, 255, 0.85);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	text-align: center;
	box-shadow: var(--shadow-md);
}

@media (min-width: 900px) {
	.cta-banner {
		padding: var(--space-lg);
	}
}

.cta-banner__title {
	color: #fff;
	margin-bottom: var(--space-xs);
}

.cta-banner__text {
	max-width: 55ch;
	margin-inline: auto;
}

.cta-banner__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-xs);
	margin-top: var(--space-md);
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

.site-footer {
	background-color: var(--color-primary);
	color: rgba(245, 239, 224, 0.78);
	padding-block: var(--space-lg) var(--space-md);
	margin-top: auto;
	font-size: 1rem;
}

.site-footer a {
	color: rgba(245, 239, 224, 0.92);
	background-image: linear-gradient(var(--color-accent), var(--color-accent));
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: #fff;
}

.site-footer__grid {
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 768px) {
	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
		gap: var(--space-lg);
	}
}

.footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background-image: none;
	margin-bottom: var(--space-sm);
}

.footer-brand__icon {
	width: 32px;
	height: 32px;
	flex: none;
}

.footer-brand__text {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--color-bg);
	line-height: 1;
}

.site-footer__bio {
	max-width: 42ch;
}

.site-footer__heading {
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-sm);
}

.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.site-footer__meta {
	display: block;
	font-size: 0.85rem;
	color: rgba(245, 239, 224, 0.55);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-xs);
	margin-top: var(--space-lg);
	padding-top: var(--space-sm);
	border-top: 1px solid rgba(245, 239, 224, 0.18);
	font-size: 0.9rem;
	color: rgba(245, 239, 224, 0.6);
}

/* ==========================================================================
   8. Archief / losse pagina's
   ========================================================================== */

.page-header {
	padding-block: var(--space-lg) 0;
}

.page-header__title {
	margin-bottom: var(--space-xs);
}

.page-header__intro {
	color: var(--color-text-muted);
}

.entry__thumbnail {
	margin-bottom: var(--space-md);
}

.entry__thumbnail img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.entry-content > * + * {
	margin-top: var(--space-sm);
}

.entry-content h2,
.entry-content h3 {
	margin-top: var(--space-md);
}

.post-list {
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 768px) {
	.post-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.post-card__title {
	font-size: 1.35rem;
	margin-bottom: var(--space-xs);
}

.post-card__title a {
	background-image: none;
}

.post-card__excerpt {
	color: var(--color-text-muted);
	margin-bottom: var(--space-sm);
}

.pagination {
	margin-top: var(--space-lg);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	justify-content: center;
}

.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 0.75rem;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border);
	background-image: none;
}

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

/* Anker-offset onder de sticky header. */
:target {
	scroll-margin-top: calc(var(--header-height) + var(--space-sm));
}

/* ==========================================================================
   9. Bloem-decoratie (SVG)
   ========================================================================== */

.flower-decoration {
	width: 100%;
	height: auto;
	overflow: visible;
}

/*
 * Statische illustratie, bewust zonder entree-animatie: een bloem die pas
 * verschijnt nadat een animatie is voltooid, is onzichtbaar zodra die animatie
 * hapert. Merkbeeld hoort nooit van beweging af te hangen.
 */

.flower-decoration--hero {
	max-width: 340px;
	margin-inline: auto;
}

.flower-decoration--cta {
	max-width: 200px;
	opacity: 0.35;
}

/* ==========================================================================
   10. Pijl-links
   ========================================================================== */

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	background-image: none;
}

.link-arrow__icon {
	transition: transform 0.35s var(--ease);
}

.link-arrow:hover .link-arrow__icon,
.link-arrow:focus-visible .link-arrow__icon {
	transform: translateX(4px);
}

.link-arrow::after {
	content: none;
}

/* ==========================================================================
   11. Intro-sectie (twee koloms)
   ========================================================================== */

.intro__grid {
	display: grid;
	gap: var(--space-md);
	align-items: center;
}

@media (min-width: 900px) {
	.intro__grid {
		grid-template-columns: 1.15fr 0.85fr;
		gap: var(--space-lg);
	}
}

.intro__link {
	margin-top: var(--space-sm);
}

.intro__visual-inner {
	position: relative;
	display: grid;
	gap: var(--space-sm);
	justify-items: center;
	text-align: center;
	padding: var(--space-lg) var(--space-md);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(70% 70% at 50% 0%, var(--color-accent-soft), transparent 70%),
		var(--color-bg-alt);
	border: 1px solid var(--color-border);
}

.intro__flower {
	width: 72px;
	height: 72px;
}

.intro__quote {
	font-family: var(--font-heading);
	font-size: 1.2rem;
	line-height: 1.45;
	color: var(--color-primary);
	max-width: 22ch;
}

/* ==========================================================================
   12. Tarievenkaarten
   ========================================================================== */

.pricing-grid {
	display: grid;
	gap: var(--space-sm);
}

@media (min-width: 768px) {
	.pricing-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-md);
		align-items: stretch;
	}
}

.price-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	text-align: center;
	box-shadow: var(--shadow-sm);
	transition:
		transform 0.4s var(--ease),
		box-shadow 0.4s var(--ease),
		border-color 0.4s var(--ease);
}

.price-card:hover {
	transform: translateY(-4px);
	border-color: var(--color-border-hover);
	box-shadow: var(--shadow-md);
}

.price-card--featured {
	border: 2px solid var(--color-accent);
	background:
		linear-gradient(var(--color-accent-soft), var(--color-accent-soft)),
		var(--color-bg-card);
	box-shadow: var(--shadow-md);
}

.price-card__title {
	font-size: 1.2rem;
}

.price-card__amount {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	margin-block: var(--space-xs);
}

.price-card__value {
	font-family: var(--font-heading);
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1;
	color: var(--color-primary);
}

.price-card__unit {
	font-size: 0.9rem;
	color: var(--color-text-soft);
}

.price-card__text {
	color: var(--color-text-muted);
	font-size: 1rem;
	margin-top: auto;
}

.pricing-note {
	max-width: 62ch;
	margin: var(--space-md) auto 0;
	text-align: center;
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--color-text-muted);
}

/* ==========================================================================
   13. Pagina-hero, prose, credentials, registratie
   ========================================================================== */

.page-hero {
	padding-block: var(--space-lg);
	background:
		radial-gradient(55% 70% at 80% 15%, var(--color-accent-soft), transparent 70%),
		var(--color-bg);
}

@media (min-width: 900px) {
	.page-hero {
		padding-block: var(--space-xl) var(--space-lg);
	}
}

.page-hero__inner {
	display: grid;
	gap: var(--space-md);
	align-items: center;
}

@media (min-width: 768px) {
	.page-hero__inner {
		grid-template-columns: 1.2fr 0.8fr;
		gap: var(--space-lg);
	}
}

.page-hero__title {
	margin-bottom: var(--space-xs);
}

.page-hero__subtitle {
	font-size: 1.2rem;
	color: var(--color-text-muted);
}

.page-hero__portrait {
	margin: 0;
}

.page-hero__portrait img,
.portrait-placeholder {
	aspect-ratio: 4 / 5;
	width: 100%;
	max-width: 360px;
	margin-inline: auto;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.portrait-placeholder {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--space-xs);
	background-color: var(--color-bg-alt);
	border: 1px dashed var(--color-border-hover);
	box-shadow: var(--shadow-sm);
}

.portrait-placeholder__icon {
	width: 64px;
	height: 64px;
	opacity: 0.55;
}

.portrait-placeholder__label {
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-soft);
}

/* Redactionele tekstblokken */

.prose {
	margin-top: var(--space-sm);
}

.prose > * + * {
	margin-top: var(--space-sm);
}

.prose p {
	color: var(--color-text-muted);
}

/* Opleidingen & ervaring */

.credentials {
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 768px) {
	.credentials {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-lg);
	}
}

.credentials__title {
	font-size: 1.3rem;
	margin-bottom: var(--space-sm);
	padding-bottom: var(--space-xs);
	border-bottom: 2px solid var(--color-accent);
}

.check-list {
	display: grid;
	gap: 0.7rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.check-list__item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.7rem;
	color: var(--color-text-muted);
	line-height: 1.6;
}

.check-list__icon {
	flex: none;
	margin-top: 0.4rem;
	color: var(--color-accent-dark);
	stroke-width: 2.25;
}

/* Registratie-badge */

.registration {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
	padding: var(--space-sm) var(--space-md);
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.registration__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 1rem;
	border-radius: var(--radius-pill);
	background-color: var(--color-primary-soft);
	color: var(--color-primary);
	font-weight: 600;
	font-size: 0.95rem;
	white-space: nowrap;
}

.registration__text {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	margin: 0;
}

/* CTA-banner met decoratie ernaast */

.cta-banner {
	display: grid;
	gap: var(--space-md);
	align-items: center;
	text-align: left;
}

@media (min-width: 900px) {
	.cta-banner {
		grid-template-columns: 1fr auto;
	}
}

@media (max-width: 899px) {
	.cta-banner__decoration {
		display: none;
	}

	.cta-banner {
		text-align: center;
	}
}

.cta-banner__text {
	max-width: 48ch;
	margin-inline: 0;
}

@media (max-width: 899px) {
	.cta-banner__text {
		margin-inline: auto;
	}

	.cta-banner__actions {
		justify-content: center;
	}
}

@media (min-width: 900px) {
	.cta-banner__actions {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   14. Timeline (Aanpak-pagina)
   ========================================================================== */

.timeline {
	--timeline-size: 56px;

	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-md);
}

.timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--timeline-size) 1fr;
	gap: var(--space-sm);
	align-items: start;
}

/* Doorlopende lijn tussen de cirkels. */
.timeline__item::before {
	content: "";
	position: absolute;
	left: calc(var(--timeline-size) / 2 - 1px);
	top: var(--timeline-size);
	bottom: calc(var(--space-md) * -1);
	width: 2px;
	background-color: var(--color-border);
}

.timeline__item:last-child::before {
	display: none;
}

.timeline__num {
	display: grid;
	place-items: center;
	width: var(--timeline-size);
	height: var(--timeline-size);
	border-radius: 50%;
	background-color: var(--step-color, var(--color-primary));
	color: #fff;
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1;
	box-shadow: var(--shadow-sm);
	position: relative;
	z-index: 1;
}

/* Alternerende kleuren uit het bloem-palet. */
.timeline__item:nth-child(1) { --step-color: var(--color-red); }
.timeline__item:nth-child(2) { --step-color: var(--color-accent-dark); }
.timeline__item:nth-child(3) { --step-color: var(--color-green); }
.timeline__item:nth-child(4) { --step-color: var(--color-blue); }
.timeline__item:nth-child(5) { --step-color: var(--color-primary); }
.timeline__item:nth-child(6) { --step-color: var(--color-green); }

.timeline__body {
	padding-bottom: var(--space-sm);
}

.timeline__title {
	margin-bottom: var(--space-xs);
	font-size: 1.35rem;
}

.timeline__text {
	color: var(--color-text-muted);
}

@media (min-width: 768px) {
	.timeline {
		--timeline-size: 64px;
		gap: var(--space-lg);
	}

	.timeline__item {
		gap: var(--space-md);
	}

	.timeline__item::before {
		bottom: calc(var(--space-lg) * -1);
	}
}

/* ==========================================================================
   15. Expertise-groepen
   ========================================================================== */

.lead {
	font-size: 1.15rem;
	line-height: 1.7;
	color: var(--color-text-muted);
}

.expertise-group {
	--group-color: var(--color-primary);
}

.expertise-group--groen { --group-color: var(--color-green); }
.expertise-group--rood  { --group-color: var(--color-red); }
.expertise-group--oker  { --group-color: var(--color-accent-dark); }
.expertise-group--blauw { --group-color: var(--color-blue); }

.expertise-group__header {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 2px solid var(--group-color);
}

.expertise-group__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: var(--radius-md);
	background-color: color-mix(in srgb, var(--group-color) 14%, transparent);
	color: var(--group-color);
}

.expertise-group__title {
	margin: 0;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
}

/* Card-variant met gekleurd stipje in plaats van icoon. */

.card--expertise {
	position: relative;
	padding-top: calc(var(--space-md) + 0.5rem);
}

.card__dot {
	position: absolute;
	top: var(--space-md);
	left: var(--space-md);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--group-color);
}

.card--expertise .card__title {
	margin-top: var(--space-sm);
	font-size: 1.15rem;
}

/* ==========================================================================
   16. Tarievenpagina
   ========================================================================== */

.pricing-grid--large .price-card {
	padding: var(--space-md) var(--space-sm);
}

@media (min-width: 900px) {
	.pricing-grid--large .price-card {
		padding: var(--space-lg) var(--space-md);
	}
}

.price-card {
	position: relative;
}

.price-card__flag {
	position: absolute;
	top: calc(var(--space-sm) * -1);
	left: 50%;
	transform: translateX(-50%);
	padding: 0.3rem 1rem;
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
	color: var(--color-primary);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
	box-shadow: var(--shadow-sm);
}

.price-card__meta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: var(--space-sm);
	font-size: 0.9rem;
	color: var(--color-text-soft);
}

/* Marineblauw informatieblok */

.section--navy {
	background-color: var(--color-primary);
	color: rgba(255, 255, 255, 0.85);
}

.section--navy h2,
.section--navy h3 {
	color: #fff;
}

.notice-grid {
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 768px) {
	.notice-grid {
		grid-template-columns: 1.2fr 0.8fr;
		gap: var(--space-lg);
	}
}

.notice-grid__title {
	margin-bottom: var(--space-sm);
	font-size: 1.5rem;
}

.notice-grid__text {
	max-width: 55ch;
}

.check-list--light .check-list__item {
	color: rgba(255, 255, 255, 0.85);
}

.check-list--light .check-list__icon {
	color: var(--color-accent);
}

.check-list--numbered {
	counter-reset: expectation;
}

/* FAQ accordion — <details>/<summary>, werkt ook zonder JS. */

.faq {
	display: grid;
	gap: var(--space-xs);
}

.faq__item {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.faq__item[open] {
	border-color: var(--color-border-hover);
	box-shadow: var(--shadow-sm);
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	cursor: pointer;
	font-family: var(--font-heading);
	font-size: 1.1rem;
	color: var(--color-primary);
	list-style: none;
}

/* Standaard driehoekje weghalen. */
.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question::marker {
	content: "";
}

.faq__question:hover {
	background-color: var(--color-primary-soft);
}

.faq__chevron {
	flex: none;
	color: var(--color-accent-dark);
	transition: transform 0.3s var(--ease);
}

.faq__item[open] .faq__chevron {
	transform: rotate(180deg);
}

.faq__answer {
	padding: 0 var(--space-md) var(--space-md);
	color: var(--color-text-muted);
}

/* ==========================================================================
   17. Contactpagina
   ========================================================================== */

.contact-grid {
	display: grid;
	gap: var(--space-md);
	align-items: start;
}

@media (min-width: 900px) {
	.contact-grid {
		grid-template-columns: 1.1fr 0.9fr;
		gap: var(--space-lg);
	}
}

.contact-card {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	box-shadow: var(--shadow-md);
}

@media (min-width: 640px) {
	.contact-card {
		padding: var(--space-lg);
	}
}

.contact-card__title {
	margin-bottom: var(--space-md);
	font-size: 1.4rem;
}

.contact-list {
	display: grid;
	gap: var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.contact-list__item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--space-sm);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--color-border);
}

.contact-list__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.contact-list__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--color-accent-soft);
	color: var(--color-primary);
}

.contact-list__body {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}

.contact-list__label {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-soft);
}

.contact-list__value {
	font-family: var(--font-heading);
	font-size: 1.3rem;
	line-height: 1.25;
	color: var(--color-primary);
	overflow-wrap: anywhere;
}

.contact-card__note {
	margin-top: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
	font-size: 0.95rem;
	color: var(--color-text-muted);
}

.contact-aside .check-list {
	margin-top: var(--space-sm);
}

/* Blok voor scholen */

.schools-block {
	text-align: center;
}

.schools-block__icon {
	display: inline-grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: var(--space-sm);
	border-radius: 50%;
	background-color: var(--color-accent-soft);
	color: var(--color-primary);
}

.schools-block__text {
	max-width: 58ch;
	margin: var(--space-xs) auto 0;
	color: var(--color-text-muted);
}

.schools-block__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-xs);
	margin-top: var(--space-md);
}

/* ==========================================================================
   18. Gecentreerde pagina-hero
   ========================================================================== */

.page-hero--center {
	text-align: center;
}

.page-hero--center .page-hero__subtitle {
	max-width: 60ch;
	margin-inline: auto;
}

/* ==========================================================================
   19. Cookiemelding
   ========================================================================== */

.cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background-color: var(--color-bg);
	border-top: 2px solid var(--color-primary-soft);
	box-shadow: 0 -8px 30px rgba(26, 43, 74, 0.12);
	opacity: 0;
	transform: translateY(100%);
	transition:
		opacity 0.35s var(--ease),
		transform 0.35s var(--ease);
}

.cookie-banner.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.cookie-banner__inner {
	display: grid;
	gap: var(--space-sm);
	padding-block: var(--space-sm);
	align-items: center;
}

@media (min-width: 900px) {
	.cookie-banner__inner {
		grid-template-columns: 1fr auto;
		gap: var(--space-md);
	}
}

.cookie-banner__text {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--color-text);
	max-width: 70ch;
	margin: 0;
}

.cookie-banner__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

@media (min-width: 640px) {
	.cookie-banner__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
}

.cookie-banner__actions .btn {
	padding-block: 0.7rem;
	font-size: 0.95rem;
	white-space: nowrap;
}

/* ==========================================================================
   20. Juridische pagina's
   ========================================================================== */

.page-hero--compact {
	padding-block: var(--space-lg) var(--space-md);
}

.page-hero__meta {
	font-size: 0.95rem;
	color: var(--color-text-soft);
}

.legal {
	max-width: var(--container-narrow);
}

.legal h2 {
	margin-top: var(--space-md);
	margin-bottom: var(--space-xs);
	font-size: 1.5rem;
}

.legal h2:first-child {
	margin-top: 0;
}

.legal h3 {
	margin-top: var(--space-sm);
	margin-bottom: var(--space-xs);
	font-size: 1.2rem;
}

.legal p,
.legal li,
.legal dd {
	color: var(--color-text-muted);
}

.legal p + p {
	margin-top: var(--space-sm);
}

.legal ul {
	margin: var(--space-xs) 0 0;
	padding-left: 1.35rem;
}

.legal li + li {
	margin-top: 0.35rem;
}

.legal__list {
	margin: var(--space-sm) 0 0;
}

.legal__list dt {
	font-weight: 600;
	color: var(--color-primary);
	margin-top: var(--space-sm);
}

.legal__list dd {
	margin: 0.2rem 0 0;
}

/* Nog in te vullen gegevens vallen op, zodat ze niet blijven staan. */
.legal__placeholder {
	background-color: var(--color-accent-soft);
	border-bottom: 1px dashed var(--color-accent-dark);
	padding: 0 0.25rem;
	font-style: italic;
}

/* Juridische links in de footer */

.site-footer__legal {
	margin-top: var(--space-lg);
	padding-top: var(--space-sm);
	border-top: 1px solid rgba(245, 239, 224, 0.18);
}

.site-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
}

.site-footer__legal + .site-footer__bottom {
	margin-top: var(--space-sm);
	border-top: 0;
	padding-top: 0;
}

/* ==========================================================================
   21. 404
   ========================================================================== */

.error-404__inner {
	position: relative;
	text-align: center;
	padding-block: var(--space-md);
}

.error-404__code {
	font-family: var(--font-heading);
	font-size: clamp(5rem, 18vw, 10rem);
	font-weight: 600;
	line-height: 1;
	color: var(--color-primary);
	opacity: 0.15;
	margin-bottom: calc(var(--space-md) * -1);
}

.error-404__title {
	font-size: clamp(1.6rem, 4vw, 2.5rem);
	margin-bottom: var(--space-sm);
}

.error-404__text {
	max-width: 50ch;
	margin-inline: auto;
	color: var(--color-text-muted);
}

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-xs);
	margin-top: var(--space-md);
}

.error-404__decoration {
	max-width: 180px;
	margin: var(--space-lg) auto 0;
	opacity: 0.5;
}

/* ==========================================================================
   22. Print
   ========================================================================== */

@media print {
	.site-header,
	.site-nav,
	.nav-overlay,
	.cookie-banner,
	.section-cta,
	.cta-banner,
	.flower-decoration,
	.skip-link,
	.error-404__decoration {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
		line-height: 1.5;
	}

	h1,
	h2,
	h3,
	h4 {
		color: #000;
		page-break-after: avoid;
	}

	.section,
	.page-hero {
		padding-block: 0.5cm;
		background: none !important;
	}

	.card,
	.price-card,
	.contact-card,
	.faq__item {
		border: 1px solid #999;
		box-shadow: none;
		break-inside: avoid;
	}

	/* Bestemming van links meeprinten, behalve bij ankers. */
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555;
	}

	.site-footer {
		background: none;
		color: #000;
		border-top: 1px solid #999;
	}

	.site-footer a {
		color: #000;
	}

	/* FAQ-antwoorden altijd zichtbaar op papier. */
	.faq__item[open] .faq__answer,
	.faq__answer {
		display: block !important;
	}
}

/* ==========================================================================
   23. Visuele accenten
   Kleine details die het geheel afmaken: streepjes onder koppen, gekleurde
   iconen uit het bloem-palet, sierlijke scheidingen tussen secties.
   ========================================================================== */

/* --- Accentstreepje onder sectiekoppen --- */

.section__header .section__title::after,
.expertise-group__title::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	margin-top: var(--space-xs);
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
}

.section__header--center .section__title::after {
	margin-inline: auto;
}

.expertise-group__title::after {
	background-color: var(--group-color);
}

/* Op de marineblauwe sectie moet het streepje oplichten. */
.section--navy .notice-grid__title::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	margin-top: var(--space-xs);
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
}

/* --- Eyebrow met streepje ervoor --- */

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.hero__eyebrow::before {
	content: "";
	width: 32px;
	height: 2px;
	flex: none;
	border-radius: var(--radius-pill);
	background-color: var(--color-accent-dark);
}

/* --- Kaart-iconen in de bloem-kleuren --- */

.grid .card:nth-child(6n + 1) .card__icon { --card-accent: var(--color-red); }
.grid .card:nth-child(6n + 2) .card__icon { --card-accent: var(--color-accent-dark); }
.grid .card:nth-child(6n + 3) .card__icon { --card-accent: var(--color-blue); }
.grid .card:nth-child(6n + 4) .card__icon { --card-accent: var(--color-green); }
.grid .card:nth-child(6n + 5) .card__icon { --card-accent: var(--color-primary); }
.grid .card:nth-child(6n + 6) .card__icon { --card-accent: var(--color-accent-dark); }

.card__icon {
	color: var(--card-accent, var(--color-primary));
	background-color: color-mix(in srgb, var(--card-accent, var(--color-primary)) 12%, transparent);
	transition: transform 0.4s var(--ease), background-color 0.4s var(--ease);
}

.card:hover .card__icon {
	transform: scale(1.08) rotate(-4deg);
	background-color: color-mix(in srgb, var(--card-accent, var(--color-primary)) 20%, transparent);
}

/* --- Gekleurde bovenrand die bij hover verschijnt --- */

.card {
	position: relative;
	overflow: hidden;
}

.card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background-color: var(--card-accent, var(--color-accent));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s var(--ease);
}

.card:hover::before,
.card:focus-within::before {
	transform: scaleX(1);
}

/* De expertise-kaarten hebben al een gekleurd stipje; die volgt de groepskleur. */
.card--expertise::before {
	background-color: var(--group-color);
}

/* --- Sierlijke scheiding tussen secties --- */

.section-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding-block: var(--space-md);
}

.section-divider::before,
.section-divider::after {
	content: "";
	height: 1px;
	width: min(160px, 20vw);
	background: linear-gradient(to right, transparent, var(--color-border-hover), transparent);
}

.section-divider__dots {
	display: flex;
	gap: 0.4rem;
}

.section-divider__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

.section-divider__dot:nth-child(1) { background-color: var(--color-red); }
.section-divider__dot:nth-child(2) { background-color: var(--color-accent); }
.section-divider__dot:nth-child(3) { background-color: var(--color-green); }
.section-divider__dot:nth-child(4) { background-color: var(--color-blue); }

/* --- Zachte vorm achter de hero-bloem --- */

.hero__media {
	position: relative;
	display: grid;
	place-items: center;
}

.hero__media::before {
	content: "";
	position: absolute;
	width: min(420px, 90%);
	aspect-ratio: 1;
	border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%;
	background: radial-gradient(circle at 40% 35%, rgba(228, 180, 65, 0.22), rgba(228, 180, 65, 0.04) 70%);
}

.flower-decoration--hero {
	position: relative;
	max-width: 420px;
}

/* --- Stappen: gekleurde lijn tussen de nummers --- */

.steps__num,
.timeline__num {
	border: 3px solid var(--color-bg);
}

.section--alt .steps__num,
.section--alt .timeline__num {
	border-color: var(--color-bg-alt);
}

/* --- Footer: accentlijn bovenaan --- */

.site-footer {
	border-top: 4px solid var(--color-accent);
}

/* --- Tarievenkaart: accentrand links op de uitgelichte kaart --- */

.price-card__value {
	position: relative;
	display: inline-block;
}

.pricing-note {
	position: relative;
	padding-top: var(--space-md);
}

.pricing-note::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 52px;
	height: 3px;
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
}

/* ==========================================================================
   24. Herijking van ritme, uitlijning en beeld
   Deze sectie corrigeert bewust eerdere keuzes; de regels staan achteraan
   zodat ze winnen zonder dat de oorspronkelijke secties verminkt raken.
   ========================================================================== */

/* --- 24.1 Verticaal ritme --------------------------------------------------
   6rem boven én onder een sectie is 12rem tussen twee secties. Bij deze
   hoeveelheid tekst leest dat als leegte in plaats van rust. Terug naar een
   verhouding die de inhoud draagt. */

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

@media (min-width: 900px) {
	.section {
		padding-block: 4rem;
	}
}

.hero {
	padding-block: var(--space-md) var(--space-lg);
}

@media (min-width: 900px) {
	.hero {
		padding-block: 3rem 4rem;
	}
}

.page-hero {
	padding-block: var(--space-md) var(--space-sm);
}

@media (min-width: 900px) {
	.page-hero {
		padding-block: 3rem var(--space-md);
	}
}

.page-hero--compact {
	padding-block: var(--space-md) var(--space-sm);
}

.section-cta {
	padding-block: var(--space-md) var(--space-lg);
}

/* --- 24.2 Uitlijning -------------------------------------------------------
   Gecentreerde lopende tekst heeft twee rafelige marges en leest slechter.
   Koppen blijven gecentreerd voor rust; tekstblokken gaan links uitlijnen. */

.section__header--center .section__intro {
	max-width: 58ch;
	margin-inline: auto;
}

.price-card {
	text-align: left;
}

.price-card__amount {
	align-items: baseline;
	flex-direction: row;
	gap: 0.4rem;
}

.price-card__flag {
	left: var(--space-md);
	transform: none;
}

/* De prijs mag niet harder schreeuwen dan de dienst: bij niet vergoede zorg
   moet eerst duidelijk zijn wát je krijgt. */
.price-card__title {
	font-size: 1.3rem;
	margin-bottom: var(--space-xs);
}

.price-card__value {
	font-size: 1.9rem;
}

.price-card__meta {
	justify-content: flex-start;
}

/* --- 24.3 Marineblauw informatieblok --------------------------------------
   Was bijna 400px hoog met inhoud in het bovenste derde. */

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

@media (min-width: 900px) {
	.section--navy {
		padding-block: 4rem;
	}
}

.notice-grid {
	align-items: start;
}

/* --- 24.4 Beeld en plaatshouders ------------------------------------------ */

.media {
	display: block;
	width: 100%;
	border-radius: var(--radius-lg);
}

img.media {
	object-fit: cover;
	height: 100%;
	box-shadow: var(--shadow-lg);
}

.media--4x5 {
	aspect-ratio: 4 / 5;
}

.media--3x2 {
	aspect-ratio: 3 / 2;
}

.media--1x1 {
	aspect-ratio: 1 / 1;
}

/* Opvallend genoeg om niet vergeten te worden, rustig genoeg om niet stuk
   te lijken. */
.media-placeholder {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.4rem;
	padding: var(--space-md);
	text-align: center;
	background:
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 14px,
			rgba(26, 43, 74, 0.03) 14px,
			rgba(26, 43, 74, 0.03) 28px
		),
		var(--color-bg-alt);
	border: 2px dashed var(--color-border-hover);
	color: var(--color-text-soft);
}

.media-placeholder__icon {
	width: 44px;
	height: 44px;
	opacity: 0.45;
	margin-bottom: var(--space-xs);
}

.media-placeholder__label {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.media-placeholder__hint {
	font-size: 0.8rem;
}

/* --- 24.5 Hero met foto -------------------------------------------------- */

.hero__media {
	position: relative;
	max-width: 420px;
	margin-inline: auto;
	width: 100%;
}

.hero__media::before {
	display: none;
}

/* --- 24.6 Introblok: beeld met citaat eronder ----------------------------- */

.intro__visual {
	display: grid;
	gap: var(--space-sm);
}

.intro__quote-card {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--space-sm);
	margin: 0;
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-lg);
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
}

.intro__flower {
	width: 40px;
	height: 40px;
	flex: none;
}

.intro__quote {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	line-height: 1.45;
	color: var(--color-primary);
	text-align: left;
	max-width: none;
}

/* --- 24.7 Sfeerbeeld dat de sectie erboven overlapt ----------------------- */

.media--pull-up {
	margin-top: var(--space-sm);
}

/* --- 24.8 Contactblok: bloem heel tonen ----------------------------------- */

.flower-decoration--cta {
	max-width: 150px;
	opacity: 1;
}

.cta-banner__decoration {
	display: grid;
	place-items: center;
}

/* --- 24.9 Logo iets groter ------------------------------------------------ */

.custom-logo {
	max-height: 64px;
}

/* De beschrijving hoorde direct onder de prijs te staan; alleen de extra regel
   onderaan mag naar de onderkant van de kaart worden geduwd. */
.price-card__text {
	margin-top: 0;
}

.price-card__meta {
	margin-top: auto;
	padding-top: var(--space-sm);
}

/* ==========================================================================
   25. Tegels in het bloem-palet
   Vervangt de witte kaarten in de expertise- en doelgroepsecties. Zes identieke
   witte doosjes gaven geen hiërarchie en zijn bovendien de meest voorspelbare
   oplossing; deze variant gebruikt het enige echt onderscheidende merkelement,
   de vijf logokleuren, en maakt de iconen groot genoeg om als symbool te lezen.
   ========================================================================== */

.card--tile {
	--tile-color: var(--color-primary);

	/* Elke kleur heeft een eigen tintsterkte nodig: oker is van zichzelf licht en
	   verdwijnt op 10% in de cream achtergrond, marineblauw wordt daar juist te
	   zwaar. Eén vast percentage geeft dus ongelijke tegels. */
	--tile-tint: 10%;
	--tile-tint-hover: 17%;

	/* Terugval voor browsers zonder color-mix. */
	background-color: var(--color-bg-card);
	background-color: color-mix(in srgb, var(--tile-color) var(--tile-tint), var(--color-bg-card));
	border: 0;
	box-shadow: none;
	padding: var(--space-md);
}

/* De gekleurde bovenrand is overbodig als de hele tegel al kleur heeft. */
.card--tile::before {
	display: none;
}

.card--tile:hover {
	transform: translateY(-4px);
	background-color: color-mix(in srgb, var(--tile-color) var(--tile-tint-hover), var(--color-bg-card));
	box-shadow: var(--shadow-md);
}

/* Icoon zonder eigen vlak: groter, in de tegelkleur zelf. */
.card--tile .card__icon {
	width: auto;
	height: auto;
	display: block;
	margin-bottom: var(--space-sm);
	background-color: transparent;
	border-radius: 0;
	color: var(--tile-color);
}

.card--tile .card__title {
	font-size: 1.2rem;
	margin-bottom: var(--space-xs);
}

.card--tile .card__text {
	color: var(--color-text-muted);
}

/* Kleurvolgorde uit het logo: rood, oker, blauw, groen, marine. */
.grid .card--tile:nth-child(6n + 1) { --tile-color: var(--color-red); }
.grid .card--tile:nth-child(6n + 2) { --tile-color: var(--color-accent-dark); --tile-tint: 22%; --tile-tint-hover: 30%; }
.grid .card--tile:nth-child(6n + 3) { --tile-color: var(--color-blue); }
.grid .card--tile:nth-child(6n + 4) { --tile-color: var(--color-green); }
.grid .card--tile:nth-child(6n + 5) { --tile-color: var(--color-primary); --tile-tint: 8%; --tile-tint-hover: 14%; }
.grid .card--tile:nth-child(6n + 6) { --tile-color: var(--color-accent-dark); --tile-tint: 22%; --tile-tint-hover: 30%; }

/* Op de expertisepagina volgt de tegel de kleur van zijn groep. De selector is
   bewust even specifiek als de kleurrotatie hierboven en staat erna, anders
   wint die rotatie en krijgt een groene groep roze en blauwe tegels. */
.grid .card--expertise.card--tile {
	--tile-color: var(--group-color);
	--tile-tint: 10%;
	--tile-tint-hover: 17%;

	padding-top: var(--space-md);
}

.expertise-group--oker .card--tile {
	--tile-tint: 22%;
	--tile-tint-hover: 30%;
}

.expertise-group--blauw .card--tile {
	--tile-tint: 11%;
}

.card--expertise .card__dot {
	top: var(--space-md);
	left: var(--space-md);
}

.card--expertise.card--tile .card__title {
	margin-top: var(--space-sm);
}

/* ==========================================================================
   26. Zigzag-werkwijze (Aanpak-pagina)
   Zes stappen die om en om links en rechts van een middenlijn staan, met per
   stap een klein beeld aan de overkant. De tekst blijft altijd links uitgelijnd:
   rechts uitlijnen zou de zigzag mooier maken maar leest slechter, en dat weegt
   hier zwaarder dan de symmetrie.
   ========================================================================== */

.zigzag {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-lg);
	position: relative;
}

.zigzag__item {
	position: relative;
	display: grid;
	gap: var(--space-sm);
	align-items: center;
	padding-left: calc(var(--zigzag-num, 56px) + var(--space-sm));
}

.zigzag__num {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: var(--zigzag-num, 56px);
	height: var(--zigzag-num, 56px);
	border-radius: 50%;
	background-color: var(--step-color, var(--color-primary));
	border: 3px solid var(--color-bg);
	color: #fff;
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1;
	box-shadow: var(--shadow-sm);
	z-index: 2;
}

.zigzag__item:nth-child(1) { --step-color: var(--color-red); }
.zigzag__item:nth-child(2) { --step-color: var(--color-accent-dark); }
.zigzag__item:nth-child(3) { --step-color: var(--color-green); }
.zigzag__item:nth-child(4) { --step-color: var(--color-blue); }
.zigzag__item:nth-child(5) { --step-color: var(--color-primary); }
.zigzag__item:nth-child(6) { --step-color: var(--color-green); }

.zigzag__title {
	margin-bottom: var(--space-xs);
	font-size: 1.35rem;
}

.zigzag__text {
	color: var(--color-text-muted);
}

.zigzag__media {
	max-width: 260px;
}

.zigzag__media .media-placeholder {
	padding: var(--space-sm);
}

/* Vanaf 900px: middenlijn met de nummers erop, inhoud om en om. */
@media (min-width: 900px) {
	.zigzag {
		--zigzag-num: 64px;

		gap: var(--space-lg);
	}

	/* De doorlopende lijn stopt bij het eerste en laatste nummer in plaats van
	   door te lopen tot de rand van de sectie. */
	.zigzag::before {
		content: "";
		position: absolute;
		left: 50%;
		top: calc(var(--zigzag-num) / 2);
		bottom: calc(var(--zigzag-num) / 2);
		width: 2px;
		background-color: var(--color-border-hover);
		transform: translateX(-50%);
	}

	.zigzag__item {
		grid-template-columns: 1fr var(--zigzag-num) 1fr;
		gap: var(--space-lg);
		padding-left: 0;
	}

	.zigzag__num {
		position: static;
		grid-column: 2;
		justify-self: center;
	}

	/* Oneven stap: tekst links, beeld rechts. */
	.zigzag__body {
		grid-column: 1;
		grid-row: 1;
	}

	.zigzag__media {
		grid-column: 3;
		grid-row: 1;
		justify-self: start;
	}

	/* Even stap: gespiegeld. */
	.zigzag__item:nth-child(even) .zigzag__body {
		grid-column: 3;
	}

	.zigzag__item:nth-child(even) .zigzag__media {
		grid-column: 1;
		justify-self: end;
	}
}

/* Het marineblauwe bloemblaadje (5e blaadje) valt weg tegen de marineblauwe
   CTA-achtergrond: gelijke kleur. Alleen hier krijgt het een lichtere tint,
   zodat alle vijf de logokleuren zichtbaar blijven. Een CSS-fill wint van het
   inline fill-attribuut in de SVG. */
.flower-decoration--cta .flower-decoration__petals > .flower-decoration__petal:nth-child(5) {
	fill: #43597c; /* terugval */
	fill: color-mix(in srgb, var(--color-primary) 45%, #ffffff);
}

/* ==========================================================================
   28. Over mij-hero: kleiner portret, compacte band
   Anja's portret oogde te groot op de gedeelde .page-hero__portrait (max 360px).
   Een kleiner portret naast een paginabrede tekstkolom liet echter een grote
   lege ruimte achter. Daarom vormen tekst en foto nu samen één smal, gecentreerd
   blok (zelfde breedte als de inhoud eronder), zodat het gevuld en in balans
   oogt. De Aanpak-hero blijft ongemoeid.
   ========================================================================== */

@media (min-width: 768px) {
	.page-hero--about .page-hero__inner {
		max-width: 760px;
		margin-inline: auto;
		grid-template-columns: 1fr 220px;
		gap: var(--space-md);
		align-items: center;
	}
}

.page-hero__portrait--compact img,
.page-hero__portrait--compact .portrait-placeholder {
	max-width: 220px;
}

/* ==========================================================================
   29. Contactformulier
   ========================================================================== */

.form-notice {
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-md);
	font-size: 0.98rem;
}

.form-notice--ok {
	background-color: color-mix(in srgb, var(--color-green) 14%, var(--color-bg-card));
	border: 1px solid var(--color-green);
	color: var(--color-primary);
}

.form-notice--error {
	background-color: color-mix(in srgb, var(--color-red) 12%, var(--color-bg-card));
	border: 1px solid var(--color-red);
	color: var(--color-primary);
}

.contact-form {
	display: grid;
	gap: var(--space-sm);
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	box-shadow: var(--shadow-sm);
}

@media (min-width: 640px) {
	.contact-form {
		padding: var(--space-lg);
	}
}

.contact-form__row {
	display: grid;
	gap: var(--space-sm);
}

@media (min-width: 560px) {
	.contact-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.contact-form__field {
	display: grid;
	gap: 0.35rem;
	margin: 0;
}

.contact-form__field label,
.contact-form__consent {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--color-primary);
}

.contact-form__req {
	color: var(--color-red);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-text);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border-hover);
	border-radius: var(--radius-md);
	padding: 0.7rem 0.85rem;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--color-accent-dark);
	box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.contact-form textarea {
	resize: vertical;
	min-height: 140px;
}

.contact-form__consent {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.6rem;
	font-weight: 400;
	color: var(--color-text-muted);
	line-height: 1.5;
}

.contact-form__consent input {
	margin-top: 0.25rem;
	width: 18px;
	height: 18px;
	accent-color: var(--color-accent-dark);
}

/* Honeypot: onzichtbaar voor mensen, wel in de DOM voor bots. */
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__submit {
	margin: 0;
}

/* ==========================================================================
   30. Foto-opties (interne keuzepagina, niet in menu)
   ========================================================================== */

.opties__note {
	max-width: 70ch;
	margin: 0 auto var(--space-md);
	padding: var(--space-sm) var(--space-md);
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--radius-md);
	font-size: 0.98rem;
	color: var(--color-text-muted);
}

.optie {
	margin: 0;
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.optie:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.optie__media {
	position: relative;
	aspect-ratio: 4 / 5;
	background-color: var(--color-bg-alt);
}

.optie__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.optie__chip {
	position: absolute;
	top: 0.8rem;
	left: 0.8rem;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background-color: var(--color-accent);
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-weight: 600;
	box-shadow: var(--shadow-sm);
	border: 2px solid rgba(255, 255, 255, 0.85);
}

.optie__body {
	padding: var(--space-sm) var(--space-md) var(--space-md);
}

.optie__title {
	font-size: 1.2rem;
	margin-bottom: var(--space-xs);
}

.optie__text {
	color: var(--color-text-muted);
	font-size: 0.96rem;
	margin: 0;
}

.opties__footer {
	max-width: 60ch;
	margin: var(--space-md) auto 0;
	text-align: center;
	color: var(--color-text-muted);
}

/* ==========================================================================
   31. Hero met liggende (landscape) afbeelding
   De hero-foto is nu 3:2 in plaats van 4:5. De rechterkolom mag daarom breder,
   en de max-breedte-cap van het portret vervalt zodat het beeld de kolom vult.
   ========================================================================== */

.hero__media {
	max-width: none;
}

@media (min-width: 900px) {
	.hero__inner {
		grid-template-columns: 1fr 1.05fr;
		align-items: center;
	}
}

/* ==========================================================================
   32. Reacties onder blogartikelen
   De WordPress-standaard reactiesectie in de huisstijl trekken: koppen in Lora,
   reacties als kaartjes, formuliervelden als op de contactpagina, oker knop.
   ========================================================================== */

.comments-area {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.comments-title,
.comment-reply-title {
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 1.5rem;
	color: var(--color-primary);
	margin-bottom: var(--space-md);
}

.comments-title::after,
.comment-reply-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: var(--space-xs);
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
}

/* Bestaande reacties */

.comment-list {
	list-style: none;
	margin: 0 0 var(--space-lg);
	padding: 0;
	display: grid;
	gap: var(--space-sm);
}

.comment-list .comment-body {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	box-shadow: var(--shadow-sm);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.35rem;
}

.comment-author .avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.comment-author .fn {
	font-style: normal;
	font-weight: 600;
	color: var(--color-primary);
}

.comment-author .says {
	display: none;
}

.comment-metadata {
	font-size: 0.85rem;
	margin-bottom: var(--space-xs);
}

.comment-metadata a {
	color: var(--color-text-soft);
	background-image: none;
}

.comment-content {
	color: var(--color-text-muted);
}

.comment-content p + p {
	margin-top: var(--space-xs);
}

.reply {
	margin-top: var(--space-xs);
}

.comment-reply-link {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--color-accent-dark);
	background-image: none;
}

/* Antwoorden op een reactie, iets ingesprongen met een gekleurde lijn. */
.comment-list .children {
	list-style: none;
	margin: var(--space-sm) 0 0;
	padding-left: var(--space-md);
	border-left: 2px solid var(--color-border);
	display: grid;
	gap: var(--space-sm);
}

/* Reactieformulier */

.comment-respond {
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
}

@media (min-width: 640px) {
	.comment-respond {
		padding: var(--space-lg);
	}
}

.comment-form {
	display: grid;
	gap: var(--space-sm);
}

.comment-form p {
	margin: 0;
}

.comment-notes,
.comment-form-cookies-consent {
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

.comment-form label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--color-primary);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-text);
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border-hover);
	border-radius: var(--radius-md);
	padding: 0.7rem 0.85rem;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--color-accent-dark);
	box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.comment-form textarea {
	resize: vertical;
	min-height: 140px;
}

.comment-form-cookies-consent {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.6rem;
}

.comment-form-cookies-consent input {
	margin-top: 0.25rem;
	width: 18px;
	height: 18px;
	accent-color: var(--color-accent-dark);
}

.form-submit {
	margin: 0;
}

.comment-form .submit,
.form-submit .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.2;
	padding: 0.9rem 2rem;
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
	color: var(--color-primary);
	border: 2px solid var(--color-accent);
	cursor: pointer;
	transition: background-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.comment-form .submit:hover,
.form-submit .submit:hover,
.comment-form .submit:focus-visible,
.form-submit .submit:focus-visible {
	background-color: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* Reactie-navigatie (paginering) */

.comment-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	justify-content: space-between;
	margin-bottom: var(--space-md);
}