/*
 * Al-Ayn Careers: careers page blocks and job pages.
 *
 * Everything is scoped to .acr. The Al-Ayn themes (alayn-v2, alayn-int) reset `.gutenberg__wrap *`
 * (Open Sans, zero margins, no list style) and style `.gutenberg__wrap h1–h4/p/a/span/blockquote`
 * at specificity (0,1,1)–(0,1,2), so:
 *   - base resets use `html body .acr <element>` (0,1,3) and beat the theme;
 *   - components use `.acr .acr-<thing>` (0,2,0) or more and beat both.
 * Logical properties (margin-inline, inset-inline…) keep RTL pages (AAI Arabic) correct.
 *
 * Contrast note: white text on the brand teal #2E9EB4 is 3.15:1, which passes AA only for large
 * text (24px, or 18.66px+ bold), so body text on teal is 19px heavy (800). The 14px eyebrows on
 * teal stay below AA (brand look; the heading under each one carries the meaning). Eyebrows on
 * white use the darker teal #007DA0 (4.73:1); on the light-teal sections #006E8C (5.24:1 on
 * #EAF5F7, 4.63:1 on #D1EAEF). Carousel dots use #006E8C (3:1+ on every bar, WCAG 1.4.11).
 */

/* ---------- Tokens ---------- */

.acr {
	--acr-teal: #2E9EB4;
	--acr-teal-dark: #007DA0;
	--acr-teal-deep: #006E8C;
	--acr-teal-line: #1B8A9D;
	--acr-teal-icon: #53AEC0;
	--acr-yellow: #FFDD4A;
	--acr-ink: #404040;
	--acr-text: #5A5A5A;
	--acr-tint: #EAF5F7;
	--acr-tint-2: #C0E2E9;
	--acr-tint-3: #D9EDF1;
	--acr-faq: #D1EAEF;
	--acr-pill: #FAFAFA;
	--acr-border: #D1D1D1;
	--acr-font: "ACR Avenir", Avenir, "Avenir Next", "Segoe UI", Calibri, Arial, sans-serif;
	--acr-wrap: 1170px;
	--acr-gutter: 20px;
	--acr-space: 80px;
}

/* ---------- Base (beats the theme reset) ---------- */

