/**
 * Pillar pages.
 *
 * Enqueued only on the zouma_pillar post type.
 *
 * Sizes come from the 1728-wide Figma frame and are used as CSS pixels at the
 * top of the clamp, as on the partners and industries pages — the shell is
 * widened to 1360 so its 1280 content column matches the design exactly.
 */

.zouma-pilhero .zouma-shell,
.zouma-piltow .zouma-shell,
.zouma-pilpkg .zouma-shell,
.zouma-pilend .zouma-shell {
	max-width: 1360px;
}

/* 01 · Hero -------------------------------------------------------------- */

.zouma-pilhero {
	position: relative;
	display: flex;
	flex-direction: column;
	/* A full screen, like every other hero on the site. min-height so a short
	 * screen grows the section rather than clipping the copy, and svh after vh
	 * because 100vh on a phone measures the viewport with the browser chrome
	 * retracted. The section is pulled up under the sticky header below, so
	 * the header is already counted inside this 100. */
	min-height: 100vh;
	min-height: 100svh;
	/* Pulled up under the sticky header and padded back down, the same pair the
	 * homepage hero uses. Without the negative margin the header floats over
	 * 76px of white page instead of over the hero, and the white nav washes out. */
	margin-top: calc(-1 * var(--zouma-header-h));
	padding-top: var(--zouma-header-h);
	background: var(--zouma-dark);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.zouma-pilhero__dots {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
	background-size: 26px 26px;
}

/* The teal bloom sitting on the bottom edge, under the copy. */
.zouma-pilhero__glow {
	position: absolute;
	left: 50%;
	bottom: -260px;
	z-index: -1;
	width: min(880px, 62%);
	height: 440px;
	transform: translateX(-50%);
	background: radial-gradient(
		ellipse at center,
		rgba(14, 133, 182, 0.32) 0%,
		rgba(4, 38, 52, 0.18) 45%,
		transparent 72%
	);
	filter: blur(28px);
}

.zouma-pilhero__inner {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding-block: clamp(2.5rem, calc(3 * var(--zouma-vw)), 2.75rem);
}

.zouma-pilhero__title {
	max-width: 620px;
	margin: 18px 0 0;
	color: #fff;
	font-family: var(--zouma-font-heading);
	/* The frame measures 57 on a 73px line — the theme's own hero size. */
	font-size: var(--zouma-size-hero);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.01em;
}

.zouma-pilhero__text {
	max-width: 845px;
	margin: 26px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.74rem + calc(0.28 * var(--zouma-vw)), 0.9375rem);
	line-height: 1.55;
}

.zouma-pilhero__whotitle {
	margin: 30px 0 0;
	color: #fff;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1rem, 0.9rem + calc(0.39 * var(--zouma-vw)), 1.25rem);
	font-weight: 700;
}

.zouma-pilhero__who {
	max-width: 835px;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.74rem + calc(0.28 * var(--zouma-vw)), 0.9375rem);
	line-height: 1.55;
}

/* Sits to the right, level with the last line of the copy. */
.zouma-pilhero__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: -14px;
}

.zouma-pilhero__actions .zouma-btn {
	padding: 11px 18px;
}

.zouma-pilhero__bar {
	position: relative;
	background: rgba(255, 255, 255, 0.09);
}

.zouma-pilhero__bar ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px clamp(1rem, calc(2.4 * var(--zouma-vw)), 2.25rem);
	min-height: 47px;
	margin: 0;
	padding: 9px clamp(1rem, calc(3 * var(--zouma-vw)), 2.5rem);
	list-style: none;
}

.zouma-pilhero__bar li {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
}

/* A plain dot, as the design has it. This was the spark mark, which read as
 * a small starburst at 13px rather than the round bullet the reference
 * shows. Solid brand blue, and sized down to suit a 14px label. */
.zouma-pilhero__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--zouma-blue);
	flex: none;
}

/* 02 · Who it's for ------------------------------------------------------- */

/* The claim and its proof, side by side on white. Without a figure the copy
 * takes the whole width, which is what the pillars with no number to show get
 * — hence the modifier rather than a fixed two-column grid. */
.zouma-pilwho {
	/* Opts out of the theme's shared `main > section` screen-height floor: this is
	 * a short band, and the floor would pad it out to a full screen of empty. */
	min-height: 0;
	padding-block: clamp(2.5rem, calc(5 * var(--zouma-vw)), 4.5rem);
	background: #fff;
}

.zouma-pilwho__inner {
	display: grid;
	gap: clamp(1.5rem, calc(4 * var(--zouma-vw)), 4rem);
	align-items: center;
}

.zouma-pilwho--split .zouma-pilwho__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
}

.zouma-pilwho__title {
	margin: 0 0 0.75rem;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.125rem, 0.95rem + calc(0.6 * var(--zouma-vw)), 1.5rem);
	font-weight: 700;
	line-height: 1.25;
}

.zouma-pilwho__text {
	max-width: 52ch;
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.76rem + calc(0.2 * var(--zouma-vw)), 0.9375rem);
	line-height: 1.7;
}

/* The figure. The "x" is a span so it can drop to the size the design draws it
 * at without becoming a second element to keep in sync. */
/* The figures sit on top of one another so the block never changes height as
 * they swap — a taller "750+ Professionals Deployed" following a short "24x7"
 * would otherwise shunt everything under it down and back on every tick.
 *
 * Grid rather than absolute positioning: every slide occupies the same single
 * cell, so the box is naturally as tall as the tallest figure and nothing has
 * to be measured.
 */
