/* ==========================================================================
   Site header: utility bar, brand bar, primary navigation, sticky state.
   ========================================================================== */

.site-header {
	position: relative;
	z-index: 50;
}

/* Utility bar ------------------------------------------------------------ */

/* Production's white sits on `header#ct-masthead`, which is `position: static`
   and so paints below the page content the header is pulled over. This theme
   had it on `.site-header`, which is `position: relative; z-index: 50`, so the
   white would paint over the hero once the header floats. It belongs on the
   two bands that end at 158, clear of the overlap. */
.brand-bar {
	background: var(--rilt-surface);
}

/* Production's `#ct-header-top.ct-header-top6`, measured at 1440:
   `padding: 7px 0; font-size: 14px; line-height: 24px` over
   `rgb(21, 38, 68)` - a 38px strip. Staging drove it from `min-height: 36px`
   instead, so the strip was 2px short and its glyphs 1px small. */
.utility-bar {
	background: var(--rilt-navy-deep);
	color: #fff;
	font-size: 14px;
	line-height: 24px;
	padding-block: 7px;
}

.utility-bar__inner {
	display: flex;
	align-items: center;
	/* Production carries an empty `.ct-header-wellcome` with `flex-grow: 1`
	   ahead of the icons, so they sit flush with the right edge of the
	   container, at 1305. Staging's `space-between` left them at 135. */
	justify-content: flex-end;
	gap: 1rem;
}

/* Production's `.ct-header-wellcome` is `flex-grow: 1`, which is what pins
   the icons to the right. This note only renders when
   `rilt_match_production_utility_bar` is filtered off, and without the grow
   the strip's `justify-content: flex-end` would stack it against them. */
.utility-bar__note {
	margin: 0;
	flex-grow: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.social {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social__link {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: inherit;
}

.social__link:hover,
.social__link:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

/* The header strip only - the footer keeps its own list. Production draws no
   button here at all:
   `.ct-header-top6 .ct-header-social a { display: inline-block; color: #e4e4e4 }`,
   `a + a { margin-left: 20px }`, hover measured live at `rgb(5, 175, 236)`,
   and the glyph is a 14px Font Awesome 5 Brands `i`, not a 28px disc. */
.utility-bar .social {
	gap: 20px;
}

.utility-bar .social__link {
	display: inline-block;
	width: auto;
	height: auto;
	border-radius: 0;
	color: #e4e4e4;
}

.utility-bar .social__link:hover,
.utility-bar .social__link:focus-visible {
	background: none;
	color: var(--rilt-accent);
}

.utility-bar .social__link .fab {
	font-size: 14px;
}

.social__icon {
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.social__icon[data-network="facebook"] {
	--icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.3-1.5 1.6-1.5h1.6V4.6c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.5-4 4.1v2.3H8.6V14h2.7v8z'/%3E%3C/svg%3E");
}

.social__icon[data-network="twitter"] {
	--icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 3h3.3l-7.2 8.2 8.5 11.3h-6.7l-5.2-6.9-6 6.9H1.3l7.7-8.8L.9 3h6.8l4.7 6.3zm-1.2 18.2h1.8L7.4 4.7H5.4z'/%3E%3C/svg%3E");
}

.social__icon[data-network="linkedin"] {
	--icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.9 5a1.9 1.9 0 1 1-3.8 0 1.9 1.9 0 0 1 3.8 0M3.3 21.5h3.4V8.6H3.3zm6.1 0h3.3v-6.9c0-1.8.4-3.6 2.6-3.6 2.2 0 2.3 2.1 2.3 3.7v6.8h3.4V14c0-3.4-.7-6-4.7-6-1.9 0-3.2 1-3.7 2h-.1V8.6H9.4z'/%3E%3C/svg%3E");
}

.social__icon[data-network="whatsapp"] {
	--icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.5 15.3L2 22l4.8-1.4A10 10 0 1 0 12 2m0 1.8a8.2 8.2 0 1 1-4.2 15.2l-.3-.2-2.8.8.8-2.7-.2-.3A8.2 8.2 0 0 1 12 3.8m-3.6 4c-.2 0-.5 0-.7.3-.2.3-.7.8-.7 1.8s.8 2 .9 2.2c.1.1 1.4 2.3 3.5 3.1 1.7.7 2.1.6 2.5.5.5 0 1.2-.5 1.4-1 .2-.5.2-.9.1-1l-.4-.2-1.3-.6c-.2 0-.3 0-.4.1l-.6.7c-.1.2-.3.2-.5.1a6 6 0 0 1-1.7-1 6.6 6.6 0 0 1-1.2-1.5c-.1-.2 0-.3.1-.4l.4-.5.2-.4v-.3l-.6-1.4c-.1-.4-.3-.4-.4-.4z'/%3E%3C/svg%3E");
}

/* Brand bar -------------------------------------------------------------- */

/* `#ct-header-middle` is `padding: 15px 0` around a 90px row - 120px in all.
   Staging's 16px padding around a 67.5px row gave 99.5px. */
.brand-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rilt-gap);
	flex-wrap: wrap;
	padding-block: 15px;
	min-height: 120px;
}

.brand img,
.custom-logo {
	/* Production's header logo measures 257x60 at 1440 and 214x50 at 390 -
	   two fixed sizes either side of its phone breakpoint, not a fluid
	   width. Staging capped the height at 56px, which pinned it to 240x56 at
	   every width. */
	width: 257px;
	height: auto;
	max-width: 100%;
}

@media (max-width: 47.99rem) {
	.brand img,
	.custom-logo {
		width: 214px;
	}
}

.brand__fallback {
	display: grid;
	color: var(--rilt-navy);
}

.brand__name {
	font-family: var(--rilt-font-heading);
	font-size: 1.375rem;
	font-weight: 700;
}

.brand__tagline {
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rilt-muted);
}

