.mk-process-section {
	--mk-background: #f7f5f1;
	--mk-foreground: #1a1512;
	--mk-primary: #865634;
	--mk-muted: #e8e4dd;
	--mk-muted-foreground: #4c4742;
	--mk-border: #e1ddd7;
	--mk-peach: #d9ac98;
	--mk-warm-gray: #928f88;
	--mk-warm-brown: #865634;
	--mk-warm-brown-dark: #2d1e14;
	--mk-marker-background: var(--mk-background);
	--mk-number-active-color: rgba(255, 255, 255, .7);
	--mk-title-active-color: #fff;
	--mk-description-active-color: rgba(255, 255, 255, .75);
	--mk-path-width: 3;
	--mk-path-dash: 12 8;
	--mk-path-opacity: .5;
	--mk-card-height: 112px;
	--mk-card-radius: 16px;
	--mk-card-inactive-opacity: .15;
	--mk-desktop-text-gap: 64px;
	--mk-marker-size: 72px;
	--mk-icon-size: 24px;
	--mk-marker-border-width: 2px;
	--mk-mobile-marker-size: 40px;
	--mk-mobile-card-radius: 8px;
	--mk-transition-duration: 700ms;
	--mk-reveal-distance: 30px;
	--mk-dynamic-card-height: var(--mk-card-height);
	--mk-dynamic-row-height: 128px;
	box-sizing: border-box;
	background: var(--mk-background);
	color: var(--mk-foreground);
	font-family: "DM Sans", Arial, sans-serif;
	overflow: hidden;
	padding: 128px 24px;
	position: relative;
}

.mk-process-section *,
.mk-process-section *::before,
.mk-process-section *::after {
	box-sizing: border-box;
}

.mk-process-container {
	margin: 0 auto;
	max-width: 1152px;
	width: 100%;
}

.mk-process-intro {
	margin-bottom: 96px;
	text-align: center;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--mk-transition-duration) ease, transform var(--mk-transition-duration) ease;
}

.mk-process-section.is-visible .mk-process-intro,
.mk-process-section.mk-process-keep-visible .mk-process-intro,
.mk-process-section.mk-process-editor-preview .mk-process-intro,
.elementor-editor-active .mk-process-section .mk-process-intro {
	opacity: 1;
	transform: translateY(0);
}

.mk-process-intro p {
	color: var(--mk-muted-foreground);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.75;
	margin: 0;
}

.mk-process-desktop {
	display: none;
	min-height: 1000px;
	position: relative;
}

.mk-process-path-svg {
	inset: 0;
	height: 100%;
	pointer-events: none;
	position: absolute;
	width: 100%;
}

.mk-process-path-base {
	opacity: var(--mk-path-opacity);
	stroke: var(--mk-warm-gray);
	stroke-dasharray: var(--mk-path-dash);
	stroke-width: var(--mk-path-width);
}

.mk-process-path-progress {
	stroke: var(--mk-warm-brown);
	stroke-width: var(--mk-path-width);
	will-change: stroke-dashoffset;
}

.mk-process-step-desktop {
	position: absolute;
	transform: translateY(-50%);
	width: 100%;
}

.mk-process-step-inner {
	align-items: center;
	display: flex;
	height: var(--mk-dynamic-row-height);
	position: relative;
}

.mk-process-card-bg {
	height: var(--mk-dynamic-card-height);
	opacity: var(--mk-card-inactive-opacity);
	position: absolute;
	transition: opacity var(--mk-transition-duration) ease, transform var(--mk-transition-duration) ease, background var(--mk-transition-duration) ease;
}

.mk-process-step-desktop.is-left .mk-process-card-bg {
	background: var(--mk-muted);
	border-radius: calc(var(--mk-card-radius) * .75) var(--mk-card-radius) var(--mk-card-radius) calc(var(--mk-card-radius) * .75);
	left: 0;
	right: 60%;
	transform: scaleX(.8);
	transform-origin: right center;
}

