/* =================================================================
   Gold Touch — main.css v11.0.0
   Tokens / Reset / Type / Buttons / Magnetic / Cursor trail / Nav /
   Hero / Marquee / Heritage / Jar Assembly (WOW1) / Journey (WOW2) /
   Products + Size Compare (WOW3) / Blendz / Compare (WOW8) / Why /
   Where / Recipe Gallery (WOW5) / Howrah / Quotes / Instagram (WOW9)
   / Contact / Footer / Sub-pages / Mobile
   ================================================================= */

/* ---------- Tokens ---------- */
:root {
	--red: #D42B2B;
	--red-dark: #A81E1E;
	--red-deep: #7A1515;
	--yellow: #FFD700;
	--gold: #C8A23D;
	--gold-light: #E8D48B;
	--gold-deep: #8E7325;
	--white: #FFFFFF;
	--cream: #FAF6F0;
	--offwhite: #F2EDE5;
	--text: #1E1610;
	--text-mid: #5C4E3D;
	--text-light: #8A7D6E;
	--dark: #141008;
	--dark-2: #1F140A;

	--font-display: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--fs-hero: clamp(52px, 8vw, 110px);
	--fs-h1: clamp(36px, 5vw, 68px);
	--fs-h2: clamp(28px, 4vw, 52px);
	--fs-h3: clamp(20px, 2.5vw, 28px);
	--fs-body: clamp(15px, 1.05vw, 17px);

	--container: 1240px;
	--gutter: clamp(20px, 4vw, 56px);
	--ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--text);
	background: var(--cream);
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.no-scroll { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

.skip-link { position: absolute; left: -9999px; top: 0; padding: 12px 16px; background: var(--dark); color: var(--white); z-index: 1000; }
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Typography ---------- */
.eyebrow {
	display: inline-block;
	font: 500 11px var(--font-body);
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--text-light);
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--red { color: var(--red); }
em { font-style: italic; color: var(--gold); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0; }

/* ---------- Cursor trail (WOW6) ---------- */
.cursor-dot {
	position: fixed; pointer-events: none;
	z-index: 9999; border-radius: 50%;
	will-change: transform;
	mix-blend-mode: screen;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 26px;
	border-radius: 50px;
	font: 500 14px var(--font-body);
	letter-spacing: 0.3px;
	transition: background-color .25s, color .25s, box-shadow .25s, transform .35s var(--ease);
	cursor: pointer;
	white-space: nowrap;
	will-change: transform;
}
.btn svg { transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary { background: var(--red); color: var(--white); box-shadow: 0 12px 28px -10px rgba(212,43,43,.55); }
.btn--primary:hover { background: var(--red-dark); }

.btn--gold { background: var(--gold); color: var(--dark); }
.btn--gold:hover { background: var(--yellow); }

.btn--ghost { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.35); }
.btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--gold); color: var(--gold); }
.btn--ghost.btn--dark { color: var(--text); border-color: rgba(0,0,0,0.2); }
.btn--ghost.btn--dark:hover { color: var(--red); border-color: var(--red); background: transparent; }
.btn--sm { padding: 10px 18px; font-size: 12px; }

.link-arrow {
	display: inline-flex; align-items: center; gap: 8px;
	font: 500 12px var(--font-body);
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--red);
	border-bottom: 1px solid currentColor;
	padding-bottom: 4px;
	transition: gap .25s var(--ease), color .25s;
	will-change: transform;
}
.link-arrow:hover { gap: 12px; }
.link-arrow--gold { color: var(--gold); }

/* ---------- Magnetic buttons (WOW7) — JS adds inline transform ---------- */
.btn-magnetic { will-change: transform; }

