/* =============================================================================
   CUSTOMERS PAGE (/customers/, template-customers.php)
   -----------------------------------------------------------------------------
   ISSG Customer Page Developer Handoff V13. Every component in this file is
   classified "C — new Customer-page-specific component" by V13's own Developer
   Notes, which is why they live here and not in iss-global.css: nothing else on
   the site renders a filter tile, a typographic customer card, a numbered
   process card or a two-tier story hub, and the notes are explicit that this
   page "does not redefine any shared component or site-wide standard."

   HOW THIS FILE RELATES TO THE PACKAGE
   The Clean HTML is the source of truth for the CONTENT AREA — everything below
   the hero and above the footer — so the geometry below is ported from it
   value-for-value (radii, padding, min-heights, grid ratios, breakpoints).
   Three deliberate divergences, all of them things V13's own notes list as
   shared components "reused as-is", so taking the site's version IS the package:

     1. PAGE-SHELL WIDTH. The mockup's `.page-shell` is a 1240px box with 28px
        of padding — an 1184px column. The site's `.iss-wrap` is 1120px. V13's
        Change Summary lists "page-shell width" under what this page reuses
        as-is, and a content column 64px wider than the hero above it reads as a
        layout bug, so every section here sits in `.iss-wrap`.
     2. TYPOGRAPHY. h1/h2/h3 sizes in the mockup are already the site's to the
        pixel (`clamp(26px, 3vw, 38px)` / 1.08 / -.025em on h2, and so on); the
        only difference is `font-weight: 720` against §2's 700. Same clause,
        same answer — the site's weight stands and no heading is re-declared.
     3. EYEBROWS. The mockup draws a bare mono caps label; the site draws the
        same label plus the accent dash the 2026-09-04 site-wide rule gives
        every non-homepage kicker. `.iss-kicker` is that component, so the
        sections below use it and this file declares nothing about the dash.

   Loaded at priority 41 against iss-global.css's 40 (functions.php), so a
   `.iss-page.iss-customers .x` rule here beats a `.iss-page .x` rule there on
   source order as well as specificity. Everything is scoped to
   `.iss-page.iss-customers` for that reason and because `single-client.php`
   shares the global sheet's §21 components with this page's former build.

   SECTIONS
     1. HERO — the QAD workflow landscape inside the site's hero card shell
     2. CUSTOMER GALLERY — filter tiles, divider, typographic cards
     3. CUSTOMER PROCESS OVERVIEW — six numbered cards + the foundation band
     4. PROJECT SNAPSHOTS — two featured stories over four compact ones
     5. CUSTOMER VOICE — three differentiated quote cards on a navy ground
     6. FINAL CTA — the shared split band, actions stacked per V19
     7. RESPONSIVE
   ============================================================================= */

/* =============================================================================
   1. HERO — QAD WORKFLOW LANDSCAPE
   -----------------------------------------------------------------------------
   The hero itself is the SITE's hero, not the mockup's: `.iss-detail-hero`
   paints §7's navy gradient with its radial glows and corner ring, `.iss-hero-2col`
   sets the 1.05/.95 column ratio, and the eyebrow, H1, lead, buttons and pills
   are the shared components §7/§7a already invert for a dark ground. The mockup's
   own hero shell (a 115deg navy wash, a 4px cyan top rule, `min-height: 690px`)
   is deliberately not ported — that is the "styling matches the site" half of
   the brief.

   What IS ported is the CONTENT: the orbital diagram with QAD at the centre and
   six business processes around it. It renders inside `.iss-hero-wf`, the site's
   own hero infographic shell, so it inherits the glass surface, the 24px radius,
   the mono kicker rail and — because §7g makes that shell a container — the
   header sizing that scales with the card instead of the window. The card gets
   no QAD status badge, so §7f's stamp and §7h's corner-stamp grid do not apply
   to it and its head keeps the plain flex rail.
   ============================================================================= */

/*
 * THE COLUMN RATIO IS V13's ABOVE 1240px AND THE SHARED HERO'S BELOW IT.
 *
 * `.iss-hero-2col` is 1.05fr/.95fr for ~20 heroes and stays that way. This page
 * overrides it to V13's own 1.18/0.82 — but only where that override earns
 * something, which is a narrower band than it first looks. Two measured problems
 * drove it, and they have one cause:
 *
 *   1. THE THEME LINE WRAPPED AT EVERY DESKTOP WIDTH. The three labels need
 *      613px (517px of text plus two dot-and-gap separators) and the shared
 *      ratio gives this copy column 558px — at 1512 exactly as at 1280, because
 *      `.iss-wrap` caps at 1120 and the column stops growing with the window. A
 *      wrap left the separator dot orphaned at the end of line one, which reads
 *      as a rendering fault rather than as a separator.
 *   2. THE CARD RAN TALLER THAN THE COPY — 570 against 511 at 1512, over the
 *      site's ~10% hero-balance rule, and 11.0% at 1280. The card's height IS
 *      its width here (the orbit is a square field), so a card that is too tall
 *      wants a narrower column, which is the same change as widening the copy.
 *
 * 1240px is measured, not chosen: V13's ratio sets the row on ONE line down to
 * 1240 (copy 620px) and wraps at 1220 (608px). And the two ratios swap places
 * either side of it — V13's balances at 0.2-7.6% from 1240 up, the shared one at
 * 2.1-5.4% from 1220 down, where V13's reaches 10.6%. So each is used exactly
 * where it measures better, and nothing is overridden where the override would
 * make the page worse.
 *
 * This is lever 1 of the hero-balance rule — give the column that needs it more
 * width — and it lands ON the package's ratio rather than away from it, so the
 * divergence is from the shared component and not from V13.
 */
@media (min-width: 1240px) {
	.iss-page.iss-customers .iss-hero-2col {
		grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
	}
}

/*
 * ...and the card gives back the two margins that are OURS rather than V13's.
 * The mockup positions its caption and footer absolutely, so neither adds to the
 * panel's height; here they sit in the flow of the site's card shell, where
 * §7c's 20px rail margin plus the footer's own margin add 34px to a card that
 * was already the taller column. Halving both keeps the shell's arrangement and
 * takes the last of the height difference out.
 */
.iss-page.iss-customers .iss-hero-wf .iss-hero-wf-top { margin-bottom: 10px; }

/*
 * The orbit is a square field, and it has to STAY square: every node below is
 * positioned in percentages off this box, exactly as the mockup positions them
 * off its own `aspect-ratio: 1 / 1.08` panel. Sizing the field itself rather
 * than the card means the card's own padding, kicker and footer sit outside it
 * and can't distort the ring.
 */
.iss-page.iss-customers .iss-corbit {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	margin: 2px 0 0;
}

/* The dot field, masked out towards the bottom — the mockup's `.qad-visual::before`. */
.iss-page.iss-customers .iss-corbit::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(143, 226, 245, .2) .8px, transparent .8px);
	background-size: 17px 17px;
	mask-image: linear-gradient(to bottom, black, transparent 85%);
	-webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
	opacity: .5;
	pointer-events: none;
}

.iss-page.iss-customers .iss-corbit-ring {
	position: absolute;
	top: 49%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(57, 195, 230, .28);
	border-radius: 50%;
	pointer-events: none;
}
.iss-page.iss-customers .iss-corbit-ring-outer { width: 76%; height: 70%; }
.iss-page.iss-customers .iss-corbit-ring-inner {
	width: 52%;
	height: 48%;
	border-color: rgba(143, 226, 245, .14);
}

/*
 * The QAD core. Sized in `cqw` against `.iss-hero-wf`'s container (§7g) rather
 * than the mockup's fixed 152px, for the reason §7g gives about this whole
 * family: below ~940px the hero stops being two columns and the card goes full
 * width, so a fixed core that suits a 460px card is small in a 690px one. The
 * floor is the mockup's own phone value and the cap its own desktop value, so
 * neither reviewed width moves.
 */
