/* "What we do": the list of services, one piece of work beside it, and a note
   at the foot of the column saying what picking that service gets you.

   The section is laid on the same two columns as everything above it — the
   frame sits in the width of a project card, the list takes the other half — so
   the left and right edges line up all the way down the page. */

/* The heading, set like the About one: flush left, the same size, starting on
   the same line as everything else down the page. These rules travelled with
   the row that used to stand here; without them the design system's own
   centring came back. */
#home .services .services-title {
	font-size: 10vw;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-align: left;
	width: 100%;
	max-width: none;
	margin: 0;
	white-space: nowrap;
}
/* the site splits the heading and blurs it in as the section arrives; this one
   is set, not animated */
#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;
}
#home .services .services-header {
	width: 100%;
	display: block;
	text-align: left;
}
/* the row of cards this content was written for kept its height once it went */
#home .services .services-inner {
	height: 0 !important;
	min-height: 0 !important;
}

/* The whole section stands clear of what comes before it. It is held still
   while it is read, so it arrives at the middle of the screen and stays there;
   room above it is what keeps the heading from meeting the section above on the
   way in. */
#home .services.fcg-has-do {
	padding-top: 7vh;
	padding-bottom: 12vh;
}

#home .services .fcg-do {
	display: grid;
	grid-template-columns: calc((100% - 2.4rem) / 2) 1fr;
	column-gap: 2.4rem;
	/* both columns run the full height of the row, so the frame has a floor to
	   stand on — see below */
	align-items: stretch;
	/* the gap under the heading: the list and the frame start well below it, so
	   the heading reads as its own line rather than as the top of the list */
	margin-top: 7vh;
}

/* --- the frame --- */

/* The frame fills its half of the row exactly: the same width as the column of
   words across from it, the same height, the same top and bottom edges. The two
   halves are then one shape mirrored, which is what closes the gaps — it used
   to sit at three fifths of the width and hang from the floor, leaving a strip
   of empty page down its right side and another above it.

   It takes no aspect ratio here on purpose. Its height comes from the row, and
   the row's height comes from the list and its note across the way; a ratio of
   its own would fight that and reopen one gap or the other. The film inside is
   already set to cover, so it fills whatever shape the row hands it. */
#home .services .fcg-do-media {
	position: relative;
	grid-column: 1;
	align-self: start;
	width: 100%;
	/* the frame is the shape of the film in it: 1920 x 1080 */
	aspect-ratio: 16 / 9;
	border-radius: var(--r-media, 1.2rem);
	overflow: hidden;
	background: #f3f2ec;
}
/* every piece is stacked in the same frame; only the one being asked for is
   drawn, and it arrives by fading rather than by cutting */
#home .services .fcg-do-shot {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.42s;
}
#home .services .fcg-do-shot.is-on {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}
#home .services .fcg-do-shot video,
#home .services .fcg-do-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- the list and its note --- */

/* The indent is carried here rather than on the list, so the note underneath
   starts on the same line as the services above it. */
#home .services .fcg-do-side {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	padding-left: 4rem;
}
#home .services .fcg-do-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Set quiet, and brought forward only where the reader is. The whole list has
   to read as one block of text, so the lines are close and nothing about a line
   changes except its colour and the arrow — a size or a weight that moved would
   shift every line under it. */
#home .services .fcg-do-item {
	display: flex;
	align-items: center;
	font-size: 2.8rem;
	line-height: 1.34;
	letter-spacing: -0.01em;
	color: rgba(2, 2, 2, 0.28);
	/* not a pointer: these are not pressed, they are scrolled past */
	transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#home .services .fcg-do-item.is-on {
	color: var(--c-black, #020202);
}

/* The site's own arrow, drawn in whatever colour the line is. It is always in
   the line and always nothing wide, so on the one that is current it opens from
   the left and pushes the wording along in front of it — the same move the
   project captions make on hover, rather than a second thing appearing beside
   the list. */
#home .services .fcg-do-arrow {
	flex: 0 0 auto;
	width: 0;
	height: 2.2rem;
	opacity: 0;
	background: currentColor;
	-webkit-mask: var(--fcg-arrow) center / contain no-repeat;
	mask: var(--fcg-arrow) center / contain no-repeat;
	transition: width 0.34s cubic-bezier(0.4, 0, 0.2, 1),
		margin-right 0.34s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
#home .services .fcg-do-item.is-on .fcg-do-arrow {
	width: 2.2rem;
	margin-right: 0.9rem;
	opacity: 1;
}

/* The note sits at the foot of the column whatever the list above it is doing,
   which is what lines it up with the bottom of the frame. Every note is stacked
   in the same place and only the current one is drawn, so the box is as tall as
   the longest of them and never changes height as they swap — a box that grew
   and shrank would walk the frame beside it up and down the page. */
#home .services .fcg-do-note {
	position: relative;
	margin-top: auto;
	padding-top: 4rem;
	min-height: 11rem;
}
#home .services .fcg-do-copy {
	position: absolute;
	top: 4rem;
	left: 0;
	max-width: 46rem;
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.55;
	color: rgba(2, 2, 2, 0.62);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.38s;
}
#home .services .fcg-do-copy.is-on {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

@media (max-width: 1099px) {
	/* one column: the frame over the list */
	#home .services .fcg-do {
		grid-template-columns: 1fr;
		row-gap: 3rem;
	}
	#home .services .fcg-do-media,
	#home .services .fcg-do-side {
		grid-column: 1;
	}
	/* stacked, there is nothing beside it to take a height from, so here it
	   keeps a shape of its own */
	#home .services .fcg-do-media {
		width: 100%;
		align-self: auto;
		aspect-ratio: 16 / 9;
	}
	#home .services .fcg-do-side {
		padding-left: 0;
	}
	#home .services .fcg-do-item {
		font-size: 3.4rem;
	}
	#home .services .fcg-do-arrow {
		height: 2.6rem;
	}
	#home .services .fcg-do-item.is-on .fcg-do-arrow {
		width: 2.6rem;
	}
	#home .services .fcg-do-note {
		padding-top: 3rem;
		min-height: 13rem;
	}
	#home .services .fcg-do-copy {
		top: 3rem;
		font-size: 1.7rem;
		max-width: none;
	}
}