/* About page — only sections/pieces with no existing equivalent live here.
   Reused as-is elsewhere (see template-parts/about/*.php for which class
   each section borrows, no CSS duplicated for these):
     .page-hero* (page-hero.css, shared with Projects/Contact) → about hero
     .why-different bg/padding + light-bg header  → about story section
     colours + .founder-bar (why-different.css)
     .investment-metric (investment.css)          → about story stat boxes
     .why-act-now__header (why-act-now.css)       → about purpose header
     .section-header (main.css)                   → every header below
     explore-projects.php + explore-projects.css  → about opportunities tabs
     .btn / .btn--primary / .btn--tertiary (main.css)  → about CTA buttons
*/

/* Story ---------------------------------------------------------------- */

.about-story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-bottom: 64px; }

/* The header sits inside the left column, above the copy, rather than
   spanning full-width above the grid — overrides why-different's own
   80px header margin (see why-different.css), which assumes a full-width
   header instead. */
.about-story__left .section-header { margin-bottom: 24px; }
.about-story__copy p { font-size: 16px; line-height: 1.7; color: #404040; margin: 0 0 20px; }
.about-story__copy p:last-child { margin-bottom: 0; }

.about-story__media img,
.about-story__placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.about-story__placeholder { background: linear-gradient(160deg, #e5e0d5, #cfc6b3); }

.about-story__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }

.about-story__divider { border: none; border-top: 1px solid var(--border-light); margin: 64px 0; }

@media (max-width: 900px) {
	.about-story__grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
	.about-story__grid { gap: 40px; margin-bottom: 40px; }
	.about-story__stats { gap: 16px; }
	.about-story__divider { margin: 40px 0; }
}

/* Purpose (Mission / Vision) ---------------------------------------------- */

.about-purpose { background: var(--ink); color: var(--cream); padding: 120px 0; }
.about-purpose .section-header__headline { color: #ffffff; }
.about-purpose__header { margin-bottom: 64px; }
.about-purpose__grid { display: grid; grid-template-columns: 1fr 1fr; }

.purpose-card { padding: 56px 48px; }
.purpose-card--mission { background: var(--dark-card); }
.purpose-card--vision { background: var(--emerald); }
.purpose-card__label { display: block; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); margin-bottom: 16px; }
.purpose-card__title { font-size: clamp(22px, 2.4vw, 28px); text-transform: uppercase; color: #ffffff; margin: 0 0 16px; }
.purpose-card__body { font-size: 15px; line-height: 1.7; color: var(--cream-dim); margin: 0; }
.purpose-card--vision .purpose-card__body { color: rgba(245, 241, 235, 0.75); }

@media (max-width: 768px) {
	.about-purpose__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.about-purpose { padding-top: 40px; }
	.about-purpose__header { margin-bottom: 40px; }
	.purpose-card { padding: 32px 16px; }
}

/* Values ------------------------------------------------------------------ */

.about-values { background: #ffffff; padding: 120px 0; }
.about-values .section-header { margin-bottom: 48px; }
.about-values .section-header__eyebrow { color: #794332; }
.about-values .section-header__headline { color: #154533; }
.about-values .section-header__headline-accent { color: #936900; }

.about-values__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	border-top: 1px solid var(--border-light);
	padding-top: 28px;
}
.value-item { padding: 0 28px; }
.value-item:first-child { padding-left: 0; }
.value-item:last-child { padding-right: 0; }
.value-item:not(:last-child) { border-right: 1px solid var(--border-light); }
.value-item__title { font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: var(--ink); margin: 0 0 12px; }
.value-item__body { font-size: 14px; line-height: 1.6; color: #595959; margin: 0; }

@media (max-width: 1024px) {
	.about-values__grid { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
	.value-item:nth-child(3) { border-right: none; }
	.value-item:nth-child(4) { padding-left: 0; }
}
@media (max-width: 640px) {
	.about-values { padding: 40px 0; }
	.about-values .section-header { margin-bottom: 40px; }
	.about-values__grid { grid-template-columns: 1fr; row-gap: 0; padding-top: 16px; }
	.value-item { padding: 20px 0 !important; border-right: none !important; border-bottom: 1px solid var(--border-light); }
	.value-item:last-child { border-bottom: none; }
}

/* Reasons (rust gradient, numbered cards) --------------------------------- */

.about-reasons { background: linear-gradient(135deg, #9c5a3c 0%, #6e3a26 100%); color: #ffffff; padding: 120px 0; }
.about-reasons .section-header__copy { color: rgba(255, 255, 255, 0.8); }

.about-reasons__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }

.reason-card { background: rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.15); padding: 32px 28px; }
.reason-card__number { display: block; font-family: var(--font-serif); font-size: 15px; color: rgba(255, 255, 255, 0.6); margin-bottom: 20px; }
.reason-card__title { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: #ffffff; margin: 0 0 12px; }
.reason-card__body { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); margin: 0; }

@media (max-width: 900px) {
	.about-reasons__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.about-reasons { padding: 40px 0; }
	.about-reasons__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
}

/* Transaction (dark, copy+quote / image) ---------------------------------- */

.about-transaction { background: var(--ink); color: var(--cream); padding: 120px 0; }
.about-transaction__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-transaction__body { font-size: 15px; line-height: 1.7; color: var(--cream-dim); margin: 24px 0 32px; }
.about-transaction__quote { font-family: var(--font-serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.5; color: var(--gold); margin: 0; }

.about-transaction__media img,
.about-transaction__placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.about-transaction__placeholder { background: linear-gradient(160deg, var(--dark-card), #1a1a18); }

@media (max-width: 900px) {
	.about-transaction__grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
	.about-transaction { padding: 40px 0; }
	.about-transaction__grid { gap: 40px; }
}

/* Final CTA ---------------------------------------------------------------- */

.about-cta { background: #ffffff; padding: 120px 0 120px; text-align: center; }
.about-cta__inner { margin: 0 auto; }
.about-cta .section-header__eyebrow { color: #794332; text-align: center; }
.about-cta .section-header__headline { color: var(--ink); text-align: center; margin-bottom: 20px; }
.about-cta .section-header__headline-accent { color: #936900; }
.about-cta__subtext { font-size: 16px; line-height: 1.7; color: #595959; margin: 0 0 40px; }
.about-cta__actions { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.about-cta__note { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8a8a; margin: 0; }

@media (max-width: 640px) {
	.about-cta { padding: 40px 0; }
	.about-cta__actions { flex-direction: column; }
	.about-cta__actions .btn { width: 100%; }
}