.zouma-pilwho__figure {
	display: grid;
}

.zouma-pilwho__slide {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity 420ms ease;
	pointer-events: none;
}

.zouma-pilwho__slide.is-current {
	opacity: 1;
	pointer-events: auto;
}

/* One figure: no cycling, so no reason to animate it in. */
.zouma-pilwho__figure:not([data-zouma-statcycle]) .zouma-pilwho__slide {
	opacity: 1;
	transition: none;
}

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

.zouma-pilwho__stat {
	margin: 0;
	color: var(--zouma-blue);
	font-family: var(--zouma-font-heading);
	font-size: clamp(2.75rem, 1.6rem + calc(4 * var(--zouma-vw)), 5rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}

.zouma-pilwho__stat span {
	font-size: 0.55em;
	font-weight: 700;
}

.zouma-pilwho__statlabel {
	margin: 0.5rem 0 0;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: clamp(0.9375rem, 0.85rem + calc(0.35 * var(--zouma-vw)), 1.125rem);
	font-weight: 700;
	line-height: 1.3;
}

.zouma-pilwho__statnote {
	margin: 0.25rem 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.75rem, 0.71rem + calc(0.18 * var(--zouma-vw)), 0.875rem);
	line-height: 1.55;
}

@media (max-width: 860px) {
	/* One column: the figure sits under the copy it belongs to rather than
	 * being squeezed beside it. */
	.zouma-pilwho--split .zouma-pilwho__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The hairline closing this band lives on the band that follows it, not as a
 * `border-bottom` here. Every band below is gated on its own content, so a
 * bottom edge would be left hanging under the last thing on the page as soon as
 * an editor empties the next heading. The sibling selector can only match when
 * there is something to separate. Limited to the two white bands: on the dark
 * savings band or the pale packages band this blue would read as an artefact. */
.zouma-pilwho + .zouma-pilbld,
.zouma-pilwho + .zouma-piltow {
	border-top: 1px solid var(--zouma-blue-pale);
}

/* 03 · Service towers ---------------------------------------------------- */

.zouma-piltow {
	padding-block: clamp(3rem, calc(7 * var(--zouma-vw)), 6.4375rem);
	background: #fff;
}

.zouma-piltow__head {
	text-align: center;
}

.zouma-piltow__head .zouma-eyebrow {
	justify-content: center;
}

.zouma-piltow__title {
	margin: 16px 0 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.75rem, 1.15rem + calc(2.4 * var(--zouma-vw)), 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* The rows run in a 964 column of their own inside the 1280 shell, which is
 * how the design centres them under the wider heading. */
.zouma-piltow__list {
	max-width: 964px;
	margin: clamp(2.5rem, calc(6.6 * var(--zouma-vw)), 6rem) auto 0;
	padding: 0;
	list-style: none;
}

.zouma-piltow__row {
	display: grid;
	/* 340 + 20 + 100 + 20 + 484 = 964 */
	grid-template-columns: minmax(0, 340fr) minmax(0, 100fr) minmax(0, 484fr);
	column-gap: clamp(0.75rem, calc(1.4 * var(--zouma-vw)), 1.25rem);
	align-items: center;
	margin-bottom: 40px;
}

.zouma-piltow__row:last-child {
	margin-bottom: 0;
}

/* Alternating sides. The order is changed rather than the markup so the
 * reading order — number, title, copy — stays the same for a screen reader on
 * every row. */
.zouma-piltow__row.is-flipped {
	grid-template-columns: minmax(0, 100fr) minmax(0, 484fr) minmax(0, 340fr);
}

.zouma-piltow__row.is-flipped .zouma-piltow__num {
	order: 1;
}

.zouma-piltow__row.is-flipped .zouma-piltow__body {
	order: 2;
}

.zouma-piltow__row.is-flipped .zouma-piltow__media {
	order: 3;
}

.zouma-piltow__media {
	aspect-ratio: 340 / 270;
	background: var(--zouma-blue-pale);
	overflow: hidden;
}

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

.zouma-piltow__num {
	margin: 0;
	color: #5b6770;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.375rem, 1rem + calc(1.05 * var(--zouma-vw)), 1.875rem);
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.zouma-piltow__row.is-flipped .zouma-piltow__num {
	text-align: left;
}

.zouma-piltow__name {
	margin: 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.125rem, 0.95rem + calc(0.75 * var(--zouma-vw)), 1.625rem);
	font-weight: 700;
	line-height: 1.28;
}

.zouma-piltow__copy {
	margin: 12px 0 0;
	color: #5b6770;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.74rem + calc(0.28 * var(--zouma-vw)), 0.9375rem);
	line-height: 1.5;
}

/* 03 · Specialist call to action ----------------------------------------- */

.zouma-pilmid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px clamp(1.5rem, calc(3 * var(--zouma-vw)), 2.5rem);
	max-width: 868px;
	margin: clamp(2.5rem, calc(6 * var(--zouma-vw)), 5.5rem) auto 0;
	padding: 22px 24px;
	background: var(--zouma-blue-pale);
	border-radius: 10px;
}

.zouma-pilmid__title {
	margin: 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1rem, 0.9rem + calc(0.39 * var(--zouma-vw)), 1.25rem);
	font-weight: 700;
	line-height: 1.3;
}