html body .acr {
	display: block;
	position: relative;
	margin: 0;
	padding: var(--acr-space) 0;
	border: 0;
	background: #fff;
	color: var(--acr-text);
	font-family: var(--acr-font);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
	overflow-wrap: break-word;
	scroll-margin-top: 90px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html body .acr *,
html body .acr *::before,
html body .acr *::after {
	box-sizing: border-box;
	font-family: inherit;
}

html body .acr h1,
html body .acr h2,
html body .acr h3,
html body .acr h4,
html body .acr h5,
html body .acr h6 {
	position: static;
	margin: 0;
	padding: 0;
	color: var(--acr-ink);
	font-size: inherit;
	font-style: normal;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: none;
}

html body .acr p,
html body .acr ul,
html body .acr ol,
html body .acr li,
html body .acr span,
html body .acr a,
html body .acr blockquote,
html body .acr figure,
html body .acr details,
html body .acr summary {
	margin: 0;
	padding: 0;
	border: 0;
	color: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

html body .acr ul,
html body .acr ol {
	list-style: none;
}

/* Colour too: some themes colour <strong> (e.g. dark on the teal vacancies card). */
html body .acr strong,
html body .acr b {
	color: inherit;
	font-weight: 800;
}

html body .acr em,
html body .acr i {
	font-style: italic;
}

html body .acr a {
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

html body .acr img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
}

html body .acr svg {
	max-width: none;
}

html body .acr button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

html body .acr [hidden] {
	display: none !important;
}

/* Visible focus everywhere: dark ring with a white halo, readable on white and on teal. */
html body .acr a:focus-visible,
html body .acr button:focus-visible,
html body .acr summary:focus-visible,
html body .acr [tabindex]:focus-visible {
	outline: 3px solid var(--acr-ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px #fff;
}

html body .acr .acr-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Layout and shared pieces ---------- */

.acr .acr-wrap {
	width: 100%;
	max-width: var(--acr-wrap);
	margin-inline: auto;
	padding-inline: var(--acr-gutter);
}

.acr .acr-icon {
	display: inline-block;
	flex: none;
	width: 1.5em;
	height: 1.5em;
	overflow: visible;
	vertical-align: middle;
}

.acr .acr-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	color: var(--acr-teal-dark);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.acr .acr-eyebrow__bar {
	display: inline-block;
	flex: none;
	width: 28px;
	height: 8px;
	border-radius: 4px;
	background: var(--acr-yellow);
}

.acr .acr-title {
	margin: 0;
	color: var(--acr-ink);
	font-size: 44px;
	font-weight: 800;
	line-height: 1.12;
}

.acr .acr-head {
	margin: 0 0 40px;
}

/* The title column is capped so a long (translated) heading wraps instead of squeezing the text. */
.acr .acr-head--split {
	display: grid;
	grid-template-columns: fit-content(55%) minmax(0, 1fr);
	align-items: end;
	column-gap: 48px;
}

.acr .acr-head--split > :only-child {
	grid-column: 1 / -1;
}

.acr .acr-head__text {
	max-width: 620px;
	color: var(--acr-text);
	font-size: 18px;
	line-height: 1.55;
}

.acr .acr-head--split .acr-head__text {
	padding-bottom: 4px;
}

.acr .acr-head__text p + p,
.acr .acr-hero__text p + p,
.acr .acr-vacancies__intro p + p,
.acr .acr-vacancies__empty p + p,
.acr .acr-un__body p + p,
.acr .acr-teams__text p + p,
.acr .acr-benefit__detail p + p {
	margin-top: .8em;
}

/* Rich text (wysiwyg fields, job descriptions). */
.acr .acr-prose > * + * {
	margin-top: 1em;
}

.acr .acr-prose p,
.acr .acr-prose li {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.acr .acr-prose a {
	color: var(--acr-teal-dark);
	text-decoration: underline;
	text-underline-offset: .15em;
	overflow-wrap: anywhere;
}

.acr .acr-prose a:hover {
	text-decoration-thickness: 2px;
}

.acr .acr-prose ul {
	list-style: disc;
	padding-inline-start: 1.4em;
}

.acr .acr-prose ol {
	list-style: decimal;
	padding-inline-start: 1.4em;
}

.acr .acr-prose li + li {
	margin-top: .4em;
}

.acr .acr-prose h2 {
	margin-top: 1.4em;
	font-size: 28px;
}

.acr .acr-prose h3 {
	margin-top: 1.3em;
	font-size: 22px;
}

.acr .acr-prose h4 {
	margin-top: 1.2em;
	font-size: 19px;
}

.acr .acr-prose strong {
	color: var(--acr-ink);
}

/* Buttons */
.acr .acr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 22px;
	border: 2px solid transparent;
	border-radius: 8px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.acr .acr-btn--yellow {
	background: var(--acr-yellow);
	color: var(--acr-ink);
}

.acr .acr-btn--yellow:hover {
	background: #FFE77F;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
	transform: translateY(-1px);
}

.acr .acr-btn--outline {
	border-color: currentColor;
	background: transparent;
	color: var(--acr-teal-dark);
}

.acr .acr-btn--outline:hover {
	background: var(--acr-tint);
}

/* Shown only inside the block editor when required content is missing. */
.acr .acr-editor-note {
	margin: 12px 0;
	padding: 10px 14px;
	border: 2px dashed currentColor;
	border-radius: 8px;
	background: rgba(255, 255, 255, .9);
	color: #8A4B00;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

/* ---------- 1. Hero ---------- */

html body .acr.acr-hero {
	padding: 0;
	background: var(--acr-teal);
}

.acr.acr-hero > .acr-wrap {
	max-width: none;
	padding-inline: 0;
}

.acr .acr-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
	min-height: 360px;
}

.acr.acr-hero--no-image .acr-hero__grid {
	grid-template-columns: minmax(0, 1fr);
}

.acr .acr-hero__panel {
	display: flex;
	align-items: center;
	padding-block: 56px;
	/* Line the text up with the 1170px content column of the sections below. */
	padding-inline-start: max(var(--acr-gutter), calc((100vw - var(--acr-wrap)) / 2 + var(--acr-gutter)));
	padding-inline-end: 48px;
	background: var(--acr-teal);
	color: #fff;
}

.acr .acr-hero__inner {
	width: 100%;
	max-width: 520px;
}

.acr .acr-hero__panel .acr-eyebrow {
	color: #fff;
}

.acr .acr-hero__title {
	margin: 0 0 16px;
	color: #fff;
	font-size: 48px;
	line-height: 1.08;
}

/* 19px heavy = WCAG large text, so white on #2E9EB4 (3.15:1) passes AA. */
.acr .acr-hero__text {
	max-width: 460px;
	color: #fff;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.5;
}

.acr .acr-hero__actions {
	margin-top: 26px;
}

.acr .acr-hero__media {
	position: relative;
	min-height: 360px;
	overflow: hidden;
	background: var(--acr-teal-dark);
}

.acr .acr-hero__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.acr.acr-hero--pos-top .acr-hero__img {
	object-position: center top;
}

.acr.acr-hero--pos-bottom .acr-hero__img {
	object-position: center bottom;
}

.acr .acr-hero__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

/* ---------- 2. Intro + pull quote ---------- */

.acr .acr-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	align-items: center;
	gap: 64px;
}

.acr.acr-intro--no-quote .acr-intro__grid {
	grid-template-columns: minmax(0, 1fr);
	max-width: 780px;
}

.acr .acr-intro__body {
	color: var(--acr-text);
	font-size: 18px;
	line-height: 1.6;
}

.acr .acr-intro__quote {
	position: relative;
	margin: 0;
	padding: 28px 0 0;
	border: 0;
	color: var(--acr-ink);
	font-size: 40px;
	font-style: normal;
	font-weight: 800;
	line-height: 1.2;
	quotes: none;
}

/* Yellow bar above the quote; also cancels the theme's giant quote glyphs on blockquote. */
.acr .acr-intro__quote::before {
	content: "";
	position: absolute;
	top: 0;
	right: auto;
	bottom: auto;
	left: auto;
	inset-inline-start: 0;
	width: 28px;
	height: 8px;
	border-radius: 4px;
	background: var(--acr-yellow);
	font-size: 0;
}

.acr .acr-intro__quote::after,
.acr .acr-story__quote::before,
.acr .acr-story__quote::after {
	content: none;
	display: none;
}

.acr .acr-intro__quote p {
	color: inherit;
	font: inherit;
}

.acr .acr-intro__quote p + p {
	margin-top: .5em;
}

/* ---------- 3. Vacancies ---------- */

.acr .acr-vacancies__card {
	position: relative;
	padding: 56px 76px 48px;
	border-radius: 30px;
	background: var(--acr-teal);
	color: #fff;
}

.acr .acr-vacancies__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 32px;
}

.acr .acr-vacancies__top--art {
	grid-template-columns: minmax(0, 1fr) 190px;
}

.acr .acr-vacancies__card .acr-eyebrow,
.acr .acr-vacancies__card .acr-title {
	color: #fff;
}

/* Text on teal: 19px+ heavy (WCAG large text), see the contrast note at the top. */
.acr .acr-vacancies__intro {
	max-width: 680px;
	margin-top: 14px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.5;
}

.acr .acr-vacancies__art .acr-icon {
	display: block;
	width: 190px;
	height: 190px;
}

.acr .acr-vacancies__label {
	margin: 36px 0 20px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.4;
}

.acr .acr-vacancies__label strong {
	font-weight: 800;
}

.acr .acr-vacancies__office {
	margin: 28px 0 14px;
	color: #fff;
	font-size: 22px;
	line-height: 1.25;
}

.acr .acr-vacancies__label + .acr-vacancies__group .acr-vacancies__office {
	margin-top: 0;
}

/* Two columns filled top to bottom (as in the mock-up), so the visual order matches the DOM order. */
.acr .acr-pills {
	margin: 0;
	padding: 0;
	list-style: none;
	column-count: 2;
	column-gap: 44px;
}

.acr .acr-pills__item {
	margin: 0 0 16px;
	padding: 0;
	break-inside: avoid;
	page-break-inside: avoid;
}

.acr .acr-pill {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
	padding: 8px 16px;
	border-radius: 10px;
	background: var(--acr-pill);
	color: var(--acr-ink);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;
}

.acr .acr-pill__icon {
	display: inline-flex;
	color: var(--acr-teal-line);
}

.acr .acr-pill__icon .acr-icon {
	width: 26px;
	height: 26px;
	stroke-width: 1.5;
}

.acr .acr-pill__title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--acr-ink);
}

