/*
Theme Name: Moti Ronel
Theme URI: https://www.moti-ronel.com/
Author: Moti Ronel
Description: ערכת בלוקים מותאמת אישית לאתר מוטי רונאל — תוספות שיער טבעי. עיצוב זכוכיתי חם, RTL מלא, עריכה ויזואלית מלאה בעורך האתר.
Version: 1.44.36
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moti-ronel
Tags: full-site-editing, block-patterns, rtl-language-support, one-column, custom-colors
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	--mr-ink:          #2a221d;
	--mr-ink-strong:   #221b16;
	--mr-ink-soft:     #3e3630;
	--mr-muted:        #5c534d;
	--mr-muted-2:      #615953;
	--mr-muted-3:      #605650;
	--mr-nav:          #4b4038;
	--mr-espresso:     #31271f;

	--mr-accent:       #744e33;
	--mr-accent-label: #7d5b40;
	--mr-accent-mid:   #a4744f;
	--mr-accent-rule:  #ab7a55;
	--mr-accent-pale:  #d5af92;
	--mr-mono:         #9f6e4a;
	--mr-kicker:       #796356;

	--mr-cream:        #f9f4ee;
	--mr-cream-dim:    #efebe4;
	--mr-cream-muted:  #e2ddd5;
	--mr-cream-soft:   #ccc6bd;
	--mr-sand:         #e3cead;
	--mr-sand-dim:     #bfae95;
	--mr-sand-link:    #e3d6c2;
	--mr-line:         #dfdad2;
	--mr-line-2:       #e5e1da;
	--mr-line-dark:    #50453d;
	--mr-placeholder:  #9e9791;

	/* Glass surfaces */
	--mr-glass:        rgba(255, 255, 255, .54);
	--mr-glass-soft:   var(--mr-glass);
	--mr-glass-strong: rgba(255, 255, 255, .68);
	--mr-glass-hover:  rgba(255, 255, 255, .84);
	--mr-glass-brd:    rgba(255, 255, 255, .72);
	--mr-blur:         blur(20px);

	--mr-shadow-card:  0 18px 38px -34px rgba(58, 45, 36, .58);
	--mr-shadow-panel: 0 26px 50px -40px rgba(58, 45, 36, .68);
	--mr-shadow-soft:  0 16px 34px -30px rgba(58, 45, 36, .58);
	--mr-shadow-pill:  0 14px 28px -18px rgba(116, 78, 51, .72);

	--mr-radius:       22px;
	--mr-radius-lg:    26px;
	--mr-radius-sm:    14px;

	/* Placeholder texture used where the design had no photo yet */
	--mr-texture: repeating-linear-gradient(135deg, #f0ebe3 0 10px, #f7f3ed 10px 20px);

	/* Service pages */
	--mr-tbl-highlight:  #fbf0e4;
	--mr-note-rule:      #bd845b;
	--mr-cmpcard-brd:    #e3cdb5;
	--mr-cmpcard-title:  #5b3a21;
	--mr-subcard-bg:     #3d332b;
	--mr-subcard-brd:    #564b43;
	--mr-subcard-title:  #eddbc1;
	--mr-ondark-text:    #d3cdc3;
	--mr-ondark-eyebrow: #d0ba9a;
	--mr-ondark-rule:    #c29c80;
	--mr-ondark-brd:     #7b6f66;
	--mr-ondark-hover:   #453b33;
	--mr-ondark-btn:     #ece7df;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

html {
	scroll-behavior: smooth;
	direction: rtl;
}

/* The editor canvas follows the admin locale, which may still be LTR. */
.editor-styles-wrapper {
	direction: rtl;
}

body {
	background: var(--mr-cream);
	background:
		radial-gradient(900px 620px at 82% -6%, oklch(0.9 0.05 62 / 0.55), transparent 70%),
		radial-gradient(760px 560px at 6% 22%, oklch(0.92 0.04 22 / 0.5), transparent 72%),
		radial-gradient(900px 700px at 60% 76%, oklch(0.93 0.035 158 / 0.42), transparent 74%),
		oklch(0.978 0.008 86);
	background-attachment: fixed;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p {
	text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

img {
	max-width: 100%;
	height: auto;
}

/* Section rhythm ---------------------------------------------------------- */

.mr-section {
	padding-inline: 28px;
	padding-block: clamp(56px, 6vw, 88px) 0;
}

.mr-section--tight  { padding-block: clamp(38px, 4.5vw, 64px) 0; }
.mr-section--stats  { padding-block: clamp(44px, 5vw, 72px) 0; }
.mr-section--last   { padding-block: clamp(56px, 6vw, 88px) clamp(52px, 6vw, 84px); }

/* Long service pages need occasional calm bands so the fixed gradient does
   not make every section read as one continuous surface. */
.entry-content > .mr-section:nth-of-type(4n + 2) {
	background: rgba(249, 244, 238, .42);
	border-block: 1px solid rgba(223, 218, 210, .38);
}

/* Helpers ----------------------------------------------------------------- */

/* Two visibility tiers, matching the design system: the nav and secondary
   links go at tablet width, the smaller trimmings hold on until phone width. */
.mr-hide-mobile,
.mr-hide-tablet { display: revert; }

@media (max-width: 1024px) {
	/* Footer ------------------------------------------------------------- */
	.mr-footer__cols {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 34px 30px;
	}
	.mr-footer__brandcol { grid-column: 1 / -1; padding-inline-end: 0; }
	.mr-footer__about { max-width: 60ch; }
	.mr-footer__proof { grid-template-columns: 1fr 1fr; row-gap: 26px; }
	.mr-footer__proofitem:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
	.mr-footer__proofitem:last-child { grid-column: 1 / -1; border-inline-start: 0; padding-inline-start: 0; }
	.mr-footer__prooflabel { max-width: 38ch; }
	.mr-footer__contactgrid { grid-template-columns: 1fr 1fr; }
	.mr-footer__cblock--cta { grid-column: 1 / -1; }
	.mr-footer__cblock--cta .wp-block-buttons { flex-direction: row; }
	.mr-footer__cblock--cta .wp-block-button { width: auto; flex: 1; }
	.mr-footer__bottom { margin-top: 26px; }

	.mr-hide-tablet { display: none !important; }
}

@media (max-width: 900px) {
	.mr-footer__cols { grid-template-columns: 1fr 1fr; }
	.mr-footer__contactgrid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
	.mr-hide-mobile { display: none !important; }
}

/* ==========================================================================
   3. Top bar
   ========================================================================== */

.mr-topbar {
	background: var(--mr-espresso);
	color: var(--mr-cream-dim);
	font-size: 13.5px;
	letter-spacing: .02em;
	padding-inline: 28px;
}

.mr-topbar .mr-topbar__inner {
	max-width: 1224px;
	margin-inline: auto;
	padding-block: 9px;
	gap: 16px;
}

.mr-topbar p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
}

.mr-topbar__meta { color: var(--mr-sand-dim); }

.mr-topbar a {
	color: var(--mr-cream);
	font-weight: 600;
	direction: ltr;
	text-decoration: none;
}

.mr-topbar a:hover { color: var(--mr-sand); }

/* ==========================================================================
   4. Header
   ========================================================================== */

/* The sticky box must be the template-part wrapper, not the styled bar inside
   it — a sticky element can only travel inside its own containing block. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	/* Above the fixed call bar / WhatsApp pill (z-index 70): the mobile menu
	   overlay lives inside this stacking context, so with 60 the bar painted
	   over the open menu (QA 2026-09-17). */
	z-index: 80;
}

.mr-header {
	position: relative;
	background: rgba(255, 255, 255, .62);
	border-bottom: 1px solid rgba(255, 255, 255, .6);
	box-shadow: 0 10px 30px -26px rgba(58, 45, 36, .6);
	padding-inline: 28px;
}

/* The frosted-glass blur sits on a pseudo-element behind the bar. A
   backdrop-filter on the bar itself makes it the containing block of every
   fixed-position descendant (Filter Effects 2), which pins the Navigation
   block's mobile overlay to the bar's box instead of the viewport
   (QA 2026-09-17). Blur first, tint on top: same picture as before. */
.mr-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	-webkit-backdrop-filter: blur(22px) saturate(1.4);
	backdrop-filter: blur(22px) saturate(1.4);
}

.mr-header__inner {
	max-width: 1224px;
	margin-inline: auto;
	min-height: 80px;
	gap: 24px;
}

/* Brand ------------------------------------------------------------------- */

.mr-brand {
	line-height: 1.05;
	gap: 0 !important;
	cursor: pointer;
}

.mr-brand p { margin: 0; }

.mr-brand__name {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 23px;
	letter-spacing: -.005em;
}

.mr-brand__name a {
	color: var(--mr-ink-strong);
	text-decoration: none;
}

.mr-brand__sub {
	font-size: 10.5px;
	letter-spacing: .26em;
	color: var(--mr-kicker);
}

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

.mr-nav {
	font-size: 15px;
	font-weight: 500;
}

.mr-nav .wp-block-navigation-item__content {
	color: var(--mr-nav);
	padding: 9px 13px;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

.mr-nav .wp-block-navigation-item__content:hover,
.mr-nav .wp-block-navigation-item__content:focus-visible {
	background: rgba(255, 255, 255, .72);
	color: var(--mr-espresso);
}

.mr-nav .wp-block-navigation__responsive-container-open,
.mr-nav .wp-block-navigation__responsive-container-close {
	color: var(--mr-espresso);
}

/* Header actions ---------------------------------------------------------- */

.mr-header__actions { gap: 10px; }

.mr-header__link a {
	color: var(--mr-muted);
	font-size: 15px;
	font-weight: 500;
	padding: 9px 13px;
	text-decoration: none;
}

.mr-header__link a:hover { color: var(--mr-espresso); }

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.wp-block-button__link {
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* Solid espresso — header CTA */
.is-style-mr-dark .wp-block-button__link,
.wp-block-button.is-style-mr-dark .wp-block-button__link {
	background: var(--mr-espresso);
	color: var(--mr-cream);
	border-radius: 999px;
	padding: 12px 22px;
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 12px 26px -16px rgba(49, 39, 31, .85);
}

.wp-block-button.is-style-mr-dark .wp-block-button__link:hover {
	background: var(--mr-accent);
	color: #fff;
}

/* Primary copper */
.wp-block-button.is-style-mr-primary .wp-block-button__link {
	background: var(--mr-accent);
	color: #fff;
	border-radius: 999px;
	padding: 16px 30px;
	font-size: 16px;
	font-weight: 600;
	box-shadow: var(--mr-shadow-pill);
}

.wp-block-button.is-style-mr-primary .wp-block-button__link:hover {
	background: var(--mr-espresso);
	color: #fff;
}

/* Glass / ghost */
.wp-block-button.is-style-mr-glass .wp-block-button__link {
	background: var(--mr-glass-strong);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, .8);
	color: var(--mr-ink);
	border-radius: 999px;
	padding: 16px 30px;
	font-size: 16px;
	font-weight: 600;
}

.wp-block-button.is-style-mr-glass .wp-block-button__link:hover {
	background: var(--mr-glass-hover);
	color: var(--mr-ink-strong);
}

/* Light pill on dark surfaces */
.wp-block-button.is-style-mr-light .wp-block-button__link {
	background: var(--mr-cream);
	color: var(--mr-espresso);
	border-radius: 999px;
	padding: 15px 28px;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}

.wp-block-button.is-style-mr-light .wp-block-button__link:hover {
	background: var(--mr-sand);
	color: var(--mr-espresso);
}

/* Underlined text link */
.mr-textlink a {
	font-weight: 600;
	font-size: 16.5px;
	color: var(--mr-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--mr-accent-pale);
	padding-bottom: 2px;
}

.mr-textlink a:hover {
	color: var(--mr-espresso);
	border-bottom-color: var(--mr-accent);
}

/* ==========================================================================
   6. Shared surfaces
   ========================================================================== */

.mr-glass,
.mr-panel,
.mr-card,
.mr-step,
.mr-faq,
.mr-formcard,
.mr-tablewrap,
.mr-stats {
	background: var(--mr-glass);
	-webkit-backdrop-filter: var(--mr-blur);
	backdrop-filter: var(--mr-blur);
	border: 1px solid var(--mr-glass-brd);
	border-radius: var(--mr-radius);
	box-shadow: var(--mr-shadow-card);
}

.mr-panel {
	background: var(--mr-glass-strong);
	border-color: rgba(255, 255, 255, .7);
	border-radius: var(--mr-radius-lg);
	box-shadow: var(--mr-shadow-panel);
	padding: clamp(26px, 3.4vw, 52px);
}

/* Clickable card / row ---------------------------------------------------- */

.mr-linkcard {
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.mr-linkcard:hover { background: var(--mr-glass-hover); }

/* ==========================================================================
   7. Section heading group
   ========================================================================== */

.mr-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 11.5px;
	letter-spacing: .22em;
	color: var(--mr-accent-label);
	font-weight: 600;
	margin: 0 0 16px;
}

.mr-eyebrow::before {
	content: "";
	flex: none;
	width: 32px;
	height: 1px;
	background: var(--mr-accent-rule);
}

/* These blocks keep the constrained layout's own width and auto margins, so
   their reading edge lines up with the section's content column. Capping the
   width on the block itself instead would let the auto margins centre it, and
   reclaiming the margins would pin it to the section's padding edge — both
   leave the heading out of step with the content below it. The reading width
   is therefore capped on the children. */
.mr-sectionhead > *        { max-width: 66ch; }
.mr-sectionhead--wide > *  { max-width: 68ch; }

.mr-sectionhead h2 {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp(26px, 2.9vw, 40px);
	line-height: 1.22;
	letter-spacing: -.015em;
	margin: 0;
}

.mr-sectionhead > p {
	margin: 16px 0 0;
	color: var(--mr-muted);
	font-size: 18px;
}

/* ==========================================================================
   8. Hero
   ========================================================================== */

.mr-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, .66);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 999px;
	padding: 8px 18px 8px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mr-accent-label);
	box-shadow: 0 10px 26px -20px rgba(58, 45, 36, .8);
	margin: 0;
}

.mr-badge::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mr-accent-mid);
}

.mr-hero h1 {
	margin-top: 20px;
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp(30px, 3.6vw, 50px);
	line-height: 1.16;
	letter-spacing: -.018em;
	color: var(--mr-ink-strong);
}

.mr-hero__lead {
	margin: 20px 0 0;
	font-size: clamp(17px, 1.3vw, 19.5px);
	color: var(--mr-muted);
	max-width: 54ch;
}

.mr-hero__lead strong {
	font-weight: 700;
	color: var(--mr-ink-soft);
}

.mr-hero__lead--sm {
	margin-top: 12px;
	font-size: 16.5px;
	max-width: 58ch;
}

.mr-hero__note {
	margin: 18px 0 0;
	font-size: 14px;
	color: var(--mr-kicker);
}

/* "Last updated" lines (price list, 22/09/2026) — also read into the schema
   (moti_ronel_schema_last_reviewed). */
.mr-updated {
	font-size: 14px;
	color: var(--mr-kicker);
}

.mr-sectionhead .mr-updated { margin-top: 10px !important; }
.mr-updated time { white-space: nowrap; font-weight: 600; }

/* Numbered link rows ------------------------------------------------------ */

.mr-numlinks { gap: 10px; margin-top: 32px; }

.mr-numlink {
	display: flex;
	align-items: center;
	gap: 16px;
	background: rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: var(--mr-radius-sm);
	padding: 14px 18px;
	color: var(--mr-ink);
}

.mr-numlink:hover { background: rgba(255, 255, 255, .82); }

.mr-numlink p { margin: 0; }

.mr-numlink__n {
	font-family: var(--wp--preset--font-family--mono), monospace;
	font-size: 11.5px;
	/* --mr-mono measured 4.2:1 at 11.5px, just under the floor. */
	color: var(--mr-accent);
	flex: none;
}

.mr-numlink__t {
	font-size: 16.5px;
	flex: 1;
}

.mr-numlink__t a {
	color: inherit;
	text-decoration: none;
}

.mr-numlink__t strong { font-weight: 600; }

.mr-numlink::after {
	content: "\2039";
	margin-inline-start: auto;
	color: var(--mr-accent-rule);
	flex: none;
}

/* Hero image -------------------------------------------------------------- */

.mr-hero__figure { position: relative; }

/* The hero sets a large before/after frame beside the headline, so its columns
   are given more room than the standard content column. */
.mr-hero > .mr-2col { max-width: 1320px; }

.mr-hero__frame {
	background: var(--mr-glass);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: var(--mr-radius-lg);
	padding: 12px;
	box-shadow: 0 28px 52px -42px rgba(58, 45, 36, .62);
}

.mr-hero__frame img {
	width: 100%;
	/* Same per-image escape hatch as .mr-framed--auto: a portrait hero photo
	   would lose its top and bottom to the landscape default. */
	aspect-ratio: var(--mr-ratio, 4 / 3.15);
	object-fit: cover;
	border-radius: 16px;
	background: var(--mr-texture);
	display: block;
}

.mr-hero__frame figure { margin: 0; }

.mr-hero__stat {
	position: absolute;
	bottom: -24px;
	inset-inline-end: -22px;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, .85);
	border-radius: 18px;
	padding: 18px 24px;
	box-shadow: 0 24px 44px -28px rgba(58, 45, 36, .9);
}

.mr-hero__stat p { margin: 0; }

.mr-hero__stat .mr-hero__stat-n {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 28px;
	line-height: 1;
	color: var(--mr-accent);
}

.mr-hero__stat .mr-hero__stat-l {
	font-size: 12.5px;
	letter-spacing: .08em;
	color: var(--mr-muted-3);
	margin-top: 6px;
}

/* Caption-only variant: no number above it, so it needs room to wrap. */
.mr-hero__stat--wide {
	max-width: 17rem;
	bottom: -22px;
	padding: 16px 22px;
}

.mr-hero__stat--wide .mr-hero__stat-l {
	margin-top: 0;
	letter-spacing: .04em;
	color: var(--mr-muted);
}

/* ==========================================================================
   9. Stats strip
   ========================================================================== */

.mr-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	overflow: hidden;
	gap: 0;
}

.mr-stats--tight { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.mr-stats--tight .mr-stat { padding: 24px 16px; }
.mr-stats--tight .mr-stat__n { font-size: 26px; }

.mr-stat {
	padding: 28px 18px;
	text-align: center;
	border-inline-start: 1px solid rgba(255, 255, 255, .6);
}

.mr-stat:first-child { border-inline-start: 0; }

.mr-stat p { margin: 0; }

.mr-stat__n {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 27px;
	color: var(--mr-espresso);
	line-height: 1.2;
}

.mr-stat__l {
	font-size: 13.5px;
	color: var(--mr-muted-3);
}

/* ==========================================================================
   10. Card grids
   ========================================================================== */

.mr-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 22px;
}

