/*
 * Nutritional Journeys 2.0: the cutout design.
 *
 * Loaded after theme.css (front end and editor). Same rule as theme.css:
 * every colour, font and radius comes from a theme.json preset, so the
 * Site Editor's colour and font choices carry through. Tints are mixed
 * from presets with color-mix().
 */

/* ---- Page ground and type ------------------------------------------ */

body {
	overflow-x: clip;
}

:where(h1, h2, h3, .is-style-thesis) em {
	font-style: italic;
	font-weight: 300;
	color: var(--wp--preset--color--primary);
}

.is-style-section-deep :where(h1, h2, h3, p) em {
	color: var(--wp--preset--color--mint);
}

/* Display word: a giant italic word inside a heading (editor: More → Display word). */
.nj-display {
	display: block;
	font-size: 2.3em;
	font-style: italic;
	font-weight: 300;
	line-height: 0.8;
	letter-spacing: -0.045em;
	/* Room for descenders (g, y, j): the gradient text is painted only inside
	   the box. The negative margin keeps the spacing below unchanged. */
	padding-bottom: 0.28em;
	margin-bottom: -0.2em;
	background: linear-gradient(180deg, var(--wp--preset--color--primary-deep) 30%, var(--wp--preset--color--primary) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.is-style-section-deep .nj-display {
	background-image: linear-gradient(180deg, var(--wp--preset--color--cream-deep) 25%, var(--wp--preset--color--mint) 100%);
}

.nj-page-title .nj-display,
.nj-cta__title .nj-display {
	font-size: 1.55em;
	line-height: 0.9;
}

/* Section titles all take the H2 size (theme.json, Styles → Typography → Headings). */

.nj-kicker {
	font-family: var(--wp--preset--font-family--newsreader);
	font-style: italic;
	font-size: 1.35rem;
	color: var(--wp--preset--color--ink);
}

/* Centred headings: labels centre with them. */
.has-text-align-center > .is-style-eyebrow {
	justify-content: center;
}

.has-text-align-center > .is-style-pill {
	margin-inline: auto;
}

/* ---- Sections -------------------------------------------------------- */

.nj-section {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
	padding-top: clamp(5rem, 9vw, 9rem);
	padding-bottom: clamp(5rem, 9vw, 9rem);
}

/* Inset panels: rounded, with a sliver of page ground around them. */
.has-global-padding > .alignfull.nj-panel,
.wp-site-blocks > .alignfull.nj-panel,
.nj-panel {
	margin-left: calc(var(--wp--style--root--padding-left) * -1 + var(--wp--custom--inset));
	margin-right: calc(var(--wp--style--root--padding-right) * -1 + var(--wp--custom--inset));
	border-radius: var(--wp--custom--radius--panel);
	overflow: clip;
}

main > .alignfull.nj-panel + .alignfull,
.wp-block-post-content > .alignfull.nj-panel + .alignfull,
main > .alignfull + .alignfull.nj-panel,
.wp-block-post-content > .alignfull + .alignfull.nj-panel {
	margin-block-start: var(--wp--custom--inset);
}

/* ---- Floating cutouts ------------------------------------------------ */

:where(.wp-block-group, .wp-block-column, .wp-block-cover, .wp-block-post-content):has(> .wp-block-nutritional-journeys-cutout) {
	position: relative;
}

/* Everything beside a cutout sits on layer 3, so cutouts can go behind (0-2) or in front (4+). */
:where(.wp-block-group, .wp-block-column, .wp-block-cover):has(> .wp-block-nutritional-journeys-cutout) > :not(.wp-block-nutritional-journeys-cutout) {
	position: relative;
	z-index: 3;
}

.wp-block-nutritional-journeys-cutout,
.wp-block-nutritional-journeys-cutout.block-editor-block-list__block {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--w);
	max-width: none;
	margin: 0 !important;
	z-index: var(--z, 2);
	opacity: var(--o, 1);
	pointer-events: none;
	transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--r, 0deg));
	filter: var(--wp--custom--cutout--shadow) blur(var(--b, 0px));
	will-change: transform;
}

.wp-block-nutritional-journeys-cutout.has-shadow-dark {
	filter: var(--wp--custom--cutout--shadow-dark) blur(var(--b, 0px));
}

.wp-block-nutritional-journeys-cutout.has-shadow-none {
	filter: blur(var(--b, 0px));
}

.wp-block-nutritional-journeys-cutout img {
	display: block;
	width: 100%;
	height: auto;
}

.wp-block-nutritional-journeys-cutout.is-floating img {
	animation: nj-bob 9s ease-in-out infinite;
	animation-delay: var(--del, 0s);
}

/* "Spill into neighbouring sections": the section holding the cutout is
   lifted above its neighbours, so the cutout floats across the boundary
   instead of being covered by the next section's background. */
.alignfull:has(.wp-block-nutritional-journeys-cutout.is-spilling) {
	z-index: 6;
	overflow-y: visible;
}

@keyframes nj-bob {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-10px) rotate(2deg); }
}

@media (max-width: 1100px) {
	.wp-block-nutritional-journeys-cutout.is-hidden-tablet {
		display: none;
	}
}

@media (max-width: 640px) {
	.wp-block-nutritional-journeys-cutout {
		left: var(--xm, var(--x));
		top: var(--ym, var(--y));
		width: var(--wm, var(--w));
	}

	.wp-block-nutritional-journeys-cutout.is-hidden-mobile {
		display: none;
	}
}

/* Editor: cutouts can be clicked to select them; an empty one shows its picker. */
.editor-styles-wrapper .wp-block-nutritional-journeys-cutout {
	pointer-events: auto;
	will-change: auto;
}

.editor-styles-wrapper .wp-block-nutritional-journeys-cutout.block-editor-block-list__block.is-empty {
	position: relative;
	left: auto;
	top: auto;
	width: auto;
	transform: none;
	filter: none;
}

