/* Structural thresholds follow the assigned widget width. */
.elementor-widget-noise-services-grid {
	container: ndw-services-grid / 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-services-grid {
	--ndw-service-image-gap: 0px;
	width: 100%;
}

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

.ndw-services-grid__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.ndw-service-card {
	position: relative;
	display: flex;
	min-width: 0;
	overflow: hidden;
	border: 1px solid rgb(20 28 38 / 12%);
	border-radius: 8px;
	background: #fff;
	transition: translate 280ms ease, border-color 280ms ease, background-color 280ms ease, box-shadow 280ms ease;
}

.ndw-service-card__accent {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	background: var(--e-global-color-accent, #1f7667);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 280ms ease;
	pointer-events: none;
}

.ndw-services-grid--image-top .ndw-service-card,
.ndw-services-grid--image-bottom .ndw-service-card,
.ndw-services-grid--image-none .ndw-service-card {
	flex-direction: column;
}

.ndw-services-grid--image-left .ndw-service-card,
.ndw-services-grid--image-right .ndw-service-card {
	flex-direction: row;
}

.ndw-services-grid--image-right .ndw-service-card__body {
	order: 1;
}

.ndw-services-grid--image-right .ndw-service-card__image {
	order: 2;
}

.ndw-service-card__image {
	flex: 0 0 auto;
	width: 100%;
	height: 220px;
	overflow: hidden;
	background: #e6ecea;
}

.ndw-services-grid--image-left .ndw-service-card__image,
.ndw-services-grid--image-right .ndw-service-card__image {
	width: 40%;
	height: auto;
	min-height: 100%;
}

.ndw-services-grid--image-top .ndw-service-card__image {
	margin-bottom: var(--ndw-service-image-gap);
}

.ndw-services-grid--image-bottom .ndw-service-card__image {
	margin-top: var(--ndw-service-image-gap);
}

.ndw-services-grid--image-left .ndw-service-card__image {
	margin-right: var(--ndw-service-image-gap);
}

.ndw-services-grid--image-right .ndw-service-card__image {
	margin-left: var(--ndw-service-image-gap);
}

.ndw-service-card__image.ndw-service-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--ndw-service-image-x, 50%) var(--ndw-service-image-y, 50%);
	transform-origin: center;
	transition: scale 280ms ease;
}

.ndw-services-grid--image-zoom-yes .ndw-service-card:hover .ndw-service-card__image.ndw-service-card__image img {
	scale: 1.04;
}

.ndw-services-grid--hover-top-line .ndw-service-card:hover .ndw-service-card__accent {
	transform: scaleX(1);
}

.ndw-services-grid--hover-top-line .ndw-service-card:hover {
	translate: 0 -4px;
	box-shadow: 0 20px 60px rgb(15 25 35 / 10%);
}

.ndw-services-grid--hover-lift .ndw-service-card__accent,
.ndw-services-grid--hover-overlay-fill .ndw-service-card__accent,
.ndw-services-grid--hover-border-glow .ndw-service-card__accent,
.ndw-services-grid--hover-none .ndw-service-card__accent {
	display: none;
}

.ndw-services-grid--hover-overlay-fill .ndw-service-card {
	cursor: pointer;
}

.ndw-services-grid--hover-overlay-fill .ndw-service-card:hover .ndw-service-card__icon svg,
.ndw-services-grid--hover-overlay-fill .ndw-service-card:hover .ndw-service-card__icon i {
	color: inherit;
	fill: currentColor;
}

.ndw-services-grid--hover-border-glow .ndw-service-card {
	border-color: transparent;
}

.ndw-services-grid--hover-none .ndw-service-card:hover {
	translate: none;
	box-shadow: none;
}

.ndw-service-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: 28px;
}

/* An inline SVG is painted by `fill`, not `color`. The hover-overlay-fill state
   below already declared this; the resting state did not, so the Icon colour
   control only ever showed on hover. `fill` is inherited, so multicolour artwork
   that sets its own is left alone. */
.ndw-service-card__icon svg {
	fill: currentColor;
}