.acr .acr-pill__arrow {
	width: 22px;
	height: 22px;
	color: var(--acr-teal);
	transition: transform .15s ease;
}

.acr a.acr-pill:hover {
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}

.acr a.acr-pill:hover .acr-pill__arrow {
	transform: translate(2px, -2px);
}

.acr .acr-vacancies__actions {
	margin-top: 36px;
	text-align: center;
}

.acr .acr-vacancies__empty {
	margin-top: 32px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.5;
}

/* ---------- 4. About + stats + UN band ---------- */

.acr .acr-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.acr .acr-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 36px 24px 32px;
	border: 3px solid var(--acr-border);
	border-radius: 22px;
	background: #fff;
	text-align: center;
}

.acr .acr-stat__icon {
	margin-bottom: 18px;
	color: var(--acr-teal-icon);
}

.acr .acr-stat__icon .acr-icon {
	display: block;
	width: 120px;
	height: 120px;
}

.acr .acr-stat__number {
	color: var(--acr-ink);
	font-size: 44px;
	font-weight: 800;
	line-height: 1.1;
}

.acr .acr-stat__label {
	max-width: 15em;
	margin-top: 6px;
	color: var(--acr-ink);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
}

.acr .acr-stat__note {
	max-width: 20em;
	margin-top: 6px;
	color: var(--acr-text);
	font-size: 15px;
	line-height: 1.4;
}

