@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/fraunces-latin-300-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fraunces-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/fraunces-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext-600-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/fraunces-vietnamese-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-vietnamese-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/fraunces-vietnamese-700-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display-cyrillic-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display-cyrillic-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/playfair-display-cyrillic-700-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/playfair-display-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/playfair-display-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/playfair-display-latin-ext-600-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/playfair-display-latin-ext-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/playfair-display-vietnamese-800-italic.woff2') format('woff2');
}


/* ============================================================
   DESAI BANDHU AMBEWALE – COMPLETE SINGLE-FILE WEBSITE
   © 2026 Desai Bandhu Ambewale | Pawas, Ratnagiri
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --mango: #F5A623; --mango-deep: #C47A0E; --mango-light: #FFF8EC;
  --saffron: #E8720C; --cream: #FAF6EF; --green: #3A6B35; --green-deep: #1E4020;
  --earth: #5C3D1E; --earth-deep: #1C1208; --text-dark: #1C1208;
  --text-mid: #4A3520; --text-light: #8B6F47; --white: #FFFFFF;
}
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; overflow-x: hidden; }

/* PAGE SYSTEM */
.page {
  display: none;
  min-height: 100vh;
  opacity: 0;
  animation: none;
}
.page.active {
  display: block;
  opacity: 1;
  /* `both` fill left `transform: translateY(0)` — an identity matrix, but NOT
     `none` — permanently on the active page. Any non-none transform makes that
     element the containing block for position:fixed descendants, which broke
     ScrollTrigger's pin: it fixes .fj-pin expecting viewport coordinates, so the
     pinned section landed thousands of px off-screen and the Flavour Journey
     rendered as a blank black band for the whole pin.
     `backwards` keeps the entrance animation but leaves no transform behind;
     opacity is now set explicitly since it no longer relies on forwards fill. */
  animation: pageReveal 0.38s cubic-bezier(0.22,1,0.36,1) backwards;
}
@keyframes pageReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Make nav-mount transparent so the <nav> behaves as a direct body child: 
   this is what enables `position: sticky` on the nav to work over the full
   document height instead of being clipped to the wrapper's intrinsic height. */
#nav-mount { display: contents; }

/* NAV */
nav {
  position: sticky; top: 0; z-index: 999;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 88px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(197,149,26,0.15);
  transition: background 0.3s;
}
nav.light { background: rgba(250,246,239,0.95); }
nav.dark { background: rgba(28,18,8,0.95); border-color: rgba(245,166,35,0.12); }
.nav-logo img { height: 64px; width: auto; cursor: pointer; transition: transform 0.3s ease; }
.nav-logo img:hover { transform: scale(1.04); }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 500; text-decoration: none; transition: color 0.2s; cursor: pointer; }
nav.light .nav-links a { color: var(--text-mid); }
nav.dark .nav-links a { color: rgba(255,255,255,0.5); }
.nav-links a:hover { color: var(--saffron) !important; }
.nav-links a.active { color: var(--saffron) !important; }
.nav-links a.games-link { color: var(--mango) !important; font-weight: 600; }
.nav-cta { background: var(--saffron); color: white; border: none; border-radius: 100px; padding: 10px 24px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: 'DM Sans', sans-serif; text-decoration: none; transition: background 0.2s; }
.nav-cta:hover { background: var(--mango-deep); }
.nav-mobile-btn { display: none; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--mango); }
.mobile-menu { display: none; position: fixed; inset: 0; z-index: 998; background: rgba(28,18,8,0.97); flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 22px; font-weight: 600; color: white; text-decoration: none; cursor: pointer; transition: color 0.2s; }
.mobile-menu a:hover { color: var(--mango); }
.mobile-close { position: absolute; top: 24px; right: 24px; font-size: 28px; background: none; border: none; color: white; cursor: pointer; }

/* SHARED */
.btn-primary { background: var(--mango); color: var(--earth-deep); border: none; border-radius: 100px; padding: 14px 32px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s; text-decoration: none; display: inline-block; }
.btn-primary:hover { background: #F5B840; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(245,166,35,0.3); }
.btn-ghost { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.3); border-radius: 100px; padding: 14px 32px; font-size: 15px; font-weight: 500; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s; text-decoration: none; display: inline-block; }
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); }
.btn-green { background: var(--green); color: white; border: none; border-radius: 100px; padding: 14px 32px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s; display: inline-block; text-decoration: none; }
.btn-green:hover { background: #2D5A28; transform: translateY(-2px); }
.sec-label { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--saffron); margin-bottom: 18px; }
.sec-label::before { content: ''; display: block; width: 24px; height: 2px; background: var(--saffron); border-radius: 2px; }
h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3.5vw, 48px); font-weight: 700; line-height: 1.15; margin-bottom: 16px; }
h2 em { font-style: italic; color: var(--saffron); }
.reveal { opacity: 0; transform: translateY(32px); transition: all 0.65s cubic-bezier(0.4,0,0.2,1); }
.reveal.d1{transition-delay:0.08s} .reveal.d2{transition-delay:0.16s} .reveal.d3{transition-delay:0.24s} .reveal.d4{transition-delay:0.32s} .reveal.d5{transition-delay:0.4s}
.reveal.visible { opacity: 1; transform: translateY(0); }
.wa-float { position: fixed; bottom: 28px; right: 28px; z-index: 900; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 6px 24px rgba(37,211,102,0.5); text-decoration: none; transition: transform 0.2s; }
.wa-float:hover { transform: scale(1.1); }

/* FOOTER */
.site-footer { background: var(--earth-deep); padding: 72px 48px 40px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 56px; }
.footer-brand img { height: 72px; width: auto; margin-bottom: 22px; }
.footer-brand p { font-size: 14px; color: rgba(255,255,255,0.4); line-height: 1.75; max-width: 270px; }
.footer-brand .fc-info { font-size: 13px; color: rgba(255,255,255,0.3); margin-top: 16px; line-height: 1.8; }
.footer-col h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mango); margin-bottom: 20px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 14px; color: rgba(255,255,255,0.4); text-decoration: none; cursor: pointer; transition: color 0.2s; }
.footer-col a:hover { color: var(--mango); }
.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin-bottom: 28px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; }
.footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.28); }
.footer-social { display: flex; gap: 10px; }
.social-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 16px; text-decoration: none; transition: all 0.2s; cursor: pointer; }
.social-btn:hover { background: var(--mango); border-color: var(--mango); }

/* ===================== HOME PAGE ===================== */
#home { background: var(--cream); }
.home-hero { min-height: 100vh; background: var(--earth-deep); display: grid; grid-template-columns: 1fr 1fr; position: relative; overflow: hidden; }
.hero-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.orb-a { width: 700px; height: 700px; background: radial-gradient(circle, rgba(245,166,35,0.15) 0%, transparent 65%); top: -200px; right: -150px; animation: orbPulse 7s ease-in-out infinite; }
.orb-b { width: 450px; height: 450px; background: radial-gradient(circle, rgba(58,107,53,0.12) 0%, transparent 65%); bottom: -100px; left: 30%; animation: orbPulse 9s 2s ease-in-out infinite; }
@keyframes orbPulse { 0%,100%{opacity:0.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.1)} }
.hero-left { padding: 80px 48px 60px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.25); border-radius: 100px; padding: 6px 18px; margin-bottom: 32px; width: fit-content; }
.hero-badge span { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mango); }
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mango); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.hero-left h1 { font-family: 'Playfair Display', serif; font-size: clamp(42px, 5.5vw, 76px); font-weight: 700; color: white; line-height: 1.08; margin-bottom: 24px; }
.hero-left h1 em { font-style: italic; color: var(--mango); }
.hero-left > p { font-size: 18px; color: rgba(255,255,255,0.55); line-height: 1.8; max-width: 460px; margin-bottom: 44px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; }
.hero-stats { display: flex; gap: 40px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.08); }
.h-stat-num { font-family: 'Playfair Display', serif; font-size: 38px; font-weight: 800; color: var(--mango); display: block; line-height: 1; }
.h-stat-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); margin-top: 6px; display: block; }
.hero-right { display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; padding: 80px 48px; }
.hero-can-wrap { position: relative; width: 400px; height: 500px; display: flex; align-items: center; justify-content: center; }
.hero-can-wrap img { height: 420px; object-fit: contain; filter: drop-shadow(0 40px 80px rgba(245,166,35,0.35)); animation: canFloat 6s ease-in-out infinite; }
.hero-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(245,166,35,0.15); }
.ring1 { inset: -40px; animation: spin 30s linear infinite; }
.ring2 { inset: -80px; animation: spin 50s linear infinite reverse; }
@keyframes canFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
@keyframes spin { to{transform:rotate(360deg)} }

.legacy-bar { background: var(--green); padding: 0 0px; display: flex; }
.legacy-item { flex: 1; padding: 32px 0; text-align: center; border-right: 1px solid rgba(255,255,255,0.12); }
.legacy-item:last-child { border-right: none; }
.legacy-item strong { display: block; font-family: 'Playfair Display', serif; font-size: 34px; font-weight: 700; color: var(--mango); }
.legacy-item span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin-top: 6px; display: block; }

/* HOME ABOUT */
.home-about { padding: 120px 48px; background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); position: relative; overflow: hidden; }
.about-2col { display: grid; grid-template-columns: 1.05fr 1fr; gap: 90px; align-items: center; max-width: 1400px; margin: 0 auto; }
.about-img-wrap { position: relative; }

/* === "Our Story" enhanced visual stage === */
.story-stage {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
/* Concentric decorative rings */
.story-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.story-ring.r1 { inset: 6%;  border: 1px solid rgba(245, 166, 35, 0.18); animation: spin 80s linear infinite; }
.story-ring.r2 { inset: 14%; border: 1px dashed rgba(245, 166, 35, 0.32); animation: spin 50s linear infinite reverse; }
.story-ring.r3 { inset: 22%; border: 1px dotted rgba(58, 107, 53, 0.32); animation: spin 65s linear infinite; }
/* Outer dotted track with little orbiting marks */
.story-ring-marks {
  position: absolute;
  inset: 4%;
  pointer-events: none;
  z-index: 1;
  animation: spin 100s linear infinite;
}
.story-ring-marks::before,
.story-ring-marks::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mango);
}
.story-ring-marks::before { top: -3px; left: 50%; transform: translateX(-50%); }
.story-ring-marks::after  { bottom: -3px; left: 50%; transform: translateX(-50%); background: var(--green); }
/* Soft warm glow halo behind the mango: REMOVED for cleaner elegant look */
.story-glow { display: none; }
@keyframes storyGlowPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.10); }
}
/* The transparent mango composition itself: softened shadow, no glow */
.story-mango {
  position: relative; z-index: 3;
  width: 100%;
  max-width: 580px;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.10));
  animation: storyFloat 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes storyFloat {
  0%, 100% { transform: translateY(0) rotate(-0.8deg); }
  50%      { transform: translateY(-14px) rotate(0.8deg); }
}
/* Floating mango cubes orbiting the composition */
.story-cube {
  position: absolute;
  width: 24px; height: 24px;
  background: linear-gradient(135deg, #ffd873 0%, #f5a524 50%, #c46a12 100%);
  border-radius: 5px;
  box-shadow:
    inset -3px -3px 6px rgba(184, 83, 0, 0.35),
    inset 2px 2px 4px rgba(255, 240, 180, 0.45),
    0 6px 14px rgba(184, 83, 0, 0.14);
  z-index: 4;
  opacity: 0.92;
}
.story-cube.s { width: 16px; height: 16px; }
.story-cube.xs { width: 11px; height: 11px; opacity: 0.72; }
.story-cube.c1 { top: 8%;  left: 4%;   animation: storyCubeA 9s ease-in-out infinite; }
.story-cube.c2 { top: 14%; right: 6%;  animation: storyCubeB 11s ease-in-out infinite; }
.story-cube.c3 { bottom: 18%; right: 2%; animation: storyCubeA 8s 2s ease-in-out infinite; }
.story-cube.c4 { top: 36%; left: -1%;  animation: storyCubeB 10s 1s ease-in-out infinite; }
.story-cube.c5 { bottom: 28%; left: 6%; animation: storyCubeA 12s 3s ease-in-out infinite; }
@keyframes storyCubeA {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(8px, -18px) rotate(180deg); }
}
@keyframes storyCubeB {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-12px, -22px) rotate(-180deg); }
}
/* Sparkle dots */
.story-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8d6 0%, #ffd873 50%, transparent 100%);
  filter: blur(0.5px);
  z-index: 4;
  animation: storySpark 3.5s ease-in-out infinite;
}
.story-spark.s1 { top: 22%; right: 18%; animation-delay: 0s; }
.story-spark.s2 { top: 48%; left: 8%;   animation-delay: 1.2s; }
.story-spark.s3 { bottom: 32%; right: 22%; animation-delay: 2.4s; }
.story-spark.s4 { top: 32%; right: 4%;  animation-delay: 0.7s; }
@keyframes storySpark {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: 1; transform: scale(1.4); }
}
/* Decorative italic numeral 1932 in the background */
.story-num-deco {
  position: absolute;
  bottom: -8%; left: -6%;
  font-family: 'Playfair Display', serif;
  font-size: clamp(7rem, 16vw, 12rem);
  font-style: italic;
  font-weight: 200;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(245, 166, 35, 0.18);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 1;
}

.about-main-img { width: 100%; border-radius: 24px; aspect-ratio: 4/5; object-fit: cover; background: var(--mango-light); }
.about-float-badge { position: absolute; bottom: 12px; right: 12px; background: linear-gradient(135deg, #ffd873, #f5a524); border-radius: 20px; padding: 18px 26px; box-shadow: 0 18px 50px rgba(245,166,35,0.4), 0 0 0 1px rgba(255,255,255,0.55) inset; z-index: 5; }
.about-float-badge strong { display: block; font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--earth-deep); line-height: 1; }
.about-float-badge span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--earth); }
.about-text h2 { color: var(--text-dark); }
.about-text p { font-size: 16px; color: var(--text-mid); line-height: 1.85; margin-bottom: 20px; }
.feature-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.fpill { display: flex; align-items: center; gap: 10px; background: var(--cream); border: 1px solid rgba(197,149,26,0.15); border-radius: 12px; padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--text-mid); }

/* HOME PRODUCTS */
.home-products { background: var(--cream); padding: 100px 48px; }
.home-products h2 { color: var(--text-dark); }
.home-products .sec-label { color: var(--saffron); }
.hp-intro { font-size: 16px; color: var(--text-mid); max-width: 480px; line-height: 1.75; margin-bottom: 56px; }
.prod-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 22px; }
.prod-grid-4-b { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pc { background: white; border: 1px solid rgba(197,149,26,0.14); border-radius: 22px; overflow: hidden; cursor: pointer; transition: transform 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), border-color 0.3s, box-shadow 0.4s, background 0.3s; position: relative; box-shadow: 0 4px 16px rgba(28,18,8,0.04); }
.pc::before {
  content: ""; position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(245,166,35,0.10) 50%, transparent 70%);
  border-radius: 22px;
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
}
.pc:hover { background: white; border-color: rgba(245,166,35,0.45); transform: translateY(-12px); box-shadow: 0 30px 60px rgba(245,166,35,0.18), 0 12px 24px rgba(28,18,8,0.08); }
.pc:hover::before { opacity: 1; }
.pc-img { padding: 26px; display: flex; align-items: center; justify-content: center; height: 270px; position: relative; overflow: hidden; transition: background 0.4s; }
.pc-img::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at center, rgba(245,166,35,0.20) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}
.pc:hover .pc-img::after { opacity: 1; }
.pc-img img { height: 210px; max-width: 100%; object-fit: contain; transition: transform 0.5s var(--ease-out, cubic-bezier(0.16,1,0.3,1)); filter: drop-shadow(0 14px 24px rgba(28,18,8,0.18)); position: relative; z-index: 2; }
.pc:hover .pc-img img { transform: scale(1.1) translateY(-8px); }
/* Zoom-in hint overlay shown on hover */
.pc-zoom-mark {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  background: rgba(28,18,8,0.78);
  color: var(--mango);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  z-index: 3;
  opacity: 0; transform: scale(0.7);
  transition: opacity 0.3s, transform 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.pc:hover .pc-zoom-mark { opacity: 1; transform: scale(1); }
.pc-body { padding: 18px 22px 22px; position: relative; }
.pc-body h4 { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 600; color: var(--text-dark); line-height: 1.28; margin-bottom: 6px; letter-spacing: -0.01em; }
.pc-body p { font-size: 12.5px; color: var(--text-mid); line-height: 1.5; }
.pc-arrow { width: 30px; height: 30px; border-radius: 50%; background: rgba(245,166,35,0); border: 1px solid rgba(245,166,35,0); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--saffron); margin-top: 10px; transition: all 0.25s; }
.pc:hover .pc-arrow { background: var(--saffron); border-color: var(--saffron); color: white; }

/* HOME JOURNEY */
.home-journey { padding: 100px 48px; background: var(--mango-light); }
.home-journey h2 { color: var(--text-dark); text-align: center; }
.journey-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 64px; position: relative; }
.journey-steps::before { content: ''; position: absolute; top: 36px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--mango), var(--saffron)); }
.jstep { text-align: center; position: relative; z-index: 1; padding: 0 12px; }
.jcircle { width: 72px; height: 72px; border-radius: 50%; background: white; border: 3px solid var(--mango); display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 18px; box-shadow: 0 8px 24px rgba(245,166,35,0.25); transition: all 0.3s; }
.jstep:hover .jcircle { background: var(--mango); transform: scale(1.1); }
.jstep h4 { font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; }
.jstep p { font-size: 12px; color: var(--text-light); line-height: 1.6; }

/* HOME WHY */
.home-why { padding: 100px 48px; background: white; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.why-card { background: var(--cream); border: 1px solid rgba(197,149,26,0.1); border-radius: 22px; padding: 32px 28px; transition: all 0.3s; }
.why-card:hover { border-color: var(--mango); box-shadow: 0 20px 52px rgba(245,166,35,0.1); transform: translateY(-6px); }
.why-icon { font-size: 36px; margin-bottom: 18px; display: block; }
.why-card h3 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 600; color: var(--text-dark); margin-bottom: 10px; }
.why-card p { font-size: 14px; color: var(--text-light); line-height: 1.75; }

/* HOME TESTIMONIALS */
.home-testi { padding: 80px 48px; background: var(--cream); }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.tc { background: white; border: 1px solid rgba(197,149,26,0.1); border-radius: 20px; padding: 30px; transition: all 0.3s; }
.tc:hover { box-shadow: 0 16px 44px rgba(92,61,30,0.1); transform: translateY(-4px); }
.tc-stars { color: var(--mango); font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.tc-text { font-size: 14px; color: var(--text-mid); line-height: 1.75; font-style: italic; margin-bottom: 22px; }
.tc-author { display: flex; align-items: center; gap: 12px; }
.tc-av { width: 42px; height: 42px; border-radius: 50%; background: var(--mango); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--earth-deep); flex-shrink: 0; }
.tc-name { font-weight: 600; font-size: 14px; color: var(--text-dark); }
.tc-role { font-size: 12px; color: var(--text-light); margin-top: 2px; }

/* HOME ENQUIRE */
.home-enquire { padding: 100px 48px; background: linear-gradient(135deg, var(--green-deep), var(--green)); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.enq-left h2 { color: white; }
.enq-left .sec-label { color: rgba(245,166,35,0.75); }
.enq-left p { font-size: 16px; color: rgba(255,255,255,0.55); line-height: 1.8; margin-bottom: 32px; }
.country-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.ctag { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 100px; padding: 6px 16px; font-size: 12px; font-weight: 500; color: white; }
.enq-stats { display: flex; gap: 28px; }
.est { text-align: center; }
.est strong { display: block; font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--mango); }
.est span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.45); }
.form-card { background: white; border-radius: 24px; padding: 40px; box-shadow: 0 40px 80px rgba(0,0,0,0.3); }
.form-card h3 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; }
.form-card > p { font-size: 14px; color: var(--text-light); margin-bottom: 28px; }
.fg { margin-bottom: 16px; }
.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fg label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-mid); margin-bottom: 7px; }
.fg input, .fg select { width: 100%; padding: 11px 14px; border: 1.5px solid #E8E0D0; border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text-dark); outline: none; transition: border-color 0.2s; background: #FAFAF8; }
.fg input:focus, .fg select:focus { border-color: var(--mango); background: white; }
.sub-btn { width: 100%; padding: 14px; background: var(--saffron); color: white; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; margin-top: 6px; transition: all 0.2s; }
.sub-btn:hover { background: var(--mango-deep); transform: translateY(-1px); }

/* HOME INSTA */
.home-insta { padding: 80px 48px; background: var(--cream); }
.insta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.insta-card { aspect-ratio: 1; border-radius: 16px; overflow: hidden; position: relative; cursor: pointer; background: var(--earth-deep); }
.insta-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.insta-card:hover img { transform: scale(1.08); }
.insta-overlay { position: absolute; inset: 0; background: rgba(28,18,8,0); transition: background 0.3s; display: flex; align-items: center; justify-content: center; }
.insta-card:hover .insta-overlay { background: rgba(28,18,8,0.6); }
.insta-icon { font-size: 28px; opacity: 0; transition: opacity 0.3s; }
.insta-card:hover .insta-icon { opacity: 1; }

/* ===================== ABOUT PAGE ===================== */
#about { background: white; }
.about-hero { background: var(--earth-deep); min-height: 88vh; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; position: relative; }
.ah-left { padding: 80px 28px 60px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.ah-right { position: relative; overflow: hidden; }
.ah-right img { width: 100%; height: 100%; object-fit: cover; opacity: 0.65; }
.ah-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, var(--earth-deep) 0%, transparent 45%); }
.founder-card-float { position: absolute; bottom: 48px; left: -40px; background: white; border-radius: 20px; padding: 22px 26px; display: flex; align-items: center; gap: 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.4); min-width: 280px; }
.fcf-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--mango); background: var(--mango-light); flex-shrink: 0; }
.fcf-text strong { display: block; font-size: 14px; font-weight: 600; color: var(--text-dark); }
.fcf-text span { font-size: 12px; color: var(--text-light); }
.fcf-year { margin-left: auto; text-align: right; }
.fcf-year strong { display: block; font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; color: var(--mango); }
.fcf-year span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light); }
.about-stat-bar { background: var(--green); padding: 0 48px; display: flex; }
.ast { flex: 1; padding: 32px 0; text-align: center; border-right: 1px solid rgba(255,255,255,0.12); }
.ast:last-child { border-right: none; }
.ast-num { font-family: 'Playfair Display', serif; font-size: 38px; font-weight: 700; color: var(--mango); display: block; }
.ast-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: rgba(255,255,255,0.5); margin-top: 6px; display: block; }
.founder-section { padding: 100px 48px; background: white; position: relative; overflow: hidden; }
.founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 2; }

/* === FOUNDER PORTRAIT (premium framed presentation) === */
.founder-portrait-wrap {
  position: relative;
  aspect-ratio: 3/4;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
/* Soft amber halo glow behind the portrait */
.founder-portrait-halo {
  position: absolute;
  inset: -8% -8% -8% -8%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(245,166,35,0.22) 0%,
    rgba(245,166,35,0.08) 40%,
    transparent 70%);
  filter: blur(20px);
  animation: founderHaloPulse 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes founderHaloPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.06); }
}
/* Slowly rotating decorative rings around the portrait */
.founder-portrait-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(245,166,35,0.28);
  pointer-events: none;
  z-index: 1;
}
.founder-portrait-ring-1 {
  inset: -4%;
  border-style: dashed;
  animation: spin 70s linear infinite;
}
.founder-portrait-ring-2 {
  inset: -10%;
  border-style: solid;
  border-color: rgba(245,166,35,0.10);
  animation: spin 100s linear infinite reverse;
}
/* The actual portrait frame */
.founder-portrait-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 30px 70px rgba(92,61,30,0.25),
    0 8px 24px rgba(245,166,35,0.18),
    0 0 0 1px rgba(197,149,26,0.14);
  background: linear-gradient(135deg, var(--mango-light) 0%, #FFE8C0 100%);
  z-index: 2;
}
.founder-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.8s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  /* Vintage / aged photograph treatment */
  filter:
    sepia(0.55)
    contrast(0.88)
    brightness(0.93)
    saturate(0.72)
    grayscale(0.18);
}

/* Aged photograph overlay: paper texture + edge burn + grain */
.founder-vintage-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  /* Edge burn / vignette for period printing look */
  background:
    radial-gradient(ellipse at center,
      transparent 42%,
      rgba(40, 22, 8, 0.22) 70%,
      rgba(20, 10, 2, 0.55) 100%),
    /* Horizontal scan lines — mimics old photographic paper */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,0.018) 3px,
      rgba(0,0,0,0.018) 4px
    ),
    /* Subtle warm paper tone wash */
    linear-gradient(
      135deg,
      rgba(200,160,90,0.10) 0%,
      rgba(160,110,50,0.08) 50%,
      rgba(90,50,20,0.12) 100%
    );
  mix-blend-mode: multiply;
  z-index: 3;
}
/* Faded border effect — like an old card-mount print */
.founder-portrait-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 4px rgba(180,130,60,0.22), inset 0 0 18px rgba(80,40,10,0.18);
  pointer-events: none;
  z-index: 4;
}

.founder-portrait-frame:hover .founder-portrait {
  transform: scale(1.04);
  filter:
    sepia(0.45)
    contrast(0.90)
    brightness(0.96)
    saturate(0.80)
    grayscale(0.12);
}
/* If the image fails to load, the .img-fallback class kicks in via JS onerror */
.founder-portrait.img-fallback {
  background: linear-gradient(135deg, var(--mango) 0%, var(--mango-deep) 100%);
  color: transparent;        /* hide the alt text fallback */
  font-size: 0;
  text-indent: -9999px;      /* push any residual broken-image text out of view */
  position: relative;
  /* Replace the failed <img> visual with a solid pseudo-element */
  background-image: linear-gradient(135deg, var(--mango) 0%, var(--mango-deep) 100%) !important;
}
.founder-portrait.img-fallback::before {
  /* This pseudo-element replaces the visible image area entirely */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--mango) 0%, var(--mango-deep) 100%);
  z-index: 1;
}
.founder-portrait.img-fallback::after {
  content: "🥭";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 80px;
  opacity: 0.25;
  z-index: 2;
}
/* Subtle vignette on the portrait so the name plate has contrast */
.founder-portrait-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(28,18,8,0.55) 100%);
  pointer-events: none;
  border-radius: inherit;
}
/* "Est. 1932" badge in the top-left corner of the frame */
.founder-est-badge {
  position: absolute;
  top: 18px; left: 18px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  box-shadow: 0 6px 20px rgba(28,18,8,0.18);
  z-index: 3;
}
.founder-est-badge .est-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--saffron);
  margin-bottom: 4px;
}
.founder-est-badge .est-year {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--earth-deep);
}
/* Bottom name plate inside the frame */
.founder-name-plate {
  position: absolute;
  bottom: 18px; left: 18px; right: 18px;
  z-index: 3;
  color: white;
}
.founder-name-plate strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
  margin-bottom: 2px;
}
.founder-name-plate span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
/* Quote badge floats over the portrait, slightly off the edge */
.fq-badge {
  position: absolute;
  bottom: -10px; right: -28px;
  background: var(--mango);
  border-radius: 18px;
  padding: 18px 22px;
  max-width: 230px;
  box-shadow: 0 16px 48px rgba(245,166,35,0.4);
  z-index: 4;
  animation: founderBadgeFloat 6s ease-in-out infinite;
}
@keyframes founderBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.fq-badge p { font-family: 'Playfair Display', serif; font-style: italic; font-size: 14px; color: var(--earth-deep); line-height: 1.5; }
.fq-badge span { font-size: 11px; color: var(--earth); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 8px; display: block; }
.founder-text p { font-size: 16px; color: var(--text-mid); line-height: 1.85; margin-bottom: 22px; }
.val-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.vp { display: flex; align-items: center; gap: 10px; background: var(--cream); border: 1px solid rgba(197,149,26,0.12); border-radius: 12px; padding: 12px 15px; font-size: 13px; font-weight: 500; color: var(--text-mid); }
.vp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mango); flex-shrink: 0; }

/* ============================================================
   HORIZONTAL JOURNEY TIMELINE: interactive heritage carousel
   ============================================================ */
.timeline-section {
  padding: 110px 0 90px;
  background:
    radial-gradient(1200px 600px at 85% 0%, rgba(245,166,35,0.08), transparent 60%),
    radial-gradient(900px 500px at 10% 100%, rgba(58,107,53,0.06), transparent 55%),
    var(--cream);
  position: relative;
  overflow: hidden;
}
.timeline-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><circle cx='1' cy='1' r='1' fill='%23C47A0E' opacity='0.06'/></svg>");
  background-size: 40px 40px;
  pointer-events: none;
  opacity: 0.6;
}
.timeline-section > * { position: relative; z-index: 1; }

.timeline-section .sec-label,
.timeline-section h2 {
  padding: 0 48px;
}

/* Watermark numeral that morphs with active slide */
.tl-watermark {
  position: absolute;
  top: 80px;
  right: -20px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(180px, 22vw, 320px);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(245,166,35,0.18);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: opacity 0.6s ease;
}

/* Outer wrapper */
.tl-wrap {
  margin-top: 70px;
  position: relative;
  padding: 0 clamp(20px, 5vw, 56px);
}

/* Stage holds the slides side by side */
.tl-stage {
  position: relative;
  width: 100%;
  min-height: 520px;
  perspective: 1600px;
}

.tl-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(60px) scale(0.985);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.9s;
  pointer-events: none;
}
.tl-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}
.tl-slide.is-prev { transform: translateX(-60px) scale(0.985); }

/* Image card */
.tl-image {
  position: relative;
  aspect-ratio: 7 / 4;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--mango-light), #f5e6c8);
  box-shadow:
    0 30px 60px -25px rgba(92, 61, 30, 0.45),
    0 12px 24px -12px rgba(92, 61, 30, 0.2),
    inset 0 0 0 1px rgba(255,255,255,0.4);
  isolation: isolate;
  cursor: zoom-in;
  transform: translateZ(0);
  transition:
    box-shadow 0.5s cubic-bezier(0.22,1,0.36,1),
    transform   0.5s cubic-bezier(0.22,1,0.36,1);
}
/* Active slide image: pop forward */
.tl-slide.is-active .tl-image {
  box-shadow:
    0 40px 80px -20px rgba(92, 61, 30, 0.50),
    0 16px 32px -10px rgba(92, 61, 30, 0.25),
    inset 0 0 0 1px rgba(255,255,255,0.5);
}
/* Hover: gentle lift */
.tl-image:hover {
  transform: translateY(-6px) translateZ(0) scale(1.012);
  box-shadow:
    0 48px 90px -18px rgba(92, 61, 30, 0.52),
    0 20px 40px -8px  rgba(92, 61, 30, 0.22),
    0 0 0 1px rgba(245,166,35,0.18),
    inset 0 1px 0 rgba(255,255,255,0.60);
}
/* Bottom vignette gradient */
.tl-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(28,18,8,0) 35%,
    rgba(28,18,8,0.18) 65%,
    rgba(28,18,8,0.62) 100%
  );
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.tl-image:hover::before { opacity: 0.72; }

/* Glass border frame */
.tl-image::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.22);
  z-index: 5;
  pointer-events: none;
  transition: border-color 0.4s;
}
.tl-image:hover::after {
  border-color: rgba(245,166,35,0.28);
}

/* Shimmer sweep on hover */
.tl-image .tl-img-shimmer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.10) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  background-position: 200% 0;
  transition: background-position 0s;
  opacity: 0;
}
.tl-image:hover .tl-img-shimmer {
  opacity: 1;
  background-position: -200% 0;
  transition: background-position 0.9s ease, opacity 0.2s;
}

/* The image itself: ken-burns zoom-out on activation */
.tl-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform: scale(1.10);
  transition:
    transform   9s cubic-bezier(0.05, 0, 0.2, 1),
    filter      0.7s ease;
  filter: saturate(1.0) brightness(0.92);
  will-change: transform;
}
/* When slide activates: zoom out from 1.10 → 1.0 (slow ken-burns) */
.tl-slide.is-active .tl-image img {
  transform: scale(1.0);
  filter: saturate(1.08) brightness(0.97);
}
/* Previous slide: fade back */
.tl-slide.is-prev .tl-image img {
  filter: saturate(0.85) brightness(0.82);
}
/* Hover: micro color boost */
.tl-image:hover img {
  filter: saturate(1.18) brightness(1.03) contrast(1.04);
}

/* Caption bar that slides up from bottom on hover */
.tl-img-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 4;
  padding: 18px 22px 22px;
  background: linear-gradient(0deg, rgba(18,10,2,0.82) 0%, transparent 100%);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.22,1,0.36,1), opacity 0.35s ease;
  pointer-events: none;
  display: flex; align-items: center; gap: 10px;
}
.tl-image:hover .tl-img-caption {
  transform: translateY(0);
  opacity: 1;
}
.tl-img-caption-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  background: rgba(245,166,35,0.18);
  border: 1px solid rgba(245,166,35,0.35);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.tl-img-caption-icon svg {
  width: 13px; height: 13px;
  stroke: #f5a623; fill: none;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.tl-img-caption-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px; font-weight: 500;
  color: rgba(255,240,210,0.82);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Entrance animation for newly active slide image */
@keyframes tlImgEntrance {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0%   0 0); }
}
.tl-slide.is-active .tl-image {
  animation: tlImgEntrance 0.85s cubic-bezier(0.22,1,0.36,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .tl-slide.is-active .tl-image { animation: none; }
  .tl-image, .tl-image img { transition: none; }
}

/* Year stamp on image */
.tl-image-year {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 4;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 18px;
  border-radius: 100px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--earth-deep);
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px rgba(28,18,8,0.18);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tl-image-year::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mango);
  box-shadow: 0 0 0 3px rgba(245,166,35,0.25);
}

/* Chapter number badge */
.tl-chapter {
  position: absolute;
  bottom: 22px;
  left: 22px;
  z-index: 4;
  color: white;
  font-family: 'Fraunces', 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}
.tl-chapter strong {
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  margin-right: 8px;
  letter-spacing: 0;
}

/* Content side */
.tl-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: clamp(0px, 3vw, 40px);
  position: relative;
}
.tl-era {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--saffron);
  margin-bottom: 14px;
}
.tl-era::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--saffron);
  vertical-align: middle;
  margin-right: 12px;
  margin-bottom: 4px;
  border-radius: 2px;
}
.tl-headline {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  color: var(--text-dark);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.tl-headline em {
  font-style: italic;
  font-weight: 600;
  color: var(--saffron);
}
.tl-attribution {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--earth);
  margin-bottom: 22px;
  display: block;
}
.tl-attribution::before {
  content: '— ';
  color: var(--mango);
}
.tl-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(28, 18, 8, 0.72);
  max-width: 56ch;
}

/* Decorative quill-stroke under headline */
.tl-rule {
  width: 60px;
  height: 2px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, var(--mango), transparent);
  border-radius: 2px;
}

/* ===== Bottom navigation rail ===== */
.tl-rail {
  margin-top: 70px;
  padding: 0 clamp(20px, 5vw, 56px);
  position: relative;
}

