/*
 * Home 2: a working copy of Home carrying the client's 21 September redesign of
 * three sections. The page loads home.css first (see ne-page-base in the child
 * theme's functions.php), so everything here is only the difference.
 *
 * The paths below climb out of pages/ twice, the same as home.css.
 */

/* ==========================================================================
   The client's 21 September redesign (Google doc, "Rolling Northward Website
   Changes"). Three sections were redrawn over the 16 September shoot. The
   versions they replace are still in the document, hidden on every breakpoint,
   so nothing is lost while these are under review.
   ========================================================================== */

/* ------------------------------------------- the challenge, second version */

.e-con.ne-challenge2 { --padding-bottom: var(--ne-section-lg); }

.ne-challenge2 .ne-q-head .elementor-heading-title {
	max-width: none;
	/* Sized to hold the sentence on one line down to a narrow laptop, as drawn,
	   rather than to the kit's h2, which wraps it into three. */
	font-size: clamp(25px, 3.5vw, 50px);
	line-height: 1.18;
}
/* The band's own flex gap plus each widget's margin left a hole between the
   headline, the standfirst and the cards; the drawing keeps them close. */
.e-con.ne-challenge2 > .e-con-inner { gap: 0; }
.ne-challenge2 .ne-q-head { margin-bottom: 18px; }
.ne-challenge2 .ne-q-sub { margin-bottom: 0; }
.ne-challenge2 .ne-q-head em { font-style: italic; }

/* The gold line through "one-size-fits-all" draws itself rather than arriving
   already struck. Elementor carries `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. */
/* The rule itself now lives in site.css, so any page can strike a phrase. */

/* Elementor is running with optimized markup, so a widget has no inner
   `.elementor-widget-container` to hang anything on: the widget element itself
   is the box, and its paragraphs are its direct children. */
.ne-challenge2 .ne-q-sub { max-width: 70ch; margin-inline: auto; }
.ne-challenge2 .ne-q-sub em { font-style: italic; color: var(--ne-ink); }

.e-con.ne-q-grid { margin-top: 44px; align-items: flex-start; }

/* Each card stands on its own caption. The stagger is the design's, not a
   rhythm of its own: the odd cards ride up, the even ones drop. */
.e-con.ne-q { --padding-top: 0; --padding-bottom: 0; gap: 0; height: 100%; }
.ne-q-grid > .e-con:nth-child(even) .ne-q { margin-top: 64px; }

.ne-q .ne-q__shot img {
	display: block;
	width: 100%;
	height: 340px;
	object-fit: cover;
	border-radius: 0;
}
.ne-q .ne-q__shot { line-height: 0; }

/* The focal point of each frame, so a 16:9 still crops to a portrait without
   losing the face it was chosen for. */
.ne-q-grid > .e-con:nth-child(1) .ne-q__shot img { object-position: 46% 52%; }
.ne-q-grid > .e-con:nth-child(2) .ne-q__shot img { object-position: 62% 40%; }
/* Client, 9/25: "Students head is cut off in the one-size-fits-all section".
   The frame is portrait and the still is 16:9, so cover fits the height and
   crops the width - the vertical half of object-position does nothing here.
   At 50% the band fell straight through the near student's head. At 35% it
   holds him and the boy opposite whole, and stops short of the third person
   rather than slicing her. */
.ne-q-grid > .e-con:nth-child(3) .ne-q__shot img { object-position: 35% 46%; }
.ne-q-grid > .e-con:nth-child(4) .ne-q__shot img { object-position: 54% 44%; }

.e-con.ne-q__cap {
	background: var(--ne-forest);
	flex: 1 1 auto;
	justify-content: center;
}
.elementor-widget-text-editor.ne-q__text,
.elementor-widget-text-editor.ne-q__text p {
	font-family: var(--ne-font-heading);
	font-style: normal;
	font-size: 19px;
	line-height: 1.45;
	text-align: center;
	color: var(--ne-ivory);
}
.elementor-widget-text-editor.ne-q__text em { font-style: italic; }

