/**
 * Eruda Toolkit - Mega Header
 *
 * A navigation bar that sits over the hero as though it were not there, frosts
 * as you scroll away from the top, and opens full-width panels underneath
 * itself while everything behind them is blurred back.
 *
 * The same rule as everything else here: if the script never runs, the header
 * must still be complete and usable. Without it this is an ordinary sticky bar
 * whose panels open on hover and on keyboard focus -- both done in CSS, so a
 * failed script costs the frost and the scrim, not the navigation. On a phone
 * without the script the drawer is a details/summary that still opens.
 *
 * Nothing here assumes a theme has behaved. Box sizing is set, the list is
 * stripped, and every colour is a custom property with a fallback, because a
 * header is the one component guaranteed to be rendered inside someone else's
 * stylesheet.
 */

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

/*
 * The two shadows, each built from its own four numbers.
 *
 * A box-shadow is one declaration, and Elementor writes one declaration per
 * control, so offering offset, blur and colour separately means composing the
 * shadow from custom properties here rather than letting four controls fight
 * over a single `box-shadow`. The defaults are the live site's own values.
 */
.ehdr {
	--ehdr-cta-inner:
		var(--ehdr-cta-inner-x, 2px)
		var(--ehdr-cta-inner-y, -4px)
		var(--ehdr-cta-inner-blur, 4px)
		var(--ehdr-cta-inner-colour, rgba(0, 0, 0, 0.15)) inset;
	--ehdr-cta-lift:
		var(--ehdr-cta-lift-x, 0px)
		var(--ehdr-cta-lift-y, 4px)
		var(--ehdr-cta-lift-blur, 10px)
		var(--ehdr-cta-lift-colour, rgba(0, 0, 0, 0.15));
	--ehdr-cta-lift-hover:
		var(--ehdr-cta-lift-x, 0px)
		calc(var(--ehdr-cta-lift-y, 4px) * 2.5)
		calc(var(--ehdr-cta-lift-blur, 10px) * 2.2)
		calc(var(--ehdr-cta-lift-blur, 10px) * -0.6)
		var(--ehdr-cta-lift-colour, rgba(0, 0, 0, 0.15));
}

/*
 * The bar is fixed, not sticky.
 *
 * Sticky would be tidier, but a sticky header is positioned against its
 * scrolling ancestor, and in Elementor that is whatever container the widget
 * was dropped into -- one with `overflow: hidden` anywhere above it, or a
 * transform on it, and the header simply scrolls away. Fixed is the only
 * position that behaves the same wherever someone puts the widget.
 *
 * The placeholder below is what keeps the page from jumping up under it.
 */
.ehdr {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--ehdr-z, 999);
	/* Its own stacking context, so a panel can never be drawn under a section
	   further down the page that happens to carry a z-index of its own. */
	isolation: isolate;
}

/*
 * Space in the flow equal to the bar, for headers that are not meant to sit
 * over the hero. Zero by default: the whole point of this header is that the
 * picture starts at the top of the screen and the bar floats on it.
 */
.ehdr-spacer {
	display: block;
	height: var(--ehdr-spacer, 0px);
}

/* ------------------------------------------------------------- the bar --- */

/*
 * Two states in one element.
 *
 * At rest the bar is transparent: no fill, no blur, no border, so the hero
 * behind it is uninterrupted and the header reads as part of the picture.
 * Scrolled, it frosts. Every property that changes is transitioned together,
 * which is what makes it arrive as one movement rather than as a fill, then a
 * border, then a shadow.
 *
 * backdrop-filter is declared here and set to `none` rather than being added
 * under the scrolled state. Adding it later promotes the bar to its own layer
 * mid-scroll, and the promotion itself is a visible flicker on the frame it
 * happens; declaring it up front means the layer exists from the start and
 * only its value moves.
 */
