/*
 * Premier Plasmotec Capabilities page module.
 *
 * The Gutenberg document and Core records remain authoritative. This file
 * repairs the /capabilities/ composition and its page-specific choreography.
 */

body.ppps-route-capabilities {
	--pp-capabilities-accent: #a9bac0;
	--pp-capabilities-accent-bright: #d7e0e3;
	--pp-capabilities-ink: #07090a;
	--pp-capabilities-graphite: #121617;
	--pp-capabilities-card: #1a1f21;
	--pp-capabilities-line-dark: rgba(255, 255, 255, .16);
	--pp-capabilities-line-light: rgba(7, 9, 10, .16);
}

body.ppps-route-capabilities .page-studio-content {
	overflow: clip;
}

body.ppps-route-capabilities :where(
	.pp-block__title,
	.pp-block__copy,
	.pp-mosaic__protected-copy,
	.pp-process-story__layout,
	.pp-process__stage,
	.pp-card-grid,
	.pp-technical-card
) {
	min-width: 0;
}

/* Opening frame: retain the governed mould image and establish a firm scale. */
body.ppps-route-capabilities .pp-block--industrial-hero {
	min-height: max(48rem, 100svh);
	border-bottom: 1px solid rgba(255, 255, 255, .18);
	background: var(--pp-capabilities-ink);
}

body.ppps-route-capabilities .pp-block--industrial-hero .pp-hero__inner {
	align-content: end;
	padding-bottom: clamp(3.25rem, 6.5vw, 7rem);
}

body.ppps-route-capabilities .pp-block--industrial-hero .pp-block__title {
	max-width: 11ch;
	font-size: clamp(4.5rem, 7.7vw, 9.4rem);
	line-height: .89;
	letter-spacing: -.064em;
	text-wrap: balance;
}

body.ppps-route-capabilities .pp-block--industrial-hero .pp-block__copy {
	max-width: 45rem;
	font-size: clamp(1rem, 1.2vw, 1.2rem);
	line-height: 1.56;
}

body.ppps-route-capabilities .pp-block--industrial-hero .pp-hero__media img {
	filter: grayscale(1) contrast(1.06) brightness(.72);
	transform: scale(1.025);
}

body.ppps-route-capabilities .pp-block--industrial-hero::after {
	background:
		linear-gradient(90deg, rgba(7, 9, 10, .76), rgba(7, 9, 10, .08) 72%),
		linear-gradient(0deg, rgba(7, 9, 10, .74), transparent 60%);
}

/* -------------------------------------------------------------------------- */
/* Connected-route collage: readable copy, bounded media and clean captions.   */
/* -------------------------------------------------------------------------- */

body.ppps-route-capabilities .pp-block--media-mosaic {
	background:
		linear-gradient(
			rgba(7, 9, 10, .045) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(7, 9, 10, .045) 1px,
			transparent 1px
		),
		var(--ppps-paper);
	background-size: 72px 72px;
}

body.ppps-route-capabilities .pp-block--media-mosaic .pp-mosaic__protected-copy {
	z-index: 30;
	grid-column: 4 / 10;
	align-self: center;
	width: min(100%, 47rem);
	margin-inline: auto;
	padding: clamp(2.25rem, 4vw, 4.5rem);
	border: 1px solid rgba(7, 9, 10, .12);
	background: rgba(243, 241, 234, .94);
	box-shadow: 0 30px 90px rgba(7, 9, 10, .08);
	backdrop-filter: blur(10px);
}

body.ppps-route-capabilities .pp-block--media-mosaic .pp-block__header {
	display: grid;
	max-width: none;
	gap: clamp(1rem, 2vw, 1.75rem);
}

body.ppps-route-capabilities .pp-block--media-mosaic .pp-block__title {
	max-width: 10.5ch;
	font-size: clamp(3.25rem, 5.45vw, 6.6rem);
	line-height: .91;
	letter-spacing: -.062em;
	text-wrap: balance;
}

body.ppps-route-capabilities .pp-block--media-mosaic [data-pp-media-role] {
	border: 1px solid rgba(7, 9, 10, .14);
	background: #d9dcdd;
	box-shadow: 0 26px 70px rgba(7, 9, 10, .13);
}

