/*
Theme Name: OVIA
Theme URI: https://ovia.wine
Author: OWI
Author URI: https://ovia.wine
Description: OVIA — premium de-alcoholized wine. FSE block theme.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: ovia
*/

/* ==========================================================================
   Token aliases — single source of truth lives in theme.json.
   These shorten the WP preset vars for readability; never hardcode values.
   ========================================================================== */
:root {
	--ink: var(--wp--preset--color--ink);
	--paper: var(--wp--preset--color--paper);
	--white: var(--wp--preset--color--white);
	--muted: var(--wp--preset--color--muted);
	--caption: var(--wp--preset--color--caption);

	--content: var(--wp--style--global--content-size);
	--wide: var(--wp--style--global--wide-size);

	--font: var(--wp--preset--font-family--switzer);

	--fs-small: var(--wp--preset--font-size--small);
	--fs-base: var(--wp--preset--font-size--base);
	--fs-title: var(--wp--preset--font-size--title);
	--fs-lead: var(--wp--preset--font-size--lead);
	--fs-heading: var(--wp--preset--font-size--heading);
	--fs-display: var(--wp--preset--font-size--display);

	--space-xs: var(--wp--preset--spacing--20);
	--space-s: var(--wp--preset--spacing--30);
	--space-m: var(--wp--preset--spacing--40);
	--space-l: var(--wp--preset--spacing--50);
	--space-xl: var(--wp--preset--spacing--60);
	--space-2xl: var(--wp--preset--spacing--70);
	--space-3xl: var(--wp--preset--spacing--80);

	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
}

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

body {
	margin: 0;
	font-family: var(--font);
	font-weight: var(--weight-regular);
	font-size: var(--fs-base);
	line-height: 1.15;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

/* Prevent horizontal page scroll from full-bleed section backgrounds.
   `clip` (not `hidden`) so it never creates a scroll container that would
   break the sticky header. */
.wp-site-blocks { overflow-x: clip; }
.wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
	font-weight: var(--weight-semibold);
	line-height: 1.07;
	margin: 0;
}

/* ==========================================================================
   Buttons — .btn base + variants (from Figma hero/about)
   primary: ink fill / paper text · outline: ink border / ink text
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font);
	font-weight: var(--weight-medium);
	font-size: var(--fs-base);
	line-height: 1;
	text-align: center;
	min-height: 44px;
	padding: 0 33px;
	border: 0.5px solid var(--ink);
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn--primary {
	background: var(--ink);
	color: var(--paper);
}
.btn--primary:hover { background: transparent; color: var(--ink); }

.btn--outline {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--ink);
}
.btn--outline:hover { background: var(--ink); color: var(--paper); }

/* On dark sections, invert */
.is-dark .btn--primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.is-dark .btn--outline { color: var(--paper); border-color: var(--paper); }
.is-dark .btn--outline:hover { background: var(--paper); color: var(--ink); }

/* ==========================================================================
   Chip / pill — small label (e.g. "Inteligentná voľba")
   ========================================================================== */
.chip {
	display: inline-flex;
	align-items: center;
	font-weight: var(--weight-medium);
	font-size: var(--fs-small);
	line-height: 1;
	padding: 17px 20px;
	background: var(--paper);
	color: var(--ink);
	border: 0.5px solid currentColor;
}
.is-dark .chip { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ==========================================================================
   Section label — reusable eyebrow pill (ink fill). Used above section titles.
   ========================================================================== */
.section-label {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	font-weight: var(--weight-medium);
	font-size: var(--fs-small);
	line-height: 1;
	text-align: center;
	padding: 11px 24px;
	background: var(--ink);
	color: var(--paper);
	white-space: nowrap;
}
.is-dark .section-label { background: var(--paper); color: var(--ink); }

/* ==========================================================================
   Section title pattern — h2 with light/medium two-tone (Figma uses
   Light + Medium spans within one heading)
   ========================================================================== */
.section-title {
	font-size: var(--fs-heading);
	font-weight: var(--weight-light);
	line-height: 1.07;
}
.section-title strong,
.section-title .is-strong {
	font-weight: var(--weight-medium);
}

/* Dark section context */
.is-dark { background: var(--ink); color: var(--white); }
.is-dark .section-title { color: var(--white); }

/* ==========================================================================
   Site header — left nav · centered logo · right actions
   currentColor logo + text so a dark-section context (.is-dark) inverts it.
   ========================================================================== */
:root {
	--header-gap: clamp(28px, 3.6vw, 70px);
	--header-h: 130px;
}

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--paper);
	color: var(--ink);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, color 0.3s ease;
}

/* Hide-on-scroll-down, reveal-on-scroll-up (JS toggles body.is-header-hidden) */
body.is-header-hidden .site-header { transform: translateY(-100%); }
body.is-menu-open .site-header { transform: none; }

/* On-load entry (inner only — the outer .site-header owns the scroll-hide transform). */
.site-header__inner { animation: header-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
@keyframes header-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--header-gap);
	min-height: var(--header-h);
	max-width: var(--content);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 24px);
}

.site-header__nav {
	display: flex;
	align-items: center;
	gap: var(--header-gap);
	justify-self: start;
}

/* Nav link + underline wipe. transform-origin is non-animatable so it flips
   instantly: enter origin=left (grows rightward), leave origin=right (exits
   rightward) — the underline never retracts backwards. */
.site-header__link {
	position: relative;
	display: inline-block;
	font-weight: var(--weight-medium);
	font-size: var(--fs-base);
	color: currentColor;
	white-space: nowrap;
}

.site-header__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header__link:hover::after,
.site-header__link:focus-visible::after,
.site-header__link.is-active::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.site-header__logo {
	justify-self: center;
	display: inline-flex;
	color: currentColor;
}
.site-header__logo svg,
.site-header__logo img { display: block; height: 40px; width: auto; }

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--header-gap);
	justify-self: end;
}
.site-header__cta { padding: 14px 24px; }

/* Dark-section header context (set later by scroll-reveal sampling per §7) */
.site-header.is-dark { background: var(--ink); color: var(--paper); }

