/**
 * Smart Header widget.
 *
 * A sticky site header: an optional top bar, a logo, a WordPress menu with
 * dropdowns, an actions cluster (search, phone, CTA, burger), a scroll-progress
 * line, a search overlay and an off-canvas drawer.
 *
 * The behaviour it is named for lives in three states the JS writes onto the
 * root, and every one of them is a class this file reacts to rather than an
 * inline style the script has to keep correct:
 *
 *   is-stuck   past the threshold — solid background, shadow, shorter bar
 *   is-hidden  scrolling down — the bar steps out of the way
 *   is-open    the drawer or the search overlay is up
 *
 * Dropdowns open on hover, on `:focus-within` and on a `.is-open` class, in
 * that order of who needs them: a pointer, a keyboard with no JS, and a tap.
 * The first two are CSS alone, so the menu is usable before the script loads.
 *
 * Colour and type resolve through tokens on `.goxom-hd`, each pointing at a
 * theme global first with a literal fallback for the Elementor editor, where
 * the theme stylesheet is not always loaded.
 */

.goxom-hd {
	/* Brand */
	--hd-primary: var(--color-primary, #1273C4);
	--hd-primary-dark: var(--color-primary-dark, #0B5596);

	/* Ink and surface — the solid, scrolled state */
	--hd-bg: var(--color-white, #ffffff);
	--hd-title: var(--color-black, #0C2338);
	--hd-body: var(--color-body, #5A7387);
	--hd-line: var(--color-border, #D5E3EF);
	--hd-surface: color-mix(in srgb, var(--hd-title) 5%, transparent);

	/* The transparent-over-hero state paints its own ink */
	--hd-over-ink: #ffffff;

	/* Type */
	--hd-font-title: var(--font-title, inherit);
	--hd-font-body: var(--font-body, inherit);

	/* Shape */
	--hd-h: 84px;
	--hd-h-stuck: 68px;
	--hd-ease: cubic-bezier(.22, .61, .36, 1);

	position: relative;
	z-index: 90;
	font-family: var(--hd-font-body);
}

/* Shipped rather than leaning on the theme's `.screen-reader-text`, which is
   not guaranteed to be on the page. Names the icon-only controls and the search
   field for anyone who cannot see them. */
.goxom-hd__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ sticky */

/* The bar that moves is `__shell`, never the root.
 *
 * A transformed element becomes the containing block for its `position: fixed`
 * descendants — so if the root carried the slide-up transform, the drawer, the
 * scrim and the search overlay would all be positioned against a 84px-tall
 * header instead of the viewport, and every one of them would be clipped. The
 * root stays untransformed and holds the tokens and the state classes; only the
 * shell moves, and the overlays are its siblings. */
.goxom-hd--sticky .goxom-hd__shell {
	position: fixed;
	z-index: 90;
	top: 0;
	left: 0;
	right: 0;
}

/* Measured by the JS and written here, so the page below starts where it would
   have without a fixed bar. A CSS height would be a guess the moment anyone
   changes the logo. */
.goxom-hd__spacer {
	height: var(--hd-spacer, 0px);
}

/* The bar steps out of the way going down and comes back the moment the reader
   changes direction — a header is only worth its space when it is wanted. */
.goxom-hd--sticky .goxom-hd__shell {
	transition: transform .45s var(--hd-ease);
}

.goxom-hd--sticky.is-hidden .goxom-hd__shell {
	transform: translateY(-100%);
}

/* ================================================================== top bar */

.goxom-hd__bar {
	position: relative;
	z-index: 2;
	background-color: var(--hd-title);
	color: color-mix(in srgb, #fff 78%, transparent);
	font-size: 13.5px;
	line-height: 1.4;
	/* Rolled up rather than hidden, so the main row slides up into place
	   instead of the whole header jumping a notch. */
	transition: height .4s var(--hd-ease), opacity .3s var(--hd-ease);
}

.goxom-hd.is-stuck .goxom-hd__bar {
	height: 0;
	opacity: 0;
	overflow: hidden;
}

/* Three zones, not two ends: the middle track is what lets the ticker sit
   dead centre regardless of how wide the other two grow. */
.goxom-hd__bar-inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px 26px;
	max-width: var(--hd-width, 1320px);
	margin-inline: auto;
	padding: 9px 20px;
}

.goxom-hd__bar-zone {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 22px;
}

/* Placed explicitly rather than left to auto-flow: with no announcements there
   is no middle child, and the end zone would slide into the centre track. */
.goxom-hd__bar-zone--start {
	grid-column: 1;
}

.goxom-hd__bar-zone--end {
	grid-column: 3;
	justify-content: flex-end;
}

/* Dismissed. The same collapse the bar uses on scroll, so the two states never
   disagree about how a rolled-up bar looks. */
.goxom-hd--bar-off .goxom-hd__bar {
	height: 0;
	opacity: 0;
	overflow: hidden;
}

/* -------------------------------------------------------- open/closed light */

.goxom-hd__status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-weight: 600;
	white-space: nowrap;
	color: #fff;
}

.goxom-hd__status-note {
	font-weight: 400;
	opacity: .66;
}

/* The separator belongs to the note, so a bar with no note has no orphan dot
   sitting after the label. */
.goxom-hd__status-note::before {
	content: "· ";
}

.goxom-hd__status-note:empty {
	display: none;
}

.goxom-hd__dot {
	position: relative;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #F59E0B;
}

.goxom-hd__status.is-open .goxom-hd__dot {
	background-color: #22C55E;
}

/* The halo only pulses while the answer is yes. A closed sign that throbs for
   attention is just noise. */
.goxom-hd__status.is-open .goxom-hd__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: inherit;
	animation: goxom-hd-pulse 2.2s ease-out infinite;
}

@keyframes goxom-hd-pulse {
	0%   { transform: scale(1); opacity: .65; }
	100% { transform: scale(3); opacity: 0; }
}

/* ----------------------------------------------------------------- ticker */

.goxom-hd__ticker {
	grid-column: 2;
	display: grid;
	justify-items: center;
	min-width: 0;
}

.goxom-hd__notice {
	/* Every message in the same cell, so the bar's height is the tallest of
	   them and never changes as they rotate. */
	grid-area: 1 / 1;
	margin: 0;
	max-width: 100%;
	opacity: 0;
	transform: translateY(7px);
	pointer-events: none;
	transition: opacity .45s var(--hd-ease), transform .45s var(--hd-ease);
}

.goxom-hd__notice.is-on {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.goxom-hd__notice-in {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	max-width: 100%;
	color: inherit;
	text-decoration: none;
	transition: color .3s var(--hd-ease);
}

a.goxom-hd__notice-in:hover {
	color: #fff;
}

.goxom-hd__notice-in i,
.goxom-hd__notice-in svg {
	flex: 0 0 auto;
	color: var(--hd-primary);
	font-size: 14px;
}

.goxom-hd__notice-in svg {
	display: block;
	width: 14px;
	height: 14px;
}

.goxom-hd__notice-text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Tabular figures, or the clock shudders sideways once a second as the digits
   change width. */
.goxom-hd__countdown {
	flex: 0 0 auto;
	padding: 2px 9px;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--hd-primary) 22%, transparent);
	color: #fff;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: .92em;
	letter-spacing: .02em;
}

.goxom-hd__countdown:empty {
	display: none;
}

/* ---------------------------------------------------------------- dismiss */

.goxom-hd__bar-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: inherit;
	opacity: .6;
	cursor: pointer;
	transition: opacity .3s var(--hd-ease), background-color .3s var(--hd-ease), transform .3s var(--hd-ease);
}

.goxom-hd__bar-close:hover {
	opacity: 1;
	background-color: rgba(255, 255, 255, .14);
	transform: rotate(90deg);
}

.goxom-hd__bar-close svg {
	display: block;
	width: 13px;
	height: 13px;
}

.goxom-hd__facts {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.goxom-hd__fact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.goxom-hd__fact a {
	color: inherit;
	text-decoration: none;
	transition: color .3s var(--hd-ease);
}

.goxom-hd__fact a:hover {
	color: #fff;
}

.goxom-hd__fact i,
.goxom-hd__fact svg {
	color: var(--hd-primary);
	font-size: 14px;
}

.goxom-hd__fact svg {
	display: block;
	width: 14px;
	height: 14px;
}

.goxom-hd__fact svg:not([fill="none"]) {
	fill: currentColor;
}

.goxom-hd__bar-socials {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.goxom-hd__bar-socials a {
	display: inline-flex;
	color: inherit;
	font-size: 14px;
	text-decoration: none;
	transition: color .3s var(--hd-ease), transform .3s var(--hd-ease);
}

.goxom-hd__bar-socials a:hover {
	color: var(--hd-primary);
	transform: translateY(-2px);
}

.goxom-hd__bar-socials svg {
	display: block;
	width: 14px;
	height: 14px;
}

.goxom-hd__bar-socials svg:not([fill="none"]) {
	fill: currentColor;
}

/* ================================================================ main row */

.goxom-hd__main {
	position: relative;
	z-index: 3;
	background-color: var(--hd-bg);
	transition: background-color .35s var(--hd-ease), box-shadow .35s var(--hd-ease);
}

.goxom-hd.is-stuck .goxom-hd__main {
	box-shadow: 0 14px 34px -24px color-mix(in srgb, var(--hd-title) 70%, transparent);
}

.goxom-hd__inner {
	display: flex;
	align-items: center;
	gap: 30px;
	max-width: var(--hd-width, 1320px);
	margin-inline: auto;
	padding: 0 20px;
	height: var(--hd-h);
	transition: height .4s var(--hd-ease);
}

.goxom-hd.is-stuck .goxom-hd__inner {
	height: var(--hd-h-stuck);
}

/* ------------------------------------------------- transparent over a hero */

/* The header sits on the section below it until the reader scrolls, at which
   point it becomes a solid bar. Both states are declared here rather than
   toggled in script, so the paint never lags the class. */
.goxom-hd--over:not(.is-stuck) .goxom-hd__main {
	background-color: transparent;
}

.goxom-hd--over:not(.is-stuck) .goxom-hd__bar {
	background-color: transparent;
	border-bottom: 1px solid color-mix(in srgb, var(--hd-over-ink) 18%, transparent);
}

.goxom-hd--over:not(.is-stuck) {
	--hd-title: var(--hd-over-ink);
	--hd-body: color-mix(in srgb, var(--hd-over-ink) 76%, transparent);
	--hd-line: color-mix(in srgb, var(--hd-over-ink) 22%, transparent);
	--hd-surface: color-mix(in srgb, var(--hd-over-ink) 12%, transparent);
}

/* Two logos, one swap: the mark that works on a photo is rarely the mark that
   works on white, and asking an editor to pick one compromise is how headers
   end up with a grey logo on both. */
.goxom-hd__logo-light {
	display: none;
}

.goxom-hd--over:not(.is-stuck) .goxom-hd__logo-light {
	display: block;
}

.goxom-hd--over:not(.is-stuck) .goxom-hd__logo-main.has-light {
	display: none;
}

/* ------------------------------------------------------------------- logo */

.goxom-hd__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
}

.goxom-hd__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(var(--hd-h) - 30px);
	transition: max-height .4s var(--hd-ease);
}

.goxom-hd.is-stuck .goxom-hd__logo img {
	max-height: calc(var(--hd-h-stuck) - 26px);
}

.goxom-hd__logo-text {
	font-family: var(--hd-font-title);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--hd-title);
}

/* ================================================================== menu */

.goxom-hd__nav {
	flex: 1 1 auto;
	min-width: 0;
}

.goxom-hd__menu {
	display: flex;
	align-items: center;
	gap: var(--hd-gap, 6px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Where the menu sits in the row. Its own property rather than a modifier on
   the nav, so one control drives it. */
.goxom-hd--menu-center .goxom-hd__menu {
	justify-content: center;
}

.goxom-hd--menu-left .goxom-hd__menu {
	justify-content: flex-start;
}

.goxom-hd--menu-right .goxom-hd__menu {
	justify-content: flex-end;
}

.goxom-hd__menu li {
	position: relative;
	margin: 0;
	list-style: none;
}

.goxom-hd__menu a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 10px;
	font-family: var(--hd-font-title);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--hd-title);
	text-decoration: none;
	transition: color .28s var(--hd-ease), background-color .28s var(--hd-ease);
}

.goxom-hd__menu > li > a {
	position: relative;
}

/* The rule grows from the middle out under the item being pointed at, and stays
   put under the page you are actually on. */
.goxom-hd__menu > li > a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--hd-primary);
	transform: scaleX(0);
	transition: transform .32s var(--hd-ease);
}