.zouma-pilmid__text {
	margin: 8px 0 0;
	color: #5b6770;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.75rem, 0.71rem + calc(0.2 * var(--zouma-vw)), 0.875rem);
}

.zouma-pilmid .zouma-btn {
	padding: 12px 20px;
}

/* 04 · Packages ---------------------------------------------------------- */

.zouma-pilpkg {
	padding-block: clamp(3rem, calc(7 * var(--zouma-vw)), 6.75rem);
	background: var(--zouma-blue-pale);
}

.zouma-pilpkg__head {
	text-align: center;
}

.zouma-pilpkg__head .zouma-eyebrow {
	justify-content: center;
}

.zouma-pilpkg__title {
	margin: 16px 0 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.75rem, 1.15rem + calc(2.4 * var(--zouma-vw)), 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.zouma-pilpkg__lede {
	max-width: 1020px;
	margin: 18px auto 0;
	color: #5b6770;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.74rem + calc(0.28 * var(--zouma-vw)), 0.9375rem);
	line-height: 1.55;
}

.zouma-pilpkg__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 16px;
	margin: clamp(2rem, calc(4 * var(--zouma-vw)), 3.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.zouma-pilcard {
	display: flex;
	flex-direction: column;
	padding: 24px;
	background: #fff;
	border-radius: 10px;
}

.zouma-pilcard__head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	flex-wrap: wrap;
}

.zouma-pilcard__num {
	color: var(--zouma-blue);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.25rem, 1rem + calc(0.84 * var(--zouma-vw)), 1.75rem);
	font-weight: 700;
	line-height: 1.1;
}

.zouma-pilcard__name {
	font-family: var(--zouma-font-heading);
	font-size: clamp(1rem, 0.9rem + calc(0.35 * var(--zouma-vw)), 1.1875rem);
	font-weight: 700;
	line-height: 1.3;
}

/* Held at three lines so the "From" row, the price and the bullet list all
 * start at the same height across a row of cards, as they do in the design —
 * the descriptions are two or three lines depending on the package. */
.zouma-pilcard__copy {
	min-height: 4.5em;
	margin: 12px 0 0;
	color: #5b6770;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.75rem, 0.71rem + calc(0.2 * var(--zouma-vw)), 0.875rem);
	line-height: 1.5;
}

.zouma-pilcard__pricelabel {
	margin: 52px 0 0;
	color: #5b6770;
	font-family: var(--zouma-font-body);
	font-size: 0.8125rem;
}

.zouma-pilcard__price {
	margin: 4px 0 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.125rem, 0.95rem + calc(0.63 * var(--zouma-vw)), 1.5rem);
	font-weight: 700;
	line-height: 1.2;
}

/* The bottom margin is the floor under the button; the button's margin-top:auto
 * takes up whatever slack is left, so the six buttons line up across a row
 * however many bullets each card carries. */
.zouma-pilcard__points {
	margin: 40px 0 47px;
	padding: 0 0 0 18px;
	list-style: none;
}

.zouma-pilcard__points li {
	position: relative;
	margin-bottom: 8px;
	color: #37424c;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.75rem, 0.71rem + calc(0.2 * var(--zouma-vw)), 0.875rem);
	line-height: 1.45;
}

/* A drawn bullet, as the legal and tier lists use. It was icon-spark.png,
 * which no longer exists, so nothing was being painted. The offsets place the
 * 5px dot's centre where the 12px artwork's centre was, leaving the hanging
 * indent exactly as it stood. */
.zouma-pilcard__points li::before {
	content: "";
	position: absolute;
	left: -14.5px;
	top: calc(0.2em + 3.5px);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

/* Pushed to the foot so the six buttons line up across a row whatever the
 * bullet count. */
.zouma-pilcard__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: auto;
	padding: 12px 16px;
	border: 1px solid var(--zouma-blue);
	border-radius: 4px;
	color: var(--zouma-blue);
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--zouma-transition), color var(--zouma-transition);
}

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

.zouma-pilcard__btn .zouma-icon {
	transition: transform var(--zouma-transition);
}

.zouma-pilcard__btn:hover .zouma-icon {
	transform: translateX(3px);
}

/* 05 · Closing call to action -------------------------------------------- */

/* Opted out of the site-wide full-screen floor (see `main > section` in
 * main.css). This is a closing line and a button; a whole screen of it was
 * mostly empty. Its own padding sets the height, as it did before.
 *
 * Both properties are needed: min-height undoes the floor, display undoes the
 * grid that came with it and puts the section back to normal block flow. */
.zouma-pilend {
	min-height: auto;
	display: block;
	padding-block: clamp(3rem, calc(6 * var(--zouma-vw)), 5.5rem);
	background: #fff;
}

.zouma-pilend__title {
	margin: 16px 0 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.75rem, 1.15rem + calc(2.4 * var(--zouma-vw)), 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.zouma-pilend__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px clamp(1.5rem, calc(3 * var(--zouma-vw)), 2.5rem);
	margin-top: 20px;
}

.zouma-pilend__text {
	flex: 1 1 520px;
	max-width: 760px;
	margin: 0;
	color: #5b6770;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.74rem + calc(0.28 * var(--zouma-vw)), 0.9375rem);
	line-height: 1.55;
}

.zouma-pilend .zouma-btn {
	padding: 12px 20px;
}

/* Narrow ----------------------------------------------------------------- */

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

