/* ============================================================
   Home page styles
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--forest-900);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
  transform: scale(1.05);
}
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(20,32,15,0.94) 0%, rgba(20,32,15,0.72) 45%, rgba(20,32,15,0.38) 100%);
}
.hero__particles {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 2;
  padding-top: var(--nav-h);
  width: 100%;
}
.hero__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 2rem;
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 500;
  color: #fff;
  line-height: 1.04;
  letter-spacing: -0.02em;
  /*max-width: 15ch;*/
  margin-top:30px;
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(120deg, var(--gold-400), var(--gold-300));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__sub {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  color: var(--forest-200);
  max-width: 52ch;
  line-height: 1.6;
}
.hero__actions {
  margin-top: var(--sp-5);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.hero__meta {
  margin-top: var(--sp-7);
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.hero__meta-item strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
}
.hero__meta-item span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--forest-300);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero__meta-divider {
  width: 1px; height: 40px;
  background: rgba(255,255,255,0.15);
}

/* Specimen seal — the signature flourish, planted beside the
   hero actions like a certification stamp on a seed bag. */
.hero__seal {
  display: none;
}
@media (min-width: 640px) {
  .hero__seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px; height: 84px;
    color: var(--gold-300);
    opacity: 0.9;
  }
}

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--forest-100);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--forest-100);
}
.stats__item {
  background: var(--paper);
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
  : background 0.4s var(--ease);
}
.stats__item:hover { background: var(--sage-100); }
.stats__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 600;
  color: var(--forest-700);
  letter-spacing: -0.02em;
  line-height: 1;
}
.stats__num .suffix { color: var(--earth-500); }
.stats__label {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Challenge ---------- */
.challenge {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.challenge__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.challenge__item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--sage-200);
  box-shadow: var(--shadow-sm);
  : transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.challenge__item:hover { transform: translateX(8px); box-shadow: var(--shadow-md); border-color: var(--forest-300); }
.challenge__item-num {
  flex-shrink: 0;
  width: 52px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--forest-100);
  color: var(--forest-700);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}
.challenge__item h4 { font-size: 1.05rem; margin-bottom: 0.25rem; font-weight: 600; }
.challenge__item p { font-size: 0.9rem; line-height: 1.5; }

.soil-viz {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
}
.soil-viz img { width: 100%; height: 100%; object-fit: cover; }
.soil-viz__layers {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-4);
}
.soil-layer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0.5rem;
  backdrop-filter: blur(8px);
  background: rgba(20,32,15,0.4);
  border: 1px solid rgba(255,255,255,0.15);
}
.soil-layer:last-child { margin-bottom: 0; }
.soil-layer__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ---------- Solutions ---------- */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.solution-card {
  position: relative;
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-4);
  overflow: hidden;
  : transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  border: 1px solid var(--sage-200);
}
.solution-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.solution-card__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--earth-500);
}
.solution-card__icon {
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  background: var(--forest-100);
  display: flex; align-items: center; justify-content: center;
  margin: var(--sp-3) 0;
  color: var(--forest-600);
  : background 0.4s var(--ease), color 0.4s var(--ease);
}
.solution-card:hover .solution-card__icon { background: var(--forest-600); color: #fff; }
.solution-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; font-weight: 600; }
.solution-card p { font-size: 0.9rem; line-height: 1.55; }
.solution-card__link {
  margin-top: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest-600);
  : gap 0.3s var(--ease);
}
.solution-card:hover .solution-card__link { gap: 0.8rem; }
.solution-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--forest-500), var(--gold-400));
  transform: scaleX(0);
  transform-origin: left;
  : transform 0.5s var(--ease);
}
.solution-card:hover::before { transform: scaleX(1); }

/* ---------- Product showcase ---------- */
.product-rail {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  padding: var(--sp-2) 0 var(--sp-4);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.product-rail::-webkit-scrollbar { height: 6px; }
.product-rail::-webkit-scrollbar-track { background: var(--forest-100); border-radius: 3px; }
.product-rail::-webkit-scrollbar-thumb { background: var(--forest-400); border-radius: 3px; }

.product-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  background: var(--paper);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--sage-200);
  : transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  display: flex;
  flex-direction: column;
}
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.product-card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: linear-gradient(160deg, var(--forest-100), var(--sage-100));
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  : transform 0.6s var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.08); }
.product-card__cat {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  background: rgba(255,253,248,0.92);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--forest-700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.product-card__body { padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; }
.product-card__body h4 { font-size: 1.1rem; margin-bottom: 0.4rem; font-weight: 600; }
.product-card__benefit { font-size: 0.85rem; line-height: 1.5; color: var(--ink-500); margin-bottom: var(--sp-3); flex: 1; }
.product-card__view {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest-600);
  : gap 0.3s var(--ease);
}
.product-card:hover .product-card__view { gap: 0.8rem; }

/* ---------- Science ---------- */
.science-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  position: relative;
  z-index: 1;
}
.science-card {
  position: relative;
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  overflow: hidden;
  : transform 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease);
}
.science-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(223,183,92,0.45);
}
.science-card__molecule {
  width: 56px; height: 56px;
  margin-bottom: var(--sp-3);
  color: var(--gold-400);
  opacity: 0.9;
}
.science-card h4 { color: #fff; font-size: 1.15rem; margin-bottom: 0.5rem; font-weight: 600; }
.science-card p { color: var(--forest-200); font-size: 0.88rem; line-height: 1.55; }
.science-card__num {
  position: absolute;
  top: var(--sp-4); right: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(223,183,92,0.55);
}

/* ---------- Journey timeline (a genuine sequence — numbering
   earns its place here) ---------- */
.journey {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.journey::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 10%; right: 10%;
  height: 0;
  border-top: 2px dashed var(--forest-300);
  z-index: 0;
}
.journey__step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 var(--sp-2);
}
.journey__dot {
  width: 80px; height: 80px;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--forest-200);
  display: flex; align-items: center; justify-content: center;
  color: var(--forest-600);
  : all 0.4s var(--ease);
  position: relative;
}
.journey__dot::after {
  content: attr(data-step);
  position: absolute;
  top: -6px; right: -6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--earth-500);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.journey__step:hover .journey__dot {
  background: var(--forest-600);
  color: #fff;
  border-color: var(--forest-600);
  transform: scale(1.08);
}
.journey__step h4 { font-size: 1.05rem; margin-bottom: 0.3rem; font-weight: 600; }
.journey__step p { font-size: 0.82rem; line-height: 1.5; }

/* ---------- Farmer stories ---------- */
.farmer-stories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.farmer-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: var(--shadow-md);
  : transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.farmer-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.farmer-card img { width: 100%; height: 100%; object-fit: cover; : transform 0.6s var(--ease); }
.farmer-card:hover img { transform: scale(1.06); }
.farmer-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,32,15,0.94) 0%, rgba(20,32,15,0.32) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-4);
  color: #fff;
}
.farmer-card__name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.farmer-card__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--forest-200);
  margin-top: 0.3rem;
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.farmer-card__detail {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed rgba(255,255,255,0.2);
  font-size: 0.85rem;
  color: var(--forest-100);
  line-height: 1.55;
}
.farmer-card__detail strong { color: var(--gold-400); font-weight: 600; }
.farmer-card__tag {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  padding: 0.35rem 0.8rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
}

/* ---------- About split ---------- */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}
.about-split__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 5/4;
}
.about-split__media img { width: 100%; height: 100%; object-fit: cover; }
.about-split__badge {
  position: absolute;
  bottom: var(--sp-4); left: var(--sp-4);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(255,253,248,0.95);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
}
.about-split__badge strong { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--forest-700); line-height: 1; }
.about-split__badge span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--shadow-xl);
}
.cta-banner__bg { position: absolute; inset: 0; }
.cta-banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-banner__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(20,32,15,0.87), rgba(43,22,8,0.65));
}
.cta-banner__content { position: relative; z-index: 2; padding: var(--sp-7) var(--sp-4); max-width: 700px; }
.cta-banner__content h2 { color: #fff; font-size: var(--fs-h1); margin-bottom: var(--sp-3); }
.cta-banner__content p { color: var(--forest-200); font-size: var(--fs-lead); margin-bottom: var(--sp-5); }
.cta-banner__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .solutions-grid { grid-template-columns: repeat(2, 1fr); }
  .science-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats__item:nth-child(4), .stats__item:nth-child(5) { grid-column: span 1; }
  .farmer-stories { grid-template-columns: repeat(2, 1fr); }
  .farmer-stories .farmer-card:nth-child(3) { display: none; }
}
@media (max-width: 860px) {
  .challenge, .about-split { grid-template-columns: 1fr; gap: var(--sp-5); }
  .journey { grid-template-columns: repeat(5, 1fr); }
  .journey__dot { width: 56px; height: 56px; }
  .journey__step h4 { font-size: 0.85rem; }
  .journey__step p { display: none; }
}
@media (max-width: 640px) {
  .solutions-grid { grid-template-columns: 1fr; }
  .science-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .farmer-stories { grid-template-columns: 1fr; }
  .farmer-stories .farmer-card:nth-child(3) { display: flex; }
  .farmer-stories .farmer-card { aspect-ratio: 4/5; }
  .journey { grid-template-columns: 1fr; gap: var(--sp-4); }
  .journey::before { display: none; }
  .journey__step { display: flex; align-items: center; gap: 1rem; text-align: left; }
  .journey__dot { margin: 0; flex-shrink: 0; }
  .journey__step p { display: block; }
  .hero__meta { gap: 1.5rem; }
  .hero__meta-divider { display: none; }
  .product-card { flex-basis: 280px; }
}

/* ============================================================
   AGRICULTURE CHALLENGE — ULTRA PREMIUM
   ============================================================ */

.challenge-section{
  position:relative;
  padding: 60px 0 60px !important;
  background:
    radial-gradient(
      circle at 5% 20%,
      rgba(105,160,82,.10),
      transparent 30rem
    ),
    radial-gradient(
      circle at 90% 70%,
      rgba(224,183,91,.07),
      transparent 28rem
    ),
    linear-gradient(180deg,#fafaf5,#f4f5ed)!important;
  overflow:hidden;
}

/* Ambient background lights */

.challenge-bg-glow{
  position:absolute;
  width:500px;
  height:500px;
  border-radius:50%;
  filter:blur(100px);
  pointer-events:none;
  opacity:.35;
}

.challenge-bg-glow--1{
  top:-250px;
  left:-200px;
  background:rgba(99,158,82,.18);
}

.challenge-bg-glow--2{
  right:-250px;
  bottom:-280px;
  background:rgba(224,183,91,.14);
}


/* MAIN GRID */

.challenge-premium{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(420px,.85fr);
  gap:85px;
  align-items:center;
}


/* LEFT SIDE */

.challenge-copy{
  position:relative;
  z-index:2;
}

.challenge-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px 8px 11px;

  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.13em;

  color:var(--forest-700);

  background:rgba(255,255,255,.72);
  border:1px solid rgba(63,107,58,.15);
  border-radius:999px;

  box-shadow:
    0 8px 25px rgba(31,67,38,.06),
    inset 0 1px 0 #fff;

  backdrop-filter:blur(14px);
}

.challenge-label__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#62a053;
  box-shadow:
    0 0 0 5px rgba(98,160,83,.10),
    0 0 15px rgba(98,160,83,.30);
}

.challenge-copy h2{
  margin-top:24px!important;
  font-size: 50px;
}

.challenge-copy h2 span{
  /*display:block;*/
  background:
    linear-gradient(
      110deg,
      #285e32,
      #69a357 48%,
      #a27a26
    );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.challenge-intro{
  max-width:650px;
  margin-top:25px!important;
  font-size:1.08rem!important;
  line-height:1.75!important;
  color:#687163!important;
}

.challenge-line{
  width:100%;
  max-width:610px;
  height:1px;
  margin:30px 0;

  background:
    linear-gradient(
      90deg,
      rgba(53,99,53,.22),
      rgba(53,99,53,.06),
      transparent
    );
}


/* CHALLENGE CARDS GRID */

.challenge-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
}

.challenge-card{
  position:relative;
  min-height:205px;
  padding:20px;

  border-radius:21px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(225,188,101,.11),
      transparent 9rem
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(242,247,237,.84)
    );

  border:1px solid rgba(62,108,57,.13);

  box-shadow:
    0 15px 40px rgba(29,65,35,.065),
    inset 0 1px 0 rgba(255,255,255,.95);

  overflow:hidden;

  :
    transform .55s var(--ultra-ease),
    box-shadow .55s var(--ultra-ease),
    border-color .4s ease;
}

.challenge-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;

  background:
    linear-gradient(
      90deg,
      #4e8c4b,
      #8bbd68,
      #e3bd62
    );

  transform:scaleX(0);
  transform-origin:left;

  :transform .55s var(--ultra-ease);
}

.challenge-card:hover{
  transform:translateY(-9px);
  border-color:rgba(69,124,63,.25);

  box-shadow:
    0 28px 65px rgba(27,65,35,.14),
    inset 0 1px 0 #fff;
}

.challenge-card:hover::before{
  transform:scaleX(1);
}


/* CARD HEADER */

.challenge-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.challenge-icon{
  width:47px;
  height:47px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:14px;

  color:#3f763e;
  font-size:1.2rem;

  background:
    linear-gradient(145deg,#f4faef,#dcefd4);

  box-shadow:
    inset 0 1px 0 #fff,
    0 8px 20px rgba(48,94,47,.09);

  :.45s var(--ultra-ease);
}

.challenge-card:hover .challenge-icon{
  color:#fff;
  background:
    linear-gradient(145deg,#6da85e,#285d35);

  transform:rotate(-4deg) scale(1.08);

  box-shadow:
    0 12px 27px rgba(40,92,53,.23);
}

.challenge-code{
  font-family:var(--font-mono);
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.10em;
  color:#87917d;
}


/* CARD BODY */

.challenge-card__content{
  margin-top:23px;
  padding-right:15px;
}

.challenge-card h4{
  font-family:var(--font-display);
  font-size:1.25rem;
  color:#20281d;
}

.challenge-card p{
  margin-top:8px;
  font-size:.87rem;
  line-height:1.55;
  color:#727a6e;
}


/* CARD ARROW */

.challenge-card__arrow{
  position:absolute;
  right:18px;
  bottom:17px;

  width:30px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#5c8050;
  background:rgba(85,133,70,.07);

  :.4s var(--ultra-ease);
}

.challenge-card:hover .challenge-card__arrow{
  color:#fff;
  background:#3d7540;
  transform:translate(3px,-3px);
}


/* ============================================================
   SOIL VISUAL
   ============================================================ */

.challenge-visual{
  position:relative;
  min-height:650px;
}

.challenge-visual__glow{
  position:absolute;
  width:90%;
  height:90%;
  left:5%;
  top:5%;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(87,143,74,.22),
      transparent 65%
    );

  filter:blur(50px);
}


/* MAIN IMAGE CARD */

.soil-viz-premium{
  position:relative;
  height:650px;

  overflow:hidden;

  border-radius:32px;

  border:1px solid rgba(255,255,255,.65);

  background:#19351f;

  box-shadow:
    0 45px 110px rgba(25,61,32,.22),
    0 5px 20px rgba(25,61,32,.10),
    inset 0 1px 0 rgba(255,255,255,.35);

  isolation:isolate;
}

.soil-viz-premium img{
  width:100%;
  height:100%;
  object-fit:cover;

  filter:
    saturate(1.10)
    contrast(1.05);

  transform:scale(1.04);

  :
    transform 1.2s var(--ultra-ease),
    filter 1.2s var(--ultra-ease);
}

.soil-viz-premium:hover img{
  transform:scale(1.10);
  filter:saturate(1.18) contrast(1.07);
}


/* IMAGE OVERLAY */

.soil-viz-premium__overlay{
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 70% 25%,
      rgba(119,177,94,.22),
      transparent 25rem
    ),
    linear-gradient(
      145deg,
      rgba(3,23,10,.12),
      transparent 35%,
      rgba(3,18,8,.40)
    );

  z-index:1;
}


