:root {
  --forest: #063f22;
  --leaf: #0f7a39;
  --sap: #f29b13;
  --turmeric: #e99a12;
  --chilli: #8d1f19;
  --coriander: #c2a26f;
  --coconut: #f8f2df;
  --ink: #17140f;

  /* Fluid Spacing System */
  --space-xs: clamp(0.5rem, 1.5vw, 0.75rem);
  --space-sm: clamp(0.75rem, 2vw, 1.25rem);
  --space-md: clamp(1.25rem, 3.5vw, 2.25rem);
  --space-lg: clamp(2rem, 5vw, 3.5rem);
  --space-xl: clamp(3.5rem, 8vw, 6rem);
  --space-2xl: clamp(5rem, 12vw, 10rem);

  /* Centralized Overlap Shift */
  --overlap-shift: clamp(1.5rem, 4.5vw, 5rem);
}

/* Fluid Typography System */
.text-fluid-hero {
  font-size: clamp(2rem, min(7.5vw, 10vh), 6.5rem);
}
.text-fluid-ingredients {
  font-size: clamp(2rem, min(9vw, 13vh), 7.5rem);
}
.text-fluid-press-xl {
  font-size: clamp(2rem, 8vw, 9rem);
}
.text-fluid-press-lg {
  font-size: clamp(1.8rem, 6.5vw, 7rem);
}
.text-fluid-section-title {
  font-size: clamp(1.8rem, 4.5vw, 4.2rem);
}
.text-fluid-purity-title {
  font-size: clamp(1.8rem, 5vw, 3.8rem);
}
.text-fluid-table-title {
  font-size: clamp(2rem, 5.5vw, 5.2rem);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(242, 155, 19, .16), transparent 26rem),
    radial-gradient(circle at 96% 18%, rgba(15, 122, 57, .13), transparent 22rem),
    linear-gradient(180deg, #fffaf0 0%, #f9f2df 38%, #fffaf0 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  z-index: 50;
  background-image:
    linear-gradient(rgba(23, 20, 15, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 20, 15, .08) 1px, transparent 1px);
  background-size: 34px 34px;
  mix-blend-mode: multiply;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .18;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(23, 20, 15, .18) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(17deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 7px);
  mix-blend-mode: soft-light;
}