/* Progress track + tick marks */
.tl-track {
  position: relative;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(92,61,30,0.12) 0%,
    rgba(92,61,30,0.18) 50%,
    rgba(92,61,30,0.12) 100%);
  border-radius: 2px;
  margin-bottom: 28px;
}
.tl-track-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--mango), var(--saffron));
  border-radius: 2px;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 12px rgba(245,166,35,0.4);
}
.tl-track-glow {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mango);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 4px rgba(245,166,35,0.2),
    0 0 18px rgba(245,166,35,0.6);
  transition: left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  left: 0%;
  z-index: 2;
}
.tl-track-glow::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(245,166,35,0.5);
  animation: tlPulse 1.8s ease-out infinite;
}
@keyframes tlPulse {
  0% { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Year markers */
.tl-years {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  position: relative;
}
.tl-year-btn {
  flex: 1;
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 4px 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(28,18,8,0.42);
  text-align: center;
  transition: color 0.35s ease, transform 0.35s ease;
  position: relative;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tl-year-btn::before {
  content: '';
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 12px;
  background: rgba(92,61,30,0.18);
  transition: background 0.3s ease, height 0.3s ease;
}
.tl-year-btn:hover {
  color: var(--earth-deep);
  transform: translateY(-2px);
}
.tl-year-btn:hover::before { background: var(--mango); height: 16px; }
.tl-year-btn.is-active {
  color: var(--saffron);
  font-weight: 700;
  transform: translateY(-2px);
}
.tl-year-btn.is-active::before {
  background: var(--saffron);
  height: 18px;
}

/* Side controls */
.tl-controls {
  position: absolute;
  top: 50%;
  width: calc(100% - clamp(40px, 10vw, 112px));
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 5;
}
.tl-arrow {
  pointer-events: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(28,18,8,0.1);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: var(--earth-deep);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 10px 30px -8px rgba(28,18,8,0.18);
  margin: 0 -10px;
  font-family: 'Playfair Display', serif;
  line-height: 1;
}
.tl-arrow:hover {
  background: var(--earth-deep);
  color: var(--mango);
  border-color: var(--earth-deep);
  transform: scale(1.08);
  box-shadow: 0 14px 36px -8px rgba(28,18,8,0.28);
}
.tl-arrow:active { transform: scale(0.96); }
.tl-arrow svg { width: 18px; height: 18px; }

/* Autoplay toggle pill */
.tl-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 38px;
  gap: 24px;
}
.tl-counter {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--earth);
  letter-spacing: 0.02em;
}
.tl-counter strong {
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  color: var(--earth-deep);
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.tl-counter span { color: rgba(28,18,8,0.4); margin: 0 6px; }
.tl-autoplay {
  appearance: none;
  border: 1px solid rgba(28,18,8,0.12);
  background: rgba(255,255,255,0.7);
  color: var(--earth-deep);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}
.tl-autoplay:hover {
  border-color: var(--mango);
  background: white;
}
.tl-autoplay-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(58,107,53,0.18);
  animation: tlBlink 1.4s ease-in-out infinite;
}
.tl-autoplay.is-paused .tl-autoplay-dot {
  background: rgba(28,18,8,0.3);
  box-shadow: none;
  animation: none;
}
@keyframes tlBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Subtle reveal as section enters */
.timeline-section.tl-in-view .tl-watermark { opacity: 1; }
.tl-watermark { opacity: 0; }

/* ============== Tablet ============== */
@media (max-width: 960px) {
  .tl-slide {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tl-stage { min-height: 700px; }
  .tl-image { aspect-ratio: 16/10; max-height: 320px; }
  .tl-content { padding-right: 0; }
  .tl-watermark { font-size: 180px; right: -10px; top: 50px; }
}

/* ============== Mobile ============== */
@media (max-width: 720px) {
  .timeline-section { padding: 70px 0 60px; }
  .timeline-section .sec-label,
  .timeline-section h2 { padding: 0 20px; }
  .tl-wrap { padding: 0 20px; margin-top: 44px; }
  .tl-rail { padding: 0 20px; margin-top: 40px; }
  .tl-stage { min-height: 600px; }
  .tl-image { aspect-ratio: 4/3; max-height: 260px; border-radius: 18px; }
  .tl-image-year { font-size: 14px; padding: 7px 14px; top: 14px; left: 14px; }
  .tl-chapter { bottom: 14px; left: 14px; font-size: 11px; }
  .tl-headline { font-size: 26px; }
  .tl-attribution { font-size: 14px; margin-bottom: 14px; }
  .tl-body { font-size: 14.5px; line-height: 1.7; }
  .tl-controls { display: none; }
  .tl-watermark { font-size: 130px; top: 30px; }

  /* Mobile year rail: scrollable */
  .tl-years {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .tl-years::-webkit-scrollbar { display: none; }
  .tl-year-btn {
    flex: 0 0 auto;
    min-width: 84px;
    scroll-snap-align: center;
    font-size: 12px;
  }
  .tl-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 28px;
  }
  .tl-counter { font-size: 14px; }
  .tl-counter strong { font-size: 18px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tl-slide,
  .tl-image img,
  .tl-track-fill,
  .tl-track-glow { transition-duration: 0.01ms !important; }
  .tl-track-glow::before,
  .tl-autoplay-dot { animation: none !important; }
}

/* MV SECTION */
.mv-section { padding: 100px 48px; background: var(--earth-deep); }
.mv-section h2 { color: white; }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 56px; }
.mv-card { border-radius: 22px; padding: 44px 36px; }
.mv-mission { background: rgba(245,166,35,0.07); border: 1px solid rgba(245,166,35,0.18); }
.mv-vision { background: rgba(58,107,53,0.25); border: 1px solid rgba(58,107,53,0.35); }
.mv-icon { font-size: 34px; margin-bottom: 22px; display: block; }
.mv-card h3 { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 600; color: white; margin-bottom: 14px; }
.mv-card p { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.8; }

/* QUALITY SECTION */
.quality-section { padding: 100px 48px; background: white; }
.qual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.qcard { text-align: center; padding: 36px 24px; border: 1px solid rgba(197,149,26,0.1); border-radius: 22px; transition: all 0.3s; }
.qcard:hover { border-color: var(--mango); background: var(--mango-light); transform: translateY(-6px); }
.qcard-icon {
  width: 200px;
  height: 120px;
  border-radius: 10px;
  margin: 0 auto 20px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--mango-light) 0%, rgba(245, 166, 35, 0.18) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 166, 35, 0.20);
  box-shadow: 0 6px 18px rgba(140, 80, 10, 0.10);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.qcard:hover .qcard-icon {
  transform: scale(1.05);
  box-shadow: 0 12px 28px rgba(140,80,10,0.20);
}
.qcard-icon img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.qcard:hover .qcard-icon img {
  transform: scale(1.08);
}
/* Subtle warm tint over the photo to keep the section visually cohesive */
.qcard-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(245,166,35,0.08), rgba(184,83,0,0.18));
  pointer-events: none;
  z-index: 1;
}
.qcard-icon-fallback {
  position: relative;
  z-index: 2;
  font-size: 36px;
  display: none; /* shown only if img fails */
}
.qcard h4 { font-size: 17px; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; }
.qcard p { font-size: 13px; color: var(--text-light); line-height: 1.7; }
.cert-bdg { display: inline-block; margin-top: 14px; background: var(--mango-light); border: 1px solid rgba(245,166,35,0.3); border-radius: 100px; padding: 3px 12px; font-size: 11px; font-weight: 600; color: var(--mango-deep); }

/* GEN SECTION */
.gen-section { padding: 100px 48px; background: var(--mango-light); }
.gen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-top: 56px; }
.gen-text p { font-size: 16px; color: var(--text-mid); line-height: 1.85; margin-bottom: 20px; }
.gen-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.gen-step { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: white; border-radius: 14px; border: 1px solid rgba(197,149,26,0.1); }
.gen-num { width: 34px; height: 34px; border-radius: 50%; background: var(--mango); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700; color: var(--earth-deep); flex-shrink: 0; }
.gen-step strong { display: block; font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 3px; }
.gen-step span { font-size: 12px; color: var(--text-light); }
.gen-img-wrap { position: relative; }
.gen-img { width: 100%; border-radius: 22px; aspect-ratio: 4/5; object-fit: cover; background: linear-gradient(135deg, var(--mango), var(--saffron)); }
.gen-stamp { position: absolute; bottom: -20px; left: -20px; width: 110px; height: 110px; border-radius: 50%; background: var(--green); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 14px 36px rgba(58,107,53,0.4); }
.gen-stamp strong { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; color: white; line-height: 1; }
.gen-stamp span { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); margin-top: 3px; }

/* ===================== PRODUCTS PAGE ===================== */
#products { background: var(--cream); }
.prod-hero { background: #df750a; padding: 110px 48px 90px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.prod-filter-bar { background: white; padding: 0 48px; border-bottom: 1px solid rgba(197,149,26,0.1); position: sticky; top: 72px; z-index: 98; display: flex; overflow-x: auto; }
.pfbtn { padding: 18px 24px; font-size: 14px; font-weight: 500; color: var(--text-light); border: none; background: transparent; cursor: pointer; font-family: 'DM Sans', sans-serif; border-bottom: 2px solid transparent; white-space: nowrap; transition: all 0.2s; }
.pfbtn:hover { color: var(--saffron); }
.pfbtn.active { color: var(--saffron); border-bottom-color: var(--saffron); }
.featured-prod { background: var(--earth-deep); border-radius: 26px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; margin-bottom: 44px; }
.fp-left { padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; }
.fp-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(245,166,35,0.15); border: 1px solid rgba(245,166,35,0.25); border-radius: 100px; padding: 5px 14px; margin-bottom: 22px; width: fit-content; }
.fp-badge span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mango); }
.fp-left h3 { font-family: 'Playfair Display', serif; font-size: 34px; font-weight: 700; color: white; line-height: 1.15; margin-bottom: 14px; }
.fp-left h3 em { font-style: italic; color: var(--mango); }
.fp-left > p { font-size: 15px; color: rgba(255,255,255,0.5); line-height: 1.8; margin-bottom: 28px; }
.fp-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 32px; }
.fps { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px 14px; }
.fps span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.35); display: block; margin-bottom: 3px; }
.fps strong { font-size: 13px; font-weight: 500; color: white; }
.fp-right { background: var(--mango-light); display: flex; align-items: center; justify-content: center; padding: 36px; }
.fp-right img { height: 280px; object-fit: contain; filter: drop-shadow(0 20px 44px rgba(92,61,30,0.3)); transition: transform 0.5s; }
.featured-prod:hover .fp-right img { transform: scale(1.06) rotate(-3deg); }
.prod-section-wrap { padding: 60px 48px; }
.prod-section-wrap.alt { background: white; }
.cat-divider { background: var(--green); padding: 28px 48px; display: flex; align-items: center; gap: 18px; }
.cat-divider h3 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 600; color: white; }
.cat-div-line { flex: 1; height: 1px; background: rgba(255,255,255,0.18); }
.cat-div-count { font-size: 12px; color: rgba(255,255,255,0.45); }
.prod-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pcard { background: white; border-radius: 22px; overflow: hidden; border: 1px solid rgba(197,149,26,0.1); cursor: pointer; transition: all 0.3s; }
.pcard:hover { border-color: var(--mango); box-shadow: 0 20px 52px rgba(245,166,35,0.12); transform: translateY(-7px); }
.pcard-img { padding: 24px; display: flex; align-items: center; justify-content: center; height: 300px; position: relative; }
.pcard-img img { height: 200px; object-fit: contain; transition: transform 0.4s; filter: drop-shadow(0 10px 20px rgba(92,61,30,0.2)); }
.pcard:hover .pcard-img img { transform: scale(1.1) translateY(-6px); }
.pcard-bdg { position: absolute; top: 12px; left: 12px; border-radius: 100px; padding: 3px 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.bdg-premium { background: var(--mango); color: var(--earth-deep); }
.bdg-new { background: var(--green); color: white; }
.bdg-seasonal { background: var(--saffron); color: white; }
.bdg-trad { background: var(--earth); color: white; }
.bdg-coastal { background: #6B2D5E; color: white; }
.pcard-body { padding: 16px 20px 22px; }
.pcard-body h4 { font-size: 15px; font-weight: 600; color: var(--text-dark); margin-bottom: 7px; line-height: 1.4; }
.pcard-body p { font-size: 13px; color: var(--text-light); line-height: 1.6; margin-bottom: 14px; }
.pcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ptag { background: var(--cream); border: 1px solid rgba(197,149,26,0.12); border-radius: 100px; padding: 2px 9px; font-size: 10px; font-weight: 500; color: var(--text-mid); }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(197,149,26,0.08); }
.enq-btn { background: var(--saffron); color: white; border: none; border-radius: 100px; padding: 7px 16px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: background 0.2s; }
.enq-btn:hover { background: var(--mango-deep); }
.det-link { font-size: 12px; color: var(--text-light); cursor: pointer; transition: color 0.2s; }
.det-link:hover { color: var(--saffron); }
.comp-table-section { padding: 60px 48px; background: var(--mango-light); }
.comp-tbl { width: 100%; border-collapse: collapse; background: white; border-radius: 18px; overflow: hidden; border: 1px solid rgba(197,149,26,0.1); margin-top: 40px; }
.comp-tbl th { background: var(--earth-deep); color: white; padding: 16px 22px; font-size: 13px; font-weight: 500; text-align: left; }
.comp-tbl th:first-child { color: var(--mango); font-family: 'Playfair Display', serif; font-size: 15px; }
.comp-tbl td { padding: 14px 22px; font-size: 13px; color: var(--text-mid); border-bottom: 1px solid rgba(197,149,26,0.07); }
.comp-tbl tr:last-child td { border-bottom: none; }
.comp-tbl tr:hover td { background: var(--mango-light); }
.comp-tbl td:first-child { font-weight: 600; color: var(--text-dark); }
.chk { color: var(--green); font-size: 15px; }
.crss { color: #ccc; }

/* ===================== HOUSE OF SIPS ===================== */
#hos { background: #0E1A0D; color: white; }

/* === Cinematic video hero === */
.hos-hero {
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #06120A;
  isolation: isolate;
}

/* Full-bleed background video */
.hos-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Slight initial scale for the "settling in" reveal */
  transform: scale(1.06);
  opacity: 0;
  transition: opacity 1.4s ease, transform 12s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.hos-hero.is-playing .hos-bg-video { opacity: 1; transform: scale(1); }

/* Poster fallback before video kicks in */
.hos-bg-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: blur(2px) saturate(1.05);
  transition: opacity 1.2s ease;
}
.hos-hero.is-playing .hos-bg-poster { opacity: 0; }

/* Layered overlays: depth + drama */
.hos-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hos-overlay.shade {
  background:
    radial-gradient(120% 80% at 80% 10%, rgba(107,45,94,0.32) 0%, transparent 55%),
    radial-gradient(110% 90% at 0% 100%, rgba(74,124,63,0.32) 0%, transparent 60%),
    linear-gradient(180deg, rgba(6,18,10,0.45) 0%, rgba(6,18,10,0.25) 35%, rgba(6,18,10,0.85) 100%);
}
.hos-overlay.grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.35;
}
.hos-overlay.spotlight {
  background: radial-gradient(circle 360px at var(--mx, 50%) var(--my, 50%),
    rgba(126, 200, 113, 0.18) 0%,
    rgba(126, 200, 113, 0.05) 35%,
    transparent 70%);
  transition: background 0.4s ease;
  mix-blend-mode: screen;
}
@media (hover: none) { .hos-overlay.spotlight { display: none; } }

/* Top sheen line */
.hos-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126,200,113,0.4), transparent);
  z-index: 4;
}

/* Floating media controls (top-right) */
.hos-media-ctrls {
  position: absolute;
  top: 28px;
  right: 32px;
  z-index: 5;
  display: flex;
  gap: 10px;
  opacity: 0;
  transform: translateY(-12px);
  animation: hosFadeIn 0.9s 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hos-mctrl {
  appearance: none;
  background: rgba(14, 26, 13, 0.55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: inherit;
}
.hos-mctrl:hover {
  border-color: rgba(126,200,113,0.5);
  background: rgba(74,124,63,0.35);
  color: white;
  transform: scale(1.08);
}
.hos-mctrl svg { width: 16px; height: 16px; display: block; }
.hos-mctrl .icon-pause,
.hos-mctrl .icon-unmute { display: none; }
.hos-mctrl.is-playing .icon-play { display: none; }
.hos-mctrl.is-playing .icon-pause { display: block; }
.hos-mctrl.is-unmuted .icon-mute { display: none; }
.hos-mctrl.is-unmuted .icon-unmute { display: block; }

/* Hero content */
.hos-inner {
  padding: 120px 48px 130px;
  position: relative;
  z-index: 3;
  max-width: 920px;
  width: 100%;
}
.hos-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(14,26,13,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(126,200,113,0.35);
  border-radius: 100px;
  padding: 7px 18px 7px 14px;
  margin-bottom: 28px;
  width: fit-content;
  opacity: 0;
  transform: translateY(14px);
  animation: hosFadeIn 0.9s 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hos-tag .hero-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #7EC871;
  box-shadow: 0 0 0 4px rgba(126,200,113,0.18);
  animation: hosDotPulse 2.2s ease-in-out infinite;
}
@keyframes hosDotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(126,200,113,0.18); }
  50% { box-shadow: 0 0 0 7px rgba(126,200,113,0.05); }
}
.hos-tag span {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #A8E09E;
}

/* Headline: split-word reveal */
.hos-inner h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(46px, 7vw, 96px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-bottom: 28px;
  color: white;
}
.hos-h-line { display: block; overflow: hidden; padding: 0.04em 0; }
.hos-h-word {
  display: inline-block;
  transform: translateY(110%) rotate(2deg);
  opacity: 0;
  animation: hosWordRise 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  margin-right: 0.22em;
  will-change: transform, opacity;
}
.hos-h-word:last-child { margin-right: 0; }
@keyframes hosWordRise {
  to { transform: translateY(0) rotate(0); opacity: 1; }
}
/* Italic accent line */
.hos-line2 .hos-h-word {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(110deg, #A8E09E 0%, #7EC871 35%, #C8B26B 70%, #A8E09E 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hosWordRise 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards,
             hosShimmer 7s 1.6s ease-in-out infinite;
}
@keyframes hosShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hos-inner > p {
  font-size: clamp(15px, 1.15vw, 18px);
  color: rgba(255,255,255,0.7);
  line-height: 1.75;
  max-width: 540px;
  margin-bottom: 44px;
  opacity: 0;
  transform: translateY(14px);
  animation: hosFadeIn 0.9s 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hos-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(14px);
  animation: hosFadeIn 0.9s 1.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hos-cta-row .btn-green,
.hos-cta-row .btn-ghost {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hos-cta-row .btn-green {
  background: linear-gradient(135deg, #4A7C3F 0%, #3A6B35 100%);
  border: 1px solid rgba(126,200,113,0.4);
  box-shadow: 0 12px 40px -12px rgba(74,124,63,0.55);
}
.hos-cta-row .btn-green::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.hos-cta-row .btn-green:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px -12px rgba(74,124,63,0.7);
}
.hos-cta-row .btn-green:hover::before { transform: translateX(100%); }
.hos-cta-row .btn-ghost {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.22);
}
.hos-cta-row .btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-3px);
}

/* Marquee feature ribbon: bottom of hero */
.hos-marquee {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  z-index: 3;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(14,26,13,0.45), rgba(14,26,13,0.7));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  opacity: 0;
  animation: hosFadeIn 0.9s 1.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hos-marq-track {
  display: flex;
  width: max-content;
  animation: hosMarqScroll 40s linear infinite;
  will-change: transform;
}
.hos-hero:hover .hos-marq-track { animation-play-state: paused; }
.hos-marq-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 36px;
  font-family: 'Fraunces', 'Playfair Display', serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
  font-weight: 400;
}
.hos-marq-item strong {
  font-style: normal;
  font-weight: 600;
  color: #A8E09E;
  letter-spacing: 0.02em;
}
.hos-marq-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(168,224,158,0.5);
  flex-shrink: 0;
}
@keyframes hosMarqScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Scroll cue */
.hos-scroll-cue {
  position: absolute;
  bottom: 78px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: hosFadeIn 0.9s 1.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}
.hos-scroll-cue span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.hos-scroll-cue .cue-rail {
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, transparent, rgba(126,200,113,0.6), transparent);
  position: relative;
  overflow: hidden;
}
.hos-scroll-cue .cue-rail::after {
  content: '';
  position: absolute;
  top: -10px; left: 0;
  width: 100%; height: 14px;
  background: #7EC871;
  box-shadow: 0 0 12px rgba(126,200,113,0.8);
  animation: hosCueDrop 2.2s cubic-bezier(0.6, 0.2, 0.4, 1) infinite;
}
@keyframes hosCueDrop {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(48px); opacity: 0; }
}

@keyframes hosFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Per-word stagger delays (set via inline style index, but fallback) */
.hos-h-word:nth-child(1) { animation-delay: 0.20s; }
.hos-h-word:nth-child(2) { animation-delay: 0.30s; }
.hos-h-word:nth-child(3) { animation-delay: 0.40s; }
.hos-h-word:nth-child(4) { animation-delay: 0.50s; }
.hos-h-word:nth-child(5) { animation-delay: 0.60s; }
.hos-line2 .hos-h-word:nth-child(1) { animation-delay: 0.70s, 1.6s; }
.hos-line2 .hos-h-word:nth-child(2) { animation-delay: 0.80s, 1.6s; }
.hos-line2 .hos-h-word:nth-child(3) { animation-delay: 0.90s, 1.6s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hos-bg-video,
  .hos-h-word,
  .hos-tag,
  .hos-inner > p,
  .hos-cta-row,
  .hos-marquee,
  .hos-scroll-cue,
  .hos-media-ctrls {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hos-marq-track { animation: none !important; }
  .hos-scroll-cue .cue-rail::after { animation: none !important; }
}


.hos-what { padding: 100px 48px; background: rgba(255,255,255,0.02); }
.hos-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.hos-what h2 { font-family: 'Playfair Display', serif; color: white; margin-bottom: 18px; }
.hos-what h2 em { color: #7EC871; }
.hos-what p { font-size: 15px; color: rgba(255,255,255,0.5); line-height: 1.85; margin-bottom: 18px; }
.hos-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hos-pill { background: rgba(74,124,63,0.15); border: 1px solid rgba(74,124,63,0.3); border-radius: 100px; padding: 6px 14px; font-size: 12px; color: #7EC871; font-weight: 500; }
.hos-cards4 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hc4 { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 22px 18px; transition: all 0.3s; }
.hc4:hover { border-color: rgba(74,124,63,0.35); background: rgba(74,124,63,0.06); }
.hc4-icon { font-size: 26px; margin-bottom: 10px; display: block; }
.hc4 h4 { font-size: 14px; font-weight: 600; color: white; margin-bottom: 7px; }
.hc4 p { font-size: 12px; color: rgba(255,255,255,0.42); line-height: 1.6; }
.hos-prod-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; }
.hph-left { padding: 68px 48px; display: flex; flex-direction: column; justify-content: center; }
.hph-right { display: flex; align-items: center; justify-content: center; padding: 44px; }
.hph-right img { height: 300px; object-fit: contain; filter: drop-shadow(0 28px 56px rgba(0,0,0,0.5)); transition: transform 0.5s; }
.hos-prod-hero:hover .hph-right img { transform: scale(1.05) rotate(-3deg); }
.kairi-bg-g { background: linear-gradient(135deg, #0D2B12, #1A4A20); }
.kokam-bg-g { background: linear-gradient(135deg, #1A0D2B, #3D1A5C); }
.hph-tag { display: inline-flex; align-items: center; gap: 6px; border-radius: 100px; padding: 5px 14px; margin-bottom: 18px; width: fit-content; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.tag-k { background: rgba(74,124,63,0.2); border: 1px solid rgba(74,124,63,0.4); color: #7EC871; }
.tag-ko { background: rgba(107,45,94,0.25); border: 1px solid rgba(180,100,160,0.4); color: #D4A0C8; }
.hph-left h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px,3.5vw,48px); font-weight: 700; color: white; line-height: 1.1; margin-bottom: 14px; }
.kairi-em { font-style: italic; color: #7EC871; }
.kokam-em { font-style: italic; color: #D4A0C8; }
.hph-left > p { font-size: 15px; color: rgba(255,255,255,0.52); line-height: 1.8; max-width: 400px; margin-bottom: 28px; }
.hph-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 28px; }
.hph-spec { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 12px 14px; }
.hph-spec span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.32); display: block; margin-bottom: 3px; }
.hph-spec strong { font-size: 13px; font-weight: 500; color: white; }
.usage-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.utag { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; padding: 5px 12px; font-size: 11px; color: rgba(255,255,255,0.55); }
.btn-kairi { background: var(--green); color: white; border: none; border-radius: 100px; padding: 12px 26px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s; }
.btn-kairi:hover { background: #2D5A28; transform: translateY(-2px); }
.btn-kokam { background: #6B2D5E; color: white; border: none; border-radius: 100px; padding: 12px 26px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s; }
.btn-kokam:hover { background: #8B3A7A; transform: translateY(-2px); }
.seasonal-strip { background: rgba(245,166,35,0.07); border-top: 1px solid rgba(245,166,35,0.14); border-bottom: 1px solid rgba(245,166,35,0.14); padding: 36px 48px; display: flex; align-items: center; gap: 44px; }
.ss-icon { font-size: 38px; }
.ss-text h3 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 600; color: var(--mango); margin-bottom: 6px; }
.ss-text p { font-size: 14px; color: rgba(255,255,255,0.48); max-width: 560px; line-height: 1.7; }
.ss-cta { margin-left: auto; flex-shrink: 0; }
.hos-how { padding: 100px 48px; }
.hos-how h2 { font-family: 'Playfair Display', serif; color: white; margin-bottom: 10px; }
.hos-how h2 em { color: #7EC871; }
.hos-how > p { font-size: 15px; color: rgba(255,255,255,0.42); max-width: 480px; margin-bottom: 52px; }
.how-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.howc { border-radius: 18px; padding: 28px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); transition: all 0.3s; }
.howc:hover { border-color: rgba(126,200,113,0.28); background: rgba(74,124,63,0.05); }
.howc-num { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 700; color: rgba(126,200,113,0.14); line-height: 1; margin-bottom: 18px; }
.howc h4 { font-size: 15px; font-weight: 600; color: white; margin-bottom: 8px; }
.howc p { font-size: 13px; color: rgba(255,255,255,0.42); line-height: 1.7; }
.howc-ptag { display: inline-block; margin-top: 14px; font-size: 11px; color: #7EC871; font-weight: 500; background: rgba(74,124,63,0.14); border-radius: 100px; padding: 3px 10px; }
.hos-benefits { padding: 0 48px 100px; }
.benefits-g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 48px; }
.brow { display: flex; align-items: flex-start; gap: 14px; padding: 18px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 14px; transition: all 0.3s; }
.brow:hover { border-color: rgba(126,200,113,0.22); }
.bicon { font-size: 22px; flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: rgba(74,124,63,0.14); border-radius: 11px; }
.brow strong { display: block; font-size: 14px; font-weight: 600; color: white; margin-bottom: 3px; }
.brow p { font-size: 12px; color: rgba(255,255,255,0.42); line-height: 1.6; }
.hos-cta { padding: 100px 48px; background: linear-gradient(135deg, #1A4A20, #0D2B2A); display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.hcta-left h2 { font-family: 'Playfair Display', serif; color: white; margin-bottom: 14px; }
.hcta-left h2 em { color: #7EC871; }
.hcta-left p { font-size: 15px; color: rgba(255,255,255,0.48); line-height: 1.8; margin-bottom: 32px; }
.hcta-right { display: flex; align-items: center; justify-content: center; gap: 28px; }
.hcta-bottle { text-align: center; }
.hcta-bottle img { height: 190px; object-fit: contain; filter: drop-shadow(0 18px 36px rgba(0,0,0,0.5)); transition: transform 0.4s; }
.hcta-bottle:hover img { transform: translateY(-12px) scale(1.05); }
.hcta-bottle-nm { font-size: 11px; color: rgba(255,255,255,0.38); margin-top: 10px; text-transform: uppercase; letter-spacing: 0.07em; }

/* ===================== EXPORT PAGE ===================== */
#export { background: var(--cream); }
.export-hero { background: var(--earth-deep); padding: 110px 48px 90px; position: relative; overflow: hidden; }
.ex-inner { max-width: 680px; position: relative; z-index: 2; }
.export-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(40px,5vw,68px); font-weight: 700; color: white; line-height: 1.1; margin-bottom: 22px; }
.export-hero p { font-size: 17px; color: rgba(255,255,255,0.5); line-height: 1.8; max-width: 520px; margin-bottom: 44px; }
.ex-stats { display: flex; gap: 48px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.08); position: relative; z-index: 2; }
.exs { }
.exs-num { font-family: 'Playfair Display', serif; font-size: 40px; font-weight: 800; color: var(--mango); display: block; line-height: 1; }
.exs-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.38); margin-top: 6px; display: block; }
.partner-section { padding: 96px 48px; background: white; }
.partner-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 52px; }
.partc { border: 1px solid rgba(197,149,26,0.1); border-radius: 20px; padding: 30px 22px; text-align: center; cursor: default; transition: all 0.3s; }
.partc:hover { border-color: var(--mango); background: var(--mango-light); transform: translateY(-6px); }
.partc-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--mango-light); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 26px; transition: background 0.3s; }
.partc:hover .partc-icon { background: var(--mango); }
.partc h4 { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; }
.partc p { font-size: 13px; color: var(--text-light); line-height: 1.6; }
.reach-section { padding: 96px 48px; background: var(--earth-deep); }
.reach-section h2 { color: white; }
.reach-section .sec-label { color: rgba(245,166,35,0.7); }
.reach-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; margin-bottom: 56px; }
.reach-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rstat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 22px 18px; text-align: center; transition: all 0.3s; }
.rstat:hover { border-color: rgba(245,166,35,0.28); }
.rstat strong { display: block; font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 700; color: var(--mango); margin-bottom: 5px; }
.rstat span { font-size: 12px; color: rgba(255,255,255,0.42); }
.reach-desc { font-size: 16px; color: rgba(255,255,255,0.5); max-width: 480px; line-height: 1.8; }
.country-g3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ccard { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 12px; transition: all 0.25s; }
.ccard:hover { border-color: rgba(245,166,35,0.3); background: rgba(245,166,35,0.06); }
.ccard-flag { font-size: 26px; flex-shrink: 0; }
.ccard-info strong { display: block; font-size: 13px; font-weight: 600; color: white; }
.ccard-info span { font-size: 11px; color: rgba(255,255,255,0.38); }
.offer-section { padding: 96px 48px; background: var(--cream); }
.offer-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.offc { background: white; border-radius: 20px; padding: 32px 26px; border: 1px solid rgba(197,149,26,0.1); transition: all 0.3s; }
.offc:hover { border-color: var(--mango); box-shadow: 0 18px 48px rgba(245,166,35,0.1); transform: translateY(-6px); }
.offnum { font-family: 'Playfair Display', serif; font-size: 44px; font-weight: 700; color: rgba(245,166,35,0.14); line-height: 1; margin-bottom: 14px; }
.offc h4 { font-size: 17px; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; }
.offc p { font-size: 13px; color: var(--text-light); line-height: 1.7; margin-bottom: 18px; }
.off-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.otag { background: var(--mango-light); border: 1px solid rgba(245,166,35,0.2); border-radius: 100px; padding: 3px 10px; font-size: 11px; font-weight: 500; color: var(--mango-deep); }
.cert-section { padding: 80px 48px; background: white; }
.cert-g5 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 44px; }
.certc { text-align: center; padding: 26px 14px; border: 1px solid rgba(197,149,26,0.1); border-radius: 16px; transition: all 0.3s; }
.certc:hover { border-color: var(--mango); background: var(--mango-light); }
.certc-icon { font-size: 30px; margin-bottom: 12px; display: block; }
.certc strong { display: block; font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 5px; }
.certc span { font-size: 11px; color: var(--text-light); line-height: 1.55; }
.process-section { padding: 96px 48px; background: var(--green-deep); }
.process-section h2 { color: white; }
.process-section .sec-label { color: rgba(245,166,35,0.7); }
.proc-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.07); border-radius: 18px; overflow: hidden; margin-top: 52px; }
.procc { background: rgba(255,255,255,0.02); padding: 32px 26px; transition: background 0.3s; }
.procc:hover { background: rgba(245,166,35,0.06); }
.proc-num { font-family: 'Playfair Display', serif; font-size: 48px; font-weight: 700; color: rgba(245,166,35,0.18); line-height: 1; margin-bottom: 18px; }
.procc h4 { font-size: 15px; font-weight: 600; color: white; margin-bottom: 8px; }
.procc p { font-size: 12px; color: rgba(255,255,255,0.42); line-height: 1.7; }
.export-testi { padding: 96px 48px; background: var(--cream); }
.testi-g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 52px; }
.tc2 { background: white; border-radius: 20px; padding: 32px; border: 1px solid rgba(197,149,26,0.1); transition: all 0.3s; }
.tc2:hover { border-color: rgba(245,166,35,0.28); box-shadow: 0 14px 44px rgba(245,166,35,0.07); }
.tc2-flag { margin-left: auto; font-size: 22px; }
.export-form { padding: 96px 48px; background: var(--earth-deep); position: relative; overflow: hidden; }
.export-form h2 { color: white; }
.export-form .sec-label { color: rgba(245,166,35,0.7); }
.ef-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; margin-top: 52px; }
.ef-left h3 { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 600; color: white; margin-bottom: 14px; line-height: 1.3; }
.ef-left > p { font-size: 15px; color: rgba(255,255,255,0.48); line-height: 1.8; margin-bottom: 36px; }
.ci-items { display: flex; flex-direction: column; gap: 18px; }
.ci-item { display: flex; align-items: flex-start; gap: 14px; }
.ci-icon { width: 42px; height: 42px; border-radius: 11px; background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.18); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.ci-item strong { display: block; font-size: 13px; font-weight: 600; color: white; margin-bottom: 3px; }
.ci-item span { font-size: 13px; color: rgba(255,255,255,0.45); }
.ci-item a { color: var(--mango); text-decoration: none; font-size: 14px; }
.export-faq { padding: 96px 48px; background: white; }
.faq-list { max-width: 760px; margin: 52px auto 0; }
.faq-item { border-bottom: 1px solid rgba(197,149,26,0.1); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; color: var(--text-dark); transition: color 0.2s; }
.faq-q:hover { color: var(--saffron); }
.faq-arrow { font-size: 17px; color: var(--mango); transition: transform 0.3s; }
.faq-a { font-size: 14px; color: var(--text-light); line-height: 1.75; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; }
.faq-item.open .faq-a { max-height: 200px; padding-bottom: 20px; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-item.open .faq-q { color: var(--saffron); }

/* ===================== GALLERY PAGE ===================== */
#gallery { background: var(--earth-deep); color: white; }
.gallery-hero { padding: 100px 48px 72px; position: relative; }
.gallery-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(40px,5vw,66px); font-weight: 700; color: white; line-height: 1.1; margin-bottom: 18px; }
.gallery-hero h1 em { font-style: italic; color: var(--mango); }
.gallery-hero p { font-size: 17px; color: rgba(255,255,255,0.48); max-width: 500px; line-height: 1.8; }
.gal-filter { padding: 0 48px; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; background: rgba(255,255,255,0.02); overflow-x: auto; }
.gfbtn { padding: 16px 24px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.4); border: none; background: transparent; cursor: pointer; font-family: 'DM Sans', sans-serif; border-bottom: 2px solid transparent; white-space: nowrap; transition: all 0.2s; }
.gfbtn:hover { color: var(--mango); }
.gfbtn.active { color: var(--mango); border-bottom-color: var(--mango); }
.gal-masonry-wrap { padding: 48px; }
.gal-masonry { columns: 3; column-gap: 14px; }
.gm-item { break-inside: avoid; margin-bottom: 14px; border-radius: 14px; overflow: hidden; cursor: pointer; background: rgba(255,255,255,0.03); position: relative; }
.gm-item img { width: 100%; display: block; transition: transform 0.4s; }
.gm-item:hover img { transform: scale(1.06); }
.gm-overlay { position: absolute; inset: 0; background: rgba(28,18,8,0); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; transition: background 0.3s; }
.gm-item:hover .gm-overlay { background: rgba(28,18,8,0.62); }
.gm-title { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 600; color: white; opacity: 0; transform: translateY(8px); transition: all 0.3s; }
.gm-sub { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 3px; opacity: 0; transition: all 0.3s 0.05s; }
.gm-item:hover .gm-title, .gm-item:hover .gm-sub { opacity: 1; transform: translateY(0); }
.gm-zoom { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0; transition: opacity 0.3s; }
.gm-item:hover .gm-zoom { opacity: 1; }
.prod-thumb-section { padding: 0 48px 64px; }
.prod-thumb-section h2 { color: white; }
.prod-thumb-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 36px; }
.ptw { border-radius: 14px; background: rgba(245,166,35,0.05); border: 1px solid rgba(245,166,35,0.1); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; cursor: pointer; transition: all 0.3s; position: relative; }
.ptw:hover { border-color: var(--mango); background: rgba(245,166,35,0.1); transform: translateY(-5px); }
.ptw img { height: 100px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3)); transition: transform 0.4s; }
.ptw:hover img { transform: scale(1.1); }
.ptw-nm { font-size: 10px; color: rgba(255,255,255,0.42); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 10px; text-align: center; }
.banner-section { padding: 0 48px 64px; }
.banner-section h2 { color: white; }
.banner-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; }
.bancard { border-radius: 18px; overflow: hidden; position: relative; cursor: pointer; }
.bancard img { width: 100%; display: block; transition: transform 0.4s; }
.bancard:hover img { transform: scale(1.04); }
.bancard-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,18,8,0.7) 0%, transparent 50%); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.bancard-ov h3 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 600; color: white; margin-bottom: 4px; }
.bancard-ov p { font-size: 13px; color: rgba(255,255,255,0.55); }
.lightbox { position: fixed; inset: 0; background: rgba(28, 18, 8, 0.94); z-index: 1111; display: none; align-items: center; justify-content: center; padding: 20px; }
.lightbox.open { display: flex; }
.lb-content { max-width: 78vw; max-height: 80vh; position: relative; }
.lb-content img { max-width: 100%; max-height: 80vh; border-radius: 14px; object-fit: contain; }
.lb-caption { text-align: center; margin-top: 16px; font-size: 14px; color: rgba(255,255,255,0.55); }
.lb-close { position: fixed; top: 24px; right: 24px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.1); border: none; cursor: pointer; font-size: 20px; color: white; display: flex; align-items: center; justify-content: center; }
.lb-close:hover { background: rgba(255,255,255,0.18); }

