.agri-hero {
  display: grid;
  scroll-snap-align: start;
  padding: var(--section-standard) var(--page-gutter) var(--space-8);
}

.agri-copy h1 {
  font-size: clamp(2.4rem, 1.2rem + 5vw, 5.5rem);
  max-inline-size: 12ch;
}

.agri-copy .support {
  margin-block-start: var(--space-5);
}

.agri-visual {
  margin-block-start: var(--space-7);
}

.field-scene {
  width: 100%;
  height: auto;
}

.field-rows {
  stroke: var(--color-accent);
  fill: none;
}

.upright {
  stroke: var(--color-accent);
  fill: none;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.upright:nth-child(5n+1) { animation: field-sway 5.4s ease-in-out infinite; }
.upright:nth-child(5n+2) { animation: field-sway 6.2s ease-in-out 0.4s infinite; }
.upright:nth-child(5n+3) { animation: field-sway 4.8s ease-in-out 0.9s infinite; }
.upright:nth-child(5n+4) { animation: field-sway 7s ease-in-out 0.2s infinite; }
.upright:nth-child(5n) { animation: field-sway 5.8s ease-in-out 1.1s infinite; }

@keyframes field-sway {
  0%,
  100% {
    transform: rotate(-1.2deg);
  }
  50% {
    transform: rotate(1.4deg);
  }
}

.bale {
  fill: var(--color-bg);
  stroke: var(--color-line);
}

.identity {
  fill: var(--color-accent-soft);
  stroke: var(--color-line);
}

.data-beam {
  stroke: var(--color-line);
  fill: none;
  stroke-dasharray: 8 16;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 280ms ease;
}

.agri-pinned.is-data .data-beam {
  opacity: 1;
  animation: beam-flow 2.4s linear infinite;
}

.agri-pinned.is-data .beam-b {
  animation-delay: 0.35s;
}

.agri-pinned.is-data .beam-c {
  animation-delay: 0.7s;
}

@keyframes beam-flow {
  to {
    stroke-dashoffset: -72;
  }
}

.agri-step {
  scroll-snap-align: start;
  padding: var(--section-standard) var(--page-gutter);
}

.agri-step h2 {
  font-size: var(--heading-md);
  max-inline-size: 16ch;
}

.agri-step .support {
  margin-block-start: var(--space-5);
}

.contact-section {
  display: grid;
  scroll-snap-align: start;
  gap: var(--space-8);
  padding-block: var(--space-8);
  min-height: calc(100svh - var(--header-height) - 8.5rem);
  align-content: center;
}

.contact-section h2 {
  font-size: var(--heading-md);
  max-inline-size: 18ch;
}

.contact-section .support {
  font-size: var(--text-base);
  margin-block-start: var(--space-5);
}

.contact-section .arrow-link {
  margin-block-start: var(--space-6);
}

.contact-visual {
  width: min(100%, 38rem);
}

.contact-overhead {
  animation: contact-idle 5.5s ease-in-out infinite;
}

@keyframes contact-idle {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.contact-visual .contact-wheat {
  stroke: var(--color-accent);
  stroke-width: var(--line-art-large);
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

.contact-section.is-active .contact-wheat {
  opacity: 1;
  stroke-dashoffset: 0;
  animation: wheat-pulse 2.8s var(--ease-standard) infinite;
}

.contact-section.is-active .contact-overhead {
  opacity: 0.18;
}

@keyframes wheat-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 63.99rem) {
  .agri-pinned {
    display: flex;
    flex-direction: column;
    --agri-field-h: min(40svh, 16rem);
    padding-block-end: var(--agri-field-h);
  }

  .agri-hero {
    order: 1;
    min-height: calc(100svh - var(--header-height) - var(--agri-field-h) - var(--space-7));
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0 var(--page-gutter);
  }

  .agri-copy h1 {
    font-size: clamp(2.85rem, 1.55rem + 8vw, 3.7rem);
    line-height: 0.88;
    letter-spacing: -0.05em;
    max-inline-size: none;
  }

  .agri-copy .support {
    margin-block-start: var(--space-4);
  }

  .agri-visual {
    order: 2;
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-9));
    z-index: 0;
    height: var(--agri-field-h);
    margin: 0 0 var(--space-7);
    display: grid;
    place-items: center;
    padding-inline: var(--page-gutter);
    background: var(--color-bg);
  }

  .field-scene {
    width: 100%;
    height: 100%;
    max-height: var(--agri-field-h);
  }

  .agri-step {
    order: 3;
    min-height: calc(100svh - var(--header-height));
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--agri-field-h) + var(--space-9)) var(--page-gutter) 0;
  }

  .agri-step h2 {
    font-size: var(--heading-sm);
  }

  .contact-section {
    position: relative;
    z-index: 2;
    scroll-snap-stop: always;
    gap: var(--space-5);
    padding-block: var(--space-6) var(--space-5);
    min-height: calc(100svh - var(--header-height) - 14rem);
    align-content: start;
    background: var(--color-bg);
  }

  .contact-section h2 {
    font-size: var(--heading-sm);
  }

  .contact-section .support {
    margin-block-start: var(--space-4);
  }

  .contact-section .arrow-link {
    margin-block-start: var(--space-4);
  }

  .contact-visual {
    width: min(100%, 22rem);
  }
}

@media (min-width: 64rem) {
  .agri-pinned {
    display: grid;
    grid-template-columns: minmax(18rem, 0.85fr) minmax(22rem, 1.15fr);
    align-items: start;
  }

  .agri-visual {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-4));
    margin: 0;
    height: calc(100vh - var(--header-height) - var(--space-6));
    display: grid;
    place-items: center;
    padding-inline-end: var(--page-gutter);
  }

  .agri-hero,
  .agri-step {
    grid-column: 1;
    min-height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 0;
  }

  .contact-section {
    grid-template-columns: minmax(18rem, 1fr) minmax(22rem, 1.15fr);
    align-items: center;
    min-height: calc(100svh - var(--header-height) - 8.5rem);
    padding-block: var(--space-9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .upright {
    animation: none !important;
  }

  .agri-pinned.is-data .data-beam {
    animation: none;
  }

  .contact-wheat,
  .contact-overhead {
    stroke-dashoffset: 0;
    animation: none;
  }
}