/**
 * Industries page.
 *
 * Enqueued only on the page with the slug "industries".
 *
 * Sizes come from the 1728-wide Figma frame and are used as CSS pixels at the
 * top of the clamp, the same way the partners page does it — the shell is
 * widened to 1360 so its 1280 content column matches the design exactly.
 */

.zouma-indhero .zouma-shell,
.zouma-indlist .zouma-shell,
.zouma-indways .zouma-shell {
	max-width: 1360px;
}

/* The closing band is not in that list.
 *
 * It carries the homepage's figure grid, and matching it means matching the
 * column it is measured in: the theme's own 1320 shell, which resolves to the
 * same 1240 content width the homepage grid sits in, and from there to the
 * same 637/483 columns. Widening it to this page's 1360 frame instead scaled
 * both columns up and the two grids no longer agreed.
 *
 * The cost is that this band's left edge sits 20px inside the sections above
 * it, which are drawn from the 1728 Figma frame. */

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

.zouma-indhero {
	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;
	/* 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-indhero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* The photograph is the right half of the frame in the design, running to the
 * top and bottom edges. */
.zouma-indhero__photo {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: 50%;
	display: block;
}

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

/* Feathered into the dark panel rather than butted against it, which is what
 * hides the seam in the design. */
.zouma-indhero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		var(--zouma-dark) 0%,
		rgba(18, 18, 18, 0.45) 4%,
		rgba(18, 18, 18, 0) 13%
	);
}

.zouma-indhero__dots {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 50%;
	background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.2px);
	background-size: 26px 26px;
}

/* Takes the space above the badge bar and centres the copy in it, which is
 * where the design puts it — the bar stays pinned to the bottom edge. */
.zouma-indhero__inner {
	position: relative;
	display: flex;
	/* 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;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding-block: clamp(2.5rem, calc(4 * var(--zouma-vw)), 4.25rem);
}

.zouma-indhero__title {
	/* Wide enough to keep "Across Every Industry" on the one line the <br> in
	 * the copy asks for; a ch cap is too tight at this size. */
	max-width: 640px;
	margin: 18px 0 0;
	color: #fff;
	font-family: var(--zouma-font-heading);
	font-size: var(--zouma-size-hero);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.01em;
}

.zouma-indhero__text {
	max-width: 585px;
	margin: 26px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.875rem, 0.76rem + calc(0.42 * var(--zouma-vw)), 1rem);
	line-height: 1.78;
}

.zouma-indhero__bar {
	position: relative;
	background: rgba(255, 255, 255, 0.09);
	backdrop-filter: blur(6px);
}

.zouma-indhero__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: 52px;
	margin: 0;
	padding: 10px clamp(1rem, calc(3 * var(--zouma-vw)), 2.5rem);
	list-style: none;
}

.zouma-indhero__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;
}

/* The bullet before each promise 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 five labels with nothing between them.
 *
 * 6px and round, matching .zouma-pilhero__dot, so the two hero bars carry
 * the same separator. Cyan rather than the blue that rule uses: this bar
 * sits on a dark photograph where the darker blue disappears.
 */
.zouma-indhero__dot {
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--zouma-cyan);
}

/* 02 · The verticals ----------------------------------------------------- */

.zouma-indlist {
	padding-block: clamp(3rem, calc(6.4 * var(--zouma-vw)), 5.75rem);
	background: #fff;
}

/* Tab strip -------------------------------------------------------------- */

.zouma-indtabs {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 2px;
	padding: 8px;
	background: var(--zouma-blue-pale);
	border-radius: 10px;
	overflow-x: auto;
	scrollbar-width: none;
}

/* One row, as in the design. It scrolls rather than wraps if a client adds
 * enough industries to outgrow the bar, so the strip never becomes two rows of
 * pills with the active one stranded on the second. */
.zouma-indtabs::-webkit-scrollbar {
	display: none;
}

.zouma-indtabs__tab {
	display: block;
	/* Button resets: these were anchors before the rail became a real
	 * tablist, so they arrive with the UA button skin. */
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 10px 14px;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.72rem + calc(0.32 * var(--zouma-vw)), 0.9375rem);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 8px;
	transition: background var(--zouma-transition), color var(--zouma-transition);
}

.zouma-indtabs__tab:hover {
	background: rgba(255, 255, 255, 0.55);
	color: var(--zouma-blue-dark);
}

/* The selected vertical. White pill on the pale bar, as in the design, with a
 * little lift so a click reads as having landed rather than as a hover that
 * happened to stick. */
.zouma-indtabs__tab.is-active,
.zouma-indtabs__tab.is-active:hover {
	background: #fff;
	color: var(--zouma-color-text);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(4, 38, 52, 0.12);
}

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

/* Blocks ----------------------------------------------------------------- */

.zouma-indlist__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The panel stacks: a two-column lead, then each capability grid across the
 * full width. The grids used to share the right-hand column with the copy,
 * which is why the cards could only ever sit two or three across; the design
 * runs five of them in one row. */
