/* ============================================================================
   design-fixes.css - the designer's homepage review, 2026-10-15
   ----------------------------------------------------------------------------
   Hand-written, and loaded after every other stylesheet. The screen and shared
   stylesheets are generated from the design exports and must keep saying what
   their export said, so the review's corrections live here instead of being
   lost on the next rebuild.

   Grouped by the review's own resolution bands (FF_HP_Ispravke.docx):
     1. every width        - the footer, the pricing list, the scrollbars
     2. 1920-1500          - min-width: 1501px
     3. 1500-1200          - 1201px to 1500px
     4. desktop            - min-width: 1201px, notes made at 1920 that hold
                             for the whole desktop layout
     5. 991-600            - the trainer grid
     6. 600-320            - max-width: 768px, the width the mobile layout
                             (burger, single column) starts at

   Homepage-only rules are scoped to `body.home #ffroot`; the header and the
   footer are the same on every page, so their rules are not.
   ============================================================================ */


/* ---------------------------------------------------------------- 1. every width */

/* The white strip under the footer. Underscores' style.css gives `.page` a
   1.5em bottom margin for the article element, and WordPress puts `page` on
   <body> of every Page as well. */
body.page {
	margin-bottom: 0;
}

/* Footer phone (a WhatsApp link) and the credit line's Digital Dot and Sitemap
   links: white, and the header menu's light blue on hover (shared.css
   .shared-a-3:hover). */
#colophon .shared-div-12--3 a,
#colophon .footbar a {
	color: #ffffff;
	text-decoration: none;
	transition: color .2s;
}

#colophon .shared-div-12--3 a:hover,
#colophon .footbar a:hover,
#colophon .shared-div-12--3 a:focus-visible,
#colophon .footbar a:focus-visible {
	color: #6BD1F4;
	text-decoration: none;
}

/* Footer "Also training clients in" chips. */
#colophon .shared-a-2 {
	font-size: 0.9rem;
	text-transform: uppercase;
}

/* Pricing feature rows. */
body.home #ffroot .plan-feat {
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Chrome ignores the ::-webkit-scrollbar styles once scrollbar-color or
   scrollbar-width is set, and both are inherited. Below 768px the results and
   problems tracks set them, so the testimonial text inherited them too, and
   phones fell back to the system overlay scrollbar - invisible, and with no
   cream track. Firefox has no ::-webkit-scrollbar and keeps the standard pair.
   The results track itself is left alone: reset, it grows a vertical bar. */
@supports selector(::-webkit-scrollbar) {
	[data-baq],
	[data-prob-track] {
		scrollbar-color: auto;
		scrollbar-width: auto;
	}
}


/* Trainer single: the play button over the hero video. inner.css takes the
   overlay's display from --u-playbtndisplay, a state variable of the export
   that nothing defines, so the overlay fell back to block and its centring did
   nothing - the button sat in the top-left corner. trainer-video.js toggles
   `hidden` while the video plays. */
body.single-trainers .video-overlay {
	display: flex;
}

body.single-trainers .video-overlay[hidden] {
	display: none;
}

/* Phone field, Contact form and lead forms: the Smart Phone Field plugin's
   intl-tel-input widget (flag, dial code, country search) replaces the theme's
   own flag-and-+971 box. Bootstrap floats every input left, which collapsed
   .iti to 0px and pushed the country button above the field; the label gap the
   other inputs take as margin-top goes on .iti instead. The plugin sets the
   input's padding-left itself to clear the button. */
#md-contact-hero .gfield .iti,
.ff-lead-form .gfield .iti {
	display: block;
	width: 100%;
	margin-top: 10px;
}

body #md-contact-hero .gfield .iti input.iti__tel-input,
body .ff-lead-form .gfield .iti input.iti__tel-input {
	float: none;
	width: 100%;
	margin-top: 0;
}

#md-contact-hero .iti__selected-country,
.ff-lead-form .iti__selected-country {
	padding: 0 6px 0 16px;
	border-radius: 6px 0 0 6px;
}

.ff-lead-form .iti__selected-country {
	padding-left: 14px;
}

#md-contact-hero .iti__selected-dial-code,
.ff-lead-form .iti__selected-dial-code {
	font-size: 1rem;
	color: #101010;
}

/* The dropdown's search box is a text input too, so it picked up the form's
   input styling and Bootstrap's float - which put the country list beside it
   at zero width. */
body #md-contact-hero .gfield .iti input.iti__search-input,
body .ff-lead-form .gfield .iti input.iti__search-input {
	float: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 14px;
	border: none;
	border-bottom: 1px solid #E0DACE;
	border-radius: 0;
	font-size: 0.9375rem;
	outline: none;
}

#md-contact-hero .iti__dropdown-content,
.ff-lead-form .iti__dropdown-content {
	z-index: 20;
	border: 1px solid #E0DACE;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* A trainer with no hero video: the photo takes the whole row instead of the
   video's narrow column, with an empty column beside it. */
body.single-trainers .hero-media--photo {
	grid-template-columns: 1fr;
}


/* ------------------------------------------------------------- 2. 1920 - 1500 */
@media (min-width: 1501px) {
	/* Smaller top/bottom so the benefits bar fits in the first screen. */
	body.home #ffroot .hero-copy {
		padding: 68px 64px 65px 120px;
	}
}


