/**
 * MRMVR Elements — Service Index.
 *
 * A services section built as an index rather than a display case: a masthead
 * that holds its place down the left while a numbered list of services runs
 * past it on the right, each entry divided from the next by a clay hairline.
 *
 * Deliberately the third thing in this plugin, and not a variation on either of
 * the other two. Feature Cards is separate rounded boxes with centred copy and
 * an icon badge. Signature Panels is one slab subdivided into a grid. This is
 * neither: nothing is boxed, nothing is centred, and the composition is a
 * column of full-width lines whose weight comes from the type and the rules
 * between them. A page can carry all three without reading as one component
 * used three times.
 *
 * What a row does on hover is the whole interaction: a blush wash wipes in from
 * the left, the numeral takes the accent colour, the title steps sideways, an
 * accent rule draws itself along the foot of the row, and — where one is set —
 * a small preview image settles into place at the end of the line.
 *
 * Sizes itself against its own container rather than the viewport, so it
 * behaves correctly inside a narrow Elementor column.
 *
 * @package MRMVR\Elements
 * @since   1.39.0
 */

.mrx-svc-wrap {
	/*
	 * Declared on the wrapper rather than the band: in full-bleed mode this is
	 * what paints the background, and custom properties only inherit downwards.
	 */
	--mrx-si-bg: var(--mrmvr-cream, #fdf8f5);
	--mrx-si-content-max: 1280px;

	/* How many entries sit across the index, and the cap below 1000px. */
	--mrx-si-cols: 2;
	--mrx-si-cols-md: 2;

	/*
	 * These three are on the wrapper rather than on the band, one step removed
	 * from the reason above: grid mode restates all three, and a value
	 * inherited from here is still beaten by the Elementor control, which
	 * writes to the band itself. Declared on the band, grid mode's restatement
	 * would need a specificity the control could not then outrank.
	 */
	--mrx-si-title-size: clamp(21px, 2.7cqi, 32px);
	--mrx-si-row-pad-y: clamp(20px, 2.4cqi, 36px);
	--mrx-si-row-pad-x: clamp(6px, 1.4cqi, 22px);

	container-type: inline-size;
	container-name: mrxi;
	min-height: 0;
}

/* -------------------------------------------------------------------------
 * Column counts
 *
 * The cap for the middle width is set alongside the count rather than worked
 * out from it: three across cannot simply become two on a narrower container
 * without someone having decided that two is still legible there.
 * ---------------------------------------------------------------------- */

.mrx-vcols-1 .mrx-svc-wrap {
	--mrx-si-cols: 1;
	--mrx-si-cols-md: 1;
}

.mrx-vcols-2 .mrx-svc-wrap {
	--mrx-si-cols: 2;
	--mrx-si-cols-md: 2;
}

.mrx-vcols-3 .mrx-svc-wrap {
	--mrx-si-cols: 3;
	--mrx-si-cols-md: 2;
}

.mrx-svc {
	/* Band */
	--mrx-si-radius: 0px;
	--mrx-si-pad: clamp(26px, 3.6cqi, 64px);
	--mrx-si-frame: transparent;
	--mrx-si-head-gap: clamp(32px, 4cqi, 64px);

	/* Split */
	--mrx-si-mast-col: 0.85fr;
	--mrx-si-list-col: 1.6fr;
	--mrx-si-col-gap: clamp(30px, 5cqi, 88px);
	--mrx-si-sticky-top: 96px;

	/* Rows — the two paddings and the title size are set on the wrapper. */
	--mrx-si-row-gap: clamp(14px, 2.2cqi, 36px);
	--mrx-si-divider: rgba(207, 161, 144, 0.42);
	--mrx-si-wash: rgba(251, 230, 221, 0.62);
	--mrx-si-rule: var(--mrmvr-amber, #f57528);
	--mrx-si-rule-height: 2px;
	--mrx-si-shift: 8px;

	/* Numeral */
	--mrx-si-num: rgba(207, 161, 144, 0.95);
	--mrx-si-num-hover: var(--mrmvr-amber, #f57528);
	--mrx-si-num-size: 15px;
	--mrx-si-num-col: 4ch;

	/* Masthead type */
	--mrx-si-eyebrow: var(--mrmvr-clay-deep, #c08e82);
	--mrx-si-heading: var(--mrmvr-navy, #1a2142);
	--mrx-si-heading-accent: var(--mrmvr-amber, #f57528);
	--mrx-si-intro: rgba(26, 33, 66, 0.68);

	/* Row type */
	--mrx-si-title: var(--mrmvr-navy, #1a2142);
	--mrx-si-title-hover: var(--mrmvr-navy, #1a2142);
	--mrx-si-body: rgba(26, 33, 66, 0.66);
	--mrx-si-meta: var(--mrmvr-clay-deep, #c08e82);
	--mrx-si-text-max: 56ch;

	/* The mark at the end of a linked row */
	--mrx-si-mark: var(--mrmvr-navy, #1a2142);
	--mrx-si-mark-bg: transparent;
	--mrx-si-mark-border: rgba(207, 161, 144, 0.6);
	--mrx-si-mark-hover: #ffffff;
	--mrx-si-mark-bg-hover: var(--mrmvr-amber, #f57528);
	--mrx-si-mark-border-hover: var(--mrmvr-amber, #f57528);
	--mrx-si-mark-box: 46px;

	/* Preview image */
	--mrx-si-thumb-w: 140px;
	--mrx-si-thumb-ratio: 4 / 3;
	--mrx-si-thumb-radius: 12px;

	/* Button */
	--mrx-si-btn-bg: var(--mrmvr-navy, #1a2142);
	--mrx-si-btn-color: #ffffff;
	--mrx-si-btn-border: var(--mrmvr-navy, #1a2142);
	--mrx-si-btn-bg-hover: var(--mrmvr-amber, #f57528);
	--mrx-si-btn-color-hover: #ffffff;
	--mrx-si-btn-border-hover: var(--mrmvr-amber, #f57528);

	position: relative;
	padding: var(--mrx-si-pad);
	background-color: var(--mrx-si-bg);
	border: 1px solid var(--mrx-si-frame);
	border-radius: var(--mrx-si-radius);
	font-family: var(--mrmvr-font-body);
}

/* -------------------------------------------------------------------------
 * Layout
 *
 * Split is the composition this was drawn for: the masthead holds one column
 * and the index runs down the other. Stacked is the same parts on one column,
 * for a narrow placement or a page that wants the heading over the list.
 * ---------------------------------------------------------------------- */

/*
 * `stretch` — the grid default — and deliberately not `start`.
 *
 * A sticky element can only travel as far as its containing block allows, and
 * the masthead's containing block is its own grid column. `start` sizes that
 * column to the words in it, which leaves the held masthead nowhere to go: it
 * sits where it is, the index scrolls past beside it, and the column beneath
 * reads as a long empty gap — worse the more services there are.
 *
 * Stretched, the column is as tall as the index next to it. The masthead then
 * holds its place the whole way down and releases at the end, travelling out
 * with the section rather than stopping halfway.
 */
.mrx-vlayout-split .mrx-svc {
	display: grid;
	grid-template-columns: minmax(0, var(--mrx-si-mast-col)) minmax(0, var(--mrx-si-list-col));
	gap: var(--mrx-si-col-gap);
	align-items: stretch;
}

.mrx-vlayout-stack .mrx-svc__masthead {
	margin-bottom: var(--mrx-si-head-gap);
}

/* Nothing beside the index, so it takes the whole width rather than the
   narrow column the masthead would have held. */
.mrx-svc-wrap.mrx-vnomast .mrx-svc {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Sticky needs a scroll container that does not clip. An Elementor container
 * set to hide its overflow is the one thing that silently defeats this, which
 * is why the control says so.
 */
/*
 * Held by default, and released by a class rather than held by one.
 *
 * A widget already on a page carries the settings it was saved with, and a
 * value saved empty stays empty however the control's default reads later.
 * Keying this to `.mrx-vstick-yes` meant any such instance quietly lost its
 * held masthead — the index scrolled away from a heading standing still in a
 * column of empty space, with nothing in the panel to say why. The exception
 * carries the class now, so a setting that never arrives lands on the
 * composition this was drawn for rather than the one without it.
 */
.mrx-vlayout-split .mrx-svc__masthead-inner {
	position: sticky;
	top: var(--mrx-si-sticky-top);
}

.mrx-vstick-off .mrx-svc__masthead-inner {
	position: static;
}

/* -------------------------------------------------------------------------
 * Masthead
 * ---------------------------------------------------------------------- */

.mrx-svc__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2.4px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--mrx-si-eyebrow);
}

.mrx-svc__eyebrow::before {
	content: "";
	width: 34px;
	height: 1px;
	background-color: currentColor;
}

.mrx-svc__heading {
	margin: 0;
	font-family: var(--mrmvr-font-display);
	/* Fallback for browsers without container query units. */
	font-size: clamp(30px, 3.6vw, 52px);
	font-size: clamp(30px, 4.6cqi, 52px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.5px;
	text-wrap: balance;
	color: var(--mrx-si-heading);
}

.mrx-svc__heading em {
	font-style: italic;
	font-weight: 500;
	color: var(--mrx-si-heading-accent);
}

.mrx-svc__intro {
	max-width: 46ch;
	margin: 20px 0 0;
	font-size: 16px;
	line-height: 1.75;
	text-wrap: pretty;
	color: var(--mrx-si-intro);
}

.mrx-svc__intro > :first-child { margin-top: 0; }
.mrx-svc__intro > :last-child { margin-bottom: 0; }

.mrx-svc__actions {
	margin-top: clamp(24px, 2.8cqi, 38px);
}

.mrx-svc__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 34px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.6px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mrx-si-btn-color);
	background-color: var(--mrx-si-btn-bg);
	border: 1px solid var(--mrx-si-btn-border);
	border-radius: 999px;
	cursor: pointer;
	transition: color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		background-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		border-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-svc__button:hover,
.mrx-svc__button:focus-visible {
	color: var(--mrx-si-btn-color-hover);
	background-color: var(--mrx-si-btn-bg-hover);
	border-color: var(--mrx-si-btn-border-hover);
	transform: translateY(-2px);
}

.mrx-svc__button:focus-visible {
	outline: 2px solid var(--mrx-si-rule);
	outline-offset: 3px;
}

.mrx-svc__button-icon {
	display: inline-flex;
	align-items: center;
	font-size: 0.85em;
	line-height: 1;
	transition: transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-svc__button-icon svg,
.mrx-svc__button-icon i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	fill: currentColor;
}

.mrx-svc__button:hover .mrx-svc__button-icon {
	transform: translateX(4px);
}

/* -------------------------------------------------------------------------
 * The index
 * ---------------------------------------------------------------------- */

.mrx-svc__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * One hairline between two entries, never two stacked on each other. The rules
 * that close the set off at the top and bottom are a separate choice, because a
 * band that already carries a background does not always want them.
 */
.mrx-svc__item + .mrx-svc__item {
	border-top: 1px solid var(--mrx-si-divider);
}

.mrx-vrules-yes .mrx-svc__list {
	border-top: 1px solid var(--mrx-si-divider);
	border-bottom: 1px solid var(--mrx-si-divider);
}

/* -------------------------------------------------------------------------
 * Grid mode
 *
 * Eight entries in one column is a long way to read to find the fourth, so the
 * index also runs two or three across. It stays an index rather than turning
 * back into a row of cards: the cells share their hairlines instead of each
 * carrying its own border, and there is no fill, no radius and no shadow to
 * lift one cell off the band.
 *
 * The lines are drawn by the gaps. A one-pixel gap over a divider-coloured
 * list, with each cell painting the band's own ground back over itself, gives
 * a grid whose rules meet exactly at every crossing — which stacked borders do
 * not, and which no amount of `:nth-child` arithmetic can keep correct once
 * the column count changes with the container.
 * ---------------------------------------------------------------------- */

.mrx-svc-wrap.mrx-vgrid {
	/* A cell is not a line: it wants real padding and a title sized to it. */
	--mrx-si-title-size: clamp(19px, 1.9cqi, 27px);
	--mrx-si-row-pad-y: clamp(22px, 2.2cqi, 34px);
	--mrx-si-row-pad-x: clamp(20px, 2.2cqi, 34px);
}

.mrx-svc-wrap.mrx-vgrid .mrx-svc__list {
	display: grid;
	grid-template-columns: repeat(var(--mrx-si-cols), minmax(0, 1fr));
	gap: 1px;
	background-color: var(--mrx-si-divider);
}

/*
 * The cell is a flex line holding one entry, which is the dependable way to
 * make that entry fill it: a percentage height against a grid item resolves
 * only while the item's own height is definite, and a row of cells whose
 * height comes from the tallest copy in it is not that.
 */
.mrx-svc-wrap.mrx-vgrid .mrx-svc__item {
	display: flex;
	background-color: var(--mrx-si-bg);
}

/* The gaps are the dividers now; a border as well would double every line. */
.mrx-svc-wrap.mrx-vgrid .mrx-svc__item + .mrx-svc__item {
	border-top: 0;
}

/*
 * A grid has four edges to close off rather than two, and the outer line has
 * to be a border because there is no gap outside the grid to draw it.
 */
.mrx-vrules-yes .mrx-svc-wrap.mrx-vgrid .mrx-svc__list {
	border: 1px solid var(--mrx-si-divider);
}

/* The entry fills its cell, and its own content sits at the top of it. */
.mrx-svc-wrap.mrx-vgrid .mrx-svc__row {
	flex: 1 1 auto;
	box-sizing: border-box;
	align-content: start;
}

.mrx-svc__row {
	position: relative;
	/*
	 * The wash sits at the back of the row's own stacking context rather than
	 * behind the band, so a row can paint under its own text without the band's
	 * background having to be transparent.
	 */
	isolation: isolate;
	display: grid;
	grid-template-columns: var(--mrx-si-num-col) minmax(0, 1fr) auto;
	grid-template-areas:
		"num  title aside"
		"pad  text  aside";
	align-items: start;
	column-gap: var(--mrx-si-row-gap);
	row-gap: 10px;
	padding: var(--mrx-si-row-pad-y) var(--mrx-si-row-pad-x);
	color: inherit;
	text-decoration: none;
}

/*
 * Description beside the title rather than under it. Wants real width, so the
 * guardrails below put it back on its own line as soon as the container stops
 * being able to hold both.
 */
.mrx-vdesc-beside .mrx-svc__row {
	grid-template-columns: var(--mrx-si-num-col) minmax(0, 1fr) minmax(0, 1.15fr) auto;
	grid-template-areas: "num title text aside";
	align-items: center;
}

/*
 * Numbering switched off. The indent the numeral sat in goes back to the copy
 * rather than staying behind as an inset with nothing in it.
 */
.mrx-svc-wrap.mrx-vnonum .mrx-svc__row {
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"title aside"
		"text  aside";
}

.mrx-vdesc-beside .mrx-svc-wrap.mrx-vnonum .mrx-svc__row {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto;
	grid-template-areas: "title text aside";
}

/*
 * In a cell there is no room to set the numeral, the title, the description
 * and the mark across one line, and no reason to: the cell has already done
 * the dividing that the columns were doing. The numeral and the mark take a
 * line of their own at the head of the cell — which is what a ledger heading
 * looks like — and the title then has the full width beneath them.
 *
 * Both description positions collapse to this. Beside the title is a choice
 * about a wide line, and a cell is not one.
 */
.mrx-svc-wrap.mrx-vgrid .mrx-svc__row,
.mrx-vdesc-beside .mrx-svc-wrap.mrx-vgrid .mrx-svc__row {
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"num   aside"
		"title title"
		"text  text";
	align-items: center;
	row-gap: 12px;
}

.mrx-svc-wrap.mrx-vgrid.mrx-vnonum .mrx-svc__row,
.mrx-vdesc-beside .mrx-svc-wrap.mrx-vgrid.mrx-vnonum .mrx-svc__row {
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"title aside"
		"text  text";
}

.mrx-svc-wrap.mrx-vgrid .mrx-svc__num {
	align-self: center;
}

.mrx-svc-wrap.mrx-vgrid .mrx-svc__title {
	align-self: auto;
}

/* A cell sets the measure; a character count on top of it only fights it. */
.mrx-svc-wrap.mrx-vgrid .mrx-svc__text {
	max-width: none;
}

/* Far too wide to reserve inside a cell. */
.mrx-svc-wrap.mrx-vgrid.mrx-vthumbs-yes .mrx-svc__aside {
	min-width: 0;
}

/* The wash. Wipes in from the left rather than fading, so the row reads as
   being swept rather than switched on. */
.mrx-svc__row::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(90deg, var(--mrx-si-wash), transparent 84%);
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
	transition: opacity var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

/* The accent rule, drawn along the foot of the row over the divider. */
.mrx-svc__row::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: var(--mrx-si-rule-height);
	background-color: var(--mrx-si-rule);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
	transition: transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-svc__row:hover::before,
.mrx-svc__row:focus-visible::before,
.mrx-svc__row:hover::after,
.mrx-svc__row:focus-visible::after {
	opacity: 1;
	transform: none;
}

.mrx-svc__row:focus-visible {
	outline: 2px solid var(--mrx-si-rule);
	outline-offset: -3px;
}

/* -------------------------------------------------------------------------
 * Row parts
 * ---------------------------------------------------------------------- */

/*
 * `baseline` rather than `start`: the numeral and the title are set at very
 * different sizes, and aligning their boxes leaves the numeral floating above
 * the title's first line. Aligning the baselines is what makes it read as an
 * index rather than as a label pinned beside one.
 */
.mrx-svc__num {
	grid-area: num;
	align-self: baseline;
	font-family: var(--mrmvr-font-display);
	font-size: var(--mrx-si-num-size);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: 1px;
	line-height: 1;
	color: var(--mrx-si-num);
	transition: color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-svc__row:hover .mrx-svc__num,
.mrx-svc__row:focus-visible .mrx-svc__num {
	color: var(--mrx-si-num-hover);
	transform: translateY(-2px);
}

.mrx-svc__title {
	grid-area: title;
	align-self: baseline;
	margin: 0;
	font-family: var(--mrmvr-font-display);
	font-size: var(--mrx-si-title-size);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.3px;
	text-wrap: balance;
	color: var(--mrx-si-title);
	transition: color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-svc__row:hover .mrx-svc__title,
.mrx-svc__row:focus-visible .mrx-svc__title {
	color: var(--mrx-si-title-hover);
	transform: translateX(var(--mrx-si-shift));
}

.mrx-svc__text {
	grid-area: text;
	max-width: var(--mrx-si-text-max);
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	text-wrap: pretty;
	color: var(--mrx-si-body);
}

.mrx-svc__aside {
	grid-area: aside;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(12px, 1.6cqi, 22px);
}

/*
 * Where any row in the set carries a preview image, every row reserves the
 * same width for one. Without this the mark at the end of each line sits at a
 * different place depending on whether that row happens to have an image, and
 * the right edge of the index goes ragged.
 */
.mrx-svc-wrap.mrx-vthumbs-yes .mrx-svc__aside {
	min-width: calc(var(--mrx-si-thumb-w) + var(--mrx-si-mark-box) + clamp(12px, 1.6cqi, 22px));
}

.mrx-svc__meta {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 2px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--mrx-si-meta);
}

/* -------------------------------------------------------------------------
 * Preview image
 * ---------------------------------------------------------------------- */

.mrx-svc__thumb {
	flex: 0 0 auto;
	display: block;
	width: var(--mrx-si-thumb-w);
	aspect-ratio: var(--mrx-si-thumb-ratio);
	overflow: hidden;
	border-radius: var(--mrx-si-thumb-radius);
	opacity: 0;
	transform: translateY(10px) scale(0.94) rotate(-2deg);
	transition: opacity var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-svc__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mrx-svc__row:hover .mrx-svc__thumb,
.mrx-svc__row:focus-visible .mrx-svc__thumb {
	opacity: 1;
	transform: none;
}

/*
 * No pointer, no hover, so an image that only appears on hover never appears
 * at all. On touch it is simply part of the row.
 */
@media (hover: none) {
	.mrx-svc__thumb {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * The mark
 * ---------------------------------------------------------------------- */

.mrx-svc__mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mrx-si-mark-box);
	height: var(--mrx-si-mark-box);
	font-size: 14px;
	line-height: 1;
	color: var(--mrx-si-mark);
	background-color: var(--mrx-si-mark-bg);
	border: 1px solid var(--mrx-si-mark-border);
	border-radius: 999px;
	transition: color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		background-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		border-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-svc__mark svg,
.mrx-svc__mark i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	fill: currentColor;
}

.mrx-svc__row:hover .mrx-svc__mark,
.mrx-svc__row:focus-visible .mrx-svc__mark {
	color: var(--mrx-si-mark-hover);
	background-color: var(--mrx-si-mark-bg-hover);
	border-color: var(--mrx-si-mark-border-hover);
	transform: translateX(4px);
}

/* -------------------------------------------------------------------------
 * Palettes
 *
 * Whole sets rather than single colours, because a divider, a numeral and a
 * hover wash only work together at the same distance from the ground. Every
 * one of them is still an Elementor control, and a colour set there outranks
 * the preset.
 * ---------------------------------------------------------------------- */

/* Ivory — the same index on plain white, for a page already carrying colour. */
.mrx-vpal-ivory .mrx-svc-wrap {
	--mrx-si-bg: #ffffff;
}

.mrx-vpal-ivory .mrx-svc {
	--mrx-si-divider: rgba(26, 33, 66, 0.13);
	--mrx-si-wash: rgba(251, 248, 246, 0.95);
	--mrx-si-num: rgba(26, 33, 66, 0.38);
	--mrx-si-mark-border: rgba(26, 33, 66, 0.18);
	--mrx-si-meta: rgba(26, 33, 66, 0.45);
}

/* Midnight — inverted, for one dark band on a light page. */
.mrx-vpal-midnight .mrx-svc-wrap {
	--mrx-si-bg: var(--mrmvr-navy, #1a2142);
}

.mrx-vpal-midnight .mrx-svc {
	--mrx-si-divider: rgba(255, 255, 255, 0.15);
	--mrx-si-wash: rgba(255, 255, 255, 0.06);
	--mrx-si-num: rgba(207, 161, 144, 0.85);
	--mrx-si-eyebrow: var(--mrmvr-clay, #cfa190);
	--mrx-si-heading: #ffffff;
	--mrx-si-intro: rgba(255, 255, 255, 0.7);
	--mrx-si-title: #ffffff;
	--mrx-si-title-hover: #ffffff;
	--mrx-si-body: rgba(255, 255, 255, 0.66);
	--mrx-si-meta: var(--mrmvr-clay, #cfa190);
	--mrx-si-mark: #ffffff;
	--mrx-si-mark-border: rgba(255, 255, 255, 0.25);
	--mrx-si-btn-bg: #ffffff;
	--mrx-si-btn-color: var(--mrmvr-navy, #1a2142);
	--mrx-si-btn-border: #ffffff;
}

/* -------------------------------------------------------------------------
 * Full-bleed background
 *
 * The wrapper is what breaks out, not the band. It is the query container, so
 * bleeding the band instead would leave every container query measuring the
 * original column width while the layout spanned the screen.
 *
 * `--mrx-sbw` is the scrollbar width, measured by the shared motion script.
 * Without it the rule falls back to plain 100vw, which is a hair wide on
 * desktop but still renders; with it the bleed is exact and cannot cause a
 * horizontal scrollbar.
 * ---------------------------------------------------------------------- */

.mrx-vbleed-yes .mrx-svc-wrap {
	--mrx-bleed-width: calc(100vw - var(--mrx-sbw, 0px));

	width: var(--mrx-bleed-width);
	margin-left: calc(50% - (var(--mrx-bleed-width) / 2));
	margin-right: 0;
	background-color: var(--mrx-si-bg);
}

/* The index keeps its measure; only the colour runs edge to edge. */
.mrx-vbleed-yes .mrx-svc-wrap .mrx-svc {
	max-width: var(--mrx-si-content-max);
	margin-inline: auto;
	background-color: transparent;
	border: 0;
	border-radius: 0;
}

/* -------------------------------------------------------------------------
 * Container guardrails
 *
 * These set properties rather than the custom properties the Elementor
 * controls write to, so they stay authoritative without an !important.
 * ---------------------------------------------------------------------- */

/* The split needs two usable columns. Below this there is only one. */
@container mrxi (max-width: 900px) {
	.mrx-vlayout-split .mrx-svc-wrap .mrx-svc {
		grid-template-columns: minmax(0, 1fr);
	}

	.mrx-vlayout-split .mrx-svc-wrap .mrx-svc__masthead {
		margin-bottom: var(--mrx-si-head-gap);
	}

	/* Nothing left beside it to hold its place against. */
	.mrx-vlayout-split .mrx-svc-wrap .mrx-svc__masthead-inner {
		position: static;
	}
}

/* A title and a description side by side stop fitting well before this. */
@container mrxi (max-width: 820px) {
	.mrx-vdesc-beside .mrx-svc-wrap .mrx-svc__row {
		grid-template-columns: var(--mrx-si-num-col) minmax(0, 1fr) auto;
		grid-template-areas:
			"num  title aside"
			"pad  text  aside";
		align-items: start;
	}

	.mrx-vdesc-beside .mrx-svc-wrap.mrx-vnonum .mrx-svc__row {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"title aside"
			"text  aside";
		align-items: start;
	}
}

/* Three across stops being legible well before two does. */
@container mrxi (max-width: 1000px) {
	.mrx-svc-wrap.mrx-vgrid .mrx-svc__list {
		grid-template-columns: repeat(var(--mrx-si-cols-md), minmax(0, 1fr));
	}
}

/* One entry to a line, whatever was asked for. */
@container mrxi (max-width: 620px) {
	.mrx-svc-wrap.mrx-vgrid .mrx-svc__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Phones. The numeral and the mark take a line of their own above the entry,
 * which reads as a ledger heading and gives the title the full width — better
 * than three columns squeezed into a phone, and it keeps the tap target large.
 */
@container mrxi (max-width: 560px) {
	.mrx-svc-wrap .mrx-svc__row,
	.mrx-vdesc-beside .mrx-svc-wrap .mrx-svc__row {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"num   aside"
			"title title"
			"text  text";
		align-items: center;
		row-gap: 8px;
	}

	/* No numeral to share the line with, so the mark keeps it on its own. */
	.mrx-svc-wrap.mrx-vnonum .mrx-svc__row,
	.mrx-vdesc-beside .mrx-svc-wrap.mrx-vnonum .mrx-svc__row {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"title aside"
			"text  text";
		align-items: center;
	}

	.mrx-svc-wrap .mrx-svc__num {
		align-self: center;
	}

	.mrx-svc-wrap .mrx-svc__title {
		align-self: auto;
	}

	/* No hover on a phone, so a reserved preview column is only dead space. */
	.mrx-svc-wrap.mrx-vthumbs-yes .mrx-svc__aside {
		min-width: 0;
	}

	.mrx-svc-wrap .mrx-svc__thumb {
		width: 96px;
	}

	.mrx-svc-wrap .mrx-svc__button {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Accessibility & print
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mrx-svc__row::before,
	.mrx-svc__row::after,
	.mrx-svc__num,
	.mrx-svc__title,
	.mrx-svc__mark,
	.mrx-svc__thumb,
	.mrx-svc__button {
		transition: none !important;
	}

	.mrx-svc__row:hover .mrx-svc__title,
	.mrx-svc__row:hover .mrx-svc__num,
	.mrx-svc__row:hover .mrx-svc__mark {
		transform: none;
	}

	.mrx-svc__thumb {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.mrx-svc__row::before,
	.mrx-svc__row::after {
		display: none;
	}

	.mrx-svc__thumb {
		opacity: 1;
		transform: none;
	}
}