/* ============================================================
   EVALD — botanical personal care
   Contemporary botanical luxury · scroll-driven story
   ============================================================ */

:root {
	/* palette — the aloe greens of the product creatives, matched to the
     §00 launch hero. Names are legacy tonal slots (ink = darkest,
     ivory = lightest paper, gold = the warm accent role); the values
     are a hue rotation of the original bronze set with lightness
     preserved, so every contrast relationship still holds. */
	--ink: #172210; /* deepest green-black — body text */
	--forest: #1e3312; /* deep forest — inverted panels */
	--moss: #3e6b2a; /* mid leaf green */
	--herb: #86a378; /* soft sage — muted text */
	--ivory: #e4f2dd;
	--ivory-2: #dfefd6;
	--sand: #bfdab0;
	--sand-deep: #a0c48c;
	--earth: #4b6b33;
	--clay: #7aa43f;
	--gold: #5aa334;
	--gold-deep: #427826;
	--gold-soft: #88ce64;
	--taupe: #a2af9a;

	/* dark-scene ink */
	--night: #0b1406;
	--night-2: #0d1807;

	--font-display: "Fraunces", "Georgia", serif;
	--font-sans: "Jost", "Avenir Next", "Helvetica Neue", sans-serif;

	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	--nav-h: 72px;
}

/* ---------- base ---------- */

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

html {
	scroll-behavior: smooth;
}
/* when the Lenis/GSAP motion engine boots it adds .has-motion;
   native smooth scrolling must not fight Lenis's per-frame writes */
html.has-motion {
	scroll-behavior: auto;
}

body {
	font-family: var(--font-display);
	font-weight: 340;
	font-optical-sizing: auto;
	color: var(--ink);
	background: var(--ivory);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg {
	display: block;
	max-width: 100%;
}
a {
	color: inherit;
}
button {
	font: inherit;
	color: inherit;
}

::selection {
	background: var(--gold-soft);
	color: var(--ink);
}

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 4px;
}

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

.svg-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ---------- shared type ---------- */

.eyebrow {
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gold-deep);
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 400;
	font-variation-settings:
		"SOFT" 55,
		"WONK" 0;
	line-height: 1.06;
	text-wrap: balance;
}

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

/* split-text word wrappers (added by JS).
   The clip window is padded past the line box (and the padding cancelled
   with negative margins) so descenders and italic overhangs never get
   shaved off — a bare overflow:hidden crops the tail of y/g/p. */
.w {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding: 0.04em 0.07em 0.16em 0.03em;
	margin: -0.04em -0.07em -0.16em -0.03em;
}
.w .wi {
	display: inline-block;
}

/* ---------- atmosphere ---------- */

.grain {
	position: fixed;
	inset: -50px;
	z-index: 96;
	pointer-events: none;
	opacity: 0.055;
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 240px 240px;
}

#dust {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	pointer-events: none;
	opacity: 0.55;
}

.progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 101;
}
#progressFill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft));
	transform: scaleX(0);
	transform-origin: left;
}

/* ---------- magnetic ---------- */

.magnetic {
	display: inline-flex;
}
.magnetic-inner {
	display: inline-block;
	will-change: transform;
}

/* ============================================================
   01 · HERO
   ============================================================ */

.scene {
	position: relative;
}

/* ============================================================
   02 · INTO NATURE
   ============================================================ */

.nature-pin {
	height: 100svh;
	display: grid;
	place-items: center;
	overflow: hidden;
	padding-top: var(--nav-h);
}

.nature-blob {
	grid-area: 1 / 1;
	place-self: center;
	width: min(76vw, 82svh);
	aspect-ratio: 1;
	border-radius: 44% 56% 58% 42% / 46% 41% 59% 54%;
	overflow: hidden;
	background: linear-gradient(158deg, #d1e9c6 0%, #badca9 58%, #a5cd90 100%);
	position: relative;
	will-change: transform, border-radius;
}
.nature-scene {
	position: absolute;
	inset: -12%;
}
.ns {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--s);
	rotate: var(--r);
	color: var(--c, var(--moss));
	opacity: 0.85;
}
.ns svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.nature-copy {
	grid-area: 1 / 1;
	place-self: center;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(14px, 2.6vh, 26px);
	text-align: center;
	padding-inline: 6vw;
}
.nature-title {
	font-size: clamp(2.4rem, 6vw, 5rem);
	color: var(--ink);
}
.nature-sub {
	font-style: italic;
	color: #4a5c44;
	font-size: clamp(0.95rem, 1.4vw, 1.1rem);
}

