/* Section: Big CTA — Figma 4120:4018 */

.section-big-cta {
	background: var(--paper);
}

/* Title and button share one measure so the button runs the full width of the
   headline above it. The frame draws the button narrower than the title (558
   against 670); matching them is a deliberate departure. */
.section-big-cta__container {
	--cta-measure: 55.8%; /* 670 / 1200 */

	display: flex;
	flex-direction: column;
	align-items: center;
	width: var(--content);
	max-width: 100%;
	margin-inline: auto;
	padding: 119px 0 115px; /* 52 container + 63 outer in the frame */
	text-align: center;
}

.section-big-cta__title {
	max-width: var(--cta-measure);
	margin: 0 0 52px;
	font-size: var(--wp--preset--font-size--heading-xl);
	font-weight: 700;
	line-height: 1.19;
	letter-spacing: -0.026em;
	text-wrap: balance;
}

.section-big-cta__highlight {
	color: var(--mars);
}

.section-big-cta__rest {
	color: var(--harbor);
}

/* Overrides the component's fixed 558px width. Scoped to the container so it
   outranks .btn--large-outline, which loads after this file.

   big-cta.js sets --cta-button-width to the headline's longest painted line,
   which is what the button is meant to match. The headline's box is wider than
   that — balanced text stops short of both edges — so the box width is only
   the fallback for when the script has not run. */
.section-big-cta__container .section-big-cta__button {
	width: var(--cta-button-width, var(--cta-measure));
	max-width: 100%;
}

@media (max-width: 782px) {
	.section-big-cta__container {
		--cta-measure: 100%;

		padding-block: 72px;
	}

	/* Narrow enough that matching the headline's longest line would leave a
	   stubby button in a wide column — it runs the full width instead, so the
	   measured value is deliberately ignored here. */
	.section-big-cta__container .section-big-cta__button {
		width: 100%;
	}

	.section-big-cta__title {
		margin-bottom: 36px;
	}
}

/* Stacked band ------------------------------------------------------------
 *
 * About (2219:2613), Partners (2261:2139) and the Get in touch section
 * (6010:4347) are the same object: a Mars sentence, a Steel one under it in a
 * fixed-height block, and — on two of the three — the large outlined button.
 * The headline runs the whole column here rather than the 670 measure, and the
 * button keeps the component's own 558 rather than tracking the headline.
 */

.section-big-cta--stacked .section-big-cta__container {
	--cta-measure: 100%;
}

.section-big-cta--stacked .section-big-cta__title {
	margin-bottom: 0;
	color: var(--mars);
	text-wrap: wrap;
}

/* 42 / 52 on two of the three frames, 58 / 69 on About. Pure vw rather than a
   clamp for the same reason the display size is: the clamp floors at 26 just
   above the 1024 handover, so the band's boxes would keep shrinking after its
   type had stopped. */
.section-big-cta--compact .section-big-cta__title {
	font-size: 2.506vw; /* 42 */
	line-height: 1.238; /* 52 */
	letter-spacing: -0.025em; /* -1.04 */
}

/* About's band (2219:2613) is built from two frames — 111 then 160 — each
   holding a 152-tall container that centres its own text and is pinned to the
   frame's top edge. On the headline that container is taller than its frame, so
   the line lands 41.5 down rather than centred at 21; on the sub-heading it is
   shorter, so the text sits 4 higher than centring would put it. Reproducing
   the box literally (152 tall, then pulled back to the frame's height) is what
   keeps both at the frame's own offsets. */
