/* =========================================================================
   Careers (v2)  —  layered on top of home-v2.css (Uncut Sans, .hv-shell,
   the dark page frame and the vertical frame rails). Values from Figma
   "Careers [Web]" (8C41…, frame 161:13562).
   ========================================================================= */
/* NOTE: the "Poppins" first choice in .cr-chip and .cr-apply below has never
   taken effect. home-v2.css sets font-family on `.hv2 span` / `.hv2 a` with
   !important, which out-specifies a single class, so both compute to Uncut
   Sans. The webfont was being downloaded (a render-blocking Google stylesheet)
   purely to be discarded, so that request is gone. Re-adding it needs the
   specificity fixed too, or it is just dead weight again. */

.cr {
	--cr-ink: #111111;
	--cr-ink-70: rgba(17, 17, 17, 0.7);
	--cr-ink-20: rgba(17, 17, 17, 0.2);
	--cr-ink-10: rgba(17, 17, 17, 0.1);
	--cr-teal: #2ad9c4;
	--cr-teal-deep: #09413e;
	--cr-surface: #f6f6f6;
	--cr-content: 1600px;
}
.cr-sec-light {
	background: var(--cr-surface);
	color: var(--cr-ink);
}

/* Shared section heading (eyebrow + title, centered) */
.cr-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	padding-block: clamp(48px, 6vw, 80px);
}
/* Dotted band variant — matches the About page "Meet the Leadership Team"
   heading (dark dots on the light surface, framed with hairline borders). */
.cr-head--dots {
	position: relative;
	overflow: hidden;
	border-top: 1px solid rgba(17, 17, 17, 0.12);
	border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}
.cr-head--dots > * {
	position: relative;
	z-index: 1;
}
/* The band is closed on both sides, like every other dotted band on the site. */
.cr-head__eyebrow {
	margin: 0;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--cr-ink-70);
}
.cr-head__title {
	margin: 0;
	max-width: min(1050px, 100%);
	font-weight: 500;
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--cr-ink);
}
/* Values heading is 32px in Figma (vs 36px for the openings heading). */
.cr-head__title--sm {
	font-size: clamp(26px, 2.8vw, 32px);
}
.cr-head__sub {
	margin: 0;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--cr-ink-70);
}

/* -------------------------------------------------------------------------
   HERO (dark) with scattered floating team photos
   ------------------------------------------------------------------------- */
.cr-hero {
	position: relative;
	overflow: hidden;
	background: #0e0e0e;
	color: #fff;
}
.cr-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	max-width: min(926px, 100%);
	margin-inline: auto;
	padding: clamp(64px, 8vw, 100px) 24px 0;
}
.cr-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: #fff;
}
.cr-pill__dot {
	width: 8px;
	height: 8px;
	background: var(--cr-teal);
}
.cr-hero__title {
	margin: 0;
	font-weight: 500;
	font-size: clamp(36px, 4.4vw, 62px);
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: #fff;
}
.cr-hero__lead {
	margin: 0;
	font-weight: 400;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.6);
}
/* Centered carousel: photos slide right-to-left, the middle one featured.

   All of the geometry is derived from the carousel's own inline size (100cqw)
   rather than measured in JS, so the server renders the photos at their final
   size and offset. CareersHeroCarousel only supplies the active index. */
