/*
 * Site styling.
 *
 * Everything structural (widths, spacing, colour, type) is set in the Elementor
 * kit and on the containers themselves. This file only covers what the builder
 * has no control for: the header and footer, the decorative details of the
 * design, and the handful of places a widget needs a shape Elementor cannot
 * describe — the overlapping pill on a possibility card, for example.
 */

/* ----------------------------------------------------------------- basics */

body {
	font-family: var(--ne-font-body);
	color: var(--ne-ink);
	background: var(--ne-ivory);
}

h1, h2, h3, h4, h5 {
	font-family: var(--ne-font-heading);
}

.ne-accent { color: var(--ne-brass); }
.ne-italic { font-style: italic; }

img { height: auto; }

/* ------------------------------------------------------- spacing system */

/*
 * Component spacing. A section band takes `ne-section` plus one size, a card
 * takes `ne-card-pad`, and a section head (eyebrow, title, subtitle) takes
 * `ne-stack-head`. The numbers live in tokens.css and step down per
 * breakpoint there. These are plain CSS classes, so the same spacing can be
 * given to anything built in the Elementor editor (Advanced > CSS Classes);
 * a padding or gap set on a container in the editor still overrides them.
 */
.e-con.ne-section {
	--padding-left: var(--ne-gutter);
	--padding-right: var(--ne-gutter);
	--gap: var(--ne-stack);
	--row-gap: var(--ne-stack);
	--column-gap: var(--ne-stack);
}
.e-con.ne-section--lg   { --padding-top: var(--ne-section-lg); --padding-bottom: var(--ne-section-lg); }
.e-con.ne-section--md   { --padding-top: var(--ne-section-md); --padding-bottom: var(--ne-section-md); }
.e-con.ne-section--sm   { --padding-top: var(--ne-section-sm); --padding-bottom: var(--ne-section-sm); }
.e-con.ne-section--none { --padding-top: 0px; --padding-bottom: 0px; }

.e-con.ne-card-pad {
	--padding-top: var(--ne-card-pad);
	--padding-right: var(--ne-card-pad);
	--padding-bottom: var(--ne-card-pad);
	--padding-left: var(--ne-card-pad);
}
.e-con.ne-card-pad--lg {
	--padding-top: var(--ne-card-pad-lg);
	--padding-right: var(--ne-card-pad-lg);
	--padding-bottom: var(--ne-card-pad-lg);
	--padding-left: var(--ne-card-pad-lg);
}

.e-con.ne-stack-head {
	--gap: var(--ne-head-gap);
	--row-gap: var(--ne-head-gap);
	--column-gap: var(--ne-head-gap);
}

/* Hello Elementor's default page shell would box the full-bleed bands in. */
.site-main,
.page-content { max-width: none; padding: 0; }

/* ----------------------------------------------------------------- header */

.ne-header {
	position: sticky;
	top: 0;
	z-index: 40;
	/* Navy: the brand's primary dark carries both ends of the page. */
	background: var(--ne-navy);
	/* The gold rule Home 2 draws above its footer, used at both ends: it is
	   what separates the chrome from the page now that the header, the closing
	   band and the footer are all the same navy. */
	border-bottom: 2px solid var(--ne-brass);
	transition: box-shadow .25s ease;
}

/* Once the page has scrolled the header gets a hairline so it separates from
   whatever band happens to be running underneath it. */
.ne-header.is-stuck { box-shadow: 0 1px 0 rgba(206, 128, 41, .18); }

.ne-header__inner {
	max-width: calc(var(--ne-measure) + 48px);
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.ne-header__brand { display: inline-flex; flex: 0 0 auto; }
.ne-header__brand img { display: block; width: 92px; height: auto; }
.ne-header__brand-text {
	font-family: var(--ne-font-heading);
	color: var(--ne-ivory);
	font-size: 20px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ne-header__nav {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 32px;
}

.ne-menu {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0 auto 0 0;
	padding: 0 0 0 40px;
	list-style: none;
}

.ne-menu a {
	color: var(--ne-ivory);
	font-size: 15px;
	line-height: 1.5;
	text-decoration: none;
	opacity: .92;
	transition: color .2s ease, opacity .2s ease;
}

.ne-menu a:hover,
.ne-menu .current-menu-item > a { color: var(--ne-brass); opacity: 1; }

.ne-header__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	background: var(--ne-white);
	color: var(--ne-forest);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	padding: 14px 26px;
	border-radius: 0;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.ne-header__cta:hover { background: var(--ne-brass); color: var(--ne-forest); }

.ne-header__toggle {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	cursor: pointer;
	position: relative;
}

.ne-header__bars,
.ne-header__bars::before,
.ne-header__bars::after {
	position: absolute;
	left: 11px;
	width: 22px;
	height: 1.5px;
	background: var(--ne-ivory);
	transition: transform .2s ease, opacity .2s ease;
}

.ne-header__bars { top: 21px; }
.ne-header__bars::before { content: ""; top: -7px; left: 0; }
.ne-header__bars::after  { content: ""; top: 7px;  left: 0; }

/* ------------------------------------------------------------------- hero */

.ne-hero { position: relative; overflow: hidden; }

/* The photograph sits behind a diagonal wash so the headline keeps its
   contrast on the left while the picture stays legible on the right. */
.ne-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(83.6deg, rgba(32, 55, 44, .95) 32%, rgba(32, 55, 44, .2) 65%);
	pointer-events: none;
}

/*
 * The film hero used to carry the N monogram over the footage, in its empty
 * right-hand column (Rachel's review file, group 15:18). The 8 October doc
 * asks for it to come off, and it did on 2026-10-15: the centred brandmark
 * over the eyebrow already carries the mark, and two Ns in one hero was one
 * too many.
 */
.ne-hero--video { position: relative; overflow: hidden; }

/* Kept only so the empty right-hand column is still named in the build. */
.ne-hero__mark { position: relative; }

/* The last line of the hero headline (client note HE2). */
.ne-hero__child {
	color: var(--ne-brass);
	font-style: italic;
}

.ne-hero > .e-con-inner { position: relative; z-index: 1; }
.ne-hero__body { max-width: 780px; }
.ne-hero__title .elementor-heading-title { text-transform: capitalize; }

/* --------------------------------------------------------------- eyebrows */

.ne-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- buttons */

.ne-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	border-radius: 0;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.ne-btn--solid .elementor-button::after {
	content: "\2192";
	font-family: var(--ne-font-body);
	line-height: 1;
}

.ne-btn--ghost .elementor-button {
	background: transparent;
	color: var(--ne-ivory);
	border: 1px solid var(--ne-brass);
	padding: 12px 30px;
}

.ne-btn--ghost .elementor-button::after {
	content: "\2192";
	font-family: var(--ne-font-body);
	line-height: 1;
}

.ne-btn--ghost .elementor-button:hover {
	background: var(--ne-brass);
	color: var(--ne-forest);
}

/* Two ghost buttons in the design carry sentence case, not the tracked caps
   the kit's button style sets. */
.elementor .ne-btn--sentence .elementor-button {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: var(--ne-fs-btn);
}

.ne-btn--sentence .elementor-button::after { content: none; }

/* On a light band the ghost button has to read against cream, not forest. */
.ne-btn--dark .elementor-button {
	color: var(--ne-forest);
	border-color: var(--ne-line);
}

.ne-btn--dark .elementor-button:hover {
	background: var(--ne-forest);
	color: var(--ne-ivory);
	border-color: var(--ne-forest);
}

/* --------------------------------------------------------------- pictures */

/* Figma rounds photographs at 22 to 26px throughout; 24 is the one value. */
.ne-shot img {
	width: 100%;
	border-radius: 0;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------- section furniture */

/* Elementor 4 no longer wraps a widget in .elementor-widget-container, so a
   measure set on that wrapper never applied: these target the widget itself.
   Figma sets a section's lead at 768px. */
/* Elementor caps every widget at 100% with `.elementor.elementor .e-con >
   .elementor-widget`, so
   the measure needs that much specificity to land. */
.elementor.elementor .e-con > .elementor-widget.ne-section-sub { max-width: 768px; }
.elementor.elementor .e-con > .elementor-widget.ne-cta__copy { max-width: 568px; margin-inline: auto; }
.ne-band-dark .ne-section-sub { color: var(--ne-on-forest-dim); }


/* --------------------------------------------------------------- challenge */

/* The tint is the resting surface (Figma 405:6683); the brass outline Figma
   draws on the second card is the hover state (405:6690). */
.ne-challenge-card {
	position: relative;
	background-color: rgba(208, 165, 97, .14);
	border: 1px solid transparent;
	transition: border-color .2s ease;
}

.ne-challenge-card:hover { border-color: rgba(206, 128, 41, .71); }


/* ------------------------------------------------ northward begins / solution */

.ne-solution { position: relative; }

.ne-solution__card {
	position: absolute;
	right: -24px;
	bottom: -28px;
	max-width: 300px;
}

.ne-solution__card .elementor-heading-title { color: var(--ne-ivory); }

/* --------------------------------------------------------------- paradigm */

/* The label pill sits across the card's top edge, centred (Figma 405:6754). */
.ne-paradigm { text-align: center; position: relative; }

.elementor-widget-heading.ne-pill {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	margin: 0;
	z-index: 1;
}

.ne-pill .elementor-heading-title {
	display: inline-block;
	padding: 12px 32px;
	border-radius: 0;
	font-size: var(--ne-fs-eyebrow);
	font-weight: 700;
	line-height: 16px;
	letter-spacing: .15em;
	white-space: nowrap;
}

.ne-pill--muted .elementor-heading-title {
	background: rgba(90, 62, 43, .45);
	box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .1), 0 4px 6px -1px rgba(0, 0, 0, .1);
}

.ne-pill--forest .elementor-heading-title {
	background: var(--ne-forest);
	box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .1), 0 10px 15px -3px rgba(0, 0, 0, .1);
}

/* The line under the pill: semibold forest, dimmed on the old way. */
.elementor-widget-text-editor.ne-paradigm__lede {
	font-weight: 600;
	line-height: 1.3;
	color: var(--ne-forest);
}

.elementor-widget-text-editor.ne-paradigm__lede p { line-height: 1.3; }
.ne-paradigm--old .elementor-widget-text-editor.ne-paradigm__lede { color: rgba(32, 55, 44, .8); }

/* The gradient arrow that joins the two paradigm cards, drawn rather than
   placed, so it collapses cleanly when the cards stack. */
.ne-paradigm__grid { position: relative; }

.ne-paradigm__grid::after {
	content: "The Shift";
	position: absolute;
	left: 50%;
	top: 58%;
	transform: translate(-50%, -50%);
	z-index: 2;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ne-white);
	background: linear-gradient(90deg, rgba(244, 235, 221, .3) 0%, rgba(209, 182, 123, .9) 40%, #CE8029 100%);
	clip-path: polygon(0 25%, 68% 25%, 68% 0, 100% 50%, 68% 100%, 68% 75%, 0 75%);
	text-align: left;
}

/* ------------------------------------------------------------ possibilities */

.ne-possibility { height: 100%; }
.ne-possibility__media { position: relative; }


/* ---------------------------------------------------------------- services */

.ne-service { height: 100%; overflow: hidden; }
.ne-service__shot img { border-radius: 0; height: 256px; }
.ne-service__body { flex: 1 1 auto; }

/* ----------------------------------------------------------------- method */

.ne-method .ne-phases { position: relative; margin-top: 8px; }

/* The phase rail: one hairline across the row with a ring at each phase. */
.ne-phases::before {
	content: "";
	position: absolute;
	left: 6px;
	right: 6px;
	top: 6px;
	height: 1px;
	background: var(--ne-line-forest);
}

.ne-phase { position: relative; padding-top: 34px; }

.ne-phase::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: 1px solid var(--ne-brass);
	background: var(--ne-forest);
}

.ne-phase::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 4px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ne-brass);
}

.elementor.elementor .e-con > .elementor-widget.ne-method__quote { max-width: 760px; margin-inline: auto; }

/* ------------------------------------------------------------------ table */

.elementor.elementor .e-con > .elementor-widget.ne-model__intro { max-width: 860px; margin-inline: auto; }


/*
 * Figma 405:6900: no frame and no stripes, only #D9D9D9 rules under the head
 * and each row and between the columns. Hello Elementor's reset boxes every
 * cell and stripes odd rows, so both are cleared first (the doubled class
 * outranks the reset's tr:nth-child selector).
 */
