/*
 * About ISS Group (/about-iss-group/) — page assets, V2.
 *
 * Enqueued for template-about.php only (iss_enqueue_about_assets() in
 * functions.php), against `iss-global` so it lands after it and a
 * `.iss-page.iss-about .x` rule here beats a `.iss-page .x` rule there on
 * source order as well as specificity.
 *
 * WHAT THIS FILE IS, AS OF 2026-09-15
 * -----------------------------------
 * A port of the ISSG_About_ISS_Group_Developer_Handoff_V2 Clean HTML
 * (docs/handoffs/02_PROCESSING/). It REPLACED the previous file wholesale: the
 * page that used to live here — dated milestone rail, spec/partner/leadership
 * cards, metrics dashboard, head office — is not what V2 draws, so keeping its
 * rules around would have left ~500 lines nothing renders.
 *
 * Values are the V2 Clean HTML's own, lifted rather than approximated. Its
 * embedded stylesheet declares the same --iss-* token NAMES this site does and
 * every one of them resolves to the identical hex (checked against §1 of
 * iss-global.css, all twenty), so the colours here are the mockup's, not a
 * nearest match rounded to the site palette.
 *
 * FOUR PLACES THIS DELIBERATELY DIVERGES FROM THE CLEAN HTML, and why. Each is
 * called out again at its own rule.
 *
 *   1. The HERO is `.iss-detail-hero` + `.iss-ab-hero`, not a page-local
 *      `.hero`. See §1.
 *   2. The QAD-ROOTS proof runs FULL WIDTH under the story grid, where the
 *      mockup's own markup confines it to the .9fr column. See §2b.
 *   3. The FINAL CTA is the shared `.iss-cta-band` + `.iss-cta-band-split`.
 *      Nothing for it is in this file at all. See the note at the foot.
 *   4. Section padding stays the site's `clamp(48px, 7vw, 88px)` rather than
 *      the mockup's flat 100px/82px, so this page keeps the same vertical
 *      rhythm as every other section on the site. 88px against 100px at
 *      desktop; the mockup's own value is the only thing given up.
 *
 * The COLUMN is the site's 1120px `--iss-max`, not the mockup's 1180px. That
 * gap is site-wide and pre-existing — every package is drawn against a wider
 * column than the built site has — and matching it on one page would put this
 * page's left edge 30px off every other page's.
 *
 * No JavaScript counterpart: V2's Developer Notes say "No page-specific
 * JavaScript interactions are required in V2", and the reveals come from the
 * globally-enqueued js/iss-interactions.js.
 */

/* ============================================================
   §1  HERO — dark two-column company hero
   ------------------------------------------------------------
   DIVERGENCE 1. The section is `.iss-detail-hero`, the site's shared dark hero
   shell, with `.iss-ab-hero` on top for V2's own layout. The mockup's `.hero`
   is the same treatment under another name — a 145deg navy-2 -> navy 61% ->
   navy-3 ramp under two cyan/blue radials — and taking the shared class buys
   three things a page-local copy would have to re-solve: the intrinsic
   full-bleed (§3/§7 of iss-global.css), the `.iss-detail-hero + .iss-section`
   seam guard (§3, and tests/hero-section-seam.spec.js reads exactly that
   selector), and the inverted type colours in §7a.

   The radial ORIGINS differ by a few percent — the mockup puts them at 78%/18%
   and 12%/92%, §7 at 77%/26% and 16%/88%. Keeping §7's is the deliberate call,
   stated out loud per CLAUDE.md: the footer's gradient is asserted to be the
   same paint as the hero's (tests/footer.spec.js), so a page that re-aims its
   own hero radials is a page whose footer no longer matches its hero.

   V2's Developer Notes: "Preserve the approved dark two-column Company-page
   Hero; this is not the individual Workflow Area Hero." Nothing here docks a
   section nav, renders a QAD stamp or builds a workflow infographic, which is
   what that sentence is about.
   ============================================================ */

/*
 * 1.08fr/.92fr, where the mockup draws 1.03fr/.97fr — a deliberate deviation
 * under CLAUDE.md's "hero columns carry similar visual weight", stated here as
 * that rule asks.
 *
 * On the mockup's ratio the copy column runs 8.1% taller than the card at
 * 1280-1512px and 11.3% taller at 1100px, past the 10% the rule allows. The
 * cause is the H1: at 1100px a 1.03fr column is just too narrow for "…More Than
 * 30 Years in the QAD Community." and it takes a FIFTH line, adding ~76px to a
 * column that was already the taller one.
 *
 * Widening the copy column is step 1 of the rule's own fix order and it is
 * enough on its own — measured across six widths from 1060 to 1512, the worst
 * case goes 11.3% -> 3.8% and the headline holds at four lines everywhere.
 * Nothing was traded away: no type was shrunk and the card's spacing is the
 * mockup's untouched.
 */
