/*!
 * Sarv Catalyst — internal page visual system
 *
 * The homepage is composed from sections built for it. The internal pages —
 * About, Industries, Services, Products, R&D, Insights, Contact — used to be
 * composed almost entirely from prose, and prose alone reads as a CMS export
 * rather than as a designed page: the visitor gets paragraphs where they needed
 * a photograph, a number, a sequence or a boundary.
 *
 * This file is the shared vocabulary those pages are now built from. Each block
 * is a pattern that earns its place by carrying a specific kind of information:
 *
 *   .sc-media-hero        a page opens on a photograph, not on a wall of text
 *   .sc-split             text and an image, one on each side of a boundary
 *   .sc-stat-band         evidence at scale, for the few numbers that matter
 *   .sc-callout           a technical note that must not be skimmed past
 *   .sc-timeline          a sequence with dates
 *   .sc-steps             a sequence without dates
 *   .sc-matrix            capability against requirement
 *   .sc-reference-strip   named references, quoted rather than claimed
 *   .sc-certificate-strip marks and registrations
 *
 * Two rules govern all of it:
 *
 *   1. A block is only used when there is something to put in it. An empty
 *      pattern is worse than no pattern: it announces a section the client has
 *      not filled in.
 *   2. No block invents content. Every number, name and mark rendered inside
 *      these patterns comes from an editable field, and an empty field removes
 *      the whole item rather than leaving a placeholder.
 *
 * Every rule uses logical properties, so Persian is the same file.
 */

/* ===========================================================================
 * 1. Media hero
 *
 * The opening band of an internal page: breadcrumbs, an eyebrow, the H1, a
 * lead, and a photograph. The photograph is a real element rather than a
 * background image, so it can carry an alt text, a srcset and a priority hint.
 *
 * Below 64rem the copy sits over the image with a scrim, held to the bottom of
 * the frame: the photograph is the point of the band, and a half-width image
 * beside two lines of text wastes it. Above 64rem the copy takes its own
 * column and the image takes the other, so the H1 keeps a readable measure.
 * =========================================================================== */

.sc-media-hero {
	position: relative;
	isolation: isolate;
	background-color: var(--sc-color-surface-muted);
}

.sc-media-hero__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--sc-radius-media);

	/*
	 * A grid item's automatic minimum size is its content's min-content width,
	 * and for a photograph that is the file's intrinsic width — 1600px on the
	 * shipped hero. Without this the track is 478px and the image is 985px, so
	 * the band overflows the viewport between the two-column break and the
	 * container's own maximum width.
	 */
	min-inline-size: 0;
}

/*
 * The hero photograph is one instance of the site's media rule, and the rule
 * lives in one place so a second hero template cannot be added with square
 * corners. Below the two-column break the frame is short enough that a 16px
 * radius starts to read as a pill, so it steps down to the small token; the
 * switch is at the same breakpoint that turns the band from a stacked card into
 * a full-height panel.
 */
@media (width < 64rem) {
	.sc-media-hero__media {
		border-radius: var(--sc-radius-media-sm);
	}
}

.sc-media-hero__media img {
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.sc-media-hero__copy,
.sc-media-hero__inner {
	min-inline-size: 0;
}

.sc-media-hero__inner {
	padding-block: var(--sc-space-xl) var(--sc-space-2xl);
}

.sc-media-hero__title {
	margin-block: var(--sc-space-sm) 0;
	font-size: var(--sc-font-size-4xl);
	line-height: 1.08;
	letter-spacing: var(--sc-letter-spacing-tight);
	text-wrap: balance;
}

.sc-media-hero__lead {
	margin-block-start: var(--sc-space-md);
	max-inline-size: var(--sc-measure);
	font-size: var(--sc-font-size-lg);
	line-height: var(--sc-line-height-normal);
	color: var(--sc-color-text-muted);
	text-wrap: pretty;
}

.sc-media-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-sm);
	margin-block-start: var(--sc-space-lg);
}

@media (width >= 64rem) {
	.sc-media-hero__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
		gap: 0;
	}

	/*
	 * In the two-column layout the band's height is set by the copy beside the
	 * photograph, so the frame takes that height and the image is cropped into
	 * it. The ratio is removed rather than kept: an aspect ratio with a
	 * definite block size resolves the automatic inline size from the ratio, so
	 * the frame would ask for 1.5 x its height — 985px inside a 478px track —
	 * and the band would overflow the viewport. The floor keeps a short lead
	 * from producing a letterbox.
	 */
	.sc-media-hero__media {
		aspect-ratio: auto;
		inline-size: 100%;
		block-size: 100%;
		min-block-size: 20rem;
	}

	.sc-media-hero__copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-block: var(--sc-space-2xl);
		padding-inline-end: var(--sc-space-xl);
	}

	.sc-media-hero__inner {
		padding-block: 0;
	}
}

