/* ===========================================================================
   Imani — the Lovable design layer (REH-331)

   Darko's Imani prototype (design-reference/imani) is a remix of Anker's, so
   the shared reimagined layer (rehab-parent/assets/css/reimagined.css) gets
   the structure right, but its typography and details are Anker's: light
   300 headings, sans reading copy, teal eyebrows, a diamond marker. Imani's
   design differs:

     headings     Montserrat 500, -0.01em          (styles.css base layer)
     reading copy Lora, 16px / 1.6, ink at .75–.8  (`p { font-family: serif }`)
     eyebrows     12px / 500 / .18em, rose-deep #9E5A58, petal marker
     buttons      .82rem / 500 / .16em, 16px 32px, soft teal shadow

   Every value below is read off the prototype's components
   (src/components/sections/*.tsx) and checked side by side with the
   prototype running locally (text-matched computed styles + screenshots).

   Page-scoped to body.rehab-reimagined (pages built from the design's
   blocks), with that prefix also lifting these rules over the block
   stylesheets, which print later, in the footer.
   ======================================================================== */

body.rehab-reimagined {
	--imani-petal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='11.9 11.9 476.3 476.3'%3E%3Cpath d='M77.61,51.92c16.35,22.51,32.7,45.03,49.05,67.54,4.84,6.66,4.58,15.73-.6,22.13-1.9,2.34-3.9,4.89-5.97,7.63-4.02,5.33-19.35,26.02-34.23,58.84-7.57,16.7-12.55,27.67-16.22,44.04-1.48,6.61-4.29,20.94-4.1,45.82.38,49.4,12.11,80.31,7.31,82.01-2.67.95-8-8.04-17.65-24.34-10.23-17.27-18.67-31.73-25.14-52.95-4.3-14.12-5.88-25.16-6.95-32.9,0,0-4.31-31.09-.53-67.39,5.57-53.52,30.98-121.12,42.14-148.84,2.18-5.42,9.48-6.31,12.91-1.58Z'/%3E%3Cpath d='M306.15,92.53c4.6,40.04,9.2,80.08,13.81,120.12.64,5.57-2.87,10.77-8.28,12.26s-11.28,3.29-17.87,5.61c-17.04,6.02-44.8,17.5-72.07,41.19-30.26,26.27-47.32,57.2-56.3,75.95-13.12,27.41-15.78,33.34-15.78,33.34-12.38,27.63-15.62,38.68-18.99,38.24-5.15-.67-5.75-27.57-5.88-46.8-.37-53.32,7.51-95.72,12.17-119.58,16.75-85.74,125.09-148.19,159.3-165.64,4.25-2.17,9.35.57,9.9,5.3Z'/%3E%3Cpath d='M251.33,289.53c27.15-20.78,81.55-54.84,157.61-59.19,26.4-1.51,46.38-3.52,62.52-1.32,5.98.82,9.31,7.34,6.54,12.71-7.15,13.84-16.77,30.76-29.35,49.14-24.91,36.39-66.84,97.65-142.81,133.18-52.48,24.55-103.31,28.44-140.38,26.76-7.73-.35-13.41-7.51-11.75-15.07,3.26-14.9,11.18-30.51,21.31-52.07,21.29-45.37,50.8-74.61,76.31-94.14Z'/%3E%3C/svg%3E");
	--imani-ink-75: rgba(30, 30, 30, 0.75);
	--imani-ink-80: rgba(30, 30, 30, 0.8);
	--imani-shadow: 0 2px 6px rgba(30, 75, 93, 0.18);
}

/* ---- Headings ------------------------------------------------------------- */

body.rehab-reimagined :is(h1, h2, h3, h4) {
	/* No balanced wrapping in the design: lines fill the measure. */
	text-wrap: wrap;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--rehab-color-fg);
}

/* Section heading: 2.1rem → 2.6rem, snug. */
body.rehab-reimagined :is(
	.rehab-video-reel__heading,
	.rehab-cards-grid__header .rehab-heading,
	.rehab-why-tabs__heading,
	.rehab-team-grid__heading,
	.rehab-review-sources__heading,
	.rehab-gallery__header .rehab-heading
) {
	font-size: 2.1rem;
	line-height: 1.375;
	margin: 1rem 0 0;
}

@media (min-width: 640px) {
	body.rehab-reimagined :is(
		.rehab-video-reel__heading,
		.rehab-cards-grid__header .rehab-heading,
		.rehab-why-tabs__heading,
		.rehab-team-grid__heading,
		.rehab-review-sources__heading,
		.rehab-gallery__header .rehab-heading
	) { font-size: 2.6rem; }
}

/* The video reel's heading has no `leading-snug` (body 1.5). Two classes, to
   outrank the :is() list above (it takes its most specific member's weight). */
body.rehab-reimagined .rehab-video-reel .rehab-video-reel__heading { line-height: 1.5; }

/* ---- Eyebrows: rose, petal marker ----------------------------------------- */

body.rehab-reimagined :is(
	.rehab-hero__eyebrow,
	.rehab-video-reel__eyebrow,
	.rehab-cards-grid__eyebrow,
	.rehab-why-tabs__eyebrow,
	.rehab-team-grid__eyebrow,
	.rehab-review-sources__eyebrow,
	.rehab-testimonials__eyebrow,
	.rehab-gallery__eyebrow,
	.rehab-steps__eyebrow,
	.rehab-feature-split__eyebrow,
	.rehab-map__eyebrow
) {
	display: block;
	margin: 0;
	font-family: var(--rehab-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--imani-rose-deep);
}

body.rehab-reimagined :is(
	.rehab-hero__eyebrow,
	.rehab-video-reel__eyebrow,
	.rehab-cards-grid__eyebrow,
	.rehab-why-tabs__eyebrow,
	.rehab-team-grid__eyebrow,
	.rehab-review-sources__eyebrow,
	.rehab-testimonials__eyebrow,
	.rehab-gallery__eyebrow,
	.rehab-steps__eyebrow,
	.rehab-feature-split__eyebrow,
	.rehab-map__eyebrow
)::before {
	content: "";
	display: inline-block;
	width: 0.72em;
	height: 0.72em;
	margin-right: 0.5rem;
	vertical-align: baseline;
	background: currentColor;
	-webkit-mask: var(--imani-petal) center / contain no-repeat;
	mask: var(--imani-petal) center / contain no-repeat;
}

/* The blocks' own ◆ marker gives way to the petal. */
body.rehab-reimagined :is([class*="__eyebrow"], .rehab-hero__trust-item) .diamond,
body.rehab-reimagined .rehab-hero__diamond {
	display: none;
}

/* ---- Reading copy: Lora ---------------------------------------------------- */

body.rehab-reimagined :is(
	.rehab-hero__body,
	.rehab-cards-grid__subheading,
	.rehab-card__description,
	.rehab-why-tabs__text,
	.rehab-team-grid__lede,
	.rehab-founder__quote,
	.rehab-founder__body,
	.rehab-testimonials__subheading,
	.rehab-gallery__lede,
	.rehab-steps__lede,
	.rehab-steps__text,
	.rehab-feature-split__copy p,
	.rehab-faq-item__answer,
	.rehab-map__address,
	.rehab-cta-band__lede,
	.rehab-cta-band__helper,
	.rehab-hero__cta-helper
) {
	font-family: var(--imani-font-reading);
	font-weight: 400;
}

/* Section intro: 1.02rem, relaxed, ink .75. */
body.rehab-reimagined :is(
	.rehab-cards-grid__subheading,
	.rehab-team-grid__lede,
	.rehab-testimonials__subheading,
	.rehab-gallery__lede,
	.rehab-steps__lede
) {
	margin: 1.25rem 0 0;
	max-width: none;
	font-size: 1.02rem;
	line-height: 1.625;
	color: var(--imani-ink-75);
}

/* ---- Buttons ---------------------------------------------------------------- */

body.rehab-reimagined .rehab-page-content :is(.rehab-btn--luxury, .rehab-btn--dark, .rehab-btn--light) {
	padding: 1rem 2rem;
	font-family: var(--rehab-font-body);
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
	border-radius: 0;
}

body.rehab-reimagined .rehab-page-content :is(.rehab-btn--luxury, .rehab-btn--dark) {
	box-shadow: var(--imani-shadow);
}

