/* ==========================================================================
   Mraz theme
   Concept: garment-pattern paper. A cm grid ground, a pattern piece in the
   hero, product lines as pinked fabric swatches, certificates as woven care
   labels. Colours, fonts and spacing come from theme.json presets.
   ========================================================================== */

:root {
	--mz-paper: var(--wp--preset--color--paper, #F1F3F2);
	--mz-white: var(--wp--preset--color--white, #FFFFFF);
	--mz-ink: var(--wp--preset--color--ink, #14233B);
	--mz-ink-2: var(--wp--preset--color--ink-2, #4A576D);
	--mz-ink-deep: var(--wp--preset--color--ink-deep, #0C1628);
	--mz-frost: var(--wp--preset--color--frost, #D3E2E8);
	--mz-signal: var(--wp--preset--color--signal, #FF6A13);
	--mz-on-dark: var(--wp--preset--color--on-dark, #E9EEF3);
	--mz-on-dark-2: var(--wp--preset--color--on-dark-2, #A9B5C4);
	--mz-grid: rgba(20, 35, 59, 0.06);
	--mz-grid-major: rgba(20, 35, 59, 0.11);
	--mz-rule: rgba(20, 35, 59, 0.16);
	--mz-rule-dark: rgba(255, 255, 255, 0.14);
	--mz-mono: var(--wp--preset--font-family--plex-mono, ui-monospace, monospace);
	--mz-section: clamp(64px, 9vw, 120px);
	--mz-header-h: 74px;
}

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

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

body .wp-site-blocks > * {
	margin-block-start: 0;
}

h1, h2, h3, h4,
.wp-block-heading,
.wp-block-post-title,
.wp-block-query-title {
	font-stretch: 118%;
	text-wrap: balance;
}

/* Heading colours are set explicitly, so styles left behind by old plugins can't wash them out.
   Dark sections switch them to white through --mz-heading. */
h1, h2, h3, h4, h5, h6 {
	color: var(--mz-heading, var(--mz-ink));
}

body .wp-site-blocks :is(h1, h2, h3, h4, h5, h6) {
	color: var(--mz-heading, var(--mz-ink));
	overflow-wrap: break-word;
}

/* Safety net for narrow phones: nothing (old page-builder content included) may make the page
   wider than the screen, which would make phones zoom the whole site out. "clip" keeps the
   sticky header working, unlike "hidden". */
.wp-site-blocks {
	overflow-x: clip;
}

.is-style-mz-navy,
.mz-footer {
	--mz-heading: var(--mz-white);
}

.mz-cta,
.mz-bg-white,
.is-style-mz-paper {
	--mz-heading: var(--mz-ink);
}

p {
	text-wrap: pretty;
}

:where(.wp-site-blocks) :focus-visible {
	outline: 3px solid var(--mz-signal);
	outline-offset: 3px;
}

::selection {
	background: var(--mz-signal);
	color: var(--mz-ink);
}

/* Containers below lay their children out with grid gaps, so the editor's
   flow margins are switched off inside them. */
:is(
	.mz-main, .mz-hero-grid, .mz-hero-copy, .mz-stats, .mz-stat,
	.mz-partners-inner, .mz-section-head, .mz-section-title, .mz-lines, .mz-line,
	.mz-line-body, .mz-process-grid, .mz-process-intro, .mz-callout, .mz-steps, .mz-step,
	.mz-plants, .mz-plant, .mz-about-grid, .mz-about-copy, .mz-labels, .is-style-mz-care,
	.mz-cta-grid, .mz-cta-copy, .mz-contact-list, .mz-contact-item, .mz-footer-grid,
	.mz-footer-about, .mz-footer-col, .mz-footer-bottom, .mz-page-hero-inner, .mz-split,
	.mz-prose, .mz-values, .mz-value, .mz-plant-rows, .mz-plant-row, .mz-plant-meta,
	.mz-equip, .mz-equip-col, .mz-partner-grid, .mz-partner-card, .mz-contact-grid,
	.mz-form, .mz-contact-side, .mz-loop-item, .mz-header-inner
) > * {
	margin-block: 0 !important;
}

/* ---------- Text styles ---------- */

.is-style-mz-mono,
.mz-mono {
	font-family: var(--mz-mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
}

.is-style-mz-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--mz-mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--mz-ink-2);
}

.is-style-mz-eyebrow::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	background: var(--mz-signal);
}

.is-style-mz-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--mz-ink-2);
	max-width: 36em;
}

.mz-text-link a {
	display: inline-flex;
	gap: 0.5em;
	font-weight: 650;
	text-decoration: none;
	border-bottom: 2px solid var(--mz-signal);
	padding-bottom: 2px;
}

.mz-text-link a::after {
	content: "→";
	font-family: var(--mz-mono);
}

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

.wp-block-button__link {
	font-stretch: 110%;
	letter-spacing: 0.01em;
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--mz-ink);
	border-color: var(--mz-ink);
	color: var(--mz-white);
}

.mz-arrow .wp-block-button__link::after {
	content: "→";
	font-family: var(--mz-mono);
	font-weight: 500;
	margin-left: 0.6em;
}

.mz-btn-ink .wp-block-button__link {
	background: var(--mz-ink);
	border-color: var(--mz-ink);
	color: var(--mz-white);
}

.mz-btn-ink .wp-block-button__link:hover {
	background: var(--mz-ink-deep);
	border-color: var(--mz-ink-deep);
	color: var(--mz-white);
}

.wp-block-buttons {
	gap: 12px;
}

/* ---------- Surfaces ---------- */

.is-style-mz-paper {
	background-color: var(--mz-paper);
	background-image:
		linear-gradient(var(--mz-grid-major) 1px, transparent 1px),
		linear-gradient(90deg, var(--mz-grid-major) 1px, transparent 1px),
		linear-gradient(var(--mz-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--mz-grid) 1px, transparent 1px);
	background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
	background-position: -1px -1px;
}

.is-style-mz-navy {
	background-color: var(--mz-ink);
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 100px 100px;
	color: var(--mz-on-dark);
}

.is-style-mz-navy :is(h1, h2, h3, h4) {
	color: var(--mz-white);
}

.is-style-mz-navy p,
.is-style-mz-navy .is-style-mz-eyebrow {
	color: var(--mz-on-dark-2);
}

.mz-bg-white {
	background: var(--mz-white);
	border-block: 1px solid var(--mz-rule);
}

.mz-section {
	padding-block: var(--mz-section);
}

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

.mz-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .mz-site-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 600px) {
	.admin-bar .mz-site-header {
		top: 0;
	}
}

.mz-header {
	position: relative;
	isolation: isolate;
	border-bottom: 1px solid var(--mz-rule);
}

/* The blur sits on a pseudo-element: a backdrop-filter on the header itself would
   trap the full-screen mobile menu inside the header bar. */
.mz-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(241, 243, 242, 0.94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.mz-header-inner {
	min-height: var(--mz-header-h);
	gap: 20px !important;
}

.mz-logo {
	margin-right: auto;
	flex: none;
}

.mz-logo img {
	max-height: 52px;
	width: auto;
}

/* MRAZ wordmark (animation further down, under Motion) */
.mz-wordmark {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	flex: none;
	margin-right: auto;
	color: var(--mz-ink);
	text-decoration: none;
}

.mz-wm-word {
	position: relative;
	display: inline-flex;
	padding-bottom: 7px;
	overflow: hidden;
	font-weight: 900;
	font-size: 1.6rem;
	line-height: 1;
	letter-spacing: 0.04em;
	font-stretch: 125%;
}

.mz-wm-word > span {
	display: inline-block;
	font-stretch: inherit;
}

.mz-wm-word > :nth-child(1) { --i: 0; }
.mz-wm-word > :nth-child(2) { --i: 1; }
.mz-wm-word > :nth-child(3) { --i: 2; }
.mz-wm-word > :nth-child(4) { --i: 3; }

.mz-wm-word::after {
	/* the running stitch under the name */
	content: "";
	position: absolute;
	left: 0;
	right: 0.04em;
	bottom: 0;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--mz-signal) 0 7px, transparent 7px 11px);
	transform-origin: left;
}

.mz-wm-sub {
	font-family: var(--mz-mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--mz-ink-2);
}

.mz-wordmark:hover .mz-wm-word > span,
.mz-wordmark:focus-visible .mz-wm-word > span {
	font-stretch: 92%;
}

.mz-nav .wp-block-navigation__container {
	gap: 4px;
}

.mz-nav .wp-block-navigation-item__content {
	padding: 8px 12px;
	border-radius: 2px;
	text-decoration: none;
}

.mz-nav .wp-block-navigation-item__content:hover {
	background: var(--mz-frost);
}

.mz-nav .current-menu-item > .wp-block-navigation-item__content {
	box-shadow: inset 0 -2px 0 var(--mz-signal);
}

.mz-header-cta .wp-block-button__link {
	padding: 0.7em 1.1em;
	font-size: 0.92rem;
}

/* Keep the menu behind the "Menu" button until there is room for all links. */
@media (min-width: 600px) and (max-width: 1023px) {
	.mz-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.mz-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}

@media (max-width: 1023px) {
	.mz-header-cta {
		display: none !important;
	}
	/* Name on the left; language and the menu button together on the right. */
	.mz-header-inner > .mz-lang {
		order: 2;
		margin-left: auto !important;
	}
	.mz-header-inner > .mz-nav {
		order: 3;
	}
}

.wp-block-navigation.mz-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--mz-paper);
	background-image:
		linear-gradient(var(--mz-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--mz-grid) 1px, transparent 1px);
	background-size: 20px 20px;
	color: var(--mz-ink);
	padding: 24px clamp(16px, 4vw, 40px);
}

