/* =====================================================
   SHIFA BOTANICAL WELLNESS - style.css
   ===================================================== */
:root {
  --navy: #14336b;
  --gold: #b08d3f;
  --gold-light: #d9c48a;
  --gold-deep: #8a6a24;
  --ink: #23392f;
  --emerald: #1f4a3a;
  --emerald-dark: #163a2d;
  --cream: #faf6ee;
  --beige: #f3ecdd;
  --line: rgba(176, 141, 63, 0.3);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
  color: var(--ink);
  line-height: 1.7;
  background: var(--beige);
}
section { scroll-margin-top: 7rem; }
a { color: inherit; }
img { max-width: 100%; }


/* =====================================================
   MENU BAR (soft glass at the top, solid green on scroll)
   ===================================================== */
.hero-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  min-height: 100px;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
  background: rgba(250, 246, 238, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(176, 141, 63, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transition: background 0.4s, min-height 0.4s, box-shadow 0.4s;
}
.hero-nav.scrolled {
  min-height: 70px;
  background: var(--emerald);
  border-bottom-color: transparent;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Logo image (logo-nav.png) */
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.logo img {
  display: block;
  height: 70px;                  /* logo size at the top */
  width: auto;
  transition: height 0.4s;
}
.hero-nav.scrolled .logo img {
  height: 50px;                  /* logo size after scrolling */
  padding: 4px 10px;
  background: var(--cream);
  border-radius: 999px;
}

/* Menu links */
nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
nav a {
  position: relative;
  margin-left: 1.75rem;
  text-decoration: none;
  color: var(--emerald);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.3s;
}
nav a:hover { color: var(--gold); }
nav a:hover::after { width: 100%; }
.hero-nav.scrolled nav a { color: var(--cream); }
.hero-nav.scrolled nav a:hover { color: var(--gold-light); }


/* =====================================================
   HERO - scales as ONE picture on every laptop/monitor.
   Everything inside is sized as a % of the hero width,
   so the products stay on the wood and the text stays put.
   ===================================================== */
.hero {
  /* ---------- PRODUCT CONTROLS (change only these) ---------- */
  --p-size: 42%;        /* SIZE of the products (as % of the hero width) */
  --p-center: 28%;      /* LEFT / RIGHT: where the middle of the products sits */
  --p-bottom: 15vw;      /* UP / DOWN: bigger = higher */

  /* ---------- TEXT CONTROLS ---------- */
  --t-width: 40vw;       /* width of the text column */
  --t-right: 3%;        /* gap between the text and the right edge */

  position: relative;
  width: 100%;
  height: min(56.25vw, 100vh);   /* 16:9 of the width, but never taller than the screen */             /* <-- your moringa-hero.jpg width / height */
  overflow: hidden;
  color: var(--ink);
  background: var(--beige);
  animation: rise 1.2s ease both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}

/* Photo layer: slowly zooms towards the products */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("moringa-hero.jpg") left bottom / cover no-repeat;
  transform-origin: 25% 55%;                        /* zoom centre = the products */
  animation: slow-zoom 18s ease-in-out infinite alternate;
}
@keyframes slow-zoom {
  from { scale: 1; }
  to   { scale: 1.08; }                             /* 1.05 subtle, 1.12 stronger */
}

/* Cream fade behind the text */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(270deg, rgba(250, 246, 238, 0.92) 0%, rgba(250, 246, 238, 0.75) 30%, rgba(250, 246, 238, 0) 55%);
}

/* Sunlight sweeping across the products */
.hero-light {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 240, 200, 0.45) 50%, transparent 60%);
  background-size: 250% 100%;
  mix-blend-mode: soft-light;
  animation: sun-sweep 8s ease-in-out 1.5s infinite;
}
@keyframes sun-sweep {
  0%        { background-position: 130% 0; }
  45%, 100% { background-position: -30% 0; }        /* sweeps, then pauses */
}


/* ---------- Floating products ---------- */
.hero-float {
  position: absolute;
  z-index: 5;
  width: var(--p-size);
  left: calc(var(--p-center) - var(--p-size) / 2);
  bottom: var(--p-bottom);
  height: auto;
  pointer-events: none;
  filter:
    drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35))
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.15));
  animation: hero-sit 5s ease-in-out infinite;    /* SPEED: 3s faster, 8s slower */
}
@keyframes hero-sit {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }                 /* FLOAT HEIGHT */
}

/* Soft shadow on the wood under the products */
.hero-shadow {
  position: absolute;
  z-index: 4;
  width: var(--p-size);
  left: calc(var(--p-center) - var(--p-size) / 2);
  bottom: calc(var(--p-bottom) - 0.8vw);
  height: 1.6vw;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45), transparent 70%);
  pointer-events: none;
  animation: shadow-pulse 5s ease-in-out infinite;
}
@keyframes shadow-pulse {
  0%, 100% { opacity: 1;   scale: 1; }
  50%      { opacity: 0.7; scale: 0.95; }
}

/* ---------- Text column on the right ---------- */
.hero-inner {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  right: var(--t-right);
  width: var(--t-width);
  padding-top: 120px;                 /* space for the menu bar */
  padding-bottom: 2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;            /* text block sits in the middle, top to bottom */
  text-align: center;
}

