/**
* 2bLimitless base styles + design tokens.
*
* Token values are pulled DIRECTLY from the Figma file (2bLimitless-Production)
* via the design variables — these are exact, not approximations. Every module
* must reference these variables rather than hardcoding values.
*/

:root {
	/* ---- Brand colours (exact from Figma) ---- */
	--twobl-slate: #1B2930;            /* primary dark / headings / dark sections */
	--twobl-green: #8DC540;            /* primary accent / CTA */
	--twobl-green-hover: #7FB13A;
	--twobl-green-dark-hover: #557626;
	--twobl-green-glow: #A2EF38;      /* blurred glow blobs on green heroes (Figma) */
	--twobl-green-light: #F4F9EC;
	--twobl-green-light-active: #DCEDC4;
	--twobl-blue: #3BC3DE;             /* secondary */
	--twobl-yellow: #FDB813;
	--twobl-red: #F15B4E;
	--twobl-white: #FFFFFF;
	--twobl-black: #0C0C0C;
	--twobl-bg: #F4F4F4;               /* page background */
	--twobl-blue-light: #E8EAEA;
	--twobl-grey-mid: #C3C3C3;
	--twobl-grey-dark: #757575;
	--twobl-stroke-dark: #66757B;
	
	/* ---- Text colours ---- */
	--twobl-text-heading: #1B2930;
	--twobl-text-heading-2: #32434A;
	--twobl-text-body: #4C5C63;
	--twobl-text-supporting: #66757B;
	--twobl-text-on-dark: #BDD1D9;
	
	/* ---- Type families ---- */
	--twobl-font-heading: "Anton", "Arial Narrow", sans-serif;
	--twobl-font-body: "Inter", system-ui, sans-serif;
	--twobl-font-alt: "Roboto", system-ui, sans-serif;
	
	/* ---- Type scale (responsive clamp: mobile min → Figma desktop max) ---- */
	--twobl-fs-hero: clamp(3rem, 9vw, 12.8125rem);   /* 205px */
	--twobl-fs-h1:   clamp(2.75rem, 8vw, 8.5rem);    /* 136px */
	--twobl-fs-h2:   clamp(2.25rem, 5.5vw, 5.6875rem); /* 91px */
	--twobl-fs-h3:   clamp(1.875rem, 4vw, 3.75rem);  /* 60px */
	--twobl-fs-h4:   clamp(1.5rem, 3vw, 2.5rem);     /* 40px */
	--twobl-fs-h5:   clamp(1.25rem, 2.2vw, 1.875rem);/* 30px */
	--twobl-fs-body: 1.25rem;   /* 20px Inter */
	--twobl-fs-body2: 1rem;     /* 16px Roboto */
	--twobl-fs-label: 0.8125rem;/* 13px Roboto, tracked, uppercase */
	--twobl-fs-button: 1.125rem;/* 18px Inter 600 */
	
	/* ---- Layout ---- */
	--twobl-container: 1320px; /* measured from Figma: content container is 1321px on the 2200px canvas */
	--twobl-gutter: clamp(1.25rem, 5vw, 4rem);
	
	/* ---- Spacing scale ---- */
	--twobl-space-sm: 0.75rem;
	--twobl-space-md: 1.5rem;
	--twobl-space-lg: 3rem;
	--twobl-space-xl: clamp(3.5rem, 8vw, 9rem);
	/* Where sticky page furniture parks. On the home page it has to clear the
	fixed header pill (101px); everywhere else the header scrolls away, so
	sticky elements sit close to the top of the viewport instead. */
	--twobl-sticky-top: 6rem;
	
	/* ---- Effects ---- */
	--twobl-radius: 24px;
	--twobl-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); /* "Droopy 10/40" */
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--twobl-font-body);
	font-size: var(--twobl-fs-body);
	color: var(--twobl-text-body);
	background: var(--twobl-white);
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
	font-family: var(--twobl-font-heading);
	font-weight: 400;
	line-height: 1.02;
	color: var(--twobl-text-heading);
	margin: 0 0 0.3em;
	text-transform: uppercase;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
/* Author-origin `display` rules (flex/grid cards etc.) beat the UA stylesheet's
`[hidden]{display:none}` regardless of specificity — every JS filter that
toggles the `hidden` attribute on a flex/grid item needs this to actually work. */
[hidden] { display: none !important; }

/* ---- Type utility classes (map to Figma text styles) ---- */
.t-hero  { font-family: var(--twobl-font-heading); font-size: var(--twobl-fs-hero); line-height: 1; text-transform: uppercase; }
.t-h1    { font-family: var(--twobl-font-heading); font-size: var(--twobl-fs-h1);   line-height: 1.02; text-transform: uppercase; }
.t-h2    { font-family: var(--twobl-font-heading); font-size: var(--twobl-fs-h2);   line-height: 1.02; text-transform: uppercase; }
.t-h3    { font-family: var(--twobl-font-heading); font-size: var(--twobl-fs-h3);   line-height: 1.05; text-transform: uppercase; }
.t-h4    { font-family: var(--twobl-font-heading); font-size: var(--twobl-fs-h4);   line-height: 1.1;  text-transform: uppercase; }
.t-h5    { font-family: var(--twobl-font-heading); font-size: var(--twobl-fs-h5);   line-height: 1.25; text-transform: uppercase; }
.t-body  { font-family: var(--twobl-font-body); font-size: var(--twobl-fs-body); line-height: 1.4; }
.t-body2 { font-family: var(--twobl-font-alt);  font-size: var(--twobl-fs-body2); line-height: 1.5; }
.t-label { font-family: var(--twobl-font-alt);  font-size: var(--twobl-fs-label); letter-spacing: 0.1875rem; text-transform: uppercase; }

/* ---- Buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--twobl-font-body);
	font-size: var(--twobl-fs-button);
	font-weight: 600;
	line-height: 1;
	padding: 1.3125rem 2.5rem;
	border-radius: 999px;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	
	/* Position-aware hover fill (see .btn::before below). */
	position: relative;
	overflow: hidden;
	isolation: isolate;
	--fx: 50%;   /* fill origin X — JS overrides with the cursor position */
	--fy: 50%;   /* fill origin Y */
	--fs: 0;     /* fill scale */
}

/*
* Position-aware hover fill: a circle twice the button's width that spawns at the
* cursor and scales up to flood the button, then collapses back on exit.
*
* `--fx`/`--fy` accept either a percentage (default 50% = centred) or a px value
* from JS — both resolve correctly because translate percentages are relative to
* this circle's own width, which is exactly 2x the button's.
*
* `isolation: isolate` + `z-index: -1` keeps the circle above the button's own
* background but below its label, so no markup change is needed.
*/
.btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--btn-flair, transparent);
	transform: translate(calc(var(--fx) - 50%), calc(var(--fy) - 50%)) scale(var(--fs));
	/* Gentle ease-out cubic — slower than a snappy UI transition so the fill
	glides in and trails the cursor rather than snapping. */
	transition: transform 0.75s cubic-bezier(0.33, 1, 0.68, 1);
	pointer-events: none;
	z-index: -1;
}
/* Driven by CSS alone (centred fill) so it still works without JS; the script
only refines the origin to the cursor. */
.btn:hover,
.btn:focus-visible { --fs: 1; }

.btn--primary {
	background: var(--twobl-green); 
	color: var(--twobl-slate);
	--btn-flair: rgba(12, 12, 12, 0.16); /* green → soft black overlay */
}
.btn--dark {
	background: var(--twobl-slate);
	color: var(--twobl-white);
	--btn-flair: var(--twobl-green);     /* slate → green */
}
.btn--dark:hover,
.btn--dark:focus-visible { color: var(--twobl-slate); } /* contrast on the green fill */
.btn--light {
	background: var(--twobl-white);
	color: var(--twobl-slate);
	--btn-flair: var(--twobl-green);     /* white → green */
}

@media (prefers-reduced-motion: reduce) {
	.btn::before { transition: none; } /* fills instantly = plain colour change */
}
.btn--outline {
	background: transparent;
	color: var(--twobl-slate);
	border: 1px solid var(--twobl-slate);
	padding: 0.9rem 1.5rem;
	--btn-flair: var(--twobl-green); /* fills green on hover, like the other variants */
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Slate text stays readable on the green fill; the border matches it so the
outline doesn't sit as a dark ring around the green. */
.btn--outline:hover,
.btn--outline:focus-visible {
	color: var(--twobl-slate);
	border-color: var(--twobl-green);
}

/* ---- Layout helpers ---- */
/* Visually hidden but still announced by screen readers. Defined here rather
than leaning on WordPress core's copy, which isn't guaranteed to be enqueued
on every page of a custom theme — if it isn't, labels using this class would
render as stray visible text. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.container {
	width: 100%;
	max-width: var(--twobl-container);
	margin-inline: auto;
	/* No padding at >=1320px so the content edge lines up exactly with the header
	pill (both are 1320 wide, centred). Below that the viewport is narrower than
	the container, so add a gutter — otherwise content touches the screen edge. */
}
@media (max-width: 1320px) {
	.container { padding-inline: clamp(1.25rem, 4vw, 2rem); }
}
.section { padding-block: var(--twobl-space-xl); }
.section--dark  { background: var(--twobl-slate); }
.section--dark  h1, .section--dark h2, .section--dark h3, .section--dark h4, .section--dark h5 { color: var(--twobl-white); }
.section--dark  p { color: var(--twobl-text-on-dark); }
.section--green { background: var(--twobl-green); }
.section--blue  { background: var(--twobl-blue); }
.section--light { background: var(--twobl-green-light); }

/* ---- Header chrome: floating white pill nav, overlaid on top of the hero ---- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 2rem clamp(1rem, 3vw, 2rem) 0;
}
/* The pill only follows the scroll on the home page. On every inner page it sits
at the top of the document and scrolls away with the content, so sticky page
furniture (the coach profile card, the epigenetics bar) can pin near the top
of the viewport instead of hanging below a permanently parked header.
`absolute` rather than `static` so it still overlays the hero exactly as it
did before — nothing shifts down. */
body:not(.home) .site-header { position: absolute; }
body:not(.home) { --twobl-sticky-top: 0; }

.site-header__bar {
	max-width: var(--twobl-container);
	margin-inline: auto;
	background: var(--twobl-white);
	border-radius: 999px;
	box-shadow: var(--twobl-shadow);
	padding: 0.6rem 0.75rem 0.6rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 4.5rem;
}
.site-header__brand { flex: 0 0 auto; }
.site-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
}
.site-header__logo-mark { display: block; width: 45px;}
.site-header__logo-word { display: block; height: 10px; width: auto; margin-top: -1.2rem; margin-left: -18px; }
.site-header__nav { flex: 1 1 auto; }
.site-nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav > li { position: relative; }
.site-nav a {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	text-decoration: none;
	font-family: var(--twobl-font-body);
	font-weight: 600;
	font-size: 1rem;
	color: var(--twobl-slate);
}
.site-nav li.menu-item-has-children > a::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	margin-left: 0.15rem;
}
.site-nav > li > ul.sub-menu,
.site-nav > li > ul:not(.twobl-megamenu) {
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--twobl-white);
	border-radius: 16px;
	box-shadow: var(--twobl-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.site-nav > li:hover > ul:not(.twobl-megamenu),
.site-nav > li:focus-within > ul:not(.twobl-megamenu) { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav ul:not(.twobl-megamenu) a { padding: 0.6rem 0.75rem; border-radius: 8px; display: flex; }
.site-nav ul:not(.twobl-megamenu) a:hover { background: var(--twobl-green-light); }

/* ---- Mega Menu Component ---- */
.site-header__bar { position: relative; }
.twobl-nav__has-megamenu { position: static !important; }

.twobl-megamenu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	width: calc(100vw - 2 * clamp(1.25rem, 4vw, 3rem));
	max-width: var(--twobl-container);
	background: var(--twobl-white);
	border-radius: 24px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	z-index: 200;
}

/* Invisible hit-zone bridge connecting header bar nav link to mega menu panel */
.twobl-megamenu::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: 1.5rem;
	background: transparent;
	pointer-events: auto;
}

.twobl-nav__has-megamenu:hover .twobl-megamenu,
.twobl-nav__has-megamenu:focus-within .twobl-megamenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.twobl-megamenu__inner {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	min-height: 380px;
	border-radius: 24px;
	overflow: hidden;
}

.twobl-megamenu--resources .twobl-megamenu__inner,
.twobl-megamenu--promo .twobl-megamenu__inner {
	grid-template-columns: 1fr 1fr 290px;
}

/* Col variants */
.twobl-megamenu__col {
	padding: 2.25rem 2.75rem;
	display: flex;
	flex-direction: column;
}
.twobl-megamenu__col--grey {
	background: #F4F6F4;
}
.twobl-megamenu__col--white {
	background: var(--twobl-white);
}
.twobl-megamenu__col--promo {
	padding: 1.25rem;
	background: var(--twobl-white);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Headings */
.twobl-megamenu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}
.twobl-megamenu__title {
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--twobl-slate);
	margin: 0 0 1.5rem;
	text-transform: none;
}
.twobl-megamenu__head .twobl-megamenu__title {
	margin-bottom: 0;
}
.twobl-megamenu__viewall {
	font-family: var(--twobl-font-alt);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--twobl-green-dark-hover);
	text-decoration: underline;
	transition: opacity 0.2s ease, color 0.2s ease;
}
.twobl-megamenu__viewall:hover,
.twobl-megamenu__viewall:focus-visible {
	opacity: 0.8;
	color: var(--twobl-slate);
}

/* Subgrid inside columns */
.twobl-megamenu__subgrid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 1.75rem;
	flex: 1;
}

