@charset "UTF-8";
@layer reset, vendor, theme, atoms, molecules, organisms, paragraphs, templates, pages, utility, drupal;

/* Global */

/* Drupal breakpoints */
@layer reset {
		@supports (interpolate-size: allow-keywords) {
	:root {
			interpolate-size: allow-keywords;
	}
		}

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

	/* Root container setup for container query fallback to viewport */
	html {
		container: root layout / inline-size;
		-webkit-text-size-adjust: none;
		   -moz-text-size-adjust: none;
		        text-size-adjust: none;
	}

	/* Set smooth scroll behavior for e.g. anchor navigation */
	html,
	body {
		scroll-behavior: smooth;
	}

	body,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	figure,
	blockquote,
	dl,
	dd {
		margin: 0;
	}

	/* Set body defaults */
	body {
		color: var(--s-body-color-default);
		font-weight: var(--s-body-font-weight-default);
		font-size: var(--s-body-font-size-default);
		line-height: var(--s-body-line-height-default);
		font-family: var(--s-body-font-family-default);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
		#main-content  > * {
			animation: main-content-fade-in var(--p-duration-normal) var(--p-easing-swift-out) both;
		}

			@media (prefers-reduced-motion: reduce) {
		#main-content  > * {
				animation: none;
		}
			}

	@keyframes main-content-fade-in {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	/* Remove default spacing in favour of better control in authored CSS */
	* {
		/*margin: 0;
        padding: 0;*/
	}

	/* Default display block for certain elements */
	img,
	svg,
	video,
	picture,
	figure,
	canvas,
	audio,
	iframe,
	embed,
	object {
		display: block;
	}

	/* Make images easier to work with */
	img,
	video,
	picture,
	figure,
	iframe {
		inline-size: auto;
		max-inline-size: 100%;
		block-size: auto;
		border: none;
	}

	/* Base styles for inputs and buttons */
	button,
	input,
	select,
	optgroup,
	textarea,
	::file-selector-button {
		border-radius: 0;
		background-color: transparent;
		color: inherit;
		font: inherit;
		font-variation-settings: inherit;
		font-feature-settings: inherit;
		letter-spacing: inherit;
		opacity: 1;
	}

	/* Ensure the hidden-attribute overwrites other styles */
	[hidden]:where(:not([hidden="until-found"])) {
		display: none !important;
	}

	/* Set default outline styles for interactive elements */
	button,
	input,
	select,
	textarea,
	summary,
	a {
		outline: transparent;
		outline-color: var(--p-outline-color);
		outline-offset: var(--p-outline-offset);
	}

		:is(button,input,select,textarea,summary,a):focus-visible {
			outline-style: var(--p-outline-style);
			outline-width: var(--p-outline-width);
		}

	/* Set default link styles */
	a {
		color: var(--s-link-color-default);
		-webkit-text-decoration: underline;
		text-decoration: underline;
		transition:
			color var(--p-duration-fast) var(--s-transition-timing-function-default),
			text-decoration-color var(--p-duration-fast) var(--s-transition-timing-function-default);
	}

		a:is(:hover,:focus-visible) {
			color: var(--s-link-color-hover-default);
			text-decoration-color: transparent;
		}

		a:active {
			color: var(--s-link-color-active-default);
		}

	/* Reset fieldset styles */
	fieldset {
		margin: 0;
		padding: 0;
		border: none;
	}

	/* Reset inline block display for certain elements */
	input,
	textarea,
	select,
	label,
	legend {
		display: inline-block;
		vertical-align: top;
	}

	/* Reset checkbox and radio styles */
	input[type="checkbox"],
	input[type="radio"] {
		inline-size: auto;
		padding: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	/* Reset placeholder styles */
	::placeholder {
		color: var(--s-form-placeholder-color);
	}

	/* Prevent resizing textareas horizontally by default. */
	textarea {
		resize: vertical;
	}

	/* Set default address style */
	address {
		font-style: normal;
	}

	/* Reset list styles that have non-default styling */
	[role="list"],
	[role="listbox"],
	[role="tablist"] {
		list-style: none;
	}

	/* Reduce animations and transitions according to user preference */
	@media (prefers-reduced-motion: reduce) {
		*,
		::before,
		::after {
			background-attachment: initial !important;
			animation-duration: 1ms !important;
			animation-delay: -1ms !important;
			animation-iteration-count: 1 !important;
			scroll-behavior: auto !important;
			transition-delay: -1ms !important;
			transition-duration: 1ms !important;
		}
	}

	.svg-sprite {
		display: none;
	}
}
@layer theme {
	h1,
	.h1,
	h2,
	.h2,
	h3,
	.h3,
	h4,
	.h4,
	h5,
	.h5,
	h6,
	.h6,
	.display {
		display: block;
		color: var(--s-headings-color-default);
		font-weight: var(--s-headings-font-weight-default);
		font-family: var(--s-headings-font-family-default);
		text-wrap: balance;
	}

	h1,
	.h1 {
		font-size: var(--s-h1-font-size);
		line-height: var(--s-h1-line-height);
	}

	h2,
	.h2 {
		font-size: var(--s-h2-font-size);
		line-height: var(--s-h2-line-height);
	}

	h3,
	.h3 {
		font-size: var(--s-h3-font-size);
		line-height: var(--s-h3-line-height);
	}

	h4,
	.h4 {
		font-size: var(--s-h4-font-size);
		line-height: var(--s-h4-line-height);
	}

	h5,
	.h5 {
		font-size: var(--s-h5-font-size);
		line-height: var(--s-h5-line-height);
	}

	h6,
	.h6 {
		font-size: var(--s-h6-font-size);
		line-height: var(--s-h6-line-height);
	}

	.display {
		font-size: var(--s-display-font-size);
		line-height: var(--s-display-line-height);
	}

	.lead,
	.lead p {
		font-weight: var(--s-lead-font-weight);
		font-size: var(--s-lead-font-size);
	}

	p,
	li {
		text-wrap: pretty;
	}

	/* General normalizing */
	sup {
		position: relative;
		inset-block-start: -0.52em;
		font-size: 0.6em;
		line-height: 1;
	}

	small {
		display: block;
		font-size: var(--s-sm-font-size);
	}
}
@layer utility {
	.sr-only {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		padding: 0;
		overflow: hidden;
		border: 0;
		white-space: nowrap;
		clip-path: rect(1px 1px 1px 1px);
	}

	/*
	 * Cover background with a diagonal gradient and decorative left-pointing
	 * chevron shapes. Based on the TRX Visual Design 2026 banner pattern.
	 *
	 * Usage:
	 *   <section class="bg-cover-arrow">…</section>
	 *   <section class="bg-cover-arrow bg-cover-arrow--blue">…</section>
	 *
	 * The element must have a defined height (via padding or explicit block-size).
	 * Override --bg-cover-gradient-* to create additional color variants.
	 */
	.bg-cover-arrow {
		--bg-cover-gradient-start: var(--p-color-primary-400);
		--bg-cover-gradient-mid: var(--p-color-primary-500);
		--bg-cover-gradient-end: var(--p-color-primary-600);

		position: relative;
		overflow: clip;
		background-image: linear-gradient(
			-57.24deg,
			var(--bg-cover-gradient-start) 2.59%,
			var(--bg-cover-gradient-mid) 49.02%,
			var(--bg-cover-gradient-end) 85.85%
		);
	}

		.bg-cover-arrow::before {
			position: absolute;
			inset: 0;
			/*
			 * SVG viewBox matches the original Figma banner (1312×463).
			 * overflow="visible" lets the tall chevrons extend beyond the
			 * viewBox; the parent's overflow:clip handles cropping.
			 * Each chevron uses translate(x, -891) because the shapes are
			 * 2239px tall, centred at y=1120, placed so their midpoint aligns
			 * with the vertical centre of the 463px banner (-891 = 0 - (2239/2 - 463/2)).
			 * Opacities mirror the Figma spec: 0.13 / 0.13 / 0.05 / 0.04 right→left.
			 */
			background-image: url("data:image/svg+xml,\
<svg overflow='visible' viewBox='0 0 1312 463' xmlns='http://www.w3.org/2000/svg'>\
<path opacity='0.13' fill='%23C2DFA0' transform='translate(802,-891)' d='M1195.34 2239.47H2051.25L855.914 1119.74L2051.25 0H1195.34L0 1119.76Z'/>\
<path opacity='0.13' fill='%23C2DFA0' transform='translate(633,-891)' d='M1195.34 2239.47H2051.25L855.914 1119.74L2051.25 0H1195.34L0 1119.76Z'/>\
<path opacity='0.05' fill='%23C2DFA0' transform='translate(479,-891)' d='M1195.34 2239.47H2051.25L855.914 1119.74L2051.25 0H1195.34L0 1119.76Z'/>\
<path opacity='0.04' fill='%23C2DFA0' transform='translate(336,-891)' d='M1195.34 2239.47H2051.25L855.914 1119.74L2051.25 0H1195.34L0 1119.76Z'/>\
</svg>");
			background-position: center;
			background-size: cover;
			content: "";
			pointer-events: none;
		}

	/*
	 * Lets popovers/dropdowns escape the banner while still cropping the
	 * decorative chevron SVG to the banner's rounded box. Lives in `utility`
	 * so it can override `.bg-cover-arrow`'s `overflow: clip` (later layer /
	 * same layer, higher specificity).
	 */
	.bg-cover-arrow.bg-cover-arrow--overflow-visible {
		overflow: visible;
	}

		.bg-cover-arrow.bg-cover-arrow--overflow-visible::before {
			border-radius: inherit;
			clip-path: inset(0 round var(--s-border-radius-default));
		}

	/*
	 * Insets an element from the viewport edges by --s-layout-padding-inline,
	 * centers it, and caps its width at content-width + 5vw each side.
	 *
	 * Usage:
	 *   <article class="extended-bg-wrapper">…</article>
	 *
	 * Override --c-extended-bg-wrapper-gap to change the side gap.
	 */
	.extended-bg-wrapper {
		inline-size: calc(100% - var(--s-extended-bg-wrapper-gap) * 2);
		max-inline-size: calc(var(--s-layout-content-width) + 10vw);
		margin-inline: auto;
	}

	/* Blue variant — override the gradient stops */
	.bg-cover-arrow--blue {
		--bg-cover-gradient-start: var(--p-color-state-info-200);
		--bg-cover-gradient-mid: var(--p-color-state-info-300);
		--bg-cover-gradient-end: color-mix(in srgb, var(--p-color-state-info-300) 70%, black);
	}

	/* White variant — override the gradient stops */
	.bg-cover-arrow--white {
		--bg-cover-gradient-start: var(--p-color-primary-200);
		--bg-cover-gradient-mid: var(--p-color-primary-50);
		--bg-cover-gradient-end: color-mix(in srgb, var(--p-color-primary-100) 70%, var(--p-color-primary-50));
	}

	/*
	 * Generic skeleton shimmer — use on any placeholder element while a lazy
	 * component is loading. The element must have an explicit width/height set
	 * inline or via a parent layout class.
	 */
	.skeleton {
		background: linear-gradient(
			90deg,
			var(--p-color-neutral-100) 25%,
			var(--p-color-neutral-50) 50%,
			var(--p-color-neutral-100) 75%
		);
		background-size: 200% 100%;
		animation: skeleton-shimmer 1.4s ease-in-out infinite;
	}

	@keyframes skeleton-shimmer {
		0% {
			background-position: 200% center;
		}
		100% {
			background-position: -200% center;
		}
	}
}
@layer paragraphs {
	.app-paragraph--unpublished {
		background-color: var(--s-paragraph-bg-color-unpublished);
	}

	/* Margins */
	.app-paragraph--margin-top-small {
		margin-block-start: var(--c-paragraph-margin-sm, var(--s-paragraph-margin-sm));
	}

	.app-paragraph--margin-top-normal {
		margin-block-start: var(--c-paragraph-margin-md, var(--s-paragraph-margin-md));
	}

	.app-paragraph--margin-top-large {
		margin-block-start: var(--c-paragraph-margin-lg, var(--s-paragraph-margin-lg));
	}

	.app-paragraph--margin-bottom-small {
		margin-block-end: var(--c-paragraph-margin-sm, var(--s-paragraph-margin-sm));
	}

	.app-paragraph--margin-bottom-normal {
		margin-block-end: var(--c-paragraph-margin-md, var(--s-paragraph-margin-md));
	}

	.app-paragraph--margin-bottom-large {
		margin-block-end: var(--c-paragraph-margin-lg, var(--s-paragraph-margin-lg));
	}

	.app-paragraph {
		min-inline-size: 0;
	}
			.app-paragraph.app-paragraph--bg-primary:has(.card-list) {
				--card-list-bg: var(--p-color-primary-light);

				position: relative;
				padding-block: calc(var(--s-layout-padding-inline) * 1.5);
			}

				@media (min-width: 992px) {
			.app-paragraph.app-paragraph--bg-primary:has(.card-list) {
					padding-block: var(--s-extended-bg-wrapper-gap);
			}
				}

				.app-paragraph.app-paragraph--bg-primary:has(.card-list)::before {
					z-index: -1;
					position: absolute;
					width: 100vw;
					inline-size: calc(100% + (var(--s-extended-bg-wrapper-gap) * 4));
					height: 100%;
					max-inline-size: calc(var(--s-layout-content-width) + 10vw);
					inset-block: 0;
					left: 50%;
					translate: -50% 0;
					border-radius: var(--p-radius-4);
					background-color: var(--card-list-bg);
					content: "";
				}
		.app-paragraph--text.app-paragraph--bg-primary {
			padding: var(--s-layout-padding-inline);
			border-radius: var(--s-border-radius-default);
			background-color: var(--p-color-primary-light);
		}
			.app-paragraph--textual-cards.app-paragraph--cards-columns.app-paragraph--bg-primary .textual-card-list__grid-wrapper {
				padding: var(--s-spacing-4);
				gap: var(--s-spacing-4);
				border-radius: var(--s-border-radius-default);
				background-color: var(--p-color-supporting-warm);
			}
		.app-paragraph--cards-columns .textual-card-list__header-wrapper {
			justify-content: center;
			margin-inline: auto;
			text-align: center;
		}
		.app-paragraph--textual-cards.app-paragraph--cards-slider.app-paragraph--bg-primary {
			--card-list-bg: var(--p-color-supporting-warm);

			position: relative;
		}

			.app-paragraph--textual-cards.app-paragraph--cards-slider.app-paragraph--bg-primary  > div {
				padding-block: var(--s-layout-padding-inline);
			}

			.app-paragraph--textual-cards.app-paragraph--cards-slider.app-paragraph--bg-primary::before {
				z-index: -1;
				position: absolute;
				right: 50%;
				left: 50%;
				width: 100vw;
				height: 100%;
				margin-right: -50vw;
				margin-left: -50vw;
				background-color: var(--card-list-bg);
				content: "";
			}
		.app-paragraph--embed iframe[src^="https://open.spotify.com"] {
			width: 100%;
			height: 100%;
		}
}
/* Vendor */
@layer vendor {
	/*
	 * App-wide Places autocomplete (custom listbox over Autocomplete Data API).
	 * Dropdown chrome mirrors site filter / dropdown panels.
	 */
	.places-autocomplete {
		--places-prediction-list-min-width: min(90vw, 22rem);

		position: relative;
		inline-size: 100%;
		min-inline-size: 0;
	}

	.places-autocomplete__list {
		z-index: 40;
		position: absolute;
		inset-block-start: calc(100% + 0.5rem);
		inset-inline-start: 0;
		display: flex;
		flex-direction: column;
		inline-size: max(100%, var(--places-prediction-list-min-width));
		min-inline-size: var(--places-prediction-list-min-width);
		margin: 0;
		padding-block: 0.25rem;
		padding-inline: 0;
		list-style: none;
		border: 1px solid var(--p-color-neutral-200);
		border-radius: var(--p-radius-1, 0.25rem);
		background-color: var(--s-dropdown-color-background, var(--p-color-white));
		box-shadow:
			0 0 2px rgb(var(--p-color-black-rgb) / 4%),
			0 4px 4px rgb(var(--p-color-black-rgb) / 6%);
	}

	.places-autocomplete__option {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		inline-size: 100%;
		padding: 0.75rem 1rem;
		gap: 0.125rem;
		border: none;
		border-radius: 0;
		background: transparent;
		color: var(--p-color-neutral-800);
		font: inherit;
		text-align: start;
		cursor: pointer;
		transition: background-color 0.15s ease;
	}

	.places-autocomplete__option:hover,
	.places-autocomplete__option[data-active="true"] {
		background-color: var(--p-color-primary-100);
	}

	.places-autocomplete__option:focus-visible {
		outline: 2px solid var(--s-color-brand-primary, var(--p-color-primary-500));
		outline-offset: -2px;
	}

	.places-autocomplete__option-main {
		color: var(--p-color-neutral-900);
		font-weight: var(--p-font-weight-medium, 500);
		font-size: 1rem;
		line-height: 1.5;
	}

	.places-autocomplete__option-secondary {
		color: var(--p-color-neutral-500);
		font-weight: var(--p-font-weight-regular, 400);
		font-size: var(--s-sm-font-size, 0.875rem);
		line-height: 1.4;
	}
	.grecaptcha-badge {
		visibility: hidden !important;
	}
}
@layer vendor {
	/*
	 * Hide the floating reCAPTCHA v3 badge.
	 * Google's Terms of Service allow hiding it when the page includes a
	 * text disclosure linking to the Privacy Policy and Terms of Service.
	 * See: https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed
	 */
}
/**
 * RecruitNow mounts by replacing <jobboard-application-form> with .rnFormWrapper.
 * Stay in `@layer organisms` so these beat `_form.css` (molecules). Scope under
 * `.recruitnow-application-form` so a stray `.rnFormWrapper` elsewhere is not styled.
 * Open enrollment (`.oe_widget`) is in `_recruitnow-open-enrollment.css`.
 */
@layer organisms {
.recruitnow-application-form .rnFormWrapper {
		--recruitnow-field-gap: var(--recruitnow-gap, var(--s-spacing-4-5));
		--recruitnow-label-gap: var(--label-margin-block-end, var(--s-spacing-3));
		display: flex;
		flex-direction: column;
		inline-size: 100%;
		margin: 0;
		padding: 0;
		color: var(--s-body-color-default);
		font-family: var(--s-body-font-family-default);
	}

		:is(.recruitnow-application-form .rnFormWrapper) img {
			display: inline-block;
			inline-size: auto !important;
			max-inline-size: 5.5rem !important;
			block-size: 1.25rem !important;
			width: auto !important;
			height: 1.25rem !important;
			object-fit: contain;
			vertical-align: middle;
		}

		:is(.recruitnow-application-form .rnFormWrapper) legend {
			display: none;
		}

		:is(.recruitnow-application-form .rnFormWrapper) fieldset {
			display: flex;
			flex-direction: column;
			gap: var(--recruitnow-field-gap);
			margin: 0;
			padding: 0;
			border: 0;
		}

		:is(.recruitnow-application-form .rnFormWrapper) label {
			display: block;
			font-weight: var(--s-form-label-font-weight);
		}

		/* RecruitNow puts the whole label in `.required`; don't use `_form.css` asterisks. */
		:is(.recruitnow-application-form .rnFormWrapper) label:has( + :required)::after,:is(.recruitnow-application-form .rnFormWrapper) label:has( + div > :required)::after {
			content: none;
		}

	.recruitnow-application-form .rnFormWrapper .rnFormContainer {
		display: flex;
		flex-direction: column;
		inline-size: 100%;
		margin: 0;
		padding: 0;
		gap: var(--recruitnow-section-gap);
	}

	.recruitnow-application-form .rnFormWrapper .rnFormContainer > h2 {
		display: block;
		margin: 0;
		color: var(--s-headings-color-default);
		font-weight: var(--s-headings-font-weight-default);
		font-size: var(--s-h5-font-size);
		line-height: var(--s-h5-line-height);
		font-family: var(--s-headings-font-family-default);
		text-align: start;
	}

	.recruitnow-application-form .rnFormWrapper .rnTitlePrefix:empty,.recruitnow-application-form .rnFormWrapper .rnIntroduction {
		display: none;
	}

	.recruitnow-application-form .rnFormWrapper .rnFieldList,
	.recruitnow-application-form .rnFormWrapper .rnFields {
		display: flex;
		flex-direction: column;
		inline-size: 100%;
		margin: 0;
		padding: 0;
		gap: var(--recruitnow-field-gap);
	}

	.recruitnow-application-form .rnFormWrapper .rnFormGroup,
	.recruitnow-application-form .rnFormWrapper .rnField {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		inline-size: 100%;
		margin: 0;
		gap: var(--recruitnow-label-gap);
	}

	.recruitnow-application-form .rnFormWrapper .rnLabel {
		display: block;
		margin: 0;
		color: var(--s-body-color-default);
		font-weight: var(--s-form-label-font-weight);
		font-size: var(--s-body-font-size-default);
		line-height: var(--s-body-line-height-default);
		font-family: var(--s-body-font-family-default);
	}

	/* RecruitNow wraps required label text in `.required` — match webform's red asterisk. */
	.recruitnow-application-form .rnFormWrapper .rnLabel .required::after {
		content: " *";
		color: var(--s-color-state-error-background);
	}

	.recruitnow-application-form .rnFormWrapper .rnHint,
	.recruitnow-application-form .rnFormWrapper .rnHelp,
	.recruitnow-application-form .rnFormWrapper .rnHelpText,
	.recruitnow-application-form .rnFormWrapper .rnHelpBlock,
	.recruitnow-application-form .rnFormWrapper .rnErrors {
		margin: 0;
		color: var(--s-body-color-default);
		font-size: var(--s-sm-font-size);
		font-weight: var(--p-font-weight-regular);
		font-family: var(--s-body-font-family-default);
	}

	.recruitnow-application-form .rnFormWrapper .rnErrors {
		color: var(--s-color-state-error-background);
	}

	.recruitnow-application-form .rnFormWrapper .rnFormControl:not(
			[type="tel"],
			[type="checkbox"],
			[type="radio"],
			[type="file"],
			[type="hidden"],
			[type="button"],
			[type="submit"]
		),
	.recruitnow-application-form .rnFormWrapper input:not(
			[type="checkbox"],
			[type="radio"],
			[type="file"],
			[type="hidden"],
			[type="button"],
			[type="submit"],
			[type="tel"]
		),
	.recruitnow-application-form .rnFormWrapper textarea,
	.recruitnow-application-form .rnFormWrapper select {
		display: block;
		inline-size: 100%;
		margin: 0;
		padding-block: var(--input-padding-block);
		padding-inline: var(--input-padding-inline);
		border: var(--s-border-width-default) var(--s-border-style-default) var(--input-border-color);
		border-radius: var(--input-border-radius);
		background-color: var(--p-color-white);
		color: inherit;
		font: inherit;
		appearance: none;
	}

	.recruitnow-application-form .rnFormWrapper textarea {
		min-block-size: 7.5rem;
		resize: vertical;
	}

	.recruitnow-application-form .rnFormWrapper .rnInternationalPhone {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: var(--s-spacing-3);
		inline-size: 100%;
	}

	.recruitnow-application-form .rnFormWrapper .rnPhoneCountry,
	.recruitnow-application-form .rnFormWrapper .rnPhone {
		position: relative;
		display: flex;
		flex: 1 1 12rem;
		align-items: center;
		min-inline-size: 0;
		padding-inline: var(--input-padding-inline);
		border: var(--s-border-width-default) var(--s-border-style-default) var(--input-border-color);
		border-radius: var(--input-border-radius);
		background-color: var(--p-color-white);
		color: inherit;
	}

	.recruitnow-application-form .rnFormWrapper .rnPhoneCountry:focus-within:has(:focus-visible),
	.recruitnow-application-form .rnFormWrapper .rnPhone:focus-within:has(:focus-visible),
	.recruitnow-application-form .rnFormWrapper .rnPhoneNumberInput:focus-within:has(:focus-visible),
	.recruitnow-application-form .rnFormWrapper .rnFileUpload:focus-within:has(:focus-visible) {
		outline: var(--s-outline-width) var(--s-outline-style) var(--s-color-focus) !important;
		outline-offset: var(--s-outline-offset);
	}

	.recruitnow-application-form .rnFormWrapper .rnPhoneCountry .rnSelectBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--s-spacing-2);
		inline-size: 100%;
		min-block-size: 3rem;
		color: inherit;
	}

	.recruitnow-application-form .rnFormWrapper .rnPhoneCountry .rnSelectValue {
		flex: 1 1 auto;
		min-inline-size: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: inherit;
		font-weight: var(--s-form-label-font-weight);
		font-size: var(--s-body-font-size-default);
		line-height: 1;
	}

	.recruitnow-application-form .rnFormWrapper .rnPhoneCountry .rnSelectBox::after {
		content: "";
		flex-shrink: 0;
		inline-size: 1.5rem;
		block-size: 1.5rem;
		background-color: var(--p-color-neutral-800);
		pointer-events: none;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
			center / 1.5rem 1.5rem no-repeat;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
			center / 1.5rem 1.5rem no-repeat;
	}

	/* Native select is visually hidden; keyboard focus ring is on `.rnPhoneCountry` (see :focus-within above). */
	.recruitnow-application-form .rnFormWrapper .rnPhoneCountry select {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		opacity: 0;
		outline: none;
		cursor: pointer;
	}

	.recruitnow-application-form .rnFormWrapper .rnPhonePrefix {
		flex-shrink: 0;
		padding-inline-end: var(--s-spacing-3);
		border-inline-end: var(--s-border-width-default) var(--s-border-style-default) var(--p-color-neutral-200);
		font-weight: var(--s-form-label-font-weight);
	}

	.recruitnow-application-form .rnFormWrapper .rnPhoneNumberInput {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		min-inline-size: 0;
		border: 0;
		background: transparent;
	}

	/* Inner tel controls: no outline; wrapper `:focus-within:has(:focus-visible)` shows the ring. */
	.recruitnow-application-form .rnFormWrapper .rnPhone input,
	.recruitnow-application-form .rnFormWrapper .rnPhone .rnFormControl,
	.recruitnow-application-form .rnFormWrapper .rnPhoneNumberInput .rnFormControl,
	.recruitnow-application-form .rnFormWrapper .rnInternationalPhone .rnPhone input {
		display: block;
		flex: 1 1 auto;
		inline-size: 100%;
		min-inline-size: 0;
		margin: 0;
		padding-block: var(--input-padding-block);
		padding-inline: var(--s-spacing-3) 0;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		color: inherit;
		outline: none;
	}

	.recruitnow-application-form .rnFormWrapper .rnSelectBox,
	.recruitnow-application-form .rnFormWrapper .rnSelect {
		inline-size: 100%;
	}

	.recruitnow-application-form .rnFormWrapper .rnFileUpload {
		--file-upload-icon-color: var(--p-color-neutral-500);
		--file-upload-label-color: var(--p-color-neutral-800);
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		inline-size: 100%;
		padding: var(--s-spacing-6) var(--s-spacing-4);
		gap: var(--s-spacing-3);
		border: var(--s-border-width-default) dashed var(--input-border-color);
		border-radius: var(--s-border-radius-sm);
		background-color: var(--s-color-neutral-background);
		text-align: center;
		cursor: pointer;
		transition:
			border-color var(--s-transition-duration-default) var(--s-transition-timing-function-default),
			background-color var(--s-transition-duration-default) var(--s-transition-timing-function-default);
	}

		:is(.recruitnow-application-form .rnFormWrapper .rnFileUpload)::before {
			content: "";
			flex-shrink: 0;
			inline-size: 1.5rem;
			block-size: 1.5rem;
			background-color: var(--file-upload-icon-color);
			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='black' viewBox='0 0 256 256'%3E%3Cpath d='M240,136v64a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V136a16,16,0,0,1,16-16H80a8,8,0,0,1,0,16H32v64H224V136H176a8,8,0,0,1,0-16h48A16,16,0,0,1,240,136ZM85.66,77.66,120,43.31V128a8,8,0,0,0,16,0V43.31l34.34,34.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,77.66Z'/%3E%3C/svg%3E")
				center / 1.5rem 1.5rem no-repeat;
			-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='black' viewBox='0 0 256 256'%3E%3Cpath d='M240,136v64a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V136a16,16,0,0,1,16-16H80a8,8,0,0,1,0,16H32v64H224V136H176a8,8,0,0,1,0-16h48A16,16,0,0,1,240,136ZM85.66,77.66,120,43.31V128a8,8,0,0,0,16,0V43.31l34.34,34.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,77.66Z'/%3E%3C/svg%3E")
				center / 1.5rem 1.5rem no-repeat;
			transition: background-color var(--s-transition-duration-default) var(--s-transition-timing-function-default);
		}

		:is(.recruitnow-application-form .rnFormWrapper .rnFileUpload):hover {
			--file-upload-icon-color: var(--p-color-neutral-700);
			--file-upload-label-color: var(--p-color-neutral-900);
			border-color: var(--p-color-neutral-500);
			background-color: var(--p-color-neutral-50);
		}

	.recruitnow-application-form .rnFormWrapper .rnFileUpload .rnAction {
		color: var(--file-upload-label-color);
		font-weight: var(--p-font-weight-semi-bold);
		font-size: var(--s-sm-font-size);
		line-height: 1.6;
		font-family: var(--s-body-font-family-default);
	}

	.recruitnow-application-form .rnFormWrapper .rnFileUpload .rnFilename {
		order: 2;
		color: var(--p-color-neutral-600);
		font-weight: var(--p-font-weight-regular);
		font-size: var(--s-sm-font-size);
		line-height: 1.4;
		font-family: var(--s-body-font-family-default);
	}

	.recruitnow-application-form .rnFormWrapper .rnFileUpload .rnFileUpload-types-hint {
		order: 3;
		display: block;
		position: relative;
		z-index: 1;
		pointer-events: none;
		color: var(--p-color-neutral-500);
		font-weight: var(--p-font-weight-regular);
		font-size: var(--s-xs-font-size, var(--s-sm-font-size));
		line-height: 1.4;
		max-inline-size: 100%;
	}

	.recruitnow-application-form .rnFormWrapper .rnFileUpload input[type="file"] {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		opacity: 0;
		cursor: pointer;
	}

	/*
	 * Lone privacy checkbox: top up the 20px field gap to the 40px section gap,
	 * matching `.webform__section`.
	 */
	.recruitnow-application-form .rnFormWrapper .rnFieldList > .rnFormGroup:has(.rnPrivacyStatement),
	.recruitnow-application-form .rnFormWrapper .rnFields > .rnFormGroup:has(.rnPrivacyStatement),
	.recruitnow-application-form .rnFormWrapper .rnFieldList > .rnprivacystatementField,
	.recruitnow-application-form .rnFormWrapper .rnFields > .rnprivacystatementField,
	.recruitnow-application-form .rnFormWrapper .rnFieldList > .rncheckboxField.rnmail-and-whatsapp-consent,
	.recruitnow-application-form .rnFormWrapper .rnFields > .rncheckboxField.rnmail-and-whatsapp-consent,
	.recruitnow-application-form .rnFormWrapper fieldset > .rnButtons,
	.recruitnow-application-form .rnFormWrapper .rnFieldList > .rnButtons,
	.recruitnow-application-form .rnFormWrapper .rnFields > .rnButtons {
		margin-block-start: calc(var(--recruitnow-section-gap) - var(--recruitnow-field-gap));
	}

	.recruitnow-application-form .rnFormWrapper .rnFormGroup:has(.rnPrivacyStatement),
	.recruitnow-application-form .rnFormWrapper .rnprivacystatementField,
	.recruitnow-application-form .rnFormWrapper .rncheckboxField.rnmail-and-whatsapp-consent {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: start;
		column-gap: var(--s-spacing-2);
		row-gap: var(--s-spacing-1);
	}

	.recruitnow-application-form .rnFormWrapper .rnFormGroup:has(.rnPrivacyStatement) .rnLabel,
	.recruitnow-application-form .rnFormWrapper .rnprivacystatementField .rnLabel,
	.recruitnow-application-form .rnFormWrapper .rncheckboxField.rnmail-and-whatsapp-consent .rnLabel {
		grid-column: 2;
		align-self: center;
		color: inherit;
		font-weight: var(--p-font-weight-regular);
		font-size: var(--s-body-font-size-default);
		line-height: var(--s-body-line-height-default);
		font-family: var(--s-body-font-family-default);
	}

	.recruitnow-application-form .rnFormWrapper .rnFormGroup:has(.rnPrivacyStatement) .rnLabel::after,
	.recruitnow-application-form .rnFormWrapper .rnFormGroup:has(.rnPrivacyStatement) .rnLabel .required::after,
	.recruitnow-application-form .rnFormWrapper .rnprivacystatementField .rnLabel::after,
	.recruitnow-application-form .rnFormWrapper .rnprivacystatementField .rnLabel .required::after,
	.recruitnow-application-form .rnFormWrapper .rncheckboxField.rnmail-and-whatsapp-consent .rnLabel::after,
	.recruitnow-application-form .rnFormWrapper .rncheckboxField.rnmail-and-whatsapp-consent .rnLabel .required::after {
		content: none;
	}

	.recruitnow-application-form .rnFormWrapper .rnFormGroup:has(.rnPrivacyStatement) .rnLabel a,
	.recruitnow-application-form .rnFormWrapper .rnprivacystatementField .rnLabel a,
	.recruitnow-application-form .rnFormWrapper .rncheckboxField.rnmail-and-whatsapp-consent .rnLabel a {
		color: currentColor;
		-webkit-text-decoration: underline;
		text-decoration: underline;
	}

	.recruitnow-application-form .rnFormWrapper .rnFormGroup:has(.rnPrivacyStatement) .rnFieldWrap,
	.recruitnow-application-form .rnFormWrapper .rnprivacystatementField .rnFieldWrap,
	.recruitnow-application-form .rnFormWrapper .rncheckboxField.rnmail-and-whatsapp-consent .rnFieldWrap {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
	}

	.recruitnow-application-form .rnFormWrapper .rnFormGroup:has(.rnPrivacyStatement) .rnErrors,
	.recruitnow-application-form .rnFormWrapper .rnprivacystatementField .rnErrors,
	.recruitnow-application-form .rnFormWrapper .rncheckboxField.rnmail-and-whatsapp-consent .rnErrors {
		grid-column: 1 / -1;
	}

	.recruitnow-application-form .rnFormWrapper .rnPrivacyStatement,
	.recruitnow-application-form .rnFormWrapper .rnCheckbox {
		display: flex;
		align-items: center;
	}

	.recruitnow-application-form .rnFormWrapper .rnCheckbox input[type="checkbox"],
	.recruitnow-application-form .rnFormWrapper .rnFormControl[type="checkbox"],
	.recruitnow-application-form .rnFormWrapper input[type="checkbox"] {
		appearance: none;
		display: inline-block;
		flex-shrink: 0;
		inline-size: var(--checkbox-size);
		block-size: var(--checkbox-size);
		margin: 0;
		padding: 0;
		min-inline-size: 0;
		min-block-size: 0;
		border: var(--s-border-width-default) var(--s-border-style-default) var(--input-border-color);
		border-radius: var(--p-radius-1);
		background-color: var(--checkbox-background-color);
		cursor: pointer;
		transition-duration: var(--s-transition-duration-default);
		transition-property: background-color, border-color, scale;
		transition-timing-function: var(--s-transition-timing-function-default);
	}

		:is(.recruitnow-application-form .rnFormWrapper .rnCheckbox input[type="checkbox"],.recruitnow-application-form .rnFormWrapper .rnFormControl[type="checkbox"],.recruitnow-application-form .rnFormWrapper input[type="checkbox"]):checked {
			border-color: transparent;
			background-color: var(--checkbox-checked-color);
			background-image: var(--checkbox-checked-icon);
			background-position: center;
			background-repeat: no-repeat;
		}

		:is(.recruitnow-application-form .rnFormWrapper .rnCheckbox input[type="checkbox"],.recruitnow-application-form .rnFormWrapper .rnFormControl[type="checkbox"],.recruitnow-application-form .rnFormWrapper input[type="checkbox"]):not(:checked):not(:disabled):hover {
			background-color: var(--checkbox-hover-color);
		}

		:is(.recruitnow-application-form .rnFormWrapper .rnCheckbox input[type="checkbox"],.recruitnow-application-form .rnFormWrapper .rnFormControl[type="checkbox"],.recruitnow-application-form .rnFormWrapper input[type="checkbox"]):active:not(:disabled) {
			scale: 0.95;
		}

	/* WhatsApp consent uses `.rnFormControl` on the checkbox; beat text-input padding. */
	.recruitnow-application-form .rnFormWrapper .rncheckboxField.rnmail-and-whatsapp-consent .rnFieldWrap .rnFormControl,
	.recruitnow-application-form .rnFormWrapper .rncheckboxField.rnmail-and-whatsapp-consent .rnFieldWrap input[type="checkbox"] {
		padding: 0;
		inline-size: var(--checkbox-size);
		block-size: var(--checkbox-size);
	}

	.recruitnow-application-form .rnFormWrapper .rnButtons {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 0;
		padding: 0;
		gap: var(--s-spacing-3);
	}

	.recruitnow-application-form .rnFormWrapper .rnButtons .button,
	.recruitnow-application-form .rnFormWrapper .rnButtons button,
	.recruitnow-application-form .rnFormWrapper .rnButtons [type="submit"] {
		inline-size: 100%;
	}

		@media (min-width: 768px) {

	.recruitnow-application-form .rnFormWrapper .rnButtons .button,
	.recruitnow-application-form .rnFormWrapper .rnButtons button,
	.recruitnow-application-form .rnFormWrapper .rnButtons [type="submit"] {
			inline-size: fit-content;
	}
		}

	.recruitnow-application-form .rnFormWrapper .rnErrorContainer {
		color: var(--s-color-state-error-background);
	}
	.recruitnow-application-form recruitnow-open-enrollment-widget {
		display: block;
		inline-size: 100%;
	}

	.recruitnow-application-form .oe_widget {
		--recruitnow-field-gap: var(--recruitnow-gap, var(--s-spacing-4-5));
		--recruitnow-label-gap: var(--label-margin-block-end, var(--s-spacing-3));
		display: flex;
		flex-direction: column;
		inline-size: 100%;
		margin: 0;
		padding: 0;
		gap: var(--recruitnow-section-gap);
		color: var(--s-body-color-default);
		font-family: var(--s-body-font-family-default);
	}

	.recruitnow-application-form .oe_widget > a[name="widgetTop"] {
		display: none;
	}

	.recruitnow-application-form .oe_widget .oe_title {
		display: block;
		margin: 0;
		color: var(--s-headings-color-default);
		font-weight: var(--s-headings-font-weight-default);
		font-size: var(--s-h5-font-size);
		line-height: var(--s-h5-line-height);
		font-family: var(--s-headings-font-family-default);
		text-align: start;
	}

	.recruitnow-application-form .oe_widget .oe_step,
	.recruitnow-application-form .oe_widget .oe_stepContainer,
	.recruitnow-application-form .oe_widget .oe_block,
	.recruitnow-application-form .oe_widget .oe_formElement,
	.recruitnow-application-form .oe_widget .oe_textElement,
	.recruitnow-application-form .oe_widget .oe_fileElement,
	.recruitnow-application-form .oe_widget .oe_professionElement,
	.recruitnow-application-form .oe_widget .oe_checkboxElement,
	.recruitnow-application-form .oe_widget .oe_googleMaps,
	.recruitnow-application-form .oe_widget .oe_functions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		inline-size: 100%;
		margin: 0;
		padding: 0;
		gap: var(--recruitnow-label-gap);
	}

	.recruitnow-application-form .oe_widget .oe_step,
	.recruitnow-application-form .oe_widget .oe_stepContainer {
		gap: var(--recruitnow-section-gap);
	}

	.recruitnow-application-form .oe_widget .oe_block {
		gap: var(--recruitnow-field-gap);
	}

	.recruitnow-application-form .oe_widget .oe_label {
		display: block;
		margin: 0;
		padding: 0;
		color: var(--s-body-color-default);
		font-weight: var(--s-form-label-font-weight);
		font-size: var(--s-body-font-size-default);
		line-height: var(--s-body-line-height-default);
		font-family: var(--s-body-font-family-default);
	}

	.recruitnow-application-form .oe_widget .oe_formElement.oe_required .oe_label::after {
		content: " *";
		color: var(--s-color-state-error-background);
	}

	.recruitnow-application-form .oe_widget .oe_formElement.oe_required .oe_checkboxElement > .oe_label::after,
	.recruitnow-application-form .oe_widget .oe_formElement.oe_required .oe_checkboxListElement .oe_label::after {
		content: none;
	}

	.recruitnow-application-form .oe_widget .oe_help,
	.recruitnow-application-form .oe_widget .oe_validation {
		margin: 0;
		color: var(--s-body-color-default);
		font-size: var(--s-sm-font-size);
		font-weight: var(--p-font-weight-regular);
		font-family: var(--s-body-font-family-default);
	}

	.recruitnow-application-form .oe_widget .oe_validation {
		color: var(--s-color-state-error-background);
	}

	.recruitnow-application-form .oe_widget .oe_help a {
		color: currentColor;
		-webkit-text-decoration: underline;
		text-decoration: underline;
	}

	.recruitnow-application-form .oe_widget .oe_textElement input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="tel"]),
	.recruitnow-application-form .oe_widget .oe_functions input {
		display: block;
		inline-size: 100%;
		margin: 0;
		padding-block: var(--input-padding-block);
		padding-inline: var(--input-padding-inline);
		border: var(--s-border-width-default) var(--s-border-style-default) var(--input-border-color);
		border-radius: var(--input-border-radius);
		background-color: var(--p-color-white);
		color: inherit;
		font: inherit;
		appearance: none;
	}

	.recruitnow-application-form .oe_widget .oe_fieldset {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		inline-size: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		gap: var(--s-spacing-3);
	}

	.recruitnow-application-form .oe_widget .oe_fieldset > legend {
		flex: 1 1 100%;
		float: none;
		inline-size: 100%;
	}

	.recruitnow-application-form .oe_widget .oe_phoneNumber,
	.recruitnow-application-form .oe_widget label.oe_phoneNumberInput {
		position: relative;
		display: flex;
		flex: 1 1 12rem;
		flex-direction: row;
		align-items: center;
		min-inline-size: 0;
		padding-inline: var(--input-padding-inline);
		border: var(--s-border-width-default) var(--s-border-style-default) var(--input-border-color);
		border-radius: var(--input-border-radius);
		background-color: var(--p-color-white);
		color: inherit;
		gap: 0;
	}
}
/**
 * RecruitNow open-enrollment widget mounts as `.oe_widget` (not `.rnFormWrapper`).
 * Stay in `@layer organisms` so these beat `_form.css`. Scope under
 * `.recruitnow-application-form` so a stray `.oe_widget` elsewhere is not styled.
 * Drop their stylesheet from the Drupal embed — unlayered vendor CSS would win.
 */