.zouma-indv {
	padding-top: 64px;
	/* Cleared so an anchored jump does not park the block under the header. */
	scroll-margin-top: calc(var(--zouma-header-h) + 16px);
}

.zouma-indv__lead {
	display: grid;
	grid-template-columns: minmax(0, 470fr) minmax(0, 714fr);
	gap: clamp(2rem, calc(6.6 * var(--zouma-vw)), 6rem);
	align-items: start;
}

.zouma-indv__media {
	margin: 0;
	aspect-ratio: 470 / 314;
	border-radius: 10px;
	overflow: hidden;
	background: var(--zouma-blue-pale);
}

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

.zouma-indv__name {
	margin: 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.375rem, 1.05rem + calc(1 * var(--zouma-vw)), 1.875rem);
	font-weight: 700;
	line-height: 1.25;
}

.zouma-indv__text {
	margin: 14px 0 0;
	color: #3f4852;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.74rem + calc(0.28 * var(--zouma-vw)), 0.9375rem);
	line-height: 1.66;
}

/* Proof card ------------------------------------------------------------- */

.zouma-indv__proof {
	/* Clears the paragraph above it. The box carried no top margin, and its
	 * parent is plain block flow with no gap, so its border finished hard
	 * against the last line of the copy — the rule read as underlining the
	 * sentence rather than framing the figure below it.
	 *
	 * Scaled with the viewport like the rest of this block's rhythm, rather
	 * than a flat value, so it keeps pace with the copy as the type grows. */
	margin-top: clamp(1.25rem, calc(1.8 * var(--zouma-vw)), 1.75rem);
	padding: 24px;
	border: 1px solid #e8ecf0;
	border-radius: 10px;
}

.zouma-indv__figure {
	margin: 0;
	color: var(--zouma-blue);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.75rem, 1.15rem + calc(1.85 * var(--zouma-vw)), 2.5rem);
	font-weight: 700;
	line-height: 1.1;
}

/* The unit — "%", "Week", the arrow in "19 → 3" — is set lighter and smaller
 * than the figure it belongs to. */
.zouma-indv__figure span {
	font-size: 0.72em;
	font-weight: 500;
}

.zouma-indv__prooflabel {
	margin: 6px 0 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(0.9375rem, 0.86rem + calc(0.28 * var(--zouma-vw)), 1.0625rem);
	font-weight: 700;
}

.zouma-indv__proofnote {
	margin: 8px 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.75rem, 0.7rem + calc(0.22 * var(--zouma-vw)), 0.875rem);
	line-height: 1.5;
}

/* Chip groups ------------------------------------------------------------ */

.zouma-indv__group {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #e8ecf0;
}

.zouma-indv__grouptitle {
	margin: 0 0 12px;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1rem, 0.9rem + calc(0.35 * var(--zouma-vw)), 1.25rem);
	font-weight: 600;
}

/* Flex, not a fixed grid: the two layers hold different numbers of cards and
 * the design gives each row equal columns across the full width. flex-grow
 * does that for any count without a rule per count. */
.zouma-indv__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zouma-indchip {
	flex: 1 1 clamp(8rem, 14%, 12rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	padding: 16px 12px;
	background: #fff;
	border: 1px solid #e8ecf0;
	border-radius: 8px;
	transition: border-color var(--zouma-transition), box-shadow var(--zouma-transition);
}

.zouma-indchip:hover {
	border-color: var(--zouma-sky);
	box-shadow: 0 6px 18px rgba(4, 38, 52, 0.06);
}

.zouma-indchip__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--zouma-blue-pale);
	color: var(--zouma-blue);
}

/* An uploaded chip icon, in place of the drawn mark.
 *
 * 26px rather than the 34 the drawn icons take: those are drawn inside their
 * box with a margin and only fill about 79% of it, so 34 puts roughly 27px of
 * ink in the disc. Uploaded artwork usually runs edge to edge, and matching
 * the ink rather than the box is what keeps the two kinds of chip weighing the
 * same next to each other. contain, so a non-square file is letterboxed rather
 * than stretched. */
.zouma-indchip__img {
	display: block;
	width: 26px;
	height: 26px;
	object-fit: contain;
}

/* Breathing room between the disc and the glyph.
 *
 * The icon is emitted at 34px inside a 42px disc, which was right for the drawn
 * set: those were drawn inside their 24 grid with a margin and only inked about
 * four fifths of the box, so 34 landed roughly 27px of actual mark. The Figma
 * icons fill their 32 viewBox edge to edge, so the same 34 now paints a true
 * 34px and leaves four pixels of ring.
 *
 * Sized here rather than by changing the number the template passes, so it
 * holds whatever size any given call asks for. A percentage rather than a fixed
 * value so the glyph keeps its proportion if the disc is ever resized.
 */
.zouma-indchip__icon svg {
  width: 62%;
  height: 62%;
}
.zouma-indchip__label {
	display: block;
	margin-top: 14px;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.75rem, 0.7rem + calc(0.22 * var(--zouma-vw)), 0.875rem);
	line-height: 1.5;
}