.mk-process-step-desktop.is-right .mk-process-card-bg {
	background: var(--mk-muted);
	border-radius: var(--mk-card-radius) calc(var(--mk-card-radius) * .75) calc(var(--mk-card-radius) * .75) var(--mk-card-radius);
	left: 60%;
	right: 0;
	transform: scaleX(.8);
	transform-origin: left center;
}

.mk-process-step-desktop.is-active .mk-process-card-bg,
.mk-process-section.mk-process-keep-visible .mk-process-step-desktop .mk-process-card-bg,
.mk-process-section.mk-process-editor-preview .mk-process-step-desktop .mk-process-card-bg,
.elementor-editor-active .mk-process-section .mk-process-step-desktop .mk-process-card-bg {
	background: linear-gradient(135deg, var(--mk-warm-brown), var(--mk-warm-brown-dark));
	opacity: 1;
	transform: scaleX(1);
}

.mk-process-copy {
	position: relative;
	z-index: 10;
	opacity: 0;
	transition: opacity var(--mk-transition-duration) ease, transform var(--mk-transition-duration) ease;
}

.mk-process-step-desktop.is-left .mk-process-copy {
	padding-right: var(--mk-desktop-text-gap);
	text-align: right;
	transform: translateX(calc(var(--mk-reveal-distance) * -1));
	width: 38%;
}

.mk-process-step-desktop.is-right .mk-process-copy {
	left: 62%;
	padding-left: var(--mk-desktop-text-gap);
	position: absolute;
	text-align: left;
	transform: translateX(var(--mk-reveal-distance));
}

.mk-process-step-desktop.is-active .mk-process-copy,
.mk-process-section.mk-process-keep-visible .mk-process-step-desktop .mk-process-copy,
.mk-process-section.mk-process-editor-preview .mk-process-step-desktop .mk-process-copy,
.elementor-editor-active .mk-process-section .mk-process-step-desktop .mk-process-copy {
	opacity: 1;
	transform: translateX(0);
}

.mk-process-number {
	color: var(--mk-peach);
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2em;
	line-height: 1.35;
	margin-bottom: 4px;
	text-transform: uppercase;
	transition: color 500ms ease;
}

.mk-process-copy h3,
.mk-process-mobile-card h3 {
	color: var(--mk-foreground);
	font-family: "Playfair Display", Georgia, serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.35;
	margin: 0 0 4px;
	transition: color 500ms ease;
}

.mk-process-copy p,
.mk-process-mobile-card p {
	color: var(--mk-muted-foreground);
	font-size: 14px;
	line-height: 1.625;
	margin: 0;
	transition: color 500ms ease;
}

.mk-process-step-desktop.is-active .mk-process-number,
.mk-process-mobile-step.is-active .mk-process-number,
.mk-process-section.mk-process-keep-visible .mk-process-number,
.mk-process-section.mk-process-editor-preview .mk-process-number,
.elementor-editor-active .mk-process-section .mk-process-number {
	color: var(--mk-number-active-color);
}

.mk-process-step-desktop.is-active h3,
.mk-process-mobile-step.is-active h3,
.mk-process-section.mk-process-keep-visible h3,
.mk-process-section.mk-process-editor-preview h3,
.elementor-editor-active .mk-process-section h3 {
	color: var(--mk-title-active-color);
}

.mk-process-step-desktop.is-active p,
.mk-process-mobile-step.is-active p,
.mk-process-section.mk-process-keep-visible .mk-process-copy p,
.mk-process-section.mk-process-keep-visible .mk-process-mobile-card p,
.mk-process-section.mk-process-editor-preview .mk-process-copy p,
.mk-process-section.mk-process-editor-preview .mk-process-mobile-card p,
.elementor-editor-active .mk-process-section .mk-process-copy p,
.elementor-editor-active .mk-process-section .mk-process-mobile-card p {
	color: var(--mk-description-active-color);
}

.mk-process-marker {
	position: absolute;
	z-index: 20;
}

.mk-process-step-desktop.is-left .mk-process-marker {
	left: 38%;
	transform: translateX(-50%);
}

.mk-process-step-desktop.is-right .mk-process-marker {
	left: 62%;
	transform: translateX(-50%);
}

