/*
 * NGL v2 — the about page (Figma "About Us" 319:9662; design/about): our story with the NGL disc, the
 * management message, the organisation chart, accreditation, our presence and the careers call. The
 * photo banner, the breadcrumbs, eyebrows, section titles, leads and quote bar are the shared ones
 * (inner.css, base.css).
 *
 * Desktop values are the 1440px frame's and scale down with clamp(). Logical properties throughout, so
 * RTL (fa, ar) and LTR (en) share every rule; the NGL disc is Latin text and stays left to right.
 */

.nglv2-ipage--about {
	--nglv2-agap: clamp(48px, 5.5556vw, 80px); /* between the page's blocks: 80 at 1440 */
}

.nglv2-astory,
.nglv2-amsg,
.nglv2-aorg,
.nglv2-aaccr,
.nglv2-apres,
.nglv2-acareers {
	margin-top: var(--nglv2-agap);
}

/* The banner's «داستان ما» button lands here, clear of the fixed header. */
.nglv2-astory {
	scroll-margin-top: calc(var(--nglv2-header-h) + 24px);
}

/* Section titles: ExtraBold 40 on an 85px line (64 below 1024). */
.nglv2 .nglv2-astory__title,
.nglv2 .nglv2-aorg__title,
.nglv2 .nglv2-apres__title {
	font-weight: 800;
	font-size: clamp(28px, calc(12px + 1.945vw), 40px);
	line-height: 1.6;
	color: var(--nglv2-ink);
}

@media (min-width: 1024px) {
	.nglv2 .nglv2-astory__title,
	.nglv2 .nglv2-aorg__title,
	.nglv2 .nglv2-apres__title {
		line-height: 2.125;
	}
}

/* ----------------------------------------------------------------------------------------------
 * Our story (324:10926): eyebrow; 32; the copy (613) at the start and, 32 from it, the photo (504 ×
 * 544, radius 24) with the green disc (144, turned -8°) over its corner on the copy's side.
 * ------------------------------------------------------------------------------------------- */

.nglv2-astory__row {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	margin-top: 32px;
}

.nglv2-astory__copy {
	display: flex;
	flex: 1 1 613px;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	min-width: 0;
}

.nglv2 .nglv2-astory__text {
	align-self: stretch;
	border-inline-start: 2px solid rgba(109, 190, 69, 0.39);
	padding-inline-start: 24px;
	font-weight: 600;
	font-size: clamp(16px, calc(10px + 0.5556vw), 18px);
	line-height: 1.5;
	text-align: justify;
	color: var(--nglv2-ink);
}

/* Chrome sets IRANSansX a little wider than Figma: 2px more keeps the design's line breaks. */
@media (min-width: 1200px) {
	.nglv2 .nglv2-astory__text {
		margin-inline-end: -2px;
	}
}

/* The mission (at the start) and the vision: 229 wide in boxes of 260, 26 in from the ends. */
.nglv2-astory__aims {
	display: flex;
	align-self: stretch;
	justify-content: space-between;
	gap: 24px;
	padding-inline: 26px;
}

.nglv2-astory__aim {
	flex: 0 1 260px;
	min-width: 0;
}

.nglv2 .nglv2-astory__aim p {
	max-width: 229px;
	font-size: 14px;
	line-height: 1.5;
	text-align: justify;
	color: #485160;
}

.nglv2-astory__media {
	position: relative;
	flex: 0 1 555px;
	min-width: 0;
	padding-inline-start: 50.64px; /* the disc's overhang: its 162.64 box overlaps the photo by 112 */
}

.nglv2 .nglv2-astory__img {
	display: block;
	width: 100%;
	height: 544px;
	object-fit: cover;
	border-radius: 24px;
}

.nglv2-astory__disc {
	position: absolute;
	inset-inline-start: 9.32px;
	bottom: 9.32px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 144px;
	height: 144px;
	border-radius: 50%;
	background: var(--nglv2-accent);
	color: var(--nglv2-ink);
	transform: rotate(-8deg);
}

.nglv2-astory__brand {
	display: flex;
	align-items: center;
}

.nglv2-astory__ngl {
	font-weight: 1000; /* IRANSansX Heavy */
	font-size: 24px;
	line-height: 36px;
}