/* Item lists */
.twobl-megamenu__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	background: transparent !important;
	box-shadow: none !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
}
.twobl-megamenu__link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	font-family: var(--twobl-font-alt);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--twobl-text-heading-2);
	text-decoration: none;
	padding: 0.4rem 0.6rem;
	margin-left: -0.6rem;
	border-radius: 8px;
	transition: color 0.2s ease, background-color 0.2s ease;
}
.twobl-megamenu__link:hover,
.twobl-megamenu__link:focus-visible {
	color: var(--twobl-green-dark-hover);
	background-color: rgba(141, 197, 64, 0.08);
}
.twobl-megamenu__link svg {
	opacity: 0.6;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.twobl-megamenu__link:hover svg,
.twobl-megamenu__link:focus-visible svg {
	opacity: 1;
	transform: translateX(4px);
}

/* Pill buttons */
.twobl-megamenu__pill {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.6rem 1.25rem;
	border-radius: 999px;
	font-family: var(--twobl-font-alt);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.twobl-megamenu__pill--green {
	background: var(--twobl-green);
	color: var(--twobl-slate);
}
.twobl-megamenu__pill--green:hover,
.twobl-megamenu__pill--green:focus-visible {
	background: var(--twobl-green-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(141, 197, 64, 0.35);
}
.twobl-megamenu__pill--lightgreen {
	background: var(--twobl-green-light-active);
	color: var(--twobl-slate);
}
.twobl-megamenu__pill--lightgreen:hover,
.twobl-megamenu__pill--lightgreen:focus-visible {
	background: #cbe3ad;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(141, 197, 64, 0.2);
}
.twobl-megamenu__pill svg {
	transition: transform 0.2s ease;
}
.twobl-megamenu__pill:hover svg,
.twobl-megamenu__pill:focus-visible svg {
	transform: translateX(3px);
}

/* Outline button at bottom */
.twobl-megamenu__btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	padding: 0.6rem 1.5rem;
	border: 1px solid var(--twobl-grey-mid);
	border-radius: 999px;
	font-family: var(--twobl-font-alt);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--twobl-slate);
	text-decoration: none;
	width: fit-content;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.twobl-megamenu__btn-outline:hover,
.twobl-megamenu__btn-outline:focus-visible {
	border-color: var(--twobl-slate);
	background-color: var(--twobl-white);
}

/* Promo Card ("SELLING FAST") */
.twobl-megamenu__card {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 310px;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.twobl-megamenu__card-bg {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.twobl-megamenu__card-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.twobl-megamenu__card-content {
	position: relative;
	z-index: 2;
	background: var(--twobl-green);
	padding: 1.5rem 1.25rem 1.25rem;
	border-radius: 50% 50% 0 0 / 25px 25px 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.twobl-megamenu__card-badge {
	width: 52px;
	height: 52px;
	background: var(--twobl-white);
	border-radius: 50%;
	margin-bottom: 0.75rem;
	margin-top: -2.5rem;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.twobl-megamenu__card-title {
	font-family: var(--twobl-font-heading);
	font-size: 2.25rem;
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--twobl-slate);
	margin: 0 0 1rem;
}
.twobl-megamenu__card-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.25rem;
	background: var(--twobl-slate);
	color: var(--twobl-white);
	border-radius: 999px;
	font-family: var(--twobl-font-alt);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.twobl-megamenu__card-btn:hover,
.twobl-megamenu__card-btn:focus-visible {
	background-color: #000;
	transform: translateY(-1px);
}

.site-header__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 1rem; }
.site-header__country { position: relative; }
.site-header__country-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: none;
	border: 0;
	font-family: var(--twobl-font-body);
	font-weight: 500;
	font-size: 1rem;
	color: var(--twobl-slate);
	cursor: pointer;
}
.site-header__country-toggle svg:last-child { transition: transform 0.2s ease; }
.site-header__country[data-open] .site-header__country-toggle svg:last-child { transform: rotate(180deg); }
.site-header__country-menu {
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 160px;
	background: var(--twobl-white);
	border-radius: 16px;
	box-shadow: var(--twobl-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 100;
}
.site-header__country[data-open] .site-header__country-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.site-header__country-menu button {
	display: block;
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 0;
	border-radius: 8px;
	background: none;
	font-family: var(--twobl-font-body);
	font-size: 0.9375rem;
	text-align: left;
	color: var(--twobl-slate);
	cursor: pointer;
}
.site-header__country-menu button:hover,
.site-header__country-menu li[aria-selected="true"] button {
	background: var(--twobl-green-light);
}
.site-header__cta { padding: 0.8rem 1.5rem; font-size: 1rem; }
.site-header__cta-short { display: none; }
.site-header__toggle { display: none; }

@media (max-width: 960px) {
	/* Mobile header (Figma): logo | "Book a call" | menu button. The country
	picker is desktop-only — it isn't in the mobile design at all, and the
	CTA takes its place as the one action worth surfacing on a small screen. */
	.site-header { padding-top: 1.25rem; }
	.site-header__bar {
		gap: 0.75rem;
		padding: 0.5rem 0.5rem 0.5rem 1.25rem;
	}
	.site-header__brand { margin-right: auto; }
	/* The logo — not the 44px menu button — is what sets the pill's height, so
	it's the lever for matching Figma's more compact mobile header. */
	.site-header__logo-mark { width: 38px; }
	.site-header__nav { display: none; }
	.site-header__country { display: none; }
	.site-header__cta {
		display: inline-flex;
		padding: 0.6rem 1.15rem;
		font-size: 0.9375rem;
	}
	.site-header__cta-long { display: none; }
	.site-header__cta-short { display: inline; }
	.site-header__toggle {
		/* Kept at the 44x44 minimum touch target even though the drawn icon is
		smaller — the bars are the visual, the button is the tap area. */
		display: flex;
		flex-direction: column;
		gap: 4px;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		cursor: pointer;
	}
	.site-header__toggle span {
		width: 24px;
		height: 3px;
		border-radius: 2px;
		background: var(--twobl-slate);
	}
	.site-header--nav-open .site-header__nav {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-top: 0.5rem;
		background: var(--twobl-white);
		border-radius: 20px;
		box-shadow: var(--twobl-shadow);
		padding: 1rem;
	}
	.site-header--nav-open .site-nav { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
	.site-header--nav-open .site-nav ul { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; }
	.site-header--nav-open .site-nav li.is-open > ul { display: block; }
}

/* ---- Footer chrome ---- */
.site-footer { background: var(--twobl-white); padding-top: clamp(3rem, 6vw, 5rem); overflow: hidden; }
.site-footer__top {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: flex-start;
	margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.site-footer__newsletter {
	grid-column: 1 / span 2;
	max-width: 620px;
}
.site-footer__newsletter-title {
	font-family: var(--twobl-font-heading);
	font-size: 1.75rem;
	line-height: 1;
	text-transform: uppercase;
	color: var(--twobl-slate);
	margin: 0 0 1.25rem;
}
.site-footer__newsletter-form {
	display: flex;
	align-items: center;
	border: 1px solid var(--twobl-grey-mid);
	border-radius: 999px;
	padding: 0.35rem 0.35rem 0.35rem 1.25rem;
	gap: 0.5rem;
	background: var(--twobl-white);
}
.site-footer__newsletter-form input {
	flex: 1;
	border: 0;
	background: none;
	padding: 0.4rem 0;
	font-family: var(--twobl-font-alt);
	font-size: 0.9375rem;
	color: var(--twobl-slate);
	outline: none;
}
.site-footer__newsletter-form input::placeholder {
	color: #8C9CA3;
}
.site-footer__newsletter-form button {
	border: 0;
	border-radius: 999px;
	background: var(--twobl-green);
	color: var(--twobl-slate);
	font-family: var(--twobl-font-alt);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.75rem 1.75rem;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.site-footer__newsletter-form button:hover {
	background-color: var(--twobl-green-hover);
	transform: translateY(-1px);
}
.site-footer__newsletter-copy {
	font-family: var(--twobl-font-alt);
	font-size: 16px;
	line-height: 1.5;
	color: var(--twobl-stroke-dark);
	margin: 1rem 0 0;
}
.site-footer__mark {
	grid-column: 3;
}
.site-footer__mark img {
	width: 175px;
	height: auto;
	display: block;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.site-footer__col-title {
	font-family: var(--twobl-font-heading);
	font-size: 2rem;
	line-height: 1;
	text-transform: uppercase;
	color: var(--twobl-slate);
	margin: 0 0 1.5rem;
}
.site-footer__section {
	display: flex;
	flex-direction: column;
}
.site-footer__eyebrow {
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--twobl-green);
	margin: 1.75rem 0 0.75rem;
	min-height: 1.265rem;
}
.site-footer__section:first-child .site-footer__eyebrow,
.site-footer__section:first-child .site-footer__eyebrow-spacer {
	margin-top: 0;
}
/* Visibility (not display) so the row keeps its height and column 2 stays
aligned with column 1's eyebrows on desktop; revealed on mobile, where the
single-column stack needs the real label instead of a blank gap. */
.site-footer__eyebrow--mirror { visibility: hidden; }
.site-footer__static-group {
	border-top: 1px solid #66757B;
	padding-top: 0.75rem;
	margin-bottom: 0.25rem;
}
.site-footer__static-title {
	font-family: var(--twobl-font-alt);
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--twobl-slate);
	margin: 0 0 0.4rem;
}
.site-footer__static-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.site-footer__static-list a,
.site-footer__pages a {
	font-family: var(--twobl-font-alt);
	font-size: 0.875rem;
	color: var(--twobl-stroke-dark);
	text-decoration: none;
	transition: color 0.2s ease;
}
.site-footer__static-list a:hover,
.site-footer__pages a:hover,
.site-footer__accordion-panel a:hover {
	color: var(--twobl-green-dark-hover);
}
.site-footer__pages { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer__cta-btn {
	/* padding: 0.8rem 1.75rem; */
	font-size: 0.9375rem;
}

.site-footer__accordion { border-top: 1px solid #E5ECEE; }
.site-footer__accordion-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--twobl-font-alt);
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--twobl-text-heading-2);
}
.site-footer__accordion-icon { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.site-footer__accordion-icon::before,
.site-footer__accordion-icon::after {
	content: "";
	position: absolute;
	background: var(--twobl-slate);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-footer__accordion-icon::before { width: 14px; height: 1.5px; }
.site-footer__accordion-icon::after { width: 1.5px; height: 14px; }
.site-footer__accordion.is-open .site-footer__accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.site-footer__accordion-panel {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0 0 0.75rem;
	flex-direction: column;
	gap: 0.4rem;
}
.site-footer__accordion.is-open .site-footer__accordion-panel { display: flex; }
.site-footer__accordion-panel a {
	font-family: var(--twobl-font-alt);
	font-size: 0.875rem;
	color: var(--twobl-stroke-dark);
	text-decoration: none;
}

.site-footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 1px solid #E5ECEE;
	padding-top: 1.5rem;
}
.site-footer__copy,
.site-footer__privacy {
	font-family: var(--twobl-font-alt);
	font-size: 0.8125rem;
	color: var(--twobl-stroke-dark);
	margin: 0;
}
.site-footer__privacy { text-decoration: none; }
.site-footer__privacy:hover { text-decoration: underline; }

.site-footer__wordmark-wrap {
	width: 100%;
	overflow: hidden;
	padding: 1.5rem 0 0;
}
.site-footer__wordmark {
	font-family: var(--twobl-font-heading);
	font-size: clamp(5rem, 16.5vw, 19rem);
	line-height: 0.78;
	letter-spacing: -0.02em;
	/* No text-transform: the brand is "2b Limitless" with a lowercase b, and
	uppercasing rendered it "2B LIMITLESS". The markup is already cased. */
	color: var(--twobl-slate);
	text-align: center;
	white-space: nowrap;
	margin: 0;
	padding: 0;
}

@media (max-width: 900px) {
	/* `flex-direction` was a no-op here — this is a grid container, so the three
	columns never collapsed and the logo stayed squeezed into a third of the
	width. Collapse the tracks instead. */
	.site-footer__top { grid-template-columns: 1fr; gap: 2rem; }
	.site-footer__newsletter { grid-column: auto; max-width: none; }
	.site-footer__mark { grid-column: auto; }
	.site-footer__columns { grid-template-columns: 1fr; }
}

/* ---- Footer, mobile (Figma) ----
Logo first and centred, then the newsletter, then the nav columns. */
@media (max-width: 640px) {
	.site-footer__top { gap: 1.75rem; margin-bottom: 2.5rem; }
	.site-footer__mark { order: -1; }              /* logo above the newsletter */
	.site-footer__mark img { width: 170px; margin-inline: auto; }
	/* Figma stacks this as "SIGN UP TO OUR / NEWSLETTER". At 32px the full string
	measures 334px against a 335px container — it fits by a single pixel, so it
	would sit on one line and flip to two on the slightest metric change.
	Constrained to 15rem (240px), between the 180px first line and the 334px
	full string, so the break is deliberate rather than incidental. */
	.site-footer__newsletter-title {
		text-align: center;
		font-size: 2rem;
		max-width: 15rem;
		margin: 0 auto 1.25rem;
	}
	.site-footer__newsletter-copy { margin-top: 1.25rem; }
	
	/* The mirrored labels are real content here, not spacers. */
	.site-footer__eyebrow--mirror { visibility: visible; }
	/* Desktop pads these rows apart to line the two columns up; stacked on mobile
	that reads as a large empty gap under each column title. */
	.site-footer__eyebrow { margin-top: 1.25rem; min-height: 0; }
	.site-footer__section:first-child .site-footer__eyebrow { margin-top: 0; }
	.site-footer__col-title { margin-bottom: 1rem; }
	.site-footer__columns { gap: 2.5rem; }
	
	.site-footer__cta-btn { display: flex; width: 100%; }
	
	/* Figma stacks the copyright above the privacy link rather than splitting
	them across the row, which wraps awkwardly at this width. */
	.site-footer__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}

/* =====================================================================
HOME PAGE MODULES
All module styles live here (single shared stylesheet) instead of a
separate style.css per block folder — easier to find/edit than hunting
through 14 files. Each block folder still owns its render.php / fields.php
/ block.json; only the CSS is centralised. Sections below are in the
same top-to-bottom order they appear on the home page.
===================================================================== */

/* ---- 1. Hero ----
* Media (blob / photo / dots) is an absolutely-positioned full-bleed layer
* behind the text, positioned as percentages of the hero SECTION's own box
* (measured directly from the Figma reference, not a sub-column) so the
* composition scales responsively while keeping the same proportions:
*   blob:  left 62%    top -72.2%  width 62.9%
*   photo: left 58.25% top  25%    width 30.25%
*   dots1: left 57.2%  top  27.5%  width 17%
*   dots2: left 70.4%  top  64%    width 17%
* Text keeps a wider left gutter (12%) than other sections, per Figma.
*/
.twobl-hero {
	position: relative;
	overflow: hidden;
	padding-block-start: clamp(12rem, 13vw, 9rem);
	padding-block-end: clamp(4rem, 10vw, 8rem);
}
.twobl-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.twobl-hero__blob {
	position: absolute;
	left: 62%;
	top: -72.2%;
	width: 62.9%;
	aspect-ratio: 1;
	background: var(--twobl-green);
	border-radius: 50%;
}
.twobl-hero__dots {
	position: absolute;
	width: 17%;
	aspect-ratio: 297 / 180;
	background-image: url("../images/dots-hero.png");
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 1;
}
.twobl-hero__dots--1 { left: 57.2%; top: 27.5%; }
.twobl-hero__dots--2 { left: 70.4%; top: 64%; }
.twobl-hero__figure {
	position: absolute;
	left: 58.25%;
	top: 25%;
	z-index: 2;
	margin: 0;
	width: 30.25%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
}
.twobl-hero__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.twobl-hero__inner {
	position: relative;
	z-index: 3;
	padding-left: 12%;
}
.twobl-hero__content {
	max-width: 44vw;
}
.twobl-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.2rem;
	color: var(--twobl-white);
}
.twobl-hero__avatars {
	display: inline-flex;
	align-items: center;
}
.twobl-hero__avatars img {
	height: 32px;
	width: auto;
	object-fit: contain;
}
.twobl-hero__badge-text {
	font-family: var(--twobl-font-body);
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--twobl-white);
	white-space: nowrap;
}
.twobl-hero__heading {
	font-family: var(--twobl-font-heading);
	font-size: var(--twobl-fs-h2);
	line-height: 1.03;
	text-transform: uppercase;
	color: var(--twobl-white);
	margin: 0 0 .8rem;
}
.twobl-hero__body {
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--twobl-grey-mid);
	max-width: 60ch;
	margin-bottom: 1.9rem;
}
.twobl-hero__body p { margin: 0; color: var(--twobl-grey-mid);}
/* The button lives outside .twobl-hero__inner (see render.php — mobile needs to
order it past the photo), so it re-creates that wrapper's own 12% left inset
here to stay lined up under the body copy. */
.twobl-hero__cta {
	position: relative;
	z-index: 3;
	margin-left: 12%;
}
@media (max-width: 960px) {
	/*
	 * Desktop's composition is dark-everywhere with a green blob peeking out
	 * behind the PHOTO (top-right); Figma's mobile composition is different,
	 * not just a reflow of the same layers — a solid green block behind the
	 * BADGE/HEADING/BODY on top, then a dark block with the photo below.
	 * The blob's desktop position is a % of the section's own box, which
	 * only makes sense while the media layer is a full-bleed absolute layer
	 * behind the text; once the section's height instead follows normal
	 * in-flow text (below), those percentages point nowhere sensible — so
	 * the blob is dropped here and its job (the green area) is done with a
	 * solid background + a curved cutout instead.
	 *
	 * `.twobl-hero` becomes a flex column so text-then-photo (Figma's order)
	 * can be set via `order`, independent of DOM order (media stays first in
	 * markup, which is what desktop's absolute-positioned/z-index layering
	 * still needs).
	 *
	 * Judgment call, not pixel-measured (no Figma access this session): the
	 * CTA stays grouped with the green text block rather than being pulled
	 * out to sit on the dark photo area the way Figma's screenshot shows —
	 * doing that cleanly needs a bigger structural change (flattening the
	 * text wrapper via `display:contents` so the button can get its own
	 * flex `order` independent of the heading/body it's currently nested
	 * with) that felt like more risk than the fix warranted on a first pass.
	 * Flag if you want it moved down to match exactly.
	 */
	.twobl-hero {
		display: flex;
		flex-direction: column;
		padding-block: 0 4rem;
	}
	.twobl-hero__blob { display: none; }
	.twobl-hero__inner {
		order: 1;
		position: relative;
		z-index: 1;
		padding: 6.5rem var(--twobl-gutter) 4.5rem;
		background: var(--twobl-green);
	}
	/* Figma's green block ends in a downward bulge rather than a straight
	edge. Drawn as a green ellipse hanging off the block's bottom (its top
	half hidden behind the block itself), so the visible half reads as the
	block's own curved edge against the dark section below. */
	.twobl-hero__inner::after {
		content: "";
		position: absolute;
		left: -10%;
		right: -10%;
		bottom: -3rem;
		height: 6rem;
		background: var(--twobl-green);
		border-radius: 50%;
	}
	.twobl-hero__content { max-width: 100%; }
	/* Badge + heading stay white (as on desktop and in Figma); only the body
	copy flips — its desktop grey is for a dark background and is too low
	contrast on green. */
	.twobl-hero__body,
	.twobl-hero__body p { color: var(--twobl-slate); }
	/* Figma's mobile heading is noticeably larger than --twobl-fs-h2's mobile
	end of the clamp — sized to reproduce its four-line break
	("YOUR GREATEST / ADVANTAGE IS / ALREADY WITHIN / YOU"). */
	.twobl-hero__heading { font-size: 2.75rem; }

	/* Photo: centred and large, straddling the green/dark boundary (the
	green curve passes behind it). Pulled up into the green block by the
	negative margin; `overflow: visible` lets it hang past the media box's
	own top edge, and the z-index puts it over the curve. */
	.twobl-hero__media {
		order: 2;
		position: relative;
		inset: auto;
		z-index: 2;
		width: 100%;
		/* Capped so the photo doesn't balloon on the wide end of this range
		(this breakpoint runs all the way to 960px, but Figma only specifies
		the phone layout). */
		max-width: 26rem;
		margin: -5rem auto 0;
		aspect-ratio: 1 / 1;
		overflow: visible;
	}
	.twobl-hero__figure {
		left: 14%;
		top: 8%;
		width: 72%;
	}
	.twobl-hero__dots--1 { left: 2%;  top: 20%; width: 26%; }
	.twobl-hero__dots--2 { left: 66%; top: 74%; width: 26%; }

	/* Below the photo, on the dark area — Figma keeps the green pill here
	(it has plenty of contrast against slate), unlike the green block above
	where it would disappear. */
	.twobl-hero__cta {
		order: 3;
		z-index: 2;
		margin: 2rem var(--twobl-gutter) 0;
		justify-content: center;
	}
}

/* ---- 2. Intro Statement ---- */
.twobl-intro {
	padding-block: clamp(4rem, 7vw, 6.5rem) clamp(2.5rem, 4vw, 4rem);
	background: var(--twobl-white);
	padding-bottom: 0;
}
.twobl-intro__inner {
	margin-inline: auto;
	text-align: center;
}
.twobl-intro__heading {
	margin: 0 auto 2.25rem;
	font-size: clamp(3.25rem, 9vw, 8.5rem);
	line-height: 1.03;
	letter-spacing: -0.01em;
	color: var(--twobl-slate);
	max-width: 1320px;
}
@media (max-width: 640px) {
	.twobl-intro__heading {
		font-size: clamp(2.5rem, 9vw, 4.5rem);
		line-height: 1;
	}
	.twobl-intro__br {
		display: none;
	}
}

.twobl-intro__lead {
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: clamp(1.125rem, 2vw, 1.3125rem);
	line-height: 1.45;
	color: var(--twobl-text-heading);
	max-width: 720px;
	margin: 0 auto 2rem;
}
.twobl-intro__body {
	font-family: var(--twobl-font-alt);
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--twobl-text-heading-2);
	max-width: 710px;
	margin-inline: auto;
}
.twobl-intro__body p {
	margin: 0 auto 1.5rem;
	max-width: 720px;
}
.twobl-intro__body p:last-child {
	margin-bottom: 0;
	max-width: 680px;
}

/* ---- 3. Logo Strip — contained flex row with large prominent logos ---- */
.twobl-logos {
	padding-block: clamp(3rem, 6vw, 2rem);
	background: var(--twobl-white);
}
.twobl-logos__inner {
	width: 100%;
	max-width: var(--twobl-container);
	margin-inline: auto;
}
.twobl-logos__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(2rem, 5vw, 5rem);
	flex-wrap: wrap;
}
.twobl-logos__item {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.twobl-logos__item img {
	max-height: clamp(65px, 8vw, 100px);
	width: auto;
	max-width: 240px;
	object-fit: contain;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.twobl-logos__item img:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}
@media (max-width: 768px) {
	.twobl-logos__grid {
		justify-content: center;
		gap: 2rem 2.5rem;
	}
}

/* ---- 4. Audience Split ---- */
.twobl-audience__head {
	text-align: center;
	max-width: 950px;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.twobl-audience__intro,
.twobl-principles__intro {
	color: var(--twobl-text-heading);
	margin: 1rem auto 0;
	max-width: 72ch;
}
.twobl-audience__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
.twobl-audience__card {
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.twobl-audience__media {
	aspect-ratio: 2.38 / 1;
	background: var(--twobl-blue-light);
}
.twobl-audience__media img { width: 100%; height: 100%; object-fit: cover; }
.twobl-audience__body {
	padding: clamp(1.75rem, 3vw, 3.25rem);
	flex: 1;
}
.twobl-audience__title { margin: 0 0 0.75rem; }
.twobl-audience__subtitle {
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1.25rem;
	margin: 0 0 1rem;
}
.twobl-audience__desc { font-family: var(--twobl-font-alt); font-size: 1rem; margin: 0 0 1.5rem; }
.twobl-audience__links { list-style: none; margin: 0; padding: 0; }
.twobl-audience__links li { border-top: 1px solid currentColor; }
.twobl-audience__links li:last-child { border-bottom: 1px solid currentColor; }
.twobl-audience__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem 0;
	font-family: var(--twobl-font-alt);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
}
.twobl-audience__links svg { flex: 0 0 auto; transition: transform 0.2s ease; }
.twobl-audience__links a:hover svg { transform: translateX(4px); }
.twobl-audience__card--dark { background: var(--twobl-slate); }
.twobl-audience__card--dark .twobl-audience__title { color: var(--twobl-green); }
.twobl-audience__card--dark .twobl-audience__subtitle,
.twobl-audience__card--dark .twobl-audience__desc,
.twobl-audience__card--dark .twobl-audience__links a { color: var(--twobl-green); }
.twobl-audience__card--dark .twobl-audience__links li { border-color: rgba(141,197,64,0.25); }
.twobl-audience__card--green { background: var(--twobl-green); }
.twobl-audience__card--green .twobl-audience__title,
.twobl-audience__card--green .twobl-audience__subtitle,
.twobl-audience__card--green .twobl-audience__desc,
.twobl-audience__card--green .twobl-audience__links a { color: var(--twobl-slate); }
.twobl-audience__card--green .twobl-audience__links li { border-color: rgba(27,41,48,0.2); }
@media (max-width: 820px) {
	.twobl-audience__grid { grid-template-columns: 1fr; }
}

/* ---- 5. Principles Accordion ("The 2b Way") ---- */
.twobl-principles {
	position: relative;
	overflow: hidden;
	background: var(--twobl-green-light);
	padding-block: clamp(4rem, 8vw, 7rem);
}
.twobl-principles__field {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	pointer-events: none;
	background-image: url("../images/circles.webp");
	background-size: 1920px 1251px;
	background-position: top center;
	background-repeat: no-repeat;
	z-index: 0;
}
.twobl-principles__heading span.u-lowercase {
	text-transform: lowercase;
}
.twobl-principles__inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin-inline: auto;
}
.twobl-principles__head {
	text-align: center;
	max-width: 900px;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.twobl-principles__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem clamp(1.5rem, 3vw, 2rem);
	align-items: start;
	width: 100%;
	max-width: 90ch;
	margin: 0 auto;
}
.twobl-principles__col {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.twobl-principles__card {
	border: 1px solid var(--twobl-stroke-dark);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: transparent;
	min-height: 110px;
	transition: min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.twobl-principles__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 2rem 2.25rem;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
}
.twobl-principles__title {
	font-family: var(--twobl-font-heading);
	font-size: clamp(1.5rem, 2.2vw, 30px);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--twobl-slate);
}
.twobl-principles__icon {
	position: relative;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
}
.twobl-principles__icon::before,
.twobl-principles__icon::after {
	content: "";
	position: absolute;
	background: var(--twobl-slate);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.twobl-principles__icon::before { width: 26px; height: 2px; }
.twobl-principles__icon::after { width: 2px; height: 26px; }

.twobl-principles__panel {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: auto;
	transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.twobl-principles__panel-inner {
	overflow: hidden;
	opacity: 0;
	padding: 0 2.25rem 2.25rem 2.25rem;
	transition: opacity 0.25s ease 0.08s;
}
.twobl-principles__panel p {
	font-family: var(--twobl-font-alt);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--twobl-slate);
	font-weight: 500;
	margin: 0;
	max-width: 44ch;
}

/* Expanded state (hover or click) */
.twobl-principles__card.is-open,
.twobl-principles__card:hover {
	min-height: 265px;
	border-color: transparent;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}
.twobl-principles__card.is-open .twobl-principles__panel,
.twobl-principles__card:hover .twobl-principles__panel {
	grid-template-rows: 1fr;
}
.twobl-principles__card.is-open .twobl-principles__panel-inner,
.twobl-principles__card:hover .twobl-principles__panel-inner {
	opacity: 1;
}
.twobl-principles__card.is-open .twobl-principles__icon::after,
.twobl-principles__card:hover .twobl-principles__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}
.twobl-principles__card--green.is-open,  .twobl-principles__card--green:hover  { background: var(--twobl-green); }
.twobl-principles__card--blue.is-open,   .twobl-principles__card--blue:hover   { background: var(--twobl-blue); }
.twobl-principles__card--yellow.is-open, .twobl-principles__card--yellow:hover { background: var(--twobl-yellow); }
.twobl-principles__card--red.is-open,    .twobl-principles__card--red:hover    { background: var(--twobl-red); }

@media (max-width: 820px) {
	.twobl-principles__grid { grid-template-columns: 1fr; }
	.twobl-principles__trigger { padding: 1.75rem 1.5rem; }
	.twobl-principles__panel-inner { padding: 0 1.5rem 1.5rem 1.5rem; }
}

/* ---- 6. CTA Quest ("Start Your Quest") ----
* Measured from Figma node 8231:13802 (2200x844). The section's content sits in
* a 1321px container centred on the 2200px canvas — the SAME container as the
* header pill (pill spans x 438-1758; the heading's left edge is x 437). So the
* text aligns to the site container, not to an arbitrary % of the viewport.
* The section therefore mirrors .site-header's outer padding so the two stay
* aligned at every width.
*
* The media is a layered composition (dot grid + green circle + photo). Within
* the container it occupies x 705-1301, y 161-715 => 45.1% of the container
* wide, aspect 596/554. Its pieces are positioned as % of that media box so the
* overlap is preserved exactly at any width.
*/
.twobl-ctaquest {
	position: relative;
	overflow: hidden;
}
.twobl-ctaquest__inner {
	position: relative;
	max-width: var(--twobl-container);
	margin-inline: auto;
}

/* Media layer: anchored to the container's right edge, vertically centred. */
.twobl-ctaquest__media {
	position: absolute;
	right: 1.51%; /* Figma insets the media 20px from the container's right edge */
	top: 50%;
	transform: translateY(-50%);
	width: 45.1%;
	aspect-ratio: 596 / 554;
	z-index: 0;
}
.twobl-ctaquest__ring {
	position: absolute;
	left: 8.72%;
	top: 0;
	width: 89.26%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--twobl-green);
	z-index: 1;
}
.twobl-ctaquest__dots {
	position: absolute;
	width: 49.8%;
	aspect-ratio: 297 / 180;
	background-image: url("../images/dots-hero.png");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.85;
}
.twobl-ctaquest__dots--1 { left: 0; top: 2.89%; z-index: 2; }
.twobl-ctaquest__dots--2 { left: 52%; top: 54.5%; z-index: 0; }
/* Photo is clipped to exactly the same circle as the green ring (same left/top/
* width), so the group photo can never spill outside the green background. */
.twobl-ctaquest__figure {
	position: absolute;
	left: 8.72%;
	top: 0;
	z-index: 3;
	margin: 0;
	width: 89.26%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
}
.twobl-ctaquest__figure img { width: 100%; height: 100%; object-fit: cover; }

/* Text column: 47% of the container. "YOUR QUEST" sets the floor — it measures
* 592px in Anton at 136px, so a narrower column would wrap it onto a third line. */
.twobl-ctaquest__content {
	position: relative;
	z-index: 4;
	max-width: 47%;
}
.twobl-ctaquest__heading { color: var(--twobl-white); margin: 0 0 1.25rem; }
.twobl-ctaquest__lead {
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.4;
	color: var(--twobl-white);
	margin: 0 0 1rem;
	max-width: 69%; /* Figma text column; fits the 410px first line of body copy */
}
.twobl-ctaquest__body {
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--twobl-text-on-dark);
	margin: 0 0 1.875rem;
	max-width: 69%;
}
.twobl-ctaquest__cta { padding-block: 1.4375rem; } /* Figma button height 64px */