.mr-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: inherit;
}

.mr-card > figure,
.mr-card > .wp-block-image {
	margin: 0;
}

.mr-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--mr-texture);
	display: block;
}

.mr-card__body {
	padding: 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0;
}

.mr-card__body h3 {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
	font-family: var(--wp--preset--font-family--body), sans-serif;
}

.mr-card__body > p {
	margin: 11px 0 0;
	font-size: 16px;
	color: var(--mr-muted-2);
}

.mr-card__foot {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid rgba(223, 218, 210, .9);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mr-card__foot p { margin: 0; }

.mr-card__foot-label {
	font-size: 11.5px;
	letter-spacing: .14em;
	color: var(--mr-kicker);
}

.mr-card__foot-value {
	font-size: 16.5px;
	font-weight: 600;
	color: var(--mr-accent);
}

.mr-card__foot-value a {
	color: inherit;
	text-decoration: none;
}

.mr-card__foot::after {
	content: "\2039";
	font-size: 20px;
	color: var(--mr-accent-rule);
	margin-inline-start: auto;
}

/* Placeholder tile where the design had no photo yet ---------------------- */

.mr-placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--mr-texture);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	margin: 0;
}

.mr-placeholder p {
	font-family: var(--wp--preset--font-family--mono), monospace;
	font-size: 11.5px;
	color: var(--mr-muted-3);
	background: rgba(255, 255, 255, .8);
	padding: 7px 12px;
	border-radius: 8px;
	text-align: center;
	margin: 0;
}

/* ==========================================================================
   11. Dark CTA banner
   ========================================================================== */

.mr-darkcta {
	margin-top: 22px;
	background: var(--mr-espresso);
	border-radius: var(--mr-radius);
	padding: 32px 34px;
	gap: 24px;
	box-shadow: 0 30px 56px -40px rgba(49, 39, 31, 1);
}

.mr-darkcta h3 {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 23px;
	color: var(--mr-cream);
	margin: 0;
}

.mr-darkcta p {
	margin: 8px 0 0;
	color: var(--mr-cream-soft);
	font-size: 16.5px;
}

/* ==========================================================================
   12. Two column panels
   ========================================================================== */

.mr-2col {
	gap: clamp(32px, 5vw, 64px) !important;
	align-items: center;
}

.mr-2col--top { align-items: flex-start; }

.mr-panel h2 {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp(26px, 2.9vw, 40px);
	line-height: 1.22;
	letter-spacing: -.015em;
	margin: 0;
}

.mr-panel__lead {
	margin: 20px 0 0;
	font-size: 17.5px;
	color: var(--mr-muted);
}

/* Body copy that follows the lead, and a trailing note after a list. */
.mr-panel__p,
.mr-panel__outro {
	margin: 14px 0 0;
	font-size: 16.5px;
	color: var(--mr-muted);
}

/* The certificate transcription: the document's own words, one step quieter
   than the paragraph above them (about page, 20/09/2026). */
.mr-panel__p--small {
	font-size: 15.5px;
	color: var(--mr-muted-2);
}

.mr-panel__outro { margin-top: 18px; }

.mr-panel__p strong,
.mr-panel__lead strong {
	font-weight: 700;
	color: var(--mr-ink-soft);
}

.mr-footnote {
	margin: 16px 0 0;
	font-size: 16px;
	color: var(--mr-muted-3);
	max-width: 80ch;
}

/* Anchor targets must clear the sticky header. */
.mr-anchor { scroll-margin-top: 90px; }

/* Lettered rows ----------------------------------------------------------- */

.mr-checkrows { gap: 10px; margin-top: 26px; }

.mr-checkrow {
	display: flex;
	gap: 16px;
	align-items: baseline;
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 12px;
	padding: 13px 16px;
}

.mr-checkrow p { margin: 0; }

.mr-checkrow__k {
	font-family: var(--wp--preset--font-family--mono), monospace;
	font-size: 11.5px;
	/* --mr-mono measured 4.2:1 at 11.5px, just under the floor. */
	color: var(--mr-accent);
	flex: none;
}

.mr-checkrow__t {
	font-size: 16.5px;
	color: var(--mr-ink-soft);
}

/* Video frame ------------------------------------------------------------- */

.mr-videoframe {
	background: rgba(255, 255, 255, .6);
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 20px;
	padding: 10px;
}

/* Videos are core embed blocks: WordPress owns the responsive aspect box, the
   theme owns the frame. Clipping happens on the wrapper because the iframe is
   absolutely positioned inside it. */
.mr-videoframe .wp-block-embed,
.mr-videoframe figure { margin: 0; }

.mr-videoframe .wp-block-embed__wrapper {
	border-radius: 12px;
	overflow: hidden;
	background: var(--mr-cream-dim);
}

.mr-videoframe iframe {
	border: 0;
	display: block;
}

/* ==========================================================================
   13. Comparison table
   ========================================================================== */

.mr-tablewrap {
	overflow-x: auto;
}

.mr-tablewrap table {
	width: 100%;
	border-collapse: collapse;
	min-width: 660px;
	margin: 0;
	border: 0;
}

.mr-tablewrap thead tr { background: rgba(255, 255, 255, .5); }

.mr-tablewrap th {
	text-align: start;
	padding: 18px 26px;
	font-size: 12px;
	letter-spacing: .16em;
	font-weight: 600;
	color: var(--mr-muted-3);
	border: 0;
	border-bottom: 1px solid rgba(229, 225, 218, .9);
}

.mr-tablewrap td {
	padding: 22px 26px;
	border: 0;
	border-bottom: 1px solid rgba(229, 225, 218, .8);
	font-size: 16.5px;
	text-align: start;
}

.mr-tablewrap tbody tr:last-child td { border-bottom: 0; }

.mr-tablewrap td:first-child { font-weight: 600; }
.mr-tablewrap td:last-child  { font-size: 16px; color: var(--mr-muted-2); font-weight: 400; }

/* ==========================================================================
   14. Video / testimonials
   ========================================================================== */

.mr-featured { padding: 12px; }

.mr-featured .wp-block-embed,
.mr-featured figure { margin: 0; }

.mr-featured .wp-block-embed__wrapper {
	border-radius: 14px;
	overflow: hidden;
	background: var(--mr-cream-dim);
}

.mr-featured iframe {
	border: 0;
	display: block;
}

.mr-featured__body { padding: 22px 16px 14px; }

.mr-featured__body h3 {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 22px;
	line-height: 1.3;
	margin: 0;
}

.mr-featured__body p {
	margin: 10px 0 0;
	font-size: 16.5px;
	color: var(--mr-muted-2);
}

.mr-videocard { overflow: hidden; }

.mr-videocard__media { position: relative; margin: 0 !important; }

.mr-videocard__media figure { margin: 0; }

.mr-videocard__media .wp-block-embed__wrapper { background: var(--mr-cream-dim); }

/* A landscape clip is flush with the card edge. A portrait clip fills the same
   width, so without a frame it would touch the edge on both sides; 8px (~2mm)
   of the card shows around it instead (owner, 17/09/2026). The other portrait
   carriers — .mr-videotile, .mr-case, .mr-mediacard — already pad by 10px. */
.mr-videocard.mr-media-portrait .mr-videocard__media { padding: 8px; }

/* A still can stand in for a clip in the grid; when it is square it keeps its
   own shape instead of being cropped to the 16:9 the videos use. */
.mr-videocard--square .mr-videocard__media img { aspect-ratio: 1 / 1; }

.mr-videocard__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--mr-texture);
	display: block;
}

.mr-videocard__media iframe {
	border: 0;
	display: block;
}

.mr-videocard__body { padding: 20px 22px 22px; }

.mr-videocard__body h3 {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	font-family: var(--wp--preset--font-family--body), sans-serif;
}

.mr-videocard__body h3 a {
	color: inherit;
	text-decoration: none;
}

.mr-videocard__body p {
	margin: 8px 0 0;
	font-size: 15.5px;
	color: var(--mr-muted-2);
}

/* ==========================================================================
   15. Process steps
   ========================================================================== */

.mr-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
	gap: 18px;
}

.mr-steps--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

/* The number sits beside the title rather than stacked above it, which drops
   a whole line of height per card. The description spans both columns instead
   of indenting past the number, so narrow cards don't gain the line back. */
.mr-step {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 14px;
	align-items: baseline;
	padding: 24px 22px 26px;
	border-radius: 20px;
	box-shadow: var(--mr-shadow-soft);
}

.mr-step p { margin: 0; }

.mr-step__n {
	grid-column: 1;
	grid-row: 1;
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 28px;
	line-height: 1;
	/* accent-pale measured 1.94:1 here — under the floor even for large text. */
	color: var(--mr-accent-mid);
}

.mr-step h3 {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: 19.5px;
	font-weight: 600;
	line-height: 1.3;
	font-family: var(--wp--preset--font-family--body), sans-serif;
}

.mr-step__t {
	grid-column: 1 / -1;
	margin: 10px 0 0 !important;
	font-size: 16px;
	color: var(--mr-muted-2);
}

/* ==========================================================================
   16. Why us
   ========================================================================== */

.mr-framed {
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .8);
	margin: 0;
}

.mr-framed img {
	width: 100%;
	aspect-ratio: 4 / 3.2;
	object-fit: cover;
	background: var(--mr-texture);
	display: block;
}

/* Homepage panel photos come in their own ratios; the default 4/3.2 frame
   would crop roughly a quarter of each away. */
.mr-framed--wide img   { aspect-ratio: 1024 / 601; }
.mr-framed--square img { aspect-ratio: 1 / 1; }

/* Landscape variant. The ratio is declared per image through --mr-ratio rather
   than left to `aspect-ratio: auto`: measured on this theme, `auto` lays the
   figure out at roughly five times the correct height — the column stretches it
   and object-fit then crops the photo to a tall strip — even once the file has
   loaded and the markup carries width and height attributes. */
.mr-framed--auto img {
	aspect-ratio: var(--mr-ratio, 16 / 9);
	height: auto;
}

.mr-ruled-list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}

.mr-ruled-list li {
	padding: 13px 0;
	border-bottom: 1px solid rgba(223, 218, 210, .8);
	font-size: 16.5px;
	color: var(--mr-ink-soft);
}

.mr-ruled-list li:last-child { border-bottom: 0; }

.mr-ruled-list a {
	color: var(--mr-accent);
	text-decoration: none;
}

.mr-ruled-list a:hover { color: var(--mr-espresso); }

/* ==========================================================================
   17. FAQ
   ========================================================================== */

.mr-faq { padding: 8px 26px; }

.mr-faq__title {
	margin: 14px 0 2px !important;
	font-size: 13px;
	letter-spacing: .16em;
	font-weight: 600;
	color: var(--mr-kicker);
}

.mr-faq .wp-block-details {
	border-bottom: 1px solid rgba(229, 225, 218, .8);
	margin: 0;
}

.mr-faq .wp-block-details:last-child { border-bottom: 0; }

.mr-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	font-size: 19px;
	font-weight: 600;
	color: var(--mr-ink);
	cursor: pointer;
	list-style: none;
}

.mr-faq summary::-webkit-details-marker { display: none; }
.mr-faq summary::marker { content: ""; }

.mr-faq summary::after {
	content: "+";
	flex: none;
	font-size: 22px;
	font-weight: 300;
	color: var(--mr-accent-mid);
	transition: transform .2s ease;
	line-height: 1;
}

.mr-faq details[open] > summary::after { transform: rotate(45deg); }

.mr-faq .wp-block-details > p {
	margin: 0 0 22px;
	font-size: 16.5px;
	color: var(--mr-muted);
	max-width: 70ch;
}

/* ==========================================================================
   18. Contact
   ========================================================================== */

/* The contact section lays out its own two columns rather than going through
   .mr-sectionhead, so its h2 was never picked up by a heading rule and fell
   through to the base body size — ending up smaller than the h3 inside the form
   card beside it. The column also had no surface of its own, so it read as loose
   text next to a solid card. Both are fixed here for all three contact sections. */
.mr-contactpanel {
	/* A warm taupe rather than another wash of white: the rows sitting on it are
	   white cards, and against a near-white panel they had nothing to read against.
	   Opaque, so the blur it used to carry is no longer doing anything. */
	background: #e4ded3;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 24px;
	padding: clamp(22px, 2.8vw, 38px);
	align-self: start;
}

/* The copper label loses headroom on the darker surface, so it steps down a
   shade to keep clear of the small-text contrast floor. */
.mr-contactpanel .mr-eyebrow { color: var(--mr-accent); }

.mr-contactpanel h2 {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp(23px, 2.1vw, 30px);
	line-height: 1.26;
	letter-spacing: -.015em;
	color: var(--mr-ink-strong);
	margin: 0;
}

/* Rows now sit on a tinted panel, so they need more opacity to stay distinct. */
/* Solid white with a soft lift so each row reads as a card on the taupe; the
   studio block stays a half-step back because it is information, not an action. */
.mr-contactpanel .mr-contactrow {
	background: #fff;
	border-color: rgba(255, 255, 255, .9);
	box-shadow: var(--mr-shadow-card);
}

.mr-contactpanel .mr-studio {
	background: rgba(255, 255, 255, .74);
	border-color: rgba(255, 255, 255, .8);
}

/* A phone number is an LTR run inside RTL prose. Isolating it keeps the digits
   and separators in their own order regardless of the words around it. */
.mr-tel {
	direction: ltr;
	unicode-bidi: isolate;
	white-space: nowrap;
	font-weight: 600;
	color: var(--mr-accent-label);
	text-underline-offset: 3px;
}

.mr-contactrows { gap: 10px; margin-top: 26px; }

.mr-contactrow {
	background: rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 16px;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	color: var(--mr-ink);
}

.mr-contactrow:hover { background: rgba(255, 255, 255, .85); }

.mr-contactrow p { margin: 0; }

.mr-contactrow__k {
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--mr-accent-label);
	font-weight: 700;
	text-transform: none;
}

.mr-contactrow__v {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 22px;
	direction: ltr;
}

.mr-contactrow__v a {
	color: inherit;
	text-decoration: none;
}

.mr-studio {
	background: rgba(255, 255, 255, .42);
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 16px;
	padding: 18px 20px;
}

.mr-studio p { margin: 0; }
.mr-studio .mr-contactrow__k { margin-bottom: 6px; }

.mr-studio__t {
	font-size: 16.5px;
	color: var(--mr-ink-soft);
}

/* Lead form --------------------------------------------------------------- */

.mr-formcard {
	background: var(--mr-glass-strong);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border: 1px solid rgba(255, 255, 255, .85);
	border-radius: 24px;
	padding: clamp(24px, 3vw, 40px);
	box-shadow: 0 34px 62px -40px rgba(58, 45, 36, .9);
}

.mr-form h3 {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 24px;
	margin: 0;
}

.mr-form__intro {
	margin: 8px 0 24px;
	font-size: 16px;
	color: var(--mr-muted-3);
}

.mr-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.mr-form label {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mr-muted);
}

.mr-form input[type="text"],
.mr-form input[type="tel"],
.mr-form input[type="email"],
.mr-form textarea,
.mr-form select {
	/* Inputs are content-box by default: width:100% + padding pushed them 30px
	   past the card on phones (owner, 16/09/2026). */
	box-sizing: border-box;
	border: 1px solid var(--mr-line);
	border-radius: 12px;
	padding: 13px 14px;
	font-weight: 400;
	font-size: 16px;
	font-family: inherit;
	color: var(--mr-ink);
	background: rgba(255, 255, 255, .75);
	width: 100%;
}

.mr-form input:focus,
.mr-form select:focus {
	outline: 2px solid var(--mr-accent-mid);
	outline-offset: 1px;
}

/* Named per field: the old ".mr-form ::placeholder" was glued by the minifier into
   ".mr-form::placeholder" and matched nothing (review 22/09/2026). #6f6760 keeps
   4.5:1 on the white and the cream fields. */
.mr-form input::placeholder,
.mr-form textarea::placeholder { color: #6f6760; opacity: 1; }

.mr-form__consent {
	flex-direction: row !important;
	gap: 10px;
	align-items: flex-start;
	margin-top: 18px;
	font-size: 14.5px;
	font-weight: 400 !important;
	color: var(--mr-muted-2);
	line-height: 1.5;
}

.mr-form__consent input {
	margin-top: 5px;
	accent-color: var(--mr-accent);
	flex: none;
}

/* Privacy notice above the consent box (s.11 notice) and the optional
   marketing opt-in below it. Same tone as the consent line. */
.mr-form__notice {
	margin: 18px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--mr-muted-2);
}

