@charset "UTF-8";
/* ==========================================================================
   Focus Recruitment - stylesheet
   --------------------------------------------------------------------------
   This sheet follows the sibling site locummeds.co.uk, which is the design the
   owner asked this site to match. Everything below is taken from that theme:

     typeface      Asap
     primary       #3fa7da   the dominant brand blue there (35 rules)
     primary dark  #1d6e96
     action        #70bf44   green, with a 3px #599b35 bottom edge
     supporting    #b5e0fc  #258ec1  #f08d3c  #898989  #f0f0f0
     surfaces      white cards on #f0f0f0
     icons         Font Awesome 4  (fa-phone-square, fa-whatsapp)

   The call-to-action treatment is theirs verbatim - a chunky, centred, full
   width button with a darker bottom border. Candidates on LocumMeds already
   respond to that button, which is the whole reason to copy it rather than
   invent something.

   WHERE FOCUS DIFFERS
   Focus runs three divisions, so each one needs to be identifiable. The
   accents are drawn from the LocumMeds palette rather than a new one, and
   they appear only as a thin rail or top border - never as the page's main colour.
   Blue stays the master brand so the site reads as one company.

     law           #1d6e96   deep blue
     construction  #f08d3c   orange
     office        #70bf44   green

   functions.php owns those hexes (fr_division_accent_css) and publishes them
   as --fr-accent per [data-division]. Never hardcode an accent here.

   ORDER OF THIS FILE
     1  tokens
     2  base + typography
     3  buttons
     4  header / nav
     5  hero + search
     6  division cards, bands, steps  (home)
     7  job board: layout, filters, rows, pagination, empty
     8  single job page
     9  apply block
    10  related jobs
    11  404
    12  footer
    13  focus states, print, reduced motion
   ========================================================================== */


/* == 1 · tokens ============================================================ */

:root {
	/* LocumMeds palette */
	--fr-blue:        #3fa7da;
	--fr-blue-mid:    #258ec1;
	--fr-blue-dark:   #1d6e96;
	--fr-blue-pale:   #b5e0fc;
	--fr-blue-deep:   #17587a;   /* white text 7.74:1 - button hover */
	--fr-green:       #70bf44;   /* decoration only: rails, ticks, dots    */
	--fr-green-dark:  #599b35;
	--fr-green-btn:   #478228;   /* white text 4.68:1 - button fills       */
	--fr-green-btn-d: #3c7022;   /* its bottom edge and hover              */
	--fr-green-text:  #417a25;   /* green TEXT on white 5.20:1             */
	--fr-green-mark:  #4f8f2e;   /* wordmark, 24px bold, 3.96:1            */
	--fr-orange:      #f08d3c;

	/* text + surfaces */
	--fr-ink:         #23292e;
	--fr-ink-soft:    #5c666d;
	--fr-ink-faint:   #636d73;   /* was #898989 (3.50:1). 4.65:1 on the #f0f0f0 wash */
	--fr-line:        #d9dcde;
	--fr-line-soft:   #e9ebec;
	--fr-wash:        #f0f0f0;
	--fr-wash-2:      #f6f9fb;
	--fr-white:       #ffffff;

	/* geometry */
	--fr-max:      1200px;
	--fr-gutter:   20px;
	--fr-r:        3px;
	--fr-shadow:   0 1px 3px rgba(20, 40, 55, .09);
	--fr-shadow-2: 0 4px 14px rgba(20, 40, 55, .13);

	/* Asap is loaded from Google Fonts by functions.php. The stack behind it is
	   deliberate: if the webfont is blocked the page must still look composed,
	   not fall back to Times. */
	--fr-font: "Asap", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	           "Helvetica Neue", Arial, sans-serif;
}


/* == 2 · base + typography ================================================= */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--fr-wash);
	color: var(--fr-ink);
	font-family: var(--fr-font);
	/* LocumMeds sets html{font-size:62.5%} and then reads body copy at 1.8rem,
	   i.e. 18px on a line-height near 1.75. Stated directly here rather than
	   reproducing the 62.5% trick, which silently breaks any rem value written
	   by a plugin that assumes a 16px root. */
	font-size: 18px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; }

/* LocumMeds links are #3FA7DA. At 2.71:1 on white that is below AA for body
   text, so links here take the darker member of the same palette (5.64:1).
   The bright blue is kept for rails, borders and focus rings. */
a { color: var(--fr-blue-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--fr-blue-deep); }

h1, h2, h3, h4, h5 {
	margin: 0 0 .6em;
	font-weight: 700;
	line-height: 1.22;
	color: var(--fr-ink);
	text-wrap: balance;
}

h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); letter-spacing: -.012em; }
h2 { font-size: clamp(1.3rem, 2.2vw, 1.55rem); }
h3 { font-size: 1.12rem; }
h4 { font-size: 1rem; }

/* .entry-title::after on LocumMeds: a 10rem x .2rem bar in #3fa7da sitting
   under the page title. It is the most recognisable single detail on their
   pages, so every h1 that opens a view carries it here. */
