/* =====================================================================
   Apeksha Enterprises — plain HTML/CSS/JS rebuild
   Design tokens translated 1:1 from src/styles.css (oklch custom properties)
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  --radius: 0.625rem;
  --background: oklch(0.97 0.015 85);
  --foreground: oklch(0.22 0.04 150);
  --forest: oklch(0.32 0.07 150);
  --forest-deep: oklch(0.24 0.06 150);
  --sage: oklch(0.65 0.06 150);
  --amber-brand: oklch(0.68 0.14 75);
  --cream: oklch(0.96 0.02 85);
  --card: oklch(1 0 0);
  --muted-foreground: oklch(0.45 0.04 150);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-bg: oklch(0.577 0.245 27.325 / 0.1);
  --border: oklch(0.88 0.02 150);
  --font-serif: "Playfair Display", "Lora", Georgia, serif;
  --font-sans: "Inter", "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; }
table { border-collapse: collapse; }

/* Browsers bold h1–h6 by default; the source site's Tailwind preflight
   resets that to normal weight (Playfair Display's own regular cut),
   so every heading class below stays unbold unless it deliberately
   sets font-weight (matching an explicit font-semibold/font-bold in
   the original JSX). */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; font-size: inherit; }

.font-serif { font-family: var(--font-serif); }

/* ---------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------- */
.container-lg { max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; } /* max-w-7xl */
.container-xl { max-width: 72rem; margin-inline: auto; padding-inline: 1.5rem; } /* max-w-6xl */

.page-shell { min-height: 100vh; display: flex; flex-direction: column; }
.page-main { flex: 1 1 auto; }

/* fade-in on page load */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeInUp 0.8s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------
   Navbar
   --------------------------------------------------------------- */
.navbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  transition: background-color 0.3s, backdrop-filter 0.3s, box-shadow 0.3s;
  background-color: rgba(37, 61, 46, 0.2); /* forest-deep/20 */
  backdrop-filter: blur(4px);
}
.navbar.is-scrolled {
  background-color: rgba(37, 61, 46, 0.8);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
.navbar.navbar--light {
  background-color: rgba(245, 240, 227, 0.85);
  backdrop-filter: blur(10px);
}
.navbar.navbar--light.is-scrolled {
  background-color: rgba(245, 240, 227, 0.95);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.navbar-inner {
  max-width: 80rem;
  margin-inline: auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar-logo-link { display: flex; align-items: center; gap: 0.5rem; transition: transform 0.3s; }
.navbar-logo-link:hover { transform: translateY(-2px); }
.navbar-logo { height: 3rem; width: auto; transform: scale(1.2); margin-left: 4rem; }
.navbar-logo--old { margin-left: 1rem; }
@media (min-width: 768px) { .navbar-logo { height: 3.5rem; } }

.navbar-links { display: none; align-items: center; gap: 2rem; }
@media (min-width: 1024px) { .navbar-links { display: flex; } }
.navbar-link {
  color: rgba(245, 240, 227, 0.9);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.3s, transform 0.3s;
}
.navbar-link:hover { color: var(--amber-brand); transform: translateY(-2px); }
.navbar-link.is-active { color: var(--amber-brand); }
.navbar--light .navbar-link { color: var(--forest); }

.navbar-cta {
  box-shadow: 0 8px 24px rgba(20, 38, 29, 0.12);
  transition: transform 240ms ease, box-shadow 240ms ease, background-color 240ms ease, color 240ms ease;
  background-color: var(--amber-brand);
  color: var(--forest-deep);
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
}
.navbar-cta:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20, 38, 29, 0.16); }

.navbar-toggle {
  display: inline-flex;
  background: none;
  border: none;
  color: var(--cream);
  transition: transform 0.3s;
  padding: 0;
}
.navbar--light .navbar-toggle { color: var(--forest); }
.navbar-toggle:hover { transform: scale(1.05); }
@media (min-width: 1024px) { .navbar-toggle { display: none; } }

.navbar-mobile {
  display: none;
  padding: 1rem 1.5rem;
  flex-direction: column;
  gap: 0.75rem;
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(51, 83, 61, 0.4);
  background-color: rgba(37, 61, 46, 0.95);
}
.navbar--light .navbar-mobile { background-color: rgba(245, 240, 227, 0.95); border-top-color: rgba(112, 139, 106, 0.4); }
.navbar-mobile.is-open { display: flex; }
@media (min-width: 1024px) { .navbar-mobile { display: none !important; } }
.navbar-mobile-link { padding-block: 0.25rem; color: rgba(245, 240, 227, 0.9); transition: color 0.3s; }
.navbar--light .navbar-mobile-link { color: var(--forest); }
.navbar-mobile-link:hover { color: var(--amber-brand); }
.navbar-mobile-cta { text-align: center; margin-top: 0.5rem; }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.site-footer { background-color: var(--forest-deep); color: rgba(245, 240, 227, 0.85); margin-top: 6rem; }
.footer-grid {
  max-width: 80rem;
  margin-inline: auto;
  padding: 4rem 1.5rem;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(5, 1fr); } }
