html, body { height: 100%; }
body { background: var(--forest); }

.hero {
  position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; color: #fff;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: #0A3A20 url("/static/assets/hero-farmer-1920.jpg") center right / cover no-repeat;
  background-image: image-set(url("/static/assets/hero-farmer-1600.webp") type("image/webp"), url("/static/assets/hero-farmer-1920.jpg") type("image/jpeg"));
  transform: scale(1.04); animation: settle 1.6s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes settle { to { transform: scale(1); } }
/* Deep green wash on the text side keeps the copy readable over the photo. */
.hero-shade {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(90deg, rgba(0, 38, 20, .94) 0%, rgba(0, 38, 20, .82) 34%, rgba(0, 38, 20, .35) 62%, rgba(0, 38, 20, .05) 100%),
    linear-gradient(0deg, rgba(0, 25, 14, .85) 0%, rgba(0, 25, 14, 0) 38%);
}
.top, .hero-body, .credit { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

.top { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; gap: 12px; }
.brand img { width: 40px; height: 40px; }
.brand-name { font-size: 21px; }
.tag { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }

.hero-body { align-self: center; padding-top: 40px; padding-bottom: 40px; max-width: 1200px; }
.hero-body > * { max-width: 620px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.eb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(252, 185, 0, .25); }
.hero h1 { font-size: clamp(40px, 6.2vw, 76px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; margin: 16px 0 12px; }
.hero h1 span { color: #4BD58A; display: inline-block; }
.tagline { font-size: clamp(20px, 2.6vw, 28px); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; color: #fff; }
.tagline span { display: block; color: var(--gold); font-weight: 700; }
.lead { font-size: clamp(15.5px, 1.6vw, 18px); color: rgba(255,255,255,.82); margin: 0 0 32px; max-width: 540px; }

.paths { display: grid; gap: 12px; max-width: 520px; }
.path {
  display: grid; grid-template-columns: 56px 1fr 24px; gap: 16px; align-items: center;
  padding: 16px 18px 16px 16px; border-radius: 18px; text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.path:hover { transform: translateY(-2px); }
.path:hover .go { transform: translateX(4px); }
.path .go { transition: transform .18s ease; }
.path-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; }
.path-t b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.path-t small { display: block; font-size: 13.5px; margin-top: 2px; }
.path.farmer { background: var(--gold); color: var(--forest); box-shadow: 0 18px 40px -16px rgba(252, 185, 0, .6); }
.path.farmer .path-ic { background: rgba(0, 49, 27, .12); }
.path.farmer small { color: rgba(0, 49, 27, .75); }
.path.staff { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); }
.path.staff:hover { background: rgba(255,255,255,.16); }
.path.staff .path-ic { background: rgba(255,255,255,.12); color: #4BD58A; }
.path.staff small { color: rgba(255,255,255,.72); }

.proof { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.85); }
.proof li { display: inline-flex; align-items: center; gap: 7px; }
.proof .ic { color: #4BD58A; }

.credit { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: rgba(255,255,255,.6); padding-top: 12px; padding-bottom: 20px; }
.credit a { color: rgba(255,255,255,.8); }

@media (max-width: 960px) {
  /* Phones: the farmer fills the top of the screen, the copy sits below him. */
  .hero-bg {
    bottom: auto; height: 58vh; height: 58svh;
    background-image: url("/static/assets/hero-farmer-960.jpg");
    background-image: image-set(url("/static/assets/hero-farmer-960.webp") type("image/webp"), url("/static/assets/hero-farmer-960.jpg") type("image/jpeg"));
    background-position: 86% 28%;
  }
  .hero-shade {
    bottom: auto; height: 58vh; height: 58svh;
    background: linear-gradient(180deg, rgba(0, 38, 20, .55) 0%, rgba(0, 38, 20, .05) 22%, rgba(0, 38, 20, .1) 60%, var(--forest) 100%);
  }
  .top, .hero-body, .credit { padding-left: 18px; padding-right: 18px; }
  .hero-body { align-self: end; padding-top: 34vh; padding-top: 34svh; padding-bottom: 20px; }
  .hero h1 { font-size: 40px; margin-top: 10px; }
  .hero h1, .tagline, .eyebrow { text-shadow: 0 2px 18px rgba(0, 25, 14, .6); }
  .tag { display: none; }
  .top { text-shadow: 0 1px 12px rgba(0, 25, 14, .75); }
}
@media (max-width: 420px) {
  .path { grid-template-columns: 48px 1fr 20px; gap: 12px; padding: 14px; }
  .path-ic { width: 48px; height: 48px; }
  .path-t b { font-size: 17px; }
}