/* =========================================================
   SYLVANA — Global Stylesheet
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans: 'Montserrat', -apple-system, sans-serif;

  --c-dark: #1C2018;       /* forest charcoal */
  --c-gold: #D4A844;       /* antique gold */
  --c-white: #F5F2EC;      /* warm white */
  --c-sage: #6B8F5E;       /* sage accent */
  --c-text-on-dark: #E8E8D8;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  --section-pad-y: clamp(4rem, 9vw, 8rem);
  --section-pad-x: clamp(1.5rem, 6vw, 6rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.9s;

  /* default line vars (overridden per product-line section) */
  --line-bg: var(--c-dark);
  --line-accent: var(--c-sage);
  --line-text: var(--c-text-on-dark);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font: inherit; }

body {
  font-family: var(--font-sans);
  font-weight: 300;
  background: var(--c-white);
  color: var(--c-dark);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .serif {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 400;
  opacity: 0.75;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--section-pad-x);
}

.section {
  padding: var(--section-pad-y) 0;
  position: relative;
}
.section--dark { background: var(--c-dark); color: var(--c-text-on-dark); }
.section--light { background: var(--c-white); color: var(--c-dark); }

.divider {
  width: 64px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  margin: 1.75rem auto;
}
.divider--left { margin-left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 2.4em;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  transition: all 0.4s var(--ease);
  white-space: nowrap;
}
.btn-outline-gold {
  border: 1px solid var(--c-gold);
  color: var(--c-gold);
  background: transparent;
}
.btn-outline-gold:hover {
  background: var(--c-gold);
  color: var(--c-dark);
}
.btn-solid-gold {
  background: var(--c-gold);
  color: var(--c-dark);
}
.btn-solid-gold:hover {
  background: #e6bd5f;
}
.btn-outline-current {
  border: 1px solid currentColor;
  color: currentColor;
}
.btn-outline-current:hover {
  background: currentColor;
}
.btn-outline-current:hover { color: var(--line-bg, var(--c-dark)); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 1.4rem var(--section-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: background 0.5s var(--ease), padding 0.5s var(--ease), box-shadow 0.5s var(--ease);
  color: var(--c-text-on-dark);
}
.site-header.is-scrolled {
  background: rgba(28, 32, 24, 0.92);
  backdrop-filter: blur(10px);
  padding: 0.9rem var(--section-pad-x);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.logo {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  font-weight: 600;
  color: var(--c-text-on-dark);
}
.logo span { color: var(--c-gold); }

.main-nav {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.main-nav a {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-on-dark);
  position: relative;
  padding-bottom: 4px;
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.main-nav a:hover::after,
.main-nav a.active::after { transform: scaleX(1); transform-origin: left; }

.nav-cta {
  margin-left: 0.5rem;
}

.hamburger {
  display: none;
  width: 28px; height: 20px;
  position: relative;
  z-index: 600;
}
.hamburger span {
  display: block;
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--c-text-on-dark);
  transition: all 0.35s var(--ease);
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { top: 18px; }
.hamburger.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--c-dark);
  z-index: 550;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  transform: translateY(-100%);
  transition: transform 0.55s var(--ease);
}
.mobile-nav.is-open { transform: translateY(0); }
.mobile-nav a {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--c-text-on-dark);
}

@media (max-width: 900px) {
  .main-nav { display: none; }
  .hamburger { display: block; }
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--c-dark);
  color: var(--c-text-on-dark);
  position: relative;
  overflow: hidden;
  padding: 5.5rem var(--section-pad-x) 3rem;
}
.hero {
  text-align: left;
  align-items: flex-start;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(107,143,94,0.16), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(107,143,94,0.10), transparent 60%);
  animation: mistDrift 22s ease-in-out infinite alternate;
  z-index: 0;
}

/* diffuser photograph, anchored right, dissolving into the dark */
.hero-media {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 58%;
  z-index: 0;
  pointer-events: none;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% center;
}
/* fade the photo's left edge so there is no seam against the copy */
.hero-media {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 18%, #000 46%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 18%, #000 46%, #000 100%);
}
/* readability wash under the copy */
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(20,26,19,0.85) 0%, rgba(20,26,19,0.28) 35%, rgba(20,26,19,0) 60%);
}