.goxom-hd__menu > li:hover > a,
.goxom-hd__menu > li:focus-within > a,
.goxom-hd__menu > li.current-menu-item > a,
.goxom-hd__menu > li.current-menu-ancestor > a {
	color: var(--hd-primary);
}

.goxom-hd__menu > li:hover > a::after,
.goxom-hd__menu > li:focus-within > a::after,
.goxom-hd__menu > li.current-menu-item > a::after,
.goxom-hd__menu > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------- dropdowns */

/* A chevron on anything with children, drawn rather than shipped as an icon so
   it inherits the link's colour and turns with the panel. */
.goxom-hd__menu .menu-item-has-children > a::before {
	content: "";
	order: 2;
	width: 7px;
	height: 7px;
	margin-left: 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	border-radius: 1px;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .3s var(--hd-ease);
}

.goxom-hd__menu .menu-item-has-children:hover > a::before,
.goxom-hd__menu .menu-item-has-children.is-open > a::before {
	transform: translateY(1px) rotate(-135deg);
}

.goxom-hd__menu .sub-menu {
	position: absolute;
	z-index: 5;
	top: calc(100% + 10px);
	left: 0;
	display: grid;
	gap: 2px;
	min-width: 234px;
	margin: 0;
	padding: 10px;
	border-radius: 16px;
	border: 1px solid var(--color-border, #D5E3EF);
	background-color: var(--color-white, #fff);
	box-shadow: 0 30px 60px -30px rgba(12, 35, 56, .5);
	list-style: none;
	/* Visibility as well as opacity: a panel faded to zero is still in the
	   accessibility tree and still catches a stray click. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .28s var(--hd-ease), transform .3s var(--hd-ease), visibility .28s var(--hd-ease);
}

/* The panel is a solid card in both header states, so its contents never
   inherit the white-on-photo ink from the transparent bar. */
.goxom-hd__menu .sub-menu a {
	width: 100%;
	padding: 9px 13px;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-black, #0C2338);
}

.goxom-hd__menu .sub-menu a:hover,
.goxom-hd__menu .sub-menu a:focus-visible {
	background-color: color-mix(in srgb, var(--hd-primary) 10%, transparent);
	color: var(--hd-primary-dark);
}

.goxom-hd__menu li:hover > .sub-menu,
.goxom-hd__menu li:focus-within > .sub-menu,
.goxom-hd__menu li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Third level, opening sideways. Flipped by the JS when it would run off the
   viewport, which is the one thing CSS genuinely cannot work out. */
.goxom-hd__menu .sub-menu .sub-menu {
	top: -10px;
	left: calc(100% + 6px);
	transform: translateX(10px);
}

.goxom-hd__menu .sub-menu li.is-flipped > .sub-menu,
.goxom-hd__menu .sub-menu li:hover > .sub-menu.is-flipped {
	left: auto;
	right: calc(100% + 6px);
}

.goxom-hd__menu .sub-menu li:hover > .sub-menu,
.goxom-hd__menu .sub-menu li:focus-within > .sub-menu,
.goxom-hd__menu .sub-menu li.is-open > .sub-menu {
	transform: translateX(0);
}

/* The toggle the JS adds so a dropdown can be opened by tapping the arrow
   without following the parent link. Hidden from pointer users, who have hover,
   and from anyone with no JS, where it does not exist at all. */
.goxom-hd__sub-toggle {
	display: none;
}

/* Except where there is no hover to open a dropdown with. On a touch screen the
   parent link still has to be a link, so the arrow becomes its own target in
   the bar menu too — the case a hover-only dropdown quietly fails. */
@media (hover: none) {
	.goxom-hd__nav .goxom-hd__menu > li.menu-item-has-children {
		display: inline-flex;
		align-items: center;
	}

	.goxom-hd__nav .goxom-hd__menu .menu-item-has-children > a::before {
		display: none;
	}

	.goxom-hd__nav .goxom-hd__sub-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		padding: 0;
		border: 0;
		border-radius: 9px;
		background-color: transparent;
		color: inherit;
		cursor: pointer;
	}

	.goxom-hd__nav .goxom-hd__sub-toggle svg {
		display: block;
		width: 14px;
		height: 14px;
		transition: transform .3s var(--hd-ease);
	}

	.goxom-hd__nav .is-open > .goxom-hd__sub-toggle svg {
		transform: rotate(180deg);
	}
}

/* ================================================================= actions */

.goxom-hd__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	margin-left: auto;
}

.goxom-hd__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--hd-line);
	border-radius: 13px;
	background-color: transparent;
	color: var(--hd-title);
	cursor: pointer;
	transition: background-color .3s var(--hd-ease), color .3s var(--hd-ease),
		border-color .3s var(--hd-ease), transform .3s var(--hd-ease);
}

