/* ME Basic Menu — 1.10.15
 *
 * One surface: bar, dropdown, and mobile panel share a material. The
 * dropdown grows out of the bar (height animates via grid rows, so
 * text never squishes and the join to the bar stays seamless — same
 * color, edge to edge, on the flat run of the pill). Below the chosen
 * breakpoint the runtime sets .is-mnav: links give way to a hamburger
 * that morphs into an X in place, tier 1 slides over the page, tier 2
 * slides in from the right while tier 1 blurs behind it.
 */

/* Below the breakpoint the bar spans the true viewport; this guard
   keeps the pre-measure approximation from ever growing a page
   scrollbar. */
html:has(.pwf-bmenu.is-mnav) {
	overflow-x: clip;
}

.pwf-bmenu {
	--pwf-bm-curve: cubic-bezier(0.22, 0.61, 0.21, 1);
	/* The melt rides an expo glide: nearly all the distance early,
	   the landing impossibly soft. Open takes the long road, close
	   is quicker and quiet. */
	--pwf-bm-expo: cubic-bezier(0.19, 0.91, 0.22, 1);
	--pwf-bm-open: calc(var(--pwf-bm-dur, 260ms) * 2.6);
	--pwf-bm-close: calc(var(--pwf-bm-dur, 260ms) * 0.9);
	position: relative;
}

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