/* ------------------------------------------------------------- 3. 1500 - 1200 */
@media (min-width: 1201px) and (max-width: 1500px) {
	/* Header, every page. */
	#masthead.hdr {
		height: 75px;
	}

	#md-primary-nav .shared-a-3 {
		font-size: 0.78rem;
	}

	#masthead .phoneblk img {
		width: 40px;
		height: 40px;
	}

	/* Hero. */
	body.home #ffroot .hero-copy {
		padding: 56px 64px 47px 120px;
	}

	body.home #ffroot .hero-copy h1 {
		font-size: 4.1rem;
		max-width: 740px;
	}

	body.home #ffroot .hero-copy .el-p {
		margin-top: 23px;
		font-size: 1.2rem;
		line-height: 1.5;
	}

	body.home #ffroot .hero-cta {
		margin-top: 23px;
		font-size: 1rem;
		padding: 18px 30px;
	}

	body.home #ffroot .hero-copy .el-div-10 {
		margin-top: 23px;
	}

	/* Every h2 on the page - the export has no smaller size for this band. */
	body.home #ffroot h2 {
		font-size: 2.3rem;
		line-height: 1.5;
	}

	/* "Numbers our clients earned": 90px above and below. The space below is
	   the next section's top margin. */
	body.home #ffroot #md-results {
		padding-top: 90px;
	}

	body.home #ffroot #md-coverage {
		margin-top: 90px;
	}

	/* "Most fitness plans don't fail..." */
	body.home #ffroot #md-problems {
		padding: 100px 64px;
	}

	/* FAQ: 100px above and below. */
	body.home #ffroot #md-faq {
		padding-top: 100px;
	}

	body.home #ffroot #md-blog {
		margin-top: 100px;
	}
}


/* ----------------------------------------------------------------- 4. desktop */
@media (min-width: 1201px) {
	/* Problem cards, top half. */
	body.home #ffroot .prob-problem {
		padding: 28px 41px 30px;
	}

	/* Pricing: the first plan has one feature fewer and came out shorter than
	   the other two. Same height for all three, buttons on one line. */
	body.home #ffroot .price-grid {
		align-items: stretch;
	}

	body.home #ffroot .price-grid > div {
		display: flex;
		flex-direction: column;
	}

	body.home #ffroot .price-grid > div > .shared-div-9 {
		margin-top: auto;
	}
}


/* ---------------------------------------------------------------- 5. 991 - 600 */
@media (min-width: 601px) and (max-width: 991px) {
	body.home #ffroot .trainers-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Two per row, so the three cards phones hide come back: three would leave
	   one card alone on the second row. */
	body.home #ffroot .trainer-card[data-hide-mob="1"]:not([hidden]) {
		display: flex;
	}
}


/* ---------------------------------------------------------------- 6. 600 - 320 */
@media (max-width: 768px) {
	/* Burger: two equal lines (2.5px drew one 2px and one 3px on a 1x screen),
	   a little further apart. */
	.burger {
		gap: 8px;
	}

	.burger span {
		height: 2px;
	}

	/* Hero note under the button. */
	body.home #ffroot .hero-copy .el-div-10 {
		margin-top: 23px;
	}

	/* Benefits bar under the hero. */
	body.home #ffroot .herocell {
		gap: 16px;
		padding: 22px 20px 29px;
	}

	body.home #ffroot .herocell div {
		font-size: 1rem;
	}

	/* Results slider arrows sit right under the card. */
	body.home #ffroot .ba-arrows {
		padding-top: 0;
	}

	/* The track reported 18px of empty vertical overflow and drew a vertical
	   scrollbar beside the card; nothing sits in that space. */
	body.home #ffroot [data-ba-track] {
		overflow-y: hidden;
	}

	/* "Your goals." marquee: larger words, less space between them. */
	body.home #ffroot .marquee-lg {
		font-size: 3.6rem;
	}

	body.home #ffroot .marquee-lg > span {
		padding-right: 20px;
	}

	/* "See More Trainers" on a phone also opens the cards phones hide. */
	body.home #ffroot [data-team-open] .trainer-card[data-hide-mob="1"]:not([hidden]) {
		display: flex;
	}

	/* Section spacing, programmes -> pricing -> FAQ -> news -> footer. */
	body.home #ffroot #md-pricing {
		margin-top: 80px;
		padding-top: 80px;
		padding-bottom: 80px;
	}

	body.home #ffroot #md-faq {
		padding-top: 80px;
	}

	body.home #ffroot #md-blog {
		margin-top: 100px;
		padding-top: 90px;
		padding-bottom: 90px;
	}

	#colophon.el-footer {
		padding-top: 90px;
	}

	/* Footer chips: two per row, smaller and lower. */
	#colophon .el-div-42 {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	#colophon .shared-a-2 {
		width: auto;
		font-size: 0.75rem;
		padding: 12px 14px;
		gap: 8px;
		justify-content: space-between;
	}
}


/* ============================================================================
   Inner pages - the designer's review, 2026-10-15 (Izmene za FF unutrasnje.docx)
   Muscle Gain and Wellness stand for every programme page, Dubai for every
   location page. "Inner" is everything but the homepage, unless a rule says
   otherwise; the FAQ item padding and the footer marquee apply to the
   homepage too, as the review asks.
   ============================================================================ */

/* Programs dropdown: one column, not two. */
#ffroot .md-navdrop__panel--grid {
	grid-template-columns: max-content;
}

/* Trainer cards, every page and width: 14px button, 600 skills (as on the
   homepage). */
#ffroot .trainer-card .btn-blue {
	font-size: 0.875rem;
}

#ffroot .trainer-card .trainer-skill {
	font-weight: 600;
}

/* FAQ questions, every page including the homepage. */
#ffroot .faq .el-div-32 {
	padding: 20px 30px;
}

/* Location hero: title and lede to 470px, 20px above the button. */
body.page-template-page-location-php #ffroot .hero .hero-title,
body.page-template-page-location-php #ffroot .hero .hero-lede {
	max-width: 470px;
}

body.page-template-page-location-php #ffroot .hero .hero-cta {
	margin-top: 20px;
}

/* Results slider: the cards' top border was clipped by the scrolling track -
   the reveal animation leaves them 1px low, and the track scrolled 34px of
   empty space vertically. */
