/*
Theme Name: MODERONIX
Version: 1.0.7
Requires at least: 7.1
Requires PHP: 8.3
Text Domain: moderonix
*/

/* Colors live in theme.json (editable in Styles). Other concepts: ~/projects/design-concepts/moderonix-2026-10. */

/* ===== «Бенто» — вся сторінка як мозаїка плиток (bento grid). ===== */
.mx-tile {
	background: var(--wp--preset--color--surface); border: 1px solid var(--mx-line);
	padding: clamp(1.2rem, 2vw, 1.8rem); display: flex; flex-direction: column; justify-content: center;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.mx-hero--bento .mx-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(140px, auto); gap: 14px; }
.mx-hero--bento .mx-bento > * { margin-block: 0; } /* flow layout adds a top margin to every tile but the first, pushing the right column down */
.mx-tile--main { grid-column: span 2; grid-row: span 2; }
.mx-tile--photo { padding: 0; position: relative; }
.mx-tile--photo figure, .mx-tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.mx-hero--bento .mx-tile--wide { grid-column: span 2; }
.mx-tile p { margin: 0; }
.mx-tile--stat strong { font-family: var(--mx-display); font-weight: 800; font-size: clamp(2.2rem, 3.4vw, 3.2rem); line-height: 1; color: var(--mx-heading); }
.mx-tile--stat span { color: var(--mx-muted); font-size: .92rem; margin-top: .4rem; }
/* Texture: fine grain on the text tiles, the figures on a dark plate with lines parallel to the 45° corner cut. */
.mx-tile--main, .mx-tile--stat { position: relative; isolation: isolate; }
.mx-tile--main::before, .mx-tile--stat::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Offer tile: the statement (label, heading, lead, three plaques) on top, actions and the business button at the bottom;
   spare height goes between, with the MODERONIX mark faint in it. */
.mx-tile--main .mx-label { margin-bottom: .9rem; }
.mx-tile--main::after {
	content: ""; position: absolute; right: -6%; bottom: 17%; width: 48%; aspect-ratio: 51 / 24; z-index: -1; pointer-events: none; opacity: .06;
	background: var(--wp--preset--color--accent); mask: url(assets/img/symbol.svg) center / contain no-repeat;
}
@media (max-width: 1000px) { .mx-tile--main::after { display: none; } } /* the tile hugs its text here: no spare room for the mark */
.mx-badges { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: clamp(1.2rem, 3svh, 1.8rem) 0 auto !important; }
.mx-badges li {
	padding: .7rem .8rem .75rem; border: 1px solid var(--mx-line); border-top: 2px solid var(--wp--preset--color--accent);
	background: color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent); font-size: .8rem; line-height: 1.35; color: var(--mx-muted);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.mx-badges strong { display: block; margin-bottom: .15rem; color: var(--mx-ink); font: 700 .9rem var(--wp--preset--font-family--display); }
