/* =====================================================================
   Case Study SEA / SEO — additive styles for the 3 new modules only.
   Reuses case-study.css for all shared sections (.container, .copy,
   .gilroy-h2, .simple-label, .cta-button, .section-* spacing, etc.).
   Tokens: navy #012585 / #08288C, green #6ACC50, orange #F16B37,
   near-white #FAFAFC, Gilroy.
   ===================================================================== */

/* ---------- hero : clear the fixed site header (desktop) ---------- */
@media (min-width: 1024px) {
	.section-case-hero {
		padding: 100px 0 90px;
	}
}

/* ---------- headings : weight per Figma (font is the Gilroy-Bold cut) ---------- */
.gilroy-h2 {
	font-weight: 400;
}

/* ---------- key_results : centered navy gradient cards ---------- */
.section-key-results {
	padding: 53px 0 58px;
	background: #f1f6f9;
}
.section-key-results .copy {
	text-align: center;
}
.section-key-results .key-results-list {
	list-style: none;
	margin: 34px 0 0; /* gap h2 -> cards = 34px */
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 31px; /* gap between cards = 31px */
}
.section-key-results .key-result-card {
	/* Figma fill: blue gradient over a solid black base */
	background: linear-gradient(87.88deg, rgba(8, 40, 140, 0.8) 23.8%, #08288c 101.02%), #000000;
	border-radius: 24px;
	padding: 25px 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
}
.section-key-results .key-result-value {
	font-family: "Gilroy", sans-serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 1;
	color: #6acc50;
}
.section-key-results .key-result-label {
	font-family: "Playfair Display", serif;
	font-weight: 600;
	font-style: italic;
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: 0;
	text-align: center;
	color: #fafafc;
}

/* ---------- four_column_items : desktop-only line break in headings ---------- */
@media (max-width: 1023px) {
	.section-platform .platform-item h3 br {
		display: none;
	}
}
@media (min-width: 1024px) {
	.section-platform {
		padding: 90px 0;
	}
}

/* ---------- navigation : card size per Figma (desktop only; mobile keeps theme styling) ---------- */
@media (min-width: 1024px) {
	.case-nav a {
		width: 213.79px;
		min-width: 213.79px;
		height: 100.59px;
		box-sizing: border-box;
		justify-content: center;
		text-align: center;
	}
}

/* ---------- section paddings + nav heading on one line (desktop, per Figma) ---------- */
@media (min-width: 1024px) {
	.container {
		padding: 0 20px;
	}
	.section-case-nav {
		padding: 0 0 18px;
	}
	.section-case-nav .gilroy-h2 {
		white-space: nowrap;
	}
	.section-ux {
		/* 135px gap to the previous section (+42px compensates the sticky nav's negative margin) */
		padding: 177px 0 135px;
	}
}

/* ---------- ux : images (main + mobile overlay), 10px radius ---------- */
.section-ux-image {
	position: relative;
}
.section-ux-image figure {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
}
.section-ux-image figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}
@media (min-width: 1024px) {
	/* break the container out to the right: image ends 84px from the screen edge,
	   left stays aligned with the normal 1236px container */
	.section-ux > .container {
		max-width: none;
		margin-left: max(0px, calc((100vw - 1236px) / 2));
		margin-right: 40px;
		padding-left: 20px;
		padding-right: 0;
	}
	/* fluid columns so the image scales down with the screen (keeps 735:417 ratio); 134px gap */
	.section-ux-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		column-gap: 134px;
	}
	/* the real fix: case-study.css caps the text at 568px, which wraps the bullets */
	.section-ux .copy {
		max-width: 700px;
	}
	.section-ux-image {
		width: 100%;
	}
	/* show the full screenshot (no crop, no stretch); scales with the fluid column */
	.section-ux-image figure {
		width: 100%;
	}
	.section-ux-image figure img {
		width: 100%;
		height: auto;
	}
}
/* overlay positioned as % of the image; aspect-ratio keeps the phone shape (129:346) while it scales */
.section-ux-image .section-ux-overlay {
	position: absolute;
	top: 36.4%;
	right: 7.35%;
	width: 17.55%;
	aspect-ratio: 129 / 346;
	box-shadow: 0 12px 30px rgba(1, 37, 133, 0.18);
}
.section-ux-image .section-ux-overlay img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

/* ---------- ux : copy typography ---------- */
.section-ux .copy h3 {
	font-family: "Gilroy-Bold", sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.5;
	color: #012585;
}
.section-ux .copy h4 {
	font-family: "Gilroy-Bold", sans-serif;
	font-weight: 400;
	font-size: 21px;
	line-height: 1.5;
	color: #012585;
}
.section-ux .copy li strong {
	font-weight: 700;
}
.section-ux .copy ul li:not(:last-child) {
	margin-bottom: 12px;
}

/* ---------- ai_agents : grid of cards with "active" badge ---------- */
.section-ai-agents {
	padding: 90px 0;
}
.section-ai-agents .ai-agents-list {
	list-style: none;
	margin: 52px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 21px;
}

/* ---------- video : section padding (desktop) ---------- */
@media (min-width: 1024px) {
	.section-case-video {
		padding: 0;
	}
}