.iss-page.iss-about .iss-ab-hero-grid {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: clamp(32px, 3.4vw, 50px);
	align-items: center;
}

.iss-page.iss-about .iss-ab-hero h1 {
	max-width: none;
	margin: 18px 0 14px;
}
/*
 * The accent is the OPENING two words ("40 Years"), not a trailing phrase, so
 * it is flat sky rather than a gradient — §7a makes the same call for the same
 * reason on every other hero: a gradient across part of a sentence reads as a
 * rendering artefact rather than as emphasis.
 */
.iss-page.iss-about .iss-ab-hero h1 .iss-grad { color: var(--iss-sky); }

.iss-page.iss-about .iss-ab-hero .iss-lead {
	max-width: 730px;
	font-size: 18px;
	line-height: 1.62;
	color: color-mix(in srgb, var(--iss-line) 92%, var(--iss-sky));
}

.iss-page.iss-about .iss-ab-hero .iss-btn-row { margin: 28px 0 27px; }

/* ---- 1a. Hero proof ticks ---------------------------------------------- */

.iss-page.iss-about .iss-ab-hero-proof {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 14px;
	margin-top: 18px;
}
/*
 * NOT `display: flex`, which is what the mockup uses — the tick is positioned
 * out of normal flow instead and the text stays ONE inline run.
 *
 * A flex container makes every child its own flex item, and `iss_brand_case()`
 * wraps a product name in a <span>. So "One configurable iApprove™ workflow
 * platform" became three items — two anonymous text runs either side of the
 * brand — each wrapping on its own and separated by the row `gap`: it shipped
 * reading "One · iApprove™ · workflow / configurable · platform". The mockup
 * never showed it because its own markup has no brand span.
 *
 * Same family as the CLAUDE.md note about a bare descendant `span` rule
 * catching the brand wrapper: anything that treats the label's children as
 * boxes will find that span. Keeping the text in normal inline flow is what
 * makes the rule indifferent to how many elements the label is made of.
 */
.iss-page.iss-about .iss-ab-hero-proof li {
	position: relative;
	padding-left: 29px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.45;
	color: color-mix(in srgb, var(--iss-bg) 90%, var(--iss-blue-dark));
}
.iss-page.iss-about .iss-ab-hero-proof li::before {
	content: "✓";
	position: absolute;
	left: 0;
	/* Optical centring on the first line rather than on the block. */
	top: calc((1.45em - 20px) / 2);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(57, 195, 230, .16);
	color: var(--iss-sky);
	font-size: 11px;
	font-weight: 900;
}

/* ---- 1b. The legacy card (hero's right column) -------------------------- */

.iss-page.iss-about .iss-ab-legacy {
	position: relative;
	padding: 30px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 26px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045));
	box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
	backdrop-filter: blur(10px);
}
.iss-page.iss-about .iss-ab-legacy::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 26px;
	background: linear-gradient(135deg, rgba(143, 226, 245, .22), transparent 42%);
	pointer-events: none;
}
.iss-page.iss-about .iss-ab-legacy > * { position: relative; }

.iss-page.iss-about .iss-ab-legacy-kicker {
	display: block;
	margin-bottom: 9px;
	font-family: var(--iss-mono);
	font-size: 10.5px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--iss-sky);
}
.iss-page.iss-about .iss-ab-legacy h3 {
	margin-bottom: 7px;
	color: #fff;
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -.025em;
}
.iss-page.iss-about .iss-ab-legacy-copy {
	margin-bottom: 20px;
	font-size: 13.5px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--iss-line-strong) 90%, var(--iss-sky));
}

.iss-page.iss-about .iss-ab-legacy-year {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 12px;
	align-items: center;
	padding: 18px 0 20px;
}
.iss-page.iss-about .iss-ab-legacy-date { text-align: center; }
/*
 * Child combinators, not bare descendants. `iss_brand_case()` wraps a product
 * name in its own <span>, so a descendant `span` rule inside a card that can
 * hold "iApprove™" restyles the brand wrapper too — that is how a page CSS
 * rule once uppercased the trademark. Every `span`/`strong` rule in this file
 * is `>` for that reason.
 */