/* ---- Morphing hamburger (hidden on desktop) -------------------------- */
.site-header__menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	color: currentColor;
	cursor: pointer;
}

.site-header__menu-icon {
	position: relative;
	display: block;
	width: 24px;
	height: 14px;
}

.site-header__menu-icon__line {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
	transform-origin: center;
	transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease;
}
.site-header__menu-icon__line:nth-child(1) { top: 0; }
.site-header__menu-icon__line:nth-child(2) { top: 50%; margin-top: -1px; }
.site-header__menu-icon__line:nth-child(3) { bottom: 0; }

body.is-menu-open .site-header__menu-icon__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.is-menu-open .site-header__menu-icon__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.is-menu-open .site-header__menu-icon__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Full-screen mobile menu overlay --------------------------------- */
.site-menu {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--paper);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
body.is-menu-open .site-menu {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease, visibility 0s linear 0s;
}

.site-menu__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	align-items: flex-start;
	justify-content: center;
	min-height: 100%;
	padding: calc(var(--header-h) + var(--space-l)) clamp(24px, 7.5vw, 129px) var(--space-2xl);
}

.site-menu__link {
	font-size: var(--fs-heading);
	font-weight: var(--weight-light);
	color: var(--ink);
	/* staggered entrance */
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
body.is-menu-open .site-menu__link {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(0.1s + var(--i, 0) * 0.06s);
}

.site-menu__cta { margin-top: var(--space-s); }

/* Lock body scroll when overlay is open */
body.is-menu-open { overflow: hidden; }

@media (max-width: 900px) {
	.site-header__nav,
	.site-header__contact,
	.site-header__cta { display: none; }
	.site-header__menu-toggle { display: inline-flex; }
	/* Flex (not grid) so the display:none nav doesn't reflow logo+toggle to
	   the left — logo left, hamburger hard right. */
	.site-header__inner { display: flex; justify-content: space-between; }
}

/* Respect reduced-motion: kill transforms/transitions, keep states usable */
@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header__link::after,
	.site-header__menu-icon__line,
	.site-menu,
	.site-menu__link { transition-duration: 0.01ms !important; }
	html { scroll-behavior: auto; }
	body.is-header-hidden .site-header { transform: none; }
	.site-header__inner { animation: none; }
}

/* ==========================================================================
   Hero — text left, product stage right. Layers (back→front):
   noise base · big watermark · per-slide coloured noise glow · shadow ·
   floating product · dots. Slides + noise crossfade; product floats + enters.
   ========================================================================== */
.hero {
	position: relative;
	isolation: isolate;
	background: var(--paper);
}

/* Background layers live in a centred wrapper the same max-width as the site,
   so they stay anchored to the content box (don't travel on resize). Fixed
   px sizes push them out past the wrapper — NO overflow clip here; horizontal
   page scroll is prevented globally on .wp-site-blocks (overflow-x: clip). */
.hero__bg-wrap {
	position: absolute;
	inset: 0;
	max-width: var(--content);
	margin-inline: auto;
	pointer-events: none;
}
/* SVG canvas was expanded to its full (previously clipped) filter region, so
   the soft grain no longer has a hard edge. Size/offset preserve the exact
   on-screen blob: same scale, right edge anchored, y=0 pinned to wrap top. */
.hero__noise-base {
	position: absolute;
	top: -868px;
	right: -240px;
	width: 3341px;
	height: auto;
}
.hero__watermark {
	position: absolute;
	left: -580px;
	bottom: 0;
	width: 1424px;
	height: auto;
	mix-blend-mode: plus-lighter;
}

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--content);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 24px);
	min-height: clamp(560px, 84vh, 880px);
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: center;
	gap: clamp(24px, 4vw, 64px);
}

.hero__content { max-width: 640px; }

.hero__title {
	font-size: clamp(44px, 7.6vw, 125px);
	line-height: 1.0;
	letter-spacing: -0.01em;
	margin: 0;
}
.hero__title-a { display: block; font-weight: var(--weight-semibold); white-space: nowrap; }
.hero__title-b { display: block; font-weight: var(--weight-light); white-space: nowrap; }

.hero__lead {
	font-size: var(--fs-lead);
	font-weight: var(--weight-light);
	line-height: 1.25;
	color: var(--ink);
	max-width: 30em;
	margin: clamp(22px, 2.6vw, 32px) 0 clamp(28px, 3.4vw, 40px);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---- Stage ---- */
/* Aspect-locked so every plane is a % of the SAME box → the composition
   scales as one coherent image at any viewport width (no drift on resize). */
.hero__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 82 / 100;
	margin-inline: auto;
}

/* Coloured noise glow — sits on the LEFT of the hero (behind the copy),
   fixed 1440px wide, bleeding off the left edge. Crossfades with the slide. */
.hero__noises {
	position: absolute;
	top: 50%;
	left: 0;
	width: 1440px;
	z-index: 0;
	transform: translate(-40%, -50%);
	pointer-events: none;
}
.hero__noise {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.8s ease;
}
.hero__noise.is-active { opacity: 1; }

.hero__shadow {
	position: absolute;
	left: 50%;
	bottom: 8%;
	width: 62%;
	height: auto;
	transform: translateX(-50%);
	z-index: 1;
	pointer-events: none;
}

.hero__slides { position: absolute; inset: 0; z-index: 2; }
.hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.7s ease;
	will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }

.hero__slide-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transform-origin: 60% 60%;
}
.hero__slide.is-active .hero__slide-img {
	animation: hero-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both,
	           hero-float 7s ease-in-out 1s infinite;
}

