/*!
 * Sarv Catalyst — Homepage: Solution discovery, Industries, the product
 * portfolio and the lifecycle services
 *
 * The bands immediately below the credibility strip: the visitor's two ways in
 * — search the catalogue, or recognise your own sector — the three material
 * families the catalogue is built on, and the service journey that runs past
 * them.
 *
 * Loaded only on the front page, after the shared component layer, so an older
 * finder/industry block is superseded without being edited or deleted.
 *
 * Rules:
 *   - Semantic tokens only. Anything in reference pixels lives in the fidelity
 *     layer at the bottom, keyed to `--sc-u` like the other editorial bands.
 *   - Logical properties only, so Persian RTL flips without a second sheet.
 *   - No component may remove the global focus outline.
 */

/* ===========================================================================
 * These bands' own palette
 *
 * The first two were approved against their own reference, whose azure is
 * brighter and whose ink is darker than the theme's shared blue and heading
 * colour. Declaring them here keeps the rest of the theme on the shared tokens
 * while those bands stay faithful to the approved artwork.
 *
 * The product portfolio below them shares the palette so that the page reads as
 * one document: it takes the ink for its headings, and the deep end of the same
 * azure for its family labels, because the bright tint above does not clear
 * 4.5:1 as small text on a pale band.
 * ======================================================================== */

.sc-solutions,
.sc-industries,
.sc-portfolio {
	--sc-si-azure: #0a8dc5;

	/* Filled buttons carry white type, so they use the deeper end of the same
	   azure: the bright tint above does not reach 4.5:1 against white. */
	--sc-si-azure-deep: #0a7bae;
	--sc-si-azure-strong: #086490;
	--sc-si-ink: #0a0f14;
	--sc-si-surface: #fcfdff;
	--sc-si-surface-alt: #f8fbfe;
	--sc-si-panel: #eff6fd;
	--sc-si-rule: #0085bf;
	--sc-si-field-border: #d3dde7;
}

/* ===========================================================================
 * Solution discovery
 *
 * Two answers to "where do I start?", side by side. The leading column keeps
 * the question and the tools that answer it — a real catalogue search, then the
 * three families the catalogue is divided into. The trailing column is the
 * band's one supporting photograph, carrying its own invitation and its own
 * three-item value rail.
 * ======================================================================== */

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

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

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

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

.sc-solutions__main {
	display: grid;
	gap: var(--sc-space-xl);
	align-content: start;
	min-inline-size: 0;
}

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

.sc-solutions__lead {
	max-inline-size: 34rem;
}

/* --- Catalogue search ----------------------------------------------------- */

/*
 * A real GET form against WordPress's own `s` query, scoped to the product post
 * type. Field and action read as one control, so the input's own border is
 * suppressed: the wrapper draws the outline that the icon, the text and the
 * button share. A narrow format stacks the action under the field, which keeps
 * the input's full measure and leaves the button a full-width target.
 */
.sc-product-search {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--sc-space-3xs);
	min-inline-size: 0;
}

.sc-product-search__field {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: var(--sc-space-2xs);
	min-inline-size: 0;
	padding-inline: var(--sc-space-md);
	border: var(--sc-border-width) solid var(--sc-si-field-border);
	border-radius: var(--sc-radius-sm);
	background-color: var(--sc-color-surface);
}

.sc-product-search__field:focus-within {
	border-color: var(--sc-si-azure);
}

.sc-product-search__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--sc-si-azure);
}

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

.sc-product-search__input {
	flex: 1 1 auto;
	align-self: stretch;
	min-inline-size: 0;
	min-block-size: var(--sc-touch-target);
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--sc-color-text);

	/* The wrapper above is the visible control, so the ring is pulled inside it
	   rather than drawn around the bare input. */
	outline-offset: -2px;
}

.sc-product-search__input::placeholder {
	color: var(--sc-color-text-muted);
}

.sc-product-search__submit {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: var(--sc-space-2xs);
	min-block-size: var(--sc-touch-target);
	padding-inline: var(--sc-space-lg);
	border: var(--sc-border-width) solid var(--sc-si-azure-deep);
	border-radius: var(--sc-radius-sm);
	background-color: var(--sc-si-azure-deep);
	color: var(--sc-color-text-on-accent);
	font-size: var(--sc-font-size-sm);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: var(--sc-letter-spacing-wide);
	white-space: nowrap;
}

.sc-product-search__submit:hover {
	border-color: var(--sc-si-azure-strong);
	background-color: var(--sc-si-azure-strong);
}

.sc-product-search__arrow,
.sc-family-card__arrow,
.sc-guidance__button-arrow,
.sc-industry-card__arrow {
	transition: transform var(--sc-transition-base);
}

.sc-product-search__submit:hover .sc-product-search__arrow,
.sc-family-card__link:hover .sc-family-card__arrow,
.sc-guidance__button:hover .sc-guidance__button-arrow {
	transform: translateX(0.25rem);
}

[dir="rtl"] .sc-product-search__submit:hover .sc-product-search__arrow,
[dir="rtl"] .sc-family-card__link:hover .sc-family-card__arrow,
[dir="rtl"] .sc-guidance__button:hover .sc-guidance__button-arrow {
	transform: translateX(-0.25rem);
}

/* --- Product families ----------------------------------------------------- */

/*
 * Three families, one card each. A card is a row of type with its product
 * beside it, so on a phone the cards stack — a third of a narrow measure leaves
 * the words nowhere to go. From the first wide format they share one row.
 */
.sc-families {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sc-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-family-card__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	gap: var(--sc-space-xs) var(--sc-space-md);
	block-size: 100%;
	padding: var(--sc-space-md);
	border: var(--sc-border-width) solid var(--sc-color-border-subtle);
	border-radius: var(--sc-radius-md);
	background-color: var(--sc-color-surface);
	color: inherit;
	text-decoration: none;
}

.sc-family-card__link:hover {
	border-color: var(--sc-si-azure);
}

.sc-family-card__body {
	display: grid;
	grid-column: 1;
	grid-row: 1 / span 2;
	gap: var(--sc-space-3xs);
	align-content: center;
	min-inline-size: 0;
}

.sc-family-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-si-ink);
}

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

.sc-family-card__media {
	border-radius: var(--sc-radius-media-sm);
	display: block;
	grid-column: 2;
	grid-row: 1;
	inline-size: 4rem;
	block-size: 2.75rem;
	overflow: hidden;
}

/* The product is shown whole rather than cropped to a square: the reference
   sets it as a cut-out beside the words, not as a picture. */
.sc-family-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.sc-family-card__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	grid-column: 2;
	grid-row: 2;
	place-self: end;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border: var(--sc-border-width) solid var(--sc-si-azure);
	border-radius: 50%;
	color: var(--sc-si-azure);
	font-size: var(--sc-font-size-base);
}

/* --- Technical guidance --------------------------------------------------- */

/*
 * The panel is the band's second entry point, for the visitor who cannot name
 * what they need. The reference gives it a tinted surface rather than white
 * type on a photograph: the picture takes the trailing column, the words keep
 * the light one. The value rail below it sits on the band itself, so the tint
 * belongs to the panel rather than to the whole column.
 */
.sc-guidance {
	--sc-guidance-surface: var(--sc-si-panel);

	min-inline-size: 0;
}

