/* ==========================================================================
   Capabilities-pagina
   Een eigen laag bovenop de bestaande componenten: dezelfde huisstijl (navy,
   teal, Manrope, pillknoppen, 15px radius), maar strakker gezet en met een
   technische toon. Alles hangt onder .stc-capabilities, dus de rest van de
   site verandert niet. De body-class wordt gezet in de sandbox.
   ========================================================================== */

.stc-capabilities {
	--cap-navy: #00394d;
	--cap-teal: #00b7be;
	--cap-grey: #f1f2f4;
	--cap-support: #849ca6;
	--cap-line: rgba(0, 57, 77, 0.14);
}

/* ---------- Hero ---------- */

.stc-capabilities .intro .intro-content .label {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.stc-capabilities .intro .intro-content .label::before {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: var(--cap-teal);
}

.stc-capabilities .intro .intro-content :is(h1, .h1) {
	line-height: 1.04;
	letter-spacing: -0.015em;
}

@media (min-width: 993px) {
	.stc-capabilities .intro .intro-content :is(h1, .h1) {
		font-size: clamp(46px, 4.2vw, 70px);
	}

	.stc-capabilities .intro .intro-image {
		padding-bottom: 116%;
	}
}

/* Fijn technisch raster over de herofoto: alleen zichtbaar als je ernaar kijkt. */
.stc-capabilities .intro .intro-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
	background-size: 72px 72px;
	opacity: 0.5;
}

/* ---------- De keten ---------- */

.stc-capabilities .cap-chain {
	background: var(--cap-navy);
	color: #ffffff;
	border-radius: 30px;
	padding: var(--mediumlarge, 45px) var(--medium, 30px);
}

.stc-capabilities .cap-chain__label {
	margin: 0 0 var(--medium, 30px);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cap-teal);
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.stc-capabilities .cap-chain__label::before {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: currentColor;
}

.stc-capabilities .cap-chain__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
	grid-template-columns: 1fr;
	position: relative;
}

.stc-capabilities .cap-chain__step > a {
	display: block;
	position: relative;
	padding: 22px 0 22px 46px;
	color: inherit;
	text-decoration: none;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	transition: color 0.25s ease;
}

/* De rail met knooppunten (mobiel verticaal). */
.stc-capabilities .cap-chain__step > a::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(255, 255, 255, 0.16);
}

.stc-capabilities .cap-chain__step:last-child > a::before {
	bottom: 50%;
}

.stc-capabilities .cap-chain__step > a::after {
	content: "";
	position: absolute;
	left: 0;
	top: 28px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--cap-navy);
	box-shadow: 0 0 0 2px var(--cap-teal);
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.stc-capabilities .cap-chain__num {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--cap-teal);
}

.stc-capabilities .cap-chain__name {
	display: block;
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 800;
	line-height: 1.1;
	margin-top: 6px;
}

.stc-capabilities .cap-chain__note {
	display: block;
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
	max-width: 30ch;
}

.stc-capabilities .cap-chain__step > a:hover,
.stc-capabilities .cap-chain__step > a:focus-visible {
	color: var(--cap-teal);
}

.stc-capabilities .cap-chain__step > a:hover::after,
.stc-capabilities .cap-chain__step > a:focus-visible::after {
	background: var(--cap-teal);
	box-shadow: 0 0 0 6px rgba(0, 183, 190, 0.25);
}

.stc-capabilities .cap-chain__foot {
	margin: var(--medium, 30px) 0 0;
	padding-top: var(--small, 15px);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.7);
	font-size: 15px;
}

.stc-capabilities .cap-chain__foot strong {
	color: #ffffff;
	font-weight: 700;
}