.ne-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	table-layout: fixed;
	text-align: center;
}

.ne-table.ne-table th,
.ne-table.ne-table td {
	border: 0;
	background-color: transparent;
}

.ne-table th:nth-child(1) { width: 34%; }
.ne-table th:nth-child(2) { width: 35.5%; }

.ne-table.ne-table th {
	font-family: var(--ne-font-heading);
	font-size: var(--ne-fs-h3);
	font-weight: 700;
	color: #000000;
	padding: 28px 24px;
	border-bottom: 1px solid #D9D9D9;
}

.ne-table.ne-table td {
	padding: 34px 24px;
	border-bottom: 1px solid #D9D9D9;
	vertical-align: middle;
	font-size: var(--ne-fs-body);
	color: #272727;
}

.ne-table.ne-table th + th,
.ne-table.ne-table td + td { border-left: 1px solid #D9D9D9; }

.ne-table.ne-table td:first-child { font-weight: 500; }

/* ------------------------------------------------------------ testimonials */


/* ---------------------------------------------------------------- journal */

.ne-journal__shot img { height: 190px; }
.ne-journal__card .ne-eyebrow { margin-top: 6px; }

/* ----------------------------------------------------------------- footer */

.ne-footer {
	background: var(--ne-navy);
	border-top: 2px solid var(--ne-brass);
	color: var(--ne-on-forest);
	padding: 0 24px 34px;
}

.ne-footer__inner,
.ne-footer__bar {
	max-width: var(--ne-measure);
	margin: 0 auto;
}

.ne-footer__inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 40px;
	padding: 8px 0 46px;
}

.ne-footer__brand img { width: 96px; height: auto; display: block; margin-bottom: 18px; }

.ne-footer__tagline {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ne-on-forest-dim);
}

.ne-footer__heading {
	font-family: var(--ne-font-body);
	font-size: 15px;
	font-weight: 500;
	color: var(--ne-ivory);
	margin: 0 0 18px;
}

.ne-footer__list { list-style: none; margin: 0; padding: 0; }
.ne-footer__list li { margin-bottom: 11px; }

.ne-footer__list a {
	color: var(--ne-on-forest-dim);
	font-size: 14px;
	text-decoration: none;
	transition: color .2s ease;
}

.ne-footer__list a:hover { color: var(--ne-brass); }

.ne-footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 22px;
}

/*
 * The rule above the copyright row belongs to the child theme's fallback
 * footer, which draws it as a border. The Theme Builder footer draws the same
 * rule with a Divider widget, so without this both appear and the footer ends
 * up with two lines.
 */
.ne-footer:not(.ne-footer--builder) .ne-footer__bar {
	border-top: 1px solid var(--ne-line-forest);
}

.ne-footer__copy { margin: 0; font-size: 13px; color: var(--ne-on-forest-dim); }
.ne-footer__legal { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }

.ne-footer__legal a {
	color: var(--ne-on-forest-dim);
	font-size: 13px;
	text-decoration: none;
}

.ne-footer__legal a:hover { color: var(--ne-brass); }

/* ------------------------------------------------------------ breakpoints */

@media (max-width: 1024px) {
	.ne-header__toggle { display: block; }

	.ne-header__nav {
		position: absolute;
		inset: 100% 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--ne-forest);
		padding: 8px 24px 24px;
		display: none;
	}

	.ne-header.is-open .ne-header__nav { display: flex; }

	.ne-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 0;
		margin: 0 0 16px;
	}

	.ne-menu li { width: 100%; border-bottom: 1px solid var(--ne-line-forest); }
	.ne-menu a { display: block; padding: 14px 0; }
	.ne-header__cta { align-self: flex-start; }

	.ne-solution__card { position: static; max-width: none; margin-top: 16px; }
	.ne-collage__col--high { padding-top: 0; }

	.ne-footer__inner { grid-template-columns: 1fr 1fr; }
	.ne-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
	.ne-header__inner { padding: 10px 20px; }
	.ne-phases::before { display: none; }
	.ne-footer__inner { grid-template-columns: 1fr; gap: 30px; }
	.ne-footer__bar { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* --------------------------------------------------- late corrections */

/*
 * The kit's Theme Style paints every h2 forest at 48px, and it loads after this
 * file — so a footer column heading came out forest-on-forest and invisible.
 * The tag is kept in the selector to win that cascade.
 */
.ne-footer h2.ne-footer__heading {
	display: block;
	font-family: var(--ne-font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ne-ivory);
	margin: 0 0 18px;
}

/* The ghost buttons keep their own border, so the kit's button padding — sized
   for the solid pill — would make them noticeably taller than the design. */
.ne-btn--ghost .elementor-button { line-height: 1.4; }

/* A service card's brass link is the last thing in the card and needs to clear
   the rounded corner. */


/* ------------------------------------------------------------- collages */

/*
 * Both collages are two columns of unequal, staggered pictures rather than a
 * grid, so the heights are set here: the image widget itself only knows how to
 * fill its column.
 */
.ne-trusted__collage .ne-collage__col--low { padding-top: 58px; }

.ne-trusted__collage .ne-shot img { height: 300px; }
.ne-trusted__collage .ne-collage__col--low  .ne-shot:nth-of-type(1) img { height: 358px; }
.ne-trusted__collage .ne-collage__col--low  .ne-shot:nth-of-type(2) img { height: 156px; }
.ne-trusted__collage .ne-collage__col--high .ne-shot:nth-of-type(1) img { height: 327px; }
.ne-trusted__collage .ne-collage__col--high .ne-shot:nth-of-type(2) img { height: 303px; }

.ne-collage .ne-collage__col--low { padding-top: 57px; }
.ne-collage .ne-shot img { height: 300px; border-radius: 0; }
.ne-collage .ne-collage__col--low  .ne-shot:nth-of-type(1) img { height: 355px; }
.ne-collage .ne-collage__col--low  .ne-shot:nth-of-type(2) img { height: 154px; }
.ne-collage .ne-collage__col--high .ne-shot:nth-of-type(1) img { height: 324px; }
.ne-collage .ne-collage__col--high .ne-shot:nth-of-type(2) img { height: 300px; }

/* The label on a possibility card overlaps the foot of its picture, so the
   picture needs a predictable height for the overlap to land the same way on
   every card. */
.ne-possibility__media .ne-shot img { height: 210px; }

@media (max-width: 1024px) {
	.ne-trusted__collage .ne-collage__col--low { padding-top: 0; }
	.ne-trusted__collage .ne-shot img,
	.ne-trusted__collage .ne-collage__col--low  .ne-shot:nth-of-type(1) img,
	.ne-trusted__collage .ne-collage__col--low  .ne-shot:nth-of-type(2) img,
	.ne-trusted__collage .ne-collage__col--high .ne-shot:nth-of-type(1) img,
	.ne-trusted__collage .ne-collage__col--high .ne-shot:nth-of-type(2) img { height: 240px; }
}

/* ------------------------------------------------- overflow and small screens */

/*
 * The comparison table is the one piece of content that cannot shrink to a
 * phone. It scrolls inside its own widget; without the min-width reset the
 * flex item refuses to shrink and the whole page gains a horizontal scrollbar.
 */
.ne-table-wrap,
.ne-table-wrap .elementor-widget-container {
	min-width: 0;
	max-width: 100%;
	/* Elementor 4 drops the .elementor-widget-container wrapper for a text
	   editor, so the scroll has to sit on the widget itself as well. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
	/* On a phone the table keeps its columns and scrolls sideways in its own
	   box (.ne-table-wrap). */
	.ne-table { min-width: 620px; }
	.ne-table.ne-table th,
	.ne-table.ne-table td { padding: 16px 12px; font-size: var(--ne-fs-small); }
	.ne-table.ne-table th { font-size: var(--ne-fs-h4); }

	/* The shift arrow is drawn between two side-by-side cards; once they stack
	   there is nothing for it to sit between. */
	.ne-paradigm__grid::after { display: none; }
}


/* =========================================================================
 * Native widgets
 *
 * These rules dress the widgets Elementor renders — Icon List, Icon Box,
 * Divider, Star Rating, Video, Testimonial, Reviews. In Elementor 4.2 most of
 * these widgets' colour and size controls moved into global classes and can no
 * longer be written from a build script, so the look is set here and the widget
 * itself carries only its content.
 * ====================================================================== */

/* ---------------------------------------------------------------- lists */

.ne-list .elementor-icon-list-items {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ne-list .elementor-icon-list-item {
	align-items: flex-start;
	gap: 14px;
}

.ne-list .elementor-icon-list-icon {
	display: flex;
	align-items: center;
	height: 1.5em;
}

.ne-list .elementor-icon-list-icon i { font-size: 12px; color: var(--ne-brass); }

.ne-list .elementor-icon-list-text {
	font-family: var(--ne-font-body);
	color: var(--ne-ink);
	line-height: 1.5;
}

.ne-list--light .elementor-icon-list-text { color: var(--ne-on-forest); }
.ne-list--lead  .elementor-icon-list-text { font-size: var(--ne-fs-lead); }

/* ------------------------------------------------------------- icon boxes */

.ne-iconbox .elementor-icon-box-title {
	font-family: var(--ne-font-heading);
	color: var(--ne-forest);
	margin: 0;
}

.ne-iconbox .elementor-icon-box-description {
	font-family: var(--ne-font-body);
	color: var(--ne-ink);
	font-size: var(--ne-fs-body);
	line-height: 1.55;
	margin: 0;
}

.ne-iconbox .elementor-icon { color: var(--ne-brass); }

/* A challenge note: brass dot on the left, copy beside it, no title. */
.ne-iconbox--note .elementor-icon-box-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	text-align: left;
}

.ne-iconbox--note .elementor-icon-box-icon { margin: 4px 0 0; flex: 0 0 auto; }
.ne-iconbox--note .elementor-icon { font-size: 12px; }
.ne-iconbox--note .elementor-icon-box-title { display: none; }

/* The four-up icon rows inside the paradigm cards. */
.ne-iconbox--paradigm .elementor-icon-box-wrapper { text-align: center; }

.ne-iconbox--filled .elementor-icon {
	background: var(--ne-brass);
	color: var(--ne-ivory);
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

/* The label that overlaps the foot of a possibility card's picture. */
.ne-possibility__media { position: relative; }
.ne-possibility__media .ne-shot img { height: 210px; }

.ne-possibility__pill {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	background: var(--ne-ivory-50);
	border-radius: 0;
	padding: 9px 14px;
	box-shadow: 0 6px 18px rgba(32, 55, 44, .16);
}

.ne-possibility__pill .elementor-icon-box-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
}

.ne-possibility__pill .elementor-icon-box-icon { margin: 0; flex: 0 0 auto; }
.ne-possibility__pill .elementor-icon { font-size: 11px; }
.ne-possibility__pill .elementor-icon-box-description { display: none; }

.ne-possibility__pill .elementor-icon-box-title {
	font-size: var(--ne-fs-lead);
	line-height: 1.25;
}

/* ------------------------------------------------------------- dividers */

.ne-divider .elementor-divider-separator { border-top-color: var(--ne-line); }
.ne-band-dark .ne-divider .elementor-divider-separator { border-top-color: var(--ne-line-forest); }

/* The eyebrow's 40px rule. */
.ne-eyebrow-row { width: auto; }
.ne-divider--rule { width: 40px; flex: 0 0 40px; }
.ne-divider--rule .elementor-divider-separator { border-top-color: var(--ne-brass); }
.ne-divider--rule .elementor-divider { padding: 0; }

/* A line of copy ruled above and below, across the full content width, the
   rules brass at 18% (Figma 405:6715). */
.ne-ruled-quote { gap: 0; }

.elementor-widget-divider.ne-divider { --divider-color: var(--ne-line); }
.ne-band-dark .elementor-widget-divider.ne-divider { --divider-color: rgba(206, 128, 41, .18); }
/* The footer rule (Figma 405:8021). */
.ne-band-dark .elementor-widget-divider.ne-footer__rule,
.elementor-widget-divider.ne-footer__rule { --divider-color: rgba(255, 255, 255, .1); }
.elementor-widget-divider.ne-divider.ne-divider--rule { --divider-color: var(--ne-brass); }
.ne-ruled-quote .elementor-widget-divider.ne-divider { --divider-color: rgba(206, 128, 41, .18); }
.ne-ruled-quote .elementor-divider { padding: 0; }

.ne-ruled-quote__text { padding: 24px 0; }

/* The bar variant: a forest bar down the left, the line set bold and left
   (Figma 405:6804). */
.ne-ruled-quote--bar .ne-ruled-quote__text {
	position: relative;
	padding: 20px 0 20px 41px;
	min-height: 138px;
	display: flex;
	align-items: center;
}

.ne-ruled-quote--bar .ne-ruled-quote__text::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 20px;
	bottom: 20px;
	width: 15px;
	border-radius: 0;
	background: var(--ne-forest);
}