/* ---------- Nav ---------- */
.nav {
	position: fixed; top: 0; left: 0; right: 0;
	z-index: 100;
	padding: 18px 0;
	transition: background .35s var(--ease), padding .35s, border-color .35s;
	border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	padding: 12px 0;
	border-bottom-color: rgba(0,0,0,0.06);
}
.nav__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px;
}
.nav__brand img { height: 52px; width: auto; border-radius: 8px; box-shadow: 0 6px 18px -8px rgba(0,0,0,0.4); }
.nav__menu { display: flex; gap: 30px; }
.nav__menu a {
	position: relative;
	font: 500 13px var(--font-body);
	letter-spacing: 0.6px;
	color: rgba(255,255,255,0.85);
	transition: color .25s;
}
.nav__menu a::after {
	content: ''; position: absolute; left: 0; bottom: -6px;
	width: 0; height: 1px; background: currentColor;
	transition: width .3s var(--ease);
}
.nav__menu a:hover::after { width: 100%; }
.nav.is-scrolled .nav__menu a { color: var(--text); }
.nav__right { display: flex; align-items: center; gap: 14px; }
.nav__cta {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 20px; border-radius: 50px;
	background: var(--gold); color: var(--dark);
	font: 600 12px var(--font-body); letter-spacing: 1px; text-transform: uppercase;
	transition: background .25s;
}
.nav__cta:hover { background: var(--yellow); }
.nav__burger { display: none; width: 38px; height: 38px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav__burger span { display: block; width: 22px; height: 1.5px; background: var(--white); transition: background .25s; }
.nav.is-scrolled .nav__burger span { background: var(--text); }

/* ---------- Mobile menu ---------- */
.mobile-menu {
	position: fixed; top: 0; right: 0; bottom: 0;
	width: min(420px, 88vw);
	background: var(--dark);
	color: var(--white);
	z-index: 200;
	transform: translateX(100%);
	transition: transform .45s var(--ease);
	display: flex; flex-direction: column;
	padding: 24px 28px 32px;
	overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.mobile-menu__brand img { height: 56px; border-radius: 8px; }
.mobile-menu__close { color: var(--gold); padding: 8px; }
.mobile-menu__links { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu__links a {
	display: flex; align-items: baseline; gap: 18px;
	font-family: var(--font-display);
	font-size: 32px; font-weight: 500;
	padding: 12px 0;
	border-bottom: 1px solid rgba(200,162,61,0.2);
	color: var(--white);
	transition: color .25s, padding-left .25s var(--ease);
}
.mobile-menu__links a span { font-family: var(--font-body); font-size: 11px; letter-spacing: 2px; color: var(--gold); }
.mobile-menu__links a:hover { color: var(--gold); padding-left: 8px; }
.mobile-menu__foot { margin-top: auto; padding-top: 32px; font-size: 12px; color: rgba(255,255,255,0.55); }
.mobile-menu__foot p { margin: 6px 0; }
.mobile-menu__foot a { color: var(--gold); }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	min-height: max(90vh, 580px);
	background: linear-gradient(135deg, #141008 0%, #7A1515 38%, #D42B2B 70%, #7A1515 100%);
	color: var(--white);
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 100px 0 60px;
}
.hero::after {
	content: '';
	position: absolute; inset: 0;
	background-image: radial-gradient(circle, rgba(200,162,61,0.18) 1px, transparent 1px);
	background-size: 42px 42px;
	pointer-events: none;
	mix-blend-mode: overlay;
	opacity: 0.4;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.18; filter: blur(4px) saturate(0.9); mix-blend-mode: multiply; z-index: 0; }
.hero__particles { position: absolute; inset: 0; }
.particle {
	position: absolute;
	top: var(--top); left: var(--left);
	width: var(--size); height: var(--size);
	background: var(--yellow);
	border-radius: 50%;
	box-shadow: 0 0 12px rgba(255,215,0,0.6);
	animation: gt-float var(--duration) ease-in-out infinite;
}
@keyframes gt-float {
	0%, 100% { transform: translate(0, 0); }
	25%      { transform: translate(var(--dx1), var(--dy1)); }
	75%      { transform: translate(var(--dx2), var(--dy2)); }
}

.hero__inner {
	position: relative; z-index: 2;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 60px;
	align-items: center;
	width: 100%;
}
.hero__copy { max-width: 580px; }
.hero-badge {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 16px;
	border: 1px solid rgba(200,162,61,0.4);
	border-radius: 50px;
	background: rgba(20,16,8,0.4);
	color: var(--gold);
	font: 500 11px var(--font-body);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.hero-title {
	font-family: var(--font-display);
	font-size: var(--fs-hero);
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: 18px;
	color: var(--white);
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title em { color: var(--gold-light); font-style: italic; }
.hero-sub { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,0.78); margin-bottom: 24px; max-width: 460px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.hero-stats { display: flex; align-items: center; gap: 22px; }
.hero-stats .stat { display: flex; flex-direction: column; gap: 4px; }
.stat__num { font-family: var(--font-display); font-size: 36px; font-weight: 500; color: var(--yellow); line-height: 1; }
.stat__label { font: 500 10px var(--font-body); letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.stat__sep { width: 1px; height: 28px; background: rgba(200,162,61,0.4); }
.hero__visual {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	min-height: 460px;
}
.hero-ring { position: absolute; border: 1px dashed rgba(200,162,61,0.25); border-radius: 50%; animation: gt-spin 50s linear infinite; }
.hero-ring--1 { width: 320px; height: 320px; }
.hero-ring--2 { width: 460px; height: 460px; animation-direction: reverse; animation-duration: 70s; border-color: rgba(255,215,0,0.18); }
.hero-ring--3 { width: 600px; height: 600px; animation-duration: 90s; border-style: dotted; border-color: rgba(200,162,61,0.15); }
@keyframes gt-spin { to { transform: rotate(360deg); } }
.hero-product {
	position: relative; z-index: 2;
	max-height: 420px; width: auto;
	filter: drop-shadow(0 30px 50px rgba(0,0,0,0.45)) drop-shadow(0 0 30px rgba(205,155,29,0.18));
	animation: gt-bob 5s ease-in-out infinite;
}
@keyframes gt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.hero-glow { position: absolute; width: 320px; height: 320px; background: radial-gradient(circle, rgba(255,215,0,0.25) 0%, transparent 60%); filter: blur(20px); z-index: 1; }
.hero__scroll { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font: 500 10px var(--font-body); letter-spacing: 4px; color: rgba(255,255,255,0.5); z-index: 3; }
.hero__scroll-line { width: 1px; height: 32px; background: var(--gold); animation: gt-pulse 2s ease-in-out infinite; transform-origin: top; }
@keyframes gt-pulse { 0%, 100% { transform: scaleY(0.3); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- Marquee ---------- */
.marquee { background: var(--dark); color: var(--gold); padding: 14px 0; border-top: 1px solid rgba(200,162,61,0.18); border-bottom: 1px solid rgba(200,162,61,0.18); overflow: hidden; white-space: nowrap; }
.marquee__track {
	display: inline-flex; gap: 40px;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 16px;
	letter-spacing: 1px;
	animation: gt-marquee 28s linear infinite;
}
.marquee__track > span { display: inline-flex; gap: 40px; align-items: center; }
.marquee__sep { color: rgba(200,162,61,0.5); }
@keyframes gt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Heritage ---------- */
.heritage { background: var(--cream); padding: clamp(80px, 12vw, 160px) 0 100px; position: relative; }
.heritage::before {
	content: 'Heritage';
	position: absolute; top: 32px; right: 5%;
	font-family: var(--font-display);
	font-style: italic; font-size: clamp(120px, 18vw, 240px);
	color: rgba(200,162,61,0.06);
	pointer-events: none;
	letter-spacing: -0.03em;
	line-height: 1;
}
.heritage__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(20px, 4vw, 60px);
	align-items: center;
	position: relative;
}
.heritage__copy { padding-right: 24px; position: relative; z-index: 2; }
.heritage__title { font-size: clamp(40px, 5.5vw, 72px); margin: 18px 0 26px; letter-spacing: -0.015em; }
.heritage__lede { font-size: 18px; line-height: 1.6; color: var(--text); margin-bottom: 18px; max-width: 560px; }
.heritage__body { color: var(--text-mid); margin-bottom: 30px; max-width: 540px; }
.heritage__media { position: relative; }
.heritage__img-wrap { position: relative; margin-left: -80px; z-index: 1; }
.heritage__img-wrap img { width: 100%; border-radius: 14px; box-shadow: 0 30px 60px -28px rgba(0,0,0,0.35); position: relative; z-index: 2; }
.heritage__img-wrap::after { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--gold); border-radius: 14px; z-index: 1; }
.heritage__badge { position: absolute; right: -22px; bottom: -18px; background: var(--white); padding: 14px 22px; border-radius: 12px; box-shadow: 0 18px 40px -14px rgba(0,0,0,0.25); z-index: 3; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.heritage__badge-mark { font: 700 14px var(--font-body); letter-spacing: 2px; color: var(--red); }
.heritage__badge-sub { font: 500 10px var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-mid); }
.heritage__counters {
	max-width: var(--container);
	margin: clamp(60px, 8vw, 110px) auto 0;
	padding: 36px var(--gutter) 0;
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 28px;
	border-top: 1px solid rgba(200,162,61,0.25);
}
.counter { display: flex; flex-direction: column; gap: 6px; min-width: 130px; }
.counter__num { font-family: var(--font-display); font-size: clamp(40px, 4.5vw, 56px); font-weight: 500; color: var(--red); line-height: 1; letter-spacing: -0.01em; }
.counter__label { font: 500 11px var(--font-body); letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-mid); }

/* ---------- Jar Assembly (WOW1) ---------- */
.jar { background: var(--dark); color: var(--white); position: relative; }
.jar__pin {
	height: 100vh;
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	grid-template-areas: "head" "stage" "steps" "progress";
}
.jar__bg {
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at 50% 30%, rgba(212,43,43,0.18) 0%, transparent 55%),
		radial-gradient(ellipse at 50% 80%, rgba(200,162,61,0.14) 0%, transparent 60%),
		linear-gradient(180deg, #14100A 0%, #1F140A 100%);
}
.jar__particles { position: absolute; inset: 0; }
.jar-particle {
	position: absolute; width: 3px; height: 3px;
	background: var(--gold); border-radius: 50%;
	opacity: 0.35; box-shadow: 0 0 8px rgba(200,162,61,0.6);
	animation: jar-float ease-in-out infinite;
}
@keyframes jar-float { 0%,100% { transform: translateY(0); opacity: 0.2; } 50% { transform: translateY(-30px); opacity: 0.6; } }

.jar__head {
	grid-area: head;
	position: relative; z-index: 2;
	text-align: center;
	padding: clamp(40px, 5vh, 70px) var(--gutter) 0;
}
.jar__title { font-size: clamp(30px, 4vw, 52px); margin: 10px 0 10px; color: var(--white); }
.jar__title em { color: var(--gold); }
.jar__sub { color: rgba(255,255,255,0.65); font-size: 15px; max-width: 540px; margin: 0 auto; line-height: 1.55; }

.jar__stage {
	grid-area: stage;
	position: relative; z-index: 2;
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	padding: 24px var(--gutter);
	min-height: 0;
}
.jar__counter { display: none; }

.jar-build {
	position: relative;
	width: 320px; height: 480px;
	display: flex; align-items: flex-end; justify-content: center;
	transform: scale(var(--jar-fit, 1));
	transform-origin: center;
}
@media (max-height: 920px) { .jar-build { --jar-fit: 0.88; } }
@media (max-height: 800px) { .jar-build { --jar-fit: 0.78; } }
@media (max-height: 700px) { .jar-build { --jar-fit: 0.7; } }
/* Cap — 110% of jar body width (242px), 30px tall, two-tier metallic gold */
.jar-cap {
	position: absolute; top: 70px; left: 50%;
	transform: translate(-50%, -200px);
	width: 242px; height: 30px;
	z-index: 5;
	opacity: 0;
	will-change: transform, opacity;
}
.jar-cap__top {
	display: block;
	width: 100%; height: 22px;
	background: linear-gradient(180deg, #E8D48B 0%, #D4B548 30%, #C8A23D 65%, #8E7325 100%);
	border-radius: 12px 12px 4px 4px;
	box-shadow:
		inset 0 3px 6px rgba(255,255,255,0.45),
		inset 0 -4px 8px rgba(0,0,0,0.28),
		0 10px 22px rgba(0,0,0,0.4);
	position: relative;
}
.jar-cap__top::before {
	content: ''; position: absolute; top: 6px; left: 14px; right: 14px; height: 3px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
	border-radius: 2px;
}
.jar-cap__rim {
	display: block;
	width: 91%; margin: 0 auto;
	height: 8px;
	background: linear-gradient(180deg, #8E7325, #C8A23D);
	border-radius: 0 0 6px 6px;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.45);
}

/* Body */
.jar-body {
	position: relative;
	width: 220px; height: 380px;
	background:
		linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.08) 100%);
	border: 1.5px solid rgba(255,255,255,0.18);
	border-radius: 24px 24px 36px 36px;
	overflow: hidden;
	z-index: 2;
	opacity: 0;
	transform: translateY(20px) scale(0.95);
	box-shadow:
		inset 6px 0 18px rgba(255,255,255,0.06),
		inset -6px 0 18px rgba(0,0,0,0.4),
		0 30px 60px -25px rgba(0,0,0,0.6);
	will-change: transform, opacity;
}
.jar-body__shine {
	position: absolute; top: 12px; left: 14px;
	width: 18px; height: 70%;
	background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
	border-radius: 50%;
	opacity: 0.6;
	pointer-events: none;
	z-index: 4;
}
.jar-body__bottom {
	position: absolute; bottom: 0; left: 0; right: 0; height: 30px;
	background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
	pointer-events: none;
}

/* Liquid fill — scaleY transform (transform-only animation, GPU compositor) */
.jar-fill {
	position: absolute; bottom: 0; left: 0; right: 0;
	height: 100%;
	overflow: hidden;
	z-index: 1;
	transform: scaleY(0);
	transform-origin: bottom;
	will-change: transform;
}
.jar-fill__inner {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, #CD9B1D 0%, #B58817 35%, #9C7415 70%, #8B6914 100%);
}
.jar-fill__inner::before {
	content: ''; position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at 30% 20%, rgba(255,235,180,0.3) 0%, transparent 30%),
		radial-gradient(ellipse at 70% 70%, rgba(255,235,180,0.15) 0%, transparent 35%);
}
.jar-fill__surface {
	position: absolute; top: 0; left: 0; right: 0; height: 8px;
	background: linear-gradient(180deg, #E0B23A, transparent);
	box-shadow: 0 1px 6px rgba(205,155,29,0.55);
}

/* Label */
.jar-label {
	position: absolute; top: 130px; left: -10%;
	width: 120%;
	height: 130px;
	z-index: 3;
	opacity: 0;
	transform: translateX(-180%);
	will-change: transform, opacity;
}
.jar-label__inner {
	position: relative;
	height: 100%;
	background: linear-gradient(180deg, #D42B2B 0%, #A81E1E 100%);
	border-top: 1px solid rgba(255,215,0,0.35);
	border-bottom: 1px solid rgba(255,215,0,0.35);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px;
	box-shadow: inset 0 0 20px rgba(0,0,0,0.25);
}
.jar-label__brand { font-family: var(--font-display); font-style: italic; font-size: 32px; color: var(--yellow); letter-spacing: 1px; line-height: 1; }
.jar-label__rule { width: 32px; height: 1px; background: rgba(255,215,0,0.7); }
.jar-label__sub { font: 500 9px var(--font-body); color: rgba(255,255,255,0.85); letter-spacing: 3px; text-transform: uppercase; }

.jar-glow {
	position: absolute; top: 50%; left: 50%;
	width: 380px; height: 480px;
	background: radial-gradient(ellipse, rgba(255,215,0,0.35) 0%, transparent 60%);
	filter: blur(28px);
	transform: translate(-50%, -50%);
	opacity: 0;
	pointer-events: none;
	z-index: 0;
	will-change: opacity;
}

.jar__steps {
	grid-area: steps;
	position: relative;
	width: 100%; min-height: 56px;
	text-align: center;
	padding: 0 var(--gutter);
	z-index: 3;
}
.jar__step {
	position: absolute; left: 50%; top: 0;
	transform: translateX(-50%) translateY(12px);
	opacity: 0;
	transition: opacity .4s var(--ease), transform .4s var(--ease);
	display: inline-flex; align-items: baseline; gap: 14px;
	white-space: nowrap;
	will-change: transform, opacity;
}
.jar__step.is-active { opacity: 1; transform: translateX(-50%) translateY(0); }
.jar__step span { font-family: var(--font-display); font-size: 22px; color: var(--gold); }
.jar__step p { font: 400 17px var(--font-body); color: rgba(255,255,255,0.85); margin: 0; }

.jar__progress {
	grid-area: progress;
	position: relative;
	margin: 0 auto;
	width: 200px; height: 2px;
	background: rgba(255,255,255,0.14);
	border-radius: 2px; overflow: hidden; z-index: 3;
	margin-bottom: clamp(20px, 4vh, 36px);
	margin-top: 14px;
}
.jar__progress-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--yellow)); transition: width 0.1s linear; }

/* ---------- Journey (WOW2) ---------- */
.journey { position: relative; }
.journey__pin {
	height: 100vh;
	overflow: hidden;
	position: relative;
}
.journey__hud {
	position: absolute; top: 28px; left: 0; right: 0;
	z-index: 5;
	display: flex; justify-content: space-between; align-items: center;
	padding: 0 var(--gutter);
}
.journey__counter { font: 500 12px var(--font-body); letter-spacing: 2px; color: var(--gold); }
.journey__counter span { font-family: var(--font-display); font-size: 28px; color: var(--yellow); margin-right: 6px; }

.journey__track { display: flex; height: 100%; will-change: transform; }
.journey-panel { width: 100vw; height: 100%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; color: var(--white); background: var(--dark); }
.journey-panel__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.journey-panel__overlay {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(135deg, rgba(20,16,8,0.78) 0%, rgba(20,16,8,0.55) 50%, rgba(122,21,21,0.45) 100%);
}
.journey-panel__inner {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; align-items: flex-start;
	max-width: var(--container); width: 100%;
	padding: 0 var(--gutter);
}
.journey-panel__copy { max-width: 640px; }
.journey-panel__kicker {
	display: inline-block;
	font: 500 11px var(--font-body);
	letter-spacing: 3px; text-transform: uppercase;
	margin-bottom: 18px;
	color: var(--gold-light);
}
.journey-panel__title {
	font-family: var(--font-display);
	font-size: clamp(48px, 7vw, 88px);
	line-height: 1; letter-spacing: -0.02em;
	margin-bottom: 24px;
	color: var(--white);
	text-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.journey-panel__title em { font-style: italic; color: var(--gold-light); background: linear-gradient(180deg, #CD9B1D, #8B6914); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.journey-panel__body { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.88); text-shadow: 0 2px 16px rgba(0,0,0,0.5); max-width: 520px; }

.journey-panel--cream .journey-panel__overlay { background: linear-gradient(135deg, rgba(122,21,21,0.62) 0%, rgba(20,16,8,0.55) 100%); }
.journey-panel--white .journey-panel__overlay { background: linear-gradient(135deg, rgba(20,16,8,0.55) 0%, rgba(142,115,37,0.45) 100%); }
.journey-panel--amber .journey-panel__overlay { background: linear-gradient(135deg, rgba(139,105,20,0.55) 0%, rgba(20,16,8,0.55) 100%); }
.journey-panel--dark .journey-panel__overlay { background: linear-gradient(135deg, rgba(20,16,8,0.85) 0%, rgba(31,20,10,0.65) 100%); }
.journey-panel--red .journey-panel__overlay { background: linear-gradient(135deg, rgba(122,21,21,0.78) 0%, rgba(212,43,43,0.45) 100%); }

.journey__progress { position: absolute; bottom: 28px; left: 0; right: 0; padding: 0 var(--gutter); height: 2px; z-index: 5; }
.journey__progress-fill { display: block; height: 100%; width: 0%; background: var(--gold); transition: width 0.1s linear; }

.journey__mobile { display: none; }

/* ---------- Products / Size Compare (WOW3) ---------- */
.products {
	background: linear-gradient(180deg, #14100A 0%, #1F140A 100%);
	color: var(--white);
	padding: clamp(80px, 10vw, 130px) 0 clamp(80px, 10vw, 130px);
	position: relative;
	overflow: hidden;
}
.products__head { max-width: 760px; margin: 0 auto 60px; padding: 0 var(--gutter); text-align: center; }
.products__title { font-size: clamp(40px, 5vw, 64px); color: var(--white); margin: 12px 0 16px; }
.products__title em { color: var(--gold); }
.products__sub { color: rgba(255,255,255,0.65); font-size: 17px; }

.products__lineup {
	--jar-base: clamp(180px, 30vw, 380px);
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(16px, 3vw, 48px);
	min-height: 420px;
	overflow: visible;
}
.products__cell {
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	flex: 0 1 auto;
	min-width: 0;
	transition: opacity .45s var(--ease), filter .45s var(--ease);
	color: inherit;
	font: inherit;
}
.products__cell-img {
	display: block;
	height: calc(var(--jar-base, 320px) * var(--scale, 1));
	width: auto;
	max-width: 100%;
	transform-origin: bottom center;
	filter: drop-shadow(0 28px 40px rgba(0,0,0,0.55)) drop-shadow(0 0 24px rgba(205,155,29,0.18));
	transition: height .55s cubic-bezier(.34,1.4,.6,1), filter .45s var(--ease);
	will-change: height, filter;
	mix-blend-mode: multiply;
}
.products[data-products] .products__cell { opacity: 1; }
/* Hover: dim siblings, zoom hovered (height-based, layout-aware) */
.products__lineup:hover .products__cell:not(:hover) { opacity: 0.4; filter: saturate(0.85); }
.products__lineup:hover .products__cell:hover .products__cell-img { height: calc(var(--jar-base, 320px) * var(--scale, 1) * 1.12); filter: drop-shadow(0 30px 50px rgba(0,0,0,0.6)) drop-shadow(0 0 32px rgba(205,155,29,0.4)); }
/* Active (clicked) persists outside hover */
.products__lineup:not(:hover) .products__cell:not(.is-active) { opacity: 0.55; }
.products__cell.is-active .products__cell-img { height: calc(var(--jar-base, 320px) * var(--scale, 1) * 1.12); filter: drop-shadow(0 30px 50px rgba(0,0,0,0.6)) drop-shadow(0 0 32px rgba(205,155,29,0.4)); }

/* Kitchen-counter / shelf line beneath the jars (clear of jars + clear of labels) */
.products__shelf {
	max-width: 1200px;
	margin: 12px auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(200,162,61,0.55) 20%, rgba(200,162,61,0.55) 80%, transparent 100%);
	box-shadow: 0 8px 24px -10px rgba(205,155,29,0.35);
}

/* Labels row below the shelf */
.products__labels {
	max-width: 1200px;
	margin: 16px auto 50px;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(28px, 5vw, 80px);
	text-align: center;
}
.products__label {
	background: transparent;
	border: 0;
	padding: 6px 4px;
	cursor: pointer;
	font: 500 11px var(--font-body);
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.55);
	transition: color .35s var(--ease);
	white-space: nowrap;
}
.products__label:hover, .products__label.is-active { color: var(--gold); }

/* Mobile swiper hidden by default; activated below 769px via the mobile media query */
.products__mobile-swiper { display: none; }
.products__mslide { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 8px 12px; text-align: center; color: var(--white); }
.products__mslide-img-wrap { display: flex; align-items: center; justify-content: center; min-height: 320px; width: 100%; }
.products__mslide-img { max-height: 300px; width: auto; mix-blend-mode: multiply; filter: drop-shadow(0 24px 36px rgba(0,0,0,0.55)) drop-shadow(0 0 28px rgba(205,155,29,0.25)); }
.products__mslide-tag { padding: 5px 14px; border: 1px solid var(--gold); border-radius: 50px; font: 500 10px var(--font-body); letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); }
.products__mslide-name { font-family: var(--font-display); font-size: 44px; line-height: 1; letter-spacing: -0.015em; color: var(--white); margin: 0; }
.products__mslide-weight { font: 500 11px var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-light); }
.products__mslide-desc { color: rgba(255,255,255,0.72); font-size: 15px; line-height: 1.55; max-width: 360px; margin: 0; }
.products__mslide-meta { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.1); width: 100%; max-width: 320px; margin-top: 4px; }
.products__mslide-mrp { color: rgba(255,255,255,0.55); font-size: 13px; letter-spacing: 1px; }
.products__mslide-mrp strong { color: var(--white); font-weight: 600; margin-left: 6px; }
.products__mobile-swiper .swiper-pagination { position: relative; margin-top: 24px; bottom: auto; }
.products__mobile-swiper .swiper-pagination-bullet { width: 8px; height: 8px; background: rgba(255,255,255,0.25); opacity: 1; transition: background .25s, transform .25s; }
.products__mobile-swiper .swiper-pagination-bullet-active { background: var(--gold); transform: scale(1.3); }

.products__details {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--gutter);
	min-height: 220px;
	text-align: center;
}
.products__detail {
	position: absolute; inset: 0 var(--gutter);
	display: flex; flex-direction: column; align-items: center; gap: 14px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .5s var(--ease), transform .5s var(--ease);
	pointer-events: none;
}
.products__detail.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.products__tag {
	display: inline-block; width: max-content;
	padding: 6px 14px;
	border: 1px solid var(--gold);
	border-radius: 50px;
	font: 500 10px var(--font-body); letter-spacing: 2.5px; text-transform: uppercase;
	color: var(--gold);
}
.products__name { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); color: var(--white); letter-spacing: -0.015em; line-height: 1; }
.products__desc { color: rgba(255,255,255,0.72); font-size: 17px; line-height: 1.55; max-width: 540px; margin: 0 auto; }
.products__meta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 8px; }
.products__weight { font: 500 11px var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-light); }
.products__mrp { color: rgba(255,255,255,0.5); font-size: 13px; letter-spacing: 1px; }
.products__mrp strong { color: var(--white); font-weight: 600; margin-left: 6px; }

