/* =============================================================
   WBA COACHES — SHARED STYLES
   Used by hub, education, masterclass and eoi templates.
   Relies on theme brand tokens: --wba-red, --wba-orange,
   --wba-dark, --wba-white, --wba-cream, --wba-border,
   --wba-muted, --gutter-d, --gutter-m.
   ============================================================= */

.co {
	--co-accent: var(--wba-red);
	--co-accent-soft: rgba(193, 39, 45, 0.08);
	color: var(--wba-dark);
}

.co svg { width: 1em; height: 1em; vertical-align: -0.12em; }

/* -------------------------------------------------------------
   SECTION SHELLS
   ----------------------------------------------------------- */
.co-section { padding: 70px var(--gutter-m); }
.co-section__inner { max-width: 1180px; margin: 0 auto; }
.co-section--cream { background: var(--wba-cream); }
.co-section--dark { background: var(--wba-dark); color: var(--wba-white); }
@media (min-width: 880px) {
	.co-section { padding: 100px var(--gutter-d); }
}

/* -------------------------------------------------------------
   SECTION HEAD
   ----------------------------------------------------------- */
.co-shead { margin-bottom: 40px; max-width: 760px; }
.co-shead--center { margin-left: auto; margin-right: auto; text-align: center; }
.co-shead__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--co-accent);
	margin: 0 0 14px;
}
.co-section--dark .co-shead__eyebrow { color: var(--wba-orange); }
.co-shead__title {
	font-size: clamp(1.8rem, 5vw, 3rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin: 0;
}
.co-shead__title em { font-style: italic; font-weight: 300; color: var(--wba-muted); }
.co-section--dark .co-shead__title em { color: rgba(255,255,255,0.55); }
.co-shead__lede {
	margin: 18px 0 0;
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--wba-muted);
	max-width: 680px;
}
.co-shead--center .co-shead__lede { margin-left: auto; margin-right: auto; }
.co-section--dark .co-shead__lede { color: rgba(255,255,255,0.72); }

/* -------------------------------------------------------------
   PAGE HERO (58vh)
   ----------------------------------------------------------- */
.co-hero {
	position: relative;
	min-height: 58vh;
	display: flex;
	align-items: flex-end;
	background: var(--wba-dark);
	color: var(--wba-white);
	overflow: hidden;
	padding: 0 var(--gutter-m) 54px;
}
.co-hero__bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0.4; z-index: 0;
}
.co-hero::after {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(120% 90% at 15% 100%, rgba(193,39,45,0.5) 0%, rgba(26,26,26,0) 55%),
	            linear-gradient(180deg, rgba(26,26,26,0.55) 0%, rgba(26,26,26,0.9) 100%);
	z-index: 1;
}
.co-hero__inner { position: relative; z-index: 2; max-width: 1180px; width: 100%; margin: 0 auto; }
.co-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.64rem; font-weight: 700; letter-spacing: 0.22em;
	text-transform: uppercase; color: var(--wba-orange); margin: 0 0 18px;
}
.co-hero__title {
	font-size: clamp(2.4rem, 8vw, 4.6rem);
	font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; margin: 0;
}
.co-hero__accent { font-style: italic; font-weight: 300; color: var(--wba-white); }
.co-hero__lede {
	margin: 22px 0 0; max-width: 620px;
	font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.82);
}
.co-hero__pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.co-pill {
	font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 8px 14px; border: 1px solid rgba(255,255,255,0.28);
	border-radius: 999px; color: rgba(255,255,255,0.9); white-space: nowrap;
}
@media (min-width: 880px) {
	.co-hero { padding: 0 var(--gutter-d) 70px; }
}

/* -------------------------------------------------------------
   STAT STRIP
   ----------------------------------------------------------- */
.co-stats {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: 1px; background: var(--wba-border);
	border: 1px solid var(--wba-border); border-radius: 16px; overflow: hidden;
}
.co-stats__cell { background: var(--wba-white); padding: 30px 18px; text-align: center; }
.co-stats__num {
	font-size: clamp(2rem, 6vw, 3.1rem); font-weight: 800; line-height: 1;
	color: var(--co-accent); letter-spacing: -0.02em;
}
.co-stats__label { margin: 10px 0 0; font-size: 0.78rem; font-weight: 600; color: var(--wba-muted); line-height: 1.4; }
@media (min-width: 760px) { .co-stats { grid-template-columns: repeat(4, 1fr); } }

/* -------------------------------------------------------------
   DARK VALUES GRID
   ----------------------------------------------------------- */
.co-values { display: grid; grid-template-columns: 1fr; gap: 14px; }
.co-values__card {
	border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
	padding: 26px 24px; background: rgba(255,255,255,0.03);
}
.co-values__icon {
	display: inline-flex; width: 44px; height: 44px;
	align-items: center; justify-content: center; border-radius: 11px;
	background: var(--co-accent); color: var(--wba-white); font-size: 1.2rem; margin-bottom: 16px;
}
.co-values__title { font-size: 1.1rem; font-weight: 800; margin: 0 0 8px; }
.co-values__desc { margin: 0; font-size: 0.9rem; line-height: 1.65; color: rgba(255,255,255,0.72); }
.co-values__desc em { color: var(--wba-orange); font-style: italic; }
@media (min-width: 700px) { .co-values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
	.co-values { grid-template-columns: repeat(5, 1fr); }
	.co-values__card { padding: 24px 18px; }
	.co-values__title { font-size: 0.98rem; }
	.co-values__desc { font-size: 0.82rem; }
}

/* -------------------------------------------------------------
   CONTACT PANEL
   ----------------------------------------------------------- */