/* TOP STATUS */

.soil-status{
  position:absolute;
  z-index:5;

  top:22px;
  left:22px;

  display:flex;
  align-items:center;
  gap:10px;

  padding:10px 15px;

  border-radius:999px;

  font-family:var(--font-mono);
  font-size:.67rem;
  font-weight:600;
  letter-spacing:.09em;

  color:#fff;

  background:rgba(8,30,14,.48);
  border:1px solid rgba(255,255,255,.18);

  backdrop-filter:blur(18px);

  box-shadow:
    0 12px 30px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.soil-status__pulse{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#8fd26b;

  box-shadow:
    0 0 0 5px rgba(143,210,107,.12),
    0 0 18px rgba(143,210,107,.65);

  animation:soilPulse 2.2s ease-in-out infinite;
}

@keyframes soilPulse{
  0%,100%{
    transform:scale(1);
    opacity:1;
  }

  50%{
    transform:scale(1.3);
    opacity:.65;
  }
}


/* SOIL DATA */

.soil-data{
  position:absolute;
  z-index:4;

  left:25px;
  bottom:28px;

  display:flex;
  flex-direction:column;

  color:#fff;

  text-shadow:0 4px 18px rgba(0,0,0,.25);
}

.soil-data__small{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.13em;
  color:rgba(255,255,255,.66);
}

.soil-data strong{
  margin:5px 0;

  font-family:var(--font-display);
  font-size:2.2rem;
  line-height:1;

  letter-spacing:-.04em;
}

.soil-data span:last-child{
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.08em;
  color:rgba(255,255,255,.60);
}


/* LAYERS */

.soil-layers-premium{
  position:absolute;
  z-index:5;

  top:50%;
  right:20px;

  width:205px;

  display:flex;
  flex-direction:column;
  gap:8px;

  transform:translateY(-50%);
}

.soil-layer-premium{
  display:flex;
  align-items:center;
  gap:10px;

  padding:11px 12px;

  border-radius:14px;

  background:rgba(6,28,13,.52);
  border:1px solid rgba(255,255,255,.16);

  backdrop-filter:blur(17px);

  box-shadow:
    0 12px 30px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.08);

  :.4s var(--ultra-ease);
}

.soil-layer-premium:hover{
  transform:translateX(-7px);
  background:rgba(8,37,17,.68);
  border-color:rgba(255,255,255,.28);
}

.soil-layer-premium__dot{
  width:9px;
  height:9px;

  flex-shrink:0;

  border-radius:50%;

  box-shadow:0 0 12px currentColor;
}

.soil-dot--green{
  background:#79a85c;
  color:#79a85c;
}

.soil-dot--cream{
  background:#dfc08a;
  color:#dfc08a;
}

.soil-dot--orange{
  background:#c8783c;
  color:#c8783c;
}

.soil-dot--brown{
  background:#713d1e;
  color:#713d1e;
}

.soil-layer-premium div{
  display:flex;
  flex-direction:column;
}

.soil-layer-premium small{
  font-family:var(--font-mono);
  font-size:.56rem;
  letter-spacing:.08em;
  color:rgba(255,255,255,.53);
}

.soil-layer-premium strong{
  margin-top:2px;

  font-size:.75rem;
  font-weight:600;
  color:#fff;
}


/* DECORATIVE CORNER */

.soil-corner{
  position:absolute;
  z-index:6;

  top:22px;
  right:22px;

  width:48px;
  height:48px;

  opacity:.6;
}

.soil-corner span{
  position:absolute;
  display:block;
  width:12px;
  height:12px;
}

.soil-corner span:nth-child(1){
  top:0;
  right:0;
  border-top:1px solid #fff;
  border-right:1px solid #fff;
}

.soil-corner span:nth-child(2){
  bottom:0;
  left:0;
  border-bottom:1px solid #fff;
  border-left:1px solid #fff;
}

.soil-corner span:nth-child(3){
  width:1px;
  height:1px;
  top:50%;
  left:50%;
  background:#e7c36a;
  box-shadow:0 0 15px 4px rgba(231,195,106,.35);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1100px){

  .challenge-premium{
    grid-template-columns:1fr;
    gap:55px;
  }

  .challenge-copy h2{
    max-width:750px;
  }

  .challenge-intro{
    max-width:750px;
  }

  .challenge-visual{
    max-width:700px;
    width:100%;
    margin:auto;
  }
}

@media(max-width:700px){

  .challenge-section{
    padding:50px 0 50px!important;
  }

  .challenge-grid{
    grid-template-columns:1fr;
  }

  .challenge-card{
    min-height:190px;
  }

  .challenge-visual{
    min-height:520px;
  }

  .soil-viz-premium{
    height:520px;
    border-radius:24px;
  }

  .soil-layers-premium{
    width:170px;
    right:12px;
  }

  .soil-layer-premium{
    padding:9px;
  }

  .soil-data{
    left:18px;
    bottom:20px;
  }

  .soil-data strong{
    font-size:1.7rem;
  }

  .soil-status{
    left:15px;
    top:15px;
    font-size:.58rem;
  }
}

@media(max-width:480px){

  .challenge-copy h2{
    font-size:2.65rem!important;
  }

  .challenge-intro{
    font-size:.98rem!important;
  }

  .challenge-visual{
    min-height:500px;
  }

  .soil-viz-premium{
    height:500px;
  }

  .soil-layers-premium{
    top:auto;
    bottom:18px;
    right:12px;
    width:155px;
  }

  .soil-layer-premium small{
    font-size:.50rem;
  }

  .soil-layer-premium strong{
    font-size:.68rem;
  }

  .soil-data{
    bottom:25px;
    z-index:7;
  }

  .soil-data strong{
    font-size:1.45rem;
  }

  .soil-data span:last-child{
    font-size:.55rem;
  }
}

@media(prefers-reduced-motion:reduce){

  .soil-status__pulse{
    animation:none;
  }

  .soil-viz-premium img{
    :none;
  }
}


/* ============================================================
   OUR SOLUTIONS — PREMIUM BIOLOGICAL GLASS
   ============================================================ */

.section--cream{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 15%,rgba(101,164,91,.10),transparent 25rem),
    radial-gradient(circle at 92% 75%,rgba(231,195,106,.09),transparent 27rem),
    linear-gradient(180deg,#fafbf5 0%,#f1f5eb 100%)!important;
    padding-top: 60px;
  padding-bottom: 60px;
}

/* Decorative background biology */
.section--cream::before{
  content:"";
  position:absolute;
  width:650px;
  height:650px;
  left:-350px;
  top:120px;
  border-radius:50%;
  border:1px solid rgba(79,122,58,.08);
  box-shadow:
    0 0 0 70px rgba(79,122,58,.025),
    0 0 0 140px rgba(79,122,58,.018),
    0 0 0 210px rgba(79,122,58,.012);
  pointer-events:none;
}

.section--cream::after{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  right:-260px;
  bottom:-260px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(228,197,108,.12),
    transparent 70%
  );
  filter:blur(20px);
  pointer-events:none;
}


/* ============================================================
   SECTION HEADING
   ============================================================ */

.section--cream .section-head{
  position:relative;
  z-index:2;
  max-width:850px;
  margin-bottom:55px;
}

.section--cream .section-head h2{
  font-size:clamp(2.3rem,4vw,3.7rem)!important;
  line-height:1!important;
  letter-spacing:-.055em!important;
  text-wrap:balance;
}

.section--cream .section-head p{
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
  color:#6c7669!important;
}


/* Premium eyebrow */

.section--cream .eyebrow{
  position:relative;
  overflow:hidden;

  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(76,122,65,.17)!important;

  box-shadow:
    0 10px 30px rgba(40,80,40,.07),
    inset 0 1px 0 #fff!important;

  backdrop-filter:blur(15px);
}

.section--cream .eyebrow::after{
  content:"";
  position:absolute;
  width:60px;
  height:150%;
  top:-25%;
  left:-90px;
  transform:rotate(25deg);
  background:rgba(255,255,255,.55);
  :left .8s var(--ultra-ease);
}

.section--cream .eyebrow:hover::after{
  left:130%;
}


/* ============================================================
   SOLUTIONS GRID
   ============================================================ */

.solutions-grid{
  position:relative;
  z-index:3;

  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}


/* ============================================================
   SOLUTION CARD
   ============================================================ */

.solution-card{
  position:relative;
  min-height:365px;

  padding:29px 27px!important;

  display:flex;
  flex-direction:column;

  overflow:hidden;
  isolation:isolate;

  border-radius:26px!important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(226,193,103,.14),
      transparent 12rem
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(99,164,88,.08),
      transparent 13rem
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(240,247,234,.86)
    )!important;

  border:1px solid rgba(67,111,59,.13)!important;

  box-shadow:
    0 18px 50px rgba(27,65,35,.075),
    inset 0 1px 0 rgba(255,255,255,.96);

  backdrop-filter:blur(12px);

  :
    transform .55s var(--ultra-ease),
    box-shadow .55s var(--ultra-ease),
    border-color .4s ease;
}


/* Top colored line */

.solution-card::before{
  content:"";
  position:absolute;

  top:0;
  left:0;
  right:0;

  height:4px;

  background:
    linear-gradient(
      90deg,
      #3e7941,
      #79ae5d 45%,
      #e4bd63 100%
    );

  transform:scaleX(0);
  transform-origin:left;

  :transform .65s var(--ultra-ease);

  z-index:10;
}

.solution-card:hover::before{
  transform:scaleX(1);
}


/* Moving glass reflection */

.solution-card::after{
  content:"";

  position:absolute;
  z-index:20;

  top:-130%;
  left:-110%;

  width:65%;
  height:360%;

  transform:rotate(25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.22),
      transparent
    );

  :left 1s var(--ultra-ease);

  pointer-events:none;
}

.solution-card:hover::after{
  left:150%;
}


/* Card hover */

.solution-card:hover{
  transform:
    translateY(-14px)
    scale(1.015);

  border-color:rgba(68,128,63,.27)!important;

  box-shadow:
    0 35px 85px rgba(25,67,35,.16),
    0 5px 15px rgba(25,67,35,.06),
    inset 0 1px 0 #fff!important;
}


/* ============================================================
   LOT CODE
   ============================================================ */

.solution-card__num{
  position:relative;
  z-index:4;

  display:inline-flex;
  align-items:center;

  width:max-content;

  padding:6px 10px;

  border-radius:8px;

  font-family:var(--font-mono);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.10em;

  color:#698060;

  background:rgba(255,255,255,.62);
  border:1px dashed rgba(74,119,65,.18);

  box-shadow:
    inset 0 1px 0 #fff;

  :.4s var(--ultra-ease);
}

.solution-card:hover .solution-card__num{
  color:#285f35;
  background:rgba(230,242,224,.85);
  border-color:rgba(74,130,65,.28);
}


/* ============================================================
   ICON
   ============================================================ */

.solution-card__icon{
  position:relative;
  z-index:4;

  width:76px!important;
  height:76px!important;

  margin-top:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:22px!important;

  color:#3c7b3f!important;

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.95),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      #f3faed,
      #d9ebd0
    )!important;

  border:1px solid rgba(83,130,71,.12);

  box-shadow:
    inset 0 1px 0 #fff,
    0 15px 32px rgba(45,94,46,.10);

  :
    transform .55s var(--ultra-ease),
    background .45s ease,
    color .35s ease,
    box-shadow .45s ease;
}


/* Icon glow */

.solution-card__icon::before{
  content:"";

  position:absolute;

  width:100%;
  height:100%;

  border-radius:inherit;

  background:
    radial-gradient(
      circle,
      rgba(111,170,89,.22),
      transparent 70%
    );

  filter:blur(13px);

  opacity:0;

  transform:scale(.7);

  :.5s var(--ultra-ease);
}

.solution-card:hover .solution-card__icon::before{
  opacity:1;
  transform:scale(1.25);
}


/* Icon */

.solution-card__icon svg{
  position:relative;
  z-index:2;

  width:34px;
  height:34px;

  stroke-width:1.4;

  :.5s var(--ultra-ease);
}

.solution-card:hover .solution-card__icon{
  color:#fff!important;

  background:
    linear-gradient(
      145deg,
      #6eaa60,
      #245d33
    )!important;

  transform:
    translateY(-4px)
    rotate(-4deg)
    scale(1.07);

  box-shadow:
    0 18px 38px rgba(37,94,48,.27),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.solution-card:hover .solution-card__icon svg{
  transform:scale(1.08);
}


/* ============================================================
   CARD CONTENT
   ============================================================ */

.solution-card h3{
  position:relative;
  z-index:4;

  /*margin-top:23px!important;*/

  font-size:1.45rem!important;
  line-height:1.05!important;

  color:#20291d!important;

  letter-spacing:-.035em!important;
}

.solution-card p{
  position:relative;
  z-index:4;

  margin-top:10px!important;

  font-size:.91rem!important;
  line-height:1.65!important;

  color:#727a6d!important;
}


/* ============================================================
   LEARN MORE
   ============================================================ */

.solution-card__link{
  position:relative;
  z-index:5;

  margin-top:auto;
  padding-top:22px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  color:#316d38!important;

  font-family:var(--font-sans);
  font-size:.85rem;
  font-weight:700;

  border-top:1px solid rgba(61,104,57,.10);

  :.4s var(--ultra-ease);
}

.solution-card__link span{
  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#3d7540;

  background:rgba(70,125,63,.08);

  :.45s var(--ultra-ease);
}

.solution-card__link:hover{
  color:#1d582d!important;
}

.solution-card:hover .solution-card__link span{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #65a258,
      #285d35
    );

  transform:
    translate(3px,-3px)
    rotate(0deg);

  box-shadow:
    0 8px 20px rgba(43,98,49,.20);
}


