/* ================================================================
   SCROLL REVEAL  — shared across all pages
================================================================ */
.scroll-reveal { opacity: 1; }
.scroll-reveal.hidden { opacity: 0; transform: translateY(24px); }
.scroll-reveal.visible { animation: fadeUp 0.7s var(--ease-out, ease) forwards; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stagger-item { opacity: 0; }
.stagger-item.visible { animation: fadeUp 0.6s var(--ease-out, ease) forwards; }
.stagger-item:nth-child(2) { animation-delay: 0.15s !important; }
.stagger-item:nth-child(3) { animation-delay: 0.30s !important; }

/* ================================================================
   HERO ANIMATIONS  — shared across all pages
================================================================ */
.hero-zoom {
  animation: heroZoomIn 0.9s var(--ease-out, cubic-bezier(.22,1,.36,1)) forwards;
}
.hero-zoomin-delay-1 {
  opacity: 0;
  animation: heroZoomIn 0.8s var(--ease-out, ease) forwards 0.35s;
}
.hero-zoomin-delay-2 {
  opacity: 0;
  animation: heroZoomIn 0.8s var(--ease-out, ease) forwards 0.65s;
}
.hero-zoomin-delay-3 {
  opacity: 0;
  animation: heroZoomIn 0.8s var(--ease-out, ease) forwards 0.90s;
}
.hero-text-zoom {
  opacity: 0;
  animation: heroZoomIn 0.85s var(--ease-out, cubic-bezier(.22,1,.36,1)) forwards 0.35s;
}

@keyframes heroZoomIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ================================================================
   INTRO BAND  — shared across all pages
================================================================ */
.intro-band {
  background: var(--palm-brown, #9C1006);
  padding: 1.1rem 0;
}
.intro-band p {
  font-family: var(--font-sans, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  margin: 0;
  line-height: 1.5;
  text-align: center;
}

/* ================================================================
   INNER-PAGE HERO (.about-hero)  — shared across product / about pages
================================================================ */
.about-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  overflow: hidden;
  min-height: 74vh;
  display: flex;
  align-items: center;
}
.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(14,12,11,0.60) 0%, rgba(14,12,11,0.28) 55%, transparent 80%),
    radial-gradient(ellipse 55% 70% at 15% 60%, rgba(232,70,38,0.06) 0%, transparent 70%);
  z-index: 1;
}
.about-hero-inner { position: relative; z-index: 2; }
.about-hero .hero-eyebrow {
  font-family: var(--font-sans, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.9);
  margin-bottom: 1rem;
}
.about-hero .hero-title {
  font-family: var(--font-display, "Hanken Grotesk", system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 1.25rem;
}
.about-hero .hero-title .accent {
  position: relative;
  white-space: nowrap;
}
.about-hero .hero-title .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.04em;
  height: 0.12em;
  background: var(--palm-orange, #E84626);
  border-radius: 2px;
}
.about-hero .hero-body {
  font-family: var(--font-sans, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 18px;
  font-weight: 400;
  color: rgba(255,255,255,0.86);
  line-height: 1.6;
  max-width: 520px;
  margin-top: 28px;
  margin-bottom: 1.75rem;
}
@media (max-width: 767px) {
  .about-hero { min-height: 58vh; }
}

/* ================================================================
   SUSTAINABILITY SECTION (.sustain-section)  — shared base
================================================================ */
.sustain-section {
  background: var(--sustain-green, #004D24);
  padding: var(--space-24, 96px) 0;
  position: relative;
  overflow: hidden;
}
.sustain-section::after {
  content: 'RSPO';
  position: absolute;
  right: -2rem;
  bottom: -2rem;
  font-family: var(--font-display, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 16rem;
  font-weight: 800;
  color: rgba(255,255,255,0.04);
  pointer-events: none;
  line-height: 1;
}
.sustain-section .section-label  { color: rgba(232,240,232,0.65); }
.sustain-section .section-title  { color: #fff; }
.sustain-section .section-rule   { background: rgba(255,255,255,0.4); }
.sustain-section p {
  font-family: var(--font-sans, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 16px;
  color: rgba(255,255,255,0.8);
  line-height: 1.65;
  position: relative;
  z-index: 2;
}
.sustain-img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
}
.sustain-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-pill, 999px);
  padding: 0.45rem 1.1rem;
  font-family: var(--font-sans, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 2;
}
.sustain-pill .dot {
  width: 7px;
  height: 7px;
  background: #7ecba0;
  border-radius: 50%;
  flex: none;
}