/*!
 * Sarv Catalyst — Components
 *
 * The site chrome and the shared presentational pieces used by more than one
 * template: header, navigation, footer, buttons, cards, breadcrumbs,
 * pagination, document links and specification lists.
 *
 * Rules:
 *   - Semantic tokens only. No hex values, no magic numbers.
 *   - Logical properties only, so Persian RTL is handled by the cascade.
 *   - No component may remove the global focus outline.
 *   - Every interactive element meets --sc-touch-target.
 *
 * Blocks are NOT styled here. Each block owns its own style.css so that
 * removing a block removes its CSS with it.
 */

/* ===========================================================================
 * Site header
 * ======================================================================== */

.sc-site-header__inner {
	min-block-size: var(--sc-header-height);
	gap: var(--sc-space-md);
}

.sc-site-header__branding {
	display: flex;
	flex-direction: column;
	gap: var(--sc-space-3xs);
	min-inline-size: 0;
}

.sc-site-header__tagline {
	margin: 0;
	line-height: var(--sc-line-height-tight);
}

/*
 * Brand lockup. The logo is a link to the front page, which is the strongest
 * convention on the web and one users rely on for orientation.
 */
.sc-branding {
	display: inline-flex;
	align-items: center;
	gap: var(--sc-space-2xs);
	text-decoration: none;
	color: inherit;
}

.sc-branding:hover {
	color: inherit;
}

.sc-branding__logo,
.custom-logo {
	inline-size: auto;

	/* Cap both axes so a wide logo cannot push the nav off screen. */
	max-block-size: 3rem;
	max-inline-size: 15rem;
}

.sc-branding__text {
	font-family: var(--sc-font-family-heading);
	font-size: var(--sc-font-size-xl);
	font-weight: var(--sc-font-weight-semibold);
	line-height: var(--sc-line-height-tight);
	letter-spacing: var(--sc-letter-spacing-tight);
	color: var(--sc-color-heading);
}

/* ===========================================================================
 * Navigation
 * ======================================================================== */

.sc-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--sc-touch-target);
	block-size: var(--sc-touch-target);
	padding: 0;
	border: var(--sc-border-width) solid var(--sc-color-border);
	border-radius: var(--sc-radius-sm);
	background-color: var(--sc-color-surface);
	color: var(--sc-color-text);
}

.sc-nav-toggle:hover {
	border-color: var(--sc-color-border-strong);
}

/*
 * Two-bar icon drawn with a border, so no icon font, no SVG request and no
 * extra markup beyond one decorative span.
 */
.sc-nav-toggle__bars,
.sc-nav-toggle__bars::after {
	display: block;
	inline-size: 1.25rem;
	block-size: 2px;
	background-color: currentcolor;
}

.sc-nav-toggle__bars::after {
	content: "";
	margin-block-start: 6px;
}

.sc-site-header__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;

	/* The panel is a flex child of the header cluster, so it must be allowed
	   to shrink below its content width or the header overflows. */
	min-inline-size: 0;
	gap: var(--sc-space-md);
}

.sc-primary-nav {
	min-inline-size: 0;
}

.sc-primary-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sc-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-primary-nav__list a {
	display: block;
	padding-block: var(--sc-space-xs);
	padding-inline: var(--sc-space-xs);
	min-block-size: var(--sc-touch-target);
	border-radius: var(--sc-radius-sm);
	color: var(--sc-color-text);
	font-weight: var(--sc-font-weight-medium);
	text-decoration: none;
}

.sc-primary-nav__list a:hover {
	background-color: var(--sc-color-surface-muted);
	color: var(--sc-color-brand-strong);
}

/*
 * Current page. Marked with a border rather than colour alone, because colour
 * alone fails WCAG 1.4.1 and is invisible to many users.
 */
.sc-primary-nav__list .current-menu-item > a,
.sc-primary-nav__list .current_page_item > a,
.sc-primary-nav__list [aria-current] > a,
.sc-primary-nav__list a[aria-current] {
	color: var(--sc-color-brand-strong);
	box-shadow: inset 0 -2px 0 0 var(--sc-color-brand);
}

/* Submenus. Shown on hover and on keyboard focus-within, never hover only. */
.sc-primary-nav__list .sub-menu {
	margin: 0;
	padding: var(--sc-space-2xs);
	list-style: none;
	min-inline-size: 14rem;
	background-color: var(--sc-color-surface);
	border: var(--sc-border-width) solid var(--sc-color-border);
	border-radius: var(--sc-radius-md);
	box-shadow: var(--sc-shadow-md);
}

/* ---- Small screens: the panel becomes a disclosure ----
 *
 * The panel is a dropdown below 90rem (1440px), and that threshold is set by
 * measurement rather than by taste.
 *
 * The one-row bar is the Russian bar, not the English one. Seven Russian
 * destinations measure 661px of type at 13.5px, and the row also has to carry
 * the brand lockup, the search, the consultation action and the language pair:
 * about 380px of chrome plus the mark. At 1440px the row has about 740px for the
 * destinations and Russian needs 721 — it fits, with room. Below 1440px it stops
 * fitting, and a row that does not fit does not wrap here: the navigation is a
 * shrinkable flex item, so its labels compress inside their boxes and run out
 * under the action button. That is what was happening at 1366 and 1280 in the
 * previous build, by 15px and 77px respectively, and it is why the menu read as
 * too small — the labels were being squeezed, not merely set small.
 *
 * Below the threshold the panel carries the same eight destinations at the full
 * body size, which is both larger and clearer than a compressed 13px bar. The
 * panel scrolls, which is the one layout that cannot collide with the copy.
 */

@media (width < 90rem) {
	.sc-site-header__nav {
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 0;
		display: block;
		padding: var(--sc-space-md);
		background-color: var(--sc-color-surface);
		border-block-end: var(--sc-border-width) solid var(--sc-color-border);
		box-shadow: var(--sc-shadow-md);
		max-block-size: calc(100vh - var(--sc-header-height));
		overflow-y: auto;
	}

	/*
	 * Inside the small-screen dropdown the action row becomes a full-width
	 * band under the menu links, and the search disclosure expands in place
	 * instead of floating over the panel it is already inside.
	 */
	.sc-site-header__nav .sc-site-header__actions {
		justify-content: space-between;
		inline-size: 100%;
		margin-block-start: var(--sc-space-sm);
		padding-block-start: var(--sc-space-sm);
		border-block-start: var(--sc-border-width) solid var(--sc-color-border);
	}

	.sc-site-header__inner {
		position: static;
	}

	.sc-primary-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.sc-primary-nav__list a {
		min-block-size: max(var(--sc-touch-target), 3rem);
		display: flex;
		align-items: center;
	}

	.sc-primary-nav__list .sub-menu {
		border: 0;
		box-shadow: none;
		padding-inline-start: var(--sc-space-md);
	}

	/* The panel is hidden with the `hidden` attribute from JavaScript. If
	   JavaScript never runs, the attribute is absent and the panel is visible,
	   which is the correct progressive-enhancement default. */
	.sc-site-header__nav[hidden] {
		display: none;
	}
}

/*
 * On phones the panel replaces the sticky header, which is where the disclosure
 * has always been anchored. The wider panel band keeps the sticky header: it is
 * already a containing block for the panel, so the panel stays attached to the
 * bar while the page scrolls.
 */
@media (width <= 63.999rem) {
	/*
	 * The panel is positioned against the header, so the header must establish
	 * the containing block.
	 */
	.sc-site-header {
		position: relative;
	}
}

@media (width >= 90rem) {
	.sc-nav-toggle {
		display: none;
	}

	/* Positioned submenus restore the dropdown behaviour on large screens. */
	.sc-primary-nav__list > .menu-item-has-children {
		position: relative;
	}

	.sc-primary-nav__list .sub-menu {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		z-index: var(--sc-z-dropdown);
		visibility: hidden;
		opacity: 0;
		transition:
			opacity var(--sc-transition-fast),
			visibility var(--sc-transition-fast);
	}

	.sc-primary-nav__list > .menu-item-has-children:hover > .sub-menu,
	.sc-primary-nav__list > .menu-item-has-children:focus-within > .sub-menu {
		visibility: visible;
		opacity: 1;
	}
}

/* ===========================================================================
 * Language switcher
 * ======================================================================== */

.sc-language-switcher__list {
	margin: 0;
	padding: 0;
	list-style: none;
	gap: var(--sc-space-2xs);
}

.sc-language-switcher__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--sc-touch-target);
	min-block-size: var(--sc-touch-target);
	padding-inline: var(--sc-space-2xs);
	border-radius: var(--sc-radius-sm);
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: var(--sc-letter-spacing-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sc-color-text-muted);
}

.sc-language-switcher__link:hover {
	background-color: var(--sc-color-surface-muted);
	color: var(--sc-color-brand-strong);
}

/*
 * The active language is text, not a link, and is distinguished by weight and
 * an underline rather than colour alone.
 */
.sc-language-switcher__link.is-current {
	color: var(--sc-color-heading);
	box-shadow: inset 0 -2px 0 0 var(--sc-color-brand);
}

/* ===========================================================================
 * Buttons
 *
 * Theme-side button classes. theme.json styles core/button similarly so that
 * editor-inserted buttons and template-inserted buttons look identical.
 * ======================================================================== */

.sc-button,
.sc-button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sc-space-2xs);
	min-block-size: var(--sc-touch-target);
	padding-block: var(--sc-button-padding-block);
	padding-inline: var(--sc-button-padding-inline);
	border: var(--sc-border-width-strong) solid transparent;
	border-radius: var(--sc-radius-sm);
	background-color: var(--sc-color-brand);
	color: var(--sc-color-text-on-brand);
	font-family: var(--sc-font-family-heading);
	font-weight: var(--sc-font-weight-semibold);
	line-height: var(--sc-line-height-tight);
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--sc-transition-fast),
		border-color var(--sc-transition-fast),
		color var(--sc-transition-fast);
}

.sc-button:hover,
.sc-button:focus {
	background-color: var(--sc-color-brand-hover);
	color: var(--sc-color-text-on-brand);
}

.sc-button--accent {
	background-color: var(--sc-color-accent);
}

.sc-button--accent:hover,
.sc-button--accent:focus {
	background-color: var(--sc-color-accent-hover);
}

/* Secondary action. A border keeps it visible without competing with the
   primary action, which is the entire 10% role of the accent colour. */
.sc-button--secondary {
	background-color: transparent;
	border-color: var(--sc-color-border-strong);
	color: var(--sc-color-brand-strong);
}

.sc-button--secondary:hover,
.sc-button--secondary:focus {
	background-color: var(--sc-color-brand-subtle);
	border-color: var(--sc-color-brand);
	color: var(--sc-color-brand-strong);
}

.sc-button--inverse {
	background-color: var(--sc-color-surface);
	color: var(--sc-color-brand-strong);
}

.sc-button--inverse:hover,
.sc-button--inverse:focus {
	background-color: var(--sc-color-surface-muted);
	color: var(--sc-color-brand-strong);
}

.sc-button--small {
	min-block-size: 2.25rem;
	padding-block: var(--sc-space-2xs);
	padding-inline: var(--sc-space-sm);
	font-size: var(--sc-font-size-sm);
}

/* ===========================================================================
 * Card
 *
 * A product or editorial summary. The whole card is not a link: the title is.
 * Wrapping everything in an anchor breaks text selection, screen-reader link
 * lists and right-click behaviour, and is a common accessibility failure.
 * ======================================================================== */

.sc-card {
	display: flex;
	flex-direction: column;
	background-color: var(--sc-color-surface-raised);
	border: var(--sc-border-width) solid var(--sc-color-border);
	border-radius: var(--sc-radius-md);
	overflow: hidden;
	transition:
		border-color var(--sc-transition-fast),
		box-shadow var(--sc-transition-fast);
}

.sc-card:hover {
	border-color: var(--sc-color-border-strong);
	box-shadow: var(--sc-shadow-sm);
}

/* The card grows a visible ring when its own title link receives focus, so
   keyboard users can see which card is active. */
.sc-card:focus-within {
	outline: var(--sc-focus-outline);
	outline-offset: var(--sc-focus-offset);
}

.sc-card__media {
	margin: 0;
	background-color: var(--sc-color-surface-sunken);
}

.sc-card__image {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.sc-card__placeholder {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	background-color: var(--sc-color-surface-sunken);
}

.sc-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sc-space-2xs);
	padding: var(--sc-space-md);
	flex: 1;
}

.sc-card__title {
	margin: 0;
	font-size: var(--sc-font-size-lg);
	line-height: var(--sc-line-height-snug);
}

.sc-card__title a {
	color: var(--sc-color-heading);
	text-decoration: none;
}

.sc-card__title a:hover {
	color: var(--sc-color-brand-strong);
	text-decoration: underline;
}

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

.sc-card__footer {
	margin-block-start: auto;
	padding-block-start: var(--sc-space-sm);
}

/* ===========================================================================
 * Breadcrumbs
 * ======================================================================== */

.sc-breadcrumbs {
	padding-block: var(--sc-space-sm);
	font-size: var(--sc-font-size-sm);
}

.sc-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sc-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: var(--sc-space-2xs);
	color: var(--sc-color-text-muted);
}

/*
 * Separator is decorative and therefore supplied by CSS, not by authored
 * content, and is flipped automatically by the logical direction.
 */
.sc-breadcrumbs li + li::before {
	content: "/";
	color: var(--sc-color-border-strong);
}

.sc-breadcrumbs a {
	color: var(--sc-color-text-muted);
}

.sc-breadcrumbs a:hover {
	color: var(--sc-color-brand-strong);
}

.sc-breadcrumbs [aria-current="page"] {
	color: var(--sc-color-text);
	font-weight: var(--sc-font-weight-medium);
}

/* ===========================================================================
 * Pagination
 * ======================================================================== */

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

.sc-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-pagination__item > *,
.sc-pagination .page-numbers > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--sc-touch-target);
	min-block-size: var(--sc-touch-target);
	padding-inline: var(--sc-space-2xs);
	border: var(--sc-border-width) solid var(--sc-color-border);
	border-radius: var(--sc-radius-sm);
	text-decoration: none;
	color: var(--sc-color-text);
}

.sc-pagination .page-numbers .current {
	background-color: var(--sc-color-brand);
	border-color: var(--sc-color-brand);
	color: var(--sc-color-text-on-brand);
	font-weight: var(--sc-font-weight-semibold);
}

.sc-pagination .page-numbers a:hover {
	background-color: var(--sc-color-brand-subtle);
	border-color: var(--sc-color-brand);
	color: var(--sc-color-brand-strong);
}

/* ===========================================================================
 * Document link
 *
 * Product documentation: PDFs, technical data sheets, certificates. Presents
 * format and size up front, because a download with no stated weight or type
 * is a usability failure on a metered mobile connection.
 * ======================================================================== */

.sc-document {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sc-space-2xs) var(--sc-space-sm);
	padding: var(--sc-space-sm);
	border: var(--sc-border-width) solid var(--sc-color-border);
	border-radius: var(--sc-radius-sm);
	background-color: var(--sc-color-surface);
	text-decoration: none;
	color: var(--sc-color-text);
}

.sc-document:hover {
	border-color: var(--sc-color-brand);
	background-color: var(--sc-color-brand-subtle);
	color: var(--sc-color-brand-strong);
}

.sc-document__label {
	font-weight: var(--sc-font-weight-medium);
}

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

/* ===========================================================================
 * Specification list
 *
 * Semantic <dl> output for technical data. Definition lists are the correct
 * markup for label/value pairs; a table is not required and a div soup is
 * inaccessible.
 * ======================================================================== */

.sc-specs {
	margin: 0;
}

.sc-specs__row {
	display: grid;
	gap: var(--sc-space-2xs) var(--sc-space-md);
	padding-block: var(--sc-space-xs);
	border-block-end: var(--sc-border-width) solid var(--sc-color-border-subtle);
}

@media (width >= 30rem) {
	.sc-specs__row {
		/* Label column is sized to content, value takes the remainder. */
		grid-template-columns: minmax(8rem, auto) 1fr;
	}
}

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

.sc-specs__value {
	margin: 0;
	color: var(--sc-color-heading);
	font-variant-numeric: tabular-nums;
}

.sc-specs__unit {
	margin-inline-start: var(--sc-space-3xs);
	color: var(--sc-color-text-muted);
	font-size: var(--sc-font-size-sm);
}

/* ===========================================================================
 * Calls to action
 * ======================================================================== */

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

.sc-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sc-space-md);
}

/* ===========================================================================
 * Site footer
 * ======================================================================== */

.sc-site-footer__column {
	min-inline-size: 0;
}

.sc-footer__widget-title {
	margin: 0;
	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-text-inverse);
}

.sc-site-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-site-footer__list li {
	margin-block-end: var(--sc-space-2xs);
}

.sc-site-footer__list a {
	color: var(--sc-color-text-muted);
	text-decoration: none;
}