/* Leaf with gold lines */
.hero-ornament {
  display: flex;
  align-items: center;
  gap: 0.75vw;
  margin-bottom: 0.3vw;
  color: var(--gold);
}
.hero-ornament::before,
.hero-ornament::after {
  content: "";
  width: 6vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.hero-ornament::after { transform: scaleX(-1); }
.hero-ornament svg { width: max(1.2rem, 1.6vw); height: max(1.2rem, 1.6vw); fill: currentColor; }

/* Two-line heading */
.hero h1 {
  margin: 0 0 0.5vw;
  font-family: Cinzel, Georgia, serif;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.hero h1 .line1 {
  display: block;
  font-size: 3rem;                                  /* fallback for old browsers */
  font-size: clamp(1.6rem, 3vw, 5.5rem);           /* "THE KING OF" size */
  color: var(--emerald);
}
.hero h1 .line2 {
  display: block;
  font-size: 3.8rem;
  font-size: clamp(2rem, 3.8vw, 7rem);             /* "MIRACLE TREE" size */
  background: linear-gradient(180deg, #e2c77a 0%, #b08d3f 55%, #8a6a24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}

/* Round logo */
.hero-logo-mark {
  display: block;
  width: 7rem;
  width: max(4.5rem, 7vw);                         /* logo size */
  height: auto;
  margin: 0 auto 0.5vw;
}

/* Subtitle */
.hero-sub {
  margin: 0 0 1vw;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.72rem;
  font-size: max(0.65rem, 0.72vw);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Four badges */
.hero-badges {
  display: grid;
  --bw: 4vw;                       /* badge width */
  --bgap: 0.5vw;                   /* space between badges */
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: 1.25vw;  
  flex-wrap: nowrap;
  max-width: none;                                   /* space between badges */
  margin-bottom: 1vw;
}
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3vw;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.58rem;
  font-size: max(0.5rem, 0.55vw);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.badge-icon {
  display: grid;
  place-items: center;
  width: max(2.2rem, 2.6vw);                       /* circle size */
  height: max(2.2rem, 2.6vw);
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background: rgba(250, 246, 238, 0.7);
}
.badge-icon svg {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tagline */
.hero-text {
  margin-bottom: 1vw;
  font-size: 1.15rem;
  font-size: max(1rem, 1.15vw);
  font-style: italic;
  text-transform: none;
  white-space: nowrap;
  color: var(--ink);
}

/* Buttons */
.hero-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.75vw;
}
.hero-buttons .learn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.6vw;
  padding: max(0.7rem, 0.85vw) max(1rem, 1.3vw);
  font-size: max(0.7rem, 0.78vw);
  white-space: nowrap;
  border: 1px solid var(--emerald);
}
.hero-buttons .learn-more.outline { background: rgba(250, 246, 238, 0.85); }
.hero-buttons .learn-more.outline:hover { background: var(--emerald); }
.hero-buttons .learn-more::after { content: "›"; font-size: 1.4em; line-height: 1; }


/* =====================================================
   BUTTONS (all pages)
   ===================================================== */
.learn-more {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  background: var(--emerald);
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}
.learn-more:hover {
  background: var(--emerald-dark);
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.learn-more.outline {
  background: transparent;
  color: var(--emerald);
  border: 1px solid var(--emerald);
}
.learn-more.outline:hover {
  background: var(--emerald);
  color: var(--cream);
}


/* =====================================================
   CONTENT BOXES (rounded)
   ===================================================== */
#intro, #products, #about, #contact {
  width: calc(100% - 3rem);
  max-width: 84rem;
  margin: 3.5rem auto;
  padding: 2rem 2.5rem 3rem;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
section h2 {
  margin-bottom: 2rem;
  text-align: center;
  font-family: Cinzel, Georgia, serif;
  font-size: 2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--emerald);
}
section h2::after {
  content: "";
  display: block;
  width: 5rem;
  height: 2px;
  margin: 1rem auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
#intro p, #about p, #contact p {
  max-width: 44rem;
  margin: 0 auto 1rem;
  text-align: center;
}


/* =====================================================
   FROM LEAF TO CUP (journey)
   ===================================================== */
#journey {
  width: calc(100% - 3rem);
  max-width: 84rem;
  margin: 3.5rem auto 0;
  padding: 2.5rem 2.5rem 3rem;
  text-align: center;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.journey-kicker {
  font-family: Cinzel, Georgia, serif;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
#journey h2 { margin: 0.25rem 0 1rem; }
.journey-intro {
  max-width: 36rem;
  margin: 0 auto;
  font-style: italic;
}
.journey-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.journey-track {
  position: absolute;
  top: 2.25rem;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(176, 141, 63, 0.5) 0 6px, transparent 6px 12px);
}
.journey-fill {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.8s ease;
}
.step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step-circle {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1rem;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold);
  transition: background 0.5s, color 0.5s, box-shadow 0.5s, transform 0.5s;
  transition-delay: calc(var(--i) * 0.45s);
}
.step-circle svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step-num {
  font-family: Cinzel, Georgia, serif;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}
.step h3 {
  margin: 0.2rem 0 0.4rem;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emerald);
}
.step p { max-width: 15rem; font-size: 1.05rem; line-height: 1.5; }
#journey.play .journey-fill { transform: scaleX(1); }
#journey.play .step-circle {
  background: var(--emerald);
  color: var(--gold-light);
  box-shadow: 0 0 0 6px rgba(176, 141, 63, 0.15), 0 8px 18px rgba(0, 0, 0, 0.12);
  transform: scale(1.05);
}
.step:hover .step-circle { box-shadow: 0 0 0 6px rgba(176, 141, 63, 0.25), 0 0 24px rgba(176, 141, 63, 0.5); }


/* =====================================================
   HOME: PRODUCT CARDS (gold glow on hover)
   ===================================================== */
#products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
#products h2 { grid-column: 1 / -1; margin-bottom: 0.5rem; }
.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 1.5rem;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(31, 74, 58, 0.12);
  border-top: 3px solid var(--gold);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.product:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 28px rgba(176, 141, 63, 0.45), 0 14px 30px rgba(0, 0, 0, 0.08);
}
.product img {
  width: 100%;
  max-width: 14rem;
  height: auto;
  margin-bottom: 1rem;
}
.product h3 {
  margin-bottom: 0.5rem;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  color: var(--emerald);
}
.product p { margin-bottom: 1rem; flex-grow: 1; }


/* =====================================================
   SCROLL MOTION
   ===================================================== */
