/* ==========================================================================
   Reusable components. Every class is od- prefixed and BEM.
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------- */

.od-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--od-s-2);
	min-height: 48px;
	padding: 0 var(--od-s-5);
	border-radius: var(--od-r-pill);
	font-family: var(--od-font-body);
	font-size: var(--od-fs-sm);
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: background-color var(--od-dur) var(--od-ease),
		border-color var(--od-dur) var(--od-ease),
		color var(--od-dur) var(--od-ease),
		transform var(--od-dur) var(--od-ease);
}

.od-btn:active {
	transform: translateY(1px);
}

.od-btn--primary {
	background: var(--od-primary);
	border-color: var(--od-primary);
	color: #fff;
}

.od-btn--primary:hover {
	background: var(--od-primary-600);
	border-color: var(--od-primary-600);
	color: #fff;
}

.od-btn--secondary {
	background: transparent;
	border-color: var(--od-line-strong);
	color: var(--od-ink);
}

.od-btn--secondary:hover {
	border-color: var(--od-primary);
	color: var(--od-primary-600);
}

.od-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--od-primary-600);
	padding-inline: var(--od-s-2);
}

.od-btn--ghost:hover {
	color: var(--od-primary-700);
}

/* For use on --ink sections. */
.od-btn--light {
	background: #fff;
	border-color: #fff;
	color: var(--od-ink);
}

.od-btn--light:hover {
	background: var(--od-primary-100);
	border-color: var(--od-primary-100);
	color: var(--od-ink);
}

.od-btn--outline-light {
	background: transparent;
	border-color: var(--od-on-ink-line);
	color: var(--od-on-ink);
}

.od-btn--outline-light:hover {
	border-color: var(--od-on-ink);
	color: var(--od-on-ink);
}

.od-btn--sm {
	min-height: 42px;
	padding: 0 var(--od-s-4);
	font-size: var(--od-fs-xs);
}

.od-btn--lg {
	min-height: 56px;
	padding: 0 var(--od-s-6);
	font-size: var(--od-fs-body);
}

.od-btn--block {
	display: flex;
	width: 100%;
}

.od-btn:hover .od-arrow {
	transform: translateX(3px);
}

/* --- Badges / chips ------------------------------------------------------ */

.od-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--od-s-2);
	padding: 6px var(--od-s-3);
	border-radius: var(--od-r-pill);
	background: var(--od-primary-100);
	color: var(--od-primary-700);
	font-size: var(--od-fs-xs);
	font-weight: 600;
	line-height: 1.3;
}

.od-badge--outline {
	background: transparent;
	border: 1px solid var(--od-line);
	color: var(--od-body);
}

.od-badge--light {
	background: rgba(255, 255, 255, 0.1);
	color: var(--od-on-ink);
}

/* --- Cards --------------------------------------------------------------- */

.od-card {
	display: flex;
	flex-direction: column;
	background: var(--od-surface);
	border: 1px solid var(--od-line);
	border-radius: var(--od-r);
	/* A resting shadow. Cards previously had none until hover, so a static page
	   — which is how most visitors see it — had literally no depth anywhere. */
	box-shadow: var(--od-shadow-0);
	overflow: hidden;
	height: 100%;
	transition: border-color var(--od-dur) var(--od-ease),
		box-shadow var(--od-dur) var(--od-ease),
		transform var(--od-dur) var(--od-ease);
}

.od-card--interactive:hover,
.od-card--post:hover,
.od-card--quicknav:hover {
	border-color: var(--od-primary);
	box-shadow: var(--od-shadow-3);
	transform: translateY(-3px);
}

.od-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--od-s-3);
	padding: var(--od-s-5);
	flex: 1;
}

.od-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--od-alt-2);
	overflow: hidden;
}

.od-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.od-card__media-fallback {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--od-primary-100), var(--od-alt-2));
}

.od-card__eyebrow {
	font-size: var(--od-fs-xs);
	font-weight: 600;
	letter-spacing: var(--od-ls-eyebrow);
	text-transform: uppercase;
	color: var(--od-primary-600);
}

