/*
 * Brightway Consultancy — about.css
 * About page sections. Inherits the gabarit homepage visual language.
 * Gold-only decor — emerald stays a PECB signature on Home + Training.
 *
 * Scope:
 *   1. .bwc-about-hero          — page opener (glow + matrix flank)
 *   2. .bwc-about-beliefs       — 4 conviction cards (Double-Bezel + trim-mark)
 *      + .bwc-about-belief-card
 *   3. .bwc-about-origin        — 5/7 editorial split (heading | paragraphs)
 *   4. .bwc-about-leadership    — single centered founding-partner card
 *      + .bwc-about-partner-card
 *   5. .bwc-about-footprint     — typographic statement stack (no lists)
 *   6. .bwc-about-finale        — closing CTA
 *
 * Universal contract: hover gated, exact transitions, logical properties,
 * tokens only, prefers-reduced-motion handled in utilities.css §4.
 */

/* ===========================================================================
 * 1. HERO — same composition language as Services / Training / Contact.
 * ========================================================================= */

.bwc-about-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block-start: clamp(8rem, 6rem + 8vw, 14rem);
	padding-block-end: clamp(4rem, 3rem + 5vw, 7rem);
}

.bwc-about-hero::before {
	content: '';
	position: absolute;
	inset-block-start: -10rem;
	inset-inline-end: -12rem;
	inline-size: 56rem;
	block-size: 56rem;
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--bwc-accent-gold) 16%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 5%, transparent) 35%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-about-hero::after {
	content: '';
	position: absolute;
	inset-block-start: clamp(4rem, 4vw + 2rem, 7rem);
	inset-inline-start: clamp(1rem, 4vw, 4rem);
	inline-size: 21rem;
	block-size: 33rem;
	pointer-events: none;
	z-index: 0;

	background-image:
		radial-gradient(circle at 3.75rem 5.25rem,  var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 9.75rem 12.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 15.75rem 8.25rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 6.75rem 20.25rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 17.25rem 24.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 11.25rem 30.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at center, rgba(245, 241, 232, 0.14) 2px, transparent 3px);
	background-size:
		100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
		1.5rem 1.5rem;
	background-repeat:
		no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
		repeat;
}

@media (max-width: 767px) {
	.bwc-about-hero::after {
		display: none;
	}
}

.bwc-about-hero > .bwc-container {
	position: relative;
	z-index: 1;
}

.bwc-about-hero__inner {
	max-inline-size: 64ch;
	margin-inline-start: auto;
}

@media (min-width: 1024px) {
	.bwc-about-hero__inner {
		margin-inline-start: 38%;
	}
}

.bwc-about-hero__inner > * + * {
	margin-block-start: var(--bwc-space-3);
}

.bwc-about-hero h1 {
	margin-block-start: var(--bwc-space-1);
}

.bwc-about-hero__lede {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-lg);
	line-height: 1.5;
}

/* ===========================================================================
 * 2. WHAT WE BELIEVE — 4 conviction cards (Double-Bezel + trim-mark).
 *    Pattern shared with Training §Why-train. Number + heading + body,
 *    no icons (these are convictions, not service categories).
 * ========================================================================= */

.bwc-about-beliefs__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: var(--bwc-space-4);
}

.bwc-about-beliefs__item {
	display: flex;
}

.bwc-about-belief-card {
	inline-size: 100%;
}

.bwc-about-belief-card .bwc-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--bwc-space-2);
	block-size: 100%;
	padding-block: var(--bwc-space-4);
	padding-inline: var(--bwc-space-4);
	box-shadow: inset 0 1px 1px rgba(245, 241, 232, 0.06);
}

.bwc-about-belief-card .bwc-card__inner::before {
	content: '';
	position: absolute;
	inset-block-start: 0.875rem;
	inset-inline-end: 0.875rem;
	inline-size: 1rem;
	block-size: 1rem;
	border-block-start: 1px solid var(--bwc-accent-gold-40);
	border-inline-end: 1px solid var(--bwc-accent-gold-40);
	pointer-events: none;
}

.bwc-about-belief-card__num {
	font-family: var(--bwc-font-mono);
	font-size: var(--bwc-fs-xs);
	letter-spacing: 0.18em;
	color: var(--bwc-accent-gold);
}

.bwc-about-belief-card__title {
	font-size: var(--bwc-fs-xl);
	line-height: 1.2;
	margin: 0;
}

.bwc-about-belief-card__body {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-base);
	line-height: 1.55;
	margin: 0;
}

/* ===========================================================================
 * 3. ORIGIN — 5/7 editorial split. Heading anchors the column at left,
 *    the long-form paragraph carries the narrative on the right.
 *    Gold glow top-right ambient.
 * ========================================================================= */

.bwc-about-origin {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bwc-about-origin::before {
	content: '';
	position: absolute;
	inset-block-start: -8rem;
	inset-inline-end: -10rem;
	inline-size: 46rem;
	block-size: 46rem;
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--bwc-accent-gold) 11%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 3%, transparent) 35%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-about-origin > .bwc-container {
	position: relative;
	z-index: 1;
}

.bwc-about-origin__grid {
	row-gap: var(--bwc-space-4);
	align-items: start;
}

.bwc-about-origin__heading > * + * {
	margin-block-start: var(--bwc-space-1);
}

.bwc-about-origin__heading h2 {
	font-size: var(--bwc-fs-3xl);
	line-height: 1.1;
}