/* Elementor writes the kit style's weight at element specificity. */
.ne-ruled-quote--bar .ne-ruled-quote__text .elementor-heading-title { font-weight: 700 !important; }

@media (max-width: 767px) {
	.ne-ruled-quote--bar .ne-ruled-quote__text { min-height: 0; padding: 16px 0 16px 28px; }
	.ne-ruled-quote--bar .ne-ruled-quote__text::before { left: 0; top: 16px; bottom: 16px; width: 10px; }
}

/* ---------------------------------------------------------- arrow links */

.ne-btn--arrow .elementor-button {
	background: transparent;
	padding: 0;
	gap: 12px;
	border-radius: 0;
	font-size: var(--ne-fs-btn);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ne-btn--arrow .elementor-button:hover { background: transparent; color: var(--ne-ivory); }
.ne-btn--arrow .elementor-button-icon { font-size: 17px; }

/* -------------------------------------------------- video and testimonial */


.ne-testimonial .elementor-testimonial-content {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-body);
	font-style: italic;
	line-height: 1.6;
	color: var(--ne-ink);
}

.ne-testimonial .elementor-testimonial-name {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-small);
	font-weight: 600;
	color: var(--ne-ink);
}

.ne-testimonial .elementor-testimonial-job {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-eyebrow);
	color: var(--ne-ink-muted);
}

/* The design shows initials rather than a portrait; the widget's image slot is
   empty, so the circle is drawn on the wrapper instead. */
.ne-testimonial .elementor-testimonial-wrapper { text-align: left; }
.ne-video-card { height: 100%; }

/* Reviews carousel: see "testimonials" at the end of this file. */

/* -------------------------------------------------------------- method */

.ne-method__quote { max-width: 780px; margin-inline: auto; }

/* =========================================================================
 * Widget corrections
 *
 * Elementor 4.2 renders every icon as an inline SVG rather than a font glyph,
 * so the colour has to be set as a `fill`, and the widget's own stylesheet
 * loads after this file — hence the `.elementor-widget` in each selector,
 * which is on the same element as the custom class and costs nothing.
 * ====================================================================== */

.elementor-widget.ne-list .elementor-icon-list-icon svg,
.elementor-widget.ne-iconbox .elementor-icon svg {
	fill: var(--ne-brass);
}

.elementor-widget.ne-list .elementor-icon-list-icon svg {
	width: 12px;
	height: 12px;
}

.elementor-widget.ne-list .elementor-icon-list-text {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-body);
	line-height: 1.5;
	color: var(--ne-ink);
}

.elementor-widget.ne-list--light .elementor-icon-list-text { color: var(--ne-on-forest); }
.elementor-widget.ne-list--lead  .elementor-icon-list-text { font-size: var(--ne-fs-lead); }

/* The challenge note: a small brass dot, copy beside it. */
/* The dot is a 19px brass disc in a 27px ring (Figma 405:6685), centred on
   the copy beside it. */
.elementor-widget.ne-iconbox--note .elementor-icon {
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background: rgba(197, 155, 88, .32);
	display: flex;
	align-items: center;
	justify-content: center;
}
.elementor-widget.ne-iconbox--note .elementor-icon svg { width: 19px; height: 19px; fill: var(--ne-brass); }
.elementor-widget.ne-iconbox--note .elementor-icon-box-icon { margin-block-end: 0; }

.elementor-widget.ne-iconbox--note .elementor-icon-box-description {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-body);
	line-height: 1.55;
	color: var(--ne-ink);
	text-align: left;
}

/* The paradigm rows (Figma 405:6730, 405:6765): 40px outline icons on the old
   way, 56px forest discs with a white outline icon on the Northward way. The
   icons are drawn in strokes, so nothing may set a fill on the svg or they
   render as solid shapes. */
.elementor-widget.ne-iconbox--paradigm .elementor-icon {
	font-size: 40px;
	line-height: 0;
}

.elementor-widget.ne-iconbox--paradigm .elementor-icon svg {
	fill: none;
	width: 40px;
	height: 40px;
}

.elementor-widget-icon-box.ne-iconbox--paradigm.ne-iconbox--filled .elementor-icon {
	background-color: var(--ne-forest) !important;
	width: 56px;
	height: 56px;
	padding: 0;
	box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .1), 0 4px 6px -1px rgba(0, 0, 0, .1);
}

.elementor-widget-icon-box.ne-iconbox--paradigm.ne-iconbox--filled .elementor-icon svg {
	fill: none !important;
	width: 28px;
	height: 28px;
}

.elementor-widget.ne-iconbox--filled .elementor-icon {
	background: var(--ne-brass);
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.elementor-widget.ne-iconbox--filled .elementor-icon svg { fill: var(--ne-ivory); width: 17px; height: 17px; }

.elementor-widget.ne-iconbox--paradigm .elementor-icon-box-title {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-eyebrow);
	line-height: 1.35;
	color: var(--ne-forest);
	font-weight: 600;
}

.ne-paradigm--old .elementor-widget.ne-iconbox--paradigm .elementor-icon-box-title { color: rgba(32, 55, 44, .8); }

/* A hairline between the cells, none at the start of a line. */
.ne-paradigm__icons > .ne-paradigm__cell { padding-inline: 12px; }
.ne-paradigm__icons > .ne-paradigm__cell + .ne-paradigm__cell { border-left: 1px solid rgba(32, 55, 44, .1); }

@media (max-width: 1024px) {
	.ne-paradigm__icons > .ne-paradigm__cell:nth-child(odd) { border-left: 0; }
}

/* The possibility label. */
.elementor-widget.ne-possibility__pill .elementor-icon svg { width: 11px; height: 11px; }
.elementor-widget.ne-possibility__pill .elementor-icon-box-icon { margin-block-end: 0; }

.elementor-widget.ne-possibility__pill .elementor-icon-box-title {
	font-family: var(--ne-font-heading);
	font-size: var(--ne-fs-lead);
	line-height: 1.25;
	color: var(--ne-forest);
	text-align: left;
}

/* Two ghost buttons in the design are sentence case, not the tracked caps the
   kit's button style sets. */
.elementor-widget.ne-btn--sentence .elementor-button {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: var(--ne-fs-btn);
}

.elementor-widget.ne-btn--sentence .elementor-button-icon { display: none; }

/*
 * Elementor writes the Icon List's text style from the kit's Body typography,
 * with a selector one step more specific than a plain class. The design asks
 * for the Lead size on the hero and trusted-partner lists, so these two match
 * Elementor's own selector shape to sit above it.
 */
.elementor-widget-icon-list.ne-list .elementor-icon-list-item > .elementor-icon-list-text {
	font-family: var(--ne-font-body);
	color: var(--ne-ink);
	line-height: 1.5;
}

.elementor-widget-icon-list.ne-list--light .elementor-icon-list-item > .elementor-icon-list-text {
	color: var(--ne-on-forest);
}

.elementor-widget-icon-list.ne-list--lead .elementor-icon-list-item > .elementor-icon-list-text {
	font-size: var(--ne-fs-lead);
}

@media (max-width: 767px) {
	.elementor-widget-icon-list.ne-list--lead .elementor-icon-list-item > .elementor-icon-list-text {
		font-size: var(--ne-fs-lead);
	}
}

/*
 * The shift arrow bridges the two paradigm cards (Figma 405:6795): 192 x 71,
 * starting inside the old card and ending just short of the first disc.
 */
.ne-paradigm__grid::after {
	top: 46%;
	width: 192px;
	height: 71px;
	line-height: 71px;
	padding: 0 0 0 34px;
	box-sizing: border-box;
	transform: translate(-55%, -50%);
	filter: drop-shadow(0 7px 4px rgba(0, 0, 0, .08));
}

/* ------------------------------------------------- video, testimonial, reviews */

/*
 * The film placeholder (Figma 405:7367): the poster under a forest tint, and a
 * frosted glass tile with a translucent play glyph in the middle (405:7369).
 */
.ne-video { position: relative; border-radius: 0; overflow: hidden; }
/* The placeholder centres its children, so the poster has to be told to fill. */
.ne-video > .ne-video__poster { width: 100%; align-self: stretch; }
.ne-video__poster img { width: 100%; height: 260px; object-fit: cover; display: block; border-radius: 0; }

.ne-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(32, 55, 44, .16);
	pointer-events: none;
}

.elementor-widget.ne-video__play {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.elementor-widget.ne-video__play .elementor-icon {
	width: 84px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	border: .8px solid rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(12.8px);
	backdrop-filter: blur(12.8px);
}

.elementor-widget.ne-video__play .elementor-icon svg { width: 30px; height: 34px; }

/* Elementor styles both of these from the kit's heading scale, which is far too
   large for an attribution line, so each selector matches the shape Elementor's
   own stylesheet uses. */
.elementor-widget-testimonial.ne-testimonial .elementor-testimonial-content {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-body);
	font-style: italic;
	line-height: 1.6;
	color: var(--ne-ink);
}

.elementor-widget-testimonial.ne-testimonial .elementor-testimonial-name {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-small);
	font-weight: 600;
	line-height: 1.4;
	color: var(--ne-ink);
}

.elementor-widget-testimonial.ne-testimonial .elementor-testimonial-job {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-eyebrow);
	font-weight: 400;
	line-height: 1.4;
	color: var(--ne-ink-muted);
}

/* No portraits were supplied, so the widget's empty image slot is hidden rather
   than left showing a broken frame. */
.ne-testimonial .elementor-testimonial-image,
.ne-reviews .elementor-testimonial__image { display: none; }


/*
 * Elementor's widget stylesheets load after the theme's, and several of these
 * rules are the same specificity as the ones above, so the later sheet wins.
 * These few need the flag to land — each one is overriding a page-builder
 * default, not another rule of ours.
 */

/* No portraits have been supplied, so the widget falls back to Elementor's
   placeholder image. The design has initials or nothing; nothing, until the
   client sends photographs. */
.ne-testimonial .elementor-testimonial-image,
.ne-reviews .elementor-testimonial__image { display: none !important; }

/* A stacked Icon widget takes the kit's primary colour as its background; the
   play tile is translucent ivory with a 60% white glyph. */
.ne-video__play .elementor-icon {
	background-color: rgba(249, 244, 232, .23) !important;
	color: rgba(255, 255, 255, .6) !important;
	font-size: 32px !important;
}
.ne-video__play .elementor-icon svg { fill: rgba(255, 255, 255, .6) !important; }


/*
 * Elementor 4.2 dropped the Button widget's icon-position control and renders
 * the icon before the label. Every arrow link in this design reads the other
 * way round, so the content wrapper is reversed rather than the icon being
 * moved into the label text.
 */
.ne-btn--arrow .elementor-button-content-wrapper {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
}

/* Ordering the two children beats fighting the wrapper's flex-direction, which
   Elementor sets from its own stylesheet. */
.ne-btn--arrow .elementor-button-text { order: 1 !important; }
.ne-btn--arrow .elementor-button-icon { order: 2 !important; margin: 0; }

.ne-btn--arrow .elementor-button {
	background: transparent !important;
	box-shadow: none;
	border: 0;
	padding: 0;
}

.ne-btn--arrow .elementor-button:hover .elementor-button-text { text-decoration: underline; }
.ne-btn--arrow .elementor-button-text { text-decoration: none; }

/* =========================================================================
 * Inner pages
 * ====================================================================== */

.ne-page-hero { position: relative; overflow: hidden; }

/* The same diagonal wash as the home hero, but centred, because the headline
   sits in the middle of the frame rather than to one side. */
.ne-page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(32, 55, 44, .78), rgba(32, 55, 44, .55));
	pointer-events: none;
}