/* Vanaf tablet: de keten wordt horizontaal, met de rail dwars door de knooppunten. */
@media (min-width: 768px) {
	.stc-capabilities .cap-chain__list {
		grid-template-columns: repeat(5, 1fr);
		gap: 0;
	}

	.stc-capabilities .cap-chain__step > a {
		padding: 44px 18px 0 0;
		border-top: 0;
		height: 100%;
	}

	.stc-capabilities .cap-chain__step > a::before {
		left: 0;
		right: 0;
		top: 5px;
		bottom: auto;
		width: auto;
		height: 1px;
	}

	.stc-capabilities .cap-chain__step:last-child > a::before {
		right: auto;
		width: 11px;
		bottom: auto;
	}

	.stc-capabilities .cap-chain__step > a::after {
		top: 0;
	}

	.stc-capabilities .cap-chain__note {
		font-size: 14px;
		max-width: none;
	}
}

/* ---------- Technische lijntekening ----------
   Eigen schema, geen bestaande machine: aanvoer, wassen, transport, wegen,
   verpakken en controleren als één lijn. Getekend in SVG, dus haarscherp op elk
   scherm en licht van gewicht. Op smalle schermen schuift de tekening opzij in
   plaats van onleesbaar klein te worden. */

.stc-capabilities .cap-schema {
	background: var(--cap-grey);
	border-radius: 30px;
	padding: var(--mediumlarge, 45px) var(--medium, 30px);
}

.stc-capabilities .cap-schema__label {
	margin: 0 0 var(--smallmedium, 22px);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cap-navy);
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.stc-capabilities .cap-schema__label::before {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: var(--cap-teal);
}

.stc-capabilities .cap-schema__frame {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.stc-capabilities .cap-schema__svg {
	display: block;
	width: 100%;
	min-width: 760px;
	height: auto;
}

.stc-capabilities .cap-schema__svg text {
	font-family: inherit;
	fill: var(--cap-navy);
}

.stc-capabilities .cap-schema__body {
	fill: none;
	stroke: var(--cap-navy);
	stroke-width: 2;
	stroke-linejoin: round;
}

.stc-capabilities .cap-schema__detail,
.stc-capabilities .cap-schema__leg {
	fill: none;
	stroke: var(--cap-navy);
	stroke-width: 1.25;
	stroke-linecap: round;
	opacity: 0.55;
}

.stc-capabilities .cap-schema__leg {
	stroke-dasharray: 4 5;
	opacity: 0.4;
}

.stc-capabilities .cap-schema__tick {
	stroke: var(--cap-teal);
	stroke-width: 1;
	opacity: 0.6;
}

.stc-capabilities .cap-schema__num {
	fill: var(--cap-teal);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.12em;
}

.stc-capabilities .cap-schema__naam {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.1em;
}

.stc-capabilities .cap-schema__onder {
	font-size: 13px;
	fill: var(--cap-support);
}

.stc-capabilities .cap-schema__dim line {
	stroke: var(--cap-support);
	stroke-width: 1;
}

.stc-capabilities .cap-schema__dim text {
	fill: var(--cap-support);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
}

.stc-capabilities .cap-schema__belt rect {
	fill: var(--cap-navy);
	opacity: 0.9;
}

.stc-capabilities .cap-schema__belt circle {
	fill: none;
	stroke: var(--cap-navy);
	stroke-width: 1.25;
	opacity: 0.4;
}

.stc-capabilities .cap-schema__flow {
	stroke: var(--cap-teal);
	stroke-width: 2;
	stroke-dasharray: 10 14;
}

@media (prefers-reduced-motion: no-preference) {
	.stc-capabilities .cap-schema__flow {
		animation: cap-flow 2.4s linear infinite;
	}
}

@keyframes cap-flow {
	to {
		stroke-dashoffset: -48;
	}
}

.stc-capabilities .cap-schema__foot {
	margin: var(--smallmedium, 22px) 0 0;
	padding-top: var(--small, 15px);
	border-top: 1px solid var(--cap-line);
	color: rgba(0, 57, 77, 0.7);
	font-size: 15px;
}

.stc-capabilities .cap-schema__hint {
	display: none;
	color: var(--cap-support);
}

@media (max-width: 860px) {
	.stc-capabilities .cap-schema__hint {
		display: inline;
	}

	.stc-capabilities .cap-schema {
		padding: var(--medium, 30px) var(--smallmedium, 22px);
	}
}

/* ---------- Branches ----------
   Zes kaarten naar het machineoverzicht per branche, met een live telling.
   Geen foto's: die waren er niet per branche, en zes keer dezelfde foto is
   erger dan geen foto. */

.stc-capabilities .cap-label {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 var(--medium);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cap-navy);
}