body.rehab-reimagined .rehab-page-content :is(.rehab-btn--luxury, .rehab-btn--dark):is(:hover, :focus-visible) {
	box-shadow: 0 8px 20px rgba(30, 75, 93, 0.34);
}

/* Outline (the prototype's .btn-cta-outline): 1.5px teal, fills on hover. */
body.rehab-reimagined .rehab-page-content .rehab-btn--light,
body.rehab-reimagined .rehab-cta-band--none .rehab-btn--dark {
	background: transparent;
	color: var(--imani-cta);
	border: 1.5px solid var(--imani-cta);
	box-shadow: none;
}

body.rehab-reimagined .rehab-page-content .rehab-btn--light:is(:hover, :focus-visible),
body.rehab-reimagined .rehab-cta-band--none .rehab-btn--dark:is(:hover, :focus-visible) {
	background: var(--imani-cta);
	color: #FFFFFF;
	border-color: var(--imani-cta);
	box-shadow: 0 8px 20px rgba(30, 75, 93, 0.34);
}

/* ---- Measure and rhythm ------------------------------------------------------
   .container-ah: 78rem with 1.5rem gutters (content 1200px). Sections are
   section-y (2.25rem → 3.5rem) or section-y-sm (1.5rem → 2.25rem). */

body.rehab-reimagined .rehab-page-content .rehab-container {
	padding-inline: 1.5rem;
}

body.rehab-reimagined .rehab-page-content :is(
	.rehab-video-reel,
	.rehab-cards-grid,
	.rehab-why-tabs,
	.rehab-team-grid,
	.rehab-founder,
	.rehab-review-sources,
	.rehab-testimonials,
	.rehab-gallery,
	.rehab-steps,
	.rehab-feature-split,
	.rehab-faq,
	.rehab-map,
	.rehab-cta-band--cream
) {
	padding-block: 2.25rem;
}

body.rehab-reimagined .rehab-page-content :is(.rehab-spr, .rehab-stat-band, .rehab-cta-band--line) {
	padding-block: 1.5rem;
}

@media (min-width: 1024px) {
	body.rehab-reimagined .rehab-page-content :is(
		.rehab-video-reel,
		.rehab-cards-grid,
		.rehab-why-tabs,
		.rehab-team-grid,
		.rehab-founder,
		.rehab-review-sources,
		.rehab-testimonials,
		.rehab-gallery,
		.rehab-steps,
		.rehab-feature-split,
		.rehab-faq,
		.rehab-map,
		.rehab-cta-band--cream
	) { padding-block: 3.5rem; }

	body.rehab-reimagined .rehab-page-content :is(.rehab-spr, .rehab-stat-band, .rehab-cta-band--line) {
		padding-block: 2.25rem;
	}
}

/* Every band is white in the design; only the CTA bands are rose-tint. */
body.rehab-reimagined .rehab-page-content :is(.rehab-bg-cream, .rehab-bg-sage-mist):not(.rehab-cta-band) {
	background: #FFFFFF;
}

/* ---- Section divider: a plain hairline --------------------------------------- */

body.rehab-reimagined .rehab-section-divider {
	height: 1px;
	margin-block: 1.5rem;
	background: var(--rehab-color-line);
}

/* ---- Video reel (VideoReel.tsx) ------------------------------------------------ */

body.rehab-reimagined .rehab-video-reel__head {
	display: block;
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
}

body.rehab-reimagined .rehab-video-reel__grid {
	margin-top: 3rem;
	gap: 1.5rem;
}

body.rehab-reimagined .rehab-video-card__caption {
	margin-top: 1rem;
	padding: 0;
	min-height: 1.75rem;
}

body.rehab-reimagined .rehab-video-card__quote {
	font-family: var(--rehab-font-body);
	font-size: 1.05rem;
	font-weight: 500;
	font-style: normal;
	line-height: 1.375;
	letter-spacing: normal;
	color: var(--rehab-color-fg);
}

/* ---- Card grids (CardsGrid.tsx / CardsCarousel.tsx): left-aligned header -------- */

body.rehab-reimagined .rehab-cards-grid__header {
	max-width: none;
	margin: 0;
	text-align: left;
}

body.rehab-reimagined .rehab-cards-grid__header :is(.rehab-cards-grid__eyebrow, .rehab-heading, .rehab-cards-grid__subheading) {
	text-align: left;
	justify-content: flex-start;
}

body.rehab-reimagined .rehab-cards-grid__banner {
	margin-top: 3rem;
	aspect-ratio: 21 / 9;
	overflow: hidden;
}

body.rehab-reimagined .rehab-cards-grid__banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.rehab-reimagined .rehab-cards-grid__grid {
	margin-top: 3rem;
	gap: 1.5rem;
}

body.rehab-reimagined .rehab-cards-grid .rehab-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #FFFFFF;
	border: 1px solid var(--rehab-color-line);
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

body.rehab-reimagined .rehab-cards-grid .rehab-card__image {
	aspect-ratio: 16 / 10;
	height: auto;
	margin: 0;
	border-radius: 0;
	overflow: hidden;
}

body.rehab-reimagined .rehab-cards-grid .rehab-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

body.rehab-reimagined .rehab-cards-grid .rehab-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: 1.75rem;
}

body.rehab-reimagined .rehab-cards-grid .rehab-card__title {
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.5;
}

body.rehab-reimagined .rehab-cards-grid .rehab-card__description {
	margin: 1rem 0 0;
	font-size: 0.98rem;
	line-height: 1.625;
	color: var(--imani-ink-75);
}

body.rehab-reimagined .rehab-cards-grid .rehab-card__link {
	display: inline-block;
	margin-top: auto;
	padding-top: 1.5rem;
	font-family: var(--rehab-font-body);
	font-size: 0.82rem;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--imani-cta);
}

/* Therapy carousel (CardsCarousel, 4 visible): 6xl measure, 12px slide gutters. */
body.rehab-reimagined .rehab-cards-grid--carousel .rehab-cards-grid__viewport {
	max-width: 72rem;
	margin: 3rem auto 0;
}

body.rehab-reimagined .rehab-cards-grid--carousel .rehab-cards-grid__track {
	margin-top: 0;
	gap: 1.5rem;
	padding: 0 0.75rem;
	scroll-padding-inline: 0.75rem;
}

/* w-full → sm 1/2 → md 1/3 → lg 1/4 */
body.rehab-reimagined .rehab-cards-grid--carousel .rehab-cards-grid__track > .rehab-card {
	flex: 0 0 100%;
	width: 100%;
}

@media (min-width: 640px) {
	body.rehab-reimagined .rehab-cards-grid--carousel .rehab-cards-grid__track > .rehab-card { flex-basis: calc((100% - 1.5rem) / 2); width: calc((100% - 1.5rem) / 2); }
}

@media (min-width: 768px) {
	body.rehab-reimagined .rehab-cards-grid--carousel .rehab-cards-grid__track > .rehab-card { flex-basis: calc((100% - 3rem) / 3); width: calc((100% - 3rem) / 3); }
}

@media (min-width: 1024px) {
	body.rehab-reimagined .rehab-cards-grid--carousel .rehab-cards-grid__track > .rehab-card { flex-basis: calc((100% - 4.5rem) / 4); width: calc((100% - 4.5rem) / 4); }
}

/* Three-up grids hyphenate (CardsGrid default); the four-up benefit grid and
   the carousels do not (noHyphens / hyphens-none). */
body.rehab-reimagined .rehab-cards-grid--cols-3 :is(.rehab-card__title, .rehab-card__description) {
	overflow-wrap: break-word;
	hyphens: auto;
}

body.rehab-reimagined :is(.rehab-cards-grid--cols-4, .rehab-cards-grid--carousel) :is(.rehab-card__title, .rehab-card__description) {
	hyphens: none;
}

/* "We behandelen ook: …" sits inside the disorders section (mt-10). */
body.rehab-reimagined .rehab-page-content .rehab-cards-grid:has(+ .imani-also-treated) {
	padding-bottom: 0;
}