/* The image on the trailing side: the copy reads first in the source order,
   which is also the order a screen reader and a phone get. */
@media (width >= 64rem) {
	.sc-media-hero--media-end .sc-media-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	}

	.sc-media-hero--media-end .sc-media-hero__copy {
		grid-column: 1;
		grid-row: 1;
		padding-inline: 0 var(--sc-space-2xl);
	}

	.sc-media-hero--media-end .sc-media-hero__media {
		grid-column: 2;
		grid-row: 1;
	}
}

/* ===========================================================================
 * 1a. Media frames — the site's picture rule
 *
 * A photograph's corner is a property of the design system, not of the
 * template that happens to place it, so it is decided once here and read by
 * every frame on every page. The alternative is what the site had: an About
 * hero with square corners, a split at 16px, a research hero at 8, a product
 * card at 8 and an article index at 0 — five answers to one question, which is
 * what makes a page look assembled rather than designed.
 *
 * The tokens are declared in `tokens.css` beside the rest of the radius scale,
 * and the rule is simply: a frame takes the token, it does not choose a value.
 *
 *   `--sc-radius-media`     16px — the hero photograph and every large
 *                           editorial frame beside a body of copy.
 *   `--sc-radius-media-sm`  12px — the picture inside a card or a panel, which
 *                           is a fraction of a hero's height. 16px on a
 *                           120px-tall thumbnail is a quarter of its height and
 *                           reads as a pill.
 *
 * What is deliberately outside the rule:
 *
 *   `.sc-hero__media`      the homepage hero. Its frame is a full-bleed band
 *                          bled off the viewport edge, where a radius would be a
 *                          rounded corner against nothing. The brief keeps it
 *                          exactly as approved.
 *   `.sc-guidance__media`  the finder's companion band, full-bleed inside its
 *                          panel for the same reason.
 *   `.sc-lifecycle__media` a diagram, not a photograph.
 *
 * Every frame listed below clips, so the radius is drawn by the frame while the
 * image inside it stays free to scale on hover without the corner moving. A
 * split that carries a diagram rather than a photograph switches the radius off
 * — see `.sc-split__media:has(> :not(img))` below.
 * =========================================================================== */

.sc-entry__media {
	display: block;
	overflow: hidden;
	border-radius: var(--sc-radius-media);
	background-color: var(--sc-color-surface-muted);
}

/* ===========================================================================
 * 2. Split editorial
 *
 * One idea per band: a heading and a body on one side, one supporting element
 * on the other. The `--reverse` modifier swaps the sides at the wide
 * breakpoints, which is what gives a page a rhythm instead of a stack.
 * =========================================================================== */

.sc-split {
	padding-block: var(--sc-space-2xl);
}

.sc-split__grid {
	display: grid;
	gap: var(--sc-space-xl);
	align-items: center;
}

.sc-split__media {
	overflow: hidden;
	border-radius: var(--sc-radius-media);
	background-color: var(--sc-color-surface-sunken);

	/* Same reason as the hero media: a photograph's intrinsic width is not a
	   layout constraint, so the grid item must be allowed to shrink past it. */
	min-inline-size: 0;
}

/*
 * The media column can also carry a block rather than a picture — the guard bed
 * section puts its contaminant list there. A block owns its own surface, so the
 * frame's fill and radius are removed rather than fought with.
 */
.sc-split__media:has(> :not(img)) {
	overflow: visible;
	border-radius: 0;
	background-color: transparent;
}

.sc-split__media img {
	inline-size: 100%;
	block-size: auto;
	object-fit: cover;
}

.sc-split__body {
	min-inline-size: 0;
}

.sc-split__body > p {
	max-inline-size: var(--sc-measure);
}

@media (width >= 64rem) {
	.sc-split__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--sc-space-2xl);
	}

	.sc-split--wide-text .sc-split__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	}

	.sc-split--reverse .sc-split__body {
		order: 2;
	}

	.sc-split--reverse .sc-split__media {
		order: 1;
	}
}