.goxom-hd__icon-btn:hover,
.goxom-hd__icon-btn:focus-visible {
	background-color: var(--hd-primary);
	border-color: var(--hd-primary);
	color: #fff;
	transform: translateY(-2px);
}

.goxom-hd__icon-btn svg {
	display: block;
	width: 18px;
	height: 18px;
}

.goxom-hd__phone {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
}

.goxom-hd__phone-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: var(--hd-surface);
	color: var(--hd-primary);
	transition: background-color .3s var(--hd-ease), color .3s var(--hd-ease);
}

.goxom-hd__phone:hover .goxom-hd__phone-ico {
	background-color: var(--hd-primary);
	color: #fff;
}

.goxom-hd__phone-ico svg {
	display: block;
	width: 16px;
	height: 16px;
}

.goxom-hd__phone-label {
	display: block;
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--hd-body);
}

.goxom-hd__phone-value {
	display: block;
	font-family: var(--hd-font-title);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hd-title);
}

.goxom-hd__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 46px;
	padding: 0 24px;
	border-radius: 999px;
	background-image: linear-gradient(120deg, var(--hd-primary) 0%, var(--hd-primary-dark) 100%);
	color: #fff;
	font-family: var(--hd-font-title);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: transform .3s var(--hd-ease), box-shadow .3s var(--hd-ease), filter .3s var(--hd-ease);
}