.wp-block-navigation.mz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation.mz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	gap: 0;
	width: 100%;
}

.mz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--mz-rule);
}

.mz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 14px 4px;
	font-size: 1.25rem;
	font-stretch: 112%;
	font-weight: 700;
}

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

.mz-nav .wp-block-navigation__responsive-container-open {
	border: 2px solid var(--mz-ink);
	border-radius: 2px;
	padding: 6px;
}

/* TranslatePress switcher: "SR / EN" */
.mz-lang {
	font-family: var(--mz-mono);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	flex: none;
}

.mz-lang ul {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mz-lang li {
	display: flex;
	align-items: center;
	margin: 0;
}

.mz-lang li + li::before {
	content: "/";
	color: var(--mz-ink-2);
	opacity: 0.6;
}

.mz-lang a {
	display: block;
	padding: 10px 6px;
	color: var(--mz-ink-2);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}

.mz-lang a:hover {
	color: var(--mz-ink);
}

.mz-lang a[aria-current] {
	color: var(--mz-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--mz-signal);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* Fallback: TranslatePress's own dropdown (older plugin versions), made compact. */
.mz-lang-trp {
	min-width: 0;
	max-width: 42vw;
}

.mz-lang-trp .trp-language-switcher {
	width: auto !important;
	height: auto;
}

.mz-lang-trp .trp-language-switcher > div {
	width: auto !important;
	max-width: 100%;
	border: 1px solid var(--mz-rule) !important;
	border-radius: 2px !important;
	background-color: var(--mz-paper) !important;
	padding: 2px 8px !important;
}

.mz-lang-trp .trp-language-switcher > div > a {
	padding: 6px 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	font: inherit;
	color: var(--mz-ink);
}

@media (max-width: 600px) {
	.mz-header-inner {
		gap: 10px !important;
	}
	.mz-wordmark,
	.mz-lang {
		min-width: 0;
	}
	.mz-nav {
		flex: none;
	}
}

/* Narrow phones: the name alone, so the switcher and menu button fit beside it. */
@media (max-width: 419px) {
	.mz-wm-sub {
		display: none;
	}
}

@media (max-width: 600px) {
	.mz-header-inner:has(.mz-lang-trp) .mz-wm-sub {
		display: none;
	}
}

/* Small laptops and landscape tablets: keep all links and the button on one line. */
.mz-nav .wp-block-navigation-item__content,
.mz-header-cta .wp-block-button__link {
	white-space: nowrap;
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.mz-wm-sub {
		display: none;
	}
	.mz-nav .wp-block-navigation-item__content {
		padding-inline: 9px;
	}
}

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

.mz-hero {
	padding-block: clamp(40px, 6vw, 84px) 0;
}

.mz-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 13fr) minmax(0, 11fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
}

.mz-hero-copy {
	display: grid;
	gap: 28px;
	min-width: 0;
}

.mz-hero h1 em {
	font-style: normal;
	background: linear-gradient(transparent 62%, rgba(255, 106, 19, 0.42) 62% 92%, transparent 92%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.mz-trust {
	color: var(--mz-ink-2);
}

/* Pattern piece drawing */
.mz-piece {
	margin: 0;
	min-width: 0;
}

.mz-piece svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* The piece is a sheet of pattern paper lying on the grid: the background threads pass under it. */
.mz-piece .ghost { fill: #FAFBFA; stroke: none; }
.mz-piece .cut { fill: none; stroke: var(--mz-ink); stroke-width: 2.6; stroke-linejoin: round; }
.mz-piece .stitch { fill: none; stroke: var(--mz-signal); stroke-width: 1.8; stroke-dasharray: 7 6; }
.mz-piece .guide { fill: none; stroke: var(--mz-ink); stroke-width: 1.2; stroke-dasharray: 2 5; opacity: 0.7; }
.mz-piece .thin { fill: none; stroke: var(--mz-ink); stroke-width: 1.2; }
.mz-piece .solid { fill: var(--mz-ink); }
.mz-piece .dim-bg { fill: var(--mz-paper); }
.mz-piece text { font-family: var(--mz-mono); fill: var(--mz-ink); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.mz-piece text.big { font-size: 15px; font-weight: 600; letter-spacing: 0.1em; }
.mz-piece text.anno { fill: var(--mz-ink-2); font-size: 10.5px; }

.mz-piece .needle { fill: var(--mz-signal); stroke: var(--mz-white); stroke-width: 2.5; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
	/* The cutter draws the outline, then the needle sews the seam (see assets/js/mraz.js). */
	.mz-piece .cut {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		animation: mz-draw 1.6s cubic-bezier(0.6, 0.1, 0.3, 1) 0.25s forwards;
	}
	.mz-piece .ghost {
		opacity: 0;
		animation: mz-appear 0.9s ease 1s forwards;
	}
	.mz-piece .stitch-reveal {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		animation: mz-draw 2.2s linear 1.8s forwards;
	}
	.mz-piece.is-sewing .needle {
		animation: mz-needle 2.3s linear both;
	}
	.mz-piece .labels {
		opacity: 0;
		animation: mz-appear 0.7s ease 1.9s forwards;
	}
}

@keyframes mz-draw { to { stroke-dashoffset: 0; } }
@keyframes mz-appear { to { opacity: 1; } }
@keyframes mz-needle { 0% { opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }

/* In the editor the drawing is shown finished. */
.editor-styles-wrapper .mz-piece .cut,
.editor-styles-wrapper .mz-piece .stitch-reveal { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
.editor-styles-wrapper .mz-piece .labels,
.editor-styles-wrapper .mz-piece .ghost { animation: none; opacity: 1; }
.editor-styles-wrapper .mz-piece .needle { display: none; }

/* Figures */
.mz-stats {
	margin-top: clamp(40px, 6vw, 72px) !important;
	border-top: 1px solid var(--mz-rule);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mz-stat {
	display: grid;
	gap: 4px;
	align-content: start;
	padding: 26px 24px 30px;
	border-left: 1px solid var(--mz-rule);
}

.mz-stat:first-child {
	border-left: 0;
	padding-left: 0;
}

.mz-stat-num {
	font-stretch: 125%;
	font-weight: 800;
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.mz-stat .is-style-mz-mono {
	color: var(--mz-ink-2);
}

@media (max-width: 860px) {
	.mz-hero-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.mz-piece {
		max-width: 460px;
		width: 100%;
		justify-self: center;
	}
	.mz-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.mz-stat:nth-child(3) {
		border-left: 0;
		padding-left: 0;
	}
	.mz-stat:nth-child(n + 3) {
		border-top: 1px solid var(--mz-rule);
	}
}

/* ---------- Partner strip ---------- */

.mz-partners {
	background: var(--mz-white);
	border-block: 1px solid var(--mz-rule);
}

.mz-partners-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px clamp(20px, 4vw, 56px);
	padding-block: 28px;
}

.mz-partners-inner > .is-style-mz-mono {
	color: var(--mz-ink-2);
}

.mz-partner-list {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 18px 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mz-partner-list li {
	font-stretch: 125%;
	font-weight: 700;
	font-size: clamp(1.25rem, 2.3vw, 1.75rem);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

@media (max-width: 860px) {
	.mz-partner-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		flex-basis: 100%;
	}
}

/* ---------- Section heads ---------- */

.mz-section-head {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(20px, 4vw, 64px);
	align-items: end;
	margin-bottom: clamp(36px, 5vw, 64px) !important;
}

.mz-section-title {
	display: grid;
	gap: 18px;
}

.mz-section-head > p {
	color: var(--mz-ink-2);
	max-width: 34em;
}

.is-style-mz-navy .mz-section-head > p {
	color: var(--mz-on-dark-2);
}

.mz-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(24px, 5vw, 80px);
	align-items: start;
}

.mz-split-top {
	margin-top: clamp(48px, 7vw, 96px) !important;
}

.mz-prose {
	display: grid;
	gap: 1.1em;
	color: var(--mz-ink-2);
	max-width: 38em;
}

.mz-prose strong {
	color: var(--mz-ink);
}

@media (max-width: 860px) {
	.mz-section-head,
	.mz-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Product lines: swatch cards ---------- */

.mz-lines {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 28px);
}

.mz-line {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mz-white);
	border: 1px solid var(--mz-rule);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mz-line:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgba(12, 22, 40, 0.45);
}

.mz-line-body {
	display: grid;
	gap: 12px;
	align-content: start;
	padding: 22px 26px 18px;
	flex: 1;
}

.mz-line-body .is-style-mz-mono {
	color: var(--mz-ink-2);
}

.mz-line-body p:not(.is-style-mz-mono) {
	color: var(--mz-ink-2);
	font-size: 1rem;
}

.mz-more {
	padding: 0 26px 26px;
	font-weight: 650;
}

.mz-more a {
	text-decoration: none;
	display: inline-flex;
	gap: 0.5em;
}

.mz-more a::after {
	content: "→";
	font-family: var(--mz-mono);
	color: var(--mz-signal);
	transition: transform 0.2s ease;
}

.mz-more a::before {
	/* the whole card is clickable */
	content: "";
	position: absolute;
	inset: 0;
}

.mz-line:hover .mz-more a::after {
	transform: translateX(4px);
}

/* Fabric swatches with a pinking-shear edge */
[class*="is-style-mz-swatch-"] {
	position: relative;
	margin: 0 !important;
	-webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
	mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
}

.is-style-mz-swatch-gastro {
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 3px),
		repeating-conic-gradient(#2A2E36 0 25%, #E4E7EA 0 50%) 0 0 / 7px 7px;
}

.is-style-mz-swatch-work {
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 5px),
		#1E3256;
}

.is-style-mz-swatch-work::after {
	/* hi-vis band with reflective stripe */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 46%;
	height: 46px;
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 3px) 0 14px / 100% 18px no-repeat,
		linear-gradient(180deg, var(--mz-signal) 0 14px, #C9CFD6 14px 32px, var(--mz-signal) 32px 46px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.is-style-mz-swatch-med {
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 3px),
		#2C8796;
}

@media (max-width: 900px) {
	.mz-lines {
		grid-template-columns: minmax(0, 1fr);
	}
	.mz-line [class*="is-style-mz-swatch-"] {
		height: 140px !important;
	}
}

/* ---------- Production process (navy) ---------- */

.mz-process-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 6vw, 96px);
}

.mz-process-intro {
	display: grid;
	gap: 22px;
	align-content: start;
	position: sticky;
	top: calc(var(--mz-header-h) + 36px);
	align-self: start;
}

.mz-callout {
	display: grid;
	gap: 10px;
	margin-top: 12px !important;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.03);
}

.mz-callout h3 {
	font-size: 1.2rem;
}

.mz-callout p {
	font-size: 0.98rem;
}

.mz-steps {
	counter-reset: mz-step;
}

.mz-step {
	counter-increment: mz-step;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 6px 20px;
	padding: 26px 0;
	border-top: 1px solid var(--mz-rule-dark);
}

.mz-step:last-child {
	border-bottom: 1px solid var(--mz-rule-dark);
}

.mz-step::before {
	content: counter(mz-step, decimal-leading-zero);
	grid-row: span 3;
	padding-top: 6px;
	font-family: var(--mz-mono);
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--mz-signal);
}

.mz-step > * {
	grid-column: 2;
}

.mz-step h3 {
	font-size: 1.45rem;
}

.mz-spec {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px !important;
}

.mz-spec code {
	font-family: var(--mz-mono);
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	padding: 5px 10px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: none;
	color: var(--mz-on-dark);
	border-radius: 0;
}

@media (max-width: 860px) {
	.mz-process-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.mz-process-intro {
		position: static;
	}
	.mz-step {
		grid-template-columns: 44px minmax(0, 1fr);
	}
}

/* ---------- Plants ---------- */

.mz-plants {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 28px);
}

