/* ===================================================================
   Volcano Spirit Cacao, stylesheet
   Palette drawn from the brand's own photography & packaging:
   charcoal (logo ground), parchment (kraft packaging), cacao brown,
   volcanic terracotta, deep maroon (raw pod), highland sage.
=================================================================== */

:root {
  --charcoal: #1b1712;
  --charcoal-soft: #2a231b;
  --parchment: #f5ede1;
  --parchment-dim: #ece0cd;
  --ivory: #f1e3c9;
  --cacao: #3d2718;
  --terracotta: #a85a34;
  --terracotta-dark: #8a4527;
  --maroon: #6e2430;
  --sage: #565f42;
  --sage-light: #7c8560;
  --cream-ink: #efe6d6;
  --ash: #4a453d;
  --ash-dark: #322e28;
  --blush: #d9a690;
  --line: rgba(27, 23, 18, 0.12);
  --line-light: rgba(241,227,201,0.18);

  --font-display: "Yeseva One", "Georgia", serif;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-nav: "Yeseva One", "Georgia", serif;

  --container: 1180px;
  --radius: 6px;
  --shadow-soft: 0 20px 50px -25px rgba(27, 23, 18, 0.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--parchment);
  color: var(--cacao);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; border-radius: var(--radius); }

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
  line-height: 1.15;
}

