/* ─── What We Offer ────────────────────────────────────── */

/* Bold colour-block editorial: full-bleed bands, split layouts, heavy display type.
   Two-tone headlines use a plain <span> (normal line) + <b> (accent line); the
   accent colour switches by surface — brand red on dark/light, dark on red bands. */


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

.wwo											{

													/* Horizontal bleed only — keep body top padding so the hero clears the nav */
													margin: 0 calc(-1 * var(--shell-pad)) 0;
}


/* ─── Display type (section overrides on shared .cfu-display) */

/* Base + --hero/--statement/--section/--on-brand live in global.css (.cfu-display).
   Only the values that genuinely differ from the shared component, plus the
   wwo-only variants (--class/--coach/--cta/--single), stay here. */

.wwo-display									{

	&.wwo-display--hero							{	margin-bottom: 0.65em; }

	&.wwo-display--section						{	max-width: 14ch; }

	&.wwo-display--section.wwo-display--single	{	max-width: none; }

	&.wwo-display--class						{	font-size: clamp(2.25rem, 6vw, 4.5rem); margin-bottom: 0.35em; }

	&.wwo-display--coach						{	font-size: clamp(1.75rem, 4vw, 3rem);
													margin-bottom: 0.25em;
													text-transform: none; letter-spacing: -0.02em;
	}

	&.wwo-display--on-brand						{	max-width: 16ch; }

	&.wwo-display--cta							{	font-size: clamp(2rem, 5.5vw, 4rem);
													max-width: 18ch;
													margin-inline: auto;
													text-transform: none; letter-spacing: -0.02em; line-height: 0.95;
	}
}

.wwo-lede										{	margin: 0 0 2em;
													max-width: 40ch;
													font-size: var(--fs-4); line-height: 1.55;
													color: var(--color-paper-mute);

	&.wwo-lede--narrow							{	max-width: 36ch; }
}

.wwo-actions									{	display: flex; flex-wrap: wrap; gap: 0.65em;
													margin: 0;

	&.wwo-actions--center						{	justify-content: center; }
}


/* ─── Colour bands ───────────────────────────────────────── */

.wwo-band										{	background: var(--color-brand);
													color: var(--color-ink-0);

	&.wwo-band--ink								{	background: var(--color-ink-0); color: var(--color-paper); }

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

	/* On red surfaces: dark eyebrow + dark accent line, light buttons */
	&.wwo-band--brand							{

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

		.wwo-display b							{	color: var(--color-ink-0); }

		.btn--primary							{	background: var(--color-ink-0); border-color: var(--color-ink-0);
													color: var(--color-paper);
			&:hover								{	background: var(--color-paper); border-color: var(--color-paper);
													color: var(--color-ink-0);
			}
		}

		.btn--ghost								{	border-color: var(--color-ink-0);
													color: var(--color-ink-0);
			&:hover								{	background: var(--color-ink-0); color: var(--color-paper); }
		}
	}
}

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


/* ─── Hero (split image / copy) ──────────────────────────── */

.wwo-hero										{	position: relative;
													display: flex;
													min-height: min(88vh, 920px);

													/* Same as body — blends with nav; no ink-0 panel behind the header */
													background: transparent;
													padding-top: clamp(1rem, 2.5vw, 1.75rem);

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

	.cfu-triple-plus--hero-tl					{	top: clamp(1rem, 2.5vw, 1.75rem); }

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

	.wwo-hero-media								{	margin: 0;
													min-height: 320px;
													padding-top: clamp(0.5rem, 1.5vw, 1rem);

		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;

		.wwo-hero-media							{	order: -1; min-height: 42vh; }
	}

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

		.wwo-hero-copy							{	padding-top: 2.5rem; padding-bottom: 2.5rem; }
	}
}


/* ─── Pillars (on brand band) ────────────────────────────── */

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

	> li										{	border-top: 3px solid var(--color-ink-0); padding-top: 1.5em; }

	/* num */
	> li > p:first-child						{	margin: 0 0 1.25em;
													font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem);
													font-weight: 700; line-height: 1; letter-spacing: -0.04em;
													color: var(--color-ink-0);
													opacity: 0.35;
	}

	h3											{	margin: 0 0 0.65em;
													font-family: var(--font-display); font-size: 1rem; font-weight: 700;
													line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em;
													color: var(--color-ink-0);
	}

	/* body */
	> li > p:last-child							{	margin: 0;
													font-size: var(--fs-5); line-height: 1.55; color: rgba(5, 6, 6, 0.82);
	}

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

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