/* `.ct-header-holder .ct-header-info-item + .ct-header-info-item` is
   `margin-left: 28px; padding-left: 28px` under layout15, and the 1px divider
   the base theme draws between items is `display: none` there - measured
   live, no separator. 56px between items; staging used a 20-44px clamp. */
.contact-points {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-point + .contact-point {
	margin-left: 28px;
	padding-left: 28px;
}

/* `.ct-header-info-item { display: flex; align-items: center;
   position: relative }`, at the header's own 30px line-height. */
.contact-point {
	display: flex;
	align-items: center;
	position: relative;
}

/* `.h-item-icon { display: block; line-height: 1 }` - unitless, so the 30px
   glyph inside it computes a 30px line-height of its own. */
.contact-point__icon-wrap {
	flex: none;
	display: block;
	line-height: 1;
}

/* `.ct-header-layout15 .h-item-icon i { font-size: 30px; position: relative;
   top: -2px }`, `i { margin-right: 12px }`, the envelope `top: -6px`, and the
   `i` is left inline as production leaves it. Staging drew these at 26px. */
.contact-point__icon {
	display: inline;
	font-size: 30px;
	margin-right: 12px;
	position: relative;
	top: -2px;
	color: var(--rilt-accent);
}

.contact-point__icon.flaticonv3-envelope {
	top: -6px;
}

/* `.h-item-meta { font-size: 15px }` at the inherited unitless 1.875 -
   28.125px - which is what sets the 4px gap between the two lines. Staging
   inherited 16px/24px and closed the gap to 2px. */
.contact-point__body {
	display: block;
	font-size: 15px;
	line-height: 1.875;
}

/* `.h-item-meta { font-size: 15px }`, `label { line-height: 20px;
   font-weight: 600 }`, `span { display: block; font-weight: 300 }`, with
   layout15 overriding `span { line-height: normal }` and colouring the block
   `rgb(78, 78, 78)` in the inherited family, not the heading family. */
.contact-point__label {
	display: inline-block;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	color: rgb(78, 78, 78);
}

.contact-point__meta {
	display: block;
	font-size: 15px;
	font-weight: 300;
	line-height: normal;
	color: rgb(78, 78, 78);
}

/* `a.h-item-link` - production makes the whole block one hit area with an
   absolutely positioned overlay. */
.contact-point__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Production's select is the browser's own control at
   `height: 25px; width: 130px; display: block; margin-right: 15px`, which is
   what puts the row's right edge on the container edge at 1305. */
.contact-point__select {
	display: block;
	width: 130px;
	height: 25px;
	padding: 0;
	margin-right: 15px;
	color: rgb(155, 155, 155);
	font-family: inherit;
	font-size: 15px;
}

/* Primary navigation ----------------------------------------------------- */

.nav-bar {
	background: var(--rilt-navy-deep);
}

/* `flex-start`, not `flex-end`. The bar used to hold the menu and a search
   button, and the button's `margin-inline-start: auto` swallowed the free space
   and so held the menu against the left edge at x162. With the button gone the
   menu is the only child, and `flex-end` would have slid it to the right edge -
   moving every top-level link and every dropdown panel off production's x. */
.nav-bar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
	min-height: var(--rilt-header-h);
}

