/* Expereo Pill Nav — animated pill navigation with a morphing mega-dropdown. */

.epn {
	--epn-bar-bg: #ffffff;
	--epn-bar-radius: 100px;
	--epn-pill: #c8e600;
	--epn-pill-radius: 100px;
	--epn-link: #0b1b34;
	--epn-link-active: #0b1b34;
	--epn-dropdown-bg: #ffffff;
	--epn-dropdown-radius: 28px;
	--epn-gap: 8px;
	--epn-logo-x: 0px;
	--epn-logo-y: 0px;
	--epn-max-width: 1200px;
	--epn-offset: 20px;
	--epn-cta-solid-bg: #0b1b34;
	--epn-cta-solid-color: #ffffff;
	--epn-cta-ghost-bg: #ffffff;
	--epn-cta-ghost-color: #0b1b34;
	--epn-cta-ghost-border: #0b1b34;
	--epn-icon: #0b1b34;
	--epn-burger-bg: #ffffff;
	--epn-burger-bg-hover: #f0f4e6;
	--epn-burger-bg-active: #0F0F3B;
	--epn-burger-color-active: #ffffff;
	--epn-burger-color: #0b1b34;
	--epn-mobile-bg: #ffffff;
	--epn-mobile-link: #0b1b34;
	--epn-overlay-bg: rgba(11, 27, 52, 0.45);
	--epn-overlay-blur: 10px;
	--epn-mobile-gap: 14px;
	--epn-dd-duration: 0.42s;
	/* Leaves immediately, then decelerates. A flat opening control point here
	   (the old 0.4, 0.01) reads as a stall before the panel starts moving. */
	--epn-dd-ease: cubic-bezier(0.25, 0.6, 0.25, 1);
	position: relative;
	display: block;
	font-family: inherit;
}

/* ---------------------------------------------------------------- Bar */
.epn__bar {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 10px 20px;
	background: var(--epn-bar-bg);
	border-radius: var(--epn-bar-radius);
}

.epn__logo {
	display: inline-flex;
	align-items: center;
	align-self: center;
	flex: 0 0 auto;
	line-height: 0;
	/* A transform, not margin: this nudge is purely visual, so the logo can never
	   drive the bar's height or shift the items next to it. */
	transform: translate(var(--epn-logo-x), var(--epn-logo-y));
}

.epn__logo img {
	display: block;
	height: 34px;
	width: auto;
}

/* Keep the logo optically centred against the taller nav items. */
.epn__menu {
	align-self: center;
}

/* ---------------------------------------------------------------- Menu */
.epn__menu {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--epn-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.epn__item {
	position: relative;
}

.epn__link {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: 0;
	padding: 10px 18px;
	border: 0;
	background: transparent;
	color: var(--epn-link);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	border-radius: var(--epn-pill-radius);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.25s ease;
}

/* Keep the button transparent in every state so the green pill shows through
   (beats theme button:hover background/colour rules). */
.epn__link:hover,
.epn__link:focus,
.epn__link:active,
.epn__link:focus-visible {
	background: transparent;
	box-shadow: none;
}

.epn__link:focus-visible {
	outline: 2px solid var(--epn-pill);
	outline-offset: 2px;
}

.epn__item.is-active > .epn__link,
.epn__item:hover > .epn__link,
.epn__link:hover,
.epn__link:focus {
	color: var(--epn-link-active);
}

/* The sliding highlight. */
.epn__pill {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	z-index: 0;
	/* JS sizes the pill from the link's outer width, so keep any border inside
	   that measurement rather than growing the pill past the link. */
	box-sizing: border-box;
	background: var(--epn-pill);
	border-radius: var(--epn-pill-radius);
	opacity: 0;
	transform: translateX(0);
	pointer-events: none;
	transition:
		transform 0.38s cubic-bezier(0.4, 0.01, 0.2, 1),
		width 0.38s cubic-bezier(0.4, 0.01, 0.2, 1),
		opacity 0.25s ease;
}

.epn.is-pill-visible .epn__pill {
	opacity: 1;
}

/* ---------------------------------------------------------------- Dropdown */
.epn__dropdown {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% - var(--epn-offset));
	z-index: 1;
}

.epn__dropdown[hidden] {
	display: none;
}

/* Transparent hover bridge fills any gap (negative offset) so the pointer
   never leaves the nav while travelling from the pill to the dropdown. */
