/**
 * Recordsure theme presentation.
 *
 * Every colour, size, radius, shadow and easing comes from theme.json presets
 * or custom properties. Interaction states and their colour pairs follow the
 * recordsure-brand contract and its contrast matrix. The header and mobile
 * drawer style the shared framework's managed navigation markup, whose
 * controller sets `data-open`, `aria-expanded` and `is-open`.
 */

/* ─── Base ─────────────────────────────────────────────────────────────── */
/* --rs-gutter is the gutter of the one container every band uses (see
   Container below): 16px on phones, 24px from 40rem and 32px from 64rem.
   Only the 32px is the Figma's, from its wide frame; the narrower steps are
   the theme's own responsive design (the operator's decision on 16 October
   2026). */
html {
	--rs-gutter: var(--wp--preset--spacing--4);
	scroll-padding-top: 6rem;
}

@media (min-width: 40rem) {

	html {
		--rs-gutter: var(--wp--preset--spacing--6);
	}
}

@media (min-width: 64rem) {

	html {
		--rs-gutter: var(--wp--preset--spacing--8);
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ─── Container ────────────────────────────────────────────────────────── */
/*
 * Every band sets its content in the Figma's one container (its wide frame's
 * Tailwind max-w-[1280px] mx-auto lg:px-8): the wide layout width, 80rem,
 * centred and including the gutter. The content therefore starts on one line
 * on every page and is at most 76rem (1216px) wide, while each band's
 * background still runs edge to edge. The header, the footer, the review
 * bar, the index and single bands, the People routes and the generic
 * templates (see Generic templates) take the same gutter; a band adds only
 * its block padding.
 */
.rs-header-inner,
.rs-footer-inner,
.rs-band__inner,
.rs-hero__inner,
.rs-anchor-nav__inner,
.rs-governance__inner,
.rs-main--collection .tcc-hero__inner,
.rs-main--collection .tcc-filters__inner,
.rs-main--collection .tcc-section__inner,
.rs-single-hero__inner,
.rs-single-metrics__inner,
.rs-single-body__inner,
.rs-single-related-band__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--rs-gutter);
}

/* ─── Card outlines ────────────────────────────────────────────────────── */
/*
 * Every card, panel and tile rests on the decorative rs-border edge (the
 * operator's site-wide decision of 17 October 2026): the archive and search
 * cards, the search state panel, the text, outcome, insight, feature, stage,
 * case study, audience and single cards, the summary box, the facts, the
 * homepage technology panel, the policy fact rows and contact card, the
 * Contact form surface and privacy card and the Trusted by fallback tiles,
 * besides the cards earlier decisions edged with it. None of them is a
 * control whose only boundary is its edge: each is named by its own text,
 * and every link in or over one keeps its 2px rs-blue-accessible focus ring.
 * A hover edge a card already has keeps its colour, the link cards take the
 * rs-slate-light hover edge (see Link card hover edges), and a page that
 * chose another decorative edge keeps it: rs-sky round the Sectors pages'
 * facts, rs-blue-light round the Knowledge centre's insight cards, and the
 * homepage's navy facts. rs-slate-light (3.83:1 on white) stays wherever a
 * boundary identifies or separates something: form controls, outline buttons
 * and pills, hover edges, the header, mobile menu, rail tab and engagement
 * snapshot rules, the footer trust box and band rule, the policy tables and
 * the shared consent UI. The cookie panel round that UI rests on rs-border.
 * test-recordsure-card-outlines.php and recordsure-card-outlines.spec.cjs
 * hold both lists.
 */

/* ─── Governed downloads ───────────────────────────────────────────────── */
/*
 * The Figma's "Documents and guides" band (16 October 2026): a plain white
 * band with 56px of block padding (64px from 64rem), a compact head (the 12px
 * eyebrow, a 24px heading and a 14px introduction, 28px above the cards) and
 * at most three equal columns of document cards 16px apart: three from 64rem,
 * two from 40rem and one below. Each card is a list item: the 40px pale-blue
 * document tile beside the title and, when Core has one, the description,
 * with the "Download now" link at the card's foot. Cards in a row share its
 * height, and each card is its own box, so no card reaches into the next row.
 * The link is the card's one control and covers the card: the whole card is
 * its target and its focus ring outlines the card. The card's rs-border edge
 * is decorative (the operator's 15 October 2026 exception for download
 * cards): the title and the link's own words identify each card, the link in
 * the accessible blue (5.49:1; the Figma's brand blue is 2.38:1 on white).
 * The band's top hairline is the shared inner-page section separator (see
 * Section separators), as for every light band that follows another.
 */
.rs-band.rs-downloads {
	padding-block: 3.5rem;
}

.rs-downloads .rs-section-head {
	margin-block-end: 1.75rem;
}

.rs-downloads .rs-section-head__heading {
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 2rem;
}

.rs-downloads .rs-section-head__intro {
	margin-block-start: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
}

.rs-downloads__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-download-card {
	position: relative;
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	gap: var(--wp--preset--spacing--4);
	min-width: 0;
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
	transition: border-color var(--wp--custom--recordsure--motion--button) ease;
}

/* The card's own hover answers fine pointers only, as card effects do, so a
   tap never leaves a touch screen's card outlined. */
@media (hover: hover) and (pointer: fine) {

	.rs-download-card:hover {
		border-color: color-mix(in srgb, var(--wp--preset--color--rs-blue) 30%, transparent);
	}
}

.rs-download-card__icon {
	display: flex;
	align-self: start;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--wp--custom--recordsure--radius--small-surface);
	background: color-mix(in srgb, var(--wp--preset--color--rs-blue-light) 30%, transparent);
	color: var(--wp--preset--color--rs-blue);
}

.rs-download-card__document {
	width: 1.25rem;
	height: 1.25rem;
}

.rs-download-card__body {
	min-width: 0;
}

.rs-download-card__title {
	margin: 0;
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.375;
	overflow-wrap: anywhere;
}

.rs-download-card__text {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

/* A flex row, so the link's paragraph is the link's own 16px line. */
.rs-download-card__action {
	display: flex;
	grid-column: 2;
	margin: 0;
}

/* A long unbroken Site text label breaks inside its column: unlike
   break-word, overflow-wrap: anywhere also lowers the link's content-based
   minimum width, so the link shrinks with the card. */
.rs-download-card__link {
	display: inline-flex;
	gap: var(--wp--preset--spacing--2);
	align-items: center;
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1rem;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color var(--wp--custom--recordsure--motion--button) ease;
}

/* The link's box covers its card, so the whole card is the link's target. */
.rs-download-card__link::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: var(--wp--custom--recordsure--radius--card);
}

.rs-page .rs-download-card__link:hover {
	color: var(--wp--preset--color--rs-navy);
}

/* Pressed, the link takes the light tertiary active colour, after the hover
   that a pointer press also matches. */
.rs-page .rs-download-card__link:active {
	color: var(--wp--preset--color--rs-navy-deep);
}

/* Focus outlines the whole card, the link's target. Forced colours still draw
   the link's own transparent outline. */
.rs-download-card__link:focus-visible {
	outline-color: transparent;
}

.rs-download-card__link:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--rs-blue-accessible);
	outline-offset: 2px;
}

.rs-download-card__glyph {
	flex: none;
	width: 1rem;
	height: 1rem;
}

@media (min-width: 40rem) {

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

	.rs-download-card {
		padding: var(--wp--preset--spacing--6);
	}
}

@media (min-width: 64rem) {

	.rs-band.rs-downloads {
		padding-block: var(--wp--preset--spacing--16);
	}

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

@media (prefers-reduced-motion: reduce) {

	.rs-download-card,
	.rs-download-card__link {
		transition: none;
	}
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--rs-blue-accessible);
	outline-offset: 2px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
	outline: 0;
}

/* ─── Buttons ──────────────────────────────────────────────────────────── */
.rs-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 var(--wp--preset--spacing--6);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--recordsure--radius--control);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.25rem;
	text-align: center;
	text-decoration: none;
	overflow-wrap: anywhere;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out),
		transform var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out);
}

.rs-button:active,
.wp-element-button:active {
	transform: scale(0.97);
}

/*
 * A primary button on a dark surface: rs-navy-deep text on rs-blue-light
 * (14.91:1), never the Figma's failing white-on-blue, never rs-blue and never
 * mint. Hover lightens to rs-white (18.05:1) and a press settles on
 * rs-blue-on-navy (12.84:1) with the shared press scale.
 */
.rs-button--on-dark,
.rs-button--on-dark:visited {
	background: var(--wp--preset--color--rs-blue-light);
	color: var(--wp--preset--color--rs-navy-deep);
}

.rs-button--on-dark:hover {
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-navy-deep);
}

.rs-button--on-dark:active {
	background: var(--wp--preset--color--rs-blue-on-navy);
	color: var(--wp--preset--color--rs-navy-deep);
}

/* The Figma sets most buttons bold, but these semibold. */
.rs-footer-cta .rs-button,
.rs-page--home .rs-button,
.rs-actions .rs-button {
	font-weight: 600;
}

.rs-page--home :is(.rs-hero, .rs-audiences) .rs-button {
	font-weight: 700;
}

/* ─── Header ───────────────────────────────────────────────────────────── */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

.rs-site-header {
	position: relative;
	background: var(--wp--preset--color--rs-navy-deep);
	color: var(--wp--preset--color--rs-white);
	border-bottom: 1px solid var(--wp--preset--color--rs-slate-light);
}

.rs-header-inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	min-height: 4.5rem;
}

.rs-header-inner > *,
.rs-site-header > * {
	margin-block: 0;
}

.rs-site-header :is(a, button):focus-visible,
.rs-site-header summary:focus-visible,
.rs-site-footer :is(a, button):focus-visible {
	outline-color: var(--wp--preset--color--rs-blue-on-navy);
}

.rs-brand,
.rs-brand:visited {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	min-height: 2.75rem;
	color: var(--wp--preset--color--rs-white);
	text-decoration: none;
}

.rs-brand:hover {
	color: var(--wp--preset--color--rs-blue-on-navy);
}

.rs-brand--text {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 800;
	letter-spacing: -0.01em;
}

/*
 * The Figma sizes the logo 1.75rem tall, and 2rem from 64rem. Its image ends
 * on the wordmark's baseline, so a wider logo that the cap scales down keeps
 * that edge at the bottom of its box.
 */
.rs-brand__logo {
	display: block;
	width: auto;
	height: 1.75rem;
	max-width: 10rem;
	object-fit: contain;
	object-position: left bottom;
}

@media (min-width: 64rem) {

	.rs-brand__logo {
		height: 2rem;
	}
}

/*
 * Where the menu shows, the logo's bottom edge, which is its wordmark's
 * baseline, sits on the menu text's baseline. The menu fills the header row
 * and centres its items there, so it keeps its place and the brand aligns to
 * it; a text wordmark aligns the same way. The brand's 44px target extends
 * below the logo, not above it, so its focus ring stays inside the header.
 */
@media (min-width: 80rem) {

	.tcc-primary-nav-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-self: baseline;
		min-height: inherit;
	}

	.rs-brand {
		align-self: baseline;
		align-items: flex-start;
	}
}

/* ─── Desktop navigation ───────────────────────────────────────────────── */
.tcc-primary-nav-wrapper {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * The Figma's menu (updated 15 October 2026) sets each label in Title case on
 * one line: 12px semibold with 0.025em tracking, in white at 70% (9.1:1 on
 * the header), in 32px items with 12px padding and 4px gaps. The source
 * labels stay in sentence case, so the capitals are a text transform. The
 * seven approved items fit one row from 80rem; a longer managed menu still
 * wraps onto a second row rather than overflowing, and no label breaks
 * inside itself.
 */
.tcc-primary-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcc-nav-item {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.tcc-nav-top,
.tcc-nav-top__link,
.tcc-nav-top__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-height: 2rem;
	margin: 0;
	padding: 0 0.75rem;
	border: 0;
	border-radius: var(--wp--custom--recordsure--radius--control);
	background: none;
	color: color-mix(in srgb, var(--wp--preset--color--rs-white) 70%, transparent);
	font: inherit;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.025em;
	line-height: 1rem;
	text-align: start;
	text-decoration: none;
	text-transform: capitalize;
	white-space: nowrap;
	cursor: pointer;
}

/* A hybrid item's label and its menu toggle read as one item, as in the
   Figma, with the chevron 4px after the label. */
.tcc-nav-top--hybrid {
	gap: 0;
	padding: 0;
}

.tcc-nav-top--hybrid .tcc-nav-top__link {
	padding-inline-end: 0;
}

.tcc-nav-top--hybrid .tcc-nav-top__toggle {
	min-width: 1.75rem;
	padding-inline: 0.25rem 0.75rem;
}

a.tcc-nav-top:visited,
.tcc-nav-top__link:visited {
	color: color-mix(in srgb, var(--wp--preset--color--rs-white) 70%, transparent);
}

/*
 * Hover, and a menu while it is open, show the Figma's quiet box, white at
 * 8%, with white text. Nothing moves, and no text underline is drawn.
 */
a.tcc-nav-top:hover,
button.tcc-nav-top:hover,
.tcc-nav-top--hybrid:hover,
.tcc-nav-item[data-open] > button.tcc-nav-top,
.tcc-nav-item[data-open] > .tcc-nav-top--hybrid {
	background: color-mix(in srgb, var(--wp--preset--color--rs-white) 8%, transparent);
	color: var(--wp--preset--color--rs-white);
}

.tcc-nav-top--hybrid:hover > :is(.tcc-nav-top__link, .tcc-nav-top__toggle),
.tcc-nav-item[data-open] > .tcc-nav-top--hybrid > :is(.tcc-nav-top__link, .tcc-nav-top__toggle) {
	color: var(--wp--preset--color--rs-white);
}

/*
 * The current page's link keeps a bar along the bottom of the whole item, so
 * the current state is a shape as well as a colour (the Figma shows none). The
 * bar is a border in the label's colour, so it stays visible in forced
 * colours and recolours with the label on hover, and it is always present, so
 * it never shifts the layout. A text underline would be drawn beneath each
 * line instead.
 */
a.tcc-nav-top,
.tcc-nav-top__link {
	position: relative;
}

a.tcc-nav-top::after,
.tcc-nav-top__link::after {
	position: absolute;
	inset-inline: 0.75rem;
	inset-block-end: 0.125rem;
	border-block-end: 2px solid currentColor;
	content: "";
	opacity: 0;
	pointer-events: none;
}

.tcc-nav-top--hybrid .tcc-nav-top__link::after {
	inset-inline-end: 0;
}

a.tcc-nav-top[aria-current="page"]::after,
.tcc-nav-top__link[aria-current="page"]::after {
	opacity: 1;
}

/* The shared markup carries a decorative glyph; a drawn chevron replaces it. */
.tcc-nav-chevron {
	display: inline-block;
	flex-shrink: 0;
	width: 0.4rem;
	height: 0.4rem;
	margin-block-start: -0.2rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	font-size: 0;
	line-height: 0;
	transform: rotate(45deg);
	transition: transform var(--wp--custom--recordsure--motion--dropdown) var(--wp--custom--recordsure--motion--ease-out);
}

/*
 * The desktop chevron is the Figma's: a small 1.5px stroke at half the
 * label's opacity, which keeps 3:1 on the header (3.2:1 at rest, 5.2:1 while
 * hovered or open). It points down while its menu is open, as in the Figma.
 */
.tcc-primary-nav .tcc-nav-chevron {
	width: 0.25rem;
	height: 0.25rem;
	margin-block-start: -0.125rem;
	margin-inline: 0.125rem;
	border-right-width: 1.5px;
	border-bottom-width: 1.5px;
	opacity: 0.5;
}

.tcc-mobile-accordion-btn[aria-expanded="true"] .tcc-nav-chevron {
	margin-block-start: 0.2rem;
	transform: rotate(225deg);
}

/*
 * The Figma's menu panel: white, 8px corners, its outline and separators in
 * the softer rs-border (the operator's choice on 15 October 2026), and items
 * that run edge to edge. The outline is decorative: each item is identified
 * by its own text, and the panel's shadow sets it off a light page.
 */
.tcc-nav-panel {
	position: absolute;
	top: calc(100% + var(--wp--preset--spacing--2));
	left: 0;
	z-index: 200;
	min-width: 18rem;
	max-width: min(26rem, calc(100vw - 2rem));
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-navy-deep);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--small-surface);
	box-shadow: var(--wp--preset--shadow--rs-panel);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-4px);
	transition:
		opacity var(--wp--custom--recordsure--motion--dropdown) var(--wp--custom--recordsure--motion--ease-out),
		transform var(--wp--custom--recordsure--motion--dropdown) var(--wp--custom--recordsure--motion--ease-out),
		visibility 0s linear var(--wp--custom--recordsure--motion--dropdown);
}

/* A transparent bridge spans the gap above an open menu. It belongs to the
   menu item, so a pointer moving from the trigger into the menu never leaves
   the item; a closed menu ignores the pointer, so the bridge opens nothing. */
.tcc-nav-panel::before {
	content: "";
	position: absolute;
	inset-block-end: 100%;
	inset-inline: 0;
	height: calc(var(--wp--preset--spacing--2) + 2px);
}

/* Menus near the end of the row open leftwards, so none reaches past the viewport. */
.tcc-primary-nav > li:nth-last-child(-n+3) > .tcc-nav-panel {
	right: 0;
	left: auto;
}

.tcc-nav-item[data-open] > .tcc-nav-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

/* A menu opened from the keyboard appears at once, without animation. */
.tcc-nav-item:has(:focus-visible) > .tcc-nav-panel {
	transition: none;
}

.tcc-nav-panel > li + li {
	border-top: 1px solid var(--wp--preset--color--rs-border);
}

.tcc-nav-panel__subtitle {
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--xs);
}

.tcc-nav-panel a,
.tcc-nav-panel a:visited {
	display: block;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border-radius: 0;
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

/* The first and last items follow the panel's rounded corners. */
.tcc-nav-panel > li:first-child > a {
	border-start-start-radius: calc(var(--wp--custom--recordsure--radius--small-surface) - 1px);
	border-start-end-radius: calc(var(--wp--custom--recordsure--radius--small-surface) - 1px);
}

.tcc-nav-panel > li:last-child > a {
	border-end-start-radius: calc(var(--wp--custom--recordsure--radius--small-surface) - 1px);
	border-end-end-radius: calc(var(--wp--custom--recordsure--radius--small-surface) - 1px);
}

.tcc-nav-panel a:hover {
	outline: 2px solid var(--wp--preset--color--rs-blue-accessible);
	outline-offset: -2px;
	background: var(--wp--preset--color--rs-off-white);
	color: var(--wp--preset--color--rs-navy-deep);
}

.tcc-nav-panel a:active {
	background: var(--wp--preset--color--rs-blue-light);
}

.rs-site-header .tcc-nav-panel a:focus-visible {
	outline-color: var(--wp--preset--color--rs-blue-accessible);
	outline-offset: -2px;
}

.tcc-nav-panel__desc {
	display: block;
	margin-top: 0.125rem;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
}

/* ─── Header search ───────────────────────────────────────────────────── */
/*
 * The Figma's search: the toggle reads "Search" beside a magnifier, in white
 * at 60% (7.0:1); hovered or open, it is a dark box (white at 8%) with rs-blue
 * text and icon (6.2:1). It opens a band across the foot of the header,
 * deep navy at 95%, whose white card lines up with the end of the header row.
 * Nothing in it moves: the panel appears at once and changes colour at once.
 */
.rs-header-search {
	flex: 0 0 auto;
}

.rs-header-search__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	box-sizing: border-box;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 var(--wp--preset--spacing--2);
	border-radius: var(--wp--custom--recordsure--radius--control);
	color: color-mix(in srgb, var(--wp--preset--color--rs-white) 60%, transparent);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.025em;
	line-height: 1rem;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
}

.rs-header-search__toggle::-webkit-details-marker {
	display: none;
}

.rs-header-search__toggle:hover,
.rs-header-search[open] > .rs-header-search__toggle {
	background: color-mix(in srgb, var(--wp--preset--color--rs-white) 8%, transparent);
	color: var(--wp--preset--color--rs-blue);
}

.rs-header-search__icon {
	display: block;
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
}

/* Where the desktop menu shows, the toggle is the Figma's 34px box. */
@media (min-width: 80rem) {

	.rs-header-search__toggle {
		min-height: 0;
		padding: var(--wp--preset--spacing--2);
	}
}

.rs-header-search__panel {
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	z-index: 150;
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--5);
	padding-inline: max(var(--rs-gutter), calc((100% - var(--wp--style--global--wide-size)) / 2 + var(--rs-gutter)));
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--rs-white) 12%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--rs-navy-deep) 95%, transparent);
	color: var(--wp--preset--color--rs-navy-deep);
}

.rs-header-search:not([open]) .rs-header-search__panel {
	display: none;
}

.rs-header-search__card {
	box-sizing: border-box;
	max-width: 42rem;
	margin-inline-start: auto;
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
	box-shadow: var(--wp--preset--shadow--rs-panel);
}

/* On the white card the focus ring is rs-blue-accessible (5.49:1), not the header's on-navy ring. */
.rs-site-header .rs-header-search__card :is(button, input):focus-visible {
	outline-color: var(--wp--preset--color--rs-blue-accessible);
}

.rs-header-search__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
	margin-block-end: var(--wp--preset--spacing--5);
}

.rs-header-search__intro {
	min-width: 0;
}

/* The Figma's rs-blue label fails on white (2.38:1); rs-blue-accessible reaches 5.49:1. */
.rs-header-search__label {
	display: block;
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1rem;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.rs-header-search__lead {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	overflow-wrap: anywhere;
}

/*
 * The close button keeps a 44px target. Its negative margins put its 16px
 * cross where the Figma's 32px button puts it. The cross is rs-slate-light,
 * 3.83:1 on white, as a control's only content must reach 3:1.
 */
.rs-header-search__close {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: -0.375rem -0.375rem 0 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--recordsure--radius--control);
	background: none;
	color: var(--wp--preset--color--rs-slate-light);
	cursor: pointer;
}

.rs-header-search__close[hidden] {
	display: none;
}

.rs-header-search__close:hover {
	background: var(--wp--preset--color--rs-off-white);
	color: var(--wp--preset--color--rs-navy);
}

.rs-header-search__close-icon {
	display: block;
	width: 1rem;
	height: 1rem;
}

.rs-header-search__form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

.rs-header-search__field {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.rs-header-search__field-icon {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: var(--wp--preset--spacing--4);
	width: 1.25rem;
	height: 1.25rem;
	color: var(--wp--preset--color--rs-slate-light);
	transform: translateY(-50%);
	pointer-events: none;
}

/*
 * The box keeps a compliant rs-slate-light edge (3.83:1 on the white card),
 * where the Figma draws the decorative rs-border, and an rs-disabled-text hint
 * (5.04:1), where the Figma's rs-slate-light hint fails at 3.50:1. Focused,
 * it takes the Figma's rs-blue edge and white fill, inside the shared
 * rs-blue-accessible focus ring.
 */
.rs-header-search__input {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 3rem;
	margin: 0;
	padding-block: 0;
	padding-inline: 3rem var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--rs-slate-light);
	border-radius: var(--wp--custom--recordsure--radius--small-surface);
	background: var(--wp--preset--color--rs-off-white);
	color: var(--wp--preset--color--rs-navy);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	appearance: none;
}

.rs-header-search__input::placeholder {
	color: var(--wp--preset--color--rs-disabled-text);
	opacity: 1;
}

.rs-header-search__input:focus {
	border-color: var(--wp--preset--color--rs-blue);
	background: var(--wp--preset--color--rs-white);
}

.rs-header-search__submit {
	flex: 0 0 auto;
	min-height: 3rem;
	padding: 0 var(--wp--preset--spacing--5);
	border: 0;
	border-radius: var(--wp--custom--recordsure--radius--control);
	background: var(--wp--preset--color--rs-navy);
	color: var(--wp--preset--color--rs-white);
	font: inherit;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1rem;
	cursor: pointer;
}

.rs-header-search__submit:hover {
	background: var(--wp--preset--color--rs-navy-mid);
	color: var(--wp--preset--color--rs-white);
}

.rs-header-search__submit:active {
	background: var(--wp--preset--color--rs-navy-deep);
	color: var(--wp--preset--color--rs-white);
}

@media (min-width: 40rem) {

	.rs-header-search__form {
		flex-direction: row;
	}
}

@media (max-width: 40rem) {

	.rs-header-search__card {
		padding: var(--wp--preset--spacing--5);
	}
}

/* ─── Header call to action ────────────────────────────────────────────── */
.tcc-header-cta,
.tcc-header-cta:visited {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 var(--wp--preset--spacing--5);
	border-radius: var(--wp--custom--recordsure--radius--control);
	background: var(--wp--preset--color--rs-blue-light);
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1rem;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out),
		transform var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out);
}

.tcc-header-cta:hover {
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-navy-deep);
}

.tcc-header-cta:active {
	background: var(--wp--preset--color--rs-blue-on-navy);
	color: var(--wp--preset--color--rs-navy-deep);
	transform: scale(0.97);
}

/* ─── Mobile navigation ────────────────────────────────────────────────── */
.tcc-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 0.375rem;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.5rem;
	border: 0;
	border-radius: var(--wp--custom--recordsure--radius--control);
	background: none;
	cursor: pointer;
}

.tcc-burger-bar {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: var(--wp--custom--recordsure--radius--pill);
	background: var(--wp--preset--color--rs-white);
	transform-origin: center;
	transition:
		transform var(--wp--custom--recordsure--motion--dropdown) var(--wp--custom--recordsure--motion--ease-in-out),
		opacity var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out);
}

.tcc-burger[aria-expanded="true"] .tcc-burger-bar:nth-child(1) {
	transform: translateY(0.5rem) rotate(45deg);
}

.tcc-burger[aria-expanded="true"] .tcc-burger-bar:nth-child(2) {
	opacity: 0;
}

.tcc-burger[aria-expanded="true"] .tcc-burger-bar:nth-child(3) {
	transform: translateY(-0.5rem) rotate(-45deg);
}

.tcc-mobile-nav {
	display: none;
	max-height: calc(100vh - 4.5rem);
	overflow-y: auto;
	background: var(--wp--preset--color--rs-navy-deep);
	border-top: 1px solid var(--wp--preset--color--rs-slate-light);
}

.tcc-mobile-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcc-mobile-nav__list > li {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--wp--preset--color--rs-slate-light);
}

/* The drawer's labels start on the header's content edge, in its gutter. */
.tcc-mobile-accordion-btn,
.tcc-mobile-nav__direct,
.tcc-mobile-nav__direct:visited,
a.tcc-mobile-accordion-btn:visited {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: var(--wp--preset--spacing--3) var(--rs-gutter);
	border: 0;
	background: none;
	color: var(--wp--preset--color--rs-white);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.tcc-mobile-accordion-btn--toggle {
	flex: 0 0 auto;
	justify-content: center;
	min-width: 2.75rem;
	padding-inline: var(--wp--preset--spacing--4);
	border-inline-start: 1px solid var(--wp--preset--color--rs-slate-light);
}

/* The drawer's top-level labels take the desktop menu's Title case. */
.tcc-mobile-nav__list > li > :is(.tcc-mobile-accordion-btn:not(.tcc-mobile-accordion-btn--toggle), .tcc-mobile-nav__direct) {
	text-transform: capitalize;
}

.tcc-mobile-nav__direct:hover,
a.tcc-mobile-accordion-btn:hover,
button.tcc-mobile-accordion-btn:hover {
	color: var(--wp--preset--color--rs-blue-on-navy);
}

.tcc-mobile-submenu {
	flex: 1 1 100%;
	max-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	list-style: none;
	background: var(--wp--preset--color--rs-navy);
	transition:
		max-height var(--wp--custom--recordsure--motion--dropdown) var(--wp--custom--recordsure--motion--ease-drawer),
		visibility 0s linear var(--wp--custom--recordsure--motion--dropdown);
}

.tcc-mobile-submenu.is-open {
	max-height: 40rem;
	visibility: visible;
	transition-delay: 0s;
}

.tcc-mobile-submenu a,
.tcc-mobile-submenu a:visited {
	display: block;
	min-height: 2.75rem;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--3) var(--rs-gutter) var(--wp--preset--spacing--3) calc(var(--rs-gutter) + var(--wp--preset--spacing--4));
	color: var(--wp--preset--color--rs-white);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
}