.iss-page.iss-about .iss-ab-legacy-date > strong {
	display: block;
	color: #fff;
	font-size: 42px;
	line-height: 1;
	font-weight: 950;
	letter-spacing: -.04em;
}
.iss-page.iss-about .iss-ab-legacy-date > span {
	display: block;
	margin-top: 6px;
	color: var(--iss-sky);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.iss-page.iss-about .iss-ab-legacy-arrow {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--iss-sky);
	border: 1px solid rgba(143, 226, 245, .22);
	background: rgba(57, 195, 230, .09);
	font-weight: 900;
}

.iss-page.iss-about .iss-ab-legacy-metrics {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 9px;
}
.iss-page.iss-about .iss-ab-legacy-metric {
	padding: 15px 14px;
	border-radius: 13px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .085);
}
.iss-page.iss-about .iss-ab-legacy-metric > strong {
	display: block;
	margin-bottom: 5px;
	color: #fff;
	font-size: 19px;
	line-height: 1.12;
}
.iss-page.iss-about .iss-ab-legacy-metric > span {
	display: block;
	color: color-mix(in srgb, var(--iss-line-strong) 88%, var(--iss-sky));
	font-size: 11px;
	line-height: 1.4;
	font-weight: 700;
}

.iss-page.iss-about .iss-ab-legacy-line {
	margin-top: 14px;
	padding: 13px 14px;
	border-radius: 12px;
	background: linear-gradient(90deg, rgba(12, 115, 201, .25), rgba(57, 195, 230, .12));
	border: 1px solid rgba(143, 226, 245, .18);
	color: #eaf6fd;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.45;
}

/* ============================================================
   §2  OUR STORY
   ============================================================ */

.iss-page.iss-about .iss-ab-story-grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 46px;
	align-items: start;
}
/*
 * The mockup's global `h2 { margin: 0 0 16px }` plus `.story-copy h2 {
 * margin-top: 10px }`. iss-global.css sets no bottom margin on an h2 — the
 * section heads that carry most of this site's h2s are grids and space
 * themselves with `gap` — so the two columns here, which are plain flow, have
 * to restate it or the first paragraph butts straight into the heading.
 */
.iss-page.iss-about .iss-ab-story-copy h2 { margin: 10px 0 16px; }
.iss-page.iss-about .iss-ab-story-copy p {
	font-size: 17px;
	line-height: 1.72;
	margin-bottom: 18px;
}
.iss-page.iss-about .iss-ab-story-copy p:last-of-type { margin-bottom: 0; }

.iss-page.iss-about .iss-ab-story-callout {
	margin-top: 25px;
	padding: 22px 23px;
	border-radius: 17px;
	background: var(--iss-bg-tint);
	border-left: 4px solid var(--iss-blue);
	color: var(--iss-navy);
	font-size: 17px;
	line-height: 1.52;
	font-weight: 900;
}

/* ---- 2a. "What has stayed consistent" panel ---------------------------- */