/* ─── Classes statement band ─────────────────────────────── */

.wwo-statement									{	padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad) clamp(2.5rem, 5vw, 4rem);
													background: var(--color-ink-1);
													text-align: left;

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


/* ─── Class split bands ──────────────────────────────────── */

.wwo-class-band									{	display: flex;
													min-height: min(72vh, 780px);
													background: var(--color-ink-0);

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

	&.wwo-class-band--alt						{	background: var(--color-ink-2); }

	&.wwo-class-band--flip .wwo-class-band-media	{	order: 2; }

	.wwo-class-band-media						{	margin: 0;
													min-height: 280px;

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

	.wwo-class-band-copy						{	display: flex; flex-direction: column; justify-content: center;
													padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, var(--shell-pad));
	}

	.wwo-class-band-index						{	display: flex; align-items: baseline; gap: 0.85em;
													margin: 0 0 1.25em;
													font-family: var(--font-mono); font-size: 11px; font-weight: 500;
													letter-spacing: 0.14em; text-transform: uppercase;
													color: var(--color-paper-low);

		/* leading 0N */
		span:first-child						{	color: var(--color-paper); font-weight: 700; }
	}

	.wwo-class-tagline							{	margin: 0 0 1.75em;
													max-width: 38ch;
													font-size: var(--fs-4); line-height: 1.45;
													color: var(--color-paper-mute);
	}

	.wwo-class-stats							{	display: flex; flex-wrap: wrap; gap: 1.5em 2.5em;
													margin: 0 0 1.75em; padding: 1em 0;
													border-top: 1px solid var(--color-rule);
													border-bottom: 1px solid var(--color-rule);

		dt										{	margin: 0 0 0.35em;
													font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
													text-transform: uppercase; color: var(--color-paper-low);
		}

		dd										{	margin: 0;
													font-family: var(--font-display); font-size: 1.125rem; font-weight: 700;
													text-transform: uppercase; letter-spacing: 0.02em;
		}
	}

	.wwo-class-desc								{	margin: 0 0 1.5em;
													max-width: 48ch;
													font-size: var(--fs-4); line-height: 1.6;
													color: var(--color-paper-mute);
	}

	.wwo-class-highlights.u-points				{	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
													gap: 0.5em 1.5em;
	}

	.wwo-class-cta								{	margin: 1.85em 0 0; }

	.wwo-class-cta-link							{	color: var(--color-paper);

		&:hover									{	opacity: 0.7; gap: 0.85em; }
	}

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

		&.wwo-class-band--flip .wwo-class-band-media	{	order: 0; }

		.wwo-class-band-media					{	min-height: 42vh; }
	}

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

		.wwo-class-highlights.u-points			{	grid-template-columns: 1fr; }
	}
}


/* ─── More ways to train (brand pillar grid) ─────────────── */

.wwo-more										{

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

	.wwo-more-head .wwo-display--on-brand		{	font-size: clamp(2rem, 5.5vw, 4.25rem); max-width: 18ch; }

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

.wwo-more-grid									{	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
													gap: clamp(1.25rem, 3vw, 2.5rem);

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

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

.wwo-more-pillar								{	display: flex; flex-direction: column;
													border-top: 3px solid var(--color-ink-0);
													padding-top: 1.5em;
													min-height: clamp(280px, 32vw, 380px);

	.wwo-more-pillar-num						{	margin: 0 0 0.5em;
													font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem);
													font-weight: 700; line-height: 1; letter-spacing: -0.04em;
													color: var(--color-ink-0);
													opacity: 0.35;
	}

	.wwo-more-pillar-tag						{	margin: 0 0 1em;
													font-family: var(--font-mono); font-size: 10px; font-weight: 500;
													letter-spacing: 0.14em; text-transform: uppercase;
													color: rgba(5, 6, 6, 0.55);
	}

	.wwo-more-pillar-title						{	margin: 0 0 0.65em;
													font-family: var(--font-display); font-size: 1rem; font-weight: 700;
													line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em;
													color: var(--color-ink-0);
	}

	.wwo-more-pillar-body						{	margin: 0 0 1.15em;
													font-size: var(--fs-5); line-height: 1.55; color: rgba(5, 6, 6, 0.82);
	}

	.u-points									{	margin-bottom: auto; }

	.wwo-more-pillar-cta						{	margin: 1.35em 0 0; padding-top: 1.15em;
													border-top: 1px solid rgba(5, 6, 6, 0.18);
	}

	@media screen and (max-width: 650px)		{	min-height: 0; }
}

.wwo-more-link									{	display: inline-flex; align-items: center; gap: 0.65em;
													font-family: var(--font-display); font-size: 11px; font-weight: 700;
													letter-spacing: 0.12em; text-transform: uppercase;
													text-decoration: none;
													transition: opacity var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);

	&.wwo-more-link--on-brand					{	color: var(--color-ink-0);
		&:hover									{	opacity: 0.7; gap: 0.85em; }
	}

	.wwo-more-link-arrow						{	font-family: var(--font-mono); font-size: 14px; line-height: 1; }
}