.tcc-mobile-submenu a:hover {
	color: var(--wp--preset--color--rs-blue-on-navy);
	text-decoration: underline;
}

/* ─── Main content ─────────────────────────────────────────────────────── */
.rs-main {
	padding-block: var(--wp--preset--spacing--16) var(--wp--preset--spacing--20);
}

.rs-main > :first-child {
	margin-block-start: 0;
}

/* The Figma sets emphasis in copy semibold; classed text keeps its own weight. */
:where(.rs-main) :where(strong, b) {
	font-weight: 600;
}

.rs-page-title {
	margin-block-end: var(--wp--preset--spacing--8);
}

/*
 * The generic templates (page, post, archive, index, search and not found)
 * have no Figma design, so their titles step like its simplest page title,
 * the policy hero's: 36px, then 48px from 64rem.
 */
@media (min-width: 64rem) {

	.rs-main > h1 {
		font-size: var(--wp--preset--font-size--display);
	}
}

/*
 * Prose link states. Component links that paint their own fill (the featured
 * technology card button and the dark link tiles) are excluded, because navy
 * visited or active text would vanish against their navy fills.
 */
.rs-main a:where(:not(.wp-element-button, .rs-button, .rs-featured-tech-card__link, .rs-link-tile__link)):visited {
	color: var(--wp--preset--color--rs-navy-mid);
}

.rs-main a:where(:not(.wp-element-button, .rs-button, .rs-featured-tech-card__link, .rs-link-tile__link)):active {
	color: var(--wp--preset--color--rs-navy-deep);
}

.rs-meta,
.rs-card__meta {
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--sm);
}

.rs-query .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: var(--wp--preset--spacing--6);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A card never takes the flow layout's block gap, which would stagger it
   against the rest of its row, and fills its row's height. */
.rs-query .wp-block-post-template > * {
	margin-block: 0;
}

.rs-query .rs-card {
	box-sizing: border-box;
	height: 100%;
}

.rs-card {
	min-width: 0;
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
}

.rs-card > * {
	margin-block: 0;
}

.rs-card > * + * {
	margin-block-start: var(--wp--preset--spacing--3);
}

.rs-card__title {
	font-size: var(--wp--preset--font-size--lg);
	overflow-wrap: anywhere;
}

.rs-card__title a,
.rs-card__title a:visited {
	color: var(--wp--preset--color--rs-navy-deep);
	text-decoration: none;
}

.rs-card__title a:hover {
	text-decoration: underline;
}

.rs-search-form .wp-block-search__input {
	min-height: 2.75rem;
	padding: 0 var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--rs-slate-light);
	border-radius: var(--wp--custom--recordsure--radius--control);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-navy-deep);
	font: inherit;
}

.rs-search-form .wp-block-search__button {
	min-height: 2.75rem;
}

.rs-search-count {
	margin-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--rs-slate);
	font-weight: 600;
}

.rs-search-notice {
	margin-block: 0 var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--sm);
}

.rs-search-results {
	display: grid;
	gap: var(--wp--preset--spacing--5);
}

.rs-search-result {
	min-width: 0;
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
}

.rs-search-result > * {
	margin-block: 0;
}

.rs-search-result > * + * {
	margin-block-start: var(--wp--preset--spacing--3);
}

.rs-search-result__meta {
	color: var(--wp--preset--color--rs-blue-strong);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

.rs-search-result__title {
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.rs-search-result__title a,
.rs-search-result__title a:visited {
	color: var(--wp--preset--color--rs-navy-deep);
	text-decoration: none;
}

.rs-search-result__title a:hover {
	text-decoration: underline;
}

.rs-search-result__excerpt,
.rs-search-state {
	color: var(--wp--preset--color--rs-slate);
}

.rs-search-state {
	margin-block-start: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-off-white);
}

.rs-search-state > * {
	margin-block: 0;
}

.rs-search-state > * + * {
	margin-block-start: var(--wp--preset--spacing--3);
}

.rs-search-pagination {
	margin-block-start: var(--wp--preset--spacing--8);
}

.rs-search-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-search-pagination a,
.rs-search-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: var(--wp--preset--spacing--3);
	border-radius: var(--wp--custom--recordsure--radius--control);
}

.rs-search-pagination a {
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-blue-accessible);
	font-weight: 700;
}

.rs-search-pagination .current {
	background: var(--wp--preset--color--rs-navy-deep);
	color: var(--wp--preset--color--rs-white);
	font-weight: 700;
}

/* ─── Generic templates ────────────────────────────────────────────────── */
/*
 * The page, post, archive, index, search results and not found templates
 * have no Figma design, so they take the container every band uses (the
 * operator's decision on 16 October 2026). Their main is a flow layout that
 * runs edge to edge, and each of its blocks starts on the container's line:
 * --rs-content-start is that line's distance from an edge-to-edge parent, the
 * container's centring plus the gutter. Every block spans the container,
 * text included: plain pages set their text across the full content width,
 * not a 46rem reading measure (the operator's follow-up decision of
 * 16 October 2026). The post's content runs edge to edge as well, so each of
 * its blocks does the same, and a full block runs edge to edge. The review
 * bar is a band like any other.
 */
.rs-main--generic {
	--rs-content-start: max(var(--rs-gutter), calc((100% - var(--wp--style--global--wide-size)) / 2 + var(--rs-gutter)));
	overflow-wrap: break-word;
}

.rs-main--generic > *,
.rs-main--generic > .wp-block-post-content > * {
	box-sizing: border-box;
	margin-inline: var(--rs-content-start);
}

.rs-main--generic > :is(.wp-block-post-content, .rs-governance),
.rs-main--generic > .wp-block-post-content > .alignfull {
	margin-inline: 0;
}

/* A block the post's content holds never leaves the container, even one that
   floats, centres itself or sizes to its own content, such as a table. */
.rs-main--generic > .wp-block-post-content > :not(.alignwide, .alignfull) {
	max-width: calc(100% - 2 * var(--rs-content-start));
}

/* Floated blocks sit on the container's edges, beside the text they float
   in. A centred block centres in the container: WordPress's important auto
   margins centre it in the post's edge-to-edge content, whose centre is the
   container's. */
.rs-main--generic > .wp-block-post-content > .alignleft {
	margin-inline: var(--rs-content-start) var(--wp--preset--spacing--6);
}

.rs-main--generic > .wp-block-post-content > .alignright {
	margin-inline: var(--wp--preset--spacing--6) var(--rs-content-start);
}

/* The text reads at the relaxed leading of the Figma's article and policy
   text, and the content holds its floats, so a floated block never runs into
   the review bar. A heading opens its part, with more space above it than
   below. */
.rs-main--generic > .wp-block-post-content {
	display: flow-root;
	line-height: 1.625;
}

.rs-main--generic > .wp-block-post-content > :is(h2, h3, h4, h5, h6):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--12);
}

.rs-main--generic > .wp-block-post-content > :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: var(--wp--preset--spacing--4);
}

.rs-main--generic > .wp-block-post-content :where(ul, ol) {
	padding-inline-start: var(--wp--preset--spacing--6);
}

.rs-main--generic > .wp-block-post-content li + li {
	margin-block-start: var(--wp--preset--spacing--2);
}

/* A quote reads as the singles' article quotes do: navy on the off-white
   tint (13.99:1), behind a decorative accessible blue rule, its citation
   in slate (10.68:1). */
.rs-main--generic > .wp-block-post-content > blockquote {
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
	border-inline-start: 4px solid var(--wp--preset--color--rs-blue-accessible);
	border-radius: 0 var(--wp--custom--recordsure--radius--card) var(--wp--custom--recordsure--radius--card) 0;
	background: var(--wp--preset--color--rs-off-white);
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
}

.rs-main--generic > .wp-block-post-content > blockquote > * {
	margin-block: 0;
}

.rs-main--generic > .wp-block-post-content > blockquote > * + * {
	margin-block-start: var(--wp--preset--spacing--3);
}

.rs-main--generic > .wp-block-post-content > blockquote cite {
	display: block;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--sm);
	font-style: normal;
	font-weight: 600;
}

.rs-main--generic > .wp-block-post-content :where(img, video) {
	max-width: 100%;
	height: auto;
}

.rs-main--generic > .wp-block-post-content pre {
	overflow-x: auto;
}

/* The review bar meets the footer, as on every other page, after the gap
   the main would otherwise leave below its content. */
.rs-main--generic > .rs-governance {
	margin-block-start: var(--wp--preset--spacing--20);
}

.rs-main.rs-main--generic:has(> .rs-governance:last-child) {
	padding-block-end: 0;
}

/* ─── Footer ───────────────────────────────────────────────────────────── */
footer.wp-block-template-part {
	margin-block-start: 0;
}

.rs-site-footer {
	background: var(--wp--preset--color--rs-navy-deep);
	color: var(--wp--preset--color--rs-white);
}

.rs-footer-inner {
	display: grid;
	gap: var(--wp--preset--spacing--8);
	padding-block: var(--wp--preset--spacing--10);
}

.rs-footer-inner > *,
.rs-site-footer > * {
	margin-block: 0;
}

.rs-site-footer a:where(:not(.rs-button)),
.rs-site-footer a:where(:not(.rs-button)):visited {
	color: var(--wp--preset--color--rs-off-white);
	text-decoration: none;
}

.rs-site-footer a:where(:not(.rs-button)):hover {
	color: var(--wp--preset--color--rs-blue-on-navy);
	text-decoration: underline;
}

.rs-site-footer a:where(:not(.rs-button)):active {
	color: var(--wp--preset--color--rs-blue-light);
}

/*
 * The closing call to action is a compact, discreet band (the operator's
 * request on 15 October 2026): 20px by 24px padding, 12px corners and an
 * 18px heading, 20px from 64rem, where the Figma's is 24px and 30px.
 */
.rs-footer-cta-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-navy-mid);
}

.rs-footer-cta-band__heading {
	flex: 1 1 18rem;
	margin: 0;
	color: var(--wp--preset--color--rs-white);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 1.25;
}

.tcc-footer-brand {
	display: grid;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	min-width: 0;
	max-width: 46rem;
}

.tcc-footer-brand__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 12rem;
	max-height: 2.5rem;
}

.rs-footer-brand__home {
	justify-self: start;
}

/* The footer's text is set a step smaller than the Figma's (the operator's
   request on 15 October 2026): the description and links take 12px. */
.rs-footer-brand__description {
	margin: 0;
	color: var(--wp--preset--color--rs-off-white);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.625;
}

.tcc-footer-brand__tagline {
	margin: 0;
	color: var(--wp--preset--color--rs-blue-light);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
}

.rs-footer-cta {
	margin: 0;
}

/* --rs-footer-column-gap is the space between the desktop footer columns:
   8rem, double the earlier 4rem (the operator's request on 16 October 2026). */
.rs-footer-nav {
	--rs-footer-column-gap: calc(2 * var(--wp--preset--spacing--16));
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--6);
}

.rs-footer-colstack {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--6);
	min-width: 0;
}

/* WordPress's flow layout gives every child but the first a block-gap top
   margin; footer grid cells and stacked columns must start level. */
.rs-footer-cols > *,
.rs-footer-colstack > * {
	margin-block: 0;
}

.rs-trusted-by {
	display: grid;
	gap: var(--wp--preset--spacing--4);
}

.rs-trusted-by--overview {
	margin-block-start: var(--wp--preset--spacing--8);
	padding-block-start: var(--wp--preset--spacing--6);
	border-top: 1px solid var(--wp--preset--color--rs-border);
}

/*
 * The homepage strip is its own compact band, contained like its neighbours.
 * Two classes outrank the later base and desktop `.rs-band` padding.
 */
.rs-band.rs-home-trusted {
	padding-block: var(--wp--preset--spacing--10);
}

.rs-trusted-by--footer {
	padding-block-end: var(--wp--preset--spacing--2);
	border-bottom: 1px solid var(--wp--preset--color--rs-slate-light);
}

.rs-trusted-by__heading {
	margin: 0;
}

/* On the deep navy footer the label takes the footer headings' rs-blue (7.59:1);
   the light-surface eyebrow blue reaches only 3.29:1 there. */
.rs-trusted-by--footer .rs-trusted-by__heading {
	color: var(--wp--preset--color--rs-blue);
}

.rs-trusted-by__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Every tiled placement shows the logos on navy tiles: the supplied client
 * logos are light artwork for dark backgrounds, so a white tile would hide
 * them. A logo with no link uses the same tile as a linked one. The single
 * track is bounded by the tile, so a wide logo shrinks instead of spilling
 * past the tile's padding and border. The tile's edge is the decorative
 * rs-border every tile takes: its navy fill sets it off the light band, and
 * the organisation's name, as alt text or link name, identifies it.
 */
.rs-trusted-by__mark {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	place-items: center;
	min-height: 4.5rem;
	padding: var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-navy);
}

.rs-trusted-by__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, 8.5rem);
	max-height: 2.75rem;
	object-fit: contain;
}

/*
 * The footer follows the Figma's plain logo row on the deep navy footer: no
 * tiles, logos 1.75rem tall, wrapping with 1.5rem by 2.5rem gaps. Each logo
 * shows as supplied, at full opacity with no filter: the Figma's half-opacity
 * dimming is not wanted (the operator's decision on 15 October 2026). Each
 * item and logo stays within the row, so an unusually wide logo scales down
 * inside its box instead of widening the page. A linked logo shows the
 * shared focus ring.
 */
.rs-trusted-by--footer .rs-trusted-by__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--6) var(--wp--preset--spacing--10);
}

.rs-trusted-by--footer .rs-trusted-by__item {
	min-width: 0;
	max-width: 100%;
}

.rs-trusted-by--footer .rs-trusted-by__mark {
	display: block;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* A linked logo keeps a 2.75rem (44px) hit area centred on its 1.75rem image. */
.rs-trusted-by--footer .rs-trusted-by__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	max-width: 100%;
	min-height: 2.75rem;
}

.rs-trusted-by--footer .rs-trusted-by__logo {
	min-width: 0;
	height: 1.75rem;
	max-width: 100%;
	max-height: none;
}

/*
 * Light-band logos (Appearance → Recordsure Trust → Light-band logos) are
 * artwork made for a white background, so the light bands show them as
 * supplied, with no tile, border or background (the operator's feedback on
 * 16 October 2026), as the Figma's Technology and sector strips draw them:
 * 1.5rem tall, in rows 1.5rem apart with 2rem between logos. From 80rem the
 * row spreads across the container on one line, ten logos included; below it
 * the row wraps. A linked logo keeps a 2.75rem (44px) hit area. The shared
 * list a light band falls back to while this one is empty keeps its navy
 * tiles above, and the footer keeps its own row.
 */
.rs-trusted-by--plain .rs-trusted-by__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--6) var(--wp--preset--spacing--8);
}

.rs-trusted-by--plain .rs-trusted-by__item {
	min-width: 0;
	max-width: 100%;
}

.rs-trusted-by--plain .rs-trusted-by__mark {
	display: block;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.rs-trusted-by--plain .rs-trusted-by__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	max-width: 100%;
	min-height: 2.75rem;
}

.rs-trusted-by--plain .rs-trusted-by__logo {
	min-width: 0;
	height: 1.5rem;
	max-width: 100%;
	max-height: none;
}

@media (min-width: 80rem) {

	.rs-trusted-by--plain .rs-trusted-by__list {
		flex-wrap: nowrap;
		justify-content: space-between;
	}
}

.rs-footer-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--rs-slate-light);
	border-radius: var(--wp--custom--recordsure--radius--panel);
	list-style: none;
}

.rs-footer-trust__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	min-width: 0;
	color: var(--wp--preset--color--rs-white);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1rem;
	overflow-wrap: anywhere;
}

.rs-footer-trust__icon {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--wp--preset--color--rs-blue-on-navy);
	border-radius: var(--wp--custom--recordsure--radius--pill);
	color: var(--wp--preset--color--rs-blue-on-navy);
}

.rs-footer-trust__icon:empty::before {
	content: "\2713";
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	line-height: 1;
}

.rs-footer-trust__icon-image {
	display: block;
	width: 1rem;
	height: 1rem;
	object-fit: contain;
}

.tcc-footer-col {
	min-width: 0;
}

.tcc-footer-col__heading {
	margin: 0 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--rs-blue);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1rem;
	text-transform: uppercase;
}

/* Compact link lists: 12px links in 24px rows, 4px apart. */
.tcc-footer-menu {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcc-footer-menu a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	padding-block: 0.125rem;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.25rem;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.tcc-footer-menu a[aria-current="page"],
.tcc-footer-menu a.is-current {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

@media (max-width: 40rem) {

	.tcc-footer-menu a {
		min-height: 2.75rem;
	}
}

.tcc-footer-menu__icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	color: currentColor;
	vertical-align: -0.16em;
}

/* No rule divides the legal row from the trust bar (the operator's request on
   15 October 2026); the footer grid's gap separates them. */
.rs-footer-legal {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--rs-off-white);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
}

.rs-footer-legal__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--8);
}

.rs-footer-legal p {
	margin: 0;
}

.rs-footer-legal__copyright {
	flex: 1 1 16rem;
}

/* The company statement is the quietest line: white at 55%, 6.05:1 on the
   footer, at the 12px floor. */
.rs-footer-legal__entity {
	max-width: 72rem;
	color: color-mix(in srgb, var(--wp--preset--color--rs-white) 55%, transparent);
}

.rs-footer-legal__policy {
	flex: 0 1 auto;
}

.rs-footer-legal__policy ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 64rem) {

	.rs-footer-cta-band__heading {
		font-size: var(--wp--preset--font-size--lg);
	}

	/*
	 * The three columns take their content's width rather than spreading
	 * across the footer (the operator's request on 15 October 2026), with
	 * --rs-footer-column-gap between them. The gaps are the grid's second and
	 * fourth tracks: flexible, at least the earlier 4rem, and sized only once
	 * every column has its content's width. A longer menu therefore narrows
	 * both gaps equally, down to 4rem, before any link wraps, and below that
	 * the columns share the width exactly as they did with 4rem gaps. The nav
	 * takes its content's width, which the empty marker in each gap track
	 * (as wide as the gap, never wider than its track) makes include both
	 * gaps. The markers hold the gap tracks, so the cells fill the first,
	 * third and fifth in order; without Sectors, the About stack keeps the
	 * fifth, the third cell.
	 */
	.rs-footer-nav {
		grid-template-columns: minmax(0, max-content) repeat(2, minmax(var(--wp--preset--spacing--16), 1fr) minmax(0, max-content));
		gap: var(--wp--preset--spacing--6) 0;
		max-width: max-content;
	}

	.rs-footer-nav::before,
	.rs-footer-nav::after {
		content: "";
		grid-row: 1;
		grid-column: 2;
		width: var(--rs-footer-column-gap);
		max-width: 100%;
	}

	.rs-footer-nav::after {
		grid-column: 4;
	}

	.rs-footer-cols > .rs-footer-colstack:last-child:nth-child(2) {
		grid-column: 5;
	}
}

@media (max-width: 40rem) {

	.rs-footer-cta-band {
		padding: var(--wp--preset--spacing--5);
	}

	.rs-footer-legal__policy ul {
		gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	}
}

/* ─── Consent platform ─────────────────────────────────────────────────── */
/* The shared consent UI falls back to system colours; these map it onto the
   light-surface pairs in the brand contrast matrix. */
:root {
	--tcc-consent-bg: var(--wp--preset--color--rs-white);
	--tcc-consent-text: var(--wp--preset--color--rs-navy-deep);
	--tcc-consent-muted: var(--wp--preset--color--rs-slate);
	--tcc-consent-border: var(--wp--preset--color--rs-slate-light);
	--tcc-consent-primary: var(--wp--preset--color--rs-navy-deep);
	--tcc-consent-primary-hover: var(--wp--preset--color--rs-navy-mid);
	--tcc-consent-primary-text: var(--wp--preset--color--rs-white);
	--tcc-consent-secondary: transparent;
	--tcc-consent-secondary-border: var(--wp--preset--color--rs-slate-light);
	--tcc-consent-secondary-text: var(--wp--preset--color--rs-navy-deep);
	--tcc-consent-secondary-hover-bg: var(--wp--preset--color--rs-blue-light);
	--tcc-consent-shadow: var(--wp--preset--shadow--rs-panel);
	--tcc-consent-banner-shadow: var(--wp--preset--shadow--rs-panel);
	--tcc-consent-toggle-on: var(--wp--preset--color--rs-blue-accessible);
	--tcc-consent-toggle-off: var(--wp--preset--color--rs-slate-light);
	--tcc-consent-toggle-knob: var(--wp--preset--color--rs-white);
	--tcc-consent-toggle-shadow: var(--wp--preset--shadow--rs-card);
	--tcc-consent-overlay: color-mix(in srgb, var(--wp--preset--color--rs-navy-deep) 58%, transparent);
	--tcc-consent-page-wash: color-mix(in srgb, var(--wp--preset--color--rs-slate) 64%, transparent);
	--tcc-consent-badge-bg: var(--wp--preset--color--rs-blue-light);
	--tcc-consent-badge-text: var(--wp--preset--color--rs-blue-strong);
	--tcc-consent-font: var(--wp--preset--font-family--plus-jakarta-sans);
}

.tcc-consent-banner {
	border-top: 4px solid var(--wp--preset--color--rs-blue-accessible);
}

.tcc-consent-banner .tcc-consent-banner__desc a {
	color: var(--wp--preset--color--rs-blue-accessible);
}

.tcc-consent-banner .tcc-consent-banner__desc a:visited {
	color: var(--wp--preset--color--rs-navy-mid);
}

.tcc-consent-banner .tcc-consent-banner__desc a:hover {
	color: var(--wp--preset--color--rs-blue-strong);
}

/* Each consent service is named at the Figma's 14px, in the cookie policy's
   inline manager and in the preferences dialog, which renders from the
   footer outside the page. Two classes outrank the plugin's one-class rule
   wherever it prints. */
.tcc-consent-service .tcc-consent-service__label {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
}

/* The provenance badge on AI-generated images is the plugin's 10px; no
   Recordsure text is set below 12px. Its style is enqueued after the theme's,
   so the rule is scoped to outrank it. */
.wp-site-blocks .tcc-ai-badge {
	font-size: var(--wp--preset--font-size--xs);
}

/* ─── Guided pages ─────────────────────────────────────────────────────── */
/* Guided pages draw their own full-width bands, each with a constrained inner
   container, so the main landmark adds no padding, and no block gap above the
   hero, of its own. */
.rs-main.rs-main--guided {
	margin-block-start: 0;
	padding-block: 0;
}

/* The last band meets the review bar, and the review bar the footer, as on
   the Figma's pages: WordPress's flow layout would otherwise put its block gap
   above the review bar, a strip of page colour under the last band (the
   operator's report on 16 October 2026). */
.rs-main.rs-main--guided > * {
	margin-block: 0;
}

/* Other templates that open with a full-width hero band start it flush under
   the site header too: the People route's Meet the team page, the case study
   and insight indexes, and the case study and insight singles. Otherwise the
   block gap above main, and the main padding meant for templates that open
   with white content, show as a strip of page colour between the header and
   the hero. Templates that open with white content (search, not found, page,
   archive and People profiles) keep that spacing. */
.wp-site-blocks > .tcc-people-main:has(> .rs-page:first-child),
.wp-site-blocks > .rs-main.rs-main--collection,
.wp-site-blocks > .rs-main.rs-main--case-study,
.wp-site-blocks > .rs-main.rs-main--insight {
	margin-block-start: 0;
}

/* They end with their white governance bar above the footer too, as guided
   pages do, not with a strip of the off-white main background. */
.rs-main.rs-main--collection,
.rs-main.rs-main--case-study,
.rs-main.rs-main--insight {
	padding-block: 0;
}

.rs-page {
	color: var(--wp--preset--color--rs-slate);
}

.rs-band {
	padding-block: var(--wp--preset--spacing--20);
}

.rs-band--white {
	background: var(--wp--preset--color--rs-white);
}

.rs-band--off-white {
	background: var(--wp--preset--color--rs-off-white);
}

.rs-band--blue-light {
	background: var(--wp--preset--color--rs-blue-light);
}

/* The Knowledge centre band on the Sectors and outcome pages takes the Figma's
   pale sky, rs-sky (its rs-blue at 15% on white, the operator's value on
   16 October 2026), and its insight cards an rs-blue-light outline. The
   outline is decorative: each card is named by its title and its link. */
.rs-band--sky {
	background: var(--wp--preset--color--rs-sky);
}

.rs-band--sky .rs-insight-card {
	border-color: var(--wp--preset--color--rs-blue-light);
}

.rs-band--navy-deep {
	background: var(--wp--preset--color--rs-navy-deep);
	color: var(--wp--preset--color--rs-white);
}

.rs-band--navy {
	background: var(--wp--preset--color--rs-navy);
	color: var(--wp--preset--color--rs-white);
}

/* Section separators, as the approved designs draw them. On an inner page
   every light band has a hairline top border, except the band after the
   in-page menu, which draws its own; on the homepage only a light band that
   follows one of the same colour has one. Dark bands carry none. The lines
   are decorative: each band's own heading names it. */
.rs-page:not(.rs-page--home) > :not(.rs-anchor-nav) + .rs-band:not(.rs-band--navy):not(.rs-band--navy-deep),
.rs-page--home > .rs-band--white + .rs-band--white,
.rs-page--home > .rs-band--off-white + .rs-band--off-white,
.rs-page--home > .rs-band--blue-light + .rs-band--blue-light {
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
}

.rs-band--navy-deep :where(a, button, summary):focus-visible,
.rs-band--navy :where(a, button, summary):focus-visible,
.rs-hero--dark :where(a, button, summary):focus-visible,
.rs-home-trust__panel :where(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--rs-blue-on-navy);
}

:where(.rs-pillar, .rs-challenge, .rs-text-card, .rs-evidence-item, .rs-icon-card, .rs-feature-card__body) p {
	margin: var(--wp--preset--spacing--3) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
}

.rs-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1rem;
	text-transform: uppercase;
}

.rs-band--navy-deep .rs-eyebrow,
.rs-band--navy .rs-eyebrow,
.rs-hero--dark .rs-eyebrow,
.rs-home-trust__panel .rs-eyebrow {
	color: var(--wp--preset--color--rs-blue-on-navy);
}

.rs-band--blue-light .rs-eyebrow,
.rs-band--sky .rs-eyebrow {
	color: var(--wp--preset--color--rs-blue-strong);
}

.rs-arrow::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: var(--wp--preset--spacing--2);
}

.rs-chip {
	display: inline-block;
	margin: 0;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	border-radius: var(--wp--custom--recordsure--radius--control);
	background: var(--wp--preset--color--rs-blue);
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1rem;
}

.rs-button--primary,
.rs-button--primary:visited {
	background: var(--wp--preset--color--rs-navy-deep);
	color: var(--wp--preset--color--rs-white);
}

.rs-button--primary:hover {
	background: var(--wp--preset--color--rs-navy-mid);
	color: var(--wp--preset--color--rs-white);
}

.rs-button--primary:active {
	background: var(--wp--preset--color--rs-navy);
	color: var(--wp--preset--color--rs-white);
}

.rs-button--secondary,
.rs-button--secondary:visited {
	border-color: var(--wp--preset--color--rs-slate-light);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-navy-deep);
}

.rs-button--secondary:hover {
	border-color: var(--wp--preset--color--rs-blue-accessible);
	background: var(--wp--preset--color--rs-blue-light);
	color: var(--wp--preset--color--rs-navy-deep);
}

.rs-button--secondary:active {
	background: var(--wp--preset--color--rs-off-white);
	color: var(--wp--preset--color--rs-navy);
}

.rs-page .rs-text-link {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.25rem;
	text-decoration: none;
}

/* Card actions on the Technology pages and the sector outcome cards are 12px in the Figma. */
.rs-page--technology .rs-insight-card__action .rs-text-link,
.rs-icon-card__action .rs-text-link {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
}

.rs-page .rs-text-link:hover {
	color: var(--wp--preset--color--rs-blue-strong);
	text-decoration: underline;
}

/* Section heads */
.rs-section-head {
	margin-block-end: var(--wp--preset--spacing--12);
}

