/* ==========================================================================
   SCALE — OVER ONS pagina
   Bouwt voort op design-system.css + home.css (gedeelde componenten).
   Alleen about-* specifieke styling hier.
   ========================================================================== */


/* ==========================================================================
   0. ANKERPUNTEN — scroll-offset staat nu sitewide in home.css
   (body.sp-scope section[id] { scroll-margin-top }). Geldt automatisch voor
   #filosofie, #model, #waarden en #team. Hier dus niets meer nodig.
   ========================================================================== */


/* ==========================================================================
   1. HERO — iets compacter dan de homepage hero (geen full-height)
   ========================================================================== */

body.sp-scope .about-hero {
	min-height: 60vh !important;
	padding-top: clamp(7rem, 14vh, 10rem) !important;
	padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

@media (max-width: 768px) {
	body.sp-scope .about-hero {
		min-height: auto !important;
		padding-top: 140px !important;
	}
}


/* ==========================================================================
   2. OPRICHTINGSVERHAAL — 2-koloms (titel links, body rechts)
   ========================================================================== */

.about-story-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 900px) {
	.about-story-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.about-story-title {
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0;
}

/* Oprichtersfoto onder de kop: vult de lege ruimte naast het verhaal. */
.about-story-photo {
	margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
	max-width: 460px;
}

/* Deze foto heeft veel lucht boven de twee; strakker uitsnijden dan standaard. */
/* Vierkant maakte deze foto 460px hoog, waardoor hij ver onder de tekstkolom
   ernaast uitstak. Liggend 4/3 brengt hem terug naar ~345px, wat vrijwel gelijk
   loopt met de onderkant van het verhaal. De uitsnede op 50% houdt beide
   gezichten ruim in beeld. */
.sp-photo-frame.about-story-photo img {
	aspect-ratio: 4 / 3;
	object-position: center 50%;
}

@media (max-width: 899px) {
	.about-story-photo {
		max-width: 100%;
	}
}

.about-story-body .sp-body {
	margin: 0 0 var(--sp-space-5);
	color: var(--sp-text-muted);
	font-size: 1.0625rem;
}

.about-story-kicker {
	color: var(--sp-text) !important;
	font-weight: 500;
	border-left: 3px solid var(--sp-primary);
	padding-left: var(--sp-space-5);
	font-size: 1.125rem !important;
}


/* ==========================================================================
   3. FILOSOFIE — centered dark statement
   ========================================================================== */

.about-meta-center {
	justify-content: center;
	border-bottom: none;
	margin-bottom: var(--sp-space-6);
	padding-bottom: 0;
}

.about-philosophy-title {
	font-size: clamp(2.25rem, 5vw, 4rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.025em !important;
	margin: 0 0 var(--sp-space-8) !important;
}

.about-philosophy-body {
	max-width: 760px;
	margin: 0 auto;
}

.about-philosophy-body .sp-lead {
	margin-bottom: var(--sp-space-6);
}

.about-philosophy-sub {
	font-family: var(--sp-font-body);
	font-size: var(--sp-text-base);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}


/* ==========================================================================
   4. HET SCALE MODEL — checklist
   ========================================================================== */

.about-model-title {
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	letter-spacing: -0.02em;
	margin: 0 0 var(--sp-space-5);
}

.about-model-intro {
	max-width: 720px;
	margin: 0 0 var(--sp-space-12);
}

/* Schone card-lijst: losse kaarten met transparante tussenruimte.
   Geen grid-gap-met-achtergrond truc meer (gaf grijze balken + brak met wpautop). */
.about-model-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-3);
}

/* wpautop-defense: verberg lege <p>/<br> die WP tussen <li> kan injecteren */
.about-model-list > p,
.about-model-list > br {
	display: none !important;
}

.about-model-item {
	display: flex;
	align-items: center;
	gap: var(--sp-space-4);
	padding: var(--sp-space-5) var(--sp-space-6);
	background: var(--sp-white);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-lg);
	font-family: var(--sp-font-body);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--sp-text);
	transition: transform 0.3s var(--sp-ease-out), box-shadow 0.3s var(--sp-ease-out), border-color 0.3s var(--sp-ease-out);
}

