/**
 * About Us page.
 *
 * Loaded only on that page. Shared components (buttons, eyebrows, the blog
 * grid, the footer) come from main.css; this file covers the sections that
 * exist only here.
 */

/* Shared eyebrow treatment for this page's light sections. */
.zouma-story .zouma-eyebrow,
.zouma-ms .zouma-eyebrow,
.zouma-values .zouma-eyebrow,
.zouma-global .zouma-eyebrow,
.zouma-team .zouma-eyebrow,
.zouma-abcta .zouma-eyebrow,
.zouma-abhero .zouma-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.zouma-story .zouma-eyebrow .zouma-icon--spark,
.zouma-ms .zouma-eyebrow .zouma-icon--spark,
.zouma-values .zouma-eyebrow .zouma-icon--spark,
.zouma-global .zouma-eyebrow .zouma-icon--spark,
.zouma-team .zouma-eyebrow .zouma-icon--spark,
.zouma-abcta .zouma-eyebrow .zouma-icon--spark,
.zouma-abhero .zouma-eyebrow .zouma-icon--spark {
	color: var(--zouma-cyan);
}

/* Shared section heading. */
.zouma-story__title,
.zouma-ms__title,
.zouma-values__title,
.zouma-global__title,
.zouma-team__title,
.zouma-abcta__title {
	margin: 0;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.35rem, 1rem + calc(1.2 * var(--zouma-vw)), 1.875rem);
	font-weight: 700;
	line-height: 1.3;
}

/* 01 · Hero ---------------------------------------------------------------
 *   Section  #121212 · 932px tall
 *   Photo    1350 × 930, left edge on the centre line, running off the right
 *   Copy     576px column, 11vw in from the left edge, 24px stack
 *   Title    Albert Sans 700 · 57px · #FFFFFF
 *   Body     Poppins 500 · 16px · #FFFFFF
 *   Bar      53px strip across the foot, hairline rules
 *
 * No wash, feather or scrim over the photograph at this width — the design has
 * none, and its left edge is already dark enough to meet #121212 cleanly.
 */

.zouma-abhero {
	/* How far in the copy sits. Proportional rather than derived from a centred
	 * 1280 container: that container holds its width while the viewport grows,
	 * so on a wide screen it pushed the copy steadily further right — 320px in
	 * at 1920 against the design's 224px at 1728. Tying it to the viewport
	 * keeps the copy where the design puts it at any width, and a little
	 * further left besides. Capped so it stops travelling on ultrawide. */
	--zouma-abhero-pad: clamp(1.5rem, calc(11 * var(--zouma-vw)), 14rem);

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Full screen on any device — the same pair the homepage hero uses.
	 *
	 * min-height rather than height, so a short screen or large type pushes
	 * the section taller instead of clipping the copy. svh after vh because
	 * 100vh on a phone measures the viewport with the browser chrome
	 * retracted, which runs taller than what the visitor can actually see;
	 * vh stays first as the fallback.
	 *
	 * The section is already pulled up under the sticky header, so the
	 * header's height is counted inside this 100. */
	/* A full screen, unlike the bands below it — the hero is the one section
	 * on this page that is meant to fill the viewport.
	 *
	 * min-height rather than height, so a short screen or large type pushes it
	 * taller instead of clipping the copy. svh after vh because 100vh on a
	 * phone measures the viewport with the browser chrome retracted, which runs
	 * taller than what the visitor can actually see; vh stays first as the
	 * fallback for browsers without svh. */
	min-height: 100vh;
	min-height: 100svh;
	/* The header floats over this hero rather than sitting above it, so pull
	 * the section up under it and add the height back as padding. The photo
	 * then reaches the very top of the page, as in the design. */
	margin-top: calc(-1 * var(--zouma-header-h));
	padding-top: calc(var(--zouma-header-h) + 88px);
	background: var(--zouma-dark);
	color: #fff;
	overflow: hidden;
}

.zouma-abhero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.zouma-abhero__photo {
	position: absolute;
	top: 0;
	left: 50%;
	/* The box takes the photograph's own proportions and runs off the right of
	 * the frame, exactly as the Figma layer does. Sizing it to a fraction of the
	 * viewport instead gave a box of about 1.21:1 against an image of 1.45:1,
	 * and object-fit: cover then trimmed roughly 114px off each side — which is
	 * precisely where the man on the near side was.
	 *
	 * 1350 × 930 is both the layer size in the design and the file's native
	 * size, so this ratio is the image's own and nothing is scaled to fit. At
	 * the 1728 design width the visible portion works out at 64% of the
	 * photograph, matching the design frame exactly. */
	height: 100%;
	aspect-ratio: 1350 / 930;
}