body:not(.home) #ffroot section.res [data-ba-track] {
	padding-top: 4px;
	overflow-y: hidden;
}

@media (min-width: 769px) {
	/* Results and FAQ: the page's own h2 size, 100px above and below. The space
	   below them is the next section's top margin. */
	body:not(.home) #ffroot section.res h2,
	body:not(.home) #ffroot #md-faq h2 {
		font-size: 2.375rem;
	}

	body:not(.home) #ffroot section.res {
		padding-top: 100px;
		padding-bottom: 100px;
	}

	body:not(.home) #ffroot #md-mg-started {
		margin-top: 0;
	}

	body:not(.home) #ffroot #md-faq {
		padding-top: 100px;
	}

	body:not(.home) #ffroot #md-faq + #md-prefooter {
		margin-top: 100px;
	}
}

@media (min-width: 1201px) {
	/* "Who is this programme for": the photo follows the text beside it. */
	body.page-template-page-muscle-gain-php #ffroot .mg-who-grid {
		align-items: stretch;
	}

	body.page-template-page-muscle-gain-php #ffroot .mg-who-img {
		height: auto;
	}

	body.page-template-page-muscle-gain-php #ffroot .mg-who-img img {
		height: 100%;
	}
}

@media (min-width: 1201px) and (max-width: 1500px) {
	body:not(.home) #ffroot .hero .hero-title {
		font-size: 3.5rem;
	}

	body.page-template-page-location-php #ffroot #md-loc-intro {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

@media (max-width: 768px) {
	/* Programme "What's included" photos. */
	body.page-template-page-muscle-gain-php #ffroot .mg-shared-div-17 {
		height: 330px;
	}

	body.page-template-page-muscle-gain-php #ffroot .mg-shared-div-17 img {
		height: 100%;
	}

	/* Our Trainers photo strip. */
	body.post-type-archive-trainers #ffroot #md-trainers-gallery {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	body.post-type-archive-trainers #ffroot .gallery-item,
	body.post-type-archive-trainers #ffroot .gallery-img {
		height: 216px;
	}

	/* Footer marquee, every page. */
	#colophon .marquee-sm {
		font-size: 3.625rem;
	}
}


/* ============================================================================
   Round of 2026-10-16: blog hero, post overlay, hero layout, breadcrumbs, menu,
   sticky header
   ============================================================================ */

/* Blog hero: the design drew a title only, so inner.css has no rules for the
   lede, note and button the page now carries. The Our Trainers hero's values. */
body.page-template-page-blog-php #ffroot .hero .hero-lede {
	font-size: 1.125rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.94);
	max-width: 460px;
	text-wrap: pretty;
	animation: fffadeup 1s var(--ff-ease) .32s both;
}

body.page-template-page-blog-php #ffroot .hero .hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-top: 40px;
	background: #4FBFEA;
	color: #ffffff;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 19px 30px;
	border-radius: 6px;
	animation: fffadeup 1s var(--ff-ease) .46s both;
}

body.page-template-page-blog-php #ffroot .hero .hero-cta:hover {
	background: #37B2E2;
	color: #ffffff;
}

body.page-template-page-blog-php #ffroot .hero .icon-24 {
	display: block;
	width: 24px;
	height: 24px;
}

body.page-template-page-blog-php #ffroot .hero .hero-note {
	margin-top: 34px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.7;
	color: #ffffff;
	text-transform: uppercase;
	animation: fffadeup 1s var(--ff-ease) .58s both;
}

/* Blog post hero: a 40% black veil over the photo, under the text. */
#md-post-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

/* Benefits bar: shown at once, not on the reveal animation - it sits right
   under the hero, and with WP Rocket delaying JS until the first interaction
   the four cells stayed invisible over a grey block until then. */
#md-benefits [data-anim] {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Every inner hero: 22px under the title. */
#ffroot section.hero:has(> .band-inner) .hero-lede {
	margin-top: 22px;
}

/* Breadcrumbs, every page. */
#ffroot .hero-crumbs,
#ffroot .hero-crumbs a,
#ffroot .hero-crumbs span {
	font-weight: 400;
	letter-spacing: 0.1rem;
}

/* Menu: every item 500. */
#ffroot #md-primary-nav,
#ffroot #md-primary-nav .shared-a-3,
#ffroot #md-primary-nav .md-navdrop__link {
	font-weight: 500;
}

@media (min-width: 992px) {
	#ffroot #md-primary-nav .md-navdrop__link {
		padding: 8px 24px;
	}
}

@media (min-width: 1201px) {
	/* The hero button, desktop and laptop. */
	#ffroot section.hero:has(> .band-inner) .hero-cta {
		margin-top: 24px;
	}

	/* Inner heroes are 700px tall here: the text block sits in the middle of
	   the space under the header, whatever the template's own padding was. */
	#ffroot section.hero:has(> .band-inner) {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	#ffroot section.hero:has(> .band-inner) > .band-inner {
		flex: 1;
		display: flex;
		align-items: center;
	}

	#ffroot section.hero:has(> .band-inner) .hero-copy {
		padding-top: 0;
		padding-bottom: 0;
	}
}

@media (max-width: 1200px) {
	/* Benefits bar in two columns: the dividers as real borders. The 1px gap
	   over a grey background disappeared on phones and under the cells while
	   they animated. */
	#ffroot #md-benefits.herobar {
		gap: 0;
		background: #FBF7F0;
	}

	#ffroot #md-benefits .herocell:nth-child(-n+2) {
		border-bottom: 1px solid #DDDDDD;
	}

	#ffroot #md-benefits .herocell:nth-child(even) {
		border-left: 1px solid #DDDDDD;
	}
}