.brand-mark {
  width: 2.65rem;
  height: 2.65rem;
  display: inline-block;
  background: url('assets/logo.png') center/contain no-repeat;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.brand-mark:hover {
  transform: scale(1.08);
}

/* ── Journal Navbar Refinements ── */
.navbar-inner {
  background: rgba(255, 250, 240, 0.82) !important;
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(166, 83, 45, 0.15) !important;
  outline: 3px double rgba(242, 155, 19, 0.12);
  outline-offset: -4px;
  box-shadow:
    0 8px 25px rgba(6, 63, 34, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius: 9999px;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
  will-change: transform, background, box-shadow;
}

.navbar-inner.scrolled {
  background: rgba(255, 250, 240, 0.94) !important;
  outline-color: rgba(242, 155, 19, 0.04);
  box-shadow:
    0 12px 35px rgba(6, 63, 34, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: scale(0.98);
}

.brand-logo-text {
  font-family: "Playfair Display", serif;
  font-weight: 800 !important;
  font-size: 1.2rem !important;
}

.navbar-inner nav a {
  font-family: "DM Sans", sans-serif;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--forest) !important;
  position: relative;
  padding: 4px 8px;
  transition: color 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.navbar-inner nav a:hover {
  color: var(--sap) !important;
  transform: translateY(-1px);
}

.navbar-inner nav a:not(:last-child)::after {
  content: "•";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(166, 83, 45, 0.25);
  font-size: 8px;
  pointer-events: none;
}

.navbar-inner .magnetic {
  font-family: "DM Sans", sans-serif;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 7px 18px !important;
  border-radius: 9999px;
  background-color: var(--forest) !important;
  color: var(--coconut) !important;
  box-shadow: 0 4px 12px rgba(6, 63, 34, 0.15) !important;
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.3s ease, box-shadow 0.4s ease !important;
}

.navbar-inner .magnetic:hover {
  background-color: var(--sap) !important;
  color: var(--ink) !important;
  box-shadow: 0 6px 16px rgba(242, 155, 19, 0.25) !important;
}

.vertical-word {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.reveal {
  opacity: 0;
  transform: translateY(42px) rotate(.2deg);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .75, .18, 1);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

.split-line {
  display: block;
  overflow: hidden;
  margin-top: -0.1em;
  margin-bottom: -0.5em;
  margin-left: -0.15em;
  margin-right: -0.15em;
}

.split-line>span {
  display: block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(.19, 1, .22, 1);
  padding-top: 0.1em;
  padding-bottom: 0.5em;
  padding-left: 0.15em;
  padding-right: 0.15em;
  
  /* Stacked ambient occlusion text shadow for maximum depth */
  text-shadow:
    0 0.02em 0.04em rgba(6, 63, 34, 0.02),
    0 0.06em 0.12em rgba(6, 63, 34, 0.04),
    0 0.18em 0.36em rgba(6, 63, 34, 0.06),
    0 0.36em 0.72em rgba(6, 63, 34, 0.08);
}

/* Contrast gold stacked depth shadows for brand highlights */
.split-line>span em.text-sap {
  display: inline-block;
  text-shadow:
    0 0.02em 0.03em rgba(242, 155, 19, 0.08),
    0 0.05em 0.10em rgba(242, 155, 19, 0.12),
    0 0.12em 0.24em rgba(242, 155, 19, 0.16),
    0 0.24em 0.48em rgba(6, 63, 34, 0.10);
  transition: text-shadow 0.4s ease, transform 0.4s ease;
}

.in .split-line>span {
  transform: translateY(0);
}

.in .split-line:nth-child(2)>span {
  transition-delay: .12s;
}

.in .split-line:nth-child(3)>span {
  transition-delay: .24s;
}

.in .split-line:nth-child(4)>span {
  transition-delay: .36s;
}

/* ── Hero Section ───────────────────────────── */

.hero {
  position: relative;
  background-image:
    linear-gradient(to right, rgba(255, 250, 240, 0.75) 0%, rgba(255, 250, 240, 0.5) 35%, rgba(255, 250, 240, 0) 70%),
    url('assets/hero-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .hero {
    background-position: 80% center;
    background-image:
      linear-gradient(to bottom, rgba(255, 250, 240, 0.9) 0%, rgba(255, 250, 240, 0.7) 40%, rgba(255, 250, 240, 0.2) 100%),
      url('assets/hero-bg.png');
  }

  .text-fluid-hero {
    font-size: clamp(2.6rem, 9vw, 3.8rem) !important;
  }

  .hero p,
  .hero p.text-forest\/60 {
    color: rgba(6, 63, 34, 0.9) !important;
    font-weight: 400 !important;
  }
}

.hero-texture {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(242, 155, 19, .08) 0, transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(15, 122, 57, .06) 0, transparent 40%);
  mix-blend-mode: screen;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 40%, rgba(249, 242, 223, .6));
  pointer-events: none;
}

/* Floating spice orbs */
.hero-spice {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.hero-spice--1 {
  width: clamp(6px, 1.2vw, 14px);
  height: clamp(6px, 1.2vw, 14px);
  background: radial-gradient(circle, rgba(242, 155, 19, .9), rgba(242, 155, 19, .2));
  top: 18%;
  left: 12%;
  animation: heroFloat 6s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(242, 155, 19, .4);
}

.hero-spice--2 {
  width: clamp(4px, .8vw, 10px);
  height: clamp(4px, .8vw, 10px);
  background: radial-gradient(circle, rgba(141, 31, 25, .85), rgba(141, 31, 25, .15));
  top: 32%;
  right: 22%;
  animation: heroFloat 8s ease-in-out 1.2s infinite;
  box-shadow: 0 0 10px rgba(141, 31, 25, .35);
}

.hero-spice--3 {
  width: clamp(8px, 1.5vw, 18px);
  height: clamp(8px, 1.5vw, 18px);
  background: radial-gradient(circle, rgba(194, 162, 111, .8), rgba(194, 162, 111, .15));
  bottom: 28%;
  left: 38%;
  animation: heroFloat 7s ease-in-out 2.4s infinite;
  box-shadow: 0 0 16px rgba(194, 162, 111, .3);
}

.hero-spice--4 {
  width: clamp(5px, 1vw, 12px);
  height: clamp(5px, 1vw, 12px);
  background: radial-gradient(circle, rgba(15, 122, 57, .8), rgba(15, 122, 57, .2));
  top: 55%;
  left: 65%;
  animation: heroFloat 9s ease-in-out 3.6s infinite;
  box-shadow: 0 0 10px rgba(15, 122, 57, .3);
}

.hero-spice--5 {
  width: clamp(3px, .6vw, 8px);
  height: clamp(3px, .6vw, 8px);
  background: radial-gradient(circle, rgba(242, 155, 19, .7), rgba(242, 155, 19, .1));
  bottom: 18%;
  right: 15%;
  animation: heroFloat 5.5s ease-in-out .8s infinite;
  box-shadow: 0 0 8px rgba(242, 155, 19, .25);
}

/* Hero product staging removed - using assets/hero-bg.png */

/* Hero accent line */
.hero-accent {
  position: absolute;
  left: clamp(1.5rem, 4vw, 5rem);
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(6, 63, 34, .15) 30%, rgba(6, 63, 34, .15) 70%, transparent);
}

/* Hero badge */
.hero-badge {
  position: absolute;
  top: clamp(5.5rem, 12vh, 8rem);
  right: clamp(1.5rem, 4vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .65rem .8rem;
  border: 1px solid rgba(6, 63, 34, .18);
  border-radius: .5rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--forest);
  backdrop-filter: blur(6px);
  background: rgba(6, 63, 34, .04);
}

.hero-badge span {
  font-size: .85rem;
  color: var(--sap);
  letter-spacing: 0;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 3rem);
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.hero-scroll__line {
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(180deg, rgba(6, 63, 34, .4), transparent);
  animation: heroPulse 2s ease-in-out infinite;
}

.hero-scroll__text {
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(6, 63, 34, .35);
}

/* Hero keyframes */
@keyframes heroFloat {

  0%,
  100% {
    transform: translateY(0) translateX(0);
  }

  33% {
    transform: translateY(-12px) translateX(5px);
  }

  66% {
    transform: translateY(6px) translateX(-7px);
  }
}

@keyframes heroDrift {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -14px;
  }
}

@keyframes heroPulse {

  0%,
  100% {
    opacity: .4;
    transform: scaleY(1);
  }

  50% {
    opacity: 1;
    transform: scaleY(1.15);
  }
}

/* Hero responsive */
@media (max-width: 760px) {
  .hero-accent {
    display: none;
  }

  .hero-badge {
    top: auto;
    bottom: 6rem;
    right: 1rem;
    background: rgba(255, 250, 240, .7);
    border-color: rgba(6, 63, 34, .25);
  }
}

/* removed hero-products media query */

.macro {
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .84), transparent 8rem),
    radial-gradient(circle at 48% 56%, rgba(242, 155, 19, .92), transparent 15rem),
    radial-gradient(circle at 72% 24%, rgba(141, 31, 25, .65), transparent 11rem),
    radial-gradient(circle at 76% 82%, rgba(15, 122, 57, .72), transparent 14rem),
    radial-gradient(circle at 18% 78%, rgba(194, 162, 111, .78), transparent 11rem),
    linear-gradient(130deg, #25170f 0%, #f6e6bc 39%, #fff6de 58%, #0a3a21 100%);
  filter: saturate(1.05);
}