.footer-col-products { }
@media (min-width: 768px) { .footer-col-products { grid-column: span 2; } }
.footer-logo { height: 5rem; width: auto; margin-bottom: 0.75rem; margin-left: -0.75rem; }
.footer-blurb { font-size: 0.875rem; color: rgba(245, 240, 227, 0.7); line-height: 1.6; }
.footer-heading { font-family: var(--font-serif); color: var(--amber-brand); margin: 0 0 0.75rem; }
.footer-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.footer-list { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; }
.footer-list li { margin-bottom: 0.375rem; }
.footer-list a:hover { color: var(--amber-brand); }
.footer-contact-list { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; }
.footer-contact-list svg { margin-top: 0.15rem; flex-shrink: 0; width: 1rem; height: 1rem; }
.footer-social { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.footer-social a {
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  border: 1px solid rgba(245, 240, 227, 0.3);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.footer-social a:hover { background-color: var(--amber-brand); color: var(--forest-deep); border-color: var(--amber-brand); }
.footer-social svg { width: 1rem; height: 1rem; }
.footer-bottom { border-top: 1px solid rgba(51, 83, 61, 0.6); padding-block: 1.25rem; text-align: center; font-size: 0.75rem; color: rgba(245, 240, 227, 0.6); }

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0;
  background-position: center; background-size: cover;
  animation: slideInFromRight 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-bg--contain { background-size: contain; background-repeat: no-repeat; background-color: var(--forest-deep); }
.hero-tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(37,61,46,0.10), rgba(37,61,46,0.08), rgba(37,61,46,0.10)); }
.hero-content-wrap { position: relative; max-width: 72rem; margin-inline: auto; padding: 8rem 1.5rem 6rem; color: var(--cream); }
@media (min-width: 768px) { .hero-content-wrap { padding: 10rem 1.5rem 8rem; } }

.hero-badge {
  display: inline-block; padding: 0.375rem 1rem; border-radius: 9999px;
  border: 1px solid rgba(212, 165, 89, 0.6);
  background-color: rgba(37, 61, 46, 0.4);
  backdrop-filter: blur(8px);
  color: var(--amber-brand);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
  animation: fadeInUp 0.8s cubic-bezier(0.2,0.8,0.2,1) both; animation-delay: 80ms;
}
.hero-title {
  font-family: var(--font-serif); font-size: 2.25rem; line-height: 1.2; margin: 0 0 1.25rem; max-width: 56rem;
  color: var(--cream);
  animation: fadeInUp 0.8s cubic-bezier(0.2,0.8,0.2,1) both; animation-delay: 80ms;
}
@media (min-width: 768px) { .hero-title { font-size: 3.75rem; } }
.hero-subtitle {
  font-size: 1.125rem; max-width: 48rem; line-height: 1.7; color: rgba(245, 240, 227, 0.85); margin: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.2,0.8,0.2,1) both; animation-delay: 240ms;
}
@media (min-width: 768px) { .hero-subtitle { font-size: 1.25rem; } }
.hero-cta { margin-top: 2rem; animation: fadeInUp 0.8s cubic-bezier(0.2,0.8,0.2,1) both; animation-delay: 360ms; }