.epn__dropdown::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: max(0px, calc(-1 * var(--epn-offset)));
}

.epn__dropdown-inner {
	height: 0;
	width: 100%;
	overflow: hidden;
	/* Full-width clip frame; the panel is the sized, visible box. */
	display: flex;
	justify-content: var(--epn-dd-justify, flex-start);
	/* Critical: without this the panel is a stretched flex item, so it inherits
	   this box's height. Measuring it while closed (height: 0) then returns just
	   the padding, and the open animates to that instead of the real height. */
	align-items: flex-start;
	transition: height var(--epn-dd-duration) var(--epn-dd-ease);
}

.epn__panel {
	display: none;
	/* Per-item width (--epn-panel-w) falls back to the global default. */
	width: var(--epn-panel-w, var(--epn-max-width));
	max-width: 100%;
	box-sizing: border-box;
	background: var(--epn-dropdown-bg);
	border-radius: var(--epn-dropdown-radius);
	padding: calc(28px + var(--epn-offset)) 32px 28px;
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity var(--epn-dd-duration) var(--epn-dd-ease),
		transform var(--epn-dd-duration) var(--epn-dd-ease);
}

.epn__panel.is-active {
	display: block;
}

.epn__panel.is-shown {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------------- Backdrop overlay */
/* Sits inside .epn, below the bar (z 2) and the dropdown (z 1), so the nav is
   always painted over it no matter what stacking context the header lives in.
   Fixed positioning still resolves against the viewport because .epn only ever
   carries a transform while hidden on scroll, which never overlaps an open menu. */
.epn__overlay {
	position: fixed;
	inset: 0;
	z-index: 0;
	background: var(--epn-overlay-bg);
	-webkit-backdrop-filter: blur(var(--epn-overlay-blur));
	backdrop-filter: blur(var(--epn-overlay-blur));
	opacity: 0;
	/* visibility keeps the blur out of the paint tree at rest without the
	   layer teardown that display:none would cause on every open. */
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--epn-dd-duration) var(--epn-dd-ease),
		visibility 0s linear var(--epn-dd-duration);
}

.epn.is-overlay-open .epn__overlay {
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--epn-dd-duration) var(--epn-dd-ease),
		visibility 0s;
}

/* Only swallow clicks when there is no hover-out to close on: a hover menu must
   let mouseleave fire, which needs the pointer to reach the page underneath. */
.epn.is-overlay-blocking .epn__overlay {
	pointer-events: auto;
}

/* Lift a non-sticky nav over the page it dims. */
.epn--has-overlay {
	z-index: 1001;
}

/* ---------------------------------------------------------------- Motion / a11y */
@media (prefers-reduced-motion: reduce) {
	.epn__pill,
	.epn__dropdown-inner,
	.epn__panel,
	.epn__overlay {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------- Right cluster */
.epn__right {
	display: flex;
	align-items: center;
	align-self: center;
	gap: 12px;
	margin-left: auto;
}

.epn__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: 0;
	background: transparent;
	padding: 0;
}

.epn__cta-label {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	white-space: nowrap;
	border-radius: 100px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Arrow circle is fully formed and tucked behind the lozenge, then slides out on hover. */
.epn__cta-arrow {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	margin-left: -38px;
	border-radius: 50%;
	box-sizing: border-box;
	transition: margin-left 0.4s cubic-bezier(0.4, 0.01, 0.2, 1);
}

.epn__cta-arrow svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.epn__cta:hover .epn__cta-arrow,
.epn__cta:focus-visible .epn__cta-arrow {
	margin-left: 8px;
}

.epn__cta--ghost .epn__cta-label {
	color: var(--epn-cta-ghost-color);
	background: var(--epn-cta-ghost-bg);
	border: 1.5px solid var(--epn-cta-ghost-border);
}

.epn__cta--ghost .epn__cta-arrow {
	color: var(--epn-cta-ghost-color);
	background: var(--epn-cta-ghost-bg);
	border: 1.5px solid var(--epn-cta-ghost-border);
}

.epn__cta--solid .epn__cta-label {
	color: var(--epn-cta-solid-color);
	background: var(--epn-cta-solid-bg);
	border: 1.5px solid var(--epn-cta-solid-bg);
}

.epn__cta--solid .epn__cta-arrow {
	color: var(--epn-cta-solid-color);
	background: var(--epn-cta-solid-bg);
	border: 1.5px solid var(--epn-cta-solid-bg);
}

.epn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--epn-icon);
	border-radius: 50%;
	text-decoration: none;
	transition: background 0.2s ease;
}