.od-card__title {
	font-size: var(--od-fs-h3);
	margin: 0;
}

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

.od-card__title a:hover {
	color: var(--od-primary-600);
}

.od-card__text {
	color: var(--od-body);
	font-size: var(--od-fs-sm);
	margin: 0;
	max-width: none;
}

.od-card__meta {
	margin: auto 0 0;
	font-size: var(--od-fs-xs);
	color: var(--od-muted);
}

.od-card__list {
	display: flex;
	flex-direction: column;
	gap: var(--od-s-2);
	margin-top: var(--od-s-1);
}

.od-card__list-item {
	position: relative;
	padding-left: 18px;
	font-size: var(--od-fs-sm);
	color: var(--od-body);
}

.od-card__list-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--od-primary);
}

.od-card__footer {
	margin-top: auto;
	padding-top: var(--od-s-3);
}

.od-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--od-s-2);
	font-size: var(--od-fs-sm);
	font-weight: 600;
	color: var(--od-primary-600);
	text-decoration: none;
}

.od-card__link:hover .od-arrow {
	transform: translateX(3px);
}

/* Editor-only scaffolding. Never rendered for visitors. */
.od-card--placeholder {
	border-style: dashed;
	border-color: var(--od-line-strong);
	background: var(--od-alt);
}

.od-placeholder-note {
	display: inline-flex;
	align-items: center;
	gap: var(--od-s-2);
	font-size: var(--od-fs-xs);
	font-style: italic;
	color: var(--od-muted);
}

/* --- Metric tile --------------------------------------------------------- */

.od-metric {
	display: flex;
	flex-direction: column;
	gap: var(--od-s-1);
}

.od-metric__value {
	font-family: var(--od-font-body);
	font-size: var(--od-fs-metric);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: -0.03em;
	/* Results numbers are evidence, not brand. Large text, so the 3:1
	   graphics threshold applies and --od-green is safe here. */
	color: var(--od-green);
}

.od-metric__label {
	font-size: var(--od-fs-sm);
	font-weight: 600;
	color: var(--od-ink);
}

.od-metric__context {
	font-size: var(--od-fs-xs);
	color: var(--od-muted);
}

.od-section--ink .od-metric__value {
	color: var(--od-green-light);
}

.od-section--ink .od-metric__label {
	color: var(--od-on-ink);
}

/* --- Accordion ----------------------------------------------------------- */

/*
 * Deboxed. Bordered rounded bars with a shadow-lift on open made an open FAQ
 * look like a floating card in a stack of identical boxes — the same rectangle
 * used by cards, quotes, problem and why-us. It is now a ruled list, with the
 * open row marked by a violet edge and a tint rather than by elevation.
 */
.od-accordion {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.od-accordion__item {
	border: 0;
	border-bottom: 1px solid var(--od-line);
	border-left: var(--od-rule) solid transparent;
	border-radius: 0;
	background: none;
	transition: border-color var(--od-dur) var(--od-ease),
		background-color var(--od-dur) var(--od-ease);
}

.od-accordion__item.is-open {
	border-left-color: var(--od-primary);
	background: var(--od-primary-50);
}

.od-accordion__item.is-open .od-accordion__trigger {
	color: var(--od-primary-600);
}

.od-accordion__trigger {
	display: flex;
	align-items: baseline;
	gap: var(--od-s-4);
	width: 100%;
	padding: var(--od-s-5);
	text-align: left;
	font-family: var(--od-font-head);
	font-size: var(--od-fs-h3);
	font-weight: var(--od-fw-mid);
	color: var(--od-ink);
	letter-spacing: var(--od-ls-h3);
}

/* A real tabular numeral in a fixed gutter, so every question aligns on the
   same left edge regardless of its number. */
.od-accordion__num {
	font-family: var(--od-font-body);
	font-size: var(--od-fs-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--od-primary);
	flex: none;
	width: 34px;
}

.od-accordion__label {
	flex: 1;
}

/* Plus/minus built from two bars — no icon file needed. */
.od-accordion__icon {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
}

.od-accordion__icon::before,
.od-accordion__icon::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background: var(--od-primary);
	border-radius: 2px;
	transform: translateY(-50%);
	transition: transform var(--od-dur) var(--od-ease), opacity var(--od-dur) var(--od-ease);
}