.about-model-item:hover {
	transform: translateX(4px);
	box-shadow: var(--sp-shadow-md);
	border-color: var(--sp-red-200);
}

.about-model-item [data-lucide] {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	color: var(--sp-white);
	background: var(--sp-primary);
	border-radius: 50%;
	padding: 5px;
	stroke-width: 3;
	/* Verticaal gecentreerd t.o.v. de tekst — ook bij 2 regels (align-items:center
	   op de li doet het werk; geen top-margin meer die de centrering verstoort). */
}

.about-model-item strong {
	color: var(--sp-primary);
	font-weight: 600;
}

/* Rode variant ("Zo doen wij het"): rode achtergrond, witte header-tekst,
   teamfoto ernaast. De check-items blijven witte cards die eruit springen. */
body.sp-scope .about-model--red {
	background: linear-gradient(135deg, #4A0000 0%, #8B0000 55%, #A00505 100%);
}
body.sp-scope .about-model--red .about-model-intro {
	color: rgba(255, 255, 255, 0.9) !important;
}
body.sp-scope .about-model--red .home-section-num,
body.sp-scope .about-model--red .home-section-label {
	color: rgba(255, 255, 255, 0.92) !important;
}
body.sp-scope .about-model--red .home-section-meta::before,
body.sp-scope .about-model--red .home-section-num::after {
	background: rgba(255, 255, 255, 0.6) !important;
}
/* Zonder deze marge plakt de foto tegen de lijst eronder. Gold eerder alleen
   voor de rode variant; die is vervallen, dus nu voor het blok zelf. */
body.sp-scope .about-model-head {
	margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}
body.sp-scope .about-model--red .about-model-photo {
	box-shadow: 0 26px 64px -22px rgba(0, 0, 0, 0.55);
}


/* ==========================================================================
   5. HET TEAM — founder cards
   ========================================================================== */

.about-team-title {
	margin: 0 0 var(--sp-space-12);
}

.about-team-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-space-8);
}

@media (min-width: 900px) {
	.about-team-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.about-founder {
	background: linear-gradient(135deg, rgba(31, 0, 0, 0.5), rgba(20, 20, 22, 0.6));
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--sp-radius-xl);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	transition: transform 0.4s var(--sp-ease-out), border-color 0.4s var(--sp-ease-out);
}

.about-founder:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, 0.2);
}

.about-founder-photo {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--sp-red-500), var(--sp-red-700));
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--sp-space-5);
	border: 1px solid rgba(255, 255, 255, 0.15);
}

.about-founder-photo span {
	font-family: var(--sp-font-display);
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--sp-white);
	letter-spacing: 0.02em;
}

.about-founder-name {
	font-family: var(--sp-font-display);
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--sp-white);
	margin: 0 0 4px;
	letter-spacing: -0.01em;
}

.about-founder-role {
	font-family: var(--sp-font-body);
	font-weight: 600;
	font-size: var(--sp-text-sm);
	color: var(--sp-red-300);
	margin-bottom: var(--sp-space-4);
}

.about-founder-tags {
	font-family: var(--sp-font-body);
	font-size: var(--sp-text-xs);
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.5);
	padding-bottom: var(--sp-space-5);
	margin-bottom: var(--sp-space-5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	line-height: 1.5;
}

.about-founder-bio {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.1875rem;
	line-height: 1.4;
	color: var(--sp-white);
	margin: 0 0 var(--sp-space-5);
}

.about-founder-bio::before {
	content: "\201C";
	color: var(--sp-red-300);
}

.about-founder-bio::after {
	content: "\201D";
	color: var(--sp-red-300);
}

.about-founder-background {
	font-family: var(--sp-font-body);
	font-size: var(--sp-text-sm);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}


/* ==========================================================================
   6. ONZE WAARDEN — grid
   ========================================================================== */

.about-values-title {
	margin: 0 0 var(--sp-space-4);
}