.goxom-hd__cta:hover,
.goxom-hd__cta:focus-visible {
	color: #fff;
	filter: brightness(1.08);
	transform: translateY(-2px);
	box-shadow: 0 18px 32px -16px color-mix(in srgb, var(--hd-primary-dark) 92%, transparent);
}

.goxom-hd__cta svg {
	display: block;
	width: 16px;
	height: 16px;
	transition: transform .3s var(--hd-ease);
}

.goxom-hd__cta:hover svg {
	transform: translateX(3px);
}

/* ------------------------------------------------------------------ burger */

.goxom-hd__burger {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--hd-line);
	border-radius: 13px;
	background-color: transparent;
	cursor: pointer;
}

.goxom-hd__burger span {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--hd-title);
	transition: transform .35s var(--hd-ease), opacity .25s var(--hd-ease);
}

/* Into a cross, from the same three bars — the button never changes what it is,
   only what it says. */
.goxom-hd.is-open .goxom-hd__burger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.goxom-hd.is-open .goxom-hd__burger span:nth-child(2) {
	opacity: 0;
}

.goxom-hd.is-open .goxom-hd__burger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ================================================================ progress */

.goxom-hd__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	overflow: hidden;
	pointer-events: none;
	background-color: transparent;
}

.goxom-hd__progress span {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(var(--hd-progress, 0));
	transform-origin: left center;
	background-image: linear-gradient(90deg, var(--hd-primary), var(--hd-primary-dark));
}

/* ========================================================== search overlay */