.nature-names {
	position: absolute;
	inset: 0;
	list-style: none;
	z-index: 6;
	pointer-events: none;
}
.nature-names li {
	position: absolute;
	font-family: var(--font-sans);
	font-size: clamp(0.6rem, 0.95vw, 0.8rem);
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--moss);
	white-space: nowrap;
}
.nature-names li::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gold);
	margin-right: 10px;
	vertical-align: 2px;
}
.nature-names li:nth-child(1) {
	left: 8%;
	top: 18%;
}
.nature-names li:nth-child(2) {
	left: 76%;
	top: 14%;
}
.nature-names li:nth-child(3) {
	left: 14%;
	top: 34%;
}
.nature-names li:nth-child(4) {
	left: 80%;
	top: 30%;
}
.nature-names li:nth-child(5) {
	left: 5%;
	top: 50%;
}
.nature-names li:nth-child(6) {
	left: 82%;
	top: 46%;
}
.nature-names li:nth-child(7) {
	left: 10%;
	top: 66%;
}
.nature-names li:nth-child(8) {
	left: 76%;
	top: 62%;
}
.nature-names li:nth-child(9) {
	left: 16%;
	top: 82%;
}
.nature-names li:nth-child(10) {
	left: 70%;
	top: 78%;
}
.nature-names li:nth-child(11) {
	left: 36%;
	top: 90%;
}
.nature-names li:nth-child(12) {
	left: 55%;
	top: 12%;
}
.nature-names li:nth-child(13) {
	left: 30%;
	top: 10%;
}
.nature-names li:nth-child(14) {
	left: 52%;
	top: 92%;
}

/* ============================================================
   03 · INGREDIENT JOURNEY (horizontal)
   ============================================================ */

/* static default: panels stack vertically and read without any JS.
   html.has-motion switches to the pinned horizontal track. */
.journey-pin {
	padding: 14vh 6vw;
}
.journey-track {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(4rem, 9vh, 7rem);
}
html.has-motion .journey-pin {
	height: 100svh;
	padding: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
}
html.has-motion .journey-track {
	flex-direction: row;
	align-items: center;
	gap: clamp(7rem, 16vw, 16rem);
	padding-inline: max(7vw, 44px) 16vw;
	will-change: transform;
}

.j-panel {
	flex: 0 0 auto;
	width: min(80vw, 960px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.j-panel--intro,
.j-panel--outro {
	display: block;
	width: min(72vw, 720px);
}
.j-intro-title {
	font-size: clamp(2.5rem, 5.4vw, 4.8rem);
	color: var(--ink);
	margin-top: 22px;
}
.j-intro-title em {
	font-style: italic;
	color: var(--gold-deep);
}
.j-intro-hint {
	margin-top: 30px;
	font-family: var(--font-sans);
	font-size: 0.72rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--herb);
}

.j-art {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1.04;
	border-radius: 47% 53% 56% 44% / 51% 44% 56% 49%;
	background:
		radial-gradient(
			120% 120% at 28% 18%,
			rgba(255, 255, 255, 0.32) 0%,
			transparent 44%
		),
		var(--tint, var(--sand));
}
.j-panel:nth-child(2n) .j-art {
	border-radius: 55% 45% 44% 56% / 46% 56% 44% 54%;
}
.j-icon {
	position: absolute;
	inset: 15%;
	width: 70%;
	height: 70%;
	color: var(--c, var(--moss));
	overflow: visible;
}
.j-leaf {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--s);
	rotate: var(--r);
	color: var(--moss);
	opacity: 0.5;
}
.j-leaf svg {
	overflow: visible;
}

.j-latin {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: none;
	color: var(--gold-deep);
}
.j-name {
	font-size: clamp(2.6rem, 5.6vw, 5rem);
	color: var(--ink);
	margin: 14px 0 20px;
}
.j-desc {
	font-size: clamp(1rem, 1.3vw, 1.12rem);
	line-height: 1.65;
	color: #3d4c38;
	max-width: 40ch;
}

/* ============================================================
   04 · FORMULATION
   ============================================================ */

.form-pin {
	height: 100svh;
	position: relative;
	overflow: hidden;
	display: grid;
	place-items: center;
}