.rs-section-head__heading {
	margin: 0;
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.rs-section-head__title,
.rs-section-head__intro {
	min-width: 0;
}

.rs-section-head__intro {
	max-width: 46rem;
	margin-block-start: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

/*
 * Section headings are 30px, then 36px from 64rem, as in the Figma. The
 * sections below set them, or their introductions, differently there.
 */
.rs-page--home .rs-section-head__heading {
	font-weight: 600;
}

.rs-page--home .rs-home-steps .rs-section-head__heading,
.rs-page--home .rs-home-sectors .rs-section-head__heading {
	font-weight: 700;
}

.rs-page--home .rs-home-steps .rs-eyebrow {
	font-weight: 700;
}

.rs-page--home :is(.rs-home-outcomes, .rs-home-audiences, .rs-home-steps, .rs-home-cases) .rs-section-head__heading,
.rs-page--technology .rs-audiences .rs-section-head__heading {
	line-height: 2.25rem;
}

.rs-home-trust__panel .rs-section-head__heading,
.rs-page--technology .rs-insights-band .rs-section-head__heading,
.rs-related-outcomes .rs-section-head__heading {
	font-size: var(--wp--preset--font-size--xl);
}

.rs-contact-form .rs-section-head__heading {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 2rem;
}

.rs-page--home .rs-home-steps .rs-section-head__intro {
	font-size: var(--wp--preset--font-size--md);
}

.rs-page--technology .rs-audiences .rs-section-head__intro {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.75rem;
}

.rs-page--technology .rs-related .rs-section-head__intro {
	font-size: var(--wp--preset--font-size--sm);
}

.rs-contact-form .rs-section-head__intro {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
}

@media (min-width: 64rem) {

	.rs-section-head__heading {
		font-size: var(--wp--preset--font-size--xxxl);
	}

	.rs-page--home :is(.rs-home-outcomes, .rs-home-audiences, .rs-home-steps, .rs-home-cases) .rs-section-head__heading,
	.rs-page--technology .rs-audiences .rs-section-head__heading {
		line-height: 2.5rem;
	}

	.rs-home-trust__panel .rs-section-head__heading,
	.rs-page--technology .rs-insights-band .rs-section-head__heading,
	.rs-related-outcomes .rs-section-head__heading,
	.rs-page--home .rs-faq-band .rs-section-head__heading {
		font-size: var(--wp--preset--font-size--xxl);
	}

	.rs-page--home .rs-home-steps .rs-section-head__intro {
		font-size: var(--wp--preset--font-size--lg);
	}
}

.rs-section-head__intro > * {
	margin-block: 0;
}

.rs-section-head__intro > * + * {
	margin-block-start: var(--wp--preset--spacing--4);
}

.rs-band--navy-deep .rs-section-head__heading,
.rs-band--navy-deep .rs-section-head__intro,
.rs-band--navy .rs-section-head__heading,
.rs-band--navy .rs-section-head__intro,
.rs-home-trust__panel .rs-section-head__heading,
.rs-home-trust__panel .rs-section-head__intro {
	color: var(--wp--preset--color--rs-white);
}

/* Links in rich text on a dark surface keep on-navy contrast whether visited, hovered or pressed. */
.rs-hero--dark .rs-hero__lead a:is(:link, :visited),
.rs-band--navy-deep .rs-section-head__intro a:is(:link, :visited),
.rs-band--navy .rs-section-head__intro a:is(:link, :visited),
.rs-home-trust__panel .rs-section-head__intro a:is(:link, :visited),
.rs-band--navy-deep .rs-cta-band__content a:where(:not(.wp-element-button, .rs-button, .rs-page-tile__link)):is(:link, :visited) {
	color: var(--wp--preset--color--rs-blue-on-navy);
}

/*
 * Hero rhythm, from the Figma. Every hero band shares these steps: its page
 * trail starts 32px below the site header (40px from 64rem), the eyebrow 40px
 * below the trail and the headline 20px below the eyebrow. The copy after the
 * headline follows 24px below it and the buttons 40px below the copy, and the
 * band ends 80px below its content (112px from 64rem). A template's modifier
 * changes only the steps its Figma changes. The case study and insight index
 * hero shares no other hero rule, so it takes the same properties here.
 */
.rs-hero,
.rs-main--collection .tcc-hero {
	--rs-hero-start: var(--wp--preset--spacing--8);
	--rs-hero-trail-gap: var(--wp--preset--spacing--10);
	--rs-hero-eyebrow-gap: var(--wp--preset--spacing--5);
	--rs-hero-heading-gap: var(--wp--preset--spacing--6);
	--rs-hero-action-gap: var(--wp--preset--spacing--10);
	--rs-hero-end: var(--wp--preset--spacing--20);
}

@media (min-width: 64rem) {

	.rs-hero,
	.rs-main--collection .tcc-hero {
		--rs-hero-start: var(--wp--preset--spacing--10);
		--rs-hero-end: var(--wp--preset--spacing--28);
	}
}

/* Hero */
.rs-hero {
	border-block-end: 1px solid var(--wp--preset--color--rs-border);
	background: var(--wp--preset--color--rs-off-white);
}

.rs-hero__inner {
	display: grid;
	gap: var(--wp--preset--spacing--12);
	align-items: center;
	padding-block: var(--rs-hero-start) var(--rs-hero-end);
}

.rs-hero__text,
.rs-hero__media {
	min-width: 0;
}

.rs-hero__text > * {
	margin-block: 0;
}

.rs-hero__text > * + * {
	margin-block-start: var(--wp--preset--spacing--6);
}

/* The trail's gap is its own bottom margin, so it holds when the copy below
   it is centred from 64rem. */
.rs-hero__text > .tcc-breadcrumbs {
	margin-block-end: var(--rs-hero-trail-gap);
}

.rs-hero__text > .tcc-breadcrumbs + * {
	margin-block-start: 0;
}

.rs-hero__text > .rs-eyebrow + * {
	margin-block-start: var(--rs-hero-eyebrow-gap);
}

.rs-hero__text > .rs-hero__heading + * {
	margin-block-start: var(--rs-hero-heading-gap);
}

.rs-hero__text > * + .rs-hero__action {
	margin-block-start: var(--rs-hero-action-gap);
}

/*
 * Each template's hero rhythm, where its Figma departs from the shared steps.
 * Outcome copy follows its headline 16px below it, as on three of the four
 * Figma outcome pages (a shared template takes the majority), and a
 * Technology eyebrow starts 56px below the trail from 64rem, its band ending
 * 80px below its content. The sector pages set their trail in a light band of
 * its own, 24px below the header. The homepage has no trail: its copy starts
 * 64px below the header (112px from 64rem) and its band ends 64px below its
 * content (112px from 64rem). The contact band ends 64px below its content
 * (80px from 64rem). Meet the team's copy follows its headline 28px below it.
 */
.rs-page--outcome .rs-hero {
	--rs-hero-heading-gap: var(--wp--preset--spacing--4);
}

.rs-page--sector .rs-hero,
.rs-page--sectors .rs-hero {
	--rs-hero-start: var(--wp--preset--spacing--6);
}

.rs-page--home .rs-hero {
	--rs-hero-start: var(--wp--preset--spacing--16);
	--rs-hero-end: var(--wp--preset--spacing--16);
}

.rs-page--contact .rs-hero {
	--rs-hero-end: var(--wp--preset--spacing--16);
}

.rs-page--team .rs-hero {
	--rs-hero-heading-gap: calc(var(--wp--preset--spacing--5) + var(--wp--preset--spacing--2));
}

/*
 * From 64rem the outcome, TCC Group and homepage heroes also take the Figma's
 * column proportions, 64px apart in the shared container, so every column,
 * and so every picture, is the Figma's own width and their copy centres
 * against a picture as tall as the Figma's.
 */
@media (min-width: 64rem) {

	.rs-page--technology .rs-hero {
		--rs-hero-trail-gap: calc(var(--wp--preset--spacing--10) + var(--wp--preset--spacing--4));
		--rs-hero-end: var(--wp--preset--spacing--20);
	}

	.rs-page--home .rs-hero {
		--rs-hero-start: var(--wp--preset--spacing--28);
		--rs-hero-end: var(--wp--preset--spacing--28);
		--rs-hero-columns: minmax(0, 1fr) minmax(0, 0.85fr);
		--rs-hero-column-gap: var(--wp--preset--spacing--16);
	}

	.rs-page--contact .rs-hero {
		--rs-hero-end: var(--wp--preset--spacing--20);
	}

	.rs-page--outcome .rs-hero {
		--rs-hero-columns: repeat(2, minmax(0, 1fr));
		--rs-hero-column-gap: var(--wp--preset--spacing--16);
	}

	.rs-page--group .rs-hero {
		--rs-hero-columns: minmax(0, 1fr) minmax(0, 0.9fr);
		--rs-hero-column-gap: var(--wp--preset--spacing--16);
	}

	.rs-page--team .rs-hero {
		--rs-hero-columns: minmax(0, 1fr);
	}
}

.rs-hero__heading {
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.rs-hero__lead {
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.625;
}

/*
 * Hero type follows each Figma template. The default heading is 36px, then
 * 60px from 64rem, and the lead 18px, then 20px. The Technology heading steps
 * through 48px to 60px from 80rem, the policy and contact headings stop at
 * 48px, and the homepage heading is the Figma's own 48px, 60px from 40rem
 * and 72px from 80rem, with tight tracking.
 */
.rs-page--technology .rs-hero__heading,
.rs-page--contact .rs-hero__heading {
	font-weight: 800;
}

.rs-page--home .rs-hero__heading {
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.rs-page--home .rs-hero__lead {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.375;
}

.rs-page--technology .rs-hero__lead {
	font-weight: 500;
}

.rs-page--group .rs-hero__lead,
.rs-page--contact .rs-hero__lead,
.rs-page--policy .rs-hero__lead {
	font-size: var(--wp--preset--font-size--base);
}

@media (min-width: 40rem) {

	.rs-page--home .rs-hero__heading {
		font-size: var(--wp--preset--font-size--display-lg);
	}
}

@media (min-width: 64rem) {

	.rs-hero__heading {
		font-size: var(--wp--preset--font-size--display-lg);
	}

	.rs-page--technology .rs-hero__heading,
	.rs-page--contact .rs-hero__heading,
	.rs-page--policy .rs-hero__heading {
		font-size: var(--wp--preset--font-size--display);
	}

	.rs-hero__lead {
		font-size: var(--wp--preset--font-size--lg);
	}

	.rs-page--home .rs-hero__lead {
		font-size: var(--wp--preset--font-size--xl);
	}

	.rs-page--technology .rs-hero__lead {
		font-size: var(--wp--preset--font-size--md);
	}

	.rs-page--group .rs-hero__lead,
	.rs-page--contact .rs-hero__lead,
	.rs-page--policy .rs-hero__lead {
		font-size: var(--wp--preset--font-size--base);
	}
}

@media (min-width: 80rem) {

	.rs-page--technology .rs-hero__heading {
		font-size: var(--wp--preset--font-size--display-lg);
	}

	/* The Figma's arbitrary text-[4.5rem], which no preset matches. */
	.rs-page--home .rs-hero__heading {
		font-size: 4.5rem;
	}
}

.rs-hero__lead > * {
	margin-block: 0;
}

.rs-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: var(--wp--custom--recordsure--radius--panel);
	object-fit: cover;
}

.tcc-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
}

.tcc-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
}

/* A drawn separator, so assistive technology reads no punctuation. */
.tcc-breadcrumbs__item + .tcc-breadcrumbs__item::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.9em;
	background: currentcolor;
	transform: rotate(20deg);
}

.rs-page .tcc-breadcrumbs a {
	color: var(--wp--preset--color--rs-blue-accessible);
	text-decoration: none;
}

.rs-page .tcc-breadcrumbs a:hover {
	color: var(--wp--preset--color--rs-blue-strong);
	text-decoration: underline;
}

.tcc-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--rs-navy-deep);
}

/* Evidence strip: a compact band, so it outranks the band padding. */
.rs-band.rs-stats-band {
	padding-block: var(--wp--preset--spacing--8);
	border-block-end: 1px solid var(--wp--preset--color--rs-border);
}

.rs-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each fact sizes its value to its own card, so a long value such as
   "2hrs→20min" stays on one line in a four-across strip. A fact is not a
   control, so its edge is the decorative rs-border every card takes. */
.rs-stat {
	min-width: 0;
	container-type: inline-size;
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-off-white);
}

/* The Sectors pages outline their facts in the Figma's pale sky (the
   operator's choice on 16 October 2026); the outcome, technology and TCC
   Group pages' facts keep the rs-border edge every fact takes. A fact is not
   a control, so its outline is decorative. */
.rs-page--sectors .rs-stat,
.rs-page--sector .rs-stat {
	border-color: var(--wp--preset--color--rs-sky);
}

.rs-stat > p {
	margin: 0;
}

.rs-stat__value {
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: min(var(--wp--preset--font-size--xl), 15cqi);
	font-weight: 800;
	line-height: 2rem;
	overflow-wrap: anywhere;
}

.rs-stat > .rs-stat__caption {
	margin-block-start: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.375;
}

/*
 * Facts are 24px, then 30px from 64rem, over 12px captions. The homepage and
 * contact strips keep 24px, and the TCC Group strip 30px, at every width. Its
 * short figures keep the Figma's fixed size rather than the card-relative cap,
 * which would trim them to 27px in a three- or four-across strip, so a longer
 * value wraps there, as in the Figma.
 */
.rs-page--home .rs-stat__value,
.rs-page--contact .rs-stat__value {
	line-height: 1.25;
}

.rs-page--group .rs-stat__value {
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 2.25rem;
}

.rs-page--home .rs-stat > .rs-stat__caption {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}

.rs-page--group .rs-stat > .rs-stat__caption {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
}

.rs-page--contact .rs-stat > .rs-stat__caption {
	font-weight: 600;
	line-height: 1rem;
}

@media (min-width: 64rem) {

	.rs-stat__value {
		font-size: min(var(--wp--preset--font-size--xxl), 15cqi);
		line-height: 2.25rem;
	}

	.rs-page--home .rs-stat__value,
	.rs-page--contact .rs-stat__value {
		font-size: min(var(--wp--preset--font-size--xl), 15cqi);
		line-height: 1.25;
	}
}

/* Titled items: classed, so they outrank the global heading sizes. */
.rs-pillar__title,
.rs-challenge__title,
.rs-text-card__title,
.rs-evidence-item__title,
.rs-icon-card__title {
	margin: 0;
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.375;
	overflow-wrap: anywhere;
}

.rs-pillar__title {
	line-height: 1.5rem;
}

.rs-page--outcome .rs-icon-card__title {
	font-weight: 600;
}

.rs-page--home .rs-icon-card__title {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

/* The homepage outcome text is 12px in the Figma, on the shared card leading (19.5px). */
.rs-page--home .rs-icon-card > p:not([class]) {
	font-size: var(--wp--preset--font-size--xs);
}

/* The Sectors pages' "Why ... trust Recordsure" box: the Figma's decorative
   border tint (the operator's choice on 16 October 2026). Its pillars are not
   controls, so the edge is decorative. */
.rs-pillars {
	display: grid;
	margin: var(--wp--preset--spacing--10) 0 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
	list-style: none;
}

.rs-pillar {
	min-width: 0;
	padding: var(--wp--preset--spacing--8);
}

.rs-pillar + .rs-pillar {
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
}

/* On a white band the pillars take the off-white fill, so the box stands apart. */
.rs-band--white .rs-pillars {
	background: var(--wp--preset--color--rs-off-white);
}

/* In-page menu */
.rs-anchor-nav {
	border-block-end: 1px solid var(--wp--preset--color--rs-border);
	background: var(--wp--preset--color--rs-white);
}

.rs-anchor-nav__inner {
	padding-block: var(--wp--preset--spacing--6);
}

.rs-anchor-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-page .rs-anchor-nav__link,
.rs-page .rs-anchor-nav__link:visited {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--rs-blue-accessible);
	border-radius: var(--wp--custom--recordsure--radius--small-surface);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.25rem;
	text-decoration: none;
	transition: background-color var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out);
}

.rs-page .rs-anchor-nav__link:hover {
	background: var(--wp--preset--color--rs-blue-light);
}

.rs-page .rs-anchor-nav__link:active {
	background: var(--wp--preset--color--rs-off-white);
}

/* Challenges and other two-column bands */
.rs-split {
	display: grid;
	gap: var(--wp--preset--spacing--12);
}

.rs-split__main,
.rs-split__aside {
	min-width: 0;
}

.rs-split__main .rs-section-head {
	margin-block-end: 0;
}

.rs-emphasis {
	margin: var(--wp--preset--spacing--6) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	font-style: italic;
	line-height: 1.625;
}

.rs-split__media {
	margin-block-start: var(--wp--preset--spacing--8);
}

.rs-split__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--recordsure--radius--panel);
}

.rs-challenge-list,
.rs-case-list,
.rs-text-cards,
.rs-evidence-list,
.rs-icon-cards,
.rs-feature-cards,
.rs-insight-cards {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-challenge {
	padding-block: var(--wp--preset--spacing--6);
	border-block-end: 1px solid var(--wp--preset--color--rs-border);
}

.rs-challenge:first-child {
	padding-block-start: 0;
}

/* Text cards: journeys and audiences */
.rs-text-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: var(--wp--preset--spacing--5);
}

.rs-text-card {
	min-width: 0;
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
}

/* Evidence framework */
.rs-evidence-list {
	display: grid;
	gap: 0 var(--wp--preset--spacing--8);
}

.rs-evidence-item {
	position: relative;
	min-width: 0;
	padding: var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--5) var(--wp--preset--spacing--5);
	border-block-end: 1px solid var(--wp--preset--color--rs-border);
}

.rs-evidence-item::before {
	content: "";
	position: absolute;
	inset-block-start: calc(var(--wp--preset--spacing--5) + 0.5em);
	inset-inline-start: 0;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: var(--wp--custom--recordsure--radius--pill);
	background: var(--wp--preset--color--rs-blue);
}

.rs-evidence-item > .rs-evidence-item__title {
	font-size: var(--wp--preset--font-size--sm);
}

/* Technology cards on the navy band */
.rs-feature-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--wp--preset--spacing--6);
}

.rs-feature-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--panel);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-slate);
}

.rs-feature-card :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--rs-blue-accessible);
}

.rs-feature-card__media {
	position: relative;
	min-height: 6rem;
	aspect-ratio: 12 / 5;
	background: var(--wp--preset--color--rs-navy);
}

.rs-feature-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rs-feature-card__media .rs-chip {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--5);
	inset-inline-start: var(--wp--preset--spacing--5);
}

.rs-feature-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--wp--preset--spacing--6);
}

.rs-feature-card__title {
	margin: 0;
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 2rem;
	overflow-wrap: anywhere;
}

/* The Technology pages' related cards are compact in the Figma. */
.rs-page--technology .rs-feature-card__title {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.375;
}

.rs-page--technology .rs-feature-card__action .rs-button {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1rem;
}

.rs-feature-card__body > .rs-feature-card__action {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--6);
}

/* Outcome cards */
.rs-icon-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: var(--wp--preset--spacing--5);
}

.rs-icon-card {
	min-width: 0;
	padding: var(--wp--preset--spacing--8);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-off-white);
}

.rs-icon-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-block-end: var(--wp--preset--spacing--4);
	border-radius: var(--wp--custom--recordsure--radius--small-surface);
	background: var(--wp--preset--color--rs-blue-light);
}

.rs-icon-card__icon img {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	object-fit: contain;
}

.rs-icon-card > .rs-icon-card__action {
	margin-block-start: var(--wp--preset--spacing--4);
}

/* Case studies */
.rs-case {
	position: relative;
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--10) var(--wp--preset--spacing--6) 0;
	border-block-end: 1px solid var(--wp--preset--color--rs-border);
}

.rs-case:first-child {
	padding-block-start: 0;
}

.rs-case > p {
	margin: 0;
}

.rs-case__eyebrow {
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.025em;
	line-height: 1rem;
	text-transform: uppercase;
}

.rs-case__title {
	margin: var(--wp--preset--spacing--2) 0 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.375;
	overflow-wrap: anywhere;
}

.rs-page .rs-case__link,
.rs-page .rs-case__link:visited {
	color: var(--wp--preset--color--rs-navy-deep);
	text-decoration: none;
}

.rs-page .rs-case__link:hover {
	text-decoration: underline;
}

.tcc-rail-tabs {
	margin-block-start: var(--wp--preset--spacing--8);
}

.tcc-rail-tabs__list {
	display: flex;
	gap: var(--wp--preset--spacing--5);
	margin-block-end: var(--wp--preset--spacing--5);
	border-block-end: 1px solid var(--wp--preset--color--rs-slate-light);
}

.tcc-rail-tabs__tab {
	margin: 0;
	padding: 0 0 var(--wp--preset--spacing--3);
	border: 0;
	border-block-end: 2px solid transparent;
	background: none;
	color: var(--wp--preset--color--rs-slate);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	cursor: pointer;
}

.tcc-rail-tabs__tab[aria-selected="true"] {
	border-block-end-color: var(--wp--preset--color--rs-blue-accessible);
	color: var(--wp--preset--color--rs-navy-deep);
}

.tcc-rail-tabs__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--rs-blue-accessible);
	outline-offset: 2px;
}

.tcc-rail-panel {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcc-rail-card {
	padding: var(--wp--preset--spacing--5) 0;
	border-block-end: 1px solid var(--wp--preset--color--rs-border);
}

.tcc-rail-card:last-child {
	border-block-end: 0;
}

.tcc-rail-card a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.tcc-rail-card__title {
	display: block;
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.45;
}

.tcc-rail-card__summary {
	display: block;
	margin-block-start: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
}

.tcc-rail-card__arrow {
	display: block;
	margin-block-start: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1;
}

.tcc-rail-card a:hover .tcc-rail-card__title,
.tcc-rail-card a:focus-visible .tcc-rail-card__title {
	text-decoration: underline;
}

.tcc-rail-tabs:not(.is-enhanced) .tcc-rail-tabs__list {
	display: none;
}

.tcc-rail-tabs:not(.is-enhanced) .tcc-rail-tabpanel + .tcc-rail-tabpanel {
	margin-block-start: var(--wp--preset--spacing--6);
	padding-block-start: var(--wp--preset--spacing--6);
	border-block-start: 1px solid var(--wp--preset--color--rs-slate-light);
}

.tcc-rail-tabpanel[hidden] {
	display: none;
}

/* The title link covers the whole row, so the row is one target. */
.rs-case__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.rs-case > .rs-case__summary {
	margin-block-start: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
}

.rs-case__arrow {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--6);
	inset-inline-end: 0;
}

.rs-case:first-child .rs-case__arrow {
	inset-block-start: 0;
}

/* Call to action */
.rs-cta-band {
	text-align: center;
}

.rs-cta-band__content {
	max-width: 46rem;
	margin-inline: auto;
}

.rs-cta-band__content > * {
	margin-block: 0;
}

.rs-cta-band__content > * + * {
	margin-block-start: var(--wp--preset--spacing--6);
}

.rs-cta-band__content > p:not([class]) {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.625;
}

.rs-cta-band__heading {
	color: var(--wp--preset--color--rs-white);
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* The homepage call to action is smaller and semibold in the Figma. */
.rs-page--home .rs-cta-band__heading {
	font-weight: 600;
	line-height: 2.25rem;
}

.rs-page--home .rs-cta-band__content > p:not([class]) {
	font-size: var(--wp--preset--font-size--base);
}

@media (min-width: 64rem) {

	.rs-cta-band__heading {
		font-size: var(--wp--preset--font-size--display);
	}

	.rs-page--home .rs-cta-band__heading {
		font-size: var(--wp--preset--font-size--xxxl);
		line-height: 2.5rem;
	}
}

/* Questions */
.rs-faq {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	max-width: 48rem;
}

/*
 * Every question box on the site takes the softer rs-border outline, open or
 * closed (the operator's feedback on 16 October 2026). The edge is
 * decorative: each question and its chevron identify the row, the open row
 * also turns white and turns its chevron, and the question button keeps its
 * 2px rs-blue-accessible focus ring. Unbroken words, a long product name in a
 * question or a web address in an answer, break inside the box, as the
 * indexes' questions do, so the box never pushes the page sideways at 320px.
 */
.rs-faq__item {
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-off-white);
}

.rs-faq__item[data-open] {
	background: var(--wp--preset--color--rs-white);
}

.rs-faq__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.375;
}

/* The homepage questions are 14px, and TCC Group's keep the base leading. */
.rs-page--home .rs-faq__heading {
	font-size: var(--wp--preset--font-size--sm);
}

.rs-page--group .rs-faq__heading {
	line-height: 1.5rem;
}

.rs-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	width: 100%;
	min-height: 2.75rem;
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	border: 0;
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: none;
	color: var(--wp--preset--color--rs-navy-deep);
	font: inherit;
	font-weight: 600;
	text-align: start;
	overflow-wrap: anywhere;
	cursor: pointer;
}

.rs-faq__question::after {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-inline-end: 2px solid currentcolor;
	border-block-end: 2px solid currentcolor;
	transform: rotate(45deg);
	transition: transform var(--wp--custom--recordsure--motion--dropdown) var(--wp--custom--recordsure--motion--ease-out);
}

.rs-faq__question[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

/* A question toggled from the keyboard turns its chevron at once: the motion
   contract gives keyboard-initiated actions no open or close animation, so
   only a pointer sees the turn. assets/js/faq.js records the input that last
   pressed each question, because :focus-visible stays on a question a
   pointer then presses. */
.rs-faq__question[data-rs-faq-input="keyboard"]::after {
	transition: none;
}

.rs-faq__answer {
	padding: 0 var(--wp--preset--spacing--6) var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-faq__answer > * {
	margin-block: 0;
}

.rs-faq__answer > * + * {
	margin-block-start: var(--wp--preset--spacing--4);
}

/* Insights */
.rs-insight-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--wp--preset--spacing--5);
}

.rs-insight-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
}

.rs-insight-card::before {
	content: "";
	width: 2rem;
	height: 3px;
	margin-block-end: var(--wp--preset--spacing--4);
	background: var(--wp--preset--color--rs-blue);
}

.rs-insight-card__title {
	margin: 0;
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.375;
	overflow-wrap: anywhere;
}

.rs-insight-card > .rs-insight-card__action {
	margin: auto 0 0;
	padding-block-start: var(--wp--preset--spacing--5);
}

/* Technology pages: dark hero */
.rs-hero--dark {
	border-block-end: 0;
	background: var(--wp--preset--color--rs-navy-deep);
	color: var(--wp--preset--color--rs-white);
}

.rs-hero--dark .rs-hero__heading {
	color: var(--wp--preset--color--rs-white);
}

.rs-hero--dark .rs-hero__lead,
.rs-hero--dark .tcc-breadcrumbs__list {
	color: var(--wp--preset--color--rs-border);
}

.rs-page .rs-hero--dark .tcc-breadcrumbs a,
.rs-page .rs-hero--dark .tcc-breadcrumbs a:visited {
	color: var(--wp--preset--color--rs-blue-on-navy);
}

.rs-hero--dark .tcc-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--rs-white);
}

.rs-hero--dark .rs-hero__media img {
	aspect-ratio: 16 / 9;
}

.rs-hero__action {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}

/* Answer-first introduction */
.rs-intro__grid {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.rs-intro__lead,
.rs-intro__aside {
	min-width: 0;
}

.rs-intro__lead > p {
	margin: 0;
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	line-height: 1.625;
}

.rs-intro__body {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.625;
}

.rs-intro__lead > p + p,
.rs-intro__body > * + * {
	margin-block-start: var(--wp--preset--spacing--4);
}

.rs-intro__body > * {
	margin-block: 0;
}

.rs-callout {
	margin: var(--wp--preset--spacing--6) 0 0;
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.375;
	overflow-wrap: anywhere;
}

@media (min-width: 64rem) {

	.rs-intro__lead > p {
		font-size: var(--wp--preset--font-size--xl);
	}

	.rs-callout {
		font-size: var(--wp--preset--font-size--md);
	}
}

.rs-intro__aside > .rs-callout:first-child {
	margin-block-start: 0;
}

/* Technology stages panel */
.rs-stages__panel {
	display: grid;
	gap: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--recordsure--radius--panel);
	background: var(--wp--preset--gradient--rs-navy-panel);
	color: var(--wp--preset--color--rs-white);
	box-shadow: var(--wp--preset--shadow--rs-panel);
}

.rs-stages__main,
.rs-stages__media {
	min-width: 0;
}

.rs-stages__list {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rs-stage;
}

