/* ============================================================================
   UX fixes - responsive, hero and CTA audit (19 Oct 2026)
   ----------------------------------------------------------------------------
   Item numbers (P0-1, ...) refer to .claude/RESPONSIVE-HERO-CTA-popravke.md in
   the project root. Loaded last, after design-fixes.css and authors.css, so it
   overrides them without editing either: other work adds to those files.

   `:where(#ffroot *)` is content-box (general.css), so any block here with a
   width and padding sets box-sizing:border-box itself.
   ========================================================================= */


/* ------------------------------------------------- P0-1 mobile menu panel */
/* The sticky header slides in with `ffhdrdown ... both`. Fill-mode `both`
   leaves `transform: translateY(0)` on #masthead after the animation, and a
   transformed element is the containing block for position:fixed children -
   so the open panel's `bottom:0` resolved to the header's bottom edge and the
   panel collapsed to ~43px. `backwards` drops the transform once the slide-in
   ends. While the menu is open the animation is cut entirely, so the panel is
   right even inside the 700ms slide. */
#ffroot #masthead.hdr.is-stuck {
	animation-fill-mode: backwards;
}

#ffroot #masthead.hdr[data-nav-open="true"] {
	animation: none;
	transform: none;
}

body.nav-open {
	overflow: hidden;
}


/* ------------------------------------------ P0-4 About: founder cards fit */
/* `1fr` is minmax(auto, 1fr): the column could not shrink below the card's
   min-content (a 370px photo block + content-box padding = 414px). */
@media (max-width: 640px) {
	#ffroot .founders-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

#ffroot .founders-grid .ab-shared-div-10 {
	box-sizing: border-box;
	width: auto;
	min-width: 0;
}

#ffroot .founders-grid .ab-shared-div-11 {
	width: 100%;
}

#ffroot .founders-grid .ab-shared-img-4 {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}


/* ------------------------------------------------ P0-6 pager on phones */
/* Prev + up to five numbers + next is seven 50px circles with 6px gaps
   (386px) in a 350px column. At 40px with 4px gaps it is 304px; wrap is the
   fallback if a longer row ever appears. */
@media (max-width: 480px) {
	#ffroot .cr-pager {
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px;
	}

	#ffroot .cr-pager :is(a, span, button) {
		width: 40px;
		height: 40px;
	}
}


/* ------------------------------------------- P0-7 blue button contrast */
/* White on #4FBFEA is ~2.1:1 and on #6BD1F4 ~1.7:1. The blue stays; the
   label goes dark (#0C1B20: ~8.3:1 on #4FBFEA, ~7:1 on the #34AEDB hover).
   The arrow is a white SVG <img>, so a filter turns it the same dark. */
#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),
#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):is(:hover, :focus-visible) {
	color: #0C1B20;
	font-weight: 600;
}

#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) img[src*="icon-arrow-cta"] {
	filter: brightness(0);
	opacity: 0.92;
}


/* ----------------------------------- P0-5 About: comparison on a phone */
/* section/ab-how-it-works.php gives every cell its column (cmp-col--*) and
   row (--r). On a phone the FitForce column moves next to the sticky labels,
   so the point of the table is visible before any scrolling; the other two
   options scroll in behind. */
#ffroot .cmp-hint {
	display: none;
}

@media (max-width: 640px) {
	#ffroot .cmp-hint {
		display: block;
		margin: 32px 0 -28px;
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-align: right;
		color: #6E675C;
	}

	#ffroot .cmp-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	#ffroot .cmp-table > .ab-el-div-27 {
		grid-template-columns: 112px 168px 168px 168px;
		min-width: 0;
		width: max-content;
	}

	#ffroot .cmp-table .cmp-cell {
		box-sizing: border-box;
		grid-row: var(--r);
		min-width: 0;
		padding: 14px 12px;
		font-size: 0.875rem;
		line-height: 1.45;
	}

	#ffroot .cmp-table .cmp-col--label {
		grid-column: 1;
		position: sticky;
		left: 0;
		z-index: 1;
		background: #F7F2EA;
		box-shadow: 6px 0 10px -6px rgba(12, 27, 32, 0.25);
	}

	#ffroot .cmp-table .ab-el-div-12.cmp-col--label {
		background: #F7F2EA;
	}

	#ffroot .cmp-table .cmp-col--ff {
		grid-column: 2;
		border-left: 0;
		background: #EAF7FC;
		color: #0C1B20;
	}

	#ffroot .cmp-table .cmp-col--gym {
		grid-column: 3;
	}

	#ffroot .cmp-table .cmp-col--freelance {
		grid-column: 4;
	}
}


/* ------------------------------------------- P0-8 reveal without script */
/* shared.css hides every [data-anim] until custom.js adds .in. header.php now
   puts .js on <html> before any CSS, so without script (or while WP Rocket
   delays it) nothing is hidden. The first screen - the heroes and the
   benefits bar - never waits for the reveal at all. */
html:not(.js) [data-anim],
:is(#md-hero, #ffroot section.hero, #md-benefits) [data-anim] {
	opacity: 1;
	transform: none;
	transition: none;
}

html:not(.js) [data-photo] img {
	transform: none;
	transition: none;
}


/* ============================================================================
   P0-2 / P0-3 - hero, header and CTA as on training.fitforce.ae v4
   (ppc_dd_theme/assets/css/ppc-v4.css). Markup: section/hp-hero.php,
   section/sh-hero.php, inc/ux-hero.php, footer.php.
   ========================================================================= */

/* ------------------------------------------------------- H9 button base */
#ffroot .ff-btn,
.ff-sticky .ff-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 22px;
	border: 0;
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 300ms cubic-bezier(.22, 1, .36, 1), border-color 300ms cubic-bezier(.22, 1, .36, 1);
}

#ffroot .ff-btn .ff-ic,
.ff-sticky .ff-btn .ff-ic {
	flex: none;
	width: 22px;
	height: 22px;
}

#ffroot .ff-btn:focus-visible,
.ff-sticky .ff-btn:focus-visible {
	outline: 3px solid #3BB9E4;
	outline-offset: 2px;
}

/* Primary: dark label on the blue (P0-7). */
#ffroot .ff-btn--primary,
#ffroot .ff-btn--primary:is(:hover, :focus-visible) {
	background: #4FBFEA;
	color: #0C1B20;
}

#ffroot .ff-btn--primary:hover {
	background: #34AEDB;
}

/* Ghost, on the dark hero: the WhatsApp mark in a green disc. */
#ffroot .ff-btn--ghost,
#ffroot .ff-btn--ghost:is(:hover, :focus-visible) {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: #ffffff;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

#ffroot .ff-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.2);
}

#ffroot .ff-btn--ghost .ff-ic {
	width: 28px;
	height: 28px;
	padding: 5px;
	box-sizing: border-box;
	border-radius: 50%;
	background: #25D366;
	color: #0C1B20;
}

/* Sticky bar buttons. WhatsApp green keeps a dark label: white on #25D366 is
   ~2:1. */
.ff-sticky .ff-btn--call,
.ff-sticky .ff-btn--call:is(:hover, :focus-visible) {
	background: #0C1B20;
	color: #ffffff;
}

.ff-sticky .ff-btn--wa,
.ff-sticky .ff-btn--wa:is(:hover, :focus-visible) {
	background: #25D366;
	color: #0C1B20;
}

.ff-sticky .ff-btn--wa:hover {
	background: #1EBE5A;
}


/* ------------------------------------------------- H6 CTA row, fine, proof */
#ffroot .ff-hero .ff-eyebrow {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
	text-shadow: 0 1px 8px rgba(13, 31, 38, 0.6);
}

#ffroot .ff-hero .ff-eyebrow .ff-ic {
	flex: none;
	width: 18px;
	height: 18px;
	color: #6BD1F4;
}

#ffroot .ff-hero .ff-eyebrow a {
	color: inherit;
}

#ffroot .ff-hero .ff-eyebrow .hero-crumb-current {
	color: #ffffff;
}

/* Three steps or more: the trail stops at the parent - the current page is
   the H1 right under it, and the full trail ran past the copy column. */
#ffroot .ff-hero .ff-eyebrow-trail > .hero-crumb-current:not(:nth-child(3)),
#ffroot .ff-hero .ff-eyebrow-trail > .hero-crumb-sep:has(+ .hero-crumb-current:not(:nth-child(3))) {
	display: none;
}

