/* --- Hero --- */
.hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--space-lg);
	align-items: center;
	padding-block: var(--space-lg);
}

.hero__subtext {
	color: var(--color-text-muted);
	font-size: 1.125rem;
	margin-bottom: var(--space-md);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.hero__trust {
	margin-top: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
	max-width: 58ch;
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

.hero__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero__breathing-shape {
	position: absolute;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, var(--color-accent-light), var(--color-accent) 80%);
	opacity: 0.35;
	z-index: 0;
}

.hero__media .optima-media,
.hero__media .optima-placeholder-image {
	position: relative;
	z-index: 1;
	width: 100%;
}

@media (max-width: 900px) {
	/* De sectie geeft al witruimte; extra padding hier gaf op mobiel 128px leegte boven de kop. */
	.hero__inner {
		grid-template-columns: 1fr;
		gap: 0;
		padding-block: 0;
	}

	/* Op mobiel: kop, dan het beeld, dan intro, CTA's en achtergrond — geen lap tekst vóór de foto.
	   display: contents maakt de tekstkinderen losse grid-items die we kunnen herordenen. */
	.hero__content {
		display: contents;
	}

	.hero__content > * {
		order: 3;
	}

	.hero__content > .section-heading__eyebrow,
	.hero__content > h1 {
		order: 1;
	}

	.hero__media {
		order: 2;
		width: 100%;
		max-width: 420px;
		margin: var(--space-xs) auto var(--space-md);
	}
}

@media (max-width: 560px) {
	.hero__actions .cta-button {
		width: 100%;
		text-align: center;
	}
}

/* --- Probleemherkenning --- */
.probleemherkenning__grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

.probleemherkenning__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
}

.probleemherkenning__marker {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	margin-top: 0.35rem;
	border-radius: 50%;
	background-color: var(--color-highlight);
}

.probleemherkenning__item p {
	margin: 0;
}

.probleemherkenning__brug {
	max-width: 620px;
	margin: 0 auto var(--space-lg);
	text-align: center;
	color: var(--color-text-muted);
}

/* --- Voor wie --- */
.voor-wie__item {
	text-align: center;
	padding-top: var(--space-lg);
}

.voor-wie__item h3 {
	font-size: 1.15rem;
	margin-bottom: var(--space-2xs);
}

.voor-wie__item p {
	margin: 0;
	color: var(--color-text-muted);
}

/* --- Onze visie: Positieve Gezondheid ---
   Het diepe bruin maakt van deze sectie het fundament onder de pagina; samen
   met de afsluitende CTA vormt het de twee donkere ankers (begin en einde van
   het verhaal). Rechts een decoratief jaarringenveld: fijne lijnen die vanuit
   een kern linksboven (buiten beeld) naar buiten groeien. Bewust ondergeschikt
   aan de tekst — geen kaarten, nummers, pijlen of iconen. */
.visie {
	background-color: var(--color-vitality);
	color: var(--color-bg);
	padding-block: var(--space-xl);
}

.visie__inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--space-lg);
	align-items: center;
}

.visie__eyebrow {
	color: var(--color-accent-light);
}

.visie__titel {
	color: var(--color-bg);
	max-width: 18ch;
	margin-bottom: var(--space-sm);
}

/* Houdt de tweede zin bij elkaar, zodat de kop na "anders." afbreekt en niet
   midden in "En menselijker.". */
.visie__titel span {
	display: inline-block;
}

.visie__tekst p:not(.visie__eyebrow) {
	color: color-mix(in srgb, var(--color-bg) 82%, transparent);
	max-width: 54ch;
}

.visie__tekst p:last-child {
	margin-bottom: 0;
}

.visie__beeld {
	position: relative;
	overflow: hidden;
	min-height: 380px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--space-md);
}

.visie__ringen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--color-gold-bright);
	pointer-events: none;
}

.visie__ringen ellipse {
	vector-effect: non-scaling-stroke;
}

.visie__kern,
.visie__brug,
.visie__lagen {
	position: relative;
	z-index: 1;
}

/* Het uitgangspunt zelf: staat los bovenaan met een fijne gouden grondlijn.
   Bewust géén lijst waar de drie lagen onder hangen — dat zou lezen als een
   definitie van Positieve Gezondheid in plaats van als onze vertaling ervan. */
.visie__kern {
	font-family: var(--font-heading);
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	line-height: 1.25;
	color: var(--color-bg);
	margin: 0;
	padding-bottom: var(--space-2xs);
	border-bottom: 1px solid var(--color-accent);
	width: max-content;
	max-width: 100%;
}