body.rehab-reimagined .rehab-page-content > p.imani-also-treated {
	margin: 2.5rem auto 0;
	padding: 0 1.5rem 2.25rem;
	max-width: var(--rehab-container-max);
	font-family: var(--imani-font-reading);
	font-size: 0.95rem;
	line-height: 1.625;
	color: var(--imani-ink-75);
}

@media (min-width: 1024px) {
	body.rehab-reimagined .rehab-page-content > p.imani-also-treated { padding-bottom: 3.5rem; }
}

body.rehab-reimagined p.imani-also-treated strong {
	font-family: var(--rehab-font-body);
	font-weight: 500;
	color: var(--rehab-color-fg);
}

body.rehab-reimagined p.imani-also-treated a {
	color: var(--imani-cta);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---- CTA band (CtaBand.tsx) ----------------------------------------------------- */

/* No hairlines at the band edges on Imani (Anker's --line variant has them). */
body.rehab-reimagined .rehab-cta-band--line {
	border-block: 0;
}

body.rehab-reimagined .rehab-cta-band .rehab-cta-band__heading {
	max-width: 72rem;
	margin: 0 auto;
	letter-spacing: -0.01em;
	font-size: 1.75rem;
	line-height: 1.375;
}

@media (min-width: 640px) {
	body.rehab-reimagined .rehab-cta-band .rehab-cta-band__heading { font-size: 2.1rem; }
}

body.rehab-reimagined .rehab-cta-band__stack {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: fit-content;
	max-width: 100%;
	margin: 2.25rem auto 0;
	gap: 0;
}

body.rehab-reimagined .rehab-cta-band__stack .rehab-btn {
	display: block;
	width: 100%;
}

body.rehab-reimagined .rehab-cta-band__helper {
	display: block;
	margin: 1.5rem 0 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--imani-ink-75);
}

/* ---- Why Imani tabs (WhyTabs.tsx) ------------------------------------------------ */

body.rehab-reimagined .rehab-why-tabs__head {
	max-width: 48rem;
}

body.rehab-reimagined .rehab-why-tabs__layout {
	margin-top: 3.5rem;
	gap: 2.5rem;
}

@media (min-width: 1024px) {
	body.rehab-reimagined .rehab-why-tabs__layout { gap: 3.5rem; }
}

@media (min-width: 1024px) {
	/* w-1/3 + w-2/3 + gap-14 overflow the row and shrink in proportion. */
	body.rehab-reimagined .rehab-why-tabs__nav { flex: 0 1 33.3333%; width: 33.3333%; max-width: none; }
	body.rehab-reimagined .rehab-why-tabs__panels { flex: 0 1 66.6667%; width: 66.6667%; }
}

body.rehab-reimagined .rehab-why-tabs__tab {
	padding: 0.75rem 1rem;
	font-family: var(--rehab-font-body);
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rehab-color-ink-soft, #55646E);
	color: #55646E;
	border-left: 2px solid transparent;
}

body.rehab-reimagined .rehab-why-tabs__tab.is-active {
	color: var(--imani-cta);
	border-left-color: var(--imani-cta);
}

body.rehab-reimagined .rehab-why-tabs__media {
	aspect-ratio: 16 / 10;
	height: auto;
	margin-bottom: 1.75rem;
	border-radius: 0;
}

body.rehab-reimagined .rehab-why-tabs__title {
	padding-inline: 0.25rem;
	font-size: 1.6rem;
	line-height: 1.5;
}

body.rehab-reimagined .rehab-why-tabs__text {
	margin: 1rem 0 0;
	padding-inline: 0.25rem;
	max-width: 42rem;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--imani-ink-75);
}

/* ---- Stats row (StatsRow.tsx): rose figures, no rules ---------------------------- */

body.rehab-reimagined .rehab-stat-band__grid {
	grid-template-columns: 1fr;
	max-width: none;
	gap: 2.5rem;
}

@media (min-width: 640px) {
	body.rehab-reimagined .rehab-stat-band__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body.rehab-reimagined .rehab-stat-band__item {
	border: 0;
	padding: 0;
}

body.rehab-reimagined .rehab-stat-band__item::before,
body.rehab-reimagined .rehab-stat-band__item::after {
	display: none;
}

body.rehab-reimagined .rehab-stat-band__value {
	font-family: var(--rehab-font-body);
	font-size: 2.8rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	color: var(--imani-rose-deep);
}

@media (min-width: 640px) {
	body.rehab-reimagined .rehab-stat-band__value { font-size: 3.4rem; }
}

body.rehab-reimagined .rehab-stat-band__label {
	margin-top: 0.75rem;
	font-family: var(--rehab-font-body);
	font-size: 0.78rem;
	line-height: 1.6;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--imani-slate);
}

/* ---- Hero (Hero.tsx) ------------------------------------------------------------ */

body.rehab-reimagined .rehab-hero {
	padding-block: 0;
}

body.rehab-reimagined .rehab-hero__container {
	padding: 4rem 1.5rem;
}

@media (min-width: 1024px) {
	body.rehab-reimagined .rehab-hero__container { padding-block: 6rem; }
}

body.rehab-reimagined .rehab-hero__grid {
	align-items: center;
	gap: 3rem;
}

body.rehab-reimagined .rehab-hero__h1 {
	margin: 1.5rem 0 0;
	font-size: 2.6rem;
	line-height: 1.08;
	overflow-wrap: break-word;
	hyphens: auto;
}

@media (min-width: 640px) { body.rehab-reimagined .rehab-hero__h1 { font-size: 3.4rem; } }
@media (min-width: 1024px) { body.rehab-reimagined .rehab-hero__h1 { font-size: 4rem; } }

body.rehab-reimagined .rehab-hero__body {
	margin: 1.5rem 0 0;
	max-width: 36rem;
	font-size: 1.125rem;
	line-height: 1.625;
	color: var(--imani-ink-80);
}

body.rehab-reimagined .rehab-hero__cta {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: fit-content;
	max-width: 100%;
	margin-top: 2.25rem;
}

body.rehab-reimagined .rehab-hero__cta .rehab-btn {
	display: block;
}

body.rehab-reimagined .rehab-hero__cta-helper {
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--imani-cta);
}

/* USPs: a hairline, then two columns with the petal marker. */
body.rehab-reimagined .rehab-hero__trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 2.5rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rehab-color-line);
	max-width: none;
}

body.rehab-reimagined .rehab-hero__trust-item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	min-width: 0;
	font-family: var(--rehab-font-body);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--imani-ink-80);
	overflow-wrap: break-word;
	hyphens: auto;
}

body.rehab-reimagined .rehab-hero__trust-item::before {
	content: "";
	flex: none;
	color: inherit;
	width: 0.72em;
	height: 0.72em;
	margin-top: 0.28em;
	background: currentColor;
	-webkit-mask: var(--imani-petal) center / contain no-repeat;
	mask: var(--imani-petal) center / contain no-repeat;
}

/* Media: 3/4, capped at 60vh, the swept 100px corner; decorative square. */
body.rehab-reimagined .rehab-hero__media {
	display: flex;
	justify-content: flex-end;
}

body.rehab-reimagined .rehab-hero__image-wrap {
	width: 100%;
	aspect-ratio: 4 / 5;
	max-height: 70vh;
	height: auto;
	/* The 100px swept corner only: the other three are square since the
	   Lovable update of Oct 2026 (lightbox button rounded-none, REH-335). */
	position: relative;
	z-index: 1;
	border-radius: 100px 0 0 0;
	overflow: hidden;
}

@media (min-width: 1024px) {
	body.rehab-reimagined .rehab-hero__image-wrap { aspect-ratio: 3 / 4; max-height: 60vh; }
}

body.rehab-reimagined .rehab-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.82) brightness(1.04) contrast(0.96);
}

body.rehab-reimagined .rehab-hero__overlay {
	display: none;
}

body.rehab-reimagined .rehab-hero__deco {
	z-index: 0;
	left: -1rem;
	bottom: -1rem;
	width: 6rem;
	height: 6rem;
	border: 1px solid var(--rehab-color-line);
	background: none;
}

/* The play control: a 64px white disc, teal triangle (VideoLightbox). */
body.rehab-reimagined .rehab-hero__play {
	background: none;
	box-shadow: none;
	border: 0;
}