.mx-tile__foot { margin-top: clamp(1rem, 2.5svh, 1.6rem) !important; }
/* Quiet button: visible as a button, but below the two main calls to action */
.mx-skin .mx-btn-quiet, .mx-skin .mx-btn-quiet .wp-block-button__link { width: 100%; }
.mx-skin .mx-btn-quiet .wp-block-button__link {
	justify-content: space-between; padding: .75rem 1rem; white-space: normal; font-size: .85rem;
	background-color: var(--wp--preset--color--surface-2); border-color: var(--wp--preset--color--surface-2); color: var(--mx-ink);
}
.mx-skin .wp-block-button.mx-btn-quiet .wp-block-button__link::after { color: var(--wp--preset--color--accent); }
.mx-skin .wp-block-button.mx-btn-quiet .wp-block-button__link:hover::after { color: #fff; }
.mx-tile--stat { background: var(--wp--preset--color--dark); border-color: var(--wp--preset--color--dark); }
.mx-tile--stat strong { color: var(--wp--preset--color--on-dark); font-variant-numeric: tabular-nums; }
.mx-tile--stat span { color: color-mix(in srgb, var(--wp--preset--color--on-dark) 68%, transparent); }
.mx-tile--stat::before { opacity: .16; mix-blend-mode: screen; }
.mx-tile--stat::after {
	content: ""; position: absolute; right: 0; bottom: 0; width: 60%; height: 50%; z-index: -1; pointer-events: none;
	background: repeating-linear-gradient(-45deg, var(--wp--preset--color--accent) 0 1px, transparent 1px 13px);
	mask: linear-gradient(-45deg, #000, transparent 70%);
}
.mx-hero--bento .mx-next { margin: 1.2rem 0 0; }
.mx-skin--bento :is(.mx-card, .mx-review, .mx-base__photo, .mx-dir) {
	background: var(--wp--preset--color--surface); border: 1px solid var(--mx-line);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
/* Perks and steps are ruled columns, not more boxes: the page already has plenty of tiles. */
.mx-skin--bento :is(.mx-perk, .mx-step) { border-top: 1px solid var(--mx-ink); padding-top: 1.2rem; }
.mx-skin--bento .mx-base__photo > * { margin: 0 1.1rem !important; }
.mx-skin--bento .mx-base__photo .wp-block-image { margin: 0 0 1rem !important; }
.mx-skin--bento .mx-base__photo h3 { margin-bottom: .35rem !important; }
.mx-skin--bento .mx-base__photo { padding-bottom: 1.2rem; }
.mx-skin--bento .mx-cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mx-skin--bento .mx-cards .mx-card:first-child { grid-column: 1 / -1; }
/* The lead product runs the full width: photo left, facts right; the other two sit side by side below. */
@media (min-width: 782px) {
	.mx-skin--bento .mx-cards .mx-card:first-child {
		grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: repeat(4, auto) 1fr; padding: 0;
	}
	.mx-skin--bento .mx-cards .mx-card:first-child > .wp-block-image { grid-column: 1; grid-row: 1 / span 5; margin: 0 !important; position: relative; min-height: 440px; }
	.mx-skin--bento .mx-cards .mx-card:first-child > .wp-block-image img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
	.mx-skin--bento .mx-cards .mx-card:first-child > :not(.wp-block-image) { grid-column: 2; margin-inline: clamp(1.4rem, 3vw, 2.6rem) !important; }
	.mx-skin--bento .mx-cards .mx-card:first-child > h3 { margin-top: clamp(1.4rem, 3vw, 2.6rem); font-size: clamp(1.5rem, 2.2vw, 2rem); }
	.mx-skin--bento .mx-cards .mx-card:first-child > .wp-block-buttons { align-self: end; margin-bottom: clamp(1.4rem, 3vw, 2.6rem); }
}
:is(.mx-card, .mx-base__photo) .mx-cut img { clip-path: none; } /* the card already carries the corner cut; two chevrons read as a glitch */
/* Desktop: the mosaic fills the first screen instead of floating in it. */
@media (min-width: 1001px) {
	.mx-hero--bento .mx-bento { flex: 1 1 auto; grid-auto-rows: minmax(140px, 1fr); }
}

/* ---------- Base ---------- */
.mx-skin {
	--mx-ink: var(--wp--preset--color--contrast);
	--mx-muted: var(--wp--preset--color--muted);
	--mx-line: var(--wp--preset--color--line);
	--mx-accent: var(--wp--preset--color--accent);
	--mx-accent-text: var(--wp--preset--color--accent-soft);
	--mx-ease: cubic-bezier(.16, 1, .3, 1);
	--mx-display: var(--wp--preset--font-family--display);
	--mx-display-weight: 800;
	--mx-display-track: -.03em;
	--mx-h1: clamp(2.1rem, min(4.2vw, 7svh), 3.6rem);
	--mx-btn-bg: var(--wp--preset--color--contrast);
	--mx-btn-ink: #fff;
	--mx-heading: var(--wp--preset--color--contrast);
	--mx-logo-word: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	color: var(--mx-ink);
	min-height: 100vh;
	overflow-x: clip;
}
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { -webkit-font-smoothing: antialiased; }
.wp-site-blocks > *, .mx-skin > * { margin-block: 0 !important; } /* WP flow layout adds a 16px gap between header, main and footer */
img { display: block; }
::selection { background: var(--wp--preset--color--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

.mx-skin h1, .mx-skin h2 {
	font-family: var(--mx-display); font-weight: var(--mx-display-weight);
	letter-spacing: var(--mx-display-track); text-transform: uppercase; color: var(--mx-heading);
}
.mx-skin h1 { font-size: var(--mx-h1); line-height: .95; margin: 0 0 1.2rem; }
.mx-skin h2 { font-size: clamp(2rem, 3.8vw, 3.3rem); line-height: 1; margin: .4rem 0 0; }
.mx-skin h3 { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.015em; line-height: 1.2; color: var(--mx-ink); text-transform: none; }

.mx-label { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mx-accent-text); margin: 0; }
.mx-lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--mx-ink); max-width: 34em; margin: 0; }
.mx-sub { color: var(--mx-muted); max-width: 40em; margin: .9rem 0 0; }
.mx-more { margin: 0; font-weight: 600; font-size: .95rem; }
.mx-more a { color: var(--mx-ink); text-decoration: none; border-bottom: 1px solid var(--mx-line); padding-bottom: .15em; }
.mx-more a::after { content: " →"; color: var(--mx-accent-text); }
.mx-more a:hover { border-color: var(--mx-ink); }

/* Buttons: WP buttons and the calculator's own links share one look */
.mx-skin .wp-block-button__link, .mx-btn {
	display: inline-flex; align-items: center; gap: .8em; border-radius: 0;
	background: var(--mx-btn-bg); color: var(--mx-btn-ink); border: 1px solid var(--mx-btn-bg);
	padding: .95rem 1.4rem; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .95rem;
	letter-spacing: 0; text-transform: none; text-decoration: none; transition: background .25s, color .25s, border-color .25s;
}
.mx-skin .wp-block-button:not(.is-style-outline) .wp-block-button__link::after, .mx-btn:not(.mx-btn--ghost)::after { content: "→"; color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, #fff); transition: translate .3s var(--mx-ease); }
.mx-skin .wp-block-button__link:hover::after, .mx-btn:hover::after { translate: .25em 0; }
.mx-skin .wp-block-button__link:hover, .mx-btn:hover { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: #fff; }
.mx-skin .is-style-outline .wp-block-button__link, .mx-btn--ghost { background: transparent; color: var(--mx-ink); border-color: var(--mx-ink); }
.mx-skin .is-style-outline .wp-block-button__link:hover, .mx-btn--ghost:hover { background: var(--mx-ink); color: var(--wp--preset--color--base); border-color: var(--mx-ink); }

/* Signature: the X mark and its 45° cuts */
.mx-cut img { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }

/* ---------- Header ---------- */
.mx-header {
	position: sticky; top: 0; z-index: 100; isolation: isolate;
	background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	border-bottom: 1px solid var(--mx-line);
}
/* Blur lives on a pseudo-element: a backdrop-filter on the header itself would trap the fixed mobile menu inside it. */
.mx-header::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mx-header__inner { min-height: 72px; gap: 1.5rem; }
.mx-logo-link { display: block; line-height: 0; }
.mx-logo { height: 24px; width: auto; }
.mx-logo__mark { fill: var(--wp--preset--color--accent); }
.mx-logo__word { fill: var(--mx-logo-word); }
.mx-nav { font-family: var(--wp--preset--font-family--display) !important; font-size: .9rem !important; font-weight: 500; text-transform: none !important; letter-spacing: 0 !important; gap: 1.6rem !important; }
.mx-nav a { color: var(--mx-ink); text-decoration: none; }
.mx-nav a:hover { color: var(--mx-accent-text); }
.mx-header__actions { gap: 1rem !important; }
.mx-header .wp-block-button__link { padding: .7rem 1.1rem; font-size: .88rem; white-space: nowrap; }
.mx-contact-icons { display: flex; align-items: center; gap: .5rem; }
.mx-phone { color: var(--mx-ink); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; margin-right: .3rem; }
.mx-ico { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--mx-line); color: var(--mx-ink); }
.mx-ico svg { width: 17px; height: 17px; }
.mx-ico:hover { color: var(--wp--preset--color--accent); border-color: currentColor; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base) !important; color: var(--mx-ink) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.5rem; font-weight: 600; }
.wp-block-navigation__responsive-container.is-menu-open { padding: 5.5rem 1.5rem 2rem !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.3rem !important; }
.wp-block-navigation__responsive-container-close { top: 1.1rem !important; right: 1rem !important; }
@media (max-width: 1400px) { .mx-phone { display: none; } }
/* Not enough room for the full menu: collapse it into the burger (WP only does this below 600px). */
@media (min-width: 600px) and (max-width: 1180px) {
	.mx-nav .wp-block-navigation__responsive-container-open { display: flex !important; }
	.mx-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}
.mx-nav .wp-block-navigation__responsive-container-open { color: var(--mx-ink); }
.mx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.2rem; }

/* ---------- Sections ---------- */
.mx-section { padding-block: clamp(3.5rem, 7vw, 6rem) !important; }
.mx-head { margin-bottom: clamp(2rem, 4vw, 3rem) !important; }
.mx-skin .mx-section:nth-of-type(even) { background: var(--wp--preset--color--surface-2); }

/* Hero (shared) */
/* First screen = the visible area under the header (73px incl. border), capped so tall screens get no empty tiles. */
.mx-hero { position: relative; box-sizing: border-box; min-height: min(calc(100svh - 73px), 940px); display: flex !important; flex-direction: column; justify-content: center; padding-block: clamp(1.5rem, 4svh, 3.5rem) !important; }
.mx-hero > * { width: 100%; }
.mx-hero .wp-block-buttons { margin: clamp(1rem, 3svh, 1.8rem) 0 0; gap: .8rem; }
.mx-hero .wp-block-button__link { white-space: nowrap; }
.mx-next { list-style: none; counter-reset: mx-next; display: flex; flex-direction: column; gap: .55rem; padding: 0; margin: clamp(1rem, 3svh, 2rem) 0 clamp(.8rem, 2svh, 1.4rem); font-size: .92rem; color: var(--mx-ink); }
.mx-next li { counter-increment: mx-next; display: flex; align-items: center; gap: .55rem; }
.mx-next li::before {
	content: counter(mx-next); display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); background: var(--wp--preset--color--accent); color: #fff; font-weight: 700; font-size: .8rem; flex: none;
}