.fr-hero__title::after,
.fr-single-job > h1::after,
.fr-head h1::after,
.fr-page-header__title::after,
.fr-divisions__head h2::after {
	content: "";
	display: block;
	width: 100px;
	height: 3px;
	margin-top: 14px;
	background: var(--fr-blue);
	border-radius: 2px;
}
/* centred headings get a centred bar */
.fr-hero__title::after,
.fr-divisions__head h2::after { margin-left: auto; margin-right: auto; }
/* on the blue hero the bar has to be white to be visible at all */
.fr-hero__title::after { background: #fff; }

p, ul, ol { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
li + li { margin-top: .25em; }

strong, b { font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--fr-line-soft); margin: 2rem 0; }

::selection { background: var(--fr-blue-pale); color: var(--fr-ink); }

.fr-container { max-width: var(--fr-max); margin: 0 auto; padding: 0 var(--fr-gutter); }

.fr-site-content { display: block; }

/* screen-reader utilities. functions.php prints .screen-reader-text after this
   sheet with !important; these two are the theme's own equivalents. */
.fr-sr,
.fr-vh {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.fr-skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--fr-blue-dark); color: #fff;
	padding: 13px 20px; font-weight: 700; text-decoration: none;
}
.fr-skip:focus { left: 0; }

/* LocumMeds' section heading. Theirs reads
     .single-job .section__title{font-family:'Asap';color:black;font-size:1.8rem}
   - black, 18px - with the pale rule coming from .contact-number's
   border-bottom:1px solid #d7d6d6. Same here: black text, quiet rule. Uppercase
   because that is how they set the words themselves (CALL NOW, JOB OVERVIEW,
   APPLY NOW) rather than through CSS. */
.section__title,
.fr-section-title {
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--fr-blue-pale);
	color: var(--fr-ink);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .045em;
}


/* == 3 · buttons =========================================================== */

/* The LocumMeds button: solid fill, 3px darker bottom border so it reads as a
   physical key, square-ish corners, generous tap target. */
.fr-btn,
.fr-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	padding: 13px 22px;
	border: 0;
	border-bottom: 3px solid var(--fr-blue-deep);
	border-radius: var(--fr-r);
	background: var(--fr-blue-dark);
	color: #fff;
	font-family: var(--fr-font);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .14s ease;
}