.cr-hero__carousel {
	container-type: inline-size;
	width: 100%;
	overflow: hidden;
	padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 96px);
}
.cr-hero__track {
	/* Five photos across: 1 + 2x0.8 + 2x0.6 = 3.8 base widths + 4 gaps. */
	--cr-gap: 24px;
	--cr-base: calc((100cqw - 4 * var(--cr-gap)) / 3.8);
	--cr-w1: calc(var(--cr-base) * 0.8);
	--cr-w2: calc(var(--cr-base) * 0.6);

	display: flex;
	width: 100%;
	gap: var(--cr-gap);
	align-items: center;
	/* Pinned to the centre photo so the row height never dips mid-transition. */
	height: var(--cr-base);
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.cr-hero__slide {
	flex: 0 0 auto;
	width: var(--cr-w2);
	aspect-ratio: 1;
	border-radius: 24px;
	overflow: hidden;
	will-change: width;
	transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.cr-hero__slide.is-near { width: var(--cr-w1); }
.cr-hero__slide.is-center { width: var(--cr-base); }
.cr-hero__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	backface-visibility: hidden;
}
/* Mobile (Figma "Careers [Mobile]"): one 300px centre photo, 260px peeks,
   16px gap. Keyed off the carousel width, matching the 768px breakpoint. */
@container (max-width: 768px) {
	.cr-hero__track {
		--cr-gap: 16px;
		--cr-base: min(300px, 100cqw - 90px);
		--cr-w1: calc(var(--cr-base) * 260 / 300);
		--cr-w2: var(--cr-w1);
	}
}

/* -------------------------------------------------------------------------
   CORE VALUES — 5 outlined cards (rows of 3 + 2)
   ------------------------------------------------------------------------- */
.cr-values {
	padding-bottom: clamp(48px, 6vw, 100px);
}
.cr-values__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
	max-width: var(--cr-content);
	margin-inline: auto;
}
.cr-vcard {
	position: relative;
	/* Three per row. 500px is the Figma width, but three fixed cards plus two
	   40px gaps need 1580px and the content column is 1570px, so they silently
	   dropped to two (and to one below ~1370px). Sizing from the row keeps it
	   at three and caps each card at the Figma width. */
	width: min(500px, calc((100% - 2 * 40px) / 3));
	max-width: 100%;
	aspect-ratio: 500 / 380;
	/* The card's internals (corner dots, radius, inner frame, title) were fixed
	   px sized for the 500px Figma card. Once the card scales they no longer
	   fit — the dots sat on top of the title. Sizing them in cqw keeps every
	   part proportional at any card width. */
	container-type: inline-size;
	perspective: 1400px;
	box-shadow: 0 12px 12px rgba(0, 0, 0, 0.12);
	border-radius: min(55px, 11cqw);
	/* The card flips to its description on hover — signal that it reacts. */
	cursor: pointer;
}
/* Three across needs roughly a 330px card for the longest title ("Thinking In
   Fundamentals") to fit; below that it clipped. Drop to two rather than shrink
   the title to an unreadable size — the mobile block stacks them to one. */
@media (max-width: 1439px) {
	.cr-vcard { width: calc((100% - 40px) / 2); }
}

.cr-vcard__face--front::before {
	content: "";
	position: absolute;
	inset: min(15px, 3cqw);
	border: 2.89px solid rgba(42, 217, 196, 0.2);
	border-radius: min(43px, 8.6cqw);
	pointer-events: none;
	z-index: 2;
}

.cr-vcard__dot {
	position: absolute;
	width: min(26px, 5.2cqw);
	height: min(26px, 5.2cqw);
	border-radius: 50%;
	background: var(--cr-teal);
	z-index: 3;
	transition: opacity 0.35s ease;
}
.cr-vcard__dot--tl { top: min(37px, 7.4cqw); left: min(39px, 7.8cqw); }
.cr-vcard__dot--tr { top: min(37px, 7.4cqw); right: min(38px, 7.6cqw); }
.cr-vcard__dot--bl { bottom: min(36px, 7.2cqw); left: min(39px, 7.8cqw); }
.cr-vcard__dot--br { bottom: min(36px, 7.2cqw); right: min(38px, 7.6cqw); }

.cr-vcard__inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cr-vcard:hover .cr-vcard__inner,
.cr-vcard:focus-within .cr-vcard__inner { transform: rotateY(180deg); }

/* Two stacked faces: icon+title by default, title+description on hover. */
.cr-vcard__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	border-radius: min(55px, 11cqw);
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
}
.cr-vcard__face--front {
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 40px 56px;
	border: 2.89px solid rgba(42, 217, 196, 0.2);
	background: rgba(42, 217, 196, 0.06);
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
}
/* Back: title pinned top, description pinned bottom (Figma justify-between).
   Everything here is sized in cqw for the same reason the front face is: the
   card's height is fixed by its aspect-ratio, so any part measured against the
   viewport instead of the card overflows once the card is narrower than the
   500px it was drawn at. That is what pushed the longest descriptions out of
   the frame between 1440 and 1800, where 3-up leaves a 337-457px card but
   1.4vw still resolved to the full 20px. */
.cr-vcard__face--back {
	align-items: stretch;
	justify-content: space-between;
	padding: min(40px, 8cqw);
	border: 2.89px solid rgba(42, 217, 196, 0.3);
	background: url("../img/careers-v2/value-back-bg.webp") center / cover no-repeat;
	background-color: #fff;
	transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
	.cr-vcard__inner { transition: none; }
	.cr-vcard:hover .cr-vcard__inner,
	.cr-vcard:focus-within .cr-vcard__inner { transform: none; }
	.cr-vcard__face { transition: opacity 0.2s ease; -webkit-backface-visibility: visible; backface-visibility: visible; }
	.cr-vcard__face--back { transform: none; opacity: 0; }
	.cr-vcard:hover .cr-vcard__face--front,
	.cr-vcard:focus-within .cr-vcard__face--front { opacity: 0; }
	.cr-vcard:hover .cr-vcard__face--back,
	.cr-vcard:focus-within .cr-vcard__face--back { opacity: 1; }
}