@keyframes hero-enter {
	from { opacity: 0; transform: translateY(22px) scale(1.04) rotate(0.6deg); }
	to   { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes hero-float {
	0%, 100% { transform: translateY(0) rotate(-0.5deg); }
	50%      { transform: translateY(-16px) rotate(0.5deg); }
}

/* ---- Layered slide: back-to-front planes (circle → back grapes → can →
   frosted veil → front grapes). Positions are % of the stage so the planes
   scale together; tuned per composition. ---- */
.hero__layer { position: absolute; }
.hero__layer > img { display: block; width: 100%; height: auto; }

.hero__layer--circle { z-index: 0; width: 84%; left: 42%; top: 64%; transform: translate(-50%, -50%); }
.hero__layer--back   { z-index: 1; width: 34%; left: 80%; top: 34%; transform: translate(-50%, -50%); }
.hero__layer--can    { z-index: 2; width: 64%; left: 52%; top: 42%; transform: translate(-50%, -50%); }
.hero__layer--fade {
	z-index: 3;
	left: 0; right: 0; bottom: 0;
	height: 34%;
	background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 100%);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	pointer-events: none;
}
.hero__layer--front  { z-index: 4; width: 88%; left: 46%; top: 50%; transform: translate(-50%, -50%); }

/* Cascade: each plane fades/rises in on its own delay (--d) once active. */
.hero__slide--layered.is-active .hero__layer:not(.hero__layer--can):not(.hero__layer--front) > img,
.hero__slide--layered.is-active .hero__layer--fade {
	animation: hero-layer-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms) both;
}
.hero__slide--layered.is-active .hero__layer--can > img {
	animation: hero-layer-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms) both,
	           hero-float 7s ease-in-out 1.6s infinite;
}
.hero__slide--layered.is-active .hero__layer--front > img {
	animation: hero-layer-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms) both,
	           hero-float-front 9s ease-in-out 2s infinite;
}
@keyframes hero-layer-in {
	from { opacity: 0; transform: translateY(28px) scale(0.99); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hero-float-front {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(10px); }
}

/* ---- Dots ---- */
.hero__dots {
	position: absolute;
	left: 50%;
	bottom: clamp(-6px, 1vw, 10px);
	transform: translateX(-50%);
	display: flex;
	gap: 12px;
	z-index: 3;
}
.hero__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--ink);
	background: transparent;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
}
.hero__dot.is-active { background: var(--ink); transform: scale(1.15); }
.hero__dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 900px) {
	.hero__inner {
		grid-template-columns: 1fr;
		gap: 0;
		min-height: 0;
		padding-block: clamp(40px, 10vw, 80px);
		text-align: center;
	}
	.hero__content { max-width: none; margin-inline: auto; }
	.hero__title-a, .hero__title-b { white-space: normal; }
	.hero__lead { margin-inline: auto; }
	.hero__actions { justify-content: center; }
	.hero__stage { order: -1; max-width: min(88vw, 460px); }
	.hero__noises { width: min(140vw, 900px); transform: translate(-28%, -50%); }
	.hero__noise-base { width: 2062px; right: -180px; top: -536px; }
	.hero__watermark { width: 900px; left: -300px; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__slide.is-active .hero__slide-img,
	.hero__slide--layered.is-active .hero__layer > img,
	.hero__slide--layered.is-active .hero__layer--fade { animation: none; }
	.hero__slide, .hero__noise { transition-duration: 0.01ms; }
}

/* ==========================================================================
   Delivery — "Kde sa dá kúpiť" with Online / Fyzické predajne tabs
   ========================================================================== */
/* Sections carry their own spacing via padding — kill the flow-layout
   block-gap that WordPress adds between them. */
.hero, .delivery, .about, .taste, .calories, .products, .lifestyle, .blog, .insta, .partners { margin-block: 0; }

.delivery {
	padding-top: clamp(56px, 8vw, 120px);
	padding-bottom: clamp(48px, 7vw, 100px);
}
.delivery__inner {
	max-width: 1346px;
	box-sizing: content-box;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 24px);
}

.delivery__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-m);
	flex-wrap: wrap;
}
.delivery__intro { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.6vw, 24px); }
.delivery__title { margin: 0; font-size: clamp(38px, 5.2vw, 65px); }

.delivery__tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.delivery__tab {
	font-family: var(--font);
	font-weight: var(--weight-medium);
	font-size: var(--fs-base);
	line-height: 1;
	text-align: center;
	padding: 14px 28px;
	border: 1px solid var(--ink);
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.delivery__tab.is-active { background: var(--ink); color: var(--paper); }
.delivery__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.delivery__panels { margin-top: clamp(40px, 6vw, 88px); }
.delivery__panel[hidden] { display: none; }
.delivery__panel { animation: delivery-fade 0.4s ease; }
@keyframes delivery-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.delivery__grid {
	display: grid;
	grid-template-columns: minmax(0, 624px) minmax(0, 711px);
	justify-content: space-between;
	gap: 12px;
	align-items: stretch;
}
.delivery__content { display: flex; flex-direction: column; gap: 12px; max-width: 624px; }

.delivery__banner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--white);
	padding: clamp(24px, 4vw, 44px);
}
.delivery__banner-logo { color: var(--ink); margin: 0 0 20px auto; }
.delivery__banner-logo svg { height: clamp(30px, 3vw, 40px); width: auto; display: block; }
.delivery__banner-title {
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: var(--weight-light);
	line-height: 1.07;
	color: var(--ink);
	margin: 0 0 32px;
	max-width: 16ch;
}
.delivery__banner-title strong { font-weight: var(--weight-medium); }
.delivery__banner-desc { font-size: clamp(22px, 2.4vw, 30px); font-weight: var(--weight-light); line-height: 1.07; color: var(--ink); margin: 0; }

.delivery__retailers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.retailer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 12px;
}
/* Each part is its own white card */
.retailer__card { background: var(--white); display: flex; align-items: center; }
.retailer__logo { justify-content: center; padding: clamp(18px, 2.2vw, 30px) clamp(24px, 2.6vw, 40px); }
.retailer__logo img { height: 45px; width: auto; }
.retailer__name-lg { font-weight: var(--weight-semibold); font-size: var(--fs-title); }
.retailer__buy { justify-content: center; gap: 16px; padding: clamp(14px, 1.6vw, 22px) clamp(20px, 2.4vw, 32px); }
.retailer__buy-label { color: var(--ink); font-size: clamp(16px, 1.6vw, 20px); font-weight: var(--weight-regular); line-height: 1.07; white-space: nowrap; }
.retailer__link { padding: 0 16px; max-width: 150px; width: 100%; }
/* Offline tab: no "Kúpiť na:" label — the button alone fills the card. */
.retailer--nolabel .retailer__link { max-width: none; }