p { margin: 0 0 1em; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--terracotta-dark);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.on-dark .eyebrow { color: #e8b98f; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--terracotta);
  color: var(--ivory);
  border-color: var(--terracotta);
}
.btn-primary:hover { background: var(--terracotta-dark); border-color: var(--terracotta-dark); }
.btn-outline {
  background: transparent;
  color: var(--terracotta-dark);
  border-color: var(--terracotta);
}
.btn-outline:hover { background: var(--terracotta); color: var(--ivory); border-color: var(--terracotta); }
.on-dark .btn-outline,
.cta-band .btn-outline,
.photo-cta .btn-outline,
.hero .btn-outline {
  color: var(--ivory);
  border-color: rgba(241,227,201,0.7);
}
.on-dark .btn-outline:hover,
.cta-band .btn-outline:hover,
.photo-cta .btn-outline:hover,
.hero .btn-outline:hover {
  background: rgba(241,227,201,0.12);
  color: var(--ivory);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.split-text .btn-row,
.value-card .btn-row,
.page-body .btn-row { margin-top: 26px; }
.cta-band .btn-row,
.photo-cta .btn-row { margin-top: 8px; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--cacao);
  color: var(--ivory);
  padding: 12px 20px;
  z-index: 2000;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 18px 0;
  transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 100%;
  padding-left: 48px;
  padding-right: 48px;
}
.site-header.is-scrolled {
  background: rgba(61, 39, 24, 0.52);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  padding: 12px 0;
  box-shadow: 0 10px 30px -20px rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(241,227,201,0.14);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ivory);
  flex-shrink: 0;
}
.brand img { height: 40px; width: 40px; border-radius: 50%; flex-shrink: 0; }
.brand-word {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.1;
}
.brand-word span { display: block; font-size: 10px; letter-spacing: 0.3em; color: #cbb190; font-family: var(--font-body); margin-top: 2px; }

/* Homepage only: a big logo floats over the hero photo, starting large on
   load and shrinking out of view as you scroll (scale/opacity driven by
   --hero-logo-scale/--hero-logo-opacity, set in main.js; see
   .hero-logo-big below). The small header corner mark stays hidden while
   that floating logo is still visible, then fades in once scrolled past
   it, so the header is never left without any mark at all. */
body.has-hero .site-header .brand {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
body.has-hero.is-scrolled .site-header .brand {
  opacity: 1;
  pointer-events: auto;
}

.main-nav { display: flex; flex: 1 1 auto; min-width: 0; justify-content: center; }
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}
.main-nav a {
  color: var(--ivory);
  font-family: var(--font-nav);
  font-size: 16.5px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.main-nav a:hover::after { transform: scaleX(1); }

.header-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-cta .btn { padding: 11px 22px; }
.header-cta .btn-outline { color: var(--ivory); border-color: var(--ivory); }
.header-cta .btn-outline:hover { background: var(--ivory); color: var(--cacao); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(241,227,201,0.5);
  border-radius: 999px;
  color: var(--ivory);
  font-family: var(--font-nav);
  font-size: 13px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.lang-switch:hover { background: rgba(241,227,201,0.16); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 42px;
  height: 42px;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  height: 1.5px;
  background: var(--ivory);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle span { top: 20px; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.4s ease, visibility 0s linear 0.4s;
}
.mobile-nav.is-open { visibility: visible; transform: translateY(0); transition: transform 0.4s ease; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* lvh (not svh/dvh): svh/dvh can trigger a one-time recalculation right
     as a scroll gesture starts on iOS Safari while the toolbar is still
     settling, which -- combined with background-size:cover -- reads as
     the photo visibly "jumping"/zooming the instant you scroll. lvh is
     a static value (the viewport as if the toolbar were hidden), so it
     never recomputes mid-scroll; the only cost is a little extra photo
     sits below the fold while the toolbar is showing. */
  min-height: 100lvh;
  display: flex;
  align-items: flex-start;
  color: var(--ivory);
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
}
@media (max-width: 800px) {
  .hero-media { background-attachment: scroll; }
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Overlay for text legibility up top, easing off over the photo's
     middle, then darkening again toward the bottom so the trust-strip
     icons/labels stay readable against whatever's in the photo there. */
  background: linear-gradient(180deg, rgba(74,42,20,0.64) 0%, rgba(74,42,20,0.42) 34%, rgba(74,42,20,0.2) 54%, rgba(74,42,20,0.38) 78%, rgba(74,42,20,0.62) 100%);
}
/* The logo floats centered over the hero photo, pinned to the viewport
   (like the header) so it stays put and visible through scroll rather
   than scrolling away with the hero section. It grows downward only
   (transform-origin: top) from a fixed top edge so it can never grow
   past the top of the browser viewport and get clipped. Scale is set
   continuously in main.js as you scroll; will-change hints the browser
   to keep this on its own compositing layer to avoid scroll jank. */
.hero-logo-big {
  position: fixed;
  top: 92px;
  left: 50%;
  z-index: 1001;
  width: 138px;
  transform: translateX(-50%) scale(var(--hero-logo-scale, 1));
  transform-origin: top center;
  opacity: var(--hero-logo-opacity, 1);
  transition: opacity 0.1s linear;
  will-change: transform, opacity;
}
body.is-scrolled .hero-logo-big { pointer-events: none; }
.hero-logo-big img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.35)); }
.hero-content {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 176px 24px 190px 56px;
  max-width: 640px;
}
.hero h1 {
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 14px 0 18px;
  color: var(--ivory);
}
.hero h1 em {
  display: block;
  font-family: "Cormorant Garamond", var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.42em;
  letter-spacing: 0.01em;
  color: var(--terracotta);
  margin-top: 12px;
}
.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-left: 3px;
  background: currentColor;
  vertical-align: -0.1em;
  animation: typewriter-blink 0.9s steps(1) infinite;
}
@keyframes typewriter-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .typewriter-cursor { animation: none; opacity: 0; }
}
.hero p.lede {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  max-width: 480px;
  color: #ecdfd0;
  margin-bottom: 20px;
}
/* Home page only: a mobile-only trust row overlaid on the hero photo
   itself (ivory icons/text) -- see the max-width:640px block below. On
   desktop the same six items run inline inside the hero as .trust-strip
   instead (defined further down, near .btn-row). */
