/*
 * Nobility Framework Page
 * Everything is scoped under .nf so it cannot leak into the Lekker theme.
 * Re-theme by overriding the variables below (Customizer > Additional CSS).
 */

.nf {
	--nf-pink: #fdcac8;
	--nf-pink-2: #fddad8;
	--nf-salmon: #f4857c;
	--nf-salmon-dark: #e2645c;
	--nf-red: #e2312d;
	--nf-red-dark: #b71f22;
	--nf-ink: #1d1b1b;
	--nf-cream: #faf6f0;
	--nf-cream-2: #fdfaf6;
	--nf-muted: #6f6a66;
	--nf-line: rgba(29, 27, 27, .14);
	--nf-max: 1300px;
	--nf-gutter: clamp(20px, 5.6vw, 70px);
	--nf-indent: 60px;
	/* Space between the viewport edge and the centred content box (0 below --nf-max). */
	--nf-side: max(0px, calc((100% - var(--nf-max)) / 2));
	--nf-header-offset: 0px; /* raise if the theme header overlaps the hero */
	--nf-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--nf-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;

	font-family: var(--nf-font);
	font-size: 15px;
	line-height: 1.6;
	color: var(--nf-ink);
	background: var(--nf-cream);
	-webkit-font-smoothing: antialiased;
	text-align: left;
}

.nf *,
.nf *::before,
.nf *::after { box-sizing: border-box; }

.nf h1, .nf h2, .nf h3,
.nf p, .nf blockquote, .nf cite,
.nf ul, .nf ol, .nf figure { margin: 0; padding: 0; }
.nf h1, .nf h2, .nf h3 {
	font-family: var(--nf-font);
	font-weight: 700;
	text-transform: none;
	color: var(--nf-ink);
}
.nf ul, .nf ol { list-style: none; }
.nf svg { display: block; }
.nf a { text-decoration: none; }
.nf cite { font-style: normal; }
.nf blockquote { border: 0; background: none; quotes: none; }
.nf blockquote::before, .nf blockquote::after { content: none; }

/* Break out of a boxed theme container (shortcode use). */
.nf--bleed {
	width: 100vw;
	position: relative;
	left: 50%;
	margin-left: -50vw;
}
body:has(.nf--bleed) { overflow-x: clip; }

.nf-container {
	position: relative;
	width: 100%;
	max-width: var(--nf-max);
	margin: 0 auto;
	padding-inline: var(--nf-gutter);
}

/* Section number, sits in the left gutter. */
.nf-num {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--nf-muted);
	margin-bottom: 14px;
}

.nf .nf-h2 {
	font-size: clamp(30px, 3.4vw, 40px);
	line-height: 1.08;
	letter-spacing: -.035em;
}

.nf-eyebrow {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.2;
	padding-left: 14px;
	border-left: 1px solid var(--nf-ink);
}

/* Buttons + links ------------------------------------------------------- */
.nf .nf-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 17px 26px;
	background: var(--nf-ink);
	color: #fff;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1;
	border-radius: 2px;
	transition: background .25s ease, transform .25s ease;
}
.nf .nf-btn:hover { background: var(--nf-red); color: #fff; }
.nf .nf-btn .nf-arrow { transition: transform .25s ease; }
.nf .nf-btn:hover .nf-arrow,
.nf .nf-link:hover .nf-arrow,
.nf .nf-cta__links a:hover .nf-arrow { transform: translateX(4px); }
.nf .nf-arrow { flex: none; transition: transform .25s ease; }

.nf .nf-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 500;
	color: var(--nf-ink);
}
.nf .nf-link:hover { color: var(--nf-red); }