/* ---------- Blendz ---------- */
.blendz { background: var(--cream); padding: clamp(80px, 10vw, 130px) 0 100px; }
.blendz__head { max-width: var(--container); margin: 0 auto 50px; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.blendz__title { font-size: clamp(36px, 5vw, 60px); margin-top: 14px; }
.blendz__sub { color: var(--text-mid); font-size: 17px; line-height: 1.55; max-width: 480px; justify-self: end; }
.blendz__swiper { padding: 0 var(--gutter); overflow: visible; }
.blendz-card {
	background: var(--white);
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 20px 50px -28px rgba(0,0,0,0.18);
	display: flex; flex-direction: column; gap: 18px;
	transition: transform .35s var(--ease), box-shadow .35s;
	width: 280px;
	height: 360px;
}
.blendz-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(0,0,0,0.28); }
.blendz-card__media { height: 200px; display: flex; align-items: center; justify-content: center; background: var(--offwhite); border-radius: 12px; }
.blendz-card__media img { max-height: 180px; width: auto; }
.blendz-card__weight { font: 500 10px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.blendz-card__name { font-size: 22px; font-weight: 500; }
.blendz__foot { max-width: var(--container); margin: 50px auto 0; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.blendz__nav { display: flex; gap: 10px; }
.blendz__btn {
	width: 44px; height: 44px;
	border: 1px solid rgba(0,0,0,0.15);
	border-radius: 50%;
	color: var(--text);
	display: inline-flex; align-items: center; justify-content: center;
	transition: all .25s;
}
.blendz__btn:hover { background: var(--gold); color: var(--dark); border-color: var(--gold); }

/* ---------- Compare (WOW8) ---------- */
.compare {
	background: linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
	padding: clamp(80px, 10vw, 130px) 0;
}
.compare__head { max-width: 760px; margin: 0 auto 60px; padding: 0 var(--gutter); text-align: center; }
.compare__title { font-size: clamp(36px, 5vw, 56px); margin: 14px 0 18px; }
.compare__sub { color: var(--text-mid); font-size: 17px; }
.compare__grid {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: flex;
	flex-direction: column;
	border-radius: 18px;
	background: var(--white);
	box-shadow: 0 30px 60px -32px rgba(0,0,0,0.2);
	overflow: hidden;
}
.compare__head-row {
	display: grid;
	grid-template-columns: 140px 1fr 1fr;
	border-bottom: 1px solid rgba(200,162,61,0.2);
	background: var(--cream);
}
.compare__h-spacer { background: transparent; }
.compare__h-them, .compare__h-us {
	padding: 22px 24px;
	display: flex; align-items: center;
	font: 600 11px var(--font-body);
	letter-spacing: 2.5px; text-transform: uppercase;
}
.compare__h-them { background: rgba(0,0,0,0.03); color: var(--text-light); }
.compare__h-us   { background: rgba(205,155,29,0.06); color: var(--red); font-weight: 700; }

.compare__row {
	display: grid;
	grid-template-columns: 140px 1fr 1fr;
	min-height: 60px;
	border-bottom: 1px solid rgba(200,162,61,0.15);
	transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.compare__row:last-of-type { border-bottom: 0; }
.compare__label {
	padding: 20px 24px;
	font: 600 12px var(--font-body); letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--text-light);
	background: var(--cream);
	display: flex; align-items: center;
}
.compare__cell {
	padding: 20px;
	display: flex; align-items: center; gap: 12px;
	font-size: 15px;
	line-height: 1.4;
}
.compare__cell--them { color: var(--text-light); background: rgba(0,0,0,0.03); }
.compare__cell--us   { color: var(--text); background: rgba(205,155,29,0.04); font-weight: 600; }
.compare__cell--us strong { font-weight: 700; color: var(--text); }

.compare__x { color: var(--text-light); flex-shrink: 0; opacity: 0.55; }
.compare__check { color: var(--red); flex-shrink: 0; }
.compare__check-path {
	stroke-dasharray: 30;
	stroke-dashoffset: 30;
	transition: stroke-dashoffset 0.5s var(--ease);
}
.compare__row.is-revealed .compare__check-path { stroke-dashoffset: 0; }

.compare__foot { text-align: center; margin-top: 50px; }

/* ---------- Why / Promise ---------- */
.why { background: var(--cream); padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 10vw, 140px); position: relative; overflow: hidden; }
.why::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(200,162,61,0.25); }
.why__head { max-width: var(--container); margin: 0 auto 60px; padding: 0 var(--gutter); text-align: center; }
.why__title { font-size: clamp(28px, 3.5vw, 42px); margin-top: 14px; color: var(--text-mid); font-weight: 400; }
.why__rows { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); }
.why__row {
	display: flex; flex-wrap: nowrap; align-items: baseline;
	gap: 22px;
	padding: 32px 0;
}
.why__num {
	font-family: var(--font-display);
	font-size: 80px;
	font-weight: 500;
	color: var(--red);
	line-height: 1;
	letter-spacing: -0.04em;
	flex-shrink: 0;
	min-width: 200px;
}
.why__num small { font-size: 0.42em; color: var(--gold); margin-left: 4px; font-weight: 500; }
.why__sep { font-family: var(--font-display); font-size: 32px; color: var(--gold); flex-shrink: 0; line-height: 1; }
.why__text { color: var(--text); font-family: var(--font-body); font-size: 20px; line-height: 1.5; flex: 1; max-width: 600px; }
.why__divider { display: block; max-width: 1100px; margin: 0; height: 1px; background: rgba(200,162,61,0.2); }

/* ---------- Where ---------- */
.where { background: var(--white); padding: clamp(80px, 10vw, 130px) 0; text-align: center; }
.where__head { max-width: 800px; margin: 0 auto 50px; padding: 0 var(--gutter); }
.where__title { font-size: clamp(36px, 5vw, 56px); margin: 14px 0 16px; }
.where__sub { color: var(--text-mid); font-size: 17px; }
.where__pills { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.platform-pill {
	display: inline-flex; align-items: center; gap: 14px;
	padding: 12px 22px 12px 12px;
	border: 1px solid var(--offwhite);
	border-radius: 50px;
	font: 500 14px var(--font-body);
	color: var(--text);
	transition: border-color .25s, background .25s, box-shadow .25s, transform .25s var(--ease);
	background: var(--white);
}
.platform-pill:hover { border-color: var(--gold); background: var(--cream); box-shadow: 0 14px 30px -16px rgba(200,162,61,0.5); transform: translateY(-2px); }
.platform-pill__mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.platform-pill__mark svg { display: block; width: 32px; height: 32px; }
.platform-pill__name { letter-spacing: 0.3px; }
.platform-pill__arrow { color: var(--gold); margin-left: 2px; transition: transform .25s var(--ease); }
.platform-pill:hover .platform-pill__arrow { transform: translate(2px, -2px); }
.where__note { margin-top: 36px; color: var(--text-light); font-size: 14px; max-width: 600px; margin-left: auto; margin-right: auto; padding: 0 var(--gutter); }

/* ---------- Recipe Gallery (WOW5) ---------- */
.rgallery { background: var(--cream); padding: clamp(80px, 10vw, 130px) 0 100px; overflow: hidden; }
.rgallery__head {
	max-width: var(--container); margin: 0 auto 50px;
	padding: 0 var(--gutter);
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 40px; align-items: end;
}
.rgallery__title { font-size: clamp(36px, 5vw, 60px); margin-top: 14px; }
.rgallery__sub { color: var(--text-mid); font-size: 17px; line-height: 1.55; max-width: 460px; justify-self: end; }

.rgallery__swiper { overflow: visible !important; padding: 0 0 30px; }
.rgallery__swiper .swiper-slide { width: 80vw; max-width: 980px; height: auto; opacity: 0.45; transition: opacity .5s var(--ease); }
.rgallery__swiper .swiper-slide-active { opacity: 1; }

.rgallery-card {
	display: grid; grid-template-columns: 1fr 1fr;
	background: var(--white);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 30px 60px -32px rgba(0,0,0,0.2);
	min-height: 480px;
}
.rgallery-card__media { position: relative; overflow: hidden; }
.rgallery-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.rgallery-card:hover .rgallery-card__media img { transform: scale(1.04); }
.rgallery-card__time {
	position: absolute; top: 22px; left: 22px;
	background: var(--red); color: var(--white);
	padding: 8px 14px; border-radius: 50px;
	font: 600 11px var(--font-body); letter-spacing: 1px;
}
.rgallery-card__body {
	padding: clamp(28px, 4vw, 56px);
	display: flex; flex-direction: column; gap: 16px; justify-content: center;
}
.rgallery-card__kicker { font: 500 11px var(--font-body); letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); }
.rgallery-card__title { font-size: clamp(28px, 3.5vw, 44px); line-height: 1.05; }
.rgallery-card__desc { color: var(--text-mid); font-size: 16px; line-height: 1.6; }
.rgallery-card__cta { color: var(--red); font: 600 12px var(--font-body); letter-spacing: 2px; text-transform: uppercase; margin-top: 6px; transition: gap .25s var(--ease); }

.rgallery__nav { display: flex; gap: 12px; justify-content: center; margin-top: 40px; }
.rgallery__btn {
	width: 56px; height: 56px;
	border: 1px solid rgba(0,0,0,0.12);
	background: var(--white);
	color: var(--text);
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	transition: all .25s;
}
.rgallery__btn:hover { background: var(--gold); color: var(--dark); border-color: var(--gold); transform: translateY(-2px); }

/* ---------- Howrah ---------- */
.howrah { background: var(--dark); color: var(--white); min-height: 70vh; display: flex; align-items: center; position: relative; overflow: hidden; }
.howrah::before { content: ''; position: absolute; inset: 0; background: var(--bg) center/cover no-repeat; filter: brightness(0.45); transform: scale(1.05); z-index: 0; }
.howrah::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(20,16,8,0.85) 0%, rgba(122,21,21,0.55) 100%); z-index: 1; }
.howrah__inner { position: relative; z-index: 2; max-width: 600px; margin: 0 auto; padding: 100px var(--gutter); }
.howrah__title { font-size: clamp(44px, 6vw, 72px); margin: 14px 0 22px; color: var(--white); }
.howrah__title em { color: var(--gold); }
.howrah__sub { color: rgba(255,255,255,0.78); font-size: 18px; line-height: 1.6; margin-bottom: 30px; }

