/* ==========================================================================
   About / Framework Section (S5)
   ========================================================================== */

.section-about {
	padding: var(--section-padding);
}

.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: stretch;
}

.about-image-placeholder {
	width: 100%;
	aspect-ratio: 4 / 5;
	background: linear-gradient(135deg, #E8E6E2 0%, #D4D2CE 100%);
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cwv-muted);
	font-size: 0.85rem;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.about-image {
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.about-image img {
	width: 100%;
	height: 100%;
	border-radius: var(--radius-lg);
	object-fit: cover;
}

.about-content .eyebrow {
	color: var(--cwv-gold);
}

.about-content h2 {
	color: var(--cwv-text-dark);
	margin-bottom: 1.25rem;
}

.about-content .about-text {
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--cwv-text-body);
	margin-bottom: 1rem;
}

/* Deliverables list */
.deliverables-heading {
	color: var(--cwv-text-dark);
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 16px;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--cwv-border);
}

.deliverables-list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.deliverables-list li {
	position: relative;
	padding: 16px 18px;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--cwv-muted);
	background: var(--cwv-off-white, #f7f7f5);
	border: 1px solid var(--cwv-border);
	border-left: 3px solid var(--cwv-gold);
	border-radius: var(--radius-sm);
}

.deliverables-list li strong {
	display: block;
	color: var(--cwv-text-dark);
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 0.9rem;
}

.section-about .btn-link {
	color: var(--cwv-gold);
}

@media screen and (max-width: 768px) {
	.about-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.deliverables-list {
		grid-template-columns: 1fr;
	}

	.section-about {
		padding: var(--section-padding-sm);
	}
}