.form-title {
	position: absolute;
	top: max(11vh, calc(var(--nav-h) + 20px));
	left: 0;
	right: 0;
	text-align: center;
	font-size: clamp(2rem, 4.6vw, 3.8rem);
	padding-inline: 8vw;
	z-index: 6;
}

.form-field {
	position: absolute;
	inset: 0;
	z-index: 2;
}
.f-orb {
	position: absolute;
	left: 50%;
	top: 54%;
	width: clamp(46px, 7vw, 88px);
	translate: -50% -50%;
	color: var(--moss);
}
.f-orb svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.form-core {
	position: absolute;
	left: 50%;
	top: 54%;
	translate: -50% -50%;
	width: clamp(130px, 18vw, 220px);
	aspect-ratio: 1;
	border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%;
	background: radial-gradient(
		60% 60% at 40% 35%,
		#b2df9b 0%,
		var(--gold-soft) 45%,
		var(--gold) 100%
	);
	box-shadow: 0 30px 80px rgba(90, 163, 52, 0.35);
	opacity: 0;
	z-index: 3;
	will-change: transform, opacity, border-radius;
}

.form-products {
	position: absolute;
	left: 50%;
	top: 54%;
	translate: -50% -50%;
	display: flex;
	align-items: flex-end;
	gap: clamp(10px, 2.6vw, 30px);
	z-index: 4;
}
.fp {
	width: clamp(62px, 8.6vw, 118px);
	height: auto;
}

.form-caption {
	position: absolute;
	bottom: 8vh;
	left: 0;
	right: 0;
	text-align: center;
	font-family: var(--font-sans);
	font-size: 0.72rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--earth);
	z-index: 6;
}

/* static fallback: no converging orbs, just the finished composition */
html:not(.has-motion) .form-pin {
	height: auto;
	padding: 16vh 6vw 12vh;
}
html:not(.has-motion) .form-field,
html:not(.has-motion) .form-core {
	display: none;
}
html:not(.has-motion) .form-title {
	position: static;
	padding-inline: 0;
}
html:not(.has-motion) .form-products {
	position: static;
	translate: none;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 4rem;
}
html:not(.has-motion) .form-caption {
	position: static;
	margin-top: 1.4rem;
}

/* ============================================================
   07 · INGREDIENT UNIVERSE
   ============================================================ */

.scene-universe {
	background: radial-gradient(
		110% 70% at 50% 0%,
		#1a2a10 0%,
		#101b09 55%,
		var(--night) 100%
	);
	padding: 18vh 6vw 16vh;
	overflow: hidden;
}
.scene-universe::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #060b03;
	opacity: 0;
	transition: opacity 0.55s var(--ease-out);
	pointer-events: none;
	z-index: 1;
}
.scene-universe.has-active::after {
	opacity: 0.4;
}

.universe-head {
	position: relative;
	z-index: 0;
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}
.universe-head .eyebrow {
	color: var(--gold-soft);
}
.universe-title {
	margin-top: 20px;
	font-size: clamp(2.3rem, 5vw, 4.2rem);
	color: var(--ivory);
}
.universe-sub {
	margin-top: 18px;
	font-style: italic;
	color: #93a889;
}

.universe-field {
	position: relative;
	z-index: 2;
	height: clamp(620px, 120vh, 1150px);
	margin-top: 6vh;
}

.orb {
	position: absolute;
	left: var(--ox);
	top: var(--oy);
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	animation: orbFloat var(--od, 10s) var(--ease-in-out) var(--odel, 0s) infinite
		alternate;
	transition:
		opacity 0.5s var(--ease-out),
		scale 0.5s var(--ease-out);
}
@keyframes orbFloat {
	from {
		transform: translateY(-9px);
	}
	to {
		transform: translateY(10px);
	}
}

.orb-bubble {
	width: clamp(62px, 8vw, 96px);
	aspect-ratio: 1;
	border-radius: 48% 52% 55% 45% / 52% 48% 52% 48%;
	display: grid;
	place-items: center;
	background: rgba(222, 238, 214, 0.05);
	border: 1px solid rgba(222, 238, 214, 0.16);
	color: #b6d3a9;
	transition:
		scale 0.5s var(--ease-out),
		background-color 0.5s,
		border-color 0.5s,
		color 0.5s;
	will-change: transform;
}
.orb-bubble svg {
	width: 56%;
	height: auto;
	overflow: visible;
}