/* ---------- Quotes ---------- */
.quotes { background: var(--cream); padding: 80px 0 100px; min-height: 60vh; display: flex; align-items: center; }
.quotes__swiper { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.quote { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 0; }
.quote__mark { font-family: var(--font-display); font-size: 80px; color: var(--gold); line-height: 0.6; }
.quote__text { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.4; max-width: 720px; color: var(--text); }
.quote__rule { width: 50px; height: 2px; background: var(--gold); }
.quote__who { font: 600 14px var(--font-body); color: var(--text); letter-spacing: 0.5px; }
.quote__role { font-size: 12px; color: var(--text-light); letter-spacing: 1.5px; text-transform: uppercase; }
.quotes__pagination { margin-top: 30px; display: flex; gap: 8px; justify-content: center; }
.swiper-pagination-bullet { width: 8px; height: 8px; background: rgba(0,0,0,0.2); opacity: 1; border-radius: 50%; transition: all .3s; }
.swiper-pagination-bullet-active { background: var(--gold); width: 28px; border-radius: 4px; }

/* ---------- Instagram (WOW9) ---------- */
.ig { background: var(--white); padding: clamp(80px, 10vw, 120px) 0; text-align: center; }
.ig__head { max-width: 720px; margin: 0 auto 50px; padding: 0 var(--gutter); }
.ig__title { font-family: var(--font-display); font-style: italic; font-size: clamp(40px, 5vw, 60px); color: var(--gold); margin: 12px 0 14px; }
.ig__sub { color: var(--text-mid); }
.ig__feed { max-width: var(--container); margin: 0 auto 40px; padding: 0 var(--gutter); }
.ig__grid { max-width: var(--container); margin: 0 auto 50px; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ig__tile { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: 10px; }
.ig__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ig__overlay { position: absolute; inset: 0; background: rgba(20,16,8,0.55); display: flex; align-items: center; justify-content: center; color: var(--white); opacity: 0; transition: opacity .25s; }
.ig__tile:hover .ig__overlay { opacity: 1; }
.ig__tile:hover img { transform: scale(1.06); }

/* ---------- Contact ---------- */
.contact { background: var(--cream); padding: clamp(80px, 10vw, 130px) 0; }
.contact__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact__title { font-size: clamp(36px, 4.5vw, 52px); margin: 14px 0 18px; }
.contact__lede { color: var(--text-mid); font-size: 17px; margin-bottom: 32px; }
.contact__info { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.contact__info li { display: flex; align-items: center; gap: 16px; }
.contact__icon { width: 42px; height: 42px; background: var(--white); color: var(--gold); border: 1px solid rgba(200,162,61,0.3); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact__info small { display: block; font: 500 10px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--text-light); margin-bottom: 2px; }
.contact__info a, .contact__info address { color: var(--text); font-size: 16px; font-style: normal; }
.contact__info a:hover { color: var(--red); }
.contact__form { display: grid; gap: 26px; }
.contact__form label { display: flex; flex-direction: column; gap: 8px; }
.contact__form span { font: 500 11px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--text-light); }
.contact__form span em { color: var(--gold); font-style: italic; text-transform: none; letter-spacing: 0; }
.contact__form input, .contact__form textarea { background: transparent; border: none; border-bottom: 1px solid rgba(0,0,0,0.2); padding: 10px 0; color: var(--text); font-size: 16px; font-family: var(--font-body); transition: border-color .25s; }
.contact__form input:focus, .contact__form textarea:focus { outline: none; border-bottom-color: var(--gold); }
.contact__form textarea { resize: vertical; min-height: 90px; }
.contact__submit { justify-self: start; }
.contact__msg { font-size: 13px; color: var(--text-mid); min-height: 18px; }
.contact__msg.is-error { color: var(--red); }
.contact__msg.is-success { color: #2e8b57; }

/* ---------- Footer ---------- */
.footer { background: var(--dark); color: rgba(255,255,255,0.6); position: relative; }
.footer__top { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.footer__inner { max-width: var(--container); margin: 0 auto; padding: clamp(60px, 8vw, 90px) var(--gutter) 50px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 50px; }
.footer__logo { height: 96px; width: auto; border-radius: 10px; margin-bottom: 24px; }
.footer__tag { color: rgba(255,255,255,0.65); font-size: 15px; line-height: 1.55; max-width: 320px; margin-bottom: 22px; }
.footer__certs { display: flex; flex-wrap: wrap; gap: 8px; }
.cert-pill { display: inline-flex; padding: 6px 12px; border: 1px solid rgba(200,162,61,0.4); border-radius: 50px; font: 500 10px var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.footer__col h4 { font: 600 12px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.footer__col a { display: block; padding: 5px 0; color: rgba(255,255,255,0.55); transition: color .25s; }
.footer__col a:hover { color: var(--gold); }
.footer__addr { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,0.4); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.06); padding: 22px var(--gutter); max-width: var(--container); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: rgba(255,255,255,0.4); }
.footer__bottom a { color: var(--gold); }

/* ---------- Sub-page hero ---------- */
.page-hero { background: var(--cream); padding: 160px var(--gutter) 80px; text-align: center; position: relative; }
.page-hero h1 { font-size: clamp(44px, 6vw, 80px); margin: 14px 0 14px; }
.page-hero p { color: var(--text-mid); font-size: 18px; max-width: 560px; margin: 0 auto; }
.page-hero--cream { background: var(--cream); }
.page-hero--dark {
	background: linear-gradient(135deg, #141008 0%, #7A1515 60%, #D42B2B 100%);
	color: var(--white);
}
.page-hero--dark h1 { color: var(--white); }
.page-hero--dark p { color: rgba(255,255,255,0.75); }
.page-hero--dark::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(200,162,61,0.18) 1px, transparent 1px); background-size: 38px 38px; pointer-events: none; opacity: 0.5; }
.page-hero__inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.page-hero--with-product { padding-bottom: 0; min-height: 420px; }
.page-hero__product { position: relative; z-index: 2; max-height: 320px; margin: 30px auto -60px; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.45)); }

/* ---------- About page ---------- */
.about-story { background: var(--cream); padding: clamp(100px, 12vw, 160px) 0; }
.about-story__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-story__copy h2 { font-size: clamp(36px, 5vw, 60px); margin: 18px 0 22px; }
.about-story__copy p { color: var(--text-mid); font-size: 17px; line-height: 1.65; margin-bottom: 16px; }
.about-story__media img { border-radius: 16px; box-shadow: 0 30px 60px -28px rgba(0,0,0,0.3); }

.about-timeline { background: var(--white); padding: clamp(100px, 12vw, 160px) 0; }
.about-timeline__head { max-width: var(--container); margin: 0 auto 60px; padding: 0 var(--gutter); text-align: center; }
.about-timeline__head h2 { font-size: clamp(36px, 5vw, 60px); margin-top: 14px; }
.timeline { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); list-style: none; position: relative; }
.timeline::before { content: ''; position: absolute; left: calc(var(--gutter) + 80px); top: 0; bottom: 0; width: 1px; background: rgba(200,162,61,0.4); }
.timeline li { display: grid; grid-template-columns: 100px 1fr; gap: 32px; align-items: start; padding: 22px 0; position: relative; }
.timeline li::before { content: ''; position: absolute; left: 84px; top: 30px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(200,162,61,0.18); }
.timeline__year { font-family: var(--font-display); font-size: 32px; font-weight: 500; color: var(--red); line-height: 1; padding-top: 4px; }
.timeline__text { color: var(--text-mid); font-size: 16px; line-height: 1.6; padding-left: 36px; }