/* ===========================================================================
 * 3. Evidence band
 *
 * The few numbers that carry the page, presented as a row of stat cards rather
 * than as a plain list: a large figure, a short label, and a context line that
 * says what the figure is a figure *of*.
 *
 * The one ornament is a ring behind each figure. It is drawn with two SVG
 * circles — a hairline track and a short arc — and it is **purely decorative**:
 * the arc is the same length on all three cards and the SVG carries no value,
 * because two of the three figures have no denominator. A ring filled to
 * "60% of itself" and a ring filled to "100% of itself" sitting beside an amount
 * in tonnes would invite exactly the comparison the band must not make. The ring
 * is a mark in the brand's circular language; the figures are the content.
 *
 * The band carries no attribution line. Project language naming the internal
 * document the figures came from was removed from the UI in every language.
 * =========================================================================== */

.sc-stat-band {
	position: relative;
	padding-block: var(--sc-space-2xl);
	background-color: var(--sc-color-surface-pale);
	border-block: var(--sc-border-width) solid var(--sc-color-border-subtle);
}

.sc-stat-band--inverse {
	background-color: var(--sc-color-surface-inverse);
	border-block-color: transparent;
	color: var(--sc-color-text-inverse);
}

.sc-stat-band__intro {
	max-inline-size: var(--sc-measure);
}

/*
 * The opening hairline. Drawn by the list's own pseudo-element rather than by a
 * border, because a border cannot be animated from its leading edge without
 * changing the element's box — and a rule that grows by reflowing the row under
 * it would move the figures while they are counting.
 */
.sc-stat-band__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--sc-space-md);
	margin: 0;
	margin-block-start: var(--sc-space-xl);
	padding: 0;
	list-style: none;
}

.sc-stat-band__list::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: var(--sc-border-width-strong);
	background-color: var(--sc-color-brand);
	transform: scaleX(1);
	transform-origin: left center;
}

[dir="rtl"] .sc-stat-band__list::before {
	transform-origin: right center;
}

.sc-stat-band--inverse .sc-stat-band__list::before {
	background-color: var(--sc-color-graphic-light);
}

/*
 * The card. A hairline top border and a soft fill, so three figures read as
 * three separate proofs rather than as one run-on row of type. The corner takes
 * the small media radius: it is a card, not a hero, and the two tokens exist
 * precisely so that a card cannot borrow a hero's corner.
 */
.sc-stat {
	position: relative;
	isolation: isolate;
	min-inline-size: 0;
	padding: var(--sc-space-lg) var(--sc-space-md) var(--sc-space-md);
	border: var(--sc-border-width) solid var(--sc-color-border-subtle);
	border-block-start: var(--sc-border-width-strong) solid var(--sc-color-brand);
	border-radius: var(--sc-radius-media-sm);
	background-color: var(--sc-color-surface);
	overflow: hidden;
}

.sc-stat-band--inverse .sc-stat {
	border-color: var(--sc-color-border-inverse);
	border-block-start-color: var(--sc-color-graphic-light);
	background-color: rgb(255 255 255 / 5%);
}

/*
 * The ring. Clipped to the card's corner by the card's own `overflow: hidden`,
 * and bled off the trailing edge so it reads as a cropped brand mark rather than
 * as a chart placed behind a number.
 */
.sc-stat__ring {
	position: absolute;
	z-index: -1;
	inset-block-start: calc(-1.75rem);
	inset-inline-end: calc(-2.25rem);
	inline-size: 8.5rem;
	block-size: 8.5rem;
	pointer-events: none;
	color: var(--sc-color-brand);
	opacity: 0.16;
}

.sc-stat-band--inverse .sc-stat__ring {
	color: var(--sc-color-graphic-light);
	opacity: 0.24;
}

.sc-stat__ring svg {
	inline-size: 100%;
	block-size: 100%;
	transform: rotate(-90deg);
}

.sc-stat__ring-track {
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.5;
	opacity: 0.45;
}

/*
 * The arc is a quarter turn on every card. `stroke-dasharray` is set from the
 * circumference rather than from a value, so the mark is identical on all three
 * and cannot be read as a proportion of the figure beside it.
 */
.sc-stat__ring-arc {
	fill: none;
	stroke: currentcolor;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 82 327;
}

/*
 * The figure. `tabular-nums` is applied here rather than only inside the
 * counting state, so the line box does not change width on the frame the count
 * starts — a proportional figure that swaps to tabular mid-animation shifts the
 * label under it.
 */