.sc-site-footer__list a:hover {
	color: var(--sc-color-text-inverse);
	text-decoration: underline;
}

.sc-site-footer__address {
	margin-block: 0 1rem;
	color: var(--sc-color-text-muted);
	font-style: normal;
}

.sc-site-footer__address p:last-child {
	margin-block-end: 0;
}

.sc-site-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-xs) var(--sc-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-site-footer__legal-list a {
	color: var(--sc-color-text-muted);
	text-decoration: none;
}

.sc-site-footer__legal-list a:hover {
	color: var(--sc-color-brand-strong);
	text-decoration: underline;
}

/* ===========================================================================
 * Empty state
 * ======================================================================== */

.sc-no-results {
	padding-block: var(--sc-space-3xl);
	text-align: center;
}

.sc-no-results p {
	margin-inline: auto;
	color: var(--sc-color-text-muted);
}

/* ===========================================================================
 * Header actions
 *
 * Search and the consultation action share one row inside the navigation
 * panel. Everything here is visible at every width: the same nodes serve the
 * desktop bar and the small-screen dropdown, so no control exists twice.
 * ======================================================================== */

.sc-site-header__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sc-space-xs);
}

.sc-site-header__cta {
	/* The label is two words; wrapping it would make the header taller than
	   the sticky offset every anchor on the site is calculated from. */
	white-space: nowrap;
}

/* ===========================================================================
 * Search form
 * ======================================================================== */

.sc-search-form {
	margin: 0;
}

.sc-search-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-2xs);
	align-items: stretch;
}

.sc-search-form__field {
	flex: 1 1 12rem;
	min-inline-size: 0;
	min-block-size: var(--sc-touch-target);
	padding-block: var(--sc-space-2xs);
	padding-inline: var(--sc-space-sm);
	border: var(--sc-border-width) solid var(--sc-color-border-strong);
	border-radius: var(--sc-radius-sm);
	background-color: var(--sc-color-surface);
	color: var(--sc-color-text);
	font-family: var(--sc-font-family-base);
	font-size: var(--sc-font-size-base);
}

.sc-search-form__field::placeholder {
	color: var(--sc-color-text-subtle);
	opacity: 1;
}

.sc-search-form__submit {
	flex: 0 0 auto;
}

/* ===========================================================================
 * Brand pattern
 *
 * The graphic-pattern system is two SVG alpha masks applied to a solid
 * background: the official identity unit, and the official lattice that repeats
 * it. Colour therefore comes from the element, never from the file, which is
 * what lets the same official geometry sit on white, on brand blue and on the
 * inverse surface without a second asset or a filter.
 *
 * Patterns are decoration. They are inert, they are marked aria-hidden in the
 * markup, and they sit in a negative stacking layer inside a section that
 * establishes its own stacking context — never above content, never capturing
 * a pointer event, and never able to affect contrast.
 * ======================================================================== */

.sc-pattern {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background-color: var(--sc-color-graphic-mid);
	opacity: var(--sc-pattern-opacity);
	mask-mode: alpha;
	-webkit-mask-mode: alpha;
}

/*
 * Both assets are traced from the official brandbook Graphic Pattern
 * (Visual identity, page 15): the pattern is one identity unit — the mark plus
 * both wordmark lines at their original 119.7 × 26.8 proportions — repeated on
 * a 148.25 × 83.7 lattice whose second row is staggered by −33.9 pt. Neither
 * file is a redraw or a decorative interpretation.
 */

.sc-pattern--unit {
	mask-image: url("../images/pattern-brand-unit.svg");
	-webkit-mask-image: url("../images/pattern-brand-unit.svg");
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
	mask-size: contain;
	-webkit-mask-size: contain;
}

.sc-pattern--lattice {
	mask-image: url("../images/pattern-brand-lattice.svg");
	-webkit-mask-image: url("../images/pattern-brand-lattice.svg");
	mask-repeat: repeat;
	-webkit-mask-repeat: repeat;

	/* Offset zero rather than a keyword: the tile is seamless on all four
	   edges, so zero is already direction-agnostic. */
	mask-position: 0 0;
	-webkit-mask-position: 0 0;

	/* `auto` for the height, never a square: the tile is 148.25 × 83.7 and a
	   forced square would squash the identity geometry out of proportion. */
	mask-size: var(--sc-pattern-size-md) auto;
	-webkit-mask-size: var(--sc-pattern-size-md) auto;
}

/* ===========================================================================
 * Section header
 *
 * One eyebrow, one heading, one lead. Seven sections share it, so the heading
 * level, the accent mark and the measure stay identical down the page.
 * ======================================================================== */

.sc-section-header {
	max-inline-size: 48rem;
}

.sc-section-header__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--sc-space-2xs);
	margin: 0;
}

/* The accent rule. This is the entire red budget of a section header: a short
   stroke, never a fill, never the heading itself. */
.sc-section-header__mark {
	flex: 0 0 auto;
	inline-size: var(--sc-space-lg);
	block-size: var(--sc-border-width-strong);
	background-color: var(--sc-color-accent);
}

.sc-section-header__heading {
	margin: 0;
	font-size: var(--sc-font-size-3xl);
	letter-spacing: var(--sc-letter-spacing-tight);
}

.sc-section-header__lead {
	margin: 0;
	color: var(--sc-color-text-muted);
}

.sc-section-header--inverse .sc-section-header__lead {
	color: var(--sc-color-text-inverse);
}

/* ===========================================================================
 * Media
 *
 * A media slot holds a photograph. When no image resolves the template omits
 * the frame entirely rather than reserving its space: a stand-in surface would
 * read as a picture of a facility, a product or a laboratory, and the brief
 * rules those out. Every frame is an `.sc-ratio` box, so the image always has
 * a positioned container to crop against.
 * ======================================================================== */

.sc-media__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* ===========================================================================
 * Hero
 *
 * Asymmetric by intent: copy and visual are not equal halves, and the visual
 * is a single figure rather than a slideshow.
 * ======================================================================== */

.sc-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--sc-space-section) var(--sc-space-2xl);
	background-color: var(--sc-color-surface);
}

.sc-hero__pattern {
	inline-size: var(--sc-pattern-size-lg);
	block-size: var(--sc-pattern-size-lg);

	/* Bleeding off the edge is deliberate and follows the brandbook's own
	   cropping language: the pattern is shown cropped by the format, never
	   re-proportioned to fit inside it. */
	inset-block-start: -22%;
	inset-inline-end: -16%;
}

/* ===========================================================================
 * Credibility
 *
 * Qualitative capability statements, not statistics. The brief forbids
 * invented numbers, so there is nothing here to count up and no counter to
 * animate. The quarter-arc glyph is a geometric ornament in the mark's own
 * circular language, not the brand pattern.
 * ======================================================================== */

.sc-credibility {
	padding-block: var(--sc-space-xl);
	border-block: var(--sc-border-width) solid var(--sc-color-border);
}

.sc-credibility__glyph {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin-block-end: var(--sc-space-2xs);
	border-block-start: var(--sc-border-width-strong) solid var(--sc-color-brand);
	border-inline-end: var(--sc-border-width-strong) solid var(--sc-color-brand);
	border-start-end-radius: 100%;
}

/* ===========================================================================
 * Disclosure
 *
 * The shared accordion used by solution discovery and by the industry
 * explorer. Native <details>, so it works without JavaScript and every panel
 * is keyboard operable through the summary element the browser already made
 * focusable. The sign is drawn from two bars rather than a text glyph, so it
 * cannot be read out as "plus" by a screen reader.
 * ======================================================================== */

.sc-disclosure {
	border-block-end: var(--sc-border-width) solid var(--sc-color-border);
}

.sc-disclosure__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sc-space-md);
	min-block-size: var(--sc-touch-target);
	padding-block: var(--sc-space-sm);
	list-style: none;
	cursor: pointer;
}

.sc-disclosure__summary:hover {
	color: var(--sc-color-brand-strong);
}

.sc-disclosure__label {
	font-family: var(--sc-font-family-heading);
	font-size: var(--sc-font-size-lg);
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-heading);
}

.sc-disclosure__summary:hover .sc-disclosure__label {
	color: var(--sc-color-brand-strong);
}

.sc-disclosure__sign {
	position: relative;
	flex: 0 0 auto;
	inline-size: var(--sc-space-md);
	block-size: var(--sc-space-md);
}

/*
 * Centred with `inset: 0` and an auto margin rather than a percentage offset,
 * because a percentage offset would need mirroring in RTL while a centred box
 * does not. One bar rotates to turn the plus into a minus.
 */
.sc-disclosure__sign::before,
.sc-disclosure__sign::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 0.875rem;
	block-size: var(--sc-border-width-strong);
	background-color: var(--sc-color-accent);
	rotate: 0deg;
	transition: rotate var(--sc-transition-fast);
}

.sc-disclosure__sign::after {
	rotate: 90deg;
}

.sc-disclosure[open] .sc-disclosure__sign::after {
	rotate: 0deg;
}

.sc-disclosure__panel {
	padding-block-end: var(--sc-space-md);
}

.sc-disclosure__intro {
	margin-block-start: 0;
	color: var(--sc-color-text-muted);
}

.sc-disclosure__empty {
	margin-block-end: var(--sc-space-2xs);
	color: var(--sc-color-text-muted);
	font-style: italic;
}

/* ===========================================================================
 * Tags
 * ======================================================================== */

.sc-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-tag {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--sc-touch-target);
	padding-inline: var(--sc-space-sm);
	border: var(--sc-border-width) solid var(--sc-color-border-strong);
	border-radius: var(--sc-radius-pill);
	background-color: var(--sc-color-surface);
	color: var(--sc-color-brand-strong);
	font-size: var(--sc-font-size-sm);
	font-weight: var(--sc-font-weight-medium);
	text-decoration: none;
}

.sc-tag:hover {
	border-color: var(--sc-color-brand);
	background-color: var(--sc-color-brand-subtle);
	color: var(--sc-color-brand-strong);
}

/* ===========================================================================
 * Arrow link
 *
 * The chevron is border-drawn, so it takes the link colour and needs no
 * icon asset. The rotation is negated in RTL because the mirrored border
 * corner would otherwise point the arrow the wrong way.
 * ======================================================================== */

.sc-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sc-space-2xs);
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-brand-strong);
}

.sc-link-arrow::after,
.sc-arrow {
	display: inline-block;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-block-start: var(--sc-border-width-strong) solid currentcolor;
	border-inline-end: var(--sc-border-width-strong) solid currentcolor;
	rotate: 45deg;
}

.sc-link-arrow::after {
	content: "";
}

[dir="rtl"] .sc-link-arrow::after,
[dir="rtl"] .sc-arrow {
	rotate: -45deg;
}

/* ===========================================================================
 * Evidence
 *
 * Rendered only when verified figures exist. A definition list, because each
 * figure has a label and a source: this is reference data, not a statistic
 * chosen for effect.
 * ======================================================================== */

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

.sc-evidence__item {
	min-inline-size: 0;
	padding-block-start: var(--sc-space-sm);
	border-block-start: var(--sc-border-width-strong) solid var(--sc-color-brand);
}

.sc-evidence__label {
	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-evidence__value {
	margin-block-start: var(--sc-space-2xs);
	margin-inline-start: 0;
	font-family: var(--sc-font-family-heading);
	font-size: var(--sc-font-size-2xl);
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-heading);
}

.sc-evidence__detail {
	margin-inline-start: 0;
	color: var(--sc-color-text-muted);
}

.sc-evidence__link {
	margin-inline-start: 0;
}

/* ===========================================================================
 * Footer pattern band
 * ======================================================================== */

.sc-site-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.sc-site-footer__pattern {
	inset: 0;
	background-color: var(--sc-color-text-inverse);
	mask-size: var(--sc-pattern-size-md) auto;
	-webkit-mask-size: var(--sc-pattern-size-md) auto;
	opacity: 0.05;
}

/* Outline action for use on a dark or branded surface: the border carries the
   shape and the text inherits the surface's own contrast pair. */
.sc-button--outline,
.sc-button--outline:visited {
	border-color: currentcolor;
	background-color: transparent;
	color: inherit;
}

.sc-button--outline:hover,
.sc-button--outline:focus {
	border-color: currentcolor;
	background-color: var(--sc-color-brand-hover);
	color: inherit;
}

/* ===========================================================================
 * Homepage composition — golden-master rebuild
 *
 * The homepage is rebuilt against five approved reference renders measured at
 * 1672 x 941. Every geometry value below is either a design token (fluid, all
 * widths) or a `calc(<measured px> * var(--sc-u))` expression inside the
 * `@media (width >= 75rem)` fidelity layer, where `--sc-u` is one reference
 * pixel: `calc(100vw / 1672)`.
 *
 * Two layers, one source of truth:
 *
 *   1. The fluid layer — mobile first, built from the token scale. It carries
 *      phones and tablets, where the reference geometry has no meaning.
 *   2. The fidelity layer — at 1200px and above the composition reproduces the
 *      reference bands band-for-band: the same column widths, the same band
 *      heights, the same right-bleed photography.
 *
 * Nothing here is hard-coded content. Every string, image and link arrives from
 * the content model in inc/homepage.php, so a client can replace any of it in
 * the CMS without touching this file.
 *
 * @package Sarv_Catalyst
 * @since   0.1.0
 */

/* ---------------------------------------------------------------------------
 * Composition primitives
 *
 * Shared vocabulary for the whole page: the eyebrow label, the two-tone section
 * title, the rule, the vertical micro-copy rail, the media frame and the
 * pattern field. Defined once so the sections below differ only in geometry.
 * ------------------------------------------------------------------------- */

.sc-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sc-color-brand);
}

/*
 * The eyebrow carries a short rule so it reads as a label rather than as the
 * first line of the heading. Decorative only, hence the empty content.
 */
.sc-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 1.75em;
	block-size: var(--sc-border-width-strong);
	background-color: currentcolor;
}

.sc-rule {
	flex: 0 0 auto;
	display: block;
	inline-size: 1.75rem;
	block-size: var(--sc-border-width-strong);
	background-color: var(--sc-color-brand);
}

.sc-section__title {
	margin: 0;
	font-size: var(--sc-font-size-3xl);
	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);
	text-wrap: balance;
}

.sc-section__title-line {
	display: block;
}

.sc-section__title-line--accent {
	color: var(--sc-color-brand);
}

.sc-section__lead {
	margin: 0;
	max-inline-size: var(--sc-measure);
	color: var(--sc-color-text-muted);
}

/*
 * Vertical micro-copy. `writing-mode` turns each line into a column and the
 * half turn makes the lines read bottom-up, which is the approved treatment on
 * the right edge of the reference. Purely decorative: the same words are in the
 * accessible copy elsewhere on the page, so the rail is aria-hidden.
 */
.sc-rail {
	display: flex;
	flex-direction: column;
	gap: 0.9em;
	margin: 0;
	writing-mode: vertical-rl;
	rotate: 180deg;
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sc-color-brand-strong);
}

.sc-rail__line {
	display: block;
	white-space: nowrap;
}

.sc-media {
	margin: 0;
	overflow: hidden;
}

.sc-media .sc-media__image,
.sc-media__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/*
 * Pattern fields. One traced brand mark is masked into a large, cropped,
 * outlined field. A mask rather than an <img> so the colour stays a token and
 * the same artwork can back a pale band or a brand-blue band without a second
 * asset.
 */
