/* ==========================================================================
   KAUSTYA GROUP NAVIGATION
   A second navigation row under the site header, plus its mobile accordion.
   Loaded after redesign.css, so it inherits the theme's tokens and never
   overrides the primary menu.
   ========================================================================== */

:root {
	--gnav-h: 46px;
	--gnav-bp: 1200px;
}

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

.gnav {
	position: relative;
	z-index: 48;
	background: var(--color-primary);
	background-image: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark, var(--color-primary)) 100%);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.has-group-nav-sticky .gnav {
	position: sticky;
	top: var(--header-h, 72px);
	z-index: 47;
}

.gnav__inner {
	display: flex;
	align-items: stretch;
	min-height: var(--gnav-h);
}

.gnav__list {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	row-gap: 0;
	column-gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

.gnav__item {
	position: static; /* the panel spans the bar, not the item */
	display: flex;
	align-items: stretch;
}

.gnav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 14px;
	min-height: var(--gnav-h);
	font-family: var(--font-body);
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.2;
	color: rgba(255, 255, 255, .93);
	text-decoration: none;
	white-space: nowrap;
	border-right: 1px solid rgba(255, 255, 255, .13);
	transition: background-color .18s ease, color .18s ease;
}

.gnav__list > .gnav__item:first-child .gnav__link {
	border-left: 1px solid rgba(255, 255, 255, .13);
}

.gnav__link:hover,
.gnav__link:focus-visible {
	background: rgba(0, 0, 0, .18);
	color: #fff;
}

.gnav__item.is-current > .gnav__link,
.gnav__item.is-open > .gnav__link {
	background: rgba(0, 0, 0, .24);
	color: #fff;
}

.gnav__chev {
	flex: none;
	transition: transform .22s ease;
}

.gnav__item.is-open .gnav__chev { transform: rotate(180deg); }

/* The toggle button only exists for keyboard and touch users; pointer users
   get the panel on hover. It sits on top of the chevron. */
.gnav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   The mega panel
   -------------------------------------------------------------------------- */

.gmega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--card, #fff);
	border-top: 3px solid var(--color-primary);
	border-bottom: 1px solid var(--line, rgba(15, 23, 42, .1));
	box-shadow: var(--shadow-lg, 0 20px 48px rgba(15, 23, 42, .12));
	padding: 30px 0 22px;
	max-height: min(80vh, 720px);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 46;
}

.gnav__item--mega:hover > .gmega,
.gnav__item--mega:focus-within > .gmega,
.gnav__item.is-open > .gmega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Tall panels (Projects, Consulting) scroll inside the panel; the fade makes
   that obvious rather than looking like the list simply stops. */