.trust-row-mobile { display: none; }
.trust-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 26px 32px;
  border-top: 1px solid rgba(241,227,201,0.35);
}
.trust-row li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: center;
  white-space: nowrap;
  padding: 0 22px;
  position: relative;
}
.trust-row li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(241,227,201,0.4);
}
.trust-row .icon-circle {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
}
.trust-row .icon-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.trust-row span:last-child {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.96;
  line-height: 1.4;
  max-width: 118px;
  white-space: normal;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
@media (max-width: 900px) {
  .trust-row li:not(:first-child)::before { display: none; }
}
/* Home page, desktop only: all six trust signals run as a full-width bar
   across the bottom of the hero photo (a sibling of .hero-content, not
   nested inside its 640px text column, so it isn't boxed into the left
   side) -- six equal-width columns spanning the full standard container
   edge to edge, each a bordered icon circle (same quiet-shape language
   as .feature-chip / .compound-icon elsewhere) with its label wrapping
   beneath. Equal flex columns (rather than nowrap text) mean labels of
   any length just wrap instead of overflowing the row. Hidden on mobile
   (see max-width:640px below), where the overlay-on-photo
   .trust-row-mobile is used instead. */
.trust-strip {
  display: flex;
  align-items: flex-start;
  list-style: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px 48px;
  border-top: 1px solid rgba(241,227,201,0.3);
}
.trust-strip li {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 0 8px;
}
.trust-strip .icon-chip {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trust-strip img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45));
}
.trust-strip span {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.92;
  white-space: normal;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
@media (max-width: 1180px) {
  .trust-strip { padding: 24px 24px; }
}
@media (max-width: 900px) {
  .trust-strip .icon-chip { width: 44px; height: 44px; }
  .trust-strip img { width: 44px; height: 44px; }
  .trust-strip span { font-size: 9px; }
}
/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: 100px 0; }
.section-tight { padding: 70px 0; }
.section-head { max-width: 700px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-top: 14px; }
.section-head p { font-size: 1.05rem; opacity: 0.85; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

.on-dark { color: var(--ivory); }
.on-cacao { color: var(--ivory); }
.on-sage { color: var(--ivory); }

/* Mobile scannability: neutral on desktop, bold + terracotta on small
   screens so key words pop out of longer paragraphs while skimming. */
.scan-hl { font-weight: inherit; color: inherit; }

/* ---------- Manifesto (controversial section) ---------- */
.manifesto {
  background: var(--parchment-dim);
  color: var(--cacao);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}
.manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(168,90,52,0.1), transparent 55%);
  pointer-events: none;
}
.manifesto-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
  position: relative;
}
.manifesto h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  color: var(--cacao);
}
.manifesto h2 .strike { position: relative; color: var(--terracotta-dark); }
.manifesto-body p { font-size: 1.08rem; color: var(--cacao); opacity: 0.85; }
.manifesto-body p.lead { font-size: 1.25rem; color: var(--cacao); opacity: 1; font-family: var(--font-display); font-weight: 400; line-height: 1.5; }
.manifesto-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.manifesto-list li {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: var(--cacao);
  opacity: 0.9;
}
.manifesto-list b { color: var(--cacao); font-family: var(--font-display); font-weight: 500; display: block; margin-bottom: 4px; opacity: 1; }
.manifesto-list .mark { color: var(--terracotta); font-size: 1.1rem; flex-shrink: 0; }

/* ---------- Origin / story with image ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-media { position: relative; }
.split-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.split-media.wide img { aspect-ratio: 5/4; }
.split-text .eyebrow { margin-bottom: 16px; }
.split-text h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.split-text p { font-size: 1.02rem; opacity: 0.88; }
.stat-row { display: flex; gap: 28px; margin-top: 34px; }
.stat-row .stat { flex: 1 1 0; min-width: 0; }
.stat-row .stat b { display: block; font-family: var(--font-display); font-size: 2.1rem; color: var(--terracotta-dark); }
.stat-row .stat span { display: block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
@media (max-width: 480px) {
  .stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
  .stat-row .stat { flex: unset; }
  /* Brand wordmark is too wide to sit alongside the cart icon and menu
     button on very narrow phones; drop to just the logo mark so the
     header controls stay fully reachable. */
  .brand-word { display: none; }
  .site-header .container { padding-left: 16px; padding-right: 16px; gap: 12px; }
}

/* ---------- Photo strip ---------- */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.photo-strip img { width: 100%; height: 320px; object-fit: cover; }