.nav__list,
.nav__submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.nav__link {
	display: inline-flex;
	align-items: center;
	padding: 1.375rem 1rem;
	color: #fff;
	font-family: var(--rilt-font-heading);
	font-size: 1rem;
	font-weight: 600;
	/* Production's navigation line box is 62px tall, which is what sets the
	   height of its menu bar. */
	line-height: 62px;
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__item.is-current > .nav__link {
	color: var(--rilt-accent);
	text-decoration: none;
}

.nav__item.is-current > .nav__link {
	box-shadow: inset 0 -3px 0 var(--rilt-accent);
}

.nav__toggle {
	display: inline-grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	margin-inline-start: -0.75rem;
	padding: 0;
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
}

.nav__toggle::before {
	content: "+";
	font-size: 1rem;
	line-height: 1;
}

.nav__item--parent[data-open="true"] > .nav__toggle::before {
	content: "\2013";
}

.nav__submenu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 20;
	min-width: 16rem;
	padding-block: 0.5rem;
	background: #fff;
	border-radius: 0 0 var(--rilt-radius) var(--rilt-radius);
	box-shadow: var(--rilt-shadow-lift);
	display: none;
}

.nav__submenu .nav__submenu {
	inset-block-start: 0;
	inset-inline-start: 100%;
	border-radius: var(--rilt-radius);
}

.nav__item--parent:hover > .nav__submenu,
.nav__item--parent:focus-within > .nav__submenu,
.nav__item--parent[data-open="true"] > .nav__submenu {
	display: block;
}

.nav__submenu .nav__link {
	width: 100%;
	padding: 0.625rem 1.125rem;
	color: #222;
	font-size: 0.875rem;
	font-weight: 500;
}

.nav__submenu .nav__link:hover,
.nav__submenu .nav__link:focus-visible {
	background: var(--rilt-surface-alt);
	color: var(--rilt-navy);
}

.nav__submenu .nav__item.is-current > .nav__link {
	box-shadow: none;
	color: var(--rilt-accent);
}

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

.nav-burger {
	display: none;
	width: 44px;
	height: 44px;
	margin-inline-end: auto;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.nav-burger__box,
.nav-burger__box::before,
.nav-burger__box::after {
	display: block;
	width: 22px;
	height: 2px;
	background: #fff;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.nav-burger__box {
	position: relative;
	margin-inline: auto;
}

.nav-burger__box::before,
.nav-burger__box::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
}

.nav-burger__box::before {
	inset-block-start: -7px;
}

.nav-burger__box::after {
	inset-block-start: 7px;
}

.nav-burger[aria-expanded="true"] .nav-burger__box {
	background: transparent;
}

.nav-burger[aria-expanded="true"] .nav-burger__box::before {
	transform: translateY(7px) rotate(45deg);
}

.nav-burger[aria-expanded="true"] .nav-burger__box::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* Production's header has two breakpoints, not one, both on the Bootstrap 4
   grid it is built against. Measured on both sites at 1200/1199/992/768/767:
   production swaps the menu for a menu button below 1200 and keeps the utility
   bar all the way down to 768. Driving both from a single 992 query - which is
   what this file did - is the whole reason staging kept the desktop nav at
   1024 and dropped the top bar at 768. */

/* The drawer's own logo and search form are production's `.ct-logo-mobile` and
   `.header-mobile-search`, which it hides above the breakpoint with
   `@media screen and (min-width: 1200px) { .header-mobile-search,
   #ct-menu-mobile, .ct-logo-mobile { display: none } }`. */
.nav__logo,
.nav__search {
	display: none;
}

/* The phone header and the off-canvas drawer -------------------------------
   Values below the breakpoint are production's own, copied verbatim from the
   `@media screen and (max-width: 1199px)` blocks of
   consultio/assets/css/theme.css (header ~8497-8562, drawer ~9364-9710), and
   confirmed live on production at 390. The client authorised copying
   production's CSS and HTML - not its PHP - and the user extended that to the
   mobile header and menu for this batch; the markup is still emitted by this
   theme's own template and walker.

   Production's phone header is ONE 80px band, not two:
     #ct-header-wrap            position: relative; background: #fff;
                                box-shadow: 0 0 5px rgba(0,0,0,.15)
     .ct-header-top6            display: none
     the desktop logo/contact row  display: none
     .ct-header-branding        margin: 15px   (img max-height 50) -> 80px
     #ct-menu-mobile            absolute, top 50%, right 15px, 30x32

   Staging stacked `.brand-bar` (74) on `.nav-bar` (72) and came to 145.9.
   The winning rules were `.brand-bar__inner { padding-block: .75rem }` and
   `.nav-bar__inner { min-height: var(--rilt-header-h) }`; both are zeroed
   here and the burger moves into the brand bar, which becomes the band. */