/* Sticky header, every page - the designer's behaviour (FitForce Landing,
   handoff_fitforce_full). At the top of the page the header sits where the
   design draws it, over the hero, and scrolls away with it. Past 220px it gets
   `is-stuck` from header-sticky.js: it turns fixed, dark #0C1B20 with the
   WhatsApp block in #2C3E44, and slides down from above over 700ms. It stays
   until the page is back above 220px.

   The header is absolute rather than in the flow so that sticking it never
   moves the page: its parent keeps the header's height as padding either way.
   --ff-hdr-h is measured by header-sticky.js, the values here are its
   fallback. */
:root {
	--ff-hdr-h: 91px;
}

@media (min-width: 1201px) and (max-width: 1500px) {
	:root {
		--ff-hdr-h: 75px;
	}
}

@media (max-width: 768px) {
	:root {
		--ff-hdr-h: 64px;
	}
}

#ffroot section:has(> #masthead),
#ffroot #md-main:has(> #masthead) {
	position: relative;
	padding-top: var(--ff-hdr-h);
}

#ffroot #masthead.hdr {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

@keyframes ffhdrdown {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}

#ffroot #masthead.hdr.is-stuck {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	background: #0C1B20;
	border-bottom-color: transparent;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
	animation: ffhdrdown 700ms cubic-bezier(.22, 1, .36, 1) both;
}

#ffroot #masthead.hdr.is-stuck .phoneblk {
	background: #2C3E44;
}

@media (max-width: 600px) {
	/* The admin bar scrolls away on a phone; the header sticks to the top. */
	#ffroot #masthead.hdr.is-stuck {
		top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	#ffroot #masthead.hdr.is-stuck {
		animation: none;
	}
}


/* ============================================================================
   Lead forms - handoff_fitforce_full, FitForce Landing, 2026-10-16
   ----------------------------------------------------------------------------
   The two-step "Find the best trainer near you" card (section/ff-lead-form.php)
   in the homepage hero (#hero-form) and in the form section after the team
   (#cta-form-section). Values are the design's; the markup is Gravity's, so the
   selectors carry #ffroot to stay above Gravity's own gravity-theme rules and
   the page's generic h2 sizes. Breakpoints are the design's: 1440, 1200, 768.
   ============================================================================ */

/* ----------------------------------------------------------------- the card */
#ffroot .ff-lead-form {
	box-sizing: border-box;
	background: #ffffff;
	border-radius: 10px;
	padding: 26px 30px 34px;
	color: #101010;
	text-align: left;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

#ffroot .ff-lead-form .ff-lf-title {
	margin: 0;
	font-size: 28px;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #101010;
}

#ffroot .ff-lead-form .ff-lf-sub {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: #3A3A3A;
}

#ffroot .ff-lead-form .ff-lf-steps {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 18px;
}

#ffroot .ff-lead-form .ff-lf-steplabel {
	flex: none;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #101010;
}

#ffroot .ff-lead-form .ff-lf-bars {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

#ffroot .ff-lead-form .ff-lf-bars span {
	display: block;
	height: 3px;
	border-radius: 2px;
	background: #4FBFEA;
	transition: background 400ms cubic-bezier(.22, 1, .36, 1);
}

#ffroot .ff-lead-form[data-step="1"] .ff-lf-bars span + span {
	background: #DDDDDD;
}

#ffroot .ff-lead-form .ff-lf-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 24px;
}

#ffroot .ff-lead-form .ff-lf-note svg {
	display: block;
	flex: none;
	margin-top: 2px;
}

#ffroot .ff-lead-form .ff-lf-note p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #3A3A3A;
}

/* ------------------------------------------------------- Gravity's markup */
#ffroot .ff-lead-form .gform_wrapper {
	margin: 0;
}

#ffroot .ff-lead-form .gform_heading,
#ffroot .ff-lead-form .gfield_required,
#ffroot .ff-lead-form .ff-field-tracking,
#ffroot .ff-lead-form .gform_validation_errors {
	display: none;
}

#ffroot .ff-lead-form .gform_fields {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-top: 26px;
}

#ffroot .ff-lead-form .gfield {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

#ffroot .ff-lead-form .gfield_label {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 12px;
	padding: 0;
	font-size: 17px;
	line-height: 1.3;
	font-weight: 600;
	color: #101010;
}

#ffroot .ff-lead-form .gfield--type-radio .gfield_label {
	margin-bottom: 14px;
}

#ffroot .ff-lead-form .ff-optional {
	font-weight: 400;
	color: #3A3A3A;
}

#ffroot .ff-lead-form .ginput_container {
	margin: 0;
}

#ffroot .ff-lead-form input[type="text"],
#ffroot .ff-lead-form input[type="tel"],
#ffroot .ff-lead-form select {
	float: none;
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: 48px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid #DDDDDD;
	border-radius: 4px;
	background-color: #ffffff;
	font-family: inherit;
	font-size: 16px;
	line-height: normal;
	color: #101010;
	box-shadow: none;
	outline: none;
	transition: border-color 300ms cubic-bezier(.22, 1, .36, 1);
}

#ffroot .ff-lead-form input::placeholder {
	color: #8A8A8A;
	opacity: 1;
}

#ffroot .ff-lead-form input[type="text"]:focus,
#ffroot .ff-lead-form input[type="tel"]:focus,
#ffroot .ff-lead-form select:focus {
	border-color: #4FBFEA;
	outline: none;
	box-shadow: none;
}

/* The select draws its own chevron near the right edge, as the design does
   with a rotated border box. */
#ffroot .ff-lead-form select {
	padding-right: 44px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23101010' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 12px 8px;
}

#ffroot .ff-lead-form select:has(option[value=""]:checked) {
	color: #3A3A3A;
}