.ne-page-hero > .e-con-inner { position: relative; z-index: 1; }
.ne-page-hero__body { max-width: 900px; margin-inline: auto; }
.elementor.elementor .e-con > .elementor-widget.ne-page-hero__sub { max-width: 768px; margin-inline: auto; }

/* ------------------------------------------------------------ contact form */

/* The card is a measured column in the middle of the band, not the full
   content width. */
.ne-form-card { max-width: 760px; margin-inline: auto; }
.ne-form-card .ne-divider { margin-block: 4px; }

.ne-form .elementor-field-group > label {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-body);
	line-height: 1.5;
	color: var(--ne-ink);
	margin-bottom: 6px;
}

.ne-form .elementor-field-textual {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-body);
	line-height: 1.5;
	color: var(--ne-ink);
	background: var(--ne-white);
	border: 1px solid var(--ne-line);
	border-radius: 0;
	padding: 12px 18px;
	min-height: 46px;
}

.ne-form textarea.elementor-field-textual {
	border-radius: 0;
	min-height: 150px;
	padding: 14px 18px;
}

.ne-form .elementor-field-textual:focus {
	border-color: var(--ne-brass);
	box-shadow: 0 0 0 3px var(--ne-brass-ring);
	outline: none;
}

.ne-form .elementor-field-textual::placeholder { color: #666666; }

/* Elementor's own form stylesheet targets the submit button one step more
   specifically than a plain class, and loads after this file. */
.elementor-widget-form.ne-form .elementor-button[type="submit"] {
	background: var(--ne-brass);
	color: var(--ne-forest);
	border-radius: 0;
	padding: 14px 34px;
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-btn);
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: none;
}

.elementor-widget-form.ne-form .elementor-button[type="submit"]:hover {
	background: var(--ne-brass-600);
	color: var(--ne-ivory);
}

.elementor-widget-form.ne-form .elementor-button[type="submit"] span,
.elementor-widget-form.ne-form .elementor-button[type="submit"] svg { color: inherit; fill: currentColor; }

/* Elementor puts the submit icon before the label, as it does on every button
   in 4.2; the design has the arrow after it. Ordering the children is what
   sticks — the wrapper's own flex-direction is set by Elementor's stylesheet. */
.ne-form .elementor-button-content-wrapper {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
}

.ne-form .elementor-button-text { order: 1 !important; }
.ne-form .elementor-button-icon { order: 2 !important; margin: 0; }

/* ------------------------------------------------------------ contact info */

.ne-contact__eyebrow .elementor-heading-title { color: var(--ne-ink); font-weight: 400; }
.ne-contact__title .elementor-heading-title { color: var(--ne-ink); }
.ne-contact__label .elementor-heading-title { font-family: var(--ne-font-body); font-weight: 600; font-size: var(--ne-fs-body); }

.ne-contact__value .elementor-heading-title,
.ne-contact__value a {
	font-family: var(--ne-font-body);
	font-weight: 600;
	font-size: var(--ne-fs-body);
	color: var(--ne-ink);
	text-decoration: none;
}

.ne-contact__value a:hover { color: var(--ne-brass-600); }
.ne-contact__hours { color: var(--ne-ink); font-size: var(--ne-fs-small); }
.ne-contact__rule .elementor-divider-separator { border-top-color: var(--ne-ink); border-top-width: 2px; }
.ne-contact__rule { width: 18px; }

@media (max-width: 767px) {
	.ne-page-hero__title .elementor-heading-title { font-size: var(--ne-fs-h1); }
}

/* =========================================================================
 * Inner pages
 * ====================================================================== */

/* ------------------------------------------------------------ page hero */

.ne-page-hero { position: relative; overflow: hidden; }

.ne-page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(32, 55, 44, .82) 0%, rgba(32, 55, 44, .62) 100%);
	pointer-events: none;
}

.ne-page-hero > .e-con-inner { position: relative; z-index: 1; }
.ne-page-hero__body { max-width: 900px; margin-inline: auto; }
.elementor.elementor .e-con > .elementor-widget.ne-page-hero__sub { max-width: 768px; margin-inline: auto; }

/* The philosophy hero is left-aligned and its wash runs the other way. */
.ne-philosophy-hero::after {
	background: linear-gradient(90deg, rgba(32, 55, 44, .92) 20%, rgba(32, 55, 44, .45) 75%);
}

.ne-philosophy-hero__body { max-width: 760px; }

/* A word of the headline set in a brass plate. */
.ne-plate {
	display: inline-block;
	background: var(--ne-brass);
	color: var(--ne-forest);
	border-radius: 0;
	padding: 0 .22em .06em;
	line-height: 1.1;
}

/* A paragraph ruled down its left edge. */
.elementor-widget.ne-rule-left {
	border-left: 2px solid var(--ne-brass);
	padding-left: 18px;
}

/* ---------------------------------------------------------- origin block */

.ne-origin { position: relative; }
.ne-origin__shot img { height: 620px; border-radius: 0; }

/* The copy card overlaps the photograph, as the design has it. */
.ne-origin__body { margin-left: -8%; z-index: 1; }
.ne-origin__card { box-shadow: 0 24px 60px rgba(32, 55, 44, .12); }

/* ------------------------------------------------------- old way / new way */

.ne-oldway__card { box-shadow: 0 1px 3px rgba(32, 55, 44, .06); }
.ne-oldway__item .elementor-icon-box-wrapper { display: flex; align-items: center; gap: 12px; text-align: left; }
.ne-oldway__item .elementor-icon-box-icon { margin: 0; flex: 0 0 auto; }
.ne-oldway__item .elementor-icon { font-size: 16px; }

.ne-oldway__item .elementor-icon-box-title {
	font-family: var(--ne-font-heading);
	font-size: var(--ne-fs-h4);
	line-height: 1.15;
	color: var(--ne-forest);
}

.ne-oldway__item .elementor-icon-box-description {
	font-size: var(--ne-fs-small);
	line-height: 1.3;
	color: var(--ne-ink-muted);
}

.ne-newway__icon .elementor-icon { width: 42px; height: 42px; }
.ne-newway__card--dark .elementor-heading-title { color: var(--ne-ivory); }
.ne-newway__card { height: 100%; }

/* The shift arrow sits between the two halves, as on the Home page. */
.ne-shift__grid { position: relative; }

.ne-shift__grid::after {
	content: "The Shift";
	position: absolute;
	left: 34%;
	top: 44%;
	transform: translate(-50%, -50%);
	z-index: 2;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ne-white);
	background: linear-gradient(90deg, rgba(244, 235, 221, .5), var(--ne-brass));
	padding: 7px 22px 7px 14px;
	clip-path: polygon(0 22%, 68% 22%, 68% 0, 100% 50%, 68% 100%, 68% 78%, 0 78%);
	width: 118px;
	text-align: left;
}

/* ------------------------------------------------------------ principles */

.elementor.elementor .e-con > .elementor-widget.ne-principles__intro { max-width: 1000px; margin-inline: auto; }
.ne-principle { height: 100%; text-align: center; }
.ne-principle .ne-principle__mark { margin-inline: auto; }
.ne-principle__mark .elementor-icon { width: 40px; height: 40px; }
.ne-principle__mark .elementor-icon svg { width: 13px !important; height: 13px !important; }

/* --------------------------------------------------------------- promise */

.elementor.elementor .e-con > .elementor-widget.ne-promise__copy,
.elementor.elementor .e-con > .elementor-widget.ne-promise__line { max-width: 800px; margin-inline: auto; }
.ne-promise__line .elementor-heading-title { font-style: italic; }
.ne-promise__actions { justify-content: center; }
.ne-promise .ne-video { max-width: 1100px; margin-inline: auto; }
.ne-promise .ne-video__poster img { height: 540px; }

/* --------------------------------------------------------------- closing */

.ne-closing__body { max-width: 860px; margin-inline: auto; }
.elementor.elementor .e-con > .elementor-widget.ne-closing__lead { max-width: 720px; margin-inline: auto; }

/* ------------------------------------------------------------ contact page */

.ne-form-card { box-shadow: 0 20px 50px rgba(32, 55, 44, .08); margin-inline: auto; }

.ne-form .elementor-field-group > label {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-body);
	font-weight: 400;
	color: var(--ne-ink);
	margin-bottom: 8px;
}

.ne-form .elementor-field-textual {
	border: 1px solid var(--ne-line);
	border-radius: 0;
	padding: 12px 14px;
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-body);
	color: var(--ne-ink);
	background: var(--ne-white);
}

.ne-form .elementor-field-textual:focus {
	border-color: var(--ne-brass);
	box-shadow: 0 0 0 3px var(--ne-brass-ring);
	outline: none;
}

.ne-form .elementor-field-textual::placeholder { color: #9A9A93; }
.ne-form .elementor-button { border-radius: 0; padding: 14px 34px; }

.ne-detail__label .elementor-heading-title {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-body);
	color: var(--ne-ink);
}

.ne-detail__value .elementor-heading-title {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-body);
	color: var(--ne-forest);
	text-decoration: none;
}

.ne-contact-info__title .elementor-heading-title {
	font-family: var(--ne-font-body);
	font-weight: 500;
	font-size: var(--ne-fs-h2);
	line-height: 1.3;
	letter-spacing: -0.5px;
}

@media (max-width: 1024px) {
	.ne-origin__body { margin-left: 0; }
	.ne-origin__shot img { height: 380px; }
	.ne-shift__grid::after { display: none; }
	.ne-promise .ne-video__poster img { height: 320px; }
	.ne-contact-info__title .elementor-heading-title { font-size: var(--ne-fs-h2); }
}

/*
 * Philosophy corrections. Elementor paints an Icon Box title from the kit's
 * heading scale and a stacked icon from the kit's primary colour, and its
 * stylesheet loads after this one, so both need the widget class in the
 * selector to land.
 */
.elementor-widget-icon-box.ne-oldway__item .elementor-icon-box-title {
	font-family: var(--ne-font-heading);
	font-size: var(--ne-fs-h4);
	line-height: 1.15;
	color: var(--ne-forest);
	margin: 0;
	font-weight: 700;
}

.elementor-widget-icon-box.ne-oldway__item .elementor-icon-box-description {
	font-size: var(--ne-fs-small);
	line-height: 1.35;
	color: var(--ne-ink-muted);
}

.elementor-widget-icon-box.ne-oldway__item .elementor-icon svg { fill: var(--ne-forest); width: 15px; height: 15px; }

.elementor-widget-icon-box.ne-iconbox--filled .elementor-icon {
	background-color: var(--ne-brass) !important;
}

.elementor-widget-icon-box.ne-newway__icon .elementor-icon { width: 42px; height: 42px; }
.elementor-widget-icon-box.ne-newway__icon .elementor-icon svg { fill: var(--ne-ivory) !important; width: 18px !important; height: 18px !important; }

.elementor-widget-icon-box.ne-principle__mark .elementor-icon { width: 40px; height: 40px; }
.elementor-widget-icon-box.ne-principle__mark .elementor-icon svg { fill: var(--ne-ivory) !important; width: 12px !important; height: 12px !important; }

/* The eyebrow's trailing rule, restored for the labels that use it: a line that
   runs from the label to the end of its column. */
.ne-eyebrow--rule .elementor-heading-title::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	max-width: 260px;
	height: 1px;
	margin-left: 16px;
	background: var(--ne-line);
}

.ne-eyebrow--rule .elementor-heading-title { display: flex; align-items: center; }

/*
 * Elementor sizes an icon's SVG from the icon's font-size; forcing pixel
 * dimensions onto the SVG leaves it zero-width, so every stacked badge is
 * sized this way instead.
 */
.elementor-widget-icon-box.ne-newway__icon .elementor-icon,
.elementor-widget-icon-box.ne-principle__mark .elementor-icon { font-size: 16px; }

.elementor-widget-icon-box.ne-newway__icon .elementor-icon svg,
.elementor-widget-icon-box.ne-principle__mark .elementor-icon svg {
	width: auto !important;
	height: auto !important;
}

/* The eyebrow label must not wrap when its trailing rule is beside it. */
.ne-eyebrow--rule .elementor-heading-title { white-space: nowrap; }
.ne-eyebrow--rule .elementor-heading-title::after { flex: 1 1 auto; width: auto; }

/* ------------------------------------------------------------ How We Work */

/* A hero split down the middle: copy on the forest half, photograph on the
   other. The photograph column is a background rather than an image widget so
   it fills its half whatever the copy's height turns out to be. */