.stc-capabilities .cap-label::before {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: var(--cap-teal);
}

.stc-capabilities .cap-branches__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
	background: var(--cap-line);
	border: 1px solid var(--cap-line);
	border-radius: 20px;
	overflow: hidden;
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.stc-capabilities .cap-branches__lijst {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 993px) {
	.stc-capabilities .cap-branches__lijst {
		grid-template-columns: repeat(3, 1fr);
	}
}

.stc-capabilities .cap-branche > a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: var(--smallmedium);
	background: #ffffff;
	color: var(--cap-navy);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.stc-capabilities .cap-branche__naam {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.15;
}

.stc-capabilities .cap-branche__tekst {
	font-size: 15px;
	line-height: 1.5;
	color: rgba(0, 57, 77, 0.7);
	transition: color 0.25s ease;
}

.stc-capabilities .cap-branche__aantal {
	margin-top: auto;
	padding-top: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--cap-teal);
}

.stc-capabilities .cap-branche > a:hover,
.stc-capabilities .cap-branche > a:focus-visible {
	background: var(--cap-navy);
	color: #ffffff;
}

.stc-capabilities .cap-branche > a:hover .cap-branche__tekst,
.stc-capabilities .cap-branche > a:focus-visible .cap-branche__tekst {
	color: rgba(255, 255, 255, 0.75);
}

/* ---------- Genummerde capability-blokken ---------- */

.stc-capabilities main {
	counter-reset: cap;
}

.stc-capabilities .article-content > h2 {
	position: relative;
	padding-top: 46px;
	line-height: 1.08;
}

.stc-capabilities .article-content > h2::before {
	counter-increment: cap;
	content: counter(cap, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--cap-teal);
}

.stc-capabilities .article-content > h2::after {
	content: "";
	position: absolute;
	top: 9px;
	left: 42px;
	width: 56px;
	height: 1px;
	background: var(--cap-teal);
	opacity: 0.5;
}

/* De keten telt niet mee als capability-blok. */
.stc-capabilities article.article:has(.cap-chain) .article-content > h2::before,
.stc-capabilities article.article:has(.cap-chain) .article-content > h2::after {
	content: none;
}

/* Technisch hoekje op de foto's. */
.stc-capabilities .article-image::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 72px;
	height: 72px;
	border-top: 2px solid var(--cap-teal);
	border-left: 2px solid var(--cap-teal);
	border-radius: 15px 0 0 0;
	pointer-events: none;
}

/* ---------- Kaarten: het cijfer wordt het beeldmerk ---------- */

