/* =====================================================================
   MW PROCESS
   White card with a heading; four black step boxes float over it,
   joined by a wire that is drawn live by assets/js/process.js.
   Hover (or tap on phones) a box to read its short description.
   Sizes are Figma px from the 2359px-wide frame × --mw-u.
   ===================================================================== */

/* --- Edit values here ------------------------------------------------ */
.mw-pr {
	--mw-u:     calc(100vw / 2359);   /* 1 Figma px */
	--pr-bg:    #E4E4E4;              /* page background */
	--pr-card:  #FFFFFF;              /* white card */
	--pr-ink:   #101010;              /* heading + text */
	--pr-box:   #000000;              /* step boxes and wire */
	--pr-label: #E4E4E4;              /* text inside the boxes */
	--pr-ease:  cubic-bezier(.19, 1, .22, 1);
}

/* --- Section --------------------------------------------------------- */
.mw-pr {
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);     /* full-bleed even inside a boxed container */
	padding: calc(221 * var(--mw-u)) 0 calc(345 * var(--mw-u));
	background: var(--pr-bg);
	color: var(--pr-ink);
	overflow-x: clip;
}

body:has(.mw-pr) {
	overflow-x: clip;
}

/* Remove the Elementor container's padding/gap around the section */
.e-con:has(> .elementor-widget-mw-process),
.e-con:has(> .e-con-inner > .elementor-widget-mw-process),
.e-con:has(> .e-con-inner > .elementor-widget-mw-process) > .e-con-inner {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
	padding: 0 !important;
	gap: 0 !important;
}

/* --- Card ------------------------------------------------------------ */
.mw-pr__card {
	box-sizing: border-box;
	width: calc(1915 * var(--mw-u));
	min-height: calc(994 * var(--mw-u));
	margin-left: calc(227 * var(--mw-u));
	padding: calc(115 * var(--mw-u)) calc(97 * var(--mw-u));
	background: var(--pr-card);
}

.mw-pr .mw-pr__title {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
	font-size: calc(64 * var(--mw-u));
	line-height: 1.031;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--pr-ink);
}

.mw-pr .mw-pr__text {
	margin: calc(45 * var(--mw-u)) 0 0;
	max-width: calc(760 * var(--mw-u));
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: calc(20 * var(--mw-u));
	line-height: 1;
	color: var(--pr-ink);
}

/* --- Wire ------------------------------------------------------------ */
.mw-pr__wire {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 1;
}

.mw-pr__wire path {
	fill: none;
	stroke: var(--pr-box);
	stroke-width: max(2px, calc(4 * var(--mw-u)));
}

/* --- Step boxes ------------------------------------------------------ */
.mw-pr__nodes {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.mw-pr__node {
	position: absolute;
	left: calc(var(--x) * var(--mw-u));
	top: calc(var(--y) * var(--mw-u));
	width: calc(280 * var(--mw-u));
	height: calc(100 * var(--mw-u));
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pr-box);
	box-shadow: 0 calc(2 * var(--mw-u)) calc(8 * var(--mw-u)) rgba(0, 0, 0, .3), 0 calc(4 * var(--mw-u)) calc(40 * var(--mw-u)) rgba(0, 0, 0, .45);
	pointer-events: auto;
	outline: none;
	will-change: transform;
	transition: box-shadow .6s var(--pr-ease);
}

.mw-pr__node[tabindex] {
	cursor: pointer;
}

/* connector dots */
.mw-pr__node::before,
.mw-pr__node::after {
	content: '';
	position: absolute;
	top: 50%;
	width: max(8px, calc(20 * var(--mw-u)));
	height: max(8px, calc(20 * var(--mw-u)));
	border-radius: 50%;
	background: var(--pr-box);
	transform: translate(-50%, -50%);
}

.mw-pr__node::before { left: 0; }
.mw-pr__node::after  { left: 100%; }

.mw-pr .mw-pr__label {
	margin: 0;
	font-family: 'Antonio', sans-serif;
	font-weight: 400;
	font-size: max(14px, calc(32 * var(--mw-u)));
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: center;
	color: var(--pr-label);
}

/* --- Hover description ----------------------------------------------- */
.mw-pr .mw-pr__info {
	position: absolute;
	top: calc(100% + 10 * var(--mw-u));
	left: 0;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: calc(24 * var(--mw-u)) calc(26 * var(--mw-u));
	background: var(--pr-box);
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: max(13px, calc(18 * var(--mw-u)));
	line-height: 1.45;
	color: var(--pr-label);
	clip-path: inset(0 0 100% 0);
	transition: clip-path .7s var(--pr-ease);
	pointer-events: none;
}