/* ---------- video : placeholder (no real video yet) + quote accent ---------- */
.section-case-video .case-video--placeholder {
	background: #f1f3f6;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.section-case-video .case-video--placeholder .case-video-duration {
	position: absolute;
	top: 14px;
	right: 15.86px;
	font-family: "Gilroy-Bold", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1;
	vertical-align: middle;
	color: #08288c;
	background: rgba(8, 40, 140, 0.1);
	border: 1px solid #08288c;
	border-radius: 0px 10px 0px 0px;
	padding: 11px 18px;
}
/* ---------- video : thumbnail zonder video/link, geen playbutton ---------- */
.section-case-video .case-video--image-only {
	background: #f1f3f6;
	border-radius: 10px;
}
.section-case-video .case-video--image-only .case-video-duration {
	position: absolute;
	top: 14px;
	right: 15.86px;
	font-family: "Gilroy-Bold", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1;
	vertical-align: middle;
	color: #08288c;
	background: rgba(8, 40, 140, 0.1);
	border: 1px solid #08288c;
	border-radius: 0px 10px 0px 0px;
	padding: 11px 18px;
}
.section-case-video .case-video-ph-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.section-case-video .case-video-ph-play {
	display: inline-flex;
	width: 76px;
	height: 76px;
}
.section-case-video .case-video-ph-play svg {
	width: 100%;
	height: 100%;
}
.section-case-video .case-video-ph-label {
	font-family: "Gilroy-Bold", sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #08288c;
}
.section-case-video .case-video-quote p i {
	color: #f16b37;
}
.section-case-video .case-video-media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.section-case-video .case-video--file .case-video-overlay {
	cursor: pointer;
	background: transparent;
}
.section-case-video .case-video-btn {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.section-case-video .case-video--file .case-video-duration {
	background: #EBEBF4;
}
.section-case-video .case-video--embed .case-video-duration {
	background: #EBEBF4;
}
.section-ai-agents .ai-agent-card {
	background: #f1f6f9;
	border: 1px solid #8ca4f8;
	border-radius: 5px;
	padding: 20px 23.5px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.section-ai-agents .ai-agent-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.section-ai-agents .ai-agent-card h3 {
	font-family: "Gilroy-Bold", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: #ff7038;
	margin: 0;
}
.section-ai-agents .ai-agent-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	font-family: "Gilroy-Bold", sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 1;
	color: #08288c;
	background: rgba(8, 40, 140, 0.1);
	border: 1px solid #08288c;
	border-radius: 20px;
	padding: 7px 14px;
	white-space: nowrap;
}
.section-ai-agents .ai-agent-card p {
	margin: 0;
	font-family: "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
	font-weight: 400;
	color: #000;
	font-size: 16px;
	line-height: 1.7;
}

/* ---------- results : eyebrows + gradient cards ---------- */
.section-results {
	padding: 90px 0;
}
.section-results .results-eyebrow {
	font-family: "Gilroy-Bold", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: #f16b37;
	margin: 0 0 24px;
}
.section-results .results-eyebrow--indicators {
	margin-top: 34px;
}
/* row 1 — primary cards */
.section-results .results-primary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 31.5px;
}
.section-results .results-primary-card {
	background: linear-gradient(87.88deg, rgba(8, 40, 140, 0.8) 23.8%, #08288c 101.02%), #000000;
	border-radius: 10px;
	padding: 44px 60.5px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}
.section-results .results-primary-card.has-image {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.section-results .results-primary-card.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(87.88deg, rgba(8, 40, 140, 0.45) 23.8%, rgba(8, 40, 140, 0.55) 101.02%);
	box-shadow: inset 0 0 32px 2px rgba(0, 0, 16, 0.32);
	z-index: 0;
}
.section-results .results-primary-card.has-image > * {
	position: relative;
	z-index: 1;
}
/* hover: subtiele lift + schaal + #8ca4f8 gloed */
.section-results .results-primary-card {
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease;
}
@media (hover: hover) {
	.section-results .results-primary-card:hover {
		transform: translateY(-8px) scale(1.025);
		box-shadow: 0 24px 50px -18px rgba(140, 164, 248, 0.75), 0 0 34px rgba(140, 164, 248, 0.5), 0 0 0 1px rgba(140, 164, 248, 0.45);
	}
}
.section-results .results-primary-value {
	font-family: "Gilroy-Bold", sans-serif;
	font-weight: 400;
	font-size: 70px;
	line-height: 1;
	color: #6acc50;
}
.section-results .results-primary-label {
	font-family: "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	color: #fafafc;
	margin: 16px 0 0;
}
.section-results .results-primary-sub {
	font-family: "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4;
	color: #fafafc;
	margin: 16px 0 0;
}
.section-results .results-pill {
	display: inline-flex;
	align-items: center;
	margin-top: 24px;
	font-family: "Gilroy-Bold", sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 1;
	color: #fafafc;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid #fafafc;
	border-radius: 20px;
	padding: 9px 16px;
}
/* rows 2-3 — indicators (gradient bg, light text) */
.section-results .results-indicators-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 17px 19px;
}
.section-results .results-indicator-card {
	background: #f1f6f9;
	border: 1px solid #8ca4f8;
	border-radius: 10px;
	padding: 20px 17px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
}
.section-results .results-indicator-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.section-results .results-indicator-badge {
	flex: 0 0 auto;
	width: 35px;
	height: 35px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	background: #ffffff;
	border: 1px solid #08288c;
	border-radius: 8px;
	font-family: "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	color: #08288c;
}
.section-results .results-indicator-value {
	font-family: "Gilroy-Bold", sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.5;
	color: #6acc50;
}
.section-results .results-indicator-label {
	font-family: "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	color: #012585;
	margin: 0;
}
.section-results .results-indicator-sub {
	font-family: "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: #5a6b9c;
	margin: 0;
}
/* row 4 — info bar */
.section-results .results-info-bar {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
	background: none;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.section-results .results-info-bar li {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	padding: 13px 24px;
	background: rgba(8, 40, 140, 0.1);
	border: 1px solid #08288c;
	border-radius: 30px;
}
.section-results .results-info-bar li:first-child {
	padding-left: 24px;
}
.section-results .results-info-bar li:last-child {
	padding-right: 24px;
}
.section-results .results-info-bar li + li {
	border-left: 1px solid #08288c;
}
.section-results .results-info-label {
	font-family: "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	color: #012585;
}
.section-results .results-info-value {
	font-family: "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: #012585;
}

/* ---------- team : keep heading left-aligned (overrides inherited centering) ---------- */
.section-case-team .case-team-grid .copy .gilroy-h2 {
	text-align: left !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-bottom: 10px !important;
	padding-left: 0 !important;
	text-indent: 0 !important;
	align-self: start !important;
	width: auto !important;
}
.section-case-team .copy li strong,
.section-case-team .copy strong {
	font-weight: 700;
}

/* ---------- bottom_cta : typography + margins ---------- */
.section-case-cta .copy {
	text-align: center;
}
.section-case-cta .simple-label {
	font-family: "Gilroy-SemiBold", sans-serif !important;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: 0;
	color: #fff;
}
/* gradient border on the inner box (background-clip keeps the rounded corners) */
.section-case-cta .case-cta .inner {
	border: 1px solid transparent;
	background:
		linear-gradient(#000c31, #000c31) padding-box,
		linear-gradient(343.34deg, #4d6ccd 12.37%, #a7baf5 26.68%, #4d6ccd 41.56%) border-box;
}
.section-case-cta .gilroy-h2 {
	font-family: "Gilroy-Bold", sans-serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.25;
	letter-spacing: 0;
	color: #fff;
	margin: 0 0 19px;
}
.section-case-cta .gilroy-h2 mark {
	color: #f16b37;
}
.section-case-cta .copy p:not([class]) {
	font-family: "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.6;
	color: #fff;
}
.section-case-cta .cta-button {
	font-family: "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
	font-weight: 500;
	font-size: 15.75px;
	line-height: 17.44px;
	color: #fff;
}
@media (min-width: 1024px) {
	.section-case-cta .copy p:not([class]) {
		margin: 0 0 19px;
	}
	.section-case-cta .case-cta {
		margin: 80px 0;
		padding: 13px 12px;
	}
}

/* ========== MOBILE (<= 1023px) ========== */
@media (max-width: 1023px) {
	/* "Bekijk de case" button: net zo breed als zijn inhoud, met het pijltje
	   rechts aan het eind in plaats van gecentreerd naast de tekst */
	.section-case-hero .copy .cta-button.anchor-link {
		display: inline-flex;
		width: fit-content;
		justify-content: flex-start;
		gap: 14px;
	}
	/* "Bekijk website" button: right-aligned, 23.6px below the image */
	.section-case-hero .case-hero-image-item .btn-dark-blue {
		display: flex;
		width: fit-content;
		margin: 3% 0 0 auto;
		position: relative;
		z-index: 2;
	}
	/* hero image padding inside the grey card */
	.section-case-hero .case-hero-image {
		padding: 25px 48px 0;
	}
	.section-case-hero .case-hero-image img {
		display: block;
		width: 100%;
		height: auto;
		max-height: 550px;
		object-fit: contain;
		margin: 0;
	}
	.section-case-hero .case-hero-image:before {
		left: 20px;
		right: 20px;
		bottom: 20%;
		border-radius: 10px;
	}
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
	.section-key-results .key-results-list,
	.section-ai-agents .ai-agents-list,
	.section-results .results-primary-list,
	.section-results .results-indicators-list {
		grid-template-columns: repeat(2, 1fr);
	}
	.section-results .results-info-bar {
		grid-template-columns: repeat(2, 1fr);
	}
	.section-key-results .key-result-value {
		font-size: 36px;
	}
	.section-results .results-primary-value {
		font-size: 56px;
	}
}
@media (max-width: 575px) {
	.section-ai-agents .ai-agents-list,
	.section-results .results-primary-list,
	.section-results .results-indicators-list,
	.section-results .results-info-bar {
		grid-template-columns: 1fr;
	}
}

/* ========== MOBILE section tweaks (<= 1023px) ========== */
@media (max-width: 1023px) {
	/* key_results: left-aligned heading, 2-col cards (3rd full width), tighter spacing */
	.section-key-results {
		padding: 24px 0;
	}
	.section-key-results .copy {
		text-align: left;
	}
	.section-key-results .key-results-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-top: 24px;
	}
	/* sticky section-nav: drop below the fixed header so it isn't overlapped */
	.case-nav-wrap {
		top: 110px;
	}
	.section-key-results .key-results-list > li:nth-child(3) {
		grid-column: 1 / -1;
	}
	.section-key-results .key-result-value {
		font-size: 26px;
	}
	.section-key-results .key-result-label {
		font-size: 18px;
	}
	/* four_column (beginsituatie): left-aligned heading, item sizes */
	.section-platform .copy {
		text-align: left;
	}
	.section-platform .platform-item h3 {
		font-size: 24px;
	}
	.section-platform .platform-item p {
		font-size: 16px;
	}
	/* navigation: eyebrow + h2 centered */
	.section-case-nav .copy {
		text-align: center;
	}
	/* ux: show the image on mobile (theme hides it) + typography */
	.section-ux-image {
		display: block;
		margin-top: 24px;
	}
	.section-ux-image figure {
		margin: 0;
		border-radius: 10px;
		overflow: hidden;
	}
	.section-ux-image figure img {
		display: block;
		width: 100%;
		height: auto;
	}
	.section-ux .copy h3 {
		font-family: "Gilroy-Bold", sans-serif;
		font-weight: 400;
		font-size: 20px;
		line-height: 1.5;
		color: #012585;
	}
	.section-ux .copy p {
		font-family: "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: 1.6;
		color: #000;
	}
	.section-ux .copy h4 {
		font-family: "Gilroy-Bold", sans-serif;
		font-weight: 400;
		font-size: 20px;
		line-height: 1.5;
		color: #012585;
	}
	.section-ux .copy li {
		font-size: 18px;
	}
	/* ai_agents cards: badge straddles the top border (half above), heading flows below */
	.section-ai-agents .ai-agents-list {
		margin-top: 40px;
		gap: 36px;
	}
	.section-ai-agents .ai-agent-card {
		position: relative;
	}
	.section-ai-agents .ai-agent-card-top {
		display: block;
	}
	.section-ai-agents .ai-agent-badge {
		position: absolute;
		top: 0;
		right: 20px;
		transform: translateY(-50%);
		font-size: 14px;
		background: #dae1ee;
	}
	/* gap between AI agents section and the video = 34px */
	.section-ai-agents {
		padding-bottom: 34px;
	}
	.section-case-video {
		padding: 0;
	}
	/* gap video -> results = 34px (video has no bottom padding) */
	.section-results {
		padding: 34px 0;
	}
	/* video: smaller duration pill + quote, and a line above the quote; no side padding on the quote */
	.section-case-video .case-video-quote {
		padding-left: 0;
		padding-right: 0;
	}
	.section-case-video .case-video--placeholder .case-video-duration {
		font-size: 15px;
	}
	.section-case-video .case-video-quote p {
		font-size: 24px;
	}
	.section-case-video .case-video-quote p:before {
		content: "";
		display: block;
		width: 112px;
		height: 1px;
		background: #012585;
		margin: 0 0 16px;
	}

	/* ===== results section (mobile) ===== */
	/* primary cards: [value | pill] top row, then h3, then p */
	.section-results .results-primary-list {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.section-results .results-primary-card {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"value pill"
			"label label"
			"sub sub";
		align-items: center;
		row-gap: 0;
		column-gap: 8px;
		padding: 20px 17px;
		border-radius: 5px;
		background: linear-gradient(87.88deg, rgba(8, 40, 140, 0.8) 23.8%, #08288c 101.02%),
			linear-gradient(0deg, #000000, #000000);
	}
	.section-results .results-primary-value {
		grid-area: value;
		font-family: "Gilroy-SemiBold", sans-serif;
		font-size: 24px;
		margin: 0;
		align-self: stretch;
		display: flex;
		align-items: center;
	}
	.section-results .results-primary-label {
		grid-area: label;
		font-size: 16px;
		font-weight: 500;
		margin: 4px 0 0;
	}
	.section-results .results-primary-sub {
		grid-area: sub;
		font-size: 16px;
		font-weight: 300;
		margin: 0;
	}
	.section-results .results-pill {
		grid-area: pill;
		justify-self: end;
		margin-top: 0;
		font-family: "Gilroy-SemiBold", sans-serif;
		font-weight: 400;
		font-size: 13px;
		padding: 7px 12px;
		white-space: nowrap;
	}
	/* indicators: one gradient panel with divider lines; row = [badge] [value | h3/p] */
	.section-results .results-indicators-list {
		grid-template-columns: 1fr;
		gap: 0;
		background: #f1f6f9;
		border: 1px solid #8ca4f8;
		border-radius: 10px;
		overflow: hidden;
	}
	.section-results .results-indicator-card {
		position: relative;
		background: none;
		border: none;
		border-radius: 0;
		align-items: center;
		padding: 16px 20px;
	}
	.section-results .results-indicator-card:not(:last-child)::after {
		content: "";
		position: absolute;
		left: 20px;
		right: 20px;
		bottom: 0;
		height: 1px;
		background: #d2dcf4;
	}
	.section-results .results-indicator-body {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"value label"
			"value sub";
		align-items: center;
		column-gap: 12px;
		row-gap: 0;
	}
	.section-results .results-indicator-value {
		grid-area: value;
		font-family: "Gilroy-SemiBold", sans-serif;
		font-size: 24px;
	}
	.section-results .results-indicator-label {
		grid-area: label;
		font-size: 16px;
		font-weight: 500;
	}
	.section-results .results-indicator-sub {
		grid-area: sub;
		font-size: 16px;
		font-weight: 300;
	}
	/* info-bar: stacked rows with divider lines */
	.section-results .results-info-bar {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		margin: 24px 0 0;
		gap: 0;
		background: rgba(8, 40, 140, 0.1);
		border: 1px solid #08288c;
		border-radius: 10px;
		overflow: hidden;
	}
	.section-results .results-info-bar li {
		padding: 14px 20px;
		background: none;
		border: none;
		border-radius: 0;
	}
	.section-results .results-info-bar li:not(:last-child) {
		border-bottom: 1px solid rgba(8, 40, 140, 0.25);
	}
	.section-results .results-info-bar li + li {
		border-left: none;
	}
	.section-results .results-info-bar li:first-child {
		padding-top: 14px;
		padding-left: 20px;
	}
	.section-results .results-eyebrow--indicators {
		margin: 17px 0 16px 0;
	}
	.section-results .results-info-label {
		font-weight: 500;
		line-height: 1.5;
	}
	.section-results .results-info-value {
		font-weight: 300;
		line-height: 1.5;
	}
	/* grey background above the team section's orange label
	   (parent forces #team padding-top:0 !important below 620px) */
	#team.section-case-team {
		padding-top: 24px !important;
		padding-bottom: 32.95px !important;
	}
	/* team members: 2 per row (left-to-right) instead of stacking */
	#team .case-team-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 28px;
		row-gap: 40px;
		justify-items: center;
	}
	#team .case-team-list li {
		width: auto;
	}
	/* bottom CTA: 20px side whitespace, left-aligned text, mobile sizes */
	.section-case-cta {
		padding-top: 34px;
	}
	.section-case-cta .container {
		padding-left: 20px;
		padding-right: 20px;
	}
	.section-case-cta .case-cta {
		margin-left: 0;
		margin-right: 0;
		padding: 15px 12px;
		border-radius: 10px;
	}
	.section-case-cta .case-cta .inner {
		padding: 21px 18px 19.43px;
		border-radius: 11.34px;
	}
	.section-case-cta .inner,
	.section-case-cta .copy {
		text-align: left;
	}
	.section-case-cta .cta-button {
		display: flex;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}
	.section-case-cta .simple-label {
		font-size: 16px;
	}
	.section-case-cta .gilroy-h2 {
		font-family: "Gilroy-SemiBold", sans-serif;
		font-weight: 400;
		font-size: 24px;
	}
	.section-case-cta .copy p:not(.simple-label) {
		font-size: 16px;
		font-weight: 300;
	}
	/* === finishing touches (mobile) === */
	.container {
		padding: 0 20px;
	}
	.section-case-hero h1.gilroy-h2 {
		font-size: 36px;
	}
	.section-case-hero::before {
		background-image: none;
	}
	.section-case-hero .copy p {
		font-size: 16px;
	}
	.section-key-results .key-result-value {
		font-family: "Gilroy-SemiBold", sans-serif;
		font-weight: 400;
	}
	.section-key-results .key-result-label {
		font-weight: 400;
	}
	.simple-label {
		font-weight: 600;
	}
	.section-platform {
		padding: 34px 0;
	}
	.section-platform .copy {
		margin: 0 0 25px;
	}
	.platform-items {
		gap: 20px;
	}
	.platform-item {
		padding: 24px 26px 23px 24px;
		border-radius: 24px;
	}
	.section-case-nav {
		padding: 16px 0 15px;
		background-color: #f1f6f9;
	}
	.case-nav-wrap {
		background-color: #f1f6f9;
	}
	/* UX section: enlarge phone overlay (width drives height via aspect-ratio
	   129/346), so it extends further down; right/top kept from base */
	.section-ux-image .section-ux-overlay {
		/* anchor BOTH top (sleeve = 36.4% of the mockup, Figma 63px@mobile) and
		   bottom (107px overhang). Height follows the mockup, width follows from
		   aspect-ratio (129/346) -> 81px @ mobile, scales up on wider screens,
		   top always at the sleeve, constant 60px grey below. */
		width: auto;
		top: 36.4%;
		bottom: -107px;
	}
	/* overhang (107px) + 60px grey below the phone, constant at every width */
	.section-ux {
		padding-bottom: 167px;
		overflow: visible;
	}
	.section-ai-agents {
		padding-top: 34px;
		padding-bottom: 34px;
	}
}

/* UX section image breaks on narrow desktop (1024-1199px): the 2-col grid
   stretches the image column to the (tall) text height, and object-fit:cover
   zooms the 2:1 mockup ~3x. Keep the image at its natural aspect there. */
@media (min-width: 1024px) {
	.section-ux-image {
		align-self: start;
		aspect-ratio: 1027 / 508;
	}
	.section-ux-image figure {
		height: fit-content;
	}
}

/* team members: 3 across from 665px up (2-col leaves member 3 alone with big gaps) */
@media (min-width: 665px) and (max-width: 1023px) {
	#team .case-team-list {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/* hero: grey-box overhang on desktop (image sticks out below the grey square) */
@media (min-width: 1024px) {
	.section-case-hero .case-hero-image {
		padding: 15px 50px 0;
	}
	.section-case-hero .case-hero-image img {
		margin: 40px auto;
	}
	.section-case-hero .case-hero-image::before {
		bottom: 9%;
	}
	.section-case-hero .case-hero-image-item .btn-dark-blue {
		display: flex;
		width: fit-content;
		margin: -3% 0 0 auto;
		position: relative;
		z-index: 2;
	}
}

/* Live-fixes: vaste site-header compenseren + Groeiplan-knop witte tekst
   (het getdevdone-env heeft een andere header; alleen dit template laadt dit bestand) */
:root{--color-white:#fff;}
.section-case-hero{padding-top:160px;}
@media(max-width:900px){.section-case-hero{padding-top:120px;}}
body .header-ex #primary-menu li.button a{color:#fff !important;}

/* ---------- ux-popup : optionele tweekolomsopmaak, tekst links en beeld rechts ----------
   Wordt alleen actief als de popup-copy een .rm-popup-split-wrapper bevat.
   Popups zonder wrapper houden hun smalle leeskolom van 700px. */
.section-ux .ux-popup .rm-popup-split figure {
	margin: 0 0 1.75em;
	border-radius: 10px;
	overflow: hidden;
}
.section-ux .ux-popup .rm-popup-split figure img {
	display: block;
	width: 100%;
	height: auto;
}
.section-ux .ux-popup .rm-popup-split figcaption {
	font-size: 15px;
	line-height: 1.6;
	color: #5a6b9c;
	padding: 10px 2px 0;
}
@media (min-width: 1024px) {
	.section-ux .ux-popup .copy:has(.rm-popup-split) {
		max-width: 1322px;
		padding-right: 0;
	}
	.section-ux .ux-popup .rm-popup-split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: 64px;
		align-items: start;
	}
	.section-ux .ux-popup .rm-popup-split > *:last-child {
		margin-bottom: 0;
	}
}

/* ---------- video : doorlopende animatie (autoplay_loop) ----------
   Geen vaste bloghoogte en geen cover-crop, zodat een brede motion graphic
   helemaal in beeld blijft in plaats van links en rechts te worden afgesneden. */
.section-case-video .case-video--loop {
	height: auto;
	background: #f1f3f6;
}
.section-case-video .case-video--loop .case-video-media {
	height: auto;
	object-fit: contain;
}

/* ---------- hero : beeld hoger, meer lucht boven de website-knop ---------- */
@media (min-width: 1024px) {
	.section-case-hero .case-hero-image {
		padding: 0 48px 0;
	}
	.section-case-hero .case-hero-image-item .btn-dark-blue {
		margin: 0 0 0 auto;
		top: 40px;
	}
}

/* ---------- highlighted : opsomming met het RM-pijltje ---------- */
.copy .highlighted .rm-arrow-list {
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.copy .highlighted .rm-arrow-list > span {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}
.copy .highlighted .rm-arrow-list > span::before {
	content: "";
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-top: 0.45em;
	transform: rotate(45deg);
	background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.01.955A.957.957 0 0 0 9.056 0H2.303a.956.956 0 0 0 0 1.911l4.45-.002L.28 8.382a.955.955 0 1 0 1.35 1.35L8.1 3.263l.003 4.445a.956.956 0 0 0 1.911 0V.955h-.004Z' fill='%23F16B37'/%3E%3C/svg%3E");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

/* ---------- ux-overlay : kader volgt de mockup in plaats van 129:346 ----------
   De oude overlay was een lange scrollpagina (258x2560) waarvan alleen de
   bovenkant in beeld kwam. Een complete telefoonmockup is 1:2,03 en werd door
   het smallere kader met object-fit: cover links en rechts afgesneden. */
.section-ux-image .section-ux-overlay {
	aspect-ratio: 408 / 829;
}

/* ---------- resultaatkaarten : blauwe waas donkerder voor meer contrast ---------- */
.section-results .results-primary-card.has-image::before {
	background: linear-gradient(87.88deg, rgba(8, 40, 140, 0.68) 23.8%, rgba(8, 40, 140, 0.8) 101.02%);
	box-shadow: inset 0 0 40px 4px rgba(0, 0, 16, 0.42);
}

/* ---------- rm-arrow-list : generiek, ook buiten de hero bruikbaar ---------- */
.rm-arrow-list {
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.rm-arrow-list > span {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}
.rm-arrow-list > span::before {
	content: "";
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-top: 0.45em;
	transform: rotate(45deg);
	background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.01.955A.957.957 0 0 0 9.056 0H2.303a.956.956 0 0 0 0 1.911l4.45-.002L.28 8.382a.955.955 0 1 0 1.35 1.35L8.1 3.263l.003 4.445a.956.956 0 0 0 1.911 0V.955h-.004Z' fill='%23F16B37'/%3E%3C/svg%3E");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
/* compactere maat in de vierkolomskaarten (tekst is daar 15px) */
.section-platform .platform-item .rm-arrow-list {
	gap: 7px;
}
.section-platform .platform-item .rm-arrow-list > span {
	gap: 9px;
}
.section-platform .platform-item .rm-arrow-list > span::before {
	width: 11px;
	height: 11px;
	margin-top: 0.42em;
}

/* ================= aanpassingen 1 september 2026, tweede ronde ================= */

/* ux-overlay : marge rond de mockup, geen hoekafsnijding, schaduw volgt de telefoon */
.section-ux-image .section-ux-overlay {
	aspect-ratio: 452 / 921;
	overflow: visible;
	border-radius: 0;
	box-shadow: none;
}
.section-ux-image .section-ux-overlay img {
	object-fit: contain;
	border-radius: 0;
	filter: drop-shadow(0 14px 26px rgba(1, 37, 133, 0.22));
}

/* vierkolomskaarten : cijfers groen en rechts uitgelijnd */
.section-platform .platform-item .rm-arrow-list > span {
	align-items: baseline;
}
.section-platform .platform-item .rm-arrow-list .lbl {
	flex: 1 1 auto;
}
.section-platform .platform-item .rm-arrow-list strong {
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: 10px;
	color: #319317;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* infobalk : alles op één rij */
.section-results .results-info-bar {
	flex-wrap: nowrap;
	gap: 10px;
}
.section-results .results-info-bar li {
	padding: 10px 15px;
}
.section-results .results-info-label,
.section-results .results-info-value {
	font-size: 13px;
}

/* team : portretten onder de tekst, in een rij naast elkaar */
@media (min-width: 1024px) {
	.case-team-grid {
		grid-template-columns: 1fr;
		grid-gap: 32px 0;
	}
	#team .case-team-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
		grid-gap: 34px 28px;
		justify-content: start;
		justify-items: center;
	}
}

/* bottom CTA : teamportret in blauwe tint als achtergrond */
.section-case-cta .case-cta .inner {
	position: relative;
	overflow: hidden;
}
.section-case-cta .case-cta .inner::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: min(980px, 96%);
	aspect-ratio: 1200 / 580;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	opacity: 0.38;
	pointer-events: none;
	z-index: 0;
}
.section-case-cta .case-cta .copy {
	position: relative;
	z-index: 1;
}
@media (min-width: 1024px) {
	.section-case-cta .case-cta .inner {
		padding-bottom: 150px;
	}
}

.section-case-cta .case-cta .inner::after {
	background-image: url("https://rankingmasters.nl/wp-content/uploads/2026/09/team-blauw.png");
}

/* CTA-achtergrond iets terugnemen zodat de tekst voorop blijft staan */
.section-case-cta .case-cta .inner::after {
	opacity: 0.26;
}
.section-case-cta .case-cta .inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #000C31 0%, rgba(0, 12, 49, 0.85) 42%, rgba(0, 12, 49, 0) 78%);
	pointer-events: none;
	z-index: 0;
}

/* vierkolomskaarten : kicker boven de kop, zodat de rol van elke tegel meteen leesbaar is */
.section-platform .platform-item h3 .tile-kicker {
	display: block;
	font-family: "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
	font-weight: 700;
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #5a6b9c;
	margin: 0 0 7px;
}

/* merken als chips in plaats van zeven losse regels */
.section-ux .copy .rm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 1.3em;
}
.section-ux .copy .rm-chips > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	line-height: 1;
	padding: 9px 14px;
	border: 1px solid #8ca4f8;
	background: rgba(204, 215, 255, 0.16);
	border-radius: 20px;
	color: #012585;
	white-space: nowrap;
}
.section-ux .copy .rm-chips > span strong {
	color: #f16b37;
}

/* telefoonmockup groter op mobiel en tablet */
@media (max-width: 1023px) {
	.section-ux-image .section-ux-overlay {
		top: 26%;
		bottom: -160px;
	}
	.section-ux {
		padding-bottom: 220px;
	}
}

/* kassa-kaarten : voor in rood, na in groen */
.section-ai-agents .ai-agent-card .was {
	color: #c62828;
	font-weight: 700;
	white-space: nowrap;
}
.section-ai-agents .ai-agent-card .nu {
	color: #237a0f;
	font-weight: 700;
	white-space: nowrap;
}
#kassa .ai-agent-badge {
	color: #237a0f;
	border-color: #6acc50;
	background: rgba(106, 204, 80, 0.16);
}
@media (max-width: 1023px) {
	#kassa .ai-agent-badge {
		background: #dff2d8;
	}
}

/* teamportret : hoofd hoger in de ronde uitsnede */
#team .case-team-list li:nth-child(2) .case-team-item figure img {
	object-position: center 12%;
}