.goxom-hd__search {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 18vh 20px 20px;
	background-color: color-mix(in srgb, var(--color-black, #0C2338) 82%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s var(--hd-ease), visibility .35s var(--hd-ease);
}

.goxom-hd__search.is-on {
	opacity: 1;
	visibility: visible;
}

.goxom-hd__search-box {
	width: min(100%, 640px);
	transform: translateY(-16px);
	transition: transform .4s var(--hd-ease);
}

.goxom-hd__search.is-on .goxom-hd__search-box {
	transform: translateY(0);
}

.goxom-hd__search-title {
	margin: 0 0 14px;
	font-family: var(--hd-font-title);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

.goxom-hd__search-form {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 8px 22px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .2);
	background-color: rgba(255, 255, 255, .08);
}

.goxom-hd__search-form input[type="search"],
.goxom-hd__search-form .goxom-hd__search-input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 17px;
	color: #fff;
}

.goxom-hd__search-form .goxom-hd__search-input:focus {
	outline: none;
	box-shadow: none;
}

.goxom-hd__search-form .goxom-hd__search-input::placeholder {
	color: rgba(255, 255, 255, .6);
}

.goxom-hd__search-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background-image: linear-gradient(120deg, var(--hd-primary), var(--hd-primary-dark));
	color: #fff;
	font-family: var(--hd-font-title);
	font-weight: 700;
	cursor: pointer;
	transition: filter .3s var(--hd-ease);
}

.goxom-hd__search-go:hover {
	filter: brightness(1.1);
}

.goxom-hd__search-go svg {
	display: block;
	width: 18px;
	height: 18px;
}

.goxom-hd__search-close {
	position: absolute;
	top: 24px;
	right: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	background-color: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color .3s var(--hd-ease), transform .3s var(--hd-ease);
}

.goxom-hd__search-close:hover {
	background-color: rgba(255, 255, 255, .14);
	transform: rotate(90deg);
}

.goxom-hd__search-close svg {
	display: block;
	width: 18px;
	height: 18px;
}

.goxom-hd__search-hint {
	margin: 14px 0 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .6);
}

.goxom-hd__key {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, .22);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	line-height: 1.5;
}

/* ================================================================== drawer */

.goxom-hd__scrim {
	position: fixed;
	inset: 0;
	z-index: 100;
	background-color: rgba(6, 18, 30, .55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s var(--hd-ease), visibility .4s var(--hd-ease);
}

.goxom-hd.is-open .goxom-hd__scrim {
	opacity: 1;
	visibility: visible;
}

/* An app-style sheet: a fixed head, a scrolling body (search, menu, contact
   card) and a pinned foot with the call to action. Full screen on phones, a
   rounded panel from the right on anything wider. */
.goxom-hd__drawer {
	--hd-row: 52px;
	position: fixed;
	z-index: 110;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(100vw, 420px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 28px 0 0 28px;
	background:
		radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--hd-primary) 9%, transparent) 0%, transparent 60%),
		var(--color-white, #fff);
	box-shadow: -30px 0 60px -30px rgba(12, 35, 56, .5);
	transform: translateX(104%);
	visibility: hidden;
	transition: transform .5s cubic-bezier(.32, .72, 0, 1), visibility .5s;
}

.goxom-hd.is-open .goxom-hd__drawer {
	transform: translateX(0);
	visibility: visible;
}

@media (max-width: 575px) {
	.goxom-hd__drawer {
		width: 100vw;
		border-radius: 0;
	}
}

/* Below the WordPress toolbar for logged-in users (32px, 46px on phones). */
.admin-bar .goxom-hd__drawer {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .goxom-hd__drawer {
		top: 46px;
	}
}

.goxom-hd__drawer-head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
}

.goxom-hd__drawer-logo {
	display: inline-flex;
	min-width: 0;
	text-decoration: none;
}

.goxom-hd__drawer-head img {
	display: block;
	width: auto;
	max-width: 150px;
	max-height: 44px;
	height: auto;
}

.goxom-hd__drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--hd-surface);
	color: var(--color-black, #0C2338);
	cursor: pointer;
	transition: background-color .3s var(--hd-ease), transform .4s var(--hd-ease);
}

.goxom-hd__drawer-close:hover,
.goxom-hd__drawer-close:focus-visible {
	background-color: color-mix(in srgb, var(--hd-primary) 14%, transparent);
	transform: rotate(90deg);
}

.goxom-hd__drawer-close svg {
	display: block;
	width: 18px;
	height: 18px;
}

.goxom-hd__drawer-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 4px 16px 24px;
}

/* Inline search. */
.goxom-hd__drawer-search {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	margin: 0 4px 6px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 16px;
	background-color: var(--hd-surface);
	color: var(--hd-body);
	transition: border-color .25s, background-color .25s, box-shadow .25s;
}

.goxom-hd__drawer-search:focus-within {
	border-color: var(--hd-primary);
	background-color: var(--color-white, #fff);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--hd-primary) 14%, transparent);
}

.goxom-hd__drawer-search svg {
	flex: none;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.goxom-hd__drawer-search input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 16px; /* 16px or iOS zooms the page on focus. */
	color: var(--hd-title);
	outline: none;
}

.goxom-hd__drawer-label {
	margin: 18px 8px 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hd-body);
}

/* The same menu markup as the bar, laid out as rows. Everything below
   overrides the desktop rules rather than asking `wp_nav_menu` for a second
   copy of the menu. */
