/* ==========================================================================
   Careers — Figma 130:688 (1440 x 3839), plus the single job page.
   Design px scale with --u below 1440; 12–18px text stays fixed.
   ========================================================================== */

.page--careers { --cr-deep: var(--navy-deep); }

/* Content in the design sits at x 75–1367 (the 1296 container is 72–1368). */
.cr-inset { margin-inline: calc(3 * var(--u)) calc(1 * var(--u)); }

/* --- Hero (0–874) -------------------------------------------------------- */
.cr-hero { padding: calc(92px + 99 * var(--u)) 0 calc(74 * var(--u)); }
.cr-hero__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cr-hero__eyebrow { color: var(--sky); }
.cr-hero__title { margin-top: calc(42 * var(--u)); }
.cr-hero__lead { max-width: 640px; margin-top: 30px; font-size: 16px; line-height: 25px; }
.cr-hero__lead p + p { margin-top: 12px; }
.cr-hero__cta { margin-top: calc(42 * var(--u)); }
.cr-hero__cta .btn { min-width: 142px; }
.cr-hero__media {
	margin: calc(81 * var(--u)) calc(1 * var(--u)) 0 calc(3 * var(--u));
	height: calc(344 * var(--u));
	min-height: 200px;
}
.cr-hero__media img { object-position: 50% 58%; }

/* --- Who We Are (874–1600, white) ---------------------------------------- */
.cr-about { padding: calc(84 * var(--u)) 0 calc(51 * var(--u)); }
.cr-about__grid {
	display: grid;
	grid-template-columns: 471fr 821fr;
	align-items: start;
	margin-inline: calc(3 * var(--u)) calc(1 * var(--u));
}
.cr-about__text { padding-top: calc(172 * var(--u)); padding-right: 24px; }
.cr-about__title { color: var(--navy-deep); }
.cr-about__body {
	margin: calc(35 * var(--u)) 0 0 4px;
	max-width: 315px;
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	color: var(--navy);
}
.cr-about__cta { margin-top: calc(35 * var(--u)); }
.on-light .cr-btn-deep { min-width: 140px; height: 29px; background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white); }
@media (hover: hover) {
	.on-light .cr-btn-deep:hover { background: var(--navy); border-color: var(--navy); }
	.on-light .cr-btn-deep::before { display: none; }
}
.cr-about__media { aspect-ratio: 821 / 591; }

/* --- Your next job (1600–2400, navy) -------------------------------------- */
.cr-jobs { padding: calc(144 * var(--u)) 0 calc(166 * var(--u)); scroll-margin-top: 0; }
.cr-jobs__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cr-jobs__intro { margin-top: calc(37 * var(--u)); max-width: 432px; font-size: 12px; line-height: 18px; font-weight: 500; }
.cr-jobs__empty {
	margin: calc(77 * var(--u)) 2px 0;
	padding: 32px 0;
	border-block: 1px solid var(--line-light);
	text-align: center;
	font-size: 16px;
	line-height: 25px;
}
.cr-jobs__empty a { color: var(--sky); }

