/* ==========================================================================
   ISO Support — the one still page
   The whole mark, all four petals locked in formation on ivory 'certificate
   paper'. The petals settle ONCE and hold: nothing on this page drifts.
   Set-piece: 'ISO' as a dictionary headword beside the client's definition,
   the sectors as a run of words punctuated by four-colour lozenges, and the
   benefit grids (2-up in folio 01, 3x2 in folio 02 — any count flows).

   Everything is written in its final state; start states live only under
   .js-reveal [data-reveal]:not(.is-revealed).

    1  Certified masthead      4  Folio 02 — the band
    2  Folio 01 — headword     5  Closing statement, proof
    3  Benefit grid            6  Responsive
   ========================================================================== */

/* 1. Certified masthead ---------------------------------------------------- */
main.t-iso .mast { background: var(--acc-tint); }
/* copy in cols 1-6; the strip too, so its rule never runs under the mark */
main.t-iso .mast__h1,
main.t-iso .mast__stand,
main.t-iso .mast__pills,
main.t-iso .mast .strip { grid-column: 1 / 7; }

/* the formation: four rounded squares at the #i-logo centres */
.isomark {
	position: relative;
	width: min(40vw, 760px);
	aspect-ratio: 1;
	pointer-events: none;
}
.isomark__p {
	position: absolute;
	left: calc(var(--x) - 18%);
	top: calc(var(--y) - 18%);
	width: 36%;
	aspect-ratio: 1;
	border-radius: 30%;
	background: var(--c);
	rotate: 45deg;
	transition: translate 1.2s var(--ease-out), rotate 1.2s var(--ease-out), opacity 0.9s ease;
	transition-delay: calc(var(--i) * 100ms);
}
.isomark__p--yellow { --x: 50%; --y: 20%; --c: var(--logo-yellow); --fx: 0px;   --fy: -60px; --fr: -12deg; --i: 0; }
.isomark__p--red    { --x: 20%; --y: 50%; --c: var(--logo-red);    --fx: -60px; --fy: 0px;   --fr: 12deg;  --i: 1; }
.isomark__p--green  { --x: 80%; --y: 50%; --c: var(--logo-green);  --fx: 60px;  --fy: 0px;   --fr: -12deg; --i: 2; }
.isomark__p--navy   { --x: 50%; --y: 80%; --c: var(--logo-navy);   --fx: 0px;   --fy: 60px;  --fr: 12deg;  --i: 3; }
/* the box itself never fades or rises; only its petals move, once, home */
.js-reveal .isomark[data-reveal] { opacity: 1; translate: none; transition: none; }
.js-reveal .isomark[data-reveal]:not(.is-revealed) .isomark__p {
	opacity: 0;
	translate: var(--fx) var(--fy);
	rotate: calc(45deg + var(--fr));
}

@media (min-width: 1025px) {
	/* Lifted out to the masthead's right, centred at 55% of its height. The
	   inner goes static so the mark is placed against the masthead itself;
	   z-index -1 keeps it under the copy inside the masthead's own stacking
	   context (.mast isolates), so it can never cover a word. */
	main.t-iso .mast__inner { position: static; }
	/* the running head joins the copy column, so its rule never strikes
	   through the mark: cols 7-12 belong to the formation alone */
	main.t-iso .mast__run { grid-column: 1 / 7; }
	main.t-iso .isomark {
		position: absolute;
		z-index: -1;
		right: 4vw;
		top: calc(55% - min(20vw, 380px));
	}
}

/* 2. Folio 01 — What Is ISO? (the headword) -------------------------------- */
.hwf__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-items: start;
}
/* the folio's top rule, as the grid's first row */
.hwf__grid::before {
	content: '';
	grid-column: 1 / -1;
	border-top: var(--rule-strong);
	margin-bottom: clamp(2rem, 3.4vw, 4rem);
	transform-origin: left;
	transition: transform 0.8s var(--ease-out);
}
.js-reveal .hwf[data-reveal]:not(.is-revealed) .hwf__grid::before { transform: scaleX(0); }