/* 01 Hero ---------------------------------------------------------------- */
.nf-hero {
	position: relative;
	overflow: hidden;
	background: var(--nf-pink);
	min-height: 604px;
	padding: calc(var(--nf-header-offset) + 110px) 0 90px;
	display: flex;
	align-items: center;
}
.nf-hero__art {
	position: absolute;
	right: calc(var(--nf-side) + clamp(0px, 15vw, 230px));
	bottom: 0;
	height: 100%;
	width: min(52vw, 620px);
	pointer-events: none;
}
.nf-hero__art svg { width: 100%; height: 100%; }
.nf-hero__inner { position: static; }
.nf-hero__copy { position: relative; z-index: 2; max-width: 500px; }
.nf-hero .nf-eyebrow { margin-bottom: 24px; }
.nf .nf-hero__title {
	font-size: clamp(42px, 5.1vw, 64px);
	line-height: 1;
	letter-spacing: -.04em;
	margin-bottom: 22px;
}
.nf .nf-hero__subtitle {
	font-size: clamp(17px, 1.8vw, 22px);
	line-height: 1.32;
	letter-spacing: -.01em;
	color: #2a2626;
	margin-bottom: 30px;
}
.nf .nf-scroll {
	position: absolute;
	left: calc(var(--nf-side) + var(--nf-gutter));
	bottom: 34px;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	gap: 12px;
	font-size: 10.5px;
	color: var(--nf-ink);
}
.nf-scroll__line {
	width: 1px;
	height: 26px;
	background: var(--nf-ink);
	position: relative;
	animation: nf-scroll 2.2s ease-in-out infinite;
	transform-origin: top;
}
.nf-scroll__line::after {
	content: "";
	position: absolute;
	left: -3px;
	bottom: 0;
	width: 6px;
	height: 6px;
	border-right: 1px solid var(--nf-ink);
	border-bottom: 1px solid var(--nf-ink);
	transform: rotate(45deg) translate(-1px, -1px);
}
@keyframes nf-scroll {
	0%, 100% { transform: scaleY(1); }
	50% { transform: scaleY(.6); }
}
.nf-hero__tags {
	position: absolute;
	right: calc(var(--nf-side) + var(--nf-gutter));
	bottom: 72px;
	z-index: 2;
	text-align: left;
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--nf-ink);
}

/* 02 Intro --------------------------------------------------------------- */
.nf-intro {
	display: grid;
	grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
	background: var(--nf-cream);
	min-height: 492px;
	overflow: hidden;
	padding-inline: var(--nf-side);
}
.nf-intro__nav {
	background: var(--nf-cream-2);
	position: relative;
	padding: 44px 0;
}
/* keeps the sidebar tint running to the screen edge */
.nf-intro__nav::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	width: 100vw;
	background: var(--nf-cream-2);
}
.nf-intro__nav li { position: relative; }
.nf-intro__nav li a {
	position: relative;
	display: block;
	padding: 14px 28px 14px var(--nf-gutter);
	font-size: 10.5px;
	line-height: 1.3;
	color: var(--nf-ink);
	transition: color .2s ease;
}
.nf-intro__nav li a:hover { color: var(--nf-red); }
.nf-intro__num { display: block; font-weight: 500; color: var(--nf-muted); margin-bottom: 4px; }
.nf-intro__label { display: block; font-weight: 600; font-size: 10.5px; }
.nf-intro__nav li.is-active a { color: var(--nf-red); }
.nf-intro__nav li.is-active .nf-intro__num { color: var(--nf-red); font-weight: 700; }
.nf-intro__nav li.is-active a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 4px;
	background: var(--nf-red);
}
.nf-intro__nav li.is-active { background: var(--nf-cream); }
.nf-intro__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
	gap: clamp(40px, 8vw, 110px);
	align-items: center;
	padding: 56px var(--nf-gutter) 56px clamp(24px, 3vw, 46px);
}
.nf-intro .nf-num { margin-bottom: 8px; }
.nf-intro .nf-h2 { margin-bottom: 26px; }
.nf-intro__main p {
	font-size: 13.5px;
	line-height: 1.75;
	color: #3a3535;
	max-width: 520px;
}
.nf-intro__main p + p { margin-top: 18px; }
.nf-rule {
	display: block;
	width: 30px;
	height: 2px;
	background: var(--nf-red);
	opacity: .7;
	margin-bottom: 28px;
}
.nf .nf-intro__aside blockquote {
	font-family: var(--nf-serif);
	font-style: italic;
	font-size: clamp(18px, 1.7vw, 21px);
	line-height: 1.6;
	color: #37322f;
	padding: 0;
}
.nf-intro__aside cite {
	display: block;
	margin-top: 42px;
	font-size: 11px;
	color: var(--nf-muted);
}