.reveal {
  opacity: 0;
  transition: opacity 0.9s ease, translate 0.9s ease, transform 0.3s, box-shadow 0.3s;
}
.reveal.from-left   { translate: -90px 0; }
.reveal.from-right  { translate: 90px 0; }
.reveal.from-bottom { translate: 0 70px; }
.reveal.in-view { opacity: 1; translate: 0 0; }
#intro, #products, #about { overflow-x: clip; }


/* =====================================================
   CONTACT BOX + FLOATING BAG + SOCIAL ICONS
   ===================================================== */
#contact {
  position: relative;
  overflow: visible;
  background: none;
  border: none;
  box-shadow: none;
}
#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
#contact > *:not(.contact-float) { position: relative; z-index: 1; }
.contact-float {
  position: absolute;
  right: -2rem;
  bottom: -5rem;
  width: clamp(10rem, 24vw, 20rem);
  height: auto;
  z-index: 5;
  pointer-events: none;
  rotate: -6deg;
  filter:
    drop-shadow(0 14px 22px rgba(0, 0, 0, 0.2))
    drop-shadow(0 0 18px rgba(176, 141, 63, 0.25));
  animation: bag-float 5s ease-in-out infinite;
}
@keyframes bag-float {
  0%, 100% { translate: 0 0; rotate: -6deg; }
  50% { translate: 0 -14px; rotate: -3deg; }
}

.socials {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}
.social {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  background: var(--cream);
  transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.social svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.social .dot { fill: currentColor; stroke: none; }
.social:hover {
  background: var(--emerald);
  color: var(--gold-light);
  transform: translateY(-4px);
  box-shadow: 0 0 0 4px rgba(176, 141, 63, 0.15), 0 0 20px rgba(176, 141, 63, 0.45);
}
.social:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }


/* =====================================================
   FOOTER
   ===================================================== */
footer {
  padding: 2rem 1rem;
  text-align: center;
  background: var(--cream);
  color: var(--emerald);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  border-top: 1px solid var(--line);
}


/* =====================================================
   TABLETS AND PHONES: hero stacks (products on top, text below)
   ===================================================== */
@media (max-width: 900px) {
  .hero {
    height: auto;
    padding: 7.5rem 1.5rem 3rem;
  }
  .hero::before { background-position: 35% bottom; }
  .hero-float {
    position: relative;
    left: auto;
    bottom: auto;
    display: block;
    width: min(26rem, 90%);
    margin: 0 auto;
  }
  .hero-shadow { display: none; }
  .hero-inner {
    position: static;
    width: 100%;
    padding: 1.5rem 0 0;
  }
  .hero-ornament { gap: 0.75rem; margin-bottom: 0.25rem; }
  .hero-ornament::before,
  .hero-ornament::after { width: 4rem; }
  .hero h1 { margin-bottom: 0.5rem; }
  .hero h1 .line1 { font-size: 2.1rem; }
  .hero h1 .line2 { font-size: 2.6rem; }
  .hero-logo-mark { width: 6rem; margin-bottom: 0.5rem; }
  .hero-sub { font-size: 0.72rem; margin-bottom: 1rem; }
  .hero-badges { gap: 1rem; margin-bottom: 1rem; }
  .badge { font-size: 0.6rem; gap: 0.35rem; }
  .hero-text { font-size: 1.1rem; margin-bottom: 1rem; white-space: normal; }
  .hero-buttons { gap: 0.75rem; flex-wrap: wrap; }
  .hero-buttons .learn-more { padding: 0.8rem 1.3rem; font-size: 0.75rem; gap: 0.6rem; }

  .journey-steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .journey-track {
    top: 2.25rem;
    bottom: 2.25rem;
    left: 2.25rem;
    right: auto;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, rgba(176, 141, 63, 0.5) 0 6px, transparent 6px 12px);
  }
  .journey-fill { transform: scaleY(0); transform-origin: top; }
  #journey.play .journey-fill { transform: scaleY(1); }
  .step {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    column-gap: 1rem;
    align-items: start;
    text-align: left;
  }
  .step-circle { grid-row: span 3; margin-bottom: 0; }
  .step p { max-width: none; }
}

@media (max-width: 640px) {
  .hero-nav { padding: 0.75rem 1rem; justify-content: center; }
  nav a { margin: 0 0.6rem; }
  .logo img { height: 50px; }
  .hero-nav.scrolled .logo img { height: 40px; }

  .hero { padding-top: 9rem; }
  .hero-badges { grid-template-columns: repeat(2, auto); }

  #intro, #products, #about, #contact, #journey { padding: 2rem 1.25rem; }
  .contact-float { right: -0.5rem; bottom: -1.5rem; width: 8rem; }
}


/* =====================================================
   REDUCED MOTION
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; translate: none; }
}

/* =====================================================
   PHONES & TABLETS: photo band on top, text below
   ===================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
  #home.hero {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding: 7.5rem 0 3rem;           /* space for the menu bar */
    overflow: hidden;
  }

  /* The photo becomes a band that shows the products */
  #home.hero::before {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;              /* band shape: taller = 1 / 1, shorter = 16 / 9 */
    max-height: 70vh;                 /* phones turned sideways: band never taller than the screen */
    background-size: cover;
    background-position: left bottom; /* products are on the left of the photo */
    transform-origin: 30% 60%;
  }

  /* No cream fade or light sweep over the text on phones */
  #home.hero::after,
  #home .hero-light { display: none; }

  /* Text sits under the photo on cream */
  #home .hero-inner {
    position: static;
    width: 100%;
    height: auto;
    padding: 1.5rem 1.25rem 0;
    text-align: center;
    align-items: center;
  }
  .hero-text { white-space: normal; }
  .hero-buttons { flex-wrap: wrap; justify-content: center; }
  .contact-float { right: -0.5rem; }
}

/* Small laptops / tablets sideways: a little more room for the text */
@media (min-width: 901px) and (max-width: 1199px) {
  .hero { --t-width: 40vw; --t-right: 2vw; }
  .hero-text { white-space: normal; }
}

/* Floating bag in Contact: stays inside the screen on smaller laptops */
@media (max-width: 1440px) {
  .contact-float { right: -0.5rem; }
}

