/* =========================================================================
   Careers page — page-careers.php.
   Scoped to .cr — mobile-first, min-width media queries only.
   Tokens mirror home.css / segment-page.css (Billi Brand Book 2026, with the
   sharper corners agreed after the client review of 27 Aug 2026).
   ========================================================================= */

.cr {
	/* Billi Brand Book 2026 palette */
	--cr-navy: #181d46;      /* Billi Blue — signature colour */
	--cr-lightblue: #90cdeb; /* button hover / accents on navy */
	--cr-grey: #eaeaea;      /* borders, rules */
	--cr-band-grey: #f5f5f5;
	--cr-band-blue: #f1f5f5; /* Green Grey */
	--cr-text: #000;
	--cr-muted: #75757b;
	--cr-gutter: 20px;

	font-family: 'FFDINStd', sans-serif;
	color: var(--cr-text);
	line-height: 1.5;
}

@media (min-width: 900px) {
	.cr { --cr-gutter: 40px; }
}

.cr *,
.cr *::before,
.cr *::after { box-sizing: border-box; }

/* framework.css sets a global `img { width: 100%; max-width: 100% }`, and a
   scoped max-width does not undo it — the property you do not declare still
   comes from the global rule. */
.cr img {
	max-width: 100%;
	width: auto;
	height: auto;
	display: block;
}

.cr-container {
	width: 100%;
	max-width: 1436px; /* 1356px content + 2 × 40px */
	margin: 0 auto;
	padding-left: var(--cr-gutter);
	padding-right: var(--cr-gutter);
}

.cr-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* ---- WYSIWYG output ----------------------------------------------------- */

.cr [class*='__text'] > :first-child { margin-top: 0; }
.cr [class*='__text'] > :last-child { margin-bottom: 0; }
.cr [class*='__text'] p { margin: 0 0 0.85em; }

.cr [class*='__text'] a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cr [class*='__text'] a:hover { opacity: 1; }


/* ---- Buttons ------------------------------------------------------------
   css/desktop.css:349 carries a global `a:hover { opacity: 0.7 }` that fades
   whole buttons theme-wide, so every button here opts out explicitly. */

.cr .cr-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 28px;
	border: 0;
	border-radius: 2px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.cr .cr-btn:hover,
.cr .cr-btn:focus-visible { opacity: 1; }

.cr .cr-btn--blue { background: var(--cr-navy); color: #fff; }

.cr .cr-btn--blue:hover,
.cr .cr-btn--blue:focus-visible {
	background: #fff;
	color: var(--cr-navy);
	box-shadow: inset 0 0 0 1px var(--cr-navy);
}

.cr .cr-btn--light { background: var(--cr-lightblue); color: var(--cr-navy); }

.cr .cr-btn--light:hover,
.cr .cr-btn--light:focus-visible {
	background: #fff;
	color: var(--cr-navy);
	box-shadow: none;
}

.cr .cr-btn--ghost {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.cr .cr-btn--ghost:hover,
.cr .cr-btn--ghost:focus-visible {
	background: #fff;
	color: var(--cr-navy);
	box-shadow: none;
}

/* The outbound arrow on the vacancies link. */
.cr-btn__ext {
	font-size: 1.05em;
	line-height: 1;
}


/* ---- Shared section scaffolding ----------------------------------------- */

.cr-section-heading {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.18;
	color: var(--cr-navy);
}

@media (min-width: 900px) {
	.cr-section-heading { font-size: 34px; }
}

.cr-section-heading--light { color: #fff; }

.cr-section-intro {
	margin: 12px 0 0;
	max-width: 66ch;
	font-size: 17px;
	line-height: 1.55;
	color: var(--cr-muted);
}

.cr-section-intro p { margin: 0 0 0.6em; }
.cr-section-intro p:last-child { margin-bottom: 0; }

.cr-section-intro--light { color: rgba(255, 255, 255, 0.85); }


/* ---- Hero ---------------------------------------------------------------
   The old hero was a 120px strip with the title in a serif over whatever the
   featured image happened to be, with no scrim: the words sat on the team's
   faces. */

.cr-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 320px;
	padding: 48px 0 40px;
	background: var(--cr-navy);
	overflow: hidden;
}

@media (min-width: 900px) {
	.cr-hero {
		min-height: 460px;
		padding: 96px 0 72px;
	}
}

.cr-hero__media {
	position: absolute;
	inset: 0;
}

.cr-hero__media .cr-hero__media-el,
.cr-hero__media img,
.cr-hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cr-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(24, 29, 70, 0.88) 0%,
		rgba(24, 29, 70, 0.72) 45%,
		rgba(24, 29, 70, 0.35) 100%
	);
}

.cr-hero__inner {
	position: relative;
	width: 100%;
}

.cr-hero__content { max-width: 640px; }

.cr-hero__eyebrow {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cr-lightblue);
}

/* The title is an h1, so typography.css sets it in DM Serif Display at 400.
   No font-weight here: the serif has no bold cut, and the 600 this rule
   carried from the DIN era made browsers synthesise one. */
.cr-hero__heading {
	margin: 0;
	font-size: 32px;
	line-height: 1.12;
	color: #fff;
}

@media (min-width: 900px) {
	.cr-hero__heading { font-size: 52px; }
}

.cr-hero__intro {
	margin: 16px 0 0;
	max-width: 56ch;
	font-size: 17px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
}

.cr-hero__intro p { margin: 0 0 0.6em; }
.cr-hero__intro p:last-child { margin-bottom: 0; }

