/* ==========================================================================
   Pillars (Align / Capital / Execute)
   ========================================================================== */

.pillars {
	background:
		radial-gradient(70% 70% at 100% 100%, rgba(111, 139, 179, 0.2) 0%, rgba(14, 28, 54, 0) 70%),
		var(--ace-navy);
}

.pillars__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: var(--hairline-inverse);
}

.pillar {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem) var(--space-4) 0;
}

.pillar + .pillar {
	padding-left: clamp(1.5rem, 3vw, 3rem);
	border-left: var(--hairline-inverse);
}

.pillar__letter {
	font-family: var(--font-display);
	font-size: clamp(7rem, 5rem + 8vw, 13rem);
	font-weight: 200;
	font-style: italic;
	line-height: 0.85;
	color: transparent;
	-webkit-text-stroke: 1px var(--ace-gold-soft);
	margin-bottom: var(--space-4);
	padding-left: 0.08em;
}

.pillar__title {
	font-size: var(--fs-h3);
	font-weight: 350;
}

.pillar__text {
	max-width: 34ch;
	font-size: var(--fs-small);
	color: var(--text-inverse-muted);
}