@media (max-width: 900px) {
  .hero { text-align: center; align-items: center; }
  .hero-media {
    width: 100%;
    -webkit-mask-image: linear-gradient(to top, transparent 4%, #000 55%);
    mask-image: linear-gradient(to top, transparent 4%, #000 55%);
  }
  .hero-media img { object-position: center 30%; }
  .hero-media::after {
    background: linear-gradient(to bottom, rgba(20,26,19,0.88) 0%, rgba(20,26,19,0.72) 45%, rgba(20,26,19,0.55) 100%);
  }
}
@keyframes mistDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(2%, -3%, 0) scale(1.08); }
}
.hero-content { position: relative; z-index: 1; max-width: 900px; }
/* desktop: copy occupies the left, clear of the diffuser */
@media (min-width: 901px) {
  .hero-content { max-width: min(620px, 52%); }
  .hero p.sub, .hero .sub--mission { margin-left: 0; margin-right: 0; }
  .hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
}
.hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 1.6rem;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 0.1s forwards;
}
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  margin-bottom: 1.4rem;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) 0.3s forwards;
}
.hero p.sub {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  max-width: 620px;
  margin: 0 auto 1rem;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) 0.5s forwards;
  color: var(--c-text-on-dark);
}
.hero .sub-tag {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--c-gold);
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) 0.65s forwards;
  margin-bottom: 2.6rem;
}
.hero .btn {
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) 0.8s forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ---------- Hero proof stats ---------- */
.hero-stats {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.1rem, 2.6vw, 2.4rem);
  margin: 1.4rem 0 0.7rem;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) 0.72s forwards;
}
.hero-stat {
  position: relative;
  padding-right: clamp(1.1rem, 2.6vw, 2.4rem);
}
.hero-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 0.35rem; bottom: 0.4rem;
  width: 1px;
  background: rgba(232,232,216,0.22);
}
.hero-stat .n {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1;
  color: var(--c-gold);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.hero-stat .n em {
  font-style: normal;
  font-size: 0.36em;
  letter-spacing: 0.08em;
  margin-left: 0.15em;
  opacity: 0.85;
}
.hero-stat .l {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.78;
  margin-top: 0.5rem;
  line-height: 1.35;
  max-width: 12ch;
}
.hero-stats-note {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin-bottom: 1.4rem;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) 0.82s forwards;
}
.hero-stats-note a {
  color: var(--c-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 900px) {
  .hero-stats { justify-content: center; gap: 1rem; }
  .hero-stat { padding-right: 1rem; }
  .hero-stat .l { max-width: 10ch; font-size: 0.62rem; letter-spacing: 0.07em; }
}
@media (max-width: 420px) {
  .hero-stat .n { font-size: 1.55rem; }
  .hero-stat .l { font-size: 0.56rem; }
}

.scroll-cue {
  position: absolute;
  bottom: 2.4rem; left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.55;
  z-index: 1;
}
.scroll-cue::after {
  content: '';
  display: block;
  width: 1px; height: 34px;
  background: currentColor;
  margin: 0.7rem auto 0;
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0.2; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 0.8; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0.2; }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.18s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.31s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.44s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.57s; }

/* ---------- Section heading ---------- */
.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 4rem;
}
.section-head h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0.6rem 0 1rem;
}
.section-head p { font-size: 1.02rem; opacity: 0.85; }