/* ============================================================
   BIO PARTICLES / DECORATIVE ORBS
   ============================================================ */

.solution-card{
  --particle-color:rgba(76,130,67,.18);
}

.solution-card:nth-child(2){
  --particle-color:rgba(215,171,68,.20);
}

.solution-card:nth-child(3){
  --particle-color:rgba(194,111,54,.18);
}

.solution-card:nth-child(4){
  --particle-color:rgba(77,128,119,.18);
}

.solution-card .solution-card__num::after{
  content:"";

  position:absolute;

  width:5px;
  height:5px;

  right:-45px;
  top:50%;

  border-radius:50%;

  background:var(--particle-color);

  box-shadow:
    18px -20px 0 -1px var(--particle-color),
    36px 13px 0 -2px var(--particle-color);

  opacity:.45;

  :.6s var(--ultra-ease);
}

.solution-card:hover .solution-card__num::after{
  transform:translateX(18px);
  opacity:.85;
}


/* ============================================================
   NUMBERED CARD DIFFERENT ACCENTS
   ============================================================ */

.solution-card:nth-child(1)::before{
  background:linear-gradient(90deg,#3d7c40,#8bbd69,#dcb75e);
}

.solution-card:nth-child(2)::before{
  background:linear-gradient(90deg,#497c42,#88b765,#e1bb58);
}

.solution-card:nth-child(3)::before{
  background:linear-gradient(90deg,#6b6331,#9c8740,#d5a34b);
}

.solution-card:nth-child(4)::before{
  background:linear-gradient(90deg,#3b7461,#65a88b,#d9bd65);
}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media(min-width:1400px){

  .solutions-grid{
    gap:26px;
  }

  .solution-card{
    min-height:390px;
    padding:32px 29px!important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1100px){

  .solutions-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .solution-card{
    min-height:350px;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:640px){

  .section--cream .section-head{
    margin-bottom:38px;
  }

  .section--cream .section-head h2{
    font-size:2.35rem!important;
  }

  .solutions-grid{
    grid-template-columns:1fr;
    gap:17px;
  }

  .solution-card{
    min-height:310px;
    padding:25px 22px!important;
    border-radius:21px!important;
  }

  .solution-card__icon{
    width:66px!important;
    height:66px!important;
    margin-top:23px;
  }

  .solution-card h3{
    font-size:1.3rem!important;
  }

  .solution-card p{
    font-size:.88rem!important;
  }
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  .solution-card,
  .solution-card::after,
  .solution-card__icon,
  .solution-card__icon svg,
  .solution-card__link span{
    :none!important;
  }

  .solution-card:hover{
    transform:none!important;
  }
}

/* ============================================================
   PRODUCT SHOWCASE — PREMIUM AGRI BIOTECH
   ============================================================ */

.product-showcase{
  position:relative;
}

/* ---------- Section heading ---------- */

.product-showcase .section-head{
  position:relative;
  z-index:3;
  margin-bottom:42px;
}

.product-showcase .section-head h2{
  font-size:clamp(2.4rem,4vw,3.7rem)!important;
  line-height:1!important;
  letter-spacing:-.055em!important;
}

.product-showcase .section-head .btn{
  border-radius:14px!important;
  padding:13px 19px!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(62,105,57,.16)!important;
  box-shadow:
    0 10px 30px rgba(32,70,38,.07),
    inset 0 1px 0 #fff;
  backdrop-filter:blur(14px);
  :.45s var(--ultra-ease);
}

.product-showcase .section-head .btn:hover{
  transform:translateY(-4px);
  background:#fff!important;
  box-shadow:0 18px 40px rgba(32,70,38,.13);
}


/* ============================================================
   PRODUCT RAIL
   ============================================================ */

.product-rail{
  position:relative;
  z-index:3;

  display:flex;
  gap:24px;

  padding:8px 8px 35px!important;

  overflow-x:auto;
  overflow-y:visible;

  scroll-behavior:smooth;

  scrollbar-width:thin;
  scrollbar-color:#65985a rgba(65,105,58,.08);
}


/* ============================================================
   PRODUCT CARD
   ============================================================ */

.product-card{
  position:relative;

  flex:0 0 345px!important;

  overflow:hidden;

  border-radius:27px!important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(243,247,238,.90)
    )!important;

  border:1px solid rgba(62,107,57,.13)!important;

  box-shadow:
    0 18px 52px rgba(28,64,35,.075),
    inset 0 1px 0 rgba(255,255,255,.98)!important;

  :
    transform .65s var(--ultra-ease),
    box-shadow .65s var(--ultra-ease),
    border-color .45s ease;

  isolation:isolate;
}


/* Ambient card glow */

.product-card::before{
  content:"";

  position:absolute;

  z-index:-1;

  width:180px;
  height:180px;

  right:-100px;
  top:-100px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(112,166,89,.17),
      transparent 70%
    );

  filter:blur(8px);

  :.7s var(--ultra-ease);
}

.product-card:hover::before{
  transform:scale(1.8);
  opacity:.8;
}


/* Moving glass reflection */

.product-card::after{
  content:"";

  position:absolute;

  z-index:30;

  top:-130%;
  left:-120%;

  width:65%;
  height:380%;

  transform:rotate(25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.23),
      transparent
    );

  :left 1.1s var(--ultra-ease);

  pointer-events:none;
}

.product-card:hover::after{
  left:150%;
}


/* Card hover */

.product-card:hover{
  transform:
    translateY(-16px)
    scale(1.018);

  border-color:rgba(69,126,63,.27)!important;

  box-shadow:
    0 38px 90px rgba(27,66,35,.17),
    0 8px 20px rgba(27,66,35,.06),
    inset 0 1px 0 #fff!important;
}


/* ============================================================
   PRODUCT IMAGE
   ============================================================ */

.product-card__media{
  position:relative;

  aspect-ratio:1 / 1.02!important;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #edf5e8,
      #dcebd5
    )!important;
}


/* Image */

.product-card__media img{
  width:100%;
  height:100%;

  object-fit:cover;

  transform:scale(1.015);

  filter:
    saturate(1.03)
    contrast(1.02);

  :
    transform 1s var(--ultra-ease),
    filter 1s ease;
}

.product-card:hover .product-card__media img{
  transform:scale(1.10);

  filter:
    saturate(1.13)
    contrast(1.05);
}


/* Image gradient */

.product-card__media::before{
  content:"";

  position:absolute;

  z-index:2;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.02) 0%,
      transparent 45%,
      rgba(3,20,9,.28) 100%
    );

  pointer-events:none;
}


/* Animated shine */

.product-card__media::after{
  content:"";

  position:absolute;

  z-index:4;

  top:-50%;
  left:-120%;

  width:70%;
  height:200%;

  transform:rotate(25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.38),
      transparent
    );

  :left 1.15s var(--ultra-ease);

  pointer-events:none;
}

.product-card:hover .product-card__media::after{
  left:145%;
}


/* ============================================================
   CATEGORY BADGE
   ============================================================ */

.product-card__cat{
  position:absolute!important;

  z-index:10;

  top:17px!important;
  left:17px!important;

  padding:9px 14px!important;

  border-radius:999px!important;

  font-family:var(--font-mono);
  font-size:.63rem!important;
  font-weight:600!important;
  letter-spacing:.08em;

  color:#315d34!important;

  background:
    rgba(255,255,255,.78)!important;

  border:1px solid rgba(255,255,255,.92)!important;

  box-shadow:
    0 10px 28px rgba(0,0,0,.12),
    inset 0 1px 0 #fff;

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  :.45s var(--ultra-ease);
}

.product-card:hover .product-card__cat{
  transform:translateY(-3px);

  color:#fff!important;

  background:
    linear-gradient(
      135deg,
      #5f9954,
      #285d35
    )!important;

  border-color:rgba(255,255,255,.25)!important;

  box-shadow:
    0 12px 30px rgba(32,91,44,.25);
}


/* ============================================================
   PRODUCT BODY
   ============================================================ */

.product-card__body{
  position:relative;

  padding:25px 25px 22px!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.72),
      rgba(247,249,243,.95)
    );
}


/* Small product index */

.product-card__body::before{
  content:"BIO / PRODUCT";

  display:block;

  margin-bottom:9px;

  font-family:var(--font-mono);
  font-size:.57rem;
  letter-spacing:.12em;
  font-weight:600;

  color:#9aa292;
}


/* Product name */

.product-card__body h4{
  font-family:var(--font-display)!important;

  font-size:1.42rem!important;
  line-height:1.05!important;

  letter-spacing:-.035em!important;

  color:#20291e!important;

  margin:0!important;
}


/* Benefit */

.product-card__benefit{
  margin-top:11px!important;

  min-height:67px;

  color:#737b70!important;

  font-size:.87rem!important;
  line-height:1.62!important;
}


/* ============================================================
   VIEW PRODUCT
   ============================================================ */

.product-card__view{
  position:relative;

  margin-top:18px;
  padding-top:17px;

  display:flex!important;
  align-items:center;
  justify-content:space-between;

  color:#2e6b37!important;

  font-size:.82rem!important;
  font-weight:700!important;

  border-top:1px solid rgba(55,98,52,.11);

  :.4s var(--ultra-ease);
}

.product-card__view span{
  width:35px;
  height:35px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#3c7841;

  background:
    linear-gradient(
      145deg,
      #edf6e8,
      #dcebd6
    );

  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 15px rgba(46,99,48,.08);

  :.45s var(--ultra-ease);
}

.product-card__view:hover{
  color:#194f2a!important;
}

.product-card:hover .product-card__view span{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #65a257,
      #285d35
    );

  transform:
    translate(4px,-3px)
    scale(1.06);

  box-shadow:
    0 9px 22px rgba(41,95,48,.22);
}


/* ============================================================
   CATEGORY ACCENTS
   ============================================================ */

.product-card:nth-child(1) .product-card__view span{
  background:linear-gradient(135deg,#e3f1dc,#cde4c3);
}

.product-card:nth-child(2) .product-card__view span{
  background:linear-gradient(135deg,#eaf3d9,#dbe9bd);
}

.product-card:nth-child(3) .product-card__view span{
  background:linear-gradient(135deg,#f3ecd4,#eadcae);
}

.product-card:nth-child(4) .product-card__view span{
  background:linear-gradient(135deg,#e8eee0,#d8e4cf);
}

.product-card:nth-child(5) .product-card__view span{
  background:linear-gradient(135deg,#eee5d5,#e3d2b6);
}


/* ============================================================
   RAIL NAVIGATION FEEL
   ============================================================ */

.product-rail::after{
  content:"";

  position:sticky;

  right:0;

  min-width:60px;
  height:100%;

  margin-left:-60px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(246,248,241,.95)
    );

  pointer-events:none;
}


/* ============================================================
   PREMIUM SCROLLBAR
   ============================================================ */

.product-rail::-webkit-scrollbar{
  height:7px;
}

.product-rail::-webkit-scrollbar-track{
  background:rgba(60,105,55,.07);
  border-radius:20px;
}

.product-rail::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      90deg,
      #4d8749,
      #87ae65,
      #d5b45c
    );

  border-radius:20px;
}

.product-rail::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      90deg,
      #356f3d,
      #649b55,
      #c39a3d
    );
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:900px){

  .product-card{
    flex-basis:315px!important;
  }

  .product-card__body{
    padding:23px!important;
  }
}


@media(max-width:640px){

  .product-showcase .section-head{
    display:block!important;
  }

  .product-showcase .section-head .btn{
    margin-top:22px;
  }

  .product-rail{
    gap:17px!important;
    padding-left:3px!important;
    padding-right:3px!important;
  }

  .product-card{
    flex-basis:290px!important;
    border-radius:22px!important;
  }

  .product-card__media{
    aspect-ratio:1/1!important;
  }

  .product-card__body{
    padding:21px!important;
  }

  .product-card__benefit{
    min-height:auto;
  }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  .product-card,
  .product-card::after,
  .product-card__media img,
  .product-card__media::after,
  .product-card__cat,
  .product-card__view span{
    :none!important;
  }

  .product-card:hover{
    transform:none!important;
  }
}

/* ============================================================
   FROM SOIL TO HARVEST — PREMIUM BIOLOGICAL JOURNEY
   ============================================================ */

.journey-section{
  position:relative;
  overflow:hidden;
}

/* If you can, change:
   <section class="section section--cream">
   to:
   <section class="section section--cream journey-section">
*/


/* ============================================================
   JOURNEY CONTAINER
   ============================================================ */

.journey{
  position:relative;

  display:grid;
  grid-template-columns:repeat(5,1fr);

  gap:20px;

  margin-top:75px!important;
  padding:0 10px 25px;

  z-index:2;
}


/* ============================================================
   CONNECTING BIOLOGICAL PATH
   ============================================================ */

.journey::before{
  content:"";

  position:absolute;

  left:7%;
  right:7%;
  top:43px;

  height:3px;

  border:0!important;

  background:
    linear-gradient(
      90deg,
      #477d43 0%,
      #6ca258 25%,
      #9ab76a 48%,
      #d1a94e 72%,
      #477d43 100%
    );

  border-radius:20px;

  box-shadow:
    0 0 12px rgba(79,137,69,.20),
    0 0 30px rgba(79,137,69,.08);

  overflow:hidden;
}


/* Moving energy */

.journey::after{
  content:"";

  position:absolute;

  left:7%;
  top:41px;

  width:90px;
  height:7px;

  border-radius:50%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.95),
      transparent
    );

  filter:blur(2px);

  animation:
    journeyEnergy 4s linear infinite;

  pointer-events:none;
}

@keyframes journeyEnergy{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(calc(100vw - 15vw));
  }
}


/* ============================================================
   JOURNEY STEP
   ============================================================ */

.journey__step{
  position:relative;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;

  min-width:0;

  padding:0 8px;

  z-index:3;
}


/* ============================================================
   PREMIUM JOURNEY NODE
   ============================================================ */

.journey__dot{
  position:relative;

  width:88px!important;
  height:88px!important;

  display:flex!important;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  color:#39713c!important;

  background:
    radial-gradient(
      circle at 32% 22%,
      rgba(255,255,255,.98),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #e6f0df
    )!important;

  border:1px solid rgba(68,118,61,.20)!important;

  border-radius:50%!important;

  box-shadow:
    0 18px 40px rgba(31,72,38,.12),
    0 4px 12px rgba(31,72,38,.06),
    inset 0 2px 0 #fff!important;

  :
    transform .55s var(--ultra-ease),
    background .45s ease,
    box-shadow .45s ease,
    border-color .45s ease;
}


/* Outer glow ring */

.journey__dot::before{
  content:"";

  position:absolute;

  inset:-8px;

  border-radius:50%;

  border:1px solid rgba(75,131,68,.16);

  opacity:.7;

  :
    transform .55s var(--ultra-ease),
    border-color .45s ease,
    box-shadow .45s ease;
}


