/* Careers (template-careers.php). Figma node 3489:10929.
   See the template's own top comment for how the pinned-heading +
   outline-over-video effect works — it's plain CSS (sticky + z-index +
   a transparent-fill/stroked text duplicate), no JS involved. */

.careers-hero {
	position: relative;
	background: var(--color-white);
}

/* Needs the exact same "full-height absolute wrap, sticky element nested
   inside" structure as .careers-hero__pin-wrap, for the exact same reason
   — this fade must stay fixed at the top of the viewport throughout the
   scroll (like the heading), not just sit at a fixed point in the document
   (which would scroll away in lockstep with the equally-unpinned arrow,
   never actually crossing it — that was the first attempt's bug). Sitting
   inside .careers-hero__stage (z-index:10) means it automatically paints
   above the non-pinned .careers-hero__arrow (z-index:4, a sibling of the
   stage, not nested in it) without needing its own z-index — only needs
   to stay below the solid/outline heading layers, which its plain (auto)
   stacking already does since they carry explicit z-index. */
.careers-hero__fade-wrap {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Width/height/fade-stop match Figma's "Rectangle 405" (152×525px, white
   → transparent from 90.865%). */
.careers-hero__fade {
	position: sticky;
	top: 0;
	width: 9.5rem;
	height: 33rem;
	margin-inline: auto;
	background: linear-gradient(to bottom, var(--color-white) 0%, var(--color-white) 90.865%, rgba(255, 255, 255, 0) 100%);
}

.careers-hero__arrow {
	position: absolute;
	top: 33rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	display: block;
	width: 3.6875rem;
	height: 3.6875rem;
}

.careers-hero__arrow img {
	display: block;
	width: 100%;
	height: 100%;
}

/* This height controls two things at once: how much scroll room the
   pinned heading gets before it releases (release happens at roughly
   height minus the pin's own 35.75rem), AND therefore how much gap shows
   before "Our ambition" below it. Was 195rem for 3 videos (last one
   cleared around 143.77rem); the 3rd video was removed (a duplicate of
   the 1st — see template-careers.php), so this is trimmed by the same
   ~43.11rem gap that video used to occupy, to match the shorter content
   it now needs to reserve room for. */
.careers-hero__stage {
	position: relative;
	z-index: 10;
	height: 151.89rem;
}

/* Each heading copy gets its own full-height (matches .careers-hero__stage)
   absolute wrapper, with the actual position:sticky element nested inside.
   Without this, the solid heading (first in DOM/flow) and the outline
   heading (second, after the videos) would occupy DIFFERENT positions in
   normal flow before either starts sticking — the outline's own flow
   position would sit a further 35.75rem down the page, so it wouldn't
   start sticking to top:0 until the user had already scrolled past that
   offset, meaning the two copies would only line up from partway through
   the scroll, not from the very start. Matches Figma's own structure
   (node 3489:11123 wraps each "Careers" text in exactly this shape). */
/* height (not inset:0 — deliberately NOT tied to .careers-hero__stage's
   own height) is what controls how long the heading stays pinned: a
   sticky child releases once scroll passes (this wrap's height minus the
   sticky child's own height). .careers-hero__stage's height is correct
   for the overall gap to "Our ambition" already, so delaying release
   needs a taller number here instead — independent of the stage — rather
   than changing the stage (which would change that gap) or the pin's own
   height (which would re-centre the heading while stuck — see .careers-
   hero__pin's comment). Tune THIS value to move the release point;
   release scrollY = this height minus 35.75rem (the pin's height). */
.careers-hero__pin-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 158.64rem;
	pointer-events: none;
}

.careers-hero__pin-wrap--solid {
	z-index: 1;
}

.careers-hero__pin-wrap--outline {
	z-index: 3;
}

/* height + padding-top here are what position the heading vertically
   while it's stuck (flex-centered within this box) — tuned earlier via
   direct visual feedback, so left alone. Release timing is controlled
   separately, via .careers-hero__pin-wrap's own height below, NOT this
   box's height (an earlier attempt shrank this box to delay release, but
   that also re-centers the heading differently while it's stuck, since
   flex centering depends on this box's own height — wrong lever). */
.careers-hero__pin {
	position: sticky;
	top: 0;
	height: 35.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 10rem;
	box-sizing: border-box;
}

.careers-hero__heading {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(4.5rem, 13vw, 12.2rem);
	line-height: 1.072;
	text-align: center;
	white-space: nowrap;
}

.careers-hero__heading--solid {
	color: var(--color-ink);
}

/* Solid fill, not transparent — the SVG filter (defined inline in the
   template) needs real alpha to dilate. It replaces this element's visible
   output with just the outline ring, so the fill colour itself never shows. */
.careers-hero__heading--outline {
	color: var(--color-ink);
	filter: url(#careers-heading-outline);
}

.careers-hero__video {
	position: absolute;
	z-index: 2;
	width: 63.8%;
	max-width: 53.32rem;
	aspect-ratio: 853.147 / 491.04;
	overflow: hidden;
	background: var(--color-ink);
}

/* left:0/right:0 would anchor to the true viewport edge, not the site's
   standard .container edge — .careers-hero__stage is full-bleed with no
   container wrapping it, so on any screen wider than 1440px (where
   .container centres itself with extra margin either side) the videos
   would sit flush with the screen edge while the rest of the page's
   content stays inset. This reproduces .container's own inset math
   instead (gutter, plus half of whatever width exists beyond 1440px) —
   same fix as .press-single__content on the Marketing Camp page. */
.careers-hero__video--left {
	left: max(var(--gutter), calc((100vw - var(--container-width)) / 2 + var(--gutter)));
}

.careers-hero__video--right {
	right: max(var(--gutter), calc((100vw - var(--container-width)) / 2 + var(--gutter)));
}

.careers-hero__video-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 700px) {
	.careers-hero__video {
		width: 88%;
		max-width: none;
	}

	.careers-hero__video--left,
	.careers-hero__video--right {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}
}