/* CTA : teamgroep kleiner, niet de hele tegel vullen */
.section-case-cta .case-cta .inner::after {
	width: min(560px, 66%);
	opacity: 0.3;
}

/* was/nu ook buiten de kassa-kaarten bruikbaar */
.section-case-team .copy .was,
.section-ux .copy .was {
	color: #c62828;
	font-weight: 700;
	white-space: nowrap;
}
.section-case-team .copy .nu,
.section-ux .copy .nu {
	color: #237a0f;
	font-weight: 700;
	white-space: nowrap;
}

/* ---------- sticky case-nav op mobiel ----------
   1. positie volgt de werkelijke headerhoogte (JS zet --rm-header-h)
   2. drie stappen naast elkaar in beeld, zonder horizontaal scrollen */
@media (max-width: 1023px) {
	.case-nav-wrap {
		top: calc(var(--rm-header-h, 88px) + 10px);
	}
	.case-nav {
		overflow-x: visible;
		gap: 8px;
	}
	.case-nav li {
		flex: 1 1 0;
		min-width: 0;
	}
	/* verbindingsstippels weg: daar is bij deze breedte geen ruimte voor */
	.case-nav li:before,
	.case-nav li:after {
		display: none;
	}
	.case-nav a {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 4px;
		padding: 9px 6px;
		font-size: 12px;
		line-height: 1.25;
	}
	.case-nav a .number {
		flex: 0 0 auto;
		font-size: 12px;
	}
}