/* Radios: three in a row, a 16px ring with an 8px blue dot. */
#ffroot .ff-lead-form .gfield_radio {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 12px;
}

#ffroot .ff-lead-form .gchoice {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
}

#ffroot .ff-lead-form .gchoice input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

#ffroot .ff-lead-form .gchoice label {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	color: #101010;
	white-space: nowrap;
	cursor: pointer;
}

#ffroot .ff-lead-form .gchoice label::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid #BDBDBD;
	background: radial-gradient(circle, #4FBFEA 0 4px, transparent 4.5px) center / 0 0 no-repeat;
	transition: border-color 300ms cubic-bezier(.22, 1, .36, 1), background-size 300ms cubic-bezier(.22, 1, .36, 1);
}

#ffroot .ff-lead-form .gchoice input:checked + label::before {
	border-color: #4FBFEA;
	background-size: 100% 100%;
}

#ffroot .ff-lead-form .gchoice input:focus-visible + label::before {
	outline: 2px solid #4FBFEA;
	outline-offset: 2px;
}

/* Errors: the field says what is wrong under itself, the label stays black. */
#ffroot .ff-lead-form .gfield_error .gfield_label {
	color: #101010;
}

#ffroot .ff-lead-form .gfield_error input[type="text"],
#ffroot .ff-lead-form .gfield_error input[type="tel"],
#ffroot .ff-lead-form .gfield_error select {
	border-color: #D64545;
}

#ffroot .ff-lead-form .gfield_validation_message,
#ffroot .ff-lead-form .validation_message {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
	line-height: 1.4;
	color: #D64545;
}

/* Buttons: Next and Submit full width with the arrow; Back a text link under
   the submit button. */
#ffroot .ff-lead-form .gform_page_footer {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 26px 0 0;
	padding: 0;
	border: 0;
}

#ffroot .ff-lead-form .gform_next_button,
#ffroot .ff-lead-form .gform_button {
	order: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	height: 65px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 4px;
	background: #4FBFEA;
	color: #ffffff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 300ms cubic-bezier(.22, 1, .36, 1);
}

#ffroot .ff-lead-form .gform_next_button:hover,
#ffroot .ff-lead-form .gform_button:hover {
	background: #37B2E2;
}

#ffroot .ff-lead-form .gform_next_button img,
#ffroot .ff-lead-form .gform_button img {
	display: block;
	flex: none;
	width: 22px;
	height: 22px;
}

#ffroot .ff-lead-form .gform_previous_button {
	order: 2;
	align-self: center;
	width: auto;
	margin: 0;
	padding: 4px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.3;
	color: #3A3A3A;
	text-decoration: underline;
	text-transform: uppercase;
	cursor: pointer;
}

#ffroot .ff-lead-form .gform_previous_button:hover {
	color: #101010;
}

/* Gravity's ajax spinner, inside the button's right edge instead of beside it. */
#ffroot .ff-lead-form .gform_ajax_spinner {
	position: absolute;
	top: 22px;
	right: 18px;
	width: 20px;
	height: 20px;
	margin: 0;
}

/* --------------------------------------------------------------- the hero */
body.home #ffroot .hero-row {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	padding-right: 115px;
}

body.home #ffroot .hero-badge {
	display: block;
	width: 270px;
	height: 31px;
	margin-top: 40px;
	animation: fffadeup 1s cubic-bezier(.22, 1, .36, 1) .5s both;
}

body.home #ffroot .hero-form {
	flex: none;
	width: 460px;
	animation: fffadeup 1s cubic-bezier(.22, 1, .36, 1) .45s both;
}

/* -------------------------------------------------------- the form section */
#ffroot .ctaf {
	position: relative;
	overflow: hidden;
	background: #0E1A20;
}

#ffroot .ctaf .ctaf-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#ffroot .ctaf .ctaf-grid {
	position: relative;
	z-index: 1;
	width: 1170px;
	max-width: 100%;
	margin: 0 auto;
	padding: 90px 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 440px;
	gap: 80px;
	align-items: stretch;
}

#ffroot .ctaf .ctaf-copy {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 48px;
	color: #ffffff;
}

#ffroot .ctaf .ctaf-title {
	margin: 0;
	max-width: 524px;
	font-size: 38px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #ffffff;
	text-wrap: balance;
}

#ffroot .ctaf .ctaf-text {
	margin: 33px 0 0;
	max-width: 580px;
	font-size: 17px;
	line-height: 1.75;
	color: #ffffff;
	text-wrap: pretty;
}

#ffroot .ctaf .ctaf-logo {
	display: block;
	width: 204px;
	height: 43px;
	opacity: 0.55;
}

/* Desktop: the design keeps about 60px of photo above and below the card. The
   copy's own padding no longer sets the hero's height - the card is taller. */
@media (min-width: 1201px) {
	body.home #ffroot .hero-form {
		margin: 60px 0;
	}
}

/* ------------------------------------------------------------ 1201 - 1440 */
@media (min-width: 1201px) and (max-width: 1440px) {
	body.home #ffroot .hero-row {
		padding-right: 56px;
	}

	body.home #ffroot .hero-copy {
		padding-left: 80px;
		padding-right: 0;
	}
}

/* ------------------------------------------------------------------ 1200 */
@media (max-width: 1200px) {
	body.home #ffroot .hero-row {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-right: 0;
	}

	body.home #ffroot .hero-form {
		width: auto;
		max-width: 520px;
		margin: 0 32px 80px;
	}

	#ffroot .ctaf .ctaf-grid {
		width: auto;
		padding: 80px 32px;
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	#ffroot .ctaf .ctaf-form {
		max-width: 520px;
	}
}