.stc-capabilities .blocks .block .block-image__title span {
	font-size: clamp(34px, 4vw, 52px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.stc-capabilities .blocks .block-content h4 {
	position: relative;
	padding-bottom: 12px;
}

.stc-capabilities .blocks .block-content h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 1px;
	background: var(--cap-teal);
}

/* ---------- Mobiel: dezelfde inhoud, veel minder scrollen ----------
   De pagina heeft vijftien secties. Op een telefoon kost het staande beeld en
   de ruime marges van het thema samen duizenden pixels. Hieronder wordt dat
   ingedikt zonder iets weg te laten: liggende beelden, halve marges en de
   stappenkaarten als compacte rij in plaats van zes vierkanten onder elkaar. */

@media (max-width: 992px) {
	.stc-capabilities article.article {
		margin: var(--mediumlarge) 0;
	}

	.stc-capabilities .blocks,
	.stc-capabilities .products,
	.stc-capabilities .stc-mw,
	.stc-capabilities .stc-up,
	.stc-capabilities .stc-yt {
		margin-top: var(--mediumlarge);
		margin-bottom: var(--mediumlarge);
	}

	/* Liggend beeld in plaats van vierkant scheelt een kwart hoogte per blok.
	   De selectors hieronder noemen bewust article.article en section.intro: het
	   thema doet dat ook, en met een kortere selector verliest deze regel. */
	.stc-capabilities article.article .article-image {
		aspect-ratio: 4 / 3;
	}

	.stc-capabilities article.article .article-image::after {
		width: 52px;
		height: 52px;
	}

	.stc-capabilities section.intro .intro-image {
		padding-bottom: 78%;
	}

	.stc-capabilities .article-content > h2 {
		padding-top: 38px;
	}

	/* De vijf schakels dichter op elkaar. */
	.stc-capabilities .cap-chain {
		padding: var(--medium) var(--smallmedium);
	}

	.stc-capabilities .cap-chain__step > a {
		padding: 16px 0 16px 42px;
	}

	.stc-capabilities .cap-chain__step > a::after {
		top: 22px;
	}

	.stc-capabilities .cap-chain__note {
		font-size: 14px;
		margin-top: 4px;
	}

	/* Stappenkaarten worden een rij: klein beeld links, tekst rechts. */
	.stc-capabilities section.blocks .block {
		grid-template-columns: 96px 1fr;
		align-items: start;
		gap: var(--extrasmall);
		padding: var(--extrasmall);
		border-radius: 20px;
	}

	.stc-capabilities section.blocks .block .block-content {
		padding: 6px 6px 6px 0;
	}

	.stc-capabilities section.blocks .block .block-image__title span {
		font-size: 22px;
	}

	.stc-capabilities section.blocks .row > [class*="col-"] + [class*="col-"] {
		margin-top: var(--extrasmall);
	}
}

/* ---------- Zijwaarts swipen op mobiel ----------
   De zes blokken naast elkaar, één per scherm, met stippen eronder. Niets wordt
   verborgen: alle tekst en beeld blijven staan, je schuift er langs. Op desktop
   bestaat deze constructie niet; daar staat gewoon de volle pagina. */

@media (max-width: 992px) {
	.stc-capabilities .cap-swipe {
		margin: var(--mediumlarge) 0;
	}

	.stc-capabilities .cap-swipe__track {
		display: flex;
		align-items: flex-start;
		gap: var(--extrasmall);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--small);
		padding: 0 var(--small);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.stc-capabilities .cap-swipe__track::-webkit-scrollbar {
		display: none;
	}

	.stc-capabilities .cap-swipe__track:focus-visible {
		outline: 2px solid var(--cap-teal);
		outline-offset: 4px;
		border-radius: 20px;
	}

	.stc-capabilities .cap-swipe__kaart {
		flex: 0 0 88%;
		scroll-snap-align: start;
		margin: 0;
	}

	/* Binnen een kaart geen paginamarges meer: die zitten al op het spoor. */
	.stc-capabilities .cap-swipe__kaart .container {
		width: 100%;
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}

	.stc-capabilities .cap-swipe__kaart .row {
		margin-left: 0;
		margin-right: 0;
	}

	.stc-capabilities .cap-swipe__kaart [class*="col-"] {
		padding-left: 0;
		padding-right: 0;
	}

	.stc-capabilities .cap-swipe__kaart .article-image {
		margin-bottom: var(--smallmedium);
	}

	.stc-capabilities .cap-swipe__dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: var(--smallmedium);
	}

	.stc-capabilities .cap-swipe__dot {
		appearance: none;
		-webkit-appearance: none;
		border: 0;
		padding: 0;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--cap-line);
		cursor: pointer;
		transition: background-color 0.25s ease, transform 0.25s ease;
	}

	.stc-capabilities .cap-swipe__dot.is-actief {
		background: var(--cap-teal);
		transform: scale(1.4);
	}

	/* Merkenwand en video's kosten samen ruim tweeduizend pixels en voegen op een
	   telefoon weinig toe; op desktop blijven ze gewoon staan. */
	.stc-capabilities section.stc-mw,
	.stc-capabilities section.stc-yt {
		display: none;
	}

}