/* Image cover-fills the column so its top (the ice line) sits flush with the
   banner top; it extends --media-bleed past the top so the cans overflow over
   the edge (no clip). */
.delivery__media {
	position: relative;
	margin: 0;
	overflow: visible;
	--media-bleed: 44px;
}
.delivery__media img {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1 * var(--media-bleed));
	bottom: 0;
	width: 100%;
	height: calc(100% + var(--media-bleed));
	object-fit: cover;
	object-position: center top;
	display: block;
}

@media (max-width: 900px) {
	.delivery__head { flex-direction: column; align-items: flex-start; }
	.delivery__grid { grid-template-columns: 1fr; }
	.delivery__content { max-width: 100%; }
	.delivery__media { overflow: hidden; }
	.delivery__media img { position: static; width: 100%; height: auto; }
}
@media (max-width: 520px) {
	.retailer { grid-template-columns: 1fr; gap: 12px; }
}

/* ==========================================================================
   About product — dark section: centred-right header, feature card trio +
   image tiles (alternating order), muted lead paragraph on the right
   ========================================================================== */
.about {
	position: relative;
	overflow: hidden;
	padding-block: clamp(72px, 12vw, 158px);
	background-color: var(--ink);
}
.about__noise {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url(assets/images/about/bg-noise.svg) center / cover no-repeat;
	pointer-events: none;
}
.about__inner {
	position: relative;
	z-index: 1;
	max-width: 1348px;
	box-sizing: content-box;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 24px);
}

.about__head {
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-bottom: clamp(28px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(18px, 2vw, 28px);
}
.about__title { margin: 0; }
/* Direct-child only — the reveal wraps letters in inner <span>s that must NOT
   inherit these weights (otherwise the bold line renders regular). */
.about__title > span, .about__title > strong { display: block; }
.about__title > span { font-weight: var(--weight-light); }
.about__title > strong { font-weight: var(--weight-semibold); }

.about__body {
	display: flex;
	justify-content: space-between;
	gap: clamp(28px, 4vw, 48px);
	align-items: flex-start;
}

.about__features {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 278px));
	justify-content: start;
	gap: 8px;
	align-items: stretch;
}
.about__feature {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 278px;
}
.about__feature:nth-child(2) { flex-direction: column-reverse; }

.about__card {
	position: relative;
	z-index: 1;
	flex: 1;
	background: var(--paper);
	color: var(--ink);
	min-height: 235px;
	padding: 32px;
	display: flex;
	flex-direction: column;
}
.about__icon { color: var(--ink); line-height: 0; margin-bottom: 28px; }
.about__icon svg, .about__icon img { height: 36px; width: auto; display: block; }

.about__feature-title {
	margin: 0 0 12px;
	font-size: clamp(18px, 1.5vw, 22px);
	font-weight: var(--weight-light);
	line-height: 1.1;
	color: var(--ink);
}
.about__feature-title strong { font-weight: var(--weight-semibold); }

.about__feature-text {
	margin: 0;
	font-size: var(--fs-small);
	font-weight: var(--weight-regular);
	line-height: 1.4;
	color: var(--caption);
}

/* Tile reserves an 80px strip in flow; its image is positioned against the
   whole feature so on hover it grows up (or down) to cover the card. */
.about__tile { height: 80px; }
.about__tile--empty { background: linear-gradient(135deg, #6f7a2e, #cdd48a); }
.about__tile img {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	height: 80px;
	width: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transform: scale(1);
	transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.about__feature:nth-child(2) .about__tile img { top: 0; bottom: auto; }

/* Hover: image grows to cover the card and zooms in a touch. Content is untouched. */
.about__feature:hover .about__tile img { height: 100%; transform: scale(1.09); }

@media (hover: none), (prefers-reduced-motion: reduce) {
	.about__feature:hover .about__tile img { height: 80px; transform: none; }
}

.about__desc {
	flex: 1 1 320px;
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-title);
	font-weight: var(--weight-light);
	line-height: 1.15;
	max-width: 455px;
}

/* Below the point where features (850px) + desc no longer fit side by side,
   stack them — desc above the features (directly under the section title). */
@media (max-width: 1180px) {
	.about__body { flex-direction: column; }
	.about__desc { order: -1; flex: none; max-width: 640px; }
	/* Header no longer pushed right once stacked; glow shifts far right, off
	   the left-aligned title/desc. */
	.about__head { margin-left: 0; }
	.about__noise { left: -32%; right: auto; width: 72%; }
}

@media (max-width: 900px) {
	.about__body { gap: clamp(24px, 5vw, 36px); }
	.about__features { grid-template-columns: 1fr; align-items: start; }
	.about__feature { max-width: none; }
	.about__feature:nth-child(2) { flex-direction: column; }
	/* Single column: image sits at the bottom like the others (undo the
	   reversed-column top anchor), and the card takes its natural height. */
	.about__feature:nth-child(2) .about__tile img { top: auto; bottom: 0; }
	.about__card { min-height: 0; flex: none; }
	.about__desc { max-width: none; }
	/* Full-cover noise with the top darkened so the muted header/desc stays
	   legible (no cropped-glow / flat-solid look). */
	.about__noise {
		inset: 0;
		width: auto;
		background-image:
			linear-gradient(180deg, rgba(49, 49, 46, 0.72) 0%, rgba(49, 49, 46, 0.15) 38%, rgba(49, 49, 46, 0) 60%),
			url(assets/images/about/bg-noise.svg);
		background-size: cover;
		background-position: center;
	}
}

/* ==========================================================================
   Lifestyle — blended background statement + four scattered image cards
   ========================================================================== */
.lifestyle {
	position: relative;
	overflow: hidden;
	background: var(--white);
	padding-top: clamp(64px, 9vw, 120px);
	padding-bottom: clamp(56px, 8vw, 100px);
}
.lifestyle__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: grid;
	place-items: center;
	padding-inline: clamp(20px, 4vw, 24px);
	pointer-events: none;
}
.lifestyle__bg p {
	margin: 0;
	width: 100%;
	max-width: 1345px;
	text-align: center;
	color: var(--paper);
	font-size: clamp(36px, 7vw, 95px);
	font-weight: var(--weight-light);
	line-height: 1.07;
	mix-blend-mode: multiply;
}
.lifestyle__bg strong { font-weight: var(--weight-medium); }

.lifestyle__inner {
	position: relative;
	z-index: 1;
	max-width: 1345px;
	box-sizing: content-box;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 24px);
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 6vw, 40px);
}
.lifestyle__col { display: contents; }