/* ---------- sticky case-nav op desktop ----------
   de mobiele fix hierboven (<=1023px) volgt de echte headerhoogte, maar voor
   desktop bleef .case-nav-wrap op de oude top:98px staan (uit case-study.css),
   terwijl de header daar 114.93px hoog is. Vandaar de overlap. */
@media (min-width: 1024px) {
	.case-nav-wrap {
		top: 125px;
	}
}

/* ---------- #markten : Jordy overlapt de Duitsland-tegel ----------
   Bovenlichaam staat achter de tegel (z-index 0), de hand rechtsonder
   ligt er weer overheen (z-index 2). Alleen op desktop, want in de
   gestapelde mobiele weergave zou de figuur tussen twee tegels hangen. */
@media (min-width: 1024px) {
	#markten .platform-items {
		padding-top: 196px;
	}
	#markten .platform-items > li:first-child {
		position: relative;
	}
	#markten .platform-items > li:first-child .platform-item {
		position: relative;
		z-index: 1;
	}
	#markten .platform-items > li:first-child::before {
		content: "";
		position: absolute;
		left: -17.4%;
		bottom: 100%;
		width: 94.7%;
		aspect-ratio: 850 / 675;
		margin-bottom: -6px;
		background: url("https://rankingmasters.nl/wp-content/uploads/2026/09/jordy-boven.png") no-repeat left bottom / contain;
		z-index: 0;
		pointer-events: none;
	}
	#markten .platform-items > li:first-child::after {
		content: "";
		position: absolute;
		left: 89%;
		bottom: -8px;
		width: 14.5%;
		aspect-ratio: 125 / 223;
		background: url("https://rankingmasters.nl/wp-content/uploads/2026/09/jordy-hand.png") no-repeat center bottom / contain;
		z-index: 2;
		pointer-events: none;
	}
}