/* Inner energy ring */

.journey__dot::after{
  content:"";

  position:absolute;

  width:27px;
  height:27px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #eac45f,
      #b67b1d
    );

  box-shadow:
    0 7px 20px rgba(175,115,24,.25),
    0 0 18px rgba(231,195,106,.20);

  opacity:.9;

  :
    transform .55s var(--ultra-ease),
    opacity .4s ease;
}


/* Keep SVG above pseudo element */

.journey__dot svg{
  position:relative;
  z-index:5;

  width:29px!important;
  height:29px!important;

  color:#2a552f;

  filter:
    drop-shadow(0 2px 4px rgba(76,49,9,.22));

  :
    transform .5s var(--ultra-ease);
}


/* Step number */

.journey__dot[data-step]{
  font-size:0;
}

.journey__dot[data-step]::marker{
  display:none;
}


/* ============================================================
   HOVER STATE
   ============================================================ */

.journey__step:hover .journey__dot{
  transform:
    translateY(-10px)
    scale(1.09);

  color:#fff!important;

  background:
    radial-gradient(
      circle at 32% 22%,
      rgba(255,255,255,.20),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #68a45b,
      #235c32
    )!important;

  border-color:rgba(255,255,255,.32)!important;

  box-shadow:
    0 28px 60px rgba(36,91,48,.28),
    0 0 35px rgba(91,156,80,.16),
    inset 0 1px 0 rgba(255,255,255,.30)!important;
}

.journey__step:hover .journey__dot::before{
  transform:scale(1.18);

  border-color:rgba(102,162,86,.35);

  box-shadow:
    0 0 30px rgba(93,157,79,.20);
}

.journey__step:hover .journey__dot::after{
  transform:scale(.72);

  opacity:.25;
}

.journey__step:hover .journey__dot svg{
  transform:scale(1.12);
}


/* ============================================================
   STEP NUMBER BADGE
   ============================================================ */

.journey__step::before{
  content:attr(data-step);

  position:absolute;

  top:-9px;
  left:50%;

  transform:translateX(25px);

  width:24px;
  height:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #365f35,
      #214d2b
    );

  border:2px solid #f5f6ef;

  font-family:var(--font-mono);
  font-size:.57rem;
  font-weight:700;

  box-shadow:
    0 7px 16px rgba(26,69,35,.18);

  z-index:10;
}


/* ============================================================
   STEP TITLES
   ============================================================ */

.journey__step h4{
  margin-top:30px!important;

  font-family:var(--font-display)!important;

  font-size:1.25rem!important;
  line-height:1.1!important;

  letter-spacing:-.025em!important;

  color:#222b20!important;

  :
    color .35s ease,
    transform .4s var(--ultra-ease);
}

.journey__step:hover h4{
  color:#2c6b37!important;
  transform:translateY(-2px);
}


/* ============================================================
   STEP DESCRIPTION
   ============================================================ */

.journey__step p{
  max-width:190px;

  margin:10px auto 0!important;

  font-size:.83rem!important;
  line-height:1.58!important;

  color:#747d70!important;

  :
    color .35s ease;
}

.journey__step:hover p{
  color:#626d5f!important;
}


/* ============================================================
   DIFFERENT STAGE COLORS
   ============================================================ */

.journey__step:nth-child(1) .journey__dot::after{
  background:linear-gradient(135deg,#6e9d52,#426f38);
}

.journey__step:nth-child(2) .journey__dot::after{
  background:linear-gradient(135deg,#84b65f,#507d3d);
}

.journey__step:nth-child(3) .journey__dot::after{
  background:linear-gradient(135deg,#b9c965,#799342);
}

.journey__step:nth-child(4) .journey__dot::after{
  background:linear-gradient(135deg,#e5bd5a,#b57d21);
}

.journey__step:nth-child(5) .journey__dot::after{
  background:linear-gradient(135deg,#6ea86a,#326e3b);
}


/* ============================================================
   FLOATING PARTICLES
   ============================================================ */

.journey__step:nth-child(1)::after,
.journey__step:nth-child(3)::after,
.journey__step:nth-child(5)::after{
  content:"";

  position:absolute;

  width:5px;
  height:5px;

  border-radius:50%;

  background:#74a961;

  box-shadow:
    25px 45px 0 -1px rgba(74,128,65,.35),
    -28px 62px 0 -2px rgba(74,128,65,.25);

  opacity:.55;

  animation:
    journeyFloat 4s ease-in-out infinite;
}

.journey__step:nth-child(3)::after{
  animation-delay:1.2s;
}

.journey__step:nth-child(5)::after{
  animation-delay:2.2s;
}

@keyframes journeyFloat{
  0%,100%{
    transform:translateY(0);
    opacity:.35;
  }

  50%{
    transform:translateY(-10px);
    opacity:.75;
  }
}


/* ============================================================
   DESKTOP STAGE CONNECTOR
   ============================================================ */

@media(min-width:1001px){

  .journey__step:nth-child(2),
  .journey__step:nth-child(4){
    transform:translateY(12px);
  }

  .journey__step:nth-child(2):hover,
  .journey__step:nth-child(4):hover{
    transform:translateY(2px);
  }
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1000px){

  .journey{
    grid-template-columns:repeat(3,1fr);
    row-gap:55px;
  }

  .journey::before,
  .journey::after{
    display:none;
  }

  .journey__step:nth-child(2),
  .journey__step:nth-child(4){
    transform:none;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:640px){

  .journey{
    grid-template-columns:1fr;

    gap:0;

    margin-top:45px!important;

    padding-left:12px;
  }

  .journey::before{
    display:block;

    left:43px;
    right:auto;
    top:40px;
    bottom:40px;

    width:2px;
    height:auto;

    border:0!important;

    background:
      linear-gradient(
        180deg,
        #477d43,
        #8daf66,
        #d2a94e,
        #477d43
      );
  }

  .journey::after{
    display:block;

    left:40px;
    top:45px;

    width:7px;
    height:70px;

    background:
      linear-gradient(
        180deg,
        transparent,
        rgba(255,255,255,.95),
        transparent
      );

    animation:
      journeyEnergyMobile 4s linear infinite;
  }

  @keyframes journeyEnergyMobile{
    from{
      transform:translateY(0);
    }

    to{
      transform:translateY(420px);
    }
  }

  .journey__step{
    min-height:145px;

    display:grid;

    grid-template-columns:86px 1fr;

    column-gap:22px;

    align-items:center;

    text-align:left;

    padding:0;

  }

  .journey__dot{
    grid-column:1;
    grid-row:1 / span 2;

    width:72px!important;
    height:72px!important;

    margin-left:0;
  }

  .journey__dot svg{
    width:25px!important;
    height:25px!important;
  }

  .journey__step::before{
    top:19px;
    left:55px;
    transform:none;
  }

  .journey__step h4{
    grid-column:2;

    margin-top:0!important;
  }

  .journey__step p{
    grid-column:2;

    max-width:none;

    margin:7px 0 0!important;
  }

  .journey__step:hover .journey__dot{
    transform:
      translateX(4px)
      scale(1.07);
  }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  .journey::after,
  .journey__step:nth-child(1)::after,
  .journey__step:nth-child(3)::after,
  .journey__step:nth-child(5)::after{
    animation:none!important;
  }

  .journey__dot,
  .journey__dot svg{
    :none!important;
  }
}
/* ============================================================
   FARMER SUCCESS — FINAL PREMIUM VERSION
   ============================================================ */

.farmer-success-section{
  position:relative;
  overflow:hidden;

  /* Stronger agricultural background */
  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(92,145,76,.20),
      transparent 30rem
    ),
    radial-gradient(
      circle at 92% 20%,
      rgba(219,184,91,.14),
      transparent 25rem
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(75,128,65,.12),
      transparent 32rem
    ),
    linear-gradient(
      135deg,
      #edf3e7 0%,
      #f7f4e9 48%,
      #e8f0e3 100%
    ) !important;

}


/* ============================================================
   BACKGROUND DECORATION
   ============================================================ */

.farmer-success-section::before{
  content:"";

  position:absolute;

  width:700px;
  height:700px;

  left:-420px;
  top:50%;

  transform:translateY(-50%);

  border-radius:50%;

  border:1px solid rgba(62,113,59,.10);

  box-shadow:
    0 0 0 75px rgba(62,113,59,.025),
    0 0 0 150px rgba(62,113,59,.020),
    0 0 0 225px rgba(62,113,59,.015),
    0 0 0 300px rgba(62,113,59,.010);

  pointer-events:none;
}


.farmer-success-section::after{
  content:"";

  position:absolute;

  width:520px;
  height:520px;

  right:-260px;
  bottom:-250px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(222,187,92,.18),
      transparent 68%
    );

  filter:blur(25px);

  pointer-events:none;
}


/* ============================================================
   SECTION HEADING — FIX CLIPPED TITLE
   ============================================================ */

.farmer-success-section .container{
  position:relative;
  z-index:2;
}

.farmer-success-section .section-head{
  position:relative;

  z-index:10;

  width:100%;

  max-width:850px !important;

  margin:0 auto 60px !important;

  padding-top:10px;

  overflow:visible !important;
}


.farmer-success-section .section-head .eyebrow{
  position:relative;
  z-index:3;
}


/* Heading */

.farmer-success-section .section-head h2{
  position:relative;

  display:block;

  margin-top:20px !important;
  margin-bottom:0 !important;

  padding-top:5px;

  font-size:
    clamp(2.8rem,5vw,4.5rem) !important;

  line-height:1.05 !important;

  letter-spacing:-.065em !important;

  color:#182419 !important;

  overflow:visible !important;

  text-wrap:balance;
}


/* Gold/green emphasis */

.farmer-success-section .section-head h2::after{
  content:"";

  display:block;

  width:70px;
  height:3px;

  margin:22px auto 0;

  border-radius:10px;

  background:
    linear-gradient(
      90deg,
      #477d43,
      #d3ae54
    );

  box-shadow:
    0 4px 15px rgba(73,122,61,.18);
}


.farmer-success-section .section-head p{
  max-width:680px !important;

  margin:22px auto 0 !important;

  font-size:1rem !important;

  line-height:1.7 !important;

  color:#687366 !important;
}


/* ============================================================
   STORIES GRID
   ============================================================ */

.farmer-stories{
  position:relative;
  z-index:5;

  display:grid !important;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:25px !important;

  align-items:stretch;

  padding:0 5px;
}


/* ============================================================
   CARD
   ============================================================ */

.farmer-card{
  position:relative;

  /*height:610px !important;*/

  min-width:0;

  overflow:hidden;

  border-radius:30px !important;

  background:#193820 !important;

  border:1px solid rgba(255,255,255,.55) !important;

  box-shadow:
    0 25px 70px rgba(35,72,40,.16),
    0 5px 20px rgba(35,72,40,.08),
    inset 0 1px 0 rgba(255,255,255,.45);

  transform:translateZ(0);

  :
    transform .55s var(--ultra-ease),
    box-shadow .55s var(--ultra-ease);
}


.farmer-card:hover{
  transform:
    translateY(-14px)
    scale(1.012) !important;

  box-shadow:
    0 40px 95px rgba(25,66,34,.23),
    0 10px 25px rgba(25,66,34,.10);
}


/* ============================================================
   IMAGE — FIX WASHED OUT PHOTOS
   ============================================================ */

.farmer-card img{
  position:absolute !important;

  inset:0 !important;

  width:100% !important;
  height:100% !important;

  object-fit:cover !important;

  object-position:center !important;

  transform:scale(1.025);

  filter:
    brightness(.78)
    saturate(1.08)
    contrast(1.08);

  :
    transform 1s var(--ultra-ease),
    filter 1s ease;
}


/* Individual image positioning */

.farmer-card:nth-child(1) img{
  object-position:center center;
}

.farmer-card:nth-child(2) img{
  object-position:center center;

  /* Important for the very bright middle image */
  filter:
    brightness(.68)
    saturate(1.08)
    contrast(1.12);
}

.farmer-card:nth-child(3) img{
  object-position:center center;

  filter:
    brightness(.78)
    saturate(1.08)
    contrast(1.08);
}


.farmer-card:hover img{
  transform:scale(1.09);

  filter:
    brightness(.84)
    saturate(1.16)
    contrast(1.10);
}


/* ============================================================
   CINEMATIC IMAGE OVERLAY
   ============================================================ */

.farmer-card__overlay{
  position:absolute !important;

  inset:0 !important;

  z-index:4;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  padding:32px !important;

  background:
    linear-gradient(
      180deg,
      rgba(4,20,9,.02) 0%,
      rgba(4,20,9,.05) 30%,
      rgba(3,19,9,.28) 47%,
      rgba(2,16,7,.72) 72%,
      rgba(2,13,6,.97) 100%
    ) !important;
}


/* Extra color tint */

.farmer-card__overlay::before{
  content:"";

  position:absolute;

  inset:0;

  z-index:-1;

  background:
    linear-gradient(
      135deg,
      rgba(46,101,52,.10),
      transparent 45%,
      rgba(194,154,65,.08)
    );

  pointer-events:none;
}


/* ============================================================
   FIELD STORY LABEL
   ============================================================ */

.farmer-card:nth-child(1)
.farmer-card__overlay::after,
.farmer-card:nth-child(2)
.farmer-card__overlay::after,
.farmer-card:nth-child(3)
.farmer-card__overlay::after{

  position:absolute;

  left:32px;
  top:31px;

  color:rgba(255,255,255,.72);

  font-family:var(--font-mono);

  font-size:.58rem;

  font-weight:600;

  letter-spacing:.13em;

  text-shadow:
    0 3px 12px rgba(0,0,0,.4);
}

.farmer-card:nth-child(1)
.farmer-card__overlay::after{
  content:"FIELD STORY  /  01";
}

.farmer-card:nth-child(2)
.farmer-card__overlay::after{
  content:"FIELD STORY  /  02";
}

.farmer-card:nth-child(3)
.farmer-card__overlay::after{
  content:"FIELD STORY  /  03";
}


/* ============================================================
   CROP TAG
   ============================================================ */

.farmer-card__tag{
  position:absolute !important;

  z-index:8;

  top:20px !important;
  right:20px !important;

  padding:10px 16px !important;

  border-radius:999px !important;

  color:#fff !important;

  background:
    rgba(9,32,16,.52) !important;

  border:1px solid rgba(255,255,255,.25) !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.15);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  font-family:var(--font-mono);

  font-size:.62rem !important;

  font-weight:600;

  letter-spacing:.10em;

  :.45s var(--ultra-ease);
}


.farmer-card:hover .farmer-card__tag{
  background:
    linear-gradient(
      135deg,
      #68a65a,
      #285d35
    ) !important;

  transform:
    translateY(-3px)
    scale(1.04);

  border-color:rgba(255,255,255,.4) !important;
}


/* ============================================================
   FARMER NAME
   ============================================================ */

.farmer-card__name{
  position:relative;

  z-index:5;

  margin:0 !important;

  font-family:var(--font-display) !important;

  font-size:
    clamp(1.8rem,2.7vw,2.45rem) !important;

  line-height:1 !important;

  letter-spacing:-.045em !important;

  color:#fff !important;

  text-shadow:
    0 5px 22px rgba(0,0,0,.35);
}


/* Gold line */

.farmer-card__name::after{
  content:"";

  display:block;

  width:45px;
  height:2px;

  margin-top:13px;

  border-radius:5px;

  background:
    linear-gradient(
      90deg,
      #e4c16b,
      transparent
    );

  :
    width .55s var(--ultra-ease);
}

.farmer-card:hover
.farmer-card__name::after{
  width:100px;
}


/* ============================================================
   META
   ============================================================ */

.farmer-card__meta{
  position:relative;
  z-index:5;

  display:flex !important;

  align-items:center;

  gap:12px !important;

  margin-top:12px !important;

  color:rgba(255,255,255,.70) !important;

  font-family:var(--font-mono);

  font-size:.61rem !important;

  font-weight:600;

  letter-spacing:.08em;
}


.farmer-card__meta span + span::before{
  content:"";

  display:inline-block;

  width:4px;
  height:4px;

  margin-right:10px;

  vertical-align:middle;

  border-radius:50%;

  background:#e2bd62;

  box-shadow:
    0 0 10px rgba(226,189,98,.55);
}


/* ============================================================
   STORY DETAIL
   ============================================================ */

.farmer-card__detail{
  position:relative;

  z-index:5;

  max-height:0;

  overflow:hidden;

  opacity:0;

  transform:translateY(20px);

  margin-top:0;

  padding-top:0;

  color:rgba(255,255,255,.76);

  font-size:.76rem;

  line-height:1.65;

  border-top:1px solid transparent;

  :
    max-height .65s var(--ultra-ease),
    opacity .45s ease,
    transform .55s var(--ultra-ease),
    margin-top .5s ease,
    padding-top .5s ease,
    border-color .5s ease;
}


.farmer-card:hover .farmer-card__detail{
  max-height:190px;

  opacity:1;

  transform:translateY(0);

  margin-top:18px;

  padding-top:16px;

  border-color:rgba(255,255,255,.16);
}


.farmer-card__detail strong{
  color:#e6c66f;

  font-weight:700;
}


/* ============================================================
   GLOSSY SWEEP
   ============================================================ */

.farmer-card > img{
  z-index:0;
}

.farmer-card{
  isolation:isolate;
}

.farmer-card > img::after{
  display:none;
}

.farmer-card__overlay{
  overflow:hidden;
}

.farmer-card__overlay::after{
  pointer-events:none;
}


/* Gloss layer */

.farmer-card:hover{
  --gloss-x:150%;
}

.farmer-card:hover::after{
  content:"";

  position:absolute;

  z-index:20;

  top:-100%;
  left:-120%;

  width:65%;
  height:300%;

  transform:rotate(25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.17),
      transparent
    );

  animation:
    farmerGloss 1s var(--ultra-ease) forwards;

  pointer-events:none;
}

@keyframes farmerGloss{
  from{
    left:-120%;
  }

  to{
    left:150%;
  }
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1050px){

  .farmer-success-section{
    padding-top:110px !important;
  }

  .farmer-stories{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .farmer-card{
    height:560px !important;
  }

  .farmer-card:nth-child(3){
    grid-column:1 / -1;

    width:calc(50% - 12px);

    margin:0 auto;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:680px){

  .farmer-success-section{
    padding-top:85px !important;
    padding-bottom:90px !important;
  }

  .farmer-success-section .section-head{
    margin-bottom:42px !important;
  }

  .farmer-success-section .section-head h2{
    font-size:2.65rem !important;

    line-height:1.02 !important;
  }

  .farmer-success-section .section-head p{
    font-size:.92rem !important;
  }

  .farmer-stories{
    grid-template-columns:1fr !important;

    gap:18px !important;

    padding:0 !important;
  }

  .farmer-card,
  .farmer-card:nth-child(3){
    grid-column:auto;

    width:100%;

    height:535px !important;

    margin:0 !important;

    border-radius:23px !important;
  }

  .farmer-card__overlay{
    padding:24px !important;
  }

  .farmer-card__name{
    font-size:1.9rem !important;
  }

  /* Details always visible on mobile */

  .farmer-card__detail{
    max-height:170px;

    opacity:1;

    transform:none;

    margin-top:15px;

    padding-top:14px;

    border-color:rgba(255,255,255,.14);
  }

  .farmer-card__tag{
    top:15px !important;
    right:15px !important;
  }
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  .farmer-card,
  .farmer-card img,
  .farmer-card::after,
  .farmer-card__tag,
  .farmer-card__detail{
    :none !important;
  }

  .farmer-card:hover{
    transform:none !important;
  }
}

/* ============================================================
   PREMIUM FOOTER
   Botanical Biotechnology — Luxury Glass
   ============================================================ */

.footer--premium{
  position:relative;
  overflow:hidden;

  color:#fff;

  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(94,157,78,.20),
      transparent 30rem
    ),
    radial-gradient(
      circle at 88% 80%,
      rgba(218,182,83,.10),
      transparent 27rem
    ),
    radial-gradient(
      circle at 55% 45%,
      rgba(44,105,57,.16),
      transparent 34rem
    ),
    linear-gradient(
      145deg,
      #03150a 0%,
      #082514 48%,
      #03160a 100%
    ) !important;

  border-top:1px solid rgba(255,255,255,.08);

  padding-top:65px!important;
  padding-bottom:25px!important;
}


/* ============================================================
   BACKGROUND BIOLOGY
   ============================================================ */

.footer--premium::before{
  content:"";

  position:absolute;

  width:700px;
  height:700px;

  left:-430px;
  bottom:-420px;

  border-radius:50%;

  border:1px solid rgba(118,174,96,.08);

  box-shadow:
    0 0 0 75px rgba(118,174,96,.025),
    0 0 0 150px rgba(118,174,96,.018),
    0 0 0 225px rgba(118,174,96,.012);

  pointer-events:none;
}


.footer--premium::after{
  content:"";

  position:absolute;

  width:500px;
  height:500px;

  right:-260px;
  top:-260px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(215,180,86,.13),
      transparent 68%
    );

  filter:blur(20px);

  pointer-events:none;
}


/* ============================================================
   FOOTER TOP
   ============================================================ */

.footer--premium .container{
  position:relative;
  z-index:3;
}


.footer--premium .footer__top{
  position:relative;

  display:grid;

  grid-template-columns:
    1.45fr
    .75fr
    .75fr
    1fr;

  gap:65px;

  padding-bottom:40px;
}


/* subtle separator */

.footer--premium .footer__top::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.12) 20%,
      rgba(255,255,255,.12) 80%,
      transparent
    );
}