.sc-guidance__panel {
	display: grid;
	overflow: hidden;
	border-radius: var(--sc-radius-md);
	background-color: var(--sc-guidance-surface);
	color: var(--sc-color-heading);
}

/*
 * Stacked formats keep the reading order the panel has on the desk — the words
 * lead and the photograph follows — rather than the order the markup needs for
 * the two-column layout.
 */
.sc-guidance__media {
	grid-row: 2;
	margin: 0;
	aspect-ratio: 16 / 9;
}

.sc-guidance__body {
	grid-row: 1;
	display: grid;
	gap: var(--sc-space-sm);
	align-content: start;
	padding: var(--sc-space-lg);
}

.sc-guidance__eyebrow {
	display: grid;
	justify-items: start;
	max-inline-size: 9.5rem;
	color: var(--sc-si-ink);
}

/* The reference opens the invitation with a short rule above the words. */
.sc-guidance__eyebrow::before {
	content: "";
	inline-size: 2rem;
	block-size: 0;
	margin-block-end: var(--sc-space-xs);
	border-block-start: var(--sc-border-width-strong) dashed var(--sc-si-rule);
	background-color: transparent;
}

.sc-guidance__title {
	margin: 0;
	font-size: var(--sc-font-size-2xl);
	color: var(--sc-si-ink);
	font-weight: var(--sc-font-weight-bold);
	line-height: var(--sc-line-height-tight);
	letter-spacing: var(--sc-letter-spacing-tight);
}

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

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

.sc-guidance__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sc-space-2xs);
	min-block-size: var(--sc-touch-target);
	padding-inline: var(--sc-space-lg);
	border: var(--sc-border-width) solid var(--sc-si-azure-deep);
	border-radius: var(--sc-radius-sm);
	background-color: var(--sc-si-azure-deep);
	color: var(--sc-color-text-on-accent);
	font-size: var(--sc-font-size-sm);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: var(--sc-letter-spacing-wide);
	text-decoration: none;
}

.sc-guidance__button:hover {
	border-color: var(--sc-si-azure-strong);
	background-color: var(--sc-si-azure-strong);
	color: var(--sc-color-text-on-accent);
}

/* The value rail sits on the band, under the panel. */
.sc-guidance__values {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sc-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-guidance__value {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--sc-space-2xs);
}

.sc-guidance__value-icon {
	display: flex;
	color: var(--sc-si-azure);
}

.sc-guidance__value-icon svg {
	display: block;
	inline-size: 1.5rem;
	block-size: auto;
}

.sc-guidance__value-label {
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-medium);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-text-muted);
}

/* ===========================================================================
 * Industries
 *
 * Four sectors, one row, each led by its own photograph. The card's meaning is
 * set on a restrained scrim over the image, so nothing is repeated in a body
 * panel underneath — which is what keeps four cards readable in one row.
 * ======================================================================== */

.sc-industries {
	--sc-industry-scrim: rgb(9 39 61 / 94%);
	--sc-gm-inset: var(--sc-container-gutter);

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

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

.sc-industries__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sc-space-xl);
}

.sc-industries__header {
	display: grid;
	gap: var(--sc-space-md);
}

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

.sc-industries__lead {
	max-inline-size: 32rem;
}

.sc-industries__action {
	margin: 0;
}

/*
 * Four sectors share one row from 1280px, so the row is a plain grid that
 * widens in steps rather than a scroll container: a card that stacks on a phone
 * cannot be clipped, and a fifth industry added in the admin wraps onto a second
 * row instead of disappearing past the edge.
 *
 * The superseded block in the shared layer still makes this element a snap
 * scroller, and it declares that through `grid-auto-flow` and
 * `grid-auto-columns` rather than through the template, so all three are
 * restated here instead of being silently inherited.
 */
.sc-industries__viewport {
	min-inline-size: 0;
}

.sc-industries__rail {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-flow: row;
	grid-auto-columns: auto;
	gap: var(--sc-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: visible;
	scroll-snap-type: none;
}

/*
 * Two circle arrows under the row, right-aligned to the container, as the
 * reference places them. The row does not scroll at any width, so the pair is a
 * static affordance rather than a live control: it keeps its full strength and
 * reports itself through `aria-disabled` instead of fading into a
 * disabled-looking grey.
 */
.sc-industries__controls {
	display: none;
	flex-direction: row;
	gap: var(--sc-space-md);
	justify-content: flex-end;
	margin: 0;
}

.sc-industries__control {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: var(--sc-border-width) solid var(--sc-si-field-border);
	border-radius: 50%;
	background-color: var(--sc-color-surface);
	color: var(--sc-si-azure);
	font-size: var(--sc-font-size-lg);
	line-height: 1;
	cursor: pointer;
}

.sc-industries__control:hover {
	border-color: var(--sc-si-azure);
}

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

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

/*
 * The card takes its own proportion from the reference row — four cards of
 * 361 × 216u, which is 5:3 — and holds it at every width below the desk
 * fidelity layer. The delivered photography is 1448 × 1086, so a 5:3 frame
 * trims the top and bottom of the picture and nothing else. That is the
 * whole point of stating the ratio rather than a height: a height in `rem`
 * cannot follow the card's width, and at the two-column width it made a
 * near-square frame that cropped more than two fifths of each photograph away.
 * The floor only engages on a very narrow screen, where it keeps the scrim's
 * four lines from crowding the frame.
 */
.sc-industry-card__link {
	position: relative;
	isolation: isolate;
	display: grid;
	block-size: 100%;
	aspect-ratio: 5 / 3;
	min-block-size: 12rem;
	border-radius: var(--sc-radius-md);
	background-color: var(--sc-color-brand-strong);
	color: var(--sc-color-text-on-accent);
	text-decoration: none;
	overflow: hidden;
}

/* The card clips its overflow, so the focus ring is drawn just inside it
   instead of being cut off at the edge. */
.sc-industry-card__link:focus-visible {
	outline-offset: -3px;
}

.sc-industry-card__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	block-size: auto;
	aspect-ratio: auto;
	overflow: hidden;
}

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

.sc-industry-card__link:hover .sc-industry-card__media img,
.sc-industry-card__link:focus-visible .sc-industry-card__media img {
	scale: 1.03;
}

/*
 * One bottom-weighted scrim. It holds white type over four different
 * photographs without flattening any of them, so it is a gradient rather than a
 * panel, and it never covers the top of the image: the icon sits on the image
 * itself, in the row above the scrim.
 */
.sc-industry-card__overlay {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--sc-space-lg);
	padding: var(--sc-space-md);
	background-image: linear-gradient(
		to top,
		var(--sc-industry-scrim) 0%,
		rgb(9 39 61 / 55%) 45%,
		rgb(9 39 61 / 0%) 80%
	);
}

/* One column of the overlay, stretched to the card's full height so the icon
   can hold the image's top edge while the words stay in the scrim below it. */
.sc-industry-card__content {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto auto;
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: stretch;
	gap: var(--sc-space-2xs);
}

.sc-industry-card__icon {
	display: flex;
	grid-row: 1;
	align-self: start;
	color: var(--sc-color-text-on-accent);
}

.sc-industry-card__icon svg {
	display: block;
	inline-size: 1.75rem;
	block-size: auto;
}

.sc-industry-card__title {
	grid-row: 3;
	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-text-on-accent);
}

