/* Featured Work in the requested arrangement: the panel across the full width,
   the projects two-up below it, each title under its picture with an arrow. */

.work .work-grid.fcg-work-original {
	display: none !important;
}

.fcg-work {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 2.2rem;
}

/* the panel keeps the section's own dark card treatment */
.fcg-work-panel {
	background: var(--c-grey-dark, #0e0e0e);
	border-radius: var(--r-box, 1.6rem);
	padding: 4.4rem;
	position: relative;
	/* copy on the left, the More Work button held at the right edge */
	display: flex;
	/* the card stretches to the panel's content height, so its inset matches
	   the panel padding on the top, right and bottom alike */
	align-items: stretch;
	justify-content: space-between;
	gap: 4rem;
	min-height: 34rem;
}
.fcg-work-panel .work-content {
	flex: 1 1 auto;
	min-width: 0;
	align-self: center;
}
/* the original panel took its light ink from the section's dark theme; this
   one sits outside that context, so it would inherit the page's black */
.fcg-work-panel,
.fcg-work-panel .work-title {
	color: var(--c-white, #fbfbf4);
}
.fcg-work-panel .work-text {
	color: rgba(251, 251, 244, 0.72);
}
.fcg-work-panel .work-title {
	font-size: 4.4rem;
	line-height: 1.1;
	margin-bottom: 1.6rem;
}
.fcg-work-panel .work-text {
	max-width: 46ch;
}
/* the panel's own media belongs to the old layout; the button stays */
.fcg-work-panel .media-wrapper,
.fcg-work-panel .work-content > .work-service {
	display: none;
}
/* only the button itself is wanted here, not the block's media frame */
.fcg-work-panel .btn-block .btn-block-inner {
	display: none;
}
/* the block returns as the inner card the rest of the site uses, with the
   button centred in it — the site's own component is then free to move the
   button around inside that box as the pointer travels over it */
.fcg-work-panel .btn-block {
	/* the design's own margins pushed it down and shortened the stretch */
	margin: 0 !important;
	flex: 0 0 40%;
	max-width: 46rem;
	height: auto;
	align-self: stretch;
	position: relative;
	inset: auto;
	background: #1a1a1a;
	border-radius: var(--r-box, 1.6rem);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
/* and it fills with the brand blue as the pointer enters, the way the block
   fills elsewhere on the site */
.fcg-work-panel .btn-block:before {
	display: block;
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--c-purple, #001eff);
	/* the fill sweeps down from the top rather than fading in */
	transform: translateY(-100%);
	transition: transform 0.45s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.fcg-work-panel .btn-block:hover:before {
	transform: translateY(0);
}
.fcg-work-panel .btn-block .btn-block-link {
	position: absolute;
	inset: 0;
}

.fcg-work-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.2rem 2.4rem;
}

.fcg-work-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.fcg-work-media {
	position: relative !important;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--r-media, 1.2rem);
	overflow: hidden;
	margin: 0;
}
.fcg-work-media .media-inner,
.fcg-work-media .media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* title under the picture, led by an arrow */
.fcg-work-cap {
	display: flex;
	align-items: center;
	/* the arrow carries its own spacing so that it disappears with it */
	gap: 0;
	margin-top: 1.4rem;
	font-size: 2rem;
	line-height: 1.2;
}
/* the arrow is not there at rest: it opens out of the title as the pointer
   arrives and closes again when it leaves */
.fcg-work-arrow {
	flex: 0 0 auto;
	width: 0;
	margin-right: 0;
	opacity: 0;
	transform: translateX(-0.8rem);
	transition: width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
		margin-right 0.38s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.24s ease, transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
	/* The mark that replaced the old line arrow is drawn solid and fills more of
	   its box, so at the size the thin one needed it read as the loudest thing
	   on the card. Smaller. */
	height: 1.9rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2036%2036%27%3E%3Cg%20transform%3D%27translate%2818%2018%29%20rotate%2845%29%20scale%281.4%29%20translate%28-18%20-18%29%27%3E%3Cpath%20d%3D%27M8.36393%2026.3642L7.65682%2027.0713L9.07103%2028.4855L9.77814%2027.7784L8.36393%2026.3642ZM28.1629%209.39362C28.5534%209.00309%2028.5534%208.36993%2028.1629%207.9794C27.7724%207.58888%2027.1392%207.58888%2026.7487%207.9794L28.1629%209.39362ZM14.0208%207.9794L13.3137%207.2723L11.8995%208.68651L12.6066%209.39362L14.0208%207.9794ZM27.5959%209.64587C28.1257%209.49003%2028.4289%208.93417%2028.273%208.40433C28.1172%207.87449%2027.5613%207.57131%2027.0315%207.72715L27.5959%209.64587ZM26.6776%2023.4647L27.3847%2024.1718L28.7989%2022.7576L28.0918%2022.0505L26.6776%2023.4647ZM9.77814%2027.7784L28.0918%209.46474L26.6776%208.05053L8.36393%2026.3642L9.77814%2027.7784ZM28.0918%209.46474L28.1629%209.39362L26.7487%207.9794L26.6776%208.05053L28.0918%209.46474ZM12.6066%209.39362C13.6477%2010.4348%2015.2045%2010.8668%2016.7421%2011.0237C18.311%2011.1838%2020.0463%2011.0752%2021.6341%2010.8716C23.2292%2010.6671%2024.7161%2010.3613%2025.8012%2010.1077C26.3448%209.98072%2026.7902%209.86621%2027.101%209.78305C27.2565%209.74146%2027.3785%209.70768%2027.4624%209.68404C27.5044%209.67222%2027.5369%209.66293%2027.5593%209.65648C27.5705%209.65325%2027.5792%209.65073%2027.5853%209.64895C27.5884%209.64806%2027.5908%209.64735%2027.5926%209.64684C27.5934%209.64658%2027.5942%209.64637%2027.5947%209.64621C27.595%209.64613%2027.5953%209.64604%2027.5954%209.646C27.5957%209.64593%2027.5959%209.64587%2027.3137%208.68651C27.0315%207.72715%2027.0316%207.72711%2027.0317%207.72709C27.0317%207.7271%2027.0317%207.72709%2027.0317%207.7271C27.0315%207.72713%2027.0313%207.72721%2027.0308%207.72734C27.03%207.72759%2027.0285%207.72804%2027.0263%207.72867C27.022%207.72992%2027.0151%207.73191%2027.0058%207.73461C26.9871%207.74%2026.9584%207.74819%2026.9204%207.7589C26.8443%207.78032%2026.7307%207.81179%2026.5842%207.85099C26.291%207.92942%2025.8664%208.03864%2025.3461%208.16021C24.3034%208.40384%2022.8869%208.69464%2021.3797%208.88787C19.8653%209.08205%2018.2994%209.17228%2016.9451%209.03407C15.5594%208.89267%2014.5706%208.52924%2014.0208%207.9794L12.6066%209.39362ZM27.3847%208.75764C26.4642%208.36693%2026.4641%208.3672%2026.4639%208.36751C26.4639%208.36766%2026.4637%208.368%2026.4636%208.36831C26.4633%208.36891%2026.463%208.36967%2026.4626%208.37058C26.4619%208.3724%2026.4608%208.37481%2026.4596%208.37781C26.4571%208.38382%2026.4536%208.39218%2026.4491%208.40285C26.4403%208.42418%2026.4277%208.45472%2026.4118%208.49399C26.3801%208.57253%2026.335%208.68608%2026.2796%208.83082C26.1689%209.12016%2026.0169%209.53502%2025.8485%2010.0448C25.5126%2011.0618%2025.1069%2012.4697%2024.8353%2014.0209C24.5649%2015.5657%2024.4199%2017.2945%2024.6331%2018.9388C24.8466%2020.585%2025.4293%2022.2165%2026.6776%2023.4647L28.0918%2022.0505C27.2543%2021.213%2026.7941%2020.0516%2026.6165%2018.6817C26.4386%2017.3099%2026.5544%2015.7994%2026.8054%2014.3657C27.0553%2012.9383%2027.4317%2011.6284%2027.7476%2010.6722C27.9051%2010.1954%2028.0464%209.80982%2028.1476%209.54538C28.1981%209.41323%2028.2386%209.31154%2028.2659%209.24407C28.2795%209.21034%2028.2899%209.18518%2028.2966%209.16907C28.2999%209.16101%2028.3023%209.15521%2028.3038%209.15174C28.3045%209.15%2028.305%209.14884%2028.3052%209.14828C28.3054%209.14799%2028.3054%209.14785%2028.3054%209.14786C28.3054%209.14787%2028.3054%209.14799%2028.3054%209.14799C28.3053%209.14815%2028.3052%209.14834%2027.3847%208.75764Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2036%2036%27%3E%3Cg%20transform%3D%27translate%2818%2018%29%20rotate%2845%29%20scale%281.4%29%20translate%28-18%20-18%29%27%3E%3Cpath%20d%3D%27M8.36393%2026.3642L7.65682%2027.0713L9.07103%2028.4855L9.77814%2027.7784L8.36393%2026.3642ZM28.1629%209.39362C28.5534%209.00309%2028.5534%208.36993%2028.1629%207.9794C27.7724%207.58888%2027.1392%207.58888%2026.7487%207.9794L28.1629%209.39362ZM14.0208%207.9794L13.3137%207.2723L11.8995%208.68651L12.6066%209.39362L14.0208%207.9794ZM27.5959%209.64587C28.1257%209.49003%2028.4289%208.93417%2028.273%208.40433C28.1172%207.87449%2027.5613%207.57131%2027.0315%207.72715L27.5959%209.64587ZM26.6776%2023.4647L27.3847%2024.1718L28.7989%2022.7576L28.0918%2022.0505L26.6776%2023.4647ZM9.77814%2027.7784L28.0918%209.46474L26.6776%208.05053L8.36393%2026.3642L9.77814%2027.7784ZM28.0918%209.46474L28.1629%209.39362L26.7487%207.9794L26.6776%208.05053L28.0918%209.46474ZM12.6066%209.39362C13.6477%2010.4348%2015.2045%2010.8668%2016.7421%2011.0237C18.311%2011.1838%2020.0463%2011.0752%2021.6341%2010.8716C23.2292%2010.6671%2024.7161%2010.3613%2025.8012%2010.1077C26.3448%209.98072%2026.7902%209.86621%2027.101%209.78305C27.2565%209.74146%2027.3785%209.70768%2027.4624%209.68404C27.5044%209.67222%2027.5369%209.66293%2027.5593%209.65648C27.5705%209.65325%2027.5792%209.65073%2027.5853%209.64895C27.5884%209.64806%2027.5908%209.64735%2027.5926%209.64684C27.5934%209.64658%2027.5942%209.64637%2027.5947%209.64621C27.595%209.64613%2027.5953%209.64604%2027.5954%209.646C27.5957%209.64593%2027.5959%209.64587%2027.3137%208.68651C27.0315%207.72715%2027.0316%207.72711%2027.0317%207.72709C27.0317%207.7271%2027.0317%207.72709%2027.0317%207.7271C27.0315%207.72713%2027.0313%207.72721%2027.0308%207.72734C27.03%207.72759%2027.0285%207.72804%2027.0263%207.72867C27.022%207.72992%2027.0151%207.73191%2027.0058%207.73461C26.9871%207.74%2026.9584%207.74819%2026.9204%207.7589C26.8443%207.78032%2026.7307%207.81179%2026.5842%207.85099C26.291%207.92942%2025.8664%208.03864%2025.3461%208.16021C24.3034%208.40384%2022.8869%208.69464%2021.3797%208.88787C19.8653%209.08205%2018.2994%209.17228%2016.9451%209.03407C15.5594%208.89267%2014.5706%208.52924%2014.0208%207.9794L12.6066%209.39362ZM27.3847%208.75764C26.4642%208.36693%2026.4641%208.3672%2026.4639%208.36751C26.4639%208.36766%2026.4637%208.368%2026.4636%208.36831C26.4633%208.36891%2026.463%208.36967%2026.4626%208.37058C26.4619%208.3724%2026.4608%208.37481%2026.4596%208.37781C26.4571%208.38382%2026.4536%208.39218%2026.4491%208.40285C26.4403%208.42418%2026.4277%208.45472%2026.4118%208.49399C26.3801%208.57253%2026.335%208.68608%2026.2796%208.83082C26.1689%209.12016%2026.0169%209.53502%2025.8485%2010.0448C25.5126%2011.0618%2025.1069%2012.4697%2024.8353%2014.0209C24.5649%2015.5657%2024.4199%2017.2945%2024.6331%2018.9388C24.8466%2020.585%2025.4293%2022.2165%2026.6776%2023.4647L28.0918%2022.0505C27.2543%2021.213%2026.7941%2020.0516%2026.6165%2018.6817C26.4386%2017.3099%2026.5544%2015.7994%2026.8054%2014.3657C27.0553%2012.9383%2027.4317%2011.6284%2027.7476%2010.6722C27.9051%2010.1954%2028.0464%209.80982%2028.1476%209.54538C28.1981%209.41323%2028.2386%209.31154%2028.2659%209.24407C28.2795%209.21034%2028.2899%209.18518%2028.2966%209.16907C28.2999%209.16101%2028.3023%209.15521%2028.3038%209.15174C28.3045%209.15%2028.305%209.14884%2028.3052%209.14828C28.3054%209.14799%2028.3054%209.14785%2028.3054%209.14786C28.3054%209.14787%2028.3054%209.14799%2028.3054%209.14799C28.3053%209.14815%2028.3052%209.14834%2027.3847%208.75764Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

@media (max-width: 899px) {
	.fcg-work-cards {
		grid-template-columns: minmax(0, 1fr);
	}
	.fcg-work-panel {
		padding: 3.2rem 2.4rem 3.6rem;
	}
}

/* The site-wide rule paints hovered links blue; on a project card that catches
   the caption and the arrow with it. An id-led selector outweighs it. */
#home .fcg-work-card:hover,
#home .fcg-work-card:hover span,
/* not the badges: they carry their own blue ground and want white lettering,
   and this rule — meant to hold the caption black over a photograph — was
   catching them because they are paragraphs too */
#home .fcg-work-card:hover p:not(.project-text),
#home .fcg-work-card:hover .fcg-work-cap,
#home .fcg-work-card:hover .fcg-work-arrow {
	color: var(--c-black, #020202) !important;
}
#home .fcg-work-card:hover .fcg-work-arrow {
	background: currentColor !important;
}

.fcg-work-card:hover .fcg-work-arrow {
	width: 1.9rem;
	margin-right: 1rem;
	opacity: 1;
	transform: none;
}


/* --- the same caption on the All Work page ---------------------------------
   The landing carries the client's name under each picture, led by an arrow
   that opens on hover; the work page had nothing under its cards.

   The name has to live inside the card, not hang below it. The site reveals
   each card by animating a clip-path on it, and a clip-path cuts away anything
   outside the box it is given — so a caption hung underneath vanished the
   moment its card was revealed, which is why only the two cards still waiting
   their turn ever showed one.

   So the card is given its own height instead of a fixed one, its picture keeps
   the height the card used to have, and the name sits under it in the flow. The
   link is still stretched across the whole card, so the name is part of what
   you click. */
#work .work-grid .project.work-grid-project {
	height: auto !important;
	display: flex;
	flex-direction: column;
}
#work .work-grid .project.work-grid-project .project-media {
	position: relative !important;
	flex: 0 0 auto;
	width: 100%;
	height: 50rem;
}
#work .work-grid .project.work-grid-project .fcg-grid-cap {
	margin-top: 1.2rem;
	color: var(--c-black, #020202);
	white-space: nowrap;
}