@media (max-width: 640px) {
  #home.hero { padding-top: 9rem; }   /* the menu bar is taller on phones (links wrap) */
  .hero h1 .line1 { font-size: 1.8rem; }
  .hero h1 .line2 { font-size: 2.2rem; }
  .hero-sub { letter-spacing: 0.15em; }
}

/* =====================================================
   SEE-THROUGH GREEN BAR WHEN SCROLLING (all screens)
   ===================================================== */
.hero-nav.scrolled {
  background: rgba(31, 74, 58, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Menu button: hidden on desktop */
.menu-toggle { display: none; }

/* =====================================================
   PHONES & TABLETS: menu button with a dropdown
   ===================================================== */
@media (max-width: 900px) {
  .hero-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    min-height: 84px;
    padding: 0.5rem 1rem;
  }
  .hero-nav.scrolled { min-height: 64px; }
  .logo img { height: 66px; }
  .hero-nav.scrolled .logo img { height: 48px; }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(31, 74, 58, 0.35);
    border-radius: 50%;
    background: rgba(250, 246, 238, 0.6);
    cursor: pointer;
    -webkit-appearance: none;          /* remove iPhone's default button styling */
    appearance: none
  }
  .menu-toggle span {
    display: block;
    width: 22px;                       /* fixed width so iPhone shows the lines */
    height: 2px;
    flex-shrink: 0;
    border-radius: 2px;
    background: var(--emerald);
    transition: transform 0.3s, opacity 0.3s, background 0.3s;
  }
  .hero-nav.scrolled .menu-toggle { border-color: rgba(250, 246, 238, 0.5); background: transparent; }
  .hero-nav.scrolled .menu-toggle span { background: var(--cream); }
  .hero-nav.open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hero-nav.open .menu-toggle span:nth-child(2) { opacity: 0; }
  .hero-nav.open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .menu-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  .hero-nav nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    background: rgba(250, 246, 238, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    transition: max-height 0.35s ease, visibility 0.35s;
  }
  .hero-nav.open nav { max-height: 22rem; visibility: visible; }
  .hero-nav.scrolled nav { background: rgba(31, 74, 58, 0.92); }

  .hero-nav nav a {
    width: 100%;
    margin: 0;
    padding: 1rem 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    border-top: 1px solid rgba(176, 141, 63, 0.25);
  }
  .hero-nav nav a::after { display: none; }        /* no underline animation in the dropdown */

  #home.hero { padding-top: 6.25rem; }             /* photo starts just below the menu bar */
}

/* =====================================================
   FOOTER LINKS (all pages)
   ===================================================== */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2.25rem 1rem;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 0.9rem;
}
.footer-links a {
  color: var(--emerald);
  text-decoration: none;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.footer-links a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.footer-links span { color: var(--gold); }
.site-footer p { margin-top: 0.4rem; font-size: 0.78rem; letter-spacing: 0.1em; opacity: 0.85; }

/* =====================================================
   PRIVACY & TERMS POPUP (frosted glass, readable)
   ===================================================== */
html.legal-open { overflow: hidden; }              /* page behind does not scroll */

.legal-popup {
  width: min(46rem, calc(100% - 2rem));
  max-height: min(85vh, 52rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 20px;
  /* glass: see-through, but enough cream behind the text to read easily */
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.15) 45%),
    rgba(250, 246, 238, 0.78);                     /* 0.78 = how solid; lower = more see-through */
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 24px 60px rgba(0, 0, 0, 0.25);
}
.legal-popup[open] {
  display: flex;
  flex-direction: column;
  animation: legal-in 0.3s ease both;
}
@keyframes legal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
/* Dimmed, blurred page behind the popup */
.legal-popup::backdrop {
  background: rgba(22, 58, 45, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Browsers without blur: make the box a little more solid so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .legal-popup { background: rgba(250, 246, 238, 0.96); }
}

/* Header */
.legal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid rgba(176, 141, 63, 0.35);
}
.legal-head h2 {
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emerald);
}
.legal-close {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(31, 74, 58, 0.35);
  border-radius: 50%;
  background: rgba(250, 246, 238, 0.6);
  color: var(--emerald);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.25s, color 0.25s;
}
.legal-close:hover { background: var(--emerald); color: var(--cream); }
.legal-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Scrolling text area */
.legal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem 1.75rem;
  font-size: 1.12rem;
  line-height: 1.75;
  text-align: left;
}
.legal-body:focus { outline: none; }
.legal-body p { margin: 0 0 1rem; max-width: none; text-align: left; }
.legal-body h2,
.legal-body h3 {
  margin: 1.6rem 0 0.5rem;
  text-align: left;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emerald);
}
.legal-body h2::after { display: none; }
.legal-body ul, .legal-body ol { margin: 0 0 1rem 1.25rem; }
.legal-body li { margin-bottom: 0.4rem; }
.legal-body a { color: var(--gold-deep); }
/* The page's own boxes become plain text inside the popup */
.legal-body section,
.legal-body .promise {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
  text-align: left;
}
.legal-body .promise::before { display: none; }
.legal-body .promise-close { margin: 0 0 1rem; max-width: none; }
.legal-loading { color: var(--gold-deep); font-style: italic; }

/* Footer of the popup */
.legal-foot {
  padding: 0.85rem 1.5rem;
  border-top: 1px solid rgba(176, 141, 63, 0.35);
  text-align: right;
}
.legal-full {
  font-family: Cinzel, Georgia, serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
}
.legal-full:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .legal-popup { max-height: 88vh; border-radius: 16px; }
  .legal-head { padding: 0.9rem 1.1rem; }
  .legal-body { padding: 1.1rem 1.15rem; font-size: 1.05rem; }
}

/* =====================================================
   ABOUT MORINGA (home page)
   ===================================================== */