.acr .acr-un {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 32px;
	margin-top: 48px;
	padding: 28px 48px;
	border-radius: 24px;
	background: var(--acr-tint-3);
}

.acr .acr-un__icon {
	color: var(--acr-ink);
}

.acr .acr-un__icon .acr-icon {
	display: block;
	width: 88px;
	height: 88px;
	stroke-width: 1.4;
}

.acr .acr-un__title {
	margin-bottom: 8px;
	color: var(--acr-ink);
	font-size: 36px;
	line-height: 1.15;
}

.acr .acr-un__body {
	color: var(--acr-text);
	font-size: 17px;
	line-height: 1.5;
}

/* ---------- Shared carousel (stories, benefits) ---------- */

.acr .acr-carousel {
	position: relative;
}

.acr .acr-carousel__track {
	position: relative;
	display: flex;
	gap: var(--acr-gap, 0px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

/* Ring inside the track: the stories panel clips anything outside it (overflow: hidden).
   Specificity beats the shared `html body .acr [tabindex]:focus-visible` ring. */
html body .acr .acr-carousel .acr-carousel__track:focus-visible {
	outline: 3px solid var(--acr-ink);
	outline-offset: -4px;
	box-shadow: none;
}

/* The scrollbar is hidden only once JS has added the controls. */
.acr .acr-carousel.is-ready .acr-carousel__track {
	scrollbar-width: none;
}

.acr .acr-carousel.is-ready .acr-carousel__track::-webkit-scrollbar {
	display: none;
}

.acr .acr-carousel__slide {
	flex: 0 0 var(--acr-slide, 100%);
	min-width: 0;
	scroll-snap-align: start;
}

.acr .acr-carousel__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 56px;
	padding: 6px 24px;
}

.acr .acr-carousel:not(.is-ready) .acr-carousel__bar,
.acr .acr-carousel.is-static .acr-carousel__bar {
	display: none;
}

.acr .acr-carousel__dots {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	max-width: 100%;
}

/* 44px targets; they shrink (not below 24px) only when many dots share a narrow bar. */
.acr .acr-carousel__dot {
	display: inline-flex;
	flex: 0 1 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-width: 24px;
	height: 44px;
}

/* Hollow ring = other slides, filled = current; #006E8C is 3:1+ on every bar (WCAG 1.4.11). */
.acr .acr-carousel__dot::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--acr-teal-deep);
	transition: background-color .15s ease, transform .15s ease;
}

