body 			{ font-family: 'Helvetica Neue', Helvetica, sans-serif; background-color: #101210; padding: 50px; color: #FFF; }

.logo			{ max-width: 450px; width: 100%; }

.content		{ max-width: 1280px; margin-bottom: 2em; }

h1				{ font-size: 100px; line-height: 0.85em; font-weight: 400; margin-bottom: 0; }
h2				{ font-size: 50px; line-height: 1em; font-weight: 400; }
h2 a			{ color: #f50c33; }
h2 a:active		{ color: #FFF; }
h2 a:visited	{ color: #f50c33; }

h3				{ font-size: 25px; line-height: 1em; font-weight: 400; }

.button			{ border-radius: 30px; background-color: #f50c33; color: #FFF; padding: 0.75em 2em; display: inline-block; text-decoration:none; transition: transform 200ms ease-in-out; }
.button:hover	{ transform: scale(1.05); }
.button:active	{ background-color: #FFF; color: #000; }

.social			{ color: #FFF; margin-left: 1em; }
.social:hover	{ opacity: 0.5; }

.black-friday	{ display: flex; flex-wrap: wrap; justify-content: space-between; }
.black-friday img	{ width: 50%; }


/* ─── Class type colour tokens ─────────────────────────── */
/* Sets `color` only - elements that need a coloured fill use `currentColor` (e.g. dots, tags). Used by timetable and what-we-offer. */

.class-type-crossfit		{ color: #f50c33; }
.class-type-hyrox			{ color: #f5c518; }
.class-type-bodytone		{ color: #4ade80; }
.class-type-crossfit-teens	{ color: #ff8c42; }
.class-type-open-gym		{ color: #ffffff; }
.class-type-tba				{ color: #b07cf5; }


/* ─── Nav ──────────────────────────────────────────────── */

.nav						{ display: flex; align-items: center; justify-content: space-between; gap: 1.5em; flex-wrap: wrap; margin-bottom: 3em; }
.nav-logo					{ display: inline-flex; }
.nav-logo img				{ height: 50px; width: auto; display: block; }

.nav-links					{ list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75em; align-items: center; flex-wrap: wrap; }
.nav-links a				{ color: #FFF; text-decoration: none; font-size: 18px; transition: opacity 200ms ease-in-out; }
.nav-links a:hover			{ opacity: 0.65; }
.nav-links a[aria-current="page"]	{ color: #f50c33; }

.nav-cta					{ border-radius: 30px; background-color: #f50c33; padding: 0.55em 1.5em; transition: transform 200ms ease-in-out; }
.nav-links a.nav-cta:hover	{ transform: scale(1.05); opacity: 1; }
.nav-cta:active				{ background-color: #FFF; color: #000; }








/* ─── Footer ───────────────────────────────────────────── */

.footer						{ margin-top: 5em; padding-top: 3em; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); }
.footer-inner				{ display: grid; grid-template-columns: 1.1fr 1fr 1.4fr 1fr; gap: 2.5em; align-items: start; }
.footer-brand img			{ height: 60px; width: auto; display: block; margin-bottom: 1em; }
.footer-brand p				{ font-size: 14px; line-height: 1.55; opacity: 0.7; margin: 0; max-width: 18em; }

.footer-col h3				{ font-size: 13px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #f50c33; margin: 0 0 1em 0; line-height: 1; }
.footer-col ul				{ list-style: none; margin: 0; padding: 0; }
.footer-col li				{ margin-bottom: 0.6em; }
.footer-col a				{ color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 15px; line-height: 1.5; transition: color 200ms ease-in-out; }
.footer-col a:hover			{ color: #f50c33; }
.footer-col p				{ font-size: 15px; line-height: 1.5; margin: 0 0 0.6em 0; }
.footer-col .footer-social	{ display: flex; gap: 1em; flex-wrap: wrap; margin-top: 0.75em; }

.footer-bottom				{ margin-top: 3em; padding: 1.5em 0; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; align-items: center; gap: 1em; flex-wrap: wrap; }
.footer-bottom p			{ margin: 0; font-size: 13px; opacity: 0.55; }




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

	.footer-inner		{ grid-template-columns: 1fr 1fr; gap: 2em; }
	.footer-brand		{ grid-column: 1 / -1; }

}


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

	body			{ padding: 25px; }

	h1				{ font-size: 60px; }
	h2				{ font-size: 30px; }
	h3				{ font-size: 15px; }

	.social			{ margin-left: 0.5em; }

	.nav			{ margin-bottom: 2em; gap: 1em; }
	.nav-logo img	{ height: 38px; }
	.nav-links		{ gap: 1.25em; }
	.nav-links a	{ font-size: 16px; }
	.nav-cta		{ padding: 0.5em 1.25em; }


	.footer			{ margin-top: 3em; padding-top: 2em; }
	.footer-inner	{ grid-template-columns: 1fr; gap: 2em; }
	.footer-brand	{ grid-column: auto; }
	.footer-brand img	{ height: 50px; }
	.footer-bottom	{ margin-top: 2em; }

}