/* ---- Rotating badge -------------------------------------------------- */

.wp-block-nutritional-journeys-badge {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--size, 150px);
	aspect-ratio: 1;
	border-radius: 50%;
	text-decoration: none;
}

.nj-badge__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation: nj-spin 22s linear infinite;
}

.nj-badge__ring text {
	font: 600 9.6px var(--wp--preset--font-family--public-sans);
	letter-spacing: 0.06em;
	fill: currentColor;
}

.nj-badge__mid {
	position: relative;
	display: grid;
	place-items: center;
	width: 39%;
	aspect-ratio: 1;
	border-radius: 50%;
}

.nj-badge__mid svg {
	width: 42%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.4s ease;
}

a.wp-block-nutritional-journeys-badge:hover .nj-badge__mid svg {
	transform: rotate(45deg);
}

.nj-badge__word {
	font: italic 400 1.9rem/1 var(--wp--preset--font-family--newsreader);
}

.wp-block-nutritional-journeys-badge.is-tone-dark {
	color: var(--wp--preset--color--cream-deep);
	background: var(--wp--preset--color--primary-deep);
	box-shadow: var(--wp--preset--shadow--button);
}

.is-tone-dark .nj-badge__mid,
.is-tone-glass .nj-badge__mid {
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--primary-deep);
}

.is-tone-dark .nj-badge__mid .is-leaf {
	fill: var(--wp--preset--color--primary);
	stroke: var(--wp--preset--color--mint);
}

.wp-block-nutritional-journeys-badge.is-tone-light {
	color: var(--wp--preset--color--primary-deep);
	background: var(--wp--preset--color--mint);
}

.is-tone-light .nj-badge__mid {
	background: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--mint);
}

.wp-block-nutritional-journeys-badge.is-tone-glass {
	color: var(--wp--preset--color--cream-deep);
	background: color-mix(in srgb, var(--wp--preset--color--base) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

@keyframes nj-spin {
	to { transform: rotate(360deg); }
}

/* ---- Header --------------------------------------------------------- */

/* Over the hero and inner page headers the header floats on the sky. */
.wp-site-blocks:has(.nj-hero, .nj-page-hero) > header {
	margin-bottom: calc(var(--nj-header-height, 80px) * -1);
}

.nj-header {
	background: transparent;
	transition: background-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition), padding var(--wp--custom--transition);
}

.nj-is-scrolled .nj-header,
.wp-site-blocks:not(:has(.nj-hero, .nj-page-hero)) .nj-header {
	background-color: color-mix(in srgb, var(--wp--preset--color--cream) 82%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
	box-shadow: 0 1px 0 var(--wp--preset--color--line);
}

.nj-header .wp-block-site-title a {
	color: var(--wp--preset--color--ink);
}

.nj-header__nav .wp-block-navigation-item__content {
	opacity: 0.8;
	border-bottom-width: 1.5px;
}

.nj-header__nav .wp-block-navigation-item__content:hover,
.nj-header__nav .current-menu-item > .wp-block-navigation-item__content,
.nj-header__nav .current-menu-ancestor > .wp-block-navigation-item__content,
.nj-header__nav [aria-current="page"] {
	opacity: 1;
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--primary);
}

.nj-header__cta .wp-block-button__link {
	box-shadow: var(--wp--preset--shadow--button);
}

/* ---- Hero -------------------------------------------------------------- */

.nj-hero {
	min-height: max(100svh, 720px);
	padding-top: calc(var(--nj-header-height, 80px) + clamp(3rem, 7vh, 5.5rem));
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Summer sun and a soft curve into the page below. */
.nj-hero::before {
	content: "";
	position: absolute;
	right: 9vw;
	top: 9vh;
	width: 22vw;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--wp--preset--color--sun) 35%, var(--wp--preset--color--base)), color-mix(in srgb, var(--wp--preset--color--sun) 70%, transparent) 55%, transparent 72%);
	filter: blur(4px);
	z-index: -1;
}

.nj-hero::after {
	content: "";
	position: absolute;
	left: -5%;
	right: -5%;
	bottom: -1px;
	height: 90px;
	background: radial-gradient(60% 100% at 30% 100%, var(--wp--preset--color--cream) 60%, transparent 61%), radial-gradient(60% 100% at 80% 100%, var(--wp--preset--color--cream) 55%, transparent 56%);
	z-index: 4;
	pointer-events: none;
}

.nj-hero__grid {
	container-type: inline-size;
	align-items: flex-start !important;
}

.nj-hero__heading {
	font-size: clamp(2.6rem, 6.6cqi, 7.4rem);
	line-height: 0.98;
	margin-top: 1.4rem;
}

.nj-hero__heading .nj-display {
	font-size: 2.35em;
	margin-left: -0.04em;
}

.nj-hero__aside {
	padding-top: 4.5rem;
}

.nj-hero__aside .is-style-glass p {
	font-size: 1.03rem;
}

.nj-hero__aside .wp-block-buttons {
	gap: 0.6rem;
}

.nj-stats {
	gap: clamp(1.5rem, 4vw, 3rem) !important;
	margin-top: clamp(2rem, 5vw, 3.5rem) !important;
	position: relative;
	z-index: 5;
}

.nj-stats p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
}

.nj-stats strong {
	display: block;
	margin-bottom: 0.35rem;
	font: 400 2rem/1 var(--wp--preset--font-family--newsreader);
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 781px) {
	.nj-hero__aside {
		padding-top: 0;
	}

	.nj-hero__heading {
		font-size: clamp(2.6rem, 11cqi, 4rem);
	}
}

/* ---- Inner page header ------------------------------------------------ */

.nj-page-hero {
	padding-top: calc(var(--nj-header-height, 80px) + clamp(3rem, 6vw, 5rem));
}

.nj-photo-head {
	max-width: 420px;
	margin-inline: auto !important;
}

