/**
 * Breathe Easy mega menu.
 * Header geometry remains owned by the custom header PHP. This stylesheet
 * controls the selected header menu, open panel, content motion and open state.
 */

html.be-mega-menu-is-open,
html.be-mega-menu-is-open body,
html.be-mega-menu-is-closing,
html.be-mega-menu-is-closing body {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Optional native menu inside the header bar
   -------------------------------------------------------------------------- */

.be-header-menu {
	min-width: 0;
	font-family: var(--be-font-sans, "aktiv-grotesk", "Aktiv Grotesk", sans-serif);
	opacity: 1;
	visibility: visible;
	transition:
		opacity 180ms ease,
		visibility 0s linear 0s;
}

.be-header-menu > ul {
	display: flex;
	align-items: center;
	gap: var(--be-header-menu-item-gap, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.be-header-menu li {
	margin: 0;
	padding: 0;
}

.be-header-menu a {
	display: inline-flex;
	align-items: center;
	padding: 4px 0;
	color: var(--be-header-menu-color, inherit) !important;
	font-size: var(--be-header-menu-font-size, 16px);
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none !important;
	transition: color 180ms ease;
}

.be-header-menu a:hover,
.be-header-menu a:focus-visible {
	color: var(--be-header-menu-hover-color, #ffffff) !important;
}

/* Current header item is always fully legible, irrespective of hover-colour opacity. */
.be-header-menu .is-current > a {
	color: #ffffff !important;
	font-weight: 600 !important;
	opacity: 1 !important;
}

html.be-mega-menu-is-open .be-header-menu--hide-open,
html.be-mega-menu-is-closing .be-header-menu--hide-open {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 160ms ease,
		visibility 0s linear 160ms;
}

@media (max-width: 1180px) and (min-width: 768px) {
	.be-header-menu > ul {
		gap: var(--be-header-menu-tablet-item-gap, 14px);
	}

	.be-header-menu a {
		font-size: var(--be-header-menu-tablet-font-size, 14px);
	}
}

/* --------------------------------------------------------------------------
   Desktop background expansion
   -------------------------------------------------------------------------- */

#grve-main-header .be-header-glass {
	bottom: auto !important;
	height: var(--be-header-height);
	transition:
		height 440ms cubic-bezier(0.22, 1, 0.36, 1),
		top 440ms cubic-bezier(0.22, 1, 0.36, 1),
		left 440ms cubic-bezier(0.22, 1, 0.36, 1),
		right 440ms cubic-bezier(0.22, 1, 0.36, 1),
		border-radius 360ms ease,
		background-color 300ms ease,
		-webkit-backdrop-filter 300ms ease,
		backdrop-filter 300ms ease !important;
}

html.be-mega-menu-is-open #grve-main-header .be-header-glass {
	height: calc(var(--be-header-height) + var(--be-menu-panel-height, 0px));
	background: var(--be-menu-open-background, rgba(24, 24, 24, 0.82));
	-webkit-backdrop-filter: blur(var(--be-menu-open-blur, 24px));
	backdrop-filter: blur(var(--be-menu-open-blur, 24px));
}

html.be-mega-menu-is-open.be-mega-menu-desktop-expand #grve-main-header .be-header-glass {
	top: calc(var(--be-menu-expand-top, 0px) * -1);
	left: calc(var(--be-menu-expand-left, 0px) * -1);
	right: calc(var(--be-menu-expand-right, 0px) * -1);
	height: calc(
		var(--be-header-height) +
		var(--be-menu-panel-height, 0px) +
		var(--be-menu-expand-top, 0px)
	);
	border-radius: 0;
}

/* --------------------------------------------------------------------------
   Desktop panel and content
   -------------------------------------------------------------------------- */

.be-mega-menu {
	position: absolute;
	z-index: 5;
	top: var(--be-header-height);
	left: 0;
	right: 0;

	box-sizing: border-box;
	min-height: var(--be-menu-desktop-min-height, 0px);
	padding: 28px 0 38px;

	color: #fff;
	font-family: var(--be-font-sans, "aktiv-grotesk", "Aktiv Grotesk", sans-serif);
	visibility: hidden;
	pointer-events: none;
}

html.be-mega-menu-is-open .be-mega-menu,
html.be-mega-menu-is-closing .be-mega-menu {
	visibility: visible;
}

html.be-mega-menu-is-open .be-mega-menu {
	pointer-events: auto;
}

html.be-mega-menu-is-closing .be-mega-menu {
	pointer-events: none;
}

.be-mega-menu__desktop-grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(190px, 0.7fr) minmax(160px, 0.7fr) minmax(0, 2.6fr);
	gap: clamp(28px, 4vw, 70px);
	align-items: start;
	width: 100%;
}

.be-mega-menu__primary-column,
.be-mega-menu__submenu-column,
.be-mega-menu__slots {
	min-width: 0;
}

.be-mega-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Content is prepared together; items and slots stagger from the same start. */
.be-mega-menu__app-link,
.be-mega-menu__primary-item,
.be-mega-menu__submenu-column,
.be-mega-menu__slot {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 150ms ease,
		transform 150ms ease;
}

.be-mega-menu-content-ready .be-mega-menu__app-link {
	opacity: 1;
	transform: translateY(0);
	transition-duration: 250ms;
}