#ffroot .ff-hero .ff-cta-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

#ffroot .ff-hero .ff-fine {
	margin: 14px 0 0;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

#ffroot .ff-hero .ff-proof {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.94);
}

#ffroot .ff-hero .ff-proof-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
}

#ffroot .ff-hero .ff-proof .ff-ic {
	width: 16px;
	height: 16px;
	color: #6BD1F4;
}

#ffroot .ff-hero .ff-stars {
	display: inline-flex;
	gap: 1px;
}

#ffroot .ff-hero .ff-stars .ff-ic {
	width: 14px;
	height: 14px;
	color: #F5B301;
}


/* --------------------------------------------- H2 overlay, H3 focal point */
#ffroot section.ff-hero {
	--focus-d: 62% 30%;
	--focus-m: 50% 22%;
	height: auto;
	background: #0D1F26;
}

#ffroot section.ff-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(13, 31, 38, 0.82) 0%, rgba(13, 31, 38, 0.62) 42%, rgba(13, 31, 38, 0.2) 100%);
}

#ffroot section.ff-hero > img,
#ffroot section.ff-hero > picture > img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus-d);
}

/* The article's 40% black veil gives way to the gradient. */
#md-post-hero.ff-hero::before {
	display: none;
}

#ffroot section.ff-hero :is(.hero-copy, .ff-hero-panel) {
	position: relative;
	z-index: 2;
}


/* -------------------------------------------------- H5 hero typography */
#ffroot .ff-hero :is(h1.hero-title, h1.el-h1) {
	margin: 12px 0 0;
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: #ffffff;
	text-wrap: balance;
}

#ffroot .ff-hero :is(.hero-lede, .hero-copy .el-p) {
	margin: 16px 0 0;
	color: rgba(255, 255, 255, 0.9);
	text-wrap: pretty;
}

#ffroot .ff-hero :is(.hero-lede, .hero-copy .el-p) strong {
	font-weight: 600;
	color: #ffffff;
}

/* The design centred the copy on phones; the v4 pages keep it left. */
#ffroot .ff-hero .hero-copy {
	text-align: left;
}


/* ------------------------------------------------------- desktop >= 900 */
@media (min-width: 900px) {
	#ffroot section.ff-hero {
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
		min-height: 720px;
		padding: 112px 0 72px;
	}

	/* Copy left, the form card on the right of the same 1170px row. */
	#ffroot section.ff-hero.ff-hero > :is(.band-inner, .hero-row) {
		box-sizing: border-box;
		display: flex;
		flex: none;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 60px;
		width: calc(100% - 40px);
		max-width: 1170px;
		margin: 0 auto;
		padding: 32px 0 0;
		text-align: left;
	}

	#ffroot section.ff-hero.ff-hero .hero-copy {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 620px;
		margin: 0;
		padding: 0;
	}

	#ffroot section.ff-hero.ff-hero .hero-form {
		flex: none;
		width: 400px;
		max-width: none;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
	}

	#ffroot .ff-hero :is(h1.hero-title, h1.el-h1) {
		max-width: 12ch;
		font-size: clamp(44px, 4.4vw, 66px);
	}

	#ffroot .ff-hero :is(h1.hero-title, h1.el-h1).long {
		max-width: 16ch;
		font-size: clamp(40px, 3.6vw, 54px);
	}

	#ffroot .ff-hero :is(.hero-lede, .hero-copy .el-p) {
		max-width: 46ch;
		font-size: 18px;
		line-height: 1.6;
	}

	#ffroot .ff-hero .ff-cta-row {
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 28px;
	}

	#ffroot .ff-hero .ff-cta-row .ff-btn {
		min-width: 230px;
	}

	/* Compact: blog, archives, articles, legal pages. */
	#ffroot section.ff-hero--compact {
		min-height: 420px;
		padding: 132px 0 56px;
	}

	#ffroot section.ff-hero--compact :is(h1.hero-title) {
		max-width: 22ch;
		font-size: clamp(38px, 3.4vw, 52px);
	}
}

@media (min-width: 1200px) {
	#ffroot section.ff-hero:not(.ff-hero--compact) {
		min-height: 760px;
	}
}


/* ------------------------------------------- phones and tablets < 900 */
/* The photo covers the copy only: the section becomes a one-column grid,
   the photo, the overlay and the copy share row 1, and the form is row 2 on a
   cream band. The wrappers step aside (display:contents) so their children
   are the grid items. */
@media (max-width: 899px) {
	#ffroot section.ff-hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		padding: 0;
	}

	#ffroot section.ff-hero > picture,
	#ffroot section.ff-hero.ff-hero > :is(.band-inner, .hero-row) {
		display: contents;
	}

	/* Absolutely positioned in grid area 1/1: the photo fills the copy's row
	   without its own height (2000px tall files) setting the row. */
	#ffroot section.ff-hero > img,
	#ffroot section.ff-hero > picture > img {
		position: absolute;
		inset: 0;
		grid-area: 1 / 1 / 2 / 2;
		height: 100%;
		object-position: var(--focus-m);
	}

	/* md_ux_hero_pictures(): the phone photo shows, the desktop one (a 1x1
	   data: GIF at this width) is hidden. */
	#ffroot section.ff-hero > picture > img.ff-hero-img--d {
		display: none;
	}

	#ffroot section.ff-hero > picture > img.ff-hero-img--m {
		display: block;
	}

	#ffroot section.ff-hero::after {
		grid-area: 1 / 1 / 2 / 2;
		background: linear-gradient(180deg, rgba(13, 31, 38, 0.08) 0%, rgba(13, 31, 38, 0.12) 28%, rgba(13, 31, 38, 0.62) 48%, rgba(13, 31, 38, 0.9) 68%, rgba(13, 31, 38, 0.97) 100%);
	}

	/* Copy anchored to the bottom of the photo. */
	#ffroot section.ff-hero.ff-hero .hero-copy {
		grid-area: 1 / 1 / 2 / 2;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		width: auto;
		max-width: none;
		min-height: 560px;
		margin: 0;
		padding: clamp(160px, calc(100svh - 640px), 320px) 20px 22px;
	}

	#ffroot section.ff-hero .ff-hero-panel {
		margin-inline: -4px;
		padding: 14px 14px 12px;
		border-radius: 12px;
		background: linear-gradient(180deg, rgba(13, 31, 38, 0.4) 0%, rgba(13, 31, 38, 0.3) 100%);
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
	}

	#ffroot .ff-hero :is(.ff-eyebrow, h1.hero-title, h1.el-h1, .hero-lede, .hero-copy .el-p, .ff-fine, .ff-proof, .hero-social) {
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.45);
	}

	/* On a phone the eyebrow drops "Home /": the page and its parent are the
	   context. */
	#ffroot .ff-hero .ff-eyebrow-trail > :is(:first-child, .hero-crumb-sep:nth-child(2)) {
		display: none;
	}

	#ffroot .ff-hero :is(h1.hero-title, h1.el-h1) {
		max-width: none;
		margin-top: 8px;
		font-size: clamp(28px, 8vw, 38px);
	}

	#ffroot .ff-hero :is(h1.hero-title, h1.el-h1).long {
		font-size: clamp(25px, 6.9vw, 32px);
	}

	/* The design's lines are separate spans with <br>s; on a phone they run on
	   as one balanced paragraph. */
	#ffroot .ff-hero h1.hero-title br {
		display: none;
	}

	#ffroot .ff-hero h1 :is(.hero-line, .shared-span-4) {
		display: inline;
	}

	#ffroot .ff-hero h1 :is(.hero-line, .shared-span-4)::after {
		content: " ";
	}

	#ffroot .ff-hero :is(.hero-lede, .hero-copy .el-p) {
		max-width: none;
		margin: 10px 0 0;
		font-size: 15px;
		line-height: 1.55;
	}

	#ffroot .ff-hero .ff-cta-row {
		margin-top: 14px;
	}

	#ffroot .ff-hero .ff-cta-row .ff-btn {
		width: 100%;
	}

	#ffroot .ff-hero .hero-social {
		justify-content: flex-start;
		margin-top: 14px;
	}

	/* The form: its own cream band under the photo. */
	#ffroot section.ff-hero.ff-hero .hero-form {
		grid-row: 2;
		box-sizing: border-box;
		position: relative;
		z-index: 3;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 28px 20px 32px;
		background: #F7F2EA;
		border-bottom: 1px solid #E6E3DC;
		animation: none;
	}

	#ffroot section.ff-hero.ff-hero .hero-form .ff-lead-form {
		box-sizing: border-box;
		max-width: 520px;
		margin: 0 auto;
	}

	/* Compact heroes: shorter photo band. (.ff-hero.ff-hero matches the
	   specificity of the phone .hero-copy rule above, which had won.) */
	#ffroot section.ff-hero.ff-hero--compact .hero-copy {
		min-height: 360px;
		padding-top: 120px;
	}

	/* No photo at all (articles): just the title band under the header. */
	#ffroot section.ff-hero.ff-hero--nophoto .hero-copy {
		min-height: 0;
		padding-top: 28px;
	}

	#ffroot section.ff-hero.ff-hero--nophoto .ff-hero-panel {
		padding: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}