.ndw-service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 20px;
	border-radius: 6px;
	/* No `background` or `color` here on purpose. Both are painted by the Icon
	   controls, which carry these exact values as their defaults. Declaring them
	   in the stylesheet as well made the controls impossible to clear: an empty
	   control emits no declaration, so the stylesheet kept painting and clearing
	   looked like it did nothing. */
	font-size: 24px;
	transition: background-color 280ms ease, color 280ms ease;
}

/* Elementor renders a font icon as an inline SVG whose markup carries a viewBox
   but no width or height, and Elementor only sizes it inside its own button
   (`.elementor-button-icon svg`). Left alone, the SVG stretches to whatever the
   host offers: it filled this box edge to edge, so `Icon size` — which writes
   `font-size` — did nothing at all, while `Icon box size` scaled the glyph along
   with the shape. Sizing the glyph in `em` puts one control back in charge and
   drives a font icon and an inline SVG alike. `flex` keeps it from being
   squeezed by a flex host. */
.ndw-service-card__icon i,
.ndw-service-card__icon svg {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	font-size: 1em;
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ndw-service-card__icon {
		transition: none;
	}
}

:where(.ndw-service-card__title) {
	margin: 0;
	color: #15191e;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.18;
}

:where(.ndw-service-card__description) {
	margin: 0;
	color: #4b5563;
	font-size: 15px;
	line-height: 1.6;
}

.ndw-service-card__description > :first-child {
	margin-top: 0;
}

.ndw-service-card__description > :last-child {
	margin-bottom: 0;
}

.ndw-service-card__features {
	display: grid;
	margin: 0;
	padding: 0;
	gap: 8px;
	color: #4b5563;
	font-size: 14px;
	line-height: 1.45;
	list-style: none;
}

.ndw-service-card__features li {
	position: relative;
	padding-left: 18px;
}

.ndw-service-card__features li::before {
	position: absolute;
	top: 0.56em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--e-global-color-accent, #1f7667);
	content: "";
}

.ndw-service-card__link {
	display: inline-flex;
	align-items: center;
	margin-top: auto;
	padding-top: 24px;
	gap: 8px;
	color: var(--e-global-color-accent, #1f7667);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.ndw-service-card__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Narrow widgets cap the chosen column count but never raise it. !important is
   needed only to outrank Elementor's generated per-instance selector; min()
   keeps a smaller user value intact. The var() fallback equals the cap so CSS
   generated before 0.15.4 behaves exactly as it did. A cap of one column needs
   no min(): it can never exceed what the user chose. */
@container ndw-services-grid (max-width: 1024px) {
	.ndw-services-grid__items {
		gap: 18px;
	}

	@supports (grid-template-columns: repeat(min(1, 2), 1fr)) {
		.ndw-services-grid__items {
			grid-template-columns: repeat(min(var(--ndw-services-columns, 2), 2), minmax(0, 1fr)) !important;
		}
	}
}

@container ndw-services-grid (max-width: 767px) {
	.ndw-services-grid__items {
		grid-template-columns: 1fr !important;
		gap: 14px;
	}

	.ndw-services-grid--image-left .ndw-service-card,
	.ndw-services-grid--image-right .ndw-service-card {
		flex-direction: column;
	}

	.ndw-services-grid--image-left .ndw-service-card__image,
	.ndw-services-grid--image-right .ndw-service-card__image {
		width: 100%;
		height: 220px;
		min-height: 0;
		margin: 0 0 var(--ndw-service-image-gap);
		order: 0;
	}

	.ndw-services-grid--image-left .ndw-service-card__body,
	.ndw-services-grid--image-right .ndw-service-card__body {
		order: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ndw-service-card,
	.ndw-service-card__image.ndw-service-card__image img {
		transition: none;
	}

	.ndw-service-card:hover {
		translate: none;
	}

	.ndw-services-grid--image-zoom-yes .ndw-service-card:hover .ndw-service-card__image.ndw-service-card__image img {
		scale: 1;
	}

	.ndw-service-card__accent {
		transition: none;
	}
}