.nj-page-hero__art {
	position: relative;
}

/* ---- Marquee ------------------------------------------------------------ */

.nj-marquee {
	position: relative;
	height: clamp(150px, 15vw, 220px);
	overflow: hidden;
	margin-top: -10px !important;
	z-index: 1;
}

.nj-band {
	position: absolute !important;
	left: -5%;
	right: -5%;
	top: 50%;
	padding: 1rem 0;
	gap: 1.6rem !important;
	overflow: hidden;
	flex-wrap: nowrap !important;
}

/* With the script on, the moving track carries the spacing. */
.nj-band:has(> .nj-band__track) {
	gap: 0 !important;
}

.nj-band.is-back {
	background: var(--wp--preset--color--mint);
	transform: translateY(-50%) rotate(2.2deg);
}

.nj-band.is-front {
	background: var(--wp--preset--color--primary-deep);
	transform: translateY(-50%) rotate(-2.2deg);
	box-shadow: var(--wp--preset--shadow--button);
}

.nj-band > *,
.nj-band__track > * {
	flex: none;
	margin: 0 !important;
}

.nj-band__track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: 1.6rem;
	padding-right: 1.6rem;
	animation: nj-tick 48s linear infinite;
}

.nj-band.is-back .nj-band__track {
	animation-direction: reverse;
	animation-duration: 60s;
}

.nj-band p {
	white-space: nowrap;
}

.nj-band.is-front p {
	font: italic 300 clamp(1.9rem, 3.4vw, 3.1rem)/1 var(--wp--preset--font-family--newsreader);
	color: var(--wp--preset--color--cream-deep);
}

.nj-band.is-back p {
	font: 600 clamp(0.8rem, 1.1vw, 1rem)/1 var(--wp--preset--font-family--public-sans);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-deep);
}

.nj-band__sep {
	width: clamp(30px, 2.8vw, 42px);
}

.nj-band__sep img {
	width: 100%;
	height: auto;
	border-radius: 0;
	filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent));
}

.nj-band.is-back .nj-band__sep {
	width: clamp(26px, 2.2vw, 34px);
}

@keyframes nj-tick {
	to { transform: translateX(-50%); }
}

/* ---- Photo stack (approach, story) ---------------------------------------- */

.nj-stack {
	position: relative;
	padding: 0 0 4.5rem 2.5rem;
	max-width: 520px;
	margin-inline: auto;
}

.nj-stack__main {
	margin: 0 !important;
}

.nj-stack__main img {
	aspect-ratio: 4 / 5;
}

.nj-stack__inset {
	position: absolute !important;
	left: -10px;
	bottom: 0;
	width: 44%;
	margin: 0 !important;
	border: 10px solid var(--wp--preset--color--cream);
	border-radius: 28px;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--card);
	z-index: 4 !important;
}

.nj-stack__inset img {
	border-radius: 18px;
}

.nj-stack__badge {
	position: absolute !important;
	right: -30px;
	bottom: 60px;
	z-index: 5 !important;
}

.nj-stack.is-story {
	padding: 60px 0 4.5rem;
}

.nj-stack.is-story .nj-stack__inset {
	left: auto;
	right: -20px;
}

.nj-stack.is-story .nj-stack__badge {
	right: auto;
	left: -24px;
	bottom: 28%;
}

/* "story": an outlined word tucked behind the top of the photo. */
.nj-ghost {
	position: absolute !important;
	left: -3vw;
	top: 0;
	z-index: 0 !important;
	margin: 0 !important;
	font: italic 300 clamp(6rem, 13vw, 14rem)/0.8 var(--wp--preset--font-family--newsreader);
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1.4px color-mix(in srgb, var(--wp--preset--color--leaf) 55%, transparent);
	pointer-events: none;
}

.nj-stack.is-story .nj-stack__main {
	position: relative;
	z-index: 1;
}

@media (max-width: 640px) {
	.nj-stack {
		padding-left: 0;
	}

	.nj-stack__badge {
		--size: 110px !important;
		right: 0;
	}

	.nj-ghost {
		left: 0;
	}
}

/* ---- Feature cards (approach) --------------------------------------------- */

.nj-feature {
	background: color-mix(in srgb, var(--wp--preset--color--base) 75%, transparent) !important;
	border-color: var(--wp--preset--color--base) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.nj-feature h3 {
	max-width: 70%;
}

/* ---- Conditions ------------------------------------------------------------ */

.nj-conditions {
	row-gap: clamp(4.5rem, 7vw, 6rem);
	padding-top: 3rem;
}

.nj-condition {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 14px 14px 30px;
	border-radius: 34px;
	transition: transform 0.5s cubic-bezier(.2, .8, .2, 1);
}

.nj-condition::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(120% 70% at 80% 0%, color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent), transparent 55%);
	pointer-events: none;
}

.nj-condition:hover {
	transform: translateY(-6px);
}

.nj-condition__window {
	margin: 0 !important;
	border-radius: var(--wp--custom--radius--window);
	overflow: hidden;
}

.nj-condition__window img {
	border-radius: var(--wp--custom--radius--window);
	transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}

.nj-condition:hover .nj-condition__window img {
	transform: scale(1.07);
}

.nj-condition > .wp-block-nutritional-journeys-cutout {
	transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
}

.nj-condition:hover > .wp-block-nutritional-journeys-cutout {
	transform: translate3d(0, -14px, 0) rotate(calc(var(--r, 0deg) + 8deg)) scale(1.04);
}

.nj-condition__body {
	padding: 1.5rem 1.25rem 0;
}

.nj-condition__body p {
	color: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent);
}

.nj-num {
	font: italic 300 0.95rem var(--wp--preset--font-family--newsreader);
	color: var(--wp--preset--color--muted) !important;
	margin: 0;
}

/* ---- The journey (process) --------------------------------------------- */