.iss-page.iss-customers .iss-corbit-core {
	position: absolute;
	top: 49%;
	left: 50%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: clamp(118px, 35cqw, 152px);
	height: clamp(118px, 35cqw, 152px);
	transform: translate(-50%, -50%);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	background: linear-gradient(145deg, var(--iss-blue), var(--iss-blue-dark));
	box-shadow: 0 0 0 10px rgba(12, 115, 201, .12), 0 18px 45px rgba(0, 0, 0, .34);
	text-align: center;
}
/*
 * The label sizes with the card, like every other label in this family (§7g).
 * A fixed 9px is what V13 uses, and V13's panel is 490px wide at its widest —
 * this card is 435px, so the core scales down proportionally and a fixed label
 * does not, which wrapped "REAL-TIME INTEGRATION" onto two lines inside a
 * circle the mockup sets it on one. The cap is V13's own 9px, reached once the
 * card is wide enough to seat it.
 */
.iss-page.iss-customers .iss-corbit-core-label {
	margin-bottom: 7px;
	color: rgba(255, 255, 255, .76);
	font-size: clamp(8px, 2.1cqw, 9px);
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1.2;
	text-transform: uppercase;
}
.iss-page.iss-customers .iss-corbit-core strong {
	color: #fff;
	font-size: clamp(29px, 7.8cqw, 36px);
	font-weight: 700;
	letter-spacing: -.04em;
	line-height: 1;
}
.iss-page.iss-customers .iss-corbit-core-sub {
	margin-top: 6px;
	color: var(--iss-sky);
	font-family: var(--iss-mono);
	font-size: 10px;
	letter-spacing: .18em;
}

/*
 * The six process nodes, placed clockwise from the top. The POSITIONS are
 * layout, so they stay in code — one class per slot, carrying the mockup's own
 * percentages. The LABELS are content, so the template reads them from ACF: they
 * name the same six processes as section 3's cards, and an editor who renames a
 * process there has to be able to rename it here without a code change.
 */
.iss-page.iss-customers .iss-corbit-node {
	position: absolute;
	z-index: 3;
	padding: 9px 12px;
	border: 1px solid rgba(143, 226, 245, .34);
	border-radius: 8px;
	background: rgba(10, 41, 64, .96);
	box-shadow: 0 10px 25px rgba(0, 0, 0, .22);
	color: #fff;
	font-size: clamp(11px, 2.5cqw, 12px);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}
.iss-page.iss-customers .iss-corbit-node-1 { top: 14%; left: 50%; transform: translateX(-50%); }
.iss-page.iss-customers .iss-corbit-node-2 { top: 31%; right: 5%; }
.iss-page.iss-customers .iss-corbit-node-3 { top: 67%; right: 10%; }
.iss-page.iss-customers .iss-corbit-node-4 { bottom: 11%; left: 50%; transform: translateX(-50%); }
.iss-page.iss-customers .iss-corbit-node-5 { top: 67%; left: 4%; }
.iss-page.iss-customers .iss-corbit-node-6 { top: 31%; left: 4%; }

/*
 * The card's footer line. The mockup draws a green pulse dot to the RIGHT of the
 * text; `iss_live_badge()` is the site's component for exactly this pairing and
 * puts the dot on the left, which is the site's own reading of it — so the badge
 * is used as-is and only its alignment inside the card is set here.
 */
.iss-page.iss-customers .iss-corbit-foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}
.iss-page.iss-customers .iss-corbit-foot .iss-live { color: #bfeaf5; }

/* ---- 1a. The copy column's vertical rhythm ---------------------------------
   Danny, 2026-09-07: "The formatting and spacing on the buttons and sub text is
   terrible."

   He was right, and it measured worse than it looked. Against the served mockup
   at 1512 / 1280 / 1024 / 390:

     eyebrow -> h1      18px  vs  18px   ok
     h1      -> lead    14px  vs  28px   half the space
     lead    -> themes  22px  vs  28px   6px short
     themes  -> buttons  0px  vs  34px   the buttons were TOUCHING the sub text

   THE ZERO IS A REGRESSION FROM THIS PAGE'S OWN REBUILD, not a site-wide gap.
   `.iss-page .iss-btn-row` (§5) is a bare flex row with no top margin — every
   hero supplies its own, and an audit of the six others found 26-28px on all of
   them (`.iss-lead` + 27px on the three solution pages, `.iss-proof-chips` + 26px
   on /about/ and /use-cases/, a 28px margin-bottom on the hub's proof list).
   `/customers/` had 26px too, from §21's `.iss-cust-hero .iss-btn-row` — and the
   V13 rebuild dropped that wrapper, so the row lost its only source of space and
   the button pills came to rest against the theme line's descenders.

   Every value below is V13's own (`.hero-lead`, `.hero-themes` and
   `.hero-actions` all carry `margin-top` in the Clean HTML), so this is porting
   the hero's SPACING from the package while its buttons keep the site's shape —
   which is the split the brief asks for.

   WHAT IS DELIBERATELY NOT CHANGED: the buttons themselves. V13 draws a 48px
   9px-radius rectangle at weight 720; the site's `.iss-btn` is a 52px pill at
   weight 600, and it is that on all fourteen pages. V13's own Change Summary
   lists "button styling" under what this page reuses as-is, so re-cutting the
   pill here would make /customers/ the one page whose buttons are a different
   shape. The spacing was the fault; the shape was not.
   -------------------------------------------------------------------------- */
.iss-page.iss-customers .iss-detail-hero .iss-lead { margin-top: 28px; }
.iss-page.iss-customers .iss-detail-hero .iss-btn-row { margin-top: 34px; }

/*
 * The hero's theme line — "Real-Time QAD Integration / Proven Workflows /
 * Customer-Driven Innovation". `.iss-hero-areas` (§7a) is the site's row-of-short-
 * labels-in-a-hero component and is reused rather than re-cut; V13 separates the
 * three with a cyan dot instead of a pill border, and that separator is what this
 * rule restores on top of the shared component.
 */
.iss-page.iss-customers .iss-hero-themes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px 22px;
	margin-top: 28px;
}
.iss-page.iss-customers .iss-hero-themes li {
	display: flex;
	align-items: center;
	color: var(--iss-sky);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .015em;
	/*
	 * `.iss-page` sets `line-height: 1.6` (§2), which on a 14px label is a
	 * 22.4px box around 17px of text — five wasted pixels per line, and on a
	 * phone this row is three lines. V13 leaves these labels at `normal`. 1.3
	 * rather than `normal` because these labels DO wrap at narrow widths, and
	 * `normal` sets wrapped lines too tight to read comfortably.
	 */
	line-height: 1.3;
}
/*
 * THE DOT SEPARATORS EXIST ONLY WHERE THE ROW IS ONE LINE.
 *
 * A separator is only doing a job between two labels on the same line. Once the
 * row wraps, the dot after the last label on line one sits at the end of that
 * line with nothing after it, which reads as a rendering fault — and hiding it
 * is not something CSS can do conditionally, because "is this element at the end
 * of a line" is not a state a selector can see.
 *
 * So the dots are keyed on the same 1240px threshold as the ratio above, which
 * is the width down to which the row measures as one line. Below it the three
 * labels read as a set separated by whitespace instead — which is V13's own
 * answer to the same problem at its own narrow widths (its `.hero-themes`
 * drops the dots at 820px and stacks at 560px), applied at the width where THIS
 * site's page shell actually runs out of room.
 */
@media (min-width: 1240px) {
	.iss-page.iss-customers .iss-hero-themes li:not(:last-child)::after {
		content: "";
		width: 4px;
		height: 4px;
		margin-left: 22px;
		border-radius: 50%;
		background: var(--iss-cyan);
		opacity: .68;
	}
}
/* Without the dots the labels need their own breathing room to read as a set. */
@media (max-width: 1239px) {
	.iss-page.iss-customers .iss-hero-themes { gap: 8px 30px; }
}

/* =============================================================================
   2. CUSTOMER GALLERY
   -----------------------------------------------------------------------------
   V13 Section 2. The band's own white-to-page-ground gradient is painted here
   rather than left to the page ground, because the mockup's `.customer-gallery`
   opens on #fff and resolves to `--iss-bg` — that transition is what separates
   the gallery from the hero above it now that the hero's own 4px cyan rule is
   gone. It bleeds with §3's geometry taken intrinsically (same as the hero), so
   no template markup carries `.iss-bleed`.
   ============================================================================= */