@media (max-width: 820px) {
	/* Still a full screen here. This used to be min-height: 0, which left the
	 * hero content-sized on phones and tablets while every other hero on the
	 * site filled the viewport. */
	.zouma-pilhero {
		min-height: 100vh;
		min-height: 100svh;
	}

	.zouma-pilhero__inner {
		padding-block: 3rem;
	}

	.zouma-pilhero__actions {
		justify-content: flex-start;
		margin-top: 26px;
	}

	/* The photograph goes on top and the number sits beside the title, which
	 * keeps the pairing legible once the three columns cannot hold. */
	.zouma-piltow__row,
	.zouma-piltow__row.is-flipped {
		grid-template-columns: 56px minmax(0, 1fr);
		row-gap: 16px;
	}

	.zouma-piltow__media,
	.zouma-piltow__row.is-flipped .zouma-piltow__media {
		order: 0;
		grid-column: 1 / -1;
	}

	.zouma-piltow__num,
	.zouma-piltow__row.is-flipped .zouma-piltow__num {
		order: 1;
		text-align: left;
		align-self: start;
	}

	.zouma-piltow__body,
	.zouma-piltow__row.is-flipped .zouma-piltow__body {
		order: 2;
	}
}

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

/* =========================================================================
 * Split hero, card grid and paired call to action
 * =========================================================================
 *
 * The later pillars are drawn differently from Pillar 01: a photograph fills
 * the right of the hero, the service towers are a three-across card instead of
 * an alternating list, and the specialist call to action is a pair. All three
 * are opt-in — a pillar with no hero image, the default 'rows' layout and no
 * second card renders exactly as Pillar 01 always has.
 * ========================================================================= */

/* Hero with a photograph ------------------------------------------------- */

/* The picture is laid over the right of the section rather than placed in the
 * flow, so it can reach the top and right edges under the sticky header while
 * the copy keeps the shell's own left margin. */
/* The split is measured from the container, not the viewport.
 *
 * width: 55% and a matching percentage padding on the copy were both
 * resolving against the full-width section while the shell stayed capped at
 * 1360px. So the picture grew with the screen and the padding ate the fixed
 * container: the copy fell from 528px at 1440 to 264 at 1920 and reached
 * zero at about 2400, where the text had no width left at all.
 *
 * Now the copy keeps a readable column that stops growing at the design
 * width, and the photograph starts where that column ends and runs to the
 * right edge — so the extra width on a wide screen goes to the picture
 * rather than being taken out of the words. */
.zouma-pilhero--split {
	/* Readable column.
	 *
	 * --zouma-vw is capped at 14.4px, so the first arm stops growing at 1440 and
	 * the column sat at 620px however wide the screen got — while the picture,
	 * which runs from the column's edge to the viewport, kept growing. The copy
	 * was 47% of the used width at 1440 but only 33% at 2560.
	 *
	 * max() adds a second arm that does keep scaling, so past about 2060px the
	 * column grows again rather than the picture taking all of it. Below that
	 * the capped arm still wins and nothing about the current layout moves. */
	--zouma-pilhero-copy: clamp(20rem, max(calc(43 * var(--zouma-vw)), 30vw), 46rem);
	--zouma-pilhero-gap: clamp(1.5rem, calc(3 * var(--zouma-vw)), 3rem);
	/* Distance from the section's left edge to the shell's content box: the
	 * centring offset of the capped container, plus its own padding. */
	--zouma-pilhero-inset: calc(
		50% - min(100%, 85rem) / 2 + clamp(1rem, calc(3 * var(--zouma-vw)), 2.5rem)
	);
}

.zouma-pilhero--split .zouma-pilhero__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: calc(var(--zouma-pilhero-inset) + var(--zouma-pilhero-copy) + var(--zouma-pilhero-gap));
	overflow: hidden;
}

.zouma-pilhero--split .zouma-pilhero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* A short fade back into the section colour, so the photograph's left edge
 * meets the dark ground instead of ending on a hard vertical seam. */
.zouma-pilhero--split .zouma-pilhero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--zouma-dark) 0%, rgba(13, 13, 13, 0) 22%);
}

/* Copy keeps to the left of the picture.
 *
 * The cap goes on the children, not on the shell: the shell is what centres
 * the container, so narrowing it would let its own auto margins pull the
 * copy back into the middle — under the photograph. Capping what it holds
 * leaves the container's edges alone and gives the text a fixed, readable
 * measure at any screen width. */
.zouma-pilhero--split .zouma-pilhero__inner > * {
	max-width: var(--zouma-pilhero-copy);
}


/* Fitting the hero to a phone -------------------------------------------- */

/* The badge strip wrapped onto three rows on a narrow screen and took 169px
 * of a 844px viewport — a fifth of the hero, for a footnote. One row that
 * scrolls sideways keeps every badge reachable in a third of the height.
 * Scroll rather than hide: these are the equal-opportunity and wellbeing
 * commitments, not decoration. */
@media (max-width: 900px) {
	.zouma-pilhero__bar ul {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		min-height: 0;
		padding-block: 12px;
		scrollbar-width: none;
	}

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

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

@media (max-width: 640px) {
	/* 48px top and bottom is generous on a desktop column and wasteful on a
	 * phone, where it is competing with the copy for the same screen. */
	.zouma-pilhero__inner {
		padding-block: 1.75rem;
	}
}
/* Service towers as a card grid ------------------------------------------ */

.zouma-piltow--grid {
	background: var(--zouma-blue-tint);
}

.zouma-piltow__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, calc(1.9 * var(--zouma-vw)), 1.75rem);
	margin: clamp(2.5rem, calc(5 * var(--zouma-vw)), 4rem) 0 0;
	padding: 0;
	list-style: none;
}