/* ─── Coaching team (photo hero breakout) ───────────────── */

.wwo-team-hero									{	position: relative;
													display: flex; align-items: flex-end; justify-content: flex-start;
													min-height: min(82vh, 880px);
													overflow: hidden; isolation: isolate;
													background: var(--color-ink-0);

	.wwo-team-hero-media						{	position: absolute; inset: 0;
													margin: 0;
													z-index: 0;

		img										{	width: 100%; height: 100%;
													object-fit: cover; object-position: center 25%;
													display: block;
		}
	}

	.wwo-team-hero-scrim						{	position: absolute; inset: 0; z-index: 1;

													/* ~25% lighter than original scrim so more of the photo reads through */
													background: linear-gradient(105deg, rgba(5, 6, 6, 0.71) 0%, rgba(5, 6, 6, 0.54) 36%, rgba(5, 6, 6, 0.15) 56%, rgba(5, 6, 6, 0.34) 100%), linear-gradient(0deg, rgba(5, 6, 6, 0.64) 0%, rgba(5, 6, 6, 0) 45%);
													pointer-events: none;
	}

	.wwo-team-hero-content						{	position: relative; z-index: 2;
													width: 50%; max-width: 720px;
													margin: 0;
													padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, var(--shell-pad)) clamp(2.5rem, 5vw, 5rem);

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

	.wwo-team-hero-title						{	margin-bottom: 0.6em; max-width: 14ch; }

	.wwo-team-hero-lede							{	margin: 0 0 1.75em;
													max-width: 46ch;
													font-size: var(--fs-4); line-height: 1.6;
													color: var(--color-paper-mute);
	}

	.wwo-team-hero-points						{	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
													gap: 0.5em 1.5em;
													width: 100%; max-width: none;
	}

	@media screen and (max-width: 650px)		{	min-height: min(70vh, 720px);

		.wwo-team-hero-content					{	width: 100%; max-width: none; }

		.wwo-team-hero-points					{	grid-template-columns: 1fr; }
	}
}


/* ─── Programming (brand band — matches more-ways / pillars) */

.wwo-programming								{

	.wwo-programming-head						{

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

		.wwo-display--on-brand					{	font-size: clamp(2rem, 5.5vw, 4.25rem); max-width: 18ch; }
	}

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

	.wwo-more-pillar							{	min-height: 0; }
}


/* ─── Affiliations + wordmark ────────────────────────────── */

.wwo-affiliations								{	position: relative;
													padding: clamp(3rem, 6vw, 5rem) var(--shell-pad) clamp(6rem, 12vw, 10rem);
													background: var(--color-ink-0);
													overflow: hidden;

	.wwo-affiliations-list						{	position: relative; z-index: 1;
													list-style: none;
													margin: 0; padding: 0;
													display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em 3em;

		/* label */
		p:first-child							{	margin: 0 0 0.35em;
													font-family: var(--font-display); font-size: var(--fs-5);
													font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
													line-height: 1.2;
		}

		/* detail */
		p + p									{	margin: 0;
													font-size: var(--fs-5); line-height: 1.5; color: var(--color-paper-low);
		}
	}

	.wwo-wordmark								{	position: absolute; left: var(--shell-pad); right: var(--shell-pad);
													bottom: -0.12em;
													margin: 0;
													font-family: var(--font-display); font-size: clamp(4rem, 16vw, 12rem);
													font-weight: 700; line-height: 0.85; letter-spacing: -0.04em;
													text-transform: uppercase; color: rgba(255, 255, 255, 0.04);
													pointer-events: none;
													white-space: nowrap;
	}

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

		.wwo-affiliations-list					{	grid-template-columns: repeat(2, 1fr); }
	}

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

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

		.wwo-wordmark							{	font-size: clamp(3rem, 22vw, 5rem); white-space: normal; }
	}
}


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

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

	.wwo-actions								{	flex-direction: column; align-items: stretch;

		.btn									{	width: 100%; justify-content: center; }
	}
}