.ndw-split-scroll {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 64px;
	position: relative;
}

.ndw-split-scroll--image-right .ndw-split-scroll__media {
	order: 2;
}

/* The media column, not the photo, is the sticky grid item: the progress bar
   lives inside it and has to travel with the image. */
.ndw-split-scroll__media {
	--ndw-split-sticky-offset: 24px;
	position: sticky;
	top: var(--ndw-split-sticky-offset);
	align-self: start;
	min-width: 0;
}

.ndw-split-scroll__visual {
	position: relative;
	height: var(--ndw-split-visual-height, calc(100vh - (var(--ndw-split-sticky-offset) * 2)));
	overflow: hidden;
	border-radius: 8px;
	background: #e8ecef;
}

.ndw-split-scroll__image {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 420ms ease;
}

.ndw-split-scroll__image.is-active {
	opacity: 1;
}

/* Every image is absolutely positioned, so the container has no in-flow child
   to derive a height from. The aspect ratio therefore has to live on the
   container itself; with `height: auto` alone it collapsed to zero. */
/* `width: 100%` is required: with only `margin-inline: auto` the grid item is
   sized as fit-content, and the fit-content of a box whose children are all
   absolutely positioned is zero, so the whole visual collapsed. */
.ndw-split-scroll--contained .ndw-split-scroll__visual {
	width: 100%;
	height: auto;
	aspect-ratio: var(--ndw-split-visual-ratio, 4 / 3);
	max-width: var(--ndw-split-visual-max-width, 100%);
	margin-inline: var(--ndw-split-visual-align, auto);
	overflow: hidden;
}

.ndw-split-scroll--contained .ndw-split-scroll__image,
.ndw-split-scroll--contained .ndw-split-scroll__image img {
	height: 100%;
}

/* `.elementor img` is (0,1,1) and ties with a single class. The class is repeated
   on the element itself rather than chained to a container, so the rule cannot
   stop matching in a layout variant that nests the visual differently. The
   placeholder is a `span`, which no global rule targets, so it keeps one class. */
.ndw-split-scroll__image.ndw-split-scroll__image img,
.ndw-split-scroll__image-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--ndw-split-visual-fit, cover);
	object-position: var(--ndw-split-visual-position-x, 50%) var(--ndw-split-visual-position-y, 50%);
}