@layer organisms {

	.recruitnow-application-form .oe_widget .oe_phoneNumber:focus-within:has(:focus-visible),
	.recruitnow-application-form .oe_widget label.oe_phoneNumberInput:focus-within:has(:focus-visible),
	.recruitnow-application-form .oe_widget .oe_selector:not(.oe_phoneSelector):focus-within:has(:focus-visible),
	.recruitnow-application-form .oe_widget .oe_uploader:focus-within:has(:focus-visible) {
		outline: var(--s-outline-width) var(--s-outline-style) var(--s-color-focus) !important;
		outline-offset: var(--s-outline-offset);
	}

	.recruitnow-application-form .oe_widget .oe_selector {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		inline-size: 100%;
		min-block-size: 3rem;
		padding-inline: var(--input-padding-inline);
		border: var(--s-border-width-default) var(--s-border-style-default) var(--input-border-color);
		border-radius: var(--input-border-radius);
		background-color: var(--p-color-white);
		color: inherit;
		gap: var(--s-spacing-2);
	}

	.recruitnow-application-form .oe_widget .oe_phoneNumber .oe_selector {
		min-block-size: 3rem;
		padding-inline: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.recruitnow-application-form .oe_widget .oe_selectorValue {
		flex: 1 1 auto;
		min-inline-size: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: inherit;
		font-weight: var(--s-form-label-font-weight);
		font-size: var(--s-body-font-size-default);
		line-height: var(--s-body-line-height-default);
	}

	.recruitnow-application-form .oe_widget .oe_selector::after {
		content: "";
		flex-shrink: 0;
		inline-size: 1.5rem;
		block-size: 1.5rem;
		background-color: var(--p-color-neutral-800);
		pointer-events: none;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
			center / 1.5rem 1.5rem no-repeat;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
			center / 1.5rem 1.5rem no-repeat;
	}

	/* Native select is visually hidden; keyboard focus ring is on the wrapper (see :focus-within above). */
	.recruitnow-application-form .oe_widget .oe_selector select,
	.recruitnow-application-form .oe_widget .oe_phoneNumber select {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		margin: 0;
		padding: 0;
		border: 0 !important;
		border-radius: 0 !important;
		opacity: 0;
		outline: none !important;
		cursor: pointer;
		appearance: none;
		background: transparent !important;
		box-shadow: none !important;
	}

	.recruitnow-application-form .oe_widget .oe_phone_prefix {
		flex-shrink: 0;
		padding-inline-end: var(--s-spacing-3);
		border-inline-end: var(--s-border-width-default) var(--s-border-style-default) var(--p-color-neutral-200);
		font-weight: var(--s-form-label-font-weight);
	}

	.recruitnow-application-form .oe_widget label.oe_phoneNumberInput span.oe_phoneNumberInput {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		min-inline-size: 0;
		border: 0;
		background: transparent;
	}

	/* Inner control: no outline; `label.oe_phoneNumberInput:focus-within:has(:focus-visible)` shows the ring. */
	.recruitnow-application-form .oe_widget label.oe_phoneNumberInput input {
		display: block;
		flex: 1 1 auto;
		inline-size: 100%;
		min-inline-size: 0;
		margin: 0;
		padding-block: var(--input-padding-block);
		padding-inline: var(--s-spacing-3) 0;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		color: inherit;
		outline: none;
		font: inherit;
	}

	.recruitnow-application-form .oe_widget .oe_mapResult {
		display: flex;
		flex-direction: column;
		inline-size: 100%;
		gap: var(--s-spacing-3);
	}

	.recruitnow-application-form .oe_widget .oe_department {
		display: flex;
		flex-direction: column;
		inline-size: 100%;
		padding: var(--s-spacing-4);
		gap: var(--s-spacing-2);
		border: var(--s-border-width-default) var(--s-border-style-default) var(--p-color-neutral-200);
		border-radius: var(--input-border-radius);
		background-color: var(--s-color-neutral-background);
	}

	.recruitnow-application-form .oe_widget .oe_department :is(h1, h2, h3, h4, h5, h6) {
		margin: 0;
		color: var(--s-headings-color-default);
		font-weight: var(--s-headings-font-weight-default);
		font-size: var(--s-body-font-size-default);
		line-height: var(--s-body-line-height-default);
		font-family: var(--s-headings-font-family-default);
	}

	.recruitnow-application-form .oe_widget .oe_department :is(p, address, ul, ol) {
		margin: 0;
		padding: 0;
		color: var(--s-body-color-default);
		font-weight: var(--p-font-weight-regular);
		font-size: var(--s-sm-font-size);
		line-height: 1.5;
		font-family: var(--s-body-font-family-default);
		list-style: none;
	}

	.recruitnow-application-form .oe_widget .oe_department a {
		color: currentColor;
		-webkit-text-decoration: underline;
		text-decoration: underline;
	}

	.recruitnow-application-form .oe_widget #oe_map {
		inline-size: 100%;
		block-size: 15.625rem;
		overflow: hidden;
		border-radius: var(--input-border-radius);
	}

	.recruitnow-application-form .oe_widget .oe_uploader {
		--file-upload-icon-color: var(--p-color-neutral-500);
		--file-upload-label-color: var(--p-color-neutral-800);
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		inline-size: 100%;
		padding: var(--s-spacing-6) var(--s-spacing-4);
		gap: var(--s-spacing-3);
		border: var(--s-border-width-default) dashed var(--input-border-color);
		border-radius: var(--s-border-radius-sm);
		background-color: var(--s-color-neutral-background);
		text-align: center;
		cursor: pointer;
		transition:
			border-color var(--s-transition-duration-default) var(--s-transition-timing-function-default),
			background-color var(--s-transition-duration-default) var(--s-transition-timing-function-default);
	}

		:is(.recruitnow-application-form .oe_widget .oe_uploader)::before {
			content: "";
			flex-shrink: 0;
			inline-size: 1.5rem;
			block-size: 1.5rem;
			background-color: var(--file-upload-icon-color);
			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='black' viewBox='0 0 256 256'%3E%3Cpath d='M240,136v64a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V136a16,16,0,0,1,16-16H80a8,8,0,0,1,0,16H32v64H224V136H176a8,8,0,0,1,0-16h48A16,16,0,0,1,240,136ZM85.66,77.66,120,43.31V128a8,8,0,0,0,16,0V43.31l34.34,34.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,77.66Z'/%3E%3C/svg%3E")
				center / 1.5rem 1.5rem no-repeat;
			-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='black' viewBox='0 0 256 256'%3E%3Cpath d='M240,136v64a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V136a16,16,0,0,1,16-16H80a8,8,0,0,1,0,16H32v64H224V136H176a8,8,0,0,1,0-16h48A16,16,0,0,1,240,136ZM85.66,77.66,120,43.31V128a8,8,0,0,0,16,0V43.31l34.34,34.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,77.66Z'/%3E%3C/svg%3E")
				center / 1.5rem 1.5rem no-repeat;
			transition: background-color var(--s-transition-duration-default) var(--s-transition-timing-function-default);
		}

		:is(.recruitnow-application-form .oe_widget .oe_uploader):hover {
			--file-upload-icon-color: var(--p-color-neutral-700);
			--file-upload-label-color: var(--p-color-neutral-900);
			border-color: var(--p-color-neutral-500);
			background-color: var(--p-color-neutral-50);
		}

	.recruitnow-application-form .oe_widget .oe_uploaderButton {
		color: var(--file-upload-label-color);
		font-weight: var(--p-font-weight-semi-bold);
		font-size: var(--s-sm-font-size);
		line-height: 1.6;
		font-family: var(--s-body-font-family-default);
	}

	.recruitnow-application-form .oe_widget .oe_uploaderValue {
		order: 2;
		color: var(--p-color-neutral-600);
		font-weight: var(--p-font-weight-regular);
		font-size: var(--s-sm-font-size);
		line-height: 1.4;
		font-family: var(--s-body-font-family-default);
	}

	.recruitnow-application-form .oe_widget .oe_uploader input[type="file"] {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		opacity: 0;
		cursor: pointer;
	}

	.recruitnow-application-form .oe_widget .oe_checkboxList {
		display: flex;
		flex-direction: column;
		gap: var(--s-spacing-2);
	}

	.recruitnow-application-form .oe_widget .oe_checkboxListElement {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: start;
		column-gap: var(--s-spacing-2);
		margin: 0;
		font-weight: var(--p-font-weight-regular);
	}

	.recruitnow-application-form .oe_widget .oe_checkboxListElement .oe_label {
		grid-column: 2;
		align-self: center;
		color: inherit;
		font-weight: var(--p-font-weight-regular);
		font-size: var(--s-body-font-size-default);
		line-height: var(--s-body-line-height-default);
	}

	.recruitnow-application-form .oe_widget input[type="checkbox"] {
		appearance: none;
		display: inline-block;
		flex-shrink: 0;
		inline-size: var(--checkbox-size);
		block-size: var(--checkbox-size);
		margin: 0;
		border: var(--s-border-width-default) var(--s-border-style-default) var(--input-border-color);
		border-radius: var(--p-radius-1);
		background-color: var(--checkbox-background-color);
		cursor: pointer;
		transition-duration: var(--s-transition-duration-default);
		transition-property: background-color, border-color, scale;
		transition-timing-function: var(--s-transition-timing-function-default);
	}

		:is(.recruitnow-application-form .oe_widget input[type="checkbox"]):checked {
			border-color: transparent;
			background-color: var(--checkbox-checked-color);
			background-image: var(--checkbox-checked-icon);
			background-position: center;
			background-repeat: no-repeat;
		}

		:is(.recruitnow-application-form .oe_widget input[type="checkbox"]):not(:checked):not(:disabled):hover {
			background-color: var(--checkbox-hover-color);
		}

		:is(.recruitnow-application-form .oe_widget input[type="checkbox"]):active:not(:disabled) {
			scale: 0.95;
		}

	.recruitnow-application-form .oe_widget .oe_buttons {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 0;
		padding: 0;
		gap: var(--s-spacing-3);
	}

	.recruitnow-application-form .oe_widget .oe_buttons .button,
	.recruitnow-application-form .oe_widget .oe_buttons button {
		inline-size: 100%;
	}

		@media (min-width: 768px) {

	.recruitnow-application-form .oe_widget .oe_buttons .button,
	.recruitnow-application-form .oe_widget .oe_buttons button {
			inline-size: fit-content;
	}
		}
}
/* Atoms */
@layer atoms {
	.button {
		--button-font-family: var(--c-button-font-family, var(--s-button-font-family));
		--button-font-weight: var(--c-button-font-weight, var(--s-button-font-weight));
		--button-font-size: var(--c-button-font-size, var(--s-button-font-size));
		--button-underline-offset: var(--c-button-underline-offset, 0.25rem);
		--button-line-height: var(--c-button-line-height, var(--s-body-line-height-default));
		--button-border-radius: var(--c-button-border-radius, var(--s-button-border-radius));
		--button-outline-offset: 0;

		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: fit-content;
		padding: var(--button-padding-y) var(--button-padding-x);
		border: var(--button-border-width, 0) var(--button-border-style, none) var(--button-color-border, transparent);
		border-radius: var(--button-border-radius);
		outline: var(--button-outline-width) var(--button-outline-style) var(--button-outline-border-color);
		outline-offset: var(--button-outline-offset);
		background-color: var(--button-color-background);
		color: var(--button-color-foreground);
		font-weight: var(--button-font-weight);
		font-size: var(--button-font-size);
		line-height: var(--button-line-height);
		font-family: var(--button-font-family);
		-webkit-text-decoration: none;
		text-decoration: none;
		text-underline-offset: var(--button-underline-offset);
		cursor: pointer;
		transition-duration: var(--s-transition-duration-default);
		transition-property: background-color, color, border-color;
		transition-timing-function: var(--s-transition-timing-function-default);
	}

		.button:hover:not(:disabled) {
			--button-color-background: var(--button-color-background-hover);
			--button-color-foreground: var(--button-color-foreground-hover);
		}

		.button:focus-visible {
			--button-outline-width: var(--c-button-outline-width, var(--s-outline-width));
			--button-outline-style: var(--c-button-outline-style, var(--s-outline-style));
			--button-outline-offset: var(--c-button-outline-offset, var(--s-outline-offset));
			--button-outline-border-color: var(--c-button-color-focus, var(--s-color-focus));
		}

		.button:disabled {
			cursor: not-allowed;
		}

		.button:active:not(:disabled) {
			--button-color-background: var(--button-color-background-active);
			--button-color-foreground: var(--button-color-foreground-active);
			--button-border-width: var(--button-border-width-active, 0);
		}

	.button--sm {
		--button-padding-x: var(--s-button-sm-padding-x);
		--button-padding-y: var(--s-button-sm-padding-y);
		--button-font-size: var(--s-button-sm-font-size);
	}

	.button--md {
		--button-padding-x: var(--s-button-md-padding-x);
		--button-padding-y: var(--s-button-md-padding-y);
		--button-font-size: var(--s-button-md-font-size);
	}

	.button--lg {
		--button-padding-x: var(--s-button-lg-padding-x);
		--button-padding-y: var(--s-button-lg-padding-y);
		--button-font-size: var(--s-button-lg-font-size);
	}
		.button--primary.button--dark {
			--button-color-background: var(--s-button-primary-dark-color-background);
			--button-color-background-hover: var(--s-button-primary-dark-color-background-hover);
			--button-color-background-active: var(--s-button-primary-dark-color-background-active);
			--button-color-foreground: var(--s-button-primary-dark-color-foreground);
			--button-color-foreground-hover: var(--s-button-primary-dark-color-foreground-hover);
			--button-color-foreground-active: var(--s-button-primary-dark-color-foreground-active);
		}

			.button--primary.button--dark:disabled {
				--button-color-background: var(--s-button-primary-dark-color-background-disabled);
				--button-color-foreground: var(--s-button-primary-dark-color-foreground-disabled);
			}

		.button--primary.button--light {
			--button-color-background: var(--s-button-primary-light-color-background);
			--button-color-background-hover: var(--s-button-primary-light-color-background-hover);
			--button-color-background-active: var(--s-button-primary-light-color-background-active);
			--button-color-foreground: var(--s-button-primary-light-color-foreground);
			--button-color-foreground-hover: var(--s-button-primary-light-color-foreground-hover);
			--button-color-foreground-active: var(--s-button-primary-light-color-foreground-active);
		}

			.button--primary.button--light:disabled {
				--button-color-background: var(--s-button-primary-light-color-background-disabled);
				--button-color-foreground: var(--s-button-primary-light-color-foreground-disabled);
			}

	.button--secondary {
		--button-border-width: var(--s-button-secondary-border-width);
		--button-border-width-active: var(--s-button-secondary-border-width-active);
		--button-border-style: var(--s-button-secondary-border-style);
	}

		.button--secondary.button--dark {
			--button-color-border: var(--s-button-secondary-dark-color-border);
			--button-color-background: var(--s-button-secondary-dark-color-background);
			--button-color-background-hover: var(--s-button-secondary-dark-color-background-hover);
			--button-color-background-active: var(--s-button-secondary-dark-color-background-active);
			--button-color-foreground: var(--s-button-secondary-dark-color-foreground);
			--button-color-foreground-hover: var(--s-button-secondary-dark-color-foreground-hover);
			--button-color-foreground-active: var(--s-button-secondary-dark-color-foreground-active);
		}

			.button--secondary.button--dark:hover:not(:disabled) {
				--button-color-border: var(--s-button-secondary-dark-color-border-hover);
			}

			.button--secondary.button--dark:active {
				--button-color-border: var(--s-button-secondary-dark-color-border-active);
			}

			.button--secondary.button--dark:disabled {
				--button-color-border: var(--s-button-secondary-dark-color-border-disabled);
				--button-color-background: var(--s-button-secondary-dark-color-background-disabled);
				--button-color-foreground: var(--s-button-secondary-dark-color-foreground-disabled);
			}

		.button--secondary.button--light {
			--button-color-border: var(--s-button-secondary-light-color-border);
			--button-color-background: var(--s-button-secondary-light-color-background);
			--button-color-background-hover: var(--s-button-secondary-light-color-background-hover);
			--button-color-background-active: var(--s-button-secondary-light-color-background-active);
			--button-color-foreground: var(--s-button-secondary-light-color-foreground);
			--button-color-foreground-hover: var(--s-button-secondary-light-color-foreground-hover);
			--button-color-foreground-active: var(--s-button-secondary-light-color-foreground-active);
		}

			.button--secondary.button--light:hover:not(:disabled) {
				--button-color-border: var(--s-button-secondary-light-color-border-hover);
			}

			.button--secondary.button--light:active {
				--button-color-border: var(--s-button-secondary-light-color-border-active);
			}

			.button--secondary.button--light:disabled {
				--button-color-border: var(--s-button-secondary-light-color-border-disabled);
				--button-color-background: var(--s-button-secondary-light-color-background-disabled);
				--button-color-foreground: var(--s-button-secondary-light-color-foreground-disabled);
			}

	.button--icon {
		--button-padding-x: var(--c-button-icon-padding-x, 0);
		--button-padding-y: var(--c-button-icon-padding-y, 0);
	}

	.button--link {
		--button-outline-offset: 0.5rem;
		--button-color-foreground: var(--button-link-color-foreground);

		position: relative;
		padding: 0;
		padding-block-end: 0.25rem;
		border-radius: 0;
		background-color: transparent;
		-webkit-text-decoration: none;
		text-decoration: none;
	}

		.button--link::after {
			position: absolute;
			inline-size: 100%;
			block-size: 0.125rem;
			inset-block-end: 0;
			inset-inline-start: 0;
			background-color: var(--button-link-color-border);
			content: "";
		}

		.button--link:hover {
			--button-color-foreground: var(--button-link-color-foreground-hover);
		}

			.button--link:hover::after {
				block-size: 0.25rem;
				--button-link-color-border: var(--button-link-color-border-hover);
			}

		.button--link:active {
			--button-color-foreground: var(--button-link-color-foreground-active);
		}

			.button--link:active::after {
				block-size: 0.25rem;
				--button-link-color-border: var(--button-link-color-border-active);
			}

		.button--link.button--dark {
			--button-link-color-foreground: var(--s-button-link-dark-color-foreground);
			--button-link-color-foreground-hover: var(--s-button-link-dark-color-foreground-hover);
			--button-link-color-foreground-active: var(--s-button-link-dark-color-foreground-active);
			--button-link-color-border: var(--s-button-link-dark-color-border);
			--button-link-color-border-hover: var(--s-button-link-dark-color-border-hover);
			--button-link-color-border-active: var(--s-button-link-dark-color-border-active);
		}

		.button--link.button--light {
			--button-link-color-foreground: var(--s-button-link-light-color-foreground);
			--button-link-color-foreground-hover: var(--s-button-link-light-color-foreground-hover);
			--button-link-color-foreground-active: var(--s-button-link-light-color-foreground-active);
			--button-link-color-border: var(--s-button-link-light-color-border);
			--button-link-color-border-hover: var(--s-button-link-light-color-border-hover);
			--button-link-color-border-active: var(--s-button-link-light-color-border-active);
		}

	.stretched-link {
		position: static;
	}

		.stretched-link::after {
			z-index: 1;
			position: absolute;
			inset: 0;
			content: "";
		}

		.stretched-link:focus-visible {
			outline: none;
		}
}
/* Molecules */
@layer molecules {
	:root {
		--label-margin-block-end: var(--c-form-label-margin-block-end, var(--s-form-label-margin-block-end));
		--label-form-label-font-weight: var(--c-label-form-label-font-weight, var(--s-form-label-font-weight));

		--input-padding-block: var(--c-form-input-padding-block, var(--s-form-input-padding-block));
		--input-padding-inline: var(--c-form-input-padding-inline, var(--s-form-input-padding-inline));
		--input-border-color: var(--c-form-input-border-color, var(--s-form-input-border-color));
		--input-border-radius: var(--c-form-input-border-radius, var(--s-form-input-border-radius));

		--checkbox-size: var(--c-checkbox-size, var(--s-form-checkbox-size));
		--checkbox-background-color: var(--c-checkbox-background-color, var(--s-form-checkbox-background-color));
		--checkbox-hover-color: var(--c-checkbox-hover-color, var(--s-form-checkbox-hover-background-color));
		--checkbox-checked-color: var(--c-checkbox-checked-color, var(--s-form-checkbox-checked-background-color));
		--checkbox-checked-icon: var(--c-checkbox-checked-icon, var(--s-form-checkbox-checked-icon));

		--radio-size: var(--c-radio-size, var(--s-form-radio-size));
		--radio-background-color: var(--c-radio-background-color, var(--s-form-radio-background-color));
		--radio-hover-color: var(--c-radio-hover-color, var(--s-form-radio-hover-background-color));
		--radio-checked-color: var(--c-radio-checked-color, var(--s-form-radio-checked-background-color));
		--radio-checked-icon: var(--c-radio-checked-icon, var(--s-form-radio-checked-icon));

		accent-color: var(--c-accent-color, var(--s-color-brand-primary));
	}
		form a {
			color: currentColor;
		}

	label {
		font-weight: var(--label-form-label-font-weight);
	}

		label:has( + input),label:has( + textarea),label:has( + div > select) {
			display: inline-block;
			margin-block-end: var(--label-margin-block-end);
		}

	/* Checkbox/radio option labels use normal weight */
	input[type="checkbox"] + label,
	input[type="radio"] + label {
		font-weight: var(--p-font-weight-regular);
	}

	/* Required field asterisk — inputs/textarea/select */
		:is(label:has( + :required),label:has( + div > :required))::after {
			content: " *";
			color: var(--s-color-state-error-background);
		}

	/* Required field asterisk — checkbox/radio groups (fieldset + legend) */
	fieldset:has(:required) > legend::after {
		content: " *";
		color: var(--s-color-state-error-background);
	}

	input,
	textarea,
	select {
		outline-offset: var(--s-outline-offset);
	}

		:is(input,textarea,select):focus-visible {
			outline: var(--s-outline-width) var(--s-outline-style) var(--s-color-focus);
		}

	input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]),
	textarea,
	select {
		inline-size: 100%;
		padding-inline: var(--input-padding-inline);
		padding-block: var(--input-padding-block);
		border: var(--s-border-width-default) var(--s-border-style-default) var(--input-border-color);
		border-radius: var(--input-border-radius);
	}

	input[type="checkbox"],
	input[type="radio"] {
		appearance: none;
		margin: 0;
		border: var(--s-border-width-default) var(--s-border-style-default) var(--input-border-color);
		cursor: pointer;
		transition-duration: var(--s-transition-duration-default);
		transition-property: background-color, border-color, scale;
		transition-timing-function: var(--s-transition-timing-function-default);
	}

		:is(input[type="checkbox"],input[type="radio"]):checked {
			border-color: transparent;
			background-position: center;
			background-repeat: no-repeat;
		}

		:is(input[type="checkbox"],input[type="radio"]):active:not(:disabled) {
			scale: 0.95;
		}

		:is(input[type="checkbox"],input[type="radio"])  + label {
			margin-inline-start: var(--s-spacing-2);
		}

	input[type="checkbox"] {
		inline-size: var(--checkbox-size);
		block-size: var(--checkbox-size);
		border-radius: var(--input-border-radius);
		background-color: var(--checkbox-background-color);
	}

		input[type="checkbox"]:checked {
			background-image: var(--checkbox-checked-icon);
			background-color: var(--checkbox-checked-color);
		}
			input[type="checkbox"]:not(:checked):not(:disabled):hover {
				background-color: var(--checkbox-hover-color);
			}

	input[type="radio"] {
		inline-size: var(--radio-size);
		block-size: var(--radio-size);
		border-radius: 50%;
		background-color: var(--radio-background-color);
	}

		input[type="radio"]:checked {
			background-image: var(--radio-checked-icon);
			background-color: var(--radio-checked-color);
		}
			input[type="radio"]:not(:checked):not(:disabled):hover {
				background-color: var(--radio-hover-color);
			}

	.form-item {
		inline-size: 100%;
	}

	.form-item-checkbox,
	.form-item-radio {
		display: flex;
		align-items: center;
	}
	.caption {
		--caption-font-size: var(--c-caption-font-size, var(--s-sm-font-size));
		--caption-foreground-color: var(--c-caption-foreground-colore, var(--p-color-neutral-500));
		--caption-margin-block-start: var(--c-margin-block-start, var(--s-spacing-2));

		margin-top: var(--caption-margin-block-start);
		color: var(--caption-foreground-color);
		font-size: var(--caption-font-size);
	}
}
@layer molecules {
}
/* Templates */
@layer pages {
	.page-layout__grid {
		--grid-columns: var(--c-grid-columns, 12);
		--grid-column-gap: var(--c-grid-column-gap, var(--s-grid-gutter, var(--s-content-gutter)));
		--grid-row-gap: var(--c-grid-row-gap, var(--s-content-gutter));
		container-name: page-layout;
		container-type: inline-size;

		display: grid;
		grid-template-columns: repeat(var(--grid-columns), 1fr);
		column-gap: var(--grid-column-gap);
		row-gap: var(--grid-row-gap);
		grid-column: content;
	}
}