.ne-split-hero { overflow: hidden; }

/*
 * The copy column's left padding puts its text on the same line as every
 * other section: the gutter on narrow screens, and on wide ones the edge of the
 * 1200px content column (the % resolves against the hero's full width). Top
 * and bottom come from the section scale.
 */
/*
 * Figma 405:7346: the forest panel is 739 of 1440 and the photograph runs to
 * the page edge. The copy starts at the 1200px content column and sits in the
 * part of the panel the marks card below does not cover; the card overlaps the
 * hero's foot by --ne-marks-overlap.
 */
.ne-split-hero { --ne-marks-overlap: 103px; }

.e-con.ne-split-hero__col {
	justify-content: flex-start;
	min-height: 724px;
	--padding-top: 88px;
	--padding-bottom: calc(var(--ne-marks-overlap) + 68px);
	--padding-left: max(var(--ne-gutter), calc((100vw - var(--ne-measure)) / 2));
	--padding-right: 48px;
}
.ne-split-hero__body { max-width: 572px; }
.ne-split-hero__media { align-self: stretch; }

/* The marks: a card rounded on its right, over the foot of the hero. */
.e-con.ne-section.ne-marks-band {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * 103px);
	margin-left: 0;
	margin-right: auto;
	align-self: flex-start;
	width: min(100%, calc(max(var(--ne-gutter), (100vw - var(--ne-measure)) / 2) + 877px + 32px));
	border-radius: 0;
	--padding-top: 30px;
	--padding-bottom: 25px;
	--padding-left: max(var(--ne-gutter), calc((100vw - var(--ne-measure)) / 2));
	--padding-right: 32px;
}

.ne-marks-band .ne-mark .elementor-icon-box-wrapper { text-align: left; }
.ne-marks-band .ne-mark .elementor-icon-box-icon { margin-block-end: 18px; }
.ne-marks-band .ne-mark .elementor-icon { font-size: 37px; line-height: 0; }

/* The icons carry their own brass fill from Figma. */
.elementor-widget-icon-box.ne-mark .elementor-icon svg { width: 37px; height: 37px; }

.elementor-widget-icon-box.ne-mark .elementor-icon-box-title {
	font-family: var(--ne-font-heading);
	font-size: var(--ne-fs-h4);
	line-height: 1.3;
	color: #333333;
	margin: 0 0 2px;
	font-weight: 700;
}

/* Figma sets these in #909090, which is 2.6:1 on the card; #666 is the
   nearest grey that reads at AA. */
.elementor-widget-icon-box.ne-mark .elementor-icon-box-description {
	font-size: var(--ne-fs-lead);
	line-height: 1.3;
	color: #666666;
}

.ne-wide-shot img { height: 560px; border-radius: 0; }
.ne-tall-shot img { height: 700px; border-radius: 0; }
.ne-capability { border-top: 1px solid var(--ne-line-forest); padding-top: 18px; }

@media (max-width: 1024px) {
	.ne-split-hero { flex-wrap: wrap; }
	.ne-split-hero__body { max-width: none; }
	.e-con.ne-split-hero__col {
		min-height: 0;
		--padding-top: var(--ne-section-lg);
		--padding-bottom: var(--ne-section-lg);
		--padding-left: var(--ne-gutter);
		--padding-right: var(--ne-gutter);
	}
	/* Stacked, the card sits under the photograph instead of over it. */
	.e-con.ne-section.ne-marks-band {
		margin-top: 0;
		width: 100%;
		border-radius: 0;
		--padding-top: var(--ne-section-sm);
		--padding-bottom: var(--ne-section-sm);
		--padding-left: var(--ne-gutter);
		--padding-right: var(--ne-gutter);
	}
	.ne-wide-shot img { height: 300px; }
	.ne-tall-shot img { height: 380px; }
}

/* The three marks under the How We Work hero are left-aligned in the design;
   an Icon Box in the top position centres itself by default. */
.elementor-widget-icon-box.ne-mark .elementor-icon-box-wrapper { text-align: left; }
.elementor-widget-icon-box.ne-mark .elementor-icon-box-icon { text-align: left; margin-block-end: 12px; }

/* ---------------------------------------------------------------- About Us */

.ne-team__shot img { height: 340px; border-radius: 0; }
.ne-founder__shot img { height: 560px; border-radius: 0; }
.ne-team__role .elementor-heading-title { font-family: var(--ne-font-body); font-weight: 400; }

@media (max-width: 1024px) {
	.ne-team__shot img { height: 260px; }
	.ne-founder__shot img { height: 340px; }
}

/* ------------------------------------------------------- listing pages */

/* The filter row above a card grid. */
.ne-filters .elementor-icon-list-items { gap: 10px 8px; flex-wrap: wrap; }
.ne-filters .elementor-icon-list-icon { display: none; }

.elementor-widget-icon-list.ne-filters .elementor-icon-list-item > a,
.elementor-widget-icon-list.ne-filters .elementor-icon-list-item > .elementor-icon-list-text {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-small);
	color: var(--ne-ink);
	border: 1px solid var(--ne-line);
	border-radius: 0;
	padding: 8px 20px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.elementor-widget-icon-list.ne-filters .elementor-icon-list-item:first-child > a,
.elementor-widget-icon-list.ne-filters .elementor-icon-list-item:first-child > .elementor-icon-list-text {
	background: var(--ne-forest);
	border-color: var(--ne-forest);
	color: var(--ne-ivory);
}

.elementor-widget-icon-list.ne-filters .elementor-icon-list-item > a:hover {
	background: var(--ne-brass);
	border-color: var(--ne-brass);
	color: var(--ne-forest);
}


/* ============================================================ post cards
 *
 * The card is a Loop Item ("Post Card"), so these rules dress one card and
 * every grid inherits them: Journal, Stories, the Home row, and the related
 * row under a post.
 * ====================================================================== */

.ne-card__shot img {
	width: 100%;
	height: 285px;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

.ne-card__meta { width: auto; }

.elementor-widget-heading.ne-card__topic .elementor-heading-title {
	display: inline-block;
	background: var(--ne-forest);
	color: var(--ne-ivory);
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-small);
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	border-radius: 0;
	padding: 4px 14px;
}

.elementor-widget-heading.ne-card__read .elementor-heading-title {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-small);
	line-height: 1.4;
	color: var(--ne-ink-muted);
}

.elementor-widget-heading.ne-card__title .elementor-heading-title,
.elementor-widget-heading.ne-card__title .elementor-heading-title a {
	font-family: var(--ne-font-heading);
	font-size: var(--ne-fs-h4);
	line-height: 1.35;
	color: var(--ne-forest);
	text-decoration: none;
}

.ne-card__excerpt {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-body);
	line-height: 1.53;
	color: var(--ne-ink);
}

.ne-card__more .elementor-button {
	background: transparent !important;
	padding: 0;
	border-radius: 0;
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-small);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	color: var(--ne-forest);
}

.ne-card__more .elementor-button-icon { display: none; }

/* The Home and related rows are three across with no pagination. */
.ne-cards--row .elementor-pagination { display: none; }

@media (max-width: 767px) {
	.ne-card__shot img { height: 220px; }
}

/* --------------------------------------------- listing and footer corrections */

/*
 * The filter row is an inline list. `.ne-list` sets a column stack for the
 * bullet lists that share the class, so the filters need a selector that
 * outranks it rather than merely following it.
 */
.elementor-widget-icon-list.ne-filters .elementor-icon-list-items {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 8px;
}

.elementor-widget-icon-list.ne-filters .elementor-icon-list-item { width: auto; }

/*
 * The footer's two menus are short lists and are set never to collapse, so the
 * burger Elementor renders alongside them has nothing to do.
 */
.ne-nav--footer .elementor-menu-toggle { display: none !important; }
.ne-nav--footer .elementor-nav-menu--main { display: block !important; }

/* Elementor already renders a vertical menu as a plain block list. Forcing it
   to flex fights SmartMenus' own sizing and each row ends up twice as tall. */
.ne-nav--footer .elementor-nav-menu li { width: 100%; }

/* Privacy and Terms: ivory like every other footer link, side by side on a
   desktop bar and stacked on a phone where the bar itself stacks. */
.elementor-widget-icon-list.ne-footer__legal .elementor-icon-list-items {
	display: flex;
	flex-direction: row;
	gap: 26px;
	justify-content: flex-end;
}

.elementor-widget-icon-list.ne-footer__legal .elementor-icon-list-item { width: auto; }
.elementor-widget-icon-list.ne-footer__legal .elementor-icon-list-icon { display: none; }

.elementor-widget-icon-list.ne-footer__legal .elementor-icon-list-item > a,
.elementor-widget-icon-list.ne-footer__legal .elementor-icon-list-item > a .elementor-icon-list-text {
	color: var(--ne-on-forest);
	font-family: var(--ne-font-body);
	font-size: 14px;
	text-decoration: none;
}

.elementor-widget-icon-list.ne-footer__legal .elementor-icon-list-item > a:hover .elementor-icon-list-text {
	color: var(--ne-brass);
}

@media (max-width: 767px) {
	/* On a phone the two links run the full width of the bar, one at each end. */
	.elementor.elementor .e-con > .elementor-widget.ne-footer__legal { width: 100%; align-self: stretch; }
	.elementor-widget-icon-list.ne-footer__legal .elementor-icon-list-items {
		flex-direction: row;
		gap: 16px;
		justify-content: space-between;
		width: 100%;
		margin: 0 !important;
	}
	.elementor-widget-icon-list.ne-footer__legal .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
}

/* The card's read-more is sentence case in the design; the kit's button style
   is tracked caps, and Elementor's button CSS loads after this file. */
.elementor-widget-button.ne-card__more .elementor-button,
.elementor-widget-button.ne-card__more .elementor-button-text {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: var(--ne-fs-small);
}

/* The active filter's label sits inside the anchor, so the colour has to reach
   the text span rather than stopping at the link. */
.elementor-widget-icon-list.ne-filters .elementor-icon-list-item:first-child > a .elementor-icon-list-text,
.elementor-widget-icon-list.ne-filters .elementor-icon-list-item:first-child .elementor-icon-list-text {
	color: var(--ne-ivory);
}

/* ------------------------------------------------ Theme Builder nav menu */

/*
 * Elementor binds a Nav Menu's item typography to the kit's *primary* style,
 * which on this site is Amiri at 48px, and writes that into the template's own
 * stylesheet at `.elementor-widget-nav-menu .elementor-nav-menu .elementor-item`.
 * In Elementor 4.2 the leaf control is no longer settable from
 * `_elementor_data`, so the menu is dressed here, one class more specific than
 * the rule it has to beat.
 */
.elementor-widget-nav-menu.ne-nav .elementor-nav-menu .elementor-item {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-nav);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ne-ivory);
	padding: 6px 0;
}

.elementor-widget-nav-menu.ne-nav .elementor-nav-menu .elementor-item:hover,
.elementor-widget-nav-menu.ne-nav .elementor-nav-menu .elementor-item:focus,
.elementor-widget-nav-menu.ne-nav .elementor-nav-menu .elementor-item.elementor-item-active {
	color: var(--ne-brass);
}

.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--main > ul { gap: 28px; }
.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--main > ul > li { margin: 0; }

.elementor-widget-nav-menu.ne-nav--footer .elementor-nav-menu .elementor-item {
	font-size: var(--ne-fs-body);
	color: var(--ne-on-forest-dim);
	padding: 5px 0;
	justify-content: flex-end;
	text-align: right;
}

/* Stacked under the brand block, the menus read left like everything else. */
@media (max-width: 1024px) {
	.elementor-widget-nav-menu.ne-nav--footer .elementor-nav-menu .elementor-item {
		justify-content: flex-start;
		text-align: left;
	}
}

.elementor-widget-nav-menu.ne-nav--footer .elementor-nav-menu .elementor-item:hover {
	color: var(--ne-brass);
}

/* The header's Apply Now is the shared outlined button; the only thing the
   header adds is that it must not wrap when the menu is wide. */
.elementor-widget-button.ne-header__cta-btn .elementor-button {
	white-space: nowrap;
}

.elementor-widget-button.ne-header__cta-btn .elementor-button-icon { display: none; }

/* The Site Logo widget centres itself by default; in the footer it sits above
   the tagline on the left. */