#about { text-align: center; }
#about .am-sub {
  margin: -1.25rem auto 2rem;
  font-style: italic;
  font-size: 1.35rem;
  color: var(--gold-deep);
}
#about .am-intro { max-width: 46rem; margin: 0 auto; }
#about .am-lead { font-size: 1.35rem; line-height: 1.6; color: var(--emerald); }

/* Green band */
#about .am-band {
  max-width: 52rem;
  margin: 2.5rem auto;
  padding: 2rem clamp(1.25rem, 4vw, 2.5rem);
  border-radius: 16px;
  background: var(--emerald);
  color: var(--cream);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
#about .am-band h3 {
  margin-bottom: 0.75rem;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
}
#about .am-band p { margin: 0 auto; color: var(--cream); }

/* Small section titles with gold lines either side */
#about .am-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2.75rem 0 1.5rem;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emerald);
}
#about .am-title::before,
#about .am-title::after {
  content: "";
  width: clamp(2rem, 8vw, 5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
#about .am-title::after { transform: scaleX(-1); }

/* Cards */
#about .am-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
#about .am-card {
  flex: 1 1 14rem;
  max-width: 17.5rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(31, 74, 58, 0.1);
  border-radius: 16px;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
#about .am-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(176, 141, 63, 0.35);
}
#about .am-icon {
  display: inline-grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  background: var(--cream);
}
#about .am-icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#about .am-card h4 {
  margin: 0.9rem 0 0.4rem;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emerald);
}
#about .am-card p { margin: 0; max-width: none; font-size: 1.05rem; line-height: 1.5; }

/* The science */
#about .am-science {
  max-width: 48rem;
  margin: 2.75rem auto 0;
  padding: 1.75rem clamp(1.25rem, 4vw, 2.25rem);
  border-radius: 16px;
  background: rgba(217, 196, 138, 0.16);
  border: 1px solid var(--line);
}
#about .am-science h3,
#about .am-ritual h3 {
  margin-bottom: 0.9rem;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emerald);
}
#about .am-science p:last-child { margin-bottom: 0; }

/* Daily ritual */
#about .am-ritual { margin-top: 2.75rem; }
#about .am-ritual ul { list-style: none; margin: 1rem 0 1.5rem; display: grid; gap: 0.35rem; }
#about .am-ritual li {
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.35;
  color: var(--emerald);
}
#about .am-sign {
  font-family: Cinzel, Georgia, serif;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* Phones: benefits become a tidy list (icon on the left) */
@media (max-width: 640px) {
  #about .am-grid { gap: 0.75rem; }
  #about .am-card { flex-basis: 100%; max-width: none; }
  #about .am-benefits .am-card,
  #about .am-grid .am-card {
    display: grid;
    grid-template-columns: 3.2rem 1fr;
    column-gap: 1rem;
    align-items: start;
    text-align: left;
    padding: 1.1rem;
  }
  #about .am-card .am-icon { grid-row: span 2; }
  #about .am-card p, #about .am-card h4 { text-align: left; }
  #about .am-card h4 { margin-top: 0.2rem; }
  #about .am-title { letter-spacing: 0.12em; }
}

/* =====================================================
   HERO BADGES: 9 badges in neat centred rows
   (same look, only the layout changes: 5 + 4 on computers, 3 x 3 on phones)
   ===================================================== */
.hero-badges {
  --bw: max(4.4rem, 5.2vw);                       /* width of one badge */
  --bgap: 1vw;                                    /* space between badges */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8vw var(--bgap);
  max-width: calc(var(--bw) * 5 + var(--bgap) * 4 + 2px);   /* 5 per row */
  margin-left: auto;
  margin-right: auto;
}
.hero-badges .badge { width: var(--bw); }

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
  .hero-badges {
    --bw: min(5.6rem, calc((100vw - 4.5rem) / 3));   /* shrinks a little on very small phones */
    --bgap: 0.75rem;
    row-gap: 1rem;
    max-width: calc(var(--bw) * 3 + var(--bgap) * 2 + 2px); /* 3 per row on phones */
  }
}

/* =====================================================
   HERO TEXT: fit below the taller menu bar (computers only)
   ===================================================== */
@media (min-width: 901px) {
  #home .hero-inner {
    padding-top: 160px;              /* = menu bar height + a small gap */
    padding-bottom: 1.5rem;
  }

  /* Heading a little smaller */
  .hero h1 .line1 { font-size: clamp(1.6rem, 2.5vw, 4.4rem); }
  .hero h1 .line2 { font-size: clamp(2rem, 3.2vw, 5.6rem); }

  /* Round logo a little smaller */
  .hero-logo-mark { width: max(4rem, 5.2vw); margin-bottom: 0.3vw; }
  .hero-sub { margin-bottom: 0.7vw; }

  /* Badges: same style, more compact */
  .hero-badges {
    --bw: max(3.8rem, 4.3vw);        /* badge width */
    --bgap: 0.5vw;                   /* space between badges */
    row-gap: 0.4vw;
    margin-bottom: 0.7vw;
  }
  .badge { gap: 0.25vw; font-size: max(0.5rem, 0.55vw); }
  .badge-icon { width: max(1.9rem, 2.1vw); height: max(1.9rem, 2.1vw); }

  .hero-text { margin-bottom: 0.8vw; }
}

/* =====================================================
   HERO (computers): original text size, 9 badges in one row
   ===================================================== */
@media (min-width: 901px) {
  .hero { --t-width: 37vw; }         /* text column a little wider, so 9 badges fit */

  #home .hero-inner {
    padding-top: 160px;              /* = menu bar height + a small gap */
    padding-bottom: 1.5rem;
  }

  /* Badges: same style, all 9 on one line */
  .hero-badges {
    --bw: 3.6vw;                     /* badge width */
    --bgap: 0.4vw;                   /* space between badges */
    flex-wrap: nowrap;
    max-width: none;
    margin-bottom: 1vw;
  }
  .badge { gap: 0.3vw; font-size: max(0.5rem, 0.55vw); }
  .badge-icon { width: max(1.9rem, 2.2vw); height: max(1.9rem, 2.2vw); }
}