.about-values-intro {
	max-width: 640px;
	margin: 0 0 var(--sp-space-12);
}

.about-values-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--sp-space-6);
}

.about-value {
	padding: var(--sp-space-6);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-lg);
	background: var(--sp-surface);
	transition: transform 0.3s var(--sp-ease-out), box-shadow 0.3s var(--sp-ease-out);
}

.about-value:hover {
	transform: translateY(-3px);
	box-shadow: var(--sp-shadow-md);
}

.about-value-icon {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--sp-radius-md);
	background: var(--sp-red-50);
	color: var(--sp-primary);
	margin-bottom: var(--sp-space-4);
}

.about-value-icon [data-lucide] {
	width: 24px;
	height: 24px;
	stroke-width: 1.75;
}

.about-value:hover .about-value-icon {
	background: var(--sp-primary);
	color: var(--sp-white);
}

.about-value-name {
	font-family: var(--sp-font-display);
	font-weight: 500;
	font-size: 1.375rem;
	color: var(--sp-text);
	margin: 0 0 var(--sp-space-2);
	letter-spacing: -0.01em;
}

.about-value-text {
	font-family: var(--sp-font-body);
	font-size: var(--sp-text-sm);
	line-height: 1.55;
	color: var(--sp-text-muted);
	margin: 0;
}


/* ==========================================================================
   6b. WAARDEN — dark variant met tagline + quote (Over ons v2)
   ========================================================================== */

/* 5 waarde-cards: 1 kolom (mobile) → 2 (tablet) → 5 naast elkaar (desktop). */
.about-values-grid-dark {
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.about-values-grid-dark {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1040px) {
	.about-values-grid-dark {
		grid-template-columns: repeat(5, 1fr);
		gap: var(--sp-space-4);
	}
	/* Compacter in 5-koloms zodat alle tekst past en niets afknipt. */
	.about-value-dark { padding: var(--sp-space-5) var(--sp-space-4); }
	.about-value-dark .about-value-icon { width: 42px; height: 42px; margin-bottom: var(--sp-space-3); }
	.about-value-dark .about-value-name { font-size: 1.0625rem; }
	.about-value-dark .about-value-tagline { font-size: 0.875rem; margin-bottom: var(--sp-space-3); }
	.about-value-dark .about-value-text { font-size: 0.8125rem; line-height: 1.5; }
	.about-value-dark .about-value-quote { font-size: 0.8125rem; }
}

.about-value-dark {
	background: linear-gradient(135deg, rgba(31, 0, 0, 0.4), rgba(20, 20, 22, 0.55));
	border: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	flex-direction: column;
}

.about-value-dark:hover {
	border-color: rgba(232, 85, 85, 0.3);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.about-value-dark .about-value-icon {
	background: rgba(232, 85, 85, 0.12);
	color: #E85555;
}

.about-value-dark:hover .about-value-icon {
	background: rgba(232, 85, 85, 0.22);
	color: #E85555;
}

.about-value-dark .about-value-name {
	color: var(--sp-white);
	margin-bottom: var(--sp-space-2);
	/* Iets kleiner dan de basis-naam (1.375rem) zodat de kernwaarde-cards
	   rustiger ogen en in de 5-koloms goed passen. */
	font-size: 1.1875rem;
}

/* Tagline — korte krachtige subtitel onder de naam */
.about-value-tagline {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--sp-red-300);
	margin: 0 0 var(--sp-space-4);
}

.about-value-dark .about-value-text {
	color: rgba(255, 255, 255, 0.68);
	flex: 1;
}

/* Punchy one-liner onderaan de card */
.about-value-quote {
	font-family: var(--sp-font-body);
	font-weight: 600;
	font-size: var(--sp-text-sm);
	line-height: 1.4;
	color: var(--sp-white);
	margin: var(--sp-space-5) 0 0;
	padding-top: var(--sp-space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}


/* ==========================================================================
   7. HET TEAM v2 — schaalbare member cards met bio + contact
   Voeg een teamlid toe door een <article class="about-member"> te kopiëren;
   de grid vult automatisch aan (2, 3, 4+ kaarten).
   ========================================================================== */

.about-team-v2 .about-team-title {
	margin: 0 0 var(--sp-space-12);
}

.about-members-grid {
	display: grid;
	/* Tot 3 kaarten naast elkaar op desktop. Met 2 founders nu → 2-op-rij,
	   netjes gecentreerd; voeg je een derde toe dan wordt het automatisch
	   3-op-een-rij. max-width voorkomt dat 2 kaarten te breed uitrekken. */
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: var(--sp-space-6);
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

.about-member {
	background: linear-gradient(135deg, var(--sp-paper) 0%, var(--sp-white) 100%);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-xl);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-4);
	transition: transform 0.4s var(--sp-ease-out), box-shadow 0.4s var(--sp-ease-out), border-color 0.4s var(--sp-ease-out);
}

.about-member:hover {
	transform: translateY(-4px);
	box-shadow: var(--sp-shadow-lg);
	border-color: var(--sp-red-200);
}

.about-member-photo {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--sp-red-500), var(--sp-red-700));
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 8px 24px rgba(139, 0, 0, 0.25);
}