@media (max-width: 960px) {
	.twobl-ctaquest__media {
		position: relative;
		right: auto;
		top: auto;
		transform: none;
		width: 100%;
		max-width: 460px;
		margin: 0 auto 3rem;
	}
	.twobl-ctaquest__content { max-width: 100%; }
	.twobl-ctaquest__lead,
	.twobl-ctaquest__body { max-width: 100%; }
}

/* ---- 7. Banner Statement ---- */
.twobl-banner { position: relative; overflow: hidden; }
.twobl-banner--blue  { background: var(--twobl-blue); }
.twobl-banner--green { background: var(--twobl-green); }
.twobl-banner--slate { background: var(--twobl-slate); }
.twobl-banner__circle {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	height: 100%;
	width: auto;
	max-width: 55%;
	object-fit: contain;
}
.twobl-banner__circle--tl {
	top: 0;
	left: 0;
	object-position: top left;
}
.twobl-banner__circle--br {
	bottom: 0;
	right: 0;
	object-position: bottom right;
}
.twobl-banner__inner {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 900px;
}
.twobl-banner__eyebrow {
	font-family: var(--twobl-font-body);
	font-weight: 400;
	color: var(--twobl-slate);
	margin: 0 0 1.25rem;
}
.twobl-banner__heading {
	color: var(--twobl-white);
	margin: 0 auto 1.5rem;
	max-width: 18ch;
}
.twobl-banner__body {
	color: var(--twobl-slate);
	max-width: 52ch;
	margin: 0 auto 2.25rem;
}
.twobl-banner--slate .twobl-banner__eyebrow,
.twobl-banner--slate .twobl-banner__body { color: var(--twobl-text-on-dark); }

/* ---- 8. Stats ("What Transformation Looks Like") ---- */
.twobl-stats {
	background: var(--twobl-white);
	padding: clamp(3.5rem, 6vw, 6rem) 0;
	position: relative;
	overflow: hidden;
}
.twobl-stats__inner {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	align-items: center;
	gap: clamp(2.5rem, 5vw, 5.5rem);
}
.twobl-stats__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.twobl-stats__frame {
	position: relative;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
}
.twobl-stats__dots {
	position: absolute;
	width: 58%;
	height: 38%;
	z-index: 0;
	pointer-events: none;
}
.twobl-stats__dots--1 {
	left: 0;
	top: -2%;
	background-color: var(--twobl-green);
	-webkit-mask-image: url("../images/dots-stats.png");
	mask-image: url("../images/dots-stats.png");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.twobl-stats__dots--2 {
	right: 0;
	bottom: -4%;
	background-image: url("../images/dots-stats.png");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.55;
}
.twobl-stats__card {
	position: absolute;
	left: 10%;
	top: 10%;
	width: 80%;
	height: 80%;
	z-index: 1;
}
.twobl-stats__backdrop {
	position: absolute;
	inset: 0;
	background-color: var(--twobl-green);
	background-image: url("../images/filled-circles.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 28px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}
.twobl-stats__portrait {
	position: absolute;
	bottom: 0;
	right: 0;
	width: auto;
	height: 112%;
	max-width: 100%;
	object-fit: contain;
	object-position: bottom right;
	z-index: 2;
	pointer-events: none;
}
.twobl-stats__tag {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	width: 150px;
	text-align: center;
	justify-content: center;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.twobl-stats__tag--white  { background: var(--twobl-white); color: var(--twobl-slate); }
.twobl-stats__tag--blue   { background: var(--twobl-blue); color: var(--twobl-white); }
.twobl-stats__tag--yellow { background: var(--twobl-yellow); color: var(--twobl-slate); }
.twobl-stats__tag--pos0   { left: 4%; top: 56%; transform: translateY(-50%); }
.twobl-stats__tag--pos1   { right: 16%; bottom: 6%; }
.twobl-stats__tag--pos2   { right: -5%; top: 22%; }

.twobl-stats__heading {
	color: var(--twobl-slate);
	margin-bottom: 2.25rem;
	max-width: 15ch;
}
.twobl-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem clamp(2rem, 4vw, 3.5rem);
}
.twobl-stats__stat {
	display: flex;
	flex-direction: column;
}
.twobl-stats__number {
	font-family: var(--twobl-font-heading);
	font-size: clamp(2rem, 4.5vw, 2.5rem);
	line-height: 1;
	color: var(--twobl-slate);
	margin: 0 0 0.5rem 0;
	text-transform: uppercase;
}
.twobl-stats__label {
	font-family: var(--twobl-font-alt);
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--twobl-text-body);
	margin: 0;
}
@media (max-width: 860px) {
	.twobl-stats__inner { grid-template-columns: 1fr; }
	.twobl-stats__media { order: -1; margin-bottom: 2rem; }
	.twobl-stats__frame { width: 90%; }
}
@media (max-width: 480px) {
	.twobl-stats__grid { grid-template-columns: 1fr; }
}

/* ---- 9. World Class Coaches ---- */
.twobl-coaches__inner {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.twobl-coaches__sticky {
	position: sticky;
	top: 2rem;
}
.twobl-coaches__heading { color: var(--twobl-white); margin: 0 0 1.75rem; max-width: 11ch; }
.twobl-coaches__body {
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--twobl-text-on-dark);
	margin: 0 0 2rem;
	max-width: 46ch;
}
.twobl-coaches__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.25rem, 2.5vw, 1.5rem);
}
.twobl-coaches__col {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 2.5vw, 1.5rem);
}
.twobl-coaches__col--offset { margin-top: 52%; }
.twobl-coaches__card {
	position: relative;
	display: block;
	aspect-ratio: 316 / 331;
	border-radius: 20px;
	overflow: hidden;
}
.twobl-coaches__card img {
	position: absolute;
	inset: 10px 0 0 0;
	width: 100%;
	height: calc(100% - 10px);
	object-fit: cover;
	border-radius: 20px;
	z-index: 1;
	transition: transform 0.35s ease;
}
.twobl-coaches__card:hover img {
	transform: scale(1.03);
}
.twobl-coaches__card--green  { background: var(--twobl-green); }
.twobl-coaches__card--blue   { background: var(--twobl-blue); }
.twobl-coaches__card--yellow { background: var(--twobl-yellow); }
.twobl-coaches__card--red    { background: var(--twobl-red); }
/*
* Hover state, per Figma: the photo is a transparent cutout, so on hover a
* light-to-dark grey studio layer fades in BEHIND it (replacing the accent colour
* showing through the transparent areas), while a separate dark scrim fades
* in ON TOP of the photo just for text contrast, revealing name/role.
*/
.twobl-coaches__hover-bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #D4D4D4 0%, #858585 45%, #181E21 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 0;
}
.twobl-coaches__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(14, 21, 26, 0.92) 0%, rgba(14, 21, 26, 0.45)10%, rgba(14, 21, 26, 0) 30%);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 2;
}
.twobl-coaches__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: 3;
}
.twobl-coaches__card:hover .twobl-coaches__hover-bg,
.twobl-coaches__card:focus-visible .twobl-coaches__hover-bg,
.twobl-coaches__card:hover .twobl-coaches__overlay,
.twobl-coaches__card:focus-visible .twobl-coaches__overlay {
	opacity: 1;
}
.twobl-coaches__card:hover .twobl-coaches__info,
.twobl-coaches__card:focus-visible .twobl-coaches__info {
	opacity: 1;
	transform: translateY(0);
}
.twobl-coaches__name {
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--twobl-white);
}
.twobl-coaches__role {
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	color: var(--twobl-white);
}
.twobl-coaches__dots { display: none; }
@media (max-width: 900px) {
	.twobl-coaches__inner { grid-template-columns: 1fr; }
	.twobl-coaches__sticky { position: static; }
	.twobl-coaches__col--offset { margin-top: 2rem; }
}

/* ---- Coaches, mobile: one-card swipe carousel (Figma) ----
Figma reorders this section on phones — heading, body, carousel, dots, then
the button (desktop has the button up with the copy). `display: contents` on
the two wrappers drops their boxes so the heading/body/button and the cards
all become direct children of the same grid, which is what makes both the
`order` re-sequencing and the flex carousel possible without a second copy of
the markup in the DOM. */
@media (max-width: 640px) {
	.twobl-coaches__sticky { display: contents; }
	/* Size derived from Figma by ratio against the body copy, which already wraps
	identically and so is a reliable scale reference: the heading's first line
	is 1.027x the body's there, which works out at ~58px here. It must still
	break at the sentence boundary — "WORLD CLASS / COACHES. / REAL WORLD /
	EXPERIENCE." — and at 58px the measured widths are WORLD CLASS 295px vs
	COACHES. REAL 321px, so a 19.25rem (308px) measure sits mid-window.
	
	These are grid items now (thanks to display:contents above), so the grid's
	own gap stacks on top of their margins — trimmed to Figma's tighter mobile
	rhythm rather than double-spacing. */
	.twobl-coaches__heading { order: 1; font-size: 3.625rem; line-height: 1.04; max-width: 19.25rem; margin-bottom: 0.75rem; }
	.twobl-coaches__body { order: 2; margin-bottom: 1.5rem; }
	
	.twobl-coaches__grid {
		order: 3;
		display: flex;
		grid-template-columns: none;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* Bleed the track to the screen edges so a swiped card can sit flush,
		while the first card still lines up with the container gutter. */
		margin-inline: calc(var(--twobl-gutter) * -1);
		padding-inline: var(--twobl-gutter);
		scroll-padding-inline: var(--twobl-gutter);
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.twobl-coaches__grid::-webkit-scrollbar { display: none; }
	
	.twobl-coaches__col { display: contents; }
	.twobl-coaches__col--offset { margin-top: 0; }
	
	.twobl-coaches__card {
		order: var(--twobl-card-order, 0);
		flex: 0 0 100%;
		scroll-snap-align: start;
	}
	/* Tap/focus reveals the name overlay, since there's no hover on a phone. */
	.twobl-coaches__card:active .twobl-coaches__overlay { opacity: 1; }
	.twobl-coaches__card:active .twobl-coaches__info { opacity: 1; transform: none; }
	
	.twobl-coaches__dots {
		order: 4;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0;
	}
	.twobl-coaches__dot {
		width: 6px;
		height: 6px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.35);
		cursor: pointer;
		transition: width 0.25s ease, background-color 0.25s ease;
	}
	.twobl-coaches__dot.is-active {
		width: 28px;
		background: var(--twobl-white);
	}
	
	/* Full-width CTA on mobile, matching the card width above it (Figma). */
	.twobl-coaches__sticky .btn,
	.twobl-coaches__inner > .btn { order: 5; justify-self: stretch; width: 100%; }
}