.goxom-hd__drawer .goxom-hd__menu {
	display: block;
	margin: 0;
	padding: 0;
}

.goxom-hd__drawer .goxom-hd__menu > li {
	margin: 2px 0;
}

.goxom-hd__drawer .goxom-hd__menu a {
	display: flex;
	align-items: center;
	min-height: var(--hd-row);
	padding: 12px 14px;
	border-radius: 14px;
	font-size: 16.5px;
	font-weight: 600;
	white-space: normal;
	color: var(--color-black, #0C2338);
	-webkit-tap-highlight-color: transparent;
}

.goxom-hd__drawer .goxom-hd__menu a:hover,
.goxom-hd__drawer .goxom-hd__menu a:focus-visible {
	background-color: var(--hd-surface);
	color: var(--color-black, #0C2338);
}

.goxom-hd__drawer .goxom-hd__menu a:active {
	transform: scale(.98);
}

.goxom-hd__drawer .goxom-hd__menu > li > a::after {
	display: none;
}

/* The page you are on, and the section it lives in. */
.goxom-hd__drawer .goxom-hd__menu > li.current-menu-item > a,
.goxom-hd__drawer .goxom-hd__menu > li.current-menu-ancestor > a {
	background-color: color-mix(in srgb, var(--hd-primary) 10%, transparent);
	color: var(--hd-primary);
	box-shadow: inset 3px 0 0 var(--hd-primary);
}

/* A parent is a row plus a separate toggle: tapping the label follows the
   link, tapping the arrow opens the list. One target doing both is the most
   annoying thing a mobile menu can do. */
.goxom-hd__drawer .goxom-hd__menu .menu-item-has-children {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 6px;
}

.goxom-hd__drawer .goxom-hd__menu .menu-item-has-children > a::before {
	display: none;
}

.goxom-hd__drawer .goxom-hd__sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-right: 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--hd-surface);
	color: var(--color-black, #0C2338);
	cursor: pointer;
	transition: background-color .3s var(--hd-ease), color .3s var(--hd-ease);
}

.goxom-hd__drawer .goxom-hd__sub-toggle svg {
	display: block;
	width: 16px;
	height: 16px;
	transition: transform .4s var(--hd-ease);
}

.goxom-hd__drawer .is-open > .goxom-hd__sub-toggle {
	background-color: var(--hd-primary);
	color: #fff;
}

.goxom-hd__drawer .is-open > .goxom-hd__sub-toggle svg {
	transform: rotate(180deg);
}

/* The JS wraps each drawer submenu in `__subwrap`: one grid row that animates
   from 0fr to 1fr, so the whole list slides open, however many items. */
.goxom-hd__subwrap {
	grid-column: 1 / -1;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .45s var(--hd-ease);
}

.goxom-hd__drawer li.is-open > .goxom-hd__subwrap {
	grid-template-rows: 1fr;
}

.goxom-hd__drawer .goxom-hd__menu .goxom-hd__subwrap > .sub-menu {
	position: static;
	display: block;
	grid-template-rows: none;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	margin: 0 0 0 22px;
	padding: 0 0 0 10px;
	border: 0;
	border-left: 2px solid var(--hd-line);
	border-radius: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: none;
}

.goxom-hd__drawer li.is-open > .goxom-hd__subwrap > .sub-menu {
	margin-top: 4px;
	margin-bottom: 8px;
}

.goxom-hd__drawer .goxom-hd__menu .sub-menu a {
	min-height: 44px;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-body, #5A7387);
}

.goxom-hd__drawer .goxom-hd__menu .sub-menu .current-menu-item > a {
	color: var(--hd-primary);
	font-weight: 700;
}

/* Contact card. */
.goxom-hd__drawer-card {
	display: grid;
	gap: 16px;
	margin: 20px 4px 0;
	padding: 18px;
	border-radius: 22px;
	background-image: linear-gradient(135deg, var(--hd-primary) 0%, var(--hd-primary-dark) 100%);
	color: #fff;
	box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--hd-primary-dark) 90%, transparent);
}

.goxom-hd__drawer-call {
	display: flex;
	align-items: center;
	gap: 14px;
	color: #fff;
	text-decoration: none;
}

.goxom-hd__drawer-call:hover,
.goxom-hd__drawer-call:focus-visible {
	color: #fff;
}

.goxom-hd__drawer-call-ico {
	display: grid;
	flex: none;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .18);
}

.goxom-hd__drawer-call-ico svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
}

.goxom-hd__drawer-call-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.goxom-hd__drawer-call-body small {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .8;
}

.goxom-hd__drawer-call-body strong {
	font-family: var(--hd-font-title);
	font-size: 17px;
	font-weight: 700;
}

.goxom-hd__drawer-card-label {
	margin: 0 0 -4px;
	font-family: var(--hd-font-title);
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.goxom-hd__drawer-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.goxom-hd__drawer-socials a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 15px;
	transition: background-color .25s, color .25s;
}

.goxom-hd__drawer-socials a:hover,
.goxom-hd__drawer-socials a:focus-visible {
	background-color: #fff;
	color: var(--hd-primary);
}