.sc-industry-card__description {
	grid-row: 4;
	font-size: var(--sc-font-size-sm);
	line-height: var(--sc-line-height-snug);
	color: rgb(255 255 255 / 82%);
}

/* The action sits under the copy in the scrim, on the trailing edge. */
.sc-industry-card__arrow {
	display: inline-flex;
	grid-column: 2;
	grid-row: 2;
	place-self: end;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border: var(--sc-border-width) solid rgb(255 255 255 / 45%);
	border-radius: 50%;
	color: var(--sc-color-text-on-accent);
	transition:
		transform var(--sc-transition-base),
		background-color var(--sc-transition-base);
}

.sc-industry-card__link:hover .sc-industry-card__arrow {
	background-color: rgb(255 255 255 / 16%);
	transform: translateX(0.25rem);
}

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

/* ===========================================================================
 * Product portfolio
 *
 * The catalogue's three material families as a catalogue: a short intro column
 * and three framed cards, each one photograph of the material itself over a
 * family label, a title and a line of copy.
 *
 * This band is composed against the one above it rather than on its own. The
 * industries row is dark and scenic, its photograph is the card and its words
 * sit on a scrim over it; here the card is a white panel on a pale band, the
 * photograph is a framed sample rather than a scene, and the words sit on paper
 * below it. Two bands of three cards in a row would read as one idea repeated
 * if they shared a treatment, which is exactly what this shape avoids.
 *
 * The frame is what makes the row legible as a catalogue: a hairline border and
 * one step of shadow at rest, a second step and a small lift on hover. Both are
 * properties that do not affect layout, so nothing below the row moves.
 * ======================================================================== */

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

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

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

.sc-portfolio__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sc-space-xl);
}

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

/*
 * The intro holds a reading measure of its own rather than the column's, so a
 * one-column phone does not stretch the heading to the full width of the
 * screen and the tablet stack keeps the shape the desk layout has.
 */
.sc-portfolio__intro .sc-section__title,
.sc-portfolio__intro .sc-section__lead {
	max-inline-size: 34rem;
}

.sc-portfolio .sc-section__title {
	color: var(--sc-si-ink);
}

.sc-portfolio__action {
	margin: 0;
}

/*
 * `grid-auto-rows: 1fr` makes every row the height of the tallest card, so the
 * three frames are the same height whether they sit in one row or stack, and
 * each card's action stays on its bottom edge. That costs a little white space
 * under the shortest copy, which is the right trade for a catalogue grid: a
 * stacked row of three frames whose bottom edges disagree reads as a mistake,
 * and no copy has to be clipped to avoid it.
 */
.sc-portfolio__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: 1fr;
	gap: var(--sc-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The item is a flex box so that the card inside it fills the row's height
   whatever the copy in the neighbouring cards happens to be. */
.sc-product-card {
	display: flex;
}

/*
 * Most of what follows restates a rule the shared layer already carries for
 * this component, because that layer describes the composition this band
 * replaces: a fixed 190u image height, a 4:3 box that ignores it, and a gap
 * between the two card rows. The restatements below are the difference, and
 * they are stated here rather than edited there so the shared layer keeps
 * describing every other card in the theme.
 */

.sc-product-card__link {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	inline-size: 100%;

	/* No gap between the image and the body: the photograph sits in the card's
	   frame and the body's own padding holds the copy off it. */
	gap: 0;
	border: var(--sc-border-width) solid var(--sc-si-field-border);
	border-radius: var(--sc-radius-md);
	background-color: var(--sc-color-surface-raised);
	box-shadow: var(--sc-shadow-sm);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition:
		box-shadow var(--sc-transition-base),
		translate var(--sc-transition-base),
		border-color var(--sc-transition-base);
}

.sc-product-card__link:hover,
.sc-product-card__link:focus-visible {
	border-color: var(--sc-si-rule);
	box-shadow: var(--sc-shadow-md);
	translate: 0 -0.125rem;
}

/* The card clips its own overflow, so the focus ring is drawn just inside it
   rather than being cut off at the frame. */
.sc-product-card__link:focus-visible {
	outline-offset: -3px;
}

/*
 * The delivered product photography is a macro of the material, so the frame
 * takes the catalogue's own card proportion — the registered `sc-card` crop,
 * 4:3 — and the photograph fills it. The whole family is one subject at one
 * scale, so a centred crop costs nothing that a wider frame would have shown.
 */
.sc-product-card__media {
	display: block;

	/* The frame takes the ratio and the photograph fills it, so the media must
	   not carry a height of its own — a fixed height plus a ratio resolves the
	   width from the height, and the image then stops short of the card. */
	aspect-ratio: 4 / 3;
	block-size: auto;
	border-radius: 0;
	overflow: hidden;
	background-color: var(--sc-color-surface-pale);
}

.sc-product-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;

	/* The shared layer scales this image with `transform`; the scale property
	   is used here instead so the two cannot multiply into a visible jolt. */
	transform: none;
	transition: scale var(--sc-transition-slow);
}

.sc-product-card__link:hover .sc-product-card__media img,
.sc-product-card__link:focus-visible .sc-product-card__media img {
	scale: 1.04;
	transform: none;
}

/*
 * The body hangs the action off its own bottom edge, so the three frames are
 * the same height and the three "Learn more" rows sit on one line across the
 * row even though the families are named to three different lengths.
 */
.sc-product-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sc-space-2xs);
	padding: var(--sc-space-md);
}

.sc-product-card__family {
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-semibold);
	line-height: var(--sc-line-height-snug);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sc-si-azure-strong);
}

.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-si-ink);
}

.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: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sc-space-sm);
	margin-block-start: auto;
	padding-block-start: var(--sc-space-md);
	font-size: var(--sc-font-size-sm);
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-si-azure-strong);
}

/* The same circular affordance the industries row uses, in the page's ink
   rather than white: it reads as the card's own action, and the whole card is
   still one link, so it never becomes a second tab stop. */
.sc-product-card__arrow {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	border: var(--sc-border-width) solid var(--sc-si-field-border);
	border-radius: 50%;
	color: var(--sc-si-azure-strong);
	transition:
		transform var(--sc-transition-base),
		border-color var(--sc-transition-base),
		background-color var(--sc-transition-base);
}

.sc-product-card__link:hover .sc-product-card__arrow,
.sc-product-card__link:focus-visible .sc-product-card__arrow {
	border-color: var(--sc-si-rule);
	background-color: var(--sc-si-panel);
	transform: translateX(0.25rem);
}

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

/* ===========================================================================
 * The accent phrase
 *
 * Sections that set part of a heading in the brand colour wrap the phrase in
 * this element rather than splitting the heading in two.
 * ======================================================================== */

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

/* These two bands were approved against their own azure. */
.sc-solutions .sc-section__title-accent,
.sc-industries .sc-section__title-accent {
	color: var(--sc-si-azure);
}

.sc-solutions .sc-section__title,
.sc-industries .sc-section__title,
.sc-guidance__title {
	color: var(--sc-si-ink);
}

/* ===========================================================================
 * Lifecycle services
 *
 * The page's one process band, and the only band whose subject is a sequence
 * rather than a catalogue. The desk layout is two zones — an editorial column
 * beside a single industrial photograph, and one white rail of five connected
 * stages that crosses the bottom edge of that photograph — and a phone gets the
 * same five stages as a vertical timeline on a brand-blue line.
 *
 * The rail is one surface rather than five cards: a hairline divides each stage
 * from the next, a chevron sits on each cut, and only the rail's own outer
 * corners are rounded. Under the desk layout those divisions run horizontally
 * instead and the panel is dropped, so the timeline reads as a line rather than
 * as a stack of boxes.
 * ======================================================================== */

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

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

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

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

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

