/*
 * Home page refinements (Figma 405:6281). Loaded after site.css on the home
 * page only. Desktop-only geometry sits in min-width queries so the shared
 * tablet and phone rules in site.css still apply below 1025px.
 */

/* ------------------------------------------ northward begins with the child */

/* The ghost button is sentence case (Figma 405:6956); the kit's button
   typography otherwise wins on specificity. */
.ne-page-home .elementor-widget.ne-btn--sentence .elementor-button {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 500 !important;
}

/* A 541 x 670 portrait, with the walnut card 42px past its right edge and
   10px below it (Figma 405:6958, 405:6960). */
.ne-begins .ne-solution__shot img {
	height: 670px;
	object-position: 62% 50%;
}

.ne-begins .ne-solution__title .elementor-heading-title { font-weight: 400 !important; }

@media (min-width: 1025px) {
	.ne-begins .ne-solution {
		max-width: 583px;
		margin-left: auto;
		padding-right: 42px !important;
	}

	.ne-begins .ne-solution__card {
		right: 0;
		bottom: -10px;
		width: 300px;
		max-width: 300px;
	}
}

@media (max-width: 1024px) {
	.ne-begins .ne-solution__shot img { height: 560px; }
}

@media (max-width: 767px) {
	.ne-begins .ne-solution__shot img { height: 440px; }
}

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

/* Cards lift off the band (Figma 405:6832). */
.ne-possibility { box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }

.ne-possibility .elementor-widget-text-editor { font-weight: 300; }

/* Photographs are 237 tall in the first row, 263 in the second, with the
   small radius the cards use (Figma 405:6823, 405:6854). */
.ne-possibility__media .ne-shot img { border-radius: 0; height: 250px; }

@media (min-width: 1025px) {
	.ne-possibility__grid > .e-con:nth-child(-n+3) .ne-possibility__media .ne-shot img { height: 237px; }
	.ne-possibility__grid > .e-con:nth-child(n+4) .ne-possibility__media .ne-shot img { height: 263px; }
}

/* The label hugs its text: #F5F5F5, radius 5, no shadow, a ringed brass dot
   (Figma 405:6825). */
.ne-possibilities .elementor-widget.ne-possibility__pill {
	left: 10px;
	right: auto;
	bottom: 16px;
	width: auto;
	max-width: calc(100% - 20px);
	background: #F5F5F5;
	border-radius: 0;
	box-shadow: none;
	padding: 7px 12px 7px 6px;
}

.ne-possibilities .elementor-widget.ne-possibility__pill .elementor-icon-box-wrapper { gap: 6px; }

.ne-possibilities .elementor-widget.ne-possibility__pill .elementor-icon svg {
	width: 12px;
	height: 12px;
	box-sizing: content-box;
	padding: 2.5px;
	border-radius: 50%;
	background: rgba(197, 155, 88, .32);
}

.ne-possibilities .elementor-widget.ne-possibility__pill .elementor-icon i {
	font-size: 12px;
	padding: 2.5px;
	border-radius: 50%;
	background: rgba(197, 155, 88, .32);
}