.goxom-hd__drawer-socials svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.goxom-hd__drawer-foot {
	flex: none;
	padding: 14px 20px calc(16px + var(--hd-appbar-space, 0px) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--hd-line);
	background-color: var(--color-white, #fff);
}

.goxom-hd__drawer-foot .goxom-hd__cta {
	justify-content: center;
	width: 100%;
	height: 52px;
}

/* Rows slide in one after another as the sheet opens. `--i` is set by the
   JS; without it every row simply arrives together. */
.goxom-hd__drawer .goxom-hd__menu > li,
.goxom-hd__drawer .goxom-hd__stagger {
	opacity: 0;
	transform: translateX(28px);
	transition: opacity .4s var(--hd-ease), transform .5s var(--hd-ease);
}

.goxom-hd.is-open .goxom-hd__drawer .goxom-hd__menu > li,
.goxom-hd.is-open .goxom-hd__drawer .goxom-hd__stagger {
	opacity: 1;
	transform: none;
	transition-delay: calc(120ms + var(--i, 0) * 40ms);
}

/* ================================================================= app bar */

.goxom-hd__appbar {
	display: none;
}

.goxom-hd__appbar {
	position: fixed;
	z-index: 120;
	left: 12px;
	right: 12px;
	bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	align-items: end;
	max-width: 520px;
	margin-inline: auto;
	padding: 6px;
	border: 1px solid color-mix(in srgb, var(--hd-line) 70%, transparent);
	border-radius: 24px;
	background-color: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	backdrop-filter: blur(18px) saturate(170%);
	box-shadow: 0 18px 40px -16px rgba(12, 35, 56, .38), 0 2px 6px rgba(12, 35, 56, .06);
	transition: transform .45s var(--hd-ease), opacity .3s;
}

/* Tucked away while the search overlay is up. */
.goxom-hd.is-searching .goxom-hd__appbar {
	opacity: 0;
	transform: translateY(140%);
	pointer-events: none;
}

.goxom-hd__tab {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 0;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: transparent;
	font-family: var(--hd-font-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--hd-body);
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color .25s var(--hd-ease), transform .2s var(--hd-ease);
}

.goxom-hd__tab:hover,
.goxom-hd__tab:focus-visible {
	color: var(--hd-title);
	background: transparent;
}

.goxom-hd__tab:active {
	transform: scale(.92);
}

.goxom-hd__tab:focus-visible {
	outline: 2px solid var(--hd-primary);
	outline-offset: -2px;
}

.goxom-hd__tab-ico {
	display: grid;
	place-items: center;
	width: 48px;
	height: 28px;
	border-radius: 999px;
	transition: background-color .3s var(--hd-ease), width .3s var(--hd-ease);
}

.goxom-hd__tab-ico svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.goxom-hd__tab-label {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Where you are: a tinted pill behind the icon, the label in brand ink. */
.goxom-hd__tab.is-current,
.goxom-hd.is-open .goxom-hd__tab--menu {
	color: var(--hd-primary);
}

.goxom-hd__tab.is-current .goxom-hd__tab-ico,
.goxom-hd.is-open .goxom-hd__tab--menu .goxom-hd__tab-ico {
	background-color: color-mix(in srgb, var(--hd-primary) 14%, transparent);
}

.goxom-hd__tab.is-current .goxom-hd__tab-ico svg {
	fill: color-mix(in srgb, var(--hd-primary) 22%, transparent);
}

/* Three bars that become a cross while the drawer is open. */
.goxom-hd__tab-burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 20px;
	height: 20px;
}

.goxom-hd__tab-burger i {
	display: block;
	height: 2px;
	border-radius: 2px;
	background-color: currentColor;
	transition: transform .35s var(--hd-ease), opacity .2s, width .35s var(--hd-ease);
}

.goxom-hd__tab-burger i:nth-child(2) {
	width: 70%;
}

.goxom-hd.is-open .goxom-hd__tab-burger i:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.goxom-hd.is-open .goxom-hd__tab-burger i:nth-child(2) {
	opacity: 0;
}

.goxom-hd.is-open .goxom-hd__tab-burger i:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* The raised centre action. */
.goxom-hd__tab--fab {
	color: var(--hd-title);
}

.goxom-hd__fab {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-top: -30px;
	border: 4px solid var(--color-white, #fff);
	border-radius: 50%;
	background-image: linear-gradient(135deg, var(--hd-primary) 0%, var(--hd-primary-dark) 100%);
	color: #fff;
	box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--hd-primary-dark) 85%, transparent);
	transition: transform .35s var(--hd-ease), box-shadow .35s;
}

.goxom-hd__fab svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	transform: rotate(45deg);
}

.goxom-hd__tab--fab:hover .goxom-hd__fab,
.goxom-hd__tab--fab:focus-visible .goxom-hd__fab {
	transform: translateY(-2px) rotate(-8deg);
}

/* Room under the page and a lifted back-to-top while the bar is showing.
   `html.has-hd-appbar` is set by the JS only when the bar is on screen. */
html.has-hd-appbar body {
	padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
}