/* ---------- Hero mission copy ---------- */
.hero .sub strong { font-weight: 500; color: #fff; }
.hero .sub--mission {
  font-size: clamp(0.92rem, 1.15vw, 1.02rem);
  max-width: 700px;
  opacity: 0.82;
  margin-bottom: 1rem;
  animation-delay: 0.58s;
}

/* ---------- How it works (slideshow) ---------- */
.how-section {
  position: relative;
  overflow: hidden;
  background: #141a13;
  color: var(--c-text-on-dark);
}
/* layered forest atmosphere */
.how-section::before {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(107,143,94,0.26), transparent 55%),
    radial-gradient(ellipse at 85% 25%, rgba(46,72,48,0.45), transparent 60%),
    radial-gradient(ellipse at 50% 95%, rgba(212,168,68,0.10), transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(107,143,94,0.16), transparent 60%);
  animation: mistDrift 26s ease-in-out infinite alternate;
  z-index: 0;
}
/* faint conifer treeline */
.how-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: 1100px auto;
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='300' viewBox='0 0 1100 300'%3E%3Cg fill='%230b1410'%3E%3Cpath d='M60 300 L60 190 L40 190 L60 150 L46 150 L64 112 L52 112 L72 70 L92 112 L80 112 L98 150 L84 150 L104 190 L84 190 L84 300 Z'/%3E%3Cpath d='M190 300 L190 210 L172 210 L190 174 L178 174 L196 138 L184 138 L202 100 L220 138 L208 138 L226 174 L214 174 L232 210 L214 210 L214 300 Z'/%3E%3Cpath d='M330 300 L330 200 L308 200 L330 156 L316 156 L336 114 L322 114 L344 66 L366 114 L352 114 L372 156 L358 156 L380 200 L358 200 L358 300 Z'/%3E%3Cpath d='M470 300 L470 216 L454 216 L470 182 L458 182 L476 146 L464 146 L482 108 L500 146 L488 146 L506 182 L494 182 L510 216 L494 216 L494 300 Z'/%3E%3Cpath d='M610 300 L610 194 L588 194 L610 150 L596 150 L616 108 L602 108 L624 60 L646 108 L632 108 L652 150 L638 150 L660 194 L638 194 L638 300 Z'/%3E%3Cpath d='M760 300 L760 212 L742 212 L760 176 L748 176 L766 140 L754 140 L772 102 L790 140 L778 140 L796 176 L784 176 L802 212 L784 212 L784 300 Z'/%3E%3Cpath d='M900 300 L900 198 L878 198 L900 154 L886 154 L906 112 L892 112 L914 64 L936 112 L922 112 L942 154 L928 154 L950 198 L928 198 L928 300 Z'/%3E%3Cpath d='M1040 300 L1040 214 L1024 214 L1040 180 L1028 180 L1046 144 L1034 144 L1052 106 L1070 144 L1058 144 L1076 180 L1064 180 L1080 214 L1064 214 L1064 300 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.how-section > .container { position: relative; z-index: 1; }

/* the presentation card */
.slides { max-width: 900px; margin: 0 auto 3.5rem; }
.slides-stage {
  display: grid;
  border-radius: var(--radius-lg);
  background: rgba(16, 22, 16, 0.55);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(232,232,216,0.14);
  box-shadow: 0 30px 70px rgba(0,0,0,0.42);
  overflow: hidden;
}
.slide {
  grid-area: 1 / 1;
  padding: clamp(2.4rem, 5vw, 4.2rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), visibility 0s linear 0.7s;
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), visibility 0s;
}
.slide-num {
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 1;
  color: var(--c-gold);
  opacity: 0.5;
  display: block;
  margin-bottom: 1rem;
}
.slide h3 {
  font-size: clamp(1.8rem, 3.8vw, 2.9rem);
  margin-bottom: 1.1rem;
  color: #fff;
}
.slide p {
  font-size: clamp(0.95rem, 1.35vw, 1.06rem);
  opacity: 0.86;
  max-width: 620px;
  margin-bottom: 0.9rem;
}
.slide .slide-kicker {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.32rem);
  color: var(--c-sage);
  opacity: 1;
  margin-top: 1.3rem;
}
.slide .slide-stat {
  color: var(--c-gold);
  font-weight: 500;
}
.slide cite {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 0.5;
  margin-top: 1.5rem;
}
.slide cite a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* controls */
.slides-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 1.8rem;
}
.slide-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(232,232,216,0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-on-dark);
  transition: all 0.35s var(--ease);
}
.slide-arrow:hover { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-dark); }
.slide-arrow svg { width: 15px; height: 15px; }
.slide-dots { display: flex; gap: 0.7rem; }
.slide-dot {
  width: 34px; height: 3px;
  border-radius: 999px;
  background: rgba(232,232,216,0.24);
  transition: background 0.4s var(--ease);
  padding: 0;
}
.slide-dot.is-active { background: var(--c-gold); }
.slide-dot:hover { background: rgba(232,232,216,0.5); }

@media (max-width: 640px) {
  .slide-dot { width: 22px; }
  .slides-nav { gap: 1rem; }
  .slide-num { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .slide { transition: opacity 0.2s linear, visibility 0s; transform: none; }
  .how-section::before { animation: none; }
}

.benefit-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  border-top: 1px solid rgba(232,232,216,0.16);
  padding-top: 3rem;
}
.benefit {
  text-align: center;
}
.benefit .figure {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.9rem);
  color: var(--c-gold);
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}
.benefit .label {
  font-size: 0.82rem;
  opacity: 0.85;
  display: block;
  margin-bottom: 0.35rem;
}
.benefit .src {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  opacity: 0.5;
  display: block;
}
@media (max-width: 850px) {
  .benefit-strip { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ---------- Science columns ---------- */
.science-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.science-card {
  text-align: center;
  padding: 0 1rem;
}
.science-icon {
  width: 56px; height: 56px;
  margin: 0 auto 1.6rem;
  color: var(--c-gold);
}
.science-icon svg { width: 100%; height: 100%; }
.science-card h3 { font-size: 1.5rem; margin-bottom: 0.9rem; color: var(--c-gold); }
.science-card p { font-size: 0.95rem; opacity: 0.82; }

@media (max-width: 800px) {
  .science-grid { grid-template-columns: 1fr; gap: 2.6rem; }
}

/* ---------- Five Lines grid ---------- */
.lines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
}
.line-card {
  border-radius: var(--radius-lg);
  padding: 2.6rem 1.9rem;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--line-bg);
  color: #F2EFE6;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  isolation: isolate;
}
.line-card:hover { transform: translateY(-8px); box-shadow: 0 26px 55px rgba(0,0,0,0.4); }