/* Smaller laptops: badges go back to two rows so the labels stay readable */
@media (min-width: 901px) and (max-width: 1199px) {
  .hero-badges { flex-wrap: wrap; max-width: calc(var(--bw) * 5 + var(--bgap) * 4 + 2px); --bw: 4.6vw; }
}

/* =====================================================
   HERO: bigger heading and logo when the screen has room
   ===================================================== */
@media (min-width: 901px) {
  .hero h1 .line1 { font-size: clamp(2rem, min(3.9vw, 7.2vh), 8rem); }     /* THE KING OF */
  .hero h1 .line2 { font-size: clamp(2.6rem, min(5vw, 9.4vh), 8.6rem); }     /* MIRACLE TREE */
  .hero-logo-mark { width: clamp(5rem, min(9vw, 16vh), 15rem); margin-bottom: 0.5vw; }
  .hero-ornament  { margin-bottom: 0.4vw; }
  .hero h1        { margin-bottom: 0.4vw; }
}

/* =====================================================
   HERO: two claim lines with a gold divider
   (replaces the italic tagline)
   ===================================================== */
.hero-claims {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}
.hero-claims p {
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-weight: 700;
  font-size: clamp(0.85rem, min(1.15vw, 2.1vh), 1.4rem);   /* claim text size */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--emerald);
}
.hero-claims .dot { color: var(--gold); padding: 0 0.3em; }

/* Gold line with a small diamond in the middle */
.claims-line {
  position: relative;
  display: block;
  width: min(100%, 20rem);              /* line length */
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}
.claims-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

@media (max-width: 900px) {
  .hero-claims p { font-size: 0.85rem; letter-spacing: 0.04em; text-align: center; }
  .claims-line { width: 14rem; }
}

/* =====================================================
   HERO: move the text block up a little, tighter gaps
   ===================================================== */
@media (min-width: 901px) {
  #home .hero-inner {
    padding-top: 135px;              /* space for the menu bar: smaller = whole block higher */
    padding-bottom: 2rem;            /* keeps the buttons clear of the bottom edge */
  }
  .hero-sub     { margin-bottom: 0.6vw; }
  .hero-badges  { margin-bottom: 0.8vw; }
  .hero-claims  { gap: 0.3rem; margin-bottom: 0.9rem; }
}

/* =====================================================
   HOME PAGE: fixed background photo behind the sections
   ===================================================== */
body.home-bg::before {
  content: "";
  position: fixed;              /* stays still while the page scrolls over it */
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(243, 236, 221, 0.35), rgba(243, 236, 221, 0.6)),  /* soft cream wash */
    url("home-bg.jpg?v=1") center / cover no-repeat;
}

/* Section boxes become soft frosted glass so the photo glows through the edges */
body.home-bg #intro,
body.home-bg #products,
body.home-bg #about,
body.home-bg #journey,
body.home-bg #contact::before {
  background: rgba(250, 246, 238, 0.88);       /* 1 = solid cream, lower = more see-through */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Keep the space between sections clear so the photo shows */
body.home-bg { background: var(--beige); }

/* =====================================================
   ABOUT MORINGA: smooth, part-by-part reveal
   ===================================================== */
.am-reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.7s ease, translate 0.7s ease;
}
.am-reveal.am-in { opacity: 1; translate: 0 0; }

/* Cards keep their hover lift and glow as well */
#about .am-card.am-reveal {
  transition: opacity 0.7s ease, translate 0.7s ease, transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
#about .am-card.am-reveal:hover { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .am-reveal { opacity: 1; translate: none; }
}

/* =====================================================
   HOME PAGE: everything see-through (frosted glass)
   Change the two numbers at the top to control it:
   lower = more transparent, higher = more solid
   ===================================================== */
body.home-bg {
  --glass: 0.5;          /* section boxes */
  --glass-card: 0.4;     /* cards inside the sections */
}

/* Section boxes */
body.home-bg #intro,
body.home-bg #products,
body.home-bg #about,
body.home-bg #journey,
body.home-bg #contact::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05)),
    rgba(250, 246, 238, var(--glass));
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Cards inside: product cards, About Moringa cards, science box */
body.home-bg .product,
body.home-bg #about .am-card,
body.home-bg #about .am-science {
  background: rgba(255, 255, 255, var(--glass-card));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.6);
}
body.home-bg .product { border-top: 3px solid var(--gold); }   /* keep the gold top line */

/* Green band in About Moringa: see-through green */
body.home-bg #about .am-band {
  background: rgba(31, 74, 58, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Small circles (journey steps, icons, social buttons) */
body.home-bg .step-circle,
body.home-bg #about .am-icon,
body.home-bg .social {
  background: rgba(250, 246, 238, 0.6);
}
body.home-bg #journey.play .step-circle { background: rgba(31, 74, 58, 0.9); }   /* still turns green */

/* Footer */
body.home-bg .site-footer {
  background: rgba(250, 246, 238, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top-color: rgba(255, 255, 255, 0.5);
}

/* Browsers without blur: a little more solid so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.home-bg { --glass: 0.85; --glass-card: 0.8; }
}

/* =====================================================
   THE STORY OF MORINGA
   ===================================================== */
#intro { text-align: center; }
#intro .st-sub {
  margin: -1.25rem auto 2rem;
  font-style: italic;
  font-size: 1.35rem;
  color: var(--gold-deep);
}
#intro .st-intro { max-width: 46rem; margin: 0 auto; }
#intro .st-lead { font-size: 1.35rem; line-height: 1.6; color: var(--emerald); }

/* Four chapters: 2 x 2 on computers, stacked on phones */
#intro .st-chapters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 2.5rem 0 0;
  text-align: left;
}
#intro .st-chapter {
  position: relative;
  padding: 1.75rem 1.75rem 1.5rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(176, 141, 63, 0.3);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