.zouma-towcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(11, 74, 108, 0.08);
	border-radius: 12px;
}

/* min-height: 0 is what makes the 16:10 hold.
 *
 * The card is a flex column, so this box is a flex item, and a flex item's
 * automatic minimum is its content's height. The photograph inside is as tall
 * as its own proportions make it, and that floor quietly overrode the ratio —
 * a 340x270 source gave a 331px box where the ratio asks for 254, so cards in
 * the same row disagreed by 70px depending on what had been uploaded.
 *
 * With the floor removed the ratio governs and object-fit: cover crops
 * whatever is put in the field, which is what an editable image needs. */
.zouma-towcard__media {
	position: relative;
	min-height: 0;
	aspect-ratio: 16 / 10;
	background: var(--zouma-teal-deep);
	overflow: hidden;
}

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

/* The tower number, as a panel on the photograph.
 *
 * It was white type with a drop shadow floating loose on the image, which is
 * only legible where the photograph happens to be dark — on the lighter shots
 * in this set it effectively vanished. A dark panel carries its own contrast
 * and does not depend on what is behind it.
 *
 * Not a flat block: the fill thins towards the bottom-right, the two edges
 * that run into the photograph, so the dark eases into the picture rather than
 * cutting a hard rectangle out of it. It stays above 0.7 alpha, which is where
 * white type still clears contrast over the lightest shot in the set.
 *
 * Only the bottom-right corner is rounded here. The top-left is deliberately
 * square: .zouma-towcard rounds the card at 12px and .zouma-towcard__media
 * clips to it, so the panel's outer corner already follows the frame, and a
 * radius of its own would draw a second curve inside that one.
 *
 * A fixed box rather than padding round the digits — the heading face has no
 * tabular figures, so a padded panel is several pixels wider on 04 than on 01
 * and the badges come out visibly unequal down the grid. The clamps scale the
 * box itself, holding it near a third of the media width and a quarter of its
 * height at every viewport; the floors are what keep that proportion on the
 * narrower cards, where the columns stop shrinking with the viewport.
 */
.zouma-towcard__num {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: clamp(7.25rem, calc(9.45 * var(--zouma-vw)), 8.5rem);
	height: clamp(3.375rem, calc(4.75 * var(--zouma-vw)), 4.25rem);
	color: #fff;
	font-family: var(--zouma-font-heading);
	font-size: clamp(2.375rem, 1.5rem + calc(1.7 * var(--zouma-vw)), 3rem);
	font-weight: 700;
	line-height: 1;
	background: linear-gradient(135deg, rgba(18, 18, 18, 0.95) 45%, rgba(18, 18, 18, 0.72));
	border-bottom-right-radius: 18px;
}

.zouma-towcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: clamp(0.875rem, calc(1.5 * var(--zouma-vw)), 1.25rem);
}

.zouma-towcard__name {
	margin: 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1rem, 0.9rem + calc(0.5 * var(--zouma-vw)), 1.125rem);
	font-weight: 600;
	line-height: 1.3;
}

.zouma-towcard__copy {
	margin: 8px 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.78rem + calc(0.2 * var(--zouma-vw)), 0.875rem);
	line-height: 1.55;
}

/* Specialist call to action, one card or two ------------------------------ */

.zouma-pilmids {
	max-width: 1208px;
	margin: clamp(2.5rem, calc(6 * var(--zouma-vw)), 5.5rem) auto 0;
}

/* Single card keeps the width and the top margin it already had, so Pillar 01
 * is untouched by the wrapper going in around it. */
.zouma-pilmids:not(.is-pair) .zouma-pilmid {
	margin-top: 0;
}

.zouma-pilmids.is-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, calc(1.9 * var(--zouma-vw)), 1.75rem);
}

.zouma-pilmids.is-pair .zouma-pilmid {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	max-width: none;
	margin: 0;
	padding: clamp(1.25rem, calc(2 * var(--zouma-vw)), 1.75rem);
}

/* The button is pushed to the foot so the two cards agree on where it sits
 * however differently their copy wraps. */
.zouma-pilmids.is-pair .zouma-pilmid .zouma-btn {
	margin-top: auto;
}

.zouma-pilmids.is-pair .zouma-pilmid__copy {
	margin-bottom: 16px;
}

/* The second card is the paler of the two in the design. */
.zouma-pilmid--alt {
	background: #fff;
	border: 1px solid rgba(11, 74, 108, 0.1);
}

/* Six stages need a sixth column.
 *
 * Scoped to lists that actually have a sixth child, so the five-step pillars
 * keep the layout they were designed around and are not touched at all. Kept
 * inside a min-width query because :has() adds specificity that media queries
 * do not — without it this would outrank the two- and one-column rules below
 * and follow the narrow layouts down to a phone.
 */