.od-accordion__icon::after {
	transform: translateY(-50%) rotate(90deg);
}

.od-accordion__item.is-open .od-accordion__icon::after {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}

/* Answer aligns with the question text, clearing the numeral gutter. */
.od-accordion__panel {
	padding: 0 var(--od-s-5) var(--od-s-5) calc(var(--od-s-5) + 34px + var(--od-s-4));
}

.od-accordion__panel p {
	color: var(--od-body);
	max-width: var(--od-measure);
}

/* --- Form wrapper -------------------------------------------------------- */
/* Every Fluent Forms override is scoped here so plugin styling is beaten in
   exactly one place. FF's own rules use two classes, so ours need three. */

.od-formwrap {
	background: var(--od-surface);
	border: 1px solid var(--od-line);
	border-radius: var(--od-r-xl);
	padding: clamp(20px, 3vw, 40px);
	box-shadow: var(--od-shadow-3);
}

/* The form is a WHITE card that can sit inside a dark section. Without this
   reset it inherits the section's light-on-dark heading colours and the title
   disappears against the card. Always re-assert light-surface tokens here. */
.od-section--ink .od-formwrap,
.od-section--ink .od-formwrap p {
	color: var(--od-body);
}

.od-section--ink .od-formwrap .od-formwrap__title,
.od-section--ink .od-formwrap h1,
.od-section--ink .od-formwrap h2,
.od-section--ink .od-formwrap h3,
.od-section--ink .od-formwrap h4,
.od-section--ink .od-formwrap label {
	color: var(--od-ink);
}

.od-section--ink .od-formwrap .od-formwrap__footnote {
	color: var(--od-muted);
}

/*
 * Left-aligned header, hairline that fades out.
 *
 * Centred copy over left-aligned fields gave the card two competing axes, and
 * the hard full-width rule under it cut the card in half like a receipt. The
 * header now starts on the same left edge every label and input starts on, and
 * the divider fades at its right end so it reads as a seam rather than a cut.
 */
.od-formwrap__header {
	position: relative;
	margin-bottom: var(--od-s-5);
	padding-bottom: var(--od-s-5);
	text-align: left;
}

.od-formwrap__header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--od-line-strong), var(--od-line) 40%, transparent);
}

.od-formwrap__title {
	/* A step above --od-fs-h2 rather than a new clamp, so it still tracks the
	   scale as the viewport changes instead of drifting out of step with it. */
	font-size: calc(var(--od-fs-h2) * 1.15);
	font-weight: var(--od-fw-display);
	/* Sentence case. Caps read as an instruction; "Let's get started" is meant to
	   sound like the start of a conversation, which caps cannot do. */
	text-transform: none;
	letter-spacing: var(--od-ls-tight);
	line-height: 1.15;
	/* Full ink. As a <p> the title inherited --od-body, so the strongest line on
	   the card was set in body-copy grey. */
	color: var(--od-ink);
	margin-bottom: var(--od-s-2);
}

/*
 * The hero form's title in brand blue, with a shimmer passing through it.
 *
 * Guarded by @supports: the effect works by clipping a gradient to the glyphs
 * and making the text itself transparent, so if background-clip: text is not
 * supported the whole block is skipped and the title stays solid ink. Without
 * the guard an unsupporting browser would render an invisible heading.
 *
 * The highlight band is narrow and only a few steps lighter than the base
 * violet — a wide or high-contrast sweep turns a heading into a banner ad.
 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.od-formwrap--hero .od-formwrap__title {
		/*
		 * A true blue base rather than the brand violet, so the one shimmering
		 * line on the page is not competing with every button around it — and a
		 * brighter, tighter highlight band, which is what makes the sweep read
		 * as a glint rather than a slow colour wash.
		 */
		background-image: linear-gradient(
			100deg,
			#1B34D8 0%,
			#2D18E8 34%,
			#9DB4FF 50%,
			#2D18E8 66%,
			#1B34D8 100%
		);
		background-size: 240% 100%;
		background-repeat: no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		animation: od-shimmer 3.4s linear infinite;
	}
}