@media (max-width: 1024px) {
	.ne-q .ne-q__shot img { height: 300px; }
	.ne-q-grid > .e-con:nth-child(even) .ne-q { margin-top: 0; }
	.ne-q-grid > .e-con:nth-child(n+3) .ne-q { margin-top: 28px; }
}

@media (max-width: 767px) {
	.e-con.ne-q-grid { margin-top: 36px; }
	.ne-q .ne-q__shot img { height: 260px; }
	.ne-q-grid > .e-con .ne-q { margin-top: 0; }
	.elementor-widget-text-editor.ne-q__text,
	.elementor-widget-text-editor.ne-q__text p { font-size: 18px; }
}

/* ------------------------------ northward begins with the child, 2nd version */

.e-con.ne-begins2 { --padding-top: 0; --padding-bottom: 0; }
.e-con.ne-begins2 > .e-con-inner { padding: 0; max-width: none; }

.e-con.ne-begins2__grid { position: relative; gap: 0; }

/* The N sits over the seam between the green and the photograph, exactly as
   the client drew it: the hero's mark at a smaller size, and decoration, so it
   never takes a pointer. It is drawn on the photograph's own column and hung
   off its left edge rather than on the row, because the column is positioned
   and would otherwise paint over the half of the mark that crosses it. */
.e-con.ne-begins2__media::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	/*
	 * Client note, 9/25: "the logo in the middle doesn't look quite right -
	 * could be the opacity OR just not aligning". The box was 150x190 while
	 * the artwork is 156x254, so `contain` drew a 117px mark inside it and
	 * left 33px of slack the centring then had to guess at; -62% put it a
	 * further 23px above the seam's midpoint. The box is now the mark's own
	 * shape, so -50% is exactly centred. The shadow is what the opacity note
	 * is really about: the right half of the mark crosses a bright photo,
	 * where a thin brass outline has almost no contrast on its own.
	 */
	/* 132 x 190 is the brandmark's own 306:440. Stated outright rather than
	   left to aspect-ratio, which resolved against the band and gave the box a
	   600px height; the mark still drew centred inside it, but the box was
	   three times the size of the thing in it. */
	width: 132px;
	height: 190px;
	transform: translate(-50%, -50%);
	background: url(../../img/brandmark.png) center / contain no-repeat;
	filter: drop-shadow(0 0 9px rgba(10, 22, 17, .92)) drop-shadow(0 0 24px rgba(10, 22, 17, .5)) brightness(1.22);
	pointer-events: none;
	/* Above Elementor's own .e-con::before overlay, which sits at 0. */
	z-index: 4;
}

.e-con.ne-begins2__copy { max-width: 50%; }
.ne-begins2__copy .elementor-widget-button { margin-top: 12px; }

.e-con.ne-begins2__media { position: relative; z-index: 1; max-width: 50%; padding: 0; }
.ne-begins2__media .ne-begins2__shot { height: 100%; line-height: 0; }
.ne-begins2__media .ne-begins2__shot img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 520px;
	object-fit: cover;
	object-position: 58% 50%;
	border-radius: 0;
}

/* The promise line reads out of the foot of the picture. The gradient runs from
   the walnut of the old card into the forest of the band, so the two halves
   still meet in the same colour at the bottom edge. */
.ne-begins2__media .ne-begins2__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 120px 40px 36px;
	background: linear-gradient(to top, rgba(32, 55, 44, .92) 0%, rgba(90, 62, 43, .55) 55%, rgba(90, 62, 43, 0) 100%);
}
.elementor-widget-text-editor.ne-begins2__caption,
.elementor-widget-text-editor.ne-begins2__caption p {
	font-family: var(--ne-font-heading);
	font-style: normal;
	text-align: center;
	font-size: 26px;
	line-height: 1.35;
	color: var(--ne-ivory);
	margin: 0;
}
.elementor-widget-text-editor.ne-begins2__caption em { font-style: italic; color: var(--ne-brass); }