.orb-name {
	font-family: var(--font-sans);
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #a0b895;
	transition: color 0.4s;
	white-space: nowrap;
}

/* an active orb (and its card) must paint above sibling orbs, whose
   float animation traps each card in its own stacking context */
.orb:hover,
.orb:focus-visible,
.orb.is-hot,
.orb.is-open {
	z-index: 20;
}

.orb-card {
	position: absolute;
	bottom: calc(100% + 16px);
	left: 50%;
	translate: -50% 0;
	transform: translateY(8px);
	width: min(240px, calc(100vw - 40px));
	padding: 14px 17px;
	background: rgba(20, 16, 6, 0.94);
	border: 1px solid rgba(136, 206, 100, 0.4);
	border-radius: 16px 16px 16px 4px;
	font-size: 0.92rem;
	line-height: 1.5;
	color: #d3e4ca;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.45s var(--ease-out),
		transform 0.45s var(--ease-out),
		visibility 0s 0.45s;
	pointer-events: none;
	z-index: 10;
}
.orb--flip .orb-card {
	bottom: auto;
	top: calc(100% + 16px);
	border-radius: 16px 4px 16px 16px;
	transform: translateY(-8px);
}
/* edge orbs anchor their card inward so it can't clip at the viewport */
.orb--edge-l .orb-card {
	left: 0;
	translate: 0;
	border-radius: 4px 16px 16px 16px;
}
.orb--edge-r .orb-card {
	left: auto;
	right: 0;
	translate: 0;
	border-radius: 16px 4px 16px 16px;
}

.orb:hover .orb-bubble,
.orb:focus-visible .orb-bubble,
.orb.is-open .orb-bubble,
.orb.is-hot .orb-bubble {
	scale: 1.16;
	background: rgba(136, 206, 100, 0.13);
	border-color: var(--gold-soft);
	color: var(--gold-soft);
}
.orb:hover .orb-name,
.orb:focus-visible .orb-name,
.orb.is-open .orb-name,
.orb.is-hot .orb-name {
	color: var(--gold-soft);
}
.orb:hover .orb-card,
.orb:focus-visible .orb-card,
.orb.is-open .orb-card,
.orb.is-hot .orb-card {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity 0.45s var(--ease-out),
		transform 0.45s var(--ease-out),
		visibility 0s;
}

.universe-field.has-active .orb:not(.is-hot) {
	opacity: 0.3;
	scale: 0.93;
}

/* ============================================================
   08 · PHILOSOPHY
   ============================================================ */

.scene-philosophy {
	padding: 24vh 6vw;
}

.phil-drift {
	position: absolute;
	right: 6%;
	top: 10%;
	width: clamp(120px, 16vw, 230px);
	color: #b1d0a2;
	opacity: 0.55;
	animation: philDrift 26s var(--ease-in-out) infinite alternate;
	pointer-events: none;
}
.phil-drift svg {
	overflow: visible;
}
@keyframes philDrift {
	from {
		transform: translateY(-16px) rotate(-14deg);
	}
	to {
		transform: translateY(26px) rotate(9deg);
	}
}

.phil-inner {
	max-width: 1080px;
	margin-inline: auto;
	position: relative;
	z-index: 2;
}
.phil-title {
	margin-top: 24px;
	font-size: clamp(2.4rem, 5.4vw, 4.7rem);
	color: var(--ink);
	max-width: 16ch;
}
.phil-rows {
	margin-top: 11vh;
	border-top: 1px solid #c1d6b8;
}
.phil-row {
	display: grid;
	grid-template-columns: minmax(160px, 1fr) 1.8fr;
	align-items: baseline;
	gap: 2rem;
	padding: clamp(2.2rem, 5.5vh, 3.6rem) 0;
	border-bottom: 1px solid #c1d6b8;
}
.phil-word {
	font-size: clamp(2rem, 4.2vw, 3.5rem);
	font-style: italic;
	font-weight: 380;
	color: var(--forest);
}
.phil-line {
	font-size: clamp(1rem, 1.35vw, 1.18rem);
	color: #44553d;
	max-width: 46ch;
}

/* ============================================================
   10 · FINALE
   ============================================================ */