/* 03 Quote band ---------------------------------------------------------- */
.nf-quote {
	position: relative;
	overflow: hidden;
	background: var(--nf-red);
	color: #fff;
	min-height: 388px;
	display: flex;
	align-items: center;
	padding: 60px 0;
}
.nf-quote__inner { position: relative; z-index: 2; }
.nf-quote .nf-num { color: rgba(255, 255, 255, .85); margin: 0 0 20px calc(-1 * var(--nf-indent)); }
.nf-quote__copy { max-width: 590px; margin-left: var(--nf-indent); position: relative; }
.nf .nf-quote blockquote {
	font-size: clamp(28px, 3.5vw, 46px);
	line-height: 1.12;
	font-weight: 600;
	letter-spacing: -.03em;
	color: #fff;
}
.nf-quote cite {
	display: inline-block;
	margin-top: 34px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, .7);
	font-size: 10.5px;
	color: #fff;
}
.nf-quote__art {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 100%;
	width: min(44vw, 560px);
	pointer-events: none;
}
.nf-quote__art svg { width: 100%; height: 100%; }

/* 04 Principles ---------------------------------------------------------- */
.nf-principles { background: var(--nf-cream); padding: 42px 0 64px; }
.nf-principles .nf-num { position: absolute; left: var(--nf-gutter); top: 0; }
.nf-principles__head { text-align: center; margin-bottom: 46px; padding-top: 4px; }
.nf-principles__head p { margin-top: 10px; font-size: 13px; color: #3a3535; }
.nf-principles__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 36px;
}
.nf-principle { text-align: center; }
.nf-principle__icon {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--nf-pink);
}
.nf .nf-principle h3 { font-size: 15px; letter-spacing: -.01em; margin-bottom: 10px; }
.nf-principle p {
	font-size: 12.5px;
	line-height: 1.7;
	color: #4a4541;
	max-width: 230px;
	margin: 0 auto;
}

/* Hairline that opens the two lower content sections */
.nf-future .nf-container::before,
.nf-related .nf-container::before {
	content: "";
	display: block;
	height: 1px;
	background: var(--nf-line);
	margin-bottom: 44px;
}

/* 05 Future -------------------------------------------------------------- */
.nf-future { background: var(--nf-cream); padding-bottom: 44px; }
.nf-future .nf-num,
.nf-related .nf-num { position: absolute; left: var(--nf-gutter); top: 30px; }
.nf-future__grid {
	display: grid;
	grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
	gap: clamp(30px, 5vw, 62px);
	align-items: center;
	margin-left: var(--nf-indent);
}
.nf-future__art { aspect-ratio: 470 / 300; overflow: hidden; }
.nf-future__art svg { width: 100%; height: 100%; }
.nf-future .nf-h2 { font-size: clamp(26px, 2.7vw, 34px); margin-bottom: 20px; }
.nf-future__copy p {
	font-size: 13px;
	line-height: 1.75;
	color: #3a3535;
	margin-bottom: 26px;
	max-width: 500px;
}