.leaf-cut {
  clip-path: polygon(6% 7%, 92% 0, 100% 74%, 70% 100%, 0 89%);
}

.arch-cut {
  clip-path: polygon(0 16%, 20% 4%, 50% 0, 79% 4%, 100% 17%, 100% 100%, 0 100%);
}

.section-viewport {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 5rem;
  padding-bottom: 2rem;
}

@media (min-width: 768px) {
  .section-viewport {
    padding-top: 6rem;
    padding-bottom: 4rem;
  }
}

.ingredient-stage {
  height: auto;
  min-height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-xl) var(--space-xl) !important;
  background-color: var(--bg-content);
  color: var(--text-color);
  transition: background-color 0.4s ease, color 0.4s ease;
  gap: var(--space-lg);
}

.stage-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: clamp(26rem, 44vw, 38rem);
}

@media (min-width: 769px) {
  .ingredient-stage[data-align="right"] {
    flex-direction: row-reverse;
  }
}

.scrollbar-none {
  scrollbar-width: none;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* Wavy background partition */
.stage-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.stage-wave svg {
  width: 100%;
  height: 100%;
}



/* Product image container */
.constellation-img {
  position: relative !important;
  width: clamp(20rem, 38vw, 34rem);
  z-index: 3;
  pointer-events: none;
  animation: constellationFloatDesktop 9s ease-in-out infinite;
  will-change: transform;
  filter: drop-shadow(4px 12px 16px rgba(0, 0, 0, 0.08)) drop-shadow(15px 35px 50px rgba(0, 0, 0, 0.12));
  flex-shrink: 0;
  margin: 0 !important;
}

.constellation-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}



@keyframes constellationFloatDesktop {
  0%, 100% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(-12px);
  }
  66% {
    transform: translateY(8px);
  }
}