.fr-btn:hover,
.fr-submit:hover { background: var(--fr-blue-deep); color: #fff; }

.fr-btn:active,
.fr-submit:active { border-bottom-width: 1px; margin-top: 2px; }

/* Green is reserved for the one action we most want taken: WhatsApp / apply. */
.fr-btn-primary,
.fr-btn--whatsapp,
.fr-btn-whatsapp {
	background: var(--fr-green-btn);
	border-bottom-color: var(--fr-green-btn-d);
	color: #fff;
}
.fr-btn-primary:hover,
.fr-btn--whatsapp:hover,
.fr-btn-whatsapp:hover { background: var(--fr-green-btn-d); color: #fff; }

/* Second action on the same block: blue, so the pair reads as green-then-blue
   exactly as the LocumMeds apply panel does. */
.fr-btn-secondary,
.fr-btn-email {
	background: var(--fr-blue-dark);
	border-bottom-color: var(--fr-blue-deep);
	color: #fff;
}
.fr-btn-secondary:hover,
.fr-btn-email:hover { background: var(--fr-blue-deep); color: #fff; }

/* Quiet button, on white surfaces. */
.fr-btn-ghost,
.fr-btn--ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	padding: 12px 20px;
	border: 1px solid var(--fr-line);
	border-radius: var(--fr-r);
	background: #fff;
	color: var(--fr-blue-dark);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: border-color .14s ease, color .14s ease;
}
.fr-btn-ghost:hover,
.fr-btn--ghost:hover { border-color: var(--fr-blue); color: var(--fr-blue-mid); }

/* Upload your CV, in the header. Outlined so it does not compete with the
   apply buttons inside the page. */
.fr-btn--cv {
	min-height: 44px;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid var(--fr-blue);
	border-bottom: 3px solid var(--fr-blue);
	color: var(--fr-blue-dark);
	font-size: .95rem;
}
.fr-btn--cv:hover { background: var(--fr-blue-dark); color: #fff; }

.fr-link { color: var(--fr-blue-dark); font-weight: 600; }


/* == 4 · header / nav ====================================================== */

.fr-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #fff;
	border-bottom: 1px solid var(--fr-line-soft);
	box-shadow: var(--fr-shadow);
}

.fr-header__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	max-width: var(--fr-max);
	margin: 0 auto;
	padding: 11px var(--fr-gutter);
}

.fr-wordmark {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	min-height: 44px;
	align-content: center;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}
.fr-wordmark__mark {
	color: var(--fr-blue-dark);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
}
.fr-wordmark__sub {
	color: var(--fr-green-mark);
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: -.01em;
}

.fr-nav { margin-left: auto; }

.fr-nav__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fr-nav__list li { margin: 0; }

.fr-nav__link,
.fr-nav__list a {
	display: block;
	padding: 10px 13px;
	border-radius: var(--fr-r);
	color: var(--fr-ink);
	font-size: .97rem;
	font-weight: 600;
	text-decoration: none;
}
.fr-nav__link:hover,
.fr-nav__list a:hover { background: var(--fr-wash); color: var(--fr-blue-dark); }

.fr-nav__list .current-menu-item > a,
.fr-nav__list [aria-current="page"] {
	color: var(--fr-blue-dark);
	box-shadow: inset 0 -3px 0 var(--fr-blue);
}

.fr-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.fr-header__tel {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 4px;
	color: var(--fr-blue-dark);
	font-size: 1.08rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.fr-header__tel::before {
	font-family: FontAwesome;
	content: "\f098";           /* fa-phone-square */
	font-size: 1.15em;
	font-weight: 400;
}

.fr-nav-toggle {
	display: none;
	align-items: center;
	gap: 9px;
	margin-left: auto;
	padding: 10px 15px;
	border: 0;
	border-bottom: 3px solid var(--fr-blue-deep);
	border-radius: var(--fr-r);
	background: var(--fr-blue-dark);
	color: #fff;
	font-family: var(--fr-font);
	font-size: 1rem;
	font-weight: 700;
	min-height: 44px;
	cursor: pointer;
}
.fr-nav-toggle__bars {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: #fff;
	box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
}

/* html.js hides the nav on narrow screens; functions.php keeps it open with no
   JavaScript. Do not add !important here - that rule is printed after this
   sheet and must stay able to win. */
@media (max-width: 900px) {
	.fr-nav-toggle { display: inline-flex; }

	/*
	 * The mobile menu is driven by the #fr-nav-inline script in functions.php,
	 * which adds and removes .is-open. Key off exactly that, and nothing else.
	 *
	 * There used to be a second implementation in assets/js/main.js that opened
	 * the panel with the hidden attribute instead. The two cancelled each other
	 * out on every click and the menu was dead on every phone; main.js is no
	 * longer loaded. If a future script replaces the inline one, it must add
	 * .is-open - that is the contract this rule states.
	 *
	 * With JavaScript off nothing adds the class, so functions.php's critical CSS
	 * (html.no-js .fr-nav{display:block !important}) keeps the nav in flow and
	 * hides the button. Never remove that pair.
	 */
	.fr-nav { flex: 0 0 100%; margin-left: 0; }
	html.js .fr-nav { display: none; }
	html.js .fr-nav.is-open { display: block; }

	.fr-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.fr-nav__link,
	.fr-nav__list a {
		padding: 14px 4px;
		border-bottom: 1px solid var(--fr-line-soft);
		border-radius: 0;
	}
	.fr-header__actions { order: 4; flex: 0 0 100%; }
	.fr-btn--cv { flex: 1 1 auto; }
}


/* == 5 · hero + search ===================================================== */

.fr-hero {
	/* The gradient used to open on --fr-blue. White text on that is 2.71:1, and
	   the eyebrow, lede and chips all sit on it. #2579a3 is the lightest blue in
	   this family that still carries white body text at 4.5:1. */
	background: linear-gradient(158deg, #2579a3 0%, var(--fr-blue-dark) 100%);
	color: #fff;
	padding: 54px 0 48px;
}

.fr-hero__inner { text-align: center; }

.fr-hero__eyebrow {
	margin: 0 0 10px;
	color: var(--fr-blue-pale);
	font-size: .85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.fr-hero__title {
	max-width: 22ch;
	margin: 0 auto 14px;
	color: #fff;
	font-size: clamp(1.9rem, 4.4vw, 2.9rem);
	letter-spacing: -.015em;
}

.fr-hero__lede {
	max-width: 62ch;
	margin: 0 auto 28px;
	color: rgba(255, 255, 255, .92);
	font-size: 1.1rem;
}

.fr-hero__form { max-width: 820px; margin: 0 auto; }

/* division switch: three equal segments, the chosen one inverted to white.
   Radio-driven, so it works with JavaScript off. */
.fr-scope { margin: 0 0 16px; padding: 0; border: 0; }

.fr-scope__input {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}

.fr-seg {
	display: flex;
	gap: 4px;
	max-width: 560px;
	margin: 0 auto;
	padding: 4px;
	background: rgba(255, 255, 255, .17);
	border-radius: var(--fr-r);
}

.fr-seg__btn {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 8px;
	border-radius: var(--fr-r);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	transition: background-color .14s ease, color .14s ease;
}
.fr-seg__btn:hover { background: rgba(255, 255, 255, .22); }

.fr-scope__input:checked + .fr-seg__btn,
.fr-seg__btn.is-active {
	background: #fff;
	color: var(--fr-blue-dark);
}
.fr-scope__input:focus-visible + .fr-seg__btn { outline: 3px solid #fff; outline-offset: 2px; }

/* The segmented control sits above the chip sets in the markup, and each chip
   set is shown only for its own division. With no JavaScript every set stays
   visible, which is a longer page but never a broken one. */
.fr-chipsets { margin: 14px 0 0; }
.fr-chipset { margin: 0; }
html.js .fr-chipset[hidden] { display: none; }

.fr-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fr-chips li { margin: 0; }

.fr-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 9px 16px;
	border: 1px solid rgba(255, 255, 255, .36);
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: .92rem;
	text-decoration: none;
	white-space: nowrap;
}
.fr-chip:hover { background: #fff; border-color: #fff; color: var(--fr-blue-dark); }

/* what / where / go */
.fr-fields {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 16px 0 0;
	padding: 8px;
	background: #fff;
	border-radius: var(--fr-r);
	box-shadow: var(--fr-shadow-2);
	text-align: left;
}

.fr-fields .fr-field { flex: 1 1 190px; min-width: 0; margin: 0; }
.fr-fields .fr-field:last-child { flex: 0 0 auto; }

.fr-fields label {
	display: block;
	margin: 0 0 4px;
	padding-left: 2px;
	color: var(--fr-ink-faint);
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.fr-fields input[type="text"],
.fr-fields input[type="search"] {
	width: 100%;
	min-height: 44px;
	padding: 12px 14px;
	border: 1px solid var(--fr-line);
	border-radius: var(--fr-r);
	background: #fff;
	color: var(--fr-ink);
	font-family: var(--fr-font);
	font-size: 1rem;
}
.fr-fields input::placeholder { color: #a8adb1; }
.fr-fields input:focus {
	outline: 2px solid var(--fr-blue);
	outline-offset: -1px;
	border-color: var(--fr-blue);
}

.fr-fields .fr-submit { width: 100%; margin-top: 22px; }
@media (max-width: 520px) {
	.fr-fields .fr-field:last-child { flex: 1 1 100%; }
	.fr-fields .fr-submit { margin-top: 0; }
}

.fr-hero__count {
	margin: 14px 0 0;
	color: rgba(255, 255, 255, .9);
	font-size: .95rem;
}
.fr-hero__count strong { color: #fff; }


/* == 6 · home: division cards, band, steps ================================= */

.fr-home { display: block; }

.fr-divisions { padding: 50px 0; background: var(--fr-wash); }

.fr-divisions__head { text-align: center; margin-bottom: 30px; }
.fr-divisions__head h2 { margin-bottom: 8px; }
.fr-divisions__head p { max-width: 62ch; margin: 0 auto; color: var(--fr-ink-faint); }

.fr-divisions__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 22px;
}

.fr-card {
	display: flex;
	flex-direction: column;
	padding: 26px 24px 24px;
	background: #fff;
	border: 1px solid var(--fr-line-soft);
	border-top: 4px solid var(--fr-accent, var(--fr-blue));
	border-radius: var(--fr-r);
	box-shadow: var(--fr-shadow);
	transition: box-shadow .16s ease, transform .16s ease;
}
.fr-card:hover { box-shadow: var(--fr-shadow-2); transform: translateY(-2px); }

/* The label used to take var(--fr-accent). As 12px text that is 2.45:1 for the
   Construction orange and 2.28:1 for the Office green. The accent already
   identifies the card through its top border, so the label reads as plain
   secondary text. */
.fr-card__label {
	margin: 0 0 8px;
	color: var(--fr-ink-faint);
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
}

.fr-card__title { margin: 0 0 10px; font-size: 1.35rem; }
.fr-card__title a { color: var(--fr-ink); text-decoration: none; }
.fr-card__title a:hover { color: var(--fr-blue-dark); }

.fr-card__blurb { margin: 0 0 16px; color: var(--fr-ink-soft); font-size: .97rem; }

.fr-card__roles-label {
	margin: 0 0 7px;
	color: var(--fr-ink-faint);
	font-size: .76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.fr-card__roles {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.fr-card__roles li { margin: 0; }
.fr-card__roles a,
.fr-card__roles li {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--fr-wash-2);
	color: var(--fr-ink-soft);
	font-size: .85rem;
	text-decoration: none;
}
.fr-card__roles a:hover { background: var(--fr-blue-pale); color: var(--fr-blue-dark); }

.fr-card__more { margin: auto 0 0; }
.fr-card__more a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	color: var(--fr-blue-dark);
	font-weight: 700;
	text-decoration: none;
}
.fr-card__more a::after { content: "\2192"; font-size: 1.15em; }
.fr-card__more a:hover { color: var(--fr-blue-mid); }

/* the reassurance band */
.fr-band { padding: 50px 0; background: #fff; border-top: 1px solid var(--fr-line-soft); }

.fr-band__grid {
	display: grid;
	gap: 30px;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: start;
}
@media (max-width: 860px) { .fr-band__grid { grid-template-columns: minmax(0, 1fr); } }

.fr-band__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.fr-band__desks { margin: 0; padding: 0; list-style: none; }

.fr-band__desk {
	position: relative;
	margin: 0 0 12px;
	padding: 16px 18px 16px 22px;
	background: var(--fr-wash-2);
	border: 1px solid var(--fr-line-soft);
	border-radius: var(--fr-r);
	font-size: .97rem;
}
.fr-band__desk strong { display: block; color: var(--fr-ink); }
.fr-band__desk a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.fr-band__rail {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 5px;
	border-radius: var(--fr-r) 0 0 var(--fr-r);
	background: var(--fr-accent, var(--fr-blue));
}

/* how it works */
.fr-steps { padding: 50px 0; background: var(--fr-wash); }

.fr-steps__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fr-step;
}

.fr-steps__item {
	margin: 0;
	padding: 24px 22px;
	background: #fff;
	border: 1px solid var(--fr-line-soft);
	border-radius: var(--fr-r);
	box-shadow: var(--fr-shadow);
	counter-increment: fr-step;
}
/* Numbered because these really are a sequence - send the CV, we resource and
   check compliance, then we place you. The order carries information. */
.fr-steps__item::before {
	content: counter(fr-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--fr-blue);
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
}
.fr-steps__item h3 { font-size: 1.1rem; margin-bottom: 7px; }
.fr-steps__item p { margin: 0; color: var(--fr-ink-soft); font-size: .96rem; }


/* == 7 · job board ========================================================= */

.fr-browse-main,
.fr-main {
	max-width: var(--fr-max);
	margin: 0 auto;
	padding: 26px var(--fr-gutter) 60px;
}

.fr-page-header { margin-bottom: 22px; }
.fr-page-header__title { margin-bottom: 8px; }
.fr-page-header__description { color: var(--fr-ink-faint); margin: 0; }

/* breadcrumbs */
.fr-crumbs { margin: 0 0 14px; font-size: .9rem; color: var(--fr-ink-faint); }
.fr-crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.fr-crumbs li { margin: 0; }
.fr-crumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.fr-crumbs a { color: var(--fr-blue-dark); text-decoration: none; }
.fr-crumbs a:hover { text-decoration: underline; }

.fr-head { margin-bottom: 20px; }
.fr-head h1 { margin-bottom: 6px; }

.fr-count { margin: 0; color: var(--fr-ink-faint); font-size: .95rem; }
.fr-count strong { color: var(--fr-ink); }

.fr-notice {
	margin: 14px 0;
	padding: 13px 16px;
	background: #fff;
	border: 1px solid var(--fr-line-soft);
	border-left: 4px solid var(--fr-orange);
	border-radius: var(--fr-r);
	color: var(--fr-ink-soft);
	font-size: .95rem;
}

.fr-layout {
	display: grid;
	grid-template-columns: 286px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
}
@media (max-width: 960px) { .fr-layout { grid-template-columns: minmax(0, 1fr); } }

.fr-side { position: sticky; top: 86px; }
@media (max-width: 960px) { .fr-side { position: static; } }


/* -- filters --------------------------------------------------------------- */

.fr-filters {
	padding: 20px;
	background: #fff;
	border: 1px solid var(--fr-line-soft);
	border-radius: var(--fr-r);
	box-shadow: var(--fr-shadow);
}

.fr-filters > .fr-field:first-child { margin-top: 0; }

.fr-field { margin: 0 0 14px; }
.fr-field > label {
	display: block;
	margin: 0 0 5px;
	color: var(--fr-ink-soft);
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.fr-filters input[type="text"],
.fr-filters input[type="search"],
.fr-filters input[type="number"],
.fr-filters select {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--fr-line);
	border-radius: var(--fr-r);
	background: #fff;
	color: var(--fr-ink);
	font-family: var(--fr-font);
	font-size: .96rem;
}
.fr-filters input:focus,
.fr-filters select:focus {
	outline: 2px solid var(--fr-blue);
	outline-offset: -1px;
	border-color: var(--fr-blue);
}

.fr-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.fr-inline > * { min-width: 0; }
/* The town box can shrink; the radius select cannot - at 7rem it cut "Exact
   town" to "Exact towr". Give the select its content width and let the text
   input absorb what is left. */
.fr-inline > input { flex: 1 1 6rem; }
.fr-inline > select { flex: 0 1 auto; width: auto; max-width: 100%; }

.fr-hint { margin: 5px 0 0; color: var(--fr-ink-faint); font-size: .82rem; }

.fr-filters .fr-btn { width: 100%; }

/* facet group */
.fr-group {
	margin: 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--fr-line-soft);
}
.fr-group > h2,
.fr-group > h3,
.fr-group > legend {
	margin: 0 0 9px;
	padding: 0;
	color: var(--fr-ink-faint);
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.fr-opts { margin: 0; padding: 0; list-style: none; }
.fr-opt { margin: 0; }

/* Each option is a label wrapping a checkbox, a name and a count. The whole row
   is the hit area - on a phone a 13px checkbox alone is not. */
.fr-opt-label,
.fr-opt > a {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	margin: 0 -8px;
	padding: 6px 8px;
	border-radius: var(--fr-r);
	color: var(--fr-ink);
	font-size: .94rem;
	text-decoration: none;
	cursor: pointer;
}
.fr-opt-label:hover,
.fr-opt > a:hover { background: var(--fr-wash-2); color: var(--fr-blue-dark); }

.fr-opt input[type="checkbox"],
.fr-opt input[type="radio"] {
	flex: none;
	width: 17px; height: 17px;
	margin: 0;
	accent-color: var(--fr-blue);
}

/* .fr-box here is the label's text span inside an option row, not a panel. */
.fr-opt .fr-box { flex: 1 1 auto; min-width: 0; }

.fr-n {
	flex: none;
	margin-left: auto;
	color: var(--fr-ink-faint);
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
}

.fr-more {
	margin: 8px 0 0;
}
.fr-more button,
.fr-more a {
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--fr-blue-dark);
	font-family: var(--fr-font);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* .fr-box as a standalone panel (used outside option rows) */
.fr-side > .fr-box,
.fr-main > .fr-box {
	display: block;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--fr-line-soft);
	border-radius: var(--fr-r);
	box-shadow: var(--fr-shadow);
}


/* -- applied filters, toolbar --------------------------------------------- */

/* On the board (not the hero) the chips are light: white pills with a cross. */
.fr-main .fr-chips { justify-content: flex-start; margin: 0 0 14px; }

.fr-main .fr-chip {
	background: #fff;
	border: 1px solid var(--fr-line);
	color: var(--fr-ink);
}
.fr-main .fr-chip:hover {
	background: #fff;
	border-color: var(--fr-blue);
	color: var(--fr-blue-dark);
}

.fr-x { color: var(--fr-ink-faint); font-size: 1.15em; line-height: 1; }
.fr-main .fr-chip:hover .fr-x { color: var(--fr-blue-dark); }

.fr-clear { display: inline-flex; align-items: center; min-height: 44px; color: var(--fr-blue-dark); font-size: .9rem; font-weight: 600; }

.fr-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 14px;
	padding: 11px 16px;
	background: #fff;
	border: 1px solid var(--fr-line-soft);
	border-radius: var(--fr-r);
}

.fr-sort {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .92rem;
}
.fr-sort li { margin: 0; }
.fr-sort a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fr-ink-soft); text-decoration: none; }
.fr-sort a:hover { color: var(--fr-blue-dark); }
.fr-sort [aria-current="true"],
.fr-sort [aria-current="page"] {
	color: var(--fr-blue-dark);
	font-weight: 700;
	box-shadow: inset 0 -2px 0 var(--fr-blue);
}


/* -- result rows ---------------------------------------------------------- */

.fr-results {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fr-row {
	margin: 0;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--fr-line-soft);
	border-left: 4px solid var(--fr-accent, var(--fr-blue));
	border-radius: var(--fr-r);
	box-shadow: var(--fr-shadow);
	transition: box-shadow .14s ease;
}
.fr-row:hover { box-shadow: var(--fr-shadow-2); }

.fr-row h2,
.fr-row h3 { margin: 0 0 8px; font-size: 1.16rem; }
.fr-row h2 a,
.fr-row h3 a { color: var(--fr-blue-dark); text-decoration: none; }
.fr-row h2 a:hover,
.fr-row h3 a:hover { text-decoration: underline; }

/* .fr-meta is a <p> of spans on a row, and a <ul> of key/value pairs on the
   single job page. Both want the same quiet metadata voice. */
.fr-row .fr-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	color: var(--fr-ink-faint);
	font-size: .92rem;
}

.fr-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--fr-wash);
	color: var(--fr-ink-soft);
	font-size: .78rem;
	font-weight: 700;
	white-space: nowrap;
}