/* The caption sits under the card's link, and the site paints a hovered link
   blue. That is right for a line of text in a paragraph and wrong for a name
   under a photograph — the landing already holds its own captions black for the
   same reason. */
#work .work-grid .project.work-grid-project:hover,
#work .work-grid .project.work-grid-project:hover .fcg-grid-cap,
#work .work-grid .project.work-grid-project:hover .fcg-work-arrow,
#work .work-grid .project-link:hover {
	color: var(--c-black, #020202) !important;
}
#work .work-grid .project.work-grid-project:hover .fcg-work-arrow {
	width: 1.9rem;
	margin-right: 1rem;
	opacity: 1;
	transform: none;
	background: currentColor !important;
}

/* Room between the last row and the footer. The boxed invitation that used to
   close this page was carrying that space; with it gone the cards ran almost
   straight into the panel. */
#work .work-wrapper {
	padding-bottom: 12vh;
}

@media (max-width: 1099px) {
	/* The cards keep the page's own side margin. This column replaced the
	   design's horizontal scroller, which carried its own padding — mine had
	   none, so on a phone every card ran from edge to edge and the project's
	   name underneath started hard against the left of the screen, out of line
	   with the heading and the paragraph above it. Two rem is what the design
	   gives everything else at this width. */
	#home .fcg-work {
		padding: 0 2rem;
	}
}