/* ------------------------------------------------------------------- 768 */
@media (max-width: 768px) {
	/* The card, both places. */
	#ffroot .ff-lead-form .ff-lf-title {
		font-size: 27px;
		line-height: 1.1;
	}

	#ffroot .ff-lead-form .ff-lf-sub {
		font-size: 15px;
	}

	#ffroot .ff-lead-form .gform_fields {
		gap: 15px;
	}

	#ffroot .ff-lead-form .gfield_label {
		font-size: 16px;
	}

	#ffroot .ff-lead-form input[type="text"],
	#ffroot .ff-lead-form input[type="tel"],
	#ffroot .ff-lead-form select {
		height: 44px;
		font-size: 14px;
	}

	#ffroot .ff-lead-form .ff-lf-note p {
		font-size: 12px;
	}

	#ffroot .ff-lead-form .gform_next_button,
	#ffroot .ff-lead-form .gform_button {
		height: 56px;
	}

	#ffroot .ff-lead-form .gform_ajax_spinner {
		top: 18px;
	}

	/* Radios become stacked input-style boxes; the chosen one gets a blue
	   border. */
	#ffroot .ff-lead-form .gfield_radio {
		flex-direction: column;
		gap: 10px;
	}

	#ffroot .ff-lead-form .gchoice label {
		box-sizing: border-box;
		width: 100%;
		height: 44px;
		gap: 12px;
		padding: 0 18px;
		border: 1px solid #DDDDDD;
		border-radius: 4px;
		background-color: #ffffff;
		font-size: 16px;
		transition: border-color 300ms cubic-bezier(.22, 1, .36, 1);
	}

	#ffroot .ff-lead-form .gchoice input:checked + label {
		border-color: #4FBFEA;
	}

	/* Hero: the form leaves the photo for a cream band under the copy. */
	body.home #ffroot .hero-form {
		position: relative;
		z-index: 3;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 32px 20px;
		box-sizing: border-box;
		background: #FBF7F0;
		border-bottom: 1px solid #DDDDDD;
	}

	body.home #ffroot .hero-form .ff-lead-form {
		padding: 26px 20px 30px;
		box-shadow: none;
	}

	body.home #ffroot .hero-badge {
		width: 230px;
		height: auto;
		margin: 28px auto 0;
	}

	/* Form section. */
	#ffroot .ctaf .ctaf-grid {
		padding: 60px 20px;
		gap: 36px;
	}

	#ffroot .ctaf .ctaf-title {
		margin-left: auto;
		margin-right: auto;
		font-size: 28px;
		line-height: 1.25;
		text-align: center;
	}

	#ffroot .ctaf .ctaf-text {
		margin: 20px auto 0;
		font-size: 16px;
		text-align: center;
	}

	#ffroot .ctaf .ctaf-logo {
		display: none;
	}

	#ffroot .ctaf .ctaf-form {
		max-width: none;
		padding: 26px 20px 30px;
	}
}


/* ============================================================================
   Review round, 2026-10-16 (after the lead forms)
   ============================================================================ */

/* Homepage, laptops: 84px above "Training in Action". */
@media (min-width: 1201px) and (max-width: 1500px) {
	body.home #ffroot #md-clips {
		padding-top: 84px;
	}
}

/* Pricing cards, wherever the section is used: 15px buttons, 4px corners. */
#ffroot #md-pricing .shared-a-5 {
	font-size: 15px;
	border-radius: 4px;
}

/* Homepage results, phones: no scrollbar under the cards - the arrows do the
   job, and a thumb this short read as a stray dash. The testimonial's own
   vertical scrollbar ([data-baq]) is a different element and stays. */
@media (max-width: 768px) {
	#ffroot #md-results [data-ba-track] {
		scrollbar-width: none;
	}

	#ffroot #md-results [data-ba-track]::-webkit-scrollbar {
		display: none;
	}
}

/* Footer marquee: the gap after each phrase is one word space at every size.
   28px was a word space only at the desktop's 7rem; on a phone's smaller type
   it read as a double space after the slash. */
#colophon .el-div-11 .shared-span-10,
#colophon .el-div-11 .shared-span-11 {
	padding-right: 0.25em;
}

/* Location pages, "What's included": the intro and the closing paragraph run
   the full width of the card grid instead of stopping at 900px. */
#ffroot #md-loc-included .incl-lede,
#ffroot #md-loc-included .body-text {
	max-width: none;
}

/* ----------------------------------------------------------- button hovers */
/* Every blue and every dark button: the hover colour sweeps in from the left
   over 0.4s. One gradient twice the button's width - hover colour on the left
   half, base on the right - shows its right half at rest and slides to its
   left half on hover. Base colours stay what each design gave the button. */
#ffroot :is(.btn-blue, .hero-cta, .prefoot-cta, .cta-btn, .ff-lead-form .gform_next_button, .ff-lead-form .gform_button, #md-contact-hero .gform_button) {
	--ff-btn-base: #4FBFEA;
	--ff-btn-hover: #34AEDB;
}

#ffroot :is(.btn-blue, #md-contact-hero .gform_button) {
	--ff-btn-base: #6BD1F4;
}

/* Dark buttons: base #0C1B20 (was #0A0A0A). */
#ffroot :is(.el-a-7, .el-a-8, .team-more-btn) {
	--ff-btn-base: #0C1B20;
	--ff-btn-hover: #2B3A3F;
}

#ffroot :is(.btn-blue, .hero-cta, .prefoot-cta, .cta-btn, .ff-lead-form .gform_next_button, .ff-lead-form .gform_button, #md-contact-hero .gform_button, .el-a-7, .el-a-8, .team-more-btn),
#ffroot :is(.btn-blue, .hero-cta, .prefoot-cta, .cta-btn, .ff-lead-form .gform_next_button, .ff-lead-form .gform_button, #md-contact-hero .gform_button, .el-a-7, .el-a-8, .team-more-btn):is(:hover, :focus-visible) {
	background: linear-gradient(to right, var(--ff-btn-hover) 50%, var(--ff-btn-base) 50%) 100% 0 / 200% 100% no-repeat;
	transition: background-position 400ms cubic-bezier(.22, 1, .36, 1), color 300ms cubic-bezier(.22, 1, .36, 1);
}

