/*!
 * Sarv Catalyst — Company pages
 *
 * Loaded on the About page and the R&D / Technology page, and nowhere else. Like
 * the Contact, catalogue, Industries and Services stylesheets it is not part of
 * the shared ladder: it loads after `utilities.css` and therefore wins a tie
 * against a rule there, which is how these pages can be drawn without editing the
 * layer every other template depends on.
 *
 * The two pages share one file because they are one kind of page: a compact hero,
 * editorial bands, and a closing invitation. Sharing it is also what stops the
 * two from slowly acquiring different versions of the same section.
 *
 * Everything below reads the approved design tokens. No value is invented, no
 * colour is written as a literal, and every offset uses logical properties so the
 * pages mirror with the rest of the site.
 *
 * Cascade order in this file:
 *   1. Hero
 *   2. Overview / focus
 *   3. What we do
 *   4. Evidence band
 *   5. How we work
 *   6. Approach band
 *   7. Capability groups
 *   8. Bridge
 *   9. Closing invitation
 *  10. Responsive
 */

.sc-about,
.sc-research {
	--sc-company-hero-padding: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
	--sc-company-rule: var(--sc-color-border-subtle);
}

/* ===========================================================================
 * 1. Hero
 * ======================================================================== */

.sc-about-hero,
.sc-research-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--sc-color-surface-pale);
}

.sc-about-hero__pattern,
.sc-research-hero__pattern {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	inline-size: var(--sc-pattern-size-md);
	block-size: var(--sc-pattern-size-md);
	inset-block-start: -30%;
	inset-inline-end: -8%;
	background-color: var(--sc-color-pattern-line);
	opacity: var(--sc-pattern-opacity);
	mask-image: url("../images/brand/sarv-hero-pattern.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: cover;
}

.sc-about-hero .sc-container,
.sc-research-hero .sc-container {
	position: relative;
	z-index: 1;
}

.sc-about-hero__inner,
.sc-research-hero__inner {
	padding-block: var(--sc-company-hero-padding);
}

.sc-research-hero__inner {
	display: grid;
	gap: var(--sc-space-lg);
	align-items: center;
}

.sc-about-hero .sc-breadcrumbs,
.sc-research-hero .sc-breadcrumbs {
	margin-block-end: var(--sc-space-md);
}

.sc-about-hero__title,
.sc-research-hero__title {
	margin-block: var(--sc-space-sm) var(--sc-space-md);
	font-size: var(--sc-font-size-4xl);
	font-weight: var(--sc-font-weight-bold);
	line-height: var(--sc-line-height-tight);
	letter-spacing: var(--sc-letter-spacing-tight);
	color: var(--sc-color-heading);
}

.sc-about-hero__line,
.sc-research-hero__line {
	display: block;
}

.sc-about-hero__line--accent,
.sc-research-hero__line--accent {
	color: var(--sc-color-brand);
}

.sc-about-hero__lead,
.sc-research-hero__lead {
	max-inline-size: var(--sc-measure);
	margin-block: 0;
	font-size: var(--sc-font-size-lg);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-text-muted);
}

.sc-research-hero__media {
	overflow: hidden;
	border-radius: var(--sc-radius-media);
	background-color: var(--sc-color-surface-muted);
}

.sc-research-hero__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

/* ===========================================================================
 * 2. Overview / focus
 * ======================================================================== */

.sc-about-overview,
.sc-research-focus {
	padding-block: var(--sc-space-section);
	background-color: var(--sc-color-surface);
}

/*
 * The overview's measure. Text-only sections keep the reading measure; the split
 * shape hands the measure to the copy column instead, because a single cap on
 * the grid would stop the photograph from taking its half.
 */
.sc-about-overview__inner,
.sc-research-focus__inner {
	max-inline-size: var(--sc-measure);
}

/*
 * The split. Copy on the leading side, a photograph on the trailing side, the
 * picture cut with the system's media radius. This is the same composition as
 * the About hero above it, so the page reads as one design rather than as a hero
 * followed by a document.
 */