body.rehab-reimagined .rehab-hero__play svg {
	box-sizing: border-box;
	width: 4rem;
	height: 4rem;
	padding: 1.125rem 0.875rem 1.125rem 1.375rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	fill: var(--imani-cta);
	color: var(--imani-cta);
}

body.rehab-reimagined .rehab-video-card__play {
	width: 4rem;
	height: 4rem;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: none;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

body.rehab-reimagined .rehab-video-card__play svg {
	width: 1.75rem;
	height: 1.75rem;
	margin-left: 0.25rem;
	fill: var(--imani-cta);
	color: var(--imani-cta);
}

/* No gradient over the poster (the prototype shows it clean). */
body.rehab-reimagined .rehab-video-card__thumb::after {
	content: none;
}

body.rehab-reimagined .rehab-video-card__thumb {
	border-radius: 0;
	overflow: hidden;
}

/* ---- Logo strip (LogoStrip.tsx): one centered row ---------------------------------- */

body.rehab-reimagined .rehab-spr .rehab-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2rem 2.5rem;
	max-width: 56rem;
}

@media (min-width: 768px) {
	body.rehab-reimagined .rehab-spr .rehab-container { column-gap: 3.5rem; }
}

/* The Google badge sits in the logos' row, as LogoStrip's `before` slot. */
body.rehab-reimagined .rehab-spr__scores {
	display: contents;
}

body.rehab-reimagined .rehab-spr__score {
	padding: 0;
}

body.rehab-reimagined .rehab-spr__scores:not(:has(.rehab-elfsight > *)) {
	display: none;
}

body.rehab-reimagined .rehab-spr__logos {
	display: contents;
}

body.rehab-reimagined .rehab-spr__logo img {
	height: 3rem;
	width: auto;
	max-width: 10rem;
	object-fit: contain;
	opacity: 0.75;
	filter: grayscale(1);
}

/* ---- Team carousel (TeamGrid.tsx) --------------------------------------------------- */

body.rehab-reimagined .rehab-team-grid__head {
	max-width: 64rem;
	margin: 0 auto;
}

body.rehab-reimagined .rehab-team-grid__viewport {
	max-width: 72rem;
	margin: 3rem auto 0;
}

body.rehab-reimagined .rehab-team-grid__grid {
	gap: 1rem;
	padding: 0 0.5rem;
	scroll-padding-inline: 0.5rem;
}

/* w-1/2 → sm 1/3 → md 1/4 → lg 1/5 */
body.rehab-reimagined .rehab-team-grid--carousel .rehab-team-card {
	flex: 0 0 calc((100% - 1rem) / 2);
	width: calc((100% - 1rem) / 2);
}

@media (min-width: 640px) {
	body.rehab-reimagined .rehab-team-grid--carousel .rehab-team-card { flex-basis: calc((100% - 2rem) / 3); width: calc((100% - 2rem) / 3); }
}

@media (min-width: 768px) {
	body.rehab-reimagined .rehab-team-grid--carousel .rehab-team-card { flex-basis: calc((100% - 3rem) / 4); width: calc((100% - 3rem) / 4); }
}

@media (min-width: 1024px) {
	body.rehab-reimagined .rehab-team-grid--carousel .rehab-team-card { flex-basis: calc((100% - 4rem) / 5); width: calc((100% - 4rem) / 5); }
}

/* The design's carousels have no pager dots. */
body.rehab-reimagined .rehab-page-content .rehab-carousel-dots {
	display: none;
}

body.rehab-reimagined .rehab-team-grid--carousel .rehab-team-card,
body.rehab-reimagined .rehab-team-grid--carousel .rehab-team-card__photo {
	border: 0;
	box-shadow: none;
}

body.rehab-reimagined .rehab-team-grid--carousel .rehab-team-card__photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	height: auto;
	border-radius: 0;
}

/* Hover caption: name text-base semibold, role xs uppercase tracking-wider. */
body.rehab-reimagined .rehab-team-grid--carousel .rehab-team-card__name {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
}

body.rehab-reimagined .rehab-team-grid--carousel .rehab-team-card__role {
	font-family: var(--rehab-font-body);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1rem;
	letter-spacing: 0.05em;
}

/* Arrows: bare 40px discs, teal chevron, 48px outside the track. */
body.rehab-reimagined :is(.rehab-team-grid__arrow, .rehab-gallery__arrow, .rehab-cards-grid__arrow) {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: none;
	color: var(--imani-cta);
}

body.rehab-reimagined :is(.rehab-team-grid__arrow, .rehab-gallery__arrow, .rehab-cards-grid__arrow) svg {
	width: 1.25rem;
	height: 1.25rem;
	stroke-width: 2;
}

/* Arrows 16px inside the track (md:left-4), outside it (lg:-left-12) only
   where the page has the room: the prototype's -48px at 1024 pushes the next
   arrow off-screen, which its overflow-x: clip hides by cutting it off. */
@media (min-width: 768px) {
	body.rehab-reimagined :is(.rehab-team-grid__arrow--prev, .rehab-gallery__arrow--prev, .rehab-cards-grid__arrow--prev) { left: 1rem; }
	body.rehab-reimagined :is(.rehab-team-grid__arrow--next, .rehab-gallery__arrow--next, .rehab-cards-grid__arrow--next) { right: 1rem; }
}

@media (min-width: 1280px) {
	body.rehab-reimagined :is(.rehab-team-grid__arrow--prev, .rehab-gallery__arrow--prev, .rehab-cards-grid__arrow--prev) { left: -3rem; }
	body.rehab-reimagined :is(.rehab-team-grid__arrow--next, .rehab-gallery__arrow--next, .rehab-cards-grid__arrow--next) { right: -3rem; }
}

/* ---- Founder quote (FounderQuote.tsx) ------------------------------------------------
   The quote spans the 4xl measure; under it, a 2xl row: 220px portrait, then
   the name line and the text. The block's content column is unwrapped
   (display: contents) so its parts can sit in that grid. */

body.rehab-reimagined .rehab-founder .rehab-container {
	/* max-w-4xl includes the gutters (content 848px). */
	max-width: 56rem;
}

/* Below sm: one centered column — quote, portrait, name, text. */
body.rehab-reimagined .rehab-founder__grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	text-align: center;
}

body.rehab-reimagined .rehab-founder__content {
	display: contents;
}

body.rehab-reimagined .rehab-founder__quote {
	order: 1;
	margin: 0 0 3.5rem;
	padding: 0;
	border: 0;
	font-size: 1.35rem;
	font-style: italic;
	line-height: 1.45;
	text-align: center;
	color: var(--rehab-color-fg);
}

body.rehab-reimagined .rehab-founder__quote::before { content: "\201C"; }
body.rehab-reimagined .rehab-founder__quote::after { content: "\201D"; }

body.rehab-reimagined .rehab-founder__media { order: 2; width: 220px; margin: 0; }
body.rehab-reimagined .rehab-founder__signature { order: 3; margin: 2.5rem 0 0; padding: 0; border: 0; }
body.rehab-reimagined .rehab-founder__body { order: 4; }

body.rehab-reimagined .rehab-founder__photo {
	display: block;
	width: 220px;
	height: auto;
	aspect-ratio: auto;
	border-radius: 0;
	filter: none;
}

@media (min-width: 640px) {
	body.rehab-reimagined .rehab-founder__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 220px 2.5rem minmax(0, 412px) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		align-items: start;
		text-align: left;
	}

	body.rehab-reimagined .rehab-founder__quote { grid-column: 1 / -1; grid-row: 1; font-size: 1.6rem; }
	body.rehab-reimagined .rehab-founder__media { grid-column: 2; grid-row: 2 / 4; }
	body.rehab-reimagined .rehab-founder__signature { grid-column: 4; grid-row: 2; margin: 0; }
	body.rehab-reimagined .rehab-founder__body { grid-column: 4; grid-row: 3; }
}

body.rehab-reimagined .rehab-founder__name {
	margin: 0;
	font-family: var(--imani-font-reading);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--rehab-color-fg);
}

body.rehab-reimagined .rehab-founder__role:empty {
	display: none;
}

body.rehab-reimagined .rehab-founder__body {
	margin: 1rem 0 0;
	font-size: 0.95rem;
	line-height: 1.625;
	color: var(--imani-ink-75);
}