/* --------------------------------------------- H7 header: WhatsApp pill */
@media (max-width: 991px) {
	#ffroot .hdr .phoneblk {
		display: inline-flex;
		align-items: center;
		order: 2;
		gap: 8px;
		height: 32px;
		max-height: 32px;
		margin-left: auto;
		padding: 0;
		background: none;
		color: #ffffff;
		text-decoration: none;
	}

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

	#ffroot .hdr .phoneblk img {
		width: 32px;
		height: 32px;
	}

	#ffroot .hdr .phoneblk .el-div-38 {
		display: block;
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
		white-space: nowrap;
	}

	#ffroot .hdr .phoneblk .md-phone-label {
		display: none;
	}

	#ffroot .hdr .burger {
		order: 3;
	}
}

@media (max-width: 374px) {
	/* 360px phones and smaller: the number does not fit beside the logo and
	   the burger, the icon does. */
	#ffroot .hdr .phoneblk .el-div-38 {
		display: none;
	}
}


/* ------------------------------------------------ H8 sticky contact bar */
.ff-sticky {
	display: none;
}

@media (max-width: 899px) {
	.ff-sticky {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 8px 20px calc(8px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, 0.96);
		border-top: 1px solid #E6E3DC;
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	.ff-sticky .ff-btn {
		min-height: 48px;
		padding: 0 10px;
		font-size: 13px;
	}

	body {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}

	/* Out of the way while the menu is open and while a form field has focus
	   (the keyboard is up and the form's own button is what matters). */
	body.nav-open .ff-sticky,
	body:has(input:focus, select:focus, textarea:focus) .ff-sticky {
		display: none;
	}
}


/* ------------------------------------------- H3 focal point, per page */
/* Defaults are on #ffroot section.ff-hero (62% 30% / 50% 22%). Overrides by
   page until the ACF hero_focus_* fields exist. eFoil (page 2445): the rider
   sits between the copy and the form. */
body.page-id-2445 #ffroot section.ff-hero {
	--focus-d: 30% 50%;
}

/* The hero button's #hero-form jump lands below the fixed header. */
#ffroot :is(#hero-form, #cta-form-section) {
	scroll-margin-top: 80px;
}

/* Tablets in portrait: the two hero buttons side by side. */
@media (min-width: 600px) and (max-width: 899px) {
	#ffroot .ff-hero .ff-cta-row {
		flex-direction: row;
	}

	#ffroot .ff-hero .ff-cta-row .ff-btn {
		flex: 1 1 0;
		width: auto;
	}
}


/* ============================================================================
   P1 package 1: S1-S4, S6-S8, T1, T2, I3, H7 (992-1199), O1
   ========================================================================= */

/* ------------------------------------------- S1 data table in the column */
/* .w1170 does not cap this band (the harvested rule is per template), so the
   table ran edge to edge and its H2 started 15px from the edge. */
#ffroot .ff-table-band {
	box-sizing: border-box;
	width: calc(100% - 40px);
	max-width: 1170px;
	margin: 80px auto 0;
	padding: 0;
}

#ffroot .ff-table-band .ff-table-title {
	margin: 0;
}

@media (min-width: 769px) {
	#ffroot .ff-table-band {
		width: calc(100% - 64px);
	}
}

@media (max-width: 768px) {
	#ffroot .ff-table-band {
		margin-top: 56px;
	}
}


/* ------------------------------------------ S2 split bands on the column */
/* The copy half of "Female personal trainers..." and the results band start
   on the 1170px column, not 90px / 64px from the screen edge. The photo and
   the slider still run to the edge. */
@media (min-width: 1200px) {
	#ffroot #md-loc-female .female-copy {
		padding-left: max(32px, calc((100vw - 1170px) / 2));
	}

	#ffroot #md-loc-results.res-band {
		padding-left: max(32px, calc((100vw - 1170px) / 2));
		grid-template-columns: 480px minmax(0, 1fr);
	}
}


/* --------------------------------------------- T1 ACF table as cards */
/* section/sh-table.php writes each column heading into data-label. On a
   phone the header row goes, every row is a card, the first cell its title
   and every other value carries its label - nothing is off screen. */
@media (max-width: 640px) {
	#ffroot .ff-table-scroll {
		overflow: visible;
		border: 0;
		border-radius: 0;
	}

	#ffroot .ff-table {
		display: block;
		min-width: 0;
		width: 100%;
		background: none;
	}

	#ffroot .ff-table thead {
		display: none;
	}

	#ffroot .ff-table tbody {
		display: grid;
		gap: 12px;
	}

	#ffroot .ff-table tr {
		box-sizing: border-box;
		display: block;
		padding: 16px;
		background: #FFFFFF;
		border: 1px solid #E6E0D4;
		border-radius: 12px;
	}

	#ffroot .ff-table :is(th, td) {
		display: block;
		padding: 0;
		border: 0;
	}

	#ffroot .ff-table tbody th {
		font-size: 1.0625rem;
		line-height: 1.4;
	}

	#ffroot .ff-table td {
		margin-top: 12px;
		font-size: 0.9375rem;
	}

	#ffroot .ff-table td[data-label]:not([data-label=""])::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #6E675C;
	}
}


/* -------------------------------------------------- S3 one heading scale */
/* Section H2s were 24-44px, some with line-height:normal. One scale, as on
   the v4 pages: 30/1.2 on a phone, 40/1.2 from 900px. Card titles, form
   titles and the article body keep their own sizes. */
#ffroot #md-main :is(.shared-h2, .shared-h2-2, .el-h2, .ctaf-title, .sec-title, .ba-heading, .prefoot-title, .mg-shared-h2, .mg-el-h2-2, .ab-shared-h2, .cr-title, .goals-title) {
	font-size: 30px;
	line-height: 1.2;
	text-wrap: balance;
}

@media (min-width: 900px) {
	#ffroot #md-main :is(.shared-h2, .shared-h2-2, .el-h2, .ctaf-title, .sec-title, .ba-heading, .prefoot-title, .mg-shared-h2, .mg-el-h2-2, .ab-shared-h2, .cr-title, .goals-title) {
		font-size: 40px;
	}
}


/* ------------------------------------------------ S4 section spacing */
/* Measured 70-100px per section on a phone and 100-150px on a desktop.
   v4 is 44 / 72; these land at 52-56 / 88-96. Only the sections that had more
   are listed - the ones with no padding of their own keep none. */
