/**
 * Mälardalen Rent — front-end styles.
 *
 * Values are taken directly from the Brilliant canvas "Hero Section"
 * (1440px artboard). Anything not present on the artboard — every mobile
 * and tablet rule below — is derived from the same token scale.
 */

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * WordPress does not set a global border-box, so the 56px section padding
 * was being added outside the 1440px shell and overflowing the viewport.
 */
.mr-header,
.mr-header *,
.mr-hero,
.mr-hero *,
.mr-section,
.mr-section *,
.mr-cta,
.mr-cta *,
.mr-footer,
.mr-footer * {
	box-sizing: border-box;
}

/* Lists used for navigation and link columns carry no list semantics visually. */
.mr-social,
.mr-footer__col ul,
.mr-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Shared primitives
 * ---------------------------------------------------------------------- */

.mr-shell {
	margin-inline: auto;
	max-width: 1440px;
	width: 100%;
}

/*
 * Sections own their vertical rhythm. Core's flow layout otherwise inserts
 * a block-gap margin between every top-level section, which shows up as a
 * strip of body background between the bands and pushes each section
 * progressively further down the page.
 */
.wp-site-blocks > main,
.mr-header,
.mr-hero,
.mr-section,
.mr-cta,
.mr-footer {
	margin-block: 0;
}

/*
 * Core's `is-layout-flow` adds a margin between sibling blocks. These
 * containers are flex and space their children with `gap`, so the inherited
 * margin would double up on every gap.
 */
.mr-header__inner > *,
.mr-hero__inner > *,
.mr-hero__content > * {
	margin-block: 0;
}

.mr-btn {
	align-items: center;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	gap: 6px;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease;
	white-space: nowrap;
}

.mr-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.mr-btn--primary {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

.mr-btn--primary:hover {
	background-color: #164f1a;
	color: var(--wp--preset--color--surface);
}

/*
 * The accent button, filled with the logo's yellow.
 *
 * The label is the near-black green, not white and not the brand green:
 * measured against this yellow, white lands at 2.09:1 and the green at 3.76:1,
 * both under the 4.5:1 ordinary text has to meet. `heading` gives 6.88:1, and
 * it is how the mark itself pairs — yellow beside black lettering.
 *
 * Hover darkens the fill rather than lightening it, so the label's contrast
 * only ever improves.
 */
.mr-btn--accent {
	background-color: var(--wp--preset--color--star);
	color: var(--wp--preset--color--heading);
}

.mr-btn--accent:hover {
	background-color: #d2960f;
	color: var(--wp--preset--color--heading);
}

.mr-btn--outline {
	background-color: transparent;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.mr-btn--outline:hover {
	background-color: var(--wp--preset--color--primary-subtle);
	color: var(--wp--preset--color--primary);
}

.mr-btn__icon {
	flex: none;
}

/* Hero and section CTAs — artboard: 14px/28px padding, 10px radius, 16px text. */
.mr-btn--lg {
	border-radius: var(--wp--custom--radius--md);
	font-size: 16px;
	gap: 8px;
	padding: 14px 28px;
}

/* On the green CTA banner the colours invert. */
.mr-btn--on-green {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

.mr-btn--on-green:hover {
	background-color: var(--wp--preset--color--primary-subtle);
	color: var(--wp--preset--color--primary);
}

.mr-btn--outline-light {
	background-color: transparent;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--surface);
	color: var(--wp--preset--color--surface);
}

.mr-btn--outline-light:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--surface);
}

/* Pill badge — shared by the hero and every section header. */

.mr-badge {
	align-items: center;
	align-self: flex-start;
	background-color: var(--wp--preset--color--primary-subtle);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--primary-accent);
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	gap: 6px;
	line-height: 1.2;
	margin: 0;
	padding: 6px 14px;
}

.mr-badge::before {
	background-color: currentcolor;
	border-radius: 50%;
	content: "";
	flex: none;
	height: 8px;
	width: 8px;
}

.mr-badge--dark {
	background-color: var(--wp--custom--color--steps-raised);
	color: var(--wp--custom--color--steps-accent);
}

.mr-stars {
	align-items: center;
	display: flex;
	gap: 2px;
	color: var(--wp--preset--color--star);
}

.mr-stars svg {
	display: block;
	flex: none;
}

/*
 * Kept for any star row that still wants a plain unfilled glyph.
 */
.mr-stars__empty {
	color: var(--wp--preset--color--divider);
}

/*
 * A fractional rating: the gold row sits exactly on top of the pale row and is
 * clipped to `--mr-stars-fill`, so 4.3/5 shows four solid stars and a fifth
 * filled 30% of the way. All five positions carry gold rather than one of them
 * being greyed out.
 */
.mr-stars--rated {
	display: inline-block;
	line-height: 0;
	position: relative;
}

.mr-stars--rated .mr-stars__track,
.mr-stars--rated .mr-stars__fill {
	display: flex;
	gap: 2px;
}

.mr-stars--rated .mr-stars__track {
	color: var(--wp--preset--color--divider);
}

.mr-stars--rated .mr-stars__fill {
	color: var(--wp--preset--color--star);
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
	position: absolute;
	width: var(--mr-stars-fill, 100%);
}

/* -------------------------------------------------------------------------
 * Section scaffolding — shared by Services, Steps and Testimonials
 * ---------------------------------------------------------------------- */

.mr-section__head {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: center;
}

/* Steps and Testimonials tighten the header stack from 16px to 12px. */
.mr-section__head--tight {
	gap: 12px;
}

.mr-section__head .mr-badge {
	align-self: center;
}

.mr-section__title {
	color: var(--wp--preset--color--heading);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}

/* Services is the one section the artboard sets two points larger. */
.mr-services .mr-section__title {
	font-size: 42px;
}

.mr-section__title--light {
	color: var(--wp--preset--color--surface);
}

.mr-section__lead {
	color: var(--wp--preset--color--body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	max-width: 480px;
}

.mr-services .mr-section__lead {
	line-height: 1.6;
	max-width: 600px;
}

.mr-section__lead--light {
	color: var(--wp--custom--color--steps-body);
	max-width: 500px;
}

/* -------------------------------------------------------------------------
 * Header — artboard: 72px tall, 16px/56px padding, white, 1px hairline shadow
 * ---------------------------------------------------------------------- */

.mr-header {
	background-color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--navbar);
	position: relative;
	z-index: 20;
}

.mr-header__inner {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 16px 56px;

	/*
	 * The artboard pins the bar to 72px with 16px padding and a 50px logo,
	 * so the logo deliberately overruns its padding box. Height, not
	 * min-height, is what reproduces that.
	 */
	height: var(--wp--custom--navbar-height);
}

.mr-header__logo {
	align-items: center;
	display: flex;
	flex: none;
	gap: 10px;
}

.mr-header__logo img {
	display: block;
	height: 50px;
	object-fit: contain;
	width: 160px;
}

.mr-nav {
	align-items: center;
	display: flex;
	gap: 32px;
}

.mr-nav a {
	color: var(--wp--preset--color--nav);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: color 0.18s ease;
	white-space: nowrap;
}

.mr-nav a:hover,
.mr-nav a:focus-visible {
	color: var(--wp--preset--color--primary);
}

/*
 * The page you are on.
 *
 * Colour alone would carry it at 5.9:1, but colour alone is also the one
 * signal a red-green colourblind visitor may not get, so the rule underneath
 * states it a second way. Both hang off `aria-current`, which is what a screen
 * reader announces — the visual and the announced state cannot drift apart.
 */