:is(.sc-hero__pattern, .sc-discovery__pattern, .sc-portfolio__pattern, .sc-final-cta__pattern) {
	position: absolute;
	pointer-events: none;
	background-color: var(--sc-color-pattern-line);
	mask-image: url("../images/brand/sarv-hero-pattern.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: cover;
}

/* Sections that carry a pattern or a bleeding photo need a positioning context. */
:is(.sc-hero, .sc-discovery, .sc-portfolio, .sc-final-cta, .sc-lifecycle, .sc-industries) {
	position: relative;
}

/*
 * Editorial section shell. The standard container caps the page at 1200px,
 * which is narrower than the reference on a wide display, so the editorial
 * sections release the cap and set their own inset. `padding-inline` is a
 * per-section custom property, so the fidelity layer can restate it in
 * reference pixels without duplicating a single selector.
 */
.sc-section--editorial {
	--sc-gm-inset: var(--sc-container-gutter);

	padding-block: var(--sc-space-3xl);
}

.sc-section--editorial > .sc-container {
	max-inline-size: none;
	padding-inline: var(--sc-gm-inset);
}

/* ---------------------------------------------------------------------------
 * Buttons in the homepage composition
 *
 * The base button comes from the shared component layer. Each band restates its
 * own height, padding and type size in the fidelity layer, so the only rules
 * needed here are the variants the homepage adds.
 * ------------------------------------------------------------------------- */

.sc-button--cta {
	background-color: var(--sc-color-accent);
	color: var(--sc-color-text-on-accent);
}

.sc-button--cta:hover,
.sc-button--cta:focus {
	background-color: var(--sc-color-accent-hover);
	color: var(--sc-color-text-on-accent);
}

/*
 * Quiet action: the editorial text link with a trailing arrow. It carries no
 * surface so it can sit on a tinted band without a second colour decision.
 */
.sc-button--quiet {
	min-block-size: var(--sc-touch-target);
	padding-inline: 0;
	background-color: transparent;
	border-color: transparent;
	color: var(--sc-color-brand-strong);
}

.sc-button--quiet:hover,
.sc-button--quiet:focus {
	background-color: transparent;
	color: var(--sc-color-brand-hover);
}

.sc-button__arrow {
	display: inline-block;
	transition: translate var(--sc-transition-fast);
}

:is(.sc-button, .sc-product-card__action):hover .sc-button__arrow {
	translate: 0.25em 0;
}

/* ---------------------------------------------------------------------------
 * Header
 *
 * One white band: brand at the leading edge, the eight approved destinations
 * next to it, then the search, the consultation action and the language pair at
 * the trailing edge. The band height, the logo box and the gaps are restated in
 * reference pixels in the fidelity layer below; here they are simply fluid.
 *
 * The underline that marks the current destination is drawn with `::after`
 * rather than a border so it can grow from the leading edge. `transform-origin`
 * only accepts physical keywords, so the flipped origin is set per direction.
 * ------------------------------------------------------------------------- */

.sc-site-header--editorial {
	--sc-gm-inset: var(--sc-container-gutter);

	border-block-end: var(--sc-border-width) solid var(--sc-color-border-subtle);
	background-color: var(--sc-color-surface);
}

.sc-site-header--editorial > .sc-container {
	max-inline-size: none;
	padding-inline: var(--sc-gm-inset) var(--sc-gm-inset-end, var(--sc-gm-inset));
}

.sc-site-header--editorial .sc-site-header__inner {
	align-items: center;
	block-size: var(--sc-header-height);
	gap: var(--sc-space-sm);
}

.sc-site-header--editorial .sc-site-header__logo,
.sc-site-header--editorial .custom-logo-link {
	display: block;
	line-height: 0;
}

.sc-site-header--editorial .sc-site-header__logo img,
.sc-site-header--editorial .custom-logo {
	inline-size: clamp(9.5rem, 15.5vw, 16.25rem);
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: none;
}

.sc-site-header--editorial .sc-site-header__languages {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: 0.08em;
	color: var(--sc-color-heading);
}

.sc-site-header--editorial .sc-site-header__language--muted {
	color: var(--sc-color-text-subtle);
}

.sc-site-header--editorial .sc-site-header__language-divider {
	color: var(--sc-color-border-strong);
}

/* ---------------------------------------------------------------------------
 * Footer
 *
 * A shallow, light band that closes the page: brand, the same eight
 * destinations, then the legal line. The catalogue and industry links sit on a
 * second, quieter line so a visitor who has read to the bottom still has a
 * route into the commercial sections, and so every page keeps those internal
 * links for indexing.
 * ------------------------------------------------------------------------- */

.sc-site-footer--editorial {
	background-color: var(--sc-color-surface);
	border-block-start: var(--sc-border-width) solid var(--sc-color-border-subtle);
	color: var(--sc-color-text);
}

.sc-site-footer--editorial > .sc-container {
	max-inline-size: none;
	padding-block: var(--sc-space-xl);
	padding-inline: var(--sc-gm-inset, var(--sc-container-gutter))
		var(--sc-gm-inset-end, var(--sc-container-gutter));
}

.sc-site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sc-space-md) var(--sc-space-xl);
}

.sc-site-footer__branding {
	display: flex;
	flex-direction: column;
	gap: var(--sc-space-2xs);
	min-inline-size: 0;
}

.sc-site-footer--editorial .sc-site-footer__logo,
.sc-site-footer--editorial .custom-logo {
	inline-size: clamp(8.5rem, 14vw, 13.5rem);
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: none;
}

.sc-site-footer--editorial .custom-logo-link {
	display: block;
	line-height: 0;
}

.sc-site-footer__nav {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.sc-site-footer__list--inline,
.sc-site-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sc-space-xs) var(--sc-space-lg);
}

.sc-site-footer__list--inline li {
	margin-block-end: 0;
}

.sc-site-footer--editorial .sc-site-footer__list a,
.sc-site-footer--editorial .sc-site-footer__legal a {
	color: var(--sc-color-text-muted);
	text-decoration: none;
}

.sc-site-footer--editorial .sc-site-footer__list a:hover,
.sc-site-footer--editorial .sc-site-footer__legal a:hover {
	color: var(--sc-color-brand-strong);
	text-decoration: underline;
}

.sc-site-footer__social {
	display: flex;
	align-items: center;
	gap: var(--sc-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--sc-touch-target);
	block-size: var(--sc-touch-target);
	border-radius: var(--sc-radius-sm);
	color: var(--sc-color-text-muted);
}

.sc-site-footer__social-link:hover {
	color: var(--sc-color-brand-strong);
}

.sc-site-footer__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sc-space-xs) var(--sc-space-lg);
}

.sc-site-footer--editorial .sc-site-footer__address {
	margin: 0;
	font-size: var(--sc-font-size-xs);
	color: var(--sc-color-text-muted);
}

/*
 * The fine print row. It is a row of its own rather than a fourth cell of the
 * identity row: eight destinations in one line pushed the legal links onto a
 * second line with no rule between them, which read as a wrapping accident
 * rather than a decision. One hairline closes the identity row instead.
 */
.sc-site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sc-space-sm) var(--sc-space-md);
	margin-block-start: var(--sc-space-lg);
	padding-block-start: var(--sc-space-md);
	border-block-start: var(--sc-border-width) solid var(--sc-color-border-subtle);
	font-size: var(--sc-font-size-xs);
	color: var(--sc-color-text-muted);
}

.sc-site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sc-space-xs) var(--sc-space-lg);
}

.sc-site-footer__copyright,
.sc-site-footer__credit {
	margin: 0;
}

/*
 * The studio credit is a credit, not a second brand: it keeps the fine print's
 * own ink and size, and its only distinction is a hairline underline, so the
 * link is identifiable without a colour that would out-weigh the company name
 * beside it. The underline takes the brand blue on hover and on keyboard focus,
 * which is the whole of its emphasis.
 */
.sc-site-footer__credit-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--sc-color-border-strong);
	text-decoration-thickness: var(--sc-border-width);
	text-underline-offset: 0.2em;
	transition:
		color var(--sc-transition-fast),
		text-decoration-color var(--sc-transition-fast);
}

.sc-site-footer__credit-link:hover,
.sc-site-footer__credit-link:focus-visible {
	color: var(--sc-color-brand-strong);
	text-decoration-color: currentcolor;
}

/* ---------------------------------------------------------------------------
 * Hero
 *
 * Pale band, editorial copy on the leading side, the refinery photograph
 * bleeding off the trailing edge. The photograph is faded on its inner edge so
 * the headline's second line can cross onto it without losing contrast — the
 * band and the photograph are one surface, not two boxes side by side.
 * ------------------------------------------------------------------------- */

.sc-hero--editorial {
	--sc-gm-inset: var(--sc-container-gutter);

	position: relative;
	overflow: hidden;
	padding-block: var(--sc-space-2xl);
	background-color: var(--sc-color-surface-pale);
}

.sc-hero--editorial > .sc-container {
	max-inline-size: none;
	padding-inline: var(--sc-gm-inset) var(--sc-gm-inset-end, var(--sc-gm-inset));
}

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

.sc-hero__copy {
	position: relative;
	display: grid;
	gap: var(--sc-space-md);
	align-content: start;
}

.sc-hero__title {
	margin: 0;
	font-size: clamp(2.125rem, 7vw, 3.5rem);
	font-weight: var(--sc-font-weight-bold);
	line-height: 1.14;
	letter-spacing: var(--sc-letter-spacing-tight);
	color: var(--sc-color-heading);
	text-wrap: balance;
}

.sc-hero__line {
	display: block;
}

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

.sc-hero__lead {
	margin-block: 0;
	max-inline-size: var(--sc-measure);
}

.sc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-sm);
	margin: 0;
}

/*
 * The tagline under the actions. The rule in front of it is the reference's
 * short blue bar, so it is drawn by the shared `.sc-rule` component rather than
 * a background image.
 */
.sc-hero__micro {
	display: flex;
	align-items: center;
	gap: var(--sc-space-sm);
	margin: 0;
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sc-color-text-muted);
}

.sc-hero__micro .sc-rule {
	inline-size: 4.5rem;
}

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

.sc-hero__media {
	margin-block: 0;
	aspect-ratio: 16 / 10;
	border-radius: var(--sc-radius-md);
}

/*
 * Vertical wordmark. Decorative and duplicated by the headline, so it is
 * hidden from assistive technology and only drawn where there is room for it.
 */
.sc-hero__rail {
	position: absolute;
	inset-inline-end: var(--sc-space-sm);
	inset-block-end: var(--sc-space-sm);
	color: var(--sc-color-brand-strong);
}

/* ---------------------------------------------------------------------------
 * Credibility strip
 *
 * Four proofs on a white band. The glyphs are the reference's own icon family:
 * three connected cells, a stepped skyline, a leaf in an outline and a group of
 * three, all drawn on one stroke weight and one optical size.
 * ------------------------------------------------------------------------- */

.sc-credibility--editorial {
	--sc-gm-inset: var(--sc-container-gutter);

	padding-block: var(--sc-space-xl);
	background-color: var(--sc-color-surface);
}

.sc-credibility--editorial > .sc-container {
	max-inline-size: none;
	padding-inline: var(--sc-gm-inset) var(--sc-gm-inset-end, var(--sc-gm-inset));
}

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

.sc-credibility__item {
	display: flex;
	align-items: center;
	gap: var(--sc-space-sm);
}

.sc-credibility__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	color: var(--sc-color-brand);
}

.sc-credibility__icon svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.sc-credibility__text {
	display: grid;
	gap: var(--sc-space-3xs);
	min-inline-size: 0;
}

.sc-credibility__label {
	font-family: var(--sc-font-family-heading);
	font-weight: var(--sc-font-weight-semibold);
	line-height: var(--sc-line-height-tight);
	color: var(--sc-color-heading);
}

.sc-credibility__detail {
	font-size: var(--sc-font-size-sm);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-text-muted);
}

/* ---------------------------------------------------------------------------
 * Solution finder
 *
 * Editorially the busiest band on the page: a headline, the finder itself and a
 * four-item support rail. The headline and the photograph share the top of the
 * band, the finder floats over their seam, and the rail closes the band on a
 * full-bleed white strip.
 * ------------------------------------------------------------------------- */

.sc-discovery--editorial {
	--sc-gm-inset: var(--sc-container-gutter);

	position: relative;
	overflow: hidden;
	padding-block-start: var(--sc-space-2xl);
	background-color: var(--sc-color-surface-finder);
}

.sc-discovery--editorial > .sc-container {
	position: relative;
	max-inline-size: none;
	padding-inline: var(--sc-gm-inset) var(--sc-gm-inset-end, var(--sc-gm-inset));
}

.sc-discovery__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--sc-radius-md);
}

.sc-discovery__intro {
	display: grid;
	gap: var(--sc-space-md);
	align-content: start;
	margin-block-end: var(--sc-space-lg);
}

.sc-discovery__panel {
	position: relative;
	display: grid;
	gap: var(--sc-space-lg);
	padding: var(--sc-space-md);
	border-radius: var(--sc-radius-md);
	background-color: var(--sc-color-surface);
	box-shadow: var(--sc-shadow-md);
}

.sc-discovery__modes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-2xs);
}

.sc-discovery__mode {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 12rem;
	align-items: flex-start;
	justify-content: center;
	min-block-size: var(--sc-touch-target);
	padding-inline: var(--sc-space-md);
	border-radius: var(--sc-radius-sm);
	font-size: var(--sc-font-size-sm);
	font-weight: var(--sc-font-weight-semibold);
	text-align: start;
	color: var(--sc-color-text);
	cursor: pointer;
}

.sc-discovery__mode-label {
	display: block;
}

.sc-discovery__mode-intro {
	display: block;
	margin-block-start: var(--sc-space-3xs);
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-regular);
	line-height: 1.35;
	color: var(--sc-color-text-muted);
}

.sc-discovery__mode:not(.sc-discovery__mode--active):hover {
	background-color: var(--sc-color-brand-subtle);
	color: var(--sc-color-brand-strong);
}

/*
 * The default route is the only solid blue surface in the band, which is what
 * makes the finder read as a control rather than as a set of headings.
 */
.sc-discovery__mode--active {
	background-color: var(--sc-color-brand);
	color: var(--sc-color-text-on-brand);
}

.sc-discovery__mode--active .sc-discovery__mode-intro {
	color: var(--sc-color-text-on-brand-muted);
}

.sc-discovery__fields {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sc-space-md);
}

.sc-discovery__field {
	flex: 1 1 14rem;
	min-inline-size: 0;
}

.sc-discovery__control {
	display: grid;
	gap: var(--sc-space-2xs);
	margin: 0;
}

.sc-discovery__label {
	font-size: var(--sc-font-size-sm);
	color: var(--sc-color-heading);
}

.sc-discovery__select {
	inline-size: 100%;
	min-block-size: var(--sc-touch-target);
	padding-block: var(--sc-space-2xs);
	padding-inline: var(--sc-space-xs) var(--sc-space-lg);
	border: var(--sc-border-width) solid var(--sc-color-border);
	border-radius: var(--sc-radius-sm);
	background-color: var(--sc-color-surface);
	font-size: var(--sc-font-size-sm);
	color: var(--sc-color-text);
}

.sc-discovery__fields .sc-button--cta {
	flex: 0 0 auto;
}

/*
 * The rail turns the band white for its last strip. It is full-bleed, so the
 * negative inline margin cancels the container inset and the padding puts it
 * back for the content: the strip reaches both edges of the page while the
 * items keep the page grid.
 */
.sc-discovery__rail {
	display: grid;
	gap: var(--sc-space-md);
	margin-block-start: var(--sc-space-xl);
	margin-inline: calc(0px - var(--sc-gm-inset))
		calc(0px - var(--sc-gm-inset-end, var(--sc-gm-inset)));
	padding-block: var(--sc-space-md);
	padding-inline: var(--sc-gm-inset) var(--sc-gm-inset-end, var(--sc-gm-inset));
	background-color: var(--sc-color-surface);
}

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

.sc-discovery__rail-item {
	display: flex;
	align-items: center;
	gap: var(--sc-space-2xs);
}

.sc-discovery__rail-icon {
	display: flex;
	flex: 0 0 auto;
	color: var(--sc-color-brand);
}

.sc-discovery__rail-icon svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.sc-discovery__rail-label {
	display: grid;
	gap: var(--sc-space-3xs);
	min-inline-size: 0;
}

.sc-discovery__support {
	margin: 0;
	font-size: var(--sc-font-size-sm);
}

.sc-discovery__support-label {
	display: block;
	color: var(--sc-color-heading);
}

.sc-discovery__support-link {
	color: var(--sc-color-brand-strong);
	text-decoration: none;
}

.sc-discovery__support-link:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Industries
 *
 * A quiet band: a short argument on the leading side and four industry cards
 * on a rail. The rail is the only scrolling surface on the page, and it is the
 * reason the arrows exist — when the cards already fit, the arrows are disabled
 * rather than dead.
 * ------------------------------------------------------------------------- */

.sc-industries--editorial {
	--sc-gm-inset: var(--sc-container-gutter);

	padding-block: var(--sc-space-2xl);
	background-color: var(--sc-color-surface-industries);
}

.sc-industries--editorial > .sc-container {
	max-inline-size: none;
	padding-inline: var(--sc-gm-inset) var(--sc-gm-inset-end, var(--sc-gm-inset));
}

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

.sc-industries__intro {
	display: grid;
	gap: var(--sc-space-md);
	align-content: start;
}

.sc-industries__action {
	margin: var(--sc-space-2xs) 0 0;
}

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

.sc-industries__rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(15rem, 1fr);
	gap: var(--sc-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: inline mandatory;
	scrollbar-width: none;
	scroll-padding-inline-start: 0;
}

.sc-industries__rail::-webkit-scrollbar {
	display: none;
}

.sc-industries__controls {
	display: flex;
	gap: var(--sc-space-2xs);
	justify-content: flex-end;
}

.sc-industries__control {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--sc-touch-target);
	block-size: var(--sc-touch-target);
	border: var(--sc-border-width) solid var(--sc-color-border);
	border-radius: var(--sc-radius-sm);
	background-color: var(--sc-color-surface);
	color: var(--sc-color-brand-strong);
	cursor: pointer;
}

.sc-industries__control:hover:not(:disabled) {
	border-color: var(--sc-color-brand);
	color: var(--sc-color-brand);
}