.fr-pay {
	color: var(--fr-green-text);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.fr-types {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fr-types li { margin: 0; }

.fr-snippet { margin: 8px 0 0; color: var(--fr-ink-soft); font-size: .94rem; }

.fr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 14px 0 0;
}
.fr-actions .fr-btn,
.fr-actions .fr-btn-ghost { min-height: 44px; padding: 10px 18px; font-size: .96rem; }


/* -- pagination, empty ---------------------------------------------------- */

.fr-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: center;
	margin: 28px 0 0;
}

.fr-pagination a,
.fr-pagination .fr-gap,
.fr-pagination [aria-current="page"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--fr-line);
	border-radius: var(--fr-r);
	color: var(--fr-ink-soft);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}
.fr-pagination a:hover { border-color: var(--fr-blue); color: var(--fr-blue-dark); }
.fr-pagination [aria-current="page"] {
	background: var(--fr-blue);
	border-color: var(--fr-blue);
	color: #fff;
}
.fr-pagination .fr-gap {
	min-width: 28px;
	padding: 0;
	background: none;
	border-color: transparent;
}

.fr-empty {
	padding: 48px 24px;
	background: #fff;
	border: 1px dashed var(--fr-line);
	border-radius: var(--fr-r);
	text-align: center;
}
.fr-empty__title { margin-bottom: 8px; }
.fr-empty p { max-width: 46ch; margin: 0 auto 18px; color: var(--fr-ink-faint); }
.fr-empty .fr-btn { display: inline-flex; }