#intro .st-chapter:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(176, 141, 63, 0.3);
}
#intro .st-num {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.75rem;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.95rem;
  color: var(--gold-deep);
}
#intro .st-chapter h3 {
  margin-bottom: 0.6rem;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emerald);
}
#intro .st-chapter p {
  max-width: none;
  margin: 0 0 0.75rem;
  text-align: left;
  font-size: 1.12rem;
  line-height: 1.6;
}
#intro .st-chapter p:last-child { margin-bottom: 0; }

/* Closing */
#intro .st-closing { margin-top: 2.75rem; }
#intro .st-closing h3 {
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--emerald);
}
#intro .st-tagline {
  margin-top: 0.4rem;
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  color: var(--gold-deep);
}
#intro .st-line {
  display: block;
  width: 6rem;
  height: 2px;
  margin: 1.5rem auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
#intro .st-one {
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--emerald);
}

@media (max-width: 760px) {
  #intro .st-chapters { grid-template-columns: 1fr; }
  #intro .st-chapter { padding: 1.4rem 1.25rem 1.25rem; }
}

/* =====================================================
   MORINGA STORY: framed chapter cards that slide in
   (uses story-leaves-tl.webp, story-leaves-br.webp,
    story-orn-top.webp, story-orn-bottom.webp)
   ===================================================== */
#intro .st-chapters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  margin: 2.5rem 0 0;
  padding: 0.75rem 0.25rem;
  text-align: left;
  overflow-x: clip;                       /* cards slide in from the sides without sideways scrolling */
}
#intro .st-chapter {
  --k: 0.5;                               /* size of the leaves and flower (0.5 = half the original) */
  position: relative;
  padding: 2.6rem 2.8rem 2.8rem calc(250px * var(--k) + 0.6rem);
  border: 2px solid #d1a43a;
  border-radius: calc(46px * var(--k));
  background:
    url("story-leaves-tl.webp") top left / calc(250px * var(--k)) auto no-repeat,
    url("story-leaves-br.webp") bottom right / calc(346px * var(--k)) auto no-repeat,
    url("story-orn-top.webp") top center / calc(180px * var(--k)) auto no-repeat,
    url("story-orn-bottom.webp") bottom center / calc(200px * var(--k)) auto no-repeat,
    linear-gradient(135deg, #fcf9ed 0%, #faf5e3 55%, #f6efd6 100%);
  background-origin: border-box;
  box-shadow:
    inset 0 0 0 2px #fbf8ec,              /* cream gap */
    inset 0 0 0 3.5px #a8781c,            /* thin inner gold line */
    0 12px 30px rgba(0, 0, 0, 0.12);
  transition: opacity 0.8s ease, translate 0.8s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}
#intro .st-chapter:hover {
  box-shadow:
    inset 0 0 0 2px #fbf8ec,
    inset 0 0 0 3.5px #a8781c,
    0 0 26px rgba(176, 141, 63, 0.4),
    0 14px 32px rgba(0, 0, 0, 0.14);
}

/* Text */
#intro .st-chapter h3 {
  margin-bottom: 0.7rem;
  font-family: Cinzel, Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--emerald);
}
#intro .st-chapter p {
  max-width: none;
  margin: 0 0 0.75rem;
  padding-right: calc(140px * var(--k));  /* keeps text clear of the leaves on the right */
  text-align: left;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink);
}
#intro .st-chapter p:last-child { margin-bottom: 0; }
#intro .st-num { display: none; }        /* Roman numerals removed */

/* ---------- Slide in / out as the visitor scrolls (both directions) ---------- */
#intro .st-chapter.st-slide { opacity: 0; }
#intro .st-chapter.st-slide.from-l { translate: -80px 0; }
#intro .st-chapter.st-slide.from-r { translate: 80px 0; }
#intro .st-chapter.st-slide.st-in  { opacity: 1; translate: 0 0; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  #intro .st-chapters { grid-template-columns: 1fr; gap: 1.25rem; }
  #intro .st-chapter {
    --k: 0.32;
    padding: 2.4rem 1.2rem 5.6rem 3.9rem;   /* more room at the bottom for the flower */
  }
  #intro .st-chapter p { padding-right: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  #intro .st-chapter.st-slide { opacity: 1; translate: none; }
}


/* =====================================================
   MORINGA STORY: whole section in the same framed design, as frosted glass
   (uses the same story-*.webp images as the cards)
   ===================================================== */
body section#intro,
body.home-bg section#intro {
  --k: 0.7;                                   /* size of the corner leaves on the big frame */
  position: relative;
  padding: 3rem clamp(1.5rem, 4vw, 3.5rem) 3.5rem;
  border: 2px solid rgba(209, 164, 58, 0.95);
  border-radius: calc(46px * var(--k));
  background:
    url("story-leaves-tl.webp") top left / calc(250px * var(--k)) auto no-repeat,
    url("story-leaves-br.webp") bottom right / calc(346px * var(--k)) auto no-repeat,
    url("story-orn-top.webp") top center / calc(180px * var(--k)) auto no-repeat,
    url("story-orn-bottom.webp") bottom center / calc(200px * var(--k)) auto no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.08)),
    rgba(250, 246, 232, 0.45);                /* glass tint: lower = more see-through */
  background-origin: border-box;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 253, 246, 0.55),   /* soft cream gap */
    inset 0 0 0 4.5px rgba(168, 120, 28, 0.7),   /* thin inner gold line */
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 14px 36px rgba(0, 0, 0, 0.12);
}

/* Browsers without blur: a little more solid so the text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body section#intro, body.home-bg section#intro { background-color: rgba(250, 246, 232, 0.9); }
}

@media (max-width: 760px) {
  body section#intro,
  body.home-bg section#intro {
    --k: 0.3;
    padding: 4.4rem 1rem 6.4rem;          /* room for the corner leaves above and the flower below */
  }
}


/* =====================================================
   HOME: product section and product cards see-through (frosted glass)
   ===================================================== */
body.home-bg #products {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05)),
    rgba(250, 246, 238, 0.35);                    /* section: lower = more see-through */
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