.mr-form__notice a {
	color: var(--mr-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mr-form__optin {
	margin-top: 10px;
}

.mr-form button[type="submit"] {
	margin-top: 22px;
	width: 100%;
	background: var(--mr-espresso);
	color: var(--mr-cream);
	border: 0;
	border-radius: 999px;
	padding: 17px;
	font-size: 16.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	box-shadow: 0 18px 34px -22px rgba(49, 39, 31, 1);
	transition: background-color .2s ease;
}

.mr-form button[type="submit"]:hover { background: var(--mr-accent); }

.mr-form__foot {
	margin: 14px 0 0;
	font-size: 13.5px;
	color: var(--mr-muted-3);
	text-align: center;
}

.mr-form__foot a { font-weight: 600; color: var(--mr-accent); text-decoration: none; }

/* Thank-you state */
.mr-form-sent {
	padding: 34px 0;
	text-align: center;
}

.mr-form-sent__h {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 27px;
	color: var(--mr-accent);
	margin: 0;
}

.mr-form-sent p {
	margin: 14px auto 0;
	max-width: 40ch;
	color: var(--mr-muted-2);
	font-size: 16.5px;
}

.mr-form-sent a {
	display: inline-block;
	margin-top: 18px;
	font-weight: 600;
	color: var(--mr-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--mr-accent-pale);
	padding-bottom: 2px;
}

.mr-form__error {
	background: rgba(164, 116, 79, .12);
	border: 1px solid var(--mr-accent-pale);
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 15px;
	color: var(--mr-accent);
	margin: 0 0 18px;
}

/* ==========================================================================
   19. Footer
   ========================================================================== */

.mr-footer {
	background: var(--mr-espresso);
	color: var(--mr-cream-muted);
	padding-block: 0 0;
	padding-inline: 28px;
	margin-top: 0;
}

.mr-footer__inner {
	max-width: 1224px;
	margin-inline: auto;
}

.mr-footer p { margin: 0; }

/* Proof strip ------------------------------------------------------------- */

.mr-footer__proof {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-bottom: 1px solid var(--mr-line-dark);
	padding-block: clamp(28px, 3.4vw, 40px);
}

.mr-footer__proofitem {
	padding-inline: clamp(16px, 2vw, 30px);
	border-inline-start: 1px solid var(--mr-line-dark);
}

.mr-footer__proofitem:first-child { border-inline-start: 0; padding-inline-start: 0; }
.mr-footer__proofitem:last-child  { padding-inline-end: 0; }

.mr-footer__proofvalue {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.25;
	color: var(--mr-sand);
	letter-spacing: .005em;
}

.mr-footer__prooflabel {
	margin-top: 7px !important;
	font-size: 13px;
	line-height: 1.55;
	color: var(--mr-cream-soft);
	max-width: 30ch;
}

.mr-footer__prooflabel a {
	color: var(--mr-sand-link);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.mr-footer__prooflabel a:hover { color: #fff; border-bottom-color: var(--mr-accent-rule); }

/* Link columns ------------------------------------------------------------ */

.mr-footer__cols {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1fr;
	gap: 40px;
	padding-block: clamp(40px, 4.6vw, 60px);
}

.mr-footer__brandcol { padding-inline-end: 20px; }

.mr-footer__brand {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 22px;
	color: var(--mr-cream);
}

.mr-footer__brandsub {
	font-size: 10.5px;
	letter-spacing: .26em;
	color: var(--mr-sand-dim);
	margin-top: 4px !important;
}

.mr-footer__about {
	margin-top: 18px !important;
	font-size: 15px;
	line-height: 1.75;
	color: var(--mr-cream-soft);
	max-width: 40ch;
}

.mr-footer__social {
	gap: 14px;
	margin-top: 22px;
	font-size: 14px;
	font-weight: 600;
}

.mr-footer__social a {
	color: var(--mr-sand-link);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}

.mr-footer__social a:hover { color: var(--mr-cream); border-bottom-color: var(--mr-accent-rule); }

.mr-footer__h {
	font-size: 11.5px;
	letter-spacing: .18em;
	font-weight: 600;
	color: var(--mr-sand-dim);
	margin-bottom: 18px !important;
}

.mr-footer__links { gap: 11px; font-size: 15px; }

.mr-footer__links a,
.mr-footer__links .wp-block-navigation-item__content {
	color: var(--mr-cream-muted);
	text-decoration: none;
	line-height: 1.5;
}

.mr-footer__links a:hover,
.mr-footer__links .wp-block-navigation-item__content:hover { color: #fff; }

/* Contact band ------------------------------------------------------------ */

.mr-footer__contactband {
	border: 1px solid var(--mr-line-dark);
	border-radius: var(--mr-radius);
	background: rgba(255, 255, 255, .028);
	padding: clamp(24px, 2.8vw, 34px);
}

.mr-footer__contactgrid {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr 1.35fr;
	gap: clamp(22px, 2.6vw, 38px);
}

.mr-footer__cblock { min-width: 0; }

.mr-footer__ch {
	font-size: 11px;
	letter-spacing: .18em;
	font-weight: 600;
	color: var(--mr-sand-dim);
	margin-bottom: 12px !important;
}

.mr-footer__cval {
	font-size: 16px;
	line-height: 1.5;
	color: var(--mr-cream);
	font-weight: 600;
}

.mr-footer__cnote {
	margin-top: 7px !important;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--mr-cream-soft);
}

.mr-footer__tel { font-size: 17px; line-height: 1.45; }

.mr-footer__tel a {
	direction: ltr;
	display: inline-block;
	font-weight: 600;
	color: var(--mr-cream);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.mr-footer__tel a:hover { border-bottom-color: var(--mr-accent-rule); }
.mr-footer__tel + .mr-footer__tel { margin-top: 4px !important; }

.mr-footer__pagelink { margin-top: 12px !important; font-size: 14px; }
.mr-footer__pagelink a { color: var(--mr-sand-link) !important; text-decoration: none; }
.mr-footer__pagelink a:hover { color: #fff !important; }

.mr-footer__cblock--cta .wp-block-buttons {
	margin-top: 18px;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.mr-footer__cblock--cta .wp-block-button { width: 100%; }

.mr-footer__cblock--cta .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 14.5px;
	padding: 12px 18px;
}

/* Footer form band (owner, 22/09/2026) ---------------------------------------
   [moti_footer_form] at the top of the footer, framed like the contact band
   below it: heading, one line and the WhatsApp alternative on top; then one
   row — name, phone, topic, button — with the consent box and the privacy
   notice in small print under it. Hidden by PHP on pages that already end
   with the full form. Redesigned the same day after the owner's desktop
   review: the first version split the row and left the button on its own. */

.mr-footform {
	margin-top: clamp(28px, 3.4vw, 40px);
	padding: clamp(22px, 2.6vw, 34px);
	border: 1px solid var(--mr-line-dark);
	border-radius: var(--mr-radius);
	background: rgba(255, 255, 255, .035);
}

.mr-footform__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 16px;
	row-gap: 4px;
	margin-bottom: 18px;
}

.mr-footform .mr-footform__h {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp(21px, 1.9vw, 26px);
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--mr-cream);
	margin: 0;
}

.mr-footform .mr-footform__lead {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--mr-cream-soft);
}

/* The WhatsApp alternative sits at the far (left) end of the heading line. */
.mr-footform .mr-footform__alt {
	margin: 0;
	margin-inline-start: auto;
	font-size: 14px;
	color: var(--mr-cream-soft);
}

.mr-footform .mr-footform__alt a {
	display: inline-block;
	padding-block: 10px;
	color: var(--mr-sand-link);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--mr-accent-rule);
	text-underline-offset: 4px;
}

.mr-footform .mr-footform__alt a:hover { color: #fff; }

.mr-form--compact .mr-form__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(170px, .75fr);
	grid-template-areas:
		"name  phone topic submit"
		"legal legal legal legal";
	gap: 12px 14px;
	align-items: end;
}

.mr-form--compact .mr-form__f--name  { grid-area: name; }
.mr-form--compact .mr-form__f--phone { grid-area: phone; }
.mr-form--compact .mr-form__f--topic { grid-area: topic; }
.mr-form--compact .mr-form__legal    { grid-area: legal; }

.mr-form--compact button[type="submit"] {
	grid-area: submit;
	align-self: end;
	height: 48px;
	margin: 0;
	padding: 0 22px;
	white-space: nowrap;
}

.mr-footform .mr-form label { color: var(--mr-cream-soft); }

.mr-footform .mr-form input[type="text"],
.mr-footform .mr-form input[type="tel"],
.mr-footform .mr-form select {
	height: 48px;
	background: var(--mr-cream);
	border-color: transparent;
	padding: 0 14px;
}

.mr-footform .mr-form input[type="tel"] { text-align: right; }

.mr-footform .mr-form input:focus,
.mr-footform .mr-form select:focus { outline-color: var(--mr-sand); }

.mr-footform .mr-form .mr-form__consent {
	min-height: 44px;
	margin: 2px 0 0;
	align-items: center;
	font-size: 14px;
	color: var(--mr-cream-muted);
}

.mr-footform .mr-form .mr-form__consent input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--mr-sand);
}

.mr-footform .mr-form .mr-form__notice {
	margin: 2px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--mr-cream-soft);
}

.mr-footform .mr-form .mr-form__notice a { color: var(--mr-sand-link); }

.mr-footform .mr-form button[type="submit"] {
	background: var(--mr-sand);
	color: var(--mr-espresso);
	box-shadow: none;
}

.mr-footform .mr-form button[type="submit"]:hover,
.mr-footform .mr-form button[type="submit"]:focus-visible { background: var(--mr-cream); }

.mr-footform .mr-form .mr-form__error {
	background: rgba(227, 206, 173, .1);
	border-color: var(--mr-sand-dim);
	color: var(--mr-sand);
	margin: 0 0 14px;
}

/* Thank-you state: the heading line says thanks, the box keeps the text. */
.mr-footform--sent .mr-footform__intro { margin-bottom: 8px; }
.mr-footform .mr-form-sent { padding: 0; text-align: start; }
.mr-footform .mr-form-sent .mr-form-sent__h { color: var(--mr-sand); font-size: clamp(21px, 2vw, 25px); margin: 0; }
.mr-footform .mr-form-sent p { margin: 0; max-width: 60ch; color: var(--mr-cream-soft); font-size: 15.5px; }
.mr-footform .mr-form-sent a { color: var(--mr-sand-link); border-bottom-color: var(--mr-accent-rule); margin-top: 4px; padding-block: 12px 4px; }

/* Land a #fragment below the sticky header (both forms). */
#mr-foot-form,
#mr-lead-form { scroll-margin-top: 96px; }

@media (max-width: 1024px) {
	.mr-form--compact .mr-form__row {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"name  phone"
			"topic submit"
			"legal legal";
	}
}

@media (max-width: 760px) {
	.mr-footform__intro { display: block; }
	.mr-footform .mr-footform__lead { margin-top: 6px; }
	.mr-footform .mr-footform__alt { margin: 2px 0 0; }

	.mr-form--compact .mr-form__row {
		grid-template-columns: 1fr;
		grid-template-areas: "name" "phone" "topic" "legal" "submit";
	}

	.mr-form--compact button[type="submit"] { height: 52px; }
}

/* Areas served ------------------------------------------------------------ */

.mr-footer__areas {
	margin-top: 26px !important;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--mr-cream-soft);
	text-align: center;
}

/* Bottom bar -------------------------------------------------------------- */

.mr-footer__bottom {
	margin-top: 26px;
	padding-block: 22px;
	border-top: 1px solid var(--mr-line-dark);
	gap: 16px;
	font-size: 13.5px;
	color: var(--mr-cream-soft);
}

.mr-footer__legal { font-size: 13.5px; }

.mr-footer__legal a,
.mr-footer__legal .wp-block-navigation-item__content {
	color: var(--mr-cream-soft);
	text-decoration: none;
}

.mr-footer__legal a:hover,
.mr-footer__legal .wp-block-navigation-item__content:hover { color: #fff; }

/* ==========================================================================
   20. Floating WhatsApp
   ========================================================================== */

.mr-float {
	position: fixed;
	bottom: 24px;
	inset-inline-start: 24px;
	z-index: 70;
	margin: 0;
}

.mr-float a {
	display: inline-block;
	background: var(--mr-accent);
	color: #fff;
	padding: 14px 24px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15.5px;
	text-decoration: none;
	box-shadow: 0 16px 34px -14px rgba(116, 78, 51, .7);
	transition: background-color .2s ease;
}

.mr-float a:hover { background: var(--mr-espresso); color: #fff; }

/* ==========================================================================
   21. Service pages (Micro-Tech and siblings)
   ========================================================================== */

/* Check items ------------------------------------------------------------- */

.mr-checkgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 10px;
	margin-top: 26px;
}

.mr-checkitem {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: var(--mr-glass);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 14px;
	padding: 13px 16px;
}

.mr-checkitem::before {
	content: "\2713";
	color: var(--mr-mono);
	font-weight: 600;
	flex: none;
	line-height: 1.6;
}

.mr-checkitem p {
	margin: 0;
	font-size: 15.5px;
	color: var(--mr-ink-soft);
}

.mr-checkitem--lg { border-radius: 12px; }
.mr-checkitem--lg p { font-size: 16.5px; }

/* Single column regardless of width — used inside an already narrow column. */
.mr-checkgrid--stack { grid-template-columns: 1fr; margin-top: 22px; }

/* Ruled list with a check marker — core/list, marker drawn in CSS. */
.mr-checklist {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

/* Not flex: an item that mixes <strong> and plain text would turn every
   run into its own flex column (one word per line on phones). The marker
   is positioned instead, so the text flows as a single paragraph. */
.mr-checklist li {
	position: relative;
	padding-block: 13px;
	padding-inline: 24px 0;
	border-bottom: 1px solid rgba(229, 225, 218, .85);
	font-size: 16.5px;
	color: var(--mr-ink-soft);
}

.mr-checklist li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	top: 13px;
	color: var(--mr-mono);
}

.mr-checklist li:last-child { border-bottom: 0; }

/* Split card row: one glass, one espresso -------------------------------- */

/* Equal-height cards. Left to `start` the shorter card ends well above the
   taller one and reads as a hole before the next section. */
.mr-splitcards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}

.mr-panelcard {
	background: var(--mr-glass);
	-webkit-backdrop-filter: var(--mr-blur);
	backdrop-filter: var(--mr-blur);
	border: 1px solid var(--mr-glass-brd);
	border-radius: var(--mr-radius);
	padding: clamp(24px, 3vw, 40px);
	box-shadow: var(--mr-shadow-card);
}

.mr-panelcard h2 {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp(22px, 2.5vw, 32px);
	line-height: 1.25;
	margin: 0;
}

.mr-panelcard > p {
	margin: 18px 0 0;
	font-size: 16.5px;
	color: var(--mr-muted);
}

.mr-panelcard--dark {
	background: var(--mr-espresso);
	border: 0;
	color: var(--mr-cream-muted);
	box-shadow: 0 30px 56px -40px rgba(49, 39, 31, 1);
}

.mr-panelcard--dark h2 { color: var(--mr-cream); }
.mr-panelcard--dark > p { color: var(--mr-cream-soft); }

.mr-panelcard--dark .mr-checklist li {
	color: var(--mr-cream-muted);
	border-bottom-color: rgba(255, 255, 255, .14);
}

/* Video tiles and captions ------------------------------------------------ */


/* Portrait clips fill the card's width; the height follows the clip's own
   ratio (owner, 17/09/2026 — the height-sized player left a cream band on both
   sides of every Shorts tile). 9:16 and 3:4 both occur, so two tiles in a row
   can end at different heights; the owner accepted that for a full-width clip.
   The design margin is the card's own padding — .mr-videocard, whose media is
   flush with the card edge, gets it from the rule near .mr-videocard__media. */
.wp-embed-responsive .mr-media-portrait .wp-block-embed__wrapper,
.mr-media-portrait .wp-block-embed__wrapper {
	padding-top: 0;
	height: auto;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	aspect-ratio: var(--mr-vratio, 9 / 16);
}

/* Core's aspect box is `.wp-embed-responsive .wp-has-aspect-ratio
   .wp-block-embed__wrapper:before` — three classes. A two-class rule loses to
   it, the 177% padding survives, and the iframe is pushed ~1000px below its
   own wrapper. Matching the weight is what actually removes the box. */
.wp-embed-responsive .mr-media-portrait .wp-block-embed__wrapper::before {
	content: none;
	padding-top: 0;
}

/* Since the clip fills the card, the card's width sets the player's height: in
   a two-column grid a 600px-wide card would give a 1030px-tall player, taller
   than the screen. Portrait cards therefore cap at the width a three-column
   grid gives them (~400px → ~700px tall) and centre in their cell. Cards that
   are already narrower are untouched.
   `width: 100%` is what keeps this safe in a grid: `margin-inline: auto` turns
   off a grid item's stretch, and without a width the card would shrink to the
   player's own width — which is now a percentage of the card, so it resolves
   to zero (micro-tech, 22px-wide tiles).
   .mr-mediacard is deliberately absent: its one portrait card (tu-mesh) holds
   a still, not a clip, and capping it would shrink a photo nobody asked to
   change. */
.mr-case.mr-media-portrait,
.mr-videocard.mr-media-portrait,
.mr-videotile.mr-media-portrait {
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
	justify-self: center;
}

/* The wrapper above already carries the clip's ratio, so the player just fills
   it — an aspect-ratio here as well would fight the wrapper on 3:4 clips. */
.wp-embed-responsive .mr-media-portrait .wp-has-aspect-ratio iframe,
.mr-media-portrait iframe {
	position: static;
	height: 100%;
	width: 100%;
	aspect-ratio: auto;
	display: block;
	margin-inline: auto;
	border-radius: 12px;
}
.mr-videogrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
}

/* An exact column count, for grids whose cards should fill their rows. The
   auto-fit default resolves to four columns at the content width, which leaves
   a six-card grid with a ragged second row — and a ten-card 16:9 grid in four
   narrow columns. These must sit AFTER the base rule: same specificity, so
   whichever comes later wins.
 */
.mr-videogrid--3 { grid-template-columns: repeat(3, 1fr); }
.mr-videogrid--2 { grid-template-columns: repeat(2, 1fr); }

/* A row of clips of different shapes (9:16 beside 3:4, or a Short beside a
   regular video) at ONE height. Each card's width is the row height times its
   clip's width-to-height ratio, plus its frame; the flex basis carries that
   width, and since flex-shrink is weighted by the basis, a row too wide for
   the page shrinks every card in the same proportion, so the heights stay
   equal. The ratio is read from the clip itself (:has), so reordering the
   cards, or swapping a clip for one of another shape, needs nothing here —
   only the card's own shape classes. (Owner, 18/09/2026, micro-mesh page.) */
.mr-videogrid.mr-videogrid--ratio {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 18px;
	--mr-row-h: 550px;
}
.mr-videogrid.mr-videogrid--ratio > .mr-videocard {
	flex: 0 1 calc(var(--mr-row-h) * var(--mr-card-r, 0.5625) + var(--mr-card-pad, 18px));
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
}
.mr-videogrid--ratio > .mr-videocard:has(.mr-var-3x4) { --mr-card-r: 0.75; }
.mr-videogrid--ratio > .mr-videocard:not(.mr-media-portrait):has(.wp-embed-aspect-16-9) { --mr-card-r: 1.7778; --mr-card-pad: 2px; }
.mr-videogrid--ratio > .mr-videocard:not(.mr-media-portrait):has(.wp-embed-aspect-4-3) { --mr-card-r: 1.3333; --mr-card-pad: 2px; }
.mr-videogrid--ratio > .mr-videocard:not(.mr-media-portrait):has(.wp-embed-aspect-1-1) { --mr-card-r: 1; --mr-card-pad: 2px; }

/* Two clips at 550px fill the page; a third would leave every card narrower
   than its own frame looks good at, so a row of three starts lower (about,
   19/09/2026). The cards still shrink together if the row is still too wide. */
.mr-videogrid.mr-videogrid--ratio:has(> .mr-videocard:nth-child(3)) { --mr-row-h: 460px; }

@media (max-width: 600px) {
	.mr-videogrid.mr-videogrid--ratio { flex-direction: column; align-items: center; }
	.mr-videogrid.mr-videogrid--ratio > .mr-videocard { flex: none; width: 100%; max-width: 420px; }
}

.mr-videotile {
	background: var(--mr-glass);
	-webkit-backdrop-filter: var(--mr-blur);
	backdrop-filter: var(--mr-blur);
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: var(--mr-radius);
	padding: 10px;
	box-shadow: var(--mr-shadow-card);
}

.mr-videotile .wp-block-embed,
.mr-videotile figure { margin: 0; }

.mr-videotile .wp-block-embed__wrapper {
	border-radius: 14px;
	overflow: hidden;
	background: var(--mr-cream-dim);
}

.mr-videotile iframe { border: 0; display: block; }