@media (max-width: 74.99rem) {
	/* The contact block goes with the menu: production hides both below 1200. */
	.contact-points {
		display: none;
	}

	/* `#ct-header-wrap` at <=1199. */
	.site-header {
		position: relative;
		z-index: 999;
		background: #fff;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	}

	.brand-bar {
		position: relative;
		background: transparent;
	}

	/* `.ct-header-branding { margin: 15px }` inside
	   `.ct-header-main .container { padding: 0 15px }`. Production's `.row` is
	   a flex box, so the branding's block margins cannot collapse out of it.
	   Written as margins on a block container they collapsed straight through
	   `.site-header`, which then started at y 15 and measured 109 instead of
	   80, so they are the container's padding here - the same 15 + 50 + 15 -
	   and the container stays flex. The inline 15px is the container's own
	   gutter, which is production's `.row` offset. */
	.brand-bar__inner {
		display: flex;
		align-items: center;
		position: relative;
		padding-block: 15px;
		min-height: 0;
	}

	.brand {
		margin: 0;
	}

	.nav-bar {
		background: transparent;
	}

	/* Nothing is left in this bar's flow - the drawer is absolute and there is
	   no search control to render - so it collapses to 0 and the header is the
	   brand bar alone. It stays flex so the whitespace around the drawer does
	   not open a line box and give the bar a height. */
	.nav-bar__inner {
		display: flex;
		padding-block: 0;
		min-height: 0;
	}

	/* The burger, production's `.btn-nav-mobile`: 30x32, #1f2233, three 26x2
	   bars at 8 / 15 / 22, each `all 300ms linear 0ms`. Staging drew 44x44
	   with 22x2 white bars and a `.2s ease` transform.

	   Production hangs all three bars off the button itself (`:before`,
	   `:after` and a `span`), because opening sets `span { display: none }` -
	   a bar nested inside that span would vanish with it. The two bars this
	   theme hung off `.nav-burger__box` are therefore switched off here and
	   redrawn on the button. */
	.nav-burger {
		display: block;
		position: absolute;
		top: 50%;
		right: 15px;
		transform: translateY(-50%);
		width: 30px;
		height: 32px;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		color: #1f2233;
		font-size: 16px;
		line-height: 32px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		transition: all 300ms linear 0ms;
	}

	.nav-burger::before,
	.nav-burger::after,
	.nav-burger .nav-burger__box {
		content: "";
		position: absolute;
		display: block;
		left: 0;
		right: 0;
		margin: auto;
		width: 26px;
		height: 2px;
		top: 22px;
		background-color: #1f2233;
		transition: all 300ms linear 0ms;
	}

	.nav-burger::before {
		top: 8px;
	}

	.nav-burger .nav-burger__box {
		top: 15px;
	}

	.nav-burger .nav-burger__box::before,
	.nav-burger .nav-burger__box::after {
		content: none;
	}

	.nav-burger[aria-expanded="true"]::before {
		top: 15px;
		transform: rotate(45deg);
	}

	.nav-burger[aria-expanded="true"]::after {
		top: 15px;
		transform: rotate(-45deg);
	}

	.nav-burger[aria-expanded="true"] .nav-burger__box {
		display: none;
	}

	/* `.ct-header-navigation` - the clipped 260x100vh shell. Staging had
	   `.nav { display: none }` / `.nav.is-open { display: block }`, an inline
	   block inside the navigation bar that pushed the page down with no
	   motion at all. */
	.nav {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 260px;
		height: 100vh;
		margin: 0 !important;
		padding: 0;
		overflow: hidden;
		visibility: hidden;
		z-index: 999;
	}

	/* `.ct-header-navigation .ct-main-navigation`. */
	.nav__panel {
		overflow: hidden;
		width: 260px;
		padding: 0;
		background-color: #fff;
		position: fixed;
		z-index: 1001;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		transition: all 300ms linear 0ms;
		transform: translateX(-100%);
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.22);
	}

	/* `.ct-main-navigation-inner`. */
	.nav__inner {
		height: 100%;
		overflow-y: scroll;
		padding: 30px 26px 30px 16px;
		margin-right: -10px;
	}

	/* `.ct-header-navigation.navigation-open`. */
	.nav.is-open {
		visibility: visible;
		z-index: 999;
	}

	.nav.is-open .nav__panel {
		transform: translateX(0%);
	}

	/* `.ct-logo-mobile` and `.header-mobile-search`, both inside the drawer. */
	.nav__logo {
		display: block;
		position: relative;
		margin-bottom: 30px;
		text-align: center;
	}

	.nav__logo img {
		max-height: 50px;
		width: auto;
		height: auto;
	}

	.nav__search {
		display: block;
		position: relative;
		margin-bottom: 12px;
	}

	.nav__search form {
		display: block;
		margin: 0;
	}

	.nav__search .search-field {
		display: inline-block;
		width: 100%;
		height: 51px;
		border: 1px solid #ececf0;
		border-radius: 0;
		padding: 0 22px;
		color: #222;
		font-size: 15px;
		background: #fff;
	}

	.nav__search .search-submit {
		position: absolute;
		top: 0;
		right: 0;
		width: 53px;
		height: 50px;
		padding: 0;
		border: none;
		border-left: 1px solid #ececf0;
		border-radius: 0;
		box-shadow: none;
		background-color: transparent;
		background-image: none;
		color: #222;
		font-size: 15px;
		line-height: 50px;
		cursor: pointer;
	}

	.nav__search .search-field:focus {
		border-color: #05afec;
	}

	.nav__search .search-field:focus + .search-submit,
	.nav__search .search-submit:hover {
		border-color: #05afec;
	}

	/* Menu type - `.ct-main-menu li a` at <=1199. */
	.nav__list {
		display: block;
		margin: 0;
		padding: 0;
	}

	.nav__item {
		display: block;
		position: relative;
		border: 0;
	}

	.nav__link {
		display: block;
		padding: 0;
		line-height: 50px;
		color: #282828;
		font-family: var(--rilt-font-heading);
		font-size: 15px;
		font-weight: 600;
		border-bottom: 1px solid #ebebeb;
	}

	.nav__link:hover,
	.nav__link:focus-visible,
	.nav__item.is-current > .nav__link,
	.nav__item.is-current > .nav__link:hover {
		color: #05afec;
		box-shadow: none;
	}

	.nav__link::before,
	.nav__link::after {
		content: none;
	}

	/* `.ct-main-menu > li > .sub-menu { border-bottom: 1px solid #ebebeb;
	   padding: 9px 0 }`, and every level is `position: relative; display:
	   none` rather than an absolute dropdown panel. */
	.nav__submenu {
		position: relative;
		display: none;
		inset: auto;
		z-index: auto;
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 0;
		background: none;
		border-radius: 0;
		box-shadow: none;
	}

	.nav__list > .nav__item > .nav__submenu {
		border-bottom: 1px solid #ebebeb;
		padding-block: 9px;
	}

	.nav__submenu .nav__link {
		padding: 0 0 0 10px;
		line-height: 34px;
		font-weight: 400;
		font-size: 14px;
		border: none;
		background: none;
		color: #282828;
	}

	.nav__submenu .nav__submenu .nav__link {
		padding-left: 20px;
	}

	.nav__submenu .nav__submenu .nav__submenu .nav__link {
		padding-left: 30px;
	}

	.nav__submenu .nav__link:hover,
	.nav__submenu .nav__link:focus-visible,
	.nav__submenu .nav__item.is-current > .nav__link {
		color: #05afec;
		background: none;
	}

	/* Hover and `:focus-within` must not open a level here: production opens
	   on the caret alone, with a 400ms slide. The caret is a real button, so
	   the keyboard still reaches every level. */
	.nav__item--parent:hover > .nav__submenu,
	.nav__item--parent:focus-within > .nav__submenu {
		display: none;
	}

	.nav__item--parent[data-open="true"] > .nav__submenu {
		display: block;
	}

	/* `.ct-menu-toggle` - 30x30 at top 10 right 0, 1px #ebebeb, radius 3px.
	   Production's glyph is Font Awesome 5 Pro `\f105`, swapped for `\f106`
	   when open. Staging loads no Font Awesome main face - only the Consultio
	   Flaticon faces, an FA5 Brands face for the header socials and a
	   Material Design Iconic face for the back-to-top - so the chevron is
	   drawn in CSS at the same size and box, exactly as the desktop
	   nested-parent chevron in this file already is: a 5x5 box with two
	   1.5px borders, rotated 45deg for the right-pointing state and -45deg
	   for the up-pointing one. No glyph is faked and no new font is loaded. */
	.nav__toggle {
		display: block;
		position: absolute;
		top: 10px;
		right: 0;
		width: 30px;
		height: 30px;
		margin: 0;
		padding: 0;
		background: none;
		border: 1px solid #ebebeb;
		border-radius: 3px;
		color: #383838;
		font-size: 15px;
		line-height: 15px;
		cursor: pointer;
	}

	.nav__toggle::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 5px;
		height: 5px;
		margin: 0;
		border-top: 1.5px solid currentColor;
		border-right: 1.5px solid currentColor;
		border-radius: 0;
		font-size: 0;
		transform: translate(-50%, -50%) rotate(45deg);
		transition: all 300ms linear 0ms;
	}

	.nav__item--parent[data-open="true"] > .nav__toggle::before {
		content: "";
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	/* `.ct-main-menu .sub-menu li .ct-menu-toggle { top: 2px }`. */
	.nav__submenu .nav__item > .nav__toggle {
		top: 2px;
	}
}