/* the headword: the folio's marker, so there is no numeral */
.hw {
	grid-column: 1 / 6;
	display: flex;
	align-items: flex-end;
	gap: 0.1em;
	margin: 0;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(6rem, 16.7vw, 20rem);   /* 320 @1920 */
	line-height: 0.8;
	color: var(--ink);
	transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out);
}
.hw__w { letter-spacing: -0.06em; }
.hw .lz {
	width: 0.12em;
	margin-bottom: 0.09em;
	transition: rotate 0.6s var(--ease-out) 0.45s;
}
/* rises 40px and fades in, and its lozenge turns into place as it lands —
   the chassis statement's move. Opacity + translate + rotate only: a
   clip-path wipe was tried first here too, and like the statement's it is
   not compositor-only and intermittently never finished, leaving the
   set-piece blank. */
.js-reveal .hwf[data-reveal]:not(.is-revealed) .hw { opacity: 0; translate: 0 40px; }
.js-reveal .hwf[data-reveal]:not(.is-revealed) .hw .lz { rotate: 0deg; }

.hwf__head { grid-column: 6 / -1; }
.hwf .body { font-size: var(--read); line-height: 1.65; color: var(--body); }
.hwf__lead { margin: 0; max-width: 34em; }

/* the sector run: one line of words, a lozenge between each — static text,
   no borders, no pills, so it never reads as buttons */
.run {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
	margin: clamp(3rem, 5.5vw, 6.5rem) 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.run > li {
	display: inline-flex;
	align-items: center;
	gap: 1.75rem;
	transition: opacity 0.5s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 40ms);
}
.run > li::after {
	content: '';
	flex: none;
	width: 10px;
	aspect-ratio: 1;
	border-radius: 22%;
	rotate: 45deg;
	background: var(--c);
}
.run > li:last-child::after { content: none; }
.js-reveal .run[data-reveal] { opacity: 1; translate: none; }
.js-reveal .run[data-reveal]:not(.is-revealed) > li { opacity: 0; }

.hwf__cols { grid-column: 4 / 12; margin-top: clamp(3rem, 5.5vw, 6.5rem); }
.hwf__leadin {
	grid-column: 4 / 12;
	max-width: 40em;
	margin: clamp(2.5rem, 4.2vw, 5rem) 0 0;
	text-wrap: balance;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--h4);
	line-height: 1.3;
	color: var(--ink);
}
.hwf .benefits { grid-column: 4 / 12; margin-top: clamp(2rem, 3.4vw, 4rem); }

/* 3. Benefit grid ---------------------------------------------------------- */
.benefits {
	--cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	column-gap: var(--card-gap);
	row-gap: 4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.benefits--2 { --cols: 2; }
.benefits > li { position: relative; padding-top: 2rem; }
/* each benefit's top rule, drawn in */
.benefits > li::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	border-top: var(--rule-strong);
	transform-origin: left;
	transition: transform 0.8s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.benefits__n {
	display: flex;
	align-items: flex-end;
	gap: 0.14em;
	margin-bottom: 1.5rem;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--numeral-sm);
	line-height: 0.8;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--acc-pale);
}
.benefits__n .lz {
	width: 12px;
	margin-bottom: 0.05em;
	transition: translate 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
	transition-delay: calc(0.15s + var(--i, 0) * 90ms);
}
.benefits__h { margin: 0 0 0.6em; font-size: var(--h3); line-height: 1.15; }
.benefits__p { margin: 0; max-width: 34em; font-size: var(--base); line-height: 1.65; color: var(--body); }
/* the rules draw, and each lozenge arrives from its own side of the mark:
   yellow from above, red from the left, green from the right, navy below */
.js-reveal .benefits[data-reveal]:not(.is-revealed) > li::before { transform: scaleX(0); }
.js-reveal .benefits[data-reveal]:not(.is-revealed) .benefits__n .lz { opacity: 0; translate: var(--fx) var(--fy); }

/* 4. Folio 02 — the benefits of accreditation, on certificate paper --------- */
main.t-iso .folio--band { background: var(--acc-tint); }
.isob { margin-top: clamp(2rem, 3.4vw, 4rem); }