/* product photograph fills the card */
.line-card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.line-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 1.1s var(--ease);
}
.line-card:hover .line-card-media img { transform: scale(1.06); }

/* legibility scrim — dark at the base where the copy sits, clear over the bottle */
.line-card::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(6,9,7,0.97) 0%,
    rgba(6,9,7,0.93) 44%,
    rgba(6,9,7,0.74) 60%,
    rgba(6,9,7,0.28) 78%,
    rgba(6,9,7,0.00) 100%
  );
}
/* faint accent glow, kept subtle so it tints rather than washes */
.line-card::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 8%, var(--line-accent) 0%, transparent 58%);
  opacity: 0.14;
  pointer-events: none;
}
.line-card > *:not(.line-card-media) { position: relative; z-index: 2; }
.line-card .line-name {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  color: var(--line-accent);
  position: relative;
}
/* foreign-language names (e.g. Sangre) stay italicised */
.line-card .line-name.is-foreign { font-style: italic; }
.line-card .en-name {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 0.4rem 0 0.9rem;
  position: relative;
}
.line-card .benefit {
  font-size: 0.9rem;
  opacity: 0.85;
  position: relative;
}
.line-card .arrow {
  margin-top: 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--line-accent);
  position: relative;
}

/* ---------- Dragon's Blood / Stat feature ---------- */
.stat-feature {
  text-align: center;
}
.stat-number {
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 11vw, 8rem);
  color: var(--c-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-feature .stat-sub {
  font-size: 1.1rem;
  margin: 1rem 0 2.2rem;
  opacity: 0.9;
}
.stat-feature .stat-body {
  max-width: 700px;
  margin: 0 auto;
  opacity: 0.82;
  font-size: 1.02rem;
}

/* ORAC chart */
.orac-chart {
  max-width: 780px;
  margin: 3.5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.orac-row {
  display: grid;
  grid-template-columns: 130px 1fr 110px;
  align-items: center;
  gap: 1rem;
}
.orac-label {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-align: right;
}
.orac-row.is-hero .orac-label { color: var(--c-gold); font-weight: 600; }
.orac-track {
  height: 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.orac-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-sage), var(--c-gold));
  transition: width 1.6s var(--ease);
}
.orac-row.is-hero .orac-fill { background: linear-gradient(90deg, #a37b1d, var(--c-gold)); }
.orac-value {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* ---------- Two column feature ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
.two-col h3 {
  font-size: 1.7rem;
  margin-bottom: 1rem;
  color: var(--c-gold);
}
.two-col p { opacity: 0.85; font-size: 0.98rem; }
@media (max-width: 800px) {
  .two-col { grid-template-columns: 1fr; gap: 2.6rem; }
}

/* ---------- Email capture ---------- */
.capture {
  text-align: center;
}
.form-row {
  display: flex;
  gap: 0.7rem;
  max-width: 480px;
  margin: 2rem auto 0;
  flex-wrap: wrap;
  justify-content: center;
}
.form-row input[type="email"],
.form-row input[type="text"] {
  flex: 1;
  min-width: 220px;
  padding: 1em 1.4em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.04);
  color: inherit;
}
.section--light .form-row input {
  border: 1px solid rgba(28,32,24,0.2);
  background: rgba(28,32,24,0.03);
}
.form-row input::placeholder { color: currentColor; opacity: 0.55; }
.form-success {
  margin-top: 1.6rem;
  color: var(--c-gold);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}
.hidden-field { position: absolute; left: -9999px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-dark);
  color: var(--c-text-on-dark);
  padding: 4.5rem var(--section-pad-x) 2rem;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: space-between;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(232,232,216,0.12);
}
.footer-brand .logo { margin-bottom: 0.8rem; }
.footer-brand p { font-size: 0.85rem; opacity: 0.65; max-width: 300px; }
.footer-nav { display: flex; gap: 3.5rem; flex-wrap: wrap; }
.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 1.1rem;
  font-weight: 400;
}
.footer-col a, .footer-col p {
  display: block;
  font-size: 0.88rem;
  opacity: 0.8;
  margin-bottom: 0.7rem;
}
.footer-social { display: flex; gap: 1rem; }
.footer-social a {
  width: 38px; height: 38px;
  border: 1px solid rgba(232,232,216,0.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s var(--ease);
}
.footer-social a:hover { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-dark); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  font-size: 0.78rem;
  opacity: 0.55;
}
.footer-legal {
  max-width: 800px;
  font-size: 0.72rem;
  opacity: 0.45;
  margin-top: 1rem;
  line-height: 1.6;
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-lg { margin-top: 3rem; }
.italic { font-style: italic; }
.gold { color: var(--c-gold); }

/* ---------- Product line section (used on products.html) ---------- */
.line-section {
  background: var(--line-bg);
  color: var(--line-text);
  padding: var(--section-pad-y) 0;
}
.line-section .eyebrow { color: var(--line-accent); }
.line-section h2 {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  color: var(--line-accent);
}
.line-section h2 em { font-style: italic; }
.line-section .subtitle {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 0.6rem 0 2rem;
}
.line-desc {
  max-width: 640px;
  font-size: 1.05rem;
  opacity: 0.88;
  margin-bottom: 1.6rem;
}
.line-feel {
  max-width: 640px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--line-accent);
  margin-bottom: 2.6rem;
}
.terp-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2.6rem;
}
.terp-table th, .terp-table td {
  text-align: left;
  padding: 0.9rem 1rem;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.section--light .terp-table th,
.section--light .terp-table td { border-bottom: 1px solid rgba(28,32,24,0.12); }
.terp-table th {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  opacity: 0.6;
  font-weight: 400;
}
.terp-table td:first-child { font-style: italic; color: var(--line-accent); }

.price-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.2rem;
}
.price-chip {
  border: 1px solid currentColor;
  opacity: 0.85;
  border-radius: 999px;
  padding: 0.6em 1.3em;
  font-size: 0.82rem;
}
.price-chip strong { color: var(--line-accent); }