.zouma-abhero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	/* Ratios match, so cover has nothing to trim. Anchoring left rather than
	 * centre means that if a browser ever rounds the box differently, the loss
	 * comes off the far edge and never off the near one. */
	object-fit: cover;
	object-position: left center;
}

/* "Rectangle 11": a radial wash centred on the bottom edge, #0E85B6 fading
 * out — 655px across and 393px tall in the design. */
.zouma-abhero__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 655px 393px at 50% 100%,
		rgba(14, 133, 182, 0.85) 0%,
		rgba(14, 133, 182, 0.35) 45%,
		rgba(14, 133, 182, 0) 100%
	);
}

.zouma-abhero__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(173, 219, 243, 0.16) 1.4px, transparent 1.6px);
	background-size: 30.5px 29.5px;
}

.zouma-abhero__inner {
	position: relative;
	/* flex-basis auto, not the 0 that plain `flex: 1` sets.
	 *
	 * With a 0 basis the hero's min-height counts as a definite height, the
	 * column is sized against that, and anything the copy needs beyond it
	 * spills out of the bottom - where the hero's overflow:hidden eats it.
	 * On a short screen that clipped the trust bar. Basing the flex on the
	 * content lets the hero grow past a screen instead of cutting. */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 24px;
	/* Overrides .zouma-shell: this column is measured from the left edge, not
	 * centred in a fixed container. */
	max-width: none;
	padding-inline: var(--zouma-abhero-pad);
}

.zouma-abhero .zouma-eyebrow {
	color: #fff;
	margin-bottom: -4px;
}

.zouma-abhero__title {
	/* 576px is the design width, but it must also stop short of the photograph,
	 * whose left edge is on the centre line. Below about 1560px the gap is the
	 * binding constraint, so the column narrows rather than running under the
	 * picture. */
	max-width: min(576px, calc(50vw - var(--zouma-abhero-pad) - 2rem));
	margin: 0;
	color: #fff;
	font-family: var(--zouma-font-heading);
	font-size: var(--zouma-size-hero);
	font-weight: 700;
	line-height: 1.053;
	letter-spacing: -0.02em;
}

.zouma-abhero__text {
	max-width: min(576px, calc(50vw - var(--zouma-abhero-pad) - 2rem));
	margin: 0;
	color: #fff;
	font-family: var(--zouma-font-body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.8125;
}

.zouma-abhero__bar {
	position: relative;
	margin-top: auto;
	background: var(--zouma-dark);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Figma fits all five badges across 1280px with a 39px gap — exactly, with no
 * slack. The gap shrinks rather than wrapping so the row stays on one line
 * once the shell's padding is taken out. */
.zouma-abhero__bar ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, calc(2.4 * var(--zouma-vw)), 39px);
	max-width: 1280px;
	margin: 0 auto;
	padding: 14px clamp(0.75rem, calc(2 * var(--zouma-vw)), 2.5rem);
	list-style: none;
}

.zouma-abhero__bar li {
	flex: 0 0 auto;
}

.zouma-abhero__bar li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #fff;
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
}

/* A plain bullet on this bar, matching the homepage info bar. At 14px the
 * mark competed with the four short claims it introduces; a dot separates them
 * without asking to be looked at. */
.zouma-abhero__dot {
	width: 6px;
	height: 6px;
	flex: 0 0 auto;
	background: var(--zouma-cyan-soft);
	border-radius: 50%;
}

/* 02 · How It Started ---------------------------------------------------- */

.zouma-story {
	display: grid;
	place-items: center;
	/* Raised to a full screen with the rest of the sections. The clamp this
	 * replaces was a proportional floor tuned to the design's height at 1728;
	 * a screen is the floor now, and the clamp's job is done. */
	/* Height comes from the content, not the viewport. */
	min-height: auto;
	padding-block: clamp(3rem, calc(8 * var(--zouma-vw)), 6rem);
	/* Near-white with the faint dot field, as the design has it — not flat
	 * white. Same pitch as the other bands that carry it. */
	background-color: #fafbfc;
	background-image: radial-gradient(circle, rgba(11, 74, 108, 0.06) 1px, transparent 1px);
	background-size: 26px 26px;
}

