/* First Multi Sections
   Scoped entirely to .fms- prefixed classes so nothing here can reach the Hub theme. */

.fms-hero,
.fms-hero *,
.fms-hero *::before,
.fms-hero *::after {
	box-sizing: border-box;
}

/* Hub's global body typography is inherited by everything, and is currently an
   italic face. Reset the inheritable text properties once at the section
   boundary so the hero is not at the mercy of the theme's global settings.
   Nothing outside .fms-hero is affected. */
.fms-hero {
	font-style: normal;
	text-transform: none;
	text-shadow: none;
	font-variant: normal;
}

/* ---------- Full-bleed shell ----------
   --fms-vw is set by JS to documentElement.clientWidth so the breakout excludes
   the scrollbar. 100vw is the no-JS fallback. */

.fms-hero {
	position: relative;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	min-height: var(--fms-hero-h, 80vh);
	overflow: hidden;
	isolation: isolate;
	background-color: var(--fms-navy, #0B2A4A);
}

/* ---------- Background media ---------- */

.fms-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.fms-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border: 0;
}

.fms-hero__overlay {
	position: absolute;
	inset: 0;
	display: block;
	background: #000;
	opacity: var(--fms-hero-overlay, 0.55);
	pointer-events: none;
}

/* ---------- Inner layout ---------- */

.fms-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-height: var(--fms-hero-h, 80vh);
	width: 100%;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
	padding-bottom: var(--fms-hero-pad-b, var(--fms-pad-y, 80px));
}

.fms-hero--boxed .fms-hero__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
}

/* Top container takes the slack so the rule and bottom block sit low. */

.fms-hero__top {
	flex: 1 1 auto;
	display: flex;
	align-items: flex-end;
	min-height: 0;
}

/* ---------- Eyebrow, sitting on the upper left of the rule ---------- */

.fms-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 14px;
}

/* The little mark beside the hero and About labels. A plain background image,
   not a mask, because the artwork is multi-coloured and masking would flatten
   it to a single colour. Shared by both sections. */
.fms-hero__stripe,
.fms-about__stripe {
	display: block;
	width: 19px;
	height: 19px;
	flex: none;
	background-image: var(--fms-mark-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Rendered as an h2 by default, so it needs its own reset against the theme's
   heading rules rather than inheriting an H2 size meant for section titles. */
.fms-hero .fms-hero__eyebrow-text {
	margin: 0;
	font-size: var(--fms-eyebrow-size, 16px);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.3;
}

/* ---------- Divider rule ---------- */

.fms-hero__rule {
	height: 1px;
	width: 100%;
	background: rgba(255, 255, 255, var(--fms-hero-rule, 0.3));
	transform-origin: left center;
	flex: none;
}

/* ---------- Bottom container ---------- */

.fms-hero__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	padding-top: 40px;
	flex: none;
}

.fms-hero__col--title {
	flex: 1 1 58%;
	min-width: 0;
}

.fms-hero__col--aside {
	flex: 0 1 400px;
	min-width: 0;
}

/* By default the title carries no font-family, weight or size of its own, so
   the theme's global H1 typography applies. Leading and tracking stay here:
   a headline needs tighter optical settings than a global H1 rule provides. */
/* Two class selectors so the theme's own heading rules cannot outrank these. */
.fms-hero .fms-hero__title {
	margin: 0;
	font-style: normal;
	line-height: var(--fms-title-lh, 1.06);
	letter-spacing: var(--fms-title-ls, -0.022em);
	color: #fff;
	text-wrap: balance;
}

/* Applied only when "Follow the theme" is switched off in the plugin settings. */
.fms-hero--own-type .fms-hero__title {
	font-family: var(--fms-font-heading, sans-serif);
	font-weight: var(--fms-heading-weight, 500);
	font-size: clamp(2.125rem, 4.4vw, 4rem);
}

/* Two classes so the theme's global body weight cannot make this bold. */
.fms-hero .fms-hero__desc {
	margin: 0 0 22px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.86);
	max-width: 42ch;
}

/* Translucent accent fill. The solid declaration is the fallback for browsers
   without color-mix; the one after it wins everywhere else. */