.line-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
@media (max-width: 850px) {
  .line-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ---------- Product photography ---------- */
.line-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  background: rgba(0,0,0,0.2);
  box-shadow: 0 26px 60px rgba(0,0,0,0.32);
}
.line-media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1.2s var(--ease);
}
.line-media:hover img { transform: scale(1.035); }

/* sections without product photography run full width */
.line-grid--nomedia {
  grid-template-columns: 1fr;
  max-width: 780px;
  gap: 0;
}

/* photo moves to the right column on alternating sections */
.line-grid--reverse .line-media { order: 1; }
@media (max-width: 850px) {
  /* on mobile the photo always leads */
  .line-grid--reverse .line-media { order: -1; }
}

/* three-part layout: media + copy, table spans full width beneath */
.line-detail {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
@media (max-width: 850px) {
  .line-detail { grid-template-columns: 1fr; gap: 2.2rem; margin-top: 2.4rem; }
}

.waitlist-form {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  max-width: 460px;
}

/* ---------- Long-form science page ---------- */
.terpene-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem 3rem;
}
@media (max-width: 800px) { .terpene-list { grid-template-columns: 1fr; } }
.terpene-entry {
  border-top: 1px solid rgba(232,232,216,0.15);
  padding-top: 1.3rem;
}
.section--light .terpene-entry { border-top: 1px solid rgba(28,32,24,0.14); }
.terpene-entry h4 {
  font-size: 1.3rem;
  color: var(--c-gold);
  margin-bottom: 0.4rem;
}
.terpene-entry .src { font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; margin-bottom: 0.6rem; }
.terpene-entry p { font-size: 0.92rem; opacity: 0.82; }