html.has-hd-appbar .goxom-ft__top,
html.has-hd-appbar .back-top-btn {
	bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* =============================================================== breakpoints */

/* The switch to the drawer is a control, so the breakpoint is a variable the
   PHP writes rather than a number baked in here. */
@media (max-width: 1199px) {
	.goxom-hd--break-1200 .goxom-hd__nav,
	.goxom-hd--break-1200 .goxom-hd__phone {
		display: none;
	}

	.goxom-hd--break-1200 .goxom-hd__burger {
		display: inline-flex;
	}

	.goxom-hd--break-1200.goxom-hd--appbar {
		--hd-appbar-space: 78px;
	}

	.goxom-hd--break-1200.goxom-hd--appbar .goxom-hd__appbar {
		display: grid;
	}

	.goxom-hd--break-1200.goxom-hd--appbar .goxom-hd__burger {
		display: none;
	}
}

@media (max-width: 991px) {
	.goxom-hd--break-992 .goxom-hd__nav,
	.goxom-hd--break-992 .goxom-hd__phone {
		display: none;
	}

	.goxom-hd--break-992 .goxom-hd__burger {
		display: inline-flex;
	}

	.goxom-hd--break-992.goxom-hd--appbar {
		--hd-appbar-space: 78px;
	}

	.goxom-hd--break-992.goxom-hd--appbar .goxom-hd__appbar {
		display: grid;
	}

	.goxom-hd--break-992.goxom-hd--appbar .goxom-hd__burger {
		display: none;
	}

	.goxom-hd {
		--hd-h: 74px;
		--hd-h-stuck: 64px;
	}

	/* The ticker gets the row to itself rather than being squeezed between two
	   zones that will not give up their width. */
	.goxom-hd__bar-inner {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 6px;
	}

	/* Two tracks now, so the end zone moves with them. */
	.goxom-hd__bar-zone--end {
		grid-column: 2;
	}

	.goxom-hd__ticker {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-items: start;
	}
}

@media (max-width: 767px) {
	.goxom-hd--break-768 .goxom-hd__nav,
	.goxom-hd--break-768 .goxom-hd__phone {
		display: none;
	}

	.goxom-hd--break-768 .goxom-hd__burger {
		display: inline-flex;
	}

	.goxom-hd--break-768.goxom-hd--appbar {
		--hd-appbar-space: 78px;
	}

	.goxom-hd--break-768.goxom-hd--appbar .goxom-hd__appbar {
		display: grid;
	}

	.goxom-hd--break-768.goxom-hd--appbar .goxom-hd__burger {
		display: none;
	}

	.goxom-hd__bar {
		display: none;
	}

	.goxom-hd__inner {
		gap: 14px;
		padding: 0 16px;
	}

	/* The CTA is the first thing to go: the burger holds the same link, and a
	   squeezed pill beside a squeezed logo helps nobody. */
	.goxom-hd__cta--head {
		display: none;
	}

	.goxom-hd__search {
		padding-top: 14vh;
	}
}

/* color-mix is recent enough that a couple of shipping browsers still miss it;
   without these the tints and the overlay render transparent. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.goxom-hd {
		--hd-surface: rgba(12, 35, 56, .05);
	}

	.goxom-hd--over:not(.is-stuck) {
		--hd-body: rgba(255, 255, 255, .76);
		--hd-line: rgba(255, 255, 255, .22);
		--hd-surface: rgba(255, 255, 255, .12);
	}

	.goxom-hd__bar {
		color: rgba(255, 255, 255, .78);
	}

	.goxom-hd.is-stuck .goxom-hd__main {
		box-shadow: 0 14px 34px -24px rgba(12, 35, 56, .7);
	}

	.goxom-hd__search {
		background-color: rgba(12, 35, 56, .88);
	}

	.goxom-hd__menu .sub-menu a:hover {
		background-color: rgba(18, 115, 196, .1);
	}

	.goxom-hd__cta:hover {
		box-shadow: 0 18px 32px -16px rgba(11, 85, 150, .92);
	}
}

@media (prefers-reduced-motion: reduce) {
	.goxom-hd--sticky,
	.goxom-hd__bar,
	.goxom-hd__inner,
	.goxom-hd__logo img,
	.goxom-hd__menu a,
	.goxom-hd__menu > li > a::after,
	.goxom-hd__menu .sub-menu,
	.goxom-hd__menu .menu-item-has-children > a::before,
	.goxom-hd__icon-btn,
	.goxom-hd__cta,
	.goxom-hd__cta svg,
	.goxom-hd__burger span,
	.goxom-hd__drawer,
	.goxom-hd__drawer .goxom-hd__menu > li,
	.goxom-hd__drawer .goxom-hd__stagger,
	.goxom-hd__subwrap,
	.goxom-hd__appbar,
	.goxom-hd__tab,
	.goxom-hd__tab-burger i,
	.goxom-hd__scrim,
	.goxom-hd__search,
	.goxom-hd__search-box,
	.goxom-hd__notice,
	.goxom-hd__bar-close,
	.goxom-hd__sub-toggle svg {
		transition: none !important;
	}

	/* The halo is the one piece of pure decoration in the bar. The status text
	   beside it still says everything the pulse was saying. */
	.goxom-hd__status.is-open .goxom-hd__dot::after {
		animation: none;
	}
}