/* Services, as the horizontal accordion: one panel open, the rest collapsed to
   a rail with their title turned on its side. The measurements are the ones the
   effect was written against, so they stay in px — the page's rem is tied to
   the viewport width and would rescale them. */

.mwg_effect109 {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 2rem 0 6rem;
}

.mwg_effect109 .container {
	height: 506px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.mwg_effect109 .slide {
	position: relative;
	flex: 0 0 88px;
	height: 506px;
	overflow: hidden;
	background: var(--c-black, #020202);
	color: var(--c-white, #fbfbf4);
	border-radius: 20px;
	will-change: flex-basis, height, border-radius;
}

.mwg_effect109 .slide:not(.on) {
	cursor: pointer;
}

.mwg_effect109 .content {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* the panel narrows around it, so the copy keeps the open width and is
	   clipped rather than reflowed */
	width: var(--panel-open, 736px);
	flex: 0 0 auto;
	padding: 44px;
	box-sizing: border-box;
}

.mwg_effect109 .title {
	font-size: 34px;
	line-height: 1.1;
	margin: 0;
}

.mwg_effect109 .bottom {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.mwg_effect109 .media {
	width: 100%;
	height: 232px;
	object-fit: cover;
	border-radius: 14px;
	display: block;
}

.mwg_effect109 .bottom p {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: rgba(251, 251, 244, 0.72);
}

/* the closed panel's label: laid out horizontally, then turned a quarter turn
   so it runs up the rail */
.mwg_effect109 .small-title {
	width: 506px;
	position: absolute;
	bottom: 0;
	left: 100%;
	transform: rotate(-90deg);
	transform-origin: 0 100%;
}

.mwg_effect109 .small-title p {
	margin: 0;
	padding: 0 32px;
	height: 88px;
	display: flex;
	align-items: center;
	font-size: 19px;
	white-space: nowrap;
}

/* the rows this content came from give way to the panels, and so does the
   card at the end of the list — the panels carry the section on their own */
#home .services .service.mwg-source,
#home .services .service-cta {
	display: none !important;
}
/* the row those cards were laid out in kept its height once they were gone */
#home .services .services-inner {
	height: 0 !important;
	min-height: 0 !important;
}

@media (max-width: 1099px) {
	.mwg_effect109 .content {
		padding: 32px;
	}
	.mwg_effect109 .title {
		font-size: 26px;
	}
	.mwg_effect109 .media {
		height: 190px;
	}
}

/* the section's heading is set like the About one: flush left, same size, and
   held off the edge by the same amount */
#home .services .services-title {
	font-size: 10vw;
	line-height: 1.05;
	/* the row of pictures follows straight under it */
	text-align: left;
	width: 100%;
	max-width: none;
	/* the design pushed it most of the way across the section; it now starts on
	   the same line as the About heading, at the section's own gutter */
	margin-left: 0 !important;
	padding-left: 0;
	box-sizing: border-box;
	margin-bottom: 1.5vh;
}
#home .services .services-header {
	width: 100%;
	display: block;
	text-align: left;
}

/* Only the heading is on the home page for now: the panels are off, the title
   stays as the opening of the section under About. */
#home .services .mwg_effect109 {
	display: none !important;
}
#home .services {
	/* the heading sits closer to the section above it and the row breathes
	   under it */
	padding-top: 0;
	padding-bottom: 4vh;
}

/* The site's own heading component splits the title and blurs it in as the
   section arrives. This one is set, not animated: it reads plainly from the
   first frame. */
#home .services .services-title,
#home .services .services-title .line,
#home .services .services-title .word,
#home .services .services-title span {
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
	will-change: auto !important;
}