.pwf-bmenu__bar {
	display: flex;
	align-items: center;
	margin-inline: auto;
	background: var(--pwf-bm-surface, #e9e9e7);
	position: relative;
	padding: var(--pwf-bm-bar-pt, 10px) var(--pwf-bm-bar-pr, 12px) var(--pwf-bm-bar-pb, 10px) var(--pwf-bm-bar-pl, 26px);
	border-radius: var(--pwf-bm-r-tl, 999px) var(--pwf-bm-r-tr, 999px) var(--pwf-bm-r-br, 999px) var(--pwf-bm-r-bl, 999px);
}

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

/* Stick to the Top. The runtime pins the bar the moment its top
   reaches the top of the screen and leaves a slot of the same height
   in its place, so the page never jumps at the handoff. Desktop
   only: below the breakpoint nothing here applies and the
   small-screen bar is exactly what it always was. */
.pwf-bmenu__slot {
	display: none;
}

.pwf-bmenu__slot.is-on {
	display: block;
}

.pwf-bmenu.is-pinned {
	z-index: 9980;
}

.pwf-bmenu--sticky {
	--pwf-bm-stick: calc(var(--pwf-bm-dur, 260ms) * 1.8);
	/* Shrink, as the share of their size the logo and button keep. */
	--pwf-bm-shrink-f: calc(1 - var(--pwf-bm-shrink, 25) / 100);
}

/* The corners morph from the curve the bar really draws. A pill's
   999px never renders as more than half the bar's height, and the
   runtime hands that cap over, so the glide runs between two real
   radii instead of spending most of its time above the visible
   range and snapping at the end. */
.pwf-bmenu--sticky:not(.is-mnav) .pwf-bmenu__bar {
	border-radius:
		min(var(--pwf-bm-r-tl, 999px), var(--pwf-bm-r-cap, 999px))
		min(var(--pwf-bm-r-tr, 999px), var(--pwf-bm-r-cap, 999px))
		min(var(--pwf-bm-r-br, 999px), var(--pwf-bm-r-cap, 999px))
		min(var(--pwf-bm-r-bl, 999px), var(--pwf-bm-r-cap, 999px));
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	transition:
		border-radius var(--pwf-bm-stick) var(--pwf-bm-expo),
		background-color var(--pwf-bm-stick) var(--pwf-bm-expo),
		box-shadow var(--pwf-bm-stick) var(--pwf-bm-expo),
		padding var(--pwf-bm-stick) var(--pwf-bm-expo),
		-webkit-backdrop-filter var(--pwf-bm-stick) var(--pwf-bm-expo),
		backdrop-filter var(--pwf-bm-stick) var(--pwf-bm-expo);
}

/* Shrink: the logo's height and the button's padding, type size and
   line box all scale by the same share, so the bar gets shorter with
   them and grows back the same way. The button keeps its hover fade.
   The button's rest type size comes from its Typography control; when
   that is left to inherit, the runtime's measurement stands in, and
   the line box is always the measured one. */
.pwf-bmenu--sticky:not(.is-mnav) .pwf-bmenu__logo img,
.pwf-bmenu--sticky:not(.is-mnav) .pwf-bmenu__logo svg {
	transition: height var(--pwf-bm-stick) var(--pwf-bm-expo);
}

.pwf-bmenu--sticky:not(.is-mnav) .pwf-bmenu__logo i {
	transition: font-size var(--pwf-bm-stick) var(--pwf-bm-expo);
}

.pwf-bmenu--sticky:not(.is-mnav) .pwf-bmenu__cta {
	transition:
		all var(--pwf-bm-dur, 260ms) var(--pwf-bm-curve),
		padding var(--pwf-bm-stick) var(--pwf-bm-expo),
		font-size var(--pwf-bm-stick) var(--pwf-bm-expo),
		line-height var(--pwf-bm-stick) var(--pwf-bm-expo);
}

/* Stuck: square at the screen's edge, soft below, the page showing
   through a blur, the shadow up. Background empty means the bar's
   own color at 70%. */
.pwf-bmenu--sticky.is-stuck:not(.is-mnav) .pwf-bmenu__bar {
	border-radius:
		min(var(--pwf-bm-sr-tl, 0px), var(--pwf-bm-r-cap, 999px))
		min(var(--pwf-bm-sr-tr, 0px), var(--pwf-bm-r-cap, 999px))
		min(var(--pwf-bm-sr-br, 24px), var(--pwf-bm-r-cap, 999px))
		min(var(--pwf-bm-sr-bl, 24px), var(--pwf-bm-r-cap, 999px));
	background: var(--pwf-bm-stuck-surface, color-mix(in srgb, var(--pwf-bm-surface, #e9e9e7) 70%, transparent));
	-webkit-backdrop-filter: blur(var(--pwf-bm-stuck-blur, 14px));
	backdrop-filter: blur(var(--pwf-bm-stuck-blur, 14px));
	padding-top: calc(var(--pwf-bm-bar-pt, 10px) * var(--pwf-bm-shrink-f, 0.75));
	padding-bottom: calc(var(--pwf-bm-bar-pb, 10px) * var(--pwf-bm-shrink-f, 0.75));
}

.pwf-bmenu--sticky.is-stuck:not(.is-mnav) .pwf-bmenu__logo img,
.pwf-bmenu--sticky.is-stuck:not(.is-mnav) .pwf-bmenu__logo svg {
	height: calc(var(--pwf-bm-logo-h, 30px) * var(--pwf-bm-shrink-f, 0.75));
}

.pwf-bmenu--sticky.is-stuck:not(.is-mnav) .pwf-bmenu__logo i {
	font-size: calc(var(--pwf-bm-logo-h, 30px) * var(--pwf-bm-shrink-f, 0.75));
}

.pwf-bmenu--sticky.is-stuck:not(.is-mnav) .pwf-bmenu__cta {
	padding:
		calc(var(--pwf-bm-cta-pt, 12px) * var(--pwf-bm-shrink-f, 0.75))
		calc(var(--pwf-bm-cta-pr, 24px) * var(--pwf-bm-shrink-f, 0.75))
		calc(var(--pwf-bm-cta-pb, 12px) * var(--pwf-bm-shrink-f, 0.75))
		calc(var(--pwf-bm-cta-pl, 24px) * var(--pwf-bm-shrink-f, 0.75));
	font-size: calc(var(--pwf-bm-cta-fs, var(--pwf-bm-cta-fs-m, 1em)) * var(--pwf-bm-shrink-f, 0.75));
	line-height: calc(var(--pwf-bm-cta-lh-m, 1.25em) * var(--pwf-bm-shrink-f, 0.75));
}

/* Stuck, the dropdown is the same material as the bar it grows out
   of: the stuck surface, the page blurred behind it, shoulders
   included (they are shaped by a mask so the blur stops exactly at
   the curve). Link colors, hairline and shadow stay the dropdown's
   own. */
.pwf-bmenu--sticky.is-stuck:not(.is-mnav) .pwf-bmenu__drop {
	background: var(--pwf-bm-stuck-surface, color-mix(in srgb, var(--pwf-bm-surface, #e9e9e7) 70%, transparent));
	-webkit-backdrop-filter: blur(var(--pwf-bm-stuck-blur, 14px));
	backdrop-filter: blur(var(--pwf-bm-stuck-blur, 14px));
}

.pwf-bmenu--sticky.is-stuck:not(.is-mnav) .pwf-bmenu__drop::before,
.pwf-bmenu--sticky.is-stuck:not(.is-mnav) .pwf-bmenu__drop::after {
	background: var(--pwf-bm-stuck-surface, color-mix(in srgb, var(--pwf-bm-surface, #e9e9e7) 70%, transparent));
	-webkit-backdrop-filter: blur(var(--pwf-bm-stuck-blur, 14px));
	backdrop-filter: blur(var(--pwf-bm-stuck-blur, 14px));
}

.pwf-bmenu--sticky.is-stuck:not(.is-mnav) .pwf-bmenu__drop::before {
	-webkit-mask-image: radial-gradient(circle at 0 100%, transparent calc(var(--pwf-bm-oc, 22px) - 0.5px), #000 calc(var(--pwf-bm-oc, 22px) + 0.5px));
	mask-image: radial-gradient(circle at 0 100%, transparent calc(var(--pwf-bm-oc, 22px) - 0.5px), #000 calc(var(--pwf-bm-oc, 22px) + 0.5px));
}

.pwf-bmenu--sticky.is-stuck:not(.is-mnav) .pwf-bmenu__drop::after {
	-webkit-mask-image: radial-gradient(circle at 100% 100%, transparent calc(var(--pwf-bm-oc, 22px) - 0.5px), #000 calc(var(--pwf-bm-oc, 22px) + 0.5px));
	mask-image: radial-gradient(circle at 100% 100%, transparent calc(var(--pwf-bm-oc, 22px) - 0.5px), #000 calc(var(--pwf-bm-oc, 22px) + 0.5px));
}

/* A page that opens already scrolled lands stuck at once, and a
   breakpoint crossed while stuck lets go at once: no morph plays. */
.pwf-bmenu.is-settling .pwf-bmenu__bar,
.pwf-bmenu.is-settling .pwf-bmenu__logo img,
.pwf-bmenu.is-settling .pwf-bmenu__logo svg,
.pwf-bmenu.is-settling .pwf-bmenu__logo i,
.pwf-bmenu.is-settling .pwf-bmenu__cta {
	transition: none !important;
}

.pwf-bmenu__logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	line-height: 0;
	text-decoration: none;
	color: inherit;
}

.pwf-bmenu__logo img,
.pwf-bmenu__logo svg {
	height: var(--pwf-bm-logo-h, 30px);
	width: auto;
	display: block;
}

/* The mark eases between its two states on the house clock, fill
   and color both, path-level fills included. */
.pwf-bmenu__logo,
.pwf-bmenu__logo svg,
.pwf-bmenu__logo svg * {
	transition:
		color var(--pwf-bm-dur, 260ms) var(--pwf-bm-curve),
		fill var(--pwf-bm-dur, 260ms) var(--pwf-bm-curve);
}

/* An image logo can carry a second file for small screens: the bar
   and the open panel show it below the breakpoint, the desktop file
   everywhere else. */
.pwf-bmenu__logo-img--small {
	display: none;
}

.pwf-bmenu.is-mnav .pwf-bmenu__logo-img--large {
	display: none;
}

.pwf-bmenu.is-mnav .pwf-bmenu__logo-img--small {
	display: block;
}

.pwf-bmenu__logo i {
	font-size: var(--pwf-bm-logo-h, 30px);
	line-height: 1;
}

.pwf-bmenu__links {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0 auto;
	gap: 32px;
	padding: 0;
}

.pwf-bmenu__note {
	margin: 0 auto;
	font-size: 13px;
	opacity: 0.7;
}

.pwf-bmenu__item {
	position: relative;
}

.pwf-bmenu .pwf-bmenu__link {
	display: inline-block;
	padding: 8px 2px;
	color: var(--pwf-bm-link, #141414);
	text-decoration: none;
	transition: color var(--pwf-bm-dur, 260ms) var(--pwf-bm-curve);
}

.pwf-bmenu .pwf-bmenu__link:hover {
	color: var(--pwf-bm-link-hover, #8b5f4d);
}

.pwf-bmenu__item.is-open > .pwf-bmenu .pwf-bmenu__link {
	color: var(--pwf-bm-link-open, #8b5f4d);
}

.pwf-bmenu__cta {
	display: inline-flex;
	align-items: center;
	flex: none;
	margin-left: 0;
	padding: var(--pwf-bm-cta-pt, 12px) var(--pwf-bm-cta-pr, 24px) var(--pwf-bm-cta-pb, 12px) var(--pwf-bm-cta-pl, 24px);
	text-decoration: none;
	/* Hover fades the way Elementor's native button does; whatever
	   the tabs style eases over on the house clock. */
	transition: all var(--pwf-bm-dur, 260ms) var(--pwf-bm-curve);
}

/* ------------------------------------------------------- dropdown */

/* One shared panel owned by the bar: bar and dropdown are a single
   combined shape, a Figma union. The panel grows out of the join by
   real height, glides between triggers when the pointer moves along
   the bar, and folds back up on leave. The runtime drives left,
   width, and height in pixels; everything else lives here. */
.pwf-bmenu__dropclip {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 0;
	z-index: 40;
	pointer-events: none;
	/* The hard promise, never animated: nothing the panel paints,
	   its shadow included, can ever appear above the join. Sideways
	   and below stay open for the shoulders and the shadow. */
	clip-path: inset(0 -60px -900px -60px);
}

.pwf-bmenu__drop {
	position: absolute;
	top: 0;
	left: 0;
	width: 280px;
	height: 0;
	background: var(--pwf-bm-drop-surface, var(--pwf-bm-surface, #e9e9e7));
	pointer-events: none;
	/* At every frame this is a real, complete rounded rectangle; its
	   actual height is the thing that grows, so its own bottom
	   corners ride the moving edge the whole way. Travel between
	   triggers eases left, width, and height together: one shape
	   moving. */
	transition:
		height var(--pwf-bm-open) var(--pwf-bm-expo),
		left var(--pwf-bm-open) var(--pwf-bm-expo),
		width var(--pwf-bm-open) var(--pwf-bm-expo);
	will-change: height, left, width;
}

.pwf-bmenu.is-dropping .pwf-bmenu__drop {
	pointer-events: auto;
}

/* Close folds back into the join on the house clock, quicker and
   quiet. */
.pwf-bmenu.is-closing .pwf-bmenu__drop {
	transition-duration: var(--pwf-bm-close), var(--pwf-bm-close), var(--pwf-bm-close);
	transition-timing-function: var(--pwf-bm-curve), var(--pwf-bm-curve), var(--pwf-bm-curve);
}

/* The content clips to the panel's true height behind its own
   rounded corners; nothing ever hangs below the moving edge. */
.pwf-bmenu__drop-in {
	position: relative;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
}

/* Offscreen twin the runtime measures each item's natural panel
   size in, honoring the Width control and the clamps. */
.pwf-bmenu__measure {
	left: -9999px;
	height: auto;
	width: var(--pwf-bm-drop-w, max-content);
	min-width: 240px;
	max-width: min(92vw, 560px);
	visibility: hidden;
	transition: none;
}

.pwf-bmenu__measure .pwf-bmenu__drop-pad {
	display: block;
	opacity: 1;
}

/* Below the breakpoint the panel yields entirely to the overlay. */
.pwf-bmenu.is-mnav .pwf-bmenu__dropclip {
	display: none;
}

/* The outside corners: concave shoulders where the panel meets the
   bar, drawn in the panel's own surface so the two read as one
   liquid shape. They belong to the join and travel with the panel;
   their height rides the panel's own, so they scale in with the
   first pixels of growth and can never hang below the moving edge. */
.pwf-bmenu__drop::before,
.pwf-bmenu__drop::after {
	content: '';
	position: absolute;
	top: 0;
	width: var(--pwf-bm-oc, 22px);
	height: min(var(--pwf-bm-oc, 22px), 100%);
	pointer-events: none;
}

.pwf-bmenu__drop::before {
	right: 100%;
	background: radial-gradient(
		circle at 0 100%,
		transparent calc(var(--pwf-bm-oc, 22px) - 0.5px),
		var(--pwf-bm-drop-surface, var(--pwf-bm-surface, #e9e9e7)) calc(var(--pwf-bm-oc, 22px) + 0.5px)
	);
}

.pwf-bmenu__drop::after {
	left: 100%;
	background: radial-gradient(
		circle at 100% 100%,
		transparent calc(var(--pwf-bm-oc, 22px) - 0.5px),
		var(--pwf-bm-drop-surface, var(--pwf-bm-surface, #e9e9e7)) calc(var(--pwf-bm-oc, 22px) + 0.5px)
	);
}

/* Each parent's links live in their own pad inside the shared
   panel; the active pad fades on over the traveling surface, one
   gentle breath, and fades off on the close clock. */
.pwf-bmenu__drop-pad {
	display: none;
	opacity: 0;
}

.pwf-bmenu__drop-pad.is-active {
	display: block;
	transition: opacity calc(var(--pwf-bm-close) * 0.7) var(--pwf-bm-curve);
}

.pwf-bmenu__drop-pad.is-active.is-in {
	opacity: 1;
	transition: opacity calc(var(--pwf-bm-open) * 0.7) ease-out 90ms;
}

/* The hairline sits halfway between the parent item in the bar and
   the first link below; the runtime places it from the real
   geometry, and the Padding control's sides keep its insets matched
   to the links. */
.pwf-bmenu__sep {
	position: absolute;
	top: 4px;
	left: 48px;
	right: 48px;
	height: 1px;
	margin: 0;
	background: var(--pwf-bm-sep, rgba(0, 0, 0, 0.16));
}

.pwf-bmenu__drop ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pwf-bmenu .pwf-bmenu__sublink {
	display: inline-block;
	color: var(--pwf-bm-sublink, #141414);
	text-decoration: none;
	transition: color var(--pwf-bm-dur, 260ms) var(--pwf-bm-curve);
}

.pwf-bmenu .pwf-bmenu__sublink:hover {
	color: var(--pwf-bm-sublink-hover, #8b5f4d);
}

/* ------------------------------------------------------ hamburger */

.pwf-bmenu__burger {
	display: none;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 44px;
	height: 44px;
	margin-left: 16px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.pwf-bmenu__burger span {
	display: block;
	width: var(--pwf-bm-burger-w, 30px);
	height: 2px;
	background: var(--pwf-bm-burger-c, #141414);
	transition:
		transform var(--pwf-bm-dur, 260ms) var(--pwf-bm-curve),
		opacity var(--pwf-bm-dur, 260ms) var(--pwf-bm-curve);
}

/* The morph: outer lines fold onto the middle and cross, the middle
   line steps aside. Same element, in place, both directions. */
.is-m-open .pwf-bmenu__burger span:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}

.is-m-open .pwf-bmenu__burger span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.4);
}

.is-m-open .pwf-bmenu__burger span:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

/* -------------------------------------------------- mobile switch */

.is-mnav .pwf-bmenu__links,
.is-mnav .pwf-bmenu__cta,
.is-mnav .pwf-bmenu__note {
	display: none;
}

.is-mnav .pwf-bmenu__burger {
	display: flex;
}

/* Below the breakpoint the pill dissolves: the bar sits flat and
   full-bleed on the page, logo left, hamburger flush right. The open
   panel's header repeats this geometry exactly, so opening moves
   nothing but the panel itself. */
.pwf-bmenu.is-mnav .pwf-bmenu__bar {
	box-sizing: border-box;
	max-width: none !important;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 18px 24px !important;
	justify-content: space-between;
}

.pwf-bmenu.is-mnav .pwf-bmenu__burger {
	margin-left: 0;
}

/* --------------------------------------------------- mobile panel */

.pwf-bmenu__overlay {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: flex;
	flex-direction: column;
	/* Scrollbar compensation set by the runtime at lock, so the X
	   stays in the same pixels the hamburger held. */
	padding-right: var(--pwf-bm-sbw, 0px);
	background: var(--pwf-bm-panel, var(--pwf-bm-surface, #e9e9e7));
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--pwf-bm-dur, 260ms) var(--pwf-bm-curve),
		visibility 0s linear var(--pwf-bm-dur, 260ms);
}

.is-m-open .pwf-bmenu__overlay {
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--pwf-bm-dur, 260ms) var(--pwf-bm-curve),
		visibility 0s;
}

/* The header repeats the resting bar's live geometry: the runtime
   hands it the bar's true top offset, so logo and X paint in the
   identical pixels they already occupied. */
.pwf-bmenu__m-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--pwf-bm-mtop, 0px);
	padding: 18px 24px;
	flex: none;
}

.pwf-bmenu__m-bar .pwf-bmenu__burger {
	display: flex;
	margin: 0;
}

.pwf-bmenu__m-body {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.pwf-bmenu__m-nav {
	height: 100%;
	overflow-y: auto;
	padding-top: 28px;
	transition: filter var(--pwf-bm-dur, 260ms) var(--pwf-bm-curve);
}

.is-tier2 .pwf-bmenu__m-nav {
	filter: blur(var(--pwf-bm-blur, 8px));
}

.pwf-bmenu__m-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pwf-bmenu__m-list > li {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--pwf-bm-mdiv, rgba(0, 0, 0, 0.12));
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--pwf-bm-dur, 260ms) var(--pwf-bm-curve),
		transform var(--pwf-bm-dur, 260ms) var(--pwf-bm-curve);
}

.pwf-bmenu__m-list > li:last-child {
	border-bottom: 1px solid var(--pwf-bm-mdiv, rgba(0, 0, 0, 0.12));
}

/* Rows arrive as a set: a soft rise, each a beat behind the last. */
.is-m-open .pwf-bmenu__m-list > li {
	opacity: 1;
	transform: none;
}

.is-m-open .pwf-bmenu__m-list > li:nth-child(1) { transition-delay: 60ms; }
.is-m-open .pwf-bmenu__m-list > li:nth-child(2) { transition-delay: 105ms; }
.is-m-open .pwf-bmenu__m-list > li:nth-child(3) { transition-delay: 150ms; }
.is-m-open .pwf-bmenu__m-list > li:nth-child(4) { transition-delay: 195ms; }
.is-m-open .pwf-bmenu__m-list > li:nth-child(5) { transition-delay: 240ms; }
.is-m-open .pwf-bmenu__m-list > li:nth-child(6) { transition-delay: 285ms; }
.is-m-open .pwf-bmenu__m-list > li:nth-child(7) { transition-delay: 330ms; }
.is-m-open .pwf-bmenu__m-list > li:nth-child(n+8) { transition-delay: 375ms; }

.pwf-bmenu .pwf-bmenu__m-link {
	display: block;
	padding: 22px calc(var(--pwf-bm-arrow-w, 68px) + 20px) 22px 24px;
	color: var(--pwf-bm-mlink, #141414);
	font-size: 26px;
	text-decoration: none;
}

/* The arrow block is the row's own right cell: exactly the row's
   band, flush to the edge, sitting inside the dividers. */
.pwf-bmenu__m-more {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--pwf-bm-arrow-w, 68px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pwf-bm-arrow-bg, #0a0a0a);
	color: var(--pwf-bm-arrow-c, #fff);
	border: 0;
	cursor: pointer;
}

/* --------------------------------------------------- tier 2 sheet */

/* Sheet Arrival: by default the sheet fades on over the blurring
   tier with a whisper of drift, landing on the long house glide;
   Fade drops the drift, Slide keeps the original travel. Close is
   always quicker, on the house curve. */
.pwf-bmenu__sheet {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--pwf-bm-sheet-w, 86%);
	/* The back block juts off the left edge, so the sheet always leaves
	   it room on screen whatever width is set. */
	max-width: calc(100% - var(--pwf-bm-arrow-w, 68px));
	background: var(--pwf-bm-sheet-bg, #0a0a0a);
	overflow: visible;
	opacity: 0;
	visibility: hidden;
	transform: translateX(24px);
	transition:
		opacity var(--pwf-bm-close) var(--pwf-bm-curve),
		transform var(--pwf-bm-close) var(--pwf-bm-curve),
		visibility 0s linear var(--pwf-bm-close);
	z-index: 5;
}

.pwf-bmenu__sheet.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity var(--pwf-bm-open) var(--pwf-bm-expo),
		transform var(--pwf-bm-open) var(--pwf-bm-expo),
		visibility 0s;
}

.pwf-bmenu[data-sheetfx="fade"] .pwf-bmenu__sheet {
	transform: none;
}

.pwf-bmenu[data-sheetfx="slide"] .pwf-bmenu__sheet {
	opacity: 1;
	transform: translateX(calc(100% + 96px));
	transition:
		transform var(--pwf-bm-close) var(--pwf-bm-curve),
		visibility 0s linear var(--pwf-bm-close);
}

.pwf-bmenu[data-sheetfx="slide"] .pwf-bmenu__sheet.is-open {
	transform: none;
	transition:
		transform var(--pwf-bm-open) var(--pwf-bm-expo),
		visibility 0s;
}

.pwf-bmenu__s-list {
	list-style: none;
	margin: 0;
	padding: 0 28px;
	height: 100%;
	overflow-y: auto;
}

.pwf-bmenu__s-list > li {
	padding: 20px 0;
}

.pwf-bmenu__s-first {
	position: relative;
}

/* The back block juts off the sheet's left edge onto the blurred
   tier behind, the arrow pointing right, and the runtime locks it
   to the first row's true band so it sits level at any typography.
   A child of the sheet itself, outside the scrolling list, so
   nothing can ever clip it. */
.pwf-bmenu__back {
	position: absolute;
	top: var(--pwf-bm-back-top, 20px);
	right: 100%;
	width: var(--pwf-bm-arrow-w, 68px);
	height: var(--pwf-bm-back-h, 72px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pwf-bm-sheet-bg, #0a0a0a);
	color: var(--pwf-bm-arrow-c, #fff);
	border: 0;
	padding: 0;
	cursor: pointer;
}

.pwf-bmenu .pwf-bmenu__s-link {
	display: inline-block;
	color: var(--pwf-bm-slink, #fff);
	font-size: 26px;
	text-decoration: none;
}

/* Themes style every button (Hello turns them pink on focus and
   active); the menu's buttons answer only to the menu, in every state,
   and taps never flash a highlight. */
.pwf-bmenu button,
.pwf-bmenu button:hover,
.pwf-bmenu button:focus,
.pwf-bmenu button:active {
	-webkit-tap-highlight-color: transparent;
	outline: none;
	box-shadow: none;
	text-transform: none;
}

.pwf-bmenu .pwf-bmenu__burger,
.pwf-bmenu .pwf-bmenu__burger:hover,
.pwf-bmenu .pwf-bmenu__burger:focus,
.pwf-bmenu .pwf-bmenu__burger:active {
	background: transparent;
	border: 0;
}

.pwf-bmenu .pwf-bmenu__m-more,
.pwf-bmenu .pwf-bmenu__m-more:hover,
.pwf-bmenu .pwf-bmenu__m-more:focus,
.pwf-bmenu .pwf-bmenu__m-more:active {
	background: var(--pwf-bm-arrow-bg, #0a0a0a);
	color: var(--pwf-bm-arrow-c, #fff);
	border: 0;
	border-radius: 0;
}

.pwf-bmenu .pwf-bmenu__back,
.pwf-bmenu .pwf-bmenu__back:hover,
.pwf-bmenu .pwf-bmenu__back:focus,
.pwf-bmenu .pwf-bmenu__back:active {
	background: var(--pwf-bm-sheet-bg, #0a0a0a);
	color: var(--pwf-bm-arrow-c, #fff);
	border: 0;
	border-radius: 0;
}

.pwf-bmenu .pwf-bmenu__back:focus-visible,
.pwf-bmenu .pwf-bmenu__m-more:focus-visible,
.pwf-bmenu .pwf-bmenu__burger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.pwf-bmenu .pwf-bmenu__m-link--parent {
	cursor: pointer;
}

/* ------------------------------------------------------ scroll lock */

html.pwf-bmenu-lock,
html.pwf-bmenu-lock body {
	overflow: hidden !important;
}

/* The vanished scrollbar's width, handed over by the runtime, so
   the page never reflows behind the panel. */
html.pwf-bmenu-lock body {
	padding-right: var(--pwf-bm-sbw, 0px) !important;
}

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

@media (prefers-reduced-motion: reduce) {
	.pwf-bmenu *,
	.pwf-bmenu *::before,
	.pwf-bmenu *::after {
		transition: none !important;
	}
}

/* First paint, phone layout. The runtime switches the menu to its phone
   layout with a class once it has measured the screen; until it runs,
   the very first paint would draw the desktop bar on a phone for a frame.
   These mirror the phone-layout rules by screen width, keyed to the
   breakpoint the menu was set to, so the header is right from the first
   frame. Once the runtime is up the class carries the same rules. */
@media (max-width: 1024px) {
	.pwf-bmenu[data-bp="tablet"] .pwf-bmenu__logo-img--large {
		display: none;
		}
	.pwf-bmenu[data-bp="tablet"] .pwf-bmenu__logo-img--small {
		display: block;
		}
	.pwf-bmenu[data-bp="tablet"] .pwf-bmenu__dropclip {
		display: none;
		}
	.pwf-bmenu[data-bp="tablet"] .pwf-bmenu__links,
	.pwf-bmenu[data-bp="tablet"] .pwf-bmenu__cta,
	.pwf-bmenu[data-bp="tablet"] .pwf-bmenu__note {
		display: none;
		}
	.pwf-bmenu[data-bp="tablet"] .pwf-bmenu__burger {
		display: flex;
		}
	.pwf-bmenu[data-bp="tablet"] .pwf-bmenu__bar {
		box-sizing: border-box;
		max-width: none !important;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		background: transparent !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding: 18px 24px !important;
		justify-content: space-between;
		}
	.pwf-bmenu[data-bp="tablet"] .pwf-bmenu__burger {
		margin-left: 0;
		}
}

@media (max-width: 767px) {
	.pwf-bmenu[data-bp="mobile"] .pwf-bmenu__logo-img--large {
		display: none;
		}
	.pwf-bmenu[data-bp="mobile"] .pwf-bmenu__logo-img--small {
		display: block;
		}
	.pwf-bmenu[data-bp="mobile"] .pwf-bmenu__dropclip {
		display: none;
		}
	.pwf-bmenu[data-bp="mobile"] .pwf-bmenu__links,
	.pwf-bmenu[data-bp="mobile"] .pwf-bmenu__cta,
	.pwf-bmenu[data-bp="mobile"] .pwf-bmenu__note {
		display: none;
		}
	.pwf-bmenu[data-bp="mobile"] .pwf-bmenu__burger {
		display: flex;
		}
	.pwf-bmenu[data-bp="mobile"] .pwf-bmenu__bar {
		box-sizing: border-box;
		max-width: none !important;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		background: transparent !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding: 18px 24px !important;
		justify-content: space-between;
		}
	.pwf-bmenu[data-bp="mobile"] .pwf-bmenu__burger {
		margin-left: 0;
		}
}