.iss-page.iss-about .iss-ab-panel {
	padding: 27px;
	border: 1px solid var(--iss-line);
	border-radius: 22px;
	background: var(--iss-card);
	box-shadow: 0 18px 50px rgba(7, 26, 43, .12);
}
.iss-page.iss-about .iss-ab-panel-label {
	display: block;
	margin-bottom: 13px;
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--iss-blue);
}
.iss-page.iss-about .iss-ab-principles {
	display: grid;
	gap: 11px;
}
.iss-page.iss-about .iss-ab-principle {
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 13px;
	align-items: start;
	padding: 14px;
	border-radius: 13px;
	background: linear-gradient(180deg, #fff, var(--iss-bg));
	border: 1px solid var(--iss-line);
}
/*
 * `--iss-blue-dark`, not the mockup's `--iss-blue`.
 *
 * The mockup pairs #0c73c9 with its own #eaf6fd chip, which measures 4.43:1 —
 * seven hundredths short of the 4.5:1 WCAG AA needs for text this size, and the
 * numerals are 11px. #0a5fa6 on the same ground is 5.97:1 and is the palette's
 * own darker blue, so the chip keeps the design's colour relationship rather
 * than being re-tinted to pass. Same swap on `.iss-ab-why-icon`, which is the
 * only other place this page uses the pairing.
 *
 * Measured by tests/about.spec.js, not eyeballed — the ratio is close enough
 * that nobody would catch it by looking, which is exactly why it shipped in the
 * mockup.
 */
.iss-page.iss-about .iss-ab-principle-num {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: #eaf6fd;
	color: var(--iss-blue-dark);
	font-size: 11px;
	font-weight: 950;
}
.iss-page.iss-about .iss-ab-principle > div > b {
	display: block;
	margin-bottom: 4px;
	color: var(--iss-navy-2);
	font-size: 15px;
}
.iss-page.iss-about .iss-ab-principle > div > span {
	display: block;
	color: var(--iss-muted);
	font-size: 13px;
	line-height: 1.48;
	font-weight: 650;
}

/* ---- 2b. V2's historical QAD proof ------------------------------------- */
/*
 * DIVERGENCE 2 — this block is FULL WIDTH, below the story grid.
 *
 * In the Clean HTML `.qad-roots-proof` is a third child of the two-column
 * `.story-grid`, so it lands in row 2 / column 1 and renders 510px wide at
 * 1512px with 624px of empty page beside it, its own 180px mark column
 * squeezed until "Helping bring MFG/PRO to the web." sets in five lines and the
 * block runs 903px tall. Measured in the served mockup, not inferred.
 *
 * That is the markup falling through a grid it was not written for, and V2's
 * own Developer Notes describe the intended shape plainly: "Historical QAD
 * proof uses a two-column mark/copy layout on desktop and becomes one column at
 * <=760px." A 250px copy column is not that layout. So the template renders it
 * as a sibling of the grid rather than a child, which is what gives the notes'
 * own description — and CLAUDE.md's Mockup-fidelity rule is explicit that
 * broken mockup markup gets implemented properly rather than reproduced.
 *
 * Everything else about the block — its ramp, its 180px mark, its type, its
 * <=760px collapse — is the mockup's, unchanged.
 */
.iss-page.iss-about .iss-ab-roots {
	margin-top: 34px;
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 26px;
	align-items: stretch;
	padding: 26px;
	border-radius: 20px;
	overflow: hidden;
	color: var(--iss-card);
	background:
		radial-gradient(circle at 90% 10%, rgba(57, 195, 230, .15), transparent 28%),
		linear-gradient(145deg, var(--iss-navy-2), var(--iss-navy) 64%, var(--iss-navy-3));
	border: 1px solid var(--iss-navy-3);
	box-shadow: 0 16px 38px rgba(7, 26, 43, .13);
}
.iss-page.iss-about .iss-ab-roots-mark {
	min-height: 190px;
	padding: 18px;
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(143, 226, 245, .18);
}
.iss-page.iss-about .iss-ab-roots-era {
	font-family: var(--iss-mono);
	color: var(--iss-sky);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.iss-page.iss-about .iss-ab-roots-mark > strong {
	display: block;
	color: var(--iss-card);
	font-size: 30px;
	line-height: 1.03;
	letter-spacing: -.03em;
}
.iss-page.iss-about .iss-ab-roots-note {
	display: block;
	color: color-mix(in srgb, var(--iss-line-strong) 92%, var(--iss-cyan));
	font-size: 13px;
	line-height: 1.45;
	font-weight: 700;
}

.iss-page.iss-about .iss-ab-roots-copy { padding: 3px 2px; }
.iss-page.iss-about .iss-ab-roots-copy .iss-eyebrow {
	color: var(--iss-sky);
	margin-bottom: 9px;
}
.iss-page.iss-about .iss-ab-roots-copy h3 {
	margin: 0 0 11px;
	color: var(--iss-card);
	font-size: 23px;
	line-height: 1.18;
}
.iss-page.iss-about .iss-ab-roots-copy p {
	margin: 0 0 11px;
	color: color-mix(in srgb, var(--iss-line-strong) 96%, var(--iss-cyan));
	font-size: 14.5px;
	line-height: 1.62;
}
.iss-page.iss-about .iss-ab-roots-copy p strong { color: #fff; }
.iss-page.iss-about .iss-ab-roots-takeaway {
	margin-top: 15px;
	padding: 14px 16px;
	border-left: 4px solid var(--iss-cyan);
	border-radius: 0 12px 12px 0;
	background: rgba(57, 195, 230, .08);
	color: var(--iss-card);
	font-size: 14px;
	line-height: 1.55;
	font-weight: 850;
}
.iss-page.iss-about .iss-ab-roots-source {
	display: block;
	margin-top: 11px;
	color: color-mix(in srgb, var(--iss-line-strong) 78%, var(--iss-sky));
	font-size: 11.5px;
	line-height: 1.4;
	font-weight: 700;
}

/* ============================================================
   §3  DARK BANDS — Company Evolution and Representative Workflow Areas
   ------------------------------------------------------------
   Both sections are the same navy ramp in the Clean HTML (`.timeline-section`
   and `.workflow-areas-section` declare it twice), so they share one class
   here. `.iss-bleed` on the section carries the edge-to-edge geometry; §3 of
   iss-global.css puts the content box back in the column, so the band's copy
   lands on the same left edge as the light sections above and below it.
   ============================================================ */

.iss-page.iss-about .iss-ab-band {
	position: relative;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(145deg, var(--iss-navy-2), var(--iss-navy) 60%, var(--iss-navy-3));
}
/* The 44px blueprint grid, faded out down the band — the mockup's own. */
.iss-page.iss-about .iss-ab-band::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px),
		linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .62), transparent 90%);
}
.iss-page.iss-about .iss-ab-band > .iss-wrap { position: relative; z-index: 1; }