/*
 * 100% -> 0%, and no further.
 *
 * The first version swept from 130% to -30%, which pushed the (no-repeat)
 * gradient partly off the text box — and any glyph left outside it had no
 * background to clip, so with the text itself transparent those letters simply
 * vanished mid-cycle. With a 240% background, positions between 0% and 100%
 * always cover the box completely, so the highlight travels the full width of
 * the word without the fill ever running out.
 */
@keyframes od-shimmer {
	from {
		background-position: 100% 0;
	}
	to {
		background-position: 0% 0;
	}
}

/* Still blue, just still. */
@media (prefers-reduced-motion: reduce) {
	.od-formwrap--hero .od-formwrap__title {
		animation: none;
		background-position: 50% 0;
	}
}

.od-formwrap__subtitle {
	font-size: var(--od-fs-sm);
	line-height: 1.55;
	color: var(--od-body);
	margin: 0;
	/*
	 * No measure cap here. 42ch was narrower than the card, so the line broke
	 * early and left a ragged column of text with white space to its right while
	 * the fields below ran the full width — the header looked like it belonged
	 * to a narrower card than the one it sits in.
	 */
	max-width: none;
}

/* The footnote is always a reassurance ("no obligation", "we reply within one
   business day"), so it carries a small green availability dot. */
.od-formwrap__footnote {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--od-s-2);
	margin-top: var(--od-s-4);
	font-size: var(--od-fs-xs);
	color: var(--od-muted);
	text-align: center;
}

.od-formwrap__footnote::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--od-green);
	box-shadow: 0 0 0 3px var(--od-green-100);
}

/*
 * Two fields per row from 600px, the way the reference lays it out — a single
 * column of full-width inputs makes a 4-field form look twice as long as it is.
 *
 * Done as a grid on the <form> itself rather than by rebuilding the form in
 * Fluent Forms with container rows, so editors can add or reorder fields in the
 * plugin UI without touching layout. Everything spans the full width by
 * default; only plain inputs pair up, and anything holding a textarea, a
 * captcha or the submit button keeps the full row.
 */
/* The grid goes on the <fieldset>, not the <form>: Fluent Forms wraps every
   field in a fieldset for the screen-reader legend, so the groups are its
   children and never the form's. */
.od-formwrap .fluentform form fieldset {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--od-s-4);
	align-items: start;
}

.od-formwrap .fluentform .ff-el-group {
	margin-bottom: 0;
	min-width: 0;
}

/* Hidden plumbing must not occupy a grid row — nonce and referer inputs, and
   the visually-hidden legend, would each contribute an empty track and a stray
   gap between real fields. */
.od-formwrap .fluentform form fieldset > input[type="hidden"],
.od-formwrap .fluentform form fieldset > .ff-hidden {
	display: none;
}

/* The legend is the form's screen-reader title, so it is taken out of flow
   rather than hidden — display:none would drop it from the a11y tree. */
.od-formwrap .fluentform form fieldset > legend {
	position: absolute;
}

@media (min-width: 600px) {
	.od-formwrap .fluentform form fieldset {
		grid-template-columns: 1fr 1fr;
	}

	.od-formwrap .fluentform form fieldset > * {
		grid-column: 1 / -1;
	}

	.od-formwrap .fluentform form fieldset > .ff-el-group:has(input),
	.od-formwrap .fluentform form fieldset > .ff-el-group:has(select) {
		grid-column: span 1;
	}

	/* A long answer, a checkbox set or the submit keeps the full row whatever
	   it happens to sit beside. */
	.od-formwrap .fluentform form fieldset > .ff-el-group:has(textarea),
	.od-formwrap .fluentform form fieldset > .ff-el-group:has(.ff-el-form-check),
	.od-formwrap .fluentform form fieldset > .ff-el-group:has(button) {
		grid-column: 1 / -1;
	}
}

