/* =====================================================================
   MW STATEMENT
   Big heading + three points. On scroll the heading eases to a stop,
   the points rise in, the heading dims and the points cover it, then
   the section scrolls away. Motion is driven by assets/js/statement.js.
   Sizes are Figma px from the 2359px-wide frame × --mw-u.
   ===================================================================== */

/* --- Edit values here ------------------------------------------------ */
.mw-st {
	--mw-u:   calc(100vw / 2359);        /* 1 Figma px */
	--mw-bg:  #101010;
	--mw-ink: #E4E4E4;

	--st-pad-x:  calc(221 * var(--mw-u));  /* left/right page margin */
	--st-gap:    calc(145 * var(--mw-u));  /* space between description and points */
	--st-length: 175svh;                   /* how long the section stays pinned while it animates */
}

/* --- Section --------------------------------------------------------- */
.mw-st {
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);     /* full-bleed even inside a boxed container */
	background: var(--mw-bg);
	color: var(--mw-ink);
	overflow-x: clip;                    /* clip (not hidden) keeps the pinning working */
}

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

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

.mw-st__stage {
	padding: calc(240 * var(--mw-u)) var(--st-pad-x);
}

.mw-st__inner {
	position: relative;
}

/* --- Heading + description ------------------------------------------ */
.mw-st .mw-st__title {
	margin: 0;
	font-family: 'Antonio', sans-serif;
	font-weight: 100;
	font-size: calc(128 * var(--mw-u));
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--mw-ink);
}

.mw-st .mw-st__text {
	margin: calc(58.7 * var(--mw-u)) 0 0;
	max-width: calc(900 * var(--mw-u));
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: calc(20 * var(--mw-u));
	line-height: 1.5;
	color: var(--mw-ink);
}

/* --- Points (H3) ----------------------------------------------------- */
.mw-st__items {
	display: grid;
	grid-template-columns: calc(599 * var(--mw-u)) calc(650 * var(--mw-u)) auto;  /* Figma columns: 221 / 820 / 1470 */
	margin-top: var(--st-gap);
	position: relative;
	z-index: 1;
}

.mw-st .mw-st__item {
	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(--mw-ink);
}

/* --- Scroll animation (added by statement.js) ------------------------ */
.mw-st--live {
	height: calc(100svh + var(--st-length));
}

.mw-st--live .mw-st__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	padding-block: 0;
	overflow: hidden;
}

.mw-st--live .mw-st__inner {
	/* sit the whole block in the middle of the screen */
	top: max(calc(50svh - 422 * var(--mw-u)), calc(120 * var(--mw-u)));
	will-change: transform;
}

/* Heading fades from the top down; statement.js moves these values */
.mw-st--live .mw-st__title {
	--st-a1: 1;
	--st-a2: 1;
	--st-stop: 100%;
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, var(--st-a1)) 15%, rgba(0, 0, 0, var(--st-a2)) var(--st-stop));
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, var(--st-a1)) 15%, rgba(0, 0, 0, var(--st-a2)) var(--st-stop));
}

.mw-st--live .mw-st__item {
	opacity: 0;
	will-change: transform, opacity;
}

/* --- Tablet & phone -------------------------------------------------- */
@media (max-width: 1024px) {
	.mw-st {
		--st-pad-x: 20px;
		--st-gap: 48px;
	}

	.mw-st__stage {
		padding-block: 96px;
	}

	.mw-st .mw-st__title {
		font-size: clamp(40px, 12vw, 72px);
	}

	.mw-st .mw-st__text {
		margin-top: 20px;
		max-width: 520px;
		font-size: 16px;
	}

	.mw-st__items {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}

	.mw-st .mw-st__item {
		font-size: clamp(24px, 6.4vw, 40px);
	}

	.mw-st--live .mw-st__inner {
		top: 16svh;
	}
}