/* Products */
.mx-cards { gap: 14px !important; }
.mx-card { display: flex; flex-direction: column; padding-bottom: 1.6rem; }
.mx-card > * { margin-inline: 1.4rem !important; }
.mx-card > .wp-block-image { margin: 0 0 1.3rem !important; }
.mx-card .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mx-card h3 { margin-block: 0 .5rem; }
.mx-card > p:not(.mx-note) { color: var(--mx-muted); margin-block: 0 1rem; }
.mx-card .wp-block-buttons { margin-top: auto; padding-top: 1rem; }
.mx-card .wp-block-button, .mx-card .wp-block-button__link { width: 100%; justify-content: space-between; }
.mx-ticks { list-style: none; padding: 0; margin: 0 0 1rem; }
.mx-ticks li { position: relative; padding: .35rem 0 .35rem 1.6rem; border-top: 1px solid var(--mx-line); font-size: .95rem; }
.mx-ticks li::before { content: ""; position: absolute; left: 0; top: .85rem; width: .8rem; height: .4rem; border-left: 2px solid var(--wp--preset--color--accent); border-bottom: 2px solid var(--wp--preset--color--accent); rotate: -45deg; }
.mx-note { margin-block: 0 .2rem; font-size: .88rem; }
.mx-note a { color: var(--mx-accent-text); }

/* Calculator */
.mx-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border: 1px solid var(--mx-line); background: var(--wp--preset--color--base); }
.mx-calc__form { padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; gap: 1.6rem; align-content: start; border-right: 1px solid var(--mx-line); }
.mx-calc__result { padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; gap: .6rem; align-content: start; background: var(--wp--preset--color--surface); }
.mx-calc__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--mx-ink); }
.mx-calc__tabs button { padding: .85rem .5rem; background: transparent; border: 0; border-right: 1px solid var(--mx-ink); color: var(--mx-ink); font: 600 .95rem var(--wp--preset--font-family--display); cursor: pointer; }
.mx-calc__tabs button:last-child { border-right: 0; }
.mx-calc__tabs button[aria-pressed="true"] { background: var(--mx-ink); color: var(--wp--preset--color--base); }
.mx-calc__group { display: grid; gap: .7rem; }
.mx-calc__label { display: grid; gap: .45rem; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mx-muted); }
.mx-calc__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.mx-calc__chips button { padding: .55rem .9rem; border: 1px solid var(--mx-line); background: transparent; color: var(--mx-ink); font: 600 .95rem var(--wp--preset--font-family--display); cursor: pointer; }
.mx-calc__chips button[aria-pressed="true"] { border-color: var(--mx-accent-text); color: var(--mx-accent-text); box-shadow: inset 0 0 0 1px var(--mx-accent-text); }
.mx-calc__dims { display: flex; align-items: end; gap: .7rem; }
.mx-calc__dims label { display: grid; gap: .3rem; font-size: .8rem; color: var(--mx-muted); flex: 1; min-width: 0; }
.mx-calc input[type="number"] { width: 100%; min-width: 0; box-sizing: border-box; padding: .6rem .7rem; border: 1px solid var(--mx-line); background: var(--wp--preset--color--base); color: var(--mx-ink); font: 600 1rem var(--wp--preset--font-family--display); text-transform: none; letter-spacing: 0; }
.mx-calc__check { display: flex; gap: .6rem; align-items: center; font-size: .97rem; cursor: pointer; }
.mx-calc [hidden] { display: none !important; }
.mx-calc__check input { width: 1.1rem; height: 1.1rem; accent-color: var(--wp--preset--color--accent); }
/* Height-capped so the price and buttons stay on screen on wide, short displays; width follows the 400×260 viewBox. */
.mx-calc__drawing { width: min(100%, calc(22vh * 400 / 260)); aspect-ratio: 400 / 260; height: auto; justify-self: center; background: var(--wp--preset--color--base); border: 1px solid var(--mx-line); color: var(--mx-ink); }
.mx-calc__summary { margin: 0; color: var(--mx-muted); font-size: .95rem; }
.mx-calc__price { margin: 0; display: grid; }
.mx-calc__price span { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mx-muted); }
.mx-calc__price strong { font-family: var(--mx-display); font-weight: var(--mx-display-weight); font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: var(--mx-display-track); line-height: 1.1; color: var(--mx-heading); }
.mx-calc__hint { margin: 0; color: var(--mx-muted); font-size: .88rem; }
.mx-calc__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .4rem; }
.mx-calc__demo { margin: 0; font-size: .75rem; color: var(--mx-muted); opacity: .8; }