.cr-vcard__icon {
	width: auto;
	max-width: 48%;
	max-height: 55%;
	margin-top: auto;
	object-fit: contain;
	/* the "Aiming Big" asset is a PNG with a white box; multiply drops the
	   white against the near-white card while leaving the SVG icons untouched. */
	mix-blend-mode: multiply;
}
.cr-vcard__title {
	margin: 0;
	font-weight: 600;
	font-size: clamp(13px, 5.6cqw, 28px);
	line-height: 1.5;
	text-align: center;
	color: var(--cr-teal-deep);
}
.cr-vcard__face--back .cr-vcard__title {
	width: 100%;
	padding-inline: 0;
	font-weight: 600;
	color: var(--cr-ink);
	font-size: clamp(18px, 6.4cqw, 32px);
	line-height: 1.3;
	text-align: left;
}
.cr-vcard__desc {
	margin: 0;
	font-weight: 500;
	font-size: clamp(13px, 4cqw, 20px);
	line-height: 1.4;
	letter-spacing: -0.02em;
	text-align: left;
	color: var(--cr-ink-70);
}

/* -------------------------------------------------------------------------
   TESTIMONIALS — horizontal carousel
   ------------------------------------------------------------------------- */
.cr-tst {
	position: relative;
	padding-bottom: clamp(40px, 5vw, 80px);
}
/* Card is centred (capped at 1400px); the arrows sit in the gutter between the
   card and the frame rail, centred in that gap. */
.cr-tst__wrap {
	position: relative;
	width: 100%;
	/* Arrows are laid out beside the track, not floated over it. The old
	   absolute offsets used `max(8px, calc((100% - 1400px) / 4 - 22px))`, which
	   collapses to 8px as soon as the wrap is narrower than the 1400px track —
	   putting both arrows on top of the card at every width below ~1920. */
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 56px);
}
.cr-tst__track {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	max-width: min(1400px, 100%);
	margin-inline: auto;
	display: flex;
	gap: 40px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.cr-tst__track::-webkit-scrollbar { display: none; }
.cr-tcard {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: flex;
	gap: 40px;
	align-items: stretch;
	padding: 32px;
	background: #fff;
	border: 1px solid var(--cr-ink-10);
	border-radius: 32px;
	box-sizing: border-box;
}
.cr-tcard__photo {
	flex: 0 0 auto;
	width: 340px;
	height: 340px;
	max-width: 40%;
	aspect-ratio: 1 / 1;
	border-radius: 24px;
	object-fit: cover;
	object-position: center top;
}
.cr-tcard__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-block: 8px;
	min-width: 0;
}
.cr-tcard__quote {
	margin: 0;
	font-weight: 400;
	font-size: clamp(16px, 1.4vw, 22px);
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--cr-ink);
}
.cr-tcard__name {
	margin: 0;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.2;
	color: var(--cr-ink);
}
.cr-tcard__role {
	margin: 8px 0 0;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.2;
	color: var(--cr-ink-70);
}
.cr-tst__arrow {
	position: static;
	flex: none;
	width: 44px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 2;
}
.cr-tst__arrow img {
	width: 100%;
	height: 100%;
	/* Active/clickable = dark grey (asset ships light grey, so darken it). */
	filter: brightness(0.4);
	transition: filter 0.2s ease;
}
.cr-tst__arrow--prev img { transform: scaleX(-1); } /* asset points right; flip for prev */
/* Centre each arrow in the gutter: half-way between the 1400px card and the rail. */
.cr-tst__arrow--prev { order: 0; }
.cr-tst__arrow--next { order: 2; }
/* No more cards this side → keep the light-grey (disabled) look. */
.cr-tst__arrow:disabled { cursor: default; }
.cr-tst__arrow:disabled img { filter: none; }

/* -------------------------------------------------------------------------
   CURRENT OPENINGS — accordion by category
   ------------------------------------------------------------------------- */