.nglv2-astory__motto {
	display: block;
	width: 63px;
	padding-right: 8px; /* the disc is left to right on every page */
	font-size: 7.68px;
	line-height: 11.52px;
	white-space: nowrap;
}

/* ----------------------------------------------------------------------------------------------
 * Management message (324:11708): eyebrow; 32; the portrait (416 × 625) at the start and, 82 from it,
 * the copy (608): title, quote mark, quote (4 lines of 64.4), paragraph, signature.
 * ------------------------------------------------------------------------------------------- */

.nglv2-amsg__row {
	display: flex;
	align-items: flex-start;
	gap: clamp(32px, 5.6945vw, 82px);
	margin-top: 32px;
}

.nglv2-amsg__media {
	flex: 0 1 416px;
	min-width: 0;
}

.nglv2 .nglv2-amsg__img {
	display: block;
	width: 100%;
	height: 625px;
	object-fit: cover;
}

.nglv2-amsg__copy {
	display: flex;
	flex: 0 1 672px;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	margin: 0;
}

.nglv2 .nglv2-amsg__title {
	padding-top: 20px;
	font-weight: 800;
	font-size: clamp(32px, calc(12px + 2.4867vw), 47.728px);
	line-height: 1.35;
	letter-spacing: -0.045em;
	color: #081f24;
}

.nglv2-amsg__mark {
	display: block;
	padding-top: 24px;
	color: #0b948c;
}

.nglv2 .nglv2-amsg__mark .nglv2-icon {
	display: block;
	width: 35.2px;
	height: 35.2px;
}

/* Betheme moves every blockquote 15px down (position: relative; top: 15px) and indents it. */
.nglv2 .nglv2-amsg__quote {
	position: static;
	top: auto;
	max-width: 672px;
	margin: 0;
	padding: 24px 0 0;
	border: 0;
	background: none;
	quotes: none;
}

.nglv2 .nglv2-amsg__quote::before,
.nglv2 .nglv2-amsg__quote::after {
	content: none;
}

.nglv2 .nglv2-amsg__quote p {
	margin: 0;
	font-style: normal;
	font-weight: 700;
	font-size: clamp(20px, calc(10px + 1.1vw), 27px);
	line-height: 1.8;
	letter-spacing: -0.03em;
	color: #081f24;
}

.nglv2 .nglv2-amsg__text {
	max-width: 660px; /* 578 drawn; Chrome sets the first line 3px wider than Figma */
	padding-top: 24px;
	font-size: 14.4px;
	line-height: 2;
	color: #294348;
}

.nglv2-amsg__sign {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	gap: 17px;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 0.8px solid #cbd7d2;
}

.nglv2-amsg__name {
	font-weight: 800;
	font-size: clamp(24px, calc(8px + 1.6667vw), 32px);
	line-height: 24px;
	color: #081f24;
}

.nglv2-amsg__role {
	padding-top: 5.6px;
	font-size: 16px;
	line-height: 16.32px;
	color: #748582;
}

/* ----------------------------------------------------------------------------------------------
 * Organisation chart (324:11753, holding the live site's whole chart): eyebrow; 32; title; 32; the
 * chart; 48; the panel with each unit's own diagram. Everything is the design's pieces: the dark box
 * (256 × 96, radius 12, label 10.08 teal, title 700 16/24 white), 1px lines #cbd7d2, the cards (0.8
 * border #cbd7d2, radius 12, number 9.92 #0b948c 16/17 in, title 700 14.4/21.6, description 10.4/15.6
 * #82918e).
 *
 * Lines: boxes stand in a centred column (__tree), each hanging from the one above by a line one step
 * long (32 in the chart, 24 in a diagram, 16 from a section to its members). A row (__row) puts two boxes
 * either side of the line, which runs on through it. A branch (__branch) hangs its boxes from a line
 * across the centres of its first row; later rows just follow. Below 768 the chart has no lines and
 * the diagrams keep only their straight ones.
 * ------------------------------------------------------------------------------------------- */

.nglv2 .nglv2-aorg__title {
	margin-top: 32px;
}

.nglv2-aorg__tree {
	--nglv2-aorg-step: 32px;
	--nglv2-aorg-line: #cbd7d2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nglv2-aorg-step);
}

