/* The assigned widget box owns structural layout; Elementor owns control breakpoints. */
.elementor-widget-noise-process-steps {
	container: ndw-process-steps / inline-size;
	/* Supply a preferred width when Elementor asks for intrinsic (auto) sizing. */
	contain-intrinsic-inline-size: 1140px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.ndw-process-steps {
	--ndw-process-columns: 4;
	--ndw-process-connector-color: #a9b2bc;
	--ndw-process-connector-style: dashed;
	--ndw-process-connector-width: 1px;
	--ndw-process-connector-opacity: .4;
	--ndw-process-connector-top: 40px;
	--ndw-process-hover-lift: 6px;
	--ndw-process-motion-duration: 550ms;
	--ndw-process-easing: cubic-bezier(.16, 1, .3, 1);
	width: 100%;
}

.ndw-process-steps__inner {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
}

.ndw-process-steps__showcase-list,
.ndw-process-steps__legacy-list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ndw-process-steps__showcase-list {
	grid-template-columns: repeat(var(--ndw-process-columns), minmax(0, 1fr));
	gap: 28px;
}

.ndw-process-step {
	position: relative;
	min-width: 0;
}

.ndw-process-step__title,
.ndw-process-step__description,
.ndw-process-step__number,
.ndw-process-step__accent {
	transition:
		color var(--ndw-process-motion-duration) var(--ndw-process-easing),
		background-color var(--ndw-process-motion-duration) var(--ndw-process-easing),
		border-color var(--ndw-process-motion-duration) var(--ndw-process-easing),
		opacity var(--ndw-process-motion-duration) var(--ndw-process-easing),
		transform var(--ndw-process-motion-duration) var(--ndw-process-easing);
}

:where(.ndw-process-step__title) {
	margin: 24px 0 0;
	color: #15191e;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.2;
}

:where(.ndw-process-step__description) {
	margin-top: 14px;
	color: #4b5563;
	font-size: 15px;
	line-height: 1.62;
}

.ndw-process-step__description > :first-child {
	margin-top: 0;
}

.ndw-process-step__description > :last-child {
	margin-bottom: 0;
}

.ndw-process-step__image {
	width: 100%;
	height: 220px;
	margin: 22px 0;
	overflow: hidden;
	border-radius: 6px;
	background: #e6ecea;
}

/* `.elementor img` is (0,1,1) and ties with a single class, so the specificity
   has to be raised. The class is repeated on the element itself rather than
   chained to a container: this widget has six layouts and the Accordion (Legacy)
   one wraps its step in `.ndw-process-step-details`, not `.ndw-process-step`, so
   an ancestor chain silently stopped matching there and the image lost its
   `cover` sizing. Repeating the class gives (0,2,1) while assuming nothing about
   the markup tree, and still loses to any Elementor control. */
.ndw-process-step__image.ndw-process-step__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Accent grid: the primary layout. */
.ndw-process-steps--accent-grid .ndw-process-steps__showcase-list {
	position: relative;
	gap: 0;
}

.ndw-process-steps--accent-grid.ndw-process-steps--connectors .ndw-process-steps__showcase-list::before {
	position: absolute;
	z-index: 0;
	top: var(--ndw-process-connector-top);
	right: calc(50% / var(--ndw-process-columns));
	left: calc(50% / var(--ndw-process-columns));
	border-top-color: var(--ndw-process-connector-color);
	border-top-style: var(--ndw-process-connector-style);
	border-top-width: var(--ndw-process-connector-width);
	content: "";
	opacity: var(--ndw-process-connector-opacity);
	pointer-events: none;
}

.ndw-process-step--accent {
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 8px;
	text-align: center;
	transition: transform var(--ndw-process-motion-duration) var(--ndw-process-easing);
}

.ndw-process-step--accent:hover {
	transform: translateY(calc(-1 * var(--ndw-process-hover-lift)));
}

.ndw-process-step__number--display {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0 0 16px;
	color: var(--e-global-color-accent, #78d9e8);
	font-size: 80px;
	font-weight: 900;
	line-height: 1;
	opacity: .35;
}

.ndw-process-step--accent:hover .ndw-process-step__number--display {
	opacity: .52;
	transform: translateY(-4px) scale(1.025);
}

.ndw-process-step__accent {
	display: block;
	width: 40px;
	height: 3px;
	margin: 0 auto 20px;
	margin-inline: var(--ndw-process-inline, auto);
	border-radius: 2px;
	background: var(--e-global-color-accent, #b51f2a);
	transform-origin: center;
}

.ndw-process-step--accent:hover .ndw-process-step__accent {
	transform: scaleX(1.25);
}

.ndw-process-step--accent .ndw-process-step__title {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
}

.ndw-process-step--accent .ndw-process-step__description {
	max-width: 320px;
	margin: 0 auto;
	margin-inline: var(--ndw-process-inline, auto);
	font-size: 14px;
	line-height: 1.65;
}

/* Premium expanding cards. */
.ndw-process-steps__premium-accordion {
	display: flex;
	align-items: stretch;
	gap: 12px;
}

.ndw-process-step--premium {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
	min-height: 300px;
	overflow: hidden;
	padding: 24px;
	border: 1px solid #e3e7e6;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition:
		flex-grow var(--ndw-process-motion-duration) var(--ndw-process-easing),
		background-color var(--ndw-process-motion-duration) var(--ndw-process-easing),
		border-color var(--ndw-process-motion-duration) var(--ndw-process-easing),
		box-shadow var(--ndw-process-motion-duration) var(--ndw-process-easing),
		transform var(--ndw-process-motion-duration) var(--ndw-process-easing);
}

.ndw-process-step--premium:hover {
	border-color: rgb(31 118 103 / 35%);
	transform: translateY(calc(-.5 * var(--ndw-process-hover-lift)));
}

.ndw-process-step--premium.is-active {
	flex-grow: 2.4;
	background: #f5f9f8;
}

/* Two classes on purpose: `.elementor-kit-N button` from Elementor's Theme Style
   outranks a single class and would repaint this toggle with the site button
   background and padding. */
.ndw-process-step .ndw-process-step__toggle {
	position: relative;
	align-self: flex-end;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #e8f3f0;
	box-shadow: none;
	color: var(--e-global-color-accent, #1f7667);
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transform: rotate(0);
	transition:
		color var(--ndw-process-motion-duration) var(--ndw-process-easing),
		background-color var(--ndw-process-motion-duration) var(--ndw-process-easing),
		transform var(--ndw-process-motion-duration) var(--ndw-process-easing);
}

.ndw-process-step__toggle span::before,
.ndw-process-step__toggle span::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	background: currentColor;
	content: "";
	transform: translate(-50%, -50%);
}

.ndw-process-step__toggle span::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* A closed card shows "+" (open me); the open card turns it into "x" (close).
   Until 1.0.12 the two were swapped. */
.ndw-process-step--premium.is-active .ndw-process-step__toggle {
	transform: rotate(45deg);
}

.ndw-process-step__toggle:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.ndw-process-step__premium-panel {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: 18px;
	opacity: 0;
	transition:
		grid-template-rows var(--ndw-process-motion-duration) var(--ndw-process-easing),
		opacity var(--ndw-process-motion-duration) var(--ndw-process-easing);
}

.ndw-process-step__premium-panel > div {
	overflow: hidden;
}

.ndw-process-step--premium.is-active .ndw-process-step__premium-panel {
	grid-template-rows: 1fr;
	opacity: 1;
}

.ndw-process-step__premium-panel .ndw-process-step__description {
	margin: 0 0 22px;
}

.ndw-process-step__premium-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: auto;
	gap: 20px;
}

/* The title keeps at least ~10em beside the photo; when the card is narrower
   the photo wraps to the next line instead of covering the title. The minimum
   width stays `auto` on purpose: it is the number plus the longest word of the
   title, so a large title font also pushes the photo down. `min-width: 0` let
   the longest word spill under the photo on phones (up to 1.0.12). `max-width`
   keeps a single word wider than the card breaking inside the card. */
.ndw-process-step__premium-meta {
	display: flex;
	flex: 1 1 10em;
	align-items: center;
	max-width: 100%;
	gap: 12px;
}

.ndw-process-step__number--premium {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #e8f3f0;
	color: var(--e-global-color-accent, #1f7667);
	font-size: 13px;
	font-weight: 750;
	line-height: 1;
}

/* `base.css` sets `overflow-wrap: anywhere`, which lets a narrow card break a
   title after every letter. Here words only break when a single word is wider
   than the card. */
.ndw-process-step--premium .ndw-process-step__title {
	margin: 0;
	font-size: 18px;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* A collapsed card is narrow while the cards sit in a row. Number, title and
   image used to share one line, which left the title about 0px wide, so it
   printed one letter per line (up to 1.0.3). Collapsed cards stack them instead,
   giving the title the full card width. The column layout below restores the
   single line, because there every card is full width. */
.ndw-process-step--premium:not(.is-active) .ndw-process-step__premium-footer,
.ndw-process-step--premium:not(.is-active) .ndw-process-step__premium-meta {
	flex-direction: column;
	align-items: flex-start;
}

.ndw-process-step--premium:not(.is-active) .ndw-process-step__premium-meta {
	flex: 0 1 auto;
	width: 100%;
}

.ndw-process-step__image--premium {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	margin: 0;
	border-radius: 50%;
	transition:
		width var(--ndw-process-motion-duration) var(--ndw-process-easing),
		height var(--ndw-process-motion-duration) var(--ndw-process-easing),
		transform var(--ndw-process-motion-duration) var(--ndw-process-easing);
}

.ndw-process-step--premium.is-active .ndw-process-step__image--premium {
	width: 140px;
	height: 140px;
}

.ndw-process-step--premium:hover .ndw-process-step__image--premium {
	transform: scale(1.025);
}

/* Tinted cards with backdrop numerals. */
.ndw-process-step--tinted {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 260px;
	overflow: hidden;
	padding: 36px 28px 32px;
	border-radius: 8px;
	background: #edf6f3;
	text-align: left;
	transition:
		box-shadow var(--ndw-process-motion-duration) var(--ndw-process-easing),
		transform var(--ndw-process-motion-duration) var(--ndw-process-easing);
}

.ndw-process-step--tinted:hover {
	box-shadow: 0 16px 34px rgb(20 28 38 / 12%);
	transform: translateY(calc(-1 * var(--ndw-process-hover-lift)));
}

.ndw-process-step--tint-two {
	background: #eef3f8;
}

.ndw-process-step--tint-three {
	background: #f7f1eb;
}

.ndw-process-step--tint-four {
	background: #f6f4e9;
}

.ndw-process-step--tinted .ndw-process-step__number--display {
	position: absolute;
	z-index: 0;
	top: 8px;
	right: 18px;
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 96px;
	line-height: 1;
	opacity: .12;
	pointer-events: none;
}

.ndw-process-step__label {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	margin-bottom: 44px;
	padding: 7px 11px;
	border-radius: 999px;
	background: rgb(255 255 255 / 72%);
	color: #1f7667;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	gap: 7px;
}

.ndw-process-step__label > span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.ndw-process-step--tinted .ndw-process-step__title {
	position: relative;
	z-index: 1;
	margin: auto 0 10px;
	font-size: 20px;
}

.ndw-process-step--tinted .ndw-process-step__description {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 15px;
}

/* Preserved NMH layouts for existing instances. */
.ndw-process-steps__legacy-list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.ndw-process-step--legacy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px;
	border: 1px solid rgb(20 28 38 / 12%);
	border-radius: 8px;
	background: #fff;
	transition:
		background-color var(--ndw-process-motion-duration) var(--ndw-process-easing),
		border-color var(--ndw-process-motion-duration) var(--ndw-process-easing),
		transform var(--ndw-process-motion-duration) var(--ndw-process-easing);
}

.ndw-process-steps--linear .ndw-process-step--legacy {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

.ndw-process-steps--linear.ndw-process-steps--connectors .ndw-process-step--legacy:not(:last-child)::after {
	position: absolute;
	z-index: 0;
	top: 54px;
	left: 80px;
	width: calc(100% - 24px);
	border-top-color: var(--ndw-process-connector-color);
	border-top-style: var(--ndw-process-connector-style);
	border-top-width: var(--ndw-process-connector-width);
	content: "";
	opacity: var(--ndw-process-connector-opacity);
	pointer-events: none;
}

.ndw-process-step__number--legacy {
	position: relative;
	z-index: 1;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #e8f3f0;
	color: var(--e-global-color-accent, #1f7667);
	font-size: 14px;
	font-weight: 750;
	line-height: 1;
}

.ndw-process-steps__accordion {
	display: grid;
	gap: 14px;
}

.ndw-process-step-details {
	overflow: hidden;
	border: 1px solid rgb(20 28 38 / 12%);
	border-radius: 8px;
	background: #fff;
}

.ndw-process-step-details__title {
	display: flex;
	align-items: center;
	padding: 28px;
	gap: 18px;
	cursor: pointer;
	list-style: none;
}

.ndw-process-step-details__title::-webkit-details-marker {
	display: none;
}

.ndw-process-step-details__title .ndw-process-step__title {
	flex: 1 1 auto;
	margin: 0;
}

.ndw-process-step-details__marker {
	position: relative;
	width: 18px;
	height: 18px;
}

.ndw-process-step-details__marker::before,
.ndw-process-step-details__marker::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	background: currentColor;
	content: "";
	transform: translate(-50%, -50%);
}

.ndw-process-step-details__marker::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform 180ms ease;
}

.ndw-process-step-details[open] .ndw-process-step-details__marker::after {
	transform: translate(-50%, -50%) rotate(0);
}

.ndw-process-step-details__title:focus-visible {
	outline: 3px solid #1f7667;
	outline-offset: -4px;
}

.ndw-process-step-details__body {
	padding: 0 28px 28px;
}

.ndw-process-step-details__body .ndw-process-step__description {
	margin-top: 0;
}

/* Narrow widgets cap the chosen column count at two but never raise it. The
   showcase control writes only --ndw-process-columns, so no !important is
   needed there. The legacy control also writes grid-template-columns through
   Elementor's more specific selector, which is the only reason its cap keeps
   !important; min() leaves a smaller user value intact. */
@container ndw-process-steps (max-width: 1024px) {
	@supports (grid-template-columns: repeat(min(1, 2), 1fr)) {
		.ndw-process-steps__showcase-list {
			grid-template-columns: repeat(min(var(--ndw-process-columns), 2), minmax(0, 1fr));
		}

		.ndw-process-steps__legacy-list {
			grid-template-columns: repeat(min(var(--ndw-process-legacy-columns, 2), 2), minmax(0, 1fr)) !important;
		}
	}

	.ndw-process-steps--accent-grid.ndw-process-steps--connectors .ndw-process-steps__showcase-list::before,
	.ndw-process-steps--linear.ndw-process-steps--connectors .ndw-process-step--legacy::after {
		display: none;
	}

	.ndw-process-steps__legacy-list {
		gap: 20px;
	}

	.ndw-process-steps__premium-accordion {
		flex-direction: column;
	}

	/* In a column every card must take its content height. `flex: 1 1 0` with
	   `min-height: 0` and `overflow: hidden` collapsed each card to its padding
	   (370x50 on a 390px phone, up to 1.0.3), hiding the whole step. */
	.ndw-process-step--premium,
	.ndw-process-step--premium.is-active {
		flex: 0 0 auto;
		min-height: 0;
	}

	.ndw-process-step--premium:not(.is-active) .ndw-process-step__premium-footer,
	.ndw-process-step--premium:not(.is-active) .ndw-process-step__premium-meta {
		flex-direction: row;
		align-items: center;
	}

	.ndw-process-step--premium:not(.is-active) .ndw-process-step__premium-meta {
		flex: 1 1 auto;
		width: auto;
	}

	.ndw-process-step__image--premium {
		width: 64px;
		height: 64px;
	}

	.ndw-process-step--premium.is-active .ndw-process-step__image--premium {
		width: 96px;
		height: 96px;
	}
}

@container ndw-process-steps (max-width: 767px) {
	.ndw-process-steps__showcase-list {
		--ndw-process-columns: 1 !important;
	}

	.ndw-process-steps__legacy-list {
		grid-template-columns: 1fr !important;
		gap: 14px;
	}

	.ndw-process-steps--hide-mobile-connectors .ndw-process-step::after,
	.ndw-process-steps--hide-mobile-connectors .ndw-process-steps__showcase-list::before {
		display: none;
	}

	.ndw-process-step--accent {
		padding-inline: 4px;
	}

	.ndw-process-step__number--display {
		font-size: 64px;
	}

	.ndw-process-step--premium,
	.ndw-process-step--tinted {
		padding: 22px;
	}

	.ndw-process-step__premium-footer {
		align-items: center;
	}

	.ndw-process-step-details__title {
		padding: 20px;
	}

	.ndw-process-step-details__body {
		padding: 0 20px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ndw-process-steps *,
	.ndw-process-steps *::before,
	.ndw-process-steps *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		transition-delay: 0ms !important;
	}

	.ndw-process-step--accent:hover,
	.ndw-process-step--premium:hover,
	.ndw-process-step--tinted:hover {
		transform: none;
	}
}