/* =========================================================================
 * What We Do page.
 *
 * Loaded only on the page with the slug "what-we-do" (see
 * zouma_enqueue_assets). Section numbering matches page-what-we-do.php.
 *
 * Sections 05 and 06 are the homepage's own commitments and blog parts, so
 * they carry no styles here — they use main.css exactly as they do there.
 * ====================================================================== */

/* =========================================================================
 * 01 · Hero.
 *
 *   Section  #121212 · header floats over it, photograph on the right half
 *   Copy     224px in, matching the other inner heroes
 *   Bar      badge strip across the foot, hairline rules
 * ====================================================================== */

.zouma-wwdhero {
	/* Same proportional inset as the About and Careers heroes, so every inner
	 * page starts its copy on the same line. */
	--zouma-wwdhero-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. */
	min-height: 100vh;
	min-height: 100svh;
	margin-top: calc(-1 * var(--zouma-header-h));
	padding-top: calc(var(--zouma-header-h) + 56px);
	background: var(--zouma-dark);
	color: #fff;
	overflow: hidden;
}

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

/* Anchored to the centre line and running off the right edge, as the Figma
 * layer does. Faded into the panel on its left so the copy never has to sit
 * over the picture. */
.zouma-wwdhero__photo {
	position: absolute;
	top: 0;
	left: 46%;
	right: 0;
	height: 100%;
}

.zouma-wwdhero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}

.zouma-wwdhero__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 620px 320px at 34% 108%,
		rgba(14, 133, 182, 0.7) 0%,
		rgba(14, 133, 182, 0.24) 46%,
		rgba(14, 133, 182, 0) 100%
	);
}

.zouma-wwdhero__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(173, 219, 243, 0.12) 1.3px, transparent 1.5px);
	background-size: 30.5px 29.5px;
}

.zouma-wwdhero__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: 18px;
	padding-inline: var(--zouma-wwdhero-pad);
}

.zouma-wwdhero .zouma-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #fff;
	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-wwdhero .zouma-eyebrow .zouma-icon--spark {
	color: var(--zouma-cyan);
}

.zouma-wwdhero__title {
	/* Must stop short of the photograph, whose left edge is near the centre. */
	max-width: min(34rem, calc(46vw - var(--zouma-wwdhero-pad) - 2rem));
	margin: 0;
	color: #fff;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.75rem, 1rem + calc(2.6 * var(--zouma-vw)), 2.875rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.02em;
}

.zouma-wwdhero__text {
	max-width: min(34rem, calc(46vw - var(--zouma-wwdhero-pad) - 2rem));
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--zouma-font-body);
	font-size: 0.8125rem;
	line-height: 1.75;
}

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

.zouma-wwdhero__bar ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	/* Centred, not space-between.
	 *
	 * --zouma-vw stops growing at the 1440 design width, so the padding either
	 * side froze while the bar kept widening — space-between then pushed the
	 * six badges apart to fill it, reaching 131px gaps on a 1920 screen against
	 * the 35px they sit at on the Industries and About bars. Centring holds
	 * them at their own gap whatever the viewport does. */
	justify-content: center;
	gap: clamp(10px, calc(2.2 * var(--zouma-vw)), 36px);
	margin: 0;
	padding: 15px var(--zouma-wwdhero-pad);
	list-style: none;
}

.zouma-wwdhero__bar li {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.88);
	font-family: var(--zouma-font-body);
	font-size: 0.8125rem;
	white-space: nowrap;
}

/* The bullet between the figures on the hero bar.
 *
 * A plain dot, not the cluster mark. This was a background-image of
 * icon-spark.png, which no longer exists — the file was superseded, and a
 * background that 404s fails silently, so the marks stopped drawing and the
 * bar read as labels with nothing between them.
 *
 * 6px and round, matching .zouma-pilhero__dot and .zouma-indhero__dot, so
 * every hero bar carries the same separator. Cyan rather than blue: this bar
 * sits on a dark photograph, where the darker blue disappears.
 */
.zouma-wwdhero__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--zouma-cyan);
}

/* =========================================================================
 * 02 · The four pillars.
 *
 *   Section  #E1EDF9 · centred head, then one full-width card per pillar
 *   Card     #FFF · 12px radius · photograph one side, copy the other,
 *            alternating down the page
 * ====================================================================== */