.about-member-photo span {
	font-family: var(--sp-font-display);
	font-weight: 600;
	font-size: 1.75rem;
	color: var(--sp-white);
	letter-spacing: 0.02em;
}

/* Wanneer je een echte foto gebruikt: vervang de <span> door
   <img class="about-member-img" src="..." alt="Naam"> */
.about-member-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.about-member-name {
	font-family: var(--sp-font-display);
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--sp-text);
	margin: 0;
	letter-spacing: -0.01em;
}

.about-member-role {
	font-family: var(--sp-font-body);
	font-weight: 600;
	font-size: var(--sp-text-sm);
	color: var(--sp-primary);
	margin: -8px 0 0;
}

.about-member-bio {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.45;
	color: var(--sp-text);
	margin: 0;
	flex: 1;
}

.about-member-bio::before { content: "\201C"; color: var(--sp-primary); }
.about-member-bio::after  { content: "\201D"; color: var(--sp-primary); }

.about-member-contact {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-2);
	padding-top: var(--sp-space-5);
	border-top: 1px solid var(--sp-border);
}

.about-member-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-space-2);
	font-family: var(--sp-font-body);
	font-size: var(--sp-text-sm);
	color: var(--sp-text-muted);
	text-decoration: none;
	transition: color 0.25s var(--sp-ease-out);
	width: max-content;
	max-width: 100%;
}

.about-member-link:hover {
	color: var(--sp-primary);
}

.about-member-link [data-lucide],
.about-member-link svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--sp-primary);
	fill: currentColor;
}


/* ==========================================================================
   8. HET TEAM v3 — Staffing House stijl
   Grote foto als bovenkant van de card, naam + rol als overlay op de foto,
   uitklapbare quote (native <details>) en contact-rij eronder.
   De class .about-member-v3 staat op hetzelfde <article class="about-member">
   en overschrijft de v2 basis-stijlen hierboven.
   ========================================================================== */

body.sp-scope .about-member-v3 {
	padding: 0 !important;
	gap: 0 !important;
	overflow: hidden;
	background: var(--sp-white) !important;
}

/* --- Foto: full-bleed bovenkant van de card --- */
body.sp-scope .about-member-v3 .about-member-figure {
	position: relative;
	width: 100%;
	height: clamp(340px, 30vw, 460px);
	overflow: hidden;
}

body.sp-scope .about-member-v3 .about-member-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	border-radius: 0;
	transition: transform 0.8s var(--sp-ease-out);
}

body.sp-scope .about-member-v3:hover .about-member-img {
	transform: scale(1.04);
}