.nglv2-aorg__chart {
	margin-top: 32px;
}

.nglv2-aorg__tree--detail {
	--nglv2-aorg-step: 24px;
	margin-top: 32px;
}

/* The managing director: the design's box. */
.nglv2-aorg__top {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 256px;
	min-height: 96px;
	padding: 12px 24px;
	border-radius: 12px;
	background: #081f24;
	text-align: center;
}

.nglv2 .nglv2-aorg__label {
	font-size: 10.08px;
	line-height: 15.12px;
	color: #26c7bb;
}

.nglv2 .nglv2-aorg__head {
	padding-top: 6.4px;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #fff;
}

/* Role boxes: the deputy (the managing director's box without a label), the roles beside the lines,
 * and the diagrams' boxes. */
.nglv2 .nglv2-aorg__node {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(100%, 280px);
	min-height: 48px;
	padding: 12px 16px;
	border: 0.8px solid var(--nglv2-aorg-line);
	border-radius: 12px;
	background: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 13.6px;
	line-height: 20.4px;
	color: #081f24;
}

.nglv2 .nglv2-aorg__node--deputy,
.nglv2 .nglv2-aorg__node--dark {
	border-color: #081f24;
	background: #081f24;
	color: #fff;
}

.nglv2 .nglv2-aorg__node--deputy {
	width: auto;
	min-width: 256px;
	min-height: 64px;
	padding: 12px 24px;
	font-size: 16px;
	line-height: 24px;
}

.nglv2 .nglv2-aorg__node--dark,
.nglv2 .nglv2-aorg__node--lead {
	font-size: 14.4px;
	line-height: 21.6px;
}

/* The unit's own manager. */
.nglv2 .nglv2-aorg__node--lead {
	border-color: #0b948c;
	box-shadow: inset 0 0 0 0.8px #0b948c;
}

.nglv2 .nglv2-aorg__node--role,
.nglv2 .nglv2-aorg__node--member {
	font-weight: 600;
	color: #485160;
}

.nglv2 .nglv2-aorg__node--role {
	min-height: 56px;
}

.nglv2 .nglv2-aorg__node--head {
	width: 100%;
	min-height: 64px;
}

.nglv2 .nglv2-aorg__node--member {
	width: calc(100% - 24px);
	min-height: 40px;
	padding: 10px 12px;
	background: var(--nglv2-bg);
	font-size: 12.8px;
	line-height: 19.2px;
}

/* The units' cards (the design's), links to their diagrams. */
.nglv2 .nglv2-aorg__card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 128px;
	padding: 28px 12px 20px;
	border: 0.8px solid var(--nglv2-aorg-line);
	border-radius: 12px;
	background: #fff;
	text-align: center;
	color: inherit;
	transition: border-color 0.3s, box-shadow 0.3s;
}

.nglv2 .nglv2-aorg__card--side {
	min-height: 72px;
	padding: 16px 20px;
}

.nglv2 a.nglv2-aorg__card:hover,
.nglv2 a.nglv2-aorg__card.is-active {
	border-color: #0b948c;
	box-shadow: 0 10px 24px rgba(8, 31, 36, 0.08);
}

.nglv2 a.nglv2-aorg__card.is-active {
	box-shadow: inset 0 0 0 0.8px #0b948c, 0 10px 24px rgba(8, 31, 36, 0.08);
}

.nglv2 a.nglv2-aorg__card:focus-visible {
	outline: 2px solid var(--nglv2-green);
	outline-offset: 3px;
}

.nglv2-aorg__num {
	position: absolute;
	top: 16px;
	inset-inline-start: 17px;
	font-size: 9.92px;
	line-height: 14.88px;
	color: #0b948c;
}

.nglv2 .nglv2-aorg__name {
	display: block;
	font-weight: 700;
	font-size: 14.4px;
	line-height: 21.6px;
	color: #081f24;
}

.nglv2 .nglv2-aorg__desc {
	display: block;
	padding-top: 8px;
	font-size: 10.4px;
	line-height: 15.6px;
	color: #82918e;
}