/* == 8 · single job page =================================================== */

/* LocumMeds puts the advert in a single readable column with the apply panel
   repeated top and bottom. Same here: a card on the wash, one column, the two
   apply blocks bracketing the advert body. */
.fr-single-job {
	max-width: 920px;
	margin: 0 auto;
	padding: 26px var(--fr-gutter) 60px;
	line-height: 1.65;
}

.fr-single-job > h1 { margin: 0 0 14px; }

.fr-single-job .fr-meta {
	display: grid;
	gap: 7px;
	margin: 0 0 14px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--fr-line-soft);
	border-left: 4px solid var(--fr-accent, var(--fr-blue));
	border-radius: var(--fr-r);
	box-shadow: var(--fr-shadow);
	list-style: none;
}
.fr-single-job .fr-meta li { margin: 0; font-size: .98rem; color: var(--fr-ink-soft); }
.fr-meta-k { color: var(--fr-ink); font-weight: 700; margin-right: 5px; }
.fr-meta-v { color: var(--fr-ink-soft); }
.fr-single-job .fr-meta .fr-pay,
.fr-single-job .fr-meta li:has(.fr-pay) .fr-meta-v { color: var(--fr-green-text); font-weight: 700; }

.fr-paynote {
	margin: 0 0 20px;
	color: var(--fr-ink-faint);
	font-size: .86rem;
}