/* Rows: 90px between 50% white rules, columns at x 74 / 292 / 662, arrow at 1318. */
.jobs { margin: calc(77 * var(--u)) 2px 0; border-top: 1px solid var(--line-light); }
.jobs__item { border-bottom: 1px solid var(--line-light); }
.job {
	position: relative;
	display: grid;
	grid-template-columns: 218fr 370fr 575fr 81fr 18px;
	align-items: start;
	height: 89px;               /* + the 1px rule = the design's 90 */
	padding: 27px calc(30 * var(--u)) 0 0;
	color: var(--white);
	isolation: isolate;
}
.job::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(191, 217, 255, 0.1), rgba(191, 217, 255, 0.04));
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.55s var(--ease-out);
}
.job__company { font-size: 14px; line-height: 25px; padding-right: 16px; }
.job__title { font-size: 18px; line-height: 25px; font-weight: 600; color: var(--sky); padding-right: 24px; transition: transform 0.55s var(--ease-out); }
.job__summary {
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.job__arrow { grid-column: 5; display: block; width: 18px; height: 15px; overflow: hidden; }
.job__arrow svg { width: 18px; height: 15px; transition: transform 0.55s var(--ease-out); }
@media (hover: hover) {
	.job:hover::before { transform: none; }
	.job:hover .job__title { transform: translateX(6px); }
	.job:hover .job__arrow svg { animation: cms-arrow-through 0.7s var(--ease-out); color: var(--sky); }
}
.job:focus-visible { outline-offset: -2px; }
.job:focus-visible::before { transform: none; }

/* --- Values (2400–, light blue) ------------------------------------------- */
.cr-values { background: var(--sky); color: var(--navy-deep); overflow: hidden; }
.cr-values__grid {
	display: grid;
	grid-template-columns: 332fr 256fr 704fr;
	margin-inline: calc(3 * var(--u)) calc(1 * var(--u));
}
.cr-values__content { grid-column: 3; padding: calc(113 * var(--u)) 0 calc(87 * var(--u)); }
.cr-values__intro { margin-top: 24px; max-width: 575px; font-size: 12px; line-height: 18px; font-weight: 500; }
.cr-values__list { margin-top: calc(50 * var(--u)); }
.value {
	display: grid;
	grid-template-columns: 43px 1fr;
	padding-bottom: 23px;
	border-bottom: 1px solid rgba(20, 39, 73, 0.5);
}
.value + .value { padding-top: 22px; }
.value:last-child { padding-bottom: 0; border-bottom: 0; }
.value__num { font-size: 18px; line-height: 25px; font-weight: 800; }
.value__title { padding-top: 4px; font-size: 18px; line-height: 18px; font-weight: 500; }
.value__body { grid-column: 2; margin-top: 26px; max-width: 575px; font-size: 12px; line-height: 18px; font-weight: 500; }

/* Image strip: 332 wide, flush with the section's top and bottom, drifting up. */
.cr-values__strip { grid-column: 1; grid-row: 1; position: relative; overflow: hidden; min-height: 100%; }
.cr-values__track { position: absolute; inset: 0 0 auto; will-change: transform; }
.cr-values__set { display: flex; flex-direction: column; gap: calc(29 * var(--u)); padding-bottom: calc(29 * var(--u)); }
.cr-values__img { margin: 0; flex: none; height: calc(278 * var(--u)); background: rgba(20, 39, 73, 0.08); }
.cr-values__img:nth-child(even) { height: calc(326 * var(--u)); }
.cr-values__img img { object-position: 50% 35%; }

@keyframes cr-drift-y { to { transform: translate3d(0, -50%, 0); } }
@keyframes cr-drift-x { to { transform: translate3d(-50%, 0, 0); } }
.cr-values__strip.is-drifting .cr-values__track { animation: cr-drift-y 110s linear infinite; }
.cr-values__strip.is-paused .cr-values__track,
.cr-values__strip.is-offscreen .cr-values__track { animation-play-state: paused; }
@media (hover: hover) { .cr-values__strip.is-drifting:hover .cr-values__track { animation-play-state: paused; } }

.cr-values__toggle {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	display: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(20, 39, 73, 0.55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--white);
	opacity: 0.85;
	transition: background-color 0.3s, opacity 0.3s;
}
.cr-values__strip.is-drifting .cr-values__toggle { display: grid; }
.cr-values__toggle:hover, .cr-values__toggle:focus-visible { background: var(--navy-deep); opacity: 1; }
.cr-values__toggle:focus-visible { outline-color: var(--navy-deep); }
.cr-values__icon { position: relative; display: block; width: 10px; height: 12px; }
.cr-values__icon--pause { border-inline: 3px solid currentColor; }
.cr-values__icon--play { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }

@media (prefers-reduced-motion: reduce) {
	.cr-values__strip .cr-values__track { animation: none !important; transform: none !important; }
	.cr-values__toggle { display: none !important; }
}

/* Small laptops: same row, a narrower company column and room for a third line. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.job { grid-template-columns: 196px 1fr 1.7fr 40px 18px; height: auto; min-height: 89px; padding-bottom: 24px; }
	.job__company { white-space: nowrap; font-size: 13px; }
	.job__summary { -webkit-line-clamp: 3; }
}

/* --- Tablet / phone ------------------------------------------------------- */
@media (max-width: 1023px) {
	.cr-hero { padding: calc(var(--header-h) + 72px) 0 48px; }
	.cr-hero__title, .cr-hero__cta { margin-top: 28px; }
	.cr-hero__media { margin: 48px 0 0; height: auto; aspect-ratio: 16 / 9; min-height: 0; }

	.cr-about { padding: 72px 0; }
	.cr-about__grid { grid-template-columns: 1fr; row-gap: 40px; margin: 0; }
	.cr-about__text { padding: 0; }
	.cr-about__body { margin: 24px 0 0; max-width: 520px; font-size: 14px; line-height: 22px; }
	.cr-about__cta { margin-top: 28px; }
	.cr-about__media { aspect-ratio: 4 / 3; }

	.cr-jobs { padding: 80px 0 88px; }
	.cr-jobs__intro { margin-top: 20px; font-size: 14px; line-height: 22px; max-width: 520px; }
	.jobs, .cr-jobs__empty { margin: 48px 0 0; }
	.job {
		height: auto;
		grid-template-columns: 1fr 18px;
		grid-template-areas: "company arrow" "title arrow" "summary summary";
		padding: 22px 0 24px;
		row-gap: 4px;
	}
	.job__company { grid-area: company; font-size: 12px; line-height: 18px; opacity: 0.8; }
	.job__title { grid-area: title; font-size: 20px; line-height: 26px; }
	.job__summary { grid-area: summary; margin-top: 8px; font-size: 14px; line-height: 21px; max-width: 560px; -webkit-line-clamp: 4; }
	.job__arrow { grid-area: arrow; align-self: center; }

	.cr-values__grid { grid-template-columns: 1fr; margin: 0; }
	.cr-values__content { grid-column: 1; grid-row: 2; padding: 56px 0 80px; }
	.cr-values__list { margin-top: 40px; }
	.cr-values__intro { font-size: 14px; line-height: 22px; }
	.value__body { font-size: 14px; line-height: 21px; margin-top: 14px; }
	.value__title { line-height: 22px; padding-top: 1px; }

	.cr-values__strip { grid-row: 1; height: 240px; margin-inline: calc(-1 * var(--gutter)); }
	.cr-values__track { inset: 0 auto 0 0; display: flex; height: 100%; width: max-content; }
	.cr-values__set { flex-direction: row; gap: 12px; padding: 0 12px 0 0; height: 100%; }
	.cr-values__img, .cr-values__img:nth-child(even) { height: 100%; width: 200px; border-radius: 0 0 8px 8px; }
	.cr-values__img:nth-child(even) { width: 260px; }
	.cr-values__strip.is-drifting .cr-values__track { animation-name: cr-drift-x; animation-duration: 90s; }
	.cr-values__toggle { left: auto; right: calc(var(--gutter) + 0px); bottom: 12px; }
}
@media (max-width: 599px) {
	.cr-hero { padding-top: calc(var(--header-h) + 56px); }
	.cr-hero__media { aspect-ratio: 4 / 3; }
	.cr-hero__media img { object-position: 40% 50%; }
	.cr-values__strip { height: 200px; }
	.cr-values__img, .cr-values__img:nth-child(even) { width: 160px; }
	.cr-values__img:nth-child(even) { width: 220px; }
	.value { grid-template-columns: 32px 1fr; }
}

/* ==========================================================================
   Single job (career post type)
   ========================================================================== */
.jb-hero { padding: calc(92px + 99 * var(--u)) 0 calc(120 * var(--u)); text-align: center; }
.jb-hero__inner { display: flex; flex-direction: column; align-items: center; }
.jb-hero__eyebrow { color: var(--sky); }
.jb-hero__title { margin-top: calc(42 * var(--u)); max-width: 20ch; }
.jb-hero__company { margin-top: 24px; font-size: 16px; line-height: 19px; color: var(--sky); }
.jb-hero__company a { color: inherit; }

.jb-main { padding: calc(96 * var(--u)) 0 calc(140 * var(--u)); }
.jb-main__grid {
	display: grid;
	grid-template-columns: minmax(0, 704fr) 228fr 360fr;
	align-items: start;
	margin-inline: calc(3 * var(--u)) calc(1 * var(--u));
}
.jb-body { grid-column: 1; color: var(--navy); font-size: 16px; line-height: 26px; }
.jb-body > * + * { margin-top: 20px; }
.jb-body > p:first-child { font-family: var(--serif); font-size: 22px; line-height: 32px; color: var(--navy-deep); }
.jb-body h2, .jb-body h3, .jb-body h4, .jb-body h5 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 26px;
	line-height: 32px;
	color: var(--navy-deep);
	text-transform: none;
	margin-top: 48px;
}
.jb-body h2 + *, .jb-body h3 + *, .jb-body h4 + *, .jb-body h5 + * { margin-top: 18px; }
.jb-body ul, .jb-body ol { display: grid; row-gap: 12px; }
.jb-body li { position: relative; padding-left: 28px; }
.jb-body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 12px;
	height: 1px;
	background: var(--navy);
}
.jb-body ol { counter-reset: jb; }
.jb-body ol li { counter-increment: jb; }
.jb-body ol li::before { content: counter(jb, decimal-leading-zero); position: absolute; left: 0; top: 0; font-size: 12px; font-weight: 700; }
.jb-body hr { height: 0; border: 0; border-top: 1px solid var(--line-dark); margin: 48px 0 0; opacity: 0.6; }
.jb-body hr + * { margin-top: 40px; }
.jb-body a { text-decoration: underline; text-underline-offset: 3px; }
.jb-body strong { font-weight: 700; }