.sc-industries__control:disabled,
.sc-industries__control[aria-disabled="true"] {
	opacity: 0.4;
	cursor: default;
}

/* The pair of glyphs follows the reading direction of the rail. */
[dir="rtl"] .sc-industries__control {
	transform: scaleX(-1);
}

.sc-industries__control svg {
	display: block;
	inline-size: 1.125rem;
	block-size: auto;
}

.sc-industry-card {
	scroll-snap-align: start;
}

.sc-industry-card__link {
	display: grid;
	block-size: 100%;
	align-content: start;
	border-radius: var(--sc-radius-md);
	background-color: var(--sc-color-surface);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
}

.sc-industry-card__media {
	display: block;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	border-radius: var(--sc-radius-media-sm);
}

.sc-industry-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--sc-transition-slow);
}

.sc-industry-card__link:hover .sc-industry-card__media img {
	transform: scale(1.03);
}

.sc-industry-card__body {
	display: grid;
	gap: var(--sc-space-2xs);
	padding: var(--sc-space-md);
	align-content: start;
}

.sc-industry-card__heading {
	display: flex;
	align-items: center;
	gap: var(--sc-space-2xs);
}

.sc-industry-card__icon {
	display: flex;
	flex: 0 0 auto;
	inline-size: 1.75rem;
	color: var(--sc-color-brand);
}

.sc-industry-card__icon svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.sc-industry-card__title {
	font-size: var(--sc-font-size-lg);
	font-weight: var(--sc-font-weight-semibold);
	line-height: var(--sc-line-height-tight);
	color: var(--sc-color-heading);
}

.sc-industry-card__description {
	font-size: var(--sc-font-size-sm);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-text-muted);
}

.sc-industry-card__arrow {
	display: inline-flex;
	color: var(--sc-color-brand);
	transition: transform var(--sc-transition-base);
}

.sc-industry-card__link:hover .sc-industry-card__arrow {
	transform: translateX(0.25rem);
}

[dir="rtl"] .sc-industry-card__link:hover .sc-industry-card__arrow {
	transform: translateX(-0.25rem);
}

/* ---------------------------------------------------------------------------
 * Product portfolio
 *
 * Three material families, each one card wide. The cards carry the reference's
 * family band — a short rule plus the family name in caps — because that band,
 * not the photograph, is what makes the three cards read as one set.
 * ------------------------------------------------------------------------- */

.sc-portfolio--editorial {
	--sc-gm-inset: var(--sc-container-gutter);

	position: relative;
	overflow: hidden;
	padding-block: var(--sc-space-3xl);
	background-color: var(--sc-color-surface);
}

.sc-portfolio--editorial > .sc-container {
	max-inline-size: none;
	padding-inline: var(--sc-gm-inset) var(--sc-gm-inset-end, var(--sc-gm-inset));
}

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

.sc-portfolio__intro {
	display: grid;
	gap: var(--sc-space-md);
	align-content: start;
}

.sc-portfolio__action {
	margin: var(--sc-space-2xs) 0 0;
}

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

.sc-product-card__link {
	display: grid;
	block-size: 100%;
	align-content: start;
	gap: var(--sc-space-sm);
	color: inherit;
	text-decoration: none;
}

.sc-product-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--sc-radius-media-sm);
	overflow: hidden;
}

.sc-product-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--sc-transition-slow);
}

.sc-product-card__link:hover .sc-product-card__media img {
	transform: scale(1.03);
}

.sc-product-card__band {
	display: flex;
	align-items: center;
	gap: var(--sc-space-2xs);
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sc-color-brand);
}

.sc-product-card__title {
	margin: 0;
	font-size: var(--sc-font-size-xl);
	font-weight: var(--sc-font-weight-semibold);
	line-height: var(--sc-line-height-tight);
	color: var(--sc-color-heading);
}

.sc-product-card__description {
	font-size: var(--sc-font-size-sm);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-text-muted);
}

.sc-product-card__action {
	display: inline-flex;
	align-items: center;
	gap: var(--sc-space-3xs);
	margin-block-start: var(--sc-space-2xs);
	font-size: var(--sc-font-size-sm);
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-brand-strong);
}

.sc-product-card__action .sc-button__arrow {
	transition: transform var(--sc-transition-base);
}

.sc-product-card__link:hover .sc-button__arrow {
	transform: translateX(0.25rem);
}

[dir="rtl"] .sc-product-card__link:hover .sc-button__arrow {
	transform: translateX(-0.25rem);
}

/* ---------------------------------------------------------------------------
 * Closing call to action
 *
 * The only brand-blue surface on the page, which is why nothing above it uses
 * that colour as a fill. Three zones on one optical centre: a cropped brand
 * field on the leading side, the invitation in the middle and the two routes to
 * the company closing the trailing side. Two actions inside the copy column
 * would have made the band another section to read; two zones make it a
 * decision.
 * ------------------------------------------------------------------------- */

.sc-final-cta--editorial {
	--sc-gm-inset: var(--sc-container-gutter);

	position: relative;
	overflow: hidden;
	padding-block: var(--sc-space-3xl);
	background-color: var(--sc-color-brand);
	color: var(--sc-color-text-on-brand);
}

.sc-final-cta--editorial > .sc-container {
	position: relative;
	max-inline-size: none;
	padding-inline: var(--sc-gm-inset) var(--sc-gm-inset-end, var(--sc-gm-inset));
}

/*
 * The brand field is a desk-layout decoration. On a phone it would sit under
 * the invitation and cost the contrast the band needs to convert, so it is
 * absent from the flow until the fidelity layer gives it a zone of its own.
 */
.sc-final-cta__pattern {
	display: none;
}

.sc-final-cta__grid {
	display: grid;
	gap: var(--sc-space-xl);
}

.sc-final-cta__copy {
	display: grid;
	gap: var(--sc-space-md);
	align-content: center;
}

.sc-final-cta__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sc-color-text-on-brand-muted);
}

.sc-final-cta__title {
	margin: 0;
	font-size: var(--sc-font-size-2xl);
	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-text-on-brand);
	text-wrap: balance;
}

.sc-final-cta__lead {
	margin: 0;
	font-size: var(--sc-font-size-sm);
	color: var(--sc-color-text-on-brand-muted);
}

.sc-final-cta__actions {
	display: grid;
	align-content: center;
	justify-items: start;
	gap: var(--sc-space-md);
}

/*
 * The primary action's face, boundary and label colour are all stated here
 * rather than inherited. The band is the one place on the page where the
 * button is a white face on a saturated blue, so every state — default, hover,
 * focus and active — is spelled out: a shared-layer rule cannot leave the
 * control as an empty frame, and the label and the arrow carry an explicit
 * colour so nothing further down the cascade can clear them.
 *
 * The focus ring is restated white: the site ring is the deep brand blue, which
 * clears WCAG against every light surface on the page but only reaches 1.7:1
 * against this band.
 */
.sc-final-cta--editorial .sc-button--inverse,
.sc-final-cta--editorial .sc-button--inverse:visited {
	overflow: visible;
	min-block-size: 3rem;
	background-color: var(--sc-color-surface);
	border-color: var(--sc-color-surface);
	color: var(--sc-color-brand-strong);
}

.sc-final-cta--editorial .sc-button--inverse .sc-button__label,
.sc-final-cta--editorial .sc-button--inverse .sc-button__arrow {
	color: inherit;
	-webkit-text-fill-color: currentcolor;
}

.sc-final-cta--editorial .sc-button--inverse:hover,
.sc-final-cta--editorial .sc-button--inverse:focus,
.sc-final-cta--editorial .sc-button--inverse:focus-visible {
	background-color: var(--sc-color-brand-subtle);
	border-color: var(--sc-color-brand-border);
	color: var(--sc-color-brand-strong);
}

.sc-final-cta--editorial .sc-button--inverse:active {
	background-color: var(--sc-color-brand-border);
	border-color: var(--sc-color-brand-border);
	color: var(--sc-color-brand-strong);
}

.sc-final-cta__actions :is(.sc-button, .sc-final-cta__secondary):focus-visible {
	outline-color: var(--sc-color-surface);
}

/*
 * The second route is a text link, but it still has to clear the contrast bar on
 * a saturated blue, so it borrows the same white as the primary action rather
 * than the muted blue used for supporting copy.
 */
.sc-final-cta__secondary {
	display: inline-flex;
	align-items: center;
	gap: var(--sc-space-3xs);
	font-size: var(--sc-font-size-sm);
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-text-on-brand);
	text-decoration: none;
}