.sc-stat__value {
	margin: 0;
	font-family: var(--sc-font-family-heading);
	font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4rem);
	font-weight: var(--sc-font-weight-medium);
	line-height: 1;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	color: var(--sc-color-heading);
}

.sc-stat-band--inverse .sc-stat__value {
	color: var(--sc-color-text-inverse);
}

.sc-stat__label {
	margin-block: var(--sc-space-sm) 0;
	margin-inline-start: 0;
	font-size: var(--sc-font-size-lg);
	font-weight: var(--sc-font-weight-semibold);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-heading);
	text-wrap: balance;
}

.sc-stat-band--inverse .sc-stat__label {
	color: var(--sc-color-text-inverse);
}

/*
 * The grade bar. A fixed 3rem of accent under each figure — the same length for
 * all three, whatever they say. It is a separator with the brand's colour in it,
 * not a gauge.
 */
.sc-stat__grade {
	display: block;
	inline-size: var(--sc-stat-grade);
	block-size: var(--sc-border-width-strong);
	margin-block-start: var(--sc-space-md);
	border-radius: var(--sc-radius-sm);
	background-color: var(--sc-color-brand);
	transform: scaleX(1);
	transform-origin: left center;
}

[dir="rtl"] .sc-stat__grade {
	transform-origin: right center;
}

.sc-stat-band--inverse .sc-stat__grade {
	background-color: var(--sc-color-graphic-light);
}

.sc-stat__context {
	margin-block: var(--sc-space-sm) 0;
	margin-inline-start: 0;
	font-size: var(--sc-font-size-sm);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-text-muted);
}

.sc-stat-band--inverse .sc-stat__context {
	color: var(--sc-color-text-on-brand-muted);
}

/* ===========================================================================
 * 4. Technical callout
 *
 * One paragraph of technical explanation that must not be skimmed past. It is
 * not a quotation and not an advert: it is the note a process engineer needs
 * before the next section makes sense, so it is set on its own surface with a
 * rule down the leading edge and no icon competing with the sentence.
 * =========================================================================== */

.sc-callout {
	margin-block: var(--sc-space-lg);
	padding: var(--sc-space-lg);
	border: var(--sc-border-width) solid var(--sc-color-brand-border);
	border-inline-start-width: 3px;
	border-inline-start-color: var(--sc-color-brand);
	border-radius: var(--sc-radius-md);
	background-color: var(--sc-color-surface-pale);
}

.sc-callout__title {
	margin: 0;
	font-size: var(--sc-font-size-lg);
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-heading);
}

.sc-callout__body {
	margin-block-start: var(--sc-space-2xs);
	max-inline-size: var(--sc-measure);
	color: var(--sc-color-text-muted);
}

.sc-callout__list {
	margin-block-start: var(--sc-space-sm);
	margin-inline-start: 0;
	padding-inline-start: var(--sc-space-md);
	color: var(--sc-color-text-muted);
}

.sc-callout__list li + li {
	margin-block-start: var(--sc-space-3xs);
}

/* ===========================================================================
 * 5. Timeline
 *
 * A sequence with dates. On a phone it is a single column of entries against
 * one continuous rule — a vertical list is the only shape that stays readable
 * at 390px, and the rule is what makes it a timeline rather than a list. From
 * 64rem the entries distribute across the width, so a twenty-year history reads
 * as one sweep.
 * =========================================================================== */

.sc-timeline {
	padding-block: var(--sc-space-2xl);
}

.sc-timeline__list {
	position: relative;
	margin: 0;
	padding: 0;
	padding-inline-start: var(--sc-space-lg);
	list-style: none;
	border-inline-start: var(--sc-border-width-strong) solid var(--sc-color-border-subtle);
}

.sc-timeline__item {
	position: relative;
	padding-block-end: var(--sc-space-xl);
}

.sc-timeline__item:last-child {
	padding-block-end: 0;
}

/* The node. Positioned against the rule rather than drawn as a border, so it
   stays circular whatever the entry's height. */
.sc-timeline__item::before {
	content: "";
	position: absolute;
	inset-block-start: 0.45em;
	inset-inline-start: calc(-1 * var(--sc-space-lg) - 5px);
	inline-size: 10px;
	block-size: 10px;
	border: 2px solid var(--sc-color-brand);
	border-radius: 50%;
	background-color: var(--sc-color-surface);
}