.zouma-story__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 970px;
	text-align: center;
}

.zouma-story__text {
	/* Narrower than it was. The design breaks this paragraph over five lines,
	 * and at 900px the same copy ran to three — the measure is what gives the
	 * block its shape under the heading. */
	max-width: 580px;
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-heading);
	font-size: clamp(0.9375rem, 0.85rem + calc(0.5 * var(--zouma-vw)), 1.125rem);
	font-weight: 500;
	line-height: 1.55;
}

/* The opening phrase. It was already darker but at the same 600 as the body
 * around it, so it read as a colour shift rather than as emphasis; the design
 * sets it a clear step heavier. */
.zouma-story__text strong {
	color: var(--zouma-color-text);
	font-weight: 700;
}

/* 03 · Key Milestones ---------------------------------------------------- */

.zouma-ms {
	padding-top: 96px;
	background: var(--zouma-blue-pale);
}

.zouma-ms__head,
.zouma-values__head,
.zouma-global__head,
.zouma-team__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-bottom: 48px;
	text-align: center;
}

/* One column per milestone, as in the design. auto-fit was packing however many
 * 15rem tracks would fit, which broke six milestones into 4 + 2 and left the
 * timeline below with nothing to line up against. The count comes from the
 * markup so it follows whatever is configured. */
.zouma-ms__list,
.zouma-ms__timeline {
	display: grid;
	grid-template-columns: repeat(var(--zouma-ms-cols, 5), minmax(0, 1fr));
	column-gap: 24px;
	max-width: 1280px;
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

.zouma-ms__list {
	row-gap: 32px;
	text-align: center;
}

.zouma-ms__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.zouma-ms__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 8px;
	object-fit: contain;
	color: var(--zouma-cyan);
}

.zouma-ms__year {
	margin: 0;
	color: var(--zouma-blue);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.zouma-ms__name {
	margin: 0;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

.zouma-ms__text {
	max-width: 26ch;
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
}

/* Timeline ---------------------------------------------------------------
 *
 * A rule beneath the columns with a stop under each milestone. It shares the
 * list's grid, so the stops sit on the column centres whatever the count.
 */

.zouma-ms__timeline {
	position: relative;
	margin-top: 40px;
}

/* Fades out at both ends rather than stopping dead against the background. */
.zouma-ms__timeline::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0,
		var(--zouma-sky) 10%,
		var(--zouma-sky) 90%,
		transparent 100%
	);
}

.zouma-ms__timeline li {
	position: relative;
	display: grid;
	place-items: center;
	height: 12px;
}

.zouma-ms__timeline span {
	width: 7px;
	height: 7px;
	background: var(--zouma-blue);
	border-radius: 50%;
}

/* One line per milestone stops being readable long before the columns get
 * narrow enough to break, so step down rather than squeezing. Once the row
 * wraps there is no single line for the timeline to sit on, and it goes. */
@media (max-width: 1080px) {
	.zouma-ms__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.zouma-ms__timeline {
		display: none;
	}
}