.zouma-indv__cta {
	margin-top: 24px;
	padding: 11px 18px;
}

/* 03 · Four ways --------------------------------------------------------- */

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

.zouma-indways__title {
	max-width: 700px;
	margin: 16px 0 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.875rem, 1.1rem + calc(2.75 * var(--zouma-vw)), 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.zouma-indways__intro {
	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: 22px;
}

.zouma-indways__lede {
	flex: 1 1 480px;
	max-width: 754px;
	margin: 0;
	color: #3f4852;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.74rem + calc(0.28 * var(--zouma-vw)), 0.9375rem);
	line-height: 1.66;
}

.zouma-indways__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

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

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

.zouma-indway {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
}

.zouma-indway__media {
	aspect-ratio: 308 / 214;
	background: var(--zouma-blue-pale);
}

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

/* 12px inline, not 16: the widest tag row ("App Modern / Data & Intelligence /
 * Automation") needs 277 of the card's 308, which only clears at this padding.
 * Any wider and it breaks to a third row the design does not have. */
.zouma-indway__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px 12px 18px;
}

.zouma-indway__name {
	margin: 0;
	font-family: var(--zouma-font-heading);
	font-size: clamp(1rem, 0.92rem + calc(0.3 * var(--zouma-vw)), 1.1875rem);
	font-weight: 700;
	line-height: 1.28;
}

.zouma-indway__copy {
	margin: 12px 0 0;
	color: #3f4852;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.75rem, 0.71rem + calc(0.2 * var(--zouma-vw)), 0.875rem);
	line-height: 1.6;
}

.zouma-indway__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

/* Sized so the six longest tags still fall on two rows, as they do in the
 * design; a size up and "Automation" drops to a third row on its own. */
.zouma-indway__tags li {
	padding: 4px 6px;
	background: var(--zouma-blue-pale);
	border-radius: 4px;
	color: var(--zouma-blue-dark);
	font-family: var(--zouma-font-body);
	font-size: 0.6875rem;
	line-height: 1.45;
}

.zouma-indway__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding-top: 16px;
	color: var(--zouma-blue);
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

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

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

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

/* Nothing here sets padding, background or type: the band carries the
 * .zouma-outcomes class and takes all three from main.css, which is the whole
 * point. This file loads after main.css, so anything restated would quietly
 * win over the thing it is supposed to be matching. */

/* Let the shell shrink below its content.
 *
 * main > section is a grid, so the shell is a grid item and carries the
 * automatic min-width: auto floor. The tab rail is a nowrap flex row, so that
 * floor resolved to the rail's full 1135px and the shell rendered 1167px wide
 * inside a 390px section. Nothing scrolled and no overflow was reported —
 * .zouma-site clips on the x axis — so the rail simply had six of its eight
 * tabs cut off and unreachable on a phone. min-width: 0 releases the floor and
 * hands the scrolling back to the rail's own overflow-x.
 */
.zouma-indlist > .zouma-shell {
	min-width: 0;
}

/* Content height, not screen height.
 *
 * main > section sets a 100vh floor site-wide. These three run to 702, 586
 * and 922 pixels of content, so the floor was padding half a screen of white
 * under each of them and the design has them tight. Scoped to this page's
 * own classes — the shared rule is untouched, and the hero keeps its full
 * screen as every hero on the site does.
 */
.zouma-indlist,
.zouma-indpillars,
.zouma-indcta {
	min-height: 0;
}

/* The pale band closing each industry. */
.zouma-indv__coc {
	margin-top: 20px;
	padding: clamp(1rem, calc(1.6 * var(--zouma-vw)), 1.375rem)
		clamp(1.125rem, calc(1.9 * var(--zouma-vw)), 1.625rem);
	background: var(--zouma-blue-pale);
	border-radius: 10px;
}

.zouma-indv__coctitle {
	margin: 0;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: clamp(0.8125rem, 0.76rem + calc(0.22 * var(--zouma-vw)), 0.9375rem);
	font-weight: 600;
}

.zouma-indv__coctext {
	margin: 6px 0 0;
	color: #3f4852;
	font-family: var(--zouma-font-body);
	font-size: clamp(0.75rem, 0.71rem + calc(0.2 * var(--zouma-vw)), 0.875rem);
	line-height: 1.6;
}

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

@media (max-width: 1100px) {
	/* Predictable rows rather than flex-grow stretching a short last row. */
	.zouma-indv__chips {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

@media (max-width: 900px) {
	.zouma-indhero {
		min-height: 100vh;
		min-height: 100svh;
		padding-top: calc(var(--zouma-header-h) + 32px);
	}

	.zouma-indhero__photo {
		width: 100%;
		opacity: 0.4;
	}

	.zouma-indhero__photo::after {
		background: linear-gradient(to bottom, rgba(18, 18, 18, 0.55), var(--zouma-dark));
	}

	.zouma-indhero__dots {
		width: 100%;
	}

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

	.zouma-indv__lead {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

}

@media (max-width: 640px) {
	.zouma-indtabs {
		justify-content: flex-start;
	}

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

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

}