/* 06 Related ------------------------------------------------------------- */
.nf-related { background: var(--nf-cream); padding-bottom: 60px; }
.nf-related__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 30px var(--nf-indent);
}
.nf-related .nf-h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.03em; }
.nf-related__head p { margin-top: 8px; font-size: 12.5px; color: #3a3535; }
.nf-related__arrows { display: flex; gap: 12px; flex: none; }
.nf .nf-circle-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--nf-pink);
	color: var(--nf-ink);
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}
.nf .nf-circle-btn:hover { background: var(--nf-red); color: #fff; }
.nf-related__track {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.nf-related__track::-webkit-scrollbar { display: none; }
.nf-card {
	flex: 0 0 calc((100% - 44px) / 3);
	scroll-snap-align: start;
	min-width: 0;
}
.nf-card__media {
	display: block;
	aspect-ratio: 356 / 132;
	overflow: hidden;
	background: var(--nf-pink);
	margin-bottom: 16px;
}
.nf-card__media svg,
.nf-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.nf-card:hover .nf-card__media svg,
.nf-card:hover .nf-card__media img { transform: scale(1.04); }
.nf .nf-card h3 { font-size: 15px; line-height: 1.3; letter-spacing: -.015em; margin-bottom: 10px; }
.nf .nf-card h3 a { color: inherit; }
.nf .nf-card h3 a:hover { color: var(--nf-red); }
.nf-card p {
	font-size: 12px;
	line-height: 1.7;
	color: #4a4541;
	margin-bottom: 14px;
}

/* 07 CTA ----------------------------------------------------------------- */
.nf-cta { background: var(--nf-pink); padding: 46px 0; }
.nf-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px 48px;
	flex-wrap: wrap;
}
.nf-cta__eyebrow {
	display: block;
	font-size: 10.5px;
	line-height: 1.2;
	padding-left: 8px;
	border-left: 1px solid var(--nf-ink);
	margin-bottom: 8px;
	width: max-content;
}
.nf .nf-cta h2 { font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -.035em; line-height: 1.1; }
.nf-cta__copy p { margin-top: 10px; font-size: 12.5px; color: #2a2626; }
.nf-cta__links { display: flex; flex-wrap: wrap; }
.nf .nf-cta__links a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 32px 14px 22px;
	margin-left: 16px;
	border-left: 1px solid rgba(29, 27, 27, .55);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1;
	color: var(--nf-ink);
	transition: color .2s ease;
}
.nf .nf-cta__links a:hover { color: var(--nf-red); }
.nf-cta__links li:last-child a { padding-right: 0; }

/* Scroll reveal (only when JS is present) -------------------------------- */
.nf-js .nf-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: var(--nf-delay, 0s);
}
.nf-js .nf-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.nf-js .nf-reveal { opacity: 1; transform: none; transition: none; }
	.nf-scroll__line { animation: none; }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1024px) {
	.nf { --nf-indent: 0px; }
	.nf-num,
	.nf-quote .nf-num,
	.nf-principles .nf-num,
	.nf-future .nf-num,
	.nf-related .nf-num { position: static; }
	.nf-quote .nf-num { margin-bottom: 14px; }
	.nf-future .nf-container::before,
	.nf-related .nf-container::before { margin-bottom: 26px; }
	.nf-principles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
	.nf-principles__head { text-align: left; }
	.nf-future__grid { grid-template-columns: 1fr; }
	.nf-intro { grid-template-columns: 1fr; padding-inline: 0; }
	.nf-intro__nav::before { display: none; }
	.nf-intro__nav { padding: 16px 0; border-bottom: 1px solid var(--nf-line); }
	.nf-intro__nav ol { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 var(--nf-gutter); }
	.nf-intro__nav li a { padding: 10px 18px 10px 0; white-space: nowrap; }
	.nf-intro__nav li.is-active a::before { top: auto; left: 0; right: 18px; bottom: -4px; width: auto; height: 2px; }
	.nf-intro__nav li.is-active { background: none; }
	.nf-intro__body { grid-template-columns: 1fr; padding: 44px var(--nf-gutter); }
	.nf-card { flex-basis: calc((100% - 22px) / 2); }
}

@media (max-width: 767px) {
	.nf-hero { min-height: 0; padding: calc(var(--nf-header-offset) + 64px) 0 0; display: flex; flex-direction: column; align-items: stretch; }
	.nf-hero__inner { order: 1; }
	.nf-hero__copy { padding-bottom: 36px; }
	.nf-hero__art { order: 2; position: relative; right: auto; width: 86%; height: auto; margin-left: auto; aspect-ratio: 520 / 620; }
	.nf-hero__tags,
	.nf .nf-scroll { display: none; }
	.nf-quote { padding: 56px 0 0; display: block; }
	.nf-quote__copy { padding-bottom: 40px; }
	.nf-quote__art { position: relative; width: 100%; height: 240px; }
	.nf-principles__grid { grid-template-columns: 1fr; }
	.nf-related__head { align-items: flex-end; }
	.nf-card { flex-basis: 82%; }
	.nf-cta__inner { align-items: flex-start; flex-direction: column; }
	.nf-cta__links { flex-direction: column; width: 100%; }
	.nf .nf-cta__links a { margin-left: 0; padding: 14px 0 14px 18px; }
}