.zouma-wwdpil {
	padding-block: clamp(3rem, calc(6 * var(--zouma-vw)), 5.5rem);
	background: var(--zouma-blue-pale);
}

.zouma-wwdpil__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-width: 640px;
	margin: 0 auto clamp(1.75rem, calc(3.5 * var(--zouma-vw)), 2.75rem);
	text-align: center;
}

.zouma-wwdpil .zouma-eyebrow,
.zouma-wwdpro .zouma-eyebrow,
.zouma-wwdcta .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-wwdpil .zouma-eyebrow .zouma-icon--spark,
.zouma-wwdpro .zouma-eyebrow .zouma-icon--spark,
.zouma-wwdcta .zouma-eyebrow .zouma-icon--spark {
	color: var(--zouma-cyan);
}

.zouma-wwdpil__title,
.zouma-wwdpro__title {
	margin: 0;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.5rem, 1rem + calc(1.5 * var(--zouma-vw)), 2.125rem);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.01em;
}

.zouma-wwdpil__lede,
.zouma-wwdpro__lede {
	max-width: 60ch;
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.8125rem;
	line-height: 1.7;
}

.zouma-wwdpil__list {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, calc(2 * var(--zouma-vw)), 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The white frame that holds the strip and whichever pillar is open.
 *
 * The background, padding and radius used to sit on each of the four cards.
 * They belong to the frame now the cards are panels inside one of them -
 * leaving them on the card would draw a second white box within the first. */
.zouma-wwdpil__box {
	padding: clamp(1rem, calc(1.6 * var(--zouma-vw)), 1.25rem);
	background: #fff;
	border-radius: 12px;
}

.zouma-wwdpil__card {
	display: grid;
	/* Copy left, photograph right, on every card. The wider track is the copy
	 * side; the media rule below places the picture in the second column. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
	gap: clamp(1.5rem, calc(3 * var(--zouma-vw)), 2.5rem);
	align-items: center;
	/* Plays on every switch. [hidden] is display:none, and coming back out of
	 * display:none restarts a CSS animation - so the panel fades up each time
	 * it is opened without the tablist script needing to know about it. */
	animation: zouma-wwdpil-in 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* [hidden] is only display:none in the UA sheet, and the display:grid above
 * beats it on specificity. */
.zouma-wwdpil__card[hidden] {
	display: none;
}

@keyframes zouma-wwdpil-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* The switch is the only thing moving here, so there is nothing to keep - it
 * simply arrives. */
@media (prefers-reduced-motion: reduce) {
	.zouma-wwdpil__card {
		animation-duration: 1ms;
	}
}

/* Alternating sides. Ordering the grid rather than reordering the markup keeps
 * the reading order — number, title, copy — the same for a screen reader on
 * every card.
 *
 * The tracks are swapped along with the order: without that the photograph
 * lands in the wider 1fr track on flipped cards only, and the four images come
 * out at two different widths. */
.zouma-wwdpil__media {
	order: 2;
}

/* The names of all four pillars, the open one marked. Its own row at the top
 * of the frame now rather than a band inside each card, so it no longer needs
 * to span the card's columns. */
.zouma-wwdpil__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(1rem, calc(2 * var(--zouma-vw)), 2.25rem);
	margin: 0 0 clamp(1rem, calc(1.8 * var(--zouma-vw)), 1.5rem);
	padding: 0 0 2px;
	border-bottom: 1px solid var(--zouma-blue-pale);
	list-style: none;
}

.zouma-wwdpil__tab {
	position: relative;
	margin: 0;
	padding: 0 0 10px;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.6875rem, 0.65rem + calc(0.2 * var(--zouma-vw)), 0.8125rem);
	font-weight: 500;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: left;
	background: none;
	border: 0;
	/* Buttons inherit a radius from the global button styling, which bows the
	 * 2px marker below into a curve under the name. */
	border-radius: 0;
	cursor: pointer;
	transition: color 160ms ease;
}

