/*
 * The Northward Method (Figma 405:7775). Loaded after site.css on this page only.
 */

/* ------------------------------------------------------------ intro strip */

/* Figma 405:7844: 416x340 photographs, 16px apart, under a 43% forest wash,
   running off both edges of the page. The row is wider than the page and
   centred on it; the band clips what runs past the edges. */
.e-con.ne-method-intro {
	overflow: hidden;
	overflow: clip;
	/* Figma: 64px over the title, the strip close to the foot of the band.
	   Rachel, Figma review 2026-09-21: "Close up this space a little" — the
	   title sat too far under the header, so the top step comes down one. */
	--padding-top: var(--ne-section-sm);
	--padding-bottom: var(--ne-section-sm);
}

.ne-method-intro > .e-con-inner { gap: 80px; }

/*
 * The hero strip runs edge to edge and scrolls on forever (Rachel, Figma
 * review 2026-09-21). The run of five pictures is built twice, so shifting the
 * track by exactly one run lands the copy where the original started and the
 * loop has no seam. Paused for anyone who asks for less motion.
 */
.elementor .e-con.ne-meth-strip-vp {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	overflow: hidden;
	padding: 0;
}

.elementor .e-con.ne-meth-strip {
	--ne-strip-shot: 416px;
	--ne-strip-gap: 16px;
	--ne-strip-run: calc(5 * (var(--ne-strip-shot) + var(--ne-strip-gap)));
	width: max-content;
	max-width: none;
	flex: none;
	gap: var(--ne-strip-gap);
	animation: ne-strip-scroll 55s linear infinite;
	will-change: transform;
}

.elementor .e-con.ne-meth-strip-vp:hover .ne-meth-strip { animation-play-state: paused; }

@keyframes ne-strip-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-1 * var(--ne-strip-run)), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.elementor .e-con.ne-meth-strip { animation: none; }
}


.elementor.elementor .e-con > .elementor-widget.ne-meth-strip__shot {
	position: relative;
	flex: 0 0 416px;
	width: 416px;
	max-width: none;
}

.ne-meth-strip__shot img {
	height: 340px;
	border-radius: 0;
}

.ne-meth-strip__shot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 0;
	background: rgba(32, 55, 44, .43);
	pointer-events: none;
}

/* ----------------------------------------------------------------- timeline */

.ne-timeline > .e-con-inner { gap: 80px; }

/* The heading wraps at the 768px measure (Figma 405:7855). */
.elementor.elementor .ne-timeline .ne-stack-head > .elementor-widget-heading:not(.ne-eyebrow) {
	max-width: 768px;
}

/* Figma sets the steps on a 1312px frame: two 592px columns either side of a
   32px rail, 48px apart. Wider than the 1200 column, never wider than the
   viewport less its gutters. */
.elementor .e-con.ne-steps {
	width: min(1312px, calc(100vw - 2 * var(--ne-gutter)));
	max-width: none;
	align-self: center;
	gap: 0;
}

.elementor .e-con.ne-step {
	gap: 48px;
	align-items: center;
}

.elementor .e-con.ne-step__media,
.elementor .e-con.ne-step__body {
	flex: 1 1 0;
	min-width: 0;
}

/* Each picture sits 32px down its 672px row with 48px under it. */
.elementor .e-con.ne-step__media { padding: 32px 0 48px; }

.ne-step .ne-step__shot img {
	aspect-ratio: 1 / 1;
	height: auto;
	border-radius: 0;
}

/* The rail: a 24px line, a 15px dot 8px below it, then the line again to the
   foot of the row, all brass at 32% (Figma 405:7861). */
.elementor .e-con.ne-step__rail {
	flex: 0 0 32px;
	width: 32px;
	align-self: stretch;
	position: relative;
	background:
		linear-gradient(rgba(206, 128, 41, .32), rgba(206, 128, 41, .32)) center top / 3px 24px no-repeat,
		linear-gradient(rgba(206, 128, 41, .32), rgba(206, 128, 41, .32)) center 55px / 3px calc(100% - 55px) no-repeat;
}