/* ===================== CONTACT PAGE ===================== */
#contact { background: var(--cream); }
.contact-hero { background: var(--earth-deep); padding: 100px 48px 80px; position: relative; overflow: hidden; }
.contact-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(40px,5vw,66px); font-weight: 700; color: white; line-height: 1.1; margin-bottom: 18px; }
.contact-hero p { font-size: 17px; color: rgba(255,255,255,0.48); max-width: 500px; line-height: 1.8; }
.quick-strip { background: var(--mango); padding: 0 48px; display: flex; }
.qs-item { flex: 1; display: flex; align-items: center; gap: 14px; padding: 26px 0; border-right: 1px solid rgba(92,61,30,0.14); padding-right: 36px; margin-right: 36px; text-decoration: none; transition: opacity 0.2s; cursor: pointer; }
.qs-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.qs-item:hover { opacity: 0.8; }
.qs-icon { width: 46px; height: 46px; border-radius: 11px; background: rgba(92,61,30,0.1); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.qs-text strong { display: block; font-size: 13px; font-weight: 600; color: var(--earth-deep); margin-bottom: 2px; }
.qs-text span { font-size: 12px; color: var(--earth); }
.contact-main { padding: 80px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: start; background: white; }
.contact-form-card { background: var(--cream); border-radius: 26px; padding: 40px; border: 1px solid rgba(197,149,26,0.1); }
.contact-form-card h3 { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; }
.contact-form-card > p { font-size: 14px; color: var(--text-light); margin-bottom: 28px; }
.form-tabs { display: flex; gap: 0; margin-bottom: 26px; border: 1.5px solid rgba(197,149,26,0.14); border-radius: 11px; overflow: hidden; }
.ftab { flex: 1; padding: 9px; font-size: 13px; font-weight: 500; background: transparent; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; color: var(--text-light); transition: all 0.2s; }
.ftab.active { background: var(--saffron); color: white; }
.contact-info-side h3 { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 600; color: var(--text-dark); margin-bottom: 14px; }
.contact-info-side > p { font-size: 15px; color: var(--text-light); line-height: 1.8; margin-bottom: 36px; }
.cc-cards { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.ccc { background: var(--cream); border: 1px solid rgba(197,149,26,0.1); border-radius: 16px; padding: 18px 22px; display: flex; align-items: flex-start; gap: 16px; transition: all 0.3s; }
.ccc:hover { border-color: var(--mango); box-shadow: 0 10px 32px rgba(245,166,35,0.1); }
.ccc-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--mango-light); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.ccc strong { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light); margin-bottom: 5px; }
.ccc p { font-size: 14px; color: var(--text-dark); line-height: 1.5; }
.ccc a { color: var(--saffron); text-decoration: none; font-size: 14px; font-weight: 500; }
.map-block { border-radius: 16px; border: 1px solid rgba(197,149,26,0.1); background: var(--mango-light); height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: all 0.3s; }
.map-block:hover { border-color: var(--mango); }
.map-pin-big { font-size: 38px; }
.map-block strong { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.map-block span { font-size: 12px; color: var(--text-light); }
.map-open { background: var(--mango); color: var(--earth-deep); border: none; border-radius: 100px; padding: 7px 18px; font-size: 12px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer; margin-top: 4px; }
.hours-section { padding: 0 48px 80px; background: white; }
.hours-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.hcard { background: var(--cream); border-radius: 18px; padding: 26px; border: 1px solid rgba(197,149,26,0.08); text-align: center; }
.hcard-icon { font-size: 30px; margin-bottom: 14px; display: block; }
.hcard h4 { font-size: 15px; font-weight: 600; color: var(--text-dark); margin-bottom: 7px; }
.hcard-hi { font-size: 17px; font-weight: 600; color: var(--saffron); display: block; margin: 6px 0 3px; }
.hcard p { font-size: 13px; color: var(--text-light); line-height: 1.65; }
.social-section { padding: 0 48px 80px; background: white; }
.social-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
.scard { border-radius: 18px; padding: 26px 18px; text-align: center; text-decoration: none; transition: all 0.3s; display: block; cursor: pointer; }
.scard:hover { transform: translateY(-6px); }
.sc-insta { background: linear-gradient(135deg, var(--mango), var(--saffron)); }
.sc-wa { background: #25D366; }
.sc-fb { background: #1877F2; }
.sc-email { background: var(--earth-deep); border: 1px solid rgba(245,166,35,0.18); }
.scard-icon { font-size: 30px; display: block; margin-bottom: 10px; }
.scard strong { display: block; font-size: 14px; font-weight: 600; color: white; margin-bottom: 3px; }
.scard span { font-size: 12px; color: rgba(255,255,255,0.65); }

/* ===================== RECIPES PAGE ===================== */
#recipes { background: var(--cream); }
.recipes-hero { background: var(--earth-deep); padding: 100px 48px 80px; position: relative; overflow: hidden; }
.recipes-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(40px,5vw,66px); font-weight: 700; color: white; line-height: 1.1; margin-bottom: 18px; }
.recipes-hero p { font-size: 17px; color: rgba(255,255,255,0.48); max-width: 500px; line-height: 1.8; }
.rec-filter { background: white; padding: 0 48px; border-bottom: 1px solid rgba(197,149,26,0.1); position: sticky; top: 72px; z-index: 98; display: flex; overflow-x: auto; }
.rfbtn { padding: 17px 24px; font-size: 13px; font-weight: 500; color: var(--text-light); border: none; background: transparent; cursor: pointer; font-family: 'DM Sans', sans-serif; border-bottom: 2px solid transparent; white-space: nowrap; transition: all 0.2s; }
.rfbtn:hover { color: var(--saffron); }
.rfbtn.active { color: var(--saffron); border-bottom-color: var(--saffron); }
.featured-recipe { padding: 60px 48px; }
.frec { display: grid; grid-template-columns: 1fr 1fr; border-radius: 26px; overflow: hidden; background: white; border: 1px solid rgba(197,149,26,0.1); }
.frec-img { background: linear-gradient(135deg, var(--mango), var(--saffron)); display: flex; align-items: center; justify-content: center; padding: 44px; min-height: 380px; position: relative; }
.frec-badge { position: absolute; top: 20px; left: 20px; background: white; border-radius: 100px; padding: 5px 14px; font-size: 11px; font-weight: 600; color: var(--saffron); text-transform: uppercase; letter-spacing: 0.06em; }
.frec-img img { height: 260px; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(92,61,30,0.3)); animation: canFloat 5s ease-in-out infinite; }
.frec-body { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.frec-meta { display: flex; gap: 18px; margin-bottom: 20px; }
.frec-meta-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-light); }
.frec-meta-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mango); }
.frec-body h3 { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 600; color: var(--text-dark); margin-bottom: 14px; }
.frec-body p { font-size: 15px; color: var(--text-light); line-height: 1.8; margin-bottom: 26px; }
.frec-tags { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 28px; }
.rtag2 { background: var(--mango-light); border: 1px solid rgba(245,166,35,0.2); border-radius: 100px; padding: 4px 13px; font-size: 12px; font-weight: 500; color: var(--mango-deep); }
.recipes-grid { padding: 0 48px 60px; }
.rec-g3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 36px; }
.rcard { background: white; border-radius: 20px; overflow: hidden; border: 1px solid rgba(197,149,26,0.08); cursor: pointer; transition: all 0.3s; }
.rcard:hover { transform: translateY(-7px); border-color: var(--mango); box-shadow: 0 18px 50px rgba(245,166,35,0.12); }
.rcard-img { height: 180px; display: flex; align-items: center; justify-content: center; position: relative; }
.rcard-img img { height: 128px; object-fit: contain; transition: transform 0.4s; filter: drop-shadow(0 8px 16px rgba(92,61,30,0.2)); }
.rcard:hover .rcard-img img { transform: scale(1.1) translateY(-6px); }
.rdiff { position: absolute; top: 12px; right: 12px; border-radius: 100px; padding: 3px 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.rdiff-easy { background: #EAF3DE; color: #3B6D11; }
.rdiff-med { background: var(--mango-light); color: var(--mango-deep); }
.rcard-body { padding: 16px 20px 20px; }
.rcard-meta { display: flex; gap: 14px; margin-bottom: 8px; }
.rcard-meta-t { font-size: 11px; color: var(--text-light); }
.rcard-body h4 { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600; color: var(--text-dark); margin-bottom: 7px; line-height: 1.3; }
.rcard-body p { font-size: 12px; color: var(--text-light); line-height: 1.6; margin-bottom: 14px; }
.rcard-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(197,149,26,0.08); }
.rcard-prod { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-light); }
.rcard-prod img { height: 24px; object-fit: contain; }
.rbtn { font-size: 12px; font-weight: 500; color: var(--saffron); background: none; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: color 0.2s; }
.rbtn:hover { color: var(--mango-deep); }
.tip-strip { background: var(--green); padding: 28px 48px; display: flex; align-items: center; gap: 44px; }
.tip-item { display: flex; align-items: center; gap: 12px; color: white; }
.tip-icon { font-size: 22px; flex-shrink: 0; }
.tip-item strong { display: block; font-size: 13px; font-weight: 600; }
.tip-item span { font-size: 12px; opacity: 0.58; }
.tip-div { width: 1px; height: 36px; background: rgba(255,255,255,0.18); }
.inspo-section { padding: 60px 48px; background: white; }
.inspo-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.inspo-card { border-radius: 16px; overflow: hidden; aspect-ratio: 3/4; position: relative; cursor: pointer; }
.inspo-card .ib-bg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform 0.4s; }
.inspo-card:hover .ib-bg { transform: scale(1.05); }
.inspo-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,18,8,0.82) 0%, transparent 50%); }
.inspo-lbl { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px; }
.inspo-lbl h4 { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 600; color: white; margin-bottom: 3px; }
.inspo-lbl span { font-size: 12px; color: rgba(255,255,255,0.55); }
/* Recipe Modal */
.rec-modal { display: none; position: fixed; inset: 0; z-index: 1111; background: rgba(28, 18, 8, 0.75); align-items: center; justify-content: center; padding: 20px; }
.rec-modal.open { display: flex; }
.rec-modal-inner { background: white; border-radius: 26px; width: 100%; max-width: 680px; max-height: 88vh; overflow-y: auto; }
.rm-hero { background: linear-gradient(135deg, var(--mango), var(--saffron)); padding: 44px; display: flex; align-items: center; gap: 36px; border-radius: 26px 26px 0 0; }
.rm-hero img { height: 130px; object-fit: contain; filter: drop-shadow(0 14px 28px rgba(92,61,30,0.3)); }
.rm-htxt h2 { color: white; font-size: 26px; margin-bottom: 10px; }
.rm-htxt p { color: rgba(255,255,255,0.68); font-size: 14px; line-height: 1.7; }
.rm-meta { display: flex; gap: 20px; margin-top: 16px; }
.rmm { text-align: center; background: rgba(255,255,255,0.14); border-radius: 11px; padding: 8px 18px; }
.rmm strong { display: block; font-size: 14px; font-weight: 600; color: white; }
.rmm span { font-size: 10px; color: rgba(255,255,255,0.62); text-transform: uppercase; letter-spacing: 0.06em; }
.rm-body { padding: 36px 44px; }
.rm-body h3 { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600; color: var(--text-dark); margin-bottom: 14px; }
.rm-ing { list-style: none; margin-bottom: 28px; }
.rm-ing li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(197,149,26,0.07); font-size: 14px; color: var(--text-mid); }
.rm-ing li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mango); flex-shrink: 0; }
.rm-steps { list-style: none; }
.rm-step { display: flex; gap: 16px; margin-bottom: 20px; }
.rm-step-num { width: 34px; height: 34px; border-radius: 50%; background: var(--mango-light); border: 2px solid var(--mango); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--mango-deep); flex-shrink: 0; margin-top: 2px; }
.rm-step-txt { font-size: 14px; color: var(--text-mid); line-height: 1.75; }
.rm-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.18); border: none; cursor: pointer; font-size: 16px; color: white; display: flex; align-items: center; justify-content: center; }
.rm-close:hover { background: rgba(255,255,255,0.3); }

