:root {
  --ink: #252820;
  --olive: #4f6322;
  --olive-dark: #334216;
  --yellow: #f4bf1f;
  --yellow-deep: #d99b00;
  --yellow-soft: #f7d765;
  --cream: #fffaf0;
  --paper: #fffdf7;
  --line: rgba(37, 40, 32, .18);
  --muted: #6f7168;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
svg { display: block; width: 100%; height: auto; }

.site-header {
  min-height: 88px;
  padding: 14px clamp(24px, 5vw, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,253,247,.92);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { 
  width: 156px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Header logo (responsive) */
.brand-mark { width: 156px; }

/* Hero logo sizing and alignment */
.hero-art {
  align-self: end;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.hero-logo {
  width: clamp(160px, 38vw, 520px);
  height: auto;
  display: block;
  max-width: 100%;
}

.brand-type { display: grid; line-height: .98; letter-spacing: .12em; }
.brand-type strong { font-size: 1.8rem; }
.brand-type span { color: var(--yellow-deep); font-weight: 800; font-size: 1.4rem; letter-spacing: .22em; }
.zipline, .hanger { stroke: var(--ink); stroke-width: 2.3; fill: none; stroke-linecap: round; }
.pulley { fill: var(--ink); }
.wagon { fill: var(--yellow); stroke: var(--ink); stroke-width: 2; }
.wagon-line, .trunk, .brow, .tired-mouth { fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; }
.wheel, .eye { fill: var(--ink); }
.elephant-body { fill:#aaa999; stroke:var(--ink); stroke-width:2; }
.elephant-ear { fill:#929181; stroke:var(--ink); stroke-width:2; }
.trees path { fill: var(--olive); }

.nav { display: flex; gap: 30px; font-size: .88rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.nav a { position: relative; }
.nav a::after {
  content:""; position:absolute; left:0; bottom:-7px; width:100%; height:2px;
  background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:.2s ease;
}
.nav a:hover::after { transform:scaleX(1); }
.menu-toggle { display:none; border:0; background:transparent; font-size:1.5rem; }

.hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  padding: clamp(60px, 8vw, 110px) clamp(24px, 6vw, 92px) 0;
  background:
    radial-gradient(circle at 68% 20%, rgba(244,191,31,.18), transparent 30%),
    linear-gradient(180deg, #fffdf7 0%, #fff8dc 100%);
  overflow: hidden;
}
.eyebrow, .section-label {
  color: var(--yellow-deep);
  font-weight: 850;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(4rem, 8vw, 8.2rem);
  line-height: .82;
  letter-spacing: -.055em;
  margin: 24px 0 30px;
  text-transform: uppercase;
}
.hero h1 span { color: var(--yellow-deep); }
.lede { max-width: 590px; font-size: clamp(1.1rem, 1.7vw, 1.45rem); color: #55574e; }
.hero-actions { display:flex; align-items:center; gap:22px; margin-top:38px; flex-wrap:wrap; }
.button {
  display:inline-flex; align-items:center; justify-content:center; min-height:52px;
  padding:0 24px; border-radius:999px; border:1px solid var(--ink);
  font-weight:800; cursor:pointer; font:inherit;
}
.button.primary { background:var(--yellow); border-color:var(--yellow); }
.button.primary:hover { background:var(--yellow-soft); }
.text-button { border-color:transparent; padding-left:6px; padding-right:6px; }
.hero-art { align-self:end; min-width:0; }
.hero-cable { stroke:var(--ink); stroke-width:5; fill:none; stroke-linecap:round; }
.hero-pulley { fill:var(--ink); }
.hero-hanger { stroke:var(--ink); stroke-width:5; }
.hero-elephant { fill:#9b9b8b; stroke:var(--ink); stroke-width:5; }
.hero-ear { fill:#858575; stroke:var(--ink); stroke-width:5; }
.hero-trunk, .hero-brow, .hero-mouth, .hero-tail { fill:none; stroke:var(--ink); stroke-width:5; stroke-linecap:round; }
.hero-eye { fill:var(--ink); }
.hero-wagon-box { fill:var(--yellow); stroke:var(--ink); stroke-width:5; }
.hero-wagon-detail { stroke:rgba(37,40,32,.5); stroke-width:3; }
.hero-wheel { fill:var(--ink); }
.hero-hub { fill:var(--yellow-soft); }
.wagon-text { fill:var(--ink); font-size:17px; font-weight:900; letter-spacing:2px; }
.hero-trees path { fill:var(--olive-dark); }
.motion-line { fill:none; stroke:var(--yellow-deep); stroke-width:5; stroke-linecap:round; opacity:.7; }
.motion-line.short { opacity:.4; }

.section { padding: clamp(78px, 9vw, 130px) clamp(24px, 7vw, 110px); }
.story { border-top:1px solid var(--line); }
.story-grid, .contact-grid {
  display:grid; grid-template-columns: .9fr 1.1fr; gap:clamp(40px, 8vw, 130px); margin-top:48px;
}
.story h2, .contact h2, .manifesto h2 {
  margin:0; font-size:clamp(3rem, 6vw, 6.5rem); line-height:.9; letter-spacing:-.045em;
}
.big-copy { font-size:clamp(1.5rem, 2.5vw, 2.35rem); line-height:1.15; margin-top:0; }
.story-grid p:not(.big-copy) { color:var(--muted); font-size:1.05rem; max-width:640px; }

.growing { background:#f5c93d; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(37,40,32,.35); margin-top:48px; border:1px solid rgba(37,40,32,.35); }
.crop-card { min-height:390px; background:#f8d95f; padding:30px; display:flex; flex-direction:column; }
.crop-card:nth-child(2) { background:#f2c72f; }
.placeholder-card { background:#e8b817; }
.crop-card .number { font-size:.75rem; font-weight:800; letter-spacing:.12em; }
.crop-card h3 { margin:auto 0 10px; font-size:2rem; line-height:1; }
.crop-card p { margin:0; max-width:290px; }
.note { font-size:.8rem; opacity:.62; margin-top:16px; }

.mushroom-icon { width:130px; height:130px; margin:auto; position:relative; }
.mushroom-icon.oyster span {
  position:absolute; left:50%; bottom:22px; width:13px; height:63px; background:var(--ink); transform-origin:bottom;
}
.mushroom-icon.oyster span::before {
  content:""; position:absolute; width:68px; height:35px; border-radius:60px 60px 13px 13px; background:var(--cream); border:4px solid var(--ink); left:-29px; top:-12px;
}
.mushroom-icon.oyster span:nth-child(1){ transform:translateX(-8px) rotate(-25deg); }
.mushroom-icon.oyster span:nth-child(2){ transform:translateX(-3px) rotate(2deg); }
.mushroom-icon.oyster span:nth-child(3){ transform:translateX(2px) rotate(25deg); }
.mushroom-icon.lions span {
  position:absolute; inset:20px; border-radius:48% 52% 55% 45%; background:var(--cream); border:4px solid var(--ink);
  box-shadow: 6px 8px 0 -2px var(--ink);
}
.mushroom-icon.lions span::after {
  content:""; position:absolute; left:42%; bottom:-42px; width:18px; height:50px; background:var(--ink); border-radius:0 0 8px 8px;
}
.question-mark { margin:auto; font-size:8rem; line-height:1; font-weight:900; color:rgba(37,40,32,.85); }

.manifesto {
  min-height:560px; padding:100px 24px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  background:var(--olive-dark); color:var(--cream);
}
.manifesto p { color:var(--yellow-soft); text-transform:uppercase; letter-spacing:.16em; font-weight:800; }
.manifesto h2 { max-width:1100px; }

.contact-grid p { font-size:1.15rem; max-width:530px; color:var(--muted); }
.location { margin-top:35px; color:var(--ink)!important; font-weight:800; }
.contact-form { display:grid; gap:20px; }
.contact-form label { display:grid; gap:8px; font-size:.8rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.contact-form input, .contact-form textarea {
  width:100%; border:0; border-bottom:2px solid var(--ink); background:transparent;
  padding:13px 3px; font:inherit; border-radius:0; resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--yellow-deep); }
.contact-form .button { justify-self:start; margin-top:8px; }

footer {
  min-height:130px; padding:35px clamp(24px, 6vw, 90px); border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; font-size:.82rem;
}
footer > :last-child { text-align:right; }
.footer-brand { font-weight:900; letter-spacing:.08em; }
.footer-brand span { color:var(--yellow-deep); }

@media (max-width: 900px) {
  .site-header { min-height:74px; }
  .brand-mark { width:86px; }
  .brand-type { display:none; }
  .menu-toggle { display:block; }
  .nav {
    display:none; position:absolute; top:74px; left:0; right:0; padding:22px 28px 30px;
    background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; gap:18px;
  }
  .nav.open { display:flex; }
  .hero { grid-template-columns:1fr; padding-top:70px; }
  .hero-art { margin-top:25px; }
  .story-grid, .contact-grid { grid-template-columns:1fr; }
  .cards { grid-template-columns:1fr; }
  .crop-card { min-height:330px; }
  footer { grid-template-columns:1fr; text-align:center; }
  footer > :last-child { text-align:center; }
}

@media (max-width: 540px) {
  .hero h1 { font-size:3.75rem; }
  .section { padding-left:22px; padding-right:22px; }
  .hero { padding-left:22px; padding-right:22px; min-height:auto; }
  .hero-art { margin-left:-20px; margin-right:-20px; }
}
.farm-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fffaf0;
  padding: 42px 6%;
}

.value-card {
  text-align: center;
  padding: 10px 40px 22px;
  position: relative;
}

/* Vertical separators */
.value-card:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 5%;
  height: 90%;
  width: 1px;
  background: #e4b62e;
}

.value-icon {
  color: #d6a800;
  font-size: 2.5rem;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}

.value-card h3 {
  margin: 12px 0 8px;
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: #282a22;
}

.value-card p {
  margin: 0 auto;
  max-width: 230px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #3f4138;
}

/* Mobile/tablet */
@media (max-width: 850px) {
  .farm-values {
    grid-template-columns: repeat(2, 1fr);
  }

  .value-card {
    padding: 30px;
  }

  .value-card::after {
    display: none;
  }

  .value-card:nth-child(1),
  .value-card:nth-child(2) {
    border-bottom: 1px solid #e4b62e;
  }
}

@media (max-width: 520px) {
  .farm-values {
    grid-template-columns: 1fr;
  }

  .value-card {
    border-bottom: 1px solid #e4b62e;
  }

  .value-card:last-child {
    border-bottom: none;
  }
}