body.home-bg .product {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.1)),
    rgba(255, 255, 255, 0.25);                    /* cards: lower = more see-through */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top: 3px solid var(--gold);              /* keeps the gold line on top */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 24px rgba(0, 0, 0, 0.1);
}

/* Browsers without blur: a little more solid so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.home-bg #products { background: rgba(250, 246, 238, 0.85); }
  body.home-bg .product  { background: rgba(255, 255, 255, 0.85); }
}

/* =====================================================
   HOME: product cards - smaller, same image size, glass
   ===================================================== */
#products {
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3 per row on computers */
  gap: 1.25rem;
}
.product {
  padding: 1.25rem 1rem 1.4rem;
  justify-content: flex-start;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.1)),
    rgba(255, 255, 255, 0.22);                       /* glass: lower = more see-through */
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top: 3px solid var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 24px rgba(0, 0, 0, 0.1);
}

/* Every pack sits in the same-sized space, so boxes and pouches line up */
.product img {
  display: block;
  width: 100%;
  max-width: none;
  height: 230px;                    /* image size: change this one number */
  object-fit: contain;
  margin: 0 0 1rem;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.18));
  transition: transform 0.4s;
}
.product:hover img { transform: scale(1.04); }

.product h3 {
  flex-grow: 1;                     /* keeps the buttons lined up at the bottom */
  display: flex;
  align-items: center;
  margin-bottom: 0.9rem;
  font-size: 1.05rem;
  line-height: 1.35;
}
.product p { display: none; }       /* no description text under the name */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .product { background: rgba(255, 255, 255, 0.85); }
}

/* Tablets: 2 per row.  Phones: 2 smaller cards per row */
@media (max-width: 900px) {
  #products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #products { gap: 0.75rem; }
  .product { padding: 0.9rem 0.6rem 1rem; }
  .product img { height: 160px; }
  .product h3 { font-size: 0.85rem; letter-spacing: 0.02em; }
  .product .learn-more { padding: 0.55rem 0.9rem; font-size: 0.65rem; }
}

/* =====================================================
   FOOTER: certifications row
   ===================================================== */
.footer-certs { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin: 0.6rem 0 0.2rem; }
.footer-certs .certs-title {
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.cert-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.6rem; margin: 0; padding: 0; }
.cert-list li { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 5.5rem; text-align: center; }
.cert-list img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.12)); }
.cert-list span { font-size: 0.75rem; line-height: 1.25; color: var(--emerald); }
.footer-certs:not(:has(li)) { display: none; }      /* hide the whole row until you add logos */

/* =====================================================
   HOME: Buy Now button on product cards
   ===================================================== */
.product .card-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.product .buy-now {
  background: linear-gradient(180deg, #e2c77a, #b08d3f);
  color: #1f2a1a;
  font-weight: 700;
}
.product .buy-now:hover { background: linear-gradient(180deg, #ecd48c, #c09a48); color: #1f2a1a; }


/* =====================================================
   FOOTER: 3 columns, frosted glass, dark readable text
   ===================================================== */
footer.site-footer.big-footer {
  display: block;
  margin: 0;
  padding: 3rem clamp(1.25rem, 5vw, 4rem) 0;
  text-align: left;
  background: rgba(250, 246, 238, 0.88) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 3px solid #b08d3f;
  color: #1f4a3a;
  letter-spacing: normal;
  opacity: 1 !important;
}
.big-footer .ft-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem 2.5rem;
  max-width: 64rem;
  margin: 0 auto;
}
.big-footer .ft-col h3 {
  margin: 0 0 1rem;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a6a24;
}
.big-footer .ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.big-footer .ft-col a {
  color: #1f4a3a !important;
  opacity: 1 !important;
  text-decoration: none;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  transition: color 0.25s;
}
.big-footer .ft-col a:hover { color: #b08d3f !important; }
.big-footer .ft-contact a { overflow-wrap: anywhere; }

/* Bottom bar */
.big-footer .ft-bottom {
  max-width: 64rem;
  margin: 2.5rem auto 0;
  padding: 1.25rem 0 1.5rem;
  border-top: 1px solid rgba(176, 141, 63, 0.4);
  text-align: center;
}
.big-footer .ft-bottom p {
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: #1f4a3a !important;
  opacity: 1 !important;
}

/* Tablets and phones */
@media (max-width: 760px) {
  .big-footer .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .big-footer .ft-col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .big-footer .ft-grid { grid-template-columns: 1fr; text-align: center; }
  .big-footer .ft-col h3 { font-size: 0.85rem; }
  footer.site-footer.big-footer { padding-bottom: 5rem; }   /* room for the floating mascot */
}

/* =====================================================
   NUMBERS: normal, even-height digits everywhere
   ===================================================== */
html, body, body * {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* =====================================================
   WELLNESS INSIGHTS: video section (home page)
   ===================================================== */
#wellness {
  width: calc(100% - 3rem);
  max-width: 64rem;
  margin: 3.5rem auto;
  padding: 2rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
  text-align: center;
  color: var(--ink);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top: 3px solid var(--gold);
  background: rgba(250, 246, 238, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
#wellness h2 { margin-bottom: 0.4rem; }
.wv-sub { margin: 0 0 1.5rem; font-style: italic; font-size: 1.25rem; color: var(--gold-deep); }
.wv-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(176, 141, 63, 0.5);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
  background: #0f2a20;
  aspect-ratio: 16 / 9;
}
.wv-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.wv-text { max-width: 46rem; margin: 1.5rem auto 0; }
.wv-text p { margin: 0 0 0.8rem; font-size: 1.15rem; line-height: 1.6; }
.wv-text .wv-small { font-size: 0.92rem; font-style: italic; opacity: 0.8; margin-top: 1rem; }
@media (max-width: 560px) {
  #wellness { width: calc(100% - 2rem); padding: 1.5rem 0.9rem 1.8rem; }
  .wv-text p { font-size: 1.05rem; }
}