/* ---------- Keuzebalk en inklapbare blokken (alleen mobiel) ----------
   De balk en de knoppen worden door JavaScript toegevoegd. Zonder JavaScript
   staat de pagina er gewoon volledig, dus er valt nooit inhoud weg. */

.stc-capabilities .cap-nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--cap-line);
	margin-top: var(--smallmedium);
}

.stc-capabilities .cap-nav__track {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 10px var(--small);
	scroll-padding-left: var(--small);
}

.stc-capabilities .cap-nav__track::-webkit-scrollbar {
	display: none;
}

.stc-capabilities .cap-nav__chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--cap-line);
	color: var(--cap-navy);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.stc-capabilities .cap-nav__num {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--cap-teal);
}

.stc-capabilities .cap-nav__chip.is-actief {
	background: var(--cap-navy);
	border-color: var(--cap-navy);
	color: #ffffff;
}

.stc-capabilities .cap-nav__chip.is-actief .cap-nav__num {
	color: var(--cap-teal);
}

/* De kop wordt de knop. */
.stc-capabilities .cap-blok .cap-blok__knop {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	padding: 0 34px 0 0;
	margin: 0;
	width: 100%;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	position: relative;
}

.stc-capabilities .cap-blok .cap-blok__knop::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -8px;
	border-right: 2px solid var(--cap-teal);
	border-bottom: 2px solid var(--cap-teal);
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}

.stc-capabilities .cap-blok.is-ingeklapt .cap-blok__knop::after {
	transform: rotate(-45deg);
	margin-top: -2px;
}

@media (max-width: 992px) {
	.stc-capabilities.cap-keuze-actief .cap-blok {
		margin: 0;
		border-bottom: 1px solid var(--cap-line);
	}

	.stc-capabilities.cap-keuze-actief .cap-blok .article-content > h2 {
		margin: 0;
		padding: 22px 0 22px 0;
	}

	.stc-capabilities.cap-keuze-actief .cap-blok .article-content > h2::before {
		top: 24px;
		left: auto;
		right: 34px;
		font-size: 12px;
	}

	.stc-capabilities.cap-keuze-actief .cap-blok .article-content > h2::after {
		display: none;
	}

	/* Ingeklapt: alleen de kop blijft staan. */
	.stc-capabilities .cap-blok.is-ingeklapt .article-content > *:not(h2),
	.stc-capabilities .cap-blok.is-ingeklapt .article-image {
		display: none;
	}

	/* Ook de kolom eromheen weg, anders blijft er lege ruimte staan. */
	.stc-capabilities .cap-blok.is-ingeklapt .row > div:has(.article-image) {
		display: none;
	}

	.stc-capabilities .cap-blok.is-ingeklapt .article-wrapper {
		padding: 0;
	}

	.stc-capabilities .cap-blok:not(.is-ingeklapt) .article-image {
		margin-bottom: var(--smallmedium);
	}

	.stc-capabilities .cap-blok:not(.is-ingeklapt) .article-content > *:not(h2) {
		margin-bottom: var(--extrasmall);
	}

	.stc-capabilities .cap-blok:not(.is-ingeklapt) .article-content__buttons {
		padding-bottom: var(--smallmedium);
	}

	/* Ankers landen onder de plakkende balk. */
	.stc-capabilities .cap-blok,
	.stc-capabilities [id^="anchor-"] {
		scroll-margin-top: 64px;
	}
}

@media (min-width: 993px) {
	.stc-capabilities .cap-nav {
		display: none;
	}
}

/* ---------- Rustige scroll-reveal ---------- */

@media (prefers-reduced-motion: no-preference) {
	.stc-capabilities [data-cap-reveal] {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 0.7s ease, transform 0.7s ease;
		will-change: opacity, transform;
	}

	.stc-capabilities [data-cap-reveal].is-visible {
		opacity: 1;
		transform: none;
	}
}