.bwc-about-origin__body {
	display: flex;
	flex-direction: column;
	gap: var(--bwc-space-3);
}

.bwc-about-origin__body p {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-base);
	line-height: 1.65;
	margin: 0;
}

/* ===========================================================================
 * 4. LEADERSHIP — single founding-partner card centered.
 *    Honest placeholder pattern: explicit "[Name — to be set]" + bio note
 *    flagging the upcoming update. Keeps the section structurally complete
 *    without inventing identity.
 * ========================================================================= */

.bwc-about-leadership {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bwc-about-leadership::before {
	content: '';
	position: absolute;
	inset-block-end: -10rem;
	inset-inline-end: clamp(1rem, 4vw, 4rem);
	inline-size: 22rem;
	block-size: 30rem;
	pointer-events: none;
	z-index: 0;

	background-image:
		radial-gradient(circle at 4.5rem 5.25rem,   var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 12.75rem 9.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 7.5rem 18.75rem,  var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 17.25rem 22.5rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at center, rgba(245, 241, 232, 0.14) 2px, transparent 3px);
	background-size:
		100% 100%, 100% 100%, 100% 100%, 100% 100%,
		1.5rem 1.5rem;
	background-repeat:
		no-repeat, no-repeat, no-repeat, no-repeat,
		repeat;
}

@media (max-width: 767px) {
	.bwc-about-leadership::before {
		display: none;
	}
}

.bwc-about-leadership > .bwc-container {
	position: relative;
	z-index: 1;
}

.bwc-about-leadership__wrap {
	display: flex;
	justify-content: center;
}

.bwc-about-partner-card {
	max-inline-size: 32rem;
	inline-size: 100%;
}

.bwc-about-partner-card .bwc-card__inner {
	position: relative;
	padding-block: var(--bwc-space-5);
	padding-inline: var(--bwc-space-5);
	box-shadow: inset 0 1px 1px rgba(245, 241, 232, 0.06);
}

.bwc-about-partner-card .bwc-card__inner::before {
	content: '';
	position: absolute;
	inset-block-start: 0.875rem;
	inset-inline-end: 0.875rem;
	inline-size: 1rem;
	block-size: 1rem;
	border-block-start: 1px solid var(--bwc-accent-gold-40);
	border-inline-end: 1px solid var(--bwc-accent-gold-40);
	pointer-events: none;
}

.bwc-about-partner-card__role {
	display: block;
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bwc-accent-gold);
}

.bwc-about-partner-card__name {
	margin: var(--bwc-space-2) 0 0;
	font-family: var(--bwc-font-display);
	font-size: var(--bwc-fs-xl);
	font-weight: 480;
	line-height: 1.2;
	color: var(--bwc-text);
}

.bwc-about-partner-card__bio {
	margin: var(--bwc-space-3) 0 0;
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-base);
	line-height: 1.6;
}

.bwc-about-partner-card__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	margin-block-start: var(--bwc-space-3);
	color: var(--bwc-accent-gold);
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: gap var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.bwc-about-partner-card__link:hover {
		gap: 0.7em;
	}
}

.bwc-about-partner-card__link-note {
	color: var(--bwc-text-subtle);
	font-family: var(--bwc-font-mono);
	font-size: var(--bwc-fs-xs);
	letter-spacing: 0;
}

/* ===========================================================================
 * 5. FOOTPRINT — typographic statement stack. Deliberately no country
 *    nomenclature (would suggest references not yet established). Three
 *    short lines + a clarifying note.
 * ========================================================================= */

.bwc-about-footprint {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bwc-about-footprint::before {
	content: '';
	position: absolute;
	inset-block-end: -12rem;
	inset-inline-start: -10rem;
	inline-size: 50rem;
	block-size: 50rem;
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--bwc-accent-gold) 11%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 3%, transparent) 35%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-about-footprint > .bwc-container {
	position: relative;
	z-index: 1;
}

.bwc-about-footprint__statements {
	list-style: none;
	margin: var(--bwc-space-2) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bwc-space-1);
}

.bwc-about-footprint__line {
	font-family: var(--bwc-font-display);
	font-size: var(--bwc-fs-2xl);
	font-weight: 480;
	line-height: 1.15;
	color: var(--bwc-text);
}

.bwc-about-footprint__line--accent {
	color: var(--bwc-accent-gold);
}

.bwc-about-footprint__note {
	max-inline-size: 60ch;
	margin: var(--bwc-space-5) 0 0;
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-base);
	line-height: 1.6;
}

/* ===========================================================================
 * 6. FINALE — closing CTA. Centered, same pattern as homepage Finale.
 * ========================================================================= */

.bwc-about-finale {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bwc-about-finale::before {
	content: '';
	position: absolute;
	inset-block-start: -8rem;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: 56rem;
	block-size: 44rem;
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--bwc-accent-gold) 12%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 3%, transparent) 40%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-about-finale > .bwc-container {
	position: relative;
	z-index: 1;
}

.bwc-about-finale__inner {
	max-inline-size: 56ch;
	margin-inline: auto;
	text-align: center;
}

.bwc-about-finale__inner > * + * {
	margin-block-start: var(--bwc-space-3);
}

.bwc-about-finale__lede {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-lg);
	line-height: 1.5;
}

.bwc-about-finale__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bwc-space-2);
	margin-block-start: var(--bwc-space-5);
}