/* ---------- Image band: a single full-bleed breather photo between sections ---------- */
.image-band {
  width: 100%;
  height: 62lvh;
  min-height: 420px;
  max-height: 720px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (max-width: 800px) {
  .image-band { background-attachment: scroll; }
}
@media (max-width: 640px) {
  .image-band { height: 46lvh; min-height: 300px; }
}

/* ---------- Values / cards ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.value-card {
  background: #f8ece2;
  border: 1px solid rgba(168,90,52,0.3);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: var(--shadow-soft);
}
.value-card .num {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--terracotta);
  letter-spacing: 0.1em;
}
.value-card h3 { font-size: 1.25rem; margin: 14px 0 10px; }
.value-card p { font-size: 0.96rem; opacity: 0.82; margin: 0; }
.value-card .recipe-label,
.recipe-plain .recipe-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 1;
  color: var(--terracotta-dark);
  margin: 18px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.value-card .recipe-label:first-of-type,
.recipe-plain .recipe-label:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.value-card .recipe-ingredients,
.recipe-plain .recipe-ingredients { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.value-card .recipe-ingredients li,
.recipe-plain .recipe-ingredients li {
  display: flex;
  gap: 9px;
  font-size: 0.93rem;
  opacity: 0.85;
  line-height: 1.4;
}
.value-card .recipe-ingredients li::before,
.recipe-plain .recipe-ingredients li::before { content: "♥"; color: var(--terracotta); font-size: 13px; line-height: 1; margin-top: 2px; flex-shrink: 0; }
.value-card .add-note,
.recipe-plain .add-note { font-size: 0.93rem; opacity: 0.85; }
.recipe-plain { max-width: 540px; margin: 0 auto; }
.recipe-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.recipe-features .feature-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(168,90,52,0.5);
  background: rgba(168,90,52,0.07);
  color: var(--terracotta-dark);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.value-card img.card-thumb {
  display: block;
  width: calc(100% + 60px);
  max-width: none;
  margin: -34px -30px 20px;
  border-radius: var(--radius) var(--radius) 0 0;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ---------- Definition card (outlined dictionary-entry style callout) ---------- */
.definition-card {
  background: #f8ece2;
  color: var(--cacao);
  border: 1.5px solid var(--terracotta);
  border-radius: var(--radius);
  padding: 40px 38px;
  align-self: start;
  box-shadow: var(--shadow-soft);
}
.definition-card .eyebrow { margin-bottom: 4px; }
.definition-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 8px 0 2px;
}
.definition-card-body { opacity: 0.85; margin: 0; }
.nutrient-note strong { color: var(--terracotta-dark); font-weight: 700; }

/* A small note card that overlaps the bottom-left corner of a .split-media
   photo, instead of taking a full-width block of its own. */
.note-card {
  position: absolute;
  left: -22px;
  bottom: -22px;
  z-index: 2;
  max-width: 360px;
  background: #f8ece2;
  color: var(--cacao);
  border: 1.5px solid var(--terracotta);
  border-radius: var(--radius);
  padding: 16px 22px;
  box-shadow: var(--shadow-soft);
}
.note-card .eyebrow { margin-bottom: 2px; font-size: 10px; }
.note-card h3 { font-family: var(--font-display); font-size: 1.1rem; margin: 4px 0 6px; line-height: 1.15; }
.note-card p { font-size: 0.84rem; line-height: 1.4; opacity: 0.85; margin: 0; }
@media (max-width: 900px) {
  .note-card { position: static; max-width: 100%; margin-top: 18px; }
}

/* ---------- Compound radial (cacao composition: photo flanked by two
   columns of compound callouts, each with a short spoke line pointing
   back toward the center photo) ---------- */