/* The intro keeps a reading measure of its own, so a one-column phone does not
   stretch the heading across the whole screen. */
.sc-lifecycle__intro .sc-section__title,
.sc-lifecycle__intro .sc-section__lead {
	max-inline-size: 32rem;
}

.sc-lifecycle__action {
	margin: 0;
}

/*
 * The sections' actions are the theme's outlined secondary button given a white
 * face and the brand blue boundary. On a white band the shared transparent face
 * left the button reading as an empty frame, and its light neutral border was
 * the only thing visible; a white face, a brand border and the deep brand label
 * make it unmistakably a button, and the fill is what keeps the label off the
 * band's own background. The component's geometry — height, padding, radius,
 * type size and its transition — is untouched, and all three states are stated
 * so no shared-layer state can put the label back on the band's colour. The
 * label and the arrow are stated too: they are what disappears first when a
 * sheet further down the cascade recolours or clears the shared button text,
 * and pinning them here is what keeps the control legible rather than an empty
 * frame with a label-shaped hole in it.
 */
.sc-lifecycle__action .sc-button,
.sc-rd__action .sc-button,
.sc-insights__action .sc-button {
	overflow: visible;
	background-color: var(--sc-color-surface-raised);
	border-color: var(--sc-color-brand);
	color: var(--sc-color-brand-strong);
}

.sc-lifecycle__action .sc-button .sc-button__label,
.sc-rd__action .sc-button .sc-button__label,
.sc-insights__action .sc-button .sc-button__label,
.sc-lifecycle__action .sc-button .sc-button__arrow,
.sc-rd__action .sc-button .sc-button__arrow,
.sc-insights__action .sc-button .sc-button__arrow {
	color: inherit;
	-webkit-text-fill-color: currentcolor;
}

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

.sc-lifecycle__action .sc-button:active,
.sc-rd__action .sc-button:active,
.sc-insights__action .sc-button:active {
	background-color: var(--sc-color-brand-subtle);
	border-color: var(--sc-color-brand-strong);
	color: var(--sc-color-brand-strong);
}

.sc-lifecycle__media {
	aspect-ratio: 2.1 / 1;
	border-radius: var(--sc-radius-md);
}

/* The brand fragment is a desk-layout detail with no reading role, so it is
   only drawn in the fidelity layer, where there is room for it to sit behind
   the rail's trailing corner instead of in the reading path. */
.sc-lifecycle__pattern {
	display: none;
}

/* --- The journey rail ----------------------------------------------------- */

/*
 * On a phone the rail is a timeline: the stage number is the node on a
 * brand-blue line, the icon sits beside it, and the copy follows on the
 * timeline's own measure. `--sc-lifecycle-gap` is both the space between two
 * stages and the length the connector between them has to cross, so the line
 * stays continuous whatever that spacing is set to.
 */
.sc-lifecycle__journey {
	--sc-lifecycle-gap: clamp(1.75rem, 1.5rem + 1vw, 2.125rem);

	position: relative;
	display: grid;
	gap: var(--sc-lifecycle-gap);
	margin: 0;
	padding-block: 0;
	padding-inline: 0;
	list-style: none;
}

.sc-lifecycle__stage {
	position: relative;
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	gap: var(--sc-space-3xs) var(--sc-space-xs);
	align-items: center;
}

/*
 * The connector runs from this stage's node to the node below it: the gap plus
 * that node's own radius past this stage's box. The closing stage has no next
 * node, so it draws none.
 */
.sc-lifecycle__stage::before {
	content: "";
	position: absolute;
	inset-block: calc(1rem - 1px) calc(-1rem - var(--sc-lifecycle-gap));
	inset-inline-start: calc(1rem - 1px);
	inline-size: var(--sc-border-width-strong);
	border-radius: var(--sc-radius-pill);
	background-color: var(--sc-color-brand-border);
}

.sc-lifecycle__stage:last-child::before {
	content: none;
}

.sc-lifecycle__stage-index {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	border: var(--sc-border-width) solid var(--sc-color-brand-border);
	border-radius: var(--sc-radius-pill);
	background-color: var(--sc-color-surface);
	color: var(--sc-color-brand);
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: 0.1em;
}

.sc-lifecycle__stage-icon {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	color: var(--sc-color-brand);
	transition:
		color var(--sc-transition-fast),
		translate var(--sc-transition-fast);
}

.sc-lifecycle__stage-icon svg {
	display: block;
	inline-size: 1.75rem;
	block-size: auto;
}

.sc-lifecycle__stage-title {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	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-lifecycle__stage-copy {
	grid-column: 2;
	grid-row: 3;
	margin: 0;
	font-size: var(--sc-font-size-sm);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-text-muted);
}

/*
 * Hover is deliberate but tiny: the stage's own glyphs take the deeper blue and
 * the icon travels two pixels. Nothing here changes a box, so the band's
 * geometry is identical before and after.
 */
.sc-lifecycle__stage:hover .sc-lifecycle__stage-index,
.sc-lifecycle__stage:hover .sc-lifecycle__stage-icon {
	color: var(--sc-color-brand-strong);
}

.sc-lifecycle__stage:hover .sc-lifecycle__stage-icon {
	translate: 0.125rem 0;
}

[dir="rtl"] .sc-lifecycle__stage:hover .sc-lifecycle__stage-icon {
	translate: -0.125rem 0;
}

/* ===========================================================================
 * R&D / technical capability
 *
 * The band after the lifecycle journey, and the page's quietest composition:
 * one photograph and one argument. It deliberately mirrors the lifecycle band
 * so that the two read as different ideas — the photograph leads here and
 * trails there, this band carries no rail, and it sits on its own near-white
 * field rather than on white, which is the same few-percent tint step the
 * industries and portfolio bands already use to separate two neighbours.
 *
 * The copy is placed first in the document and the photograph is placed beside
 * it at the desk layout, so a phone reads the argument and then sees the
 * laboratory, and the wide composition still leads with the image.
 * ======================================================================== */

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

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

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

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

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

/* The copy keeps a reading measure of its own, so a one-column phone does not
   stretch the heading across the whole screen. */
.sc-rd__copy .sc-section__title,
.sc-rd__copy .sc-section__lead {
	max-inline-size: 32rem;
}

.sc-rd__action {
	margin: 0;
}

/* A landscape frame rather than the square the photograph would take if the
   stack simply followed the file's own proportions. */
.sc-rd__media {
	aspect-ratio: 2 / 1;
	border-radius: var(--sc-radius-md);
}

/* The brand fragment is a wide-layout detail with no reading role. */
.sc-rd__pattern {
	display: none;
}

/* ===========================================================================
 * Insights
 *
 * The page's editorial band: one article given the room to dominate, and the
 * next two as small horizontal rows beside it. It is deliberately not a third
 * three-up grid — the industries row, the portfolio and the lifecycle rail
 * already hold that shape — so the asymmetry is the composition, not a styling
 * choice, and the featured plate is the only large image in the lower half of
 * the page.
 *
 * Every item is a published post, so nothing here is a hand-maintained teaser:
 * the copy, the category, the summary, the imagery and the link all come from
 * the article, and the band is a view of the knowledge base.
 * ======================================================================== */

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

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

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

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

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