.visie__brug {
	margin: var(--space-xs) 0 var(--space-md);
	font-size: 0.9rem;
	color: color-mix(in srgb, var(--color-bg) 70%, transparent);
}

.visie__lagen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.visie__lagen li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2xs);
	font-family: var(--font-heading);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.35;
	color: var(--color-bg);
	max-width: 26ch;
	margin-inline-start: calc(var(--laag, 0) * clamp(0.75rem, 3vw, 2.25rem));
}

/* Korte hairline in plaats van een bullet of icoon; groeit mee naar buiten. */
.visie__lagen li::before {
	content: '';
	flex-shrink: 0;
	width: calc(16px + var(--laag, 0) * 10px);
	height: 1px;
	margin-top: 0.62em;
	background-color: var(--color-accent);
}

.visie__lagen li:nth-child(1) { --laag: 1; }
.visie__lagen li:nth-child(2) { --laag: 2; }
.visie__lagen li:nth-child(3) { --laag: 3; }

@media (max-width: 900px) {
	.visie {
		padding-block: var(--space-lg);
	}

	/* Mobiel: eerst de boodschap, daarna pas het ringveld. */
	.visie__inner {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.visie__titel,
	.visie__tekst p:not(.visie__eyebrow) {
		max-width: none;
	}

	.visie__beeld {
		min-height: 0;
		padding-block: var(--space-sm) 0;
	}

	/* Eén kolom betekent een breed, laag beeldvlak. Het ringveld wordt daarom
	   vierkant en links uitgelijnd, anders worden de bogen zo ver opgerekt dat
	   ze als verticale strepen lezen in plaats van als ringen. */
	.visie__ringen {
		inset: 0 auto auto 0;
		width: min(100%, 460px);
		height: auto;
		aspect-ratio: 1;
	}
}

/* Zodra de layout één kolom wordt, blijft alleen een rustige lijnsuggestie
   over: het beeldvlak is dan zo breed dat de fijne ringen als verticale
   strepen gaan lezen in plaats van als ringen. */
@media (max-width: 900px) {
	.visie__ring--fijn {
		display: none;
	}
}

/* --- Programma's --- */
.mogelijkheden__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.mogelijkheden__voor-wie {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--color-vitality-light);
	margin-bottom: var(--space-2xs);
}

.mogelijkheden__punten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	font-size: 0.95rem;
	color: var(--color-text-muted);
}

.mogelijkheden__punten li {
	position: relative;
	padding-left: 1.25rem;
}

.mogelijkheden__punten li::before {
	content: '\2726';
	position: absolute;
	left: 0;
	color: var(--color-accent);
	font-size: 0.7rem;
	top: 0.3em;
}

.mogelijkheden__footnote {
	max-width: 640px;
	margin: var(--space-md) auto 0;
	text-align: center;
	font-size: 0.95rem;
	color: var(--color-text-muted);
}

.mogelijkheden__cta {
	margin-top: var(--space-sm);
	text-align: center;
}

.mogelijkheden__icon {
	width: 72px;
	height: 72px;
	object-fit: contain;
	margin-bottom: var(--space-sm);
	transition: transform var(--duration-fast) var(--ease-calm);
}

.mogelijkheden__item:hover .mogelijkheden__icon {
	transform: scale(1.08);
}

.mogelijkheden__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	margin-top: auto;
	padding-top: var(--space-sm);
	color: var(--color-accent-dark);
	font-weight: 600;
	font-size: 0.9rem;
}

.mogelijkheden__link span {
	transition: transform var(--duration-fast) var(--ease-calm);
}

.mogelijkheden__item:hover .mogelijkheden__link span {
	transform: translateX(4px);
}

/* --- Waarom Optima --- */
.voordeel {
	position: relative;
	padding-top: var(--space-lg);
}

.voordeel__accent {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-md);
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
	color: var(--color-accent-dark);
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
}

.voordeel h3 {
	margin-bottom: var(--space-2xs);
}

.voordeel p {
	margin: 0;
	color: var(--color-text-muted);
}

/* --- Zachte golf-overgang tussen hero en "Herkenbaar?" --- */
.wave-divider {
	line-height: 0;
	background-color: var(--color-bg);
}

.wave-divider svg {
	display: block;
	width: 100%;
	height: 56px;
}

@media (max-width: 560px) {
	.wave-divider svg {
		height: 32px;
	}
}