/* Foto-wissel: lachende foto wisselt naar de serieuze bij hover (i.p.v. quote) */
body.sp-scope .about-member-v3 .about-member-figure--swap .about-member-img {
	position: absolute;
	inset: 0;
	transition: opacity 0.55s var(--sp-ease-out), transform 0.8s var(--sp-ease-out);
}
body.sp-scope .about-member-v3 .about-member-img--b { opacity: 0; }
body.sp-scope .about-member-v3:hover .about-member-img--a { opacity: 0; }
body.sp-scope .about-member-v3:hover .about-member-img--b { opacity: 1; }

/* Geen rode lijn-hover op de kaart (border-kleur blijft neutraal) */
body.sp-scope .about-member-v3:hover {
	border-color: var(--sp-border) !important;
}

/* Gradient onderin de foto: houdt naam en functie leesbaar over het beeld. */
body.sp-scope .about-member-v3 .about-member-figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 42%, rgba(10, 10, 11, 0.82) 100%);
	pointer-events: none;
	transition: background 0.45s var(--sp-ease-out);
}
/* Bij hover werd het beeld extra donker gemaakt; dat hoorde bij de quote die
   toen omhoog kwam. Die quote is weg, dus het verdonkeren had geen functie meer
   en oogde als een zwarte waas over de foto. De gradient onderin blijft staan:
   die houdt naam en functie leesbaar. */

/* --- Overlay onderaan de foto: rood lijntje, (hover) quote, naam, rol --- */
body.sp-scope .about-member-v3 .about-member-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: clamp(1.25rem, 2.2vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Klein rood accentlijntje bovenaan de overlay */
body.sp-scope .about-member-v3 .about-member-caption::before {
	content: "";
	order: 0;
	display: block;
	width: 28px;
	height: 2px;
	background: var(--sp-red-300);
	margin-bottom: var(--sp-space-2);
}

/* Quote: standaard verborgen, popt OMHOOG (boven de naam) bij hover.
   order:1 zet hem boven naam/rol ongeacht DOM-volgorde; bottom-anchored
   overlay groeit naar boven binnen de foto, dus geen layout-shift. */
body.sp-scope .about-member-v3 .about-member-bio {
	order: 1;
	margin: 0;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	/* Flatsome geeft <blockquote> standaard een gekleurde (blauwe) linkerrand
	   + padding — die "blauwe lijn aan de zijkant" zetten we hier uit. */
	border: 0 !important;
	padding: 0 !important;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.92);
	/* Rustiger laten opkomen (was te snel): langere duur + zachte easing. */
	transition: max-height 0.7s var(--sp-ease-out),
		opacity 0.55s var(--sp-ease-out) 0.08s,
		margin 0.6s var(--sp-ease-out);
}
body.sp-scope .about-member-v3 .about-member-bio::before { content: "\201C"; color: var(--sp-red-300); }
body.sp-scope .about-member-v3 .about-member-bio::after  { content: "\201D"; color: var(--sp-red-300); }

body.sp-scope .about-member-v3 .about-member-name {
	order: 2;
	color: var(--sp-white);
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	margin: 0;
}

body.sp-scope .about-member-v3 .about-member-role {
	order: 3;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	font-size: var(--sp-text-sm);
	letter-spacing: 0.04em;
}

/* Hover (desktop): quote popt omhoog */
@media (hover: hover) {
	body.sp-scope .about-member-v3:hover .about-member-bio {
		max-height: 200px;
		opacity: 1;
		margin-bottom: var(--sp-space-3);
	}
}
/* Touch (geen hover): quote gewoon altijd tonen */
@media (hover: none) {
	body.sp-scope .about-member-v3 .about-member-bio {
		max-height: 200px;
		opacity: 1;
		margin-bottom: var(--sp-space-3);
	}
}

/* --- Body onder de foto --- */
body.sp-scope .about-member-v3 .about-member-body {
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 2.2vw, 1.75rem);
	gap: var(--sp-space-4);
}

/* --- Contact-rij: compacte pill-links naast elkaar --- */
body.sp-scope .about-member-v3 .about-member-contact {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: var(--sp-space-4);
}