.mr-videocaption {
	margin: 12px 6px 4px !important;
	font-size: 14.5px;
	color: var(--mr-muted-3);
}

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

.mr-note {
	margin-top: 16px;
	background: rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, .75);
	border-inline-start: 3px solid var(--mr-note-rule);
	border-radius: 16px;
	padding: 18px 22px;
	font-size: 16.5px;
	color: var(--mr-muted);
}

.mr-note strong {
	font-weight: 700;
	color: var(--mr-ink);
}

/* Comparison table with a highlighted column ------------------------------ */

.mr-cmptable table { min-width: 900px; }

.mr-cmptable th,
.mr-cmptable td { padding: 18px 22px; }

.mr-cmptable th { letter-spacing: .14em; }

.mr-cmptable td {
	font-size: 15.5px;
	color: var(--mr-muted-2);
	font-weight: 400;
}

.mr-cmptable td:first-child {
	font-weight: 600;
	color: var(--mr-ink);
}

.mr-cmptable th:nth-child(2) {
	background: var(--mr-tbl-highlight);
	color: var(--mr-accent);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0;
}

.mr-cmptable td:nth-child(2) {
	background: rgba(251, 240, 228, .55);
	color: var(--mr-ink-soft);
}

/* Phone-sized stand-in for the table ------------------------------------- */

/* Doubled class on purpose. These blocks use a flex layout, so WordPress emits
   `.is-layout-flex{display:flex}` at the same specificity as a single class and
   later in the cascade — a plain `.mr-cmpcards{display:none}` loses and the
   phone-only cards leak onto desktop beside the table. */
.mr-cmpcards.mr-cmpcards {
	display: none;
	flex-direction: column;
	gap: 14px;
}

.mr-cmpcard {
	background: rgba(255, 255, 255, .58);
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 18px;
	padding: 20px;
}

.mr-cmpcard--hl {
	background: rgba(251, 240, 228, .7);
	border-color: var(--mr-cmpcard-brd);
}

.mr-cmpcard__t {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 19px;
	color: var(--mr-ink-strong);
	margin: 0 !important;
}

.mr-cmpcard--hl .mr-cmpcard__t {
	font-size: 20px;
	color: var(--mr-cmpcard-title);
}

.mr-cmpcard__rows {
	margin-top: 12px;
	gap: 9px;
}

.mr-cmpcard__rows p {
	margin: 0;
	font-size: 15.5px;
	color: var(--mr-muted);
}

.mr-cmpcard--hl .mr-cmpcard__rows p { color: var(--mr-ink-soft); }

.mr-cmpcard__rows strong { font-weight: 700; }

/* Dark information panel -------------------------------------------------- */

.mr-darkpanel {
	background: var(--mr-espresso);
	border-radius: var(--mr-radius-lg);
	padding: clamp(24px, 3.6vw, 54px);
	color: var(--mr-cream-muted);
	box-shadow: 0 34px 62px -44px rgba(49, 39, 31, 1);
}

.mr-darkpanel h2 { color: var(--mr-cream); }

.mr-darkpanel .mr-eyebrow { color: var(--mr-ondark-eyebrow); }
.mr-darkpanel .mr-eyebrow::before { background: var(--mr-ondark-rule); }

.mr-darkpanel__intro { max-width: 72ch; }

.mr-darkpanel__intro p {
	margin: 14px 0 0;
	font-size: 17px;
	color: var(--mr-ondark-text);
}

.mr-darkpanel__intro p:first-of-type { margin-top: 18px; }

.mr-subcards {
	display: grid;
	/* min(): a 300px track overflowed the espresso panel at 360px (QA 2026-09-17) */
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 16px;
	margin-top: 28px;
}

/* Four cards fall to three columns at the content width — 300px minimums plus
   gaps do not fit a fourth track — which strands the last card alone on its own
   row. A quantity query pairs them two by two instead, and keeps doing the right
   thing if a card is added or removed in the editor. Kept above the phone
   breakpoint: :has() outweighs the auto-fit default, so without the guard it
   would hold two columns at 375px and squeeze each card to ~165px. */
@media (min-width: 761px) {
	.mr-subcards:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(2, 1fr);
	}
}

.mr-subcard {
	background: var(--mr-subcard-bg);
	border: 1px solid var(--mr-subcard-brd);
	border-radius: 18px;
	padding: 24px 22px;
}

.mr-subcard__t,
.mr-subcard h3,
.mr-subcard h4 {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 21px;
	color: var(--mr-subcard-title);
	margin: 0 !important;
}

.mr-subcard p {
	margin: 12px 0 0;
	font-size: 16.5px;
	color: var(--mr-ondark-text);
}

.mr-subcard strong {
	font-weight: 700;
	color: var(--mr-cream);
}

/* Outline button for dark surfaces */
.wp-block-button.is-style-mr-outline-light .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--mr-ondark-brd);
	color: var(--mr-ondark-btn);
	border-radius: 999px;
	padding: 15px 28px;
	font-weight: 600;
	font-size: 16px;
}

.wp-block-button.is-style-mr-outline-light .wp-block-button__link:hover {
	background: var(--mr-ondark-hover);
	color: var(--mr-cream);
}

/* Hero laid out inside a glass panel -------------------------------------- */

/* The copy column runs much longer than the photo, so centring leaves the
   photo floating in dead space. Top-align it against the headline instead. */
.mr-heropanel .mr-2col--media-first { align-items: flex-start; }

.mr-heropanel {
	background: var(--mr-glass-strong);
	-webkit-backdrop-filter: blur(22px);
	backdrop-filter: blur(22px);
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 28px;
	padding: clamp(24px, 3.4vw, 52px);
	box-shadow: 0 28px 52px -42px rgba(58, 45, 36, .64);
}

.mr-hero .mr-checkgrid {
	margin-top: 22px;
	gap: 8px;
}

.mr-hero .mr-checkitem {
	padding: 11px 14px;
}

/* Framed media block with a caption underneath ---------------------------- */

.mr-mediacard {
	background: rgba(255, 255, 255, .6);
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 22px;
	padding: 10px;
}

.mr-mediacard img {
	width: 100%;
	border-radius: 14px;
	background: var(--mr-texture);
	display: block;
}

.mr-mediacard figure,
.mr-mediacard .wp-block-embed { margin: 0; }

.mr-mediacard .wp-block-embed__wrapper {
	border-radius: 14px;
	overflow: hidden;
	background: var(--mr-cream-dim);
}

.mr-mediacard iframe { border: 0; display: block; }

.mr-mediabody { padding: 14px 8px 6px; }

.mr-mediabody h3,
.mr-mediabody h2.mr-h3 {
	font-size: 18.5px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	font-family: var(--wp--preset--font-family--body), sans-serif;
}

.mr-mediabody p {
	margin: 7px 0 0;
	font-size: 15.5px;
	color: var(--mr-muted-2);
}

/* Dark variant, for media sitting on an espresso panel. */
.mr-mediacard--dark {
	background: var(--mr-subcard-bg);
	border-color: var(--mr-subcard-brd);
	border-radius: 20px;
}

.mr-mediacard--dark .wp-block-embed__wrapper { background: var(--mr-subcard-brd); }
.mr-mediacard--dark .mr-mediabody h3 { color: var(--mr-cream); }
.mr-mediacard--dark .mr-mediabody p  { color: var(--mr-ondark-text); }

/* Feature card without a step number -------------------------------------- */

/* No number to place, so drop back to ordinary flow. */
.mr-step--plain { display: block; }
.mr-step--plain h3 { margin-top: 0; }

/* Slightly smaller numbering, for six-up grids. */
.mr-steps--sm .mr-step__n { font-size: 25px; }
.mr-steps--sm .mr-step h3 { font-size: 18.5px; }
.mr-steps--sm .mr-step__t { margin-top: 9px !important; }

/* Inline call-to-action strip --------------------------------------------- */

.mr-ctastrip {
	margin-top: 20px;
	background: rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 20px;
	padding: 24px 26px;
	gap: 20px;
}

.mr-ctastrip__t {
	font-size: 19px;
	font-weight: 600;
	color: var(--mr-espresso);
	margin: 0 !important;
}

.mr-ctastrip p {
	margin: 8px 0 0;
	font-size: 16.5px;
	color: var(--mr-muted);
}

/* Espresso panel that carries its own two-column layout ------------------- */

.mr-darkpanel--split { padding: clamp(24px, 3.6vw, 54px); }

.mr-darkpanel--split p {
	font-size: 17px;
	color: var(--mr-ondark-text);
}

.mr-darkpanel--split .mr-panel__lead { margin-top: 18px; }
.mr-darkpanel--split .mr-panel__p    { margin-top: 14px; }

/* Three-column comparison needs less room than the five-column one. */
.mr-cmptable--3 table { min-width: 720px; }

/* Small print that sits under a dark panel's cards. */
.mr-darkpanel__note {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--mr-ondark-text);
}

.mr-darkpanel__note:first-of-type { margin-top: 20px; }
.mr-darkpanel__note strong { color: var(--mr-cream); }
.mr-darkpanel__note a { color: var(--mr-ondark-eyebrow); text-decoration: underline; }

/* Two supporting shots under a lead image inside one media frame. */
.mr-imagepair { margin: 0 !important; }
.mr-imagepair .wp-block-column { margin: 0 !important; }
.mr-imagepair figure { margin: 0; }

.mr-imagepair img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	display: block;
	background: var(--mr-texture);
}

/* A looping clip can stand in for a still inside the pair/trio. */
.mr-imagepair video {
	width: 100%;
	/* The clip may carry width/height attributes (core/html keeps them); without
	   this their height would win over aspect-ratio. Core's video block CSS did
	   the same while the clip was a core/video block. */
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	display: block;
	background: var(--mr-texture);
}

/* The sources on the homepage are portrait, so the square default would crop
   roughly a third of each frame away. These variants keep the real ratio. */
.mr-imagepair--portrait img,
.mr-imagepair--portrait video { aspect-ratio: 3 / 4; }

.mr-imagepair--trio img,
.mr-imagepair--trio video { aspect-ratio: 4 / 5; }

/* Three frames stay side by side until the columns block stacks them. */
.mr-imagepair--trio > .wp-block-column {
	flex-basis: 0 !important;
	flex-grow: 1;
}

/* WordPress ships aspect helpers for the common ratios only. Two of the
   Microlines clips are 3:4 portrait and 3:2 landscape, and forcing them into
   9:16 or 16:9 would letterbox them, so they get their own padding values. */
/* Core's own fallback, `.wp-embed-responsive .wp-has-aspect-ratio
   .wp-block-embed__wrapper:before`, is a three-class selector that pins the
   padding at 50%. These have to match that weight to take effect. */
.wp-embed-responsive .wp-has-aspect-ratio.mr-aspect-3-4 .wp-block-embed__wrapper::before { padding-top: 133.33%; }
.wp-embed-responsive .wp-has-aspect-ratio.mr-aspect-3-2 .wp-block-embed__wrapper::before { padding-top: 70.68%; }

/* A safety notice needs to separate itself from ordinary body copy. */
.mr-note--caution {
	background: rgba(251, 240, 228, .8);
	border: 1px solid var(--mr-cmpcard-brd);
	border-inline-start: 4px solid var(--mr-accent-mid);
	border-radius: 16px;
	padding: 18px 22px;
}

.mr-note--caution p { margin: 0; color: var(--mr-ink-soft); }
.mr-note--caution strong { color: var(--mr-accent); }

.mr-imagepair figcaption {
	margin: 8px 0 0 !important;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--mr-ink-strong);
	text-align: center;
}

/* Below the width at which the columns block stacks, the origin sequence takes
   the arrangement the live site uses: the opening frame runs the full width and
   the other two sit side by side under it. Each stays its own framed tile with a
   gap between, rather than merging into one block. */
@media (max-width: 781px) {
	.mr-imagepair--trio {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 10px !important;
	}

	.mr-imagepair--trio > .wp-block-column {
		flex-basis: auto !important;
		margin: 0 !important;
		border: 1px solid var(--mr-cream-soft);
		border-radius: 12px;
		overflow: hidden;
		background: rgba(255, 255, 255, .62);
	}

	.mr-imagepair--trio > .wp-block-column:first-child { grid-column: 1 / -1; }

	/* The tile carries the rounding, so the media sits flush inside it. */
	.mr-imagepair--trio img,
	.mr-imagepair--trio video { border-radius: 0; }

	.mr-imagepair--trio figcaption {
		margin: 0 !important;
		padding: 9px 11px;
		font-size: 12.5px;
		border-top: 1px solid var(--mr-cream-soft);
	}
}

/* Closing call to action — centred, on the standard glass panel. */
.mr-finalcta { text-align: center; }
.mr-finalcta .mr-eyebrow { justify-content: center; }
.mr-finalcta .mr-panel__lead { margin-inline: auto; max-width: 62ch; }
.mr-finalcta .wp-block-buttons { justify-content: center; }

/* Sticky call bar for phones --------------------------------------------- */

/* Doubled class for the same reason as .mr-cmpcards — see the note there. */
.mr-mobilebar.mr-mobilebar {
	display: none;
	position: fixed;
	bottom: 0;
	inset-inline: 0;
	z-index: 70;
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-top: 1px solid var(--mr-line);
	padding: 10px 14px;
	gap: 10px;
	margin: 0;
}

.mr-mobilebar .wp-block-button { flex: 1; }

.mr-mobilebar .wp-block-button:first-child { flex: 1.4; }

.mr-mobilebar .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	padding: 15px 10px;
	font-size: 15.5px;
}

/* ==========================================================================
   22. Responsive
   ========================================================================== */

/* ---- Stack the two-column layouts ---------------------------------------- */

/* The homepage hero carries a before/after pair rather than a single photo,
   so the frame gives up some padding to keep both frames a usable size. */
.mr-hero__frame--top { padding: 8px; }

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

	/* The pill styles hold their label on one line, which reads well at desktop
	   widths but pushes the page wider than the screen once a long CTA label has
	   to fit a phone. Below the desktop breakpoint they wrap instead. */
	.wp-block-button.is-style-mr-light .wp-block-button__link,
	.wp-block-button.is-style-mr-dark .wp-block-button__link {
		white-space: normal;
		text-align: center;
	}

	.mr-2col.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.mr-2col.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.mr-stack {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.mr-hero__stat { display: none; }

	/* Media before the supporting copy -------------------------------------
	   Stacked columns would bury the photo below every paragraph and button.
	   Dissolving the columns lets the whole section order as one list, so the
	   image lands directly under the headline. Every child needs an explicit
	   order — an unset one defaults to 0 and would jump to the front. */

	/* Grid, not a column flexbox: a video wrapper whose height comes from
	   percentage padding (core's 16:9 aspect box) contributes ~0 to a column
	   flex container's auto height, so the tile collapsed to its padding and
	   the poster overflowed into the next section (curly gallery, 16/09/2026).
	   Grid rows size from the real content and still honour `order`. */
	/* Two classes on purpose: core prints `.wp-block-columns-is-layout-flex
	   { display: flex }` after this sheet with the same one-class weight. */
	.mr-hero .mr-2col,
	.wp-block-columns.mr-2col--media-early {
		display: grid;
		grid-auto-flow: row;
		flex-direction: column;
		gap: 0 !important;
	}

	.mr-hero .mr-2col > .wp-block-column,
	.mr-2col--media-early > .wp-block-column {
		display: contents;
	}

	/* Media above everything, as a whole column — no per-child ordering
	   needed because the column itself moves. */
	.mr-2col--media-first > .wp-block-column:last-child { order: -1; }
	.mr-hero .mr-2col--media-first > .wp-block-column:last-child { order: initial; }

	.mr-hero .mr-badge         { order: 1; }
	.mr-hero h1                { order: 2; }
	.mr-hero .mr-hero__lead    { order: 3; }
	.mr-hero .mr-hero__frame,
	.mr-hero .mr-mediacard     { order: 4; margin-top: 24px; }

	/* The homepage hero frame leads the stack instead, so the before/after pair
	   is the first thing on screen — same as the .mr-mediacard heroes. */
	.mr-hero .mr-hero__frame--top { order: 0; margin-top: 0; }
	.mr-hero .mr-hero__frame--top + .mr-videocaption { order: 0; }
	.mr-hero .mr-numlinks,
	.mr-hero .mr-checkgrid     { order: 5; }
	.mr-hero .wp-block-buttons { order: 6; }
	.mr-hero .mr-hero__note    { order: 7; }

	/* A copy-only hero puts a facts panel beside the headline instead of a
	   photo. Flattened by display:contents it has no order of its own and
	   would default to 0 — above the h1. It belongs under the copy. */
	.mr-hero .mr-panel         { order: 8; margin-top: 26px; }

	.mr-2col--media-early .mr-eyebrow       { order: 1; }
	.mr-2col--media-early h2                { order: 2; }
	/* Equal order values keep source order, so consecutive body paragraphs
	   stay together above the media. */
	.mr-2col--media-early .mr-panel__lead,
	.mr-2col--media-early .mr-panel__p      { order: 3; }
	.mr-2col--media-early .mr-videoframe,
	.mr-2col--media-early .mr-videotile,
	.mr-2col--media-early .mr-framed        { order: 4; margin-top: 26px; }
	.mr-2col--media-early .mr-checkrows,
	.mr-2col--media-early .mr-checkgrid,
	.mr-2col--media-early .mr-checklist     { order: 5; }
	.mr-2col--media-early .mr-stack,
	.mr-2col--media-early .wp-block-buttons { order: 6; }
	.mr-2col--media-early .mr-note          { order: 7; }

	/* Stat strip: two up, dividers follow the grid, not the source order. */
	.mr-stats { grid-template-columns: repeat(2, 1fr); }
	.mr-stat  { border-inline-start: 0; }
	.mr-stat:nth-child(even) { border-inline-start: 1px solid rgba(255, 255, 255, .6); }
	.mr-stat:nth-child(n+3)  { border-top: 1px solid rgba(255, 255, 255, .6); }
}

/* ---- Phones -------------------------------------------------------------- */