@media (max-width: 768px) {
	#ffroot #md-main > #md-about-achieved,
	#ffroot #md-main > #md-about-certified,
	#ffroot #md-main > #md-about-how-it-works,
	#ffroot #md-main > #md-about-intro-founders,
	#ffroot #md-main > #md-blog,
	#ffroot #md-main > #md-blog-listing,
	#ffroot #md-main > #md-client-results,
	#ffroot #md-main > #md-clips,
	#ffroot #md-main > #md-contact-goals,
	#ffroot #md-main > #md-coverage,
	#ffroot #md-main > #md-cr-goals,
	#ffroot #md-main > #md-faq,
	#ffroot #md-main > #md-goals,
	#ffroot #md-main > #md-loc-areas,
	#ffroot #md-main > #md-loc-howitworks,
	#ffroot #md-main > #md-loc-included,
	#ffroot #md-main > #md-loc-intro,
	#ffroot #md-main > #md-loc-programs,
	#ffroot #md-main > #md-loc-results,
	#ffroot #md-main > #md-mg-included,
	#ffroot #md-main > #md-mg-intro,
	#ffroot #md-main > #md-mg-results,
	#ffroot #md-main > #md-mg-results-copy,
	#ffroot #md-main > #md-mg-scales,
	#ffroot #md-main > #md-mg-started,
	#ffroot #md-main > #md-mg-who,
	#ffroot #md-main > #md-pricing,
	#ffroot #md-main > #md-problems,
	#ffroot #md-main > #md-results,
	#ffroot #md-main > #md-team,
	#ffroot #md-main > #md-tn-session,
	#ffroot #md-main > #md-trainers-goals,
	#ffroot #md-main > #md-trainers-team {
		padding-top: 52px;
	}

	#ffroot #md-main > #md-about-certified,
	#ffroot #md-main > #md-about-how-it-works,
	#ffroot #md-main > #md-about-intro-founders,
	#ffroot #md-main > #md-blog,
	#ffroot #md-main > #md-client-results,
	#ffroot #md-main > #md-contact-goals,
	#ffroot #md-main > #md-cr-goals,
	#ffroot #md-main > #md-goals,
	#ffroot #md-main > #md-loc-areas,
	#ffroot #md-main > #md-loc-howitworks,
	#ffroot #md-main > #md-loc-included,
	#ffroot #md-main > #md-loc-intro,
	#ffroot #md-main > #md-loc-programs,
	#ffroot #md-main > #md-loc-results,
	#ffroot #md-main > #md-mg-included,
	#ffroot #md-main > #md-mg-intro,
	#ffroot #md-main > #md-mg-results,
	#ffroot #md-main > #md-mg-results-copy,
	#ffroot #md-main > #md-mg-started,
	#ffroot #md-main > #md-mg-who,
	#ffroot #md-main > #md-pricing,
	#ffroot #md-main > #md-problems,
	#ffroot #md-main > #md-team,
	#ffroot #md-main > #md-tn-session,
	#ffroot #md-main > #md-trainers-goals,
	#ffroot #md-main > #md-trainers-team {
		padding-bottom: 56px;
	}

	#ffroot #md-main > #md-blog,
	#ffroot #md-main > #md-coverage,
	#ffroot #md-main > #md-goals,
	#ffroot #md-main > #md-mg-started,
	#ffroot #md-main > #md-prefooter,
	#ffroot #md-main > #md-pricing,
	#ffroot #md-main > #md-steps,
	#ffroot #md-main > #md-team,
	#ffroot #md-main > #md-tn-approach,
	#ffroot #md-main > #md-tn-banner,
	#ffroot #md-main > #md-tn-gain,
	#ffroot #md-main > #md-tn-gallery,
	#ffroot #md-main > #md-tn-nutrition,
	#ffroot #md-main > #md-tn-philosophy,
	#ffroot #md-main > #md-tn-programs,
	#ffroot #md-main > #md-tn-quote,
	#ffroot #md-main > #md-tn-session,
	#ffroot #md-main > #md-tn-who {
		margin-top: 48px;
	}
}

@media (min-width: 769px) {
	#ffroot #md-main > #md-about-achieved,
	#ffroot #md-main > #md-about-certified,
	#ffroot #md-main > #md-about-how-it-works,
	#ffroot #md-main > #md-about-intro-founders,
	#ffroot #md-main > #md-blog,
	#ffroot #md-main > #md-blog-listing,
	#ffroot #md-main > #md-client-results,
	#ffroot #md-main > #md-clips,
	#ffroot #md-main > #md-contact-goals,
	#ffroot #md-main > #md-coverage,
	#ffroot #md-main > #md-cr-goals,
	#ffroot #md-main > #md-faq,
	#ffroot #md-main > #md-goals,
	#ffroot #md-main > #md-loc-areas,
	#ffroot #md-main > #md-loc-howitworks,
	#ffroot #md-main > #md-loc-included,
	#ffroot #md-main > #md-loc-intro,
	#ffroot #md-main > #md-loc-programs,
	#ffroot #md-main > #md-loc-results,
	#ffroot #md-main > #md-mg-included,
	#ffroot #md-main > #md-mg-intro,
	#ffroot #md-main > #md-mg-results,
	#ffroot #md-main > #md-mg-results-copy,
	#ffroot #md-main > #md-mg-scales,
	#ffroot #md-main > #md-mg-started,
	#ffroot #md-main > #md-mg-who,
	#ffroot #md-main > #md-pricing,
	#ffroot #md-main > #md-problems,
	#ffroot #md-main > #md-results,
	#ffroot #md-main > #md-team,
	#ffroot #md-main > #md-tn-session,
	#ffroot #md-main > #md-trainers-goals,
	#ffroot #md-main > #md-trainers-team {
		padding-top: 88px;
	}

	#ffroot #md-main > #md-about-certified,
	#ffroot #md-main > #md-about-how-it-works,
	#ffroot #md-main > #md-about-intro-founders,
	#ffroot #md-main > #md-blog,
	#ffroot #md-main > #md-client-results,
	#ffroot #md-main > #md-contact-goals,
	#ffroot #md-main > #md-cr-goals,
	#ffroot #md-main > #md-goals,
	#ffroot #md-main > #md-loc-areas,
	#ffroot #md-main > #md-loc-howitworks,
	#ffroot #md-main > #md-loc-included,
	#ffroot #md-main > #md-loc-intro,
	#ffroot #md-main > #md-loc-programs,
	#ffroot #md-main > #md-loc-results,
	#ffroot #md-main > #md-mg-included,
	#ffroot #md-main > #md-mg-intro,
	#ffroot #md-main > #md-mg-results,
	#ffroot #md-main > #md-mg-results-copy,
	#ffroot #md-main > #md-mg-started,
	#ffroot #md-main > #md-mg-who,
	#ffroot #md-main > #md-pricing,
	#ffroot #md-main > #md-problems,
	#ffroot #md-main > #md-team,
	#ffroot #md-main > #md-tn-session,
	#ffroot #md-main > #md-trainers-goals,
	#ffroot #md-main > #md-trainers-team {
		padding-bottom: 96px;
	}

	#ffroot #md-main > #md-blog,
	#ffroot #md-main > #md-coverage,
	#ffroot #md-main > #md-goals,
	#ffroot #md-main > #md-mg-started,
	#ffroot #md-main > #md-prefooter,
	#ffroot #md-main > #md-pricing,
	#ffroot #md-main > #md-steps,
	#ffroot #md-main > #md-team,
	#ffroot #md-main > #md-tn-approach,
	#ffroot #md-main > #md-tn-banner,
	#ffroot #md-main > #md-tn-gain,
	#ffroot #md-main > #md-tn-gallery,
	#ffroot #md-main > #md-tn-nutrition,
	#ffroot #md-main > #md-tn-philosophy,
	#ffroot #md-main > #md-tn-programs,
	#ffroot #md-main > #md-tn-quote,
	#ffroot #md-main > #md-tn-session,
	#ffroot #md-main > #md-tn-who {
		margin-top: 88px;
	}
}


/* ------------------------------------- S6 no benefits bar where it pushes */
/* The four-cell benefits bar stays on service pages; on the blog, archives,
   articles and legal pages it pushed the first post / the text to y=730. */
body:is(.page-template-page-blog-php, .archive:not(.post-type-archive-trainers), .single-post, .search) #md-benefits,
body:has(#md-page-hero.ff-hero--compact) #md-benefits {
	display: none;
}


/* ---------------------------------------- S7 article and legal text */
/* 1170px of 16px text was ~150 characters a line. */
#ffroot .bs-content,
body:has(#md-page-hero.ff-hero--compact) #ffroot .pg-content {
	box-sizing: border-box;
	max-width: 740px;
	margin-left: auto;
	margin-right: auto;
}

#ffroot .bs-content > h2,
body:has(#md-page-hero.ff-hero--compact) #ffroot .pg-content h2 {
	font-size: 30px;
	line-height: 1.25;
	text-align: left;
}

#ffroot .bs-content > figure img,
#ffroot .bs-content img {
	height: auto;
	max-width: 100%;
}

@media (max-width: 768px) {
	#ffroot .bs-content > h2,
	body:has(#md-page-hero.ff-hero--compact) #ffroot .pg-content h2 {
		font-size: 24px;
	}

	#ffroot .bs-content > h3 {
		text-align: left;
	}
}


/* --------------------------------------------- T2 tables in articles */
/* inc/ux-hero.php wraps every article <table> in .ff-table-wrap. */
#ffroot .bs-content .ff-table-wrap {
	box-sizing: border-box;
	max-width: 100%;
	margin: 28px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #E6E0D4;
	border-radius: 12px;
}