.sc-timeline__year {
	margin: 0;
	font-family: var(--sc-font-family-heading);
	font-size: var(--sc-font-size-xl);
	font-weight: var(--sc-font-weight-bold);
	letter-spacing: -0.02em;
	color: var(--sc-color-brand-strong);
}

.sc-timeline__title {
	margin-block: var(--sc-space-3xs) 0;
	font-size: var(--sc-font-size-lg);
	color: var(--sc-color-heading);
}

.sc-timeline__body {
	margin-block-start: var(--sc-space-2xs);
	max-inline-size: var(--sc-measure);
	color: var(--sc-color-text-muted);
}

@media (width >= 64rem) {
	.sc-timeline__list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		gap: 0 var(--sc-space-lg);
		padding-inline-start: 0;
		padding-block-start: var(--sc-space-xl);
		border-inline-start: 0;
		border-block-start: var(--sc-border-width-strong) solid var(--sc-color-border-subtle);
	}

	.sc-timeline__item {
		padding-block-end: 0;
	}

	.sc-timeline__item::before {
		inset-block-start: calc(-1 * var(--sc-space-xl) - 5px);
		inset-inline-start: 0;
	}
}

/* ===========================================================================
 * 6. Process steps
 *
 * A sequence without dates: the stages of an engagement, in order. The number
 * is drawn as a set figure rather than a decorative badge, because the order is
 * the information.
 * =========================================================================== */

.sc-steps {
	padding-block: var(--sc-space-2xl);
}

.sc-steps__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--sc-space-lg);
	margin: 0;
	margin-block-start: var(--sc-space-xl);
	padding: 0;
	list-style: none;
}

.sc-step {
	position: relative;
	min-inline-size: 0;
	padding-block-start: var(--sc-space-lg);
	border-block-start: var(--sc-border-width) solid var(--sc-color-border);
}

.sc-step__title {
	margin: 0;
	font-size: var(--sc-font-size-lg);
	color: var(--sc-color-heading);
}

.sc-step__body {
	margin-block-start: var(--sc-space-2xs);
	color: var(--sc-color-text-muted);
}

/*
 * The index is drawn as a set figure from the markup, not from a CSS counter.
 * A counter is generated by the browser after the document is built, so the
 * Persian numeral pass cannot reach it and a Persian page would number its
 * steps in Latin digits beside Persian ones.
 */
.sc-step__index {
	display: block;
	margin-block-end: var(--sc-space-xs);
	font-family: var(--sc-font-family-heading);
	font-size: var(--sc-font-size-sm);
	font-weight: var(--sc-font-weight-bold);
	letter-spacing: var(--sc-letter-spacing-wide);
	color: var(--sc-color-brand);
}

/* ===========================================================================
 * 7. Capability matrix
 *
 * Requirement against what the site can actually say about it. A matrix is the
 * right shape for this because the reader's question is "for my case, what is
 * there" and each row is one case.
 * =========================================================================== */

.sc-matrix {
	padding-block: var(--sc-space-2xl);
}

.sc-matrix__table {
	inline-size: 100%;
	margin-block-start: var(--sc-space-xl);
	border-collapse: collapse;
}

.sc-matrix__table th,
.sc-matrix__table td {
	padding-block: var(--sc-space-sm);
	padding-inline: var(--sc-space-sm) var(--sc-space-md);
	border-block-end: var(--sc-border-width) solid var(--sc-color-border-subtle);
	text-align: start;
	vertical-align: top;
}

.sc-matrix__table thead th {
	border-block-end-width: 2px;
	border-block-end-color: var(--sc-color-brand);
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: var(--sc-letter-spacing-wide);
	text-transform: uppercase;
	color: var(--sc-color-text-subtle);
}

.sc-matrix__table tbody th {
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-heading);
}

.sc-matrix__table td {
	color: var(--sc-color-text-muted);
}

@media (width < 48rem) {
	/*
	 * On a phone the matrix becomes one card per requirement. A horizontally
	 * scrolling table hides its own header, and a technical reader comparing
	 * three columns cannot do it through a scroll window.
	 */
	.sc-matrix__table,
	.sc-matrix__table tbody,
	.sc-matrix__table tr,
	.sc-matrix__table th,
	.sc-matrix__table td {
		display: block;
		inline-size: 100%;
	}

	.sc-matrix__table thead {
		display: none;
	}

	.sc-matrix__table tr {
		padding-block: var(--sc-space-md);
		border-block-end: var(--sc-border-width) solid var(--sc-color-border-subtle);
	}

	.sc-matrix__table th,
	.sc-matrix__table td {
		padding: 0;
		border: 0;
	}

	.sc-matrix__table tbody th {
		font-size: var(--sc-font-size-lg);
	}

	.sc-matrix__table td {
		margin-block-start: var(--sc-space-2xs);
	}
}