/* ---- Reviews (the Elfsight carousel under a centered heading) ------------------------- */

body.rehab-reimagined .rehab-review-sources__head {
	max-width: 48rem;
	margin: 0 auto;
}

body.rehab-reimagined .rehab-review-sources__heading {
	line-height: 1.375;
}

body.rehab-reimagined .rehab-review-sources__widget {
	margin-top: 3rem;
}

/* ---- Quote cards (QuoteCards.tsx) ----------------------------------------------------- */

body.rehab-reimagined .rehab-testimonials__header {
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
}

body.rehab-reimagined .rehab-testimonials__header .rehab-heading {
	margin: 1rem 0 0;
	font-size: 1.9rem;
	line-height: 1.5;
}

@media (min-width: 640px) {
	body.rehab-reimagined .rehab-testimonials__header .rehab-heading { font-size: 2.4rem; }
}

body.rehab-reimagined .rehab-testimonials__grid {
	margin-top: 3rem;
	gap: 1.5rem;
	grid-auto-rows: 1fr;
}

body.rehab-reimagined .rehab-testimonial {
	display: flex;
	flex-direction: column;
	gap: 0;
	height: 100%;
	padding: 2rem;
	background: #FFFFFF;
	border: 1px solid var(--rehab-color-line);
	border-radius: 0;
	box-shadow: none;
}

body.rehab-reimagined .rehab-testimonial.is-style-featured {
	border-color: var(--imani-rose);
}

body.rehab-reimagined .rehab-testimonial__label {
	margin: 0 0 1.25rem;
	font-family: var(--rehab-font-body);
	font-size: 0.68rem;
	line-height: 1.6;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--imani-rose-deep);
}

body.rehab-reimagined .rehab-testimonial__quote {
	flex: 1;
	margin: 0;
	font-family: var(--rehab-font-body);
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.625;
	color: rgba(30, 30, 30, 0.85);
}

body.rehab-reimagined .rehab-testimonial__quote::before,
body.rehab-reimagined .rehab-testimonial__quote::after {
	content: none;
}

body.rehab-reimagined .rehab-testimonial__author {
	margin-top: 1.5rem;
	padding: 0;
	border: 0;
}

body.rehab-reimagined .rehab-testimonial__name {
	margin: 0;
	font-family: var(--rehab-font-body);
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(30, 30, 30, 0.65);
}

body.rehab-reimagined .rehab-testimonial__role:empty {
	display: none;
}

/* "Lees alle succesverhalen" is the section's own action (mt-10), not a band. */
body.rehab-reimagined .rehab-page-content .rehab-testimonials:has(+ .rehab-cta-band--none) {
	padding-bottom: 0;
}

body.rehab-reimagined .rehab-page-content .rehab-cta-band--none {
	padding: 2.5rem 0 2.25rem;
}

@media (min-width: 1024px) {
	body.rehab-reimagined .rehab-page-content .rehab-cta-band--none { padding-bottom: 3.5rem; }
}

body.rehab-reimagined .rehab-cta-band--none .rehab-cta-band__actions {
	margin: 0;
}

/* ---- Clinic photos (CardsCarousel.tsx, 3 visible, lightbox) --------------------------- */

body.rehab-reimagined .rehab-gallery__header {
	max-width: none;
	margin: 0;
	text-align: left;
}

body.rehab-reimagined .rehab-gallery__carousel {
	max-width: 72rem;
	margin: 3rem auto 0;
}

body.rehab-reimagined :is(.rehab-gallery__carousel, .rehab-gallery__track) {
	background: none;
}

body.rehab-reimagined .rehab-gallery__track {
	gap: 0;
	padding: 0;
}

/* w-full → sm 1/2 → md 1/3 */
body.rehab-reimagined .rehab-gallery--carousel .rehab-gallery__item {
	flex: 0 0 100%;
	width: 100%;
	padding: 0 0.75rem;
	margin: 0;
}

@media (min-width: 640px) {
	body.rehab-reimagined .rehab-gallery--carousel .rehab-gallery__item { flex-basis: 50%; width: 50%; }
}

@media (min-width: 768px) {
	body.rehab-reimagined .rehab-gallery--carousel .rehab-gallery__item { flex-basis: 33.3333%; width: 33.3333%; }
}

body.rehab-reimagined .rehab-gallery--carousel .rehab-gallery__zoom {
	/* The 1px border sits around a 16:10 image (CardsCarousel), so the ratio
	   is on the image, not the bordered box (0.75px taller, as the design). */
	display: block;
	width: 100%;
	aspect-ratio: auto;
	height: auto;
	padding: 0;
	border: 1px solid var(--rehab-color-line);
	border-radius: 0;
	overflow: hidden;
}

body.rehab-reimagined .rehab-gallery--carousel .rehab-gallery__zoom img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0;
}

/* ---- Steps (Steps.tsx) ------------------------------------------------------------ */

body.rehab-reimagined .rehab-steps__head {
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
}

body.rehab-reimagined .rehab-steps__heading {
	margin: 1rem 0 0;
	font-size: 2.1rem;
	line-height: 1.5;
}

@media (min-width: 640px) {
	body.rehab-reimagined .rehab-steps__heading { font-size: 2.7rem; }
}

body.rehab-reimagined .rehab-steps--flow .rehab-steps__flow-wrap {
	margin-top: 3.5rem;
}

@media (min-width: 1024px) {
	body.rehab-reimagined .rehab-steps--flow .rehab-steps__flow-wrap { margin-top: 4rem; }
}

body.rehab-reimagined .rehab-steps--flow .rehab-steps__num {
	margin-bottom: 1.5rem;
	border-color: rgba(46, 110, 136, 0.2);
	font-family: var(--rehab-font-body);
	font-size: 1.1rem;
	color: var(--imani-cta);
}

body.rehab-reimagined .rehab-steps--flow .rehab-steps__title {
	margin: 0 0 0.5rem;
	font-size: 1.35rem;
	font-weight: 500;
	line-height: 1.5;
	overflow-wrap: break-word;
	hyphens: auto;
}

body.rehab-reimagined .rehab-steps--flow .rehab-steps__text {
	font-size: 0.92rem;
	line-height: 1.625;
	color: rgba(30, 30, 30, 0.7);
}