/* ===================== GAMES HUB ===================== */
#games { background: var(--earth-deep); color: white; }
.games-hero { min-height: 70vh; position: relative; overflow: hidden; display: flex; align-items: center; padding: 110px 48px 90px; background: linear-gradient(135deg, #1C1208 0%, #2E1505 50%, #1C3A15 100%); }
.games-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(44px,6vw,80px); font-weight: 800; line-height: 1.05; margin-bottom: 22px; }
.games-hero p { font-size: 17px; color: rgba(255,255,255,0.48); line-height: 1.8; max-width: 500px; margin-bottom: 44px; }
.gh-floaters { position: absolute; right: 80px; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; z-index: 2; }
.ghf { width: 96px; height: 96px; border-radius: 22px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; cursor: pointer; transition: all 0.3s; }
.ghf:hover { background: rgba(245,166,35,0.12); border-color: rgba(245,166,35,0.28); transform: translateY(-6px) scale(1.04); }
.ghf-icon { font-size: 34px; }
.ghf-name { font-size: 10px; color: rgba(255,255,255,0.45); font-weight: 500; }
.games-hub-stats { background: var(--mango); padding: 0 48px; display: flex; }
.ghs { flex: 1; padding: 22px 0; text-align: center; border-right: 1px solid rgba(92,61,30,0.14); }
.ghs:last-child { border-right: none; }
.ghs strong { display: block; font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; color: var(--earth-deep); }
.ghs span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--earth); opacity: 0.65; margin-top: 4px; display: block; }
.games-main { padding: 80px 48px; }
.games-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.gcard { border-radius: 26px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); transition: all 0.3s; cursor: pointer; }
.gcard:hover { border-color: rgba(245,166,35,0.28); box-shadow: 0 22px 58px rgba(0,0,0,0.4); transform: translateY(-6px); }
.gcard-top { padding: 28px 28px 0; }
.gbadge { display: inline-flex; align-items: center; gap: 5px; border-radius: 100px; padding: 4px 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 14px; }
.gb-arcade { background: rgba(245,166,35,0.14); border: 1px solid rgba(245,166,35,0.28); color: var(--mango); }
.gb-trivia { background: rgba(58,107,53,0.18); border: 1px solid rgba(58,107,53,0.35); color: #7EC871; }
.gb-memory { background: rgba(107,45,94,0.18); border: 1px solid rgba(180,100,160,0.35); color: #D4A0C8; }
.gb-sort { background: rgba(232,114,12,0.14); border: 1px solid rgba(232,114,12,0.28); color: #F5B840; }
.gcard h3 { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: white; margin-bottom: 8px; }
.gcard > .gcard-top > p { font-size: 13px; color: rgba(255,255,255,0.48); line-height: 1.7; margin-bottom: 18px; }
.gmeta { display: flex; gap: 14px; margin-bottom: 20px; }
.gmt { font-size: 11px; color: rgba(255,255,255,0.38); }
.gpreview { height: 190px; display: flex; align-items: center; justify-content: center; font-size: 56px; position: relative; overflow: hidden; }
.gprev-arcade { background: linear-gradient(180deg, #0D2B12, #1C1208); }
.gprev-trivia { background: linear-gradient(135deg, #1C1208, #3A1F05); }
.gprev-memory { background: linear-gradient(135deg, #FAF6EF, #FFF3D6); }
.gprev-sort { background: linear-gradient(180deg, #1C1208, #2E1505); }
.gprev-icons { display: flex; gap: 10px; }
.gprev-icons span { font-size: 44px; animation: previewFloat 3s ease-in-out infinite; }
.gprev-icons span:nth-child(2){animation-delay:0.5s} .gprev-icons span:nth-child(3){animation-delay:1s}
@keyframes previewFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.gcard-foot { padding: 18px 28px 24px; display: flex; align-items: center; justify-content: space-between; }
.play-btn-g { border: none; border-radius: 100px; padding: 11px 26px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s; }
.play-btn-g:hover { transform: scale(1.04); }
.pbg-arcade { background: var(--mango); color: var(--earth-deep); }
.pbg-trivia { background: var(--green); color: white; }
.pbg-memory { background: #6B2D5E; color: white; }
.pbg-sort { background: var(--saffron); color: white; }
.hs-disp { text-align: right; }
.hs-val { font-size: 18px; font-weight: 700; color: var(--mango); font-family: monospace; }
.hs-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.3); }

/* GAME CONTAINERS (inline, no modal) */
.game-container { display: none; padding: 0 48px 60px; }
.game-container.active { display: block; }
.game-back { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; cursor: pointer; color: rgba(255,255,255,0.5); font-size: 14px; font-weight: 500; transition: color 0.2s; background: none; border: none; font-family: 'DM Sans', sans-serif; }
.game-back:hover { color: var(--mango); }

/* CHATBOT SECTION */
.chatbot-section { padding: 0 48px 80px; }
.chat-shell { background: rgba(255,255,255,0.02); border-radius: 22px; overflow: hidden; border: 1px solid rgba(245,166,35,0.14); display: flex; flex-direction: column; height: 520px; }
.chat-hdr { background: linear-gradient(135deg, var(--earth-deep), #3A1F05); padding: 16px 22px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.chat-av { width: 44px; height: 44px; border-radius: 50%; background: var(--mango); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; position: relative; }
.chat-av-dot { position: absolute; bottom: 1px; right: 1px; width: 9px; height: 9px; background: #4CAF50; border-radius: 50%; border: 2px solid var(--earth-deep); }
.chat-nm { font-size: 14px; font-weight: 600; color: white; }
.chat-st { font-size: 11px; color: rgba(255,255,255,0.42); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.chat-st-dot { width: 5px; height: 5px; border-radius: 50%; background: #4CAF50; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: #1A100A; scrollbar-width: thin; scrollbar-color: rgba(197,149,26,0.18) transparent; }
.cmsg { display: flex; gap: 9px; align-items: flex-end; max-width: 80%; }
.cmsg.bot { align-self: flex-start; }
.cmsg.user { align-self: flex-end; flex-direction: row-reverse; }
.cmsg-av { width: 26px; height: 26px; border-radius: 50%; background: var(--mango); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.cmsg-bub { padding: 11px 15px; border-radius: 17px; font-size: 13px; line-height: 1.65; max-width: 100%; }
.cmsg.bot .cmsg-bub { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.87); border-bottom-left-radius: 4px; border: 1px solid rgba(255,255,255,0.07); }
.cmsg.user .cmsg-bub { background: var(--saffron); color: white; border-bottom-right-radius: 4px; }
.cmsg-time { font-size: 9px; color: rgba(255,255,255,0.22); margin-top: 3px; padding: 0 3px; }
.typing-ind { display: flex; gap: 4px; align-items: center; padding: 12px 15px; }
.td { width: 7px; height: 7px; border-radius: 50%; background: var(--mango); animation: tdot2 1.2s ease-in-out infinite; }
.td:nth-child(2){animation-delay:0.2s} .td:nth-child(3){animation-delay:0.4s}
@keyframes tdot2 { 0%,60%,100%{transform:translateY(0);opacity:0.4} 30%{transform:translateY(-5px);opacity:1} }
.chat-qr { padding: 9px 14px 7px; display: flex; gap: 7px; flex-wrap: wrap; background: rgba(0,0,0,0.3); border-top: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; }
.qr { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; padding: 5px 12px; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.62); cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s; white-space: nowrap; }
.qr:hover { background: rgba(245,166,35,0.14); border-color: rgba(245,166,35,0.28); color: var(--mango); }
.chat-inp-bar { display: flex; gap: 9px; padding: 11px 14px; background: rgba(0,0,0,0.4); border-top: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; }
.chat-inp { flex: 1; border: 1.5px solid rgba(245,166,35,0.18); border-radius: 100px; padding: 9px 16px; font-family: 'DM Sans', sans-serif; font-size: 13px; color: white; outline: none; transition: border-color 0.2s; background: rgba(255,255,255,0.04); }
.chat-inp:focus { border-color: var(--mango); background: rgba(255,255,255,0.07); }
.chat-inp::placeholder { color: rgba(255,255,255,0.22); }
.chat-send { width: 38px; height: 38px; border-radius: 50%; background: var(--saffron); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; transition: all 0.2s; }
.chat-send:hover { background: var(--mango-deep); transform: scale(1.06); }
.chat-powered { text-align: center; font-size: 10px; color: rgba(255,255,255,0.18); padding: 4px 0; background: rgba(0,0,0,0.4); }

/* ===================== ARCADE GAME STYLES ===================== */
.game-wrap-inner { background: linear-gradient(180deg, #0D2B12 0%, #1A4A20 40%, #3A6B35 80%, #5C8A40 100%); border-radius: 16px; overflow: hidden; position: relative; height: 500px; }
.gcloud { position: absolute; background: rgba(255,255,255,0.07); border-radius: 50px; pointer-events: none; }
.gc1 { width: 80px; height: 20px; top: 30px; left: 20%; animation: gdrift 12s linear infinite; }
.gc2 { width: 110px; height: 24px; top: 60px; left: 60%; animation: gdrift 18s linear infinite reverse; }
@keyframes gdrift { 0%{transform:translateX(-200px)} 100%{transform:translateX(900px)} }
.gground { position: absolute; bottom: 0; left: 0; right: 0; height: 56px; background: #8B6F3A; }
.ggrass { position: absolute; bottom: 54px; left: 0; right: 0; height: 18px; background: #4A7A30; }
.gscore-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 10; background: rgba(28,18,8,0.85); padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; }
.gsi { text-align: center; }
.gsi-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.38); }
.gsi-val { font-size: 18px; font-weight: 700; color: var(--mango); font-family: monospace; }
.glives { display: flex; gap: 3px; }
.gli { font-size: 16px; transition: all 0.3s; }
.gli.lost { filter: grayscale(1); opacity: 0.28; }
#gbasket { position: absolute; bottom: 56px; width: 68px; height: 44px; cursor: none; z-index: 5; }
.gb-handle { width: 60%; height: 9px; border: 3px solid #7A4000; border-bottom: none; border-radius: 10px 10px 0 0; margin: 0 auto; }
.gb-body { width: 100%; height: 32px; background: linear-gradient(180deg, #C47A0E, #8B5200); border-radius: 0 0 18px 18px; border: 3px solid #7A4000; }
.gitem { position: absolute; font-size: 30px; cursor: none; z-index: 4; user-select: none; }
.gparticle { position: absolute; pointer-events: none; z-index: 8; font-size: 12px; font-weight: 700; animation: gpfly 0.65s ease-out forwards; }
@keyframes gpfly { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(-55px);opacity:0} }
.gcombo { position: absolute; z-index: 9; font-family: 'Playfair Display', serif; font-weight: 700; color: var(--mango); pointer-events: none; animation: gcanim 0.8s ease-out forwards; font-size: 18px; }
@keyframes gcanim { 0%{transform:translateY(0) scale(0.5);opacity:1} 100%{transform:translateY(-75px) scale(1.2);opacity:0} }
.gov { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(28,18,8,0.85); backdrop-filter: blur(4px); border-radius: 16px; }
.gov h2 { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 700; color: white; margin-bottom: 6px; text-align: center; }
.gov p { font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 20px; text-align: center; max-width: 260px; line-height: 1.6; }
.gov-play { background: var(--mango); color: var(--earth-deep); border: none; border-radius: 100px; padding: 12px 30px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.gov-play:hover { background: #F5B840; }
.gov-inst { margin-bottom: 18px; }
.gov-inst-i { display: flex; align-items: center; gap: 9px; font-size: 12px; color: rgba(255,255,255,0.52); margin-bottom: 5px; }
.gov-final { font-size: 44px; font-weight: 800; color: var(--mango); font-family: 'Playfair Display', serif; margin: 10px 0 4px; }
.gprogbar { position: absolute; bottom: 56px; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.07); z-index: 6; }
.gprogfill { height: 100%; background: var(--mango); transition: width 0.3s; }

/* ===================== QUIZ GAME STYLES ===================== */
.quiz-shell { background: linear-gradient(135deg, #1C1208, #3A1F05); border-radius: 16px; overflow: hidden; }
.quiz-hdr { background: rgba(245,166,35,0.07); border-bottom: 1px solid rgba(245,166,35,0.14); padding: 16px 22px; display: flex; justify-content: space-between; align-items: center; }
.quiz-brand { font-size: 13px; font-weight: 600; color: var(--mango); }
.qprog-bar { flex: 1; height: 5px; background: rgba(255,255,255,0.07); border-radius: 100px; margin: 0 20px; overflow: hidden; }
.qprog-fill { height: 100%; background: var(--mango); border-radius: 100px; transition: width 0.5s ease; }
.qcnt { font-size: 12px; color: rgba(255,255,255,0.38); white-space: nowrap; }
.qtimer-bar { height: 4px; background: rgba(255,255,255,0.05); }
.qtimer-fill { height: 100%; border-radius: 0; transition: width 0.1s linear; }
.quiz-body2 { padding: 30px 32px 22px; }
.qcat { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--saffron); margin-bottom: 10px; }
.qquestion { font-family: 'Playfair Display', serif; font-size: clamp(16px,2.5vw,22px); font-weight: 600; color: white; line-height: 1.35; margin-bottom: 26px; }
.qanswers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qabtn { background: rgba(255,255,255,0.03); border: 1.5px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 14px 18px; text-align: left; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.76); transition: all 0.2s; display: flex; align-items: center; gap: 10px; line-height: 1.4; }
.qabtn:hover:not(:disabled) { background: rgba(245,166,35,0.09); border-color: rgba(245,166,35,0.35); color: white; }
.qabtn.correct { background: rgba(58,107,53,0.28); border-color: #4CAF50; color: white; }
.qabtn.wrong { background: rgba(226,75,74,0.18); border-color: #E24B4A; color: rgba(255,255,255,0.55); }
.qabtn:disabled { cursor: default; }
.qaletter { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.qabtn.correct .qaletter { background: #4CAF50; }
.qabtn.wrong .qaletter { background: #E24B4A; }
.quiz-foot { padding: 16px 32px 26px; display: flex; align-items: center; justify-content: space-between; }
.qfeedback { font-size: 13px; line-height: 1.6; max-width: 360px; }
.qf-correct { color: #7EC871; font-weight: 500; }
.qf-wrong { color: #F09595; font-weight: 500; }
.qf-fact { color: rgba(255,255,255,0.4); font-size: 12px; margin-top: 4px; }
.qnext { background: var(--mango); color: var(--earth-deep); border: none; border-radius: 100px; padding: 10px 24px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s; flex-shrink: 0; }
.qnext:hover { background: #F5B840; }
.qnext:disabled { opacity: 0.35; cursor: default; }
.qstart-screen, .qscore-screen { padding: 44px 32px; text-align: center; }
.qstart-screen h2, .qscore-screen h2 { font-family: 'Playfair Display', serif; color: white; margin-bottom: 10px; }
.qstart-screen p, .qscore-screen p { font-size: 14px; color: rgba(255,255,255,0.48); margin-bottom: 22px; line-height: 1.7; max-width: 360px; margin-left: auto; margin-right: auto; }
.qcats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.qcat-bdg { background: rgba(245,166,35,0.08); border: 1px solid rgba(245,166,35,0.18); border-radius: 100px; padding: 5px 14px; font-size: 12px; color: rgba(255,255,255,0.55); }
.qstart-btn, .qrestart-btn { background: var(--mango); color: var(--earth-deep); border: none; border-radius: 100px; padding: 12px 30px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s; }
.qstart-btn:hover, .qrestart-btn:hover { background: #F5B840; transform: scale(1.04); }
.qfinal { font-family: 'Playfair Display', serif; font-size: 64px; font-weight: 800; color: var(--mango); line-height: 1; margin: 10px 0 4px; }
.qout-of { font-size: 13px; color: rgba(255,255,255,0.38); margin-bottom: 6px; }
.qgrade { display: inline-block; background: rgba(245,166,35,0.14); border: 1px solid rgba(245,166,35,0.28); border-radius: 100px; padding: 5px 18px; font-size: 13px; font-weight: 600; color: var(--mango); margin-bottom: 20px; }

/* ===================== MEMORY GAME STYLES ===================== */
.mem-shell { background: var(--cream); border-radius: 16px; overflow: hidden; }
.mem-hdr { background: var(--earth-deep); padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; }
.mem-brand { font-size: 13px; font-weight: 600; color: var(--mango); }
.mem-stats-row { display: flex; gap: 24px; }
.msr { text-align: center; }
.msr-val { font-size: 18px; font-weight: 700; color: var(--mango); font-family: monospace; }
.msr-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.38); }
.mem-diff-btns { display: flex; gap: 7px; }
.mdb { padding: 4px 13px; border-radius: 100px; border: 1.5px solid rgba(245,166,35,0.28); background: transparent; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.48); cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s; }
.mdb.active { background: var(--mango); border-color: var(--mango); color: var(--earth-deep); }
.mem-body { padding: 22px; }
.mem-grid { display: grid; gap: 10px; }
.mem-grid-4 { grid-template-columns: repeat(4, 1fr); }
.mem-grid-6 { grid-template-columns: repeat(6, 1fr); }
.mcard { aspect-ratio: 3/4; cursor: pointer; perspective: 550px; }
.mcard-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.42s cubic-bezier(0.4,0,0.2,1); }
.mcard.flipped .mcard-inner, .mcard.matched .mcard-inner { transform: rotateY(180deg); }
.mcard-front, .mcard-back { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mcard-front { background: linear-gradient(135deg, #3A1F05, #5C3D1E); border: 2px solid rgba(245,166,35,0.18); }
.mcard-front-pat { font-size: 22px; opacity: 0.28; }
.mcard-back { background: white; border: 2px solid rgba(197,149,26,0.2); transform: rotateY(180deg); flex-direction: column; gap: 3px; padding: 7px; }
.mcard-back img { width: 68%; max-height: 62%; object-fit: contain; }
.mcard-back .mcard-nm { font-size: 8px; font-weight: 600; color: var(--earth-deep); text-align: center; line-height: 1.2; }
.mcard.matched .mcard-back { background: #EAF3DE; border-color: var(--green); }
.mcard.matched .mcard-back::after { content: '✓'; position: absolute; top: 5px; right: 7px; font-size: 11px; color: var(--green); font-weight: 700; }
.mcard.wflash .mcard-inner { animation: mwrong 0.45s ease; }
@keyframes mwrong { 0%,100%{transform:rotateY(180deg)} 25%{transform:rotateY(180deg) translateX(-4px)} 75%{transform:rotateY(180deg) translateX(4px)} }
.mem-ov { position: absolute; inset: 0; background: rgba(250,246,239,0.94); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 16px; z-index: 10; text-align: center; padding: 28px; }
.mem-ov h2 { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: var(--earth-deep); margin-bottom: 7px; }
.mem-ov p { font-size: 14px; color: var(--text-light); margin-bottom: 20px; line-height: 1.6; max-width: 300px; }
.mem-play { background: var(--saffron); color: white; border: none; border-radius: 100px; padding: 12px 28px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.mem-play:hover { background: var(--mango-deep); }
.win-stats-r { display: flex; gap: 22px; margin: 12px 0 20px; }
.wsr { text-align: center; }
.wsr-val { font-size: 26px; font-weight: 700; color: var(--saffron); font-family: 'Playfair Display', serif; }
.wsr-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-light); margin-top: 2px; }

/* ===================== SORT GAME STYLES ===================== */
.sort-shell { background: linear-gradient(180deg, #1C1208, #2E1505); border-radius: 16px; overflow: hidden; }
.sort-hdr { background: rgba(0,0,0,0.4); padding: 13px 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(245,166,35,0.09); }
.sort-brand { font-size: 13px; font-weight: 600; color: var(--mango); }
.sort-stats-row { display: flex; gap: 24px; }
.ssort { text-align: center; }
.ssort-val { font-size: 18px; font-weight: 700; color: var(--mango); font-family: monospace; }
.ssort-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.38); }
.sort-prog { padding: 0 22px; }
.sort-prog-lbl { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.32); text-transform: uppercase; letter-spacing: 0.07em; padding: 7px 0 5px; }
.sort-prog-bar { height: 4px; background: rgba(255,255,255,0.05); border-radius: 100px; overflow: hidden; }
.sort-prog-fill { height: 100%; border-radius: 100px; transition: width 0.1s linear; }
.sort-incoming { padding: 18px 22px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.04); }
.sort-inc-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: rgba(255,255,255,0.32); margin-bottom: 10px; }
.sort-inc-card { display: inline-flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.03); border: 1.5px solid rgba(245,166,35,0.14); border-radius: 18px; padding: 16px 24px; min-width: 190px; transition: all 0.3s; }
.sort-inc-card.pop { animation: spop 0.38s ease; }
@keyframes spop { 0%{transform:scale(0.7) translateY(-18px);opacity:0} 60%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }
.sort-inc-img { height: 88px; object-fit: contain; margin-bottom: 9px; filter: drop-shadow(0 7px 14px rgba(92,61,30,0.28)); }
.sort-inc-name { font-size: 13px; font-weight: 600; color: white; margin-bottom: 3px; }
.sort-inc-clue { font-size: 11px; color: rgba(255,255,255,0.38); line-height: 1.5; text-align: center; }
.sort-bins { padding: 16px 22px 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sbin { border-radius: 16px; padding: 16px 10px; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: 'DM Sans', sans-serif; }
.sbin:hover:not(:disabled) { transform: translateY(-4px); }
.sbin:active:not(:disabled) { transform: scale(0.97); }
.sbin:disabled { opacity: 0.48; cursor: default; }
.sbin-pulp { background: rgba(245,166,35,0.09); border-color: rgba(245,166,35,0.18); color: var(--mango); }
.sbin-pulp:hover:not(:disabled) { background: rgba(245,166,35,0.18); border-color: var(--mango); }
.sbin-bev { background: rgba(58,107,53,0.1); border-color: rgba(58,107,53,0.18); color: #7EC871; }
.sbin-bev:hover:not(:disabled) { background: rgba(58,107,53,0.2); border-color: var(--green); }
.sbin-trop { background: rgba(232,114,12,0.09); border-color: rgba(232,114,12,0.18); color: #F5B840; }
.sbin-trop:hover:not(:disabled) { background: rgba(232,114,12,0.18); border-color: var(--saffron); }
.sbin-icon { font-size: 26px; }
.sbin-lbl { font-size: 12px; font-weight: 600; }
.sbin-sub { font-size: 10px; opacity: 0.62; text-align: center; line-height: 1.4; }
.sbin-cnt { font-size: 16px; font-weight: 700; font-family: monospace; }
.sbin-cor { animation: sbcor 0.38s ease; }
.sbin-wrg { animation: sbwrg 0.38s ease; }
@keyframes sbcor { 0%,100%{transform:scale(1)} 40%{transform:scale(1.07)} }
@keyframes sbwrg { 0%,100%{transform:translateX(0)} 25%,75%{transform:translateX(-5px)} 50%{transform:translateX(5px)} }
.sfeedback-pop { position: absolute; z-index: 20; font-size: 18px; font-weight: 800; pointer-events: none; animation: sfpa 0.75s ease-out forwards; border-radius: 100px; padding: 8px 20px; }
.sfpop-ok { background: rgba(76,175,80,0.88); color: white; }
.sfpop-bad { background: rgba(226,75,74,0.88); color: white; }
@keyframes sfpa { 0%{opacity:0;transform:translate(-50%,-60%)} 30%{opacity:1;transform:translate(-50%,-50%)} 70%{opacity:1} 100%{opacity:0;transform:translate(-50%,-32%)} }
.sstreak { position: absolute; top: 10px; right: 14px; z-index: 5; background: rgba(245,166,35,0.14); border: 1px solid rgba(245,166,35,0.28); border-radius: 100px; padding: 3px 10px; font-size: 11px; color: var(--mango); font-weight: 600; display: none; }
.sort-ov { position: absolute; inset: 0; background: rgba(28,18,8,0.88); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 30; padding: 28px; text-align: center; border-radius: 16px; }
.sort-ov h2 { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; color: white; margin-bottom: 6px; }
.sort-ov p { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 20px; line-height: 1.7; max-width: 300px; }
.sort-start-btn { background: var(--mango); color: var(--earth-deep); border: none; border-radius: 100px; padding: 12px 28px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.sort-start-btn:hover { background: #F5B840; }
.sinst-g { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 14px 0 20px; }
.sinst-c { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 12px 8px; }
.sinst-c .icon { font-size: 22px; margin-bottom: 5px; }
.sinst-c strong { display: block; font-size: 12px; color: white; margin-bottom: 3px; }
.sinst-c span { font-size: 10px; color: rgba(255,255,255,0.42); }
.sresult-g { display: flex; gap: 22px; margin: 10px 0 18px; }
.srg { text-align: center; }
.srg-val { font-size: 28px; font-weight: 800; color: var(--mango); font-family: 'Playfair Display', serif; }
.srg-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.38); margin-top: 2px; }

/* RESPONSIVE */
@media (max-width: 900px) {
  nav { padding: 0 20px; height: 72px; }
  .nav-logo img { height: 52px; }
  .nav-links { display: none; }
  .nav-mobile-btn { display: block; }
  .home-hero, .about-hero, .about-2col, .founder-grid, .gen-grid, .mv-grid, .qual-grid,
  .prod-hero, .featured-prod, .hos-2col, .hos-prod-hero, .hos-cta, .reach-2col,
  .export-hero .ex-stats, .ef-layout, .partner-g4, .offer-g3, .proc-g4, .cert-g5,
  .country-g3, .testi-g2, .contact-main, .frec, .home-enquire, .games-g2 {
    grid-template-columns: 1fr;
  }
  .prod-grid-4, .prod-grid-4-b { grid-template-columns: repeat(2, 1fr); }
  .prod-g3, .rec-g3, .how-g3 { grid-template-columns: 1fr 1fr; }
  .testi-grid, .why-grid { grid-template-columns: 1fr 1fr; }
  .insta-grid, .prod-thumb-g { grid-template-columns: repeat(2,1fr); }
  .banner-g2 { grid-template-columns: 1fr; }
  .gal-masonry { columns: 2; }
  .hours-g3 { grid-template-columns: 1fr 1fr; }
  .social-g4 { grid-template-columns: repeat(2,1fr); }
  .qanswers { grid-template-columns: 1fr; }
  .hph-left h2 { font-size: 28px; }
  .hos-bottles { display: none; }
  /* HOS hero mobile */
  .hos-inner { padding: 100px 22px 110px; }
  .hos-media-ctrls { top: 18px; right: 18px; }
  .hos-mctrl { width: 38px; height: 38px; }
  .hos-marq-item { padding: 14px 24px; font-size: 13px; }
  .hos-scroll-cue { display: none; }
  .hos-overlay.spotlight { display: none; }
  .gh-floaters { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .hero-right { display: none; }
  .ah-right:not(.ah-right-v2) { display: none; }
  .ah-right.ah-right-v2 { display: flex; min-height: 380px; }
  .about-hero { grid-template-columns: 1fr; }
  .about-hero .ah-right-v2 .story-stage-v2 { min-height: 380px; }
  .legacy-bar { flex-wrap: wrap; }
  .legacy-item { min-width: 50%; }
  .about-stat-bar { flex-wrap: wrap; }
  .ast { min-width: 50%; }
  .quick-strip { flex-wrap: wrap; }
  .qs-item { min-width: 50%; border-right: none; margin-right: 0; padding-right: 0; border-bottom: 1px solid rgba(92,61,30,0.1); padding-bottom: 12px; margin-bottom: 12px; }
  /* Founder portrait reposition: pull quote badge inside, narrower frame */
  .founder-portrait-wrap { max-width: 320px; }
  .fq-badge { right: -8px; bottom: -70px; max-width: 218px; }
  .founder-name-plate strong { font-size: 16px; }
  .founder-name-plate span { font-size: 10px; }
  .founder-est-badge { padding: 6px 12px; }
  .founder-est-badge .est-year { font-size: 18px; }
  .journey-steps { grid-template-columns: 1fr 1fr; }
  .journey-steps::before { display: none; }
  section, .home-about, .home-products, .home-journey, .home-why, .home-testi,
  .home-enquire, .home-insta, .founder-section, .timeline-section, .mv-section,
  .quality-section, .gen-section, .prod-section-wrap, .comp-table-section,
  .hos-what, .hos-how, .hos-benefits, .hos-cta, .partner-section, .reach-section,
  .offer-section, .cert-section, .process-section, .export-testi, .export-form,
  .export-faq, .recipes-grid, .featured-recipe, .inspo-section, .chatbot-section,
  .games-main, .contact-main, .hours-section, .social-section { padding-left: 20px; padding-right: 20px; }
  .cat-divider, .gal-masonry-wrap, .prod-thumb-section, .banner-section { padding-left: 20px; padding-right: 20px; }
  .tip-strip { flex-wrap: wrap; gap: 18px; padding: 20px; }
  .tip-div { display: none; }
  .seasonal-strip { flex-wrap: wrap; }
  .ss-cta { width: 100%; }
  .ex-stats { flex-wrap: wrap; gap: 28px; }
  .form-card { padding: 28px 22px; }
  .fr { grid-template-columns: 1fr; }
}

/* ================================================================
   ▼ ▼ ▼  PREMIUM ENHANCEMENTS  ▼ ▼ ▼
   Layered in from the new design; preserves everything above.
   ================================================================ */

/* ============== EXTRA TOKENS ============== */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --container-pad: clamp(1.5rem, 4vw, 4rem);
  --kokam-berry: #7a1e3a;
  --display-alt: 'Fraunces', 'Playfair Display', serif;
}

/* ============== CUSTOM CURSOR (desktop only) ============== */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  border-radius: 50%; pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--cream);
  transition: transform 0.15s var(--ease-out);
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid var(--cream);
  transition: transform 0.25s var(--ease-out), width 0.25s var(--ease-out), height 0.25s var(--ease-out), border-color 0.25s, background 0.25s;
}
.cursor-ring.hover {
  width: 72px; height: 72px;
  border-color: var(--mango);
  background: rgba(245, 166, 35, 0.1);
}
@media (max-width: 900px), (hover: none) {
  .cursor-dot, .cursor-ring { display: none !important; }
}
@media (min-width: 901px) and (hover: hover) {
  body.cursor-active { cursor: none; }
  body.cursor-active a, body.cursor-active button,
  body.cursor-active .pc, body.cursor-active .why-card,
  body.cursor-active .tc, body.cursor-active .insta-card,
  body.cursor-active .hover-interactive,
  body.cursor-active .nav-cta, body.cursor-active .btn-primary,
  body.cursor-active .btn-ghost, body.cursor-active .btn-green,
  body.cursor-active input, body.cursor-active textarea, body.cursor-active select { cursor: none; }
}

/* ============== PRELOADER (first load only) ============== */
.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--earth-deep);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity 0.8s var(--ease-out), visibility 0.8s;
}
.preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-orb {
  position: relative;
  width: 120px; height: 120px;
  margin-bottom: 2.4rem;
}
.preloader-orb::before, .preloader-orb::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF8EC 0%, var(--mango) 40%, var(--mango-deep) 80%);
  box-shadow: 0 0 80px rgba(245, 166, 35, 0.4), inset -10px -20px 30px rgba(184, 83, 0, 0.3);
  animation: pl-pulse 2.2s var(--ease-in-out) infinite;
}
.preloader-orb::after { animation-delay: 1.1s; opacity: 0.5; filter: blur(20px); }
.preloader-leaf {
  position: absolute; top: -8px; left: 50%;
  transform: translateX(-50%) rotate(-20deg);
  width: 36px; height: 28px;
  background: var(--green);
  border-radius: 0 100% 0 100%;
  transform-origin: bottom center;
  animation: pl-leaf 3s var(--ease-in-out) infinite;
  z-index: 2;
}
@keyframes pl-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes pl-leaf {
  0%,100% { transform: translateX(-50%) rotate(-20deg); }
  50%     { transform: translateX(-50%) rotate(-5deg); }
}
.preloader-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem; font-weight: 400; font-style: italic;
  color: var(--cream); letter-spacing: 0.15em; margin-bottom: 1.4rem;
  opacity: 0.92;
}
.preloader-bar {
  width: 200px; height: 2px;
  background: rgba(251, 246, 238, 0.15);
  overflow: hidden; border-radius: 2px;
}
.preloader-bar-fill {
  width: 0%; height: 100%;
  background: linear-gradient(90deg, var(--saffron), var(--mango));
  transition: width 0.1s linear;
}
.preloader-percent {
  margin-top: 1rem; font-size: 0.7rem;
  letter-spacing: 0.3em; color: var(--cream);
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
  font-family: 'DM Sans', sans-serif;
}
@media (prefers-reduced-motion: reduce) {
  .preloader-orb::before, .preloader-orb::after, .preloader-leaf { animation: none !important; }
}

/* ============== TOP SCROLL PROGRESS RAIL ============== */
.scroll-rail {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 950;
  background: transparent; pointer-events: none;
}
.scroll-rail-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--saffron), var(--mango), var(--green));
  box-shadow: 0 0 8px rgba(245, 166, 35, 0.55);
}

/* ============== SVG BG-SCENE FLOATING DECORATIONS ============== */
.bg-scene {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  z-index: 1;
}
.hero-scene { z-index: 1; }
.bg-scene .float {
  position: absolute;
  will-change: transform;
  transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.bg-scene .float .drift {
  display: block; width: 100%; height: 100%;
  transform-origin: center;
}
.bg-scene svg.shape {
  width: 100%; height: 100%; display: block;
  overflow: visible;
}
.bg-scene .far  { filter: blur(4px) drop-shadow(0 10px 20px rgba(232, 123, 0, 0.22)); opacity: 0.45; }
.bg-scene .mid  { filter: blur(1.5px) drop-shadow(0 15px 28px rgba(232, 123, 0, 0.32)); opacity: 0.78; }
.bg-scene .near { filter: drop-shadow(0 25px 40px rgba(184, 83, 0, 0.42)) drop-shadow(0 0 18px rgba(255, 200, 100, 0.12)); opacity: 1; }
.hero-scene .far  { opacity: 0.32; }
.hero-scene .mid  { opacity: 0.55; }
.hero-scene .near { opacity: 0.82; }
.hero-scene .float { filter: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 30px rgba(255, 180, 80, 0.18)); }

@keyframes driftA {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  33%     { transform: translate(22px,-32px) rotate(9deg); }
  66%     { transform: translate(-16px,-16px) rotate(-5deg); }
}
@keyframes driftB {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50%     { transform: translate(-28px,36px) rotate(-11deg); }
}
@keyframes driftC {
  0%,100% { transform: translate(0,0) rotate(-8deg); }
  50%     { transform: translate(18px,-44px) rotate(11deg); }
}
@keyframes driftD {
  0%,100% { transform: translate(0,0) rotate(0deg) scale(1); }
  50%     { transform: translate(8px,-24px) rotate(180deg) scale(1.06); }
}
@keyframes driftE {
  0%,100% { transform: translate(0,0) rotate(6deg); }
  25%     { transform: translate(-12px,18px) rotate(-4deg); }
  75%     { transform: translate(22px,-22px) rotate(14deg); }
}
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulseGlow {
  0%,100% { opacity: 0.35; transform: scale(1); }
  50%     { opacity: 0.7;  transform: scale(1.08); }
}
.drift-a { animation: driftA 22s ease-in-out infinite; }
.drift-b { animation: driftB 28s ease-in-out infinite; }
.drift-c { animation: driftC 24s ease-in-out infinite; }
.drift-d { animation: driftD 45s linear infinite; }
.drift-e { animation: driftE 26s ease-in-out infinite; }
.spin-slow  { animation: spinSlow 70s linear infinite; }
.pulse-glow { animation: pulseGlow 6s ease-in-out infinite; }

@media (max-width: 700px) {
  .bg-scene .hide-sm { display: none; }
}

/* ============== HERITAGE TICKER MARQUEE ============== */
.heritage-ticker {
  --vel-skew: 0deg;
  overflow: hidden;
  background: var(--earth-deep);
  color: var(--cream);
  padding: 22px 0;
  border-top: 1px solid rgba(245,166,35,0.14);
  border-bottom: 1px solid rgba(245,166,35,0.14);
  position: relative; z-index: 2;
}
.heritage-ticker-track {
  display: flex; gap: 4rem;
  white-space: nowrap;
  animation: ticker-scroll 38s linear infinite;
  width: max-content;
  transform: skewX(var(--vel-skew));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.heritage-ticker-item {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem; font-weight: 400;
  letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 4rem;
  color: rgba(255,255,255,0.78);
}
.heritage-ticker-item .tdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mango);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(245,166,35,0.6);
}
.heritage-ticker-item em {
  font-style: italic;
  color: var(--mango);
}
@keyframes ticker-scroll {
  from { transform: translateX(0) skewX(var(--vel-skew, 0deg)); }
  to   { transform: translateX(-50%) skewX(var(--vel-skew, 0deg)); }
}

/* ============== HORIZONTAL PINNED FLAVOUR JOURNEY ============== */
.flavour-journey {
  background: linear-gradient(180deg, var(--earth-deep) 0%, #2a1a10 45%, var(--green-deep) 100%);
  color: var(--cream);
  padding: 0;
  position: relative;
  /* NO overflow here. ScrollTrigger pins .fj-pin with position:fixed, and a
     positioned ancestor with overflow:hidden clips it — the section went blank
     for the whole pin. .fj-pin does the clipping instead (below), which is the
     element that actually needs to hide the overflowing track. */
}
.flavour-journey::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 12% 18%, rgba(245,166,35,0.12), transparent 50%),
    radial-gradient(ellipse at 88% 80%, rgba(58,107,53,0.18), transparent 55%);
  pointer-events: none;
}
.fj-pin {
  height: 100vh; position: relative;
  display: flex; align-items: center;
  overflow: hidden;
  padding-left: clamp(1.5rem, 4vw, 4rem);
  z-index: 2;
}
.fj-head {
  flex: 0 0 auto; width: 380px;
  padding-right: 2rem;
}
@media (max-width: 900px) { .fj-head { width: 280px; } }
.fj-head .sec-label { color: var(--mango); }
.fj-head .sec-label::before { background: var(--mango); }
.fj-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 600; line-height: 1.05;
  color: white;
  letter-spacing: -0.02em;
  margin-top: 0.6rem;
}
.fj-title em {
  font-style: italic;
  color: var(--mango);
  font-weight: 700;
}
.fj-hint {
  margin-top: 5rem; font-size: 0.7rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cream); opacity: 0.55;
  display: flex; align-items: center; gap: 0.75rem;
}
.fj-hint-arrow {
  width: 30px; height: 1px;
  background: currentColor;
  position: relative;
  animation: fjArrow 1.6s infinite;
}
.fj-hint-arrow::after {
  content: ""; position: absolute;
  right: 0; top: -3px;
  border: solid transparent;
  border-width: 3.5px 0 3.5px 6px;
  border-left-color: currentColor;
}
@keyframes fjArrow {
  0%,100% { transform: translateX(0); opacity: 0.55; }
  50%     { transform: translateX(8px); opacity: 1; }
}
.fj-track {
  display: flex; gap: 2rem;
  padding-right: 10vw;
  flex: 0 0 auto;
  will-change: transform;
}
.fj-card {
  flex: 0 0 auto;
  width: min(400px, 60vw);
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  position: relative; overflow: hidden;
  background: var(--earth-deep);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.4);
}
.fj-card-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.18);   /* 9% slack per side, covers the ±6% parallax */
  transition: transform 1.2s var(--ease-out);
}
.fj-card:hover .fj-card-bg { transform: scale(1.02); }
.fj-card[data-j="0"] .fj-card-bg { background: radial-gradient(ellipse at 40% 40%, #F5A623 0%, #E8720C 50%, #6a2a0a 100%); }
.fj-card[data-j="1"] .fj-card-bg { background: radial-gradient(ellipse at 50% 30%, #FFD873 0%, #E8720C 55%, #3a2010 100%); }
.fj-card[data-j="2"] .fj-card-bg { background: linear-gradient(135deg, #4A7C3F 0%, #1E4020 80%); }
.fj-card[data-j="3"] .fj-card-bg { background: linear-gradient(135deg, #C47A0E 0%, #7a1e3a 80%); }
.fj-card[data-j="4"] .fj-card-bg { background: radial-gradient(ellipse at 50% 50%, #F5A623 0%, #2a1a10 80%); }
.fj-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(28,18,8,0.92) 100%);
  z-index: 1;
}
.fj-card-inner {
  position: absolute;
  left: 2rem; right: 2rem; bottom: 2rem;
  z-index: 2;
  color: var(--cream);
}
.fj-card-num {
  font-family: 'Playfair Display', serif;
  font-size: 0.72rem;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--mango);
  font-weight: 500;
  font-style: italic;
  margin-bottom: 0.7rem;
  opacity: 0.9;
  display: none;
}
.fj-card-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 2.1vw, 1.7rem);
  font-weight: 600; line-height: 1.15;
  margin-bottom: 0.7rem;
  letter-spacing: -0.01em;
}
.fj-card-title em { font-style: italic; color: var(--mango); }
.fj-card-desc {
  font-size: 0.84rem;
  line-height: 1.55;
  opacity: 0.85;
  max-width: 320px;
}
@media (max-width: 700px) {
  .fj-pin { flex-direction: column; height: auto; padding: 5rem var(--container-pad); align-items: flex-start; }
  .fj-head { width: 100%; margin-bottom: 2rem; padding-right: 0; }
  /* .fj-pin is a COLUMN flex container here, so its cross axis is horizontal.
     align-items:flex-start was shrink-wrapping the track to max-content, and
     .fj-card's width:100% then resolved against that collapsed box — the cards
     came out ~0 wide and invisible. Stretch the track explicitly. */
  /* Mobile is a native scroll-snap carousel, one card per view.
     Native overflow scrolling gives real swipe/drag with platform momentum;
     fj-carousel.js only drives the arrows, the dots and the wrap-around.
     GSAP's matchMedia only builds the pin at >=701px, so the two never overlap. */
  .fj-track {
    flex-direction: row;
    padding: 0 0 2px;
    gap: 14px;
    transform: none !important;
    width: 100%;
    align-self: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .fj-track::-webkit-scrollbar { display: none; }
  .fj-card {
    width: 100%;
    flex: 0 0 100%;
    aspect-ratio: 4/5;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  /* no pin on mobile, so nothing needs clipping and height is content-driven */
  .fj-pin { overflow: visible; }
  .fj-hint { display: none; }
}

/* ============== SPLIT-TEXT HELPERS ============== */
.split-line { overflow: hidden; display: block; }
.split-word { overflow: hidden; display: inline-block; }
.split-char, .split-word > div {
  display: inline-block;
  will-change: transform, opacity;
}

/* ============== HERO SCENE Z-INDEX FIX ============== */
.home-hero .hero-left,
.home-hero .hero-right { position: relative; z-index: 3; }

/* ================================================================
   ▼ ▼ ▼  NEW HERO BANNER : "Pure Mango. Pure Indulgence."  ▼ ▼ ▼
   Image-driven hero with layered splash & particle animations.
   ================================================================ */
.hero-banner {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #b91d24; /* fallback red */
  isolation: isolate;
}
/* Background image layer */
.hero-banner-bg {
  position: absolute;
  inset: 0;
  background-image: var(--banner-bg);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  animation: heroSubtleZoom 22s ease-in-out infinite alternate;
  z-index: 1;
}
@keyframes heroSubtleZoom {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1.06) translateX(-12px); }
}
/* Vignette overlay: dark on left for text legibility, transparent on right */
.hero-banner-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(110, 14, 18, 0.82) 0%,
      rgba(140, 22, 24, 0.68) 22%,
      rgba(170, 45, 28, 0.42) 38%,
      rgba(200, 80, 30, 0.15) 50%,
      transparent 62%),
    linear-gradient(180deg,
      rgba(80, 12, 14, 0.32) 0%,
      transparent 18%,
      transparent 78%,
      rgba(80, 12, 14, 0.28) 100%);
  z-index: 2;
  pointer-events: none;
}
/* Subtle radial glow behind heading area */
.hero-banner-glow {
  position: absolute;
  top: 50%; left: 18%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(255, 200, 80, 0.18) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  filter: blur(40px);
  z-index: 2;
  pointer-events: none;
  animation: hbGlowPulse 6s ease-in-out infinite;
}
@keyframes hbGlowPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}

/* ===== ANIMATED SPLASH PARTICLES ===== */
.hero-banner-particles {
  position: absolute; inset: 0;
  z-index: 3; pointer-events: none;
  overflow: hidden;
}
/* Splash droplets: small teardrop shapes that rise & fade */
.splash-drop {
  position: absolute;
  width: 10px; height: 14px;
  background: radial-gradient(ellipse at 35% 30%, #fff8d6 0%, #ffd873 35%, #f5a524 75%, #b85300 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  filter: drop-shadow(0 4px 6px rgba(245, 100, 0, 0.4));
  opacity: 0;
  animation: splashRise 7s ease-in infinite;
}
@keyframes splashRise {
  0%   { transform: translateY(20px) scale(0.4) rotate(-8deg); opacity: 0; }
  15%  { transform: translateY(0)    scale(1)   rotate(-6deg); opacity: 1; }
  85%  { transform: translateY(-70vh) scale(0.95) rotate(8deg); opacity: 1; }
  100% { transform: translateY(-95vh) scale(0.4) rotate(15deg); opacity: 0; }
}
.splash-drop.tiny { width: 6px; height: 8px; }
.splash-drop.large { width: 14px; height: 20px; }

/* Floating mango cubes: to echo the cubes in the image */
.floating-cube {
  position: absolute;
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #ffd873 0%, #f5a524 50%, #c46a12 100%);
  border-radius: 4px;
  box-shadow:
    inset -4px -4px 8px rgba(184, 83, 0, 0.35),
    inset 3px 3px 5px rgba(255, 240, 180, 0.4),
    0 8px 18px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(255, 200, 80, 0.18);
  opacity: 0.9;
  animation: cubeFloat 9s ease-in-out infinite;
}
.floating-cube.small { width: 18px; height: 18px; }
.floating-cube.tiny  { width: 12px; height: 12px; opacity: 0.7; }
@keyframes cubeFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(8px, -22px) rotate(95deg); }
  50%      { transform: translate(-6px, -38px) rotate(180deg); }
  75%      { transform: translate(-14px, -22px) rotate(265deg); }
}

/* Soft sparkle/dust motes drifting upward */
.sparkle-mote {
  position: absolute;
  width: 4px; height: 4px;
  background: radial-gradient(circle, rgba(255,235,180,0.95) 0%, rgba(255,200,100,0.5) 50%, transparent 100%);
  border-radius: 50%;
  filter: blur(0.5px);
  animation: sparkleDrift 10s linear infinite;
  opacity: 0;
}
@keyframes sparkleDrift {
  0%   { transform: translateY(20px) translateX(0);    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { transform: translateY(-90vh) translateX(20px); opacity: 0; }
}

/* ===== HERO CONTENT (left-aligned over the red gradient zone) ===== */
.hero-banner-content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0px 48px 0px;
  display: block;
}
.hero-banner-text {
  position: relative;
  max-width: 700px;
}
.hero-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 240, 200, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 220, 140, 0.35);
  border-radius: 100px;
  padding: 8px 20px;
  margin-bottom: 30px;
  box-shadow: 0 6px 20px rgba(120, 18, 22, 0.25);
}
.hero-banner-badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ffd873;
  box-shadow: 0 0 14px #ffd873, 0 0 4px #fff;
  animation: heroBadgePulse 2.2s ease-in-out infinite;
}
@keyframes heroBadgePulse {
  0%, 100% { box-shadow: 0 0 8px #ffd873; }
  50%      { box-shadow: 0 0 20px #ffd873, 0 0 6px #fff; }
}
.hero-banner-badge span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #fff5d9;
}
.hero-banner-text h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(44px, 5.6vw, 78px);
  font-weight: 700;
  color: white;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  text-shadow: 0 4px 30px rgba(80, 14, 14, 0.55), 0 1px 2px rgba(0,0,0,0.35);
}
.hero-banner-text h1 .line-1 {
  display: block;
  color: #fff;
  margin-bottom: 4px;
}
.hero-banner-text h1 .line-2 {
  display: block;
  font-style: italic;
  background: linear-gradient(135deg, #fff8d6 0%, #ffd873 30%, #f5a524 70%, #ffb84a 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 4px 18px rgba(245, 166, 35, 0.5));
}
.hero-banner-text > p {
  font-size: 17px;
  line-height: 1.85;
  color: rgba(255, 248, 230, 0.95);
  max-width: 540px;
  margin-bottom: 40px;
  text-shadow: 0 2px 12px rgba(80, 14, 14, 0.55);
}

/* CTA buttons inside the banner */
.hero-banner-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 50px; }
.hero-banner-btns .btn-primary {
  background: linear-gradient(135deg, #ffd873, #f5a524);
  color: #4a1a08;
  border: none;
  padding: 14px 30px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 30px rgba(245, 100, 20, 0.45), 0 0 0 1px rgba(255, 240, 200, 0.4) inset;
  transition: transform 0.25s, box-shadow 0.25s;
}
.hero-banner-btns .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(245, 100, 20, 0.6), 0 0 0 1px rgba(255, 240, 200, 0.6) inset;
}
.hero-banner-btns .btn-ghost-light {
  background: rgba(255, 240, 200, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff5d9;
  border: 1.5px solid rgba(255, 220, 140, 0.4);
  padding: 13px 28px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.02em;
  transition: all 0.25s;
}
.hero-banner-btns .btn-ghost-light:hover {
  background: rgba(255, 240, 200, 0.22);
  border-color: rgba(255, 220, 140, 0.7);
  transform: translateY(-2px);
}

/* Stats row - lighter glassmorphic cards */
.hero-banner-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 580px;
}
.hero-banner-stats > div {
  background: rgba(255, 240, 200, 0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 220, 140, 0.18);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  transition: transform 0.3s, background 0.3s;
}
.hero-banner-stats > div:hover {
  background: rgba(255, 240, 200, 0.18);
  transform: translateY(-3px);
}
.hero-banner-stats .h-stat-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffd873;
  margin-bottom: 4px;
  text-shadow: 0 2px 8px rgba(80, 14, 14, 0.3);
}
.hero-banner-stats .h-stat-lbl {
  display: block;
  font-size: 9.5px;
  color: rgba(255, 245, 220, 0.78);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 500;
}

/* Scroll cue at bottom */
.hero-banner-scroll {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  pointer-events: none;
}
.hero-banner-scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, transparent, rgba(255, 240, 200, 0.7));
  animation: scrollCueLine 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollCueLine {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}
.hero-banner-scroll span {
  font-size: 9px;
  color: rgba(255, 245, 220, 0.7);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .hero-banner-bg {
    background-position: 75% center;
    background-size: auto 100%;
    opacity: 0.55;
  }
  .hero-banner-overlay {
    background:
      linear-gradient(180deg,
        rgba(120, 18, 22, 0.72) 0%,
        rgba(160, 35, 30, 0.55) 50%,
        rgba(180, 60, 30, 0.45) 100%);
  }
  .hero-banner-content {
    grid-template-columns: 1fr;
    padding: 100px 26px 80px;
  }
  .hero-banner-text > p { font-size: 15px; max-width: none; }
  .hero-banner-stats { grid-template-columns: repeat(2, 1fr); max-width: none; }
  .hero-banner-glow { left: 50%; width: 380px; height: 380px; }
  .floating-cube.huge, .splash-drop.large { display: none; }
}
@media (max-width: 500px) {
  .hero-banner-text h1 { font-size: clamp(40px, 11vw, 56px); }
  .hero-banner-stats .h-stat-num { font-size: 18px; }
  .hero-banner-stats .h-stat-lbl { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner-bg,
  .hero-banner-glow,
  .splash-drop,
  .floating-cube,
  .sparkle-mote,
  .hero-banner-scroll-line { animation: none !important; }
}


/* ================================================================
   ▼ ▼ ▼  HERO SLIDER: Multi-banner carousel  ▼ ▼ ▼
   Layered slides with smooth fade + Ken Burns zoom,
   themed per-slide overlays, nav arrows, dots, progress, autoplay.
   ================================================================ */
.hero-slider {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #1a0a0c;
}
.hero-slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 1.1s;
  z-index: 1;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
}
/* Slide background image: Ken Burns zoom while active */
.hero-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  transform: scale(1.04);
  transition: transform 8s ease-out;
  will-change: transform;
}
.hero-slide.is-active .hero-slide-bg {
  transform: scale(1.12) translateX(-14px);
  transition: transform 9s ease-out;
}
/* Themed gradient overlay per slide */
.hero-slide-overlay {
  position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
}
/* Soft radial glow */
.hero-slide-glow {
  position: absolute;
  top: 50%; left: 22%;
  width: 720px; height: 720px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(50px);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-slide.is-active .hero-slide-glow {
  opacity: 1;
  animation: hsGlowPulse 7s ease-in-out infinite;
}
@keyframes hsGlowPulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.15); }
}

/* === Per-slide theme colors === */
/* Slide 1: Mango (deep red / golden) */
.hero-slide[data-theme="mango"] .hero-slide-overlay {
  background:
    linear-gradient(90deg,
      rgba(110, 14, 18, 0.86) 0%,
      rgba(140, 22, 24, 0.70) 22%,
      rgba(170, 45, 28, 0.42) 38%,
      rgba(200, 80, 30, 0.15) 50%,
      transparent 62%),
    linear-gradient(180deg,
      rgba(80, 12, 14, 0.34) 0%,
      transparent 18%,
      transparent 78%,
      rgba(80, 12, 14, 0.30) 100%);
}
.hero-slide[data-theme="mango"] .hero-slide-glow {
  background: radial-gradient(circle, rgba(255, 200, 80, 0.20) 0%, transparent 60%);
}

/* Slide 2: Pineapple (green / yellow tropical) */
.hero-slide[data-theme="pineapple"] .hero-slide-overlay {
  background:
    linear-gradient(90deg,
      rgba(20, 60, 25, 0.82) 0%,
      rgba(35, 90, 35, 0.62) 24%,
      rgba(80, 130, 40, 0.32) 42%,
      rgba(180, 180, 60, 0.10) 54%,
      transparent 65%),
    linear-gradient(180deg,
      rgba(15, 50, 18, 0.28) 0%,
      transparent 20%,
      transparent 78%,
      rgba(15, 50, 18, 0.25) 100%);
}
.hero-slide[data-theme="pineapple"] .hero-slide-glow {
  background: radial-gradient(circle, rgba(255, 220, 80, 0.22) 0%, transparent 60%);
}

/* Slide 3: Kairi (green / lime fresh) */
.hero-slide[data-theme="kairi"] .hero-slide-overlay {
  background:
    linear-gradient(90deg,
      rgba(35, 70, 18, 0.86) 0%,
      rgba(55, 95, 25, 0.68) 22%,
      rgba(95, 130, 38, 0.36) 40%,
      rgba(170, 175, 55, 0.12) 52%,
      transparent 64%),
    linear-gradient(180deg,
      rgba(25, 55, 15, 0.30) 0%,
      transparent 18%,
      transparent 78%,
      rgba(25, 55, 15, 0.28) 100%);
}
.hero-slide[data-theme="kairi"] .hero-slide-glow {
  background: radial-gradient(circle, rgba(220, 255, 100, 0.22) 0%, transparent 60%);
}

/* Slide 4: Fanas (warm amber / brown jackfruit) */
.hero-slide[data-theme="fanas"] .hero-slide-overlay {
  background:
    linear-gradient(90deg,
      rgba(70, 35, 8, 0.86) 0%,
      rgba(105, 55, 14, 0.66) 22%,
      rgba(150, 90, 22, 0.36) 40%,
      rgba(200, 140, 40, 0.12) 52%,
      transparent 64%),
    linear-gradient(180deg,
      rgba(50, 24, 6, 0.32) 0%,
      transparent 18%,
      transparent 78%,
      rgba(50, 24, 6, 0.30) 100%);
}
.hero-slide[data-theme="fanas"] .hero-slide-glow {
  background: radial-gradient(circle, rgba(255, 200, 90, 0.22) 0%, transparent 60%);
}

/* Slide 5: Kokam (deep crimson / magenta) */
.hero-slide[data-theme="farm"] .hero-slide-overlay {
  background: linear-gradient(
    110deg,
    rgba(10,20,5,0.72) 0%,
    rgba(15,30,8,0.55) 40%,
    rgba(20,40,10,0.15) 75%,
    transparent 100%
  );
}
.hero-slide[data-theme="farm"] .hero-slide-glow {
  background: radial-gradient(ellipse at 20% 60%, rgba(160,210,50,0.22) 0%, transparent 65%);
}
.hero-slide[data-theme="factory"] .hero-slide-overlay {
  background: linear-gradient(
    110deg,
    rgba(8,16,28,0.78) 0%,
    rgba(12,22,38,0.58) 40%,
    rgba(18,30,50,0.18) 75%,
    transparent 100%
  );
}
.hero-slide[data-theme="factory"] .hero-slide-glow {
  background: radial-gradient(ellipse at 20% 65%, rgba(245,166,35,0.20) 0%, transparent 65%);
}
.hero-slide[data-theme="kokam"] .hero-slide-overlay {
  background:
    linear-gradient(90deg,
      rgba(85, 10, 20, 0.88) 0%,
      rgba(125, 18, 32, 0.70) 22%,
      rgba(170, 35, 55, 0.42) 40%,
      rgba(210, 70, 90, 0.14) 52%,
      transparent 64%),
    linear-gradient(180deg,
      rgba(60, 8, 14, 0.34) 0%,
      transparent 18%,
      transparent 78%,
      rgba(60, 8, 14, 0.32) 100%);
}
.hero-slide[data-theme="kokam"] .hero-slide-glow {
  background: radial-gradient(circle, rgba(255, 130, 160, 0.22) 0%, transparent 60%);
}

/* === Slide content === */
.hero-slide-content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
  height: 100%;
  display: flex;
  align-items: center;
}
.hero-slide-text {
  position: relative;
  max-width: min(680px, 90vw);
  /* Animate text in when slide becomes active */
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease 0.25s, transform 0.9s cubic-bezier(.4,0,.2,1) 0.25s;
}
.hero-slide.is-active .hero-slide-text { opacity: 1; transform: translateY(0); }

/* Stagger child elements */
.hero-slide-text > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.4,0,.2,1);
}
.hero-slide.is-active .hero-slide-text > * {
  opacity: 1;
  transform: translateY(0);
}
.hero-slide.is-active .hero-slide-text > *:nth-child(1) { transition-delay: 0.35s; }
.hero-slide.is-active .hero-slide-text > *:nth-child(2) { transition-delay: 0.45s; }
.hero-slide.is-active .hero-slide-text > *:nth-child(3) { transition-delay: 0.58s; }
.hero-slide.is-active .hero-slide-text > *:nth-child(4) { transition-delay: 0.70s; }
.hero-slide.is-active .hero-slide-text > *:nth-child(5) { transition-delay: 0.82s; }