body.ppps-route-capabilities .pp-block--media-mosaic [data-pp-media-index="1"] {
	top: 9%;
	left: 2%;
	width: min(36%, 43rem);
	aspect-ratio: 4 / 3;
}

body.ppps-route-capabilities .pp-block--media-mosaic [data-pp-media-index="2"] {
	right: 2%;
	bottom: 7%;
	width: min(23%, 25rem);
	aspect-ratio: 3 / 4;
}

body.ppps-route-capabilities .pp-block--media-mosaic [data-pp-media-index="3"] {
	top: 7%;
	right: 3%;
	width: min(20%, 22rem);
	aspect-ratio: 1;
}

body.ppps-route-capabilities .pp-block--media-mosaic [data-pp-media-index="4"] {
	bottom: 6%;
	left: 4%;
	width: min(21%, 23rem);
	aspect-ratio: 16 / 10;
}

body.ppps-route-capabilities .pp-block--media-mosaic [data-pp-media-index="5"] {
right: auto;
	bottom: 2%;
	left: 31%;
	width: min(18%, 20rem);
	aspect-ratio: 16 / 10;
}

body.ppps-route-capabilities .pp-block--media-mosaic [data-pp-media-role] img {
	filter: saturate(.72) contrast(1.03);
	transition:
		filter 480ms ease,
		transform 900ms cubic-bezier(.22, 1, .36, 1);
}

body.ppps-route-capabilities .pp-block--media-mosaic .pp-mosaic__caption {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: auto;
	max-width: none;
	padding: 3.5rem .8rem .75rem;
	color: rgba(255, 255, 255, .9);
	font-family: var(--ppps-font-mono);
	font-size: clamp(.58rem, .14vw + .55rem, .7rem);
	font-weight: 600;
	letter-spacing: .055em;
	line-height: 1.42;
	text-transform: uppercase;
	background: linear-gradient(transparent, rgba(4, 6, 7, .88));
}

@media (min-width: 901px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
	body.ppps-route-capabilities.ppps-capability-full:not(
		.ppps-runtime-disabled,
		.ppps-readiness-failed,
		.ppps-motion-off,
		.ppps-motion-reduced
	) .pp-block--media-mosaic.is-motion-mounted {
		min-height: 152svh;
		padding: 0;
	}

	body.ppps-route-capabilities.ppps-capability-full:not(
		.ppps-runtime-disabled,
		.ppps-readiness-failed,
		.ppps-motion-off,
		.ppps-motion-reduced
	) .pp-block--media-mosaic.is-motion-mounted > .pp-block__inner {
		position: sticky;
		top: calc(var(--ppps-header-height) + var(--ppps-admin-offset));
		min-height: calc(
			100svh -
			var(--ppps-header-height) -
			var(--ppps-admin-offset)
		);
	}

	body.ppps-route-capabilities .pp-block--media-mosaic [data-pp-media-role]:hover img {
		filter: saturate(.92) contrast(1.05);
		transform: scale(1.035);
	}
}

/* -------------------------------------------------------------------------- */
/* Six-stage process: governed photographs, complete stage hold and reversals. */
/* -------------------------------------------------------------------------- */

body.ppps-route-capabilities .pp-block--process-chain {
	overflow: visible;
	background:
		linear-gradient(
			rgba(7, 9, 10, .045) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(7, 9, 10, .045) 1px,
			transparent 1px
		),
		var(--ppps-paper);
	background-size: 72px 72px;
}

body.ppps-route-capabilities .pp-process-story__header {
	margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

body.ppps-route-capabilities .pp-process-story__header .pp-block__title {
	max-width: 13ch;
	font-size: clamp(3.5rem, 6.4vw, 7.4rem);
	line-height: .91;
	letter-spacing: -.064em;
}

body.ppps-route-capabilities .pp-process__media-stack {
	overflow: clip;
	border: 1px solid var(--pp-capabilities-line-light);
	background:
		linear-gradient(
			rgba(255, 255, 255, .045) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255, 255, 255, .045) 1px,
			transparent 1px
		),
		#0b0e0f;
	background-size: 48px 48px;
	box-shadow: 0 34px 90px rgba(7, 9, 10, .17);
}