.sc-about-overview--split .sc-about-overview__inner {
	display: grid;
	gap: clamp(1.75rem, 3vw, 4rem);
	max-inline-size: none;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: center;
}

.sc-about-overview__media {
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	min-inline-size: 0;
	border-radius: var(--sc-radius-media);
	background-color: var(--sc-color-surface-sunken);
}

.sc-about-overview__media img {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

@media (width < 64rem) {
	.sc-about-overview--split .sc-about-overview__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-about-overview__media {
		aspect-ratio: 16 / 10;
		border-radius: var(--sc-radius-media-sm);
	}
}

.sc-about-overview__paragraph,
.sc-research-focus__paragraph {
	margin-block: 0 var(--sc-space-md);
	font-size: var(--sc-font-size-lg);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-text);
}

.sc-about-overview__paragraph:first-of-type,
.sc-research-focus__paragraph:first-of-type {
	margin-block-start: var(--sc-space-md);
}

.sc-about-overview__paragraph:last-child,
.sc-research-focus__paragraph:last-child {
	margin-block-end: 0;
}

/* ===========================================================================
 * 3. What we do
 * ======================================================================== */

.sc-about-scope {
	padding-block: var(--sc-space-section);
	background-color: var(--sc-color-surface-pale);
}

.sc-about-scope__intro {
	max-inline-size: var(--sc-measure);
	margin-block-end: var(--sc-space-xl);
}

.sc-about-scope__lead {
	margin-block-start: var(--sc-space-md);
}

.sc-about-scope__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-about-family {
	padding-block: var(--sc-space-lg);
	border-block-start: var(--sc-border-width) solid var(--sc-company-rule);
}

.sc-about-family__title {
	margin-block: 0 var(--sc-space-2xs);
	font-size: var(--sc-font-size-xl);
	font-weight: var(--sc-font-weight-semibold);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-heading);
}

/* The link fills its row so the target is a touch target rather than the
   height of a line of text; the affordance is an underline at the text. */
.sc-about-family__link {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--sc-touch-target);
	color: inherit;
	text-decoration: none;
}

.sc-about-family__link:is(:hover, :focus-visible) {
	color: var(--sc-color-brand-strong);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.sc-about-family__link:focus-visible {
	outline: var(--sc-focus-outline);
	outline-offset: var(--sc-focus-offset);
}

.sc-about-family__description {
	max-inline-size: var(--sc-measure);
	margin-block: 0;
	font-size: var(--sc-font-size-base);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-text-muted);
}

.sc-about-scope__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-sm);
	margin-block: var(--sc-space-xl) 0;
}

/* ===========================================================================
 * 4. Evidence band
 * ======================================================================== */

.sc-about-evidence {
	padding-block: var(--sc-space-section);
	background-color: var(--sc-color-surface);
}

.sc-about-evidence__list {
	display: grid;
	gap: var(--sc-space-lg);
	margin: var(--sc-space-xl) 0 0;
	padding: 0;
	list-style: none;
}

.sc-about-commitment {
	padding-block-start: var(--sc-space-md);
	border-block-start: var(--sc-border-width-strong) solid var(--sc-color-brand-subtle);
}

.sc-about-commitment__label {
	display: block;
	font-size: var(--sc-font-size-sm);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: var(--sc-letter-spacing-wide);
	text-transform: uppercase;
	color: var(--sc-color-brand-strong);
}

.sc-about-commitment__detail {
	display: block;
	margin-block-start: var(--sc-space-2xs);
	font-size: var(--sc-font-size-xl);
	font-weight: var(--sc-font-weight-semibold);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-heading);
}

/* ===========================================================================
 * 5. How we work / 6. Approach band
 * ======================================================================== */

.sc-about-approach,
.sc-research-approach {
	padding-block: var(--sc-space-section);
	background-color: var(--sc-color-surface-pale);
}