@media (min-width: 1025px) {
	.zouma-pilbld__steps:has(> :nth-child(6)) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* Narrower ---------------------------------------------------------------- */

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

@media (max-width: 900px) {
	/* Below this the photograph cannot hold half the width and leave the copy
	 * readable, so it goes back into the flow above the text and runs the full
	 * width of the section. */
	.zouma-pilhero--split .zouma-pilhero__media {
		position: relative;
		/* Back to the left edge.
		 *
		 * The split rule above offsets the picture with `left: calc(inset +
		 * copy + gap)`, which is an inset only while it is absolutely
		 * positioned. Going back into the flow here turns that same value into
		 * a relative nudge, so the photograph was shoved 360px to the right of
		 * where it belonged and left the screen almost completely — on a 390px
		 * phone all that showed was a sliver down the right edge, and
		 * .zouma-pilhero clips, so there was no scrollbar to hint at it. */
		left: 0;
		width: 100%;
		/* Letterboxed, not 16/9: at this width a 16/9 frame is 432px tall on an
		 * iPad and 219 on a phone, and that height is what pushed the hero past
		 * a screen. The photograph is supporting the copy here, not carrying the
		 * section. */
		aspect-ratio: 21 / 9;
		order: -1;
	}

	.zouma-pilhero--split .zouma-pilhero__media::after {
		background: linear-gradient(0deg, var(--zouma-dark) 0%, rgba(13, 13, 13, 0) 30%);
	}

	.zouma-pilhero--split .zouma-pilhero__inner {
		max-width: 100%;
		padding-right: 0;
	}

	/* Stacked, so the copy has the whole column back. */
	.zouma-pilhero--split .zouma-pilhero__inner > * {
		max-width: none;
	}

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

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

/* Shorter still on a phone, where every 40px of photograph is 40px the copy
 * does not get. Placed last so it lands after the stacking rule above. */
@media (max-width: 640px) {
	.zouma-pilhero--split .zouma-pilhero__media {
		aspect-ratio: 2 / 1;
	}
}

/* =========================================================================
 * Figures strip, "built around your business" and the savings band
 * =========================================================================
 *
 * All three are opt-in: a pillar with no figures, no build heading and no
 * savings heading renders exactly as it did before any of this existed.
 * ========================================================================= */

/* Figures in the hero ----------------------------------------------------- */

/* Built around your business ---------------------------------------------- */

.zouma-pilbld {
	/* Opts out of the theme's shared `main > section` screen-height floor: this is
	 * a short band, and the floor would pad it out to a full screen of empty. */
	min-height: 0;
	padding-block: clamp(3rem, calc(7 * var(--zouma-vw)), 6.4375rem);
	background: #fff;
}

.zouma-pilbld__head {
	max-width: 900px;
	text-align: center;
	margin-inline: auto;
}

.zouma-pilbld__head .zouma-eyebrow {
	justify-content: center;
}

.zouma-pilbld__title {
	margin: 16px 0 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.75rem, 1.15rem + calc(2.4 * var(--zouma-vw)), 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.zouma-pilbld__lede {
	margin: 18px 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.9375rem, 0.9rem + calc(0.3 * var(--zouma-vw)), 1.0625rem);
	line-height: 1.6;
}

/* Five across, the same shape the homepage gives its process steps, so the
 * two read as one idea rather than two different diagrams. */
.zouma-pilbld__steps {
	/* The rail, its segments and the dots are all drawn from these, so the dot
	 * on a step and that step's own slice of the line cannot drift apart.
	 *
	 * --zouma-pilrail-pad mirrors this list's padding-top below: the dots are
	 * positioned from the <li>, which begins where that padding ends, so a dot
	 * only reaches the rail by subtracting it again. The two must move together. */
	--zouma-pilrail-pad: 30px;
	--zouma-pilrail-y: 5px;
	--zouma-pilrail-h: 1px;
	--zouma-pildot: 9px;
	/* A step's side padding, which is also how far its dot sits in from the
	 * column edge. The fill has to stop on a dot's centre, not on the column
	 * boundary, so it adds this and half a dot to the column maths. Holding
	 * both in one place is what stops the two drifting apart. */
	--zouma-pilstep-padx: clamp(0.875rem, calc(1.5 * var(--zouma-vw)), 1.25rem);
	/* Fallback only. The template writes the real count inline, so a list that
	 * is not five across still measures its own fill. */
	--zouma-pilbld-cols: 5;
	--zouma-pilrail-off: var(--zouma-blue-pale);
	--zouma-pilrail-on: var(--zouma-blue);
	--zouma-pildot-off: var(--zouma-sky);
	--zouma-pildot-on: var(--zouma-blue);
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	margin: clamp(2.5rem, calc(5 * var(--zouma-vw)), 4rem) 0 0;
	/* Room above the first line of every step for the rail and its markers. */
	padding: 30px 0 0;
	list-style: none;
	counter-reset: none;
}

/* The rail the steps hang from. One line across the whole row rather than a
 * rule between each pair, so the five read as one run from Define to Scale
 * instead of as five separate boxes. */
.zouma-pilbld__steps::before {
	content: "";
	position: absolute;
	top: var(--zouma-pilrail-y);
	left: 0;
	right: 0;
	height: var(--zouma-pilrail-h);
	background: var(--zouma-pilrail-off);
}

/* The travelled part of the rail: how far along the run the pointed-at step
 * sits, measured from the beginning rather than lighting that step's slice on
 * its own.
 *
 * Width is what animates, and the bar is anchored at the start of the row, so
 * growing it can only sweep towards the last step.
 *
 * inset-inline-start rather than left, so the sweep starts at the right-hand
 * end in Arabic without an rtl override to undo.
 *
 * It spans the row at the height of the rail and would otherwise sit between
 * the pointer and the steps it depends on, which is why it takes no events. */
.zouma-pilbld__steps::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: var(--zouma-pilrail-y);
	z-index: 1;
	width: var(--zouma-pilbld-fill, 0);
	height: var(--zouma-pilrail-h);
	background: var(--zouma-pilrail-on);
	pointer-events: none;
	/* On the resting rule, never on the :has() stops — a pose and the transition
	 * to it declared together sweep the bar out as the page loads. */
	transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.zouma-pilstep {
	position: relative;
	/* A grid item keeps min-width: auto and will not shrink under its own
	 * content, pushing the row past the shell — where .zouma-site clips it with
	 * no scrollbar to show for it. */
	min-width: 0;
	padding: clamp(1.25rem, calc(2 * var(--zouma-vw)), 1.75rem) var(--zouma-pilstep-padx);
	/* On the resting rule, not on :hover — a pose and its transition declared
	 * together animate the element into the pose as the page loads. Only the
	 * narrow layout gives a step a border, so this is inert above 1024px. */
	transition: border-color 220ms ease;
}

/* Each step marks its own place on the rail above, sitting over the number it
 * belongs to.
 *
 * Offsets resolve against the <li>, which starts one padding-top below the
 * list, so the dot climbs back up by that padding and then by half its own
 * height less half the rail's to sit centred on the line. */
.zouma-pilstep::before {
	content: "";
	position: absolute;
	top: calc(var(--zouma-pilrail-y) + (var(--zouma-pilrail-h) - var(--zouma-pildot)) / 2 - var(--zouma-pilrail-pad));
	left: var(--zouma-pilstep-padx);
	width: var(--zouma-pildot);
	height: var(--zouma-pildot);
	background: var(--zouma-pildot-off);
	border-radius: 50%;
	/* Above the fill, which runs under every dot it passes on its way to the
	 * pointed-at one and would otherwise draw a blue hairline across them. */
	z-index: 2;
	transition: background-color 220ms ease;
}

/* The per-step segment this hover used to be built from. Retired in favour of
 * the cumulative fill on the list: the pale line at rest is already drawn end
 * to end by the list's own ::before, so nothing is lost by standing it down. */
.zouma-pilstep::after {
	display: none;
}

/* Pointer devices only: on a touch screen :hover sticks after a tap, which
 * would leave a step lit with nobody pointing at it. */
@media (hover: hover) and (pointer: fine) {
	.zouma-pilstep:hover::before {
		background: var(--zouma-pildot-on);
	}

	/* How far the fill runs, per pointed-at step.
	 *
	 * :has() is what lets the list react to which of its own children is under
	 * the cursor — the bar lives on the list, the hover happens on a step.
	 *
	 * A step's dot is inset from its column by the step's padding, so the fill
	 * cannot stop on the column edge the way a marker sitting on that edge
	 * would allow: it runs the whole columns behind the step and then the
	 * padding and half a dot more, to land on the dot's centre.
	 *
	 * Written against --zouma-pilbld-cols, which the template sets from the row
	 * count, so a pillar with a sixth stage measures itself. Carried past the
	 * counts in use today so an added stage needs no CSS.
	 *
	 * Step 1 fills to nothing: it is the start of the run, so there is nothing
	 * behind it to travel. Its dot still lights. */
	.zouma-pilbld__steps:has(> .zouma-pilstep:nth-child(1):hover) {
		--zouma-pilbld-fill: 0;
	}

	.zouma-pilbld__steps:has(> .zouma-pilstep:nth-child(2):hover) {
		--zouma-pilbld-fill: calc(1 / var(--zouma-pilbld-cols) * 100% + var(--zouma-pilstep-padx) + var(--zouma-pildot) / 2);
	}

	.zouma-pilbld__steps:has(> .zouma-pilstep:nth-child(3):hover) {
		--zouma-pilbld-fill: calc(2 / var(--zouma-pilbld-cols) * 100% + var(--zouma-pilstep-padx) + var(--zouma-pildot) / 2);
	}

	.zouma-pilbld__steps:has(> .zouma-pilstep:nth-child(4):hover) {
		--zouma-pilbld-fill: calc(3 / var(--zouma-pilbld-cols) * 100% + var(--zouma-pilstep-padx) + var(--zouma-pildot) / 2);
	}

	.zouma-pilbld__steps:has(> .zouma-pilstep:nth-child(5):hover) {
		--zouma-pilbld-fill: calc(4 / var(--zouma-pilbld-cols) * 100% + var(--zouma-pilstep-padx) + var(--zouma-pildot) / 2);
	}

	.zouma-pilbld__steps:has(> .zouma-pilstep:nth-child(6):hover) {
		--zouma-pilbld-fill: calc(5 / var(--zouma-pilbld-cols) * 100% + var(--zouma-pilstep-padx) + var(--zouma-pildot) / 2);
	}

	.zouma-pilbld__steps:has(> .zouma-pilstep:nth-child(7):hover) {
		--zouma-pilbld-fill: calc(6 / var(--zouma-pilbld-cols) * 100% + var(--zouma-pilstep-padx) + var(--zouma-pildot) / 2);
	}

	.zouma-pilbld__steps:has(> .zouma-pilstep:nth-child(8):hover) {
		--zouma-pilbld-fill: calc(7 / var(--zouma-pilbld-cols) * 100% + var(--zouma-pilstep-padx) + var(--zouma-pildot) / 2);
	}
}

/* The dot and the fill still change, they just arrive at once. */
@media (prefers-reduced-motion: reduce) {
	.zouma-pilstep,
	.zouma-pilstep::before,
	.zouma-pilbld__steps::after {
		transition: none;
	}
}

.zouma-pilstep__head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 12px;
}

.zouma-pilstep__num {
	color: var(--zouma-blue);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1rem, 0.9rem + calc(0.5 * var(--zouma-vw)), 1.125rem);
	font-weight: 700;
	line-height: 1;
}