#ffroot .bs-content .ff-table-wrap table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
	background: #FFFFFF;
}

#ffroot .bs-content .ff-table-wrap :is(th, td) {
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid #E6E0D4;
}

#ffroot .bs-content .ff-table-wrap thead th,
#ffroot .bs-content .ff-table-wrap tr:first-child th {
	background: #F9F5ED;
	font-weight: 600;
}

#ffroot .bs-content .ff-table-wrap tbody tr:nth-child(even) {
	background: #FCFAF6;
}

#ffroot .bs-content .ff-table-wrap tr:last-child :is(th, td) {
	border-bottom: 0;
}

#ffroot .bs-content .ff-table-wrap figcaption {
	padding: 10px 16px;
	font-size: 13px;
}


/* --------------------------------------------- S8 goals grid, 2 x 5 */
/* Ten cards in four columns left 4/4/2 with a gap on the right. Five columns
   from 1200px make two full rows; the CTA sits at the foot of every card so
   one- and two-line labels line up across the row. */
@media (min-width: 1200px) {
	#ffroot .goal-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 20px;
	}

	#ffroot .goal-grid .goal-card-body {
		padding-left: 20px;
		padding-right: 20px;
	}
}

#ffroot .goal-grid .goal-card {
	display: flex;
	flex-direction: column;
}

#ffroot .goal-grid .goal-card-body {
	flex: 1 1 auto;
}

#ffroot .goal-grid .goal-cta {
	margin-top: auto;
}

#ffroot .goal-grid .goal-cta {
	min-height: 72px;
	box-sizing: border-box;
}


/* ---------------------------------------------- I3 coverage section */
/* The copy, its links and the accordion sat straight on the Burj Al Arab
   photo; on a phone the in-text links were black on the dark image. The
   photo is dimmed to about a 75% veil and the links are light and
   underlined. */
#ffroot #md-coverage .el-img-3 {
	filter: brightness(0.28);
}

#ffroot #md-coverage .coverage-copy a:not(.btn-blue),
#ffroot #md-coverage .el-p-8 a {
	color: #6BD1F4;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#ffroot #md-coverage .coverage-copy a:not(.btn-blue):hover,
#ffroot #md-coverage .el-p-8 a:hover {
	color: #ffffff;
}


/* ------------------------------------------------- H7 header 992-1199 */
/* At 992-1199 the header was 92px tall, the six links sat 14px from a 190-
   216px dark phone block. Here it is 76px, as on desktop, and the phone block
   is the compact WhatsApp pill: icon and number, no panel behind it. */
@media (min-width: 992px) and (max-width: 1200px) {
	#ffroot #masthead.hdr {
		height: 76px;
		padding-right: 20px;
		gap: 16px;
	}

	#ffroot #md-primary-nav {
		gap: 18px;
	}

	#ffroot #masthead .phoneblk,
	#ffroot #masthead.hdr.is-stuck .phoneblk {
		height: auto;
		padding: 0;
		gap: 8px;
		background: none;
	}

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

	#ffroot #masthead .phoneblk .el-span {
		font-size: 14px;
		font-weight: 600;
		white-space: nowrap;
	}
}


/* --------------------------------------------------------- O1 search */
#ffroot .ff-search-band {
	box-sizing: border-box;
	width: calc(100% - 40px);
	max-width: 1170px;
	margin: 48px auto 0;
	padding: 0;
}

#ffroot .ff-search {
	display: flex;
	gap: 10px;
	max-width: 640px;
}

#ffroot .ff-search-field {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	height: 54px;
	padding: 0 16px;
	border: 1px solid #E0DACE;
	border-radius: 6px;
	background: #FFFFFF;
	font: inherit;
	font-size: 16px;
	color: #101010;
}

#ffroot .ff-search-field:focus-visible {
	outline: 3px solid #3BB9E4;
	outline-offset: 2px;
}

#ffroot .ff-search-count {
	margin: 14px 0 0;
	font-size: 0.9375rem;
	color: #5A564E;
}

@media (max-width: 480px) {
	#ffroot .ff-search {
		flex-direction: column;
	}
}


/* S3, continued: the FAQ heading carries an id-level size of its own. */
#ffroot #md-main #md-faq h2.shared-h2,
#ffroot #md-main #md-blog-single h2.bs-faq-title {
	font-size: 30px;
	line-height: 1.2;
	text-wrap: balance;
}

@media (min-width: 900px) {
	#ffroot #md-main #md-faq h2.shared-h2,
	#ffroot #md-main #md-blog-single h2.bs-faq-title {
		font-size: 40px;
	}
}


/* ---------------------------------------- I2 replacement heroes, focus */
/* New hero files (content/images/image-map.md, "Hero zamene (I2)"). The
   phone files are 9:16 crops with the faces at ~20% of the height, so the top
   of the file stays in view (above the copy panel). Desktop: the face sits in
   the free band between the copy and the form (755-905px at 1440). */
body.home #ffroot section.ff-hero {
	--focus-d: 54% 40%;
	--focus-m: 50% 0%;
}

body.page-id-502 #ffroot section.ff-hero {
	--focus-d: 60% 40%;
	--focus-m: 50% 0%;
}

body.post-type-archive-trainers #ffroot section.ff-hero {
	--focus-m: 50% 0%;
}

body.page-id-5194 #ffroot section.ff-hero {
	--focus-d: 69% 40%;
	--focus-m: 50% 0%;
}

body.page-id-335 #ffroot section.ff-hero {
	--focus-d: 58% 40%;
	--focus-m: 50% 0%;
}

/* Wide screens: at 1920 the hero is ~800px tall, the 2400x1000 file fills it
   exactly and object-position has no room left, so the face sat behind the
   form. The photo is drawn --wide-shift wider and pulled as far left, which
   puts the face back in the gap between the copy and the form (995-1145px). */
@media (min-width: 1600px) {
	body.home #ffroot section.ff-hero {
		--wide-shift: 4%;
	}

	body.page-id-5194 #ffroot section.ff-hero {
		--wide-shift: 7%;
	}

	body.page-id-335 #ffroot section.ff-hero {
		--wide-shift: 5%;
	}

	#ffroot section.ff-hero > img,
	#ffroot section.ff-hero > picture > img {
		left: calc(var(--wide-shift, 0%) * -1);
		width: calc(100% + var(--wide-shift, 0%));
	}
}


/* ============================================================================
   P1/P2 package 3: S10, S11, H4, O2, O4, mobile alt, tablets
   ========================================================================= */

/* -------------------------------------------- O4 menu triggers as buttons */
/* site-header.php renders a parent with no page of its own (Locations,
   Water-sports) as a <button>. The reset has zero specificity, so the link
   classes (.shared-a-3, .md-navdrop__link) still set font, colour and case;
   the rules below copy the ones general.css keys on `a`. */
:where(#ffroot #md-primary-nav) :where(button.shared-a-3, button.md-subitem__trigger) {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	border: 0;
	background: none;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

#ffroot .md-navitem > button {
	display: flex;
	align-items: center;
	gap: 8px;
	/* The links get their case and tracking from `.hdr .nav a`, which a
	   button misses (0.72px at 13.5px). */
	text-transform: uppercase;
	letter-spacing: 0.0533em;
}

@media (max-width: 991px) {
	#ffroot .hdr .nav[data-open="true"] .md-navitem > button {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 13px 0;
		font-size: 1rem;
		letter-spacing: 0.06em;
	}

	#ffroot .hdr .nav[data-open="true"] .md-navitem > button[aria-expanded="true"] .md-navitem__chev {
		transform: rotate(-135deg);
		margin-top: 4px;
	}

	#ffroot .hdr .nav[data-open="true"] button.md-subitem__trigger {
		width: 100%;
	}
}


/* ------------------------------------------------- S10 tap targets */
/* Burger 36x32 -> 44x44, bars unchanged. */
#ffroot #masthead .burger {
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	max-height: 44px;
	padding: 0 7px;
	justify-content: center;
}

@media (max-width: 991px) {
	#ffroot .hdr > .burger {
		height: 44px;
		max-height: 44px;
	}
}

/* Accordion / FAQ rows. */
#ffroot .shared-div-13 {
	min-height: 48px;
	box-sizing: border-box;
}

/* Footer links: 18-19px tall -> 38px rows. */
#ffroot footer a {
	padding-block: 10px;
}