/* Rows: two boxes either side of the line (a lone one on the start side). */
.nglv2 .nglv2-aorg__row {
	--nglv2-aorg-row-w: 760px;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
	align-items: center;
	width: min(100%, var(--nglv2-aorg-row-w));
}

.nglv2 .nglv2-aorg__row--staff {
	--nglv2-aorg-row-w: 680px;
}

.nglv2 .nglv2-aorg__tree--detail .nglv2-aorg__row {
	--nglv2-aorg-row-w: 600px;
}

.nglv2-aorg__row > li {
	display: flex;
	justify-content: center;
}

.nglv2-aorg__row > li:nth-child(2) {
	grid-column: 3;
}

.nglv2 .nglv2-aorg__row .nglv2-aorg__node {
	width: 100%;
}

/* Branches: boxes side by side, --nglv2-aorg-cols to a row; a diagram's at most 260 wide each. */
.nglv2 .nglv2-aorg__branch {
	--nglv2-aorg-cols: 1;
	--nglv2-aorg-gap: 16px;
	--nglv2-aorg-col-w: 260px;
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--nglv2-aorg-cols), minmax(0, 1fr));
	gap: 24px var(--nglv2-aorg-gap);
	width: min(100%, calc(var(--nglv2-aorg-cols) * var(--nglv2-aorg-col-w) + (var(--nglv2-aorg-cols) - 1) * var(--nglv2-aorg-gap)));
	margin-top: var(--nglv2-aorg-step);
}

/* The managers: seven to a row; up to three are the design's row (368.4 wide, 47 apart). */
.nglv2 .nglv2-aorg__units {
	--nglv2-aorg-cols: 7;
	--nglv2-aorg-col-w: 368.4px;
	row-gap: 20px;
}

.nglv2 .nglv2-aorg__units--1 { --nglv2-aorg-cols: 1; }
.nglv2 .nglv2-aorg__units--2 { --nglv2-aorg-cols: 2; }
.nglv2 .nglv2-aorg__units--3 { --nglv2-aorg-cols: 3; }
.nglv2 .nglv2-aorg__units--4 { --nglv2-aorg-cols: 4; }
.nglv2 .nglv2-aorg__units--5 { --nglv2-aorg-cols: 5; }
.nglv2 .nglv2-aorg__units--6 { --nglv2-aorg-cols: 6; }

.nglv2 :is(.nglv2-aorg__units--1, .nglv2-aorg__units--2, .nglv2-aorg__units--3) {
	--nglv2-aorg-gap: clamp(16px, 3.2639vw, 47px);
}

.nglv2 :is(.nglv2-aorg__units--1, .nglv2-aorg__units--2, .nglv2-aorg__units--3) .nglv2-aorg__card {
	padding: 24px 32px;
}

.nglv2 .nglv2-aorg__groups--2 { --nglv2-aorg-cols: 2; }
.nglv2 .nglv2-aorg__groups--3 { --nglv2-aorg-cols: 3; }
.nglv2 .nglv2-aorg__groups--4 { --nglv2-aorg-cols: 4; }