/* The utility bar is the one part that survives past the menu, down to 768. */
@media (max-width: 47.99rem) {
	.utility-bar {
		display: none;
	}
}

/* Sticky state ----------------------------------------------------------- */

.site-header.is-stuck {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	box-shadow: var(--rilt-shadow);
}

.site-header.is-stuck .utility-bar,
.site-header.is-stuck .brand-bar {
	display: none;
}


.site-header.is-stuck .nav-bar {
	background: #fff;
}

.site-header.is-stuck .nav-bar__inner {
	justify-content: space-between;
}

.site-header.is-stuck .nav__link {
	color: var(--rilt-navy);
}

.site-header.is-stuck .nav__link:hover,
.site-header.is-stuck .nav__item.is-current > .nav__link {
	color: var(--rilt-accent);
}

.site-header.is-stuck .nav__toggle {
	color: var(--rilt-navy);
}

.site-header.is-stuck .nav-burger__box,
.site-header.is-stuck .nav-burger__box::before,
.site-header.is-stuck .nav-burger__box::after {
	background: var(--rilt-navy);
}

body.has-stuck-header {
	padding-block-start: var(--rilt-header-h);
}

/* This rule used to list `.contact-point__label` too, and being later in the
   file it beat the label's own weight: production's label is 15px at weight
   600, and only the line beneath it is weight 300. Both sizes and the colour
   now sit on the two rules those elements actually name. */