.hero-slide-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 240, 200, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 220, 140, 0.35);
  border-radius: 100px;
  padding: 8px 20px;
  margin-bottom: 30px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.hero-slide-badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--slide-accent, #ffd873);
  box-shadow: 0 0 14px var(--slide-accent, #ffd873), 0 0 4px #fff;
  animation: heroBadgePulse 2.2s ease-in-out infinite;
}
.hero-slide-badge span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #fff5d9;
}
.hero-slide-text h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(40px, 5.4vw, 76px);
  font-weight: 700;
  color: white;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-bottom: 32px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0,0,0,0.35);
}
.hero-slide-text h1 .accent {
  margin-top: 0.12em;
}
.hero-slide-text h1 .accent {
  display: block;
  font-style: italic;
  background: var(--slide-headline-gradient, linear-gradient(135deg, #fff8d6 0%, #ffd873 30%, #f5a524 70%, #ffb84a 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 4px 18px var(--slide-glow, rgba(245, 166, 35, 0.5)));
}
.hero-slide-text > p {
  font-size: 17px;
  line-height: 1.85;
  color: rgba(255, 248, 230, 0.95);
  max-width: 540px;
  margin-bottom: 40px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.hero-slide-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 50px; }
.hero-slide-btns .btn-primary {
  background: var(--slide-btn-gradient, linear-gradient(135deg, #ffd873, #f5a524));
  color: #4a1a08;
  border: none;
  padding: 14px 30px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 30px var(--slide-btn-shadow, rgba(245, 100, 20, 0.45)), 0 0 0 1px rgba(255, 240, 200, 0.4) inset;
  transition: transform 0.25s, box-shadow 0.25s;
}
.hero-slide-btns .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px var(--slide-btn-shadow, rgba(245, 100, 20, 0.6)), 0 0 0 1px rgba(255, 240, 200, 0.6) inset;
}
.hero-slide-btns .btn-ghost-light {
  background: rgba(255, 240, 200, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff5d9;
  border: 1.5px solid rgba(255, 220, 140, 0.4);
  padding: 13px 28px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.02em;
  transition: all 0.25s;
}
.hero-slide-btns .btn-ghost-light:hover {
  background: rgba(255, 240, 200, 0.22);
  border-color: rgba(255, 220, 140, 0.7);
  transform: translateY(-2px);
}

/* Stats row: only on first slide */
.hero-slide-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 580px;
}
.hero-slide-stats > div {
  background: rgba(255, 240, 200, 0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 220, 140, 0.18);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  transition: transform 0.3s, background 0.3s;
}
.hero-slide-stats > div:hover {
  background: rgba(255, 240, 200, 0.18);
  transform: translateY(-3px);
}
.hero-slide-stats .h-stat-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--slide-accent, #ffd873);
  margin-bottom: 4px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.hero-slide-stats .h-stat-lbl {
  display: block;
  font-size: 9.5px;
  color: rgba(255, 245, 220, 0.78);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 500;
}

/* === Navigation arrows === */
.hero-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255, 240, 200, 0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 220, 140, 0.35);
  color: #fff5d9;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.hero-nav-btn:hover {
  background: rgba(255, 240, 200, 0.22);
  border-color: rgba(255, 220, 140, 0.7);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.hero-nav-btn:active { transform: translateY(-50%) scale(0.96); }
.hero-nav-btn.prev { left: 32px; }
.hero-nav-btn.next { right: 32px; }
.hero-nav-btn svg { width: 22px; height: 22px; stroke-width: 2.4; }

/* === Dots indicator === */
.hero-dots {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
  padding: 10px 18px;
  background: rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 100px;
  border: 1px solid rgba(255, 220, 140, 0.18);
}
.hero-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 245, 220, 0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.hero-dot:hover { background: rgba(255, 245, 220, 0.65); transform: scale(1.15); }
.hero-dot.is-active {
  width: 38px;
  border-radius: 100px;
  background: rgba(255, 245, 220, 0.25);
}
/* Progress fill inside the active dot */
.hero-dot-progress {
  position: absolute;
  inset: 0;
  background: var(--slide-accent, #ffd873);
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0);
  box-shadow: 0 0 12px var(--slide-accent, #ffd873);
}
.hero-dot.is-active .hero-dot-progress.is-running {
  animation: dotProgress var(--slide-duration, 6s) linear forwards;
}
@keyframes dotProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* === Slide counter (bottom-right) === */
.hero-counter {
  position: absolute;
  bottom: 38px;
  right: 32px;
  z-index: 10;
  font-family: 'Playfair Display', serif;
  color: rgba(255, 245, 220, 0.85);
  font-size: 14px;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid rgba(255, 220, 140, 0.18);
}
.hero-counter-current {
  font-size: 22px;
  font-weight: 700;
  color: var(--slider-current-accent, #ffd873);
  transition: color 0.6s;
  min-width: 24px;
  text-align: center;
  display: inline-block;
}
.hero-counter-divider { opacity: 0.5; }

/* === Per-slide CSS variables (theme accents for shared nav elements) === */
.hero-slide[data-theme="mango"]     { --slide-accent: #ffd873; --slide-glow: rgba(245,166,35,0.5);  --slide-headline-gradient: linear-gradient(135deg, #fff8d6 0%, #ffd873 30%, #f5a524 70%, #ffb84a 100%); --slide-btn-gradient: linear-gradient(135deg, #ffd873, #f5a524); --slide-btn-shadow: rgba(245,100,20,0.45); }
.hero-slide[data-theme="pineapple"] { --slide-accent: #ffe04a; --slide-glow: rgba(255,210,40,0.55); --slide-headline-gradient: linear-gradient(135deg, #fff8c8 0%, #ffe04a 30%, #f5b524 70%, #ffd060 100%); --slide-btn-gradient: linear-gradient(135deg, #ffe04a, #f5b524); --slide-btn-shadow: rgba(220,140,15,0.50); }
.hero-slide[data-theme="kairi"]     { --slide-accent: #d4f060; --slide-glow: rgba(180,235,80,0.55); --slide-headline-gradient: linear-gradient(135deg, #f6ffd6 0%, #d4f060 30%, #9bc824 70%, #c8e85a 100%); --slide-btn-gradient: linear-gradient(135deg, #d4f060, #9bc824); --slide-btn-shadow: rgba(120,165,20,0.50); }
.hero-slide[data-theme="fanas"]     { --slide-accent: #ffc24a; --slide-glow: rgba(255,170,55,0.55); --slide-headline-gradient: linear-gradient(135deg, #fff0c8 0%, #ffc24a 30%, #d8830e 70%, #ffae3a 100%); --slide-btn-gradient: linear-gradient(135deg, #ffc24a, #d8830e); --slide-btn-shadow: rgba(180,90,10,0.50); }
.hero-slide[data-theme="farm"]    { --slide-accent: #c8e85a; --slide-glow: rgba(160,210,50,0.45); --slide-headline-gradient: linear-gradient(135deg, #f6ffd6 0%, #d4f060 30%, #7aa820 70%, #c0d84a 100%); --slide-btn-gradient: linear-gradient(135deg, #d4f060, #7aa820); --slide-btn-shadow: rgba(90,130,15,0.50); }
.hero-slide[data-theme="factory"] { --slide-accent: #ffd873; --slide-glow: rgba(245,166,35,0.45); --slide-headline-gradient: linear-gradient(135deg, #fff8d6 0%, #ffd873 30%, #f5a524 70%, #ffb84a 100%); --slide-btn-gradient: linear-gradient(135deg, #ffd873, #f5a524); --slide-btn-shadow: rgba(180,90,10,0.45); }
.hero-slide[data-theme="kokam"]     { --slide-accent: #ff7a9c; --slide-glow: rgba(255,90,130,0.55); --slide-headline-gradient: linear-gradient(135deg, #ffd6e0 0%, #ff7a9c 30%, #c41e44 70%, #ff5d80 100%); --slide-btn-gradient: linear-gradient(135deg, #ff7a9c, #c41e44); --slide-btn-shadow: rgba(180,20,50,0.50); }

/* === Floating decorative particles (lightweight, slide-themed) === */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.hero-mote {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--slide-accent, #ffd873) 0%, transparent 70%);
  filter: blur(0.5px);
  opacity: 0;
  animation: heroMoteDrift 12s linear infinite;
}
@keyframes heroMoteDrift {
  0%   { transform: translateY(20px) translateX(0); opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-95vh) translateX(40px); opacity: 0; }
}

/* === Responsive === */
@media (max-width: 1024px) {
  .hero-nav-btn { width: 48px; height: 48px; }
  .hero-nav-btn.prev { left: 18px; }
  .hero-nav-btn.next { right: 18px; }
}
@media (max-width: 900px) {
  .hero-slide-bg {
    background-position: 75% center;
    background-size: cover;
    opacity: 0.6;
  }
  /* Strengthen overlay so text reads well over visible image on mobile */
  .hero-slide[data-theme="mango"] .hero-slide-overlay,
  .hero-slide[data-theme="pineapple"] .hero-slide-overlay,
  .hero-slide[data-theme="kairi"] .hero-slide-overlay,
  .hero-slide[data-theme="fanas"] .hero-slide-overlay,
  .hero-slide[data-theme="farm"] .hero-slide-overlay {
  background: linear-gradient(
    110deg,
    rgba(10,20,5,0.72) 0%,
    rgba(15,30,8,0.55) 40%,
    rgba(20,40,10,0.15) 75%,
    transparent 100%
  );
}
.hero-slide[data-theme="farm"] .hero-slide-glow {
  background: radial-gradient(ellipse at 20% 60%, rgba(160,210,50,0.22) 0%, transparent 65%);
}
.hero-slide[data-theme="factory"] .hero-slide-overlay {
  background: linear-gradient(
    110deg,
    rgba(8,16,28,0.78) 0%,
    rgba(12,22,38,0.58) 40%,
    rgba(18,30,50,0.18) 75%,
    transparent 100%
  );
}
.hero-slide[data-theme="factory"] .hero-slide-glow {
  background: radial-gradient(ellipse at 20% 65%, rgba(245,166,35,0.20) 0%, transparent 65%);
}
.hero-slide[data-theme="kokam"] .hero-slide-overlay {
    background:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.32) 45%,
        rgba(0, 0, 0, 0.55) 100%);
  }
  .hero-slide-content { padding: 100px 26px 100px; }
  .hero-slide-text > p { font-size: 15px; max-width: none; }
  .hero-slide-stats { grid-template-columns: repeat(2, 1fr); max-width: none; }
  .hero-slide-glow { left: 50%; width: 420px; height: 420px; }
  .hero-counter { right: 18px; bottom: 86px; padding: 6px 12px; font-size: 12px; }
  .hero-counter-current { font-size: 18px; }
  .hero-dots { bottom: 24px; padding: 8px 14px; gap: 10px; }
}
@media (max-width: 640px) {
  .hero-nav-btn {
    width: 42px; height: 42px;
    top: auto; bottom: 88px;
    transform: none;
  }
  .hero-nav-btn:hover { transform: scale(1.06); }
  .hero-nav-btn.prev { left: 16px; }
  .hero-nav-btn.next { right: 16px; }
  .hero-nav-btn svg { width: 18px; height: 18px; }
  .hero-counter { display: none; }
  .hero-dots { bottom: 24px; }
}
@media (max-width: 500px) {
  .hero-slide-text h1 { font-size: clamp(36px, 10vw, 52px); }
  .hero-slide-stats .h-stat-num { font-size: 18px; }
  .hero-slide-stats .h-stat-lbl { font-size: 9px; }
  .hero-dot { width: 8px; height: 8px; }
  .hero-dot.is-active { width: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide-bg,
  .hero-slide-glow,
  .hero-slide-text,
  .hero-slide-text > *,
  .hero-mote,
  .hero-dot.is-active .hero-dot-progress { animation: none !important; transition: opacity 0.3s ease !important; transform: none !important; }
  .hero-slide.is-active .hero-slide-bg { transform: none !important; }
}

/* legacy aliases: keep old class names if referenced elsewhere */
.hero-banner-text h1 .line-1, .hero-banner-text h1 .line-2 { display: block; }




/* ================================================================
   ▼ ▼ ▼  PER-SLIDE PARTICLE THEMING  ▼ ▼ ▼
   The original .splash-drop / .floating-cube / .sparkle-mote rules
   live above. Here we just override their colors per slide.
   ================================================================ */

/* Particles only animate on the active slide */
.hero-slide .hero-particles .splash-drop,
.hero-slide .hero-particles .floating-cube,
.hero-slide .hero-particles .hero-mote {
  visibility: hidden;
}
.hero-slide.is-active .hero-particles .splash-drop,
.hero-slide.is-active .hero-particles .floating-cube,
.hero-slide.is-active .hero-particles .hero-mote {
  visibility: visible;
}

/* Mango: original golden colors (default, no override needed) */

/* Pineapple: bright tropical yellow */
.hero-slide[data-theme="pineapple"] .hero-particles .splash-drop {
  background: radial-gradient(ellipse at 35% 30%, #fff8c8 0%, #ffe04a 35%, #f5b524 75%, #a85d04 100%);
  filter: drop-shadow(0 4px 6px rgba(220, 150, 0, 0.4));
}
.hero-slide[data-theme="pineapple"] .hero-particles .floating-cube {
  background: linear-gradient(135deg, #ffe88a 0%, #ffc824 50%, #a85d04 100%);
  box-shadow:
    inset -4px -4px 8px rgba(140, 70, 0, 0.35),
    inset 3px 3px 5px rgba(255, 245, 200, 0.40),
    0 8px 18px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(255, 220, 80, 0.22);
}

/* Kairi (raw mango) : fresh lime / green */
.hero-slide[data-theme="kairi"] .hero-particles .splash-drop {
  background: radial-gradient(ellipse at 35% 30%, #f6ffd6 0%, #d4f060 35%, #9bc824 75%, #4a7008 100%);
  filter: drop-shadow(0 4px 6px rgba(80, 130, 0, 0.4));
}
.hero-slide[data-theme="kairi"] .hero-particles .floating-cube {
  background: linear-gradient(135deg, #dff19a 0%, #9bc824 50%, #4a7008 100%);
  box-shadow:
    inset -4px -4px 8px rgba(60, 100, 0, 0.35),
    inset 3px 3px 5px rgba(240, 255, 200, 0.40),
    0 8px 18px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(180, 235, 80, 0.22);
}

/* Fanas (jackfruit) : warm amber */
.hero-slide[data-theme="fanas"] .hero-particles .splash-drop {
  background: radial-gradient(ellipse at 35% 30%, #fff0c8 0%, #ffc24a 35%, #d8830e 75%, #6a3a04 100%);
  filter: drop-shadow(0 4px 6px rgba(180, 90, 0, 0.4));
}
.hero-slide[data-theme="fanas"] .hero-particles .floating-cube {
  background: linear-gradient(135deg, #ffe88a 0%, #e89c10 50%, #7a4a04 100%);
  box-shadow:
    inset -4px -4px 8px rgba(120, 60, 0, 0.35),
    inset 3px 3px 5px rgba(255, 240, 190, 0.40),
    0 8px 18px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(255, 180, 60, 0.22);
}

/* Kokam: crimson / berry pink */
.hero-slide[data-theme="kokam"] .hero-particles .splash-drop {
  background: radial-gradient(ellipse at 35% 30%, #ffd6e0 0%, #ff7a9c 35%, #c41e44 75%, #5a0418 100%);
  filter: drop-shadow(0 4px 6px rgba(170, 20, 50, 0.4));
}
.hero-slide[data-theme="kokam"] .hero-particles .floating-cube {
  background: linear-gradient(135deg, #ff8aa0 0%, #c41e44 50%, #5a0418 100%);
  box-shadow:
    inset -4px -4px 8px rgba(90, 4, 24, 0.40),
    inset 3px 3px 5px rgba(255, 220, 230, 0.35),
    0 8px 18px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(255, 130, 160, 0.22);
}


/* ================================================================
   ▼ ▼ ▼  HOME PRODUCTS: premium redesign  ▼ ▼ ▼
   Clean textured background (cream + paper grain + soft vignette),
   refined heading typography, polished card presentation.
   ================================================================ */
.home-products {
  position: relative;
  padding: 80px 24px 80px;
  background:
    linear-gradient(180deg, #faf3e4 0%, #f5e9cf 55%, #f7eed7 100%);
  overflow: hidden;
  isolation: isolate;
}

/* Layered textured background (multiple subtle layers for depth) */
.hp-bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Paper texture: large soft warm gradient blobs */
.hp-bg-paper {
  background:
    radial-gradient(ellipse 80% 60% at 15% 10%, rgba(245,210,140,0.30) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 90%, rgba(225,170,80,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255,248,220,0.35) 0%, transparent 70%);
  z-index: 1;
}
/* Tiny dot grain: pure CSS, very subtle */
.hp-bg-grain {
  background-image:
    radial-gradient(rgba(140, 80, 20, 0.10) 1px, transparent 1.4px),
    radial-gradient(rgba(140, 80, 20, 0.05) 1px, transparent 1.4px);
  background-size: 28px 28px, 14px 14px;
  background-position: 0 0, 7px 7px;
  opacity: 0.55;
  mix-blend-mode: multiply;
  z-index: 2;
}
/* Soft vignette to focus attention on content */
.hp-bg-vignette {
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 35%, rgba(120, 70, 20, 0.10) 100%);
  z-index: 3;
}

/* Container */
.hp-container {
  position: relative;
  z-index: 4;
  max-width: 1280px;
  margin: 0 auto;
}

/* === Premium header block === */
.hp-header {
  text-align: center;
  margin-bottom: 36px;
  padding: 0 20px;
}
.hp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.hp-eyebrow-line {
  display: block;
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 100, 20, 0.5));
}
.hp-eyebrow .hp-eyebrow-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(184, 100, 20, 0.5));
}
.hp-eyebrow-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--saffron, #c5951a);
}
.hp-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text-dark, #1a1308);
  margin: 0 0 22px;
}
.hp-title em {
  font-style: italic;
  color: var(--saffron, #c5951a);
  font-weight: 400;
}
.hp-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-mid, #4a3a24);
  max-width: 750px;
  margin: 0 auto;
}
.hp-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.hp-divider-dash {
  display: block;
  width: 60px;
  height: 1px;
  background: rgba(184, 100, 20, 0.30);
}
.hp-divider-mark {
  font-size: 14px;
  color: var(--saffron, #c5951a);
  letter-spacing: 0;
}

/* === Product grid === */
.hp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.hp-grid-row-a {
  margin-bottom: 26px;
}
.hp-grid-row-b {
  /* second row keeps 4 columns on desktop */
}

/* Polished card overrides (build on top of existing .pc rules) */
.home-products .pc {
  background: white;
  border: 1px solid rgba(184, 100, 20, 0.10);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow:
    0 1px 2px rgba(28, 18, 8, 0.04),
    0 8px 24px rgba(28, 18, 8, 0.06);
  transition:
    transform 0.5s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
    box-shadow 0.5s ease,
    border-color 0.3s ease;
}
.home-products .pc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, transparent 30%, rgba(245, 166, 35, 0.4) 60%, transparent 90%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
.home-products .pc:hover {
  transform: translateY(-8px);
  box-shadow:
    0 6px 12px rgba(28, 18, 8, 0.08),
    0 22px 48px rgba(28, 18, 8, 0.16);
  border-color: rgba(245, 166, 35, 0.35);
}
.home-products .pc:hover::before {
  opacity: 1;
}

.home-products .pc-img {
  padding: 28px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: background 0.5s ease;
}
.home-products .pc-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(0,0,0,0.06), transparent 70%);
  pointer-events: none;
}
.home-products .pc:hover .pc-img {
  filter: saturate(1.1);
}

.home-products .pc-body {
  padding: 22px 24px 26px;
  position: relative;
  z-index: 2;
  background: white;
  border-top: 1px solid rgba(184, 100, 20, 0.06);
}
.home-products .pc-body h4 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark, #1a1308);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.home-products .pc-body p {
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  color: var(--text-mid, #4a3a24);
  line-height: 1.5;
  margin: 0 0 14px;
}
.home-products .pc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(245, 166, 35, 0.10);
  color: var(--saffron, #c5951a);
  font-size: 15px;
  margin-top: 4px;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.home-products .pc:hover .pc-arrow {
  background: var(--saffron, #c5951a);
  color: white;
  transform: translateX(4px);
}

/* Zoom mark (corner icon on hover) : refined */
.home-products .pc-zoom-mark {
  background: rgba(28, 18, 8, 0.85);
  color: white;
  width: 32px;
  height: 32px;
  font-size: 13px;
  top: 14px;
  right: 14px;
  border: 1px solid rgba(245, 166, 35, 0.3);
}

/* === CTA block === */
.hp-cta {
  text-align: center;
  margin-top: 64px;
  padding: 0 20px;
}
.hp-cta-btn {
  font-size: 15px;
  font-weight: 600;
  padding: 18px 40px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hp-cta-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
.hp-cta-btn:hover .hp-cta-arrow {
  transform: translateX(4px);
}
.hp-cta-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text-light, #6a5a44);
  margin: 16px 0 0;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* === Responsive === */
@media (max-width: 1080px) {
  .home-products { padding: 100px 24px 110px; }
  .hp-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}
@media (max-width: 800px) {
  .home-products { padding: 80px 20px 90px; }
  .hp-header { margin-bottom: 28px; }
  .hp-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .home-products .pc-img { height: 220px; padding: 22px; }
  .home-products .pc-body { padding: 18px 20px 22px; }
  .home-products .pc-body h4 { font-size: 17px; }
}
@media (max-width: 480px) {
  .home-products { padding: 64px 16px 72px; }
  .hp-header { margin-bottom: 22px; }
  .hp-eyebrow-line { width: 32px; }
  .hp-eyebrow-text { font-size: 11px; letter-spacing: 0.28em; }
  .hp-tagline { font-size: 15px; }
  .hp-grid { grid-template-columns: 1fr; gap: 16px; }
  .home-products .pc-img { height: 240px; }
  .hp-bg-grain { background-size: 22px 22px, 11px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-products .pc,
  .home-products .pc-arrow,
  .hp-cta-arrow { transition: none !important; }
}


/* ================================================================
   ▼ ▼ ▼  FOOTER V2: premium dark navy redesign  ▼ ▼ ▼
   Background: #01002A. Layered glows + dot-grid texture. Refined
   typography, hover micro-interactions, animated gold border.
   ================================================================ */
.site-footer-v2 {
  position: relative;
  background: #01002A;
  color: rgba(255, 255, 255, 0.62);
  padding: 0 0 36px;
  overflow: hidden;
  isolation: isolate;
  font-family: 'DM Sans', sans-serif;
}

/* Animated gold-shimmer top border */
.ftr-top-border {
  position: relative;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(245,166,35,0.4) 20%, rgba(245,166,35,0.85) 50%, rgba(245,166,35,0.4) 80%, transparent 100%);
  overflow: hidden;
}
.ftr-shimmer {
  position: absolute;
  top: 0; left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 245, 200, 0.95), transparent);
  animation: ftrShimmer 5s ease-in-out infinite;
}
@keyframes ftrShimmer {
  0%   { left: -50%; }
  60%  { left: 100%; }
  100% { left: 100%; }
}

/* Subtle dot-grid background */
.ftr-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(245, 166, 35, 0.08) 1px, transparent 1.4px);
  background-size: 36px 36px;
  background-position: 0 0;
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}
/* Atmospheric glows */
.ftr-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}
.ftr-bg-glow-a {
  top: -180px; left: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(245,166,35,0.30) 0%, transparent 65%);
}
.ftr-bg-glow-b {
  bottom: -200px; right: -150px;
  width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(180, 80, 200, 0.18) 0%, transparent 65%);
}

.ftr-container {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: 80px 48px 0;
}

/* === ROW 1: Statement + newsletter === */
.ftr-row-statement {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
  padding-bottom: 56px;
}
.ftr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(245, 166, 35, 0.85);
  margin-bottom: 18px;
}
.ftr-eyebrow-dot {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #f5a524;
  box-shadow: 0 0 12px rgba(245, 166, 35, 0.7);
  animation: ftrPulseDot 2.4s ease-in-out infinite;
}
@keyframes ftrPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}
.ftr-statement-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.22;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.005em;
  margin: 0;
}
.ftr-statement-title em {
  font-style: italic;
  color: #f5a524;
  font-weight: 400;
}

/* Newsletter */
.ftr-newsletter {
  display: flex;
  flex-direction: column;
}
.ftr-news-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 14px;
}
.ftr-news-input-wrap {
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(245, 166, 35, 0.25);
  border-radius: 100px;
  padding: 4px;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.ftr-news-input-wrap:focus-within {
  border-color: rgba(245, 166, 35, 0.7);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.10);
}
.ftr-news-input-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  padding: 12px 18px;
  letter-spacing: 0.01em;
}
.ftr-news-input-wrap input::placeholder { color: rgba(255, 255, 255, 0.35); }
.ftr-news-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #f5a524 0%, #d97a08 100%);
  color: #01002A;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), box-shadow 0.3s ease;
  box-shadow: 0 4px 14px rgba(245, 166, 35, 0.35);
}
.ftr-news-btn svg { width: 18px; height: 18px; }
.ftr-news-btn:hover {
  transform: translateX(4px) scale(1.06);
  box-shadow: 0 8px 22px rgba(245, 166, 35, 0.55);
}
.ftr-news-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.32);
  margin-top: 10px;
  font-style: italic;
}

/* Elegant separator */
.ftr-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 0 56px;
}
.ftr-sep-dash {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,166,35,0.25), transparent);
  max-width: 280px;
}
.ftr-sep-mark {
  font-size: 14px;
  color: rgba(245,166,35,0.7);
}

/* === ROW 2: Brand block + 3 link columns === */
.ftr-row-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 56px;
}

.ftr-brand-block { }
.ftr-logo {
  height: 64px;
  width: auto;
  margin-bottom: 22px;
  filter: brightness(1.05) drop-shadow(0 2px 12px rgba(245,166,35,0.18));
}
.ftr-brand-desc {
  font-size: 14px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.45);
  max-width: 360px;
  margin: 0 0 28px;
}
.ftr-contact-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ftr-contact {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13.5px;
  line-height: 1.55;
  cursor: pointer;
  transition: color 0.25s ease, transform 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.ftr-contact-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(245, 166, 35, 0.08);
  border: 1px solid rgba(245, 166, 35, 0.18);
  color: #f5a524;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.ftr-contact-icon svg { width: 14px; height: 14px; }
.ftr-contact em { font-style: normal; color: rgba(255,255,255,0.32); font-size: 12px; }
.ftr-contact:hover { color: #fff; transform: translateX(4px); }
.ftr-contact:hover .ftr-contact-icon {
  background: rgba(245, 166, 35, 0.20);
  border-color: rgba(245, 166, 35, 0.50);
  transform: scale(1.06);
}

/* Link columns */
.ftr-col {
}
.ftr-col-title {
  position: relative;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 24px;
  padding-bottom: 10px;
}
.ftr-col-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, #f5a524, transparent);
  transition: width 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.ftr-col:hover .ftr-col-title::after { width: 56px; }

.ftr-list {
  list-style: none;
  margin: 0; padding: 0;
}
.ftr-list li {
  margin-bottom: 12px;
}
.ftr-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.50);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.25s ease, gap 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  position: relative;
}
.ftr-link-arrow {
  display: inline-block;
  width: 0;
  overflow: hidden;
  color: #f5a524;
  font-weight: 600;
  transition: width 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), opacity 0.25s ease;
  opacity: 0;
  font-size: 14px;
}
.ftr-list a:hover { color: #fff; gap: 10px; }
.ftr-list a:hover .ftr-link-arrow { width: 14px; opacity: 1; }

/* Trust badges row */
.ftr-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 32px;
}
.ftr-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.ftr-badge:hover {
  background: rgba(245, 166, 35, 0.08);
  border-color: rgba(245, 166, 35, 0.35);
  transform: translateY(-2px);
}
.ftr-badge-icon {
  font-size: 16px;
  filter: grayscale(0);
}
.ftr-badge-txt {
  display: inline-flex;
  flex-direction: column;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.55);
}
.ftr-badge-txt strong {
  color: #f5a524;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Bottom row */
.ftr-bottom {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 1fr;
  align-items: center;
  gap: 32px;
}
.ftr-copy {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.40);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  letter-spacing: 0.01em;
}
.ftr-copy-mark {
  display: inline-flex;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(245,166,35,0.12);
  align-items: center; justify-content: center;
  color: #f5a524;
  font-size: 11px;
  font-weight: 700;
  margin-right: 4px;
}
.ftr-copy-sep {
  color: rgba(245, 166, 35, 0.5);
}
.ftr-legal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.ftr-legal a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s ease;
  position: relative;
}
.ftr-legal a:hover { color: #f5a524; }
.ftr-legal a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 0;
  height: 1px;
  background: #f5a524;
  transition: width 0.35s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.ftr-legal a:hover::after { width: 100%; }
.ftr-legal-sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(245, 166, 35, 0.4);
}

/* Social */
.ftr-social {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.ftr-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
    box-shadow 0.4s ease;
}
.ftr-social-btn svg {
  width: 16px; height: 16px;
}
.ftr-social-btn:hover {
  background: linear-gradient(135deg, #f5a524, #d97a08);
  border-color: rgba(245, 166, 35, 0.8);
  color: #01002A;
  transform: translateY(-3px) rotate(-6deg);
  box-shadow: 0 10px 24px rgba(245, 166, 35, 0.35);
}

/* Footer responsive */
@media (max-width: 1080px) {
  .ftr-row-statement { grid-template-columns: 1fr; gap: 36px; }
  .ftr-row-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; }
  .ftr-bottom { grid-template-columns: 1fr; text-align: center; gap: 18px; }
  .ftr-legal { justify-content: center; }
  .ftr-social { justify-content: center; }
  .ftr-copy { justify-content: center; }
}
@media (max-width: 800px) {
  .ftr-container { padding: 64px 24px 0; }
  .ftr-row-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .ftr-brand-block { grid-column: 1 / -1; text-align: center; }
  .ftr-brand-desc { margin-left: auto; margin-right: auto; }
  .ftr-contact-stack { align-items: center; }
}
@media (max-width: 480px) {
  .ftr-container { padding: 56px 18px 0; }
  .ftr-row-grid { grid-template-columns: 1fr; }
  .ftr-news-input-wrap input { font-size: 13px; padding: 10px 14px; }
  .ftr-statement-title { font-size: 24px; }
  .ftr-badges { gap: 8px; padding: 24px 0; }
  .ftr-badge { padding: 8px 14px; }
}

/* ================================================================
   ▼ ▼ ▼  ABOUT: Story Stage V2 (Our Story visual)  ▼ ▼ ▼
   Replaces the right-side mango image. Layered atmospheric stage:
   parallax hills + concentric rings + central monogram + orbiting
   cubes + droplets + rotating quotes.
   ================================================================ */
.ah-right-v2 {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background: linear-gradient(135deg, #0d0612 0%, #1f1208 50%, #2a1810 100%);
}
.story-stage-v2 {
  position: relative;
  width: 100%;
  min-height: 88vh;
  overflow: hidden;
  isolation: isolate;
}

/* Atmospheric glows */
.ssv2-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.ssv2-bg-glow-1 {
  top: 12%; left: 10%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(245,166,35,0.30) 0%, transparent 70%);
  animation: ssv2BgPulse 9s ease-in-out infinite;
}
.ssv2-bg-glow-2 {
  bottom: 8%; right: 5%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(58,107,53,0.25) 0%, transparent 70%);
  animation: ssv2BgPulse 11s ease-in-out infinite reverse;
}
@keyframes ssv2BgPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.12); }
}

/* Distant orchard hills */
.ssv2-hills {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  width: 100%;
  height: 60%;
  pointer-events: none;
  opacity: 0.85;
}

/* Concentric rotating rings */
.ssv2-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(245, 166, 35, 0.15);
  pointer-events: none;
}
.ssv2-ring-1 {
  width: 70%;
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  border-color: rgba(245,166,35,0.20);
  animation: ssv2RingSpin 60s linear infinite;
}
.ssv2-ring-2 {
  width: 52%;
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  border-color: rgba(245,166,35,0.30);
  border-style: dashed;
  animation: ssv2RingSpin 45s linear infinite reverse;
}
.ssv2-ring-3 {
  width: 38%;
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  border-color: rgba(245,166,35,0.45);
  animation: ssv2RingSpin 32s linear infinite;
}
@keyframes ssv2RingSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.ssv2-ring-marks {
  position: absolute;
  top: 50%; left: 50%;
  width: 70%;
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 0,    #f5a524 1.5px, transparent 2px),
    radial-gradient(circle at 50% 100%, #f5a524 1.5px, transparent 2px),
    radial-gradient(circle at 0    50%, #f5a524 1.5px, transparent 2px),
    radial-gradient(circle at 100% 50%, #f5a524 1.5px, transparent 2px);
  pointer-events: none;
  animation: ssv2RingSpin 60s linear infinite;
  filter: drop-shadow(0 0 6px rgba(245,166,35,0.6));
}

/* Soft halo behind compass */
.ssv2-halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 30%;
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(245,166,35,0.45) 0%, rgba(245,166,35,0.18) 40%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  animation: ssv2BgPulse 6s ease-in-out infinite;
}

/* Central compass */
.ssv2-center {
  position: absolute;
  top: 50%; left: 50%;
  width: 30%;
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.55));
  animation: ssv2CenterFloat 6s ease-in-out infinite;
}

/* Central mango photo — replaces the SVG orange icon */
.ssv2-mango-photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ssv2-mango-img-frame {
  position: relative;
  width: 82%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 2px rgba(245,166,35,0.35),
    0 0 0 6px rgba(245,166,35,0.08),
    0 16px 48px rgba(0,0,0,0.45),
    0 0 60px rgba(245,166,35,0.18);
  background: transparent;
}
.ssv2-mango-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  transition: transform 0.8s ease;
}
.ssv2-center:hover .ssv2-mango-photo { transform: scale(1.06); }
.ssv2-mango-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 35% 25%, rgba(255,248,210,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.ssv2-mango-est {
  margin-top: 14px;
  font-family: 'Playfair Display', serif;
  font-size: 11px;
  font-style: italic;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ssv2-frame-only { pointer-events: none; }

@keyframes ssv2CenterFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, -54%); }
}
.ssv2-compass {
  width: 100%;
  height: 100%;
}
.ssv2-frame-rotor {
  transform-origin: 100px 100px;
  animation: ssv2RingSpin 40s linear infinite;
}

/* Orbiting decorative items */
.ssv2-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
}
.ssv2-orbit-1 { animation: ssv2OrbitA 14s linear infinite; }
.ssv2-orbit-2 { animation: ssv2OrbitB 19s linear infinite reverse; }
.ssv2-orbit-3 { animation: ssv2OrbitA 24s linear infinite reverse; }
.ssv2-orbit-4 { animation: ssv2OrbitB 17s linear infinite; }
@keyframes ssv2OrbitA {
  from { transform: rotate(0deg)   translateX(160px) rotate(0deg);   }
  to   { transform: rotate(360deg) translateX(160px) rotate(-360deg);}
}
@keyframes ssv2OrbitB {
  from { transform: rotate(0deg)   translateX(220px) rotate(0deg);   }
  to   { transform: rotate(360deg) translateX(220px) rotate(-360deg);}
}
.ssv2-orbit-cube {
  display: block;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #ffd873 0%, #f5a524 50%, #c46a12 100%);
  border-radius: 4px;
  box-shadow:
    inset -3px -3px 6px rgba(0,0,0,0.3),
    inset 2px 2px 4px rgba(255,240,180,0.4),
    0 6px 14px rgba(0,0,0,0.25),
    0 0 16px rgba(245,166,35,0.4);
  transform: translate(-50%, -50%) rotate(20deg);
}
.ssv2-orbit-cube.small { width: 14px; height: 14px; }
.ssv2-orbit-cube.tiny  { width: 10px; height: 10px; opacity: 0.85; }
.ssv2-orbit-leaf {
  display: block;
  width: 32px; height: 22px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* Sparkles */
.ssv2-spark {
  position: absolute;
  width: 4px; height: 4px;
  background: radial-gradient(circle, #fff8d6 0%, #ffd873 50%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 220, 120, 0.7);
  animation: ssv2SparkFloat 8s ease-in-out infinite;
  pointer-events: none;
}
.ssv2-spark.s1 { top: 18%; left: 20%; animation-delay: 0s; }
.ssv2-spark.s2 { top: 28%; right: 18%; animation-delay: 1.5s; }
.ssv2-spark.s3 { bottom: 30%; left: 12%; animation-delay: 3s; }
.ssv2-spark.s4 { top: 40%; left: 70%; animation-delay: 0.5s; }
.ssv2-spark.s5 { bottom: 18%; right: 28%; animation-delay: 2.2s; }
.ssv2-spark.s6 { top: 65%; left: 32%; animation-delay: 4.4s; }
@keyframes ssv2SparkFloat {
  0%, 100% { transform: translate(0, 0) scale(0.6); opacity: 0.4; }
  50%      { transform: translate(8px, -16px) scale(1.2); opacity: 1; }
}

/* Falling juice droplets */
.ssv2-droplet {
  position: absolute;
  top: -8%;
  width: 6px; height: 10px;
  background: radial-gradient(ellipse at 35% 30%, #fff8d6 0%, #ffd873 35%, #f5a524 75%, #b85300 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  filter: drop-shadow(0 4px 6px rgba(245, 100, 0, 0.4));
  opacity: 0;
  animation: ssv2DropletFall 6s ease-in infinite;
}
.ssv2-droplet-1 { left: 22%; animation-delay: 0s; }
.ssv2-droplet-2 { left: 58%; animation-delay: 2s; width: 4px; height: 7px; }
.ssv2-droplet-3 { left: 78%; animation-delay: 4s; }
@keyframes ssv2DropletFall {
  0%   { transform: translateY(0)    scale(0.4); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(120vh) scale(0.6); opacity: 0; }
}

/* Rotating storyteller quote */
.ssv2-quote-stage {
  position: absolute;
  bottom: 34px;
  left: 24px; right: 24px;
  display: grid;
  height: 92px;
  pointer-events: none;
  z-index: 4;
}
.ssv2-quote-card {
  grid-area: 1 / 1;
  padding: 18px 22px;
  background: rgba(28, 18, 8, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 2px solid #f5a524;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  position: relative;
}
.ssv2-quote-card.is-active {
  opacity: 1;
  transform: translateY(0);
}
.ssv2-quote-mark {
  position: absolute;
  top: -6px; left: 14px;
  font-family: 'Playfair Display', serif;
  font-size: 38px;
  color: #f5a524;
  line-height: 1;
}
.ssv2-quote-text {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-style: italic;
  color: #ffffff;
  line-height: 1.5;
  margin: 0 0 6px;
  padding-left: 6px;
}
.ssv2-quote-attr {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 166, 35, 0.85);
  padding-left: 6px;
}

/* Vignette */
.ssv2-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 60% at 50% 50%, transparent 50%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
  z-index: 3;
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ssv2-ring-1, .ssv2-ring-2, .ssv2-ring-3, .ssv2-ring-marks,
  .ssv2-frame-rotor, .ssv2-orbit-1, .ssv2-orbit-2, .ssv2-orbit-3, .ssv2-orbit-4,
  .ssv2-spark, .ssv2-droplet, .ssv2-bg-glow-1, .ssv2-bg-glow-2,
  .ssv2-halo, .ssv2-center { animation: none !important; }
}

/* ================================================================
   ▼ ▼ ▼  TIMELINE V2: premium ambient chrome  ▼ ▼ ▼
   ================================================================ */
.timeline-section-v2 .tlv2-bg-grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(140, 80, 20, 0.08) 1px, transparent 1.4px);
  background-size: 32px 32px;
  opacity: 0.6;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.timeline-section-v2 .tlv2-bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 45%, rgba(80, 40, 10, 0.18) 100%);
  pointer-events: none;
  z-index: 0;
}
.tlv2-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.tlv2-bg-glow-l {
  top: 8%; left: -8%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.40) 0%, transparent 70%);
  animation: tlv2GlowFloat 12s ease-in-out infinite;
}
.tlv2-bg-glow-r {
  bottom: 8%; right: -8%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(58, 107, 53, 0.30) 0%, transparent 70%);
  animation: tlv2GlowFloat 14s ease-in-out infinite reverse;
}
@keyframes tlv2GlowFloat {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  50%      { transform: translate(20px, -16px); opacity: 0.65; }
}

/* Decorative side era marks */
.tlv2-era-mark {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: rgba(245, 166, 35, 0.6);
  pointer-events: none;
  z-index: 1;
}
.tlv2-era-mark-tl { top: 28px; left: 28px; }
.tlv2-era-mark-br { bottom: 28px; right: 28px; }
.tlv2-era-mark-line {
  display: block;
  width: 36px;
  height: 1px;
  background: rgba(245, 166, 35, 0.6);
}

/* Premium heading */
.tlv2-head {
  text-align: center;
  margin-bottom: 36px;
}
.tlv2-head-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.tlv2-head-eyebrow-dash {
  display: block;
  width: 38px; height: 1px;
  background: rgba(245, 166, 35, 0.6);
}
.tlv2-head-eyebrow-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--saffron, #c5951a);
}
.tlv2-head-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--text-dark, #1a1308);
  margin: 0 0 16px;
}
.tlv2-head-title em {
  font-style: italic;
  color: var(--saffron, #c5951a);
  font-weight: 400;
}
.tlv2-head-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-mid, #4a3a24);
  max-width: 600px;
  margin: 0 auto;
  font-style: italic;
}

@media (max-width: 700px) {
  .tlv2-era-mark { display: none; }
  .tlv2-head-tagline { font-size: 14px; }
}

/* ================================================================
   ▼ ▼ ▼  LEGACY VISUAL: Four Generations crest  ▼ ▼ ▼
   Replaces the right-side image in the gen-section. A composition
   of interlocking rings, central monogram, generation milestones,
   value cards, and an anniversary stamp.
   ================================================================ */
.legacy-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 6/5;
  min-height: 560px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(245, 166, 35, 0.18) 0%, transparent 60%),
    linear-gradient(160deg, #fdf3df 0%, #f3deb1 50%, #e7c894 100%);
  box-shadow:
    0 20px 50px rgba(140, 80, 10, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.45);
  isolation: isolate;
  padding: 36px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* Background atmospherics */
.lv-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.lv-bg-glow-warm {
  top: -15%; right: -15%;
  width: 60%; aspect-ratio: 1/1;
  background: radial-gradient(circle, rgba(255, 200, 90, 0.55) 0%, transparent 70%);
  animation: lvGlowFloat 10s ease-in-out infinite;
}
.lv-bg-glow-deep {
  bottom: -15%; left: -10%;
  width: 50%; aspect-ratio: 1/1;
  background: radial-gradient(circle, rgba(180, 100, 30, 0.30) 0%, transparent 70%);
  animation: lvGlowFloat 13s ease-in-out infinite reverse;
}
@keyframes lvGlowFloat {
  0%, 100% { transform: translate(0,0); opacity: 0.6; }
  50%      { transform: translate(-12px, 18px); opacity: 1; }
}
.lv-bg-grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(140, 80, 20, 0.10) 1px, transparent 1.4px);
  background-size: 24px 24px;
  opacity: 0.45;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* Crest container */