.cr-open {
	padding-bottom: clamp(48px, 6vw, 100px);
}
.cr-open__lead {
	margin: 0 auto clamp(24px, 3vw, 32px);
	max-width: min(909px, 100%);
	text-align: center;
	font-weight: 500;
	font-size: clamp(20px, 2.1vw, 28px);
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--cr-ink);
}
/* Sharp-cornered outlined box (Figma has no radius). */
.cr-acc {
	max-width: min(1234px, 100%);
	margin-inline: auto;
	padding: 40px;
	border: 1px solid var(--cr-ink-20);
}
.cr-acc__item {
	padding: 40px 0;
	border-bottom: 1px solid var(--cr-ink-20);
}
.cr-acc__item:first-child { padding-top: 0; }
.cr-acc__item:last-child { border-bottom: none; padding-bottom: 0; }
.cr-acc__head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	font-weight: 500;
	font-size: clamp(18px, 1.8vw, 22px);
	line-height: 26px;
	color: var(--cr-ink);
}
.cr-acc__chev {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(-90deg); /* collapsed: chevron points right */
	transition: transform 0.25s ease;
}
.cr-acc__item[data-open="true"] .cr-acc__chev { transform: rotate(0deg); } /* open: points down */
.cr-acc__chev img { width: 24px; height: 24px; }
.cr-acc__panel {
	display: none;
	flex-direction: column;
	gap: 20px;
	padding-top: 20px;
}
.cr-acc__item[data-open="true"] .cr-acc__panel { display: flex; }
.cr-acc__empty {
	margin: 0;
	color: var(--cr-ink-70);
	font-size: 16px;
}

/* Job card — sharp corners, title top / meta+apply row bottom. */
.cr-job {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 193px;
	padding: 40px;
	border: 1px solid var(--cr-ink-10);
}
.cr-job__title {
	margin: 0;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--cr-ink);
}
.cr-job__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}
.cr-job__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
.cr-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px;
	border: 1px solid rgba(42, 217, 196, 0.07);
	border-radius: 2px;
	background: rgba(42, 217, 196, 0.4);
	font-family: "Poppins", "Uncut Sans", sans-serif;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: -0.02em;
	color: var(--cr-ink);
}
.cr-chip img { width: 24px; height: 24px; flex: none; }
.cr-apply {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 12px 24px;
	background: var(--cr-teal);
	border-radius: 2px;
	font-family: "Poppins", "Uncut Sans", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: #0a0a0a;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.2s ease;
}
.cr-apply:hover { filter: brightness(0.95); }
.cr-apply img { width: 20px; height: 20px; }

/* -------------------------------------------------------------------------
   "Don't see the role?" (dark)
   ------------------------------------------------------------------------- */