.elementor-widget.ne-footer__brand,
.elementor-widget.ne-footer__brand .elementor-widget-container { text-align: left; }
.elementor-widget.ne-footer__brand img { margin-inline: 0; }

/* =========================================================================
 * Mobile and tablet corrections
 * ====================================================================== */

/* ------------------------------------------------------------- header */

/*
 * Below 1024px the menu collapses to a burger. The header stays one row: logo
 * on the left, then Contact Us, then the burger at the far right. The right
 * group was sized for desktop (78%) and wrapped under the logo on a phone.
 */
@media (max-width: 1024px) {
	.ne-header--builder > .e-con-inner {
		flex-wrap: nowrap;
		align-items: center;
		gap: 16px;
	}

	.ne-header--builder .ne-header__right {
		width: auto !important;
		flex: 1 1 auto;
		flex-wrap: nowrap;
		justify-content: flex-end;
		gap: 12px;
	}

	.ne-header__right .ne-header__cta-btn { order: 1; }
	.ne-header__right .ne-nav { order: 2; width: auto; }

	.elementor-widget.ne-header__brand { width: auto; }
	.elementor-widget.ne-header__brand img { width: 76px; height: auto; }

	/* The burger: ivory bars on the forest header, no box behind it. */
	.elementor-widget-nav-menu.ne-nav .elementor-menu-toggle {
		background: transparent;
		border: 0;
		padding: 6px;
		margin: 0;
		color: var(--ne-ivory);
		font-size: 26px;
	}

	.elementor-widget-nav-menu.ne-nav .elementor-menu-toggle svg {
		fill: var(--ne-ivory);
		width: 26px;
		height: 26px;
	}

	.elementor-widget-nav-menu.ne-nav .elementor-menu-toggle:hover svg,
	.elementor-widget-nav-menu.ne-nav .elementor-menu-toggle.elementor-active svg { fill: var(--ne-brass); }

	/* The open menu: a panel under the header, full width, in the header's own
	   navy so it reads as the header opening rather than a green band dropping
	   out of a navy one (Aanand, 2026-10-16). */
	.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--dropdown {
		background: var(--ne-navy);
		border-top: 1px solid var(--ne-line-navy);
		box-shadow: 0 18px 30px rgba(0, 0, 0, .18);
	}

	.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--dropdown .elementor-item {
		font-family: var(--ne-font-body);
		font-size: 17px;
		color: var(--ne-ivory);
		background: transparent;
		padding: 14px 24px;
		border-bottom: 1px solid var(--ne-line-navy);
		justify-content: flex-start;
	}

	.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--dropdown .elementor-item:hover,
	.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
		color: var(--ne-brass);
		background: transparent;
	}
}

/*
 * Aanand, 2026-09-24: on a phone the outlined Apply Now and the burger will not
 * sit on one line beside the logo, so the header broke onto a second row. The
 * button comes out below 768px; it is still there on tablet, where the row
 * fits, and the enquiry form is reachable from the menu and the footer.
 */
@media (max-width: 767px) {
	.ne-header__right .ne-header__cta-btn { display: none; }
}

/* -------------------------------------------------------------- stats */

/* Two stats to a row on a phone. The desktop 32px gap plus two 46% columns is
   wider than a 335px content box, so they fell to one per row. */
@media (max-width: 767px) {
	.ne-stats__row {
		--column-gap: 12px;
		--row-gap: 32px;
		column-gap: 12px !important;
		row-gap: 32px !important;
		justify-content: space-between;
	}
}

/* ---------------------------------------------------------- challenge */

/* The picture each challenge card carries below desktop. */
.ne-challenge-card__shot img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	border-radius: 0;
}

/* ----------------------------------------------------------- collages */

/*
 * Below desktop a four-picture collage stays a 2x2 collage instead of stacking
 * into four full-width photographs, with the same stagger as desktop at a
 * smaller scale.
 */
@media (max-width: 1024px) {
	.ne-trusted__collage .ne-collage__col--low { padding-top: 32px; }
	.ne-trusted__collage .ne-shot img,
	.ne-trusted__collage .ne-collage__col--low  .ne-shot:nth-of-type(1) img,
	.ne-trusted__collage .ne-collage__col--low  .ne-shot:nth-of-type(2) img,
	.ne-trusted__collage .ne-collage__col--high .ne-shot:nth-of-type(1) img,
	.ne-trusted__collage .ne-collage__col--high .ne-shot:nth-of-type(2) img { height: 220px; }
	.ne-trusted__collage .ne-collage__col--low  .ne-shot:nth-of-type(2) img,
	.ne-trusted__collage .ne-collage__col--high .ne-shot:nth-of-type(1) img { height: 170px; }
}

@media (max-width: 767px) {
	.ne-trusted__collage .ne-collage__col--low { padding-top: 24px; }
	.ne-trusted__collage .ne-shot img,
	.ne-trusted__collage .ne-collage__col--low  .ne-shot:nth-of-type(1) img,
	.ne-trusted__collage .ne-collage__col--high .ne-shot:nth-of-type(2) img { height: 170px; }
	.ne-trusted__collage .ne-collage__col--low  .ne-shot:nth-of-type(2) img,
	.ne-trusted__collage .ne-collage__col--high .ne-shot:nth-of-type(1) img { height: 130px; }
}

/* The methodology strip: one wide picture over two halves below desktop. */
@media (max-width: 1024px) {
	.ne-strip .ne-strip__lead .ne-shot img { height: 220px; }
	.ne-strip .ne-strip__pair .ne-shot img { height: 150px; }
}


/* ------------------------------------------------------- method steps */

/*
 * Below desktop each step is one card: its picture on top, then the number,
 * title and copy, so no picture can be read as belonging to the step after it.
 * The picture is first in the markup, so stacking is simply a column; the
 * desktop row-reverse on alternate steps is undone here.
 */
@media (max-width: 1024px) {
	.elementor .ne-step.e-con {
		flex-direction: column !important;
		--flex-direction: column;
		background: var(--ne-ivory-50);
		border-radius: 0;
		padding: 14px 14px 26px;
		gap: 18px;
	}

	.ne-step > .e-con { padding-inline: 8px; }
	.ne-step .ne-step__shot img { height: 240px; border-radius: 0; }
	.ne-step__number .elementor-heading-title { font-size: var(--ne-fs-stat); }
	.ne-timeline > .e-con-inner { gap: 28px; }
}

@media (max-width: 767px) {
	.ne-step .ne-step__shot img { height: 200px; }
	.ne-step__number .elementor-heading-title { font-size: var(--ne-fs-stat); }
}

/* ======================================================= side-dot alignment
 *
 * Every dot or icon that sits beside text is centred on the *first line* of
 * that text, not on the block and not on the top edge. Elementor top-aligns a
 * side icon, which left the possibility labels 5px high and the challenge dots
 * 2px high. Each variant declares its first-line height as --ne-line and the
 * icon box takes exactly that height with the icon centred inside it, so the
 * dot lands on the line whether the text wraps to one line or four.
 * ====================================================================== */

.elementor-widget-icon-box.ne-iconbox[class*="position-inline-start"] .elementor-icon-box-wrapper {
	align-items: flex-start;
}

/* Side icons only. A top icon is centred by the box's text-align, and turning
   its container into a flexbox pins it to the left edge instead. */
.elementor-widget-icon-box.ne-iconbox[class*="position-inline-start"] .elementor-icon-box-icon {
	display: flex;
	align-items: center;
	height: var(--ne-line, auto);
	margin-block: 0;
}

.elementor-widget-icon-box.ne-iconbox[class*="position-inline-start"] .elementor-icon {
	display: flex;
	align-items: center;
	line-height: 0;
}

.elementor-widget-icon-box.ne-possibility__pill { --ne-line: 21.25px; } /* Amiri 17 x 1.25 */
.elementor-widget-icon-box.ne-iconbox--note     { --ne-line: 24.8px; }  /* Outfit 16 x 1.55 */

/* Except the challenge note: Figma centres its ringed dot on the whole block
   of copy, and the dot is taller than one line. */
.elementor-widget-icon-box.ne-iconbox--note .elementor-icon-box-wrapper { align-items: center; gap: 8px; }
.elementor-widget-icon-box.ne-iconbox--note .elementor-icon-box-icon { height: auto; }
.elementor-widget-icon-box.ne-oldway__item      { --ne-line: 23px; }    /* Amiri 20 x 1.15 */

/* The same rule for the Icon List bullets. */
.elementor-widget-icon-list.ne-list .elementor-icon-list-item { align-items: flex-start; }
.elementor-widget-icon-list.ne-list .elementor-icon-list-icon { height: var(--ne-line, 24px); }
.elementor-widget-icon-list.ne-list      { --ne-line: 24px; }  /* 16 x 1.5 */
.elementor-widget-icon-list.ne-list--lead { --ne-line: 30px; } /* 20 x 1.5 */

@media (max-width: 767px) {
	.elementor-widget-icon-list.ne-list--lead { --ne-line: 25.5px; } /* 17 x 1.5 */
}

/* ------------------------------------------------------- service cards */

/* The arrow link under a service card wraps on a phone. Left-aligned, so the
   lines read as a label rather than a centred stack with the arrow adrift. */
.elementor-widget-button.ne-btn--arrow .elementor-button { text-align: left; }
.elementor-widget-button.ne-btn--arrow .elementor-button-icon { flex: 0 0 auto; align-self: center; margin: 0; }

@media (max-width: 767px) {
	.elementor-widget-button.ne-btn--arrow .elementor-button {
		font-size: var(--ne-fs-btn);
		letter-spacing: .06em;
	}
}

@media (max-width: 767px) {
}

/* The four method phases run two to a row on a phone. The desktop 32px gap
   plus two 46% columns is wider than the content box, as with the stats. */
@media (max-width: 767px) {
	.ne-phases {
		--column-gap: 16px;
		--row-gap: 36px;
		column-gap: 16px !important;
		row-gap: 36px !important;
		justify-content: space-between;
	}
}

/* ------------------------------------------------------------- tracking */

/*
 * Elementor ties the Icon Box title, the Testimonial name and role, and the
 * Reviews name and title to the kit's *heading* typography, and that style
 * carries the headings' -2% tracking. These are all set in Outfit at label
 * sizes, where negative tracking crushes the letters together, so each one is
 * reset to the body's zero tracking here.
 */
.elementor-widget-icon-box.ne-iconbox--paradigm .elementor-icon-box-title,
.elementor-widget-icon-box.ne-mark .elementor-icon-box-description,
.elementor-widget-testimonial.ne-testimonial .elementor-testimonial-name,
.elementor-widget-testimonial.ne-testimonial .elementor-testimonial-job,
.elementor-widget-reviews.ne-reviews .elementor-testimonial__name,
.elementor-widget-reviews.ne-reviews .elementor-testimonial__title,
.elementor-widget-reviews.ne-reviews .elementor-testimonial__text {
	letter-spacing: 0;
}

/*
 * Paradigm icon rows. Each label has to read as belonging to the disc above
 * it, so the disc-to-label gap is tight and the gap between rows is wider.
 * Before this the label sat 26px under its own disc and only 10px above the
 * next one, and read as that one's label instead.
 */
.elementor-widget-icon-box.ne-iconbox--paradigm { --icon-box-icon-margin: 8px; }
/* Elementor writes a 15px gap between an icon and its text into the page's own
   stylesheet, which loads after this one, so the flag is what lands it. */
.elementor-widget-icon-box.ne-iconbox--paradigm .elementor-icon-box-wrapper { gap: 8px !important; }
.elementor-widget-icon-box.ne-iconbox--paradigm .elementor-icon-box-icon { margin: 0; }
.elementor-widget-icon-box.ne-iconbox--paradigm .elementor-icon-box-title { margin: 0; }

.ne-paradigm__icons {
	--row-gap: 26px;
	row-gap: 26px !important;
}

/*
 * Tablet keeps the two paradigm cards side by side, so the shift arrow stays
 * horizontal in the gutter. The gutter and card padding are tighter than on
 * desktop, so the arrow is shortened to match. Phones stack the cards and
 * hide the arrow.
 */
@media (min-width: 768px) and (max-width: 1024px) {
	.ne-paradigm__grid::after {
		width: 96px;
		padding: 6px 22px 6px 10px;
		font-size: 9px;
		letter-spacing: .14em;
		white-space: nowrap;
	}
	.ne-paradigm.e-con { --padding-left: 22px; --padding-right: 22px; }
}