/* Small text links keep their line: an invisible 44px-tall hit area is laid
   over them, so nothing around them moves. */
#ffroot :is(.hero-crumbs a, .blog-card-more, .trainer-profile, .area-chip-link, .panel-cta) {
	position: relative;
}

#ffroot :is(.hero-crumbs a, .blog-card-more, .trainer-profile, .area-chip-link, .panel-cta)::after {
	content: "";
	position: absolute;
	left: -4px;
	right: -4px;
	top: 50%;
	height: 44px;
	min-height: 100%;
	transform: translateY(-50%);
}


/* ------------------------------------------------- S11 small text */
/* Desktop menu 12.48px -> 13.5px (it still fits one row from 1201px). */
@media (min-width: 1201px) {
	#ffroot #md-primary-nav .shared-a-3 {
		font-size: 13.5px;
	}
}

/* 11px badges -> 12px. */
#ffroot :is(.ba-badge, .cr-photo-label, .shared-span-8, .mg-shared-span-2) {
	font-size: 12px;
}


/* ---------------------------------------------------- H4 article image */
#ffroot .bs-content > .ff-post-feature {
	margin: 24px 0 32px;
}

#ffroot .bs-content .ff-post-feature-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 12px;
}

/* The compact article hero without its photo: the H1 on the dark band. */
#ffroot #md-post-hero.ff-hero::after {
	background: linear-gradient(180deg, rgba(13, 31, 38, 0) 0%, rgba(13, 31, 38, 0.35) 100%);
}


/* ------------------------------------------------------------- O2 404 */
#ffroot .ff-404-help {
	margin: 0 0 48px;
}

#ffroot .pg-content--404 ul.ff-404-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
	border-radius: 0;
}

#ffroot .pg-content--404 .ff-404-links li {
	margin: 0;
	padding: 0;
}

#ffroot .pg-content--404 .ff-404-links li::before,
#ffroot .pg-content--404 .ff-404-links li::marker {
	content: none;
}

#ffroot .pg-content--404 .ff-404-links a {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid #E6E3DC;
	border-radius: 999px;
	background: #F9F5ED;
	font-size: 15px;
	font-weight: 500;
	color: #101010;
	text-decoration: none;
}

#ffroot .pg-content--404 .ff-404-links a:hover {
	border-color: #4FBFEA;
}


/* ------------------------------------------- per-device hero alt text */
/* See md_ux_hero_pictures(): from 900px the desktop photo shows and the
   phone one (a 1x1 data: GIF here) is hidden. Below 900 the reverse is set in
   the phone block above. */
@media (min-width: 900px) {
	#ffroot section.ff-hero > picture > img.ff-hero-img--m {
		display: none;
	}

	#ffroot section.ff-hero > picture > img.ff-hero-img--d {
		display: block;
	}
}


/* ------------------------------------- tablets in landscape, 900-1199 */
/* Copy (up to ~560px) and the 400px form card filled the whole width, so
   every hero face sat behind one of them. Here the form leaves the photo for
   the cream band under it, as on phones, and the photo's subject gets the
   right half. --focus-t is the focal point for this range. */
@media (min-width: 900px) and (max-width: 1199px) {
	#ffroot section.ff-hero.ff-hero--form {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		padding-bottom: 0;
	}

	#ffroot section.ff-hero.ff-hero--form > :is(.band-inner, .hero-row) {
		display: contents;
	}

	#ffroot section.ff-hero.ff-hero--form > img,
	#ffroot section.ff-hero.ff-hero--form > picture > img {
		grid-area: 1 / 1 / 2 / 2;
		object-position: var(--focus-t, var(--focus-d));
	}

	#ffroot section.ff-hero.ff-hero--form::after {
		grid-area: 1 / 1 / 2 / 2;
	}

	#ffroot section.ff-hero.ff-hero--form .hero-copy {
		grid-area: 1 / 1 / 2 / 2;
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		min-height: 560px;
		margin: 0;
		padding: 64px 32px 64px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	#ffroot section.ff-hero.ff-hero--form .ff-hero-panel {
		max-width: 560px;
	}

	#ffroot section.ff-hero.ff-hero--form .hero-form {
		grid-row: 2;
		box-sizing: border-box;
		position: relative;
		z-index: 3;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 40px 32px 48px;
		background: #F7F2EA;
		border-bottom: 1px solid #E6E3DC;
		animation: none;
	}

	#ffroot section.ff-hero.ff-hero--form .hero-form .ff-lead-form {
		box-sizing: border-box;
		max-width: 560px;
		margin: 0 auto;
	}

	body.home #ffroot section.ff-hero {
		--focus-t: 5% 40%;
	}

	body.page-id-5194 #ffroot section.ff-hero {
		--focus-t: 18% 40%;
	}

	body.page-id-335 #ffroot section.ff-hero {
		--focus-t: 5% 40%;
	}

	body.page-id-502 #ffroot section.ff-hero {
		--focus-t: 3% 40%;
	}
}


/* ------------------------------- Dubai areas submenu: link + chevron */
/* site-header.php: a third-level parent with a page of its own is a link and
   a separate toggle button, side by side in .md-subitem__row. */
#ffroot .md-subitem__row {
	display: flex;
	align-items: stretch;
}

#ffroot .md-subitem__row > .md-subitem__link {
	flex: 1 1 auto;
	min-width: 0;
}

:where(#ffroot #md-primary-nav) button.md-subitem__toggle {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

#ffroot #md-primary-nav .md-subitem__toggle {
	/* The panel links are white by their own class; the bare button would
	   take the page's #101010. */
	color: #ffffff;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
}

#ffroot #md-primary-nav .md-subitem__row > .md-subitem__link {
	padding-right: 4px;
}

@media (min-width: 992px) {
	#ffroot .md-subitem:hover > .md-subitem__row > *,
	#ffroot .md-subitem__toggle:focus-visible {
		color: var(--md-cyan);
	}
}

@media (max-width: 991px) {
	#ffroot .hdr .nav[data-open="true"] .md-subitem__row > .md-subitem__link {
		display: block;
		width: auto;
	}

	/* 44x44 tap target for the chevron, beside the full-width name. */
	#ffroot #md-primary-nav.nav[data-open="true"] .md-subitem__toggle {
		width: 44px;
		min-height: 44px;
	}

	#ffroot .hdr .nav[data-open="true"] .md-subitem__toggle[aria-expanded="true"] .md-subitem__chev {
		transform: rotate(-135deg);
		margin-top: 4px;
	}
}

/* Locations is the last dropdown: below 1100px its flyout would run past the
   right edge (to 1032px at 1024), so it opens to the left of the panel. */
@media (min-width: 992px) and (max-width: 1099px) {
	#ffroot #md-primary-nav > .md-navitem:last-of-type .md-subdrop {
		left: auto;
		right: 100%;
	}

	#ffroot #md-primary-nav > .md-navitem:last-of-type .md-subdrop__panel {
		border-radius: 8px 0 8px 8px;
	}
}



/* ============================================================================
   Z-INDEX SCALE (whole site)
   ----------------------------------------------------------------------------
     section content ............ <= 10   (hero: photo 0, overlay 1, copy 2)
     form dropdowns (iti/select)  20
     sticky CTA bar ............. 900
     header (#masthead) ......... 1000
     header dropdowns/flyouts ... inside the header's own context
                                  (1001+ relative to the page)
     mobile menu panel .......... inside the header (1001+ relative to page)

   The hero section must not create a stacking context or clip: the header
   is its child, so `isolation:isolate` trapped the header and every dropdown
   at the hero's level (later sections with z-index 1-2 painted over open
   menus), and `overflow:hidden` cut flyouts off at the bottom of short heroes
   (blog, articles). The photo is clipped by its own <picture> layer instead.
   ========================================================================= */
#ffroot section.ff-hero {
	isolation: auto;
	overflow: visible;
}

#ffroot section.ff-hero > picture.ff-hero-pic {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	overflow: hidden;
	pointer-events: none;
}

@media (max-width: 899px) {
	/* Phone grid: the photo layer is the copy's row only. */
	#ffroot section.ff-hero > picture.ff-hero-pic {
		display: block;
		grid-area: 1 / 1 / 2 / 2;
	}
}

@media (min-width: 900px) and (max-width: 1199px) {
	#ffroot section.ff-hero.ff-hero--form > picture.ff-hero-pic {
		grid-area: 1 / 1 / 2 / 2;
	}
}

