/* NMH - Scroll Story Carousel
 *
 * The base rules are the unenhanced document: a plain, ordered list of steps,
 * each with its own image and copy. Nothing is hidden and nothing is layered
 * here, so a visitor without JavaScript, on mobile, or before the controller
 * mounts still reads the whole story.
 *
 * Deliberately free of `@media` width rules. Elementor owns the breakpoints and
 * the author can move them in Site Settings, so any pixel value written here
 * would silently disagree with the responsive controls. Which mode applies is
 * decided by the controller through Elementor's own device mode, and the
 * composition itself wraps on available space rather than on a breakpoint.
 *
 * Selector note 1: `prefix_class` puts its class on the Elementor widget
 * wrapper, which is an ANCESTOR of `.ndw-scroll-story`, never the same element.
 * Every option class is therefore used as a descendant selector. Combining it
 * with `[data-mode]` on one compound selector silently matches nothing.
 *
 * Selector note 2: the defaults below are declared on `.ndw-scroll-story`, so
 * every control that sets one of these variables must target
 * `{{WRAPPER}} .ndw-scroll-story` — the SAME element — and win on specificity.
 * Writing them to `{{WRAPPER}}` alone puts the author's value on an ancestor,
 * where this block shadows it for every descendant and the control goes dead
 * with no error. That mistake made all 33 variable controls inert in 0.10.1.
 */

.ndw-scroll-story {
	--ndw-story-sticky-offset: 24px;
	--ndw-story-stage-min-height: 80vh;
	--ndw-story-step-distance: 70vh;
	--ndw-story-content-ratio: 45%;
	--ndw-story-column-gap: 56px;
	--ndw-story-column-min: 280px;
	--ndw-story-content-valign: center;
	--ndw-story-content-gap: 24px;
	--ndw-story-image-valign: center;
	--ndw-story-transition-duration: 420ms;
	--ndw-story-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
	--ndw-story-text-shift: 16px;
	--ndw-story-image-ratio: 4 / 3;
	--ndw-story-image-fit: cover;
	--ndw-story-image-width: 100%;
	--ndw-story-image-position-x: 50%;
	--ndw-story-image-position-y: 50%;
	--ndw-story-image-align: 0 auto;
	--ndw-story-image-radius: 10px;
	--ndw-story-progress-spacing: 32px;
	--ndw-story-progress-align: flex-start;
	--ndw-story-dot-size: 10px;
	--ndw-story-active-length: 40px;
	--ndw-story-segment-gap: 8px;
	--ndw-story-segment-radius: 20px;
	--ndw-story-segment-inactive: rgb(20 28 38 / 18%);
	--ndw-story-segment-active: #1f7667;
	--ndw-story-segment-hover: rgb(20 28 38 / 42%);
	--ndw-story-segment-focus: #1f7667;

	position: relative;
}

.ndw-scroll-story__panel {
	padding-block: 28px;
}

/* Two classes throughout the image rules. Elementor publishes `.elementor img`
   at (0,1,1), which outranks a single-class default: that is what left a strip
   of frame visible under the photo, because `height: auto` won over the
   intended `height: 100%`. */
.ndw-scroll-story .ndw-scroll-story__figure {
	width: var(--ndw-story-image-width, 100%);
	max-width: var(--ndw-story-image-max-width, 100%);
	max-height: var(--ndw-story-image-max-height, none);
	margin: var(--ndw-story-image-align, 0 auto);
	overflow: hidden;
	border-radius: var(--ndw-story-image-radius, 10px);
	background-color: var(--ndw-story-image-bg, transparent);
}

/* Fixed frame: every step keeps the same shape and the picture is cropped by
   Fit and moved by the position controls. */
.ndw-scroll-story--image-ratio .ndw-scroll-story__figure {
	aspect-ratio: var(--ndw-story-image-ratio, 4 / 3);
}