.epn__icon:hover {
	background: rgba(0, 0, 0, 0.05);
}

.epn__icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

.epn__burger {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--epn-burger-bg);
	transition: background 0.3s ease;
	cursor: pointer;
}

/* Reset theme button:focus/:active (red) so only our states show. */
.epn__burger:focus,
.epn__burger:active,
.epn__burger:focus-visible {
	background: var(--epn-burger-bg);
}

.epn__burger:hover {
	background: var(--epn-burger-bg-hover);
}

.epn__burger.is-open {
	background: var(--epn-burger-bg-active);
}

.epn__burger-inner {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 18px;
	height: 2px;
	margin-left: -9px;
	background: transparent;
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.epn__burger-inner::before,
.epn__burger-inner::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: var(--epn-burger-color);
	border-radius: 2px;
	transition: top 0.3s ease, transform 0.3s ease;
}

.epn__burger-inner::before { top: -4px; }
.epn__burger-inner::after { top: 4px; }

.epn__burger.is-open .epn__burger-inner::before {
	top: 0;
}

.epn__burger.is-open .epn__burger-inner::after {
	top: 0;
	opacity: 0;
}

/* ---------------------------------------------------------------- Mobile menu */
.epn__mobile {
	position: absolute;
	left: 0;
	right: 0;
	/* A separate card floating below the bar, not a drawer tucked behind it. */
	top: calc(100% + var(--epn-mobile-gap));
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 12px 0 20px;
	background: var(--epn-mobile-bg);
	border-radius: 24px;
	box-shadow: 0 12px 40px rgba(11, 27, 52, 0.18);
	/* JS sets an exact height so the card fills the screen and the CTAs sit at
	   the bottom; this cap is the no-JS fallback. */
	max-height: calc(100vh - 96px);
	max-height: calc(100dvh - 96px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.epn__mobile[hidden] { display: none; }

/* The list grows to push the CTAs to the bottom of the card. */
.epn__mobile-root {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
}

.epn__mobile-list {
	flex: 1 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.epn__m-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 11px 20px;
	border: 0;
	background: transparent;
	color: var(--epn-mobile-link);
	font: inherit;
	font-weight: 600;
	font-size: 24px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.epn__chev {
	display: inline-flex;
	flex: 0 0 auto;
}

.epn__chev svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* Drill-in sub-views */
.epn__mobile-sub {
	display: none;
}

.epn__mobile.is-sub .epn__mobile-root {
	display: none;
}

.epn__mobile-sub.is-active {
	display: block;
	animation: epn-slide-in 0.3s ease;
}

@keyframes epn-slide-in {
	from {
		opacity: 0;
		transform: translateX(24px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.epn__m-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	padding: 8px 20px;
	border: 0;
	background: transparent;
	color: var(--epn-mobile-link);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* Keep mobile links their own colour in every state (beats theme a/button:hover). */
.epn__m-link:hover,
.epn__m-link:focus,
.epn__m-link:active,
.epn__m-link:focus-visible,
.epn__m-back:hover,
.epn__m-back:focus,
.epn__m-back:active,
.epn__m-back:focus-visible {
	color: var(--epn-mobile-link);
	background: transparent;
}

.epn__m-title {
	margin: 4px 20px 12px;
	color: var(--epn-mobile-link);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
}

.epn__m-sub-content {
	padding: 0 20px 12px;
}

.epn__mobile-cta {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 10px;
	padding: 16px 20px 0;
}

.epn__mobile-cta .epn__cta {
	width: 100%;
}

.epn__mobile-cta .epn__cta-label {
	width: 100%;
	padding: 12px 16px;
	font-size: 16px;
}

.epn__mobile-cta .epn__cta-arrow {
	display: none;
}

/* ---------------------------------------------------------------- Desktop / mobile modes */
.epn:not(.epn--mobile) .epn__mobile {
	display: none !important;
}

.epn--mobile .epn__menu,
.epn--mobile .epn__right .epn__cta {
	display: none;
}

.epn--mobile .epn__dropdown {
	display: none !important;
}

/* ---------------------------------------------------------------- Hamburger visibility
   The burger is the only way into the mobile sheet, so "hidden on desktop" is scoped
   to the desktop mode rather than hiding the button outright. */
.epn--burger-mobile:not(.epn--mobile) .epn__burger {
	display: none;
}

.epn--burger-off .epn__burger {
	display: none;
}

/* ---------------------------------------------------------------- Sticky / hide on scroll */
.epn--sticky {
	transition: transform 0.35s cubic-bezier(0.4, 0.01, 0.2, 1);
}

.epn--fixed {
	z-index: 1000;
}

.epn--sticky.epn--hidden {
	transform: translateY(-130%);
}

.epn__spacer {
	pointer-events: none;
}

/* ---------------------------------------------------------------- Standalone button widget */
.epn-btn {
	--ebtn-bg: #0b1b34;
	--ebtn-color: #ffffff;
	--ebtn-border: #0b1b34;
	--ebtn-bg-hover: #0b1b34;
	--ebtn-color-hover: #ffffff;
	--ebtn-border-hover: #0b1b34;
	--ebtn-arrow-bg: #0b1b34;
	--ebtn-arrow-color: #ffffff;
	--ebtn-arrow-border: #0b1b34;
	--ebtn-radius: 100px;
	--ebtn-size: 42px;
	--ebtn-gap: 10px;
	--ebtn-pad-t: 14px;
	--ebtn-pad-r: 26px;
	--ebtn-pad-b: 14px;
	--ebtn-pad-l: 26px;
	--ebtn-duration: 0.4s;
	--ebtn-ease: cubic-bezier(0.4, 0.01, 0.2, 1);
	/* Side padding is multiplied by this, so one value drives every mode. */
	--ebtn-pad-scale: 1;
	/* Width lives in variables rather than a class, so the responsive control
	   can set it per breakpoint. A class is emitted once by PHP and cannot. */
	--ebtn-display: inline-flex;
	--ebtn-width: auto;
	--ebtn-label-flex: 0 1 auto;
	position: relative;
	display: var(--ebtn-display);
	width: var(--ebtn-width);
	align-items: center;
	font-family: inherit;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	vertical-align: middle;
}

.epn-btn__label {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: var(--ebtn-label-flex);
	padding:
		var(--ebtn-pad-t)
		calc(var(--ebtn-pad-r) * var(--ebtn-pad-scale))
		var(--ebtn-pad-b)
		calc(var(--ebtn-pad-l) * var(--ebtn-pad-scale));
	white-space: nowrap;
	border-radius: var(--ebtn-radius);
	background: var(--ebtn-bg);
	color: var(--ebtn-color);
	border: 1.5px solid var(--ebtn-border);
	transition:
		padding var(--ebtn-duration) var(--ebtn-ease),
		background 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

/* Tighten the label's sides on hover. Driving it through a multiplier rather
   than fixed values keeps whatever padding is set in Elementor as the basis, so
   the effect scales with it instead of overriding it. */
.epn-btn:hover,
.epn-btn:focus-visible {
	--ebtn-pad-scale: 0.5;
}

.epn-btn:hover .epn-btn__label,
.epn-btn:focus-visible .epn-btn__label {
	background: var(--ebtn-bg-hover);
	color: var(--ebtn-color-hover);
	border-color: var(--ebtn-border-hover);
}

/* Arrow circle is fully formed and tucked behind the lozenge, then slides out on hover. */
.epn-btn__arrow {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--ebtn-size);
	width: var(--ebtn-size);
	height: var(--ebtn-size);
	margin-left: calc(-1 * var(--ebtn-size));
	border-radius: 50%;
	box-sizing: border-box;
	background: var(--ebtn-arrow-bg);
	color: var(--ebtn-arrow-color);
	border: 1.5px solid var(--ebtn-arrow-border);
	transition: margin-left 0.4s cubic-bezier(0.4, 0.01, 0.2, 1);
}

.epn-btn__arrow svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.epn-btn:hover .epn-btn__arrow,
.epn-btn:focus-visible .epn-btn__arrow {
	margin-left: var(--ebtn-gap);
}

/* Arrow always visible (reveal-on-hover disabled) */
.epn-btn--arrow-static .epn-btn__arrow {
	margin-left: var(--ebtn-gap);
}

/* ---------------------------------------------------------------- Arrow-first mode
   The circle is the whole button at rest; the label grows out of it on hover and
   pushes the arrow along. The label is a one-column grid so the column can be
   animated 0fr -> 1fr, which resolves to the text's natural width — the one way to
   transition to an intrinsic width without measuring it in JS. Its own padding and
   side borders collapse alongside, or they would hold the label open at rest. */
.epn-btn--arrow-first .epn-btn__label {
	display: grid;
	grid-template-columns: 0fr;
	padding-left: 0;
	padding-right: 0;
	border-left-width: 0;
	border-right-width: 0;
	transition:
		grid-template-columns var(--ebtn-duration) var(--ebtn-ease),
		padding var(--ebtn-duration) var(--ebtn-ease),
		border-width var(--ebtn-duration) var(--ebtn-ease),
		background 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.epn-btn--arrow-first .epn-btn__text {
	min-width: 0;
	overflow: hidden;
}

/* The arrow leads, so it sits at the left edge instead of tucking behind the label. */
.epn-btn--arrow-first .epn-btn__arrow {
	margin-left: 0;
}

.epn-btn--arrow-first:hover .epn-btn__label,
.epn-btn--arrow-first:focus-visible .epn-btn__label {
	grid-template-columns: 1fr;
	padding-left: calc(var(--ebtn-pad-l) * var(--ebtn-pad-scale));
	padding-right: calc(var(--ebtn-pad-r) * var(--ebtn-pad-scale));
	border-left-width: 1.5px;
	border-right-width: 1.5px;
}

.epn-btn--arrow-first:hover .epn-btn__arrow,
.epn-btn--arrow-first:focus-visible .epn-btn__arrow {
	margin-left: var(--ebtn-gap);
}

/* Full width would stretch the collapsed label back open. */
.epn-btn--arrow-first {
	--ebtn-display: inline-flex;
	--ebtn-width: auto;
	--ebtn-label-flex: 0 1 auto;
}

/* Legacy: buttons saved before the width control became responsive still carry
   this class from PHP. Same result, one breakpoint only. */
.epn-btn--block {
	--ebtn-display: flex;
	--ebtn-width: 100%;
	--ebtn-label-flex: 1 1 auto;
}

@media (prefers-reduced-motion: reduce) {
	.epn-btn__arrow,
	.epn-btn--arrow-first .epn-btn__label {
		transition: none;
	}
}

/* ---------------------------------------------------------------- Theme hover isolation
   Hello Elementor (button:hover / a:hover) and the Elementor kit (.elementor-kit-N
   button:hover, a:hover) style these states with specificity up to (0,2,1), which
   beats the single-class rules above on some templates. Repeating the class lifts
   every rule here to (0,3,0) so only the plugin's own variables decide the look. */
.epn__link.epn__link:hover,
.epn__link.epn__link:focus,
.epn__link.epn__link:active,
.epn__link.epn__link:focus-visible {
	background: transparent;
	box-shadow: none;
	text-decoration: none;
	color: var(--epn-link);
}

.epn__item.is-active > .epn__link.epn__link,
.epn__item:hover > .epn__link.epn__link,
.epn__link.epn__link:hover,
.epn__link.epn__link:focus {
	color: var(--epn-link-active);
}

.epn__burger.epn__burger:focus,
.epn__burger.epn__burger:active,
.epn__burger.epn__burger:focus-visible {
	background: var(--epn-burger-bg);
	box-shadow: none;
}

.epn__burger.epn__burger:hover {
	background: var(--epn-burger-bg-hover);
}

.epn__burger.epn__burger.is-open {
	background: var(--epn-burger-bg-active);
}

.epn__m-link.epn__m-link:hover,
.epn__m-link.epn__m-link:focus,
.epn__m-link.epn__m-link:active,
.epn__m-link.epn__m-link:focus-visible,
.epn__m-back.epn__m-back:hover,
.epn__m-back.epn__m-back:focus,
.epn__m-back.epn__m-back:active,
.epn__m-back.epn__m-back:focus-visible {
	color: var(--epn-mobile-link);
	background: transparent;
	box-shadow: none;
	text-decoration: none;
}

.epn__icon.epn__icon:hover,
.epn__icon.epn__icon:focus,
.epn__icon.epn__icon:active {
	color: var(--epn-icon);
	text-decoration: none;
}

/* CTA and standalone button: the anchor itself carries no colour or background
   in any state; the label and arrow keep their own. */
.epn__cta.epn__cta:hover,
.epn__cta.epn__cta:focus,
.epn__cta.epn__cta:active,
.epn-btn.epn-btn:hover,
.epn-btn.epn-btn:focus,
.epn-btn.epn-btn:active {
	background: transparent;
	box-shadow: none;
	text-decoration: none;
}

.epn__cta--ghost.epn__cta:hover .epn__cta-label,
.epn__cta--ghost.epn__cta:focus .epn__cta-label,
.epn__cta--ghost.epn__cta:hover .epn__cta-arrow,
.epn__cta--ghost.epn__cta:focus .epn__cta-arrow {
	color: var(--epn-cta-ghost-color);
	background: var(--epn-cta-ghost-bg);
	border-color: var(--epn-cta-ghost-border);
}

.epn__cta--solid.epn__cta:hover .epn__cta-label,
.epn__cta--solid.epn__cta:focus .epn__cta-label,
.epn__cta--solid.epn__cta:hover .epn__cta-arrow,
.epn__cta--solid.epn__cta:focus .epn__cta-arrow {
	color: var(--epn-cta-solid-color);
	background: var(--epn-cta-solid-bg);
	border-color: var(--epn-cta-solid-bg);
}

.epn-btn.epn-btn:hover .epn-btn__label,
.epn-btn.epn-btn:focus .epn-btn__label,
.epn-btn.epn-btn:focus-visible .epn-btn__label {
	background: var(--ebtn-bg-hover);
	color: var(--ebtn-color-hover);
	border-color: var(--ebtn-border-hover);
}

.epn-btn.epn-btn:hover .epn-btn__arrow,
.epn-btn.epn-btn:focus .epn-btn__arrow {
	background: var(--ebtn-arrow-bg);
	color: var(--ebtn-arrow-color);
	border-color: var(--ebtn-arrow-border);
}

/* Resting state. Theme and kit rules such as `a { color }` or
   `.elementor-kit-N a { color }` (0,1,1) beat the single-class colour rules
   above on anchors, so lift the base colours to (0,2,0) as well. */
.epn__link.epn__link,
.epn__link.epn__link:visited {
	color: var(--epn-link);
	text-decoration: none;
}

.epn__item.is-active > .epn__link.epn__link,
.epn__item:hover > .epn__link.epn__link {
	color: var(--epn-link-active);
}

.epn__icon.epn__icon,
.epn__icon.epn__icon:visited {
	color: var(--epn-icon);
	text-decoration: none;
}

.epn__m-link.epn__m-link,
.epn__m-link.epn__m-link:visited,
.epn__m-back.epn__m-back {
	color: var(--epn-mobile-link);
	text-decoration: none;
}

.epn__cta.epn__cta,
.epn__cta.epn__cta:visited,
.epn-btn.epn-btn,
.epn-btn.epn-btn:visited {
	text-decoration: none;
}

.epn__cta--ghost .epn__cta-label.epn__cta-label,
.epn__cta--ghost .epn__cta-arrow.epn__cta-arrow {
	color: var(--epn-cta-ghost-color);
}

.epn__cta--solid .epn__cta-label.epn__cta-label,
.epn__cta--solid .epn__cta-arrow.epn__cta-arrow {
	color: var(--epn-cta-solid-color);
}

.epn-btn .epn-btn__label.epn-btn__label {
	color: var(--ebtn-color);
}

.epn-btn .epn-btn__arrow.epn-btn__arrow {
	color: var(--ebtn-arrow-color);
}

/* Mobile menu typography. Dropdown items are <button>s and plain items are <a>s,
   and the theme/kit style each element type differently (font-size, line-height,
   case, spacing). Pin one set of values on both so they always match. */
.epn__m-link.epn__m-link {
	font-family: inherit;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: normal;
	text-transform: none;
	font-style: normal;
}

/* Mobile menu layout. The theme/kit give <a> and <button> different display,
   width, padding and margin, which indented the plain links and pulled the
   chevron in next to the label. Pin the same box on both. */
.epn__m-link.epn__m-link {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 11px 20px;
	border: 0;
	border-radius: 0;
	text-align: left;
	text-indent: 0;
}

.epn__m-link.epn__m-link .epn__chev {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	align-self: center;
	margin: 0 0 0 auto;
	padding: 0;
	line-height: 0;
}

.epn__m-link.epn__m-link .epn__chev svg {
	display: block;
	width: 20px;
	height: 20px;
}

.epn__m-item {
	margin: 0;
	padding: 0;
}

/* Hamburger. A true circle regardless of the theme's button radius/padding, with
   a navy fill and white bars while the menu is open. */
.epn__burger.epn__burger {
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	min-width: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
}

.epn__burger.epn__burger.is-open {
	background: var(--epn-burger-bg-active);
}

.epn__burger.is-open .epn__burger-inner::before,
.epn__burger.is-open .epn__burger-inner::after {
	background: var(--epn-burger-color-active);
}

/* Elementor's "hide on" visibility classes follow Elementor's own breakpoints, so
   between its mobile width and the burger breakpoint the drill-in would still show
   the desktop/tablet version of a template. Apply the mobile visibility there. */
@media (min-width: 768px) {
	.epn--mobile .epn__m-sub-content .elementor-hidden-mobile {
		display: none !important;
	}

	.epn--mobile .epn__m-sub-content .elementor-hidden-desktop.elementor-hidden-tablet:not(.elementor-hidden-mobile) {
		display: var(--display, block) !important;
	}
}

/* Drill-in sub-menu shell: Back button, title and spacing. The content in
   between comes from the Elementor template. */
.epn__m-back.epn__m-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	margin: 0;
	padding: 8px 20px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--epn-mobile-link);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	box-shadow: none;
}

.epn__m-back-icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	transform: rotate(180deg);
}

.epn__m-back-icon svg {
	display: block;
	width: 16px;
	height: 16px;
}

.epn__m-title.epn__m-title {
	margin: 14px 0 20px;
	padding: 0 20px;
	color: var(--epn-mobile-link);
	font-family: inherit;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: none;
}

.epn__m-sub-content {
	padding: 0 20px 16px;
}

/* Article card in the drill-in: always full width and on its own row beneath the
   menu, at every width the burger is active. Matched by what it contains (the
   post grid) because the container IDs differ per template. */
.epn--mobile .epn__m-sub-content .e-con.e-flex:has(.ue_post_blocks) {
	--width: 100%;
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
}

.epn--mobile .epn__m-sub-content .e-con.e-flex:has(> .e-con .ue_post_blocks),
.epn--mobile .epn__m-sub-content .e-con.e-flex:has(> .e-con-inner > .e-con .ue_post_blocks) {
	--flex-wrap: wrap;
	flex-wrap: wrap;
}

/* ...and everything inside the card fills it. The container being full width is
   not enough if its flex alignment or the widget's own width shrinks the grid. */
.epn--mobile .epn__m-sub-content .e-con.e-flex:has(> .elementor-widget .ue_post_blocks),
.epn--mobile .epn__m-sub-content .e-con.e-flex:has(> .e-con-inner > .elementor-widget .ue_post_blocks) {
	--align-items: stretch;
	align-items: stretch;
}

.epn--mobile .epn__m-sub-content .elementor-widget:has(.ue_post_blocks) {
	--container-widget-width: 100%;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	align-self: stretch;
}

.epn--mobile .epn__m-sub-content .elementor-widget:has(.ue_post_blocks) .elementor-widget-container,
.epn--mobile .epn__m-sub-content .ue_post_blocks {
	width: 100%;
	max-width: 100%;
}

/* Grid widgets (Loop Grid, Posts, Unlimited Elements) carry a per-element
   desktop width such as `width: var(--container-widget-width, 28%); max-width: 28%`.
   In the drill-in they always fill the card. Matched by widget type, not ID,
   and written one class above that rule so it wins. */
.epn--mobile .epn__m-sub-content .elementor-element.elementor-widget:is(.elementor-widget-loop-grid, .elementor-widget-posts, .elementor-widget-archive-posts, [class*="elementor-widget-ucaddon"]) {
	--container-widget-width: 100%;
	--container-widget-flex-grow: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	align-self: stretch;
}

/* Their container drops to its own row beneath the menu, too. */
.epn--mobile .epn__m-sub-content .e-con.e-flex:has(.elementor-widget-loop-grid, .elementor-widget-posts, .elementor-widget-archive-posts) {
	--width: 100%;
	--align-items: stretch;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
}