/*
 * About Us (Figma "About us-people", node 405:8497).
 * Loaded after site.css on this page only.
 */

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

/* Figma 405:8566: 1161x613 at r24, so the photograph keeps that proportion
   across the 1200 column instead of a fixed 560px strip. */
.ne-about-intro .ne-wide-shot img {
	height: auto;
	aspect-ratio: 1161 / 613;
	border-radius: 0;
}

/* ------------------------------------------------------------ difference */

/* Figma 405:8570: the photograph is 516x670. */
.ne-about-difference .ne-about-diff__shot img { height: 670px; }

.e-con.ne-about-diff__media { position: relative; }

/* Figma 405:8572: a walnut badge, 300x152, r24, 32px in, over the photograph's
   bottom right corner and 42px past its right edge, 10px below it. */
.e-con.ne-about-badge {
	position: absolute;
	right: -42px;
	bottom: -10px;
	width: 300px;
	min-height: 152px;
	justify-content: center;
	--padding-top: 32px;
	--padding-right: 32px;
	--padding-bottom: 32px;
	--padding-left: 32px;
	z-index: 1;
}

/* Figma 405:8573: Amiri 12/700 tracked caps on a 19.2px line, unlike the
   Outfit eyebrows elsewhere. Flex drops the inline strut that made it 26 tall. */
.elementor .ne-about-badge .ne-eyebrow .elementor-heading-title {
	display: flex;
	line-height: 19.2px;
	font-family: var(--ne-font-heading) !important;
	font-weight: 700 !important;
	letter-spacing: 1.2px !important;
}

/* "THE NORTHWARD DIFFERENCE" is regular weight in Figma (405:8575). */
.elementor .ne-about-badge__title .elementor-heading-title {
	color: var(--ne-ivory);
	font-weight: 400 !important;
	line-height: 28px;
}

/* Figma sets the copy at 516 wide. */
.elementor.elementor .e-con > .elementor-widget.ne-about-diff__copy { max-width: 516px; }
.elementor.elementor .e-con.ne-about-diff__body > .elementor-widget-heading:has(h2) { max-width: 516px; }

/* Figma 405:8580/8582: lead copy at 80% opacity. */
.ne-about-diff__copy { opacity: .8; }

/* Figma 405:8584: an outline pill, 1px brass, ivory Outfit 14/500, 48 tall,
   no arrow. */
.elementor .ne-about-diff__btn .elementor-button {
	/* The kit button style sets tracked caps at 700 per element, so these need !important. */
	text-transform: none !important;
	font-weight: 500 !important;
	letter-spacing: .28px !important;
	line-height: 22.4px !important;
	padding: 12px 28px;
	border: 1px solid var(--ne-brass);
	border-radius: 0;
	color: var(--ne-ivory);
}

.elementor-widget.ne-about-diff__btn { margin-top: 8px; }

/* ------------------------------------------------------------------ team */

/* Figma 405:8602-8610: name at h2, role at lead 500, bio at lead 300. */
.elementor .ne-founder__role .elementor-heading-title {
	font-weight: 500 !important;
}

.elementor .ne-founder__bio,
.elementor .ne-founder__bio p {
	font-weight: 300;
}

/* ---------------------------------------------------------------- beliefs */

/* Figma 405:8589: the accent word is Amiri Bold Italic. Colour stays Brass 700
   from site.css for contrast on the light band. */
.ne-beliefs-band .ne-accent { font-weight: 700; }
.ne-beliefs-band .elementor-headline-dynamic-text { font-weight: 700; }

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

/* Figma 405:8502 breaks the heading over two lines (846 wide at 56px). */
.elementor.elementor .e-con.ne-cta > .elementor-widget-heading { max-width: 760px; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.e-con.ne-about-diff__media,
	.e-con.ne-about-diff__body { width: 100%; }

	.ne-about-difference .ne-about-diff__shot img { height: 480px; }

	/* Stacked, the badge stays over the corner but inside the column. */
	.e-con.ne-about-badge { right: 16px; bottom: 16px; }
}

@media (max-width: 767px) {
	.ne-about-intro .ne-wide-shot img { aspect-ratio: 4 / 3; }

	.ne-about-difference .ne-about-diff__shot img { height: 380px; }

	/* On a phone the badge sits under the photograph instead of over it. */
	.e-con.ne-about-badge {
		position: static;
		width: 100%;
		min-height: 0;
		--padding-top: 24px;
		--padding-right: 24px;
		--padding-bottom: 24px;
		--padding-left: 24px;
	}
}

/* ------------------------------------------------------------ Katy + portrait */

/* Figma 405:8600/8602: a 680x720 portrait on the right, the card (654 wide)
   over its left edge, centred on it. Scaled to the 1200 column. */
.e-con.ne-founder-wrap {
	position: relative;
	min-height: 720px;
	justify-content: center;
	align-items: flex-end;
}

.elementor-widget.ne-founder__portrait { width: 56.7%; }
.ne-founder__portrait img { height: 720px; object-fit: cover; object-position: center 20%; border-radius: 0; }

.ne-founder-wrap > .e-con.ne-founder {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 54.5%;
	z-index: 1;
}

@media (max-width: 1024px) {
	.e-con.ne-founder-wrap { min-height: 0; align-items: stretch; }
	.elementor-widget.ne-founder__portrait { width: 100%; }
	.ne-founder__portrait img { height: 560px; }
	.ne-founder-wrap > .e-con.ne-founder {
		position: relative;
		top: auto;
		transform: none;
		width: calc(100% - 48px);
		margin: -96px auto 0;
	}
}

@media (max-width: 767px) {
	.ne-founder__portrait img { height: 420px; }
	.ne-founder-wrap > .e-con.ne-founder { width: calc(100% - 24px); margin-top: -48px; }
}

/* --------------------------------------------------------------- team cards */

/* Figma 405:8614: no card surface; a 381x395 photo (r24), then name, role and
   bio centred, then three 24px social icons 14px apart. */
.ne-team__photo { width: 100%; }
.ne-team__photo img { width: 100%; height: auto; aspect-ratio: 381 / 395; object-fit: cover; object-position: center 25%; border-radius: 0; }

.e-con.ne-team__content { width: 100%; }

.elementor .ne-team__name .elementor-heading-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	color: #000000;
	letter-spacing: 0;
}

.elementor .ne-team__role .elementor-heading-title {
	font-family: var(--ne-font-body);
	font-size: var(--ne-fs-lead);
	font-weight: 400;
	line-height: 1.5;
	color: #000000;
	letter-spacing: 0;
}

.elementor .elementor-widget.ne-team__bio,
.elementor .elementor-widget.ne-team__bio p {
	font-size: var(--ne-fs-body);
	line-height: 1.5;
	color: #000000;
	text-align: center;
}

.elementor-widget-icon-list.ne-team__social .elementor-icon-list-items {
	display: flex;
	justify-content: center;
	gap: 14px;
}
.elementor-widget-icon-list.ne-team__social .elementor-icon-list-item { margin: 0 !important; padding: 0; }
.elementor-widget-icon-list.ne-team__social .elementor-icon-list-item::after { display: none; }
.elementor-widget-icon-list.ne-team__social .elementor-icon-list-icon { margin: 0; padding: 0; }
.elementor-widget-icon-list.ne-team__social .elementor-icon-list-icon svg { width: 24px !important; height: 24px !important; }
.elementor-widget-icon-list.ne-team__social .elementor-icon-list-text { display: none; }
.elementor-widget-icon-list.ne-team__social a:hover svg { opacity: .6; }