/* A stage's edge is the decorative rs-border every card takes, here a light
   line round the navy card on the navy panel: each stage is named by its
   title and numbered by its list, and none is a control. */
.rs-stage {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--4);
	min-width: 0;
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-navy);
	counter-increment: rs-stage;
}

.rs-stage__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: var(--wp--custom--recordsure--radius--small-surface);
	background: var(--wp--preset--color--rs-blue-light);
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 800;
	line-height: 1;
}

.rs-stage__number::before {
	content: counter(rs-stage);
	content: counter(rs-stage) / "";
}

.rs-stage__content {
	min-width: 0;
}

.rs-stage__title {
	margin: 0;
	color: var(--wp--preset--color--rs-white);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.25rem;
	overflow-wrap: anywhere;
}

.rs-stage__content > p:not(.rs-stage__title) {
	margin: var(--wp--preset--spacing--2) 0 0;
	color: var(--wp--preset--color--rs-blue-on-navy);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
	overflow-wrap: anywhere;
}

.rs-stages__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--recordsure--radius--card);
	box-shadow: var(--wp--preset--shadow--rs-card);
}

.rs-feature-cards--related {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 40rem));
	justify-content: center;
}

/* How it works */
.rs-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rs-step;
}

.rs-step {
	position: relative;
	min-width: 0;
	padding: var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--6) var(--wp--preset--spacing--16);
	border-block-end: 1px solid var(--wp--preset--color--rs-border);
	counter-increment: rs-step;
}

.rs-step:first-child {
	padding-block-start: 0;
}

/* The list already conveys order, so the drawn number is not announced. */
.rs-step::before {
	content: counter(rs-step, decimal-leading-zero);
	content: counter(rs-step, decimal-leading-zero) / "";
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--6);
	inset-inline-start: 0;
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 1;
}

.rs-step:first-child::before {
	inset-block-start: 0;
}

/*
 * Step numbers follow each Figma list. Beside the steps of the Technology
 * product pages and the Why, Responsible AI and Awards points they are 48px,
 * set flush right in a 3.5rem column 1.5rem from the text. The sector
 * questions use the same column and step from 36px to 48px at 64rem. The
 * security protections step the same way in a 3rem column, 1.5rem and then
 * 2.5rem from the text. The capability Technology pages, whose Figma steps
 * are numbered cards, take 36px on 40px leading, and the homepage reasons
 * keep the base 30px.
 */
.rs-page--technology .rs-how .rs-step,
.rs-points-band__list > .rs-step,
.rs-questions__list > .rs-step {
	padding-inline-start: var(--wp--preset--spacing--20);
}

.rs-page--technology .rs-how .rs-step::before,
.rs-points-band__list > .rs-step::before {
	inline-size: calc(var(--wp--preset--spacing--20) - var(--wp--preset--spacing--6));
	font-size: var(--wp--preset--font-size--display);
	text-align: end;
}

.rs-questions__list > .rs-step::before {
	inline-size: calc(var(--wp--preset--spacing--20) - var(--wp--preset--spacing--6));
	font-size: var(--wp--preset--font-size--xxxl);
	text-align: end;
}

.rs-security-protection__list > .rs-step {
	padding-inline-start: calc(var(--wp--preset--spacing--12) + var(--wp--preset--spacing--6));
}

.rs-security-protection__list > .rs-step::before {
	inline-size: var(--wp--preset--spacing--12);
	font-size: var(--wp--preset--font-size--xxxl);
	text-align: end;
}

.rs-page--technology:has(.rs-stages) .rs-how .rs-step {
	padding-inline-start: var(--wp--preset--spacing--16);
}

.rs-page--technology:has(.rs-stages) .rs-how .rs-step::before {
	inline-size: auto;
	font-size: var(--wp--preset--font-size--xxxl);
	line-height: 2.5rem;
	text-align: start;
}

@media (min-width: 64rem) {

	.rs-questions__list > .rs-step::before,
	.rs-security-protection__list > .rs-step::before {
		font-size: var(--wp--preset--font-size--display);
	}

	.rs-security-protection__list > .rs-step {
		padding-inline-start: calc(var(--wp--preset--spacing--12) + var(--wp--preset--spacing--10));
	}
}

.rs-step > .rs-step__title {
	margin: 0;
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.375;
	overflow-wrap: anywhere;
}

/*
 * Step titles are 18px in the Figma. The homepage row, and the capability
 * Technology pages (those with a stages band), set them at 20px; the sector
 * questions and security points at 16px; and the security protections step
 * from 18px to 20px at 64rem. The homepage reasons are semibold on base leading.
 */
.rs-steps--row > .rs-step > .rs-step__title,
.rs-page--technology:has(.rs-stages) .rs-how .rs-step > .rs-step__title {
	font-size: var(--wp--preset--font-size--lg);
}

.rs-questions__list > .rs-step > .rs-step__title,
.rs-page--security .rs-points-band__list > .rs-step > .rs-step__title {
	font-size: var(--wp--preset--font-size--base);
}

.rs-home-reasons__list > .rs-step > .rs-step__title {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.5rem;
}

@media (min-width: 64rem) {

	.rs-security-protection__list > .rs-step > .rs-step__title {
		font-size: var(--wp--preset--font-size--lg);
	}
}

.rs-step > p {
	margin: var(--wp--preset--spacing--2) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

/* Who benefits, on the navy band */
.rs-audience-cards,
.rs-link-tiles,
.rs-case-cards {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-audience-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: var(--wp--preset--spacing--5);
}

.rs-audience-card {
	min-width: 0;
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-slate);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-navy-mid);
	color: var(--wp--preset--color--rs-border);
}

.rs-audience-card__icon,
.rs-link-tile__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--wp--custom--recordsure--radius--small-surface);
	background: var(--wp--preset--color--rs-navy);
}

.rs-audience-card__icon {
	margin-block-end: var(--wp--preset--spacing--4);
}

.rs-audience-card__icon img,
.rs-link-tile__icon img {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	object-fit: contain;
}

.rs-audience-card > .rs-audience-card__title {
	margin: 0;
	color: var(--wp--preset--color--rs-white);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.375;
	overflow-wrap: anywhere;
}

.rs-audience-card > p {
	margin: var(--wp--preset--spacing--3) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

/* The Technology audience titles keep the base leading; the homepage's cards are smaller. */
.rs-page--technology .rs-audience-card > .rs-audience-card__title {
	line-height: 1.5rem;
}

.rs-page--home .rs-audience-card > .rs-audience-card__title {
	font-size: var(--wp--preset--font-size--sm);
}

.rs-page--home .rs-audience-card > p {
	font-size: var(--wp--preset--font-size--xs);
}

/* Trust, security and responsible AI */
.rs-trust__content {
	max-width: 52rem;
}

.rs-trust__content > .rs-section-head {
	margin-block-end: 0;
}

.rs-trust__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--8);
	margin: var(--wp--preset--spacing--8) 0 0;
	padding: var(--wp--preset--spacing--6) 0 0;
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
	list-style: none;
}

/* Sector links, on the deep navy band */
.rs-link-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	border-block-start: 1px solid var(--wp--preset--color--rs-slate);
}

.rs-link-tile {
	min-width: 0;
	border-block-end: 1px solid var(--wp--preset--color--rs-slate);
}

.rs-page .rs-link-tile__link,
.rs-page .rs-link-tile__link:visited {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	min-height: 3rem;
	padding: var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--rs-white);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.375;
	text-decoration: none;
}

.rs-page .rs-link-tile__link:hover {
	background: var(--wp--preset--color--rs-navy);
	color: var(--wp--preset--color--rs-white);
	text-decoration: underline;
}

.rs-link-tile__name {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.rs-link-tile__arrow::after {
	content: "";
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-block-start: 2px solid currentcolor;
	border-inline-end: 2px solid currentcolor;
	transform: rotate(45deg);
}

/* Case-study cards */
.rs-cases__index {
	margin: 0 0 var(--wp--preset--spacing--8);
}

/* A long link label wraps inside its inline-flex link instead of widening the page. */
.rs-trust__links .rs-text-link,
.rs-cases__index .rs-text-link,
.rs-home-links .rs-text-link {
	overflow-wrap: anywhere;
}

.rs-case-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--wp--preset--spacing--5);
}

.rs-case-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-off-white);
}

.rs-case-card:has(.rs-case-card__media) {
	padding-block-start: 0;
	padding-inline: 0;
}

.rs-case-card > * {
	margin: 0;
}

.rs-case-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 7;
	margin: 0 0 var(--wp--preset--spacing--6);
	background: var(--wp--preset--color--rs-navy);
}

.rs-case-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rs-case-card__eyebrow {
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.025em;
	line-height: 1rem;
	text-transform: uppercase;
}

.rs-case-card__eyebrow--overlay {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--4);
	inset-inline-start: var(--wp--preset--spacing--4);
	max-width: calc(100% - var(--wp--preset--spacing--8));
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	border-radius: var(--wp--custom--recordsure--radius--pill);
	background: var(--wp--preset--color--rs-blue-light);
	color: var(--wp--preset--color--rs-navy-deep);
}

.rs-case-card > .rs-case-card__title {
	margin-block-start: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.375;
	overflow-wrap: anywhere;
}

.rs-case-card:has(.rs-case-card__media) > :not(.rs-case-card__media) {
	margin-inline: var(--wp--preset--spacing--6);
}

.rs-page .rs-case-card__link,
.rs-page .rs-case-card__link:visited {
	color: var(--wp--preset--color--rs-navy-deep);
	text-decoration: none;
}

.rs-page .rs-case-card__link:hover {
	text-decoration: underline;
}

/* The title link covers the whole card, so the card is one target. */
.rs-case-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.rs-case-card > .rs-case-card__summary {
	margin-block-start: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-case-card > .rs-case-card__action {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.25rem;
}

/* The homepage cards set a quieter overlay label, semibold titles and a 12px action. */
.rs-page--home .rs-case-card__eyebrow--overlay {
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
}

.rs-page--home .rs-case-card > .rs-case-card__title {
	font-weight: 600;
	line-height: 1.5rem;
}

.rs-page--home .rs-case-card > .rs-case-card__action {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
}

/*
 * The homepage case-study cards take the softer rs-border edge, decorative
 * because each card's title link names it, and pictures 30% shorter (the
 * operator's feedback on 16 October 2026). Staging's 640 x 426 card pictures
 * stood 259.6px tall in the 390px media box at 1440px, because the box's
 * automatic minimum height followed the picture and overrode its 16:7 ratio;
 * the box now keeps 70% of that, 640 : 298.2 (181.7px at 1440px), at every
 * width, and every picture fills it cropped (object-fit: cover), never
 * squashed. Hovered, as in the Figma, a card takes the rs-blue edge at 30%
 * and the card shadow, and its title rs-blue-accessible in place of the
 * underline; reduced motion keeps them and drops the transitions.
 */
.rs-home-cases .rs-case-card__media {
	min-height: 0;
	aspect-ratio: 640 / 298.2;
}

.rs-home-cases .rs-case-card:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--rs-blue) 30%, transparent);
	box-shadow: var(--wp--preset--shadow--rs-card);
}

.rs-page .rs-home-cases .rs-case-card:hover .rs-case-card__link {
	color: var(--wp--preset--color--rs-blue-accessible);
	text-decoration: none;
}

/* The title link covers the card, so its focus ring outlines the whole card;
   the card's own outline is not clipped by its overflow, as a ring drawn on
   the stretched link would be. */
.rs-page .rs-home-cases .rs-case-card__link:focus-visible {
	outline-color: transparent;
}

.rs-home-cases .rs-case-card:has(.rs-case-card__link:focus-visible) {
	outline: 2px solid var(--wp--preset--color--rs-blue-accessible);
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {

	.rs-home-cases .rs-case-card {
		transition:
			border-color var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out),
			box-shadow var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out);
	}

	.rs-page .rs-home-cases .rs-case-card__link {
		transition: color var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out);
	}
}

@media (prefers-reduced-motion: reduce) {

	.rs-home-cases .rs-case-card,
	.rs-page .rs-home-cases .rs-case-card__link {
		transition: none;
	}
}

/* Recordsure collection indexes and single article/case-study templates */
.rs-main--collection,
.rs-main--single {
	background: var(--wp--preset--color--rs-off-white);
	color: var(--wp--preset--color--rs-slate);
}

/*
 * The case study and insight indexes open on the Figma's light lavender band
 * (its indigo-100 at 30% on white), on the shared hero rhythm. The band ends
 * 64px below its content, 80px from 64rem, and the filters below it sit on
 * the same band.
 */
.rs-main--collection .tcc-hero {
	--rs-hero-end: var(--wp--preset--spacing--16);
	padding-block: var(--rs-hero-start) var(--rs-hero-end);
	background: var(--wp--preset--color--rs-lavender);
	color: var(--wp--preset--color--rs-slate);
}

/* The single heroes open the page directly under the site header, so their
   top padding follows the Figma hero rhythm: the trail sits 32px below the
   header, 40px from 64rem. */
.rs-single-hero {
	padding-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	background: var(--wp--preset--gradient--rs-navy-panel);
	color: var(--wp--preset--color--rs-white);
}

.rs-main--collection .tcc-hero__inner,
.rs-single-hero__inner {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.rs-main--collection .tcc-hero__text,
.rs-single-hero__text {
	max-width: 48rem;
}

.rs-main--collection .tcc-hero__text {
	min-width: 0;
}

/* The index trail keeps the light-surface trail pairs: slate text and
   separators, accessible blue links (5.17:1 on the lavender band, 6.73:1
   hovered) and the deep navy current page. */
.rs-main--collection .tcc-breadcrumbs {
	margin: 0 0 var(--rs-hero-trail-gap);
}

.rs-main--collection .tcc-hero .tcc-breadcrumbs a,
.rs-main--collection .tcc-hero .tcc-breadcrumbs a:visited {
	color: var(--wp--preset--color--rs-blue-accessible);
}

.rs-main--collection .tcc-hero .tcc-breadcrumbs a:hover {
	color: var(--wp--preset--color--rs-blue-strong);
}

.rs-single-hero .tcc-breadcrumbs {
	margin: 0 0 var(--wp--preset--spacing--6);
	color: var(--wp--preset--color--rs-blue-on-navy);
}

.rs-single-hero .tcc-breadcrumbs a {
	color: inherit;
}

/*
 * A single hero's trail list and current page otherwise keep the light-surface
 * slate and deep navy, which all but vanish on the navy panel (about 1:1), so
 * they take the trail's own colour and white (8.43:1 and 11.85:1 at the
 * panel's lightest stop). A light single hero keeps the light pairs.
 */
.rs-single-hero .tcc-breadcrumbs__list {
	color: inherit;
}

.rs-single-hero:not(.rs-single-hero--light) .tcc-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--rs-white);
}

.rs-main--collection .tcc-hero__eyebrow,
.rs-single-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	align-items: center;
	margin: 0 0 var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--rs-blue-on-navy);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1rem;
	text-transform: uppercase;
}

/* On the lavender band the index eyebrow is the accessible blue (5.17:1):
   the Figma's brand blue fails there (2.24:1). */
.rs-main--collection .tcc-hero__eyebrow {
	margin-block-end: var(--rs-hero-eyebrow-gap);
	color: var(--wp--preset--color--rs-blue-accessible);
}

.rs-main--collection .tcc-hero__title,
.rs-single-title {
	margin: 0;
	color: var(--wp--preset--color--rs-white);
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.rs-main--collection .tcc-hero__title {
	color: var(--wp--preset--color--rs-navy);
}

/*
 * The index titles step to 60px from 64rem, as the Figma's do. Articles and
 * case studies have no Figma page, so their longer titles take the policy
 * title's 48px.
 */
@media (min-width: 64rem) {

	.rs-main--collection .tcc-hero__title {
		font-size: var(--wp--preset--font-size--display-lg);
	}

	.rs-single-title {
		font-size: var(--wp--preset--font-size--display);
	}
}

.rs-main--collection .tcc-hero__summary,
.rs-single-summary,
.rs-single-hero .tcc-cs-abstract {
	max-width: 44rem;
	margin-block-start: var(--wp--preset--spacing--6);
	color: var(--wp--preset--color--rs-border);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.625;
}

/* An introduction wraps a long address or token rather than widening the band. */
.rs-main--collection .tcc-hero__summary {
	min-width: 0;
	color: var(--wp--preset--color--rs-slate);
	overflow-wrap: anywhere;
}

.rs-main--collection .tcc-hero__summary > :first-child {
	margin-block-start: 0;
}

.rs-main--collection .tcc-hero__summary > :last-child {
	margin-block-end: 0;
}

.rs-main--collection .tcc-hero__media,
.rs-single-hero__media {
	overflow: hidden;
	border-radius: var(--wp--custom--recordsure--radius--panel);
	box-shadow: var(--wp--preset--shadow--rs-panel);
}

.rs-main--collection .tcc-hero__media img,
.rs-single-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 18rem;
	object-fit: cover;
}

.rs-main--collection .tcc-filters {
	padding-block: var(--wp--preset--spacing--8);
	background: var(--wp--preset--color--rs-lavender);
	border-block-end: 1px solid var(--wp--preset--color--rs-border);
}

.rs-main--collection .tcc-filters__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--wp--preset--spacing--4);
	align-items: end;
}

.rs-main--collection .tcc-filters__label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.025em;
	line-height: 1rem;
	text-transform: uppercase;
}

/*
 * Filter controls take the operator's softer outline, rs-border (15 October
 * 2026). It is decorative, not each control's only identification: every
 * dropdown keeps its visible label and its rs-navy-deep value and chevron
 * (18.05:1), the search box its rs-slate icon and placeholder, the buttons
 * their text, and every control the 2px accessible focus ring.
 */
.rs-main--collection .tcc-filters__select,
.rs-main--collection .tcc-filters__search {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	padding: 0 var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--control);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-navy-deep);
	font: inherit;
}

.rs-main--collection .tcc-filters__search::placeholder {
	color: var(--wp--preset--color--rs-disabled-text);
	opacity: 1;
}

/*
 * The dropdown draws its own chevron 18px inside its edge, where the browser's
 * arrow sat against it. The chevron is the control's wrapper's, because a
 * select cannot carry generated content.
 */
.rs-main--collection .tcc-filters__select {
	padding-inline-end: var(--wp--preset--spacing--10);
	appearance: none;
	cursor: pointer;
}

.rs-main--collection .tcc-filters__control:has(> .tcc-filters__select) {
	position: relative;
}

.rs-main--collection .tcc-filters__control:has(> .tcc-filters__select)::after {
	content: "";
	position: absolute;
	inset-block-end: calc(1.375rem - 0.3rem);
	inset-inline-end: 1.125rem;
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid var(--wp--preset--color--rs-navy-deep);
	border-bottom: 2px solid var(--wp--preset--color--rs-navy-deep);
	transform: rotate(45deg);
	pointer-events: none;
}

.rs-main--collection :is(.tcc-filters__select, .tcc-filters__search):hover {
	border-color: var(--wp--preset--color--rs-slate-light);
}

/*
 * Apply filters and Clear filters match the controls beside them: white, the
 * rs-border outline and medium-weight rs-navy-deep text (18.05:1), not a blue
 * fill. They sit together at the end of the dropdown row, the dropdowns' own
 * gap apart.
 */
.rs-main--collection .tcc-filters__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rs-filter-gap, var(--wp--preset--spacing--4));
	align-items: center;
	margin: 0;
}

.rs-main--collection .tcc-filters__submit,
.rs-main--collection .tcc-filters__clear {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--control);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-navy-deep);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.25rem;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.rs-main--collection .tcc-filters__submit:hover,
.rs-main--collection .tcc-filters__clear:hover {
	border-color: var(--wp--preset--color--rs-blue-accessible);
	background: var(--wp--preset--color--rs-off-white);
	color: var(--wp--preset--color--rs-navy-deep);
}

.rs-main--collection .tcc-filters__clear:visited {
	color: var(--wp--preset--color--rs-navy-deep);
}

.rs-main--collection .tcc-filters__submit:active,
.rs-main--collection .tcc-filters__clear:active {
	background: var(--wp--preset--color--rs-blue-light);
}

.rs-main--collection .tcc-section {
	padding-block: var(--wp--preset--spacing--16);
}

/* An index's own section titles step like the Figma's section headings. */
@media (min-width: 64rem) {

	.rs-main--collection .tcc-section__title {
		font-size: var(--wp--preset--font-size--xxxl);
	}
}

/*
 * The index questions, which tcc_guided_render_faqs() prints on the case
 * study and insight indexes, are boxed as every other Recordsure question is
 * (the operator's request of 17 October 2026 for the same question boxes
 * everywhere): the decorative rs-border edge and the card radius, white on
 * the index's off-white body as the index cards are, with the chevron that
 * turns as a box opens. The edge is decorative: each question is a native
 * summary named by its own text, a 44px target with the shared 2px
 * rs-blue-accessible focus ring, and the chevron and the answer show that it
 * is open. Only this stylesheet draws the box, and tcc.group never loads it,
 * so tcc.group's index questions keep their own rules. The box itself holds
 * no padding, whatever another stylesheet gives the shared class: its
 * summary and answer carry the spacing, as every question box's do. The
 * summary sizes its border box, as a question button does, so a one-line
 * index question stands as tall as a one-line guided one. Unbroken words, a
 * long product name in a question or an address in an answer, break inside
 * the box, as the index's titles do, so the box never pushes the page
 * sideways at 320px.
 */
.rs-main--collection .tcc-faq {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	max-width: 48rem;
}

.rs-main--collection .tcc-faq__item {
	padding: 0;
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
}

.rs-main--collection .tcc-faq__question {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	min-height: 2.75rem;
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--recordsure--radius--card);
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.375;
	list-style: none;
	overflow-wrap: anywhere;
	cursor: pointer;
}

.rs-main--collection .tcc-faq__question::-webkit-details-marker {
	display: none;
}

.rs-main--collection .tcc-faq__question::after {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-inline-end: 2px solid currentcolor;
	border-block-end: 2px solid currentcolor;
	transform: rotate(45deg);
	transition: transform var(--wp--custom--recordsure--motion--dropdown) var(--wp--custom--recordsure--motion--ease-out);
}

.rs-main--collection .tcc-faq__item[open] .tcc-faq__question::after {
	transform: rotate(-135deg);
}

/* A question toggled from the keyboard turns its chevron at once: the motion
   contract gives keyboard-initiated actions no open or close animation, so
   only a pointer sees the turn. */
.rs-main--collection .tcc-faq__question:focus-visible::after {
	transition: none;
}

.rs-main--collection .tcc-faq__answer {
	padding: 0 var(--wp--preset--spacing--6) var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-main--collection .tcc-faq__answer > * {
	margin-block: 0;
}

.rs-main--collection .tcc-faq__answer > * + * {
	margin-block-start: var(--wp--preset--spacing--4);
}

@media (prefers-reduced-motion: reduce) {

	.rs-main--collection .tcc-faq__question::after {
		transition: none;
	}
}

.rs-main--collection .tcc-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: var(--wp--preset--spacing--6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-main--collection .tcc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
	box-shadow: var(--wp--preset--shadow--rs-card);
}

.rs-main--collection .tcc-card > :not(.tcc-card__media) {
	margin-inline: var(--wp--preset--spacing--6);
}

/*
 * Every card picture fills the same box and is cropped to it, never
 * stretched: insights at 16:9, the size the first card, "Can the FCA Handbook
 * API help firms demonstrate compliance?", showed; case studies at 5:2, 40%
 * shorter than their 640 by 426 pictures showed (3:2). The picture is laid
 * out of flow, so its own height can no longer stretch the box, as a portrait
 * or square picture did.
 */
.rs-main--collection .tcc-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	margin: 0 0 var(--wp--preset--spacing--6);
	overflow: hidden;
	background: var(--wp--preset--color--rs-navy);
}

.rs-main--case-studies-index .tcc-card__media {
	aspect-ratio: 5 / 2;
}

.rs-main--collection .tcc-card__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * An AI-generated picture arrives inside the media signing plugin's disclosure
 * wrapper, which sets its own position and display inline
 * (TCC_Media_Signing::wrap_ai_badge()). The picture is then laid out against
 * the wrapper, so the wrapper takes the whole box: the picture still fills and
 * is cropped to it, and the badge sits in the picture's corner.
 */
.rs-main--collection .tcc-card__media > .tcc-media-wrapper {
	width: 100%;
	aspect-ratio: inherit;
	vertical-align: top;
}

.rs-main--collection .tcc-card__media-label {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--4);
	inset-inline-start: var(--wp--preset--spacing--4);
	max-width: calc(100% - var(--wp--preset--spacing--8));
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	border-radius: var(--wp--custom--recordsure--radius--pill);
	background: var(--wp--preset--color--rs-blue-light);
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1rem;
}

.rs-main--collection .tcc-card__meta,
.rs-main--collection .tcc-card__footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	align-items: center;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
}

.rs-main--collection .tcc-eyebrow-chip {
	color: var(--wp--preset--color--rs-blue-accessible);
	font-weight: 600;
}

.rs-main--collection .tcc-card__title {
	margin-block-start: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.375;
	overflow-wrap: anywhere;
}

/* The case-study index sets its card titles at 14px in the Figma. */
.rs-main--case-studies-index .tcc-card__title {
	font-size: var(--wp--preset--font-size--sm);
}

.rs-main--collection .tcc-card__link,
.rs-main--collection .tcc-card__link:visited {
	color: inherit;
	text-decoration: none;
}

.rs-main--collection .tcc-card__link:hover {
	text-decoration: underline;
}

.rs-main--collection .tcc-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.rs-main--collection .tcc-card__summary {
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
}

.rs-main--collection .tcc-card__footer {
	margin-block-start: auto;
	padding-block: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
}

.rs-main--collection .tcc-card__cta {
	margin-inline-start: auto;
	color: var(--wp--preset--color--rs-blue-accessible);
	font-weight: 600;
}

.rs-main--collection .tcc-card-grid__empty {
	padding: var(--wp--preset--spacing--8);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-navy-deep);
}

/*
 * The pager, as the Figma draws it: Previous, the page numbers and Next in
 * small rounded buttons with the rs-border outline, centred under a hairline.
 * The current page is tinted cyan inside an rs-blue edge and set extra bold,
 * so its state never rests on colour alone; a disabled direction keeps its
 * place in rs-disabled-text (5.51:1).
 */
.rs-main--collection .tcc-pager {
	margin-block-start: var(--wp--preset--spacing--10);
	padding-block-start: var(--wp--preset--spacing--8);
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
}

.rs-main--collection .tcc-pager__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-main--collection .tcc-pager__link {
	display: inline-flex;
	box-sizing: border-box;
	gap: var(--wp--preset--spacing--2);
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0 var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--control);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1rem;
	text-decoration: none;
}

.rs-main--collection .tcc-pager__link:visited {
	color: var(--wp--preset--color--rs-navy);
}

.rs-main--collection .tcc-pager__link--previous,
.rs-main--collection .tcc-pager__link--next {
	padding-inline: var(--wp--preset--spacing--4);
}

.rs-main--collection .tcc-pager__link[href]:hover {
	border-color: var(--wp--preset--color--rs-blue-accessible);
	color: var(--wp--preset--color--rs-navy-deep);
}

.rs-main--collection .tcc-pager__link--current,
.rs-main--collection .tcc-pager__link--current:visited {
	border-color: var(--wp--preset--color--rs-blue);
	background: color-mix(in srgb, var(--wp--preset--color--rs-blue-light) 40%, var(--wp--preset--color--rs-white));
	color: var(--wp--preset--color--rs-navy-deep);
	font-weight: 800;
}

.rs-main--collection .tcc-pager__link[aria-disabled="true"] {
	color: var(--wp--preset--color--rs-disabled-text);
	cursor: not-allowed;
}

.rs-main--collection .tcc-pager__chevron {
	width: 0.4rem;
	height: 0.4rem;
	border-right: 1.5px solid currentcolor;
	border-bottom: 1.5px solid currentcolor;
	transform: rotate(-45deg);
}

.rs-main--collection .tcc-pager__chevron--previous {
	transform: rotate(135deg);
}

.rs-main--collection .tcc-pager__gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--xs);
}

/* ─── Case study and insight indexes: filter row, type tones, closing bands ─ */

/*
 * The filter band follows the Figma's top: the filter links, with the search
 * box at the row's far end, then the dropdowns with Apply filters and Clear
 * filters on one row below. Everything in a row is the same gap apart.
 */