.mz-plants::before {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	top: 11px;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--mz-signal) 0 9px, transparent 9px 15px);
}

.mz-plant {
	position: relative;
	display: grid;
	gap: 10px;
	align-content: start;
	padding-top: 44px;
}

.mz-plant::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--mz-paper);
	border: 3px solid var(--mz-ink);
	box-shadow: inset 0 0 0 4px var(--mz-paper), inset 0 0 0 12px var(--mz-ink);
}

.mz-plant h3 {
	font-size: 1.75rem;
}

.mz-plant-since {
	color: var(--mz-signal);
	font-weight: 600;
}

.mz-plant p:not([class]) {
	color: var(--mz-ink-2);
	font-size: 1rem;
}

.mz-fact {
	margin-top: 6px !important;
	padding-top: 12px;
	border-top: 1px solid var(--mz-rule);
	font-stretch: 112%;
	font-weight: 700;
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
}

.mz-footnote {
	margin-top: 36px !important;
	color: var(--mz-ink-2);
}

@media (max-width: 900px) {
	.mz-plants {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
	.mz-plants::before {
		left: 11px;
		right: auto;
		top: 12px;
		bottom: 12px;
		width: 2px;
		height: auto;
		background: repeating-linear-gradient(180deg, var(--mz-signal) 0 9px, transparent 9px 15px);
	}
	.mz-plant {
		padding: 0 0 36px 52px;
	}
}

/* Detailed plant rows (O nama) */
.mz-plant-rows {
	display: grid;
}

.mz-plant-row {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(20px, 5vw, 80px);
	padding-block: 36px;
	border-top: 1px solid var(--mz-rule);
}

.mz-plant-row:last-child {
	border-bottom: 1px solid var(--mz-rule);
}

.mz-plant-meta {
	display: grid;
	gap: 8px;
	align-content: start;
}

.mz-plant-meta h3 {
	font-size: clamp(1.75rem, 3vw, 2.4rem);
}

.mz-plant-meta .mz-fact {
	justify-self: start;
	padding-right: 24px;
}

@media (max-width: 860px) {
	.mz-plant-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- About + care labels ---------- */

.mz-about-grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}

.mz-about-copy {
	display: grid;
	gap: 22px;
}

.mz-about-copy > p:not([class]) {
	color: var(--mz-ink-2);
	max-width: 36em;
}

.mz-about-copy .is-style-mz-lead {
	color: var(--mz-ink);
}

.mz-labels {
	display: grid;
	gap: 22px;
}

.is-style-mz-care {
	position: relative;
	display: grid;
	gap: 6px;
	padding: 26px 30px 26px 46px;
	background: var(--mz-paper);
	border-radius: 2px;
	box-shadow: 0 1px 0 var(--mz-rule), 0 14px 30px -22px rgba(12, 22, 40, 0.5);
}

.is-style-mz-paper .is-style-mz-care {
	background: var(--mz-white);
}

.is-style-mz-care::before {
	/* stitched fold */
	content: "";
	position: absolute;
	left: 22px;
	top: 10px;
	bottom: 10px;
	width: 2px;
	background: repeating-linear-gradient(180deg, var(--mz-ink) 0 6px, transparent 6px 11px);
	opacity: 0.55;
}

.is-style-mz-care::after {
	/* woven texture */
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: 2px;
	background: repeating-linear-gradient(90deg, rgba(20, 35, 59, 0.035) 0 1px, transparent 1px 3px);
}

.mz-care-title {
	font-stretch: 125%;
	font-weight: 800;
	font-size: 1.9rem;
	line-height: 1.05;
}

.is-style-mz-care p:not([class]) {
	color: var(--mz-ink-2);
}

@media (max-width: 860px) {
	.mz-about-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Values (O nama) ---------- */

.mz-values {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 28px);
}

.mz-value {
	display: grid;
	gap: 12px;
	align-content: start;
	padding: 28px;
	background: var(--mz-white);
	border: 1px solid var(--mz-rule);
	border-top: 4px solid var(--mz-ink);
}

.mz-value .is-style-mz-mono {
	color: var(--mz-signal);
	font-weight: 600;
}

.mz-value p:not([class]) {
	color: var(--mz-ink-2);
}

@media (max-width: 900px) {
	.mz-values {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Equipment (Sistem proizvodnje) ---------- */

.mz-equip {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 64px);
}

.mz-equip-col {
	display: grid;
	gap: 10px;
	align-content: start;
}

.mz-equip-col h3 {
	margin-bottom: 8px !important;
}

.mz-spec-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--mz-ink);
}