.ne-step__rail::before {
	content: "";
	position: absolute;
	top: 32px;
	left: 50%;
	width: 15px;
	height: 15px;
	margin-left: -7.5px;
	border-radius: 50%;
	background: rgba(206, 128, 41, .32);
}

/* The body: title, lead and copy over a faint numeral. */
.elementor .e-con.ne-step__body {
	position: relative;
	gap: 16px;
}

.elementor .e-con.ne-step__body > .elementor-widget { position: relative; z-index: 1; }

.elementor.elementor .e-con.ne-step__body > .elementor-widget.ne-step__number {
	position: absolute;
	z-index: 0;
	top: 30px;
	left: -53px;
	width: auto;
	pointer-events: none;
}

.elementor.elementor .e-con.ne-step--flip .ne-step__body > .elementor-widget.ne-step__number {
	left: auto;
	right: -61px;
}

.elementor .ne-step__number .elementor-heading-title {
	font-family: var(--ne-font-heading);
	font-size: 150px !important;
	line-height: 1 !important;
	color: rgba(206, 128, 41, .13) !important;
	user-select: none;
}

/* 24px between title and lead, 16 before the copy. */
.elementor .e-con.ne-step__body > .ne-step__title { margin-bottom: 8px; }

.ne-step__lead strong { font-weight: 700; color: #313131; }

.ne-step__copy { color: #313131; }
.ne-step__copy p { margin: 0; }
.ne-step__copy p + p { margin-top: 1.6em; }

/* -------------------------------------------------------------------- quote */

/* Figma 405:7915: a 659x519 forest card with a brass top edge, over the left
   edge of a 740x720 portrait squared off on its right. */
.elementor .e-con.ne-meth-quote {
	position: relative;
	justify-content: flex-end;
	align-items: center;
	gap: 0;
}

.elementor .e-con.ne-meth-quote__card {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	width: 659px;
	max-width: 100%;
	min-height: 519px;
	justify-content: center;
	gap: 48px;
	--padding-top: 112px;
	--padding-bottom: 72px;
	--padding-left: 64px;
	--padding-right: 64px;
	/* The colour only: the texture and its veil come from the build, and the
	   shorthand would wipe them. */
	background-color: var(--ne-forest);
	border-top: 1px solid var(--ne-brass);
	border-radius: 0;
}

.elementor.elementor .e-con > .elementor-widget.ne-meth-quote__glyph {
	position: absolute;
	top: 0;
	left: 20px;
	width: 130px;
	margin: 0;
	pointer-events: none;
}

.ne-meth-quote__glyph img { width: 130px; height: 130px; display: block; }

.elementor.elementor .e-con > .elementor-widget.ne-meth-quote__text,
.elementor.elementor .e-con > .elementor-widget.ne-meth-quote__cite {
	max-width: 500px;
	opacity: .8;
}

.ne-meth-quote__cite p { margin: 0; }

.elementor.elementor .e-con > .elementor-widget.ne-meth-quote__shot {
	width: 740px;
	max-width: 100%;
	flex: none;
}

.ne-meth-quote__shot img {
	width: 100%;
	height: 720px;
	object-fit: cover;
	object-position: center 22%;
	border-radius: 0;
	display: block;
}

/* -------------------------------------------------------------------- model */

.elementor.elementor .ne-method-model .e-con > .elementor-widget.ne-section-sub { max-width: 825px; }

.ne-method-model .ne-section-sub p { margin: 0; line-height: 2.5; }

.ne-method-model > .e-con-inner { gap: 78px; }

/* Two equal 520x306 frames: a 1.27px brass@45% line, the picture inset 10px
   with the same line, and a soft drop shadow. Square corners. */
.elementor .e-con.ne-model-pair {
	width: 100%;
	max-width: calc(2 * 520px + 41px);
	align-self: center;
	gap: 41px;
}

.elementor .e-con.ne-model-frame {
	flex: 1 1 0;
	min-width: 0;
	max-width: 520px;
	--padding-top: 10px;
	--padding-bottom: 10px;
	--padding-left: 10px;
	--padding-right: 10px;
	border: 1.27px solid rgba(206, 128, 41, .45);
	box-shadow: 0 30.6px 63.7px rgba(0, 0, 0, .10);
}

.ne-model-frame__shot img {
	display: block;
	width: 100%;
	aspect-ratio: 499 / 285;
	height: auto;
	object-fit: cover;
	border: 1.27px solid rgba(206, 128, 41, .45);
	border-radius: 0;
	box-shadow: 0 30.6px 63.7px rgba(0, 0, 0, .10);
}

/* ------------------------------------------------------------ below desktop */

@media (max-width: 1024px) {
	.ne-meth-strip__shot img { height: 260px; }
	.elementor.elementor .e-con > .elementor-widget.ne-meth-strip__shot { flex-basis: 318px; width: 318px; }
	.elementor .e-con.ne-meth-strip { --ne-strip-w: calc(5 * 318px + 4 * 16px); }
	.ne-method-intro > .e-con-inner { gap: 56px; }

	/* Steps stack as cards (site.css); the rail and dots go. */
	.ne-timeline > .e-con-inner { gap: 48px; }
	.elementor .e-con.ne-steps { width: 100%; gap: 28px; }
	.elementor .e-con.ne-step__rail { display: none; }
	.elementor .e-con.ne-step__media { padding: 0; flex: none; width: 100%; }
	.elementor .e-con.ne-step__body { flex: none; width: 100%; }
	.ne-step .ne-step__shot img { aspect-ratio: auto; height: 320px; border-radius: 0; }

	.elementor.elementor .e-con.ne-step .ne-step__body > .elementor-widget.ne-step__number {
		left: auto;
		right: 0;
		top: -8px;
	}
	.elementor .ne-step__number .elementor-heading-title { font-size: 96px !important; }
	.elementor .ne-step .ne-step__title .elementor-heading-title,
	.elementor .ne-step .ne-step__lead .elementor-heading-title,
	.elementor .ne-step .ne-step__copy { text-align: left !important; }

	/* The card sits over the foot of the portrait instead of beside it. */
	.elementor .e-con.ne-meth-quote { flex-direction: column; align-items: stretch; }
	.elementor.elementor .e-con > .elementor-widget.ne-meth-quote__shot { width: 100%; order: 0; }
	.ne-meth-quote__shot img { height: 600px; border-radius: 0; object-position: center 18%; }
	.elementor .e-con.ne-meth-quote__card {
		position: relative;
		order: 1;
		top: auto;
		transform: none;
		width: auto;
		min-height: 0;
		margin: -120px 32px 0;
		--padding-top: 104px;
		--padding-bottom: 56px;
	}

	.ne-method-model > .e-con-inner { gap: 56px; }
	.ne-method-model .ne-section-sub p { line-height: 2; }
}

@media (max-width: 767px) {
	.ne-meth-strip__shot img { height: 180px; }
	.elementor.elementor .e-con > .elementor-widget.ne-meth-strip__shot { flex-basis: 220px; width: 220px; }
	.elementor .e-con.ne-meth-strip { --ne-strip-w: calc(5 * 220px + 4 * 12px); gap: 12px; }
	.ne-meth-strip__shot img,
	.ne-meth-strip__shot::after { border-radius: 0; }
	.ne-method-intro > .e-con-inner { gap: 40px; }

	.ne-step .ne-step__shot img { height: 220px; }
	.elementor .ne-step__number .elementor-heading-title { font-size: 72px !important; }

	/* No overlap on a phone: portrait, then the card under it. */
	.ne-meth-quote__shot img { height: 380px; }
	.elementor .e-con.ne-meth-quote__card {
		margin: 20px 0 0;
		gap: 28px;
		--padding-top: 88px;
		--padding-bottom: 40px;
		--padding-left: 28px;
		--padding-right: 28px;
	}
	.elementor.elementor .e-con > .elementor-widget.ne-meth-quote__glyph { width: 96px; left: 12px; }
	.ne-meth-quote__glyph img { width: 96px; height: 96px; }

	.ne-method-model .ne-section-sub p { line-height: 1.7; }
	.ne-method-model .ne-section-sub p + p { margin-top: 12px; }
	.elementor .e-con.ne-model-pair { flex-direction: column; align-items: center; gap: 24px; }
	.elementor .e-con.ne-model-frame { width: 100%; flex: none; }
}