#ffroot :is(.btn-blue, .hero-cta, .prefoot-cta, .cta-btn, .ff-lead-form .gform_next_button, .ff-lead-form .gform_button, #md-contact-hero .gform_button, .el-a-7, .el-a-8, .team-more-btn):is(:hover, :focus-visible) {
	background-position: 0 0;
}

/* Sticky header: the WhatsApp block is #31434A, and #21343B sweeps in on
   hover, the same way as the buttons. */
#ffroot #masthead.hdr.is-stuck .phoneblk {
	background: linear-gradient(to right, #21343B 50%, #31434A 50%) 100% 0 / 200% 100% no-repeat;
	transition: background-position 400ms cubic-bezier(.22, 1, .36, 1);
}

#ffroot #masthead.hdr.is-stuck .phoneblk:is(:hover, :focus-visible) {
	background-position: 0 0;
}

@media (prefers-reduced-motion: reduce) {
	#ffroot :is(.btn-blue, .hero-cta, .prefoot-cta, .cta-btn, .ff-lead-form .gform_next_button, .ff-lead-form .gform_button, #md-contact-hero .gform_button, .el-a-7, .el-a-8, .team-more-btn),
	#ffroot #masthead.hdr.is-stuck .phoneblk {
		transition: none;
	}
}


/* ============================================================================
   Inner heroes with the lead form - handoff_fitforce_full, About Us #hero
   ----------------------------------------------------------------------------
   section/sh-hero.php with `form` (About Us, Client Results, programmes,
   locations, default-template pages, 404): copy on the left, the 420px card on
   the right of the 1170px column, the reviews badge where the button was. The
   card is compacted on desktop to fit the 700px hero. Thank-you pages show
   the badge alone (`badge`). Scoped to .band-inner, so the homepage hero -
   which has no .band-inner - is untouched.
   ============================================================================ */

#ffroot section.hero:has(> .band-inner) .hero-badge {
	display: block;
	width: 270px;
	height: 31px;
	margin-top: 36px;
	animation: fffadeup 1s cubic-bezier(.22, 1, .36, 1) .46s both;
}

#ffroot .band-inner.has-form .hero-form {
	animation: fffadeup 1s cubic-bezier(.22, 1, .36, 1) .4s both;
}

@media (min-width: 1201px) {
	#ffroot section.hero > .band-inner.has-form {
		justify-content: space-between;
		gap: 60px;
	}

	#ffroot .band-inner.has-form .hero-copy {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 640px;
	}

	#ffroot .band-inner.has-form .hero-form {
		flex: none;
		width: 420px;
	}

	/* The card, compacted. */
	#ffroot .band-inner.has-form .ff-lead-form {
		padding: 22px 30px 24px;
	}

	#ffroot .band-inner.has-form .ff-lead-form .ff-lf-title {
		font-size: 24px;
	}

	#ffroot .band-inner.has-form .ff-lead-form .ff-lf-sub {
		margin-top: 6px;
		font-size: 14px;
	}

	#ffroot .band-inner.has-form .ff-lead-form .ff-lf-steps {
		margin-top: 14px;
	}

	#ffroot .band-inner.has-form .ff-lead-form .gform_fields {
		gap: 16px;
		margin-top: 20px;
	}

	#ffroot .band-inner.has-form .ff-lead-form .gfield_label {
		margin-bottom: 10px;
		font-size: 16px;
	}

	#ffroot .band-inner.has-form .ff-lead-form input[type="text"],
	#ffroot .band-inner.has-form .ff-lead-form input[type="tel"],
	#ffroot .band-inner.has-form .ff-lead-form select {
		height: 46px;
	}

	#ffroot .band-inner.has-form .ff-lead-form .gform_page_footer {
		margin-top: 20px;
	}

	#ffroot .band-inner.has-form .ff-lead-form .gform_next_button,
	#ffroot .band-inner.has-form .ff-lead-form .gform_button {
		height: 56px;
	}

	#ffroot .band-inner.has-form .ff-lead-form .gform_ajax_spinner {
		top: 18px;
	}

	#ffroot .band-inner.has-form .ff-lead-form .ff-lf-note {
		margin-top: 16px;
	}

	#ffroot .band-inner.has-form .ff-lead-form .ff-lf-note p {
		font-size: 13px;
	}
}

@media (max-width: 1200px) {
	#ffroot .band-inner.has-form .hero-form {
		width: auto;
		max-width: 520px;
		margin: 0 0 60px;
	}
}

@media (max-width: 768px) {
	#ffroot section.hero:has(> .band-inner) .hero-badge {
		width: 230px;
		height: auto;
		margin: 28px auto 0;
	}

	/* The form leaves the photo for a cream band under the copy, edge to edge. */
	#ffroot .band-inner.has-form .hero-form {
		position: relative;
		z-index: 3;
		max-width: none;
		margin: 0 -20px;
		padding: 32px 20px;
		background: #FBF7F0;
		border-bottom: 1px solid #DDDDDD;
	}

	#ffroot .band-inner.has-form .ff-lead-form {
		padding: 26px 20px 30px;
		box-shadow: none;
	}
}

/* Thank-you pages: the message set larger than other pages' copy. */
body.ff-thank-you #md-page-content .pg-content p {
	font-size: 1.375rem;
	line-height: 1.6;
}

@media (max-width: 768px) {
	body.ff-thank-you #md-page-content .pg-content p {
		font-size: 1.25rem;
	}
}