/* ============================================================
   BRAND
   ============================================================ */

.footer--premium .footer__brand{
  max-width:390px;
}


.footer--premium .footer__brand-logo{
  display:flex;

  align-items:center;

  gap:13px;

  color:#fff;

  font-family:var(--font-display);

  font-size:1.65rem;

  font-weight:600;

  letter-spacing:-.035em;
}


.footer--premium .footer__brand-logo svg{
  width:43px;
  height:43px;

  filter:
    drop-shadow(0 7px 18px rgba(83,151,73,.30));

  :
    transform .5s var(--ultra-ease),
    filter .5s ease;
}


.footer--premium .footer__brand-logo:hover svg{
  transform:
    rotate(-6deg)
    scale(1.08);

  filter:
    drop-shadow(0 10px 25px rgba(100,177,83,.48));
}


/* ============================================================
   STATEMENT
   ============================================================ */

.footer--premium .footer__statement{
  margin-top:22px;

  max-width:360px;

  color:rgba(220,235,214,.65);

  font-size:.88rem;

  line-height:1.75;
}


/* ============================================================
   SOCIAL ICONS
   ============================================================ */

.footer--premium .footer__social{
  display:flex;

  align-items:center;

  gap:10px;

  margin-top:27px;
}


.footer--premium .footer__social a{
  position:relative;

  width:42px;
  height:42px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:13px;

  color:rgba(255,255,255,.72);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.035)
    ) !important;

  border:1px solid rgba(255,255,255,.12)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 28px rgba(0,0,0,.12);

  backdrop-filter:blur(15px);

  :
    transform .45s var(--ultra-ease),
    background .4s ease,
    color .35s ease,
    border-color .35s ease,
    box-shadow .4s ease;

  overflow:hidden;
}


.footer--premium .footer__social a::before{
  content:"";

  position:absolute;

  width:70px;
  height:70px;

  top:-40px;
  right:-40px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(107,170,91,.35),
      transparent 70%
    );

  opacity:0;

  :.5s ease;
}


.footer--premium .footer__social a:hover{
  transform:
    translateY(-6px)
    scale(1.06);

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #5f9c55,
      #245d34
    ) !important;

  border-color:rgba(255,255,255,.28)!important;

  box-shadow:
    0 15px 32px rgba(30,94,44,.30),
    inset 0 1px 0 rgba(255,255,255,.22);
}


.footer--premium .footer__social a:hover::before{
  opacity:1;
}


/* ============================================================
   FOOTER COLUMNS
   ============================================================ */

.footer--premium .footer__col{
  position:relative;
}


.footer--premium .footer__col h4{
  margin-bottom:22px;

  color:#fff;

  font-family:var(--font-mono);

  font-size:.67rem;

  font-weight:600;

  text-transform:uppercase;

  letter-spacing:.13em;
}


.footer--premium .footer__col h4::after{
  content:"";

  display:block;

  width:30px;
  height:2px;

  margin-top:10px;

  border-radius:10px;

  background:
    linear-gradient(
      90deg,
      #6ca55d,
      #d5b55e
    );
}


/* ============================================================
   LINKS
   ============================================================ */

.footer--premium .footer__col ul{
  display:flex;

  flex-direction:column;

  gap:12px;
}


.footer--premium .footer__col li{
  list-style:none;
}


.footer--premium .footer__col a{
  position:relative;

  display:inline-flex;

  align-items:center;

  color:rgba(220,234,214,.62)!important;

  font-size:.81rem;

  :
    color .35s ease,
    transform .4s var(--ultra-ease);
}


.footer--premium .footer__col a::before{
  content:"";

  width:0;
  height:1px;

  margin-right:0;

  background:#d9bb63;

  :
    width .4s var(--ultra-ease),
    margin-right .4s var(--ultra-ease);
}


.footer--premium .footer__col a:hover{
  color:#fff!important;

  transform:translateX(5px);
}


.footer--premium .footer__col a:hover::before{
  width:13px;

  margin-right:7px;
}


/* ============================================================
   NEWSLETTER
   ============================================================ */

.footer--premium .footer__newsletter{
  margin-top:30px;
}


.footer--premium .footer__newsletter h4{
  margin-top:0!important;

  margin-bottom:13px!important;
}


.footer--premium .footer__newsletter form{
  position:relative;

  display:flex;

  width:100%;

  padding:5px;

  border-radius:15px;

  background:
    rgba(255,255,255,.055);

  border:1px solid rgba(255,255,255,.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 15px 35px rgba(0,0,0,.12);

  backdrop-filter:blur(15px);
}


.footer--premium .footer__newsletter input{
  min-width:0;
  width:100%;

  height:42px;

  padding:0 12px;

  color:#fff!important;

  background:transparent!important;

  border:0!important;

  outline:0!important;

  font-size:.78rem;
}


.footer--premium .footer__newsletter input::placeholder{
  color:rgba(220,234,214,.42);
}


.footer--premium .footer__newsletter button{
  flex-shrink:0;

  width:42px;
  height:42px;

  display:flex;

  align-items:center;
  justify-content:center;

  border:0;

  border-radius:11px;

  color:#fff;

  cursor:pointer;

  background:
    linear-gradient(
      135deg,
      #68a35b,
      #285e35
    );

  box-shadow:
    0 8px 20px rgba(29,89,43,.25),
    inset 0 1px 0 rgba(255,255,255,.20);

  :
    transform .4s var(--ultra-ease),
    box-shadow .4s ease;
}


.footer--premium .footer__newsletter button:hover{
  transform:
    translateX(3px)
    scale(1.04);

  box-shadow:
    0 12px 27px rgba(29,89,43,.35);
}


/* ============================================================
   BOTTOM BAR
   ============================================================ */

.footer--premium .footer__bottom{
  position:relative;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  padding-top:25px;

  color:rgba(220,234,214,.43);

  font-family:var(--font-mono);

  font-size:.61rem;

  letter-spacing:.02em;
}


.footer--premium .footer__bottom-links{
  display:flex;

  align-items:center;

  gap:25px;
}


.footer--premium .footer__bottom-links a{
  color:rgba(220,234,214,.43);

  :
    color .3s ease;
}


.footer--premium .footer__bottom-links a:hover{
  color:#d9bb63;
}


/* ============================================================
   GOLD MICRO-LINE
   ============================================================ */

.footer--premium .footer__bottom::before{
  content:"";

  position:absolute;

  left:0;
  top:-1px;

  width:80px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      #d9bb63,
      transparent
    );

  opacity:.7;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1050px){

  .footer--premium .footer__top{
    grid-template-columns:
      1.3fr
      1fr
      1fr;

    gap:45px;
  }

  .footer--premium .footer__brand{
    grid-column:1 / -1;

    max-width:550px;
  }
}


@media(max-width:700px){

  .footer--premium{
    padding-top:65px!important;
    padding-bottom:20px!important;
  }

  .footer--premium .footer__top{
    grid-template-columns:1fr;

    gap:38px;

    padding-bottom:45px;
  }

  .footer--premium .footer__brand{
    grid-column:auto;
  }

  .footer--premium .footer__statement{
    max-width:100%;
  }

  .footer--premium .footer__col{
    padding-bottom:5px;
  }

  .footer--premium .footer__col ul{
    gap:10px;
  }

  .footer--premium .footer__bottom{
    flex-direction:column;

    align-items:flex-start;

    gap:15px;

    padding-top:22px;
  }

  .footer--premium .footer__bottom-links{
    gap:18px;
    flex-wrap:wrap;
  }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media(max-width:420px){

  .footer--premium .footer__brand-logo{
    font-size:1.4rem;
  }

  .footer--premium .footer__social a{
    width:40px;
    height:40px;
  }

  .footer--premium .footer__bottom{
    font-size:.57rem;
  }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  .footer--premium *,
  .footer--premium *::before,
  .footer--premium *::after{
    :none!important;
    animation:none!important;
  }
}

.footer--premium ul
{
    padding-left:0;
}

/* ============================================================
   GSAP PERFORMANCE LAYER
   Layout is intentionally unchanged. Only animation/compositing
   work is reduced so scrolling and hover remain responsive.
   ============================================================ */

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .solution-card,
  .product-card,
  .farmer-card,
  .challenge-card,
  .challenge__item,
  .journey__step {
    /* GSAP owns transform; don't let CSS  fight it. */
    -property: box-shadow, border-color, background-color !important;
  }

  .solution-card:hover,
  .product-card:hover,
  .farmer-card:hover,
  .challenge-card:hover,
  .challenge__item:hover,
  .journey__step:hover {
    /* Transform is supplied by GSAP. */
    transform: none;
  }

  .product-card__media img,
  .farmer-card img {
    : none !important;
  }

  .product-card:hover .product-card__media img,
  .farmer-card:hover img {
    /* GSAP handles image scale. Keep the original color treatment. */
    transform: none;
  }
}