body.rehab-reimagined .rehab-steps__text a {
	color: var(--imani-cta);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Mobile: the copy sits 8px lower than the marker (pt-2), titles mb-2. */
@media (max-width: 1023px) {
	body.rehab-reimagined .rehab-steps--flow .rehab-steps__body {
		padding-top: 0.5rem;
	}

	body.rehab-reimagined .rehab-steps--flow .rehab-steps__title {
		margin: 0 0 0.5rem;
	}

	body.rehab-reimagined .rehab-steps--flow .rehab-steps__num {
		margin-bottom: 0;
	}

	/* Icon steps (timeline): bare icons on a solid hairline. */
	body.rehab-reimagined .rehab-steps--flow .rehab-steps__num--icon {
		border: 0;
		border-radius: 0;
	}

	body.rehab-reimagined .rehab-steps--flow:has(.rehab-steps__num--icon) .rehab-steps__step:not(:last-child)::before {
		width: 1px;
		background: var(--rehab-color-line);
	}
}

/* Numbered steps read 1, 2, 3 (the block prints 01, 02, 03). */
body.rehab-reimagined .rehab-steps--flow .rehab-steps__list {
	counter-reset: imani-step;
}

body.rehab-reimagined .rehab-steps--flow .rehab-steps__step {
	counter-increment: imani-step;
	padding-bottom: 0;
	row-gap: 0;
}

body.rehab-reimagined .rehab-steps--flow .rehab-steps__num:not(.rehab-steps__num--icon) {
	font-size: 0;
}

body.rehab-reimagined .rehab-steps--flow .rehab-steps__num:not(.rehab-steps__num--icon)::after {
	content: counter(imani-step);
	font-size: 1.1rem;
}

@media (min-width: 1024px) {
	body.rehab-reimagined .rehab-steps--flow .rehab-steps__num {
		margin-bottom: 1.5rem;
	}

	body.rehab-reimagined .rehab-steps--flow .rehab-steps__title {
		margin-bottom: 0.75rem;
	}

	body.rehab-reimagined .rehab-steps--flow .rehab-steps__list {
		gap: 1.5rem;
	}

	/* Icon steps = the "timeline" variant: bare icons on one straight hairline
	   from 10% to 10%, no circles, no curve. */
	body.rehab-reimagined .rehab-steps--flow:has(.rehab-steps__num--icon) .rehab-steps__curve {
		display: none;
	}

	body.rehab-reimagined .rehab-steps--flow:has(.rehab-steps__num--icon) .rehab-steps__flow-wrap {
		margin-top: 4rem;
	}

	body.rehab-reimagined .rehab-steps--flow:has(.rehab-steps__num--icon) .rehab-steps__list {
		position: relative;
	}

	body.rehab-reimagined .rehab-steps--flow:has(.rehab-steps__num--icon) .rehab-steps__list::before {
		content: "";
		position: absolute;
		top: 36px;
		left: 10%;
		right: 10%;
		height: 1px;
		background: var(--rehab-color-line);
	}

	body.rehab-reimagined .rehab-steps--flow .rehab-steps__num--icon {
		border: 0;
		border-radius: 0;
	}

	/* Number steps = the "curve" variant: one arc from step 1 to 3 through the
	   raised middle step. */
	body.rehab-reimagined .rehab-steps--flow:not(:has(.rehab-steps__num--icon)) .rehab-steps__curve {
		display: none;
	}

	body.rehab-reimagined .rehab-steps--flow:not(:has(.rehab-steps__num--icon)) .rehab-steps__flow-wrap::before {
		content: "";
		position: absolute;
		top: 36px;
		left: 0;
		width: 100%;
		height: 72px;
		pointer-events: none;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 72' preserveAspectRatio='none'%3E%3Cpath d='M 200 36 C 340 36, 400 8, 600 8 S 860 36, 1000 36' stroke='%232E6E88' stroke-width='1.5' stroke-opacity='0.35' stroke-linecap='round' stroke-dasharray='8 6' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	}

	body.rehab-reimagined .rehab-steps--flow:not(:has(.rehab-steps__num--icon)) .rehab-steps__step:nth-child(2) {
		margin-top: -1.5rem;
	}
}

/* ---- Text + image (TextImageSection.tsx) -------------------------------------------- */

body.rehab-reimagined .rehab-feature-split__grid {
	align-items: center;
	gap: 3rem;
}

@media (min-width: 1024px) {
	body.rehab-reimagined .rehab-feature-split__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4rem;
	}
}

/* Below lg the design stacks the copy ABOVE the image, whichever side the
   image takes on desktop (TextImageSection: copy first in the DOM, lg:order
   only from 1024px). The block stacks image-first and only below 980px. */
@media (max-width: 1023.98px) {
	body.rehab-reimagined .rehab-feature-split__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	body.rehab-reimagined .rehab-feature-split__media {
		order: 2;
	}
}

body.rehab-reimagined .rehab-feature-split__media {
	aspect-ratio: 4 / 3;
	height: auto;
	border-radius: 0;
	overflow: hidden;
}

body.rehab-reimagined .rehab-feature-split__media img {
	width: 100%;
	height: 100%;
	/* The shared layer's 480px floor (Anker's squared crop) pushed the photo
	   past the 4:3 frame and cropped it off-centre (REH-343 pixel pass). */
	min-height: 0;
	object-fit: cover;
	border-radius: 0;
}

body.rehab-reimagined .rehab-feature-split__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

body.rehab-reimagined .rehab-feature-split__heading {
	margin: 1rem 0 0;
	font-size: 1.9rem;
	line-height: 1.375;
}

@media (min-width: 640px) {
	body.rehab-reimagined .rehab-feature-split__heading { font-size: 2.4rem; }
}

body.rehab-reimagined .rehab-feature-split__copy p:empty {
	display: none;
}

body.rehab-reimagined .rehab-feature-split__copy > p {
	margin: 1rem 0 0;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--imani-ink-80);
}

body.rehab-reimagined .rehab-feature-split__heading + p:empty + p,
body.rehab-reimagined .rehab-feature-split__heading + p:not(:empty) {
	margin-top: 1.25rem;
}

/* Bullets with the petal (Voor naasten). */
body.rehab-reimagined .rehab-feature-split__copy > ul {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--rehab-font-body);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--imani-ink-80);
}

body.rehab-reimagined .rehab-feature-split__copy > ul li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
}

body.rehab-reimagined .rehab-feature-split__copy > ul li + li {
	margin-top: 0.625rem;
}

body.rehab-reimagined .rehab-feature-split__copy > ul li::before {
	content: "";
	position: static;
	flex: none;
	width: 0.72em;
	height: 0.72em;
	margin-top: 0.28em;
	border-radius: 0;
	background: currentColor;
	-webkit-mask: var(--imani-petal) center / contain no-repeat;
	mask: var(--imani-petal) center / contain no-repeat;
}

/* Button first, then its reassurance line in teal (CtaActions). */
body.rehab-reimagined .rehab-feature-split__cta {
	order: 1;
	margin-top: 2.25rem;
}

body.rehab-reimagined .rehab-feature-split__copy > p:has(+ .rehab-feature-split__cta) {
	order: 2;
	margin-top: 1rem;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--imani-cta);
}

/* ---- FAQ (Faq.tsx): 4xl measure, plus icon ----------------------------------------------- */

body.rehab-reimagined .rehab-faq .rehab-container {
	max-width: 56rem;
}

body.rehab-reimagined .rehab-faq__heading {
	margin: 0;
	font-size: 2.1rem;
	line-height: 1.5;
	text-align: center;
}

@media (min-width: 640px) {
	body.rehab-reimagined .rehab-faq__heading { font-size: 2.7rem; }
}

body.rehab-reimagined .rehab-faq__list {
	max-width: none;
	margin: 3rem 0 0;
	border-top: 1px solid var(--rehab-color-line);
}

body.rehab-reimagined .rehab-faq-item {
	padding: 1.25rem 0;
	border: 0;
	border-bottom: 1px solid var(--rehab-color-line);
}

body.rehab-reimagined .rehab-faq-item summary {
	gap: 1.5rem;
	padding: 0;
	font-family: var(--rehab-font-body);
	font-size: 1.08rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	color: var(--rehab-color-fg);
}

body.rehab-reimagined .rehab-faq-item summary::after,
body.rehab-reimagined .rehab-faq-item[open] summary::after {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	border: 0;
	transform: none;
	background: var(--imani-cta);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.rehab-reimagined .rehab-faq-item__answer {
	margin-top: 1rem;
	padding: 0;
	max-width: 48rem;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--imani-ink-75);
}

/* ---- Map (MapSection.tsx) ------------------------------------------------------------------ */

body.rehab-reimagined .rehab-map__grid {
	align-items: center;
	gap: 2rem;
}

@media (min-width: 1024px) {
	body.rehab-reimagined .rehab-map__grid {
		grid-template-columns: 1fr 1.6fr;
		gap: 3rem;
	}
}

body.rehab-reimagined .rehab-map__info {
	max-width: none;
}

body.rehab-reimagined .rehab-map .rehab-heading {
	margin: 0;
	font-size: 2.1rem;
	line-height: 1.5;
}

@media (min-width: 640px) {
	body.rehab-reimagined .rehab-map .rehab-heading { font-size: 2.7rem; }
}

body.rehab-reimagined .rehab-map__address {
	margin: 1.5rem 0 0;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--imani-ink-75);
}

body.rehab-reimagined .rehab-map__address a {
	display: block;
	font-family: var(--rehab-font-body);
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--imani-cta);
	text-decoration: underline;
	text-underline-offset: 4px;
}

body.rehab-reimagined .rehab-map__address br + a {
	margin-top: 2rem;
}

body.rehab-reimagined .rehab-map__address a + a {
	margin-top: 0.75rem;
}

body.rehab-reimagined .rehab-map__address br:has(+ a) {
	display: none;
}

body.rehab-reimagined .rehab-map__embed {
	aspect-ratio: 16 / 9;
	height: auto;
	border: 1px solid var(--rehab-color-line);
	border-radius: 0;
	background: #FFFFFF;
	overflow: hidden;
}