/* ---- 10. Limitless Insights ---- */
.twobl-insights { background: var(--twobl-white); }
.twobl-insights__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.twobl-insights__head h2 { margin: 0; }
/* Card geometry measured from Figma: 420x674 cards, 32px gutters, 50px padding,
* and a circular image whose diameter equals the card's content width (318px). */
.twobl-insights__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem; /* 32px */
}
.twobl-insights__card {
	display: flex;
	flex-direction: column;
	gap: 1rem; /* 16px between text elements, per Figma */
	padding: 2.125rem 3rem 2.625rem; /* 34px / 48px / 42px (Figma 50px; 48 keeps the
	title on 3 lines, as Chrome rasterises Inter ~2px wider than Figma) */
	border: 1px solid var(--twobl-stroke-dark);
	border-radius: 20px;
	text-decoration: none;
	background: var(--twobl-white);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}
.twobl-insights__card:hover {
	background: var(--twobl-bg);
}
.twobl-insights__tag {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	line-height: 1;
	font-family: var(--twobl-font-alt);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.03em;
	color: var(--twobl-white);
}
.twobl-insights__tag--red    { background: var(--twobl-red); }
.twobl-insights__tag--yellow { background: var(--twobl-yellow); color: var(--twobl-slate); }
.twobl-insights__tag--blue   { background: var(--twobl-blue); }
.twobl-insights__tag--green  { background: var(--twobl-green); color: var(--twobl-slate); }
.twobl-insights__title {
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.4;
	text-transform: none;
	color: var(--twobl-text-heading);
	margin: 0;
}
.twobl-insights__excerpt {
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--twobl-text-body);
	margin: 0;
}
.twobl-insights__author {
	font-family: var(--twobl-font-alt);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--twobl-text-heading-2);
	margin: 0 0 1rem; /* 16px + 16px flex gap = 32px before the circle, per Figma */
}
/* Media: a square box (so the frame is a true circle). The box itself is NOT
* clipped, so the hover arrow can overlap the circle's edge like the design. */
.twobl-insights__media {
	position: relative;
	display: block;
	margin-top: auto;
	aspect-ratio: 1;
}
.twobl-insights__frame {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
}
.twobl-insights__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.twobl-insights__card:hover .twobl-insights__media img { transform: scale(1.12); }

/* Hover arrow: sits on the circle's edge (measured ~36° above horizontal), and
* is 24% of the circle's diameter. */
.twobl-insights__arrow {
	position: absolute;
	left: 89.2%;
	top: 21.1%;
	width: 24%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%) scale(0.6);
	border-radius: 50%;
	background: var(--twobl-green);
	color: var(--twobl-white);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.twobl-insights__arrow svg { width: 38%; height: 38%; }
.twobl-insights__card:hover .twobl-insights__arrow {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.twobl-insights__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--twobl-green-light), var(--twobl-blue-light));
}

@media (prefers-reduced-motion: reduce) {
	.twobl-insights__media img,
	.twobl-insights__arrow { transition: none; }
	.twobl-insights__card:hover .twobl-insights__media img { transform: none; }
}
@media (max-width: 1100px) {
	.twobl-insights__card { padding: 1.75rem 1.75rem 2rem; }
}
@media (max-width: 900px) {
	.twobl-insights__grid { grid-template-columns: 1fr; }
}

/* ---- 11. Globe ("Coaching Leaders Around The World") ---- */
.twobl-globe {
	overflow: hidden;
	position: relative;
}
.twobl-globe__inner {
	display: grid;
	grid-template-columns: 1fr 0.9fr;
	align-items: center;
}
.twobl-globe__heading { color: var(--twobl-white); margin: 0 0 1.5rem; }
.twobl-globe__body {
	font-family: var(--twobl-font-body);
	font-size: 1.25rem;
	line-height: 1.4;
	color: var(--twobl-text-on-dark);
	margin: 0 0 2rem;
	max-width: 36ch;
}
.twobl-globe__media {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	perspective: 1000px;
}
.twobl-globe__media-wrap {
	position: relative;
	width: 100%;
	max-width: 500px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-style: preserve-3d;
	transition: transform 0.25s cubic-bezier(0.1, 0.4, 0.2, 1);
}
.twobl-globe__img {
	width: 100%;
	height: auto;
	display: block;
	position: relative;
	z-index: 1;
	transition: filter 0.35s ease;
}
.twobl-globe__sweep {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	z-index: 2;
	pointer-events: none;
}
.twobl-globe__sweep::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
	115deg,
	transparent 40%,
	rgba(255, 255, 255, 0.22) 48%,
	rgba(141, 197, 64, 0.4) 50%,
	rgba(255, 255, 255, 0.22) 52%,
	transparent 60%
	);
	transform: translateY(-100%) translateX(-100%);
	transition: transform 0.75s ease;
}
.twobl-globe__media:hover .twobl-globe__sweep::after {
	transform: translateY(100%) translateX(100%);
}

@media (max-width: 860px) {
	.twobl-globe__inner { grid-template-columns: 1fr; text-align: left; }
	.twobl-globe__media { order: -1; max-width: 320px; margin: 0 auto; }
}

/* ---- 12. Case Studies ("The Impact We Create Together") ---- */
.twobl-casestudies { background: var(--twobl-white); }
.twobl-casestudies__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.twobl-casestudies__head h2 { margin: 0; max-width: 14ch; }
.twobl-casestudies__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
.twobl-casestudies__card {
	border-radius: var(--twobl-radius);
	overflow: hidden;
	border: 1px solid var(--twobl-stroke-dark);
	display: flex;
	flex-direction: column;
}
.twobl-casestudies__media {
	position: relative;
	display: block;
	width: 100%;
	height: 280px;
	background: var(--twobl-blue-light);
}
.twobl-casestudies__media img { 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	object-position: top;
}
.twobl-casestudies__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #223640, #2f4a54);
}
.twobl-casestudies__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Specificity fight with `.twobl-casestudies__media img { width:100%; height:100% }`
   (class+element = 0,1,1) — a plain `.twobl-casestudies__play-icon` (0,1,0) loses
   to it despite coming later, so the icon rendered at the media box's own size
   instead of 103px. Doubled the class to outrank it, same fix already used
   elsewhere in this file for this exact trap. */
.twobl-casestudies__play-icon.twobl-casestudies__play-icon { display: block; width: 103px; height: 103px; }
.twobl-casestudies__body {
	background: var(--twobl-white);
	padding: 1.75rem 1.5rem 2rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.twobl-casestudies__title { margin: 0 0 1rem; }
.twobl-casestudies__quote {
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	color: var(--twobl-text-body);
	margin: 0;
}
.twobl-casestudies__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
}
.twobl-casestudies__tag {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--twobl-stroke-dark);
	border-radius: 999px;
	font-family: var(--twobl-font-alt);
	font-size: 0.8125rem;
	color: var(--twobl-text-heading-2);
}
@media (max-width: 900px) {
	.twobl-casestudies__grid { grid-template-columns: 1fr; }
}

/* Case Studies page title.*/
body.post-type-archive-case_study .twobl-bloglist__heading {
	max-width: 6em;
	margin-inline: auto;
}
.twobl-caselist__grid {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
.twobl-casestudies__card--full { flex-direction: row; align-items: stretch; }
.twobl-casestudies__card--full .twobl-casestudies__media {
	flex: 0 0 40.26%;
	height: 450px;
}
.twobl-casestudies__card--full .twobl-casestudies__body {
	flex: 1 1 59.74%;
	justify-content: center;
	gap: 0.25rem;
	padding: 2rem 2.5rem 2rem 2.75rem;
}
.twobl-casestudies__card--full .twobl-casestudies__title { margin-bottom: 0.75rem; }
.twobl-casestudies__card--full .twobl-casestudies__tags { margin-bottom: 0.875rem; }
.twobl-casestudies__card--full .twobl-casestudies__quote { max-width: 46ch; }
.twobl-casestudies__viewlink {
	align-self: flex-start;
	margin-top: 2rem;
	padding: 0.75rem 1.5rem;
	font-size: 1.125rem;
}
@media (max-width: 900px) {
	.twobl-casestudies__card--full { flex-direction: column; }
	.twobl-casestudies__card--full .twobl-casestudies__media { 
		flex: none;
		max-height: 230px; 
		order: -1; 
	}
	.twobl-casestudies__card--full .twobl-casestudies__body { padding: 1.75rem 1.75rem 2rem; }
}

/* ---- 13. Testimonials Slider ---- */
.twobl-testimonials {
	background: #EAEAEA;
	padding-block: clamp(3rem, 6vw, 5rem);
}
.twobl-testimonials__inner {
	display: grid;
	grid-template-columns: 280px 1fr;
	align-items: center;
	gap: clamp(3rem, 6vw, 5.5rem);
}
.twobl-testimonials__media {
	position: relative;
	width: 280px;
	height: 380px;
	max-width: 100%;
}
.twobl-testimonials__figure {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 140px;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.35s ease;
}
.twobl-testimonials__figure.is-active { opacity: 1; }
.twobl-testimonials__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 140px;
}
.twobl-testimonials__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 140px;
	background: linear-gradient(135deg, #223640, #2f4a54);
}
.twobl-testimonials__counter {
	font-family: var(--twobl-font-alt);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: #6B7B83;
	margin: 0 0 1.75rem;
}
.twobl-testimonials__slide {
	display: none;
	margin: 0;
}
.twobl-testimonials__slide.is-active { display: block; }
.twobl-testimonials__quote {
	font-family: var(--twobl-font-body);
	font-weight: 500;
	font-size: 30px;
	line-height: 1.4;
	color: var(--twobl-slate);
	margin: 0 0 2rem;
	max-width: 44ch;
}
.twobl-testimonials__meta { display: flex; flex-direction: column; gap: 0.25rem; }
.twobl-testimonials__name {
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1.125rem;
	font-style: normal;
	color: var(--twobl-slate);
}
.twobl-testimonials__role {
	font-family: var(--twobl-font-alt);
	font-size: 0.8125rem;
	color: #6B7B83;
}
.twobl-testimonials__nav {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2rem;
}
.twobl-testimonials__arrow {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--twobl-white);
	border: 1.5px solid var(--twobl-slate);
	color: var(--twobl-slate);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.twobl-testimonials__arrow.is-filled {
	background: var(--twobl-slate);
	border-color: var(--twobl-slate);
	color: var(--twobl-white);
}
.twobl-testimonials__arrow:hover,
.twobl-testimonials__arrow:focus-visible {
	background: var(--twobl-green) !important;
	border-color: var(--twobl-green) !important;
	color: var(--twobl-white) !important;
	transform: translateY(-1px);
}
@media (max-width: 780px) {
	.twobl-testimonials__inner { grid-template-columns: 1fr; }
	.twobl-testimonials__media { display: none; }
	.twobl-testimonials__quote { font-size: 20px; }
}

/* ---- 14. Contact Form ("Book A Discovery Call") ---- */
.twobl-contact {
	position: relative;
	padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 10vw, 7rem);
	background: linear-gradient(0deg, var(--twobl-green) 0%, #ffffff 85%);
	border-radius: 0 0 clamp(32px, 5vw, 48px) clamp(32px, 5vw, 48px);
	overflow: hidden;
}
.twobl-contact__inner {
	text-align: center;
	max-width: 1320px;
	margin: 0 auto;
}
.twobl-contact__heading {
	margin: 0 auto 1.5rem;
	font-size: clamp(3rem, 8.2vw, 8.5rem);
	line-height: 0.95;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
@media (max-width: 900px) {
	.twobl-contact__heading {
		white-space: normal;
		font-size: clamp(2.5rem, 8.5vw, 5rem);
		line-height: 1;
	}
}
.twobl-contact__body {
	font-family: var(--twobl-font-alt);
	font-size: 20px;
	line-height: 1.5;
	color: var(--twobl-text-heading);
	margin: 0 auto 2.75rem;
	max-width: 900px;
}
.twobl-contact__form {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	align-items: center;
}
@media (max-width: 575px) {
	.twobl-contact__form {
		gap: .6rem !important;
	}
}
.twobl-contact__field { width: 100%; max-width: 430px; }
.twobl-contact__field input,
.twobl-contact__field select {
	width: 100%;
	height: 56px;
	padding: 0 1.875rem;
	border: 1px solid var(--twobl-stroke-dark);
	border-radius: 999px;
	background: var(--twobl-white);
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	color: var(--twobl-black);
	appearance: none;
}
.twobl-contact__field select { cursor: pointer; }
.twobl-contact__field--phone {
	position: relative;
	display: flex;
	align-items: center;
}
.twobl-contact__flag {
	position: absolute;
	left: 1.875rem;
	font-size: 1.1rem;
	pointer-events: none;
}
.twobl-contact__field--phone input { padding-left: 3.5rem; }
.twobl-contact__field--message textarea {
	width: 100%;
	/* min-height: 127px; */
	padding: 1.25rem 1.875rem;
	border: 1px solid var(--twobl-stroke-dark);
	border-radius: 30px;
	background: var(--twobl-white);
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	color: var(--twobl-black);
	resize: vertical;
}
.twobl-contact__submit {
	width: 100%;
	max-width: 430px;
	height: 60px;
	border: 0;
	border-radius: 999px;
	background: var(--twobl-slate);
	color: var(--twobl-white);
	font-family: var(--twobl-font-alt);
	font-size: 1.125rem;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.twobl-contact__submit:hover { background: #000; }
.twobl-contact__disclaimer {
	font-family: var(--twobl-font-alt);
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	color: var(--twobl-slate);
	/* Wide enough to keep the note on ONE line (it was 26ch, which wrapped a
	35-character string). Still capped so a longer custom note can't run away,
	and it wraps naturally if the column is ever narrower than this. */
	max-width: 44ch;
	margin: 0 auto 0;
}

/* ---- 15. Insights Listing (page hero + filter tabs) ---- */
.twobl-bloglist__hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--twobl-space-xl);
	background: var(--twobl-white);
}
.twobl-bloglist__circle {
	position: absolute;
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.twobl-bloglist__circle--a {
	width: 41%;
	left: -10.5%;
	top: -40%;
	background: radial-gradient(circle, var(--twobl-green-light) 0%, rgba(244, 249, 236, 0) 70%);
}
.twobl-bloglist__circle--b {
	width: 45%;
	right: -14%;
	top: -45%;
	background: radial-gradient(circle, var(--twobl-blue-light) 0%, rgba(232, 234, 234, 0) 70%);
}
.twobl-bloglist__hero--green,
.twobl-postdetail__hero.twobl-bloglist__hero--green { background: var(--twobl-green); }

.twobl-bloglist__hero--orange,
.twobl-bloglist__hero--red,
.twobl-postdetail__hero.twobl-bloglist__hero--orange,
.twobl-postdetail__hero.twobl-bloglist__hero--red {
	background: var(--twobl-red); /* #F15B4E brand orange/coral */
}
.twobl-bloglist__hero--orange .twobl-bloglist__circle--a,
.twobl-bloglist__hero--red .twobl-bloglist__circle--a {
	background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0%, rgba(241, 91, 78, 0) 70%);
}
.twobl-bloglist__hero--orange .twobl-bloglist__circle--b,
.twobl-bloglist__hero--red .twobl-bloglist__circle--b {
	background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(241, 91, 78, 0) 70%);
}

/*
* Yellow listing hero (Coaches Overview). Figma uses the brand yellow with soft
* light glows and DARK slate text — not the coral/red used previously, and not
* white text. Taller than the other listing heroes so the two-line title breathes.
*/
.twobl-bloglist__hero--yellow {
	background: var(--twobl-yellow);
	padding-block: clamp(9rem, 14vw, 14.5rem) clamp(3.5rem, 7vw, 6.625rem);
}
.twobl-bloglist__hero--yellow .twobl-bloglist__circle--a {
	background: radial-gradient(circle, rgba(255, 255, 255, 0.32) 0%, rgba(253, 184, 19, 0) 70%);
}
.twobl-bloglist__hero--yellow .twobl-bloglist__circle--b {
	background: radial-gradient(circle, rgba(255, 255, 255, 0.24) 0%, rgba(253, 184, 19, 0) 70%);
}
/* Constrains the title so it breaks onto two lines ("OUR EXCEPTIONAL / COACHES")
the way Figma does, instead of running across one very wide line. */
/* Two class names so this beats the later `.twobl-bloglist__heading { margin }`
shorthand, which would otherwise reset margin-inline and push it left. */
.twobl-bloglist__heading.twobl-bloglist__heading--narrow {
	max-width: 59.375rem; /* 950px */
	margin-inline: auto;
}

/*
* Blue listing hero (Team Overview). Same treatment as the yellow Coaches hero:
* brand blue with soft light glows, DARK slate text, and the taller proportions
* Figma uses (title sits ~240px down, ~120px of air under the subtitle).
*/
.twobl-bloglist__hero--blue {
	background: var(--twobl-blue);
	padding-block: clamp(9rem, 14vw, 14.5rem) clamp(3.5rem, 7vw, 6.625rem);
}
.twobl-bloglist__hero--blue .twobl-bloglist__circle--a {
	background: radial-gradient(circle, rgba(255, 255, 255, 0.32) 0%, rgba(59, 195, 222, 0) 70%);
}
.twobl-bloglist__hero--blue .twobl-bloglist__circle--b {
	background: radial-gradient(circle, rgba(255, 255, 255, 0.24) 0%, rgba(59, 195, 222, 0) 70%);
}

/* Green hero glow blobs — measured from Figma ("Case Studies Detailed", 2200px
* frame): solid #A2EF38 ellipses with a layer blur, NOT white radial gradients.
*   Ellipse A: 904x905 at (-315, -379)
*   Ellipse B: 993x994 at (1647,  198)
* Expressed in vw so the composition keeps Figma's proportions at any width. */
.twobl-bloglist__circle--light {
	background: var(--twobl-green-glow);
	filter: blur(9vw);
	opacity: 1;
}
.twobl-bloglist__circle--a.twobl-bloglist__circle--light {
	width: 41.09vw;
	left: -14.32vw;
	right: auto;
	top: -17.23vw;
}
.twobl-bloglist__circle--b.twobl-bloglist__circle--light {
	width: 45.14vw;
	left: 74.86vw;
	right: auto;
	top: 9vw;
}
.twobl-bloglist__hero-inner {
	position: relative;
	z-index: 1;
	text-align: center;
}
.twobl-bloglist__heading { margin: 0 0 1.25rem; }
.twobl-bloglist__heading--white { color: var(--twobl-white); }
.twobl-bloglist__subheading {
	font-family: var(--twobl-font-body);
	font-size: var(--twobl-fs-body);
	color: var(--twobl-text-heading-2);
	max-width: 46ch;
	margin-inline: auto;
}
.twobl-bloglist__subheading--white {
	color: var(--twobl-white);
	opacity: 0.95;
}
.twobl-bloglist__body { padding-block: var(--twobl-space-lg) clamp(2.5rem, 10vw, 10rem); }
.twobl-bloglist__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.twobl-bloglist__tab {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.9rem 1.5rem;
	border-radius: 999px;
	border: 1px solid var(--twobl-stroke-dark);
	background: var(--twobl-white);
	font-family: var(--twobl-font-body);
	font-weight: 600;
	font-size: 1rem;
	color: var(--twobl-slate);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.twobl-bloglist__tab-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}