.rs-main--collection .tcc-filters--rows {
	--rs-filter-gap: var(--wp--preset--spacing--4);
}

.rs-main--collection .tcc-filters--rows .tcc-filters__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--6);
	align-items: stretch;
}

.rs-main--collection .tcc-filters__primary,
.rs-main--collection .tcc-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rs-filter-gap);
	min-width: 0;
}

.rs-main--collection .tcc-filters__primary {
	align-items: center;
	justify-content: space-between;
}

.rs-main--collection .tcc-filters__row {
	align-items: flex-end;
}

.rs-main--collection .tcc-filters__row > .tcc-filters__control {
	flex: 1 1 14rem;
	min-width: 0;
	max-width: 22rem;
}

.rs-main--collection .tcc-filters--rows .tcc-filters__control--search {
	position: relative;
	flex: 1 1 100%;
	min-width: 0;
}

/* From 40rem the search box keeps to the far end of the links' row. */
@media (min-width: 40rem) {

	.rs-main--collection .tcc-filters--rows .tcc-filters__control--search {
		flex: 0 1 18rem;
		min-width: 14rem;
		margin-inline-start: auto;
	}
}

.rs-main--collection .tcc-filters--rows .tcc-filters__search {
	padding-inline-start: var(--wp--preset--spacing--10);
}

.rs-main--collection .tcc-filters__search-icon {
	--rs-search-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.35-4.35'/%3E%3C/svg%3E");
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: var(--wp--preset--spacing--4);
	width: var(--wp--preset--spacing--4);
	height: var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--rs-slate);
	transform: translateY(-50%);
	pointer-events: none;
	-webkit-mask: var(--rs-search-glyph) no-repeat center / contain;
	mask: var(--rs-search-glyph) no-repeat center / contain;
}

.rs-main--collection .tcc-filter-chips {
	min-width: 0;
}

.rs-main--collection .tcc-filter-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-main--collection .tcc-filter-chip,
.rs-main--collection .tcc-filter-chip:visited {
	display: inline-flex;
	box-sizing: border-box;
	gap: var(--wp--preset--spacing--2);
	align-items: center;
	min-height: 2.75rem;
	padding: 0 var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--small-surface);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.25rem;
	text-decoration: none;
}

/* A type's link carries its tone as a dot beside its name. */
.rs-main--collection .tcc-filter-chip[class*="tcc-tone--"]::before {
	content: "";
	flex-shrink: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--rs-tone);
	box-shadow: inset 0 0 0 1px var(--rs-tone-edge);
}

.rs-main--collection .tcc-filter-chip:hover {
	border-color: var(--rs-tone-edge, var(--wp--preset--color--rs-blue-accessible));
	color: var(--wp--preset--color--rs-navy-deep);
}

/* The chosen link takes its tone's tint inside a 2px edge, in bold. */
.rs-main--collection .tcc-filter-chip[aria-current="true"] {
	border-color: var(--rs-tone-edge, var(--wp--preset--color--rs-navy-deep));
	background: var(--rs-tone-tint, var(--wp--preset--color--rs-off-white));
	box-shadow: inset 0 0 0 1px var(--rs-tone-edge, var(--wp--preset--color--rs-navy-deep));
	color: var(--wp--preset--color--rs-navy-deep);
	font-weight: 700;
}

/*
 * The insight type tones: News green, Analysis & Perspectives blue and Guides
 * purple, as the Figma colours them. A tone paints borders, bars, tints, dots
 * and icons only; every type's name is printed beside it in rs-navy-deep. The
 * edge colour of each tone clears 3:1 on white and on its tint. One rule per
 * tone serves the insight indexes and the singles' type chips alike, so the
 * two cannot drift; test-recordsure-singles-figma.php holds it to one rule.
 */
.rs-main--collection .tcc-tone--green,
.rs-main--single .tcc-tone--green {
	--rs-tone: var(--wp--preset--color--rs-mint);
	--rs-tone-tint: color-mix(in srgb, var(--wp--preset--color--rs-mint) 22%, var(--wp--preset--color--rs-white));
	--rs-tone-edge: color-mix(in srgb, var(--wp--preset--color--rs-mint) 30%, var(--wp--preset--color--rs-navy-deep));
}

.rs-main--collection .tcc-tone--blue,
.rs-main--single .tcc-tone--blue {
	--rs-tone: var(--wp--preset--color--rs-blue);
	--rs-tone-tint: color-mix(in srgb, var(--wp--preset--color--rs-blue-light) 60%, var(--wp--preset--color--rs-white));
	--rs-tone-edge: var(--wp--preset--color--rs-blue-accessible);
}

.rs-main--collection .tcc-tone--purple,
.rs-main--single .tcc-tone--purple {
	--rs-tone: var(--wp--preset--color--rs-navy-mid);
	--rs-tone-tint: color-mix(in srgb, var(--wp--preset--color--rs-navy-mid) 12%, var(--wp--preset--color--rs-white));
	--rs-tone-edge: var(--wp--preset--color--rs-navy-mid);
}

/* The band of result cards is white, for a clean read. */
.rs-main--collection .tcc-section--grid {
	background: var(--wp--preset--color--rs-white);
}

/* Each insight card leads with a bar in its type's tone, and its type label sits on the tone's tint. */
.rs-main--collection .tcc-card[class*="tcc-tone--"]::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;
	height: 0.25rem;
	background: var(--rs-tone);
}

.rs-main--collection .tcc-card[class*="tcc-tone--"] .tcc-eyebrow-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.625rem;
	border-radius: 0.375rem;
	background: var(--rs-tone-tint);
	box-shadow: inset 0 0 0 1px var(--rs-tone-edge);
	color: var(--wp--preset--color--rs-navy-deep);
}

/*
 * The indexes' closing bands keep the Figma's 80px above and below their
 * content at every width; like every band, they line up with the hero, the
 * filters and the cards above them in the shared container.
 */
.rs-main--collection .rs-band {
	padding-block: var(--wp--preset--spacing--20);
}

/* The closing bands share one head: an eyebrow over a 30px heading. */
.rs-index-band-head {
	margin-block-end: var(--wp--preset--spacing--10);
}

.rs-index-band-head .rs-eyebrow {
	margin-block-end: var(--wp--preset--spacing--4);
}

.rs-index-band-head__heading {
	margin: 0;
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

/* Explore by category: one card per insight type, on the lavender band. */
.rs-index-categories {
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
	background: var(--wp--preset--color--rs-lavender);
}

.rs-index-categories__grid,
.rs-index-cases__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--wp--preset--spacing--5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-index-category,
.rs-index-case {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
}

.rs-index-category {
	padding: calc(var(--wp--preset--spacing--6) + 0.25rem) var(--wp--preset--spacing--6) var(--wp--preset--spacing--6);
}

.rs-index-category::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 0.25rem;
	background: var(--rs-tone, var(--wp--preset--color--rs-blue));
}

.rs-index-category__icon {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-block-end: var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--control);
	color: var(--rs-tone, var(--wp--preset--color--rs-navy));
}

.rs-index-category__glyph {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.rs-index-category__title,
.rs-index-case__title {
	margin: 0;
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.375;
	overflow-wrap: anywhere;
}

.rs-index-category__link,
.rs-index-category__link:visited,
.rs-index-case__link,
.rs-index-case__link:visited {
	color: inherit;
	text-decoration: none;
}

/* The title's link covers its card, and so does its focus ring. */
.rs-index-category__link::after,
.rs-index-case__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.rs-index-category__link:hover,
.rs-index-case__link:hover {
	text-decoration: underline;
}

.rs-index-category__link:focus-visible,
.rs-index-case__link:focus-visible {
	outline-color: transparent;
}

.rs-index-category__link:focus-visible::after,
.rs-index-case__link:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--rs-blue-accessible);
	outline-offset: -2px;
}

.rs-index-category__text {
	margin: var(--wp--preset--spacing--2) 0 0;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

/* Proven outcomes: three case studies, each from its own fields. */
.rs-index-cases {
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
}

.rs-index-case {
	padding: var(--wp--preset--spacing--6);
}

.rs-index-case__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.025em;
	line-height: 1rem;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.rs-index-case__action {
	display: flex;
	gap: 0.375rem;
	align-items: center;
	margin: auto 0 0;
	padding-block-start: var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1rem;
}

.rs-index-case__chevron {
	width: 0.375rem;
	height: 0.375rem;
	border-right: 1.5px solid currentcolor;
	border-bottom: 1.5px solid currentcolor;
	transform: rotate(-45deg);
}

/*
 * With the mini grid card component, Proven outcomes keeps the Figma's white
 * cards, blue client line (5.5:1) and 12px link.
 */
.rs-index-cases .rs-mini-card {
	background: var(--wp--preset--color--rs-white);
}

.rs-index-cases .rs-mini-card__eyebrow {
	color: var(--wp--preset--color--rs-blue-accessible);
}

.rs-index-cases .rs-mini-card__link,
.rs-index-cases .rs-mini-card__link:visited {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
}

/* Work with us: the case studies' call to action, centred on deep navy. */
.rs-index-cta .rs-band__inner {
	display: grid;
	justify-items: center;
	text-align: center;
}

.rs-index-cta__content {
	max-width: 42rem;
	min-width: 0;
}

.rs-index-cta .rs-eyebrow {
	margin-block-end: var(--wp--preset--spacing--4);
}

.rs-index-cta__heading {
	margin: 0;
	color: var(--wp--preset--color--rs-white);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

/* White at 65% on rs-navy-deep, 8.03:1. */
.rs-index-cta__body {
	margin-block-start: var(--wp--preset--spacing--4);
	color: color-mix(in srgb, var(--wp--preset--color--rs-white) 65%, transparent);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
}

.rs-index-cta__body > * {
	margin: 0;
}

.rs-index-cta__body > * + * {
	margin-block-start: var(--wp--preset--spacing--3);
}

.rs-index-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4);
	justify-content: center;
	width: 100%;
	margin: var(--wp--preset--spacing--8) 0 0;
	padding: 0;
	list-style: none;
}

.rs-index-cta__button {
	font-weight: 600;
}

/* The secondary buttons on deep navy: white text inside the rs-blue edge (7.59:1). */
.rs-index-cta__button--outline,
.rs-index-cta__button--outline:visited {
	border-color: var(--wp--preset--color--rs-blue);
	background: transparent;
	color: var(--wp--preset--color--rs-white);
}

.rs-index-cta__button--outline:hover {
	border-color: var(--wp--preset--color--rs-blue-on-navy);
	background: var(--wp--preset--color--rs-navy-mid);
	color: var(--wp--preset--color--rs-white);
}

.rs-index-cta__button--outline:active {
	background: var(--wp--preset--color--rs-navy);
	color: var(--wp--preset--color--rs-white);
}

/* Once a row can hold them, no button label wraps: Talk to us never breaks, as it did in the Figma. */
@media (min-width: 40rem) {

	.rs-index-cta__button {
		white-space: nowrap;
	}
}

/*
 * The newsletter sign-up. On the insights index it is the dark Stay informed
 * band, the text beside the sign-up from 64rem; above an insight's review bar
 * it is the Figma's light-blue band, centred, its text rs-navy-deep (7.59:1 on
 * rs-blue) and the note under a bound form in rs-navy-deep as well, never the
 * Figma's failing white. A bound MarTech form keeps its own white panel, so
 * its fields, privacy notice and consent keep their light-surface contrast.
 */
.rs-newsletter__inner {
	display: grid;
	gap: var(--wp--preset--spacing--8);
	align-items: center;
}

.rs-newsletter__text {
	min-width: 0;
}

.rs-newsletter__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.rs-newsletter__body {
	margin: var(--wp--preset--spacing--4) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
}

.rs-newsletter__action {
	min-width: 0;
}

.rs-newsletter__cta {
	margin: 0;
}

.rs-newsletter__form {
	width: 100%;
	max-width: 32rem;
	text-align: start;
}

.rs-newsletter--index .rs-eyebrow {
	margin-block-end: var(--wp--preset--spacing--4);
}

.rs-newsletter--index .rs-newsletter__heading {
	color: var(--wp--preset--color--rs-white);
}

.rs-newsletter--index .rs-newsletter__body {
	margin-block-start: var(--wp--preset--spacing--3);
	color: color-mix(in srgb, var(--wp--preset--color--rs-white) 65%, transparent);
}

.rs-newsletter--single {
	background: var(--wp--preset--color--rs-blue);
	color: var(--wp--preset--color--rs-navy-deep);
	text-align: center;
}

.rs-newsletter--single .rs-newsletter__inner {
	max-width: calc(42rem + 2 * var(--rs-gutter));
	justify-items: center;
}

.rs-newsletter--single .rs-newsletter__heading,
.rs-newsletter--single .rs-newsletter__body,
.rs-newsletter--single .rs-newsletter__note {
	color: var(--wp--preset--color--rs-navy-deep);
}

.rs-newsletter--single .rs-newsletter__body {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
}

.rs-newsletter--single .rs-newsletter__action {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	align-items: center;
	width: 100%;
}

.rs-newsletter__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
}

/* On rs-blue the focus ring is rs-navy-deep (7.59:1); the global ring fails there. */
.rs-newsletter--single :where(a, button, input, select, textarea, summary):focus-visible {
	outline-color: var(--wp--preset--color--rs-navy-deep);
}

@media (min-width: 64rem) {

	.rs-index-categories__grid,
	.rs-index-cases__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rs-newsletter--index .rs-newsletter__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--10);
	}

	.rs-newsletter--index .rs-newsletter__action {
		justify-self: end;
	}
}

.rs-single-hero__media {
	min-height: 18rem;
}

.rs-single-terms {
	gap: var(--wp--preset--spacing--3);
	margin-block-start: var(--wp--preset--spacing--8);
}

.rs-single-hero--light {
	padding-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-slate);
}

@media (min-width: 64rem) {
	.rs-main--collection .tcc-hero {
		--rs-hero-end: var(--wp--preset--spacing--20);
	}

	.rs-single-hero {
		padding-block-start: var(--wp--preset--spacing--10);
	}
}

.rs-single-hero--light .rs-single-title {
	color: var(--wp--preset--color--rs-navy);
}

.rs-single-hero--light .rs-single-summary {
	color: var(--wp--preset--color--rs-slate);
}

.rs-single-hero--light .tcc-breadcrumbs {
	color: var(--wp--preset--color--rs-blue-accessible);
}

.rs-single-hero--light .rs-single-meta {
	color: var(--wp--preset--color--rs-slate);
	text-transform: none;
}

.rs-single-chip,
.rs-single-eyebrow,
.rs-single-summary-box__eyebrow,
.rs-single-card__chip,
.rs-single-cta-card__eyebrow {
	color: var(--wp--preset--color--rs-blue-strong);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1rem;
	text-transform: uppercase;
}

.rs-single-chip {
	display: inline-flex;
	align-items: center;
	min-height: 1.875rem;
	padding-inline: var(--wp--preset--spacing--3);
	border-radius: var(--wp--custom--recordsure--radius--pill);
	background: var(--wp--preset--color--rs-blue-light);
	color: var(--wp--preset--color--rs-navy-deep);
	letter-spacing: normal;
	text-transform: none;
}

.rs-single-chip--light {
	background: var(--wp--preset--color--rs-off-white);
}

.rs-single-client {
	margin-block-start: var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--rs-navy);
	font-weight: 700;
}

.rs-single-body {
	padding-block: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-slate);
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
}

.rs-single-body__inner {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.rs-single-main,
.rs-single-rail,
.rs-single-card,
.rs-single-summary-box,
.rs-single-snapshot,
.rs-single-faq .rs-faq__item,
.rs-single-share {
	min-width: 0;
}

.rs-single-main {
	display: grid;
	gap: var(--wp--preset--spacing--8);
}

.rs-single-summary-box {
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: linear-gradient(135deg, var(--wp--preset--color--rs-white), var(--wp--preset--color--rs-off-white));
}

.rs-single-summary-box > * {
	margin-block: 0;
}

.rs-single-summary-box > * + * {
	margin-block-start: var(--wp--preset--spacing--4);
}

.rs-single-summary-box h2 {
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

.rs-single-summary-box ul,
.rs-single-prose ul,
.rs-single-prose ol {
	padding-inline-start: var(--wp--preset--spacing--6);
}

.rs-single-summary-box li + li,
.rs-single-prose li + li {
	margin-block-start: var(--wp--preset--spacing--2);
}

.rs-single-prose {
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.8;
}

.rs-single-prose > * {
	margin-block: 0 var(--wp--preset--spacing--5);
}

/* The Figma's article prose: 22px headings, which no preset matches, and semibold subheadings. */
.rs-single-prose h2 {
	margin-block: var(--wp--preset--spacing--10) var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--rs-navy);
	font-size: 1.375rem;
	line-height: 1.3;
}

.rs-single-prose h3 {
	margin-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 1.4;
}

.rs-single-prose blockquote,
.rs-single-pullquote {
	margin: var(--wp--preset--spacing--8) 0;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
	border-inline-start: 4px solid var(--wp--preset--color--rs-blue-accessible);
	border-radius: 0 var(--wp--custom--recordsure--radius--card) var(--wp--custom--recordsure--radius--card) 0;
	background: var(--wp--preset--color--rs-off-white);
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
}

.rs-single-pullquote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--sm);
	font-style: normal;
	font-weight: 600;
}

.rs-single-rail {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--8);
}

.rs-single-cta-card,
.rs-single-snapshot {
	padding: var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--recordsure--radius--panel);
	background: var(--wp--preset--color--rs-navy);
	color: var(--wp--preset--color--rs-white);
}

.rs-single-cta-card__heading,
.rs-single-snapshot h2 {
	margin-block: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--rs-white);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.375;
}

.rs-single-cta-card__eyebrow {
	color: var(--wp--preset--color--rs-blue-on-navy);
}

.rs-single-cta-card__body {
	color: var(--wp--preset--color--rs-white);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
}

/* A custom card's rich body links keep on-navy contrast whether visited, hovered or pressed. */
.rs-single-cta-card__body a:is(:link, :visited) {
	color: var(--wp--preset--color--rs-blue-on-navy);
}

.rs-single-button,
.rs-single-button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding-inline: var(--wp--preset--spacing--4);
	border: 2px solid var(--wp--preset--color--rs-blue-accessible);
	border-radius: var(--wp--custom--recordsure--radius--control);
	background: var(--wp--preset--color--rs-blue-light);
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.25rem;
	text-decoration: none;
	cursor: pointer;
}

.rs-single-button:hover {
	background: var(--wp--preset--color--rs-white);
}

.rs-single-rail-section,
.rs-single-card {
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
}

.rs-single-rail-section h2,
.rs-single-related-band h2,
.rs-single-faq h2,
.rs-single-sources h2 {
	margin-block-start: 0;
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--lg);
}

.rs-single-card-grid,
.rs-single-metrics ul,
.rs-single-snapshot ul {
	display: grid;
	gap: var(--wp--preset--spacing--5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-single-card__title {
	margin-block: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.375;
}

.rs-single-card__title a {
	color: inherit;
	text-decoration: none;
}

.rs-single-card__title a:hover,
.rs-single-text-link:hover {
	text-decoration: underline;
}

.rs-single-card__meta {
	min-width: 0;
	margin: 0;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
	overflow-wrap: anywhere;
}

.rs-single-card__meta--client {
	word-break: break-word;
}

.rs-single-text-link {
	color: var(--wp--preset--color--rs-blue-accessible);
	font-weight: 600;
}

.rs-single-faq {
	display: grid;
	gap: var(--wp--preset--spacing--3);
}

/*
 * Question rows take the Figma's rs-border (E4E0EF) outline, the operator's
 * choice on 15 October 2026. Each row's question and chevron identify it,
 * so the decorative edge is not its only boundary.
 */
.rs-single-faq .rs-faq__item {
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
}

.rs-single-faq .rs-faq__question {
	padding: var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--rs-navy);
}

.rs-single-faq .rs-faq__item[data-open] .rs-faq__question {
	background: var(--wp--preset--color--rs-off-white);
}

.rs-single-faq .rs-faq__answer {
	padding: 0 var(--wp--preset--spacing--4) var(--wp--preset--spacing--4);
}

/*
 * The editorial banner, as the Figma draws it: a person icon in a round
 * badge, the author in semibold over the publication date, and the share row
 * of two square icon buttons. Below 40rem the share row sits under the author.
 */
.rs-single-byline {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	padding-block-start: var(--wp--preset--spacing--8);
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
}

@media (min-width: 40rem) {

	.rs-single-byline {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.rs-single-byline__author,
.rs-single-byline__share {
	display: flex;
	gap: var(--wp--preset--spacing--3);
	align-items: center;
	min-width: 0;
}

.rs-single-byline__text {
	min-width: 0;
}

.rs-single-byline p {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
}

.rs-single-byline__name {
	color: var(--wp--preset--color--rs-navy);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.rs-single-byline__date {
	color: var(--wp--preset--color--rs-slate);
}

.rs-single-byline__avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--wp--custom--recordsure--radius--pill);
	background: color-mix(in srgb, var(--wp--preset--color--rs-navy-mid) 10%, var(--wp--preset--color--rs-white));
	color: var(--wp--preset--color--rs-navy-mid);
}

.rs-single-byline__glyph {
	width: 1.25rem;
	height: 1.25rem;
}

.rs-single-share {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	align-items: center;
}

.rs-single-share__label {
	color: var(--wp--preset--color--rs-slate);
	font-weight: 400;
}

/*
 * Square icon buttons with the Figma's rs-border (E4E0EF) edge, the
 * operator's choice on 15 October 2026. The slate icon identifies each one
 * (11.68:1 on white), so the decorative edge is not its only boundary;
 * hovered, it takes the slate-light edge (3.83:1) and a navy icon. Below 64rem each keeps a 44px
 * touch target; from 64rem it is the Figma's 32px, above the 24px minimum.
 */
.rs-single-share__link,
.rs-single-share__copy {
	display: inline-flex;
	flex: none;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--small-surface);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-slate);
	text-decoration: none;
	cursor: pointer;
	transition:
		color var(--wp--custom--recordsure--motion--button) ease,
		border-color var(--wp--custom--recordsure--motion--button) ease;
}

.rs-single-share__link:hover,
.rs-single-share__copy:hover {
	border-color: var(--wp--preset--color--rs-slate-light);
	color: var(--wp--preset--color--rs-navy);
}

.rs-single-share__glyph {
	width: 1rem;
	height: 1rem;
}

@media (min-width: 64rem) {

	.rs-single-share__link,
	.rs-single-share__copy {
		width: 2rem;
		height: 2rem;
	}
}

.rs-single-share__status {
	color: var(--wp--preset--color--rs-blue-strong);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
}

/*
 * The facts band is one lavender band, the Figma's indigo-100 at 30%, with no
 * inner panel: the facts sit straight on it, 32px inside its hairline top rule.
 */
.rs-single-metrics {
	padding-block: var(--wp--preset--spacing--8);
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
	background: var(--wp--preset--color--rs-lavender);
}

.rs-single-metrics ul {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
}

.rs-single-metrics li {
	min-width: 0;
}

.rs-single-metrics strong,
.rs-single-snapshot strong {
	display: block;
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 800;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* The Figma's facts: 30px bold on 36px. */
.rs-single-metrics strong {
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 1.2;
}

.rs-single-metrics span,
.rs-single-snapshot span {
	display: block;
	margin-block-start: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.375;
}

.rs-single-metrics span {
	margin-block-start: 0.25rem;
	color: var(--wp--preset--color--rs-slate);
	overflow-wrap: anywhere;
}

/* Engagement snapshot: a ruled grid that runs to the panel edges, as in the Figma. */
.rs-single-snapshot ul {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 0 calc(-1 * var(--wp--preset--spacing--6)) calc(-1 * var(--wp--preset--spacing--6));
}

.rs-single-snapshot li {
	min-width: 0;
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	border-block-start: 1px solid var(--wp--preset--color--rs-slate-light);
}

.rs-single-snapshot li:first-child {
	border-block-start: 0;
}

.rs-single-snapshot strong {
	color: var(--wp--preset--color--rs-white);
}

.rs-single-snapshot span {
	color: var(--wp--preset--color--rs-blue-on-navy);
	overflow-wrap: anywhere;
}

@media (min-width: 40rem) {

	.rs-single-snapshot ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rs-single-snapshot li:nth-child(2) {
		border-block-start: 0;
	}

	.rs-single-snapshot li:nth-child(even) {
		border-inline-start: 1px solid var(--wp--preset--color--rs-slate-light);
	}

	/* An odd final fact spans the row, so the grid never leaves an empty cell. */
	.rs-single-snapshot li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

.rs-single-related-band {
	padding-block: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--rs-off-white);
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
}

.rs-single-related-band__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4);
	align-items: end;
	justify-content: space-between;
}

.rs-single-related-band__head h2 {
	margin-block-end: 0;
}

.rs-single-card-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	margin-block-start: var(--wp--preset--spacing--8);
}

@media (min-width: 64rem) {

	.rs-single-body__inner {
		grid-template-columns: minmax(0, 48rem) minmax(18rem, 20rem);
		gap: var(--wp--preset--spacing--16);
		align-items: start;
	}

	.rs-single-rail {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 6rem);
	}

	.rs-single-metrics ul {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {

	.rs-single-button,
	.rs-single-share__link,
	.rs-single-share__copy {
		transition: none;
	}
}

/* ─── Singles: 16 October 2026 Figma revision ───────────────────────────── */

/*
 * The singles' bands meet edge to edge. WordPress's flow layout puts its 24px
 * block gap above every child of main after the first, which showed as a
 * strip of the off-white main background under the hero, around the facts
 * band and above the More reading band; each band draws its own hairline top
 * rule instead.
 */
.rs-main.rs-main--single > * {
	margin-block: 0;
}

/* The light hero ends 40px below its content, as both Figma singles do. */
.rs-main--single .rs-single-hero--light {
	padding-block-end: var(--wp--preset--spacing--10);
}

/*
 * Quieter metadata: where the Figma sets text in slate at 60%, which fails at
 * 3.7:1 on white, the insight's date and reading time, the rail dates and the
 * download card's PDF line take slate mixed 75% with white instead: 5.5:1 on
 * white and 5.2:1 on lavender. Text the Figma sets in full slate, such as the
 * download band's PDF line and the byline date, stays rs-slate.
 */
.rs-main--single {
	--rs-single-muted: color-mix(in srgb, var(--wp--preset--color--rs-slate) 75%, var(--wp--preset--color--rs-white));
}

/*
 * A type chip takes its insight type's tone from the one rule per tone it
 * shares with the insight indexes (News green, Analysis & Perspectives blue
 * and Guides purple): the tone fills and edges the chip, and the type's name
 * stays rs-navy-deep, above 14:1 on every tint.
 */
.rs-single-type-chip,
.rs-main--single .rs-single-chip--type {
	display: inline-flex;
	align-items: center;
	min-height: 0;
	padding: 0.125rem 0.5rem;
	border-radius: 0.25rem;
	background: var(--rs-tone-tint, var(--wp--preset--color--rs-off-white));
	box-shadow: inset 0 0 0 1px var(--rs-tone-edge, var(--wp--preset--color--rs-slate-light));
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1rem;
	text-transform: none;
}

/* The hero's type chip is the Figma's larger one. */
.rs-main--single .rs-single-chip--type {
	padding-inline: 0.625rem;
	border-radius: var(--wp--custom--recordsure--radius--control);
}

/*
 * The insight meta row: the date and the reading time in the Figma's regular
 * 12px with normal spacing, quieter than the title, parted by a dot.
 */
.rs-single-hero--light .rs-single-meta--insight {
	color: var(--rs-single-muted);
	font-weight: 400;
	letter-spacing: normal;
}

.rs-single-meta__read::before {
	content: "·";
	content: "·" / "";
	margin-inline-end: var(--wp--preset--spacing--3);
}

/*
 * The side-column call to action's button is the Figma's flat fill with no
 * border, the operator's request on 15 October 2026: rs-navy-deep on
 * rs-blue-light (14.91:1), which stands well clear of the navy card. Focus
 * takes the dark-surface ring.
 */
.rs-single-cta-card__action {
	margin: var(--wp--preset--spacing--5) 0 0;
}

.rs-single-cta-card .rs-single-button {
	border: 0;
}

.rs-single-cta-card :focus-visible {
	outline-color: var(--wp--preset--color--rs-blue-on-navy);
}

/*
 * The case study PDF card in the side column: a navy tile with the download
 * icon in brand blue (6.43:1), the title over its line, and an arrow, inside
 * the Figma's rs-border (E4E0EF) edge. The tile and the title identify the
 * card, so the edge is decorative; hovered, it takes the slate-light edge and
 * the title the accessible blue (5.49:1).
 */
.rs-single-download-card__link,
.rs-single-download-card__link:visited {
	display: flex;
	gap: var(--wp--preset--spacing--4);
	align-items: center;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
	text-decoration: none;
	transition: border-color var(--wp--custom--recordsure--motion--button) ease;
}

.rs-single-download-card__link:hover {
	border-color: var(--wp--preset--color--rs-slate-light);
}

.rs-single-download-card__icon,
.rs-single-download__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--wp--custom--recordsure--radius--small-surface);
	background: var(--wp--preset--color--rs-navy);
	color: var(--wp--preset--color--rs-blue);
}