/* A current top-level menu item stays white on production rather than taking
   the accent colour - on the desktop bar. In the drawer production paints it
   #05afec, and this rule sat after the phone block at equal specificity, so it
   has to be scoped or it repaints the drawer's current item white. */
@media (min-width: 75rem) {
	.nav__item.is-current > .nav__link {
		color: #fff;
	}
}

/* Desktop navigation, ported from production ------------------------------
   The client's standing "write fresh code" rule was explicitly overridden by
   the user for the navigation bar: these values are production's own, read
   from consultio/assets/css/theme.css?ver=1.2.1 (base menu block ~8098-8330,
   header layout15 block ~6487-6610). Everything is scoped to the desktop
   breakpoint so the mobile drawer above keeps its own behaviour untouched. */

@media (min-width: 75rem) {

	/* Production's layout15 bar is exactly the 62px menu line box. */
	.nav-bar__inner {
		min-height: 62px;
	}

	.nav__list {
		flex-wrap: nowrap;
		align-items: center;
	}

	/* .ct-main-menu li { position: relative }
	   .ct-main-menu > li { margin: 0 } (layout15) */
	.nav__item {
		position: relative;
		display: block;
		border: 0;
		margin: 0;
	}

	.nav__item:hover {
		overflow: visible;
	}

	/* .ct-main-menu > li > a: 16px/600 Poppins, line-height 62px, padding
	   0 28px, colour #fff, z-index 1 (layout15, not sticky). */
	.nav__link {
		position: relative;
		z-index: 1;
		display: block;
		padding: 0 28px;
		margin: 0;
		color: #fff;
		font-family: var(--rilt-font-heading);
		font-size: 16px;
		font-weight: 600;
		line-height: 62px;
		transition: all 300ms linear 0ms !important;
	}

	/* Production's layout15 white rule outranks its own hover colour, so the
	   label does not change colour on hover - only the pill appears. */
	.nav__link:hover,
	.nav__link:focus-visible,
	.nav__item.is-current > .nav__link,
	.nav__item--parent:focus-within > .nav__link {
		color: #fff;
	}

	/* No underline on the current item: production marks it with the pill. */
	.nav__item.is-current > .nav__link {
		box-shadow: none;
	}

	/* The full-height gradient pill. */
	.nav__link::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 100%;
		height: 100%;
		z-index: -1;
		opacity: 1;
		background-color: #05afec;
		background-image: linear-gradient(to right, #05afec, #94ca36);
		transform: scale(0, 1);
		transform-origin: right center;
		transition: transform 0.25s cubic-bezier(0.37, 0.31, 0.2, 0.85);
	}

	.nav__item:hover > .nav__link::before,
	.nav__item.is-current > .nav__link::before,
	.nav__item--parent:focus-within > .nav__link::before,
	.nav__item--parent[data-open="true"] > .nav__link::before {
		transform: scale(1, 1);
		transform-origin: left center;
	}

	/* .ct-main-menu > li.menu-item-has-children > a:after { content: "+" }
	   Production has no toggle button at all, so staging's - which exists for
	   keyboard reach - is taken out of the visual flow and the marker moves
	   onto the link, exactly where production puts it. */
	.nav__item--parent > .nav__link::after {
		content: "+";
		margin-left: 4px;
		display: inline-block;
		vertical-align: top;
	}

	.nav__toggle {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: 8px;
		width: 1px;
		height: 1px;
		margin: 0;
		padding: 0;
		overflow: hidden;
		opacity: 0;
		/* A mouse never reaches it; a keyboard still can. */
		pointer-events: none;
	}

	.nav__toggle::before {
		content: none;
	}

	/* Revealed only when a keyboard lands on it, so the focus ring is real. */
	.nav__toggle:focus-visible {
		width: auto;
		height: auto;
		margin-block-start: -0.75em;
		opacity: 1;
		overflow: visible;
		pointer-events: auto;
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

	.nav__toggle:focus-visible::before {
		content: "+";
		font-size: 1rem;
		line-height: 1.5;
	}

	.nav__item--parent[data-open="true"] > .nav__toggle:focus-visible::before {
		content: "\2013";
	}

	/* The dropdown panel. */
	.nav__submenu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: auto;
		margin: 0;
		padding: 28px 0;
		min-width: 235px;
		width: auto;
		background: #fff;
		border-radius: 0 0 7px 7px;
		box-shadow: 0 8px 83px rgba(40, 40, 40, 0.08);
		z-index: 99;
		opacity: 0;
		visibility: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		transform: scaleY(0);
		transform-origin: 0 0 0;
		transition: all 300ms linear 0ms;
	}

	.nav__submenu .nav__submenu {
		top: 0;
		left: 100%;
		border-radius: 0 7px 7px 7px;
	}

	.nav__item:hover > .nav__submenu,
	.nav__item--parent:focus-within > .nav__submenu,
	.nav__item--parent[data-open="true"] > .nav__submenu {
		opacity: 1;
		visibility: visible;
		clip: inherit;
		transform: scaleY(1);
	}

	/* Viewport edge flip - the class production's main.js adds on hover. */
	.nav__list > .nav__item > .nav__submenu.back {
		right: 0 !important;
		left: auto !important;
	}

	.nav__submenu .nav__submenu.back {
		right: 100% !important;
		left: auto !important;
		border-radius: 7px 0 7px 7px;
	}

	/* Submenu rows. */
	.nav__submenu .nav__item {
		display: block;
		padding: 0 40px;
		white-space: nowrap;
		border: 0;
	}

	.nav__submenu .nav__link {
		position: relative;
		z-index: auto;
		display: block;
		width: 100%;
		padding: 8px 0;
		margin: 0;
		color: #222;
		font-family: var(--rilt-font-heading);
		font-size: 14px;
		font-weight: 500;
		line-height: normal;
		background: none;
	}

	/* No pill and no "+" inside a dropdown. */
	.nav__submenu .nav__link::before,
	.nav__submenu .nav__link::after {
		content: none;
	}

	.nav__submenu .nav__link:hover,
	.nav__submenu .nav__link:focus-visible,
	.nav__submenu .nav__item.is-current > .nav__link {
		color: #05afec;
		background: none;
	}

	/* Production's nested-parent chevron is Font Awesome 5 Pro "\f105", and
	   that font is not loaded on staging - only the Consultio Flaticon faces
	   are - so the same mark is drawn in CSS at the same size and position
	   rather than shipping an empty glyph box. */
	.nav__submenu .nav__item--parent > .nav__link {
		padding-right: 10px;
	}

	.nav__submenu .nav__item--parent > .nav__link::after {
		content: "";
		position: absolute;
		right: 1px;
		top: 50%;
		width: 5px;
		height: 5px;
		margin-top: -3px;
		border-top: 1.5px solid currentColor;
		border-right: 1.5px solid currentColor;
		transform: rotate(45deg);
	}

	/* Sticky state: production reverts the bar to white, the labels to #000
	   and the pill to the 5px underline it carries outside layout15. */
	.site-header.is-stuck .nav__link {
		padding: 0 15px;
		color: #000;
	}

	.site-header.is-stuck .nav__link:hover,
	.site-header.is-stuck .nav__item.is-current > .nav__link {
		color: #05afec;
	}

	.site-header.is-stuck .nav__link::before {
		height: 5px;
		z-index: auto;
	}

	.site-header.is-stuck .nav__submenu .nav__link {
		padding: 8px 0;
		color: #222;
	}

	.site-header.is-stuck .nav__submenu .nav__link:hover,
	.site-header.is-stuck .nav__submenu .nav__item.is-current > .nav__link {
		color: #05afec;
	}

	.site-header.is-stuck .nav__submenu .nav__item--parent > .nav__link {
		padding-right: 10px;
	}
}