.nj-journey {
	padding-top: clamp(4rem, 7vw, 6.5rem);
	padding-bottom: clamp(4rem, 7vw, 6.5rem);
}

.nj-stops {
	position: relative;
	row-gap: 3rem;
}

/* A dotted line through the three medallions. Drawn in CSS so the editor shows
   it as visitors see it; on the site it draws itself while scrolling
   (--nj-draw, assets/js/motion.js). Hidden unless three steps sit in a row
   (data-nj-cols, set by motion.js and by design-controls.js in the editor). */
.nj-stops::before {
	content: "";
	position: absolute;
	left: calc((100% - 6rem) / 6 + 70px);
	right: calc((100% - 6rem) / 6 + 70px);
	top: 59px;
	height: 2px;
	pointer-events: none;
	z-index: 0;
	opacity: 0.7;
	background: repeating-linear-gradient(90deg, var(--wp--preset--color--mint) 0 3px, transparent 3px 12px);
	clip-path: inset(0 calc(var(--nj-draw, 0) * 100%) 0 0);
}

.nj-stops[data-nj-cols]:not([data-nj-cols="3"])::before {
	display: none;
}

@media (max-width: 1100px) {
	.nj-stops::before {
		display: none;
	}
}

.nj-stop {
	position: relative;
	z-index: 1;
}

.nj-stop__moon {
	position: relative;
	width: 120px;
	aspect-ratio: 1;
	margin: 0 auto 1.4rem !important;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--wp--preset--color--mint) 26%, var(--wp--preset--color--primary-deep)), var(--wp--preset--color--primary-deep) 70%);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--mint) 30%, transparent), 0 20px 40px -20px color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent);
}

/* Step number: a small lime badge on the medallion's edge. */
.nj-stop__n {
	position: absolute !important;
	right: -4px;
	top: -2px;
	z-index: 5 !important;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin: 0 !important;
	border-radius: 50%;
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--primary-deep) !important;
	font: italic 500 0.95rem/1 var(--wp--preset--font-family--newsreader);
}

.nj-stop h3 {
	color: var(--wp--preset--color--base);
}

.nj-stop p:not(.nj-stop__n) {
	max-width: 34ch;
	margin-inline: auto;
	color: color-mix(in srgb, var(--wp--preset--color--cream-deep) 75%, transparent);
}

/* ---- Story text -------------------------------------------------------- */

.nj-story__lead {
	font: italic 300 clamp(1.3rem, 1rem + 1vw, 1.65rem)/1.35 var(--wp--preset--font-family--newsreader);
	color: var(--wp--preset--color--primary);
}

.nj-story__twist {
	font: 400 clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem)/1.2 var(--wp--preset--font-family--newsreader);
	color: var(--wp--preset--color--ink);
}

/* ---- Testimonials ------------------------------------------------------- */

.nj-voices__art {
	position: relative;
	min-height: 540px;
}

.nj-kind {
	position: absolute !important;
	margin: 0 !important;
	font: italic 300 clamp(6rem, 11vw, 11rem)/0.8 var(--wp--preset--font-family--newsreader);
	letter-spacing: -0.04em;
	pointer-events: none;
}

.nj-kind.is-back {
	left: 0;
	top: 0;
	z-index: 1 !important;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--wp--preset--color--primary);
}

.nj-kind.is-front {
	right: 0;
	bottom: 10px;
	z-index: 3 !important;
	color: var(--wp--preset--color--primary-deep);
}

.nj-slides {
	position: relative;
}

/* Every quote sits in the same grid cell, so the slider is always as tall as
   the longest quote and the page below never moves when it changes. */
.nj-slides.is-slider {
	display: grid;
}

.nj-slides.is-slider > .wp-block-quote {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.nj-slides.is-slider > .wp-block-quote.is-on {
	opacity: 1;
	transform: none;
}

.nj-slides:not(.is-slider) > .wp-block-quote + .wp-block-quote {
	margin-top: 2rem;
}

.nj-slider-nav {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.nj-slider-nav__btn {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--primary-deep) 25%, transparent);
	background: none;
	color: var(--wp--preset--color--primary-deep);
	font: 400 18px/1 var(--wp--preset--font-family--public-sans);
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.nj-slider-nav__btn:hover,
.nj-slider-nav__btn:focus-visible {
	background: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--mint);
}

.nj-slider-nav__btn.is-pause {
	width: 44px;
	height: 44px;
	margin-left: 0.4rem;
	font-size: 11px;
	letter-spacing: -0.1em;
}

.nj-slider-nav__dots {
	display: flex;
	gap: 8px;
}

.nj-slider-nav__dots i {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--primary-deep) 20%, transparent);
	transition: width 0.4s ease, background-color 0.4s ease;
}

.nj-slider-nav__dots i.is-on {
	width: 28px;
	background: var(--wp--preset--color--primary);
}

@media (max-width: 781px) {
	.nj-voices__art {
		min-height: 360px;
	}
}

/* ---- Pricing ------------------------------------------------------------ */

.nj-tiers {
	align-items: stretch;
	row-gap: 2rem;
	padding-top: 2rem;
}

.nj-tier {
	position: relative;
	padding: 2.75rem 2.4rem 2.5rem;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	transition: transform 0.5s cubic-bezier(.2, .8, .2, 1), box-shadow 0.5s ease;
}

.nj-tier:hover {
	transform: translateY(-6px);
	box-shadow: var(--wp--preset--shadow--card);
}

.nj-tier.is-lead {
	transform: translateY(-28px);
	border: 0;
	box-shadow: var(--wp--preset--shadow--raised);
	overflow: visible;
}

.nj-tier.is-lead:hover {
	transform: translateY(-34px);
}

.nj-tier.is-lead .is-style-tag {
	background: transparent;
	padding-inline: 0;
	color: var(--wp--preset--color--gold);
}

.nj-tier__unit,
.nj-tier__desc {
	color: var(--wp--preset--color--muted);
}