@layer templates {
	[class*="width-"] {
		grid-column: span var(--column-width, 12);
	}

		@container page-layout (inline-size < 768px) {
	[class*="width-"] {
			--column-width: 12;
	}
		}

	.width-full {
		--column-width: 12;
	}

	.width-large {
		--column-width: 8;
	}

		@container page-layout (inline-size < 992px) {

	.width-large {
			--column-width: 12;
	}
		}

	.width-half {
		--column-width: 6;
	}

		@container page-layout (inline-size < 768px) {

	.width-half {
			--column-width: 12;
	}
		}

	.width-small {
		--column-width: 4;
	}

		@container page-layout (inline-size < 768px) {

	.width-small {
			--column-width: 6;
	}
		}

		@container page-layout (inline-size < 480px) {

	.width-small {
			--column-width: 12;
	}
		}

	.grid-narrow {
		grid-column: 3 / span 8;
	}

		@container page-layout (inline-size < 768px) {

	.grid-narrow {
			grid-column: 1 / -1;
	}
		}

	.grid-indented {
		grid-column: 2 / span 10;
	}

		@container page-layout (inline-size < 768px) {

	.grid-indented {
			grid-column: 1 / -1;
	}
		}
}

/* Pages */

@layer pages {
	.splash {
		display: flex;
		flex-direction: column;
		min-height: 100dvh;
		background: var(--s-color-default-background);
	}

	.splash__main {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		padding-inline: var(--s-spacing-4);
		padding-block: var(--s-spacing-9);
		gap: var(--s-gap-xxl);
	}

		@media (min-width: 992px) {

	.splash__main {
			padding-inline: var(--s-spacing-8);
			padding-block: var(--s-spacing-10, 4rem);
	}
		}

	.splash__header {
		display: flex;
		flex-direction: column;
		align-items: center;
		max-inline-size: 48rem;
		gap: var(--s-gap-md);
		text-align: center;
	}

	.splash__title {
		margin: 0;
		color: var(--s-headings-color-default);
		font-weight: var(--s-headings-font-weight-default);
		font-size: clamp(2rem, 3vw + 1rem, 2.5rem);
		line-height: 1;
		font-family: var(--s-headings-font-family-default);
	}

	.splash__subtitle {
		max-inline-size: 36rem;
		margin: 0;
		color: var(--p-color-neutral-600);
		font-size: clamp(1rem, 1vw + 0.5rem, 1.125rem);
		line-height: 1.4;
	}

	.splash__cards {
		display: flex;
		flex-direction: column;
		inline-size: 100%;
		max-inline-size: 84rem;
		padding-inline: var(--s-spacing-4);
		gap: var(--s-gap-md);
	}

		@media (min-width: 992px) {

	.splash__cards {
			flex-direction: row;
			padding-inline: var(--s-spacing-8, 2rem);
	}
		}

		.splash__cards  > * {
			flex: 1;
		}
	.status-page {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100dvh;
		padding: var(--s-spacing-8) var(--s-spacing-4);
		background: var(--s-color-default-background);
	}

	.status-page--coming-soon {
		background: var(--p-color-primary-50);
	}

	.status-page__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		max-width: 36rem;
		gap: var(--s-gap-lg);
		text-align: center;
	}

	.status-page__code {
		margin: 0;
		color: var(--s-color-brand-primary);
		font-weight: var(--s-headings-font-weight-default);
		font-size: clamp(4rem, 12vw, 8rem);
		line-height: 1;
		font-family: var(--s-headings-font-family-default);
		opacity: 0.15;
		-webkit-user-select: none;
		        user-select: none;
	}

	.status-page__description {
		margin: 0;
		color: var(--s-body-color-default);
		font-size: var(--s-lead-font-size);
		line-height: var(--s-body-line-height-default);
	}

	.status-page__actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--s-gap-xs);
	}

	.status-page__loading {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100dvh;
		background: var(--s-color-default-background);
	}

	.status-page__spinner {
		width: 2.5rem;
		height: 2.5rem;
		border: 3px solid var(--s-border-color-default);
		border-radius: 50%;
		border-top-color: var(--s-color-brand-primary);
		animation: status-page-spin 0.7s linear infinite;
	}
}