.zouma-pilstep__stage {
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.zouma-pilstep__title {
	margin: 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1rem, 0.92rem + calc(0.45 * var(--zouma-vw)), 1.1875rem);
	font-weight: 600;
	line-height: 1.25;
}

/* The bold line under a step's title. Same size as the copy beneath it and
 * only the weight apart, so it reads as the first line of the paragraph
 * rather than a second heading competing with the title. */
.zouma-pilstep__lead {
	margin: 0 0 6px;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.75rem, 0.71rem + calc(0.2 * var(--zouma-vw)), 0.875rem);
	font-weight: 600;
	line-height: 1.55;
}

.zouma-pilstep__copy {
	margin: 8px 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.78rem + calc(0.2 * var(--zouma-vw)), 0.875rem);
	line-height: 1.55;
}

/* Run the numbers --------------------------------------------------------- */

.zouma-pilsav {
	/* Opted out of the site-wide full-screen floor (see `main > section` in
	 * main.css) — the same pair .zouma-careers, .zouma-wwdcta and
	 * .zouma-stsla use.
	 *
	 * This band is a heading, a line of copy and a button: about 250px of
	 * content against a 900px floor, so it was carrying roughly 500px of
	 * empty dark blue at every width — on a phone that is most of a screen
	 * of nothing between the section above and the one below. The
	 * padding-block below sets the height instead.
	 *
	 * min-height undoes the floor; display undoes the centring grid that came
	 * with it and puts the section back to block flow. */
	min-height: auto;
	display: block;
	padding-block: clamp(3rem, calc(6 * var(--zouma-vw)), 5.5rem);
	background: var(--zouma-dark);
	color: #fff;
}