@media (max-width: 720px) {
	.zouma-ms__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.zouma-ms__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Photo strip ------------------------------------------------------------- */

.zouma-ms__gallery {
	display: grid;
	grid-auto-flow: column;
	/* Wider than the container on purpose: the last frame runs off the right
	 * edge, which is both what the design shows and the hint that the row
	 * scrolls. */
	grid-auto-columns: minmax(clamp(200px, calc(23 * var(--zouma-vw)), 310px), 1fr);
	gap: 12px;
	margin: 64px 0 0;
	padding: 0 clamp(1rem, calc(3 * var(--zouma-vw)), 2.5rem) 72px clamp(2rem, calc(9 * var(--zouma-vw)), 8.5rem);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.zouma-ms__gallery::-webkit-scrollbar {
	display: none;
}

.zouma-ms__gallery li {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--zouma-teal);
	border-radius: 12px;
}

.zouma-ms__gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 04 · Core Values -------------------------------------------------------- */

/* Opted out of the site-wide full-screen floor (see `main > section` in
 * main.css). These three carry no height of their own, so without this they
 * were each held at a full screen regardless of how little was in them.
 *
 * Both properties are needed, as .zouma-careers and .zouma-legal-cta already
 * note: min-height undoes the floor, and display undoes the centring grid that
 * came with it. The grid matters even at content height — grid items do not
 * collapse their margins the way block children do, so leaving it changes the
 * spacing inside the band.
 *
 * .zouma-abhero and .zouma-story are not listed: they set their own display,
 * and their own floors are lifted where they are declared. */
.zouma-values,
.zouma-global,
.zouma-abcta {
	min-height: auto;
	display: block;
}

.zouma-values {
	padding-block: 96px;
	/* Pale blue, as the design has it — this band is not white. */
	background: var(--zouma-blue-pale);
}

/* This band sets its own heading size rather than taking the site-wide h2
 * token. main.css sizes every section h2 from --zouma-size-h2 (48px) through a
 * `h2.zouma-values__title` selector, which outranks a lone class — so the
 * override is written against the section as well, and the design's 32px
 * stands. The measure is what produces the design's two-line break: wide
 * enough for "...including all of our", too narrow for the next word. */
.zouma-values h2.zouma-values__title {
	max-width: 870px;
	/* The shared heading clamp with its ceiling raised from 1.875rem to the
	 * design's 2rem, rather than a flat 32px: that keeps the heading scaling
	 * down on narrow screens instead of holding 32px on a phone. */
	font-size: clamp(1.35rem, 1rem + calc(1.2 * var(--zouma-vw)), 2rem);
	line-height: 1.22;
	/* The theme balances every heading (h1..h6 { text-wrap: balance } in
	 * main.css), which splits this one into two even lines. The design fills
	 * the first line instead — "...including all of our" — and drops only
	 * "AI intelligent systems." to the second, so balancing is turned off and
	 * the measure above decides the break. */
	text-wrap: initial;
}

.zouma-values__lede {
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* The grid.
 *
 * The rules between cells are the 1px gaps, not borders on the cells: the
 * list paints the line colour and each cell paints the band colour back over
 * it. The lines then stay continuous at any column count — including a final
 * row that does not fill its track — with no nth-child bookkeeping to keep in
 * step every time a breakpoint changes the column count.
 *
 * Square corners: the design has no radius here, and a radius would clip the
 * outer rule away from the corners of the first and last cells. */
.zouma-values__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	background: var(--zouma-color-border);
	border: 1px solid var(--zouma-color-border);
}

/* The 1280 above is the design figure, but the shell this sits in already
 * spends 40px a side on padding, so the grid was only ever reaching 1240. Once
 * there is room for the full width, it is pulled back out over that padding.
 * Gated on viewport rather than applied always: below this the shell is
 * narrower than 1280 anyway, and widening would push the grid to the screen
 * edges. */
@media (min-width: 1360px) {
	.zouma-values__grid {
		width: calc(100% + 2 * clamp(1rem, calc(3 * var(--zouma-vw)), 2.5rem));
	}
}

.zouma-value {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Top-aligned. The design lines every icon up on one row and every title on
	 * the next; centring breaks that the moment one card's copy runs shorter
	 * than its neighbours. */
	justify-content: flex-start;
	gap: 8px;
	/* 12px, not 24: the design fits "your goals. Dedicated teams, AI" on one
	 * line, which needs a ~230px measure inside a 255px cell. At 24px the same
	 * copy runs to five lines instead of four. */
	padding: 48px 12px 44px;
	/* Paints over the grid's line colour, leaving only the 1px gaps showing. */
	background: var(--zouma-blue-pale);
	text-align: center;
}

.zouma-value__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 8px;
	object-fit: contain;
	color: var(--zouma-cyan);
}