/* the advert itself, on white */
.fr-job-body {
	padding: 26px 28px 8px;
	background: #fff;
	border: 1px solid var(--fr-line-soft);
	border-radius: var(--fr-r);
	box-shadow: var(--fr-shadow);
}

/* LocumMeds labels this block "JOB OVERVIEW" in uppercase blue. Generated by
   CSS rather than a template edit so no advert markup has to change. */
.fr-job-body::before {
	content: "Job overview";
	display: block;
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--fr-blue-pale);
	color: var(--fr-ink);
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .045em;
}

.fr-job-body h2 {
	margin: 26px 0 10px;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--fr-line-soft);
	color: var(--fr-ink);
	font-size: 1.22rem;
}
.fr-job-body h3 { margin: 20px 0 8px; font-size: 1.06rem; }
.fr-job-body ul,
.fr-job-body ol { padding-left: 1.3em; color: var(--fr-ink-soft); }
.fr-job-body li { margin-bottom: 6px; }
.fr-job-body p { color: var(--fr-ink-soft); }
.fr-job-body > :first-child { margin-top: 0; }

.fr-agency {
	margin: 30px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--fr-line);
	color: var(--fr-ink-faint);
	font-size: .85rem;
}


/* == 9 · apply block ====================================================== */

/* The money block. Green first (WhatsApp / apply), blue second (email), both
   full width with the 3px bottom edge - the LocumMeds treatment. */
.fr-apply-block {
	margin: 22px 0;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--fr-line-soft);
	border-top: 4px solid var(--fr-accent, var(--fr-blue));
	border-radius: var(--fr-r);
	box-shadow: var(--fr-shadow);
}

.fr-apply-block h2 {
	margin: 0 0 4px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--fr-blue-pale);
	color: var(--fr-ink);
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .045em;
}