/* A section of a diagram: its box, its members under it. */
.nglv2-aorg__group {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nglv2 .nglv2-aorg__members {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin-top: 16px;
}

/* The lines. */
.nglv2-aorg__tree > .nglv2-aorg__node:not(:first-child)::before,
.nglv2-aorg__members > li::before,
.nglv2-aorg__row::before,
.nglv2-aorg__row::after,
.nglv2-aorg__branch::before,
.nglv2-aorg__branch::after,
.nglv2-aorg__branch > li::before {
	content: "";
	position: absolute;
	z-index: 0;
	background: var(--nglv2-aorg-line);
	pointer-events: none;
}

/* Up from a box to the one above; from a member to its section's box. */
.nglv2-aorg__tree > .nglv2-aorg__node:not(:first-child)::before,
.nglv2-aorg__members > li::before {
	bottom: 100%;
	inset-inline-start: calc(50% - 0.5px);
	width: 1px;
	height: var(--nglv2-aorg-step);
}

.nglv2-aorg__members > li::before {
	height: 16px;
}

/* Through a row from the box above (ending at it when nothing follows), and across between its boxes. */
.nglv2-aorg__row::before {
	top: calc(-1 * var(--nglv2-aorg-step));
	bottom: 0;
	inset-inline-start: calc(50% - 0.5px);
	width: 1px;
}

.nglv2-aorg__row:last-child::before {
	bottom: 50%;
}

.nglv2-aorg__row::after {
	top: calc(50% - 0.5px);
	inset-inline: 0;
	height: 1px;
}

.nglv2-aorg__row--1::after {
	inset-inline-end: 50%;
}

/* A branch: up to the box above, across its first row's centres, down into each box of that row. */
.nglv2-aorg__branch::after {
	top: calc(-2 * var(--nglv2-aorg-step));
	inset-inline-start: calc(50% - 0.5px);
	width: 1px;
	height: var(--nglv2-aorg-step);
}

.nglv2-aorg__branch::before {
	top: calc(-1 * var(--nglv2-aorg-step));
	inset-inline: calc((100% - (var(--nglv2-aorg-cols) - 1) * var(--nglv2-aorg-gap)) / (2 * var(--nglv2-aorg-cols)));
	height: 1px;
}

.nglv2-aorg__branch > li {
	position: relative;
}

.nglv2-aorg__branch > li::before {
	top: calc(-1 * var(--nglv2-aorg-step));
	inset-inline-start: calc(50% - 0.5px);
	width: 1px;
	height: var(--nglv2-aorg-step);
}

.nglv2-aorg__units > li:nth-child(n + 8)::before,
.nglv2-aorg__groups > li:nth-child(n + 5)::before {
	display: none;
}

/* The panel: a prompt until a unit is chosen (the script), then that unit's diagram. */
.nglv2-aorg__panel {
	margin-top: 48px;
	padding: clamp(24px, 2.7778vw, 40px) clamp(16px, 2.7778vw, 40px);
	border: 0.8px solid #cbd7d2;
	border-radius: 24px;
	background: #fff;
}

.nglv2-aorg__hint {
	padding-block: 40px;
	text-align: center;
}

.nglv2-aorg__hint[hidden],
.nglv2-aorg__detail[hidden] {
	display: none;
}

.nglv2 .nglv2-aorg__hint-title {
	font-weight: 700;
	font-size: 20px;
	line-height: 32px;
	color: #081f24;
}

.nglv2 .nglv2-aorg__hint-text {
	padding-top: 8px;
	font-size: 14px;
	line-height: 1.8;
	color: #82918e;
}

.nglv2-aorg__detail {
	scroll-margin-top: calc(var(--nglv2-header-h) + 24px);
}

.nglv2-aorg__detail:focus {
	outline: none;
}

/* Without the script every diagram is listed. */
.nglv2-aorg:not(.is-interactive) .nglv2-aorg__detail + .nglv2-aorg__detail {
	margin-top: 48px;
	padding-top: 40px;
	border-top: 0.8px solid #cbd7d2;
}

.nglv2-aorg.is-interactive .nglv2-aorg__detail {
	animation: nglv2-aorg-in 0.3s var(--nglv2-ease-out);
}

@keyframes nglv2-aorg-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

.nglv2 .nglv2-aorg__chartno {
	font-weight: 600;
	font-size: 12px;
	line-height: 18px;
	color: #0b948c;
	text-align: center;
}

.nglv2 .nglv2-aorg__dtitle {
	padding-top: 4px;
	font-weight: 800;
	font-size: clamp(20px, 1.6667vw, 24px);
	line-height: 1.6;
	color: #081f24;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.nglv2 .nglv2-aorg__card {
		transition: none;
	}

	.nglv2-aorg.is-interactive .nglv2-aorg__detail {
		animation: none;
	}
}

/* Narrower: the managers four to a row, a diagram's sections three. */
@media (max-width: 1199px) {
	.nglv2 :is(.nglv2-aorg__units--5, .nglv2-aorg__units--6, .nglv2-aorg__units--7) {
		--nglv2-aorg-cols: 4;
	}

	.nglv2-aorg__units > li:nth-child(n + 5)::before {
		display: none;
	}
}

@media (max-width: 1023px) {
	.nglv2 .nglv2-aorg__groups--4 {
		--nglv2-aorg-cols: 3;
	}

	.nglv2-aorg__groups > li:nth-child(n + 4)::before {
		display: none;
	}
}