.iss-page.iss-customers .iss-cgal {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-block: 104px 118px;
	background: linear-gradient(180deg, #fff 0%, var(--iss-bg) 100%);
}

.iss-page.iss-customers .iss-cgal-head {
	max-width: 850px;
	margin-inline: auto;
	text-align: center;
}
.iss-page.iss-customers .iss-cgal-head .iss-kicker { margin-bottom: 18px; }
.iss-page.iss-customers .iss-cgal-head .iss-cgal-copy {
	max-width: 790px;
	margin: 23px auto 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--iss-muted);
}
/*
 * The partial-list disclosure. V13 requires the line itself ("This is a partial
 * selection of ISS Group customers, presented alphabetically for easy scanning")
 * and draws it as a cyan-dotted blue note, distinct from the body copy above it
 * so it doesn't read as a third paragraph of prose.
 */
.iss-page.iss-customers .iss-cgal-note {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 22px;
	color: var(--iss-blue-dark);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
}
.iss-page.iss-customers .iss-cgal-note::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--iss-cyan);
}

/* ---- 2a. Filter tiles ------------------------------------------------------
   Five tiles: All Customers plus the four industry categories. Each carries its
   live count as the tile's own number, which is the count V13 wants kept true —
   the template derives every one of them from the roster rather than storing
   them, so adding a customer in wp-admin moves the number here and in the
   status line below.
   -------------------------------------------------------------------------- */
/*
 * THREE COLUMNS, TWO ROWS — V19's own grid, and a change from V13's.
 *
 * V13 had five tiles (All + four industries) and set `repeat(5, …)`, which put
 * them on one row. V19 adds Food & Consumer Products, and six tiles in a
 * five-column grid is a row of five with one orphan under it — which is what
 * this page shipped for a moment. The mockup's answer is `repeat(3, …)`: two
 * even rows of three, each tile wide enough to set its label on ONE line
 * instead of wrapping "Life Sciences & Medical Technology" to three.
 *
 * Not `auto-fit`/`auto-fill`: those would re-flow to five across at this width
 * and reintroduce the orphan. The count is approved content, so the column
 * count is a decision, not something to derive from the available space.
 */
.iss-page.iss-customers .iss-cgal-filters {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 42px;
}

.iss-page.iss-customers .iss-cgal-tile {
	position: relative;
	display: flex;
	gap: 15px;
	align-items: center;
	width: 100%;
	min-height: 104px;
	padding: 20px 20px 20px 23px;
	overflow: hidden;
	border: 1px solid var(--iss-line-strong);
	border-radius: 12px;
	background: var(--iss-card);
	box-shadow: 0 7px 24px rgba(10, 41, 64, .055);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
/* The category's colour as a rail down the tile's leading edge. */
.iss-page.iss-customers .iss-cgal-tile::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--iss-cat-color);
}
/* The radio-like state dot, top-right. */
.iss-page.iss-customers .iss-cgal-tile::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 9px;
	height: 9px;
	border: 1px solid var(--iss-line-strong);
	border-radius: 50%;
	background: transparent;
	transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.iss-page.iss-customers .iss-cgal-tile:hover {
	border-color: var(--iss-cat-color);
	box-shadow: 0 12px 30px rgba(10, 41, 64, .1);
	transform: translateY(-2px);
}
/*
 * Selected state is keyed on `aria-pressed`, not on a class. V13 requires
 * aria-pressed to track the filter, so keying the paint on it makes the visible
 * state and the announced state the same fact — they cannot drift, and a
 * keyboard user and a sighted user are never told different things.
 */