.fr-apply-lead { margin: 12px 0 16px; color: var(--fr-ink-soft); font-size: .97rem; }

.fr-apply-actions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 0;
}
@media (min-width: 34rem) { .fr-apply-actions { grid-template-columns: 1fr 1fr; } }

.fr-apply-actions .fr-btn { width: 100%; font-size: 1.08rem; padding: 15px 18px; }

/* Font Awesome marks on the two apply buttons, as on LocumMeds. */
.fr-btn-whatsapp::before {
	font-family: FontAwesome;
	content: "\f232";           /* fa-whatsapp */
	font-size: 1.2em;
	font-weight: 400;
}
.fr-btn-email::before {
	font-family: FontAwesome;
	content: "\f0e0";           /* fa-envelope */
	font-size: 1.02em;
	font-weight: 400;
}

.fr-apply-phone {
	margin: 16px 0 0;
	font-size: .97rem;
	color: var(--fr-ink-soft);
}
.fr-apply-phone a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	color: var(--fr-blue-dark);
	font-size: 1.1rem;
	font-weight: 700;
	text-decoration: none;
}
.fr-apply-phone a::before {
	font-family: FontAwesome;
	content: "\f098";           /* fa-phone-square */
	font-size: 1.15em;
	font-weight: 400;
}

.fr-apply-note { margin: 8px 0 0; color: var(--fr-ink-faint); font-size: .83rem; }


/* == 10 · related jobs ==================================================== */

.fr-related { margin: 30px 0 0; }

.fr-related h2 {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--fr-blue-pale);
	color: var(--fr-ink);
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .045em;
}
.fr-related h3 { margin: 22px 0 10px; font-size: 1rem; color: var(--fr-ink-soft); }

.fr-related ul {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 40rem) { .fr-related ul { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
.fr-related li { margin: 0; }

.fr-related a {
	display: block;
	min-height: 46px;
	padding: 11px 2px;
	border-bottom: 1px solid var(--fr-line-soft);
	color: var(--fr-blue-dark);
	font-size: .95rem;
	text-decoration: none;
}
.fr-related a:hover { color: var(--fr-blue-mid); text-decoration: underline; }


/* == 11 · 404 ============================================================= */

.fr-404 { max-width: 840px; }
.fr-404__lede { color: var(--fr-ink-soft); font-size: 1.05rem; }

.fr-404__search {
	margin: 20px 0 30px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--fr-line-soft);
	border-radius: var(--fr-r);
	box-shadow: var(--fr-shadow);
}
/* This is WordPress core's own search form (get_search_form), so the markup is
   core's, not the theme's: a <label> wrapping a hidden .screen-reader-text span
   and the field, then <input type="submit" class="search-submit">. Styling only
   `button` here left the control rendering as a bare grey OS button. */
.fr-404__search form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fr-404__search label { flex: 1 1 14rem; min-width: 0; margin: 0; font-weight: 400; }
.fr-404__search input[type="search"],
.fr-404__search input[type="text"] {
	width: 100%;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--fr-line);
	border-radius: var(--fr-r);
	background: #fff;
	color: var(--fr-ink);
	font-family: var(--fr-font);
	font-size: 1rem;
}
.fr-404__search input:focus {
	outline: 2px solid var(--fr-blue);
	outline-offset: -1px;
	border-color: var(--fr-blue);
}
.fr-404__search button,
.fr-404__search input[type="submit"],
.fr-404__search .search-submit {
	flex: 0 0 auto;
	min-height: 48px;
	padding: 13px 24px;
	border: 0;
	border-bottom: 3px solid var(--fr-green-dark);
	border-radius: var(--fr-r);
	/* green: finding a live vacancy is the one thing this page exists to do */
	background: var(--fr-green);
	color: #fff;
	font-family: var(--fr-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.fr-404__search button:hover,
.fr-404__search input[type="submit"]:hover,
.fr-404__search .search-submit:hover { background: var(--fr-green-dark); }

.fr-404__subtitle { font-size: 1.15rem; }

.fr-division-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}
.fr-division-links__item { margin: 0; }

.fr-division-links__link {
	display: block;
	height: 100%;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--fr-line-soft);
	border-top: 4px solid var(--fr-accent, var(--fr-blue));
	border-radius: var(--fr-r);
	box-shadow: var(--fr-shadow);
	text-decoration: none;
}
.fr-division-links__link:hover { box-shadow: var(--fr-shadow-2); transform: translateY(-2px); }
.fr-division-links__link { transition: box-shadow .16s ease, transform .16s ease; }

.fr-division-links__label {
	display: block;
	margin-bottom: 5px;
	color: var(--fr-blue-dark);
	font-size: 1.12rem;
	font-weight: 700;
}
.fr-division-links__blurb {
	display: block;
	color: var(--fr-ink-faint);
	font-size: .92rem;
}

.fr-404__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }


/* == 11b · Upload your CV page ============================================ */

/* Three desk cards, one per division, each carrying its own accent rail and its
   own email button. The page has no form on purpose: applications reach Focus by
   email and WhatsApp, and a CV attached to an email is one step, where a form
   with an upload field is several and loses people. */

.fr-cv-desks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin: 22px 0 32px;
}

.fr-cv-desk {
	display: flex;
	flex-direction: column;
	padding: 24px 22px;
	background: #fff;
	border: 1px solid var(--fr-line-soft);
	border-top: 4px solid var(--fr-blue);
	border-radius: var(--fr-r);
	box-shadow: var(--fr-shadow);
}
/* fr_division_accent_css() in functions.php publishes one --fr-accent-<slug>
   per division, straight from the canonical table. Read those rather than
   naming the colours again here. */