.ndw-scroll-story--image-ratio .ndw-scroll-story .ndw-scroll-story__image {
	width: 100%;
	height: 100%;
	object-fit: var(--ndw-story-image-fit, cover);
	object-position: var(--ndw-story-image-position-x, 50%) var(--ndw-story-image-position-y, 50%);
}

/* Natural proportions: no frame height is imposed, so a transparent PNG has
   nothing drawn behind or around it. */
.ndw-scroll-story--image-natural .ndw-scroll-story .ndw-scroll-story__image {
	width: 100%;
	height: auto;
	max-height: var(--ndw-story-image-max-height, none);
	object-fit: contain;
}

.ndw-scroll-story .ndw-scroll-story__image {
	display: block;
}

.ndw-scroll-story__copy {
	max-width: var(--ndw-story-content-max-width, none);
	min-width: 0;
}

.ndw-scroll-story__title {
	margin: 0;
	color: #1f7667;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
}

.ndw-scroll-story__subtitle {
	margin: 0 0 12px;
	color: #15191e;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.ndw-scroll-story__description {
	margin: 0;
	color: #4b5563;
	font-size: 17px;
	line-height: 1.65;
}

.ndw-scroll-story__description p {
	margin: 0 0 1em;
}

.ndw-scroll-story__description p:last-child {
	margin-bottom: 0;
}

.ndw-scroll-story__body-block {
	margin-top: 28px;
}

/* Layout-only helpers for the sticky mode. They must contribute no height at
   all until the controller opts in, otherwise the unenhanced page grows by
   several viewports of empty space. */
.ndw-scroll-story__runway,
.ndw-scroll-story__track,
.ndw-scroll-story__figure-spacer {
	display: none;
}

.ndw-scroll-story__empty {
	padding: 24px;
	border: 1px dashed rgb(20 28 38 / 25%);
	border-radius: 8px;
	color: #4b5563;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   Progress: a row of dots where the active step stretches into a rounded bar
   --------------------------------------------------------------------------- */

.ndw-scroll-story__progress {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--ndw-story-progress-align, flex-start);
	margin-top: var(--ndw-story-progress-spacing, 32px);
	gap: var(--ndw-story-segment-gap, 8px);
	/* The dots' enlarged hit areas must not widen the widget when the row is
	   aligned to an edge. */
	overflow-x: clip;
	overflow-clip-margin: 8px;
}

/* Two classes, deliberately. Elementor's Theme Style publishes
   `.elementor-kit-N button` and `elementor-kit-N` is a body class, so that rule
   is (0,1,1) and beats any single-class default: a real button styled with one
   class silently inherits the whole site button skin. `box-shadow`,
   `letter-spacing` and `text-transform` are pinned for the same reason. */
.ndw-scroll-story .ndw-scroll-story__step {
	display: block;
	width: auto;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	appearance: none;
}

/* The dot is 10px by default; an invisible area extends the finger target to
   at least 24x24 (WCAG 2.2 target size) without changing the drawing. */
.ndw-scroll-story .ndw-scroll-story__step--segment {
	position: relative;
}

.ndw-scroll-story .ndw-scroll-story__step--segment::before {
	position: absolute;
	inset: min(-7px, calc((var(--ndw-story-dot-size, 10px) - 24px) / 2));
	content: "";
}

/* The resting shape is a dot; the active one stretches into a pill. Shape, not
   only colour, carries the state. */
.ndw-scroll-story .ndw-scroll-story__step-bar {
	display: block;
	width: var(--ndw-story-dot-size, 10px);
	height: var(--ndw-story-dot-size, 10px);
	border-radius: var(--ndw-story-segment-radius, 20px);
	background-color: var(--ndw-story-segment-inactive);
	transition:
		width var(--ndw-story-transition-duration, 420ms) var(--ndw-story-transition-easing, ease),
		height var(--ndw-story-transition-duration, 420ms) var(--ndw-story-transition-easing, ease),
		background-color var(--ndw-story-transition-duration, 420ms) var(--ndw-story-transition-easing, ease);
}