@media (max-width: 1024px) {
	/* Same correction as above: the box is the mark's shape, so the height
	   follows from the aspect-ratio instead of squaring it off. */
	.e-con.ne-begins2__media::before { width: 92px; height: 132px; }
	.elementor-widget-text-editor.ne-begins2__caption,
	.elementor-widget-text-editor.ne-begins2__caption p { font-size: 21px; }
	/* The line break belongs to the desktop measure; narrower, it leaves an
	   orphan, so the sentence is allowed to wrap where it needs to. */
	.ne-begins2__caption br { display: none; }
	.ne-begins2__media .ne-begins2__shot img { min-height: 420px; }
}

@media (max-width: 767px) {
	.e-con.ne-begins2__grid { flex-wrap: wrap; }
	.e-con.ne-begins2__copy,
	.e-con.ne-begins2__media { max-width: 100%; width: 100%; }
	/* Stacked, there is no seam to straddle, so the mark would land in the
	   middle of the photograph. */
	.e-con.ne-begins2__media::before { display: none; }
	.ne-begins2__media .ne-begins2__shot img { min-height: 340px; }
	.ne-begins2__media .ne-begins2__caption { padding: 90px 20px 26px; }
	.elementor-widget-text-editor.ne-begins2__caption,
	.elementor-widget-text-editor.ne-begins2__caption p { font-size: 19px; }
}

/* ------------------------------ a new world of possibilities, second version */

.e-con.ne-tiles { --padding-top: 0; --padding-bottom: 0; overflow: hidden; }
.e-con.ne-tiles > .e-con-inner { padding: 0; max-width: none; }

.e-con.ne-tile-row { gap: 10px; align-items: stretch; }
.ne-tile-row > .e-con { padding: 0; }

/* The diagonal. A clip-path keeps the photograph and the words upright while
   the edges lean, which a skew transform would not. The outer edge of the row
   stays square so the band still meets the screen cleanly. */
.e-con.ne-tile {
	--ne-cut: 52px;
	/* atan(cut / height): the hairline below leans by exactly the angle the
	   clip-path cuts, so it runs parallel to the tile's own edges. */
	--ne-lean: -8.96deg;
	position: relative;
	padding: 0;
	gap: 0;
	min-height: 330px;
	overflow: hidden;
	clip-path: polygon(var(--ne-cut) 0, 100% 0, calc(100% - var(--ne-cut)) 100%, 0 100%);
}
.ne-tile-row > .e-con:first-child .ne-tile { clip-path: polygon(0 0, 100% 0, calc(100% - var(--ne-cut)) 100%, 0 100%); }
.ne-tile-row > .e-con:last-child  .ne-tile { clip-path: polygon(var(--ne-cut) 0, 100% 0, 100% 100%, 0 100%); }

.ne-tile .ne-tile__shot { position: absolute; inset: 0; line-height: 0; }
.ne-tile .ne-tile__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* The scrim is forest at rest and brass on hover, which is the only thing that
   changes colour: the photograph underneath is untouched. */
.ne-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(22, 38, 30, .58);
	transition: background .45s ease;
	z-index: 1;
}
.ne-tile:hover::before,
.ne-tile:focus-within::before { background: rgba(206, 128, 41, .86); }

.e-con.ne-tile__body {
	position: relative;
	z-index: 2;
	height: 100%;
	justify-content: center;
	align-items: center;
	gap: 10px;
	/* Clear of the cut, so the words stay inside the hairline drawn on hover. */
	padding-inline: calc(var(--ne-cut) + 26px);
}
.ne-tile__title .elementor-heading-title {
	font-family: var(--ne-font-body);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ne-ivory);
	max-width: 16ch;
}

/* The sentence is held at nothing until the tile is hovered. Grid rows animate
   from 0fr to 1fr, so the copy expands to whatever height it actually needs
   instead of a max-height guessed here. */