/* The inset navigation bar, and the header's float over the hero -----------
   Both are production's own, from the `@media screen and (min-width: 1200px)`
   block of consultio/assets/css/theme.css:

     #ct-header-wrap.ct-header-layout15 { margin-bottom: -31px }
     #ct-header-wrap.ct-header-layout15 .ct-header-main:not(.h-fixed)
       .ct-header-navigation-bg { background-color: ...; padding: 0 24px 0 27px;
                                  border-radius: 6px; flex-grow: 1 }

   Measured live on production at 1440: the navy box is x 135, width 1170,
   radius 6px; `#ct-header.ct-header-main` itself is transparent and full
   width; and `#main` starts at 189, 31px under the 220px header. Staging had
   a full-bleed square navy bar and no overlap at all.

   `.nav-bar__inner` is this theme's `.container`, whose content box is
   already 1170 wide at x 135, so dropping its max-width to `--rilt-content`
   and swapping its 15px gutters for production's 27/24 puts the painted box
   exactly on production's. */

@media (min-width: 75rem) {

	.site-header {
		margin-block-end: -31px;
	}

	.nav-bar {
		background: transparent;
	}

	.nav-bar__inner {
		max-width: var(--rilt-content);
		padding-inline: 27px 24px;
		background: var(--rilt-navy-deep);
		border-radius: 6px;
	}

	/* Production never takes its header out of flow, and that is why its page
	   does not move on the first scroll. `#ct-header-wrap` stays
	   `position: relative` with an inline `height` its own script pins to the
	   measured 220px (`consultio_header_sticky()`, guarded by
	   `window_width > 992`); only the inner `#ct-header` band is given
	   `position: fixed` by the `h-fixed` class. Measured on production at
	   1440, scrolling 0 -> 50 -> 600 -> 0: `#ct-header-wrap` holds 0@h220 and
	   `#content` holds doc y 517 at every step.

	   Staging fixed the whole `.site-header` instead - 220px of flow gone,
	   with `margin-block-end` reset from -31 to 0 and `body` given
	   `--rilt-header-h` (72px) back. Measured at 1440 on /blog-list/ and
	   /notices/, the first content block went from doc y 189 to 72 and the
	   document shortened by 117px on the first scroll past the threshold:
	   (220 - 31) - 72 = 117. These four rules move the fixing down onto
	   `.nav-bar` so the flow stops moving. The height is pinned in
	   `initStickyHeader()`, which is production's step the CSS cannot do. */
	.site-header.is-stuck {
		position: relative;
		inset-block-start: auto;
		inset-inline: auto;
		box-shadow: none;
		margin-block-end: -31px;
	}

	/* They are hidden by the base rule because the whole header used to be the
	   fixed bar. In flow they simply scroll away, as production's do. */
	.site-header.is-stuck .utility-bar,
	.site-header.is-stuck .brand-bar {
		display: block;
	}

	/* Production's `#ct-header-wrap #ct-header.h-fixed`: `position: fixed;
	   left: 0; top: 0; right: 0; background-color: #fff;
	   box-shadow: 0 3px 6px rgba(0, 0, 0, .05)`. */
	.site-header.is-stuck .nav-bar {
		position: fixed;
		inset-block-start: 0;
		inset-inline: 0;
		z-index: 60;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	}

	/* Nothing left the flow, so nothing is owed back. */
	body.has-stuck-header {
		padding-block-start: 0;
	}

	.site-header.is-stuck .nav-bar__inner {
		max-width: calc(var(--rilt-content) + (2 * var(--rilt-gutter)));
		padding-inline: var(--rilt-gutter);
		background: transparent;
		border-radius: 0;
	}
}

/* ...but not at phone width, where `.brand-bar` IS the header band. Production
   fixes `.ct-header-main` itself on scroll and keeps the logo and burger:
   `#ct-header.h-fixed { background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,.05);
   position: fixed; left/top/right: 0 }` with `.ct-header-branding
   { margin-top: 10px; margin-bottom: 10px }` - a 70px bar. Without this the
   stuck phone header would be a burger floating over nothing. */
@media (max-width: 74.99rem) {
	.site-header.is-stuck {
		background: #fff;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	}

	.site-header.is-stuck .brand-bar {
		display: block;
	}

	.site-header.is-stuck .brand-bar__inner {
		padding-block: 10px;
	}

	.site-header.is-stuck .nav-bar {
		background: transparent;
	}

	/* The band is 80 at rest, so that is what the page is offset by.
	   Production compensates by nothing at all and jumps the page 70px the
	   moment its header fixes; this keeps the scroll position still. */
	body.has-stuck-header {
		padding-block-start: 80px;
	}
}