.lifestyle__card {
	width: 100%;
	border: 0.435px solid var(--ink);
	background: var(--white);
	padding: 10px 10px 24px;
}
.lifestyle__image { margin: 0; overflow: hidden; }
.lifestyle__image img { width: 100%; height: auto; object-fit: cover; display: block; }
.lifestyle__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
	padding-inline: 4px;
}
.lifestyle__card-title {
	margin: 0;
	font-size: 17.39px;
	line-height: 1.01;
	color: var(--ink);
	font-weight: var(--weight-light);
}
.lifestyle__card-title strong { font-weight: var(--weight-medium); }
.lifestyle__meta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.lifestyle__mark svg { width: 32px; height: 32px; display: block; }
.lifestyle__year {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	padding: 0 18px;
	background: var(--ink);
	color: #fff;
	font-size: 10.434px;
	font-weight: var(--weight-medium);
	line-height: 0;
	text-align: center;
}

/* Desktop: two offset columns, each card sized + a fixed image height. */
@media (min-width: 821px) {
	.lifestyle__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(24px, 3vw, 44px);
		align-items: start;
	}
	.lifestyle__col { display: block; min-width: 0; }
	.lifestyle__col--b { margin-top: 300px; }
	/* Each card drifts on scroll at its own speed/direction (reveal.js --parallax-y). */
	.lifestyle__card { transform: translateY(var(--parallax-y, 0px)); will-change: transform; }
	.lifestyle__col--b .lifestyle__card { margin-left: auto; }

	.lifestyle__col--a .lifestyle__card:nth-child(1) { max-width: 650px; margin-bottom: 180px; }
	.lifestyle__col--a .lifestyle__card:nth-child(1) .lifestyle__image img { height: 380px; }
	.lifestyle__col--a .lifestyle__card:nth-child(2) { max-width: 535px; }
	.lifestyle__col--a .lifestyle__card:nth-child(2) .lifestyle__image img { height: 506px; }
	.lifestyle__col--b .lifestyle__card:nth-child(1) { max-width: 422px; margin-bottom: 280px; }
	.lifestyle__col--b .lifestyle__card:nth-child(1) .lifestyle__image img { height: 248px; }
	.lifestyle__col--b .lifestyle__card:nth-child(2) { max-width: 650px; }
	.lifestyle__col--b .lifestyle__card:nth-child(2) .lifestyle__image img { height: 380px; }
}

/* ==========================================================================
   Products — left header, right arrow-driven slider (peeks the next slide)
   ========================================================================== */
.products {
	padding-top: clamp(56px, 8vw, 100px);
	padding-bottom: clamp(72px, 10vw, 130px);
}
.products__inner {
	max-width: 1348px;
	box-sizing: content-box;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 24px);
	display: grid;
	grid-template-columns: minmax(260px, 400px) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}
.products__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(20px, 2vw, 30px);
	padding-top: clamp(20px, 3vw, 48px);
	transition: opacity 0.4s ease;
}
.products__title { margin: 0; font-size: clamp(40px, 5.2vw, 65px); line-height: 1.08; }
.products__title > span, .products__title > strong { display: block; }
.products__title > span { font-weight: var(--weight-light); }
.products__title > strong { font-weight: var(--weight-semibold); }
.products__desc {
	margin: 0;
	max-width: 360px;
	color: var(--caption);
	font-size: var(--fs-title);
	font-weight: var(--weight-light);
	line-height: 1.15;
}

/* Track overflows to the right; off-viewport slides are clipped globally. */
.products__slider { position: relative; min-width: 0; }
.products__track {
	display: flex;
	gap: 12px;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
	cursor: grab;
	touch-action: pan-y;
}
.products__track.is-dragging { cursor: grabbing; }
.products__track img { user-select: none; -webkit-user-drag: none; pointer-events: none; }

.product {
	flex: 0 0 auto;
	width: min(540px, 82vw);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.product__card {
	position: relative;
	display: grid;
	grid-template-columns: 42% 1fr;
	min-height: 328px;
	background: linear-gradient(155deg, #ffffff 0%, #ececeb 100%);
	overflow: hidden;
}
.product__badges {
	position: absolute;
	top: 19px;
	right: 14px;
	z-index: 2;
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.product__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	padding: 0 13px;
	background: var(--ink);
	color: #fff;
	font-size: 8px;
	font-weight: var(--weight-medium);
	line-height: 0;
	white-space: nowrap;
}
.product__figure { position: relative; transform: rotate(14.309deg); }
.product__figure img {
	position: absolute;
	left: 4%;
	bottom: 0;
	width: 112%;
	height: 94%;
	object-fit: contain;
	object-position: left bottom;
}
.product__info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: clamp(20px, 2.4vw, 34px) clamp(20px, 2.4vw, 34px) clamp(20px, 2.4vw, 34px) clamp(8px, 1vw, 16px);
}
.product__brand { font-size: 14px; font-weight: var(--weight-medium); line-height: 1.01; color: var(--ink); }
.product__title {
	margin: 0;
	font-size: clamp(22px, 2vw, 28px);
	font-weight: var(--weight-light);
	line-height: 1.12;
	color: var(--ink);
}
.product__title strong { font-weight: var(--weight-semibold); }
.product__short {
	margin: 14px 0 0;
	font-size: 14px;
	font-weight: var(--weight-light);
	line-height: 1.12;
	color: var(--caption);
}

.product__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.product__cover { height: 76px; overflow: hidden; background: var(--white); }
.product__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product__buy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 76px;
	background: var(--white);
	color: var(--ink);
	font-size: var(--fs-base);
	font-weight: var(--weight-regular);
	text-decoration: none;
	transition: gap 0.3s ease;
}
.product__buy:hover { gap: 24px; }
.product__buy-arrow { display: inline-flex; }
.product__buy-arrow svg { width: 7px; height: 11px; display: block; }