/* --- Inzicht als basis voor herstel (Kana): bewust rustig — geen
   achtergrondkleur-wissel, geen badges, alleen een gedempte tekstregel
   als stille visuele echo van de Meten -> Herstel-flow. --- */
.inzicht-herstel__inner {
	text-align: center;
}

.inzicht-herstel__flow {
	margin: var(--space-md) 0 0;
	color: var(--color-text-muted);
	font-size: 0.85rem;
	letter-spacing: 0.02em;
}

.inzicht-herstel__footnote {
	margin-top: var(--space-xs);
	font-size: 0.9rem;
}

.inzicht-herstel__footnote a {
	color: var(--color-accent-dark);
	font-weight: 600;
}

/* --- Zo werkt het (sticky stappen-ervaring) ---
   Basis (zonder JS / met reduced motion / mobiel): panelen als gestapelde
   kaarten onder elkaar. De sticky scroll-variant wordt op desktop door
   animations.js geactiveerd via de class .proces--sticky. */
.proces__layout {
	display: grid;
	gap: var(--space-md) var(--space-lg);
}

.proces__layout .section-heading {
	margin-bottom: var(--space-sm);
}

.proces__teller {
	display: none;
	font-family: var(--font-heading);
	margin: 0 0 var(--space-sm);
	color: var(--color-text-muted);
}

.proces__teller-actief {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-accent-dark);
}

.proces__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	display: none;
}

.proces__lijst::before {
	content: '';
	position: absolute;
	top: 0.9rem;
	bottom: 0.9rem;
	left: 5px;
	width: 2px;
	background-color: var(--color-border);
}

.proces__lijst-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding-block: var(--space-2xs);
	color: var(--color-text-muted);
	transition: color var(--duration-fast) var(--ease-calm);
}

.proces__dot {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--color-border);
	background-color: var(--color-bg-alt);
	transition: background-color var(--duration-fast) var(--ease-calm), border-color var(--duration-fast) var(--ease-calm);
}

.proces__lijst-item.is-actief {
	color: var(--color-text);
	font-weight: 600;
}

.proces__lijst-item.is-actief .proces__dot {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

.proces__lijst-item.is-gedaan .proces__dot {
	background-color: var(--color-vitality);
	border-color: var(--color-vitality);
}

.proces__panelen {
	position: relative;
}

.proces__paneel {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	padding: var(--space-md);
	margin-bottom: var(--space-sm);
	position: relative;
}

.proces__paneel-nummer {
	position: absolute;
	top: var(--space-md);
	right: var(--space-md);
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-accent);
}

.proces__nummer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background-color: var(--color-vitality);
	color: var(--color-bg);
	font-family: var(--font-heading);
	font-weight: 700;
	margin-bottom: var(--space-sm);
}

.proces__paneel h3 {
	margin-bottom: var(--space-2xs);
}

.proces__paneel p {
	margin: 0;
	color: var(--color-text-muted);
}

/* Sticky scroll-variant (alleen desktop, geactiveerd door JS) */
@media (min-width: 901px) {
	.proces--sticky.section {
		padding-block: 0;
	}

	.proces--sticky .proces__scroll-area {
		height: 320vh;
	}

	.proces--sticky .proces__sticky {
		position: sticky;
		top: 0;
		min-height: 100vh;
		display: flex;
		align-items: center;
	}

	.proces--sticky .proces__layout {
		grid-template-columns: 0.9fr 1.1fr;
		align-items: center;
		width: 100%;
	}

	.proces--sticky .proces__lijst {
		display: block;
	}

	.proces--sticky .proces__teller {
		display: block;
	}

	.proces--sticky .proces__panelen {
		min-height: 380px;
	}

	.proces--sticky .proces__paneel {
		position: absolute;
		inset: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--space-lg);
		opacity: 0;
		transform: translateY(28px);
		transition: opacity var(--duration-medium) var(--ease-calm), transform var(--duration-medium) var(--ease-calm);
		pointer-events: none;
	}

	.proces--sticky .proces__paneel.is-actief {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.proces--sticky .proces__cta {
		padding-bottom: var(--space-lg);
	}
}

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

.proces__cta-note {
	margin: var(--space-xs) 0 0;
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

/* --- Over Will (homepage) --- */
.over-will__top {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--space-lg);
	align-items: center;
	margin-bottom: var(--space-lg);
}

.over-will__header {
	max-width: 480px;
}

.over-will__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* Het bestand wordt al op 4:5 aangeleverd (image size 'optima-portrait'),
   dus hier wordt niets meer weggesneden. De aspect-ratio blijft staan om de
   ruimte te reserveren vóórdat de foto geladen is (voorkomt layout shift);
   object-fit is enkel nog een vangnet. */