.iss-page.iss-customers .iss-cgal-tile[aria-pressed="true"] {
	border-color: var(--iss-cat-color);
	background: var(--iss-bg-tint);
	box-shadow: inset 0 0 0 1px var(--iss-cat-color), 0 12px 30px rgba(10, 41, 64, .1);
	transform: translateY(-2px);
}
.iss-page.iss-customers .iss-cgal-tile[aria-pressed="true"]::after {
	border-color: var(--iss-cat-color);
	background: var(--iss-cat-color);
	box-shadow: 0 0 0 3px #fff;
}
.iss-page.iss-customers .iss-cgal-tile:focus-visible {
	outline: 3px solid var(--iss-cyan);
	outline-offset: 3px;
}
.iss-page.iss-customers .iss-cgal-tile strong {
	color: var(--iss-cat-color);
	font-size: 31px;
	font-weight: 700;
	letter-spacing: -.04em;
	line-height: 1;
}
.iss-page.iss-customers .iss-cgal-tile > span {
	color: var(--iss-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

/*
 * The five category colours plus All. Set as a custom property on the element so
 * one rail/dot/number/border declaration serves every category, and a sixth
 * category added later needs one line here rather than five.
 *
 * `food` is V19's addition and is the one colour here that is NOT a brand token:
 * #b96c16 is the mockup's own value, and it is deliberately a darker amber than
 * `--iss-amber` so Food & Consumer Products reads as its own category next to
 * Industrial without introducing a sixth hue to the page. Taken literally from
 * the Clean HTML rather than rounded to the nearest token, because the two sit
 * adjacent in the tile row and the distinction is the whole point of the value.
 */
.iss-page.iss-customers .iss-cat-all { --iss-cat-color: var(--iss-navy); }
.iss-page.iss-customers .iss-cat-life-sciences { --iss-cat-color: var(--iss-blue); }
.iss-page.iss-customers .iss-cat-automotive { --iss-cat-color: var(--iss-red-deep); }
.iss-page.iss-customers .iss-cat-industrial { --iss-cat-color: var(--iss-amber); }
.iss-page.iss-customers .iss-cat-technology { --iss-cat-color: var(--iss-green); }
.iss-page.iss-customers .iss-cat-food { --iss-cat-color: #b96c16; }
/*
 * A customer whose category an editor has not set yet still has to render. It
 * falls back to the neutral rail rather than an empty `var()`, appears under All
 * Customers, and is filtered out by every category tile — visible and
 * uncategorised, rather than invisible.
 */
.iss-page.iss-customers .iss-cgal-card:not([class*="iss-cat-"]) { --iss-cat-color: var(--iss-line-strong); }

/* ---- 2b. Count strip ------------------------------------------------------
   The `aria-live="polite"` status V13 requires. It is the same node in both
   states — "29 selected customers · A–Z" and "12 customers · Life Sciences &
   Medical Technology" — so a screen reader hears one announcement per filter
   change rather than a removal and an insertion.
   -------------------------------------------------------------------------- */
.iss-page.iss-customers .iss-cgal-divider {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 16px;
	align-items: center;
	margin: 46px 0 28px;
}
/*
 * Direct child again, for the reason on `.iss-cfound-brand > span` below: a bare
 * `span` descendant rule in a page stylesheet captures `iss_brand_case()`'s
 * `.iss-brand` wrapper and wins on both specificity and source order. No product
 * name reaches this divider today — its two spans are the rules either side of
 * the count — but the two count strings are editable fields, and a rule that
 * paints a 1px line is not one you want to find applied to a word.
 */
.iss-page.iss-customers .iss-cgal-divider > span {
	height: 1px;
	background: var(--iss-line);
}
/*
 * `--iss-muted` and not the mockup's `--iss-muted-2`, and that is a measured
 * correction rather than a preference. This is 10px uppercase mono at .13em —
 * small text, so WCAG AA wants 4.5:1 — and `--iss-muted-2` (#7890a3) measures
 * 3.32:1 against the near-white top of this band. `--iss-muted` (#607286) is
 * the next step on the same ramp and measures 4.7-4.9:1 across the gradient.
 *
 * A colour the Clean HTML gives an element is approved design and normally
 * stands, but the site has fixed measured contrast failures on an approved page
 * before (the MiMedx snapshot's 3.57:1 Solutions intro) and this is the same
 * class of thing: nobody reviewing the mockup was reading a ratio. Flagged in
 * PROJECT_TRACKER.md rather than changed quietly.
 */
.iss-page.iss-customers .iss-cgal-divider small {
	color: var(--iss-muted);
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
}

/* ---- 2c. Customer cards ---------------------------------------------------
   A flex row rather than a grid, which is the mockup's own choice and the right
   one: the last row of a filtered view centres its remainder instead of leaving
   a ragged gap, and `flex-basis: calc((100% - 56px) / 5)` keeps all five columns
   identical whatever the filter left behind.

   V13: "Company names must wrap inside the card without narrowing the card or
   changing grid geometry" — which is what `flex: 0 1 <basis>` plus `min-width: 0`
   buys. A card is never allowed to size itself to "Modular Assembly Innovations".
   -------------------------------------------------------------------------- */
.iss-page.iss-customers .iss-cgal-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	animation: iss-cgal-in 230ms ease both;
}
@keyframes iss-cgal-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.iss-page.iss-customers .iss-cgal-card {
	position: relative;
	display: flex;
	flex: 0 1 calc((100% - 56px) / 5);
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	min-width: 0;
	min-height: 142px;
	padding: 21px 22px;
	border: 1px solid var(--iss-line-strong);
	border-radius: 12px;
	background: var(--iss-card);
	box-shadow: 0 4px 18px rgba(10, 41, 64, .035);
	text-decoration: none;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.iss-page.iss-customers .iss-cgal-card::before {
	content: "";
	position: absolute;
	inset: -1px auto -1px -1px;
	width: 3px;
	border-radius: 12px 0 0 12px;
	background: var(--iss-cat-color, var(--iss-line-strong));
}
/*
 * Only a card with a Project Snapshot lifts on hover, because only that card is
 * a link. V13: "Only customer cards with an approved Project Snapshot should
 * appear clickable" — so the affordance is on the anchor and nothing else, and
 * the other 21 cards are `<article>`s that do not respond to a pointer at all.
 */
.iss-page.iss-customers a.iss-cgal-card:hover,
.iss-page.iss-customers a.iss-cgal-card:focus-visible {
	border-color: #a9dcea;
	box-shadow: 0 14px 36px rgba(10, 41, 64, .1);
	transform: translateY(-3px);
}
.iss-page.iss-customers a.iss-cgal-card:focus-visible {
	outline: 3px solid var(--iss-cyan);
	outline-offset: 3px;
}

/* ---- 2c. The customer logo -------------------------------------------------
   NOT IN V19's CLEAN HTML. The mockup draws a name-only card; Danny asked on
   2026-09-13 for the customer's logo in every card, which is also the open note
   Glenn shipped the package with ("Still needs work such as Customer logo's").
   Recorded as a deliberate deviation in PROJECT_TRACKER.md.

   THE PLATE IS A FIXED BOX and the logo is contained inside it. That is the
   whole design problem here: these 41 logos are the production site's own
   assets and they range from 160x35 to 946x232 — a 27:1 spread in aspect ratio.
   Sized intrinsically they would set 41 different card heights and destroy the
   "equal sizing within its breakpoint" V19 asks for by name. So the plate's
   height is fixed, `object-fit: contain` letterboxes each logo inside it, and
   every name below starts on the same baseline.

   The logos are also a mixed bag tonally — some are dark, some mid-grey, a few
   are coloured. They are NOT greyscaled here (the customer directory's
   `.iss-logo-plate` does that and un-greyscales on hover). On a card that is
   mostly not a link there is no hover to restore the colour, so a permanent
   grey wash would just look like a rendering fault. They render as supplied.
   -------------------------------------------------------------------------- */
.iss-page.iss-customers .iss-cgal-plate {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: 34px;
	margin-bottom: 13px;
}
.iss-page.iss-customers .iss-cgal-plate img {
	max-width: 118px;
	max-height: 34px;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: left center;
}
/*
 * The monogram fallback, for a customer with no logo at all.
 *
 * NOTHING USES IT TODAY — ISS supplied the last five on 2026-09-15 (Excel
 * Industries, Great Lakes Assemblies, KYB Americas Corp, Reyes Automotive Group
 * and Tanvex, which is La Jolla Biologics renamed), and all 41 cards now carry a
 * real image. It stays because the logo is a featured image ISS can clear in
 * wp-admin at any time, and because a new customer arrives without one: a
 * monogram keeps the card's internal rhythm — name on the same baseline as its
 * neighbours — instead of leaving a 34px hole that reads as a broken image. It
 * borrows the customer directory's own monogram treatment so the two pages
 * agree; `--iss-cat-color` tints it, so the monogram still says which industry
 * the card belongs to.
 */
.iss-page.iss-customers .iss-cgal-plate.is-mono .iss-logo-mono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	min-width: 46px;
	padding: 0 10px;
	border: 1px solid color-mix(in srgb, var(--iss-cat-color, var(--iss-line-strong)) 34%, transparent);
	border-radius: 8px;
	background: color-mix(in srgb, var(--iss-cat-color, var(--iss-line-strong)) 8%, #fff);
	color: var(--iss-cat-color, var(--iss-muted));
	font-size: 12px;
	font-weight: 750;
	letter-spacing: .04em;
}

.iss-page.iss-customers .iss-cgal-name {
	color: var(--iss-ink);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.018em;
	line-height: 1.22;
}
.iss-page.iss-customers .iss-cgal-context {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 11px;
	color: var(--iss-muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}
.iss-page.iss-customers .iss-cgal-dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--iss-cat-color, var(--iss-line-strong));
}
.iss-page.iss-customers .iss-cgal-story {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	margin-top: auto;
	padding-top: 13px;
	color: var(--iss-blue-dark);
	font-size: 12px;
	font-weight: 600;
}
.iss-page.iss-customers .iss-cgal-story svg {
	width: 14px;
	height: 14px;
	margin-left: auto;
}
.iss-page.iss-customers .iss-cgal-story-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--iss-cyan);
}

/*
 * Filtering hides cards with `hidden`, not `display: none` in a class — the
 * attribute takes them out of the accessibility tree and the tab order in one
 * move, which matters here because eight of the cards are links. `[hidden]` is
 * `display: none` by UA default; this restates it because `.iss-cgal-card` sets
 * `display: flex` and a class-based display always beats the UA sheet.
 */
.iss-page.iss-customers .iss-cgal-card[hidden] { display: none; }

/* =============================================================================
   3. CUSTOMER PROCESS OVERVIEW  (#customer-processes)
   -----------------------------------------------------------------------------
   V19 Section 3, and the destination of the hero's secondary CTA. Six equal
   cards over the iApprove™ / QAD foundation band. The equal visual treatment is
   part of the approval, so there is no featured card.

   V19 REVERSED V13 HERE: V13 said "cards are informational and are not links",
   V19 says "Entire cards are linked and require visible hover and keyboard-focus
   states". So each card is now an <a> routing to its workflow area, carrying an
   "Explore Workflow Area" line and a focus ring. A card whose link field is
   empty still renders as an <article> — V13's treatment — so the older
   presentation is what an unset link degrades to, not a dead card.
   ============================================================================= */
.iss-page.iss-customers .iss-cproc {
	position: relative;
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-block: 110px 116px;
	border-top: 1px solid var(--iss-line);
	background:
		linear-gradient(180deg, rgba(237, 245, 250, .86), rgba(244, 248, 251, .96)),
		var(--iss-bg-tint);
}
/* The 124px blue-to-cyan tab centred on the band's own top border. */
.iss-page.iss-customers .iss-cproc::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	width: 124px;
	height: 4px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, var(--iss-blue), var(--iss-cyan));
}

.iss-page.iss-customers .iss-cproc-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, .76fr);
	gap: 66px;
	align-items: end;
	margin-bottom: 48px;
}
.iss-page.iss-customers .iss-cproc-head .iss-kicker { margin-bottom: 16px; }
.iss-page.iss-customers .iss-cproc-head h2 { max-width: 640px; }
/* The intro is a cyan-ruled column beside the heading, not a paragraph under it. */
.iss-page.iss-customers .iss-cproc-head > p {
	margin: 0;
	padding-left: 24px;
	border-left: 2px solid var(--iss-cyan);
	color: var(--iss-muted);
	font-size: 17px;
	line-height: 1.65;
}

.iss-page.iss-customers .iss-cproc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.iss-page.iss-customers .iss-cproc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	min-height: 258px;
	padding: 27px 28px 30px;
	overflow: hidden;
	border: 1px solid var(--iss-line-strong);
	border-radius: 14px;
	background: var(--iss-card);
	box-shadow: 0 8px 28px rgba(10, 41, 64, .055);
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.iss-page.iss-customers .iss-cproc-card::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	opacity: .78;
	background: linear-gradient(90deg, var(--iss-blue), var(--iss-cyan));
}
.iss-page.iss-customers .iss-cproc-card:hover {
	border-color: #a9dcea;
	box-shadow: 0 18px 42px rgba(10, 41, 64, .105);
	transform: translateY(-4px);
}
/*
 * V19 §3: "Entire cards are linked and require visible hover and keyboard-focus
 * states." The hover lift above already existed for the card as a surface; what
 * V19 adds is that the card is now an <a>, so it also needs a focus ring — and
 * the ring goes on the card, not on the label inside it, because the card is
 * what takes focus. `:focus-visible` rather than `:focus` so a mouse click does
 * not leave a ring behind.
 */