/* The theme fills any button with the dark brand blue on hover (the
 * button:hover rule in style.css). These are names rather than buttons in that
 * sense, so the fill is turned off - the rule above sets background:none but
 * loses to button:hover, which is more specific. */
.zouma-wwdpil__tab:hover,
.zouma-wwdpil__tab:focus,
.zouma-wwdpil__tab:focus-visible {
	color: var(--zouma-color-text);
	background: none;
}

.zouma-wwdpil__tab:focus-visible {
	outline: 2px solid var(--zouma-blue);
	outline-offset: 3px;
}

/* The marker sits on the list's own border, so the two read as one rule with
 * a lit segment rather than as two separate lines. */
.zouma-wwdpil__tab.is-active {
	color: var(--zouma-color-text);
}

.zouma-wwdpil__tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 2px;
	background: var(--zouma-blue);
}

.zouma-wwdpil__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--zouma-blue-pale);
	border-radius: 8px;
	overflow: hidden;
}

/* The pillar number, as a tile on the photograph.
 *
 * No border-radius of its own: the media box already clips to 8px with
 * overflow: hidden, so pinning the badge to 0,0 lets the parent round its outer
 * corner to match the frame while the inner corner stays square. One less value
 * to keep in step if that radius ever changes.
 *
 * A fixed box rather than padding around the digits — the heading face carries
 * no tabular figures, so padded tiles came out several pixels apart between 01
 * and 04 and the tile visibly resized as you moved between tabs. Sizing the box
 * and centring the number keeps all four identical.
 */
.zouma-wwdpil__badge {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: clamp(2.5rem, calc(3.9 * var(--zouma-vw)), 3.5rem);
	height: clamp(2.125rem, calc(3.2 * var(--zouma-vw)), 2.875rem);
	margin: 0;
	color: #fff;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.125rem, 0.83rem + calc(1.02 * var(--zouma-vw)), 1.625rem);
	font-weight: 700;
	line-height: 1;
	background: var(--zouma-teal);
}

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

.zouma-wwdpil__body {
	padding-inline: clamp(0.25rem, calc(1 * var(--zouma-vw)), 1rem);
}

.zouma-wwdpil__num {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.zouma-wwdpil__marker {
	width: 12px;
	height: 12px;
	border: 1px solid var(--zouma-cyan);
	border-radius: 50%;
}

.zouma-wwdpil__name {
	margin: 0 0 10px;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.125rem, 0.9rem + calc(0.7 * var(--zouma-vw)), 1.375rem);
	font-weight: 700;
	line-height: 1.3;
}

.zouma-wwdpil__copy {
	margin: 0 0 14px;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	line-height: 1.7;
}

.zouma-wwdpil__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.zouma-wwdpil__tags li {
	padding: 4px 9px;
	background: var(--zouma-blue-pale);
	border-radius: 3px;
	color: var(--zouma-blue);
	font-family: var(--zouma-font-body);
	font-size: 0.5625rem;
	font-weight: 500;
	line-height: 1.4;
}

.zouma-wwdpil__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	background: var(--zouma-dark);
	border-radius: 4px;
	color: #fff;
	font-family: var(--zouma-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--zouma-transition);
}

.zouma-wwdpil__link:hover {
	background: var(--zouma-blue);
	color: #fff;
}

/* =========================================================================
 * 03 · Who we really are.
 *
 *   Section  deep teal · copy and the three nodes left, the diagram right
 *   Diagram  drawn, not an image — a hub with one spoke per node, so it stays
 *            correct when a node is added or removed
 * ====================================================================== */

.zouma-wwdins {
	position: relative;
	/* Opts out of the theme's shared `main > section` screen-height floor: the
	 * band is a little over 700px of content and padding, and the floor was
	 * stretching it to a full screen with the difference left as empty teal. */
	min-height: 0;
	padding-block: clamp(3rem, calc(6 * var(--zouma-vw)), 5.5rem);
	background: var(--zouma-teal);
	overflow: hidden;
}

.zouma-wwdins__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(173, 219, 243, 0.08) 1.1px, transparent 1.3px);
	background-size: 26px 26px;
	pointer-events: none;
}

.zouma-wwdins__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(2rem, calc(5 * var(--zouma-vw)), 4rem);
	align-items: center;
}