.be-mega-menu-content-ready .be-mega-menu__primary-item {
	opacity: 1;
	transform: translateY(0);
	transition-duration: 270ms;
	transition-delay: calc(var(--be-menu-item-index, 0) * 28ms);
}

.be-mega-menu-content-ready .be-mega-menu__submenu-column {
	opacity: 1;
	transform: translateY(0);
	transition-duration: 270ms;
	transition-delay: 28ms;
}

.be-mega-menu-content-ready .be-mega-menu__slot {
	opacity: 1;
	transform: translateY(0);
	transition-duration: 320ms;
	transition-delay: calc(var(--be-menu-slot-index, 0) * 55ms);
}

.be-mega-menu__app-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	max-width: 100%;
	min-height: 34px;
	margin: 0 0 28px;
	padding: 7px 14px;
	box-sizing: border-box;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: var(--be-menu-desktop-utility-size, 14px);
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none !important;
	transition-property: opacity, transform, color, background-color, border-color;
	transition-duration: 180ms;
}

.be-mega-menu__app-link:hover,
.be-mega-menu__app-link:focus-visible {
	border-color: #fff;
	background: #fff;
	color: #000 !important;
}

.be-mega-menu__primary-list {
	display: grid;
	gap: var(--be-menu-desktop-primary-gap, 8px);
}

.be-mega-menu__primary-item > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 30px;
	padding: 2px 0;
	box-sizing: border-box;
	color: rgba(255, 255, 255, 0.78) !important;
	font-size: var(--be-menu-desktop-primary-size, 15px);
	font-weight: 300;
	line-height: 1.25;
	text-decoration: none !important;
	transition:
		color 220ms ease,
		padding-left 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.be-mega-menu__primary-dot {
	position: absolute;
	left: 0;
	top: calc(50% + 2px);
	width: 14px;
	height: 14px;
	margin-top: -11px;
	border-radius: 6px;
	background: #fbf6f2;
	opacity: 0;
	transform: scale(0.2);
	transform-origin: center;
	transition:
		opacity 220ms ease,
		transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reserve the bold label width and cross-fade weights so text, dot and shift
 * begin together without the late font-weight snap seen with font transitions. */
.be-mega-menu__primary-label {
	display: inline-grid;
	min-width: 0;
	white-space: nowrap;
}

.be-mega-menu__primary-label-regular,
.be-mega-menu__primary-label-bold {
	grid-area: 1 / 1;
	transition: opacity 220ms ease;
}

.be-mega-menu__primary-label-regular {
	font-weight: 300;
	opacity: 1;
}

.be-mega-menu__primary-label-bold {
	font-weight: 600;
	opacity: 0;
}

.be-mega-menu__primary-chevron {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-left: 0;
	color: rgba(255, 255, 255, 0.62);
	opacity: 0.9;
	transform: translateY(-1px);
	transition: color 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.be-mega-menu__primary-chevron svg {
	display: block;
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.be-mega-menu__primary-item.is-visual-active .be-mega-menu__primary-chevron {
	color: #fff;
	transform: translate(2px, -1px);
}

/* Current page is bold and fully white; the square remains hover/focus only. */
.be-mega-menu__primary-item.is-current > a {
	color: #ffffff !important;
	opacity: 1 !important;
}

.be-mega-menu__primary-item.is-current .be-mega-menu__primary-label-regular,
.be-mega-menu__primary-item.is-visual-active .be-mega-menu__primary-label-regular {
	opacity: 0;
}

.be-mega-menu__primary-item.is-current .be-mega-menu__primary-label-bold,
.be-mega-menu__primary-item.is-visual-active .be-mega-menu__primary-label-bold {
	opacity: 1;
}

/* Exactly one primary item may show the visual active state at a time. */
.be-mega-menu__primary-item.is-visual-active > a {
	padding-left: 30px;
	color: #ffffff !important;
}

.be-mega-menu__primary-item.is-visual-active .be-mega-menu__primary-dot {
	opacity: 1;
	transform: scale(1);
}

.be-mega-menu__submenu-column {
	position: relative;
	min-height: var(--be-desktop-submenu-column-height, 220px);
	padding-top: 0;
}

.be-mega-menu__submenu-panel {
	position: absolute;
	top: var(--be-submenu-panel-top, 0px);
	right: 0;
	bottom: auto;
	left: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-8px);
	transition:
		opacity 180ms ease,
		transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 280ms;
}

.be-mega-menu__submenu-panel.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
	transition-delay: 0s;
}

.be-mega-menu__submenu-panel ul {
	display: grid;
	gap: var(--be-menu-desktop-submenu-gap, 2px) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.be-mega-menu__submenu-panel li {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
}

.be-mega-menu__submenu-panel a {
	display: inline-flex !important;
	align-items: center;
	color: rgba(255, 255, 255, 0.7) !important;
	font-size: var(--be-menu-desktop-submenu-size, 15px);
	line-height: 1.12 !important;
	margin: 0 !important;
	padding: 1px 0 !important;
	text-decoration: none !important;
	transition: color 180ms ease;
}

.be-mega-menu__submenu-panel a:hover,
.be-mega-menu__submenu-panel a:focus-visible {
	color: #fff !important;
}

.be-mega-menu__submenu-panel li.is-current > a {
	color: #ffffff !important;
	font-weight: 600 !important;
	opacity: 1 !important;
}

.be-mega-menu__slots {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 34px);
	align-items: start;
}

.be-mega-menu__slots.is-empty {
	display: none;
}

.be-mega-menu__slot {
	display: grid;
	gap: 12px;
	min-width: 0;
	color: rgba(255, 255, 255, 0.76) !important;
	text-decoration: none !important;
}

.be-mega-menu__slot-media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1.9 / 1;
	overflow: hidden;
	border-radius: 20px;
	background: #fbf6f2;
}