.mr-nav a[aria-current="page"],
.mr-nav__group.is-current > .mr-nav__parent {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.mr-nav > a[aria-current="page"],
.mr-nav__group.is-current > .mr-nav__parent {
	position: relative;
}

.mr-nav > a[aria-current="page"]::after,
.mr-nav__group.is-current > .mr-nav__parent::after {
	background-color: var(--wp--preset--color--primary);
	border-radius: 2px;
	bottom: -7px;
	content: "";
	height: 2px;
	inset-inline: 0;
	position: absolute;
}

/*
 * The "Om oss" dropdown.
 *
 * Opened by `:hover` and `:focus-within` and nothing else — no script, so it
 * works with JavaScript off and answers the keyboard on its own. The panel is
 * a card: same surface, hairline and shadow as .mr-card, so the menu belongs
 * to the same design as everything it opens onto.
 */
.mr-nav__group {
	position: relative;
}

.mr-nav__parent {
	align-items: center;
	display: inline-flex;
	gap: 5px;
}

.mr-nav__caret {
	flex: none;
	transition: transform 0.18s ease;
}

.mr-nav__menu {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	box-shadow:
		inset 0 0 0 1px var(--wp--custom--color--card-border),
		var(--wp--custom--shadow--card);
	display: grid;
	gap: 2px;

	/*
	 * Anchored to the parent's right edge, not its left. "Om oss" is the last
	 * item in the bar, so a left-anchored 262px panel hangs off the side of the
	 * window — and because the panel is hidden with `opacity` rather than
	 * `display`, it is still in the layout and drags the whole document 104px
	 * wider at around 900px. A hidden menu was scrolling every page sideways.
	 */
	inset-inline-end: 0;
	min-width: 262px;
	opacity: 0;
	padding: 8px;
	pointer-events: none;
	position: absolute;

	/* Sits just under the parent, with the gap bridged so the pointer can
	   travel from one to the other without the menu closing underneath it. */
	top: calc(100% + 14px);
	transform: translateY(-4px);
	transition:
		opacity 0.16s ease,
		transform 0.16s ease;
	z-index: 60;
}

.mr-nav__menu::before {
	content: "";
	height: 14px;
	inset-inline: 0;
	position: absolute;
	top: -14px;
}

.mr-nav__group:hover .mr-nav__menu,
.mr-nav__group:focus-within .mr-nav__menu {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.mr-nav__group:hover .mr-nav__caret,
.mr-nav__group:focus-within .mr-nav__caret {
	transform: rotate(180deg);
}

.mr-nav__menu a {
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--body);
	display: block;
	font-size: 14px;
	padding: 9px 12px;
	white-space: normal;
}

.mr-nav__menu a:hover,
.mr-nav__menu a:focus-visible,
.mr-nav__menu a[aria-current="page"] {
	background-color: var(--wp--preset--color--primary-subtle);
	color: var(--wp--preset--color--primary);
}

/*
 * The services panel: three columns, one per group in the live menu.
 *
 * Centred on its parent rather than left-aligned to it, because at 700px wide
 * a left-anchored panel runs off the right edge of a 1280px window.
 */
.mr-nav__menu--mega {
	gap: 8px 28px;
	grid-template-columns: repeat(3, minmax(0, 1fr));

	/* Centred on its parent, so it overrides the base panel's right anchor.
	   Width is capped to the window so a 720px panel cannot widen the page on a
	   narrow desktop. */
	inset-inline-end: auto;
	left: 50%;
	max-width: calc(100vw - 32px);
	min-width: min(720px, calc(100vw - 32px));
	padding: 20px 22px;
	transform: translate(-50%, -4px);
}

.mr-nav__group:hover .mr-nav__menu--mega,
.mr-nav__group:focus-within .mr-nav__menu--mega {
	transform: translate(-50%, 0);
}

/* Keep the wide services panel inside the viewport at the narrowest desktop
 * widths. Its parent sits left of centre, so a strictly centred 720px panel
 * otherwise loses its first 44px at 1024px. */
@media (min-width: 981px) and (max-width: 1100px) {
	.mr-nav__menu--mega {
		left: calc(50% + 60px);
	}
}

.mr-nav__col {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/*
 * The category headings in the mega menu.
 *
 * These were set in `muted` — which is *lighter* than the `body` colour the
 * service links under them use. Bold and uppercase, but out-ranked on the one
 * signal the eye reads first, so they sat back rather than heading the column.
 * The brand green puts them in front of the links instead of behind them.
 *
 * The line box is pinned to the height it had at 11px so the 1px size increase
 * cannot push the links below it down: 11 x 1.6 is 17.6px, and every link's
 * position on the menu is unchanged.
 */
.mr-nav__coltitle {
	color: var(--wp--preset--color--primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.7px;
	line-height: 17.6px;
	margin: 0 0 6px;
	padding-inline: 12px;
	text-transform: uppercase;
}

/*
 * A page that hung off a service in the live menu — kept, one step quieter.
 * Selector carries the parent so it outweighs `.mr-nav__menu a`, which sets the
 * padding these rules exist to override.
 */
.mr-nav__menu a.mr-nav__sub {
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	padding: 6px 12px 6px 26px;
	position: relative;
}

.mr-nav__menu a.mr-nav__sub:hover,
.mr-nav__menu a.mr-nav__sub:focus-visible,
.mr-nav__menu a.mr-nav__sub[aria-current="page"] {
	color: var(--wp--preset--color--primary);
}

.mr-nav__sub::before {
	background-color: var(--wp--preset--color--divider);
	content: "";
	height: 1px;
	inset-block-start: 50%;
	inset-inline-start: 13px;
	position: absolute;
	width: 7px;
}

/* Inside the panel the filled row is the signal, so the underline the
   top-level links use would only add noise. */
.mr-nav__menu a[aria-current="page"] {
	font-weight: 600;
}

.mr-nav__menu a[aria-current="page"]::after {
	content: none;
}

.mr-header__actions {
	align-items: center;
	display: flex;
	flex: none;
	gap: 12px;
}

.mr-header__actions .mr-btn {
	font-size: 14px;
	padding: 10px 20px;
}

/* Mobile menu toggle — no artboard reference; hidden at desktop widths. */

.mr-header__toggle {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--heading);
	cursor: pointer;
	display: none;
	height: 44px;
	justify-content: center;
	padding: 0;
	width: 44px;
}

.mr-header__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Hero — artboard: 80px/56px padding, 64px column gap, 560x620 image
 * ---------------------------------------------------------------------- */

.mr-hero {
	background-color: var(--wp--preset--color--base);
	overflow: hidden;
}

.mr-hero__inner {
	align-items: center;
	display: flex;
	gap: 64px;
	justify-content: space-between;
	padding: 80px 56px;

	/*
	 * On the artboard the hero frame starts at y=0 and the 72px navbar sits
	 * *over* it, so the real gap between the bar and the image is 80-72=8px.
	 * The navbar is in normal flow here, so the top padding absorbs it. This
	 * also puts the centred left column at the artboard's y=183.5.
	 */
	padding-top: 8px;
}

.mr-hero__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

.mr-hero__title {
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
	text-wrap: balance;
}

.mr-hero__lead {
	color: var(--wp--preset--color--body);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
	max-width: 520px;
}

.mr-hero__ctas {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.mr-hero__ctas .mr-btn {
	border-radius: var(--wp--custom--radius--md);
	font-size: 16px;
	gap: 8px;
	padding: 14px 28px;
}

.mr-hero__ctas .mr-btn--primary {
	box-shadow: var(--wp--custom--shadow--cta);
}

/* Trust row */

.mr-trust {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

/*
 * The four third-party marks, small, under the rating.
 *
 * Each sits on a white chip. Two of the four files are drawn on white and two
 * are transparent, and on the hero's warm base (#F9F7F3) that difference shows
 * as two pale rectangles beside two floating marks. The chip is under the mark,
 * never over it — no tint, no mask, no rounded corners on the artwork itself,
 * which is the same rule .mr-badges follows.
 *
 * Height-sized like .mr-badges, so the square UC seal and the wide Fastighets
 * wordmark carry the same weight instead of the square one dwarfing the rest.
 */
.mr-herologos {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}

.mr-herologos__item {
	align-items: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: 8px;
	display: flex;
	justify-content: center;
	padding: 6px 10px;
}

/*
 * 40px, not smaller. Two of these four are seals with set text inside them —
 * UC's has a line of wording around the ring, Reco's has "TOPP 10" over a year
 * — and below about 40px both collapse into a coloured smudge. A mark nobody
 * can identify is worse than no mark: it reads as a rendering fault.
 */
.mr-herologos__img {
	display: block;
	height: 66px;
	object-fit: contain;
	width: auto;
}

@media (max-width: 600px) {
	.mr-herologos { gap: 8px; }

	/*
	 * Two by two, rather than however many happen to fit.
	 *
	 * Four chips at this size are a little wider than a phone, so flex wrapped
	 * them 3 + 1 and left the Fastighets mark stranded alone on a second row,
	 * reading as a mistake. Fixing each chip at half the width less the gap
	 * makes the second row deliberate and gives all four the same box.
	 */
	.mr-herologos__item {
		flex: 0 0 calc(50% - 4px);
		padding: 6px 8px;
	}

	.mr-herologos__img { height: 52px; }
}

/*
 * The narrowest phones still in use.
 *
 * Half of 320px is not enough for the widest of the four marks at 52px, so the
 * grid fell apart into three uneven rows. A few pixels off the mark keeps the
 * two-by-two.
 */
@media (max-width: 360px) {
	.mr-herologos__item { padding: 5px 6px; }

	.mr-herologos__img { height: 44px; }
}

.mr-trust__group {
	align-items: center;
	display: flex;
	gap: 8px;
}

.mr-trust__score,
.mr-trust__value {
	color: var(--wp--preset--color--heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.mr-trust__divider {
	background-color: var(--wp--preset--color--divider);
	border: 0;
	flex: none;
	height: 20px;
	margin: 0;
	width: 1px;
}

.mr-trust__stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mr-trust__label {
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.25;
}

/* Hero image */

.mr-hero__media {
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--image);
	flex: none;
	height: 620px;
	overflow: hidden;
	width: 560px;
}

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

/* -------------------------------------------------------------------------
 * Services — artboard: 96/56 padding, 56px stack gap, 3-up grid, 24px gutter
 * ---------------------------------------------------------------------- */

.mr-services {
	background-color: var(--wp--preset--color--surface);
}

.mr-services__inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding: 96px 56px;
}

.mr-services__featured {
	background-color: var(--wp--preset--color--primary-subtle);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: inset 0 0 0 1px var(--wp--custom--color--card-border), var(--wp--custom--shadow--card);
	display: grid;
	grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
	overflow: hidden;
	width: 100%;
}

.mr-services__featured-media,
.mr-services__featured-media picture {
	display: block;
	height: 320px;
}

.mr-services__featured-media img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	width: 100%;
}

.mr-services__featured-copy {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 44px 48px;
}

.mr-services__featured-title {
	color: var(--wp--preset--color--heading);
	font-size: clamp(25px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	max-width: 23ch;
	text-wrap: balance;
}

.mr-services__featured-copy p {
	color: var(--wp--preset--color--body);
	font-size: 16px;
	line-height: 1.65;
	margin: 16px 0 22px;
	max-width: 54ch;
}

.mr-services__grid {
	display: grid;
	gap: 56px 24px;
	grid-template-columns: repeat(3, 1fr);
	width: 100%;

	/*
	 * The artboard let rows hug their content, which looked fine there because
	 * every card carried the same length of copy. With the real service texts
	 * the third card in a row can be 25px shorter than its neighbours, and a
	 * row of cards with mismatched bottom edges reads as broken rather than as
	 * airy. Cards fill their row; the link inside pins to the bottom so the
	 * "Läs mer" line still forms a straight edge across the row.
	 *
	 * `grid-auto-rows` matters as much as the stretch: below 1100px the grid
	 * drops to two columns, and stretching only levels cards within their own
	 * row — the second row would settle 25px shorter than the first. Equal
	 * rows level the whole block.
	 */
	align-items: stretch;
	grid-auto-rows: 1fr;
}

@media (min-width: 1025px) {
	.mr-services__grid--featured {
		grid-template-columns: repeat(6, 1fr);
	}

	.mr-services__grid--featured .mr-card {
		grid-column: span 2;
	}

	.mr-services__grid--featured .mr-card:nth-child(4) {
		grid-column: 2 / span 2;
	}
}

.mr-card {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px;
	transition:
		box-shadow 0.18s ease,
		transform 0.18s ease;

	/*
	 * The hairline is an inset shadow rather than a border: Brilliant's
	 * stroke is drawn inside the shape, so a real border would add 2px to
	 * every card's height and push the whole page down.
	 */
	box-shadow:
		inset 0 0 0 1px var(--wp--custom--color--card-border),
		var(--wp--custom--shadow--card);
}

.mr-card:hover {
	box-shadow:
		inset 0 0 0 1px var(--wp--custom--color--card-border),
		var(--wp--custom--shadow--image);
	transform: translateY(-2px);
}

.mr-card__icon {
	align-items: center;
	background-color: var(--wp--preset--color--primary-subtle);
	border-radius: var(--wp--custom--radius--icon);
	color: var(--wp--preset--color--primary);
	display: flex;
	flex: none;
	height: 52px;
	justify-content: center;
	width: 52px;
}

/*
 * Pillars: the same card, read at a glance rather than clicked through.
 *
 * A card grid does two jobs on this site. On a services page each card is a
 * destination — left-aligned, scanned down the title column, with a link at the
 * bottom. A row of promises is a different read: there is nowhere to go, the
 * eye takes in five of them at once, and the icon is the thing that separates
 * one from the next. So it is centred and the icon is filled rather than
 * tinted, which gives each card a single strong anchor at the top.
 *
 * Everything else is the base card — surface, radius, hairline, padding and the
 * hover it already has. Only alignment and the icon's weight change, so the two
 * variants cannot drift apart.
 */
.mr-section--pillars .mr-card {
	align-items: center;
	text-align: center;
}

.mr-section--pillars .mr-card__icon {
	background-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	color: var(--wp--preset--color--surface);
	height: 56px;
	width: 56px;
}

/*
 * A promise is a short sentence, so the measure is narrowed to keep it to two
 * or three lines. Left to the full card width the five read as five different
 * shapes, which is the opposite of a row you can take in at once.
 */
.mr-section--pillars .mr-card__text {
	max-width: 26ch;
}

.mr-card__title {
	color: var(--wp--preset--color--heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.mr-card__text {
	color: var(--wp--preset--color--body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
	margin: 0;
}

.mr-card__link {
	align-items: center;
	align-self: flex-start;
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	gap: 6px;
	line-height: 1.2;

	/* Pushed to the foot of the card, so a shorter description leaves the
	   whitespace above the link rather than lifting the link out of line with
	   the cards beside it. */
	margin-top: auto;
	text-decoration: none;
}

.mr-card__link:hover {
	text-decoration: underline;
}

.mr-services__cta {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mr-services__note {
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	max-width: 480px;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Steps — artboard: dark band, 80/56 padding, 48px stack gap, 32px gutter
 * ---------------------------------------------------------------------- */

.mr-steps {
	background-color: var(--wp--preset--color--heading);
}

.mr-steps__inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 80px 56px;
}

.mr-steps__row {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
}

.mr-step {
	align-items: center;
	background-color: var(--wp--custom--color--steps-surface);
	border-radius: var(--wp--custom--radius--xl);
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px;
	text-align: center;
}

.mr-step__number {
	align-items: center;
	background-color: var(--wp--custom--color--steps-raised);
	border: 1px solid var(--wp--custom--color--steps-outline);
	border-radius: var(--wp--custom--radius--icon);
	color: var(--wp--custom--color--steps-accent);
	display: flex;
	flex: none;
	font-size: 20px;
	font-weight: 700;
	height: 56px;
	justify-content: center;
	width: 56px;
}

.mr-step__title {
	color: var(--wp--preset--color--surface);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.mr-step__text {
	color: var(--wp--custom--color--steps-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Testimonials — artboard: 80/56 padding, 48px stack gap, 24px gutter
 * ---------------------------------------------------------------------- */

.mr-testimonials {
	background-color: var(--wp--preset--color--base);
}

.mr-testimonials__inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 80px 56px;
}

.mr-testimonials__row {

	/*
	 * Quotes are 12, 20 and 14 words long, so hugging the content left the
	 * three cards at three different heights at every width. They fill the row
	 * instead, and the attribution is pinned to the foot of each so the
	 * avatars line up across the row however long the quote above them runs.
	 */
	align-items: stretch;
	display: grid;
	gap: 24px;
	grid-auto-rows: 1fr;
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
}

.mr-review {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--custom--shadow--review);
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 28px;
}

.mr-review__quote {
	border: 0;
	color: var(--wp--preset--color--body);
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	quotes: none;
}

.mr-review__author {
	align-items: center;
	border-top: 1px solid var(--wp--custom--color--card-border);
	display: flex;
	gap: 12px;

	/* Holds the foot of the card; see .mr-testimonials__row. */
	margin-top: auto;
	padding-top: 16px;
}

.mr-review__avatar {
	align-items: center;
	background-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	color: var(--wp--preset--color--surface);
	display: flex;
	flex: none;
	font-size: 14px;
	font-weight: 600;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.mr-review__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mr-review__name {
	color: var(--wp--preset--color--heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.mr-review__role {
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.25;
}

/*
 * Reco attribution.
 *
 * The wordmark is set in type rather than reproduced as a logo — this build
 * has no licensed Reco asset, and drawing an approximation of someone else's
 * mark is worse than naming them plainly.
 */
.mr-reco__brand {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	letter-spacing: -0.2px;
}

.mr-review__source {
	color: var(--wp--preset--color--muted);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2px;
	margin-inline-start: auto;
	text-transform: uppercase;
}

/* The section's rating, under the lead. */
.mr-reco {
	align-items: center;
	align-self: center;
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: inset 0 0 0 1px var(--wp--custom--color--card-border);
	color: var(--wp--preset--color--body);
	display: inline-flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 10px;
	justify-content: center;
	margin-top: 4px;
	padding: 9px 18px;
	text-decoration: none;
	transition:
		box-shadow 0.18s ease,
		transform 0.18s ease;
}

.mr-reco:hover,
.mr-reco:focus-visible {
	box-shadow:
		inset 0 0 0 1px var(--wp--preset--color--divider),
		var(--wp--custom--shadow--card);
	transform: translateY(-1px);
}

.mr-reco__score {
	color: var(--wp--preset--color--heading);
	font-weight: 700;
}

.mr-reco__max {
	color: var(--wp--preset--color--muted);
	font-weight: 500;
}

.mr-reco__sep {
	background-color: var(--wp--preset--color--divider);
	height: 14px;
	width: 1px;
}

.mr-reco__count {
	color: var(--wp--preset--color--body);
}

/* -------------------------------------------------------------------------
 * Reco award history — official badge artwork supplied by Reco
 * ---------------------------------------------------------------------- */

.mr-reco-awards__inner {
	gap: 32px;
	padding-block: 48px;
}

.mr-reco-awards__timeline {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 28px;
	justify-content: center;
	margin-inline: auto;
	width: 100%;
}

.mr-reco-awards__image {
	display: block;
	height: 132px;
	width: 132px;
}

.mr-reco-awards__years {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	max-width: 800px;
	padding: 0;
	width: 100%;
}

.mr-reco-awards__year {
	align-items: center;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--color--card-border);
	border-radius: 12px;
	color: var(--wp--preset--color--heading);
	display: flex;
	font-size: 15px;
	font-weight: 700;
	height: 48px;
	justify-content: center;
	min-width: 0;
	width: 100%;
}

.mr-reco-awards__year[data-reco-year="2026"] {
	background: var(--wp--preset--color--primary-subtle);
	border-color: var(--wp--preset--color--primary);
}

.mr-reco-awards__action {
	display: flex;
	justify-content: center;
}

@media (max-width: 1024px) {
	.mr-services__featured {
		grid-template-columns: minmax(230px, 0.85fr) minmax(0, 1.15fr);
	}

	.mr-services__featured-copy {
		padding: 36px;
	}

	.mr-reco-awards__years {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		max-width: 620px;
	}
}

@media (max-width: 520px) {
	.mr-reco-awards__inner {
		gap: 28px;
		padding-block: 40px;
	}

	.mr-reco-awards__image {
		height: 124px;
		width: 124px;
	}

	.mr-reco-awards__years {
		gap: 10px 12px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 300px;
	}

	.mr-reco-awards__year {
		font-size: 14px;
		height: 44px;
	}
}

/* -------------------------------------------------------------------------
 * CTA banner — artboard: green band, 64/80 padding, 48px gap
 * ---------------------------------------------------------------------- */

.mr-cta {
	background-color: var(--wp--preset--color--primary);
}

.mr-cta__inner {
	align-items: center;
	display: flex;
	gap: 48px;
	justify-content: space-between;
	padding: 64px 80px;
}

.mr-cta__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mr-cta__title {
	color: var(--wp--preset--color--surface);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
}

.mr-cta__lead {
	color: var(--wp--custom--color--on-green-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
	max-width: 480px;
}

.mr-cta__actions {
	display: flex;
	flex: none;
	gap: 16px;
}

/* -------------------------------------------------------------------------
 * Footer — artboard: 56px padding, 48px stack gap
 * ---------------------------------------------------------------------- */

.mr-footer {
	background-color: var(--wp--custom--color--footer-surface);
}

.mr-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 56px;
}

/* Artboard columns hug their content rather than stretching to match. */
.mr-footer__top {
	align-items: flex-start;
	display: flex;
	gap: 48px;
	justify-content: space-between;
}

.mr-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 280px;
}

.mr-footer__logo {
	display: block;

	/*
	 * The canvas uses a separate all-white logo asset in the footer, against
	 * the dark surface. The mark is a flat white silhouette there, so knocking
	 * the colour logo to white reproduces it exactly and avoids shipping and
	 * maintaining a second binary.
	 */
	filter: brightness(0) invert(1);
	height: 44px;
	object-fit: contain;
	object-position: left;
	width: 140px;
}

.mr-footer__blurb {
	color: var(--wp--custom--color--footer-body);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

.mr-social {
	display: flex;
	gap: 12px;
}

.mr-social a {
	align-items: center;
	background-color: var(--wp--custom--color--footer-raised);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--custom--color--footer-body);
	display: flex;
	height: 32px;
	justify-content: center;
	transition:
		background-color 0.18s ease,
		color 0.18s ease;
	width: 32px;
}

.mr-social a:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

.mr-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mr-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mr-footer__heading {
	color: var(--wp--preset--color--surface);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

/*
 * The size and line-height go on the list item, not just the link. A bare
 * <li> keeps the inherited 16px/1.6 strut, so its line box stays 25.6px tall
 * however small the link inside is — which made the footer 53px too tall.
 */
.mr-footer__col li,
.mr-footer__col a,
.mr-footer__contact span {
	color: var(--wp--custom--color--footer-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	transition: color 0.18s ease;
}

.mr-footer__col a:hover {
	color: var(--wp--preset--color--surface);
}

.mr-footer__contact li {
	align-items: center;
	color: var(--wp--custom--color--footer-body);
	display: flex;
	gap: 8px;
}

.mr-footer__contact svg {
	flex: none;
}

.mr-footer__divider {
	background-color: var(--wp--custom--color--footer-raised);
	border: 0;
	height: 1px;
	margin: 0;
	width: 100%;
}

.mr-footer__bottom {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
}

.mr-footer__copy {
	color: var(--wp--custom--color--footer-muted);
	font-size: 13px;
	line-height: 1.2;
	margin: 0;
}

.mr-footer__legal {
	display: flex;
	gap: 24px;
}

.mr-footer__legal li,
.mr-footer__legal a {
	color: var(--wp--custom--color--footer-muted);
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
}

.mr-footer__legal a:hover {
	color: var(--wp--custom--color--footer-body);
}

/* The cookie-settings control is a button, because it opens a dialog rather
   than navigating. Styled to sit in the row as though it were one of the
   links beside it. */
.mr-footer__legal-btn {
	background: none;
	border: 0;
	color: var(--wp--custom--color--footer-muted);
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	line-height: 1.2;
	padding: 0;
}

.mr-footer__legal-btn:hover {
	color: var(--wp--custom--color--footer-body);
}

/* -------------------------------------------------------------------------
 * Responsive — derived, not on the artboard
 * ---------------------------------------------------------------------- */

@media (max-width: 1280px) {
	.mr-header__inner,
	.mr-hero__inner,
	.mr-services__inner,
	.mr-steps__inner,
	.mr-testimonials__inner,
	.mr-cta__inner,
	.mr-footer__inner {
		padding-inline: 32px;
	}

	.mr-nav {
		gap: 24px;
	}

	.mr-hero__inner {
		gap: 40px;
	}

	.mr-hero__media {
		height: 540px;
		width: 46%;
	}
}

@media (max-width: 1024px) {
	.mr-hero__inner {
		align-items: flex-start;
		flex-direction: column;
		gap: 48px;
		padding-block: 56px;
	}

	.mr-hero__content {
		width: 100%;
	}

	.mr-hero__media {
		aspect-ratio: 16 / 10;
		height: auto;
		width: 100%;
	}

	.mr-hero__lead {
		max-width: 60ch;
	}

	.mr-services__grid,
	.mr-steps__row,
	.mr-testimonials__row {
		grid-template-columns: repeat(2, 1fr);
	}

	.mr-services__grid {
		gap: 32px 24px;
	}

	.mr-cta__inner {
		align-items: flex-start;
		flex-direction: column;
		gap: 32px;
	}

	.mr-footer__top {
		flex-wrap: wrap;
		gap: 40px;
	}

	.mr-footer__brand {
		width: 100%;
	}
}

@media (max-width: 860px) {
	.mr-header__toggle {
		display: inline-flex;
		order: 3;
	}

	.mr-header__inner {
		flex-wrap: wrap;
		height: auto;
		min-height: var(--wp--custom--navbar-height);
		padding-inline: 20px;
	}

	.mr-header__actions .mr-btn--outline {
		display: none;
	}

	.mr-nav {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		gap: 4px;
		order: 4;
		padding-block: 8px 16px;
	}

	.mr-nav a {
		display: block;
		font-size: 16px;
		padding: 12px 4px;
	}

	.mr-header.is-open .mr-nav {
		display: flex;
	}

	/*
	 * In the burger menu there is nothing to hover and nowhere to float a
	 * panel, so "Om oss" and its pages are one indented list. Everything is
	 * reachable the moment the menu opens — no second tap, and nothing that
	 * depends on a script having run.
	 */
	.mr-nav__menu {
		background: none;
		border-left: 2px solid var(--wp--preset--color--divider);
		border-radius: 0;
		box-shadow: none;
		gap: 0;
		margin-inline-start: 4px;
		min-width: 0;
		opacity: 1;
		padding: 0 0 4px 12px;
		pointer-events: auto;
		position: static;
		transform: none;
	}

	.mr-nav__menu a {
		font-size: 15px;
		padding: 10px 8px;
	}

	.mr-nav__caret {
		display: none;
	}

	/* The three columns become three stacked groups in the burger menu. */
	.mr-nav__menu--mega {
		grid-template-columns: 1fr;
		min-width: 0;
		padding: 0 0 4px 12px;
		transform: none;
	}

	.mr-nav__group:hover .mr-nav__menu--mega,
	.mr-nav__group:focus-within .mr-nav__menu--mega {
		transform: none;
	}

	.mr-nav__coltitle {
		margin-block: 10px 2px;
		padding-inline: 8px;
	}

	.mr-nav__sub {
		font-size: 14px;
		padding-inline-start: 28px;
	}
}

@media (max-width: 600px) {
	.mr-services__featured {
		grid-template-columns: 1fr;
	}

	.mr-services__featured-media,
	.mr-services__featured-media picture {
		aspect-ratio: 16 / 10;
		height: auto;
		min-height: 0;
	}

	.mr-services__featured-copy {
		padding: 28px 24px 30px;
	}

	.mr-header__logo img {
		height: 40px;
		width: 128px;
	}

	.mr-hero__inner {
		gap: 36px;
		padding: 40px 20px 48px;
	}

	.mr-hero__content {
		gap: 24px;
	}

	.mr-hero__ctas {
		gap: 12px;
		width: 100%;
	}

	.mr-hero__ctas .mr-btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.mr-trust {
		gap: 16px 20px;
	}

	.mr-trust__divider {
		display: none;
	}

	.mr-services__inner,
	.mr-steps__inner,
	.mr-testimonials__inner {
		gap: 40px;
		padding-block: 56px;
	}

	.mr-services__inner,
	.mr-steps__inner,
	.mr-testimonials__inner,
	.mr-cta__inner,
	.mr-footer__inner {
		padding-inline: 20px;
	}

	.mr-services__grid,
	.mr-steps__row,
	.mr-testimonials__row {
		gap: 20px;
		grid-template-columns: 1fr;
	}

	.mr-section__title {
		font-size: 30px;
	}

	.mr-section__title--light {
		font-size: 28px;
	}

	.mr-card,
	.mr-step {
		padding: 24px;
	}

	.mr-cta__inner {
		padding: 48px 20px;
	}

	.mr-cta__title {
		font-size: 28px;
	}

	.mr-cta__actions {
		flex-wrap: wrap;
		width: 100%;
	}

	.mr-cta__actions .mr-btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.mr-footer__top {
		flex-direction: column;
		gap: 32px;
	}

	.mr-footer__bottom {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.mr-footer__legal {
		flex-wrap: wrap;
		gap: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mr-btn {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Interior pages — components rendered by inc/render.php
 *
 * Every value below is a token from theme.json or a measurement taken from the
 * Brilliant artboards. Nothing here is page-specific: pages supply data only.
 * ---------------------------------------------------------------------- */

.mr-page-header,
.mr-page-header *,
.mr-section--cards,
.mr-section--checklist,
.mr-section--prose,
.mr-section--table,
.mr-section--faq,
.mr-section--stepper,
.mr-section--form,
.mr-section--note,
.mr-section--cards *,
.mr-section--checklist *,
.mr-section--prose *,
.mr-section--table *,
.mr-section--faq *,
.mr-section--stepper *,
.mr-section--form *,
.mr-section--note * {
	box-sizing: border-box;
}

/* Page header ----------------------------------------------------------- */

.mr-page-header {
	background: var(--wp--preset--color--surface);
	margin-block: 0;
}

.mr-page-header__inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 96px 56px 56px;
	text-align: center;
}

/*
 * The badge carries `align-self: flex-start` for the hero, where it sits above
 * a left-aligned headline. In a page header everything else is centred, so
 * that default left it stranded against the margin while the title and lead
 * ran down the middle. Same correction as `.mr-section__head .mr-badge`.
 */
.mr-page-header__inner .mr-badge {
	align-self: center;
}

/*
 * A form page opens onto the step indicator, so its header only has to
 * introduce the page — 96px of air above a title the visitor has already
 * decided to read just pushed the first question further away.
 */
.mr-page-header--form .mr-page-header__inner {
	gap: 12px;
	padding: 48px 56px 36px;
}

/* -------------------------------------------------------------------------
 * Page hero — the two-column opening, from the "Booking Flow" artboard.
 * ---------------------------------------------------------------------- */

.mr-page-header--hero {
	overflow: hidden;
	position: relative;
}

/*
 * Three soft discs behind the copy. Purely atmospheric, so they sit on an
 * aria-hidden layer and never enter the reading order.
 */
.mr-hero-deco {
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.mr-hero-deco span {
	background-color: #dce8de;
	border-radius: 50%;
	display: block;
	position: absolute;
}

.mr-hero-deco__c1 {
	height: 900px;
	inset-inline-end: -110px;
	opacity: 0.09;
	top: 20px;
	width: 900px;
}

.mr-hero-deco__c2 {
	height: 800px;
	inset-inline-end: -60px;
	opacity: 0.06;
	top: 0;
	width: 800px;
}

.mr-hero-deco__c3 {
	background-color: #d4e6d8;
	height: 503px;
	inset-inline-start: -250px;
	opacity: 0.2;
	top: 380px;
	width: 500px;
}

.mr-pagehero__inner {
	align-items: center;
	display: flex;
	gap: 56px;
	justify-content: space-between;
	padding: 72px 56px;
	position: relative;
	text-align: start;
}

/*
 * The column is as wide as the layout allows, but the prose inside it is
 * capped at the artboard's 560px measure. Capping the column instead would
 * fold the three proof points onto two lines while 200px of space sat unused
 * beside them.
 */
.mr-pagehero__copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.mr-pagehero__title,
.mr-pagehero__text {
	max-width: 560px;
}

.mr-pagehero__title {
	color: var(--wp--preset--color--heading);
	font-size: 52px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}

/*
 * The second half of a hero heading, in the brand green.
 *
 * Inline, unlike the page-header accent, which breaks to its own line: that one
 * carries an organisation's name and must not be split, this one is the second
 * word of a two-word title and belongs on the same line as the first.
 */
.mr-pagehero__accent {
	color: var(--wp--preset--color--primary);
}

/*
 * The line under a hero heading, between it and the paragraphs.
 *
 * Heavier than body copy and lighter than the heading — it is a summary of the
 * page in one line, and at body weight it disappeared into the paragraph under
 * it while at heading weight it competed with the title above.
 */
.mr-pagehero__subtitle {
	color: var(--wp--preset--color--heading);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
	max-width: 560px;
}

.mr-pagehero__rule {
	background-color: var(--wp--preset--color--primary);
	border-radius: 2px;
	display: block;
	height: 4px;
	width: 48px;
}

.mr-pagehero__text {
	color: var(--wp--preset--color--body);
	font-size: 16px;
	line-height: 1.7;
	margin: 0;
}

/* The three proof points. A list, because that is what it is. */
.mr-trustrow {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mr-trustrow__item {
	align-items: center;
	display: flex;
	gap: 12px;
}

.mr-trustrow__icon {
	align-items: center;
	background-color: var(--wp--preset--color--primary-subtle);
	border-radius: 10px;
	color: var(--wp--preset--color--primary);
	display: flex;
	flex: none;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.mr-trustrow__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mr-trustrow__title {
	color: var(--wp--preset--color--heading);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}

.mr-trustrow__sub {
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	line-height: 1.25;
}

/*
 * The panel the artboard fills with a photograph. There is no photograph in
 * this build, so it is drawn as the flat mint block the artboard itself shows
 * rather than as a broken image or a grey placeholder.
 */
.mr-pagehero__panel {
	aspect-ratio: 500 / 560;
	background-color: #d9e8dd;
	border-radius: var(--wp--custom--radius--lg);

	/* Holds the artboard's 500×560 where there is room, and gives width back to
	   the copy before the layout gets tight rather than after. */
	flex: 0 1 500px;
	max-width: 500px;
	min-width: 300px;
}

/* With a photograph in it, the panel crops rather than distorts. */
.mr-pagehero__panel--photo {
	display: block;
	height: auto;
	object-fit: cover;
}

/*
 * The second action reads as a link rather than a second button competing with
 * the first — same size and icon, no fill.
 */
.mr-btn--quiet {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	padding-inline: 0;
}

.mr-btn--quiet:hover {
	color: var(--wp--preset--color--primary-accent);
	text-decoration: underline;
}

.mr-page-header__title {
	color: var(--wp--preset--color--heading);
	font-size: 42px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}

.mr-page-header__lead {
	color: var(--wp--preset--color--body);
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
	max-width: 600px;
}

/*
 * The tail of a heading, in the brand green.
 *
 * Set on its own line rather than allowed to wrap where it falls: the heading
 * it was written for names the company and then the organisation it belongs
 * to, and a break in the middle of "Städbranschen Sverige" would split the
 * organisation's name across two lines while the colour said it was one thing.
 */
.mr-page-header__accent {
	color: var(--wp--preset--color--primary);
	display: block;
}

/*
 * A hairline with an icon set into it, under the heading.
 *
 * The rule is drawn as two flex children either side of the icon rather than
 * as a border with a gap punched in it, so it centres on the icon at any width
 * and needs no fixed measurement to line up.
 */
.mr-page-header__rule {
	align-items: center;
	color: var(--wp--preset--color--primary-accent);
	display: flex;
	gap: 12px;
	justify-content: center;

	/* The header column already supplies a 16px gap; nothing is added here. */
	margin: 0;
	width: min(280px, 100%);
}

.mr-page-header__rule::before,
.mr-page-header__rule::after {
	background: var(--wp--custom--color--card-border);
	content: "";
	flex: 1;
	height: 1px;
}

.mr-page-header__rule-icon {
	flex: none;
}

/*
 * Another organisation's mark, so it is shown as it was drawn.
 *
 * No tinting, no mask, no rounding: a membership logo that has been restyled
 * to match the page stops being evidence of the membership. It is capped by
 * width and left to keep its own aspect ratio, and `height: auto` overrides
 * the intrinsic height attribute the markup carries for layout stability.
 *
 * The 16px is on top of the header column's own gap, so the mark reads as its
 * own statement rather than as a fifth line of the paragraph above it.
 */
.mr-page-header__logo {
	margin: 16px 0 0;
}

.mr-page-header__logo img {
	height: auto;
	max-width: 100%;
	width: 320px;
}

@media (max-width: 600px) {
	.mr-page-header__logo img {
		width: 240px;
	}
}

/* Section scaffolding --------------------------------------------------- */

.mr-section--cards,
.mr-section--checklist,
.mr-section--prose,
.mr-section--table,
.mr-section--faq,
.mr-section--stepper,
.mr-section--form,
.mr-section--note {
	background: var(--wp--preset--color--base);
	margin-block: 0;
}

.mr-section--white {
	background: var(--wp--preset--color--surface);
}

.mr-section--dark {
	background: var(--wp--preset--color--heading);
}

.mr-section__inner {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 64px 56px;
}

/*
 * Neighbours of the same tone pay for the gap once, not twice.
 *
 * Every band pads top and bottom, so two stacked sections put 2 x 80px of
 * nothing between their content — 160px of flat colour reading as a break in
 * the page rather than a rhythm. Where the tone changes that padding is doing
 * real work: it is the breathing room inside a coloured band and the boundary
 * is visible. Where it does not change, the second band's top padding is
 * simply the first band's bottom padding again.
 *
 * So it is dropped on the second of a same-tone pair, and the space between
 * them becomes one step (the first band's padding-bottom) instead of two. No
 * negative margins: the padding that was never needed is the padding removed.
 */
.mr-section:not(.mr-section--white):not(.mr-section--dark)
	+ .mr-section:not(.mr-section--white):not(.mr-section--dark)
	> .mr-section__inner,
.mr-section--white + .mr-section--white > .mr-section__inner,
.mr-section--dark + .mr-section--dark > .mr-section__inner {
	padding-top: 0;
}

/*
 * The step indicator is a band between the header and the form, not a section
 * in its own right, so it takes a fraction of the standard section rhythm.
 * 80px above and below a 3-line strip was most of the old 390px band.
 */
.mr-section--stepper > .mr-section__inner {
	gap: 28px;
	padding: 36px 56px 40px;
}

/*
 * The section's own content, centred in the band.
 *
 * `.mr-table__note` was missing from this list while `.mr-table-wrap` was in
 * it, so a price table centred itself and its own footnotes did not — both are
 * capped at 880px, but the table landed in the middle of the band and the
 * notes underneath it started 144px further left, past the table's left edge.
 * A footnote that does not line up with the table it annotates reads as a
 * different piece of content.
 */
.mr-section__inner > .mr-prose,
.mr-section__inner > .mr-panel,
.mr-section__inner > .mr-form,
.mr-section__inner > .mr-faq,
.mr-section__inner > .mr-table-wrap,
.mr-section__inner > .mr-table__note {
	align-self: center;
	width: 100%;
}

/* Card grid ------------------------------------------------------------- */

.mr-grid {
	display: grid;
	gap: 24px;
}

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

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

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

/*
 * Five across, for a row of short claims read as a set rather than one at a
 * time. It steps down early — at 1024px a fifth column leaves about 150px per
 * card, which is narrower than the Swedish words in them.
 */
.mr-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.mr-card__price {
	color: var(--wp--preset--color--primary);
	font-size: 20px;
	font-weight: 600;
	margin: 0;
}

/* Checklist ------------------------------------------------------------- */

.mr-checklist {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mr-checklist__item {
	color: var(--wp--preset--color--body);
	display: flex;
	font-size: 15px;
	gap: 10px;

	/*
	 * 1.6, not 1.65, because 15 x 1.65 is 24.75px. A line box that lands on a
	 * fraction rounds differently from item to item, which is why the spacing
	 * between bullets measured 9px and 10px alternately down the same column.
	 * 15 x 1.6 is exactly 24px, so every item is a whole number of pixels tall
	 * and the gaps are all the same.
	 */
	line-height: 1.6;
}

/*
 * An underlined checklist item.
 *
 * `text-decoration` on a span rather than a <u> element: the underline is
 * emphasis the client has asked for, not the spelling-error or proper-noun
 * annotation <u> means. The offset keeps the rule clear of the descenders in
 * "Kakelugnar", which it otherwise cuts through.
 */
.mr-checklist__underline {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* A single point lifted out of a long list. */
.mr-checklist__highlight {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.mr-checklist__icon {
	color: var(--wp--preset--color--primary-accent);
	flex: none;

	/*
	 * Centred on the first line of text, worked out rather than guessed.
	 *
	 * This was `margin-top: 5px` — a number that happened to look right at one
	 * font-size and one line-height, and silently stops being right when either
	 * changes. The line box is 1.6em and the icon is 16px, so half the
	 * difference puts the icon's centre on the text's centre at any size.
	 */
	margin-top: calc((1.6em - 16px) / 2);
}

/*
 * A point that carries its own short list of examples.
 *
 * Indented to the text it belongs to, not to the tick, so the eye reads it as
 * subordinate to that one point rather than as a new column of items. Plain
 * discs rather than more ticks: a tick reads as "this is included", and these
 * are examples of what makes a job dirtier than standard, which is the opposite
 * claim. The 6px top margin separates the sub-list from its lead sentence
 * without opening the gap between one point and the next.
 */
.mr-checklist__sub {
	list-style: disc;
	margin: 6px 0 0;
	padding-left: 20px;
}

.mr-checklist__subitem {
	color: var(--wp--preset--color--muted, inherit);
	line-height: 1.6;
	margin-bottom: 2px;
}

.mr-checklist__subitem::marker {
	color: var(--wp--preset--color--primary-accent);
}

.mr-checklist__subitem:last-child {
	margin-bottom: 0;
}

/*
 * A checklist inside a panel splits into two columns on wide screens so long
 * lists (41 items on the flyttstädning page) do not run off the fold.
 * CSS columns are ignored on flex containers, so the list reverts to block
 * flow here and the rows keep their own flex layout.
 */
.mr-panel .mr-checklist {
	column-gap: 40px;
	columns: 2;
	display: block;
}

.mr-panel .mr-checklist__item {
	break-inside: avoid;

	/*
	 * The list is in CSS columns here, and `gap` does not apply to block flow
	 * inside a column — margin is the only spacing there is. 12px matches the
	 * flex list's own rhythm now that the line box is a whole number.
	 */
	margin-bottom: 12px;
}

/* No trailing space under the last bullet, so the panel's own padding is the
   only thing between the list and the box edge. */
.mr-panel .mr-checklist__item:last-child {
	margin-bottom: 0;
}

/* Panel — a plain white card used to hold a list or a block of prose ----- */

/* Documentation photographs ---------------------------------------------- */

.mr-gallery {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-inline: auto;
	max-width: 1000px;
	width: 100%;
}

/*
 * For a picture that is really a document.
 *
 * The butiksstädning 365 graphic carries four columns of set text at the foot,
 * and at the 1000px the others use that print falls to about 9px on screen —
 * legible only by zooming. It runs to the full width of the band instead.
 */
.mr-gallery--wide {
	max-width: 1280px;
}

.mr-gallery__figure {
	margin: 0;
}

/*
 * No aspect-ratio and no object-fit here, unlike every other photograph on the
 * site. These are composed grids — before and after frames with labels set into
 * the corners — so the picture has to be shown whole. `height: auto` lets each
 * one keep its own proportions against the width and height attributes the
 * markup carries for layout stability.
 */
.mr-gallery__img {
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--card);
	display: block;
	height: auto;
	width: 100%;
}

/* Third-party marks ------------------------------------------------------ */

.mr-badges {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 40px 56px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mr-badges__item {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 240px;
	text-align: center;
}

/*
 * Height, not width. A round seal and a wide wordmark only look like they
 * belong in the same row when their heights agree — matching widths would set
 * the seal at twice everyone else's size. `width: auto` overrides the
 * intrinsic width attribute the markup carries for layout stability.
 */
.mr-badges__img {
	height: 96px;
	object-fit: contain;
	width: auto;
}

/*
 * A strip of one.
 *
 * The 96px cap suits a row of certification seals, which are marks with no
 * set text in them. A lone logo is usually a logo *and* its wordmark — the
 * Fastighets file carries two lines of type — and at 96px that type is a grey
 * smear. Sized by width instead, so the mark reads at the width the band
 * gives it.
 */
.mr-badges--single .mr-badges__img {
	height: auto;
	max-width: 100%;
	width: 260px;
}

.mr-badges--single .mr-badges__item {
	max-width: 320px;
}

.mr-badges__caption {
	color: var(--wp--preset--color--body);
	font-size: 14px;
	line-height: 1.5;
}

@media (max-width: 600px) {
	.mr-badges { gap: 32px; }

	.mr-badges__img { height: 76px; }
}

/* Guarantee cards -------------------------------------------------------- */

/*
 * The row-gap is 36px rather than the grid's usual 24: the icons sit on the
 * cards' top edge and stand half their height above it, so a card that wraps
 * to a second row needs room for the one above it to have an icon hanging
 * into that space.
 */
.mr-guarantee {
	display: grid;
	gap: 36px 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mr-guarantee__card {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow:
		inset 0 0 0 1px var(--wp--custom--color--card-border),
		var(--wp--custom--shadow--card);

	/* Room at the top for the half of the icon that overhangs the card. */
	padding: 46px 28px 28px;
	position: relative;
}

/*
 * Centred on the card's top edge.
 *
 * `left: 50%` with a -50% translate rather than a margin, so the icon stays
 * centred whatever the column width works out to, and -50% of its own height
 * so exactly half of it sits above the edge at any icon size.
 */
.mr-guarantee__icon {
	align-items: center;
	background-color: var(--wp--preset--color--primary);

	/*
	 * No ring around the disc. Half of it stands on the section background and
	 * half on the card, and those are two different colours — any fixed ring
	 * colour reads as a halo against one of them. The green is dark enough to
	 * separate itself from both.
	 */
	border-radius: 50%;
	color: var(--wp--preset--color--surface);
	display: inline-flex;
	height: 60px;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 0;
	transform: translate(-50%, -50%);
	width: 60px;
}

.mr-guarantee__title {
	color: var(--wp--preset--color--primary);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 18px;
	text-align: center;
	text-wrap: balance;
}

@media (max-width: 1024px) {
	.mr-guarantee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
	.mr-guarantee { grid-template-columns: minmax(0, 1fr); }

	.mr-guarantee__card { padding: 42px 24px 24px; }

	.mr-guarantee__icon { height: 52px; width: 52px; }
}

/* Policy panels ---------------------------------------------------------- */

.mr-policies {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/*
 * Same surface, radius, hairline and shadow as .mr-panel, so a policy reads as
 * the same kind of object as every other boxed thing on the site. It is not
 * .mr-panel itself because that one is capped at 880px for a checklist's line
 * length, and a policy is a document — it uses the full measure of the section.
 */
.mr-policy {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow:
		inset 0 0 0 1px var(--wp--custom--color--card-border),
		var(--wp--custom--shadow--card);
	padding: 32px;
}

.mr-policy__head {
	align-items: center;
	display: flex;
	gap: 16px;
	margin-bottom: 20px;
}

/* The same filled disc the Om oss promises use, so the two rows of icons on
   the site read as one idea rather than two. */
.mr-policy__icon {
	align-items: center;
	background-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	color: var(--wp--preset--color--surface);
	display: inline-flex;
	flex: none;
	height: 52px;
	justify-content: center;
	width: 52px;
}

.mr-policy__heading {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mr-policy__title {
	color: var(--wp--preset--color--primary);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;

	/*
	 * Swedish builds single words longer than a phone is wide.
	 * "Personuppgiftsansvarig" is 22 characters with nowhere to break, and next
	 * to the 44px icon it left 166px for a heading that wants 210 — the page
	 * scrolled sideways at 320px. The same treatment the checklists and section
	 * leads already carry; the policy panels were simply missed.
	 */
	overflow-wrap: anywhere;
}

.mr-policy__text,
.mr-policy__group-title {
	overflow-wrap: anywhere;
}

.mr-policy__sub {
	color: var(--wp--preset--color--heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.mr-policy__text {
	color: var(--wp--preset--color--body);
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 14px;
	max-width: 78ch;
}

.mr-policy__text:last-child {
	margin-bottom: 0;
}

/* Sits clear of the paragraph above it without opening a gap before the next
   panel — the panel's own padding closes the bottom. */
.mr-policy__list {
	margin-top: 4px;
}

/*
 * The sub-sections inside a policy.
 *
 * Two columns, because these are short named parts of one policy — the
 * environmental policy's four are between one and three sentences each — and
 * stacked at full measure they made the policy look four times longer than it
 * reads. `align-items: start` so a one-line part does not stretch to match a
 * three-line one beside it.
 */
.mr-policy__groups {
	column-gap: 32px;
	margin-top: 24px;
}

/* Set by the renderer, and only when every part is a single paragraph — see
   the comment there for why this is not simply always two columns. */
.mr-policy__groups--split {
	columns: 2;
}

.mr-policy__group {
	border-top: 2px solid var(--wp--preset--color--primary-accent);

	/* Columns, not a grid. A grid aligns its rows to the tallest cell, so the
	   integrity policy — one long part, one short, one medium — left a third of
	   the panel empty while the third part started a new row. Column flow packs
	   them, and `break-inside: avoid` keeps a part whole. */
	break-inside: avoid;
	margin-bottom: 24px;
	padding-top: 14px;
}

.mr-policy__group:last-child {
	margin-bottom: 0;
}

.mr-policy__group-title {
	color: var(--wp--preset--color--heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px;
}

@media (max-width: 782px) {
	.mr-policy { padding: 24px; }

	.mr-policy__head { gap: 14px; }

	.mr-policy__icon { height: 44px; width: 44px; }

	.mr-policy__title { font-size: 20px; }

	.mr-policy__groups--split { columns: 1; }
}

.mr-panel {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow:
		inset 0 0 0 1px var(--wp--custom--color--card-border),
		var(--wp--custom--shadow--card);
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 880px;
	padding: 32px;
}

/* Prose ----------------------------------------------------------------- */

.mr-prose {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 800px;
}

/* Prose beside a photograph ---------------------------------------------- */

/*
 * Two columns that do not split the difference.
 *
 * The copy column is `minmax(0, 1fr)` rather than a fixed measure so it can
 * shrink before it wraps, and the picture takes the larger share because it is
 * doing the work a paragraph cannot. Below 900px the two stack, copy first:
 * the text is the reason the section exists and a phone should not have to
 * scroll past a photograph to reach it.
 */
.mr-media {
	align-items: center;
	display: grid;
	gap: 48px;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

/* Picture first, copy second, without reordering the markup — the reading
   order stays copy-then-picture for a screen reader either way. */
.mr-media--flip .mr-media__copy {
	order: 2;
}

/* The prose inside is already constrained by the column it sits in, so its own
   800px cap would only ever fight the grid. */
.mr-media__copy .mr-prose {
	max-width: none;
}

/*
 * This section carries no centred section title, so its prose heading is the
 * heading for the whole band and is sized to say so — the 20px a prose heading
 * uses is right for a subhead inside a run of text, not for the one line that
 * introduces half a page. Green, because it names the company rather than
 * labelling a part of the page.
 */
.mr-media__copy .mr-prose__heading {
	color: var(--wp--preset--color--primary);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 8px;
	text-wrap: balance;
}

@media (max-width: 782px) {
	.mr-media__copy .mr-prose__heading { font-size: 26px; }
}

.mr-media__figure {
	margin: 0;
}

.mr-media__img {
	aspect-ratio: 3 / 2;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--card);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/*
 * The company's own line, said in its own voice.
 *
 * Set apart from the paragraphs above it — heavier, in the brand green, on its
 * own line — because it is a claim about the company rather than another
 * sentence of description.
 */
.mr-media__tagline {
	color: var(--wp--preset--color--primary);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.35;
	margin: 24px 0 0;
}

/*
 * A prose column centred on the page.
 *
 * `text-align` alone would only centre the words inside the 800px measure,
 * which is itself pushed against the left margin — the line would land
 * left-of-centre on a wide screen, which is the thing being fixed. The auto
 * margins centre the column first; the alignment then centres the line in it.
 */
.mr-prose--center {
	margin-inline: auto;
	text-align: center;
}

.mr-prose__block {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mr-prose__heading {
	color: var(--wp--preset--color--heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.mr-prose__subheading {
	color: var(--wp--preset--color--heading);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.mr-prose__text {
	color: var(--wp--preset--color--body);
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}

/*
 * The name of the person quoted in the paragraph below it.
 *
 * The source writes the name and the review as two ordinary paragraphs, so the
 * four names read as four very short reviews. They are separated here by the
 * two signals that cost nothing structurally — weight and colour — rather than
 * by size or spacing, which would move everything under them.
 *
 * Same family (Inter is the only one the theme loads) and the same 17px, so the
 * line box is identical and the block's rhythm is untouched. 700 against the
 * body's 400 is the widest weight step the family offers, and `heading` is the
 * darkest colour already in the palette: no new colour is introduced.
 */

/*
 * An internal link sitting inside a paragraph.
 *
 * Underlined rather than colour-only, because it is one link in the middle of
 * running text and colour alone is not something every reader can see. The
 * brand green and the hover behaviour are the same as .mr-card__link, so this
 * introduces no new link treatment.
 */
.mr-prose__link {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: underline;
}

.mr-prose__link:hover {
	color: var(--wp--preset--color--primary-accent);
}

.mr-prose__text--name {
	color: var(--wp--preset--color--heading);
	font-weight: 700;

	/* Inter's default tracking is set for reading; a short bold line in caps-
	   height-heavy Swedish names sits better very slightly tightened. */
	letter-spacing: -0.01em;
}

/*
 * More separation on a phone.
 *
 * On a wide column a name is obviously a name: it is one short line against
 * paragraphs that run the full measure, so the ragged right does the work and
 * weight alone is enough. Narrow the column to 390px and the quotes wrap to
 * two and three lines of similar length, the shape cue disappears, and four
 * testimonials read as one unbroken block of text.
 *
 * So the phone gets what the desktop gets from the layout: size, and space
 * above. The extra top margin is the larger part of the fix — it is what
 * groups each name with the quote below it rather than the one above.
 */
@media (max-width: 600px) {
	.mr-prose__text--name {
		font-size: 17px;
		line-height: 1.4;
		margin-top: 28px;
	}

	/* Except the first, which already has the heading's spacing above it. */
	.mr-prose__text--name:first-child {
		margin-top: 0;
	}
}

/* Note ------------------------------------------------------------------ */

.mr-note {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: inset 0 0 0 1px var(--wp--custom--color--card-border);
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
}

/*
 * The title and text moved inside this wrapper when notes gained an optional
 * icon. It repeats the column and the 6px gap that .mr-note used to apply to
 * them directly, so every existing note is spaced exactly as it was.
 */
.mr-note__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* With an icon the note turns on its side: mark first, then the words. */
.mr-note--icon {
	align-items: flex-start;
	flex-direction: row;
	gap: 14px;
	padding: 20px;
}

.mr-note__icon {
	align-items: center;
	background-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	color: var(--wp--preset--color--surface);
	display: inline-flex;
	flex: none;
	height: 44px;
	justify-content: center;
	width: 44px;
}

/* A note with an icon is making a statement rather than adding a footnote, so
   it is set at reading size instead of the 14px caption the others use. */
.mr-note--icon .mr-note__title,
.mr-note--icon .mr-note__text {
	font-size: 16px;
	line-height: 1.5;
}

.mr-note--icon .mr-note__text {
	font-weight: 700;
}

.mr-note__title {
	color: var(--wp--preset--color--heading);
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

.mr-note__text {
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

.mr-section--dark .mr-note {
	background: var(--wp--custom--color--steps-surface);
	box-shadow: inset 0 0 0 1px var(--wp--custom--color--steps-outline);
}

.mr-section--dark .mr-note__title { color: var(--wp--preset--color--surface); }

.mr-section--dark .mr-note__text { color: var(--wp--custom--color--steps-body); }

/* Table ----------------------------------------------------------------- */

.mr-table-wrap {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow:
		inset 0 0 0 1px var(--wp--custom--color--card-border),
		var(--wp--custom--shadow--card);
	max-width: 880px;
	overflow-x: auto;
}

.mr-table {
	border-collapse: collapse;
	min-width: 480px;
	width: 100%;
}

.mr-table__caption {
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	padding: 20px 28px 0;
	text-align: left;
}

.mr-table th,
.mr-table td {
	border-bottom: 1px solid var(--wp--custom--color--card-border);
	font-size: 15px;
	line-height: 1.65;
	padding: 16px 28px;
	text-align: left;
}

.mr-table thead th {
	color: var(--wp--preset--color--heading);
	font-size: 14px;
	font-weight: 600;
}

.mr-table tbody th {
	color: var(--wp--preset--color--heading);
	font-weight: 600;
}

.mr-table tbody td {
	color: var(--wp--preset--color--body);
}

.mr-table tbody tr:last-child th,
.mr-table tbody tr:last-child td {
	border-bottom: 0;
}

/* FAQ ------------------------------------------------------------------- */

.mr-faq {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 880px;
}

.mr-faq__group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mr-faq__group-title {
	color: var(--wp--preset--color--heading);
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 4px;
}

.mr-faq__item {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: inset 0 0 0 1px var(--wp--custom--color--card-border);
}

.mr-faq__question {
	align-items: center;
	color: var(--wp--preset--color--heading);
	cursor: pointer;
	display: flex;
	font-size: 16px;
	font-weight: 600;
	gap: 16px;
	justify-content: space-between;
	line-height: 1.5;
	list-style: none;
	padding: 18px 24px;
}

.mr-faq__question::-webkit-details-marker {
	display: none;
}

.mr-faq__chevron {
	color: var(--wp--preset--color--primary);
	flex: none;
	transform: rotate(90deg);
	transition: transform 150ms ease;
}

.mr-faq__item[open] .mr-faq__chevron {
	transform: rotate(-90deg);
}

.mr-faq__answer {
	padding: 0 24px 20px;
}

.mr-faq__answer p {
	color: var(--wp--preset--color--body);
	font-size: 15px;
	line-height: 1.65;
	margin: 0 0 12px;
}

.mr-faq__answer p:last-child {
	margin-bottom: 0;
}

/* Stepper --------------------------------------------------------------- */

/*
 * The step indicator is a progress track, not a set of cards. Three stacked
 * panels 96px tall pushed the form itself off the first screen and read as an
 * admin interface; a single row of markers joined by a rule says the same
 * thing in a third of the height.
 *
 * The head above it answers "where am I" and "what is this step" in two lines,
 * so the track only has to answer "how much is left".
 */

.mr-stepper-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
}

.mr-stepper-head__eyebrow {
	color: var(--wp--custom--color--steps-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}

.mr-stepper-head__title {
	color: var(--wp--preset--color--surface);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	text-wrap: balance;
}

/*
 * Base: the card-style indicator, used by the data-driven 'stepper' section.
 * The live booking form opts into the --progress variant below instead.
 */
.mr-stepper {
	counter-reset: none;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.mr-stepper__item {
	align-items: center;
	background: var(--wp--custom--color--steps-surface);
	border-radius: var(--wp--custom--radius--xl);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 12px;
	text-align: center;
}

.mr-stepper__item.is-current {
	background: var(--wp--custom--color--steps-raised);
	box-shadow: inset 0 0 0 1px var(--wp--custom--color--steps-outline);
}

.mr-stepper__number {
	align-items: center;
	background: var(--wp--custom--color--steps-raised);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: inset 0 0 0 1px var(--wp--custom--color--steps-outline);
	color: var(--wp--custom--color--steps-accent);
	display: flex;
	flex: none;
	font-size: 14px;
	font-weight: 700;
	height: 32px;
	justify-content: center;
	width: 32px;
}

.mr-stepper__item.is-current .mr-stepper__number {
	background: var(--wp--custom--color--steps-surface);
	box-shadow: none;
}

.mr-stepper__label {
	color: var(--wp--custom--color--steps-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.mr-stepper__item.is-current .mr-stepper__label {
	color: var(--wp--preset--color--surface);
}

/* Progress variant — the booking journey ---------------------------------
 *
 * A track of markers joined by a rule, not a row of panels. Scoped to its own
 * modifier so the card indicator above is untouched.
 */

.mr-stepper--progress {
	display: grid;
	gap: 0;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
}

.mr-stepper--progress .mr-stepper__item {
	background: none;
	border-radius: 0;
	box-shadow: none;
	min-width: 0;
	padding: 0;
	position: relative;
}

/*
 * The connector is drawn by the item rather than by an element of its own, so
 * the markup stays a plain list. It reaches from this marker to the next, and
 * the last item has none.
 */
.mr-stepper--progress .mr-stepper__item:not(:last-child)::after {
	background: var(--wp--custom--color--steps-outline);
	content: "";
	height: 2px;
	left: calc(50% + 22px);
	position: absolute;
	right: calc(-50% + 22px);
	top: 15px;
}

/* A finished leg of the journey is drawn in the accent, like its marker. */
.mr-stepper--progress .mr-stepper__item.is-done::after {
	background: var(--wp--custom--color--steps-accent);
}

.mr-stepper__marker {
	align-items: center;
	background: var(--wp--custom--color--steps-surface);
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: inset 0 0 0 2px var(--wp--custom--color--steps-outline);
	display: flex;
	flex: none;
	height: 32px;
	justify-content: center;
	position: relative;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	width: 32px;
	z-index: 1;
}

/* Upcoming — a hollow ring, the quietest of the three. */
.mr-stepper__dot {
	background: var(--wp--custom--color--steps-outline);
	border-radius: var(--wp--custom--radius--pill);
	height: 8px;
	width: 8px;
}

/* Current — a filled accent marker with a halo, the loudest thing in the row. */
.mr-stepper__item.is-current .mr-stepper__marker {
	background: var(--wp--custom--color--steps-accent);
	box-shadow:
		inset 0 0 0 2px var(--wp--custom--color--steps-accent),
		0 0 0 5px rgba(76, 175, 80, 0.18);
}

.mr-stepper__item.is-current .mr-stepper__dot {
	background: var(--wp--custom--color--steps-surface);
	height: 10px;
	width: 10px;
}

/* Completed — a check on a solid accent field. */
.mr-stepper__item.is-done .mr-stepper__marker {
	background: var(--wp--custom--color--steps-accent);
	box-shadow: inset 0 0 0 2px var(--wp--custom--color--steps-accent);
}

.mr-stepper__tick {
	color: var(--wp--custom--color--steps-surface);
}

.mr-stepper--progress .mr-stepper__label {
	max-width: 16ch;
}

.mr-stepper--progress .mr-stepper__item.is-done .mr-stepper__label {
	color: #CBDCD1;
}

/* Form ------------------------------------------------------------------ */

/*
 * The form is a white card on the warm off-white page, the same way the hero's
 * cards read. It was the other way round — a beige card on white — which made
 * the card recede instead of holding the eye.
 */
.mr-form {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow:
		inset 0 0 0 1px var(--wp--custom--color--card-border),
		var(--wp--custom--shadow--card);
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 800px;
	padding: 40px;
}

.mr-section--form {
	background: var(--wp--preset--color--base);
}

.mr-section--white .mr-form,
.mr-section--form.mr-section--white .mr-form {
	background: var(--wp--preset--color--surface);
}

/*
 * The step name is already the heading of the band above, so inside the card
 * it is a quiet label that says the card belongs to that step — not a second
 * title competing with it.
 */
.mr-form__title {
	border-bottom: 1px solid var(--wp--custom--color--card-border);
	color: var(--wp--preset--color--body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0;
	padding-bottom: 16px;
	text-transform: uppercase;
}

.mr-form__heading {
	color: var(--wp--preset--color--heading);
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}

.mr-form__text {
	color: var(--wp--preset--color--body);
	font-size: 15px;
	line-height: 1.65;
	margin: 0;
}

.mr-field-row {
	display: grid;
	gap: 24px;
}

.mr-field-row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.mr-field-row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mr-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mr-field__label {
	color: var(--wp--preset--color--heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.mr-field__required {
	color: var(--wp--preset--color--primary-accent);
}

.mr-field__control {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--color--card-border);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--heading);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	padding: 14px 16px;
	width: 100%;
}

.mr-field__control::placeholder {
	color: var(--wp--preset--color--muted);
}

.mr-field__control--area {
	min-height: 96px;
	resize: vertical;
}

.mr-field__control:focus-visible,
.mr-choice__input:focus-visible,
.mr-faq__question:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.mr-field__hint {
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

/* Choice groups --------------------------------------------------------- */

.mr-choice {
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.mr-choice__legend {
	color: var(--wp--preset--color--heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	padding: 0;
}

.mr-choice__options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/*
 * Each answer is a selectable row rather than a bare radio with a label
 * beside it. The add-on step asks the same Nej/Ja question twenty-five times,
 * and a 18px dot was the only thing distinguishing a chosen answer from an
 * unchosen one.
 *
 * They sit side by side and wrap rather than stacking: turning twenty-five
 * pairs into fifty full-width cards would have tripled the length of the step,
 * which is the opposite of calm.
 */
.mr-choice__option {
	align-items: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--color--card-border);
	border-radius: var(--wp--custom--radius--md);
	cursor: pointer;
	display: flex;
	flex: 1 1 auto;
	gap: 10px;
	max-width: 100%;
	min-height: 48px;
	padding: 10px 16px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mr-choice__option:hover {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--divider);
}

/* Chosen: brand green, stated by border and tint rather than by a fill. */
.mr-choice__option:has(.mr-choice__input:checked) {
	background: var(--wp--preset--color--primary-subtle);
	border-color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary);
}

.mr-choice__option:has(.mr-choice__input:checked) .mr-choice__label {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/*
 * The focus ring belongs on the row, not on the 18px control inside it —
 * the control is what receives focus, but the row is what a visitor sees.
 */
.mr-choice__option:has(.mr-choice__input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.mr-choice__input {
	accent-color: var(--wp--preset--color--primary);
	flex: none;
	height: 18px;
	margin: 0;
	width: 18px;
}

.mr-choice__label {
	color: var(--wp--preset--color--body);
	cursor: pointer;
	font-size: 15px;
	line-height: 1.4;
}

/*
 * The consent tick is a sentence with a checkbox, not a choice between
 * options, so it keeps the plain treatment.
 */
.mr-choice--consent .mr-choice__option {
	align-items: flex-start;
	background: none;
	border: 0;
	border-radius: 0;
	margin-top: 4px;
	min-height: 0;
	padding: 0;
}

.mr-choice--consent .mr-choice__option:hover,
.mr-choice--consent .mr-choice__option:has(.mr-choice__input:checked) {
	background: none;
	border: 0;
	box-shadow: none;
}

.mr-choice--consent .mr-choice__option:has(.mr-choice__input:checked) .mr-choice__label {
	color: var(--wp--preset--color--body);
	font-weight: 400;
}

.mr-choice--consent .mr-choice__input {
	margin-top: 3px;
}

.mr-choice--consent .mr-choice__label {
	line-height: 1.65;
}

/* Price bar ------------------------------------------------------------- */

.mr-pricebar {
	align-items: baseline;
	background: var(--wp--preset--color--primary-subtle);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--primary);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: space-between;
	margin: 0;
	padding: 16px;
}

.mr-pricebar__label {
	font-size: 14px;
	font-weight: 600;
}

.mr-pricebar__note {
	font-size: 14px;
	line-height: 1.6;
}

/* Action rows ----------------------------------------------------------- */

.mr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Section CTAs carry the same lift as the Services button on the artboard. */
.mr-actions .mr-btn--primary {
	box-shadow: var(--wp--custom--shadow--cta);
}

.mr-section__inner > .mr-actions {
	justify-content: center;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.mr-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

	/* Three, not two: five items split 3 + 2 leaves one short row, which reads
	   as a deliberate grouping rather than a wrap. */
	.mr-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/*
	 * Between this width and the burger breakpoint the bar is tight: logo, five
	 * nav items — two of them now carrying a caret — and two buttons. It was
	 * overflowing by ~104px at 900, which scrolled every page sideways.
	 *
	 * The outline "Ring oss" gives way first. It is the least load-bearing item
	 * in the bar: the number is in the hero, in the CTA band and in the footer,
	 * and it returns below 782 as part of the burger menu anyway.
	 */
	.mr-nav { gap: 20px; }

	.mr-header__actions .mr-btn--outline { display: none; }

	/*
	 * The hero stacks here rather than at the narrower breakpoint below. Below
	 * about 1000px the copy and a 300px panel no longer fit side by side, and
	 * holding the two columns any longer pushed the page 104px wider than the
	 * window at 900.
	 *
	 * The panel goes rather than stacking: it carries no information — it is
	 * where a photograph belongs — so on a narrow screen it would be a tall
	 * block of flat mint between the reader and the copy.
	 */
	.mr-pagehero__inner {
		flex-direction: column;
		gap: 32px;
		padding: 56px 32px 48px;
	}

	.mr-pagehero__copy { gap: 20px; }

	.mr-pagehero__panel { display: none; }

	/*
	 * — except when it holds a photograph.
	 *
	 * The rule above was written when the panel was always empty: a flat mint
	 * block carrying nothing, which on a narrow screen only pushed the copy
	 * down. A photograph is not that. Hiding it made the pictures on the five
	 * Företag pages desktop-only, on the screens most of this traffic arrives
	 * on. The empty panel still goes; only the picture stays.
	 *
	 * Reshaped rather than simply shown. At the artboard's 500/560 a full-width
	 * photograph would stand nearly as tall as the phone screen and bury the
	 * text under it, so it is cropped to a band and capped. object-fit is
	 * already `cover` above, so the subject stays centred rather than squashed.
	 *
	 * min-width is reset because the desktop rule floors the panel at 300px,
	 * which is wider than the content box at 320px — showing it without this
	 * would push the whole page sideways. flex is dropped for the same reason:
	 * in a column the 500px basis applies to height, not width.
	 */
	.mr-pagehero__panel--photo {

		/*
		 * 3:2, because that is the shape of the photographs themselves.
		 *
		 * This was 4:3 against a file cut to 0.893 for the desktop panel, so
		 * `cover` had to zoom in hard to fill the width — and what it cut was
		 * the top and bottom, which is where people's heads are. The markup
		 * now serves a landscape crop below 1025px (see
		 * malardalenrent_image_sources), and matching the box to the file's
		 * own ratio means a phone shows the whole frame with nothing cropped.
		 *
		 * max-height still caps it on a tablet, where 3:2 of 720px would be a
		 * 480px-tall wall of photograph before the copy starts.
		 */
		aspect-ratio: 3 / 2;
		display: block;
		flex: none;
		max-height: 420px;
		max-width: 100%;
		min-width: 0;
		width: 100%;
	}

	/*
	 * A portrait photograph in the same slot.
	 *
	 * Left at width:100% a 1122x1402 picture would be 408px tall on a phone —
	 * fine — but 787px on a tablet, so the height cap would kick in and crop
	 * back exactly what declaring the ratio was meant to protect. Letting the
	 * width follow the height instead keeps the whole frame at every size and
	 * centres it in the column.
	 */
	.mr-pagehero__panel--tall {

		/*
		 * `auto` hands the box back to the file's own dimensions, so a portrait
		 * photograph is shown whole at every width without this stylesheet
		 * having to know what shape it is.
		 */
		aspect-ratio: auto;
		margin-inline: auto;
		width: auto;
	}
}

@media (max-width: 782px) {
	.mr-page-header__inner { padding: 64px 24px 40px; }

	.mr-page-header__title { font-size: 32px; }

	.mr-pagehero__inner { padding: 48px 24px 40px; }

	.mr-pagehero__title { font-size: 32px; }

	.mr-trustrow { gap: 16px 28px; }

	.mr-section__inner { gap: 32px; padding: 40px 24px; }

	.mr-grid--two,
	.mr-grid--three,
	.mr-grid--four,
	.mr-grid--five { grid-template-columns: minmax(0, 1fr); }

	/*
	 * Copy above the picture, always.
	 *
	 * `order` is dropped with the second column: on one column the flip is a
	 * choice about which comes first, and the answer is the text — the section
	 * exists for what it says, and a phone should not scroll past a photograph
	 * to reach it.
	 */
	.mr-media {
		gap: 32px;
		grid-template-columns: minmax(0, 1fr);
	}

	.mr-media--flip .mr-media__copy { order: 0; }

	.mr-field-row--two,
	.mr-field-row--three { grid-template-columns: minmax(0, 1fr); }

	.mr-panel,
	.mr-form { padding: 24px; }

	.mr-panel .mr-checklist { columns: 1; }

	/*
	 * The price table has to fit the phone it is read on.
	 *
	 * `.mr-table` carries `min-width: 480px` so the columns keep their shape on
	 * a desktop. On a 390px screen the band leaves 342px, so that minimum
	 * pushed the Pris column past the edge of its wrapper — and because the
	 * wrapper scrolls rather than the page, nothing flagged it: the page-level
	 * overflow check passed while the prices were off-screen with no visible
	 * sign there was anything to scroll to. A price nobody can see is the one
	 * thing a price table cannot do.
	 *
	 * The minimum is dropped and the columns are left to wrap. The wrapper
	 * keeps its `overflow-x: auto` as a backstop for the three-column tables at
	 * the very narrowest widths.
	 */
	.mr-table { min-width: 0; }

	.mr-table th,
	.mr-table td { padding: 14px 20px; }

	/* The label column takes the wrapping; the price stays on one line so a
	   figure never breaks across two. */
	.mr-table td:last-child,
	.mr-table th:last-child {
		padding-left: 12px;
		text-align: right;
		white-space: nowrap;
	}

	.mr-page-header--form .mr-page-header__inner { padding: 32px 24px 28px; }

	.mr-section--stepper > .mr-section__inner { gap: 24px; padding: 28px 24px 32px; }

	.mr-section--form > .mr-section__inner { padding-top: 32px; }

	.mr-stepper-head__title { font-size: 24px; }

	/*
	 * The track keeps all three markers on one row at every width. It used to
	 * become a horizontally scrolling strip of 140px chips, which on a 390px
	 * screen clipped the third step mid-word — the one place a visitor most
	 * needs to see how much is left. Labels shrink and wrap instead.
	 */
	.mr-stepper--progress .mr-stepper__item { gap: 8px; }

	.mr-stepper--progress .mr-stepper__item:not(:last-child)::after {
		left: calc(50% + 20px);
		right: calc(-50% + 20px);
		top: 13px;
	}

	.mr-stepper--progress .mr-stepper__marker { height: 28px; width: 28px; }

	.mr-stepper--progress .mr-stepper__label {
		font-size: 12px;
		max-width: 12ch;
	}

	/* One tap target per row, primary first, both full width. */
	.mr-actions--nav .mr-btn {
		flex-basis: 100%;
		justify-content: center;
	}

	.mr-actions--nav .mr-btn--primary { margin-left: 0; order: 1; }

	.mr-actions--nav .mr-btn--outline { order: 2; }

	/* An answer per row reads more easily than two half-width pills. */
	.mr-choice__option { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.mr-faq__chevron { transition: none; }
}

/*
 * Questions whose answer is missing from the source. Flagged rather than
 * hidden so the gap stays visible for the client to fill.
 */
.mr-faq__missing {
	color: var(--wp--preset--color--muted);
	font-style: italic;
}

/*
 * The hero rating links to the Reco profile it comes from. It must look
 * identical to the static version, so only the link affordances are added.
 */
.mr-trust__group--link {
	border-radius: var(--wp--custom--radius--sm);
	color: inherit;
	text-decoration: none;
}

.mr-trust__group--link:hover .mr-trust__score {
	text-decoration: underline;
}

.mr-trust__group--link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

.mr-link {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Price cards — one card per service, each holding a real price table.
 * ---------------------------------------------------------------------- */

.mr-price-card {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow:
		inset 0 0 0 1px var(--wp--custom--color--card-border),
		var(--wp--custom--shadow--card);
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow: hidden;
	padding: 28px 28px 32px;
	position: relative;
}

/* The 3px accent bar the artboard puts on every card. */
.mr-price-card::before {
	background: var(--wp--preset--color--primary);
	content: "";
	inset: 0 0 auto;
	position: absolute;
	height: 3px;
}

.mr-price-card__title {
	color: var(--wp--preset--color--heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.mr-price-card__text {
	color: var(--wp--preset--color--body);
	font-size: 15px;
	line-height: 1.65;
	margin: 0;
}

.mr-price-table {
	border-collapse: collapse;
	margin: 0;
	width: 100%;
}

.mr-price-table th,
.mr-price-table td {
	border-bottom: 1px solid var(--wp--custom--color--card-border);
	font-size: 15px;
	line-height: 1.6;
	padding: 10px 0;
}

.mr-price-table th {
	color: var(--wp--preset--color--body);
	font-weight: 400;
	text-align: left;
}

/* The figure is the point of the row, so it carries the emphasis. */
.mr-price-table td {
	color: var(--wp--preset--color--heading);
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.mr-price-table tr:last-child th,
.mr-price-table tr:last-child td {
	border-bottom: 0;
}

.mr-price-card__note {
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

.mr-price-card .mr-card__link {
	margin-top: auto;
}

/* Footnotes that belong to a price table (minimum charges, "contact us" rows). */
.mr-table__note {
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	max-width: 880px;
}

/* Live forms ------------------------------------------------------------ */

/*
 * The booking flow posts a step at a time, so these styles cover the parts a
 * static preview never needed: validation state, the status notices, the
 * composite name/address rows and the running price.
 */

.mr-form--live {
	gap: 0;
	margin: 0;
	max-width: 820px;
	padding: 28px;
	position: relative;
}

/* Honeypot. Hidden from sight and from assistive technology, but still a
   real focusable control so a bot that fills every input trips it. */
.mr-form__trap {
	height: 0;
	left: -9999px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.mr-form__html {
	color: var(--wp--preset--color--body);
	font-size: 15px;
	line-height: 1.65;
}

.mr-form__html ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding-left: 20px;
}

.mr-form__html p {
	margin: 0 0 10px;
}

.mr-form__html a {
	color: var(--wp--preset--color--primary);
}

.mr-form__skip {
	margin: 0;
}

/* The review of the booking on the last step. Reuses the card surface and
   hairline the rest of the system uses; no new visual language. */
.mr-form__review {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--color--card-border);
	border-radius: var(--wp--custom--radius--card);
	display: grid;
	gap: 16px;
	padding: 28px;
}

.mr-form__review-nav {
	border-bottom: 1px solid var(--wp--custom--color--card-border);
	display: grid;
	gap: 12px;
	padding-bottom: 16px;
}

.mr-form__review-lead {
	color: var(--wp--preset--color--body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
}

.mr-form__review-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/* Long Swedish step names must wrap rather than push the page sideways. */
.mr-form__review-actions .mr-btn {
	font-size: 14px;
	max-width: 100%;
	padding: 10px 16px;
}

.mr-form__review-actions .mr-btn span {
	overflow-wrap: anywhere;
}

.mr-btn.is-busy {
	cursor: progress;
	opacity: 0.75;
}

.mr-field__error {
	color: var(--wp--custom--color--error-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
}

.mr-field--error .mr-field__control,
.mr-choice--error .mr-choice__options,
.mr-composite--error .mr-field__control {
	border-color: var(--wp--custom--color--error-text);
}

/*
 * An unanswered choice now has rows of its own to colour. Without this the
 * only sign of the error was the sentence underneath, which on a step with
 * twenty-five questions is easy to scroll past.
 */
.mr-choice--error .mr-choice__option {
	border-color: var(--wp--custom--color--error-border);
}

.mr-field__price {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	margin-left: 8px;
}

.mr-field__control--qty {
	max-width: 160px;
}

.mr-composite {
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
}

/* Notices --------------------------------------------------------------- */

.mr-notice {
	border-radius: var(--wp--custom--radius--md);
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 24px;
}

.mr-notice--error {
	background: var(--wp--custom--color--error-surface);
	box-shadow: inset 0 0 0 1px var(--wp--custom--color--error-border);
}

.mr-notice--success {
	background: var(--wp--preset--color--primary-subtle);
	box-shadow: inset 0 0 0 1px #C8D6C0;
}

.mr-notice--lg {
	border-radius: var(--wp--custom--radius--lg);
	max-width: 880px;
	padding: 40px;
}

.mr-notice__title {
	color: var(--wp--preset--color--heading);
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}

.mr-notice--error .mr-notice__title {
	color: var(--wp--custom--color--error-text);
}

.mr-notice__text,
.mr-notice p {
	color: var(--wp--preset--color--body);
	font-size: 15px;
	line-height: 1.65;
	margin: 0;
}

.mr-notice h2 {
	color: var(--wp--preset--color--heading);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 8px;
}

/* Price readout --------------------------------------------------------- */

.mr-pricebar__value {
	color: var(--wp--preset--color--primary);
	font-size: 18px;
	font-weight: 700;
}

.mr-pricebar--strong {
	background: var(--wp--preset--color--primary);
	color: #FFF;
}

.mr-pricebar--strong .mr-pricebar__label,
.mr-pricebar--strong .mr-pricebar__value {
	color: #FFF;
}

.mr-pricebar--strong .mr-pricebar__value {
	font-size: 22px;
}

/* Navigation ------------------------------------------------------------ */

/*
 * Back on the left, continue on the right, in that order on every step —
 * the two controls a visitor looks for do not move as the form progresses.
 * "Spara & fortsätt senare" is a third, quieter option and sits below them
 * rather than competing for the same row.
 */
.mr-actions--nav {
	align-items: center;
	border-top: 1px solid var(--wp--custom--color--card-border);
	column-gap: 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: 28px;
	row-gap: 16px;
}

/* The primary sits hard right whether or not a back button precedes it. */
.mr-actions--nav .mr-btn--primary {
	margin-left: auto;
}

.mr-actions--nav .mr-btn--ghost {
	flex-basis: 100%;
	justify-content: center;
	order: 3;
}

.mr-btn--back .mr-btn__icon--back {
	transform: rotate(180deg);
}

/* The arrow leads the label on the way back and follows it on the way on. */
.mr-btn--back {
	flex-direction: row;
}

.mr-btn--ghost {
	background: none;
	border: 0;
	color: var(--wp--preset--color--primary);
	padding-left: 0;
	padding-right: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mr-btn--ghost:hover {
	color: var(--wp--preset--color--primary-accent);
}

/* A completed step is a button that navigates back to it. It has to look
   exactly like the step label beside it, so the button chrome is removed
   rather than restyled.

   The vertical padding is a hit area, not spacing. A single-line label came
   to 22.6px tall, just under the 24x24 CSS px minimum of WCAG 2.2 AA Target
   Size, and this is a control people reach for on a phone to correct an
   answer. The negative margin gives the padding back to the layout, so the
   stepper looks exactly as it did while the button grows to 28.6px. */
.mr-stepper__link {
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	margin-block: -3px;
	padding-block: 3px;
	padding-inline: 0;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mr-stepper__item.is-done .mr-stepper__number {
	background: var(--wp--custom--color--steps-accent);
	color: var(--wp--preset--color--heading);
}

.mr-stepper-form {
	margin: 0;

	/*
	 * Without this the wrapper is a flex item sized to its content and the
	 * track cannot shrink below the width of its labels, which pushed the
	 * whole page sideways on a phone.
	 */
	max-width: 100%;
	min-width: 0;
}

/* A field hidden by conditional logic must stay hidden inside the form's
   flex layout, which would otherwise re-establish a display value. */
.mr-form__field[hidden] {
	display: none;
}

/*
 * Centred column layouts size their children to fit their content, so a
 * child with a fixed max-width — a 600px lead, an 880px card, a table whose
 * min-width is 480px — keeps that width on a phone and pushes the whole page
 * sideways. Filling the container as well as capping it keeps every one of
 * them inside the viewport. Found by measuring scrollWidth at 390px and
 * 320px; /fragor-och-svar/ was overflowing by 1100px.
 */
.mr-page-header__lead,
.mr-section__lead,
.mr-services .mr-section__lead,
.mr-table-wrap,
.mr-table__note,
.mr-form,
.mr-notice--lg,
.mr-stepper-form {
	width: 100%;
}

/*
 * Headings do not wrap on their own when a single word is longer than the
 * viewport, which the service-name headings can be at 320px.
 */
.mr-section__title,
.mr-page-header__title,
.mr-form__title {
	max-width: 100%;
	overflow-wrap: break-word;
}

/*
 * Visually hidden text, contained.
 *
 * The inherited .screen-reader-text takes the element out of flow, so inside
 * a horizontally scrolled container — the step indicator — it lands at its
 * static position a thousand pixels to the right and drags the whole page
 * with it. /bokning/ scrolled 882px sideways on a phone because of nine
 * "Steg N av M" labels.
 *
 * Keeping it in flow and clipping it instead is just as invisible, just as
 * readable to a screen reader, and cannot escape an ancestor.
 */
.mr-section .screen-reader-text,
.mr-hero .screen-reader-text,
.mr-header .screen-reader-text,
.mr-footer .screen-reader-text,
.mr-cta .screen-reader-text {
	clip-path: inset(50%);
	display: inline-block;
	height: 1px;
	overflow: hidden;
	position: static;
	white-space: nowrap;
	width: 1px;
}

/*
 * Body copy wraps mid-word when it has to.
 *
 * The source text quotes bare URLs — "https://www.malardalenrent.se/faq" in
 * the FAQ answers, the forms.gle link in the booking confirmation — and a URL
 * is one unbreakable word. On a 390px screen that alone made the FAQ page
 * 1625px wide.
 */
.mr-prose,
.mr-faq__answer,
.mr-checklist,
.mr-note__text,
.mr-field__hint,
.mr-form__html,
.mr-card__text,
.mr-section__lead,
.mr-page-header__lead {
	overflow-wrap: anywhere;
}

/*
 * The client's own step wording is long — "Nästa steg. Ordernoteringar",
 * "Nästa steg - sammanfattning". At 320px a single-line button is wider than
 * the screen, so below the phone breakpoint the label wraps instead.
 */

/* The client writes long button labels — "Jag behöver inte något tillval. Gå
   till nästa sida" is wider than a 320px screen on its own. Every button that
   carries one has to wrap, not just the ones in the step navigation: the skip
   link on each add-on step was pushing those pages 30px sideways. */
@media (max-width: 480px) {

	/*
	 * The three-column tables — Tjänst, Pris, Omfattning on the tillval page —
	 * still ran 41px past a 320px screen at the padding above. Cutting the
	 * horizontal padding gives back 48px across the six cell edges, which is
	 * what makes the price column land inside the wrapper rather than behind
	 * its edge.
	 */
	.mr-table th,
	.mr-table td { font-size: 14px; padding: 10px; }

	.mr-table td:last-child,
	.mr-table th:last-child { padding-left: 6px; }

	/* The Omfattning column on the three-column tables carries a sentence, not
	   a value. Letting it break inside a word is what finally brings the row
	   inside a 320px screen. */
	.mr-table td { overflow-wrap: anywhere; }

	.mr-actions .mr-btn,
	.mr-form__skip .mr-btn,
	.mr-form__review-actions .mr-btn {
		max-width: 100%;
		white-space: normal;
	}

	.mr-actions .mr-btn span,
	.mr-form__skip .mr-btn span,
	.mr-form__review-actions .mr-btn span {
		overflow-wrap: anywhere;
	}
}

/* -------------------------------------------------------------------------
 * Booking form — reference redesign
 *
 * Ported from design/booking-redesign.html. Presentation only: no field, no
 * step and no logic changes. Everything here is scoped to the live form
 * (.mr-form--live) or to the form section, so the rest of the site is
 * untouched.
 * ---------------------------------------------------------------------- */

.mr-section--form > .mr-section__inner {
	padding-block: 40px 64px;
}

/* The step indicator sits in the card's top-right corner. It lives outside
   the <form> — the review step carries its own mr_goto buttons and nesting
   the two made them ambiguous — so the shell provides the frame. */
.mr-form-shell {
	margin: 0 auto;
	max-width: 820px;
	position: relative;
	width: 100%;
}

.mr-form-shell > .mr-stepper-form {
	position: absolute;
	right: 28px;
	top: 30px;
	width: auto;
	z-index: 1;
}

.mr-form-shell .mr-stepper--progress {
	display: flex;
	gap: 0;
	width: auto;
}

/* In the card the items sit on one row, so the connector runs between the
   markers rather than under them. */
.mr-form-shell .mr-stepper--progress .mr-stepper__item {
	align-items: center;
	flex: none;
	flex-direction: row;
	gap: 0;
	position: relative;
}

/*
 * In the compact indicator the circle is the control. A completed step's
 * label is a real button, so it covers its item and its text is pushed out of
 * sight rather than removed — display:none would have taken the only way back
 * to an earlier step away from mouse and keyboard alike.
 */
.mr-form-shell .mr-stepper--progress span.mr-stepper__label {
	display: none;
}

.mr-form-shell .mr-stepper--progress .mr-stepper__link {
	border-radius: var(--wp--custom--radius--pill);
	bottom: 0;
	left: 0;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	text-indent: 200%;
	top: 0;
	white-space: nowrap;
	width: 24px;
	z-index: 2;
}

.mr-form-shell .mr-stepper--progress .mr-stepper__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.mr-form-shell .mr-stepper--progress .mr-stepper__item:not(:last-child)::after {
	background: var(--wp--custom--color--card-border);
	height: 1.5px;
	inset: auto;
	margin: 0 8px;
	position: relative;
	top: 0;
	width: 26px;
}

.mr-form-shell .mr-stepper--progress .mr-stepper__item.is-done::after {
	background: var(--wp--preset--color--primary);
}

.mr-form-shell .mr-stepper__marker {
	background: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 1.5px var(--wp--custom--color--card-border);
	height: 24px;
	width: 24px;
}

.mr-form-shell .mr-stepper__dot {
	background: var(--wp--preset--color--muted);
	height: 7px;
	width: 7px;
}

.mr-form-shell .mr-stepper__item.is-current .mr-stepper__marker,
.mr-form-shell .mr-stepper__item.is-done .mr-stepper__marker {
	background: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--primary);
}

.mr-form-shell .mr-stepper__item.is-current .mr-stepper__marker {
	box-shadow:
		inset 0 0 0 1.5px var(--wp--preset--color--primary),
		0 0 0 3px rgba(27, 94, 32, 0.14);
}

.mr-form-shell .mr-stepper__item.is-current .mr-stepper__dot {
	background: var(--wp--preset--color--surface);
	height: 8px;
	width: 8px;
}

.mr-form-shell .mr-stepper__tick {
	color: var(--wp--preset--color--surface);
}

/* Card header — eyebrow, title, then the questions. */
.mr-form__head {
	margin-bottom: 24px;
	padding-right: 132px;
}

.mr-form__of {
	color: var(--wp--preset--color--muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.09em;
	margin: 0;
	text-transform: uppercase;
}

.mr-form--live .mr-form__title {
	border: 0;
	color: var(--wp--preset--color--heading);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 2px 0 0;
	padding: 0;
	text-transform: none;
}

/* Rhythm: 16px between fields, 28px between groups. */
.mr-form--live .mr-form__field {
	margin-bottom: 16px;
}

.mr-form--live .mr-form__field:last-child {
	margin-bottom: 0;
}

/* A section heading marks a group — small caps, quiet, never a card. */
.mr-form--live .mr-form__heading {
	color: var(--wp--preset--color--muted);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.1em;
	margin: 28px 0 4px;
	text-transform: uppercase;
}

.mr-form--live .mr-field__label,
.mr-form--live .mr-choice__legend {
	font-size: 13px;
	font-weight: 600;
}

.mr-form--live .mr-field__control {
	font-size: 14.5px;
	min-height: 44px;
	padding: 10px 12px;
}

.mr-form--live .mr-field {
	gap: 6px;
}

.mr-form--live .mr-field__hint {
	font-size: 12.5px;
}

/* Ja/Nej and other short choices become compact pills on one row. */
.mr-form--live .mr-choice__options {
	gap: 6px;
}

.mr-form--live .mr-choice__option {
	flex: 0 1 auto;
	min-height: 44px;
	padding: 8px 14px;
}

.mr-form--live .mr-choice--consent .mr-choice__option {
	min-height: 0;
	padding: 0;
}

/* The running price is a quiet band, not a billboard. */
.mr-form--live .mr-pricebar {
	border-radius: var(--wp--custom--radius--md);
	margin-top: 20px;
	padding: 12px 16px;
}

.mr-form--live .mr-actions--nav {
	margin-top: 24px;
	padding-top: 20px;
}

@media (max-width: 782px) {
	.mr-section--form > .mr-section__inner { padding-block: 24px 40px; }

	.mr-form--live { padding: 18px; }

	/* On a phone the indicator goes back into the flow, above the title. */
	.mr-form-shell > .mr-stepper-form {
		justify-content: center;
		margin-bottom: 16px;
		position: static;
		width: 100%;
	}

	.mr-form-shell .mr-stepper--progress { justify-content: center; }

	.mr-form__head { padding-right: 0; }

	.mr-form--live .mr-form__title { font-size: 19px; }

	.mr-form--live .mr-choice__option { flex: 1 1 calc(50% - 3px); }
}

/*
 * A two- or three-answer question becomes one compact row: the question on
 * the left, the answers on the right. Twenty-five stacked Nej/Ja pairs was
 * most of the height of the add-on step.
 *
 * Matched by counting the options rather than by a class, so the renderer
 * stays untouched. Laid out with floats, not flex: a <legend> is not a flex
 * item in any browser, and the ring is a box-shadow because a real border
 * gets notched by the legend.
 */
.mr-form--live .mr-choice--row {
	border-radius: var(--wp--custom--radius--md);
	box-shadow: inset 0 0 0 1px var(--wp--custom--color--card-border);
	display: block;
	padding: 10px 14px;
}

.mr-form--live .mr-choice--row::after {
	clear: both;
	content: "";
	display: table;
}

.mr-form--live .mr-choice--row > .mr-choice__legend {
	float: left;
	max-width: calc(100% - 160px);
	padding-block: 9px;
}

.mr-form--live .mr-choice--row > .mr-choice__options {
	float: right;
	gap: 6px;
}

.mr-form--live .mr-choice--row .mr-choice__option {
	flex: 0 0 auto;
	font-size: 13px;
	justify-content: center;
	min-height: 40px;
	min-width: 62px;
	padding: 7px 13px;
}

/* Hint and error sit under the row, full width. */
.mr-form--live .mr-choice--row > .mr-field__hint,
.mr-form--live .mr-choice--row > .mr-field__error {
	clear: both;
	margin: 6px 0 0;
	padding-top: 4px;
}

@media (max-width: 640px) {
	.mr-form--live .mr-choice--row > .mr-choice__legend,
	.mr-form--live .mr-choice--row > .mr-choice__options {
		float: none;
		max-width: 100%;
	}

	.mr-form--live .mr-choice--row > .mr-choice__legend { padding-block: 0 8px; }

	.mr-form--live .mr-choice--row .mr-choice__option {
		flex: 1 1 0;
		min-height: 44px;
	}
}

/* Collapsible add-on group — one row when closed, stating what is chosen. */
.mr-group {
	border: 1px solid var(--wp--custom--color--card-border);
	border-radius: var(--wp--custom--radius--md);
	margin-bottom: 6px;
	overflow: hidden;
}

.mr-group__btn {
	align-items: center;
	background: var(--wp--preset--color--surface);
	border: 0;
	cursor: pointer;
	display: flex;
	gap: 10px;
	min-height: 48px;
	padding: 10px 14px;
	text-align: left;
	transition: background-color 0.13s ease;
	width: 100%;
}

.mr-group__btn:hover {
	background: var(--wp--preset--color--base);
}

.mr-group__name {
	color: var(--wp--preset--color--heading);
	flex: 1;
	font-size: 13.5px;
	font-weight: 600;
}

.mr-group__meta {
	color: var(--wp--preset--color--muted);
	font-size: 12.5px;
}

.mr-group__meta.is-set {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.mr-group__chev {
	border-bottom: 1.5px solid var(--wp--preset--color--muted);
	border-right: 1.5px solid var(--wp--preset--color--muted);
	flex: none;
	height: 6px;
	transform: rotate(45deg);
	transition: transform 0.17s ease;
	width: 6px;
}

.mr-group:not(.is-collapsed) .mr-group__chev {
	transform: rotate(-135deg);
}

/* Open is the default; the script folds what it may once it runs. */
.mr-group__body {
	border-top: 1px solid var(--wp--custom--color--card-border);
	display: block;
	padding: 14px;
}

.mr-group.is-collapsed .mr-group__body {
	display: none;
}

/* The group owns the spacing, so the fields inside it sit tight. */
.mr-group__body .mr-form__field:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mr-group__chev { transition: none; }
}

.mr-group__note {
	margin: 0 0 12px;
}

/* Cookie consent ---------------------------------------------------------- */

/*
 * Anchored bottom-left rather than covering the page.
 *
 * A full-screen overlay makes the visitor deal with the banner before they can
 * read anything, which is the pattern that trains people to click the biggest
 * button to make it go away. This sits out of the way, and because nothing it
 * gates has run yet, there is no hurry.
 */
.mr-consent {
	bottom: 24px;
	left: 24px;
	max-width: min(460px, calc(100vw - 48px));
	position: fixed;
	z-index: 60;
}

.mr-consent[hidden] {
	display: none;
}

.mr-consent__panel {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow:
		inset 0 0 0 1px var(--wp--custom--color--card-border),
		0 18px 48px rgb(26 46 35 / 18%);
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 28px;
}

.mr-consent__title {
	color: var(--wp--preset--color--heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 8px;
}

.mr-consent__text {
	color: var(--wp--preset--color--body);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

.mr-consent__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mr-consent__row {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 14px;
}

/* The locked category is not a choice, so it does not offer the pointer that
   says it is one. */
.mr-consent__row:has(input:disabled) {
	cursor: default;
}

.mr-consent__name {
	color: var(--wp--preset--color--heading);
	display: block;
	font-size: 15px;
	font-weight: 700;
}

.mr-consent__desc {
	color: var(--wp--preset--color--body);
	display: block;
	font-size: 13px;
	line-height: 1.5;
	margin-top: 2px;
}

/* The switch: a real checkbox, visually hidden, with the track drawn beside it
   so keyboard and screen readers get the native control and its label. */
.mr-consent__switch {
	display: inline-block;
	flex: none;
	height: 24px;
	position: relative;
	width: 44px;
}

.mr-consent__switch input {
	height: 100%;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 100%;
	z-index: 1;
}

.mr-consent__track {
	background: var(--wp--preset--color--divider);
	border-radius: 999px;
	inset: 0;
	position: absolute;
	transition: background-color 0.15s ease;
}

.mr-consent__track::after {
	background: var(--wp--preset--color--surface);
	border-radius: 50%;
	content: "";
	height: 18px;
	left: 3px;
	position: absolute;
	top: 3px;
	transition: transform 0.15s ease;
	width: 18px;
}

.mr-consent__switch input:checked + .mr-consent__track {
	background: var(--wp--preset--color--primary);
}

.mr-consent__switch input:checked + .mr-consent__track::after {
	transform: translateX(20px);
}

.mr-consent__switch input:disabled + .mr-consent__track {
	background: var(--wp--preset--color--muted);
}

.mr-consent__switch input:focus-visible + .mr-consent__track {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.mr-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mr-consent__actions .mr-btn {
	flex: 1 1 auto;
	justify-content: center;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.mr-consent {
		bottom: 12px;
		left: 12px;
		max-width: calc(100vw - 24px);
	}

	.mr-consent__panel { gap: 16px; padding: 20px; }

	/* Stacked, so the three actions read as three equal choices rather than
	   two cramped ones beside a wide "accept". */
	.mr-consent__actions .mr-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.mr-consent__track,
	.mr-consent__track::after {
		transition: none;
	}
}