.ndw-scroll-story .ndw-scroll-story__step:hover .ndw-scroll-story__step-bar {
	background-color: var(--ndw-story-segment-hover);
}

.ndw-scroll-story .ndw-scroll-story__step.is-active .ndw-scroll-story__step-bar {
	width: var(--ndw-story-active-length, 40px);
	background-color: var(--ndw-story-segment-active);
}

.ndw-scroll-story .ndw-scroll-story__step:focus-visible {
	outline: 3px solid var(--ndw-story-segment-focus);
	outline-offset: 4px;
}

/* In a column flex the cross axis is horizontal, so the alignment control has
   to move to `align-items` or it would silently stop working when the author
   switches the orientation. */
.ndw-scroll-story--progress-vertical .ndw-scroll-story__progress {
	flex-direction: column;
	align-items: var(--ndw-story-progress-align, flex-start);
	justify-content: flex-start;
}

.ndw-scroll-story--progress-vertical .ndw-scroll-story .ndw-scroll-story__step.is-active .ndw-scroll-story__step-bar {
	width: var(--ndw-story-dot-size, 10px);
	height: var(--ndw-story-active-length, 40px);
}

/* ---------------------------------------------------------------------------
   Two-column composition
   ---------------------------------------------------------------------------
   Shared by the sticky scene, the editor preview and the single-step static
   case. It wraps on available width instead of at a breakpoint: the flex basis
   comes from the responsive ratio control, and `--ndw-story-column-min` is the
   width below which the two columns stop fitting and fall to one. Moving an
   Elementor breakpoint therefore cannot desynchronise it, and neither can
   placing the widget inside a narrow container. */

.ndw-scroll-story[data-static="true"] .ndw-scroll-story__panel,
.ndw-scroll-story[data-mode="editor"] .ndw-scroll-story__panel,
.ndw-scroll-story[data-mode="sticky"] .ndw-scroll-story__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--ndw-story-column-gap, 56px);
}

.ndw-scroll-story[data-static="true"] .ndw-scroll-story__copy,
.ndw-scroll-story[data-mode="editor"] .ndw-scroll-story__copy,
.ndw-scroll-story[data-mode="sticky"] .ndw-scroll-story__copy {
	display: flex;
	flex: 1 1 calc(var(--ndw-story-content-ratio, 45%) - var(--ndw-story-column-gap, 56px));
	flex-direction: column;
	justify-content: var(--ndw-story-content-valign, center);
	gap: var(--ndw-story-content-gap, 24px);
	order: 0;
	min-width: min(100%, var(--ndw-story-column-min, 280px));
}

/* Title, subtitle and description are one visual group. The author positions
   that group as a unit; only the spacing between title and body is independent. */
.ndw-scroll-story[data-static="true"] .ndw-scroll-story__body-block,
.ndw-scroll-story[data-mode="editor"] .ndw-scroll-story__body-block,
.ndw-scroll-story[data-mode="sticky"] .ndw-scroll-story__body-block {
	margin-top: 0;
}

.ndw-scroll-story[data-static="true"] .ndw-scroll-story__figure,
.ndw-scroll-story[data-mode="editor"] .ndw-scroll-story__figure,
.ndw-scroll-story[data-mode="sticky"] .ndw-scroll-story__figure,
.ndw-scroll-story[data-static="true"] .ndw-scroll-story__figure-spacer,
.ndw-scroll-story[data-mode="editor"] .ndw-scroll-story__figure-spacer,
.ndw-scroll-story[data-mode="sticky"] .ndw-scroll-story__figure-spacer {
	display: block;
	flex: 1 1 calc(100% - var(--ndw-story-content-ratio, 45%) - var(--ndw-story-column-gap, 56px));
	align-self: var(--ndw-story-image-valign, center);
	order: 1;
	min-width: min(100%, var(--ndw-story-column-min, 280px));
}

/* The text column needs real height for grouped top/middle/bottom alignment.
   Without it the panel is only as tall as the copy and every alignment choice
   appears at the same position, most visibly in the non-sticky editor scene. */