/* Objects (cases) */
.mx-objects .wp-block-post-template { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); list-style: none; padding: 0; }
.mx-objects .wp-block-post-template > li { margin: 0; }
.mx-case > * { margin: 0 !important; }
.mx-case .wp-block-post-featured-image { margin-bottom: .9rem !important; overflow: hidden; }
.mx-case .wp-block-post-featured-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); transition: scale .8s var(--mx-ease); }
.mx-case:hover .wp-block-post-featured-image img { scale: 1.04; }
.mx-case .wp-block-post-title { font-size: 1.1rem; margin: .25rem 0 !important; }
.mx-case .wp-block-post-title a { color: var(--mx-ink); text-decoration: none; }
.mx-case .mx-label:last-child { color: var(--mx-muted); }
.mx-objects > .wp-block-buttons { margin-top: 2rem !important; gap: .8rem; }
.mx-case .mx-label:empty, .mx-case-hero .mx-label:empty { display: none; } /* city not filled yet */
.mx-back { margin: 0 0 .9rem; font-size: .85rem; font-weight: 600; }
.mx-back a { color: var(--mx-muted); text-decoration: none; }
.mx-back a:hover { color: var(--mx-accent-text); }
/* Call to action under the works archive and a single work */
.mx-case-cta {
	margin-top: clamp(3rem, 6vw, 5rem) !important; padding: clamp(1.4rem, 3vw, 2.4rem); gap: 1.4rem 2rem;
	background: var(--wp--preset--color--dark); color: var(--wp--preset--color--on-dark);
	--mx-ink: var(--wp--preset--color--on-dark); --mx-heading: var(--wp--preset--color--on-dark);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.post-type-archive-case .mx-case-cta .is-style-outline { display: none; }
.mx-case-nav { margin-top: clamp(2rem, 4vw, 3rem) !important; padding-top: 1.2rem; border-top: 1px solid var(--mx-line); gap: 1rem 2rem; font-weight: 600; }
.mx-case-nav a { color: var(--mx-ink); text-decoration: none; }
.mx-case-nav a:hover { color: var(--mx-accent-text); }
.mx-case-cta h2 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.mx-case-cta .mx-sub { margin: 0; color: color-mix(in srgb, var(--wp--preset--color--on-dark) 78%, transparent); }
.mx-case-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.mx-case-cta .wp-block-button__link::after { color: #fff !important; }
/* Single case: title, short text, one gallery (lightbox pages through it); the first photo is the cover. */
.mx-case-hero h1 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); text-transform: none; letter-spacing: -.02em; margin: .6rem 0 1rem; }
.mx-case-hero .mx-lead { margin-block: 0 1.8rem; }
.mx-gallery { gap: 14px !important; }
.mx-gallery.wp-block-gallery.has-nested-images figure.wp-block-image { flex-grow: 0; } /* last row keeps the grid size */
.mx-gallery.wp-block-gallery.has-nested-images figure.wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; }
/* :not(#individual-image) matches the weight of core's own width rule. */
/* .columns-default + :nth-child(1) outweigh core rule for two-photo galleries (first-child:nth-last-child(2) = 50%). */
.mx-gallery.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:first-child:nth-last-child(2):not(#individual-image) ~ figure.wp-block-image:not(#individual-image) img { aspect-ratio: auto; flex: none; height: min(78svh, 760px, 125vw); }
.mx-gallery.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:first-child:nth-last-child(2):not(#individual-image) ~ figure.wp-block-image:not(#individual-image) { width: 100%; } /* two photos: both full width, no half-empty row */
.mx-gallery.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:first-child:nth-child(1):not(#individual-image) { width: 100%; }
.mx-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:first-child:not(#individual-image) img { aspect-ratio: auto; flex: none; height: min(78svh, 760px, 125vw); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }

/* Production base */
.mx-base__photos { gap: 14px !important; }
.mx-base__photo > * { margin: 0 !important; }
.mx-base__photo .wp-block-image { margin-bottom: 1.1rem !important; }
.mx-base__photo .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mx-base__photo h3 { margin-bottom: .4rem !important; font-size: 1.15rem; }
.mx-base__photo p { color: var(--mx-muted); font-size: .95rem; }
.mx-perks { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; }
.mx-perk { margin: 0 !important; }
.mx-perk > * { margin: 0 !important; }
.mx-perk h3 { font-size: 1.08rem; margin-bottom: .45rem !important; }
.mx-perk p { color: var(--mx-muted); font-size: .95rem; }

/* Reviews */
.mx-reviews__grid { gap: 14px !important; }
.mx-review { padding: 1.7rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1.3rem; }
.mx-review__text { margin: 0 !important; font-size: 1.02rem; line-height: 1.55; }
@media (min-width: 782px) { .mx-review:first-child { flex-grow: 1.5 !important; } .mx-review:first-child .mx-review__text { font-size: 1.22rem; line-height: 1.5; } }
.mx-review__who { margin-top: auto !important; gap: .9rem !important; align-items: center !important; }
.mx-review__who > * { margin: 0 !important; }
.mx-review__avatar { display: grid; place-items: center; flex: none; width: 52px; height: 52px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--wp--preset--color--surface)); color: var(--mx-accent-text); font: 700 1.25rem var(--wp--preset--font-family--display); }
.mx-review__avatar img { width: 52px; height: 52px; object-fit: cover; } /* if a real photo replaces the initials */
.mx-review__name { font-weight: 700; font-size: .98rem; }
.mx-review__who .mx-label { color: var(--mx-muted); letter-spacing: .06em; }

/* Business directions */
.mx-dirs { gap: 14px !important; }
/* Four directions: one row on wide screens, two by two on laptops and tablets (core keeps columns in one row from 782px). */
@media (min-width: 782px) and (max-width: 1199px) {
	.wp-block-columns.mx-dirs { flex-wrap: wrap !important; }
	.wp-block-columns.mx-dirs > .wp-block-column.mx-dir { flex: 0 0 calc(50% - 7px); }
}
.mx-dir { padding: 1.8rem 1.6rem; display: flex; flex-direction: column; }
.mx-dir > * { margin: 0 !important; }
.mx-dir > .wp-block-image { margin: -1.8rem -1.6rem 1.3rem !important; overflow: hidden; }
.mx-dir .wp-block-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: scale 1s var(--mx-ease); }
.mx-dir:hover .wp-block-image img { scale: 1.05; }
.mx-dir h3 { margin: .5rem 0 .7rem !important; }
.mx-dir > p:not(.mx-label):not(.mx-need) { color: var(--mx-muted); }
.mx-need { margin-top: 1.2rem !important; padding-top: 1rem; border-top: 1px dashed var(--mx-line); font-size: .92rem; }
.mx-dir .wp-block-buttons { margin-top: auto !important; padding-top: 1.4rem; }

/* Process */
.mx-steps { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); }
.mx-step { margin: 0 !important; }
.mx-step > * { margin: 0 !important; }
.mx-step__num { font-family: var(--mx-display); font-weight: var(--mx-display-weight); font-size: 2.6rem; line-height: 1; color: var(--mx-accent-text); margin-bottom: 1rem !important; }
.mx-step h3 { margin-bottom: .5rem !important; }
.mx-step p:not(.mx-step__num) { color: var(--mx-muted); }
.mx-who { margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; border-top: 2px solid var(--mx-ink); padding-top: clamp(1.4rem, 3vw, 2rem); display: grid !important; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; }
.mx-who > * { margin: 0 !important; }
.mx-who p { color: var(--mx-muted); }