.iss-page.iss-customers a.iss-cproc-card:focus-visible {
	outline: 3px solid var(--iss-cyan);
	outline-offset: 3px;
}
/*
 * The "Explore Workflow Area" line. `margin-top: auto` pins it to the bottom of
 * the card regardless of how many lines the description above runs to, so the
 * six links sit level across the row instead of stepping with the copy. It is a
 * <span>, not a nested <a> — the whole card is the link, and an <a> inside an
 * <a> is invalid markup that browsers silently unnest.
 */
.iss-page.iss-customers .iss-cproc-link {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding-top: 20px;
	color: var(--iss-blue-dark);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -.005em;
}
.iss-page.iss-customers .iss-cproc-link svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 180ms ease;
}
.iss-page.iss-customers a.iss-cproc-card:hover .iss-cproc-link svg,
.iss-page.iss-customers a.iss-cproc-card:focus-visible .iss-cproc-link svg {
	transform: translateX(4px);
}

.iss-page.iss-customers .iss-cproc-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 24px;
}
.iss-page.iss-customers .iss-cproc-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 1px solid var(--iss-navy-3);
	border-radius: 10px;
	background: var(--iss-navy);
	box-shadow: 0 7px 20px rgba(10, 41, 64, .14);
	color: var(--iss-sky);
}
.iss-page.iss-customers .iss-cproc-icon svg { width: 24px; height: 24px; }
/* Same measured correction as the count line above — 11px mono at 3.32:1. */
.iss-page.iss-customers .iss-cproc-num {
	padding-top: 4px;
	color: var(--iss-muted);
	font-family: var(--iss-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
}
.iss-page.iss-customers .iss-cproc-card p {
	margin: 14px 0 0;
	color: var(--iss-muted);
	font-size: 15px;
	line-height: 1.65;
}

/* ---- 3a. The iApprove™ / QAD foundation band ------------------------------ */
.iss-page.iss-customers .iss-cfound {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(76px, .5fr) minmax(280px, 1.18fr) auto;
	gap: 25px;
	align-items: center;
	min-height: 110px;
	margin-top: 24px;
	padding: 23px 28px;
	overflow: hidden;
	border: 1px solid var(--iss-navy-3);
	border-radius: 15px;
	background:
		linear-gradient(102deg, rgba(11, 54, 84, .72), rgba(7, 26, 43, .2)),
		var(--iss-navy-2);
	box-shadow: 0 18px 52px rgba(7, 26, 43, .17);
	color: #fff;
}
.iss-page.iss-customers .iss-cfound::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--iss-cyan);
}
.iss-page.iss-customers .iss-cfound-brand,
.iss-page.iss-customers .iss-cfound-qad {
	display: flex;
	flex-direction: column;
}
/*
 * DIRECT CHILD, and that is load-bearing rather than tidiness.
 *
 * The mockup's own rule is `.foundation-brand span`, and it is safe there
 * because its markup has one span per column. Ours does not: the platform name
 * goes through `iss_brand_case()`, which wraps a product name in
 * `<span class="iss-brand">` so an uppercased label can keep the lowercase
 * leading "i" (§4). A descendant selector reaches straight into that wrapper,
 * so the 24px white "iApprove™" was rendering as a 9.5px uppercase mono
 * "IAPPROVE™" — this rule out-specifies §4's own `.iss-brand` reset AND wins on
 * source order, since this file loads at priority 41 against iss-global's 40.
 *
 * Worth remembering beyond this band: any bare `span` descendant rule in a
 * page stylesheet will capture `.iss-brand`, and the symptom is a shouting
 * product name rather than a broken layout — which is why it survived a
 * desktop screenshot (a cookie banner happened to sit over it) and showed up
 * in the phone capture.
 */
.iss-page.iss-customers .iss-cfound-brand > span,
.iss-page.iss-customers .iss-cfound-qad > span {
	color: rgba(255, 255, 255, .62);
	font-family: var(--iss-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.iss-page.iss-customers .iss-cfound-brand strong {
	margin-top: 5px;
	color: #fff;
	font-size: 24px;
	letter-spacing: -.03em;
}
.iss-page.iss-customers .iss-cfound-qad {
	align-items: center;
	min-width: 104px;
	padding-left: 25px;
	border-left: 1px solid rgba(143, 226, 245, .23);
}
.iss-page.iss-customers .iss-cfound-qad strong {
	margin-top: 4px;
	color: var(--iss-sky);
	font-size: 24px;
	letter-spacing: -.03em;
}
/* The connector: a hairline, a cyan node, a hairline. */
.iss-page.iss-customers .iss-cfound-line {
	display: flex;
	align-items: center;
	min-width: 76px;
}
.iss-page.iss-customers .iss-cfound-line span {
	width: 50%;
	height: 1px;
	background: rgba(143, 226, 245, .34);
}
.iss-page.iss-customers .iss-cfound-line i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--iss-cyan);
	box-shadow: 0 0 0 5px rgba(57, 195, 230, .12);
}
.iss-page.iss-customers .iss-cfound > p {
	margin: 0;
	color: rgba(255, 255, 255, .87);
	font-size: 15px;
	line-height: 1.55;
}

/* =============================================================================
   4. PROJECT SNAPSHOTS  (#project-snapshots)
   -----------------------------------------------------------------------------
   V13 Section 4 — the customer-page HUB treatment: two featured stories over
   four compact ones. The notes carry a warning worth repeating here, because it
   is the thing this section could quietly break: "This hub treatment must not
   replace or redefine the standardized single-story Customer Proof component
   used on individual Solution pages." Nothing below touches `.iss-proof-*`; the
   two components have no selector in common.
   ============================================================================= */
.iss-page.iss-customers .iss-cstory {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-block: 112px 118px;
	border-top: 1px solid var(--iss-line);
	background: #fff;
}

.iss-page.iss-customers .iss-cstory-head {
	max-width: 850px;
	margin: 0 auto 48px;
	text-align: center;
}
.iss-page.iss-customers .iss-cstory-head .iss-kicker { margin-bottom: 18px; }
.iss-page.iss-customers .iss-cstory-head > p {
	max-width: 730px;
	margin: 23px auto 0;
	color: var(--iss-muted);
	font-size: 17px;
	line-height: 1.65;
}

.iss-page.iss-customers .iss-cstory-featured-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.iss-page.iss-customers .iss-cstory-compact-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: 18px;
}

.iss-page.iss-customers .iss-cstory-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 16px;
	text-decoration: none;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.iss-page.iss-customers .iss-cstory-card:hover,
.iss-page.iss-customers .iss-cstory-card:focus-visible { transform: translateY(-4px); }
.iss-page.iss-customers .iss-cstory-card:focus-visible {
	outline: 3px solid var(--iss-cyan);
	outline-offset: 3px;
}

.iss-page.iss-customers .iss-cstory-featured {
	min-height: 355px;
	padding: 31px 33px 32px;
	border: 1px solid var(--iss-navy-3);
	box-shadow: 0 20px 54px rgba(7, 26, 43, .17);
	color: #fff;
}
/* Two decorative rings bleeding off opposite corners. */
.iss-page.iss-customers .iss-cstory-featured::before,
.iss-page.iss-customers .iss-cstory-featured::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(143, 226, 245, .13);
	border-radius: 50%;
	pointer-events: none;
}
.iss-page.iss-customers .iss-cstory-featured::before {
	top: -138px;
	right: -122px;
	width: 280px;
	height: 280px;
}
.iss-page.iss-customers .iss-cstory-featured::after {
	bottom: -170px;
	left: -134px;
	width: 260px;
	height: 260px;
}
.iss-page.iss-customers .iss-cstory-navy {
	background: linear-gradient(135deg, var(--iss-navy-3), var(--iss-navy-2));
}
.iss-page.iss-customers .iss-cstory-blue {
	border-color: var(--iss-blue-dark);
	background: linear-gradient(135deg, var(--iss-blue-dark), var(--iss-blue));
}
.iss-page.iss-customers .iss-cstory-blue::before,
.iss-page.iss-customers .iss-cstory-blue::after { border-color: rgba(255, 255, 255, .15); }