.fr-cv-desk[data-division="law"]          { border-top-color: var(--fr-accent-law, var(--fr-blue)); }
.fr-cv-desk[data-division="construction"] { border-top-color: var(--fr-accent-construction, var(--fr-blue)); }
.fr-cv-desk[data-division="office"]       { border-top-color: var(--fr-accent-office, var(--fr-blue)); }

.fr-cv-desk h3 { margin: 0 0 8px; font-size: 1.25rem; }
.fr-cv-desk p  { color: var(--fr-ink-soft); font-size: .96rem; }

.fr-cv-desk__actions { margin: auto 0 0; padding-top: 12px; }
.fr-cv-desk__actions .fr-btn { width: 100%; }

.fr-cv-desk__addr {
	margin: 10px 0 0;
	color: var(--fr-ink-faint);
	font-size: .85rem;
	word-break: break-word;
}

.fr-cv-whatsapp { margin: 18px 0 32px; }
.fr-cv-whatsapp .fr-btn { font-size: 1.08rem; padding: 15px 26px; }

/* The page renders through the generic page template, so give its body the same
   white card the adverts use rather than letting it sit bare on the wash. */
.page .fr-entry__content,
.fr-entry__content {
	padding: 28px;
	background: #fff;
	border: 1px solid var(--fr-line-soft);
	border-radius: var(--fr-r);
	box-shadow: var(--fr-shadow);
}
.fr-entry__content > :first-child { margin-top: 0; }
.fr-entry__content h2 {
	margin: 28px 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--fr-blue-pale);
	font-size: 1.22rem;
	text-transform: uppercase;
	letter-spacing: .035em;
}
.fr-entry__content ul,
.fr-entry__content ol { color: var(--fr-ink-soft); }
.fr-entry__content li { margin-bottom: 7px; }
.fr-entry__title { margin-bottom: 12px; }
.fr-entry__title::after {
	content: "";
	display: block;
	width: 100px;
	height: 3px;
	margin-top: 14px;
	background: var(--fr-blue);
	border-radius: 2px;
}


/* == 12 · footer ========================================================== */

.fr-footer {
	margin-top: 0;
	background: #23292e;
	color: #c3cbd1;
	font-size: .95rem;
}

.fr-footer__inner {
	max-width: var(--fr-max);
	margin: 0 auto;
	padding: 44px var(--fr-gutter) 26px;
}

.fr-footer a { color: #c3cbd1; text-decoration: none; }
.fr-footer a:hover { color: #fff; text-decoration: underline; }

.fr-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 30px;
}

.fr-footer__col { position: relative; }

.fr-footer__heading {
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 2px solid rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* Each division column carries its own accent on the heading rule, so the
   three desks are identifiable in the footer too. */
.fr-footer__col--law .fr-footer__heading          { border-bottom-color: var(--fr-accent-law, var(--fr-blue)); }
.fr-footer__col--construction .fr-footer__heading { border-bottom-color: var(--fr-accent-construction, var(--fr-blue)); }
.fr-footer__col--office .fr-footer__heading       { border-bottom-color: var(--fr-accent-office, var(--fr-blue)); }

.fr-footer__subheading {
	margin: 18px 0 7px;
	color: #fff;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.fr-footer__blurb { margin: 0 0 12px; color: #9ba5ac; font-size: .9rem; }

.fr-footer__links { margin: 0; padding: 0; list-style: none; }
.fr-footer__links li { margin: 0; }
.fr-footer__links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 6px 0;
}

.fr-footer__whatsapp { color: var(--fr-green) !important; font-weight: 700; }
.fr-footer__whatsapp:hover { color: #8ed464 !important; }
.fr-footer__whatsapp::before {
	font-family: FontAwesome;
	content: "\f232";
	font-size: 1.2em;
	font-weight: 400;
}

.fr-footer__address {
	margin: 0;
	color: #a8b2b9;
	font-size: .9rem;
	font-style: normal;
	/* pre-line keeps the newlines FR_REG_ADDRESS stores; 1.5 stops the five
	   lines of it drifting apart into an unreadable ladder. */
	line-height: 1.5;
	white-space: pre-line;
}

.fr-footer__legal {
	max-width: var(--fr-max);
	margin: 26px auto 0;
	padding: 18px var(--fr-gutter) 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.fr-footer__stat,
.fr-footer__statement,
.fr-footer__copyright {
	margin: 0 0 7px;
	/* #8d979e on #23292e measures about 4.0:1. This is the agency statement and
	   the equal-opportunities wording - it has to be readable, not decorative. */
	color: #a8b2b9;
	font-size: .84rem;
	line-height: 1.6;
}

.fr-footer__legal-nav { margin: 10px 0; }
.fr-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .86rem;
}
.fr-footer__legal-item { margin: 0; }


/* == 13 · focus states, motion, print ===================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--fr-blue-dark);
	outline-offset: 2px;
	border-radius: 2px;
}
.fr-hero a:focus-visible,
.fr-hero button:focus-visible,
.fr-footer a:focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.fr-header, .fr-footer, .fr-nav, .fr-side, .fr-pagination,
	.fr-apply-actions, .fr-related, .fr-skip { display: none !important; }
	body { background: #fff; font-size: 12pt; }
	.fr-job-body, .fr-single-job .fr-meta { border: 0; box-shadow: none; padding: 0; }
	.fr-job-body::before { border-bottom: 1pt solid #000; }
	a { text-decoration: underline; }
}