/* The header keeps a reading measure of its own, so a one-column phone does not
   stretch the heading across the whole screen. */
.sc-insights__copy .sc-section__title,
.sc-insights__copy .sc-section__lead {
	max-inline-size: 32rem;
}

.sc-insights__action {
	margin: 0;
}

/* --- The featured article -------------------------------------------------- */

.sc-insights__featured-link,
.sc-insights__row {
	display: grid;
	gap: var(--sc-space-md);
	color: inherit;
	text-decoration: none;
}

.sc-insights__featured-media {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--sc-radius-md);
}

.sc-insights__featured-body,
.sc-insights__row-body {
	display: grid;
	gap: var(--sc-space-2xs);
	align-content: start;
}

/* The category is the article's own, set as a label rather than rewritten: the
   uppercase treatment is styling, so a renamed category stays correct. */
.sc-insights__category {
	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-brand);
}

.sc-insights__featured-title,
.sc-insights__row-title {
	margin: 0;
	font-weight: var(--sc-font-weight-semibold);
	line-height: var(--sc-line-height-tight);
	color: var(--sc-color-heading);
	text-wrap: pretty;
}

.sc-insights__featured-title {
	font-size: var(--sc-font-size-2xl);
}

.sc-insights__row-title {
	font-size: var(--sc-font-size-lg);
}

.sc-insights__featured-summary,
.sc-insights__row-summary {
	color: var(--sc-color-text-muted);
	line-height: var(--sc-line-height-snug);
}

/* The action line is text with an arrow, not a button: the whole item is the
   link, and a second control inside it would be a second tab stop. */
.sc-insights__action-line {
	display: inline-flex;
	align-items: center;
	gap: var(--sc-space-2xs);
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-brand-strong);
}

/* --- The two rows ---------------------------------------------------------- */

.sc-insights__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The separator is the list's, not a card's: a hairline between the two rows and
   nothing around them. */
.sc-insights__item + .sc-insights__item {
	border-block-start: var(--sc-border-width) solid var(--sc-color-border-subtle);
}

.sc-insights__row {
	padding-block: var(--sc-space-lg);
}

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

/* Hover and focus are the same movement in every item: the title takes the
   brand blue, the arrow travels three pixels and the plate breathes by 1.5%. No
   lift, no shadow, no box that moves — the band's geometry is identical before
   and after. */
.sc-insights__featured-link:hover .sc-insights__featured-title,
.sc-insights__featured-link:focus-visible .sc-insights__featured-title,
.sc-insights__row:hover .sc-insights__row-title,
.sc-insights__row:focus-visible .sc-insights__row-title {
	color: var(--sc-color-brand);
}

.sc-insights__featured-link:hover .sc-button__arrow,
.sc-insights__featured-link:focus-visible .sc-button__arrow,
.sc-insights__row:hover .sc-button__arrow,
.sc-insights__row:focus-visible .sc-button__arrow {
	translate: 3px 0;
}

[dir="rtl"] .sc-insights__featured-link:hover .sc-button__arrow,
[dir="rtl"] .sc-insights__featured-link:focus-visible .sc-button__arrow,
[dir="rtl"] .sc-insights__row:hover .sc-button__arrow,
[dir="rtl"] .sc-insights__row:focus-visible .sc-button__arrow {
	translate: -3px 0;
}

.sc-insights__featured-media img,
.sc-insights__row-media img {
	transition: scale var(--sc-transition-base);
}

.sc-insights__featured-link:hover .sc-insights__featured-media img,
.sc-insights__featured-link:focus-visible .sc-insights__featured-media img,
.sc-insights__row:hover .sc-insights__row-media img,
.sc-insights__row:focus-visible .sc-insights__row-media img {
	scale: 1.015;
}

/* ===========================================================================
 * Tablet and up
 *
 * Below this both bands stack every block; from here each band pairs its copy
 * with its media and its card rows take on more than one column. The solution
 * band keeps its single column until the desk layout, because the reference's
 * 62/38 split starves three family cards of their measure at this width.
 * ======================================================================== */

@media (width >= 48rem) {
	.sc-product-search {
		flex-direction: row;
	}

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

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

	/* The insight rows pair their image with their words as soon as there is
	   room for both, which is the shape they keep at the desk layout. */
	.sc-insights__row {
		grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--sc-space-md);
	}

	/* Two cards a row, so the third wraps under them rather than being squeezed
	   to a third of a tablet. */
	.sc-portfolio__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sc-guidance__panel {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		align-items: start;
	}

	.sc-guidance__media {
		grid-column: 2;
		grid-row: 1;
		aspect-ratio: auto;
		block-size: 100%;
	}

	.sc-guidance__body {
		grid-column: 1;
		grid-row: 1;
	}

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

	.sc-industries__header {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: var(--sc-space-xl);
		align-items: end;
	}

	.sc-industries__aside {
		justify-items: stretch;
	}

	/* The lead stays on the column's leading edge; only the action is
	   right-aligned to the container. */
	.sc-industries__action {
		justify-self: end;
	}

	/*
	 * The rail becomes one white panel of two columns. The closing stage takes
	 * the panel's full width rather than sitting beside an empty cell, so the
	 * band still ends on a whole segment instead of on a hole at tablet.
	 */
	.sc-lifecycle__journey {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		/* Rows share one height, so the closing stage — which spans the panel —
		   is the same height as the four above it rather than a short row of its
		   own. The 1px difference between the bordered and unbordered rows is
		   the reason this is stated rather than left to content. */
		grid-auto-rows: 1fr;
		gap: 0;
		border: var(--sc-border-width) solid var(--sc-color-border-subtle);
		border-radius: var(--sc-radius-md);
		background-color: var(--sc-color-surface-raised);
		box-shadow: var(--sc-shadow-sm);
	}

	.sc-lifecycle__stage {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--sc-space-2xs) var(--sc-space-sm);
		padding: var(--sc-space-md);
		border-block-start: var(--sc-border-width) solid var(--sc-color-border-subtle);
		border-inline-start: var(--sc-border-width) solid var(--sc-color-border-subtle);
	}

	/* The panel's own divisions replace both the timeline and its nodes. */
	.sc-lifecycle__stage::before {
		content: none;
	}

	/*
	 * The number, the icon and the words share one layout: the figure is
	 * pinned to the segment's leading edge so it lines up with the title
	 * beneath it, and the glyph closes the head row at the trailing edge.
	 */
	.sc-lifecycle__stage-index {
		justify-self: start;
		inline-size: auto;
		block-size: auto;
		border: 0;
		border-radius: 0;
		background-color: transparent;
		font-size: var(--sc-font-size-sm);
		letter-spacing: 0.14em;
	}

	.sc-lifecycle__stage-icon svg {
		inline-size: 2rem;
	}

	.sc-lifecycle__stage-title,
	.sc-lifecycle__stage-copy {
		grid-column: 1 / -1;
	}

	.sc-lifecycle__stage:nth-child(odd),
	.sc-lifecycle__stage:last-child {
		border-inline-start: 0;
	}

	.sc-lifecycle__stage:nth-child(-n + 2) {
		border-block-start: 0;
	}

	.sc-lifecycle__stage:last-child {
		grid-column: 1 / -1;
	}
}