.about-values { background: var(--cream); padding: clamp(80px, 10vw, 130px) 0; }
.about-values header { max-width: var(--container); margin: 0 auto 50px; padding: 0 var(--gutter); text-align: center; }
.about-values header h2 { font-size: clamp(36px, 5vw, 56px); margin-top: 14px; }
.about-values__grid { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.about-values__grid article { padding: 32px 28px; background: var(--white); border-radius: 14px; box-shadow: 0 18px 40px -28px rgba(0,0,0,0.18); }
.about-values__grid h3 { font-size: 22px; margin-bottom: 12px; }
.about-values__grid p { color: var(--text-mid); font-size: 15px; line-height: 1.55; }

.about-cta { background: var(--dark); color: var(--white); padding: 80px 0; text-align: center; }
.about-cta h2 { font-size: clamp(32px, 4.5vw, 56px); margin-bottom: 26px; color: var(--white); }
.about-cta em { color: var(--gold); }

/* ---------- Ghee features / nutrition ---------- */
.ghee-features { background: var(--white); padding: clamp(80px, 10vw, 130px) 0; }
.ghee-features header { max-width: var(--container); margin: 0 auto 50px; padding: 0 var(--gutter); text-align: center; }
.ghee-features header h2 { font-size: clamp(36px, 5vw, 56px); margin-top: 14px; }
.ghee-features__grid { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.ghee-features__grid article { padding: 30px 28px; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; transition: border-color .25s, transform .25s var(--ease); }
.ghee-features__grid article:hover { border-color: var(--gold); transform: translateY(-3px); }
.ghee-features__num { font-family: var(--font-display); font-size: 36px; color: var(--gold); display: block; margin-bottom: 14px; }
.ghee-features__grid h3 { font-size: 22px; margin-bottom: 10px; }
.ghee-features__grid p { color: var(--text-mid); font-size: 14px; line-height: 1.6; }

.ghee-nutrition { background: var(--cream); padding: clamp(80px, 10vw, 130px) 0; }
.ghee-nutrition header { max-width: var(--container); margin: 0 auto 40px; padding: 0 var(--gutter); text-align: center; }
.ghee-nutrition header h2 { font-size: clamp(32px, 4vw, 48px); margin-top: 14px; }
.ghee-nutrition__table { max-width: 800px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border: 1px solid rgba(200,162,61,0.3); border-radius: 14px; overflow: hidden; background: var(--white); }
.ghee-nutrition__table div { padding: 22px 20px; border-right: 1px solid rgba(200,162,61,0.2); border-bottom: 1px solid rgba(200,162,61,0.2); display: flex; flex-direction: column; gap: 6px; }
.ghee-nutrition__table span { font: 500 10px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--text-light); }
.ghee-nutrition__table strong { font-family: var(--font-display); font-size: 26px; font-weight: 500; color: var(--text); }
.ghee-nutrition__note { text-align: center; color: var(--text-light); font-size: 13px; margin-top: 18px; padding: 0 var(--gutter); }

/* ---------- Blendz page ---------- */
.blendz-grid { background: var(--cream); padding: clamp(100px, 12vw, 160px) 0; }
.blendz-grid__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.blendz-tile { background: var(--white); border-radius: 16px; padding: 28px 24px 26px; box-shadow: 0 18px 40px -28px rgba(0,0,0,0.16); display: flex; flex-direction: column; gap: 18px; transition: transform .35s var(--ease); }
.blendz-tile:hover { transform: translateY(-5px); }
.blendz-tile__media { height: 180px; display: flex; align-items: center; justify-content: center; background: var(--offwhite); border-radius: 12px; }
.blendz-tile__media img { max-height: 160px; }
.blendz-tile__weight { font: 500 10px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.blendz-tile h3 { font-size: 24px; margin: 4px 0 8px; }
.blendz-tile p { color: var(--text-mid); font-size: 14px; line-height: 1.55; }

/* ---------- Where to Buy page ---------- */
.wtb-online { background: var(--cream); padding: clamp(100px, 12vw, 160px) 0 80px; }
.wtb-online header { max-width: var(--container); margin: 0 auto 50px; padding: 0 var(--gutter); text-align: center; }
.wtb-online header h2 { font-size: clamp(32px, 4vw, 48px); margin-top: 14px; }
.wtb-online__grid { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.wtb-card { display: flex; align-items: center; gap: 18px; padding: 22px 24px; background: var(--white); border-radius: 14px; transition: box-shadow .25s, border-color .25s; border: 1px solid transparent; will-change: transform; }
.wtb-card:hover { border-color: var(--gold); box-shadow: 0 20px 40px -24px rgba(0,0,0,0.2); }
.wtb-card__dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.wtb-card h3 { font-size: 20px; margin-bottom: 4px; }
.wtb-card p { color: var(--text-mid); font-size: 13px; }
.wtb-card svg { color: var(--gold); margin-left: auto; flex-shrink: 0; }
.wtb-offline { background: var(--white); padding: 80px 0 100px; }
.wtb-offline header { max-width: var(--container); margin: 0 auto 30px; padding: 0 var(--gutter); text-align: center; }
.wtb-offline header h2 { font-size: clamp(32px, 4vw, 48px); margin-top: 14px; }
.wtb-offline__list { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.wtb-offline__list li { padding: 14px 18px; border-bottom: 1px solid rgba(200,162,61,0.2); font-size: 15px; color: var(--text); }
.wtb-offline__list li::before { content: '↳'; color: var(--gold); margin-right: 12px; }

/* ---------- Recipes archive ---------- */
.recipes-archive { background: var(--cream); padding: clamp(100px, 12vw, 160px) 0; }
.recipes-archive__grid { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.recipes-archive__grid .rgallery-card { grid-template-columns: 1fr; min-height: 0; }
.recipes-archive__grid .rgallery-card__media { aspect-ratio: 16/10; }

/* ---------- Single recipe ---------- */
.recipe-hero { min-height: 420px; background: var(--bg) center/cover no-repeat, var(--dark); position: relative; color: var(--white); display: flex; align-items: center; padding: 140px var(--gutter) 80px; }
.recipe-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(20,16,8,0.85), rgba(122,21,21,0.55)); }
.recipe-hero__inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; text-align: center; width: 100%; }
.recipe-hero h1 { font-size: clamp(44px, 6vw, 76px); margin: 12px 0 18px; }
.recipe-hero p { color: rgba(255,255,255,0.78); font-size: 17px; max-width: 600px; margin: 0 auto 28px; }
.recipe-meta { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; }
.recipe-meta div { display: flex; flex-direction: column; gap: 4px; }
.recipe-meta span { font: 500 10px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.recipe-meta strong { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--white); }
.recipe-body { max-width: var(--container); margin: 0 auto; padding: clamp(60px, 8vw, 100px) var(--gutter); display: grid; grid-template-columns: 320px 1fr; gap: 60px; align-items: start; }
.recipe-body__side { position: sticky; top: 100px; }
.recipe-body__side h2 { font-size: 26px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(200,162,61,0.3); }
.recipe-ing { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.recipe-ing li { padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 15px; color: var(--text); }
.recipe-ing li::before { content: '·'; color: var(--gold); margin-right: 10px; font-weight: bold; }
.recipe-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.recipe-tags span { padding: 5px 12px; border: 1px solid rgba(200,162,61,0.4); border-radius: 50px; font: 500 11px var(--font-body); letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.recipe-body__main h2 { font-size: 36px; margin-bottom: 24px; }
.recipe-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.recipe-steps li { display: grid; grid-template-columns: 60px 1fr; gap: 18px; align-items: start; padding-bottom: 22px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.recipe-steps__num { font-family: var(--font-display); font-size: 36px; color: var(--gold); line-height: 1; padding-top: 4px; }
.recipe-steps p { color: var(--text); font-size: 16px; line-height: 1.6; }
.recipe-notes { margin-top: 40px; padding: 28px; background: var(--cream); border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; }
.recipe-notes h3 { font-size: 22px; margin-bottom: 12px; }
.recipe-notes p { color: var(--text-mid); font-size: 15px; line-height: 1.6; }

/* ---------- Posts ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.post-card { background: var(--white); border-radius: 14px; overflow: hidden; }
.post-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.post-card h3 { padding: 22px 22px 8px; }
.post-card p { padding: 0 22px 22px; color: var(--text-mid); font-size: 14px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Mobile (≤ 1024) ---------- */
@media (max-width: 1024px) {
	.nav__menu { display: none; }
	.nav__cta { display: none; }
	.nav__burger { display: inline-flex; }

	.hero__inner { grid-template-columns: 1fr; text-align: center; display: flex; flex-direction: column; }
	.hero__copy { margin: 0 auto; order: 1; }
	.hero-stats { justify-content: center; }
	.hero__visual { min-height: 280px; order: 2; }
	.hero-product { max-height: 260px; }
	.hero-ring--1 { width: 240px; height: 240px; }
	.hero-ring--2 { width: 340px; height: 340px; }
	.hero-ring--3 { width: 440px; height: 440px; }

	.heritage__inner { grid-template-columns: 1fr; gap: 60px; }
	.heritage__img-wrap { margin-left: 0; }

	/* WOW1 mobile fallback: drop pin, drop grid, simple flow */
	.jar__pin { display: block; height: auto; min-height: auto; padding: 60px 20px 80px; }
	.jar__head { position: relative; top: 0; padding: 0 0 24px; text-align: center; }
	.jar__stage { display: block; padding: 0; min-height: 0; }
	.jar-build { margin: 0 auto 40px; transform: scale(1) !important; }
	.jar-cap { transform: translate(-50%, 0); opacity: 1; }
	.jar-body { transform: translateY(0) scale(1); opacity: 1; }
	.jar-fill { transform: scaleY(0.7) !important; }
	.jar-label { transform: translateX(0); opacity: 1; }
	.jar-glow { opacity: 0.6; }
	.jar__steps {
		position: relative; left: auto; right: auto; bottom: auto;
		display: flex; flex-direction: column; align-items: flex-start;
		gap: 24px;
		max-width: 480px;
		margin: 8px auto 0;
		padding: 0 4px;
		text-align: left;
		min-height: 0;
	}
	.jar__step {
		position: relative; left: auto; top: auto;
		transform: none;
		opacity: 1;
		display: flex; flex-direction: row; align-items: baseline; gap: 16px;
		white-space: normal;
		width: 100%;
	}
	.jar__step span { font-size: 22px; flex-shrink: 0; min-width: 36px; }
	.jar__step p { font-size: 16px; line-height: 1.55; margin: 0; }
	.jar__progress { display: none; }

	/* WOW2 mobile fallback: vertical stack */
	.journey__pin { display: none; }
	.journey__mobile { display: block; padding: 80px var(--gutter); background: var(--cream); }
	.journey__head { text-align: center; margin-bottom: 50px; }
	.journey__head h2 { font-size: clamp(36px, 7vw, 56px); margin-top: 14px; }
	.journey-mob {
		position: relative;
		display: flex; flex-direction: column;
		padding: 0;
		margin-bottom: 40px;
		background: transparent;
		color: var(--text);
		min-height: auto;
	}
	.journey-mob__photo {
		position: relative; inset: auto;
		width: 100%; height: 200px;
		object-fit: cover;
		border-radius: 12px;
		display: block;
		margin-bottom: 20px;
		z-index: auto;
	}
	.journey-mob::after { display: none; } /* drop dark overlay on mobile */
	.journey-mob__kicker {
		display: block;
		font: 600 12px var(--font-body); letter-spacing: 2px; text-transform: uppercase;
		color: var(--gold-deep);
		margin-bottom: 8px;
	}
	.journey-mob h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.15; margin-bottom: 12px; color: var(--text); }
	.journey-mob h3 em { color: var(--red); font-style: italic; }
	.journey-mob p { font: 400 15px/1.7 var(--font-body); color: var(--text-mid); }

	/* Products: 2x2 grid mobile */
	.products__lineup { --jar-base: clamp(140px, 38vw, 220px); display: grid; grid-template-columns: 1fr 1fr; gap: 32px 16px; min-height: auto; align-items: end; }
	.products__cell { gap: 12px; }
	.products__cell::after {
		content: attr(data-label);
		display: block;
		font: 500 11px var(--font-body);
		letter-spacing: 2.5px;
		text-transform: uppercase;
		color: rgba(255,255,255,0.55);
		margin-top: 12px;
	}
	.products__cell.is-active::after { color: var(--gold); }
	.products__shelf, .products__labels { display: none; }
	.products__details { min-height: 0; padding: 0 var(--gutter); margin-top: 24px; }
	.products__detail { display: none; position: relative; inset: auto; }
	.products__detail.is-active { display: flex; }
	.products__lineup:hover .products__cell:not(:hover) { opacity: 1; filter: none; }
	.products__lineup:not(:hover) .products__cell:not(.is-active) { opacity: 0.85; }

	.blendz__head { grid-template-columns: 1fr; }
	.blendz__sub { justify-self: start; }

	.compare__head-row { grid-template-columns: 1fr 1fr; }
	.compare__h-spacer { display: none; }
	.compare__h-them, .compare__h-us { padding: 16px 18px; font-size: 10px; }
	.compare__row { grid-template-columns: 1fr 1fr; min-height: 0; }
	.compare__label { grid-column: 1 / -1; padding: 14px 22px 8px; background: var(--cream); }
	.compare__cell { padding: 16px 18px; font-size: 14px; }

	.why__row { flex-direction: column; align-items: flex-start; gap: 8px; padding: 28px 0; }
	.why__num { font-size: 56px; min-width: 0; }
	.why__sep { display: none; }
	.why__text { font-size: 17px; }

	.rgallery__head { grid-template-columns: 1fr; gap: 20px; }
	.rgallery__sub { justify-self: start; }
	.rgallery__swiper .swiper-slide { width: auto; opacity: 1; }
	.rgallery-card { grid-template-columns: 1fr; min-height: 0; }
	.rgallery-card__media { aspect-ratio: 16/10; }

	.contact__inner { grid-template-columns: 1fr; gap: 50px; }
	.about-story__inner { grid-template-columns: 1fr; gap: 50px; }
	.recipe-body { grid-template-columns: 1fr; gap: 40px; }
	.recipe-body__side { position: static; }
	.footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }

	/* Disable cursor trail + magnetic on touch */
	.cursor-dot { display: none; }
}

@media (hover: none) {
	.cursor-dot { display: none; }
}

@media (max-width: 720px) {
	:root { --gutter: 20px; }
	.nav__brand img { height: 44px; }
	.hero { padding: 100px 0 60px; min-height: max(85vh, 540px); }
	.hero-title { font-size: 36px; line-height: 1.05; }
	.hero-sub { font-size: 15px; }
	.hero-stats .stat__num { font-size: 28px; }
	.heritage::before { font-size: clamp(80px, 22vw, 140px); right: 0; }
	.ig__grid { grid-template-columns: repeat(3, 1fr); }
	.footer__inner { grid-template-columns: 1fr; gap: 32px; }
	.heritage__counters { gap: 16px; padding-top: 30px; }
	.counter { min-width: 45%; }
	.counter__num { font-size: 36px; }
	.timeline::before { left: 32px; }
	.timeline li { grid-template-columns: 70px 1fr; gap: 12px; }
	.timeline li::before { left: 28px; }
	.timeline__year { font-size: 24px; }
	.timeline__text { padding-left: 8px; }
	.recipe-body { padding: 40px var(--gutter); }
	.recipe-steps li { grid-template-columns: 40px 1fr; gap: 12px; }
	.recipe-steps__num { font-size: 28px; }
	.ghee-nutrition__table { grid-template-columns: 1fr 1fr; }
	/* Compare: stack each row as a card on phone */
	.compare__grid { background: transparent; box-shadow: none; padding: 0 var(--gutter); gap: 12px; }
	.compare__head-row { display: none; }
	.compare__row { grid-template-columns: 1fr; min-height: 0; border-bottom: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 30px -22px rgba(0,0,0,0.18); background: var(--white); border: 1px solid rgba(200,162,61,0.18); }
	.compare__label { padding: 12px 18px; background: var(--cream); }
	.compare__cell { padding: 14px 18px; font-size: 14px; }
	.compare__cell--them::before { content: "Market"; display: inline-block; min-width: 80px; font: 600 9px var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-light); margin-right: 6px; }
	.compare__cell--us::before   { content: "Gold Touch"; display: inline-block; min-width: 80px; font: 700 9px var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); margin-right: 6px; }
	.products__name { font-size: 40px; }
}

/* ---------- Mobile (≤768) overrides ---------- */
@media (max-width: 768px) {
	/* Products: hide desktop row, show swiper carousel */
	.products__lineup,
	.products__shelf,
	.products__labels,
	.products__details { display: none !important; }
	.products__mobile-swiper { display: block; padding: 0 12px 50px; max-width: 480px; margin: 0 auto; overflow: hidden; }

	/* Why / Promise: cream BG with golden left border, 48px red numbers */
	.why { background: var(--cream); border-left: 4px solid var(--gold); padding: 50px 24px 60px; }
	.why__head { margin: 0 0 32px; padding: 0; text-align: left; }
	.why__rows { padding: 0; }
	.why__row { padding: 24px 0; }
	.why__num { font-size: 48px; color: var(--red); }
	.why__text { font-size: 15px; color: var(--text); }
	.why__divider { background: rgba(200,162,61,0.25); }

	/* Where to Buy: 2-col grid for platform pills */
	.where { background: var(--white); }
	.where__pills { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
	.platform-pill { padding: 10px 14px 10px 10px; font-size: 13px; gap: 10px; }
	.platform-pill__mark { width: 28px; height: 28px; border-radius: 7px; }
	.platform-pill__mark svg { width: 28px; height: 28px; }
	.platform-pill__arrow { display: none; } /* drop arrow on mobile to save space */
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
	.hero-product, .hero-ring, .marquee__track, .particle, .jar-particle { animation: none !important; }
	.cursor-dot { display: none; }
}

/* =================================================================
   v12.0.0 — ATF DESIGN SYSTEM OVERHAUL
   Satoshi + General Sans · tight type scale · tight spacing ·
   tinted-glass buttons · refined cards · de-pinned journey/jar ·
   hero & factory background video
   ================================================================= */

/* ---------- Type tokens ---------- */
:root {
	--font-display: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--fs-hero: clamp(30px, 5vw, 48px);
	--fs-h1: clamp(28px, 4.5vw, 44px);
	--fs-h2: clamp(24px, 3.2vw, 32px);
	--fs-h3: clamp(18px, 2vw, 22px);
	--fs-body: clamp(15px, 1vw, 16px);
}
body { line-height: 1.65; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.eyebrow { font-weight: 500; letter-spacing: 0.1em; font-size: 11px; }
em { font-style: italic; }

/* Cap oversized display headlines to the ATF scale */
.hero-title { font-size: clamp(30px, 5vw, 48px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; }
.heritage__title,
.products__title,
.compare__title,
.rgallery__title,
.howrah__title,
.ig__title,
.jar__title,
.why__title,
.journey-panel__title,
.journey__head h2 { font-size: clamp(24px, 3.2vw, 32px) !important; letter-spacing: -0.02em; line-height: 1.18; }
.products__name,
.products__mslide-name { font-size: clamp(26px, 4vw, 36px) !important; letter-spacing: -0.02em; }
.rgallery-card__title { font-size: clamp(18px, 2.2vw, 22px) !important; line-height: 1.2; letter-spacing: -0.01em; }
.blendz-tile h3, .blendz-card__name { font-size: 20px; }
.counter__num { font-size: clamp(32px, 4vw, 44px) !important; }
.stat__num { font-size: 30px; }
.heritage::before { font-size: clamp(80px, 12vw, 150px); }

/* ---------- Tight spacing ---------- */
.heritage { padding: clamp(40px, 6vw, 56px) 0 !important; }
.heritage__counters { margin-top: clamp(32px, 5vw, 44px) !important; padding-top: 32px; }
.products { padding: clamp(40px, 6vw, 56px) 0 !important; }
.products__head { margin: 0 auto 32px !important; }
.blendz, .compare, .where, .rgallery, .ig, .contact, .quotes, .blendz-grid { padding: clamp(40px, 6vw, 56px) 0 !important; }
.quotes, .where, .ig, .contact { min-height: 0; }
.howrah__inner { padding: clamp(48px, 7vw, 64px) var(--gutter) !important; }
.jar__pin { height: auto !important; min-height: 0 !important; overflow: visible; padding: clamp(40px, 6vw, 56px) 0; }
.jar__stage { height: auto; min-height: 380px; }

/* ---------- High-contrast CTAs (solid, no glass — WCAG-safe) ---------- */
.btn { border-radius: 8px; }
/* Primary on LIGHT backgrounds: solid red, white text */
.btn--primary, .btn--red {
	background: #D42B2B;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border: 1px solid #D42B2B;
	color: #FFF;
	padding: 12px 28px;
	font-weight: 600;
	box-shadow: 0 8px 22px -12px rgba(212,43,43,0.55);
}
.btn--primary:hover, .btn--red:hover {
	background: #B31F1F;
	border-color: #B31F1F;
	color: #FFF;
	box-shadow: 0 12px 26px -12px rgba(212,43,43,0.6);
	transform: translateY(-1px);
}
/* Primary on DARK backgrounds (hero / dark sections): white bg, red text */
.hero .btn--primary,
.section-dark .btn--primary,
.howrah .btn--primary,
.footer .btn--primary {
	background: #FFF;
	border-color: #FFF;
	color: #D42B2B;
	box-shadow: 0 8px 22px -12px rgba(0,0,0,0.45);
}
.hero .btn--primary:hover,
.section-dark .btn--primary:hover,
.howrah .btn--primary:hover,
.footer .btn--primary:hover {
	background: #F2E9DC;
	border-color: #F2E9DC;
	color: #B31F1F;
}
/* Secondary / outline on LIGHT backgrounds: red outline, red text */
.btn--ghost.btn--dark,
.btn--outline {
	background: transparent;
	border: 1.5px solid #D42B2B;
	color: #D42B2B;
}
.btn--ghost.btn--dark:hover,
.btn--outline:hover {
	background: rgba(212,43,43,0.06);
	border-color: #B31F1F;
	color: #B31F1F;
}

/* ---------- Refined cards ---------- */
.rgallery-card {
	border-radius: 16px;
	border: 1px solid rgba(0,0,0,0.04);
	box-shadow: 0 2px 12px rgba(0,0,0,0.05);
	overflow: hidden;
	background: var(--white);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.rgallery-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -16px rgba(0,0,0,0.18); }

/* ---------- Navbar ---------- */
.nav { padding: 12px 0; transition: background .3s var(--ease), padding .3s var(--ease), box-shadow .3s var(--ease); }
.nav__brand img { height: 36px; }
.nav.is-scrolled { padding: 10px 0; box-shadow: 0 4px 20px -12px rgba(0,0,0,0.25); }

/* ---------- Hero background video ---------- */
.hero { background: linear-gradient(135deg, #141008 0%, #7A1515 60%, #141008 100%); }
.hero__bg { z-index: 0; }
.hero-bg-video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
}
.hero__overlay {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(135deg, rgba(20,16,8,0.72) 0%, rgba(20,16,8,0.55) 50%, rgba(122,21,21,0.5) 100%);
}
.hero__particles { z-index: 2; }
.hero__inner { position: relative; z-index: 3; }
.hero::after { opacity: 0.25; }

/* ---------- Factory (Howrah) background video ---------- */
.howrah::before { display: none; }
.howrah::after { z-index: 1; }
.howrah__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
	filter: brightness(0.55);
}
.howrah__overlay { display: none; }

/* ---------- Journey — stacked overlapping tiles (sticky stack) ---------- */
.journey { position: relative; display: block; background: var(--cream); padding: clamp(40px, 6vw, 56px) 0 80px; }
.journey__header { max-width: var(--container); margin: 0 auto 40px; padding: 0 var(--gutter); text-align: center; }
.journey__header .kicker { font: 500 11px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 10px; }
.journey__header h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -0.02em; }
.journey__stack { position: relative; max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter); }
.journey__card {
	position: sticky;
	top: 80px;
	min-height: 70vh;
	background-size: cover;
	background-position: center;
	border-radius: 16px;
	margin-bottom: -40px; /* overlap */
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
}
.journey__card:nth-child(1) { top: 70px; z-index: 1; }
.journey__card:nth-child(2) { top: 90px; z-index: 2; }
.journey__card:nth-child(3) { top: 110px; z-index: 3; }
.journey__card:nth-child(4) { top: 130px; z-index: 4; }
.journey__card:nth-child(5) { top: 150px; z-index: 5; margin-bottom: 0; }
.journey__card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,8,0.85) 0%, transparent 60%); }
.journey__card-content { position: relative; z-index: 2; padding: 40px; max-width: 520px; color: #fff; }
.journey__card-content span { font: 500 11px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: #C8A23D; }
.journey__card-content h3 { font: 600 28px/1.3 var(--font-display); margin: 8px 0; letter-spacing: -0.02em; color: #fff; }
.journey__card-content p { font: 400 15px/1.65 var(--font-body); color: rgba(255,255,255,0.72); }
@media (max-width: 768px) {
	.journey__card { min-height: 50vh; margin-bottom: -20px; border-radius: 12px; }
	.journey__card:nth-child(5) { margin-bottom: 0; }
	.journey__card-content { padding: 24px; }
	.journey__card-content h3 { font-size: 22px; }
}

/* ---------- Scroll reveal utility (IntersectionObserver-driven) ---------- */
.reveal-up { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal-up.is-revealed { opacity: 1; transform: none; }

/* ---------- Jar Assembly — fullscreen sticky scroll-driven video ---------- */
.jar-section { height: 500vh; position: relative; }
.jar-sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; width: 100%; overflow: hidden; background: #141008; }
.jar-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.jar-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.5) 100%); }
.jar-content { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 3; color: #fff; width: 100%; padding: 0 24px; }
.jar-content .kicker { font: 500 11px/1 'General Sans', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #C8A23D; display: block; margin-bottom: 8px; }
.jar-content h2 { font: 600 32px/1.2 'Satoshi', sans-serif; letter-spacing: -0.02em; margin-bottom: 4px; color: #fff; }
.jar-content p { font-size: 14px; color: rgba(255,255,255,0.6); margin: 0; }
.jar-progress { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: 120px; height: 3px; background: rgba(255,255,255,0.15); border-radius: 2px; z-index: 3; overflow: hidden; }
.jar-progress-bar { height: 100%; width: 0; background: #C8A23D; transition: width 0.05s linear; }
@media (max-width: 768px) {
	.jar-section { height: 350vh; }
	.jar-sticky { height: 100dvh; }
	.jar-content { bottom: 40px; }
	.jar-content h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.jar-section { height: auto; }
	.jar-sticky { position: relative; height: 80vh; }
}

/* ---------- Tight spacing — sub-page sections (Step 3 completion) ---------- */
.about-story, .about-timeline, .about-values,
.ghee-features, .ghee-nutrition,
.wtb-online, .wtb-offline, .recipes-archive { padding: clamp(40px, 6vw, 56px) 0 !important; }
.page-hero { padding: clamp(96px, 12vw, 120px) var(--gutter) clamp(40px, 6vw, 56px) !important; }

/* ---------- Blendz — clean responsive grid (3 / 2 / 1 columns) ---------- */
.blendz__grid {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.blendz-card {
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	display: flex; flex-direction: column;
	background: var(--white);
	border-radius: 16px;
	border: 1px solid rgba(0,0,0,0.05);
	box-shadow: 0 2px 12px rgba(0,0,0,0.05);
	overflow: hidden;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.blendz-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(0,0,0,0.24); }
.blendz-card__media {
	height: 240px;
	display: flex; align-items: center; justify-content: center;
	background: var(--offwhite);
	border-radius: 0;
	padding: 8px;
	overflow: hidden;
}
.blendz-card__media img {
	max-height: 240px;
	max-width: 100%;
	width: auto; height: auto;
	margin: 0 auto;
	object-fit: contain;
	mix-blend-mode: normal;
	border-radius: 0;
}
.blendz-card__body {
	padding: 16px 20px 20px;
	display: flex; flex-direction: column; gap: 6px;
	text-align: center;
}
.blendz__grid { gap: 16px !important; }
.blendz-tile {
	border: 1px solid rgba(0,0,0,0.04);
	box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.blendz-tile:hover { box-shadow: 0 12px 30px -16px rgba(0,0,0,0.18); }
.blendz-tile__media { overflow: hidden; }
.blendz-tile__media img {
	width: 100%; height: 100%; max-height: none;
	object-fit: cover; border-radius: 12px;
	mix-blend-mode: normal;
}
@media (max-width: 900px) { .blendz__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 560px) { .blendz__grid { grid-template-columns: 1fr; } .blendz-card__media { height: 260px; } }
.products__mslide-img-wrap { min-height: 0; padding: 0 8px; }
.products__mslide-img {
	max-height: none; width: 100%; height: auto;
	aspect-ratio: 4 / 5; object-fit: cover;
	border-radius: 14px; mix-blend-mode: normal;
	filter: none; box-shadow: 0 12px 30px -18px rgba(0,0,0,0.4);
}

/* ================= v12.1.0 fixes — Why numbers + Testimonials ================= */

/* ---------- Fix #6 — Why Gold Touch: tighter numbers ---------- */
.why { padding: 48px 0 !important; }
.why__head { margin: 0 auto 36px !important; }
.why__rows { max-width: 900px !important; }
.why__row { align-items: baseline; gap: 20px; padding: 28px 0; }
.why__num { font-size: 48px !important; min-width: 150px; }
.why__num small { font-size: 0.4em; }
.why__sep { font-size: 26px; }
.why__text { font-size: 18px; max-width: none; }
.why__divider { max-width: 800px !important; width: 100%; background: rgba(200,162,61,0.15) !important; }
.why__rows { max-width: 800px !important; }
@media (max-width: 768px) {
	.why__row { flex-direction: column; align-items: flex-start; gap: 8px; }
	.why__num { font-size: 36px !important; min-width: 0; }
	.why__sep { display: none; }
	.why__text { font-size: 15px; }
}

/* ---------- Fix #7 — Testimonials: tighter spacing ---------- */
.quotes {
	padding: 40px 0 !important;
	min-height: 0 !important;
	max-height: 50vh;
	background: #FAF6F0 !important;
	display: flex; align-items: center;
}
.quotes__swiper { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.quote { gap: 14px; padding: 0; }
.quote__mark { font-size: 36px !important; margin-bottom: 0; line-height: 1; }
.quote__who { color: var(--gold) !important; }
.quote__text { font-size: 20px !important; line-height: 1.45; max-width: 700px; font-style: italic; }
.quote__rule { width: 40px; height: 2px; background: var(--gold); margin: 4px 0; }
.quote__who { margin: 0; }
.quote__role { margin: 0; }
.quotes__pagination { margin-top: 18px; }
@media (max-width: 768px) {
	.quotes { max-height: none; }
	.quote__text { font-size: 18px !important; }
}

/* ================= v12.2.0 — products grid, sub-pages, ATF caps ================= */

/* ---------- Fix #4 — Our Range: clean 4-col product grid (cream) ---------- */
.products { background: var(--cream) !important; padding: clamp(48px, 6vw, 56px) 0 !important; }
.products__head { max-width: 760px; margin: 0 auto 40px !important; padding: 0 var(--gutter); text-align: center; }
.products__title { color: var(--text) !important; }
.products__title em { color: var(--gold) !important; -webkit-text-fill-color: var(--gold); }
.products__sub { color: var(--text-mid) !important; font-size: 16px; }
.products__grid {
	max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.product-card {
	display: flex; flex-direction: column;
	background: var(--white);
	border: 1px solid rgba(0,0,0,0.05);
	border-bottom: 3px solid transparent;
	border-radius: 14px;
	overflow: hidden;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -26px rgba(0,0,0,0.28); }
.product-card.is-featured { border-bottom-color: #D42B2B; }
.product-card__media {
	height: 320px; display: flex; align-items: center; justify-content: center;
	background: var(--offwhite); padding: 18px;
}
.product-card__media img { max-height: 320px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.product-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card__tag { font: 500 10px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.product-card__name { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.product-card__weight { font: 500 11px var(--font-body); letter-spacing: 1px; text-transform: uppercase; color: var(--text-light); }
.product-card__desc { color: var(--text-mid); font-size: 13.5px; line-height: 1.55; margin: 4px 0 0; flex: 1; }
.product-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; margin-top: 8px; border-top: 1px solid rgba(0,0,0,0.07); }
.product-card__price { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text); }
@media (max-width: 1024px) { .products__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .products__grid { grid-template-columns: 1fr; } .product-card__media { height: 280px; } }

/* ---------- Fix #8 — Where to Buy: all 6 platforms in one row ---------- */
.where__pills {
	max-width: var(--container) !important;
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	gap: 12px !important;
}
.platform-pill {
	flex-direction: column; gap: 8px;
	padding: 14px 10px !important;
	font-size: 13px;
	text-align: center;
	justify-content: center;
}
.platform-pill__name { font-size: 13px; }
.platform-pill__arrow { display: none; }
@media (max-width: 768px) { .where__pills { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 480px) { .where__pills { grid-template-columns: repeat(2, 1fr) !important; } }

/* ---------- Fix #6 — Comparison table: use full container width ---------- */
.compare__grid { max-width: 1000px !important; width: 100%; margin-left: auto; margin-right: auto; }

/* ---------- Fix #11 — Contact: 40/60 split + pill submit ---------- */
.contact { background: #FAF6F0 !important; }
.contact__inner { grid-template-columns: 0.72fr 1.08fr !important; gap: 56px !important; }
.contact__submit { border-radius: 50px !important; padding: 14px 32px !important; }
@media (max-width: 860px) { .contact__inner { grid-template-columns: 1fr !important; gap: 40px !important; } }

/* ---------- Fix #15 — page heroes: 40vh, background-image support, ATF caps ---------- */
.page-hero { min-height: 40vh; display: flex; align-items: center; justify-content: center; }
.page-hero--img { position: relative; background-size: cover; background-position: center; }
.page-hero--img::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(20,16,8,0.84) 0%, rgba(20,16,8,0.6) 100%); }
.page-hero--img .page-hero__inner { position: relative; z-index: 2; }
.page-hero--img h1 { color: #fff; }
.page-hero--img p { color: rgba(255,255,255,0.78); }
.page-hero h1 { font-size: clamp(30px, 5vw, 48px) !important; }
.about-story__copy h2, .about-timeline__head h2, .about-values header h2,
.ghee-features header h2, .ghee-nutrition header h2,
.wtb-online header h2, .wtb-offline header h2, .about-cta h2,
.blendz__title, .where__title, .contact__title,
.recipe-hero h1, .recipe-body__main h2 { font-size: clamp(26px, 3.6vw, 44px) !important; letter-spacing: -0.02em; line-height: 1.18; }

/* ---------- Fix #12 — Ghee features 2+3 grid ---------- */
.ghee-features__grid { grid-template-columns: repeat(6, 1fr) !important; }
.ghee-features__grid article:nth-child(1),
.ghee-features__grid article:nth-child(2) { grid-column: span 3; }
.ghee-features__grid article:nth-child(3),
.ghee-features__grid article:nth-child(4),
.ghee-features__grid article:nth-child(5) { grid-column: span 2; }
@media (max-width: 768px) {
	.ghee-features__grid { grid-template-columns: 1fr !important; }
	.ghee-features__grid article { grid-column: auto !important; }
}

/* ---------- Fix #13 — Blendz page: clean 3-col, contain images ---------- */
.blendz-grid__inner { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }
.blendz-tile { padding: 0 !important; overflow: hidden; }
/* Superseded by the v13.1.0 Blendz media block at the end of this file. The old
   !important height/width declarations here were beating it, leaving the fix only
   half-applied, so they are removed rather than fought with more !important. */
.blendz-tile__media { border-radius: 0; }
.blendz-tile__body { padding: 16px 20px 20px; text-align: center; }
@media (max-width: 900px) { .blendz-grid__inner { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .blendz-grid__inner { grid-template-columns: 1fr !important; } }

/* ---------- Fix #14 — About: horizontal timeline + values cards ---------- */
.htimeline { list-style: none; max-width: var(--container); margin: 0 auto; padding: 30px var(--gutter) 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.htimeline::before { content: ''; position: absolute; top: 75px; left: 12%; right: 12%; height: 2px; background: rgba(200,162,61,0.4); z-index: 0; }
.htimeline__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; position: relative; padding: 0 8px; }
.htimeline__year { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--red); line-height: 1; }
.htimeline__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(200,162,61,0.18); position: relative; z-index: 2; }
.htimeline__text { font-size: 13px; color: var(--text-mid); line-height: 1.5; max-width: 170px; }
@media (max-width: 768px) {
	.htimeline { grid-template-columns: 1fr 1fr; gap: 30px; }
	.htimeline::before { display: none; }
}
.about-values__grid { grid-template-columns: repeat(3, 1fr) !important; }
.about-values__icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(212,43,43,0.08); color: var(--red); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
@media (max-width: 768px) { .about-values__grid { grid-template-columns: 1fr !important; } }

/* ---------- Fix #9 — recipe carousel: stop native drag hijacking the swipe ---------- */
.rgallery__swiper, .rgallery__swiper .swiper-wrapper { touch-action: pan-y; }
.rgallery__swiper .swiper-slide { -webkit-user-select: none; user-select: none; }
.rgallery__swiper a, .rgallery__swiper img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
}
.rgallery__swiper { cursor: grab; }
.rgallery__swiper:active { cursor: grabbing; }

/* ================= v12.6.0 — mobile optimization (FIX A–F) ================= */
@media (max-width: 768px) {
	/* FIX A — Hero: text first, product image small & below */
	.hero__inner { display: flex; flex-direction: column; }
	.hero__copy { order: 1; }
	.hero__visual { order: 2; min-height: 200px; }
	.hero-product { max-height: 190px !important; }

	/* FIX B — Ghee product range: 2 columns on mobile */
	.products__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
	.product-card__media { height: 200px !important; padding: 12px !important; }
	.product-card__media img { max-height: 180px !important; object-fit: contain; width: 100%; }
	.product-card__body { padding: 14px 14px 16px !important; }
	.product-card__name { font-size: 18px !important; }
	.product-card__desc { font-size: 12.5px !important; }

	/* FIX C — Blendz (home + page): 2 columns, not endless scroll */
	.blendz__grid,
	.blendz-grid__inner { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
	/* Mobile sizing now lives in the v13.1.0 block (160px / 8px padding). */
	.blendz-card__body,
	.blendz-tile__body { padding: 12px !important; }
	.blendz-card__name,
	.blendz-tile h3 { font-size: 15px !important; margin-top: 6px !important; }
	.blendz-tile p { font-size: 12.5px !important; }

	/* FIX D — Why Gold Touch: keep text off the edges */
	.why { padding: 44px 24px !important; }
	.why__head { padding: 0 !important; }
	.why__rows { padding: 0 !important; max-width: 100% !important; }
	.why__num { font-size: 36px !important; }

	/* FIX E — Where to Buy: 3-col, brand marks (tiles already removed in markup) */
	.where__pills { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
	.platform-pill { flex-direction: column !important; gap: 6px !important; padding: 12px 8px !important; font-size: 12px !important; text-align: center; justify-content: center; min-height: 44px; }
	.platform-pill__mark { width: 28px !important; height: 28px !important; border-radius: 0 !important; overflow: visible !important; }
	.platform-pill__mark svg { width: 28px !important; height: 28px !important; }
	.platform-pill__name { font-size: 12px !important; }
	.platform-pill__arrow, .brand-pill__arrow { display: none !important; }

	/* FIX F — general mobile audit: edges, heading caps, touch targets */
	.hero-title, .page-hero h1 { font-size: clamp(26px, 7vw, 32px) !important; }
	.products__title, .compare__title, .where__title, .blendz__title,
	.rgallery__title, .howrah__title, .ig__title, .contact__title,
	.journey__header h2, .heritage__title { font-size: clamp(24px, 6vw, 30px) !important; }
	.btn, .product-card .btn, .platform-pill, .brand-pill, .btn-buy-now, .nav__cta { min-height: 44px; }
	.product-card__foot .btn { min-height: 40px; }
}

/* ============================================================
   v13.0.0 — enquiry CTA, jar skip, WhatsApp float, mobile pass
   Appended intentionally: later rules win, so these override the
   earlier cascade without editing established blocks.
   ============================================================ */

/* ---------- Blendz enquiry button (secondary / outline) ---------- */
.btn-enquiry {
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: 8px;
	padding: 10px 18px;
	min-height: 44px;                 /* touch target */
	border: 1px solid rgba(0,0,0,0.22);
	border-radius: 8px;
	background: transparent;
	color: var(--text);
	font: 500 12px var(--font-body);
	letter-spacing: 0.3px;
	text-align: center;
	transition: color .25s, border-color .25s, background-color .25s;
}
.btn-enquiry:hover,
.btn-enquiry:focus-visible { color: var(--red); border-color: var(--red); background: rgba(212,43,43,0.04); }

/* ---------- Jar assembly skip button ---------- */
.jar-skip {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 10000;
	background: rgba(255,255,255,0.9);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(0,0,0,0.1);
	color: #2D2A26;
	padding: 10px 20px;
	min-height: 44px;
	border-radius: 50px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}
.jar-skip.visible { opacity: 1; pointer-events: auto; }
.jar-skip:hover { background: #fff; }

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float {
	position: fixed;
	bottom: 24px;
	left: 24px;
	width: 56px;
	height: 56px;
	background: #25D366;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(37,211,102,0.3);
	z-index: 9999;
	transition: transform 0.2s;
}
.whatsapp-float:hover { transform: scale(1.1); }

@media (prefers-reduced-motion: reduce) {
	.whatsapp-float, .jar-skip { transition: none; }
	.whatsapp-float:hover { transform: none; }
}

/* ---------- Mobile pass (<=768px) ---------- */
@media (max-width: 768px) {
	/* A) Hero: copy first, decorative visual second and capped */
	.hero__inner { display: flex; flex-direction: column; }
	.hero__copy   { order: 1; }
	.hero__visual { order: 2; max-height: 200px; overflow: hidden; }

	/* B + C) Two-column product and Blendz grids */
	.products__grid      { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
	.blendz__grid        { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
	.blendz-grid__inner  { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

	/* D) Edge padding — nothing touches the screen edge */
	.products__grid, .blendz__grid, .blendz-grid__inner,
	.jar-content, .ig__head, .contact__inner, .footer__inner {
		padding-left: max(20px, env(safe-area-inset-left));
		padding-right: max(20px, env(safe-area-inset-right));
	}

	/* E) Touch targets — includes inline text links (link-arrow, contact + footer
	   mailto/tel), which are real tap targets even though they are not buttons. */
	.btn, .btn-enquiry, .nav__cta, .platform-pill, .brand-pill, .btn-buy-now, .buy-option,
	.footer__col a, .nav__menu a, .mobile-menu__links a,
	.link-arrow, .contact__info a, .footer__brand a { min-height: 44px; }
	.footer__col a, .nav__menu a, .link-arrow, .contact__info a { display: inline-flex; align-items: center; }
	.nav__burger { min-width: 44px; min-height: 44px; }
	/* Matches the specificity of the earlier .product-card__foot .btn{min-height:40px}
	   rule so the 44px minimum actually wins on the Buy buttons. */
	.product-card__foot .btn { min-height: 44px; }
	.blendz__foot .link-arrow, .products__head .link-arrow { min-height: 44px; }

	/* F) Shorter jar runway so the section is quicker to get through */
	.jar-section { height: 300vh; }

	/* Floating buttons sit tighter on small screens */
	.whatsapp-float { bottom: 16px; left: 16px; width: 48px; height: 48px; }
	.jar-skip { bottom: 16px; right: 16px; padding: 8px 16px; font-size: 12px; }
}

/* ============================================================
   v13.1.0 — brand pills, buy dropdown, enquiry modal, Blendz media
   ============================================================ */

/* ---------- Platform brand pills ----------
   Each pill inlines --brand / --ink / --on-brand (see gt_platform_vars). Clean
   horizontal pills — no circular badges. Hover fills with the brand colour. */
.brand-pill {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 12px 18px;
	min-height: 48px;
	border: 1.5px solid color-mix(in srgb, var(--brand) 45%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--brand) 7%, #fff);
	color: var(--ink);
	text-decoration: none;
	transition: background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), transform .28s var(--ease);
}
/* Fallback for engines without color-mix */
@supports not (background: color-mix(in srgb, red 50%, white)) {
	.brand-pill { background: #fff; border-color: var(--brand); }
}
.brand-pill:hover,
.brand-pill:focus-visible {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--on-brand);
	transform: translateY(-2px);
}
.brand-pill:hover .pill-mark,
.brand-pill:focus-visible .pill-mark { color: var(--on-brand); }
.brand-pill__arrow { color: currentColor; opacity: .65; transition: transform .25s var(--ease); }
.brand-pill:hover .brand-pill__arrow { transform: translate(2px, -2px); opacity: 1; }

/* Wordmarks — brand-typical casing/weight, colour inherits so hover flips cleanly */
.pill-mark { font-family: var(--font-body); font-weight: 700; font-size: 16px; letter-spacing: -0.2px; color: var(--ink); line-height: 1; transition: color .22s var(--ease); }
.pill-mark--amazon { position: relative; display: inline-block; padding-bottom: 7px; }
.pill-mark--amazon .pill-mark__smile { position: absolute; left: 2px; bottom: -1px; overflow: visible; }
.brand-pill:hover .pill-mark--amazon .pill-mark__smile path { stroke: currentColor; }
.pill-mark--flipkart { font-style: italic; }
.pill-mark--bigbasket,
.pill-mark--blinkit { text-transform: lowercase; }
.pill-mark--spencers { font-family: Georgia, 'Times New Roman', serif; }

/* Blinkit reads light-on-dark, so its resting pill is dark */
.brand-pill--blinkit { background: #0C1A0E; border-color: #0C1A0E; }
.brand-pill--blinkit .pill-mark { color: var(--brand); }
.brand-pill--blinkit .brand-pill__arrow { color: var(--brand); }

/* Where-to-Buy page cards reuse the same wordmarks */
.wtb-card--brand { border-left: 3px solid var(--brand); }
.wtb-card__pill { display: inline-flex; align-items: center; }
.wtb-card--brand .pill-mark { font-size: 17px; }
.wtb-card--brand:hover { border-left-color: var(--brand); }

/* ---------- Buy Now dropdown ---------- */
.buy-dropdown { position: relative; display: inline-block; }
.btn-buy-now {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--red);
	color: #fff;
	padding: 11px 18px;
	min-height: 44px;
	border-radius: 8px;
	font: 600 13px var(--font-body);
	border: none;
	cursor: pointer;
	transition: background-color .2s;
}
.btn-buy-now:hover { background: var(--red-dark); }
.btn-buy-now__caret { transition: transform .2s var(--ease); }
.buy-dropdown.open .btn-buy-now__caret { transform: rotate(180deg); }

.buy-options {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.12);
	padding: 8px;
	min-width: 190px;
	z-index: 100;
}
.buy-dropdown.open .buy-options { display: block; }
/* The card clips its contents for the image hover effect; release that (and raise the
   card) only while its dropdown is open, so the panel is not cut off. */
.product-card.is-buy-open { overflow: visible; position: relative; z-index: 30; }
.buy-option {
	display: flex; align-items: center;
	padding: 11px 14px;
	min-height: 44px;
	border-radius: 8px;
	text-decoration: none;
	color: #2D2A26;
	font: 500 13px var(--font-body);
	transition: background-color .15s;
}
.buy-option:hover,
.buy-option:focus-visible { background: #F5F0E8; }
.buy-option__name { display: inline-flex; align-items: center; }
.buy-option__name::before {
	content: ''; display: inline-block;
	width: 18px; height: 18px; margin-right: 10px;
	border-radius: 4px; flex-shrink: 0;
	background: var(--brand);
}

/* ---------- Blendz enquiry button ---------- */
.btn-enquiry {
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: 8px;
	background: transparent;
	border: 1.5px solid var(--gold);
	color: var(--gold);
	padding: 10px 18px;
	min-height: 44px;
	border-radius: 8px;
	font: 600 12px var(--font-body);
	cursor: pointer;
	text-decoration: none;
	transition: background-color .2s, color .2s, border-color .2s;
}
.btn-enquiry:hover,
.btn-enquiry:focus-visible { background: var(--gold); color: #fff; border-color: var(--gold); }

/* ---------- Enquiry modal ---------- */
.enquiry-modal { display: none; position: fixed; inset: 0; z-index: 10001; }
.enquiry-modal.active { display: flex; align-items: center; justify-content: center; }
.enquiry-modal[hidden] { display: none; }
.enquiry-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.enquiry-modal__content {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 32px;
	max-width: 420px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	z-index: 2;
	box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.enquiry-modal__close {
	position: absolute; top: 10px; right: 12px;
	width: 44px; height: 44px;
	background: none; border: none; font-size: 26px; line-height: 1;
	cursor: pointer; color: #999;
}
.enquiry-modal__close:hover { color: var(--text); }
.enquiry-modal__content h3 { font: 600 20px/1.3 var(--font-display); color: #2D2A26; margin-bottom: 4px; }
.enquiry-modal__content > p { font-size: 14px; color: #8A8278; margin-bottom: 16px; }
.enquiry-modal__content input,
.enquiry-modal__content textarea {
	width: 100%; padding: 12px 14px;
	border: 1px solid #DDD8CE; border-radius: 8px;
	font-size: 14px; font-family: var(--font-body);
	margin-bottom: 10px; background: #FAFAF8; color: var(--text);
}
.enquiry-modal__content input:focus,
.enquiry-modal__content textarea:focus { border-color: #C5940A; outline: 2px solid rgba(197,148,10,0.25); outline-offset: 1px; }
.btn-enquiry-submit {
	width: 100%; padding: 13px; background: var(--red); color: #fff; border: none;
	border-radius: 8px; font: 600 14px var(--font-body); cursor: pointer; min-height: 44px;
	transition: background-color .2s;
}
.btn-enquiry-submit:hover:not(:disabled) { background: var(--red-dark); }
.btn-enquiry-submit:disabled { opacity: .6; cursor: default; }
.enquiry-modal__msg { font-size: 13px; margin: 8px 0 0; min-height: 18px; color: var(--text-mid); }
.enquiry-modal__msg.is-error { color: var(--red); }
.enquiry-modal__done { text-align: center; padding: 24px; color: #1E7A45; font-weight: 600; }
.enquiry-modal__or { text-align: center; font-size: 13px; margin-top: 12px; color: var(--text-mid); }
.enquiry-modal__or a { color: #25D366; font-weight: 600; }

/* ---------- Blendz media: consistent, never-cropped product shots ---------- */
.blendz-card__media,
.blendz-tile__media {
	height: 200px;
	display: flex; align-items: center; justify-content: center;
	background: #F8F6F2;
	border-radius: 8px 8px 0 0;
	padding: 12px;
	overflow: hidden;
}
.blendz-card__media img,
.blendz-tile__media img,
.blendz-grid img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
	display: block;
}

@media (max-width: 768px) {
	.blendz-card__media,
	.blendz-tile__media { height: 160px; padding: 8px; }

	/* Placement is computed in JS (position:fixed) so it clears overflow:hidden
	   ancestors; only the width is tuned here. */
	.buy-options { min-width: 170px; }
	.brand-pill { padding: 10px 14px; min-height: 44px; }
	.pill-mark { font-size: 15px; }
	.enquiry-modal__content { padding: 26px 20px; }
}

/* Screen-reader-only labels used by the modal */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================
   v13.2.0 — layout + brand-logo pass
   Appended last so these win the cascade without editing earlier blocks.
   ============================================================ */

/* ---------- 1 + 11. Heritage: stop the image crowding the copy ----------
   The real cause was .heritage__img-wrap{margin-left:-80px}, which pulled the media
   column into the text column. Remove the pull and widen the gutter. */
@media (min-width: 861px) {
	.heritage__inner { gap: clamp(48px, 5vw, 72px); grid-template-columns: 1fr 1fr; }
	.heritage__copy  { padding-right: 32px; max-width: 100%; }
	.heritage__img-wrap { margin-left: 0; }
	.heritage__lede, .heritage__body { max-width: 52ch; }
	/* FSSAI badge sat outside the image edge; tuck it inside the frame. */
	.heritage__badge { right: 18px; bottom: 18px; }
}

/* ---------- 2. Blendz heading on one line ----------
   .blendz__head is a 1fr/1fr grid, so the title only ever gets half the container.
   Widen the title column and trim the size so it fits on one line at >=1200px. */
@media (min-width: 861px) {
	.blendz__head { grid-template-columns: 1.55fr 1fr; gap: 32px; }
}
.blendz__title { font-size: clamp(28px, 3vw, 38px); }
.blendz__title em { white-space: nowrap; }
@media (max-width: 1024px) { .blendz__title em { white-space: normal; } }

/* ---------- 3. Blendz product images fill their card ----------
   These packshots carry a lot of built-in whitespace, so object-fit:cover would crop
   the product itself. Keep `contain` (nothing is cut) and scale up instead, which
   fills the tile without losing any of the pack. */
.blendz-card__media,
.blendz-tile__media {
	height: 220px;
	padding: 0;
	background: #F8F6F2;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
}
.blendz-card__media img,
.blendz-tile__media img,
.blendz-grid img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
	object-position: center;
	transform: scale(1.18);
	display: block;
}

/* ---------- 4. Ghee vs Ghee spans the container ----------
   An earlier block pins this to max-width:1000px!important, hence the !important here. */
.compare__grid {
	max-width: var(--container) !important;
	width: calc(100% - 2 * var(--gutter)) !important;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}
.compare__head-row,
.compare__row { grid-template-columns: 200px 1fr 1fr; }

/* ---------- 5. Why Gold Touch: three metrics across ---------- */
@media (min-width: 769px) {
	.why__rows {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		max-width: var(--container);
		text-align: center;
	}
	/* The inline rules between rows are meaningless in a 3-up grid. */
	.why__divider { display: none; }
	.why__row {
		flex-direction: column;
		align-items: center;
		gap: 10px;
		padding: 28px 20px;
		border-left: 1px solid rgba(200,162,61,0.28);
	}
	.why__row:first-of-type { border-left: 0; }
	.why__sep { display: none; }
	.why__num {
		font-size: 52px !important;   /* earlier block pins 48px !important */
		min-width: 0 !important;
		color: var(--gold-deep);
	}
	.why__text {
		font-size: 15px;
		max-width: 30ch;
		color: var(--text-mid);
	}
}
@media (max-width: 768px) {
	.why__rows { display: grid; grid-template-columns: 1fr; gap: 16px; }
	.why__divider { display: none; }
	.why__row { border-top: 1px solid rgba(200,162,61,0.28); }
	.why__row:first-of-type { border-top: 0; }
}

/* ---------- 6. Platform pills with real brand logos ---------- */
.where__pills {
	display: flex; flex-wrap: wrap;
	align-items: center; justify-content: center;
	gap: 14px;
}
.platform-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	min-height: 60px;
	min-width: 150px;
	background: #fff;
	border: 1px solid #E8E4DE;
	border-radius: 12px;
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.platform-pill:hover,
.platform-pill:focus-visible {
	border-color: #C5940A;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	transform: translateY(-2px);
}
.platform-pill__logo {
	height: 24px;
	width: auto;
	max-width: 130px;
	object-fit: contain;
	display: block;
}
/* Blinkit ships only a square app icon — give square marks more height so they
   don't read as tiny next to the wide wordmarks. */
.platform-pill__logo.is-square { height: 30px; max-width: 48px; }

/* Where-to-Buy page cards reuse the same logos */
.wtb-card--brand .platform-pill__logo { height: 26px; max-width: 140px; }
.wtb-card--brand .platform-pill__logo.is-square { height: 32px; max-width: 44px; }
.wtb-card__pill { display: inline-flex; align-items: center; min-width: 150px; }

/* ---------- 8. Button contrast: white text on red ----------
   Scoped deliberately: on dark sections .btn--primary is INVERTED by design
   (white background, red text). A blanket white-text rule turns those buttons
   white-on-white and invisible, so the dark-context variants are re-asserted below. */
.btn--primary, .btn--red, .btn-buy-now, .btn-enquiry-submit,
.btn--primary span, .btn-buy-now span {
	color: #FFFFFF !important;
}
.btn--primary:hover, .btn--red:hover, .btn-buy-now:hover, .btn-enquiry-submit:hover {
	color: #FFFFFF !important;
	background: #A81E1E !important;
}
.btn--primary svg, .btn-buy-now svg { color: currentColor; }

/* Re-assert the intentional inverted style on dark backgrounds */
.hero .btn--primary, .section-dark .btn--primary, .howrah .btn--primary, .footer .btn--primary,
.hero .btn--primary span, .section-dark .btn--primary span, .howrah .btn--primary span, .footer .btn--primary span {
	color: #D42B2B !important;
	background: #FFFFFF !important;
}
.hero .btn--primary:hover, .section-dark .btn--primary:hover,
.howrah .btn--primary:hover, .footer .btn--primary:hover,
.hero .btn--primary:hover span, .section-dark .btn--primary:hover span,
.howrah .btn--primary:hover span, .footer .btn--primary:hover span {
	color: #B31F1F !important;
	background: #F2E9DC !important;
}

/* ---------- 9. Header Shop button ---------- */
.nav__cta {
	background: #D42B2B;
	color: #FFFFFF !important;
	padding: 10px 24px;
	min-height: 40px;
	border-radius: 8px;
	font: 600 13px var(--font-body);
	letter-spacing: 0.3px;
	text-transform: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .2s;
}
.nav__cta:hover { background: #A81E1E; color: #FFFFFF !important; }
.nav__cta span { color: #FFFFFF !important; }

/* ---------- 11. Consistent counter sizing ---------- */
.heritage__counters .counter__num { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.05; }

@media (max-width: 768px) {
	.blendz-card__media, .blendz-tile__media { height: 180px; }
	/* Platform pills: two per row, never overflowing. Earlier blocks pin 3-up with
	   !important (tuned for the old text pills); logos need the extra width. */
	.where__pills { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
	.platform-pill { width: 100%; min-width: 0; padding: 12px 14px; min-height: 56px; }
	.platform-pill__logo { height: 20px; max-width: 100%; }
	.platform-pill__logo.is-square { height: 26px; max-width: 34px; }
	.compare__head-row, .compare__row { grid-template-columns: 96px 1fr 1fr; }
}

/* ---------- 8b. Enquire button contrast ----------
   var(--gold) #C8A23D on white is only 2.4:1 — below the 3:1 minimum for UI text.
   Use the deeper gold for the label (4.3:1) and fill with it on hover so the white
   label is legible too. Border stays the lighter gold to keep the look. */
.btn-enquiry {
	color: var(--gold-text);
	border-color: #C8A23D;
}
.btn-enquiry:hover,
.btn-enquiry:focus-visible {
	background: var(--gold-text);
	border-color: var(--gold-text);
	color: #FFFFFF;
}

/* ---------- P0 FIX (audit 2026-07-20) ----------
   .products sets color:var(--white) on the section. Every product-card child
   declares its own colour EXCEPT .product-card__name, so the size heading
   inherited white onto a white card and was invisible on all 4 SKUs
   (homepage + /products/gold-touch-ghee/). Give it an explicit colour. */
.product-card__name { color: var(--text); }

/* ============================================================
   v13.3.0 — audit fixes
   ============================================================ */

/* ---------- FIX 7: WCAG AA contrast (audit P2-1) ----------
   --gold #C8A23D measured 2.24:1 on cream and 2.42:1 on white — far below the 4.5:1
   needed for small text. --text-light #8A7D6E measured 3.72:1 / 4.01:1. Both are
   raised here for TEXT ONLY; borders, backgrounds, dividers and decorative rules keep
   the original lighter gold so the visual identity is unchanged. */
:root {
	--gold-text: #866B21;   /* 4.71:1 on cream, 5.07:1 on white — clears AA on both */
	--text-light: #6E6255;  /* 5.51:1 on cream, 5.93:1 on white */
}

.eyebrow,
.eyebrow--gold,
.kicker,
.product-card__tag,
.blendz-card__weight,
.blendz-tile__weight,
.rgallery-card__kicker,
.recipe-steps__num,
.ghee-features__num,
.quote__who,
.where__note em,
.hero-badge {
	color: var(--gold-text) !important;
}

/* Large display italics keep more presence but still clear 3:1 */
.heritage__title em,
.products__title em,
.blendz__title em,
.compare__title em,
.where__title em,
.contact__title em,
.rgallery__title em,
.howrah__title em,
.ig__title em,
.page-hero__inner h1 em,
h2 em, h3 em {
	/* An earlier block pins .products__title em with `color: var(--gold) !important`
	   AND `-webkit-text-fill-color`, which wins over `color` outright in Blink/WebKit —
	   so both properties have to be overridden here. */
	color: #9A7C28 !important;
	-webkit-text-fill-color: #9A7C28;
}

/* Dark sections keep the light gold — it reads fine on dark and this rule must not
   drag it into the low-contrast range there. */
.hero .eyebrow, .hero .hero-badge,
.jar-section .kicker, .jar-content .kicker,
.howrah .eyebrow,
.footer .eyebrow,
.page-hero--dark .eyebrow,
.section-dark .eyebrow,
.about-cta .eyebrow {
	color: var(--gold) !important;
}
.hero .hero-title em,
.page-hero--dark h1 em,
.howrah__title em,
.jar-content h2 em,
.journey__card em {
	color: var(--gold-light) !important;
	-webkit-text-fill-color: var(--gold-light);
}

/* ---------- FIX 9: /products/ hub ---------- */
.prange { padding: clamp(56px, 7vw, 96px) 0; background: var(--cream); }
.prange__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.prange__card { background: var(--white); border: 1px solid rgba(0,0,0,0.05); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 12px rgba(0,0,0,0.05); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.prange__card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -26px rgba(0,0,0,0.28); }
.prange__media { display: block; height: 240px; background: #F8F6F2; overflow: hidden; }
.prange__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prange__body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.prange__title { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--text); }
.prange__desc { color: var(--text-mid); font-size: 15px; line-height: 1.6; }

/* ---------- FIX 12B: 404 ---------- */
.e404 { padding: clamp(48px, 6vw, 80px) 0 clamp(64px, 8vw, 110px); background: var(--cream); }
.e404__inner { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.e404__link { display: flex; flex-direction: column; gap: 3px; padding: 18px 20px; min-height: 44px; background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; transition: border-color .2s, transform .2s; }
.e404__link:hover, .e404__link:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.e404__link strong { font-family: var(--font-display); font-size: 16px; color: var(--text); }
.e404__link span { font-size: 12px; color: var(--text-light); }

/* ---------- FIX 14: section CTAs ---------- */
.journey__cta, .why__cta, .quotes__cta, .rgallery__cta { max-width: var(--container); margin: 0 auto; padding: 28px var(--gutter) 0; display: flex; justify-content: center; }
.products__all { margin-top: 14px; }
.journey__cta .link-arrow, .quotes__cta .link-arrow { color: var(--gold); }

/* ---------- FIX 12F: footer headings are h2 now, keep the h4 look ---------- */
.footer__h { font: 600 12px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--white); margin: 0 0 4px; }
.footer__legal { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.footer__legal a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
	.prange__inner { grid-template-columns: 1fr; gap: 20px; }
	.e404__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
	.e404__inner { grid-template-columns: 1fr; }
}