.principles-cta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	min-block-size: var(--size-principles-cta-section);
	background: var(--color-hero);
}

.principles-cta__copy {
	display: flex;
	min-inline-size: 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-principles-cta-copy-gap);
	padding-inline: var(--space-principles-cta-copy-inline);
	background: var(--color-hero);
	color: var(--color-white);
}

.principles-cta__title {
	max-inline-size: var(--size-principles-cta-title);
	margin: 0;
	font-size: var(--fs-principles-cta-title);
	font-weight: var(--fw-bold);
	line-height: 1.3;
}

.principles-cta__title em {
	color: var(--color-accent-on-dark);
	font-style: italic;
}

.principles-cta__link { flex: none; }

.principles-cta__visual {
	position: relative;
	display: grid;
	min-block-size: var(--size-principles-cta-section);
	place-items: center;
	overflow: hidden;
	isolation: isolate;
}

.principles-cta__image,
.principles-cta__shade {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
}

.principles-cta__image {
	z-index: -2;
	object-fit: cover;
	object-position: center;
}

.principles-cta__shade { z-index: -1; background: var(--color-principles-cta-overlay); }

.principles-cta__panel {
	display: grid;
	inline-size: min(calc(100% - var(--space-principles-cta-panel-inline)), var(--size-principles-cta-panel));
	gap: var(--space-principles-cta-panel-gap);
	margin: 0;
	padding: var(--space-principles-cta-panel-padding);
	border-radius: var(--radius-principles-cta-panel);
	background: var(--color-audit-card);
	list-style: none;
}

.principles-cta__panel-item {
	transition: opacity 720ms ease, transform 720ms var(--ease-out);
	transition-delay: calc(280ms + var(--principles-cta-delay) * 180ms);
}

.principles-cta__card {
	display: flex;
	min-block-size: var(--size-principles-cta-card);
	align-items: center;
	gap: var(--space-principles-cta-card-gap);
	padding: var(--space-principles-cta-card-padding);
	border: var(--size-principles-cta-border) dashed var(--color-principles-cta-border);
	border-radius: var(--radius-principles-cta-card);
	background: var(--color-white);
}

.principles-cta__icon {
	display: grid;
	flex: none;
	inline-size: var(--size-principles-cta-icon-surface);
	block-size: var(--size-principles-cta-icon-surface);
	place-items: center;
	border-radius: var(--radius-principles-cta-icon);
	background: var(--color-trusted);
}

.principles-cta__icon .icon {
	inline-size: var(--size-principles-cta-icon);
	block-size: var(--size-principles-cta-icon);
}

.principles-cta__card-copy {
	display: flex;
	min-inline-size: 0;
	flex-direction: column;
	gap: var(--space-principles-cta-card-copy-gap);
}

.principles-cta__card-title,
.principles-cta__card-description { margin: 0; }

.principles-cta__card-title {
	font-size: var(--fs-principles-cta-card-title);
	font-weight: var(--fw-bold);
	line-height: 1;
}

.principles-cta__card-description {
	color: var(--color-text-muted);
	font-size: var(--fs-principles-cta-card-description);
	font-weight: var(--fw-medium);
	line-height: 1.15;
}

@media (max-width: 1023px) {
	.principles-cta { grid-template-columns: 1fr; }

	.principles-cta__copy {
		min-block-size: var(--size-principles-cta-copy-mobile);
		align-items: center;
		padding-block: var(--space-principles-cta-copy-block-mobile);
		text-align: center;
	}

	.principles-cta__title { max-inline-size: var(--size-principles-cta-title-mobile); }

	.principles-cta__link {
		block-size: var(--size-principles-cta-button-mobile);
		padding-inline: var(--space-principles-cta-button-inline-mobile);
		font-size: var(--fs-navigation-mobile);
	}

	.principles-cta__visual {
		min-block-size: var(--size-principles-cta-visual-mobile);
		place-items: center;
	}

	.principles-cta__image { object-position: center; }

	.principles-cta__panel {
		inline-size: min(calc(100% - var(--space-principles-cta-panel-inline-mobile)), var(--size-principles-cta-panel-mobile));
		gap: var(--space-principles-cta-panel-gap-mobile);
		padding: var(--space-principles-cta-panel-padding-mobile);
		border-radius: var(--radius-principles-cta-panel-mobile);
	}

	.principles-cta__card {
		min-block-size: var(--size-principles-cta-card-mobile);
		gap: var(--space-principles-cta-card-gap-mobile);
		padding: var(--space-principles-cta-card-padding-mobile);
		border-width: var(--size-principles-cta-border-mobile);
		border-radius: var(--radius-principles-cta-card-mobile);
	}

	.principles-cta__icon {
		inline-size: var(--size-principles-cta-icon-surface-mobile);
		block-size: var(--size-principles-cta-icon-surface-mobile);
		border-radius: var(--radius-principles-cta-icon-mobile);
	}

	.principles-cta__icon .icon {
		inline-size: var(--size-principles-cta-icon-mobile);
		block-size: var(--size-principles-cta-icon-mobile);
	}

	.principles-cta__card-copy { gap: var(--space-principles-cta-card-copy-gap-mobile); }
	.principles-cta__card-title { font-size: var(--fs-principles-cta-card-title-mobile); }
	.principles-cta__card-description { font-size: var(--fs-principles-cta-card-description-mobile); }
}

@media (prefers-reduced-motion: reduce) {
	.principles-cta__panel-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}