.mz-spec-list li {
	padding: 14px 0;
	border-bottom: 1px solid var(--mz-rule);
	color: var(--mz-ink-2);
}

.mz-spec-list strong {
	display: inline-block;
	min-width: 2.6em;
	font-family: var(--mz-mono);
	font-weight: 600;
	color: var(--mz-signal);
}

@media (max-width: 860px) {
	.mz-equip {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Partners page ---------- */

.mz-partner-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--mz-rule);
	border-left: 1px solid var(--mz-rule);
}

.mz-partner-card {
	display: grid;
	gap: 8px;
	align-content: center;
	min-height: 180px;
	padding: 28px;
	border-right: 1px solid var(--mz-rule);
	border-bottom: 1px solid var(--mz-rule);
}

.mz-partner-name {
	font-stretch: 125%;
	font-weight: 800;
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	line-height: 1.05;
}

.mz-partner-card .is-style-mz-mono {
	color: var(--mz-ink-2);
}

.mz-partner-card img {
	max-height: 64px;
	width: auto;
}

@media (max-width: 860px) {
	.mz-partner-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.mz-partner-card {
		min-height: 130px;
	}
}

@media (max-width: 480px) {
	.mz-partner-card {
		min-height: 110px;
		padding: 20px 16px;
	}
	.mz-partner-name {
		font-stretch: 100%;
		font-size: 1.35rem;
	}
}