.co-contact__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.co-contact__card {
	background: var(--wba-white); border: 1px solid var(--wba-border);
	border-top: 3px solid var(--co-accent); border-radius: 16px; padding: 30px 28px;
}
.co-contact__name { font-size: 1.3rem; font-weight: 800; margin: 0 0 4px; }
.co-contact__role { font-size: 0.82rem; color: var(--wba-muted); margin: 0 0 20px; line-height: 1.5; }
.co-contact__links { display: flex; flex-direction: column; gap: 12px; }
.co-contact__link {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 0.92rem; font-weight: 600; color: var(--wba-dark); text-decoration: none;
}
.co-contact__link svg { color: var(--co-accent); }
.co-contact__link:hover { color: var(--co-accent); }
@media (min-width: 880px) { .co-contact__grid { grid-template-columns: 1.1fr 0.9fr; gap: 48px; } }

/* -------------------------------------------------------------
   BUTTONS
   ----------------------------------------------------------- */
.co-btn {
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--co-accent); color: var(--wba-white);
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	text-decoration: none; padding: 15px 26px; border-radius: 999px;
	border: 1px solid var(--co-accent); cursor: pointer;
	font-family: inherit;
	transition: transform 0.18s ease, background 0.18s ease;
}
.co-btn:hover { transform: translateY(-2px); background: #a81f24; }
.co-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.co-btn--ghost { background: transparent; color: var(--wba-dark); border-color: var(--wba-border); }
.co-btn--ghost:hover { background: var(--wba-dark); color: var(--wba-white); border-color: var(--wba-dark); }
.co-section--dark .co-btn--ghost { color: var(--wba-white); border-color: rgba(255,255,255,0.35); }
.co-section--dark .co-btn--ghost:hover { background: var(--wba-white); color: var(--wba-dark); }
.co-btn--light { background: var(--wba-white); color: var(--wba-dark); border-color: var(--wba-white); }
.co-btn--light:hover { background: var(--wba-cream); }
.co-btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* -------------------------------------------------------------
   CROSS-LINK CALLOUT
   ----------------------------------------------------------- */
.co-crosslink {
	display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
	background: var(--co-accent-soft); border: 1px solid var(--wba-border);
	border-left: 3px solid var(--co-accent); border-radius: 14px;
	padding: 24px 26px; margin-top: 40px;
}
.co-crosslink p { margin: 0; font-size: 0.95rem; line-height: 1.6; }
@media (min-width: 760px) {
	.co-crosslink { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* -------------------------------------------------------------
   ANCHOR NAV (sticky, red top border)
   ----------------------------------------------------------- */
.co-anchornav {
	position: sticky; top: 0; z-index: 30;
	background: var(--wba-white); border-top: 2px solid var(--co-accent);
	border-bottom: 1px solid var(--wba-border);
	overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.co-anchornav__inner { display: flex; gap: 6px; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter-m); }
.co-anchornav a {
	flex-shrink: 0; padding: 16px 14px;
	font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--wba-muted); text-decoration: none;
	border-bottom: 2px solid transparent; white-space: nowrap;
	transition: color 0.15s, border-color 0.15s;
}
.co-anchornav a:hover { color: var(--co-accent); border-bottom-color: var(--co-accent); }
@media (min-width: 880px) {
	.co-anchornav__inner { padding: 0 var(--gutter-d); gap: 10px; }
	.co-anchornav a { padding: 18px 18px; }
}

/* -------------------------------------------------------------
   FORMS (Formspree pattern — masterclass + eoi)
   ----------------------------------------------------------- */
.co-form-wrap { max-width: 760px; }
.co-form {
	background: var(--wba-white); border: 1px solid var(--wba-border);
	border-radius: 18px; padding: 30px 26px;
}
.co-section--cream .co-form { box-shadow: 0 18px 40px rgba(26,26,26,0.05); }
.co-form__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .co-form__grid { grid-template-columns: 1fr 1fr; } }
.co-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.co-field--full { margin-bottom: 18px; }
.co-form__grid .co-field { margin-bottom: 0; }
.co-field__label {
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--wba-muted);
}
.co-field input,
.co-field select,
.co-field textarea {
	width: 100%; box-sizing: border-box;
	font-family: inherit; font-size: 0.95rem; color: var(--wba-dark);
	background: var(--wba-cream); border: 1px solid var(--wba-border);
	border-radius: 10px; padding: 13px 14px;
	transition: border-color 0.15s, background 0.15s;
}
.co-field input:focus,
.co-field select:focus,
.co-field textarea:focus {
	outline: none; border-color: var(--co-accent); background: var(--wba-white);
}
.co-field textarea { resize: vertical; }
.co-form .form__submit { margin-top: 24px; }
.co-form__note { margin: 16px 0 0; font-size: 0.85rem; color: var(--wba-muted); }
.co-form__note a { color: var(--co-accent); font-weight: 600; }

/* honeypot — off-screen, not display:none */
.form__honeypot {
	position: absolute !important;
	left: -10000px !important; top: auto !important;
	width: 1px !important; height: 1px !important; overflow: hidden !important;
}

/* success / error states */
.form__success,
.form__error {
	border-radius: 12px; padding: 16px 18px; margin-bottom: 22px;
	font-size: 0.92rem; line-height: 1.55; font-weight: 600;
}
.form__success { background: rgba(34,139,69,0.1); border: 1px solid rgba(34,139,69,0.35); color: #1c7a3e; }
.form__error { background: var(--co-accent-soft); border: 1px solid rgba(193,39,45,0.35); color: var(--co-accent); }