/* 5. Closing statement, proof ---------------------------------------------- */
.isoclose { padding-bottom: 0; }
.isoclose__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
}
.isoclose__s { grid-column: 1 / 11; margin-top: 0 !important; }
.isoclose__p {
	grid-column: 4 / 10;
	margin: 0;
	font-size: var(--read);
	line-height: 1.65;
	color: var(--body);
}
/* ISO has no drift at all: the pull-quote's lozenges hold still */
main.t-iso .pq__mark i { animation: none; }

/* 6. Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
	/* no petal in the top-right corner here, so the H1 needs no clearance */
	main.t-iso .mast__h1 { padding-top: 0; margin-top: clamp(2rem, 5vw, 3rem); }
	/* the mark drops into the flow under the pills: 56vw, right-aligned,
	   bleeding off the right edge by 20% of its width */
	main.t-iso .isomark {
		width: 56vw;
		justify-self: end;
		margin-right: calc(-1 * (var(--gutter) + 11.2vw));
	}

	.hwf__cols,
	.hwf__leadin,
	.hwf .benefits { grid-column: 3 / -1; }
	.benefits--3 { --cols: 2; }

	/* 'What we do': the current row's two-column 'You are here' is now the
	   chassis's own rule (folio.css), scoped to 861-1024 so the <=860 row
	   keeps its 3-track layout. No ISO override: a more specific copy here
	   would push the blurb and the label into implicit columns at <=860. */
	.isoclose__s { grid-column: 1 / -1; }
	.isoclose__p { grid-column: 3 / 11; }
}

@media (min-width: 641px) and (max-width: 1024px) {
	/* pills top-left, 'On this page' bottom-left, the mark to their right */
	main.t-iso .mast__pills { grid-column: 1 / 7; grid-row: 4; align-self: start; }
	main.t-iso .isomark { grid-column: 7 / -1; grid-row: 4 / span 2; margin-top: 4rem; }
	main.t-iso .mast .strip { grid-column: 1 / 7; grid-row: 5; align-self: end; }
	/* stacked, it reads as a contents list set against the foot of the mark */
	main.t-iso .mast .strip ol { grid-template-columns: minmax(0, 1fr); gap: 0; }
	main.t-iso .mast .strip li + li { border-top: var(--rule); }
	main.t-iso .mast .strip a { flex-direction: row; align-items: baseline; gap: 1rem; padding: 0.9rem 0; }
}

@media (max-width: 860px) {
	.hwf__grid,
	.isoclose__grid { display: block; }
	.hw { font-size: 38vw; margin-bottom: 1.5rem; }   /* ~140px @375 */
	.run { gap: 0.75rem 1.1rem; font-size: 1.25rem; }
	.run > li { gap: 1.1rem; }
	.run > li::after { width: 8px; }
	.hwf__cols,
	.hwf__leadin { margin-top: 2.5rem; }
	.hwf .benefits { margin-top: 2rem; }
	.benefits--2 { --cols: 1; }
	.isoclose__p { margin-top: 1.5rem; }
}

@media (max-width: 640px) {
	main.t-iso .isomark {
		width: 64vw;
		margin-top: 1.5rem;
		margin-right: calc(-1 * (var(--gutter) + 12.8vw));
	}
	.benefits--3 { --cols: 1; }
	.benefits { row-gap: 3rem; }
	.benefits > li { padding-top: 1.5rem; }
}

/* On paper: style.css resets only the [data-reveal] elements themselves.
   ISO's start states sit on their children, so anything the reader never
   scrolled past is put in its final state here, or it would print blank.
   No transition, so the switch to paper is instant rather than mid-reveal. */
@media print {
	.hw,
	.hw .lz,
	.run > li,
	.benefits__n .lz,
	.isomark__p,
	.hwf__grid::before,
	.benefits > li::before { transition: none !important; }
	.hw,
	.run > li,
	.benefits__n .lz,
	.isomark__p { opacity: 1 !important; translate: none !important; }
	.hw .lz,
	.isomark__p { rotate: 45deg !important; }
	.hwf__grid::before,
	.benefits > li::before { transform: none !important; }
}