.nj-tier.is-lead :is(.nj-tier__unit, .nj-tier__desc) {
	color: color-mix(in srgb, var(--wp--preset--color--cream-deep) 72%, transparent);
}

.nj-ticks {
	list-style: none;
	padding: 0 !important;
	display: grid;
	gap: 0.75rem;
}

.nj-ticks li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 0.6rem;
}

.nj-ticks li::before {
	content: "";
	width: 14px;
	height: 14px;
	margin-top: 0.35em;
	border-radius: 50% 0;
	background: var(--wp--preset--color--leaf);
	transform: rotate(-45deg);
}

.nj-tier.is-lead .nj-ticks li::before {
	background: var(--wp--preset--color--gold);
}

.nj-push-end {
	margin-top: auto !important;
}

.nj-tier .wp-block-button,
.nj-tier .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.nj-pricing__note {
	text-align: center;
	max-width: 60ch;
	margin: var(--wp--preset--spacing--60) auto 0 !important;
	color: var(--wp--preset--color--muted);
}

.nj-corp {
	position: relative;
	gap: 1.8rem !important;
}

/* Under the prices: room above, and room on the left for the limes. */
.nj-pricing .nj-corp {
	margin-top: var(--wp--preset--spacing--60) !important;
}

.nj-corp:has(> .nj-corp__cutout) {
	padding-left: clamp(2rem, 1rem + 10vw, 10rem) !important;
}

.nj-pricing__creds {
	max-width: 72ch;
	margin-inline: auto;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 1100px) {
	.nj-tier.is-lead,
	.nj-tier.is-lead:hover {
		transform: none;
	}
}

@media (max-width: 640px) {
	.nj-corp:has(> .nj-corp__cutout) {
		padding-left: 2rem !important;
	}
}

/* ---- FAQ ------------------------------------------------------------------- */

.nj-faq-section__intro {
	position: relative;
	min-height: 520px;
}

/* Soft-focus botanical: sharp at the bottom, melting into blur above. */
.nj-focus img {
	-webkit-mask-image: linear-gradient(200deg, transparent 25%, var(--wp--preset--color--ink) 80%);
	mask-image: linear-gradient(200deg, transparent 25%, var(--wp--preset--color--ink) 80%);
}

.nj-focus {
	opacity: 0.9;
	filter: blur(1px) !important;
}

@media (max-width: 1100px) {
	.nj-faq-section__intro {
		min-height: 0;
	}
}

/* ---- Articles ---------------------------------------------------------------- */

.nj-post-card {
	background: var(--wp--preset--color--base);
}

.nj-post-card .wp-block-post-featured-image {
	overflow: hidden;
}

.nj-post-card .wp-block-post-title {
	font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.9rem);
}

/* ---- Credentials ------------------------------------------------------------ */

.nj-creds {
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.nj-cred {
	gap: 1rem !important;
}

.nj-cred__logo {
	flex: none;
	margin: 0 !important;
}

.nj-cred__logo img {
	width: auto;
	max-width: 110px;
	object-fit: contain;
	border-radius: 0;
}

.nj-cred__label {
	margin: 0;
}

.nj-cred__label::before {
	display: none;
}

/* ---- Call to action --------------------------------------------------------- */

.nj-cta {
	padding-top: clamp(6rem, 12vw, 11rem);
	padding-bottom: clamp(6rem, 12vw, 11rem);
}

.nj-cta__body {
	container-type: inline-size;
}

.nj-cta__title {
	line-height: 1;
}

.nj-cta__title .nj-display {
	font-size: 1.85em;
	margin-top: 0.05em;
}

.nj-cta__text {
	max-width: 520px;
	margin-inline: auto !important;
	color: var(--wp--preset--color--ink);
}

/* ---- Footer ----------------------------------------------------------------- */

.wp-site-blocks > footer {
	padding-bottom: var(--wp--custom--inset);
}

.nj-footer {
	margin-top: var(--wp--custom--inset) !important;
	padding-top: clamp(3rem, 5vw, 3.75rem) !important;
	padding-bottom: 1.75rem !important;
}

.nj-footer__cols {
	position: relative;
	z-index: 2;
}

.nj-footer .wp-block-site-title a {
	color: var(--wp--preset--color--cream-deep);
}

.nj-footer__label {
	font: 600 0.72rem/1 var(--wp--preset--font-family--public-sans);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mint);
}

.nj-footer p,
.nj-footer__nav {
	color: color-mix(in srgb, var(--wp--preset--color--cream-deep) 82%, transparent);
}

.nj-footer a:where(:not(.wp-element-button)) {
	text-decoration: none;
}

/* The big word sits under the columns, on the right, very faint. */
.nj-footer__word {
	position: relative;
	z-index: 1;
	margin: -0.42em 0 0 !important;
	text-align: center;
	white-space: nowrap;
	font: italic 300 clamp(2.4rem, 13.8vw, 13rem)/0.9 var(--wp--preset--font-family--newsreader);
	letter-spacing: -0.045em;
	background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--mint) 30%, transparent), color-mix(in srgb, var(--wp--preset--color--mint) 2%, transparent) 85%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	user-select: none;
	pointer-events: none;
}

.nj-footer__bottom {
	position: relative;
	z-index: 2;
	margin-top: -0.4em !important;
	padding-top: 1.4rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--cream-deep) 14%, transparent);
}

.nj-footer__legal {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.2rem;
	row-gap: 0.4rem;
}

.nj-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

@media (max-width: 640px) {
	.nj-footer__word {
		text-align: center;
	}
}

/* ---- Back to top: progress ring -------------------------------------------- */

.nj-to-top {
	width: 54px;
	height: 54px;
	background-color: var(--wp--preset--color--primary-deep);
	border-color: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--mint);
}