.cr-cta {
	background: #0e0e0e;
	color: #fff;
}
.cr-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	padding-block: clamp(48px, 6vw, 100px);
}
.cr-cta__title {
	margin: 0;
	font-weight: 500;
	font-size: clamp(34px, 4.2vw, 58px);
	line-height: 1.5;
	text-align: center;
	color: #fff;
}
.cr-cta__mail {
	margin: 0;
	font-weight: 400;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.5;
	text-align: center;
	color: var(--cr-teal);
}
.cr-cta__mail a {
	color: var(--cr-teal);
	text-decoration: underline;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
/* =========================================================================
   MOBILE  —  "Careers [Mobile]" (390 frame). Values from Figma dev mode.
   ========================================================================= */
@media (max-width: 768px) {
	/* ---- Hero ---- */
	.cr-hero__inner { padding: 58px 20px 0; gap: 24px; }
	.cr-hero__title { font-size: 36px; letter-spacing: -0.02em; }
	.cr-hero__lead { font-size: 16px; line-height: 22px; }
	/* Carousel uses the full viewport width on mobile (its hv-shell wrapper
	   drops the 20px padding) so the 300px centre photo centres in the 390
	   frame with symmetric peeks (Figma: centre x=45, peeks ±260 @ 16px gap). */
	.cr-hero .hv-shell { padding-inline: 0; }

	/* ---- Section headings ---- */
	.cr-head__title--sm { font-size: 24px; }   /* Our Core Values */
	.cr-head__title { font-size: 24px; }         /* Hear from Our Team / Find the Right Team */
	.cr-head__sub, .cr-head__eyebrow { font-size: 16px; }
	/* Dotted band spans the full screen (break out of the 20px hv-shell padding). */
	.cr-head--dots { margin-inline: -20px; }

	/* ---- Core Values: two stacked cards per value (icon card + text card), no hover ---- */
	.cr-values__grid { flex-direction: column; align-items: center; gap: 16px; }
	.cr-vcard {
		width: 350px;
		max-width: 100%;
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		gap: 16px;
		border: none;
		background: none;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		cursor: default;   /* both faces are already shown — nothing to reveal */
	}
	.cr-vcard { perspective: none; }
	.cr-vcard__inner {
		position: static;
		display: flex;
		flex-direction: column;
		gap: 16px;
		transform: none !important;
		transform-style: flat;
		transition: none;
	}

	.cr-vcard__face {
		position: static;
		width: 100%;
		height: 266px;
		opacity: 1 !important;
		box-sizing: border-box;
		transform: none !important;
		-webkit-backface-visibility: visible;
		        backface-visibility: visible;
		transition: none;
	}
	/* icon card */
	.cr-vcard__face--front {
		position: relative;
		justify-content: center;
		padding: 40px;
		border: 2px solid rgba(42, 217, 196, 0.2);
		border-radius: 16px;
		background: rgba(42, 217, 196, 0.06);
	}
	.cr-vcard__face--front::before {
		content: "";
		position: absolute;
		inset: 10px;
		border: 2px solid rgba(42, 217, 196, 0.2);
		border-radius: 12px;
		pointer-events: none;
	}
	.cr-vcard__face--front .cr-vcard__title { display: none; } /* mobile icon card has no title */
	.cr-vcard__face--front .cr-vcard__icon { max-width: 52%; max-height: 70%; margin: 0; }
	/* corner dots (18.2px, ~26px inset) */
	.cr-vcard__dot { width: 18.2px; height: 18.2px; opacity: 1 !important; }
	.cr-vcard__dot--tl { top: 26px; left: 28px; }
	.cr-vcard__dot--tr { top: 26px; right: 27px; }
	.cr-vcard__dot--bl { bottom: 26px; left: 28px; }
	.cr-vcard__dot--br { bottom: 26px; right: 27px; }
	/* text card */
	.cr-vcard__face--back {
		justify-content: space-between;
		padding: 28px;
		border: 1px solid rgba(42, 217, 196, 0.3);
		border-radius: 16px;
	}
	.cr-vcard__face--back .cr-vcard__title { font-size: 20px; }
	.cr-vcard__desc { font-size: 16px; }

	/* ---- Testimonials: vertical card (image top, name/role, quote), arrows below ---- */
	.cr-tcard {
		flex-direction: column;
		gap: 24px;
		padding: 24px 16px;
		border-radius: 32px;
	}
	.cr-tcard__photo {
		flex: 0 0 auto;
		width: 100%;
		height: 250px;
		max-width: none;
		border-radius: 24px;
		object-fit: cover;
		object-position: center top;
	}
	.cr-tcard__body { flex-direction: column-reverse; justify-content: flex-start; gap: 16px; padding-block: 16px; }
	.cr-tcard__name { font-size: 24px; }
	.cr-tcard__role { font-size: 20px; }
	.cr-tcard__quote { font-size: 16px; letter-spacing: -0.02em; }
	/* arrows to the bottom, centered — the wrap becomes a 2-row grid so the
	   track spans the full width and both arrows sit under it, side by side. */
	.cr-tst__wrap {
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
		padding-bottom: 0;
	}
	/* Track takes a full row; the two arrows wrap under it and centre as a pair. */
	.cr-tst__track { flex: 1 0 100%; order: 0; margin-bottom: 8px; }
	.cr-tst__arrow { width: 34px; height: 30px; }
	.cr-tst__arrow--prev { order: 1; }
	.cr-tst__arrow--next { order: 2; }

	/* ---- Openings ---- */
	.cr-open__lead { font-size: 20px; }
	.cr-acc { padding: 12px; }
	.cr-acc__item { padding: 12px 0; }
	.cr-acc__head { font-size: 16px; line-height: 1.2; }
	.cr-acc__chev { width: 24px; height: 24px; }
	.cr-acc__chev img { width: 22px; height: 12px; }
	.cr-acc__panel { padding-top: 16px; gap: 16px; }
	.cr-job { padding: 16px 8px; gap: 16px; min-height: 0; }
	.cr-job__title { font-size: 16px; }
	.cr-job__row { flex-direction: column; align-items: flex-start; gap: 24px; }
	.cr-job__meta { gap: 8px; }
	.cr-chip {
		gap: 4px;
		padding: 4px 6px;
		font-family: "Uncut Sans", sans-serif;
		/* Was 10px — too small for real content ("Bangalore", "5-10 Years").
		   The row wraps, so the extra 2px costs nothing but a second line. */
		font-size: 12px;
		letter-spacing: -0.02em;
	}
	.cr-chip img { width: 12px; height: 12px; }
	.cr-apply {
		/* 40px was just under the 44px touch target for a primary action. */
		min-height: 44px;
		gap: 8px;
		font-family: "Uncut Sans", sans-serif;
		font-size: 16px;
	}
	.cr-apply img { width: 16px; height: 16px; }

	/* ---- Don't-see-the-role CTA ---- */
	.cr-cta__title { font-size: 32px; }
	.cr-cta__mail { font-size: 20px; }
}