.sc-final-cta__secondary:hover {
	color: var(--sc-color-text-on-brand);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ===========================================================================
 * Fidelity layer
 *
 * Above 1200px the composition is one-to-one with the approved references.
 * `--sc-u` is a single reference pixel — the references were measured at
 * 1672 x 941, so `calc(72 * var(--sc-u))` is the 72px inset that was measured,
 * whatever the display is doing. Every band height, column width and gap below
 * comes from that measurement, which is why the layer is worth its size: the
 * numbers are the design, not an approximation of it.
 * ======================================================================== */

@media (width >= 75rem) {
	:root {
		/* One reference pixel at the 1672px measurement width. */
		--sc-u: calc(100vw / 1672);
		--sc-gm-inset: calc(84 * var(--sc-u));
		--sc-gm-inset-end: var(--sc-gm-inset);
	}

	/* --- Hero ------------------------------------------------------------ */

	.sc-hero--editorial {
		--sc-gm-inset: calc(72 * var(--sc-u));
		--sc-gm-inset-end: calc(72 * var(--sc-u));
		--sc-gm-blue: #0b79be;
		--sc-gm-blue-hover: #0a68a4;
		--sc-gm-red: #d61814;
		--sc-gm-kicker: #011333;

		/* The photograph is clipped by this band, so the bottom padding sets the
		   edge the reference cuts at y = 744: 73.5 rather than 72.4 of rhythm,
		   with the credibility strip's top padding reduced by the same 1.1 so the
		   strip itself does not move. */
		padding-block: calc(86 * var(--sc-u)) calc(73.5 * var(--sc-u));
	}

	.sc-hero--editorial > .sc-container {
		padding-inline: calc(72 * var(--sc-u));
	}

	/*
	 * The identity pattern belongs to the shaded sections. Behind the hero it
	 * would sit on top of the photograph, which the reference does not show.
	 */
	.sc-hero--editorial .sc-hero__pattern {
		display: none;
	}

	/*
	 * The copy column is exactly as tall as the measured one; the photograph is
	 * taller than the column and starts above it, which is why it is anchored
	 * to the section's band rather than to the copy.
	 */
	.sc-hero__grid {
		display: block;
		min-block-size: 0;
	}

	.sc-hero__copy {
		position: relative;
		z-index: 1;
		gap: 0;
		max-inline-size: calc(880 * var(--sc-u));
	}

	/*
	 * The eyebrow carries no rule in the reference: the letters alone form the
	 * three-family line.
	 */
	.sc-hero--editorial .sc-eyebrow {
		gap: 0;
		margin-block-start: 0;
		font-size: calc(13.5 * var(--sc-u));

		/* The reference's eyebrow carries less ink than a 400 (measured 801 px
		   below the 175 luma threshold against 1029 at 400); 340 is the weight
		   whose coverage matches it on the shipped variable font. */
		font-weight: 340;
		line-height: calc(21 * var(--sc-u));

		/* At 0.25em the tail of the line landed six pixels short of the
		   reference's 522 px run; 0.29em reproduces it (ref x 72-594, ours
		   73-597). The paint-only nudge seats the glyphs on the reference's
		   exact rows 204-213 without touching the heading below. */
		letter-spacing: 0.29em;
		translate: 0 calc(1 * var(--sc-u));
		word-spacing: calc(2 * var(--sc-u));
		color: #18528c;
	}

	.sc-hero--editorial .sc-eyebrow::before {
		content: none;
	}

	.sc-hero__title {
		margin-block-start: calc(26 * var(--sc-u));
		font-size: calc(56 * var(--sc-u));
		line-height: calc(65 * var(--sc-u));
		letter-spacing: -0.026em;

		/* The composition hangs the display line one bearing outside the
		   eyebrow's left edge; the indent reproduces that optical alignment. */
		text-indent: calc(-4 * var(--sc-u));
		max-inline-size: none;

		/* The reference's display weight sits a hair fatter than the shipped
		   variable file at 700. A 1px stroke restores exactly that ink without
		   changing one advance width; the colour is the reference's own ink. */
		color: #070f1e;
		-webkit-text-stroke: 1px currentcolor;
	}

	/*
	 * The first display line rides one pixel below and half a pixel right of the
	 * box the reference drew it in; the offset is what aligns its stems. Its two
	 * word gaps also sit a third of a pixel narrower than Chromium's default, which
	 * is what puts the second and third words on the reference's columns.
	 */
	.sc-hero--editorial .sc-hero__title .sc-hero__line:first-child {
		translate: calc(0.5 * var(--sc-u)) calc(1 * var(--sc-u));
		word-spacing: calc(-0.35 * var(--sc-u));
	}

	/*
	 * The reference sets the body copy at the display scale (a ~20.4px lead on a
	 * 32.5px rhythm) and shows three lines. The section's copy is kept verbatim
	 * in the markup and capped at those three lines so the band keeps its budget.
	 * The size and the 2px indent are solved from the reference's word boxes:
	 * they are what makes each line end on the reference's column.
	 *
	 * The reference's body copy is also lighter than a 400 and darker than a
	 * 280; on the variable font the interpolated 330 reproduces its coverage
	 * (average ink per line below the threshold: reference 2553, 330 → 2607,
	 * 280 → 2140), while the painted word ends stay on the reference's columns.
	 */
	.sc-hero__lead {
		margin-block-start: calc(24 * var(--sc-u));
		padding-inline-start: calc(2 * var(--sc-u));
		font-size: calc(20.4 * var(--sc-u));
		font-weight: 330;
		line-height: calc(32.5 * var(--sc-u));
		max-inline-size: calc(730 * var(--sc-u));
		max-block-size: calc(98 * var(--sc-u));
		overflow: hidden;
		color: #14213c;
	}

	.sc-hero__actions {
		gap: calc(27 * var(--sc-u));

		/* The reference's pills rest one row below the margin the 34u produced
		   (outline rows 532–596 against 531–595); the extra unit moves only the
		   buttons, because the micro's margin below absorbs it one line down. */
		margin-block-start: calc(35 * var(--sc-u));
	}

	.sc-hero__actions .sc-button {
		min-block-size: calc(65 * var(--sc-u));

		/* The reference sets both pills 0.6px inside the copy column's edge (its
		   primary spans x73–358) while the labels stay where the padding puts
		   them; the right padding is trimmed to the reference's 286px pill. */
		margin-inline-start: calc(0.6 * var(--sc-u));
		padding-block: 0;
		padding-inline: calc(33.4 * var(--sc-u)) calc(32.3 * var(--sc-u));
		gap: calc(13 * var(--sc-u));
		border-radius: calc(6 * var(--sc-u));
		font-size: calc(16 * var(--sc-u));
		letter-spacing: 0.026em;
	}

	.sc-hero--editorial .sc-hero__actions .sc-button--primary {
		background-color: var(--sc-gm-blue);
	}

	.sc-hero--editorial .sc-hero__actions .sc-button--primary:hover,
	.sc-hero--editorial .sc-hero__actions .sc-button--primary:focus-visible {
		background-color: var(--sc-gm-blue-hover);
	}

	.sc-hero--editorial .sc-hero__actions .sc-button--secondary {
		border-width: var(--sc-border-width);
		border-color: rgb(36 130 192);
		background-color: #f0f5fe;
		padding-inline: calc(34.4 * var(--sc-u)) calc(31.3 * var(--sc-u));
		color: #0052a3;
	}

	/*
	 * The accent line is set smaller and tighter than the first: the reference
	 * fits "MORE EFFICIENT TOMORROW" into a 790px measure where the display size
	 * needs 812px. The size, tracking and word spacing below are the measured
	 * optimum of that fit — the reference's word starts land on target, the ends
	 * within a few pixels — and the nudge lands the line on its baseline.
	 */
	.sc-hero--editorial .sc-hero__line--accent {
		padding-inline-start: calc(1 * var(--sc-u));
		font-size: calc(53 * var(--sc-u));
		letter-spacing: -0.05em;
		word-spacing: calc(9.5 * var(--sc-u));
		color: var(--sc-gm-blue);
		translate: 0 calc(-1 * var(--sc-u));
	}

	.sc-hero__micro {
		margin-block-start: calc(53 * var(--sc-u));

		/* The reference paints the rail two pixels below the line box the flow
		   gives it; the shift is a paint offset so the strip below never moves. */
		translate: 0 calc(2 * var(--sc-u));
		font-size: calc(13.5 * var(--sc-u));

		/* The semibold in the type scale is twice the reference's ink here
		   (2322 px vs 1277 below the threshold); 270 is the interpolated
		   weight whose coverage lands on it. */
		font-weight: 270;
		line-height: calc(21 * var(--sc-u));
		letter-spacing: 0.04em;
		white-space: nowrap;
		color: #2e4769;
	}

	.sc-hero__micro .sc-rule {
		inline-size: calc(79 * var(--sc-u));

		/* The reference's rail is a 2px hairline; a 3px block read one row dark. */
		block-size: calc(2 * var(--sc-u));
		margin-inline-start: calc(1 * var(--sc-u));
		background-color: #0e6bb0;
	}

	/*
	 * The photograph is a pre-composed band cropped from the reference: it
	 * already carries the soft haze that lets the copy column read over it, so
	 * the figure only has to place it on the section's band.
	 *
	 * It is anchored to the band and reaches the band's bottom edge. Its
	 * height is derived from the copy column rather than fixed at the reference's
	 * 633 units, because the band is as tall as the copy: the English copy sets
	 * on three lines and the Persian display type is set larger, so a fixed
	 * height leaves a pale strip across the foot of the band in Persian. The
	 * expression is the copy height plus the band's own top and bottom padding
	 * (86 + 73.5 units), which is 632.5 in English — the reference height.
	 */
	.sc-hero__aside {
		position: absolute;
		inset-block-start: calc(-86 * var(--sc-u));
		inset-inline-end: calc(-72 * var(--sc-u));
		inline-size: calc(1112 * var(--sc-u));
		block-size: calc(100% + 159.5 * var(--sc-u));
		pointer-events: none;
	}

	.sc-hero__media {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		aspect-ratio: auto;
		border-radius: 0;
	}

	/* The figure and its image are both out of flow, so the image needs its own
	   height or it falls back to the file's intrinsic aspect ratio. */
	.sc-hero__media .sc-media__image {
		block-size: 100%;
		object-fit: cover;
	}

	/*
	 * --- The haze that separates the photograph from the copy -------------
	 *
	 * The reference band is a pre-composed crop: a plant at one end and a pale
	 * field at the other, with no hard edge between them. Read in the other
	 * direction that still holds — the pale field arrives at the copy side — but
	 * it is 364 reference pixels wide, and the Persian copy needs about twice
	 * that before it is clear of the plant.
	 *
	 * Measured on the rendered band, under the Persian body copy, the call to
	 * action and the tagline, the picture runs from 59 to 188 in luma against a
	 * page surface of 248: the copy was set over the darkest quarter of a
	 * refinery rather than over the field, which is what made the two halves of
	 * the composition read as one text block lying on top of a photograph.
	 *
	 * So the crop's own transition is extended with a gradient in the section's
	 * surface colour. It is drawn on the figure rather than on the copy column,
	 * and it is a read of the same device the reference already uses — the pale
	 * field — just carried far enough that the type has somewhere to sit.
	 *
	 * Where the stops land is solved, not chosen: the copy's widest ink starts
	 * 95 units inside the band at the reference width, and the gradient is set
	 * so that the field is at full strength a little before that and its own
	 * 355-unit ramp begins 300 units earlier. Everything from there to the
	 * band's edge is the copy's, and everything before it is the picture's.
	 *
	 * Scoped to the right-to-left hero on purpose. The English and Russian
	 * compositions are approved as they stand, and their copy column already
	 * meets the crop's own pale field — this only alters the one locale where
	 * the crop and the copy were pointing the same way and overlapping.
	 */
	[dir="rtl"] .sc-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;

		/*
		 * `to left` because the copy sits at the band's trailing edge, which in
		 * a right-to-left document is its left. The far end stays fully
		 * transparent, so the plant keeps its own contrast and the band still
		 * reads as a photograph.
		 *
		 * The opaque end is the hero's own surface — `--sc-color-surface-pale`,
		 * not the white `--sc-color-surface`, which the hero does not use. A
		 * gradient to white on a pale blue section is a visible white band, and
		 * that band is exactly the hard edge this is here to remove.
		 */
		background-image: linear-gradient(
			to left,
			var(--sc-color-surface-pale) 0,
			var(--sc-color-surface-pale) 25%,
			rgb(244 249 254 / 0%) 57%
		);
	}

	/*
	 * The kicker sits on the photograph's pale haze: three uppercase lines
	 * flushed to one left edge, with the brand's red rule under the block.
	 */
	.sc-hero__kicker {
		position: absolute;
		inset-block-start: calc(148 * var(--sc-u));
		inset-inline-start: calc(895 * var(--sc-u));
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-size: calc(19 * var(--sc-u));
		font-weight: 300;
		line-height: calc(27 * var(--sc-u));
		letter-spacing: calc(3.2 * var(--sc-u));
		text-transform: uppercase;
		color: var(--sc-gm-kicker);
	}

	.sc-hero__kicker-rule {
		inline-size: calc(38 * var(--sc-u));
		block-size: calc(3.5 * var(--sc-u));
		margin-block-start: calc(15.45 * var(--sc-u));
		background-color: var(--sc-gm-red);
	}

	/* --- Credibility ----------------------------------------------------- */

	.sc-credibility--editorial {
		--sc-gm-inset: calc(94 * var(--sc-u));
		--sc-gm-inset-end: calc(99 * var(--sc-u));

		border-block: 0;

		/* 46.4u keeps the label and detail baselines on the reference rows while the
		   hero band below reaches y=743; 46.5u rounded two label tops one pixel down.
		   61.6u ends the band on the reference's Solution Finder tint boundary (y=920). */
		padding-block: calc(46.4 * var(--sc-u)) calc(61.6 * var(--sc-u));
	}

	/*
	 * The reference places the four proofs at measured columns (glyph left edges
	 * at 94/489/885/1291), so the strip is laid out with fixed column widths
	 * rather than `space-between`: with the widths pinned, a later copy change
	 * can no longer pull the glyphs and rules sideways.
	 */
	.sc-credibility--editorial .sc-credibility__list {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 0;
	}

	.sc-credibility--editorial .sc-credibility__item {
		position: relative;
		flex: 0 0 auto;
		align-items: flex-start;
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(1) {
		inline-size: calc(395 * var(--sc-u));
		gap: calc(40 * var(--sc-u));
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(2) {
		inline-size: calc(396 * var(--sc-u));
		gap: calc(39 * var(--sc-u));
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(3) {
		inline-size: calc(406 * var(--sc-u));
		gap: calc(32 * var(--sc-u));
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(4) {
		gap: calc(32 * var(--sc-u));
	}

	.sc-credibility--editorial .sc-credibility__item + .sc-credibility__item::before {
		content: "";
		position: absolute;
		inset-block-start: calc(-4 * var(--sc-u));
		inline-size: calc(2 * var(--sc-u));
		block-size: calc(78 * var(--sc-u));
		background-color: rgb(219 225 230);
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(2)::before {
		inset-inline-start: calc(-73 * var(--sc-u));
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(3)::before {
		inset-inline-start: calc(-70 * var(--sc-u));
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(4)::before {
		inset-inline-start: calc(-71 * var(--sc-u));
	}

	/*
	 * Each proof glyph is drawn from the reference artwork, so each carries the
	 * reference's own tight ink box: the box sizes and the text offsets below are
	 * measurements, not a shared scale.
	 */
	.sc-credibility--editorial .sc-credibility__icon {
		inline-size: auto;
		color: #0672b9;
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(1) .sc-credibility__icon {
		inline-size: calc(65 * var(--sc-u));
		translate: 0 calc(4 * var(--sc-u));
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(2) .sc-credibility__icon {
		inline-size: calc(75 * var(--sc-u));
		translate: 0 calc(-0.5 * var(--sc-u));
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(3) .sc-credibility__icon {
		inline-size: calc(67 * var(--sc-u));
		translate: 0 calc(2 * var(--sc-u));
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(4) .sc-credibility__icon {
		inline-size: calc(70 * var(--sc-u));
		translate: 0 calc(3.5 * var(--sc-u));
	}

	.sc-credibility__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0 calc(92 * var(--sc-u));
	}

	.sc-credibility__item {
		gap: calc(43 * var(--sc-u));
	}

	.sc-credibility__icon {
		inline-size: calc(64 * var(--sc-u));
	}

	.sc-credibility__label {
		font-size: calc(17 * var(--sc-u));
	}

	.sc-credibility__detail {
		font-size: calc(16 * var(--sc-u));
	}

	.sc-credibility--editorial .sc-credibility__label,
	.sc-credibility--editorial .sc-credibility__detail {
		color: #132240;
		font-size: calc(16.5 * var(--sc-u));
	}

	.sc-credibility--editorial .sc-credibility__label {
		word-spacing: calc(-2 * var(--sc-u));
	}

	/*
	 * The reference sets every line to its own measured ink width, so the
	 * tracking is per item rather than a shared value: the four labels sit at
	 * three different settings and the third detail line is the tight one.
	 */
	.sc-credibility--editorial .sc-credibility__item:nth-child(1) .sc-credibility__label,
	.sc-credibility--editorial .sc-credibility__item:nth-child(2) .sc-credibility__label {
		letter-spacing: -0.0275em;
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(3) .sc-credibility__label {
		letter-spacing: -0.025em;
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(4) .sc-credibility__label {
		letter-spacing: -0.014em;
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(3) .sc-credibility__detail {
		letter-spacing: -0.012em;
	}

	/*
	 * Each statement is placed individually in the reference: the glyphs sit on
	 * a common line, but every text block hangs a different distance below its
	 * own glyph. The x positions come from the pinned columns above, so only
	 * the vertical offsets are needed here.
	 */
	.sc-credibility--editorial .sc-credibility__item:nth-child(1) .sc-credibility__text {
		translate: 0 calc(16 * var(--sc-u));
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(2) .sc-credibility__text {
		translate: 0 calc(12.5 * var(--sc-u));
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(3) .sc-credibility__text {
		translate: 0 calc(17 * var(--sc-u));
	}

	.sc-credibility--editorial .sc-credibility__item:nth-child(4) .sc-credibility__text {
		translate: 0 calc(9 * var(--sc-u));
	}

	/*
	 * The reference's two statement lines sit 26px apart in all four items,
	 * while our text grid lands on 27 for three of them: the sub-line is the one
	 * that moves.
	 */
	.sc-credibility--editorial .sc-credibility__item:nth-child(2) .sc-credibility__detail,
	.sc-credibility--editorial .sc-credibility__item:nth-child(3) .sc-credibility__detail,
	.sc-credibility--editorial .sc-credibility__item:nth-child(4) .sc-credibility__detail {
		translate: 0 calc(-1 * var(--sc-u));
	}

	/* --- Solution finder ------------------------------------------------- */

	.sc-discovery--editorial {
		--sc-gm-inset: calc(84 * var(--sc-u));
		--sc-gm-inset-end: calc(84 * var(--sc-u));

		padding-block: calc(16 * var(--sc-u));
	}

	.sc-discovery__intro {
		gap: calc(22 * var(--sc-u));
		max-inline-size: calc(610 * var(--sc-u));
		margin-block-end: 0;
	}

	.sc-discovery--editorial .sc-eyebrow {
		font-size: calc(14 * var(--sc-u));
	}

	.sc-discovery--editorial .sc-section__title {
		font-size: calc(42 * var(--sc-u));
	}

	.sc-discovery--editorial .sc-section__lead {
		font-size: calc(16 * var(--sc-u));
		line-height: 1.6;
	}

	.sc-discovery__media {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		inline-size: calc(825 * var(--sc-u));
		block-size: calc(266 * var(--sc-u));
		aspect-ratio: auto;
		border-radius: 0;
		mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / 50%) 26%, black 60%);
	}

	[dir="rtl"] .sc-discovery__media {
		mask-image: linear-gradient(to left, transparent 0%, rgb(0 0 0 / 50%) 26%, black 60%);
	}

	/*
	 * The finder band carries the second, larger identity pattern. It sits
	 * behind the floating panel on the leading side, cropped by the section, so
	 * the pale blue band reads as brand-owned without competing with the form.
	 */
	.sc-discovery__pattern {
		inset-block-start: calc(118 * var(--sc-u));
		inset-inline-start: 0;
		inline-size: calc(900 * var(--sc-u));
		block-size: calc(470 * var(--sc-u));
		opacity: 0.4;
	}

	.sc-discovery__panel {
		position: relative;
		z-index: 1;
		gap: 0;

		/* The approved composition leaves 281u between the band edge and the
		 * panel; the intro block accounts for 260u of it. */
		margin-block-start: calc(21 * var(--sc-u));
		padding: calc(6 * var(--sc-u));

		/* The field row owns the trailing 29u, so the panel adds none of its own. */
		padding-block-end: 0;
		border-radius: calc(12 * var(--sc-u));
		box-shadow: 0 calc(26 * var(--sc-u)) calc(60 * var(--sc-u)) rgb(35 48 75 / 14%);
	}

	.sc-discovery__modes {
		flex-wrap: nowrap;
		gap: 0;
	}

	/*
	 * Each chip is sized by its own two lines instead of by an even split of
	 * the row: the approved composition shows one wide chip followed by two
	 * narrower ones, and the explanatory line — not the label — sets the
	 * width. Shrinking stays allowed so a longer translation wraps instead of
	 * overflowing the panel.
	 */
	.sc-discovery__mode {
		flex: 0 1 auto;
		min-inline-size: 0;
		min-block-size: calc(75 * var(--sc-u));
		padding-inline: calc(48 * var(--sc-u));
		border-radius: calc(8 * var(--sc-u));
		font-size: calc(15 * var(--sc-u));
	}

	.sc-discovery__mode-intro {
		font-size: calc(14 * var(--sc-u));
	}

	.sc-discovery__fields {
		flex-wrap: nowrap;
		gap: calc(40 * var(--sc-u));
		margin-block-start: calc(28 * var(--sc-u));
		padding-inline: calc(37 * var(--sc-u)) calc(42 * var(--sc-u));
		padding-block-end: calc(29 * var(--sc-u));
	}

	.sc-discovery__field {
		flex: 0 0 auto;
		inline-size: calc(360 * var(--sc-u));
	}

	.sc-discovery__control {
		gap: calc(4 * var(--sc-u));
	}

	.sc-discovery__label {
		font-size: calc(13 * var(--sc-u));
		line-height: 1.25;
	}

	.sc-discovery__select {
		block-size: calc(48 * var(--sc-u));
		min-block-size: 0;
		padding-block: 0;
		padding-inline: calc(14 * var(--sc-u)) calc(36 * var(--sc-u));
		border-radius: calc(4 * var(--sc-u));
		font-size: calc(14 * var(--sc-u));
	}

	.sc-discovery__fields .sc-button--cta {
		margin-inline-start: auto;
		inline-size: calc(238 * var(--sc-u));
		min-block-size: calc(61 * var(--sc-u));
		padding-inline: calc(24 * var(--sc-u));
		border-radius: calc(6 * var(--sc-u));
		font-size: calc(15 * var(--sc-u));
	}

	.sc-discovery__rail {
		grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
		gap: calc(40 * var(--sc-u));
		align-items: center;
		margin-block-start: calc(41 * var(--sc-u));
		padding-block: 0;
	}

	.sc-discovery__rail-list {
		display: contents;
	}

	.sc-discovery__rail-item {
		gap: calc(14 * var(--sc-u));
	}

	.sc-discovery__rail-icon {
		inline-size: calc(40 * var(--sc-u));
	}

	.sc-discovery__support {
		justify-self: end;
		max-inline-size: calc(260 * var(--sc-u));
		font-size: calc(13 * var(--sc-u));
		text-align: end;
	}

	.sc-discovery__rail-label .sc-credibility__label,
	.sc-discovery__rail-label .sc-credibility__detail {
		font-size: calc(13 * var(--sc-u));
	}

	/* --- Industries ------------------------------------------------------ */

	.sc-industries--editorial {
		--sc-gm-inset: calc(84 * var(--sc-u));
		--sc-gm-inset-end: calc(84 * var(--sc-u));

		padding-block: calc(20 * var(--sc-u)) calc(16 * var(--sc-u));
	}

	.sc-industries__grid {
		grid-template-columns: calc(471 * var(--sc-u)) minmax(0, 1fr) calc(43 * var(--sc-u));
		gap: 0 calc(30 * var(--sc-u));
		align-items: start;
	}

	.sc-industries__intro {
		gap: calc(14 * var(--sc-u));
	}

	.sc-industries--editorial .sc-eyebrow {
		font-size: calc(14 * var(--sc-u));
	}

	.sc-industries--editorial .sc-section__title {
		font-size: calc(35 * var(--sc-u));
		line-height: 1.14;
	}

	.sc-industries--editorial .sc-section__lead {
		font-size: calc(15 * var(--sc-u));
		line-height: 1.5;
		max-inline-size: calc(500 * var(--sc-u));
	}

	.sc-industries__action {
		margin-block-start: calc(24 * var(--sc-u));
	}

	/*
	 * The industries action is the one quiet button that still carries a
	 * surface: on this tinted band an outline reads as a button, and a bare
	 * text link would read as a fifth line of copy.
	 */
	.sc-industries--editorial .sc-button--quiet {
		min-block-size: calc(47 * var(--sc-u));
		padding-inline: calc(28 * var(--sc-u));
		border-color: var(--sc-color-brand-border);
		border-radius: calc(6 * var(--sc-u));
		background-color: var(--sc-color-surface);
		font-size: calc(14 * var(--sc-u));
	}

	.sc-industries__rail {
		grid-auto-columns: calc(225 * var(--sc-u));
		gap: calc(15 * var(--sc-u));
	}

	.sc-industry-card__media {
		block-size: calc(112 * var(--sc-u));
		aspect-ratio: auto;
	}

	.sc-industry-card__body {
		gap: calc(12 * var(--sc-u));
		min-block-size: calc(167 * var(--sc-u));
		padding: calc(20 * var(--sc-u));
	}

	.sc-industry-card__icon {
		inline-size: calc(36 * var(--sc-u));
	}

	.sc-industry-card__title {
		font-size: calc(17 * var(--sc-u));
	}

	.sc-industry-card__description {
		font-size: calc(13 * var(--sc-u));
		line-height: 1.4;
	}

	.sc-industries__controls {
		flex-direction: column;
		gap: calc(20 * var(--sc-u));
		margin-block-start: calc(116 * var(--sc-u));
		justify-content: flex-start;
	}

	.sc-industries__control {
		inline-size: calc(43 * var(--sc-u));
		block-size: calc(43 * var(--sc-u));
		border-radius: calc(6 * var(--sc-u));
	}

	.sc-industries__control svg {
		inline-size: calc(16 * var(--sc-u));
	}

	/* --- Product portfolio ----------------------------------------------- */

	.sc-portfolio--editorial {
		--sc-gm-inset: calc(84 * var(--sc-u));
		--sc-gm-inset-end: calc(84 * var(--sc-u));

		padding-block: calc(24 * var(--sc-u));
	}

	.sc-portfolio__grid {
		grid-template-columns: calc(468 * var(--sc-u)) minmax(0, 1fr) calc(150 * var(--sc-u));
		column-gap: calc(20 * var(--sc-u));
		align-items: start;
	}

	.sc-portfolio__intro {
		gap: calc(16 * var(--sc-u));
	}

	.sc-portfolio--editorial .sc-eyebrow {
		font-size: calc(14 * var(--sc-u));
	}

	.sc-portfolio--editorial .sc-section__title {
		font-size: calc(37 * var(--sc-u));
		line-height: 1.14;
		max-inline-size: calc(700 * var(--sc-u));
	}

	.sc-portfolio--editorial .sc-section__lead {
		font-size: calc(15 * var(--sc-u));
		line-height: 1.5;
		max-inline-size: calc(500 * var(--sc-u));
	}

	.sc-portfolio__action {
		margin-block-start: calc(20 * var(--sc-u));
	}

	.sc-portfolio--editorial .sc-button {
		min-block-size: calc(56 * var(--sc-u));
		font-size: calc(15 * var(--sc-u));
	}

	.sc-portfolio__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: calc(17 * var(--sc-u));
	}

	.sc-product-card__link {
		gap: calc(14 * var(--sc-u));
	}

	.sc-product-card__media {
		block-size: calc(190 * var(--sc-u));
		aspect-ratio: auto;
		border-radius: calc(8 * var(--sc-u));
	}

	.sc-product-card__band {
		gap: calc(12 * var(--sc-u));
		font-size: calc(12 * var(--sc-u));
	}

	.sc-product-card__band .sc-rule {
		inline-size: calc(27 * var(--sc-u));
		block-size: calc(2 * var(--sc-u));
	}

	.sc-product-card__title {
		font-size: calc(20 * var(--sc-u));
	}

	.sc-product-card__description {
		font-size: calc(14 * var(--sc-u));
		line-height: 1.35;
	}

	.sc-product-card__action {
		margin-block-start: calc(20 * var(--sc-u));
		font-size: calc(14 * var(--sc-u));
	}

	.sc-portfolio__rail {
		align-self: start;
		margin-block-start: calc(197 * var(--sc-u));
		font-size: calc(13 * var(--sc-u));
	}

	.sc-portfolio__pattern--start {
		inset-block-start: calc(473 * var(--sc-u));
		inset-inline-start: calc(7 * var(--sc-u));
		inline-size: calc(128 * var(--sc-u));
		block-size: calc(100 * var(--sc-u));
	}

	.sc-portfolio__pattern--end {
		inset-block-start: calc(806 * var(--sc-u));
		inset-inline-end: 0;
		inline-size: calc(158 * var(--sc-u));
		block-size: calc(151 * var(--sc-u));
	}

	/* --- Closing call to action ------------------------------------------- */

	.sc-final-cta--editorial {
		padding-block: calc(84 * var(--sc-u));
	}

	/*
	 * The band is three zones: the cropped brand field on the leading side, the
	 * invitation in the middle, the actions closing the trailing side. The
	 * pattern is decoration, so it takes no part in the grid — it is positioned
	 * into the first zone and bleeds off the band's edge, which crops the traced
	 * mark and keeps it clear of the invitation that starts at 20%.
	 */
	.sc-final-cta__pattern {
		display: block;
		inset-block-start: 50%;
		translate: 0 -50%;
		inset-inline-start: calc(-112 * var(--sc-u));
		inline-size: calc(392 * var(--sc-u));
		block-size: calc(304 * var(--sc-u));
		opacity: 0.22;
	}

	.sc-final-cta__grid {
		grid-template-columns: 20% 48% 32%;
		gap: 0;
		align-items: center;
	}

	.sc-final-cta__copy {
		grid-column: 2;
		padding-inline-end: calc(40 * var(--sc-u));
	}

	.sc-final-cta__eyebrow {
		font-size: calc(13 * var(--sc-u));
	}

	.sc-final-cta__title {
		font-size: calc(34 * var(--sc-u));
		line-height: 1.16;
	}

	.sc-final-cta__lead {
		max-inline-size: calc(560 * var(--sc-u));
		font-size: calc(15 * var(--sc-u));
		line-height: 1.6;
	}

	.sc-final-cta__actions {
		grid-column: 3;
		gap: calc(20 * var(--sc-u));
	}

	.sc-final-cta--editorial .sc-button--inverse {
		min-block-size: calc(52 * var(--sc-u));
		padding-inline: calc(30 * var(--sc-u));
		border-radius: calc(6 * var(--sc-u));
		font-size: calc(15 * var(--sc-u));
	}

	.sc-final-cta__secondary {
		font-size: calc(14 * var(--sc-u));
	}

	/* --- Footer ----------------------------------------------------------- */

	.sc-site-footer--editorial {
		padding-block: calc(64 * var(--sc-u)) calc(56 * var(--sc-u));
	}

	/*
	 * The footer row is narrower than the page: the reference sets it on a
	 * centred 1418 reference-pixel column, which is why the logo starts at 127
	 * rather than at the page inset used by every band above it.
	 */
	.sc-site-footer--editorial > .sc-container {
		max-inline-size: calc(1418 * var(--sc-u));
		margin-inline: auto;
		padding-block: 0;
		padding-inline: 0;
	}

	/*
	 * Brand, navigation, social: the navigation is centred in the row rather
	 * than packed against the logo, so the row stays balanced whether or not the
	 * client has supplied any social profiles.
	 */
	.sc-site-footer__bar {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: calc(64 * var(--sc-u));
	}

	.sc-site-footer--editorial .sc-site-footer__logo,
	.sc-site-footer--editorial .custom-logo {
		inline-size: calc(206 * var(--sc-u));
		max-inline-size: none;
		max-block-size: none;
		block-size: auto;
	}

	.sc-site-footer__nav {
		justify-self: center;
	}

	.sc-site-footer__list--inline {
		gap: calc(28 * var(--sc-u));
		font-size: calc(14 * var(--sc-u));
	}

	.sc-site-footer__social {
		justify-self: end;
		gap: calc(16 * var(--sc-u));
	}

	.sc-site-footer__bottom {
		flex-wrap: nowrap;
		gap: calc(40 * var(--sc-u));
		margin-block-start: calc(40 * var(--sc-u));
		padding-block-start: calc(22 * var(--sc-u));
		font-size: calc(13 * var(--sc-u));
	}

	.sc-site-footer__legal {
		gap: calc(20 * var(--sc-u));
	}
}

/* ===========================================================================
 * Desktop header — always one row
 *
 * The reference layer above measures the approved bar against a 1672px frame
 * and scales every value with the viewport, which is correct for the geometry
 * and wrong for the type: at 1440px it sets the navigation at 11.2px and at
 * 1280px at 9.9px. The bar was also allowed to wrap, and it did — the brand sat
 * on one row and the navigation, the action and the language pair on a second
 * one that overflowed the band by about 20px, in English as well as Russian.
 *
 * This layer replaces that behaviour with a single-row bar whose type and
 * horizontal rhythm stop shrinking:
 *
 *   1. Every flex line in the header is `nowrap`. Nothing in the chrome may
 *      wrap, because a wrapped row cannot be centred in a fixed-height band and
 *      a second row is a second line of chrome under the first.
 *   2. The boxes still scale with `--sc-u` so the bar keeps its proportions,
 *      but a floor is applied to the type, to the gaps and to the control sizes
 *      so a 1280px laptop gets the same labels at a readable size.
 *   3. The Russian action is condensed. Its label is a third longer than the
 *      English one, and it is the single widest thing in the bar; shortening it
 *      in Russian only is what lets the full navigation stay on one row at
 *      1280px instead of collapsing the whole navigation for every language.
 *
 * Above 104.5rem the reference values are restored in full, so the approved
 * 1672px composition is the one that ships at the measurement width.
 * ======================================================================== */

@media (width >= 90rem) {
	.sc-site-header--editorial {
		--sc-gm-inset: clamp(1.5rem, 2.2vw, 3rem);
		--sc-gm-inset-end: var(--sc-gm-inset);

		/* The reference uses one blue for the CTA, the hero button and the H1
		   accent, a shade cooler than the token the brand mark is drawn with. */
		--sc-gm-blue: #0b79be;
		--sc-gm-blue-hover: #0a68a4;

		/*
		 * Type, measured against the row it has to fit in rather than against
		 * the reference's proportions.
		 *
		 * 13 units of the reference's own scale is 13px at 1672 and 9.9px at
		 * 1280 — a label size that reads as a caption, not as a navigation. The
		 * navigation is therefore held at 14px across the whole tier, and the
		 * geometry around it yields instead: the gaps, the control sizes and the
		 * spacing between the mark and the destinations are all set from the
		 * measured row, which is what keeps seven destinations, the brand, the
		 * search, the action and the language pair on one line in every language
		 * at a size a visitor can read.
		 */
		--sc-header-nav-size: 0.875rem;

		/*
		 * The rhythm between destinations, widened on review: at 0.875rem the
		 * seven labels read as one run rather than as seven places to go. The
		 * two costs this tier had to weigh are both paid down first — the
		 * search control and its action gap have been removed from the bar
		 * entirely (a 34px circle plus a 12px gap), and the mark is 13% smaller
		 * below — and the Russian labels, the longest of the three locales, are
		 * still the binding constraint. The panel gap steps up with it so the
		 * brand is not left sitting closer to the first destination than the
		 * destinations are to each other.
		 */
		--sc-header-nav-gap: 1.25rem;
		--sc-header-panel-gap: 1.375rem;
		--sc-header-action-gap: 0.875rem;
		--sc-header-lang-size: 1.875rem;

		block-size: clamp(5rem, calc(112 * var(--sc-u)), 7rem);
		border-block-end: 0;
	}

	.sc-site-header--editorial > .sc-container {
		max-inline-size: none;
		block-size: 100%;
		padding-inline: var(--sc-gm-inset) var(--sc-gm-inset-end);
	}

	/*
	 * The mark and the destinations are separated by this gap plus the panel's
	 * own start margin. Both are held to their floors here because the row is
	 * full at both ends: every unit given to the space between the brand and the
	 * first destination is a unit taken from the last destination and the action
	 * that has to sit beside it.
	 */
	.sc-site-header--editorial .sc-site-header__inner {
		block-size: 100%;
		flex-wrap: nowrap;
		gap: clamp(0.875rem, calc(20 * var(--sc-u)), 1.625rem);
	}

	.sc-site-header--editorial .sc-site-header__logo,
	.sc-site-header--editorial .custom-logo-link {
		display: block;
	}

	.sc-site-header--editorial .sc-site-header__logo,
	.sc-site-header--editorial .sc-site-header__logo img,
	.sc-site-header--editorial .custom-logo {
		inline-size: clamp(9.75rem, calc(226 * var(--sc-u)), 14.125rem);
		max-inline-size: none;
		max-block-size: none;
		block-size: auto;
	}

	.sc-site-header--editorial .sc-site-header__branding {
		/* The lockup is cropped to its ink, and the reference seats that ink
		   7px below the band's centre line. */
		margin-block-start: calc(14 * var(--sc-u));
		margin-inline-start: calc(1 * var(--sc-u));
		flex: 0 0 auto;
	}

	.sc-site-header--editorial .sc-site-header__nav {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: var(--sc-header-panel-gap);
		margin-inline-start: max(0.375rem, calc(8 * var(--sc-u)));
		min-inline-size: 0;
	}

	/*
	 * The destinations are sized from their content and may not shrink.
	 *
	 * Left shrinkable, as they were, a row that is one pixel too full does not
	 * wrap — it compresses the labels inside their own boxes, where nothing
	 * reports it and the last destination quietly slides under the action
	 * button. Refusing to shrink turns the same condition into visible
	 * horizontal overflow, which is a defect that can be measured and fixed
	 * rather than one that ships.
	 */
	.sc-site-header--editorial .sc-primary-nav {
		flex: 0 0 auto;
		min-inline-size: 0;
	}

	.sc-site-header--editorial .sc-primary-nav__list {
		flex-wrap: nowrap;
		gap: var(--sc-header-nav-gap);
	}

	.sc-site-header--editorial .sc-primary-nav__list > li {
		flex: 0 0 auto;
	}

	.sc-site-header--editorial .sc-primary-nav__list a {
		position: relative;
		min-block-size: 0;
		padding-block: calc(20 * var(--sc-u));
		padding-inline: 0;
		border-radius: 0;
		font-size: var(--sc-header-nav-size);
		line-height: calc(24 * var(--sc-u));
		letter-spacing: -0.022em;
		white-space: nowrap;
		transition: color var(--sc-transition-base);
	}

	.sc-site-header--editorial .sc-primary-nav__list a:hover {
		background-color: transparent;

		/* The same blue as the underline that grows with it, so the hover reads
		   as one movement rather than two. */
		color: var(--sc-gm-blue);
	}

	.sc-site-header--editorial .sc-primary-nav__list a:focus-visible::after {
		/* The focus rule is drawn one step heavier than the hover rule drawn by
		   the same pseudo-element, so a keyboard user gets a stronger signal
		   than a pointer does. */
		block-size: calc(5 * var(--sc-u));
	}

	/*
	 * The current destination. Drawn with `::after` rather than a border so it
	 * can grow from the leading edge on hover, and so it never changes the line
	 * box of the label above it.
	 */
	.sc-site-header--editorial .sc-primary-nav__list a::after {
		content: "";
		position: absolute;
		inset-block-end: calc(2 * var(--sc-u));
		inset-inline: 0;
		block-size: calc(4 * var(--sc-u));
		background-color: var(--sc-gm-blue);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform var(--sc-transition-base);
	}

	[dir="rtl"] .sc-site-header--editorial .sc-primary-nav__list a::after {
		transform-origin: right center;
	}

	.sc-site-header--editorial .sc-primary-nav__list a:hover::after,
	.sc-site-header--editorial .sc-primary-nav__list a:focus-visible::after,
	.sc-site-header--editorial .sc-primary-nav__list .current-menu-item > a::after,
	.sc-site-header--editorial .sc-primary-nav__list .current_page_item > a::after,
	.sc-site-header--editorial .sc-primary-nav__list .current-menu-ancestor > a::after,
	.sc-site-header--editorial .sc-primary-nav__list [aria-current] > a::after {
		transform: scaleX(1);
	}

	/*
	 * The base layer marks the current page with an inset shadow, which the
	 * reference's own underline already conveys here. The shadow is switched off
	 * and the label is taken to the brand blue at semibold, so "where I am" is
	 * distinguishable from "where the pointer is" at a glance rather than by
	 * comparing two identical treatments.
	 */
	.sc-site-header--editorial .sc-primary-nav__list .current-menu-item > a,
	.sc-site-header--editorial .sc-primary-nav__list .current_page_item > a,
	.sc-site-header--editorial .sc-primary-nav__list .current-menu-ancestor > a,
	.sc-site-header--editorial .sc-primary-nav__list [aria-current] > a,
	.sc-site-header--editorial .sc-primary-nav__list a[aria-current] {
		box-shadow: none;
		font-weight: var(--sc-font-weight-semibold);
		color: var(--sc-gm-blue);
	}

	.sc-site-header--editorial .sc-site-header__actions {
		flex: 0 0 auto;
		flex-wrap: nowrap;
		gap: var(--sc-header-action-gap);
		margin-inline-start: auto;
	}

	.sc-site-header--editorial .sc-site-header__cta {
		/* The reference seats the fill 2.5px above the band's centre line, which
		   a negative top margin reaches without disturbing the row it sits in. */
		margin-block-start: calc(-5 * var(--sc-u));
		min-block-size: clamp(2.75rem, calc(56 * var(--sc-u)), 3.5rem);
		padding-inline: clamp(1.25rem, calc(32.5 * var(--sc-u)), 2.0313rem);
		gap: clamp(0.5rem, calc(15 * var(--sc-u)), 0.9375rem);
		border-radius: calc(6 * var(--sc-u));
		font-size: clamp(0.7813rem, calc(14 * var(--sc-u)), 0.875rem);
		letter-spacing: -0.016em;
		white-space: nowrap;
		background-color: var(--sc-gm-blue);
	}

	.sc-site-header--editorial .sc-site-header__cta:hover,
	.sc-site-header--editorial .sc-site-header__cta:focus-visible {
		background-color: var(--sc-gm-blue-hover);
	}

	/* The condensed action label: hidden until a locale needs it (§ below). */
	.sc-site-header--editorial .sc-site-header__cta-label--condensed {
		display: none;
	}

	/* The language pair is a fixed run of three short codes. It must never wrap,
	   which is what turned it into a 96px block inside a 96px band. */
	.sc-site-header--editorial .sc-language-switcher__list {
		flex-wrap: nowrap;
		gap: clamp(0.25rem, calc(6 * var(--sc-u)), 0.5rem);
	}

	.sc-site-header--editorial .sc-language-switcher__link {
		min-inline-size: var(--sc-header-lang-size);
		min-block-size: var(--sc-header-lang-size);
		padding-inline: 0;
		white-space: nowrap;
	}

	.sc-site-header--editorial .sc-site-header__languages {
		font-size: clamp(0.75rem, calc(13 * var(--sc-u)), 0.8125rem);
		gap: calc(6 * var(--sc-u));
	}

	/*
	 * Russian, in the band between this tier and the reference width, takes a
	 * half-point less than the Latin languages. Its eight labels are a third
	 * longer, and at 1440px the row has room for 740px of destination against
	 * the 721 Russian needs at 13.5 units — 22 units of clearance, against the
	 * 3 units that 14 would leave. It reaches 14 units at the reference width,
	 * where the band is wide enough for it.
	 */
	:lang(ru) .sc-site-header--editorial {
		--sc-header-nav-size: clamp(0.8438rem, calc(14 * var(--sc-u)), 0.875rem);
	}
}

/* ---------------------------------------------------------------------------
 * Condensed action label
 *
 * The bar is measured against the English labels, and a translation is not
 * obliged to be the same length. Below the reference width the action is the
 * widest single item in the row in every language, so it is the first thing to
 * give: it steps down to a shorter form of the same invitation, and the full
 * sentence stays on the link as its accessible name. The switch is per locale
 * because the English bar fits with its full label where the Russian one does
 * not — collapsing the navigation for every language to fix one would be the
 * wrong trade.
 * ------------------------------------------------------------------------- */

@media (width < 104.5rem) {
	.sc-site-header--editorial
		.sc-site-header__cta-label:not(.sc-site-header__cta-label--condensed) {
		display: none;
	}

	.sc-site-header--editorial .sc-site-header__cta-label--condensed {
		display: inline;
	}
}

@media (width >= 104.5rem) {
	:lang(ru)
		.sc-site-header--editorial
		.sc-site-header__cta-label:not(.sc-site-header__cta-label--condensed) {
		display: none;
	}

	:lang(ru) .sc-site-header--editorial .sc-site-header__cta-label--condensed {
		display: inline;
	}
}

/* ---------------------------------------------------------------------------
 * The reference bar
 *
 * At and above the measurement width the approved composition is restored
 * literally, with three measured corrections: the navigation is seated 13 units
 * after the brand instead of 39 (the reference gap plus the row gap is 39), the
 * destination gaps come in a step so eight labels and the action cluster fit
 * one 1672px row, and the horizontal rhythm of the cluster is tightened by the
 * same amount. Everything else — the inset, the band height, the type, the
 * action box, the underline — is the reference value.
 * ------------------------------------------------------------------------- */

@media (width >= 104.5rem) {
	.sc-site-header--editorial {
		--sc-gm-inset: calc(72 * var(--sc-u));
		--sc-gm-inset-end: calc(69 * var(--sc-u));

		/*
		 * The reference measures the bar against the English labels, where the
		 * destinations take 649 of the 880 units between the mark and the action
		 * and 33 units of gap sit between each pair. The Russian labels for the
		 * same eight destinations take 685px at 14px — a third more — and the row
		 * still has to carry the mark, the search, the action and the language
		 * pair inside the same 1672px band.
		 *
		 * The type is therefore set from the row rather than from the reference's
		 * own proportions: 14.5 units for the Latin languages and 14 for Russian,
		 * against the reference's 13; and the gaps and control sizes come in by a
		 * few units so that the eight destinations and the action cluster still
		 * end inside the band with room between them. The inset, the band height,
		 * the action box and the underline are unchanged.
		 */
		--sc-header-nav-size: calc(14.5 * var(--sc-u));

		/*
		 * The reference measured 14 units of gap between destinations. The
		 * measured 14 was the tightest value that kept eight Russian labels on
		 * one row beside the mark, the search control, the action and the
		 * language pair — and the row now carries three fewer things: the search
		 * control is gone, its action gap is gone, and the mark is 13% narrower.
		 * The gap is therefore re-solved against the same row with that budget:
		 * 24 units for the Latin locales and 22 for Russian, which is the widest
		 * value both can hold at this width without the last destination sliding
		 * under the action.
		 */
		--sc-header-nav-gap: calc(24 * var(--sc-u));
		--sc-header-panel-gap: calc(30 * var(--sc-u));
		--sc-header-action-gap: calc(18 * var(--sc-u));
		--sc-header-lang-size: calc(34 * var(--sc-u));

		block-size: calc(112 * var(--sc-u));
	}

	.sc-site-header--editorial .sc-site-header__logo,
	.sc-site-header--editorial .sc-site-header__logo img,
	.sc-site-header--editorial .custom-logo {
		inline-size: calc(226 * var(--sc-u));
	}

	.sc-site-header--editorial .sc-site-header__inner {
		gap: calc(26 * var(--sc-u));
	}

	.sc-site-header--editorial .sc-site-header__cta {
		min-block-size: calc(56 * var(--sc-u));
		padding-inline: calc(32.5 * var(--sc-u));
		gap: calc(15 * var(--sc-u));
		font-size: calc(14 * var(--sc-u));
	}

	.sc-site-header--editorial .sc-site-header__languages {
		font-size: calc(13 * var(--sc-u));
	}

	/*
	 * Russian gets one unit less than the Latin languages, at the reference
	 * width only. Its eight labels are a third longer, and at 14.5 units the row
	 * is 36 units too full — which, now that the destinations refuse to shrink,
	 * would push the language pair past the gutter. 14 units is still a full
	 * point above the reference's 13, and it is the difference between a bar
	 * that fits with room to spare and one that does not fit at all.
	 *
	 * The rhythm comes in by two units for the same reason and by the same
	 * arithmetic: eight Russian destinations carry seven gaps, so two units
	 * apiece is 14 units of row, which is what keeps the wider rhythm affordable
	 * in the locale that has the least room for it.
	 */
	:lang(ru) .sc-site-header--editorial {
		--sc-header-nav-size: calc(14 * var(--sc-u));
		--sc-header-nav-gap: calc(22 * var(--sc-u));
	}
}

/* ---------------------------------------------------------------------------
 * Phone composition, the closing bands
 *
 * The invitation stacks over the actions and the primary action spans the
 * measure — the one place on the page where a button earns the full width,
 * because it is the last thing the visitor is asked to do. The footer's
 * navigation becomes a two-column block so eight destinations stay scannable,
 * and both the navigation and the legal links carry a 44px target.
 * ------------------------------------------------------------------------- */

@media (width < 48rem) {
	.sc-final-cta__actions {
		justify-items: stretch;
	}

	.sc-final-cta__primary {
		inline-size: 100%;
	}

	.sc-final-cta__secondary {
		justify-self: start;
	}

	.sc-site-footer__list--inline {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--sc-space-md);
	}

	.sc-site-footer__list--inline a,
	.sc-site-footer__legal a {
		display: inline-flex;
		align-items: center;
		min-block-size: var(--sc-touch-target);
	}
}

/* ---------------------------------------------------------------------------
 * Fluid layer, tablet band
 *
 * Between the phone layout and the measured one the page only needs to pair
 * things up: two proofs per row, two cards per row, two stages per row. Above
 * 1200px the fidelity layer takes over completely, and below 768px these
 * sections are single column, which is what the base rules already do.
 * ------------------------------------------------------------------------- */

/* The icon carriers are sized by the phone and the fidelity layers only, so
 * without an explicit size in between the SVGs fall back to their intrinsic
 * 300px and squeeze the copy out of its column. Scoped to the band so the
 * measured 64u size still belongs to the fidelity layer. */
@media (width >= 48rem) and (width < 75rem) {
	.sc-credibility__icon,
	.sc-discovery__rail-icon {
		inline-size: 3rem;
	}
}

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

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

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

/* ---------------------------------------------------------------------------
 * Fluid layer, desktop band
 *
 * From 1024px there is room for the full row counts, but not yet for the
 * measured column widths, so the sections take their final shape here and are
 * only re-measured inside the fidelity layer.
 * ------------------------------------------------------------------------- */

@media (width >= 64rem) {
	.sc-hero__grid {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
		gap: var(--sc-space-3xl);
	}

	.sc-credibility__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

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

	.sc-industries__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr) max-content;
		align-items: start;
	}

	.sc-industries__controls {
		flex-direction: column;
		gap: var(--sc-space-sm);
		justify-content: flex-start;
		margin-block-start: var(--sc-space-3xl);
	}
}

/* ---------------------------------------------------------------------------
 * Fluid layer, small screens
 *
 * The vertical micro-copy rails are the first thing to go: at a phone width
 * they would either wrap into the copy or push the section sideways, and the
 * same words are already in the headings beside them.
 * ------------------------------------------------------------------------- */

@media (width < 48rem) {
	.sc-rail {
		display: none;
	}

	.sc-credibility__icon,
	.sc-discovery__rail-icon,
	.sc-industry-card__icon {
		inline-size: 2.5rem;
	}

	.sc-portfolio__action,
	.sc-industries__action {
		margin-block-start: var(--sc-space-sm);
	}

	.sc-discovery__panel {
		padding: var(--sc-space-sm);
	}

	.sc-discovery__fields {
		gap: var(--sc-space-sm);
	}
}

/* ---------------------------------------------------------------------------
 * Hero and header refinement
 *
 * The approved wide-screen composition is drawn by the reference layer further
 * up this file, which measures the mockup in units of its own width. That layer
 * only owns widths above 90rem. This layer covers what it does not reach: the
 * fluid band between the mobile panel and the wide-screen bar, and the phone
 * itself. Every rule here is scoped, so the reference layer keeps owning the
 * desktop composition untouched.
 * ------------------------------------------------------------------------- */

@keyframes sc-panel-in {
	from {
		opacity: 0;
		translate: 0 -0.35rem;
	}
}

/* --- Primary navigation: the panel rows ----------------------------------- */

/*
 * Below the reference width the navigation is always inside the disclosure
 * panel, so a row is a full-width target and an underline under it would draw a
 * rule across the whole panel. The rows get the brand colour on hover instead,
 * and the panel layer below draws the accent bar for the current page.
 */
@media (width < 90rem) {
	.sc-primary-nav__list a {
		transition: color var(--sc-transition-base);
	}

	.sc-primary-nav__list a:hover,
	.sc-primary-nav__list a:focus-visible {
		color: var(--sc-color-brand);
	}
}

/* --- Disclosure panel: card, rows, and the toggle morph ------------------- */

@media (width < 90rem) {
	/* The panel slides in from the bar it hangs from. An attribute selector on
	   `hidden` restarts the animation every time the disclosure opens. */
	.sc-site-header__nav:not([hidden]) {
		animation: sc-panel-in var(--sc-transition-base) both;
	}

	.sc-site-header__nav {
		border-end-start-radius: var(--sc-radius-lg);
		border-end-end-radius: var(--sc-radius-lg);
		box-shadow: var(--sc-shadow-lg);

		/* The rows carry a 12px hover bleed, and the panel gives it back, so
		   every label starts on the same gutter as the brand mark above it. */
		padding-inline: calc(var(--sc-container-gutter) - var(--sc-space-xs));
	}

	/* The consultation action lines up with the text column rather than the
	   panel edge, so its fill reads as part of the same grid. */
	.sc-site-header__nav .sc-site-header__cta {
		margin-inline-end: var(--sc-space-xs);
	}

	/* Rows are full width here, so an underline under one of them would draw a
	   rule across the whole panel. The accent bar and the row fill take over
	   that job. */
	.sc-site-header__nav .sc-primary-nav__list a::after {
		content: none;
	}

	.sc-primary-nav__list a {
		border-radius: 0;
		color: var(--sc-color-heading);
	}

	.sc-primary-nav__list > li + li {
		border-block-start: var(--sc-border-width) solid var(--sc-color-border-subtle);
	}

	.sc-primary-nav__list .current-menu-item > a,
	.sc-primary-nav__list .current_page_item > a,
	.sc-primary-nav__list a[aria-current] {
		box-shadow: inset 3px 0 0 0 var(--sc-color-brand);
		color: var(--sc-color-brand);
	}

	/*
	 * The toggle becomes a cross while the panel is open. Both strokes keep
	 * their own centre as the pivot and only travel to the middle of the
	 * control first — the upper one down by the 3px the base rules leave the
	 * icon below centre, the lower one up by the 6px that separates the two
	 * bars. One stroke turns 45°, the other -90°, which lands them exactly on
	 * top of each other and square to each other.
	 */
	.sc-nav-toggle__bars {
		translate: 0 -3px;
	}

	.sc-nav-toggle__bars,
	.sc-nav-toggle__bars::after {
		transition: transform var(--sc-transition-fast);
	}

	.sc-nav-toggle[aria-expanded="true"] .sc-nav-toggle__bars {
		transform: translateY(3px) rotate(45deg);
	}

	.sc-nav-toggle[aria-expanded="true"] .sc-nav-toggle__bars::after {
		transform: translateY(-6px) rotate(-90deg);
	}
}

/* --- Disclosure panel: the tablet action block ---------------------------- */

@media (width >= 48rem) and (width < 90rem) {
	/* Here the action band already carries the rule, so the language pair only
	   needs room of its own: it closes the panel as a quiet trailing line. */
	.sc-site-header__nav > .sc-site-header__languages {
		margin-block-start: var(--sc-space-md);
		margin-inline: var(--sc-space-xs);
	}
}

/* --- Hero: what the reference layer leaves to the narrow formats ---------- */

/*
 * The two-column hero starts at 64rem, which is exactly where the fluid rule
 * still holds the headline at its ceiling: half the measure and the full
 * headline size together pushed "ENABLING A CLEANER, MORE EFFICIENT TOMORROW"
 * to five lines on a laptop. Between here and the reference width the headline
 * scales with the viewport instead, so it grows out of the two-column break and
 * meets the measured desktop size with no step at 75rem.
 */
@media (width >= 64rem) and (width < 75rem) {
	.sc-hero__title {
		font-size: calc(100vw * 56 / 1672);
	}
}

@media (width < 75rem) {
	/*
	 * The brand pattern is a wide-screen device: cropped by the format it reads
	 * as a deliberate mark, but at phone and tablet widths it crops down to a
	 * few stray strokes behind the copy. Those widths get a soft field of the
	 * same brand blue instead — quieter, and it cannot collide with text.
	 */
	.sc-hero__pattern {
		display: none;
	}

	.sc-hero--editorial {
		background-image: linear-gradient(
			180deg,
			rgb(11 121 190 / 3%) 0%,
			rgb(11 121 190 / 0%) 40%
		);
	}

	/* The stacked wordmark belongs to the wide-screen composition; here it
	   would read as a stray run of uppercase text under the photograph. */
	.sc-hero__kicker {
		display: none;
	}

	/* The language pair carries the same weight and tracking the wide-screen
	   bar gives it, so the header keeps its balance below the reference
	   layer's breakpoint instead of falling back to unstyled text. */
	.sc-site-header__languages {
		display: flex;
		align-items: center;
		gap: 0.4em;
		margin: 0;
		font-size: var(--sc-font-size-xs);
		font-weight: var(--sc-font-weight-semibold);
		letter-spacing: 0.08em;
		color: var(--sc-color-heading);
	}

	.sc-site-header__language--muted {
		color: var(--sc-color-text-subtle);
	}

	.sc-site-header__language-divider {
		color: var(--sc-color-border-strong);
	}
}

/* --- Disclosure panel: the phone action block ---------------------------- */

@media (width < 48rem) {
	/*
	 * On the phone the panel is a grid and the action row dissolves into it
	 * (`display: contents`), which lets the three controls read as one
	 * deliberate block: search at the leading edge, the language pair at the
	 * trailing edge, and the consultation action across the full measure.
	 */
	.sc-site-header__nav {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--sc-space-sm);
	}

	.sc-site-header__nav .sc-site-header__actions {
		display: contents;
	}

	.sc-primary-nav {
		grid-column: 1 / -1;
		padding-block-end: var(--sc-space-sm);
		border-block-end: var(--sc-border-width) solid var(--sc-color-border);
	}

	.sc-site-header__nav .sc-site-header__languages {
		grid-row: 2;
		grid-column: 2;
		place-self: center end;
		margin-inline-end: var(--sc-space-xs);
	}

	.sc-site-header__nav .sc-site-header__cta {
		grid-row: 3;
		grid-column: 1 / -1;
		margin-inline: var(--sc-space-xs);
	}
}

@media (width < 48rem) {
	/*
	 * The phone hero sets in a single column, so every gap is paid for in
	 * scroll. The stack is tightened to an editorial rhythm rather than one
	 * uniform gap: the label sits close to the headline it qualifies, and the
	 * only generous space is the one that separates the copy from the actions.
	 */
	.sc-hero--editorial {
		padding-block: var(--sc-space-lg) var(--sc-space-md);
	}

	.sc-hero__grid {
		gap: var(--sc-space-lg);
	}

	.sc-hero__copy {
		row-gap: 0;
	}

	/*
	 * Sized so the approved break survives the narrower format: the first line
	 * still sets on one line, and the second breaks after "EFFICIENT" rather
	 * than inside a word. `balance` stays on as the fallback for the narrowest
	 * phones, where it splits the first line between its two phrases.
	 */
	.sc-hero__title {
		margin-block-start: var(--sc-space-xs);
		font-size: clamp(1.5rem, 7.5vw, 1.875rem);
		letter-spacing: -0.025em;
		line-height: 1.12;
	}

	/* The three phrases still hold one line once the size and the tracking come
	   in a step, and the dash shortens with them. Wrapping here would strand
	   "MATERIALS" on a line of its own, which reads as a mistake. */
	.sc-eyebrow {
		font-size: 0.6875rem;
		letter-spacing: 0.06em;
		line-height: 1.5;
	}

	.sc-eyebrow::before {
		inline-size: 1.5em;
	}

	.sc-hero__lead {
		margin-block-start: var(--sc-space-sm);
		font-size: 1rem;
		line-height: 1.55;
		text-wrap: pretty;
	}

	.sc-hero__actions {
		margin-block-start: 1.25rem;
		flex-direction: column;
		align-items: stretch;
		gap: var(--sc-space-xs);
	}

	/* Full width, but a control rather than a slab: the height is pinned to the
	   lower end of the comfortable target and the side padding comes in a step,
	   so the pair reads lighter without losing the touch area. */
	.sc-hero__actions .sc-button {
		inline-size: 100%;
		min-block-size: 3.125rem;
		padding-block: 0.6875rem;
		padding-inline: 1.25rem;
	}

	/* The rule sits above the tagline instead of beside it: at this width the
	   sentence needs the full measure, and the dash reads as a divider. As
	   micro-copy it stays well under the headline in weight and size. */
	.sc-hero__micro {
		margin-block-start: var(--sc-space-sm);
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sc-space-2xs);
		font-size: 0.6875rem;
		font-weight: var(--sc-font-weight-medium);
		line-height: 1.5;
		letter-spacing: 0.06em;
		text-wrap: pretty;
	}

	.sc-hero__micro .sc-rule {
		inline-size: 2.5rem;
	}

	/* --- Value strip: one rail, scrolled sideways ------------------------- */

	.sc-credibility--editorial {
		padding-block: var(--sc-space-lg);
		background-color: var(--sc-color-surface-pale);
	}

	/*
	 * All four proofs stay on one line. The rail bleeds to the viewport edges
	 * and gives the bleed back as padding, so the first card still starts on
	 * the page gutter while the strip itself reads edge to edge. The next card
	 * peeks in, which is what tells a thumb there is more to scroll.
	 */
	.sc-credibility__list {
		grid-auto-flow: column;
		grid-auto-columns: min(72vw, 13.75rem);
		gap: var(--sc-space-2xs);
		margin-inline: calc(-1 * var(--sc-container-gutter));
		padding-inline: var(--sc-container-gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scroll-padding-inline: var(--sc-container-gutter);
		scrollbar-width: none;
	}

	.sc-credibility__list::-webkit-scrollbar {
		display: none;
	}

	/* A divider, not a tile: one hairline, one small radius, no shadow. */
	.sc-credibility__item {
		scroll-snap-align: start;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sc-space-2xs);
		padding: var(--sc-space-sm) var(--sc-space-xs);
		border: var(--sc-border-width) solid var(--sc-color-border-subtle);
		border-radius: var(--sc-radius-sm);
		background-color: var(--sc-color-surface);
	}

	.sc-credibility__icon {
		inline-size: 1.875rem;
	}

	.sc-credibility__label {
		font-size: 0.8125rem;
	}

	.sc-credibility__detail {
		font-size: 0.75rem;
		line-height: var(--sc-line-height-snug);
	}
}

/* --- Header: the phone bar ------------------------------------------------ */

@media (width < 48rem) {
	/*
	 * The bar is one step taller than a phone needs. Dropping a token keeps the
	 * lockup and the disclosure button on the same optical line, and the
	 * control itself is lightened: narrower bars, a hairline that does not
	 * shout, and a corner that matches the cards below it.
	 */
	.sc-site-header {
		--sc-header-height: 4.5rem;
	}

	.sc-nav-toggle {
		border-color: var(--sc-color-border-subtle);
		border-radius: 0.375rem;
	}

	.sc-nav-toggle__bars,
	.sc-nav-toggle__bars::after {
		inline-size: 1.125rem;
		block-size: 1.5px;
	}

	.sc-nav-toggle__bars::after {
		margin-block-start: 5px;
	}

	.sc-nav-toggle__bars {
		translate: 0 -2.35px;
	}

	.sc-nav-toggle[aria-expanded="true"] .sc-nav-toggle__bars {
		transform: translateY(2.5px) rotate(45deg);
	}

	.sc-nav-toggle[aria-expanded="true"] .sc-nav-toggle__bars::after {
		transform: translateY(-5px) rotate(-90deg);
	}
}

/* --- Hero actions: hover ------------------------------------------------- */
.sc-hero__actions .sc-button {
	transition:
		background-color var(--sc-transition-fast),
		border-color var(--sc-transition-fast),
		color var(--sc-transition-fast),
		box-shadow var(--sc-transition-base),
		translate var(--sc-transition-base);
}

/*
 * One step up and one soft shadow: enough to answer the pointer, quiet enough
 * to sit under a corporate hero. The colour change and the arrow slide the base
 * rules already carry do the rest.
 */
.sc-hero__actions .sc-button:hover,
.sc-hero__actions .sc-button:focus-visible {
	translate: 0 -1px;
	box-shadow: var(--sc-shadow-md);
}

/*
 * The reference layer pins the secondary action's idle colours to the measured
 * frame, so the hover step is drawn here instead: the fill deepens one notch
 * and the border and label take the brand blue. Only the hover is affected —
 * the idle state that the fidelity measurements compare stays untouched.
 */
@media (width >= 75rem) {
	.sc-hero--editorial .sc-hero__actions .sc-button--secondary:hover,
	.sc-hero--editorial .sc-hero__actions .sc-button--secondary:focus-visible {
		border-color: var(--sc-color-brand);
		background-color: #e6eefd;
		color: var(--sc-color-brand-strong);
	}
}

/* ---------------------------------------------------------------------------
 * Motion
 *
 * The motion layer — entrance, stagger, counters, line draw and the pointer
 * micro-interactions — lives in `assets/css/motion.css`, so that the whole of
 * it can be read, tuned or switched off from one file. What stays here is the
 * component-level transition that belongs to the component: the hero's action
 * pair lifting on hover.
 * ------------------------------------------------------------------------- */

/* ===========================================================================
 * Hero — Persian (RTL) corrections
 *
 * The reference layer above measures one approved LTR frame and scales its
 * values with `--sc-u`. Three of those values are properties of *Latin* type and
 * of a *left-to-right* composition, and applying them unchanged to the Persian
 * hero produces four measurable defects. Each is corrected here, for the Persian
 * font group only, so the English and Russian heroes are untouched.
 *
 *   1. Tracking on a cursive script. Montserrat needs letter-spacing to reach
 *      the reference's rhythm — 0.29em on the eyebrow is 3.9px at 1672px. The
 *      Arabic script is joined: letter-spacing does not open the word, it
 *      *breaks* it into disconnected letterforms. Measured on the eyebrow, 3.9px
 *      x 28 characters is 109px of the line's 208px ink — over half the label was
 *      spacing, and every word in it was severed. The tracking is removed and the
 *      label's airiness is rebuilt from word-spacing, which separates words
 *      without touching the letters inside them.
 *
 *   2. Display scale. Vazirmatn's advance widths for this headline are much
 *      narrower than Montserrat's, and Persian has no capitals to fill a line.
 *      At the reference size the two lines covered 55% and 24% of the copy
 *      measure against English's 74% and 91%: the headline read as a small,
 *      cramped block pinned to the right of a mostly empty column. A larger
 *      display size for the Persian group restores the fill and the balance.
 *
 *   3. A left-to-right optical nudge. The first display line is shifted half a
 *      unit towards the trailing edge to land its stems on the reference's
 *      columns. In RTL the trailing edge is the other side, so the nudge has to
 *      be mirrored or it pulls the line back into the column.
 *
 *   4. The photograph. The hero band is a pre-composed crop whose leading third
 *      is a pale haze; that haze is what lets dark copy sit over the picture.
 *      The band is anchored with `inset-inline-end`, so in RTL it moves to the
 *      other side of the viewport while the haze inside it stays where it was
 *      drawn — and the Persian copy lands on the photograph's darkest quarter
 *      (mean luma 155-178 against the haze's 249). Mirroring the band in RTL is
 *      what puts the haze back under the words.
 * =========================================================================== */

[data-sc-font-group="persian"] {
	/* One value drives the display size and the lead's leading, so the tier
	   cannot drift out of step with itself. */
	--sc-hero-fa-display: calc(86 * var(--sc-u));
	--sc-hero-fa-leading: calc(108 * var(--sc-u));
}

[data-sc-font-group="persian"] .sc-hero__title {
	/* The scale is solved from the measured fill rather than chosen: at 74 units
	   the Persian headline covered 54% of the copy measure against the approved
	   English 74%, and at 86 it fills the block to the same visual weight. */
	font-size: var(--sc-hero-fa-display);
	line-height: var(--sc-hero-fa-leading);
	letter-spacing: 0;
}

[data-sc-font-group="persian"] .sc-hero--editorial .sc-eyebrow {
	letter-spacing: 0;
	word-spacing: calc(9 * var(--sc-u));
	font-weight: 400;
	font-size: calc(15 * var(--sc-u));
	line-height: calc(30 * var(--sc-u));
}

[data-sc-font-group="persian"] .sc-hero--editorial .sc-hero__line--accent {
	/* The Latin accent line is set smaller to fit a long phrase into the
	   measure. The Persian accent line is short, so the reduction only made it
	   look weak; it keeps the display size and gains a small optical inset. */
	padding-inline-start: 0;
	font-size: var(--sc-hero-fa-display);
	letter-spacing: 0;
	word-spacing: 0;
}

/* The trailing-edge nudge, mirrored. */
[dir="rtl"] .sc-hero--editorial .sc-hero__title .sc-hero__line:first-child {
	translate: calc(-0.5 * var(--sc-u)) calc(1 * var(--sc-u));
	word-spacing: 0;
}

[data-sc-font-group="persian"] .sc-hero__lead {
	margin-block-start: calc(30 * var(--sc-u));
	line-height: calc(38 * var(--sc-u));
	font-size: calc(21.5 * var(--sc-u));
	max-block-size: calc(152 * var(--sc-u));
}

[data-sc-font-group="persian"] .sc-hero--editorial .sc-hero__micro {
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	font-size: calc(14 * var(--sc-u));
	word-spacing: calc(2 * var(--sc-u));
}

/*
 * The photograph, mirrored so its haze sits under the copy.
 *
 * The band is a pre-composed crop whose leading third is a pale haze and whose
 * remaining two thirds are the plant. It is anchored with `inset-inline-end`,
 * so in a right-to-left document it lands on the other side of the viewport
 * while the haze stays where it was drawn — which would put the Persian copy on
 * the darkest quarter of the picture. Mirroring the band is what restores the
 * relationship the English composition has: haze meeting the copy, plant
 * bleeding off the outer edge of the viewport. It is a crop direction, not a
 * decoration, and the picture carries no lettering that a flip would expose.
 */
[dir="rtl"] .sc-hero--editorial .sc-hero__media .sc-media__image {
	scale: -1 1;
}

/*
 * The stacked decorative wordmark is an English-language device, and it is
 * removed outside English.
 *
 * The block is three short uppercase lines — ADVANCED / MATERIALS / REAL IMPACT
 * — chosen because they stack to a square, sit inside the plant end of the
 * photograph and read as a bookend to the copy opposite. That is a typographic
 * composition, not a sentence, and it does not survive translation:
 *
 *   Persian   mirrored, the same `inset-inline-start` lands the block in the far
 *             corner of the band — over the darkest, busiest part of a flipped
 *             picture, in the page's ink colour, with its short red rule under
 *             it. Nothing is gained: the words are already the hero's tagline.
 *
 *   Russian   the same three words become ПЕРЕДОВЫЕ / МАТЕРИАЛЫ / РЕАЛЬНЫЙ
 *             ЭФФЕКТ, where «РЕАЛЬНЫЙ ЭФФЕКТ» is a phrase English uses as a
 *             slogan and Russian does not. At the display tracking it needs, the
 *             stack measures 187px against the English 142px and crowds the
 *             band's trailing edge.
 *
 * The device belongs to the one language it was drawn for. In English the hero
 * is untouched; in the other two the photograph is simply the photograph.
 */
[dir="rtl"] .sc-hero--editorial .sc-hero__kicker,
:lang(ru) .sc-hero--editorial .sc-hero__kicker {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Russian lead
 *
 * The lead is capped at three lines because the approved English copy sets on
 * three. The Russian translation of the same sentence needs four, and the
 * fourth was being cut off mid-sentence by `overflow: hidden` — translated text
 * silently lost. The cap is a line *count*, so it is raised for the scripts
 * whose translation is longer rather than the copy being shortened.
 * ------------------------------------------------------------------------- */

:lang(ru) .sc-hero__lead {
	max-block-size: calc(130 * var(--sc-u));
}

@media (width < 75rem) {
	:lang(ru) .sc-hero__lead,
	[data-sc-font-group="persian"] .sc-hero__lead {
		max-block-size: none;
	}
}

/* Below the fidelity tier the hero is a normal flow layout, so the Persian
   values come back to the fluid scale the other languages use there. */
@media (width < 75rem) {
	[data-sc-font-group="persian"] {
		--sc-hero-fa-display: clamp(1.75rem, 6.6vw, 2.25rem);
		--sc-hero-fa-leading: 1.28;
	}

	[data-sc-font-group="persian"] .sc-hero__title,
	[data-sc-font-group="persian"] .sc-hero--editorial .sc-hero__line--accent {
		font-size: var(--sc-hero-fa-display);
		letter-spacing: 0;
	}

	[data-sc-font-group="persian"] .sc-hero--editorial .sc-eyebrow {
		font-size: var(--sc-font-size-sm);
		line-height: 1.6;
		word-spacing: 0.15em;
	}

	[data-sc-font-group="persian"] .sc-hero__title {
		line-height: var(--sc-hero-fa-leading);
	}

	[data-sc-font-group="persian"] .sc-hero__lead {
		font-size: var(--sc-font-size-lg);
		line-height: var(--sc-line-height-normal);
		margin-block-start: var(--sc-space-sm);
	}

	[data-sc-font-group="persian"] .sc-hero--editorial .sc-hero__micro {
		font-size: 0.75rem;
		line-height: 1.6;
	}
}