.over-will__media .optima-media__image {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.over-will__body {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

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

.over-will__expertise {
	list-style: none;
	margin: 0 0 var(--space-md);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2xs);
}

.over-will__chip {
	background-color: var(--color-accent-light);
	color: var(--color-text-on-accent);
	border-radius: 999px;
	padding: var(--space-3xs) var(--space-xs);
	font-size: 0.85rem;
	font-weight: 600;
}

.over-will__quote-card {
	position: relative;
	margin: var(--space-md) auto;
	padding: var(--space-lg) var(--space-lg) var(--space-md);
	background-color: var(--color-vitality);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	text-align: center;
}

.over-will__quote-teken {
	position: absolute;
	top: 0.5rem;
	left: var(--space-md);
	font-family: var(--font-heading);
	font-size: 4rem;
	line-height: 1;
	color: var(--color-accent);
	opacity: 0.85;
}

.over-will__quote-card p {
	font-family: var(--font-heading);
	font-size: 1.3rem;
	font-style: italic;
	color: var(--color-bg);
	margin-bottom: var(--space-sm);
}

.over-will__quote-card cite {
	display: block;
	font-style: normal;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	color: var(--color-accent-light);
}

/* Op mobiel eerst kop + intro, dan de foto (DOM-volgorde regelt dit al),
   daarna pas expertise/quote/CTA uit .over-will__body. */
@media (max-width: 900px) {
	.over-will__top {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.over-will__header {
		max-width: none;
		text-align: center;
	}

	.over-will__media {
		max-width: 420px;
		margin-inline: auto;
	}
}

/* --- Veelgestelde vragen --- */
.faq__list {
	max-width: 760px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.faq__item {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	padding: var(--space-sm) var(--space-md);
	transition: border-color var(--duration-fast) var(--ease-calm);
}

.faq__item[open] {
	border-color: var(--color-accent);
}

.faq__vraag {
	position: relative;
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	padding-right: 2rem;
}

.faq__vraag::-webkit-details-marker {
	display: none;
}

.faq__vraag::after {
	content: '+';
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-heading);
	font-size: 1.35rem;
	color: var(--color-accent-dark);
	transition: transform var(--duration-fast) var(--ease-calm);
}

.faq__item[open] .faq__vraag::after {
	transform: translateY(-50%) rotate(45deg);
}

.faq__antwoord {
	margin: var(--space-xs) 0 0;
	color: var(--color-text-muted);
}

/* --- Afsluitende CTA ---
   De conclusie van de pagina: extra aanloop, een fijn gouden slotstreepje en
   een zeer subtiele echo van het jaarringenmotief uit de visie-sectie, zodat
   het einde visueel terugverwijst naar het begin van het verhaal. */
.cta-afsluitend {
	position: relative;
	overflow: hidden;
	background-color: var(--color-vitality);
	border-radius: var(--radius-lg);
	margin-inline: var(--space-sm);
	margin-top: var(--space-lg);
	padding-block: var(--space-xl);
}

/* Gespiegeld, zodat de kern van de ringen in de rechteronderhoek valt. */
.cta-afsluitend__echo {
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp(180px, 32vw, 320px);
	height: clamp(180px, 32vw, 320px);
	transform: rotate(180deg);
	color: var(--color-gold-bright);
	pointer-events: none;
}

.cta-afsluitend__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	text-align: center;
}

.cta-afsluitend__inner::before {
	content: '';
	display: block;
	width: 48px;
	height: 1px;
	margin: 0 auto var(--space-md);
	background-color: var(--color-accent);
}

.cta-afsluitend h2 {
	color: var(--color-bg);
	margin-bottom: var(--space-sm);
}

.cta-afsluitend p {
	color: color-mix(in srgb, var(--color-bg) 85%, transparent);
	margin-bottom: var(--space-md);
}

.cta-afsluitend__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
}

.cta-afsluitend .cta-button--ghost {
	color: var(--color-bg);
	border-color: color-mix(in srgb, var(--color-bg) 50%, transparent);
}

.cta-afsluitend .cta-button--ghost:hover {
	border-color: var(--color-bg);
	color: var(--color-bg);
	background-color: color-mix(in srgb, var(--color-bg) 12%, transparent);
}

@media (max-width: 560px) {
	.proces__cta .cta-button,
	.cta-afsluitend__actions .cta-button {
		width: 100%;
		text-align: center;
	}
}