.be-mega-menu__slot-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.be-mega-menu__slot:hover .be-mega-menu__slot-media img,
.be-mega-menu__slot:focus-visible .be-mega-menu__slot-media img {
	transform: scale(1.04);
}

.be-mega-menu__slot-title {
	font-size: 14px;
	line-height: 1.25;
	transition: color 180ms ease;
}

.be-mega-menu__slot:hover .be-mega-menu__slot-title,
.be-mega-menu__slot:focus-visible .be-mega-menu__slot-title {
	color: #fff;
}

.be-mega-menu__mobile {
	display: none;
}

#grve-main-header .be-header-safe-button[aria-expanded="true"] {
	background: var(--be-header-safe-hover-background, #000) !important;
	transform: none !important;
}

/* Compact desktop: smaller type/gaps and vertically stacked slots. */
@media (max-width: 1180px) and (min-width: 768px) {
	.be-mega-menu__desktop-grid {
		grid-template-columns: minmax(170px, 0.72fr) minmax(140px, 0.62fr) minmax(250px, 1.25fr);
		gap: 26px;
	}

	.be-mega-menu__primary-list {
		gap: var(--be-menu-tablet-primary-gap, 8px);
	}

	.be-mega-menu__primary-item > a {
		font-size: var(--be-menu-tablet-primary-size, 15px);
	}

	.be-mega-menu__submenu-panel ul {
		gap: var(--be-menu-tablet-submenu-gap, 2px) !important;
	}

	.be-mega-menu__submenu-panel a {
		font-size: var(--be-menu-tablet-submenu-size, 14px);
	}

	.be-mega-menu__slots {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.be-mega-menu__slot-media {
		aspect-ratio: 2.25 / 1;
	}
}

/* --------------------------------------------------------------------------
   Mobile panel
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/*
	 * Match the mobile header's horizontal inset to the actual top edge of the
	 * centred four-dot control. This puts the button equally far from the top
	 * and right edges, and the mobile menu inner container uses the same inset.
	 */
	#grve-main-header > .be-header-container {
		width: auto !important;
		max-width: none !important;
		margin-right: var(--be-mobile-header-edge-gap, var(--be-header-top-space, 18px)) !important;
		margin-left: var(--be-mobile-header-edge-gap, var(--be-header-top-space, 18px)) !important;
	}

	.be-mega-menu__mobile-inner.grve-container {
		width: auto !important;
		max-width: none !important;
		margin-right: max(
			0px,
			calc(var(--be-mobile-header-edge-gap, var(--be-header-top-space, 18px)) - var(--be-menu-mobile-gap, 0px))
		) !important;
		margin-left: max(
			0px,
			calc(var(--be-mobile-header-edge-gap, var(--be-header-top-space, 18px)) - var(--be-menu-mobile-gap, 0px))
		) !important;
	}

	/*
	 * Freeze the normal mobile header in its exact pre-open position.
	 * It has the highest layer; the menu panel remains underneath it.
	 */
	html.be-mega-menu-is-open #grve-main-header,
	html.be-mega-menu-is-closing #grve-main-header {
		position: fixed !important;
		z-index: 2147483000 !important;
		top: var(--be-menu-header-fixed-top, 0px) !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
	}

	html.be-mega-menu-is-open #grve-main-header .be-header-shell,
	html.be-mega-menu-is-closing #grve-main-header .be-header-shell {
		position: relative !important;
		z-index: 4 !important;
	}

	/* Fade the restored mobile header with the floating-opened menu itself. */
	html.be-mega-menu-opened-from-floating #grve-main-header .be-header-shell {
		opacity: 0 !important;
		transition: opacity 250ms ease !important;
	}

	html.be-mega-menu-opened-from-floating.be-mega-menu-is-open #grve-main-header .be-header-shell {
		opacity: 1 !important;
	}

	html.be-mega-menu-opened-from-floating.be-mega-menu-is-closing #grve-main-header .be-header-shell {
		opacity: 0 !important;
		pointer-events: none !important;
	}

	/* White open-state control with black rounded-square marks. */
	html.be-mega-menu-is-open #grve-main-header .be-header-safe-button[aria-expanded="true"] {
		background: #fff !important;
		color: #000 !important;
	}

	html.be-mega-menu-is-open #grve-main-header .be-header-safe-button[aria-expanded="true"]::before {
		background: #000 !important;
		box-shadow:
			var(--be-header-safe-mark-step) 0 0 #000,
			0 var(--be-header-safe-mark-step) 0 #000,
			var(--be-header-safe-mark-step) var(--be-header-safe-mark-step) 0 #000 !important;
	}

	.be-header-menu {
		display: none !important;
	}

	.be-mega-menu {
		position: fixed;
		z-index: 1;
		top: var(--be-menu-mobile-gap, 0px);
		right: var(--be-menu-mobile-gap, 0px);
		bottom: var(--be-menu-mobile-gap, 0px);
		left: var(--be-menu-mobile-gap, 0px);

		display: block;
		min-height: 0;
		padding: 0;
		overflow: hidden;

		border-radius: var(--be-menu-mobile-radius, 0px);
		background: var(--be-menu-mobile-background, #121212);
		-webkit-backdrop-filter: blur(var(--be-menu-mobile-blur, 0px));
		backdrop-filter: blur(var(--be-menu-mobile-blur, 0px));

		opacity: 0;
		transform-origin: top center;
		transition:
			opacity 250ms ease,
			transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 350ms;
	}

	.be-mega-menu--mobile-fade {
		transform: none;
	}

	.be-mega-menu--mobile-slide {
		transform: translateY(-24px);
	}

	.be-mega-menu--mobile-grow {
		transform: scaleY(0.9);
	}

	html.be-mega-menu-is-open .be-mega-menu {
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	.be-mega-menu--mobile-height-content {
		bottom: auto;
		height: auto;
		max-height: calc(100svh - (var(--be-menu-mobile-gap, 0px) * 2));
	}

	.be-mega-menu--mobile-height-content .be-mega-menu__mobile {
		height: auto;
		max-height: calc(100svh - (var(--be-menu-mobile-gap, 0px) * 2));
	}

	.be-mega-menu__desktop {
		display: none;
	}

	.be-mega-menu__mobile {
		display: block;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		max-height: inherit;
		padding:
			var(--be-menu-mobile-content-top, 130px)
			0
			calc(28px + env(safe-area-inset-bottom))
			0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/*
	 * Reuse the exact Impeka container that wraps the visible header. The
	 * menu labels therefore align with the logo and the row-end chevrons
	 * align with the four-dot button at every mobile container width.
	 */
	.be-mega-menu__mobile-inner {
		position: relative;
		box-sizing: border-box;
		min-width: 0;
		margin-right: auto;
		margin-left: auto;
	}

	/*
	 * Give the final item a full fade-sized runway, then fade the scroller to
	 * the panel edge. Slots can therefore clear the gradient instead of being
	 * cut off by a hard final padding block.
	 */
	.be-mega-menu.is-mobile-scrollable .be-mega-menu__mobile {
		padding-bottom: calc(var(--be-menu-mobile-fade-size, 56px) + 28px + env(safe-area-inset-bottom));
		-webkit-mask-image: linear-gradient(
			to bottom,
			transparent 0,
			#000 var(--be-menu-mobile-fade-size, 56px),
			#000 calc(100% - var(--be-menu-mobile-fade-size, 56px)),
			transparent 100%
		);
		mask-image: linear-gradient(
			to bottom,
			transparent 0,
			#000 var(--be-menu-mobile-fade-size, 56px),
			#000 calc(100% - var(--be-menu-mobile-fade-size, 56px)),
			transparent 100%
		);
	}

	.be-mega-menu__app-link--mobile {
		min-height: 38px;
		margin-bottom: 34px;
		padding: 8px 16px;
		font-size: max(16px, calc(var(--be-menu-mobile-primary-size, 34px) * 0.55));
	}

	.be-mega-menu__mobile-list,
	.be-mega-menu__mobile-submenu {
		display: grid;
		gap: var(--be-menu-mobile-primary-gap, 12px);
	}

	.be-mega-menu__mobile-item {
		opacity: 0;
		transform: translateY(12px);
		transition:
			opacity 130ms ease,
			transform 130ms ease;
	}

	.be-mega-menu-content-ready .be-mega-menu__mobile-list > .be-mega-menu__mobile-item {
		opacity: 1;
		transform: translateY(0);
		transition-duration: 260ms;
		transition-delay: calc(var(--be-menu-mobile-item-index, 0) * 24ms);
	}

	.be-mega-menu__mobile-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 16px;
	}

	.be-mega-menu__mobile-row > a {
		display: block;
		padding: 0;
		color: #fff !important;
		font-size: var(--be-menu-mobile-primary-size, 34px);
		font-weight: 300;
		line-height: 1.08;
		letter-spacing: -0.035em;
		text-decoration: none !important;
	}

	.be-mega-menu__mobile-item.is-current > .be-mega-menu__mobile-row > a {
		color: #ffffff !important;
		font-weight: 600;
		opacity: 1;
	}

	.be-mega-menu__submenu-toggle {
		display: inline-grid;
		place-items: center;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: rgba(255, 255, 255, 0.82);
		cursor: pointer;
	}

	.be-mega-menu__submenu-toggle svg {
		width: 18px;
		height: 18px;
		transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.be-mega-menu__submenu-toggle[aria-expanded="true"] svg {
		transform: rotate(90deg);
	}

	/* Smooth height/gap expansion; nested items stagger after the chevron click. */
	.be-mega-menu__mobile-submenu-wrap {
		height: 0;
		margin-top: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			height 340ms cubic-bezier(0.22, 1, 0.36, 1),
			margin-top 340ms cubic-bezier(0.22, 1, 0.36, 1),
			opacity 180ms ease,
			visibility 0s linear 340ms;
	}

	.be-mega-menu__mobile-submenu-wrap.is-expanded {
		height: var(--be-mobile-submenu-height, 0px);
		margin-top: var(--be-menu-mobile-primary-gap, 12px);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}

	.be-mega-menu__mobile-submenu {
		padding: 0 0 0 20px;
	}

	.be-mega-menu__mobile-submenu .be-mega-menu__mobile-item {
		opacity: 0;
		transform: translateY(10px);
		transition:
			opacity 220ms ease,
			transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.be-mega-menu__mobile-submenu-wrap.is-expanded > .be-mega-menu__mobile-submenu > .be-mega-menu__mobile-item {
		opacity: 1;
		transform: translateY(0);
		transition-delay: calc(var(--be-menu-mobile-item-index, 0) * 30ms);
	}

	.be-mega-menu__mobile-submenu .be-mega-menu__mobile-row > a {
		padding: 0;
		color: rgba(255, 255, 255, 0.68) !important;
		font-size: var(--be-menu-mobile-submenu-size, 22px);
		letter-spacing: -0.02em;
	}

	.be-mega-menu__mobile-slots {
		display: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin-top: 42px;
	}

	html:not(.be-mega-menu-opened-from-floating) .be-mega-menu--show-normal-mobile-slots .be-mega-menu__mobile-slots,
	html.be-mega-menu-opened-from-floating .be-mega-menu--show-floating-mobile-slots .be-mega-menu__mobile-slots {
		display: grid;
	}

	.be-mega-menu__mobile-slots .be-mega-menu__slot-media {
		aspect-ratio: 1.35 / 1;
		border-radius: 16px;
	}

	.be-mega-menu__mobile-slots .be-mega-menu__slot {
		opacity: 0;
		transform: translateY(12px);
	}

	.be-mega-menu__mobile-slots > .be-mega-menu__slot:only-child {
		grid-column: 1 / -1;
	}

	.be-mega-menu-content-ready .be-mega-menu__mobile-slots .be-mega-menu__slot {
		opacity: 1;
		transform: translateY(0);
		transition-duration: 300ms;
		transition-delay: calc(var(--be-menu-slot-index, 0) * 50ms);
	}

	.be-mega-menu__slot--mobile .be-mega-menu__slot-media {
		aspect-ratio: 1.6 / 1;
	}

	.be-mega-menu__slot--mobile .be-mega-menu__slot-title {
		font-size: 17px;
	}
}

/* --------------------------------------------------------------------------
   Other responsive and accessibility rules
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.be-mega-menu__desktop-grid--no-slots {
		grid-template-columns: minmax(220px, 0.8fr) minmax(180px, 1fr);
		max-width: 680px;
	}

	.be-mega-menu__slots > .be-mega-menu__slot:only-child {
		grid-column: 1 / -1;
		max-width: 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	#grve-main-header .be-header-glass,
	.be-header-menu,
	.be-mega-menu,
	.be-mega-menu__app-link,
	.be-mega-menu__primary-item,
	.be-mega-menu__primary-item > a,
	.be-mega-menu__primary-dot,
	.be-mega-menu__primary-chevron,
	.be-mega-menu__submenu-column,
	.be-mega-menu__submenu-panel,
	.be-mega-menu__slot,
	.be-mega-menu__slot-media img,
	.be-mega-menu__mobile-item,
	.be-mega-menu__mobile-submenu-wrap,
	.be-mega-menu__submenu-toggle svg {
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}
}

/* --------------------------------------------------------------------------
   Gradient buttons: exact default paint + hover sheen
   -------------------------------------------------------------------------- */

html body a.grve-btn.be-button.color-gradient[data-be-gradient-ready="true"],
html body .color-gradient[data-be-gradient-ready="true"] {
	position: relative !important;
	isolation: isolate;
	overflow: hidden !important;
	--be-button-background: var(--be-color-gradient-base, transparent) !important;
	--be-button-background-image: var(--be-color-gradient-image) !important;
	--be-button-hover-background: var(--be-color-gradient-base, transparent) !important;
	--be-button-hover-background-image: var(--be-color-gradient-image) !important;
	background-color: var(--be-color-gradient-base, transparent) !important;
	background-image: var(--be-color-gradient-image) !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	background-position: center !important;
	filter: none !important;
}

html body a.grve-btn.be-button.color-gradient[data-be-gradient-ready="true"]:is(:hover, :focus, :focus-visible, :active),
html body .color-gradient[data-be-gradient-ready="true"]:is(:hover, :focus, :focus-visible, :active) {
	--be-button-hover-background: var(--be-color-gradient-base, transparent) !important;
	--be-button-hover-background-image: var(--be-color-gradient-image) !important;
	background-color: var(--be-color-gradient-base, transparent) !important;
	background-image: var(--be-color-gradient-image) !important;
	background-size: 100% 100% !important;
	background-position: center !important;
	/* The sheen supplies the hover feedback; avoid an instant filter reset on mouse-leave. */
	filter: none !important;
}

html body a.grve-btn.be-button.color-gradient[data-be-gradient-ready="true"]::before {
	content: none !important;
	display: none !important;
}

html body a.grve-btn.be-button.color-gradient[data-be-gradient-ready="true"]::after,
html body .color-gradient[data-be-gradient-ready="true"]::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: -55% !important;
	width: 55% !important;
	z-index: 0 !important;
	pointer-events: none !important;
	border: 0 !important;
	border-radius: inherit !important;
	background: linear-gradient(112deg, transparent 8%, rgba(255,255,255,.02) 28%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.035) 72%, transparent 92%) !important;
	opacity: 0 !important;
	transform: translate3d(0, 0, 0) !important;
	transition:
		transform 620ms cubic-bezier(0.22,1,0.36,1),
		opacity 620ms cubic-bezier(0.22,1,0.36,1) !important;
	will-change: opacity, transform;
}

html body a.grve-btn.be-button.color-gradient[data-be-gradient-ready="true"]:is(:hover, :focus, :focus-visible)::after,
html body .color-gradient[data-be-gradient-ready="true"]:is(:hover, :focus, :focus-visible)::after {
	opacity: .68 !important;
	transform: translate3d(285%, 0, 0) !important;
}

html body a.grve-btn.be-button.color-gradient[data-be-gradient-ready="true"] > *,
html body .color-gradient[data-be-gradient-ready="true"] > * {
	position: relative !important;
	z-index: 1 !important;
}

/* --------------------------------------------------------------------------
   Scroll-triggered floating four-dot control
   -------------------------------------------------------------------------- */

:root {
	/* JavaScript resolves these from the active responsive header spacing. */
	--be-floating-menu-top: var(--be-header-top-space, 24px);
	--be-floating-menu-side: var(--be-header-top-space, 24px);
	--be-floating-panel-top: var(--be-floating-menu-top);
	--be-floating-panel-side: var(--be-floating-menu-side);
	--be-floating-panel-bottom: var(--be-floating-menu-side);
	--be-floating-panel-anchor-top: 0px;
	--be-floating-panel-anchor-right: 0px;
	--be-floating-menu-button-width: var(--be-header-safe-size, 46px);
	--be-floating-menu-button-height: var(--be-header-safe-size, 46px);
	--be-floating-scroll-runway: 56px;
	--be-floating-scroll-fade: 38px;
}

html body #grve-main-header .be-floating-menu-toggle {
	position: fixed !important;
	cursor: pointer !important;
	z-index: 2147483100 !important;
	top: var(--be-floating-menu-top) !important;
	right: var(--be-floating-menu-side) !important;
	left: auto !important;
	bottom: auto !important;

	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;

	transition:
		background-color 220ms ease,
		opacity 220ms ease,
		visibility 0s linear 220ms !important;
}