body.sp-scope .about-member-v3 .about-member-link {
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-sm);
	padding: 7px 14px;
	font-size: 0.8125rem;
	color: var(--sp-text-muted);
	background: var(--sp-white);
	transition: color 0.25s var(--sp-ease-out),
		border-color 0.25s var(--sp-ease-out),
		background 0.25s var(--sp-ease-out);
}

body.sp-scope .about-member-v3 .about-member-link:hover {
	color: var(--sp-primary);
	border-color: var(--sp-red-200);
	background: var(--sp-red-50);
}

/* Lucide-iconen (mail/telefoon) zijn LIJN-iconen: niet vullen, anders wordt
   het een dichte rode blok die slecht leesbaar is. De LinkedIn-SVG heeft zelf
   fill="currentColor" in de markup, dus die blijft gevuld. */
body.sp-scope .about-member-link [data-lucide],
body.sp-scope .about-member-link svg.lucide {
	fill: none !important;
	stroke: currentColor;
}


/* ==========================================================================
   9. ONZE SCALERS — overzichtspagina
   Hergebruikt de about-member-v3 kaartstijl (grote foto + naam/rol-overlay +
   hover-quote), maar 4 naast elkaar. Compacte hero zoals de andere pagina's.
   ========================================================================== */

body.sp-scope .scalers-hero {
	min-height: 46vh !important;
	padding-top: clamp(6.5rem, 12vh, 9rem) !important;
	padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}
@media (max-width: 768px) {
	body.sp-scope .scalers-hero {
		min-height: auto !important;
		padding-top: 130px !important;
	}
}

body.sp-scope .scalers-section .about-team-title {
	margin: 0 0 var(--sp-space-12);
}

/* 4 kaarten naast elkaar op desktop → 2 op tablet → 1 op mobiel */
body.sp-scope .scalers-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-space-5);
}
@media (max-width: 1024px) {
	body.sp-scope .scalers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	body.sp-scope .scalers-grid { grid-template-columns: 1fr; }
}

/* In de 4-koloms iets compactere foto-hoogte dan op Over ons */
body.sp-scope .scalers-grid .about-member-v3 .about-member-figure {
	height: clamp(300px, 24vw, 380px);
}

/* wpautop-defense: verberg lege <p>/<br> die WP tussen de kaarten kan zetten */
body.sp-scope .scalers-grid > p,
body.sp-scope .scalers-grid > br { display: none !important; }


/* ==========================================================================
   FEEDBACK — OVER ONS (klant-ronde)
   Screen 3: filosofie-sectie zwart → rood, tekst uniform doorlopend
   Screen 4: waarden-sectie zwart → grijs, kaarten lichte homepage-stijl
   Screen 5: rustiger hover (geen kleur-flip); eyebrow gelijk aan homepage
   ========================================================================== */

/* --- Screen 3: FILOSOFIE → vol rood blok --- */
body.sp-scope .about-philosophy {
	background: linear-gradient(135deg, var(--sp-red-700) 0%, var(--sp-red-500) 55%, var(--sp-red-400) 100%) !important;
}
/* Eyebrow wit op rood (i.p.v. rood-op-rood) */
body.sp-scope .about-philosophy .home-section-label {
	color: var(--sp-white) !important;
}
body.sp-scope .about-philosophy .home-section-label::after {
	background: rgba(255, 255, 255, 0.7) !important;
}
/* Italic accent wit, zonder rode glow (anders onleesbaar op rood) */
body.sp-scope .about-philosophy .home-hero-italic {
	color: var(--sp-white) !important;
	-webkit-text-stroke: 0 !important;
	text-shadow: none !important;
	animation: none !important;
}
/* Tekst doorlopend gelijk qua grootte en stijl (geen grote lead + kleine sub) */
body.sp-scope .about-philosophy-body .sp-lead,
body.sp-scope .about-philosophy-sub {
	font-family: var(--sp-font-body) !important;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem) !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.92) !important;
	max-width: 720px;
	margin: 0 auto var(--sp-space-5) !important;
}
body.sp-scope .about-philosophy-body > :last-child {
	margin-bottom: 0 !important;
}