.ehdr__bar {
	position: relative;
	/*
	 * Above the scrim, which is the whole reason this is here.
	 *
	 * backdrop-filter makes an element a stacking context whether it is
	 * positioned or not, so the bar cannot sit at `z-index: auto` and expect
	 * the panel inside it to out-rank a scrim at 1 -- the whole bar, panel
	 * included, is painted as one unit against the scrim. Without this the
	 * panel opens correctly and is then blurred by its own scrim.
	 */
	z-index: 2;
	display: block;
	/*
	 * The geometry is the reference's, measured at three widths and identical
	 * at all of them: full bleed at the top of the page, 80% of the window and
	 * 16px down once you scroll, and back to full bleed the moment a panel
	 * opens. Width is in the transition because it is the thing that moves.
	 */
	width: 100%;
	margin: 0 auto;
	/*
	 * The gap from the top is a transform, not a margin.
	 *
	 * A margin is laid out; a transform is composited. Animating the margin
	 * made the browser re-lay the bar and everything in it on every frame of
	 * the change, on top of the width it is already re-laying, and that is
	 * what the movement felt like. translateY costs nothing per frame.
	 */
	transform: translateY(0);
	/*
	 * min(), so the padding only gives way when it has to.
	 *
	 * On a roomy window this is exactly the number you set. On a narrow one it
	 * yields rather than pushing the row wider than the screen, which is the
	 * difference between a header that tightens and one that overflows.
	 */
	padding: var(--ehdr-pad-y, 14px) min( var(--ehdr-pad-x, 64px), 5vw );
	background: transparent;
	/*
	 * The border is always here and only its colour moves.
	 *
	 * A border that appears on scroll changes the bar's height on the frame it
	 * appears, which shunts the whole row a pixel. Reserving the width from the
	 * start and transitioning the colour from transparent costs nothing and
	 * moves nothing. The bottom hairline is the default; a width set in the
	 * panel puts one on all four sides, which is what a floating bar wants.
	 */
	border: var(--ehdr-bw, 0px) solid transparent;
	border-bottom-width: var(--ehdr-bw-bottom, 1px);
	border-radius: var(--ehdr-radius, 0px);
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	transition:
		width var(--ehdr-ms, 520ms) var(--ehdr-geom-ease, cubic-bezier(0.32, 0.72, 0, 1)),
		max-width var(--ehdr-ms, 520ms) var(--ehdr-geom-ease, cubic-bezier(0.32, 0.72, 0, 1)),
		transform var(--ehdr-ms, 520ms) var(--ehdr-geom-ease, cubic-bezier(0.32, 0.72, 0, 1)),
		padding var(--ehdr-ms, 520ms) var(--ehdr-geom-ease, cubic-bezier(0.32, 0.72, 0, 1)),
		background-color var(--ehdr-ms, 520ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		border-color var(--ehdr-ms, 520ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		border-radius var(--ehdr-ms, 520ms) var(--ehdr-geom-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		box-shadow var(--ehdr-ms, 520ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		-webkit-backdrop-filter var(--ehdr-ms, 520ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		backdrop-filter var(--ehdr-ms, 520ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

/*
 * The row itself, capped and centred.
 *
 * The bar runs the full width of the window because the frost has to -- a
 * frosted strip that stops short of the screen edge is a floating bar, which
 * is a different thing. What sits *in* it is capped at the site's own content
 * width and centred, so the logo lines up with the words underneath it on a
 * wide monitor instead of drifting out to the bezel.
 */
.ehdr__inner {
	display: flex;
	align-items: center;
	gap: min( var(--ehdr-gap, 40px), 3vw );
	width: 100%;
	max-width: var(--ehdr-max, 1440px);
	margin: 0 auto;
}

/*
 * Once the bar is sized to its contents the row must stop pushing.
 *
 * Full width, the menu is a flex item with room to spare and `flex: 1` is what
 * keeps the logo left and the button right. Sized to fit, that same `flex: 1`
 * asks for space that does not exist and the bar can never reach its own
 * content width -- it settles at the max instead and the whole effect is lost.
 */
.ehdr[data-ehdr-stuck]:not([data-ehdr-open]) .ehdr__inner {
	width: auto;
	max-width: 100%;
	/*
	 * A flex item will not shrink below its content without this, so when the
	 * bar hits its own max-width the row kept its full size and the button
	 * hung out past the rounded edge.
	 */
	min-width: 0;
}

.ehdr[data-ehdr-stuck]:not([data-ehdr-open]) .ehdr__nav {
	flex: 0 0 auto;
}

/*
 * Frosted.
 *
 * The attribute is set by the script once the page has left the top. A panel
 * being open frosts it too, at full strength and with no blur: an open panel
 * is an opaque sheet and the bar is the top of it, so anything showing through
 * the bar would show the page sliding under the panel's own header.
 */
.ehdr[data-ehdr-stuck] .ehdr__bar,
.ehdr[data-ehdr-preview="stuck"] .ehdr__bar {
	background: var(--ehdr-fill, rgba(255, 255, 255, 0.72));
	border-color: var(--ehdr-hairline, rgba(15, 56, 96, 0.1));
	box-shadow: var(--ehdr-shadow, 0 1px 24px -12px rgba(15, 56, 96, 0.5));
	-webkit-backdrop-filter: blur(var(--ehdr-blur, 16px)) saturate(var(--ehdr-sat, 1.4));
	backdrop-filter: blur(var(--ehdr-blur, 16px)) saturate(var(--ehdr-sat, 1.4));
	/*
	 * The gap that lets it come away from the top edge.
	 *
	 * Nought by default, so the bar stays flush unless someone asks for it.
	 * With a gap and a radius it detaches into a floating bar, which is what
	 * the reference does -- but that has to be a decision rather than the
	 * starting point, because a floating bar over a hero that runs to the
	 * screen edge leaves a strip of hero above it.
	 */
	/*
	 * Fits what is in it.
	 *
	 * A share of the window is arbitrary -- it is wrong on a wide monitor and
	 * wrong again on a site whose header is wider than the cap you picked.
	 * `fit-content` sizes the bar to the logo, the menu and the button, which
	 * is what a floating bar is: the thing, not a box the thing sits in. The
	 * max stops it running to the bezel on a very wide screen; the min stops
	 * it collapsing to nothing on a very narrow one.
	 */
	/*
	 * A measured pixel width, with the keyword only as a last resort.
	 *
	 * `width` cannot interpolate from `100%` to `fit-content`: an intrinsic
	 * keyword has no value to animate towards, and Chrome resolves it by
	 * snapping most of the way on the first frame and easing the remainder.
	 * Measured here that was a 296px jump followed by a smooth 89px -- which
	 * is exactly what "junky" looks like.
	 *
	 * So the script measures what the row actually needs and writes it as
	 * --ehdr-stuck-width-px, and the transition is a length to a length. The
	 * keyword survives as the no-script fallback, where there is no transition
	 * to spoil anyway.
	 */
	width: var(--ehdr-stuck-width, var(--ehdr-stuck-width-px, fit-content));
	max-width: calc(100% - var(--ehdr-stuck-inset, 32px) * 2);
	margin: 0 auto;
	transform: translateY(var(--ehdr-stuck-gap, 16px));
	padding-left: var(--ehdr-pad-x-stuck, 16px);
	padding-right: var(--ehdr-pad-x-stuck, 16px);
	border-radius: var(--ehdr-radius-stuck, var(--ehdr-radius, 0px));
}

/*
 * A panel opening puts the bar back where it started.
 *
 * This is the reference's own move and the best thing about it: the floating
 * bar snaps out to full width and back up to the top edge at the moment a
 * panel opens, turning bar and panel into one opaque sheet across the window.
 * Measured on their site -- scrolled, the bar sits at [144, 16, 1152]; open,
 * it is [0, 0, 1440] again, with the blur gone and the fill solid.
 *
 * It comes after the stuck rule so it wins at equal specificity, which is the
 * whole reason the two are written in this order.
 */
/*
 * The bar keeps its shape while a panel is open.
 *
 * It used to snap back to full width, which is what the reference does and
 * which reads badly here: the panel fades in at the same moment the bar
 * resizes underneath it, so two animations fight over the same corner of the
 * screen and the whole thing judders. The panel is positioned against the bar
 * and takes its width from it, so leaving the bar alone costs nothing and the
 * panel simply belongs to it.
 */
/*
 * And only once it has frosted, which is the point worth spelling out.
 *
 * This rule used to have no state on it, so opening a panel at the top of the
 * page turned the bar opaque white -- the whole width of the window, over a
 * hero that was meant to run uninterrupted behind it. The header announced
 * itself for the sake of a dropdown, and the thing you were pointing at was
 * the smallest part of what moved.
 *
 * At the top the bar is transparent and stays transparent. The panel is the
 * only thing that gets a fill, and it is a card of its own under a bar you can
 * still see the picture through. Frosted, the bar already has a fill, so
 * hardening it to the panel's own sheet is just the two of them agreeing.
 */
.ehdr[data-ehdr-open][data-ehdr-stuck] .ehdr__bar,
.ehdr[data-ehdr-open][data-ehdr-preview="stuck"] .ehdr__bar,
.ehdr[data-ehdr-preview="open"][data-ehdr-stuck] .ehdr__bar {
	background: var(--ehdr-sheet, #ffffff);
	border-color: var(--ehdr-hairline, rgba(15, 56, 96, 0.1));
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
}

/*
 * Gone, on the way down.
 *
 * The bar slides up out of the way while you are reading down the page and
 * comes back the moment you turn round -- already folded, because coming back
 * up is when you want the menu.
 *
 * The transform is on the bar, not on .ehdr. Transforming .ehdr would make it
 * the containing block for the scrim inside it, and a `position: fixed` scrim
 * anchored to the header is the size of the header rather than the size of the
 * window. The bar is the scrim's sibling, so moving it is free.
 *
 * -100% clears the bar's own height; the gap it would otherwise be holding is
 * part of the same transform, so the two interpolate as one movement instead
 * of fighting over the property.
 */
.ehdr[data-ehdr-hidden] .ehdr__bar {
	transform: translateY(-100%);
}

/*
 * Held still for one frame, so a change made off screen is not animated.
 *
 * The bar slides away at whatever width it had and only then folds, with the
 * transitions switched off for the frame it takes -- so the fold is never
 * something you watch happen. You see the full-width bar leave, and the folded
 * one arrive. !important because it has to beat the shorthand on .ehdr__bar
 * whatever else is going on.
 */
.ehdr.is-instant .ehdr__bar {
	transition: none !important;
}

/*
 * A bar that has come away from the top cannot keep a square bottom while a
 * panel hangs off it: the panel is a separate box and the two would meet at a
 * rounded edge with a straight one under it.
 */
/*
 * Flattened only where the two actually meet. With a gap under the bar they
 * are two separate cards and both keep their corners -- and at the top of the
 * page they never meet at all, because the bar has no fill there and the panel
 * is narrower than it.
 */
.ehdr[data-ehdr-open][data-ehdr-stuck]:not([data-ehdr-detached]) .ehdr__bar,
.ehdr[data-ehdr-open][data-ehdr-preview="stuck"]:not([data-ehdr-detached]) .ehdr__bar {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/*
 * Where backdrop-filter is not supported the frost has to become a fill, or
 * the bar stays transparent over the page with text running under text.
 * Firefox shipped it long ago now, but a fallback that costs one rule is
 * cheaper than finding out.
 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.ehdr[data-ehdr-stuck] .ehdr__bar {
		background: var(--ehdr-fill-solid, rgba(255, 255, 255, 0.96));
	}
}

/*
 * The measuring pass.
 *
 * Held for a single synchronous read and taken off again before anything is
 * painted, so nothing flashes. Transitions are off inside it: measuring must
 * not itself start an animation, and an animation in flight must not be
 * measured.
 */
.ehdr.is-measuring .ehdr__bar {
	width: max-content;
	max-width: none;
	transition: none;
	padding-left: var(--ehdr-pad-x-stuck, 16px);
	padding-right: var(--ehdr-pad-x-stuck, 16px);
}

.ehdr.is-measuring .ehdr__inner {
	width: auto;
	max-width: none;
}

.ehdr.is-measuring .ehdr__nav {
	flex: 0 0 auto;
}

/* ------------------------------------------------------------ the brand --- */

.ehdr__brand {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.ehdr .ehdr__logo {
	display: block;
	width: auto !important;
	height: var(--ehdr-logo, 44px) !important;
	max-width: none;
	/* A logo is the one image in a header that must never be cropped, so this
	   is the one place `contain` is right rather than `cover`. */
	object-fit: contain;
	transition: height var(--ehdr-ms, 320ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.ehdr[data-ehdr-stuck] .ehdr__logo {
	height: var(--ehdr-logo-stuck, var(--ehdr-logo, 44px)) !important;
}

.ehdr .ehdr__brand-text {
	font-size: var(--ehdr-brand-size, 1.4rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--ehdr-ink, #0f3860) !important;
}

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

.ehdr__menu {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: min( var(--ehdr-item-gap, 28px), 2.2vw );
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Static, deliberately.
 *
 * The panel is absolutely positioned and spans the whole bar, so the nearest
 * positioned ancestor above it has to be the bar. Give the item
 * `position: relative` -- the reflex -- and each panel is instead the width of
 * the word that opens it, which is a dropdown, not a mega menu.
 */
.ehdr__item {
	position: static;
	display: flex;
	align-items: center;
}

/*
 * A link and its underline.
 *
 * The underline is a pseudo-element scaled from nought rather than a border
 * being shown and hidden: a transform animates on the compositor and a border
 * does not, and scaling from the left edge means it draws *in* the direction
 * you read rather than appearing all at once.
 *
 * It is carried on the item, not the link, so an item with a panel keeps its
 * underline while the panel is open and the pointer has moved down into it.
 */
/*
 * Two classes AND !important on the colour, which needs saying out loud.
 *
 * Two classes beats `.elementor a`. It does not beat `.elementor a` written
 * with !important, which plenty of kits and customisers do, and it does not
 * beat a selector carrying an id. The colour kept coming out as the theme's
 * grey through two attempts at winning on specificity alone.
 *
 * !important on a hardcoded colour would be rude. !important on
 * `var(--ehdr-ink)` is not: the value is whatever the control writes, so this
 * takes nothing away from you -- it only stops the theme taking it away. The
 * layout properties around it are left alone.
 *
 * The original note follows, because the reasoning still applies.
 *
 * Two classes, and not for tidiness -- the same fight the button had.
 *
 * Themes and Elementor kits ship `.elementor a { color: ... }` and
 * `.elementor a:hover { ... }`, which are two classes each and beat a bare
 * `.ehdr__link`. The menu's colour controls appeared to do nothing because of
 * it: whatever you picked was written to a custom property the theme's rule
 * then overrode. Anything here that sets a colour a theme also sets is scoped
 * this way.
 */
.ehdr .ehdr__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: var(--ehdr-link-pad-y, 10px) 0;
	font-family: var(--ehdr-link-font, inherit);
	font-size: var(--ehdr-link-size, 1.125rem);
	font-weight: var(--ehdr-link-weight, 600);
	line-height: 1.2;
	letter-spacing: var(--ehdr-link-track, 0em);
	color: var(--ehdr-ink, #0f3860) !important;
	text-decoration: none;
	white-space: nowrap;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color var(--ehdr-link-ms, 200ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.ehdr__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--ehdr-rule-drop, 2px);
	height: var(--ehdr-rule, 2px);
	border-radius: 999px;
	background: var(--ehdr-accent, #00a55d);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform var(--ehdr-link-ms, 200ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.ehdr .ehdr__link:hover,
.ehdr .ehdr__link:focus-visible,
.ehdr .ehdr__item[data-ehdr-on] > .ehdr__link {
	color: var(--ehdr-ink-hover, #00a55d) !important;
}

.ehdr__link:hover::after,
.ehdr__link:focus-visible::after,
.ehdr__item[data-ehdr-on] > .ehdr__link::after {
	transform: scaleX(1);
}

.ehdr__link:focus-visible {
	outline: 2px solid var(--ehdr-accent, #00a55d);
	outline-offset: 4px;
	border-radius: 2px;
}

/* ------------------------------------------------------- the text roll --- */

/*
 * The label rolls over itself on hover.
 *
 * Two copies of the word stacked vertically inside a box that clips: the one
 * you can see slides up and out, the one underneath arrives in its place. One
 * transform on one wrapper, composited, and the second copy is aria-hidden so
 * a screen reader is not read the label twice.
 *
 * The height is fixed to one line so the clip has something to clip to.
 * Without it the wrapper is as tall as both copies and nothing is hidden.
 */
.ehdr__roll {
	position: relative;
	display: inline-block;
	overflow: hidden;
	height: 1.2em;
	line-height: 1.2;
	vertical-align: bottom;
}

.ehdr__roll span {
	display: block;
	transition: transform var(--ehdr-roll-ms, 340ms) var(--ehdr-roll-ease, cubic-bezier(0.34, 1.2, 0.44, 1));
}

/* The understudy waits exactly one line below. */
.ehdr__roll span + span {
	position: absolute;
	inset: 0 0 auto 0;
	transform: translateY(100%);
}

.ehdr__link:hover .ehdr__roll span,
.ehdr__link:focus-visible .ehdr__roll span,
.ehdr__item[data-ehdr-on] > .ehdr__link .ehdr__roll span {
	transform: translateY(-100%);
}

.ehdr__link:hover .ehdr__roll span + span,
.ehdr__link:focus-visible .ehdr__roll span + span,
.ehdr__item[data-ehdr-on] > .ehdr__link .ehdr__roll span + span {
	transform: translateY(0);
}

/*
 * Per letter, which is the same move staggered across the word.
 *
 * Each character carries its index as --i and takes its delay from it, so the
 * roll travels left to right the way the word is read rather than the whole
 * label flipping at once. The delay is on the way in only -- a staggered exit
 * reads as the menu being slow rather than as a flourish.
 */
.ehdr[data-ehdr-anim="letters"] .ehdr__roll {
	display: inline-flex;
}

.ehdr[data-ehdr-anim="letters"] .ehdr__roll-c {
	position: relative;
	display: inline-block;
	overflow: hidden;
	height: 1.2em;
	white-space: pre;
}

.ehdr[data-ehdr-anim="letters"] .ehdr__roll-c span {
	transition-delay: 0s;
}

.ehdr__link:hover .ehdr__roll-c span,
.ehdr__link:focus-visible .ehdr__roll-c span,
.ehdr__item[data-ehdr-on] > .ehdr__link .ehdr__roll-c span {
	transition-delay: calc(var(--i, 0) * var(--ehdr-roll-step, 24ms));
}

/*
 * The scrambler needs no styles of its own beyond holding its width.
 *
 * It swaps characters in place, and a proportional font changes width with
 * every swap, so the label would jitter and shove the items beside it around.
 * Fixing the width to what the real word measures stops that dead.
 */
.ehdr__scramble {
	display: inline-block;
	white-space: pre;
}

/*
 * The real label, for a screen reader only.
 *
 * Used by the letter-by-letter roll, where the word is one element per
 * character and every one of them is hidden from assistive technology --
 * a word spelt across twelve elements is announced one letter at a time.
 */
.ehdr__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * The caret on an item that opens a panel. It turns over rather than swapping
 * for a second glyph, which is one element and one transform instead of two
 * elements and a crossfade.
 */
.ehdr__caret {
	display: block;
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	transition: transform var(--ehdr-link-ms, 200ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.ehdr__item[data-ehdr-on] .ehdr__caret,
.ehdr__item:hover .ehdr__caret {
	transform: rotate(180deg);
}

/*
 * The drawer's chevron button, which does not exist on a desktop.
 *
 * Declared here rather than only inside the phone block so that everything
 * about it is in one place, and so a stylesheet that somehow loads without the
 * media query does not leave a stray button in the middle of the menu row.
 */
.ehdr .ehdr__toggle {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 52px;
	align-self: stretch;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ehdr-ink, #0f3860);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ehdr__toggle:focus-visible {
	outline: 2px solid var(--ehdr-accent, #00a55d);
	outline-offset: -4px;
	border-radius: 8px;
}

/* --------------------------------------------------------------- the CTA --- */

/*
 * Two shadows and a gradient, in that arrangement for a reason.
 *
 * The inset shadow is what gives the pill its thickness: a dark wash pulled
 * down from above so the top edge reads as curved away from the light. The
 * outer shadow is the lift off the page. They cannot be the same declaration
 * -- `inset` is per-shadow -- and they must not be on different elements
 * either, or a hover that moves one leaves the other behind.
 */
/*
 * Scoped with .ehdr in front of it, and that is not tidiness.
 *
 * Nearly every theme and every Elementor kit ships something like
 * `.elementor a { color: ... }`, which is two classes and beats a bare
 * `.ehdr__cta`. The button's own white text lost to it and the label came out
 * in the theme's link colour. Two classes here wins, without reaching for
 * !important and taking the panel's own controls down with it.
 */
.ehdr .ehdr__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: var(--ehdr-cta-pad-y, 15px) var(--ehdr-cta-pad-x, 30px);
	border: var(--ehdr-cta-bw, 0px) solid var(--ehdr-cta-border, transparent);
	border-radius: var(--ehdr-cta-radius, 100px);
	/*
	 * background-image, not the `background` shorthand.
	 *
	 * The shorthand was the bug behind "the button colour isn't applying": it
	 * sets background-image as well as the colour, so choosing a flat colour
	 * in the panel wrote background-color underneath a gradient that was still
	 * sitting on top of it, and nothing appeared to change. The two are set
	 * separately now, and picking a solid fill genuinely clears the gradient
	 * because --ehdr-cta-image is what the solid mode empties.
	 */
	background-color: var(--ehdr-cta-colour, #00a55d);
	background-image: var(--ehdr-cta-image, linear-gradient(
		var(--ehdr-cta-angle, 90deg),
		var(--ehdr-cta-from, #00a55d) 0%,
		var(--ehdr-cta-to, #005465) 100%
	));
	box-shadow:
		var(--ehdr-cta-inner, 2px -4px 4px 0 rgba(0, 0, 0, 0.15) inset),
		var(--ehdr-cta-lift, 0 4px 10px 0 rgba(0, 0, 0, 0.15));
	color: var(--ehdr-cta-ink, #ffffff) !important;
	font-family: var(--ehdr-cta-font, inherit);
	font-size: var(--ehdr-cta-size, 1rem);
	font-weight: var(--ehdr-cta-weight, 600);
	/*
	 * In em, and deliberately so. Elementor writes letter-spacing in whatever
	 * unit the control was left on, and a percentage is not a valid
	 * letter-spacing anywhere -- browsers drop the declaration and the
	 * tracking silently does nothing. The live site this was measured from has
	 * `letter-spacing: 5%` on its button doing exactly that.
	 */
	letter-spacing: var(--ehdr-cta-track, 0.05em);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		transform var(--ehdr-link-ms, 200ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		box-shadow var(--ehdr-link-ms, 200ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		filter var(--ehdr-link-ms, 200ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Solid fill: no image at all, so the colour is the whole of it. */
.ehdr[data-ehdr-cta-fill="solid"] .ehdr__cta {
	background-image: none;
}

/*
 * Hover brightens the gradient rather than replacing it. A second gradient
 * would have to be authored to match, and would not survive someone changing
 * the first one in the panel; `filter` lifts whatever is actually there.
 */
.ehdr .ehdr__cta:hover,
.ehdr .ehdr__cta:focus-visible {
	transform: translateY(-2px);
	filter: brightness(1.07);
	box-shadow:
		var(--ehdr-cta-inner, 2px -4px 4px 0 rgba(0, 0, 0, 0.15) inset),
		var(--ehdr-cta-lift-hover, 0 10px 22px -6px rgba(0, 0, 0, 0.3));
}

.ehdr .ehdr__cta:hover,
.ehdr .ehdr__cta:focus-visible {
	background-color: var(--ehdr-cta-colour-hover, var(--ehdr-cta-colour, #00a55d));
	border-color: var(--ehdr-cta-border-hover, var(--ehdr-cta-border, transparent));
	color: var(--ehdr-cta-ink-hover, var(--ehdr-cta-ink, #ffffff));
}

.ehdr .ehdr__cta:active {
	transform: translateY(0);
}

.ehdr__cta:focus-visible {
	outline: 2px solid var(--ehdr-accent, #00a55d);
	outline-offset: 3px;
}

/* ------------------------------------------------------------- the panel --- */

/*
 * Full width of the bar, anchored under it.
 *
 * Opened by hover and by focus-within, both in CSS, so the panels work with
 * the script removed entirely. The script adds the parts CSS cannot do:
 * a delay before opening so sweeping the pointer across the bar does not flash
 * every panel in turn, the scrim, Escape, and the aria state.
 *
 * `visibility` is in the transition on purpose. Opacity alone leaves an
 * invisible panel covering the page and swallowing clicks; visibility alone
 * cannot be eased. Together, the panel fades out and is then taken away.
 */
.ehdr__panel {
	position: absolute;
	top: 100%;
	left: var(--ehdr-panel-inset, 0px);
	right: var(--ehdr-panel-inset, 0px);
	z-index: 2;
	overflow: hidden;
	padding: 0;
	/*
	 * The gap under the bar is a transparent top border, not an offset.
	 *
	 * Moving the panel down with `top` opens a dead strip between the bar and
	 * the panel: the pointer crosses it on the way down, the item stops being
	 * hovered, and the panel you were reaching for closes under your hand. A
	 * transparent border keeps the panel's box touching the bar -- so hover
	 * never breaks -- while `background-clip: padding-box` keeps the fill, and
	 * with it the visible edge, below the gap.
	 */
	border-top: var(--ehdr-panel-gap-top, 0px) solid transparent;
	border-radius: var(--ehdr-panel-radius, 0px);
	background: var(--ehdr-sheet, #ffffff);
	background-clip: padding-box;
	border-bottom: 1px solid var(--ehdr-hairline, rgba(15, 56, 96, 0.1));
	box-shadow: var(--ehdr-panel-shadow, 0 24px 48px -24px rgba(15, 56, 96, 0.45));
	opacity: 0;
	visibility: hidden;
	/*
	 * The X half of this is a variable because the panel is not always
	 * anchored the same way. Frosted, it spans the bar and needs no X at all.
	 * At the top the bar is full bleed and the panel is centred on it with
	 * `left: 50%`, which has to be pulled back by half its own width -- and
	 * that correction lives in the same transform as the slide, or the two
	 * properties fight and the panel flies in from the left.
	 */
	transform: translate(var(--ehdr-panel-x, 0px), -8px);
	transition:
		opacity var(--ehdr-panel-ms, 280ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		transform var(--ehdr-panel-ms, 280ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		visibility 0s linear var(--ehdr-panel-ms, 280ms);
}

/*
 * Hover opens it, with a beat of delay first.
 *
 * The delay is on the closed state's transition, so it applies on the way in
 * and not on the way out: crossing the bar to reach the last item should not
 * leave three panels opening behind you, but leaving one should close it at
 * once.
 */
.ehdr__item:hover > .ehdr__panel,
.ehdr__item:focus-within > .ehdr__panel,
.ehdr__item[data-ehdr-on] > .ehdr__panel {
	opacity: 1;
	visibility: visible;
	transform: translate(var(--ehdr-panel-x, 0px), 0);
	transition:
		opacity var(--ehdr-panel-ms, 280ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)) var(--ehdr-intent, 90ms),
		transform var(--ehdr-panel-ms, 280ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)) var(--ehdr-intent, 90ms),
		visibility 0s linear var(--ehdr-intent, 90ms);
}

/* Once the script is driving, it owns the state and hover must not fight it:
   two sources of truth is how a panel ends up open with nothing under the
   pointer. */
.ehdr[data-ehdr-ready] .ehdr__item:hover > .ehdr__panel,
.ehdr[data-ehdr-ready] .ehdr__item:focus-within > .ehdr__panel {
	opacity: 0;
	visibility: hidden;
	transform: translate(var(--ehdr-panel-x, 0px), -8px);
}

.ehdr[data-ehdr-ready] .ehdr__item[data-ehdr-on] > .ehdr__panel {
	opacity: 1;
	visibility: visible;
	transform: translate(var(--ehdr-panel-x, 0px), 0);
}

/*
 * Two sides, not three.
 *
 * It was links, then a paragraph, then a picture, and three columns is one
 * more than the content has ideas in it: the middle column was a sentence
 * floating in the largest share of the panel, and the picture was a small box
 * marooned at the end of it with the panel's own height showing underneath.
 *
 * One side is the list you came for. The other is the picture, with whatever
 * the panel has to say about itself sitting under it as a caption. Anything
 * that has only one of those gets the whole width -- a two-column grid with
 * one thing in it is a panel half full of nothing, which is what the class
 * below is for.
 *
 * minmax(0, ...) on both tracks, because `1fr` is minmax(auto, 1fr) and a long
 * unbroken word in a link would push its track past its share and squeeze the
 * picture.
 */
.ehdr__panel-inner {
	display: grid;
	grid-template-columns: var(--ehdr-panel-cols, minmax(0, 1fr) minmax(0, 1.15fr));
	align-items: stretch;
	gap: var(--ehdr-panel-gap, 48px);
	max-width: var(--ehdr-panel-max, 1400px);
	margin: 0 auto;
	padding: var(--ehdr-panel-pad, 40px) var(--ehdr-pad-x, 40px);
}

.ehdr__panel-inner--solo {
	grid-template-columns: minmax(0, 1fr);
}

.ehdr__links {
	display: flex;
	flex-direction: column;
	gap: var(--ehdr-panel-link-gap, 4px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * A panel link is a row that slides.
 *
 * The whole row moves on hover rather than the text alone, so the hit area and
 * the thing that reacts to the pointer are the same shape -- text that shifts
 * inside a still box reads as the box being broken.
 */
.ehdr .ehdr__panel-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: var(--ehdr-panel-link-pad, 12px 14px);
	border-radius: var(--ehdr-panel-link-radius, 10px);
	color: var(--ehdr-ink, #0f3860) !important;
	font-size: var(--ehdr-panel-link-size, 1.0625rem);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition:
		background-color var(--ehdr-link-ms, 200ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		color var(--ehdr-link-ms, 200ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		transform var(--ehdr-link-ms, 200ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.ehdr .ehdr__panel-link:hover,
.ehdr .ehdr__panel-link:focus-visible {
	background: var(--ehdr-panel-link-bg, rgba(0, 165, 93, 0.08));
	color: var(--ehdr-ink-hover, #00a55d) !important;
	transform: translateX(var(--ehdr-panel-link-slide, 4px));
}

.ehdr__panel-link:focus-visible {
	outline: 2px solid var(--ehdr-accent, #00a55d);
	outline-offset: 2px;
}

/* The page being viewed: the hover look, held, without the slide. */
.ehdr .ehdr__panel-link[aria-current="page"] {
	background: var(--ehdr-panel-link-bg, rgba(0, 165, 93, 0.08));
	color: var(--ehdr-ink-hover, #00a55d) !important;
}

.ehdr .ehdr__panel-link[aria-current="page"] svg {
	opacity: 1;
	transform: translateX(0);
}

/* The section the page belongs to keeps its underline. */
.ehdr .ehdr__item--current > .ehdr__link {
	color: var(--ehdr-ink-hover, #00a55d) !important;
}

.ehdr__item--current > .ehdr__link::after {
	transform: scaleX(1);
}

/*
 * The page behind an open drawer stays put. Locking the page takes away the
 * only way a tall drawer used to be scrolled, so the drawer scrolls itself:
 * the script sets its height to whatever is left under the bar.
 */
html.ehdr-locked,
html.ehdr-locked body {
	overflow: hidden !important;
	overscroll-behavior: none;
}

.ehdr[data-ehdr-drawer] .ehdr__nav-inner {
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.ehdr__panel-link small {
	display: block;
	margin-top: 3px;
	color: var(--ehdr-muted, #5b7794);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
}

/* The arrow only travels once the row is under the pointer; sitting there
   moving would be noise on a list of eight. */
.ehdr__panel-link svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	opacity: 0;
	transform: translateX(-6px);
	transition:
		opacity var(--ehdr-link-ms, 200ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		transform var(--ehdr-link-ms, 200ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.ehdr__panel-link:hover svg,
.ehdr__panel-link:focus-visible svg {
	opacity: 1;
	transform: translateX(0);
}

.ehdr .ehdr__blurb {
	margin: 0;
	color: var(--ehdr-muted, #5b7794);
	font-size: var(--ehdr-blurb-size, 0.9375rem);
	line-height: 1.55;
}

.ehdr__blurb strong {
	display: block;
	margin-bottom: 6px;
	color: var(--ehdr-ink, #0f3860);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ------------------------------------------------------- the other side --- */

/*
 * The picture and its caption are one column, and the picture takes what the
 * caption does not.
 *
 * A fixed aspect ratio was the old arrangement and it is what left the panel
 * looking unfinished: the list sets the height of the row, the picture had a
 * shape of its own regardless, and the difference between the two came out as
 * white space under the picture. Letting it grow means the two sides finish
 * level whatever length the list happens to be, which is the whole of what
 * "two panels" has to mean to look deliberate.
 */
.ehdr__panel-aside {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: var(--ehdr-aside-gap, 16px);
}

.ehdr__figure {
	position: relative;
	flex: 1 1 auto;
	margin: 0;
	min-height: var(--ehdr-figure-min, 200px);
	border-radius: var(--ehdr-figure-radius, 14px);
	overflow: hidden;
	/* Something to look at while the picture loads, and the reason a light
	   photograph does not read as a hole in the sheet. */
	background: var(--ehdr-figure-bg, rgba(15, 56, 96, 0.06));
}

/*
 * A hairline drawn inside the picture rather than a border on it.
 *
 * A border would be outside the radius and would have to be in the box the
 * image is fitted to; an inset shadow on a pseudo-element sits over the image,
 * follows the same corners, and costs the layout nothing.
 */
.ehdr__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--ehdr-figure-ring, rgba(15, 56, 96, 0.08));
	pointer-events: none;
}

/* Cover, and forced, for the reason every other picture in this plugin is:
   nearly every theme ships `img { height: auto }` at a specificity a plugin
   stylesheet cannot beat, and the panel's background shows as a band. */
.ehdr .ehdr__figure img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	max-height: none;
	object-fit: cover !important;
	object-position: var(--ehdr-figure-pos, 50% 50%) !important;
	/*
	 * Nothing anybody else does to a picture on hover applies in here.
	 *
	 * `img:hover { opacity: .75 }`, a greyscale filter that lifts, a lightbox
	 * cursor -- every theme and half the kits ship one of them, and in a menu
	 * panel they read as a fault rather than as a flourish: the picture is not
	 * a control, nothing happens if you click it, and it was flinching anyway.
	 * These two take the theme's hover off; the rule under them puts back one
	 * move, slow enough to be a drift rather than a reaction.
	 */
	opacity: 1 !important;
	filter: none !important;
	transform: scale(1);
	transform-origin: 50% 50%;
	transition: transform var(--ehdr-figure-ms, 900ms) var(--ehdr-geom-ease, cubic-bezier(0.32, 0.72, 0, 1));
}

/*
 * And it belongs to the panel, not to the picture.
 *
 * Hovering the picture itself would mean the drift started and stopped as the
 * pointer crossed one particular box on its way down a list it has no reason
 * to visit. The panel being open is the event; the picture settles in behind
 * the list while you read it.
 */
.ehdr__item[data-ehdr-on] > .ehdr__panel .ehdr__figure img,
.ehdr__item:hover > .ehdr__panel .ehdr__figure img,
.ehdr__item:focus-within > .ehdr__panel .ehdr__figure img {
	transform: scale(var(--ehdr-figure-zoom, 1.05));
}

/* ------------------------------------------- the picture that changes --- */

/*
 * A link with a picture of its own swaps the panel's while it is hovered.
 *
 * The layers are stacked over the resting picture and only their opacity
 * moves, so nothing about the panel's height or the list beside it depends on
 * which one is showing -- and the box they are all fitted to is the resting
 * one's, which is why a portrait among landscapes crops rather than resizes
 * the panel under the pointer.
 *
 * `!important` for the same reason the rule above it needs one: the theme's
 * `img:hover { opacity: .75 }` and friends are the thing being beaten, and
 * that rule already had to shout to hold the picture at full strength. It
 * costs nothing here -- the fade is a transition either way.
 */
.ehdr .ehdr__figure--swap .ehdr__figure-img {
	opacity: 0 !important;
	transition:
		transform var(--ehdr-figure-ms, 900ms) var(--ehdr-geom-ease, cubic-bezier(0.32, 0.72, 0, 1)),
		opacity var(--ehdr-swap-ms, 260ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.ehdr .ehdr__figure--swap .ehdr__figure-img.is-on {
	opacity: 1 !important;
}

/* ------------------------------------------------------------- the scrim --- */

/*
 * Everything behind the panel, pushed back.
 *
 * A backdrop-filter on a fixed sheet, not a `filter` on the page.
 *
 * Filtering the page content would be the obvious way and it is a trap: an
 * element with a filter becomes the containing block for every `position:
 * fixed` descendant, so a filtered page drags its own fixed elements -- this
 * header included -- into the scroll, and it forces a repaint of the entire
 * document on a property that cannot be composited. The scrim costs one layer
 * and touches nothing it covers.
 *
 * Where it starts depends on whether the bar has a fill.
 *
 * Frosted, it starts at the bar's bottom edge: the bar is already blurring
 * what is behind it, and blurring the blur -- then darkening it -- comes out
 * muddy and a shade off every other frosted surface on the page.
 *
 * At the top of the page the bar has no fill at all, so there is nothing to
 * protect and starting below it only draws a line: a crisp strip of hero
 * across the top of the window with the rest of the picture pushed back
 * underneath it. There it runs the full height and the hero goes back
 * uniformly, bar included. Nothing in the bar is blurred either way -- the
 * scrim is a sibling at a lower z-index, so the logo, the menu and the button
 * are painted over it rather than through it.
 */
.ehdr__scrim {
	position: fixed;
	top: var(--ehdr-scrim-top, 0px);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background: var(--ehdr-scrim-bg, rgba(8, 26, 43, 0.25));
	-webkit-backdrop-filter: blur(var(--ehdr-scrim-blur, 10px));
	backdrop-filter: blur(var(--ehdr-scrim-blur, 10px));
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--ehdr-panel-ms, 280ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		visibility 0s linear var(--ehdr-panel-ms, 280ms);
}

.ehdr[data-ehdr-open] .ehdr__scrim {
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--ehdr-panel-ms, 280ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		visibility 0s linear 0s;
}

/*
 * The transparent bar gets no exemption.
 *
 * Done here rather than by writing a different number into --ehdr-scrim-top,
 * because the script only re-measures a third of a second after the bar
 * changes state -- long enough to watch the band appear and then heal. A
 * selector switches on the same frame the attribute does.
 */
.ehdr:not([data-ehdr-stuck]):not([data-ehdr-preview="stuck"]) .ehdr__scrim {
	top: 0;
}

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

.ehdr .ehdr__burger {
	display: none;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--ehdr-ink, #0f3860);
	cursor: pointer;
}

.ehdr__burger:focus-visible {
	outline: 2px solid var(--ehdr-accent, #00a55d);
	outline-offset: 2px;
}

/*
 * Three lines that become a cross.
 *
 * Done with transforms on the same three elements rather than by swapping in
 * an X: the middle line fades where it stands and the outer two rotate into
 * place through the middle, which is the movement that reads as the menu
 * folding rather than as one icon replacing another.
 */
.ehdr__burger span {
	display: block;
	width: 22px;
	height: 2px;
	margin: 5px auto;
	border-radius: 2px;
	background: currentColor;
	transition:
		transform var(--ehdr-link-ms, 200ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		opacity var(--ehdr-link-ms, 200ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.ehdr[data-ehdr-drawer] .ehdr__burger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.ehdr[data-ehdr-drawer] .ehdr__burger span:nth-child(2) {
	opacity: 0;
}

.ehdr[data-ehdr-drawer] .ehdr__burger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ------------------------------------------------------------- the phone --- */

@media (max-width: 1199px) {
	.ehdr__bar {
		padding: var(--ehdr-pad-y-mobile, 10px) var(--ehdr-pad-x-mobile, 20px);
		gap: 12px;
	}

	/*
	 * No floating bar on a phone.
	 *
	 * Sized to its contents, the bar here is a logo and a burger and nothing
	 * else -- the menu is in the drawer, not in the row -- so "fit the
	 * contents" collapsed it to 276px: a little tab marooned in the middle of
	 * the screen. Below the drawer's breakpoint the compact state is the frost
	 * and nothing more.
	 */
	/*
	 * Full width by default here, but through the same properties the desktop
	 * uses rather than hardcoded values -- otherwise a responsive control set
	 * on Tablet or Mobile writes a property that this block then ignores, and
	 * the setting looks dead. The defaults differ; the plumbing does not.
	 */
	.ehdr[data-ehdr-stuck] .ehdr__bar,
	.ehdr[data-ehdr-preview="stuck"] .ehdr__bar {
		width: var(--ehdr-stuck-width, 100%);
		max-width: calc(100% - var(--ehdr-stuck-inset, 0px) * 2);
		margin: 0 auto;
		transform: translateY(var(--ehdr-stuck-gap, 0px));
		padding-left: var(--ehdr-pad-x-stuck, var(--ehdr-pad-x-mobile, 20px));
		padding-right: var(--ehdr-pad-x-stuck, var(--ehdr-pad-x-mobile, 20px));
		border-radius: var(--ehdr-radius-stuck, 0px);
	}

	.ehdr .ehdr__burger {
		display: block;
		margin-left: auto;
	}

	/* The CTA stays in the bar only if it fits; below this it belongs in the
	   drawer, where it has room to be a full-width button instead of a pill
	   squeezed against the burger. */
	.ehdr .ehdr__inner > .ehdr__cta {
		display: none;
	}

	/*
	 * The drawer.
	 *
	 * A panel under the bar rather than a full-screen takeover: a takeover
	 * hides the page and has to be got out of, and on a phone the header is
	 * something you open, use and dismiss in two seconds.
	 *
	 * It is height-animated through a grid row rather than max-height. A
	 * max-height guess large enough for the longest menu makes every shorter
	 * one open at the wrong speed -- the transition runs over a height that is
	 * mostly empty -- while `grid-template-rows: 0fr -> 1fr` animates to the
	 * content's real height, whatever it turns out to be.
	 */
	.ehdr__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: grid;
		grid-template-rows: 0fr;
		background: var(--ehdr-sheet, #ffffff);
		border-bottom: 1px solid transparent;
		box-shadow: var(--ehdr-panel-shadow, 0 24px 48px -24px rgba(15, 56, 96, 0.45));
		visibility: hidden;
		transition:
			grid-template-rows var(--ehdr-panel-ms, 280ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)),
			visibility 0s linear var(--ehdr-panel-ms, 280ms);
	}

	.ehdr .ehdr__nav {
		border-radius: var(--ehdr-panel-radius, 0px);
		background-clip: padding-box;
		left: var(--ehdr-panel-inset, 0px);
		right: var(--ehdr-panel-inset, 0px);
	}

	/*
	 * The gap belongs to the open drawer only. Carried on the closed one it is
	 * a transparent border with nothing behind it, and a shut drawer that is
	 * eleven pixels tall leaves a sliver hanging under the bar at all times --
	 * the same trap the padding sprang earlier.
	 */
	.ehdr[data-ehdr-drawer] .ehdr__nav {
		border-top: var(--ehdr-panel-gap-top, 0px) solid transparent;
		grid-template-rows: 1fr;
		border-bottom-color: var(--ehdr-hairline, rgba(15, 56, 96, 0.1));
		visibility: visible;
		transition:
			grid-template-rows var(--ehdr-panel-ms, 280ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1)),
			visibility 0s linear 0s;
	}

	/*
	 * The row that is actually being resized, and it carries no padding of
	 * its own -- that is not a style choice.
	 *
	 * A grid item's automatic minimum size includes its padding, so `0fr` on
	 * the track cannot take an item with padding below the height of that
	 * padding: the drawer collapsed to 29px rather than nought and left a
	 * sliver of sheet hanging under the bar at all times. `min-height: 0`
	 * frees the content, not the box. The spacing therefore lives on what is
	 * inside it.
	 */
	.ehdr__nav-inner {
		min-height: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		padding: 0;
	}

	.ehdr__menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px var(--ehdr-pad-x-mobile, 20px) 0;
	}

	/*
	 * A row of two things and a panel under them.
	 *
	 * The label takes the room it needs and the chevron sits at the end of the
	 * row; the panel wraps onto its own line underneath, which is what
	 * `flex-basis: 100%` on it is for. The item used to be a block with the
	 * link filling it, and there was nowhere for a second control to go.
	 */
	.ehdr__item {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		border-bottom: 1px solid var(--ehdr-hairline, rgba(15, 56, 96, 0.1));
	}

	.ehdr__item:last-of-type {
		border-bottom: 0;
	}

	.ehdr .ehdr__link {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		justify-content: flex-start;
		padding: 16px 0;
		font-size: var(--ehdr-link-size-mobile, 1.125rem);
	}

	/*
	 * The chevron is its own control here, and the caret inside the link goes.
	 *
	 * Two carets on one row would be the giveaway that this is two elements
	 * pretending to be one. The one in the link is the desktop's; this one is
	 * the phone's, and it is the only thing on the row that opens the panel.
	 */
	.ehdr .ehdr__toggle {
		display: flex;
		/* Out to the edge of the drawer's padding, so the tap target reaches
		   the side of the screen rather than stopping short of it. */
		margin-right: calc(0px - var(--ehdr-pad-x-mobile, 20px));
		padding-right: var(--ehdr-pad-x-mobile, 20px);
		width: calc(52px + var(--ehdr-pad-x-mobile, 20px));
	}

	.ehdr__link > .ehdr__caret {
		display: none;
	}

	/* Full width, on the line under the row that opens it. */
	.ehdr__panel {
		flex: 1 0 100%;
	}

	/* No underline on a phone: a row that is already full width has nothing to
	   underline, and the caret carries the state instead. */
	.ehdr__link::after {
		content: none;
	}

	/*
	 * A panel on a phone is an accordion inside the drawer -- the same grid
	 * row trick, because a nested panel has no idea how tall its own list is
	 * either.
	 */
	.ehdr__panel {
		position: static;
		display: grid;
		grid-template-rows: 0fr;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: none;
		border: 0;
		box-shadow: none;
		transition: grid-template-rows var(--ehdr-panel-ms, 280ms) var(--ehdr-ease, cubic-bezier(0.4, 0, 0.2, 1));
	}

	.ehdr__item:hover > .ehdr__panel,
	.ehdr__item:focus-within > .ehdr__panel,
	.ehdr[data-ehdr-ready] .ehdr__item:hover > .ehdr__panel,
	.ehdr[data-ehdr-ready] .ehdr__item:focus-within > .ehdr__panel {
		grid-template-rows: 0fr;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.ehdr__item[data-ehdr-on] > .ehdr__panel,
	.ehdr[data-ehdr-ready] .ehdr__item[data-ehdr-on] > .ehdr__panel {
		grid-template-rows: 1fr;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.ehdr__panel-inner {
		display: block;
		min-height: 0;
		overflow: hidden;
		max-width: none;
		margin: 0;
		padding: 0 0 12px;
	}

	/* The picture and the blurb are desktop luxuries. On a phone the panel is
	   a list of links and nothing else, because everything else pushes the
	   links people came for off the bottom of the screen. The column that held
	   them goes too: an empty flex box still carries its gap. */
	.ehdr__panel-aside,
	.ehdr__figure,
	.ehdr .ehdr__blurb {
		display: none;
	}

	.ehdr .ehdr__panel-link {
		padding: 11px 12px;
	}

	.ehdr__drawer-cta {
		display: flex;
		width: auto;
		margin: 18px var(--ehdr-pad-x-mobile, 20px) 20px;
	}

	.ehdr__scrim {
		--ehdr-scrim-blur: 6px;
	}
}

/*
 * Wide, the drawer is not a box at all.
 *
 * `display: contents` takes the two wrappers out of the layout entirely and
 * hands their children straight to the bar's flex row, so the desktop bar is
 * laid out as though the drawer markup were not there. It has to be markup
 * regardless: on a phone the menu and the button share one animated box, and a
 * box cannot be conjured out of nothing at a breakpoint.
 */
@media (min-width: 1200px) {
	.ehdr__nav,
	.ehdr__nav-inner {
		display: contents;
	}

	/*
	 * One dropdown width, both states.
	 *
	 * The panel spans the bar, and the bar is two different widths: full bleed
	 * at the top of the page, folded to its own contents once it frosts. So
	 * the same menu opened the same way gave you a 1440px sheet across the
	 * window at the top and a 1055px card underneath the floating bar lower
	 * down -- two different components, depending on where you happened to be.
	 *
	 * The folded one is the one worth keeping, so the panel takes that width
	 * in both. Frosted, nothing changes: the bar is already that wide and the
	 * panel still spans it. At the top it is centred on the bar instead, at
	 * the width the script measured the folded bar to need, which lands it in
	 * exactly the same place on screen -- the dropdown no longer moves when
	 * the page does.
	 *
	 * The width is a length rather than a share, because the thing it has to
	 * agree with is a length: `--ehdr-panel-w` is written by the script from
	 * the same measurement that sizes the folded bar, so the two cannot drift
	 * apart. Without the script it falls back to a sensible cap, which is the
	 * no-script case behaving like a normal dropdown rather than like nothing.
	 */
	.ehdr:not([data-ehdr-stuck]):not([data-ehdr-preview="stuck"]) .ehdr__item:not(.ehdr__item--drop) > .ehdr__panel {
		--ehdr-panel-x: -50%;
		left: 50%;
		right: auto;
		width: calc(
			var(--ehdr-panel-w, min(100%, 1120px)) - var(--ehdr-panel-inset, 0px) * 2
		);
		max-width: calc(100% - var(--ehdr-panel-inset, 0px) * 2);
	}

	/*
	 * And there it is a card, not a sheet hanging off the bar.
	 *
	 * Only as a fallback: set the radius or the gap in the panel and that is
	 * what you get in both states. Left alone, the two states want different
	 * answers -- attached under a frosted bar a square top edge is correct,
	 * and floating under a transparent one it is not.
	 */
	.ehdr:not([data-ehdr-stuck]):not([data-ehdr-preview="stuck"]) .ehdr__panel {
		border-top-width: var(--ehdr-panel-gap-top, 10px);
		border-radius: var(--ehdr-panel-radius, 14px);
	}

	/*
	 * Two links do not need the width of the window.
	 *
	 * Everything above treats a panel as a mega menu, because that is what a
	 * panel with a list, a picture and something to say about itself is. An
	 * item whose panel is nothing but four short links is not that, and
	 * stretching one across the sheet is how you get a card the width of the
	 * header holding two words and an acre of white -- which is exactly what
	 * "junky" looked like on the item next door to a good one.
	 *
	 * So a links-only panel sizes to its links and hangs under the word that
	 * opened it. This is the arrangement the item's `position: static` exists
	 * to prevent, and that reasoning still holds for the wide ones; it is only
	 * wrong for this one case, so it is only overturned for this one case.
	 *
	 * The class is written by render() rather than worked out from `:has()`,
	 * because the widget already knows which panels have a picture in them and
	 * a stylesheet should not have to guess at something the markup is sure of.
	 */
	.ehdr__item--drop {
		position: relative;
	}

	.ehdr .ehdr__item--drop > .ehdr__panel {
		--ehdr-panel-x: 0px;
		left: 0;
		right: auto;
		width: max-content;
		min-width: var(--ehdr-drop-min, 240px);
		max-width: var(--ehdr-drop-max, 380px);
	}

	/*
	 * Anchored to the other edge when the first one would hang it off the side
	 * of the bar. Which items those are is a measurement, so the script makes
	 * the call and this is only what it means.
	 */
	.ehdr .ehdr__item--drop.ehdr__item--end > .ehdr__panel {
		left: auto;
		right: 0;
	}

	/* A mega panel's padding around four short rows is a frame, not a margin. */
	.ehdr__item--drop > .ehdr__panel .ehdr__panel-inner {
		padding: var(--ehdr-drop-pad, 14px);
	}

	/*
	 * Two classes, to match the button's own rule.
	 *
	 * `.ehdr .ehdr__cta` sets `display: inline-flex` and had to be two classes
	 * to beat the theme's link colour -- which meant a one-class rule hiding
	 * the drawer's copy lost to it, and the desktop bar carried the button
	 * twice.
	 */
	.ehdr .ehdr__drawer-cta {
		display: none;
	}
}

/* --------------------------------------------------------- no pointer --- */

/*
 * A tap is not a hover, whatever the browser decides to call it.
 *
 * Tap something on a touch screen and it keeps :hover until you tap somewhere
 * else -- there is no pointer to move away. Every hover state in this header
 * therefore latched: the caret stayed upside down after the panel had closed,
 * the label stayed in its hover colour, and the rolling word stayed rolled
 * over onto its understudy. "The arrows don't flip back" is what that looks
 * like from the outside, and it is not the script failing to close anything --
 * the panel had closed, and the caret was being held over by a stylesheet.
 *
 * Every rule here is the matching hover rule undone, and every one of them is
 * qualified with :not([data-ehdr-on]) so it cannot reach an item that really
 * is open. Without that it would win on source order over the attribute rules
 * above -- an open item is hovered too -- and the caret would never turn at
 * all.
 */
@media (hover: none) {
	.ehdr .ehdr__item:not([data-ehdr-on]):hover .ehdr__caret {
		transform: none;
	}

	.ehdr .ehdr__item:not([data-ehdr-on]) > .ehdr__link:hover {
		color: var(--ehdr-ink, #0f3860) !important;
	}

	.ehdr .ehdr__item:not([data-ehdr-on]) > .ehdr__link:hover::after {
		transform: scaleX(0);
	}

	.ehdr .ehdr__item:not([data-ehdr-on]) > .ehdr__link:hover .ehdr__roll span {
		transform: none;
	}

	.ehdr .ehdr__item:not([data-ehdr-on]) > .ehdr__link:hover .ehdr__roll span + span {
		transform: translateY(100%);
	}

	/*
	 * And the row you tapped on the way to a page does not stay lit behind
	 * you. This one shows up on a back-navigation: the drawer opens again with
	 * one link still tinted and slid across, as though it were selected.
	 */
	.ehdr .ehdr__panel-link:hover {
		background: none;
		color: var(--ehdr-ink, #0f3860) !important;
		transform: none;
	}

	.ehdr .ehdr__panel-link:hover svg {
		opacity: 0;
		transform: translateX(-6px);
	}

	/* The picture drifts because a panel is open, not because something was
	   touched near it. */
	.ehdr .ehdr__item:not([data-ehdr-on]):hover > .ehdr__panel .ehdr__figure img {
		transform: scale(1);
	}
}

/* ------------------------------------------------------ reduced motion --- */

@media (prefers-reduced-motion: reduce) {
	/*
	 * Everything still changes; nothing travels to get there. The panels and
	 * the drawer still open and close, the frost still arrives -- they simply
	 * do it at once, which is what someone asking for less motion is asking
	 * for, rather than a header that has stopped responding.
	 */
	.ehdr__bar,
	.ehdr__link,
	.ehdr__link::after,
	.ehdr__caret,
	.ehdr__cta,
	.ehdr__panel,
	.ehdr__panel-link,
	.ehdr__panel-link svg,
	.ehdr__figure img,
	.ehdr__menu,
	.ehdr__scrim,
	.ehdr__burger span,
	.ehdr__logo {
		transition-duration: 1ms !important;
		transition-delay: 0s !important;
	}

	.ehdr__cta:hover,
	.ehdr__cta:focus-visible {
		transform: none;
	}

	/* No roll, no scramble. The label is simply the label, and the colour
	   change is what says it is under the pointer. */
	.ehdr__roll {
		overflow: visible;
		height: auto;
	}

	.ehdr__roll span + span {
		display: none;
	}

	.ehdr__roll span,
	.ehdr__link:hover .ehdr__roll span,
	.ehdr__item[data-ehdr-on] > .ehdr__link .ehdr__roll span {
		transform: none !important;
		transition: none;
	}

	.ehdr .ehdr__panel-link:hover,
	.ehdr .ehdr__panel-link:focus-visible {
		transform: none;
	}

	/* The picture is simply there, at the size it is. */
	.ehdr .ehdr__figure img,
	.ehdr__item[data-ehdr-on] > .ehdr__panel .ehdr__figure img,
	.ehdr__item:hover > .ehdr__panel .ehdr__figure img,
	.ehdr__item:focus-within > .ehdr__panel .ehdr__figure img {
		transform: none;
	}
}