.iss-page.iss-customers .iss-cstory-compact {
	min-height: 290px;
	padding: 25px 24px 26px;
	border: 1px solid var(--iss-line-strong);
	background: linear-gradient(180deg, #fff, var(--iss-bg));
	box-shadow: 0 8px 26px rgba(10, 41, 64, .055);
}
.iss-page.iss-customers .iss-cstory-compact:hover,
.iss-page.iss-customers .iss-cstory-compact:focus-visible {
	border-color: #a9dcea;
	box-shadow: 0 17px 38px rgba(10, 41, 64, .11);
}

.iss-page.iss-customers .iss-cstory-kicker {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.iss-page.iss-customers .iss-cstory-kicker > span {
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
}
.iss-page.iss-customers .iss-cstory-featured .iss-cstory-kicker > span { color: var(--iss-sky); }
.iss-page.iss-customers .iss-cstory-compact .iss-cstory-kicker > span { color: var(--iss-blue); }
.iss-page.iss-customers .iss-cstory-kicker svg {
	width: 20px;
	height: 20px;
	transition: transform 180ms ease;
}
.iss-page.iss-customers .iss-cstory-card:hover .iss-cstory-kicker svg,
.iss-page.iss-customers .iss-cstory-card:focus-visible .iss-cstory-kicker svg { transform: translateX(4px); }

.iss-page.iss-customers .iss-cstory-copy {
	position: relative;
	z-index: 1;
	margin-top: 34px;
}
.iss-page.iss-customers .iss-cstory-customer {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .015em;
}
.iss-page.iss-customers .iss-cstory-navy .iss-cstory-customer { color: var(--iss-cyan); }
.iss-page.iss-customers .iss-cstory-blue .iss-cstory-customer { color: #fff; }
.iss-page.iss-customers .iss-cstory-compact .iss-cstory-customer { color: var(--iss-blue-dark); }

.iss-page.iss-customers .iss-cstory-card h3 {
	margin: 0;
	font-weight: 700;
	letter-spacing: -.025em;
}
.iss-page.iss-customers .iss-cstory-featured h3 {
	max-width: 500px;
	color: #fff;
	font-size: clamp(24px, 2.5vw, 32px);
	line-height: 1.12;
}
.iss-page.iss-customers .iss-cstory-compact h3 {
	color: var(--iss-ink);
	font-size: 19px;
	line-height: 1.22;
}
.iss-page.iss-customers .iss-cstory-desc {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 1.62;
}
.iss-page.iss-customers .iss-cstory-featured .iss-cstory-desc {
	max-width: 510px;
	color: rgba(255, 255, 255, .84);
	font-size: 16px;
}
.iss-page.iss-customers .iss-cstory-compact .iss-cstory-desc { color: var(--iss-muted); }

.iss-page.iss-customers .iss-cstory-solution {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	margin-top: auto;
	padding: 7px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}
.iss-page.iss-customers .iss-cstory-featured .iss-cstory-solution {
	border: 1px solid rgba(255, 255, 255, .2);
	background: rgba(255, 255, 255, .1);
	color: #fff;
}
.iss-page.iss-customers .iss-cstory-compact .iss-cstory-solution {
	border: 1px solid var(--iss-line-strong);
	background: var(--iss-bg-tint);
	color: var(--iss-blue-dark);
}

.iss-page.iss-customers .iss-cstory-all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: fit-content;
	margin: 38px auto 0;
	color: var(--iss-blue-dark);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}
.iss-page.iss-customers .iss-cstory-all svg {
	width: 18px;
	height: 18px;
	transition: transform 180ms ease;
}
.iss-page.iss-customers .iss-cstory-all:hover svg,
.iss-page.iss-customers .iss-cstory-all:focus-visible svg { transform: translateX(4px); }

/*
 * Shared arrow geometry for every inline chevron in the content area. The
 * mockup's own `.button svg, .story-label svg` rule, kept as one declaration so
 * a stroke weight change lands everywhere at once.
 */
.iss-page.iss-customers .iss-cgal-story svg,
.iss-page.iss-customers .iss-cstory-kicker svg,
.iss-page.iss-customers .iss-cstory-all svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* =============================================================================
   5. CUSTOMER VOICE  (#customer-voice)
   -----------------------------------------------------------------------------
   V19 Section 5. New to the page: V18 introduced it as "a stronger editorial
   proof section with differentiated surfaces, monograms, proof-point numbering
   and improved visual hierarchy", and V19's single change over V18 is that all
   three statements are italicised and carry visible quotation marks.

   DIFFERENTIATED ON PURPOSE. Three quote cards that are deliberately NOT equal:
   card 1 is the featured one — wider column, navy→blue gradient, larger quote,
   inverted type — and cards 2 and 3 sit on light surfaces, card 3 with a faint
   cyan wash. That asymmetry is the section's whole point, so unlike the gallery
   and the process grid there is no equal-sizing rule to hold here.

   IT IS NOT THE SHARED CUSTOMER PROOF COMPONENT. `.iss-proof-*` is the
   single-story treatment the Solution pages use, and V19 classifies this as
   page-specific — so this has its own `.iss-cvoice-*` namespace and shares no
   selector with it, the same separation `.iss-cstory-*` keeps.

   THE QUOTATION MARKS ARE DRAWN BY THE TEMPLATE, not by CSS `::before`/`quotes`.
   They are part of the sentence a screen reader should read, and generated
   content is announced inconsistently across screen readers — so the marks are
   real text in the <p> and the big decorative “ is the separate, `aria-hidden`
   `.iss-cvoice-mark`.
   ============================================================================= */
.iss-page.iss-customers .iss-cvoice {
	position: relative;
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-block: 104px 110px;
	overflow: hidden;
	border-top: 1px solid var(--iss-navy-3);
	background:
		radial-gradient(circle at 88% 12%, rgba(57, 195, 230, .16), transparent 30%),
		linear-gradient(135deg, #071a2b 0%, #0b3654 100%);
}
/*
 * The outlined ring in the top-right. Decorative, `overflow: hidden` on the
 * section clips it, and it is drawn on the section itself rather than as an
 * element so the markup carries nothing that exists only to be looked at.
 */
.iss-page.iss-customers .iss-cvoice::before {
	content: "";
	position: absolute;
	top: -250px;
	right: -180px;
	width: 430px;
	height: 430px;
	border: 1px solid rgba(143, 226, 245, .12);
	border-radius: 50%;
}

.iss-page.iss-customers .iss-cvoice-head {
	max-width: 780px;
	margin-bottom: 44px;
}
.iss-page.iss-customers .iss-cvoice-head h2 {
	margin: 0;
	color: #fff;
}
.iss-page.iss-customers .iss-cvoice-head > p {
	max-width: 720px;
	margin: 22px 0 0;
	color: rgba(255, 255, 255, .76);
	font-size: 17px;
	line-height: 1.65;
}

.iss-page.iss-customers .iss-cvoice-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.18fr .91fr .91fr;
	gap: 18px;
}

.iss-page.iss-customers .iss-cvoice-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 290px;
	margin: 0;
	padding: 34px 32px 30px;
	overflow: hidden;
	border: 1px solid rgba(143, 226, 245, .35);
	border-radius: 15px;
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 10px 30px rgba(10, 41, 64, .067);
}
/* The 4px blue→cyan rule across the top of every card. */
.iss-page.iss-customers .iss-cvoice-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(90deg, var(--iss-blue), var(--iss-cyan));
}
/*
 * Card 3's faint cyan wash. Keyed on `:last-child` rather than the mockup's
 * `:nth-child(3)` because this grid is generated from three ACF slots and an
 * editor clearing the middle quote would otherwise move the wash onto nothing —
 * `:last-child` puts it on whichever card actually ends the row.
 */
.iss-page.iss-customers .iss-cvoice-card:last-child:not(.iss-cvoice-featured) {
	background: linear-gradient(150deg, #eaf8fc, #fff 68%);
}

/*
 * THE FEATURED CARD'S GRADIENT IS DEEPER THAN THE MOCKUP'S, and it is the one
 * value on this page changed for a measured reason rather than a visual one.
 *
 * V19 draws `linear-gradient(145deg, var(--iss-blue-dark), var(--iss-blue))`.
 * Against its light end (`--iss-blue`, #0c73c9) three of the four text colours
 * the mockup puts on this card fail WCAG AA at their own size: the attribution
 * name in `--iss-sky` measures 3.33:1, the role line in 82% white 3.80:1, and
 * the context label in `--iss-cyan` 2.35:1. All three are body-size text, so
 * 4.5:1 applies to each; only the 22px quote itself (4.87:1) passes.
 *
 * So the gradient runs navy to a blue-dark pulled 10% toward navy, which lifts
 * every one of them clear — sky 4.89:1, 82% white 5.37:1, white 7.14:1 — while
 * staying a navy-to-blue gradient and staying inside the site's own tokens
 * rather than inventing a hex. The context label also moves cyan -> sky, which
 * no gradient in this family can rescue (cyan tops out at 3.16:1 on anything
 * still recognisably blue).
 *
 * Same call the page already made once: two 10-11px mono labels measured
 * 3.32:1 against `--iss-muted-2` on the V13 build and were moved to
 * `--iss-muted`. Flagged in PROJECT_TRACKER.md rather than changed quietly, and
 * `tests/customers.spec.js` measures all four so a revert to the mockup's own
 * values fails there rather than in an accessibility audit.
 */
.iss-page.iss-customers .iss-cvoice-featured {
	border-color: rgba(143, 226, 245, .42);
	background: linear-gradient(145deg, var(--iss-navy), color-mix(in srgb, var(--iss-blue-dark) 90%, var(--iss-navy)));
	color: #fff;
}

.iss-page.iss-customers .iss-cvoice-num {
	position: absolute;
	top: 35px;
	right: 31px;
	color: rgba(11, 95, 165, .16);
	font-family: var(--iss-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
}
.iss-page.iss-customers .iss-cvoice-featured .iss-cvoice-num { color: rgba(255, 255, 255, .35); }

.iss-page.iss-customers .iss-cvoice-mark {
	position: absolute;
	top: 68px;
	right: 24px;
	color: var(--iss-cyan);
	opacity: .14;
	font-family: Georgia, serif;
	font-size: 72px;
	line-height: 1;
}

.iss-page.iss-customers .iss-cvoice-theme {
	position: relative;
	z-index: 1;
	color: var(--iss-blue);
	font-family: var(--iss-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
/* Sky, not the mockup's cyan — see the contrast note on the gradient above. */
.iss-page.iss-customers .iss-cvoice-featured .iss-cvoice-theme { color: var(--iss-sky); }

/*
 * The quotation. `> p` rather than a bare `p` so the rule cannot reach into the
 * attribution block below it — the same trap the divider's span rule hit on this
 * page before (see the note in §2b).
 */
.iss-page.iss-customers .iss-cvoice-card > p {
	position: relative;
	z-index: 1;
	margin: 42px 0 0;
	color: var(--iss-ink);
	font-size: 20px;
	font-style: italic;
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.45;
}
.iss-page.iss-customers .iss-cvoice-featured > p {
	color: #fff;
	font-size: 22px;
	line-height: 1.42;
}

.iss-page.iss-customers .iss-cvoice-card footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 13px;
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--iss-line);
}
.iss-page.iss-customers .iss-cvoice-featured footer { border-color: rgba(143, 226, 245, .2); }

.iss-page.iss-customers .iss-cvoice-avatar {
	display: flex;
	flex: 0 0 43px;
	align-items: center;
	justify-content: center;
	height: 43px;
	border: 1px solid var(--iss-line-strong);
	border-radius: 50%;
	background: var(--iss-bg-tint);
	color: var(--iss-blue-dark);
	font-size: 10px;
	font-weight: 750;
	letter-spacing: .04em;
}
.iss-page.iss-customers .iss-cvoice-featured .iss-cvoice-avatar {
	border-color: rgba(255, 255, 255, .24);
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

.iss-page.iss-customers .iss-cvoice-attr {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.iss-page.iss-customers .iss-cvoice-attr strong {
	color: var(--iss-ink);
	font-size: 15px;
}
.iss-page.iss-customers .iss-cvoice-attr span {
	color: var(--iss-muted);
	font-size: 13px;
}
/*
 * The featured card's attribution inverts. `--iss-sky` on the name and .82 white
 * on the role are the mockup's own values, and both clear 4.5:1 on the blue
 * gradient beneath them — measured, because this is the one place on the page
 * where body-weight type sits on a mid-blue rather than on navy or on white.
 */
.iss-page.iss-customers .iss-cvoice-featured .iss-cvoice-attr strong { color: var(--iss-sky); }
.iss-page.iss-customers .iss-cvoice-featured .iss-cvoice-attr span { color: rgba(255, 255, 255, .82); }

/* =============================================================================
   6. FINAL CTA
   -----------------------------------------------------------------------------
   V13 classifies this one as "B — existing shared component with page-specific
   content variation", and says to reuse the shared blue/blue-gradient two-column
   band "without structural or color variation". That component already exists as
   `.iss-cta-band .iss-cta-band-split` (§15c + §25j) with the exact parts the
   notes list: kicker, headline, body, theme line on the left; the actions on the
   right. So this page renders that markup and declares no colour, no gradient,
   no radius and no bleed of its own — §15c's site-wide full-bleed and
   run-into-the-footer rules apply here untouched.

   ONE divergence, and it is the notes' own wording: "Right: vertically arranged
   primary and secondary actions", and at tablet/mobile "stack the actions below
   the copy". The shared band lays its `.iss-btn-row` out horizontally
   (`flex-wrap: nowrap`, §25j), so the stack is restored here — scoped to this
   page, so /solutions/ and /platform/ keep the row they shipped with. Full-width
   buttons inside a 250px column, which is what makes a two-item stack read as a
   deliberate pair rather than two ragged buttons.
   ============================================================================= */
.iss-page.iss-customers .iss-cta-band-split { grid-template-columns: minmax(0, 1fr) minmax(230px, .34fr); }
.iss-page.iss-customers .iss-cta-band-split .iss-btn-row {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 13px;
	justify-self: end;
	width: min(100%, 250px);
}
.iss-page.iss-customers .iss-cta-band-split .iss-btn-row .iss-btn {
	width: 100%;
	min-height: 52px;
}

/* =============================================================================
   7. RESPONSIVE
   -----------------------------------------------------------------------------
   The mockup's own three breakpoints (1040 / 820 / 560), kept at those numbers
   rather than re-cut to the site's, because the components they reflow are
   page-specific and their column counts are part of what V13 approves:
   "Desktop: multi-column cards with normalized dimensions. Tablet: two-column
   card layout. Mobile: one-column cards and vertically stacked filter tiles."

   The hero is NOT in here — it reflows on §22's shared breakpoints with every
   other hero on the site, which is the point of putting it on the shared shell.
   ============================================================================= */
@media (max-width: 1040px) {
	.iss-page.iss-customers .iss-cgal-card { flex-basis: calc((100% - 42px) / 4); }
	.iss-page.iss-customers .iss-cproc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.iss-page.iss-customers .iss-cfound { grid-template-columns: auto minmax(55px, .35fr) minmax(230px, 1fr) auto; }
	.iss-page.iss-customers .iss-cstory-compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	/*
	 * Customer Voice goes to two columns with the featured card across the top —
	 * V19's own tablet shape. The featured card keeps its differentiation by
	 * spanning the row rather than by being wider than its neighbours, which is
	 * what a 1.18fr column can no longer buy at this width.
	 */
	.iss-page.iss-customers .iss-cvoice-grid { grid-template-columns: 1fr 1fr; }
	.iss-page.iss-customers .iss-cvoice-featured {
		grid-column: 1 / -1;
		min-height: 270px;
	}
	.iss-page.iss-customers .iss-cgal-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* All Customers spans the pair, so the four categories read as one set below it. */
	.iss-page.iss-customers .iss-cgal-tile.iss-cat-all { grid-column: 1 / -1; }
	.iss-page.iss-customers .iss-cgal-card { flex-basis: calc((100% - 14px) / 2); }
	/*
	 * The mockup drops its theme-line dots here. Nothing to do: they are already
	 * gone below 1240px — see the note on that threshold in §1. Left as a
	 * pointer rather than a rule, so a reader comparing this file against the
	 * mockup's own 820px block does not go looking for a missing declaration.
	 */
	.iss-page.iss-customers .iss-cproc-head {
		grid-template-columns: 1fr;
		gap: 26px;
		align-items: start;
	}
	.iss-page.iss-customers .iss-cproc-head > p { max-width: 690px; }
	/*
	 * The foundation band folds to "brand + body" beside "QAD", with the
	 * connector dropped — a hairline-node-hairline connector between two things
	 * that are no longer side by side is decoration pointing nowhere.
	 */
	.iss-page.iss-customers .iss-cfound {
		grid-template-columns: 1fr auto;
		gap: 22px;
	}
	.iss-page.iss-customers .iss-cfound-line { display: none; }
	.iss-page.iss-customers .iss-cfound > p { grid-column: 1; grid-row: 2; }
	.iss-page.iss-customers .iss-cfound-qad { grid-column: 2; grid-row: 1 / span 2; }
	.iss-page.iss-customers .iss-cstory-featured-grid { grid-template-columns: 1fr; }
	.iss-page.iss-customers .iss-cta-band-split { grid-template-columns: 1fr; }
	.iss-page.iss-customers .iss-cta-band-split .iss-btn-row {
		justify-self: start;
		width: 250px;
	}
}

@media (max-width: 560px) {
	/* Customer Voice stacks; the featured card stops spanning and is simply first. */
	.iss-page.iss-customers .iss-cvoice { padding-block: 78px 84px; }
	.iss-page.iss-customers .iss-cvoice-head > p { font-size: 16px; }
	.iss-page.iss-customers .iss-cvoice-grid { grid-template-columns: 1fr; }
	.iss-page.iss-customers .iss-cvoice-featured {
		grid-column: auto;
		min-height: 285px;
	}
	.iss-page.iss-customers .iss-cvoice-card {
		min-height: 168px;
		padding: 26px 24px;
	}
	/*
	 * THE ORBIT IS RE-CUT FOR THE PHONE, and it has to be — the mockup's own
	 * phone values collide here, for a structural reason rather than a styling
	 * one.
	 *
	 * V13's panel at 390px is 350px wide. This card's field is 272px: The7 wraps
	 * every template in `.wf-wrap`'s 50px side padding, and the site's hero card
	 * adds 23px of its own on each side. So the same six `nowrap` labels have
	 * 78px less room to sit in, and "Workflows" and "Operations" ended up drawn
	 * OVER the blue QAD circle — measured as -4px of clearance at 390px, -18px at
	 * 360px and below. A rectangle-intersection check understates it and a
	 * screenshot at one width misses it entirely, so this is measured as the real
	 * distance from the circle's EDGE to the nearest corner of each node.
	 *
	 * Four changes, and they buy 19px of clearance at 390px and 4px at 320px,
	 * with no node spilling the field and none touching another:
	 *
	 *   1. The card's padding comes down to 14px, which is 18px of field back.
	 *   2. The field goes TALLER THAN WIDE — 1/1.16. That is the mockup's own
	 *      phone shape (`aspect-ratio: 1/1.08` with `min-height: 385px` gives it
	 *      350x385), and a taller field separates the six nodes vertically
	 *      without needing horizontal room the card does not have.
	 *   3. The side nodes go flush to the field's edges and out to the poles, so
	 *      the widest labels sit where the circle is narrowest.
	 *   4. The core's floor drops to 104px, and the rings re-proportion to the
	 *      taller field so they stay concentric with it rather than squashing.
	 *
	 * The node type is NOT reduced past V13's 11px floor to buy this. An
	 * 11px decorative label on a phone is already at the readable limit and
	 * shrinking it to make a diagram fit is the trade the site's own rules say to
	 * take last, not first.
	 */
	.iss-page.iss-customers .iss-hero-wf { padding: 14px; }
	.iss-page.iss-customers .iss-corbit { aspect-ratio: 1 / 1.16; }
	.iss-page.iss-customers .iss-corbit-core {
		width: clamp(104px, 35cqw, 152px);
		height: clamp(104px, 35cqw, 152px);
	}
	.iss-page.iss-customers .iss-corbit-ring-outer { width: 84%; height: 66%; }
	.iss-page.iss-customers .iss-corbit-ring-inner { width: 58%; height: 45%; }
	.iss-page.iss-customers .iss-corbit-node { padding: 8px 9px; }
	.iss-page.iss-customers .iss-corbit-node-1 { top: 6%; }
	.iss-page.iss-customers .iss-corbit-node-4 { bottom: 5%; }
	.iss-page.iss-customers .iss-corbit-node-2 { top: 28%; right: 0; }
	.iss-page.iss-customers .iss-corbit-node-3 { top: 70%; right: 0; }
	.iss-page.iss-customers .iss-corbit-node-5 { top: 70%; left: 0; }
	.iss-page.iss-customers .iss-corbit-node-6 { top: 28%; left: 0; }

	/*
	 * The hero's buttons go full width and stack, which is V13's own phone
	 * treatment (`.hero-actions { align-items: stretch; flex-direction: column }`
	 * plus `.button { width: 100% }`). The shared `.iss-btn-row` wraps instead,
	 * which left a 140px pill sitting above a 282px one — two stacked buttons at
	 * two different widths, which is the ragged look rather than a pair. Column
	 * plus stretch, so the buttons fill the measure and nothing is declared about
	 * the pill itself.
	 */
	.iss-page.iss-customers .iss-detail-hero .iss-btn-row {
		flex-direction: column;
		align-items: stretch;
	}

	.iss-page.iss-customers .iss-cgal { padding-block: 78px 88px; }
	/*
	 * Centred section heads go left-aligned on a phone. A centred 17px paragraph
	 * over four or five lines in a 350px column has a ragged left edge on every
	 * line, which is harder to read than the same copy set flush.
	 */
	.iss-page.iss-customers .iss-cgal-head,
	.iss-page.iss-customers .iss-cstory-head { text-align: left; }
	.iss-page.iss-customers .iss-cgal-head .iss-cgal-copy,
	.iss-page.iss-customers .iss-cstory-head > p { font-size: 16px; }
	.iss-page.iss-customers .iss-cgal-note { align-items: flex-start; }
	.iss-page.iss-customers .iss-cgal-note::before {
		flex: 0 0 auto;
		margin-top: 6px;
	}
	.iss-page.iss-customers .iss-cgal-filters {
		grid-template-columns: 1fr;
		margin-top: 32px;
	}
	.iss-page.iss-customers .iss-cgal-tile.iss-cat-all { grid-column: auto; }
	.iss-page.iss-customers .iss-cgal-tile { min-height: 88px; }
	.iss-page.iss-customers .iss-cgal-divider { margin-top: 36px; }
	.iss-page.iss-customers .iss-cgal-card {
		flex-basis: 100%;
		min-height: 126px;
	}
	/* A story card keeps the taller box — it has a third row of content. */
	.iss-page.iss-customers a.iss-cgal-card { min-height: 142px; }
	.iss-page.iss-customers .iss-cproc { padding-block: 82px 88px; }
	.iss-page.iss-customers .iss-cproc-head > p {
		padding-left: 18px;
		font-size: 16px;
	}
	.iss-page.iss-customers .iss-cproc-grid { grid-template-columns: 1fr; }
	.iss-page.iss-customers .iss-cproc-card {
		min-height: auto;
		padding: 24px 24px 28px;
	}
	.iss-page.iss-customers .iss-cfound {
		grid-template-columns: 1fr;
		padding: 25px 24px;
	}
	.iss-page.iss-customers .iss-cfound > p {
		grid-column: 1;
		grid-row: auto;
	}
	.iss-page.iss-customers .iss-cfound-qad {
		align-items: flex-start;
		grid-column: 1;
		grid-row: auto;
		padding-top: 18px;
		padding-left: 0;
		border-top: 1px solid rgba(143, 226, 245, .23);
		border-left: 0;
	}
	.iss-page.iss-customers .iss-cstory { padding-block: 82px 88px; }
	.iss-page.iss-customers .iss-cstory-featured {
		min-height: 330px;
		padding: 27px 25px 28px;
	}
	.iss-page.iss-customers .iss-cstory-compact-grid { grid-template-columns: 1fr; }
	.iss-page.iss-customers .iss-cstory-compact { min-height: 270px; }
	.iss-page.iss-customers .iss-cta-band-split .iss-btn-row {
		justify-self: stretch;
		width: 100%;
	}
}