.compound-radial {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 48px;
  margin-top: 56px;
}
.compound-photo {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--terracotta);
  box-shadow: var(--shadow-soft);
  flex-shrink: 0;
}
.compound-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compound-col { display: flex; flex-direction: column; gap: 30px; }
.compound-item { display: flex; align-items: flex-start; gap: 14px; position: relative; }
.compound-item::after {
  content: "";
  position: absolute;
  top: 21px;
  width: 24px;
  height: 1px;
  background: rgba(168,90,52,0.4);
}
.compound-col:first-child .compound-item::after { right: -24px; }
.compound-col:last-child .compound-item { flex-direction: row-reverse; text-align: right; }
.compound-col:last-child .compound-item::after { left: -24px; }
.compound-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f8ece2;
  border: 1.5px solid var(--terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
}
.compound-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--terracotta-dark);
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.compound-item h4 { font-size: 1rem; margin: 2px 0 4px; color: var(--cacao); }
.compound-item p { font-size: 0.86rem; opacity: 0.8; margin: 0; line-height: 1.5; }
@media (max-width: 860px) {
  .compound-radial { grid-template-columns: 1fr; justify-items: center; gap: 36px; }
  .compound-photo { order: -1; }
  .compound-item::after { display: none; }
  .compound-col:last-child .compound-item { flex-direction: row; text-align: left; }
}