/* ===========================================================================
 * Desktop
 *
 * The four cards the reference approves share one row from 1280px, and the pair
 * of glyphs below them appears only here, where the reference places it.
 * ======================================================================== */

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

	.sc-industries__controls {
		display: flex;
	}

	/*
	 * Five stages on one row. The rail is a single band from here, so the two
	 * horizontal divisions of the tablet panel become the vertical dividers the
	 * composition is drawn with — every selector that carried a tablet division
	 * is restated, because a media query does not raise specificity and the
	 * tablet rules would otherwise still win.
	 */
	.sc-lifecycle__journey {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.sc-lifecycle__stage,
	.sc-lifecycle__stage:nth-child(odd),
	.sc-lifecycle__stage:last-child {
		grid-column: auto;
		border-block-start: 0;
		border-inline-start: var(--sc-border-width) solid var(--sc-color-border-subtle);
	}

	.sc-lifecycle__stage:first-child {
		border-inline-start: 0;
	}

	/*
	 * The flow marker: a chevron sitting on each cut, so the five segments read
	 * in one direction rather than merely standing next to each other. It is
	 * centered on the divider with a logical margin, so it lands on the cut in
	 * either writing direction; only the glyph itself has to be mirrored.
	 */
	.sc-lifecycle__stage:not(:first-child)::before {
		content: "";
		position: absolute;
		inset-block: auto;
		inset-inline: auto;
		inset-block-start: 50%;
		inset-inline-start: 0;
		inline-size: 0.5rem;
		block-size: 0.75rem;
		margin-block-start: -0.375rem;
		margin-inline-start: -0.25rem;
		border-radius: 0;
		background-color: var(--sc-color-brand);
		clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
	}

	[dir="rtl"] .sc-lifecycle__stage:not(:first-child)::before {
		scale: -1 1;
	}
}

/* ===========================================================================
 * Fidelity layer
 *
 * The reference composition in reference pixels: `--sc-u` is one reference pixel
 * at the width the approved designs were measured at, so these bands keep their
 * proportions on any display instead of guessing at a breakpoint. This is the
 * same layer, and the same kind of value, that the hero, credibility and
 * portfolio bands already use.
 * ======================================================================== */