@media (max-width: 600px) {
	.mr-section,
	.mr-topbar,
	.mr-header,
	.mr-footer { padding-inline: 18px; }

	.mr-section        { padding-block: clamp(48px, 11vw, 72px) 0; }
	.mr-section--tight { padding-block: 32px 0; }
	.mr-section--stats { padding-block: 36px 0; }
	.mr-section--last  { padding-block: clamp(48px, 11vw, 72px) clamp(44px, 9vw, 64px); }

	/* Top bar + header */
	.mr-topbar p { font-size: 12.5px; }
	.mr-topbar .mr-topbar__inner { padding-block: 8px; }

	.mr-header__inner { min-height: 66px; gap: 12px !important; }
	.mr-brand__name   { font-size: 20px; }
	.mr-brand__sub    { font-size: 9.5px; letter-spacing: .2em; }

	.wp-block-button.is-style-mr-dark .wp-block-button__link {
		padding: 10px 16px;
		font-size: 13.5px;
	}

	/* Hero */
	.mr-badge { font-size: 12px; padding: 7px 14px 7px 12px; }
	.mr-hero h1 { margin-top: 16px; }
	.mr-hero__lead { margin-top: 16px; }
	.mr-hero__frame { padding: 8px; border-radius: 20px; }
	.mr-hero__frame img,
	.mr-hero .mr-mediacard img { aspect-ratio: 16 / 10; object-fit: cover; object-position: center 28%; border-radius: 13px; }

	/* The before/after pair is portrait by nature; the 16/10 crop above is meant
	   for the single landscape hero photo on the service pages. */
	.mr-imagepair--portrait img { aspect-ratio: 3 / 4; object-position: center; }
	.mr-hero .mr-hero__frame,
	.mr-hero .mr-mediacard { margin-top: 18px; }
	.mr-numlinks { margin-top: 26px; }
	.mr-numlink { padding: 13px 15px; }
	.mr-numlink__t { font-size: 15.5px; }

	/* Single-photo hero (service and gallery pages): the photo is the first
	   thing on screen, so the section's top padding and the frame's margin are
	   trimmed and the frame bleeds into the side gutters — the photo gets
	   almost the full width. The home page's portrait pair uses the same frame
	   and benefits the same way. */
	.mr-hero.mr-section--tight { padding-top: 12px; }
	.mr-hero .mr-hero__frame--top {
		margin-top: 0;
		margin-inline: -10px;
		padding: 6px;
		border-radius: 18px;
	}
	.mr-hero .mr-hero__frame--top img { border-radius: 13px; }
	.mr-hero .mr-hero__frame--top + .mr-videocaption { margin-top: 10px !important; }

	/* Portrait clips used to need a phone override, because the desktop player
	   was sized by height. Since 17/09/2026 the base rule fills the width at
	   every size, so the phone behaviour is the default and nothing is
	   repeated here. Only the frame gets thinner, with the tiles below. */
	.mr-videocard.mr-media-portrait .mr-videocard__media { padding: 6px; }

	/* Section rhythm on phones: 48px of top padding after the 24px block gap
	   read as an empty band under a video tile (owner, 16/09/2026). */
	.mr-section { padding-block: 36px 0; }
	.mr-section--last { padding-block: 36px clamp(44px, 9vw, 64px); }

	/* Landscape video tiles: bleed into the gutters and slim the frame, so the
	   clip is ~343px wide on a 375px phone instead of 318. Same idea as the
	   hero frame above. */
	.mr-videotile,
	.mr-videoframe,
	.mr-featured { padding: 6px; margin-inline: -8px; }

	/* The 420px cap above carries `margin-inline: auto` and a two-class weight,
	   so on a phone it would beat the bleed and make a portrait clip 16px
	   narrower than the landscape ones beside it. The cap is not binding at
	   this width anyway (a 354px card is well under 420), so the tiles go back
	   to the 16/09 bleed. `--portrait` singles stay centred, as they were. */
	.mr-videotile.mr-media-portrait:not(.mr-videotile--portrait) {
		width: auto;
		max-width: none;
		margin-inline: -8px;
		justify-self: stretch;
	}
	.mr-videotile .wp-block-embed__wrapper,
	.mr-videoframe .wp-block-embed__wrapper,
	.mr-featured .wp-block-embed__wrapper { border-radius: 11px; }

	/* Photo-card heroes (service pages) get the same full-width treatment. */
	.mr-hero .mr-mediacard { max-width: none; width: auto; margin-inline: -8px; padding: 6px; }
	.mr-hero .mr-mediacard img { border-radius: 13px; }

	/* The glass panel around a service-page hero keeps 24px of padding on a
	   phone, which took 48px from the photo. A slimmer panel, same look. */
	.mr-heropanel { padding: 16px 10px; border-radius: 22px; }

	/* Glass cards on phones: bleed 8px into the gutters and slim the inner
	   padding, so the form and the panels get ~26px more width. */
	.mr-formcard,
	.mr-panel,
	.mr-tablewrap,
	.mr-stats { margin-inline: -8px; padding-inline: 16px; border-radius: 20px; }
	.mr-formcard { padding-block: 22px; }

	/* Mobile menu button: core's default icon is two thin bars; a 44px glass
	   button with the three-bar icon (icon:"menu" on the block) reads as a
	   menu at a glance. */
	.mr-nav .wp-block-navigation__responsive-container-open {
		width: 44px;
		height: 44px;
		border-radius: 12px;
		background: rgba(255, 255, 255, .72);
		border: 1px solid rgba(43, 31, 27, .18);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}
	.mr-nav .wp-block-navigation__responsive-container-open svg {
		width: 26px;
		height: 26px;
	}

	/* Above the fold on a phone (owner, 16/09/2026): no theme block gap
	   between top bar, header and content; the second clause of the top bar
	   line hidden so it never wraps; the hero starts right under the header. */
	.wp-site-blocks > header,
	.wp-site-blocks > main,
	.wp-site-blocks > footer { margin-block-start: 0; }
	.mr-topbar__extra { display: none; }
	.mr-hero.mr-section--tight { padding-top: 8px; }

	/* Sections carry their own top padding; the extra 24px flow gap between
	   them only drew white strips between the background bands. */
	.entry-content > .mr-section { margin-block-start: 0; }
	.mr-section { padding-block: 32px 0; }
	.mr-section--last { padding-block: 32px 24px; }

	/* The sticky bar's second button read as a plain white pill on the
	   dark footer — give it a real outline in the brand brown. */
	.mr-mobilebar .wp-block-button:last-child .wp-block-button__link {
		background: #fff;
		color: var(--mr-accent);
		border: 1.5px solid var(--mr-accent);
		font-weight: 600;
	}

	/* Full-width call to action buttons read better than half-width pills. */
	.mr-stack.wp-block-buttons .wp-block-button { width: 100%; }
	.mr-stack.wp-block-buttons .wp-block-button__link { display: block; text-align: center; }

	.wp-block-button.is-style-mr-primary .wp-block-button__link,
	.wp-block-button.is-style-mr-glass .wp-block-button__link {
		padding: 15px 24px;
		font-size: 15.5px;
	}

	/* Stat strip drops to a single column */
	.mr-stats { grid-template-columns: 1fr; }
	.mr-stat  { padding: 20px 16px; border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, .6); }
	.mr-stat:first-child { border-top: 0; }

	/* Cards, panels, steps */
	.mr-cards, .mr-steps { grid-template-columns: 1fr; }
	.mr-card__body { padding: 22px; }
	.mr-card__body h3 { font-size: 20px; }
	.mr-step { padding: 24px 20px 26px; }
	.mr-panel { padding: 24px 20px; }
	.mr-darkcta { padding: 26px 22px; }
	.mr-sectionhead { margin-bottom: 32px !important; }

	/* Comparison table — narrower minimum means less sideways scrolling */
	.mr-tablewrap table { min-width: 540px; }
	.mr-tablewrap th { padding: 15px 18px; }
	.mr-tablewrap td { padding: 18px 18px; font-size: 15.5px; }

	/* Video blocks */
	.mr-featured, .mr-videoframe { padding: 8px; }
	.mr-featured__body { padding: 18px 12px 10px; }
	.mr-videocard__body { padding: 18px; }

	/* FAQ */
	.mr-faq { padding-inline: 18px; }
	.mr-faq summary { font-size: 17px; padding: 17px 0; gap: 14px; }
	.mr-faq .wp-block-details > p { font-size: 16px; margin-bottom: 18px; }

	/* Contact + form */
	.mr-contactrow { padding: 14px 16px; }
	.mr-contactrow__v { font-size: 20px; }
	.mr-formcard { padding: 24px 20px; }
	.mr-form__grid { grid-template-columns: 1fr; }


	.mr-float { bottom: 16px; inset-inline-start: 16px; }
	.mr-float a { padding: 12px 18px; font-size: 14.5px; }

	.mr-panelcard { padding: 22px 20px; }
	.mr-darkpanel { padding: 24px 20px; }
	.mr-subcard   { padding: 20px 18px; }
	.mr-note      { padding: 16px 18px; font-size: 16px; }
	.mr-videogrid { grid-template-columns: 1fr; }
}

/* ---- Phone: swap the floating pill for a full-width call bar ------------- */

@media (max-width: 900px) {
	.mr-footer__cols { grid-template-columns: 1fr 1fr; }
	.mr-footer__contactgrid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
	/* A five-column table is unusable on a phone; the design ships stacked
	   cards carrying the same rows instead. */
	.mr-cmptable { display: none; }
	.mr-cmpcards.mr-cmpcards { display: flex; }

	/* On phones the comparison reads as a stack of small tables: a tinted strip
	   naming the method, then one ruled row per column of the desktop table. */
	.mr-cmpcard {
		padding: 0;
		overflow: hidden;
		background: rgba(255, 255, 255, .72);
	}

	.mr-cmpcard__t {
		background: rgba(251, 240, 228, .92);
		border-bottom: 1px solid var(--mr-cmpcard-brd);
		color: var(--mr-cmpcard-title);
		padding: 12px 16px;
	}

	.mr-cmpcard--hl .mr-cmpcard__t {
		background: var(--mr-cmpcard-brd);
		color: var(--mr-ink-strong);
	}

	.mr-cmpcard__rows {
		margin-top: 0;
		gap: 0 !important;
	}

	/* The label is a <strong>; the answer after it becomes an anonymous grid
	   item, which is what puts the two in their own cells. */
	.mr-cmpcard__rows > p {
		display: grid;
		grid-template-columns: minmax(92px, 36%) 1fr;
		column-gap: 14px;
		align-items: start;
		padding: 11px 16px;
		border-top: 1px solid rgba(223, 218, 210, .85);
		font-size: 14.5px;
		line-height: 1.55;
	}

	.mr-cmpcard__rows > p:first-child { border-top: 0; }
	.mr-cmpcard__rows > p strong { color: var(--mr-ink-strong); }

	.mr-mobilebar.mr-mobilebar { display: flex; }
	.mr-float     { display: none; }
	.mr-footer__proof { grid-template-columns: 1fr; row-gap: 22px; padding-block: 26px; }
	.mr-footer__proofitem { border-inline-start: 0; padding-inline: 0; }
	.mr-footer__prooflabel { max-width: none; }
	.mr-footer__cols { grid-template-columns: 1fr; gap: 30px; padding-block: 34px; }
	.mr-footer__contactband { padding: 22px; border-radius: var(--mr-radius-sm); }
	.mr-footer__contactgrid { grid-template-columns: 1fr; gap: 24px; }
	.mr-footer__areas { text-align: start; }
	.mr-footer__bottom { padding-bottom: 96px; }

	/* Clear the fixed bar so it never sits on top of the last section. */
	body { padding-bottom: 92px; }
}

/* ---- Mobile navigation overlay ------------------------------------------ */

/* Core swaps the nav for a hamburger below 600px, but six Hebrew menu items
   need more room than that — they wrap to two lines from roughly 940px down,
   which is exactly where the design dropped the nav altogether. Push core's
   breakpoint out to match by re-applying its own mobile rules. */
@media (max-width: 1024px) {
	.mr-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.mr-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.mr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: block;
	}
}

.mr-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--mr-cream);
	padding-top: 84px;
	direction: rtl;
	/* The site's global-styles custom CSS (Site Editor → Styles → CSS, stored in
	   the database) sizes the open overlay with width:100vw / height:100dvh plus
	   padding 84px 22px 110px. With content-box sizing that made it 44px wider
	   and 194px taller than the screen: in RTL the extra width hangs off the left
	   edge, so the close button was off-screen and the last menu item could not
	   be scrolled into view (QA 2026-09-17, measured at 375×812). */
	box-sizing: border-box;
}

.mr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 20px;
	padding: 12px 0;
	color: var(--mr-espresso);
}

.mr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	background: transparent;
	color: var(--mr-accent);
}

/* ==========================================================================
   21b. Ratio carriers (QA 2026-09-17)
   Per-element aspect ratios used to be inline custom properties on block
   wrappers (style="--mr-ratio:…"). No block emits such a style from its
   attributes, so every one of those blocks was "invalid" in the editor. The
   same values now travel as classes; the consumers (aspect-ratio: var(…))
   are unchanged.
   ========================================================================== */

.mr-ar-679x905 { --mr-ratio: 679 / 905; }
.mr-ar-398x232 { --mr-ratio: 398 / 232; }
.mr-ar-436x772 { --mr-ratio: 436 / 772; }
.mr-var-9x16 { --mr-vratio: 9 / 16; }
.mr-ar-1586x992 { --mr-ratio: 1586 / 992; }
.mr-par-489x652 { --mr-pairratio: 489 / 652; }
.mr-par-450x652 { --mr-pairratio: 450 / 652; }
.mr-ar-1375x1063 { --mr-ratio: 1375 / 1063; }
.mr-par-458x610 { --mr-pairratio: 458 / 610; }
.mr-par-708x1024 { --mr-pairratio: 708 / 1024; }
.mr-ar-1080x1080 { --mr-ratio: 1080 / 1080; }
.mr-ar-1672x941 { --mr-ratio: 1672 / 941; }
.mr-ar-1024x576 { --mr-ratio: 1024 / 576; }
.mr-ar-900x225 { --mr-ratio: 900 / 225; }
.mr-ar-1080x1712 { --mr-ratio: 1080 / 1712; }
.mr-ar-1280x720 { --mr-ratio: 1280 / 720; }
.mr-ar-1350x759 { --mr-ratio: 1350 / 759; }
.mr-var-3x4 { --mr-vratio: 3 / 4; }
.mr-ar-1200x850 { --mr-ratio: 1200 / 850; }
.mr-ar-1200x300 { --mr-ratio: 1200 / 300; }
.mr-ar-1254x1254 { --mr-ratio: 1254 / 1254; }
.mr-ar-1774x887 { --mr-ratio: 1774 / 887; }
.mr-ar-1123x1401 { --mr-ratio: 1123 / 1401; }
/* Six carriers were missing from the first pass (the About page photos, the
   certificate scan and the clip-in hero fell back to the default ratios);
   added from the original inline values after the adversarial review. */
.mr-ar-1254x766 { --mr-ratio: 1254 / 766; }
.mr-ar-1280x853 { --mr-ratio: 1280 / 853; }
.mr-ar-1448x1086 { --mr-ratio: 1448 / 1086; }
.mr-ar-1470x863 { --mr-ratio: 1470 / 863; }
.mr-ar-1604x746 { --mr-ratio: 1604 / 746; }
.mr-ar-627x888 { --mr-ratio: 627 / 888; }

/* ==========================================================================
   22. Editor-only corrections
   ========================================================================== */

.editor-styles-wrapper header.wp-block-template-part { position: relative; }
.editor-styles-wrapper .mr-float  { position: relative; inset: auto; }
.editor-styles-wrapper .mr-linkcard { cursor: default; }


/* ==========================================================================
   Top Units page — components added for the content brought over from
   moti-ronel.com: base-type cards, price cards and the framed inventory shot.
   ========================================================================== */

/* Latin product names sit under a Hebrew heading, so they read LTR and stay
   visually subordinate to it. */
.mr-subcard__en {
	direction: ltr;
	text-align: start;
	font-family: var(--wp--preset--font-family--mono), monospace;
	font-size: 12.5px;
	letter-spacing: .02em;
	color: var(--mr-ondark-text); /* on the dark subcard: --mr-muted was 1.6:1 (QA 2026-09-17) */
	margin: 6px 0 12px !important;
}

/* --- price cards --------------------------------------------------------- */
.mr-price {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.15;
	color: var(--mr-ink);
	margin: 10px 0 12px !important;
}

.mr-pricecard { display: flex; flex-direction: column; }

.mr-pricecard--hl {
	background: rgba(251, 240, 228, .72);
	border-color: var(--mr-cmpcard-brd, rgba(214, 180, 140, .55));
	box-shadow: 0 20px 40px -34px rgba(58, 45, 36, .55);
}

/* This card borrows .mr-subcard for its shape but repaints the ground light, so
   the dark-card text colours that come with .mr-subcard have to be reverted
   along with it — otherwise the heading and the price sit light on light. */
.mr-pricecard--hl,
.mr-pricecard--hl h3,
.mr-pricecard--hl h4,
.mr-pricecard--hl .mr-subcard__t { color: var(--mr-ink-strong); }

.mr-pricecard--hl p { color: var(--mr-ink-soft); }
.mr-pricecard--hl .mr-price { color: var(--mr-ink); }
.mr-pricecard--hl strong { color: var(--mr-ink-strong); }

/* --- price cards: lift on hover, accent edge on the featured one ---------- */
.mr-pricecard {
	position: relative;
	transition: transform .22s ease, box-shadow .22s ease;
}

/* The middle card is the light one in a row of dark cards; a short accent bar
   on its top edge marks it as the featured tier without adding any copy. */
.mr-pricecard--hl::before {
	content: "";
	position: absolute;
	inset-inline: 26px;
	top: 0;
	height: 3px;
	border-radius: 0 0 4px 4px;
	background: linear-gradient(90deg, var(--mr-accent-pale), var(--mr-accent-mid), var(--mr-accent-pale));
}

@media (hover: hover) {
	.mr-pricecard:hover {
		transform: translateY(-4px);
		box-shadow: 0 26px 46px -32px rgba(58, 45, 36, .72);
	}
}

/* --- inclusions band ------------------------------------------------------
   The closing panel of the pricing section. Five items never divide evenly in
   an auto-fit grid at the content width, so the fifth was stranded alone on a
   ragged second row. Flex wrapping with a centred last line keeps any number of
   items looking deliberate, and the tiles carry the visual weight the panel
   was missing. */
.mr-inclusions {
	position: relative;
	overflow: hidden;
	text-align: center;
	background:
		radial-gradient(118% 132% at 50% -26%, rgba(227, 206, 173, .52), rgba(255, 255, 255, 0) 64%),
		linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(250, 244, 236, .74));
	border-color: rgba(255, 255, 255, .86);
}

/* Hairline of accent across the top edge of the panel. */
.mr-inclusions::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, rgba(213, 175, 146, 0), var(--mr-accent-pale), var(--mr-accent-mid), var(--mr-accent-pale), rgba(213, 175, 146, 0));
}

.mr-inclusions > h3 {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp(25px, 2.6vw, 34px);
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--mr-ink-strong);
	margin: 0 !important;
}

/* Short accent rule under the heading, echoing the dash the section eyebrows
   carry elsewhere on the page. */
.mr-inclusions > h3::after {
	content: "";
	display: block;
	width: 58px;
	height: 2px;
	margin: 16px auto 0;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(164, 116, 79, 0), var(--mr-accent-mid), rgba(164, 116, 79, 0));
}