.acr .acr-carousel__dot:hover::before {
	transform: scale(1.2);
}

.acr .acr-carousel__dot[aria-current="true"]::before {
	background: var(--acr-teal-deep);
}

.acr .acr-carousel__nav {
	position: absolute;
	top: 50%;
	inset-inline-end: 20px;
	display: flex;
	align-items: center;
	gap: 2px;
	transform: translateY(-50%);
}

.acr .acr-carousel__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--acr-ink);
}

/* Visible 30px ring inside the 44px touch target. */
.acr .acr-carousel__btn::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 7px;
	width: 30px;
	height: 30px;
	border: 2px solid currentColor;
	border-radius: 50%;
}

.acr .acr-carousel__btn .acr-icon {
	width: 18px;
	height: 18px;
	stroke-width: 2.5;
}

.acr .acr-carousel__btn:hover::before {
	background: rgba(255, 255, 255, .6);
}

.acr .acr-carousel__btn[aria-disabled="true"] {
	opacity: .35;
	cursor: default;
}

.acr .acr-carousel__btn[aria-disabled="true"]:hover::before {
	background: none;
}

.acr .acr-carousel__count {
	min-width: 3.4em;
	color: var(--acr-ink);
	font-size: 17px;
	font-weight: 800;
	text-align: center;
	white-space: nowrap;
}

/* ---------- 5. Career stories ---------- */

.acr .acr-stories__carousel {
	overflow: hidden;
	border-radius: 22px;
	background: var(--acr-tint);
}

.acr .acr-stories__carousel .acr-carousel__slide {
	scroll-snap-stop: always;
}

.acr .acr-story {
	position: relative;
	padding: 56px 100px 40px;
}

.acr .acr-story__mark {
	position: absolute;
	top: 28px;
	inset-inline-end: 36px;
	width: 64px;
	height: 64px;
	color: var(--acr-teal);
}

.acr .acr-story__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 28px;
	padding-inline-end: 80px;
}

.acr .acr-story__icon {
	color: var(--acr-teal);
}

.acr .acr-story__icon .acr-icon {
	display: block;
	width: 46px;
	height: 46px;
	stroke-width: 1.5;
}

.acr .acr-story__role {
	color: var(--acr-ink);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
}

.acr .acr-story__org {
	display: block;
	color: var(--acr-ink);
	font-size: 18px;
	font-weight: 500;
}

.acr .acr-story__quote {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--acr-ink);
	font-size: 18px;
	font-style: normal;
	line-height: 1.6;
	quotes: none;
}

.acr .acr-story__quote p {
	margin: 0 0 1em;
	color: inherit;
	font: inherit;
}

.acr .acr-story__quote p:last-child {
	margin-bottom: 0;
}

.acr .acr-stories__carousel .acr-carousel__bar {
	background: var(--acr-tint-2);
}

/* ---------- 6. Find your team ---------- */

.acr .acr-teams__tab {
	margin: 0;
	font-size: inherit;
}

.acr .acr-teams__btn {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	min-height: 56px;
	padding: 10px 18px;
	border-radius: 10px;
	color: var(--acr-ink);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	text-align: start;
	transition: background-color .15s ease, color .15s ease;
}

.acr .acr-teams__btn:hover {
	background: var(--acr-tint);
}

.acr .acr-teams__list.is-ready .acr-teams__btn[aria-expanded="true"] {
	background: var(--acr-teal);
	color: #fff;
}

.acr .acr-teams__btn-icon {
	display: inline-flex;
}

.acr .acr-teams__btn-icon .acr-icon {
	display: block;
	width: 34px;
	height: 34px;
}

.acr .acr-teams__btn-label {
	flex: 1 1 auto;
	min-width: 0;
}

.acr .acr-teams__chev {
	width: 26px;
	height: 26px;
	stroke-width: 2.25;
	transition: transform .2s ease;
}

.acr .acr-teams__list:not(.is-ready) .acr-teams__chev {
	display: none;
}