@media (min-width: 1024px) {
	body.rehab-reimagined .rehab-map__embed { aspect-ratio: 16 / 10; }
}

body.rehab-reimagined .rehab-map__embed iframe {
	width: 100%;
	height: 100%;
	filter: grayscale(1);
}

/* ---- Closing band (the homepage's last section) --------------------------------------------- */

body.rehab-reimagined .rehab-cta-band--cream .rehab-container {
	/* max-w-5xl since the Lovable update of Oct 2026 (REH-335): heading and
	   lede each on one line at desktop. */
	max-width: 64rem;
}

body.rehab-reimagined .rehab-cta-band--cream .rehab-cta-band__heading {
	font-size: 2.1rem;
	line-height: 1.375;
}

@media (min-width: 640px) {
	body.rehab-reimagined .rehab-cta-band--cream .rehab-cta-band__heading { font-size: 2.7rem; }
}

body.rehab-reimagined .rehab-cta-band--cream .rehab-cta-band__lede {
	max-width: 48rem;
	margin: 1.25rem auto 0;
	font-size: 1.05rem;
	line-height: 1.625;
	color: var(--imani-ink-80);
}

body.rehab-reimagined .rehab-cta-band--cream .rehab-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	width: fit-content;
	max-width: 100%;
	margin: 2.25rem auto 0;
}

body.rehab-reimagined .rehab-cta-band--cream .rehab-cta-band__actions .rehab-btn {
	display: block;
	flex: 1 1 auto;
	min-width: max-content;
}

body.rehab-reimagined .rehab-cta-band--cream .rehab-cta-band__helper {
	margin-top: 1.5rem;
}

/* ---- Header (Header.tsx) — brand-wide, the header is the same on every page ----
   h-20 + a hairline; 40px logo; nav links 0.95rem at ink .85, 32px apart;
   the phone at 500; the CTA .btn-cta px-5 py-3. */

.rehab-navbar {
	height: 81px;
	min-height: 0;
	gap: 1.5rem;
	border-bottom: 1px solid var(--rehab-color-line);
}

.rehab-navbar .rehab-navbar__brand img.custom-logo {
	max-height: none;
	height: 2.5rem;
	width: auto;
}

.rehab-navbar__menu {
	gap: 2rem;
}

.rehab-navbar__menu > li > a {
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(30, 30, 30, 0.85);
}

.rehab-navbar__actions {
	gap: 1.5rem;
}

.rehab-navbar__phone,
.rehab-navbar__phone-text {
	font-family: var(--rehab-font-body);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: normal;
	color: rgba(30, 30, 30, 0.85);
}

.rehab-navbar__actions .rehab-btn {
	padding: 0.75rem 1.25rem;
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.16em;
	box-shadow: var(--imani-shadow, 0 2px 6px rgba(30, 75, 93, 0.18));
}

/* ---- Footer (Footer.tsx) — brand-wide ----------------------------------------------
   pt-20 pb-10; grid 1.15fr + four columns, 48px apart; the brand column is logo,
   tagline, address (Lora); column heads 0.7rem/.18em at white .7; links
   0.95rem at white .85, 12px apart; a white/20 rule, then socials left and
   legal links right. The phone lives in the Contact column. */

.rehab-site-footer {
	padding: 5rem 0 2.5rem;
}

.rehab-site-footer__top {
	padding: 0;
}

.rehab-site-footer .rehab-container {
	padding-inline: 1.5rem;
}

.rehab-site-footer__row {
	gap: 3rem;
}

@media (min-width: 1024px) {
	.rehab-site-footer__row {
		grid-template-columns: 1.15fr repeat(4, minmax(0, 1fr));
	}
}

.rehab-site-footer__col--brand {
	display: block;
}

.rehab-site-footer .rehab-site-footer__logo .custom-logo {
	height: 2.5rem;
	max-height: none;
	width: auto;
}

.rehab-site-footer__tagline,
.rehab-site-footer__address {
	margin: 1.5rem 0 0;
	max-width: 20rem;
	font-family: var(--imani-font-reading);
	font-size: 0.98rem;
	font-style: normal;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.8);
}

.rehab-site-footer__address {
	font-size: 0.95rem;
}

.rehab-site-footer__phone-primary {
	display: none;
}

.rehab-site-footer__menu {
	gap: 0.75rem;
}

.rehab-site-footer__menu li:first-child a,
.rehab-site-footer__col-heading {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--rehab-font-body);
	font-size: 0.7rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.rehab-site-footer__menu a {
	/* 22.8px links 12px apart pass WCAG 2.5.8 by spacing (the parent's 36px
	   min-height is its own tap-target choice). */
	min-height: 0;
	padding: 0;
}