.zouma-wwdins .zouma-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 1rem;
	color: #fff;
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.zouma-wwdins .zouma-eyebrow .zouma-icon--spark {
	color: var(--zouma-cyan);
}

.zouma-wwdins__title {
	margin: 0 0 0.875rem;
	color: #fff;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.5rem, 1rem + calc(1.5 * var(--zouma-vw)), 2.125rem);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -0.02em;
}

.zouma-wwdins__lede {
	max-width: 52ch;
	margin: 0 0 1.75rem;
	color: rgba(255, 255, 255, 0.68);
	font-family: var(--zouma-font-body);
	font-size: 0.8125rem;
	line-height: 1.7;
}

/* Stacked, not three across: the design lists the three as rows under the
 * copy, which lets each description run on one or two lines instead of being
 * squeezed into a third of the column. */
.zouma-wwdins__nodes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zouma-wwdins__nodes li {
	padding: 16px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--zouma-teal-deep);
	border-radius: 8px;
}

/* The middle card carries the emphasis, as the design has it.
 *
 * Positional rather than a flag on the row, because the rows are the
 * homepage's own instinct_nodes — shared, and with only title and text to
 * work with. Written as "the second of exactly three" so a fourth node
 * added in the admin quietly turns the emphasis off rather than
 * highlighting an arbitrary card.
 */
.zouma-wwdins__nodes li:nth-child(2):nth-last-child(2) {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(173, 219, 243, 0.28);
}

.zouma-wwdins__nodes h3 {
	margin: 0 0 6px;
	color: #fff;
	font-family: var(--zouma-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
}

.zouma-wwdins__nodes p {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--zouma-font-body);
	font-size: 0.6875rem;
	line-height: 1.6;
}

/* The orbit diagram. The geometry itself is computed in the template and
 * written into the SVG; everything here is only paint. */
/* Supplied artwork, when there is any. Sized to the column exactly as the
 * drawn SVG is, so swapping one for the other moves nothing around it. */
.zouma-wwdins__art {
	display: block;
	width: 100%;
	height: auto;
}

.zouma-wwdins__diagram {
	position: relative;
	/* 36rem, not 26: the column beside the copy is around 630px wide and the
	 * artwork was only taking 416 of it, which left the right half looking
	 * half-empty. Still under the 750px the supplied image is drawn at, so it
	 * is never scaled past its own resolution. */
	width: min(100%, 36rem);
	margin-inline: auto;
}

.zouma-wwdins__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* The two orbits. Dashed in viewBox units so the dash keeps its rhythm
 * whatever width the column ends up giving the diagram. */
.zouma-wwdins__orbits circle {
	fill: none;
	stroke: rgba(173, 219, 243, 0.3);
	stroke-width: 1.6;
	stroke-dasharray: 7 9;
}

.zouma-wwdins__links line {
	stroke: rgba(43, 174, 228, 0.8);
	stroke-width: 2;
}

.zouma-wwdins__hub,
.zouma-wwdins__sat {
	fill: var(--zouma-cyan);
}

/* Flat discs as drawn, with only enough bloom to sit on the dark panel
 * rather than look pasted onto it. */
.zouma-wwdins__hub {
	filter: drop-shadow(0 0 26px rgba(43, 174, 228, 0.45));
}

.zouma-wwdins__sat {
	filter: drop-shadow(0 0 12px rgba(43, 174, 228, 0.35));
}

/* Both label kinds are placed against the same frame the SVG draws into, so
 * they stay registered with the discs at every width. The hub's own label is
 * centred on the frame's middle, where the disc sits; its width is the hub
 * diameter as a share of that box, which keeps the text inside the circle. */
.zouma-wwdins__hub-label {
	position: absolute;
	top: calc(280 / 500 * 100%);
	left: 50%;
	width: calc(136 / 560 * 100%);
	margin: 0;
	color: #fff;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.5rem, calc(1.5 * var(--zouma-vw)), 0.6875rem);
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.45;
	text-align: center;
	text-transform: uppercase;
	transform: translate(-50%, -50%);
}

/* A satellite's name. Its left and top come from the template, which already
 * knows where the disc landed; the width is capped so a long name wraps rather
 * than running into its neighbour. */