/* Smaller and quieter than the value it labels. A label at the same size and
   colour as the text typed into the field competes with it. */
.od-formwrap .fluentform .ff-el-input--label label {
	font-size: var(--od-fs-xs);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--od-body);
	margin-bottom: 6px;
}

/*
 * The required mark is not an error.
 *
 * Fluent Forms prints it in the browser's alarm red, so a blank form opened for
 * the first time looked like it had already failed validation. Muted, and set
 * slightly smaller, it does its job without shouting.
 */
.od-formwrap .fluentform .ff-el-is-required.asterisk-right label:after,
.od-formwrap .fluentform .ff-el-is-required.asterisk-left label:before,
.od-formwrap .fluentform .ff-el-input--label.ff-el-is-required label:after {
	color: var(--od-muted);
	font-size: 0.9em;
}

/*
 * Filled fields, not outlined boxes.
 *
 * Six white rectangles outlined on a white card is the dullest a form can look
 * — there is nothing to separate the input from the surface it sits on except a
 * hairline. A tinted fill makes each field read as a slot to put something in,
 * and clearing it to white on focus means the active field is the only white
 * one on the card.
 */
.od-formwrap .fluentform .ff-el-form-control {
	width: 100%;
	min-height: 52px;
	padding: 14px var(--od-s-4);
	border: 1.5px solid transparent;
	border-radius: var(--od-r-sm);
	background: var(--od-alt);
	box-shadow: inset 0 0 0 1px var(--od-line);
	color: var(--od-ink);
	/* 16px minimum, or iOS zooms the page on focus. */
	font-size: 16px;
	line-height: 1.4;
	transition: border-color var(--od-dur) var(--od-ease),
		background-color var(--od-dur) var(--od-ease),
		box-shadow var(--od-dur) var(--od-ease);
}

.od-formwrap .fluentform .ff-el-form-control:hover {
	box-shadow: inset 0 0 0 1px var(--od-line-strong);
}

.od-formwrap .fluentform .ff-el-form-control:focus {
	border-color: var(--od-primary);
	background: var(--od-surface);
	outline: none;
	box-shadow: 0 0 0 4px var(--od-primary-100);
}

.od-formwrap .fluentform .ff-el-form-control::placeholder {
	color: var(--od-muted);
	opacity: 1;
}

/*
 * The select gets the same treatment as every other field, which means killing
 * the OS widget and drawing the chevron ourselves — an inline data URI, so it
 * costs no request. Without this the one dropdown on the form is the only
 * control that does not match the design.
 */
.od-formwrap .fluentform select.ff-el-form-control {
	-webkit-appearance: none;
	appearance: none;
	padding-right: var(--od-s-7);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E12F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--od-s-4) center;
	background-size: 18px 18px;
	cursor: pointer;
}

.od-formwrap .fluentform textarea.ff-el-form-control {
	min-height: 120px;
	resize: vertical;
}

/*
 * The button is the one thing on the card that should look expensive: a graded
 * violet rather than a flat fill, a shadow tinted with the brand colour rather
 * than grey, and a press that actually moves.
 */
.od-formwrap .fluentform .ff-btn-submit {
	width: 100%;
	min-height: 56px;
	padding: 0 var(--od-s-5);
	border: 0;
	border-radius: var(--od-r-pill);
	background: linear-gradient(135deg, var(--od-primary), var(--od-primary-700));
	color: #fff;
	font-family: var(--od-font-body);
	font-size: var(--od-fs-body);
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(78, 18, 240, 0.28);
	transition: transform var(--od-dur) var(--od-ease),
		box-shadow var(--od-dur) var(--od-ease),
		filter var(--od-dur) var(--od-ease);
}