@media (min-width: 1024px) {
	#markten .platform-items {
		padding-top: 214px;
	}
	#markten .platform-items > li:first-child::after {
		left: 91%;
		bottom: -6px;
		width: 13.9%;
	}
}

@media (min-width: 1024px) {
	#markten .platform-items > li:first-child::after {
		bottom: 2px;
	}
}

/* ---------- #markten : overlap opnieuw, met de aangeleverde uitsnede ----------
   Kaart in het bronbeeld: x 175-1184 (breedte 1009), y 809-1880.
   Alle maten zijn percentages van de tegelbreedte; ook de verticale offsets
   gebruiken margin-%, want die rekent tegen de breedte en niet tegen de hoogte. */
@media (min-width: 1024px) {
	#markten .platform-items {
		padding-top: 232px;
	}
	#markten .platform-items > li:first-child::before {
		content: "";
		position: absolute;
		left: -17.3%;
		bottom: 100%;
		margin-bottom: -22.9%;
		width: 94.7%;
		aspect-ratio: 956 / 989;
		background: url("https://rankingmasters.nl/wp-content/uploads/2026/09/jordy2-boven.png") no-repeat left bottom / contain;
		z-index: 0;
		pointer-events: none;
	}
	#markten .platform-items > li:first-child::after {
		content: "";
		position: absolute;
		left: 87.3%;
		top: auto;
		bottom: 0;
		margin-bottom: -4.7%;
		width: 17.7%;
		aspect-ratio: 179 / 284;
		background: url("https://rankingmasters.nl/wp-content/uploads/2026/09/jordy2-hand.png") no-repeat center bottom / contain;
		z-index: 2;
		pointer-events: none;
	}
}