.twobl-bloglist__tab-dot--green  { background: var(--twobl-green); }
.twobl-bloglist__tab-dot--yellow { background: var(--twobl-yellow); }
.twobl-bloglist__tab-dot--blue   { background: var(--twobl-blue); }
.twobl-bloglist__tab-dot--red    { background: var(--twobl-red); }
.twobl-bloglist__tab.is-active {
	background: var(--twobl-slate);
	border-color: var(--twobl-slate);
	color: var(--twobl-white);
}
.twobl-bloglist__tab.is-active .twobl-bloglist__tab-dot { display: none; }
.twobl-bloglist__empty {
	text-align: center;
	color: var(--twobl-text-body);
	font-family: var(--twobl-font-alt);
	padding: 2rem 0;
}
@media (max-width: 960px) {
	.twobl-bloglist__hero { padding-top: 6.25rem; padding-bottom: 1.5rem; }

	.twobl-bloglist__heading { font-size: 3.5rem; line-height: 1.08; }
	/* .twobl-bloglist__body { padding-top: 1rem; } */
	body.post-type-archive-case_study .twobl-bloglist__heading { font-size: 5rem; line-height: 1.05; }
}
.twobl-bloglist__filter { display: none; margin-bottom: clamp(2rem, 4vw, 3rem); }
.twobl-bloglist__select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	padding: 0.85rem 3rem 0.85rem 1.5rem;
	border: 1px solid var(--twobl-stroke-dark);
	border-radius: 999px;
	background-color: var(--twobl-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%231B2930' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.35rem center;
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1rem;
	color: var(--twobl-slate);
	cursor: pointer;
}
.twobl-bloglist__select:focus-visible {
	outline: 2px solid var(--twobl-slate);
	outline-offset: 2px;
}
@media (max-width: 640px) {
	.twobl-bloglist__tabs { display: none; }
	.twobl-bloglist__filter { display: block; }
}

/* ---- 16. Insights Detailed (single post) ---- */
.twobl-postdetail__hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--twobl-space-xl);
	background: var(--twobl-white);
}
.twobl-postdetail__hero-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* ~50px between the back link, title and subtitle, and a little clearance
	above the link itself — Figma gives all three more room than the 2rem
	this used to use. */
	gap: 3.125rem;
	padding-top: 1rem;
	text-align: center;
}
.twobl-postdetail__back {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--twobl-stroke-dark);
	border-radius: 999px;
	font-family: var(--twobl-font-alt);
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	color: var(--twobl-text-heading-2);
	text-decoration: none;
}
.twobl-postdetail__back svg { width: 12px; height: 24px; }
.twobl-postdetail__title {
	max-width: 54.5rem; /* 872px, per Figma */
	margin: 0;
}
.twobl-postdetail__subtitle {
	font-family: var(--twobl-font-body);
	font-size: var(--twobl-fs-body);
	color: var(--twobl-text-heading-2);
	margin: 0;
	/* Figma constrains the intro to the same 872px column as the title/figure,
	which is what makes it wrap to 3 lines instead of spanning the container. */
	max-width: 54.5rem;
	margin-inline: auto;
}
/* Figma leaves ~80px of white between the green hero and the image; without a
top padding here the image butts straight up against the hero. */
.twobl-postdetail__body { padding-block: clamp(2.5rem, 5vw, 5rem) var(--twobl-space-lg); }
/* Blog article only. The hero's bottom padding and the body's top padding stack,
which put ~190px between the subtitle and the featured image where Figma has
~70px. Scoped to --article so the case-study detail page keeps the hero
spacing that was measured against its own frame. */
.twobl-postdetail--article .twobl-postdetail__hero { padding-bottom: 2.5rem; }
.twobl-postdetail--article .twobl-postdetail__body { padding-top: 2rem; }
/* Rounded rectangle, not a circle: only the listing cards crop to a circle.
(`--rect` used to be an opt-in modifier that just the case-study template
remembered to apply, which is why the article page rendered an oval. It's
kept as a harmless alias so existing markup using it still works.) */
.twobl-postdetail__figure,
.twobl-postdetail__figure--rect {
	position: relative;   /* containing block for the optional play-button overlay */
	display: block;
	width: 100%;
	max-width: 54.5rem; /* 872px */
	aspect-ratio: 872 / 612;
	margin: 0 auto 2.5rem;
	border-radius: 20px;
	overflow: hidden;
}
.twobl-postdetail__figure img { width: 100%; height: 100%; object-fit: cover; }
/* Case study detail page only — plays the same video the listing cards' play
icon opens. Wraps the image + the shared .twobl-casestudies__play overlay. */
.twobl-postdetail__figure-play {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.twobl-postdetail__figure-play:focus-visible {
	outline: 3px solid var(--twobl-green);
	outline-offset: -3px;
}
.twobl-postdetail__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	max-width: 40.375rem; /* 646px, per Figma article column */
	margin: 0 auto 2rem;
}
.twobl-postdetail__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 1.25rem;
	border-radius: 999px;
	font-family: var(--twobl-font-body);
	font-size: 1.25rem;
	color: var(--twobl-slate);
}
.twobl-postdetail__author {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	color: var(--twobl-slate);
}
.twobl-postdetail__author img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--twobl-green);
}
.twobl-postdetail__content {
	max-width: 40.375rem; /* 646px */
	margin: 0 auto;
	font-family: var(--twobl-font-body);
	font-size: 1.125rem; /* 18px */
	line-height: 1.78;   /* 32px */
	color: var(--twobl-text-body);
}
/* Doubled class so this beats the later `.twobl-postdetail__content p { margin: 0 }`
reset (0,1,1), which was cancelling all paragraph spacing in the article body. */
.twobl-postdetail__content.twobl-postdetail__content > * + * { margin-top: 1.5rem; }
.twobl-postdetail__content h2,
.twobl-postdetail__content h3 {
	font-family: var(--twobl-font-heading);
	/* Was --twobl-fs-h5 (30px) despite the comment saying 40px — a token
	mix-up, which is why article headings read smaller than Figma. */
	font-size: var(--twobl-fs-h4); /* 40px */
	line-height: 1.125;
	text-transform: uppercase;
	color: var(--twobl-text-heading);
	margin: 2rem 0 0;
}
.twobl-postdetail__content p { margin: 0; }
.twobl-postdetail__content ul {
	margin: 0;
	padding-left: 1.6875rem; /* 27px */
	list-style: disc;
}
.twobl-postdetail__content li { margin: 0; }

/* A video the client pastes as a bare link mid-article (WordPress's own
autoembed — see inc/setup.php for the \r\n fix that makes it actually fire on
this site's classic-editor content). `responsive-embeds` theme support only
governs the BLOCK EDITOR's core/embed block markup (a wrapped, aspect-ratio'd
div); the legacy autoembed classic content uses instead just drops a bare
`<iframe width="500" height="281">` with no wrapper at all, so it's sized
directly here rather than via a wrapper div. */
.twobl-postdetail__content iframe {
	display: block;
	width: 100%;
	max-width: 54.5rem; /* matches the article column width */
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 1.5rem auto;
	border: 0;
	border-radius: 20px;
}

.twobl-postdetail__cta {
	max-width: 54.5rem;
	margin: var(--twobl-space-xl) auto 0;
	text-align: center;
}
.twobl-postdetail__cta h2 { margin: 0 0 1rem; }
.twobl-postdetail__cta p {
	font-family: var(--twobl-font-body);
	font-size: var(--twobl-fs-body);
	color: var(--twobl-text-heading-2);
	margin: 0 0 2rem;
}
.twobl-postdetail__related {
	padding-block: var(--twobl-space-xl);
	border-top: 1px solid var(--twobl-bg);
}
.twobl-postdetail__related-heading {
	text-align: center;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.twobl-postdetail__related-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.twobl-postdetail__related-head .twobl-postdetail__related-heading {
	text-align: left;
	margin: 0;
	max-width: 32ch;
}
@media (max-width: 640px) {
	/* Same trap as the listing hero: the header is absolutely positioned and
	overlays this hero, and --twobl-space-xl floors at 56px on mobile against
	an ~86px header — so the "Back to Limitless Insights" pill was rendering
	behind the header pill (measured: back top 72 vs header bottom 80). */
	.twobl-postdetail__hero { padding-top: 6rem; }
	.twobl-postdetail__hero-inner { gap: 2.25rem; }
	/* Figma's mobile title breaks into five lines. "PARTNERSHIP COACHING" fills
	the 335px column almost exactly there, which puts the size at ~38.5px;
	38px reproduces every one of those breaks with a little margin, where 39px
	pushes line 2 over and re-wraps the whole heading. */
	.twobl-postdetail__title { font-size: 2.375rem; line-height: 1.06; }
	/* Figma keeps the category pill and the byline on one row on mobile. At the
	desktop sizes they don't fit in 335px, so the pill, avatar and byline all
	step down (Figma's pill is ~73x31 and its avatar ~42px). flex-wrap stays as
	the escape hatch for an unusually long author name. */
	.twobl-postdetail__meta { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 1rem; }
	.twobl-postdetail__tag { height: 36px; padding: 0 0.875rem; font-size: 1rem; }
	.twobl-postdetail__author { font-size: 0.875rem; gap: 0.5rem; }
	.twobl-postdetail__author img { width: 40px; height: 40px; }
	.twobl-postdetail--article .twobl-postdetail__hero { padding-bottom: 1rem; }
	.twobl-postdetail--article .twobl-postdetail__body { padding-top: 0.75rem; }
	/* In-article headings. --twobl-fs-h4 is clamp(1.5rem, 3vw, 2.5rem), and 3vw
	on a phone collapses it to the 24px floor — barely larger than the 18px
	body, where Figma keeps these at ~38px. Measured two ways off the Figma
	mobile frame ("BEST SUITED FOR:" and "2:1 COACHING:" both imply ~38.1px),
	and 38px reproduces its four-line break for the long heading. */
	.twobl-postdetail__content h2,
	.twobl-postdetail__content h3 { font-size: 2.375rem; }
}

/* ---- 17. Coaches / Team directories + Coach detail ---- */
.twobl-bloglist__subheading--wide { max-width: 68.625rem; /* 1098px, per Figma */ }


/* ---- Coach detail: profile card additions ---- */
.twobl-coachdetail__cta {
	display: flex;
	width: 100%;
	margin: 0 0 1rem;
}
.twobl-coachdetail__meta-row + .twobl-coachdetail__meta-row { margin-top: 1rem; }
.twobl-coachdetail__meta-value--flag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.twobl-coachdetail__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.4rem;
}
.twobl-coachdetail__tag {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--twobl-bg);
	border: 1px solid #E1E6E8;
	font-family: var(--twobl-font-body);
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--twobl-text-heading-2);
}

/* Awards render as a small year label above each entry. */
.twobl-coachdetail__awards { list-style: none; padding-left: 0; }
.twobl-coachdetail__awards li { margin-bottom: 0; }
.twobl-coachdetail__award-year {
	display: block;
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--twobl-slate);
	margin-bottom: 0;
}
.twobl-coachdetail__award-text {
	display: block;
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	color: var(--twobl-text-body);
}


/* ---- Coach detail: "<name> in action" draggable gallery ---- */
.twobl-coachgallery {
	background: var(--twobl-slate);
	padding-block: clamp(3.5rem, 8vw, 7rem);
	overflow: hidden;
}
/* The dark panel slides up *over* the pinned profile card as you scroll, rather
than pushing it out of the way — same as the Figma prototype. The bio column
is padded by exactly the overlap and the panel is pulled back up by the same
amount, so neither the page height nor the panel's resting position changes:
all this alters is how long the card stays stuck. --twobl-coach-overlap is
measured by main.js; with no JS it stays 0 and the sections simply stack. */
@media (min-width: 961px) {
	.twobl-coachdetail .twobl-postdetail__content {
		padding-bottom: var(--twobl-coach-overlap, 0px);
	}
	.twobl-coachgallery {
		position: relative;
		z-index: 1; /* the sticky card is "positioned", so it needs beating on z */
		margin-top: calc(-1 * var(--twobl-coach-overlap, 0px));
	}
}
.twobl-coachgallery__heading {
	color: var(--twobl-white);
	text-align: center;
	margin: 0 0 clamp(2.5rem, 6vw, 5rem);
}
.twobl-coachgallery__viewport {
	overflow-x: auto;
	scrollbar-width: none;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
}
.twobl-coachgallery__viewport::-webkit-scrollbar { display: none; }
.twobl-coachgallery__viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.twobl-coachgallery__track {
	display: flex;
	align-items: flex-end;   /* slides share a baseline */
	gap: clamp(1rem, 2.5vw, 2.75rem);
	padding-inline: max(1.5rem, calc((100vw - var(--twobl-container)) / 2));
	width: max-content;
}
/* Slides alternate horizontal/square (odd/even) — the client explicitly does
not want a 3rd, vertical/portrait shape, so the ratio is now fixed by
position rather than the uploaded photo's own proportions (single-coach.php
no longer sets a per-photo inline ratio); `object-fit: cover` below crops
whatever gets uploaded to fit. Height still alternates short/tall between
rows, same rhythm as before. */
.twobl-coachgallery__slide {
	flex: 0 0 auto;
	margin: 0;
	height: clamp(200px, 24vw, 335px);
	aspect-ratio: 4 / 3; /* horizontal */
	max-width: 42rem; /* stops one panoramic upload from dominating the rail */
	border-radius: 16px;
	overflow: hidden;
	background: #223640;
}
.twobl-coachgallery__slide:nth-child(even) {
	height: clamp(270px, 32vw, 450px);
	aspect-ratio: 1 / 1; /* square */
}
.twobl-coachgallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}
.twobl-coachgallery__foot {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 5vw, 4rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.twobl-coachgallery__count,
.twobl-coachgallery__drag {
	font-family: var(--twobl-font-body);
	font-size: 1.125rem;
	color: var(--twobl-white);
	margin: 0;
	flex: 0 0 auto;
}
.twobl-coachgallery__bar {
	flex: 1 1 auto;
	height: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.25);
	overflow: hidden;
}
.twobl-coachgallery__bar-fill {
	display: block;
	height: 100%;
	width: 12%;
	border-radius: 999px;
	background: var(--twobl-green);
	transition: width 0.15s linear;
}

/* ---- Coach detail: "Meet our other coaches" slider ---- */
.twobl-coachdetail__related-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.twobl-coachdetail__related-head .twobl-coachdetail__related-heading {
	text-align: left;
	margin: 0;
}
.twobl-coachdetail__related-nav {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.twobl-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid #E1E6E8;
	background: transparent;
	color: var(--twobl-slate);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.twobl-slider__arrow:hover:not([disabled]) {
	background: var(--twobl-slate);
	border-color: var(--twobl-slate);
	color: var(--twobl-white);
}
.twobl-slider__arrow[disabled] { opacity: 0.35; cursor: default; }
.twobl-coachdetail__related-viewport {
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
	margin-inline: calc(var(--twobl-gutter) * -1);
	padding-inline: var(--twobl-gutter);
}
.twobl-coachdetail__related-viewport::-webkit-scrollbar { display: none; }
.twobl-coachdetail__related-track {
	display: flex;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	width: max-content;
}
.twobl-coachdetail__related-track .twobl-profilecard {
	flex: 0 0 auto;
	width: clamp(280px, 30vw, 419px);
}

/* ---- Coach directory filter dropdowns ---- */
.twobl-filter { position: relative; }
.twobl-filter.is-active .twobl-coachlist__dropdown {
	border-color: var(--twobl-slate);
	background: var(--twobl-slate);
	color: var(--twobl-white);
}
.twobl-coachlist__dropdown[disabled] { opacity: 0.45; cursor: not-allowed; }
.twobl-coachlist__dropdown[aria-expanded="true"] svg { transform: rotate(180deg); }
.twobl-coachlist__dropdown svg { transition: transform 0.2s ease; }
.twobl-filter__menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + 0.5rem);
	left: 0;
	min-width: 240px;
	max-height: 280px;
	overflow-y: auto;
	padding: 0.5rem;
	background: var(--twobl-white);
	border: 1px solid #E1E6E8;
	border-radius: 16px;
	box-shadow: var(--twobl-shadow);
	text-align: left;
}
.twobl-filter__option {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.55rem 0.65rem;
	border-radius: 10px;
	cursor: pointer;
	font-family: var(--twobl-font-body);
	font-size: 0.9375rem;
	color: var(--twobl-slate);
}
.twobl-filter__option:hover { background: var(--twobl-bg); }
.twobl-filter__option input { width: 16px; height: 16px; accent-color: var(--twobl-green); cursor: pointer; }
.twobl-coachlist__empty {
	text-align: center;
	font-family: var(--twobl-font-body);
	color: var(--twobl-text-supporting);
	padding-block: clamp(2rem, 5vw, 4rem);
}

.twobl-coachlist__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.twobl-coachlist__dropdown {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	height: 48px;
	padding: 0 1rem;
	border: 1px solid var(--twobl-stroke-dark);
	border-radius: 999px;
	background: var(--twobl-white);
	font-family: var(--twobl-font-alt);
	font-weight: 700;
	font-size: 1rem;
	color: var(--twobl-slate);
	cursor: pointer;
}
.twobl-coachlist__dropdown svg { flex-shrink: 0; }
.twobl-coachlist__clear {
	font-family: var(--twobl-font-alt);
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--twobl-grey-dark, #757575);
	background: none;
	border: 0;
	cursor: pointer;
}

.twobl-coachlist__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
@media (max-width: 900px) {
	.twobl-coachlist__grid { grid-template-columns: 1fr; }
}

