/*
Theme Name: PN Theme
Description: Layout, design, and motion for Parallel Nutrition.
Version: 1.0.0
Author: Parallel Nutrition
Text Domain: pn-theme
*/

@font-face {
	font-family: "Barlow Condensed";
	src: url("assets/fonts/barlow-condensed-700-italic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: Outfit;
	src: url("assets/fonts/outfit-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: Outfit;
	src: url("assets/fonts/outfit-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: Outfit;
	src: url("assets/fonts/outfit-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root {
	--pn-bg: #08090b;
	--pn-ink: #f4f1ea;
	--pn-accent: #e3141e;
	--pn-gold: #ce8629;
	--pn-chapter: var(--pn-bg);
	--pn-on: var(--pn-ink);
	--pn-margin: clamp(16px, 4vw, 48px);
	--pn-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
	--pn-body: Outfit, "Segoe UI", sans-serif;
	--pn-step-1: clamp(2.6rem, 8vw, 7.2rem);
	--pn-step-2: clamp(2rem, 4.6vw, 4.2rem);
	--pn-step-3: clamp(1.4rem, 2vw, 2rem);
	--pn-body-size: clamp(1.05rem, 1.2vw, 1.25rem);
	--pn-label: 0.78rem;
	--pn-bar: 72px;
	color-scheme: dark;
}

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

html {
	scroll-behavior: auto;
}

body {
	margin: 0;
	background: var(--pn-bg);
	color: var(--pn-ink);
	font-family: var(--pn-body);
	font-size: var(--pn-body-size);
	font-weight: 400;
	line-height: 1.5;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--pn-gold);
	outline-offset: 3px;
}

.pn-header,
.pn-scene,
.pn-split,
.pn-content,
.pn-product,
.pn-form {
	padding-left: var(--pn-margin);
	padding-right: var(--pn-margin);
}

.pn-header {
	--pn-bar: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--pn-bar);
	position: sticky;
	top: 0;
	z-index: 5;
	padding: 12px var(--pn-margin);
	background: var(--pn-bg);
}

.pn-menu {
	margin: 0;
}

.pn-menu__button {
	display: none;
	list-style: none;
}

.pn-menu__button::-webkit-details-marker {
	display: none;
}

.pn-menu__name {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pn-menu__name--close {
	display: none;
}

.pn-logo img {
	width: auto;
	height: 48px;
}

.pn-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pn-nav__list a {
	color: #fff;
	font-family: var(--pn-body);
	font-size: var(--pn-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.pn-nav__list .current-menu-item > a,
.pn-nav__list .current_page_item > a,
.pn-nav__list a[aria-current="page"] {
	color: var(--pn-gold);
}

.pn-scene,
.pn-split,
.pn-content,
.pn-form {
	background: var(--pn-chapter, var(--pn-bg));
	color: var(--pn-on, var(--pn-ink));
}

.pn-product {
	background: var(--pn-bg);
	color: var(--pn-ink);
}

.pn-scene {
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 12vh;
	padding-bottom: 8vh;
	position: relative;
}

.pn-scene[data-animation="seam"] {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: calc(100svh - var(--pn-bar));
	height: calc(100dvh - var(--pn-bar));
	min-height: calc(100svh - var(--pn-bar));
	min-height: calc(100dvh - var(--pn-bar));
	max-height: calc(100svh - var(--pn-bar));
	max-height: calc(100dvh - var(--pn-bar));
	overflow: hidden;
	background: var(--pn-bg);
	color: var(--pn-ink);
	padding-top: 1.5rem;
	padding-bottom: 3.6rem;
}

.pn-strip {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	height: 40px;
	overflow: hidden;
	background: var(--pn-bg);
	border-top: 1px solid color-mix(in srgb, var(--pn-gold) 70%, transparent);
}

.pn-scene .pn-strip__line {
	display: flex;
	flex: none;
	width: max-content;
	max-width: none;
	margin: 0;
	font-size: var(--pn-label);
	animation: pn-strip 36s linear infinite;
}

.pn-strip__run {
	display: inline-flex;
	flex: none;
	align-items: center;
	color: #fff;
	font-family: var(--pn-body);
	font-size: var(--pn-label);
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.pn-strip__group {
	display: inline-flex;
	align-items: center;
	gap: 1.35rem;
	padding-right: 5.5rem;
}

.pn-strip__dot {
	color: var(--pn-gold);
}

@keyframes pn-strip {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.pn-scene[data-animation="seam"] .pn-scene__top,
.pn-scene[data-animation="seam"] .pn-scene__bottom {
	min-height: 0;
	background: transparent;
	color: inherit;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
}

.pn-scene[data-animation="seam"] .pn-scene__top {
	position: relative;
	z-index: 1;
}

.pn-scene__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: #000;
}

.pn-scene__poster,
.pn-scene__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.pn-scene__video {
	opacity: 0;
}

.pn-scene__video.is-playing {
	opacity: 1;
}

body.home .pn-header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 5;
	background: transparent;
	justify-content: flex-end;
}

body.home .pn-scene[data-animation="seam"] {
	height: 100svh;
	height: 100dvh;
	min-height: 100svh;
	min-height: 100dvh;
	max-height: 100svh;
	max-height: 100dvh;
	justify-content: center;
	padding-top: 0;
}

body.home .pn-scene[data-animation="seam"] .pn-scene__top {
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding: calc(50dvh + 4.75rem) var(--pn-margin) 3.6rem;
	text-align: center;
}

body.home .pn-scene[data-animation="seam"] .pn-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

body.home .pn-scene[data-animation="seam"] .pn-logo img {
	width: min(320px, calc(100vw - 8.5rem));
	height: auto;
}

body.home .pn-scene[data-animation="seam"] h1 {
	max-width: 7.8em;
	font-size: clamp(2.35rem, 7.2vw, 5.2rem);
	text-align: center;
}

@media (max-width: 767px) {
	body.home .pn-scene[data-animation="seam"] .pn-logo {
		width: min(360px, calc(100vw - 2.75rem));
	}

	body.home .pn-scene[data-animation="seam"] .pn-logo img {
		width: 100%;
		max-width: none;
		height: auto;
	}

	body.home .pn-scene[data-animation="seam"] .pn-scene__top {
		padding-top: calc(50dvh + 6.25rem);
	}

	body.home .pn-scene[data-animation="seam"] h1 {
		font-size: 1.65rem;
	}
}

body.home .pn-scene[data-animation="seam"] .pn-scene__top p {
	max-width: 34ch;
	margin-inline: auto;
	text-align: center;
}

@media (min-width: 1024px) {
	body.home .pn-scene[data-animation="seam"] .pn-logo img {
		width: min(440px, 34vw);
	}
}

.pn-scene[data-animation="seam"] ~ .pn-scene {
	background: var(--pn-accent);
	color: var(--pn-ink);
}

.pn-scene[data-animation="seam"] ~ .pn-scene ~ .pn-scene {
	background: var(--pn-chapter, var(--pn-bg));
	color: var(--pn-on, var(--pn-ink));
}

.pn-scene h1,
.pn-scene h2,
.pn-scene h3,
.pn-split h2,
.pn-split h3,
.pn-content h1,
.pn-content h2,
.pn-content h3,
.pn-product h1,
.pn-product h2,
.pn-product h3,
.pn-form h1,
.pn-form h2,
.pn-form h3 {
	font-family: var(--pn-display);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 0.88;
	margin: 0 0 0.35em;
}

.pn-scene h1,
.pn-content h1,
.pn-product h1,
.pn-form h1 {
	font-size: var(--pn-step-1);
	max-width: 16ch;
}

.pn-scene h2,
.pn-split h2,
.pn-content h2,
.pn-product h2 {
	font-size: var(--pn-step-2);
	max-width: 18ch;
}

.pn-scene h2 {
	font-size: clamp(3.2rem, 8vw, 7rem);
	max-width: 12ch;
}

.pn-scene h3,
.pn-split h3,
.pn-content h3,
.pn-product h3,
.pn-form h3 {
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	max-width: 22ch;
	margin-top: 1.35em;
}

.pn-scene p,
.pn-split p,
.pn-content p,
.pn-product .wp-block-paragraph,
.pn-form p,
.pn-content li,
.pn-scene li {
	max-width: 62ch;
	font-size: var(--pn-body-size);
}

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 1.25rem 0 0;
}

.wp-block-button {
	width: auto;
}

.wp-block-button__link,
.pn-form button {
	display: inline-block;
	background: var(--pn-ink);
	color: #14120f;
	font-family: var(--pn-body);
	font-weight: 600;
	font-size: var(--pn-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	padding: 16px 22px;
	cursor: pointer;
}

.pn-scene[data-animation="seam"] .wp-block-button__link {
	background: var(--pn-ink);
	color: #14120f;
}

.pn-split {
	display: block;
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.pn-split__stage {
	min-height: 0;
	display: grid;
	gap: 32px;
	align-content: center;
	padding-top: 12vh;
	padding-bottom: 8vh;
}

.pn-split__copy {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 24px;
}

.pn-split__copy > :not(.pn-stat) {
	flex: 1 0 100%;
}

.pn-visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	min-height: 0;
	position: relative;
}

.pn-visual__img {
	width: auto;
	max-width: 100%;
	max-height: 30svh;
	height: auto;
	object-fit: contain;
}

.pn-visual__img + .pn-visual__img {
	position: absolute;
	width: 1px;
	height: 1px;
	max-height: none;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.pn-visual.is-alt:not(.is-live):not(.is-pending) > .pn-visual__img:first-of-type {
	position: absolute;
	width: 1px;
	height: 1px;
	max-height: none;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.pn-visual.is-alt:not(.is-live):not(.is-pending) > .pn-visual__img + .pn-visual__img {
	position: static;
	width: auto;
	height: auto;
	max-height: 30svh;
	overflow: visible;
	clip: auto;
}

.pn-visual.is-pending,
.pn-visual.is-live {
	min-height: 42svh;
}

.pn-visual.is-pending .pn-visual__img,
.pn-visual.is-live .pn-visual__img {
	position: absolute;
	width: 1px;
	height: 1px;
	max-height: none;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.pn-visual .pn-gl {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	visibility: hidden;
	pointer-events: none;
	z-index: 1;
}

.pn-visual:has(.pn-visual__dots) .pn-gl {
	height: calc(100% - 36px);
}

.pn-visual.is-live .pn-gl {
	visibility: visible;
}

.pn-visual.is-landing .pn-gl {
	animation: pn-land 0.32s ease-out both;
}

@keyframes pn-land {
	from {
		opacity: 0;
		transform: translateY(12%);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.pn-visual__dots {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	height: 36px;
}

.pn-visual__dot {
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.pn-visual__dot::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	margin: 10px auto;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--pn-chapter, var(--pn-accent));
}

.pn-visual__dot.is-on::before {
	background: var(--pn-chapter, var(--pn-accent));
	box-shadow: none;
}

.pn-stats {
	display: grid;
	gap: 8px;
	margin-top: 28px;
}

.pn-stat__value {
	font-family: var(--pn-display);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(3rem, 6vw, 5.5rem);
	line-height: 0.85;
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.pn-stat p {
	font-size: var(--pn-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 8px 0 0;
}

.pn-facts {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 4%;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	container-type: inline-size;
	container-name: pn-facts;
}

.pn-fact {
	flex: 0 0 22cqi;
	width: 22cqi;
	max-width: 22cqi;
	height: auto;
	margin: 0;
	padding: 0;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	background: none;
	color: var(--pn-ink);
	border: 0;
}

.pn-fact .pn-stat__value {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.04em;
	width: 100%;
	aspect-ratio: 1;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	border: 14cqi solid var(--pn-chapter, var(--pn-accent));
	background: #14120f;
	color: var(--pn-ink);
	font-size: 30cqi;
	line-height: 0.8;
}

.pn-fact__num {
	display: block;
}

.pn-fact__unit {
	display: block;
	font-family: var(--pn-body);
	font-style: normal;
	font-weight: 600;
	font-size: 0.32em;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: lowercase;
	color: var(--pn-chapter, var(--pn-accent));
}

.pn-product__extra .pn-stat__value {
	display: block;
	color: inherit;
	font-size: clamp(1.7rem, 4.2vw, 2.35rem);
	line-height: 0.85;
}

.pn-fact__label {
	display: block;
	width: 100%;
	max-width: none;
	margin-top: 0.45em;
	font-family: var(--pn-body);
	font-size: max(0.7rem, 16cqi);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.15;
	text-transform: none;
	text-wrap: balance;
	color: var(--pn-ink);
}

.pn-product__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	container-type: inline-size;
	container-name: pn-copy;
}

.pn-product__extra {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 10px;
	margin: 4px 0 0;
}

.pn-product__extra .pn-stat__value {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.pn-product__extra .pn-fact__label {
	max-width: none;
	margin-top: 0;
	font-size: var(--pn-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pn-content {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.pn-content > :not(.pn-product) {
	flex: 1 0 100%;
}

.pn-content .pn-product {
	flex: 1 0 calc(100% + (var(--pn-margin) * 2));
	margin-left: calc(var(--pn-margin) * -1);
	margin-right: calc(var(--pn-margin) * -1);
}

.pn-product {
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	display: block;
}

.pn-product__reel {
	min-height: 0;
}

.pn-product__stage {
	position: relative;
	isolation: isolate;
	min-height: 0;
	max-height: none;
	overflow: visible;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 16px;
	padding-top: 4vh;
	padding-bottom: 4vh;
	container-type: inline-size;
	container-name: pn-stage;
}

.pn-product__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(ellipse 58% 48% at 72% 46%, color-mix(in srgb, var(--pn-chapter, var(--pn-accent)) 34%, transparent), transparent 70%),
		radial-gradient(ellipse 42% 36% at 18% 78%, color-mix(in srgb, var(--pn-chapter, var(--pn-accent)) 18%, transparent), transparent 72%),
		radial-gradient(ellipse 28% 24% at 84% 16%, color-mix(in srgb, var(--pn-on, var(--pn-ink)) 8%, transparent), transparent 70%);
	background-size: 160% 160%;
	background-position: 18% 42%;
	animation: pn-field 18s ease-in-out infinite alternate;
}

.pn-product__stage > * {
	position: relative;
	z-index: 1;
}

@keyframes pn-field {
	to {
		background-position: 82% 58%;
	}
}

.pn-product__stage > .pn-visual::before,
.pn-product__stage > .pn-visual::after {
	content: "";
	position: absolute;
	left: 50%;
	pointer-events: none;
	z-index: 0;
}

.pn-product__stage > .pn-visual {
	container-type: size;
	container-name: pn-pack;
}

.pn-product__stage > .pn-visual::before {
	top: 50%;
	width: min(92cqw, 92cqb);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1.5px solid color-mix(in srgb, var(--pn-chapter, var(--pn-accent)) 70%, transparent);
}

.pn-product__stage > .pn-visual::after {
	bottom: 8%;
	width: min(78cqw, 92cqb);
	height: 18%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--pn-chapter, var(--pn-accent)) 46%, transparent), transparent 72%);
}

.pn-product__stage > .pn-visual > .pn-visual__img:first-of-type {
	position: relative;
	z-index: 1;
}

.pn-product__stage > .pn-visual.is-alt:not(.is-live):not(.is-pending) > .pn-visual__img + .pn-visual__img {
	position: relative;
	z-index: 1;
}

.pn-product__stage .pn-visual__img,
.pn-product__stage .pn-visual.is-alt:not(.is-live):not(.is-pending) > .pn-visual__img + .pn-visual__img {
	max-height: 42svh;
}

.pn-product__name,
.pn-product__format,
.pn-product__flavours,
.pn-product__warning {
	margin: 0;
}

.pn-product .pn-product__name {
	font-family: var(--pn-display);
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	font-size: max(1.6rem, 18cqi);
	line-height: 0.84;
	max-width: 100%;
	overflow-wrap: break-word;
}

.pn-product__format,
.pn-product__flavours {
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: var(--pn-label);
}

.pn-content,
.pn-form {
	padding-top: 8vh;
	padding-bottom: 8vh;
}

.pn-content:has(.pn-product) {
	padding-top: 0;
	padding-bottom: 0;
}

.pn-points {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pn-points a {
	color: var(--pn-gold);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
	font-size: var(--pn-label);
}

.pn-points {
	display: grid;
	gap: 16px 32px;
}

.pn-points li {
	position: relative;
	max-width: none;
	padding-left: 1.5em;
}

.pn-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.55em;
	height: 0.32em;
	border-left: 2px solid var(--pn-gold);
	border-bottom: 2px solid var(--pn-gold);
	transform: rotate(-45deg);
}

.pn-product {
	scroll-margin-top: var(--pn-bar);
}

.pn-content[data-animation="bands"] > h2,
.pn-content[data-animation="bands"] .wp-block-heading {
	margin-top: 0;
}

.pn-content table {
	width: min(100%, 720px);
	border-collapse: collapse;
	font-size: 1rem;
}

.pn-content td {
	border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent);
	padding: 12px 8px;
	vertical-align: top;
}

.pn-form form {
	display: grid;
	gap: 18px;
	max-width: 640px;
}

.pn-form .pn-enquiry-title {
	margin: 0 0 1rem;
}

.pn-form label,
.pn-form legend {
	display: grid;
	gap: 8px;
	font-size: var(--pn-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pn-form__group {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.pn-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
}

.pn-form .pn-form__choice,
body:not(.home) .pn-form .pn-form__choice {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	width: auto;
	margin: 0;
	letter-spacing: 0.04em;
	text-transform: none;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
}

.pn-form .pn-form__choice input,
body:not(.home) .pn-form .pn-form__choice input {
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
	accent-color: var(--pn-accent);
}

.pn-form input,
.pn-form textarea {
	font: 500 1.05rem/1.4 var(--pn-body);
	color: var(--pn-ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	padding: 10px 0;
	width: 100%;
}

.pn-form label.pn-form__field--contact {
	display: none;
}

.pn-form label.pn-form__field--contact.is-active {
	display: grid;
}

.pn-form__error {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pn-accent, #c8102e);
}

.pn-form .is-invalid input,
.pn-form .is-invalid textarea {
	border-bottom-color: var(--pn-accent, #c8102e);
}

.pn-company {
	position: absolute;
	left: -9999px;
}

.pn-enquiry-done {
	display: none;
	gap: 16px;
	margin-bottom: 1rem;
}

.pn-enquiry-success {
	margin: 0;
}

.pn-enquiry-again {
	justify-self: start;
	cursor: pointer;
}

body.pn-enquiry-sent .pn-enquiry-done {
	display: grid;
}

body.pn-enquiry-sent .pn-enquiry {
	display: none;
}

.pn-enquiry-fail {
	display: none;
	margin: 0 0 1rem;
	color: var(--pn-accent, #c8102e);
}

body.pn-enquiry-failed .pn-enquiry-fail {
	display: block;
}

.pn-footer {
	background: #14120f;
	color: var(--pn-ink);
}

.pn-footer__main {
	display: grid;
	gap: 40px;
	padding: 56px var(--pn-margin) 48px;
}

.pn-footer a {
	color: inherit;
	text-decoration: none;
}

.pn-footer a:hover {
	color: var(--pn-gold);
}

.pn-footer .pn-logo img {
	height: 64px;
	width: auto;
}

.pn-footer__intro {
	max-width: 32ch;
	margin: 18px 0 0;
	font-size: 1.05rem;
	line-height: 1.5;
}

.pn-footer__social {
	display: flex;
	gap: 10px;
	margin-top: 22px;
}

.pn-footer__social a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--pn-accent);
	color: var(--pn-ink);
	transition: background-color 0.2s ease;
}

.pn-footer__social a:hover {
	background: var(--pn-gold);
	color: var(--pn-bg);
}

.pn-footer__social svg {
	width: 20px;
	height: 20px;
}

.pn-footer__col h2 {
	margin: 0 0 16px;
	font-family: var(--pn-display);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.45rem, 1.8vw, 1.85rem);
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.pn-footer__list,
.pn-footer__menu {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pn-footer__list {
	font-size: 1.05rem;
	line-height: 1.45;
}

.pn-footer__list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.pn-footer__list .pn-icon,
.pn-footer__pin {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 0.22em;
	color: var(--pn-gold);
}

.pn-footer a.pn-footer__mail {
	color: var(--pn-accent);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.3;
}

.pn-footer a.pn-footer__mail:hover {
	color: var(--pn-gold);
}

.pn-footer__menu a {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pn-footer__menu .current-menu-item > a,
.pn-footer__menu .current_page_item > a,
.pn-footer__menu a[aria-current="page"] {
	color: var(--pn-gold);
}

.pn-footer__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 24px;
	padding: 16px var(--pn-margin);
	background-color: #08090b;
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, var(--pn-gold) 22%, transparent),
		transparent 70%
	);
	border-top: 1px solid color-mix(in srgb, var(--pn-gold) 70%, transparent);
	color: #f4f1ea;
	font-size: 0.92rem;
}

.pn-footer__bar p {
	margin: 0;
}

.pn-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 18px;
}

@media (prefers-reduced-motion: reduce) {
	.pn-footer__social a {
		transition: none;
	}
}

@media (min-width: 768px) {
	.pn-footer__main {
		grid-template-columns: 1fr 1fr;
		gap: 48px 40px;
	}
}

@media (min-width: 1024px) {
	.pn-footer__main {
		grid-template-columns: minmax(14rem, 1.3fr) minmax(12rem, 1fr) minmax(13rem, 1.05fr) minmax(9rem, 0.75fr);
		align-items: start;
		gap: 32px 40px;
		padding-top: 72px;
		padding-bottom: 64px;
	}
}

@media (min-width: 1536px) {
	.pn-footer__main {
		gap: 40px 64px;
	}
}

@media (max-width: 767px) {
	.pn-header {
		flex-wrap: nowrap;
		align-items: center;
	}

	.pn-menu__button {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--pn-gold);
		cursor: pointer;
	}

	.pn-menu__button:focus-visible {
		outline: 2px solid var(--pn-gold);
		outline-offset: 3px;
	}

	.pn-menu__icon,
	.pn-menu__icon::before,
	.pn-menu__icon::after {
		display: block;
		width: 22px;
		height: 2px;
		background: var(--pn-gold);
		transition: transform 0.25s ease, top 0.25s ease, background-color 0.25s ease;
	}

	.pn-menu__icon {
		position: relative;
	}

	.pn-menu__icon::before,
	.pn-menu__icon::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.pn-menu__icon::before {
		top: -7px;
	}

	.pn-menu__icon::after {
		top: 7px;
	}

	.pn-menu[open] .pn-menu__name {
		display: none;
	}

	.pn-menu[open] .pn-menu__name--close {
		display: inline;
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.pn-menu[open] .pn-menu__icon {
		background: transparent;
	}

	.pn-menu[open] .pn-menu__icon::before {
		top: 0;
		transform: rotate(45deg);
	}

	.pn-menu[open] .pn-menu__icon::after {
		top: 0;
		transform: rotate(-45deg);
	}

	.pn-menu[open] .pn-nav {
		position: fixed;
		z-index: 4;
		top: var(--pn-bar);
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: flex-start;
		padding: 6vh var(--pn-margin) 8vh;
		background: var(--pn-bg);
		overflow: auto;
	}

	.pn-menu[open] .pn-nav__list {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 0.12em;
		width: 100%;
	}

	.pn-menu[open] .pn-nav__list a {
		font-family: var(--pn-display);
		font-style: italic;
		font-weight: 700;
		font-size: clamp(2.5rem, 11vw, 4.4rem);
		letter-spacing: 0.01em;
		line-height: 0.95;
	}

	body:has(.pn-menu[open]) {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pn-menu__icon,
	.pn-menu__icon::before,
	.pn-menu__icon::after {
		transition: none;
	}
}
@media (min-width: 768px) {
	:root {
		--pn-bar: 84px;
	}

	.pn-header {
		--pn-bar: 84px;
	}

	.pn-scene[data-animation="seam"] {
		height: calc(100dvh - var(--pn-bar));
		min-height: calc(100dvh - var(--pn-bar));
		max-height: calc(100dvh - var(--pn-bar));
	}

	.pn-logo img {
		height: 56px;
	}

	.pn-menu:not([open])::details-content {
		content-visibility: visible;
		display: block;
	}

	.pn-menu:not([open]) > .pn-nav {
		display: block;
	}

	.pn-nav__list {
		flex-wrap: nowrap;
		align-items: center;
		gap: 0;
	}

	.pn-nav__list > li {
		display: flex;
		align-items: center;
	}

	.pn-nav__list > li + li::before {
		content: "|";
		color: var(--pn-gold);
		font-family: var(--pn-body);
		font-size: var(--pn-label);
		font-weight: 500;
		line-height: 1;
		padding: 0 0.4rem;
	}

	.pn-nav__list a {
		font-size: 0.68rem;
		letter-spacing: 0.08em;
		white-space: nowrap;
	}

	.pn-stats {
		grid-template-columns: 1fr 1fr;
	}

	.pn-product__stage .pn-visual__img,
	.pn-product__stage .pn-visual.is-alt:not(.is-live):not(.is-pending) > .pn-visual__img + .pn-visual__img {
		max-height: 48svh;
	}

}

@media (min-width: 1024px) {
	.pn-points {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.pn-nav__list > li + li::before {
		padding: 0 0.65rem;
	}

	.pn-nav__list a {
		font-size: var(--pn-label);
		letter-spacing: 0.14em;
	}

	.pn-split__stage {
		grid-template-columns: 7fr 5fr;
		align-items: center;
	}

	.pn-stats {
		grid-template-columns: repeat(3, 1fr);
		align-items: end;
	}

	.pn-stats .pn-stat:nth-child(2) {
		margin-top: 12vh;
	}

	.pn-stats .pn-stat:nth-child(3) {
		margin-top: 22vh;
	}

	.pn-product__stage {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		min-height: 64svh;
		column-gap: 4cqi;
		position: relative;
		height: auto;
		overflow: visible;
	}

	.pn-product__stage > .pn-product__copy {
		grid-column: 1;
		grid-row: 1;
		align-self: end;
	}

	.pn-split__stage > .pn-visual {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: stretch;
		min-height: 70svh;
		z-index: 1;
	}

	.pn-product__stage > .pn-visual {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: stretch;
		min-height: 46svh;
		z-index: 1;
	}

	.pn-product__stage > .pn-facts {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
		justify-content: flex-start;
		width: 100%;
		margin: 0.5rem 0 0;
		z-index: 1;
	}

	.pn-visual__img {
		max-height: 72svh;
	}

	.pn-visual.is-alt:not(.is-live):not(.is-pending) > .pn-visual__img + .pn-visual__img {
		max-height: 72svh;
	}

}

html:has(body.home) {
	scroll-snap-type: y mandatory;
}

@media (hover: none) and (pointer: coarse) {
	html:has(body.home) {
		scroll-snap-type: none;
	}
}

html.pn-snap-on,
html.pn-snap-on body {
	overscroll-behavior-y: none;
	touch-action: pan-x pinch-zoom;
}

html.pn-snap-on body.home .pn-scene[data-animation="seam"],
html.pn-snap-on .home .pn-product {
	height: var(--pn-frame, 100dvh);
	min-height: var(--pn-frame, 100dvh);
	max-height: var(--pn-frame, 100dvh);
}

html.pn-snap-on .home .pn-content:has(.pn-product) ~ .pn-content,
html.pn-snap-on .home .pn-footer {
	min-height: var(--pn-frame, 100dvh);
}

.home .pn-product {
	display: flex;
	flex-direction: column;
	height: 100svh;
	height: 100dvh;
	max-height: 100svh;
	max-height: 100dvh;
	overflow: hidden;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	scroll-margin-top: 0;
}

@media (max-width: 767px) {
	.pn-product {
		padding-left: 0;
		padding-right: 0;
	}

	.pn-product__copy,
	.pn-product__stage > .pn-facts {
		padding-left: max(16px, env(safe-area-inset-left));
		padding-right: max(16px, env(safe-area-inset-right));
	}
}

.home .pn-scene {
	scroll-snap-align: start;
	scroll-snap-stop: normal;
	scroll-margin-top: 0;
}

.home .pn-content:has(.pn-product) ~ .pn-content {
	scroll-snap-align: start;
	scroll-snap-stop: normal;
	scroll-margin-top: 0;
}

.home .pn-footer {
	scroll-snap-align: end;
	scroll-snap-stop: normal;
}

.home .pn-product__reel {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.home .pn-product__stage {
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto minmax(10rem, 1fr) auto;
	align-content: stretch;
}

.home .pn-product__stage > .pn-visual {
	grid-row: 2;
	min-height: 10rem;
	height: 100%;
	overflow: hidden;
}

.home .pn-product__stage .pn-visual.is-live,
.home .pn-product__stage .pn-visual.is-pending {
	min-height: 0;
	height: 100%;
}

.home .pn-product__stage .pn-visual__img,
.home .pn-product__stage .pn-visual.is-alt:not(.is-live):not(.is-pending) > .pn-visual__img + .pn-visual__img {
	max-height: 100%;
	height: 100%;
	width: auto;
	object-fit: contain;
}

.home .pn-product__stage > .pn-visual:has(.pn-visual__dots) .pn-visual__img,
.home .pn-product__stage > .pn-visual:has(.pn-visual__dots) .pn-visual.is-alt:not(.is-live):not(.is-pending) > .pn-visual__img + .pn-visual__img {
	height: calc(100% - 2rem);
	max-height: calc(100% - 2rem);
}

.pn-product__stage > .pn-visual.is-live > .pn-visual__img,
.pn-product__stage > .pn-visual.is-pending > .pn-visual__img,
.home .pn-product__stage .pn-visual.is-live .pn-visual__img,
.home .pn-product__stage .pn-visual.is-pending .pn-visual__img {
	position: absolute;
	width: 1px;
	height: 1px;
	max-height: none;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	z-index: 0;
}

.home .pn-product .pn-product__name {
	font-size: max(1.6rem, 18cqi);
}

@media (min-width: 1024px) {
	.home .pn-product__stage {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
		align-content: center;
	}

	.home .pn-product__stage > .pn-product__copy {
		grid-column: 1;
		grid-row: 1;
		align-self: end;
	}

	.home .pn-product__stage > .pn-facts {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
	}

	.home .pn-product__stage > .pn-visual {
		grid-column: 2;
		grid-row: 1 / -1;
		min-height: 0;
		height: 100%;
		align-self: center;
	}
}

@media (min-width: 1280px) {
	:root {
		--pn-margin: 64px;
	}
}

@media (min-width: 1536px) {
	:root {
		--pn-margin: 80px;
		--pn-step-1: 8.4rem;
	}

	.pn-scene h1 {
		max-width: 14ch;
	}
}

.home .pn-content:has(.pn-product) ~ .pn-content:nth-of-type(odd) {
	background: #14120f;
}

.home .pn-content:has(.pn-product) ~ .pn-content:nth-of-type(even) {
	background: var(--pn-accent);
	color: var(--pn-ink);
}

.pn-product > :not(.pn-product__reel) {
	padding-top: 8vh;
	padding-bottom: 8vh;
}

@media (hover: hover) and (min-width: 1024px) {
	.wp-block-button__link,
	.pn-product__format,
	.pn-product__flavours {
		transition: transform 0.35s ease;
	}

	.pn-nav__list a {
		transition: color 0.35s ease;
	}

	.wp-block-button__link:hover {
		transform: translateY(-4px);
	}

	.pn-nav__list a:hover {
		color: var(--pn-gold);
	}

	.pn-product__format:hover,
	.pn-product__flavours:hover {
		transform: rotate(-1.5deg);
	}
}

.pn-sheen {
	background-image: linear-gradient(105deg, currentColor 38%, #fff 50%, currentColor 62%);
	background-size: 220% 100%;
	background-position: 120% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: pn-sheen 1.1s ease forwards;
}

@keyframes pn-sheen {
	to {
		background-position: -30% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
		scroll-snap-type: none;
	}

	.home .pn-product {
		height: auto;
		max-height: none;
		overflow: visible;
		scroll-snap-align: none;
	}

	.pn-scene .pn-strip__line {
		animation: none;
		width: 100%;
		padding-left: var(--pn-margin);
	}

	.pn-scene__video {
		display: none;
	}

	.pn-strip__run[aria-hidden="true"] {
		display: none;
	}

	.pn-sheen {
		background: none;
		-webkit-text-fill-color: currentColor;
		animation: none;
	}

	.pn-product__stage::before {
		animation: none;
	}

	.pn-visual.is-landing .pn-gl {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.pn-split:has(.pn-visual),
	.pn-product__reel:has(.pn-visual) {
		min-height: 0;
	}

	.pn-split__stage,
	.pn-product__stage {
		position: static;
		height: auto;
		max-height: none;
		overflow: visible;
	}

	.pn-product__stage {
		max-height: none;
		overflow: visible;
	}

	.pn-visual__img,
	.pn-visual.is-alt:not(.is-live):not(.is-pending) > .pn-visual__img + .pn-visual__img {
		max-height: 30svh;
	}

	.pn-product__stage .pn-visual__img,
	.pn-product__stage .pn-visual.is-alt:not(.is-live):not(.is-pending) > .pn-visual__img + .pn-visual__img {
		max-height: 42svh;
	}
}

/* Inner pages. Home rules above are left as they are.
   Every section spans the viewport and lines up with the header logo (--pn-margin).
   Roles: page hero (first section), two-track rows (heading left, copy right from 1024px),
   card grids, Q&A lists with a rule per question, the product stage, and white contact boxes.
   Hero class, copy, answer, card, and group wrappers are added at render time. */

body:not(.home) {
	--pn-bg: #f4f1ea;
	--pn-ink: #14120f;
	--pn-on: #14120f;
	--pn-measure: 68ch;
	--pn-rule: rgba(20, 18, 15, 0.14);
	--pn-gap: clamp(20px, 3vw, 56px);
	--pn-section: clamp(2.25rem, 4.5vw, 4rem);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	background: #f4f1ea;
	color: #14120f;
	overflow-x: clip;
}

body:not(.home) > main {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	min-width: 0;
}

body:not(.home) > .pn-footer {
	flex-shrink: 0;
}

body:not(.home) .pn-header {
	--pn-bg: #08090b;
	--pn-ink: #f4f1ea;
	background: #08090b;
	color: #f4f1ea;
}

body:not(.home) .pn-footer {
	--pn-ink: #f4f1ea;
	color: #f4f1ea;
}

/* Frame */

body:not(.home) main :is(.pn-scene, .pn-content, .pn-product, .pn-split, .pn-contact, .pn-range, .pn-group) {
	position: relative;
	width: 100%;
	max-width: none;
	height: auto;
	min-height: 0;
	max-height: none;
	margin: 0;
	padding-left: var(--pn-margin);
	padding-right: var(--pn-margin);
	background: #f4f1ea;
	color: #14120f;
}

body:not(.home) main :is(.pn-scene, .pn-content) {
	display: block;
	padding-top: var(--pn-section);
	padding-bottom: var(--pn-section);
}

body:not(.home) main .pn-group :is(.pn-content, .pn-scene) {
	padding-left: 0;
	padding-right: 0;
}

/* A rule between consecutive rows, inset to the frame */

body:not(.home) main .pn-content:has(> .pn-copy) + .pn-content:has(> .pn-copy)::before,
body:not(.home) main .pn-content:has(> .pn-copy) + .pn-group--qa::before,
body:not(.home) main .pn-scene[data-animation="chapter"]:not([style*="--pn-chapter"]) + .pn-scene[data-animation="chapter"]:not([style*="--pn-chapter"])::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--pn-margin);
	right: var(--pn-margin);
	border-top: 1px solid var(--pn-rule);
}

/* Type */

body:not(.home) main h1 {
	font-size: clamp(2.3rem, 5vw, 4.4rem);
	line-height: 0.94;
	max-width: 24ch;
	margin: 0 0 1rem;
	text-wrap: balance;
	overflow-wrap: normal;
}

body:not(.home) main :is(.pn-content, .pn-split, .pn-scene) h2:not(.pn-office__name) {
	font-size: clamp(1.6rem, 2.4vw, 2.3rem);
	line-height: 1.02;
	max-width: 30ch;
	margin: 2rem 0 0.75rem;
	text-wrap: balance;
	overflow-wrap: normal;
}

body:not(.home) main :is(.pn-content, .pn-scene, .pn-split__copy, .pn-copy, .pn-band__copy) > :is(h1, h2, h3):first-child {
	margin-top: 0;
}

body:not(.home) main :is(.pn-content, .pn-scene, .pn-split, .pn-product, .pn-form) h3 {
	font-family: var(--pn-body);
	font-style: normal;
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	max-width: var(--pn-measure);
	margin: 1.5rem 0 0.5rem;
	text-wrap: balance;
}

body:not(.home) main :is(.pn-content, .pn-scene, .pn-split, .pn-product__rest) p,
body:not(.home) main .pn-form > p {
	max-width: var(--pn-measure);
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	line-height: 1.6;
}

body:not(.home) main :is(.pn-content, .pn-copy, .pn-band__copy, .pn-answer, .pn-product__rest, .pn-split__copy) > :last-child {
	margin-bottom: 0;
}

body:not(.home) main :is(.pn-content, .pn-scene, .pn-split, .pn-product__rest) a:not(.wp-block-button__link) {
	color: var(--pn-accent);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

body:not(.home) main .wp-block-buttons {
	margin-top: 1.5rem;
}

body:not(.home) .wp-block-button__link,
body:not(.home) .pn-form button {
	background: var(--pn-accent);
	color: #f4f1ea;
}

/* Bullets: a red tick, matching the home point marks */

body:not(.home) main :is(.pn-content, .pn-scene, .pn-split, .pn-product__rest) ul:not([class*="pn-"]) {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	max-width: var(--pn-measure);
}

body:not(.home) main :is(.pn-content, .pn-scene, .pn-split, .pn-product__rest) ul:not([class*="pn-"]) > li {
	position: relative;
	max-width: none;
	margin: 0.55rem 0;
	padding-left: 1.75rem;
	line-height: 1.55;
}

body:not(.home) main :is(.pn-content, .pn-scene, .pn-split, .pn-product__rest) ul:not([class*="pn-"]) > li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0.42em;
	width: 0.6em;
	height: 0.34em;
	border-left: 2px solid var(--pn-accent);
	border-bottom: 2px solid var(--pn-accent);
	transform: rotate(-45deg);
}

body:not(.home) main :is(.pn-content, .pn-scene, .pn-split, .pn-product__rest) ol {
	margin: 0 0 1.25rem;
	padding-left: 1.5rem;
	max-width: var(--pn-measure);
}

body:not(.home) main :is(.pn-content, .pn-scene, .pn-split, .pn-product__rest) ol > li {
	margin: 0.55rem 0;
	padding-left: 0.35rem;
}

body:not(.home) main :is(.pn-content, .pn-scene, .pn-split, .pn-product__rest) ol > li::marker {
	color: var(--pn-accent);
	font-weight: 600;
}

/* Breadcrumb (Rank Math) */

body:not(.home) .pn-crumbs {
	padding: 1.1rem var(--pn-margin) 0;
	background: #08090b;
	color: rgba(244, 241, 234, 0.6);
	font-family: var(--pn-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.03em;
}

body:not(.home) .pn-crumbs nav,
body:not(.home) .pn-crumbs p {
	margin: 0;
}

body:not(.home) .pn-crumbs p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.5rem;
}

body:not(.home) .pn-crumbs a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: #f4f1ea;
	text-decoration: none;
}

body:not(.home) .pn-crumbs a:hover,
body:not(.home) .pn-crumbs a:focus-visible {
	color: var(--pn-gold);
}

body:not(.home) .pn-crumbs p > a:first-child::before {
	content: "";
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11.5h3V21h5.5v-6h3v6H19v-9.5h3z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11.5h3V21h5.5v-6h3v6H19v-9.5h3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body:not(.home) .pn-crumbs .separator {
	color: var(--pn-gold);
}

body:not(.home) .pn-crumbs .last {
	overflow: hidden;
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Page hero: the first section, on the header's black */

body:not(.home) main .pn-hero {
	--pn-ink: #f4f1ea;
	--pn-on: #f4f1ea;
	padding-top: clamp(1.75rem, 4vw, 3.25rem);
	padding-bottom: clamp(2.5rem, 5.5vw, 4.75rem);
	background: #08090b;
	color: #f4f1ea;
}

body:not(.home) main .pn-hero p {
	max-width: 60ch;
	color: rgba(244, 241, 234, 0.84);
	font-size: clamp(1.0625rem, 1.3vw, 1.2rem);
}

body:not(.home) main .pn-hero a:not(.wp-block-button__link) {
	color: #f4f1ea;
}

body:not(.home) main .pn-hero::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--pn-accent);
}

body:not(.home) main .pn-product.pn-hero::after {
	content: none;
}

body:not(.home) main .pn-hero[data-animation="announce"] {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(18rem, 52vh, 34rem);
}

body:not(.home) main .pn-hero[data-animation="announce"] h1 {
	font-size: clamp(3rem, 10vw, 8.5rem);
	line-height: 0.86;
	max-width: 12ch;
	margin: 0;
}

/* Two-track rows */

@media (min-width: 1024px) {
	body:not(.home) main .pn-content:has(> .pn-copy),
	body:not(.home) main .pn-scene[data-animation="chapter"]:has(> .pn-band__copy):not(:has(h1)),
	body:not(.home) main .pn-group--qa {
		display: grid;
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		column-gap: var(--pn-gap);
		align-items: start;
	}

	body:not(.home) main .pn-content:has(> .pn-copy) > h2:first-child {
		grid-column: 1;
		position: sticky;
		top: calc(var(--pn-bar) + 1.5rem);
		margin: 0;
	}

	body:not(.home) main :is(.pn-copy, .pn-band__copy) {
		grid-column: 2;
		min-width: 0;
	}

	body:not(.home) main .pn-group--qa > .pn-group__head {
		grid-column: 1;
		position: sticky;
		top: calc(var(--pn-bar) + 1.5rem);
	}

	body:not(.home) main .pn-group--qa > .pn-group__list {
		grid-column: 2;
	}
}

/* Verb bands (PLAN, REPLACE, ELEVATE) */

body:not(.home) main .pn-scene[data-animation="chapter"]:not(:has(h1)) {
	align-items: center;
}

body:not(.home) main .pn-scene[data-animation="chapter"]:not(:has(h1)) > h2 {
	grid-column: 1;
	font-size: clamp(2.75rem, 6vw, 5.75rem);
	line-height: 0.88;
	max-width: none;
	margin: 0 0 1rem;
	white-space: nowrap;
}

body:not(.home) main .pn-scene[data-animation="chapter"]:not(:has(h1)) .pn-band__copy p {
	max-width: 46ch;
	font-size: clamp(1.1rem, 1.5vw, 1.35rem);
	line-height: 1.5;
}

@media (min-width: 1024px) {
	body:not(.home) main .pn-scene[data-animation="chapter"]:not(:has(h1)) > h2 {
		margin: 0;
	}
}

body:not(.home) main .pn-scene[data-animation="chapter"][style*="--pn-chapter"]:not(.pn-hero) {
	background: var(--pn-chapter);
	color: var(--pn-on);
}

body:not(.home) main .pn-scene[data-animation="chapter"][style*="--pn-chapter"]:not(.pn-hero) a:not(.wp-block-button__link) {
	color: inherit;
}

body:not(.home) main .pn-scene[data-animation="chapter"][style*="--pn-chapter"]:not(.pn-hero) .wp-block-button__link {
	background: var(--pn-on);
	color: var(--pn-chapter);
}

/* Card grid */

body:not(.home) main .pn-group--cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 16px;
	padding-top: 0;
	padding-bottom: var(--pn-section);
}

body:not(.home) main .pn-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 14px;
	margin: 1.75rem 0 0;
}

body:not(.home) main :is(.pn-group--cards, .pn-cards) > .pn-card {
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 28px) clamp(22px, 2.4vw, 32px);
	background: #fff;
	border-top: 4px solid var(--pn-accent);
}

body:not(.home) main .pn-card h3 {
	font-family: var(--pn-display);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.45rem, 1.9vw, 1.75rem);
	line-height: 0.98;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
}

body:not(.home) main .pn-card p {
	font-size: 1rem;
	line-height: 1.55;
}

body:not(.home) main .pn-card > :last-child {
	margin-bottom: 0;
}

/* Q&A list: one rule per question */

body:not(.home) main .pn-group--qa {
	padding-top: var(--pn-section);
	padding-bottom: var(--pn-section);
}

body:not(.home) main .pn-group__head .pn-content {
	display: block;
	padding: 0 0 1.25rem;
	background: none;
}

body:not(.home) main .pn-group__head h2 {
	margin: 0 0 0.75rem;
}

body:not(.home) main .pn-group__head :is(.pn-copy, p) {
	max-width: 40ch;
}

body:not(.home) main :is(.pn-group__list, .pn-qas) {
	min-width: 0;
	border-top: 1px solid var(--pn-rule);
}

body:not(.home) main .pn-qas {
	margin-top: 1.75rem;
}

body:not(.home) main :is(.pn-group__list, .pn-qas) > .pn-qa {
	display: block;
	padding: 1.35rem 0 1.4rem;
	background: none;
	border-bottom: 1px solid var(--pn-rule);
}

body:not(.home) main .pn-qa > h3 {
	position: relative;
	max-width: none;
	margin: 0;
	padding-left: 1.75rem;
	font-size: 1.15rem;
}

body:not(.home) main .pn-qa > h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.32em;
	width: 0.7em;
	height: 0.7em;
	background: var(--pn-accent);
}

body:not(.home) main .pn-answer {
	min-width: 0;
	margin-top: 0.6rem;
	padding-left: 1.75rem;
}

body:not(.home) main .pn-answer p {
	color: rgba(20, 18, 15, 0.82);
}

body:not(.home) #pn-faq {
	scroll-margin-top: calc(var(--pn-bar) + 1rem);
}

/* Tables */

body:not(.home) .pn-table {
	width: 100%;
	max-width: 100%;
	margin: 0 0 1rem;
	overflow-x: auto;
	background: #fff;
	border-top: 4px solid var(--pn-accent);
}

body:not(.home) .pn-table table,
body:not(.home) main .pn-content table {
	width: 100%;
	min-width: 32rem;
	border-collapse: collapse;
	font-size: 1rem;
}

body:not(.home) main .pn-content table :is(th, td) {
	padding: 13px 18px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--pn-rule);
}

body:not(.home) main .pn-content table th,
body:not(.home) main .pn-content table tr:first-child td {
	font-weight: 600;
	background: #14120f;
	color: #f4f1ea;
}

body:not(.home) main .pn-content table tr:last-child td {
	border-bottom: 0;
}

/* Guide split (text with pack image) */

body:not(.home) main .pn-split {
	padding-top: var(--pn-section);
	padding-bottom: var(--pn-section);
}

body:not(.home) main .pn-split__stage {
	min-height: 0;
	height: auto;
	max-height: none;
	padding: 0;
	align-items: center;
	gap: var(--pn-gap);
}

body:not(.home) main .pn-split__stage > .pn-visual {
	min-height: min(24rem, 70vw);
	height: auto;
	align-self: center;
	padding: clamp(16px, 2vw, 28px);
	background: #fff;
}

body:not(.home) main .pn-split .pn-visual__img,
body:not(.home) main .pn-split .pn-visual.is-alt:not(.is-live):not(.is-pending) > .pn-visual__img + .pn-visual__img {
	max-height: min(22rem, 64vw);
}

/* Product Meet: name, pack, figures, Where to Buy (stacked only) */

@media (max-width: 1023px) {
	.single-pn_product main .pn-hero.pn-split .pn-split__stage {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--pn-gap);
	}

	.single-pn_product main .pn-hero.pn-split .pn-split__copy {
		display: contents;
	}

	.single-pn_product main .pn-hero.pn-split .pn-split__copy > :is(h1, h2) {
		order: 1;
	}

	.single-pn_product main .pn-hero.pn-split .pn-split__stage > .pn-visual {
		order: 2;
	}

	.single-pn_product main .pn-hero.pn-split .pn-split__copy > ul {
		order: 3;
	}

	.single-pn_product main .pn-hero.pn-split .pn-split__copy > .wp-block-buttons {
		order: 4;
	}
}

/* Product stage, as the hero on black */

body:not(.home) main .pn-product {
	padding-top: 0;
	padding-bottom: 0;
	overflow: visible;
}

body:not(.home) main .pn-product__stage {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-rows: auto;
	align-items: center;
	gap: 28px var(--pn-gap);
	min-height: 0;
	height: auto;
	max-height: none;
	padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4.25rem);
	overflow: visible;
}

body:not(.home) main .pn-product__stage::before,
body:not(.home) main .pn-product__stage > .pn-visual::before,
body:not(.home) main .pn-product__stage > .pn-visual::after {
	content: none;
	animation: none;
	background: none;
	border: 0;
}

body:not(.home) main .pn-product__stage > .pn-visual {
	grid-column: 1;
	grid-row: 1;
	min-height: min(26rem, 70vw);
	height: auto;
	align-self: center;
}

body:not(.home) main .pn-product__stage > .pn-product__copy {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	min-width: 0;
	padding: 0;
}

body:not(.home) main .pn-product__rest {
	order: -1;
	width: 100%;
}

body:not(.home) main .pn-product__stage > .pn-facts,
body:not(.home) main .pn-facts {
	grid-column: 1 / -1;
	grid-row: 2;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px 24px;
	width: 100%;
	margin: 0;
	padding: clamp(1.25rem, 2.5vw, 2rem) 0 0;
	border-top: 1px solid rgba(244, 241, 234, 0.14);
	justify-content: start;
}

body:not(.home) main .pn-fact {
	width: 100%;
	max-width: 9.5rem;
	flex: none;
}

body:not(.home) main .pn-fact .pn-stat__value {
	border: 8px solid var(--pn-chapter, var(--pn-accent));
	background: #14120f;
	color: #f4f1ea;
	font-size: clamp(1.35rem, 4vw, 1.85rem);
}

body:not(.home) main .pn-visual.is-pending,
body:not(.home) main .pn-visual.is-live {
	min-height: min(26rem, 70vw);
}

body:not(.home) main .pn-product__stage .pn-visual__img,
body:not(.home) main .pn-product__stage .pn-visual.is-alt:not(.is-live):not(.is-pending) > .pn-visual__img + .pn-visual__img {
	max-height: min(26rem, 70vw);
}

/* Contact boxes */

body:not(.home) main .pn-contact {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(16px, 2vw, 28px);
	align-items: stretch;
	padding-top: var(--pn-section);
	padding-bottom: var(--pn-section);
}

body:not(.home) main :is(.pn-office, .pn-form) {
	min-width: 0;
	margin: 0;
	padding: clamp(22px, 2.6vw, 36px);
	background: #fff;
	border: 0;
	border-top: 4px solid var(--pn-accent);
}

body:not(.home) main .pn-office {
	display: flex;
	flex-direction: column;
}

body:not(.home) .pn-office__name {
	font-family: var(--pn-display);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.75rem, 2.6vw, 2.6rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	max-width: none;
	text-wrap: balance;
	margin: 0 0 1.25rem;
}

body:not(.home) .pn-office__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.02rem;
}

body:not(.home) .pn-office__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin: 0;
	padding: 0.85rem 0;
	border-top: 1px solid var(--pn-rule);
	line-height: 1.45;
}

body:not(.home) .pn-office__list li:last-child {
	border-bottom: 1px solid var(--pn-rule);
}

body:not(.home) .pn-office .pn-icon {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 0.1em;
	color: var(--pn-accent);
}

body:not(.home) .pn-office__list a {
	min-width: 0;
	color: inherit;
	font-weight: 400;
	text-decoration: underline;
	text-decoration-color: var(--pn-rule);
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}

body:not(.home) .pn-office__list a:hover {
	color: var(--pn-accent);
	text-decoration-color: currentColor;
}

body:not(.home) .pn-office__map {
	display: block;
	flex: 1 1 240px;
	width: 100%;
	height: auto;
	min-height: 240px;
	margin-top: 1.5rem;
	border: 0;
}

body:not(.home) .pn-form label:not(.pn-form__choice) {
	gap: 6px;
	margin: 0;
}

body:not(.home) .pn-form label:not(.pn-form__choice):not(.pn-form__field--contact) {
	display: grid;
}

body:not(.home) .pn-form .pn-form__choice {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

/* Product index */

body:not(.home) main .pn-range {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 44px;
	align-items: center;
	column-gap: 12px;
	padding-top: var(--pn-section);
	padding-bottom: var(--pn-section);
}

body:not(.home) .pn-range__track {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	gap: 20px;
	min-width: 0;
	margin: 0;
	padding: 0 0 8px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

body:not(.home) .pn-range__track::-webkit-scrollbar {
	display: none;
}

body:not(.home) .pn-range__track > li {
	flex: 0 0 calc((100% - 60px) / 4);
	scroll-snap-align: start;
}

body:not(.home) .pn-range__card {
	display: grid;
	gap: 16px;
	min-height: 100%;
	padding: 18px 18px 22px;
	background: #14120f;
	border-top: 4px solid var(--pn-accent);
	color: #f4f1ea;
	text-decoration: none;
}

body:not(.home) .pn-range__card img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	background: #14120f;
}

body:not(.home) .pn-range__name {
	font-family: var(--pn-display);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.4rem, 2vw, 1.8rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: #f4f1ea;
}

body:not(.home) .pn-range__prev,
body:not(.home) .pn-range__next {
	position: static;
	z-index: 1;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 0;
	background: var(--pn-accent);
	color: #f4f1ea;
	cursor: pointer;
}

body:not(.home) .pn-range__prev {
	grid-column: 1;
	grid-row: 1;
}

body:not(.home) .pn-range__next {
	grid-column: 3;
	grid-row: 1;
}

body:not(.home) .pn-range__prev span,
body:not(.home) .pn-range__next span {
	display: block;
	width: 10px;
	height: 10px;
	margin: auto;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

body:not(.home) .pn-range__prev span {
	transform: rotate(-135deg);
}

body:not(.home) .pn-range__next span {
	transform: rotate(45deg);
}

@media (max-width: 1279px) {
	body:not(.home) .pn-range__track > li {
		flex-basis: calc((100% - 40px) / 3);
	}
}

@media (max-width: 1023px) {
	body:not(.home) .pn-range__track > li {
		flex-basis: calc((100% - 20px) / 2);
	}
}

/* Mobile: one column, tighter rhythm */

@media (max-width: 767px) {
	body:not(.home) {
		--pn-section: 2rem;
	}

	body:not(.home) main h1 {
		font-size: clamp(2.1rem, 9.5vw, 2.75rem);
		margin-bottom: 0.75rem;
	}

	body:not(.home) main :is(.pn-content, .pn-split, .pn-scene) h2:not(.pn-office__name) {
		font-size: clamp(1.45rem, 6.4vw, 1.8rem);
		margin-top: 1.5rem;
	}

	body:not(.home) main :is(.pn-content, .pn-scene, .pn-split, .pn-product__rest) p {
		font-size: 1rem;
		line-height: 1.55;
	}

	body:not(.home) .pn-crumbs {
		padding-top: 0.85rem;
		font-size: 0.75rem;
	}

	body:not(.home) main .pn-hero {
		padding-top: 1.25rem;
		padding-bottom: 2rem;
	}

	body:not(.home) main .pn-hero::after {
		margin-top: 1.5rem;
	}

	body:not(.home) main .pn-hero[data-animation="announce"] {
		min-height: clamp(16rem, 48vh, 24rem);
	}

	body:not(.home) main .pn-hero[data-animation="announce"] h1 {
		font-size: clamp(2.9rem, 15vw, 4.25rem);
	}

	body:not(.home) main .pn-scene[data-animation="chapter"]:not(:has(h1)) > h2 {
		font-size: clamp(2.6rem, 13vw, 3.75rem);
	}

	body:not(.home) main :is(.pn-group--cards, .pn-cards) {
		gap: 12px;
	}

	body:not(.home) main :is(.pn-group__list, .pn-qas) > .pn-qa {
		padding: 1.1rem 0 1.15rem;
	}

	body:not(.home) main .pn-qa > h3 {
		font-size: 1.05rem;
		padding-left: 1.5rem;
	}

	body:not(.home) main .pn-answer {
		padding-left: 1.5rem;
	}

	body:not(.home) main .pn-product__stage,
	body:not(.home) main .pn-contact {
		grid-template-columns: minmax(0, 1fr);
	}

	body:not(.home) main .pn-product__stage > .pn-visual,
	body:not(.home) main .pn-product__stage > .pn-product__copy,
	body:not(.home) main .pn-product__stage > .pn-facts {
		grid-column: 1;
	}

	body:not(.home) main .pn-product__stage > .pn-visual {
		grid-row: 1;
		min-height: min(18rem, 72vw);
	}

	body:not(.home) main .pn-product__stage > .pn-product__copy {
		grid-row: 2;
	}

	body:not(.home) main .pn-product__stage > .pn-facts {
		grid-row: 3;
		grid-template-columns: 1fr 1fr;
		gap: 14px 16px;
	}

	body:not(.home) main .pn-product__stage .pn-visual__img,
	body:not(.home) main .pn-product__stage .pn-visual.is-alt:not(.is-live):not(.is-pending) > .pn-visual__img + .pn-visual__img,
	body:not(.home) main .pn-visual.is-pending,
	body:not(.home) main .pn-visual.is-live {
		max-height: min(18rem, 72vw);
		min-height: 0;
	}

	body:not(.home) main .pn-split__stage > .pn-visual {
		min-height: 0;
	}

	body:not(.home) main .pn-split .pn-visual__img,
	body:not(.home) main .pn-split .pn-visual.is-alt:not(.is-live):not(.is-pending) > .pn-visual__img + .pn-visual__img {
		max-height: min(16rem, 64vw);
	}

	body:not(.home) .pn-office__map {
		flex-basis: 200px;
		min-height: 200px;
	}

	body:not(.home) main .pn-content table :is(th, td) {
		padding: 11px 14px;
	}

	body:not(.home) main .pn-range {
		grid-template-columns: 40px minmax(0, 1fr) 40px;
		column-gap: 8px;
	}

	body:not(.home) .pn-range__prev,
	body:not(.home) .pn-range__next {
		width: 40px;
		height: 40px;
	}

	body:not(.home) .pn-range__track > li {
		flex-basis: 100%;
	}
}