.iss-page.iss-about .iss-ab-band h2,
.iss-page.iss-about .iss-ab-band h3 { color: #fff; }
.iss-page.iss-about .iss-ab-band .iss-kicker { color: var(--iss-sky); }
.iss-page.iss-about .iss-ab-band .iss-sec-head p {
	color: color-mix(in srgb, var(--iss-line-strong) 94%, var(--iss-cyan));
}

/* Section heads take the mockup's 840px rather than §3's 760px. */
.iss-page.iss-about .iss-sec-head { max-width: 840px; }
.iss-page.iss-about .iss-sec-head p { max-width: 805px; line-height: 1.65; }

/* ---- 3a. The evolution timeline ---------------------------------------- */

.iss-page.iss-about .iss-ab-timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin-top: 42px;
}
/*
 * The rail behind the dots. Inset 8% each side so it starts and ends inside
 * the first and last dot rather than running off the grid; `top: 31px` is half
 * the 62px dot.
 */
.iss-page.iss-about .iss-ab-timeline::before {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 31px;
	height: 2px;
	background: linear-gradient(90deg, var(--iss-blue-2), var(--iss-cyan));
	opacity: .65;
}
.iss-page.iss-about .iss-ab-tl-item {
	position: relative;
	z-index: 1;
}
.iss-page.iss-about .iss-ab-tl-dot {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	margin-bottom: 18px;
	background: linear-gradient(145deg, #0f6fb3, #2bc0e3);
	/* Solid navy ring, so the rail is cut rather than crossed. */
	border: 5px solid var(--iss-navy);
	color: #fff;
	font-size: 13px;
	font-weight: 950;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}
.iss-page.iss-about .iss-ab-tl-card {
	min-height: 220px;
	padding: 19px 18px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .065);
	border: 1px solid rgba(255, 255, 255, .10);
}
.iss-page.iss-about .iss-ab-tl-kicker {
	display: block;
	margin-bottom: 8px;
	font-family: var(--iss-mono);
	color: var(--iss-sky);
	font-size: 9.5px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.iss-page.iss-about .iss-ab-tl-card h3 {
	margin-bottom: 8px;
	font-size: 18px;
}
.iss-page.iss-about .iss-ab-tl-card p {
	margin: 0;
	color: color-mix(in srgb, var(--iss-line-strong) 94%, var(--iss-navy-3));
	font-size: 13px;
	line-height: 1.52;
}
.iss-page.iss-about .iss-ab-tl-close {
	margin-top: 24px;
	padding: 16px 18px;
	border-radius: 14px;
	border: 1px solid rgba(143, 226, 245, .18);
	background: linear-gradient(90deg, rgba(57, 195, 230, .10), rgba(23, 168, 120, .07));
	color: #e9f8fc;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.5;
	text-align: center;
}

/* ---- 3b. Representative Workflow Areas --------------------------------- */

.iss-page.iss-about .iss-ab-wa-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.iss-page.iss-about .iss-ab-wa-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 200px;
	padding: 24px 24px 22px;
	border-radius: 18px;
	border: 1px solid rgba(143, 226, 245, .18);
	background: rgba(255, 255, 255, .06);
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.iss-page.iss-about .iss-ab-wa-card:hover,
.iss-page.iss-about .iss-ab-wa-card:focus-within {
	border-color: rgba(143, 226, 245, .42);
	background: rgba(255, 255, 255, .09);
	transform: translateY(-2px);
}
.iss-page.iss-about .iss-ab-wa-kicker {
	display: block;
	margin-bottom: 10px;
	font-family: var(--iss-mono);
	color: var(--iss-sky);
	font-size: 9.5px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.iss-page.iss-about .iss-ab-wa-card h3 {
	margin-bottom: 9px;
	font-size: 21px;
}
.iss-page.iss-about .iss-ab-wa-card p {
	margin-bottom: 18px;
	color: color-mix(in srgb, var(--iss-line-strong) 94%, var(--iss-navy-3));
	font-size: 13.5px;
	line-height: 1.55;
}
.iss-page.iss-about .iss-ab-wa-link {
	margin-top: auto;
	color: var(--iss-sky);
	font-size: 12.5px;
	font-weight: 900;
}
.iss-page.iss-about .iss-ab-wa-link:hover { text-decoration: underline; }

.iss-page.iss-about .iss-ab-wa-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
	padding: 18px 20px;
	border-radius: 15px;
	border: 1px solid rgba(143, 226, 245, .18);
	background: rgba(57, 195, 230, .07);
}
.iss-page.iss-about .iss-ab-wa-foot > strong {
	font-size: 16px;
	color: #fff;
}
.iss-page.iss-about .iss-ab-wa-foot > span {
	max-width: 710px;
	font-size: 12.5px;
	line-height: 1.5;
	font-weight: 700;
	color: color-mix(in srgb, var(--iss-line-strong) 94%, var(--iss-cyan));
}

/* ============================================================
   §4  WHAT WE DO TODAY — the six platform disciplines
   ------------------------------------------------------------
   The mockup's `.section.soft` ramp: page tint at the top fading to card white
   at the bottom. It paints a background, so the section bleeds.
   ============================================================ */

.iss-page.iss-about .iss-ab-soft {
	background: linear-gradient(180deg, var(--iss-bg) 0%, var(--iss-card) 100%);
}

.iss-page.iss-about .iss-ab-disciplines {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 38px;
	align-items: start;
}
/*
 * The intro rides along beside the six cards. 28px clears the condensed sticky
 * header the same way `.iss-section`'s own `scroll-margin-top` does.
 */
.iss-page.iss-about .iss-ab-disc-intro {
	position: sticky;
	top: 90px;
}
/* Plain flow, like the story column above — see the note there. */
.iss-page.iss-about .iss-ab-disc-intro h2 { margin: 10px 0 16px; }
.iss-page.iss-about .iss-ab-disc-intro p {
	font-size: 17px;
	line-height: 1.68;
}

.iss-page.iss-about .iss-ab-signature {
	margin-top: 24px;
	padding: 18px 19px;
	border-radius: 15px;
	background: linear-gradient(135deg, var(--iss-navy), var(--iss-navy-3));
	color: #fff;
	box-shadow: 0 18px 50px rgba(7, 26, 43, .12);
}
.iss-page.iss-about .iss-ab-signature > strong {
	display: block;
	margin-bottom: 5px;
	font-size: 18px;
	line-height: 1.35;
}
.iss-page.iss-about .iss-ab-signature > span {
	display: block;
	color: var(--iss-sky);
	font-size: 12.5px;
	line-height: 1.5;
	font-weight: 750;
}

.iss-page.iss-about .iss-ab-disc-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
.iss-page.iss-about .iss-ab-disc-card {
	position: relative;
	min-height: 176px;
	padding: 21px 20px;
	border: 1px solid var(--iss-line);
	border-radius: 17px;
	background: linear-gradient(180deg, #fff, var(--iss-bg));
	box-shadow: 0 10px 26px rgba(7, 26, 43, .045);
}
/* The blue-to-cyan cap rule across the top of each card. */
.iss-page.iss-about .iss-ab-disc-card::before {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	top: 0;
	height: 3px;
	border-radius: 0 0 4px 4px;
	background: linear-gradient(90deg, var(--iss-blue), var(--iss-cyan));
}
.iss-page.iss-about .iss-ab-disc-num {
	display: block;
	margin-bottom: 11px;
	font-family: var(--iss-mono);
	color: var(--iss-blue);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .08em;
}
.iss-page.iss-about .iss-ab-disc-card h3 {
	margin-bottom: 7px;
	color: var(--iss-navy-2);
	font-size: 18px;
}
.iss-page.iss-about .iss-ab-disc-card p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.52;
}

/* ============================================================
   §5  WHY ISS GROUP — four credibility cards, the first one dark
   ============================================================ */

.iss-page.iss-about .iss-ab-why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.iss-page.iss-about .iss-ab-why-card {
	position: relative;
	min-height: 250px;
	padding: 24px 21px 22px;
	border: 1px solid var(--iss-line-strong);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(7, 26, 43, .06);
}
.iss-page.iss-about .iss-ab-why-icon {
	width: 42px;
	height: 42px;
	margin-bottom: 17px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: #eaf6fd;
	/* 4.43:1 in the mockup — see the note on .iss-ab-principle-num. */
	color: var(--iss-blue-dark);
	font-size: 16px;
	font-weight: 950;
}
.iss-page.iss-about .iss-ab-why-card h3 {
	margin-bottom: 9px;
	color: var(--iss-navy-2);
	font-size: 19px;
}
.iss-page.iss-about .iss-ab-why-card p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.56;
}
/* The lead card inverts — it is the one that carries the "40 years" claim. */
.iss-page.iss-about .iss-ab-why-card.is-highlight {
	background: linear-gradient(145deg, var(--iss-navy-2), var(--iss-navy));
	border-color: var(--iss-navy-3);
	color: #fff;
}
.iss-page.iss-about .iss-ab-why-card.is-highlight .iss-ab-why-icon {
	background: rgba(143, 226, 245, .12);
	color: var(--iss-sky);
	border: 1px solid rgba(143, 226, 245, .16);
}
.iss-page.iss-about .iss-ab-why-card.is-highlight h3 { color: #fff; }
.iss-page.iss-about .iss-ab-why-card.is-highlight p {
	color: color-mix(in srgb, var(--iss-line-strong) 94%, var(--iss-cyan));
}

/* ============================================================
   §6  HOW WE WORK — four principle cards
   ============================================================ */

.iss-page.iss-about .iss-ab-howwe-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.iss-page.iss-about .iss-ab-howwe-card {
	padding: 24px 23px;
	border: 1px solid var(--iss-line);
	border-radius: 18px;
	background: linear-gradient(180deg, #fff, var(--iss-bg));
	box-shadow: 0 10px 26px rgba(7, 26, 43, .045);
}
.iss-page.iss-about .iss-ab-howwe-label {
	display: block;
	margin-bottom: 10px;
	font-family: var(--iss-mono);
	color: var(--iss-blue);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.iss-page.iss-about .iss-ab-howwe-card h3 {
	margin-bottom: 8px;
	color: var(--iss-navy-2);
	font-size: 20px;
}
.iss-page.iss-about .iss-ab-howwe-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.58;
}

/* ============================================================
   §7  CUSTOMER PROOF — three project-snapshot cards on the page tint
   ============================================================ */

.iss-page.iss-about .iss-ab-tint { background: var(--iss-bg); }

.iss-page.iss-about .iss-ab-cp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 17px;
}
.iss-page.iss-about .iss-ab-cp-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--iss-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(7, 26, 43, .06);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.iss-page.iss-about .iss-ab-cp-card:hover,
.iss-page.iss-about .iss-ab-cp-card:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(7, 26, 43, .11);
}
.iss-page.iss-about .iss-ab-cp-top {
	min-height: 135px;
	padding: 20px 21px;
	color: #fff;
	background: linear-gradient(145deg, var(--iss-navy-2), var(--iss-navy));
}
.iss-page.iss-about .iss-ab-cp-company {
	display: block;
	margin-bottom: 10px;
	font-family: var(--iss-mono);
	color: var(--iss-sky);
	font-size: 9.5px;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.iss-page.iss-about .iss-ab-cp-top h3 {
	margin: 0;
	color: #fff;
	font-size: 20px;
}
.iss-page.iss-about .iss-ab-cp-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 21px 21px;
}
.iss-page.iss-about .iss-ab-cp-body p {
	margin-bottom: 16px;
	font-size: 13.5px;
	line-height: 1.55;
}
.iss-page.iss-about .iss-ab-cp-link {
	margin-top: auto;
	color: var(--iss-blue);
	font-size: 12.5px;
	font-weight: 900;
}
.iss-page.iss-about .iss-ab-cp-link:hover { text-decoration: underline; }