/* Profile Card Portrait — coach/team card reused in grids + "related" rails. */
.twobl-profilecard {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* Resting border is a light neutral; on hover it deepens to the design
	system's stroke colour. No shadow in either state. */
	border: 1px solid #E1E6E8;
	border-radius: 20px;
	overflow: hidden;
	background: var(--twobl-white);
	text-decoration: none;
	transition: border-color 0.25s ease;
	text-align: center;
}
/* Team cards aren't links, so they keep the default cursor — but they get the
same hover treatment as the clickable coach cards. */
.twobl-profilecard--static { cursor: default; }
.twobl-profilecard:hover,
.twobl-profilecard:focus-visible {
	border-color: var(--twobl-stroke-dark);
	box-shadow: none;
	transform: none;
}
.twobl-profilecard__header {
	padding: 2.25rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.twobl-profilecard__circle {
	/* ~54% of the card, measured from Figma (was 42%). */
	width: clamp(150px, 14vw, 226px);
	aspect-ratio: 1;
	height: auto;
	border-radius: 50%;
	margin-bottom: 1.5rem;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}
.twobl-profilecard:hover .twobl-profilecard__circle,
.twobl-profilecard:focus-visible .twobl-profilecard__circle {
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
	.twobl-profilecard__circle { transition: none; }
	.twobl-profilecard:hover .twobl-profilecard__circle { transform: none; }
}
.twobl-profilecard__circle--yellow { background: #FFB800; }
.twobl-profilecard__circle--green  { background: #8DC540; }
.twobl-profilecard__circle--blue   { background: #2BB3E5; }
.twobl-profilecard__circle--red    { background: #F15B4E; }

.twobl-profilecard__circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
/* 40px at the design's card width (measured: the name occupies 58.3% of the
card, which is 40px Anton on a 419px card). Clamped so it scales down on
narrower cards rather than overflowing. */
.twobl-profilecard__name {
	font-family: var(--twobl-font-heading);
	font-size: clamp(1.625rem, 2.6vw, 2.5rem);
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--twobl-slate);
	margin: 0 0 0.5rem;
	/* Narrower than the card so long names break across two lines exactly as the
	design does ("MELANIE BANGCAYA- / JADI", "GANESH / RAJAGOPALAN"). Applied to
	the name only, so the portrait circle keeps its own size. */
	max-width: 78%;
	margin-inline: auto;
}
.twobl-profilecard__role {
	font-family: var(--twobl-font-body);
	font-size: 0.9375rem; /* 15px */
	color: #66757B;
	margin: 0;
}
.twobl-profilecard__footer {
	background: #F4F7F8;
	border-top: 1px solid #EBEFF1;
	padding: 1.25rem 1.25rem 1.35rem;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
}
.twobl-profilecard__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem 0.4rem;
	/* Wide enough to keep the first three pills on one line, so the five pills
	land on TWO rows as in Figma (was 260px, which forced three). */
	max-width: min(320px, 100%);
}
.twobl-strength-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	font-family: var(--twobl-font-body);
	font-weight: 600;
	font-size: 0.75rem;
	color: var(--twobl-white);
	white-space: nowrap;
}
.twobl-profilecard__location {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--twobl-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--twobl-slate);
}
.twobl-profilecard__flag {
	flex-shrink: 0;
	border-radius: 1px;
}

/* Centred "Your Greatest Advantage…" CTA that sits above the cross-link banner
* on the listing pages. Both sentences are one Anton heading (per Figma), not a
* heading + sub-line as on the post-detail pages. */
.twobl-pagecta {
	max-width: 62.5rem; /* 1000px */
	margin: clamp(3rem, 12.5vw, 12.5rem) auto 0;   /* 200px above at desktop */
	text-align: center;
}
.twobl-pagecta__heading { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }

/* "Meet our Team" / "Meet our COACHES" cross-link banner.
The Coaches page uses the blue heading; the Team page's twin uses yellow. */
/* "MEET OUR COACHES" is a longer string than the Coaches page's "MEET OUR TEAM",
and the design sets it smaller (H3, ~60px) so it keeps the same visual width. */
.twobl-teamcta--yellow .twobl-teamcta__heading {
	color: var(--twobl-yellow);
	font-size: var(--twobl-fs-h3);
}
.twobl-teamcta:last-child { margin-bottom: 0; }
.twobl-teamcta {
	position: relative;
	/*
	* Two columns: heading stacked above the button on the left, photo on the
	* right. Grid (rather than a flex row) so the DOM order heading → photo →
	* button can still render as heading / button in one column.
	*/
	/*
	* Text is a single left column: heading pinned to the top, button to the
	* bottom. The photo is taken OUT OF FLOW (absolute) so it can overhang the
	* banner's top edge without stretching the banner to fit it.
	*/
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "heading" "button";
	align-content: space-between;
	row-gap: clamp(1.5rem, 4vw, 3rem);
	min-height: 336px;
	margin-block: clamp(3rem, 12.5vw, 12.5rem) 0;  /* 200px above at desktop */
	padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
	padding-right: 54%; /* clears the absolutely-positioned photo */
	border-radius: 20px;
	background: var(--twobl-slate);
	/*
	* Measured from Figma (banner 1870px in the reference shot -> 1320 here, so
	* scale 0.706). The group photo hangs BELOW the banner's bottom edge while its
	* top stays inside — so the banner must not clip, and only the bottom bleeds:
	*   photo: 413px wide (1200x697 asset => 240px tall)
	*   photo top   = 138px below the banner top  (inside)
	*   photo bottom = 42px past the banner bottom (bleeds out)
	*/
	overflow: visible;
}
.twobl-teamcta__heading {
	grid-area: heading;
	color: var(--twobl-blue);
	margin: 0;
	/* One line ("MEET OUR TEAM") — a 9ch cap previously forced it onto two. */
	max-width: none;
	white-space: nowrap;
}
.twobl-teamcta .btn {
	grid-area: button;
	align-self: end;
	justify-self: start;
}
/* Photo sits flush against the banner's right edge and overflows the TOP, so the
heads break out above the dark panel. Negative margins cancel the banner padding. */
.twobl-teamcta__photo {
	position: absolute;
	right: 0;    /* absolute offsets ignore padding, so this meets the banner edge */
	bottom: 0;
	width: min(52%, 690px);
	margin: 0;
}
.twobl-teamcta__photo img { width: 100%; height: auto; display: block; }
.twobl-teamcta .btn { flex-shrink: 0; }
/*
* Stacked layout below 780px. Figma keeps this LEFT-aligned (heading, then the
* button, then the photo full-width at the bottom) — not centred.
*/
@media (max-width: 780px) {
	.twobl-teamcta {
		grid-template-columns: 1fr;
		grid-template-areas: "heading" "button" "photo";
		align-content: start;
		text-align: left;
		padding-right: clamp(1.5rem, 4vw, 3rem);
		padding-top: 2rem;
		padding-bottom: 0;
		row-gap: 1.75rem;
	}
	.twobl-teamcta__heading { white-space: normal; }
	.twobl-teamcta__heading { max-width: 6ch; } /* breaks "MEET / OUR / TEAM" as Figma does */
	/* DOM order is heading → photo → button (needed for the desktop row), but
	Figma stacks it heading → button → photo, so reorder visually. */
	.twobl-teamcta__photo {
		position: static;
		width: 100%;
		max-width: 100%;
		justify-self: center;
	}
}

/* Coach detail page. */
.twobl-coachdetail {
	display: grid;
	grid-template-columns: minmax(0, 37.5rem) 1fr;
	gap: clamp(2rem, 5vw, 4.75rem);
	align-items: start;
}
@media (max-width: 960px) {
	.twobl-coachdetail { grid-template-columns: 1fr; }
}
.twobl-coachdetail__card {
	position: sticky;
	top: var(--twobl-sticky-top);
	border: 1px solid #E1E6E8;
	border-radius: 24px;
	padding: 1rem 2rem;
	text-align: left;
}
.twobl-coachdetail__intro {
	padding-top: var(--twobl-space-xl);
}
@media (max-width: 960px) {
	.twobl-coachdetail__card { position: static; }
	/* Same header-overlap trap fixed elsewhere on inner pages: the mobile
	header is `position: absolute` and taller than --twobl-space-xl's mobile
	floor, so "Back to all Coaches" rendered partly underneath it. */
	.twobl-coachdetail__intro { padding-top: 6.25rem; }
	/* --twobl-fs-h4 is clamp(1.5rem, 3vw, 2.5rem); 3vw on a phone collapses
	to the 24px floor, leaving the coach's own name smaller than the CTA
	button text right below it. Visual-proportion estimate against the
	client's Figma screenshot (no Figma access this session to measure
	exactly) — flag if it needs nudging either way. */
	.twobl-coachdetail__name { font-size: 2rem; }
	/* "Book a chemistry call" becomes a persistent floating pill anchored to
	the viewport bottom on mobile, matching Figma, instead of sitting inline
	in the card. Page gets bottom padding so it never permanently covers the
	last section's content. */
	.twobl-coachdetail__cta {
		position: fixed;
		left: 1rem;
		right: 1rem;
		bottom: 1rem;
		z-index: 40;
		width: auto;
		margin: 0;
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
	}
	.twobl-coachdetail-page { padding-bottom: 5.5rem; }
}
.twobl-coachdetail__photo {
	/* Top-LEFT in the card (not centred), ~33% of the card width per Figma. */
	width: 35%;
	min-width: 150px;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 0 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.twobl-coachdetail__photo img { width: 100%; height: 100%; object-fit: cover; }
.twobl-coachdetail__name { margin: 0 0 0.5rem; }
.twobl-coachdetail__role {
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	color: var(--twobl-text-heading-2);
	margin: 0 0 1.5rem;
}
.twobl-coachdetail__linkedin {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--twobl-font-alt);
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--twobl-slate);
	text-decoration: none;
	margin-top: 20px;
}
.twobl-coachdetail__strengths-label {
	font-family: var(--twobl-font-alt);
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--twobl-stroke-dark);
	margin: 0 0 0.75rem;
}
.twobl-coachdetail__strengths {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	margin: 0;
}
.twobl-coachdetail__meta {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 1.5rem 1.25rem;
	align-items: start;
}
.twobl-coachdetail__meta-col {
	display: flex;
	flex-direction: column;
	/* gap: 1.5rem; */
}
/* Expertise / Coaching Style are plain stacked lines in Figma, not pills. */
.twobl-coachdetail__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.twobl-coachdetail__list li {
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--twobl-text-heading);
}
.twobl-coachdetail__linkedin-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	background: #0A66C2;
}
@media (max-width: 560px) {
	.twobl-coachdetail__meta { grid-template-columns: 1fr; }
}
.twobl-coachdetail__meta-label {
	font-family: var(--twobl-font-alt);
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--twobl-stroke-dark);
	margin: 0 0 0.25rem;
}
.twobl-coachdetail__meta-value {
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	color: var(--twobl-text-heading-2);
	line-height: 1.5;
	margin: 0;
}
.twobl-coachdetail__back {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 2rem;
	font-family: var(--twobl-font-alt);
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	color: var(--twobl-text-heading-2);
	text-decoration: none;
}
.twobl-coachdetail__related {
	padding-block: var(--twobl-space-xl);
}
.twobl-coachdetail__related-heading { text-align: center; margin: 0 0 clamp(2rem, 4vw, 3rem); }

/* ---- 18. Epigenetics (event/programme landing page) ---- */
/* Figma frame "EPIGENETICS" (8136:14783) renders on a 2200px canvas whose 1321px
content column maps 1:1 onto our 1320px `--twobl-container`, so the px values
through this whole section are read straight off that render rather than
guessed. Hero band = 882px tall: eyebrow box at 182, title at 251, subtitle at
559, CTA 679-742, then 140px to the end of the band. */
.twobl-epi-hero {
	padding-block: 11.375rem 8.75rem;
	background: var(--twobl-green);
}
.twobl-epi-hero__eyebrow {
	text-align: center;
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1.25rem;               /* 20px */
	line-height: 1.4;                 /* 28px */
	letter-spacing: 0;
	color: var(--twobl-slate);
	margin: 0 0 2.5rem;
}
.twobl-epi-hero__title {
	font-family: var(--twobl-font-heading) !important;
	font-size: var(--twobl-fs-h1) !important;   /* 136px */
	line-height: 1.0588 !important;             /* 144px */
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	color: var(--twobl-slate) !important;
	text-align: center !important;
	max-width: none !important;
	margin: 0 auto 1.25rem !important;
}
.twobl-epi-hero__subtitle {
	text-align: center;
	max-width: 60rem;
	margin-inline: auto;
}
.twobl-epi-hero__subtitle strong {
	display: block;
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1.25rem;               /* 20px */
	line-height: 1.4;                 /* 28px */
	color: var(--twobl-slate);
	margin-bottom: 0.5rem;
}
.twobl-epi-hero__subtitle span {
	display: block;
	font-family: var(--twobl-font-alt);
	font-size: var(--twobl-fs-body2); /* 16px Roboto */
	line-height: 1.5;                 /* 24px */
	color: var(--twobl-text-heading-2);
	max-width: 60rem;
	margin-inline: auto;
}
.twobl-epi-hero__cta {
	display: flex;
	justify-content: center;
	margin-top: 2.1875rem;
}
.twobl-epi-hero__cta .btn {
	background-color: var(--twobl-slate) !important;
	color: var(--twobl-white) !important;
	font-family: var(--twobl-font-body);
	font-weight: 600;
	font-size: var(--twobl-fs-button);   /* 18px */
	padding: 1.4375rem 2.5625rem;        /* Figma pill: 268 x 64 */
	border-radius: 999px;
	box-shadow: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.twobl-epi-hero__cta .btn:hover {
	background-color: #0F181C !important;
	color: var(--twobl-white) !important;
	transform: translateY(-2px);
}

/* Dark block wrapping Feature Photo, Meta Bar, and Delivers Grid */
.twobl-epi-darkblock {
	background: var(--twobl-slate);
	color: var(--twobl-white);
	padding-block: 6.9375rem 14.6875rem;   /* Figma band: 111 / 235 */
}
.twobl-epi-hero__photo {
	max-width: 69.375rem;                  /* 1110px */
	margin: 0 auto 5rem;
	border-radius: 20px;
	overflow: hidden;
}
.twobl-epi-hero__photo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 20px;
}
/* Event meta bar. Figma: 1px rules on the LEFT of every item (including the
first), 95px tall, 22px to the icon, 26px from icon to text. */
.twobl-epi-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8.5625rem;                     /* 137px */
	padding-block: 0;
	margin: 0 0 8.25rem;
}
.twobl-epi-meta__item {
	display: flex;
	align-items: center;
	gap: 1.625rem;                      /* 26px */
	min-height: 95px;
	padding-left: 1.375rem;             /* 22px */
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.twobl-epi-meta__icon { flex-shrink: 0; width: 44px; height: 44px; display: block; }
.twobl-epi-meta__label {
	font-family: var(--twobl-font-heading);
	font-size: var(--twobl-fs-h5);      /* 30px */
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--twobl-white);
	margin: 0;
	line-height: 1.1;
}
.twobl-epi-meta__unit {
	font-size: 0.6em;
	color: rgba(255, 255, 255, 0.8);
}
.twobl-epi-meta__value {
	font-family: var(--twobl-font-body);
	font-size: var(--twobl-fs-body);    /* 20px */
	line-height: 1.4;                   /* 28px */
	color: var(--twobl-text-on-dark);
	margin: 0.375rem 0 0;
}

/* WHAT THIS COURSE DELIVERS */
.twobl-epi-delivers { text-align: center; }
.twobl-epi-delivers__title {
	font-family: var(--twobl-font-heading);
	font-size: var(--twobl-fs-h3);      /* 60px */
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--twobl-white);
	margin: 0 0 2.25rem;
}
.twobl-epi-delivers__lead {
	font-family: var(--twobl-font-body);
	font-size: var(--twobl-fs-body);    /* 20px */
	line-height: 1.4;                   /* 28px */
	color: var(--twobl-text-on-dark);
	max-width: 42rem;
	margin: 0 auto 3.5rem;
}
.twobl-epi-programme {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.0625rem;                     /* 33px */
	text-align: left;
}
@media (max-width: 960px) {
	.twobl-epi-programme { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.twobl-epi-programme { grid-template-columns: 1fr; }
}
.twobl-epi-progcard {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(189, 209, 217, 0.35);
	border-radius: 20px;
	padding: 1.9375rem 2rem 2rem;
	min-height: 413px;                  /* Figma card height */
}
.twobl-epi-progcard__label {
	font-family: var(--twobl-font-body);
	font-size: 1rem;                    /* 16px */
	line-height: 1.5;
	color: var(--twobl-text-on-dark);
	margin: 0 0 0.75rem;
}
.twobl-epi-progcard__value {
	font-family: var(--twobl-font-heading);
	font-size: var(--twobl-fs-h4);      /* 40px */
	text-transform: uppercase;
	color: var(--twobl-green);
	margin: 0;
	line-height: 1.1;
}
.twobl-epi-progcard__desc {
	font-family: var(--twobl-font-alt);
	font-size: var(--twobl-fs-body2);   /* 16px Roboto */
	line-height: 1.5;                   /* 24px */
	color: var(--twobl-text-on-dark);
	margin-top: auto;
	padding-top: 2rem;
	margin-bottom: 0;
}

/* Sticky "Start your growth journey today" bar */
.twobl-epi-stickyscroll { position: relative; }
.twobl-epi-stickybar {
	position: sticky;
	top: var(--twobl-sticky-top);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8125rem;                     /* 13px */
	flex-wrap: wrap;
	min-height: 94px;                   /* Figma bar height */
	padding: 1.4375rem clamp(1.25rem, 4vw, 3rem);
	background: var(--twobl-white);
	box-shadow: 0 8px 24px rgba(27, 41, 48, 0.08);
}
.twobl-epi-stickybar__text {
	font-family: var(--twobl-font-heading);
	font-size: var(--twobl-fs-h5);      /* 30px */
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--twobl-slate);
	margin: 0;
}
.twobl-epi-stickybar .btn {
	background: var(--twobl-green);
	color: var(--twobl-slate);
	font-weight: 600;
	padding: 0.9375rem 1.5625rem;       /* Figma pill: 218 x 48 */
}

.twobl-epi-intro {
	text-align: center;
	max-width: 63.25rem;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.twobl-epi-intro__eyebrow { margin: 0 0 1rem; }
.twobl-epi-intro__lead {
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--twobl-text-heading);
	margin: 0;
}