/* ===========================================================================
 * 8. Reference strip
 *
 * Named references and registrations. Each item is a name and, where the source
 * gives one, a short qualifier — never a logo wall, because a logo the client
 * has not supplied is a logo the site has invented.
 * =========================================================================== */

.sc-reference-strip {
	padding-block: var(--sc-space-2xl);
}

.sc-reference-strip__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 0;
	margin: 0;
	margin-block-start: var(--sc-space-xl);
	padding: 0;
	list-style: none;
	border-block-start: var(--sc-border-width) solid var(--sc-color-border-subtle);
}

.sc-reference-strip__item {
	min-inline-size: 0;
	padding: var(--sc-space-md) var(--sc-space-md) var(--sc-space-md) 0;
	border-block-end: var(--sc-border-width) solid var(--sc-color-border-subtle);
}

.sc-reference-strip__name {
	margin: 0;
	font-size: var(--sc-font-size-base);
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-heading);
}

.sc-reference-strip__detail {
	margin-block: var(--sc-space-3xs) 0;
	font-size: var(--sc-font-size-sm);
	color: var(--sc-color-text-muted);
}

/* ===========================================================================
 * 9. Certificate strip
 *
 * Standards and registrations. A drawn mark, the standard's number and its
 * scope: enough to be checked, and nothing that implies a certification the
 * client has not been issued.
 * =========================================================================== */

.sc-certificate-strip {
	padding-block: var(--sc-space-xl);
	background-color: var(--sc-color-surface);
	border-block: var(--sc-border-width) solid var(--sc-color-border-subtle);
}

.sc-certificate-strip__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--sc-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-certificate {
	display: flex;
	flex-direction: column;
	gap: var(--sc-space-3xs);
	min-inline-size: 0;
	padding-block-start: var(--sc-space-sm);
	border-block-start: 2px solid var(--sc-color-brand);
}

.sc-certificate__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: 3rem;
	margin-block-end: var(--sc-space-2xs);
	border: 2px solid var(--sc-color-brand);
	border-radius: 50%;
	font-family: var(--sc-font-family-heading);
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-bold);
	letter-spacing: 0.02em;
	color: var(--sc-color-brand-strong);
}

.sc-certificate__code {
	margin: 0;
	font-size: var(--sc-font-size-lg);
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-heading);
}

.sc-certificate__scope {
	margin: 0;
	font-size: var(--sc-font-size-sm);
	color: var(--sc-color-text-muted);
}

/* ===========================================================================
 * 10. Reading column
 *
 * The editorial measure for an article. Applied to the article body only, so
 * the hero, the metadata and the related grid keep the full page width.
 * =========================================================================== */

.sc-article {
	padding-block: var(--sc-space-2xl);
}

.sc-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-sm);
	margin-block-start: var(--sc-space-md);
	font-size: var(--sc-font-size-sm);
	color: var(--sc-color-text-subtle);
}

.sc-article__meta > * {
	margin: 0;
}

.sc-article__body {
	max-inline-size: var(--sc-measure-editorial);
}

.sc-article__body > * + * {
	margin-block-start: var(--sc-space-md);
}

.sc-article__body :is(h2, h3) {
	margin-block-start: var(--sc-space-xl);
}

.sc-article__body img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--sc-radius-md);
}

/* ===========================================================================
 * 11. Contact detail list
 *
 * Address, telephone, email, hours and messaging, each as a labelled row. The
 * row is a grid rather than a definition list so the label column stays aligned
 * across entries, which is what makes the block scannable.
 * =========================================================================== */

.sc-contact-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: var(--sc-border-width) solid var(--sc-color-border-subtle);
}

.sc-contact-list__item {
	display: grid;
	grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
	gap: var(--sc-space-sm);
	padding-block: var(--sc-space-md);
	border-block-end: var(--sc-border-width) solid var(--sc-color-border-subtle);
}

.sc-contact-list__label {
	font-size: var(--sc-font-size-sm);
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-text-subtle);
}