.acr .acr-teams__panel {
	padding: 16px 4px 32px;
}

.acr .acr-teams__media {
	margin-bottom: 20px;
	overflow: hidden;
	border-radius: 16px;
	background: var(--acr-tint);
	aspect-ratio: 745 / 351;
}

.acr .acr-teams__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.acr .acr-teams__label {
	color: var(--acr-teal-dark);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.acr .acr-teams__name {
	margin: 2px 0 10px;
	color: var(--acr-ink);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.15;
}

.acr .acr-teams__text {
	color: var(--acr-text);
	font-size: 18px;
	line-height: 1.6;
}

/* Desktop: buttons in a column on the left, the open panel on the right spanning every row.
   The extra 1fr row absorbs the panel's height so the buttons stay packed at the top. */
@media (min-width: 960px) {
	.acr .acr-teams__list.is-ready {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
		grid-template-rows: repeat(var(--acr-team-count, 7), auto) 1fr;
		align-items: start;
		column-gap: 64px;
		row-gap: 8px;
	}

	.acr .acr-teams__list.is-ready .acr-teams__tab {
		grid-column: 1;
	}

	.acr .acr-teams__list.is-ready .acr-teams__panel {
		grid-column: 2;
		grid-row: 1 / -1;
		padding: 0;
	}
}

/* Phones and tablets: accordion. */
@media (max-width: 959px) {
	.acr .acr-teams__tab {
		border-bottom: 1px solid var(--acr-border);
	}

	.acr .acr-teams__list.is-ready .acr-teams__btn[aria-expanded="true"] {
		border-radius: 10px 10px 0 0;
	}

	.acr .acr-teams__btn[aria-expanded="true"] .acr-teams__chev {
		transform: rotate(90deg);
	}

	.acr .acr-teams__panel {
		padding: 16px 4px 28px;
	}

	.acr .acr-teams__name {
		font-size: 26px;
	}
}

/* ---------- 7. Benefits ---------- */

/* White section; one rounded box holds the cards, grey lines between them; the light-teal
   controls bar sits under the box. */

.acr.acr-benefits .acr-head__text {
	font-size: 17px;
}

.acr .acr-benefits__box {
	overflow: hidden;
	border: 3px solid var(--acr-border);
	border-radius: 30px;
	background: #FEFEFE;
}

/* Every card draws its line on its start edge. The track starts 3px under the box border, so the
   line of the first card in view is always hidden and only the lines between cards show. */
.acr .acr-benefits__box .acr-carousel__track {
	margin-inline-start: -3px;
}

.acr .acr-benefits__carousel .acr-carousel__slide {
	--acr-slide: 25%;
}

.acr .acr-benefit {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 22px;
	padding-inline-start: 25px; /* 3px line + 22px */
	text-align: center;
}

.acr .acr-benefit::before {
	content: "";
	position: absolute;
	top: 20px;
	bottom: 20px;
	inset-inline-start: 0;
	width: 3px;
	border-radius: 2px;
	background: var(--acr-border);
}

.acr .acr-benefit__icon {
	margin: 0 0 16px;
	color: var(--acr-teal);
}

.acr .acr-benefit__icon .acr-icon {
	display: block;
	width: 64px;
	height: 64px;
	stroke-width: 1.5;
}

.acr .acr-benefit__title {
	max-width: 100%;
	color: var(--acr-ink);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
}

.acr .acr-benefit__detail {
	max-width: 100%;
	margin-top: 8px;
	color: var(--acr-ink);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
}

/* Same bar as Career stories, as its own rounded strip under the box (slightly inset). */
.acr .acr-carousel__bar--benefits {
	min-height: 52px;
	margin: 18px 24px 0;
	padding: 4px 176px;
	border-radius: 25px;
	background: var(--acr-faq);
}

/* Darker eyebrow on the light-teal sections (#007DA0 is only 4.26:1 on #EAF5F7). */
.acr.acr-faq .acr-eyebrow {
	color: var(--acr-teal-deep);
}

/* ---------- 8. FAQ ---------- */

html body .acr.acr-faq {
	background: var(--acr-faq);
}

.acr .acr-faq__title {
	margin-bottom: 28px;
	text-align: center;
}

.acr .acr-faq__list {
	max-width: 940px;
	margin-inline: auto;
}

.acr .acr-faq__item {
	margin: 0 0 14px;
	background: #fff;
}

.acr .acr-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 52px;
	padding: 12px 20px;
	color: var(--acr-ink);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}

