/* Force Necessary UK - static rebuild of the Joomla "consortium" template. */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: 'Montserrat'; font-weight: 200; font-style: normal; font-display: swap; src: url(../fonts/montserrat-latin-200-normal.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/montserrat-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/montserrat-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/montserrat-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/open-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/open-sans-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/open-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-style: italic; font-display: swap; src: url(../fonts/open-sans-latin-600-italic.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/open-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'FontAwesome'; font-weight: 400; font-style: normal; font-display: block; src: url(../fonts/fontawesome-webfont.woff2) format('woff2'); }

/* Only the Font Awesome 4 glyphs the site uses */
.fa { display: inline-block; font: normal normal normal 1em/1 FontAwesome; -webkit-font-smoothing: antialiased; }
.fa-facebook::before { content: "\f09a"; }
.fa-linkedin::before { content: "\f0e1"; }
.fa-youtube-play::before { content: "\f16a"; }
.fa-arrow-down::before { content: "\f063"; }
.fa-caret-down::before { content: "\f0d7"; }

/* ---------- Tokens ---------- */
:root {
	--text: #9d9ca9;
	--ink: #000;
	--muted-nav: #626262;
	--heading: 'Montserrat', sans-serif;
	--body: 'Open Sans', sans-serif;
	--hero-h: clamp(520px, 75vh, 750px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font: 14px/24.5px var(--body);
	color: var(--text);
	background: #fff;
}
img { max-width: 100%; height: auto; border: 0; }
a { color: var(--text); text-decoration: none; transition: color .2s; }
a:hover { color: var(--ink); }
p { margin: 12px 0 20px; }
ul { margin: 12.6px 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { color: var(--ink); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* ---------- Hero header ---------- */
.hero {
	position: relative;
	height: var(--hero-h);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: calc(var(--hero-h) * .3);
	text-align: center;
	background: #333 url(../images/hero-hand.jpg) 50% 50% / cover no-repeat;
	color: #fff;
}
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .65); }
.hero > * { position: relative; }

.menu-button {
	position: absolute;
	top: 30px; left: 30px;
	width: 40px; height: 30px;
	padding: 0; border: 0;
	background: url(../images/menu.png) 50% 0 no-repeat;
	cursor: pointer;
	z-index: 2;
}
.social {
	position: absolute;
	top: 30px; right: 23px;
	display: flex;
	margin: 0; padding: 0;
	z-index: 2;
}
.social a {
	display: block;
	width: 44px; height: 44px;
	margin: 0 7px;
	border-radius: 50%;
	color: #fff;
	font-size: 20px;
	line-height: 44px;
	text-align: center;
}
.social a:hover { color: var(--text); }

.sitename { margin: 0; font: 700 50px/38px var(--heading); letter-spacing: -2px; text-transform: uppercase; }
.sitename a { color: #fff; }
.sitename a:hover { color: var(--text); }
.sitename span { display: block; margin-top: 17px; font-size: 32.5px; letter-spacing: -1px; text-transform: none; }

/* Inline nav (desktop) */
.nav-top { margin-top: 10px; }
.nav-top > ul { display: flex; justify-content: center; margin: 0; }
.nav-top li { position: relative; }
.nav-top > ul > li > a,
.nav-top > ul > li > button {
	display: block;
	margin: 25px 10px;
	padding: 10px 5px 13px;
	border: 0;
	background: none;
	font: 600 13px/20px var(--heading);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
}
.nav-top > ul > li > a:hover,
.nav-top > ul > li > button:hover,
.nav-top a[aria-current="page"],
.nav-top .is-current > button { color: var(--muted-nav); }
.nav-top .fa-caret-down { margin-left: 6px; }
.nav-top .sub {
	position: absolute;
	top: 75px; left: 50%;
	width: 220px;
	margin: 0 0 0 -110px;
	background: #fff;
	border: 1px solid #dcdcdc;
	border-radius: 5px;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s, transform .25s, visibility .25s;
	z-index: 5;
}
.nav-top li:hover > .sub,
.nav-top li:focus-within > .sub { opacity: 1; visibility: visible; transform: none; }
.nav-top .sub a {
	display: block;
	padding: 5px 0 5px 15px;
	font: 400 13px/40px var(--heading);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #000;
}
.nav-top .sub a:hover, .nav-top .sub a[aria-current="page"] { color: var(--text); }

.scroll-button {
	margin-top: auto;
	margin-bottom: calc(var(--hero-h) * .18);
	display: block;
	width: 60px; height: 60px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: #000;
	color: #fff;
	font-size: 25px;
	line-height: 54px;
	animation: tada 1s 1s both;
}
.scroll-button:hover { color: #fff; background: #222; }

/* ---------- Full-screen menu ---------- */
.menu-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, .9);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s, visibility .4s;
}
.menu-modal.is-open { opacity: 1; visibility: visible; }
.menu-close {
	position: absolute;
	top: 0; left: 10px;
	width: 65px; height: 80px;
	border: 0;
	background: #000;
	cursor: pointer;
}
.menu-close::before, .menu-close::after {
	content: "";
	position: absolute;
	top: 39px; left: 20px;
	width: 25px; height: 2px;
	background: #fff;
	transform: rotate(45deg);
}
.menu-close::after { transform: rotate(-45deg); }
.menu-modal nav { padding: 95px 20px 40px; text-align: center; }
.menu-modal ul { margin: 0; }
.menu-modal li { margin: 0 0 22px; }
.menu-modal a,
.menu-modal button.sub-toggle {
	display: inline-block;
	padding: 8px 0;
	border: 0;
	background: none;
	font: 700 22px/1.3 var(--body);
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transform: translateY(15px);
	transition: color .2s, transform .5s;
}
.menu-modal.is-open a, .menu-modal.is-open button.sub-toggle { transform: none; }
.menu-modal a:hover, .menu-modal button.sub-toggle:hover, .menu-modal a[aria-current="page"] { color: var(--text); }
.menu-modal .fa-caret-down { margin-left: 8px; transition: transform .2s; }
.menu-modal [aria-expanded="true"] .fa-caret-down { transform: rotate(180deg); }
.menu-modal .sub { display: none; margin-top: 6px; }
.menu-modal .sub.is-open { display: block; }
.menu-modal .sub li { margin: 0; }
.menu-modal .sub a { font-size: 17px; font-weight: 600; }
body.menu-open { overflow: hidden; }

/* ---------- Main content ---------- */
main { padding-top: 40px; }
.page-header h1 {
	margin: 0 0 40px;
	padding: 0 0 20px;
	background: url(../images/background-h3.png) 50% 100% no-repeat;
	font: 700 28px/32px var(--heading);
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
}
.article { max-width: 1020px; margin: 0 auto 40px; padding: 15px 15px 45px; text-align: center; }
.article-wide { max-width: 1140px; padding-bottom: 20px; }
.article h4 { margin: 5px 0 26px; font: 700 18px/22px var(--heading); text-transform: uppercase; }
.article h4 small { font-size: 14px; }
.article h5 { margin: 28px 0 26px; font: 700 14px/22px var(--heading); text-transform: uppercase; }
.article p span.kw { font-weight: 700; text-transform: uppercase; color: var(--ink); }
.article p strong.kw { color: var(--ink); }
.article ul { line-height: 22px; }
.article ul li { padding-bottom: 8px; font-weight: 700; }
.article ul.plain li { font-weight: 400; padding-bottom: 0; }
.article .lead-link { margin: 5px 0; font: 200 15.4px/22px var(--heading); }
.article .lead-link a:hover { color: var(--ink); }
.article .center-img { display: block; margin: 0 auto; }

/* Head trainer block (home) */
.trainer { display: flex; align-items: center; margin: 0 0 20px; text-align: left; }
.trainer > div { flex: 1 1 50%; }
.trainer .photo { text-align: center; }
.trainer img { display: inline-block; width: 273px; }
.trainer .quote { font-weight: 600; font-style: italic; color: #000; }
.trainer .quote span { font-weight: 400; font-style: normal; }
.trainer .creds { font-weight: 700; }

/* Maps */
.map { margin: 0 0 20px; }
.map iframe { display: block; width: 100%; height: 400px; border: 0; }

/* FAQ accordion (native details/summary) */
.faq { margin: 12.6px 0; text-align: left; }
.faq details { padding-bottom: 8px; }
.faq summary {
	padding: 5px 15px;
	font: 700 16px/22px var(--body);
	text-transform: uppercase;
	color: #000;
	cursor: pointer;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--text); }
.faq .panel { padding: 0 5px 0 30px; overflow: hidden; }  /* height animated by site.js */
.faq .panel::after { content: ""; display: block; height: 1px; } /* keep last margin inside the slide */
.faq .panel ul li { padding-bottom: 8px; }
.faq summary { transition: color .2s; }

/* Privacy policy */
.privacy { text-align: left; }
.privacy h3 { margin: 30px 0 16px; font: 200 28px/34px var(--heading); }
.privacy h4 { text-align: center; }
.privacy ul li { padding-bottom: 0; }

/* Contact */
.contact-email { margin: 30px 0 10px; font: 700 22px/1.4 var(--heading); letter-spacing: .5px; }
.contact-email a { color: #000; text-decoration: none; }
.contact-email a:hover { color: var(--text); }

/* ---------- Testimonials ---------- */
.testimonials {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 50px;
	background: url(../images/sep.png) 50% 0 no-repeat, url(../images/sep.png) 50% 100% no-repeat;
	text-align: center;
}
.testimonials h3 { margin: 0 0 10px; padding: 0 0 10px; font: 700 25px/29px var(--heading); text-transform: uppercase; }
.quotes { display: grid; }
.quotes blockquote {
	grid-area: 1 / 1; /* stack all quotes in one cell so the box fits the longest */
	margin: 0;
	padding: 0 10px;
	font-size: 13px;
	line-height: 18px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease-in, visibility .5s;
}
.quotes blockquote.is-active { opacity: 1; visibility: visible; }
.quotes blockquote p { margin: 0; }
.quotes footer { font-weight: 700; }

/* ---------- Footer ---------- */
.site-footer { padding: 20px 0 20px; text-align: center; }
.copyright { font-size: 14px; font-weight: 700; line-height: 18px; }
.copyright a { font-size: 11.9px; font-weight: 400; }

.back-to-top {
	position: fixed;
	right: 30px; bottom: 30px;
	width: 55px; height: 55px;
	background: #222 url(../images/back-to-top.png) 50% 50% no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s, background-color .2s;
	z-index: 50;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background-color: #000; }

/* ---------- Scroll reveal: fade in while moving down ---------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(-24px); }
.js-reveal [data-reveal].is-in {
	opacity: 1;
	transform: none;
	transition: opacity .66s ease-out, transform .66s ease-out;
	transition-delay: .15s;
}

@keyframes tada {
	0% { transform: scale3d(1, 1, 1); }
	10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
	30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
	40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
	100% { transform: scale3d(1, 1, 1); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.scroll-button { animation: none; }
	.js-reveal [data-reveal] { opacity: 1; transform: none; }
	.quotes blockquote { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.nav-top { display: none; }  /* menu button / overlay is used instead, as on the original */
}
@media (max-width: 719px) {
	.menu-button { left: 20px; }
	.social { right: 12px; }
	.social a { width: 36px; margin: 0 2px; font-size: 16px; }
	.sitename { font-size: 34px; line-height: 38px; letter-spacing: -1px; padding: 0 16px; }
	.sitename span { font-size: 22px; margin-top: 10px; }
	.page-header h1 { font-size: 24px; line-height: 30px; padding-left: 10px; padding-right: 10px; }
	.article { padding: 10px 16px 30px; }
	.trainer { flex-direction: column; text-align: center; }
	.trainer .photo { margin-bottom: 10px; }
	.map iframe { height: 300px; }
	.faq summary { padding: 6px 0; font-size: 15px; }
	.faq .panel { padding: 0 0 0 12px; }
	.testimonials { padding: 40px 20px; }
	.contact-email { font-size: 18px; }
	.back-to-top { right: 15px; bottom: 15px; width: 45px; height: 45px; }
}