/* Phones: the chart without lines, rows stacked, cards two to a row; a diagram's sections stacked
 * (twelve small ones two to a row); one column below 360. */
@media (max-width: 767px) {
	.nglv2-aorg__chart {
		--nglv2-aorg-step: 16px;
	}

	.nglv2-aorg__chart > .nglv2-aorg__node::before,
	.nglv2-aorg__row::before,
	.nglv2-aorg__row::after,
	.nglv2-aorg__branch::before,
	.nglv2-aorg__branch::after,
	.nglv2-aorg__branch > li::before {
		display: none;
	}

	.nglv2 .nglv2-aorg__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		width: min(100%, 360px);
	}

	.nglv2-aorg__row > li:nth-child(2) {
		grid-column: auto;
	}

	.nglv2 :is(.nglv2-aorg__units--2, .nglv2-aorg__units--3, .nglv2-aorg__units--4, .nglv2-aorg__units--5, .nglv2-aorg__units--6, .nglv2-aorg__units--7) {
		--nglv2-aorg-cols: 2;
		--nglv2-aorg-gap: 12px;
		row-gap: 12px;
	}

	.nglv2 .nglv2-aorg__units .nglv2-aorg__card {
		min-height: 104px;
		padding: 28px 12px 16px;
	}

	.nglv2 .nglv2-aorg__groups--3 {
		--nglv2-aorg-cols: 1;
	}

	.nglv2 .nglv2-aorg__groups--4 {
		--nglv2-aorg-cols: 2;
		--nglv2-aorg-gap: 12px;
	}
}

@media (max-width: 359px) {
	.nglv2 :is(.nglv2-aorg__units, .nglv2-aorg__groups) {
		--nglv2-aorg-cols: 1;
	}
}

/* ----------------------------------------------------------------------------------------------
 * Accreditation (327:11960, redrawn 2026-10-06): eyebrow; 32; the title row with the "view all" link
 * at its other end; 32; the line with the quote bar; 32; the badges. Before that the page borrowed the
 * inspection page's two-column section (.nglv2-iaccr, inner.css), which it no longer shares.
 *
 * The badge row is 282 tall (32 above and below the drawn 218) and centres the badges 80 apart with a
 * hairline halfway between each pair, which puts four of them 80 in from the container's edges, as drawn
 * (the design spreads four badges and three zero-width lines across 1040, so every gap there is 40 and
 * two badges stand 80 apart). Centring rather than spreading keeps the row right when there are fewer
 * than four.
 * ------------------------------------------------------------------------------------------- */

.nglv2-aaccr__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.nglv2-aaccr__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* 573 at 1440 as drawn — a maximum, not a width: a translation may need a second line. */
.nglv2 .nglv2-aaccr__title {
	max-width: 573px;
}

.nglv2-aaccr__badges {
	--nglv2-aaccr-gap: clamp(40px, 5.5556vw, 80px); /* 80 at 1440 */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--nglv2-aaccr-gap);
	padding-block: 32px;
}

/* The badge art is square and the drawn box is 200 × 218: the image is centred in it (object-fit below)
   and the section keeps the height it was drawn at. */
.nglv2 .nglv2-aaccr__badge {
	position: relative;
	flex: 0 0 clamp(128px, 13.8889vw, 200px);
	height: clamp(140px, 15.1389vw, 218px);
}

/* The hairline the design draws in each gap (Line 266: 48 tall, #6dbe45 at 35%). */
.nglv2 .nglv2-aaccr__badge + .nglv2-aaccr__badge::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(var(--nglv2-aaccr-gap) / -2);
	top: 50%;
	width: 1px;
	height: 48px;
	background: rgba(109, 190, 69, 0.35);
	transform: translateY(-50%);
}

.nglv2-aaccr__badge a {
	display: block;
	height: 100%;
	border-radius: 12px;
	transition: transform 0.35s var(--nglv2-ease);
}

.nglv2-aaccr__badge a:hover {
	transform: translateY(-4px);
}

.nglv2-aaccr__badge a:focus-visible {
	outline: 2px solid var(--nglv2-green);
	outline-offset: -6px;
}