html body #grve-main-header .be-floating-menu-toggle.is-visible {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transition-delay: 0s !important;
}

/* A pointer click must not leave the floating control looking active after close. */
html body #grve-main-header .be-floating-menu-toggle[aria-expanded="false"]:not(:hover):not(:focus-visible) {
	background: var(--be-header-safe-background, rgba(24, 24, 24, 0.3)) !important;
	box-shadow: none !important;
	transform: none !important;
	translate: none !important;
}

html.be-mega-menu-is-open:not(.be-mega-menu-opened-from-floating) body #grve-main-header .be-floating-menu-toggle,
html.be-mega-menu-is-closing:not(.be-mega-menu-opened-from-floating) body #grve-main-header .be-floating-menu-toggle {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.be-mega-menu__floating-header {
	display: none;
}

/* --------------------------------------------------------------------------
   Compact desktop panel opened from the floating control
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
	html.be-mega-menu-opened-from-floating #grve-main-header .be-header-container > .be-header-glass,
	html.be-mega-menu-opened-from-floating #grve-main-header .be-header-container > .be-header-shell {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu {
		position: fixed;
		z-index: 2147483050;
		top: var(--be-floating-panel-top);
		right: var(--be-floating-panel-side);
		bottom: auto;
		left: auto;

		width: min(560px, calc(100vw - (var(--be-floating-panel-side) * 2)));
		height: var(--be-floating-panel-height, auto);
		max-height: calc(100svh - var(--be-floating-panel-top) - var(--be-floating-panel-bottom));
		min-height: 0;
		padding: calc(var(--be-floating-panel-anchor-top) + var(--be-floating-menu-button-height) + 56px) 28px 24px;
		overflow: hidden;

		border-radius: var(--be-header-radius, 24px);
		background: var(--be-menu-open-background, rgba(24, 24, 24, 0.82));
		-webkit-backdrop-filter: blur(var(--be-menu-open-blur, 24px));
		backdrop-filter: blur(var(--be-menu-open-blur, 24px));

		opacity: 1;
		clip-path: inset(
			var(--be-floating-panel-anchor-top)
			var(--be-floating-panel-anchor-right)
			calc(100% - var(--be-floating-panel-anchor-top) - var(--be-floating-menu-button-height))
			calc(100% - var(--be-floating-panel-anchor-right) - var(--be-floating-menu-button-width))
			round var(--be-header-safe-radius, 18px)
		);
		transform-origin: top right;
		transition:
			clip-path 440ms cubic-bezier(0.22, 1, 0.36, 1),
			border-radius 360ms ease,
			visibility 0s linear 440ms;
	}

	html.be-mega-menu-opened-from-floating.be-mega-menu-is-open .be-mega-menu {
		clip-path: inset(0 round var(--be-header-radius, 24px));
		transition-delay: 0s;
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu__desktop {
		display: block;
		height: var(--be-floating-content-height, auto);
		max-height: var(--be-floating-content-height, none);
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: none;
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu.is-floating-desktop-scrollable .be-mega-menu__desktop {
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu.is-floating-desktop-fade-bottom:not(.is-floating-desktop-fade-top) .be-mega-menu__desktop {
		-webkit-mask-image: linear-gradient(
			to bottom,
			#000 0,
			#000 calc(100% - var(--be-floating-scroll-fade, 38px)),
			transparent 100%
		);
		mask-image: linear-gradient(
			to bottom,
			#000 0,
			#000 calc(100% - var(--be-floating-scroll-fade, 38px)),
			transparent 100%
		);
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu.is-floating-desktop-fade-top:not(.is-floating-desktop-fade-bottom) .be-mega-menu__desktop {
		-webkit-mask-image: linear-gradient(
			to bottom,
			transparent 0,
			#000 var(--be-floating-scroll-fade, 38px),
			#000 100%
		);
		mask-image: linear-gradient(
			to bottom,
			transparent 0,
			#000 var(--be-floating-scroll-fade, 38px),
			#000 100%
		);
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu.is-floating-desktop-fade-top.is-floating-desktop-fade-bottom .be-mega-menu__desktop {
		-webkit-mask-image: linear-gradient(
			to bottom,
			transparent 0,
			#000 var(--be-floating-scroll-fade, 38px),
			#000 calc(100% - var(--be-floating-scroll-fade, 38px)),
			transparent 100%
		);
		mask-image: linear-gradient(
			to bottom,
			transparent 0,
			#000 var(--be-floating-scroll-fade, 38px),
			#000 calc(100% - var(--be-floating-scroll-fade, 38px)),
			transparent 100%
		);
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu.is-floating-desktop-scrollable .be-mega-menu__desktop-grid {
		padding-bottom: var(--be-floating-scroll-runway, 56px);
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu__desktop::-webkit-scrollbar {
		display: none;
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu__floating-header {
		position: absolute;
		z-index: 3;
		top: var(--be-floating-panel-anchor-top);
		right: calc(
			var(--be-floating-panel-anchor-right) +
			var(--be-floating-menu-button-width) +
			15px
		);
		left: 28px;
		display: block;
		height: var(--be-floating-menu-button-height);
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu__floating-header-inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		width: 100%;
		height: var(--be-floating-menu-button-height);
		min-width: 0;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu__floating-header .be-header-logo-area {
		grid-column: 1;
		justify-self: start;
		align-self: center;
		display: flex !important;
		align-items: center !important;
		height: var(--be-floating-menu-button-height) !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu__floating-header .be-header-logo-area .grve-logo,
	html.be-mega-menu-opened-from-floating .be-mega-menu__floating-header .be-header-logo-area .grve-logo-inner,
	html.be-mega-menu-opened-from-floating .be-mega-menu__floating-header .be-header-logo-area .grve-logo a {
		display: flex !important;
		align-items: center !important;
		height: var(--be-floating-menu-button-height) !important;
		max-height: var(--be-floating-menu-button-height) !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu__floating-header .be-header-logo-area img {
		margin: 0 !important;
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu__floating-header .be-header-cta {
		grid-column: 3;
		justify-self: end;
		align-self: center;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		height: var(--be-floating-menu-button-height) !important;
		min-height: var(--be-floating-menu-button-height) !important;
		max-height: var(--be-floating-menu-button-height) !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	html.be-mega-menu-opened-from-floating.be-mega-menu-is-open body #grve-main-header .be-floating-menu-toggle,
	html.be-mega-menu-opened-from-floating.be-mega-menu-is-closing body #grve-main-header .be-floating-menu-toggle {
		z-index: 2147483200 !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu__submenu-column {
		min-height: var(--be-desktop-submenu-column-height, 220px);
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu__desktop-grid {
		--be-floating-desktop-column-gap: 28px;
		/*
		 * Keep the navigation row and featured-slot row on the same genuine
		 * two-column grid. The real gap is removed first, then both tracks take
		 * exactly half of the remaining width. This keeps the submenu aligned
		 * with the right-hand featured slot without sacrificing equal slots.
		 */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--be-floating-desktop-column-gap);
		max-width: none;
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu__slots {
		grid-column: 1 / -1;
		gap: var(--be-floating-desktop-column-gap, 28px);
		margin-top: 20px;
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu--floating-desktop-slots-inline .be-mega-menu__slots {
		/* Divide the remaining width equally after the configured gap. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu--floating-desktop-slots-stacked .be-mega-menu__slots {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu:not(.be-mega-menu--show-floating-desktop-slots) .be-mega-menu__slots {
		display: none;
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu__slot-media {
		aspect-ratio: 2.35 / 1;
	}

	html.be-mega-menu-opened-from-floating .be-mega-menu__slots > .be-mega-menu__slot:only-child {
		max-width: none;
	}
}

/* Keep the top-level mobile rhythm identical with or without a chevron. */
@media (max-width: 767px) {
	html.be-mega-menu-is-open body #grve-main-header .be-floating-menu-toggle,
	html.be-mega-menu-is-closing body #grve-main-header .be-floating-menu-toggle {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.be-mega-menu__mobile-list > .be-mega-menu__mobile-item > .be-mega-menu__mobile-row {
		min-height: max(42px, calc(var(--be-menu-mobile-primary-size, 34px) * 1.08));
	}

	.be-mega-menu__mobile-list > .be-mega-menu__mobile-item > .be-mega-menu__mobile-row > a {
		display: flex;
		align-items: center;
		align-self: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body #grve-main-header .be-floating-menu-toggle,
	html.be-mega-menu-opened-from-floating .be-mega-menu {
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}
}

/* --------------------------------------------------------------------------
   Featured-slot presentation by menu context
   -------------------------------------------------------------------------- */
.be-mega-menu__slot-media--has-image {
	background: transparent !important;
	background-color: transparent !important;
}
.be-mega-menu__slot-media--placeholder {
	background: rgba(255, 255, 255, 0.2) !important;
	background-color: rgba(255, 255, 255, 0.2) !important;
}

@media (min-width: 768px) {
	html:not(.be-mega-menu-opened-from-floating) .be-mega-menu:not(.be-mega-menu--show-normal-desktop-slots) .be-mega-menu__slots { display: none !important; }
	html:not(.be-mega-menu-opened-from-floating) .be-mega-menu--normal-desktop-slots-inline .be-mega-menu__slots { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	html:not(.be-mega-menu-opened-from-floating) .be-mega-menu--normal-desktop-slots-stacked .be-mega-menu__slots { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
	html:not(.be-mega-menu-opened-from-floating) .be-mega-menu__slot-media { height: var(--be-menu-desktop-slot-height, auto) !important; }
	html.be-mega-menu-opened-from-floating .be-mega-menu--floating-desktop-slots-inline .be-mega-menu__slots { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--be-floating-desktop-column-gap, 28px) !important; }
	html.be-mega-menu-opened-from-floating .be-mega-menu--floating-desktop-slots-stacked .be-mega-menu__slots { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
	html.be-mega-menu-opened-from-floating .be-mega-menu__slot-media { height: var(--be-menu-floating-desktop-slot-height, auto) !important; }
}

@media (max-width: 767px) {
	html:not(.be-mega-menu-opened-from-floating) .be-mega-menu--normal-mobile-slots-inline .be-mega-menu__mobile-slots { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	html:not(.be-mega-menu-opened-from-floating) .be-mega-menu--normal-mobile-slots-stacked .be-mega-menu__mobile-slots { grid-template-columns: minmax(0, 1fr) !important; }
	html:not(.be-mega-menu-opened-from-floating) .be-mega-menu__mobile-slots .be-mega-menu__slot-media { height: var(--be-menu-mobile-slot-height, auto) !important; }
	html.be-mega-menu-opened-from-floating .be-mega-menu--floating-mobile-slots-inline .be-mega-menu__mobile-slots { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	html.be-mega-menu-opened-from-floating .be-mega-menu--floating-mobile-slots-stacked .be-mega-menu__mobile-slots { grid-template-columns: minmax(0, 1fr) !important; }
	html.be-mega-menu-opened-from-floating .be-mega-menu__mobile-slots .be-mega-menu__slot-media { height: var(--be-menu-floating-mobile-slot-height, auto) !important; }
	.be-mega-menu--normal-mobile-slots-stacked .be-mega-menu__mobile-slots > .be-mega-menu__slot,
	.be-mega-menu--floating-mobile-slots-stacked .be-mega-menu__mobile-slots > .be-mega-menu__slot { grid-column: 1 / -1 !important; }
}


@media (min-width: 768px) {
	/* Remove the unused third column when normal desktop slots are hidden. */
	html:not(.be-mega-menu-opened-from-floating) .be-mega-menu:not(.be-mega-menu--show-normal-desktop-slots) .be-mega-menu__desktop-grid {
		grid-template-columns: minmax(220px, 0.8fr) minmax(180px, 1fr) !important;
		max-width: 680px;
	}

	html:not(.be-mega-menu-opened-from-floating) .be-mega-menu--normal-desktop-slots-stacked .be-mega-menu__slots > .be-mega-menu__slot:only-child {
		max-width: none !important;
	}
}

/* --------------------------------------------------------------------------
   Four-dot menu control rotation

   Keep the original four rounded-square marks exactly as drawn. Opening the
   menu rotates the complete 2x2 group 45 degrees clockwise around its true
   centre; closing reverses the same motion back to zero.
   -------------------------------------------------------------------------- */
html body #grve-header #grve-main-header .be-header-safe-button::before {
	transform-origin:
		calc(50% + 5px)
		calc(50% + 5px) !important;
	transform: translate(
		var(--be-header-safe-mark-offset, -5px),
		var(--be-header-safe-mark-offset, -5px)
	) rotate(0deg) !important;
	will-change: transform;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html body #grve-header #grve-main-header .be-header-safe-button[aria-expanded="true"]::before {
	transform: translate(
		var(--be-header-safe-mark-offset, -5px),
		var(--be-header-safe-mark-offset, -5px)
	) rotate(45deg) !important;
}

@media (prefers-reduced-motion: reduce) {
	html body #grve-header #grve-main-header .be-header-safe-button::before {
		transition-duration: 0.01ms !important;
	}
}