.od-formwrap .fluentform .ff-btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(78, 18, 240, 0.34);
	filter: saturate(1.08);
}

.od-formwrap .fluentform .ff-btn-submit:active {
	transform: translateY(0);
	box-shadow: 0 6px 14px rgba(78, 18, 240, 0.26);
}

@media (prefers-reduced-motion: reduce) {
	.od-formwrap .fluentform .ff-btn-submit:hover,
	.od-formwrap .fluentform .ff-btn-submit:active {
		transform: none;
	}
}

.od-formwrap .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--od-error);
}

.od-formwrap .fluentform .error-text,
.od-formwrap .fluentform .text-danger {
	color: var(--od-error);
	font-size: var(--od-fs-xs);
}

.od-formwrap .ff-message-success {
	padding: var(--od-s-4);
	border-radius: var(--od-r-sm);
	background: rgba(23, 166, 124, 0.1);
	color: var(--od-success);
	font-weight: 600;
}

/* --- Stepper (process) --------------------------------------------------- */

.od-stepper__step {
	position: relative;
	padding-top: var(--od-s-5);
	border-top: 2px solid var(--od-line);
}

.od-stepper__step.is-active,
.od-stepper__step:first-child {
	border-top-color: var(--od-primary);
}

.od-stepper__num {
	font-family: var(--od-font-body);
	font-size: var(--od-fs-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--od-ls-eyebrow);
	color: var(--od-green-600);
}

.od-stepper__title {
	font-size: var(--od-fs-h4);
	font-family: var(--od-font-head);
	font-weight: 700;
	color: var(--od-ink);
	margin: var(--od-s-2) 0 var(--od-s-2);
}

.od-stepper__text {
	font-size: var(--od-fs-sm);
	color: var(--od-body);
	margin: 0;
	max-width: none;
}

.od-stepper__duration {
	display: inline-block;
	margin-top: var(--od-s-3);
	font-size: var(--od-fs-xs);
	color: var(--od-muted);
}

/* --- Quote / testimonial ------------------------------------------------- */

.od-quote {
	display: flex;
	flex-direction: column;
	gap: var(--od-s-4);
	padding: var(--od-s-5);
	background: var(--od-surface);
	border: 1px solid var(--od-line);
	border-radius: var(--od-r);
	height: 100%;
}

.od-quote__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--od-green-600);
	font-size: var(--od-fs-sm);
	letter-spacing: 2px;
}

.od-quote__text {
	font-size: var(--od-fs-body);
	line-height: 1.6;
	color: var(--od-ink);
	margin: 0;
	max-width: none;
}

.od-quote__author {
	display: flex;
	align-items: center;
	gap: var(--od-s-3);
	margin-top: auto;
}

.od-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	background: var(--od-primary-100);
}

.od-avatar--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--od-font-head);
	font-weight: 700;
	color: var(--od-primary);
}

.od-quote__name {
	font-size: var(--od-fs-sm);
	font-weight: 600;
	color: var(--od-ink);
}

.od-quote__role {
	font-size: var(--od-fs-xs);
	color: var(--od-muted);
}

/* --- Logo strip ---------------------------------------------------------- */

.od-logostrip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--od-s-5) var(--od-s-7);
	justify-content: center;
}

.od-logostrip__img {
	max-height: 32px;
	width: auto;
	opacity: 0.6;
	filter: grayscale(1);
}

/* --- Pagination ---------------------------------------------------------- */

.od-pagination {
	margin-top: var(--od-s-7);
}

.od-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--od-s-2);
	justify-content: center;
}

.od-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--od-s-3);
	border: 1px solid var(--od-line);
	border-radius: var(--od-r-sm);
	color: var(--od-body);
	text-decoration: none;
	font-size: var(--od-fs-sm);
	font-weight: 600;
}

.od-pagination .page-numbers:hover {
	border-color: var(--od-primary);
	color: var(--od-primary-600);
}

.od-pagination .page-numbers.current {
	background: var(--od-primary);
	border-color: var(--od-primary);
	color: #fff;
}