.scene-finale {
	min-height: 120svh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: linear-gradient(180deg, var(--night) 0%, #080e04 75%);
	color: var(--ivory);
}

.finale-atmos {
	position: absolute;
	inset: 0;
}

.finale-sil {
	position: absolute;
	left: 50%;
	top: 46%;
	translate: -50% -50%;
	display: flex;
	align-items: flex-end;
	gap: 3.4vw;
	opacity: 0.14;
}
.finale-sil .prod-svg {
	width: clamp(60px, 7.5vw, 105px);
	height: auto;
	filter: brightness(0.45);
}

.finale-inner {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5vh;
	text-align: center;
	padding: 22vh 6vw 14vh;
}
.finale-logo {
	width: min(62vw, 400px);
	height: auto;
	filter: drop-shadow(0 0 30px rgba(206, 231, 193, 0.16));
}
.finale-line {
	font-style: italic;
	font-size: clamp(1.5rem, 3.4vw, 2.5rem);
	color: #c0d6b6;
	max-width: 24ch;
}

/* ============================================================
   09 · VISIT
   ============================================================ */

.visit {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	padding: 0 6vw clamp(8vh, 12vh, 14vh);
}
.visit .eyebrow {
	color: var(--gold-soft);
}
.visit-title {
	margin-top: 20px;
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	color: var(--ivory);
	max-width: 14ch;
}
.visit-address {
	margin-top: clamp(1.6rem, 3vh, 2.4rem);
	font-family: var(--font-sans);
	font-style: normal;
	font-size: clamp(0.95rem, 1.2vw, 1.05rem);
	font-weight: 300;
	line-height: 1.95;
	letter-spacing: 0.04em;
	color: #b8cfae;
}
.visit-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin-top: clamp(1.4rem, 2.6vh, 2rem);
	padding-bottom: 0.5em;
	font-family: var(--font-sans);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--gold-soft);
	border-bottom: 1px solid rgba(136, 206, 100, 0.35);
	transition:
		color 0.35s,
		border-color 0.35s;
}
.visit-link svg {
	width: 1.05em;
	height: 1.05em;
}
.visit-link:hover,
.visit-link:focus-visible {
	color: var(--ivory);
	border-color: rgba(222, 238, 214, 0.6);
}

.visit-map {
	aspect-ratio: 16 / 11;
	overflow: hidden;
	border: 1px solid rgba(222, 238, 214, 0.14);
	background: #080e04;
}
.visit-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.footer {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 5vh 6vw;
	border-top: 1px solid rgba(222, 238, 214, 0.12);
}
.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(18px, 3vw, 34px);
}
.footer-links a {
	font-family: var(--font-sans);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	color: #8da284;
	transition: color 0.35s;
}
.footer-links a:hover,
.footer-links a:focus-visible {
	color: var(--gold-soft);
}
.footer-copy {
	font-family: var(--font-sans);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	color: #5c6d55;
}
.footer-copy-small {
	font-family: var(--font-sans);
	font-size: 0.5rem;
	letter-spacing: 0.12em;
	color: #5c6d55;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1023px) {
	/* the mid-height ingredient names cross the centered title on
     narrower screens */
	.nature-names li:nth-child(5),
	.nature-names li:nth-child(6) {
		display: none;
	}
}

@media (max-width: 899px) {
	.j-panel {
		grid-template-columns: 1fr;
		width: 84vw;
		gap: 1.6rem;
	}
	.j-art {
		width: min(66vw, 340px);
		margin-inline: auto;
	}
	.j-text {
		text-align: center;
	}
	.j-desc {
		margin-inline: auto;
	}

	.phil-row {
		grid-template-columns: 1fr;
		gap: 0.6rem;
	}

	.visit {
		grid-template-columns: 1fr;
		gap: clamp(1.8rem, 5vh, 2.8rem);
	}
	.visit-map {
		aspect-ratio: 4 / 3;
	}

	.nature-blob {
		width: min(88vw, 74svh);
	}
	.nature-names li:nth-child(12),
	.nature-names li:nth-child(13),
	.nature-names li:nth-child(14) {
		display: none;
	}
	/* clear the subtitle band on phones */
	.nature-names li:nth-child(7) {
		top: 76%;
	}
	.nature-names li:nth-child(8) {
		top: 73%;
	}
	/* right-column names anchor to the edge instead of clipping past it */
	.nature-names li:nth-child(2) {
		left: auto;
		right: 5%;
	}
	.nature-names li:nth-child(4) {
		left: auto;
		right: 4%;
	}
	.nature-names li:nth-child(8) {
		left: auto;
		right: 5%;
	}
	.nature-names li:nth-child(10) {
		left: auto;
		right: 7%;
	}

	/* pull the formulation scatter tighter so no icon crosses the headline */
	.form-field {
		scale: 0.78;
		transform-origin: 50% 54%;
	}

	.universe-field {
		height: clamp(560px, 110vh, 900px);
	}
	.orb-name {
		font-size: 0.58rem;
	}

	.finale-logo {
		width: min(74vw, 320px);
	}
}