.section-big-cta--display .section-big-cta__title {
	display: flex;
	align-items: center;
	justify-content: center;

	/* The frame's own 918 — what decides where a longer line breaks, so it is
	   measured against the frame rather than against --content. The column is
	   deliberately wider than frame-proportional below 1676 (it walks its
	   gutters in more slowly), and inheriting that would re-break the text. */
	max-width: 54.773vw; /* 918 */
	height: 9.069vw; /* 152 */
	margin-bottom: -2.446vw; /* the 152 measure box, pulled back to the 111 frame */

	/* Pure vw rather than the heading-xl clamp: the clamp stops scaling before
	   the band does, and a band whose boxes shrink while its type does not is a
	   different composition, not a smaller one. */
	font-size: 3.461vw; /* 58 */
	line-height: 1.19; /* 69 */
	letter-spacing: -0.026em; /* -1.52 */
}

/* The frame gives this its own fixed block rather than a margin — 180 on the
   bands that carry a button, 160 on About, which does not — and inside that
   block it centres the copy in a 152 container pinned to the top (6010:4353
   holds 6010:4354, and Partners repeats it at 2261:2144). Centring in the 180
   instead drops the text 14 too low, so the 152 is drawn literally and the
   remainder carried as margin. Shares of the frame, not px: the band is a
   scaled copy of the frame down to the handover. */
.section-big-cta__subheading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 9.069vw; /* 152 */
	max-width: 71.6vw; /* 1200 — the frame's own measure, which is what decides
	                      where the second line breaks; --content is wider than
	                      frame-proportional below 1676 and would re-wrap it. */
	margin: 0 0 1.671vw; /* the 152 box, out to the 180 frame */
	color: var(--steel);
	font-size: 1.671vw; /* 28 — see the headline above on why not the token */
	font-weight: 700;
	line-height: 1.26;
}

.section-big-cta--pad-intro .section-big-cta__subheading {
	margin-bottom: 0.477vw; /* the 152 measure box inside the 160 frame */
}

/* Every vertical metric in this band is its share of the 1676 frame, so the
   whole thing is a scaled copy of the frame at any width rather than a fixed
   355 that grows proportionally deeper as the screen narrows:
   1.909 + 6.623 (the 111 frame) + 9.547 (the 160 frame) + 3.103 = 21.182vw,
   which is the frame's own 355 / 1676. Below 1024 it hands over to the
   readable ramp, as the hero does. */
.section-big-cta--pad-intro .section-big-cta__container {
	padding: 1.909vw 0 3.103vw; /* 32 / 52 */
}

/* Partners (2261:2138) is 495 tall: 50 above the title frame's own 32, the 52
   line, the 180 sub-heading block, the 81 button, then 100. Shares of the 1676
   frame rather than px, so the band is a scaled copy at any width instead of a
   fixed block that grows proportionally deeper as the screen narrows. */
.section-big-cta--pad-band .section-big-cta__container {
	padding: 4.893vw 0 5.967vw; /* 50 outer + 32 inner, then 100 */
}

/* The frame gives the headline a 1254 box inside the 1200 column and lets it
   overhang by 27 each side — that is what decides where a longer line breaks,
   so it is measured against the frame rather than against --content. */
.section-big-cta--pad-band .section-big-cta__title {
	max-width: 74.821vw; /* 1254 */
}

.section-big-cta--pad-touch .section-big-cta__container {
	padding: 5.967vw 0 6.862vw; /* 100 top; 52 container + 63 outer below */
}

/* 1200, not the wider --content: the headline is one line in the frame and a
   column that walks its gutters in more slowly would break it. */
.section-big-cta--pad-touch .section-big-cta__title {
	max-width: 71.6vw; /* 1200 */
}

/* Its own 558, not the headline's longest line — this outranks both the
   container rule above and the measured value from big-cta.js. */
.section-big-cta--stacked .section-big-cta__container .section-big-cta__button {
	width: 46.5%; /* 558 / 1200 */
	min-width: 320px;
}

/* The Get in touch band (6010:4347) carries no fill of its own, so it sits on
   white — unlike the Paper bands above it. On the Team page it follows the
   join band (2246:2779), which is Paper, and the frame draws that edge. */
.section-big-cta--pad-touch {
	background: #fff;
}