.fms-hero__btn {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	padding: 16px 32px;
	border-radius: var(--fms-btn-radius, 8px);
	/* The border is reserved but invisible at rest, so revealing it on hover
	   does not shift the button by a pixel. */
	border: 1px solid transparent;
	background: var(--fms-hero-btn, #00AEEF);
	background: color-mix(in srgb, var(--fms-hero-btn, #00AEEF) var(--fms-btn-alpha, 45%), transparent);
	color: #fff;
	text-decoration: none;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

/* Hover reveals the outline in the button's own colour and lifts the fill a
   little. The border is already reserved above, so nothing moves. */
.fms-hero__btn:hover,
.fms-hero__btn:focus-visible {
	background: var(--fms-hero-btn, #00AEEF);
	background: color-mix(in srgb, var(--fms-hero-btn, #00AEEF) var(--fms-btn-alpha-hover, 58%), transparent);
	border-color: var(--fms-hero-btn, #00AEEF);
	color: #fff;
	text-decoration: none;
}

.fms-hero__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---------- Animation start states ----------
   Removed as soon as the script runs, and never applied without JS. */

.fms-animate:not(.fms-ready) [data-fms-anim] {
	opacity: 0;
}

.fms-animate:not(.fms-ready) [data-fms-anim="rule"] {
	opacity: 1;
	transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
	.fms-animate [data-fms-anim] {
		opacity: 1 !important;
		transform: none !important;
	}
	.fms-hero__btn {
		transition: none;
	}
}

/* ---------- Tablet ---------- */

/* Tablet takes the same stacked composition as mobile: at this width the two
   columns squeeze the headline too hard side by side. */
@media (max-width: 1024px) {
	.fms-hero__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding-top: 30px;
	}

	.fms-hero__col--title,
	.fms-hero__col--aside {
		flex: 1 1 auto;
		width: 100%;
	}

	.fms-hero .fms-hero__desc {
		font-size: 15px;
		margin-bottom: 18px;
		max-width: 52ch;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-hero__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
		padding-top: 26px;
	}

	.fms-hero__col--title,
	.fms-hero__col--aside {
		flex: 1 1 auto;
		width: 100%;
	}

	.fms-hero__title {
		line-height: 1.1;
	}

	.fms-hero .fms-hero__desc {
		max-width: none;
		margin-bottom: 20px;
	}

	.fms-hero__btn {
		padding: 15px 28px;
	}

	.fms-hero .fms-hero__eyebrow-text {
		font-size: 14px;
		letter-spacing: 0.14em;
	}
}

/* ==========================================================================
   Header — two rounded panels over the hero, hides on scroll down
   ========================================================================== */

.fms-header,
.fms-header *,
.fms-header *::before,
.fms-header *::after {
	box-sizing: border-box;
}

.fms-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	font-style: normal;
	text-transform: none;
}

.fms-header--sticky {
	position: fixed;
}

/* Slides out of view on the way down and back in on the way up. The class is
   only ever added by the script, so with JS off the header simply stays put. */
.fms-header--autohide {
	transition: transform 0.35s ease;
	will-change: transform;
}

.fms-header--autohide.is-hidden {
	transform: translateY(-100%);
}

/* The WordPress toolbar is itself position:fixed, so the html margin-top that
   WordPress adds does not move a fixed header out from under it. Offset by the
   toolbar's own height instead. Logged-in users only; visitors never see this.
   Heights below are WordPress's: 32px, 46px under 783px, and from 600px down
   the toolbar turns absolute and scrolls away, so the offset is dropped. */
body.admin-bar .fms-header--sticky {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .fms-header--sticky {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .fms-header--sticky {
		top: 0;
	}
}

.fms-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: var(--fms-header-pad-top, 10px) var(--fms-pad-x, 40px) var(--fms-header-pad-bottom, 10px);
	width: 100%;
}

/* ---------- Left panel ---------- */

.fms-header__left {
	display: flex;
	align-items: center;
	/* Room to the right of the logo before the menu starts. */
	gap: 38px;
	background: var(--fms-white, #fff);
	border-radius: var(--fms-panel-radius, 8px);
	padding: 10px 22px;
	min-width: 0;
}

.fms-header__logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	line-height: 0;
	text-decoration: none;
}

/* The set height is a maximum rather than a fixed value, so a wide logo can
   shrink proportionally on narrow screens instead of forcing the panel to
   wrap onto two rows. */
.fms-header__logo img {
	display: block;
	height: auto;
	width: auto;
	max-height: var(--fms-logo-h, 34px);
	max-width: none;
}

/* ---------- Menu ---------- */

.fms-header__nav {
	min-width: 0;
}

.fms-header .fms-header__menu {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-header .fms-header__menu li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-header .fms-header__menu a {
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--fms-navy, #0B2A4A);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.fms-header .fms-header__menu a:hover,
.fms-header .fms-header__menu a:focus-visible {
	color: var(--fms-cyan, #00AEEF);
	text-decoration: none;
}

/* Second level */

.fms-header .fms-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -14px;
	margin: 0;
	padding: 8px 0;
	min-width: 190px;
	list-style: none;
	background: var(--fms-white, #fff);
	border: 1px solid rgba(11, 42, 74, 0.1);
	border-radius: var(--fms-panel-radius, 8px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.fms-header .fms-header__menu li:hover > .sub-menu,
.fms-header .fms-header__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.fms-header .fms-header__menu .sub-menu a {
	display: block;
	padding: 8px 18px;
	white-space: normal;
}

/* ---------- Right group ---------- */

.fms-header__right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

/* Solid, unlike the hero button. --fms-header-cta is set per instance from the
   colour chosen on the element. */
.fms-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	padding: 15px 26px;
	border-radius: var(--fms-btn-radius, 8px);
	border: 1px solid transparent;
	background: var(--fms-header-cta, var(--fms-navy, #0B2A4A));
	color: var(--fms-header-cta-text, #fff);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.fms-header__cta:hover,
.fms-header__cta:focus-visible {
	background: var(--fms-header-cta, var(--fms-navy, #0B2A4A));
	background: color-mix(in srgb, var(--fms-header-cta, var(--fms-navy, #0B2A4A)) var(--fms-btn-keep, 78%), #000);
	color: var(--fms-header-cta-text, #fff);
	transform: translateY(-2px);
	text-decoration: none;
}

.fms-header__cta:focus-visible {
	outline: 2px solid var(--fms-white, #fff);
	outline-offset: 2px;
}

/* The icon only appears once the button collapses; on desktop the label carries
   it. Drawn as a mask so it takes the button's own label colour rather than
   whatever colours happen to be baked into the SVG file. */
.fms-header__cta-icon {
	display: none;
	width: 20px;
	height: 20px;
	flex: none;
	background-color: var(--fms-header-cta-text, #fff);
	-webkit-mask-image: var(--fms-cta-icon);
	mask-image: var(--fms-cta-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ---------- Mobile toggle ---------- */

.fms-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: var(--fms-panel-radius, 8px);
	background: var(--fms-white, #fff);
	cursor: pointer;
}

.fms-header__toggle span {
	display: block;
	height: 2px;
	width: 20px;
	margin: 0 auto;
	background: var(--fms-navy, #0B2A4A);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.fms-header__toggle[aria-expanded="true"] span:first-child {
	transform: translateY(3.5px) rotate(45deg);
}

.fms-header__toggle[aria-expanded="true"] span:last-child {
	transform: translateY(-3.5px) rotate(-45deg);
}

/* ---------- Tablet and below ---------- */

@media (max-width: 1024px) {
	.fms-header__left {
		gap: 26px;
		padding: 8px 24px 8px 16px;
	}

	.fms-header .fms-header__menu {
		gap: 18px;
	}
}

/* Below this the menu collapses. The left panel holds the logo alone, and the
   call to action and toggle sit together on the right as matching rounded
   blocks. The nav drops out of flow so neither panel changes shape. */
@media (max-width: 900px) {
	/* Only the logo is in here now, so the right hand padding is what
	   gives it room rather than the gap. */
	.fms-header__left {
		flex: 0 1 auto;
		min-height: var(--fms-header-ctl-h, 46px);
		padding: 6px 26px 6px 16px;
	}

	.fms-header__toggle {
		display: flex;
	}

	/* Icon only: the label stays in the DOM for screen readers. The button
	   keeps its own colour and its square corners; inside it sits a white disc
	   with the glyph knocked through in the button's colour. */
	.fms-header--has-cta-icon .fms-header__cta {
		position: relative;
		width: var(--fms-header-ctl-h, 46px);
		height: var(--fms-header-ctl-h, 46px);
		padding: 0;
		gap: 0;
		border-radius: var(--fms-panel-radius, 8px);
	}

	/* The disc. On the button rather than on the icon, because the icon is
	   masked and anything drawn inside it would be clipped to the glyph. */
	.fms-header--has-cta-icon .fms-header__cta::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 32px;
		height: 32px;
		margin: -16px 0 0 -16px;
		border-radius: 100px;
		background: var(--fms-white, #fff);
	}

	/* Smaller than the disc behind it by a clear margin, so the white
	   reads as a ring around the glyph rather than a tight outline. */
	.fms-header--has-cta-icon .fms-header__cta-icon {
		display: block;
		position: relative;
		z-index: 1;
		width: 17px;
		height: 17px;
		/* The button's colour, not its label colour, now that the glyph sits
		   on white rather than straight on the fill. */
		background-color: var(--fms-header-cta, var(--fms-navy, #0B2A4A));
	}

	.fms-header--has-cta-icon .fms-header__cta-text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	/* No icon set, so keep a compact text button rather than an empty square. */
	.fms-header__cta {
		min-height: var(--fms-header-ctl-h, 46px);
		padding-top: 0;
		padding-bottom: 0;
	}

	.fms-header__nav {
		position: absolute;
		top: calc(100% - var(--fms-header-pad-bottom, 10px) + 8px);
		left: var(--fms-pad-x, 40px);
		right: var(--fms-pad-x, 40px);
		display: none;
		background: var(--fms-white, #fff);
		border-radius: var(--fms-panel-radius, 8px);
		padding: 10px 18px;
		box-shadow: 0 10px 30px rgba(11, 42, 74, 0.12);
	}

	.fms-header__nav.is-open {
		display: block;
	}

	.fms-header .fms-header__menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.fms-header .fms-header__menu > li {
		width: 100%;
	}

	.fms-header .fms-header__menu a {
		display: block;
		width: 100%;
		padding: 10px 0;
		font-size: 15px;
	}

	/* Second level opens inline rather than floating */
	.fms-header .fms-header__menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		background: transparent;
		padding: 0 0 4px 14px;
		min-width: 0;
		box-shadow: none;
	}
}

@media (max-width: 767px) {
	.fms-header__left {
		padding: 6px 22px 6px 14px;
	}

	.fms-header__right {
		gap: 8px;
	}

	.fms-header__logo img {
		max-width: 42vw;
	}
}

@media (max-width: 400px) {
	.fms-header__logo img {
		max-width: 36vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fms-header--autohide,
	.fms-header__cta,
	.fms-header__toggle span,
	.fms-header .fms-header__menu a,
	.fms-header .fms-header__menu .sub-menu {
		transition: none;
	}
}
/* ==========================================================================
   About — label column left, content column right, rounded image below
   ========================================================================== */

.fms-about,
.fms-about *,
.fms-about *::before,
.fms-about *::after {
	box-sizing: border-box;
}

/* The theme wraps page content in a container with its own side padding, which
   would leave a gutter of page background either side of a coloured section.
   The background breaks out to the full viewport; the content inside stays
   boxed. Any future section with its own ground colour needs this same pair. */
.fms-about {
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	background: var(--fms-about-bg, var(--fms-mist, #EEF2F6));
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

.fms-about__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
}

/* ---------- Top container ---------- */

.fms-about__top {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
	gap: 32px 48px;
	align-items: start;
	margin-bottom: 48px;
}

/* ---------- Pill label ---------- */

.fms-about .fms-about__label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 9px 16px;
	border-radius: 100px;
	background: var(--fms-white, #fff);
	border: 1px solid rgba(11, 42, 74, 0.08);
}

.fms-about--dark .fms-about__label {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.18);
}

/* Sizing only; the cube colours are defined alongside the hero's mark above. */
.fms-about__stripe {
	width: 17px;
	height: 17px;
}

.fms-about .fms-about__label-text {
	font-size: var(--fms-eyebrow-size, 16px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #000;
}

.fms-about--dark .fms-about__label-text {
	color: #fff;
}

/* ---------- Heading, copy, button ---------- */

.fms-about .fms-about__title {
	margin: 0 0 20px;
	font-style: normal;
	font-size: var(--fms-about-title, 40px);
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: #000;
	text-wrap: balance;
}

.fms-about--dark .fms-about__title {
	color: #fff;
}

.fms-about .fms-about__desc {
	margin: 0 0 28px;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	color: #000;
	max-width: 62ch;
}

.fms-about--dark .fms-about__desc {
	color: rgba(255, 255, 255, 0.82);
}

.fms-about__btn {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	padding: 16px 30px;
	border-radius: var(--fms-btn-radius, 8px);
	border: 1px solid var(--fms-navy, #0B2A4A);
	background: var(--fms-navy, #0B2A4A);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.fms-about__btn:hover,
.fms-about__btn:focus-visible {
	background: transparent;
	color: var(--fms-navy, #0B2A4A);
	text-decoration: none;
}

.fms-about--dark .fms-about__btn {
	border-color: #fff;
	background: #fff;
	color: var(--fms-navy, #0B2A4A);
}

.fms-about--dark .fms-about__btn:hover,
.fms-about--dark .fms-about__btn:focus-visible {
	background: transparent;
	color: #fff;
}

.fms-about__btn:focus-visible {
	outline: 2px solid var(--fms-cyan, #00AEEF);
	outline-offset: 3px;
}

/* ---------- Bottom container ---------- */

.fms-about__media {
	position: relative;
	display: block;
	width: 100%;
	height: var(--fms-about-img-h, 500px);
	border-radius: var(--fms-about-img-r, 12px);
	overflow: hidden;
}

/* Darkening layer for the hover, kept above the image and out of pointer
   events so it never intercepts a click. */
.fms-about__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s ease;
}

.fms-about__media:hover::after {
	opacity: 0.18;
}

.fms-about__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.6s ease;
}

.fms-about__media:hover .fms-about__img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.fms-about__media::after,
	.fms-about__img {
		transition: none;
	}
	.fms-about__media:hover .fms-about__img {
		transform: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-about__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		margin-bottom: 36px;
	}

	.fms-about .fms-about__title {
		font-size: var(--fms-about-title-t, 32px);
		margin-bottom: 16px;
	}

	.fms-about .fms-about__desc {
		font-size: 16px;
		margin-bottom: 24px;
		max-width: none;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-about__top {
		gap: 18px;
		margin-bottom: 28px;
	}

	.fms-about .fms-about__title {
		font-size: var(--fms-about-title-m, 26px);
		line-height: 1.22;
	}

	.fms-about .fms-about__desc {
		font-size: 15px;
		margin-bottom: 22px;
	}

	.fms-about .fms-about__label {
		padding: 7px 13px;
	}

	.fms-about .fms-about__label-text {
		font-size: 13px;
	}

	.fms-about__btn {
		padding: 15px 26px;
	}
}

/* ==========================================================================
   Trust — separate cards with gaps, three counting statistics and a tile
   ========================================================================== */

.fms-trust,
.fms-trust *,
.fms-trust *::before,
.fms-trust *::after {
	box-sizing: border-box;
}

/* Own ground colour, so it needs the breakout pair: full width background,
   boxed content. See the note on the About section. */
.fms-trust {
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	background: var(--fms-trust-bg, var(--fms-mist, #EEF2F6));
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

.fms-trust__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
	padding-top: var(--fms-trust-pad-top, 0px);
}

/* Four separate cards rather than one divided block. */
.fms-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
	gap: 16px;
}

/* ---------- Statistic card ---------- */

.fms-trust__cell {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	padding: 26px;
	min-height: 190px;
	background: var(--fms-trust-card, var(--fms-white, #fff));
	border: 1px solid rgba(11, 42, 74, 0.14);
	border-radius: var(--fms-about-img-r, 12px);
}

/* The filled tile carries its own colour, so an outline would only muddy it. */
.fms-trust__cell--feature {
	border-color: transparent;
}

.fms-trust .fms-trust__label {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--fms-trust-label, #111111);
}

.fms-trust__number {
	font-size: clamp(2.25rem, 3.6vw, 3.25rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--fms-trust-number, var(--fms-navy, #0B2A4A));
	/* Keeps the width steady while the digits tick over. */
	font-variant-numeric: tabular-nums;
}

/* ---------- Feature tile ---------- */

.fms-trust__cell--feature {
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 12px;
	background: var(--fms-trust-tile, var(--fms-blue, #0F5FA8));
}

.fms-trust__icon {
	display: block;
	width: 34px;
	height: 34px;
	background-color: var(--fms-trust-tile-text, var(--fms-white, #fff));
	-webkit-mask-image: var(--fms-trust-icon);
	mask-image: var(--fms-trust-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-trust .fms-trust__feature-title {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--fms-trust-tile-text, var(--fms-white, #fff));
}

.fms-trust .fms-trust__feature-desc {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--fms-trust-tile-text, var(--fms-white, #fff));
	opacity: 0.8;
	max-width: 30ch;
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-trust__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.fms-trust__cell {
		min-height: 165px;
		padding: 22px;
	}

	/* Centred reads well as the last cell of a four-across row. Once the grid
	   folds, the tile is stacked under the statistics and should line up with
	   them instead. */
	.fms-trust__cell--feature {
		align-items: flex-start;
		text-align: left;
	}

	.fms-trust .fms-trust__feature-desc {
		max-width: none;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-trust__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.fms-trust__cell {
		min-height: 0;
		gap: 16px;
		padding: 22px 20px;
	}

	.fms-trust__cell--feature {
		padding: 28px 20px;
	}
}


/* ==========================================================================
   Product — heading row and a peek carousel with an oversized leading slide
   ========================================================================== */

.fms-product,
.fms-product *,
.fms-product *::before,
.fms-product *::after {
	box-sizing: border-box;
}

/* Same breakout pair as the sections above: the ground colour runs the full
   width while the content stays boxed. The clip is what lets the slides spill
   past 1340px without giving the page a horizontal scrollbar. */
.fms-product {
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	background: var(--fms-product-bg, var(--fms-white, #fff));
	overflow: hidden;
	font-style: normal;
	text-transform: none;
	text-shadow: none;

	--fms-slide-w: 320px;
	--fms-slide-active-w: 480px;
	--fms-slide-gap: 24px;
	--fms-slide-media-h: 260px;
	--fms-slide-media-active-h: 340px;
	--fms-slide-media-pad: 26px;
	--fms-slide-meta-h: 96px;
}

.fms-product__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
}

/* ---------- Top container ---------- */

.fms-product__head {
	margin-bottom: 48px;
}

.fms-product .fms-product__label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 22px;
	padding: 9px 16px;
	border-radius: 100px;
	background: var(--fms-mist, #EEF2F6);
	border: 1px solid rgba(11, 42, 74, 0.08);
}

.fms-product--dark .fms-product__label {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.18);
}

/* Sizing only; the cube artwork is defined alongside the hero mark above. */
.fms-product__mark {
	display: block;
	width: 17px;
	height: 17px;
	flex: none;
	background-image: var(--fms-mark-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.fms-product .fms-product__label-text {
	font-size: var(--fms-eyebrow-size, 16px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #000;
}

.fms-product--dark .fms-product__label-text {
	color: #fff;
}

/* Heading and supporting copy share one row, so the copy sits beside the
   heading rather than beneath it. */
.fms-product__intro {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: 24px 48px;
	align-items: end;
}

.fms-product .fms-product__title {
	margin: 0;
	font-style: normal;
	font-size: var(--fms-about-title, 40px);
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: #000;
	text-wrap: balance;
}

.fms-product--dark .fms-product__title {
	color: #fff;
}

.fms-product .fms-product__desc {
	margin: 0;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	color: #000;
}

.fms-product--dark .fms-product__desc {
	color: rgba(255, 255, 255, 0.82);
}

/* ---------- Carousel ---------- */

/* The row runs the full width of the screen rather than the boxed column,
   so the active slide can sit in the middle of the screen with the others
   falling away on both sides. Visible overflow is the point; the clip on the
   section is what cuts the row off at the edges.

   The height is pinned rather than left to the tallest slide. Mid-step the
   outgoing slide is shrinking while the incoming one grows, so the natural
   height would dip for the length of the transition and drag the navigation
   up with it. */
.fms-product__viewport {
	width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	overflow: visible;
	height: calc(var(--fms-slide-media-active-h, 340px) + var(--fms-slide-meta-h, 96px));
}

.fms-product__track {
	display: flex;
	align-items: flex-start;
	gap: var(--fms-slide-gap, 24px);
	will-change: transform;
}

/* The resting position: the active slide centred on the screen, with one
   slide parked to its left so the row bleeds off that edge too. A rotation of
   the same slides, not a copy. The script animates away from this and then
   clears its inline transform to come back to it. */
.fms-product__track.has-lead {
	transform: translate3d(
		calc(
			(var(--fms-vw, 100vw) - var(--fms-slide-active-w, 480px)) / 2
			- var(--fms-slide-leads, 1) * (var(--fms-slide-w, 320px) + var(--fms-slide-gap, 24px))
		), 0, 0
	);
}

/* The step and the width change run on the same curve, so the incoming slide
   travels smoothly even though two properties are moving at once. */
.fms-product__track,
.fms-product__slide,
.fms-product__media {
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
		width 0.7s cubic-bezier(0.4, 0, 0.2, 1),
		height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.fms-product__track.is-instant,
.fms-product__track.is-instant .fms-product__slide,
.fms-product__track.is-instant .fms-product__media {
	transition: none;
}

.fms-product__slide {
	position: relative;
	flex: 0 0 auto;
	width: var(--fms-slide-w, 340px);
	background: transparent;
	border: 0;
	padding: 0;
}

.fms-product__slide.is-active {
	width: var(--fms-slide-active-w, 520px);
}

/* Only the picture panel is filled. The name, the note and the button sit
   below it on the section's own ground. */
.fms-product__media {
	position: relative;
	display: block;
	width: 100%;
	height: var(--fms-slide-media-h, 260px);
	/* Breathing room above and below the product, none on the right, which is
	   the edge it sits against. */
	padding: var(--fms-slide-media-pad, 26px) 0;
	border-radius: var(--fms-about-img-r, 12px);
	background: var(--fms-product-card, var(--fms-mist, #EEF2F6));
	overflow: hidden;
}

.fms-product__slide.is-active .fms-product__media {
	height: var(--fms-slide-media-active-h, 340px);
}

/* Darkening layer for the hover, kept out of pointer events so it never
   intercepts a click. */
.fms-product__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s ease;
}

.fms-product__slide:hover .fms-product__media::after,
.fms-product__slide:focus-within .fms-product__media::after {
	opacity: 0.14;
}

/* Contained rather than cropped, and pushed to the right edge of the panel,
   so the whole product is always in view with the empty space falling on the
   left. */
.fms-product__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right center;
	transition: transform 0.6s ease;
}

.fms-product__slide:hover .fms-product__img,
.fms-product__slide:focus-within .fms-product__img {
	transform: scale(1.06);
}

/* ---------- Name, note and button ---------- */

/* Fixed height for the same reason as the viewport: nothing below the row may
   shift while a slide is changing size. */
.fms-product__meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	height: var(--fms-slide-meta-h, 96px);
	padding-top: 18px;
}

.fms-product__text {
	min-width: 0;
}

/* Sentence case whatever the client types, so a name entered in capitals
   still reads the same as the rest. */
.fms-product .fms-product__name {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: lowercase;
	color: #000;
}

.fms-product .fms-product__name::first-letter {
	text-transform: uppercase;
}

.fms-product--dark .fms-product__name {
	color: #fff;
}

/* Held to two lines so every card reserves the same room. */
.fms-product .fms-product__note {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--fms-slate, #5A6B7B);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fms-product--dark .fms-product__note {
	color: rgba(255, 255, 255, 0.7);
}

.fms-product__btn {
	flex: none;
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	padding: 13px 22px;
	border-radius: var(--fms-btn-radius, 8px);
	border: 1px solid var(--fms-navy, #0B2A4A);
	background: transparent;
	color: var(--fms-navy, #0B2A4A);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.fms-product__btn:hover,
.fms-product__btn:focus-visible {
	background: var(--fms-navy, #0B2A4A);
	color: #fff;
	text-decoration: none;
}

.fms-product__btn:focus-visible {
	outline: 2px solid var(--fms-cyan, #00AEEF);
	outline-offset: 3px;
}

.fms-product--dark .fms-product__btn {
	border-color: #fff;
	color: #fff;
}

.fms-product--dark .fms-product__btn:hover,
.fms-product--dark .fms-product__btn:focus-visible {
	background: #fff;
	color: var(--fms-navy, #0B2A4A);
}

/* ---------- Navigation ---------- */

.fms-product__nav {
	display: flex;
	/* One arrow against each edge of the boxed row. */
	justify-content: space-between;
	gap: 12px;
	padding-top: 36px;
}

.fms-product__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border-radius: 100px;
	border: 1px solid var(--fms-navy, #0B2A4A);
	background: transparent;
	color: var(--fms-navy, #0B2A4A);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.fms-product__arrow svg {
	width: 20px;
	height: 20px;
	display: block;
}

.fms-product__arrow:hover,
.fms-product__arrow:focus-visible {
	background: var(--fms-navy, #0B2A4A);
	color: #fff;
}

.fms-product__arrow:focus-visible {
	outline: 2px solid var(--fms-cyan, #00AEEF);
	outline-offset: 3px;
}

.fms-product--dark .fms-product__arrow {
	border-color: #fff;
	color: #fff;
}

.fms-product--dark .fms-product__arrow:hover,
.fms-product--dark .fms-product__arrow:focus-visible {
	background: #fff;
	color: var(--fms-navy, #0B2A4A);
}

@media (prefers-reduced-motion: reduce) {
	.fms-product__track,
	.fms-product__slide,
	.fms-product__media,
	.fms-product__media::after,
	.fms-product__img {
		transition: none;
	}
	.fms-product__slide:hover .fms-product__img,
	.fms-product__slide:focus-within .fms-product__img {
		transform: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-product {
		--fms-slide-w: 260px;
		--fms-slide-active-w: 370px;
		--fms-slide-gap: 20px;
		--fms-slide-media-h: 210px;
		--fms-slide-media-active-h: 275px;
		--fms-slide-media-pad: 22px;
		--fms-slide-meta-h: 96px;
	}

	.fms-product__head {
		margin-bottom: 36px;
	}

	.fms-product__intro {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		align-items: start;
	}

	.fms-product .fms-product__title {
		font-size: var(--fms-about-title-t, 32px);
	}

	.fms-product .fms-product__desc {
		font-size: 16px;
	}

	.fms-product__nav {
		padding-top: 28px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	/* One card at a time with the next one peeking in. Sized off the real
	   viewport width so the peek is the same whatever the scrollbar does. */
	.fms-product {
		--fms-slide-w: calc(var(--fms-vw, 100vw) - 70px);
		--fms-slide-active-w: calc(var(--fms-vw, 100vw) - 70px);
		--fms-slide-gap: 14px;
		--fms-slide-media-h: 235px;
		--fms-slide-media-active-h: 235px;
		--fms-slide-media-pad: 20px;
		--fms-slide-meta-h: 100px;
	}

	.fms-product__head {
		margin-bottom: 28px;
	}

	.fms-product .fms-product__label {
		margin-bottom: 18px;
		padding: 7px 13px;
	}

	.fms-product .fms-product__label-text {
		font-size: 13px;
	}

	.fms-product .fms-product__title {
		font-size: var(--fms-about-title-m, 26px);
		line-height: 1.22;
	}

	.fms-product .fms-product__desc {
		font-size: 15px;
	}

	.fms-product__btn {
		padding: 12px 18px;
	}

	.fms-product__nav {
		padding-top: 24px;
	}

	.fms-product__arrow {
		width: 48px;
		height: 48px;
	}
}

/* ==========================================================================
   Service — centred heading over a four-column mosaic of photographs and
   icon cards
   ========================================================================== */

.fms-service,
.fms-service *,
.fms-service *::before,
.fms-service *::after {
	box-sizing: border-box;
}

/* Own ground colour, so it needs the breakout pair: full width background,
   boxed content. See the note on the About section. */
.fms-service {
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	background: var(--fms-service-bg, var(--fms-mist, #EEF2F6));
	font-style: normal;
	text-transform: none;
	text-shadow: none;

	--fms-service-cell: 250px;
}

.fms-service__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
}

/* ---------- Top container ---------- */

.fms-service__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 48px;
}

.fms-service .fms-service__label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 20px;
	padding: 9px 16px;
	border-radius: 100px;
	background: var(--fms-service-tint, var(--fms-mist, #EEF2F6));
	border: 1px solid rgba(11, 42, 74, 0.08);
}

.fms-service--dark .fms-service__label {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.18);
}

/* Sizing only; the cube artwork is defined alongside the hero mark above. */
.fms-service__mark {
	display: block;
	width: 17px;
	height: 17px;
	flex: none;
	background-image: var(--fms-mark-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.fms-service .fms-service__label-text {
	font-size: var(--fms-eyebrow-size, 16px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #000;
}

.fms-service--dark .fms-service__label-text {
	color: #fff;
}

.fms-service .fms-service__title {
	margin: 0;
	font-style: normal;
	font-size: var(--fms-about-title, 40px);
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: #000;
	/* Kept on one line: the wording is short enough that a balanced wrap
	   would split it for no reason. */
	text-wrap: nowrap;
}

.fms-service--dark .fms-service__title {
	color: #fff;
}

/* ---------- Mosaic ----------

   Four columns over two rows. The first photograph takes two of them and the
   fourth card takes two more, which leaves the second photograph a single
   column on the right. Everything else falls into place on its own, in the
   order it appears in the markup. */

.fms-service__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.fms-service__media--wide,
.fms-service__box--wide {
	grid-column: span 2;
}

/* ---------- Photographs ---------- */

.fms-service__media {
	position: relative;
	display: block;
	min-height: var(--fms-service-cell, 300px);
	border-radius: var(--fms-about-img-r, 12px);
	overflow: hidden;
}

/* Darkening layer for the hover, kept above the image and out of pointer
   events so it never intercepts a click. */
.fms-service__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s ease;
}

.fms-service__media:hover::after {
	opacity: 0.18;
}

/* Taken out of the flow so the photograph's own proportions cannot set the
   height of the row. The cells decide that between them, and the picture
   fills whatever it is given. */
.fms-service__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.6s ease;
}

.fms-service__media:hover .fms-service__img {
	transform: scale(1.06);
}

/* ---------- Icon cards ----------

   Icon at the top, wording at the bottom, the space between them left to the
   height of the cell. Hovering swaps the card's two colours over. */

.fms-service__box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	min-height: var(--fms-service-cell, 300px);
	padding: 26px;
	border-radius: var(--fms-about-img-r, 12px);
	background: var(--fms-service-card, var(--fms-white, #fff));
	border: 1px solid rgba(11, 42, 74, 0.1);
	transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* ---------- The card's own marks ----------

   A ghosted number opposite the icon, which stops the four cards reading as
   identical boxes and ties this grid to the numbered steps further down the
   page. */

.fms-service__box-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.fms-service__num {
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: rgba(11, 42, 74, 0.11);
	transition: color 0.35s ease;
}

.fms-service__box:hover .fms-service__num,
.fms-service__box:focus-within .fms-service__num {
	color: rgba(255, 255, 255, 0.22);
}

.fms-service__box:hover,
.fms-service__box:focus-within {
	background: var(--fms-service-hover, var(--fms-navy, #0B2A4A));
	border-color: var(--fms-service-hover, var(--fms-navy, #0B2A4A));
}

.fms-service__icon {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	flex: none;
	border-radius: 100px;
	background: var(--fms-service-circle, var(--fms-white, #fff));
	transition: background-color 0.35s ease;
}

.fms-service__box:hover .fms-service__icon,
.fms-service__box:focus-within .fms-service__icon {
	background: rgba(255, 255, 255, 0.14);
}

/* Recoloured through a mask so the glyph can flip with the card. */
.fms-service__icon::before {
	content: '';
	display: block;
	width: 26px;
	height: 26px;
	background-color: var(--fms-service-icon, var(--fms-navy, #0B2A4A));
	-webkit-mask-image: var(--fms-service-glyph);
	mask-image: var(--fms-service-glyph);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color 0.35s ease;
}

.fms-service__box:hover .fms-service__icon::before,
.fms-service__box:focus-within .fms-service__icon::before {
	background-color: var(--fms-service-hover-text, #fff);
}

.fms-service .fms-service__box-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #000;
	transition: color 0.35s ease;
}

.fms-service .fms-service__box-desc {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--fms-slate, #5A6B7B);
	max-width: 42ch;
	transition: color 0.35s ease;
}

.fms-service__box:hover .fms-service__box-title,
.fms-service__box:focus-within .fms-service__box-title {
	color: var(--fms-service-hover-text, #fff);
}

.fms-service__box:hover .fms-service__box-desc,
.fms-service__box:focus-within .fms-service__box-desc {
	color: var(--fms-service-hover-text, #fff);
	opacity: 0.82;
}

/* ---------- Card button ----------

   Filled at rest and inverted once the card turns over, since the card takes
   the button's own colour on hover and the two would otherwise merge. */

.fms-service__btn {
	display: inline-block;
	margin-top: 18px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 12px 20px;
	border-radius: var(--fms-btn-radius, 8px);
	border: 1px solid var(--fms-service-btn, var(--fms-navy, #0B2A4A));
	background: var(--fms-service-btn, var(--fms-navy, #0B2A4A));
	color: var(--fms-service-btn-ink, #fff);
	text-decoration: none;
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.fms-service__btn:hover,
.fms-service__btn:focus-visible {
	text-decoration: none;
}

.fms-service__box:hover .fms-service__btn,
.fms-service__box:focus-within .fms-service__btn {
	background: var(--fms-service-hover-text, #fff);
	border-color: var(--fms-service-hover-text, #fff);
	color: var(--fms-service-hover, var(--fms-navy, #0B2A4A));
}

.fms-service__btn:focus-visible {
	outline: 2px solid var(--fms-cyan, #00AEEF);
	outline-offset: 3px;
}

@media@media (prefers-reduced-motion: reduce) {
	.fms-service__box,
	.fms-service__btn,
	.fms-service__icon,
	.fms-service__icon::before,
	.fms-service__box-title,
	.fms-service__box-desc,
	.fms-service__media::after,
	.fms-service__img {
		transition: none;
	}
	.fms-service__media:hover .fms-service__img {
		transform: none;
	}
}

/* ---------- Tablet ---------- */

/* Two across. Each photograph takes the full row and the cards pair off, so
   nothing is left with an empty cell beside it. */
@media (max-width: 1024px) {
	.fms-service {
		--fms-service-cell: 210px;
	}

	.fms-service__head {
		margin-bottom: 36px;
	}

	.fms-service .fms-service__title {
		font-size: var(--fms-about-title-t, 32px);
	}

	.fms-service__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.fms-service__media,
	.fms-service__media--wide {
		grid-column: span 2;
	}

	.fms-service__box--wide {
		grid-column: span 1;
	}

	.fms-service__box {
		padding: 22px;
	}

	/* The lower photograph sits shorter than the upper one once they are
	   stacked, so the run of cards is not bracketed by two equal slabs. */
	.fms-service__media--wide {
		min-height: 280px;
	}

	.fms-service__media--narrow {
		min-height: 200px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-service {
		--fms-service-cell: 0px;
	}

	.fms-service__head {
		margin-bottom: 28px;
	}

	.fms-service .fms-service__label {
		margin-bottom: 16px;
		padding: 7px 13px;
	}

	.fms-service .fms-service__label-text {
		font-size: 13px;
	}

	.fms-service .fms-service__title {
		font-size: var(--fms-about-title-m, 26px);
		line-height: 1.22;
		/* Too long to hold on one line at this width. */
		text-wrap: balance;
	}

	.fms-service__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.fms-service__media,
	.fms-service__media--wide,
	.fms-service__box--wide {
		grid-column: span 1;
	}

	.fms-service__media--wide {
		min-height: 240px;
	}

	.fms-service__media--narrow {
		min-height: 170px;
	}

	.fms-service__box {
		gap: 20px;
		padding: 22px 20px;
	}

	.fms-service__icon {
		width: 52px;
		height: 52px;
	}

	.fms-service__icon::before {
		width: 24px;
		height: 24px;
	}
}

/* ==========================================================================
   Process — a video panel that holds still while the steps travel across it
   ========================================================================== */

.fms-process,
.fms-process *,
.fms-process *::before,
.fms-process *::after {
	box-sizing: border-box;
}

/* Small viewport units where they exist, so the panel is not taller than a
   phone's visible area once the browser chrome is counted. */
.fms-process {
	--fms-process-vh: 100vh;
}

@supports (height: 100svh) {
	.fms-process {
		--fms-process-vh: 100svh;
	}
}

/* Full width background, boxed content. No clip here: overflow:hidden on an
   ancestor turns it into a scroll container and the sticky panel inside stops
   sticking. The clip lives on the panel itself. */
.fms-process {
	position: relative;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	background: var(--fms-navy, #0B2A4A);
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

/* One screen tall, and never less. The vertical rhythm is measured against
   the height of the screen rather than fixed, so the whole panel still fits a
   short laptop instead of running off the bottom. min-height rather than
   height, so unusually long wording lengthens the panel instead of being cut
   off by the clip. */
.fms-process__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: var(--fms-process-vh, 100vh);
	overflow: hidden;
	padding: clamp(56px, 10vh, 120px) 0 clamp(36px, 7vh, 80px);
	gap: clamp(20px, 4vh, 40px);
}

/* ---------- Background ---------- */

.fms-process__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.fms-process__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border: 0;
}

.fms-process__overlay {
	position: absolute;
	inset: 0;
	display: block;
	background: #000;
	opacity: var(--fms-process-overlay, 0.6);
	pointer-events: none;
}

/* ---------- Top container ---------- */

.fms-process__head {
	position: relative;
	z-index: 1;
	flex: none;
}

.fms-process__head-inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding-inline: var(--fms-pad-x, 40px);
}

.fms-process .fms-process__label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 24px;
	padding: 9px 16px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Sizing only; the cube artwork is defined alongside the hero mark above. */
.fms-process__mark {
	display: block;
	width: 17px;
	height: 17px;
	flex: none;
	background-image: var(--fms-mark-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.fms-process .fms-process__label-text {
	font-size: var(--fms-eyebrow-size, 16px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}

.fms-process .fms-process__title {
	margin: 0 0 clamp(12px, 2vh, 18px);
	max-width: 22ch;
	font-style: normal;
	font-size: var(--fms-about-title, 40px);
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: #fff;
	text-wrap: balance;
}

.fms-process .fms-process__desc {
	margin: 0 0 clamp(18px, 3vh, 30px);
	max-width: 68ch;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
}

/* Same translucent treatment as the hero button, which also sits over video. */
.fms-process__btn {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	padding: 16px 32px;
	border-radius: var(--fms-btn-radius, 8px);
	border: 1px solid transparent;
	background: var(--fms-process-btn, #00AEEF);
	background: color-mix(in srgb, var(--fms-process-btn, #00AEEF) var(--fms-btn-alpha, 45%), transparent);
	color: #fff;
	text-decoration: none;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.fms-process__btn:hover,
.fms-process__btn:focus-visible {
	background: var(--fms-process-btn, #00AEEF);
	background: color-mix(in srgb, var(--fms-process-btn, #00AEEF) var(--fms-btn-alpha-hover, 58%), transparent);
	border-color: var(--fms-process-btn, #00AEEF);
	color: #fff;
	text-decoration: none;
}

.fms-process__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---------- Steps ---------- */

.fms-process__rail {
	position: relative;
	z-index: 1;
	flex: none;
}

/* Top aligned, so the number and the rule below it land at the same height on
   every step. Bottom aligning let a longer description push them up, and the
   rule visibly moved from one step to the next. */
.fms-process__track {
	display: flex;
	align-items: flex-start;
}

/* Each step owns a full screen, so the one leaving clears the edge entirely
   before the next settles into its place. The content inside is boxed, so it
   still lines up with every other section. */
.fms-process__step {
	flex: 0 0 var(--fms-vw, 100vw);
	width: var(--fms-vw, 100vw);
}

.fms-process__slot {
	display: flex;
	flex-direction: column;
	gap: 26px;
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding-inline: var(--fms-pad-x, 40px);
}

.fms-process .fms-process__num {
	margin: 0;
	font-style: normal;
	font-size: clamp(2.75rem, 5vw, 4.5rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--fms-process-num, var(--fms-cyan, #00AEEF));
}

.fms-process__body {
	max-width: 46ch;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.fms-process .fms-process__step-title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #fff;
}

.fms-process .fms-process__step-desc {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
}

/* ---------- The travel ----------

   Only switched on once the script has confirmed ScrollTrigger is available
   and the visitor has not asked for reduced motion. Until then the steps are
   an ordinary row that can be scrolled sideways by hand, so the content is
   always reachable. */

.fms-process:not(.fms-process--scrolly) .fms-process__rail {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.fms-process:not(.fms-process--scrolly) .fms-process__step {
	flex-basis: min(520px, 86vw);
	width: min(520px, 86vw);
}

.fms-process:not(.fms-process--scrolly) .fms-process__slot {
	margin-inline: 0;
	padding-inline: 0;
}

.fms-process:not(.fms-process--scrolly) .fms-process__track {
	gap: 40px;
	padding-inline: var(--fms-pad-x, 40px);
}

/* The panel is held by the script, which pins it and inserts the runway the
   steps travel over. Sticky would have been simpler, but the theme puts
   overflow:hidden on a wrapper above this section, and that quietly stops a
.fms-process--scrolly .fms-process__track {
	will-change: transform;
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-process__stage {
		padding: var(--fms-pad-y, 60px) 0;
		gap: 32px;
	}

	.fms-process__head-inner,
	.fms-process__slot {
		padding-inline: var(--fms-pad-x, 20px);
	}

	.fms-process .fms-process__title {
		font-size: var(--fms-about-title-t, 32px);
		max-width: 26ch;
	}

	.fms-process .fms-process__desc {
		font-size: 16px;
		max-width: none;
	}

	.fms-process__slot {
		gap: 20px;
	}

	.fms-process__body {
		padding-top: 18px;
	}

	.fms-process:not(.fms-process--scrolly) .fms-process__track {
		padding-inline: var(--fms-pad-x, 20px);
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-process__stage {
		padding: var(--fms-pad-y, 40px) 0;
		gap: 28px;
	}

	.fms-process__head-inner,
	.fms-process__slot {
		padding-inline: var(--fms-pad-x, 15px);
	}

	.fms-process .fms-process__label {
		margin-bottom: 18px;
		padding: 7px 13px;
	}

	.fms-process .fms-process__label-text {
		font-size: 13px;
	}

	.fms-process .fms-process__title {
		font-size: var(--fms-about-title-m, 26px);
		line-height: 1.22;
		max-width: none;
	}

	.fms-process .fms-process__desc {
		font-size: 15px;
		line-height: 1.65;
	}

	.fms-process__btn {
		padding: 15px 26px;
	}

	.fms-process .fms-process__num {
		font-size: 2.5rem;
	}

	.fms-process .fms-process__step-title {
		font-size: 18px;
	}

	.fms-process .fms-process__step-desc {
		font-size: 14px;
	}

	.fms-process:not(.fms-process--scrolly) .fms-process__track {
		gap: 24px;
		padding-inline: var(--fms-pad-x, 15px);
	}
}

/* ---------- Short screens ----------

   The panel is one screen tall and has to hold the wording, the button and a
   step all at once, so on a laptop with little vertical room everything steps
   down a size rather than spilling past the bottom edge. Keyed to the height
   of the screen, not its width, because that is what actually runs out. */

@media (min-width: 768px) and (max-height: 860px) {
	.fms-process .fms-process__num {
		font-size: clamp(2rem, 5.4vh, 3.25rem);
	}

	.fms-process__slot {
		gap: clamp(14px, 2.6vh, 26px);
	}

	.fms-process__body {
		padding-top: clamp(12px, 2vh, 22px);
	}

	.fms-process__btn {
		padding: 13px 26px;
	}
}

@media (min-width: 768px) and (max-height: 700px) {
	.fms-process .fms-process__label {
		margin-bottom: 14px;
		padding: 7px 13px;
	}

	.fms-process .fms-process__label-text {
		font-size: 13px;
	}

	.fms-process .fms-process__step-title {
		font-size: 18px;
	}

	.fms-process .fms-process__step-desc {
		font-size: 14px;
	}
}

/* The right-hand column the call to action and the footer share, so the two
   line up down the page: the wording and buttons in one sit directly above the
   links and address in the other. Changing it here moves both. */
:root {
	--fms-rail: 460px;
}

@media (max-width: 1024px) {
	:root {
		--fms-rail: 380px;
	}
}

/* ==========================================================================
   CTA — closing question on the deep ground, with the two ways to get in touch
   ========================================================================== */

.fms-cta,
.fms-cta *,
.fms-cta *::before,
.fms-cta *::after {
	box-sizing: border-box;
}

/* Own ground colour, so it needs the breakout pair: full width background,
   boxed content. See the note on the About section. */
.fms-cta {
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	background: var(--fms-cta-bg, var(--fms-navy, #0B2A4A));
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

.fms-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	/* A little deeper than the standard scale, top and bottom, so the
	   closing question is not crowded by the sections either side. */
	padding: calc(var(--fms-pad-y, 80px) + 20px) var(--fms-pad-x, 40px);
}

.fms-cta .fms-cta__label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 24px;
	padding: 9px 16px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

.fms-cta--light .fms-cta__label {
	background: rgba(11, 42, 74, 0.06);
	border-color: rgba(11, 42, 74, 0.12);
}

/* Sizing only; the cube artwork is defined alongside the hero mark above. */
.fms-cta__mark {
	display: block;
	width: 17px;
	height: 17px;
	flex: none;
	background-image: var(--fms-mark-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.fms-cta .fms-cta__label-text {
	font-size: var(--fms-eyebrow-size, 16px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}

.fms-cta--light .fms-cta__label-text {
	color: #000;
}

.fms-cta .fms-cta__title {
	margin: 0 0 36px;
	max-width: 22ch;
	font-style: normal;
	font-size: var(--fms-about-title, 40px);
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: #fff;
	text-wrap: balance;
}

.fms-cta--light .fms-cta__title {
	color: #000;
}

/* ---------- Buttons ---------- */

.fms-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* Solid fills rather than the translucent treatment the hero uses: there is
   no photograph behind these, and the two logo colours are the point. */
.fms-cta__btn {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	padding: 17px 34px;
	border-radius: var(--fms-btn-radius, 8px);
	border: 1px solid transparent;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.fms-cta__btn--1 {
	background: var(--fms-cta-btn1, var(--fms-blue, #0F5FA8));
	border-color: var(--fms-cta-btn1, var(--fms-blue, #0F5FA8));
	color: var(--fms-cta-btn1-ink, #fff);
}

.fms-cta__btn--2 {
	background: var(--fms-cta-btn2, var(--fms-blue, #0F5FA8));
	border-color: var(--fms-cta-btn2, var(--fms-blue, #0F5FA8));
	color: var(--fms-cta-btn2-ink, #fff);
}

/* The same hover as the header button: the fill darkens to a deeper shade of
   its own colour. The solid declaration is the fallback for browsers without
   color-mix; the one after it wins everywhere else. */
.fms-cta__btn--1:hover,
.fms-cta__btn--1:focus-visible {
	background: var(--fms-cta-btn1, var(--fms-blue, #0F5FA8));
	background: color-mix(in srgb, var(--fms-cta-btn1, var(--fms-blue, #0F5FA8)) var(--fms-btn-keep, 78%), #000);
	border-color: transparent;
	color: var(--fms-cta-btn1-ink, #fff);
	text-decoration: none;
}

.fms-cta__btn--2:hover,
.fms-cta__btn--2:focus-visible {
	background: var(--fms-cta-btn2, var(--fms-blue, #0F5FA8));
	background: color-mix(in srgb, var(--fms-cta-btn2, var(--fms-blue, #0F5FA8)) var(--fms-btn-keep, 78%), #000);
	border-color: transparent;
	color: var(--fms-cta-btn2-ink, #fff);
	text-decoration: none;
}

.fms-cta__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.fms-cta--light .fms-cta__btn:focus-visible {
	outline-color: var(--fms-navy, #0B2A4A);
}

@media (prefers-reduced-motion: reduce) {
	.fms-cta__btn {
		transition: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-cta .fms-cta__title {
		font-size: var(--fms-about-title-t, 32px);
		max-width: 26ch;
		margin-bottom: 30px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-cta .fms-cta__label {
		margin-bottom: 18px;
		padding: 7px 13px;
	}

	.fms-cta .fms-cta__label-text {
		font-size: 13px;
	}

	.fms-cta .fms-cta__title {
		font-size: var(--fms-about-title-m, 26px);
		line-height: 1.22;
		max-width: none;
		margin-bottom: 26px;
	}

	/* Stacked and full width, so neither reads as the lesser of the two. */
	.fms-cta__actions {
		flex-direction: column;
		align-self: stretch;
		gap: 12px;
	}

	.fms-cta__btn {
		padding: 16px 26px;
		text-align: center;
	}
}

/* ==========================================================================
   Footer — brand and call to action against the details, then the social
   links and the copyright line
   ========================================================================== */

.fms-footer,
.fms-footer *,
.fms-footer *::before,
.fms-footer *::after {
	box-sizing: border-box;
}

/* Full width ground, boxed content, the same pair every section above uses. */
.fms-footer {
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	background: var(--fms-footer-bg, var(--fms-extra-3, #111111));
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

.fms-footer__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
}

/* ---------- Top container ---------- */

.fms-footer__rule {
	display: block;
	height: 1px;
	width: 100%;
	background: rgba(255, 255, 255, 0.16);
	margin-bottom: 46px;
}

.fms-footer--light .fms-footer__rule {
	background: rgba(11, 42, 74, 0.16);
}

.fms-footer__cols {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
	flex-wrap: wrap;
}

/* ---------- Brand and call to action ---------- */

.fms-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
	min-width: 0;
}

.fms-footer__logo {
	display: inline-flex;
	line-height: 0;
	text-decoration: none;
}

.fms-footer__logo img {
	display: block;
	width: auto;
	height: auto;
	max-height: var(--fms-footer-logo-h, 46px);
	max-width: 100%;
}

.fms-footer__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.fms-footer .fms-footer__cta-title {
	margin: 0;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #fff;
}

.fms-footer--light .fms-footer__cta-title {
	color: #000;
}

.fms-footer__btn {
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	padding: 14px 24px;
	border-radius: var(--fms-btn-radius, 8px);
	border: 1px solid transparent;
	background: var(--fms-footer-btn, var(--fms-blue, #0F5FA8));
	color: var(--fms-footer-btn-ink, #fff);
	text-decoration: none;
	transition: background-color 0.25s ease;
}

/* The same hover as the header and the closing call to action: the fill
   darkens to a deeper shade of its own colour. */
.fms-footer__btn:hover,
.fms-footer__btn:focus-visible {
	background: var(--fms-footer-btn, var(--fms-blue, #0F5FA8));
	background: color-mix(in srgb, var(--fms-footer-btn, var(--fms-blue, #0F5FA8)) var(--fms-btn-keep, 78%), #000);
	color: var(--fms-footer-btn-ink, #fff);
	text-decoration: none;
}

.fms-footer__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---------- Address, menu and contact ---------- */

/* Pushed against the right edge, with the three blocks reading left to
   right between themselves. */
.fms-footer__info {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 56px;
	margin-left: auto;
	flex-wrap: wrap;
}

.fms-footer__block {
	min-width: 0;
}

.fms-footer .fms-footer__block-title {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.fms-footer--light .fms-footer__block-title {
	color: rgba(11, 42, 74, 0.6);
}

.fms-footer__address {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	max-width: 26ch;
	transition: color 0.25s ease;
}

.fms-footer__address:hover,
.fms-footer__address:focus-visible {
	color: #fff;
	text-decoration: none;
}

.fms-footer--light .fms-footer__address {
	color: rgba(11, 42, 74, 0.8);
}

.fms-footer--light .fms-footer__address:hover {
	color: #000;
}

/* ---------- Menu ---------- */

.fms-footer .fms-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.fms-footer .fms-footer__menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-footer .fms-footer__menu a {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	transition: color 0.25s ease;
}

.fms-footer .fms-footer__menu a:hover,
.fms-footer .fms-footer__menu a:focus-visible {
	color: #fff;
	text-decoration: none;
}

.fms-footer--light .fms-footer__menu a {
	color: rgba(11, 42, 74, 0.8);
}

.fms-footer--light .fms-footer__menu a:hover {
	color: #000;
}

/* ---------- Contact ---------- */

.fms-footer .fms-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
}

.fms-footer .fms-footer__contact li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-footer .fms-footer__contact a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

.fms-footer .fms-footer__contact a:hover,
.fms-footer .fms-footer__contact a:focus-visible {
	color: #fff;
	text-decoration: none;
}

.fms-footer--light .fms-footer__contact {
	color: rgba(11, 42, 74, 0.8);
}

.fms-footer--light .fms-footer__contact a:hover {
	color: #000;
}

/* ---------- Bottom container ---------- */

.fms-footer__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-top: 56px;
}

.fms-footer__social {
	min-width: 0;
}

.fms-footer .fms-footer__icons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.fms-footer .fms-footer__icons li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Outlined tiles. The glyph is a mask so it takes the outline's colour
   rather than whatever is baked into the file. */
.fms-footer__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--fms-btn-radius, 8px);
	border: 1px solid rgba(255, 255, 255, 0.24);
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.fms-footer__icon::before {
	content: '';
	display: block;
	width: 17px;
	height: 17px;
	background-color: rgba(255, 255, 255, 0.82);
	-webkit-mask-image: var(--fms-footer-glyph);
	mask-image: var(--fms-footer-glyph);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color 0.25s ease;
}

.fms-footer__icon:hover,
.fms-footer__icon:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.5);
}

.fms-footer__icon:hover::before,
.fms-footer__icon:focus-visible::before {
	background-color: #fff;
}

.fms-footer__icon:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.fms-footer--light .fms-footer__icon {
	border-color: rgba(11, 42, 74, 0.24);
}

.fms-footer--light .fms-footer__icon::before {
	background-color: rgba(11, 42, 74, 0.8);
}

.fms-footer--light .fms-footer__icon:hover {
	background: rgba(11, 42, 74, 0.06);
	border-color: rgba(11, 42, 74, 0.5);
}

.fms-footer--light .fms-footer__icon:hover::before {
	background-color: #000;
}

.fms-footer .fms-footer__copy {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.5);
	text-align: right;
}

.fms-footer--light .fms-footer__copy {
	color: rgba(11, 42, 74, 0.6);
}

@media (prefers-reduced-motion: reduce) {
	.fms-footer__btn,
	.fms-footer__address,
	.fms-footer__icon,
	.fms-footer__icon::before,
	.fms-footer .fms-footer__menu a,
	.fms-footer .fms-footer__contact a {
		transition: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-footer__rule {
		margin-bottom: 36px;
	}

	.fms-footer__cols {
		gap: 40px;
	}

	.fms-footer__info {
		gap: 40px;
		/* Once it wraps under the brand it should read from the left like
		   everything else, rather than hanging off the right edge. */
		margin-left: 0;
		justify-content: flex-start;
		width: 100%;
	}

	.fms-footer__bottom {
		margin-top: 44px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-footer__rule {
		margin-bottom: 28px;
	}

	.fms-footer__cols {
		flex-direction: column;
		gap: 32px;
	}

	.fms-footer__brand {
		gap: 20px;
		width: 100%;
	}

	.fms-footer__cta {
		gap: 14px;
	}

	.fms-footer .fms-footer__cta-title {
		font-size: 17px;
	}

	.fms-footer__info {
		flex-direction: column;
		gap: 28px;
	}

	.fms-footer__address {
		max-width: none;
	}

	.fms-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		margin-top: 36px;
	}

	.fms-footer .fms-footer__copy {
		text-align: left;
	}
}

/* ---------- Service card marks, smaller screens ---------- */

@media (max-width: 1024px) {
	.fms-service__num {
		font-size: 34px;
	}
}

@media (max-width: 767px) {
	.fms-service__num {
		font-size: 30px;
	}
}

/* ==========================================================================
   Overlay header — translucent bar laid over the hero
   ========================================================================== */

.fms-topbar,
.fms-topbar *,
.fms-topbar *::before,
.fms-topbar *::after {
	box-sizing: border-box;
}

.fms-topbar {
	position: relative;
	z-index: 90;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	font-style: normal;
	text-transform: none;
	text-shadow: none;

	--fms-topbar-h: 58px;
}

/* Laid over whatever follows rather than pushing it down, which is what makes
   the hero run up behind it. */
.fms-topbar--sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fms-topbar--autohide.is-hidden {
	transform: translateY(-100%);
}

body.admin-bar .fms-topbar--sticky {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .fms-topbar--sticky {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .fms-topbar--sticky {
		top: 0;
	}
}

/* ---------- The bar ----------

   Frosted rather than solid, so the photograph behind it still reads. The
   lettering is black, so the white has to carry enough weight to hold it. */
.fms-topbar__inner {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 20px;
	min-height: var(--fms-topbar-h, 68px);
	/* Padding on both sides: the call to action is inset from the right edge
	   rather than cut into it. */
	padding-inline: var(--fms-pad-x, 40px);
	/* Solid first for browsers without color-mix, which would drop the line. */
	background: rgba(17, 17, 17, 0.55);
	background: color-mix(in srgb, var(--fms-topbar-bg, #111111) calc(var(--fms-topbar-bg-alpha, 0.55) * 100%), transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.fms-topbar__left {
	display: flex;
	align-items: center;
	gap: 26px;
	min-width: 0;
}

.fms-topbar__logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	line-height: 0;
	text-decoration: none;
}

.fms-topbar__logo img {
	display: block;
	width: auto;
	height: auto;
	max-height: var(--fms-topbar-logo-h, 26px);
	max-width: none;
}

/* Room above and below the mark, so it never sits against the bar's edges.
   On the link rather than the bar, so the call to action still runs the full
   height of the bar. */
.fms-topbar__logo {
	padding-block: 14px;
}

@media (max-width: 1024px) {
	.fms-topbar__logo {
		padding-block: 12px;
	}

	.fms-topbar__logo img {
		max-height: var(--fms-topbar-logo-h-t, var(--fms-topbar-logo-h, 26px));
	}
}

@media (max-width: 767px) {
	.fms-topbar__logo {
		padding-block: 10px;
	}

	.fms-topbar__logo img {
		max-height: var(--fms-topbar-logo-h-m, var(--fms-topbar-logo-h-t, var(--fms-topbar-logo-h, 26px)));
	}
}

/* The hairline between the mark and the menu. */
.fms-topbar__divider {
	display: block;
	width: 1px;
	align-self: stretch;
	margin: 14px 0;
	flex: none;
	background: rgba(0, 0, 0, 0.16);
}

.fms-topbar__nav {
	min-width: 0;
}

/* ---------- Menu along the bar ---------- */

.fms-topbar .fms-topbar__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 30px;
}

.fms-topbar .fms-topbar__menu li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-topbar .fms-topbar__menu a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: #000;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.25s ease;
}

.fms-topbar .fms-topbar__menu a:hover,
.fms-topbar .fms-topbar__menu a:focus-visible {
	color: var(--fms-topbar-hover, var(--fms-navy, #0B2A4A));
	text-decoration: none;
}

/* Chevron on anything with children, drawn rather than loaded. */
.fms-topbar .fms-topbar__menu .menu-item-has-children > a::after {
	content: '';
	width: 8px;
	height: 8px;
	flex: none;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

/* ---------- Drop-down from the bar ---------- */

.fms-topbar .fms-topbar__menu .sub-menu {
	position: absolute;
	top: calc(100% + 18px);
	left: -18px;
	z-index: 2;
	list-style: none;
	margin: 0;
	padding: 10px;
	min-width: 220px;
	border-radius: 6px;
	background: var(--fms-topbar-panel, #111111);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.fms-topbar .fms-topbar__menu li:hover > .sub-menu,
.fms-topbar .fms-topbar__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.fms-topbar .fms-topbar__menu .sub-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: 6px;
	color: rgba(255, 255, 255, 0.86);
	white-space: normal;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.fms-topbar .fms-topbar__menu .sub-menu a:hover,
.fms-topbar .fms-topbar__menu .sub-menu a:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

/* ---------- Right hand side ---------- */

.fms-topbar__right {
	display: flex;
	align-items: stretch;
	gap: 0;
	flex: none;
}

/* Its fill is the bar's own colour at a different strength, so it reads as
   part of the bar rather than a block dropped on top of it. It runs the full
   height of the bar, with no padding above or below it, and is inset only
   from the right edge. */
.fms-topbar__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 0 22px;
	border-radius: 0;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: #000;
	background: var(--fms-topbar-cta, rgba(255, 255, 255, 0.4));
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.fms-topbar__cta:hover,
.fms-topbar__cta:focus-visible {
	background: rgba(255, 255, 255, 0.7);
	color: var(--fms-topbar-hover, var(--fms-navy, #0B2A4A));
	text-decoration: none;
}

.fms-topbar__cta:focus-visible {
	outline: 2px solid var(--fms-topbar-hover, var(--fms-navy, #0B2A4A));
	outline-offset: -4px;
}

/* The supplied arrow is black artwork, so it is drawn as a mask and takes the
   colour of the lettering beside it rather than disappearing into the fill. */
.fms-topbar__cta-arrow {
	display: block;
	width: 16px;
	height: 16px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-image: var(--fms-topbar-arrow);
	mask-image: var(--fms-topbar-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform 0.25s ease;
}

.fms-topbar__cta:hover .fms-topbar__cta-arrow {
	transform: translateX(3px);
}

/* ---------- Toggle ---------- */

/* No fill of its own: it sits on the bar's own colour, like the call to
   action beside it. */

/* ==========================================================================
   Overlay header — its two states

   Over the hero the bar is dark and the wording white. It leaves the screen
   while the hero scrolls past, and comes back as a white bar with a hairline
   under it once the next section reaches the top. The script sets the class;
   everything below is what that class changes.
   ========================================================================== */

/* The two marks are stacked, and only one of them is shown at a time. */
.fms-topbar__logo {
	position: relative;
}

.fms-topbar__logo-img {
	transition: opacity 0.3s ease;
}

.fms-topbar__logo-img--stuck {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	opacity: 0;
}

.fms-topbar.is-stuck .fms-topbar__logo-img--over {
	opacity: 0;
}

.fms-topbar.is-stuck .fms-topbar__logo-img--stuck {
	opacity: 1;
}

/* ---------- Over the hero ---------- */

.fms-topbar .fms-topbar__menu a,
.fms-topbar .fms-topbar__cta {
	color: #fff;
}

/* The same hover in both states: the primary colour reads on the dark bar and
   on the white one, which a near-black navy would not. */
.fms-topbar .fms-topbar__menu a:hover,
.fms-topbar .fms-topbar__menu a:focus-visible {
	color: var(--fms-topbar-hover, var(--fms-blue, #0F5FA8));
}

.fms-topbar .fms-topbar__cta:hover,
.fms-topbar .fms-topbar__cta:focus-visible {
	background: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.fms-topbar.is-stuck .fms-topbar__menu a:hover,
.fms-topbar.is-stuck .fms-topbar__menu a:focus-visible {
	color: var(--fms-topbar-hover, var(--fms-navy, #0B2A4A));
}

.fms-topbar__divider {
	background: rgba(255, 255, 255, 0.28);
}

/* ---------- Stuck ---------- */

.fms-topbar.is-stuck .fms-topbar__inner {
	background: var(--fms-topbar-stuck, var(--fms-white, #ffffff));
	border-bottom: 1px solid rgba(17, 24, 33, 0.12);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.fms-topbar.is-stuck .fms-topbar__menu a {
	color: #101820;
}

.fms-topbar.is-stuck .fms-topbar__divider {
	background: rgba(17, 24, 33, 0.16);
}

.fms-topbar.is-stuck .fms-topbar__bars span {
	background: #101820;
}

.fms-topbar.is-stuck .fms-topbar__cta {
	background: var(--fms-topbar-stuck-cta, var(--fms-navy, #0B2A4A));
	color: #fff;
}

.fms-topbar.is-stuck .fms-topbar__cta:hover,
.fms-topbar.is-stuck .fms-topbar__cta:focus-visible {
	/* Solid first for browsers without color-mix, which would drop the line. */
	background: #16406b;
	background: color-mix(in srgb, #ffffff 16%, var(--fms-topbar-stuck-cta, #0B2A4A));
	color: #fff;
}


/* The panel and the drop-downs follow the bar: dark while it is laid over the
   hero, white once it has settled. */
.fms-topbar.is-stuck .fms-topbar__panel-inner,
.fms-topbar.is-stuck .fms-topbar__menu .sub-menu {
	background: var(--fms-topbar-stuck, var(--fms-white, #ffffff));
	box-shadow: 0 18px 40px rgba(17, 24, 33, 0.14);
	border: 1px solid rgba(17, 24, 33, 0.1);
}

.fms-topbar.is-stuck .fms-topbar__menu .sub-menu a,
.fms-topbar.is-stuck .fms-topbar__panel-menu > li > a,
.fms-topbar.is-stuck .fms-topbar__panel-menu .sub-menu a {
	color: #101820;
}

.fms-topbar.is-stuck .fms-topbar__menu .sub-menu a:hover,
.fms-topbar.is-stuck .fms-topbar__menu .sub-menu a:focus-visible,
.fms-topbar.is-stuck .fms-topbar__panel-menu > li > a:hover,
.fms-topbar.is-stuck .fms-topbar__panel-menu .sub-menu a:hover {
	background: rgba(17, 24, 33, 0.06);
	color: var(--fms-topbar-hover, var(--fms-navy, #0B2A4A));
}

.fms-topbar.is-stuck .fms-topbar__panel-cta {
	background: var(--fms-topbar-stuck-cta, var(--fms-navy, #0B2A4A));
	color: #fff;
}
/* ---------- Out of sight ----------

   Used while the hero is on its way past, before the bar returns stuck. */
.fms-topbar--sticky.is-away {
	transform: translateY(-100%);
}

.fms-topbar--sticky.is-away.is-open {
	transform: none;
}
.fms-topbar__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.fms-topbar__bars {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
}

.fms-topbar__bars span {
	display: block;
	height: 2px;
	width: 100%;
	border-radius: 2px;
	background: #fff;
	transition: transform 0.3s ease, opacity 0.2s ease;
}

.fms-topbar__toggle[aria-expanded="true"] .fms-topbar__bars span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.fms-topbar__toggle[aria-expanded="true"] .fms-topbar__bars span:nth-child(2) {
	opacity: 0;
}

.fms-topbar__toggle[aria-expanded="true"] .fms-topbar__bars span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Collapsed panel ---------- */

.fms-topbar__panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 12px var(--fms-pad-x, 40px) 0;
	pointer-events: none;
}

.fms-topbar__panel-inner {
	padding: 14px;
	border-radius: 6px;
	background: var(--fms-topbar-panel, #111111);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.34);
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fms-topbar.is-open .fms-topbar__panel {
	pointer-events: auto;
}

.fms-topbar.is-open .fms-topbar__panel-inner {
	opacity: 1;
	transform: translateY(0);
}

.fms-topbar .fms-topbar__panel-menu,
.fms-topbar .fms-topbar__panel-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fms-topbar .fms-topbar__panel-menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-topbar .fms-topbar__panel-menu > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 16px;
	border-radius: 6px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.fms-topbar .fms-topbar__panel-menu > li > a:hover,
.fms-topbar .fms-topbar__panel-menu > li > a:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	text-decoration: none;
}

/* The chevron doubles as the control that opens the level below it. */
.fms-topbar .fms-topbar__panel-menu .menu-item-has-children > a::after {
	content: '';
	width: 9px;
	height: 9px;
	flex: none;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	transition: transform 0.25s ease;
}

.fms-topbar .fms-topbar__panel-menu .menu-item-has-children.is-open > a::after {
	transform: translateY(2px) rotate(-135deg);
}

/* Closed by height rather than display, so it can slide. */
.fms-topbar .fms-topbar__panel-menu .sub-menu {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.fms-topbar .fms-topbar__panel-menu .menu-item-has-children.is-open > .sub-menu {
	max-height: 60vh;
}

.fms-topbar .fms-topbar__panel-menu .sub-menu a {
	display: block;
	padding: 11px 16px 11px 30px;
	border-radius: 6px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 14px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.fms-topbar .fms-topbar__panel-menu .sub-menu a:hover,
.fms-topbar .fms-topbar__panel-menu .sub-menu a:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

/* Only shown once the bar hands the call to action over, on a phone. */
.fms-topbar__panel-cta {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	padding: 16px 20px;
	border-radius: 6px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--fms-topbar-panel, #111111);
	background: #fff;
	text-decoration: none;
	transition: opacity 0.25s ease;
}

.fms-topbar__panel-cta:hover,
.fms-topbar__panel-cta:focus-visible {
	color: var(--fms-topbar-panel, #111111);
	opacity: 0.88;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.fms-topbar--sticky,
	.fms-topbar__panel-inner,
	.fms-topbar__cta,
	.fms-topbar__cta-arrow,
	.fms-topbar__toggle,
	.fms-topbar__bars span,
	.fms-topbar .fms-topbar__menu a,
	.fms-topbar .fms-topbar__menu .sub-menu,
	.fms-topbar .fms-topbar__panel-menu .sub-menu {
		transition: none;
	}
}

/* ---------- Tablet ----------

   The menu leaves the bar for the panel below it. The call to action stays,
   with the toggle as a matching block beside it. */

@media (max-width: 1024px) {
	.fms-topbar {
		--fms-topbar-h: 54px;
	}

	.fms-topbar__inner {
		padding-left: var(--fms-pad-x, 20px);
	}

	.fms-topbar__divider,
	.fms-topbar__nav {
		display: none;
	}

	.fms-topbar__toggle {
		display: flex;
	}

	.fms-topbar__panel {
		display: block;
		padding-inline: var(--fms-pad-x, 20px);
	}

	.fms-topbar__cta {
		padding: 0 18px;
	}
}

/* ---------- Mobile ----------

   The bar keeps the mark and the toggle alone; the call to action moves to the
   end of the panel, and the panel narrows to a card rather than a full band. */

@media (max-width: 767px) {
	.fms-topbar {
		--fms-topbar-h: 50px;
	}

	.fms-topbar__inner {
		padding-left: var(--fms-pad-x, 15px);
	}

	.fms-topbar__cta {
		display: none;
	}

	.fms-topbar__toggle {
		width: 40px;
	}

	/* Full width, with the same gap either side as the rest of the page. */
	.fms-topbar__panel {
		padding-inline: var(--fms-pad-x, 15px);
	}

	.fms-topbar__panel-cta {
		display: flex;
	}

	.fms-topbar .fms-topbar__panel-menu > li > a {
		padding: 13px 14px;
		font-size: 15px;
	}
}

/* ==========================================================================
   Section label — shared

   A small square in the primary colour beside the wording, the pair held in a
   pill outlined in grey. In the hero the outline is dropped and the mark and
   wording stand on their own.
   ========================================================================== */

.fms-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 18px;
	border-radius: 100px;
	border: 1px solid var(--fms-label-line, rgba(90, 107, 123, 0.5));
	background: transparent;
}

.fms-label--plain {
	padding: 0;
	border: 0;
	border-radius: 0;
}

.fms-label__mark {
	display: block;
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 0;
	background: var(--fms-label-mark, var(--fms-navy, #0B2A4A));
}

.fms-label .fms-label__text {
	font-family: var(--fms-font-heading, sans-serif);
	font-size: var(--fms-eyebrow-size, 15px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: inherit;
}

/* On a dark ground the outline and the mark both have to lift off it. */
.fms-label--onDark {
	--fms-label-line: rgba(255, 255, 255, 0.34);
	color: #fff;
}

/* ==========================================================================
   Hero, split — video behind, wording left, one figure right
   ========================================================================== */

.fms-hero2,
.fms-hero2 *,
.fms-hero2 *::before,
.fms-hero2 *::after {
	box-sizing: border-box;
}


/* The slot is what stands in the flow and holds the hero's space; the hero
   itself is drawn inside it. --fms-vw is set by the script to the document
   width, so the breakout excludes the scrollbar. 100vw is the fallback. */
.fms-hero2-slot {
	position: relative;
	z-index: 0;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	min-height: var(--fms-hero2-h, 90vh);
	/* The height is a share of the screen, so it lands on a fraction of a
	   pixel as often as not, and the page shows through the rounding as a
	   hairline. Pulling the next section up by one pixel closes it. */
	margin-bottom: -1px;
}

.fms-hero2 {
	position: relative;
	display: block;
	width: 100%;
	min-height: var(--fms-hero2-h, 90vh);
	overflow: hidden;
	isolation: isolate;
	background-color: var(--fms-navy, #0B2A4A);
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

/* Pinned to the screen, so what follows travels up over the video instead of
   pushing it off the top. The slot above keeps the same space in the flow, so
   nothing else moves. */
.fms-hero2--fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
}

/* Out of sight once the page has moved past its slot, so the video is not
   left sitting behind everything below. The class is added by the script. */
.fms-hero2--fixed.is-passed {
	visibility: hidden;
}

body.admin-bar .fms-hero2--fixed {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .fms-hero2--fixed {
		top: 46px;
	}
}

/* Every section after the hero carries its own ground and sits a layer above
   it, so the fixed video only ever shows through the hero's own slot. */
.fms-about,
.fms-about2,
.fms-trust,
.fms-product,
.fms-product2,
.fms-service,
.fms-process,
.fms-cta,
.fms-service2,
.fms-process2,
.fms-cta2,
.fms-footer {
	position: relative;
	z-index: 1;
}

.fms-hero2__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.fms-hero2__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--fms-hero2-pos, center);
	border: 0;
}

.fms-hero2__overlay {
	position: absolute;
	inset: 0;
	display: block;
	background: #000;
	opacity: var(--fms-hero2-overlay, 0.58);
	pointer-events: none;
}

/* ---------- Layout ---------- */

.fms-hero2__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: var(--fms-hero2-h, 90vh);
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	/* The header is laid over the top of this, so the padding at the top is
	   the clearance the wording needs to clear the bar while it sits in the
	   middle of the frame. */
	padding: calc(var(--fms-pad-y, 80px) + 80px) var(--fms-pad-x, 40px);
}

.fms-hero2__cols {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	width: 100%;
}

.fms-hero2__col--text {
	flex: 1 1 auto;
	min-width: 0;
}

.fms-hero2__col--card {
	flex: 0 1 340px;
	min-width: 0;
}

/* ---------- Wording ---------- */

/* The mark above the title: its height is the client's to set, and it steps
   down on a smaller screen so it never crowds the heading. */
.fms-hero2 .fms-hero2__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--fms-hero2-logo-h, 88px);
	margin: 0 0 26px;
	object-fit: contain;
	object-position: left center;
}

@media (max-width: 1024px) {
	.fms-hero2 .fms-hero2__logo {
		height: calc(var(--fms-hero2-logo-h, 88px) * 0.85);
	}
}

@media (max-width: 767px) {
	.fms-hero2 .fms-hero2__logo {
		height: calc(var(--fms-hero2-logo-h, 88px) * 0.7);
		margin-bottom: 20px;
	}
}

/* Two class selectors so the theme's own heading rules cannot outrank these. */
.fms-hero2 .fms-hero2__title {
	margin: 0 0 22px;
	max-width: 20ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-style: normal;
	font-size: clamp(2.125rem, 3.9vw, 3.375rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: #fff;
	text-wrap: balance;
}

.fms-hero2 .fms-hero2__desc {
	margin: 0 0 34px;
	max-width: 58ch;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.84);
}

/* ---------- Button ----------

   White block with the arrow in its own square of the primary colour, so the
   two halves read as one control rather than a button with an icon dropped
   inside it. The padding is tight on the icon side for the same reason. */

.fms-hero2__btn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 7px 7px 7px 24px;
	border-radius: 6px;
	background: var(--fms-white, #fff);
	color: #000;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.fms-hero2 .fms-hero2__btn-text {
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.fms-hero2__btn-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 4px;
	background: var(--fms-hero2-accent, var(--fms-navy, #0B2A4A));
	transition: transform 0.25s ease;
}

/* Drawn as a mask, so the supplied black artwork comes through white. */
.fms-hero2__btn-icon::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background-color: #fff;
	-webkit-mask-image: var(--fms-hero2-arrow);
	mask-image: var(--fms-hero2-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-hero2__btn:hover,
.fms-hero2__btn:focus-visible {
	background: var(--fms-mist, #EEF2F6);
	color: #000;
	text-decoration: none;
}

.fms-hero2__btn:hover .fms-hero2__btn-icon {
	transform: translateX(3px);
}

.fms-hero2__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---------- Figure card ---------- */

.fms-hero2__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 28px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
}

.fms-hero2__card .fms-label__mark {
	background: var(--fms-hero2-accent, var(--fms-navy, #0B2A4A));
}

/* The mark would vanish into the card on a dark ground, so it takes the
   accent's lighter neighbour instead. */
.fms-hero2__card .fms-label__text {
	color: #fff;
}

.fms-hero2__figure {
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
	/* Keeps the width steady while the digits tick over. */
	font-variant-numeric: tabular-nums;
}

.fms-hero2 .fms-hero2__card-desc {
	margin: 0;
	max-width: 24ch;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

@media (prefers-reduced-motion: reduce) {
	.fms-hero2__btn,
	.fms-hero2__btn-icon {
		transition: none;
	}
	.fms-hero2__btn:hover .fms-hero2__btn-icon {
		transform: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	/* The slot and the pinned hero take the same figure as the section, or the
	   hero would keep its desktop height at these widths and stand far taller
	   than it should. */
	.fms-hero2-slot,
	.fms-hero2,
	.fms-hero2__inner {
		min-height: var(--fms-hero2-h-t, 620px);
	}

	/* Kept side by side at this width: the card narrows instead of dropping
	   below the wording, so the hero keeps the shape it has on a desktop. */
	.fms-hero2__cols {
		align-items: flex-end;
		gap: 28px;
	}

	.fms-hero2__col--text {
		flex: 1 1 0%;
	}

	.fms-hero2__col--card {
		flex: 0 1 280px;
		max-width: 280px;
	}

	.fms-hero2 .fms-hero2__title {
		max-width: 20ch;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-hero2-slot,
	.fms-hero2,
	.fms-hero2__inner {
		min-height: var(--fms-hero2-h-m, 600px);
	}

	/* Back to a stack on a phone: there is no width left for two columns. */
	.fms-hero2__cols {
		flex-direction: column;
		align-items: flex-start;
		gap: 26px;
	}

	.fms-hero2__col--text,
	.fms-hero2__col--card {
		flex: 0 0 auto;
		width: 100%;
	}

	.fms-hero2 .fms-hero2__title {
		margin-bottom: 18px;
		max-width: none;
		line-height: 1.1;
	}

	.fms-hero2 .fms-hero2__desc {
		margin-bottom: 26px;
		font-size: 15px;
	}

	.fms-hero2__col--card {
		max-width: none;
	}

	.fms-hero2__card {
		padding: 22px;
	}

	.fms-hero2 .fms-label__text {
		font-size: 13px;
	}
}

/* ==========================================================================
   Hero, inner page — the split hero with a still, wording left and centred,
   and the primary colour rising from the bottom edge. Only the differences
   are here, every one of them behind .fms-hero2--page.
   ========================================================================== */

.fms-hero2--page .fms-hero2__overlay {
	z-index: 1;
}

/* Solid primary at the bottom edge, gone by --fms-hero2-fade-h up the frame. */
.fms-hero2--page .fms-hero2__fade {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	background: linear-gradient(
		to top,
		var(--fms-hero2-fade, var(--fms-navy, #0B2A4A)) 0%,
		transparent var(--fms-hero2-fade-h, 85%)
	);
	opacity: var(--fms-hero2-fade-o, 1);
	pointer-events: none;
}

.fms-hero2--page .fms-hero2__video {
	transform-origin: 50% 40%;
}

.fms-hero2--page .fms-hero2__cols {
	justify-content: flex-start;
}

.fms-hero2.fms-hero2--page .fms-hero2__title {
	max-width: 16ch;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.fms-hero2.fms-hero2--page .fms-hero2__desc {
	max-width: 48ch;
}

/* A wider measure on desktop, where the frame has the room for it. */
@media (min-width: 1025px) {
	.fms-hero2.fms-hero2--page .fms-hero2__desc {
		max-width: 58ch;
	}
}

.fms-hero2.fms-hero2--page .fms-hero2__desc:last-child {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	/* No card to line up with here, so the wording stays centred rather than
	   dropping to the bottom as the split hero's columns do. */
	.fms-hero2--page .fms-hero2__cols {
		align-items: center;
	}
}

@media (max-width: 767px) {
	.fms-hero2.fms-hero2--page .fms-hero2__title {
		font-size: clamp(2.25rem, 10vw, 2.75rem);
	}
}

/* ==========================================================================
   The label, applied back over the older sections

   Their markup already had a mark beside the wording inside a pill, so only
   the two marks change: the multi-coloured cube becomes a plain square in the
   primary colour, and the outline becomes grey.
   ========================================================================== */

.fms-hero__stripe,
.fms-about__stripe,
.fms-product__mark,
.fms-service__mark,
.fms-process__mark,
.fms-cta__mark {
	width: 8px;
	height: 8px;
	border-radius: 0;
	background-image: none;
	background-color: var(--fms-label-mark, var(--fms-navy, #0B2A4A));
}

/* On the dark grounds the primary would disappear, so the mark goes white. */
.fms-process__mark,
.fms-cta__mark,
.fms-about--dark .fms-about__stripe,
.fms-product--dark .fms-product__mark,
.fms-service--dark .fms-service__mark {
	background-color: #fff;
}

/* Grey outline rather than the navy tint these carried before. */
.fms-about .fms-about__label,
.fms-product .fms-product__label,
.fms-service .fms-service__label {
	background: transparent;
	border-color: rgba(90, 107, 123, 0.5);
}

.fms-process .fms-process__label,
.fms-cta .fms-cta__label {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.34);
}

/* The hero's own label never had an outline, and keeps none. */
.fms-hero__eyebrow {
	border: 0;
	padding-left: 0;
	padding-right: 0;
}

/* ==========================================================================
   About, overlapping

   Four bands in one section: the marquee, the picture and wording, the three
   figures, and the ribbon of photographs. The section carries an opaque
   ground and sits a layer above the fixed hero, which is what makes it climb
   over the video as the page scrolls.
   ========================================================================== */

.fms-about2,
.fms-about2 *,
.fms-about2 *::before,
.fms-about2 *::after {
	box-sizing: border-box;
}

.fms-about2 {
	/* Overlaps whatever it follows by a pixel. The hero pulls its own bottom
	   up by the same amount, but the badge bar sits between the two, so that
	   pull never reaches here — this is what closes the join on its own. */
	margin-top: -1px;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	overflow: hidden;
	background: var(--fms-about2-bg, var(--fms-mist, #EEF2F6));
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

/* ---------- Pattern ----------

   Drawn on its own layer under the content so it never tints the wording. */

.fms-about2__pattern {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	pointer-events: none;
}

.fms-about2--pattern-lines .fms-about2__pattern {
	/* An L at the corner of each tile rather than a line running the whole way down: it reads as a drawing sheet instead of a ruled page. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M0.5 0.5 V26 H26' fill='none' stroke='rgba(17,24,33,0.14)' stroke-width='1'/%3E%3C/svg%3E");
	background-size: var(--fms-pattern-tile, 160px) var(--fms-pattern-tile, 160px);
}

.fms-about2--pattern-grid .fms-about2__pattern {
	background-image:
		linear-gradient(to right, rgba(17, 24, 33, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(17, 24, 33, 0.06) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px;
}

.fms-about2--pattern-dots .fms-about2__pattern {
	background-image: radial-gradient(rgba(17, 24, 33, 0.1) 1px, transparent 1px);
	background-size: 22px 22px;
}

.fms-about2__marquee,
.fms-about2__inner {
	position: relative;
	z-index: 1;
}

/* ---------- Marquee ----------

   The run is printed twice and the track travels exactly half its own width,
   so the second copy arrives where the first started and the loop has no
   seam. The spacing is margin rather than a gap for the same reason: a gap
   between the two runs would put the halves out by one space. */

/* The band carries the section's own colour, which is what keeps the pattern
   below it: the pattern is drawn across the whole section, and this covers
   the part of it that would otherwise show behind the wording. */
.fms-about2__marquee {
	overflow: hidden;
	padding: 26px 0;
	border-bottom: 1px solid rgba(17, 24, 33, 0.1);
	background: var(--fms-about2-bg, var(--fms-mist, #EEF2F6));
}

.fms-about2__marquee-track {
	display: flex;
	width: max-content;
	animation: fms-about2-marquee var(--fms-about2-marquee-dur, 34s) linear infinite;
}

.fms-about2__marquee-run {
	display: flex;
	align-items: center;
}

.fms-about2 .fms-about2__marquee-item {
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #101820;
}

.fms-about2__marquee-dot {
	display: block;
	width: 9px;
	height: 9px;
	margin: 0 24px;
	flex: none;
	background: var(--fms-about2-accent, var(--fms-navy, #0B2A4A));
}

@keyframes fms-about2-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- Picture and wording ---------- */

.fms-about2__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
}

/* The picture and the wording share one band rather than sitting in two
   columns: the picture runs off the left edge of the page and is dissolved
   into the section's own colour before it reaches the text.

   The fade is a gradient laid over the picture in that colour, so it always
   meets the ground exactly — no second colour to keep in step. */
.fms-about2__cols {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 32px;
	min-height: 520px;
}

.fms-about2__scene {
	position: absolute;
	top: calc(-1 * var(--fms-pad-y, 80px));
	/* Runs the full height of the section, top padding and bottom alike, so
	   it meets both edges the same way. */
	bottom: calc(-1 * var(--fms-pad-y, 80px));
	left: calc(-1 * var(--fms-pad-x, 40px));
	/* Runs from the edge of the page to the end of its own column, so the
	   wording starts just clear of it. */
	width: calc(50% - 16px + var(--fms-pad-x, 40px));
	overflow: hidden;
	background-color: rgba(17, 24, 33, 0.06);
}

/* Held inside the frame rather than painted on it, so the frame can clip
   it and the two need not share a size. */
.fms-about2__scene-img {
	position: absolute;
	inset: 0;
	display: block;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.fms-about2__body {
	position: relative;
	z-index: 1;
	grid-column: 2;
}

.fms-about2 .fms-about2__title {
	margin: 0 0 22px;
	max-width: 18ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #101820;
}
/* The label sits on its own white ground in this section, so the pill reads
   against whatever the picture fades into behind it. */
.fms-about2 .fms-label {
	background: #fff;
}


.fms-about2__label {
	margin: 0 0 24px;
}

/* Two class selectors so the theme's own paragraph rules cannot outrank it. */
.fms-about2 .fms-about2__desc {
	margin: 0 0 36px;
	font-family: var(--fms-font-body, sans-serif);
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: -0.005em;
	color: #101820;
}

/* Each word is its own element so the reveal can walk through them. */
.fms-about2__word {
	display: inline-block;
}

/* ---------- Button ----------

   The hero's shape in the opposite colours: a black block with the arrow in
   its own square of the primary colour. */

.fms-about2__btn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 7px 7px 7px 24px;
	border-radius: 6px;
	background: var(--fms-about2-btn, var(--fms-extra-3, #111111));
	color: #fff;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.fms-about2 .fms-about2__btn-text {
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: #fff;
}

.fms-about2__btn-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 4px;
	background: var(--fms-about2-btn-accent, var(--fms-navy, #0B2A4A));
	transition: transform 0.25s ease;
}

/* Drawn as a mask, so the supplied black artwork comes through white. */
.fms-about2__btn-icon::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background-color: #fff;
	-webkit-mask-image: var(--fms-about2-arrow);
	mask-image: var(--fms-about2-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-about2__btn:hover,
.fms-about2__btn:focus-visible {
	/* Solid first for browsers without color-mix, which would drop the line. */
	background: #2b2b2b;
	background: var(--fms-about2-btn-hover, #2b2b2b);
	color: #fff;
	text-decoration: none;
}

.fms-about2__btn:hover .fms-about2__btn-icon {
	transform: translateX(3px);
}

.fms-about2__btn:focus-visible {
	outline: 2px solid var(--fms-about2-accent, var(--fms-navy, #0B2A4A));
	outline-offset: 3px;
}


@media (prefers-reduced-motion: reduce) {
	.fms-about2__marquee-track {
		animation: none;
	}
	.fms-about2__btn,
	.fms-about2__btn-icon {
		transition: none;
	}
	.fms-about2__btn:hover .fms-about2__btn-icon {
		transform: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	/* One column here: the picture becomes a band of its own above the
	   wording, still running out to both edges. */
	.fms-about2__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		min-height: 0;
	}

	.fms-about2__scene {
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		width: auto;
		height: 320px;
		margin: 0 calc(-1 * var(--fms-pad-x, 20px));
	}

	.fms-about2__body {
		grid-column: 1;
	}

	.fms-about2__marquee {
		padding: 20px 0;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-about2__cols {
		gap: 28px;
	}

	.fms-about2__scene {
		height: 240px;
		margin: 0 calc(-1 * var(--fms-pad-x, 15px));
	}

	.fms-about2 .fms-about2__title {
		margin-bottom: 18px;
		max-width: none;
	}

	.fms-about2 .fms-about2__desc {
		margin-bottom: 28px;
		line-height: 1.5;
	}

	.fms-about2__marquee-dot {
		margin: 0 16px;
	}
}

/* ==========================================================================
   Our Story — label, heading and a paragraph that fills in word by word,
   then a wide panel of icon boxes beside a photograph of the same height.
   On the primary colour by default.
   ========================================================================== */

.fms-story,
.fms-story *,
.fms-story *::before,
.fms-story *::after {
	box-sizing: border-box;
}

/* Full bleed ground, boxed content, per the rule for any section that
   carries its own colour. */
.fms-story {
	position: relative;
	z-index: 1;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-top: -1px;
	background: var(--fms-story-bg, var(--fms-navy, #0B2A4A));
	color: #fff;
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

.fms-story--light {
	color: #101820;
}

.fms-story__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	/* Less above than below: the hero fades straight into this section. */
	padding: min(var(--fms-pad-y, 80px), 24px) var(--fms-pad-x, 40px) var(--fms-pad-y, 80px);
}

/* ---------- Top ---------- */

.fms-story__intro {
	margin-bottom: 56px;
}

.fms-story .fms-label__mark {
	background: var(--fms-story-accent, #fff);
}

.fms-story__label {
	margin: 0 0 24px;
}

/* Same size and weight as the homepage section headings. */
.fms-story .fms-story__title {
	margin: 0 0 24px;
	max-width: 28ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: inherit;
}

/* The About section's lead paragraph, a step larger, running the full width
   of the container. */
.fms-story .fms-story__desc {
	margin: 0;
	max-width: none;
	font-family: var(--fms-font-body, sans-serif);
	font-size: clamp(18px, 1.7vw, 24px);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.005em;
	color: inherit;
}

.fms-story__word {
	display: inline-block;
}

/* ---------- Bottom ---------- */

/* The photograph sets its own minimum height (roughly 40vh by default, so it
   reads properly on tall screens); the left panel is centred beside it
   rather than stretched to match, since its own content is usually shorter. */
.fms-story__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	align-items: center;
	gap: 24px;
}

.fms-story--no-image .fms-story__cols {
	grid-template-columns: minmax(0, 1fr);
}

/* The left side is plain: the two icon boxes as a pair of cards, and the
   button under them outside either card, sized to its own content and
   centred beside the photograph. */
.fms-story__panel {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fms-story__features {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.fms-story__feature {
	padding: 36px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
}

.fms-story--light .fms-story__feature {
	border-color: rgba(11, 42, 74, 0.14);
	background: #fff;
}

.fms-story__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 24px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.08);
}

.fms-story--light .fms-story__icon {
	background: var(--fms-mist, #EEF2F6);
}

/* Drawn as a mask, so the supplied single colour artwork takes the mark
   colour whatever it was drawn in. Always white -- independent of
   --fms-story-accent, which only drives the label mark's colour. */
.fms-story__icon > span {
	display: block;
	width: 28px;
	height: 28px;
	background-color: #fff;
	-webkit-mask-image: var(--fms-story-icon);
	mask-image: var(--fms-story-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-story .fms-story__feature-title {
	margin: 0 0 12px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: inherit;
}

.fms-story .fms-story__feature-text {
	margin: 0;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
}

.fms-story--light .fms-story__feature-text {
	color: var(--fms-slate, #5A6B7B);
}

.fms-story__media {
	position: relative;
	min-height: var(--fms-story-img-h, 55vh);
	overflow: hidden;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.06);
}

.fms-story .fms-story__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--fms-story-pos, center);
	border: 0;
	border-radius: 0;
}

/* ---------- Button ----------

   The hero's shape: a solid block with the arrow in its own square. */

.fms-story__btn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 7px 7px 7px 24px;
	border-radius: 6px;
	background: var(--fms-story-btn, #fff);
	color: var(--fms-story-btn-text, #000);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.fms-story .fms-story__btn-text {
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--fms-story-btn-text, #000);
}

.fms-story__btn-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 4px;
	background: var(--fms-story-btn-accent, var(--fms-navy, #0B2A4A));
	transition: transform 0.25s ease;
}

.fms-story__btn-icon::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background-color: #fff;
	-webkit-mask-image: var(--fms-story-arrow);
	mask-image: var(--fms-story-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-story__btn:hover,
.fms-story__btn:focus-visible {
	/* Solid first for browsers without color-mix, which would drop the line. */
	background: var(--fms-mist, #EEF2F6);
	background: var(--fms-story-btn-hover, var(--fms-mist, #EEF2F6));
	color: var(--fms-story-btn-text, #000);
	text-decoration: none;
}

.fms-story__btn:hover .fms-story__btn-icon {
	transform: translateX(3px);
}

.fms-story__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.fms-story__btn,
	.fms-story__btn-icon {
		transition: none;
	}
	.fms-story__btn:hover .fms-story__btn-icon {
		transform: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-story__intro {
		margin-bottom: 40px;
	}

	/* The photograph drops under the panel as a band of its own. */
	.fms-story__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.fms-story__feature {
		padding: 28px;
	}

	/* Stacked, so there is no side for the photo to match height with any
	   more -- it runs at its own natural aspect ratio instead of a guessed
	   fixed height, which is what was cropping it oddly before. */
	.fms-story__media {
		min-height: 0;
	}

	.fms-story .fms-story__img {
		position: static;
		height: auto;
		object-fit: initial;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-story__intro {
		margin-bottom: 32px;
	}

	.fms-story .fms-story__title {
		margin-bottom: 18px;
		max-width: none;
	}

	.fms-story__panel {
		gap: 20px;
	}

	.fms-story__features {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.fms-story__feature {
		padding: 24px;
	}

	.fms-story__icon {
		width: 48px;
		height: 48px;
		margin-bottom: 18px;
	}

	.fms-story__icon > span {
		width: 24px;
		height: 24px;
	}

	.fms-story .fms-story__feature-title {
		font-size: 18px;
	}
}

/* ==========================================================================
   What We Do — centred intro, then the services as tabs: titles on the left,
   the chosen one on the right as a card of photograph, icon and wording.
   The whole section sits on a photograph washed out with the ground colour.
   ========================================================================== */

.fms-what,
.fms-what *,
.fms-what *::before,
.fms-what *::after {
	box-sizing: border-box;
}

.fms-what {
	position: relative;
	z-index: 1;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-top: -1px;
	overflow: hidden;
	isolation: isolate;
	background: var(--fms-what-ground, #fff);
	color: #101820;
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

/* The photograph under everything, and the ground colour laid over it at
   --fms-what-fade, so the picture only just shows through. */
.fms-what__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.fms-what__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--fms-what-ground, #fff);
	opacity: var(--fms-what-fade, 0.55);
}

.fms-what .fms-what__bg-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--fms-what-bg-pos, center);
	border: 0;
	border-radius: 0;
}

.fms-what__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
}

/* ---------- Top ---------- */

.fms-what__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 56px;
	text-align: center;
}

.fms-what .fms-label {
	background: #fff;
}

.fms-what .fms-label__mark {
	background: var(--fms-what-accent, var(--fms-navy, #0B2A4A));
}

.fms-what__label {
	margin: 0 0 24px;
}

/* Same size and weight as the other section headings. */
.fms-what .fms-what__title {
	margin: 0 0 20px;
	max-width: 24ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #101820;
	text-wrap: balance;
}

.fms-what .fms-what__desc {
	margin: 0;
	max-width: 62ch;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--fms-slate, #5A6B7B);
}

/* ---------- Bottom ---------- */

.fms-what__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.8fr);
	align-items: center;
	gap: 48px;
}

/* The titles hang off a hairline; the chosen one takes a bar of the accent
   over it. */
.fms-what__tabs {
	display: flex;
	flex-direction: column;
	border-left: 1px solid rgba(11, 42, 74, 0.14);
}

.fms-what .fms-what__tab {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 14px 0 14px 22px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--fms-slate, #5A6B7B);
	text-align: left;
	cursor: pointer;
	transition: color 0.25s ease;
}

.fms-what__tab::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1px;
	width: 2px;
	background: var(--fms-what-accent, var(--fms-navy, #0B2A4A));
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.35s ease;
}

.fms-what .fms-what__tab:hover,
.fms-what .fms-what__tab.is-active {
	color: #101820;
	background: none;
}

.fms-what__tab.is-active::before {
	transform: scaleY(1);
}

.fms-what .fms-what__tab:focus-visible {
	outline: 2px solid var(--fms-what-accent, var(--fms-navy, #0B2A4A));
	outline-offset: 2px;
}

.fms-what__tab-num {
	flex: none;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.04em;
	opacity: 0.7;
}

.fms-what__tab-title {
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.fms-what__tab.is-active .fms-what__tab-title {
	font-weight: 600;
}

/* The card the chosen service is shown in. */
.fms-what__panel {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: 40px;
	padding: 20px;
	border-radius: 6px;
	border: 1px solid rgba(11, 42, 74, 0.12);
	background: #fff;
	box-shadow: 0 18px 40px -28px rgba(11, 42, 74, 0.35);
}

.fms-what__panel[hidden] {
	display: none;
}

.fms-what__panel--no-image {
	grid-template-columns: minmax(0, 1fr);
	padding: 40px;
}

.fms-what__panel:focus-visible {
	outline: 2px solid var(--fms-what-accent, var(--fms-navy, #0B2A4A));
	outline-offset: 3px;
}

.fms-what__media {
	position: relative;
	height: var(--fms-what-img-h, 340px);
	overflow: hidden;
	border-radius: 6px;
	background: rgba(17, 24, 33, 0.06);
}

.fms-what .fms-what__img {
	position: absolute;
	inset: 0;
	max-width: none;
	object-position: center;
	border: 0;
	border-radius: 0;
}

.fms-what__body {
	padding: 12px 20px 12px 0;
}

/* The single colour artwork drawn white on a square of the accent. */
.fms-what__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 24px;
	border-radius: 6px;
	background: var(--fms-what-accent, var(--fms-navy, #0B2A4A));
}

.fms-what__icon::before {
	content: '';
	display: block;
	width: 26px;
	height: 26px;
	background-color: #fff;
	-webkit-mask-image: var(--fms-what-icon);
	mask-image: var(--fms-what-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-what .fms-what__item-title {
	margin: 0 0 14px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: #101820;
}

.fms-what .fms-what__item-text {
	margin: 0;
	max-width: 42ch;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--fms-slate, #5A6B7B);
}

@media (prefers-reduced-motion: reduce) {
	.fms-what .fms-what__tab,
	.fms-what__tab::before {
		transition: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-what__intro {
		margin-bottom: 40px;
	}

	/* The titles become a row above the card, and the accent bar moves to
	   the top edge of the chosen one. */
	.fms-what__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.fms-what__tabs {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		border-left: 0;
		border-top: 1px solid rgba(11, 42, 74, 0.14);
	}

	.fms-what .fms-what__tab {
		flex-direction: column;
		gap: 8px;
		padding: 16px 12px 4px 0;
	}

	.fms-what__tab::before {
		top: -1px;
		right: 12px;
		bottom: auto;
		left: 0;
		width: auto;
		height: 2px;
		transform: scaleX(0);
		transform-origin: left;
	}

	.fms-what__tab.is-active::before {
		transform: scaleX(1);
	}

	.fms-what__tab-title {
		font-size: 16px;
	}

	.fms-what__panel {
		gap: 28px;
	}

	.fms-what__media {
		height: var(--fms-what-img-h-t, 300px);
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-what__intro {
		margin-bottom: 32px;
	}

	.fms-what .fms-what__title {
		margin-bottom: 16px;
	}

	.fms-what .fms-what__desc {
		font-size: 15px;
	}

	/* Two by two on a phone: four titles will not fit across. */
	.fms-what__tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: row;
		column-gap: 16px;
		border-top: 0;
	}

	.fms-what .fms-what__tab {
		padding: 14px 0 8px;
		border-top: 1px solid rgba(11, 42, 74, 0.14);
	}

	.fms-what__tab::before {
		right: 0;
	}

	.fms-what__tab-title {
		font-size: 15px;
	}

	.fms-what__panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		padding: 14px;
	}

	.fms-what__media {
		height: var(--fms-what-img-h-m, 240px);
	}

	.fms-what__body {
		padding: 4px 8px 12px;
	}

	.fms-what__icon {
		width: 46px;
		height: 46px;
		margin-bottom: 18px;
	}

	.fms-what__icon::before {
		width: 22px;
		height: 22px;
	}
}

/* ==========================================================================
   Shared background — one faded photograph behind the sections placed in it
   ========================================================================== */

.fms-group {
	position: relative;
	z-index: 1;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-top: -1px;
	overflow: hidden;
	isolation: isolate;
	background: var(--fms-group-ground, #fff);
}

/* The same photograph-under-a-wash as What We Do uses on its own. */
.fms-group__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.fms-group__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--fms-group-ground, #fff);
	opacity: var(--fms-group-fade, 0.55);
}

.fms-group .fms-group__bg-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--fms-group-bg-pos, center);
	border: 0;
	border-radius: 0;
}

/* The sections inside are already full width by way of the group, and let
   its picture show through. */
.fms-group > .fms-what--grouped,
.fms-group > .fms-caps--grouped {
	margin-top: 0;
	background: transparent;
}

/* ==========================================================================
   How We Help — heading and a single photograph left, on the primary colour;
   the four services as a 2x2 grid right. Whichever card is active or
   hovered decides which photograph shows on the left.
   ========================================================================== */

.fms-help,
.fms-help *,
.fms-help *::before,
.fms-help *::after {
	box-sizing: border-box;
}

.fms-help {
	position: relative;
	z-index: 1;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-top: -1px;
	background: var(--fms-help-ground, var(--fms-navy, #0B2A4A));
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

.fms-help__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	/* Less above than below: the hero fades straight into this section. */
	padding: min(var(--fms-pad-y, 80px), 24px) var(--fms-pad-x, 40px) var(--fms-pad-y, 80px);
}

/* ---------- Top: heading left, description right, bottom aligned ---------- */

.fms-help__head {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: end;
	gap: 32px 64px;
	margin-bottom: 48px;
}

.fms-help__head-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.fms-help__label {
	margin: 0 0 24px;
}

.fms-help .fms-label__mark {
	background: var(--fms-help-accent, var(--fms-blue, #0F5FA8));
}

.fms-help .fms-help__title {
	margin: 0;
	max-width: 18ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
}

.fms-help .fms-help__desc {
	margin: 0;
	max-width: 46ch;
	justify-self: end;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.68);
}

/* ---------- Bottom: photograph left, service cards right, equal height ---------- */

.fms-help__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 64px;
	align-items: stretch;
}

.fms-help__frame {
	position: relative;
	width: 100%;
	height: 100%;
	/* Grid items default to min-height:auto; without overriding it here the
	   row would size off this column's own content instead of the (taller)
	   card grid beside it. See the Our Process section for the fuller
	   version of this trap, where the photo also had to come out of flow --
	   these images already are (stacked absolutely for the cross-fade), so
	   this alone is enough here. */
	min-height: 0;
	overflow: hidden;
	border-radius: 6px;
}

.fms-help__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

/* Two classes so this outranks the shared ".fms-help__frame img" transition
   above and keeps the opacity fade the plain global rule doesn't need. */
.fms-help__frame .fms-help__img {
	transition: opacity 0.5s ease, transform 0.6s ease;
}

.fms-help__img.is-active {
	position: relative;
	opacity: 1;
}

/* ---------- Right: four cards, 2 x 2 ---------- */

.fms-help__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.fms-help__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	padding: 28px;
	border: 0;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.07);
	text-align: left;
	cursor: pointer;
	transition: background-color 0.3s ease;
	font-family: inherit;
}

.fms-help__card:hover,
.fms-help__card.is-active {
	background: var(--fms-white, #fff);
}

.fms-help__badge {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	flex: none;
	margin-bottom: 24px;
	border-radius: 12px;
	background: var(--fms-help-accent, var(--fms-blue, #0F5FA8));
}

.fms-help__icon {
	display: block;
	width: 26px;
	height: 26px;
	background-color: #fff;
	-webkit-mask-image: var(--fms-help-icon);
	mask-image: var(--fms-help-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-help .fms-help__card-title {
	margin: 0 0 10px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: #fff;
	transition: color 0.3s ease;
}

.fms-help__card:hover .fms-help__card-title,
.fms-help__card.is-active .fms-help__card-title {
	color: var(--fms-navy, #0B2A4A);
}

.fms-help .fms-help__card-subtitle {
	margin: 0 0 14px;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.82);
	transition: color 0.3s ease;
}

.fms-help__card:hover .fms-help__card-subtitle,
.fms-help__card.is-active .fms-help__card-subtitle {
	color: var(--fms-navy, #0B2A4A);
}

.fms-help .fms-help__card-desc {
	margin: 0;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.62);
	transition: color 0.3s ease;
}

.fms-help__card:hover .fms-help__card-desc,
.fms-help__card.is-active .fms-help__card-desc {
	color: var(--fms-color-font, #4a5563);
}

@media (prefers-reduced-motion: reduce) {
	.fms-help__card,
	.fms-help__card-title,
	.fms-help__card-subtitle,
	.fms-help__card-desc,
	.fms-help__frame .fms-help__img {
		transition: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-help__head {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		margin-bottom: 36px;
	}

	.fms-help .fms-help__desc {
		max-width: none;
		justify-self: stretch;
	}

	.fms-help__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.fms-help .fms-help__title {
		max-width: none;
	}

	.fms-help__frame {
		height: var(--fms-help-img-h-t, 380px);
	}

	.fms-help__card {
		padding: 22px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-help__inner {
		padding: var(--fms-pad-y, 40px) var(--fms-pad-x, 15px);
	}

	.fms-help .fms-help__desc {
		font-size: 15px;
	}

	.fms-help__frame {
		height: var(--fms-help-img-h-m, 280px);
	}

	.fms-help__cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

/* ==========================================================================
   Our Capabilities — a rounded dark panel: heading left and description
   right on one row, then three cards in the homepage product card style
   ========================================================================== */

.fms-caps,
.fms-caps *,
.fms-caps *::before,
.fms-caps *::after {
	box-sizing: border-box;
}

.fms-caps {
	position: relative;
	z-index: 1;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-top: -1px;
	background: var(--fms-caps-ground, #fff);
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

.fms-caps__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
}

/* After What We Do inside a shared background, that section's bottom
   padding already gives the gap. */
.fms-caps--grouped .fms-caps__inner {
	padding-top: 0;
}

.fms-caps__panel {
	padding: 64px 56px;
	border-radius: 6px;
	background: var(--fms-caps-panel, var(--fms-dark, #1C2228));
	color: #fff;
}

/* ---------- Top ---------- */

/* Two columns, bottom aligned, so the description sits on the heading's row
   and the label rises above the heading on its own. */
.fms-caps__head {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: end;
	gap: 32px 64px;
	margin-bottom: 48px;
}

.fms-caps .fms-label__mark {
	background: var(--fms-caps-accent, var(--fms-blue, #0F5FA8));
}

.fms-caps__label {
	margin: 0 0 24px;
}

.fms-caps .fms-caps__title {
	margin: 0;
	max-width: 20ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #fff;
}

.fms-caps .fms-caps__desc {
	margin: 0;
	max-width: 46ch;
	justify-self: end;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.68);
}

/* ---------- Cards ----------

   The homepage product card: a glass tile with a hairline edge, a title at
   the top, the picture in its own softer frame, and hairline-separated lines
   underneath. Here the picture is a large icon. */

.fms-caps__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.fms-caps__card {
	display: flex;
	flex-direction: column;
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.07);
	transition: background-color 0.35s ease, border-color 0.35s ease;
}

.fms-caps__card:hover {
	border-color: transparent;
	background: var(--fms-caps-hover, var(--fms-blue, #0F5FA8));
}

/* The three cards share one set of rows, so the title row is as tall as the
   longest title and the icons and lists start level across the three even
   when one title wraps. Side by side only; stacked cards need nothing. */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 768px) {
		.fms-caps__grid {
			grid-template-rows: auto 1fr auto;
		}

		.fms-caps__card {
			display: grid;
			grid-row: span 3;
			grid-template-rows: subgrid;
			row-gap: 0;
		}
	}
}

.fms-caps .fms-caps__card-title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 20px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.005em;
	color: #fff;
}

.fms-caps__card-num {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.5);
	transition: color 0.35s ease;
}

.fms-caps__card:hover .fms-caps__card-num {
	color: rgba(255, 255, 255, 0.8);
}

/* The frame the icon sits in grows to fill the card, so the title and the
   list keep to the top and bottom with the icon centred between them. */
.fms-caps__shot {
	display: grid;
	flex: 1 1 auto;
	place-items: center;
	min-height: 220px;
	margin: 0 0 22px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.06);
	transition: background-color 0.35s ease;
}

.fms-caps__card:hover .fms-caps__shot {
	background: rgba(255, 255, 255, 0.12);
}

.fms-caps__icon {
	display: block;
	width: 96px;
	height: 96px;
	background-color: rgba(255, 255, 255, 0.85);
	-webkit-mask-image: var(--fms-caps-icon);
	mask-image: var(--fms-caps-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* The product card's specification lines, one point to a line. */
.fms-caps .fms-caps__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-caps .fms-caps__item {
	margin: 0;
	padding: 11px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--fms-font-body, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
	list-style: none;
	transition: color 0.35s ease, border-color 0.35s ease;
}

.fms-caps .fms-caps__item::before,
.fms-caps .fms-caps__item::marker {
	content: none;
}

.fms-caps__card:hover .fms-caps__item {
	border-top-color: rgba(255, 255, 255, 0.22);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.fms-caps__card,
	.fms-caps__shot,
	.fms-caps__item,
	.fms-caps__card-num {
		transition: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-caps__panel {
		padding: 48px 32px;
	}

	.fms-caps__head {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		margin-bottom: 36px;
	}

	/* Stacked here, so the heading and description take the full width. */
	.fms-caps .fms-caps__title,
	.fms-caps .fms-caps__desc {
		max-width: none;
	}

	.fms-caps .fms-caps__desc {
		justify-self: stretch;
	}

	.fms-caps__grid {
		gap: 14px;
	}

	.fms-caps__card {
		padding: 18px;
	}

	.fms-caps__shot {
		min-height: 180px;
	}

	.fms-caps__icon {
		width: 76px;
		height: 76px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-caps__panel {
		padding: 36px 18px;
	}

	.fms-caps .fms-caps__desc {
		font-size: 15px;
	}

	.fms-caps__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.fms-caps__shot {
		min-height: 160px;
	}

	.fms-caps__icon {
		width: 68px;
		height: 68px;
	}
}

/* ==========================================================================
   Our Purpose — heading left and description right on one row, then the
   mission, a photograph and the vision as three equal containers. The two
   text containers come out from behind the photograph as it is scrolled to.
   ========================================================================== */

.fms-purpose,
.fms-purpose *,
.fms-purpose *::before,
.fms-purpose *::after {
	box-sizing: border-box;
}

.fms-purpose {
	position: relative;
	z-index: 1;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-top: -1px;
	overflow: hidden;
	background: var(--fms-purpose-ground, var(--fms-mist, #EEF2F6));
	color: #101820;
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

.fms-purpose__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
}

/* ---------- Top ---------- */

/* The same two-column, bottom-aligned row as Our Capabilities, so the
   description sits level with the heading. */
.fms-purpose__head {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: end;
	gap: 32px 64px;
	margin-bottom: 48px;
}

.fms-purpose .fms-label {
	background: #fff;
}

.fms-purpose .fms-label__mark {
	background: var(--fms-purpose-accent, var(--fms-navy, #0B2A4A));
}

.fms-purpose__label {
	margin: 0 0 24px;
}

.fms-purpose .fms-purpose__title {
	margin: 0;
	max-width: 22ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #101820;
}

.fms-purpose .fms-purpose__desc {
	margin: 0;
	max-width: 46ch;
	justify-self: end;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--fms-slate, #5A6B7B);
}

/* ---------- Bottom ---------- */

.fms-purpose__row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* The photograph sits a layer above, so the two cards can start hidden
   behind it. */
.fms-purpose__media {
	position: relative;
	z-index: 2;
	min-height: var(--fms-purpose-card-h, 420px);
	overflow: hidden;
	border-radius: 6px;
	background: rgba(17, 24, 33, 0.08);
}

.fms-purpose .fms-purpose__img {
	position: absolute;
	inset: 0;
	max-width: none;
	object-position: var(--fms-purpose-pos, center);
	border: 0;
	border-radius: 0;
}

.fms-purpose__card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: var(--fms-purpose-card-h, 420px);
	padding: 40px 32px;
	border: 1px solid rgba(11, 42, 74, 0.12);
	border-radius: 6px;
	background: #fff;
	text-align: center;
	will-change: transform;
	transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* The whole container takes the secondary colour on hover, as the capability
   cards do, and its wording turns white to stay readable on it. */
.fms-purpose__card:hover {
	border-color: transparent;
	background: var(--fms-purpose-hover, var(--fms-blue, #0F5FA8));
}

.fms-purpose .fms-purpose__card-title,
.fms-purpose .fms-purpose__card-sub,
.fms-purpose .fms-purpose__card-text {
	transition: color 0.35s ease;
}

.fms-purpose .fms-purpose__card:hover .fms-purpose__card-title,
.fms-purpose .fms-purpose__card:hover .fms-purpose__card-sub {
	color: #fff;
}

.fms-purpose .fms-purpose__card:hover .fms-purpose__card-text {
	color: rgba(255, 255, 255, 0.82);
}

.fms-purpose .fms-purpose__card-title {
	margin: 0 0 14px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: #101820;
}

.fms-purpose .fms-purpose__card-sub {
	margin: 0 0 16px;
	max-width: 28ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--fms-purpose-accent, var(--fms-navy, #0B2A4A));
}

.fms-purpose .fms-purpose__card-text {
	margin: 0;
	max-width: 36ch;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--fms-slate, #5A6B7B);
}

/* ---------- Button ----------

   The About section's button: a solid block with the arrow in its own
   square of the primary colour. */

.fms-purpose__actions {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

.fms-purpose__btn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 7px 7px 7px 24px;
	border-radius: 6px;
	background: var(--fms-purpose-btn, var(--fms-extra-3, #111111));
	color: var(--fms-purpose-btn-text, #fff);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.fms-purpose .fms-purpose__btn-text {
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--fms-purpose-btn-text, #fff);
}

.fms-purpose__btn-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 4px;
	background: var(--fms-purpose-btn-accent, var(--fms-navy, #0B2A4A));
	transition: transform 0.25s ease;
}

.fms-purpose__btn-icon::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background-color: #fff;
	-webkit-mask-image: var(--fms-purpose-arrow);
	mask-image: var(--fms-purpose-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-purpose__btn:hover,
.fms-purpose__btn:focus-visible {
	/* Solid first for browsers without color-mix, which would drop the line. */
	background: #2b2b2b;
	background: var(--fms-purpose-btn-hover, #2b2b2b);
	color: var(--fms-purpose-btn-text, #fff);
	text-decoration: none;
}

.fms-purpose__btn:hover .fms-purpose__btn-icon {
	transform: translateX(3px);
}

.fms-purpose__btn:focus-visible {
	outline: 2px solid var(--fms-purpose-accent, var(--fms-navy, #0B2A4A));
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.fms-purpose__btn,
	.fms-purpose__btn-icon,
	.fms-purpose__card,
	.fms-purpose .fms-purpose__card-title,
	.fms-purpose .fms-purpose__card-sub,
	.fms-purpose .fms-purpose__card-text {
		transition: none;
	}
	.fms-purpose__btn:hover .fms-purpose__btn-icon {
		transform: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-purpose__head {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		margin-bottom: 36px;
	}

	.fms-purpose .fms-purpose__title,
	.fms-purpose .fms-purpose__desc {
		max-width: none;
	}

	.fms-purpose .fms-purpose__desc {
		justify-self: stretch;
	}

	.fms-purpose__row {
		gap: 14px;
	}

	.fms-purpose__card {
		padding: 28px 18px;
	}

	.fms-purpose .fms-purpose__card-sub {
		font-size: 15px;
	}

	.fms-purpose .fms-purpose__card-text {
		font-size: 14px;
	}

	.fms-purpose__actions {
		margin-top: 36px;
	}
}

/* ---------- Mobile ---------- */

/* Stacked on a phone, in reading order, with nothing hidden: the script
   leaves the cards where they are below this width. */
@media (max-width: 767px) {
	.fms-purpose__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.fms-purpose__card {
		min-height: 0;
		padding: 32px 22px;
	}

	.fms-purpose__media {
		min-height: 300px;
	}

	.fms-purpose__actions {
		margin-top: 32px;
	}
}

/* ==========================================================================
   Call to action, centred — one band on a photograph, everything centred.
   The veil and the button are the homepage CTA's own (.fms-cta2__veil,
   .fms-cta2__btn); only the band, the photograph and the wording are here.
   ========================================================================== */

.fms-cta3,
.fms-cta3 *,
.fms-cta3 *::before,
.fms-cta3 *::after {
	box-sizing: border-box;
}

.fms-cta3 {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	min-height: var(--fms-cta3-h, 560px);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-top: -1px;
	overflow: hidden;
	isolation: isolate;
	background: var(--fms-extra-3, #111111);
	color: #fff;
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

.fms-cta3__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.fms-cta3__image {
	position: absolute;
	inset: 0;
	display: block;
	background-image: var(--fms-cta3-image, none);
	background-size: cover;
	background-position: var(--fms-cta3-pos, center);
	background-repeat: no-repeat;
}

.fms-cta3__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--fms-cta3-pos, center);
}

/* Held still while the page scrolls over it, as the Closing Figure's fixed
   option does. */
.fms-cta3--fixed .fms-cta3__image {
	background-attachment: fixed;
}

.fms-cta3__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
	text-align: center;
}

/* The homepage CTA's heading, centred. */
.fms-cta3 .fms-cta3__title {
	margin: 0 0 22px;
	max-width: 20ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(2rem, 3.6vw, 3.25rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: #fff;
	text-wrap: balance;
}

.fms-cta3 .fms-cta3__desc {
	margin: 0 0 32px;
	max-width: 60ch;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
}

.fms-cta3__actions {
	display: flex;
	justify-content: center;
}

@media (max-width: 1024px) {
	.fms-cta3 {
		min-height: var(--fms-cta3-h-t, 480px);
	}

	/* Fixed backgrounds are unreliable on touch devices. */
	.fms-cta3--fixed .fms-cta3__image {
		background-attachment: scroll;
	}
}

@media (hover: none) {
	.fms-cta3--fixed .fms-cta3__image {
		background-attachment: scroll;
	}
}

@media (max-width: 767px) {
	.fms-cta3 {
		min-height: var(--fms-cta3-h-m, 520px);
	}

	.fms-cta3 .fms-cta3__title {
		margin-bottom: 18px;
	}

	.fms-cta3 .fms-cta3__desc {
		margin-bottom: 26px;
		font-size: 15px;
	}
}

/* ==========================================================================
   Call to action, video — a main container holding one rounded inner
   column, the video and the wording both inside that same column rather
   than the video filling the whole section. The button is still the
   homepage CTA's shared component; the veil here is this section's own
   flat tint, and the label carries its own frosted-glass background.
   ========================================================================== */

.fms-cta4,
.fms-cta4 *,
.fms-cta4 *::before,
.fms-cta4 *::after {
	box-sizing: border-box;
}

.fms-cta4 {
	position: relative;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-top: -1px;
	background: #fff;
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

.fms-cta4__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
}

/* The one inner column: the video (or its fallback image) and the wording
   both sit inside it, so the rounding and the picture read as one card. */
.fms-cta4__col {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--fms-cta4-h, 560px);
	overflow: hidden;
	border-radius: 6px;
	isolation: isolate;
	background: var(--fms-extra-3, #111111);
	color: #fff;
}

.fms-cta4__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.fms-cta4 .fms-cta4__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--fms-cta4-pos, center);
}

/* Flat, not graduated: the wording sits centred over it, not pinned to one
   edge, so an even tint reads better than a band that darkens toward a
   corner. */
.fms-cta4__veil {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var(--fms-cta4-overlay, 0.45);
	pointer-events: none;
}

.fms-cta4__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 640px;
	padding: 64px 40px;
	text-align: center;
}

/* This section's own treatment: a frosted chip rather than the plain
   outlined pill other sections use, so the label reads clearly on its own
   without needing the veil turned up. */
.fms-cta4 .fms-label {
	border-color: rgba(255, 255, 255, 0.32);
	background: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
}

.fms-cta4__label {
	margin: 0 0 24px;
}

.fms-cta4 .fms-cta4__title {
	margin: 0 0 32px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: #fff;
	text-wrap: balance;
}

@media (max-width: 1024px) {
	.fms-cta4__col {
		min-height: var(--fms-cta4-h-t, 480px);
	}
}

@media (max-width: 767px) {
	.fms-cta4__inner {
		padding: var(--fms-pad-y, 40px) var(--fms-pad-x, 15px);
	}

	.fms-cta4__col {
		min-height: var(--fms-cta4-h-m, 420px);
	}

	.fms-cta4__content {
		padding: 40px 24px;
	}

	.fms-cta4 .fms-cta4__title {
		margin-bottom: 24px;
	}
}

/* ==========================================================================
   Products, dark

   A dark grey ground with the pattern drawn in white rather than black, the
   heading and its call to action, one photograph with points marked on it,
   and a paged slider closed by a single figure.
   ========================================================================== */

.fms-product2,
.fms-product2 *,
.fms-product2 *::before,
.fms-product2 *::after {
	box-sizing: border-box;
}

.fms-product2 {
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	overflow: hidden;
	background: var(--fms-product2-bg, var(--fms-dark, #1C2228));
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

/* The lines are drawn in white here: on this ground a black line is invisible. */
.fms-product2__pattern {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	pointer-events: none;
}

.fms-product2--pattern-lines .fms-product2__pattern {
	/* An L at the corner of each tile rather than a line running the whole way down: it reads as a drawing sheet instead of a ruled page. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M0.5 0.5 V26 H26' fill='none' stroke='rgba(255,255,255,0.16)' stroke-width='1'/%3E%3C/svg%3E");
	background-size: var(--fms-pattern-tile, 160px) var(--fms-pattern-tile, 160px);
}

.fms-product2--pattern-grid .fms-product2__pattern {
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px;
}

.fms-product2--pattern-dots .fms-product2__pattern {
	background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
	background-size: 22px 22px;
}

.fms-product2__inner {
	position: relative;
	z-index: 1;
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
}

/* ---------- Heading ---------- */

.fms-product2__label {
	margin: 0 0 30px;
	border-color: rgba(255, 255, 255, 0.18);
	background: var(--fms-product2-label-bg, var(--fms-extra-3, #111111));
	color: #fff;
}

.fms-product2 .fms-label__mark {
	background: var(--fms-product2-accent, var(--fms-blue, #0F5FA8));
}

.fms-product2 .fms-product2__title {
	margin: 0 0 28px;
	max-width: 18ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #fff;
}

.fms-product2__lead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

.fms-product2 .fms-product2__desc {
	margin: 0;
	max-width: 52ch;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.7);
}

/* ---------- Button ---------- */

.fms-product2__btn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	flex: none;
	padding: 7px 7px 7px 24px;
	border-radius: 6px;
	background: var(--fms-product2-btn, var(--fms-blue, #0F5FA8));
	color: #fff;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.fms-product2 .fms-product2__btn-text {
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: #fff;
}

.fms-product2__btn-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 4px;
	background: var(--fms-product2-btn-accent, var(--fms-extra-3, #111111));
	transition: transform 0.25s ease;
}

/* Drawn as a mask, so the supplied black artwork comes through white. */
.fms-product2__btn-icon::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background-color: #fff;
	-webkit-mask-image: var(--fms-product2-arrow);
	mask-image: var(--fms-product2-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-product2__btn:hover,
.fms-product2__btn:focus-visible {
	/* Solid first for browsers without color-mix, which would drop the line. */
	background: #0d4e8a;
	background: color-mix(in srgb, #ffffff 16%, var(--fms-product2-btn, #0F5FA8));
	color: #fff;
	text-decoration: none;
}

.fms-product2__btn:hover .fms-product2__btn-icon {
	transform: translateX(3px);
}

.fms-product2__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---------- The wording and the photograph, one row ---------- */

/* The heading reads down the left of the section and the picture fills the
   right. The picture is held in from the sides of its own column, and that
   inset is what the marks' wording sits in — off the photograph, never
   across it. */
.fms-product2__top {
	display: grid;
	grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
	align-items: center;
	gap: 56px;
}

/* Down the column rather than across, now that the column is narrow. */
.fms-product2__top .fms-product2__lead {
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

.fms-product2 .fms-product2__top .fms-product2__desc {
	max-width: 42ch;
}

/* ---------- Photograph with its points ---------- */

/* Held in from the sides of its column, which is what leaves room either side
   for the wording on the points to sit off the picture rather than across it. */
.fms-product2__figure {
	position: relative;
	margin: 0 auto;
	max-width: 66%;
}

/* The photograph answers the pointer: it drifts towards it and tilts with it.
   The movement is written as a transform by the script and carried by a
   transition rather than a frame loop, which is what gives it the lag that
   makes it read as floating.

   The perspective lives on the figure, so the tilt has depth to turn in, and
   the marks placed around the figure are left out of it — they are siblings of
   this frame, not children, so they hold their places. */
.fms-product2__figure {
	perspective: 1100px;
}

.fms-product2__frame {
	display: block;
	border-radius: 6px;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	transform-style: preserve-3d;
}

.fms-product2__figure-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	transition: transform 0.6s ease;
}

.fms-product2__frame:hover .fms-product2__figure-img {
	transform: scale(1.03);
}

/* Each point covers the whole picture, and the mark, the leader and the
   wording are placed inside it.

   The wording is pinned to the edge of the picture rather than measured out
   from the mark. That is what keeps it off the photograph whatever the mark's
   position, and it holds while a hover grows the photograph, since the growth
   happens inside the frame and the wording is already outside it.

   The leader is an L drawn from two borders, and both arms start on the mark's
   centre: the upright begins at the mark's own x, the flat one at the height
   the upright reaches. */
.fms-product2__point {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.fms-product2__dot {
	position: absolute;
	z-index: 1;
	left: var(--fms-point-x, 50%);
	top: var(--fms-point-y, 50%);
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: var(--fms-product2-accent, var(--fms-blue, #0F5FA8));
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
}

/* The ring that goes out from the dot. */
.fms-product2__dot::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid var(--fms-product2-accent, var(--fms-blue, #0F5FA8));
	animation: fms-product2-ping 2.6s ease-out infinite;
}

@keyframes fms-product2-ping {
	0%   { transform: scale(1); opacity: 0.7; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}

.fms-product2__point-line {
	position: absolute;
	/* Behind the mark, so the mark reads as sitting on top of its own leader. */
	z-index: 0;
	display: block;
	pointer-events: none;
}

/* Out to the right: up from the mark, then across and past the right edge. */
.fms-product2__point--right .fms-product2__point-line {
	left: var(--fms-point-x, 50%);
	top: calc(var(--fms-point-y, 50%) - var(--fms-point-rise, 60px));
	/* Stops at the edge of the picture rather than running past it, so the
	   wording beyond has clear ground to sit on. */
	right: 0;
	height: var(--fms-point-rise, 60px);
	border-top: 1px solid rgba(255, 255, 255, 0.55);
	border-left: 1px solid rgba(255, 255, 255, 0.55);
}

.fms-product2__point--right .fms-product2__point-text {
	position: absolute;
	left: calc(100% + 34px);
	top: calc(var(--fms-point-y, 50%) - var(--fms-point-rise, 60px));
	transform: translateY(-50%);
}

/* Out to the left: the same, mirrored. */
.fms-product2__point--left .fms-product2__point-line {
	right: calc(100% - var(--fms-point-x, 50%));
	top: calc(var(--fms-point-y, 50%) - var(--fms-point-rise, 60px));
	left: 0;
	height: var(--fms-point-rise, 60px);
	border-top: 1px solid rgba(255, 255, 255, 0.55);
	border-right: 1px solid rgba(255, 255, 255, 0.55);
}

.fms-product2__point--left .fms-product2__point-text {
	position: absolute;
	right: calc(100% + 34px);
	top: calc(var(--fms-point-y, 50%) - var(--fms-point-rise, 60px));
	transform: translateY(-50%);
	text-align: right;
}

/* Straight down from the mark to under the picture, and straight up to over
   it, with the wording centred on the mark. */
.fms-product2__point--down .fms-product2__point-line {
	left: var(--fms-point-x, 50%);
	top: var(--fms-point-y, 50%);
	bottom: -18px;
	width: 1px;
	background: rgba(255, 255, 255, 0.55);
}

.fms-product2__point--down .fms-product2__point-text,
.fms-product2__point--up .fms-product2__point-text {
	text-align: center;
}

.fms-product2__point--down .fms-product2__point-text {
	position: absolute;
	left: var(--fms-point-x, 50%);
	top: calc(100% + 52px);
	transform: translateX(-50%);
}

.fms-product2__point--up .fms-product2__point-line {
	left: var(--fms-point-x, 50%);
	top: -18px;
	bottom: calc(100% - var(--fms-point-y, 50%));
	width: 1px;
	background: rgba(255, 255, 255, 0.55);
}

.fms-product2__point--up .fms-product2__point-text {
	position: absolute;
	left: var(--fms-point-x, 50%);
	bottom: calc(100% + 52px);
	transform: translateX(-50%);
}

.fms-product2 .fms-product2__point-text {
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.01em;
	/* Its wording sits outside the picture, so the browser has no room to
	   measure it against and would otherwise break it at every space. The
	   natural width is asked for and then capped, which is what lets a long
	   mark fall onto a second line and a short one stay on one. */
	width: max-content;
	max-width: 20ch;
	color: #fff;
}

/* Out to the sides there is only the gutter beside the picture to work in, so
   those two are held tighter than the ones above and below it. */
.fms-product2__point--right .fms-product2__point-text,
.fms-product2__point--left .fms-product2__point-text {
	max-width: 12ch;
}

/* ---------- The marks draw themselves in ----------

   The dot lands first, its leader is drawn out from it — up the upright, then
   along the flat arm — and the wording arrives once the leader has reached it.

   The waiting state is only ever set under .is-armed, which the script puts on
   the figure. Where the script or GSAP never runs, the marks are simply there.
   Each direction names its own starting clip and its own drawing, so one pair
   of rules covers all four. */
.fms-product2__point--right {
	--fms-point-clip: inset(100% calc(100% - 1px) 0 0);
	--fms-point-draw: fms-point-draw-right;
}

.fms-product2__point--left {
	--fms-point-clip: inset(100% 0 0 calc(100% - 1px));
	--fms-point-draw: fms-point-draw-left;
}

.fms-product2__point--down {
	--fms-point-clip: inset(0 0 100% 0);
	--fms-point-draw: fms-point-draw-down;
}

.fms-product2__point--up {
	--fms-point-clip: inset(100% 0 0 0);
	--fms-point-draw: fms-point-draw-up;
}

.fms-product2__figure.is-armed .fms-product2__dot {
	/* Its own property, so the centring transform on the dot is left alone. */
	scale: 0;
}

.fms-product2__figure.is-armed .fms-product2__dot::after {
	animation-play-state: paused;
}

.fms-product2__figure.is-armed .fms-product2__point-line {
	clip-path: var(--fms-point-clip, inset(0 0 100% 0));
}

.fms-product2__figure.is-armed .fms-product2__point-text {
	opacity: 0;
}

.fms-product2__figure.is-armed .fms-product2__point--right .fms-product2__point-text {
	translate: -14px 0;
}

.fms-product2__figure.is-armed .fms-product2__point--left .fms-product2__point-text {
	translate: 14px 0;
}

.fms-product2__figure.is-armed .fms-product2__point--down .fms-product2__point-text {
	translate: 0 -12px;
}

.fms-product2__figure.is-armed .fms-product2__point--up .fms-product2__point-text {
	translate: 0 12px;
}

.fms-product2__point.is-drawn .fms-product2__dot {
	scale: 1;
	transition: scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fms-product2__point.is-drawn .fms-product2__dot::after {
	animation-play-state: running;
}

.fms-product2__point.is-drawn .fms-product2__point-line {
	animation: var(--fms-point-draw) 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.24s forwards;
}

.fms-product2__point.is-drawn .fms-product2__point-text {
	opacity: 1;
	translate: 0 0;
	transition:
		opacity 0.5s ease 1.02s,
		translate 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.02s;
}

/* Up the upright first, then out along the top. The halfway mark is where the
   corner is turned. */
@keyframes fms-point-draw-right {
	0%   { clip-path: inset(100% calc(100% - 1px) 0 0); }
	48%  { clip-path: inset(0 calc(100% - 1px) 0 0); }
	100% { clip-path: inset(0 0 0 0); }
}

@keyframes fms-point-draw-left {
	0%   { clip-path: inset(100% 0 0 calc(100% - 1px)); }
	48%  { clip-path: inset(0 0 0 calc(100% - 1px)); }
	100% { clip-path: inset(0 0 0 0); }
}

@keyframes fms-point-draw-down {
	0%   { clip-path: inset(0 0 100% 0); }
	100% { clip-path: inset(0 0 0 0); }
}

@keyframes fms-point-draw-up {
	0%   { clip-path: inset(100% 0 0 0); }
	100% { clip-path: inset(0 0 0 0); }
}


/* ---------- Slider ---------- */

.fms-product2__slider {
	/* Clear of the wording that hangs below the picture above it. */
	margin-top: 120px;
}

.fms-product2__viewport {
	overflow: hidden;
}

.fms-product2__track {
	display: flex;
	gap: 20px;
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The width is worked out from the number shown at once and the gap between
   them, so the row divides exactly however many are on screen. */
.fms-product2__card {
	display: flex;
	flex-direction: column;
	flex: none;
	width: calc((100% - (20px * (var(--fms-product2-per, 4) - 1))) / var(--fms-product2-per, 4));
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 6px;
	/* The same glass as the card in the hero: a little of the ground behind it
	   comes through, softened. */
	background: rgba(255, 255, 255, 0.07);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.fms-product2 .fms-product2__name {
	margin: 0 0 16px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: #fff;
}

.fms-product2__shot {
	position: relative;
	margin: 0 0 18px;
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 4 / 3;
	padding: 10px;
	background: rgba(255, 255, 255, 0.06);
}

.fms-product2__shot::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s ease;
}

.fms-product2__card:hover .fms-product2__shot::after {
	opacity: 0.18;
}

/* The card that is pointed at turns white and its wording goes dark, the same
   way the process cards do. */
.fms-product2__card {
	transition: background-color 0.35s ease, border-color 0.35s ease;
}

.fms-product2__card:hover,
.fms-product2__card:focus-within {
	border-color: #fff;
	background: #fff;
}

.fms-product2 .fms-product2__card .fms-product2__name,
.fms-product2 .fms-product2__card .fms-product2__card-desc,
.fms-product2 .fms-product2__card .fms-product2__spec dt,
.fms-product2 .fms-product2__card .fms-product2__spec dd,
.fms-product2 .fms-product2__card .fms-product2__spec {
	transition: color 0.35s ease, border-color 0.35s ease;
}

.fms-product2 .fms-product2__card:hover .fms-product2__name,
.fms-product2 .fms-product2__card:focus-within .fms-product2__name,
.fms-product2 .fms-product2__card:hover .fms-product2__spec dd,
.fms-product2 .fms-product2__card:focus-within .fms-product2__spec dd {
	color: #101820;
}

.fms-product2 .fms-product2__card:hover .fms-product2__card-desc,
.fms-product2 .fms-product2__card:focus-within .fms-product2__card-desc {
	color: #55616f;
}

.fms-product2 .fms-product2__card:hover .fms-product2__spec dt,
.fms-product2 .fms-product2__card:focus-within .fms-product2__spec dt {
	color: rgba(16, 24, 32, 0.5);
}

.fms-product2 .fms-product2__card:hover .fms-product2__spec,
.fms-product2 .fms-product2__card:focus-within .fms-product2__spec {
	border-top-color: rgba(16, 24, 32, 0.12);
}

.fms-product2__card:hover .fms-product2__shot,
.fms-product2__card:focus-within .fms-product2__shot {
	background: rgba(16, 24, 32, 0.05);
}

.fms-product2__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.6s ease;
}

.fms-product2__card:hover .fms-product2__shot img {
	transform: scale(1.06);
}

.fms-product2 .fms-product2__card-desc {
	margin: 0 0 18px;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.62);
}

.fms-product2__specs {
	margin: auto 0 0;
	padding: 0;
}

.fms-product2__spec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.fms-product2 .fms-product2__spec dt {
	margin: 0;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42);
}

.fms-product2 .fms-product2__spec dd {
	margin: 0;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	text-align: right;
	color: #fff;
}

/* ---------- Slider navigation ---------- */

.fms-product2__nav {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 32px;
	/* Inset by the card's own border and padding, so the figure lines up with
	   the product name above it rather than with the card's outer edge. */
	padding-inline: 19px;
}

.fms-product2 .fms-product2__count {
	margin: 0;
	flex: none;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.4);
}

.fms-product2__count-now {
	color: #fff;
}

.fms-product2__count-sep {
	margin: 0 4px;
}

.fms-product2__rail {
	position: relative;
	height: 1px;
	flex: 1 1 auto;
	background: rgba(255, 255, 255, 0.18);
}

.fms-product2__rail-fill {
	position: absolute;
	top: -1px;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--fms-product2-accent, var(--fms-blue, #0F5FA8));
	transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.fms-product2__buttons {
	display: flex;
	gap: 12px;
	flex: none;
}

.fms-product2__arrow {
	position: relative;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

/* The chevron is drawn from two borders rather than loaded as a file. */
.fms-product2__arrow::before {
	content: '';
	display: block;
	width: 9px;
	height: 9px;
	border-top: 1.5px solid #fff;
	border-right: 1.5px solid #fff;
}

.fms-product2__arrow--next::before {
	transform: translateX(-2px) rotate(45deg);
}

.fms-product2__arrow--prev::before {
	transform: translateX(2px) rotate(-135deg);
}

.fms-product2__arrow:hover,
.fms-product2__arrow:focus-visible {
	border-color: var(--fms-product2-accent, var(--fms-blue, #0F5FA8));
	background: var(--fms-product2-accent, var(--fms-blue, #0F5FA8));
}

.fms-product2__arrow[disabled] {
	opacity: 0.32;
	cursor: default;
}

.fms-product2__arrow[disabled]:hover {
	border-color: rgba(255, 255, 255, 0.28);
	background: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.fms-product2__figure-img,
	.fms-product2__track,
	.fms-product2__rail-fill,
	.fms-product2__shot img,
	.fms-product2__shot::after,
	.fms-product2__btn,
	.fms-product2__btn-icon {
		transition: none;
	}
	.fms-product2__dot::after {
		animation: none;
	}
	.fms-product2__frame:hover .fms-product2__figure-img,
	.fms-product2__card:hover .fms-product2__shot img,
	.fms-product2__btn:hover .fms-product2__btn-icon {
		transform: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	/* Too tight for two columns: the picture drops under the wording again. */
	.fms-product2__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* Both run the full width of the section here rather than being held to a
	   reading measure: the picture is no longer beside them. */
	.fms-product2 .fms-product2__top .fms-product2__desc {
		max-width: none;
	}

	.fms-product2__lead {
		flex-direction: column;
		align-items: flex-start;
		gap: 26px;
	}

	.fms-product2 .fms-product2__title {
		max-width: none;
	}

	.fms-product2__figure {
		margin-top: 48px;
	}
	.fms-product2__slider {
		margin-top: 96px;
	}


	.fms-product2__card {
		width: calc((100% - 20px) / 2);
	}

	.fms-product2 .fms-product2__point-text {
		font-size: 12px;
	}

	.fms-product2__point-line {
		width: 32px;
	}

}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	/* A smaller tile at this width, so the marks still read as a rhythm rather than as one lost line. */
	.fms-about2--pattern-lines .fms-about2__pattern,
	.fms-product2--pattern-lines .fms-product2__pattern,
	.fms-service2--pattern-lines .fms-service2__pattern,
	.fms-process2--pattern-lines .fms-process2__pattern {
		--fms-pattern-tile: 76px;
	}

	/* Full width here — the wording has left the picture, so there is nothing
	   to leave room for. */
	.fms-product2__figure {
		margin-top: 36px;
		max-width: none;
	}

	/* No room for the wording beside the dots at this width, so only the marks
	   are kept on the picture and the wording is listed under it instead. */
	.fms-product2__point-line,
	.fms-product2 .fms-product2__point-text {
		display: none;
	}

	.fms-product2__slider {
		margin-top: 40px;
	}

	.fms-product2__card {
		width: 100%;
	}

	.fms-product2__nav {
		flex-wrap: wrap;
		gap: 16px;
		margin-top: 24px;
	}

	.fms-product2__rail {
		order: 3;
		flex: 1 0 100%;
	}

	.fms-product2__buttons {
		margin-left: auto;
	}

	.fms-product2__arrow {
		width: 42px;
		height: 42px;
	}

}

/* The points listed as wording, which only stands in on a phone where there
   is no room for it beside the marks. */
.fms-product2__point-list {
	display: none;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 767px) {
	.fms-product2__point-list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 18px;
	}

	.fms-product2 .fms-product2__point-list li {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		font-family: var(--fms-font-heading, sans-serif);
		font-size: 13px;
		font-weight: 500;
		line-height: 1.3;
		color: rgba(255, 255, 255, 0.82);
	}

	.fms-product2__point-list li::before {
		content: '';
		display: block;
		width: 8px;
		height: 8px;
		flex: none;
		border-radius: 50%;
		background: var(--fms-product2-accent, var(--fms-blue, #0F5FA8));
	}
}

/* ==========================================================================
   Product Range — inner page

   A photograph washed with the primary colour (the Shared Background
   technique, drawn directly rather than through [fm_group]), heading left
   and copy right on the row above it, then a 3x3 grid of glass cards in the
   homepage product card style: number top-left, image on its own tint,
   name, description, specification line and a round link button sharing a
   row.
   ========================================================================== */

.fms-product3,
.fms-product3 *,
.fms-product3 *::before,
.fms-product3 *::after {
	box-sizing: border-box;
}

.fms-product3 {
	position: relative;
	z-index: 1;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-top: -1px;
	overflow: hidden;
	isolation: isolate;
	background: var(--fms-product3-ground, var(--fms-navy, #0B2A4A));
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

/* The photograph under everything, and the primary colour laid over it at
   --fms-product3-fade, so the picture only just shows through. */
.fms-product3__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* The flat wash at the section's own strength, with a short, stronger blend
   right at the top edge so the section reads as continuing the hero above it
   rather than starting flat. Both live in this ::after -- which sits inside
   the -1 z-index background layer -- so the blend is guaranteed to sit
   behind the label, heading and cards rather than over them; it can never
   need a z-index fight with the content to stay out of the way. */
.fms-product3__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Solid over most of the section; the photograph only comes through in
	   the bottom-right corner, growing out of the solid colour by degrees. */
	background: radial-gradient(
		ellipse 75% 45% at 100% 100%,
		color-mix(in srgb, var(--fms-product3-ground, var(--fms-navy, #0B2A4A)) calc(var(--fms-product3-fade, 0.82) * 40%), transparent) 0%,
		color-mix(in srgb, var(--fms-product3-ground, var(--fms-navy, #0B2A4A)) calc(var(--fms-product3-fade, 0.82) * 75%), transparent) 45%,
		var(--fms-product3-ground, var(--fms-navy, #0B2A4A)) 100%
	);
}

.fms-product3 .fms-product3__bg-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--fms-product3-bg-pos, center);
	border: 0;
	border-radius: 0;
}

.fms-product3__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	/* Less above than below: the hero fades straight into this section. */
	padding: min(var(--fms-pad-y, 80px), 24px) var(--fms-pad-x, 40px) var(--fms-pad-y, 80px);
}

/* ---------- Top: label and heading left, description right ---------- */

.fms-product3__head {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: end;
	gap: 32px 64px;
	margin-bottom: 48px;
}

.fms-product3 .fms-label__mark {
	background: var(--fms-product3-accent, var(--fms-blue, #0F5FA8));
}

.fms-product3__label {
	margin: 0 0 24px;
}

.fms-product3 .fms-product3__title {
	margin: 0;
	max-width: 20ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #fff;
}

.fms-product3 .fms-product3__desc {
	margin: 0;
	max-width: 46ch;
	justify-self: end;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.68);
}

/* ---------- Bottom: 3x3 grid of cards ---------- */

.fms-product3__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.fms-product3__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

/* A large, low-opacity numeral sitting behind the image itself, purely
   decorative. Clipped by .top's own overflow, so it is held to the image
   column and can never run past it into the card's text below or its edges
   either side -- unlike sizing it against the whole card, this bound moves
   with the image at every column width. */
.fms-product3__num {
	position: absolute;
	top: -0.06em;
	left: 6px;
	z-index: 0;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(56px, 7vw, 96px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.16);
	pointer-events: none;
	user-select: none;
}

.fms-product3__top {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: 4px;
	margin: 0 0 18px;
}

.fms-product3__shot {
	position: relative;
	z-index: 1;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	padding: 10px;
	background: rgba(255, 255, 255, 0.06);
}

.fms-product3__shot img {
	display: block;
	/* The frame keeps its full size; only the picture inside is sized. */
	width: var(--fms-product3-img-w, 70%);
	margin-inline: auto;
	height: 100%;
	object-fit: contain;
	transition: transform 0.6s ease;
}

/* Same global hover as the homepage product cards: the picture grows a
   little inside its own frame. */
.fms-product3__card:hover .fms-product3__shot img {
	transform: scale(1.06);
}

/* The card that is pointed at turns white and its wording goes dark, as the
   home page's product cards do. */
.fms-product3__card {
	transition: background-color 0.35s ease, border-color 0.35s ease;
}

.fms-product3__card:hover,
.fms-product3__card:focus-within {
	border-color: #fff;
	background: #fff;
}

.fms-product3 .fms-product3__name,
.fms-product3 .fms-product3__desc-text,
.fms-product3 .fms-product3__spec dt,
.fms-product3 .fms-product3__spec dd,
.fms-product3__meta {
	transition: color 0.35s ease, border-color 0.35s ease;
}

.fms-product3 .fms-product3__card:hover .fms-product3__name,
.fms-product3 .fms-product3__card:focus-within .fms-product3__name,
.fms-product3 .fms-product3__card:hover .fms-product3__spec dd,
.fms-product3 .fms-product3__card:focus-within .fms-product3__spec dd {
	color: #101820;
}

.fms-product3 .fms-product3__card:hover .fms-product3__desc-text,
.fms-product3 .fms-product3__card:focus-within .fms-product3__desc-text {
	color: #55616f;
}

.fms-product3 .fms-product3__card:hover .fms-product3__spec dt,
.fms-product3 .fms-product3__card:focus-within .fms-product3__spec dt {
	color: rgba(16, 24, 32, 0.5);
}

.fms-product3 .fms-product3__card:hover .fms-product3__meta,
.fms-product3 .fms-product3__card:focus-within .fms-product3__meta {
	border-top-color: rgba(16, 24, 32, 0.12);
}

.fms-product3__card:hover .fms-product3__shot,
.fms-product3__card:focus-within .fms-product3__shot {
	background: rgba(16, 24, 32, 0.05);
}

.fms-product3__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.fms-product3 .fms-product3__name {
	margin: 0 0 10px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: #fff;
}

.fms-product3 .fms-product3__desc-text {
	margin: 0 0 18px;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.62);
}

.fms-product3__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* One row, wrapping only if the width genuinely runs out. Capped short of
   the full row so it can never crowd the icon button beside it, on a
   tablet's wider cards as much as anywhere else. */
.fms-product3__specs {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	max-width: calc(100% - 52px);
	min-width: 0;
}

.fms-product3__spec {
	display: flex;
	align-items: baseline;
	gap: 5px;
}

.fms-product3 .fms-product3__spec dt {
	margin: 0;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.42);
}

.fms-product3 .fms-product3__spec dd {
	margin: 0;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	color: #fff;
}

.fms-product3__link {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--fms-product3-btn, var(--fms-blue, #0F5FA8));
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.fms-product3__link-icon {
	display: block;
	width: 15px;
	height: 15px;
	background-color: #fff;
	-webkit-mask-image: var(--fms-product3-arrow);
	mask-image: var(--fms-product3-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-product3__link:hover,
.fms-product3__link:focus-visible {
	background: color-mix(in srgb, #ffffff 16%, var(--fms-product3-btn, #0F5FA8));
	transform: translateX(2px);
}

.fms-product3__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.fms-product3__shot img,
	.fms-product3__link {
		transition: none;
	}
	.fms-product3__card:hover .fms-product3__shot img,
	.fms-product3__link:hover {
		transform: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-product3__head {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 20px;
	}

	.fms-product3 .fms-product3__desc {
		max-width: none;
		justify-self: start;
	}

	.fms-product3__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-product3 {
		--fms-product3-solid-h: 90px;
		--fms-product3-fade-h: 260px;
	}

	.fms-product3__inner {
		padding: var(--fms-pad-y, 40px) var(--fms-pad-x, 15px);
	}

	.fms-product3__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.fms-product3__meta {
		flex-wrap: wrap;
	}

	.fms-product3__specs {
		max-width: 100%;
	}
}

/* ==========================================================================
   Customisation — heading and a synced counter/list beside a photo slider

   The counter, the list and the photograph all belong to the same slide and
   change together. Every slide and every list already sits in the markup, so
   without the script the first of each simply shows.
   ========================================================================== */

.fms-custom,
.fms-custom *,
.fms-custom *::before,
.fms-custom *::after {
	box-sizing: border-box;
}

.fms-custom {
	position: relative;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-top: -1px;
	overflow: hidden;
	isolation: isolate;
	background: var(--fms-custom-ground, #ffffff);
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

/* The same photograph-under-a-wash the homepage Trust section carries
   itself on, except held fixed to the viewport while the page scrolls
   rather than moving with the section. */
.fms-custom__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--fms-custom-bg-image, none);
	background-position: var(--fms-custom-bg-pos, center);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.fms-custom__veil {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--fms-custom-ground, #ffffff);
	opacity: var(--fms-custom-veil-a, 0.5);
}

.fms-custom__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
}

.fms-custom__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 64px;
	align-items: stretch;
}

/* ---------- Left: heading, counter, list, navigation ---------- */

.fms-custom__aside {
	display: flex;
	flex-direction: column;
}

.fms-custom__label {
	margin: 0 0 24px;
	/* Solid, not the usual transparent outline: against the photograph a
	   glass-only pill was unreadable, the same reason Trust's own label
	   carries a plain white ground. */
	background: #fff;
}

.fms-custom .fms-label__mark {
	background: var(--fms-custom-accent, var(--fms-navy, #0B2A4A));
}

.fms-custom .fms-custom__title {
	margin: 0;
	max-width: 16ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--fms-navy, #0B2A4A);
}

/* The same frosted-glass card the homepage Trust section gives its own
   stat figures: near-solid where backdrop-filter is not supported, glass
   over it where it is, so the photograph still comes through, softened. */
.fms-custom__status {
	/* Takes whatever height the row leaves, so its foot always lines up with
	   the foot of the slider beside it. */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	margin-top: 32px;
	padding: 28px 24px 30px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.88);
}

@supports ( ( backdrop-filter: blur(1px) ) or ( -webkit-backdrop-filter: blur(1px) ) ) {
	.fms-custom__status {
		background: rgba(255, 255, 255, 0.46);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}
}

.fms-custom .fms-custom__count {
	margin: 0 0 20px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--fms-navy, #0B2A4A);
}

.fms-custom__count-sep,
.fms-custom__count-all {
	color: rgba(11, 42, 74, 0.35);
}

/* Fixed rather than merely capped, the same reasoning the tablet and mobile
   breakpoints below already apply to this element: a fixed height holds the
   nav buttons at exactly one position regardless of which slide's list is
   showing, and only a list that genuinely overruns it scrolls. */
.fms-custom__lists {
	height: 172px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.fms-custom__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-custom .fms-custom__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid rgba(11, 42, 74, 0.12);
	font-family: var(--fms-font-body, sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--fms-color-font, #4a5563);
	list-style: none;
}

.fms-custom .fms-custom__list li::marker {
	content: none;
}

.fms-custom__mark {
	display: block;
	flex: none;
	width: 7px;
	height: 7px;
	margin-top: 8px;
	border-radius: 0;
	background: var(--fms-custom-accent, var(--fms-navy, #0B2A4A));
}

.fms-custom__nav {
	display: flex;
	gap: 12px;
	/* Inside the card now, pushed to its foot and parted from the list by the
	   same hairline the list's own rows use. */
	margin-top: auto;
	padding-top: 22px;
	border-top: 1px solid rgba(11, 42, 74, 0.12);
}

.fms-custom__arrow {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(11, 42, 74, 0.16);
	border-radius: 50%;
	/* Sits on the frosted card, so it is a lighter pane of the same glass with
	   the card's own navy hairline, not a second blur laid over the first. */
	background: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.fms-custom__arrow-icon {
	display: block;
	width: 16px;
	height: 16px;
	background-color: var(--fms-custom-accent, var(--fms-navy, #0B2A4A));
	-webkit-mask-image: var(--fms-custom-arrow);
	mask-image: var(--fms-custom-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color 0.25s ease;
}

.fms-custom__arrow--prev .fms-custom__arrow-icon {
	transform: rotate(180deg);
}

.fms-custom__arrow:hover,
.fms-custom__arrow:focus-visible {
	border-color: var(--fms-custom-accent, var(--fms-navy, #0B2A4A));
	background: var(--fms-custom-accent, var(--fms-navy, #0B2A4A));
}

.fms-custom__arrow:hover .fms-custom__arrow-icon,
.fms-custom__arrow:focus-visible .fms-custom__arrow-icon {
	background-color: #fff;
}

.fms-custom__arrow:focus-visible {
	outline: 2px solid var(--fms-custom-accent, var(--fms-navy, #0B2A4A));
	outline-offset: 3px;
}

/* ---------- Right: a peek slider, several slides in view at once ---------- */

.fms-custom__stage {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* The slides stretch to whatever height the row ends up, so the slider and
   the card beside it always end together. */
.fms-custom__viewport {
	display: flex;
	flex: 1 1 auto;
	overflow: hidden;
	border-radius: 6px;
}

.fms-custom__track {
	display: flex;
	flex: 1 0 100%;
	gap: 20px;
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The width is worked out from how many are shown at once and the gap
   between them, exactly as the homepage product slider does, so the two
   never disagree when the breakpoints change what is visible. */
.fms-custom__slide {
	position: relative;
	flex: none;
	display: flex;
	flex-direction: column;
	width: calc((100% - (20px * (var(--fms-custom-per, 2) - 1))) / var(--fms-custom-per, 2));
	min-height: 440px;
	padding: 28px;
	overflow: hidden;
	border-radius: 6px;
	background-color: var(--fms-color-dark, #1C2228);
}

.fms-custom__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.fms-custom__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

/* The same global hover as the homepage product cards: the picture grows a
   little inside its own frame. */
.fms-custom__slide:hover .fms-custom__media img {
	transform: scale(1.06);
}

.fms-custom__slide::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.05) 55%, transparent 75%);
	pointer-events: none;
}

/* Solid rather than translucent: a light photograph behind it (an office, a
   pale wall) was swallowing a glassy chip entirely. */
.fms-custom__tag {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	padding: 7px 16px;
	border-radius: 100px;
	background: var(--fms-custom-accent, var(--fms-blue, #0F5FA8));
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}

.fms-custom__body {
	position: relative;
	z-index: 2;
	margin-top: auto;
	max-width: 46ch;
}

.fms-custom .fms-custom__slide-title {
	margin: 0 0 12px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}

.fms-custom .fms-custom__slide-desc {
	margin: 0;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-custom {
		--fms-custom-per: 1;
	}

	.fms-custom__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.fms-custom .fms-custom__title {
		max-width: none;
	}

	.fms-custom__slide {
		min-height: 380px;
	}

	/* Fixed, not just capped: a max-height alone still lets a shorter list
	   leave the box shorter, so the stage below it would still move up and
	   down between slides -- just within the cap instead of past it. A
	   fixed height holds the stage at exactly one position regardless of
	   which list is active, and only a list that genuinely overruns it
	   scrolls. */
	.fms-custom__lists {
		height: 172px;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Fixed backgrounds are unreliable on touch devices, the same reason
	   the About page's video CTA drops it at this width. */
	.fms-custom__bg {
		background-attachment: scroll;
	}
}

@media (hover: none) {
	.fms-custom__bg {
		background-attachment: scroll;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-custom__inner {
		padding: var(--fms-pad-y, 40px) var(--fms-pad-x, 15px);
	}

	.fms-custom__status {
		margin-top: 28px;
	}

	.fms-custom .fms-custom__count {
		font-size: 24px;
	}

	.fms-custom__lists {
		height: 200px;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.fms-custom__slide {
		min-height: 340px;
		padding: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fms-custom__arrow,
	.fms-custom__arrow-icon,
	.fms-custom__track,
	.fms-custom__media img {
		transition: none;
	}
	.fms-custom__slide:hover .fms-custom__media img {
		transform: none;
	}
}

/* ==========================================================================
   Services, stacked

   A white ground with the pattern barely there, the heading and its call to
   action, then the rows. The pile holds still while the page scrolls through
   it and each row opens in turn.
   ========================================================================== */

.fms-service2,
.fms-process2,
.fms-cta2,
.fms-service2 *,
.fms-service2 *::before,
.fms-service2 *::after {
	box-sizing: border-box;
}

.fms-service2 {
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	/* Clipped rather than hidden: overflow:hidden would make this a scroll
	   container, and every sticky row inside it would quietly stop sticking. */
	overflow-x: clip;
	overflow-y: visible;
	background: var(--fms-service2-bg, var(--fms-white, #ffffff));
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

/* Drawn far weaker than on the other sections: it should be felt rather than
   seen against the white. */
.fms-service2__pattern {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	pointer-events: none;
}

.fms-service2--pattern-lines .fms-service2__pattern {
	/* An L at the corner of each tile rather than a line running the whole way
	   down: it reads as a drawing sheet rather than a ruled page. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M0.5 0.5 V26 H26' fill='none' stroke='rgba(17,24,33,0.10)' stroke-width='1'/%3E%3C/svg%3E");
	background-size: var(--fms-pattern-tile, 160px) var(--fms-pattern-tile, 160px);
}

.fms-service2--pattern-grid .fms-service2__pattern {
	background-image:
		linear-gradient(to right, rgba(17, 24, 33, 0.035) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(17, 24, 33, 0.035) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px;
}

.fms-service2--pattern-dots .fms-service2__pattern {
	background-image: radial-gradient(rgba(17, 24, 33, 0.06) 1px, transparent 1px);
	background-size: 22px 22px;
}

.fms-service2__inner {
	position: relative;
	z-index: 1;
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	/* Less at the foot than the head: the section below closes up tight
	   against this one. */
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px) 104px;
}

/* ---------- Heading ---------- */

.fms-service2__label {
	margin: 0 0 26px;
	background: var(--fms-service2-label-bg, var(--fms-white, #ffffff));
	color: #101820;
}

.fms-service2 .fms-label__mark {
	background: var(--fms-blue, #0F5FA8);
}

.fms-service2__lead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

.fms-service2 .fms-service2__title {
	margin: 0;
	max-width: 20ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #101820;
}

/* ---------- Button ---------- */

.fms-service2__btn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	flex: none;
	padding: 7px 7px 7px 24px;
	border-radius: 6px;
	background: var(--fms-service2-btn, var(--fms-extra-3, #111111));
	color: #fff;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.fms-service2 .fms-service2__btn-text {
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: #fff;
}

.fms-service2__btn-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 4px;
	background: var(--fms-service2-btn-accent, var(--fms-navy, #0B2A4A));
	transition: transform 0.25s ease;
}

/* Drawn as a mask, so the supplied black artwork comes through white. */
.fms-service2__btn-icon::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background-color: #fff;
	-webkit-mask-image: var(--fms-service2-arrow);
	mask-image: var(--fms-service2-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-service2__btn:hover,
.fms-service2__btn:focus-visible {
	/* Solid first for browsers without color-mix, which would drop the line. */
	background: #2b2b2b;
	background: color-mix(in srgb, #ffffff 18%, var(--fms-service2-btn, #111111));
	color: #fff;
	text-decoration: none;
}

.fms-service2__btn:hover .fms-service2__btn-icon {
	transform: translateX(3px);
}

/* ---------- The pile ----------

   Each card holds still once it reaches its place and the next slides up over
   it. The holding is position:sticky alone — no pinning and no scroll handler
   — so the movement of the pile is exactly the movement of the scroll.

   Each card stops a little lower than the one before, which is the band of it
   that stays showing. That step comes from the number carried on the card, so
   the stylesheet needs to know nothing about how many there are. */

.fms-service2__stack {
	--fms-service2-top: 108px;
	--fms-service2-step: 26px;

	margin-top: 48px;
}

.fms-service2__card {
	position: sticky;
	top: calc(var(--fms-service2-top, 108px) + (var(--fms-card, 0) * var(--fms-service2-step, 26px)));
	/* A column that centres its one child, so the wording sits on the same
	   line as the arrow held against the far edge. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	min-height: 360px;
	margin-bottom: 26px;
	border-radius: 8px;
	/* Each card must cover the one behind it, so they are layered in order. */
	z-index: calc(var(--fms-card, 0) + 1);
}

.fms-service2__shot {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Solid at the left where the wording is, dissolving into the photograph
   before the middle of the card. */
.fms-service2__shade {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(
		to right,
		var(--fms-service2-accent, var(--fms-navy, #0B2A4A)) 0%,
		var(--fms-service2-accent, var(--fms-navy, #0B2A4A)) 26%,
		transparent 78%
	);
}

.fms-service2__body {
	position: relative;
	z-index: 1;
	max-width: 44ch;
	padding: 48px 40px;
}

.fms-service2__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 26px;
}

/* Drawn as a mask, so one artwork reads white on this ground whatever colour
   the file was drawn in. */
.fms-service2__badge {
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.14);
}

.fms-service2__badge::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	background-color: #fff;
	-webkit-mask-image: var(--fms-service2-mark);
	mask-image: var(--fms-service2-mark);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-service2__no {
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	/* A light tint of the brand blue: the accent itself is too near this
	   ground to read on it. Solid first, for anything that cannot mix. */
	color: rgba(255, 255, 255, 0.72);
	color: color-mix(in srgb, var(--fms-blue, #0F5FA8) 26%, #fff);
}

.fms-service2 .fms-service2__name {
	margin: 0 0 14px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.5rem, 2.4vw, 2.125rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
}

.fms-service2 .fms-service2__text {
	margin: 0;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
}

/* The way through to the service, held against the far edge of the card. */
.fms-service2__go {
	position: absolute;
	z-index: 1;
	top: 50%;
	right: 32px;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 6px;
	background: #fff;
	text-decoration: none;
	transform: translateY(-50%);
	transition: background-color 0.3s ease;
}

.fms-service2__go-icon {
	display: block;
	width: 18px;
	height: 18px;
	background-color: var(--fms-service2-accent, var(--fms-navy, #0B2A4A));
	-webkit-mask-image: var(--fms-service2-arrow);
	mask-image: var(--fms-service2-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform 0.3s ease;
}

.fms-service2__go:hover,
.fms-service2__go:focus-visible {
	background: var(--fms-blue, #0F5FA8);
}

.fms-service2__go:hover .fms-service2__go-icon,
.fms-service2__go:focus-visible .fms-service2__go-icon {
	background-color: #fff;
	transform: translateX(3px);
}

/* Switched off, the cards simply follow one another down the page. */
.fms-service2__stack:not(.fms-service2__stack--stick) .fms-service2__card {
	position: static;
}

/* Laid out as a grid, two across and two down, rather than a pile: the cards
   no longer stick, so each one simply sits in its own cell. */
.fms-service2__stack {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.fms-service2__stack .fms-service2__card {
	/* The wash at the card's left is white on a white section, so the edge is
	   drawn by a shadow: soft below, and a little to the left where the
	   picture does not carry it. */
	box-shadow:
		0 14px 30px -10px rgba(16, 24, 32, 0.2),
		-10px 0 22px -12px rgba(16, 24, 32, 0.24),
		0 0 0 1px rgba(16, 24, 32, 0.06);
	position: relative;
	top: auto;
	z-index: auto;
	margin-bottom: 0;
}

@media (min-width: 768px) {
	/* Half the width, so the ground runs further across and the wording is
	   kept clear of the arrow. */
	/* The wording is held to the solid left of the card so it never runs onto
	   the photograph; the button follows underneath. */
	.fms-service2__stack .fms-service2__body {
		max-width: 54%;
		padding: 40px 0 22px 32px;
	}

	.fms-service2__stack .fms-service2__shade {
		background: linear-gradient(
			to right,
			var(--fms-service2-accent, var(--fms-navy, #0B2A4A)) 0%,
			var(--fms-service2-accent, var(--fms-navy, #0B2A4A)) 40%,
			transparent 100%
		);
	}
}

/* ---------- Light card ----------
   The photograph shows as it is, with only a pale wash at the left for the
   dark wording to sit on; number and mark are set in circles. */
.fms-service2__stack .fms-service2__shade {
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0.94) 0%,
		rgba(255, 255, 255, 0.86) 36%,
		rgba(255, 255, 255, 0) 78%
	);
}

.fms-service2__stack .fms-service2__meta {
	gap: 12px;
	margin-bottom: 18px;
}

.fms-service2__stack .fms-service2__no {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(11, 42, 74, 0.08);
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--fms-service2-accent, var(--fms-navy, #0B2A4A));
}

.fms-service2__sep {
	display: block;
	flex: none;
	width: 1px;
	height: 24px;
	background: rgba(11, 42, 74, 0.2);
}

.fms-service2__stack .fms-service2__badge {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: transparent;
}

.fms-service2__stack .fms-service2__badge::after {
	width: 24px;
	height: 24px;
	background-color: var(--fms-service2-accent, var(--fms-navy, #0B2A4A));
}

.fms-service2__stack .fms-service2__no {
	color: #101820;
}

.fms-service2__stack .fms-service2__badge::after,
.fms-service2__stack .fms-service2__go-icon {
	background-color: #101820;
}

.fms-service2__stack .fms-service2__go:hover .fms-service2__go-icon,
.fms-service2__stack .fms-service2__go:focus-visible .fms-service2__go-icon {
	background-color: var(--fms-blue, #0F5FA8);
}

.fms-service2 .fms-service2__stack .fms-service2__name {
	color: #101820;
}

.fms-service2 .fms-service2__stack .fms-service2__text {
	color: #55616f;
}

.fms-service2__stack .fms-service2__go {
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(11, 42, 74, 0.1), 0 2px 8px rgba(11, 42, 74, 0.08);
}

/* The button sits below the wording rather than pinned to the card's edge. */
.fms-service2__stack .fms-service2__go {
	position: relative;
	top: auto;
	right: auto;
	align-self: flex-start;
	width: 40px;
	height: 40px;
	margin: 0 0 40px 32px;
	transform: none;
}

@media (max-width: 767px) {
	.fms-service2__stack {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.fms-service2__stack .fms-service2__body {
		padding-top: 268px;
		padding-bottom: 20px;
	}

	/* Room under the last card for its shadow, which the section below would
	   otherwise cover. */
	.fms-service2 .fms-service2__inner {
		padding-bottom: 72px;
	}

	/* The heading and its button stand one above the other, so the button
	   cannot be pushed past the edge of the screen. */
	.fms-service2__lead {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.fms-service2 .fms-service2__title {
		max-width: none;
	}

	.fms-service2__btn {
		max-width: 100%;
	}

	/* The pictures are pale at their left edge, so on a narrow card the
	   photograph is held to the top and shown from its right-hand side, where
	   the subject is, then softened into the white ground the wording is on. */
	.fms-service2__stack .fms-service2__card {
		background: #fff;
		/* White card on a white section: lifted off it by a soft shadow, heavier
		   at the foot, with a hairline to keep the edge. */
		box-shadow: 0 14px 30px -8px rgba(16, 24, 32, 0.22), 0 0 0 1px rgba(16, 24, 32, 0.06);
	}

	.fms-service2__stack .fms-service2__shot {
		bottom: auto;
		height: 280px;
		background-position: right center;
	}

	.fms-service2__stack .fms-service2__shade {
		background: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0) 0,
			rgba(255, 255, 255, 0) 170px,
			#fff 280px
		);
	}

	.fms-service2__stack .fms-service2__go {
		margin: 0 0 28px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fms-service2__btn,
	.fms-service2__btn-icon,
	.fms-service2__go,
	.fms-service2__go-icon {
		transition: none;
	}
	.fms-service2__btn:hover .fms-service2__btn-icon,
	.fms-service2__go:hover .fms-service2__go-icon {
		transform: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-service2__stack {
		--fms-service2-top: 92px;
		--fms-service2-step: 22px;
	}

	.fms-service2__card {
		min-height: 300px;
		margin-bottom: 22px;
	}

	.fms-service2__body {
		max-width: 38ch;
		padding: 36px 30px;
	}

	.fms-service2__shade {
		background: linear-gradient(
			to right,
			var(--fms-service2-accent, var(--fms-navy, #0B2A4A)) 0%,
			var(--fms-service2-accent, var(--fms-navy, #0B2A4A)) 34%,
			transparent 88%
		);
	}

	.fms-service2__go {
		right: 24px;
		width: 46px;
		height: 46px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-service2__stack {
		--fms-service2-top: 80px;
		--fms-service2-step: 16px;
	}

	.fms-service2__card {
		min-height: 440px;
		margin-bottom: 16px;
	}

	/* No room to run the wording beside the photograph, so the ground covers
	   the whole card and the picture shows through the top of it. */
	.fms-service2__shade {
		/* Solid first, for anything that cannot mix colours. */
		background: linear-gradient(
			to bottom,
			rgba(11, 42, 74, 0.2) 0%,
			rgba(11, 42, 74, 0.55) 44%,
			var(--fms-service2-accent, var(--fms-navy, #0B2A4A)) 78%
		);
		background: linear-gradient(
			to bottom,
			color-mix(in srgb, var(--fms-service2-accent, #0B2A4A) 20%, transparent) 0%,
			color-mix(in srgb, var(--fms-service2-accent, #0B2A4A) 55%, transparent) 44%,
			var(--fms-service2-accent, var(--fms-navy, #0B2A4A)) 78%
		);
	}

	.fms-service2__body {
		max-width: none;
		padding: 250px 22px 28px;
	}

	.fms-service2__meta {
		margin-bottom: 18px;
	}

	.fms-service2__go {
		top: 22px;
		right: 22px;
		width: 42px;
		height: 42px;
		transform: none;
	}
}

/* ==========================================================================
   Process, stepped

   A light ground carrying a centred heading, then the steps as one route
   across the page: a number, a disc with the step's mark, and the wording
   under it, joined by a line and an arrow. A call to action closes it.
   ========================================================================== */

.fms-process2,
.fms-cta2,
.fms-process2 *,
.fms-process2 *::before,
.fms-process2 *::after {
	box-sizing: border-box;
}

.fms-process2 {
	position: relative;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	overflow-x: clip;
	background: var(--fms-process2-bg, var(--fms-mist, #EEF2F6));
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

/* The join between the section above and this one: a straight run of colour
   from the ground above down to this section's own, so the two are linked by
   the colour changing rather than by a shape laid over the seam.

   Both ends match what they meet — the top is the colour above, the bottom is
   this section's colour — which is what leaves no edge anywhere. */
.fms-process2__blend {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1 * var(--fms-process2-blend-h, 40px));
	height: var(--fms-process2-blend-h, 40px);
	z-index: 0;
	display: block;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		var(--fms-process2-blend-from, var(--fms-white, #ffffff)) 0%,
		var(--fms-process2-bg, var(--fms-mist, #EEF2F6)) 100%
	);
}

.fms-process2__pattern {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	pointer-events: none;
}

.fms-process2--pattern-lines .fms-process2__pattern {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M0.5 0.5 V26 H26' fill='none' stroke='rgba(255,255,255,0.16)' stroke-width='1'/%3E%3C/svg%3E");
	background-size: var(--fms-pattern-tile, 160px) var(--fms-pattern-tile, 160px);
}

.fms-process2--pattern-grid .fms-process2__pattern {
	background-image:
		linear-gradient(to right, rgba(17, 24, 33, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(17, 24, 33, 0.07) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px;
}

.fms-process2--pattern-dots .fms-process2__pattern {
	background-image: radial-gradient(rgba(17, 24, 33, 0.13) 1px, transparent 1px);
	background-size: 22px 22px;
}

.fms-process2__inner {
	position: relative;
	z-index: 1;
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	/* Less at the head than the foot: the section above closes up tight
	   against this one, so a full measure there reads as a gap. */
	padding: 48px var(--fms-pad-x, 40px) var(--fms-pad-y, 80px);
}

/* ---------- Heading ---------- */

/* The heading runs down the middle of this section rather than along the left
   edge, since the steps under it are a row. */
.fms-process2__head {
	text-align: center;
}

.fms-process2__label {
	margin: 0 auto 28px;
	border-color: rgba(17, 24, 33, 0.16);
	background: var(--fms-process2-label-bg, var(--fms-extra-3, #111111));
	color: #101820;
}

.fms-process2 .fms-label__mark {
	background: var(--fms-process2-accent, var(--fms-blue, #0F5FA8));
}

.fms-process2 .fms-process2__title {
	margin: 0 auto 22px;
	max-width: 20ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #101820;
}

.fms-process2 .fms-process2__desc {
	margin: 0 auto;
	max-width: 68ch;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(16, 24, 32, 0.68);
}

/* ---------- The route ----------

   The four steps read across the page as one route: a number, a disc carrying
   the step's mark, then the wording under it, with a joining line and an arrow
   between one step and the next.

   The joins are their own items in the row rather than borders on the steps,
   which is what lets them sit on the discs' own line however long the wording
   under any step runs. */

.fms-process2__steps {
	--fms-process2-disc: 84px;

	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.fms-process2__step {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	text-align: center;
}

/* The disc sits in the middle of its column on its own, and the number is laid
   over its top-left corner rather than beside it — a number in the flow would
   pull the disc off centre, and the wider the number the further off. */
.fms-process2__mark {
	position: relative;
	width: var(--fms-process2-disc, 84px);
	height: var(--fms-process2-disc, 84px);
	margin: 0 auto 26px;
}

/* Set off the disc's top-left corner rather than across it: the number ends
   where the disc's box begins, and the circle inside that box never reaches
   its corner, so the two sit beside each other without touching. */
.fms-process2__no {
	position: absolute;
	z-index: 1;
	bottom: calc(100% - 8px);
	right: calc(100% - 8px);
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(2rem, 3.4vw, 3rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: rgba(16, 24, 32, 0.12);
	font-variant-numeric: tabular-nums;
}

.fms-process2__disc {
	position: relative;
	display: block;
	width: var(--fms-process2-disc, 84px);
	height: var(--fms-process2-disc, 84px);
	flex: none;
	border: 1px solid rgba(17, 24, 33, 0.1);
	border-radius: 50%;
	background: #fff;
	transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Drawn as a mask, so one artwork takes the section's colours whatever the
   file was drawn in. */
.fms-process2__disc::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 34px;
	height: 34px;
	background-color: var(--fms-process2-accent, var(--fms-blue, #0F5FA8));
	-webkit-mask-image: var(--fms-process2-icon);
	mask-image: var(--fms-process2-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color 0.35s ease;
}

.fms-process2__step:hover .fms-process2__disc {
	border-color: var(--fms-process2-accent, var(--fms-blue, #0F5FA8));
	background: var(--fms-process2-accent, var(--fms-blue, #0F5FA8));
}

/* The mark goes white when the disc fills with the accent, or it would
   disappear into it. */
.fms-process2__step:hover .fms-process2__disc::after {
	background-color: #fff;
}

/* The join between two steps, sitting on the discs' own line. */
.fms-process2__join {
	display: flex;
	align-items: center;
	flex: 0 1 140px;
	min-width: 24px;
	height: var(--fms-process2-disc, 84px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-process2__join-line {
	display: block;
	flex: 1 1 auto;
	height: 1px;
	background: rgba(17, 24, 33, 0.16);
}

/* The second half of the join, so the arrow sits in the middle of the gap
   rather than at the end of it. */
.fms-process2__join::after {
	content: '';
	display: block;
	flex: 1 1 auto;
	height: 1px;
	background: rgba(17, 24, 33, 0.16);
}

/* Its arrow is the button's own artwork, so both point the same way. */
.fms-process2__join-mark {
	position: relative;
	display: block;
	width: 46px;
	height: 46px;
	flex: none;
	border: 1px solid rgba(17, 24, 33, 0.16);
	border-radius: 50%;
	background: var(--fms-process2-bg, var(--fms-mist, #EEF2F6));
}

/* The same arrow artwork the button uses, drawn as a mask so it takes the
   accent colour whatever the file is coloured. */
.fms-process2__join-mark::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 16px;
	height: 16px;
	background-color: var(--fms-process2-accent, var(--fms-blue, #0F5FA8));
	-webkit-mask-image: var(--fms-process2-arrow);
	mask-image: var(--fms-process2-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-process2 .fms-process2__name {
	margin: 0 0 12px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #101820;
}

.fms-process2 .fms-process2__text {
	margin: 0;
	max-width: 30ch;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.65;
	color: rgba(16, 24, 32, 0.6);
}

/* ---------- The way in ---------- */

.fms-process2__foot {
	display: flex;
	justify-content: center;
	margin-top: 64px;
}

.fms-process2__btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px 14px 26px;
	border-radius: 6px;
	background: var(--fms-process2-accent, var(--fms-blue, #0F5FA8));
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.fms-process2 .fms-process2__btn-text {
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #fff;
}

.fms-process2__btn-icon {
	display: block;
	width: 18px;
	height: 18px;
	flex: none;
	background-color: #fff;
	-webkit-mask-image: var(--fms-process2-arrow);
	mask-image: var(--fms-process2-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform 0.3s ease;
}

.fms-process2__btn:hover,
.fms-process2__btn:focus-visible {
	background: #0c4b85;
	background: color-mix(in srgb, #000000 16%, var(--fms-process2-accent, #0F5FA8));
}

.fms-process2__btn:hover .fms-process2__btn-icon {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.fms-process2__disc,
	.fms-process2__disc::after,
	.fms-process2__btn,
	.fms-process2__btn-icon {
		transition: none;
	}
	.fms-process2__btn:hover .fms-process2__btn-icon {
		transform: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-process2__inner {
		padding-top: 36px;
	}

	/* Two across rather than four: at this width four columns leave the wording
	   too narrow to read. The joins go with them. */
	.fms-process2__steps {
		--fms-process2-disc: 72px;

		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 32px;
		margin-top: 52px;
	}

	.fms-process2__join {
		display: none;
	}

	.fms-process2__mark {
		margin-bottom: 20px;
	}

	.fms-process2__no {
		bottom: calc(100% - 6px);
		right: calc(100% - 6px);
	}

	.fms-process2 .fms-process2__text {
		max-width: 34ch;
	}

	.fms-process2__foot {
		margin-top: 48px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-process2__blend {
		--fms-process2-blend-h: 20px;
	}

	.fms-process2__inner {
		padding-top: 24px;
	}

	.fms-service2__inner {
		padding-bottom: 20px;
	}

	/* One under the other on a phone. */
	.fms-process2__steps {
		--fms-process2-disc: 64px;

		grid-template-columns: minmax(0, 1fr);
		gap: 38px;
		margin-top: 40px;
	}

	.fms-process2__mark {
		margin-bottom: 16px;
	}

	/* Held the same way as on a desktop: set off the corner, never across the
	   disc. A top/left pair here would beat the bottom/right one and put the
	   number back over the mark. */
	.fms-process2__no {
		bottom: calc(100% - 6px);
		right: calc(100% - 6px);
	}

	.fms-process2__disc::after {
		width: 26px;
		height: 26px;
	}

	.fms-process2 .fms-process2__text {
		max-width: 40ch;
	}

	.fms-process2__foot {
		margin-top: 40px;
	}
}

/* ==========================================================================
   Our Process, sticky — heading and a numbered step timeline left, photo
   right. Pins and scrubs through the four steps as the visitor scrolls.
   ========================================================================== */

.fms-proc3,
.fms-proc3 *,
.fms-proc3 *::before,
.fms-proc3 *::after {
	box-sizing: border-box;
}

.fms-proc3 {
	position: relative;
	z-index: 1;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	background: var(--fms-proc3-ground, var(--fms-mist, #EEF2F6));
}

/* min-height rather than height, so it is a floor: content that genuinely
   needs more room (long descriptions wrapping at a narrow width) is still
   free to grow past one screen. flex + centring means a shorter render just
   sits centred in the middle of that space instead of pinned to the top. */
.fms-proc3__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
}

.fms-proc3__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	gap: 64px;
}

.fms-proc3__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.fms-proc3__label {
	margin: 0 0 24px;
	background: var(--fms-white, #fff);
}

.fms-proc3 .fms-label__mark {
	background: var(--fms-proc3-accent, var(--fms-navy, #0B2A4A));
}

.fms-proc3 .fms-proc3__title {
	margin: 0 0 40px;
	max-width: 100%;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--fms-navy, #0B2A4A);
}

/* ---------- The timeline ---------- */

/* min-height is what lets the four steps spread out to fill a tall screen.
   Each step takes an equal 1/4 share of that height (flex:1, not just
   space-between) rather than only its own content's size, so the numbers
   land at genuinely even intervals even where one description wraps to more
   lines than another -- the extra room in a shorter step's row simply goes
   unused below its own text. The line itself can't be pinned with a fixed
   CSS offset once the gap is no longer a fixed value -- initProcess3()
   measures the first and last number's actual position and writes the
   line's top/height inline, so it always spans exactly badge-centre to
   badge-centre regardless of spacing. */
.fms-proc3__steps {
	position: relative;
	width: 100%;
	min-height: 65vh;
	display: flex;
	flex-direction: column;
}

.fms-proc3__step {
	position: relative;
	display: flex;
	flex: 1 1 0%;
	align-items: flex-start;
	gap: 24px;
}

/* top/height are overwritten inline by initProcess3() once it can measure
   the actual number positions (see the comment above .fms-proc3__steps);
   top:0/bottom:0 is only the resting default for wherever that script does
   not run -- reduced motion, or GSAP/ScrollTrigger unavailable -- so the
   line still spans the full list rather than collapsing to nothing. */
.fms-proc3__line {
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: 25px;
	width: 5px;
	background: var(--fms-proc3-line, #93969C);
	transform: translateX(-50%);
	overflow: hidden;
}

.fms-proc3__line-fill {
	display: block;
	width: 100%;
	height: 0%;
	background: var(--fms-proc3-accent, var(--fms-navy, #0B2A4A));
}

.fms-proc3__num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	flex: none;
	width: 50px;
	height: 50px;
	border-radius: 6px;
	background: var(--fms-proc3-line, #93969C);
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 22px;
	font-weight: 600;
	color: #fff;
	transition: background-color 0.35s ease;
}

.fms-proc3__step.is-active .fms-proc3__num {
	background: var(--fms-proc3-accent, var(--fms-navy, #0B2A4A));
}

.fms-proc3 .fms-proc3__step-title {
	margin: 0 0 8px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: rgba(11, 42, 74, 0.4);
	transition: color 0.35s ease;
}

.fms-proc3 .fms-proc3__step-desc {
	margin: 0;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba(11, 42, 74, 0.35);
	transition: color 0.35s ease;
}

.fms-proc3__step.is-active .fms-proc3__step-title {
	color: var(--fms-navy, #0B2A4A);
}

.fms-proc3__step.is-active .fms-proc3__step-desc {
	color: var(--fms-color-font, #4a5563);
}

/* ---------- Right: photograph, same height as the left column ---------- */

.fms-proc3__frame {
	position: relative;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	border-radius: 6px;
}

/* Taking the photo out of flow (rather than the shared global-hover rule's
   plain in-flow height:100%) stops its own intrinsic aspect ratio from
   contributing to this grid row's auto height -- otherwise a tall portrait
   photo grows the row past the step list's natural height, and the step
   list (stretched to match) shows empty space under its last step instead. */
.fms-proc3__frame img {
	position: absolute;
	inset: 0;
}

/* The photographs lie one over another and the one that is on fades in over
   the rest. The first carries .is-on in the markup, so a single picture shows
   without any script. */
.fms-proc3__frame .fms-proc3__img {
	opacity: 0;
	transition: opacity 1.1s ease, transform 0.6s ease;
}

.fms-proc3__frame .fms-proc3__img.is-on {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.fms-proc3__frame .fms-proc3__img {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fms-proc3__num,
	.fms-proc3__step-title,
	.fms-proc3__step-desc {
		transition: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-proc3__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.fms-proc3 .fms-proc3__title {
		max-width: none;
	}

	/* Not pinned at this width, so the list takes the height of its own steps. */
	.fms-proc3__steps {
		min-height: 0;
		gap: 28px;
	}

	.fms-proc3__frame {
		height: 380px;
		min-height: 0;
	}

	.fms-proc3__num {
		width: 44px;
		height: 44px;
		font-size: 19px;
	}

	/* Half the badge's width, so the line still passes through its centre;
	   the top/height are written inline by initProcess3(), not set here. */
	.fms-proc3__line {
		left: 22px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-proc3__inner {
		padding: var(--fms-pad-y, 40px) var(--fms-pad-x, 15px);
	}

	.fms-proc3__steps {
		min-height: 0;
		gap: 24px;
	}

	.fms-proc3__frame {
		height: 280px;
	}

	.fms-proc3__num {
		width: 40px;
		height: 40px;
		font-size: 17px;
	}

	.fms-proc3__line {
		left: 20px;
	}
}

/* ==========================================================================
   Call to action, video

   A full width video with the invitation on the left and the wording and its
   two buttons on the right, both sitting low in the frame.
   ========================================================================== */

.fms-cta2,
.fms-cta2 *,
.fms-cta2 *::before,
.fms-cta2 *::after {
	box-sizing: border-box;
}

.fms-cta2 {
	position: relative;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	min-height: var(--fms-cta2-h, 620px);
	overflow: hidden;
	isolation: isolate;
	background-color: var(--fms-dark, #1C2228);
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

.fms-cta2__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.fms-cta2__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border: 0;
}

/* Darkest where the wording sits, so the picture keeps its own light at the
   top and the text still reads at the bottom. */
.fms-cta2__veil {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 42%, rgba(0, 0, 0, 0.3) 100%);
	opacity: var(--fms-cta2-overlay, 0.58);
	pointer-events: none;
}

/* A band at the foot in the colour of whatever follows, so the video runs into
   the next section instead of stopping at a line. */
.fms-cta2__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 220px;
	display: block;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent 0%, var(--fms-cta2-fade, var(--fms-extra-3, #111111)) 88%);
}

.fms-cta2__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	min-height: var(--fms-cta2-h, 620px);
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
}

.fms-cta2__cols {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 56px;
	width: 100%;
}

.fms-cta2 .fms-cta2__title {
	margin: 0;
	flex: 1 1 0%;
	max-width: 16ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(2rem, 3.6vw, 3.25rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: #fff;
}

.fms-cta2__body {
	flex: 0 1 var(--fms-rail, 460px);
	min-width: 0;
}

.fms-cta2 .fms-cta2__desc {
	margin: 0 0 26px;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
}

.fms-cta2__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* The pair used across the site: the arrow in its own square, tight on that
   side so the two halves read as one control. */
.fms-cta2__btn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 7px 7px 7px 24px;
	border-radius: 6px;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.fms-cta2 .fms-cta2__btn-text,
.fms-cta3 .fms-cta2__btn-text,
.fms-cta4 .fms-cta2__btn-text {
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.fms-cta2__btn-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 4px;
	transition: transform 0.25s ease;
}

/* Drawn as a mask, so the supplied black artwork comes through white. */
.fms-cta2__btn-icon::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background-color: #fff;
	-webkit-mask-image: var(--fms-cta2-arrow);
	mask-image: var(--fms-cta2-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-cta2__btn--one {
	background: var(--fms-cta2-btn1, var(--fms-blue, #0F5FA8));
	color: #fff;
}

.fms-cta2__btn--one .fms-cta2__btn-icon {
	background: var(--fms-cta2-btn1-accent, var(--fms-extra-3, #111111));
}

.fms-cta2__btn--two {
	background: var(--fms-cta2-btn2, var(--fms-white, #ffffff));
	color: #000;
}

.fms-cta2__btn--two .fms-cta2__btn-icon {
	background: var(--fms-cta2-btn2-accent, var(--fms-blue, #0F5FA8));
}

.fms-cta2__btn--one:hover,
.fms-cta2__btn--one:focus-visible {
	/* Solid first for browsers without color-mix, which would drop the line. */
	background: #2a76bd;
	background: color-mix(in srgb, #ffffff 16%, var(--fms-cta2-btn1, #0F5FA8));
	color: #fff;
	text-decoration: none;
}

.fms-cta2__btn--two:hover,
.fms-cta2__btn--two:focus-visible {
	background: var(--fms-mist, #EEF2F6);
	color: #000;
	text-decoration: none;
}

/* Plain: no block behind it and no square behind the arrow, just the wording
   with the arrow beside it. The arrow keeps the mask so it still takes the
   colour of the text next to it. */
.fms-cta2__btn--plain,
.fms-cta2__btn--plain:hover,
.fms-cta2__btn--plain:focus-visible {
	padding: 7px 4px;
	background: none;
	color: #fff;
}

.fms-cta2__btn--plain {
	gap: 10px;
}

.fms-cta2__btn--plain .fms-cta2__btn-icon {
	width: 16px;
	height: 16px;
	border-radius: 0;
	background: none;
}

.fms-cta2__btn--plain .fms-cta2__btn-icon::before {
	width: 14px;
	height: 14px;
	background-color: currentColor;
}

.fms-cta2__btn--plain:hover .fms-cta2__btn-text {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.fms-cta2__btn:hover .fms-cta2__btn-icon {
	transform: translateX(3px);
}

.fms-cta2__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.fms-cta2__btn,
	.fms-cta2__btn-icon {
		transition: none;
	}
	.fms-cta2__btn:hover .fms-cta2__btn-icon {
		transform: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-cta2,
	.fms-cta2__inner {
		min-height: var(--fms-cta2-h-t, 560px);
	}

	.fms-cta2__cols {
		gap: 32px;
	}

	.fms-cta2 .fms-cta2__title {
		max-width: 14ch;
	}

	.fms-cta2__body {
		flex: 0 1 var(--fms-rail, 380px);
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-cta2,
	.fms-cta2__inner {
		min-height: var(--fms-cta2-h-m, 620px);
	}

	.fms-cta2__cols {
		flex-direction: column;
		align-items: flex-start;
		gap: 26px;
	}

	.fms-cta2 .fms-cta2__title {
		flex: 0 0 auto;
		max-width: none;
	}

	.fms-cta2__body {
		flex: 0 0 auto;
		width: 100%;
	}

	.fms-cta2__buttons {
		width: 100%;
	}

	.fms-cta2__btn {
		flex: 1 1 auto;
		justify-content: space-between;
	}
}

/* ==========================================================================
   Footer, two bands

   The mark and the sentence about the company across the top, a hairline,
   then the copyright on the left with the links, the address and the social
   marks ranged to the right.
   ========================================================================== */

.fms-footer2,
.fms-footer2 *,
.fms-footer2 *::before,
.fms-footer2 *::after {
	box-sizing: border-box;
}

.fms-footer2 {
	position: relative;
	z-index: 1;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	overflow-x: clip;
	/* A hairline of the wording's own colour across the top edge, which is
	   what parts the footer from whatever section runs into it. */
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	background: var(--fms-footer2-bg, var(--fms-extra-3, #111111));
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

.fms-footer2__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: min(var(--fms-pad-y, 80px), 56px) var(--fms-pad-x, 40px);
}

/* ---------- The band ---------- */

/* One band, no rule across it: the mark and the copyright down the left, the
   three groups ranged to the right. */
.fms-footer2__body {
	display: flex;
	flex-direction: column;
}

.fms-footer2__top,
.fms-footer2__bottom {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: start;
	gap: 56px;
}

/* A hairline between the top container (mark and tagline) and the bottom one
   (marks, links, contact). The two halves of the 40px that used to part the
   rows sit either side of it, so the spacing is as it was. */
.fms-footer2__top {
	align-items: center;
	/* As much below the row as the footer's own padding leaves above it. */
	padding-bottom: min(var(--fms-pad-y, 80px), 56px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.fms-footer2__bottom {
	padding-top: 40px;
}

.fms-footer2__logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	max-width: 100%;
	line-height: 0;
	text-decoration: none;
}

.fms-footer2__logo img {
	display: block;
	width: auto;
	height: auto;
	max-height: var(--fms-footer2-logo-h, 40px);
	max-width: 100%;
}

/* No reading measure here: the only wording left in this column is the
   copyright, which is meant to hold one line. */
.fms-footer2__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	min-width: 0;
}


.fms-footer2 .fms-footer2__desc {
	max-width: 46ch;
	margin: 0;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.6);
}

.fms-footer2 .fms-footer2__copy {
	margin: 0;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.5);
}

/* The groups divide the column they sit in rather than bunching at its left
   edge, so the band reaches the full width of the page. */
.fms-footer2__groups {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 32px;
}

.fms-footer2__group {
	min-width: 0;
}

.fms-footer2 .fms-footer2__group-title {
	margin: 0 0 18px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.46);
}

.fms-footer2 .fms-footer2__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-footer2 .fms-footer2__menu li {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.fms-footer2 .fms-footer2__menu li:last-child {
	margin-bottom: 0;
}

.fms-footer2 .fms-footer2__menu a {
	font-family: var(--fms-font-body, sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: #fff;
	text-decoration: none;
	transition: color 0.25s ease;
}

.fms-footer2 .fms-footer2__menu a:hover,
.fms-footer2 .fms-footer2__menu a:focus-visible {
	color: var(--fms-footer2-accent, var(--fms-blue, #0F5FA8));
}

.fms-footer2 .fms-footer2__address,
.fms-footer2 .fms-footer2__contact {
	margin: 0 0 12px;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	color: #fff;
}

.fms-footer2 .fms-footer2__contact:last-child {
	margin-bottom: 0;
}

.fms-footer2 .fms-footer2__contact a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

.fms-footer2 .fms-footer2__contact a:hover,
.fms-footer2 .fms-footer2__contact a:focus-visible {
	color: var(--fms-footer2-accent, var(--fms-blue, #0F5FA8));
}

/* ---------- Social marks ---------- */

.fms-footer2 .fms-footer2__social {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-footer2 .fms-footer2__social li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-footer2__social-link {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Drawn as a mask, so one white artwork serves every state. */
.fms-footer2__social-mark {
	display: block;
	width: 24px;
	height: 24px;
	background-color: #fff;
	-webkit-mask-image: var(--fms-footer2-mark);
	mask-image: var(--fms-footer2-mark);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-footer2__social-link:hover,
.fms-footer2__social-link:focus-visible {
	border-color: var(--fms-footer2-accent, var(--fms-blue, #0F5FA8));
	background: var(--fms-footer2-accent, var(--fms-blue, #0F5FA8));
}

@media (prefers-reduced-motion: reduce) {
	.fms-footer2__social-link,
	.fms-footer2 .fms-footer2__menu a,
	.fms-footer2 .fms-footer2__contact a {
		transition: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	/* Too tight for the mark to sit beside three groups, so it takes the row
	   above them — and the copyright drops below the groups rather than
	   staying with the mark. The side is dissolved into the column so its two
	   parts can separate. */
	.fms-footer2__body {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
	}

	.fms-footer2__top,
	.fms-footer2__bottom,
	.fms-footer2__side {
		display: contents;
	}

	/* Mark, line, links and address, marks, copyright — in that order. */
	.fms-footer2 .fms-footer2__desc {
		order: 1;
		max-width: none;
		width: 100%;
		padding-bottom: 24px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	}

	.fms-footer2__groups {
		order: 2;
		width: 100%;
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: 28px;
	}

	.fms-footer2__group--social {
		order: 3;
	}

	.fms-footer2 .fms-footer2__copy {
		order: 4;
		margin: 0;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	/* The mark at the top, the groups under it, the copyright last — the same
	   reading order as on a wide screen, stood on end. The side is dissolved
	   into the column so its two parts can separate. */
	.fms-footer2__body {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 30px;
	}

	.fms-footer2__top,
	.fms-footer2__bottom,
	.fms-footer2__side {
		display: contents;
	}

	.fms-footer2__groups {
		order: 2;
		display: grid;
		/* Two across: the links beside the way to reach us. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
		gap: 30px 24px;
		width: 100%;
	}

	.fms-footer2 .fms-footer2__copy {
		order: 4;
		margin: 0;
	}
}

/* ==========================================================================
   Trust

   A photograph of the works carries the whole section, washed back far enough
   for dark wording to sit straight on it. The claim is made down the left, the
   figures that back it stand in their own cards to the right, and a ribbon of
   pictures runs along the bottom.
   ========================================================================== */

.fms-trust2,
.fms-trust2 *,
.fms-trust2 *::before,
.fms-trust2 *::after {
	box-sizing: border-box;
}

.fms-trust2 {
	position: relative;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	overflow: hidden;
	background: var(--fms-mist, #EEF2F6);
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

/* ---------- The ground ---------- */

.fms-trust2__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--fms-trust2-image, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* The wash is what lets dark wording sit on a bright photograph without a box
   behind it. Its strength is the client's to set. */
.fms-trust2__veil {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--fms-trust2-veil, var(--fms-white, #FFFFFF));
	opacity: var(--fms-trust2-veil-a, 0.5);
}

.fms-trust2__inner {
	position: relative;
	z-index: 1;
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
}

/* ---------- The claim and the figures ---------- */

.fms-trust2__cols {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
	align-items: start;
	gap: 56px;
}

.fms-trust2__body {
	min-width: 0;
}

.fms-trust2__label {
	margin: 0 0 26px;
	background: #fff;
}

.fms-trust2 .fms-label__mark {
	background: var(--fms-trust2-accent, var(--fms-blue, #0F5FA8));
}

.fms-trust2 .fms-trust2__title {
	margin: 0 0 20px;
	max-width: 15ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #101820;
}

.fms-trust2 .fms-trust2__desc {
	margin: 0;
	max-width: 36ch;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(16, 24, 32, 0.7);
}

.fms-trust2__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	min-width: 0;
}

/* Each figure stands on its own card, so it reads against the photograph
   rather than getting lost in it. */
.fms-trust2__stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: 28px 24px 30px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 6px;
	/* Near-solid where the ground behind cannot be blurred. */
	background: rgba(255, 255, 255, 0.88);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.4s ease,
		border-color 0.4s ease,
		box-shadow 0.4s ease;
}

/* The same frosted glass the hero card was given: the photograph carries on
   through the card, softened, instead of stopping at its edge. */
@supports ( ( backdrop-filter: blur(1px) ) or ( -webkit-backdrop-filter: blur(1px) ) ) {
	.fms-trust2__stat {
		background: rgba(255, 255, 255, 0.46);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}
}

/* On hover the card lifts, the glass clouds a little and its edge comes
   forward, so the whole card answers rather than any one part of it. */
.fms-trust2__stat:hover {
	transform: translateY(-6px);
	border-color: rgba(255, 255, 255, 0.85);
	background: rgba(255, 255, 255, 0.72);
	box-shadow: 0 18px 44px rgba(16, 24, 32, 0.12);
}

.fms-trust2__stat:hover .fms-trust2__badge {
	background-color: rgba(17, 24, 33, 0.09);
}

/* Drawn as a mask, so one artwork takes the accent colour whatever the file
   was coloured. */
.fms-trust2__badge {
	display: block;
	width: 68px;
	height: 68px;
	margin-bottom: 26px;
	border-radius: 50%;
	background-color: rgba(17, 24, 33, 0.05);
	background-image: none;
	position: relative;
}

.fms-trust2__badge::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 34px;
	height: 34px;
	background-color: var(--fms-trust2-accent, var(--fms-blue, #0F5FA8));
	-webkit-mask-image: var(--fms-trust2-mark);
	mask-image: var(--fms-trust2-mark);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-trust2__figure {
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(2rem, 2.6vw, 2.5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--fms-trust2-accent, var(--fms-blue, #0F5FA8));
	/* Keeps the width steady while the digits tick over. */
	font-variant-numeric: tabular-nums;
}

.fms-trust2 .fms-trust2__stat-title {
	margin: 14px 0 10px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #101820;
}

.fms-trust2 .fms-trust2__stat-desc {
	margin: 0;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba(16, 24, 32, 0.62);
}

/* ---------- Ribbon ----------

   The run is printed twice and the track travels exactly half its own width,
   so the second copy arrives where the first started and the loop has no
   seam. It holds still while the pointer rests anywhere on it. */

/* The ribbon's own band: full width, on white, apart from the photograph. */
.fms-trust2-band,
.fms-trust2-band * {
	box-sizing: border-box;
}

.fms-trust2-band {
	position: relative;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	overflow: hidden;
	padding-top: 56px;
	background: var(--fms-white, #FFFFFF);
}

.fms-trust2__ribbon {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding-bottom: var(--fms-pad-y, 80px);
}

.fms-trust2__ribbon-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: fms-trust2-ribbon var(--fms-trust2-ribbon-dur, 46s) linear infinite;
}

.fms-trust2__ribbon:hover .fms-trust2__ribbon-track,
.fms-trust2__ribbon:focus-within .fms-trust2__ribbon-track {
	animation-play-state: paused;
}

.fms-trust2__shot {
	position: relative;
	margin: 0 18px 0 0;
	flex: none;
	overflow: hidden;
	border-radius: 6px;
	background: rgba(17, 24, 33, 0.06);
}

/* The frame darkens while the photograph inside it grows. The ribbon has
   already stopped by then. */
.fms-trust2__shot::after,
.fms-story__media::after,
.fms-what__media::after,
.fms-purpose__media::after,
.fms-help__frame::after,
.fms-proc3__frame::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s ease;
}

.fms-trust2__shot:hover::after,
.fms-story__media:hover::after,
.fms-what__media:hover::after,
.fms-purpose__media:hover::after,
.fms-help__frame:hover::after,
.fms-proc3__frame:hover::after {
	opacity: 0.18;
}

.fms-trust2__shot img,
.fms-story__media img,
.fms-what__media img,
.fms-purpose__media img,
.fms-help__frame img,
.fms-proc3__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	transition: transform 0.6s ease;
}

.fms-trust2__shot:hover img,
.fms-story__media:hover img,
.fms-what__media:hover img,
.fms-purpose__media:hover img,
.fms-help__frame:hover img,
.fms-proc3__frame:hover img {
	transform: scale(1.06);
}

.fms-trust2__shot--square {
	width: 320px;
	height: 320px;
}

.fms-trust2__shot--wide {
	width: 460px;
	height: 320px;
}

@keyframes fms-trust2-ribbon {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.fms-trust2__ribbon-track {
		animation: none;
	}
	.fms-trust2__shot::after,
	.fms-trust2__shot img,
	.fms-story__media::after,
	.fms-story__media img,
	.fms-what__media::after,
	.fms-what__media img,
	.fms-purpose__media::after,
	.fms-purpose__media img,
	.fms-help__frame::after,
	.fms-help__frame img,
	.fms-proc3__frame::after,
	.fms-proc3__frame img {
		transition: none;
	}
	.fms-trust2__shot:hover img,
	.fms-story__media:hover img,
	.fms-what__media:hover img,
	.fms-purpose__media:hover img,
	.fms-help__frame:hover img,
	.fms-proc3__frame:hover img {
		transform: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	/* The claim takes the row above the figures, which keeps all three cards
	   wide enough to read. */
	.fms-trust2__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}

	.fms-trust2 .fms-trust2__title {
		max-width: 22ch;
	}

	.fms-trust2 .fms-trust2__desc {
		max-width: 62ch;
	}

	.fms-trust2__stats {
		gap: 16px;
	}

	.fms-trust2__stat {
		padding: 24px 20px 26px;
	}

	.fms-trust2__badge {
		width: 58px;
		height: 58px;
		margin-bottom: 20px;
	}

	.fms-trust2__shot--square {
		width: 240px;
		height: 240px;
	}

	.fms-trust2__shot--wide {
		width: 340px;
		height: 240px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	/* No room for three cards across, so they stack. */
	.fms-trust2__stats {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.fms-trust2__cols {
		gap: 34px;
	}

	.fms-trust2 .fms-trust2__title {
		max-width: none;
	}

	.fms-trust2__shot {
		margin-right: 12px;
	}

	.fms-trust2__shot--square {
		width: 180px;
		height: 180px;
	}

	.fms-trust2__shot--wide {
		width: 260px;
		height: 180px;
	}
}

/* ==========================================================================
   Badges

   One bar of short claims, lifted by half its own height at each end so it
   straddles the seam between the section above and the one below. The lift is
   a pair of negative margins rather than a transform, so the sections either
   side close up around it instead of leaving a gap where it used to be.
   ========================================================================== */

.fms-badges,
.fms-badges *,
.fms-badges *::before,
.fms-badges *::after {
	box-sizing: border-box;
}

.fms-badges {
	/* Above both neighbours: the section below is opaque and would otherwise
	   cover the half of the bar that overlaps it. */
	position: relative;
	z-index: 2;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-top: calc(-1 * var(--fms-badges-lift, 56px) * var(--fms-badges-scale, 1));
	margin-bottom: calc(-1 * var(--fms-badges-lift, 56px) * var(--fms-badges-scale, 1));
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

/* The bar runs the full width of the page rather than sitting inside the
   content measure, so it reads as a band across the join. Only its wording
   is held to the measure. */
.fms-badges__inner {
	width: 100%;
}

.fms-badges__bar {
	/* Spread rather than columned: equal columns leave the last claim short
	   of the right edge, because it is the wording that is short, not the
	   column. Spreading puts the first against one edge, the last against the
	   other, and the gaps between them all the same. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	will-change: transform;
	gap: 32px;
	margin: 0;
	padding: 26px var(--fms-pad-x, 40px);
	background: var(--fms-badges-bg, var(--fms-navy, #0B2A4A));
	list-style: none;
}

.fms-badges__item {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Drawn as a mask, so one artwork reads white on this ground whatever colour
   the file was drawn in. */
.fms-badges__disc {
	position: relative;
	display: block;
	width: 52px;
	height: 52px;
	flex: none;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 50%;
}

.fms-badges__disc::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 24px;
	height: 24px;
	background-color: #fff;
	-webkit-mask-image: var(--fms-badges-mark);
	mask-image: var(--fms-badges-mark);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-badges__body {
	min-width: 0;
}

.fms-badges .fms-badges__title {
	margin: 0 0 6px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* A light tint of the brand colour: the accent itself is too near this
	   ground to read on it. Solid first, for anything that cannot mix. */
	color: #9dc2e6;
	color: color-mix(in srgb, var(--fms-badges-accent, #0F5FA8) 34%, #fff);
}

.fms-badges .fms-badges__desc {
	margin: 0;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.82);
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-badges__bar {
		gap: 20px;
		padding: 22px var(--fms-pad-x, 20px);
	}

	.fms-badges__item {
		gap: 14px;
	}

	.fms-badges__disc {
		width: 44px;
		height: 44px;
	}

	.fms-badges__disc::after {
		width: 20px;
		height: 20px;
	}

	.fms-badges .fms-badges__title {
		font-size: 13px;
		letter-spacing: 0.05em;
	}

	.fms-badges .fms-badges__desc {
		font-size: 12px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	/* One under the other on a phone. The bar is much taller for it, so the
	   lift is halved — the client's figure is scaled rather than replaced,
	   since a value set on the section itself would outrank a plain one.

	   At this height the bar no longer reads as a band laid across a join, so
	   the section takes a ground of its own and the strip around the bar goes
	   on with the section below instead of showing the page through it. */
	.fms-badges {
		--fms-badges-scale: 1;

		padding: 1px 0;
		background: var(--fms-badges-ground, var(--fms-mist, #EEF2F6));
	}

	.fms-badges__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding: 22px var(--fms-pad-x, 15px);
	}

	.fms-badges__disc {
		width: 42px;
		height: 42px;
	}

	.fms-badges .fms-badges__title {
		font-size: 13px;
	}

	.fms-badges .fms-badges__desc {
		font-size: 13px;
	}
}

/* ==========================================================================
   Closing figure, dark — [fm_figure2]

   Split out of the dark Products section. One line read across the band:
   who it is for, the figure, what it counts, and the claim it leads to. The
   text, accent, ground, picture and overlay are all set per element; the
   softer tints (description, hairlines) are mixed from the text colour so
   they follow it onto any ground.
   ========================================================================== */

.fms-figure2 {
	position: relative;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	overflow: hidden;
	background: var(--fms-figure2-bg, var(--fms-dark, #1C2228));
	color: var(--fms-figure2-text, #fff);
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

.fms-figure2__image,
.fms-figure2__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	pointer-events: none;
}

.fms-figure2__image {
	background-image: var(--fms-figure2-image, none);
	background-size: cover;
	background-position: var(--fms-figure2-position, center center);
	background-repeat: no-repeat;
}

.fms-figure2--fixed .fms-figure2__image {
	background-attachment: fixed;
}

.fms-figure2__overlay {
	background: var(--fms-figure2-overlay, #000);
	opacity: var(--fms-figure2-overlay-strength, 0.6);
}

.fms-figure2__inner {
	position: relative;
	z-index: 1;
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
}

.fms-figure2__stat {
	display: grid;
	grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.82fr);
	/* Stretched, so every divide runs the same length; each cell centres its own wording. */
	align-items: stretch;
	gap: 40px;
	text-align: left;
}

/* The divide belongs to the cell on its right, so the first one has none. */
.fms-figure2__cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding-left: 40px;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
	border-left-color: color-mix(in srgb, var(--fms-figure2-text, #fff) 14%, transparent);
}

.fms-figure2__cell:first-child {
	padding-left: 0;
	border-left: 0;
}

.fms-figure2 .fms-figure2__title {
	margin: 0;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	color: color-mix(in srgb, var(--fms-figure2-text, #fff) 72%, transparent);
}

.fms-figure2__rule {
	display: block;
	width: 58px;
	height: 1px;
	margin-top: 16px;
	background: var(--fms-figure2-accent, var(--fms-blue, #0F5FA8));
}

.fms-figure2 .fms-figure2__figure {
	margin: 0;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(3.5rem, 7.6vw, 6.5rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.04em;
	color: var(--fms-figure2-text, #fff);
	/* Keeps the width steady while the digits tick over. */
	font-variant-numeric: tabular-nums;
}

.fms-figure2__suffix {
	color: var(--fms-figure2-accent, var(--fms-blue, #0F5FA8));
}

.fms-figure2 .fms-figure2__desc {
	margin: 14px 0 0;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.5);
	color: color-mix(in srgb, var(--fms-figure2-text, #fff) 55%, transparent);
}

.fms-figure2__btn {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding: 11px 12px 11px 20px;
	border-radius: 6px;
	background: var(--fms-figure2-accent, var(--fms-blue, #0F5FA8));
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.fms-figure2 .fms-figure2__btn-text {
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--fms-figure2-btn-text, var(--fms-figure2-text, #fff));
}

.fms-figure2__btn-icon {
	display: block;
	width: 16px;
	height: 16px;
	flex: none;
	background-color: var(--fms-figure2-btn-text, var(--fms-figure2-text, #fff));
	-webkit-mask-image: var(--fms-figure2-arrow);
	mask-image: var(--fms-figure2-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform 0.3s ease;
}

.fms-figure2__btn:hover,
.fms-figure2__btn:focus-visible {
	background: #0c4b85;
	background: color-mix(in srgb, #000000 16%, var(--fms-figure2-accent, #0F5FA8));
}

.fms-figure2__btn:hover .fms-figure2__btn-icon {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.fms-figure2__btn,
	.fms-figure2__btn-icon {
		transition: none;
	}
	.fms-figure2__btn:hover .fms-figure2__btn-icon {
		transform: none;
	}
}

/* Two across on a tablet: four columns leave the figure too narrow. */
@media (max-width: 1024px) {
	.fms-figure2__stat {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}

	.fms-figure2__cell {
		padding-left: 32px;
	}

	.fms-figure2__cell:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	/* Fixed backgrounds are unreliable on touch devices. */
	.fms-figure2--fixed .fms-figure2__image {
		background-attachment: scroll;
	}
}

/* One under the other on a phone, the divide turned to run across. */
@media (max-width: 767px) {
	.fms-figure2__stat {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.fms-figure2__cell {
		padding: 26px 0 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		border-top-color: color-mix(in srgb, var(--fms-figure2-text, #fff) 14%, transparent);
	}

	.fms-figure2__cell:first-child {
		padding-top: 0;
		border-top: 0;
	}
}

/* ================================================================
   Contact — Send an Enquiry
   Same washed-photograph background technique as Product Range
   (fms-product3): a photo under the primary colour, solid near the
   top, fading to a tint further down.
   ================================================================ */

.fms-contact,
.fms-contact *,
.fms-contact *::before,
.fms-contact *::after {
	box-sizing: border-box;
}

.fms-contact {
	position: relative;
	z-index: 1;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-top: -1px;
	overflow: hidden;
	isolation: isolate;
	background: var(--fms-contact-ground, var(--fms-navy, #0B2A4A));
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

.fms-contact__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.fms-contact__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		var(--fms-contact-ground, var(--fms-navy, #0B2A4A)) 0,
		var(--fms-contact-ground, var(--fms-navy, #0B2A4A)) var(--fms-contact-solid-h, 140px),
		color-mix(in srgb, var(--fms-contact-ground, var(--fms-navy, #0B2A4A)) var(--fms-contact-fade-pct, 82%), transparent) var(--fms-contact-fade-h, 460px),
		color-mix(in srgb, var(--fms-contact-ground, var(--fms-navy, #0B2A4A)) var(--fms-contact-fade-pct, 82%), transparent) 100%
	);
}

.fms-contact .fms-contact__bg-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--fms-contact-bg-pos, center);
	border: 0;
	border-radius: 0;
}

.fms-contact__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	/* Less above than below: the hero fades straight into this section. */
	padding: min(var(--fms-pad-y, 80px), 24px) var(--fms-pad-x, 40px) var(--fms-pad-y, 80px);
}

.fms-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	gap: 64px;
}

/* ---------- Left: label, heading, copy, map ---------- */

.fms-contact__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.fms-contact .fms-label__mark {
	background: var(--fms-contact-accent, var(--fms-blue, #0F5FA8));
}

.fms-contact__label {
	margin: 0 0 24px;
}

.fms-contact .fms-contact__title {
	margin: 0 0 20px;
	max-width: 20ch;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
}

.fms-contact .fms-contact__desc {
	margin: 0 0 32px;
	max-width: 46ch;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.68);
}

/* Fills whatever height is left under the text, rather than a fixed
   height, so the map never leaves dead space under a short paragraph
   or gets cramped under a long one. */
.fms-contact__map {
	position: relative;
	flex: 1 1 auto;
	min-height: 320px;
	width: 100%;
	overflow: hidden;
	border-radius: 6px;
}

.fms-contact__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Right: the Formidable form, restyled to match ---------- */

.fms-contact__form {
	background: var(--fms-white, #fff);
	border-radius: 6px;
	padding: 30px;
}

.fms-contact__form .frm_forms {
	font-family: var(--fms-font-body, sans-serif);
}

.fms-contact__form .with_frm_style .frm_form_fields {
	margin-bottom: -40px;
}

/* Formidable's own field order has Company Name (field 16) appended after
   every other field -- Lite's builder can only add fields at the end of the
   list, with no reorder control, and the list order (unlike the Style tab's
   colours/type) is not something this plugin's own render step controls, so
   it cannot be fixed from the shortcode side either. Its grid container
   already lays fields out via CSS Grid auto-placement, which (like flexbox)
   honours `order` for exactly this: pulling the field visually next to Name
   without touching Formidable's stored field order.
   Field 9 (the "Your Details" HTML heading) is genuinely first in the field
   list already, but with every other field defaulting to order:0 it needs
   its own explicit order below Name/Company Name's, or it renders after them
   despite coming first in the markup. */
.fms-contact__form #frm_field_9_container {
	order: -3;
}

.fms-contact__form #frm_field_1_container {
	order: -2;
}

.fms-contact__form #frm_field_16_container {
	order: -1;
}

.fms-contact__form .frm_forms .frm_form_field {
	margin-bottom: 20px;
}

.fms-contact__form .frm_forms label,
.fms-contact__form .frm_forms .frm_primary_label {
	display: block;
	margin-bottom: 0px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 15px;
	font-weight: 600;
	color: var(--fms-navy, #0B2A4A);
}

.fms-contact__form .frm_forms input[type="text"],
.fms-contact__form .frm_forms input[type="email"],
.fms-contact__form .frm_forms input[type="tel"],
.fms-contact__form .frm_forms input[type="number"],
.fms-contact__form .frm_forms input[type="url"],
.fms-contact__form .frm_forms select,
.fms-contact__form .frm_forms textarea {
	width: 100%;
	padding: 10px 10px;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 15px;
	line-height: 1.5;
	color: var(--fms-navy, #0B2A4A);
	background: var(--fms-mist, #EEF2F6);
	border: 1px solid rgba(11, 42, 74, 0.14);
	border-radius: 6px;
	transition: border-color 0.2s ease;
}

.fms-contact__form .frm_forms textarea {
	min-height: 70px;
	resize: vertical;
}

.fms-contact__form .frm_forms input:focus,
.fms-contact__form .frm_forms select:focus,
.fms-contact__form .frm_forms textarea:focus {
	outline: none;
	border-color: var(--fms-blue, #0F5FA8);
}

.fms-contact__form .frm_forms .frm-section-heading {
	margin: 8px 0px 8px;
	padding-top: 24px;
	border-top: 1px solid rgba(11, 42, 74, 0.12);
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--fms-navy, #0B2A4A);
}

/* "Your Details" (field 9) sits first in the form, ahead of even Name, so
   the divider line above it (the same rule every other section heading
   uses to separate itself from the field group before it) has nothing to
   divide from and just reads as a stray line. */
.fms-contact__form #frm_field_9_container .frm-section-heading {
	padding-top: 0;
	border-top: 0;
}

.fms-contact__form .frm_forms button,
.fms-contact__form .frm_forms input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--fms-navy, #0B2A4A);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.fms-contact__form .frm_forms button:hover,
.fms-contact__form .frm_forms input[type="submit"]:hover {
	background: color-mix(in srgb, var(--fms-navy, #0B2A4A) 85%, black);
}

@media (prefers-reduced-motion: reduce) {
	.fms-contact__form .frm_forms input,
	.fms-contact__form .frm_forms select,
	.fms-contact__form .frm_forms textarea,
	.fms-contact__form .frm_forms button,
	.fms-contact__form .frm_forms input[type="submit"] {
		transition: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.fms-contact__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.fms-contact .fms-contact__title,
	.fms-contact .fms-contact__desc {
		max-width: none;
	}

	.fms-contact__map {
		min-height: 320px;
	}

	.fms-contact__form {
		padding: 32px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-contact__map {
		min-height: 260px;
	}

	.fms-contact__form {
		padding: 24px;
	}

	.fms-contact__form .frm_forms .frm_half {
		width: 100% !important;
		float: none !important;
	}
}

/* ==========================================================================
   Get In Touch — [fm_get_in_touch]

   One container, three equal cells, the same hairline-divided band the
   Home page's closing figure ([fm_figure2]) uses, just centred and with an
   icon in a circular badge (the same badge/mask technique [fm_service]
   already uses for its icon boxes) above each title/text instead of a stat.
   ========================================================================== */

.fms-getintouch,
.fms-getintouch *,
.fms-getintouch *::before,
.fms-getintouch *::after {
	box-sizing: border-box;
}

.fms-getintouch {
	position: relative;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	overflow: hidden;
	background: var(--fms-getintouch-ground, var(--fms-white, #fff));
	font-style: normal;
	text-transform: none;
	text-shadow: none;
}

.fms-getintouch__image,
.fms-getintouch__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	pointer-events: none;
}

.fms-getintouch__image {
	background-image: var(--fms-getintouch-bg-image, none);
	background-size: cover;
	background-position: var(--fms-getintouch-bg-pos, center);
	background-repeat: no-repeat;
}

.fms-getintouch--fixed .fms-getintouch__image {
	background-attachment: fixed;
}

.fms-getintouch__overlay {
	background: var(--fms-getintouch-overlay, #fff);
	opacity: var(--fms-getintouch-overlay-strength, 0.85);
}

.fms-getintouch__inner {
	position: relative;
	z-index: 1;
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
	padding: 60px var(--fms-pad-x, 40px);
}

.fms-getintouch__label {
	justify-content: center;
	margin: 0 0 48px;
}

.fms-getintouch__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
}

.fms-getintouch__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 40px;
	border-left: 1px solid rgba(11, 42, 74, 0.12);
	text-align: center;
	text-decoration: none;
}

.fms-getintouch__cell:first-child {
	border-left: 0;
}

.fms-getintouch__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: 20px;
	border-radius: 100px;
	background: var(--fms-getintouch-accent, var(--fms-blue, #0F5FA8));
	transition: background-color 0.3s ease;
}

.fms-getintouch__icon::before {
	content: '';
	display: block;
	width: 28px;
	height: 28px;
	background-color: var(--fms-white, #fff);
	-webkit-mask-image: var(--fms-getintouch-icon);
	mask-image: var(--fms-getintouch-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fms-getintouch .fms-getintouch__title {
	margin: 0 0 10px;
	font-family: var(--fms-font-heading, sans-serif);
	font-size: 19px;
	font-weight: 600;
	color: var(--fms-navy, #0B2A4A);
	transition: color 0.3s ease;
}

.fms-getintouch .fms-getintouch__text {
	margin: 0;
	max-width: 34ch;
	font-family: var(--fms-font-body, sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--fms-color-font, #626974);
}

.fms-getintouch__cell:hover .fms-getintouch__icon,
.fms-getintouch__cell:focus-visible .fms-getintouch__icon {
	background: color-mix(in srgb, var(--fms-getintouch-accent, var(--fms-blue, #0F5FA8)) 85%, black);
}

.fms-getintouch__cell:hover .fms-getintouch__title,
.fms-getintouch__cell:focus-visible .fms-getintouch__title {
	color: var(--fms-getintouch-accent, var(--fms-blue, #0F5FA8));
}

@media (prefers-reduced-motion: reduce) {
	.fms-getintouch__icon,
	.fms-getintouch .fms-getintouch__title {
		transition: none;
	}
}

/* ---------- Tablet: stays one horizontal row, just tighter ---------- */

@media (max-width: 1024px) {
	.fms-getintouch__cell {
		padding: 0 20px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-getintouch__inner {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.fms-getintouch__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.fms-getintouch__cell {
		padding: 0;
		border-left: 0;
		border-top: 1px solid rgba(11, 42, 74, 0.12);
		padding-top: 40px;
	}

	.fms-getintouch__cell:first-child {
		border-top: 0;
		padding-top: 0;
	}

	.fms-getintouch .fms-getintouch__text {
		max-width: 46ch;
	}
}

/* ==========================================================================
   Home hero: no logo above the title, so the wording is lifted a little.
   ========================================================================== */

.fms-hero2:not(.fms-hero2--page) .fms-hero2__inner {
	padding-bottom: calc(var(--fms-pad-y, 80px) + 80px + 50px);
}

@media (max-width: 767px) {
	.fms-hero2:not(.fms-hero2--page) .fms-hero2__inner {
		padding-bottom: calc(var(--fms-pad-y, 40px) + 80px + 20px);
	}
}

/* ==========================================================================
   Our Process, click to choose a step.
   ========================================================================== */

.fms-proc3__step {
	cursor: pointer;
	padding: 14px 16px 14px 0;
	margin-left: -0px;
	border-radius: 8px;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}

.fms-proc3__step:hover {
	background: rgba(11, 42, 74, 0.05);
}

.fms-proc3__step.is-active {
	background: #fff;
	box-shadow: 0 6px 20px rgba(11, 42, 74, 0.08);
}

.fms-proc3__step:focus-visible {
	outline: 2px solid var(--fms-proc3-accent, var(--fms-navy, #0B2A4A));
	outline-offset: 2px;
}

.fms-proc3__step:not(.is-active):hover .fms-proc3__num {
	background: var(--fms-proc3-accent, var(--fms-navy, #0B2A4A));
}

/* Descriptions are always on show, so they stay readable when not selected. */
.fms-proc3 .fms-proc3__step-title {
	color: rgba(11, 42, 74, 0.7);
}

.fms-proc3 .fms-proc3__step-desc {
	color: rgba(11, 42, 74, 0.65);
}

.fms-proc3__step:hover .fms-proc3__step-title {
	color: var(--fms-navy, #0B2A4A);
}

.fms-proc3__step .fms-proc3__num {
	margin-left: 10px;
}

.fms-proc3__line {
	left: 35px;
}

@media (max-width: 1024px) {
	.fms-proc3__line {
		left: 32px;
	}
}

@media (max-width: 767px) {
	.fms-proc3__line {
		left: 30px;
	}
}

/* Tablet only: room to the left of the menu button. */
@media (min-width: 768px) and (max-width: 1024px) {
	.fms-topbar .fms-topbar__toggle {
		margin-left: 18px;
	}
}

/* Every step badge and the line wear the active colour; the card and its
   left bar mark which step is selected. */
.fms-proc3__num,
.fms-proc3__line {
	background: var(--fms-proc3-accent, var(--fms-navy, #0B2A4A));
}

/* The selected step shows at once, with no fade to wait for. */
.fms-proc3__step {
	transition: none;
}

/* The left bar of the selected step is a real element, not a shadow, so it
   shows the moment the step is selected. The line and badges sit above the
   white card, not behind it. */
.fms-proc3__step.is-active::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	border-radius: 8px 0 0 8px;
	background: var(--fms-proc3-accent, var(--fms-navy, #0B2A4A));
}

.fms-proc3__line {
	z-index: 1;
}

.fms-proc3__step .fms-proc3__num {
	z-index: 2;
}

/* The white card of the selected step covers the vertical line; the badges
   stay above it. More room between the left bar and the badge. */
.fms-proc3__line {
	z-index: 0;
	left: 49px;
}

.fms-proc3__step .fms-proc3__num {
	margin-left: 24px;
}

@media (max-width: 1024px) {
	.fms-proc3__step .fms-proc3__num {
		margin-left: 20px;
	}

	.fms-proc3__line {
		left: 42px;
	}
}

@media (max-width: 767px) {
	.fms-proc3__step .fms-proc3__num {
		margin-left: 14px;
	}

	.fms-proc3__line {
		left: 34px;
	}
}

/* Selected step: rounder card that fades in and out as the choice moves. */
.fms-proc3__step {
	border-radius: 16px;
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.fms-proc3__step::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	border-radius: 16px 0 0 16px;
	background: var(--fms-proc3-accent, var(--fms-navy, #0B2A4A));
	opacity: 0;
	transition: opacity 0.4s ease;
}

.fms-proc3__step.is-active::before {
	opacity: 1;
	border-radius: 16px 0 0 16px;
}

@media (prefers-reduced-motion: reduce) {
	.fms-proc3__step,
	.fms-proc3__step::before {
		transition: none;
	}
}

/* The card clips its own bar, so the bar follows the card's rounded corners
   exactly. */
.fms-proc3__step {
	overflow: hidden;
}

.fms-proc3__step::before,
.fms-proc3__step.is-active::before {
	border-radius: 0;
}

/* Tablet and mobile: no gap between steps; that space is the card's padding. */
@media (max-width: 1024px) {
	.fms-proc3__steps {
		gap: 0;
	}

	.fms-proc3__step {
		padding-top: 28px;
		padding-bottom: 28px;
	}
}

@media (max-width: 767px) {
	.fms-proc3__step {
		padding-top: 26px;
		padding-bottom: 26px;
	}
}

/* The bar is the left edge of a rounded outline, so it curves round the card's
   corners and tapers away along them. */
.fms-proc3__step {
	overflow: visible;
}

.fms-proc3__step::before,
.fms-proc3__step.is-active::before {
	inset: 0;
	width: auto;
	background: none;
	border-left: 4px solid var(--fms-proc3-accent, var(--fms-navy, #0B2A4A));
	border-radius: 16px;
	pointer-events: none;
}