/*
 * Basis voor alle blokken: tokens, container, secties, sectiekop, knoppen en grid.
 * Laadt op de site én in de editor. Kleuren en fonts komen uit theme.json.
 *
 * Achtergrondklassen staan in :where() (specificiteit 0), zodat blokstijlen ze altijd
 * kunnen overschrijven, los van de volgorde waarin WordPress de stylesheets laadt.
 */

:root {
	--cc-ink: var(--wp--preset--color--ink, #1d2232);
	--cc-brand: var(--wp--preset--color--brand, #b34b28);
	--cc-brand-dark: var(--wp--preset--color--brand-dark, #8f3b1e);
	--cc-accent: var(--wp--preset--color--accent, #ffd8b9);
	--cc-light: var(--wp--preset--color--light, #fdf4ec);
	--cc-sand: var(--wp--preset--color--sand, #faf8f5);
	--cc-peach: var(--wp--preset--color--peach, #fde0d6);
	--cc-line: var(--wp--preset--color--line, #eadccd);
	--cc-line-strong: #e0d3c4;
	--cc-muted: var(--wp--preset--color--muted, #525b6b);
	--cc-text-2: #3b4453;
	--cc-muted-warm: #7a7268;
	--cc-white: var(--wp--preset--color--white, #fff);
	--cc-error: #b42318;
	--cc-error-bg: #fef3f2;
	--cc-success: #067647;
	--cc-success-bg: #ecfdf3;

	--cc-font-body: var(--wp--preset--font-family--body, "Nunito Sans", system-ui, sans-serif);
	--cc-font-heading: var(--wp--preset--font-family--heading, Manrope, system-ui, sans-serif);
	/* Lopende tekst iets voller dan normaal (400) (Nunito Sans is variabel: 200–800). */
	--cc-weight-body: 500;

	--cc-container: 1240px;
	--cc-gutter: clamp(1.25rem, 3vw, 2rem);
	--cc-gap: 1.5rem;
	--cc-gap-lg: clamp(2.5rem, 5vw, 4rem);
	--cc-radius: 4px;
	--cc-space-compact: clamp(3rem, 6vw, 4rem);
	--cc-space-normal: clamp(4.5rem, 9vw, 6.5rem);
	--cc-space-large: clamp(5.5rem, 11vw, 8rem);
}

/* Container */
.cc-container {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--cc-container) + 2 * var(--cc-gutter));
	margin-inline: auto;
	padding-inline: var(--cc-gutter);
}

/* Secties */
.cc-section {
	position: relative;
	box-sizing: border-box;
	padding-block: var(--cc-space-normal);
}

.cc-section *,
.cc-section *::before,
.cc-section *::after {
	box-sizing: border-box;
}

.cc-space-compact { padding-block: var(--cc-space-compact); }
.cc-space-large { padding-block: var(--cc-space-large); }
/* Sluit aan op de sectie erboven: geen ruimte boven, normale ruimte onder. */
.cc-space-flush-top { padding-top: 0; }
.cc-space-none { padding-block: 0; }

/* Navy secties op desktop compacter, zodat ze liefst in één scherm in beeld passen. */
@media (min-width: 900px) {
	.cc-section.cc-bg-dark {
		--cc-space-normal: clamp(3rem, 4.5vw, 4rem);
		--cc-space-large: clamp(3.5rem, 5.5vw, 4.5rem);
	}
}

:where(.cc-bg-white) { background: var(--cc-white); color: var(--cc-ink); }
:where(.cc-bg-light) { background: var(--cc-light); color: var(--cc-ink); }
:where(.cc-bg-sand) { background: var(--cc-sand); color: var(--cc-ink); }
:where(.cc-bg-peach) { background: var(--cc-peach); color: var(--cc-ink); }
:where(.cc-bg-dark) { background: var(--cc-ink); color: var(--cc-white); }
:where(.cc-bg-brand) { background: var(--cc-brand); color: var(--cc-white); }

:where(.cc-bg-dark) a:not(.cc-button),
:where(.cc-bg-brand) a:not(.cc-button) {
	color: inherit;
}

/* Tweekleurige koppen: tekst met de opmaak "Accentkleur" in de editor */
.cc-accent {
	color: var(--cc-brand);
}

:where(.cc-bg-dark) .cc-accent,
:where(.cc-bg-brand) .cc-accent,
.cc-hero--background .cc-accent {
	color: var(--cc-accent);
}

/* Sectiekop */
.cc-section-header {
	max-width: 820px;
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.cc-section-header.is-centered {
	margin-inline: auto;
	text-align: center;
}

/* Navy secties op desktop: minder ruimte onder de kop. :where houdt de specificiteit laag, zodat blokken die de kopmarge zelf regelen voorgaan. */
@media (min-width: 900px) {
	:where(.cc-section.cc-bg-dark) .cc-section-header {
		margin-bottom: 2.5rem;
	}
}

/* Kop links, intro rechts. Geen rijafstand: de bovenkop staat met zijn eigen marge boven de titel, net als in een gewone kop. */
.cc-section-header.is-split {
	display: grid;
	gap: 0 clamp(2rem, 5vw, 4rem);
	align-items: start;
	max-width: none;
}

@media (min-width: 900px) {
	.cc-section-header.is-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.cc-section-header.is-split .cc-eyebrow {
		grid-column: 1 / -1;
	}

	.cc-section-header.is-split .cc-section-intro {
		margin-top: 0.5rem;
	}
}

.cc-eyebrow {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 0.75rem;
	color: var(--cc-brand);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Het vierkantje staat midden op de eerste regel (regelhoogte 18px, vierkant 11px). */
.cc-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	margin-top: 3.5px;
	background: currentColor;
}

.cc-section-header.is-centered .cc-eyebrow {
	justify-content: center;
}

.cc-section-title {
	margin: 0;
	font-family: var(--cc-font-heading);
	font-size: clamp(2.25rem, 4.4vw, 3.5rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

h1.cc-section-title {
	font-size: clamp(2.75rem, 6.2vw, 4.875rem);
	line-height: 0.98;
}

.cc-section-intro {
	max-width: 520px;
	margin-top: 1.5rem;
	color: var(--cc-muted);
	font-size: 1rem;
	line-height: 1.7;
}

.cc-section-header.is-centered .cc-section-intro {
	margin-inline: auto;
}

.cc-section-header.is-split .cc-section-intro {
	max-width: 440px;
}

.cc-section-intro p {
	margin: 0 0 0.75rem;
}

.cc-section-intro p:last-child {
	margin-bottom: 0;
}

:where(.cc-bg-dark) .cc-section-intro,
:where(.cc-bg-brand) .cc-section-intro {
	color: rgb(255 255 255 / 0.75);
}

/* Lopende tekst binnen blokken */
.cc-prose {
	color: var(--cc-muted);
	line-height: 1.75;
}

.cc-prose > * + * {
	margin-top: 1rem;
}

.cc-prose > :first-child {
	margin-top: 0;
}

.cc-prose ul,
.cc-prose ol {
	padding-left: 1.25rem;
}

/* Citaat in lopende tekst (bijv. in een klantverhaal) */
.cc-prose blockquote {
	margin: 2rem 0;
	padding-left: 1.5rem;
	border-left: 3px solid var(--cc-brand);
	color: var(--cc-ink);
	font-family: var(--cc-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
}

.cc-prose blockquote p {
	margin: 0;
}

.cc-prose blockquote cite {
	display: block;
	margin-top: 0.75rem;
	color: var(--cc-muted);
	font-family: var(--cc-font-body);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 600;
}

/* Knoppen */
.cc-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	align-items: center;
	margin-top: 2.25rem;
}

.cc-section-header.is-centered ~ .cc-buttons {
	justify-content: center;
}

.cc-section-footer {
	justify-content: flex-start; /* links onder de sectie, zoals in de designs */
	margin-top: 1.75rem;
}

.cc-button {
	display: inline-flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: center;
	padding: 1rem 1.625rem;
	border: 1px solid transparent;
	border-radius: 10px; /* design system */
	font-family: var(--cc-font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.cc-button--primary {
	background: var(--cc-brand);
	color: var(--cc-white);
}

.cc-button--primary:hover {
	background: var(--cc-brand-dark);
	color: var(--cc-white);
}

.cc-button--dark {
	border-radius: 999px;
	background: var(--cc-ink);
	color: var(--cc-white);
}

.cc-button--dark::after {
	content: "→";
}

.cc-button--dark:hover {
	background: var(--cc-brand);
	color: var(--cc-white);
}

.cc-button--secondary {
	border-color: var(--cc-ink);
	background: transparent;
	color: var(--cc-ink);
}

.cc-button--secondary:hover {
	background: rgb(29 34 50 / 0.06);
}

:where(.cc-bg-dark) .cc-button--secondary,
:where(.cc-bg-brand) .cc-button--secondary,
.cc-hero--background .cc-button--secondary {
	border-color: rgb(255 255 255 / 0.55);
	color: var(--cc-white);
}

:where(.cc-bg-dark) .cc-button--secondary:hover,
:where(.cc-bg-brand) .cc-button--secondary:hover,
.cc-hero--background .cc-button--secondary:hover {
	background: rgb(255 255 255 / 0.14);
}

/* Wit, bijv. op een donkere hero (Overstapweken). */
.cc-button--white {
	border-color: var(--cc-white);
	background: var(--cc-white);
	color: var(--cc-ink);
}

.cc-button--white:hover {
	border-color: var(--cc-accent);
	background: var(--cc-accent);
	color: var(--cc-ink);
}

/* Perzik op donker (Werken bij, hero). */
.cc-button--accent {
	border-color: var(--cc-accent);
	background: var(--cc-accent);
	color: var(--cc-ink);
}

.cc-button--accent:hover {
	border-color: var(--cc-white);
	background: var(--cc-white);
	color: var(--cc-ink);
}

/* Wit met afspeelteken: linkt een knop naar een mp4, YouTube of Vimeo, dan speelt de video in een venster (site.js). */
.cc-button--play {
	gap: 0.875rem;
	border-color: var(--cc-white);
	background: var(--cc-white);
	color: var(--cc-ink);
}

.cc-button--play::before {
	content: "";
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid var(--cc-brand);
}

.cc-button--play:hover {
	border-color: var(--cc-accent);
	background: var(--cc-accent);
	color: var(--cc-ink);
}

:where(.cc-bg-white, .cc-bg-sand, .cc-bg-light) .cc-button--play:not(.cc-hero--background *) {
	border-color: var(--cc-line-strong);
}

/* Videovenster */
.cc-video-dialog {
	width: min(1120px, calc(100vw - 2rem));
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.cc-video-dialog.is-vertical {
	width: min(420px, calc((100vh - 140px) * 0.5625), calc(100vw - 2rem));
}

.cc-video-dialog::backdrop {
	background: rgb(16 19 28 / 0.86);
}

.cc-video-dialog__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}

.cc-video-dialog.is-vertical .cc-video-dialog__frame {
	aspect-ratio: 9 / 16;
}

.cc-video-dialog__frame video,
.cc-video-dialog__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.cc-video-dialog__close {
	position: absolute;
	top: -3rem;
	right: 0;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cc-white);
	color: var(--cc-ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

/* Tekstlink met pijl en lijn eronder */
.cc-button--link,
.cc-link {
	display: inline-flex;
	gap: 0.75rem;
	align-items: center;
	padding: 0 0 0.5rem;
	border: 0;
	border-bottom: 1px solid var(--cc-brand); /* roest streep onder de tekst (design system) */
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
}

.cc-button--link::after,
.cc-link::after {
	content: "→";
}

.cc-button--link:hover,
.cc-link:hover {
	color: var(--cc-brand);
}

:where(.cc-bg-dark) .cc-button--link,
:where(.cc-bg-dark) .cc-link {
	border-bottom-color: currentColor;
	color: var(--cc-accent);
}

:where(.cc-bg-dark) .cc-button--link:hover,
:where(.cc-bg-dark) .cc-link:hover {
	color: var(--cc-white);
}

/* Decoratieve balken (optie bij hero en call-to-action) */
.cc-deco {
	position: absolute;
	z-index: 2;
	left: 18%;
	display: block;
	pointer-events: none;
}

.cc-deco--bottom {
	bottom: -14px;
	width: 240px;
	height: 14px;
	background: var(--cc-brand);
}

.cc-deco--bottom::after {
	content: "";
	position: absolute;
	bottom: 14px;
	left: 80px;
	width: 320px;
	height: 28px;
	background: var(--cc-ink);
}

.cc-deco--top {
	top: 0;
	left: 20%;
	width: 240px;
	height: 14px;
	background: var(--cc-brand);
}

@media (max-width: 699px) {
	.cc-deco {
		left: var(--cc-gutter);
		transform: scale(0.6);
		transform-origin: left center;
	}
}

/* Grid */
.cc-grid {
	display: grid;
	gap: var(--cc-gap);
}

@media (min-width: 700px) {
	.cc-grid--2,
	.cc-grid--3,
	.cc-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.cc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Iconen en score */
.cc-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	color: var(--cc-brand);
}

.cc-icon svg {
	width: 100%;
	height: 100%;
}

.cc-rating {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	align-items: center;
	margin: 0;
	font-size: 0.9375rem;
}

.cc-section-header.is-centered ~ .cc-rating {
	justify-content: center;
}

.cc-rating a {
	color: inherit;
	text-decoration: none;
}

.cc-rating__stars,
.cc-stars {
	color: var(--cc-brand);
	letter-spacing: 0.1em;
}

:where(.cc-bg-dark) .cc-stars,
:where(.cc-bg-dark) .cc-rating__stars {
	color: var(--cc-accent);
}

.cc-stars__off {
	opacity: 0.25;
}

/* Contactgegevens */
.cc-contact-list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-contact-list a {
	color: inherit;
}

/* Embeds */
.cc-embed iframe,
.cc-embed video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

.cc-embed video {
	border-radius: var(--cc-radius);
	background: var(--cc-ink);
}

/* Editor: secties over de volle breedte en zonder tussenruimte, net als op de site */
.editor-styles-wrapper .is-root-container > .cc-section {
	max-width: none;
	margin-block: 0;
}

/* Alleen zichtbaar in de editor */
.cc-editor-placeholder {
	display: grid;
	place-items: center;
	min-height: 200px;
	padding: 1rem;
	border: 2px dashed var(--cc-line-strong);
	color: var(--cc-muted);
	font-size: 0.875rem;
	text-align: center;
}

.cc-editor-empty {
	padding: 1rem;
	border: 1px dashed var(--cc-line-strong);
	color: var(--cc-muted);
	font-size: 0.875rem;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Auteursregel (in overzichten en paginakoppen, alleen als er een auteur is gekoppeld) */
.cc-byline {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	margin: 1rem 0 0;
	color: var(--cc-muted);
	font-size: 0.875rem;
}

.cc-byline strong {
	color: var(--cc-ink);
}

.cc-byline__photo {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	object-fit: cover;
}

.cc-byline__initials {
	display: grid;
	place-items: center;
	background: var(--cc-light);
	color: var(--cc-brand);
	font-size: 0.75rem;
	font-weight: 800;
}

/* Ondertitel onder een sectiekop */
.cc-section-tagline {
	margin: 0.75rem 0 0;
	color: var(--cc-brand);
	font-family: var(--cc-font-heading);
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

:where(.cc-bg-dark) .cc-section-tagline,
:where(.cc-bg-brand) .cc-section-tagline {
	color: var(--cc-accent);
}

/* Op donker: bovenkop en vierkantje in perzik (design system, Hero A en B). */
:where(.cc-bg-dark) .cc-eyebrow {
	color: var(--cc-accent);
}

/* Genummerd label: "02 — Financiële basis op orde" */
.cc-eyebrow.is-numbered,
.cc-card__label.is-numbered {
	display: flex;
	gap: 1rem;
	align-items: center;
	color: inherit;
}

.cc-eyebrow.is-numbered::before {
	display: none;
}

.cc-label-number {
	display: inline-flex;
	gap: 1rem;
	align-items: center;
	color: var(--cc-brand);
}

.cc-label-number::after {
	content: "";
	width: 2.5rem;
	height: 1px;
	background: var(--cc-brand);
}

/* Tweede decoratiebalk, rechtsonder in de sectie. */
.cc-deco--end {
	right: 22%;
	bottom: 0;
	left: auto;
	width: 240px;
	height: 14px;
	background: var(--cc-brand);
}

/* Telefoon: lange woorden in koppen afbreken in plaats van buiten beeld te laten vallen. */
@media (max-width: 599px) {
	.cc-section-title {
		overflow-wrap: break-word;
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 14 5 5;
	}

	h1.cc-section-title {
		font-size: clamp(2.25rem, 10.5vw, 2.75rem);
	}
}

/* Aanraakschermen: tekstlinks krijgen een groter aanraakvlak zonder dat ze er anders uitzien. */
@media (pointer: coarse) {
	.cc-button--link,
	.cc-link {
		position: relative;
	}

	.cc-button--link::before,
	.cc-link::before {
		content: "";
		position: absolute;
		inset: -0.625rem -0.25rem;
	}
}

/* Smalle telefoons: een lange knoptekst mag over twee regels lopen. */
@media (max-width: 479px) {
	.cc-button {
		max-width: 100%;
		text-align: center;
		white-space: normal;
	}
}

/* Kleinere sectietitel (optie "Grootte van de titel: normaal") */
.cc-title-medium .cc-section-title:not(h1) {
	font-size: clamp(2rem, 3.4vw, 2.625rem);
	line-height: 1.1;
}

.cc-title-small .cc-section-title:not(h1) {
	font-size: clamp(1.75rem, 2.8vw, 2.25rem);
	line-height: 1.12;
}

/* Donkere, rechte knop */
.cc-button--ink {
	background: var(--cc-ink);
	color: var(--cc-white);
}

.cc-button--ink:hover {
	background: var(--cc-brand);
	color: var(--cc-white);
}

:where(.cc-bg-dark) .cc-button--ink {
	background: var(--cc-white);
	color: var(--cc-ink);
}

/* Filterknoppen (pillen) boven een overzicht: Ons team per afdeling, vacatures per afdeling */
.cc-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-bottom: 3rem;
}

.cc-filters button,
.cc-filters a {
	display: inline-flex;
	align-items: center;
	padding: 0.6875rem 1.125rem;
	border: 1px solid #d9cfc3;
	border-radius: 999px;
	background: var(--cc-white);
	color: var(--cc-ink);
	font-family: var(--cc-font-body);
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.cc-filters a {
	text-decoration: none;
}

.cc-filters button:hover,
.cc-filters a:hover {
	border-color: var(--cc-ink);
}

.cc-filters button[aria-pressed="true"],
.cc-filters a[aria-current] {
	border-color: var(--cc-ink);
	background: var(--cc-ink);
	color: var(--cc-white);
}

.cc-filters.is-centered {
	justify-content: center;
}

/* Kenmerken van een vacature (locatie, uren) met een klein icoon, in overzicht en paginakop */
.cc-vacancy-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	color: var(--cc-muted);
	font-size: 0.9375rem;
	font-weight: 600;
	list-style: none;
}

.cc-vacancy-meta li,
.cc-vacancy-meta > span {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
}

.cc-vacancy-meta .cc-icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--cc-brand);
}

/* Paginakop van een vacature: gecentreerd, met afdeling, kenmerken en sollicitatieknop */
.cc-page-header--vacancy {
	position: relative;
	text-align: center;
}

.cc-page-header--vacancy .cc-section-header {
	margin-bottom: 0;
}

.cc-page-header--vacancy .cc-page-header__back {
	margin: 0 0 2rem;
	font-size: 0.9375rem;
}

/* Pijl vóór de tekst in plaats van erna (de pijl staat in de markup; ::before is het aanraakvlak). */
.cc-page-header--vacancy .cc-page-header__back::after {
	content: none;
}

.cc-page-header--vacancy .cc-vacancy-meta {
	justify-content: center;
	margin-top: 1.75rem;
}

.cc-page-header--vacancy .cc-buttons {
	justify-content: center;
}

/* Gegevensbalk onder de kop van een klantverhaal: bedrijf, locatie, branche, dienst (lijn erboven en eronder) */
.cc-case-facts {
	padding-block: clamp(1.75rem, 3vw, 2.5rem) 0;
}

.cc-case-facts__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin-block: 0; /* de lijst is ook een cc-container: de automatische kantlijn blijft */
	/* Lijn eronder alleen over de inhoud, niet over de zijmarges van de container. */
	background: linear-gradient(rgb(29 34 50 / 0.14), rgb(29 34 50 / 0.14)) left bottom / 100% 1px no-repeat;
	background-origin: content-box;
	background-clip: content-box;
}

.cc-case-facts__item {
	display: grid;
	gap: 0.375rem;
	padding: 1.25rem 1.5rem 1.5rem 0;
	border-top: 1px solid rgb(29 34 50 / 0.14);
}

.cc-case-facts__item dt {
	color: var(--cc-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
}

.cc-case-facts__item dd {
	margin: 0;
	color: var(--cc-ink);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
}

.cc-case-facts__item.has-logo dd img {
	display: block;
	width: auto;
	max-width: 160px;
	max-height: 40px;
	object-fit: contain;
}

.cc-case-facts__link {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	color: var(--cc-brand);
	text-decoration: none;
}

.cc-case-facts__link::after {
	content: "→";
}

.cc-case-facts__link:hover {
	color: var(--cc-ink);
}


/* Kop links met een knop of link rechts ernaast (zonder intro): "Bekijk alle klantverhalen" */
.cc-section-header.is-split .cc-section-header__aside {
	margin-top: 1.25rem;
}

@media (min-width: 900px) {

	.cc-section-header.is-split .cc-section-header__aside {
		margin-top: 0;
		grid-column: 2;
		grid-row: 2;
		justify-content: flex-end;
		align-self: end;
	}
}

/* Knop met een pijl erachter */
.cc-button--arrow::after {
	content: "→";
}

/* Lijststijl "Vierkantjes met lijnen": resultaten onder een klantverhaal */
.wp-block-list.is-style-cc-marked {
	margin: 0.75rem 0 0;
	padding: 0;
	border-top: 1px solid rgb(29 34 50 / 0.14);
	list-style: none;
}

.wp-block-list.is-style-cc-marked li {
	display: flex;
	gap: 0.875rem;
	align-items: flex-start;
	margin: 0;
	padding: 1rem 0;
	border-bottom: 1px solid rgb(29 34 50 / 0.14);
	color: var(--cc-ink);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.5;
}

.wp-block-list.is-style-cc-marked li::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: 0.625em;
	background: var(--cc-brand);
}

/* Citaatstijl "Kader met naam": de klantquote in een kader met een afgesneden hoek rechtsboven */
.wp-block-quote.is-style-cc-frame {
	position: relative;
	margin: clamp(2rem, 5vw, 4rem) 0;
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
	border: 2.5px solid var(--cc-brand);
	border-radius: 16px;
	clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%);
}

.wp-block-quote.is-style-cc-frame::after {
	content: "";
	position: absolute;
	top: 0;
	left: calc(100% - 57px);
	width: 81px;
	height: 2.5px;
	background: var(--cc-brand);
	transform: rotate(45deg);
	transform-origin: 0 0;
}

.wp-block-quote.is-style-cc-frame p {
	margin: 0;
	color: var(--cc-ink);
	font-family: var(--cc-font-heading);
	font-size: clamp(1.5rem, 3vw, 2.375rem);
	font-weight: 700;
	font-style: normal;
	line-height: 1.18;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.wp-block-quote.is-style-cc-frame cite {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin-top: 1.25rem;
	color: var(--cc-ink);
	font-size: 1rem;
	font-style: normal;
	line-height: 1.5;
}

.wp-block-quote.is-style-cc-frame cite::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: 0.5em;
	background: var(--cc-brand);
}

.wp-block-quote.is-style-cc-frame cite strong {
	display: block;
	font-weight: 600;
}