.ne-tile__copy {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows .45s ease, opacity .35s ease;
}
.ne-tile__copy > p { overflow: hidden; min-height: 0; margin: 0; }
.ne-tile:hover .ne-tile__copy,
.ne-tile:focus-within .ne-tile__copy { grid-template-rows: 1fr; opacity: 1; }
.elementor-widget-text-editor.ne-tile__copy,
.elementor-widget-text-editor.ne-tile__copy p { color: var(--ne-ivory); }
.ne-tile__copy { max-width: 34ch; }

/* The hairline the design draws inside the cut on hover. It is skewed to the
   same angle as the cut so it sits parallel to the tile's slanted edges rather
   than as an upright rectangle inside a leaning frame. */
.e-con.ne-tile::after {
	content: "";
	position: absolute;
	inset: 16px calc(var(--ne-cut) + 10px);
	border: 1px solid transparent;
	transform: skewX(var(--ne-lean));
	transition: border-color .45s ease;
	pointer-events: none;
	z-index: 3;
}
.ne-tile:hover::after,
.ne-tile:focus-within::after { border-color: var(--ne-ivory); }

.e-con.ne-tiles__mid { --padding-top: 60px; --padding-bottom: 60px; gap: 14px; text-align: center; }
.ne-tiles__head .elementor-heading-title { line-height: 1.2; }

/* The gold block behind the italic word. An inline box rather than a
   background on the whole line, so it hugs the word at any type size. */
.ne-tiles__head .ne-hl {
	display: inline-block;
	padding: 0 .18em .06em;
	background: var(--ne-brass);
	color: var(--ne-ivory);
	font-style: italic;
}

.ne-tiles__cta { margin-top: 6px; }

@media (max-width: 1024px) {
	.e-con.ne-tile { --ne-cut: 34px; --ne-lean: -6.92deg; min-height: 280px; }
	.ne-tile__title .elementor-heading-title { font-size: 16px; }
	.e-con.ne-tiles__mid { --padding-top: 56px; --padding-bottom: 56px; }
}

