/* ─── Who We Are — listing page ────────────────────────── */

/* Capstone hero (team + ideology intro), brand-red creed band and the team
   roster grouped by role. Editorial full-bleed bands matching the rest of the
   site. Mirrors the What We Offer listing/detail design language. */


/* ─── Page shell ─────────────────────────────────────────── */

.wwa											{	margin: 0 calc(-1 * var(--shell-pad)) 0;
													--wwa-accent: var(--color-brand);
}


/* Display type + eyebrow are fully covered by the shared .cfu-display and
   .eyebrow--display in global.css — no section overrides needed here. */

.wwa-lede										{	margin: 0 0 1.5em;
													max-width: 46ch;
													font-size: var(--fs-4); line-height: 1.5;
													color: var(--color-paper-mute);
}

.wwa-section-lede								{	margin: 1.25em 0 0;
													max-width: 56ch;
													font-size: var(--fs-4); line-height: 1.55; color: var(--color-paper-mute);
}


/* ─── Capstone hero (split copy / image) ─────────────────── */

.wwa-hero										{	position: relative;
													display: flex;
													min-height: min(80vh, 860px);
													background: transparent;
													padding-top: clamp(0.5rem, 2vw, 1.25rem);

	> *											{	flex: 1 1 50%; min-width: 0; }

	.cfu-triple-plus--hero-tl					{	top: clamp(0.5rem, 2vw, 1.25rem); }

	.wwa-hero-copy								{	display: flex; flex-direction: column; justify-content: center;
													padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 5vw, var(--shell-pad)) clamp(2.5rem, 5vw, 4rem);
	}

	.wwa-hero-eyebrow							{	color: var(--wwa-accent); }

	.wwa-hero-body p							{	margin: 0 0 1em;
													max-width: 50ch;
													font-size: var(--fs-4); line-height: 1.6; color: var(--color-paper-mute);

		&:last-child							{	margin-bottom: 0; }
	}

	.wwa-hero-media								{	margin: 0; min-height: 320px;

		img										{	width: 100%; height: 100%; min-height: inherit;
													object-fit: cover; display: block;
		}
	}

	@media screen and (max-width: 1100px)		{	flex-direction: column; min-height: 0;

		.wwa-hero-media							{	order: -1; min-height: 44vh; }
	}
}

.wwa-hero-meta									{	list-style: none; margin: 1.75em 0 0; padding: 1.15em 0 0;
													display: flex; flex-wrap: wrap; gap: 1.25em 2.5em;
													border-top: 1px solid var(--color-rule);

	.wwa-hero-meta-label						{	display: block; margin-bottom: 0.4em;
													font-family: var(--font-mono); font-size: 10px; font-weight: 500;
													letter-spacing: 0.16em; text-transform: uppercase;
													color: var(--color-paper-low);
	}

	.wwa-hero-meta-value						{	display: block;
													font-family: var(--font-display); font-size: 1.125rem; font-weight: 700;
													text-transform: uppercase; letter-spacing: 0.02em;
													color: var(--color-paper);
	}
}


/* ─── Creed / ideology (brand band) ──────────────────────── */

.wwa-creed										{	background: var(--color-brand); color: var(--color-ink-0);

	.wwa-creed-inner							{	padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad);
													max-width: var(--layout-wide); margin-inline: auto;
	}

	.wwa-creed-head								{	margin-bottom: clamp(2.5rem, 5vw, 4rem); }

	.eyebrow									{	color: var(--color-ink-0); }

	.cfu-triple-plus							{	margin-bottom: 1.5em; }

	.wwa-creed-lede								{	margin: 1.25em 0 0;
													max-width: 58ch;
													font-size: var(--fs-4); line-height: 1.55; color: rgba(5, 6, 6, 0.82);
	}
}

.wwa-creed-grid									{	list-style: none; margin: 0; padding: 0;
													display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
													gap: clamp(1.25rem, 3vw, 2.5rem);

	@media screen and (max-width: 1100px)		{	grid-template-columns: repeat(3, minmax(0, 1fr)); }

	@media screen and (max-width: 700px)		{	grid-template-columns: 1fr; }
}