/* The office/contact footnote at the end of each job. */
.jb-note {
	margin-top: 48px !important;
	padding-top: 28px;
	border-top: 1px solid rgba(24, 48, 102, 0.25);
	display: grid;
	row-gap: 2px;
	font-size: 14px;
	line-height: 22px;
	color: var(--grey);
}
.jb-note em { font-style: normal; }
.jb-note p:last-child:not(:first-child) { margin-top: 14px; font-size: 12px; line-height: 18px; font-weight: 300; }
.jb-note a { color: var(--navy); }

/* Sticky apply card */
.jb-card {
	grid-column: 3;
	position: sticky;
	top: 104px;
	padding: 32px 32px 28px;
	border-radius: 8px;
	background: var(--navy);
	color: var(--white);
}
.on-light .jb-card__label { color: var(--sky); }
.jb-card__title { margin-top: 18px; font-family: var(--serif); font-size: 26px; line-height: 32px; }
.jb-card__company { margin-top: 8px; font-size: 12px; line-height: 18px; font-weight: 300; }
.jb-card__apply { margin-top: 28px; display: flex; width: 100%; height: 44px; font-size: 14px; }
.jb-card__apply.btn--arrow { padding: 0 12px 0 16px; }
.jb-card__apply .btn__icon { width: 24px; height: 24px; }
.jb-card__mail { margin-top: 14px; font-size: 12px; line-height: 18px; font-weight: 300; }
.jb-card__mail a { font-weight: 400; color: var(--sky); }
.jb-card .rule, .on-light .jb-card .rule { margin-top: 24px; border-top-color: rgba(255, 255, 255, 0.25); }
.jb-card__back {
	margin-top: 18px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	line-height: 14px;
}
.jb-card__back svg { width: 14px; height: 11px; transform: rotate(180deg); transition: transform 0.5s var(--ease-out); }
@media (hover: hover) { .jb-card__back:hover svg { transform: rotate(180deg) translateX(4px); } }

