/* "Let's talk" — the invitation between the last section and the footer. */

.fcg-cta {
	display: block;
	position: relative;
	width: 100%;
	/* the same horizontal inset the footer uses, so the rule and the arrow end
	   on the footer's edge instead of running past it to the right */
	padding: clamp(80px, 10vw, 180px) clamp(28px, 4vw, 64px) clamp(40px, 4vw, 72px);
	text-decoration: none;
	color: var(--c-black, #020202);
	/* the whole block answers the pointer, so it says so */
	cursor: pointer;
}

.fcg-cta-eyebrow {
	display: block;
	font-size: 1.3rem;
	letter-spacing: 0.06em;
	color: rgba(2, 2, 2, 0.5);
	margin-bottom: 2.4rem;
	transition: color 0.34s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.fcg-cta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4rem;
}

/* The wording is a window with two identical lines in it. At rest the first
   fills the window and the second waits below; on hover they both travel up by
   exactly one line, so the words leave and arrive in the same movement. The
   colour is left alone — the motion is the whole of the response. */
.fcg-cta-word {
	position: relative;
	display: block;
	overflow: hidden;
	font-size: clamp(48px, 11vw, 210px);
	font-weight: 300;
	line-height: 0.94;
	letter-spacing: -0.03em;
	white-space: nowrap;
	/* the window is one line tall, so the second copy is out of sight */
	height: 0.94em;
}
.fcg-cta-line {
	display: block;
	transition: transform 0.62s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.fcg-cta:hover .fcg-cta-line {
	transform: translateY(-100%);
}

/* the site's own arrow, drawn in whatever colour the line is */
.fcg-cta-arrow {
	flex: 0 0 auto;
	width: clamp(38px, 7vw, 118px);
	height: clamp(38px, 7vw, 118px);
	background: currentColor;
	-webkit-mask: var(--fcg-arrow) center / contain no-repeat;
	mask: var(--fcg-arrow) center / contain no-repeat;
	transition: transform 0.62s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}


/* --- the hover --- */

/* it leaves in the direction it points */
.fcg-cta:hover .fcg-cta-arrow {
	transform: translateX(0.9vw);
}

/* The site paints every span inside a hovered link blue, and both lines of the
   wording are spans — so the block still changed colour after the rule doing it
   here was taken out. The ink is held instead, for the wording, the small line
   above it and the arrow, which takes its colour from the same place. */
.fcg-cta,
.fcg-cta:hover,
.fcg-cta:hover .fcg-cta-word,
.fcg-cta:hover .fcg-cta-line,
.fcg-cta:focus-visible .fcg-cta-line {
	color: var(--c-black, #020202) !important;
}
.fcg-cta .fcg-cta-eyebrow,
.fcg-cta:hover .fcg-cta-eyebrow {
	color: rgba(2, 2, 2, 0.5) !important;
}
.fcg-cta .fcg-cta-arrow,
.fcg-cta:hover .fcg-cta-arrow {
	background: var(--c-black, #020202) !important;
}

@media (max-width: 1099px) {
	.fcg-cta-row {
		gap: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fcg-cta-line,
	.fcg-cta-arrow {
		transition: none;
	}
}