.rs-single-download-card__glyph,
.rs-single-download-card__arrow {
	flex: none;
	width: 1rem;
	height: 1rem;
}

.rs-single-download-card__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.rs-single-download-card__title {
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1rem;
	overflow-wrap: anywhere;
}

.rs-single-download-card__link:hover .rs-single-download-card__title {
	color: var(--wp--preset--color--rs-blue-accessible);
}

.rs-single-download-card__meta,
.rs-single-download-card__arrow {
	color: var(--rs-single-muted);
}

.rs-single-download-card__meta {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
}

/*
 * Related reading and Recent articles: the Figma's rail card. A heading in
 * small capitals over a hairline, then each article with its square
 * thumbnail, its type chip in its tone, its title cut to two lines and, on
 * insights, its short date, parted by hairlines, with All insights at the
 * foot. The title is the item's one link and covers the whole item, whose
 * focus ring is drawn inside its edge.
 */
.rs-single-rail-list {
	min-width: 0;
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
}

.rs-single-rail-list__heading {
	margin: 0;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border-block-end: 1px solid var(--wp--preset--color--rs-border);
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1rem;
	text-transform: uppercase;
}

.rs-single-rail-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-single-rail-item {
	position: relative;
	display: flex;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--4);
	transition: background-color var(--wp--custom--recordsure--motion--button) ease;
}

.rs-single-rail-item + .rs-single-rail-item {
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
}

.rs-single-rail-item:hover {
	background: var(--wp--preset--color--rs-lavender);
}

.rs-single-rail-item__media {
	display: block;
	flex: none;
	width: 4rem;
	height: 4rem;
	overflow: hidden;
	border-radius: var(--wp--custom--recordsure--radius--small-surface);
	background: var(--wp--preset--color--rs-lavender);
}

.rs-single-rail-item__media--empty {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--rs-border);
}

.rs-single-rail-item__media img,
.rs-single-rail-item__media .tcc-media-wrapper {
	display: block;
	width: 100%;
	height: 100%;
}

.rs-single-rail-item__media img {
	object-fit: cover;
}

.rs-single-rail-item__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.rs-single-rail-item__body .rs-single-type-chip {
	margin-block-end: 0.375rem;
}

.rs-single-rail-item__link,
.rs-single-rail-item__link:visited {
	color: var(--wp--preset--color--rs-navy);
	text-decoration: none;
}

.rs-single-rail-item__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.rs-single-rail-item__link:focus-visible {
	outline: 0;
}

.rs-single-rail-item__link:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--rs-blue-accessible);
	outline-offset: -2px;
}

.rs-single-rail-item__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.375;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* Hovered on the lavender fill the title takes the accessible blue (5.17:1). */
.rs-single-rail-item:hover .rs-single-rail-item__title {
	color: var(--wp--preset--color--rs-blue-accessible);
}

.rs-single-rail-item__date {
	margin-block-start: 0.25rem;
	color: var(--rs-single-muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
}

.rs-single-rail-list__footer {
	margin: 0;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
}

.rs-single-rail-list__all,
.rs-single-rail-list__all:visited {
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1rem;
	text-decoration: none;
}

.rs-single-rail-list__all:hover {
	color: var(--wp--preset--color--rs-blue-strong);
	text-decoration: underline;
}

.rs-single-rail-list__arrow {
	flex: none;
	width: 0.75rem;
	height: 0.75rem;
}

/* The More case studies card takes the rail cards' heading and link size; its
   rs-border edge is the one the rail cards share. */
.rs-single-rail .rs-single-rail-section h2 {
	margin-block-end: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1rem;
	text-transform: uppercase;
}

.rs-single-rail .rs-single-rail-section p {
	margin: 0;
}

.rs-single-rail .rs-single-text-link {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	text-decoration: none;
}

/*
 * The case study PDF band under the article: the download tile, the heading
 * over the PDF's line, and the Figma's dark Download button, on the lavender
 * band colour inside the Figma's rs-border (E4E0EF) edge. On narrow screens
 * the button wraps under the text.
 */
.rs-single-download {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	align-items: center;
	margin-block-start: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-lavender);
}

.rs-main--single .rs-single-download__icon {
	width: 2.5rem;
	height: 2.5rem;
}

.rs-single-download__glyph {
	width: 1.25rem;
	height: 1.25rem;
}

.rs-single-download__text {
	flex: 1 1 12rem;
	min-width: 0;
}

.rs-single-download__heading {
	margin: 0;
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.375;
	overflow-wrap: anywhere;
}

/* The Figma sets the band's PDF line in full slate (text-rs-slate), unlike the card's. */
.rs-single-download__meta {
	margin: 0.125rem 0 0;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
	overflow-wrap: anywhere;
}

.rs-single-download__action {
	margin: 0;
}

/*
 * The Figma's dark button keeps its own colours in every state, so a visited
 * or pressed link never turns its text navy on navy: white on rs-navy
 * (15.30:1), on rs-navy-mid hovered (11.85:1) and on rs-navy-deep pressed
 * (18.05:1). It keeps a 44px target below 64rem.
 */
.rs-single-download__button {
	display: inline-flex;
	gap: 0.375rem;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	border-radius: var(--wp--custom--recordsure--radius--control);
	background: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1rem;
	text-decoration: none;
	transition: background-color var(--wp--custom--recordsure--motion--button) ease;
}

.rs-main .rs-single-download__button,
.rs-main .rs-single-download__button:visited,
.rs-main .rs-single-download__button:hover,
.rs-main .rs-single-download__button:active {
	color: var(--wp--preset--color--rs-white);
}

.rs-single-download__button:hover {
	background: var(--wp--preset--color--rs-navy-mid);
}

.rs-single-download__button:active {
	background: var(--wp--preset--color--rs-navy-deep);
}

.rs-single-download__button-glyph {
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
}

@media (min-width: 64rem) {

	.rs-single-download__button {
		min-height: 2rem;
	}
}

/*
 * The share buttons are icon controls, not prose links, so a visited one keeps
 * its slate icon rather than taking the prose links' visited navy; hovered, it
 * still turns navy.
 */
.rs-main .rs-single-share__link:visited,
.rs-main .rs-single-share__copy:visited {
	color: var(--wp--preset--color--rs-slate);
}

.rs-main .rs-single-share__link:hover,
.rs-main .rs-single-share__copy:hover {
	color: var(--wp--preset--color--rs-navy);
}

@media (prefers-reduced-motion: reduce) {

	.rs-single-download-card__link,
	.rs-single-download__button,
	.rs-single-rail-item {
		transition: none;
	}
}

/* ─── End of the singles 16 October 2026 Figma revision ─────────────────── */

@media (min-width: 64rem) {

	.rs-main--collection .tcc-hero__inner,
	.rs-single-hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.8fr);
		align-items: center;
	}

	/*
	 * Without a picture the index hero runs the full width, as the Figma's
	 * does: an introduction sits beside the headline, their last lines
	 * aligned, under the trail and eyebrow. Without an introduction the
	 * headline keeps the full width.
	 */
	.rs-main--collection .tcc-hero:not(.tcc-hero--media) .tcc-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.rs-main--collection .tcc-hero:not(.tcc-hero--media) .tcc-hero__text {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--8);
		align-items: end;
		max-width: none;
	}

	.rs-main--collection .tcc-hero:not(.tcc-hero--media) .tcc-hero__text > * {
		grid-column: 1 / -1;
	}

	.rs-main--collection .tcc-hero:not(.tcc-hero--media) .tcc-hero__title:has(+ .tcc-hero__summary) {
		grid-column: 1;
	}

	.rs-main--collection .tcc-hero:not(.tcc-hero--media) .tcc-hero__summary {
		grid-column: 2;
		margin-block-start: 0;
		padding-block-end: var(--wp--preset--spacing--2);
	}

	/* Beside a picture the index copy keeps its trail on the shared rhythm. */
	.rs-main--collection .tcc-hero--media .tcc-hero__inner {
		align-items: start;
	}

	.rs-main--collection .tcc-card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Light call to action */
.rs-cta-band--light .rs-cta-band__heading {
	color: var(--wp--preset--color--rs-navy-deep);
}

.rs-cta-band--light .rs-cta-band__content {
	color: var(--wp--preset--color--rs-slate);
}

/* Related technology */
.rs-related .rs-section-head {
	text-align: center;
}

.rs-related .rs-section-head__intro {
	margin-inline: auto;
}

/*
 * ─── Technology pages: the 15 October 2026 Figma pass ─────────────────────
 * The shared Trusted by band on technology and sector pages, the proof-point
 * and outcome-card outlines, the "Who benefits" icons, the compact case-study
 * band, the mini case-study cards and the Recordsure platform band.
 */

/* The shared Trusted by band: the homepage's compact band on other pages. */
.rs-band.rs-trusted-band {
	padding-block: var(--wp--preset--spacing--10);
}

/* Outcome cards take the Figma's light outline, as the proof points do from
   the facts' own rule (decorative: neither is a control). */
.rs-icon-cards--technology-outcomes > .rs-icon-card {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	border-color: var(--wp--preset--color--rs-border);
	background: var(--wp--preset--color--rs-white);
}

.rs-icon-cards--technology-outcomes .rs-icon-card__icon {
	width: 2.75rem;
	height: 2.75rem;
	margin-block-end: var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: color-mix(in srgb, var(--wp--preset--color--rs-blue) 10%, transparent);
}

/* Equal-height cards: each link sits at the foot of its card. */
.rs-icon-cards--technology-outcomes > .rs-icon-card > .rs-icon-card__action {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--5);
}

/* "Who benefits" icons: a 20px line icon in a faint blue tile, as the Figma draws them. */
.rs-page--technology .rs-audience-card__icon {
	background: color-mix(in srgb, var(--wp--preset--color--rs-blue) 10%, transparent);
}

.rs-page--technology .rs-audience-card__icon img {
	width: 1.25rem;
	height: 1.25rem;
}

/* Compact case-study band: the head beside the link to every case study. */
.rs-cases--mini .rs-cases__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	margin-block-end: var(--wp--preset--spacing--12);
}

.rs-cases--mini .rs-cases__head > .rs-section-head {
	min-width: 0;
	margin-block-end: 0;
}

.rs-cases--mini .rs-cases__head > .rs-cases__index {
	margin: 0;
}

/* The Figma's chevron, drawn from the link colour, after the band's and its cards' links. */
.rs-home-outcomes .rs-icon-card__action .rs-arrow::after,
.rs-icon-cards--technology-outcomes .rs-icon-card__action .rs-arrow::after,
.rs-cases--mini .rs-cases__index .rs-arrow::after,
.rs-mini-card__link .rs-arrow::after,
.rs-platform-card__link .rs-arrow::after {
	content: "";
	width: 0.375em;
	height: 0.375em;
	margin-inline: 0.375em 0.125em;
	border-block-start: 2px solid currentcolor;
	border-inline-end: 2px solid currentcolor;
	transform: rotate(45deg);
}

/* Mini case-study cards: a client-type eyebrow, a short title and one link. */
.rs-mini-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--wp--preset--spacing--5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-mini-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-off-white);
}

.rs-mini-card__eyebrow {
	margin: 0;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.025em;
	line-height: 1rem;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.rs-mini-card__title {
	margin: var(--wp--preset--spacing--3) 0 0;
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.375;
	overflow-wrap: anywhere;
}

.rs-mini-card__title:first-child {
	margin-block-start: 0;
}

.rs-mini-card__action {
	margin: auto 0 0;
	padding-block-start: var(--wp--preset--spacing--5);
}

.rs-mini-card__link,
.rs-mini-card__link:visited {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.25rem;
	text-decoration: none;
}

.rs-mini-card__link:hover {
	color: var(--wp--preset--color--rs-blue-strong);
	text-decoration: underline;
}

.rs-mini-card__link:active {
	color: var(--wp--preset--color--rs-navy-deep);
}

/* Recordsure platform band: a dark head above one row of small technology cards. */
.rs-platform__panel {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--panel);
	background: var(--wp--preset--color--rs-white);
}

.rs-platform__head {
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--6);
	background: var(--wp--preset--color--rs-navy-deep);
	color: var(--wp--preset--color--rs-white);
}

.rs-platform__head .rs-section-head {
	margin: 0;
}

/* rs-blue on rs-navy-deep reaches 7.59:1, the Figma's eyebrow colour. */
.rs-platform__head .rs-eyebrow {
	color: var(--wp--preset--color--rs-blue);
}

.rs-platform__head .rs-section-head__heading {
	color: var(--wp--preset--color--rs-white);
}

/* White at 65% on rs-navy-deep reaches 8.03:1; the Figma's 60% is lighter still. */
.rs-platform__head .rs-section-head__intro {
	max-width: 42rem;
	color: color-mix(in srgb, var(--wp--preset--color--rs-white) 65%, transparent);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
}

/*
 * Cells draw their own right and bottom dividers; the list overhangs the
 * panel by one pixel on those sides, so the outermost lines fall under the
 * panel's own border however many columns the row wraps into.
 */
.rs-platform__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0 -1px -1px 0;
	padding: 0;
	list-style: none;
}

.rs-platform-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--wp--preset--spacing--6);
	border-block-end: 1px solid var(--wp--preset--color--rs-border);
	border-inline-end: 1px solid var(--wp--preset--color--rs-border);
}

.rs-platform-card__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: 2.75rem;
	height: 2.75rem;
	margin-block-end: var(--wp--preset--spacing--5);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--rs-blue) 20%, transparent);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: color-mix(in srgb, var(--wp--preset--color--rs-blue-light) 25%, transparent);
}

.rs-platform-card__icon img {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	object-fit: contain;
}

.rs-platform-card__title {
	margin: 0;
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.375;
	overflow-wrap: anywhere;
}

.rs-platform-card > p:not([class]) {
	margin: var(--wp--preset--spacing--3) 0 0;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-platform-card__action {
	margin: auto 0 0;
	padding-block-start: var(--wp--preset--spacing--6);
}

.rs-platform-card__link,
.rs-platform-card__link:visited {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1rem;
	text-decoration: none;
}

.rs-platform-card__link:hover {
	color: var(--wp--preset--color--rs-blue-strong);
	text-decoration: underline;
}

.rs-platform-card__link:active {
	color: var(--wp--preset--color--rs-navy-deep);
}

@media (min-width: 40rem) {

	.rs-platform__head {
		padding: 2.25rem var(--wp--preset--spacing--10);
	}

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

@media (min-width: 64rem) {

	/* The outcomes introduction sits at the right of its head, right-aligned. */
	.rs-page--technology .rs-outcomes .rs-section-head--split .rs-section-head__intro {
		justify-self: end;
		max-width: 24rem;
		text-align: end;
	}

	.rs-mini-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rs-platform__head .rs-section-head--split {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: var(--wp--preset--spacing--8);
	}

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

@media (min-width: 80rem) {

	.rs-platform__cards {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {

	.rs-intro__grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--16);
	}

	.rs-stages__panel {
		align-items: center;
		padding: var(--wp--preset--spacing--10);
	}

	.rs-stages__panel:has(.rs-stages__media) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	}

	.rs-audience-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rs-link-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.rs-case-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rs-cases__index {
		text-align: end;
	}
}

@media (min-width: 80rem) {

	.rs-page--technology .rs-icon-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Outcome pages: the benefits beside the answer, parted by two hairlines as
   the Figma's summary is (divide-y in rs-border), with no edge on the left. */
.rs-benefits {
	display: grid;
	margin: var(--wp--preset--spacing--6) 0 0;
	padding: 0;
	list-style: none;
}

.rs-intro__aside > .rs-benefits:first-child {
	margin-block-start: 0;
}

.rs-benefit {
	min-width: 0;
	padding-block: var(--wp--preset--spacing--4);
}

.rs-benefit:first-child {
	padding-block-start: 0;
}

.rs-benefit:last-child {
	padding-block-end: 0;
}

.rs-benefit + .rs-benefit {
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
}

.rs-benefit > p {
	margin: 0.125rem 0 0;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-benefit > .rs-benefit__title {
	margin: 0;
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.375;
}

/* Card text wraps a long token, such as a pasted URL, inside the card. */
.rs-feature-card__body > p {
	overflow-wrap: anywhere;
}

/* Outcome pages: how success is measured */
.rs-measures {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The measures' outline is the decorative border tint, as the Figma draws it
   (the operator's choice on 16 October 2026): the cards are not controls. */
.rs-measure {
	min-width: 0;
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-off-white);
}

.rs-measure > .rs-measure__title {
	margin: 0;
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.375;
	overflow-wrap: anywhere;
}

.rs-measure > p {
	margin: var(--wp--preset--spacing--2) 0 0;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

/* Who benefits as light cards, on the homepage and the outcome pages: white,
   with the decorative rs-border edge every card takes. The outcome pages
   print only this light variant. */
.rs-audiences--light .rs-audience-card {
	border-color: var(--wp--preset--color--rs-border);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-slate);
}

.rs-audiences--light .rs-audience-card > .rs-audience-card__title {
	color: var(--wp--preset--color--rs-navy-deep);
}

.rs-audiences--light .rs-audience-card__icon {
	background: var(--wp--preset--color--rs-off-white);
}

/* Outcome pages: a heading beside its text */
.rs-challenge-band .rs-section-head {
	margin-block-end: 0;
}

@media (min-width: 64rem) {

	.rs-challenge-band .rs-section-head--split {
		align-items: start;
	}

	.rs-related-outcomes .rs-icon-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Homepage: the outcome line in the hero is the on-navy blue, as the design shows. */
.rs-page--home .rs-hero--dark .rs-hero__lead {
	color: var(--wp--preset--color--rs-blue-on-navy);
	font-weight: 600;
}

.rs-page--home .rs-hero--dark .rs-hero__media img {
	aspect-ratio: 4 / 3;
}

/* The outcome hero's picture is square and the TCC Group hero's 4:3, as
   their Figma heroes show. */
.rs-page--outcome .rs-hero--dark .rs-hero__media img {
	aspect-ratio: 1;
}

.rs-page--group .rs-hero--dark .rs-hero__media img {
	aspect-ratio: 4 / 3;
}

/*
 * Homepage: the fact strip's navy cards on the Figma's rs-blue at 15%, from
 * the token (the operator's feedback on 16 October 2026; a pale blue on the
 * white page), 64px above and below its cards from 64rem as in the Figma, and
 * 48px below 64rem. Only the homepage strip is tinted: the Figma's other fact
 * strips are not.
 */
.rs-page--home .rs-band.rs-stats-band {
	padding-block: var(--wp--preset--spacing--12);
	border-block-end: 0;
	background: color-mix(in srgb, var(--wp--preset--color--rs-blue) 15%, transparent);
}

@media (min-width: 64rem) {

	.rs-page--home .rs-band.rs-stats-band {
		padding-block: var(--wp--preset--spacing--16);
	}
}

.rs-page--home .rs-stat {
	border-color: var(--wp--preset--color--rs-navy);
	background: var(--wp--preset--color--rs-navy);
	color: var(--wp--preset--color--rs-border);
}

.rs-page--home .rs-stat__value {
	color: var(--wp--preset--color--rs-white);
}

/* Buttons and links after a section's text. */
.rs-actions,
.rs-home-actions,
.rs-home-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--8);
	margin: var(--wp--preset--spacing--8) 0 0;
}

.rs-actions,
.rs-home-actions {
	gap: var(--wp--preset--spacing--3);
}

/* Homepage: the answer beside its heading. */
.rs-home-about .rs-split {
	align-items: center;
}

.rs-home-about__body {
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-home-about__body > *,
.rs-home-about__emphasis > * {
	margin-block: 0;
}

.rs-home-about__body > * + *,
.rs-home-about__emphasis > * + * {
	margin-block-start: var(--wp--preset--spacing--4);
}

.rs-home-about__emphasis {
	font-size: var(--wp--preset--font-size--base);
}

/* A split whose image leads on wide screens; the text still reads first. */
.rs-split--media-first {
	align-items: center;
}

.rs-split--media-first .rs-split__media {
	margin-block-start: 0;
}

.rs-split--media-first .rs-split__media img {
	aspect-ratio: 4 / 3;
	box-shadow: var(--wp--preset--shadow--rs-card);
	object-fit: cover;
}

/* Homepage: centred heads above the outcome, role and technology cards. */
.rs-home-outcomes .rs-section-head,
.rs-home-audiences .rs-section-head,
.rs-home-technology .rs-section-head {
	text-align: center;
}

.rs-home-outcomes .rs-section-head__intro,
.rs-home-audiences .rs-section-head__intro,
.rs-home-technology .rs-section-head__intro {
	margin-inline: auto;
}

.rs-home-audiences .rs-home-actions {
	justify-content: center;
}

/*
 * Homepage Business outcomes cards (the operator's feedback on 16 October
 * 2026, measured against the Figma at 1440px): 24px apart with the Figma's
 * 24px padding and softer rs-border edge. Each card's one link, its outcome
 * page's own label, sits at the foot of every card in rs-blue-accessible
 * whether visited or not, and is stretched over the card, so the whole card
 * is that one target without nesting a second control; its focus ring
 * outlines the card. The edge is decorative: the title and the link name the
 * card. Hovered, a card takes the Figma's rs-blue edge at 40% and the card
 * shadow, and its link rs-blue-strong; on a fine pointer the chevron moves
 * 2px. Reduced motion keeps the colours and shadow and drops the movement.
 */
.rs-home-outcomes .rs-icon-cards {
	gap: var(--wp--preset--spacing--6);
}

.rs-home-outcomes .rs-icon-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--6);
	border-color: var(--wp--preset--color--rs-border);
}

.rs-home-outcomes .rs-icon-card > .rs-icon-card__action {
	display: flex;
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--5);
}

.rs-home-outcomes .rs-icon-card__action .rs-text-link:is(:link, :visited) {
	color: var(--wp--preset--color--rs-blue-accessible);
	text-decoration: none;
}

.rs-home-outcomes .rs-icon-card:hover .rs-icon-card__action .rs-text-link:is(:link, :visited) {
	color: var(--wp--preset--color--rs-blue-strong);
}

/* The link covers the whole card, its 1px edge included. */
.rs-home-outcomes .rs-icon-card__action .rs-text-link::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: var(--wp--custom--recordsure--radius--card);
}

.rs-home-outcomes .rs-icon-card__action .rs-text-link:focus-visible {
	outline-color: transparent;
}

.rs-home-outcomes .rs-icon-card__action .rs-text-link:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--rs-blue-accessible);
	outline-offset: 2px;
}

.rs-home-outcomes .rs-icon-card:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--rs-blue) 40%, transparent);
	box-shadow: var(--wp--preset--shadow--rs-card);
}

@media (hover: hover) and (pointer: fine) {

	.rs-home-outcomes .rs-icon-card {
		transition:
			border-color var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out),
			box-shadow var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out);
	}

	.rs-home-outcomes .rs-icon-card__action .rs-arrow {
		transition: transform var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out);
	}

	.rs-home-outcomes .rs-icon-card:hover .rs-icon-card__action .rs-arrow {
		transform: translateX(2px);
	}
}

@media (prefers-reduced-motion: reduce) {

	.rs-home-outcomes .rs-icon-card,
	.rs-home-outcomes .rs-icon-card__action .rs-arrow {
		transition: none;
	}

	.rs-home-outcomes .rs-icon-card:hover .rs-icon-card__action .rs-arrow {
		transform: none;
	}
}

/* Homepage: the steps side by side, each under a short rule with its number. */
.rs-steps--row {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.rs-steps--row > .rs-step {
	isolation: isolate;
	padding: 0;
	border-block-end: 0;
}

/* A short rule and the small number label each step; the large number is
   decoration. Neither number is announced, because the list conveys order. */
.rs-steps--row > .rs-step::before {
	content: counter(rs-step, decimal-leading-zero) " /";
	content: counter(rs-step, decimal-leading-zero) " /" / "";
	position: static;
	display: block;
	inline-size: 3rem;
	margin-block-end: var(--wp--preset--spacing--4);
	padding-block-start: var(--wp--preset--spacing--6);
	border-block-start: 2px solid var(--wp--preset--color--rs-blue);
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1rem;
	letter-spacing: 0.1em;
}

/* The large number is the Figma's 9rem decoration, faint behind the step. */
.rs-steps--row > .rs-step::after {
	content: counter(rs-step, decimal-leading-zero);
	content: counter(rs-step, decimal-leading-zero) / "";
	position: absolute;
	z-index: -1;
	inset-block-start: var(--wp--preset--spacing--4);
	inset-inline-end: 0;
	color: var(--wp--preset--color--rs-off-white);
	font-size: 9rem;
	font-weight: 800;
	line-height: 1;
}

/* Homepage: why Recordsure, numbered like the steps in a quieter tone. The
   Figma sets these numbers light (300); the theme's lightest face is 400. */
.rs-home-reasons__list > .rs-step::before {
	color: var(--wp--preset--color--rs-slate-light);
	font-weight: 400;
}

/* Homepage: Recordsure platform and technology cards. */
.rs-home-technology {
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
}

.rs-home-technology__head {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	margin-block-end: var(--wp--preset--spacing--12);
}

.rs-home-technology__head-title {
	min-width: 0;
}

.rs-home-technology__heading {
	margin: 0;
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

@media (min-width: 64rem) {

	.rs-home-technology__heading {
		font-size: var(--wp--preset--font-size--xxxl);
	}
}

.rs-home-technology--on-navy .rs-home-technology__heading,
.rs-home-technology--on-navy .rs-home-tech-apply__heading {
	color: var(--wp--preset--color--rs-white);
}

.rs-home-technology__intro {
	min-width: 0;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.625;
}

.rs-home-technology--on-navy .rs-home-technology__intro,
.rs-home-technology--on-navy .rs-home-tech-apply__intro {
	color: var(--wp--preset--color--rs-blue-on-navy);
}

.rs-home-technology__intro > * {
	margin-block: 0;
}

.rs-home-tech-panel {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--panel);
	background: var(--wp--preset--color--rs-white);
}

.rs-home-tech-panel__story {
	position: relative;
	overflow: hidden;
	min-width: 0;
	padding: var(--wp--preset--spacing--8);
	background: var(--wp--preset--color--rs-navy-deep);
	color: var(--wp--preset--color--rs-slate-light);
}

.rs-home-tech-panel__glow {
	position: absolute;
	inset-block-end: calc(-1 * var(--wp--preset--spacing--20));
	inset-inline-end: calc(-1 * var(--wp--preset--spacing--16));
	width: 16rem;
	height: 16rem;
	border-radius: var(--wp--custom--recordsure--radius--pill);
	background: color-mix(in srgb, var(--wp--preset--color--rs-blue) 10%, transparent);
	filter: blur(3rem);
}

.rs-home-tech-panel__content {
	position: relative;
}

.rs-home-tech-panel__story .rs-eyebrow {
	color: var(--wp--preset--color--rs-blue);
}

.rs-home-tech-panel__heading {
	margin: var(--wp--preset--spacing--5) 0 0;
	color: var(--wp--preset--color--rs-white);
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.rs-home-tech-panel__story p:not(.rs-eyebrow) {
	color: var(--wp--preset--color--rs-slate-light);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-home-tech-panel__list {
	min-width: 0;
}

.rs-tech-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-tech-list__item + .rs-tech-list__item {
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
}

.rs-tech-list__link {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	min-width: 0;
	padding: var(--wp--preset--spacing--6);
	color: var(--wp--preset--color--rs-slate);
	text-decoration: none;
}

.rs-tech-list__number {
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	line-height: 2rem;
}

.rs-tech-list__name {
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.5rem;
	overflow-wrap: anywhere;
}

.rs-tech-list__summary {
	min-width: 0;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-tech-list__chevron::after {
	content: "\203A";
	color: var(--wp--preset--color--rs-slate-light);
	font-size: var(--wp--preset--font-size--lg);
}

.rs-tech-list__chevron {
	display: none;
}

.rs-home-tech-apply {
	margin-block-start: var(--wp--preset--spacing--16);
}

.rs-home-tech-apply__head {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	margin-block-end: var(--wp--preset--spacing--8);
}

.rs-home-tech-apply__heading {
	min-width: 0;
	margin: 0;
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 2rem;
	overflow-wrap: anywhere;
}

@media (min-width: 64rem) {

	.rs-home-tech-apply__heading {
		font-size: var(--wp--preset--font-size--xxl);
		line-height: 2.25rem;
	}
}

.rs-home-tech-apply__intro {
	min-width: 0;
	max-width: 32rem;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-home-tech-apply__intro > * {
	margin-block: 0;
}

/*
 * The technology cards: each chosen technology page's own card, then the
 * closing card. They are one design on the homepage, the Sectors pages and
 * every outcome page, measured from the Figma's Sectors cards on 16 October
 * 2026: white, the decorative border and the panel radius, a 160px picture
 * with its label at its foot, a 20px title, one 14px paragraph and the button
 * at the card's foot, so the buttons of a row align. The button's target
 * covers the card, whose ring marks keyboard focus.
 */
.rs-featured-tech-cards {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-home-together-grid {
	margin-block-start: var(--wp--preset--spacing--16);
}

.rs-featured-tech-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--panel);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-slate);
}

.rs-featured-tech-card:focus-within {
	outline: 2px solid var(--wp--preset--color--rs-blue-accessible);
	outline-offset: 3px;
}

.rs-home-technology--on-navy .rs-featured-tech-card:focus-within {
	outline-color: var(--wp--preset--color--rs-blue-on-navy);
}

/* The picture fills a fixed 10rem header under the Figma's 30% navy veil,
   40% over the closing card's pair of pictures. An AI-generated picture
   arrives in the media plugin's wrapper, which takes the whole header, and
   its badge stays above the veil. */
.rs-featured-tech-card__media {
	position: relative;
	flex: none;
	height: 10rem;
	overflow: hidden;
	isolation: isolate;
	background: var(--wp--preset--color--rs-navy-deep);
}

.rs-featured-tech-card__media > .tcc-media-wrapper,
.rs-featured-tech-card__pair-item > .tcc-media-wrapper {
	width: 100%;
	height: 100%;
	vertical-align: top;
}

.rs-featured-tech-card__image,
.rs-featured-tech-card__pair-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rs-featured-tech-card__media .tcc-ai-badge {
	z-index: 1;
}

.rs-featured-tech-card__overlay {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--wp--preset--color--rs-navy) 30%, transparent);
}

.rs-featured-tech-card__media--pair .rs-featured-tech-card__overlay {
	background: color-mix(in srgb, var(--wp--preset--color--rs-navy) 40%, transparent);
}

.rs-featured-tech-card__pair {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rs-featured-tech-card__pair-item {
	display: block;
	min-width: 0;
	overflow: hidden;
}

/* Each half is drawn closer, as the Figma's pair is. */
.rs-featured-tech-card__pair-image {
	scale: 1.25;
}

.rs-featured-tech-card__media .rs-chip {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--5);
	inset-inline-start: var(--wp--preset--spacing--5);
	max-width: calc(100% - 2 * var(--wp--preset--spacing--5));
	padding-block: 0.375rem;
	overflow-wrap: anywhere;
}

.rs-featured-tech-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: var(--wp--preset--spacing--6);
}