.lv-crest {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1/1;
  z-index: 2;
}

/* Outer SVG laurel */
.lv-laurel {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 28px rgba(140, 80, 10, 0.30));
}
.lv-ring-outer { transform-origin: 180px 180px; animation: lvRingSpin 50s linear infinite; }
.lv-ring-mid   { transform-origin: 180px 180px; animation: lvRingSpin 36s linear infinite reverse; }
@keyframes lvRingSpin {
  to { transform: rotate(360deg); }
}

/* Generation dots pulsing in sequence */
.lv-gen-dot {
  filter: drop-shadow(0 0 6px rgba(245,166,35,0.7));
  animation: lvGenDotPulse 8s ease-in-out infinite;
}
.lv-gen-dot-1 { animation-delay: 0s; }
.lv-gen-dot-2 { animation-delay: 2s; }
.lv-gen-dot-3 { animation-delay: 4s; }
.lv-gen-dot-4 { animation-delay: 6s; }
@keyframes lvGenDotPulse {
  0%, 75%, 100% { opacity: 0.6; r: 6; }
  10%, 35%      { opacity: 1; r: 9; }
}

/* Generation labels at cardinal points */
.lv-gen-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'DM Sans', sans-serif;
  pointer-events: none;
  animation: lvLabelFade 0.8s ease 0.4s both;
}
@keyframes lvLabelFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lv-gen-label-num {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 700;
  color: #6b3a08;
  line-height: 1;
}
.lv-gen-label-yr {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(80, 40, 10, 0.65);
  margin-top: 2px;
}
/* Position each label at the cardinal points (matching the dots) */
.lv-gen-label-1 { top: 6%;     left: 50%; transform: translateX(-50%); }
.lv-gen-label-2 { top: 50%;    right: 4%; transform: translateY(-50%); align-items: flex-end; }
.lv-gen-label-3 { bottom: 6%;  left: 50%; transform: translateX(-50%); }
.lv-gen-label-4 { top: 50%;    left: 4%;  transform: translateY(-50%); align-items: flex-start; }

/* Orbiting decorative cubes around the crest */
.lv-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 3;
}
.lv-orbit-1 { animation: lvOrbitA 18s linear infinite; }
.lv-orbit-2 { animation: lvOrbitB 24s linear infinite reverse; }
.lv-orbit-3 { animation: lvOrbitC 30s linear infinite; }
@keyframes lvOrbitA {
  from { transform: rotate(0deg) translateX(195px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(195px) rotate(-360deg); }
}
@keyframes lvOrbitB {
  from { transform: rotate(60deg) translateX(210px) rotate(-60deg); }
  to   { transform: rotate(420deg) translateX(210px) rotate(-420deg); }
}
@keyframes lvOrbitC {
  from { transform: rotate(180deg) translateX(180px) rotate(-180deg); }
  to   { transform: rotate(540deg) translateX(180px) rotate(-540deg); }
}
.lv-orbit-cube {
  display: block;
  width: 16px; height: 16px;
  background: linear-gradient(135deg, #ffd873 0%, #f5a524 50%, #c46a12 100%);
  border-radius: 4px;
  box-shadow:
    inset -2px -2px 4px rgba(0,0,0,0.25),
    inset 2px 2px 3px rgba(255,240,180,0.4),
    0 4px 10px rgba(140,80,10,0.25);
  transform: translate(-50%, -50%) rotate(20deg);
}
.lv-orbit-cube.small { width: 12px; height: 12px; }
.lv-orbit-cube.tiny  { width: 8px;  height: 8px; opacity: 0.85; }

/* Sparkles */
.lv-spark {
  position: absolute;
  width: 4px; height: 4px;
  background: radial-gradient(circle, #fff8d6 0%, #ffd873 50%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 220, 120, 0.7);
  animation: lvSparkFloat 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
.lv-spark.s1 { top: 18%; left: 18%; animation-delay: 0s; }
.lv-spark.s2 { top: 22%; right: 16%; animation-delay: 1.7s; }
.lv-spark.s3 { bottom: 24%; left: 14%; animation-delay: 3.3s; }
.lv-spark.s4 { bottom: 18%; right: 20%; animation-delay: 5s; }
@keyframes lvSparkFloat {
  0%, 100% { transform: translate(0, 0) scale(0.6); opacity: 0.5; }
  50%      { transform: translate(6px, -10px) scale(1.2); opacity: 1; }
}

/* Bottom values band */
.lv-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 380px;
  position: relative;
  z-index: 2;
  margin-top: 16px;
}
.lv-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 8px;
  background: rgba(255, 250, 235, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 166, 35, 0.18);
  border-radius: 14px;
  transition: transform 0.45s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), background 0.3s ease, border-color 0.3s ease;
}
.lv-value:hover {
  transform: translateY(-4px);
  background: rgba(255, 250, 235, 0.85);
  border-color: rgba(245, 166, 35, 0.45);
}
.lv-value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #fff3a8 0%, #f5a524 100%);
  color: #6b3a08;
  border-radius: 8px;
  margin-bottom: 8px;
  box-shadow: 0 4px 10px rgba(245, 166, 35, 0.30);
}
.lv-value-icon svg { width: 16px; height: 16px; }
.lv-value strong {
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  color: #1a1308;
  font-weight: 700;
  margin-bottom: 2px;
}
.lv-value span {
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px;
  color: rgba(80, 40, 10, 0.65);
  letter-spacing: 0.04em;
}

/* Anniversary stamp (top-right corner) */
.lv-stamp {
  position: absolute;
  top: 22px; right: 22px;
  z-index: 4;
  width: 86px; height: 86px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5a524 0%, #d97a08 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 8px 20px rgba(184, 83, 0, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 0 0 4px rgba(255, 248, 220, 0.55);
  animation: lvStampFloat 4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes lvStampFloat {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-4px) rotate(-2deg); }
}
.lv-stamp-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
}
.lv-stamp-num {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}
.lv-stamp-num sup { font-size: 14px; }
.lv-stamp-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 1px;
}
.lv-stamp-sub {
  font-size: 7.5px;
  font-style: italic;
  letter-spacing: 0.08em;
  opacity: 0.85;
  margin-top: 1px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lv-ring-outer, .lv-ring-mid, .lv-gen-dot, .lv-orbit-1, .lv-orbit-2, .lv-orbit-3,
  .lv-spark, .lv-bg-glow-warm, .lv-bg-glow-deep, .lv-stamp { animation: none !important; }
}

/* Legacy visual responsive */
@media (max-width: 700px) {
  .legacy-visual { aspect-ratio: auto; min-height: 480px; padding: 28px 20px 22px; }
  .lv-crest { max-width: 280px; }
  .lv-stamp { width: 70px; height: 70px; top: 18px; right: 18px; }
  .lv-stamp-num { font-size: 22px; }
  .lv-values { max-width: 320px; }
  .lv-value { padding: 12px 6px; }
  .lv-value strong { font-size: 13px; }
  .lv-value span { font-size: 10px; }
}


/* ================================================================
   ▼ ▼ ▼  BEFORE & AFTER: Alphonso comparison  ▼ ▼ ▼
   Premium split-screen with draggable divider, contrasting sides,
   floating particles, scroll reveals, and quality checkpoints.
   ================================================================ */
.ba-section {
  position: relative;
  padding: 80px 24px 80px;
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(255, 220, 150, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 75% 85%, rgba(245, 166, 35, 0.18) 0%, transparent 65%),
    linear-gradient(180deg, #faf3e4 0%, #f5e9cf 55%, #f7eed7 100%);
  overflow: hidden;
  isolation: isolate;
}
.ba-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
}
.ba-bg-glow-l {
  top: -10%; left: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.45) 0%, transparent 70%);
  animation: baBgFloat 14s ease-in-out infinite;
}
.ba-bg-glow-r {
  bottom: -10%; right: -8%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(140, 80, 200, 0.18) 0%, transparent 70%);
  animation: baBgFloat 17s ease-in-out infinite reverse;
}
@keyframes baBgFloat {
  0%, 100% { transform: translate(0, 0); opacity: 0.7; }
  50%      { transform: translate(20px, -16px); opacity: 1; }
}
.ba-bg-grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(140, 80, 20, 0.10) 1px, transparent 1.4px);
  background-size: 28px 28px;
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
.ba-bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 50%, rgba(120, 70, 20, 0.10) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Floating ambient particles */
.ba-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8d6 0%, #ffd873 50%, transparent 100%);
  box-shadow: 0 0 12px rgba(255, 220, 120, 0.7);
  animation: baParticleDrift 11s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
  opacity: 0.65;
}
.ba-p1 { top: 18%;  left: 8%;  animation-delay: 0s; }
.ba-p2 { top: 28%;  right: 12%; animation-delay: 2.5s; width: 4px; height: 4px; }
.ba-p3 { bottom: 24%; left: 14%; animation-delay: 4.8s; }
.ba-p4 { top: 60%;  right: 18%; animation-delay: 1.4s; width: 5px; height: 5px; }
.ba-p5 { bottom: 18%; right: 28%; animation-delay: 6.2s; }
.ba-p6 { top: 45%;  left: 22%; animation-delay: 3.7s; width: 4px; height: 4px; }
@keyframes baParticleDrift {
  0%, 100% { transform: translate(0, 0) scale(0.6); opacity: 0.3; }
  50%      { transform: translate(12px, -22px) scale(1.2); opacity: 0.85; }
}

.ba-container {
  position: relative;
  z-index: 5;
  max-width: 1280px;
  margin: 0 auto;
}

/* Header */
.ba-header { text-align: center; margin-bottom: 56px; padding: 0 16px; }
.ba-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.ba-eyebrow-line {
  display: block;
  width: 42px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 100, 20, 0.55));
}
.ba-eyebrow .ba-eyebrow-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(184, 100, 20, 0.55));
}
.ba-eyebrow-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--saffron, #c5951a);
}
.ba-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--text-dark, #1a1308);
  margin: 0 0 18px;
}
.ba-title em {
  font-style: italic;
  color: var(--saffron, #c5951a);
  font-weight: 400;
}
.ba-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-mid, #4a3a24);
  max-width: 640px;
  margin: 0 auto;
}

/* Side label tags above the stage */
.ba-side-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}
.ba-side-label {
  display: flex;
  flex-direction: column;
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(255, 250, 235, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 166, 35, 0.20);
  box-shadow: 0 8px 26px rgba(140, 80, 10, 0.08);
  transform: translateY(0);
  transition: transform 0.45s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), box-shadow 0.45s ease, border-color 0.3s ease;
}
.ba-side-label-l {
  border-left: 3px solid var(--saffron, #c5951a);
}
.ba-side-label-r {
  border-left: 3px solid rgba(140, 110, 50, 0.4);
  background: rgba(245, 240, 225, 0.7);
  text-align: right;
  align-items: flex-end;
}
.ba-side-label:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(140, 80, 10, 0.14);
  border-color: rgba(245, 166, 35, 0.50);
}
.ba-side-label-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  background: linear-gradient(135deg, #f5a524 0%, #d97a08 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  margin-bottom: 8px;
  width: fit-content;
  box-shadow: 0 4px 12px rgba(245, 166, 35, 0.30);
}
.ba-side-label-tag-alt {
  background: rgba(140, 110, 50, 0.18);
  color: #6a5024;
  box-shadow: none;
}
.ba-side-label-name {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark, #1a1308);
  line-height: 1.2;
  margin-bottom: 4px;
}
.ba-side-label-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--text-light, #6a5a44);
  letter-spacing: 0.04em;
  font-style: italic;
}

/* Stage */
.ba-stage {
  position: relative;
  margin-bottom: 56px;
}
.ba-split-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 20/9;
  min-height: 460px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 30px 60px rgba(140, 80, 10, 0.20),
    0 6px 18px rgba(140, 80, 10, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  isolation: isolate;
  user-select: none;
  cursor: ew-resize;
  touch-action: none;
  --split: 50%;
}

/* Each side fills the stage; the "other" side is layered above and clipped */
.ba-side {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ba-side-premium { z-index: 1; }
.ba-side-other {
  z-index: 2;
  /* Clip to the right side of the divider position */
  clip-path: polygon(var(--split) 0, 100% 0, 100% 100%, var(--split) 100%);
}

/* Side backgrounds: premium = warm saffron gradient, other = muted cool */
.ba-side-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ba-side-bg-premium {
  background-image: url("../../assets/images/original-mango.jpeg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.ba-side-bg-other {
  background-image: url("../../assets/images/other-regions.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Inner radial glow per side */
.ba-glow {
  /* Hidden: let the new images speak for themselves */
  display: none;
}

/* The mango image sits on each side, centered horizontally with a slight offset */
.ba-mango-img {
  /* Hidden: the new background images already contain the mango composition */
  display: none;
}
.ba-mango-img-premium {
  transform: translate(-50%, -50%);
  filter:
    drop-shadow(0 30px 50px rgba(0, 0, 0, 0.30))
    saturate(1.4)
    contrast(1.08)
    brightness(1.04);
}
.ba-mango-img-other {
  transform: translate(-50%, -50%);
  filter:
    drop-shadow(0 30px 50px rgba(0, 0, 0, 0.30))
    saturate(0.42)
    contrast(0.92)
    brightness(1.05)
    sepia(0.18);
  opacity: 0.96;
}
@keyframes baMangoFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-12px); }
}
.ba-split-wrap:hover .ba-mango-img-premium {
  transform: translate(-50%, -50%) scale(1.04) rotate(-2deg);
}
.ba-split-wrap:hover .ba-mango-img-other {
  transform: translate(-50%, -50%) scale(1.04) rotate(2deg);
}

/* Splash droplets on premium side */
.ba-splash {
  /* Hidden: the new images present a clean composition without floating droplets */
  display: none;
}

/* Quality checkpoints (pill style on each side) */
.ba-checks {
  /* Hidden: the new images already contain labelled callouts (Dark Orange Colour, etc.) */
  display: none;
}
.ba-checks-l { left: 4%; align-items: flex-start; }
.ba-checks-r { right: 4%; align-items: flex-end; }
.ba-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(255, 250, 235, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #4a2a08;
  border: 1px solid rgba(184, 100, 20, 0.18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-30px);
  animation: baCheckSlideL 0.7s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) forwards;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ba-checks-r .ba-check {
  transform: translateX(30px);
  animation-name: baCheckSlideR;
  background: rgba(245, 240, 225, 0.92);
  color: #5a4a24;
  border-color: rgba(140, 110, 50, 0.20);
}
.ba-check:hover {
  transform: translateX(0) scale(1.04);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
@keyframes baCheckSlideL {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes baCheckSlideR {
  to { opacity: 1; transform: translateX(0); }
}
/* Stagger checkpoints once section is in view */
.ba-section.in-view .ba-checks-l .ba-check:nth-child(1) { animation-delay: 0.1s; }
.ba-section.in-view .ba-checks-l .ba-check:nth-child(2) { animation-delay: 0.2s; }
.ba-section.in-view .ba-checks-l .ba-check:nth-child(3) { animation-delay: 0.3s; }
.ba-section.in-view .ba-checks-l .ba-check:nth-child(4) { animation-delay: 0.4s; }
.ba-section.in-view .ba-checks-l .ba-check:nth-child(5) { animation-delay: 0.5s; }
.ba-section.in-view .ba-checks-l .ba-check:nth-child(6) { animation-delay: 0.6s; }
.ba-section.in-view .ba-checks-r .ba-check:nth-child(1) { animation-delay: 0.2s; }
.ba-section.in-view .ba-checks-r .ba-check:nth-child(2) { animation-delay: 0.3s; }
.ba-section.in-view .ba-checks-r .ba-check:nth-child(3) { animation-delay: 0.4s; }
.ba-section.in-view .ba-checks-r .ba-check:nth-child(4) { animation-delay: 0.5s; }
.ba-section.in-view .ba-checks-r .ba-check:nth-child(5) { animation-delay: 0.6s; }
.ba-section.in-view .ba-checks-r .ba-check:nth-child(6) { animation-delay: 0.7s; }
/* Pre-view state: hidden */
.ba-section:not(.in-view) .ba-check { animation: none; opacity: 0; }

.ba-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5a524, #d97a08);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex: none;
}
.ba-check-x .ba-check-icon {
  background: rgba(140, 110, 50, 0.30);
  color: #5a4a24;
}

/* Vertical drag divider */
.ba-divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split);
  width: 0;
  z-index: 8;
  cursor: ew-resize;
  outline: none;
  touch-action: none;
}
.ba-divider:focus-visible .ba-divider-handle {
  box-shadow:
    0 0 0 4px rgba(245, 166, 35, 0.45),
    0 12px 30px rgba(0, 0, 0, 0.30);
}
.ba-divider-line {
  position: absolute;
  top: 0; bottom: 0; left: -2px;
  width: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,1) 50%, rgba(255,255,255,0.85));
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.7),
    0 0 28px rgba(245, 166, 35, 0.4);
}
.ba-divider-handle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 3px solid rgba(245, 166, 35, 0.6);
  background: #fff;
  color: #1a1308;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.8);
  transition: transform 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), box-shadow 0.3s ease, border-color 0.3s ease;
  animation: baHandlePulse 2.4s ease-in-out infinite;
}
.ba-divider-handle:hover {
  transform: translate(-50%, -50%) scale(1.10);
  border-color: #f5a524;
  box-shadow:
    0 16px 40px rgba(245, 166, 35, 0.40),
    inset 0 1px 0 rgba(255,255,255,0.8);
}
.ba-divider-handle:active {
  transform: translate(-50%, -50%) scale(1.04);
  cursor: grabbing;
}
.ba-divider-handle svg { width: 22px; height: 22px; }
@keyframes baHandlePulse {
  0%, 100% { box-shadow: 0 12px 30px rgba(0,0,0,0.25), 0 0 0 0 rgba(245,166,35,0.55), inset 0 1px 0 rgba(255,255,255,0.8); }
  50%      { box-shadow: 0 12px 30px rgba(0,0,0,0.25), 0 0 0 16px rgba(245,166,35,0), inset 0 1px 0 rgba(255,255,255,0.8); }
}
.ba-divider.is-dragging .ba-divider-handle {
  animation: none;
  transform: translate(-50%, -50%) scale(1.10);
  border-color: #f5a524;
  cursor: grabbing;
}

.ba-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text-light, #6a5a44);
  font-style: italic;
}
.ba-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(245, 166, 35, 0.15);
  color: var(--saffron, #c5951a);
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  animation: baHintBob 1.6s ease-in-out infinite;
}
@keyframes baHintBob {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* Bottom stat strip */
.ba-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 32px 28px;
  background: rgba(255, 250, 235, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 166, 35, 0.18);
  border-radius: 18px;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 12px 32px rgba(140, 80, 10, 0.10);
}
.ba-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 140px;
}
.ba-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}
.ba-stat-premium .ba-stat-num {
  background: linear-gradient(135deg, #f5a524, #b85300);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ba-stat-other .ba-stat-num {
  color: #6a5024;
}
.ba-stat-lbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-mid, #4a3a24);
  line-height: 1.5;
}
.ba-stat-vs {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--saffron, #c5951a);
  font-weight: 400;
}

/* Responsive */
@media (max-width: 900px) {
  .ba-section { padding: 80px 18px 90px; }
  .ba-split-wrap { aspect-ratio: 4/3; min-height: 380px; }
  .ba-checks { width: 46%; gap: 6px; }
  .ba-check { font-size: 11.5px; padding: 6px 11px; gap: 7px; }
  .ba-check-icon { width: 18px; height: 18px; font-size: 10px; }
  .ba-mango-img { width: 70%; }
  .ba-side-labels { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ba-side-label { padding: 12px 14px; }
  .ba-side-label-name { font-size: 14px; }
  .ba-side-label-sub { font-size: 11px; }
  .ba-side-label-tag { font-size: 9px; padding: 3px 9px; }
}
@media (max-width: 600px) {
  .ba-split-wrap { aspect-ratio: 6 / 2; min-height: 200px; }
  .ba-checks { top: 6%; width: 44%; gap: 5px; }
  .ba-check { font-size: 10.5px; padding: 5px 9px; gap: 5px; }
  .ba-check-icon { width: 16px; height: 16px; font-size: 9px; }
  .ba-mango-img { width: 78%; }
  .ba-divider-handle { width: 48px; height: 48px; }
  .ba-divider-handle svg { width: 18px; height: 18px; }
  .ba-stats { flex-direction: column; gap: 16px; padding: 22px 16px; }
  .ba-stat-vs { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ba-particle, .ba-bg-glow-l, .ba-bg-glow-r, .ba-glow-premium, .ba-glow-other,
  .ba-mango-img, .ba-splash, .ba-divider-handle, .ba-hint-icon { animation: none !important; }
  .ba-check { opacity: 1; transform: translateX(0); animation: none !important; }
}


/* ================================================================
   ▼ ▼ ▼  CINEMATIC VIDEO SECTION  ▼ ▼ ▼
   Scroll-driven scale-in, IntersectionObserver autoplay, premium
   glass overlay, rounded corners, ambient backdrop.
   ================================================================ */
.cv-section {
  position: relative;
  padding: 80px 24px 80px;
  background:
    radial-gradient(ellipse 70% 50% at 20% 25%, rgba(28, 18, 8, 0.94) 0%, rgba(28, 18, 8, 1) 60%),
    linear-gradient(180deg, #1a1308 0%, #0f0a04 100%);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.cv-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.cv-bg-glow-l {
  top: -10%; left: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.32) 0%, transparent 70%);
  animation: cvGlowFloat 13s ease-in-out infinite;
}
.cv-bg-glow-r {
  bottom: -10%; right: -8%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(180, 100, 30, 0.22) 0%, transparent 70%);
  animation: cvGlowFloat 16s ease-in-out infinite reverse;
}
@keyframes cvGlowFloat {
  0%, 100% { transform: translate(0, 0); opacity: 0.55; }
  50%      { transform: translate(20px, -16px); opacity: 0.95; }
}
.cv-bg-grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(245, 166, 35, 0.06) 1px, transparent 1.4px);
  background-size: 32px 32px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

.cv-container {
  position: relative;
  z-index: 5;
  max-width: 1240px;
  margin: 0 auto;
}

/* Header */
.cv-header { text-align: center; margin-bottom: 56px; padding: 0 16px; }
.cv-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.cv-eyebrow-line {
  display: block;
  width: 38px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 166, 35, 0.7));
}
.cv-eyebrow .cv-eyebrow-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(245, 166, 35, 0.7));
}
.cv-eyebrow-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 166, 35, 0.85);
}
.cv-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 18px;
}
.cv-title em {
  font-style: italic;
  color: #f5a524;
  font-weight: 400;
}
.cv-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  max-width: 600px;
  margin: 0 auto;
  font-style: italic;
}

/* The video stage: has its own scaling driven by JS */
.cv-stage {
  position: relative;
  margin: 0 auto;
}
.cv-stage-halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 110%; height: 110%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(245, 166, 35, 0.22) 0%, transparent 60%);
  filter: blur(50px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  z-index: 0;
}
.cv-section.cv-in-view .cv-stage-halo {
  opacity: 1;
}

/* Video frame: scale-in on scroll */
.cv-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 20/9;
  border-radius: 24px;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.55),
    0 12px 30px rgba(245, 166, 35, 0.10),
    inset 0 0 0 1px rgba(245, 166, 35, 0.18);
  transform: scale(var(--cv-scale, 0.86)) translateY(var(--cv-y, 24px));
  transition: transform 0.16s linear;
  z-index: 2;
}
.cv-section.cv-in-view .cv-frame {
  /* Once fully entered, lock to the in-view scale via JS-driven --cv-scale */
}

/* Decorative gold corner accents */
.cv-corner {
  position: absolute;
  width: 36px; height: 36px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease 0.3s;
}
.cv-section.cv-in-view .cv-corner { opacity: 1; }
.cv-corner::before, .cv-corner::after {
  content: "";
  position: absolute;
  background: #f5a524;
  box-shadow: 0 0 8px rgba(245, 166, 35, 0.6);
}
.cv-corner-tl { top: 14px; left: 14px; }
.cv-corner-tl::before { top: 0; left: 0; width: 14px; height: 2px; }
.cv-corner-tl::after  { top: 0; left: 0; width: 2px; height: 14px; }
.cv-corner-tr { top: 14px; right: 14px; }
.cv-corner-tr::before { top: 0; right: 0; width: 14px; height: 2px; }
.cv-corner-tr::after  { top: 0; right: 0; width: 2px; height: 14px; }
.cv-corner-bl { bottom: 14px; left: 14px; }
.cv-corner-bl::before { bottom: 0; left: 0; width: 14px; height: 2px; }
.cv-corner-bl::after  { bottom: 0; left: 0; width: 2px; height: 14px; }
.cv-corner-br { bottom: 14px; right: 14px; }
.cv-corner-br::before { bottom: 0; right: 0; width: 14px; height: 2px; }
.cv-corner-br::after  { bottom: 0; right: 0; width: 2px; height: 14px; }

/* Video element */
.cv-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  display: block;
}

/* Pre-play overlay (only visible when video isn't playing) */
.cv-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.65) 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.cv-frame.is-playing .cv-overlay {
  opacity: 0;
  visibility: hidden;
}
.cv-play-btn {
  position: relative;
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 2px solid rgba(245, 166, 35, 0.7);
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.22), rgba(245, 166, 35, 0.10));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), box-shadow 0.4s ease;
  box-shadow: 0 12px 30px rgba(245, 166, 35, 0.30);
}
.cv-play-btn:hover {
  transform: scale(1.10);
  box-shadow: 0 18px 44px rgba(245, 166, 35, 0.50);
}
.cv-play-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  margin-left: 4px;
  color: #f5a524;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
.cv-play-icon svg { width: 100%; height: 100%; }
.cv-play-ripple {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(245, 166, 35, 0.45);
  animation: cvRipple 2.4s ease-out infinite;
}
.cv-play-ripple-2 { animation-delay: 1.2s; }
@keyframes cvRipple {
  0%   { transform: scale(0.95); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}
.cv-overlay-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 8px;
}
.cv-overlay-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
}
.cv-overlay-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(245, 166, 35, 0.85);
  margin-top: 6px;
}

/* Bottom controls strip: fades in only when video is playing */
.cv-controls {
  position: absolute;
  left: 18px; right: 18px; bottom: 18px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  pointer-events: none;
}
.cv-frame.is-playing:hover .cv-controls,
.cv-frame.is-playing.is-controls-hover .cv-controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cv-ctrl {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(28, 18, 8, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.3s ease;
}
.cv-ctrl:hover {
  background: rgba(245, 166, 35, 0.30);
  border-color: rgba(245, 166, 35, 0.7);
  transform: scale(1.08);
}
.cv-ctrl svg { width: 14px; height: 14px; }
/* Default: show pause icon (because we're playing); hide play icon */
.cv-ctrl-play .cv-ctrl-play-ic { display: none; }
.cv-frame.is-paused .cv-ctrl-play .cv-ctrl-pause-ic { display: none; }
.cv-frame.is-paused .cv-ctrl-play .cv-ctrl-play-ic { display: block; }
/* Default: muted, so show muted icon */
.cv-ctrl-mute .cv-ctrl-unmute-ic { display: none; }
.cv-frame.is-unmuted .cv-ctrl-mute .cv-ctrl-mute-ic { display: none; }
.cv-frame.is-unmuted .cv-ctrl-mute .cv-ctrl-unmute-ic { display: block; }

/* Progress bar */
.cv-progress {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  overflow: hidden;
  margin-left: 6px;
}
.cv-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f5a524, #ffe18a);
  border-radius: 100px;
  transition: width 0.18s linear;
}

/* Caption strip below the video */
.cv-stage-caption {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}
.cv-caption-icon { font-size: 14px; }

/* Bottom stat strip */
.cv-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 56px;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(245, 166, 35, 0.18);
  border-radius: 18px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.cv-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 0;
}
.cv-strip-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, #ffe18a, #f5a524);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 6px;
}
.cv-strip-num sup { font-size: 0.55em; }
.cv-strip-lbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}
.cv-strip-sep {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, transparent, rgba(245,166,35,0.35), transparent);
  flex: none;
}

/* Responsive */
@media (max-width: 900px) {
  .cv-section { padding: 80px 18px 90px; }
  .cv-frame { border-radius: 18px; }
  .cv-play-btn { width: 76px; height: 76px; }
  .cv-play-icon { width: 28px; height: 28px; }
  .cv-strip { flex-wrap: wrap; gap: 16px; padding: 20px 16px; }
  .cv-strip-sep { display: none; }
  .cv-strip-item { min-width: 40%; }
  .cv-corner { width: 26px; height: 26px; }
}
@media (max-width: 480px) {
  .cv-frame { border-radius: 14px; }
  .cv-play-btn { width: 64px; height: 64px; }
  .cv-play-icon { width: 22px; height: 22px; }
  .cv-controls { left: 12px; right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cv-bg-glow, .cv-play-ripple, .cv-frame { animation: none !important; transition: none !important; }
  .cv-frame { transform: none !important; }
}

#heroBg-farm {
  background-image: url('../../assets/images/bg-extra-1.webp');
  background-size: cover;
  background-position: center 40%;
}
#heroBg-factory {
  background-image: url('../../assets/images/bg-extra-2.webp');
  background-size: cover;
  background-position: center 45%;
}


/* ── Video hero slide ──────────────────────────────────────────────────── */
.hero-slide[data-theme="video"] { --slide-accent: #ffd873; --slide-glow: rgba(245,166,35,0.35); --slide-headline-gradient: linear-gradient(135deg,#fff8d6 0%,#ffd873 30%,#f5a524 70%,#ffb84a 100%); --slide-btn-gradient: linear-gradient(135deg,#ffd873,#f5a524); --slide-btn-shadow: rgba(180,90,10,0.45); }

.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
  /* Subtle scale-in on load */
  animation: videoBgScale 1.2s ease forwards;
}
@keyframes videoBgScale {
  from { transform: scale(1.05); opacity: 0.7; }
  to   { transform: scale(1);    opacity: 1;   }
}
.hero-slide[data-theme="video"] .hero-slide-overlay {
  background: linear-gradient(
    110deg,
    rgba(6,10,20,0.78) 0%,
    rgba(10,15,28,0.58) 40%,
    rgba(14,20,36,0.22) 72%,
    transparent 100%
  );
  z-index: 1;
}
.hero-slide[data-theme="video"] .hero-slide-glow {
  background: radial-gradient(ellipse at 15% 70%, rgba(245,166,35,0.18) 0%, transparent 60%);
  z-index: 1;
}
.hero-slide[data-theme="video"] .hero-slide-content {
  position: relative;
  z-index: 2;
}

/* ── Hero slider: mobile/tablet responsive hardening ───────────────────── */

/* Ensure the slider and all slides fill the viewport height consistently */
.hero-slider {
  position: relative;
  width: 100%;
  /* Use svh for mobile browsers where 100vh includes the URL bar */
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
}
/* Fallback for browsers without svh */
@supports not (height: 1svh) {
  .hero-slider { height: 100vh; }
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-slide-bg,
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content positioning: push text left on wide, centre on narrow */
.hero-slide-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 8% 0 7%;
  z-index: 2;
}
.hero-slide-text {
  max-width: min(680px, 90vw);
}

/* Tablet (≤ 900px) */
@media (max-width: 900px) {
  .hero-slide-text { max-width: min(680px, 90vw); }
  .hero-slide-content { padding: 0 6% 0 6%; }
  .hero-slide-text h1 { font-size: clamp(2rem, 5.5vw, 3.2rem); }
  .hero-slide-text p  { font-size: clamp(0.85rem, 2vw, 1rem); }
}

/* Mobile (≤ 600px) */
@media (max-width: 600px) {
  .hero-slider { min-height: 520px; }
  .hero-slide-content {
    align-items: flex-end;
    padding: 0 5% 80px 5%;
  }
  .hero-slide-text { max-width: min(680px, 90vw); }
  .hero-slide-text h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); line-height: 1.15; }
  .hero-slide-text p  { font-size: 0.88rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hero-slide-badge { font-size: 0.72rem; }
  .hero-dots { bottom: 18px; gap: 8px; padding: 6px 12px; }
  .hero-counter { right: 14px; bottom: 22px; font-size: 0.75rem; }
  .hero-nav-btn { width: 36px; height: 36px; }
}

/* Very small (≤ 380px) */
@media (max-width: 380px) {
  .hero-slide-text h1 { font-size: 1.6rem; }
  .hero-slide-btns { flex-direction: column; gap: 10px; }
  .hero-slide-btns .btn-primary,
  .hero-slide-btns .btn-ghost-light { width: 100%; text-align: center; justify-content: center; }
}


/* === Story Stage V2: Three Circular Photo Satellites === */
.ssv2-photo-satellites {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.ssv2-sat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  animation: ssv2SatFloat 7s ease-in-out infinite;
}
.ssv2-sat:nth-child(2) { animation-delay: -2.3s; animation-duration: 8.5s; }
.ssv2-sat:nth-child(3) { animation-delay: -4.7s; animation-duration: 9.2s; }

@keyframes ssv2SatFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* Position: top-left quadrant */
.ssv2-sat-1 {
  top: 10%;
  left: 20%;
}
/* Position: bottom-left quadrant */
.ssv2-sat-2 {
  bottom: 22%;
  left: 10%;
}
/* Position: bottom-right quadrant */
.ssv2-sat-3 {
  bottom: 20%;
  right: 8%;
}

.ssv2-sat-ring {
  position: relative;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #ffd873, #f5a524, #a85d09, #ffd873);
  box-shadow:
    0 0 0 1px rgba(245,166,35,0.15),
    0 8px 32px rgba(0,0,0,0.55),
    0 0 32px rgba(245,166,35,0.28);
  animation: ssv2SatRingRotate 20s linear infinite;
}
.ssv2-sat:nth-child(2) .ssv2-sat-ring { animation-direction: reverse; }

@keyframes ssv2SatRingRotate {
  to { box-shadow:
    0 0 0 1px rgba(245,166,35,0.15),
    0 8px 32px rgba(0,0,0,0.55),
    0 0 24px rgba(245,166,35,0.22); }
}

.ssv2-sat-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #1a1008;
  position: relative;
}
.ssv2-sat-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s ease;
}
.ssv2-sat:hover .ssv2-sat-inner img {
  transform: scale(1.08);
}
.ssv2-sat-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 25%, rgba(255,248,210,0.10) 0%, transparent 65%);
  pointer-events: none;
}

.ssv2-sat-label {
  font-family: 'DM Sans', 'Geist', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,166,35,0.88);
  text-align: center;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  white-space: nowrap;
}

/* Connector lines from satellites toward center */
.ssv2-sat-connector {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  background: linear-gradient(to right, rgba(245,166,35,0.0), rgba(245,166,35,0.25), rgba(245,166,35,0.0));
  pointer-events: none;
  z-index: 3;
}

/* Responsive: scale down on tablet/mobile */
@media (max-width: 900px) {
  .ssv2-sat-ring { width: 112px; height: 112px; }
  .ssv2-sat-label { font-size: 8px; }
  .ssv2-sat-1 { top: 5%; left: 4%; }
  .ssv2-sat-2 { bottom: 16%; left: 4%; }
  .ssv2-sat-3 { bottom: 13%; right: 4%; }
}
@media (max-width: 600px) {
  .ssv2-sat-ring { width: 86px; height: 86px; }
  .ssv2-sat-1 { top: 4%; left: 30%; }
  .ssv2-sat-2 { bottom: 40%; left: 2%; }
  .ssv2-sat-3 { bottom: 50%; right: 2%; }
}
/* === End Story Stage V2 Photo Satellites === */


/* ================================================================
   DESAI ANAND SECTION  —  LIGHT EDITION
   ================================================================ */
.anand-section {
  position: relative;
  overflow: hidden;
  background: var(--cream, #FAF6EF);
  padding: 80px 0 0;
}

/* Layered warm tinted background (very subtle on cream) */
.anand-bg-flame {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 8%  15%, rgba(244,129,32,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 92% 85%, rgba(255,210,32,0.07) 0%, transparent 52%),
    radial-gradient(ellipse 50% 35% at 50% 50%, rgba(244,129,32,0.04) 0%, transparent 60%);
}
.anand-bg-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.anand-bg-orbs {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  overflow: hidden;
}
.anand-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: anandOrbFloat 14s ease-in-out infinite;
}
.anand-orb-1 {
  width: 560px; height: 560px;
  top: -160px; left: -120px;
  background: radial-gradient(circle, rgba(244,129,32,0.10) 0%, transparent 70%);
  animation-delay: 0s;
}
.anand-orb-2 {
  width: 420px; height: 420px;
  bottom: 40px; right: -100px;
  background: radial-gradient(circle, rgba(255,210,32,0.09) 0%, transparent 70%);
  animation-delay: -5s;
}
.anand-orb-3 {
  width: 300px; height: 300px;
  top: 42%; left: 42%;
  background: radial-gradient(circle, rgba(228,91,14,0.06) 0%, transparent 70%);
  animation-delay: -10s;
}
@keyframes anandOrbFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-26px) scale(1.04); }
}