/* Get in touch (6010:4356) is the button exactly as the frame draws it —
   558 x 81, a 32 label on a 24 line, 26 of padding, a 10 radius and a 2 rule.
   The shared .btn--large-outline still runs 40% taller with a 10% smaller
   label by request, so the frame-exact box is scoped here rather than pushed
   back onto the component, which Partners also uses. Shares of the frame so
   the box tracks the type. */
.section-big-cta--pad-touch .section-big-cta__container .section-big-cta__button {
	width: 33.294vw; /* 558 */
	min-width: 0;
	height: 4.833vw; /* 81 */
	padding: 0 1.551vw; /* 26 */
	border-color: var(--blue-main);
	border-radius: 0.597vw; /* 10 */
	color: var(--blue-main);
	font-size: 1.909vw; /* 32 */
	line-height: 0.75; /* 24 */
	white-space: nowrap;
}

.section-big-cta--pad-touch .section-big-cta__button:hover,
.section-big-cta--pad-touch .section-big-cta__button:focus-visible {
	background: var(--blue-main);
	color: var(--paper);
}

/* Partners' button (2261:2147) is the same frame-exact box as Get in touch's,
   in Harbor rather than Blue - Main, which is what .btn--large-outline already
   carries. Scoped here for the same reason: the shared component runs 40%
   taller with a 10% smaller label by request, and HOME still uses it. */
.section-big-cta--pad-band .section-big-cta__container .section-big-cta__button {
	width: 33.294vw; /* 558 */
	min-width: 0;
	height: 4.833vw; /* 81 */
	padding: 0 1.551vw; /* 26 */
	border-radius: 0.597vw; /* 10 */
	font-size: 1.909vw; /* 32 */
	line-height: 0.75; /* 24 */
	white-space: nowrap;
}

@media (max-width: 1024px) {
	/* The sub-heading's fixed block and the band's own padding are both drawn
	   for a 1676 frame; together they leave a third of a tablet screen empty. */
	.section-big-cta__subheading,
	.section-big-cta--pad-intro .section-big-cta__subheading {
		min-height: 0;
		height: auto;
		margin-bottom: 0;
		padding-block: 32px;
		max-width: none;
		font-size: var(--fs-28);
	}

	.section-big-cta--display .section-big-cta__title,
	.section-big-cta--compact .section-big-cta__title {
		min-height: 0;
		max-width: 100%;
		height: auto;
		margin-bottom: 0;
		font-size: var(--wp--preset--font-size--heading-xl);
	}

	.section-big-cta--pad-intro .section-big-cta__container {
		padding-block: 32px 40px;
	}

	.section-big-cta--pad-band .section-big-cta__container {
		padding-block: 64px 72px;
	}

	.section-big-cta--pad-band .section-big-cta__title {
		max-width: 100%;
	}

	.section-big-cta--pad-band .section-big-cta__container .section-big-cta__button {
		width: min(558px, 100%);
		height: 81px;
		padding: 0 26px;
		border-radius: 10px;
		font-size: var(--fs-32);
		line-height: 1.5;
	}

	.section-big-cta--pad-touch .section-big-cta__container {
		padding-block: 72px 80px;
	}

	.section-big-cta--pad-touch .section-big-cta__title {
		max-width: 100%;
		font-size: var(--wp--preset--font-size--heading-xl);
	}

	.section-big-cta--pad-touch .section-big-cta__container .section-big-cta__button {
		width: min(558px, 100%);
		height: 81px;
		padding: 0 26px;
		border-radius: 10px;
		font-size: var(--fs-32);
		line-height: 1.5;
	}
}