.rehab-site-footer__menu li:not(:first-child) a {
	font-family: var(--rehab-font-body);
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.rehab-site-footer__bottom {
	margin-top: 3.5rem;
	padding: 0;
	border: 0;
}

/* The rule spans the container, gutters included (border on .container-ah). */
.rehab-site-footer__bottom .rehab-container {
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.rehab-site-footer__bottom-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 0;
	border: 0;
	gap: 1.5rem;
	text-align: left;
}

@media (min-width: 768px) {
	.rehab-site-footer__bottom-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.rehab-site-footer__legal-menu {
	justify-content: flex-start;
}

.rehab-site-footer--socials-bottom .rehab-site-footer__socials {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.rehab-site-footer--socials-bottom .rehab-site-footer__socials a {
	display: flex;
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: rgba(255, 255, 255, 0.8);
}

.rehab-site-footer--socials-bottom .rehab-site-footer__socials svg {
	width: 1rem;
	height: 1rem;
}

.rehab-site-footer__legal-menu {
	gap: 0.5rem 1.25rem;
}

.rehab-site-footer__legal-menu a,
.rehab-site-footer--socials-bottom .rehab-site-footer__socials a {
	min-height: 0;
	min-width: 0;
	padding: 0;
}

.rehab-site-footer__legal-menu a {
	font-family: var(--rehab-font-body);
	font-size: 0.85rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
}

/* ---- Contact page --------------------------------------------------------------------
   Anker's two-column layout (REH-335, Darko: "like on Anker"): the block's own
   method cards, reassurance box, socials and form card. Only the brand type
   is applied: rose petal eyebrows, the heading at 500, the intro line in Lora. */

body.rehab-reimagined .rehab-contact-methods__eyebrow,
body.rehab-reimagined .rehab-contact-methods__form-eyebrow {
	font-family: var(--rehab-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--imani-rose-deep);
}

body.rehab-reimagined :is(.rehab-contact-methods__eyebrow, .rehab-contact-methods__form-eyebrow)::before {
	content: "";
	display: inline-block;
	width: 0.72em;
	height: 0.72em;
	margin-right: 0.5rem;
	vertical-align: baseline;
	background: currentColor;
	-webkit-mask: var(--imani-petal) center / contain no-repeat;
	mask: var(--imani-petal) center / contain no-repeat;
}

body.rehab-reimagined .rehab-contact-methods__lede {
	margin: 0.75rem 0 1.25rem;
	font-family: var(--imani-font-reading);
	font-size: 1rem;
	line-height: 1.625;
	color: var(--imani-ink-80);
}

/* Team page grid (no page design; the design's portrait treatment): sharp,
   borderless photos like the homepage carousel, name and role underneath. */
body.rehab-reimagined .rehab-team-grid--grid .rehab-team-card__photo {
	border: 0;
	border-radius: 0;
}

/* ---- Staging review fixes (REH-318) ------------------------------------------------
   Headings hyphenate only genuinely long words: the prototype's hyphens:auto
   split "be-handeling" and "Treat-ment" on pages the prototype never had,
   while a 25-letter word like "Borgstellingsovereenkomst" still needs it.
   The homepage headings never hyphenate either way. */
body.rehab-reimagined :is(h1, h2),
body.rehab-reimagined .rehab-hero__h1 {
	-webkit-hyphenate-limit-before: 5;
	-webkit-hyphenate-limit-after: 5;
	hyphenate-limit-chars: 12 5 5;
}

/* …except on the homepage, which the prototype does cover: at tablet widths its
   H1 breaks "Eetstoornisskli-niek" (browser default, 4 lines), and the limit
   above made it "Eetstoornis-kliniek" over 5 lines (REH-343 pixel pass). */
body.rehab-reimagined.home :is(h1, h2),
body.rehab-reimagined.home .rehab-hero__h1 {
	-webkit-hyphenate-limit-before: auto;
	-webkit-hyphenate-limit-after: auto;
	hyphenate-limit-chars: auto;
}

/* Hero CTA on one line, as the prototype's inline button (it may run past the
   text column into the gutter at 390px), wrapping only when even the viewport
   is too narrow for it. */
body.rehab-reimagined .rehab-hero__cta .rehab-btn {
	width: max-content;
	max-width: calc(100vw - 2rem);
}

/* …without widening the hero's grid track (the prototype's column stays put). */
body.rehab-reimagined .rehab-hero__grid > * {
	min-width: 0;
}

/* The open mobile menu is teal: the dark header logo becomes white there
   (no design — the prototype has no mobile menu). */
body.rehab-menu-open .rehab-navbar .rehab-navbar__brand img.custom-logo {
	filter: brightness(0) invert(1);
}

/* ---- Feedback round 1 (Darko, Oct 2026 — REH-335) -----------------------------------

   Phone number in the header: dark brand blue on hover (the prototype's
   hover:text-brand-dark). Brand-wide. */
.rehab-navbar__phone:is(:hover, :focus-visible),
.rehab-navbar__phone:is(:hover, :focus-visible) .rehab-navbar__phone-text {
	color: var(--imani-cta-hover);
}

/* Square image corners everywhere except the hero's swept corner (as Anker):
   article featured images, team profile portraits, blog index cards. */
body :is(.rehab-article__featured-image, .rehab-team-profile__portrait, .rehab-articles-index__card),
body :is(.rehab-article__featured-image, .rehab-team-profile__portrait, .rehab-articles-index__card) img {
	border-radius: 0;
}

/* Text cards without an image start at the top (the block centres them). */
body.rehab-reimagined .rehab-cards-grid .rehab-card__body {
	justify-content: flex-start;
}

/* No tinted ground behind the clinic photos. */
body.rehab-reimagined .rehab-gallery__item {
	background: none;
}

/* FAQ questions: no tinted ground, colour change or indent on hover
   (the prototype's summary has no hover state). */
body.rehab-reimagined .rehab-faq-item summary:hover {
	padding-inline: 0;
	background: none;
	color: var(--rehab-color-fg);
}

/* Intake form only: no rule under the first section title, which sits
   straight under the page heading. (The borgstelling form posts a `_form`
   field; the intake form does not.) */
.rehab-intake__form:not(:has(input[name="_form"])) > .rehab-intake__step:first-of-type > .rehab-intake__row:first-child > .rehab-intake__section:first-child {
	border-bottom: 0;
}

/* The address card's <address> is upright, like the other card values. */
body.rehab-reimagined .rehab-contact-method address.rehab-contact-method__value {
	font-style: normal;
}

/* Contact cards on phones: the e-mail address (the longest value) wrapped
   mid-word at 21px. Slightly smaller values and no decorative arrow keep it
   on one line down to 360px (REH-335). */
@media (max-width: 479px) {
	body.rehab-reimagined .rehab-contact-method__value {
		font-size: 1.05rem;
	}

	body.rehab-reimagined .rehab-contact-method__go {
		display: none;
	}
}

/* The chat bubble (REH-335) is cleared by the footer's bottom padding; the
   parent's extra right margin on the legal links is then redundant and moves
   them off the design's right edge. */
.rehab-site-footer--has-chat .rehab-site-footer__legal-menu {
	margin-right: 0;
}

/* ---- Feedback round 2 (Martin, Oct 2026 — REH-336) ----------------------------------

   One breadcrumb on every page: the article's (Martin's example,
   /eetstoornis/behandeling/medicatie/) — a full-width bar under the header
   with a soft hairline, 12px uppercase at .08em, links at weight 400 in
   ink .7, the current item in ink, a neutral "/" (the parent's separator was
   Diamond's olive). Three implementations: article, page, team profile. */

.rehab-article__crumb-sep,
.rehab-team-profile__crumb-sep,
.rehab-breadcrumb__list li + li::before {
	color: rgba(30, 30, 30, 0.3);
}

/* Pages (.rehab-breadcrumb) → the article bar's metrics. */
.rehab-breadcrumb {
	padding: 1.1rem 0 1rem;
	border-bottom-color: rgba(126, 173, 193, 0.15);
	font-weight: 400;
}

.rehab-breadcrumb__list,
.rehab-breadcrumb__list li {
	gap: 0.55rem;
}

.rehab-breadcrumb__list li + li::before {
	margin: 0;
	padding: 0;
}

.rehab-breadcrumb__list a,
.rehab-breadcrumb__list li {
	font-weight: 400;
}

/* Team profiles: the in-content crumb becomes the same full-width bar. */
.rehab-team-profile {
	padding-top: 0;
	overflow-x: clip;
}

.rehab-team-profile__crumb {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 2.5rem;
	/* +1px: the article bar's hairline is a border inside its height. */
	padding: 1.1rem 0 calc(1rem + 1px);
	font-family: var(--rehab-font-body);
	font-size: var(--rehab-breadcrumb-size);
	font-weight: 400;
	letter-spacing: var(--rehab-breadcrumb-tracking);
	text-transform: uppercase;
	color: rgba(30, 30, 30, 0.7);
}

.rehab-team-profile__crumb::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 100vw;
	height: 1px;
	margin-left: -50vw;
	background: rgba(126, 173, 193, 0.15);
}

.rehab-team-profile__crumb a {
	font-weight: 400;
	color: rgba(30, 30, 30, 0.7);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

/* The article crumb's hover: teal with an underline. */
.rehab-team-profile__crumb a:hover,
.rehab-breadcrumb__list a:hover {
	color: var(--imani-cta);
	border-bottom-color: currentColor;
}

.rehab-team-profile__crumb-sep {
	padding: 0;
	margin: 0;
}

.rehab-team-profile__crumb-current {
	font-weight: 400;
	color: var(--rehab-color-fg);
}

/* Article contents: numbered down the columns, not across the rows. */
@media (min-width: 640px) {
	.rehab-article__toc-list {
		display: block;
		columns: 2;
		column-gap: 2rem;
	}

	.rehab-article__toc-list > li {
		break-inside: avoid;
		margin-bottom: 0.25rem;
	}
}

/* Article reading copy is one face: Lora for the intro paragraph, the
   paragraphs and list items alike; headings stay Montserrat. */
.rehab-article__body :is(p, li),
.rehab-article__body > p:first-of-type {
	font-family: var(--imani-font-reading);
}

/* Team grid: room between the heading and the role filters (the carousel
   head's `margin: 0 auto` had zeroed it). */
body.rehab-reimagined .rehab-team-grid--grid .rehab-team-grid__head {
	margin-bottom: 2.5rem;
}

/* The fixed header is 81px at every width (h-20 + its 1px line). The parent's
   offset is 72px on phones / 84px on desktop, so content slid 9px under the
   header on phones and sat 3px low on desktop — breadcrumbs then started at
   different heights per page type (REH-336 screenshot review). */
:root,
html:root {
	--rehab-header-height: 81px;
}

@media (max-width: 767px) {
	main > .rehab-breadcrumb {
		margin-top: 0;
	}
}

/* In-content links under an article (REH-342): the contents box, unnumbered. */
.imani-article-links {
	margin: 2.5rem 0 0;
}

.imani-article-links + .imani-article-links {
	margin-top: 1.25rem;
}

.imani-article-links__list {
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.imani-article-links__list {
		columns: 2;
		column-gap: 2rem;
	}
}

.imani-article-links__list > li {
	break-inside: avoid;
	margin: 0;
}

.imani-article-links__link {
	display: inline-block;
	padding: 0.4rem 0;
	font-family: var(--rehab-font-body);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--rehab-warm-charcoal);
	text-decoration: underline;
	text-decoration-color: rgba(var(--rehab-soft-charcoal-rgb), 0.25);
	text-underline-offset: 0.2em;
}

.imani-article-links__link:hover {
	color: var(--rehab-sage-dark);
	text-decoration-color: currentColor;
}