/* ------------------------------------------------------------------ Content wave 1 */

/* About: four people instead of two founders - four columns, two on a tablet,
   one on a phone; the card padding shrinks to fit a quarter of 1170px. */
#ffroot .founders-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
#ffroot .founders-grid .ab-shared-div-10 {
	padding: 28px 22px 30px;
	text-align: left;
}
#ffroot .founders-grid .ab-shared-div-14 {
	margin-top: 20px;
}
#ffroot .founder-bio {
	margin: 14px 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #3A3A3A;
}
#ffroot .founder-linkedin {
	display: inline-block;
	margin-top: 14px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #0F9ED8;
	text-decoration: underline;
}
@media (max-width: 1024px) {
	#ffroot .founders-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	#ffroot .founders-grid {
		grid-template-columns: 1fr;
	}
}

/* Area chips that link to an area page. */
#ffroot a.area-chip-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Byline under the hero. */
#ffroot .ff-byline {
	margin: 28px auto 0;
	padding: 0 15px;
}
#ffroot .ff-byline-text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #3A3A3A;
}
#ffroot .ff-byline-name {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
#ffroot .ff-byline-sep {
	margin: 0 6px;
	color: #9A9A9A;
}

/* Data table section. */
#ffroot .ff-table-band {
	margin: 80px auto 0;
	padding: 0 15px;
}
#ffroot .ff-table-intro,
#ffroot .ff-table-note {
	max-width: 760px;
	margin: 18px 0 0;
	font-size: 1rem;
	line-height: 1.7;
	color: #3A3A3A;
}
#ffroot .ff-table-scroll {
	margin-top: 32px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 12px;
	border: 1px solid #E6E0D4;
}
#ffroot .ff-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.55;
	background: #FFFFFF;
}
#ffroot .ff-table th,
#ffroot .ff-table td {
	padding: 14px 18px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #E6E0D4;
}
#ffroot .ff-table thead th {
	background: #F9F5ED;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 700;
}
#ffroot .ff-table tbody th {
	font-weight: 600;
}
#ffroot .ff-table tr:last-child th,
#ffroot .ff-table tr:last-child td {
	border-bottom: 0;
}
#ffroot .ff-table a {
	color: #0F9ED8;
	text-decoration: underline;
}
@media (max-width: 768px) {
	#ffroot .ff-table-band {
		margin-top: 56px;
	}
}

/* About: numbers strip under the intro. */
#ffroot .ab-stats {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}
#ffroot .ab-stat {
	background: #F9F5ED;
	border-radius: 12px;
	padding: 22px 20px;
}
#ffroot .ab-stat-value {
	display: block;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
}
#ffroot .ab-stat-label {
	display: block;
	margin-top: 6px;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: #3A3A3A;
}
#ffroot a.founder-name-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
}
@media (max-width: 1024px) {
	#ffroot .ab-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	#ffroot .ab-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
#ffroot .ff-table-note a,
#ffroot .ff-table-intro a {
	color: #0F9ED8;
	text-decoration: underline;
}

/* Client results: goal filter and the facts line on each card. */
#ffroot .cr-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 28px 0 8px;
}
#ffroot .cr-filter-link {
	padding: 8px 16px;
	border: 1px solid #E6E0D4;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}
#ffroot .cr-filter-link.is-active {
	background: #0F9ED8;
	border-color: #0F9ED8;
	color: #FFFFFF;
}
#ffroot .cr-meta {
	margin: 8px 0 0;
	font-size: 0.9375rem;
	color: #3A3A3A;
}
#ffroot .cr-meta a {
	color: #0F9ED8;
	text-decoration: underline;
}

/* Contact: details under the lede and the block under the form. */
#ffroot .ct-details {
	margin: 18px 0 24px;
	font-size: 1rem;
	line-height: 1.7;
}
#ffroot .ct-details p {
	margin: 0 0 8px;
}
#ffroot .ct-details a,
#ffroot .ct-more a {
	color: #0F9ED8;
	font-weight: 600;
	text-decoration: underline;
}
#ffroot .ct-more {
	margin: 72px auto 0;
	padding: 0 15px 24px;
	font-size: 1rem;
	line-height: 1.7;
	color: #3A3A3A;
}
#ffroot .ct-more h2 {
	margin: 40px 0 16px;
	font-size: 1.75rem;
	line-height: 1.2;
	color: #111111;
}
#ffroot .ct-more h2:first-child {
	margin-top: 0;
}
#ffroot .ct-more ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 1024px) {
	#ffroot .ct-more ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Trainer hero: languages (ff_tn_languages, first filled for Iva in talas 4) get a
   line of their own under the CTA and the free-session note, instead of a third
   column that squeezed both notes to a word per line. */
body.single-trainers #ffroot .hero-cta-row {
	flex-wrap: wrap;
	row-gap: 16px;
}
body.single-trainers #ffroot .hero-langs {
	flex-basis: 100%;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* About: the sales team under the leadership block (client, 22. 10. 2026). The
   grid and cards are the founders' own; only the section's spacing is new. */
#ffroot .ab-sales {
	padding-top: 0;
	padding-bottom: 110px;
}
#ffroot .ab-sales .ab-sales-title {
	margin-top: 0;
}
#ffroot .ab-sales .ab-sales-intro {
	max-width: 720px;
	margin: 16px 0 0;
	text-wrap: pretty;
}
@media (max-width: 1199px) {
	#ffroot .ab-sales {
		padding-bottom: 80px;
	}
}

/* Locations › Dubai lists all 21 areas (client, 22. 10. 2026); on a short laptop
   screen the flyout would run past the bottom of the fixed header's viewport. */
@media (min-width: 992px) {
	#ffroot .md-subdrop__panel {
		max-height: calc(100vh - 110px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}