.slider-nav { display: flex; gap: 12px; margin-top: clamp(28px, 3.4vw, 48px); }
.slider-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 49px;
	height: 44px;
	padding: 0;
	border: 0.5px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.slider-arrow svg { width: 7px; height: 11px; display: block; }
.slider-arrow:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 900px) {
	.products__inner { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); }
	.products__head { padding-top: 0; }
	.products__desc { max-width: 520px; }
}

/* ==========================================================================
   Instagram — left header + right drag slider of square posts
   ========================================================================== */
.insta {
	padding-top: clamp(56px, 8vw, 100px);
	padding-bottom: clamp(72px, 10vw, 130px);
}
.insta__inner {
	max-width: 1348px;
	box-sizing: content-box;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 24px);
	display: grid;
	grid-template-columns: minmax(260px, 400px) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}
.insta__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(18px, 2vw, 26px);
	padding-top: clamp(20px, 3vw, 48px);
}
.insta__title { margin: 0; font-size: clamp(40px, 5.4vw, 64px); font-weight: var(--weight-light); line-height: 1.05; letter-spacing: -0.01em; }
.insta__desc { margin: 0; max-width: 360px; color: var(--caption); font-size: var(--fs-title); font-weight: var(--weight-light); line-height: 1.15; }
.insta__cta { align-self: flex-start; margin-top: 6px; }

.insta__slider { position: relative; min-width: 0; }
.insta__track {
	display: flex;
	gap: 12px;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
	cursor: grab;
	touch-action: pan-y;
}
.insta__track.is-dragging { cursor: grabbing; }
.insta__track img { user-select: none; -webkit-user-drag: none; pointer-events: none; }
.insta__slide {
	flex: 0 0 auto;
	width: min(400px, 74vw);
	aspect-ratio: 1;
	overflow: hidden;
	display: block;
}
.insta__slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.insta__slide:hover img { transform: scale(1.05); }

@media (max-width: 900px) {
	.insta__inner { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); }
	.insta__head { padding-top: 0; }
	.insta__desc { max-width: 520px; }
}

/* ==========================================================================
   Partners — header (title left, desc right), faded logo strip, arch + bottle
   ========================================================================== */
.partners {
	position: relative;
	overflow: hidden;
	background: var(--paper);
	padding-top: clamp(56px, 8vw, 110px);
}
.partners__inner {
	max-width: 1348px;
	box-sizing: content-box;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 24px);
}
.partners__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
	gap: clamp(32px, 5vw, 90px);
	align-items: start;
}
.partners__intro { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2vw, 28px); }
.partners__title { margin: 0; font-size: clamp(38px, 5vw, 60px); line-height: 1.1; }
.partners__title > span, .partners__title > strong { display: block; }
.partners__title > span { font-weight: var(--weight-light); }
.partners__title > strong { font-weight: var(--weight-semibold); }
.partners__desc {
	margin: 0;
	padding-top: clamp(6px, 2vw, 40px);
	color: var(--caption);
	font-size: var(--fs-title);
	font-weight: var(--weight-light);
	line-height: 1.15;
}

.partners__logos {
	margin-top: clamp(40px, 6vw, 90px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.partners__logos ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 60px);
}
.partners__logos li { flex: 0 0 auto; }
.partners__logos img { height: clamp(20px, 2.2vw, 30px); width: auto; display: block; opacity: 0.5; filter: grayscale(1); transition: opacity 0.3s ease; }
.partners__logos a:hover img { opacity: 1; }

.partners__visual {
	position: relative;
	margin-top: clamp(36px, 6vw, 80px);
	display: grid;
	place-items: end center;
	min-height: clamp(260px, 32vw, 500px);
}
.partners__arch {
	width: min(760px, 86%);
	aspect-ratio: 2 / 1;
	align-self: end;
	border: clamp(64px, 9vw, 130px) solid var(--ink);
	border-bottom: 0;
	border-top-left-radius: 100%;
	border-top-right-radius: 100%;
	box-sizing: border-box;
}
.partners__bottle {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	height: clamp(320px, 44vw, 640px);
	width: auto;
	z-index: 1;
	pointer-events: none;
}

@media (max-width: 820px) {
	.partners__head { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 36px); }
	.partners__logos ul { flex-wrap: wrap; justify-content: center; gap: clamp(20px, 5vw, 36px); }
}

/* ==========================================================================
   Blog — same split layout as products; native-post cards in the slider
   ========================================================================== */
.blog {
	padding-top: clamp(56px, 8vw, 100px);
	padding-bottom: clamp(72px, 10vw, 130px);
}
.blog__inner {
	max-width: 1348px;
	box-sizing: content-box;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 24px);
	display: grid;
	grid-template-columns: minmax(260px, 400px) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}
.blog__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(20px, 2vw, 30px);
	padding-top: clamp(20px, 3vw, 48px);
	transition: opacity 0.4s ease;
}
.blog__title { margin: 0; font-size: clamp(40px, 5.4vw, 72px); font-weight: var(--weight-light); line-height: 1.08; }
.blog__title > strong { font-weight: var(--weight-semibold); }
.blog__desc {
	margin: 0;
	max-width: 360px;
	color: var(--caption);
	font-size: var(--fs-title);
	font-weight: var(--weight-light);
	line-height: 1.15;
}