.acr .acr-faq__q::-webkit-details-marker {
	display: none;
}

.acr .acr-faq__q::marker {
	content: "";
}

.acr .acr-faq__q:hover {
	color: var(--acr-teal-dark);
}

.acr .acr-faq__chev {
	flex: none;
	width: 24px;
	height: 24px;
	stroke-width: 2.5;
	transition: transform .2s ease;
}

.acr .acr-faq__item[open] .acr-faq__chev {
	transform: rotate(180deg);
}

.acr .acr-faq__a {
	padding: 0 20px 20px;
	color: var(--acr-text);
	font-size: 18px;
	line-height: 1.6;
}

/* ---------- Single job page (markup from templates/single-job.php) ---------- */

html body .acr.acr-job {
	padding: 56px 0 80px;
}

.acr .acr-job__back {
	margin-bottom: 24px;
	font-size: 16px;
}

.acr .acr-job__back a {
	color: var(--acr-teal-dark);
	font-weight: 800;
}

.acr .acr-job__back a:hover {
	text-decoration: underline;
}

.acr .acr-job__title {
	margin: 0 0 20px;
	color: var(--acr-ink);
	font-size: 44px;
	line-height: 1.12;
}

.acr .acr-job__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.acr .acr-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--acr-tint);
	color: var(--acr-ink);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
}

.acr .acr-chip .acr-icon {
	width: 18px;
	height: 18px;
	color: var(--acr-teal-dark);
}

.acr .acr-notice {
	margin: 0 0 28px;
	padding: 16px 20px;
	border-inline-start: 6px solid var(--acr-yellow);
	border-radius: 4px;
	background: #FFF8D6;
	color: var(--acr-ink);
	font-weight: 800;
}

.acr .acr-job__summary {
	max-width: 820px;
	margin-bottom: 24px;
	color: var(--acr-ink);
	font-size: 20px;
	line-height: 1.55;
}

.acr .acr-job__content {
	max-width: 820px;
}

.acr .acr-job__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 40px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1119px) {
	.acr .acr-benefits__carousel .acr-carousel__slide {
		--acr-slide: calc(100% / 3);
	}

	.acr .acr-story {
		padding-inline: 64px;
	}

	.acr .acr-vacancies__card {
		padding-inline: 48px;
	}
}