.mr-inclusions .mr-panel__lead {
	max-width: 58ch;
	margin-top: 15px;
	margin-inline: auto;
	color: var(--mr-muted-2);
}

.mr-checkgrid--flow {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 30px;
}

.mr-checkitem--tile {
	flex: 1 1 186px;
	max-width: 262px;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
	padding: 24px 16px 22px;
	border-radius: 18px;
	border-color: rgba(214, 186, 156, .42);
	background: linear-gradient(180deg, #fffdfb, #fbf5ed);
	box-shadow: 0 16px 28px -24px rgba(58, 45, 36, .7);
	transition: transform .22s ease, box-shadow .22s ease;
}

/* Repaints the shared check marker as a filled accent disc. */
.mr-checkitem--tile::before {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	/* Lightest stop kept at 5.4:1 against the glyph — the disc carries text. */
	background: linear-gradient(145deg, #8a5c3d, var(--mr-accent));
	color: #fdf7f0;
	font-size: 19px;
	line-height: 1;
	box-shadow: 0 0 0 6px rgba(213, 175, 146, .2), 0 12px 22px -14px rgba(116, 78, 51, .95);
}

.mr-checkitem--tile p {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--mr-ink-strong);
}

@media (hover: hover) {
	.mr-checkitem--tile:hover {
		transform: translateY(-4px);
		box-shadow: 0 24px 42px -30px rgba(58, 45, 36, .72);
	}
}

/* On a phone the tiles read better as rows: the disc keeps its meaning at a
   smaller size and the label sits beside it instead of under it. */
@media (max-width: 600px) {
	.mr-checkgrid--flow { gap: 10px; margin-top: 24px; }

	.mr-checkitem--tile {
		flex-direction: row;
		text-align: start;
		gap: 13px;
		max-width: none;
		padding: 14px 16px;
	}

	.mr-checkitem--tile::before { width: 34px; height: 34px; font-size: 16px; }
	.mr-checkitem--tile p { font-size: 15.5px; }
}

/* --- framed wide photo --------------------------------------------------- */
/* ==========================================================================
   Gallery pages — before/after case cards
   ========================================================================== */

/* One case per card: the pair of photos (or the clip) on top, the story below.
   Two per row matches the live page, where every case fills one half of a
   two-column row. */
.mr-casegrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

/* Mixed media heights — a 16:9 clip beside a square one — read better as two
   cards of their own height than as equal cards with dead space in one. */
.mr-casegrid--top { align-items: start; }

/* Three portrait cases in a row. Two columns would make each card 600px wide,
   and a portrait clip filling that is over 1000px tall (17/09/2026). */
.mr-casegrid--3 { grid-template-columns: repeat(3, 1fr); }

.mr-case {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 10px;
}

.mr-case__media { margin: 0 !important; }
.mr-case__media figure { margin: 0; }
.mr-case__media .wp-block-embed { margin: 0; }

.mr-case__media .wp-block-embed__wrapper {
	border-radius: 10px;
	overflow: hidden;
	background: var(--mr-cream-dim);
}

.mr-case__media iframe { border: 0; display: block; }

.mr-case__body { padding: 20px 12px 12px; }

/* The live page titles each case with an h2. Inside a card it has to read as a
   card title rather than as a section heading. */
.mr-case__body h2,
.mr-case__body h3 {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp(19px, 1.5vw, 22.5px);
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--mr-ink-strong);
	margin: 0 !important;
}

.mr-case__body p {
	margin: 14px 0 0;
	font-size: 16.5px;
	line-height: 1.8;
	color: var(--mr-muted);
}

.mr-case__body p:first-child { margin-top: 0; }
.mr-case__body strong { color: var(--mr-ink-soft); }
.mr-case__body .mr-checklist { margin-top: 16px; }

/* These stories carry inline links; without a rule they inherit the global
   no-underline link style and disappear into the paragraph. */
.mr-case__body a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* A one-line intro that points at the clip under it, so the copy leads here. */
.mr-case__body--lead { padding: 16px 12px 14px; }

.mr-case__body--lead p {
	font-size: 17px;
	font-weight: 600;
	color: var(--mr-ink-soft);
}

/* Gallery navigation strip ------------------------------------------------ */
.mr-galnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* The page opens on two paragraphs with no heading, so the panel itself has to
   carry the emphasis. */
.mr-introcopy { text-align: center; }

.mr-introcopy .mr-panel__lead {
	margin-top: 0;
	margin-inline: auto;
	max-width: 76ch;
}

.mr-introcopy .mr-panel__p {
	margin-inline: auto;
	max-width: 76ch;
}

/* Two cases side by side need the full content width; below it they stack. */
@media (max-width: 900px) {
	.mr-casegrid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.mr-case { padding: 8px; }
	.mr-case__body { padding: 16px 8px 10px; }
	.mr-case__body p { font-size: 16px; }
}

.mr-framed--auto figure { margin: 0; }

/* ==========================================================================
   Contact page — channels and map
   ========================================================================== */

/* The three ways to reach the studio. Each card ends in its own action, so the
   button is pinned to the bottom and every card presents the same target size
   however long its copy runs. */
.mr-channels {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 30px;
}

.mr-channel {
	display: flex;
	flex-direction: column;
	padding: 26px 22px 22px;
}

.mr-channel h3,
.mr-channel h2.mr-h3 {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 20px;
	line-height: 1.3;
	color: var(--mr-ink-strong);
	margin: 0 !important;
}

.mr-channel__n {
	margin: 12px 0 0 !important;
	font-size: 17px;
	line-height: 1.5;
	color: var(--mr-ink-soft);
}

.mr-channel > p {
	margin: 8px 0 0;
	font-size: 16px;
	color: var(--mr-muted);
}

.mr-channel .wp-block-buttons {
	margin-top: auto;
	padding-top: 20px;
}

/* A phone number is the whole label here, so the button fills the card and the
   digits are isolated from the surrounding RTL text. */
.mr-channel .wp-block-button { width: 100%; }

.mr-channel .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	unicode-bidi: isolate;
}

/* Map ---------------------------------------------------------------------- */
.mr-mapframe { padding: 10px; }

/* The map is a consent-gated embed (QA C-09, 22/09/2026): the placeholder
   holds the same height as the map so the two columns do not jump. */
.mr-mapframe .mr-embed,
.mr-mapframe .mr-embed__ph {
	min-height: clamp(330px, 40vw, 470px);
	border-radius: 14px;
}

.mr-mapframe iframe {
	display: block;
	width: 100%;
	height: clamp(330px, 40vw, 470px);
	border: 0;
	border-radius: 14px;
	background: var(--mr-cream-dim);
}

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


/* ==========================================================================
   About page
   ========================================================================== */

/* The live page opens on a headline and two paragraphs with no photo, so the
   hero is a centred copy panel rather than the usual photo + copy split. */
.mr-hero--copy .mr-heropanel--copy {
	max-width: 920px;
	margin-inline: auto;
	text-align: center;
}

.mr-hero--copy .mr-hero__lead {
	margin-inline: auto;
	max-width: 66ch;
}

/* Pull quote inside a panel. */
.mr-quote {
	margin: 22px 0 0 !important;
	padding: 16px 20px;
	border-inline-start: 3px solid var(--mr-accent-mid);
	border-radius: 12px;
	background: rgba(255, 255, 255, .5);
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--mr-ink-soft);
}

.mr-quote strong { font-weight: 600; color: var(--mr-ink-soft); }

.mr-quote__by {
	margin: 8px 20px 0 !important;
	font-size: 15px;
	color: var(--mr-accent-label);
}

/* Panels sitting side by side in a top-aligned pair fill the row. */
.mr-panel--tall { height: 100%; }

.mr-panel__sub {
	font-size: 20px;
	line-height: 1.3;
	color: var(--mr-ink-strong);
	margin: 22px 0 0 !important;
}

/* The same sub-heading as an h2: five pages jumped h1 -> h3 (QA C-11,
   22/09/2026), so the first sub-heading became an h2 and must not pick up
   the big `.mr-panel h2` size. */
.mr-panel h2.mr-panel__sub,
h2.mr-panel__sub {
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: 0;
}

/* A scanned certificate must not be cropped; its own ratio is passed in and
   the frame shows the whole sheet. */
.mr-framed--doc img {
	object-fit: contain;
	background: #fff;
}

/* A text link at the foot of a channel card, pinned like its button is. */
.mr-channel__link {
	margin-top: auto !important;
	padding-top: 16px;
}

/* One clip on its own sits at a readable width instead of the full column. */
.mr-videotile--single {
	max-width: 640px;
	margin-inline: auto;
}

/* ==========================================================================
   Video testimonials page
   ========================================================================== */

/* A clip in the hero frame instead of a photo: the frame keeps its glass and
   padding, the embed keeps its own aspect box. */
.mr-hero__frame--video .wp-block-embed { margin: 0; }

.mr-hero__frame--video .wp-block-embed__wrapper {
	border-radius: 16px;
	overflow: hidden;
	background: var(--mr-cream-dim);
}

.mr-hero__frame--video iframe { border: 0; display: block; }

/* Small kicker above a video card title. */
.mr-videocard__body .mr-videocard__tag {
	margin: 0 0 8px !important;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mr-accent-label);
}

/* Pill links — a row of small glass chips pointing at the service pages. */
.mr-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0 !important;
}

.mr-pills--stack { margin-top: 18px !important; }

.mr-pill {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--mr-glass-strong);
	border: 1px solid rgba(214, 186, 156, .5);
	font-size: 15px;
	font-weight: 600;
	color: var(--mr-accent) !important;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}

.mr-pill:hover {
	background: #fff;
	transform: translateY(-1px);
}

/* Trust strip: three short labelled lines with no button. */
.mr-channels--trust { margin-top: 0; }
.mr-channels--trust .mr-channel { padding: 20px 22px; }
.mr-channels--trust .mr-channel__n { margin-top: 0 !important; }

/* FAQ spanning the content width instead of the usual right-hand column. */
.mr-faq--wide h2 { margin-bottom: 18px !important; }

/* Quote page: the WhatsApp alternative sits under the form as a heading plus
   the live site's image button. */
.mr-formcard .mr-form__alt {
	margin: 26px 0 0 !important;
	font-size: 19px;
	line-height: 1.4;
	text-align: center;
}

.mr-formcard .mr-wabtn {
	margin: 14px auto 0;
	text-align: center;
}

.mr-formcard .mr-wabtn img { display: inline-block; }

/* ==========================================================================
   Price list page
   ========================================================================== */

/* A wide 4:1 banner opens the page instead of a photo beside the headline. */
.mr-hero--copy .mr-banner { margin: 0; }
.mr-hero--copy .mr-banner img { border-radius: 18px; }

/* The live page lists market prices as check-marked lines; keep them as
   paragraphs and give the run some rhythm and a dividing rule. */
.mr-pricelines p {
	margin: 0;
	padding: 11px 0;
	border-bottom: 1px solid rgba(214, 186, 156, .35);
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--mr-ink-soft);
}

.mr-pricelines p:last-of-type { border-bottom: 0; }
.mr-pricelines p b { font-weight: 700; }

.mr-pricelines .mr-pricelines__note {
	margin-top: 14px;
	padding-top: 16px;
	border-top: 1px solid rgba(214, 186, 156, .5);
	border-bottom: 0;
	font-size: 15.5px;
	color: var(--mr-muted);
}

/* Single clips in the article: a wide one sits at reading width, a portrait
   one at its natural narrow width, both centred. */
.mr-videotile--wide { max-width: 860px; }

.mr-videotile--portrait {
	max-width: 420px;
	margin-inline: auto;
}

.mr-textlink--center { text-align: center; }

.mr-sectionhead__sub {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--mr-muted);
	margin: 14px 0 0 !important;
}

.mr-sectionhead__sub strong { color: var(--mr-ink-soft); }

/* ==========================================================================
   Clip-in extensions page
   ========================================================================== */

/* Numbered feature cards: the digit sits in a small accent disc above the title. */
.mr-channel--numbered { padding-top: 22px; }

.mr-channel__num {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin: 0 0 14px !important;
	border-radius: 50%;
	background: linear-gradient(145deg, #8a5c3d, var(--mr-accent));
	color: #fdf7f0;
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 17px;
	line-height: 1;
	box-shadow: 0 0 0 5px rgba(213, 175, 146, .2);
}

/* A row that mixes clip shapes (two portrait, one wide) reads better with the
   cards starting at the top than stretched to the tallest one. */
.mr-videogrid--top { align-items: start; }

/* A card whose copy is centred under its clip. */
.mr-case__body--center { text-align: center; }

/* Drawbacks list: the same rhythm as the check list, with a dash instead of a
   check so the two columns read as opposites. */
.mr-checklist--minus li::before { content: "–"; color: var(--mr-muted-3); }

/* First sub-heading inside a panel has no lead above it to space from. */
.mr-panel__sub--first { margin-top: 0 !important; }

/* Wide WhatsApp image button (800×100) centred above the closing copy. */
.mr-wabtn--wide {
	max-width: 520px;
	margin: 0 auto 22px;
}

.mr-wabtn--wide img { width: 100%; height: auto; }

.mr-cta__tagline {
	margin-top: 22px !important;
	font-size: 14.5px;
	color: var(--mr-muted-3);
}

/* A comparison table with no single "our method" column: the live clip-in page
   ticks individual cells instead, so the second-column highlight is undone. */
.mr-cmptable--even th:nth-child(2) {
	background: none;
	color: var(--mr-muted-3);
	font-weight: inherit;
	font-size: inherit;
	letter-spacing: .14em;
}

.mr-cmptable--even td:nth-child(2) {
	background: none;
	color: var(--mr-muted-2);
}

/* Four portrait clips fit one row at the content width: each 9:16 iframe is
   259px wide, so 4 × ~292px columns leave a comfortable margin. */
.mr-videogrid--4 { grid-template-columns: repeat(4, 1fr); }

/* A check marker before a video card title, matching the live gallery page. */
.mr-videocard__body--check h3::before {
	content: "\2713";
	margin-inline-end: 7px;
	color: var(--mr-accent-mid);
	font-weight: 700;
}

/* Image pairs whose sources are not the 3:4 the portrait modifier assumes;
   each pair passes its own ratio so nothing is cropped. */
.mr-imagepair--auto img,
.mr-imagepair--auto video { aspect-ratio: var(--mr-pairratio, 3 / 4); }

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

/* ==========================================================================
   Mobile
   ========================================================================== */

/* Matches the breakpoint where .mr-hero .mr-2col dissolves its columns. */
@media (max-width: 1024px) {
	/* The hero photo leads the page here, matching the right-hand slot it
	   holds on desktop — the columns dissolve, so it needs an explicit order
	   ahead of the copy. */
	.mr-hero .mr-mediacard { order: 0; margin-top: 0; margin-bottom: 22px; }
}

@media (max-width: 600px) {
	.mr-price { font-size: 23px; }
	.mr-subcard__en { font-size: 12px; }
}
/* The four-column rule sits after the phone block, so it needs its own phone
   override or four portrait clips stay two-up at 390px. */
@media (max-width: 600px) {
	.mr-videogrid--4 { grid-template-columns: 1fr; }
}

/* Four short benefit cards fit one row at the content width. */
.mr-channels--four { grid-template-columns: repeat(4, 1fr); }

/* Anchor cards whose marker is a glyph rather than a number. */
.mr-pagenav .mr-pills { margin-top: 14px !important; }

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

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

/* Author byline closing the article. */
.mr-byline {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 24px !important;
	padding-top: 20px;
	border-top: 1px solid rgba(214, 186, 156, .5);
	font-size: 15px;
	line-height: 1.7;
	color: var(--mr-muted);
}

.mr-byline__mark {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(145deg, #8a5c3d, var(--mr-accent));
	color: #fdf7f0;
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 14px;
	letter-spacing: .04em;
}

.mr-byline strong { color: var(--mr-ink-soft); }

/* Title above a clip in a tile. */
.mr-videotile__t {
	margin: 0 0 12px !important;
	font-size: 18px;
	line-height: 1.35;
	color: var(--mr-ink-strong);
}

/* A photo card in a media-early pair has to follow the copy on a phone, the
   same way a video tile or a framed photo does. */
@media (max-width: 1024px) {
	.mr-2col--media-early .mr-mediacard { order: 4; margin-top: 26px; }
}


/* ==========================================================================
   Expertise page (moti-ronel-hair-authority)
   ========================================================================== */

/* Credential lines in the hero panel: a bold label on its own line and the
   detail beneath it. The live page writes them as <strong> + <br> + text. */
.mr-factline {
	margin: 0 !important;
	padding: 14px 0;
	border-bottom: 1px solid rgba(214, 186, 156, .35);
	font-size: 16px;
	line-height: 1.7;
	color: var(--mr-ink-soft);
}

.mr-factline:last-of-type { border-bottom: 0; }

.mr-factline strong {
	color: var(--mr-ink-strong);
	font-size: 17px;
}

/* Four credential tiles in one row. The auto-fit base tops out at three
   tracks inside a 1224px canvas (4 x 290 + gaps overflows it), so the
   four-up run needs explicit tracks. */
.mr-cards--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
	.mr-cards--4 { grid-template-columns: repeat(2, 1fr); }
}

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

/* The lead line of a credential tile. */
.mr-card__hl {
	margin: 0 0 10px !important;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--mr-ink-strong);
}

/* ==========================================================================
   Certificate page (moti-ronel-certificate)
   ========================================================================== */

/* The whole page is one document: a portrait scan and its rights notice.
   The card keeps the 627x888 scan at a readable width instead of letting it
   run the full 1224px canvas. */
.mr-certcard {
	max-width: 620px;
	margin-inline: auto;
	margin-top: 34px;
	padding: clamp(18px, 2.4vw, 30px);
	background: var(--mr-glass-strong);
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: var(--mr-radius-lg);
	box-shadow: var(--mr-shadow-panel);
}

.mr-certcard__img { border-radius: 14px; }

/* The scan is a document, not a photo — it must never be cropped. */
.mr-certcard__img img {
	aspect-ratio: var(--mr-ratio, 627 / 888);
	object-fit: contain;
	background: #fff;
}

.mr-certcard__note {
	margin: 20px 0 0 !important;
	text-align: center;
	font-size: 15.5px;
	line-height: 1.9;
	color: var(--mr-ink-soft);
}

/* ==========================================================================
   Microlines before/after gallery
   ========================================================================== */

/* The live page labels each half of a pair "before" / "after" above the
   photo. The label has to sit tight to its image, not float in the gap. */
.mr-imagepair--labelled .wp-block-column { display: flex; flex-direction: column; }

.mr-pairlabel {
	margin: 0 0 8px !important;
	text-align: center;
	font-size: 13.5px;
	letter-spacing: .06em;
	color: var(--mr-ink-soft);
}