/* The glass/blur layers are visually decorative and are expensive while
   scrolling. Keep their colors, remove only the backdrop blur. */
.solution-card,
.soil-status,
.soil-layer,
.soil-layer-premium,
.product-card__cat,
.farmer-card__tag,
.about-split__badge,
.challenge-label,
.section--cream .eyebrow,
.footer--premium .footer__newsletter {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Remove large-area blur filters that trigger repeated repainting. */
.challenge-bg-glow,
.challenge-visual__glow,
.section--cream::after {
  filter: none !important;
}

/* Keep image color correction, but don't animate the filter on hover. */
.product-card__media img,
.farmer-card img,
.soil-viz-premium img {
  -property: transform !important;
}


/* Continuous glow/pulse is disabled; static glow remains. */
.soil-status__pulse {
  animation: none !important;
}

/* Avoid animating huge moving reflection pseudo-elements. */
.solution-card::after,
.product-card::after {
  display: none !important;
}

/* Don't promote the whole page; only elements actually animated by GSAP. */
.solution-card,
.product-card,
.farmer-card,
.challenge-card,
.challenge__item,
.journey__step,
.product-card__media img,
.farmer-card img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .solution-card,
  .product-card,
  .farmer-card,
  .challenge-card,
  .challenge__item,
  .journey__step,
  .product-card__media img,
  .farmer-card img {
    : none !important;
    transform: none !important;
  }
}

/* ============================================================
   SOLUTION IMAGE ICON
   ============================================================ */

.solution-card__icon{
  position:relative;
  z-index:4;

  width:150px !important;
  height:150px !important;

  margin-top:30px;

  padding:5px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  border-radius:24px !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #dcebd5
    ) !important;

  border:1px solid rgba(70,120,62,.16);

  box-shadow:
    0 15px 35px rgba(42,91,43,.12),
    inset 0 1px 0 #fff;

  transition:
    transform .55s var(--ultra-ease),
    box-shadow .55s var(--ultra-ease);
}


/* Image */

.solution-card__icon img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  border-radius:19px;

  transform:scale(1.02);

  filter:
    saturate(1.05)
    contrast(1.02);

  transition:
    transform .65s var(--ultra-ease),
    filter .5s ease;
}


/* Soft glow behind image */

.solution-card__icon::before{
  content:"";

  position:absolute;

  z-index:-1;

  inset:-15px;

  border-radius:30px;

  background:
    radial-gradient(
      circle,
      rgba(101,164,83,.28),
      transparent 68%
    );

  filter:blur(15px);

  opacity:0;

  transform:scale(.7);

  transition:
    opacity .5s ease,
    transform .6s var(--ultra-ease);
}


/* Gloss */

.solution-card__icon::after{
  content:"";

  position:absolute;

  z-index:3;

  width:45px;
  height:150%;

  left:-80px;
  top:-25%;

  transform:rotate(25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.55),
      transparent
    );

  transition:
    left .75s var(--ultra-ease);

  pointer-events:none;
}


/* Hover */

.solution-card:hover .solution-card__icon{
  transform:
    translateY(-7px)
    scale(1.07);

  box-shadow:
    0 22px 45px rgba(40,98,45,.22),
    0 0 25px rgba(95,155,78,.12),
    inset 0 1px 0 #fff;
}


.solution-card:hover .solution-card__icon img{
  transform:scale(1.12);

  filter:
    saturate(1.18)
    contrast(1.05);
}


.solution-card:hover .solution-card__icon::before{
  opacity:1;

  transform:scale(1);
}


.solution-card:hover .solution-card__icon::after{
  left:125%;
}


/* ============================================================
   DIFFERENT IMAGE TREATMENTS
   ============================================================ */

.solution-card:nth-child(1)
.solution-card__icon img{
  object-position:center;
}

.solution-card:nth-child(2)
.solution-card__icon img{
  object-position:center;
}

.solution-card:nth-child(3)
.solution-card__icon img{
  object-position:center;
}

.solution-card:nth-child(4)
.solution-card__icon img{
  object-position:center;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:640px){

  .solution-card__icon{
    width:70px !important;
    height:70px !important;

    margin-top:23px;

    border-radius:20px !important;
  }

  .solution-card__icon img{
    border-radius:15px;
  }
}

/* ============================================================
   OUR IMPACT — PREMIUM AGRI BIOTECH
============================================================ */

.impact-section{
  position:relative;
  overflow:hidden;

  padding:110px 0 120px;

  color:#fff;

  background:
    radial-gradient(
      circle at 5% 20%,
      rgba(92,161,82,.20),
      transparent 30rem
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(215,180,78,.10),
      transparent 28rem
    ),
    linear-gradient(
      135deg,
      #061b0d 0%,
      #0b321b 48%,
      #06190c 100%
    );
}


/* ============================================================
   BACKGROUND DECORATION
============================================================ */

.impact-section::before{
  content:"";

  position:absolute;

  width:650px;
  height:650px;

  left:-400px;
  top:-300px;

  border-radius:50%;

  border:1px solid rgba(123,180,103,.08);

  box-shadow:
    0 0 0 70px rgba(123,180,103,.018),
    0 0 0 140px rgba(123,180,103,.014),
    0 0 0 210px rgba(123,180,103,.010);

  pointer-events:none;
}


.impact-section::after{
  content:"";

  position:absolute;

  width:500px;
  height:500px;

  right:-280px;
  bottom:-250px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(220,187,91,.13),
      transparent 70%
    );

  filter:blur(30px);

  pointer-events:none;
}


.impact-section .container{
  position:relative;
  z-index:2;
}


/* ============================================================
   HEADING
============================================================ */

.impact-heading{
  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:60px;

  margin-bottom:60px;
}


.impact-heading > div{
  max-width:700px;
}


.impact-eyebrow{
  display:inline-flex;

  align-items:center;

  gap:9px;

  padding:9px 15px;

  border-radius:999px;

  color:#b9e6aa;

  background:rgba(94,164,83,.12);

  border:1px solid rgba(113,177,98,.20);

  font-size:.68rem;

  font-weight:700;

  letter-spacing:.10em;

  text-transform:uppercase;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}


.impact-eyebrow i{
  font-size:.9rem;
}


.impact-heading h2{
  margin:22px 0 0;

  font-size:clamp(2.8rem,5vw,5rem);

  line-height:.95;

  letter-spacing:-.065em;

  color:#fff;

  max-width:750px;
}


.impact-heading h2 span{
  display:block;

  background:
    linear-gradient(
      90deg,
      #91c976,
      #dabe62
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}


.impact-heading > p{
  max-width:430px;

  margin:0 0 5px;

  color:rgba(224,239,219,.63);

  font-size:.92rem;

  line-height:1.75;
}


/* ============================================================
   MAIN LAYOUT
============================================================ */

.impact-layout{
  display:grid;

  grid-template-columns:
    1.05fr
    .95fr;

  gap:28px;

  align-items:stretch;
}


/* ============================================================
   LEFT DATA
============================================================ */

.impact-data{
  display:flex;

  flex-direction:column;

  gap:20px;
}


/* ============================================================
   HERO STAT
============================================================ */

.impact-hero-card{
  position:relative;

  overflow:hidden;

  padding:34px;

  min-height:330px;

  border-radius:30px;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(220,188,92,.14),
      transparent 18rem
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.105),
      rgba(255,255,255,.035)
    );

  border:1px solid rgba(255,255,255,.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 25px 60px rgba(0,0,0,.16);

  backdrop-filter:blur(20px);
}


.impact-hero-card::after{
  content:"";

  position:absolute;

  width:230px;
  height:230px;

  right:-100px;
  bottom:-100px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(91,164,79,.17),
      transparent 70%
    );

  pointer-events:none;
}


.impact-hero-top{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;
}


.impact-label{
  color:rgba(225,239,220,.48);

  font-family:monospace;

  font-size:.63rem;

  font-weight:700;

  letter-spacing:.13em;
}


.impact-live{
  display:inline-flex;

  align-items:center;

  gap:8px;

  padding:7px 11px;

  border-radius:999px;

  color:#a9d99a;

  background:rgba(85,158,72,.10);

  border:1px solid rgba(101,174,87,.16);

  font-size:.62rem;

  font-weight:600;
}


.impact-live i{
  width:6px;
  height:6px;

  display:block;

  border-radius:50%;

  background:#75c45f;

  box-shadow:
    0 0 0 4px rgba(117,196,95,.10),
    0 0 14px rgba(117,196,95,.45);
}


.impact-hero-number{
  margin-top:35px;

  font-size:clamp(4rem,7vw,6.8rem);

  line-height:.85;

  font-weight:700;

  letter-spacing:-.075em;

  background:
    linear-gradient(
      135deg,
      #fff 15%,
      #b8dfaa 55%,
      #d9ba61 100%
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}


.impact-hero-number span{
  color:#d7b85c;
}


.impact-hero-title{
  margin-top:14px;

  color:#fff;

  font-size:1.2rem;

  font-weight:600;
}


.impact-hero-card p{
  max-width:560px;

  margin-top:11px;

  color:rgba(221,235,216,.57);

  font-size:.82rem;

  line-height:1.65;
}


.impact-progress{
  width:100%;

  height:4px;

  margin-top:25px;

  overflow:hidden;

  border-radius:10px;

  background:rgba(255,255,255,.08);
}


.impact-progress span{
  display:block;

  width:82%;

  height:100%;

  border-radius:10px;

  background:
    linear-gradient(
      90deg,
      #4d9a52,
      #8bc56c,
      #d4b25a
    );

  box-shadow:
    0 0 15px rgba(110,180,87,.30);
}


.impact-hero-footer{
  position:relative;

  z-index:2;

  display:flex;

  justify-content:space-between;

  margin-top:18px;

  color:rgba(225,238,220,.43);

  font-size:.61rem;

  font-family:monospace;

  letter-spacing:.05em;
}


.impact-hero-footer span{
  display:flex;

  align-items:center;

  gap:7px;
}


.impact-hero-footer i{
  color:#8fbe78;
}


/* ============================================================
   SMALL STATISTICS
============================================================ */

.impact-stat-grid{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:20px;
}


.impact-stat-card{
  position:relative;

  min-height:145px;

  display:flex;

  align-items:center;

  gap:18px;

  padding:24px;

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,.035)
    );

  border:1px solid rgba(255,255,255,.10);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter:blur(15px);

  transition:
    transform .45s ease,
    background .45s ease,
    border-color .45s ease,
    box-shadow .45s ease;
}


.impact-stat-card:hover{
  transform:translateY(-7px);

  background:
    linear-gradient(
      145deg,
      rgba(100,166,88,.16),
      rgba(255,255,255,.045)
    );

  border-color:rgba(126,186,108,.23);

  box-shadow:
    0 20px 40px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.11);
}


.impact-stat-icon{
  width:52px;
  height:52px;

  flex-shrink:0;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:17px;

  color:#a9d78f;

  background:
    linear-gradient(
      145deg,
      rgba(105,174,87,.20),
      rgba(52,116,57,.10)
    );

  border:1px solid rgba(110,177,91,.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);
}


.impact-stat-icon i{
  font-size:1.25rem;
}


.impact-stat-number{
  color:#fff;

  font-size:2rem;

  line-height:1;

  font-weight:700;

  letter-spacing:-.04em;
}


.impact-stat-number span{
  color:#d9b95d;
}


.impact-stat-name{
  margin-top:7px;

  color:rgba(224,237,219,.51);

  font-size:.70rem;

  line-height:1.3;
}


.impact-stat-arrow{
  position:absolute;

  top:18px;
  right:18px;

  color:rgba(210,226,205,.32);

  font-size:.9rem;

  transition:
    color .35s ease,
    transform .35s ease;
}


.impact-stat-card:hover .impact-stat-arrow{
  color:#d8ba60;

  transform:translate(3px,-3px);
}


/* ============================================================
   CERTIFICATIONS
============================================================ */

.impact-certifications{
  display:flex;

  align-items:center;

  gap:12px;

  flex-wrap:wrap;

  margin-top:3px;
}


.impact-cert{
  display:flex;

  align-items:center;

  gap:10px;

  padding:10px 15px;

  border-radius:14px;

  background:rgba(255,255,255,.055);

  border:1px solid rgba(255,255,255,.09);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}


.impact-cert > i{
  color:#83bd70;

  font-size:1rem;
}


.impact-cert small{
  display:block;

  color:rgba(225,238,220,.38);

  font-size:.52rem;

  text-transform:uppercase;

  letter-spacing:.08em;
}


.impact-cert strong{
  display:block;

  margin-top:1px;

  color:#dcebd6;

  font-size:.69rem;
}


.impact-cert--text{
  margin-left:auto;

  display:block;

  border:0;

  background:transparent;

  box-shadow:none;

  text-align:right;
}


.impact-cert--text span{
  display:block;

  color:rgba(225,238,220,.30);

  font-family:monospace;

  font-size:.5rem;

  letter-spacing:.15em;
}


.impact-cert--text strong{
  color:#d8b95e;

  font-family:monospace;

  letter-spacing:.12em;
}


/* ============================================================
   PRESENCE PANEL
============================================================ */

.impact-presence{
  position:relative;

  min-height:100%;

  padding:28px;

  border-radius:32px;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(71,142,70,.18),
      transparent 20rem
    ),
    linear-gradient(
      145deg,
      #0e4a29,
      #07331d
    );

  border:1px solid rgba(129,194,109,.19);

  box-shadow:
    0 30px 80px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.09);
}


/* ============================================================
   PRESENCE HEADER
============================================================ */

.presence-header{
  position:relative;

  z-index:10;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;
}


.presence-title{
  display:flex;

  align-items:center;

  gap:13px;
}


.presence-icon{
  width:49px;
  height:49px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#fff;

  background:
    linear-gradient(
      145deg,
      #24b55e,
      #078447
    );

  box-shadow:
    0 8px 25px rgba(21,153,76,.22);
}


.presence-title span{
  display:block;

  color:rgba(225,241,220,.39);

  font-family:monospace;

  font-size:.52rem;

  letter-spacing:.12em;
}


.presence-title h3{
  margin:3px 0 0;

  color:#fff;

  font-size:1.35rem;

  letter-spacing:-.025em;
}