/* --- Screen 4: WAARDEN → lichtgrijs + lichte kaarten (homepage-stijl) --- */
body.sp-scope .about-values {
	background: var(--sp-ink-50) !important;
}
body.sp-scope .about-values .about-values-title {
	color: var(--sp-text) !important;
}
body.sp-scope .about-values .about-values-intro {
	color: var(--sp-text-muted) !important;
}
/* Eyebrow rood op grijs (zoals homepage) */
body.sp-scope .about-values .home-section-label {
	color: var(--sp-primary) !important;
}
body.sp-scope .about-values .home-section-label::after {
	background: var(--sp-primary) !important;
}
/* Kaarten van donker → licht */
body.sp-scope .about-values .about-value-dark {
	background: var(--sp-white) !important;
	border: 1px solid var(--sp-border) !important;
}
/* Screen 5: rustige hover — subtiel, geen kleur-flip */
body.sp-scope .about-values .about-value-dark:hover {
	border-color: var(--sp-red-200) !important;
	box-shadow: var(--sp-shadow-md) !important;
	transform: translateY(-3px);
}
body.sp-scope .about-values .about-value-dark .about-value-icon {
	background: var(--sp-red-50) !important;
	color: var(--sp-primary) !important;
}
body.sp-scope .about-values .about-value-dark:hover .about-value-icon {
	background: var(--sp-red-100) !important;
	color: var(--sp-primary) !important;
}
body.sp-scope .about-values .about-value-name {
	color: var(--sp-text) !important;
}
body.sp-scope .about-values .about-value-tagline {
	color: var(--sp-primary) !important;
}
body.sp-scope .about-values .about-value-text {
	color: var(--sp-text-muted) !important;
}
body.sp-scope .about-values .about-value-quote {
	color: var(--sp-text) !important;
	border-top-color: var(--sp-border) !important;
}

/* --- Screen 5: Flatsome-thema zet standaard een blauwe (#446084) hover-
   underline onder links/koppen die "uitschuift". Binnen onze scope uit. --- */
body.sp-scope a:not(.sp-btn):not(.about-member-link)::after {
	display: none !important;
}
body.sp-scope :focus-visible {
	outline-color: var(--sp-primary);
}

@media (max-width: 640px) {
	body.sp-scope .about-member-v3 .about-member-figure {
		height: 320px;
	}
}


/* ==========================================================================
   FEEDBACK — teamkaarten strak op een lijn
   De drie contactknoppen pasten net niet naast elkaar, waardoor LinkedIn naar
   een tweede regel viel en de kaarten ongelijk werden. Compactere knoppen en
   een LinkedIn-knop met alleen het icoon lossen dat op.
   ========================================================================== */

body.sp-scope .about-member-v3 .about-member-contact {
	flex-wrap: nowrap;
	align-items: center;
}

body.sp-scope .about-member-v3 .about-member-link {
	padding: 7px 10px;
	font-size: 0.8125rem;
	gap: 6px;
	white-space: nowrap;
	flex: 0 0 auto;
}

/* Alleen het icoon: de tekst "LinkedIn" is de breedste van de drie en het
   icoon is op zichzelf al onmiskenbaar. Het aria-label blijft de naam noemen,
   dus voor schermlezers verandert er niets. */
body.sp-scope .about-member-v3 .about-member-link--linkedin {
	padding: 7px 9px;
	font-size: 0;
	gap: 0;
}

body.sp-scope .about-member-v3 .about-member-link--linkedin svg {
	width: 17px;
	height: 17px;
}

/* De functietitel van Maxim liep over twee regels waardoor zijn kaart hoger
   werd dan de rest. Iets kleiner en strakker gespatieerd past hij op een regel,
   en staan alle kaarten weer gelijk. */
body.sp-scope .about-member-v3 .about-member-role {
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

@media (max-width: 600px) {
	body.sp-scope .about-member-v3 .about-member-role {
		white-space: normal;
	}
	body.sp-scope .about-member-v3 .about-member-contact {
		flex-wrap: wrap;
	}
}