.mr-pairlabel strong { color: var(--mr-ink-strong); }

/* A wide diagram (the keratin bonding infographic is 4:1) needs more room than
   a portrait document scan. */
.mr-certcard--wide { max-width: 900px; }

/* Catalogue cards whose photos are portrait. The base card crops every image to
   4:3, which cuts a portrait haircut shot roughly in half. 4:5 sits between the
   two source ratios on this page (0.75 and 0.85), so each is trimmed ~6% rather
   than one being trimmed heavily. */
.mr-cards--portrait .mr-card img { aspect-ratio: 4 / 5; }

/* ==========================================================================
   Legal pages (purchase & returns policy) and the thank-you page
   ========================================================================== */

/* A long terms document: narrower measure, quiet type, clear section breaks. */
.mr-legal {
	max-width: 860px;
	margin-inline: auto;
}

.mr-legal__h {
	margin: 42px 0 14px !important;
	padding-top: 22px;
	border-top: 1px solid rgba(214, 186, 156, .45);
	font-size: clamp(19px, 1.5vw, 22px);
	line-height: 1.35;
	color: var(--mr-ink-strong);
}

.mr-legal__h--first { margin-top: 0 !important; padding-top: 0; border-top: 0; }

.mr-legal__p {
	margin: 0 0 14px !important;
	font-size: 15.5px;
	line-height: 1.85;
	color: var(--mr-ink-soft);
}

.mr-legal__p:last-child { margin-bottom: 0 !important; }

/* Thank-you confirmation panel. */
.mr-thanks {
	max-width: 660px;
	margin-inline: auto;
	text-align: center;
}

.mr-thanks__mark {
	margin: 0 auto 18px !important;
	width: 62px;
	height: 62px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--mr-accent-mid);
	color: #fff;
	font-size: 30px;
	line-height: 1;
}

.mr-thanks__sub,
.mr-panel h2.mr-thanks__sub {
	margin: 14px 0 0 !important;
	letter-spacing: 0;
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--mr-ink-soft);
}

.mr-thanks__p { margin: 16px 0 0 !important; color: var(--mr-ink-soft); }

.mr-thanks .mr-pills { justify-content: center; }

/* Contact details and the note line inside a legal document. */
.mr-legal__note { font-style: italic; }

.mr-legal__contact {
	margin-bottom: 6px !important;
	font-size: 16.5px;
}

.mr-legal__contact a { color: var(--mr-ink-strong); font-weight: 600; }

/* ==========================================================================
   Single post (professional-knowledge article)
   ========================================================================== */

.mr-article__head { text-align: center; }

.mr-article__cat {
	margin: 0 0 14px !important;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mr-accent-label); /* 13px text: accent-mid is 3.7:1 on cream (QA 2026-09-17) */
}

.mr-article__cat a { color: inherit; text-decoration: none; }
.mr-article__cat a:hover { text-decoration: underline; }

.mr-article__head h1 { max-width: 900px; margin-inline: auto; }

.mr-article__lead {
	max-width: 720px;
	margin: 18px auto 0 !important;
	font-size: 18.5px;
	line-height: 1.75;
	color: var(--mr-ink-soft);
}

.mr-article__meta {
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
	font-size: 14px;
	color: var(--mr-ink-soft);
}

.mr-article__meta p { margin: 0; }
.mr-article__by { font-weight: 600; color: var(--mr-ink-strong); }
.mr-article__by::after { content: " ·"; }

.mr-article__hero .mr-framed { max-width: 900px; margin-inline: auto; }
.mr-article__hero img { aspect-ratio: var(--mr-ratio, 16 / 9); object-fit: cover; }

/* The article body is a reading column, not the full 1224px canvas. */
.mr-article__body > .wp-block-post-content { max-width: 780px; margin-inline: auto; }

.mr-article__body h2 {
	margin: 46px 0 16px !important;
	font-size: clamp(22px, 1.9vw, 27px);
	line-height: 1.3;
	color: var(--mr-ink-strong);
}

.mr-article__body h3 {
	margin: 30px 0 12px !important;
	font-size: clamp(18px, 1.4vw, 20.5px);
	line-height: 1.4;
	color: var(--mr-ink-strong);
}

.mr-article__body p {
	margin: 0 0 18px;
	font-size: 17px;
	line-height: 1.9;
	color: var(--mr-ink-soft);
}

.mr-article__body .wp-block-list { margin: 0 0 18px; }

.mr-article__body figure { margin: 30px 0; }

/* A slot the studio still has to shoot or film. Visible on purpose. */
.mr-slot {
	margin: 30px 0 !important;
	padding: 26px 22px;
	border: 2px dashed var(--mr-accent-mid);
	border-radius: 14px;
	background: rgba(255, 255, 255, .55);
	text-align: center;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--mr-ink-strong);
}

.mr-slot strong { display: block; margin-bottom: 4px; font-size: 16.5px; }
.mr-slot em { color: var(--mr-ink-soft); font-style: normal; font-size: 14px; }

/* Since launch the slots are a note for the owner only: hidden from visitors,
   still shown when logged in. A feature grid whose second column was the
   slot gives its text the full width. */
body:not(.logged-in) .mr-slot { display: none !important; }
body:not(.logged-in) .mr-art__feature-grid:has(> .mr-slot) { grid-template-columns: 1fr; }

/* ==========================================================================
   Professional-knowledge hub
   ========================================================================== */

.mr-pills--center { justify-content: center; }

.mr-pills .mr-pill--active,
.mr-pill--active {
	background: var(--mr-ink-strong);
	border-color: var(--mr-ink-strong);
	color: #fff !important;
}

.mr-pill--active:hover { background: var(--mr-ink-strong); }

.mr-pill--active .mr-pill__n { opacity: .8; }

.mr-pill__n {
	margin-inline-start: 6px;
	opacity: .65;
	font-variant-numeric: tabular-nums;
}

/* Category label above an article card title. */
.mr-postcard__cat {
	margin: 0 0 8px !important;
	font-size: 12.5px;
	letter-spacing: .08em;
	color: var(--mr-accent-label); /* 12.5px text: accent-mid is 3.7:1 (QA 2026-09-17) */
}

.mr-postcard__cat a { color: inherit; text-decoration: none; }
.mr-postcard__cat a:hover { text-decoration: underline; }

.mr-postcard .mr-card__body h3 { margin: 0 0 10px !important; }
.mr-postcard .mr-card__body h3 a { color: inherit; text-decoration: none; }
.mr-postcard .mr-card__body h3 a:hover { text-decoration: underline; }

/* A category section with one or two articles should not stretch its cards to
   the full canvas: auto-fill keeps the empty tracks so every card in the hub
   is the same width. */
.mr-cards--fill { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

/* Body links inside an article sit on the page ground, where --mr-accent
   (#744e33) measures 4.05:1 — just under AA for 17px text. Deepen them. */
.mr-article__body a,
.mr-article__cat a {
	color: #5d3e28;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.mr-article__body a:hover { color: var(--mr-ink-strong); }

/* ==========================================================================
   Editorial article layout (mr-art) — the long-form knowledge posts
   ========================================================================== */

/* Tonal ladder: page cream → glass cards → one deep espresso feature block.
   The deep block is what keeps a 1,900-word read from feeling flat. */
:root {
	--mr-art-measure: 720px;
	--mr-art-wide:    1000px;
	--mr-deep:        #2b211a;
	--mr-deep-2:      #3a2d24;
	--mr-on-deep:     #f6efe6;
	--mr-on-deep-dim: #d9cabb;
	--mr-gold:        #c9a27a;
}

/* ---- hero -------------------------------------------------------------- */
.mr-art-hero { padding-top: clamp(28px, 4vw, 56px); text-align: center; }

.mr-art-hero__kicker {
	margin: 0 0 18px !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--mr-accent-label);
}

.mr-art-hero__kicker a { color: inherit; text-decoration: none; }
.mr-art-hero__kicker a:hover { text-decoration: underline; }

.mr-art-hero h1 {
	max-width: 880px;
	margin: 0 auto !important;
	font-size: clamp(34px, 4.4vw, 58px);
	line-height: 1.12;
	letter-spacing: -.012em;
	color: var(--mr-ink-strong);
}

.mr-art-hero__stand {
	max-width: 700px;
	margin: 22px auto 0 !important;
	font-size: clamp(18px, 1.5vw, 21px);
	line-height: 1.7;
	color: var(--mr-muted);
}

.mr-art-hero__meta {
	justify-content: center;
	align-items: center;
	gap: 14px 22px;
	margin-top: 26px;
	font-size: 14.5px;
	color: var(--mr-muted);
}

.mr-art-hero__meta p { margin: 0; }

.mr-art-hero__author {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: var(--mr-ink-strong);
}

.mr-art-hero__author a { color: inherit; text-decoration: none; }
.mr-art-hero__author a:hover,
.mr-art-hero__author a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.mr-art-hero__mark {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--mr-deep-2), var(--mr-deep));
	color: var(--mr-gold);
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 14px;
	letter-spacing: .02em;
}

.mr-art-hero__meta .wp-block-post-date,
.mr-art-hero__read { position: relative; padding-inline-start: 18px; }

.mr-art-hero__meta .wp-block-post-date::before,
.mr-art-hero__read::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--mr-accent-pale);
	transform: translateY(-50%);
}

.mr-art-hero__figure {
	max-width: var(--mr-art-wide);
	margin: 40px auto 0;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 40px 70px -46px rgba(43, 33, 26, .75);
}

.mr-art-hero__figure img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center 30%;
}

/* ---- reading column ----------------------------------------------------- */
.mr-art .wp-block-post-content > * + * { margin-top: 20px; }

.mr-art p {
	font-size: 18px;
	line-height: 1.85;
	color: var(--mr-ink-soft);
}

.mr-art p strong { color: var(--mr-ink-strong); }

.mr-art h2 {
	margin-top: 64px !important;
	font-size: clamp(25px, 2.3vw, 32px);
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--mr-ink-strong);
}

.mr-art h2::before {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin-bottom: 18px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--mr-accent-mid), var(--mr-accent-pale));
}

.mr-art h3 {
	margin-top: 36px !important;
	font-size: clamp(19px, 1.6vw, 22px);
	line-height: 1.35;
	color: var(--mr-ink-strong);
}

/* opening paragraph — larger, lighter, sets the voice */
.mr-art__lead {
	font-size: clamp(19px, 1.6vw, 22px) !important;
	line-height: 1.75 !important;
	color: var(--mr-ink) !important;
}

/* ---- pull quote --------------------------------------------------------- */
.mr-art__pull {
	position: relative;
	margin: 40px 0 !important;
	padding: 30px 34px 30px 30px;
	border-radius: 18px;
	background: linear-gradient(135deg, #f3e7d9, #ede0cf);
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp(21px, 2vw, 27px) !important;
	line-height: 1.45 !important;
	color: var(--mr-ink-strong) !important;
	font-weight: 400;
}

.mr-art__pull::before {
	content: "\201D";
	position: absolute;
	inset-inline-start: 18px;
	top: -6px;
	font-size: 96px;
	line-height: 1;
	color: var(--mr-accent-mid);
	opacity: .55;
	font-family: Georgia, serif;
}

.mr-art__pull strong { font-weight: 400; color: inherit; }

/* ---- side note ---------------------------------------------------------- */
.mr-art__note {
	margin: 26px 0 !important;
	padding: 18px 22px 18px 20px;
	border-inline-start: 4px solid var(--mr-accent-mid);
	border-radius: 14px 0 0 14px;
	background: rgba(255, 255, 255, .62);
	font-size: 16.5px !important;
	line-height: 1.75 !important;
	color: var(--mr-ink) !important;
}

.mr-art__note strong { display: block; margin-bottom: 4px; }

/* three symptom cards */
.mr-art__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 30px !important;
}

.mr-art__card {
	padding: 26px 24px 24px;
	border-radius: 18px;
	background: linear-gradient(180deg, #fffdfb, #faf4ec);
	border: 1px solid rgba(214, 186, 156, .42);
	box-shadow: 0 18px 34px -30px rgba(58, 45, 36, .7);
}

.mr-art__card h3 { margin: 0 0 10px !important; font-size: 19px; }
.mr-art__card p { margin: 0; font-size: 16.5px; line-height: 1.7; }

.mr-art__card-n {
	margin: 0 0 14px !important;
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 13px !important;
	letter-spacing: .12em;
	color: var(--mr-accent-label) !important;
}

/* ---- deep feature block (the 200 → 80 case) ----------------------------- */
.mr-art__feature {
	margin-top: 56px !important;
	padding: clamp(30px, 4vw, 54px);
	border-radius: 26px;
	background:
		radial-gradient(700px 400px at 90% -10%, rgba(201, 162, 122, .22), transparent 70%),
		linear-gradient(160deg, var(--mr-deep-2), var(--mr-deep));
	color: var(--mr-on-deep);
	box-shadow: 0 40px 70px -46px rgba(43, 33, 26, .9);
}

.mr-art__feature h2 { margin-top: 0 !important; color: var(--mr-on-deep); }
.mr-art__feature h2::before { background: linear-gradient(90deg, var(--mr-gold), transparent); }
.mr-art__feature p { color: var(--mr-on-deep-dim); }
.mr-art__feature p strong { color: var(--mr-on-deep); }

.mr-art__feature-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(24px, 3vw, 44px);
	align-items: start;
	margin-top: 8px !important;
}

.mr-art__numerals {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 6px 0 22px !important;
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	color: var(--mr-gold) !important;
	line-height: 1 !important;
}

.mr-art__numerals b { font-weight: 400; font-size: clamp(56px, 7vw, 92px); letter-spacing: -.03em; color: inherit; }
.mr-art__numerals small { font-size: 18px; color: var(--mr-on-deep-dim); }
.mr-art__numerals i { font-style: normal; font-size: 34px; color: var(--mr-on-deep-dim); }

.mr-art__feature .mr-videotile {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .12);
	box-shadow: none;
}

.mr-art__feature .wp-block-embed__wrapper { border-radius: 12px; overflow: hidden; }

/* ---- numbered steps ----------------------------------------------------- */
.mr-art__steps {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 28px !important;
}

.mr-art__step {
	padding: 24px 24px 22px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .6);
	border: 1px solid rgba(255, 255, 255, .8);
}

.mr-art__step-n {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0 0 14px !important;
	border-radius: 50%;
	background: linear-gradient(145deg, #8a5c3d, var(--mr-accent));
	color: #fdf7f0 !important;
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 17px !important;
	line-height: 1 !important;
}

.mr-art__step h3 { margin: 0 0 8px !important; font-size: 19px; }
.mr-art__step p { margin: 0 0 8px; font-size: 16.5px; line-height: 1.7; }
.mr-art__step p:last-child { margin-bottom: 0; }

/* ---- the three portrait clips side by side ------------------------------ */
.mr-art__shorts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 26px !important;
}

.mr-art__shorts .wp-block-embed { margin: 0; }

.mr-art__shorts .wp-block-embed__wrapper {
	border-radius: 16px;
	overflow: hidden;
	background: var(--mr-deep);
	box-shadow: 0 24px 40px -34px rgba(43, 33, 26, .9);
}

.mr-art__banner { margin-top: 18px !important; border-radius: 18px; overflow: hidden; }
.mr-art__banner img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }

/* ---- check grid --------------------------------------------------------- */
.mr-art__checks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: 22px !important;
	padding: 0 !important;
	list-style: none;
}

.mr-art__checks li {
	position: relative;
	padding: 16px 48px 16px 18px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .62);
	border: 1px solid rgba(214, 186, 156, .38);
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--mr-ink-soft);
}

.mr-art__checks li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 14px;
	top: 15px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: linear-gradient(145deg, #8a5c3d, var(--mr-accent));
	color: #fdf7f0;
	font-size: 13px;
}

.mr-art__checks strong { display: block; color: var(--mr-ink-strong); }

/* ---- manifesto lines ---------------------------------------------------- */
.mr-art__manifesto {
	margin-top: 22px !important;
	padding: 0 !important;
	list-style: none;
	counter-reset: mani;
}

.mr-art__manifesto li {
	position: relative;
	padding: 16px 54px 16px 0;
	border-bottom: 1px solid rgba(214, 186, 156, .45);
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp(18px, 1.5vw, 21px);
	line-height: 1.45;
	color: var(--mr-ink-strong);
	counter-increment: mani;
}

.mr-art__manifesto li::before {
	content: counter(mani, decimal-leading-zero);
	position: absolute;
	inset-inline-start: 0;
	top: 18px;
	font-size: 14px;
	letter-spacing: .08em;
	color: var(--mr-accent-label); /* 14px text: accent-mid is 3.7:1 (QA 2026-09-17) */
}

/* ---- author box --------------------------------------------------------- */
.mr-art__author {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 20px;
	align-items: start;
	margin-top: 44px !important;
	padding: 26px;
	border-radius: 20px;
	background: linear-gradient(180deg, #fffdfb, #faf4ec);
	border: 1px solid rgba(214, 186, 156, .42);
}

.mr-art__author-mark {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 !important;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--mr-deep-2), var(--mr-deep));
	color: var(--mr-gold) !important;
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 20px !important;
	line-height: 1 !important;
}

.mr-art__author h3 { margin: 0 0 6px !important; font-size: 18px; }
.mr-art__author p { margin: 0 0 8px; font-size: 16px; line-height: 1.7; }
.mr-art__author p:last-child { margin: 0; }