.ndw-split-scroll__image-placeholder {
	background: linear-gradient(135deg, #dce4e2, #b9cac6);
}

.ndw-split-scroll__content {
	position: relative;
}

.ndw-split-scroll__mobile-image {
	display: none;
}

.ndw-split-scroll__progress {
	z-index: 2;
	width: var(--ndw-split-progress-width, 100%);
	height: var(--ndw-split-progress-height, 3px);
	overflow: hidden;
	border-radius: var(--ndw-split-progress-radius, 2px);
	background: var(--ndw-split-progress-track, rgb(20 28 38 / 12%));
}

.ndw-split-scroll__progress span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--ndw-split-progress-fill, var(--e-global-color-accent, #1f7667));
	transition: width 240ms ease;
}

/* Outside the photo: the bar is a block in the sticky media column. */
.ndw-split-scroll--progress-above .ndw-split-scroll__progress {
	margin-bottom: var(--ndw-split-progress-gap, 16px);
}

.ndw-split-scroll--progress-below .ndw-split-scroll__progress {
	margin-top: var(--ndw-split-progress-gap, 16px);
}

/* Over the photo: pinned to one edge of the visual, which is the positioned
   ancestor. `inset-inline` keeps the inset control symmetrical in both writing
   directions. */
.ndw-split-scroll--progress-over-top .ndw-split-scroll__progress,
.ndw-split-scroll--progress-over-bottom .ndw-split-scroll__progress {
	position: absolute;
	inset-inline: var(--ndw-split-progress-inset, 0);
	width: auto;
}

.ndw-split-scroll--progress-over-top .ndw-split-scroll__progress {
	top: var(--ndw-split-progress-inset, 0);
}

.ndw-split-scroll--progress-over-bottom .ndw-split-scroll__progress {
	bottom: var(--ndw-split-progress-inset, 0);
}

/* Legacy placement: it scrolls with the text panels, so it has to stick itself. */
.ndw-split-scroll--progress-content .ndw-split-scroll__progress {
	position: sticky;
	top: 24px;
	margin-bottom: var(--ndw-split-progress-gap, 0);
}

.ndw-split-scroll__panel {
	display: flex;
	align-items: center;
	min-height: 95vh;
	opacity: 0.45;
	transition: opacity 240ms ease;
}

.ndw-split-scroll__panel.is-active {
	opacity: 1;
}

/* A column of blocks, so a text given a Max width follows the Alignment control
   (it sets align-items here) instead of always sitting on the left. Nothing
   stretches differently: without an alignment every child spans the column, as
   before. The button keeps its own width (see below). */
.ndw-split-scroll__panel-content {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
}

/* Space between paragraphs (Enter); a <br> inside a paragraph adds none.
   Two classes: the zero-margin paragraph rule below is (0,1,1). */
.ndw-split-scroll .ndw-split-scroll__description > * + * {
	margin-top: var(--ndw-split-paragraph-gap, 0.5em);
}

.ndw-split-scroll__eyebrow {
	margin: 0 0 14px;
	color: #1f7667;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

.ndw-split-scroll__heading {
	margin: 0;
	color: #15191e;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.08;
}

.ndw-split-scroll__description {
	margin-top: 20px;
	color: #4b5563;
	font-size: 18px;
	line-height: 1.65;
}

.ndw-split-scroll__description p {
	margin: 0;
}

.ndw-split-scroll__button {
	align-self: var(--ndw-align, flex-start);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
	padding: 13px 20px;
	border: 1px solid transparent;
	border-radius: 6px;
	font-weight: 700;
	text-decoration: none;
	transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

/* An inline font-icon SVG carries no width or height of its own, so as a flex
   item it collapsed to 0x0 and the button icon never appeared. Sizing in `em`
   matches it to the button label. See services-grid.css. */
.ndw-split-scroll__button i,
.ndw-split-scroll__button svg {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	font-size: 1em;
	line-height: 1;
	fill: currentColor;
}

.ndw-split-scroll__button--primary {
	background: var(--e-global-color-accent, #15191e);
	color: #fff;
}

.ndw-split-scroll__button--ghost {
	border-color: currentColor;
	background: transparent;
	color: #15191e;
}

.ndw-split-scroll__button--text {
	padding-right: 0;
	padding-left: 0;
	background: transparent;
	color: #15191e;
}

.ndw-split-scroll__button:focus-visible {
	outline: 3px solid #1f7667;
	outline-offset: 3px;
}

/* Stacked is also the readable no-JavaScript fallback at every width. */
.ndw-split-scroll:where([data-ndw-mode="stacked"], :not([data-ndw-mode])) {
	display: block;
}

:where(.ndw-split-scroll[data-ndw-mode="stacked"], .ndw-split-scroll:not([data-ndw-mode])) .ndw-split-scroll__media {
	display: none;
}

:where(.ndw-split-scroll[data-ndw-mode="stacked"], .ndw-split-scroll:not([data-ndw-mode])) .ndw-split-scroll__progress {
	display: none;
}

:where(.ndw-split-scroll[data-ndw-mode="stacked"], .ndw-split-scroll:not([data-ndw-mode])) .ndw-split-scroll__panel {
	display: grid;
	min-height: auto;
	padding: 48px 0;
	opacity: 1;
}

:where(.ndw-split-scroll[data-ndw-mode="stacked"], .ndw-split-scroll:not([data-ndw-mode])) .ndw-split-scroll__mobile-image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: 28px;
	overflow: hidden;
	border-radius: 8px;
	background: #dce4e2;
}

:where(.ndw-split-scroll[data-ndw-mode="stacked"], .ndw-split-scroll:not([data-ndw-mode])) .ndw-split-scroll__mobile-image.ndw-split-scroll__mobile-image img,
:where(.ndw-split-scroll[data-ndw-mode="stacked"], .ndw-split-scroll:not([data-ndw-mode])) .ndw-split-scroll__mobile-image .ndw-split-scroll__image-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

:where(.ndw-split-scroll[data-ndw-mode="stacked"], .ndw-split-scroll:not([data-ndw-mode])) .ndw-split-scroll__heading {
	font-size: 36px;
}

@media (prefers-reduced-motion: reduce) {
	.ndw-split-scroll__image,
	.ndw-split-scroll__panel,
	.ndw-split-scroll__progress span {
		transition: none;
	}
}