.mk-process-icon {
	align-items: center;
	background: var(--mk-marker-background);
	border: var(--mk-marker-border-width) solid var(--mk-warm-gray);
	border-radius: 999px;
	color: var(--mk-warm-gray);
	display: flex;
	height: var(--mk-marker-size);
	justify-content: center;
	transition: border-color 500ms ease, box-shadow 500ms ease, color 500ms ease;
	width: var(--mk-marker-size);
}

.mk-process-step-desktop.is-active .mk-process-icon,
.mk-process-mobile-step.is-active .mk-process-mobile-icon,
.mk-process-section.mk-process-keep-visible .mk-process-icon,
.mk-process-section.mk-process-keep-visible .mk-process-mobile-icon,
.mk-process-section.mk-process-editor-preview .mk-process-icon,
.mk-process-section.mk-process-editor-preview .mk-process-mobile-icon,
.elementor-editor-active .mk-process-section .mk-process-icon,
.elementor-editor-active .mk-process-section .mk-process-mobile-icon {
	border-color: var(--mk-warm-brown);
	box-shadow: 0 10px 15px -3px rgba(134, 86, 52, .15), 0 4px 6px -4px rgba(134, 86, 52, .15);
	color: var(--mk-warm-brown);
}

.mk-process-icon-svg {
	display: block;
	height: var(--mk-icon-size);
	width: var(--mk-icon-size);
}

.mk-process-mobile {
	display: block;
	position: relative;
}

.mk-process-mobile-line {
	background: var(--mk-border);
	bottom: 0;
	left: 18px;
	position: absolute;
	top: 0;
	width: 2px;
}

.mk-process-mobile-line-progress {
	background: var(--mk-peach);
	height: 0;
	transition: height 500ms ease;
	width: 100%;
}

.mk-process-mobile-step {
	display: flex;
	gap: 20px;
	margin-bottom: 40px;
	position: relative;
}

.mk-process-mobile-step:last-child {
	margin-bottom: 0;
}

.mk-process-mobile-icon {
	align-items: center;
	background: var(--mk-marker-background);
	border: var(--mk-marker-border-width) solid var(--mk-warm-gray);
	border-radius: 999px;
	color: var(--mk-warm-gray);
	display: flex;
	flex: 0 0 auto;
	height: var(--mk-mobile-marker-size);
	justify-content: center;
	position: relative;
	transition: border-color 500ms ease, box-shadow 500ms ease, color 500ms ease;
	width: var(--mk-mobile-marker-size);
	z-index: 10;
}

.mk-process-mobile-icon .mk-process-icon-svg {
	height: 16px;
	width: 16px;
}

.mk-process-mobile-card {
	border-radius: var(--mk-mobile-card-radius);
	flex: 1;
	opacity: .3;
	padding: 12px 16px;
	transform: translateY(10px);
	transition: opacity var(--mk-transition-duration) ease, transform var(--mk-transition-duration) ease, background var(--mk-transition-duration) ease;
}

.mk-process-mobile-step.is-active .mk-process-mobile-card,
.mk-process-section.mk-process-keep-visible .mk-process-mobile-card,
.mk-process-section.mk-process-editor-preview .mk-process-mobile-card,
.elementor-editor-active .mk-process-section .mk-process-mobile-card {
	background: linear-gradient(135deg, var(--mk-warm-brown), var(--mk-warm-brown-dark));
	opacity: 1;
	transform: translateY(0);
}

.mk-process-mobile-card .mk-process-number {
	letter-spacing: .15em;
	margin-bottom: 0;
}

.mk-process-mobile-card h3 {
	font-size: 18px;
	margin-top: 4px;
}

@media (min-width: 768px) {
	.mk-process-desktop {
		display: block;
	}

	.mk-process-mobile {
		display: none;
	}
}

@media (min-width: 1024px) {
	.mk-process-section {
		padding: 192px 48px;
	}
}

@media (max-width: 767px) {
	.mk-process-section {
		padding: 96px 24px;
	}

	.mk-process-intro {
		margin-bottom: 64px;
	}

	.mk-process-intro p {
		font-size: 16px;
	}
}