/* Both paradigm cards fill their column, so they end level whichever runs longer. */
.ne-paradigm__grid > .e-con > .ne-paradigm.e-con { flex-grow: 1; }

/*
 * First screen. The hero's min-height is 100svh less these two, so header,
 * hero and the stats band land in one fold. Keep them in step with the real
 * header and stats heights at each breakpoint. It is a minimum, so on a very
 * short screen the hero grows to fit its copy rather than clipping it.
 */
:root {
	--ne-header-h: 91px;
	--ne-stats-h: 165px; /* counters, 2026-09-17 */
}
@media (max-width: 1024px) {
	:root { --ne-stats-h: 143px; }
	.ne-stats__row {
		--column-gap: 24px;
		column-gap: 24px !important;
	}
}
@media (max-width: 767px) {
	:root { --ne-stats-h: 203px; }
}

/*
 * Short screens (a 768px laptop, a landscape tablet): the hero's copy is
 * taller than the space left, so the stack, the headline and the padding all
 * tighten. Elementor writes the gap and type into the page stylesheet, which
 * loads after this one, hence the flags.
 */
@media (min-width: 768px) and (max-height: 820px) {
	.ne-hero__body.e-con { --gap: 20px !important; --row-gap: 20px !important; }
	.ne-hero.e-con { --padding-top: 36px !important; --padding-bottom: 36px !important; }
}
@media (min-width: 1025px) and (max-height: 820px) {
	.ne-hero__title .elementor-heading-title { font-size: 60px !important; }
}

/* ------------------------------------------------------- UX audit fixes */

/*
 * Headings break into even lines, so a title never leaves one word alone on
 * its last line ("Story.", "out").
 */
.elementor-heading-title { text-wrap: balance; }

/*
 * Short pages: the footer sits at the foot of the screen instead of leaving
 * an empty strip of page colour underneath it.
 */
body {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}
body > footer.elementor { margin-top: auto; }

@media (max-width: 767px) {


	/*
	 * Buttons: tighter tracking and padding on a phone so the labels fit on
	 * one line instead of wrapping to two.
	 */
	.ne-btn .elementor-button {
		padding-left: 22px !important;
		padding-right: 22px !important;
		letter-spacing: .06em !important;
		font-size: var(--ne-fs-btn) !important;
		gap: 10px;
	}
}

/*
 * Brass as text. The kit brass is 2.5 to 3.1:1 on the light bands, below the
 * 4.5:1 small text needs, so eyebrows, accent words and numerals on a light
 * surface use Brass 700 instead. On forest and walnut the original brass
 * already reads well, so every dark surface puts it back.
 */
:root { --ne-brass-text: var(--e-global-color-brass700, var(--ne-brass-700)); }

/*
 * Dark bands come in two. The green is the default; every other one is navy,
 * which build scripts mark with ne-band-dark--navy. Anything that keyed off
 * the green hairline follows the band it is in.
 */
.e-con.ne-band-dark--navy { background-color: var(--ne-navy); }

/* ==========================================================================
   Surfaces, after Home 2.
   --------------------------------------------------------------------------
   The texture is applied in the build, in ne_band_surface, as an Elementor
   background overlay on every band. It was tried here first and reached only
   the handful of sections tagged ne-band-dark or ne-band-light; the rest carry
   a component class and nothing else, so most of the site stayed flat colour.
   Keying off the colour the band actually has is the only way to catch them
   all, and that is something the build can see and a stylesheet cannot.
   ========================================================================== */

/* ==========================================================================
   The closing band, after Home 2.
   --------------------------------------------------------------------------
   The brandmark sits small over the line, as it does on his: 60px, which is
   what the mark measures there. At its natural 306 x 440 it reads as a hero.
   ========================================================================== */

.ne-cta--closing { text-align: center; }

.elementor .ne-cta__mark img {
	display: block;
	width: 58px;
	height: auto;
	margin-inline: auto;
}

.ne-cta--closing .ne-cta__copy { max-width: 60ch; margin-inline: auto; }

@media (max-width: 767px) {
	.elementor .ne-cta__mark img { width: 46px; }
}

/* ==========================================================================
   Marked phrases, after Home 2.
   --------------------------------------------------------------------------
   Two rules that draw a gold line through or under a phrase and sweep it in
   when the heading arrives. Wrap the words in <span class="ne-strike"> or
   <span class="ne-underline"> inside any heading on any page.

   Elementor hangs .elementor-invisible on a widget until it scrolls into view
   and then removes it, so that class is the cue: no extra script, and the line
   is simply there if entrance animations are off.
   ========================================================================== */

.ne-strike,
.ne-underline { position: relative; white-space: nowrap; }

.ne-strike::after,
.ne-underline::after {
	content: "";
	position: absolute;
	left: -0.04em;
	right: -0.04em;
	height: 2px;
	background: var(--ne-brass);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.1s cubic-bezier(.22, 1, .36, 1) .35s;
}

.ne-strike::after     { top: 0.80em; }           /* through the middle */
.ne-underline::after  { bottom: -0.04em; }       /* just clear of the baseline */

.elementor-widget-heading:not(.elementor-invisible) .ne-strike::after,
.elementor-widget-heading:not(.elementor-invisible) .ne-underline::after,
.elementor-widget-text-editor:not(.elementor-invisible) .ne-strike::after,
.elementor-widget-text-editor:not(.elementor-invisible) .ne-underline::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.ne-strike::after,
	.ne-underline::after { transition: none; transform: scaleX(1); }
}

.ne-band-dark--navy .ne-divider .elementor-divider-separator { border-top-color: var(--ne-line-navy); }
.ne-band-dark--navy .ne-card,
.ne-band-dark--navy .ne-principle { border-color: var(--ne-line-navy); }

.ne-band-dark,
.ne-hero,
.ne-hero__body, /* Rachel's video hero: its copy column sits on forest */
.ne-page-hero,
.ne-post-header,
.ne-header,
.ne-footer,
.ne-service,
.ne-solution__card,
.ne-principle,
.ne-cta {
	--ne-brass-text: var(--e-global-color-secondary, var(--ne-brass));
}

.elementor-widget-heading.ne-eyebrow .elementor-heading-title,
.ne-step__number .elementor-heading-title,
.elementor .ne-accent {
	color: var(--ne-brass-text) !important;
}

/* Katy's bio runs full width in its card; the measure keeps lines readable. */
/* Elementor caps every widget in a container at 100%, which outranks a bare class. */
.elementor.elementor .e-con > .elementor-widget.ne-founder__bio { max-width: 760px !important; }
.ne-founder__bio p + p { margin-top: 14px; }

/*
 * Header dropdowns (About, Services), as the design's Header frame shows them:
 * a small white panel under the parent item, dark text, the hovered row on an
 * ivory wash.
 */
.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--main .sub-arrow { margin-left: 6px; }
.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--main .sub-arrow svg,
.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--main .sub-arrow i {
	width: 11px;
	height: 11px;
	font-size: 11px;
	fill: currentColor;
}

.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--main .sub-menu {
	background: var(--ne-white);
	border: 0;
	border-radius: 0;
	box-shadow: 0 12px 28px rgba(22, 38, 30, .18);
	padding: 6px;
	min-width: 230px !important;
}

.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-small);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.4;
	color: var(--ne-ink);
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 10px 14px;
}

.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover,
.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:focus,
.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item.elementor-item-active {
	color: var(--ne-forest);
	background: var(--ne-ivory);
}

/* In the phone and tablet menu the dropdowns open in place, indented. */
@media (max-width: 1024px) {
	.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--dropdown .sub-menu {
		background: var(--ne-navy-900);
		border-top: 0;
		box-shadow: none;
	}
	.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item {
		font-family: var(--ne-font-body);
		font-size: var(--ne-fs-body);
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
		color: var(--ne-on-forest-dim);
		background: transparent;
		padding: 12px 24px 12px 40px;
		border-bottom: 1px solid var(--ne-line-navy);
	}
	.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item:hover,
	.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item.elementor-item-active {
		color: var(--ne-brass);
		background: transparent;
	}
}


/* =========================================================================
 * Testimonials (Figma 405:7643, the same on Home, How We Work and Teacher)
 *
 * Cards #FAFAFA r24 on a translucent sand panel narrower than the row of
 * cards, stars at the top and the name at the foot, and the two arrows
 * together in a white tab under the middle card: prev as a slate arrow, next
 * on a brass square.
 * ====================================================================== */

/* The colour moved into the build so ne_band_surface can see it and give
   the band a texture; a stylesheet colour is invisible to it. */

.elementor-widget-reviews.ne-reviews { position: relative; }

.elementor-widget-reviews.ne-reviews::before {
	content: "";
	position: absolute;
	inset: 0 90px;
	border-radius: 0;
	background: rgba(216, 208, 196, .25);
	pointer-events: none;
}

.ne-reviews .elementor-main-swiper {
	padding: 81px 0 145px;
	overflow: hidden;
}

.ne-reviews .swiper-wrapper { align-items: stretch; }

.ne-reviews .swiper-slide {
	height: auto;
	background: #FAFAFA;
	border: 0;
	border-radius: 0;
	padding: 48px 32px 32px;
	transition: box-shadow .25s ease;
}

.ne-reviews .swiper-slide:hover {
	box-shadow: 0 100px 80px rgba(56, 56, 56, .07), 0 42px 33px rgba(56, 56, 56, .05), 0 22px 18px rgba(56, 56, 56, .04), 0 12px 10px rgba(56, 56, 56, .04);
}

/* Header and cite dissolve so stars, quote and name can be ordered in the
   card itself. */
.elementor-widget-reviews.ne-reviews .elementor-testimonial {
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 0;
	padding: 0;
	background: transparent;
	border: 0;
}

.ne-reviews .elementor-testimonial__header,
.ne-reviews .elementor-testimonial__cite { display: contents; }

.ne-reviews .elementor-testimonial__image,
.ne-reviews .elementor-testimonial__icon { display: none !important; }

/* Change request TE2: a quote mark where the star rating used to be, in the
   display serif and the brand gold, hidden from anyone listening to the page. */
.elementor-widget-reviews.ne-reviews .elementor-testimonial::before {
	content: "\201C";
	order: 1;
	font-family: var(--ne-font-heading);
	font-size: 56px;
	line-height: 1;
	height: 34px;
	margin: 0 0 24px;
	color: var(--ne-brass);
}
.ne-reviews .elementor-testimonial__content { order: 2; margin: 0 0 24px; padding: 0; }
.ne-reviews .elementor-testimonial__name { order: 3; margin-top: auto; }
.ne-reviews .elementor-testimonial__title { order: 4; }

.elementor-widget-reviews.ne-reviews .elementor-testimonial__text {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-lead);
	font-weight: 400;
	line-height: 1.5;
	color: #272727;
}

.elementor-widget-reviews.ne-reviews .elementor-testimonial__name {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-small);
	font-weight: 600;
	line-height: 1.6;
	color: #313131;
}

.elementor-widget-reviews.ne-reviews .elementor-testimonial__title {
	font-family: var(--ne-font-body);
	font-size: 12px;
	line-height: 1.4;
	color: #425466;
}

/* The arrow tab. */
.elementor-widget-reviews.ne-reviews .elementor-swiper-button {
	top: auto !important;
	bottom: 37px !important;
	transform: none !important;
	width: 60px;
	height: 66px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
}

.elementor-widget-reviews.ne-reviews .elementor-swiper-button-prev { left: calc(50% - 60px) !important; right: auto !important; }
.elementor-widget-reviews.ne-reviews .elementor-swiper-button-next { left: 50% !important; right: auto !important; }

.ne-reviews .elementor-swiper-button > * { display: none; }

