/* =====================================================================
   MW SERVICES
   Light section. On scroll the light rises from the bottom of the
   screen over the dark section above, then the heading and services
   reveal. Motion is driven by assets/js/services.js.
   Sizes are Figma px from the 2359px-wide frame × --mw-u.
   ===================================================================== */

/* --- Edit values here ------------------------------------------------ */
.mw-sv {
	--mw-u:     calc(100vw / 2359);    /* 1 Figma px */
	--sv-bg:    #E4E4E4;               /* light background */
	--sv-dark:  #101010;               /* colour of the section above, before the light rises */
	--sv-ink:   #101010;               /* text */
	--sv-ease:  cubic-bezier(.19, 1, .22, 1);  /* fast start, long soft landing */
	--sv-time:  1.2s;                  /* how long each reveal takes */
	--sv-length: 135svh;               /* pinned length — services.js sets this */
}

/* --- Section --------------------------------------------------------- */
.mw-sv {
	position: relative;
	z-index: 2;                          /* the rising light passes over the section above */
	width: 100vw;
	margin-inline: calc(50% - 50vw);     /* full-bleed even inside a boxed container */
	background: var(--sv-bg);
	color: var(--sv-ink);
	overflow-x: clip;                    /* clip (not hidden) keeps the pinning working */
}

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

/* Remove the Elementor container's padding/gap and lift it above the section before */
.e-con:has(> .elementor-widget-mw-services),
.e-con:has(> .e-con-inner > .elementor-widget-mw-services) {
	position: relative;
	z-index: 2;
}
.e-con:has(> .elementor-widget-mw-services),
.e-con:has(> .e-con-inner > .elementor-widget-mw-services),
.e-con:has(> .e-con-inner > .elementor-widget-mw-services) > .e-con-inner {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
	padding: 0 !important;
	gap: 0 !important;
}

/* --- The rising light ------------------------------------------------ */
/* A dark panel, one screen tall, sits over the top of this section and
   shrinks upwards as the section comes in, so the light rises from below.
   It is attached to the section (never to the screen edge), so it can't
   lag behind the scroll. Chrome, Edge and Safari animate it natively with
   the scroll; other browsers use services.js.                            */
.mw-sv {
	view-timeline: --mw-sv block;
}

.mw-sv__cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100svh;
	z-index: 3;
	transform-origin: 50% 0;
	transform: scaleY(0);
	background: var(--sv-dark);
	will-change: transform;
}

.mw-sv--js .mw-sv__cover {
	transform: scaleY(1);
}

@supports (animation-timeline: view()) {
	.mw-sv--js .mw-sv__cover {
		/* from "top of section at the bottom of the screen" to "top of section at the top" */
		animation: mw-sv-rise cubic-bezier(.333, 0, .667, 1) both;
		animation-timeline: --mw-sv;
		animation-range: entry 0% entry 100%;
	}
}

@keyframes mw-sv-rise {
	from { transform: scaleY(1); }
	to   { transform: scaleY(0); }
}

.mw-sv__lift {
	display: none;                       /* no longer used */
}

/* --- Layout ---------------------------------------------------------- */
.mw-sv__stage {
	position: relative;
	padding: calc(157 * var(--mw-u)) calc(221 * var(--mw-u)) calc(152 * var(--mw-u));
}

.mw-sv__inner {
	position: relative;
	display: grid;
	grid-template-columns: calc(1041 * var(--mw-u)) 1fr;   /* Figma columns: 221 / 1262 */
	align-items: start;
}

/* Heading */
.mw-sv .mw-sv__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(--sv-ink);
}

.mw-sv__line {
	display: block;
	overflow: clip;
	padding-bottom: .12em;               /* room for descenders inside the mask */
	margin-bottom: -.12em;
}

.mw-sv__line > span {
	display: block;
}

/* Descriptions */
.mw-sv .mw-sv__text,
.mw-sv .mw-sv__item-text {
	margin: calc(53 * 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(--sv-ink);
}

.mw-sv .mw-sv__item-text {
	margin-top: calc(15 * var(--mw-u));
}

/* Services */
.mw-sv__list {
	margin-top: calc(-1 * var(--mw-u));
}

.mw-sv__item + .mw-sv__item {
	margin-top: calc(187 * var(--mw-u));
}

.mw-sv .mw-sv__item-title {
	margin: 0;
	max-width: calc(720 * var(--mw-u));
	overflow: clip;
	padding-bottom: .12em;
	margin-bottom: -.12em;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: calc(40 * var(--mw-u));
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--sv-ink);
}

.mw-sv__item-title > span {
	display: block;
}

/* --- Scroll animation (added by services.js) ------------------------- */
.mw-sv--pin {
	height: calc(100svh + var(--sv-length));
}

.mw-sv--pin .mw-sv__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	padding-block: 0;
}

.mw-sv--pin .mw-sv__inner {
	/* keep the block centred on the screen, as in the design */
	top: max(calc(50svh - 401 * var(--mw-u)), calc(100 * var(--mw-u)));
	will-change: transform;
}

/* Hidden until revealed */
.mw-sv--js .mw-sv__line > span,
.mw-sv--js .mw-sv__item-title > span {
	transform: translate3d(0, 110%, 0);
	transition: transform var(--sv-time) var(--sv-ease);
	transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 110ms);
}

.mw-sv--js .mw-sv__text,
.mw-sv--js .mw-sv__item-text {
	opacity: 0;
	filter: blur(6px);
	transform: translate3d(0, 14px, 0);
	transition:
		opacity var(--sv-time) var(--sv-ease),
		filter var(--sv-time) var(--sv-ease),
		transform var(--sv-time) var(--sv-ease);
	transition-delay: var(--d, 0ms);
}

.mw-sv--js .mw-sv__item-text {
	transition-delay: calc(var(--d, 0ms) + 180ms);
}

/* Revealed */
.mw-sv--js .is-in .mw-sv__line > span,
.mw-sv--js .is-in .mw-sv__item-title > span {
	transform: none;
}

.mw-sv--js .mw-sv__text.is-in,
.mw-sv--js .is-in .mw-sv__item-text {
	opacity: 1;
	filter: none;
	transform: none;
}

/* --- Tablet & phone -------------------------------------------------- */
@media (max-width: 1024px) {
	.mw-sv__stage {
		padding: 96px 20px 110px;
	}

	.mw-sv__inner {
		grid-template-columns: 1fr;
	}

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

	.mw-sv .mw-sv__text,
	.mw-sv .mw-sv__item-text {
		max-width: 560px;
		font-size: 15px;
		line-height: 1.35;
	}

	.mw-sv .mw-sv__text {
		margin-top: 20px;
	}

	.mw-sv .mw-sv__item-text {
		margin-top: 10px;
	}

	.mw-sv__list {
		margin-top: 64px;
	}

	.mw-sv__item + .mw-sv__item {
		margin-top: 44px;
	}

	.mw-sv .mw-sv__item-title {
		max-width: 560px;
		font-size: clamp(22px, 6vw, 34px);
		line-height: 1.15;
	}
}