.twobl-epi-section { padding-block: clamp(3rem, 6vw, 5rem); }
/* "Your Outcomes" and "What's Included" are full-bleed dark bands in Figma
(Foundation/Blue/Normal #1B2930), not the light --twobl-bg tint the name
suggests — kept the class name to avoid touching the template twice, just
repointed the color. Child text needs the on-dark palette since the base
heading/paragraph rules assume a light background. */
.twobl-epi-section--tint { background: var(--twobl-slate); }
.twobl-epi-section--tint .twobl-epi-2col__title,
.twobl-epi-section--tint .twobl-epi-outcome-callout p:first-child { color: var(--twobl-white); }
.twobl-epi-section--tint .twobl-epi-2col__body p,
.twobl-epi-section--tint .twobl-epi-2col__body ul { color: var(--twobl-text-on-dark); }
.twobl-epi-section--tint .twobl-epi-outcome-callout { border-top-color: var(--twobl-stroke-dark); }
/* Figma: ~258px top padding on both dark bands; "Your Outcomes" is
near-symmetric (~257px bottom), "What's Included" tapers to ~200px because
its 5 stacked cards run shorter than the sticky heading's own rhythm. */
.twobl-epi-outcomes { padding-block: 16.125rem 16.0625rem; }
.twobl-epi-included-section { padding-block: 16.125rem 12.5rem; }
/* "Built for High Performers" sits on plain white between the two dark bands
— Figma gives it ~260px of clearance on both sides, far more than the
shared .twobl-epi-section default. */
.twobl-epi-builtfor { padding-block: 16.5625rem 15.9375rem; }
.twobl-epi-section__heading { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.twobl-epi-section__heading--center { text-align: center; }

/* Investment pricing cards */
.twobl-epi-investment {
	position: relative;
	overflow: hidden;
	background: var(--twobl-green);
	padding-block: 7.375rem 8.375rem;    /* Figma band: 942px tall */
}
/* Two oversized darker-green circles bleeding off the left and right edges.
`investment-bg.webp` is the exported Figma shape; sized/placed as a share of
the section WIDTH so the two arcs keep their proportions at any viewport. */
.twobl-epi-investment__decor {
	position: absolute;
	inset: 0;
	background-image: url("../images/epigenetics/investment-bg.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	pointer-events: none;
}
.twobl-epi-investment__inner { position: relative; z-index: 1; }
.twobl-epi-investment__title {
	font-family: var(--twobl-font-heading);
	font-size: var(--twobl-fs-h2);       /* 91px */
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--twobl-white);
	text-align: center;
	margin: 0 0 2.25rem;
}
.twobl-epi-investment__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.1875rem;                      /* 35px */
	max-width: 54.4375rem;               /* 871px — 2 x 418 + 35 */
	margin-inline: auto;
}
@media (max-width: 780px) {
	.twobl-epi-investment__grid { grid-template-columns: 1fr; }
}
.twobl-epi-tier {
	background: var(--twobl-white);
	border-radius: 20px;
	padding: 1.8125rem 2.75rem 2.4375rem; /* Figma card: 418 x 561 */
	text-align: center;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}
.twobl-epi-tier__circle {
	width: 214px;
	height: 214px;
	border-radius: 50%;
	margin: 0 auto 1.5rem;
	overflow: hidden;
}
.twobl-epi-tier__photo {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.twobl-epi-tier__price {
	font-family: var(--twobl-font-heading);
	font-size: 4.5rem;                    /* 72px */
	line-height: 1;
	color: var(--twobl-slate);
	margin: 0;
}
.twobl-epi-tier__price span {
	font-family: var(--twobl-font-heading);
	font-size: 1.5rem;
	text-transform: uppercase;
	color: var(--twobl-slate);
	margin-left: 0.125rem;
}
.twobl-epi-tier__divider {
	border: 0;
	border-top: 1px solid #EBEFF1;
	width: 297px;
	max-width: 100%;
	margin: 1.25rem auto;
}
.twobl-epi-tier__flex-label {
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--twobl-slate);
	margin: 0 0 0.5rem;
}
.twobl-epi-tier__flex-value {
	font-family: var(--twobl-font-alt);
	font-size: var(--twobl-fs-body2);
	line-height: 1.5;
	color: #66757B;
	margin: 0 0 1.8125rem;
}
.twobl-epi-tier .btn {
	width: 100%;
	background: var(--twobl-green);
	color: var(--twobl-slate);
	font-weight: 600;
	padding: 0.9375rem 1.5625rem;
}

.twobl-epi-howitworks {
	background: var(--twobl-slate);
	padding-block: 16.4375rem 16.1875rem;
}
.twobl-epi-howitworks__heading { color: var(--twobl-white); margin-bottom: 4.5rem; }
.twobl-epi-howitworks .twobl-epi-2col__body p,
.twobl-epi-howitworks .twobl-epi-2col__body ul { color: var(--twobl-text-on-dark); }

.twobl-epi-steps { display: flex; flex-direction: column; }
.twobl-epi-step + .twobl-epi-step {
	margin-top: 3.8125rem;
	padding-top: 2.8125rem;
	border-top: 1px solid rgba(189, 209, 217, 0.35);
}
.twobl-epi-step__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.8125rem;
	margin: 0 0 0.875rem;
}
.twobl-epi-step__eyebrow::before {
	content: '';
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--twobl-white);
	flex-shrink: 0;
}
.twobl-epi-step__eyebrow span {
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 0.875rem;                 /* 14px */
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--twobl-white);
}
.twobl-epi-step__title {
	font-family: var(--twobl-font-heading);
	font-size: var(--twobl-fs-h4);       /* 40px */
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--twobl-green);
	margin: 0 0 1.25rem;
}
.twobl-epi-step__body {
	font-family: var(--twobl-font-body);
	font-size: var(--twobl-fs-body);     /* 20px */
	line-height: 1.4;                    /* 28px */
	color: var(--twobl-text-on-dark);
	margin: 0 0 1.375rem;
}
.twobl-epi-step ul {
	margin: 0;
	padding-left: 1.375rem;
	font-family: var(--twobl-font-body);
	font-size: var(--twobl-fs-body);     /* 20px */
	line-height: 1.4;                    /* 28px */
	color: var(--twobl-text-on-dark);
}
.twobl-epi-step ul li + li { margin-top: 0.5rem; }

/* Two-col text blocks (pain points / outcomes / built-for). */
/* Every 2-col block on this page shares one measurement in Figma: the right-hand
column is 644px wide and starts 676px into the 1320px container. */
.twobl-epi-2col {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 644px;
	gap: 5rem;                            /* 80px */
	align-items: start;
}
@media (max-width: 1200px) {
	.twobl-epi-2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}
@media (max-width: 900px) {
	.twobl-epi-2col { grid-template-columns: 1fr; }
}
.twobl-epi-2col__sticky { position: sticky; top: calc(var(--twobl-sticky-top) + 7rem); /* clears the sticky "Start your growth journey" bar parked above it */ }
@media (max-width: 900px) {
	.twobl-epi-2col__sticky { position: static; }
}
.twobl-epi-2col__title { margin: 0; max-width: 14ch; }
.twobl-epi-2col__title--wide { max-width: none; line-height: 1.1667; /* 70px at 60px */ }
.twobl-epi-2col__body p {
	font-family: var(--twobl-font-body);
	font-size: var(--twobl-fs-body);      /* 20px */
	line-height: 1.4;                     /* 28px */
	color: var(--twobl-text-heading-2);
}
.twobl-epi-2col__body p + p { margin-top: 1.5rem; }
.twobl-epi-2col__body ul {
	margin: 0 0 1.5rem;
	padding-left: 1.375rem;
	font-family: var(--twobl-font-body);
	font-size: var(--twobl-fs-body);      /* 20px */
	line-height: 1.4;                     /* 28px */
	color: var(--twobl-text-heading-2);
}
.twobl-epi-2col__body ul li + li { margin-top: 0.5rem; }

/* "You're operating at a high level. But it's at a cost." — portrait left,
copy right. Figma: photo 532 x 710, section band 1077px tall. */
.twobl-epi-highlevel {
	background: var(--twobl-white);
	padding-block: 7.1875rem 15.8125rem;
}
.twobl-epi-highlevel__media {
	max-width: 33.25rem;                  /* 532px */
	border-radius: 20px;
	overflow: hidden;
}
.twobl-epi-highlevel__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
}
.twobl-epi-highlevel .twobl-epi-2col__title { margin-bottom: 2.5rem; }
.twobl-epi-highlevel .twobl-epi-2col__body ul { margin-bottom: 1.75rem; }
.twobl-epi-highlevel .twobl-epi-2col__body p { margin: 0; }
.twobl-epi-outcome-callout {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--twobl-stroke-dark);
}
.twobl-epi-outcome-callout p:first-child {
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--twobl-text-heading);
	margin: 0 0 0.25rem;
}

/* What's Included cards (dark, stacked, scroll beside the sticky heading). */
.twobl-epi-included__list { display: flex; flex-direction: column; gap: 1.5rem; }
.twobl-epi-included-card {
	background: var(--twobl-slate);
	border: 1px solid #B8BDBF;   /* Foundation/Blue/Light:active — card reads on the now-dark section bg */
	border-radius: 20px;
	padding: 2rem clamp(1.5rem, 3vw, 2.5rem);
}
.twobl-epi-included-card__num {
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	color: var(--twobl-green);
	margin: 0 0 0.5rem;
}
.twobl-epi-included-card__title {
	font-family: var(--twobl-font-heading);
	font-size: var(--twobl-fs-h5);       /* 30px */
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--twobl-white);
	margin: 0 0 0.75rem;
}
.twobl-epi-included-card__desc {
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--twobl-text-on-dark);
	margin: 0;
}

/* Testimonial quote block. */
/* Figma's quote frame is the full 1324px container (not a narrower centred
column) — the old 63rem cap wrapped the H2 onto an extra line vs Figma's 3.
Outer spacing is set here rather than relying on the neighbouring sections'
padding, since this block sits in a plain .container with none of its own —
229px measured above the top mark / 191px below the bottom mark in Figma,
minus the ~64px the Your-Coach / FAQ sections already contribute. */
.twobl-epi-quote { margin: 0 auto; text-align: center; padding-block: 10rem 8rem; }
.twobl-epi-quote__mark {
	display: block;
	width: 4.9375rem;      /* 79px, native 122x77 asset scaled down */
	height: auto;
	margin-inline: auto;
}
.twobl-epi-quote__mark--top { margin-bottom: 2.75rem; }
.twobl-epi-quote__mark--bottom { margin-top: 2.75rem; }
/* It's a <p>, not an <h1-5>, so it never picks up the global heading color rule —
without this it inherits body copy's lighter --twobl-text-body grey instead of
the solid dark navy Figma shows. */
.twobl-epi-quote__text { margin: 0; color: var(--twobl-text-heading); }

/* FAQ accordion (reuses the site-footer accordion's delegated-click JS pattern,
scoped to this page's own class names). */
.twobl-epi-faq { max-width: 54.375rem; margin: 0 auto; }
.twobl-epi-faq__item { border-bottom: 1px solid var(--twobl-bg); }
.twobl-epi-faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.5rem 0;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--twobl-text-heading);
	cursor: pointer;
}
.twobl-epi-faq__icon { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.twobl-epi-faq__icon::before,
.twobl-epi-faq__icon::after {
	content: '';
	position: absolute;
	background: var(--twobl-slate);
	border-radius: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.twobl-epi-faq__icon::before { width: 16px; height: 2px; }
.twobl-epi-faq__icon::after { width: 2px; height: 16px; transition: transform 0.2s ease; }
.twobl-epi-faq__item.is-open .twobl-epi-faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.twobl-epi-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
}
.twobl-epi-faq__item.is-open .twobl-epi-faq__panel { grid-template-rows: 1fr; }
.twobl-epi-faq__panel-inner { overflow: hidden; }
.twobl-epi-faq__panel p {
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--twobl-text-heading-2);
	margin: 0 0 1.5rem;
}

/* Next event banner — a dark slate card (not white/bordered): green Anton
40px mini-headings ("DATE"/"TIMES"/"FREQUENCY") over white 20px body copy. */
.twobl-epi-nextevent {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 3rem);
	align-items: center;
	background: var(--twobl-slate);
	border-radius: 20px;
	overflow: hidden;
}
@media (max-width: 860px) {
	.twobl-epi-nextevent { grid-template-columns: 1fr; }
}
.twobl-epi-nextevent__media { position: relative; height: 100%; min-height: 20rem; }
.twobl-epi-nextevent__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
/* "THE NEXT EVENT" sits directly on the photo in Figma, not in the text column. */
.twobl-epi-nextevent__heading {
	position: absolute;
	top: clamp(1.5rem, 4vw, 2.75rem);
	left: clamp(1.5rem, 4vw, 2.75rem);
	color: var(--twobl-green);
	margin: 0;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.twobl-epi-nextevent__body { padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) 0; }
@media (max-width: 860px) {
	.twobl-epi-nextevent__body { padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem); }
}
.twobl-epi-nextevent__row { padding-block: 0.75rem; }
.twobl-epi-nextevent__label {
	font-family: var(--twobl-font-heading);
	font-size: var(--twobl-fs-h4);        /* 40px */
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--twobl-green);
	margin: 0 0 0.375rem;
}
.twobl-epi-nextevent__value {
	font-family: var(--twobl-font-body);
	font-size: 1.25rem;                   /* 20px */
	line-height: 1.4;
	color: var(--twobl-white);
	margin: 0;
}
.twobl-epi-nextevent .btn { margin-top: 1.5rem; color: var(--twobl-white); }

/* Find a Cohort: filter bar + cards grid. */
.twobl-epi-cohort-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	padding: 0.75rem 1.5rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	border: 1px solid var(--twobl-bg);
	border-radius: 999px;
}
.twobl-epi-cohort-filters__check {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1rem;
	color: var(--twobl-slate);
}
.twobl-epi-cohort-filters__check input { accent-color: var(--twobl-green); width: 20px; height: 20px; }
.twobl-epi-cohort-filters__reset {
	margin-left: auto;
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--twobl-grey-dark, #757575);
	background: none;
	border: 0;
	cursor: pointer;
}

.twobl-epi-cohorts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
@media (max-width: 900px) {
	.twobl-epi-cohorts { grid-template-columns: 1fr; }
}
.twobl-epi-cohort-empty {
	text-align: center;
	font-family: var(--twobl-font-body);
	color: var(--twobl-text-supporting);
	padding-block: clamp(2rem, 5vw, 4rem);
}
/* Cohort card ("Cohort Cards V2" component): a dark slate header (badge +
status tag + title/sub) seamlessly joined to a white info body — EXCEPT the
sold-out state, where the header flips to white-with-border to match. */
.twobl-epi-cohort-card { display: flex; flex-direction: column; }
.twobl-epi-cohort-card__head {
	background: var(--twobl-slate);
	border-radius: 20px 20px 0 0;
	padding: 1.5rem 2.5rem;
}
.twobl-epi-cohort-card--soldout .twobl-epi-cohort-card__head {
	background: var(--twobl-white);
	border: 1px solid #DDDFE0;
	border-bottom: 0;
}
.twobl-epi-cohort-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}
.twobl-epi-cohort-card__badge { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; }
.twobl-epi-cohort-card__tag {
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	white-space: nowrap;
}
.twobl-epi-cohort-card__tag--soldout { background: var(--twobl-red); color: var(--twobl-white); font-weight: 400; }
.twobl-epi-cohort-card__tag--earlybird { background: var(--twobl-white); color: var(--twobl-green); font-weight: 700; }
.twobl-epi-cohort-card__title { color: var(--twobl-white); margin: 0 0 0.1875rem; }
.twobl-epi-cohort-card--soldout .twobl-epi-cohort-card__title { color: var(--twobl-text-heading); }
.twobl-epi-cohort-card__sub {
	font-family: var(--twobl-font-body);
	font-size: 1.25rem;
	color: var(--twobl-text-on-dark);
	margin: 0;
}
.twobl-epi-cohort-card--soldout .twobl-epi-cohort-card__sub { color: var(--twobl-text-heading-2); }

.twobl-epi-cohort-card__body {
	background: var(--twobl-white);
	border: 1px solid var(--twobl-stroke-dark);
	border-top: 0;
	border-radius: 0 0 20px 20px;
	padding: 1.5rem 2.5rem 2rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}
.twobl-epi-cohort-card--soldout .twobl-epi-cohort-card__body { border-color: #DDDFE0; }
.twobl-epi-cohort-card__datelabel {
	font-family: var(--twobl-font-alt);
	font-size: 1rem;
	color: var(--twobl-text-heading);
	margin: 0 0 0.125rem;
}
.twobl-epi-cohort-card__dates { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 0.5rem; }
.twobl-epi-cohort-card__date {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid #DDDFE0;
	font-family: var(--twobl-font-body);
	font-size: 0.875rem;
	color: var(--twobl-text-heading);
}
.twobl-epi-cohort-card__info { margin: 0; }
.twobl-epi-cohort-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.625rem;
	border-top: 1px solid var(--twobl-bg);
	font-family: var(--twobl-font-body);
}
.twobl-epi-cohort-card__row:first-child { border-top: 0; padding-top: 0; }
.twobl-epi-cohort-card__row dt { color: #4E5456; text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.04em; margin: 0; font-weight: 400; }
.twobl-epi-cohort-card__row dd { color: var(--twobl-text-heading); font-weight: 600; font-size: 1rem; margin: 0; }
.twobl-epi-cohort-card__row--price dd { font-size: 1.5rem; letter-spacing: -0.045rem; }
.twobl-epi-cohort-card__row--price dd span { font-size: 1rem; font-weight: 400; margin-left: 0.125rem; }
.twobl-epi-cohort-card .btn { width: 100%; margin-top: 0.375rem; }
.twobl-epi-cohort-card .btn--primary { color: var(--twobl-white); }
.twobl-epi-cohort-card .btn[disabled] { background: #FFE1DE; color: var(--twobl-red); cursor: not-allowed; }

/* Image gallery ("Our Last Event") — full-bleed dark band (edge-to-edge, no
card/radius/clip — Figma's panel spans the full 2200px canvas), heading and
progress row sit in the normal container column while the drag-scroll track
bleeds past the right edge. Same full-bleed-with-inset-track technique as
the coach detail page's "<Name> in action" gallery (.twobl-coachgallery). */
.twobl-epi-gallery { background: var(--twobl-slate); padding-block: 4rem 9.0625rem; }
.twobl-epi-gallery__heading { color: var(--twobl-white); text-align: center; margin: 0 0 clamp(2.5rem, 6vw, 5rem); }
.twobl-epi-gallery__track {
	display: flex;
	align-items: flex-end;   /* bottoms align; item heights alternate short/tall */
	gap: 2.25rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-inline: max(var(--twobl-gutter), calc((100vw - var(--twobl-container)) / 2));
	/* Without this, Chrome's initial snap resolves to the first item's OWN start
	edge, silently consuming the left padding above (scrollLeft loads already
	at ~204px) so the first photo sits flush against the viewport edge instead
	of showing the intended lead-in gap. Matching scroll-padding to the visual
	padding tells the snap algorithm the padding IS the start boundary. */
	scroll-padding-inline: max(var(--twobl-gutter), calc((100vw - var(--twobl-container)) / 2));
	cursor: grab;
	scrollbar-width: none;
	-ms-overflow-style: none;
	user-select: none;
}
.twobl-epi-gallery__track::-webkit-scrollbar { display: none; }
.twobl-epi-gallery__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.twobl-epi-gallery__item {
	flex-shrink: 0;
	scroll-snap-align: start;
	border-radius: 20px;
	overflow: hidden;
	height: 322px;
}
.twobl-epi-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.twobl-epi-gallery__item--wide { width: 429px; }
.twobl-epi-gallery__item--tall { width: 322px; height: 430px; }
.twobl-epi-gallery__item--xl { width: 470px; height: 430px; }
.twobl-epi-gallery__progress {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	max-width: 44rem;
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--twobl-white);
}
.twobl-epi-gallery__track-bg { position: relative; flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.25); }
.twobl-epi-gallery__track-fill { position: absolute; inset: 0; width: 20%; border-radius: 4px; background: var(--twobl-green); }

