/* ============================================================
   SOLDIER ABOUT TEMPLATE
   ============================================================ */

.soldier-about-template {
	background: var(--sa-black);
	color: var(--sa-mist);
}

/* HERO */
.about-hero {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background:
		linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%),
		var(--sa-black);
	padding: 80px 32px;
	border-bottom: 1px solid var(--sa-steel);
}

.about-hero-overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 50% 60% at 30% 50%, rgba(106, 110, 72, 0.15) 0%, transparent 70%),
		radial-gradient(ellipse 60% 70% at 75% 30%, rgba(212, 152, 46, 0.08) 0%, transparent 70%);
}

.about-hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(212, 152, 46, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(212, 152, 46, 0.04) 1px, transparent 1px);
	background-size: 60px 60px;
}

.about-hero-inner {
	position: relative;
	max-width: 900px;
	text-align: center;
	z-index: 1;
}

.about-hero-eyebrow {
	font-family: var(--sa-font-mono);
	font-size: 12px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--sa-amber);
	margin-bottom: 24px;
}

.about-hero-title {
	font-family: var(--sa-font-display);
	font-weight: 900;
	font-size: clamp(48px, 8vw, 100px);
	line-height: 0.9;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 0 0 28px;
	color: var(--sa-white);
}

.about-hero-title .accent { color: var(--sa-amber); }

.about-hero-sub {
	font-size: 16px;
	color: var(--sa-mist);
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.7;
}

/* STATS */
.about-stats {
	background: var(--sa-charcoal);
	padding: 50px 32px;
	border-bottom: 1px solid var(--sa-steel);
}

.about-stats-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	text-align: center;
}

.stat-block {
	border-right: 1px solid var(--sa-steel);
	padding: 0 16px;
}

.stat-block:last-child { border-right: none; }

.stat-num {
	font-family: var(--sa-font-display);
	font-weight: 900;
	font-size: clamp(36px, 4vw, 56px);
	line-height: 1;
	color: var(--sa-white);
	margin-bottom: 8px;
}

.stat-num span { color: var(--sa-amber); }

.stat-label {
	font-family: var(--sa-font-mono);
	font-size: 10px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--sa-smoke);
}

/* WP EDITOR CONTENT */
.about-content {
	padding: 80px 32px;
}

.about-content-inner {
	max-width: 800px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.8;
	color: var(--sa-mist);
}

.about-content-inner h2 {
	font-size: 36px;
	margin: 1.6em 0 0.6em;
	color: var(--sa-white);
}

.about-content-inner p { margin: 0 0 1.4em; }

/* VALUES */
.about-values {
	background: linear-gradient(180deg, var(--sa-charcoal) 0%, var(--sa-black) 100%);
	padding: 100px 32px;
}

.about-values-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.section-label {
	font-family: var(--sa-font-mono);
	font-size: 11px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--sa-amber);
	margin-bottom: 20px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.section-label::before {
	content: '';
	display: block;
	width: 24px;
	height: 1px;
	background: var(--sa-amber);
}

.about-section-title {
	font-family: var(--sa-font-display);
	font-weight: 900;
	font-size: clamp(40px, 5vw, 64px);
	line-height: 0.95;
	text-transform: uppercase;
	margin: 0 0 60px;
	color: var(--sa-white);
}

.values-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.value-card {
	background: var(--sa-gunmetal);
	padding: 36px 28px;
	border: 1px solid var(--sa-steel);
	position: relative;
	overflow: hidden;
	transition: border-color 0.2s, transform 0.2s;
}

.value-card:hover {
	border-color: var(--sa-amber);
	transform: translateY(-2px);
}

.value-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--sa-amber);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s;
}

.value-card:hover::before { transform: scaleX(1); }

.value-num {
	position: absolute;
	top: 18px;
	right: 22px;
	font-family: var(--sa-font-display);
	font-weight: 900;
	font-size: 60px;
	color: rgba(255, 255, 255, 0.04);
	line-height: 1;
}

.value-icon {
	font-size: 32px;
	margin-bottom: 18px;
}

.value-title {
	font-family: var(--sa-font-display);
	font-weight: 700;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sa-white);
	margin: 0 0 12px;
}

.value-desc {
	font-size: 14px;
	color: var(--sa-smoke);
	line-height: 1.7;
	margin: 0;
}

/* CTA */
.about-cta {
	background: var(--sa-charcoal);
	padding: 100px 32px;
	text-align: center;
	border-top: 1px solid var(--sa-steel);
}

.about-cta-inner {
	max-width: 700px;
	margin: 0 auto;
}

.cta-headline {
	font-family: var(--sa-font-display);
	font-weight: 900;
	font-size: clamp(40px, 5vw, 72px);
	line-height: 0.95;
	text-transform: uppercase;
	margin: 0 0 24px;
	color: var(--sa-white);
}

.cta-headline .accent { color: var(--sa-amber); }

.cta-text {
	font-size: 15px;
	color: var(--sa-mist);
	line-height: 1.7;
	margin-bottom: 36px;
}

.cta-actions {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
}

/* MOBILE */
@media (max-width: 768px) {
	.about-stats-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
	.stat-block { border-right: none; border-bottom: 1px solid var(--sa-steel); padding-bottom: 16px; }
	.stat-block:nth-child(3), .stat-block:nth-child(4) { border-bottom: none; padding-bottom: 0; }

	.values-grid { grid-template-columns: 1fr; }
	.cta-actions { flex-direction: column; align-items: center; }
}