@media (max-width: 1099px) {
	/* The intro — heading, paragraph, More Work — is laid out absolutely for the
	   desktop, where it sits beside the row of cards. On one column that
	   arrangement collapses: both wrappers measure nothing at all, so their
	   children are placed against an ancestor rather than against each other.
	   The heading came out in a strip a hundred and sixty pixels wide with
	   "Featured" running off the end of it, the paragraph fell into a column ten
	   lines deep, and the button crossed the panel behind it.

	   Put back in the flow they stack the way everything else on the page does,
	   and the design's own mobile rules — which already give each of the three a
	   two rem margin — take over. */
	#home .work .work-inner,
	#home .work .work-content {
		position: static;
		width: auto;
		height: auto;
	}
}

@media (max-width: 1099px) {
	/* The Showreel section on a phone.

	   The desktop version of this section is a full-screen panel that is held
	   still and grown as you scroll, and its geometry was reaching the phone
	   intact: the panel sat 270px wide in a 375px screen, the paragraph beside
	   it 195px, and the section stood 974px tall around a panel 188px high — a
	   small box adrift in an empty screen. The panel itself had collapsed to a
	   two-pixel line, because the ratio it is shaped by had no width to work
	   from.

	   Everything here is stated outright rather than adjusted, since the widths
	   being overridden come from no rule this sheet can see. The column runs the
	   full width of the screen inside the same 2rem margin the work cards use,
	   and the panel fills it at the screen ratio of the film inside. */
	#home .exp .exp-content-wrapper {
		padding-top: 4rem;
		padding-bottom: 2rem;
	}
	#home .exp .exp-text-wrapper,
	#home .exp .exp-btn-block-wrapper {
		width: 100%;
		max-width: none;
		aspect-ratio: auto;
	}
	#home .exp .exp-btn-block-wrapper {
		padding: 4rem 2rem;
		margin-top: 0;
	}
	#home .exp .exp-btn-block-wrapper .btn-block {
		width: 100%;
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
	/* the film is laid over the whole panel, and the button sits on top of it */
	#home .exp .exp-btn-block-wrapper .btn-block .btn-block-inner {
		position: absolute;
		inset: 0;
	}
}

/* the card is the positioning context for the badge row */
#home .fcg-work-card { position: relative; }