/* derde laag: de wijzende arm valt vóór de tegel, met een uitvloeiende
   onderrand zodat er geen harde snijlijn op de tegel ontstaat */
@media (min-width: 1024px) {
	#markten .platform-items > li:first-child .platform-item::before {
		content: "";
		position: absolute;
		left: -17.3%;
		bottom: 100%;
		margin-bottom: -7.4%;
		width: 94.7%;
		aspect-ratio: 956 / 360;
		background: url("https://rankingmasters.nl/wp-content/uploads/2026/09/jordy2-arm.png") no-repeat left bottom / contain;
		z-index: 2;
		pointer-events: none;
	}
}

@media (min-width: 1024px) {
	#markten .platform-items > li:first-child .platform-item::before {
		background-image: url("https://rankingmasters.nl/wp-content/uploads/2026/09/jordy3-arm.png");
	}
}

/* ---------- #markten : één laag Jordy, bovenop de tegel ----------
   De aangeleverde uitsnede in zijn geheel, met de kaartlijn uit het bronbeeld
   (y 825) precies op de bovenrand van de tegel. Alles ligt vóór de tegel;
   de losse arm- en achtergrondlaag zijn hiermee vervallen. */
@media (min-width: 1024px) {
	#markten .platform-items > li:first-child .platform-item::before {
		content: none;
	}
	#markten .platform-items > li:first-child::before {
		content: "";
		position: absolute;
		left: -17.3%;
		bottom: 100%;
		margin-bottom: -21.3%;
		width: 94.7%;
		aspect-ratio: 956 / 989;
		background: url("https://rankingmasters.nl/wp-content/uploads/2026/09/jordy2-boven.png") no-repeat left bottom / contain;
		z-index: 2;
		pointer-events: none;
	}
	#markten .platform-items > li:first-child::after {
		background-image: url("https://rankingmasters.nl/wp-content/uploads/2026/09/jordy2-hand.png");
	}
}