@media (max-width: 959px) {
	.acr {
		--acr-space: 48px;
	}

	html body .acr {
		font-size: 16px;
		line-height: 1.55;
	}

	.acr .acr-title,
	.acr .acr-job__title {
		font-size: 30px;
	}

	.acr .acr-head {
		margin-bottom: 28px;
	}

	.acr .acr-head--split {
		display: block;
	}

	.acr .acr-head__text {
		margin-top: 12px;
		font-size: 16px;
	}

	.acr .acr-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.acr .acr-hero__media {
		order: -1;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.acr .acr-hero__panel {
		padding: 32px var(--acr-gutter) 40px;
	}

	.acr .acr-hero__title {
		font-size: 34px;
	}

	.acr .acr-intro__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.acr .acr-intro__body {
		font-size: 16px;
	}

	.acr .acr-intro__quote {
		font-size: 28px;
	}

	.acr .acr-vacancies__card {
		padding: 36px 24px 32px;
		border-radius: 22px;
	}

	.acr .acr-vacancies__top--art {
		grid-template-columns: minmax(0, 1fr) 110px;
		gap: 20px;
	}

	.acr .acr-vacancies__art .acr-icon {
		width: 110px;
		height: 110px;
	}

	/* 19px heavy stays WCAG large text on the teal card. */
	.acr .acr-vacancies__label {
		margin-top: 28px;
		font-size: 19px;
	}

	.acr .acr-pills {
		column-count: 1;
	}

	.acr .acr-pills__item {
		margin-bottom: 12px;
	}

	.acr .acr-stats {
		gap: 16px;
	}

	.acr .acr-stat {
		padding: 24px 14px;
	}

	.acr .acr-stat__icon .acr-icon {
		width: 80px;
		height: 80px;
	}

	.acr .acr-stat__number {
		font-size: 32px;
	}

	.acr .acr-stat__label {
		font-size: 17px;
	}

	.acr .acr-un {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		margin-top: 32px;
		padding: 24px;
	}

	.acr .acr-un__icon .acr-icon {
		width: 64px;
		height: 64px;
	}

	.acr .acr-un__title {
		font-size: 24px;
	}

	.acr .acr-un__body {
		font-size: 16px;
	}

	.acr .acr-story {
		padding: 32px 24px 24px;
	}

	.acr .acr-story__mark {
		top: 20px;
		inset-inline-end: 18px;
		width: 40px;
		height: 40px;
	}

	.acr .acr-story__head {
		padding-inline-end: 52px;
		margin-bottom: 20px;
	}

	.acr .acr-story__quote {
		font-size: 16px;
	}

	.acr .acr-benefits__carousel .acr-carousel__slide {
		--acr-slide: 50%;
	}

	.acr.acr-benefits .acr-head__text {
		font-size: 16px;
	}

	.acr .acr-benefits__box {
		border-radius: 24px;
	}

	.acr .acr-carousel__bar--benefits {
		margin-inline: 16px;
	}

	.acr .acr-teams__text,
	.acr .acr-faq__a {
		font-size: 16px;
	}

	.acr .acr-faq__q {
		font-size: 17px;
		padding: 12px 16px;
	}

	.acr .acr-faq__a {
		padding: 0 16px 16px;
	}

	.acr .acr-job__summary {
		font-size: 18px;
	}
}

@media (max-width: 599px) {
	.acr .acr-vacancies__top--art {
		grid-template-columns: minmax(0, 1fr);
	}

	.acr .acr-vacancies__art {
		display: none;
	}

	.acr .acr-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.acr .acr-stat__icon .acr-icon {
		width: 96px;
		height: 96px;
	}

	/* One benefit per view, centred in the box (the cards are centred, so a peek would only show
	   empty space); no lines between cards. */
	.acr .acr-benefits__carousel .acr-carousel__slide {
		--acr-slide: 100%;
	}

	.acr .acr-benefit {
		padding: 26px 18px;
		padding-inline-start: 21px;
	}

	.acr .acr-benefit::before {
		display: none;
	}

	.acr .acr-benefit__title {
		font-size: 20px;
	}

	/* Dots on their own row above prev / counter / next. */
	.acr .acr-carousel__bar {
		flex-direction: column;
		gap: 0;
		padding: 4px 12px 8px;
	}

	.acr .acr-carousel__bar--benefits {
		margin-inline: 8px;
		border-radius: 22px;
	}

	.acr .acr-carousel__nav {
		position: static;
		transform: none;
	}
}

@media (min-width: 960px) {
	/* Long stories flow in two columns on wide screens. */
	.acr .acr-story__quote {
		column-count: 2;
		column-gap: 40px;
	}
}

/* ---------- RTL, motion, editor ---------- */

[dir="rtl"] .acr .acr-carousel__btn .acr-icon,
[dir="rtl"] .acr .acr-teams__chev,
[dir="rtl"] .acr .acr-pill__arrow {
	transform: scaleX(-1);
}

[dir="rtl"] .acr a.acr-pill:hover .acr-pill__arrow {
	transform: scaleX(-1) translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
	.acr *,
	.acr *::before,
	.acr *::after {
		scroll-behavior: auto !important;
		transition: none !important;
		animation: none !important;
	}
}

/* Block editor: let our full-width sections use the whole canvas. */
.wp-block[data-type^="alayn-careers/"] {
	max-width: none;
	margin-right: 0;
	margin-left: 0;
}

.editor-styles-wrapper .acr .acr-hero__panel,
.block-editor-block-list__layout .acr .acr-hero__panel {
	padding-inline-start: 40px;
}

/* Keep "Al-Ayn" together in headings (1.0.5). */
.acr .acr-nowrap {
	white-space: nowrap;
}