.sc-contact-list__value {
	min-inline-size: 0;
	color: var(--sc-color-heading);
}

.sc-contact-list__value a {
	color: var(--sc-color-link);
}

@media (width < 48rem) {
	.sc-contact-list__item {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sc-space-3xs);
	}
}

/* ===========================================================================
 * 12. Location frame
 *
 * The map, held to a fixed ratio so the page does not jump while it loads. The
 * frame is a plain surface with a caption beneath it; the map itself is an
 * embed the client can point at anything.
 * =========================================================================== */

.sc-location {
	margin-block-start: var(--sc-space-xl);
}

.sc-location__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border: var(--sc-border-width) solid var(--sc-color-border-subtle);
	border-radius: var(--sc-radius-lg);
	background-color: var(--sc-color-surface-sunken);
}

.sc-location__frame > iframe,
.sc-location__frame > img {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	object-fit: cover;
}

.sc-location__caption {
	margin-block-start: var(--sc-space-sm);
	font-size: var(--sc-font-size-sm);
	color: var(--sc-color-text-subtle);
}

/* ===========================================================================
 * 13. Related content
 * =========================================================================== */

.sc-related {
	padding-block: var(--sc-space-2xl);
}

.sc-related__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--sc-space-lg);
	margin: 0;
	margin-block-start: var(--sc-space-xl);
	padding: 0;
	list-style: none;
}

/* ===========================================================================
 * 14. Bounds
 * =========================================================================== */

.sc-media-hero,
.sc-split,
.sc-stat-band,
.sc-timeline,
.sc-steps,
.sc-matrix,
.sc-reference-strip,
.sc-article,
.sc-related {
	overflow-wrap: break-word;
}

/* ===========================================================================
 * 15. Floating WhatsApp button
 *
 * The button is provided by the Joinchat plugin; what is set here is only where
 * it sits and how quietly it arrives. The plugin's own styling — the recognisable
 * WhatsApp green, the glyph, the shape — is left alone, because a chat button
 * that does not look like one is a button nobody presses.
 *
 * Positioning is the part that needs the theme's help:
 *
 *   - bottom/right are physical in the plugin, so the safe area is applied to
 *     whichever corner the button is anchored in rather than assumed.
 *   - the plugin's 6px inset is under the minimum touch separation from a
 *     screen edge and sits on top of a phone's home indicator, which is where a
 *     thumb rests; a comfortable inset and `env(safe-area-inset-bottom)` move it
 *     clear of both.
 *   - the footer's own actions are at the bottom of the document, and the button
 *     is fixed: the inset is what keeps the two from occupying the same pixels.
 * ------------------------------------------------------------------------- */

.joinchat.joinchat--right {
	inset-block-end: calc(1.25rem + env(safe-area-inset-bottom, 0px));
	inset-inline-end: 1rem;
}

.joinchat.joinchat--left {
	inset-block-end: calc(1.25rem + env(safe-area-inset-bottom, 0px));
	inset-inline-start: 1rem;
}

@media (width < 48rem) {
	.joinchat.joinchat--right {
		inset-inline-end: 0.75rem;
	}

	.joinchat.joinchat--left {
		inset-inline-start: 0.75rem;
	}
}

/*
 * The button arrives with the plugin's own entrance: a keyframe that scales the
 * wrapper from zero. It is removed here for two reasons, and both matter.
 *
 * It is the aggressive part of the widget — a control that pops into existence
 * after a delay is the behaviour the brief rules out on a technical site — and
 * it is also fragile: the wrapper's resting declaration is `scale3d(0, 0, 0)`
 * and only the animation lifts it to full size, so anywhere the animation does
 * not run — a reduced-motion preference, a non-painting tab, a printer, an
 * aggressive animation-blocking extension — the button is not merely missing its
 * entrance, it is invisible while still being focusable. A floating contact
 * button that a keyboard user can tab to and not see is worse than no button.
 *
 * Forcing the wrapper flat makes the button present from the first paint, which
 * is also the correct resting state for a control that has nothing to animate.
 */
.joinchat,
.joinchat--show {
	transform: none !important;
	animation: none !important;
}

/* Reduced motion then only has to remove what is left: the colour and opacity
   transitions on the button face and the tooltip. */
@media (prefers-reduced-motion: reduce) {
	.joinchat *,
	.joinchat *::before,
	.joinchat *::after {
		transition: none !important;
		animation: none !important;
	}
}