body.ppps-route-capabilities .pp-process__media {
	overflow: clip;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: scale(1.018);
	transition:
		opacity 260ms ease,
		transform 560ms cubic-bezier(.22, 1, .36, 1),
		visibility 0s linear 560ms;
}

body.ppps-route-capabilities .pp-process__media.is-active,
body.ppps-route-capabilities .pp-process__media[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

body.ppps-route-capabilities .pp-process__media::after,
body.ppps-route-capabilities .pp-process__stage-media::after {
	position: absolute;
	z-index: 2;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(5, 7, 8, .16), transparent 58%),
		linear-gradient(0deg, rgba(5, 7, 8, .42), transparent 38%);
	content: "";
	pointer-events: none;
}

body.ppps-route-capabilities .pp-capabilities-process-image {
	position: absolute;
	z-index: 1;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: saturate(.78) contrast(1.05);
	transform: scale(1.025);
	transition:
		filter 420ms ease,
		transform 1100ms cubic-bezier(.22, 1, .36, 1);
}

body.ppps-route-capabilities .pp-process__media.is-active
	.pp-capabilities-process-image,
body.ppps-route-capabilities .pp-process__media[aria-hidden="false"]
	.pp-capabilities-process-image {
	transform: scale(1);
}

body.ppps-route-capabilities [data-pp-capabilities-media="ready"] >
	.pp-procedural {
	opacity: 0;
	visibility: hidden;
}

body.ppps-route-capabilities [data-pp-capabilities-media="fallback"] >
	.pp-procedural {
	opacity: 1;
	visibility: visible;
}

body.ppps-route-capabilities .pp-process__counter {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: center;
	margin-top: 1rem;
	color: rgba(7, 9, 10, .72);
	font-family: var(--ppps-font-mono);
	font-size: .72rem;
	letter-spacing: .12em;
}

body.ppps-route-capabilities .pp-process__counter i {
	height: 4px;
	background:
		linear-gradient(
			90deg,
			var(--pp-capabilities-accent)
				calc(var(--pp-stage-progress, 0) * 100%),
			rgba(7, 9, 10, .16) 0
		);
	box-shadow: 0 0 18px rgba(169, 186, 192, .28);
}

body.ppps-route-capabilities .pp-process__stage {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

body.ppps-route-capabilities .pp-process__number {
	color: #66777d;
	font-family: var(--ppps-font-mono);
	font-size: .76rem;
	letter-spacing: .12em;
}

body.ppps-route-capabilities .pp-process__stage h3 {
	max-width: 12ch;
	font-size: clamp(2.4rem, 3.5vw, 4.3rem);
	line-height: .94;
	letter-spacing: -.055em;
}

body.ppps-route-capabilities .pp-process__stage > p {
	max-width: 31rem;
	font-size: clamp(.98rem, 1.18vw, 1.12rem);
	line-height: 1.58;
}

@media (min-width: 901px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
	body.ppps-route-capabilities.ppps-capability-full:not(
		.ppps-runtime-disabled,
		.ppps-readiness-failed,
		.ppps-motion-off,
		.ppps-motion-reduced
	) [data-pp-scene="indexed-story"].is-motion-mounted
		.pp-process-story__frame {
		z-index: 2;
		top: calc(
			var(--ppps-header-height) +
			var(--ppps-admin-offset) +
			clamp(.5rem, 2vh, 1.125rem)
		);
		height: min(
			80svh,
			calc(
				100svh -
				var(--ppps-header-height) -
				var(--ppps-admin-offset) -
				clamp(1rem, 4vh, 2.25rem)
			)
		);
		border-block: 1px solid rgba(7, 9, 10, .1);
		background: var(--ppps-paper);
		box-shadow: 0 -11rem 0 var(--ppps-paper);
	}

	body.ppps-route-capabilities.ppps-capability-full:not(
		.ppps-runtime-disabled,
		.ppps-readiness-failed,
		.ppps-motion-off,
		.ppps-motion-reduced
	) [data-pp-scene="indexed-story"].is-motion-mounted
		.pp-process-story__layout {
		grid-template-columns: minmax(0, 1.18fr) minmax(20rem, .82fr);
		align-items: stretch;
		gap: clamp(2.75rem, 6vw, 7rem);
	}

	body.ppps-route-capabilities.ppps-capability-full:not(
		.ppps-runtime-disabled,
		.ppps-readiness-failed,
		.ppps-motion-off,
		.ppps-motion-reduced
	) [data-pp-scene="indexed-story"].is-motion-mounted
		.pp-process__sticky {
		padding-block: clamp(.75rem, 2vh, 1.5rem);
	}

	body.ppps-route-capabilities.ppps-capability-full:not(
		.ppps-runtime-disabled,
		.ppps-readiness-failed,
		.ppps-motion-off,
		.ppps-motion-reduced
	) [data-pp-scene="indexed-story"].is-motion-mounted
		.pp-process__stage {
		padding: clamp(1.5rem, 4vh, 3.5rem) 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translate3d(0, 20px, 0);
		transition:
			opacity 220ms ease,
			transform 420ms cubic-bezier(.22, 1, .36, 1),
			visibility 0s linear 420ms;
	}

	body.ppps-route-capabilities.ppps-capability-full:not(
		.ppps-runtime-disabled,
		.ppps-readiness-failed,
		.ppps-motion-off,
		.ppps-motion-reduced
	) [data-pp-scene="indexed-story"].is-motion-mounted
		.pp-process__stage.is-active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition-delay: 0s;
	}
}