.zouma-value h3 {
	margin: 0;
	color: var(--zouma-blue);
	font-family: var(--zouma-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
}

.zouma-value p {
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	/* Same 14px/1.5 the lede above the grid uses — the design sets both from one
	 * body token, and 14 x 1.5 is the 21px line spacing it shows. */
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
}

/* 05 · Global Presence ----------------------------------------------------
 *   Section   #E1EDF9, 120px above the container
 *   Container 1280 · left column 450 · map 888x500 on the right, overlapping
 *   Card      450 wide · #06394E at 60% · 1px #06394E · r8 · 24 pad · 16 gap
 *   Flag      32 circle, 1px #C7E4F6
 *   Role      Poppins 10/600 · 0.8 tracking · upper · #ADDBF3
 *   City      Albert Sans 18/700 · #FFFFFF
 *   Text      Poppins 12/500 · 15.75 leading
 *   Index     Poppins 12/500 · #5FC0EA, top right
 *   Pin       #042634 at 60% · 1px #06394E · r4 · 8 pad · 8 gap
 *   Dot       14 circle · #042634 · 1px #FFFFFF
 *   Link      2px #5FC0EA, curved through the pins
 *
 * Pin and dot positions come from the fields as percentages of the map box,
 * so they hold at any width and can be moved from the admin.
 */

.zouma-global {
	position: relative;
	padding-block: 120px;
	/* Near-white with a whisper of a dot field, as the design has it — this
	 * band is not the pale blue the values section above it uses. */
	background-color: #fafbfc;
	background-image: radial-gradient(circle, rgba(11, 74, 108, 0.06) 1px, transparent 1px);
	background-size: 26px 26px;
	overflow: hidden;
}

/* The section's own dot field, behind everything. */
.zouma-global::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(14, 133, 182, 0.16) 1.2px, transparent 1.4px);
	background-size: 26px 26px;
	pointer-events: none;
}

.zouma-global__head,
.zouma-team__head {
	position: relative;
	align-items: flex-start;
	text-align: left;
}

/* The map runs under the left column in the design, so this is a positioning
 * context rather than a two-column grid. */
.zouma-global__inner {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	min-height: 577px;
}