/* text theme variants for photo-heroes */
.hero-title--green, .hero-subtitle--green { color: var(--forest); text-shadow: 0 2px 16px rgba(255,255,255,0.85), 0 1px 4px rgba(255,255,255,0.9); }
.hero-subtitle--green { color: rgba(51, 83, 61, 0.9); }
.hero-title--brown, .hero-subtitle--brown { color: #4a2f1c; text-shadow: 0 2px 16px rgba(255,255,255,0.85), 0 1px 4px rgba(255,255,255,0.9); }
.hero-subtitle--brown { color: rgba(74,47,28,0.85); }
.hero-title--black, .hero-subtitle--black { color: #000; text-shadow: 0 2px 16px rgba(255,255,255,0.85), 0 1px 4px rgba(255,255,255,0.9); }
.hero-subtitle--black { color: rgba(0,0,0,0.85); }

.hero-stats { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }
.hero-stat-card {
  padding: 0.625rem 1.25rem; border-radius: 9999px;
  background-color: rgba(37, 61, 46, 0.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 240, 227, 0.3);
  font-size: 0.875rem;
  animation: floatIn 0.8s ease-out both;
}
.hero-stat-card b { color: var(--amber-brand); font-weight: 600; }
.hero-stat-card span { color: rgba(245, 240, 227, 0.85); }

@keyframes slideInFromRight { from { opacity: 0; transform: translateX(40px) scale(1.02); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes slideInFromLeft { from { opacity: 0; transform: translateX(-40px) scale(1.02); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes floatIn { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ---------------------------------------------------------------
   Section + botanical edges
   --------------------------------------------------------------- */
.section { position: relative; padding-block: 5rem; isolation: isolate; }
.section-inner { position: relative; z-index: 10; max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; }
.section--cream { background-color: var(--cream); }
.section-photo-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.section-photo-tint { position: absolute; inset: 0; background-color: rgba(37, 61, 46, 0.85); }
.section-photo-inner { position: relative; max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; color: var(--cream); }

.botanical-edges { position: relative; isolation: isolate; }
.botanical-edges::before, .botanical-edges::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 28vw; max-width: 520px;
  pointer-events: none; z-index: 0; opacity: 0.09; filter: blur(6px) saturate(0.7);
  background-repeat: no-repeat; background-size: cover; background-position: center; display: none;
}
@media (min-width: 768px) { .botanical-edges::before, .botanical-edges::after { display: block; } }
@media (min-width: 1280px) { .botanical-edges::before, .botanical-edges::after { opacity: 0.1; } }
.botanical-edges::before {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 30%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black 30%, transparent 100%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800'><g fill='%23708b6a'><path d='M-40 120 C 60 60, 140 100, 180 180 C 210 240, 170 300, 100 310 C 40 320, -10 280, -40 220 Z'/><path d='M-30 340 C 80 300, 160 360, 170 440 C 175 500, 120 540, 60 520 C 10 500, -30 440, -30 380 Z'/><path d='M-60 560 C 40 520, 130 560, 160 640 C 180 700, 130 760, 60 750 C 0 740, -50 690, -60 620 Z'/><path d='M60 40 C 120 20, 200 60, 210 130 C 215 190, 170 220, 120 200 C 70 180, 40 120, 60 40 Z' opacity='.6'/><path d='M40 460 C 110 440, 180 490, 180 560 C 180 610, 140 640, 90 620 C 40 600, 20 540, 40 460 Z' opacity='.5'/></g></svg>");
}
.botanical-edges::after {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, black 0%, black 30%, transparent 100%);
  mask-image: linear-gradient(to left, black 0%, black 30%, transparent 100%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800'><g fill='%238a9a7b'><path d='M440 80 C 340 40, 260 90, 230 170 C 210 230, 250 290, 320 300 C 380 310, 430 260, 440 200 Z'/><path d='M420 300 C 320 270, 240 330, 240 410 C 240 470, 290 510, 350 490 C 400 470, 430 410, 420 340 Z'/><path d='M450 540 C 350 510, 260 560, 240 640 C 230 700, 280 750, 350 740 C 410 730, 460 680, 450 610 Z'/><path d='M320 20 C 260 10, 200 60, 200 130 C 200 180, 240 210, 290 200 C 340 180, 360 120, 320 20 Z' opacity='.55'/><path d='M340 440 C 280 430, 220 480, 220 550 C 220 600, 260 630, 310 615 C 360 595, 380 520, 340 440 Z' opacity='.5'/></g></svg>");
}

/* ---------------------------------------------------------------
   Reveal-on-scroll + counters
   --------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.reveal-on-scroll.float-left.is-visible { animation: slideInFromLeft 0.8s ease-out both; }
.reveal-on-scroll.float-right.is-visible { animation: slideInFromRight 0.8s ease-out both; }
.counter-value { will-change: contents; }

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; font-weight: 600; font-size: 0.875rem; transition: all 0.3s; border: none; text-align: center; }
.premium-button { box-shadow: 0 8px 24px rgba(20, 38, 29, 0.12); transition: transform 240ms ease, box-shadow 240ms ease, background-color 240ms ease, color 240ms ease; }
.premium-button:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20, 38, 29, 0.16); }

.btn-amber, .btn-outline-cream, .btn-outline-forest, .btn-forest {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; font-weight: 600; font-size: 0.875rem;
}
.btn-amber { background-color: var(--amber-brand); color: var(--forest-deep); padding: 0.75rem 1.75rem; }
.btn-amber:hover { filter: brightness(1.1); }
.btn-outline-cream { border: 2px solid var(--cream); color: var(--cream); padding: 0.75rem 1.75rem; background: transparent; }
.btn-outline-cream:hover { background-color: var(--cream); color: var(--forest-deep); }
.btn-outline-forest { border: 2px solid var(--forest); color: var(--forest); padding: 0.75rem 1.75rem; background: transparent; }
.btn-outline-forest:hover { background-color: var(--forest); color: var(--cream); }
.btn-forest { background-color: var(--forest); color: var(--cream); padding: 0.75rem 1.75rem; }
.btn-forest:hover { background-color: var(--forest-deep); }
.btn-forest-lg { background-color: var(--forest); color: var(--cream); padding: 0.75rem 1.75rem; border-radius: 9999px; font-weight: 600; display: inline-block; transition: background-color 0.2s; }
.btn-forest-lg:hover { background-color: var(--forest-deep); }

/* ---------------------------------------------------------------
   Marquee
   --------------------------------------------------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); }
.marquee-track { display: flex; gap: 2rem; width: max-content; animation: marqueeLeftToRight 32s linear infinite; }
.marquee-track--tight { gap: 0.5rem; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeLeftToRight { from { transform: translateX(-50%); } to { transform: translateX(0%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------------------------------------------------------------
   Certifications strip
   --------------------------------------------------------------- */
.certs-strip { background-color: var(--cream); padding-block: 3.5rem; border-block: 1px solid rgba(112, 139, 106, 0.3); }
.certs-title { text-align: center; font-family: var(--font-serif); font-size: 1.875rem; color: var(--forest); margin: 0 0 2.5rem; }
@media (min-width: 768px) { .certs-title { font-size: 2.25rem; } }
.cert-card { flex-shrink: 0; width: 13rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cert-card-logo { height: 9rem; display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; }
.cert-card-logo img { max-height: 8rem; max-width: 12rem; object-fit: contain; }
.cert-card-name { font-weight: 600; color: var(--forest); font-size: 1.125rem; }
.cert-card-short { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.25rem; }

/* ---------------------------------------------------------------
   Icon image
   --------------------------------------------------------------- */
.icon-img { border-radius: 9999px; object-fit: cover; border: 2px solid rgba(112, 139, 106, 0.6); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* ---------------------------------------------------------------
   Generic text utilities used across pages
   --------------------------------------------------------------- */
.eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--amber-brand); font-weight: 600; margin-bottom: 0.75rem; }
.section-title { font-family: var(--font-serif); font-size: 1.875rem; color: var(--forest); margin: 0; }
@media (min-width: 768px) { .section-title { font-size: 2.25rem; } }
.section-lead { color: var(--muted-foreground); margin-top: 1rem; }
.text-center { text-align: center; }
.muted { color: var(--muted-foreground); }

/* ---------------------------------------------------------------
   Grid helpers (subset of Tailwind grid used across pages)
   --------------------------------------------------------------- */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .sm-grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

/* ---------------------------------------------------------------
   Product / grade cards
   --------------------------------------------------------------- */
.product-card {
  position: relative; overflow: hidden; background: #fff; border: 1px solid rgba(112,139,106,0.3);
  border-radius: 1rem; padding: 1.5rem; display: flex; flex-direction: column;
  background-size: cover; background-position: center;
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out, border-color 0.3s ease-out;
}
.product-card:hover { box-shadow: 0 18px 50px rgba(22,44,31,0.12); transform: translateY(-4px) scale(1.03); border-color: rgba(212,165,89,0.4); }
.product-card-decoimg { pointer-events: none; position: absolute; right: -2.5rem; bottom: -2.5rem; width: 16rem; height: 16rem; object-fit: contain; opacity: 0.25; user-select: none; }
.product-card-overlay { pointer-events: none; position: absolute; inset: 0; background: linear-gradient(to top right, rgba(255,255,255,0.85), rgba(255,255,255,0.6), rgba(255,255,255,0.1)); }
.product-card-overlay--bakery { background: linear-gradient(to top right, rgba(255,255,255,0.95), rgba(255,255,255,0.85), rgba(255,255,255,0.7)); }
.product-card-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.product-card-code { font-size: 0.75rem; font-weight: 700; background-color: var(--forest); color: var(--cream); padding: 0.25rem 0.75rem; border-radius: 9999px; }
.product-card-name { position: relative; font-family: var(--font-serif); font-size: 1.25rem; color: var(--forest); margin: 1rem 0 0; }
.product-card-desc { position: relative; font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.5rem; line-height: 1.6; flex: 1; }
.product-card-tags { position: relative; display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 1rem; }
.product-card-tag { font-size: 0.75rem; padding: 0.25rem 0.625rem; background-color: rgba(112,139,106,0.15); color: var(--forest); border-radius: 9999px; }
.product-card-dosage { position: relative; margin-top: 1rem; font-size: 0.875rem; }
.product-card-dosage b { color: var(--forest); font-weight: 600; }
.product-card-link { position: relative; display: inline-block; margin-top: 1.25rem; color: var(--amber-brand); font-weight: 600; font-size: 0.875rem; }
.product-card-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   Feature / advantage / value cards (bg image + overlay)
   --------------------------------------------------------------- */
.photo-card { position: relative; overflow: hidden; border-radius: 0.75rem; background-size: cover; background-position: center; box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
.photo-card-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom right, rgba(37,61,46,0.9), rgba(37,61,46,0.75), rgba(37,61,46,0.5)); }
.photo-card-overlay--light { background: linear-gradient(to bottom right, rgba(37,61,46,0.9), rgba(37,61,46,0.75), rgba(37,61,46,0.4)); }
.photo-card-body { position: relative; padding: 1.75rem; }
.photo-card-title { font-family: var(--font-serif); font-size: 1.125rem; color: var(--amber-brand); margin: 0.75rem 0 0; }
.photo-card-title--lg { font-size: 1.25rem; }
.photo-card-text { font-size: 0.875rem; color: rgba(245,240,227,0.9); margin-top: 0.375rem; line-height: 1.5; }

.advantage-card { position: relative; overflow: hidden; color: var(--cream); border-radius: 0.75rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); min-height: 260px; background-size: cover; background-position: center; padding: 1.75rem; transition: box-shadow 0.3s, transform 0.3s; }
.advantage-card:hover { box-shadow: 0 18px 42px rgba(0,0,0,0.2); transform: translateY(-4px) scale(1.03); }

/* ---------------------------------------------------------------
   Counter stat cards
   --------------------------------------------------------------- */
.stat-card { text-align: center; padding: 1.5rem; background: #fff; border-radius: 0.75rem; border: 1px solid rgba(112,139,106,0.3); }
.stat-card-value { font-size: 2.25rem; font-family: var(--font-serif); color: var(--amber-brand); }
.stat-card-label { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.25rem; }

/* ---------------------------------------------------------------
   Industry cards (marquee)
   --------------------------------------------------------------- */
.industry-card { flex-shrink: 0; width: 16rem; background: #fff; padding: 1.5rem; border-radius: 0.75rem; border: 1px solid rgba(112,139,106,0.3); text-align: center; transition: box-shadow 0.3s, transform 0.3s; }
.industry-card:hover { box-shadow: 0 16px 36px rgba(27,45,32,0.12); transform: translateY(-4px) scale(1.03); }
.industry-card h3 { font-family: var(--font-serif); font-size: 1.125rem; color: var(--forest); margin: 1rem 0 0; }
.industry-card p { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.5rem; }
.industry-card .icon-row { display: flex; justify-content: center; }

/* ---------------------------------------------------------------
   Blog / article cards
   --------------------------------------------------------------- */
.post-card { background: #fff; border: 1px solid rgba(112,139,106,0.3); border-radius: 1rem; overflow: hidden; transition: box-shadow 0.3s, transform 0.3s; display: block; }
.post-card:hover { box-shadow: 0 18px 50px rgba(22,44,31,0.12); transform: translateY(-4px); }
.post-card-thumb { aspect-ratio: 16/9; overflow: hidden; }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.post-card:hover .post-card-thumb img { transform: scale(1.05); }
.post-card-body { padding: 1.5rem; }
.post-card-date { font-size: 0.75rem; color: var(--muted-foreground); }
.post-card-title { font-family: var(--font-serif); font-size: 1.125rem; color: var(--forest); margin: 0.5rem 0 0; line-height: 1.35; }
.post-card-excerpt { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.5rem; line-height: 1.6; }
.post-card-cta { display: inline-block; margin-top: 1rem; font-size: 0.875rem; color: var(--amber-brand); font-weight: 600; }
.post-card:hover .post-card-cta { text-decoration: underline; }

/* ---------------------------------------------------------------
   CTA banner
   --------------------------------------------------------------- */
.cta-title { font-family: var(--font-serif); font-size: 1.875rem; margin: 0; }
@media (min-width: 768px) { .cta-title { font-size: 3rem; } }
.cta-text { margin-top: 1rem; color: rgba(245,240,227,0.85); font-size: 1.125rem; }

/* ---------------------------------------------------------------
   Forms (contact page)
   --------------------------------------------------------------- */
.form-input { width: 100%; background: #fff; border: 1px solid rgba(112,139,106,0.4); border-radius: 0.5rem; padding: 0.75rem 1rem; font-size: 0.875rem; font-family: inherit; color: var(--foreground); }
.form-input:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 2px rgba(51,83,61,0.2); }
.form-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--forest); margin-bottom: 0.5rem; }
.form-error { font-size: 0.75rem; color: var(--destructive); margin-top: 0.25rem; }
.form-banner-success { margin-bottom: 1.5rem; padding: 1rem; background-color: var(--forest); color: var(--cream); border-radius: 0.75rem; }
.form-banner-error { margin-bottom: 1.5rem; padding: 1rem; background-color: var(--destructive-bg); color: var(--destructive); border: 1px solid oklch(0.577 0.245 27.325 / 0.3); border-radius: 0.75rem; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------
   Tables
   --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: 1rem; border: 1px solid rgba(112,139,106,0.3); background: #fff; }
table.data-table { width: 100%; font-size: 0.875rem; }
table.data-table thead { background-color: var(--forest); color: var(--cream); text-align: left; }
table.data-table th, table.data-table td { padding: 0.75rem 1rem; }
table.data-table tbody tr:nth-child(even) { background-color: rgba(245,240,227,0.4); }
table.spec-table { width: 100%; font-size: 0.875rem; background: #fff; border-radius: 1rem; border: 1px solid rgba(112,139,106,0.3); overflow: hidden; }
table.spec-table td { padding: 0.75rem 1rem; border-bottom: 1px solid rgba(112,139,106,0.2); }
table.spec-table tr:last-child td { border-bottom: none; }
table.spec-table tr:nth-child(even) { background-color: rgba(245,240,227,0.4); }
table.spec-table td:first-child { color: var(--muted-foreground); }
table.spec-table td:last-child { color: var(--forest); font-weight: 600; }

/* ---------------------------------------------------------------
   Category filter pills (Products index)
   --------------------------------------------------------------- */
.filter-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 2.5rem; }
.filter-pill { padding: 0.5rem 1.25rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; border: 1px solid rgba(112,139,106,0.4); background: #fff; color: var(--forest); transition: all 0.2s; }
.filter-pill:hover { border-color: var(--forest); }
.filter-pill.is-active { background-color: var(--forest); color: var(--cream); border-color: var(--forest); }

/* ---------------------------------------------------------------
   Blog article + share buttons
   --------------------------------------------------------------- */
.article-cover { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background-color: var(--forest-deep); }
@media (min-width: 768px) { .article-cover { aspect-ratio: 21/9; } }
.article-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-cover-tint { position: absolute; inset: 0; background: linear-gradient(to top, rgba(37,61,46,0.85), rgba(37,61,46,0.1), transparent); }
.article-back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--forest); font-weight: 600; }
.article-back:hover { color: var(--amber-brand); }
.article-title { font-family: var(--font-serif); font-size: 1.875rem; line-height: 1.25; color: var(--forest); margin-top: 1.5rem; }
@media (min-width: 768px) { .article-title { font-size: 3rem; } }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1.5rem; font-size: 0.875rem; color: var(--muted-foreground); margin-top: 1.25rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(112,139,106,0.3); }
.article-meta span { display: flex; align-items: center; gap: 0.375rem; }
.article-body { max-width: 700px; margin-inline: auto; }
.article-content { margin-top: 2.5rem; }
.article-content > * + * { margin-top: 1.5rem; }
.article-content p { font-size: 1rem; line-height: 1.75; color: rgba(34, 56, 41, 0.9); }
@media (min-width: 768px) { .article-content p { font-size: 1.125rem; } }
.article-content h2 { font-family: var(--font-serif); font-size: 1.5rem; color: var(--forest); }
@media (min-width: 768px) { .article-content h2 { font-size: 1.875rem; } }
.article-content h3 { font-family: var(--font-serif); font-size: 1.25rem; color: var(--forest); }
@media (min-width: 768px) { .article-content h3 { font-size: 1.5rem; } }
.article-content blockquote { border-left: 4px solid var(--amber-brand); padding: 0.25rem 0 0.25rem 1.25rem; font-style: italic; font-size: 1.125rem; color: rgba(51,83,61,0.9); margin: 0; }
.article-content hr { border: none; border-top: 1px solid rgba(112,139,106,0.3); }
.article-content ul, .article-content ol { padding-left: 1.5rem; }
.article-content li { font-size: 1rem; color: rgba(34,56,41,0.9); margin-top: 0.5rem; }
.article-content figure { margin: 0; }
.article-content figcaption { font-size: 0.875rem; color: var(--muted-foreground); text-align: center; margin-top: 0.5rem; }
.article-empty { margin-top: 2.5rem; color: var(--muted-foreground); font-style: italic; }

.share-row { display: flex; align-items: center; gap: 0.625rem; margin-top: 1.5rem; }
.share-btn { width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 1px solid rgba(112,139,106,0.4); display: flex; align-items: center; justify-content: center; color: var(--forest); background: transparent; transition: all 0.2s; }
.share-btn:hover { background-color: var(--forest); color: var(--cream); border-color: var(--forest); }
.share-copied { font-size: 0.75rem; color: var(--forest); font-weight: 500; }

.article-error { max-width: 700px; margin-inline: auto; text-align: center; }
.article-error svg { color: var(--destructive); margin: 0 auto 1rem; display: block; }

/* ---------------------------------------------------------------
   Quality page: step timeline
   --------------------------------------------------------------- */
.qc-spine { display: none; position: absolute; left: 50%; top: 1rem; bottom: 1rem; width: 1px; background: rgba(51,83,61,0.15); transform: translateX(-50%); }
@media (min-width: 768px) { .qc-spine { display: block; } }
.qc-steps { display: flex; flex-direction: column; gap: 3rem; }
@media (min-width: 768px) { .qc-steps { gap: 5rem; } }
.qc-step { position: relative; }
@media (min-width: 768px) { .qc-step { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } }
.qc-node { display: none; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: var(--forest); color: var(--cream); align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 700; box-shadow: 0 10px 15px rgba(0,0,0,.15); outline: 4px solid var(--cream); z-index: 10; }
@media (min-width: 768px) { .qc-node { display: flex; } }
.qc-node-mobile { display: inline-flex; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: var(--forest); color: var(--cream); align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 700; margin-bottom: 1rem; }
@media (min-width: 768px) { .qc-node-mobile { display: none; } }
.qc-step-img-wrap { position: relative; }
.qc-step-img { border-radius: 1rem; box-shadow: 0 20px 25px rgba(0,0,0,.15); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.qc-step-content { margin-top: 1.5rem; }
@media (min-width: 768px) { .qc-step-content { margin-top: 0; } }
.qc-step-eyebrow { display: block; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber-brand); font-weight: 600; margin-bottom: .5rem; }
.qc-step-title { font-family: var(--font-serif); font-size: 1.5rem; color: var(--forest); line-height: 1.3; }
@media (min-width: 768px) { .qc-step-title { font-size: 1.875rem; } }
.qc-step-body { color: rgba(51,83,61,.75); margin-top: 1rem; line-height: 1.7; }
.qc-step-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.qc-step-tag { font-size: .75rem; padding: .375rem .75rem; background: #fff; border: 1px solid rgba(51,83,61,.1); color: var(--forest); border-radius: 9999px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
@media (min-width: 768px) {
  .qc-step--flipped .qc-step-img-wrap { order: 2; }
  .qc-step--flipped .qc-step-content { order: 1; text-align: right; }
  .qc-step--flipped .qc-step-tags { justify-content: flex-end; }
}
.docs-panel { background: var(--forest); color: var(--cream); border-radius: 1rem; padding: 2.5rem; text-align: center; }
.docs-pill { padding: .5rem 1rem; border-radius: 9999px; background: rgba(245,240,227,.1); border: 1px solid rgba(245,240,227,.2); font-size: .875rem; }

/* ---------------------------------------------------------------
   Pages without a Hero (Contact, Product detail, Blog) get pt-32
   on their first section to clear the fixed navbar.
   --------------------------------------------------------------- */
.section--pt-lg { padding-top: 8rem; }

/* ---------------------------------------------------------------
   Contact page: form card + "what happens next" steps
   --------------------------------------------------------------- */
.form-card { max-width: 48rem; margin-inline: auto; background: var(--cream); border-radius: 1rem; padding: 2rem; border: 1px solid rgba(112,139,106,.3); }
@media (min-width: 768px) { .form-card { padding: 3rem; } }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid .full-width { grid-column: 1 / -1; }
.form-submit { width: 100%; padding: 0.875rem 2.5rem; border-radius: 9999px; background-color: var(--amber-brand); color: var(--forest-deep); font-weight: 600; border: none; font-size: 0.875rem; }
@media (min-width: 768px) { .form-submit { width: auto; } }
.form-submit:hover { filter: brightness(1.1); }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.step-card { background: #fff; padding: 1.5rem; border-radius: 1rem; border: 1px solid rgba(112,139,106,.3); position: relative; }
.step-card .step-num { font-family: var(--font-serif); font-size: 3rem; color: rgba(212,165,89,.3); position: absolute; top: .5rem; right: 1rem; }
.step-card p { font-size: .875rem; color: var(--foreground); position: relative; margin: 0; }

/* ---------------------------------------------------------------
   Blog loading / error / empty states (dynamic Notion-backed blog)
   --------------------------------------------------------------- */
.blog-spinner { width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 3px solid rgba(112,139,106,.25); border-top-color: var(--forest); animation: blog-spin 0.8s linear infinite; margin: 0 auto; }
@keyframes blog-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .blog-spinner { animation-duration: 2.4s; } }
.blog-loading { text-align: center; padding: 3rem 1rem; color: var(--muted-foreground); }
.blog-loading p { margin-top: 1rem; font-size: .875rem; }
.blog-error { max-width: 32rem; margin-inline: auto; text-align: center; background: var(--destructive-bg); color: var(--destructive); border: 1px solid oklch(0.577 0.245 27.325 / 0.3); border-radius: .75rem; padding: 1.25rem 1.5rem; }
.blog-empty { text-align: center; color: var(--muted-foreground); padding: 2rem 1rem; }

.skeleton-card { background: #fff; border: 1px solid rgba(112,139,106,.3); border-radius: 1rem; overflow: hidden; }
.skeleton-thumb, .skeleton-line { background: linear-gradient(90deg, rgba(112,139,106,.12) 25%, rgba(112,139,106,.22) 37%, rgba(112,139,106,.12) 63%); background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease infinite; }
@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skeleton-thumb, .skeleton-line { animation: none; } }
.skeleton-thumb { aspect-ratio: 16/9; }
.skeleton-card-body { padding: 1.5rem; }
.skeleton-line { height: .75rem; border-radius: .25rem; margin-top: .75rem; }
.skeleton-line:first-child { margin-top: 0; width: 40%; }
.skeleton-line.w-full { width: 100%; }
.skeleton-line.w-3-4 { width: 75%; }

/* ---------------------------------------------------------------
   Utility spacing / misc reused inline
   --------------------------------------------------------------- */
.mt-2{margin-top:.5rem;} .mt-3{margin-top:.75rem;} .mt-4{margin-top:1rem;} .mt-5{margin-top:1.25rem;} .mt-6{margin-top:1.5rem;} .mt-7{margin-top:1.75rem;} .mt-8{margin-top:2rem;} .mt-10{margin-top:2.5rem;} .mt-12{margin-top:3rem;} .mt-16{margin-top:4rem;}
.mb-2{margin-bottom:.5rem;} .mb-3{margin-bottom:.75rem;} .mb-4{margin-bottom:1rem;} .mb-6{margin-bottom:1.5rem;} .mb-8{margin-bottom:2rem;} .mb-10{margin-bottom:2.5rem;} .mb-12{margin-bottom:3rem;}
.flex{display:flex;} .flex-wrap{flex-wrap:wrap;} .justify-center{justify-content:center;} .justify-between{justify-content:space-between;} .gap-2{gap:.5rem;} .gap-3{gap:.75rem;} .gap-4{gap:1rem;}
.max-w-2xl{max-width:42rem;margin-inline:auto;} .max-w-3xl{max-width:48rem;margin-inline:auto;}
.rounded-2xl{border-radius:1rem;}