.cr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.cr-hero__actions:empty { display: none; }


/* ---- Introduction -------------------------------------------------------- */

.cr-intro { padding: 44px 0; }

@media (min-width: 900px) {
	.cr-intro { padding: 80px 0; }
}

.cr-intro__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}

@media (min-width: 900px) {
	.cr-intro__inner { grid-template-columns: 1fr 1fr; gap: 64px; }
	.cr-intro--plain .cr-intro__inner { grid-template-columns: 1fr; }
}

/* Grid items default to min-width:auto, which lets a wide picture push its
   track past the viewport on a narrow screen. */
.cr-intro__body,
.cr-intro__media { min-width: 0; }

.cr-intro--plain .cr-intro__body { max-width: 74ch; }

.cr-intro__heading {
	margin: 0 0 14px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--cr-navy);
}

@media (min-width: 900px) {
	.cr-intro__heading { font-size: 30px; }
}

.cr-intro__text {
	font-size: 16px;
	line-height: 1.6;
}

/* The team photograph is 2560px wide and landscape; capped so it cannot make
   the band taller than the copy beside it. */
.cr-intro__img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	border-radius: 4px;
}


/* ---- What we offer -------------------------------------------------------- */

.cr-offer {
	padding: 44px 0;
	background: var(--cr-band-blue);
}

@media (min-width: 900px) {
	.cr-offer { padding: 80px 0; }
}

.cr-offer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 32px;
}

@media (min-width: 640px) {
	.cr-offer__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
	.cr-offer__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

.cr-card {
	min-width: 0;
	padding: 26px 24px;
	border-radius: 4px;
	background: #fff;
}

.cr-card__icon {
	display: block;
	width: 30px;
	height: 30px;
	margin-bottom: 16px;
	color: var(--cr-navy);
}

.cr-card__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.cr-card__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--cr-navy);
}

.cr-card__text {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--cr-muted);
}


/* ---- Hiring process -------------------------------------------------------
   Four bolded run-on paragraphs in the old page. They describe a sequence, so
   they are numbered. */

.cr-process {
	padding: 44px 0;
	background: var(--cr-navy);
	color: #fff;
}

@media (min-width: 900px) {
	.cr-process { padding: 80px 0; }
}

.cr-steps {
	counter-reset: cr-step;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 32px 0 0;
	padding: 0;
}

@media (min-width: 640px) {
	.cr-steps { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (min-width: 1100px) {
	.cr-steps { grid-template-columns: repeat(4, 1fr); }
}

.cr-step {
	counter-increment: cr-step;
	min-width: 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.cr-step::before {
	content: counter(cr-step, decimal-leading-zero);
	display: block;
	margin-bottom: 12px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--cr-lightblue);
}

.cr-step__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
}

.cr-step__text {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.82);
}


/* ---- Vacancies ------------------------------------------------------------ */

.cr-vacancies { padding: 44px 0; }

@media (min-width: 900px) {
	.cr-vacancies { padding: 80px 0; }
}

.cr-vacancies__panel {
	padding: 32px 24px;
	border: 1px solid var(--cr-grey);
	border-radius: 4px;
	background: var(--cr-band-grey);
	text-align: center;
}

@media (min-width: 900px) {
	.cr-vacancies__panel { padding: 56px 40px; }
}

.cr-vacancies__heading {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.18;
	color: var(--cr-navy);
}

@media (min-width: 900px) {
	.cr-vacancies__heading { font-size: 34px; }
}

.cr-vacancies__text {
	margin: 14px auto 0;
	max-width: 60ch;
	font-size: 17px;
	line-height: 1.55;
	color: var(--cr-muted);
}

.cr-vacancies__actions { margin: 26px 0 0; }

/* The third-party privacy note. It was four sentences of italics in the middle
   of the reading column; it belongs here, at small print size, under the link
   it is actually about. */
.cr-vacancies__note {
	margin: 20px auto 0;
	max-width: 74ch;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cr-muted);
}


/* ---- Application ----------------------------------------------------------
   Reuses .pd-enquiry from product.css for the Gravity Forms styling; only the
   surrounding layout is defined here. */

.cr-apply {
	padding: 44px 0;
	background: var(--cr-band-blue);
}

@media (min-width: 900px) {
	.cr-apply { padding: 80px 0; }
}

.cr-apply__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 900px) {
	.cr-apply__inner { grid-template-columns: 1fr 1.1fr; gap: 64px; }
}

.cr-apply__intro,
.cr-apply__form { min-width: 0; }

.cr-apply__heading {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.18;
	color: var(--cr-navy);
}

@media (min-width: 900px) {
	.cr-apply__heading { font-size: 34px; }
}

.cr-apply__text {
	max-width: 60ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--cr-muted);
}

/* Gravity Forms' theme.min.css loads after the theme stylesheets, so an
   equal-specificity override loses on source order. The file upload field is
   the one control .pd-enquiry does not already cover, because no other form on
   the site has one. */
body .cr .gform_wrapper.gravity-theme .gform_fileupload_rules {
	margin-top: 6px;
	font-size: 13px;
	color: var(--cr-muted);
}

body .cr .gform_wrapper.gravity-theme input[type="file"] {
	width: 100%;
	padding: 12px;
	border: 1px dashed var(--cr-grey);
	border-radius: 2px;
	background: #fff;
	font-size: 15px;
	cursor: pointer;
}

body .cr .gform_wrapper.gravity-theme input[type="file"]:focus-visible {
	outline: 2px solid var(--cr-navy);
	outline-offset: 2px;
}