.ndw-scroll-story[data-static="true"] .ndw-scroll-story__panel,
.ndw-scroll-story[data-mode="editor"] .ndw-scroll-story__panel {
	min-height: var(--ndw-story-stage-min-height, 80vh);
}

/* `prefix_class` lands on the Elementor wrapper, so this is an ancestor rule. */
.ndw-scroll-story--media-left .ndw-scroll-story__copy {
	order: 1;
}

.ndw-scroll-story--media-left .ndw-scroll-story__figure,
.ndw-scroll-story--media-left .ndw-scroll-story__figure-spacer {
	order: 0;
}

/* Elementor editor: the real layered composition without sticky positioning
   or an artificial runway. Wheel/progress input chooses the active panel.
   At the first and last panel the controller releases wheel input so the
   author can continue through the canvas.
   --------------------------------------------------------------------------- */

.ndw-scroll-story.is-enhanced[data-mode="editor"] .ndw-scroll-story__stage {
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: center;
	min-height: var(--ndw-story-stage-min-height, 80vh);
}

.ndw-scroll-story.is-enhanced[data-mode="editor"] .ndw-scroll-story__inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.ndw-scroll-story.is-enhanced[data-mode="editor"] .ndw-scroll-story__panels {
	display: grid;
	flex: 1 1 auto;
	/* An implicit `auto` column is sized by the copy's `min(100%, 280px)` floor,
	   which cannot resolve against it, so the stack never went below ~166px and
	   spilled out of narrow columns. */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 1fr;
	min-width: 0;
	min-height: 0;
}

.ndw-scroll-story.is-enhanced[data-mode="editor"] .ndw-scroll-story__panel {
	grid-row: 1;
	grid-column: 1;
	min-height: 0;
	padding-block: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ndw-story-transition-duration, 420ms) var(--ndw-story-transition-easing, ease);
}

.ndw-scroll-story.is-enhanced[data-mode="editor"] .ndw-scroll-story__panel.is-active {
	opacity: 1;
	pointer-events: auto;
}

.ndw-scroll-story.is-enhanced[data-mode="editor"] .ndw-scroll-story__copy {
	transform: translateY(var(--ndw-story-text-shift, 16px));
	transition: transform var(--ndw-story-transition-duration, 420ms) var(--ndw-story-transition-easing, ease);
}

.ndw-scroll-story.is-enhanced[data-mode="editor"] .ndw-scroll-story__panel.is-active .ndw-scroll-story__copy {
	transform: none;
}

.ndw-scroll-story--transition-fade .ndw-scroll-story.is-enhanced[data-mode="editor"] .ndw-scroll-story__panel.is-active {
	transition-delay: var(--ndw-story-transition-duration, 420ms);
}

.ndw-scroll-story--transition-none .ndw-scroll-story.is-enhanced[data-mode="editor"] .ndw-scroll-story__panel,
.ndw-scroll-story--transition-none .ndw-scroll-story.is-enhanced[data-mode="editor"] .ndw-scroll-story__copy {
	transform: none;
	transition: none;
}

/* ---------------------------------------------------------------------------
   Enhanced sticky scene
   --------------------------------------------------------------------------- */

.ndw-scroll-story.is-enhanced[data-mode="sticky"] .ndw-scroll-story__stage {
	display: flex;
	position: sticky;
	top: var(--ndw-story-sticky-offset, 24px);
	flex-direction: column;
	justify-content: center;
	min-height: var(--ndw-story-stage-min-height, 80vh);
}

/* The inner column and the panel row both have to grow, or the stage's minimum
   height is never handed down and the text column has no room to distribute. */
.ndw-scroll-story.is-enhanced[data-mode="sticky"] .ndw-scroll-story__inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

/* The panels become overlapping layers of one grid cell. Each panel keeps its
   own two-column composition, so the columns line up across every step.
   `grid-template-rows: 1fr` makes that single row fill the available height, so
   the panels really are as tall as the stage. */