@media (max-width: 782px) {
	.section-big-cta--stacked .section-big-cta__container .section-big-cta__button {
		width: 100%;
		min-width: 0;
	}

	.section-big-cta--pad-touch .section-big-cta__container .section-big-cta__button,
	.section-big-cta--pad-band .section-big-cta__container .section-big-cta__button {
		width: 100%;
		height: 64px;
		font-size: var(--wp--preset--font-size--body-lg);
	}

	.section-big-cta__subheading,
	.section-big-cta--pad-intro .section-big-cta__subheading {
		min-height: 0;
		height: auto;
		margin-bottom: 0;
		padding-block: 24px;
		max-width: none;
		font-size: var(--fs-28);
	}

	.section-big-cta--display .section-big-cta__title,
	.section-big-cta--compact .section-big-cta__title {
		min-height: 0;
		max-width: 100%;
		height: auto;
		margin-bottom: 0;
		font-size: var(--wp--preset--font-size--heading-xl);
	}

	.section-big-cta--pad-intro .section-big-cta__container,
	.section-big-cta--pad-band .section-big-cta__container,
	.section-big-cta--pad-touch .section-big-cta__container {
		padding-block: 56px 64px;
	}
}

/* CTA sweep ---------------------------------------------------------------
 *
 * Reproduces 3V_CTA-anim_OPTION 1.mp4, measured frame by frame off the 1676
 * export (538 deep, 29.97fps, so a frame is 33.4ms). Unlike OPTION 2, which
 * dropped a Blue-Main mark down through the band, this one slides a white
 * mark across it from the left and parks it on the right edge, uncovering the
 * copy in its wake:
 *
 *   f28  the mark's leading corner enters the left edge
 *   f36  its trailing edge clears the headline's first letters
 *   f37  the leading corner reaches the right edge
 *   f41  the headline is whole again
 *   f60  the mark settles, a sliver of it still showing at the right
 *
 * That is 32 frames — 1068ms — and it is used at 1:1 here rather than
 * stretched the way OPTION 2 was. The pass only reads as fast in its first
 * third; the export already spends the remaining two thirds easing to a stop,
 * which is where the extra time OPTION 2 had to be given went anyway.
 *
 * The mark's left edge, frame by frame from f28, sits at −1060, −975, −838,
 * −632, −360, −74, 177, 384, 553, 695, 814, 916, 1004, 1080, 1147, 1206,
 * 1258, 1304, 1344, 1380, 1410, 1438, 1462, 1482, 1500, 1515, 1528, 1538,
 * 1546, 1552, 1556, 1559, 1560 — one long ease with its peak five frames in
 * and a very long tail. The curve below is a least-squares fit to those 33
 * positions and lands within 1.4px RMS over 2620px of travel; no stock
 * keyword is close, and an ease-out stalls the entry.
 *
 * Everything is 1676-relative, the mark included (1078 wide, so 64.32vw at an
 * aspect of 1.7505 — 616 tall against a 606-deep band, which is the overflow
 * the export has). The one measurement that cannot be is the slant of the
 * mark's edge: it runs 0.388 across for every 1 down, so how far the reveal
 * leans depends on how deep this band happens to be, which the headline's
 * wrap decides. big-cta.js measures it and hands it over; the vw fallback is
 * the frame's own 606.
 */

.section-big-cta--anim {
	position: relative;
	overflow: hidden;
}

.section-big-cta--anim .section-big-cta__container {
	position: relative;
	z-index: 1;
}

/* The mark passes in front of the copy: in the source the headline is hidden
   where the two overlap, not showing through it.

   Its resting place is the end of the pass, not off-stage — the export leaves
   a sliver of it against the right edge and that is the band's still state. A
   band whose script never ran therefore looks like a band that has already
   played, rather than one missing a piece. */
.section-big-cta__mark {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 64.32vw; /* 1078 */
	/* The export's mark is white on the band, where OPTION 2's was Blue Main.
	   No alias for it in main.css, so the preset is read directly. */
	color: var(--wp--preset--color--white);
	pointer-events: none;
	transform: translateX(93.079vw); /* 1560 */
}

.section-big-cta__mark .icon,
.section-big-cta__mark svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Armed by big-cta.js, so with no script the band is simply the band: the
   headline and the button are painted and the mark sits where it settles. */