/* -------------------------------------------------------------------------- */
/* Capability selector: one visual system, generous media and precise motion.  */
/* -------------------------------------------------------------------------- */

body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"] {
	background:
		linear-gradient(
			rgba(255, 255, 255, .045) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255, 255, 255, .045) 1px,
			transparent 1px
		),
		var(--pp-capabilities-graphite);
	background-size: 72px 72px;
}

body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
	.pp-block__title {
	max-width: 13ch;
	font-size: clamp(3.6rem, 6.4vw, 7.5rem);
	line-height: .91;
	letter-spacing: -.064em;
}

body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
	.pp-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	border: 1px solid var(--pp-capabilities-line-dark);
	background: var(--pp-capabilities-line-dark);
}

body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
	.pp-technical-card {
	--pp-capabilities-card-padding: clamp(1.35rem, 2.2vw, 2.5rem);
	display: grid;
	min-width: 0;
	min-height: clamp(43rem, 49vw, 49rem);
	padding:
		0
		var(--pp-capabilities-card-padding)
		var(--pp-capabilities-card-padding);
	grid-template-rows: minmax(19rem, 23rem) auto auto auto 1fr auto;
	align-content: start;
	gap: 1rem;
	border: 0;
	color: rgba(255, 255, 255, .94);
	background: var(--pp-capabilities-card);
	transform: none;
	transition:
		background-color 360ms ease,
		box-shadow 600ms cubic-bezier(.22, 1, .36, 1),
		transform 600ms cubic-bezier(.22, 1, .36, 1);
}

body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
	.pp-technical-card__media-stack {
	position: relative;
	width: calc(100% + (2 * var(--pp-capabilities-card-padding)));
	height: 100%;
	margin-left: calc(-1 * var(--pp-capabilities-card-padding));
	overflow: clip;
	background: #e6e7e5;
}

body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
	.pp-technical-card__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: clip;
}

body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
	.pp-technical-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(.95) contrast(1.05);
	transform: scale(1.015);
	transition:
		filter 460ms ease,
		transform 900ms cubic-bezier(.22, 1, .36, 1);
}

body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
	.pp-technical-card__media figcaption {
	right: 0;
	bottom: 0;
	left: 0;
	max-width: none;
	padding: 4rem 1rem .9rem;
	color: rgba(255, 255, 255, .88);
	font-family: var(--ppps-font-mono);
	font-size: .65rem;
	font-weight: 600;
	letter-spacing: .045em;
	line-height: 1.42;
	text-transform: uppercase;
	background: linear-gradient(transparent, rgba(4, 6, 7, .9));
}

body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
	.pp-technical-card__number {
	margin-top: .75rem;
	color: var(--pp-capabilities-accent);
	font-family: var(--ppps-font-mono);
	font-size: .72rem;
	letter-spacing: .12em;
}

body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
	.pp-technical-card .pp-block__eyebrow {
	color: rgba(255, 255, 255, .58);
}

body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
	.pp-technical-card h3 {
	max-width: 14ch;
	margin: 0;
	color: #fff;
	font-size: clamp(1.75rem, 2.4vw, 2.8rem);
	line-height: 1;
	letter-spacing: -.045em;
}