.ne-reviews .elementor-swiper-button::before {
	content: "";
	display: block;
	width: 20px;
	height: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8'%3E%3Cpath d='M4 0 0 4l4 4V4.75h16v-1.5H4z' fill='%2396B0B8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ne-reviews .elementor-swiper-button-next::after {
	content: "";
	position: absolute;
	inset: 8px 10px 8px 0;
	background: #B78B46;
	box-shadow: 0 8px 15px rgba(72, 72, 138, .08);
	z-index: 0;
	transition: background-color .2s ease;
}

.ne-reviews .elementor-swiper-button-next::before {
	position: relative;
	z-index: 1;
	margin-right: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8'%3E%3Cpath d='M16 0l4 4-4 4V4.75H0v-1.5h16z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

.ne-reviews .elementor-swiper-button-next:hover::after { background: var(--ne-brass-600); }
.ne-reviews .elementor-swiper-button-prev:hover::before { filter: brightness(.7); }

@media (max-width: 1024px) {
	.elementor-widget-reviews.ne-reviews::before { inset: 0 40px; }
}

@media (max-width: 767px) {
	.elementor-widget-reviews.ne-reviews::before { inset: 0 16px; }
	.ne-reviews .elementor-main-swiper { padding: 40px 0 130px; }
	.ne-reviews .swiper-slide { padding: 32px 24px 24px; }
}

/* A section title with a brass hairline running on to the right edge
   (Figma 405:7652). */
.ne-stack-head--ruled > .elementor-widget-heading:has(h2) {
	display: flex;
	align-items: center;
	gap: 32px;
	width: 100%;
}

.ne-stack-head--ruled > .elementor-widget-heading:has(h2)::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: rgba(206, 128, 41, .3);
}

.ne-band-dark .ne-stack-head--ruled > .elementor-widget-heading:has(h2)::after { background: rgba(249, 244, 232, .15); }

/* A full-width film placeholder: 1235 x 699 on How We Work (405:7367), 540
   tall on Teacher Placement (405:5992). */
.ne-video--wide { width: 100%; }
.ne-video--wide .ne-video__poster img { height: 699px; }
.ne-page-teacher-placement .ne-video--wide .ne-video__poster img { height: 540px; }

@media (max-width: 1024px) {
	.ne-video--wide .ne-video__poster img,
	.ne-page-teacher-placement .ne-video--wide .ne-video__poster img { height: 400px; }
}

@media (max-width: 767px) {
	.ne-video--wide .ne-video__poster img,
	.ne-page-teacher-placement .ne-video--wide .ne-video__poster img { height: 240px; }
}

/* List bullets (Figma 405:6392): a 12px brass dot in a 17px ring of brass at
   32%, 6px from the text. */
.elementor-widget-icon-list.ne-list .elementor-icon-list-item { gap: 6px; }
.elementor-widget-icon-list.ne-list .elementor-icon-list-icon {
	flex: 0 0 17px;
	width: 17px;
	justify-content: center;
}
.elementor-widget-icon-list.ne-list .elementor-icon-list-icon svg {
	/* Elementor sizes the glyph from its icon-size variable. */
	width: 12px !important;
	height: 12px !important;
	flex: 0 0 auto;
	box-sizing: content-box;
	padding: 2.5px;
	border-radius: 50%;
	background: rgba(197, 155, 88, .32);
}

/* Photo band (Figma 405:7637): the copy is a measured centred column. */
.ne-photo-band__body { max-width: 846px; margin-inline: auto; }
.elementor.elementor .e-con > .elementor-widget.ne-photo-band__copy { max-width: 810px; margin-inline: auto; }
.elementor-widget.ne-photo-band__copy { font-weight: 300; }

/* Core Beliefs rotating title (ne_head_rotating): the fixed words in the
   title colour, the rotating ones brass italic, typed with a soft brass
   selection. Brass 700 on light bands for contrast. */
.elementor-widget-animated-headline.ne-rotating-title {
	--dynamic-text-color: var(--ne-brass-700);
	--typing-selected-bg-color: rgba(206, 128, 41, .25);
	--typing-selected-color: var(--ne-brass-700);
}
.elementor-widget-animated-headline.ne-rotating-title--dark {
	--dynamic-text-color: var(--ne-brass);
	--typing-selected-color: var(--ne-ivory);
}
.ne-rotating-title .elementor-headline { text-wrap: balance; }
.ne-rotating-title .elementor-headline-dynamic-text { font-style: italic; }
/* The rotating word always sits on its own last line, so typing never
   reflows the sentence: three rows on tablet and up, two on phones (the
   first break is dropped and the sentence wraps as it needs). */
@media (max-width: 767px) {
	.ne-rotating-title br.ne-br-wide { display: none; }
}

/*
 * The Philosophy hero's rotating word. It sat in a solid brass plate; on the
 * new brand it is the gold italic every other marked word on the site is, so
 * the plate is gone and only the colour carries it (Aanand, 2026-10-15). The
 * class keeps its name because it lives in Aaron's saved tree.
 *
 * The erase selection is a faint ivory wash rather than a brass block, so the
 * plate does not flash back each time a word is deleted.
 */
.elementor-widget-animated-headline.ne-rotating-title--plate {
	--dynamic-text-color: var(--ne-brass);
	--typing-selected-bg-color: rgba(249, 244, 232, .14);
	--typing-selected-color: var(--ne-brass);
}
/* A fixed line height, aligned to the line top rather than the word's own
   baseline, so the headline keeps its height while the word types and erases. */
.ne-rotating-title--plate .elementor-headline-dynamic-wrapper {
	height: 1.1em;
	line-height: 1.1;
	box-sizing: content-box;
	vertical-align: top;
	margin-top: .08em;
}
/* "Positive Relationships" is wider than a phone column at the H1 size. */
@media (max-width: 767px) {
	.ne-rotating-title--plate .elementor-headline-dynamic-wrapper { font-size: .82em; }
}

/* The typewriter caret takes the word's colour instead of Elementor's near
   black, which disappeared on the forest bands. */
.ne-rotating-title .elementor-headline-dynamic-wrapper::after { background-color: var(--dynamic-text-color); }

/*
 * The shift arrow pointing down between stacked Old Way / New Way columns
 * (Figma 302:1009): a brass gradient shaft with "The Shift" running down it,
 * ending in an arrowhead. Philosophy stacks at 1024, Home's paradigm cards at
 * 767; each column pair gets room for the arrow.
 */
@media (max-width: 1024px) {
	.elementor .e-con.ne-phil-shift { --row-gap: 188px; row-gap: 188px !important; }
	.elementor .e-con.ne-phil-oldcol { position: relative; overflow: visible; }
	.elementor .e-con.ne-phil-oldcol::after { top: calc(100% + 24px); }
}

@media (max-width: 767px) {
	.elementor .e-con.ne-paradigm__grid { --row-gap: 200px; row-gap: 200px !important; }
	.elementor .e-con.ne-paradigm__grid > .e-con:first-child { position: relative; overflow: visible; }
	.elementor .e-con.ne-paradigm__grid > .e-con:first-child::after { top: calc(100% + 24px); }
}

@media (max-width: 1024px) {
	.elementor .e-con.ne-phil-oldcol::after {
		content: "The Shift";
		position: absolute;
		left: 50%;
		z-index: 3;
		width: 56px;
		height: 140px;
		transform: translateX(-50%);
		box-sizing: border-box;
		padding-top: 10px;
		writing-mode: vertical-rl;
		display: flex;
		align-items: center;
		font-family: var(--ne-font-body);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .2em;
		text-transform: uppercase;
		color: var(--ne-white);
		background: linear-gradient(180deg, rgba(244, 235, 221, .3) 0%, rgba(209, 182, 123, .9) 40%, #CE8029 100%);
		clip-path: polygon(25% 0, 75% 0, 75% 68%, 100% 68%, 50% 100%, 0 68%, 25% 68%);
		filter: drop-shadow(0 7px 4px rgba(0, 0, 0, .08));
		pointer-events: none;
	}
}

@media (max-width: 767px) {
	.elementor .e-con.ne-paradigm__grid > .e-con:first-child::after {
		content: "The Shift";
		position: absolute;
		left: 50%;
		z-index: 3;
		width: 56px;
		height: 140px;
		transform: translateX(-50%);
		box-sizing: border-box;
		padding-top: 10px;
		writing-mode: vertical-rl;
		display: flex;
		align-items: center;
		font-family: var(--ne-font-body);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .2em;
		text-transform: uppercase;
		color: var(--ne-white);
		background: linear-gradient(180deg, rgba(244, 235, 221, .3) 0%, rgba(209, 182, 123, .9) 40%, #CE8029 100%);
		clip-path: polygon(25% 0, 75% 0, 75% 68%, 100% 68%, 50% 100%, 0 68%, 25% 68%);
		pointer-events: none;
	}
}

/* Entrance animations (ne_entrance_animations): Elementor's Fade In Up moves
   a block up by its own full height, which is a long way for a tall card.
   The same fade with a short 24px rise. */
@keyframes neRise {
	from { opacity: 0; transform: translate3d(0, 24px, 0); }
	to   { opacity: 1; transform: none; }
}
.elementor-element.animated.fadeInUp { animation-name: neRise; }

/* The dropdown arrows in the mobile menu, white on the navy panel. */
.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--dropdown .sub-arrow svg { fill: #FFFFFF; }
.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--dropdown .sub-arrow i { color: #FFFFFF; }

/*
 * Rachel, change request 2026-09-21.
 * B2: on a green band a button carries two thin gold lines — the border, a
 * band of the green showing through, then a second line outside it. The gap is
 * drawn in the band's own colour, so this rule only belongs on green.
 * B3: every button label is set in capitals, so the header's sentence-case
 * "Apply Now" no longer reads as a different kind of control.
 */
/* The outlined button's second gold line. An outline sits outside the border
   box and takes no space, so the button does not move, the 2px gap stays
   transparent over film or a card, and both lines are exactly 1px at any
   display scaling. */
.elementor-widget-button.ne-btn--outline .elementor-button {
	outline: 1px solid var(--ne-brass);
	outline-offset: 2px;
}

.elementor-widget-button.ne-btn--outline .elementor-button:hover,
.elementor-widget-button.ne-btn--outline .elementor-button:focus {
	outline-color: var(--ne-brass);
}

/* The arrow links are text, not buttons, and keep their own casing. */
.elementor-widget-button:not(.ne-btn--arrow) .elementor-button,
.elementor-widget-button.ne-btn--sentence .elementor-button,
.elementor-widget-button.ne-header__cta-btn .elementor-button {
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* H2: the menu is set in capitals to match. The nav rule above is written at
   widget-plus-class specificity, so this one has to match it to win. */
.elementor-widget-nav-menu.ne-nav .elementor-nav-menu .elementor-item,
.elementor-widget-nav-menu.ne-nav .elementor-nav-menu .elementor-sub-item,
.elementor-widget-nav-menu.ne-nav .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-sub-item {
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* B1 also squares the review avatars, which were the last stadium-shaped
   images left on the site. */
.ne-reviews .elementor-testimonial__image img,
.ne-reviews img { border-radius: 0; }

/* Change request BG3: the larger button, used where a section's one action
   should carry the same weight as the copy beside it. */
.elementor-widget-button.ne-btn--lg .elementor-button {
	padding: 18px 44px;
	font-size: 15px;
}

/*
 * Jumping to an anchor puts the target at the very top of the window, where
 * the sticky header covers it. Every anchor target clears the header, and the
 * jump is eased rather than instant for anyone who has not asked otherwise.
 */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

[id] { scroll-margin-top: 104px; }

/* ==========================================================================
   Footer, after Rachel's notes of 2026-09-23 (Slack).
   ========================================================================== */

/*
 * "Reduce the font size of these links and increase the font size of the titles
 * (navigation and connect). Right now, the titles look smaller than the links."
 * The heading is bound to the kit's Nav Link style, 15px, which Elementor
 * writes as element CSS — so the selector carries the widget's own class to
 * outrank it.
 */
/*
 * With optimized markup the Heading widget IS the title element, so there is no
 * inner .elementor-heading-title to target — and Elementor writes the kit's Nav
 * Link style straight onto that element. The tag name is carried here to win
 * that cascade, the same trick the h2 rule above uses.
 */
.ne-footer div.ne-footer__heading.elementor-widget-heading,
.ne-footer div.ne-footer__heading.elementor-widget-heading .elementor-heading-title {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--ne-ivory);
}

.elementor-widget-nav-menu.ne-nav--footer .elementor-nav-menu .elementor-item {
	font-size: 14px;
}

/*
 * "Reduce the bottom padding of the bottom footer section." The copyright was
 * standing on 62px of green: 34 from the .ne-footer rule the fallback footer
 * needs, and 28 from the container's own padding. The builder footer keeps only
 * the second.
 */
.e-con.ne-footer--builder { padding-bottom: 0; --padding-bottom: 28px; }
.e-con.ne-footer--builder .ne-footer__bar { --padding-bottom: 0; }