/* Phone-country dropdown in the forms: 999 from intl-tel-input; 20 on the
   scale above. Inside the page it only needs to beat the form around it.
   While it is open on a phone the sticky bar steps aside (the flag button has
   focus, not an input, so the :focus rule does not cover it). */
#ffroot .iti__dropdown-content {
	z-index: 20;
}

@media (max-width: 899px) {
	body:has(#ffroot .iti__dropdown-content:not(.iti__hide)) .ff-sticky {
		display: none;
	}
}


/* ============================================================================
   Package 4: H10, S5, I4, I6, O6, Z4, S9
   ========================================================================= */

/* --------------------------------------------------------- Z4 overflow */
/* `hidden` made body a scroll container (sticky inside it could not stick
   to the viewport); `clip` cuts the same overflow without that. */
html,
body {
	overflow-x: clip;
}


/* ------------------------------------------- H10 buttons through the page */
#ffroot .ff-btn--wa-outline,
#ffroot .ff-btn--wa-outline:is(:hover, :focus-visible) {
	background: #FFFFFF;
	border: 1px solid #E6E3DC;
	color: #0C1B20;
}

#ffroot .ff-btn--wa-outline:hover {
	border-color: #25D366;
}

#ffroot .ff-btn--wa-outline .ff-ic {
	color: #1EBE5A;
}

/* Contact: the two links in the details copy are the buttons above the form. */
#ffroot .ct-details .ff-btn--wa,
#ffroot .ct-details .ff-btn--wa:is(:hover, :focus-visible) {
	background: #25D366;
	color: #0C1B20;
	text-decoration: none;
}

#ffroot .ct-details .ff-btn--call,
#ffroot .ct-details .ff-btn--call:is(:hover, :focus-visible) {
	background: #0C1B20;
	color: #FFFFFF;
	text-decoration: none;
}

#ffroot .ct-details > p:first-child {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 0;
}

#ffroot .ct-details > p:first-child .ff-btn {
	flex: 1 1 200px;
	font-size: 14px;
}

/* Section CTA row after the team, results and how-it-works. */
#ffroot .ff-section-cta {
	box-sizing: border-box;
	width: calc(100% - 40px);
	max-width: 1170px;
	margin: 0 auto;
	padding: 8px 0 48px;
}

#ffroot .ff-section-cta .ff-cta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

#ffroot .ff-section-cta .ff-btn {
	min-width: 230px;
}

@media (max-width: 599px) {
	#ffroot .ff-section-cta .ff-btn {
		width: 100%;
	}
}

/* The small uppercase "… on WhatsApp +" links become outline buttons. */
#ffroot :is(.panel-cta, a.areas-note-link) {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	margin-top: 16px;
	padding: 10px 20px;
	border: 1px solid #E6E3DC;
	border-radius: 6px;
	background: #FFFFFF;
	color: #0C1B20;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

#ffroot :is(.panel-cta, a.areas-note-link):hover {
	border-color: #25D366;
	color: #0C1B20;
}

#ffroot :is(.panel-cta, a.areas-note-link)::after {
	content: none;
}


/* ---------------------------------------------------------- S9 trainers */
/* Cards in a row stretch to the tallest one (one card's See More then grows
   the whole row evenly) and every CTA sits at the foot of its card. */
#ffroot .trainers-grid[class] {
	align-items: stretch;
}

#ffroot .trainers-grid > .trainer-card {
	display: flex;
	flex-direction: column;
	height: auto;
}

#ffroot .trainers-grid > .trainer-card > :is(.trainer-cta, .trainer-cta-wrap, .el-div-68) {
	margin-top: auto;
}

#ffroot .trainers-grid :is(.trainer-profile, .el-a-10) {
	white-space: nowrap;
}

#ffroot .trainers-grid :is(.meta-row, .trainer-head) {
	flex-wrap: wrap;
	row-gap: 4px;
}

#ffroot .trainers-grid .trainer-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ---------------------------------------------- S5 trainers as a slider */
/* Below 900px the cards are a horizontal snap slider (v4 .tgrid), with the
   same cards the desktop grid shows. Arrows and the 1 / N counter (visible
   cards only) are added by custom.js (.ff-slider-nav). */
@media (max-width: 899px) {
	#ffroot .trainers-grid {
		display: flex;
		grid-template-columns: none;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 20px;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		box-sizing: border-box;
		width: auto;
		margin-left: 0;
		margin-right: 0;
		padding-inline: 20px;
	}

	#ffroot .trainers-grid::-webkit-scrollbar {
		display: none;
	}

	#ffroot .trainers-grid > .trainer-card:not([hidden]) {
		display: flex;
		flex: 0 0 84%;
		box-sizing: border-box;
		width: auto;
		max-width: none;
		margin: 0;
		scroll-snap-align: start;
	}

	#ffroot .trainers-grid .trainer-photo {
		aspect-ratio: 4 / 5;
		height: auto;
	}

	/* The "meet all trainers" link under the slider stays (it leads to
	   /trainers/); the slider shows the same cards as the desktop grid. */
}

.ff-slider-nav {
	display: none;
}

@media (max-width: 899px) {
	#ffroot .ff-slider-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		margin: 16px 0 0;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.08em;
		font-variant-numeric: tabular-nums;
		color: #5A564E;
	}

	#ffroot .ff-slider-nav button {
		display: grid;
		place-items: center;
		width: 46px;
		height: 46px;
		padding: 0;
		border: 1px solid #E6E3DC;
		border-radius: 50%;
		background: #FFFFFF;
		color: #0C1B20;
		cursor: pointer;
	}

	#ffroot .ff-slider-nav button:disabled {
		opacity: 0.35;
		cursor: default;
	}

	#ffroot .ff-slider-nav .ff-ic {
		width: 20px;
		height: 20px;
	}
}


/* ------------------------------------------------- S5 compact goals grid */
/* 10 cards at ~330px each on a phone -> a 2 x 5 grid of icon + title; the
   whole card is the link (its CTA stretched over it), description and CTA
   label hidden. */
@media (max-width: 899px) {
	#ffroot .goal-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-top: 28px;
	}

	#ffroot .goal-grid > * {
		position: relative;
		box-sizing: border-box;
		min-width: 0;
		min-height: 0;
		margin: 0;
	}

	#ffroot .goal-grid > * > :first-child {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		height: 100%;
		padding: 16px 14px;
	}

	#ffroot .goal-grid :is(.goal-text, .shared-p--2) {
		display: none;
	}

	#ffroot .goal-grid :is(.goal-title, .shared-div-26--1) {
		margin: 0;
		font-size: 15px;
		line-height: 1.3;
	}

	#ffroot .goal-grid .goal-cta {
		position: static;
		min-height: 0;
		padding: 0;
		border: 0;
	}

	#ffroot .goal-grid .goal-cta > * {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	#ffroot .goal-grid .goal-cta::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}
}


/* ------------------------------------------------------ I4 goal icons */
#ffroot .goal-grid :is(.goal-icon, .shared-img-5) {
	width: auto;
	height: 44px;
	max-width: 52px;
	object-fit: contain;
}


/* --------------------------------------------- S5 compact benefits bar */
@media (max-width: 899px) {
	#ffroot #md-benefits .herocell {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		min-height: 64px;
		padding: 10px 14px;
		text-align: left;
	}

	#ffroot #md-benefits .herocell img {
		flex: none;
		width: 32px;
		height: 32px;
		margin: 0;
	}

	#ffroot #md-benefits .herocell .shared-div-2 {
		margin: 0;
		font-size: 13px;
		line-height: 1.3;
	}

	#ffroot #md-benefits .herocell .shared-div-2 br {
		display: none;
	}
}


/* -------------------------------------- I6 before/after quotes, no scroll */
#ffroot [data-baq] {
	display: -webkit-box;
	height: auto;
	max-height: none;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	padding-right: 0;
}

#ffroot :is(.ba-weeks) {
	align-self: flex-start;
	display: inline-block;
	padding: 6px 10px;
	border-radius: 4px;
	background: #0C1B20;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

#ffroot .ff-ba-more {
	display: inline-block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 600;
	color: #0F9ED8;
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* -------------------------------------------- O6 prefooter side padding */
@media (max-width: 768px) {
	#ffroot .prefoot-inner {
		box-sizing: border-box;
		padding-inline: 20px;
	}
}