body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
	.pp-technical-card > p:not(.pp-block__eyebrow) {
	max-width: 34rem;
	margin: 0;
	color: rgba(255, 255, 255, .68);
	font-size: clamp(.94rem, 1.05vw, 1.05rem);
	line-height: 1.55;
}

body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
	.pp-text-link {
	align-self: end;
	justify-self: start;
	color: #fff;
}

body.ppps-route-capabilities.ppps-capability-full.ppps-runtime-ready[
	data-pp-capabilities-enhanced="ready"
] [data-pp-capabilities-record][data-pp-capabilities-state="waiting"] {
	opacity: .56;
	transform: translate3d(0, 34px, 0);
}

body.ppps-route-capabilities.ppps-capability-full.ppps-runtime-ready[
	data-pp-capabilities-enhanced="ready"
] [data-pp-capabilities-record][data-pp-capabilities-state="visible"] {
	opacity: 1;
	transform: none;
}

body.ppps-route-capabilities.ppps-capability-full.ppps-runtime-ready[
	data-pp-capabilities-enhanced="ready"
] [data-pp-capabilities-record] {
	transition:
		opacity 340ms ease,
		background-color 360ms ease,
		box-shadow 600ms cubic-bezier(.22, 1, .36, 1),
		transform 680ms cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(min(var(--pp-capabilities-index, 0), 2) * 55ms);
}

@media (min-width: 901px) and (hover: hover) {
	body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
		.pp-technical-card:hover,
	body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
		.pp-technical-card:focus-within {
		z-index: 2;
		background: #232a2d;
		box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
		transform: translate3d(0, -10px, 0);
	}

	body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
		.pp-technical-card:is(:hover, :focus-within)
		.pp-technical-card__media img {
		filter: grayscale(.15) saturate(.82) contrast(1.05);
		transform: scale(1.055);
	}
}

/* Closing CTA is the deliberate black end-frame after the capability index. */
body.ppps-route-capabilities .pp-block--enquiry-cta {
	border-top: 1px solid var(--pp-capabilities-line-dark);
	background: var(--pp-capabilities-ink);
}

body.ppps-route-capabilities .pp-block--enquiry-cta .pp-block__title {
	max-width: 11ch;
	font-size: clamp(4rem, 7.2vw, 8.6rem);
	line-height: .9;
	letter-spacing: -.065em;
}