/* Jordy weer achterlangs: afgesneden op de kaartlijn uit het bronbeeld, met
   die snijrand precies op de bovenrand van de tegel. Alleen de hand
   rechtsonder blijft een voorgrondlaag. */
@media (min-width: 1024px) {
	#markten .platform-items {
		padding-top: 200px;
	}
	#markten .platform-items > li:first-child::before {
		width: 94.7%;
		left: -17.3%;
		bottom: 100%;
		margin-bottom: -2px;
		aspect-ratio: 956 / 774;
		background-image: url("https://rankingmasters.nl/wp-content/uploads/2026/09/jordy4-boven.png");
		z-index: 0;
	}
}

/* kop naast Jordy in plaats van erboven: hij zakt de padding-zone in */
@media (min-width: 1024px) {
	#markten .copy {
		position: relative;
		z-index: 3;
		margin-bottom: -150px;
	}
}

/* Terug naar de volledige uitsnede achter de kaart: de mouw loopt links door
   tot onder de tegelrand en verdwijnt daar netjes achter. Alleen de hand
   rechtsonder ligt ervoor. */
@media (min-width: 1024px) {
	#markten .platform-items {
		padding-top: 236px;
	}
	#markten .platform-items > li:first-child::before {
		left: -17.3%;
		bottom: 100%;
		margin-bottom: -21.3%;
		width: 94.7%;
		aspect-ratio: 956 / 989;
		background-image: url("https://rankingmasters.nl/wp-content/uploads/2026/09/jordy2-boven.png");
		z-index: 0;
	}
}

/* kier dichten: de uitsnede is onderaan niet vlak (het shirt eindigt hoger dan
   het colbert), dus de figuur zakt een paar pixels verder achter de tegel */
@media (min-width: 1024px) {
	#markten .platform-items > li:first-child::before {
		margin-bottom: -23.6%;
	}
}

/* laatste beeld in een popup-kolom heeft geen ondermarge nodig; die 37px
   duwde de inhoud net over de vensterhoogte en riep de scrollbalk op */
.section-ux .ux-popup .rm-popup-split figure:last-child {
	margin-bottom: 0;
}

/* ROAS-regel: de beginwaarde en de pijl neutraal, alleen de eindwaarde groen */
.section-platform .platform-item .rm-arrow-list strong .basis {
	color: var(--Black);
	font-weight: 700;
}

/* --Black is op deze pagina niet gedefinieerd, dus de kleur hier expliciet */
.section-platform .platform-item .rm-arrow-list strong .basis {
	color: #000;
}

/* marktkaarten: koppen twee regels hoog reserveren zodat de vier lijsten
   op dezelfde hoogte beginnen ("Verenigd Koninkrijk" wikkelt als enige) */
@media (min-width: 1024px) {
	#markten .platform-item h3 {
		min-height: 60px;
	}
}

/* ---------- ux-popup : zichtbaar maken dat er te scrollen valt ----------
   1. een echte scrollbalk in plaats van het 2px-lijntje
   2. scroll-schaduwen boven en onder, die vanzelf verschijnen zodra er
      inhoud buiten beeld valt en weer weggaan aan het begin of eind
      (local-gradients scrollen mee, scroll-gradients blijven staan) */
.section-ux .ux-popup .copy {
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: #f16b37 #e3e8f5;
	background:
		linear-gradient(#ffffff 30%, rgba(255, 255, 255, 0)) top / 100% 44px local no-repeat,
		linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%) bottom / 100% 44px local no-repeat,
		radial-gradient(farthest-side at 50% 0, rgba(1, 37, 133, 0.16), rgba(1, 37, 133, 0)) top / 100% 16px scroll no-repeat,
		radial-gradient(farthest-side at 50% 100%, rgba(1, 37, 133, 0.16), rgba(1, 37, 133, 0)) bottom / 100% 16px scroll no-repeat;
}
.section-ux .ux-popup .copy::-webkit-scrollbar {
	width: 9px;
}
.section-ux .ux-popup .copy::-webkit-scrollbar-track {
	background-color: #e3e8f5;
	border-radius: 5px;
}
.section-ux .ux-popup .copy::-webkit-scrollbar-thumb {
	background-color: #f16b37;
	border-radius: 5px;
	border: 2px solid #e3e8f5;
}

/* Chrome negeert ::-webkit-scrollbar zodra scrollbar-width/-color is gezet en
   valt dan terug op de overlay-scrollbar van het systeem, die je pas ziet
   tijdens het scrollen. Die twee dus alleen voor browsers zonder de pseudo's. */
.section-ux .ux-popup .copy {
	scrollbar-width: auto;
	scrollbar-color: auto;
}
@supports not selector(::-webkit-scrollbar) {
	.section-ux .ux-popup .copy {
		scrollbar-width: thin;
		scrollbar-color: #f16b37 #e3e8f5;
	}
}

/* ---------- popup-knoppen : subtekst + pilvorm ook op mobiel ---------- */
.section-ux .plus-btn > span {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 2px;
}
.section-ux .plus-btn .btn-sub {
	display: block;
	font-family: "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.35;
	color: #5a6b9c;
	text-decoration: none;
}
.section-ux .plus-btn:hover .btn-sub,
.section-ux .plus-btn:focus .btn-sub {
	color: inherit;
}
@media (min-width: 1024px) {
	.section-ux .plus-btn {
		align-items: center;
		padding: 10px 10px 10px 22px;
	}
}
/* mobiel dezelfde pil als op desktop, in plaats van onderstreepte tekst */
@media (max-width: 1023px) {
	.section-ux .plus-btn-list {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 0;
	}
	.section-ux .plus-btn {
		flex-direction: row-reverse;
		justify-content: space-between;
		gap: 14px;
		text-decoration: none;
		border: 1px solid var(--Orange);
		border-radius: 24px;
		padding: 12px 12px 12px 18px;
		font-size: 15px;
	}
	.section-ux .plus-btn .icon {
		width: 28px;
		height: 28px;
	}
}

/* ---------- plus-icoon exact centreren ----------
   De plus in de theme-SVG loopt van 0 tot 8,047 binnen een viewBox van 9,
   dus het teken staat uit het midden. Hier een symmetrische variant: twee
   rechthoeken die allebei op 5 van 10 gecentreerd zijn. */