.sc-about-approach__intro,
.sc-research-approach__intro {
	max-inline-size: var(--sc-measure);
	margin-block-end: var(--sc-space-xl);
}

.sc-about-approach__lead,
.sc-research-approach__lead {
	margin-block-start: var(--sc-space-md);
}

.sc-about-approach__steps,
.sc-research-approach__steps {
	display: grid;
	gap: var(--sc-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.sc-about-step,
.sc-research-step {
	padding-block-start: var(--sc-space-md);
	border-block-start: var(--sc-border-width-strong) solid var(--sc-color-brand-subtle);
}

.sc-about-step__number,
.sc-research-step__number {
	display: block;
	font-size: var(--sc-font-size-sm);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: var(--sc-letter-spacing-wide);
	color: var(--sc-color-accent);
}

.sc-about-step__label,
.sc-research-step__label {
	margin-block: var(--sc-space-2xs) var(--sc-space-2xs);
	font-size: var(--sc-font-size-xl);
	font-weight: var(--sc-font-weight-semibold);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-heading);
}

.sc-about-step__text,
.sc-research-step__text {
	margin-block: 0;
	font-size: var(--sc-font-size-base);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-text-muted);
}

/* ===========================================================================
 * 7. Capability groups
 * ======================================================================== */

.sc-research-capability {
	padding-block: var(--sc-space-section);
	background-color: var(--sc-color-surface);
}

.sc-research-capability__intro {
	max-inline-size: var(--sc-measure);
	margin-block-end: var(--sc-space-xl);
}

.sc-research-capability__lead {
	margin-block-start: var(--sc-space-md);
}

.sc-research-capability__groups {
	display: grid;
	gap: var(--sc-space-xl);
}

.sc-research-group__title {
	margin-block: 0 var(--sc-space-sm);
	font-size: var(--sc-font-size-xl);
	font-weight: var(--sc-font-weight-semibold);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-heading);
}

.sc-research-group__text {
	margin-block: 0 var(--sc-space-md);
	font-size: var(--sc-font-size-base);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-text-muted);
}

.sc-research-group__points {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-research-group__point {
	padding-block: var(--sc-space-2xs);
	font-size: var(--sc-font-size-base);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-text);
	border-block-start: var(--sc-border-width) solid var(--sc-company-rule);
}

/* ===========================================================================
 * 8. Bridge
 * ======================================================================== */

.sc-about-bridge,
.sc-research-bridge {
	padding-block: var(--sc-space-section);
	background-color: var(--sc-color-surface-pale);
	border-block-start: var(--sc-border-width) solid var(--sc-color-border-subtle);
}

.sc-about-bridge__inner,
.sc-research-bridge__inner {
	max-inline-size: var(--sc-measure);
}

.sc-about-bridge__title,
.sc-research-bridge__title {
	margin-block: 0 var(--sc-space-md);
	font-size: var(--sc-font-size-2xl);
	font-weight: var(--sc-font-weight-bold);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-heading);
}

.sc-about-bridge__body,
.sc-research-bridge__body {
	margin-block: 0 var(--sc-space-lg);
	font-size: var(--sc-font-size-lg);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-text-muted);
}

.sc-about-bridge__action,
.sc-research-bridge__action {
	margin: 0;
}

/* ===========================================================================
 * 12. Leadership
 *
 * The board, as a single editorial band rather than a grid that fills up with
 * whoever is added. Four people is the whole list at a company this size, so the
 * row is sized for four and the portraits are equal squares.
 *
 * The portrait frame takes the same media radius as every other picture on the
 * site, at the small tier: the frame is 200-odd pixels tall, and the hero's 16px
 * on a picture that size is a quarter of its height.
 * ======================================================================== */

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

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

.sc-leadership__frame {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	margin: 0;
	overflow: hidden;
	border-radius: var(--sc-radius-media);
	background-color: var(--sc-color-surface-sunken);
}

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

