/* ─── What We Offer ────────────────────────────────────── */
/* Editorial layout: bold typography, asymmetric grids, red accents on dark. */

.wwo					{ max-width: 1280px; margin: 0 auto; padding: 0; }


/* Shared bits */

.wwo-eyebrow			{ display: inline-block; font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #f50c33; margin: 0 0 0.85em 0; }

.wwo-section-head		{ max-width: 760px; margin: 0 0 2.5em 0; }
.wwo-section-head h2	{ font-size: clamp(32px, 4.5vw, 56px); line-height: 1.02; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 0.5em 0; }
.wwo-section-head .wwo-section-lede	{ font-size: 18px; line-height: 1.55; opacity: 0.75; margin: 0; }
.wwo-section-head--compact	{ margin-bottom: 1.5em; }
.wwo-section-head--compact h2	{ font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: #f50c33; }


/* Buttons (scoped to this section) */

.wwo-button				{ display: inline-flex; align-items: center; justify-content: center; padding: 0.95em 1.85em; border-radius: 999px; background: #f50c33; color: #FFF; font-size: 15px; font-weight: 500; text-decoration: none; border: 1px solid #f50c33; transition: transform 200ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease; }
.wwo-button:hover		{ transform: scale(1.04); }
.wwo-button:active		{ background: #FFF; color: #101210; }
.wwo-button--ghost		{ background: transparent; border-color: rgba(255, 255, 255, 0.25); color: #FFF; }
.wwo-button--ghost:hover	{ border-color: #f50c33; color: #f50c33; transform: scale(1.04); }


/* Hero */

.wwo-hero				{ position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 3.5em; align-items: center; padding: 1em 0 5em; margin-bottom: 5em; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.wwo-hero::before		{ content: ""; position: absolute; left: -8em; top: -4em; width: 28em; height: 28em; background: radial-gradient(circle at center, rgba(245, 12, 51, 0.18), rgba(245, 12, 51, 0) 65%); pointer-events: none; z-index: 0; filter: blur(8px); }
.wwo-hero-text			{ position: relative; z-index: 1; }
.wwo-hero-heading		{ font-size: clamp(44px, 7vw, 96px); line-height: 0.95; font-weight: 500; letter-spacing: -0.025em; margin: 0 0 0.45em 0; }
.wwo-hero-lede			{ font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; opacity: 0.85; max-width: 32em; margin: 0 0 2em 0; }
.wwo-hero-cta			{ display: flex; flex-wrap: wrap; gap: 0.75em; margin: 0; }

.wwo-hero-figure		{ position: relative; z-index: 1; margin: 0; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.wwo-hero-figure img	{ width: 100%; height: 100%; object-fit: cover; display: block; }


/* Pillars (Why train with us) */

.wwo-pillars			{ margin-bottom: 6em; }
.wwo-pillars-grid		{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5em; counter-reset: wwo-pillar; }
.wwo-pillar				{ position: relative; padding: 2em 1.75em; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; transition: border-color 250ms ease, transform 250ms ease, background 250ms ease; }
.wwo-pillar:hover		{ border-color: rgba(245, 12, 51, 0.4); transform: translateY(-2px); }
.wwo-pillar-num			{ font-size: 13px; font-weight: 600; letter-spacing: 0.18em; color: #f50c33; margin: 0 0 1.5em 0; opacity: 0.85; }
.wwo-pillar-title		{ font-size: 19px; font-weight: 600; line-height: 1.2; margin: 0 0 0.6em 0; }
.wwo-pillar-body		{ font-size: 14.5px; line-height: 1.55; opacity: 0.78; margin: 0; }


/* Classes (primary - alternating image-text rows) */

.wwo-classes			{ margin-bottom: 5em; scroll-margin-top: 1.5em; }
.wwo-class-list			{ display: flex; flex-direction: column; gap: 4em; }

.wwo-class				{ display: grid; grid-template-columns: 1.05fr 1fr; gap: 3em; align-items: center; }
.wwo-class:nth-child(even)	{ grid-template-columns: 1fr 1.05fr; }
.wwo-class:nth-child(even) .wwo-class-figure	{ order: 2; }

.wwo-class-figure		{ position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.wwo-class-figure img	{ width: 100%; height: 100%; object-fit: cover; display: block; }
.wwo-class-tag			{ position: absolute; top: 1em; left: 1em; padding: 0.45em 0.95em; border-radius: 999px; background: rgba(16, 18, 16, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; }

.wwo-class-body			{ }
.wwo-class-name			{ font-size: clamp(28px, 3.5vw, 44px); line-height: 1.05; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 0.35em 0; }
.wwo-class-tagline		{ font-size: 17px; line-height: 1.45; opacity: 0.8; margin: 0 0 1.5em 0; }

.wwo-class-stats		{ display: flex; flex-wrap: wrap; gap: 2em 2.5em; margin: 0 0 1.75em 0; padding: 1.1em 0; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.wwo-stat				{ }
.wwo-stat dt			{ font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin: 0 0 0.35em 0; }
.wwo-stat dd			{ font-size: 16px; font-weight: 500; margin: 0; line-height: 1; }

.wwo-class-description	{ font-size: 15.5px; line-height: 1.6; opacity: 0.85; margin: 0 0 1.5em 0; }
.wwo-class-highlights	{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55em 1em; }
.wwo-class-highlights li	{ position: relative; font-size: 14px; line-height: 1.45; padding-left: 1.25em; opacity: 0.85; }
.wwo-class-highlights li::before	{ content: ""; position: absolute; left: 0; top: 0.45em; width: 6px; height: 6px; border-radius: 50%; background: #f50c33; }


/* Per-class accent (border on figure, picks up class-type colour token) */

.wwo-class--crossfit .wwo-class-tag			{ color: #f50c33; }
.wwo-class--hyrox .wwo-class-tag			{ color: #f5c518; }
.wwo-class--bodytone .wwo-class-tag			{ color: #4ade80; }
.wwo-class--crossfit-teens .wwo-class-tag	{ color: #ff8c42; }


/* More ways to train (secondary classes grid) */

.wwo-more				{ margin-bottom: 6em; padding: 2.5em; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; }
.wwo-more-grid			{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25em; }
.wwo-more-card			{ position: relative; padding: 1.75em 1.5em; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; display: flex; flex-direction: column; transition: border-color 200ms ease, transform 200ms ease; }
.wwo-more-card:hover	{ border-color: rgba(245, 12, 51, 0.35); transform: translateY(-2px); }
.wwo-more-dot			{ width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-bottom: 1em; }
.wwo-more-card h3		{ font-size: 19px; font-weight: 600; line-height: 1.2; margin: 0 0 0.5em 0; }
.wwo-more-card p		{ font-size: 14.5px; line-height: 1.55; opacity: 0.78; margin: 0 0 1.25em 0; flex: 1; }
.wwo-more-cta			{ display: inline-flex; align-self: flex-start; padding-bottom: 2px; color: #f50c33; font-size: 14px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity 200ms ease; }
.wwo-more-cta:hover		{ opacity: 0.7; }


/* Coaches */

.wwo-coaches			{ margin-bottom: 6em; }
.wwo-coaches-grid		{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5em; }
.wwo-coach				{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 1.75em; align-items: start; padding: 1.5em; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; transition: border-color 250ms ease; }
.wwo-coach:hover		{ border-color: rgba(245, 12, 51, 0.3); }
.wwo-coach-figure		{ margin: 0; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); }
.wwo-coach-figure img	{ width: 100%; height: 100%; object-fit: cover; display: block; }
.wwo-coach-body			{ padding-top: 0.25em; }
.wwo-coach-name			{ font-size: 24px; font-weight: 500; line-height: 1.1; margin: 0 0 0.25em 0; letter-spacing: -0.01em; }
.wwo-coach-role			{ font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin: 0 0 0.85em 0; }
.wwo-coach-credential	{ display: inline-block; padding: 0.4em 0.85em; border-radius: 999px; background: rgba(245, 12, 51, 0.12); color: #f50c33; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; margin: 0 0 1em 0; line-height: 1.2; }
.wwo-coach-bio			{ font-size: 14.5px; line-height: 1.6; opacity: 0.82; margin: 0 0 1em 0; }
.wwo-coach-specialties	{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4em; }
.wwo-coach-specialties li	{ padding: 0.3em 0.75em; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 12px; font-weight: 500; opacity: 0.85; }


/* Programming philosophy */

.wwo-programming		{ margin-bottom: 6em; padding: 3em 2.5em; background: linear-gradient(135deg, rgba(245, 12, 51, 0.08), rgba(245, 12, 51, 0.02) 60%, rgba(255, 255, 255, 0.02)); border: 1px solid rgba(245, 12, 51, 0.18); border-radius: 18px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 3em; align-items: start; }
.wwo-programming-intro h2	{ font-size: clamp(28px, 3.5vw, 42px); line-height: 1.05; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 0.6em 0; }
.wwo-programming-body	{ font-size: 16px; line-height: 1.6; opacity: 0.85; margin: 0; }
.wwo-programming-points	{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5em 1.75em; }
.wwo-programming-points li	{ position: relative; padding-left: 1.25em; }
.wwo-programming-points li::before	{ content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: #f50c33; }
.wwo-programming-points h3	{ font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0 0 0.35em 0; }
.wwo-programming-points p	{ font-size: 14px; line-height: 1.5; opacity: 0.78; margin: 0; }


/* Affiliations strip */

.wwo-affiliations		{ margin-bottom: 6em; padding: 1.75em 0; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.wwo-affiliations-list	{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em 2.5em; }
.wwo-affiliations-list li	{ display: flex; flex-direction: column; gap: 0.25em; }
.wwo-affiliation-label	{ font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #FFF; margin: 0; line-height: 1.2; }
.wwo-affiliation-detail	{ font-size: 13.5px; line-height: 1.45; opacity: 0.6; margin: 0; }


/* Bottom CTA */

.wwo-cta				{ margin: 0 0 2em; padding: 3.5em 2.5em; background: rgba(245, 12, 51, 0.08); border: 1px solid rgba(245, 12, 51, 0.22); border-radius: 18px; text-align: center; }
.wwo-cta h2				{ font-size: clamp(26px, 3vw, 38px); line-height: 1.1; font-weight: 500; margin: 0 0 0.6em 0; max-width: 22ch; margin-left: auto; margin-right: auto; }
.wwo-cta p				{ font-size: 16px; line-height: 1.55; opacity: 0.85; margin: 0 auto 1.75em; max-width: 52ch; }
.wwo-cta-buttons		{ display: flex; flex-wrap: wrap; gap: 0.75em; justify-content: center; margin: 0; }


/* Tablet */

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

	.wwo-hero					{ grid-template-columns: 1fr; gap: 2.5em; padding-bottom: 4em; margin-bottom: 4em; }
	.wwo-hero-figure			{ aspect-ratio: 16 / 10; max-width: 600px; }
	.wwo-pillars-grid			{ grid-template-columns: repeat(2, 1fr); }
	.wwo-class					{ grid-template-columns: 1fr; gap: 1.75em; }
	.wwo-class:nth-child(even)	{ grid-template-columns: 1fr; }
	.wwo-class:nth-child(even) .wwo-class-figure	{ order: 0; }
	.wwo-class-figure			{ aspect-ratio: 16 / 10; }
	.wwo-class-list				{ gap: 3.5em; }
	.wwo-coaches-grid			{ grid-template-columns: 1fr; }
	.wwo-coach					{ grid-template-columns: 0.85fr 1.15fr; }
	.wwo-programming			{ grid-template-columns: 1fr; gap: 2em; padding: 2.5em 2em; }
	.wwo-affiliations-list		{ grid-template-columns: repeat(2, 1fr); }

}


/* Mobile */

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

	.wwo-hero					{ padding-bottom: 3em; margin-bottom: 3em; }
	.wwo-hero-cta				{ flex-direction: column; align-items: stretch; }
	.wwo-hero-cta .wwo-button	{ width: 100%; }

	.wwo-section-head			{ margin-bottom: 1.75em; }
	.wwo-section-head .wwo-section-lede	{ font-size: 16px; }

	.wwo-pillars-grid			{ grid-template-columns: 1fr; gap: 1em; }
	.wwo-pillar					{ padding: 1.5em 1.4em; }

	.wwo-classes				{ margin-bottom: 3.5em; }
	.wwo-class-list				{ gap: 2.5em; }
	.wwo-class-tagline			{ font-size: 16px; }
	.wwo-class-stats			{ gap: 1em 1.75em; padding: 0.85em 0; }
	.wwo-class-highlights		{ grid-template-columns: 1fr; }

	.wwo-more					{ padding: 1.75em 1.4em; margin-bottom: 3.5em; }
	.wwo-more-grid				{ grid-template-columns: 1fr; }

	.wwo-coaches				{ margin-bottom: 4em; }
	.wwo-coach					{ grid-template-columns: 1fr; gap: 1.25em; padding: 1.4em; }
	.wwo-coach-figure			{ aspect-ratio: 4 / 3; max-width: 280px; }

	.wwo-programming			{ padding: 2em 1.4em; margin-bottom: 4em; }
	.wwo-programming-points		{ grid-template-columns: 1fr; gap: 1.25em; }

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

	.wwo-cta					{ padding: 2em 1.5em; }
	.wwo-cta-buttons .wwo-button	{ width: 100%; }

}