.nj-to-top__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.nj-to-top__ring circle {
	fill: none;
	stroke: var(--wp--preset--color--mint);
	stroke-width: 2.5;
	stroke-dasharray: 1;
	stroke-dashoffset: var(--nj-progress, 1);
}

/* ---- Reveal ------------------------------------------------------------------- */

.nj-js .nj-reveal {
	opacity: 0;
	translate: 0 36px;
	transition: opacity 1s ease, translate 1.1s cubic-bezier(.2, .8, .2, 1);
	transition-delay: var(--nj-delay, 0ms);
}

.nj-js .nj-reveal.is-in {
	opacity: 1;
	translate: none;
}

/* ---- Reduced motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wp-block-nutritional-journeys-cutout.is-floating img,
	.nj-badge__ring,
	.nj-band__track {
		animation: none !important;
	}

	.nj-js .nj-reveal {
		opacity: 1;
		translate: none;
		transition: none;
	}

	.nj-slides.is-slider > .wp-block-quote,
	.nj-slider-nav__dots i {
		transition: none;
	}
}

/* ---- Grids: columns and gaps come from each grid's own block settings ---- */

/* The lead tier keeps its evergreen ground over the card rule. */
.nj-tier.is-lead {
	background: var(--wp--preset--gradient--evergreen);
	color: var(--wp--preset--color--cream-deep);
}

.nj-tier.is-lead :is(h2, h3, .is-style-price) {
	color: var(--wp--preset--color--cream-deep);
}

/* Footer: inset like the other panels; the big word spans the wide width. */
.wp-site-blocks > footer .nj-footer {
	margin-left: var(--wp--custom--inset) !important;
	margin-right: var(--wp--custom--inset) !important;
	width: auto;
	max-width: none;
}

.nj-footer > .nj-footer__word {
	max-width: var(--wp--style--global--wide-size) !important;
}

/* Ring button (style "Ring"): outlined pill with a round lime arrow. */
.wp-block-button.is-style-ring .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: 0.5rem 0.5rem 0.5rem 1.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--base) 4%, transparent);
	color: var(--wp--preset--color--cream-deep);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--mint) 55%, transparent);
	box-shadow: none;
}

.wp-block-button.is-style-ring .wp-block-button__link::after {
	content: "→";
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--primary-deep);
	transition: transform 0.4s ease;
}

.wp-block-button.is-style-ring .wp-block-button__link:hover,
.wp-block-button.is-style-ring .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--mint) 12%, transparent);
	color: var(--wp--preset--color--cream-deep);
	border-color: var(--wp--preset--color--mint);
}

.wp-block-button.is-style-ring .wp-block-button__link:hover::after {
	transform: rotate(-45deg);
}

/* Phone header: brand and menu button on one row (x-large is now a display size). */
@media (max-width: 599px) {
	.nj-header .wp-block-site-title {
		font-size: 1.2rem;
	}

	.nj-header .wp-block-site-logo img {
		width: 28px !important;
	}
}

/* Editor: no floating header there, so no room is kept for it. */
.editor-styles-wrapper .nj-hero,
.editor-styles-wrapper .nj-page-hero {
	padding-top: clamp(3rem, 6vw, 5rem);
}

/* The hero fills one screen on the site; in the editor it uses the same 720px floor. */
.editor-styles-wrapper .nj-hero {
	min-height: 720px;
}


/* ---- Discovery call popup -------------------------------------------------- */

.nj-dialog .nj-popup > h2 {
	font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem);
	line-height: 1.1;
}

/* ---- Cookie consent: no floating tab; "Cookie settings" in the footer opens it ---- */

#cmplz-manage-consent {
	display: none !important;
}

/* ---- Home: "What it can help with" as tinted cards, fruit breaking out on top ---- */

.nj-conditions.is-cards .nj-condition {
	padding: 150px 34px 34px;
	min-height: 380px;
}

.nj-conditions.is-cards .nj-condition__body {
	padding: 0;
}

/* ---- Contact page ---------------------------------------------------------- */

.nj-contact-cards .nj-contact-card {
	position: relative;
	padding: 2.6rem 2.2rem 2.2rem;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	transition: transform 0.5s cubic-bezier(.2, .8, .2, 1), box-shadow 0.5s ease;
}

.nj-contact-cards .nj-contact-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--wp--preset--shadow--card);
}

.nj-contact-card__value {
	font: 400 clamp(1.4rem, 1.1rem + 0.8vw, 1.9rem)/1.2 var(--wp--preset--font-family--newsreader);
	overflow-wrap: anywhere;
}

.nj-contact-card__value a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.nj-contact-card__value a:hover {
	color: var(--wp--preset--color--primary);
}

.nj-contact-form {
	padding: clamp(1.6rem, 1rem + 2vw, 3rem);
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
}

.nj-contact-aside {
	position: relative;
}

/* Arched header photos fill their arch (overrides the 1.x height-led sizing). */
.nj-photo-head img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
}

.nj-contact-quote {
	font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
	padding-left: 1.4rem;
	border-left: 3px solid var(--wp--preset--color--mint);
}

/* The full name spans the footer's wide width. */
.nj-footer > .nj-footer__word {
	max-width: none !important;
	width: 100%;
}

/* ---- Package enquiry popup ------------------------------------------------ */

/* The chosen package, filled in from the card that was clicked. */
.nj-dialog .nj-popup > .nj-package-summary {
	padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--gradient--evergreen);
	color: var(--wp--preset--color--cream-deep);
}

.nj-package-summary .is-style-eyebrow {
	color: var(--wp--preset--color--gold);
}

.nj-dialog .nj-popup > .nj-package-summary > h2 {
	margin: 0;
	color: var(--wp--preset--color--cream-deep);
	font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.4rem);
	line-height: 1.1;
}

.nj-package-summary__price {
	margin: 0;
	font: 300 clamp(2.4rem, 2rem + 1.6vw, 3.2rem)/1 var(--wp--preset--font-family--newsreader);
}