.section-big-cta--anim.is-armed .section-big-cta__mark {
	opacity: 0;
}

/* Clipped to nothing until the mark uncovers it. The polygon carries the
   mark's own numbers and the mark's own curve, so the two track each other
   exactly rather than being timed against each other by hand — the edge the
   copy appears along is the edge of the thing that is covering it.

   Those numbers are the frame's, and this box is inset from the frame by the
   gutter, so the gutter comes back off them. big-cta.js measures it; the vw
   fallback is the frame's own 238. Reading it off the container's own 50%
   instead would have been a viewport width, and a viewport width counts the
   scrollbar the section's box does not. */
.section-big-cta--anim.is-armed .section-big-cta__container {
	clip-path: polygon(
		-200vw 0,
		calc(-63.246vw - var(--cta-wipe-origin, 14.2vw)) 0,
		calc(-63.246vw - var(--cta-wipe-origin, 14.2vw) + var(--cta-wipe-slant, 14.021vw)) 100%,
		-200vw 100%
	);
}

/* The prototype runs the sweep in 1068ms; the client asked for it slower
   (Sep 2026), so it takes twice that. Same curve — the mark and the copy it
   uncovers still share one clock, so they stay locked to each other. */
.section-big-cta--anim.is-playing .section-big-cta__mark {
	animation: threev-cta-sweep 2136ms cubic-bezier(0.221, 0.187, 0.049, 0.996) both;
}

.section-big-cta--anim.is-playing .section-big-cta__container {
	animation: threev-cta-uncover 2136ms cubic-bezier(0.221, 0.187, 0.049, 0.996) both;
}

@keyframes threev-cta-sweep {
	from {
		/* Leading corner on the frame's left edge: the first frame that shows
		   any of the mark shows a corner, not a whole mark. Opacity is set at
		   both stops because the armed state hides the mark, and a keyframe
		   list that does not mention a property leaves that rule standing. */
		transform: translateX(-63.246vw); /* -1060 */
		opacity: 1;
	}

	to {
		transform: translateX(93.079vw); /* 1560 */
		opacity: 1;
	}
}

@keyframes threev-cta-uncover {
	from {
		clip-path: polygon(
			-200vw 0,
			calc(-63.246vw - var(--cta-wipe-origin, 14.2vw)) 0,
			calc(-63.246vw - var(--cta-wipe-origin, 14.2vw) + var(--cta-wipe-slant, 14.021vw)) 100%,
			-200vw 100%
		);
	}

	to {
		clip-path: polygon(
			-200vw 0,
			calc(93.079vw - var(--cta-wipe-origin, 14.2vw)) 0,
			calc(93.079vw - var(--cta-wipe-origin, 14.2vw) + var(--cta-wipe-slant, 14.021vw)) 100%,
			-200vw 100%
		);
	}
}

/* Stacked, the band is a different shape and the mark would be wider than the
   column it crosses. The copy still arrives; it fades rather than being
   uncovered, since there is nothing left to uncover it. */
@media (max-width: 1024px) {
	.section-big-cta__mark {
		display: none;
	}

	.section-big-cta--anim.is-armed .section-big-cta__container {
		clip-path: none;
		opacity: 0;
	}

	.section-big-cta--anim.is-playing .section-big-cta__container {
		animation: threev-cta-appear 490ms linear both; /* slowed with the sweep above */
	}

	@keyframes threev-cta-appear {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
}

/* Nothing moves, nothing is hidden — the script leaves the band alone here as
   well, so this is only the belt to that pair of braces. The mark stays: its
   still position is part of the band, not part of the animation. */
@media (prefers-reduced-motion: reduce) {
	.section-big-cta__mark {
		opacity: 1;
		animation: none;
		transform: translateX(93.079vw);
	}

	.section-big-cta--anim.is-armed .section-big-cta__container,
	.section-big-cta--anim.is-playing .section-big-cta__container {
		clip-path: none;
		opacity: 1;
		animation: none;
	}
}