@media (max-width: 768px) {
  .ingredient-stage {
    flex-direction: column;
    justify-content: flex-start !important;
    height: auto !important;
    padding: var(--space-xl) var(--space-md) !important;
    background-color: var(--bg-content) !important;
  }

  .stage-wave {
    display: none !important;
  }

  .stage-content {
    order: 1;
    max-width: 100%;
    text-align: left !important;
    padding-bottom: 2rem;
  }

  .stage-content p {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  .constellation-img {
    order: 2;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: clamp(16rem, 55vw, 24rem) !important;
    height: auto !important;
    margin: 1.5rem auto 0 !important;
    opacity: 1 !important;
    transform: rotate(var(--rot, 0deg)) !important;
    animation: constellationFloatMobile 9s ease-in-out infinite !important;
    will-change: transform;
    filter: drop-shadow(4px 10px 15px rgba(0, 0, 0, 0.12)) drop-shadow(15px 30px 45px rgba(6, 63, 34, 0.15)) !important;
    z-index: 10;
  }

  .ingredient-stage[data-align="right"] .constellation-img {
    left: auto !important;
    right: auto !important;
  }
}

@keyframes constellationFloatMobile {
  0%, 100% {
    transform: translateY(0) rotate(var(--rot, 0deg));
  }
  33% {
    transform: translateY(-8px) rotate(var(--rot, 0deg));
  }
  66% {
    transform: translateY(6px) rotate(var(--rot, 0deg));
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .constellation-img {
    width: clamp(16rem, 28vw, 22rem);
    right: clamp(1.5rem, 4vw, 5rem);
  }

  .ingredient-stage[data-align="right"] .constellation-img {
    left: clamp(1.5rem, 4vw, 5rem);
  }
}

/* ── The Proof of Purity ─────────────────────── */

.purity-section {
  background-color: #f7efe2;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl) 0 !important;
}

.purity-header {
  margin-bottom: 1.2rem;
  position: relative;
  z-index: 5;
}

.purity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  width: 100%;
  align-items: center;
  position: relative;
  margin-bottom: 2rem;
}

.purity-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(18rem, 40vh, 26rem);
  padding: 1.5rem 1.5rem;
}

@media (min-width: 1024px) {
  .purity-item--0 {
    transform: translateY(-1.5rem);
  }

  .purity-item--100 {
    transform: translateY(1rem);
  }

  .purity-item--8 {
    transform: translateY(-0.5rem);
  }
}

/* Foreground content typography */
.purity-content {
  position: relative;
  z-index: 3;
}

.purity-val {
  display: block;
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 0.95;
  margin-bottom: 1rem;
}

.purity-title {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 0.8rem;
  line-height: 1.25;
}

.purity-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  font-weight: 400;
}

/* Vertical dividers */
.purity-divider {
  position: absolute;
  top: 15%;
  bottom: 5%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(6, 63, 34, 0.07) 15%, rgba(6, 63, 34, 0.07) 85%, transparent);
  z-index: 1;
}

.purity-divider--1 {
  left: 33.333%;
}

.purity-divider--2 {
  left: 66.666%;
}

/* Responsive Editorial Layout overrides */
@media (max-width: 1023px) {
  .purity-section {
    height: auto;
    padding: var(--space-xl) var(--space-md) !important;
    overflow-y: visible;
  }

  .purity-grid {
    grid-template-columns: 1fr;
    gap: 4.5rem;
    margin-top: 1.5rem;
  }

  .purity-item {
    min-height: auto;
    padding: 2rem 0;
    transform: none !important;
  }

  .purity-divider {
    display: none;
  }
}

.press-track {
  height: 600vh;
  height: 600dvh;
  position: relative;
  background: #10281b;
  color: #fff8e9;
}

.press-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

.press-strip {
  display: flex;
  height: 100%;
  width: 600vw;
  will-change: transform;
}

.press-scene {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  flex: 0 0 100vw;
  display: grid;
  place-items: center;
  padding: var(--space-md) var(--space-lg);
  position: relative;
  overflow: hidden;
}



/* Chapter interactive subtexts */
.press-subtext {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(1.05rem, 1.25vw, 1.3rem);
  line-height: 1.7;
  font-weight: 300;
  letter-spacing: 0.03em;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  display: inline-block;
}

/* For dark backgrounds (Scenes 1, 2, 3, 6) */
.press-scene:not(.text-ink) .press-subtext {
  color: rgba(248, 242, 223, 0.7);
}

.press-scene:not(.text-ink) .press-subtext:hover {
  color: rgba(248, 242, 223, 1);
  transform: translateY(-2px);
}

/* For light backgrounds (Scenes 4, 5) */
.press-scene.text-ink .press-subtext {
  color: rgba(23, 20, 15, 0.68);
}

.press-scene.text-ink .press-subtext:hover {
  color: rgba(23, 20, 15, 1);
  transform: translateY(-2px);
}

/* Phrase highlighting and underlines */
.highlight-phrase {
  position: relative;
  font-weight: 500;
  color: var(--sap);
  transition: all 0.4s ease;
  display: inline-block;
}