.blog__slider { position: relative; min-width: 0; }
.blog__track {
	display: flex;
	gap: 10px;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
	cursor: grab;
	touch-action: pan-y;
}
.blog__track.is-dragging { cursor: grabbing; }
.blog__track img { user-select: none; -webkit-user-drag: none; pointer-events: none; }

.post {
	flex: 0 0 auto;
	width: min(490px, 84vw);
	display: flex;
	flex-direction: column;
}
.post__image { margin: 0 0 clamp(28px, 4vw, 54px); overflow: hidden; height: 310px; }
.post__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post__body {
	background: var(--paper);
	padding: clamp(28px, 3vw, 44px) 16px 16px clamp(24px, 2.8vw, 40px);
	display: flex;
	flex-direction: column;
}
.post__cat {
	font-size: 13px;
	font-weight: var(--weight-medium);
	line-height: 1.01;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ink);
}
.post__title {
	margin: 14px 0 0;
	font-size: clamp(26px, 2.6vw, 35px);
	font-weight: var(--weight-light);
	line-height: 1.01;
	color: var(--ink);
}
.post__title strong { font-weight: var(--weight-medium); }
.post__excerpt {
	margin: 30px 0 0;
	font-size: 16px;
	font-weight: var(--weight-light);
	line-height: 1.12;
	color: var(--caption);
}
.post__btn {
	margin-top: 27px;
	align-self: flex-end;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-width: clamp(180px, 20vw, 240px);
	padding: 18px 24px;
	background: var(--white);
	color: var(--ink);
	font-size: var(--fs-base);
	font-weight: var(--weight-regular);
	text-decoration: none;
	transition: gap 0.3s ease;
}
.post__btn:hover { gap: 32px; }
.post__btn-arrow { display: inline-flex; }
.post__btn-arrow svg { width: 7px; height: 11px; display: block; }

@media (max-width: 900px) {
	.blog__inner { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); }
	.blog__head { padding-top: 0; }
	.blog__desc { max-width: 520px; }
}

/* ==========================================================================
   Calories — full-bleed product photo, top-left title + caption
   ========================================================================== */
.calories {
	position: relative;
	height: 948px;
	padding-top: 150px;
	background-color: var(--paper);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}
.calories__inner {
	max-width: 1348px;
	box-sizing: content-box;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 24px);
}
.calories__content { max-width: 800px; }
.calories__title {
	margin: 0;
	color: var(--ink);
	font-size: clamp(34px, 4.6vw, 65px);
	line-height: 1.14;
}
.calories__title > span { display: block; font-weight: var(--weight-light); }
.calories__title > strong { display: block; font-weight: var(--weight-semibold); }
.calories__desc {
	margin: 24px 0 0;
	max-width: 520px;
	color: var(--caption);
	font-size: var(--fs-title);
	font-weight: var(--weight-light);
	line-height: 1.15;
}

@media (max-width: 1200px) { .calories { height: 780px; } }
@media (max-width: 900px) {
	.calories { height: 620px; background-position: 68% bottom; }
}
@media (max-width: 880px) { .calories { padding-top: 40px; } }
@media (max-width: 680px) { .calories { height: 800px; } }

/* ==========================================================================
   Taste statement — centred two-line title over a faint OVIA watermark
   ========================================================================== */
.taste {
	position: relative;
	overflow: hidden;
	background: var(--white);
	padding-top: clamp(80px, 12vw, 164px);
	padding-bottom: clamp(96px, 15vw, 200px);
}
.taste__watermark {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: grid;
	place-items: center;
	transform: translateY(var(--parallax-y, 0px));
	will-change: transform;
	pointer-events: none;
}
.taste__watermark svg { width: clamp(300px, 34vw, 500px); height: auto; display: block; }
.taste__inner {
	position: relative;
	z-index: 1;
	max-width: var(--content);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 24px);
}
.taste__title {
	width: fit-content;
	margin: 0 auto;
	color: var(--ink);
	font-size: clamp(38px, 6vw, 72px);
	line-height: 1.12;
	text-align: left;
}
.taste__title > span { display: block; font-weight: var(--weight-light); }
.taste__title > strong { display: block; font-weight: var(--weight-semibold); margin-left: 132px; }

@media (max-width: 600px) {
	.taste__title > strong { margin-left: clamp(24px, 12vw, 132px); }
}

/* ==========================================================================
   Footer — dark, noise glow, right-offset content, full-bleed wordmark, bar
   ========================================================================== */