.mw-pr__info > span {
	display: block;
	opacity: 0;
	transform: translate3d(0, 10px, 0);
	transition: opacity .5s ease, transform .7s var(--pr-ease);
}

.mw-pr__node:hover,
.mw-pr__node:focus-visible,
.mw-pr__node.is-open {
	z-index: 3;
	box-shadow: 0 calc(18 * var(--mw-u)) calc(60 * var(--mw-u)) rgba(0, 0, 0, .55);
}

.mw-pr__node:hover .mw-pr__info,
.mw-pr__node:focus-visible .mw-pr__info,
.mw-pr__node.is-open .mw-pr__info {
	clip-path: inset(0 0 0 0);
}

.mw-pr__node:hover .mw-pr__info > span,
.mw-pr__node:focus-visible .mw-pr__info > span,
.mw-pr__node.is-open .mw-pr__info > span {
	opacity: .9;
	transform: none;
	transition-delay: .12s;
}

/* Hidden until process.js brings them in */
.mw-pr--js .mw-pr__node {
	opacity: 0;
}

.mw-pr--js .mw-pr__wire path {
	stroke-dasharray: 1 1;
	stroke-dashoffset: 1;
}

/* --- Tablet & phone -------------------------------------------------- */
@media (max-width: 1024px) {
	.mw-pr {
		padding: 72px 0 96px;
	}

	.mw-pr__card {
		width: auto;
		min-height: 0;
		margin: 0 16px;
		padding: 36px 20px 56px;
	}

	.mw-pr .mw-pr__title {
		font-size: clamp(26px, 7.4vw, 56px);
	}

	.mw-pr .mw-pr__text {
		margin-top: 20px;
		max-width: 560px;
		font-size: 15px;
		line-height: 1.35;
	}

	/* steps stack down the card in a gentle zig-zag */
	.mw-pr__nodes {
		position: relative;
		inset: auto;
		display: flex;
		flex-direction: column;
		gap: 48px;
		margin-top: 64px;
	}

	.mw-pr__node {
		--w: min(240px, 72%);
		position: relative;
		left: auto;
		top: auto;
		width: var(--w);
		height: auto;
		margin-left: calc((100% - var(--w)) * var(--m, 0));
		flex-direction: column;
		align-items: stretch;
		box-shadow: 0 4px 24px rgba(0, 0, 0, .45);
	}

	.mw-pr__node:nth-child(4n + 1) { --m: 0; }
	.mw-pr__node:nth-child(4n + 2) { --m: .8; }
	.mw-pr__node:nth-child(4n + 3) { --m: .25; }
	.mw-pr__node:nth-child(4n + 4) { --m: 1; }

	/* connector dots on top and bottom */
	.mw-pr__node::before,
	.mw-pr__node::after {
		width: 12px;
		height: 12px;
		left: 50%;
	}
	.mw-pr__node::before { top: 0; }
	.mw-pr__node::after  { top: 100%; }

	.mw-pr .mw-pr__label {
		padding: 21px 16px;
		font-size: 22px;
	}

	/* the box opens downwards to show the description */
	.mw-pr .mw-pr__info {
		position: static;
		display: grid;
		grid-template-rows: 0fr;
		width: auto;
		padding: 0 18px;
		font-size: 14px;
		clip-path: none;
		transition: grid-template-rows .6s var(--pr-ease), padding .6s var(--pr-ease);
	}

	.mw-pr__info > span {
		overflow: hidden;
		min-height: 0;
	}

	.mw-pr__node.is-open .mw-pr__info {
		grid-template-rows: 1fr;
		padding-bottom: 20px;
	}

	.mw-pr__node:hover,
	.mw-pr__node:focus-visible,
	.mw-pr__node.is-open {
		box-shadow: 0 10px 34px rgba(0, 0, 0, .4);
	}

	.mw-pr__node:hover .mw-pr__info,
	.mw-pr__node:focus-visible .mw-pr__info {
		grid-template-rows: 0fr;
	}
	.mw-pr__node.is-open .mw-pr__info {
		grid-template-rows: 1fr;
	}

	.mw-pr__node:hover .mw-pr__info > span,
	.mw-pr__node:focus-visible .mw-pr__info > span {
		opacity: 0;
	}
	.mw-pr__node.is-open .mw-pr__info > span {
		opacity: .9;
	}
}