.nj-package-summary__unit {
	color: color-mix(in srgb, var(--wp--preset--color--cream-deep) 75%, transparent);
	font-size: var(--wp--preset--font-size--small);
}

.nj-package-summary .nj-ticks li::before {
	background: var(--wp--preset--color--gold);
}

.nj-package-summary__price:empty,
.nj-package-summary__items:empty {
	display: none;
}

/* Package form: one column, with paired fields in rows. */
.nj-dialog .nj-form.nj-form--package > :nth-child(n) {
	grid-column: 1 / -1;
}

.nj-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--wp--preset--spacing--30);
}

@media (max-width: 520px) {
	.nj-form__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

.nj-form--package .nj-package-field {
	background: var(--wp--preset--color--mint-wash);
	font-weight: 600;
}

/* Phones: room for the close button above the summary card. */
@media (max-width: 819px) {
	.nj-dialog .nj-popup--package {
		padding-top: 2.75rem;
	}
}

/* Talk fields only for a talk; the start question only for a package. */
.nj-form--package .nj-talk-fields {
	display: none;
}

.nj-dialog.is-talk .nj-form--package .nj-talk-fields {
	display: block;
}

.nj-dialog.is-talk .nj-form--package .nj-field--start {
	display: none;
}

/* ==== Round 8 ============================================================ */

/* ---- Hero: editorial split, marquee at the bottom ---- */

.nj-hero.nj-hero--split {
	min-height: 0;
	padding-top: calc(var(--nj-header-height, 80px) + clamp(1.5rem, 4vh, 3rem));
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* No sun in the corner or hard-edged hill: the sky fades into the page. */
.nj-hero--split::before,
.nj-hero--split::after {
	display: none;
}

.nj-hero__stage {
	display: flex;
	align-items: center;
	min-height: calc(100svh - var(--nj-header-height, 80px) - clamp(1.5rem, 4vh, 3rem) - 2rem);
}

.nj-hero__stage > .nj-hero__grid {
	width: 100%;
}

.nj-hero--split .nj-hero__copy {
	position: relative;
	z-index: 4;
}

.nj-hero--split .nj-hero__heading {
	font-size: clamp(2.6rem, 1.6rem + 3.4vw, 5.2rem);
	margin-top: 0.6rem;
}

/* "wellbeing." runs into the picture, in front of the lemon. */
.nj-hero--split .nj-hero__heading .nj-display {
	font-size: 2.25em;
	white-space: nowrap;
}

.nj-hero__intro {
	max-width: 44ch;
}

.nj-hero--split .nj-stats {
	margin-top: clamp(1rem, 3vw, 2rem) !important;
	padding-top: 1.4rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.nj-hero__art {
	position: relative;
	z-index: 1;
	aspect-ratio: 1;
}

/* Soft sun disc behind the lemon. */
.nj-hero__art::before {
	content: "";
	position: absolute;
	inset: 6% 4% 2% 8%;
	border-radius: 50%;
	background: radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--wp--preset--color--sun) 30%, var(--wp--preset--color--base)), color-mix(in srgb, var(--wp--preset--color--sun) 55%, transparent) 55%, transparent 71%);
	z-index: 0;
}

/* The bands sit over the fruit at the bottom of the hero. */
.nj-hero .nj-marquee {
	position: relative;
	z-index: 6;
	margin-top: clamp(1rem, 3vw, 2.5rem) !important;
}

@media (max-width: 781px) {
	.nj-hero__stage {
		min-height: 0;
	}

	.nj-hero__art {
		max-width: 460px;
		width: 100%;
		margin-inline: auto;
	}
}

/* ---- Process and call to action: as wide as the page content ---- */

.has-global-padding > .alignfull.nj-panel.nj-journey,
.has-global-padding > .alignfull.nj-panel.nj-cta,
.nj-panel.nj-journey,
.nj-panel.nj-cta {
	width: auto;
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1.5rem, 4vw, 3.5rem);
	padding-right: clamp(1.5rem, 4vw, 3.5rem);
}

.nj-journey {
	padding-top: clamp(3.5rem, 6vw, 5rem);
	padding-bottom: clamp(3.5rem, 6vw, 5rem);
}

/* Call to action: compact, with fruit breaking out of the panel's edges. */
.nj-panel.nj-cta {
	padding-top: clamp(4rem, 7vw, 6rem);
	padding-bottom: clamp(4rem, 7vw, 6rem);
	overflow: visible;
	position: relative;
	z-index: 5;
}

/* The closing call to action is a composed title (a lead-in line and a
   large display word), like the home hero: its size is set here, on
   purpose, rather than by the H2 preset. */
.nj-cta .nj-cta__title {
	font-size: clamp(2.4rem, 5.5cqi, 5.2rem);
}

/* ---- Home: smaller tinted cards ---- */

.nj-conditions.is-cards .nj-condition {
	padding: 104px 30px 30px;
	min-height: 0;
}

/* ---- Credentials: a wider row, each item with room to breathe ---- */

.nj-creds .nj-creds__row.alignwide {
	max-width: min(100%, 1320px);
	margin-inline: auto !important;
}

.nj-cred {
	align-items: center !important;
	padding: 1.1rem 0;
}

/* ---- Footer: Explore in two columns, even columns ---- */

.nj-footer__nav .wp-block-navigation__container {
	display: grid !important;
	grid-template-columns: repeat(2, max-content);
	column-gap: 2.5rem;
	row-gap: 0.7rem;
}

/* ---- FAQ: a quiet botanical under the introduction ---- */

.nj-faq-section__intro {
	min-height: 0;
}

/* ---- Popups: full-height card beside the form ---- */

@media (min-width: 820px) {
	.nj-dialog .nj-popup > .nj-package-summary {
		grid-row: 1 / span 20;
		align-self: stretch;
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden;
	}

	.nj-dialog .nj-popup > .nj-package-summary > .nj-next {
		margin-top: auto !important;
	}
}