.footer {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	color: var(--white);
}
.footer__noise {
	position: absolute;
	left: -10rem;
	top: -4rem;
	right: 0;
	bottom: 0;
	z-index: 0;
	background: url(assets/images/footer/noise.svg) center top / cover no-repeat;
	pointer-events: none;
}
.footer__inner {
	position: relative;
	z-index: 1;
	max-width: 1348px;
	box-sizing: content-box;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 24px);
	padding-top: clamp(72px, 11vw, 170px);
}
.footer__content {
	max-width: 864px;
	margin-left: auto;
	margin-right: clamp(0px, 7vw, 110px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.footer__title { margin: 0; font-size: clamp(34px, 5vw, 65px); line-height: 1.07; }
.footer__title > span, .footer__title > strong { display: block; }
.footer__title > span { font-weight: var(--weight-light); }
.footer__title > strong { font-weight: var(--weight-semibold); }

/* Muted contact + social caption (line-height 1 rather than the design's 0 so
   the stacked / two-line text doesn't collapse and overlap). */
.footer__contact a, .footer__social-text {
	color: #fff;
	font-size: 16px;
	font-weight: var(--weight-regular);
	line-height: 1;
	opacity: 0.25;
}
.footer__contact {
	margin-top: clamp(34px, 5vw, 60px);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.footer__contact a { text-decoration: none; transition: opacity 0.2s ease; }
.footer__contact a:hover { opacity: 0.6; }

.footer__social {
	margin-top: clamp(20px, 3vw, 32px);
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 36px);
}
.footer__social-text { margin: 0; line-height: 1.3; }
.footer__social-icons { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.footer__social-icons a { display: inline-flex; color: var(--white); opacity: 0.9; transition: opacity 0.2s ease; }
.footer__social-icons a:hover { opacity: 1; }
.footer__social-icons svg { width: 21px; height: 21px; display: block; }

.footer__nav {
	margin-top: clamp(44px, 7vw, 78px);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 2.4vw, 40px);
}
.footer__link {
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	font-weight: var(--weight-medium);
	line-height: 1;
	opacity: 0.45;
	transition: opacity 0.2s ease;
}
.footer__link:first-child, .footer__link:hover { opacity: 1; }

.footer__wordmark {
	position: relative;
	z-index: 1;
	margin-top: clamp(30px, 5vw, 48px);
}
.footer__wordmark svg { width: 100%; height: auto; display: block; }

.footer__copyright {
	position: relative;
	z-index: 1;
	padding-top: clamp(30px, 4vw, 48px);
	padding-bottom: clamp(28px, 4vw, 44px);
}
.footer__copyright-inner {
	max-width: 1348px;
	box-sizing: content-box;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 24px);
	text-align: right;
	color: #fff;
	font-size: 16px;
	font-weight: var(--weight-medium);
	line-height: 1;
}

@media (max-width: 900px) {
	.footer__content { max-width: none; margin-left: 0; margin-right: 0; }
	.footer__copyright-inner { text-align: left; }
}

/* ==========================================================================
   Reveal system (reveal.js) — a [data-reveal-root] section cascades its
   descendants in on scroll-in; each element on its own --rd delay.
   Types: noise (fade + settle scale), fade (rise), grow (scaleY up),
   slice (per-word rise + un-blur, staggered by --ci after --rt).
   ========================================================================== */
.has-reveal-js [data-reveal="fade"],
.has-reveal-js [data-reveal="in"],
.has-reveal-js [data-reveal="grow"],
.has-reveal-js [data-reveal="zoom"],
.has-reveal-js [data-reveal="noise"] { opacity: 0; }
.has-reveal-js [data-reveal="slice"] { visibility: hidden; }
[data-reveal="slice"].is-split { visibility: visible; }

/* Plain opacity fade — no transform. */
[data-reveal="noise"] { transition: opacity 1.6s ease; transition-delay: var(--rd, 0ms); }
[data-reveal="in"] { transition: opacity 0.8s ease; transition-delay: var(--rd, 0ms); }
[data-reveal="zoom"] {
	transform: scale(1.08);
	transition: opacity 1s ease, transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--rd, 0ms);
}
[data-reveal="fade"] {
	transform: translateY(26px);
	transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--rd, 0ms);
}
[data-reveal="grow"] {
	transform: scaleY(0.82) translateY(26px);
	transform-origin: bottom center;
	transition: opacity 0.7s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--rd, 0ms);
}
[data-reveal="slice"] .rw {
	display: inline-block;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(0.5em) rotate(2deg);
	filter: blur(6px);
	transition:
		opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
		filter 0.7s ease;
	transition-delay: calc(var(--rt, 0ms) + var(--ci) * 70ms);
	will-change: transform, opacity, filter;
}

[data-reveal-root].is-revealed [data-reveal="noise"] { opacity: 1; }
[data-reveal-root].is-revealed [data-reveal="in"] { opacity: 1; }
[data-reveal-root].is-revealed [data-reveal="zoom"] { opacity: 1; transform: scale(1); }
[data-reveal-root].is-revealed [data-reveal="fade"] { opacity: 1; transform: none; }
[data-reveal-root].is-revealed [data-reveal="grow"] { opacity: 1; transform: none; }
[data-reveal-root].is-revealed [data-reveal="slice"] .rw { opacity: 1; transform: none; filter: blur(0); }

/* Panel reveal: content animates only while its panel is active (and the
   section is revealed), so switching tabs replays the entry. */
.has-reveal-js [data-preveal] { opacity: 0; }
[data-preveal="fade"] {
	transform: translateY(26px);
	transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--rd, 0ms);
}
[data-preveal="zoom"] {
	transform: scale(1.08);
	transition: opacity 1s ease, transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--rd, 0ms);
}
[data-reveal-root].is-revealed .delivery__panel.is-active [data-preveal="fade"] { opacity: 1; transform: none; }
[data-reveal-root].is-revealed .delivery__panel.is-active [data-preveal="zoom"] { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
	[data-reveal], [data-reveal] .rw, [data-preveal] { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ==========================================================================
   Styleguide (/styleguide) — dev reference only
   ========================================================================== */
.sg { padding: var(--space-2xl) var(--space-l); max-width: 1360px; margin: 0 auto; }
.sg h2 { font-size: var(--fs-heading); font-weight: var(--weight-light); margin-bottom: var(--space-m); }
.sg h2 strong { font-weight: var(--weight-medium); }
.sg section { padding-block: var(--space-xl); border-top: 1px solid rgba(49,49,46,0.15); }
.sg section:first-of-type { border-top: 0; }
.sg__label { font-size: var(--fs-small); color: var(--caption); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-s); }

.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-s); }
.sg-swatch__chip { height: 96px; border: 1px solid rgba(49,49,46,0.15); }
.sg-swatch__name { font-weight: var(--weight-medium); margin-top: 8px; font-size: var(--fs-base); }
.sg-swatch__val { font-size: var(--fs-small); color: var(--caption); }

.sg-type > * + * { margin-top: var(--space-s); }
.sg-type__row { display: flex; align-items: baseline; gap: var(--space-m); flex-wrap: wrap; }
.sg-type__meta { font-size: var(--fs-small); color: var(--caption); min-width: 120px; }

.sg-row { display: flex; gap: var(--space-s); flex-wrap: wrap; align-items: center; }
.sg-row + .sg-row { margin-top: var(--space-s); }

.sg-spacing__bar { background: var(--ink); height: 24px; }
.sg-spacing__row { display: flex; align-items: center; gap: var(--space-s); margin-top: var(--space-s); }
.sg-spacing__meta { font-size: var(--fs-small); color: var(--caption); min-width: 120px; }