.ne-possibilities .elementor-widget.ne-possibility__pill .elementor-icon-box-title { color: #000000; }

/* -------------------------------------------------------- trusted partner */

.ne-trusted__collage .ne-shot img { border-radius: 0; }

/* Columns 275 wide, the left one 62px lower; heights from Figma 405:6374. */
@media (min-width: 1025px) {
	.ne-trusted__collage .ne-collage__col--low { padding-top: 62px; }
	.ne-trusted__collage .ne-collage__col--low  .ne-shot:nth-of-type(1) img { height: 382px; }
	.ne-trusted__collage .ne-collage__col--low  .ne-shot:nth-of-type(2) img { height: 166px; }
	.ne-trusted__collage .ne-collage__col--high .ne-shot:nth-of-type(1) img { height: 348px; }
	.ne-trusted__collage .ne-collage__col--high .ne-shot:nth-of-type(2) img { height: 323px; }
}

/* ------------------------------------------------------ the northward method */

/* Title in Amiri bold with the rule running on to the right (Figma 405:6420). */
.ne-method .ne-stack-head--ruled .elementor-heading-title { font-weight: 700 !important; }
.ne-band-dark.ne-method .ne-stack-head--ruled > .elementor-widget-heading:has(h2)::after { background: rgba(216, 208, 196, .2); }

/* The rail: brass at 30% from the first marker, ending in a 12 x 18 brass
   arrowhead (Figma 405:6461, 405:6462). */
.ne-method .ne-phases { margin-top: 0; }

.ne-method .ne-phases::before {
	left: 24px;
	right: 60px;
	width: auto;
	top: 11.5px;
	background: rgba(206, 128, 41, .3);
}

.ne-method .ne-phases::after {
	content: "";
	position: absolute;
	right: 0;
	top: 3px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 12px;
	border-color: transparent transparent transparent var(--ne-brass);
}

/* Markers: a 24px ring, 2px brass, around an 8px brass dot (Figma 405:6425). */
.ne-method .ne-phase { padding-top: 50px; }

.ne-method .ne-phase::before {
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	border: 2px solid var(--ne-brass);
	z-index: 1;
}

.ne-method .ne-phase::after {
	left: 8px;
	top: 8px;
	width: 8px;
	height: 8px;
	z-index: 2;
}

@media (min-width: 1025px) {
	.elementor.elementor .ne-method .ne-phase > .elementor-widget-text-editor { max-width: 225px; }
}

@media (max-width: 767px) {
	.ne-method .ne-phases::after { display: none; }
}

/* ------------------------------------------------------------ who we serve */

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

/* The brand's lattice sits on the band behind the content, two blocks running
   off its edges, which is the job the dot grids used to do. A pattern tiled
   across the whole band reads as wallpaper; held to the margins it reads as
   ornament, which is what it is for. */
.elementor.elementor .e-con .elementor-widget.ne-serve__pattern {
	position: absolute;
	margin: 0;
	max-width: none;
	pointer-events: none;
	opacity: .55;
	z-index: 0;
}

.ne-serve__pattern img { display: block; width: 100%; height: auto; }

.elementor.elementor .e-con .elementor-widget.ne-serve__pattern--left  { width: 360px; left: -150px; top: 150px; }
.elementor.elementor .e-con .elementor-widget.ne-serve__pattern--right { width: 430px; right: -170px; bottom: -60px; top: auto; }

.ne-serve .ne-stack-head,
.ne-serve .ne-serve__text,
.ne-serve .ne-serve__media { position: relative; z-index: 1; }

/* The text card is as tall as the photograph beside it, copy centred. */
.ne-serve__text > .ne-serve__card { flex: 1 1 auto; padding-inline: 53px; }

/* A near-square photograph (563 x 575) with an #E0D3C5 block behind it, 47px
   in from its left, 10px down, and 14px past its right edge (Figma 405:6572). */
.ne-serve__media { padding-right: 14px !important; }

.elementor-widget-image.ne-serve__shot { position: relative; }

.elementor-widget-image.ne-serve__shot::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 47px;
	right: -14px;
	bottom: -10px;
	background: #E0D3C5;
	border-radius: 0;
	z-index: 0;
}

.ne-serve__shot img {
	position: relative;
	z-index: 1;
	aspect-ratio: 563 / 575;
	height: auto;
}

@media (max-width: 1024px) {
	/* Stacked, the left grid would sit under the card's corner. */
	.elementor.elementor .e-con .elementor-widget.ne-serve__pattern--left { display: none; }
	.elementor.elementor .e-con .elementor-widget.ne-serve__pattern--right { width: 260px; right: -110px; top: auto; bottom: -50px; }
	.ne-serve__text > .ne-serve__card { padding-inline: 40px; }
	.ne-serve__shot img { aspect-ratio: auto; height: 520px; }
}

@media (max-width: 767px) {
	.elementor.elementor .e-con .elementor-widget.ne-serve__pattern { display: none; }
	.ne-serve__text > .ne-serve__card { padding-inline: 24px; }
	.ne-serve__shot img { aspect-ratio: 563 / 575; height: auto; }
}

/* Core Beliefs sits directly on the forest footer while the Journal row is
   hidden (NE_JOURNAL_LIVE), so the two bands' padding doubled up. */



/* --------------------------------------------------------------- our service */

/*
 * Rachel's redesign of the Services block (Northward Website Review, frame
 * 14:1401): one service, the copy on the left, the photograph on the right
 * inside a brass outline that sits up and to the left of it.
 */

.ne-service-lede p {
	position: relative;
	margin: 0;
	padding-left: 18px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
}

.ne-service-lede p::before {
	content: "";
	position: absolute;
	left: 0;
	top: -8px;
	bottom: -8px;
	width: 4px;
	border-radius: 0;
	background: var(--ne-brass);
}

.ne-service-shot {
	position: relative;
	align-self: stretch;
}

.ne-service-shot .ne-service-shot__img img {
	width: 100%;
	height: 668px;
	object-fit: cover;
	display: block;
	position: relative;
	z-index: 1;
}

/* The outline, 46px left and 33px above the photograph, as in the design. */
.ne-service-shot::before {
	content: "";
	position: absolute;
	left: -46px;
	top: -33px;
	right: 46px;
	bottom: -17px;
	border: 1px solid var(--ne-brass);
	border-radius: 0;
	pointer-events: none;
}

@media (max-width: 1024px) {
	.ne-service-shot .ne-service-shot__img img { height: 520px; }
	.ne-service-shot::before { left: -24px; top: -20px; right: 24px; bottom: -12px; }
}

@media (max-width: 767px) {
	.ne-service-shot { margin-left: 24px; }
	.ne-service-shot .ne-service-shot__img img { height: 400px; }
	.ne-service-shot::before { left: -18px; top: -14px; right: 18px; bottom: -10px; }
}

/* -------------------------------------------------------- a paradigm shift */

/* "Move this up a bit. Too much spacing between this section and the title."
   (Rachel, review file): 56px between the title and the quote becomes 24. */
.ne-paradigm-band .ne-ruled-quote { margin-top: -32px; }