/* Business: the one dark band mid-page (light, dark, light again before the form) */
.mx-skin .mx-section.mx-business { background: var(--wp--preset--color--dark); } /* outranks the even-section tint */
.mx-business, .mx-footer {
	color: var(--wp--preset--color--on-dark);
	--mx-ink: var(--wp--preset--color--on-dark); --mx-line: color-mix(in srgb, var(--wp--preset--color--on-dark) 18%, transparent);
	--mx-muted: color-mix(in srgb, var(--wp--preset--color--on-dark) 65%, transparent); --mx-accent-text: color-mix(in srgb, var(--wp--preset--color--accent) 45%, #fff);
	--mx-heading: var(--wp--preset--color--on-dark); --mx-logo-word: var(--wp--preset--color--on-dark);
}
.mx-skin--bento .mx-business .mx-dir { background: color-mix(in srgb, var(--wp--preset--color--on-dark) 5%, transparent); border-color: var(--mx-line); }
.mx-business .is-style-outline .wp-block-button__link:hover { color: var(--wp--preset--color--dark); }

/* Quote form */
.mx-quote .wp-block-columns { gap: clamp(1.5rem, 4vw, 4rem) !important; }
.mx-quote .mx-ticks { margin-top: 1.4rem; }
.mx-quote .mx-more { margin-top: 1.2rem; }
.mx-form-card { background: var(--wp--preset--color--base); border: 1px solid var(--mx-line); padding: clamp(1.2rem, 2.2vw, 1.8rem) !important; }
.mx-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.mx-form p { margin: 0; }
.mx-field { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mx-muted); align-content: start; }
.mx-field .wpcf7-form-control-wrap, .mx-file__hint { display: block; margin-top: .35rem; } /* label text and its * stay on one line */
.mx-field--full, .mx-consent, .mx-form > p:last-child { grid-column: 1 / -1; }
.mx-form input:not([type="submit"]):not([type="file"]):not([type="radio"]), .mx-form select, .mx-form textarea {
	width: 100%; box-sizing: border-box; background: var(--wp--preset--color--base); color: var(--mx-ink);
	border: 1px solid var(--mx-line); border-radius: 0; padding: .65rem .8rem;
	font: 500 .95rem var(--wp--preset--font-family--display); text-transform: none; letter-spacing: 0;
}
.mx-form textarea { min-height: 4.4rem; resize: vertical; }
.mx-form :is(input, select, textarea):focus { outline: 2px solid color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent); outline-offset: 0; border-color: var(--wp--preset--color--accent); }
.mx-req { color: var(--wp--preset--color--accent); }
.mx-form .wpcf7-radio { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; padding-top: .45rem; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .95rem; color: var(--mx-ink); }
.mx-form .wpcf7-list-item { margin: 0; }
.mx-form input[type="radio"] { accent-color: var(--wp--preset--color--accent); }
/* File: the native control (English "Choose File") is visually hidden but stays focusable; the label is the drop zone. */
.mx-file { position: relative; cursor: pointer; }
.mx-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.mx-file__zone { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border: 1px dashed var(--mx-ink); background: var(--wp--preset--color--base); color: var(--mx-ink); font: 600 .92rem var(--wp--preset--font-family--display); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; transition: border-color .2s, color .2s; }
.mx-file__zone::before { content: "+"; display: grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; background: var(--wp--preset--color--accent); color: #fff; font-size: 1.1rem; line-height: 1; }
.mx-file:hover .mx-file__zone, .mx-file:focus-within .mx-file__zone { border-color: var(--wp--preset--color--accent); color: var(--mx-accent-text); }
.mx-file:focus-within .mx-file__zone { outline: 2px solid color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent); }
.mx-file.has-file .mx-file__zone::before { content: "✓"; font-size: .85rem; }
.mx-file__hint { font-size: .78rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mx-muted); }
.mx-consent { font-size: .8rem; color: var(--mx-muted); margin: 0; }
.wpcf7-submit { width: 100%; cursor: pointer; text-align: center; padding: .9rem 1.4rem; background: var(--mx-btn-bg); color: var(--mx-btn-ink); border: 0; font: 600 1rem var(--wp--preset--font-family--display); transition: background .25s; }
.wpcf7-submit:hover { background: var(--wp--preset--color--accent); color: #fff; }
.wpcf7-not-valid-tip { font-size: .8rem; text-transform: none; letter-spacing: 0; color: #c0263a; }
.wpcf7 form .wpcf7-response-output { margin: 1.2rem 0 0; padding: .8rem 1rem; border: 1px solid var(--mx-line); font-size: .9rem; }
.wpcf7-spinner { display: none; }
/* Sending / result states (classes CF7 puts on the form) */
.wpcf7 form.submitting .wpcf7-submit { opacity: .55; cursor: progress; pointer-events: none; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #2f8f5b; background: color-mix(in srgb, #2f8f5b 8%, transparent); }
.wpcf7 form:is(.invalid, .failed, .aborted, .spam, .unaccepted) .wpcf7-response-output { border-color: #c0263a; background: color-mix(in srgb, #c0263a 6%, transparent); }

/* FAQ */
.mx-faq .wp-block-details { margin: 0; padding: 1.15rem 0; border: 0 !important; border-top: 1px solid var(--mx-line) !important; }
.mx-faq .wp-block-details:last-child { border-bottom: 1px solid var(--mx-line) !important; }
.mx-faq .mx-sub + .mx-more { margin-top: 1.2rem; }
.mx-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.2rem; font-weight: 600; font-size: 1.12rem; }
.mx-faq summary::-webkit-details-marker { display: none; }
.mx-faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--mx-accent-text); transition: rotate .3s var(--mx-ease); }
.mx-faq details[open] summary::after { rotate: 45deg; }
.mx-faq details p { color: var(--mx-muted); margin: .8rem 0 0; max-width: 46em; }

/* Footer / contacts */
.mx-footer { background: var(--wp--preset--color--dark); padding-top: clamp(3.5rem, 7vw, 6rem) !important; }
.mx-footer .wp-block-button__link { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: #fff; }
.mx-footer .wp-block-button__link::after { color: #fff !important; }
.mx-footer .mx-sub { margin-bottom: 1.6rem; }
.mx-contacts p { margin: 0 0 .7rem; font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; }
.mx-contacts p.mx-label { font-size: .75rem; }
.mx-contacts a { color: var(--wp--preset--color--on-dark); text-decoration: none; }
.mx-contacts a:hover { color: var(--mx-accent-text); }
.mx-footer__bottom a { color: var(--mx-muted); text-decoration: none; }
.mx-footer__bottom a:hover { color: var(--wp--preset--color--on-dark); }
.mx-footer__bottom { border-top: 1px solid var(--mx-line); margin-top: clamp(2.5rem, 5vw, 4rem) !important; padding-block: 1.4rem !important; }

/* Mobile quick-contact bar: a floating tab bar with icons, inset from the edges */
.mx-mobilebar { display: none; }
@media (max-width: 781px) {
	.mx-mobilebar {
		display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 4px; padding: 5px;
		position: fixed; left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 120;
		background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
		backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
		border: 1px solid var(--mx-line); border-radius: 4px; box-shadow: 0 14px 34px -14px #0007;
	}
	.mx-mobilebar a { display: grid; justify-items: center; gap: .2rem; padding: .55rem .4rem .5rem; border-radius: 2px; color: var(--mx-ink); text-decoration: none; font-size: .72rem; font-weight: 600; letter-spacing: .02em; }
	.mx-mobilebar svg { width: 22px; height: 22px; }
	.mx-mobilebar a.is-main { background: var(--wp--preset--color--accent); color: #fff; }
	/* Hidden over the hero (its own CTAs are on screen); view.js adds .is-shown once half the hero is scrolled past. */
	.mx-mobilebar:not(.is-shown) { translate: 0 calc(100% + 24px); opacity: 0; pointer-events: none; }
	/* Also out of the way while the menu is open or the on-screen keyboard is up (view.js sets .is-typing). */
	html.has-modal-open .mx-mobilebar, .mx-mobilebar.is-typing { translate: 0 calc(100% + 24px); opacity: 0; pointer-events: none; }
	/* Room for the bar inside the dark footer, so the page doesn't end on a light strip. */
	.mx-footer__bottom { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
	.mx-header__actions { display: none !important; }
	.mx-header__inner { min-height: 64px; }
	.mx-logo { height: 21px; }
	.wp-block-navigation__responsive-container-open { padding: .5rem !important; margin-right: -.5rem; }
}


/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
	.mx-objects .wp-block-post-template, .mx-steps, .mx-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mx-hero--bento .mx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mx-calc { grid-template-columns: minmax(0, 1fr); }
	.mx-calc__form { border-right: 0; border-bottom: 1px solid var(--mx-line); }
	.mx-who { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 781px) {
	.mx-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
	.mx-objects .wp-block-post-template, .mx-steps, .mx-perks { grid-template-columns: minmax(0, 1fr); }
	.mx-hero--bento .mx-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
	.mx-tile--main, .mx-tile--photo, .mx-hero--bento .mx-tile--wide { grid-column: auto; grid-row: auto; }
	.mx-tile--photo { min-height: 200px; }
	.mx-hero--bento .mx-tile--photo:not(.mx-tile--wide) { display: none; } /* one photo is enough above the products */
	.mx-skin--bento .mx-cards { grid-template-columns: minmax(0, 1fr) !important; }
	/* Phone: the first screen is a scroll start, not a fixed frame; keep the photo small so the offer stays in view. */
	.mx-hero { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* Calculator drawing strokes */
.mx-calc__drawing .f { fill: color-mix(in srgb, var(--mx-ink) 4%, transparent); stroke: var(--mx-ink); stroke-width: 1.5; }
.mx-calc__drawing .l { stroke: var(--mx-ink); stroke-width: .8; opacity: .45; }
.mx-calc__drawing .p { fill: var(--mx-ink); }
.mx-calc__drawing .d { stroke: var(--wp--preset--color--accent); stroke-width: 1; }
.mx-calc__drawing .t { fill: var(--wp--preset--color--accent); font: 700 12px var(--wp--preset--font-family--display); }
.mx-calc__drawing .led { stroke: #f2b544; stroke-width: 3; }

/* ==========================================================================
   Motion. Everything below is off for prefers-reduced-motion; reveal-on-scroll
   needs JS (.mx-js on <html>), so without JS all content is simply visible.
   ========================================================================== */
:root { interpolate-size: allow-keywords; }
@media (prefers-reduced-motion: no-preference) {
	/* First screen on load */
	.mx-hero .mx-label, .mx-hero h1, .mx-hero .mx-lead, .mx-hero .wp-block-buttons, .mx-hero .mx-next li, .mx-hero .mx-more { animation: mx-up .6s var(--mx-ease) both; }
	.mx-hero h1 { animation-delay: .05s; }
	.mx-hero .mx-lead { animation-delay: .18s; }
	.mx-hero .wp-block-buttons { animation-delay: .28s; }
	.mx-hero .mx-next li:nth-child(1) { animation-delay: .4s; }
	.mx-hero .mx-next li:nth-child(2) { animation-delay: .5s; }
	.mx-hero .mx-next li:nth-child(3) { animation-delay: .6s; }
	.mx-hero .mx-more { animation-delay: .7s; }
	.mx-hero--bento .mx-bento > * { animation: mx-up .6s var(--mx-ease) both; }
	.mx-hero--bento .mx-bento > *:nth-child(2) { animation-delay: .12s; }
	.mx-hero--bento .mx-bento > *:nth-child(3) { animation-delay: .24s; }
	.mx-hero--bento .mx-bento > *:nth-child(4) { animation-delay: .36s; }
	.mx-hero--bento .mx-bento > *:nth-child(5) { animation-delay: .48s; }

	/* Reveal on scroll (classes set by view.js) */
	.mx-js .mx-reveal { opacity: 0; translate: 0 34px; transition: opacity .9s var(--mx-ease), translate .9s var(--mx-ease); transition-delay: calc(var(--i, 0) * 90ms); }
	.mx-js .mx-reveal.is-in { opacity: 1; translate: 0 0; }
	.mx-js .mx-step.mx-reveal::before { content: ""; display: block; height: 2px; margin: -1.2rem 0 1.2rem; background: var(--wp--preset--color--accent); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--mx-ease) calc(var(--i, 0) * 90ms + .2s); }
	.mx-js .mx-step.mx-reveal.is-in::before { transform: scaleX(1); }

	/* Micro-interactions */
	.mx-card, .mx-dir { transition: translate .5s var(--mx-ease), box-shadow .5s var(--mx-ease); }
	.mx-card:hover, .mx-dir:hover { translate: 0 -6px; box-shadow: 0 28px 50px -30px #0006; }
	.mx-card .wp-block-image, .mx-cut { overflow: hidden; }
	.mx-card .wp-block-image img { transition: scale 1s var(--mx-ease); }
	.mx-card:hover .wp-block-image img { scale: 1.05; }
	.mx-skin .wp-block-button:not(.is-style-outline) .wp-block-button__link, .mx-btn:not(.mx-btn--ghost) {
		background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
		background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .45s var(--mx-ease), color .3s, border-color .3s;
	}
	.mx-skin .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, .mx-btn:not(.mx-btn--ghost):hover { background-color: var(--mx-btn-bg); background-size: 100% 100%; }
	.mx-more a { border-bottom: 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat, linear-gradient(var(--mx-line), var(--mx-line)) 0 100% / 100% 1px no-repeat; transition: background-size .45s var(--mx-ease); }
	.mx-more a:hover { background-size: 100% 1px, 100% 1px; }
	.mx-nav a { background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; transition: background-size .35s var(--mx-ease), color .2s; padding-bottom: 2px; }
	.mx-nav a:hover { background-size: 100% 1px; }
	.mx-ico { transition: color .2s, border-color .2s, scale .3s var(--mx-ease); }
	.mx-ico:hover { scale: 1.12; }
	.mx-header { transition: box-shadow .3s; }
	.mx-header.is-scrolled { box-shadow: 0 10px 30px -18px #0005; }
	.mx-faq details::details-content { height: 0; overflow: clip; transition: height .45s var(--mx-ease), content-visibility .45s allow-discrete; }
	.mx-faq details[open]::details-content { height: auto; }
	.mx-faq summary { transition: color .2s; }
	.mx-faq summary:hover { color: var(--mx-accent-text); }
	.mx-calc__tabs button, .mx-calc__chips button { transition: background .25s, color .25s, border-color .25s, box-shadow .25s; }
	.mx-calc__drawing .f, .mx-calc__drawing .d { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: mx-draw 1.1s var(--mx-ease) forwards; }
	.mx-calc__drawing .l, .mx-calc__drawing .p, .mx-calc__drawing .t, .mx-calc__drawing .led { animation: mx-fade .6s ease .35s both; }
	.mx-calc__price strong.is-updating { animation: mx-tick .45s var(--mx-ease); }
	.mx-mobilebar { transition: translate .45s var(--mx-ease), opacity .35s; }

	/* Photos open with a 45° diagonal wipe from the bottom-right corner, where the brand X cuts its tiles, and settle from a slight zoom. */
	.mx-hero--bento .mx-tile--photo figure { animation: mx-wipe .8s var(--mx-ease) .1s both; }
	.mx-hero--bento .mx-tile--photo img { animation: mx-settle 1.2s var(--mx-ease) .1s both; }
	.mx-hero--bento .mx-tile--photo:last-child :is(figure, img) { animation-delay: .25s; }
	.mx-js .mx-reveal :is(.wp-block-image, .wp-block-post-featured-image) { transition: clip-path .9s var(--mx-ease) calc(var(--i, 0) * 90ms + .1s); }
	.mx-js .mx-reveal :is(.wp-block-image, .wp-block-post-featured-image) { clip-path: polygon(100% 100%, -100% 100%, 100% -100%); }
	.mx-js .mx-reveal:not(.is-in) :is(.wp-block-image, .wp-block-post-featured-image) { clip-path: polygon(100% 100%, 100% 100%, 100% 100%); }
	.mx-js .mx-reveal:not(.is-in) img { scale: 1.12; }
}
/* Starts at .01, not 0: Chrome never counts an opacity-0 element as the largest paint, and the H1 is ours (Lighthouse: NO_LCP). */
@keyframes mx-up { from { opacity: .01; translate: 0 28px; } }
@keyframes mx-fade { from { opacity: 0; } }
@keyframes mx-draw { to { stroke-dashoffset: 0; } }
@keyframes mx-wipe { from { clip-path: polygon(100% 100%, 100% 100%, 100% 100%); } to { clip-path: polygon(100% 100%, -100% 100%, 100% -100%); } }
@keyframes mx-settle { from { scale: 1.12; } }
@keyframes mx-tick { 0% { opacity: .35; translate: 0 6px; } }

/* ---------- Phone: more air, bigger tap targets ---------- */
@media (max-width: 600px) {
	.mx-head { margin-bottom: 1.5rem !important; }
	.mx-skin h2 { font-size: clamp(1.75rem, 7.6vw, 2.1rem) !important; line-height: 1.05; }
	.mx-skin h1 { font-size: clamp(2.4rem, 11.5vw, 3rem); }
	.mx-lead { font-size: 1.05rem; line-height: 1.55; }
	.mx-sub { font-size: .95rem; }
	.mx-hero { padding-block: 1.75rem 2.5rem !important; }
	.mx-hero .wp-block-buttons { flex-direction: column; gap: .6rem; }
	.mx-hero .wp-block-button, .mx-hero .wp-block-button__link { width: 100%; }
	.mx-hero .wp-block-button__link { justify-content: space-between; padding: 1rem 1.2rem; }
	.mx-next { gap: .7rem; margin: 1.6rem 0 1.2rem; font-size: .95rem; }
	.mx-badges { gap: 6px; }
	.mx-badges li { padding: .55rem .55rem .6rem; }
	.mx-badges strong { font-size: .78rem; margin: 0; }
	.mx-badges span { display: none; } /* titles only: three short plaques still fit one row */
	.mx-hero .mx-more { font-size: .9rem; line-height: 1.5; }
	.mx-card > * { margin-inline: 1.1rem !important; }
	.mx-card .wp-block-image img { aspect-ratio: 16 / 11; }
	.mx-objects .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
	.mx-case .wp-block-post-featured-image img { aspect-ratio: 1 / 1; }
	.mx-case .wp-block-post-title { font-size: .98rem; }
	.mx-dir { padding: 1.4rem 1.1rem; }
	.mx-dir > .wp-block-image { margin: -1.4rem -1.1rem 1.1rem !important; } /* bleed matches the phone padding */
	/* Shorter road to the calculator: production photos swipe sideways, perks become a ruled list. */
	.mx-base__photos, .mx-reviews__grid { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--wp--style--root--padding-right, 1rem)) !important; padding-inline: var(--wp--style--root--padding-right, 1rem); scroll-padding-inline: var(--wp--style--root--padding-right, 1rem); scrollbar-width: none; }
	.mx-base__photos::-webkit-scrollbar, .mx-reviews__grid::-webkit-scrollbar { display: none; }
	.wp-block-columns.mx-reviews__grid > .wp-block-column.mx-review { flex: 0 0 85% !important; scroll-snap-align: start; }
	/* beats core's stacked-columns rule (flex-basis: 100% !important) */
	.wp-block-columns.mx-base__photos > .wp-block-column.mx-base__photo { flex: 0 0 80% !important; scroll-snap-align: start; }
	.mx-perks { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; margin-top: 1.6rem !important; }
	.mx-skin--bento .mx-perk { border-top-color: var(--mx-line); padding-block: .9rem; }
	.mx-perk h3 { margin-bottom: .2rem !important; }
	/* Steps: number on the left, text on the right */
	.mx-steps { gap: .7rem; }
	.mx-step { display: grid !important; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: .8rem; align-items: start; }
	.mx-step > * { grid-column: 2; }
	.mx-step > .mx-step__num { grid-column: 1; grid-row: 1 / span 3; font-size: 1.9rem; margin: .1rem 0 0 !important; }
	.mx-who { gap: .9rem; }
	.mx-calc__form, .mx-calc__result { padding: 1.1rem; }
	.mx-form-card { padding: 1rem !important; }
	.mx-form { gap: .85rem; }
	.mx-faq summary { font-size: 1.02rem; }
	.mx-footer { padding-top: 3rem !important; }
	.mx-contacts p { font-size: 1.15rem; }
}