.zouma-global__list {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 450px;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zouma-place {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
	/* Translucent, so the map's dots read faintly through the cards as they do
	 * in the design. */
	background: rgba(6, 57, 78, 0.6);
	border: 1px solid var(--zouma-teal-deep);
	border-radius: 8px;
	color: #fff;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.zouma-place__flag {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	object-fit: cover;
	border: 1px solid var(--zouma-sky-soft);
	border-radius: 50%;
}

.zouma-place__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.zouma-place__index {
	flex: 0 0 auto;
	color: var(--zouma-cyan-soft);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4167;
}

.zouma-place__role {
	margin: 0;
	color: var(--zouma-sky);
	font-family: var(--zouma-font-body);
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.zouma-place__city {
	margin: 0;
	color: #fff;
	font-family: var(--zouma-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5;
}

.zouma-place__text {
	margin: 0;
	color: rgba(199, 228, 246, 0.72);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3125;
}

/* Map ---------------------------------------------------------------------- */

.zouma-global__map {
	position: absolute;
	top: 77px;
	right: 0;
	z-index: 1;
	width: 69.375%; /* 888 / 1280 */
	aspect-ratio: 888 / 500;
}

.zouma-global__world {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Stretched to the map box, so the path can be authored in plain percentages.
 * The stroke is exempted from that stretch, or it would come out elliptical. */
.zouma-global__links {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.zouma-global__links path {
	stroke: var(--zouma-cyan-soft);
	stroke-width: 2;
	stroke-linecap: round;
}

.zouma-global__dot {
	position: absolute;
	top: var(--y);
	left: var(--x);
	width: 14px;
	height: 14px;
	background: var(--zouma-teal);
	border: 1px solid #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.zouma-global__pin {
	position: absolute;
	top: var(--y);
	left: var(--x);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	background: rgba(4, 38, 52, 0.6);
	border: 1px solid var(--zouma-teal-deep);
	border-radius: 4px;
	white-space: nowrap;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

/* Rounded rectangles on the map, not circles — the flag reads as a flag at this
 * size, where a circular crop loses the Union Jack's corners entirely. The
 * cards in the left column keep the circular treatment the design gives them,
 * which works because both are cropped from the same rectangular source. */
.zouma-global__pin img {
	width: 32px;
	height: 24px;
	object-fit: cover;
	border-radius: 4px;
}

.zouma-global__pin-text {
	display: flex;
	flex-direction: column;
}

.zouma-global__pin-country {
	color: #fff;
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
}

.zouma-global__pin-city {
	color: var(--zouma-sky);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4167;
}

/* Below the design width the map cannot sit behind the cards and still leave
 * them readable, so it moves above them and goes full width. */
@media (max-width: 1080px) {
	.zouma-global__inner {
		display: flex;
		flex-direction: column-reverse;
		gap: 40px;
		min-height: 0;
	}

	.zouma-global__map {
		position: relative;
		top: 0;
		width: 100%;
	}

	.zouma-global__list {
		width: 100%;
	}
}

@media (max-width: 620px) {
	.zouma-global {
		padding-block: 64px;
	}

	.zouma-place {
		padding: 16px;
		gap: 12px;
	}

	/* At this size the labels overlap each other more than they inform. */
	.zouma-global__pin {
		display: none;
	}
}

/* 06 · Leadership Team ----------------------------------------------------
 *   Grid    3 columns · 16px between · 32px between rows
 *   Photo   416 x 375 · 8px radius (the export size, so no resampling)
 *   Name    Poppins 14/600 · #121212
 *   Role    Poppins 10/500 · muted
 *   Chips   18px · 4px radius · hairline, tinted
 *   Group   hairline rule above the title, not below it
 */

.zouma-team {
	padding-block: 96px;
	background: #fff;
}

.zouma-team__lede {
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* The rule sits above each group, so it reads as a divider between groups
 * rather than an underline on the heading. */
.zouma-team__group {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--zouma-color-border);
}

.zouma-team__group-title {
	margin: 0 0 24px;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Fixed three across, as the design lays it out. A group of two therefore
 * leaves the third column empty rather than stretching to fill it. */
.zouma-team__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 16px;
	row-gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* No card: the photograph carries the rounding and the text sits under it on
 * the page, with nothing drawn around either. */
.zouma-person {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.zouma-person__media {
	/* The export is 416 x 375, so at the design width nothing is resampled. */
	aspect-ratio: 416 / 375;
	overflow: hidden;
	background: var(--zouma-blue-pale);
	border-radius: 8px;
}

/* A person with no photograph — the advisory board — keeps its name and chips
 * but drops the empty frame rather than showing a blank panel. */
.zouma-person__media:empty {
	display: none;
}

.zouma-person__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zouma-person__body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.zouma-person__name {
	margin: 0;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
}

.zouma-person__role {
	margin: 2px 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.625rem;
	font-weight: 500;
	line-height: 1.4;
}

.zouma-person__links {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 4px;
}

.zouma-person__chip {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	color: var(--zouma-blue);
	background: var(--zouma-blue-tint);
	border: 1px solid var(--zouma-color-border);
	border-radius: 4px;
	text-decoration: none;
	transition: background var(--zouma-transition), color var(--zouma-transition);
}

a.zouma-person__chip:hover,
a.zouma-person__chip:focus-visible {
	color: #fff;
	background: var(--zouma-blue);
	border-color: var(--zouma-blue);
}

@media (max-width: 900px) {
	.zouma-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.zouma-team {
		padding-block: 64px;
	}

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

/* 08 · Closing CTA -------------------------------------------------------- */

.zouma-abcta {
	padding-block: 96px;
	background: #fff;
}

.zouma-abcta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 64px;
	max-width: calc(1280px + 2 * clamp(1rem, calc(3 * var(--zouma-vw)), 2.5rem));
}

.zouma-abcta__text {
	max-width: 640px;
	margin: 8px 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
}

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

@media (max-width: 1024px) {
	.zouma-abhero {
		min-height: 100vh;
		min-height: 100svh;
		padding-top: clamp(4rem, calc(12 * var(--zouma-vw)), 8rem);
	}

	/* Too narrow for a side-by-side split: the photo becomes a full-width
	 * backdrop with the copy over it. */
	.zouma-abhero__photo {
		left: 0;
		width: 100%;
		aspect-ratio: auto;
	}

	.zouma-abhero__photo img {
		object-position: center;
	}

	/* The only scrim on this page, and only here — with the copy sitting on top
	 * of the photograph rather than beside it, there is no other way to keep it
	 * readable. The desktop layout has none. */
	.zouma-abhero__photo::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(18, 18, 18, 0.86) 0%, rgba(18, 18, 18, 0.78) 55%, var(--zouma-dark) 100%);
	}

	/* Full width again, so the copy no longer has to stay clear of the photo. */
	.zouma-abhero {
		--zouma-abhero-pad: clamp(1rem, calc(5 * var(--zouma-vw)), 2.5rem);
	}

	.zouma-abhero__title,
	.zouma-abhero__text {
		max-width: 576px;
	}

	/* Below the desktop width five badges genuinely cannot share a line;
	 * scroll the row rather than shrinking the type. */
	.zouma-abhero__bar ul {
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.zouma-abhero__bar ul::-webkit-scrollbar {
		display: none;
	}

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

	.zouma-values__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.zouma-values__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.zouma-values__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.zouma-value {
		padding: 36px 20px 32px;
	}
}