.presence-status{
  display:flex;

  align-items:center;

  gap:7px;

  padding:7px 11px;

  border-radius:999px;

  color:#a6d69a;

  background:rgba(96,176,84,.10);

  border:1px solid rgba(107,184,91,.14);

  font-size:.59rem;
}


.presence-status i{
  width:5px;
  height:5px;

  border-radius:50%;

  background:#72c967;

  box-shadow:
    0 0 10px #72c967;
}


/* ============================================================
   NETWORK VISUAL
============================================================ */

.presence-visual{
  position:relative;

  height:440px;

  margin-top:20px;

  overflow:hidden;

  border-radius:25px;

  background:
    radial-gradient(
      circle at center,
      #0c5a31,
      #063b24 65%,
      #052d1d 100%
    );

  border:1px solid rgba(157,215,136,.10);
}


/* Grid */

.presence-grid{
  position:absolute;

  inset:0;

  opacity:.15;

  background-image:
    linear-gradient(
      rgba(150,208,132,.18) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(150,208,132,.18) 1px,
      transparent 1px
    );

  background-size:42px 42px;

  mask-image:
    radial-gradient(
      circle at center,
      black,
      transparent 72%
    );
}


/* ============================================================
   ORBITS
============================================================ */

.presence-orbit{
  position:absolute;

  left:50%;
  top:50%;

  border-radius:50%;

  border:1px solid rgba(131,193,112,.13);

  transform:translate(-50%,-50%);
}


.presence-orbit--1{
  width:190px;
  height:190px;

  animation:impactOrbit 12s linear infinite;
}


.presence-orbit--2{
  width:290px;
  height:290px;

  border-style:dashed;

  animation:impactOrbit 18s linear infinite reverse;
}


.presence-orbit--3{
  width:390px;
  height:390px;

  opacity:.45;

  animation:impactOrbit 24s linear infinite;
}


@keyframes impactOrbit{
  from{
    transform:translate(-50%,-50%) rotate(0deg);
  }

  to{
    transform:translate(-50%,-50%) rotate(360deg);
  }
}


/* ============================================================
   CENTER
============================================================ */

.presence-center{
  position:absolute;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  width:145px;
  height:145px;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      #177b43,
      #0a4e2c
    );

  border:1px solid rgba(154,218,134,.22);

  box-shadow:
    0 0 0 12px rgba(90,161,80,.06),
    0 0 0 30px rgba(90,161,80,.025),
    0 20px 50px rgba(0,0,0,.25);
}


.presence-center-ring{
  width:44px;
  height:44px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#dcefd3;

  background:rgba(255,255,255,.08);

  border:1px solid rgba(255,255,255,.12);

  margin-bottom:8px;
}


.presence-center strong{
  color:#fff;

  font-size:.85rem;

  letter-spacing:.10em;
}


.presence-center span{
  margin-top:4px;

  color:rgba(220,238,214,.47);

  font-family:monospace;

  font-size:.48rem;

  letter-spacing:.04em;
}


/* ============================================================
   NETWORK POINTS
============================================================ */

.network-point{
  position:absolute;

  width:11px;
  height:11px;

  border-radius:50%;

  background:#75d265;

  border:2px solid #164e2e;

  box-shadow:
    0 0 0 5px rgba(117,210,101,.08),
    0 0 20px rgba(117,210,101,.50);

  animation:
    networkPulse 2.5s ease-in-out infinite;
}


@keyframes networkPulse{

  0%,100%{
    transform:scale(1);
    opacity:.75;
  }

  50%{
    transform:scale(1.45);
    opacity:1;
  }

}


.point-1{
  left:21%;
  top:30%;
}

.point-2{
  left:32%;
  top:67%;

  animation-delay:.5s;
}

.point-3{
  right:22%;
  top:26%;

  animation-delay:1s;
}

.point-4{
  right:18%;
  bottom:25%;

  animation-delay:1.5s;
}

.point-5{
  left:16%;
  bottom:20%;

  animation-delay:2s;
}

.point-6{
  right:34%;
  top:16%;

  animation-delay:1.2s;
}


/* ============================================================
   NETWORK LINES
============================================================ */

.network-line{
  position:absolute;

  height:1px;

  transform-origin:left center;

  background:
    linear-gradient(
      90deg,
      rgba(105,195,93,.50),
      transparent
    );

  opacity:.45;
}


.line-1{
  width:180px;

  left:21%;
  top:30%;

  transform:rotate(28deg);
}

.line-2{
  width:155px;

  left:32%;
  top:67%;

  transform:rotate(-25deg);
}

.line-3{
  width:175px;

  left:51%;
  top:51%;

  transform:rotate(-42deg);
}

.line-4{
  width:160px;

  left:51%;
  top:51%;

  transform:rotate(32deg);
}


/* ============================================================
   FLOATING CARDS
============================================================ */

.presence-floating-card{
  position:absolute;

  z-index:10;

  left:22px;
  top:24px;

  display:flex;

  align-items:center;

  gap:10px;

  padding:11px 14px;

  border-radius:15px;

  background:
    rgba(4,35,21,.60);

  border:1px solid rgba(255,255,255,.10);

  box-shadow:
    0 12px 30px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter:blur(15px);
}


.presence-floating-card > i{
  color:#87ca72;

  font-size:1rem;
}


.presence-floating-card strong{
  display:block;

  color:#fff;

  font-size:.95rem;
}


.presence-floating-card span{
  display:block;

  margin-top:2px;

  color:rgba(221,237,216,.45);

  font-size:.52rem;
}


.presence-floating-card--bottom{
  left:auto;
  right:22px;

  top:auto;
  bottom:24px;
}


/* ============================================================
   PRESENCE FOOTER
============================================================ */

.presence-footer{
  display:grid;

  grid-template-columns:auto 1fr auto;

  align-items:center;

  gap:15px;

  margin-top:17px;
}


.presence-footer > div:not(.presence-bar){
  display:flex;

  flex-direction:column;

  gap:3px;
}


.presence-footer span{
  color:rgba(219,237,214,.36);

  font-family:monospace;

  font-size:.49rem;

  letter-spacing:.10em;
}


.presence-footer strong{
  color:#dcebd7;

  font-size:.72rem;
}


.presence-bar{
  height:3px;

  overflow:hidden;

  border-radius:10px;

  background:rgba(255,255,255,.08);
}


.presence-bar span{
  display:block;

  width:78%;

  height:100%;

  background:
    linear-gradient(
      90deg,
      #55a852,
      #d4b15a
    );
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media(max-width:1100px){

  .impact-layout{
    grid-template-columns:1fr;
  }

  .impact-presence{
    min-height:620px;
  }

  .presence-visual{
    height:450px;
  }

}


@media(max-width:760px){

  .impact-section{
    padding:80px 0 90px;
  }

  .impact-heading{
    display:block;

    margin-bottom:40px;
  }

  .impact-heading h2{
    font-size:3rem;
  }

  .impact-heading > p{
    margin-top:22px;

    max-width:600px;
  }

  .impact-hero-card{
    padding:25px;

    min-height:310px;
  }

  .impact-hero-number{
    font-size:4rem;
  }

  .impact-stat-grid{
    grid-template-columns:1fr;
  }

  .impact-stat-card{
    min-height:120px;
  }

  .impact-cert--text{
    display:none;
  }

  .impact-presence{
    padding:18px;

    min-height:auto;

    border-radius:25px;
  }

  .presence-visual{
    height:390px;
  }

  .presence-floating-card{
    left:15px;
    top:15px;
  }

  .presence-floating-card--bottom{
    left:auto;
    right:15px;
    top:auto;
    bottom:15px;
  }

  .presence-center{
    width:120px;
    height:120px;
  }

  .presence-orbit--1{
    width:165px;
    height:165px;
  }

  .presence-orbit--2{
    width:250px;
    height:250px;
  }

  .presence-orbit--3{
    width:330px;
    height:330px;
  }

}


@media(max-width:480px){

  .impact-heading h2{
    font-size:2.55rem;
  }

  .impact-hero-top{
    align-items:flex-start;
    flex-direction:column;
  }

  .impact-hero-number{
    margin-top:27px;

    font-size:3.5rem;
  }

  .impact-hero-footer{
    font-size:.52rem;
  }

  .presence-header{
    align-items:flex-start;
  }

  .presence-status{
    display:none;
  }

  .presence-title h3{
    font-size:1.15rem;
  }

  .presence-visual{
    height:350px;
  }

  .presence-floating-card{
    transform:scale(.9);
    transform-origin:left top;
  }

  .presence-floating-card--bottom{
    transform-origin:right bottom;
  }

  .presence-center{
    width:105px;
    height:105px;
  }

  .presence-center-ring{
    width:35px;
    height:35px;
  }

  .presence-center strong{
    font-size:.72rem;
  }

  .presence-center span{
    font-size:.43rem;
  }

  .presence-footer{
    grid-template-columns:1fr auto;

    gap:10px;
  }

  .presence-bar{
    grid-column:1 / -1;

    grid-row:2;
  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media(prefers-reduced-motion:reduce){

  .impact-section *,
  .impact-section *::before,
  .impact-section *::after{
    animation:none!important;

    transition:none!important;
  }
}

/* ============================================================
   BLOG SECTION
   Premium Botanical / Agricultural Theme
============================================================ */

.blog-section{
  position:relative;

  overflow:hidden;

  padding:110px 0 115px;

  color:#fff;

  background:
    radial-gradient(
      circle at 5% 15%,
      rgba(94,160,81,.18),
      transparent 30rem
    ),
    radial-gradient(
      circle at 94% 85%,
      rgba(218,184,88,.10),
      transparent 28rem
    ),
    linear-gradient(
      135deg,
      #061b0d 0%,
      #0a3019 48%,
      #06190c 100%
    );
}


/* ============================================================
   BACKGROUND CIRCLES
============================================================ */

.blog-section::before{
  content:"";

  position:absolute;

  width:650px;
  height:650px;

  left:-450px;
  bottom:-380px;

  border-radius:50%;

  border:1px solid rgba(118,180,101,.07);

  box-shadow:
    0 0 0 80px rgba(118,180,101,.018),
    0 0 0 160px rgba(118,180,101,.013),
    0 0 0 240px rgba(118,180,101,.009);

  pointer-events:none;
}


.blog-section::after{
  content:"";

  position:absolute;

  width:450px;
  height:450px;

  right:-260px;
  top:-250px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(216,182,85,.12),
      transparent 70%
    );

  filter:blur(25px);

  pointer-events:none;
}


.blog-section .container{
  position:relative;

  z-index:2;
}


/* ============================================================
   HEADING
============================================================ */

.blog-heading{
  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:60px;

  margin-bottom:55px;
}


.blog-heading > div:first-child{
  max-width:700px;
}


.blog-eyebrow{
  display:inline-flex;

  align-items:center;

  gap:9px;

  padding:9px 15px;

  border-radius:999px;

  color:#b5dda8;

  background:rgba(93,164,80,.11);

  border:1px solid rgba(112,179,95,.18);

  font-size:.66rem;

  font-weight:700;

  letter-spacing:.10em;

  text-transform:uppercase;
}


.blog-eyebrow i{
  font-size:.9rem;
}


.blog-heading h2{
  margin:22px 0 0;

  font-size:clamp(2.8rem,5vw,4.8rem);

  line-height:.94;

  letter-spacing:-.065em;

  color:#fff;
}


.blog-heading h2 span{
  display:block;

  background:
    linear-gradient(
      90deg,
      #91ca77,
      #d8bb61
    );

  -webkit-background-clip:text;

  background-clip:text;

  color:transparent;
}


.blog-heading-right{
  max-width:420px;
}


.blog-heading-right p{
  margin:0;

  color:rgba(222,237,216,.58);

  font-size:.88rem;

  line-height:1.75;
}


/* ============================================================
   VIEW ALL
============================================================ */

.blog-view-all{
  display:inline-flex;

  align-items:center;

  gap:12px;

  margin-top:20px;

  color:#d7e9d1!important;

  font-size:.75rem;

  font-weight:700;
}


.blog-view-all span{
  width:36px;
  height:36px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #63a357,
      #285d35
    );

  box-shadow:
    0 8px 22px rgba(33,94,45,.22);

  transition:
    transform .4s var(--ultra-ease);
}


.blog-view-all:hover span{
  transform:
    translate(4px,-4px);
}


/* ============================================================
   MAIN BLOG LAYOUT
============================================================ */

.blog-layout{
  display:grid;

  grid-template-columns:
    1.35fr
    .85fr;

  gap:24px;

  align-items:stretch;
}


/* ============================================================
   FEATURED ARTICLE
============================================================ */

.blog-featured{
  position:relative;

  display:flex;

  flex-direction:column;

  min-height:600px;

  overflow:hidden;

  border-radius:30px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.035)
    );

  border:1px solid rgba(255,255,255,.12);

  box-shadow:
    0 30px 75px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.10);

  backdrop-filter:blur(16px);

  transition:
    transform .55s var(--ultra-ease),
    box-shadow .55s var(--ultra-ease);
}


.blog-featured:hover{
  transform:translateY(-10px);

  box-shadow:
    0 40px 95px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.13);
}


/* ============================================================
   FEATURED IMAGE
============================================================ */

.blog-featured-image{
  position:relative;

  height:350px;

  overflow:hidden;
}


.blog-featured-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transform:scale(1.02);

  filter:
    brightness(.78)
    saturate(1.05)
    contrast(1.05);

  transition:
    transform 1s var(--ultra-ease),
    filter 1s ease;
}


.blog-featured:hover
.blog-featured-image img{
  transform:scale(1.09);

  filter:
    brightness(.84)
    saturate(1.14)
    contrast(1.07);
}


/* Image overlay */

.blog-image-overlay{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(3,20,9,.03),
      transparent 45%,
      rgba(3,20,9,.42)
    );

  pointer-events:none;
}


/* Category */

.blog-category{
  position:absolute;

  z-index:5;

  top:20px;
  left:20px;

  padding:9px 14px;

  border-radius:999px;

  color:#fff;

  background:
    rgba(5,33,17,.55);

  border:1px solid rgba(255,255,255,.18);

  backdrop-filter:blur(15px);

  font-family:monospace;

  font-size:.59rem;

  font-weight:600;

  letter-spacing:.08em;
}


/* Featured label */

.blog-featured-label{
  position:absolute;

  z-index:5;

  left:22px;
  bottom:20px;

  display:flex;

  align-items:center;

  gap:8px;

  color:#e0edda;

  font-size:.63rem;

  font-weight:600;

  letter-spacing:.05em;
}


.blog-featured-label i{
  color:#e2bf62;

  font-size:.62rem;
}


/* ============================================================
   FEATURED CONTENT
============================================================ */

.blog-featured-content{
  display:flex;

  flex-direction:column;

  flex:1;

  padding:27px 30px 25px;
}