.ndw-scroll-story.is-enhanced[data-mode="sticky"] .ndw-scroll-story__panels {
	display: grid;
	flex: 1 1 auto;
	/* An implicit `auto` column is sized by the copy's `min(100%, 280px)` floor,
	   which cannot resolve against it, so the stack never went below ~166px and
	   spilled out of narrow columns. */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 1fr;
	min-width: 0;
	min-height: 0;
}

.ndw-scroll-story.is-enhanced[data-mode="sticky"] .ndw-scroll-story__panel {
	grid-row: 1;
	grid-column: 1;
	padding-block: 0;
	opacity: 0;
	transition: opacity var(--ndw-story-transition-duration, 420ms) var(--ndw-story-transition-easing, ease);
}

.ndw-scroll-story.is-enhanced[data-mode="sticky"] .ndw-scroll-story__panel.is-active {
	opacity: 1;
}

.ndw-scroll-story.is-enhanced[data-mode="sticky"] .ndw-scroll-story__copy {
	transform: translateY(var(--ndw-story-text-shift, 16px));
	transition: transform var(--ndw-story-transition-duration, 420ms) var(--ndw-story-transition-easing, ease);
}

.ndw-scroll-story.is-enhanced[data-mode="sticky"] .ndw-scroll-story__panel.is-active .ndw-scroll-story__copy {
	transform: none;
}

/* Fade: the incoming panel waits for the outgoing one to finish.
   These two rules must out-specify the sticky panel and copy rules above, which
   are (0,4,0). A shorthand `transition` there resets `transition-delay` to 0 and
   sets the transform, so a lower-specificity override would lose on exactly the
   properties it is trying to change and both options would look identical to
   Crossfade. */
.ndw-scroll-story--transition-fade .ndw-scroll-story.is-enhanced[data-mode="sticky"] .ndw-scroll-story__panel.is-active {
	transition-delay: var(--ndw-story-transition-duration, 420ms);
}

.ndw-scroll-story--transition-none .ndw-scroll-story.is-enhanced[data-mode="sticky"] .ndw-scroll-story__panel,
.ndw-scroll-story--transition-none .ndw-scroll-story.is-enhanced[data-mode="sticky"] .ndw-scroll-story__copy,
.ndw-scroll-story--transition-none .ndw-scroll-story .ndw-scroll-story__step-bar {
	transform: none;
	transition: none;
}

/* The runway is the only thing that creates scroll distance. Its height needs
   the step count, which is the one value CSS cannot derive on its own, so the
   controller sets `--ndw-story-steps` when it mounts. */
.ndw-scroll-story.is-enhanced[data-mode="sticky"] .ndw-scroll-story__runway {
	display: block;
	height: calc(var(--ndw-story-steps, 1) * var(--ndw-story-step-distance, 70vh));
}

/* The sentinels tile the full height of the widget and are distributed with
   `flex: 1 1 0`, so neither PHP nor CSS has to know how many there are. A thin
   activation band therefore always meets exactly one of them, which is what
   makes fast scrolling settle on the right step. */
.ndw-scroll-story.is-enhanced[data-mode="sticky"] .ndw-scroll-story__track {
	display: flex;
	position: absolute;
	inset: 0;
	flex-direction: column;
	pointer-events: none;
}

.ndw-scroll-story.is-enhanced[data-mode="sticky"] .ndw-scroll-story__sentinel {
	flex: 1 1 0;
	min-height: 0;
}

/* ---------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ndw-scroll-story.is-enhanced[data-mode="sticky"] .ndw-scroll-story__panel,
	.ndw-scroll-story.is-enhanced[data-mode="sticky"] .ndw-scroll-story__copy,
	.ndw-scroll-story.is-enhanced[data-mode="editor"] .ndw-scroll-story__panel,
	.ndw-scroll-story.is-enhanced[data-mode="editor"] .ndw-scroll-story__copy {
		transform: none;
		transition: none;
	}

	.ndw-scroll-story .ndw-scroll-story__step-bar {
		transition: none;
	}
}