/*
 * The plate shown while no portrait is set. It cannot be a broken frame: a name
 * and a role either have a face beside them or they have the person's initials,
 * and a grey rectangle would read as a photograph that failed to load.
 */
.sc-leadership__initials {
	font-family: var(--sc-font-family-heading);
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
	font-weight: var(--sc-font-weight-medium);
	letter-spacing: 0.02em;
	color: var(--sc-color-text-subtle);
}

.sc-leadership__name {
	margin: var(--sc-space-md) 0 0;
	font-family: var(--sc-font-family-heading);
	font-size: var(--sc-font-size-lg);
	font-weight: var(--sc-font-weight-semibold);
	line-height: var(--sc-line-height-snug);
	text-wrap: balance;
	color: var(--sc-color-heading);
}

.sc-leadership__role {
	margin-block: var(--sc-space-2xs) 0;
	font-size: var(--sc-font-size-sm);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-text-muted);
}

/* ===========================================================================
 * 13. Certification and references
 *
 * Two proofs in one band: the certificate plate says the company is audited, and
 * the map says the plants already run the catalyst. The map leads, because it is
 * the one a technical buyer reads first, and the plate sits beside it at a size
 * that keeps its own detail legible.
 * ======================================================================== */

.sc-credentials {
	display: grid;
	gap: var(--sc-space-xl);
	margin-block-start: var(--sc-space-xl);
}

.sc-credentials__map {
	margin: 0;
}

.sc-credentials__map img {
	display: block;
	inline-size: 100%;
	max-inline-size: 40rem;
	block-size: auto;
	margin-inline: auto;
	border-radius: var(--sc-radius-media);
	background-color: var(--sc-color-surface-sunken);
}

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

.sc-credentials__certificates {
	display: grid;
	gap: var(--sc-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-credentials__plate {
	display: block;
	overflow: hidden;
	border: var(--sc-border-width) solid var(--sc-color-border-subtle);
	border-radius: var(--sc-radius-media);
	background-color: var(--sc-color-surface);
	box-shadow: var(--sc-shadow-sm);
}

.sc-credentials__plate img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.sc-credentials__label {
	margin-block: var(--sc-space-sm) 0;
	font-size: var(--sc-font-size-sm);
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-heading);
}

@media (width >= 64rem) {
	.sc-credentials {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		align-items: start;
	}
}

/* ===========================================================================
 * 9. Closing invitation
 * ======================================================================== */

.sc-company-closing {
	padding-block: var(--sc-space-section);
	background-color: var(--sc-color-surface);
	border-block-start: var(--sc-border-width) solid var(--sc-color-border-subtle);
}

.sc-company-closing__inner {
	max-inline-size: var(--sc-measure);
}

.sc-company-closing__title {
	margin-block: 0 var(--sc-space-md);
	font-size: var(--sc-font-size-2xl);
	font-weight: var(--sc-font-weight-bold);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-heading);
}

.sc-company-closing__body {
	margin-block: 0 var(--sc-space-lg);
	font-size: var(--sc-font-size-lg);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-text-muted);
}

.sc-company-closing__action {
	margin: 0;
}

/* ===========================================================================
 * 10. Responsive
 * ======================================================================== */

@media (width >= 40rem) {
	.sc-about-evidence__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sc-about-approach__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sc-research-approach__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sc-research-capability__groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

	.sc-research-hero__media {
		block-size: 100%;
	}

	.sc-about-family {
		display: grid;
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
		column-gap: var(--sc-space-xl);
		align-items: start;
	}

	.sc-about-family__title {
		margin-block-end: 0;
	}

	.sc-about-evidence__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: var(--sc-space-xl);
	}

	.sc-research-approach__steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: var(--sc-space-xl);
	}

	.sc-about-step,
	.sc-research-step {
		border-block-start-width: 0;
		border-inline-start: var(--sc-border-width) solid var(--sc-company-rule);
	}

	.sc-about-step:first-child,
	.sc-research-step:first-child {
		border-inline-start-color: transparent;
	}
}