.jb-more { padding: calc(120 * var(--u)) 0 calc(140 * var(--u)); }
.jb-more .cr-jobs__head { align-items: flex-start; text-align: left; }
.jb-more .jobs { margin-top: calc(56 * var(--u)); }

@media (max-width: 1023px) {
	.jb-hero { padding: calc(var(--header-h) + 72px) 0 56px; }
	.jb-hero__title { margin-top: 24px; }
	.jb-main { padding: 56px 0 88px; }
	.jb-main__grid { grid-template-columns: 1fr; margin: 0; row-gap: 48px; }
	.jb-card { grid-column: 1; grid-row: 1; position: static; padding: 24px; }
	.jb-card__title { display: none; }
	.jb-card__company { margin-top: 10px; }
	.jb-card__apply { margin-top: 20px; }
	.jb-body > p:first-child { font-size: 19px; line-height: 28px; }
	.jb-body h2, .jb-body h3, .jb-body h4, .jb-body h5 { font-size: 23px; line-height: 29px; margin-top: 40px; }
	.jb-more { padding: 72px 0 88px; }
	.jb-more .jobs { margin-top: 32px; }
}
@media (max-width: 1023px) { .cr-hero__lead { margin-top: 20px; } }

/* Application form (job pages): after the description, in the same column, so
   the apply card stays sticky beside both. Field styles: contact.css. */
.jb-col { grid-column: 1; min-width: 0; }
.jb-apply { margin-top: 72px; padding-top: 56px; border-top: 1px solid rgba(24, 48, 102, 0.25); scroll-margin-top: 104px; }
.jb-apply__title { color: var(--navy-deep); }
.jb-apply__intro { margin-top: 16px; max-width: 560px; font-size: 16px; line-height: 26px; color: var(--navy); }
.jb-apply__intro a { color: var(--navy); }
.jb-apply .contact-form { margin-top: 32px; }

@media (max-width: 1023px) {
	.jb-col { grid-row: 2; }
	.jb-apply { margin-top: 48px; padding-top: 40px; scroll-margin-top: calc(var(--header-h) + 16px); }
}