/* Container */
.anand-inner {
  position: relative; z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

/* ── Header area ── */
.anand-header {
  text-align: center;
  margin-bottom: 68px;
}
.anand-eyebrow {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-bottom: 32px;
}
.anand-eyebrow-line {
  flex: 1; max-width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228,91,14,0.35), transparent);
}
.anand-eyebrow-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--saffron, #E8720C);
}
/* Header: use colorful Logo_01 on light background */
.anand-logo-mark {
  display: block;
  margin: 0 auto 24px;
  width: min(300px, 85vw);
  height: auto;
  filter: drop-shadow(0 3px 18px rgba(228,91,14,0.15));
  transition: filter 0.4s, transform 0.4s;
}
.anand-logo-mark:hover {
  filter: drop-shadow(0 6px 28px rgba(228,91,14,0.28));
  transform: scale(1.012);
}
.anand-tagline {
  font-family: 'Fraunces', 'Playfair Display', serif;
  font-size: clamp(1rem, 2vw, 1.18rem);
  color: var(--text-mid, #4A3520);
  font-style: italic;
  letter-spacing: 0.04em;
  margin-top: 10px;
  opacity: 0.80;
}

/* ── Main content grid ── */
.anand-content-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 20px;
}

/* ── Left: copy ── */
.anand-copy {}
.anand-brand-lockup { margin-bottom: 32px; }

/* Copy logo — same colorful logo, slightly smaller */
.anand-logo-color {
  width: min(250px, 90%);
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 12px rgba(228,91,14,0.12));
  transition: filter 0.4s, transform 0.4s;
}
.anand-logo-color:hover {
  filter: drop-shadow(0 4px 22px rgba(228,91,14,0.26));
  transform: translateY(-2px);
}
.anand-headline {
  font-family: 'Fraunces', 'Playfair Display', serif;
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  font-weight: 700;
  color: var(--text-dark, #1C1208);
  line-height: 1.18;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.anand-headline em {
  font-style: normal;
  background: linear-gradient(135deg, #e8720c 0%, #f48120 45%, #ffd220 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: anandGradShift 4s linear infinite;
}
@keyframes anandGradShift {
  0%   { background-position: 0%   center; }
  100% { background-position: 200% center; }
}
.anand-body-text {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.94rem, 1.2vw, 1.04rem);
  color: var(--text-mid, #4A3520);
  line-height: 1.82;
  margin-bottom: 28px;
  max-width: 440px;
}
.anand-pillars {
  display: flex; flex-direction: column;
  gap: 16px; margin-bottom: 38px;
}
.anand-pillar {
  display: flex; gap: 14px; align-items: flex-start;
}
.anand-pillar-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(228,91,14,0.10), rgba(255,210,32,0.07));
  border: 1px solid rgba(228,91,14,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.anand-pillar:hover .anand-pillar-icon {
  background: linear-gradient(135deg, rgba(228,91,14,0.18), rgba(255,210,32,0.12));
  border-color: rgba(228,91,14,0.32);
  transform: scale(1.08);
}
.anand-pillar-text strong {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem; font-weight: 600;
  color: var(--text-dark, #1C1208);
  letter-spacing: 0.01em; margin-bottom: 2px;
}
.anand-pillar-text span {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.83rem;
  color: var(--text-light, #8B6F47);
  line-height: 1.5;
}

/* CTA strip */
.anand-cta-strip {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.anand-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f48120 0%, #e8720c 100%);
  color: #fff; text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border: none; cursor: pointer;
  box-shadow: 0 5px 20px rgba(228,91,14,0.28), 0 1px 3px rgba(0,0,0,0.12);
  transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
}
.anand-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(228,91,14,0.40), 0 2px 6px rgba(0,0,0,0.14);
  background: linear-gradient(135deg, #f99030 0%, #f48120 100%);
}
.anand-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border-radius: 6px;
  border: 1.5px solid rgba(228,91,14,0.30);
  color: var(--saffron, #E8720C); text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em;
  background: transparent; cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.anand-btn-ghost:hover {
  border-color: rgba(228,91,14,0.60);
  color: #d06008;
  background: rgba(228,91,14,0.05);
}

/* ── Right: product visual ── */
.anand-visual { position: relative; }
.anand-product-stage {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,244,210,0.90) 0%, rgba(255,228,168,0.70) 100%);
  border: 1px solid rgba(228,91,14,0.15);
  box-shadow:
    0 28px 72px rgba(92,61,30,0.18),
    0 4px 20px rgba(92,61,30,0.10),
    inset 0 1px 0 rgba(255,255,255,0.85);
  transition: box-shadow 0.4s, transform 0.4s;
}
.anand-product-stage:hover {
  box-shadow:
    0 36px 88px rgba(92,61,30,0.18),
    0 6px 24px rgba(92,61,30,0.10),
    inset 0 1px 0 rgba(255,255,255,0.90),
    0 0 0 1px rgba(228,91,14,0.12);
  transform: translateY(-6px) scale(1.005);
}
.anand-product-img {
  width: 100%; height: auto; padding: 0px; display: block;
  border-radius: 14px;
  transform-origin: center bottom;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.anand-product-stage:hover .anand-product-img { transform: scale(1.03); }

/* Corner glow flares (lighter on cream) */
.anand-product-flare {
  position: absolute; pointer-events: none;
  border-radius: 50%; filter: blur(48px);
}
.anand-product-flare-tl {
  top: -24px; left: -24px; width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,210,32,0.22) 0%, transparent 70%);
}
.anand-product-flare-br {
  bottom: -16px; right: -16px; width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(228,91,14,0.18) 0%, transparent 70%);
}

/* GI badge */
.anand-gi-badge {
  position: absolute; top: 16px; right: 16px;
  background: linear-gradient(135deg, #ffd220, #f48120);
  border-radius: 50%;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 7px; font-weight: 800;
  color: #1a0800; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.25;
  box-shadow: 0 4px 14px rgba(228,91,14,0.38);
  animation: anandBadgePulse 3s ease-in-out infinite;
}
@keyframes anandBadgePulse {
  0%,100% { box-shadow: 0 4px 14px rgba(228,91,14,0.38); }
  50%      { box-shadow: 0 4px 26px rgba(228,91,14,0.62), 0 0 0 5px rgba(228,91,14,0.09); }
}

/* Floating stat chips — light glass */
.anand-stat-chip {
  position: absolute;
  background: rgba(255,251,244,0.88);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(228,91,14,0.14);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 6px 20px rgba(92,61,30,0.12);
  transition: transform 0.35s, box-shadow 0.35s;
}
.anand-stat-chip:hover {
  box-shadow: 0 10px 30px rgba(92,61,30,0.18);
}
.anand-stat-chip-1 {
  bottom: 28px; left: -24px;
  animation: anandChipFloat 6s ease-in-out infinite;
  animation-delay: 0s;
}
.anand-stat-chip-2 {
  top: 50px; right: -24px;
  animation: anandChipFloat 6s ease-in-out infinite;
  animation-delay: -3s;
}
@keyframes anandChipFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.anand-stat-chip:hover {
  animation-play-state: paused;
  transform: scale(1.04) translateY(0);
}
.anand-chip-icon  { font-size: 22px; line-height: 1; }
.anand-chip-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--text-light, #8B6F47); margin-bottom: 2px;
}
.anand-chip-value {
  font-family: 'Fraunces', 'Playfair Display', serif;
  font-size: 1rem; font-weight: 700;
  color: var(--text-dark, #1C1208); line-height: 1;
}

/* ── Heritage strip ── */
.anand-heritage-strip {
  position: relative;
  border-top: 1px solid rgba(228,91,14,0.10);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(228,91,14,0.08);
  overflow: hidden;
}
.anand-hstat {
  background: var(--cream, #FAF6EF);
  text-align: center;
  padding: 36px 20px 44px;
  position: relative;
  transition: background 0.3s;
}
.anand-hstat:hover { background: rgba(228,91,14,0.04); }
.anand-hstat-value {
  font-family: 'Fraunces', 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #e8720c 0%, #f48120 50%, #ffd220 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block; margin-bottom: 8px;
}
.anand-hstat-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--text-mid, #4A3520);
}
.anand-hstat-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.80rem;
  color: var(--text-light, #8B6F47);
  margin-top: 4px;
}

/* ── Seamless wave into next section ── */
.anand-wave {
  position: relative; z-index: 2;
  line-height: 0; margin-top: -2px;
}
.anand-wave svg { display: block; width: 100%; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
  .anand-section { padding-top: 72px; }
  .anand-content-grid { grid-template-columns: 1fr; gap: 48px; }
  .anand-visual { order: -1; }
  .anand-stat-chip-1 { left: 0; bottom: -16px; }
  .anand-stat-chip-2 { right: 0; top: -16px; }
  .anand-heritage-strip { grid-template-columns: repeat(2, 1fr); }
  .anand-logo-mark { width: min(360px, 82vw); }
}
@media (max-width: 560px) {
  .anand-section { padding-top: 56px; }
  .anand-heritage-strip { grid-template-columns: repeat(2, 1fr); }
  .anand-stat-chip { display: none; }
  .anand-gi-badge { width: 44px; height: 44px; font-size: 6px; top: 10px; right: 10px; }
  .anand-logo-mark { width: 88vw; }
  .anand-logo-color { width: 82%; }
  .anand-cta-strip { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   FLAVOUR JOURNEY — RECIPE CARDS UPGRADE
   ============================================================ */

/* Head: sub-line and "All Recipes" button */
.fj-head-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--cream);
  opacity: 0.62;
  margin-top: 1.1rem;
  max-width: 280px;
}
.fj-head-all {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 1.6rem;
  padding: 10px 20px;
  border: 1.5px solid rgba(245,166,35,0.45);
  border-radius: 100px;
  background: transparent;
  color: var(--mango);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s;
}
.fj-head-all svg { width: 16px; height: 11px; flex-shrink: 0; transition: transform 0.25s; }
.fj-head-all:hover {
  background: rgba(245,166,35,0.12);
  border-color: var(--mango);
  transform: translateX(3px);
}
.fj-head-all:hover svg { transform: translateX(4px); }

/* ── Recipe card base (inherits .fj-card dimensions/radius/shadow) ── */
.fj-rcard {
  cursor: pointer;
  /* override old static bg CSS which set bg on data-j; image + overlay handles it */
  isolation: isolate;
  transition:
    box-shadow 0.4s cubic-bezier(0.22,1,0.36,1),
    transform   0.4s cubic-bezier(0.22,1,0.36,1);
}
.fj-rcard:hover,
.fj-rcard:focus-visible {
  outline: none;
  box-shadow:
    0 44px 90px -16px rgba(0,0,0,0.55),
    0 0 0 2px rgba(245,166,35,0.35);
  transform: translateY(-8px) scale(1.012);
}
.fj-rcard:focus-visible { outline: 2px solid var(--mango); outline-offset: 4px; }

/* Recipe photo — fills the card; .fj-card-bg keeps its scale(1.15) so the
   GSAP xPercent parallax never exposes an edge. */
.fj-rcard-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fj-rcard:hover .fj-rcard-photo { transform: scale(1.05); }

/* Bottom overlay (dark gradient for text legibility) */
.fj-rcard-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 22%,
    rgba(18,8,0,0.14) 48%,
    rgba(18,8,0,0.72) 72%,
    rgba(18,8,0,0.92) 100%
  );
  transition: opacity 0.45s ease;
}
.fj-rcard:hover .fj-rcard-overlay {
  opacity: 0.88;
}

/* Shimmer sweep */
.fj-rcard-shimmer {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(
    118deg,
    transparent 28%,
    rgba(255,255,255,0.09) 50%,
    transparent 72%
  );
  background-size: 220% 100%;
  background-position: 220% 0;
  opacity: 0;
  border-radius: inherit;
  transition: background-position 0s, opacity 0.2s;
}
.fj-rcard:hover .fj-rcard-shimmer {
  opacity: 1;
  background-position: -220% 0;
  transition: background-position 0.85s ease, opacity 0.15s;
}

/* Inner content override */
.fj-rcard-inner {
  padding-bottom: 0.2rem;
}

/* Meta row: category / time / difficulty */
.fj-rcard-meta {
  /* supplied as `margin-bottom: 0.6rem 9.6px` — margin-bottom takes one value,
     so that declaration would have been dropped entirely. Valid form below. */
  display: none; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: 0.6rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,240,200,0.70);
  line-height: 1;
}
.fj-rcard-sep { opacity: 0.4; }
.fj-rcard-cat  { color: var(--mango); font-weight: 600; }
.fj-rcard-time { }
.fj-rcard-diff { font-weight: 600; }
.fj-diff-easy   { color: #9bdb7a; }
.fj-diff-medium { color: #ffd870; }
.fj-diff-hard   { color: #ff9b7a; }

/* CTA button */
.fj-rcard-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 1.2rem;
  padding: 11px 22px;
  border-radius: 100px;
  border: 1.5px solid rgba(245,166,35,0.50);
  background: rgba(245,166,35,0.08);
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.80rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  cursor: pointer;
  transition:
    background   0.25s,
    border-color 0.25s,
    color        0.25s,
    transform    0.25s;
}
.fj-rcard-cta-arrow {
  display: flex; align-items: center;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
.fj-rcard-cta-arrow svg { width: 17px; height: 17px; }
.fj-rcard:hover .fj-rcard-cta,
.fj-rcard-cta:hover {
  background: rgba(245,166,35,0.22);
  border-color: var(--mango);
  color: #fff;
  transform: translateY(-1px);
}
.fj-rcard:hover .fj-rcard-cta-arrow { transform: translateX(5px); }

/* Override old per-card bg rules — now set inline on .fj-card-bg */
/* card-bg hosts the recipe photo. Two specificity notes:
   - .fj-card.fj-rcard (0,3,0) is needed to beat .fj-card[data-j="N"] (0,3,0)
     defined earlier; class-based so it holds for any number of cards.
   - transition:none is essential — .fj-card-bg carried `transition: transform
     1.2s`, and GSAP rewrites that transform on every scrub frame, so the browser
     eased toward each new value and the parallax lagged ~1.2s behind the scroll. */
.fj-card.fj-rcard .fj-card-bg {
  /* warm placeholder behind the photo: the [data-j] gradients only covered
     cards 0-4, so cards 5-8 would have shown flat dark until their lazy
     image resolved. The photo is opaque and covers this once loaded. */
  background: linear-gradient(150deg, #7a3a0a 0%, #3a2010 60%, #1C1208 100%);
  transition: none;
}

/* Mobile override */
@media (max-width: 700px) {
  .fj-head-sub { display: none; }
  .fj-head-all { margin-top: 1rem; }
  .fj-rcard-cta { padding: 9px 18px; font-size: 0.76rem; }
}

/* ── Scroll & page-transition resets ──────────────────────────────────────── */
html {
  scroll-behavior: auto !important; /* Lenis owns smooth scroll; prevent native interference */
}
/* Prevent iOS bounce/rubberbanding from carrying scroll position across page swaps */
html, body {
  overscroll-behavior: none;
}


/* Flash applied to a Recipes-page card when reached from the Flavour Journey
   and the recipe has no detail modal. */
@keyframes rcardFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
  25%      { box-shadow: 0 0 0 4px rgba(245,166,35,0.55), 0 18px 50px rgba(245,166,35,0.22); }
  70%      { box-shadow: 0 0 0 4px rgba(245,166,35,0.35), 0 18px 50px rgba(245,166,35,0.16); }
}
.rcard-flash { animation: rcardFlash 1.6s ease-in-out; border-color: var(--mango); }
@media (prefers-reduced-motion: reduce) { .rcard-flash { animation: none; } }

/* ============== RECIPE PHOTOGRAPHY ==============
   Real food photos (877x620) replace the floating product-cutout treatment.
   Scoped to .is-photo so the remaining product-tile cards keep their original look. */

.rcard-img.is-photo {
  display: block;
  height: 190px;
  padding: 0;
  overflow: hidden;
  background: var(--mango-light, #FFF3D6);   /* shows while the photo decodes */
}

.rcard-img.is-photo .rcard-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;                 /* drop-shadow belongs to cutouts, not photos */
  transform: none;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.rcard:hover .rcard-img.is-photo .rcard-photo {
  transform: scale(1.06);       /* contained zoom; .rcard already has overflow:hidden */
}

/* difficulty pill needs to stay legible over photography */
.rcard-img.is-photo .rdiff {
  box-shadow: 0 2px 10px rgba(30, 20, 8, 0.28);
  backdrop-filter: saturate(1.2);
}

/* ---- modal hero ---- */
.rm-hero.is-photo .rm-photo {
  width: 260px;
  height: 180px;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  filter: none;
  box-shadow: 0 14px 34px rgba(30, 20, 8, 0.30);
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .rcard-img.is-photo { height: 200px; }
}

@media (max-width: 700px) {
  .rm-hero.is-photo {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 24px;
  }
  .rm-hero.is-photo .rm-photo { width: 100%; height: 190px; }
}

@media (max-width: 600px) {
  .rec-g3 { grid-template-columns: 1fr; }   /* 2-up is too tight for photo cards */
  .rcard-img.is-photo { height: 220px; }
}

@media (max-width: 380px) {
  .rcard-img.is-photo { height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .rcard-img.is-photo .rcard-photo,
  .rcard:hover .rcard-img.is-photo .rcard-photo {
    transition: none;
    transform: none;
  }
}


/* ---- featured recipe block ---- */
.frec-img.is-photo {
  display: block;
  padding: 0;
  overflow: hidden;
}

.frec-img.is-photo .frec-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  object-position: center;
  filter: none;
  animation: none;              /* canFloat belongs to the cutout treatment */
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.frec:hover .frec-img.is-photo .frec-photo { transform: scale(1.04); }

/* badge must stay readable over photography */
.frec-img.is-photo .frec-badge {
  box-shadow: 0 4px 16px rgba(30, 20, 8, 0.28);
}

@media (max-width: 900px) {
  .frec-img.is-photo .frec-photo { min-height: 320px; }
}

@media (max-width: 600px) {
  .frec-img.is-photo .frec-photo { min-height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .frec-img.is-photo .frec-photo,
  .frec:hover .frec-img.is-photo .frec-photo { transition: none; transform: none; }
}


/* Products hero sits on light orange, unlike the other six dark heroes.
   Scoped so .hero-badge elsewhere is untouched. */
.prod-hero .hero-badge {
  background: rgba(70, 32, 2, 0.26);
  border-color: rgba(255, 255, 255, 0.34);
}
.prod-hero .hero-badge span { color: #fff; }
.prod-hero .hero-badge-dot { background: #FFE9A8; }

/* ============== PRODUCTS HERO BANNER ==============
   Right-hand visual for #products .prod-hero (2-col grid, collapses at 900px).
   The artwork is a genuinely transparent cutout, so it sits straight on the
   #df750a hero with a golden bloom behind it — no panel, no clipping.

   Three separate transform layers, deliberately: the entrance, the hover and
   the scroll parallax each own one element. Composing them onto a single
   element would mean putting a transition on the same property the parallax
   rewrites every frame, which makes the parallax lag behind the scroll. */

.ph-visual {
  position: relative;
  z-index: 2;
  justify-self: end;
  width: 100%;
  max-width: 780px;
}

/* --- golden bloom behind the tins --- */
.ph-visual-glow {
  position: absolute;
  inset: 2% -10% -14% -10%;
  z-index: 0;
  background:
    radial-gradient(ellipse 56% 52% at 50% 52%, rgba(255,226,140,0.60), transparent 70%),
    radial-gradient(ellipse 74% 64% at 50% 56%, rgba(255,168,44,0.34), transparent 76%);
  filter: blur(44px);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 1.2s ease 0.2s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.ph-visual.visible .ph-visual-glow { opacity: 1; transform: scale(1); }
.ph-visual:hover  .ph-visual-glow { opacity: 1; transform: scale(1.07); }

/* --- layer 1: entrance --- */
.ph-visual-frame {
  position: relative;
  z-index: 1;
  transform: translateY(38px) scale(0.97);
  opacity: 0;
  transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1),
              opacity   0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.ph-visual.visible .ph-visual-frame { transform: translateY(0) scale(1); opacity: 1; }

/* the .reveal base nudges Y too — neutralise it, the frame handles motion */
.ph-visual.reveal { opacity: 1; transform: none; transition: none; }
.ph-visual.reveal.visible { opacity: 1; transform: none; }

/* --- layer 2: hover float + tilt --- */
.ph-visual-float {
  transform: translateY(0) scale(1) rotate(0deg);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.ph-visual:hover .ph-visual-float {
  transform: translateY(-12px) scale(1.028) rotate(-0.8deg);
}

/* --- layer 3: scroll parallax (no transition — see note above) --- */
.ph-banner {
  display: block;
  width: 100%;
  height: auto;                       /* natural aspect, never cropped */
  transform: translate3d(0, var(--ph-shift, 0px), 0);
  will-change: transform;
  filter: drop-shadow(0 60px 52px rgba(255, 255, 0, 0.62));
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .ph-visual { justify-self: center; max-width: 660px; margin-top: 6px; }
  .ph-visual-glow { inset: 4% -6% -12% -6%; filter: blur(36px); }
}

@media (max-width: 600px) {
  .ph-visual { max-width: 100%; }
  .ph-visual-glow { inset: 6% -2% -10% -2%; filter: blur(26px); }
  /* scaled-down form of the new base glow; this rule still overrides the base */
  .ph-banner { filter: drop-shadow(0 30px 30px rgba(255, 255, 0, 0.52)); }
}

/* touch devices get no hover state; drop the will-change so the compositor
   is not holding a layer for an interaction that cannot happen */
@media (hover: none) {
  .ph-visual-float { will-change: auto; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-visual-frame,
  .ph-visual.visible .ph-visual-frame { transition: none; transform: none; opacity: 1; }
  .ph-visual-float,
  .ph-visual:hover .ph-visual-float { transition: none; transform: none; }
  .ph-visual-glow,
  .ph-visual:hover .ph-visual-glow { transition: none; transform: scale(1); }
  .ph-banner { transform: none; }
}


/* ============== MOBILE CAROUSEL CONTROLS (shared) ==============
   Used by the Flavour Journey and Customer Stories. Hidden by default and
   switched on inside each section's own mobile media query. Light theme by
   default; add .is-dark on dark sections. */

.mcar-nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 1.25rem;
  width: 100%;
}

.mcar-btn {
  flex: 0 0 auto;
  width: 44px; height: 44px;                 /* 44px minimum touch target */
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(197,149,26,0.45);
  background: rgba(197,149,26,0.08);
  color: var(--text-dark);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.22s, border-color 0.22s, transform 0.22s;
}
.mcar-btn svg { width: 20px; height: 20px; }
.mcar-btn:active { transform: scale(0.92); background: rgba(197,149,26,0.20); }
.mcar-btn:focus-visible { outline: 2px solid var(--mango); outline-offset: 3px; }

.mcar-dots { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; flex-wrap: nowrap; }

.mcar-dot {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(60,40,10,0.22);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.28s, width 0.28s, border-radius 0.28s;
}
.mcar-dot.is-active { width: 20px; border-radius: 100px; background: var(--mango); }
.mcar-dot:focus-visible { outline: 2px solid var(--mango); outline-offset: 3px; }

/* dark sections (Flavour Journey) */
.mcar-nav.is-dark .mcar-btn {
  border-color: rgba(245,166,35,0.55);
  background: rgba(245,166,35,0.10);
  color: var(--cream);
}
.mcar-nav.is-dark .mcar-btn:active { background: rgba(245,166,35,0.24); }
.mcar-nav.is-dark .mcar-dot { background: rgba(255,240,200,0.30); }
.mcar-nav.is-dark .mcar-dot.is-active { background: var(--mango); }

@media (prefers-reduced-motion: reduce) {
  .mcar-btn, .mcar-dot { transition: none; }
}


/* ---- switch the carousels on (declared after .mcar-nav's base display:none) ---- */
@media (max-width: 700px) {
  .mcar-nav { display: flex; }

  /* Customer Stories: 3-col grid -> one-card carousel */
  .testi-grid {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .testi-grid::-webkit-scrollbar { display: none; }

  .testi-grid > .tc {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* Slides 2+ sit outside the viewport horizontally, so the IntersectionObserver
     behind .reveal never fires for them and they would stay at opacity 0. */
  .testi-grid > .tc.reveal { opacity: 1; transform: none; }
}


/* ============== PRODUCT POPUP GALLERY ==============
   Carousel inside #prodLightbox. Native scroll-snap track, so swipe and drag
   work on touch without a JS drag layer; carousel.js adds arrows, dots and the
   slide counter. Nested inside .plb-image-wrap so the decorative rings and the
   two-column popup layout are untouched. */

.plb-gallery {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.plb-track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.plb-track::-webkit-scrollbar { display: none; }

.plb-slide {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: 4px;
}

/* arrows sit over the image, centred on the track rather than the whole gallery */
.plb-nav {
  position: absolute;
  top: calc(50% - 26px);
  transform: translateY(-50%);
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(92,61,30,0.18);
  background: rgba(255,252,245,0.92);
  color: var(--text-dark);
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 6px 18px rgba(92,61,30,0.18);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.22s, transform 0.22s, opacity 0.22s;
}
.plb-nav svg { width: 20px; height: 20px; }
.plb-nav-prev { left: -6px; }
.plb-nav-next { right: -6px; }
.plb-nav:hover { background: #fff; }
.plb-nav:active { transform: translateY(-50%) scale(0.92); }
.plb-nav:focus-visible { outline: 2px solid var(--mango); outline-offset: 3px; }

.plb-gallery-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.plb-counter {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(92,61,30,0.70);
  font-variant-numeric: tabular-nums;
}

/* single-image products: nothing to navigate */
.plb-gallery.is-single .plb-nav,
.plb-gallery.is-single .plb-gallery-foot { display: none; }

@media (max-width: 900px) {
  .plb-nav { width: 38px; height: 38px; top: calc(50% - 24px); }
  .plb-nav-prev { left: -2px; }
  .plb-nav-next { right: -2px; }
}

@media (max-width: 600px) {
  /* On phones the overlaid arrows sat over ~24% of a ~300px track, right where a
     thumb starts a swipe — and a drag beginning on a button doesn't chain to the
     track, so those swipes did nothing. Below 600px they move under the image,
     leaving the whole photo swipeable. */
  .plb-gallery {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "img  img  img"
      "prev foot next";
    align-items: center;
    gap: 10px;
  }
  .plb-track { grid-area: img; }
  .plb-gallery-foot { grid-area: foot; }
  .plb-nav {
    position: static;
    transform: none;
    width: 36px; height: 36px;
    grid-area: prev;
    justify-self: start;
  }
  .plb-nav-next { grid-area: next; justify-self: end; }
  .plb-nav:active { transform: scale(0.92); }
  .plb-nav svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .plb-track { scroll-behavior: auto; }
  .plb-nav { transition: none; }
}

/* ============== REDUCED MOTION ============== */
@media (prefers-reduced-motion: reduce) {
  .bg-scene .float { transition: none !important; transform: none !important; }
  .drift-a, .drift-b, .drift-c, .drift-d, .drift-e,
  .spin-slow, .pulse-glow,
  .heritage-ticker-track { animation: none !important; }
}

/* ============== TICKER RESPONSIVE ============== */
@media (max-width: 700px) {
  .heritage-ticker { padding: 16px 0; }
  .heritage-ticker-item { font-size: 1rem; gap: 2.6rem; }
  .heritage-ticker-track { gap: 2.6rem; }
}

/* ================================================================
   ▼ ▼ ▼  PRODUCTS PAGE: ENHANCED + LIGHTBOX  ▼ ▼ ▼
   ================================================================ */

/* ===== Decorative section banners (between category groups) ===== */
.cat-divider {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green) 60%, #2d5a28 100%);
  padding: 36px 48px;
  display: flex; align-items: center; gap: 22px;
  position: relative;
  overflow: hidden;
}
.cat-divider::before {
  content: ""; position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 50%, rgba(245,166,35,0.18), transparent 40%),
    radial-gradient(circle at 92% 50%, rgba(245,166,35,0.08), transparent 40%);
  pointer-events: none;
}
.cat-divider::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--mango) 30%, var(--saffron) 70%, transparent 100%);
  opacity: 0.6;
}
.cat-divider h3 {
  font-family: 'Playfair Display', serif;
  font-size: 26px; font-weight: 700;
  color: white; letter-spacing: -0.01em;
  position: relative; z-index: 2;
}
.cat-divider h3 em {
  font-style: italic;
  color: var(--mango);
  font-weight: 600;
}
.cat-div-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(245,166,35,0.15);
  border: 1px solid rgba(245,166,35,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  position: relative; z-index: 2;
  box-shadow: 0 0 24px rgba(245,166,35,0.2);
}
.cat-div-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05));
  position: relative; z-index: 2;
}
.cat-div-count {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  position: relative; z-index: 2;
}

/* ===== Enhanced product cards ===== */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.pcard {
  background: white;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(197,149,26,0.10);
  transition: transform 0.45s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
              box-shadow 0.45s ease,
              border-color 0.3s;
  position: relative;
  display: flex; flex-direction: column;
}
.pcard::before {
  content: ""; position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, transparent 30%, rgba(245,166,35,0.45) 50%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.pcard:hover { transform: translateY(-10px); box-shadow: 0 28px 70px rgba(245,166,35,0.18); border-color: transparent; }
.pcard:hover::before { opacity: 1; }
.pcard-img {
  padding: 30px 24px;
  display: flex; align-items: center; justify-content: center;
  height: 300px;
  position: relative;
  cursor: zoom-in;
  background: var(--cream-warm, #f5ebd9);
  overflow: hidden;
}
.pcard-img::after {
  content: "";
  position: absolute;
  inset: -40% -10%;
  background: radial-gradient(ellipse at center, rgba(245,166,35,0.12) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}
.pcard:hover .pcard-img::after { opacity: 1; }
.pcard-img img {
  max-height: 250px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(92,61,30,0.22));
  transition: transform 0.5s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  position: relative; z-index: 2;
}
.pcard:hover .pcard-img img { transform: scale(1.08) translateY(-8px); }

/* Zoom hint overlay on image hover */
.pcard-zoom-hint {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 38px; height: 38px;
  background: var(--earth-deep);
  color: var(--mango);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s, transform 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  z-index: 3;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  pointer-events: none;
}
.pcard:hover .pcard-zoom-hint { opacity: 1; transform: scale(1); }

/* Diagonal corner ribbon (when present) */
.pcard-bdg {
  position: absolute; top: 14px; left: 14px;
  border-radius: 100px;
  padding: 5px 13px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  z-index: 4;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.bdg-premium  { background: linear-gradient(135deg, var(--mango), var(--saffron)); color: var(--earth-deep); }
.bdg-new      { background: var(--green); color: white; }
.bdg-seasonal { background: var(--saffron); color: white; }
.bdg-trad     { background: var(--earth); color: white; }
.bdg-coastal  { background: #6B2D5E; color: white; }
.bdg-natural  { background: linear-gradient(135deg, #4A7C3F, var(--green)); color: white; }

/* ODOP / GI ribbon: small accent on cards that carry an "Heritage" feature */
.pcard-ribbon {
  position: absolute; top: 14px; right: -34px;
  background: var(--mango);
  color: var(--earth-deep);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 36px;
  transform: rotate(35deg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 4;
  font-family: 'DM Sans', sans-serif;
}

.pcard-body {
  padding: 22px 24px 22px;
  display: flex; flex-direction: column;
  flex: 1;
}
.pcard-cat {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--saffron);
  margin-bottom: 8px;
}
.pcard-body h4 {
  font-family: 'Playfair Display', serif;
  font-size: 19px; font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.pcard-body h4 em {
  font-style: italic;
  font-weight: 600;
  color: var(--saffron);
}
.pcard-body .pcard-sub {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 12px;
  font-style: italic;
}
.pcard-body p.pcard-short {
  font-size: 13.5px;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 16px;
}
.pcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.ptag {
  background: var(--cream);
  border: 1px solid rgba(197,149,26,0.18);
  border-radius: 100px;
  padding: 3px 11px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-mid);
}
.ptag.size-tag {
  background: var(--mango-light);
  color: var(--mango-deep);
  border-color: rgba(245,166,35,0.3);
}
.pcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(197,149,26,0.12);
  margin-top: auto;
}
.pcard-foot .enq-btn {
  background: var(--saffron);
  color: white;
  border: none;
  border-radius: 100px;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.2s, transform 0.2s;
}
.pcard-foot .enq-btn:hover {
  background: var(--mango-deep);
  transform: translateY(-1px);
}
.pcard-foot .det-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--saffron);
  cursor: pointer;
  transition: color 0.2s, gap 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pcard-foot .det-link:hover {
  color: var(--mango-deep);
  gap: 8px;
}

/* ===== Enhanced featured product hero (Yellow Label) ===== */
.featured-prod {
  position: relative;
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 56px; align-items: center;
  padding: 52px 48px;
  background: linear-gradient(135deg, var(--earth-deep) 0%, #2a1a0a 50%, #1c1208 100%);
  border-radius: 30px;
  overflow: hidden;
  margin-bottom: 60px;
  cursor: zoom-in;
}
.featured-prod::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 30%, rgba(245,166,35,0.32) 0%, transparent 45%),
    radial-gradient(circle at 12% 80%, rgba(58,107,53,0.18) 0%, transparent 50%);
  pointer-events: none;
}
.featured-prod::after {
  content: "★ FEATURED";
  position: absolute;
  top: 28px; left: 28px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4em;
  color: var(--mango);
  text-transform: uppercase;
  z-index: 3;
  font-family: 'DM Sans', sans-serif;
}
.fp-left { position: relative; z-index: 2; padding-top: 24px; }
.fp-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(245,166,35,0.12);
  border: 1px solid rgba(245,166,35,0.3);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: 22px;
}
.fp-badge span { font-size: 11px; font-weight: 600; color: var(--mango); letter-spacing: 0.1em; text-transform: uppercase; }
.fp-left h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  color: white;
  line-height: 1.12;
  margin-bottom: 18px;
}
.fp-left h3 em { font-style: italic; color: var(--mango); }
.fp-left > p {
  font-size: 15.5px;
  color: rgba(255,255,255,0.62);
  line-height: 1.85;
  margin-bottom: 28px;
  max-width: 480px;
}
.fp-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 32px;
  max-width: 480px;
}
.fps {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(245,166,35,0.12);
  border-radius: 14px;
  padding: 14px 18px;
}
.fps span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: rgba(255,255,255,0.42);
  margin-bottom: 6px;
}
.fps strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  color: white;
  font-weight: 600;
}
.fp-right {
  position: relative;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  min-height: 360px;
}
.fp-right::before {
  content: "";
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  border: 1px solid rgba(245,166,35,0.18);
  animation: spin 30s linear infinite;
}
.fp-right::after {
  content: "";
  position: absolute;
  width: 440px; height: 440px;
  border-radius: 50%;
  border: 1px solid rgba(245,166,35,0.10);
  animation: spin 50s linear infinite reverse;
}
.fp-right img {
  max-height: 380px;
  max-width: 90%;
  object-fit: contain;
  filter: drop-shadow(0 40px 80px rgba(245,166,35,0.32));
  animation: canFloat 6s ease-in-out infinite;
  position: relative; z-index: 2;
  transition: transform 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.featured-prod:hover .fp-right img { transform: scale(1.04); }

/* ===== Product Lightbox ===== */
.prod-lightbox {
  position: fixed; inset: 0;
  z-index: 9500;
  background: rgba(28, 18, 8, 0.85);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  display: none;
  align-items: center; justify-content: center;
  padding: 32px;
  opacity: 0;
  overflow-y: auto;             /* allow the whole overlay to scroll if card is taller than viewport */
  -webkit-overflow-scrolling: touch;
  transition: opacity 0.35s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.prod-lightbox.open { display: flex; opacity: 1; }
.prod-lightbox-card {
  background: var(--cream);
  border-radius: 26px;
  width: 100%;
  max-width: 1100px;
  max-height: min(90vh, 760px);
  overflow: hidden;             /* desktop: hide overflow on card; the .plb-content column scrolls instead */
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: 1fr;       /* single explicit row so children can have a definite size */
  position: relative;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.45s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  box-shadow: 0 50px 120px rgba(0,0,0,0.4);
  min-height: 0;                  /* prevent grid blowing out when child content is tall */
}
.prod-lightbox.open .prod-lightbox-card {
  transform: scale(1) translateY(0);
}
.plb-image-wrap {
  position: relative;
  background: linear-gradient(135deg, var(--cream-warm, #f5ebd9) 0%, var(--mango-light) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  min-height: 400px;
  overflow: hidden;
}
.plb-image-wrap::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at center, rgba(245,166,35,0.25) 0%, transparent 55%);
  animation: plbGlow 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes plbGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.08); }
}
.plb-image {
  max-height: 70vh;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(92,61,30,0.3));
  position: relative; z-index: 2;
  animation: plbFloat 5s ease-in-out infinite;
}
@keyframes plbFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.plb-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(245,166,35,0.22);
  pointer-events: none;
  z-index: 1;
}
.plb-ring-1 { width: 70%; aspect-ratio: 1; animation: spin 40s linear infinite; }
.plb-ring-2 { width: 90%; aspect-ratio: 1; animation: spin 60s linear infinite reverse; }

.plb-content {
  padding: 44px 40px 36px 40px;
  padding-right: 70px; /* leave room for the close button at top-right */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* don't bubble scroll to page when reaching ends */
  display: flex; flex-direction: column;
  position: relative;
  /* Custom scrollbar so users see the affordance there's more content below */
  scrollbar-width: thin;
  scrollbar-color: rgba(245,166,35,0.45) transparent;
}
.plb-content::-webkit-scrollbar { width: 8px; }
.plb-content::-webkit-scrollbar-track { background: transparent; }
.plb-content::-webkit-scrollbar-thumb {
  background: rgba(245,166,35,0.45);
  border-radius: 100px;
}
.plb-content::-webkit-scrollbar-thumb:hover { background: rgba(245,166,35,0.7); }
.plb-cat {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--saffron);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.plb-cat::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--saffron);
}
.plb-title {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.1;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.plb-title em {
  font-style: italic;
  color: var(--saffron);
  font-weight: 600;
}
.plb-sub {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 22px;
  font-style: italic;
  font-family: 'Playfair Display', serif;
}
.plb-desc {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-mid);
  margin-bottom: 24px;
  border-left: 2px solid var(--mango);
  padding-left: 18px;
}
.plb-features-h {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-dark);
  margin-bottom: 12px;
}
.plb-features {
  list-style: none;
  margin-bottom: 24px;
}
.plb-features li {
  position: relative;
  padding-left: 28px;
  font-size: 13.5px;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 10px;
}
.plb-features li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--green);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/></svg>");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.plb-sizes-h {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.plb-sizes {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.plb-size {
  background: var(--mango-light);
  color: var(--mango-deep);
  border: 1px solid rgba(245,166,35,0.32);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
}
.plb-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(197,149,26,0.18);
}
.plb-actions .btn-primary { padding: 12px 26px; font-size: 13px; }
.plb-actions .btn-ghost {
  background: transparent;
  color: var(--text-mid);
  border: 1.5px solid rgba(92,61,30,0.2);
  padding: 12px 26px;
  font-size: 13px;
}
.plb-actions .btn-ghost:hover {
  border-color: var(--saffron);
  color: var(--saffron);
  background: var(--mango-light);
}