@layer pages {

	@keyframes status-page-spin {
		to {
			transform: rotate(360deg);
		}
	}
}

/* Theme tokens */

/*
Primitive tokens are theme specific variables that are used to define the theme specific values for the design system. 
These should never be used directly in the components. These should only be used to map to the semantic tokens.
*/

@layer theme {
	:root {
		/* Spacing */
		--p-spacing-1: 4px;
		--p-spacing-2: 8px;
		--p-spacing-3: 12px;
		--p-spacing-4: 16px;
		--p-spacing-4-5: 20px;
		--p-spacing-5: 24px;
		--p-spacing-5-6: 26px;
		--p-spacing-6: 32px;
		--p-spacing-7: 48px;
		--p-spacing-7-5: 56px;
		--p-spacing-8: 64px;
		--p-spacing-9: 96px;
		--p-spacing-10: 128px;
		--p-spacing-11: 160px;
		--p-spacing-12: 192px;

		/* Colors -> system */
		--p-color-white: #fff;
		--p-color-white-rgb: 255 255 255;
		--p-color-black: #000;
		--p-color-black-rgb: 0 0 0;
		/* Brand-tinted elevation (space-separated for `rgb(var(--p-color-shadow-rgb) / …%)`). */
		--p-color-shadow-rgb: 35 65 1;
		--p-color-focus: var(--p-color-primary-600);

		/* Colors -> primary */
		--p-color-primary-50: #fbfdf9;
		--p-color-primary-100: #f5fbef;
		--p-color-primary-200: #e1f0d1;
		--p-color-primary-300: #c2dfa0;
		--p-color-primary-400: #a0ce6c;
		--p-color-primary-500: #76b82a;
		--p-color-primary-600: #53821d;
		--p-color-primary-700: #406417;
		--p-color-primary-800: #2a410f;
		--p-color-primary-900: #142007;

		--p-color-primary-light: var(--p-color-primary-100);
		--p-color-primary-light-jobs: #f4f9fa;

		--p-color-supporting-warm: #f5f3ee;
		--p-color-supporting-blue: #6172f3;

		--p-color-primary-system-focus: var(--p-color-focus);

		/* Colors -> neutral */
		--p-color-neutral-000: #ffffff;
		--p-color-neutral-50: #f4f5fa;
		--p-color-neutral-100: #f2f2f2;
		--p-color-neutral-200: #e6e6e6;
		--p-color-neutral-300: #cccccc;
		--p-color-neutral-400: #b3b3b3;
		--p-color-neutral-500: #767676;
		--p-color-neutral-600: #666666;
		--p-color-neutral-700: #4d4d4d;
		--p-color-neutral-800: #333333;
		--p-color-neutral-900: #1a1a1a;
		--p-color-neutral-1000: #121212;

		/* Colors -> notifications */
		--p-color-state-info-100: #e3efff;
		--p-color-state-info-200: #78c6ff;
		--p-color-state-info-300: #2a8ed7;
		--p-color-state-success-100: #d4f8de;
		--p-color-state-success-200: #66d575;
		--p-color-state-success-300: #2fa53f;
		--p-color-state-warning-100: #fef4d2;
		--p-color-state-warning-200: #eeac3b;
		--p-color-state-warning-300: #d58b0b;
		--p-color-state-error-100: #ffebe5;
		--p-color-state-error-200: #ea2424;
		--p-color-state-error-300: #9b0c0c;

		/* Radius */
		--p-radius-0: 0;
		--p-radius-1: 4px;
		--p-radius-2: 8px;
		--p-radius-3: 12px;
		--p-radius-4: 16px;
		--p-radius-5: 24px;
		--p-radius-6: 32px;

		/* Font weight */
		--p-font-weight-light: 300;
		--p-font-weight-regular: 400;
		--p-font-weight-medium: 500;
		--p-font-weight-semi-bold: 600;
		--p-font-weight-bold: 700;

		/* Font family */
		--p-font-family-default: var(--font-inter, "Inter"), sans-serif;
		--p-font-family-heading: var(--font-titillium-web, "Titillium Web"), sans-serif;

		/* Gutters */
		--p-gutter: var(--p-spacing-6);
		--p-gutter-md: var(--p-spacing-5);
		--p-gutter-sm: var(--p-spacing-4);

		/* Interactive outlines */
		--p-outline-width: 0.125rem;
		--p-outline-offset: 0.125rem;
		--p-outline-style: solid;
		--p-outline-color: var(--p-color-focus);

		/* Animation duration */
		--p-duration-perceptive-instant: 85ms;
		--p-duration-fast: 150ms;
		--p-duration-normal: 250ms;
		--p-duration-slow: 500ms;
		--p-duration-user-flow: 5000ms;
		--p-duration-attention-span: 12000ms;

		/* Animation easing */
		--p-easing-swift-alt: cubic-bezier(0.55, 0, 0.1, 1);
		--p-easing-swift-move: cubic-bezier(0.4, 0, 0.2, 1);
		--p-easing-swifter-move: cubic-bezier(0.4, 0, 0, 1);
		--p-easing-heavy-move: cubic-bezier(0.7, 0, 0.6, 1);
		--p-easing-swift-out: cubic-bezier(0, 0, 0.2, 1);
		--p-easing-swift-in: cubic-bezier(0.4, 0, 1, 1);
	}

		:root:has([data-section="jobs"]) {
			--p-color-primary-light: var(--p-color-primary-light-jobs);
		}
}