/* No Figma mobile design for this page — the sticky-heading + scroll-
   jacked-video-reveal effect above is a genuine UX problem specifically on
   a touch device: .careers-hero__stage reserves ~152rem (~2430px) of
   scroll distance for the 2 videos to reveal one at a time, tuned for how
   much a mouse wheel/trackpad tick covers, not a touch flick-scroll —
   confirmed live, that's minutes of scrolling through mostly blank space
   around a sticky "Careers" heading on a phone. Same fix as the Strategy
   template's own scroll-jacked section (.service-pinned, service.css) for
   the same reason: drop the pin/reveal effect entirely on hover:none, and
   just show the heading with the 3 videos stacked normally below it in
   plain flow, no reserved scroll distance. */
@media (hover: none) {
	.careers-hero__stage {
		height: auto;
	}

	/* Existed to fade the scroll-down arrow as it traveled up underneath
	   the pinned heading during the long scroll-jack journey — with that
	   journey gone, there's nothing left for it to fade. */
	.careers-hero__fade-wrap {
		display: none;
	}

	/* The short, plain-flow hero below doesn't need a "scroll for more"
	   hint the way the original multi-thousand-pixel scroll-jack did. */
	.careers-hero__arrow {
		display: none;
	}

	.careers-hero__pin-wrap {
		position: static;
		height: auto;
		pointer-events: auto;
	}

	.careers-hero__pin {
		position: static;
		height: auto;
		/* 104px top: same fixed-mobile-header clearance value already
		   established for this exact problem (.insights__intro, blog.css —
		   see its own comment) — the previous clamp() floor (48px) put the
		   "Careers" heading's own top edge above the header's real ~76px
		   bottom edge, rendering the first chunk of it hidden underneath
		   the header instead of clear of it, confirmed live. */
		padding: 104px 0 32px;
	}

	/* Only mattered for the "text turns to an outline where it crosses a
	   video" trick (see the template's own top comment) — with the videos
	   no longer overlapping the heading at all, showing this duplicate
	   too would just double up the same word underneath it. */
	.careers-hero__pin-wrap--outline {
		display: none;
	}

	.careers-hero__video {
		position: static;
		width: 88%;
		max-width: none;
		margin: 0 auto 32px;
	}

	.careers-hero__video--left,
	.careers-hero__video--right {
		left: auto;
		right: auto;
		transform: none;
	}

	/* Only the first video on mobile — explicitly requested, not the
	   site's usual "keep the content, lose the animation" treatment for
	   these scroll-jack sections. Desktop still shows both. */
	.careers-hero__video--right {
		display: none;
	}
}

/* --- Ambition --- */

.careers-ambition {
	background: var(--color-white);
	padding-block: clamp(56px, 8vw, 96px);
	text-align: center;
}

.careers-ambition__inner {
	max-width: 58.125rem;
}

.careers-ambition__heading {
	margin: 0 0 28px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 3.125rem);
	line-height: 1.22;
	color: var(--color-ink);
}

/* Global mobile h2 baseline (2.3rem) — see base.css. */
@media (max-width: 900px) {
	.careers-ambition__heading {
		font-size: clamp(1.75rem, 10vw, 2.3rem);
	}
}

.careers-ambition__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--color-ink);
}

/* --- Benefits (numbered list) ---
   Fixed-width number column so "01" and "04" line up identically
   regardless of glyph width — same fix as .service-capabilities__row-title
   / .what-we-do-list__title elsewhere in this theme. */

.careers-benefits {
	background: var(--color-white);
	padding-block: clamp(24px, 4vw, 48px);
}

.careers-benefits__row {
	display: flex;
	align-items: center;
	gap: 87px;
	padding-block: 38px;
}

.careers-benefits__number {
	margin: 0;
	width: 11.9375rem;
	flex-shrink: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 6rem;
	line-height: 1.072;
	color: var(--color-ink);
}

.careers-benefits__copy {
	max-width: 54.8125rem;
}

.careers-benefits__title {
	margin: 0 0 4px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--color-ink);
}

.careers-benefits__description {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--color-ink);
}

.careers-benefits__divider {
	height: 1px;
	background: var(--color-ink);
}

@media (max-width: 700px) {
	.careers-benefits__row {
		gap: 24px;
	}

	.careers-benefits__number {
		width: auto;
	}
}

/* --- Vacancies --- */

.careers-vacancies {
	background: var(--color-white);
	padding-block: clamp(56px, 8vw, 96px);
}

.careers-vacancies__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 20px;
}

.careers-vacancies__heading {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 3.125rem);
	color: var(--color-ink);
}

/* Global mobile h2 baseline (2.3rem) — see base.css. */
@media (max-width: 900px) {
	.careers-vacancies__heading {
		font-size: clamp(1.75rem, 10vw, 2.3rem);
	}
}

.careers-vacancies__text {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--color-ink);
}