/* Effect 055 under the "What we do" heading — the stylesheet as written, plus
   the few lines that seat it inside the section. */

.mwg_effect055 {
	height: 100dvh;
	font-size: 10vw;
}
.mwg_effect055 .container {
	display: flex;
	height: 100%;
	align-items: center;
}
.mwg_effect055 .sentence {
	white-space: nowrap;
	width: max-content;
	z-index: 1;
	padding: 0 2vw;
	gap: 2vw;
	display: flex;
	align-items: center;
}
.mwg_effect055 .media {
	width: 25vw;
	aspect-ratio: 0.75;
	border-radius: 1vw;
	object-fit: cover;
}
/* --- the service card --- */

.mwg_effect055 .fcg-service {
	position: relative;
	overflow: hidden;
	background: #000;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	/* the design's own insets, as fractions of the card: 14% in from the left,
	   11% down from the top, 12% up from the bottom */
	padding: 3.7vw 2vw 4vw 3.5vw;
	/* the row is nowrap so the cards stay on one line — the wording inside them
	   has to wrap normally */
	white-space: normal;
	text-align: left;
}
/* the clip sits behind the wording, filling the card */
.mwg_effect055 .fcg-service-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	/* held back so the type stays legible over it, and brought up while the
	   pointer is on the card — the same moment the clip comes up to speed */
	opacity: 0.55;
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.mwg_effect055 .fcg-service:hover .fcg-service-bg {
	opacity: 0.8;
}
.mwg_effect055 .fcg-service-title,
.mwg_effect055 .fcg-service-text {
	position: relative;
	z-index: 1;
	margin: 0;
}
.mwg_effect055 .fcg-service-title {
	/* the design draws it at ~6.7% of the card's width; a shade larger here */
	font-size: 2vw;
	line-height: 1.16;
	letter-spacing: -0.01em;
	max-width: 92%;
}
.mwg_effect055 .fcg-service-text {
	font-size: 0.94vw;
	line-height: 1.34;
	color: #fff;
	max-width: 94%;
}

@media (max-width: 768px) {
	.mwg_effect055 .fcg-service {
		padding: 4vw 3.6vw;
	}
	.mwg_effect055 .fcg-service-title {
		font-size: 5.8vw;
	}
	.mwg_effect055 .fcg-service-text {
		font-size: 2.6vw;
	}
}

/* --- seating it in the section --- */

/* the row runs the full width of the screen, past the section's own gutters,
   and sits close under the heading rather than centred on a whole screen */
#home .services .mwg_effect055 {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	overflow: hidden;
	height: auto;
	padding: 2vh 0 6vh;
}
#home .services .mwg_effect055 .container {
	height: auto;
}
/* at either end of its travel the row stops the same distance from the edge of
   the screen as the footer panel does — the effect's own 2vw was wider */
#home .services .mwg_effect055 .sentence {
	padding: 0 clamp(12px, 1.6vw, 28px);
}
/* the section's own bottom padding is not needed under a full-screen row */
#home .services.has-row {
	padding-bottom: 0;
}

/* The row answers the scroll, not the pointer. Nothing here is grabbed, so
   every gesture over it is the page's own — and the wording is not selected by
   accident on the way past. */
#home .services .mwg_effect055 {
	-webkit-user-select: none;
	user-select: none;
}