.zouma-wwdins__name {
	position: absolute;
	width: max-content;
	max-width: calc(150 / 560 * 100%);
	color: #fff;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.5625rem, calc(1.35 * var(--zouma-vw)), 0.75rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.35;
	text-align: center;
	text-wrap: balance;
	transform: translate(-50%, -50%);
}

/* =========================================================================
 * 04 · Operate to Transform.
 *
 *   Section  #FFF · centred head, then the steps listed down the page
 *   Step     number, mark, then title and copy — the homepage shows the same
 *            four in a pinned scroller; here they are simply all on show
 * ====================================================================== */

.zouma-wwdpro {
	padding-block: clamp(3rem, calc(6 * var(--zouma-vw)), 5.5rem);
	background: #fff;
}

/* No max-width on the head itself. The heading is a single line of four words
 * and three arrows and needs about 950px at full size; capping the block is
 * what was breaking it in two. The lede carries its own measure instead, so it
 * stays narrow underneath. */
.zouma-wwdpro__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0 auto clamp(2rem, calc(4 * var(--zouma-vw)), 3.5rem);
	text-align: center;
}

/* Carries the arrows, so it runs wider and heavier than the pillars head it
 * otherwise shares a rule with. Held to one line: the sequence is the point,
 * and broken across two it stops reading as a progression. The size steps down
 * with the viewport to keep it there. */
.zouma-wwdpro__title {
	max-width: none;
	font-size: clamp(1.5rem, 0.9rem + calc(2 * var(--zouma-vw)), 2.75rem);
	line-height: 1.2;
	white-space: nowrap;
}

.zouma-wwdpro__lede {
	max-width: 56ch;
	font-size: 0.75rem;
}

.zouma-wwdpro__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Three columns held together as a centred group, not stretched across the
 * container: the design sets number, mark and copy at fixed distances from one
 * another and centres the lot, so the eye runs down three straight lines
 * however wide the page gets. Auto columns plus justify-content is what does
 * that — a 1fr body column would push the copy out to the right margin.
 *
 * No rules between steps. The connector under each mark is what carries the
 * eye from one to the next; a horizontal rule as well would cut the chain it
 * is drawing. */
.zouma-wwdpro__step {
	display: grid;
	grid-template-columns: auto auto minmax(0, 19.5rem);
	justify-content: center;
	gap: clamp(1.25rem, calc(9 * var(--zouma-vw)), 10rem);
	align-items: center;
	padding-block: clamp(1.5rem, calc(5 * var(--zouma-vw)), 5.5rem);
}

.zouma-wwdpro__num {
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-heading);
	font-size: 1.0625rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* The mark and the thread below it. The connector is a pseudo-element rather
 * than part of the artwork so it spans the gap between steps whatever that gap
 * works out at, and the last step simply does not draw one. */
.zouma-wwdpro__mark {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(4.5rem, calc(9 * var(--zouma-vw)), 9.5rem);
	color: var(--zouma-cyan);
}

.zouma-wwdpro__mark::after {
	content: "";
	position: absolute;
	top: calc(100% + 0.75rem);
	left: 50%;
	width: 1px;
	height: clamp(1.5rem, calc(4 * var(--zouma-vw)), 4rem);
	background: linear-gradient(180deg, rgba(43, 174, 228, 0.45), rgba(43, 174, 228, 0));
	transform: translateX(-50%);
}

.zouma-wwdpro__step:last-child .zouma-wwdpro__mark::after {
	content: none;
}

.zouma-wwdpro__mark img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

/* Sized against the mark rather than against the page: in the frame the step
 * title stands about as tall as half the diamond, which puts it well above the
 * body scale used elsewhere on this page. */
.zouma-wwdpro__name {
	margin: 0 0 12px;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.5rem, 1rem + calc(1.6 * var(--zouma-vw)), 2.75rem);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.01em;
}

.zouma-wwdpro__copy {
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.8125rem;
	line-height: 1.7;
}

/* =========================================================================
 * 07 · Closing call to action.
 *
 *   Section  #F4F8FC · copy left, the intro and button right
 * ====================================================================== */