/* ---------- CTA ---------- */

.mz-cta {
	background: var(--mz-signal);
	color: var(--mz-ink);
}

.mz-cta-grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: start;
}

.mz-cta-copy {
	display: grid;
	gap: 22px;
}

.mz-cta-copy > p:not([class]) {
	max-width: 32em;
	font-size: 1.1rem;
}

.mz-cta .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--mz-ink);
	color: var(--mz-signal);
}

.mz-contact-list {
	display: grid;
}

.mz-contact-item {
	display: grid;
	gap: 2px;
	padding: 16px 0;
	border-top: 2px solid rgba(20, 35, 59, 0.25);
}

.mz-contact-list > .mz-contact-item:last-child {
	border-bottom: 2px solid rgba(20, 35, 59, 0.25);
}

.mz-contact-item .is-style-mz-mono {
	font-size: 0.75rem;
	font-weight: 600;
}

.mz-contact-value {
	font-stretch: 110%;
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.mz-contact-value a {
	text-decoration: none;
}

.mz-contact-value a:hover {
	text-decoration: underline;
}

@media (max-width: 860px) {
	.mz-cta-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Page header (inner pages) ---------- */

.mz-page-hero {
	padding-block: clamp(48px, 7vw, 104px) clamp(40px, 6vw, 80px);
	border-bottom: 1px solid var(--mz-rule);
}

.mz-page-hero-inner {
	display: grid;
	gap: 22px;
}

.mz-page-hero-inner h1 {
	max-width: 15em;
}

.mz-page-hero .mz-stats {
	margin-bottom: calc(clamp(40px, 6vw, 80px) * -1) !important;
}

.mz-page-hero-compact {
	padding-block: clamp(40px, 6vw, 80px) clamp(32px, 4vw, 56px);
}

.mz-404 .wp-block-search {
	max-width: 520px;
}

/* The search field shrinks on narrow phones instead of pushing the button off screen. */
.wp-block-search__inside-wrapper,
.wp-block-search__input {
	min-width: 0;
}

.wp-block-search__input {
	width: 0;
	flex: 1 1 auto;
}

.mz-page-hero-inner > *,
.mz-hero-copy > * {
	min-width: 0;
}

/* ---------- Content pages ---------- */

.mz-content .wp-block-post-content > * + * {
	margin-block-start: 1.2em;
}

.mz-content .wp-block-post-content :is(h2, h3) {
	margin-block-start: 1.8em;
}

.mz-content .wp-block-post-content a {
	text-decoration-color: var(--mz-signal);
	text-underline-offset: 3px;
}

/* ---------- Contact page ---------- */

.mz-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: start;
}

.mz-form {
	display: grid;
	gap: 24px;
}

.mz-contact-side {
	display: grid;
	gap: 0;
}

.mz-contact-side > .mz-contact-item {
	border-bottom: 2px solid rgba(20, 35, 59, 0.25);
	border-top: 0;
}

.mz-contact-side .mz-contact-list > .mz-contact-item:last-child {
	border-bottom: 2px solid rgba(20, 35, 59, 0.25);
}

.mz-contact-side .mz-text-link {
	margin-top: 24px !important;
}

.mz-map iframe {
	display: block;
	width: 100%;
	height: clamp(320px, 45vw, 460px);
	border: 0;
	filter: grayscale(0.7) contrast(1.05);
}

@media (max-width: 860px) {
	.mz-contact-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Contact Form 7 */
.wpcf7 form {
	display: grid;
	gap: 0;
}

.wpcf7 .row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

.wpcf7 .row > [class*="col-md-12"] {
	grid-column: 1 / -1;
}

.wpcf7 .form-group,
.wpcf7 p {
	margin: 0 0 16px;
}

.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	font: inherit;
	font-size: 1rem;
	color: var(--mz-ink);
	background: var(--mz-paper);
	border: 1px solid var(--mz-rule);
	border-bottom: 2px solid var(--mz-ink);
	border-radius: 2px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wpcf7 :is(input, select, textarea):focus {
	outline: none;
	background: var(--mz-white);
	border-bottom-color: var(--mz-signal);
	box-shadow: 0 0 0 3px rgba(255, 106, 19, 0.25);
}

.wpcf7 textarea {
	min-height: 140px;
	resize: vertical;
}

.wpcf7 input[type="submit"] {
	justify-self: start;
	padding: 0.85em 1.6em;
	font: inherit;
	font-stretch: 110%;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mz-ink);
	background: var(--mz-signal);
	border: 2px solid var(--mz-signal);
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wpcf7 input[type="submit"]:hover {
	background: var(--mz-ink);
	border-color: var(--mz-ink);
	color: var(--mz-white);
}

.wpcf7 .wpcf7-not-valid-tip {
	font-size: 0.85rem;
	margin-top: 4px;
}

.wpcf7 form .wpcf7-response-output {
	margin: 8px 0 0;
	padding: 12px 16px;
	border-width: 2px;
}

@media (max-width: 600px) {
	.wpcf7 .row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Gallery ---------- */

.mz-gallery .foogallery {
	margin: 0 auto;
}

/* ---------- Post lists ---------- */

.mz-loop .wp-block-post-template {
	display: grid;
	gap: 0;
	list-style: none;
	padding: 0;
}

.mz-loop-item {
	display: grid;
	gap: 10px;
	padding-block: 28px;
	border-top: 1px solid var(--mz-rule);
}

.mz-loop-item .wp-block-post-title {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.mz-loop-item .wp-block-post-excerpt {
	color: var(--mz-ink-2);
}

/* ---------- Footer ---------- */

.mz-footer {
	background: var(--mz-ink-deep);
	color: var(--mz-on-dark-2);
	padding-block: 64px 28px;
	font-size: 0.97rem;
}

.mz-footer a {
	text-decoration: none;
	color: inherit;
}

.mz-footer a:hover {
	color: var(--mz-white);
	text-decoration: underline;
	text-decoration-color: var(--mz-signal);
	text-underline-offset: 4px;
}

.mz-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
	gap: 40px;
}

.mz-footer-about {
	display: grid;
	gap: 16px;
	max-width: 26em;
	align-content: start;
}

.mz-footer-mark a {
	font-stretch: 125%;
	font-weight: 900;
	font-size: 1.6rem;
	letter-spacing: 0.04em;
	color: var(--mz-white);
}

.mz-social {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.mz-footer-col {
	display: grid;
	gap: 14px;
	align-content: start;
}

.mz-footer-label {
	color: var(--mz-white);
	font-weight: 600;
}

.mz-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.mz-footer-bottom {
	margin-top: 48px !important;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.88rem;
}

@media (max-width: 860px) {
	.mz-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.mz-footer-about {
		grid-column: 1 / -1;
	}
}

@media (max-width: 480px) {
	.mz-footer-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Old page-builder content (WPBakery + the previous theme's Bootstrap grid).
   Keeps pages that have not been rebuilt yet readable.
   ========================================================================== */

.mz-legacy-content .wp-block-post-content {
	--mz-legacy-gap: 24px;
}

.mz-legacy-content .wp-block-post-content > * {
	max-width: var(--wp--style--global--wide-size) !important;
}

.mz-legacy-content .wp-block-post-content :is(.container, .full_wrapper, .full_width) {
	width: 100%;
	max-width: 100%;
	padding: 0;
	background: none !important;
}

.mz-legacy-content .wp-block-post-content .full_wrapper + .full_wrapper {
	margin-top: 48px;
}

.mz-legacy-content .wp-block-post-content .row {
	display: flex;
	flex-wrap: wrap;
	margin-inline: calc(var(--mz-legacy-gap) / -2);
}

.mz-legacy-content .wp-block-post-content [class*="col-"] {
	box-sizing: border-box;
	width: 100%;
	padding-inline: calc(var(--mz-legacy-gap) / 2);
	margin-bottom: var(--mz-legacy-gap);
}

@media (min-width: 768px) {
	.mz-legacy-content .wp-block-post-content .col-sm-6 { width: 50%; }
	.mz-legacy-content .wp-block-post-content .col-sm-4 { width: 33.333%; }
}

@media (min-width: 992px) {
	.mz-legacy-content .wp-block-post-content .col-md-3 { width: 25%; }
	.mz-legacy-content .wp-block-post-content .col-md-4 { width: 33.333%; }
	.mz-legacy-content .wp-block-post-content .col-md-5 { width: 41.666%; }
	.mz-legacy-content .wp-block-post-content .col-md-6 { width: 50%; }
	.mz-legacy-content .wp-block-post-content .col-md-7 { width: 58.333%; }
	.mz-legacy-content .wp-block-post-content .col-md-8 { width: 66.666%; }
	.mz-legacy-content .wp-block-post-content .col-md-12 { width: 100%; }
}

@media (min-width: 1200px) {
	.mz-legacy-content .wp-block-post-content .col-lg-2 { width: 16.666%; }
	.mz-legacy-content .wp-block-post-content .col-lg-3 { width: 25%; }
	.mz-legacy-content .wp-block-post-content .col-lg-4 { width: 33.333%; }
	.mz-legacy-content .wp-block-post-content .col-lg-5 { width: 41.666%; }
	.mz-legacy-content .wp-block-post-content .col-lg-6 { width: 50%; }
	.mz-legacy-content .wp-block-post-content .col-lg-7 { width: 58.333%; }
	.mz-legacy-content .wp-block-post-content .col-lg-8 { width: 66.666%; }
	.mz-legacy-content .wp-block-post-content .col-lg-9 { width: 75%; }
	.mz-legacy-content .wp-block-post-content .col-lg-12 { width: 100%; }
}

.mz-legacy-content .wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

.mz-legacy-content .wp-block-post-content .accordion-body {
	height: auto !important;
}

.mz-legacy-content .wp-block-post-content :is(.fl, .fr) {
	float: none;
}

.mz-legacy-content .wp-block-post-content :is(h3, h4) {
	margin-top: 1.2em;
}

.mz-legacy-content .wp-block-post-content a[href=""],
.mz-legacy-content .wp-block-post-content a:not([href]) {
	display: none;
}

.mz-missing-plugin {
	padding: 14px 18px;
	border: 2px dashed var(--mz-signal);
	font-family: var(--mz-mono);
	font-size: 0.85rem;
	color: var(--mz-ink-2);
}


/* ==========================================================================
   Motion. Everything is sewing-themed and switched off for reduced motion.
   Scroll-linked parts run where the browser supports scroll timelines
   (Chrome, Edge, Safari); elsewhere the page simply shows its final state.
   ========================================================================== */

.mz-arrow .wp-block-button__link::after,
.mz-text-link a::after {
	display: inline-block;
	transition: transform 0.2s ease;
}

.mz-arrow .wp-block-button__link:hover::after,
.mz-text-link a:hover::after {
	transform: translateX(4px);
}

.is-style-mz-care {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.is-style-mz-care:hover {
	transform: rotate(-1.2deg) translateY(-3px);
}

/* Stitched outline on product cards */
.mz-line::after {
	content: "";
	position: absolute;
	inset: 7px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
	background:
		linear-gradient(90deg, var(--mz-signal) 55%, transparent 0) 0 0 / 12px 2px repeat-x,
		linear-gradient(90deg, var(--mz-signal) 55%, transparent 0) 0 100% / 12px 2px repeat-x,
		linear-gradient(180deg, var(--mz-signal) 55%, transparent 0) 0 0 / 2px 12px repeat-y,
		linear-gradient(180deg, var(--mz-signal) 55%, transparent 0) 100% 0 / 2px 12px repeat-y;
}

.mz-line:hover::after,
.mz-line:focus-within::after {
	opacity: 1;
}

/* Partner strip as woven label tape */
.mz-partners {
	position: relative;
}

.mz-partners::before,
.mz-partners::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: repeating-linear-gradient(90deg, rgba(20, 35, 59, 0.32) 0 7px, transparent 7px 12px);
}

.mz-partners::before { top: 7px; }
.mz-partners::after { bottom: 7px; }

.mz-marquee {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	-webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.mz-partners.is-marquee .mz-partners-inner {
	flex-wrap: nowrap;
}

.mz-partners.is-marquee .mz-partner-list {
	display: flex;
	flex: none;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0;
	width: max-content;
}

.mz-partners.is-marquee .mz-partner-list li {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.mz-partners.is-marquee .mz-partner-list li::after {
	content: "";
	width: 9px;
	height: 9px;
	margin-inline: clamp(28px, 4vw, 56px);
	background: var(--mz-signal);
	transform: rotate(45deg);
}

@media (max-width: 860px) {
	.mz-partners.is-marquee .mz-partners-inner {
		flex-wrap: wrap;
	}
	.mz-marquee {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* Hero copy rises in; the highlight swipes across like a strip of fabric. */
	.mz-hero-copy > * {
		animation: mz-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
	.mz-hero-copy > :nth-child(2) { animation-delay: 0.12s; }
	.mz-hero-copy > :nth-child(3) { animation-delay: 0.26s; }
	.mz-hero-copy > :nth-child(4) { animation-delay: 0.38s; }
	.mz-hero-copy > :nth-child(5) { animation-delay: 0.5s; }

	.mz-hero h1 em {
		background-repeat: no-repeat;
		background-size: 0% 100%;
		animation: mz-swipe 0.9s cubic-bezier(0.6, 0.1, 0.2, 1) 1s forwards;
	}

	.mz-partners.is-marquee .mz-partner-list {
		animation: mz-marquee var(--mz-marquee-dur, 30s) linear infinite;
	}
	.mz-partners.is-marquee:hover .mz-partner-list {
		animation-play-state: paused;
	}

	.mz-line:hover::after,
	.mz-line:focus-within::after {
		animation: mz-ants 0.9s linear infinite;
	}
}

@keyframes mz-rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes mz-swipe { to { background-size: 100% 100%; } }
@keyframes mz-marquee { to { transform: translateX(-50%); } }
@keyframes mz-ants { to { background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px; } }
@keyframes mz-reveal { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes mz-sew { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mz-sew-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mz-march { to { background-position: 15px 0; } }
@keyframes mz-march-y { to { background-position: 0 15px; } }
@keyframes mz-lift { to { box-shadow: 0 12px 30px -20px rgba(12, 22, 40, 0.5); } }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* Sections rise in as they enter the screen. */
		:is(.mz-section-head, .mz-line, .mz-step, .mz-plant, .is-style-mz-care, .mz-stat, .mz-value,
			.mz-plant-row, .mz-partner-card, .mz-equip-col, .mz-split > *, .mz-about-copy > *,
			.mz-cta-copy > *, .mz-contact-list > .mz-contact-item) {
			animation: mz-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}
		:is(.mz-lines, .mz-plants, .mz-values, .mz-stats, .mz-partner-grid) > :nth-child(2) { animation-range: entry 8% entry 78%; }
		:is(.mz-lines, .mz-plants, .mz-values, .mz-stats, .mz-partner-grid) > :nth-child(3) { animation-range: entry 16% entry 86%; }
		:is(.mz-stats, .mz-partner-grid) > :nth-child(4) { animation-range: entry 24% entry 94%; }

		/* Orange seams sew themselves across the production steps. */
		.mz-step {
			position: relative;
		}
		.mz-step::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: -1px;
			height: 2px;
			background: repeating-linear-gradient(90deg, var(--mz-signal) 0 9px, transparent 9px 15px);
			transform-origin: left;
			animation: mz-sew linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 40%;
		}

		/* The thread between the factories is sewn in, then keeps running. */
		.mz-plants::before {
			transform-origin: left;
			animation: mz-sew linear both, mz-march 1.1s linear infinite;
			animation-timeline: view(), auto;
			animation-range: entry 20% cover 45%, normal;
		}

		/* The header lifts off the page once you scroll. */
		.mz-header {
			animation: mz-lift linear both;
			animation-timeline: scroll(root);
			animation-range: 0 140px;
		}
	}

	@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
		.mz-plants::before {
			transform-origin: top;
			animation-name: mz-sew-y, mz-march-y;
		}
	}
}

/* No motion while editing. */
.editor-styles-wrapper :is([class*="mz-"], [class*="is-style-mz-"]),
.editor-styles-wrapper :is([class*="mz-"], [class*="is-style-mz-"])::before,
.editor-styles-wrapper :is([class*="mz-"], [class*="is-style-mz-"])::after,
.editor-styles-wrapper .mz-hero-copy > *,
.editor-styles-wrapper .mz-hero h1 em {
	animation: none !important;
}

.editor-styles-wrapper .mz-hero h1 em {
	background-size: 100% 100%;
}


/* ---------- Wordmark motion ----------
   On load the letters rise out of a slot and stretch to full width (Archivo's width axis),
   the stitch sews in underneath and "d.o.o. · Pale" types out like a printed label.
   On hover the letters squeeze one after another and the stitch runs.
   On scroll the whole header condenses. */
@media (prefers-reduced-motion: no-preference) {
	.mz-wm-word > span {
		transition: font-stretch 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
		transition-delay: calc(var(--i, 0) * 45ms);
		animation: mz-wm-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
		animation-delay: calc(0.1s + var(--i, 0) * 80ms);
	}
	.mz-wm-word::after {
		animation: mz-wm-seam 0.7s cubic-bezier(0.6, 0.1, 0.2, 1) 0.55s backwards;
	}
	.mz-wordmark:hover .mz-wm-word::after,
	.mz-wordmark:focus-visible .mz-wm-word::after {
		animation: mz-wm-seam 0.7s cubic-bezier(0.6, 0.1, 0.2, 1) 0.55s backwards, mz-wm-march 0.8s linear infinite;
	}
	.mz-wm-sub {
		animation: mz-wm-type 0.65s steps(13, end) 0.85s backwards;
	}
	.mz-footer-mark a {
		transition: font-stretch 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
	}
}

.mz-footer-mark a:hover {
	font-stretch: 95%;
}

@keyframes mz-wm-in {
	from { opacity: 0; transform: translateY(75%); font-stretch: 62%; }
	60% { opacity: 1; }
	to { opacity: 1; transform: none; font-stretch: 125%; }
}
@keyframes mz-wm-seam { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mz-wm-march { to { background-position: 11px 0; } }
@keyframes mz-wm-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mz-header-condense { to { min-height: 60px; } }
@keyframes mz-wm-condense { to { font-size: 1.3rem; font-stretch: 108%; } }
@keyframes mz-wm-sub-out { to { opacity: 0; translate: -8px 0; visibility: hidden; } }

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.mz-header-inner {
			animation: mz-header-condense linear both;
			animation-timeline: scroll(root);
			animation-range: 0 160px;
		}
		.mz-wm-word {
			animation: mz-wm-condense linear both;
			animation-timeline: scroll(root);
			animation-range: 0 160px;
		}
		.mz-wm-sub {
			animation: mz-wm-type 0.65s steps(13, end) 0.85s backwards, mz-wm-sub-out linear both;
			animation-timeline: auto, scroll(root);
			animation-range: normal, 0 110px;
		}
	}
}

.editor-styles-wrapper .mz-wm-word > span,
.editor-styles-wrapper .mz-wm-word,
.editor-styles-wrapper .mz-wm-word::after,
.editor-styles-wrapper .mz-wm-sub {
	animation: none !important;
}

/* ---------- Textile backgrounds (canvas added by assets/js/mraz.js) ---------- */
.mz-fx-host {
	position: relative;
	isolation: isolate;
}

.mz-fx-host > :not(.mz-fx-canvas) {
	position: relative;
	z-index: 1;
}

.mz-fx-canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: 100%;
	margin: 0 !important;
	pointer-events: none;
}

/* The orange contact band is woven twill that slowly feeds through, like fabric under a needle. */
.mz-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.mz-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: repeating-linear-gradient(-45deg, rgba(20, 35, 59, 0.07) 0 2px, transparent 2px 9px);
	background-size: 127.28px 127.28px;
}

/* A stitch runs along the top edge of the footer. */
.mz-footer {
	position: relative;
}

.mz-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 10px;
	height: 2px;
	background: repeating-linear-gradient(90deg, rgba(255, 106, 19, 0.65) 0 9px, transparent 9px 15px);
}

@media (prefers-reduced-motion: no-preference) {
	.mz-cta::before {
		animation: mz-feed 14s linear infinite;
	}
	.mz-footer::before {
		animation: mz-march 1.2s linear infinite;
	}
}

@keyframes mz-feed { to { background-position: 127.28px 0; } }