.ref-list {
  max-width: 860px;
  margin: 0 auto;
  font-size: 0.85rem;
  opacity: 0.75;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.ref-list li { padding-left: 1.9em; text-indent: -1.9em; line-height: 1.6; }
.ref-list a { color: var(--c-gold); text-decoration: underline; text-underline-offset: 2px; }
.ref-group-title {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 2.6rem 0 1.2rem;
}
.ref-group-title:first-of-type { margin-top: 0; }

/* ---------- Per-product research citations ---------- */
.research-block {
  margin-top: 2.4rem;
  border-top: 1px solid currentColor;
  border-color: rgba(255,255,255,0.15);
  padding-top: 1.4rem;
}
.section--light .research-block { border-color: rgba(28,32,24,0.16); }
.research-block h4 {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
  opacity: 0.6;
  margin-bottom: 1.1rem;
}
.study {
  font-size: 0.83rem;
  line-height: 1.55;
  margin-bottom: 1rem;
  opacity: 0.85;
  padding-left: 0.9rem;
  border-left: 1px solid var(--line-accent);
}
.study cite { font-style: normal; display: block; opacity: 0.7; font-size: 0.78rem; margin-top: 0.2rem; }
.study a { color: var(--line-accent); text-decoration: underline; text-underline-offset: 2px; }
.study .finding { color: var(--line-accent); }

/* evidence-strength tag */
.eq {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.18em 0.7em;
  margin-left: 0.5em;
  opacity: 0.65;
  vertical-align: middle;
}

/* ---------- Research page ---------- */
.paper {
  max-width: 860px;
  margin: 0 auto 2.6rem;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid rgba(232,232,216,0.14);
}
.section--light .paper { border-bottom-color: rgba(28,32,24,0.13); }
.paper:last-child { border-bottom: none; margin-bottom: 0; }
.paper-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.paper-design {
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  border: 1px solid var(--c-gold);
  border-radius: 999px;
  padding: 0.24em 0.85em;
}
.section--light .paper-design { color: #7a6220; border-color: #b99a44; }
.paper h3 {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.3;
  margin-bottom: 0.6rem;
}
.paper-cite { font-size: 0.82rem; opacity: 0.68; margin-bottom: 1rem; }
.paper-cite a { color: var(--c-gold); text-decoration: underline; text-underline-offset: 2px; }
.section--light .paper-cite a { color: #7a6220; }
.paper-summary { font-size: 0.95rem; opacity: 0.86; margin-bottom: 1rem; line-height: 1.65; }
.paper-why {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.6;
  padding-left: 1rem;
  border-left: 2px solid var(--c-sage);
}
.paper-why span {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.35rem;
}

/* ---------- Story page ---------- */
.story-block {
  max-width: 760px;
  margin: 0 auto 5rem;
}
.story-block h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--c-gold);
  margin-bottom: 1.4rem;
}
.story-block p { font-size: 1.05rem; opacity: 0.85; margin-bottom: 1.1rem; }
.story-block:last-child { margin-bottom: 0; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  min-height: 52vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--c-dark);
  color: var(--c-text-on-dark);
  padding: 8rem var(--section-pad-x) 3rem;
}
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.page-hero p { opacity: 0.8; max-width: 560px; margin: 1rem auto 0; }

/* responsive helpers */
@media (max-width: 700px) {
  .science-grid, .lines-grid { gap: 2rem; }
  .orac-row { grid-template-columns: 92px 1fr 80px; }
  .footer-top { flex-direction: column; }
}


/* Subscription pricing — added 2026-09-13. The subscription is the offer we
   lead with, so it is filled rather than outlined and it does not dim. */
.price-chip--sub {
  border-color: var(--line-accent);
  background: var(--line-accent);
  color: var(--line-bg);
  opacity: 1;
  font-weight: 500;
}
.price-chip--sub strong { color: inherit; }
.price-chip--sub em {
  font-style: normal;
  opacity: 0.75;
  font-size: 0.92em;
}
.card-price {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-top: 0.9rem;
}
.card-price strong { color: var(--line-accent); font-weight: 600; }


/* Pre-order - added 2026-09-15. The subscription option is filled and first,
   matching the price chips; the note is quiet but never hidden. */
.plan-choice {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.plan-choice__legend {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.55rem;
  padding: 0;
}
.plan-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.plan-opt:hover { background: rgba(255, 255, 255, 0.04); }
.plan-opt input { margin-top: 0.25rem; accent-color: var(--line-accent); }
.plan-opt span { display: flex; flex-direction: column; line-height: 1.35; }
.plan-opt em { font-style: normal; font-size: 0.82em; opacity: 0.7; }
.plan-opt--sub { background: rgba(107, 143, 94, 0.14); }
.preorder-note {
  font-size: 0.78rem;
  line-height: 1.5;
  opacity: 0.75;
  margin: 0 0 0.85rem;
  max-width: 44ch;
}