/* ============================================================================
   Final check: axe fixes (color-contrast, link-in-text-block)
   ========================================================================= */

/* Text links in copy were #0F9ED8 (3.0:1 on white, 2.7:1 on cream) and, in
   paragraphs, told apart from the text by colour alone. #0A6E99 is 5.7:1 on
   white and 5.0:1 on #F7F2EA; in-text links are underlined. */
#ffroot :is(p, li) a:not([class]),
#ffroot :is(.ff-ba-more, .ff-table a, .ff-table-intro a, .ff-table-note a, .cr-meta a, .ct-more a, .founder-linkedin) {
	color: #0A6E99;
}

#ffroot :is(p, li) a:not([class]),
#ffroot footer :is(p, div) a:not([class]) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

#ffroot :is(p, li) a:not([class]):hover {
	color: #0C1B20;
}

/* Small blue labels: "FitForce fix" (#1D9AD0, 3.2:1), the author box role
   (#37B2E2, 2.3:1), the Contact breadcrumb (#3BB9E4, 2.0:1). */
#ffroot :is(.shared-div-25--2, .prob-label-text--2, .ff-author-role),
#ffroot .ct-el-a-4 {
	color: #0A6E99;
}

/* Clip counter "/09" (#B4B4B4, 2.1:1). */
#ffroot .el-span-13 {
	color: #707070;
}


/* ============================================================================
   SEO package: nearby areas, homepage areas grid (inc/ux-seo.php)
   ========================================================================= */
#ffroot :is(.ff-nearby, .ff-home-areas) {
	box-sizing: border-box;
	width: calc(100% - 40px);
	max-width: 1170px;
	margin: 0 auto;
	padding: 56px 0;
}

#ffroot .ff-nearby-title {
	margin: 0;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 600;
	color: #101010;
	text-wrap: balance;
}

#ffroot .ff-home-areas-city {
	margin: 28px 0 0;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
}

#ffroot .ff-home-areas-city a {
	color: #0C1B20;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#ffroot ul.ff-area-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

#ffroot .ff-area-chips li {
	margin: 0;
	padding: 0;
}

#ffroot .ff-area-chips li::before {
	content: none;
}

#ffroot .ff-area-chips a {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid #E6E3DC;
	border-radius: 999px;
	background: #F9F5ED;
	font-size: 15px;
	font-weight: 500;
	color: #101010;
	text-decoration: none;
}

#ffroot .ff-area-chips a:hover {
	border-color: #4FBFEA;
}

#ffroot .ff-area-chips .ff-area-chip--hub {
	background: #FFFFFF;
	font-weight: 600;
}

@media (min-width: 900px) {
	#ffroot :is(.ff-nearby, .ff-home-areas) {
		padding: 80px 0;
	}

	#ffroot .ff-nearby-title {
		font-size: 40px;
	}
}

/* /contact/: the two offices (md_seo_location_cards). */
#ffroot .ff-locations {
	box-sizing: border-box;
	width: calc(100% - 40px);
	max-width: 1170px;
	margin: 0 auto;
	padding: 56px 0 0;
}

#ffroot .ff-loc-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin-top: 24px;
}

#ffroot .ff-loc-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 24px;
	border: 1px solid #E6E3DC;
	border-radius: 16px;
	background: #FFFFFF;
}

#ffroot .ff-loc-title {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 600;
	color: #101010;
}

#ffroot .ff-loc-address {
	margin: 0;
	font-style: normal;
	font-size: 16px;
	line-height: 1.55;
	color: #101010;
}

#ffroot :is(.ff-loc-hours, .ff-loc-links) {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #3D3D3D;
}

#ffroot .ff-loc-links a {
	color: #0A6E99;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#ffroot .ff-loc-map {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 240px;
	margin-top: 6px;
	border: 0;
	border-radius: 12px;
	background: #E6E3DC;
}

#ffroot a.ff-loc-dir {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	background: #0C1B20;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #FFFFFF;
	text-decoration: none;
}

#ffroot a.ff-loc-dir:is(:hover, :focus-visible) {
	background: #1F3640;
	color: #FFFFFF;
}

@media (min-width: 900px) {
	#ffroot .ff-locations {
		padding-top: 80px;
	}

	#ffroot .ff-loc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}

	#ffroot .ff-loc-map {
		height: 280px;
	}
}

/* /contact/ "Areas we cover" + "Company details" (ff_ct_more): design-fixes.css
   gave it auto margins but no width, so on desktop it ran edge to edge from
   15px while everything above sits in the 1170px column. Same column as the
   offices block above it, with the area list as a card. */
#ffroot .ct-more {
	box-sizing: border-box;
	width: calc(100% - 40px);
	max-width: 1170px;
	margin: 56px auto 0;
	padding: 0 0 56px;
}

#ffroot .ct-more ul {
	box-sizing: border-box;
	margin: 0 0 20px;
	padding: 24px;
	border: 1px solid #E6E3DC;
	border-radius: 16px;
	background: #FFFFFF;
}

#ffroot .ct-more li {
	margin: 0;
	padding: 0;
}

#ffroot .ct-more li::before {
	content: none;
}

#ffroot .ct-more p {
	max-width: 760px;
	margin: 0 0 12px;
}

@media (max-width: 599px) {
	#ffroot .ct-more ul {
		gap: 10px 16px;
		padding: 20px;
		font-size: 15px;
		line-height: 1.4;
	}
}

@media (min-width: 900px) {
	#ffroot .ct-more {
		margin-top: 80px;
		padding-bottom: 80px;
	}
}

/* Footer bar: the trade licence under the copyright, small. */
#ffroot .footbar .ff-licence {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	opacity: .8;
}

/* Trainers third, right under the benefit strip (client, 19. 10. 2026): the
   band's own top margin was spacing from the white section it used to follow;
   here it left a white stripe between two cream bands. */
#ffroot #md-benefits + #md-team {
	margin-top: 0;
}

/* Client results goal filter (design-fixes.css): white on #0F9ED8 is 3:1, the
   active pill takes the site's AA link blue instead (axe color-contrast). */
#ffroot .cr-filter-link.is-active {
	background: #0A6E99;
	border-color: #0A6E99;
	color: #FFFFFF;
}

/* Trainers heading and intro: the band has no side padding below 900px, so a
   long title ("The team behind your results") ran to the screen edge. */
@media (max-width: 899px) {
	#ffroot #md-team .team-head {
		box-sizing: border-box;
		padding: 0 20px;
	}
}

/* Trainer profile with a photo but no hero video (the compact profiles): on
   desktop the photo filled the whole 1170px row (1170x698). Half the row,
   on the right under the booking button, as the full profiles place theirs. */
@media (min-width: 1201px) {
	body.single-trainers #ffroot .hero-media--photo {
		width: 50%;
		margin-left: auto;
	}

	body.single-trainers #ffroot .hero-media--photo .media-cell {
		min-height: 0;
	}

	body.single-trainers #ffroot .hero-media--photo .media-cell img {
		height: auto;
		aspect-ratio: 770 / 460;
	}
}

/* Data table with a place photo (ff_table_image, "Where we train" on area pages):
   title + intro on the left, the photo on the right; stacked on a phone. */
#ffroot .ff-table-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	gap: 40px;
	align-items: center;
}
#ffroot .ff-table-photo {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 962 / 717;
	background: #F9F5ED;
}
#ffroot .ff-table-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 899px) {
	#ffroot .ff-table-head {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

/* EEAT audit, 22. 10. 2026: the medical disclaimer on health posts and
   programmes, the results note, and the footer's legal links. */
#ffroot .ff-health-note {
	margin: 32px 0 0;
	padding: 16px 20px;
	border-left: 4px solid #0A6E99;
	background: #F2F8FB;
	border-radius: 4px;
}
#ffroot .ff-health-note p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #1F2A33;
}
#ffroot .ff-health-note-wrap {
	padding-left: 16px;
	padding-right: 16px;
}
#ffroot .ff-health-note-wrap .ff-health-note {
	margin: 0 0 40px;
}
#ffroot .ff-results-note {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	opacity: .75;
}
#ffroot .footbar .ff-legal {
	margin-top: 2px;
}

/* QA H7 (22 Oct 2026): on tablet/phone .ba-copy is display:contents and the
   h2/intro get order 1/2; keep the results disclaimer after the intro, centred. */
@media (max-width: 768px) {
	#ffroot .ff-results-note {
		order: 2;
		text-align: center;
	}
}