.gmega.is-scrollable::after {
	content: "";
	position: sticky;
	bottom: -22px;
	display: block;
	height: 26px;
	margin: -26px 0 0;
	background: linear-gradient(to top, var(--card, #fff), rgba(255, 255, 255, 0));
	pointer-events: none;
}

[data-theme="dark"] .gmega.is-scrollable::after {
	background: linear-gradient(to top, var(--card, #101a2c), rgba(16, 26, 44, 0));
}

.gmega__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px 40px;
	align-items: start;
}

.gmega__cols--1 { grid-template-columns: minmax(0, 1fr); }
.gmega__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.gmega__col { min-width: 0; }

.gmega__head {
	margin: 0 0 12px;
	font-family: var(--font-display);
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink, #0b1f3a);
}

.gmega__head a {
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid var(--color-primary);
	padding-bottom: 3px;
	transition: color .16s ease;
}

.gmega__head a:hover { color: var(--color-primary); }

.gmega__links {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 1;
}

.gmega__links li { margin: 0; }

.gmega__links a {
	display: block;
	padding: 6px 10px 6px 0;
	font-size: .855rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ink-2, #475569);
	text-decoration: none;
	border-radius: 6px;
	transition: color .14s ease, background-color .14s ease, padding-left .14s ease;
}

.gmega__links a:hover,
.gmega__links a:focus-visible {
	color: var(--color-primary);
	background: var(--bg-alt, rgba(15, 23, 42, .04));
	padding-left: 9px;
}

.gmega__links a[aria-current="page"] {
	color: var(--color-primary);
	font-weight: 700;
}

.gmega__foot {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--line-soft, rgba(15, 23, 42, .07));
}

.gmega__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .85rem;
	font-weight: 700;
	color: var(--color-primary);
	text-decoration: none;
}

.gmega__all svg { transition: transform .2s ease; }
.gmega__all:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Desktop density — a long column (e.g. Group Of Companies, Training Course)
   used to split into 2 CSS columns inside its 1fr grid track once it hit 19
   items. That split needs roughly double the track's width, so whenever more
   than one column in the same row was long — Group Of Companies has three —
   every split list overflowed sideways into its neighbour and the labels
   overlapped. Long columns now stay single and the panel scrolls instead
   (.gmega already has max-height + overflow-y: auto, with the fade below
   making that obvious), which is the behaviour already documented for tall
   panels like Projects and Consulting.
   -------------------------------------------------------------------------- */

/* Six-column menus (Projects, Consulting) wrap to two rows of three. */
@media (min-width: 1201px) {
	.gmega__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/*
 * Eight labels plus their chevrons need roughly 1320px once the display
 * webfont has loaded, which is more than the 1240px content container gives
 * them — the bar was wrapping onto a second row on a 1440px screen. From
 * 1440px up, the bar and its panel share a wider container instead. Below
 * that the labels tighten, which is enough down to the 1200px handover.
 */
@media (min-width: 1440px) {
	.gnav__inner,
	.gmega > .container { max-width: 1400px; }
	.gnav__link { padding: 0 16px; font-size: .875rem; }
}

@media (min-width: 1320px) and (max-width: 1439px) {
	.gnav__link { padding: 0 12px; font-size: .82rem; letter-spacing: -.005em; }
	.gmega__cols { gap: 22px 30px; }
}

/* The tightest desktop band, just above the handover to the burger. */
@media (min-width: 1201px) and (max-width: 1319px) {
	.gnav__link { padding: 0 9px; font-size: .795rem; letter-spacing: -.01em; }
	.gnav__chev { width: 11px; height: 11px; }
	.gmega__cols { gap: 20px 26px; }
}

/* --------------------------------------------------------------------------
   Tablet and below — the bar is replaced by the drawer section
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.gnav { display: none; }
}

/* --------------------------------------------------------------------------
   Mobile drawer accordion
   -------------------------------------------------------------------------- */

.gnav-m {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--line, rgba(15, 23, 42, .1));
}

.gnav-m__title {
	margin: 0 0 4px;
	font-size: var(--text-xs, .75rem);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.gnav-m__list,
.gnav-m__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gnav-m__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border-bottom: 1px solid var(--line-soft, rgba(15, 23, 42, .07));
}

.gnav-m__link {
	flex: 1;
	display: block;
	padding: 14px 2px;
	font-family: var(--font-display);
	font-size: var(--text-md, 1rem);
	font-weight: 700;
	color: var(--ink, #0b1f3a);
	text-decoration: none;
}

/* Matches the chevron the theme's own mobile menu draws, so the two
   sections of the drawer read as one list rather than two widgets. */
.gnav-m__toggle {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 0;
	border-radius: var(--radius-xs, 10px);
	color: var(--muted, #64748b);
	cursor: pointer;
	transition: transform .22s ease, color .16s ease, background-color .16s ease;
}

.gnav-m__toggle[aria-expanded="true"] {
	transform: rotate(180deg);
	color: var(--color-primary);
	background: var(--bg-alt, rgba(15, 23, 42, .04));
}

.gnav-m__panel { padding: 6px 0 12px 10px; }

.gnav-m__group + .gnav-m__group { margin-top: 2px; }

.gnav-m__sub {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 11px 8px 11px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line-soft, rgba(15, 23, 42, .07));
	font-family: var(--font-body);
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
	color: var(--ink-2, #475569);
	cursor: pointer;
}

.gnav-m__sub svg { flex: none; transition: transform .22s ease; }
.gnav-m__sub[aria-expanded="true"] { color: var(--color-primary); }
.gnav-m__sub[aria-expanded="true"] svg { transform: rotate(180deg); }

.gnav-m__links { padding: 4px 0 10px 12px; }

.gnav-m__links a {
	display: block;
	padding: 9px 0;
	font-size: var(--text-sm, .9rem);
	line-height: 1.4;
	color: var(--muted, #64748b);
	text-decoration: none;
}

.gnav-m__links a:hover,
.gnav-m__links a:focus-visible { color: var(--color-primary); }

.gnav-m__overview {
	font-weight: 700;
	color: var(--color-primary) !important;
}

/* --------------------------------------------------------------------------
   Front page: the header overlays the hero, so the bar must not inherit
   the transparent treatment.
   -------------------------------------------------------------------------- */

body:not(.has-solid-header) .gnav {
	position: relative;
	z-index: 60;
}

/* --------------------------------------------------------------------------
   Dark mode
   -------------------------------------------------------------------------- */

[data-theme="dark"] .gmega {
	background: var(--card, #101a2c);
	border-bottom-color: var(--line, rgba(255, 255, 255, .1));
}

[data-theme="dark"] .gmega__head { color: #fff; }
[data-theme="dark"] .gmega__links a { color: rgba(255, 255, 255, .72); }
[data-theme="dark"] .gmega__links a:hover { background: rgba(255, 255, 255, .06); color: #fff; }

/* --------------------------------------------------------------------------
   Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.gmega,
	.gnav__chev,
	.gnav-m__toggle,
	.gnav-m__sub svg,
	.gmega__all svg,
	.gmega__links a { transition: none; }
}

@media print {
	.gnav,
	.gnav-m { display: none !important; }
}

/* ==========================================================================
   FRONT PAGE — the header floats over the hero, so the group bar has to
   float with it rather than pushing the hero down the page.
   ========================================================================== */

body:not(.has-solid-header) .gnav {
	position: absolute;
	top: var(--header-h, 76px);
	left: 0;
	right: 0;
	z-index: 59;
	background: rgba(6, 20, 40, .40);
	background-image: none;
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	border-top: 1px solid rgba(255, 255, 255, .14);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

body.has-top-bar:not(.has-solid-header) .gnav {
	top: calc(var(--topbar-h, 38px) + var(--header-h, 76px));
}

/* Give the hero back the space the bar sits on. */
@media (min-width: 1201px) {
	body.has-group-nav:not(.has-solid-header) .hero__inner {
		padding-top: calc(var(--header-h, 76px) + var(--gnav-h) + 44px);
	}
}

/* The panel still needs a solid surface even over a photographic hero. */
body:not(.has-solid-header) .gmega {
	background: var(--card, #fff);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* ==========================================================================
   TOUCH — without hover, the chevron button opens the panel and the label
   itself stays a normal link.
   ========================================================================== */

@media (min-width: 1201px) and (hover: none) {
	.gnav__link { padding-right: 6px; border-right: 0; }
	.gnav__chev { display: none; }

	.gnav__toggle {
		display: inline-flex;
		min-height: var(--gnav-h);
		border-right: 1px solid rgba(255, 255, 255, .13);
	}

	.gnav__item--mega:hover > .gmega { opacity: 0; visibility: hidden; }
	.gnav__item.is-open > .gmega { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* ==========================================================================
   PROMOTED LINKS — the live WP Job Manager board inside the Engineering Jobs
   panel. The static category pages stay as a list; the live board reads as
   the action.
   ========================================================================== */

.gmega__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
}

.gmega__promos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	order: -1;
}

.gmega__promo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	font-size: .82rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	background: var(--color-primary);
	border-radius: var(--radius-full, 999px);
	transition: background-color .16s ease, transform .16s ease;
}

.gmega__promo:hover,
.gmega__promo:focus-visible {
	background: var(--color-primary-dark, var(--color-primary));
	transform: translateY(-1px);
	color: #fff;
}

/* The second and third links (Post a Job, Job Dashboard) are secondary. */
.gmega__promo + .gmega__promo {
	background: transparent;
	color: var(--color-primary);
	box-shadow: inset 0 0 0 1px currentColor;
}

.gmega__promo + .gmega__promo:hover {
	background: var(--bg-alt, rgba(15, 23, 42, .04));
	color: var(--color-primary);
}

.gmega__promo + .gmega__promo svg { display: none; }

/* Mobile drawer equivalent. */
.gnav-m__promos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 4px 0 12px;
}

.gnav-m__promo {
	display: inline-flex;
	align-items: center;
	padding: 9px 15px;
	font-size: .82rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	background: var(--color-primary);
	border-radius: var(--radius-full, 999px);
}

.gnav-m__promo + .gnav-m__promo {
	background: transparent;
	color: var(--color-primary);
	box-shadow: inset 0 0 0 1px currentColor;
}

/* The job board link in the primary menu and the footer. */
.menu-item-jobs > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 7px;
	vertical-align: middle;
	border-radius: 50%;
	background: var(--color-secondary, #00C2A8);
	box-shadow: 0 0 0 3px rgba(var(--color-secondary-rgb, 0, 194, 168), .22);
}

/* ==========================================================================
   SEARCH IN THE GROUP BAR
   The top row has no spare width once the brand plate and the CTA are placed,
   so the "Get whatever you want" search lives here, where the bar always has
   room to the right of the last label.
   ========================================================================== */

.gnav__inner { justify-content: space-between; }
.gnav__list { width: auto; flex: 0 1 auto; }

.gnav__search {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: center;
	margin-left: 14px;
	padding: 7px 15px;
	font-family: var(--font-body);
	font-size: .8rem;
	font-weight: 700;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--radius-full, 999px);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .16s ease, border-color .16s ease;
}

.gnav__search:hover,
.gnav__search:focus-visible {
	background: rgba(255, 255, 255, .26);
	border-color: rgba(255, 255, 255, .55);
}

@media (max-width: 1319px) {
	.gnav__searchText { display: none; }
	.gnav__search { padding: 7px 9px; margin-left: 8px; }
}

/* Mobile drawer */
.gnav-m__search {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	margin-bottom: 16px;
	padding: 13px 18px;
	font-family: var(--font-body);
	font-size: .92rem;
	font-weight: 700;
	color: #fff;
	background: var(--color-primary);
	border: 0;
	border-radius: var(--radius-full, 999px);
	cursor: pointer;
}

.gnav-m__search:hover { background: var(--color-primary-dark, var(--color-primary)); }

/* ==========================================================================
   TEN LABELS
   Lean and L&D took the bar from eight labels to ten. At the old padding the
   row needed 1369px against 1400px of container once the search button was
   placed, so it wrapped onto a second row at almost every width. The label
   padding tightens and the search collapses to its icon sooner. Measured
   again across ten widths from 1201px to 1920px afterwards.
   ========================================================================== */

@media (min-width: 1440px) {
	.gnav__link { padding: 0 11px; font-size: .83rem; }
}

/*
 * "Collaborate With Us" is about 70px wider than the "Contact Us" it replaced,
 * which pushed the search button 20px past the container in this band. The
 * labels tighten again to absorb it.
 */
@media (min-width: 1320px) and (max-width: 1439px) {
	.gnav__link { padding: 0 7px; font-size: .785rem; letter-spacing: -.008em; }
	.gnav__chev { width: 11px; height: 11px; }
}

@media (min-width: 1201px) and (max-width: 1319px) {
	.gnav__link { padding: 0 7px; font-size: .78rem; letter-spacing: -.012em; }
	.gnav__chev { width: 10px; height: 10px; }
}

/*
 * The search collapses to its icon at every width now. Its label cost about
 * 60px, which was enough to wrap the row on a 1920px screen even though the
 * labels themselves fitted — the button is outside the list, so the list was
 * squeezed rather than the button. The wording still leads the dialog.
 */
.gnav__searchText { display: none; }
.gnav__search { padding: 7px 9px; margin-left: 8px; }

/*
 * And the row is not allowed to wrap. With 148px of slack at the tightest
 * measured width there is room for one row at every size the bar is shown,
 * so wrapping can only ever be a bug.
 */
.gnav__list { flex-wrap: nowrap; }

/* ==========================================================================
   The stacked header (v3.33.0) is opaque and in the flow on every page, so the
   bar no longer floats over the hero on the front page. This override lives
   here rather than in redesign.css because this file is enqueued last.
   ========================================================================== */

body .site-header--stacked + .gnav,
body:not(.has-solid-header) .site-header--stacked + .gnav {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	background: var(--color-primary);
	background-image: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark, var(--color-primary)) 100%);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-top: 0;
}

/* The front page pins `.site-header` absolutely so a thin bar can float over
   the hero. That selector carries more weight than `.site-header--stacked`,
   so the stacked header has to match it to stay in the flow. */
body:not(.has-solid-header) .site-header--stacked,
body:not(.has-solid-header):not(.error404) .site-header--stacked,
body.has-top-bar:not(.has-solid-header) .site-header--stacked {
	position: sticky;
	top: 0;
	background: var(--card, #fff);
}

[data-theme="dark"] body:not(.has-solid-header) .site-header--stacked { background: #0B1424; }

/* The transparent-hero rules in redesign.css carry four classes, so the
   stacked header has to match that weight to keep its dark-on-white text.
   Without this the nav row and the search box are white on white. */
body:not(.has-solid-header):not(.error404) .site-header--stacked:not(.is-scrolled) .nav__links > li > a,
body:not(.has-solid-header):not(.error404) .site-header--stacked:not(.is-scrolled) .link-ghost { color: var(--ink); }

body:not(.has-solid-header):not(.error404) .site-header--stacked:not(.is-scrolled) .nav__links > li > a:hover,
body:not(.has-solid-header):not(.error404) .site-header--stacked:not(.is-scrolled) .nav__links > li.current-menu-item > a,
body:not(.has-solid-header):not(.error404) .site-header--stacked:not(.is-scrolled) .nav__links > li.current-menu-ancestor > a { color: var(--color-primary); }

body:not(.has-solid-header):not(.error404) .site-header--stacked:not(.is-scrolled) .nav__links > li > a::after { background: var(--color-primary); }

body:not(.has-solid-header):not(.error404) .site-header--stacked:not(.is-scrolled) .qe-trigger {
	background: var(--bg-alt, rgba(15, 23, 42, .05));
	border-color: var(--line, rgba(15, 23, 42, .12));
	color: var(--muted, #64748b);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body:not(.has-solid-header):not(.error404) .site-header--stacked:not(.is-scrolled) .burger span { background: var(--ink); }

body:not(.has-solid-header):not(.error404) .site-header--stacked:not(.is-scrolled) .burger,
body:not(.has-solid-header):not(.error404) .site-header--stacked:not(.is-scrolled) .theme-toggle {
	border-color: var(--line, rgba(15, 23, 42, .12));
	background: transparent;
	color: var(--ink);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

[data-theme="dark"] body:not(.has-solid-header) .site-header--stacked:not(.is-scrolled) .nav__links > li > a { color: rgba(255, 255, 255, .88); }

/* ==========================================================================
   THE WHOLE SEQUENCE IN ONE MENU (v3.36.0)

   The bar now carries all twenty-one items rather than ten, so it wraps to two
   lines by design. `nowrap` was right when the bar held ten labels beside a
   separate header row; with the full sequence it would simply overflow.
   ========================================================================== */

@media (min-width: 1201px) {
	.gnav__list { flex-wrap: wrap; }

	.gnav__inner { align-items: stretch; }

	/*
	 * Tuned so twenty-one labels settle into two rows rather than three. At the
	 * previous padding the last item — Current Openings — fell alone onto a
	 * third row, which read as an accident rather than a wrap.
	 */
	.gnav__link { padding: 0 9px; font-size: .795rem; }

	/* The wrap needs a rule between rows to read as deliberate. */
	.gnav__item > .gnav__link { border-bottom: 1px solid rgba(255, 255, 255, .1); }

	.gnav__search { align-self: center; }
}

@media (min-width: 1201px) and (max-width: 1439px) {
	.gnav__link { padding: 0 7px; font-size: .765rem; letter-spacing: -.01em; }
	.gnav__chev { width: 10px; height: 10px; }
}

/* The live job board gets a dot, as it does in the footer. */
.gnav__item--live > .gnav__link::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-left: 7px;
	border-radius: 50%;
	background: var(--color-secondary, #00C2A8);
	box-shadow: 0 0 0 3px rgba(var(--color-secondary-rgb, 0, 194, 168), .3);
}

.gnav-m__item--live .gnav-m__link { color: var(--color-primary); }

/* The narrowest desktop band needs another two pixels a side to hold two rows. */
@media (min-width: 1201px) and (max-width: 1300px) {
	.gnav__link { padding: 0 5px; font-size: .745rem; }
	.gnav__search { margin-left: 6px; padding: 7px 8px; }
}

/* ==========================================================================
   THE WRAPPED BAR FILLS ITS ROWS (v3.37.0)

   With twenty-one items the bar wraps, and left-aligned rows left a large
   empty block under the second one while the search pinned itself to the far
   right of the first. Both rows now stretch edge to edge: every item may grow
   into the leftover space, so the dividers stay evenly distributed and the
   wrap reads as a deliberate two-row bar rather than a ragged overflow.
   ========================================================================== */

@media (min-width: 1201px) {
	.gnav__inner { display: block; }

	.gnav__list {
		width: 100%;
		flex: 1 1 auto;
		align-items: stretch;
	}

	/*
	 * Items are sized by their label, never stretched.
	 *
	 * Letting them grow filled each row edge to edge, but flex-grow hands
	 * every item an equal share of the leftover space — so whichever row
	 * happened to hold fewer items stretched each of them much wider than the
	 * same labels on the other row. Where the wrap falls moves with the
	 * viewport, so the bar looked different at every width.
	 *
	 * Both rows are centred instead. Cell widths now depend only on the label,
	 * so a given item is the same size wherever it lands, and the leftover
	 * space is split evenly at both ends rather than pooling at one.
	 */
	.gnav__list { justify-content: center; }
	.gnav__item { flex: 0 0 auto; }

	.gnav__link { justify-content: center; text-align: center; }

	/* The search is a fixed-width cell at the end; it should not stretch. */
	.gnav__item--search { flex: 0 0 auto; display: flex; align-items: center; }

	.gnav__item--search .gnav__search {
		margin: 0;
		height: 100%;
		border: 0;
		border-radius: 0;
		border-left: 1px solid rgba(255, 255, 255, .13);
		background: rgba(255, 255, 255, .1);
		padding-inline: 16px;
	}

	.gnav__item--search .gnav__search:hover { background: rgba(255, 255, 255, .22); }

	/* The mega panel is positioned against the bar, so the taller wrapped bar
	   must not push it over the content below. */
	.gmega { top: 100%; }
}

/* ==========================================================================
   THE SEARCH PILL STAYS VISIBLE ON HOVER (v3.43.0)

   The transparent-hero rules gave `.qe-trigger:hover` white text on a
   translucent white fill — correct when the header floated over a dark hero,
   but the stacked header has been opaque white since v3.33.0, so on the front
   page hovering the pill turned it white on white and it looked as though it
   had vanished. Hover now matches the interior pages.
   ========================================================================== */

body:not(.has-solid-header):not(.error404) .site-header--stacked:not(.is-scrolled) .qe-trigger:hover,
body:not(.has-solid-header):not(.error404) .site-header--stacked:not(.is-scrolled) .qe-trigger:focus-visible {
	background: var(--card, #fff);
	border-color: var(--color-primary);
	color: var(--color-primary);
}

body:not(.has-solid-header):not(.error404) .site-header--stacked:not(.is-scrolled) .qe-trigger:hover .qe-trigger__text,
body:not(.has-solid-header):not(.error404) .site-header--stacked:not(.is-scrolled) .qe-trigger:hover svg { color: var(--color-primary); }

[data-theme="dark"] body:not(.has-solid-header) .site-header--stacked:not(.is-scrolled) .qe-trigger:hover {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

/* ==========================================================================
   ALL SECTIONS — one click to the whole menu

   Twenty-one items across two rows is a lot to scan, and the panels only open
   one at a time. This button opens every section at once, in columns, so the
   whole structure can be read and any item reached in a single click.
   ========================================================================== */

.gnav__item--all { flex: 0 0 auto; }

.gnav__all {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding: 0 14px;
	font-family: var(--font-body);
	font-size: .795rem;
	font-weight: 700;
	color: #fff;
	background: rgba(255, 255, 255, .16);
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, .18);
	cursor: pointer;
	transition: background-color .16s ease;
}

.gnav__all:hover,
.gnav__all[aria-expanded="true"] { background: rgba(255, 255, 255, .28); }

.gnav__all svg { transition: transform .2s ease; }
.gnav__all[aria-expanded="true"] svg { transform: rotate(180deg); }

.gnav-all {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 60;
	padding: 30px 0 34px;
	background: var(--card, #fff);
	border-top: 1px solid var(--line, rgba(15, 23, 42, .1));
	box-shadow: 0 24px 48px rgba(15, 23, 42, .16);
}

[data-theme="dark"] .gnav-all { background: #0B1424; }

.gnav-all[hidden] { display: none; }

.gnav-all__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 22px 26px;
}

.gnav-all__col { min-width: 0; }

.gnav-all__link {
	display: block;
	padding: 7px 0;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink, #0b1f3a);
	text-decoration: none;
	border-bottom: 1px solid var(--line-soft, rgba(15, 23, 42, .07));
}

.gnav-all__link:hover { color: var(--color-primary); }

.gnav-all__link span {
	display: block;
	margin-top: 2px;
	font-family: var(--rb-mono, ui-monospace, monospace);
	font-size: .7rem;
	font-weight: 500;
	color: var(--muted, #94a3b8);
}

@media (max-width: 1200px) {
	.gnav__item--all { display: none; }
	.gnav-all { display: none; }
}

/* The All button must not cost the bar a third row. */
@media (min-width: 1201px) {
	.gnav__all { padding: 0 11px; gap: 6px; }
	.gnav__link { padding: 0 8px; }
}

@media (min-width: 1201px) and (max-width: 1439px) {
	.gnav__link { padding: 0 6px; }
	.gnav__all { padding: 0 9px; }
}

/* The narrowest desktop band needs the last few pixels back. */
@media (min-width: 1201px) and (max-width: 1240px) {
	.gnav__link { padding: 0 4px; font-size: .735rem; }
	.gnav__all { padding: 0 7px; font-size: .735rem; }
	.gnav__chev { width: 9px; height: 9px; }
	.gnav__search { margin-left: 4px; padding: 7px 7px; }
}

/* ==========================================================================
   Mobile audit fixes that must beat the later stylesheets (v3.46.0)
   These were written into redesign.css first, but robotics.css and
   quick-enquiry.css load after it and set the same properties, so the
   rules never applied. This file is enqueued last.
   ========================================================================== */
/*
 * 1. Form fields set below 16px make iOS Safari zoom the whole page the moment
 *    a field is focused, and it does not zoom back out. Every one of the
 *    eleven fields on the contact page was under it.
 */
@media (max-width: 900px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="search"],
	input[type="password"],
	input[type="date"],
	select,
	textarea {
		font-size: 16px;
		min-height: 46px;
	}

	textarea { min-height: 120px; }
}

/*
 * 2. The carousel dots were 7px — visually right, but far below the 32px a
 *    finger needs. The dot stays 7px; the button around it grows.
 */
.rb-carousel__dot {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	background: none;
	border-radius: 50%;
}

.rb-carousel__dot::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rb-line, rgba(15, 23, 42, .18));
	transition: background-color .16s ease, transform .16s ease;
}

.rb-carousel__dot.is-active::before { background: var(--rb-ink-2, #475569); transform: scale(1.25); }
.rb-carousel__dots { gap: 0; }


/*
 * The form rule above lost to `.kform__field input`, which carries one more
 * class than a bare element selector. Matching that weight rather than
 * reaching for !important.
 */
@media (max-width: 900px) {
	.kform .kform__field input,
	.kform .kform__field select,
	.kform .kform__field textarea,
	.qe .qe__field input,
	.qe .qe__field select,
	.qe .qe__field textarea,
	form .kform__field input,
	form .kform__field textarea {
		font-size: 16px;
	}
}

/*
 * The dots were being squeezed to 18px wide by the flex container, so they
 * were 32px tall but still under the 32px minimum across. `flex: none` keeps
 * them square.
 */
.rb-carousel__dots .rb-carousel__dot { flex: 0 0 32px; width: 32px; }

/*
 * Fourteen dots at 32px each need 448px, which is wider than a 360px phone —
 * making the row square pushed the page into horizontal scroll. They wrap now,
 * and the strip is centred.
 */
.rb-carousel__dots { flex-wrap: wrap; row-gap: 2px; max-width: 100%; }

/*
 * Drawer links were 18px tall. A finger needs at least 40. This also gives the
 * submenu entries a proper row rather than a line of text.
 */
@media (max-width: 1200px) {
	#mobileNav a,
	.gnav-m__sub a,
	.gnav-m__col a,
	.mobile-nav__links a {
		display: flex;
		align-items: center;
		min-height: 40px;
	}

	#mobileNav .gnav-m__link { min-height: 46px; }
}

/* The footer link columns were 18px rows on a phone — the last set of tap
   targets under the 32px minimum. */
@media (max-width: 900px) {
	.site-footer li > a,
	.footer-col a,
	.footer-nav a {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
	}
}

/*
 * Any link that is the whole of a list item gets a tappable row on a phone.
 * This catches the sitemap directory, the COE and Lean panels, the contact
 * details and the job listings — everywhere a list of links is the content.
 * Links inside sentences are deliberately excluded: making those 36px tall
 * would break the line they sit in.
 */
@media (max-width: 900px) {
	main li > a:only-child,
	.sitemap a,
	.rb-acc__list a,
	.rb-dir a {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
	}
}

/* Breadcrumbs and the contact details list — links inside a list item that
   also holds an icon, so `:only-child` above did not reach them. */
@media (max-width: 900px) {
	.crumbs a,
	.contact-list a,
	.contact-card a,
	li > a[href^="tel:"],
	li > a[href^="mailto:"] {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
	}
}

/* WP Job Manager's own RSS link sits at 18px. */
@media (max-width: 900px) {
	.showing_jobs a,
	a.rss_link { display: inline-flex; align-items: center; min-height: 36px; }
}

/* ==========================================================================
   THE BAR NEVER WRAPS — PRIORITY+ (v3.50.0)

   The bar was previously allowed to run onto a second row at >=1201px, and the
   type was shrunk step by step to stop a third row forming — down to .735rem
   between 1201 and 1240px, which is below a comfortable reading size for a
   navigation label.

   It is now a single row at one consistent size. Whatever does not fit is
   moved into the "All" panel by assets/js/group-menu.js, from the end of the
   sequence, so the leading sections stay on the bar.

   Everything here is scoped to `.gnav--fitted`, a class only the script adds.
   With JavaScript off the rules above still apply and the bar wraps as it did,
   so no link is ever hidden without somewhere to reach it.
   ========================================================================== */

@media (min-width: 1201px) {

	.gnav--fitted .gnav__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		width: 100%;
	}

	/* Items are sized by their label and never stretched or squeezed: the
	   script decides what fits, so flex must not second-guess it. */
	.gnav--fitted .gnav__item {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* Measured and hidden by the script. `display: none` rather than
	   `visibility`, so the cell gives its width back to the row. */
	.gnav--fitted .gnav__item--off { display: none; }

	/* All and Search sit together at the far right, whatever is on the row. */
	.gnav--fitted .gnav__item--all { margin-left: auto; }

	.gnav--fitted .gnav__item--all,
	.gnav--fitted .gnav__item--search { flex: 0 0 auto; }

	/*
	 * Type and spacing, restored.
	 *
	 * These undo the progressive squeeze that only existed to control where
	 * the second row broke. With one row the label can go back to a readable
	 * size at every desktop width.
	 */
	.gnav--fitted .gnav__link,
	.gnav--fitted .gnav__all {
		font-size: .8rem;
		padding: 0 9px;
		letter-spacing: 0;
	}

	.gnav--fitted .gnav__chev { width: 12px; height: 12px; }

	/*
	 * The row rule is dropped. It was there to articulate the join between
	 * two wrapped rows; on a single row it reads as an underline across the
	 * whole bar.
	 */
	.gnav--fitted .gnav__item > .gnav__link { border-bottom: 0; }
}

/*
 * A count on the All button when it is holding items, so it is clear the
 * remaining sections are in there rather than gone.
 */
.gnav--fitted .gnav__allText[data-count]::after {
	content: " (" attr(data-count) ")";
	font-variant-numeric: tabular-nums;
	opacity: .85;
}

/* --------------------------------------------------------------------------
   The overflow group inside the All panel
   -------------------------------------------------------------------------- */

.gnav-all__more {
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line, rgba(15, 23, 42, .12));
}

.gnav-all__moreHead {
	margin: 0 0 10px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted, #64748B);
}

.gnav-all__moreList {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gnav-all__moreLink {
	display: inline-flex;
	align-items: center;
	padding: 7px 13px;
	border: 1px solid var(--line, rgba(15, 23, 42, .12));
	border-radius: 999px;
	background: var(--bg-alt, #F1F5F9);
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--body, #0F172A);
	text-decoration: none;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.gnav-all__moreLink:hover,
.gnav-all__moreLink:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.gnav-all__moreLink[aria-current="page"] {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Hover intent (v3.51.0)

   With `gnav--intent` set, hovering alone no longer opens a panel — the
   script decides, after a short dwell, and adds `is-open`. Keyboard focus is
   deliberately left on `:focus-within` so it opens with no delay at all.

   The class is added only by assets/js/group-menu.js, so without JavaScript
   the plain `:hover` rules above still open the menu.
   -------------------------------------------------------------------------- */

.gnav--intent .gnav__item--mega:hover > .gmega {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
}

/* Listed after the rule above so they win on source order at equal weight. */
.gnav--intent .gnav__item--mega:focus-within > .gmega,
.gnav--intent .gnav__item.is-open > .gmega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}