/* landscape phones: keep journey panels side-by-side so a stacked
   panel can't exceed the pinned 100svh stage */
@media (max-width: 899px) and (orientation: landscape) {
	html.has-motion .j-panel {
		grid-template-columns: auto 1fr;
		width: 92vw;
		gap: 2rem;
	}
	html.has-motion .j-art {
		width: min(38vh, 220px);
		margin-inline: 0;
	}
	html.has-motion .j-text {
		text-align: left;
	}
	html.has-motion .j-desc {
		margin-inline: 0;
	}
}

/* short viewports (small laptop windows and phones alike): keep every
   pinned scene's content inside the viewport */
@media (max-width: 519px) {
	.footer {
		justify-content: center;
		text-align: center;
	}
}

/* ============================================================
   Reduced motion — the story stands still, fully readable
   ============================================================ */

@media print {
	.grain,
	#dust,
	.progress-bar,
	.finale-atmos {
		display: none !important;
	}
	.scene,
	body {
		background: #fff !important;
	}
	.scene,
	.scene * {
		color: #1a2016 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.15s !important;
	}
	.orb,
	.phil-drift {
		animation: none !important;
	}
	#dust {
		display: none;
	}
}

/* ============================================================
   PRODUCTS — the range, one card per collection entry
   ============================================================ */

.scene-products {
	padding: clamp(2.25rem, 4.5vw, 3.5rem) 1.25rem;
	background: var(--ivory);
	color: var(--ink);
}
@media (min-width: 640px) {
	.scene-products {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.products-head {
	max-width: 46rem;
	margin: 0 auto clamp(1.5rem, 3.5vw, 2.5rem);
	text-align: center;
}

.products-title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(1.6rem, 3.6vw, 2.4rem);
	line-height: 1.12;
	color: var(--ink);
}

.products-lede {
	margin: 0.9rem auto 0;
	max-width: 38rem;
	font-family: var(--font-sans);
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--earth);
}

.pcards {
	list-style: none;
	display: grid;
	gap: clamp(1rem, 2.4vw, 1.5rem);
	/* Tracks are capped rather than 1fr: with auto-fit, a 1fr track lets a
	   single card stretch across the whole container. Centring keeps a short
	   row balanced instead of left-aligned. */
	grid-template-columns: repeat(auto-fit, minmax(17rem, 23rem));
	justify-content: center;
	max-width: 72rem;
	margin: 0 auto;
}

/* Image beside the copy, not above it — a wide card that stays short. */
.pcard-link {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	height: 100%;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--sand);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.pcard-link:hover,
.pcard-link:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(23, 34, 16, 0.13);
}

/* The width is fixed; the height tracks the card. A fixed 7.5rem height left
   a bare strip of card below the image on a narrow screen, where the title
   wraps to two lines and the tagline to two and the copy column outgrows the
   image. height:auto is what lets the row's align-items:stretch reach the
   image at all — a specified height beats stretch, just as it beats
   aspect-ratio (which applies only when one dimension is auto), and the
   markup's width="1100" height="1100" is why neither can be relied on here.
   min-height keeps the old floor when the copy is short.

   cover, not contain: the product shots are full-bleed squares, so contain
   would letterbox them against --ivory-2 the moment the box stops being
   square — trading one gap for two bands. The background stays as the ground
   for anything with transparency. */
.pcard-img {
	flex: 0 0 7.5rem;
	width: 7.5rem;
	align-self: stretch;
	height: auto;
	min-height: 7.5rem;
	object-fit: cover;
	background: var(--ivory-2);
}

.pcard-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.8rem 0.95rem;
}

.pcard-name {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 0.98rem;
	line-height: 1.25;
	color: var(--ink);
}

.pcard-tag {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--earth);
}

.pcard-cue {
	padding-top: 0.3rem;
	font-family: var(--font-sans);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-deep);
}

@media (prefers-reduced-motion: reduce) {
	.pcard-link {
		transition: none;
	}
	.pcard-link:hover,
	.pcard-link:focus-visible {
		transform: none;
	}
}