.press-scene.text-ink .highlight-phrase {
  color: var(--forest);
}

.highlight-phrase::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0.6;
}

.press-subtext:hover .highlight-phrase::after,
.highlight-phrase:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.oil-thread {
  position: absolute;
  width: min(22vw, 14rem);
  height: 62vh;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(245, 181, 62, .8), rgba(242, 155, 19, .16));
  filter: blur(2px);
  opacity: .68;
  transform: skewX(-7deg);
}


/* ── Biography Section ──────────────────────── */
.biography-section {
  position: relative;
  background-color: #063f22;
  padding-top: clamp(4rem, 8vw, 7rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

.identity {
  border-top: 1.5px solid rgba(255, 255, 255, 0.12);
  border-bottom: none !important;
  background: transparent !important;
  transition: border-color 0.5s ease, background-color 0.5s ease;
}

.identity:hover {
  border-top-color: var(--sap);
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* ── Journey Section (From Farm to Family) ────── */
.journey-section {
  position: relative;
  background-color: #fffaf0;
}

.journey-header {
  padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem);
  position: relative;
  z-index: 5;
  background: #fffaf0;
}

/* Chapter card */
.journey-chapter {
  position: relative;
  min-height: 35vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chapter-bg);
  color: var(--chapter-text);
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}

/* Subtle organic paper-like texture overlay */
.journey-chapter-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Organic wavy divider at top of each chapter */
.journey-chapter-divider-top {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: clamp(3rem, 7vw, 6rem);
  z-index: 3;
  pointer-events: none;
  line-height: 0;
}

.journey-chapter-divider-top svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Content inner */
.journey-chapter-inner {
  position: relative;
  z-index: 5;
  max-width: 42rem;
  width: 100%;
  text-align: center;
}

/* Step number */
.journey-chapter-number {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chapter-accent);
  opacity: 0.7;
  margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
  position: relative;
}

.journey-chapter-number::before,
.journey-chapter-number::after {
  content: '';
  position: absolute;
  top: 50%;
  width: clamp(1.5rem, 4vw, 3rem);
  height: 1px;
  background: var(--chapter-accent);
  opacity: 0.3;
}

.journey-chapter-number::before {
  right: calc(100% + 0.75rem);
}

.journey-chapter-number::after {
  left: calc(100% + 0.75rem);
}

/* Display title */
.journey-chapter-title {
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--chapter-text);
  margin-bottom: clamp(1rem, 2.5vw, 2rem);
  text-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Body text */
.journey-chapter-text {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.75;
  color: var(--chapter-text);
  opacity: 0.72;
  max-width: 32rem;
  margin: 0 auto;
  font-weight: 300;
}