/* ---- closing CTA panel -------------------------------------------------- */
.mr-art__close {
	margin-top: 56px !important;
	padding: clamp(28px, 3.6vw, 44px);
	border-radius: 24px;
	text-align: center;
	background: linear-gradient(180deg, #fffdfb, #f6ecdf);
	border: 1px solid rgba(214, 186, 156, .5);
	box-shadow: 0 30px 56px -44px rgba(58, 45, 36, .8);
}

.mr-art__close h2 { margin-top: 0 !important; }
.mr-art__close h2::before { margin-inline: auto; }
.mr-art__close .wp-block-buttons { justify-content: center; margin-top: 22px; }

/* ---- related posts ------------------------------------------------------ */
.mr-art__related { margin-top: 64px !important; }
.mr-art__related > h2 { text-align: center; }
.mr-art__related > h2::before { margin-inline: auto; }
.mr-art__related .mr-cards { margin-top: 26px; }
.mr-art__related .mr-card img { aspect-ratio: 16 / 10; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
	.mr-art__cards { grid-template-columns: 1fr; }
	.mr-art__feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
	.mr-art p { font-size: 17px; }
	.mr-art__steps, .mr-art__checks { grid-template-columns: 1fr; }
	.mr-art__shorts { grid-template-columns: 1fr; }
	.mr-art__shorts .wp-block-embed { width: min(340px, 100%); margin-inline: auto; }
	.mr-art__pull { padding: 26px 22px 22px; }
	.mr-art__author { grid-template-columns: 1fr; }
	.mr-art-hero__figure { border-radius: 14px; }
}

/* Phone: the photo leads, above the headline (site-wide rule), and keeps the
   4:3 frame of the source so nobody's face is cropped by a 16:9 box. */
@media (max-width: 700px) {
	.mr-art-hero { display: flex; flex-direction: column; }
	.mr-art-hero__figure { order: -1; margin: 0 0 24px; }
	.mr-art-hero__figure img { aspect-ratio: 4 / 3; object-position: center 25%; }
	.mr-art-hero__kicker { margin-top: 0 !important; }
}

/* Square featured image (a product shot with text on it): never crop it.
   Wide screens put the headline beside the image; narrower ones stack it,
   and phones keep the site-wide rule of the image above the headline.
   The class comes from moti_ronel_square_hero_class() in functions.php. */
.mr-art--square-hero .mr-art-hero__figure img { aspect-ratio: 1 / 1; object-fit: contain; object-position: center; }

@media (min-width: 901px) {
	.mr-art--square-hero .mr-art-hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
		grid-template-rows: 1fr repeat(4, auto) 1fr;
		column-gap: clamp(36px, 4.5vw, 72px);
		align-items: start;
		max-width: var(--mr-art-wide);
		margin-inline: auto;
		text-align: start;
	}
	.mr-art--square-hero .mr-art-hero > * { grid-column: 1; max-width: none; margin-inline: 0 !important; }
	.mr-art--square-hero .mr-art-hero > .mr-art-hero__kicker { grid-row: 2; }
	.mr-art--square-hero .mr-art-hero > .wp-block-post-title { grid-row: 3; }
	.mr-art--square-hero .mr-art-hero > .mr-art-hero__stand { grid-row: 4; }
	.mr-art--square-hero .mr-art-hero > .mr-art-hero__meta { grid-row: 5; justify-content: flex-start; }
	.mr-art--square-hero .mr-art-hero > .mr-art-hero__figure { grid-column: 2; grid-row: 1 / -1; margin: 0 !important; }
}

@media (min-width: 701px) and (max-width: 900px) {
	.mr-art--square-hero .mr-art-hero__figure { max-width: 520px; }
}


/* ==========================================================================
   mr-art — second set of editorial components (articles 2–6)
   ========================================================================== */

/* first block of the column sits flush under the hero */
.mr-art .wp-block-post-content > :first-child { margin-top: 0 !important; }

/* eyebrow labels inside the reading column */
.mr-art .mr-eyebrow { margin: 64px 0 0 !important; font-size: 11.5px !important; line-height: 1.4 !important; }
.mr-art .mr-eyebrow + h2 { margin-top: 14px !important; }
.mr-art .mr-eyebrow + h2::before { display: none; }

/* small print and captions */
.mr-art__fine { font-size: 15px !important; line-height: 1.7 !important; color: var(--mr-muted) !important; }
.mr-art p small { font-size: inherit; }
.mr-art__caption { margin-top: 12px !important; font-size: 14.5px !important; line-height: 1.6 !important; color: var(--mr-muted) !important; text-align: center; }

/* note: warning variant, and a group version that can hold a heading */
.mr-art__note--warn { border-inline-start-color: #b4553f; background: rgba(255, 246, 242, .78); }

.mr-art__aside {
	margin: 26px 0 !important;
	padding: 20px 22px 18px 20px;
	border-inline-start: 4px solid var(--mr-accent-mid);
	border-radius: 14px 0 0 14px;
	background: rgba(255, 255, 255, .62);
}

.mr-art__aside--warn { border-inline-start-color: #b4553f; background: rgba(255, 246, 242, .78); }
.mr-art__aside h3 { margin: 0 0 8px !important; font-size: 18px; }
.mr-art__aside p { margin: 0 0 8px; font-size: 16.5px; line-height: 1.75; }
.mr-art__aside p:last-child { margin-bottom: 0; }

/* cards: column variants, lists and links inside */
.mr-art__cards--2 { grid-template-columns: repeat(2, 1fr); }
.mr-art__cards--4 { grid-template-columns: repeat(4, 1fr); }
.mr-art__card { display: flex; flex-direction: column; }
.mr-art__card p + p { margin-top: 10px; }
.mr-art__card ul { margin: 0; padding: 0; list-style: none; }

.mr-art__card li {
	padding: 10px 0;
	border-top: 1px solid rgba(214, 186, 156, .35);
	font-size: 16px;
	line-height: 1.65;
	color: var(--mr-ink-soft);
}

.mr-art__card li:first-child { border-top: 0; padding-top: 0; }
.mr-art__card li strong { color: var(--mr-ink-strong); }
.mr-art__card .mr-textlink { margin-top: auto !important; padding-top: 16px; }
.mr-art__card .mr-textlink a { font-size: 15.5px; }

.mr-art__card--pair p > strong:first-child,
.mr-art__step--pair p > strong:first-child {
	display: block;
	margin-bottom: 6px;
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-weight: 400;
	font-size: 19px;
	line-height: 1.3;
}

/* steps: three across, a lone last card spans the row, nested lists */
.mr-art__steps--3 { grid-template-columns: repeat(3, 1fr); }
.mr-art__steps:not(.mr-art__steps--3) > .mr-art__step:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mr-art__step ul { margin: 10px 0 0; padding: 0; padding-inline-start: 20px; }
.mr-art__step li { margin: 4px 0; font-size: 15.5px; line-height: 1.65; color: var(--mr-ink-soft); }
.mr-art__step li strong { color: var(--mr-ink-strong); }

/* checks: variants */
.mr-art__checks--3 { grid-template-columns: repeat(3, 1fr); }
.mr-art__checks--1 { grid-template-columns: 1fr; }
.mr-art__checks--x li::before { content: "\2715"; background: linear-gradient(145deg, #9a6a5a, #b4553f); font-size: 11px; }
.mr-art__checks--alert li::before { content: "!"; background: linear-gradient(145deg, #9a6a5a, #b4553f); font-weight: 700; }
.mr-art__checks--plain li { padding: 16px 18px; }
.mr-art__checks--plain li::before { content: none; }
.mr-art__tick { color: var(--mr-accent); font-weight: 700; margin-inline-end: 6px; }

/* compare: two panels side by side */
.mr-art__compare {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 30px !important;
}

.mr-art__compare-col {
	padding: 26px 24px 24px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .6);
	border: 1px solid rgba(255, 255, 255, .8);
	border-top: 4px solid var(--mr-accent-pale);
}

.mr-art__compare-col--good { border-top-color: var(--mr-accent); }
.mr-art__compare-col--bad { border-top-color: #b4553f; }
.mr-art__compare-col h2 { margin-top: 0 !important; font-size: clamp(21px, 1.8vw, 24px); }
.mr-art__compare-col h2::before { display: none; }
.mr-art__compare-col h3 { margin: 0 0 12px !important; font-size: 19px; }
.mr-art__compare-col p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.75; }
.mr-art__compare-col p:last-child { margin-bottom: 0; }
.mr-art__compare-col .mr-art__checks { margin-top: 0 !important; }
.mr-art__compare-col .mr-art__checks li { background: rgba(255, 255, 255, .5); }

.mr-art__badge {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0 0 14px !important;
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: 18px !important;
	line-height: 1 !important;
	color: #fdf7f0 !important;
}

.mr-art__badge--good { background: linear-gradient(145deg, #8a5c3d, var(--mr-accent)); }
.mr-art__badge--bad { background: linear-gradient(145deg, #9a6a5a, #b4553f); }

/* feature block extras */
.mr-art__feature a { color: var(--mr-gold); }
.mr-art__feature .mr-eyebrow { margin: 0 0 14px !important; color: var(--mr-gold); }
.mr-art__feature .mr-eyebrow::before { background: var(--mr-gold); }
.mr-art__feature .mr-eyebrow + h2 { margin-top: 0 !important; }

.mr-art__feature-quote {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp(22px, 2.2vw, 30px) !important;
	line-height: 1.4 !important;
	color: var(--mr-on-deep) !important;
}

.mr-art__feature-quote strong { font-weight: 400; }
.mr-art__feature > .mr-videotile { margin-top: 26px; }
.mr-art__feature .mr-slot { border-color: rgba(201, 162, 122, .6); background: rgba(255, 255, 255, .06); color: var(--mr-on-deep-dim) !important; }
.mr-art__feature .mr-slot strong { color: var(--mr-on-deep); }
.mr-art__feature .mr-slot em { color: var(--mr-on-deep-dim); }

.mr-art__slot--video {
	display: grid;
	place-items: center;
	aspect-ratio: 9 / 16;
	max-width: 300px;
	margin: 0 auto !important;
}

/* testimonial */
.mr-art__testi {
	position: relative;
	margin-top: 40px !important;
	padding: 30px 34px 26px 30px;
	border-radius: 18px;
	background: linear-gradient(135deg, #f3e7d9, #ede0cf);
}

.mr-art__testi::before {
	content: "\201D";
	position: absolute;
	inset-inline-start: 18px;
	top: -6px;
	font-size: 96px;
	line-height: 1;
	color: var(--mr-accent-mid);
	opacity: .55;
	font-family: Georgia, serif;
}

.mr-art__testi h3 { margin: 0 0 14px !important; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.4; }
.mr-art__testi p { margin: 0; font-size: 16.5px; line-height: 1.8; }
.mr-art__testi-by { margin-top: 14px !important; font-size: 14px !important; letter-spacing: .06em; font-weight: 600; color: var(--mr-accent-label) !important; }

/* product gallery */
.mr-art__gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 26px !important;
}

.mr-art__gallery figure { margin: 0; }

.mr-art__gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	box-sizing: border-box;
	padding: 10px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid rgba(214, 186, 156, .42);
}

.mr-art__gallery figcaption { margin-top: 10px; font-size: 14.5px; line-height: 1.5; text-align: center; color: var(--mr-ink-soft); }

/* two video tiles with captions */
.mr-art__duo {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 28px !important;
}

.mr-art__duo-item {
	padding: 14px 14px 20px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .6);
	border: 1px solid rgba(255, 255, 255, .8);
}

.mr-art__duo-item .mr-videotile { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.mr-art__duo-item .wp-block-embed__wrapper { border-radius: 12px; overflow: hidden; }
.mr-art__duo-item h3 { margin: 16px 0 6px !important; font-size: 18px; }
.mr-art__duo-item p { margin: 0; font-size: 15.5px; line-height: 1.7; }

/* sources */
.mr-art__sources {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 18px !important;
	padding: 0 !important;
	list-style: none;
}

.mr-art__sources li {
	padding: 12px 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(214, 186, 156, .35);
	font-size: 14.5px;
	line-height: 1.55;
}

.mr-art__sources a { color: var(--mr-accent); text-decoration: none; border-bottom: 1px solid var(--mr-accent-pale); }

/* wide standalone video, banner and figure variants */
.mr-art .mr-videotile--art { margin-top: 26px !important; }
.mr-art__banner--169 img { aspect-ratio: 16 / 9; }
.mr-art__figure { margin-top: 26px !important; }
.mr-art__figure img { display: block; width: min(560px, 100%); margin-inline: auto; border-radius: 18px; }

/* lead form inside the closing panel */
.mr-art__form {
	margin-top: 24px !important;
	padding: clamp(22px, 3vw, 34px);
	border-radius: 22px;
	text-align: start;
	background: var(--mr-glass-strong);
	border: 1px solid rgba(255, 255, 255, .85);
	box-shadow: 0 34px 62px -40px rgba(58, 45, 36, .9);
}

.mr-art__close .mr-eyebrow { margin: 0 0 14px !important; justify-content: center; }
.mr-art__close .mr-eyebrow + h2 { margin-top: 0 !important; }
.mr-art__close .mr-textlink { margin-top: 18px !important; }

/* byline box at the top of an article */
.mr-art__author--top { margin-top: 24px !important; padding: 16px 20px; }
.mr-art__author--top .mr-art__author-mark { width: 48px; height: 48px; font-size: 16px !important; }

/* responsive */
@media (max-width: 1024px) {
	.mr-art__cards--2, .mr-art__cards--4 { grid-template-columns: repeat(2, 1fr); }
	.mr-art__steps--3 { grid-template-columns: repeat(2, 1fr); }
	.mr-art__checks--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	.mr-art__cards--2, .mr-art__cards--4, .mr-art__steps--3, .mr-art__checks--3,
	.mr-art__compare, .mr-art__duo, .mr-art__sources { grid-template-columns: 1fr; }
	.mr-art__gallery { grid-template-columns: repeat(2, 1fr); }
	.mr-art__steps > .mr-art__step:last-child:nth-child(odd) { grid-column: auto; }
	.mr-art__testi { padding: 26px 22px 22px; }
}

/* ==========================================================================
   YouTube facade — poster frame + play button until the visitor clicks
   ========================================================================== */

/* The facade stands exactly where the iframe stood, so every rule the theme
   has for `iframe` inside embeds is mirrored here for `.mr-yt`. */
.mr-yt {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background: #111;
	overflow: hidden;
	cursor: pointer;
}

.wp-embed-responsive .wp-has-aspect-ratio .mr-yt {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

.mr-yt img,
.mr-yt iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

.mr-yt img {
	object-fit: cover;
	transition: transform .5s ease;
}

.mr-yt:hover img { transform: scale(1.04); }

.mr-yt__play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.mr-yt__play svg {
	width: 68px;
	height: 48px;
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45));
}

.mr-yt__bg { fill: rgba(33, 33, 33, .8); transition: fill .2s ease; }

.mr-yt:hover .mr-yt__bg,
.mr-yt__play:focus-visible .mr-yt__bg { fill: #f00; }

.mr-yt__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* Portrait tiles fill the card's width (see .mr-media-portrait iframe); the
   facade follows the same box, so the poster and the player are the same size
   and nothing shifts when the clip is clicked. */
.wp-embed-responsive .mr-media-portrait .wp-has-aspect-ratio .mr-yt,
.mr-media-portrait .mr-yt {
	position: relative;
	inset: auto;
	height: 100%;
	width: 100%;
	aspect-ratio: auto;
	margin-inline: auto;
	border-radius: 12px;
}

/* ------------------------------------------------------------------ */
/* 20. Instagram grid ([mr_instagram], mu-plugins/mr-instagram.php) and  */
/*     consent-gated embeds (.mr-embed, mu-plugins/mr-consent.php)       */
/* ------------------------------------------------------------------ */
.mr-ig { margin: 40px 0; }
.mr-ig__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.mr-ig__title { margin: 0; font-size: 26px; }
.mr-ig__handle { color: var(--mr-accent); text-decoration: none; font-weight: 600; }
.mr-ig__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mr-ig__item { position: relative; margin: 0; }
.mr-ig__item a { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; background: var(--mr-panel, #f3ede6); }
.mr-ig__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.mr-ig__item a:hover img, .mr-ig__item a:focus-visible img { transform: scale(1.04); }
.mr-ig__item a:focus-visible { outline: 3px solid var(--mr-accent-mid); outline-offset: 2px; }
.mr-ig__badge { position: absolute; top: 10px; inset-inline-end: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(43,33,26,.75); color: #fff; font-size: 12px; display: grid; place-items: center; }
.mr-ig__cta { margin: 20px 0 0; text-align: center; }
@media (min-width: 700px) { .mr-ig__grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } .mr-ig__item a { border-radius: 18px; } }

.mr-embed { position: relative; min-height: 220px; border-radius: 18px; overflow: hidden; background: var(--mr-panel, #f3ede6); }
.mr-embed__ph { display: grid; place-items: center; gap: 14px; padding: 28px 22px; text-align: center; min-height: 220px; color: var(--mr-muted-2); font-size: 15px; line-height: 1.55; }
.mr-embed__ph p { margin: 0; max-width: 34em; }
.mr-embed__btn { font: inherit; cursor: pointer; border-radius: 999px; padding: 11px 20px; border: 1px solid var(--mr-espresso); background: var(--mr-espresso); color: var(--mr-cream); font-weight: 600; }
.mr-embed__btn:focus-visible { outline: 3px solid var(--mr-accent-mid); outline-offset: 2px; }
.mr-embed--loaded { background: transparent; }

/* Keyboard focus: one visible ring everywhere (WCAG 2.4.7). Browsers keep their
   default ring too; this makes it consistent on the cream backgrounds. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--mr-accent-mid, #a3785a);
	outline-offset: 2px;
}

/* ==========================================================================
   Mobile navigation — the rules that lived in the database (Site Editor →
   Styles → CSS, "Moti Ronel — mobile nav fix") until 22/09/2026, moved here
   verbatim so the mobile menu is versioned with the theme (QA M-02). The one
   impossible selector (body.admin-bar html…) was dropped; the backdrop-filter
   reset is kept even though B-01 made it redundant — zero visual change.
   ---------------------------------------------------------------------- */

/* Root cause: .mr-header backdrop-filter creates a containing block, so the
   WP navigation overlay (position:fixed) is trapped inside the ~84px header.
*/

/* When overlay is open, remove containing-block creators from header */
html.has-modal-open .mr-header,
html.has-modal-open .mr-header__inner {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
  perspective: none !important;
  contain: none !important;
  will-change: auto !important;
}

/* Full-viewport overlay + leftmost hamburger */
@media (max-width: 1024px) {
  .mr-nav .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    background: var(--mr-cream, #f9f4ee) !important;
    z-index: 100000 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 84px 22px 110px !important;
    direction: rtl;
    display: flex !important;
    flex-direction: column !important;
  }

  .mr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
  .mr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
  .mr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  .mr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 4px !important;
  }

  .mr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100% !important;
  }

  .mr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 8px 0 !important;
    margin: 0 !important;
  }

  .mr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: block !important;
    font-size: 20px !important;
    padding: 12px 0 !important;
    color: var(--mr-espresso, #31271f) !important;
    border-radius: 0 !important;
  }

  .mr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 16.5px !important;
    padding: 8px 0 !important;
    padding-inline-start: 14px !important;
    color: var(--mr-muted, #5c534d) !important;
  }

  /* Header: brand RIGHT, CTA then hamburger at physical LEFT edge */
  .mr-header__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .mr-brand {
    order: 1 !important;
    margin-inline-end: auto !important;
  }
  .mr-header__actions {
    order: 2 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
  .mr-nav {
    order: 3 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
  .mr-nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }
}

/* Pause/play button on auto-playing clips (added by theme.js). */
.mr-motion { position: relative; }

.mr-motion__toggle {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 50%;
	background: rgba(34, 27, 22, .42);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.mr-motion__toggle svg { width: 16px; height: 16px; fill: currentColor; }
.mr-motion__toggle:hover { background: rgba(34, 27, 22, .7); }
.mr-motion__toggle:active { transform: scale(.94); }
.mr-motion__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--mr-espresso); }