.wwa-creed-value								{	border-top: 3px solid var(--color-ink-0); padding-top: 1.5em;

	.wwa-creed-value-num						{	margin: 0 0 0.5em;
													font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem);
													font-weight: 700; line-height: 1; letter-spacing: -0.04em;
													color: var(--color-ink-0); opacity: 0.35;
	}

	.wwa-creed-value-title						{	margin: 0 0 0.55em;
													font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
													line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em;
													color: var(--color-ink-0);
	}

	.wwa-creed-value-body						{	margin: 0;
													font-size: var(--fs-5); line-height: 1.55; color: rgba(5, 6, 6, 0.82);
	}
}


/* ─── Team roster ────────────────────────────────────────── */

.wwa-team										{	padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad);
													background: var(--color-ink-0);

	.wwa-team-inner								{	max-width: var(--layout-wide); margin-inline: auto; }

	.wwa-team-head								{	margin-bottom: clamp(2.5rem, 5vw, 4rem); }
}

.wwa-team-grid									{	list-style: none; margin: 0; padding: 0;
													display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
													gap: clamp(1.25rem, 3vw, 2.25rem);

	@media screen and (max-width: 900px)		{	grid-template-columns: repeat(2, minmax(0, 1fr)); }

	@media screen and (max-width: 560px)		{	grid-template-columns: 1fr; }
}

.wwa-member										{	display: flex;

	.wwa-member-inner							{	display: flex; flex-direction: column; width: 100%;
													background: var(--color-ink-2);
													border: 1px solid var(--color-rule);
													text-decoration: none; color: inherit;
													overflow: hidden;
													transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
	}

	a.wwa-member-inner:hover,
	a.wwa-member-inner:focus-visible			{	transform: translateY(-4px); border-color: var(--wwa-accent, var(--color-brand));
													outline: none;
	}

	.wwa-member-media							{	position: relative; margin: 0;
													aspect-ratio: 4 / 5; overflow: hidden;
													background: linear-gradient(135deg, var(--color-ink-1), var(--color-ink-2));
													display: flex; align-items: center; justify-content: center;

		img										{	width: 100%; height: 100%; object-fit: cover; display: block;
													filter: grayscale(1) contrast(1.02);
													transition: filter var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
		}
	}

	.wwa-member-initials						{	font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4rem);
													font-weight: 700; color: var(--color-paper-quiet);
	}

	a.wwa-member-inner:hover .wwa-member-media img,
	a.wwa-member-inner:focus-visible .wwa-member-media img	{	filter: grayscale(0) contrast(1.03); transform: scale(1.03); }

	.wwa-member-copy							{	display: flex; flex-direction: column; flex: 1;
													padding: 1.5em 1.5em 1.65em;
	}

	.wwa-member-role							{	margin: 0 0 0.55em;
													font-family: var(--font-mono); font-size: 10px; font-weight: 500;
													letter-spacing: 0.16em; text-transform: uppercase;
													color: var(--color-brand);
	}

	.wwa-member-name							{	margin: 0 0 0.55em;
													font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
													line-height: 1.05; letter-spacing: -0.01em; color: var(--color-paper);
	}

	.wwa-member-blurb							{	margin: 0 0 1.25em;
													font-size: var(--fs-5); line-height: 1.55; color: var(--color-paper-mute);
	}

	.wwa-member-link							{	display: inline-flex; align-items: center; gap: 0.5em;
													margin-top: auto;
													font-family: var(--font-mono); font-size: 11px; font-weight: 500;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													color: var(--color-paper);

		.wwa-member-link-arrow				{	transition: transform var(--dur-base) var(--ease-out); }
	}

	a.wwa-member-inner:hover .wwa-member-link .wwa-member-link-arrow,
	a.wwa-member-inner:focus-visible .wwa-member-link .wwa-member-link-arrow	{	transform: translateX(0.35em); }
}


/* ─── Mobile (shared) ────────────────────────────────────── */

@media screen and (max-width: 650px)			{

	.wwa-hero-meta								{	gap: 1em 1.75em; }
}