/* pages/home/cta.css
   Home: the closing red call-to-action band.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

.cta {
	position: relative;
	background: var(--red);
	color: #fff;
	overflow: hidden;
}

/* Deep-red wash so the flat band has some depth without any lines. */
.cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 150% at 8% 0%, #E01414 0%, var(--red) 42%, #9E0000 100%);
}

/* The three logo cubes, bleeding off the right edge behind the copy. */
.cta-mark {
	position: absolute;
	top: 50%;
	right: -60px;
	transform: translateY(-50%);
	width: 620px;
	height: auto;
	max-width: none;
	opacity: 0.13;
	pointer-events: none;
}

.cta-inner {
	position: relative;
	padding-top: 86px;
	padding-bottom: 86px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
}

.cta-rule { width: 64px; height: 3px; background: #fff; display: block; }

.cta-title {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 46px;
	line-height: 1.14;
	max-width: 24ch;
	color: #fff;
	text-wrap: balance;
}

@media (max-width: 980px) {
	.cta-inner { gap: 22px; padding-top: 62px; padding-bottom: 62px; }

	.cta-title { font-size: 32px; }

	.cta-mark { width: 380px; right: -90px; opacity: 0.1; }
}

@media (max-width: 680px) {
	.cta-title { font-size: 25px; }
}