@layer theme {
	:root {
		/* Colors */
		--s-body-color-default: var(--p-color-neutral-700);
		--s-headings-color-default: var(--p-color-neutral-800);
		--s-link-color-default: var(--p-color-neutral-600);
		--s-link-color-hover-default: var(--p-color-neutral-500);
		--s-link-color-active-default: var(--p-color-neutral-700);

		/* Typography */
		--s-headings-font-weight-default: var(--p-font-weight-bold);
		--s-headings-font-family-default: var(--p-font-family-heading);
		--s-body-font-family-default: var(--p-font-family-default);
		--s-body-font-size-default: 1rem;
		--s-body-font-weight-default: var(--p-font-weight-regular);
		--s-body-line-height-default: 1.5;

		--s-display-font-size: clamp(3rem, 5.3dvi + 0.75rem, 4rem);
		--s-display-line-height: 1.2;

		--s-h1-font-size: clamp(2.5rem, 3.8dvi + 0.75rem, 3rem);
		--s-h1-line-height: 1.2;

		--s-h2-font-size: clamp(2rem, 2.5dvi + 0.75rem, 2.5rem);
		--s-h2-line-height: 1.2;

		--s-h3-font-size: clamp(1.75rem, 2dvi + 0.75rem, 2rem);
		--s-h3-line-height: 1.2;

		--s-h4-font-size: clamp(1.25rem, 1.56dvi + 0.5rem, 1.5rem);
		--s-h4-line-height: 1.25;

		--s-h5-font-size: clamp(1.125rem, 1.3dvi + 0.5rem, 1.375rem);
		--s-h5-line-height: 1.3;

		--s-h6-font-size: clamp(1rem, 1.04dvi + 0.5rem, 1.25rem);
		--s-h6-line-height: 1.4;

		--s-lead-font-size: 1.125rem;
		--s-lead-font-weight: var(--p-font-weight-semi-bold);
		--s-paragraph-font-size: var(--s-body-font-size-default);
		--s-sm-font-size: 0.875rem;
		--s-xs-font-size: 0.75rem;

		/* Gaps */
		--s-gap-xxxs: var(--p-spacing-1);
		--s-gap-xxs: var(--p-spacing-2);
		--s-gap-xs: var(--p-spacing-3);
		--s-gap-sm: var(--p-spacing-4);
		--s-gap-md: var(--p-spacing-5);
		--s-gap-lg: var(--p-spacing-6);
		--s-gap-xl: var(--p-spacing-7);
		--s-gap-xxl: var(--p-spacing-8);
		--s-gap-xxxl: var(--p-spacing-9);

		/* Spacing */
		--s-spacing-1: var(--p-spacing-1);
		--s-spacing-2: var(--p-spacing-2);
		--s-spacing-3: var(--p-spacing-3);
		--s-spacing-4: var(--p-spacing-4);
		--s-spacing-4-5: var(--p-spacing-4-5);
		--s-spacing-5: var(--p-spacing-5);
		--s-spacing-5-6: var(--p-spacing-5-6);
		--s-spacing-6: var(--p-spacing-6);
		--s-spacing-7: var(--p-spacing-7);
		--s-spacing-7-5: var(--p-spacing-7-5);
		--s-spacing-8: var(--p-spacing-8);
		--s-spacing-9: var(--p-spacing-9);

		/* Layout */
		--s-layout-padding-inline: clamp(var(--p-spacing-4), 4.16dvi, var(--p-spacing-8));
		--s-layout-content-width: 1440px;
		--s-extended-bg-wrapper-gap: var(--s-layout-padding-inline);

		/* Outline */
		--s-outline-default: var(--p-outline-width) var(--p-outline-style) var(--p-outline-color);

		/* Border */
		--s-border-width-default: 0.0625rem;
		--s-border-style-default: solid;
		--s-border-color-default: var(--p-color-neutral-300);

		/* Border radius */
		--s-border-radius-sm: var(--p-radius-3);
		--s-border-radius-default: var(--p-radius-5);

		/* Animation */
		--s-transition-duration-default: var(--p-duration-normal);
		--s-transition-timing-function-default: var(--p-easing-swift-move);

		/* Paragraph */
		--s-paragraph-color: var(--s-body-color);
		--s-paragraph-line-height: var(--s-body-line-height);
		--s-paragraph-padding-block-end: var(--p-spacing-4);
		--s-paragraph-margin-sm: var(--p-spacing-6);
		--s-paragraph-margin-md: var(--p-spacing-8);
		--s-paragraph-margin-lg: var(--p-spacing-10);
		--s-paragraph-bg-color-unpublished: #fff4f4;
	}

		@media (min-width: 540px) {
	:root {
			--s-paragraph-padding-block-end: var(--p-spacing-5);
	}
		}
	:root {

		/* List */
		--s-list-padding-block-end: var(--p-spacing-4);
	}

		@media (min-width: 540px) {
	:root {
			--s-list-padding-block-end: var(--p-spacing-5);
	}
		}
	:root {

		/* Outline */
		--s-outline-default: var(--p-outline-width) var(--p-outline-style) var(--p-outline-color);

		/* Buttons -> sizes */
		--s-button-sm-padding-x: var(--p-spacing-4);
		--s-button-sm-padding-y: var(--p-spacing-2);

		--s-button-md-padding-x: var(--p-spacing-4-5);
		--s-button-md-padding-y: var(--p-spacing-3);

		--s-button-lg-padding-x: var(--p-spacing-5-6);
		--s-button-lg-padding-y: var(--p-spacing-4);

		/* Buttons -> border radius */
		--s-button-border-radius: var(--p-radius-2);

		/* Buttons -> typography */
		--s-button-font-family: var(--p-font-family-heading);
		--s-button-font-weight: var(--p-font-weight-semi-bold);

		/* Buttons -> font-sizes */
		--s-button-sm-font-size: 1rem;
		--s-button-md-font-size: 1.125rem;
		--s-button-lg-font-size: 1.125rem;

		/* Buttons -> margin block end */
		--s-button-margin-block-end: var(--p-spacing-4);
	}

		@media (min-width: 540px) {
	:root {
			--s-button-padding-block-end: var(--p-spacing-5);
	}
		}
	:root {

		/* Gutters */
		--s-content-gutter: var(--p-gutter-sm);
	}

		@media (min-width: 540px) {
	:root {
			--s-content-gutter: var(--p-gutter-md);
	}
		}

		@media (min-width: 768px) {
	:root {
			--s-content-gutter: var(--p-gutter);
	}
		}
	:root {

		/* Title padding bottom */
		--s-title-padding-block-end: var(--p-spacing-2);
	}

		@media (min-width: 768px) {
	:root {
			--s-title-padding-block-end: var(--p-spacing-4);
	}
		}
	:root {

		/* Content padding */
		--s-content-padding: var(--p-spacing-4);
	}

		@media (min-width: 540px) {
	:root {
			--s-content-padding: var(--p-spacing-7);
	}
		}

		@media (min-width: 768px) {
	:root {
			--s-content-padding: var(--p-spacing-8);
	}
		}
	:root {

		/* Outlines */
		--s-outline-width: 0.125rem;
		--s-outline-style: solid;
		--s-outline-offset: 0.125rem;
		--s-color-focus: var(--p-color-primary-system-focus);

		/* Icon */
		--s-icon-color-default: var(--p-color-primary-500);

		/* UI */
		--s-ui-icon-button-width: 3rem;
		--s-ui-icon-button-height: 3rem;

		/* Foreground color */
		--s-color-default-foreground-hover: var(--p-color-primary-600);
		--s-color-default-foreground-active: var(--p-color-primary-600);

		/* Background color */
		--s-color-default-background: var(--p-color-neutral-000);

		--s-color-default-dark-foreground: var(--p-color-neutral-000);
		--s-color-default-dark-background: var(--p-color-primary-500);

		--s-color-neutral-background: var(--p-color-neutral-100);

		/* Backdrop */
		--s-backdrop-background-color: rgb(var(--p-color-black-rgb) / 50%);

		/* Brand colors */
		--s-color-brand-primary: var(--p-color-primary-500);

		/* System colors */
		--s-color-system-foreground: var(--p-color-neutral-900);

		/* State colors */
		--s-color-state-info-background: var(--p-color-state-info-100);
		--s-color-state-info-foreground: var(--p-color-state-info-300);
		--s-color-state-success-background: var(--p-color-state-success-100);
		--s-color-state-success-foreground: var(--p-color-state-success-300);
		--s-color-state-warning-background: var(--p-color-state-warning-100);
		--s-color-state-warning-foreground: var(--p-color-state-warning-300);
		--s-color-state-error-background: var(--p-color-state-error-300);
		--s-color-state-error-foreground: var(--p-color-state-error-100);

		/* Button primary -> dark */
		--s-button-primary-dark-color-background: var(--p-color-primary-500);
		--s-button-primary-dark-color-background-hover: var(--p-color-primary-600);
		--s-button-primary-dark-color-background-active: var(--p-color-primary-700);
		--s-button-primary-dark-color-background-disabled: var(--p-color-primary-300);

		--s-button-primary-dark-color-foreground: var(--p-color-primary-100);
		--s-button-primary-dark-color-foreground-hover: var(--p-color-neutral-000);
		--s-button-primary-dark-color-foreground-active: var(--p-color-neutral-000);
		--s-button-primary-dark-color-foreground-disabled: var(--p-color-primary-200);

		/* Button primary -> light */
		--s-button-primary-light-color-background: var(--p-color-neutral-000);
		--s-button-primary-light-color-background-hover: var(--p-color-primary-100);
		--s-button-primary-light-color-background-active: var(--p-color-primary-200);
		--s-button-primary-light-color-background-disabled: #ffffff30; /* TODO @Gilles*/

		--s-button-primary-light-color-foreground: var(--p-color-primary-800);
		--s-button-primary-light-color-foreground-hover: var(--p-color-primary-800);
		--s-button-primary-light-color-foreground-active: var(--p-color-primary-800);
		--s-button-primary-light-color-foreground-disabled: var(--p-color-primary-300);

		/* Button secondary */
		--s-button-secondary-border-width: 0.125rem;
		--s-button-secondary-border-style: solid;
		--s-button-secondary-border-width-active: 0.1875rem;

		/* Button secondary -> dark */
		--s-button-secondary-dark-color-border: var(--p-color-primary-500);
		--s-button-secondary-dark-color-border-hover: var(--p-color-primary-700);
		--s-button-secondary-dark-color-border-active: var(--p-color-primary-800);
		--s-button-secondary-dark-color-border-disabled: var(--p-color-primary-300);

		--s-button-secondary-dark-color-background: transparent;
		--s-button-secondary-dark-color-background-hover: transparent;
		--s-button-secondary-dark-color-background-active: transparent;
		--s-button-secondary-dark-color-background-disabled: transparent;

		--s-button-secondary-dark-color-foreground: var(--p-color-primary-500);
		--s-button-secondary-dark-color-foreground-hover: var(--p-color-neutral-700);
		--s-button-secondary-dark-color-foreground-active: var(--p-color-neutral-800);
		--s-button-secondary-dark-color-foreground-disabled: var(--p-color-primary-300);

		/* Button secondary -> light */
		--s-button-secondary-light-color-border: var(--p-color-neutral-000);
		--s-button-secondary-light-color-border-hover: var(--p-color-primary-100);
		--s-button-secondary-light-color-border-active: var(--p-color-primary-200);
		--s-button-secondary-light-color-border-disabled: #ffffff30; /* TODO @Gilles */

		--s-button-secondary-light-color-background: transparent;
		--s-button-secondary-light-color-background-hover: transparent; /* TODO @Gilles */
		--s-button-secondary-light-color-background-active: transparent; /* TODO @Gilles */
		--s-button-secondary-light-color-background-disabled: transparent;

		--s-button-secondary-light-color-foreground: var(--p-color-neutral-000);
		--s-button-secondary-light-color-foreground-hover: var(--p-color-neutral-000);
		--s-button-secondary-light-color-foreground-active: var(--p-color-neutral-000);
		--s-button-secondary-light-color-foreground-disabled: #ffffff30;

		/* Button Link -> dark */
		--s-button-link-dark-color-foreground: var(--p-color-neutral-700);
		--s-button-link-dark-color-foreground-hover: var(--p-color-neutral-600);
		--s-button-link-dark-color-foreground-active: var(--p-color-neutral-700);

		--s-button-link-dark-color-border: var(--p-color-neutral-600);
		--s-button-link-dark-color-border-hover: var(--p-color-neutral-500);
		--s-button-link-dark-color-border-active: var(--p-color-neutral-600);

		/* Button Link -> light */
		--s-button-link-light-color-foreground: var(--p-color-neutral-000);
		--s-button-link-light-color-foreground-hover: var(--p-color-neutral-200);
		--s-button-link-light-color-foreground-active: var(--p-color-neutral-300);

		--s-button-link-light-color-border: var(--p-color-neutral-000);
		--s-button-link-light-color-border-hover: var(--p-color-neutral-600);
		--s-button-link-light-color-border-active: var(--p-color-neutral-600);

		/* Table */
		--s-table-background: var(--s-color-neutral-background);
		--s-table-border-color: var(--s-border-color-default);
		--s-table-heading-padding: var(--p-spacing-2);
		--s-table-row-padding: var(--p-spacing-2);
		--s-table-margin-block-start: 1rem;
		--s-table-margin-block-end: 1rem;

		/* Form */
		--s-form-placeholder-color: var(--p-color-neutral-500);
		--s-form-label-margin-block-end: var(--p-spacing-2);
		--s-form-label-font-weight: var(--p-font-weight-medium);

		--s-form-input-padding-block: var(--p-spacing-4);
		--s-form-input-padding-inline: var(--p-spacing-4);
		--s-form-input-border-radius: var(--p-radius-1);
		--s-form-input-border-color: var(--p-color-neutral-400);

		--s-form-checkbox-size: 1.5rem;
		--s-form-checkbox-background-color: var(--p-color-neutral-100);
		--s-form-checkbox-hover-background-color: var(--p-color-primary-200);
		--s-form-checkbox-checked-background-color: var(--p-color-primary-500);
		--s-form-checkbox-checked-icon: url('data:image/svg+xml,<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.982 1.58994L6.29257 11.2793C6.20818 11.364 6.1079 11.4312 5.99749 11.4771C5.88707 11.5229 5.76869 11.5465 5.64914 11.5465C5.52958 11.5465 5.4112 11.5229 5.30078 11.4771C5.19037 11.4312 5.09009 11.364 5.0057 11.2793L0.766582 7.04023C0.682084 6.95573 0.615057 6.85542 0.569327 6.74502C0.523598 6.63462 0.500061 6.51629 0.500061 6.39679C0.500061 6.2773 0.523598 6.15897 0.569327 6.04857C0.615057 5.93817 0.682084 5.83785 0.766582 5.75336C0.851079 5.66886 0.951392 5.60183 1.06179 5.5561C1.17219 5.51037 1.29052 5.48683 1.41002 5.48683C1.52952 5.48683 1.64784 5.51037 1.75824 5.5561C1.86865 5.60183 1.96896 5.66886 2.05346 5.75336L5.64989 9.34979L14.6966 0.304576C14.8673 0.133926 15.0987 0.0380554 15.3401 0.0380554C15.5814 0.0380554 15.8128 0.133926 15.9835 0.304576C16.1541 0.475226 16.25 0.706678 16.25 0.948013C16.25 1.18935 16.1541 1.4208 15.9835 1.59145L15.982 1.58994Z" fill="white"/></svg>');

		--s-form-radio-size: 1.5rem;
		--s-form-radio-background-color: var(--p-color-neutral-100);
		--s-form-radio-hover-background-color: var(--p-color-primary-200);
		--s-form-radio-checked-background-color: var(--p-color-primary-500);
		--s-form-radio-checked-icon: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="0.0418701" width="12" height="12" rx="6" fill="white"/></svg>');

		/* Footer */
		--s-footer-border-color: var(--p-color-neutral-200);
		--s-footer-background-color: var(--p-color-neutral-100);
		--s-footer-color: var(--p-color-neutral-700);
		--s-footer-heading-font-size: 1rem;

		/* Header */
		--s-header-top-background-color: var(--p-color-neutral-000);
		--s-header-top-foreground-color: var(--p-color-neutral-700);
		--s-header-main-foreground-color: var(--p-color-black);
		--s-dropdown-color-background: var(--p-color-neutral-000);

		/* Form */
		--s-form-field-padding: var(--p-spacing-4);
		--s-form-field-border: var(--p-color-neutral-500);

		/* Pagination */
		--s-pagination-button-background-color: transparent;
		--s-pagination-button-background-color-active: var(--p-color-primary-600);
		--s-pagination-button-foreground-color: var(--p-color-neutral-500);
		--s-pagination-button-foreground-color-active: var(--p-color-primary-100);
		--s-pagination-button-foreground-color-disabled: var(--p-color-neutral-200);
		--s-pagination-icon-color: var(--p-color-primary-600);
		--s-pagination-icon-color-disabled: var(--p-color-neutral-400);

		--s-default-radius: var(--p-radius-1);
		--s-default-grid-margin: var(--p-grid-margin);
		--s-default-grid-gap: var(--p-grid-gutter);
		--c-hero-overlay: var(--p-color-neutral-900);
		--c-hero-height: 31.25rem;
	}
}

@layer theme {

		@media (min-width: 540px) {
	:root {
			--c-hero-height: 36rem;
	}
		}

		@media (min-width: 768px) {
	:root {
			--c-hero-height: 50.625rem;
	}
		}
	:root {

		--c-card-horizontal-title-font-size: var(--s-h3-font-size);

		/* Hero Default */
		--c-hero-default-height: 26.375rem; /* 422px */
		--c-hero-default-homepage-height: 43.5rem; /* 696px */
	}
}