/* -------------------------------------------------------------------------- */
/* Compact, mobile and failure fallbacks remain complete normal-flow pages.    */
/* -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
		.pp-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
		.pp-technical-card {
		min-height: 41rem;
	}
}

@media (max-width: 900px), (max-height: 639px) {
	body.ppps-route-capabilities .pp-block--industrial-hero {
		min-height: 0;
	}

	body.ppps-route-capabilities .pp-block--industrial-hero .pp-block__title {
		font-size: clamp(3.2rem, 12.5vw, 5.4rem);
	}

	body.ppps-route-capabilities .pp-block--media-mosaic {
		min-height: 0;
		padding-block: clamp(5rem, 12vw, 7.5rem);
	}

	body.ppps-route-capabilities .pp-block--media-mosaic > .pp-block__inner {
		position: relative;
		top: auto;
		display: block;
		min-height: 0;
	}

	body.ppps-route-capabilities .pp-block--media-mosaic .pp-mosaic__protected-copy {
		width: 100%;
		margin-bottom: 2rem;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
	}

	body.ppps-route-capabilities .pp-block--media-mosaic .pp-mosaic {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	body.ppps-route-capabilities .pp-block--media-mosaic [data-pp-media-index] {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		width: auto;
		aspect-ratio: 4 / 3;
		opacity: 1;
		transform: none;
	}

	body.ppps-route-capabilities .pp-block--media-mosaic [data-pp-media-index="1"] {
		grid-column: 1 / -1;
	}

	body.ppps-route-capabilities .pp-process-story__runway,
	body.ppps-route-capabilities .pp-process-story__frame,
	body.ppps-route-capabilities .pp-process-story__layout,
	body.ppps-route-capabilities .pp-process {
		position: relative;
		top: auto;
		display: block;
		width: 100%;
		height: auto;
		min-height: 0;
		overflow: visible;
	}

	body.ppps-route-capabilities .pp-process__sticky,
	body.ppps-route-capabilities .pp-process__media-stack,
	body.ppps-route-capabilities .pp-process__counter {
		display: none;
	}

	body.ppps-route-capabilities .pp-process__stage {
		position: relative;
		inset: auto;
		display: grid;
		width: 100%;
		height: auto;
		min-height: 0;
		padding: 2rem 0 2.5rem;
		grid-template-columns: minmax(0, 1fr);
		border-top: 1px solid var(--pp-capabilities-line-light);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
	}

	body.ppps-route-capabilities .pp-process__stage-media {
		position: relative;
		display: block;
		width: 100%;
		min-height: 19rem;
		margin: 0 0 2rem;
		overflow: clip;
		background: var(--pp-capabilities-graphite);
	}

	body.ppps-route-capabilities .pp-process__stage h3 {
		font-size: clamp(2rem, 7.5vw, 3.5rem);
	}
}

@media (max-width: 640px) {
	body.ppps-route-capabilities .pp-block--media-mosaic .pp-mosaic {
		grid-template-columns: minmax(0, 1fr);
	}

	body.ppps-route-capabilities .pp-block--media-mosaic [data-pp-media-index="1"] {
		grid-column: auto;
	}

	body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
		.pp-card-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
		.pp-technical-card {
		min-height: 0;
		grid-template-rows: minmax(16rem, 64vw) auto auto auto auto auto;
	}

	body.ppps-route-capabilities [data-pp-card-presentation="capability_previews"]
		.pp-block__title,
	body.ppps-route-capabilities .pp-process-story__header .pp-block__title {
		font-size: clamp(3rem, 13vw, 4.8rem);
	}
}

body.ppps-route-capabilities:is(
	.ppps-runtime-disabled,
	.ppps-readiness-failed,
	.ppps-motion-off,
	.ppps-motion-reduced,
	.ppps-capability-lite,
	.ppps-capability-static,
	.ppps-capability-reduced,
	.ppps-capability-off
) .pp-block--media-mosaic {
	min-height: 0;
	padding-block: clamp(6rem, 9vw, 10rem);
}

body.ppps-route-capabilities:is(
	.ppps-runtime-disabled,
	.ppps-readiness-failed,
	.ppps-motion-off,
	.ppps-motion-reduced,
	.ppps-capability-lite,
	.ppps-capability-static,
	.ppps-capability-reduced,
	.ppps-capability-off
) .pp-block--media-mosaic > .pp-block__inner {
	position: relative;
	top: auto;
	display: block;
	min-height: 0;
	overflow: visible;
}

body.ppps-route-capabilities:is(
	.ppps-runtime-disabled,
	.ppps-readiness-failed,
	.ppps-motion-off,
	.ppps-motion-reduced,
	.ppps-capability-lite,
	.ppps-capability-static,
	.ppps-capability-reduced,
	.ppps-capability-off
) .pp-block--media-mosaic .pp-mosaic {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 1rem;
	margin-top: 2rem;
}

body.ppps-route-capabilities:is(
	.ppps-runtime-disabled,
	.ppps-readiness-failed,
	.ppps-motion-off,
	.ppps-motion-reduced,
	.ppps-capability-lite,
	.ppps-capability-static,
	.ppps-capability-reduced,
	.ppps-capability-off
) .pp-block--media-mosaic [data-pp-media-index] {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	width: auto;
	aspect-ratio: 4 / 3;
	opacity: 1;
	transform: none;
	transition: none;
}

body.ppps-route-capabilities:is(
	.ppps-runtime-disabled,
	.ppps-readiness-failed,
	.ppps-motion-off,
	.ppps-motion-reduced,
	.ppps-capability-lite,
	.ppps-capability-static,
	.ppps-capability-reduced,
	.ppps-capability-off
) [data-pp-capabilities-record] {
	opacity: 1;
	transform: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	body.ppps-route-capabilities :where(
		.pp-capabilities-process-image,
		.pp-process__media,
		.pp-technical-card,
		.pp-technical-card__media img,
		[data-pp-media-role] img
	) {
		animation: none;
		transition: none;
		transform: none;
	}
}