.iss-page.iss-about .iss-ab-cp-note {
	margin-top: 20px;
	padding: 17px 19px;
	border-radius: 14px;
	background: #fff;
	border-left: 4px solid var(--iss-blue);
	font-size: 14px;
	line-height: 1.55;
	color: var(--iss-navy);
	font-weight: 800;
}

/* ============================================================
   §8  RESPONSIVE — the Clean HTML's own three breakpoints
   ------------------------------------------------------------
   V2's Responsive Summary, kept to the same widths it names so the built page
   reflows where the approved mockup reflows:
     <=1050px  hero/story/discipline outer grids collapse; the timeline becomes
               two columns and loses its rail; Why ISS Group and Customer Proof
               become two columns.
     <=760px   hero proof, timeline, disciplines, Why, Workflow Areas,
               principles and Customer Proof all become one column; the legacy
               year treatment and the Workflow Areas footer stack; the QAD
               roots proof becomes one column.
     <=520px   legacy metrics become one column and the dates come down a step.
   ============================================================ */

@media (max-width: 1050px) {
	.iss-page.iss-about .iss-ab-hero-grid,
	.iss-page.iss-about .iss-ab-story-grid,
	.iss-page.iss-about .iss-ab-disciplines { grid-template-columns: 1fr; }

	.iss-page.iss-about .iss-ab-legacy { max-width: 760px; }

	.iss-page.iss-about .iss-ab-timeline { grid-template-columns: 1fr 1fr; }
	.iss-page.iss-about .iss-ab-timeline::before { display: none; }

	.iss-page.iss-about .iss-ab-disc-intro { position: static; }

	.iss-page.iss-about .iss-ab-why-grid,
	.iss-page.iss-about .iss-ab-cp-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
	.iss-page.iss-about .iss-ab-hero-proof { grid-template-columns: 1fr; }

	.iss-page.iss-about .iss-ab-legacy-year { grid-template-columns: 1fr; }
	.iss-page.iss-about .iss-ab-legacy-arrow {
		transform: rotate(90deg);
		justify-self: center;
	}
	.iss-page.iss-about .iss-ab-legacy-metrics { grid-template-columns: 1fr 1fr; }

	.iss-page.iss-about .iss-ab-timeline { grid-template-columns: 1fr; }
	.iss-page.iss-about .iss-ab-tl-card { min-height: auto; }

	.iss-page.iss-about .iss-ab-disc-grid,
	.iss-page.iss-about .iss-ab-why-grid,
	.iss-page.iss-about .iss-ab-wa-grid,
	.iss-page.iss-about .iss-ab-howwe-grid,
	.iss-page.iss-about .iss-ab-cp-grid { grid-template-columns: 1fr; }

	.iss-page.iss-about .iss-ab-wa-foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.iss-page.iss-about .iss-ab-roots {
		grid-template-columns: 1fr;
		padding: 20px;
	}
	.iss-page.iss-about .iss-ab-roots-mark {
		min-height: auto;
		gap: 24px;
	}
	.iss-page.iss-about .iss-ab-roots-mark > strong { font-size: 27px; }
}

@media (max-width: 520px) {
	.iss-page.iss-about .iss-ab-legacy-metrics { grid-template-columns: 1fr; }
	.iss-page.iss-about .iss-ab-legacy-date > strong { font-size: 36px; }
}

/*
 * DIVERGENCE 3 — the FINAL CTA has no rules in this file, on purpose.
 *
 * V2 classifies it "Shared, with page-specific copy only", and the site already
 * has that component: `.iss-cta-band` + `.iss-cta-band-split` (§15/§25j of
 * iss-global.css) is copy-left/actions-right on a blue-to-cyan ramp, full-bleed,
 * running into the footer — the same shape the mockup's `.final-cta-section`
 * draws, and `.iss-cta-summary` is already the mono "40 Years in Business • …"
 * line under it.
 *
 * The mockup's ramp is 105deg blue-dark -> blue-2 55% -> cyan where the shared
 * band is 135deg blue-dark -> blue -> cyan. The shared one is Homepage V44's
 * normalisation of exactly this gradient to approved tokens, applied site-wide;
 * re-angling it here would make the About page the one page whose closer does
 * not match the other twenty-eight, which is the opposite of what "shared
 * component, page-specific copy only" asks for.
 */