.nj-dialog .nj-popup > .nj-package-summary > h2 {
	margin: 0;
	color: var(--wp--preset--color--cream-deep);
	font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.4rem);
	line-height: 1.1;
}

.nj-package-summary .nj-package-summary__unit {
	color: color-mix(in srgb, var(--wp--preset--color--cream-deep) 78%, transparent);
}

/* What happens next: small numbered steps on the card. */
.nj-next {
	position: relative;
	z-index: 3;
	padding-top: 1.1rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--cream-deep) 18%, transparent);
}

.nj-next__title {
	margin: 0;
	font: 600 0.72rem/1 var(--wp--preset--font-family--public-sans);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mint);
}

.nj-next__steps {
	margin: 0;
	padding-left: 1.2rem;
	display: grid;
	gap: 0.35rem;
	color: color-mix(in srgb, var(--wp--preset--color--cream-deep) 85%, transparent);
}

.nj-next__steps li::marker {
	color: var(--wp--preset--color--mint);
	font-weight: 600;
}

.nj-next__switch {
	margin: 0.4rem 0 0;
	color: color-mix(in srgb, var(--wp--preset--color--cream-deep) 75%, transparent);
}

.nj-next__switch a {
	color: var(--wp--preset--color--mint);
}

/* The package is named on the card; its field travels with the form unseen. */
.nj-form--package .nj-field--package,
.nj-form--package .nj-field:has(> .wpcf7-form-control-wrap .nj-package-field) {
	display: none;
}

.nj-form--package .nj-talk-field {
	display: none;
}

.nj-dialog.is-talk .nj-form--package .nj-talk-field {
	display: block;
}

.nj-dialog.is-talk .nj-form--package .nj-talk-fields {
	display: grid;
}

/* Phones: the card stays short so the form follows quickly. */
@media (max-width: 819px) {
	.nj-package-summary .nj-next,
	.nj-package-summary .nj-ticks {
		display: none;
	}
}

/* Fruit may break out of the call to action (beats the panel's clip rule). */
.has-global-padding > .alignfull.nj-panel.nj-cta,
.wp-site-blocks > .alignfull.nj-panel.nj-cta {
	overflow: visible;
}

/* Room for the band's shadow, so it fades out instead of ending in a line. */
.nj-marquee {
	height: clamp(200px, 19vw, 280px);
}

@media (min-width: 820px) {
	/* A wider card so its lists read in full lines; the form sits centred beside it. */
	.nj-dialog .nj-popup:has(> .nj-package-summary) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	}

	.nj-dialog .nj-popup > .wpcf7 {
		align-self: center;
	}
}

.nj-package-summary .nj-next {
	max-width: none;
	padding-right: 30%;
}

.nj-package-summary .nj-ticks {
	gap: 0.45rem;
}

/* ---- Added content sections ---- */

.nj-mini-card {
	position: relative;
	padding: var(--wp--preset--spacing--50) 1.8rem 1.9rem;
	border-radius: var(--wp--custom--radius--card);
	transition: transform 0.5s cubic-bezier(.2, .8, .2, 1);
}

.nj-mini-card:hover {
	transform: translateY(-5px);
}

/* Room for a cutout breaking out of the top, only where a card has one. */
.nj-mini-cards:has(.wp-block-nutritional-journeys-cutout) {
	padding-top: 2.5rem;
	row-gap: 3.5rem !important;
}

.nj-mini-card:has(> .wp-block-nutritional-journeys-cutout) {
	padding-top: 4.4rem;
}

.nj-mini-card__title {
	font-size: clamp(1.45rem, 1.2rem + 0.6vw, 1.8rem);
}

.nj-mini-card p {
	color: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent);
}

.nj-split .nj-split__art {
	position: relative;
}

.nj-split__photo {
	max-width: 440px;
	margin-inline: auto !important;
}

.nj-split__photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
}

/* About: the story beside the portrait. */
.nj-about-story .nj-photo-story {
	max-width: 420px;
}

.nj-about-story .wp-block-column p {
	font-size: 1.08rem;
}

/* Testimonials page: quote cards in two columns. */
.nj-quotes .nj-quote-card {
	border: 0;
	background: var(--wp--preset--color--mint-wash);
	padding: 2.4rem 2.4rem 2.2rem;
}

.nj-quotes .nj-quote-card .wp-block-quote p {
	font-size: clamp(1.25rem, 1rem + 0.6vw, 1.55rem);
}

/* ---- Home tour: areas of help as linked photo tiles ---- */

.nj-tiles .nj-condition {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.nj-tiles .nj-condition__body {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0;
}

.nj-tiles .nj-condition h3 a {
	color: inherit;
	text-decoration: none;
}

/* The whole tile is the link; the title keeps the accessible name. */
.nj-tiles .nj-condition h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 1;
}

.nj-tiles .nj-condition h3::after {
	content: "→";
	margin-left: 0.4em;
	color: var(--wp--preset--color--leaf);
	transition: margin-left 0.3s ease;
}

.nj-tiles .nj-condition:hover h3::after {
	margin-left: 0.7em;
}

.nj-tiles .nj-condition:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

.nj-tiles .nj-condition h3 a:focus-visible {
	outline: none;
}

/* How I can help: links land below the sticky header. */
.nj-condition[id] {
	scroll-margin-top: calc(var(--nj-header-height, 80px) + var(--wp--preset--spacing--40));
}

/* ---- Home tour: the three ways to work together, slim ---- */

.nj-tier--slim {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.nj-tier--slim.is-lead {
	transform: none;
}

.nj-tier--slim.is-lead:hover {
	transform: translateY(-6px);
}

/* The "how it works" line under the short prices (spacing from the block). */
.nj-pricing__how {
	max-width: 60ch;
	margin-inline: auto;
	color: var(--wp--preset--color--muted);
}