@media (width >= 75rem) {
	.sc-solutions {
		--sc-gm-inset: calc(84 * var(--sc-u));

		padding-block: min(calc(42 * var(--sc-u)), 3.9vh) min(calc(32 * var(--sc-u)), 3vh);
	}

	/* Reference split: a 877u column against a 502u panel, which is the 62/38
	   the brief asks for once the gutter between them is counted. */
	.sc-solutions__grid {
		grid-template-columns: minmax(0, 1.63fr) minmax(0, 1fr);
		gap: calc(40 * var(--sc-u));
	}

	.sc-solutions__main {
		gap: calc(24 * var(--sc-u));
	}

	.sc-solutions__intro {
		gap: calc(15 * var(--sc-u));
	}

	.sc-solutions .sc-eyebrow {
		font-size: calc(14.5 * var(--sc-u));
	}

	.sc-solutions .sc-section__title {
		font-size: calc(60 * var(--sc-u));
		line-height: 1.12;
	}

	.sc-solutions .sc-section__lead {
		max-inline-size: calc(640 * var(--sc-u));
		font-size: calc(19 * var(--sc-u));
		line-height: 1.4;
	}

	.sc-product-search__field,
	.sc-product-search__submit {
		min-block-size: calc(63 * var(--sc-u));
	}

	.sc-product-search__submit {
		padding-inline: calc(33 * var(--sc-u));
		font-size: calc(16 * var(--sc-u));
	}

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

	.sc-family-card__link {
		gap: calc(16 * var(--sc-u));
		min-block-size: min(calc(165 * var(--sc-u)), 15vh);
		padding: calc(20 * var(--sc-u));
	}

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

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

	.sc-family-card__media {
		inline-size: calc(72 * var(--sc-u));
		block-size: calc(72 * var(--sc-u));
	}

	.sc-family-card__arrow {
		inline-size: calc(36 * var(--sc-u));
		block-size: calc(36 * var(--sc-u));
	}

	/* The picture takes the panel's trailing third; the words keep a measure
	   the four approved headline lines can each hold.
	   The height is set from the product-family row beside it rather than from
	   the copy, so the value rail below closes on the same baseline as the
	   cards. The photograph absorbs the difference, being a full-height crop. */
	.sc-guidance__panel {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		min-block-size: calc(478 * var(--sc-u));
	}

	.sc-guidance__media {
		min-block-size: min(calc(360 * var(--sc-u)), 34vh);
	}

	.sc-guidance__body {
		gap: calc(20 * var(--sc-u));
		padding: calc(58 * var(--sc-u)) calc(22 * var(--sc-u)) calc(72 * var(--sc-u))
			calc(38 * var(--sc-u));
	}

	.sc-guidance .sc-eyebrow {
		font-size: calc(14.5 * var(--sc-u));
	}

	.sc-guidance__eyebrow {
		max-inline-size: calc(150 * var(--sc-u));
	}

	.sc-guidance__eyebrow::before {
		inline-size: calc(61 * var(--sc-u));
		margin-block-end: calc(18 * var(--sc-u));
	}

	.sc-guidance__title {
		max-inline-size: calc(258 * var(--sc-u));
		font-size: calc(23 * var(--sc-u));
		line-height: 1.25;
	}

	.sc-guidance__button {
		min-block-size: calc(63 * var(--sc-u));
		padding-inline: calc(33 * var(--sc-u));
		font-size: calc(16 * var(--sc-u));
	}

	/* Three items of their own width, spread across the panel's measure. */
	.sc-guidance__values {
		display: flex;
		justify-content: space-between;
		gap: calc(27 * var(--sc-u));
		padding: calc(24 * var(--sc-u)) calc(22 * var(--sc-u)) 0 calc(38 * var(--sc-u));
	}

	.sc-guidance__value-label {
		font-size: calc(14 * var(--sc-u));
		line-height: 1.5;
	}

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

		padding-block: min(calc(42 * var(--sc-u)), 3.9vh) min(calc(30 * var(--sc-u)), 2.8vh);
	}

	.sc-industries__grid {
		gap: calc(30 * var(--sc-u));
	}

	/* Every card is on screen at this width, so the pair below still tracks the
	   row: the reference keeps its two arrows under the cards' trailing edge. */
	.sc-industries__controls {
		margin-block-start: calc(37 * var(--sc-u));
	}

	.sc-industries__control {
		inline-size: calc(44 * var(--sc-u));
		block-size: calc(44 * var(--sc-u));
		font-size: calc(18 * var(--sc-u));
	}

	.sc-industries__header {
		grid-template-columns: minmax(0, 1.44fr) minmax(0, 1fr);
		gap: calc(40 * var(--sc-u));
	}

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

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

	/* One line, filling its column the way the reference headline does. */
	.sc-industries .sc-section__title {
		font-size: calc(46 * var(--sc-u));
		line-height: 1.1;
	}

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

	.sc-industries .sc-button--quiet {
		min-block-size: calc(48 * var(--sc-u));
		padding-inline: calc(28 * var(--sc-u));
		font-size: calc(15 * var(--sc-u));
	}

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

	/* The desk row is measured against the reference rather than derived from
	   the card's width, so the ratio above stands down here. */
	.sc-industry-card__link {
		aspect-ratio: auto;
		min-block-size: min(calc(250 * var(--sc-u)), 23vh);
	}

	.sc-industry-card__overlay {
		gap: calc(20 * var(--sc-u));
		padding: calc(20 * var(--sc-u)) calc(25 * var(--sc-u));
	}

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

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

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

	.sc-industry-card__arrow {
		inline-size: calc(38 * var(--sc-u));
		block-size: calc(38 * var(--sc-u));
	}

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

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

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

	/*
	 * The approved split: a 470u intro against the rest of the 1504u measure,
	 * which is 31% of the band, with the cards closing on the trailing inset.
	 */
	.sc-portfolio__grid {
		grid-template-columns: calc(470 * var(--sc-u)) minmax(0, 1fr);
		column-gap: calc(60 * var(--sc-u));
		align-items: start;
	}

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

	/* Both measures are the column's own, so the headline breaks into the three
	   lines the composition was drawn with instead of running wider than them. */
	.sc-portfolio__intro .sc-section__title,
	.sc-portfolio__intro .sc-section__lead {
		max-inline-size: calc(470 * var(--sc-u));
	}

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

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

	.sc-portfolio .sc-section__lead {
		font-size: calc(16 * var(--sc-u));
		line-height: 1.55;
	}

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

	.sc-portfolio .sc-button {
		min-block-size: calc(54 * var(--sc-u));
		padding-inline: calc(30 * var(--sc-u));
		font-size: calc(15 * var(--sc-u));
	}

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

	.sc-product-card__link {
		gap: 0;
		border-radius: calc(8 * var(--sc-u));
	}

	/* Restated against the shared layer's fixed 190u image height: here the
	   frame keeps the ratio and the width of the card's own column. */
	.sc-product-card__media {
		aspect-ratio: 4 / 3;
		block-size: auto;
		border-radius: 0;
	}

	.sc-product-card__body {
		gap: calc(8 * var(--sc-u));
		padding: calc(22 * var(--sc-u));
	}

	.sc-product-card__family {
		font-size: calc(12 * 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.45;
	}

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

	.sc-product-card__arrow {
		inline-size: calc(34 * var(--sc-u));
		block-size: calc(34 * var(--sc-u));
	}

	/* --- Lifecycle services ------------------------------------------------ */

	.sc-lifecycle {
		--sc-gm-inset: calc(84 * var(--sc-u));

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

	/*
	 * The approved split: a 920u photograph closing on the trailing inset,
	 * against the 520u editorial column that is left, 64u apart — 55% of the
	 * section and 61% of the 1504u measure for the photograph, 34.6% for the
	 * words.
	 */
	.sc-lifecycle__composition {
		grid-template-columns: minmax(0, 1fr) calc(920 * var(--sc-u));
		gap: 0 calc(64 * var(--sc-u));
	}

	.sc-lifecycle__intro {
		grid-column: 1;
		grid-row: 1;
		gap: calc(18 * var(--sc-u));

		/*
		 * The clearance under this column is reserved by the column itself
		 * rather than left to where the body copy happens to wrap, and
		 * `margin-block-end` is what makes that work: a margin is part of the
		 * item's outer size, so it counts when the grid sizes row 1. The row
		 * therefore grows the moment the copy needs more room, and the rail —
		 * which starts exactly on that row's bottom edge — is pushed down with
		 * it. The call to action cannot be covered at any width, in any font, at
		 * any zoom: that is now a property of the layout rather than of four
		 * lines of wrapping body copy.
		 */
		align-self: start;
		margin-block-end: calc(24 * var(--sc-u));
	}

	.sc-lifecycle__intro .sc-section__title,
	.sc-lifecycle__intro .sc-section__lead {
		max-inline-size: calc(500 * var(--sc-u));
	}

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

	.sc-lifecycle .sc-section__title {
		font-size: calc(47 * var(--sc-u));
		line-height: 1.1;
	}

	.sc-lifecycle__intro .sc-section__lead {
		font-size: calc(17 * var(--sc-u));
		line-height: 1.6;
	}

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

	.sc-lifecycle .sc-button {
		min-block-size: calc(54 * var(--sc-u));
		padding-inline: calc(30 * var(--sc-u));
		font-size: calc(15 * var(--sc-u));
	}

	/*
	 * The photograph carries the overlap itself, as a negative end margin. Its
	 * margin box is 384u, so that is what row 1 is asked for, while its painted
	 * box still runs 440u — 56u of it below the row, which is exactly what the
	 * rail then crosses. Stating the overlap on the media rather than as a
	 * negative start margin on the rail is what frees the rail to begin on the
	 * row boundary, and that is what guarantees the column above it.
	 */
	.sc-lifecycle__media {
		grid-column: 2;
		grid-row: 1;
		block-size: calc(440 * var(--sc-u));
		margin-block-end: calc(-56 * var(--sc-u));
		aspect-ratio: auto;
		border-radius: calc(8 * var(--sc-u));
	}

	/*
	 * The rail starts on row 1's bottom edge — no negative margin of its own —
	 * and the photograph's own end margin is what puts its foot 56u into this
	 * row. The stages therefore read as a process running across the picture
	 * rather than as a list of five items below it, and the rail's top edge can
	 * never reach the words above.
	 */
	.sc-lifecycle__journey {
		z-index: 1;
		grid-column: 1 / -1;
		grid-row: 2;

		/* The floor the composition asks for. The measured band is taller than
		   it — 177u — so this never binds; it is here to keep the band from
		   collapsing if a stage loses its copy. */
		min-block-size: calc(170 * var(--sc-u));
		border-radius: calc(8 * var(--sc-u));
		box-shadow: var(--sc-shadow-md);
	}

	.sc-lifecycle__stage {
		padding: calc(22 * var(--sc-u)) calc(26 * var(--sc-u));
		gap: calc(8 * var(--sc-u)) calc(12 * var(--sc-u));
	}

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

	.sc-lifecycle__stage-icon svg {
		inline-size: calc(36 * var(--sc-u));
	}

	.sc-lifecycle__stage-title {
		font-size: calc(17 * var(--sc-u));
		line-height: 1.2;
	}

	.sc-lifecycle__stage-copy {
		font-size: calc(14 * var(--sc-u));
		line-height: 1.42;
	}

	.sc-lifecycle__stage:not(:first-child)::before {
		inline-size: calc(8 * var(--sc-u));
		block-size: calc(12 * var(--sc-u));
		margin-block-start: calc(-6 * var(--sc-u));
		margin-inline-start: calc(-4 * var(--sc-u));
	}

	/* One fragment of the theme's own pattern, cropped by the section's edge and
	   faded to a watermark: a brand detail, not a second subject. */
	.sc-lifecycle__pattern {
		display: block;
		position: absolute;
		inset-block-end: 0;
		inset-inline-end: 0;
		inline-size: calc(430 * var(--sc-u));
		block-size: calc(170 * var(--sc-u));
		opacity: 0.35;
		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: contain;
	}

	/* --- R&D / technical capability ---------------------------------------- */

	.sc-rd {
		--sc-gm-inset: calc(84 * var(--sc-u));

		/* The calmest band on the page: the largest whitespace above and below
		   anything below the hero. */
		padding-block: calc(104 * var(--sc-u));
	}

	/*
	 * 56 / 44 of the 1432u row that remains once the 72u gutter is counted:
	 * an 802u photograph on the leading edge against a 630u column of words.
	 */
	.sc-rd__composition {
		grid-template-columns: calc(802 * var(--sc-u)) minmax(0, 1fr);
		gap: 0 calc(72 * var(--sc-u));
		align-items: center;
	}

	.sc-rd__media {
		grid-column: 1;
		grid-row: 1;
		block-size: calc(520 * var(--sc-u));
		aspect-ratio: auto;
		border-radius: calc(8 * var(--sc-u));
	}

	/* The column is centred on the photograph rather than hung from its top
	   edge: with one short paragraph under one heading there is no rail to meet,
	   so the words and the image are the two things that should look level. */
	.sc-rd__copy {
		grid-column: 2;
		grid-row: 1;
		gap: calc(20 * var(--sc-u));
	}

	.sc-rd__copy .sc-section__title,
	.sc-rd__copy .sc-section__lead {
		max-inline-size: calc(520 * var(--sc-u));
	}

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

	.sc-rd .sc-section__title {
		font-size: calc(42 * var(--sc-u));
		line-height: 1.14;
	}

	.sc-rd__copy .sc-section__lead {
		font-size: calc(17 * var(--sc-u));
		line-height: 1.6;
	}

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

	.sc-rd .sc-button {
		min-block-size: calc(54 * var(--sc-u));
		padding-inline: calc(30 * var(--sc-u));
		font-size: calc(15 * var(--sc-u));
	}

	/* One fragment of the theme's own pattern, sitting inside the band's own
	   foot line so it can never reach the argument above it. */
	.sc-rd__pattern {
		display: block;
		position: absolute;
		inset-block-end: calc(20 * var(--sc-u));
		inset-inline-end: 0;
		inline-size: calc(300 * var(--sc-u));
		block-size: calc(84 * var(--sc-u));
		opacity: 0.3;
		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: contain;
	}

	/* --- Insights ---------------------------------------------------------- */

	.sc-insights {
		--sc-gm-inset: calc(84 * var(--sc-u));

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

	/*
	 * 58 / 42 of the 1440u row that remains once the 64u gutter is counted:
	 * an 835u column for the featured article against a 605u column for the two
	 * rows. The featured article itself is drawn at 760u inside its column, so
	 * the plate lands on the width the composition asks for and the 75u that are
	 * left over become the air between the two halves.
	 */
	.sc-insights__composition {
		grid-template-columns: calc(835 * var(--sc-u)) minmax(0, 1fr);
		gap: 0 calc(64 * var(--sc-u));
	}

	.sc-insights__copy {
		grid-column: 1;
		grid-row: 1;
		gap: calc(18 * var(--sc-u));
	}

	/* The header's action closes the header row, level with the foot of the
	   intro it belongs to rather than floating at the section's end. */
	.sc-insights__action {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
	}

	.sc-insights__copy .sc-section__title,
	.sc-insights__copy .sc-section__lead {
		max-inline-size: calc(560 * var(--sc-u));
	}

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

	.sc-insights .sc-section__title {
		font-size: calc(40 * var(--sc-u));
		line-height: 1.14;
	}

	.sc-insights__copy .sc-section__lead {
		font-size: calc(17 * var(--sc-u));
		line-height: 1.6;
		max-inline-size: calc(520 * var(--sc-u));
	}

	.sc-insights .sc-button {
		/* 54u is the reference height, but u shrinks with the viewport: from
		   1363px down it falls under the 44px touch target, so the token is
		   the floor and the reference height is the ceiling. */
		min-block-size: max(var(--sc-touch-target), calc(54 * var(--sc-u)));
		padding-inline: calc(30 * var(--sc-u));
		font-size: calc(15 * var(--sc-u));
	}

	.sc-insights__featured {
		grid-column: 1;
		grid-row: 2;
		max-inline-size: calc(760 * var(--sc-u));
	}

	.sc-insights__featured-link {
		gap: calc(24 * var(--sc-u));
	}

	.sc-insights__featured-media {
		aspect-ratio: auto;
		block-size: calc(420 * var(--sc-u));
		border-radius: calc(8 * var(--sc-u));
	}

	.sc-insights__featured-body {
		gap: calc(12 * var(--sc-u));
	}

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

	.sc-insights__featured-title {
		font-size: calc(33 * var(--sc-u));
		line-height: 1.18;
	}

	.sc-insights__featured-summary {
		font-size: calc(17 * var(--sc-u));
		line-height: 1.5;
		max-inline-size: calc(700 * var(--sc-u));
	}

	.sc-insights__action-line {
		margin-block-start: calc(6 * var(--sc-u));
		font-size: calc(15 * var(--sc-u));
	}

	.sc-insights__list {
		grid-column: 2;
		grid-row: 2;
	}

	/* The first row starts on the plate's top edge: padding rather than a
	   margin, so the hairline between the rows stays the full column width. */
	.sc-insights__row {
		grid-template-columns: calc(236 * var(--sc-u)) minmax(0, 1fr);
		gap: calc(16 * var(--sc-u));
		padding-block: calc(30 * var(--sc-u));
	}

	.sc-insights__item:first-child .sc-insights__row {
		padding-block-start: 0;
	}

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

	.sc-insights__row-media {
		border-radius: calc(4 * var(--sc-u));
	}

	.sc-insights__row-body {
		gap: calc(8 * var(--sc-u));
	}

	.sc-insights__row-title {
		font-size: calc(22 * var(--sc-u));
		line-height: 1.24;
	}

	.sc-insights__row-summary {
		font-size: calc(15 * var(--sc-u));
		line-height: 1.5;
	}

	.sc-insights__row .sc-insights__action-line {
		margin-block-start: calc(2 * var(--sc-u));
		font-size: calc(14 * var(--sc-u));
	}
}

/* ===========================================================================
 * Reduced motion
 * ======================================================================== */

@media (prefers-reduced-motion: reduce) {
	.sc-product-search__arrow,
	.sc-family-card__arrow,
	.sc-guidance__button-arrow,
	.sc-industry-card__media img,
	.sc-industry-card__arrow,
	.sc-product-card__media img,
	.sc-product-card__arrow,
	.sc-product-card__link,
	.sc-lifecycle__stage-icon {
		transition: none;
	}

	.sc-lifecycle__stage:hover .sc-lifecycle__stage-icon {
		translate: none;
	}

	.sc-insights__featured-media img,
	.sc-insights__row-media img,
	.sc-insights__featured-link .sc-button__arrow,
	.sc-insights__row .sc-button__arrow {
		transition: none;
	}

	.sc-insights__featured-link:hover .sc-insights__featured-media img,
	.sc-insights__featured-link:focus-visible .sc-insights__featured-media img,
	.sc-insights__row:hover .sc-insights__row-media img,
	.sc-insights__row:focus-visible .sc-insights__row-media img {
		scale: 1;
	}

	.sc-insights__featured-link:hover .sc-button__arrow,
	.sc-insights__featured-link:focus-visible .sc-button__arrow,
	.sc-insights__row:hover .sc-button__arrow,
	.sc-insights__row:focus-visible .sc-button__arrow {
		translate: none;
	}
}