.blog-meta{
  display:flex;

  align-items:center;

  gap:15px;

  color:rgba(220,237,214,.43);

  font-family:monospace;

  font-size:.57rem;

  letter-spacing:.04em;
}


.blog-meta span{
  display:flex;

  align-items:center;

  gap:6px;
}


.blog-meta i{
  color:#83b873;
}


.blog-featured-content h3{
  max-width:700px;

  margin:16px 0 0;

  color:#fff;

  font-size:clamp(1.65rem,3vw,2.35rem);

  line-height:1.06;

  letter-spacing:-.04em;
}


.blog-featured-content > p{
  max-width:650px;

  margin:12px 0 0;

  color:rgba(220,235,215,.57);

  font-size:.82rem;

  line-height:1.7;
}


/* Read button */

.blog-read{
  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-top:auto;

  padding-top:20px;

  color:#dcebd6!important;

  border-top:1px solid rgba(255,255,255,.09);

  font-size:.72rem;

  font-weight:700;
}


.blog-read span{
  width:38px;
  height:38px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #63a459,
      #275d35
    );

  transition:
    transform .45s var(--ultra-ease),
    box-shadow .4s ease;
}


.blog-read:hover span{
  transform:
    translate(4px,-4px);

  box-shadow:
    0 10px 25px rgba(36,96,48,.30);
}


/* ============================================================
   SIDE BLOG
============================================================ */

.blog-side{
  display:grid;

  grid-template-rows:1fr 1fr;

  gap:24px;
}


.blog-card{
  display:grid;

  grid-template-columns:190px 1fr;

  overflow:hidden;

  border-radius:25px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.085),
      rgba(255,255,255,.03)
    );

  border:1px solid rgba(255,255,255,.10);

  box-shadow:
    0 20px 50px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.07);

  transition:
    transform .5s var(--ultra-ease),
    border-color .4s ease,
    box-shadow .5s ease;
}


.blog-card:hover{
  transform:translateY(-7px);

  border-color:rgba(118,180,101,.22);

  box-shadow:
    0 30px 65px rgba(0,0,0,.22);
}


/* ============================================================
   SMALL CARD IMAGE
============================================================ */

.blog-card-image{
  position:relative;

  overflow:hidden;

  min-height:230px;
}


.blog-card-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  filter:
    brightness(.74)
    saturate(1.05);

  transition:
    transform .9s var(--ultra-ease),
    filter .8s ease;
}


.blog-card:hover
.blog-card-image img{
  transform:scale(1.10);

  filter:
    brightness(.82)
    saturate(1.15);
}


.blog-card-category{
  position:absolute;

  left:12px;
  top:12px;

  padding:6px 9px;

  border-radius:999px;

  color:#e4efdf;

  background:rgba(4,31,15,.62);

  border:1px solid rgba(255,255,255,.14);

  backdrop-filter:blur(12px);

  font-family:monospace;

  font-size:.50rem;

  letter-spacing:.07em;
}


/* ============================================================
   SMALL CARD CONTENT
============================================================ */

.blog-card-content{
  display:flex;

  flex-direction:column;

  padding:22px;
}


.blog-card-content h3{
  margin:13px 0 0;

  color:#fff;

  font-size:1.05rem;

  line-height:1.18;

  letter-spacing:-.025em;
}


.blog-card-content p{
  margin:9px 0 0;

  color:rgba(220,235,215,.49);

  font-size:.70rem;

  line-height:1.6;
}


.blog-card-link{
  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-top:auto;

  padding-top:13px;

  color:#a9d294!important;

  font-size:.62rem;

  font-weight:700;

  border-top:1px solid rgba(255,255,255,.07);
}


.blog-card-link span{
  transition:
    transform .4s var(--ultra-ease);
}


.blog-card:hover
.blog-card-link span{
  transform:
    translate(4px,-4px);

  color:#dfc16a;
}


/* ============================================================
   TOPICS
============================================================ */

.blog-topics{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:9px;

  margin-top:25px;
}


.blog-topics > span{
  margin-right:7px;

  color:rgba(221,236,216,.32);

  font-family:monospace;

  font-size:.56rem;

  text-transform:uppercase;

  letter-spacing:.11em;
}


.blog-topics a{
  padding:8px 12px;

  border-radius:999px;

  color:rgba(220,235,215,.53)!important;

  background:rgba(255,255,255,.045);

  border:1px solid rgba(255,255,255,.08);

  font-size:.59rem;

  transition:
    background .35s ease,
    color .35s ease,
    border-color .35s ease,
    transform .35s ease;
}


.blog-topics a:hover{
  transform:translateY(-3px);

  color:#fff!important;

  background:rgba(93,157,79,.15);

  border-color:rgba(104,171,89,.22);
}


/* ============================================================
   TABLET
============================================================ */

@media(max-width:1050px){

  .blog-heading{
    display:block;
  }

  .blog-heading-right{
    margin-top:25px;

    max-width:600px;
  }

  .blog-layout{
    grid-template-columns:1fr;
  }

  .blog-featured{
    min-height:560px;
  }

  .blog-side{
    grid-template-columns:1fr 1fr;

    grid-template-rows:none;
  }

  .blog-card{
    grid-template-columns:1fr;
  }

  .blog-card-image{
    min-height:220px;
  }

  .blog-card-content{
    min-height:230px;
  }
}


/* ============================================================
   MOBILE
============================================================ */

@media(max-width:680px){

  .blog-section{
    padding:80px 0 85px;
  }

  .blog-heading{
    margin-bottom:40px;
  }

  .blog-heading h2{
    font-size:3rem;
  }

  .blog-heading-right{
    margin-top:20px;
  }

  .blog-featured{
    min-height:520px;

    border-radius:23px;
  }

  .blog-featured-image{
    height:275px;
  }

  .blog-featured-content{
    padding:22px;
  }

  .blog-featured-content h3{
    font-size:1.65rem;
  }

  .blog-side{
    grid-template-columns:1fr;

    gap:18px;
  }

  .blog-card{
    grid-template-columns:125px 1fr;

    border-radius:20px;
  }

  .blog-card-image{
    min-height:210px;
  }

  .blog-card-content{
    padding:17px;
  }

  .blog-card-content h3{
    font-size:.92rem;
  }

  .blog-card-content p{
    font-size:.65rem;
  }

  .blog-topics{
    margin-top:20px;
  }
}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media(max-width:430px){

  .blog-heading h2{
    font-size:2.55rem;
  }

  .blog-featured-image{
    height:245px;
  }

  .blog-card{
    display:block;
  }

  .blog-card-image{
    height:190px;
    min-height:190px;
  }

  .blog-card-content{
    min-height:200px;
  }

  .blog-topics > span{
    width:100%;
    margin-bottom:3px;
  }
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media(prefers-reduced-motion:reduce){

  .blog-section *,
  .blog-section *::before,
  .blog-section *::after{
    transition:none!important;
    animation:none!important;
  }

  .blog-featured:hover,
  .blog-card:hover{
    transform:none!important;
  }
}

/* ============================================================
   FARMER VIDEO STORIES
============================================================ */

.farmer-card{
  position:relative;

  overflow:hidden;

  isolation:isolate;

  border-radius:28px;

  background:#082516;

  border:1px solid rgba(255,255,255,.12);

  box-shadow:
    0 25px 65px rgba(0,0,0,.18);

  /*min-height:580px;*/

  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    box-shadow .55s ease,
    border-color .4s ease;
}


.farmer-card:hover{
  transform:translateY(-9px);

  border-color:rgba(143,194,117,.30);

  box-shadow:
    0 35px 80px rgba(0,0,0,.28),
    0 0 35px rgba(82,145,71,.10);
}


/* ============================================================
   VIDEO
============================================================ */

.farmer-card__media{
  position:absolute;

  inset:0;

  z-index:1;

  overflow:hidden;
}


.farmer-card__video{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  object-position:center;

  background:#071b0e;

  transform:scale(1.01);

  filter:
    brightness(.72)
    saturate(1.05)
    contrast(1.04);

  transition:
    transform 1s cubic-bezier(.16,1,.3,1),
    filter .8s ease;
}


.farmer-card:hover .farmer-card__video{
  transform:scale(1.08);

  filter:
    brightness(.82)
    saturate(1.13)
    contrast(1.05);
}


/* ============================================================
   VIDEO SHADE
============================================================ */

.farmer-video-shade{
  position:absolute;

  inset:0;

  z-index:2;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(3,22,11,.30) 0%,
      rgba(3,22,11,.02) 35%,
      rgba(3,22,11,.18) 52%,
      rgba(3,22,11,.92) 100%
    );
}


/* ============================================================
   PLAY BUTTON
============================================================ */

.farmer-play-btn{
  position:absolute;

  z-index:5;

  left:50%;
  top:50%;

  width:82px;
  height:82px;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:0;

  border:0;

  border-radius:50%;

  cursor:pointer;

  transform:
    translate(-50%,-50%);

  background:
    rgba(255,255,255,.13);

  border:1px solid rgba(255,255,255,.38);

  box-shadow:
    0 15px 45px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.30);

  backdrop-filter:blur(16px);

  transition:
    transform .45s cubic-bezier(.16,1,.3,1),
    background .35s ease,
    box-shadow .4s ease,
    opacity .3s ease;
}


.farmer-play-btn span{
  width:57px;
  height:57px;

  display:flex;

  align-items:center;
  justify-content:center;

  padding-left:3px;

  border-radius:50%;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #63aa58,
      #23703b
    );

  box-shadow:
    0 8px 25px rgba(24,91,43,.40),
    inset 0 1px 0 rgba(255,255,255,.25);

  transition:
    transform .4s cubic-bezier(.16,1,.3,1);
}


.farmer-play-btn i{
  font-size:1.55rem;

  line-height:1;
}


/* Play glow */

.farmer-play-btn::before{
  content:"";

  position:absolute;

  inset:-12px;

  border-radius:50%;

  border:1px solid rgba(138,201,119,.28);

  opacity:.8;

  animation:
    farmerPlayPulse 2.4s ease-out infinite;
}


@keyframes farmerPlayPulse{

  0%{
    transform:scale(.85);

    opacity:.7;
  }

  70%{
    transform:scale(1.2);

    opacity:0;
  }

  100%{
    transform:scale(1.2);

    opacity:0;
  }

}


.farmer-play-btn:hover{
  transform:
    translate(-50%,-50%)
    scale(1.10);

  background:
    rgba(255,255,255,.20);

  box-shadow:
    0 20px 55px rgba(0,0,0,.40),
    0 0 30px rgba(97,174,82,.20);
}


.farmer-play-btn:hover span{
  transform:scale(1.07);
}


/* ============================================================
   WHEN VIDEO IS PLAYING
============================================================ */

.farmer-card.is-playing
.farmer-play-btn{
  opacity:0;

  pointer-events:none;
}


.farmer-card.is-playing:hover
.farmer-play-btn{
  opacity:1;
}


/* ============================================================
   CATEGORY
============================================================ */

.farmer-card__tag{
  position:absolute;

  z-index:6;

  top:20px;
  right:20px;

  padding:8px 13px;

  border-radius:999px;

  color:#fff;

  background:
    rgba(6,34,18,.58);

  border:1px solid rgba(255,255,255,.17);

  backdrop-filter:blur(15px);

  font-family:monospace;

  font-size:.59rem;

  font-weight:600;

  text-transform:uppercase;

  letter-spacing:.08em;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10);
}


/* ============================================================
   VIDEO LABEL
============================================================ */

.farmer-video-label{
  position:absolute;

  z-index:6;

  top:22px;
  left:22px;

  display:flex;

  align-items:center;

  gap:7px;

  padding:7px 10px;

  color:rgba(240,248,235,.70);

  font-family:monospace;

  font-size:.51rem;

  letter-spacing:.09em;

  text-transform:uppercase;
}


.farmer-video-label i{
  color:#8ecb78;

  font-size:.65rem;
}


/* ============================================================
   CONTENT OVER VIDEO
============================================================ */

.farmer-card__overlay{
  position:absolute;

  z-index:7;

  left:0;
  right:0;
  bottom:0;

  padding:30px;

  pointer-events:none;

  transform:translateY(12px);

  transition:
    transform .55s cubic-bezier(.16,1,.3,1);
}


.farmer-card:hover .farmer-card__overlay{
  transform:translateY(0);
}


/* ============================================================
   FARMER NAME
============================================================ */

.farmer-card__name{
  margin:0;

  color:#fff;

  font-size:1.55rem;

  line-height:1;

  letter-spacing:-.035em;

  text-shadow:
    0 3px 20px rgba(0,0,0,.30);
}


/* ============================================================
   META
============================================================ */

.farmer-card__meta{
  display:flex;

  align-items:center;

  gap:10px;

  margin-top:11px;
}


.farmer-card__meta span{
  color:rgba(229,241,224,.68);

  font-family:monospace;

  font-size:.57rem;

  text-transform:uppercase;

  letter-spacing:.07em;
}


.farmer-card__meta span + span::before{
  content:"";

  display:inline-block;

  width:4px;
  height:4px;

  margin-right:10px;

  vertical-align:middle;

  border-radius:50%;

  background:#7eae70;
}


/* ============================================================
   DETAILS
============================================================ */

.farmer-card__detail{
  max-height:0;

  overflow:hidden;

  margin-top:0;

  color:rgba(231,241,227,.65);

  font-size:.69rem;

  line-height:1.65;

  opacity:0;

  transition:
    max-height .65s cubic-bezier(.16,1,.3,1),
    margin-top .45s ease,
    opacity .45s ease;
}


.farmer-card:hover .farmer-card__detail{
  max-height:180px;

  margin-top:18px;

  opacity:1;
}


.farmer-card__detail strong{
  color:#cce4c1;

  font-weight:600;
}


/* ============================================================
   BOTTOM GLOW
============================================================ */

.farmer-card::after{
  content:"";

  position:absolute;

  z-index:8;

  left:20%;
  right:20%;
  bottom:-35px;

  height:80px;

  border-radius:50%;

  background:
    radial-gradient(
      ellipse,
      rgba(87,158,74,.30),
      transparent 70%
    );

  filter:blur(20px);

  opacity:0;

  transition:
    opacity .5s ease;
}


.farmer-card:hover::after{
  opacity:1;
}


/* ============================================================
   MOBILE
============================================================ */

@media(max-width:768px){

  .farmer-card{
    min-height:520px;

    border-radius:23px;
  }

  .farmer-card__overlay{
    padding:23px;
  }

  .farmer-card__name{
    font-size:1.35rem;
  }

  .farmer-play-btn{
    width:72px;
    height:72px;
  }

  .farmer-play-btn span{
    width:50px;
    height:50px;
  }

  .farmer-card__detail{
    max-height:180px;

    margin-top:15px;

    opacity:1;
  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media(prefers-reduced-motion:reduce){

  .farmer-card *,
  .farmer-card *::before,
  .farmer-card *::after{
    animation:none!important;

    transition:none!important;
  }

}