.rs-featured-tech-card__title {
	margin: 0 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.75rem;
	overflow-wrap: anywhere;
}

/* The paragraph takes the spare height, so every button sits at its card's foot. */
.rs-featured-tech-card__text {
	flex: 1 0 auto;
	margin-block-end: var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-featured-tech-card__text > * {
	margin-block: 0;
}

.rs-featured-tech-card__text > * + * {
	margin-block-start: var(--wp--preset--spacing--3);
}

.rs-featured-tech-card__action {
	margin: auto 0 0;
}

/*
 * The buttons are the light primary pair, rs-white on rs-navy-deep (18.05:1),
 * where the Figma sets rs-navy, and the closing card's the Figma's blue button
 * as the brand maps it: rs-navy-deep on rs-blue-light (14.91:1), never white
 * on rs-blue (2.38:1). A transparent edge keeps the Figma's 44px button while
 * the light button's hover draws its rs-blue-accessible edge (4.54:1).
 */
.rs-featured-tech-card__link,
.rs-featured-tech-card__link:visited {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 1.125rem;
	border: 2px solid transparent;
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-navy-deep);
	color: var(--wp--preset--color--rs-white);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.25rem;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.rs-featured-tech-card__link--light,
.rs-featured-tech-card__link--light:visited {
	background: var(--wp--preset--color--rs-blue-light);
	color: var(--wp--preset--color--rs-navy-deep);
}

.rs-featured-tech-card__arrow {
	flex: none;
	width: 1rem;
	height: 1rem;
}

.rs-featured-tech-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.rs-featured-tech-card__link:focus-visible {
	outline-color: transparent;
}

.rs-featured-tech-card:hover .rs-featured-tech-card__link {
	background: var(--wp--preset--color--rs-navy-mid);
	color: var(--wp--preset--color--rs-white);
}

.rs-featured-tech-card:hover .rs-featured-tech-card__link--light {
	border-color: var(--wp--preset--color--rs-blue-accessible);
	background: var(--wp--preset--color--rs-blue-light);
	color: var(--wp--preset--color--rs-navy-deep);
}

@media (hover: hover) and (pointer: fine) {

	.rs-tech-list__link,
	.rs-tech-list__name,
	.rs-tech-list__chevron::after,
	.rs-featured-tech-card,
	.rs-featured-tech-card__link {
		transition:
			background-color var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out),
			border-color var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out),
			box-shadow var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out),
			color var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out),
			transform var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out);
	}

	.rs-tech-list__link:hover {
		background: color-mix(in srgb, var(--wp--preset--color--rs-blue-light) 15%, var(--wp--preset--color--rs-white));
	}

	.rs-tech-list__link:hover .rs-tech-list__name {
		color: var(--wp--preset--color--rs-blue-accessible);
	}

	.rs-tech-list__link:hover .rs-tech-list__chevron::after {
		color: var(--wp--preset--color--rs-blue-accessible);
	}

	/* The whole card is the button's target, so it lifts its edge and shadow too. */
	.rs-featured-tech-card:hover {
		border-color: var(--wp--preset--color--rs-blue-accessible);
		box-shadow: var(--wp--preset--shadow--rs-card);
	}
}

@media (min-width: 40rem) {

	.rs-tech-list__link {
		grid-template-columns: 3rem minmax(0, 0.8fr) minmax(0, 1.2fr) auto;
		align-items: center;
	}

	.rs-tech-list__chevron {
		display: block;
	}

	.rs-home-tech-apply__head {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: end;
	}

	.rs-home-tech-apply__intro {
		justify-self: end;
		text-align: end;
	}
}

/* Homepage: data and human control, a navy panel on the light band. */
.rs-home-trust__panel {
	display: grid;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--16);
	padding: var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--recordsure--radius--panel);
	background: var(--wp--preset--color--rs-navy);
	color: var(--wp--preset--color--rs-border);
}

.rs-home-trust__content,
.rs-home-trust__points {
	min-width: 0;
}

.rs-home-trust__content > .rs-section-head {
	margin-block-end: 0;
}

.rs-home-trust__points {
	display: grid;
	align-content: center;
	gap: var(--wp--preset--spacing--6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-home-trust__point {
	position: relative;
	min-width: 0;
	min-height: 2rem;
	padding-inline-start: var(--wp--preset--spacing--12);
}

/* A drawn check mark in a small square, as decoration beside each point. */
.rs-home-trust__point::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 2rem;
	height: 2rem;
	border-radius: var(--wp--custom--recordsure--radius--control);
	background: var(--wp--preset--color--rs-navy-mid);
}

.rs-home-trust__point::after {
	content: "";
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.75rem;
	width: 0.5rem;
	height: 0.875rem;
	border-inline-end: 2px solid var(--wp--preset--color--rs-blue-on-navy);
	border-block-end: 2px solid var(--wp--preset--color--rs-blue-on-navy);
	transform: rotate(45deg);
}

.rs-home-trust__point > .rs-home-trust__point-title {
	margin: 0;
	color: var(--wp--preset--color--rs-white);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.25rem;
	overflow-wrap: anywhere;
}

.rs-home-trust__point > p {
	margin: var(--wp--preset--spacing--2) 0 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

@media (min-width: 64rem) {

	.rs-home-technology__head {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		align-items: end;
	}

	.rs-home-technology__intro {
		justify-self: end;
		max-width: 42rem;
	}

	.rs-home-tech-panel {
		display: grid;
		grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
	}

	.rs-home-tech-panel__story {
		padding: var(--wp--preset--spacing--10);
	}

	.rs-tech-list__link {
		padding-inline: var(--wp--preset--spacing--8);
	}

	/* Three across from 64rem, as the Figma's lg:grid-cols-3; one column below. */
	.rs-featured-tech-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rs-home-together-grid > .rs-featured-tech-card {
		grid-column: 1 / -1;
	}

	.rs-split--media-first > .rs-split__aside {
		order: -1;
	}

	.rs-steps--row {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: 0;
	}

	.rs-steps--row > .rs-step {
		padding-inline: var(--wp--preset--spacing--8);
		border-inline-start: 1px solid var(--wp--preset--color--rs-border);
	}

	.rs-steps--row > .rs-step:first-child {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.rs-steps--row > .rs-step::after {
		inset-inline-end: var(--wp--preset--spacing--4);
	}

	.rs-home-trust__panel {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		padding: var(--wp--preset--spacing--16);
	}
}

@media (min-width: 80rem) {

	.rs-page--home .rs-icon-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Sectors index: every sector page as a card from its own fields. */
.rs-sector-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--wp--preset--spacing--5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-sector-card {
	position: relative;
	min-width: 0;
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-off-white);
	color: var(--wp--preset--color--rs-slate);
}

.rs-sector-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-block-end: var(--wp--preset--spacing--4);
	border-radius: var(--wp--custom--recordsure--radius--small-surface);
	background: var(--wp--preset--color--rs-blue-light);
}

.rs-sector-card__icon img {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	object-fit: contain;
}

.rs-sector-card > .rs-sector-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.375;
	overflow-wrap: anywhere;
}

/* A visited name takes the site's visited link colour: the name's own colour
   applies to an unvisited link only. */
.rs-page .rs-sector-card__link {
	text-decoration: none;
}

.rs-page .rs-sector-card__link:link {
	color: var(--wp--preset--color--rs-navy-deep);
}

/* The name's link covers the whole card, so the card is one target. */
.rs-sector-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wp--custom--recordsure--radius--card);
}

/* Focus outlines the whole card, the link's target. Forced colours still draw
   the link's own transparent outline. */
.rs-sector-card__link:focus-visible {
	outline-color: transparent;
}

.rs-sector-card__link:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--rs-blue-accessible);
	outline-offset: 2px;
}

/*
 * The Sectors pages' sector and Business outcomes cards answer a pointer as
 * the Figma's do (16 October 2026), never by underlining the name: the card
 * turns white behind an rs-blue edge at 40% and its name takes
 * rs-blue-accessible (5.49:1; the Figma's rs-blue fails at 2.38:1). The
 * outcome card's link is stretched over the card, as the Figma's whole card
 * is its link. On a fine pointer the card also lifts 2px on the card shadow,
 * so the hover is not colour alone; reduced motion keeps the shadow and drops
 * the lift and the transitions.
 */
.rs-page--sectors .rs-outcomes .rs-icon-card,
.rs-page--sector .rs-outcomes .rs-icon-card {
	position: relative;
	border-color: var(--wp--preset--color--rs-border);
}

.rs-page--sectors .rs-outcomes .rs-icon-card__action .rs-text-link::after,
.rs-page--sector .rs-outcomes .rs-icon-card__action .rs-text-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wp--custom--recordsure--radius--card);
}

.rs-page--sectors .rs-outcomes .rs-icon-card__action .rs-text-link:focus-visible,
.rs-page--sector .rs-outcomes .rs-icon-card__action .rs-text-link:focus-visible {
	outline-color: transparent;
}

.rs-page--sectors .rs-outcomes .rs-icon-card__action .rs-text-link:focus-visible::after,
.rs-page--sector .rs-outcomes .rs-icon-card__action .rs-text-link:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--rs-blue-accessible);
	outline-offset: 2px;
}

.rs-sector-card:hover,
.rs-page--sectors .rs-outcomes .rs-icon-card:hover,
.rs-page--sector .rs-outcomes .rs-icon-card:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--rs-blue) 40%, transparent);
	background: var(--wp--preset--color--rs-white);
}

.rs-page .rs-sector-card:hover .rs-sector-card__link,
.rs-page--sectors .rs-outcomes .rs-icon-card:hover .rs-icon-card__title,
.rs-page--sector .rs-outcomes .rs-icon-card:hover .rs-icon-card__title {
	color: var(--wp--preset--color--rs-blue-accessible);
}

@media (hover: hover) and (pointer: fine) {

	.rs-sector-card,
	.rs-page--sectors .rs-outcomes .rs-icon-card,
	.rs-page--sector .rs-outcomes .rs-icon-card {
		transition:
			background-color var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out),
			border-color var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out),
			box-shadow var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out),
			transform var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out);
	}

	.rs-sector-card:hover,
	.rs-page--sectors .rs-outcomes .rs-icon-card:hover,
	.rs-page--sector .rs-outcomes .rs-icon-card:hover {
		box-shadow: var(--wp--preset--shadow--rs-card);
		transform: translateY(-2px);
	}
}

@media (prefers-reduced-motion: reduce) {

	.rs-sector-card,
	.rs-page--sectors .rs-outcomes .rs-icon-card,
	.rs-page--sector .rs-outcomes .rs-icon-card {
		transition: none;
	}

	.rs-sector-card:hover,
	.rs-page--sectors .rs-outcomes .rs-icon-card:hover,
	.rs-page--sector .rs-outcomes .rs-icon-card:hover {
		transform: none;
	}
}

.rs-sector-card > p {
	margin: var(--wp--preset--spacing--3) 0 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-sector-card > .rs-sector-card__challenge {
	margin-block-start: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--rs-navy-deep);
	font-weight: 600;
	line-height: 1.375;
	overflow-wrap: anywhere;
}

/* Sectors index: the facts and the in-page menu sit on pale blue tints. */
.rs-page--sectors .rs-stats-band {
	background: color-mix(in srgb, var(--wp--preset--color--rs-blue-light) 20%, var(--wp--preset--color--rs-white));
}

.rs-page--sectors .rs-stat {
	background: var(--wp--preset--color--rs-white);
}

.rs-page--sectors .rs-anchor-nav {
	background: color-mix(in srgb, var(--wp--preset--color--rs-blue-light) 15%, var(--wp--preset--color--rs-white));
}

@media (min-width: 80rem) {

	.rs-sector-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Cards built from a page's own rows: the Why Recordsure reasons, highlights
   and commitments, the Responsible AI principles and controls, and the
   security facts and certifications. Their edge is the Figma's rs-border
   hairline (the operator's choice on 16 October 2026). It is decorative: a
   card is not itself a control, and its title names it, so it is not held to
   the 3:1 component threshold. */
.rs-point-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--wp--preset--spacing--5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-point-card {
	min-width: 0;
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-off-white);
	color: var(--wp--preset--color--rs-slate);
}

.rs-point-cards--white > .rs-point-card {
	background: var(--wp--preset--color--rs-white);
}

/* A card's icon is the Figma's tile: 40px, rs-blue at 10% with 12px corners,
   20px above the eyebrow or title, holding the 24px Core Media Assets line
   icon. It is decorative: the renderer hides it, and the title names the card. */
.rs-point-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-block-end: var(--wp--preset--spacing--5);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: color-mix(in srgb, var(--wp--preset--color--rs-blue) 10%, transparent);
}

.rs-point-card__icon img {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	object-fit: contain;
}

.rs-point-card > .rs-point-card__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.025em;
	line-height: 1rem;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.rs-point-card > .rs-point-card__title {
	margin: 0;
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.375;
	overflow-wrap: anywhere;
}

.rs-point-cards--pairs > .rs-point-card > .rs-point-card__title {
	font-size: var(--wp--preset--font-size--md);
}

.rs-why-highlights .rs-point-card > .rs-point-card__title {
	font-size: var(--wp--preset--font-size--lg);
}

.rs-point-card > p {
	margin: var(--wp--preset--spacing--3) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-point-card > .rs-point-card__action {
	margin-block-start: var(--wp--preset--spacing--4);
	font-weight: 600;
}

/* Statement bands: the statement beside its text, as on Why Recordsure and Responsible AI. */
.rs-statement-band__statement {
	margin: 0;
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	line-height: 1.625;
	overflow-wrap: anywhere;
}

@media (min-width: 64rem) {

	.rs-statement-band__statement {
		font-size: var(--wp--preset--font-size--xl);
	}
}

.rs-statement-band__body {
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-statement-band__body > * {
	margin-block: 0;
}

.rs-statement-band__body > * + * {
	margin-block-start: var(--wp--preset--spacing--4);
}

.rs-statement-band__body > .rs-callout {
	margin-block-start: var(--wp--preset--spacing--6);
}

/* A statement band sits on a light blue tint, as the approved designs show. */
.rs-band.rs-statement-band {
	background: color-mix(in srgb, var(--wp--preset--color--rs-blue) 5%, var(--wp--preset--color--rs-off-white));
}

/* Security and data: the facts on the light blue tint, under a label styled as an eyebrow. */
.rs-band.rs-security-facts {
	background: color-mix(in srgb, var(--wp--preset--color--rs-blue) 5%, var(--wp--preset--color--rs-off-white));
}

.rs-security-facts__heading {
	margin-block-end: var(--wp--preset--spacing--6);
	overflow-wrap: anywhere;
}

.rs-point-cards--fifths > .rs-point-card {
	padding: var(--wp--preset--spacing--5);
}

.rs-point-cards--fifths > .rs-point-card > .rs-point-card__title {
	font-size: var(--wp--preset--font-size--sm);
}

.rs-point-cards--fifths > .rs-point-card > p {
	font-size: var(--wp--preset--font-size--xs);
}

/* Security and data: the answer-first text in a readable measure. */
.rs-security-intro__body {
	max-width: 48rem;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-security-intro__body > * {
	margin-block: 0;
}

.rs-security-intro__body > * + * {
	margin-block-start: var(--wp--preset--spacing--4);
}

.rs-security-intro__heading {
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--xl);
}

/* Security and data: the numbered sections follow the introduction across a rule. */
.rs-band.rs-security-protection {
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
}

.rs-security-protection__list > .rs-step > :where(ul, ol) {
	margin: var(--wp--preset--spacing--2) 0 0;
}

/* Security and data: AI and data use shows its panels as white cards, unnumbered,
   each edged with the decorative rs-border hairline the Figma draws. */
.rs-security-ai .rs-steps {
	display: grid;
	gap: var(--wp--preset--spacing--4);
}

.rs-security-ai .rs-step,
.rs-security-ai .rs-step:first-child {
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
}

.rs-security-ai .rs-step::before {
	content: none;
}

/* Security and data: the questions follow the certifications across a rule. */
.rs-page--security .rs-faq-band {
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
}

/* Policy pages: legal facts, prose, scrollable tables and contact details. */
.rs-policy-facts__heading {
	margin-block-end: var(--wp--preset--spacing--6);
}

.rs-policy-facts__list {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
}

.rs-policy-facts__row {
	display: grid;
	gap: var(--wp--preset--spacing--2);
	min-width: 0;
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
}

.rs-policy-facts__label {
	color: var(--wp--preset--color--rs-blue-strong);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1rem;
	text-transform: uppercase;
}

.rs-policy-facts__value {
	margin: 0;
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.5rem;
	overflow-wrap: anywhere;
}

.rs-policy-related__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Related policies are regular-weight links in the Figma, at 14px on 20px. */
.rs-page .rs-policy-related__link,
.rs-page .rs-policy-related__link:visited {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--rs-blue-accessible);
	border-radius: var(--wp--custom--recordsure--radius--small-surface);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	line-height: 1.25rem;
	text-decoration: none;
	transition: background-color var(--wp--custom--recordsure--motion--button) var(--wp--custom--recordsure--motion--ease-out);
}

.rs-page .rs-policy-related__link:hover {
	background: var(--wp--preset--color--rs-blue-light);
}

/* The policy text fills the content box, as every plain page's text does
   (the operator's follow-up decision of 16 October 2026). */
.rs-policy-body__content {
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-policy-section + .rs-policy-section {
	margin-block-start: var(--wp--preset--spacing--12);
	padding-block-start: var(--wp--preset--spacing--10);
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
}

.rs-policy-section__heading,
.rs-policy-related__heading,
.rs-policy-contact__heading,
.rs-policy-cookie__heading {
	margin-block: 0 var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 2rem;
}

.rs-policy-section__body > * {
	margin-block: 0;
}

.rs-policy-section__body > * + * {
	margin-block-start: var(--wp--preset--spacing--5);
}

.rs-policy-section__body :where(h3, h4) {
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.5rem;
}

.rs-policy-section__body :where(ul, ol) {
	padding-inline-start: var(--wp--preset--spacing--6);
	line-height: 1.5;
}

.rs-policy-section__body li + li {
	margin-block-start: var(--wp--preset--spacing--2);
}

.rs-policy-section__body a {
	color: var(--wp--preset--color--rs-blue-accessible);
}

.rs-policy-section__body a:hover {
	color: var(--wp--preset--color--rs-blue-strong);
}

.rs-policy-table-wrap {
	max-width: 100%;
	margin-block: var(--wp--preset--spacing--6);
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--rs-slate-light);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
}

.rs-policy-table-wrap:focus-visible {
	outline: 3px solid var(--wp--preset--color--rs-blue-accessible);
	outline-offset: 3px;
}

.rs-policy-table-wrap table {
	width: 100%;
	min-width: 42rem;
	border-collapse: collapse;
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
}

.rs-policy-table-wrap th,
.rs-policy-table-wrap td {
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--rs-slate-light);
	text-align: start;
	vertical-align: top;
}

.rs-policy-table-wrap th {
	background: var(--wp--preset--color--rs-off-white);
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1rem;
}

/* Each row's first cell names it, semibold as in the Figma. */
.rs-policy-table-wrap td:first-child {
	font-weight: 600;
}

.rs-policy-cookie__content > * {
	margin-block: 0;
}

.rs-policy-cookie__content > * + * {
	margin-block-start: var(--wp--preset--spacing--5);
}

/* The contact card and the cookie preferences panel take the decorative
   rs-border edge every card takes (the operator chose the light panel on
   17 October 2026). The panel is no control: the shared consent manager it
   frames keeps rs-slate-light on its own service boxes and buttons. */
.rs-policy-cookie__panel,
.rs-policy-contact__card {
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-slate);
}

.rs-policy-cookie__note,
.rs-policy-contact__card > * {
	margin-block: 0;
}

.rs-policy-contact__card > * + * {
	margin-block-start: var(--wp--preset--spacing--3);
}

.rs-policy-contact__name {
	color: var(--wp--preset--color--rs-navy-deep);
	font-weight: 600;
}

.rs-policy-contact__card {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
}

.rs-policy-contact__address {
	white-space: normal;
}

.rs-policy-contact a {
	color: var(--wp--preset--color--rs-blue-accessible);
}

.rs-policy-contact a:hover {
	color: var(--wp--preset--color--rs-blue-strong);
}

/* Contact page: form and office sidebar, collapsing from two columns. The band
   holding them is the Figma's off-white body (the operator's request on
   16 October 2026); the form keeps its white surface on it. */
.rs-contact-layout {
	display: grid;
	gap: var(--wp--preset--spacing--8);
	min-width: 0;
}

.rs-contact-layout__main,
.rs-contact-layout__aside {
	min-width: 0;
}

/* The sidebar's sections sit 40px apart, each under its eyebrow, as the
   Figma's do. Its subtle shadow is the Figma's shadow-sm, tinted navy. */
.rs-contact-layout__aside {
	--rs-contact-shadow:
		0 1px 3px 0 color-mix(in srgb, var(--wp--preset--color--rs-navy-deep) 10%, transparent),
		0 1px 2px -1px color-mix(in srgb, var(--wp--preset--color--rs-navy-deep) 10%, transparent);
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--10);
}

.rs-contact-form,
.rs-contact-card {
	min-width: 0;
}

/* The form surface and the privacy card are panels, not controls, so they take
   the decorative rs-border edge every card takes; the fields inside keep their
   own rs-slate-light boundaries at 3.83:1 (see .tcc-marketing-form-block). */
.rs-contact-form__surface,
.rs-contact-form__privacy {
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-slate);
}

.rs-contact-form__surface {
	margin-block-start: var(--wp--preset--spacing--6);
}

/*
 * The marketing-form block's own stylesheet reads TCC Group palette names. On
 * Recordsure those names carry Recordsure colours: control borders on
 * rs-slate-light (3.83:1 on white) and the required marker, focus ring and
 * error states on rs-blue-accessible (5.49:1).
 */
.tcc-marketing-form-block {
	--wp--preset--color--ink: var(--wp--preset--color--rs-navy-deep);
	--wp--preset--color--line: var(--wp--preset--color--rs-slate-light);
	--wp--preset--color--muted: var(--wp--preset--color--rs-slate);
	--wp--preset--color--paper: var(--wp--preset--color--rs-white);
	--wp--preset--color--teal: var(--wp--preset--color--rs-blue-accessible);
	--wp--preset--color--teal-dk: var(--wp--preset--color--rs-blue-strong);
	--wp--preset--shadow--sm: var(--wp--preset--shadow--rs-card);
	--wp--custom--ease-out: var(--wp--custom--recordsure--motion--ease-out);
}

/* The contact surface is the card, so the form inside it is not a second one. */
.rs-contact-form__surface .tcc-marketing-form-block,
.rs-contact-form__surface .tcc-marketing-form {
	max-width: none;
}

.rs-contact-form__surface .tcc-marketing-form-block {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* The form's send button is the primary button for a light surface. */
.tcc-marketing-form-block .tcc-marketing-form__submit {
	min-height: 2.75rem;
	border-radius: var(--wp--custom--recordsure--radius--control);
	background: var(--wp--preset--color--rs-navy-deep);
	color: var(--wp--preset--color--rs-white);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.25rem;
}

/* The block's field labels are the Figma's small uppercase form labels. */
.tcc-marketing-form-block .tcc-marketing-form__label,
.tcc-marketing-form-block .tcc-marketing-form__legend {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.025em;
	line-height: 1rem;
	text-transform: uppercase;
}

.tcc-marketing-form-block .tcc-marketing-form__submit:hover {
	background: var(--wp--preset--color--rs-navy-mid);
}

.tcc-marketing-form-block .tcc-marketing-form__submit:active {
	background: var(--wp--preset--color--rs-navy);
}

.tcc-marketing-form-block .tcc-marketing-form__submit[disabled] {
	background: var(--wp--preset--color--rs-disabled-text);
}

.rs-contact-form__privacy {
	margin-block-start: var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
}

.rs-contact-form__privacy > *,
.rs-contact-card > * {
	margin-block: 0;
}

.rs-contact-form__privacy > * + * {
	margin-block-start: var(--wp--preset--spacing--3);
}

/* A sidebar section is its eyebrow over its card or links, 20px apart. */
.rs-contact-card > * + * {
	margin-block-start: var(--wp--preset--spacing--5);
}

/* The sidebar's headings are the Figma's eyebrow labels, above their cards.
   The Figma's rs-blue reaches only 2.17:1 on the off-white band, so they take
   rs-blue-accessible (5.02:1). */
.rs-contact-card__heading {
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1rem;
	text-transform: uppercase;
}

.rs-contact-card {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
}

/* Our office: a white card with the rs-border edge, 12px corners and a subtle
   shadow, measured from the Figma at 1440px. The edge is decorative: the card
   is not a control, and each of its links is named by its own text. */
.rs-contact-office__card {
	padding: 1.75rem;
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
	box-shadow: var(--rs-contact-shadow);
	color: var(--wp--preset--color--rs-slate);
}

.rs-contact-office__address {
	display: grid;
	gap: var(--wp--preset--spacing--5);
	font-style: normal;
}

.rs-contact-office__address p {
	margin: 0;
}

/* Each row leads with a 36px light blue tile holding a decorative 18px line
   icon in rs-blue, the accent the brand allows for icons. */
.rs-contact-office__place,
.rs-contact-office__link {
	display: flex;
	gap: var(--wp--preset--spacing--4);
	min-width: 0;
}

.rs-contact-office__place {
	align-items: flex-start;
}

.rs-contact-office__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--wp--custom--recordsure--radius--small-surface);
	background: color-mix(in srgb, var(--wp--preset--color--rs-blue) 10%, transparent);
	color: var(--wp--preset--color--rs-blue);
}