/* Alternating image/text cross-sell rows. */
.twobl-epi-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 860px) { .twobl-epi-split { grid-template-columns: 1fr; } }
.twobl-epi-split--reverse .twobl-epi-split__media { order: 2; }
@media (max-width: 860px) { .twobl-epi-split--reverse .twobl-epi-split__media { order: 0; } }
.twobl-epi-split__media { border-radius: 20px; overflow: hidden; aspect-ratio: 531/710; }
.twobl-epi-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.twobl-epi-split__title { margin: 0 0 1.25rem; }
.twobl-epi-split__body { font-family: var(--twobl-font-alt); font-size: 1.0625rem; line-height: 1.7; color: var(--twobl-text-heading-2); }

.twobl-epi-feature-photo { border-radius: 20px; overflow: hidden; margin-bottom: clamp(3rem, 6vw, 5rem); }
.twobl-epi-feature-photo img { width: 100%; height: auto; display: block; }

/* "LEAP 2026 Speakers" — Figma shows 5 cards, 3 in row 1 and 2 centred in row 2.
Each card is a fixed 415px so a flex-wrap row naturally fits exactly 3 across
the 1320px container, then wraps the remaining 2 onto a centred second row —
no separate row2 markup/grid needed. */
.twobl-epi-speakers__heading { text-align: center; color: var(--twobl-text-heading); margin: 0 0 3.5rem; }
.twobl-epi-speakers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.125rem;                      /* 34px */
}
.twobl-epi-speaker {
	flex: 0 0 25.9375rem;                /* 415px */
	max-width: 100%;
	text-align: left;
	border: 1px solid var(--twobl-bg);
	border-radius: 20px;
	padding: 2rem 2.5rem 2rem;
}
.twobl-epi-speaker__photo { border-radius: 50%;margin-top: 20px;margin: 0 auto; object-fit: cover; margin-bottom: 1.5rem; }
.twobl-epi-speaker__name { font-family: var(--twobl-font-heading); font-size: var(--twobl-fs-h5); line-height: 1.25; text-transform: uppercase; color: var(--twobl-text-heading); margin: 0 0 0.375rem; }
.twobl-epi-speaker__role {
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--twobl-text-heading-2);
	margin: 0 0 1.25rem;
}
.twobl-epi-speaker__bio {
	font-family: var(--twobl-font-alt);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--twobl-text-heading-2);
	margin: 0;
}
@media (max-width: 900px) {
	.twobl-epi-speaker { flex-basis: 100%; }
}
@media (max-width: 640px) {
	.twobl-epi-meta { flex-direction: column; align-items: stretch; }
	.twobl-epi-meta__item { border-left: 0; padding-left: 0; border-top: 1px solid var(--twobl-bg); padding-top: 1.5rem; }
	.twobl-epi-meta__item:first-child { border-top: 0; padding-top: 0; }
}

/* ---- 19. Contact page ---- */
.twobl-contactpage__hero {
	padding-block: clamp(8.5rem, 12vw, 12.5rem) clamp(3.5rem, 6vw, 5.5rem);
	background: var(--twobl-green);
}
.twobl-contactpage__hero-eyebrow {
	text-align: center;
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.05em;
	color: var(--twobl-slate);
	margin: 0 0 1.25rem;
}
.twobl-contactpage__hero-title {
	font-family: var(--twobl-font-heading);
	font-size: clamp(4.5rem, 11vw, 9.25rem);
	line-height: 0.88;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--twobl-slate);
	text-align: center;
	max-width: 82rem;
	margin: 0 auto 1.5rem;
}
.twobl-contactpage__hero-subtitle {
	text-align: center;
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--twobl-slate);
	margin: 0;
}

.twobl-contactpage__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	margin-bottom: clamp(4rem, 7vw, 6rem);
}
@media (max-width: 960px) {
	.twobl-contactpage__main { grid-template-columns: 1fr; }
}
.twobl-contactpage__banner {
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 2rem;
}
.twobl-contactpage__banner img { width: 100%; height: auto; display: block; border-radius: 20px; }

/* Dubai HQ Card Frame */
.twobl-contactpage__hqcard {
	border: 1px solid #7B8C93;
	border-radius: 20px;
	padding: 2.25rem 2rem;
	background: #F4F7F8;
}
.twobl-contactpage__location-heading {
	font-family: var(--twobl-font-heading);
	font-size: clamp(1.85rem, 3.2vw, 2.45rem);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--twobl-slate);
	margin: 0 0 1rem;
}
.twobl-contactpage__address {
	font-family: var(--twobl-font-body);
	font-size: 0.9375rem;
	line-height: 1.45;
	color: #5A6B72;
	width: 100%;
	max-width: 25rem;
	margin: 0 0 1.25rem;
}
.twobl-contactpage__viewmap {
	display: inline-flex;
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--twobl-green);
	text-decoration: none;
	margin-bottom: 1.75rem;
	transition: opacity 0.2s ease;
}
.twobl-contactpage__viewmap:hover { opacity: 0.8; text-decoration: underline; }
.twobl-contactpage__details { border-top: 1px solid #7B8C93; }
.twobl-contactpage__detail-row {
	display: flex;
	gap: 1.5rem;
	padding-block: 0.85rem;
	border-bottom: 1px solid #7B8C93;
}
.twobl-contactpage__detail-row:last-child {
	border-bottom: 0;
}
.twobl-contactpage__detail-label {
	flex-shrink: 0;
	width: 6.5rem;
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 0.875rem;
	color: #5A6B72;
	margin: 0;
}
.twobl-contactpage__detail-value {
	font-family: var(--twobl-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--twobl-slate);
	margin: 0;
}

/* Green outer form card */
.twobl-contactpage__form-container {
	background: var(--twobl-green);
	border-radius: 24px;
	padding: 2.5rem 2rem;
	text-align: center;
}
.twobl-contactpage__form-title {
	font-family: var(--twobl-font-heading);
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--twobl-white);
	margin: 0 0 1.75rem;
	text-align: center;
}
.twobl-contactpage__form-inner {
	background: var(--twobl-white);
	border-radius: 20px;
	padding: 2rem 1.75rem 1.75rem;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}
.twobl-contactpage__form-inner .twobl-contact__form {
	align-items: stretch;
}
.twobl-contactpage__form-inner .twobl-contact__field,
.twobl-contactpage__form-inner .twobl-contact__submit {
	max-width: none;
}

.twobl-contactpage__otherlocations-heading {
	font-family: var(--twobl-font-heading);
	font-size: clamp(2.5rem, 5vw, 4rem);
	text-transform: uppercase;
	color: var(--twobl-slate);
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.twobl-contactpage__locations {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 860px) {
	.twobl-contactpage__locations { grid-template-columns: 1fr; }
}
.twobl-contactpage__location-col {
	padding-left: clamp(1.5rem, 3vw, 2.75rem);
	border-left: 1px solid #EBEFF1;
}
.twobl-contactpage__location-col:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 860px) {
	.twobl-contactpage__location-col { padding-left: 0; border-left: 0; padding-top: 2rem; border-top: 1px solid #EBEFF1; }
	.twobl-contactpage__location-col:first-child { padding-top: 0; border-top: 0; }
}
/* ---- 20. Programmes and Experiences ---- */
.twobl-pe-hero__eyebrow {
	text-align: center;
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--twobl-text-heading);
	margin: 0 0 2rem;
}
.twobl-pe-hero__subtitle {
	text-align: center;
	font-family: var(--twobl-font-alt);
	font-size: 18px;
	color: var(--twobl-text-heading-2);
	margin: 1.25rem 0 .8rem;
}
.twobl-pe-hero__cta { display: flex; justify-content: center; }

.twobl-pe-intro {
	display: grid;
	grid-template-columns: minmax(0, 34.3125rem) 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 900px) {
	.twobl-pe-intro { grid-template-columns: 1fr; }
}
.twobl-pe-intro__media { border-radius: 20px; overflow: hidden; }
.twobl-pe-intro__media img { width: 100%; height: auto; display: block; }
.twobl-pe-intro__title { margin: 0 0 1.5rem; }
.twobl-pe-intro__body p { font-family: var(--twobl-font-alt); font-size: 1.0625rem; line-height: 1.7; color: var(--twobl-text-heading-2); }
.twobl-pe-intro__body p + p { margin-top: 1.25rem; }

.twobl-pe-jumpnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.twobl-pe-jumpnav__pill { text-decoration: none; }

.twobl-pe-section { padding-block: clamp(3rem, 6vw, 4.5rem); scroll-margin-top: calc(var(--twobl-sticky-top) + 1rem); }
.twobl-pe-section:nth-child(odd) { background: var(--twobl-bg); }
.twobl-pe-section__layout {
	display: grid;
	grid-template-columns: minmax(0, 33.75rem) 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
@media (max-width: 900px) {
	.twobl-pe-section__layout { grid-template-columns: 1fr; }
}
.twobl-pe-section__sticky { position: sticky; top: var(--twobl-sticky-top); }
@media (max-width: 900px) {
	.twobl-pe-section__sticky { position: static; }
}
.twobl-pe-section__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 45px;
	height: 45px;
	padding: 0 0.5rem;
	border-radius: 999px;
	border: 1px solid var(--twobl-stroke-dark);
	font-family: var(--twobl-font-body);
	font-weight: 700;
	color: var(--twobl-stroke-dark);
	margin-bottom: 1rem;
}
.twobl-pe-section__title { margin: 0 0 1.25rem; }
.twobl-pe-section__body p { font-family: var(--twobl-font-alt); font-size: 1.0625rem; line-height: 1.7; color: var(--twobl-text-heading-2); }
.twobl-pe-section__body p + p { margin-top: 1.25rem; }

.twobl-pe-cards { display: flex; flex-direction: column; gap: 2rem; }
.twobl-pe-card {
	background: var(--twobl-white);
	border: 1px solid var(--twobl-stroke-dark);
	border-radius: 20px;
	overflow: hidden;
	max-width: 26.25rem;
}
.twobl-pe-card__media { position: relative; height: 180px; }
.twobl-pe-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.twobl-pe-card__badge {
	position: absolute;
	left: 2rem;
	bottom: -30px;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--twobl-white);
	border: 1px solid var(--twobl-bg);
	box-shadow: 0 6px 16px rgba(27, 41, 48, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
}
.twobl-pe-card__badge img { width: 32px; height: 32px; }
.twobl-pe-card__body { padding: 2.75rem 2rem 2rem; }
.twobl-pe-card__title { margin: 0 0 1.25rem; }
.twobl-pe-card__label {
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1rem;
	color: var(--twobl-text-heading);
	margin: 0 0 0.75rem;
}
.twobl-pe-card__benefits { margin: 0 0 1.75rem; }
.twobl-pe-card__benefit {
	padding-block: 0.75rem;
	border-top: 1px solid var(--twobl-bg);
	font-family: var(--twobl-font-alt);
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	color: var(--twobl-text-body, #4C5C63);
}
.twobl-pe-card__benefit:last-child { border-bottom: 1px solid var(--twobl-bg); }
.twobl-pe-card .btn { width: 100%; }

/* ---- 21. About Us ---- */
.twobl-about-hero__subtitle {
	text-align: center;
	font-family: var(--twobl-font-alt);
	font-size: 1.0625rem;
	color: var(--twobl-text-heading-2);
	max-width: 46ch;
	margin: 1.25rem auto 0;
}

.twobl-about-split {
	display: grid;
	grid-template-columns: minmax(0, 33.625rem) 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.twobl-about-split + .twobl-about-split { margin-top: clamp(3rem, 6vw, 5rem); }
@media (max-width: 900px) {
	.twobl-about-split { grid-template-columns: 1fr; }
	.twobl-about-split__media { order: -1; }
}
.twobl-about-split__eyebrow {
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 1rem;
	color: var(--twobl-stroke-dark);
	margin: 0 0 1rem;
}
.twobl-about-split__quote { margin: 0 0 1.25rem; }
.twobl-about-split__body {
	font-family: var(--twobl-font-alt);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--twobl-text-heading-2);
	margin: 0;
}
.twobl-about-split__media { border-radius: 20px; overflow: hidden; aspect-ratio: 531/710; }
.twobl-about-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.twobl-about-values__label { margin: 0 0 1rem; }
.twobl-about-values__intro {
	font-family: var(--twobl-font-alt);
	font-size: 1.0625rem;
	color: var(--twobl-text-heading-2);
	margin: 0;
}

.twobl-about-award-year { margin-bottom: 2rem; }
.twobl-about-award-year:last-child { margin-bottom: 0; }
.twobl-about-award-year__year { margin: 0 0 1rem; }
.twobl-about-award-year__item {
	padding-block: 0.9375rem;
	border-top: 1px solid var(--twobl-bg);
	font-family: var(--twobl-font-alt);
	font-size: 1.0625rem;
	color: var(--twobl-text-heading-2);
}

.twobl-about-accreditations { display: flex; flex-direction: column; }
.twobl-about-accred {
	display: grid;
	grid-template-columns: 182px 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
	padding-block: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--twobl-bg);
}
.twobl-about-accreditations .twobl-about-accred:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 600px) {
	.twobl-about-accred { grid-template-columns: 96px 1fr; }
}
.twobl-about-accred__media {
	width: 182px;
	height: 143px;
	border: 1px solid var(--twobl-bg);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 1rem;
}
@media (max-width: 600px) {
	.twobl-about-accred__media { width: 96px; height: 96px; }
}
.twobl-about-accred__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.twobl-about-accred__title {
	font-family: var(--twobl-font-heading);
	font-size: 1.375rem;
	text-transform: uppercase;
	color: var(--twobl-text-heading);
	margin: 0 0 0.5rem;
}
.twobl-about-accred__desc {
	font-family: var(--twobl-font-alt);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--twobl-text-heading-2);
	margin: 0 0 0.75rem;
}
.twobl-about-accred__link {
	font-family: var(--twobl-font-body);
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--twobl-slate);
	text-decoration: underline;
}

/* ---- 22. 2bAPC (Coach Certification) ---- */
.twobl-apac-section--dark { background: var(--twobl-slate); }
.twobl-apac-section--dark h2,
.twobl-apac-section--dark h3 { color: var(--twobl-white); }
.twobl-apac-section--dark p { color: var(--twobl-text-on-dark); }
.twobl-apac-section--dark .twobl-epi-progcard {
	background: var(--twobl-white);
	border-color: transparent;
}

.twobl-apac-photo-circle {
	border-radius: 50%;
	overflow: hidden;
	aspect-ratio: 1;
}
.twobl-apac-photo-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }

.twobl-apac-photo-ring {
	position: relative;
	border-radius: 50%;
	aspect-ratio: 1;
	background: var(--twobl-yellow);
	padding: clamp(1rem, 3vw, 1.75rem);
	display: flex;
	align-items: center;
	justify-content: center;
}
.twobl-apac-photo-ring img {
	width: 80%;
	height: 80%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.twobl-apac-cta {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding-block: clamp(3rem, 6vw, 5rem);
}
.twobl-apac-cta__inner { position: relative; z-index: 1; max-width: 50rem; margin: 0 auto; }
.twobl-apac-cta__body {
	font-family: var(--twobl-font-alt);
	font-size: 1.0625rem;
	color: var(--twobl-text-heading-2);
	margin: 1.5rem 0 2rem;
}

/* ---- Book a discovery call modal --------------------------------------- */
.twobl-modal {
	width: min(51.25rem, calc(100vw - 2rem));   /* 820px card on desktop */
	max-width: none;
	max-height: calc(100dvh - 2rem);
	padding: 0;
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--twobl-white);
	box-shadow: 0 24px 64px rgba(27, 41, 48, 0.22);
	color: var(--twobl-text-body);
}
.twobl-modal::backdrop {
	background: rgba(27, 41, 48, 0.55);
	backdrop-filter: blur(2px);
}

.twobl-modal[open] {
	display: flex;
	flex-direction: column;
}
.twobl-modal__inner {
	display: grid;
	grid-template-columns: 42% 58%;   /* measured off the Figma desktop frame */
	flex: 1 1 auto;
	min-height: 0;
}
.twobl-modal__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--twobl-green);
	padding: 2rem;
}
.twobl-modal__logo { position: relative; display: inline-block; line-height: 0; }
.twobl-modal__logo-mark { display: block; width: 135px; height: auto; }
.twobl-modal__logo-word {
	position: absolute;
	left: 61.2%;
	top: 20.8%;
	width: 70.9%;
	height: auto;
}
.twobl-modal__panel {
	position: relative;
	padding: 2.75rem 3rem 2.25rem;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.twobl-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--twobl-slate);
	cursor: pointer;
}
.twobl-modal__close:hover { background: var(--twobl-bg); }
.twobl-modal__title {
	font-family: var(--twobl-font-heading);
	font-size: 2rem;
	line-height: 1.05;
	text-transform: uppercase;
	text-align: center;
	color: var(--twobl-slate);
	margin: 0 0 0.75rem;
}
.twobl-modal__title br { display: none; }
.twobl-modal__body {
	font-family: var(--twobl-font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	text-align: center;
	color: var(--twobl-text-body);
	margin: 0 0 1.5rem;
}
.twobl-modal__form { max-width: 22rem; margin-inline: auto; }
.twobl-modal__submit { width: 100%; }

/* ---- Case study video popup ---------------------------------------------*/
.twobl-video-modal {
	width: min(64rem, calc(100vw - 2rem));   /* 1024px, wide enough for 16:9 at a readable size */
	padding: 0;
	overflow: visible;
}
.twobl-video-modal__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
}
.twobl-video-modal__frame iframe,
.twobl-video-modal__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.twobl-video-modal__close {
	top: -3.25rem;
	right: 0;
	background: none;
	box-shadow: none;
	color: var(--twobl-white);
}
.twobl-video-modal__close:hover { background: rgba(255, 255, 255, 0.15); }
@media (max-width: 640px) {
	.twobl-video-modal { overflow: hidden; }
	.twobl-video-modal__close {
		top: 0.5rem;
		right: 0.5rem;
		background: var(--twobl-white);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
		color: var(--twobl-slate);
	}
	.twobl-video-modal__close:hover { background: var(--twobl-bg); }
}

@media (max-width: 780px) {
	.twobl-modal {
		width: calc(100vw - 2.5rem);
		border-radius: 24px;
	}
	.twobl-modal__inner { grid-template-columns: 1fr; }
	.twobl-modal__brand { display: none; }
	.twobl-modal__panel { padding: 2.5rem 1.25rem 1.75rem; }
	.twobl-modal__title { font-size: 2.25rem; }
	.twobl-modal__title br { display: inline; }
	.twobl-modal__form { max-width: none; }
}

/* The dialog is display:none until opened, so lock background scroll only then. */
body.twobl-modal-open { overflow: hidden; }