.zouma-wwdcta {
	/* Opted out of the site-wide full-screen floor (see `main > section` in
	 * main.css). This band is an eyebrow, a heading, a line of copy and a
	 * button, so a viewport-height floor left most of a screen of empty pale
	 * blue under it. Its own padding sets the height instead.
	 *
	 * Both properties are needed: min-height undoes the floor, display undoes
	 * the centring grid that came with it and puts the section back to block
	 * flow — the same pair .zouma-careers and .zouma-legal-cta use. */
	min-height: auto;
	display: block;
	padding-block: clamp(2.5rem, calc(5 * var(--zouma-vw)), 4.5rem);
	background: #f4f8fc;
}

.zouma-wwdcta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, calc(4 * var(--zouma-vw)), 4rem);
	align-items: center;
}

.zouma-wwdcta__title {
	margin: 0.75rem 0 0;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.5rem, 1rem + calc(1.5 * var(--zouma-vw)), 2.125rem);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -0.02em;
}

.zouma-wwdcta__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

.zouma-wwdcta__lede {
	/* Set to read as two lines beside the heading; 46ch broke it over three.
	 * Two lines start at 66ch at the 1440 design width, so 70ch takes that
	 * with room for a font fallback to measure wider, while still landing
	 * short of the 591px the right column actually offers — the paragraph
	 * keeps a measure rather than just filling its half of the grid.
	 *
	 * Deliberately only a ceiling. Under roughly 1100px the column is already
	 * narrower than this, so the cap stops binding and the copy wraps freely
	 * the rest of the way down to phone width. Two lines is the desktop
	 * shape, not something to hold at every viewport. */
	max-width: 70ch;
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.8125rem;
	line-height: 1.7;
}

/* =========================================================================
 * Responsive.
 * ====================================================================== */

@media (max-width: 1024px) {
	/* Wraps rather than running off the side.
	 *
	 * Stated at 1024 rather than 860, where it used to sit: the badges need
	 * more room than that, so at 1024 the row was still nowrap and the last
	 * one ran past the screen, where .zouma-wwdhero clips it away. */
	.zouma-wwdhero__bar ul {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 10px 20px;
		padding-block: 14px;
	}

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

	.zouma-wwdins__diagram {
		order: -1;
		/* One column here, so the artwork has the full measure to itself rather
		 * than the half it shares on desktop — 20rem left it marooned in the
		 * middle of an empty row. */
		width: min(100%, 30rem);
	}
}

@media (max-width: 860px) {
	.zouma-wwdhero {
		min-height: 100vh;
		min-height: 100svh;
		padding-block: calc(var(--zouma-header-h) + 48px) 0;
	}

	/* The photograph goes behind the copy rather than beside it, so the text
	 * keeps its measure. */
	.zouma-wwdhero__photo {
		left: 0;
		opacity: 0.3;
	}

	.zouma-wwdhero__photo img {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.zouma-wwdhero__title,
	.zouma-wwdhero__text {
		max-width: none;
	}

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

	/* Stacked: the picture leads, as it does on every other narrow layout. */
	.zouma-wwdpil__media {
		order: 0;
	}

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

	.zouma-wwdpro__step {
		gap: clamp(1rem, calc(4 * var(--zouma-vw)), 2.5rem);
		padding-block: clamp(1.25rem, calc(4 * var(--zouma-vw)), 2.5rem);
	}
}

@media (max-width: 620px) {
	/* Below this the one-line heading would run past the screen edge, and an
	 * overflowing title is worse than a wrapped one. */
	.zouma-wwdpro__title {
		white-space: normal;
	}
}

@media (max-width: 560px) {
	/* Number and mark share a line, the copy sits under both — stacking all
	 * three would leave the number floating on a row of its own. */
	.zouma-wwdpro__step {
		grid-template-columns: auto minmax(0, 1fr);
		justify-content: start;
		gap: 1rem;
		row-gap: 14px;
		align-items: center;
	}

	.zouma-wwdpro__body {
		grid-column: 1 / -1;
	}

	.zouma-wwdpro__mark {
		width: 4.5rem;
	}

	/* The thread would run down beside the copy rather than between the marks,
	 * which reads as a stray line. */
	.zouma-wwdpro__mark::after {
		content: none;
	}
}