@media (max-width: 767px) {
	/* Stacked one to a row, a diagonal cut has nothing to divide, and there is
	   no hover to reveal the sentence, so both are dropped. */
	.e-con.ne-tile-row { flex-wrap: wrap; gap: 10px; }
	.ne-tile-row > .e-con { width: 100%; }
	.e-con.ne-tile { clip-path: none; min-height: 260px; }
	.ne-tile-row > .e-con:first-child .ne-tile,
	.ne-tile-row > .e-con:last-child .ne-tile { clip-path: none; }
	.e-con.ne-tile { --ne-lean: 0deg; }
	.e-con.ne-tile::after { inset: 14px; }
	.e-con.ne-tile__body { padding-inline: 28px; }
	.ne-tile__copy { grid-template-rows: 1fr; opacity: 1; }
	.e-con.ne-tiles__mid { --padding-top: 44px; --padding-bottom: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	/* the reduced-motion case is handled in site.css */
	.ne-tile::before,
	.ne-tile::after,
	.ne-tile__copy { transition: none; }
}

/* --------------------------------------------------- phone pass, 2026-10-16
 *
 * Home 2 was built on desktop in the editor and never set for a phone
 * (Aanand, 2026-10-16). These rules fix it at 767px and below only, keyed to
 * the element ids in Aaron's saved tree, so his tree stays as he left it and
 * the desktop page does not move. If he rebuilds one of these sections the id
 * changes and the matching rule simply stops applying.
 */
@media (max-width: 767px) {
	/* The four questions. The row's global class pads it 60px on every side,
	   which left each card 200px wide and five lines too tall. */
	.elementor .elementor-element-430a010 {
		padding: 32px 16px !important;
		gap: 16px !important;
	}

	/* The N set between the four cards marks the middle of a 2x2 grid. Stacked
	   one to a row there is no middle, and it landed on the card edges. */
	/* An atomic image: it carries data-id, not the elementor-element class. */
	[data-id="7364789"] { display: none !important; }

	/* Two-widget titles: the italic line is pulled up into the line above,
	   which only works while the first line stays on one row. Once it wraps on
	   a phone the two collide, so the second line sits just clear of it. */
	.elementor-element-699743d,
	.elementor-element-8a9227d {
		margin-top: 6px !important;
	}
	.elementor-element-93c8ee5 { margin-top: 12px !important; }

	/* The two Way slides pull their line of copy up 50px into a 40px gap,
	   which only clears a one-line title. "The Traditional Way" wraps on a
	   phone and the copy ran into it; the pull is eased to leave 12px. */
	.elementor-element-a654129,
	.elementor-element-4244da2 { margin-top: -28px !important; margin-bottom: -16px !important; }

	/* Both slides centred on a phone, title, copy and icons alike; "The
	   Traditional Way" was set left while its neighbour was centred. */
	.elementor-element-2cbcd56,
	.elementor-element-d5f004a { align-items: center !important; text-align: center; }
	.elementor-element-2cbcd56 .elementor-heading-title,
	.elementor-element-2cbcd56 .elementor-widget-text-editor,
	.elementor-element-d5f004a .elementor-widget-text-editor { text-align: center !important; }

	/* Education is bigger than academics: six tiles stacked one to a row, with
	   three different gaps between them (10px in a row, 40px between the rows
	   and a 49px margin left on one tile from the desktop offset) and no side
	   margin. One 12px gap throughout and the page's 20px gutter. */
	.elementor-element-66bbf24 {
		padding-left: 20px !important;
		padding-right: 20px !important;
		/* and room under the last tile before the Method band starts */
		padding-bottom: 48px !important;
		gap: 12px !important;
	}
	.elementor-element-6ff87d0,
	.elementor-element-838b337 { gap: 12px !important; }
	.elementor-element-241cb60 { margin: 0 !important; }

	/* One gutter for every section: 20px either side, as the rest of the page
	   has it (measured 2026-10-16). Three sections sat elsewhere. */
	/* The hero added 50px of its own inside the 20px gutter: 70px each side. */
	.elementor-element-6aa60de { padding-left: 0 !important; padding-right: 0 !important; }
	/* Inside it, the copy was boxed to 270px and the button to 198px by their
	   own widget widths, so the copy wrapped short and the button broke onto
	   two lines. Both follow the container instead. */
	.elementor-element-3a5a449 { width: 100% !important; max-width: 100% !important; }
	.elementor-element-a33aaba { width: auto !important; max-width: 100% !important; }
	.elementor-element-a33aaba .elementor-button { white-space: nowrap; }
	/* The copy's hard break after "family:" is a desktop line length; on a
	   phone it strands two words on a line of their own. */
	.elementor-element-3a5a449 br { display: none; }
	/* The same fixed widths further down: the integrated-approach copy, the
	   four question texts and the six tile titles (which stacked one word to a
	   line) all follow their container on a phone. */
	.elementor-element-b2a8550,
	.elementor-element-d8d4a43, .elementor-element-d250d8f,
	.elementor-element-8c48c45, .elementor-element-ff6679f,
	.elementor-element-ef101b4, .elementor-element-a3771cb,
	.elementor-element-7ae38d3, .elementor-element-3a041c6,
	.elementor-element-c688dec, .elementor-element-d39171e {
		width: 100% !important;
		max-width: 100% !important;
	}
	/* The tile titles are held to 16ch for the desktop row of three; stacked
	   one to a row that broke "Build Learning Around Your Life" one word to a
	   line. */
	.ne-tile__title .elementor-heading-title { max-width: none; }
	/* Explore Private Educational Management was boxed to 226px and ran to
	   three lines. */
	.elementor-element-853ca60 { width: auto !important; max-width: 100% !important; }
	/* The four stats two to a row on a phone instead of a tall single column
	   (Aanand, 2026-10-16). */
	.elementor-element-21d7057 {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: center;
		align-items: flex-start !important;
		gap: 32px 12px !important;
		width: 100% !important;
	}
	.elementor-element-21d7057 > .e-con {
		width: calc(50% - 6px) !important;
		max-width: calc(50% - 6px) !important;
		flex: 0 0 calc(50% - 6px) !important;
		/* numbers on one line across the pair even when a label wraps; the
		   first stat carried its own align-self: center */
		align-self: flex-start !important;
		justify-content: flex-start !important;
		align-items: center !important;
		text-align: center;
	}
	/* Education is bigger than academics sat on a 10px gutter. */
	.elementor-element-f2f667c { padding-left: 20px !important; padding-right: 20px !important; }
	/* Families know their children best: the copy was held to a fixed 240px of
	   the 350px column, so it read as a narrow strip. */
	.elementor-element-f429cf4 { width: 100% !important; max-width: 100% !important; }

	/* "Education was never meant to be" ran to both edges of the screen. */
	.elementor-element-1e7a1dd {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* The Traditional / Northward Way: the arrows sit outside the slide, one
	   either side, vertically centred (Aanand, 2026-10-16). The widget gives
	   up 32px each side so the slide never runs under them. */
	.elementor-element-32058ea { padding-left: 32px !important; padding-right: 32px !important; }
	.elementor-element-32058ea > .elementor-widget-container,
	.elementor-element-32058ea .e-n-carousel { position: static; }
	.elementor-element-32058ea .e-n-carousel { overflow: hidden; }
	.elementor-element-32058ea { position: relative; }
	.elementor-element-32058ea .elementor-swiper-button {
		display: flex !important;
		top: 50% !important;
		bottom: auto !important;
		transform: translateY(-50%) !important;
		font-size: 26px !important;
		width: 26px;
	}
	.elementor-element-32058ea .elementor-swiper-button svg { width: 26px; height: 26px; }
	.elementor-element-32058ea .elementor-swiper-button-prev { left: 0 !important; right: auto !important; }
	.elementor-element-32058ea .elementor-swiper-button-next { right: 0 !important; left: auto !important; }

	/* Inside each slide, two more 20px paddings left the four-icon grid 206px
	   of a 390px screen, 79px an icon: the labels broke a word to a line and
	   the two columns sat at different heights. On a phone the slide padding
	   goes, the grid takes two equal top-aligned columns with the divider
	   full height, and the labels track a little tighter. Both slides. */
	.elementor-element-32058ea .swiper-slide > .e-con { padding-left: 0 !important; padding-right: 0 !important; }
	.elementor-element-2cbcd56,
	.elementor-element-d5f004a { padding: 40px 0 28px !important; gap: 28px !important; }
	.elementor-element-32058ea .e-con:has(> .e-con > .elementor-widget-icon-box) {
		width: 100% !important;
		align-items: stretch !important;
		row-gap: 24px !important;
	}
	.elementor-element-32058ea .e-con:has(> .elementor-widget-icon-box) {
		width: 50% !important;
		max-width: 50% !important;
		flex: 0 0 50% !important;
		justify-content: flex-start !important;
		align-items: center !important;
		padding: 0 10px !important;
	}
	.elementor-element-32058ea .elementor-widget-icon-box { width: 100% !important; }
	.elementor-element-32058ea .elementor-icon-box-title,
	.elementor-element-32058ea .elementor-icon-box-title a {
		letter-spacing: .04em !important;
		line-height: 1.35 !important;
	}

	/* Closing band: its content box was 386px wide inside a 390px screen and
	   started 9px in, so the copy was cut at the right edge. */
	.elementor-element-df76679 {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.elementor-element-fc81560,
	.elementor-element-fc81560 > .elementor-widget {
		width: 100% !important;
		max-width: 100% !important;
	}
}