/* ---------- Wholesale: icon row (no boxes) ---------- */
.wholesale-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}
.wholesale-feature .feature-icon-circle {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 1.5px solid rgba(168,90,52,0.45);
  background: rgba(168,90,52,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.wholesale-feature svg {
  width: 32px;
  height: 32px;
  stroke: var(--terracotta-dark);
  fill: none;
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.wholesale-feature .om-icon {
  font-family: "Noto Sans Devanagari", "Segoe UI", sans-serif;
  font-size: 32px;
  line-height: 1;
  color: var(--terracotta-dark);
}
.wholesale-feature h3 { font-size: 1.08rem; margin: 0 0 10px; }
.wholesale-feature p { font-size: 0.92rem; opacity: 0.8; margin: 0; }
@media (max-width: 900px) {
  .wholesale-features { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
}
@media (max-width: 560px) {
  .wholesale-features { grid-template-columns: 1fr; gap: 36px; }
}
.blog-meta {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta-dark);
  opacity: 0.85;
  font-weight: 500;
  margin-top: 14px;
}

/* ---------- Blog preview (homepage): unboxed, image over text ---------- */
.blog-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; margin-top: 46px; }
.blog-preview-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 22px;
}
.blog-preview-card .blog-meta { margin-top: 0; margin-bottom: 8px; }
.blog-preview-card h3 { font-size: 1.3rem; margin: 0 0 10px; }
.blog-preview-card h3 a:hover { color: var(--terracotta-dark); }
.blog-preview-card p:not(.blog-meta) { font-size: 0.96rem; opacity: 0.8; margin: 0 0 20px; }
.blog-preview-card .btn { padding: 11px 22px; font-size: 12.5px; }
@media (max-width: 700px) {
  .blog-preview-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Ceremony gallery band ---------- */
.gallery-band { background: var(--maroon); color: var(--ivory); padding: 90px 0; }
.gallery-band .section-head h2 { color: var(--ivory); }
.gallery-band .section-head p { color: #e9c9c9; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 130px;
  gap: 10px;
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.gallery-grid .g1 { grid-column: span 3; grid-row: span 3; }
.gallery-grid .g2 { grid-column: span 3; grid-row: span 2; }
.gallery-grid .g3 { grid-column: span 3; grid-row: span 2; }
.gallery-grid .g4 { grid-column: span 2; grid-row: span 2; }
.gallery-grid .g5 { grid-column: span 2; grid-row: span 2; }
.gallery-grid .g6 { grid-column: span 2; grid-row: span 2; }

/* ---------- Quote ---------- */
.quote-block { padding: 100px 0; text-align: center; }
.quote-block blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  font-weight: 400;
  font-style: italic;
  max-width: 820px;
  margin: 0 auto 20px;
  line-height: 1.5;
  color: var(--cacao);
}
.quote-block cite { font-style: normal; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; }
.quote-block blockquote em { font-style: italic; color: var(--terracotta); }

/* ---------- Product ---------- */
.product {
  background: var(--parchment-dim);
}
.product .split-media img { aspect-ratio: 3/4; object-fit: cover; }
.product-list { list-style: none; padding: 0; margin: 26px 0 34px; display: grid; gap: 12px; }
.product-list li { display: flex; gap: 12px; font-size: 0.98rem; }
.product-list li::before { content: "♥"; color: var(--terracotta); font-size: 15px; line-height: 1; margin-top: 3px; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--cacao);
  color: var(--ivory);
  padding: 90px 0;
  text-align: center;
}
.cta-band h2 { color: var(--ivory); font-size: clamp(1.8rem, 3.6vw, 2.6rem); max-width: 760px; margin: 16px auto 14px; }
.cta-band p { max-width: 600px; margin: 0 auto 30px; color: #e6d9c6; }
.cta-band .btn-row, .photo-cta .btn-row { justify-content: center; }
.cta-band .btn-primary { background: var(--terracotta); border-color: var(--terracotta); }
.cta-band .btn-outline { border-color: rgba(241,227,201,0.6); color: var(--ivory); }

.cta-band.cta-terracotta { background: var(--terracotta); }
.cta-band.cta-terracotta .btn-primary { background: var(--ivory); color: var(--cacao); border-color: var(--ivory); }
.cta-band.cta-terracotta .btn-primary:hover { background: #fdf8ef; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(74,69,61,0.92) 0%, rgba(50,46,40,0.95) 45%, var(--ash-dark) 100%),
    url('../images/origin-lake.jpg');
  background-size: cover;
  background-position: center 38%;
  background-attachment: fixed;
  background-blend-mode: multiply;
  color: #d9d0bf;
  padding: 70px 0 30px;
}
@media (max-width: 800px) {
  .site-footer { background-attachment: scroll; }
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--line-light);
}
.footer-grid-2 { grid-template-columns: 1.5fr 1fr; }
.footer-grid-2 h4:not(:first-of-type) { margin-top: 26px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand img { height: 44px; width: 44px; border-radius: 50%; }
.footer-brand span { font-family: var(--font-display); color: var(--ivory); font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; }
.site-footer p.tag { font-size: 0.92rem; max-width: 320px; opacity: 0.8; }
.site-footer h4 { color: var(--ivory); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-family: var(--font-body); font-weight: 500; margin-bottom: 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.site-footer a { font-size: 0.94rem; opacity: 0.85; transition: opacity 0.2s ease, color 0.2s ease; }
.site-footer a:hover { opacity: 1; color: #e6b98d; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 26px;
  font-size: 12.5px;
  opacity: 0.6;
}

/* ---------- Reveal-on-scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ==================== Responsive ==================== */
@media (max-width: 1024px) {
  .manifesto-grid { grid-template-columns: 1fr; gap: 40px; }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split.reverse .split-media { order: 0; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .photo-strip img { height: 260px; }
}

@media (max-width: 860px) {
  .main-nav, .header-cta .btn, .header-cta .lang-switch { display: none; }
  .nav-toggle { display: block; }
  .site-header.is-scrolled {
    background: rgba(168, 90, 52, 0.55);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
  }
  .header-cta { gap: 0; }
  .site-header .container { padding-left: 20px; padding-right: 20px; }

  .mobile-nav {
    background: var(--cacao);
    display: flex;
    flex-direction: column;
    /* flex-start (not center) plus generous top padding so the first
       link always lands clear of the still-visible fixed header above
       it; centering here could push content up underneath the header,
       where its (higher z-index) elements intercept the tap instead of
       the link, which is why the first item was unclickable. */
    justify-content: flex-start;
    padding: 220px 28px 40px;
    overflow-y: auto;
  }
  .mobile-lang-switch {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin-bottom: 26px;
    padding: 6px 12px;
    border: 1px solid rgba(241,227,201,0.4);
    border-radius: 999px;
    color: var(--ivory);
    font-family: var(--font-nav);
    font-size: 12px;
    letter-spacing: 0.03em;
  }
  .mobile-lang-switch svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }
  .mobile-nav ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 16px; }
  /* Scoped to the list specifically (not ".mobile-nav a" generally) so it
     doesn't also override .mobile-lang-switch's own, smaller font-size --
     it's a sibling anchor directly inside .mobile-nav, and a bare element
     descendant selector would otherwise out-specificity that single class. */
  .mobile-nav ul a { color: var(--ivory); font-family: var(--font-nav); font-style: normal; font-weight: 500; font-size: 1.4rem; }
  .mobile-nav .btn {
    align-self: stretch;
    justify-content: center;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    padding: 12px 20px;
    font-size: 11px;
  }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .gallery-grid .g1, .gallery-grid .g2, .gallery-grid .g3, .gallery-grid .g4, .gallery-grid .g5, .gallery-grid .g6 {
    grid-column: span 1; grid-row: span 1;
  }
}

@media (max-width: 640px) {
  .section { padding: 66px 0; }
  .manifesto, .gallery-band, .cta-band { padding: 66px 0; }
  /* Bottom padding reserves room for the .trust-row-mobile bar pinned to
     the very bottom of the hero (~130px tall) so it can never overlap
     the CTA buttons above it on short viewports -- it was previously
     only 40px, which let the "Why Cacao" button sit underneath the
     icon bar on shorter phones. */
  .hero-content { padding: 230px 20px 170px; max-width: 100%; }
  .hero h1 em {
    font-size: 0.78em;
    color: var(--ivory);
    text-shadow: 0 0 14px rgba(241,227,201,0.85), 0 0 34px rgba(241,227,201,0.5);
  }
  .scan-hl { font-weight: 700; color: var(--terracotta); }
  .on-dark .scan-hl, .cta-band .scan-hl, .photo-cta .scan-hl { color: #e8b98f; }
  .trust-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 18px 16px;
    scrollbar-width: none;
  }
  .trust-row::-webkit-scrollbar { display: none; }
  .trust-row li { padding: 0 12px; scroll-snap-align: start; }
  .trust-row .icon-circle { width: 54px; height: 54px; }
  .trust-row span:last-child { font-size: 9.5px; max-width: 100%; }
  /* Home page only: the desktop inline .trust-strip is swapped for icons
     overlaid directly on the hero photo (ivory, matching the original
     design) via .trust-row-mobile below. */
  .trust-strip { display: none; }
  .trust-row-mobile {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    list-style: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 0;
    margin: 0;
    padding: 18px 16px;
    border-top: 1px solid rgba(241,227,201,0.35);
    scrollbar-width: none;
  }
  .trust-row-mobile::-webkit-scrollbar { display: none; }
  .trust-row-mobile li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-align: center;
    white-space: nowrap;
    padding: 0 12px;
    position: relative;
    scroll-snap-align: start;
  }
  .trust-row-mobile .icon-circle {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
  }
  .trust-row-mobile .icon-circle img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .trust-row-mobile span:last-child {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 9.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ivory);
    opacity: 0.96;
    line-height: 1.4;
    max-width: 100%;
    white-space: normal;
    text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  }
  .scroll-cue { display: none; }
  .value-grid { grid-template-columns: 1fr; }
  .stat-row { gap: 26px; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { justify-content: center; white-space: normal; text-align: center; word-break: break-word; }
  .hero-logo-big { width: 110px; top: 86px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-big,
  body.has-hero .site-header .brand { transition: none; }
}

/* ---------- Image lightbox (click a flagged photo to view it larger) ---------- */
.img-lightbox-wrap {
  position: relative;
  display: block;
  border-radius: var(--radius);
}
.img-lightbox { cursor: pointer; display: block; }
.img-lightbox-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(27,23,18,0);
  transition: background 0.2s ease;
  pointer-events: none;
}
.img-lightbox-wrap:hover::after { background: rgba(27,23,18,0.22); }
.lightbox-expand-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.img-lightbox-wrap:hover .lightbox-expand-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lightbox-expand-icon svg { width: 20px; height: 20px; stroke: var(--cacao); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 5500;
  background: rgba(27,23,18,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox-overlay img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  cursor: default;
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close:hover { background: rgba(255,255,255,0.22); }