.plb-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(28,18,8,0.85);
  color: var(--mango);
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.plb-close:hover {
  background: var(--saffron);
  color: white;
  transform: rotate(90deg);
}

@media (max-width: 900px) {
  .prod-lightbox { padding: 16px; align-items: flex-start; padding-top: 60px; }
  .prod-lightbox-card {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 80px);
    overflow-y: auto;             /* mobile: the whole card scrolls (image + content stacked) */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(245,166,35,0.45) transparent;
  }
  .prod-lightbox-card::-webkit-scrollbar { width: 6px; }
  .prod-lightbox-card::-webkit-scrollbar-track { background: transparent; }
  .prod-lightbox-card::-webkit-scrollbar-thumb { background: rgba(245,166,35,0.45); border-radius: 100px; }
  .plb-content {
    overflow-y: visible;          /* mobile: don't double-scroll; let the card handle it */
    padding: 28px 24px 32px;
    padding-right: 24px;
  }
  .plb-image-wrap { padding: 28px; min-height: 280px; }
  .plb-image { max-height: 240px; }
  .plb-title { font-size: 24px; }
  /* Close button stays anchored to viewport while card content scrolls */
  .plb-close { position: fixed; top: 20px; right: 20px; }
  .prod-grid { grid-template-columns: 1fr; }
  .featured-prod { grid-template-columns: 1fr; padding: 36px 28px; }
  .fp-right { min-height: 280px; }
  .fp-right::before, .fp-right::after { display: none; }
  .cat-divider { padding: 24px 28px; gap: 14px; }
  .cat-divider h3 { font-size: 20px; }
  /* Mobile: hide oversized decorative italic text: clamp() min is 8rem which spills off the screen */
  .prod-section-decor { display: none; }
  .pfbtn { padding: 16px 18px; font-size: 13px; }
}
@media (max-width: 480px) {
  /* Very narrow phones: collapse the decorative flex-line so the title gets more room */
  .cat-divider { padding: 20px 18px; gap: 12px; }
  .cat-div-line { display: none; }
  .cat-div-icon { width: 40px; height: 40px; font-size: 18px; }
  .cat-div-count { font-size: 10px; letter-spacing: 0.14em; }
  .cat-divider h3 { font-size: 18px; flex: 1; min-width: 0; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Subtle decorative elements ===== */
.prod-section-wrap { padding: 24px 48px 70px; position: relative; overflow: hidden; }
.prod-section-wrap.alt { background: linear-gradient(180deg, white 0%, var(--cream) 100%); }

/* Mobile padding overrides: placed AFTER the base rule above so the shorthand
   doesn't reset what we set. Also fixes pre-existing issue where the global
   `padding-left: 20px; padding-right: 20px` mobile rule was being overridden
   by the `padding: 24px 48px 70px` shorthand on this class. */
@media (max-width: 900px) {
  .prod-section-wrap { padding: 24px 20px 40px; }
  .prod-filter-bar { padding: 0 16px; }
}
.prod-section-decor {
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: clamp(8rem, 18vw, 16rem);
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245,166,35,0.07);
  pointer-events: none;
  user-select: none;
  font-weight: 200;
  line-height: 1;
  z-index: 0;
}
.prod-section-decor.right { top: -20px; right: -30px; }
.prod-section-decor.left  { bottom: -40px; left: -30px; }
.prod-section-wrap > * { position: relative; z-index: 2; }

/* ================================================================
   ▼ ▼ ▼  HOS: PREMIUM READY-TO-DRINK RANGE  ▼ ▼ ▼
   ================================================================ */
.hos-rtd {
  padding: 110px 48px 130px;
  background:
    radial-gradient(ellipse at 12% 20%, rgba(245,166,35,0.08), transparent 50%),
    radial-gradient(ellipse at 88% 80%, rgba(126,200,113,0.08), transparent 55%),
    linear-gradient(180deg, #0E1A0D 0%, #0a1409 100%);
  position: relative;
  overflow: hidden;
}
.hos-rtd::before, .hos-rtd::after {
  content: ""; position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hos-rtd::before {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(245,166,35,0.18), transparent 65%);
  top: -150px; right: -100px;
  filter: blur(30px);
  animation: hosOrb 14s ease-in-out infinite;
}
.hos-rtd::after {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(126,200,113,0.22), transparent 65%);
  bottom: -120px; left: -80px;
  filter: blur(28px);
  animation: hosOrb 18s 3s ease-in-out infinite reverse;
}
@keyframes hosOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(20px, -30px) scale(1.08); }
}
.hos-rtd-head {
  text-align: center;
  margin-bottom: 70px;
  position: relative; z-index: 2;
}
.hos-rtd-head .sec-label { color: #7EC871; justify-content: center; }
.hos-rtd-head .sec-label::before { background: #7EC871; }
.hos-rtd-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 700;
  color: white;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  margin-top: 12px;
}
.hos-rtd-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, #ffd873 0%, #f5a524 50%, #7EC871 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.hos-rtd-head p {
  font-size: 16px;
  line-height: 1.85;
  color: rgba(255,255,255,0.62);
  max-width: 640px;
  margin: 0 auto;
}

.hos-rtd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  position: relative; z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
}
.hosc {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.5s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
              border-color 0.4s, box-shadow 0.5s, background 0.4s;
  position: relative;
  display: flex;
  flex-direction: column;
}
.hosc::before {
  content: ""; position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, transparent 30%, var(--hosc-accent, rgba(245,166,35,0.55)) 50%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.5s;
  pointer-events: none;
}
.hosc:hover {
  transform: translateY(-14px);
  border-color: transparent;
  background: rgba(255,255,255,0.07);
  box-shadow: 0 30px 70px rgba(0,0,0,0.4),
              0 12px 30px var(--hosc-glow, rgba(245,166,35,0.18));
}
.hosc:hover::before { opacity: 1; }
/* Image stage with glow */
.hosc-img-stage {
  position: relative;
  height: 360px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hosc-bg, linear-gradient(180deg, #FFF8E8 0%, #FFF3D6 100%));
  overflow: hidden;
  cursor: zoom-in;
}
.hosc-img-stage::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at center, var(--hosc-radial, rgba(245,166,35,0.25)) 0%, transparent 60%);
  opacity: 0.7;
  transition: opacity 0.5s;
}
.hosc:hover .hosc-img-stage::before { opacity: 1; }
.hosc-img-stage::after {
  content: "";
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 24px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, transparent 60%);
  filter: blur(8px);
  z-index: 1;
}
.hosc-img-stage img {
  position: relative; z-index: 2;
  height: 320px;
  max-width: 90%;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.18));
  transition: transform 0.6s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  animation: hosFloat 6s ease-in-out infinite;
}
.hosc:hover .hosc-img-stage img { transform: translateY(-10px) scale(1.04); }
@keyframes hosFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
/* Decorative ring behind the can */
.hosc-ring {
  position: absolute;
  width: 240px; height: 240px;
  border-radius: 50%;
  border: 1px dashed var(--hosc-ring-c, rgba(245,166,35,0.22));
  z-index: 1;
  animation: spin 60s linear infinite;
}
.hosc-ring.r2 {
  width: 300px; height: 300px;
  border-style: solid;
  opacity: 0.5;
  animation: spin 90s linear infinite reverse;
}
/* Tag pill */
.hosc-tag {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--hosc-accent, linear-gradient(135deg, #FFD873, #F5A524));
  color: #2c1c08;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  z-index: 4;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
/* Volume badge */
.hosc-vol {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(28,18,8,0.7);
  color: white;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 5px 13px;
  border-radius: 100px;
  z-index: 4;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Zoom hint */
.hosc-zoom {
  position: absolute;
  bottom: 16px; right: 16px;
  width: 38px; height: 38px;
  background: rgba(28,18,8,0.78);
  color: var(--hosc-color, #ffd873);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  z-index: 4;
  opacity: 0; transform: scale(0.7);
  transition: opacity 0.3s, transform 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.hosc:hover .hosc-zoom { opacity: 1; transform: scale(1); }

.hosc-body {
  padding: 24px 24px 26px;
  display: flex; flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 2;
}
.hosc-sub {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--hosc-color, #ffd873);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
}
.hosc-sub::before {
  content: ""; width: 16px; height: 1px;
  background: currentColor;
}
.hosc-body h4 {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 700;
  color: white;
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.hosc-tagline {
  font-size: 13.5px;
  font-style: italic;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
  margin-bottom: 18px;
  font-family: 'Playfair Display', serif;
}
.hosc-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: space-between;
}
.hosc-foot .hos-enq {
  background: var(--hosc-accent, linear-gradient(135deg, #FFD873, #F5A524));
  color: #2c1c08;
  border: none;
  border-radius: 100px;
  padding: 7px 16px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.04em;
  transition: transform 0.2s, box-shadow 0.2s;
}
.hosc-foot .hos-enq:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(245,166,35,0.35);
}
.hosc-foot .hos-detail {
  font-size: 12px;
  font-weight: 600;
  color: var(--hosc-color, #ffd873);
  cursor: pointer;
  transition: gap 0.2s, opacity 0.25s;
  display: inline-flex; align-items: center; gap: 4px;
}
.hosc-foot .hos-detail:hover { gap: 8px; opacity: 0.85; }

@media (max-width: 1200px) { .hos-rtd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .hos-rtd-grid { grid-template-columns: 1fr; }
  .hos-rtd { padding: 70px 22px 90px; }
  .hosc-img-stage { height: 320px; }
  .hosc-img-stage img { height: 280px; }
}

/* HOS Lightbox uses the same .prod-lightbox styling but adds a green-tinted variant */
.prod-lightbox.hos-style .prod-lightbox-card { background: #faf6ef; }
.prod-lightbox.hos-style .plb-image-wrap {
  background: var(--lb-bg, linear-gradient(180deg, #FFF8E8 0%, #FFF3D6 100%));
}
.prod-lightbox.hos-style .plb-image-wrap::before {
  background: radial-gradient(circle at center, var(--lb-radial, rgba(245,166,35,0.25)) 0%, transparent 60%);
}
.prod-lightbox.hos-style .plb-cat,
.prod-lightbox.hos-style .plb-title em {
  color: var(--lb-color, #c47a0e);
}
.prod-lightbox.hos-style .plb-desc { border-left-color: var(--lb-color, #c47a0e); }
.prod-lightbox.hos-style .plb-features li::before { background: var(--lb-color, #c47a0e); }
.prod-lightbox.hos-style .plb-size {
  background: var(--lb-pill-bg, #fff3d6);
  color: var(--lb-color, #c47a0e);
  border-color: var(--lb-pill-border, rgba(245,166,35,0.3));
}
.prod-lightbox.hos-style .plb-actions .btn-primary {
  background: var(--lb-accent, linear-gradient(135deg, #ffd873, #f5a524));
}

/* ================================================================
   ▼ ▼ ▼  INSTAGRAM SECTION: REAL FEED–READY  ▼ ▼ ▼
   ================================================================ */
.home-insta {
  padding: 100px 48px 120px;
  background: linear-gradient(180deg, #fff 0%, #fdf8ee 100%);
  position: relative;
  overflow: hidden;
}
.home-insta::before {
  content: ""; position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 30%, rgba(228, 64, 95, 0.06), transparent 50%),
    radial-gradient(ellipse at 82% 80%, rgba(193, 53, 132, 0.05), transparent 55%);
  pointer-events: none;
}

.insta-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 12px;
  position: relative; z-index: 2;
  flex-wrap: wrap;
  gap: 24px;
}
.insta-head-text { flex: 1; min-width: 280px; }
.insta-handle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #f7f7f7, #fff);
  border: 1px solid rgba(193, 53, 132, 0.18);
  padding: 10px 20px 10px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
  box-shadow: 0 6px 20px rgba(193, 53, 132, 0.1);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s;
}
.insta-handle:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(193, 53, 132, 0.18); }
.insta-handle-icon {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.insta-handle-icon::before {
  content: ""; position: absolute;
  inset: 5px;
  border: 2px solid white;
  border-radius: 6px;
}
.insta-handle-icon::after {
  content: "";
  width: 9px; height: 9px;
  background: white;
  border-radius: 50%;
  position: relative; z-index: 1;
}
.insta-handle-text {
  display: flex; flex-direction: column;
  line-height: 1.2;
}
.insta-handle-text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  font-family: 'DM Sans', sans-serif;
}
.insta-handle-text span {
  font-size: 11px;
  color: #c13584;
  letter-spacing: 0.04em;
}
.insta-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3.4vw, 38px);
  color: var(--text-dark);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.insta-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.insta-head .insta-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
  color: white;
  padding: 13px 26px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(193, 53, 132, 0.32);
  transition: transform 0.25s, box-shadow 0.25s;
}
.insta-head .insta-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(193, 53, 132, 0.45);
}

/* Live feed embed slot: paste your widget code here */
.insta-feed-slot {
  position: relative; z-index: 2;
  margin-top: 36px;
}
.insta-feed-slot:empty::after {
  content: ""; display: none;
}

/* Polished preview grid (used until live widget is connected) */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative;
  z-index: 2;
  margin-top: 36px;
}
.insta-card {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: #2a1a10;
  display: block;
  text-decoration: none;
  transition: transform 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), box-shadow 0.4s;
}
.insta-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(193, 53, 132, 0.28);
  z-index: 3;
}
/* Feature variant: full-bleed designed-poster cards (4-up Instagram grid) */
.insta-card-feature { aspect-ratio: 4 / 5; background: #1a1208; }
.insta-card-feature .insta-card-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  display: block;
}
.insta-card-feature:hover .insta-card-photo { transform: scale(1.05); }
.insta-card-bg {
  position: absolute;
  inset: 0;
  background: var(--ic-bg, linear-gradient(135deg, #FFF8E8, #FFF3D6));
  background-size: cover; background-position: center;
  transition: transform 0.6s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.insta-card:hover .insta-card-bg { transform: scale(1.08); }
/* The product image inside the bg */
.insta-card-img {
  position: absolute;
  inset: 12% 12% 16%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
  transition: transform 0.5s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.insta-card:hover .insta-card-img { transform: scale(1.08) translateY(-4px); }
/* Type indicator in top-right (post / reel / carousel) */
.insta-card-type {
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  background: rgba(28,18,8,0.5);
  color: white;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  z-index: 3;
  backdrop-filter: blur(4px);
}
/* Hover overlay with caption + likes */
.insta-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(28, 18, 8, 0) 50%, rgba(28, 18, 8, 0.92) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  opacity: 0;
  transition: opacity 0.35s;
  z-index: 2;
}
.insta-card:hover .insta-card-overlay { opacity: 1; }
.insta-card-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  color: white;
  font-size: 12px;
  font-weight: 600;
}
.insta-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.insta-card-cap {
  font-size: 11px;
  color: rgba(255,255,255,0.92);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Profile attribution ribbon below grid */
.insta-attrib {
  margin-top: 30px;
  text-align: center;
  font-size: 12px;
  color: var(--text-light);
  letter-spacing: 0.08em;
}
.insta-attrib a {
  color: #c13584;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(193, 53, 132, 0.3);
  transition: border-color 0.2s;
}
.insta-attrib a:hover { border-bottom-color: #c13584; }

/* ========== AUTO-FETCH INSTAGRAM FEED ========== */
/* Default real-feed grid: 4-up styled cards matching .insta-grid layout
   (used when rendering auto-fetched Behold JSON posts with real photos).
   Manual Instagram embed mode adds .insta-real-grid-embeds for a 3-up
   layout (Instagram blockquote iframes have a 326px min width). */
.insta-real-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative; z-index: 2;
  margin-top: 36px;
}
/* Manual IG embed variant: 3-up to fit IG's 326px min-width */
.insta-real-grid.insta-real-grid-embeds {
  grid-template-columns: repeat(3, minmax(326px, 1fr));
  gap: 22px;
}
@media (max-width: 1180px) {
  .insta-real-grid.insta-real-grid-embeds { grid-template-columns: repeat(2, minmax(326px, 1fr)); }
}
@media (max-width: 900px) {
  .insta-real-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .insta-real-grid.insta-real-grid-embeds { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .insta-real-grid { grid-template-columns: 1fr; }
}

/* Real-photo image inside an .insta-card (Behold fetch path).
   This sits inside .insta-card-bg, fills the card, and is what makes
   Behold posts look identical to the styled fallback design. */
.insta-card-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  display: block;
}
.insta-card:hover .insta-card-photo { transform: scale(1.06); }

/* Loading skeleton shimmer while Behold JSON is being fetched */
.insta-skeleton-grid { display: grid; }
.insta-skeleton {
  aspect-ratio: 1;
  border-radius: 14px;
  background: linear-gradient(110deg, #f5ebd9 8%, #faf6ef 18%, #f5ebd9 33%);
  background-size: 200% 100%;
  animation: instaShimmer 1.6s ease-in-out infinite;
}
@keyframes instaShimmer {
  to { background-position-x: -200%; }
}

/* Manual IG embed cards (.insta-real-grid-embeds children) */
.insta-embed-wrap {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(193, 53, 132, 0.10), 0 1px 3px rgba(0,0,0,0.04);
  border: 1px solid rgba(193, 53, 132, 0.08);
  transition: transform 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), box-shadow 0.4s;
  max-height: 720px;
  display: flex;
  flex-direction: column;
}
.insta-embed-wrap:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(193, 53, 132, 0.18), 0 1px 3px rgba(0,0,0,0.06);
}
.insta-embed-wrap blockquote.instagram-media,
.insta-embed-wrap iframe {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}
.insta-embed-wrap.loading {
  min-height: 460px;
  background: linear-gradient(180deg, #fafafa 0%, #f3f3f3 100%);
  position: relative;
}
.insta-embed-wrap.loading::before {
  content: "";
  position: absolute;
  top: 16px; left: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
  opacity: 0.45;
}
.insta-embed-wrap.loading::after {
  content: "Loading post…";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c13584;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
}
.insta-embed-wrap.loaded { min-height: 0; }
.insta-embed-wrap.loaded::before, .insta-embed-wrap.loaded::after { display: none; }

@media (max-width: 700px) {
  .insta-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .home-insta { padding: 70px 22px 90px; }
  .insta-head { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   AMBIENT MICRO-ANIMATIONS
   Subtle, restrained background effects for a premium feel:
   - Drifting dust particles in hero backgrounds
   - Slow gradient hue shift on dark heroes
   - Soft orb drift on cream-background sections
   - Aurora glow trails on the founder section
   All effects respect prefers-reduced-motion.
   ================================================================ */

/* --- Hero "dust" particles (mango-colored micro-dots floating up) --- */
.hero-dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.hero-dust .hd-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(245,166,35,0.45);
  filter: blur(0.6px);
  bottom: -10px;
  opacity: 0;
  animation: dustDrift 18s linear infinite;
}
.hero-dust .hd-particle.hd-soft {
  background: rgba(255,200,120,0.32);
  width: 3px;
  height: 3px;
}
.hero-dust .hd-particle.hd-tiny {
  width: 2px;
  height: 2px;
  background: rgba(245,166,35,0.55);
}
.hero-dust .hd-particle:nth-child(1)  { left:  6%; animation-duration: 22s; animation-delay:  0s; }
.hero-dust .hd-particle:nth-child(2)  { left: 14%; animation-duration: 26s; animation-delay: -3s; }
.hero-dust .hd-particle:nth-child(3)  { left: 22%; animation-duration: 19s; animation-delay: -8s; }
.hero-dust .hd-particle:nth-child(4)  { left: 31%; animation-duration: 24s; animation-delay: -14s; }
.hero-dust .hd-particle:nth-child(5)  { left: 39%; animation-duration: 21s; animation-delay: -2s; }
.hero-dust .hd-particle:nth-child(6)  { left: 47%; animation-duration: 28s; animation-delay: -10s; }
.hero-dust .hd-particle:nth-child(7)  { left: 55%; animation-duration: 23s; animation-delay: -18s; }
.hero-dust .hd-particle:nth-child(8)  { left: 64%; animation-duration: 26s; animation-delay: -5s; }
.hero-dust .hd-particle:nth-child(9)  { left: 72%; animation-duration: 20s; animation-delay: -12s; }
.hero-dust .hd-particle:nth-child(10) { left: 81%; animation-duration: 27s; animation-delay: -7s; }
.hero-dust .hd-particle:nth-child(11) { left: 89%; animation-duration: 22s; animation-delay: -16s; }
.hero-dust .hd-particle:nth-child(12) { left: 95%; animation-duration: 25s; animation-delay: -1s; }
@keyframes dustDrift {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(-50vh) translateX(20px); opacity: 0.85; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-105vh) translateX(-10px); opacity: 0; }
}

/* --- Slow gradient hue drift on dark hero backgrounds --- */
/* Adds a barely-perceptible second gradient layer that shifts position over time,
   making flat dark backgrounds feel alive without being distracting. */
.about-hero::after,
.prod-hero::after,
.export-hero::after,
.recipes-hero::after,
.gallery-hero::after,
.contact-hero::after,
.games-hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(245,166,35,0.06), transparent 60%),
    radial-gradient(ellipse 50% 40% at 70% 70%, rgba(58,107,53,0.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: heroAuroraDrift 22s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes heroAuroraDrift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  33%      { transform: translate(2%, -2%) scale(1.05); opacity: 1; }
  66%      { transform: translate(-2%, 1%) scale(0.98); opacity: 0.85; }
}

/* --- Ambient floating orbs for cream-background sections (founder/mv/quality) --- */
.section-ambient-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.section-ambient-orbs .sao {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.5;
}
.section-ambient-orbs .sao-1 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(245,166,35,0.25) 0%, transparent 65%);
  top: 10%; left: -8%;
  animation: ambientFloat1 26s ease-in-out infinite;
}
.section-ambient-orbs .sao-2 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(58,107,53,0.18) 0%, transparent 65%);
  bottom: 5%; right: -6%;
  animation: ambientFloat2 32s ease-in-out infinite;
}
.section-ambient-orbs .sao-3 {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(196,122,14,0.15) 0%, transparent 65%);
  top: 50%; right: 25%;
  animation: ambientFloat3 28s ease-in-out infinite;
}
@keyframes ambientFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, 30px) scale(1.08); }
}
@keyframes ambientFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-30px, -40px) scale(1.05); }
}
@keyframes ambientFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50%      { transform: translate(20px, -25px) scale(0.95); opacity: 0.7; }
}

/* --- Twinkling micro-stars (placed selectively in dark heroes) --- */
.hero-twinkle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.hero-twinkle .ht-star {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(245,166,35,0.7);
  box-shadow: 0 0 6px rgba(245,166,35,0.6);
  opacity: 0;
  animation: twinkle 6s ease-in-out infinite;
}
.hero-twinkle .ht-star:nth-child(1) { top: 18%; left: 12%; animation-delay:  0s; }
.hero-twinkle .ht-star:nth-child(2) { top: 28%; left: 78%; animation-delay: -1.4s; }
.hero-twinkle .ht-star:nth-child(3) { top: 42%; left: 36%; animation-delay: -3s; }
.hero-twinkle .ht-star:nth-child(4) { top: 58%; left: 88%; animation-delay: -2.2s; }
.hero-twinkle .ht-star:nth-child(5) { top: 70%; left: 24%; animation-delay: -4.5s; }
.hero-twinkle .ht-star:nth-child(6) { top: 82%; left: 64%; animation-delay: -0.8s; }
.hero-twinkle .ht-star:nth-child(7) { top: 12%; left: 50%; animation-delay: -2.8s; }
.hero-twinkle .ht-star:nth-child(8) { top: 88%; left: 8%;  animation-delay: -5.2s; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50%      { opacity: 1; transform: scale(1.4); }
}

/* --- Honor the user's reduced-motion preference for ALL ambient effects --- */
@media (prefers-reduced-motion: reduce) {
  .hero-dust .hd-particle,
  .hero-twinkle .ht-star,
  .section-ambient-orbs .sao,
  .founder-portrait-halo,
  .founder-portrait-ring,
  .fq-badge,
  .about-hero::after,
  .prod-hero::after,
  .export-hero::after,
  .recipes-hero::after,
  .gallery-hero::after,
  .contact-hero::after,
  .games-hero::after {
    animation: none !important;
  }
}

/* =================================================================
   THE JOURNAL: blog cards section
   Asymmetric magazine grid + premium hover behaviour
   ================================================================= */
.hj-section {
  background:
    radial-gradient(circle at 12% 18%, rgba(245,166,35,0.05) 0%, transparent 38%),
    radial-gradient(circle at 88% 82%, rgba(58,107,53,0.05) 0%, transparent 40%),
    var(--cream);
  padding: 110px 48px 130px;
  position: relative;
  overflow: hidden;
}
.hj-bg-grain {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(140,80,10,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.hj-bg-glow {
  position: absolute;
  top: 6%; right: -8%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(245,166,35,0.12) 0%, transparent 60%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.hj-container {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Header (matches .hp-header pattern used elsewhere on the page) */
.hj-header {
  text-align: center;
  margin-bottom: 56px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}
.hj-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.hj-eyebrow-line {
  display: block;
  width: 44px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 100, 20, 0.5));
}
.hj-eyebrow .hj-eyebrow-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(184, 100, 20, 0.5));
}
.hj-eyebrow-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--saffron);
}
.hj-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 4.8vw, 56px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 18px;
}
.hj-title em {
  font-style: italic;
  color: var(--saffron);
  font-weight: 400;
}
.hj-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-mid);
  margin: 0;
}

/* Asymmetric grid: 1 featured (left, spans both rows) + 2 stacked (right) */
.hj-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 26px;
  align-items: stretch;
}
.hj-card {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(197,149,26,0.10);
  box-shadow: 0 10px 30px rgba(140,80,10,0.06);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s ease,
              border-color 0.3s;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  text-align: left;
  min-width: 0; /* let grid track shrink */
}
.hj-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(140,80,10,0.16);
  border-color: rgba(245,166,35,0.30);
}
.hj-card:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 4px;
}
.hj-card-featured {
  grid-row: 1 / span 2;
  grid-column: 1;
}
.hj-card-img-wrap {
  position: relative;
  overflow: hidden;
}
.hj-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hj-card-featured .hj-card-img {
  aspect-ratio: 16 / 11;
}
.hj-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.hj-card:hover .hj-card-photo {
  transform: scale(1.06);
}
.hj-card-emoji {
  position: relative;
  font-size: 76px;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.28));
  opacity: 0.95;
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
  display: none;
}
.hj-card-featured .hj-card-emoji { font-size: 96px; }
.hj-card:hover .hj-card-emoji {
  transform: scale(1.08) rotate(-4deg);
}
.hj-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.28) 100%);
  pointer-events: none;
  z-index: 1;
}
.hj-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--saffron);
  z-index: 2;
  border: 1px solid rgba(245,166,35,0.18);
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}
.hj-featured-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 8px 14px;
  border-radius: 100px;
  font-family: 'Playfair Display', serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: white;
  background: linear-gradient(135deg, rgba(28,18,8,0.55), rgba(28,18,8,0.35));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  z-index: 2;
}
.hj-card-body {
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.hj-card-featured .hj-card-body {
  padding: 36px 34px 32px;
}
.hj-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-light);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.hj-meta-dot {
  color: var(--mango);
  font-size: 7px;
}
.hj-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.26;
  color: var(--text-dark);
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}
.hj-card-featured .hj-card-title {
  font-size: 32px;
  line-height: 1.16;
  margin-bottom: 18px;
}
.hj-card-title em {
  font-style: italic;
  color: var(--saffron);
  font-weight: 600;
}
.hj-card-excerpt {
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-mid);
  margin: 0 0 22px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hj-card-featured .hj-card-excerpt {
  font-size: 16px;
  -webkit-line-clamp: 4;
  margin-bottom: 26px;
}
.hj-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--saffron);
  letter-spacing: 0.02em;
}
.hj-card-cta-text {
  position: relative;
  padding-bottom: 2px;
}
.hj-card-cta-text::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--saffron);
  transform: scaleX(0.4);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.hj-card:hover .hj-card-cta-text::after {
  transform: scaleX(1);
}
.hj-card-arrow {
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
  font-size: 16px;
  line-height: 1;
}
.hj-card:hover .hj-card-arrow {
  transform: translateX(5px);
}

/* === Responsive === */
@media (max-width: 1024px) {
  .hj-card-featured .hj-card-title { font-size: 28px; }
}
@media (max-width: 900px) {
  .hj-section { padding: 80px 20px 90px; }
  .hj-header { margin-bottom: 40px; }
  .hj-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 22px;
  }
  .hj-card-featured {
    grid-row: auto;
    grid-column: auto;
  }
  .hj-card-featured .hj-card-title { font-size: 26px; }
  .hj-card-featured .hj-card-body { padding: 30px 26px 26px; }
  .hj-card-featured .hj-card-emoji { font-size: 80px; }
}
@media (max-width: 480px) {
  .hj-section { padding: 64px 16px 76px; }
  .hj-eyebrow-line { width: 32px; }
  .hj-card-title { font-size: 20px; }
  .hj-card-featured .hj-card-title { font-size: 23px; }
  .hj-card-emoji, .hj-card-featured .hj-card-emoji { font-size: 60px; }
  .hj-card-body, .hj-card-featured .hj-card-body { padding: 24px 22px 22px; }
}

/* =================================================================
   BLOG READER LIGHTBOX
   ================================================================= */
.blog-lightbox {
  position: fixed; inset: 0;
  background: rgba(28,18,8,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.blog-lightbox.open {
  display: flex;
  opacity: 1;
}
.blog-lb-card {
  background: white;
  border-radius: 24px;
  max-width: 760px;
  width: 100%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 90px rgba(0,0,0,0.4);
  margin: auto;
  animation: blogLbIn 0.45s cubic-bezier(0.16,1,0.3,1);
}
@keyframes blogLbIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.blog-lb-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.08);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dark);
  transition: transform 0.2s, background 0.2s;
  font-family: 'DM Sans', sans-serif;
}
.blog-lb-close:hover {
  background: white;
  transform: scale(1.08);
}
.blog-lb-hero {
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F5A623, #C47A0E);
  position: relative;
  overflow: hidden;
}
.blog-lb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.22) 100%);
}
.blog-lb-hero-emoji {
  font-size: 120px;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.3));
  position: relative;
  z-index: 1;
}
.blog-lb-content {
  padding: 38px 44px 44px;
}
.blog-lb-tag {
  position: static;
  display: inline-block;
  box-shadow: none;
}
.blog-lb-meta {
  margin: 18px 0 14px;
}
.blog-lb-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  line-height: 1.18;
  color: var(--text-dark);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.blog-lb-title em {
  font-style: italic;
  color: var(--saffron);
}
.blog-lb-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.78;
  color: var(--text-mid);
}
.blog-lb-body p { margin: 0 0 16px; }
.blog-lb-body p:last-child { margin-bottom: 0; }
.blog-lb-body strong { color: var(--text-dark); font-weight: 700; }
.blog-lb-author {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text-light);
  letter-spacing: 0.02em;
}
.blog-lb-author strong {
  color: var(--text-dark);
  font-weight: 600;
}
@media (max-width: 700px) {
  .blog-lightbox { padding: 24px 14px; }
  .blog-lb-hero { height: 200px; }
  .blog-lb-hero-emoji { font-size: 88px; }
  .blog-lb-content { padding: 28px 24px 32px; }
  .blog-lb-body { font-size: 15px; }
  .blog-lb-close { top: 12px; right: 12px; width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .hj-card, .hj-card-photo, .hj-card-emoji, .hj-card-arrow,
  .hj-card-cta-text::after, .blog-lb-card { transition: none !important; animation: none !important; }
}

/* =================================================================
   BLOG PAGE: dedicated page elements (hero, filter bar, newsletter)
   ================================================================= */
.blog-hero {
  background: var(--earth-deep);
  padding: 110px 48px 70px;
  position: relative;
  overflow: hidden;
  color: white;
}
.blog-hero .hero-orb {
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,166,35,0.20) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.blog-hero .orb-a { top: -120px; right: -120px; }
.blog-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.blog-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 700;
  color: white;
  line-height: 1.1;
  margin: 22px 0 18px;
}
.blog-hero-title em {
  font-style: italic;
  color: var(--mango);
  font-weight: 400;
}
.blog-hero-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255,255,255,0.65);
  max-width: 560px;
  margin: 0 auto;
}
/* Filter pill bar: sticks under nav on scroll */
.blog-filter-bar {
  background: white;
  padding: 0 48px;
  border-bottom: 1px solid rgba(197,149,26,0.10);
  position: sticky;
  top: 72px;
  z-index: 98;
  display: flex;
  overflow-x: auto;
  gap: 0;
}
.bfbtn {
  padding: 18px 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-light);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.bfbtn:hover { color: var(--saffron); }
.bfbtn.active {
  color: var(--saffron);
  border-bottom-color: var(--saffron);
}
.blog-section-wrap {
  padding-top: 70px;
  padding-bottom: 90px;
}
/* Newsletter CTA */
.blog-newsletter {
  background: linear-gradient(135deg, var(--green-deep), var(--green));
  padding: 80px 48px;
  color: white;
  position: relative;
  overflow: hidden;
}
.blog-newsletter::before {
  content: "";
  position: absolute;
  top: -50%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(245,166,35,0.18) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
.bn-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.bn-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  color: white;
  margin: 0 0 14px;
  line-height: 1.15;
}
.bn-text h2 em {
  font-style: italic;
  color: var(--mango);
  font-weight: 400;
}
.bn-text p {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.78);
  margin: 0;
}
.bn-form {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.bn-form input {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 100px;
  padding: 0 22px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: white;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.bn-form input::placeholder { color: rgba(255,255,255,0.45); }
.bn-form input:focus {
  border-color: var(--mango);
  background: rgba(255,255,255,0.12);
}
.bn-form .btn-primary { padding: 14px 26px; white-space: nowrap; }

@media (max-width: 900px) {
  .blog-hero { padding: 80px 20px 60px; }
  .blog-filter-bar { padding: 0 16px; }
  .bfbtn { padding: 16px 18px; font-size: 13px; }
  .blog-section-wrap { padding-top: 50px; padding-bottom: 70px; }
  .blog-newsletter { padding: 60px 20px; }
  .bn-inner { grid-template-columns: 1fr; gap: 28px; }
  .bn-form { flex-direction: column; }
  .bn-form input { padding: 14px 22px; }
}


/* ── Back to Top button ─────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 100px;
  right: 32px;
  z-index: 9200;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mango, #F5A623);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 0 0 rgba(245,166,35,0);
  opacity: 0;
  transform: translateY(16px) scale(0.85);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, background 0.25s ease;
  pointer-events: none;
}
#back-to-top.btt-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#back-to-top:hover {
  background: var(--mango-dark, #d4830a);
  box-shadow: 0 8px 28px rgba(0,0,0,0.30), 0 0 0 7px rgba(245,166,35,0.18);
  transform: translateY(-3px) scale(1.08);
}
#back-to-top:active { transform: translateY(0) scale(0.94); }
#back-to-top .btt-arrow { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* Progress ring */
#back-to-top .btt-ring {
  position: absolute;
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border-radius: 50%;
  pointer-events: none;
}
#back-to-top .btt-ring-track {
  fill: none;
  stroke: rgba(255,255,255,0.18);
  stroke-width: 2.5;
}
#back-to-top .btt-ring-fill {
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 163.36;
  stroke-dashoffset: 163.36;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 0.12s linear;
}
@media (max-width: 600px) {
  #back-to-top { bottom: 90px; right: 16px; width: 44px; height: 44px; }
}




#heroBg-mango     { background-image: url("../../assets/images/herobg-mango.webp"); }
#heroBg-pineapple { background-image: url("../../assets/images/herobg-pineapple.jpg"); }
#heroBg-kairi     { background-image: url("../../assets/images/herobg-kairi.jpg"); }
#heroBg-kokam     { background-image: url("../../assets/images/herobg-kokam.jpg"); }



      .ba-section { --ba-mango-img: url("../../assets/images/bg-bg.webp"); }