/* Last chapter (Kitchen) transitions to the next section */
.journey-chapter[data-chapter="kitchen"] {
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

/* ── Journey Responsive ── */
@media (max-width: 768px) {
  .journey-chapter {
    min-height: auto;
    padding: clamp(4rem, 12vw, 6rem) clamp(1.25rem, 5vw, 2rem);
  }

  .journey-chapter-inner {
    text-align: left;
  }

  .journey-chapter-title {
    font-size: clamp(2.4rem, 12vw, 4rem);
  }

  .journey-chapter-text {
    margin: 0;
  }

  .journey-chapter-divider-top {
    height: clamp(2rem, 5vw, 3rem);
  }

  .journey-chapter-number::before,
  .journey-chapter-number::after {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .journey-chapter-title {
    font-size: clamp(3rem, 6vw, 5rem);
  }
}

.magnetic {
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

/* Rotation helper classes */
.r-n8 {
  --r: -8deg;
}

.r-10 {
  --r: 10deg;
}

.r-14 {
  --r: 14deg;
}

.r-n14 {
  --r: -14deg;
}

/* ── Kitchens Across India Redesign ──────────────── */
.kitchens-section {
  position: relative;
  background-color: #fffaf0;
  overflow: hidden;
  padding-top: clamp(4rem, 8vw, 7rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}



.kitchens-path {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.kitchens-moment {
  position: relative;
  z-index: 10;
  transition: transform 0.5s ease;
}

.kitchens-moment-time {
  letter-spacing: 0.25em;
  font-weight: 900;
}

.kitchens-moment-text {
  position: relative;
  z-index: 10;
}

.kitchens-moment-media {
  position: relative;
  z-index: 20;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (min-width: 1024px) {
  .kitchens-moment--morning .kitchens-moment-media {
    transform: translateX(calc(-1 * var(--overlap-shift)));
  }

  .kitchens-moment--afternoon .kitchens-moment-media {
    transform: translateX(var(--overlap-shift));
  }

  .kitchens-moment--festival .kitchens-moment-media {
    transform: translateX(calc(-1 * var(--overlap-shift)));
  }
}

.kitchens-moment-img {
  max-height: clamp(24rem, 46vh, 38rem);
  width: auto;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(2px 5px 8px rgba(0, 0, 0, 0.15)) drop-shadow(15px 35px 45px rgba(6, 63, 34, 0.18)) drop-shadow(35px 75px 90px rgba(0, 0, 0, 0.12));
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.kitchens-moment-img--oil {
  transform: rotate(4deg);
}

.kitchens-moment-img--oil:hover {
  transform: rotate(7deg) scale(1.05);
}

.kitchens-moment-img--coriander {
  transform: rotate(-5deg);
}

.kitchens-moment-img--coriander:hover {
  transform: rotate(-2deg) scale(1.05);
}

.kitchens-moment-img--turmeric {
  transform: rotate(-6deg) translate(24px, 16px);
  z-index: 5;
}

.kitchens-moment-img--turmeric:hover {
  transform: rotate(-9deg) translate(24px, 16px) scale(1.05);
}

.kitchens-moment-img--chilli {
  transform: rotate(8deg) translate(-24px, -12px);
  z-index: 6;
}

.kitchens-moment-img--chilli:hover {
  transform: rotate(11deg) translate(-24px, -12px) scale(1.05);
}



/* ── Colours of Flavour Redesign ────────────────── */
.colours-section {
  position: relative;
  background-color: #0b110e;
  overflow: hidden;
  padding-top: clamp(4rem, 8vw, 7rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}



.colours-palette {
  transition: all 0.5s ease;
  z-index: 10;
  position: relative;
}

/* Dim and scale inactive columns when one is hovered */
.colours-palette:has(.colours-item:hover) .colours-item:not(:hover) {
  opacity: 0.35;
  transform: scale(0.97);
  filter: blur(1px) grayscale(0.25);
}

.colours-item {
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.colours-media {
  z-index: 2;
}

.colours-pack {
  max-height: clamp(16rem, 28vh, 23rem);
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(4px 12px 18px rgba(0, 0, 0, 0.24)) drop-shadow(15px 35px 50px rgba(0, 0, 0, 0.38));
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  transform: rotate(var(--rot, 0deg));
}

.colours-item--turmeric .colours-pack {
  --rot: -5deg;
}

.colours-item--chilli .colours-pack {
  --rot: 6deg;
}

.colours-item--coriander .colours-pack {
  --rot: -4deg;
}

.colours-item:hover .colours-pack {
  transform: rotate(calc(var(--rot) * 1.4)) scale(1.06) translateY(-0.5rem);
}



/* Tablet & Smaller Layout Breakpoint Adaptations */
@media (max-width: 1023px) {
  .kitchens-moment {
    flex-direction: column !important;
    text-align: left;
    gap: 3rem;
  }

  .kitchens-moment-text {
    width: 100% !important;
    max-width: 100%;
  }

  .kitchens-moment-media {
    width: 100% !important;
    margin-top: 1rem;
  }

  .kitchens-moment-img {
    max-height: clamp(14rem, 25vh, 20rem);
    margin: 0 auto;
  }

  .kitchens-moment--afternoon {
    flex-direction: column !important;
  }

  .kitchens-festival-group {
    justify-content: center;
    width: 100%;
  }

  .colours-palette {
    flex-direction: column !important;
    gap: 6rem;
  }

  .colours-item {
    width: 100% !important;
    transform: none !important;
  }

  .colours-media {
    transform: none !important;
  }

  .colours-pack {
    max-height: clamp(14rem, 25vh, 20rem);
  }

  .colours-info {
    margin-top: 2rem !important;
  }

  /* Press Scene 5 Overlap and Bottle Heights Override */
  .press-scene:has(.press-bottles) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.5rem !important;
    padding: 3rem 1.5rem 2rem !important;
  }

  .press-scene:has(.press-bottles) .press-bottles-info {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-top: 0 !important;
  }

  .press-scene:has(.press-bottles) .press-bottles-info h3 {
    font-size: 2.2rem !important;
  }

  .press-scene:has(.press-bottles) .press-bottles {
    margin-bottom: 0 !important;
    gap: 1rem !important;
  }

  .press-scene:has(.press-bottles) .bottle-img--lg {
    height: clamp(9rem, 22vh, 14rem) !important;
  }

  .press-scene:has(.press-bottles) .bottle-img--md {
    height: clamp(7.5rem, 18vh, 11rem) !important;
  }

  .press-scene:has(.press-bottles) .bottle-img--sm {
    height: clamp(6rem, 14vh, 9.5rem) !important;
  }
}

/* Pouch customization helper classes */
.pouch-turmeric {
  --powder: #e99a12;
  --trim: #b6b6ad;
}

.pouch-chilli {
  --powder: #8d1f19;
  --trim: #8d1f19;
}

.pouch-coriander {
  --powder: #c2a26f;
  --trim: #0f7a39;
}

@media (max-width: 760px) {
  .ingredient-orb {
    width: min(92vw, 42vh);
    right: -38vw;
    opacity: .55;
  }

  .press-strip {
    width: 600vw;
  }

  .vertical-word {
    writing-mode: horizontal-tb;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Trust, CTA, and Footer Redesign (Phase 4) ── */
.table-climax-section {
  padding-top: clamp(4rem, 8vw, 7rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

.trust-section {
  padding-top: clamp(4rem, 8vw, 7rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

.trust-section .grid {
  background-color: transparent !important;
  gap: 0 !important;
}

.trust-section .reveal {
  background-color: transparent !important;
  border: none !important;
  transition: background-color 0.4s ease;
}

.trust-section .reveal:hover {
  background-color: rgba(255, 255, 255, 0.35) !important;
}

@media (min-width: 768px) {
  .trust-section .grid>div:not(:last-child) {
    border-right: 1px solid rgba(166, 83, 45, 0.2) !important;
  }
}

@media (max-width: 767px) {
  .trust-section .grid>div:not(:last-child) {
    border-bottom: 1px solid rgba(166, 83, 45, 0.2) !important;
  }
}

.cta-section {
  background-color: #fffaf0;
  position: relative;
  padding-top: clamp(4rem, 8vw, 7rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

.cta-product-lineup {
  position: relative;
  height: clamp(22rem, 45vh, 32rem);
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
}

.cta-img {
  position: absolute;
  bottom: 0;
  opacity: 0;
  will-change: transform, opacity;
  max-height: 100%;
  filter: drop-shadow(2px 5px 8px rgba(0, 0, 0, 0.08)) drop-shadow(10px 25px 35px rgba(6, 63, 34, 0.1));
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-img--turmeric {
  left: 0;
  height: 82%;
  z-index: 10;
  transform: rotate(-14deg) translate3d(2rem, 5rem, 0);
}

.cta-img--oil {
  left: 50%;
  transform: translate3d(-50%, 7rem, 0) rotate(-2deg);
  height: 98%;
  z-index: 20;
}

.cta-img--chilli {
  right: 0;
  height: 82%;
  z-index: 15;
  transform: rotate(12deg) translate3d(-2rem, 5rem, 0);
}

.reveal.in .cta-img {
  opacity: 1;
}

.reveal.in .cta-img--turmeric {
  transform: rotate(-10deg) translate3d(2rem, 0, 0);
  transition-delay: 0.15s;
}

.reveal.in .cta-img--oil {
  transform: translate3d(-50%, 0, 0) rotate(-2deg);
  transition-delay: 0.35s;
}

.reveal.in .cta-img--chilli {
  transform: rotate(8deg) translate3d(-2rem, 0, 0);
  transition-delay: 0.55s;
}

.cta-img:hover {
  z-index: 25;
  filter: drop-shadow(4px 12px 20px rgba(0, 0, 0, 0.14)) drop-shadow(20px 45px 60px rgba(6, 63, 34, 0.18));
}

/* ── Final CTA Section Mobile Overhaul ── */
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

@media (max-width: 1023px) {
  .cta-section {
    padding: clamp(4rem, 10vw, 6rem) clamp(1.25rem, 5vw, 2.5rem) !important;
  }

  .cta-section .grid {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: clamp(2.5rem, 6vw, 4rem) !important;
    text-align: center !important;
  }

  /* Headline & Text Rhythm */
  .cta-section h2 {
    font-size: clamp(2.1rem, 7.5vw, 2.9rem) !important;
    line-height: 1.12 !important;
    margin-top: 0.75rem !important;
    max-width: 28rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Dedicated Mobile Visual Hero Area */
  .cta-section .reveal.lg\:col-span-6 {
    min-height: auto !important;
    height: clamp(16rem, 35vh, 22rem) !important;
    margin-bottom: 0.5rem !important;
    width: 100% !important;
  }

  .cta-product-lineup {
    height: 100% !important;
    max-width: 18rem !important; /* Elegant 3D cluster bounds */
    margin: 0 auto !important;
    position: relative !important;
    display: block !important;
  }

  .cta-img {
    position: absolute !important;
    bottom: 0 !important;
    opacity: 0 !important; /* Hidden initially for reveal animation */
    max-height: 100% !important;
    left: auto !important;
    right: auto !important;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Staggered offsets for 3D overlap visual */
  .cta-img--turmeric {
    left: -2rem !important;
    height: 84% !important;
    transform: rotate(-14deg) translate3d(-1rem, 3rem, 0) !important;
    z-index: 10 !important;
  }

  .cta-img--oil {
    left: 50% !important;
    transform: translate3d(-50%, 4rem, 0) rotate(-2deg) !important;
    height: 98% !important;
    z-index: 20 !important;
  }

  .cta-img--chilli {
    right: -2rem !important;
    height: 84% !important;
    transform: rotate(10deg) translate3d(1rem, 3rem, 0) !important;
    z-index: 15 !important;
  }

  /* Reveal states triggered on scroll */
  .reveal.in .cta-img {
    opacity: 1 !important;
  }

  .reveal.in .cta-img--turmeric {
    transform: rotate(-9deg) translate3d(0, 0, 0) !important;
    transition-delay: 0.1s !important;
  }

  .reveal.in .cta-img--oil {
    transform: translate3d(-50%, 0, 0) rotate(-2deg) !important;
    transition-delay: 0.25s !important;
  }

  .reveal.in .cta-img--chilli {
    transform: rotate(7deg) translate3d(0, 0, 0) !important;
    transition-delay: 0.4s !important;
  }

  /* Mobile CTA Buttons Grid layout */
  .cta-section .flex.flex-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
    max-width: 28rem !important;
    margin: 2rem auto 0 !important;
    gap: 0.75rem !important;
  }

  /* Primary Button - full width, visually dominant */
  .cta-section .flex.flex-wrap a:first-child {
    grid-column: span 2 !important;
    padding: 1.1rem 2rem !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.05em !important;
    background-color: var(--forest) !important;
    color: var(--coconut) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
  }

  /* Secondary Buttons - half width each */
  .cta-section .flex.flex-wrap a:not(:first-child) {
    grid-column: span 1 !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.85rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 9999px !important;
    font-weight: 500 !important;
  }
}

footer {
  background: var(--forest);
  color: rgba(248, 242, 223, 0.75);
  border: none !important;
  border-radius: 1.5rem;
  padding: 2.5rem 3rem;
  box-shadow: 0 20px 40px rgba(6, 63, 34, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

footer p.text-forest {
  color: var(--coconut) !important;
}

footer a {
  color: var(--sap);
  transition: color 0.3s ease;
}

footer a:hover {
  color: #fff;
}

/* ── Woodpressed Oil Bottles Card Sizing ── */
.press-bottles {
  margin-bottom: 2.5rem;
  transition: transform 0.5s ease;
  z-index: 10;
}

.bottle-img {
  width: auto;
  object-fit: contain;
  filter: drop-shadow(4px 10px 15px rgba(0, 0, 0, 0.12));
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
  will-change: transform;
}

.bottle-img--lg {
  height: clamp(16rem, 32vh, 23rem);
}

.bottle-img--md {
  height: clamp(13rem, 26vh, 18.5rem);
}

.bottle-img--sm {
  height: clamp(10rem, 20vh, 14.5rem);
}

/* Individual hover lifts */
.bottle-img:hover {
  transform: translateY(-0.75rem) scale(1.03);
  filter: drop-shadow(8px 20px 25px rgba(6, 63, 34, 0.18));
}

/* Large Screen & Ultrawide Layout Overrides for Press Scene */
@media (min-width: 1024px) {
  /* Side-by-side balanced editorial layout */
  .press-scene:has(.press-bottles) {
    display: flex !important;
    flex-direction: row-reverse !important; /* bottles right, text left */
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(4rem, 8vw, 10rem) !important;
    padding: var(--space-xl) clamp(4rem, 10vw, 12rem) !important;
  }

  /* Optical centering for text content details */
  .press-scene:has(.press-bottles) .press-bottles-info {
    position: static !important;
    max-width: clamp(26rem, 30vw, 34rem) !important;
    text-align: left !important;
  }

  /* Align bottles container and remove layout margin */
  .press-scene:has(.press-bottles) .press-bottles {
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: end !important;
    gap: clamp(1.5rem, 2.5vw, 3.5rem) !important;
  }

  /* Fluid, prominent scaling for product imagery */
  .press-scene:has(.press-bottles) .bottle-img--lg {
    height: clamp(22rem, 45vh, 38rem) !important;
  }

  .press-scene:has(.press-bottles) .bottle-img--md {
    height: clamp(18rem, 37vh, 31rem) !important;
  }

  .press-scene:has(.press-bottles) .bottle-img--sm {
    height: clamp(14rem, 29vh, 24rem) !important;
  }
}