.zouma-pilsav__inner {
	max-width: 820px;
	text-align: center;
}

.zouma-pilsav__inner .zouma-eyebrow {
	justify-content: center;
}

.zouma-pilsav__title {
	margin: 16px 0 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.625rem, 1.1rem + calc(2.2 * var(--zouma-vw)), 2.5rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.zouma-pilsav__text {
	margin: 18px auto 0;
	max-width: 62ch;
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.9375rem, 0.9rem + calc(0.3 * var(--zouma-vw)), 1.0625rem);
	line-height: 1.6;
}

.zouma-pilsav__inner .zouma-btn {
	margin-top: clamp(1.5rem, calc(2.4 * var(--zouma-vw)), 2.25rem);
}

/* Six stages need a sixth column.
 *
 * Scoped to lists that actually have a sixth child, so the five-step pillars
 * keep the layout they were designed around and are not touched at all. Kept
 * inside a min-width query because :has() adds specificity that media queries
 * do not — without it this would outrank the two- and one-column rules below
 * and follow the narrow layouts down to a phone.
 */
@media (min-width: 1025px) {
	.zouma-pilbld__steps:has(> :nth-child(6)) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* Narrower ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Five columns cannot hold a sentence each at this width. */
	.zouma-pilbld__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.zouma-pilstep + .zouma-pilstep {
		border-left: 0;
	}

	.zouma-pilstep {
		border-top: 1px solid var(--zouma-pilrail-off);
	}

	/* Wrapped into rows, a single line across the top of the list describes
	 * nothing any more — and a fill along it would measure the first row only.
	 * Each step's border-top is the rail here, so both stand down. */
	.zouma-pilbld__steps::before,
	.zouma-pilbld__steps::after {
		display: none;
	}

	/* Back onto the border the step now carries. Offsets resolve against the
	 * padding box, which the border-top has already pushed down by its own
	 * width, so the dot rises half the border as well as half of itself. */
	.zouma-pilstep::before {
		top: calc((var(--zouma-pildot) + var(--zouma-pilrail-h)) / -2);
	}

	@media (hover: hover) and (pointer: fine) {
		.zouma-pilstep:hover {
			border-top-color: var(--zouma-pilrail-on);
		}
	}
}


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

/* Badges listed with the figures ------------------------------------------ */

/* The same rows the foot-of-hero bar draws, set as a short bulleted list under
 * the figures. Only one of the two ever renders — the placement field decides —
 * so the words are never on the page twice. */
.zouma-pilhero__marks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.375rem, calc(0.6 * var(--zouma-vw)), 0.625rem) clamp(0.75rem, calc(1.4 * var(--zouma-vw)), 1.25rem);
	margin: clamp(1rem, calc(1.8 * var(--zouma-vw)), 1.625rem) 0 0;
	padding: 0;
	list-style: none;
}

.zouma-pilhero__marks li {
	position: relative;
	padding-left: 14px;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.6875rem, 0.65rem + calc(0.2 * var(--zouma-vw)), 0.8125rem);
	line-height: 1.45;
}

/* The dot is drawn rather than a list-style so it can take the brand blue and
 * stay put while a longer label wraps under its own first word. */
.zouma-pilhero__marks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--zouma-blue);
}

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