.nglv2 .nglv2-aaccr__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Below 768 the row wraps, and a hairline at the start of the second line would read as a stray mark. */
@media (max-width: 767px) {
	.nglv2 .nglv2-aaccr__badge + .nglv2-aaccr__badge::before {
		display: none;
	}
}

/* ----------------------------------------------------------------------------------------------
 * Our presence (327:11936): eyebrow; 32; title; 24; the line with the quote bar; 24; the picture
 * (1200 × 400).
 * ------------------------------------------------------------------------------------------- */

.nglv2 .nglv2-apres__title {
	margin-top: 32px;
}

.nglv2 .nglv2-apres__text {
	margin-top: 24px;
	font-size: clamp(17px, calc(8px + 1.111vw), 24px);
	line-height: 1.2334;
	color: var(--nglv2-grey);
}

.nglv2-apres__media {
	margin-top: 24px;
}

.nglv2 .nglv2-apres__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2171 / 724;
}

/* Its labels would be too small to read: the picture keeps 760px and scrolls sideways. */
@media (max-width: 767px) {
	.nglv2-apres__media {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
	}

	.nglv2 .nglv2-apres__img {
		width: 760px;
		max-width: none;
	}
}

/* ----------------------------------------------------------------------------------------------
 * Careers call (329:12375): eyebrow; 24; title (32/64) and, 16 under it, the paragraph; 24; the
 * button (240 × 56), centred.
 * ------------------------------------------------------------------------------------------- */

.nglv2-acareers__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.nglv2-acareers__inner > .nglv2-eyebrow,
.nglv2-acareers__copy {
	align-self: stretch;
}

.nglv2-acareers__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nglv2 .nglv2-acareers__title {
	font-weight: 700;
	font-size: clamp(24px, calc(8px + 1.6667vw), 32px);
	line-height: 2;
	color: var(--nglv2-ink);
}

.nglv2 .nglv2-acareers__text {
	font-size: clamp(17px, calc(12px + 0.5556vw), 20px);
	line-height: 1.5;
	color: var(--nglv2-grey);
}

/* Its first line is 3px wider in Chrome than the 1174 drawn: the paragraph may run 4px past the
   container's end so it breaks where drawn. */
@media (min-width: 1200px) {
	.nglv2 .nglv2-acareers__text {
		margin-inline-end: -4px;
	}
}

.nglv2 .nglv2-acareers__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 240px;
	min-height: 56px;
	padding: 15px 32px;
	border-radius: 20px;
	background: var(--nglv2-green);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.5;
	color: #f7fcfe;
	text-align: center;
	transition: background-color 0.25s;
}

.nglv2 .nglv2-acareers__btn:hover {
	background: var(--nglv2-green-dark);
	color: #f7fcfe;
}

.nglv2 .nglv2-acareers__btn:focus-visible {
	outline: 2px solid var(--nglv2-ink);
	outline-offset: 3px;
}

/* ----------------------------------------------------------------------------------------------
 * Narrower screens (not drawn): the story and the message stack, text first in the story, the
 * portrait first in the message.
 * ------------------------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.nglv2-astory__row,
	.nglv2-amsg__row {
		flex-direction: column;
		align-items: stretch;
	}

	.nglv2-astory__copy,
	.nglv2-amsg__copy {
		flex-basis: auto;
	}

	.nglv2-astory__media {
		flex-basis: auto;
		align-self: center;
		width: min(555px, 100%);
	}

	.nglv2 .nglv2-astory__img {
		height: auto;
		aspect-ratio: 504 / 544;
	}

	.nglv2-amsg__media {
		flex-basis: auto;
		align-self: center;
		width: min(416px, 100%);
	}

	.nglv2 .nglv2-amsg__img {
		height: auto;
		aspect-ratio: 416 / 625;
	}
}

@media (max-width: 639px) {
	.nglv2-astory__aims {
		flex-direction: column;
		padding-inline: 0;
	}

	.nglv2-astory__aim {
		flex-basis: auto;
	}

	.nglv2 .nglv2-astory__aim p {
		max-width: none;
	}

	.nglv2-astory__disc {
		width: 112px;
		height: 112px;
	}

	.nglv2-astory__ngl {
		font-size: 19px;
		line-height: 28px;
	}
}