.rs-contact-office__place > .rs-contact-office__icon {
	margin-block-start: 0.125rem;
}

.rs-contact-office__icon svg {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
}

.rs-contact-office__text {
	min-width: 0;
}

.rs-contact-office__name {
	color: var(--wp--preset--color--rs-navy);
	font-weight: 700;
	overflow-wrap: anywhere;
}

.rs-contact-office__address .rs-contact-office__name + .rs-contact-office__lines {
	margin-block-start: 0.125rem;
}

/* The address lines are the Figma's muted lavender. Its rs-slate-light reaches
   only 3.83:1 on white, so they take rs-disabled-text (5.51:1), as the header
   search hint does. */
.rs-contact-office__lines {
	color: var(--wp--preset--color--rs-disabled-text);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

/* The telephone and email rows follow a full-width rs-border rule. */
.rs-contact-office__direct {
	display: grid;
	gap: var(--wp--preset--spacing--5);
}

.rs-contact-office__place + .rs-contact-office__direct {
	padding-block-start: var(--wp--preset--spacing--5);
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
}

/* A whole row is its link: a 44px target on touch screens, and the Figma's
   36px row from 64rem. A value without a valid link shows as plain text in
   the same row, with no hover state. */
.rs-contact-office__link {
	align-items: center;
	min-height: 2.75rem;
}

.rs-contact-office__value {
	min-width: 0;
	overflow-wrap: anywhere;
}

.rs-contact-office .rs-contact-office__link:is(:link, :visited) {
	color: var(--wp--preset--color--rs-slate);
	text-decoration: none;
}

.rs-contact-office a.rs-contact-office__link:hover {
	color: var(--wp--preset--color--rs-blue-accessible);
}

.rs-contact-office a.rs-contact-office__link:hover .rs-contact-office__value {
	text-decoration: underline;
}

/* Links in the form band and the sidebar cards only: the hero trail and the
   CTA button keep their own colours. */
.rs-contact-form a,
.rs-contact-card a,
.rs-contact-form a:visited,
.rs-contact-card a:visited {
	color: var(--wp--preset--color--rs-blue-accessible);
}

/* The LinkedIn link closes the sidebar, after Explore more, as the Figma
   places it (the operator's decision of 17 October 2026), in the sidebar's
   14/20 text. */
.rs-contact-social {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
}

.rs-contact-social .rs-text-link {
	font-weight: 500;
}

.rs-contact-form a:hover,
.rs-contact-card a:hover {
	color: var(--wp--preset--color--rs-blue-strong);
}

/* Explore more: the Figma's white link cards under their eyebrow, each with
   the decorative rs-border edge, its name, its description and an arrow. */
.rs-contact-explore__list {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin: var(--wp--preset--spacing--5) 0 0;
	padding: 0;
	list-style: none;
}

.rs-contact-explore__link,
.rs-contact-explore__link:visited {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--wp--preset--spacing--4);
	align-items: center;
	min-width: 0;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--small-surface);
	background: var(--wp--preset--color--rs-white);
	text-decoration: none;
}

.rs-contact-explore__link:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--rs-blue) 40%, var(--wp--preset--color--rs-white));
	box-shadow: var(--rs-contact-shadow);
}

.rs-contact-explore__name {
	color: var(--wp--preset--color--rs-navy);
	font-weight: 600;
}

.rs-contact-explore__description {
	grid-column: 1;
	margin-block-start: 0.125rem;
	color: var(--wp--preset--color--rs-disabled-text);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
	overflow-wrap: anywhere;
}

.rs-contact-explore__arrow {
	grid-row: 1 / span 2;
	grid-column: 2;
	color: var(--wp--preset--color--rs-slate-light);
}

.rs-contact-explore__link:hover .rs-contact-explore__arrow {
	color: var(--wp--preset--color--rs-blue-accessible);
}

/* The sidebar is the Figma's 2/5 column (lg:grid-cols-5 lg:gap-20; the
   operator's decision of 17 October 2026): two of five equal columns and the
   80px gap between them, beside the form's three, so 438.4px in the 1216px
   container (1280px and wider) and 336px at 1024px. */
@media (min-width: 64rem) {

	.rs-contact-layout {
		grid-template-columns: minmax(0, 1fr) calc((100% - 4 * var(--wp--preset--spacing--20)) * 2 / 5 + var(--wp--preset--spacing--20));
		column-gap: var(--wp--preset--spacing--20);
		align-items: start;
	}

	.rs-contact-layout--single {
		grid-template-columns: minmax(0, 1fr);
	}

	.rs-contact-office__link {
		min-height: 2.25rem;
	}
}

@media (min-width: 80rem) {

	.rs-point-cards--fifths {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {

	.rs-policy-facts__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Awards and recognition: the award cards, three across on a wide screen,
   each with its awarding body, title, recipient and status. Their outline is
   the softer rs-border (the operator's feedback on 16 October 2026); it is
   decorative, because a card is not a control and its text names it. */
.rs-award-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--wp--preset--spacing--5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-award-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--3);
	min-width: 0;
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-off-white);
	color: var(--wp--preset--color--rs-slate);
}

.rs-award-card > * {
	max-width: 100%;
	margin: 0;
}

.rs-award-card__logo img {
	display: block;
	width: auto;
	max-width: 8rem;
	height: auto;
	max-height: 2.5rem;
	object-fit: contain;
}

.rs-award-card > .rs-award-card__body {
	padding: 0.25rem 0.625rem;
	border-radius: var(--wp--custom--recordsure--radius--control);
	background: var(--wp--preset--color--rs-navy-deep);
	color: var(--wp--preset--color--rs-white);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1;
	overflow-wrap: anywhere;
}

.rs-award-card > .rs-award-card__title {
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.375;
	overflow-wrap: anywhere;
}

/* A linked title takes the site's visited link colour: its own colour applies
   to an unvisited link only. */
.rs-page .rs-award-card__link {
	text-decoration: none;
}

.rs-page .rs-award-card__link:link {
	color: var(--wp--preset--color--rs-navy-deep);
}

.rs-page .rs-award-card__link:hover {
	text-decoration: underline;
}

.rs-award-card > .rs-award-card__recipient {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
	overflow-wrap: anywhere;
}

/* The status sits at the foot of the card; its dot is decorative. */
.rs-award-card > .rs-award-card__status {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin-block-start: auto;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--pill);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1rem;
}

.rs-award-card__status::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--rs-mint);
}

@media (min-width: 64rem) {

	.rs-award-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* A hero's optional tagline, beneath its headline: 20px, then 24px from 64rem. */
.rs-hero__tagline {
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.625;
	overflow-wrap: anywhere;
}

@media (min-width: 64rem) {

	.rs-hero__tagline {
		font-size: var(--wp--preset--font-size--xl);
	}
}

.rs-hero--dark .rs-hero__tagline {
	color: var(--wp--preset--color--rs-blue-on-navy);
}

/* An evidence strip's optional label: its heading, styled as an eyebrow. */
.rs-stats-band__heading {
	margin-block-end: var(--wp--preset--spacing--5);
	overflow-wrap: anywhere;
}

/* TCC Group: why that matters, its heading beside its text from the top. */
.rs-group-matters .rs-section-head {
	align-items: start;
}

/* TCC Group: the company cards, three across on a wide screen. */
.rs-company-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--wp--preset--spacing--5);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The cards are white, so the companies' logos read on them, with the softer
 * rs-border outline (the operator's feedback on 16 October 2026). The outline
 * is decorative: each card's logo, name and text name it.
 */
.rs-company-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--4);
	min-width: 0;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
}

/* This website's own company keeps the Figma's rs-blue edge at 30%, on the same
   white card; its "You are here" and aria-current name it. */
.rs-company-card.rs-company-card--here {
	border-color: color-mix(in srgb, var(--wp--preset--color--rs-blue) 30%, transparent);
}

.rs-company-card > * {
	max-width: 100%;
	margin: 0;
}

.rs-company-card > .rs-company-card__name {
	margin-block-end: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/*
 * Larger logos (the operator's feedback on 16 October 2026), as the Figma
 * sets them: each in a 48px row, centred on it, up to 40px tall and 160px wide
 * at its own proportions, 28px above the focus line.
 */
.rs-company-card__logo {
	display: flex;
	align-items: center;
	height: 3rem;
}

.rs-company-card__logo img {
	display: block;
	width: auto;
	max-width: 10rem;
	height: auto;
	max-height: 2.5rem;
	object-fit: contain;
	object-position: left center;
}

.rs-company-card > .rs-company-card__focus {
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1rem;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.rs-company-card > p,
.rs-company-card__list {
	overflow-wrap: anywhere;
}

/* The list, its label and "You are here" take the Figma's 14px on 20px. */
.rs-company-card > .rs-company-card__list-label {
	color: var(--wp--preset--color--rs-navy-deep);
	font-weight: 700;
	line-height: 1.25rem;
}

.rs-company-card > .rs-company-card__list {
	margin-block-start: calc(var(--wp--preset--spacing--2) * -1);
	padding-inline-start: 1.125rem;
	line-height: 1.25rem;
	list-style-type: disc;
}

/* The bullets are the Figma's brand rs-blue dots (the operator's feedback on
   16 October 2026), 8px between items. A bullet is decorative; its item's
   text keeps the card's rs-slate. */
.rs-company-card__list > li::marker {
	color: var(--wp--preset--color--rs-blue);
}

.rs-company-card__list > li + li {
	margin-block-start: var(--wp--preset--spacing--2);
}

/* The link, or this website's "You are here", sits at the foot of the card. */
.rs-company-card > :is(.rs-company-card__action, .rs-company-card__here) {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--2);
}

/*
 * "You are here" takes the buttons' proportions (the operator's feedback on
 * 16 October 2026): the same minimum height, padding, 2px edge, corners and
 * type, sized to its words as they are. It stays text, not a link: no pointer,
 * no press feedback and no focus stop, with its card marked aria-current.
 */
.rs-company-card > .rs-company-card__here {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 var(--wp--preset--spacing--6);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--recordsure--radius--control);
	background: var(--wp--preset--color--rs-blue-light);
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.25rem;
	text-align: center;
}

@media (min-width: 64rem) {

	.rs-company-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Explore further: a small heading over light tiles, each named by its page. */
.rs-related__heading {
	margin: 0 0 var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1rem;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.rs-page-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-page-tile {
	min-width: 0;
}

/* A visited tile takes the site's visited link colour: the tile's own colour
   applies to an unvisited link only. */
.rs-page .rs-page-tile__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	min-height: 3rem;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--rs-slate-light);
	border-radius: var(--wp--custom--recordsure--radius--small-surface);
	background: var(--wp--preset--color--rs-off-white);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.375;
	text-decoration: none;
}

.rs-page .rs-page-tile__link:link {
	color: var(--wp--preset--color--rs-navy-deep);
}

.rs-page .rs-page-tile__link:hover {
	text-decoration: underline;
}

/* Explore further: the Figma's rs-border edge (the operator's choice on
   16 October 2026). As on the singles' controls, the edge is decorative: each
   tile is a link named and identified by its own text and arrow, and keeps the
   2px rs-blue-accessible focus ring at 5.49:1 on white. */
.rs-page .rs-related .rs-page-tile__link {
	border-color: var(--wp--preset--color--rs-border);
}

.rs-page-tile__name {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.rs-page-tile__arrow::after {
	content: "";
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-block-start: 2px solid currentcolor;
	border-inline-end: 2px solid currentcolor;
	transform: rotate(45deg);
}

/* Related pages as pills beneath a call to action, each named by its page.
   These follow the tile rules they override, which share their specificity. */
.rs-page-tiles--pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--3);
}

.rs-cta-band__content > .rs-page-tiles--pills {
	margin-block-start: var(--wp--preset--spacing--8);
}

/* A pill keeps a 44px target, its padding inside it. */
.rs-page .rs-page-tiles--pills .rs-page-tile__link {
	box-sizing: border-box;
	min-height: 2.75rem;
	padding-block: var(--wp--preset--spacing--2);
	border-radius: var(--wp--custom--recordsure--radius--pill);
	background: var(--wp--preset--color--rs-white);
	font-weight: 500;
	line-height: 1.25rem;
}

@media (min-width: 48rem) {

	.rs-point-cards--pairs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {

	/* A points band: a narrow head beside the wider numbered points. */
	.rs-points-band .rs-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}

	/* Without points the head has the band to itself, so no column stands empty. */
	.rs-points-band .rs-split--single {
		grid-template-columns: minmax(0, 1fr);
	}

	.rs-point-cards--thirds {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rs-page-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Governance bar */
.rs-governance {
	border-block-start: 1px solid var(--wp--preset--color--rs-border);
	background: var(--wp--preset--color--rs-white);
}

.rs-governance__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--8);
	padding-block: var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
}

.rs-governance__inner > p {
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}

.rs-governance__label {
	color: var(--wp--preset--color--rs-navy-deep);
	font-weight: 600;
}

/* The expertise statement takes its own line beneath the reviewer and date. */
.rs-governance__statement {
	flex-basis: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
}

.rs-governance__statement > * {
	margin-block: 0;
}

.rs-governance__statement > * + * {
	margin-block-start: var(--wp--preset--spacing--2);
}

@media (min-width: 48rem) {

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

	.rs-pillars {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}

	.rs-pillar + .rs-pillar {
		border-block-start: 0;
		border-inline-start: 1px solid var(--wp--preset--color--rs-border);
	}
}

@media (min-width: 64rem) {

	.rs-band {
		padding-block: var(--wp--preset--spacing--28);
	}

	/*
	 * The Figma sets the page trail in a band of its own above the hero's
	 * columns, so the copy below it centres against a taller picture while
	 * the trail keeps its place. Here the trail stays at the top of a
	 * full-height text column, the copy after it centres in the rest of the
	 * column, and the picture starts level with that copy: one trail line and
	 * the trail's gap lower. A hero without a trail centres all its copy.
	 */
	.rs-hero__inner {
		grid-template-columns: var(--rs-hero-columns, minmax(0, 1.6fr) minmax(0, 1fr));
		column-gap: var(--rs-hero-column-gap, var(--wp--preset--spacing--12));
		align-items: stretch;
	}

	.rs-hero__text {
		display: flex;
		flex-direction: column;
	}

	.rs-hero__text > :first-child:not(.tcc-breadcrumbs),
	.rs-hero__text > .tcc-breadcrumbs + * {
		margin-block-start: auto;
	}

	.rs-hero__text > :last-child {
		margin-block-end: auto;
	}

	.rs-hero__media {
		align-self: center;
	}

	.rs-hero__text:has(> .tcc-breadcrumbs) + .rs-hero__media {
		margin-block-start: calc(1rem + var(--rs-hero-trail-gap));
	}

	.rs-section-head--split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--16);
		align-items: end;
	}

	.rs-section-head--split .rs-section-head__intro {
		margin-block-start: 0;
	}

	.rs-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--16);
	}

	.rs-text-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rs-icon-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rs-insight-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ─── Link card hover edges ────────────────────────────────────────────── */
/*
 * The archive and search cards, the insight cards and the outcome cards take
 * the rs-slate-light edge under a pointer (the operator's decision of
 * 17 October 2026), as the singles' download card and share buttons do,
 * over the rs-border edge they rest on; the Knowledge centre's insight cards
 * keep their rs-blue-light rest. The edge is decorative: each card is named
 * by its title and its link, whose 2px rs-blue-accessible focus ring is
 * unchanged, so keyboard focus takes no edge, as on those cards. The edge
 * reaches 3.83:1 on white, 3.50:1 on rs-off-white and 3.32:1 on rs-sky. The
 * homepage's and the Sectors pages' outcome cards keep their own rs-blue
 * hover, whose rules outrank these, so these rules come after every resting
 * edge they share a weight with. On a fine pointer the edge changes in the
 * button time with `ease`, the motion standard's curve for a colour change on
 * hover, as the download card's and share buttons' edges do; the theme's
 * ease-out token stays with the cards whose hover also lifts or shades them.
 * Reduced motion changes the edge at once.
 */
.rs-card:hover,
.rs-search-result:hover,
.rs-insight-card:hover,
.rs-icon-card:hover {
	border-color: var(--wp--preset--color--rs-slate-light);
}

@media (hover: hover) and (pointer: fine) {

	.rs-card,
	.rs-search-result,
	.rs-insight-card,
	.rs-icon-card {
		transition: border-color var(--wp--custom--recordsure--motion--button) ease;
	}
}

@media (prefers-reduced-motion: reduce) {

	.rs-card,
	.rs-search-result,
	.rs-insight-card,
	.rs-icon-card {
		transition: none;
	}
}

/* ─── Evidence strip edge ──────────────────────────────────────────────── */
/*
 * The evidence strip draws its own bottom edge, so the light band after it on
 * an inner page draws no second top one (see Section separators): exactly one
 * 1px rs-border line where the white strip meets the next band, on the
 * Contact, TCC Group, outcome, sector, Sectors and technology pages (the
 * operator's decision of 17 October 2026). The homepage strip has no bottom
 * edge, so its next band keeps its own.
 */
.rs-page:not(.rs-page--home) > .rs-band.rs-stats-band + .rs-band:not(.rs-band--navy):not(.rs-band--navy-deep) {
	border-block-start: 0;
}
/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 79.9375rem) {

	.tcc-primary-nav-wrapper,
	.tcc-header-cta {
		display: none;
	}

	.rs-brand {
		margin-inline-end: auto;
	}

	.tcc-burger {
		display: flex;
	}

	.tcc-mobile-nav:not([hidden]) {
		display: block;
	}
}

@media (max-width: 40rem) {

	.rs-footer-top {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ─── Meet the team ───────────────────────────────────────────────────── */
/* The approved design steps this page's type at 64rem on the fixed preset
   scale. Every colour is a theme.json token. */

/* The hero has no media, so it keeps one column, from 64rem too, and its
   headline runs to 56rem. Its rhythm is the shared hero rhythm. */
.rs-page--team .rs-hero__heading {
	max-width: 56rem;
}

.rs-page--team .rs-hero--dark .rs-hero__lead {
	max-width: 48rem;
	color: color-mix(in srgb, var(--wp--preset--color--rs-white) 65%, transparent);
}

/* The overview on the mist band: its first block is the lead, and the blocks
   after it follow it, beside it from 64rem. */
.rs-band.rs-team-intro {
	padding-block: var(--wp--preset--spacing--16);
	background: var(--wp--preset--gradient--rs-mist-band);
}

.rs-team-intro__body {
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-team-intro__body > * {
	margin-block: 0;
}

.rs-team-intro__body > * + * {
	margin-block-start: var(--wp--preset--spacing--4);
}

.rs-team-intro__body > :first-child {
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
}

.rs-team-intro__body > :first-child + * {
	margin-block-start: var(--wp--preset--spacing--10);
}

/* A section's head: the eyebrow and heading, then the introduction. Each
   layout arranges the two, and the cards follow 56px below. */
.rs-team-section__head {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	margin-block-end: calc(var(--wp--preset--spacing--12) + var(--wp--preset--spacing--2));
}

.rs-team-section__title,
.rs-team-section__intro {
	min-width: 0;
}

.rs-team-section__title > .rs-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--4);
}

.rs-team-section__heading {
	margin: 0;
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.rs-team-section__intro {
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-team-section__intro > * {
	margin-block: 0;
}

.rs-team-section__intro > * + * {
	margin-block-start: var(--wp--preset--spacing--4);
}

/* Standard: the heading above its introduction, within the prose width. */
.rs-team-section--standard .rs-team-section__head {
	max-width: 48rem;
	gap: var(--wp--preset--spacing--5);
}

/* Statement: a dark band of the heading and its text alone. The first
   paragraph leads; the rest are quieter. */
.rs-team-section--statement .rs-team-section__head {
	gap: var(--wp--preset--spacing--12);
	margin-block-end: 0;
}

.rs-team-section--statement .rs-team-section__title > .rs-eyebrow {
	margin-block-end: var(--wp--preset--spacing--5);
}

.rs-team-section--statement .rs-team-section__heading {
	color: var(--wp--preset--color--rs-white);
}

.rs-team-section--statement .rs-team-section__intro {
	color: color-mix(in srgb, var(--wp--preset--color--rs-white) 55%, transparent);
}

.rs-team-section--statement .rs-team-section__intro > :first-child {
	color: color-mix(in srgb, var(--wp--preset--color--rs-white) 65%, transparent);
	font-size: var(--wp--preset--font-size--md);
}

.rs-team-section--statement .rs-team-section__intro > * + * {
	margin-block-start: var(--wp--preset--spacing--5);
}

.rs-team-section--statement .rs-team-section__intro a:is(:link, :visited) {
	color: var(--wp--preset--color--rs-blue-on-navy);
}

/* The people: one column, two from 40rem and three or four from 64rem. */
.rs-team-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--6);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each card sets its header by its own width (see the container rule). */
.rs-team-grid__item {
	min-width: 0;
	container-type: inline-size;
}

.rs-team-card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
	min-width: 0;
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-slate);
}

.rs-team-card__header {
	display: flex;
	gap: var(--wp--preset--spacing--5);
	align-items: flex-start;
}

.rs-team-card__media {
	flex: none;
	width: var(--wp--preset--spacing--20);
}

.rs-team-card__identity {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The portrait, or the initials standing in for it, is an 80px square with
   the card radius, cropped rather than stretched. */
.rs-team-card__portrait {
	display: block;
	box-sizing: border-box;
	width: var(--wp--preset--spacing--20);
	height: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-blue-light);
	color: var(--wp--preset--color--rs-navy-deep);
	object-fit: cover;
}

.rs-team-card__portrait--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 800;
}

.rs-team-card__name {
	margin: 0;
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.4;
}

.rs-team-card__role {
	margin: var(--wp--preset--spacing--2) 0 0;
	color: var(--wp--preset--color--rs-blue-accessible);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.625;
}

.rs-team-card__caption {
	margin-block-start: var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
	overflow-wrap: anywhere;
}

.rs-team-card__caption > * {
	margin-block: 0;
}

.rs-team-card__caption > * + * {
	margin-block-start: var(--wp--preset--spacing--3);
}

/* The LinkedIn link sits at the card's foot, at least 24px below the text.
   Its 16px glyph is a mask painted in the link colour, inside a 44px target
   whose negative margins keep the glyph on the text's edge. It is the glyph
   people.css paints on the People bridge's own cards, which load only on the
   bridge's routes. */
.rs-team-card__links {
	margin: auto 0 0;
	padding-block-start: calc(var(--wp--preset--spacing--6) - 0.875rem);
}

.rs-team-card__linkedin {
	--rs-team-linkedin-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.94 5.5a2.44 2.44 0 1 1-4.88 0 2.44 2.44 0 0 1 4.88 0ZM2.4 21.5h4.2V8.9H2.4v12.6Zm7.3-12.6h4v1.72h.06a4.42 4.42 0 0 1 3.97-2.18c4.25 0 5.03 2.8 5.03 6.43v6.63h-4.2v-5.88c0-1.4-.02-3.2-1.95-3.2-1.96 0-2.26 1.53-2.26 3.1v5.98H9.7V8.9Z'/%3E%3C/svg%3E");
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 0 -0.875rem -0.875rem;
	color: var(--wp--preset--color--rs-blue-accessible);
}

.rs-team-card__linkedin::before {
	content: "";
	display: block;
	width: var(--wp--preset--spacing--4);
	height: var(--wp--preset--spacing--4);
	background-color: currentcolor;
	-webkit-mask: var(--rs-team-linkedin-glyph) no-repeat center / contain;
	mask: var(--rs-team-linkedin-glyph) no-repeat center / contain;
}

.rs-team-card__linkedin:visited {
	color: var(--wp--preset--color--rs-navy-mid);
}

.rs-team-card__linkedin:hover {
	color: var(--wp--preset--color--rs-blue-strong);
}

.rs-team-card__linkedin:active {
	color: var(--wp--preset--color--rs-navy-deep);
}

/* Forced colours drop the background the glyph is painted with. */
@media (forced-colors: active) {

	.rs-team-card__linkedin::before {
		background-color: LinkText;
		forced-color-adjust: none;
	}
}

/* A card too narrow to set the name beside the portrait, such as a card four
   across just past 64rem, sets the portrait above it, so no name breaks
   mid-word. */
@container (max-width: 17rem) {

	.rs-team-card__header {
		flex-direction: column;
	}
}

/* The call to action: the light variant on the border tint. The accessible
   blue reaches only 4.2:1 on the tint, so the eyebrow takes the strong blue. */
.rs-page--team .rs-cta-band--light {
	background: var(--wp--preset--color--rs-border);
}

.rs-page--team .rs-cta-band--light .rs-cta-band__content {
	max-width: 48rem;
}

.rs-page--team .rs-cta-band--light .rs-cta-band__content > :not(.rs-cta-band__heading) {
	max-width: 42rem;
	margin-inline: auto;
}

.rs-page--team .rs-cta-band--light .rs-eyebrow {
	color: var(--wp--preset--color--rs-blue-strong);
}

.rs-page--team .rs-cta-band--light .rs-eyebrow + .rs-cta-band__heading {
	margin-block-start: var(--wp--preset--spacing--5);
}

.rs-page--team .rs-cta-band--light .rs-cta-band__heading {
	color: var(--wp--preset--color--rs-navy);
}

.rs-page--team .rs-cta-band--light .rs-cta-band__action {
	margin-block-start: var(--wp--preset--spacing--10);
}

@media (min-width: 40rem) {

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

@media (min-width: 64rem) {

	.rs-band.rs-team-intro {
		padding-block: var(--wp--preset--spacing--20);
	}

	.rs-team-intro__body {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--20);
		align-items: start;
	}

	/* The lead spans every row the later blocks fill beside it. */
	.rs-team-intro__body > :first-child {
		grid-row: 1 / span 99;
		font-size: var(--wp--preset--font-size--xl);
	}

	.rs-team-intro__body > :not(:first-child) {
		grid-column: 2;
	}

	.rs-team-intro__body > :first-child + * {
		margin-block-start: 0;
	}

	.rs-team-section__heading {
		font-size: var(--wp--preset--font-size--xxxl);
	}

	.rs-team-section--feature .rs-team-section__head {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		align-items: end;
	}

	.rs-team-section--feature .rs-team-section__intro {
		justify-self: end;
		max-width: 42rem;
	}

	.rs-team-section--statement .rs-team-section__head {
		grid-template-columns: minmax(0, 17fr) minmax(0, 23fr);
		column-gap: var(--wp--preset--spacing--20);
		align-items: center;
	}

	.rs-team-section--standard .rs-team-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.rs-team-section--feature .rs-team-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

	/* ─── Reduced motion ───────────────────────────────────────────────────── */
	@media (prefers-reduced-motion: reduce) {

	.tcc-nav-panel {
		transform: none;
		transition:
			opacity 100ms linear,
			visibility 0s linear 100ms;
	}

	.tcc-nav-item[data-open] > .tcc-nav-panel {
		transition: opacity 100ms linear;
	}

	.tcc-nav-chevron,
	.tcc-burger-bar,
	.tcc-mobile-submenu {
		transition: none;
	}

	.rs-button:active,
	.wp-element-button:active,
	.tcc-header-cta:active {
		transform: none;
	}

	.rs-faq__question::after,
	.rs-page .rs-anchor-nav__link {
		transition: none;
	}

	.rs-tech-list__link,
	.rs-tech-list__name,
	.rs-tech-list__chevron::after,
	.rs-featured-tech-card,
	.rs-featured-tech-card__link {
		transform: none;
		transition: none;
	}
}