.section-ux .plus-btn .icon:before {
	width: 11px;
	height: 11px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='4.2' y='1' width='1.6' height='8' rx='.8' fill='%23fff'/%3E%3Crect x='1' y='4.2' width='8' height='1.6' rx='.8' fill='%23fff'/%3E%3C/svg%3E");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
@media (max-width: 1023px) {
	.section-ux .plus-btn .icon:before {
		width: 9px;
		height: 9px;
	}
}

/* ---------- correctie: de icoon-span is óók een direct kind van .plus-btn ----------
   De kolom-layout hoort alleen bij de tekst-span, anders krijgt de cirkel
   flex-direction: column met align-items: flex-start en schuift het plusje
   naar links. En zonder flex: 0 0 auto wordt de cirkel op mobiel platgedrukt. */
.section-ux .plus-btn > span.icon {
	display: flex;
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0;
	aspect-ratio: 1 / 1;
}

/* even maat zodat er geen halve pixel overblijft: 28px cirkel, 10px plus */
@media (max-width: 1023px) {
	.section-ux .plus-btn .icon:before {
		width: 10px;
		height: 10px;
	}
}

/* ---------- marktkaarten: vlaggetje voor de landsnaam ----------
   Vaste hoogte, breedte volgt de echte verhouding van de vlag (NL/FR 3:2,
   DE 5:3, VK 2:1). De ronde hoeken en het randje komen van de img zelf,
   zodat er geen extra wrapper nodig is in een veld dat door wp_kses_post gaat. */
.section-platform .platform-item h3 .rm-flag {
	display: inline-block;
	height: 20px;
	width: auto;
	margin: 0 10px 0 0;
	vertical-align: -3px;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(16, 24, 64, 0.12);
}
@media (max-width: 1023px) {
	.section-platform .platform-item h3 .rm-flag {
		height: 17px;
		margin-right: 8px;
		vertical-align: -2px;
	}
}

/* ---------- quote met portret: rond fotootje links van de naam ----------
   Alleen als het avatar-veld gevuld is; zonder foto blijft de footer één regel
   zoals hij was. De naam en de rol staan dan onder elkaar naast de cirkel. */
.section-case-video .case-video-quote footer.has-avatar {
	display: flex;
	align-items: center;
	gap: 16px;
}
.section-case-video .case-video-quote .quote-avatar {
	display: block;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: #e3e8f5;
}
.section-case-video .case-video-quote .quote-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.section-case-video .case-video-quote footer.has-avatar .quote-person {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.section-case-video .case-video-quote footer.has-avatar cite,
.section-case-video .case-video-quote footer.has-avatar .quote-role {
	display: block;
}
@media (min-width: 1024px) {
	.section-case-video .case-video-quote footer.has-avatar {
		gap: 18px;
	}
	.section-case-video .case-video-quote .quote-avatar {
		width: 64px;
		height: 64px;
	}
}

/* ---------- key_results : optionele derde regel onder het label ----------
   Het cijfer blijft groen in Gilroy, het label blijft de witte cursieve
   Playfair-regel, en de toelichting eronder is een volzin in Gilroy zonder
   cursief. Zo leest de context los van het cijfer in plaats van als
   verlengstuk van het label. Leeg veld = de oude kaart met twee regels. */
.section-key-results .key-result-sub {
	font-family: "Gilroy", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.45;
	text-align: center;
	color: rgba(250, 250, 252, 0.74);
	margin-top: 6px;
	max-width: 30ch;
}
@media (max-width: 1023px) {
	.section-key-results .key-result-sub {
		font-size: 13px;
		line-height: 1.4;
		margin-top: 4px;
		max-width: none;
	}
}

/* ---------- eyebrow-systeem : korte kicker + meetgegevens als pillen ----------
   Drie eyebrows op deze pagina droegen hun meetbasis als volzin: een oranje
   blok van twee regels dat je moet lezen in plaats van scannen. De kicker is nu
   een oranje pil met het RM-pijltje, en de meetgegevens staan als losse pillen
   eronder in dezelfde vormtaal als de info-balk onder de resultaten. Bewust
   geen :has(), maar een eigen wrapper-span, zodat de opmaak ook zonder
   :has()-ondersteuning niet als losse regel uit elkaar valt. */
.rm-eyebrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0 0 4px;
}
.rm-kick {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 17px 7px 14px;
	border-radius: 30px;
	background: rgba(241, 107, 55, 0.1);
	border: 1px solid #f16b37;
	color: #f16b37;
	font-family: "Gilroy", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
}
.rm-kick:before {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	transform: rotate(45deg);
	background-image: url("data:image/svg+xml,%3Csvg width=11 height=11 viewBox=0 0 11 11 fill=none xmlns=http://www.w3.org/2000/svg%3E%3Cpath d=M10.01.955A.957.957 0 0 0 9.056 0H2.303a.956.956 0 0 0 0 1.911l4.45-.002L.28 8.382a.955.955 0 1 0 1.35 1.35L8.1 3.263l.003 4.445a.956.956 0 0 0 1.911 0V.955h-.004Z fill=%23F16B37/%3E%3C/svg%3E");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
.rm-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.rm-meta > span {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 18px;
	background: rgba(8, 40, 140, 0.07);
	border: 1px solid rgba(8, 40, 140, 0.35);
	border-radius: 30px;
	font-family: "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.45;
	color: #012585;
	text-align: left;
}
.rm-meta .k {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(1, 37, 133, 0.6);
}
@media (max-width: 1023px) {
	.rm-eyebrow {
		align-items: flex-start;
		gap: 10px;
	}
	.rm-meta {
		justify-content: flex-start;
		gap: 7px;
	}
	.rm-meta > span {
		padding: 6px 13px;
		font-size: 13px;
		gap: 6px;
	}
	.rm-kick {
		font-size: 14px;
		white-space: normal;
	}
}

/* ---------- stappenbalk volgt nu op de video-quote ----------
   Op desktop staat .section-case-video op padding 0 en .section-case-nav op
   padding-top 0, omdat de balk daar vroeger op een sectie met eigen
   onderpadding volgde. Sinds de quote naar de opzet is verhuisd, kwam de
   kicker tegen de naamregel van de quote aan te staan. */
.section-case-video + .section-case-nav {
	padding-top: 56px;
}
@media (min-width: 1024px) {
	.section-case-video + .section-case-nav {
		padding-top: 104px;
	}
}
/* Pillen met een lange waarde (een definitie of een bronvermelding) houden op
   smalle schermen te weinig ruimte over naast hun label, waardoor de waarde in
   een kolom van een paar woorden breed valt. Alleen die pillen, gemarkeerd met
   .wide in de content, zetten hun label daarom boven de waarde. */
@media (max-width: 767px) {
	.rm-meta > span.wide {
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
		border-radius: 16px;
		padding: 8px 15px;
	}
}

/* ---------- eyebrow met een inleidende regel in plaats van pillen ----------
   Het resultaten-kapittel opende met een oranje volzin in de eyebrow-slot,
   terwijl de rest van de pagina daar een korte kicker heeft. De kapittelnaam
   zit nu in de oranje pil en de inleiding zakt naar gewone leestekst. */
.section-results .results-eyebrow .rm-eyebrow {
	align-items: flex-start;
	gap: 14px;
}
.rm-lead,
.results-eyebrow .rm-lead {
	font-family: "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.55;
	color: #0b1c47;
	max-width: 62ch;
}
@media (max-width: 1023px) {
	.rm-lead,
	.results-eyebrow .rm-lead {
		font-size: 16px;
		line-height: 1.5;
	}
}